/* ============================================
   AIESEC Adana Alumni - Facebook Benzeri Tasarım
   Renk Paleti: #037ef3 tabanlı
   ============================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --primary: #037ef3;
  --primary-hover: #025bb5;
  --primary-light: #e7f3ff;
  --bg: #f4f5f7;
  --bg-white: #ffffff;
  --text: #15181d;
  --text-muted: #6b7280;
  --border: #eceef2;
  --danger: #ef4444;
  --shadow: 0 2px 10px rgba(18, 24, 40, 0.06);
  --radius: 14px;
  --radius-lg: 18px;
  --blue-header: #ffffff;
  --topbar-bg: #ffffff;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; user-select: none; -webkit-user-select: none; caret-color: transparent; -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-family: inherit; }

/* Metin girilmeyen alanlarda tıklayınca metin imleci görünmesin */
body { caret-color: transparent; }
input, textarea, select,
[contenteditable], [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"] {
  caret-color: auto;
}

/* ===== Sayfa Düzeni ===== */
.page { display: none; }
.page.active { display: block; }

/* Açılış perdesi */
.auth-boot {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg);
  color: var(--text-muted);
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.auth-boot.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.auth-boot-logo {
  width: 82px;
  height: 82px;
  object-fit: contain;
  padding: 12px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.auth-boot-spinner {
  width: 24px;
  height: 24px;
  margin-top: 8px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: authBootSpin 0.7s linear infinite;
}

.auth-boot-text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

@keyframes authBootSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-boot-spinner { animation-duration: 1.8s; }
}

/* ===== Giriş Sayfası (iki sütunlu) ===== */
#login-page { background: #ffffff; }

.login-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  min-height: 100vh;
}

.login-hero {
  display: flex;
  flex-direction: column;
  padding: 40px clamp(28px, 5vw, 72px);
  background: #ffffff;
  overflow: hidden;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-brand .brand-mark {
  width: 46px;
  height: 46px;
  margin: 0;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 74, 173, 0.28));
}

.login-brand > span {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.hero-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 8px 0;
}

.hero-visual img {
  width: 100%;
  max-width: 500px;
  max-height: 46vh;
  height: auto;
  display: block;
}

.hero-copy h1 {
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.hero-copy h1 span { color: var(--primary); }

.hero-copy > p {
  margin-top: 14px;
  max-width: 540px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

.hero-points {
  list-style: none;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.point-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px clamp(24px, 4vw, 56px);
  border-left: 1px solid var(--border);
  background: #ffffff;
}

.login-panel .login-box {
  width: 100%;
  max-width: 380px;
  padding: 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}

.login-box h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.login-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 22px;
}

#login-form input,
#register-form input {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid #ccd0d5;
  border-radius: 10px;
  font-size: 15px;
  background: #ffffff;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

#login-form input::placeholder,
#register-form input::placeholder { color: #8a8d91; }

#login-form input:focus,
#register-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(3, 126, 243, 0.15);
}

#login-form .btn-primary,
#register-form .btn-primary {
  margin-top: 2px;
  padding: 13px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
}

.login-forgot {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.login-forgot:hover { text-decoration: underline; }

.login-divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

.btn-register {
  display: block;
  width: 100%;
  padding: 12px;
  text-align: center;
  border: 1.5px solid var(--primary);
  border-radius: 10px;
  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}

.btn-register:hover { background: var(--primary-light); }

.login-note {
  margin-top: 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Kayıt görünümü (giriş kutusunun içinde genişler) */
.reg-field {
  margin-bottom: 12px;
}

.reg-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: var(--bg-white);
  color: var(--text);
  font-size: 14px;
}

html.dark .reg-field select {
  background: #262b33;
  border-color: #3a414b;
  color: var(--text);
}

/* Kayıt onayları */
.reg-consents {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0;
}

.reg-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
}

#register-form .reg-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  min-width: 17px;
  margin: 2px 0 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--primary);
  cursor: pointer;
}

.reg-consent a,
.reg-consent-note a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.reg-consent a:hover,
.reg-consent-note a:hover {
  color: var(--primary-hover);
}

.reg-consent-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

.reg-consent-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reg-consent-tag.optional {
  background: var(--bg);
  color: var(--text-muted);
}

#register-form .term-role-row input {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 9px 12px;
  border-radius: 9px;
}

#register-form .term-role-row input:disabled {
  background: var(--primary-light);
  border-color: transparent;
  color: var(--primary);
  font-weight: 800;
}

html.dark #register-form .term-role-row input:disabled {
  background: var(--primary-light);
  color: #7cc2ff;
}

.reg-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

/* Dönem seçimi (liste) */
.term-select {
  position: relative;
}

.term-select-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #ccd0d5;
  border-radius: 10px;
  background: #ffffff;
  font-family: inherit;
  font-size: 15px;
  color: #8a8d91;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.term-select-btn:hover { border-color: #b0b3b8; }

.term-select-btn:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(3, 126, 243, 0.15);
}

.term-select-btn.has-value { color: var(--text); }

#reg-term-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term-select-arrow {
  flex: 0 0 auto;
  color: #8a8d91;
  font-size: 12px;
}

.term-select-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 264px;
  overflow-y: auto;
  padding: 6px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  z-index: 60;
}

.term-select-menu.open { display: block; }

/* Modal içinde liste, kırpılmasın diye akışa girer */
.modal-content .term-select-menu {
  position: static;
  margin-top: 8px;
  max-height: 220px;
}

.term-select .term-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
}

.term-select .term-option:hover { background: #f4f5f7; }

#register-form .term-option input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  padding: 0;
  border: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.term-select .term-option input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  padding: 0;
  border: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Gönderi görünürlüğü / dönem kutusu */
.visibility-block { margin-top: 12px; }

.visibility-label {
  display: block;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.terms-box {
  margin-top: 10px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.terms-box-label {
  display: block;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.login-back {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
}

.login-back:hover {
  color: var(--primary);
  text-decoration: underline;
}

.error-msg.success {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}

#register-view {
  animation: fadeSlideIn 0.25s ease;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .login-split { grid-template-columns: 1fr; align-content: start; }
  .login-hero { padding: 24px 24px 20px; }
  .hero-visual { display: none; }
  .hero-copy h1 { font-size: 30px; }
  .hero-copy > p { margin-top: 10px; font-size: 14px; }
  .hero-points { display: none; }
  .login-panel { border-left: none; padding: 28px 24px 48px; }
}

/* ===== Giriş Sayfası ===== */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 20px;
}

.login-box {
  width: 100%;
  max-width: 396px;
  background: var(--bg-white);
  padding: 32px 24px;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border: 1px solid var(--border);
}

.brand {
  text-align: center;
  margin-bottom: 24px;
}

.brand-mark {
  width: 52px;
  height: 52px;
  display: block;
  margin: 0 auto 16px;
  filter: drop-shadow(0 2px 4px rgba(0, 74, 173, 0.28));
}

.logo {
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  margin: 0 auto 16px;
  box-shadow: 0 2px 4px rgb(3 126 243 / 0.3);
}

.brand h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.brand-blue {
  color: var(--primary);
}

.brand p {
  color: var(--text-muted);
  font-size: 14px;
}

.error-msg {
  background: #fef2f2;
  color: var(--danger);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  border: 1px solid #fecaca;
  text-align: center;
}

/* ===== Form Elemanları ===== */
.input-group {
  margin-bottom: 14px;
}

.input-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.input-group input,
.input-group textarea,
.input-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 15px;
  background: var(--bg-white);
  transition: border 0.2s, box-shadow 0.2s;
}

.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(3, 126, 243, 0.15);
}

.input-group textarea {
  resize: vertical;
  min-height: 100px;
}

.btn-primary {
  width: 100%;
  background: var(--primary);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-primary:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-outline:hover {
  background: #f5f6f7;
  border-color: #9ca3af;
  color: var(--text);
}

/* ---------- Profil düzenleme penceresi ---------- */

.modal-content.profile-edit-modal {
  width: min(680px, 94vw);
  max-width: 680px;
  max-height: 92vh;
  padding: 0;
  border-radius: 22px;
  overflow-y: auto;
}

.profile-edit-modal .profile-edit-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 24px 18px;
  background:
    linear-gradient(135deg, rgba(3, 126, 243, 0.14), rgba(3, 126, 243, 0.02) 65%),
    var(--bg-white);
  border-bottom: 1px solid var(--border);
}

.profile-edit-modal .profile-edit-avatar {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #037ef3, #7cc2ff);
  box-shadow: 0 6px 18px rgba(3, 126, 243, 0.25);
}

.profile-edit-modal .profile-edit-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-white);
}

.profile-edit-modal .profile-edit-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-edit-modal .profile-edit-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}

.profile-edit-modal .profile-edit-head h3 {
  margin-top: 2px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.profile-edit-modal .profile-edit-head p {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
}

.profile-edit-modal .profile-edit-head .modal-close {
  flex: 0 0 auto;
  margin-left: auto;
}

.profile-edit-modal #profile-form,
.profile-edit-modal #admin-user-form,
.profile-edit-modal #event-form {
  padding: 18px 22px 0;
}

.profile-edit-modal .profile-edit-section {
  margin-bottom: 14px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.profile-edit-modal .profile-edit-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.profile-edit-modal .profile-edit-section-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary-light);
  font-size: 16px;
}

.profile-edit-modal .profile-edit-section-head h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

.profile-edit-modal .profile-edit-section-head p {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

.profile-edit-modal .profile-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profile-edit-modal .profile-edit-grid .input-group {
  margin-bottom: 0;
}

.profile-edit-modal .profile-edit-col-full {
  grid-column: 1 / -1;
}

.profile-edit-modal .input-group input,
.profile-edit-modal .input-group textarea,
.profile-edit-modal .input-group select {
  border-radius: 10px;
  background: var(--bg-white);
}

.profile-edit-modal .input-group textarea {
  min-height: 90px;
}

.profile-edit-modal .term-select-btn {
  background: var(--bg-white);
  border-radius: 10px;
}

/* Dönem bazlı EB rolü satırları */
.term-role-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.term-role-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.term-role-term {
  flex: 0 0 auto;
  min-width: 64px;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.term-role-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid #d1d5db;
  border-radius: 9px;
  background: var(--bg-white);
  color: var(--text);
  font-size: 14px;
}

.term-role-row input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(3, 126, 243, 0.15);
}

.term-role-row input:disabled {
  background: var(--primary-light);
  border-color: transparent;
  color: var(--primary);
  font-weight: 800;
  opacity: 1;
  cursor: not-allowed;
}

html.dark .term-role-row input {
  border-color: #3a414b;
}

html.dark .term-role-row input:disabled {
  background: var(--primary-light);
  color: #7cc2ff;
}

/* Push bildirim ayarları */
.push-settings {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.push-settings-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.push-status-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-muted);
}

.push-status-dot.on {
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.push-status-dot.warn {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.push-status-dot.off {
  background: #ef4444;
}

.push-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-edit-section .push-settings-actions .btn-primary,
.profile-edit-section .push-settings-actions .btn-outline {
  width: auto;
  min-height: 38px;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 13px;
}

.profile-edit-modal .profile-edit-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 -22px;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-white);
  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.06);
  border-top: 1px solid var(--border);
}

.profile-edit-modal .profile-edit-actions .btn-outline,
.profile-edit-modal .profile-edit-actions .btn-primary {
  width: auto;
  min-width: 118px;
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.profile-edit-modal .profile-save-short { display: none; }

html.dark .profile-edit-modal .profile-edit-head {
  background:
    linear-gradient(135deg, rgba(3, 126, 243, 0.22), rgba(3, 126, 243, 0.03) 65%),
    var(--bg-white);
}

html.dark .profile-edit-modal .profile-edit-avatar img {
  background: #22272e;
}

@media (max-width: 640px) {
  .modal-content.profile-edit-modal {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .profile-edit-modal .profile-edit-head {
    padding: 16px;
  }

  .profile-edit-modal .profile-edit-head h3 {
    font-size: 20px;
  }

  .profile-edit-modal #profile-form,
  .profile-edit-modal #admin-user-form,
  .profile-edit-modal #event-form {
    padding: 14px 14px 0;
  }

  .profile-edit-modal .profile-edit-section {
    padding: 14px;
    border-radius: 14px;
  }

  .profile-edit-modal .profile-edit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-edit-modal .profile-edit-actions {
    margin: 0 -14px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .profile-edit-modal .profile-edit-actions .btn-outline,
  .profile-edit-modal .profile-edit-actions .btn-primary {
    flex: 1 1 0;
    min-width: 0;
  }

  .profile-edit-modal .profile-save-long { display: none; }
  .profile-edit-modal .profile-save-short { display: inline; }
}

.btn-outline-full {
  display: block;
  text-align: center;
  width: 100%;
  margin-top: 8px;
}

/* Alt bilgi çubuğu */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-white);
  padding: 14px 16px;
  margin-top: 24px;
}

.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.site-footer a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer-divider {
  opacity: 0.4;
}

@media (max-width: 560px) {
  .site-footer {
    padding: 12px;
  }

  .site-footer-inner {
    gap: 4px 8px;
    font-size: 11px;
  }
}

.login-footer {
  margin-top: 20px;
  text-align: center;
}

.login-footer p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.login-footer a {
  color: var(--primary);
  font-weight: 600;
}

.small { font-size: 12px; color: var(--text-muted); }

/* Dönem seçici */
.terms-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.term-btn {
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  background: var(--bg-white);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}

.term-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* ===== Üst Mavi Çubuk ===== */
.top-bar {
  background: var(--topbar-bg);
  color: white;
  position: sticky;
  top: 0;
  z-index: 200;
  height: 56px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.top-bar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

.top-left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.top-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-width: 0;
}

.top-logo .top-mark {
  width: 34px;
  height: 34px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.top-title {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.5px;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-center {
  flex: 1;
  max-width: 500px;
  margin: 0 24px;
}

.search-bar input {
  width: 100%;
  padding: 8px 14px;
  border: none;
  border-radius: 24px;
  background: rgba(255,255,255,0.2);
  color: white;
  font-size: 14px;
}

.search-bar input::placeholder {
  color: rgba(255,255,255,0.75);
}

.search-bar input:focus {
  outline: none;
  background: rgba(255,255,255,0.3);
}

.top-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.nav-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  background: rgba(255,255,255,0.12);
  cursor: pointer;
  transition: background 0.2s;
}

.nav-icon:hover {
  background: rgba(255,255,255,0.25);
}

.nav-icon.badge {
  position: relative;
}

.badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid var(--blue-header);
}

.profile-pic-small {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  object-fit: cover;
  cursor: pointer;
}

.btn-logout-top {
  color: white;
  background: rgba(255,255,255,0.12);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s;
}

.btn-logout-top:hover {
  background: rgba(255,255,255,0.25);
}

.install-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.install-app-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.install-app-btn.hidden { display: none; }

/* ===== Facebook Layout ===== */
.facebook-layout {
  display: flex;
  gap: 20px;
  padding: 16px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: flex-start;
}

/* Sol Sidebar */
.left-sidebar {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 72px;
}

.sidebar-section {
  margin-bottom: 16px;
}

.sidebar-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding: 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 2px;
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
}

.sidebar-item:hover {
  background: #eceef2;
}

.sidebar-item.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

.sidebar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
  transition: background 0.2s;
}

.sidebar-group:hover {
  background: #eceef2;
}

.group-pic {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar-group span {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.see-more {
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
  padding: 8px;
  cursor: pointer;
}

.see-more:hover {
  text-decoration: underline;
}

/* Merkez Feed */
.center-feed {
  flex: 1;
  max-width: 560px;
  min-width: 0;
}

.section { display: none; padding: 0; }
.section.active {
  display: block;
  animation: sectionIn 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes sectionIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section.active { animation: none; }
}

/* Cover */
.page-cover {
  position: relative;
  border-radius: var(--radius);
  overflow: visible;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  background: white;
}

.page-cover > img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius) var(--radius) 0 0;
}

.page-cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.45));
  border-radius: var(--radius) var(--radius) 0 0;
  pointer-events: none;
}

.page-profile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 16px;
}

.page-avatar {
  width: 88px;
  height: 88px;
  margin-top: -44px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
  flex-shrink: 0;
  background: var(--primary);
}

.page-info {
  flex: 1;
  min-width: 0;
  padding: 10px 0 12px;
}

.page-info h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.page-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.dot {
  font-size: 12px;
  opacity: 0.7;
}

.btn-join {
  background: var(--primary);
  color: white;
  border: none;
  padding: 6px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 8px;
}

.btn-join:hover {
  background: var(--primary-hover);
}

.btn-menu {
  background: #eceef2;
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
}

.btn-menu:hover {
  background: #d8dadf;
}

/* Paylaşım Kutusu */
.create-post {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
}

.create-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #eceef2;
  flex-shrink: 0;
}

.create-input-wrap {
  flex: 1;
  min-width: 0;
}

.create-input-wrap input {
  border: none;
  background: #f4f5f7;
  font-size: 14px;
  outline: none;
  width: 100%;
  padding: 10px 16px;
  border-radius: 24px;
  cursor: pointer;
  color: var(--text-muted);
}

.create-input-wrap input:hover {
  background: #eceef2;
}

.btn-create {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
}

.btn-create:hover {
  background: var(--primary-hover);
}

/* Alt Seçenekler */
.create-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow);
}

.create-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.create-tab:hover {
  background: #f4f5f7;
}

/* Filtreler */
.feed-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  align-items: center;
}

.feed-filters select,
.feed-filters input {
  flex: 1;
  min-width: 140px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-white);
  font-size: 13px;
  outline: none;
}

.feed-filters select:focus,
.feed-filters input:focus {
  border-color: var(--primary);
}

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Post Kartı */
.post-card {
  background: var(--bg-white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.post-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: #eceef2;
  flex-shrink: 0;
}

.post-meta {
  flex: 1;
  min-width: 0;
}

.post-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: block;
}

.post-term {
  font-size: 11px;
  background: var(--primary-light);
  color: var(--primary);
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 600;
  margin-top: 1px;
  display: inline-block;
}

.post-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.post-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

html.dark .post-tag { color: #b6c0cc; }

.post-time-visibility {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.lock-icon { color: #9ca3af; font-size: 11px; }

.post-body {
  padding: 0 14px 10px;
}

.post-content {
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 10px;
  white-space: pre-wrap;
}

.post-photos {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.post-photos img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 420px;
  border-radius: 8px;
  object-fit: contain;
  cursor: zoom-in;
  background: var(--bg);
  transition: filter 0.15s;
}

.post-photos img:hover { filter: brightness(0.96); }

.post-photos img:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.post-actions {
  display: flex;
  padding: 4px 8px;
  border-top: 1px solid var(--border);
  align-items: center;
}

.post-actions button {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.post-actions button:hover {
  background: #f4f5f7;
}

.post-actions button.liked {
  color: var(--primary);
}

.post-comments {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: #fafbfc;
}

.comment {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.comment-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: #eceef2;
  flex-shrink: 0;
}

.comment-body {
  flex: 1;
  background: #f4f5f7;
  border-radius: 12px;
  padding: 6px 10px;
}

.comment-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  display: block;
  margin-bottom: 1px;
}

.comment-text {
  display: block;
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 1px;
}

.comment-time {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
}

.comment-input {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.comment-input input {
  flex: 1;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  background: #f4f5f7;
  outline: none;
}

.comment-input input:focus {
  border-color: var(--primary);
}

.comment-input button {
  background: var(--primary);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
}

.empty-state {
  text-align: center;
  padding: 48px 24px;
  background: var(--bg-white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.empty-state .emoji {
  font-size: 44px;
  margin-bottom: 16px;
  display: block;
}

.empty-state p {
  color: var(--text-muted);
  font-size: 15px;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal.hidden { display: none; }

.modal-content {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.modal-close {
  background: #eceef2;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: #d8dadf;
}

#post-form,
#profile-form {
  padding: 16px 20px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px 16px;
}

/* ---------- Genel modal görünümü ---------- */
.modal {
  background: rgba(10, 15, 25, 0.56);
  backdrop-filter: blur(6px);
}

.modal-content {
  max-width: 560px;
  max-height: 92vh;
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
  overscroll-behavior: contain;
}

.modal:not(.hidden) .modal-content {
  animation: modalPopIn 0.18s ease-out;
}

@keyframes modalPopIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 18px 22px;
  background:
    linear-gradient(135deg, rgba(3, 126, 243, 0.10), rgba(3, 126, 243, 0.01) 70%),
    var(--bg-white);
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.modal-close {
  width: 34px;
  height: 34px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.modal-close:hover {
  background: var(--primary-light);
  border-color: transparent;
  color: var(--primary);
}

.modal-content > form {
  padding: 18px 22px 0;
}

.modal-content > form > .modal-actions {
  margin: 6px -22px 0;
  padding: 14px 22px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}

.modal-content > .modal-actions {
  margin-top: 0;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}

.modal-actions .btn-primary,
.modal-actions .btn-outline {
  width: auto;
  min-width: 110px;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}

.modal-content::-webkit-scrollbar { width: 8px; }
.modal-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

html.dark .modal-header {
  background:
    linear-gradient(135deg, rgba(3, 126, 243, 0.18), rgba(3, 126, 243, 0.02) 70%),
    var(--bg-white);
}

/* Şikâyet modalı */
.report-modal-content { max-width: 520px; }
#report-form {
  padding: 18px 22px 0;
}
#report-form > .modal-actions {
  margin: 6px -22px 0;
  padding: 14px 22px calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Onay modalı genel modal stillerinden etkilenmesin */
.confirm-content { padding: 26px 22px 16px; }
.confirm-content .modal-actions {
  margin: 16px 0 0;
  padding: 0;
  border-top: 0;
}
.confirm-content .btn-primary,
.confirm-content .btn-outline {
  min-width: 100px;
  padding: 10px 18px;
  border-radius: 9px;
}

@media (max-width: 560px) {
  .modal-header { padding: 16px; }
  .modal-header h3 { font-size: 18px; }
  .modal-content > form { padding: 16px 16px 0; }
  .modal-content > form > .modal-actions {
    margin-left: -16px;
    margin-right: -16px;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .modal-content > .modal-actions { padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
}

.visibility-toggle {
  display: flex;
  gap: 16px;
}

.visibility-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #4b5563;
}

.visibility-option input {
  accent-color: var(--primary);
}

.term-chip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-white);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}

.term-chip.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.photo-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.photo-item {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Medya ekleme düğmeleri */
.media-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.media-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.media-add-btn:hover { background: #d0e8ff; }

.media-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.video-preview {
  display: block;
  margin-top: 10px;
}

.video-item {
  position: relative;
  max-width: 100%;
}

.video-item video {
  display: block;
  width: 100%;
  max-height: 260px;
  border-radius: 10px;
  background: #000;
}

.video-name {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-all;
}

/* Akıştaki video */
.post-video { margin-top: 8px; }

.post-video video {
  display: block;
  width: 100%;
  max-height: 420px;
  border-radius: 8px;
  background: #000;
}

html.dark .media-add-btn { color: #7cc2ff; }
html.dark .media-add-btn:hover { background: #16324d; }

.photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Profil Sayfası ===== */
.profile-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.profile-header {
  position: relative;
  height: 150px;
}

.profile-header > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-wrap {
  position: absolute;
  bottom: -35px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: var(--shadow);
  background: var(--primary);
}

.avatar-btn {
  background: white;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  font-size: 18px;
}

.avatar-btn input { display: none; }

.cover-btn {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: background 0.2s, transform 0.2s;
}

.cover-btn:hover { background: rgba(0, 0, 0, 0.72); }
.cover-btn:active { transform: scale(0.97); }
.cover-btn input { display: none; }
.cover-btn-icon { font-size: 15px; }

.profile-body {
  padding: 48px 16px 16px;
}

.profile-info h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.profile-term {
  background: var(--primary-light);
  color: var(--primary);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
  display: inline-block;
}

.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.profile-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
}

.field-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.profile-bio {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 16px;
}

.profile-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  margin-bottom: 16px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}

.profile-actions {
  display: flex;
  gap: 8px;
}

.profile-posts h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

/* ===== Sağ Kenar ===== */
.right-sidebar {
  width: 320px;
  flex-shrink: 0;
  position: sticky;
  top: 72px;
}

.right-widget {
  background: var(--bg-white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.widget-header span:first-child {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}

.see-all {
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
}

.see-all:hover {
  text-decoration: underline;
}

/* Etkinlik Kartı */
.event-card {
  display: flex;
  padding: 8px 16px 12px;
  gap: 12px;
}

.event-card-clickable {
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.18s;
}

.event-card-clickable:hover {
  background: var(--bg);
}

.event-card-clickable:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  min-width: 48px;
}

.event-date .month {
  font-size: 10px;
  font-weight: 700;
  color: var(--danger);
  text-transform: uppercase;
}

.event-date .day {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.event-date.has-photo {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.event-date.has-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.68));
}

.event-date.has-photo > * {
  position: relative;
  z-index: 1;
}

.event-date.has-photo .month,
.event-date.has-photo .day {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.event-info {
  flex: 1;
  min-width: 0;
}

.event-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.event-location,
.event-time {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 1px;
}

.btn-event {
  background: #f4f5f7;
  color: var(--text);
  border: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
}

.btn-event:hover {
  background: #eceef2;
}

/* Popüler Gruplar */
.group-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 12px;
}

.group-pic-small {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.group-info {
  flex: 1;
  min-width: 0;
}

.group-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1px;
}

.group-count {
  font-size: 12px;
  color: var(--text-muted);
}

.btn-join-group {
  background: #e7f3ff;
  color: var(--primary);
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-join-group:hover {
  background: #d0e8ff;
}

/* Reklam Kartı */
.ad-card {
  background: linear-gradient(135deg, #037ef3, #025bb5);
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: var(--radius);
}

.ad-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.ad-text {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 12px;
}

.ad-card .btn-join-group {
  background: white;
  color: var(--primary);
}

.ad-card .btn-join-group:hover {
  background: #e7f3ff;
}

/* ===== Duyarlı Tasarım ===== */
@media (max-width: 1100px) {
  .right-sidebar {
    display: none;
  }
  .center-feed {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .facebook-layout {
    flex-direction: column;
    padding: 8px;
  }
  .left-sidebar {
    display: none;
  }
  .center-feed {
    max-width: 100%;
    width: 100%;
  }
  .top-center {
    display: none;
  }
  .top-title {
    font-size: 15px;
  }
  .top-right {
    gap: 6px;
  }
  .nav-icon {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
  .btn-logout-top {
    padding: 5px 10px;
    font-size: 12px;
  }
  .page-cover > img,
  .page-cover-overlay {
    height: 160px;
  }
  .page-avatar {
    width: 70px;
    height: 70px;
    margin-top: -35px;
  }
  .page-info h1 {
    font-size: 18px;
  }
  .page-cover {
    margin-bottom: 12px;
  }
  .feed-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .create-tabs {
    overflow-x: auto;
  }
  .create-tab {
    white-space: nowrap;
    font-size: 12px;
  }
  .modal-content {
    width: 95%;
  }
  .post-photos img {
    max-height: 280px;
  }
}

@media (max-width: 480px) {
  .top-logo .top-mark {
    width: 30px;
    height: 30px;
  }
  .top-title {
    font-size: 13px;
  }
  .nav-icon {
    display: none;
  }
  .nav-icon.badge {
    display: flex;
  }
}

/* ===== Ek Sayfalar (Etkinlikler, Fotoğraflar, Anılar, Bildirimler) ===== */
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.section-head h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.section-head p {
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-muted);
}

.section-badge {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.section-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

#notifications-section .section-head-actions .btn-outline {
  padding: 7px 12px;
  font-size: 13px;
}

/* Etkinlikler */
.event-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}

.event-date-lg {
  flex: 0 0 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  border-radius: 14px;
  background: var(--primary);
  color: #fff;
}

.event-date-lg .month { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
.event-date-lg .day { font-size: 28px; font-weight: 800; line-height: 1.15; }
.event-date-lg .year { font-size: 11px; opacity: 0.85; }

.event-body { flex: 1; min-width: 0; }

.event-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.event-top h3 { font-size: 16px; font-weight: 700; color: var(--text); }

.event-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
}

.event-body p { margin: 4px 0 6px; font-size: 13.5px; color: var(--text-muted); }
.event-meta { font-size: 12.5px; color: var(--text-muted); }

.event-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.event-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-white);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.event-action-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

.event-action-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn-event-lg {
  flex: 0 0 auto;
  padding: 9px 18px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-event-lg:hover { background: var(--primary-hover); }
.btn-event-lg.joined { background: var(--primary-light); color: var(--primary); }
.btn-event-lg.ghost { background: var(--primary-light); color: var(--primary); }
.btn-event-lg.ghost:hover { background: #d0e8ff; }

.btn-event-lg.event-delete { background: #fef2f2; color: #dc2626; }
.btn-event-lg.event-delete:hover { background: #fee2e2; }
html.dark .btn-event-lg.event-delete { background: #3a1d1d; color: #fca5a5; }
html.dark .btn-event-lg.event-delete:hover { background: #4a2424; }

.btn-event.joined { background: var(--primary-light); color: var(--primary); }
html.dark .btn-event.joined { color: #7cc2ff; }

.event-item.past { opacity: 0.85; }
.event-item.past .event-date-lg { background: #8b95a3; }

.event-item.event-highlight {
  box-shadow: 0 0 0 3px rgba(3, 126, 243, 0.28), var(--shadow);
  transition: box-shadow 0.2s ease;
}

.subhead {
  margin: 22px 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

/* Yönetim Kurulu */
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.board-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-white);
  box-shadow: var(--shadow);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.board-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 10px 24px rgba(3, 126, 243, 0.14);
}

.board-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.board-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
}

.board-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.board-role {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.board-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-terms {
  font-size: 12px;
  color: var(--text-muted);
}

.board-card.lead {
  border-color: transparent;
  background: linear-gradient(135deg, #037ef3 0%, #0563c1 100%);
}

.board-card.lead .board-name { color: #fff; }
.board-card.lead .board-terms { color: rgba(255, 255, 255, 0.85); }
.board-card.lead .board-role {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.board-card.lead .board-avatar { border: 2px solid rgba(255, 255, 255, 0.75); }

.board-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.board-form select,
.board-form input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-white);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}

.board-form select:focus,
.board-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(3, 126, 243, 0.14);
}

.board-form .btn-create {
  flex: 0 0 auto;
  padding: 9px 18px;
}

html.dark .board-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Bildirimler */
.notif-list {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--primary-light); }

.notif-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-white);
  font-size: 17px;
}

.notif-body { flex: 1; min-width: 0; }
.notif-body p { font-size: 14px; color: var(--text); }
.notif-time { margin-top: 2px; font-size: 12px; color: var(--text-muted); }

.notif-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.notif-item:not(.unread) .notif-dot { visibility: hidden; }

.notif-delete {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.notif-delete:hover {
  background: #fef2f2;
  color: #dc2626;
}

html.dark .notif-delete:hover {
  background: #3a1d1d;
  color: #fca5a5;
}

/* Yönetim: tüm üyeler */
.admin-members { margin-top: 24px; }

.admin-members-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.admin-members-head .subhead {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

#member-search {
  padding: 9px 12px;
  min-width: 240px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-white);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

#member-search:focus { border-color: var(--primary); }

.member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}

.member-row:last-child { border-bottom: none; }

.member-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
}

.member-info { flex: 1; min-width: 0; }

.member-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.member-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
}

.member-badge.pending {
  background: #fef3c7;
  color: #b45309;
}

.member-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.member-btn {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-white);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.member-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: transparent;
}

.member-btn.danger:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: transparent;
}

html.dark .member-btn.danger:hover { background: #3a1d1d; color: #fca5a5; }

.admin-user-email {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

html.dark .member-badge { color: #7cc2ff; }
html.dark .member-badge.pending { background: #3a2c12; color: #fbbf24; }

@media (max-width: 640px) {
  .admin-members-head { flex-direction: column; align-items: stretch; }
  #member-search { width: 100%; min-width: 0; }
  .member-meta { white-space: normal; }
  .member-row { flex-wrap: wrap; }
  .member-actions { width: 100%; justify-content: flex-start; }
  .notif-item .btn-event-lg { width: auto; flex: 0 0 auto; }
}

.btn-mark-read { flex: 0 0 auto; white-space: nowrap; }

.btn-delete-all {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.35);
}

.btn-delete-all:hover {
  background: #fef2f2;
  border-color: transparent;
  color: #b91c1c;
}

html.dark .btn-delete-all {
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.35);
}

html.dark .btn-delete-all:hover {
  background: #3a1d1d;
  color: #fecaca;
}

/* Mobil sayfa menüsü */
.mobile-nav { display: none; }

@media (max-width: 768px) {
  .mobile-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 6px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 56px;
    z-index: 150;
  }

  .mobile-nav-item {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }

  .mobile-nav-item.active {
    background: var(--primary-light);
    color: var(--primary);
  }
}

@media (max-width: 380px) {
  .mobile-nav-item {
    padding: 4px 6px;
    font-size: 11px;
  }
}

html.dark .mobile-nav-item.active { color: #7cc2ff; }

@media (max-width: 640px) {
  .section-head { flex-direction: column; }
  .section-head-actions { width: 100%; justify-content: flex-start; }
  .event-item { flex-wrap: wrap; }
  .event-body { flex-basis: calc(100% - 90px); }
  .btn-event-lg { width: 100%; }
  .cover-btn { right: 10px; bottom: 10px; padding: 7px 10px; }
  .cover-btn-text { display: none; }
}

/* ===== Alumni Meydanı ===== */
.square-scene {
  position: relative;
  height: 540px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(to bottom, #bfe3ff 0%, #e6f5ff 42%, #c9ecc0 42%, #9fd094 100%);
  box-shadow: var(--shadow);
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}

.square-sun {
  position: absolute;
  top: 10%;
  right: 28%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3b0, #ffd34d 60%, #f5b301);
  box-shadow: 0 0 44px rgba(255, 205, 60, 0.65);
}

.square-cloud { position: absolute; font-size: 34px; opacity: 0.9; z-index: 1; }
.square-cloud.c1 { top: 9%; left: 16%; }
.square-cloud.c2 { top: 17%; left: 44%; font-size: 25px; opacity: 0.75; }

.square-tree { position: absolute; z-index: 2; font-size: 40px; pointer-events: none; }
.square-tree.t1 { left: 3%; bottom: 7%; }
.square-tree.t2 { right: 3%; bottom: 9%; }
.square-tree.t3 { left: 30%; bottom: 3%; font-size: 30px; }

.square-spot {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-white);
  color: var(--text);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}

.square-spot:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.square-spot .icon { font-size: 22px; line-height: 1; }

.spot-events { left: 5%; top: 7%; }
.spot-mirror { left: 6%; bottom: 13%; }
.spot-games { right: 6%; bottom: 13%; }

#square-members { position: absolute; inset: 0; pointer-events: none; z-index: 4; }

.square-avatar-wrap {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -100%);
  transition: left 0.55s ease, top 0.55s ease;
}

.square-avatar-wrap.me { z-index: 6; }

.square-avatar {
  width: 56px;
  height: 84px;
}

.square-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.22));
}

.square-avatar-wrap.walking .square-avatar {
  animation: squareWalk 0.28s infinite alternate;
}

@keyframes squareWalk {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}

.square-avatar-name {
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10.5px;
  white-space: nowrap;
}

.square-hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 7;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11.5px;
  pointer-events: none;
  white-space: nowrap;
}

/* Avatar düzenleme */
.avatar-preview {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 160px;
  margin-bottom: 14px;
}

.avatar-preview svg {
  width: 106px;
  height: 159px;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.2));
}

.avatar-option-group { margin-bottom: 14px; }

.avatar-option-group > label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.avatar-option-group .swatches { display: flex; flex-wrap: wrap; gap: 8px; }

.swatch {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.swatch:hover { transform: scale(1.08); }

.swatch.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--bg-white);
}

html.dark .square-scene {
  background: linear-gradient(to bottom, #0f2438 0%, #16293d 42%, #1b3325 42%, #14281b 100%);
}

html.dark .square-sun { box-shadow: 0 0 44px rgba(255, 205, 60, 0.35); }
html.dark .avatar-option-group > label { color: #c3cad4; }

@media (max-width: 768px) {
  .square-scene { height: 430px; }
  .square-avatar { width: 46px; height: 69px; }
  .square-spot { padding: 6px 9px; font-size: 10px; border-radius: 10px; }
  .square-spot .icon { font-size: 18px; }
  .spot-events { top: 5%; }
  .spot-mirror, .spot-games { bottom: 14%; }
  .square-hint { font-size: 10px; }
}

@media (max-width: 480px) {
  .square-scene { height: 380px; }
  .square-avatar { width: 42px; height: 63px; }
  .square-avatar-name { font-size: 9px; }
  .square-spot span:last-child { display: none; }
  .square-spot { padding: 7px 9px; }
}

/* ===== Günlük Kelime (Wordle) ===== */
.wordle-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 26px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.wordle-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.wordle-stat {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 600;
}

.wordle-stat strong { font-weight: 800; }

.wordle-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  user-select: none;
  -webkit-user-select: none;
}

.wordle-row {
  display: flex;
  gap: 8px;
  perspective: 600px;
}

.wordle-cell {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.5px;
  caret-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.wordle-cell.filled { border-color: #9aa4b2; }

.wordle-cell.correct { background: #16a34a; border-color: #16a34a; color: #fff; }
.wordle-cell.present { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.wordle-cell.absent { background: #6b7280; border-color: #6b7280; color: #fff; }

.wordle-cell.revealed { animation: wordlePop 0.18s ease; }

.wordle-cell.flip {
  animation: wordleFlip 0.5s ease both;
  transform-origin: center;
  backface-visibility: hidden;
  z-index: 1;
}

@keyframes wordleFlip {
  0% { transform: rotateX(0deg); }
  45% { transform: rotateX(90deg); }
  55% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes wordlePop {
  from { transform: scale(0.92); }
  to { transform: scale(1); }
}

.wordle-message {
  min-height: 22px;
  margin-bottom: 14px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.wordle-message.error { color: #ef4444; }
.wordle-message.win { color: #16a34a; }
html.dark .wordle-message.win { color: #4ade80; }

.wordle-keyboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.wordle-keyrow {
  display: flex;
  justify-content: center;
  gap: 5px;
  width: 100%;
}

.wordle-key {
  flex: 1 1 0;
  min-width: 0;
  max-width: 44px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.wordle-key:hover { background: var(--primary-light); }
.wordle-key:active { transform: scale(0.96); }
.wordle-key.wide { flex: 1.6 1 0; max-width: 68px; font-size: 11px; }

.wordle-key.correct { background: #16a34a; border-color: #16a34a; color: #fff; }
.wordle-key.present { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.wordle-key.absent { background: #6b7280; border-color: #6b7280; color: #fff; }

.wordle-note {
  margin-top: 16px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Puan / tahmin dağılımı */
.wordle-dist {
  width: 100%;
  max-width: 420px;
  margin: 0 auto 16px;
}

.wordle-dist h4 {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wordle-dist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--text-muted);
}

.wordle-dist-num {
  width: 12px;
  text-align: right;
  font-weight: 600;
}

.wordle-dist-bar {
  flex: 1;
  height: 18px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}

.wordle-dist-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--primary);
  transition: width 0.3s;
}

.wordle-dist-count {
  width: 22px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

/* Liderlik tablosu */
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.leaderboard-empty {
  padding: 10px 4px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 8px;
}

.leaderboard-row.me { background: var(--primary-light); }

.leaderboard-rank {
  width: 18px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.leaderboard-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
}

.leaderboard-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.leaderboard-points {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
}

html.dark .leaderboard-points { color: #7cc2ff; }

html.dark .wordle-cell.filled { border-color: #55606f; }
html.dark .wordle-key:not(.correct):not(.present):not(.absent) { background: #242a32; }
html.dark .wordle-key:not(.correct):not(.present):not(.absent):hover { background: #2f353e; }

@media (max-width: 640px) {
  .wordle-wrap { padding: 16px 8px 20px; }
  .wordle-cell { width: 48px; height: 48px; font-size: 22px; }
  .wordle-row { gap: 6px; }
  .wordle-key { height: 42px; font-size: 13px; max-width: 36px; }
  .wordle-key.wide { max-width: 56px; }
}

@media (max-width: 400px) {
  .wordle-cell { width: 42px; height: 42px; font-size: 20px; }
  .wordle-key { height: 40px; font-size: 12px; }
}

/* ===== Koyu Tema ===== */
html.dark {
  color-scheme: dark;
  --bg: #0f1216;
  --bg-white: #171b21;
  --text: #e9ecf1;
  --text-muted: #9aa4b2;
  --border: #262c35;
  --primary-light: #16324d;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  --topbar-bg: #161a20;
}

html.dark body { background: var(--bg); color: var(--text); }

html.dark .top-bar { box-shadow: 0 1px 0 var(--border); }

html.dark .search-bar input { background: rgba(255, 255, 255, 0.08); }
html.dark .search-bar input:focus { background: rgba(255, 255, 255, 0.14); }

html.dark .nav-icon,
html.dark .btn-logout-top { background: rgba(255, 255, 255, 0.08); }
html.dark .nav-icon:hover,
html.dark .btn-logout-top:hover { background: rgba(255, 255, 255, 0.18); }

html.dark .top-bar .theme-toggle { background: rgba(255, 255, 255, 0.08); }
html.dark .top-bar .theme-toggle:hover { background: rgba(255, 255, 255, 0.18); }

html.dark #login-page,
html.dark .login-hero,
html.dark .login-panel { background: #14171c; }

html.dark #login-form input,
html.dark #register-form input {
  background: #22272e;
  border-color: #3a414b;
  color: var(--text);
}

html.dark #login-form input::placeholder,
html.dark #register-form input::placeholder { color: #7c8695; }

html.dark .input-group input,
html.dark .input-group textarea,
html.dark .input-group select {
  color: var(--text);
  border-color: #3a414b;
}

html.dark .input-group label,
html.dark .reg-field label { color: #c3cad4; }

html.dark .hero-points li { color: #c3cad4; }

html.dark .term-select-btn,
html.dark .term-select-menu {
  background: #22272e;
  border-color: #3a414b;
}

html.dark .term-select-btn { color: #8a94a3; }
html.dark .term-select-btn.has-value { color: var(--text); }
html.dark .term-select-menu { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); }
html.dark .term-select .term-option:hover { background: #2a3038; }

html.dark .visibility-label,
html.dark .terms-box-label { color: #c3cad4; }
html.dark .terms-box { background: #22272e; border-color: #3a414b; }
html.dark .terms-box .term-select-btn { background: #1b1f26; }
html.dark .visibility-option { color: #c3cad4; }

html.dark .modal-content {
  border-color: #3d4652;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

html.dark .modal-content .input-group input,
html.dark .modal-content .input-group textarea {
  background: #242a32;
  border-color: #454e5b;
}

html.dark .modal-content .term-select-btn,
html.dark .modal-content .term-select-menu {
  background: #242a32;
  border-color: #454e5b;
}

html.dark .btn-register:hover { background: #16324d; }
html.dark .btn-outline:hover { background: #262b33; border-color: #4a525d; color: var(--text); }

html.dark .error-msg { background: #3a1d1d; border-color: #5b2a2a; color: #fca5a5; }
html.dark .error-msg.success { background: #14301f; border-color: #1f5133; color: #6ee7a0; }

html.dark .sidebar-item:hover { background: #262b33; }
html.dark .sidebar-item.active { background: var(--primary-light); color: #7cc2ff; }

html.dark .create-input-wrap input { background: #262b33; }
html.dark .create-input-wrap input:hover { background: #2f353e; }
html.dark .create-tabs { background: var(--bg-white); }
html.dark .create-tab:hover { background: #262b33; }
html.dark .create-avatar,
html.dark .post-avatar,
html.dark .comment-avatar { background: #2a3038; }

html.dark .feed-filters select,
html.dark .feed-filters input { color: var(--text); border-color: #3a414b; }

html.dark .post-actions button:hover { background: #262b33; }
html.dark .post-comments { background: #191d23; }
html.dark .comment-body,
html.dark .comment-input input { background: #262b33; color: var(--text); }
html.dark .comment-input input { border-color: #3a414b; }

html.dark .modal-close,
html.dark .btn-menu { background: #2a3038; color: var(--text); }
html.dark .modal-close:hover,
html.dark .btn-menu:hover { background: #343b45; }

html.dark .btn-event { background: #2a3038; }
html.dark .btn-event:hover { background: #343b45; }
html.dark .btn-join-group { background: #16324d; color: #7cc2ff; }
html.dark .btn-join-group:hover { background: #16324d; }

html.dark .avatar-btn { background: #2a3038; color: var(--text); }
html.dark .page-cover { background: #1d2127; }
html.dark .post-term,
html.dark .profile-term { color: #7cc2ff; }
html.dark .profile-tag { color: #7cc2ff; }
html.dark .term-btn { border-color: #3a414b; }

html.dark .event-tag,
html.dark .section-badge,
html.dark .btn-event-lg.joined,
html.dark .btn-event-lg.ghost { color: #7cc2ff; }
html.dark .btn-event-lg.ghost:hover { background: #16324d; }

/* Tema düğmesi */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-white);
  color: var(--text);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.theme-toggle:hover { background: #f4f5f7; }
html.dark .theme-toggle:hover { background: #2a3038; }

.theme-icon { line-height: 1; }
.theme-sun { display: none; }
html.dark .theme-moon { display: none; }
html.dark .theme-sun { display: inline; }

.login-theme {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 40;
}

.top-bar .theme-toggle {
  width: 36px;
  height: 36px;
  margin-left: 4px;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 16px;
}

.top-bar .theme-toggle:hover { background: rgba(255, 255, 255, 0.25); }

/* Etkinlik katılımcı listesi */
.event-participants-content { max-width: 540px; }
.event-participants-body { max-height: 60vh; overflow-y: auto; padding: 6px 20px 4px; }
.event-participants-section h4 { margin: 14px 0 6px; font-size: 13px; font-weight: 800; color: var(--text); }
.event-participants-section .field-hint { margin: 0 0 10px; }

.event-participant-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 6px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.event-participant-row:last-child { border-bottom: 0; }
.event-participant-row:hover { background: var(--bg); border-radius: 8px; }
.event-participant-row img { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.event-participant-info { flex: 1 1 auto; min-width: 0; }
.event-participant-info strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-participant-info small { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-participant-badge { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.event-participant-badge.checked { background: #e7f7ee; color: #15803d; }
.event-participant-badge.waitlist { background: #fff7ed; color: #c2410c; }
html.dark .event-participant-badge.checked { background: #14301f; color: #6ee7a0; }
html.dark .event-participant-badge.waitlist { background: #3a2917; color: #fbbf24; }

/* Etkinlik yoklama QR */
.event-qr-content { max-width: 440px; }
.event-qr-body { padding: 18px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.event-qr-body img { width: min(320px, 100%); height: auto; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--border); }
.event-qr-body input { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); font-size: 12px; }
.event-qr-body .field-hint { text-align: center; }

/* İçerik şikâyetleri ve kampanya */
.post-report-btn {
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
  opacity: 0.65;
}

.post-report-btn:hover {
  color: var(--danger);
  opacity: 1;
}

.report-modal-content { max-width: 500px; }
#report-form { padding: 16px 20px; }

.report-item {
  align-items: flex-start !important;
  flex-wrap: wrap;
}

.report-post-text {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: anywhere;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
  align-self: center;
}

.report-delete {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.35);
}

.campaign-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 8px;
}

.campaign-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.campaign-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.campaign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.campaign-actions .btn-primary,
.campaign-actions .btn-outline {
  width: auto;
  padding: 9px 18px;
  border-radius: 9px;
}

@media (max-width: 640px) {
  .campaign-grid { grid-template-columns: minmax(0, 1fr); }
  .report-actions { width: 100%; margin-left: 0; }
}

/* ===== Mesajlar ===== */.nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* Yeni içerik göstergesi (menüdeki kırmızı nokta) */
.nav-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  min-width: 10px;
  height: 10px;
  margin-left: 6px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg-white);
}

.sidebar-item .nav-dot { margin-left: auto; }

.nav-dot[hidden] { display: none; }

.sidebar-item.active .nav-dot,
.mobile-nav-item.active .nav-dot {
  box-shadow: 0 0 0 2px var(--primary);
}

.messages-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
  min-height: 560px;
  min-width: 0;
}

.messages-layout > * { min-width: 0; }

/* Sol taraf: sohbet listesi */
.messages-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.messages-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
}

.messages-panel-head h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.messages-panel-count {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.messages-panel-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary-light);
  font-size: 16px;
}

.messages-list {
  flex: 1;
  max-height: 560px;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
}

.conversation-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: none;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.conversation-item + .conversation-item { margin-top: 2px; }

.conversation-item:hover {
  background: var(--bg);
  border-color: var(--border);
}

.conversation-item.unread {
  background: var(--primary-light);
  border-color: rgba(3, 126, 243, 0.28);
}

.conversation-item.unread::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 26px;
  border-radius: 999px;
  background: var(--primary);
}

.conversation-avatar {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
  border: 2px solid var(--bg-white);
  box-shadow: 0 0 0 1px var(--border);
}

.conversation-item.unread .conversation-avatar {
  box-shadow: 0 0 0 2px var(--primary);
}

.conversation-info { flex: 1; min-width: 0; }

.conversation-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
}

.conversation-item.unread .conversation-name { font-weight: 800; }

.conversation-last {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
}

.conv-prefix {
  font-weight: 700;
  color: var(--primary);
}

.conversation-item.unread .conversation-last { color: var(--text); }

.conversation-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}

.conversation-time { font-size: 10.5px; color: var(--text-muted); }

.conversation-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.conv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 48px 20px;
  text-align: center;
  color: var(--text-muted);
}

.conv-empty-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--primary-light);
  font-size: 24px;
}

.conv-empty p {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.conv-empty span:last-child { font-size: 12.5px; line-height: 1.5; }

.messages-chat {
  display: flex;
  flex-direction: column;
  min-height: 560px;
  overflow: hidden;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-white), var(--bg));
}

.chat-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 4px 6px;
  margin: -4px -6px;
  border: none;
  border-radius: 10px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}

.chat-person:not(:disabled) { cursor: pointer; }

.chat-person:not(:disabled):hover { background: var(--bg); }

.chat-person:not(:disabled):hover #chat-title { color: var(--primary); }

.chat-person:not(:disabled):hover .chat-header-avatar { box-shadow: 0 0 0 2px var(--primary); }

.chat-person:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.chat-person:disabled { cursor: default; }

.chat-header-avatar {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
  border: 2px solid var(--bg-white);
  box-shadow: 0 0 0 1px var(--border);
  flex: 0 0 38px;
}

.chat-header-avatar.visible { display: block; }

.chat-header-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#chat-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-header-sub {
  margin-top: 1px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-back {
  display: none;
  padding: 0 4px;
  border: none;
  background: none;
  color: var(--primary);
  font-size: 18px;
  cursor: pointer;
}

.chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 500px;
  overflow-y: auto;
  padding: 18px;
  scrollbar-width: thin;
}

.chat-empty {
  margin: auto;
  padding: 26px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  color: var(--text-muted);
}

.chat-empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--primary-light);
  font-size: 28px;
}

.chat-empty h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.chat-empty p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.chat-bubble {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.45;
  word-wrap: break-word;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.chat-bubble.theirs {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 5px;
}

.chat-bubble.mine {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--primary), #025bb5);
  color: #fff;
  border-bottom-right-radius: 5px;
}

.chat-time { margin-top: 4px; font-size: 10px; opacity: 0.7; }

.chat-bubble.pending { opacity: 0.65; }

.chat-form {
  display: none;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.chat-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.chat-form input:focus { border-color: var(--primary); }

.chat-form button {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: none;
  border-radius: 20px;
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 480px) {
  .chat-form { padding: 10px 12px; }
  .chat-form button { padding: 10px 14px; }
}

@media (max-width: 768px) {
  .messages-layout { grid-template-columns: 1fr; min-height: 0; }
  .messages-panel { max-height: none; }
  .messages-list { max-height: none; }
  .messages-chat { display: none; min-height: 0; }
  .messages-layout.chat-open .messages-panel { display: none; }
  .messages-layout.chat-open .messages-chat {
    display: flex;
    min-height: 0;
  }
  .messages-layout.chat-open .chat-body {
    max-height: none;
    min-height: 0;
  }
  .chat-back { display: block; }

  html.chat-mode body { overflow: hidden; }
  html.chat-mode .mobile-nav { display: none; }
  html.chat-mode .chat-form { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ===== Kişi Arama ===== */
.search-bar { position: relative; }

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 400;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.search-results.hidden { display: none; }

.search-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.search-filters select {
  grid-column: 1 / -1;
}

.search-filters select,
.search-filters input {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-white);
  color: var(--text);
  font-size: 12px;
}

.search-filters select:focus,
.search-filters input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(3, 126, 243, 0.14);
}

.search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.search-result:hover { background: var(--primary-light); }

.search-result-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.search-result-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

.search-result-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.search-empty {
  padding: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.search-modal-content { max-width: 440px; }
.search-modal-body { padding: 16px 20px; }

#mobile-people-search {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-white);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  outline: none;
}

#mobile-people-search:focus { border-color: var(--primary); }

.search-results-inline {
  max-height: 55vh;
  margin-top: 10px;
  overflow-y: auto;
}

.clickable-user { cursor: pointer; }

.mobile-search-only { display: none; }

@media (max-width: 768px) {
  .top-bar .nav-icon.mobile-search-only { display: flex; }
}

/* ===== Mobil İyileştirmeler ===== */
.wordle-mobile-leader { display: none; }

@media (max-width: 1100px) {
  .wordle-mobile-leader {
    display: block;
    margin-top: 16px;
    padding: 16px 18px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }

  .wordle-mobile-leader .widget-header { margin-bottom: 6px; }
}

@media (max-width: 640px) {
  .post-actions button {
    gap: 3px;
    padding: 8px 4px;
    font-size: 12px;
    white-space: nowrap;
  }

  .event-item .event-delete {
    width: auto;
    align-self: flex-start;
    padding: 5px 12px;
    font-size: 11px;
  }
}

/* ===== Özel Kaydırma Çubuğu ===== */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

html.in-app::-webkit-scrollbar-track {
  background: linear-gradient(to bottom, var(--topbar-bg) 56px, transparent 56px);
}

::-webkit-scrollbar-thumb {
  background: #c1c7d0;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #9aa3af;
  background-clip: padding-box;
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #414a57;
  background-clip: padding-box;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #55606f;
  background-clip: padding-box;
}

/* Firefox */
@supports (-moz-appearance: none) {
  html {
    scrollbar-width: thin;
    scrollbar-color: #c1c7d0 transparent;
  }
  html.dark {
    scrollbar-color: #414a57 transparent;
  }
}

/* ============================================================
   Yeni özellikler: anket, kaydetme, etiketleme, kariyer,
   doğum günü, rol matrisi, analitik, şifre sıfırlama
   ============================================================ */

/* --- @etiketleme --- */
.mention-link {
  color: var(--primary);
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  cursor: pointer;
}

.mention-link:hover { text-decoration: underline; }

.mention-menu {
  z-index: 3000;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  color: var(--text);
  font-size: 14px;
}

.mention-item:hover { background: var(--primary-light); }
.mention-item img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

html.dark .mention-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
html.dark .mention-item:hover { background: #16324d; }

/* --- Anket --- */
.poll-composer {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
  background: var(--bg);
}

.poll-composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}

.poll-composer input[type="text"] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  margin-bottom: 8px;
  background: var(--bg-white);
  color: var(--text);
}

.poll-option-input { display: flex; gap: 6px; margin-bottom: 7px; }
.poll-option-input input { margin-bottom: 0 !important; }

.poll-remove {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text-muted);
  background: var(--bg-white);
  border: 1px solid var(--border);
}

.poll-remove:hover { color: var(--danger); }

.poll-composer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.poll-composer-actions select {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-white);
  color: var(--text);
}

.poll-box {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin: 8px 0 10px;
  background: var(--bg);
}

.poll-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.poll-head strong { font-size: 14px; }
.poll-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.poll-options { display: flex; flex-direction: column; gap: 7px; }

.poll-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-white);
  overflow: hidden;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  min-height: 38px;
}

.poll-option.votable:hover { border-color: var(--primary); background: var(--primary-light); }
.poll-option.mine { border-color: var(--primary); font-weight: 600; }
.poll-option-text { position: relative; z-index: 1; overflow-wrap: anywhere; }
.poll-pct { position: relative; z-index: 1; color: var(--text-muted); font-size: 12px; }

.poll-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--primary-light);
  z-index: 0;
  transition: width 0.35s ease;
}

html.dark .poll-bar { background: #16324d; }

/* --- Gönderi kaydetme --- */
.post-actions button.bookmarked { color: var(--primary); font-weight: 600; }
html.dark .post-actions button.bookmarked { color: #7cc2ff; }

.post-highlight {
  animation: postHighlight 1.6s ease;
}

@keyframes postHighlight {
  0%, 100% { box-shadow: var(--shadow); }
  30% { box-shadow: 0 0 0 3px rgba(3, 126, 243, 0.45); }
}

/* --- Kariyer panosu --- */
.jobs-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.jobs-toolbar input,
.jobs-toolbar select {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-white);
  color: var(--text);
  min-width: 0;
}

.jobs-toolbar input { flex: 1 1 220px; }
.jobs-toolbar select { flex: 0 0 auto; }

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.job-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.job-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.job-type {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 999px;
  padding: 3px 9px;
}

html.dark .job-type { color: #7cc2ff; }

.job-delete { color: var(--text-muted); font-size: 15px; width: 26px; height: 26px; border-radius: 50%; }
.job-delete:hover { background: #fee2e2; color: var(--danger); }
html.dark .job-delete:hover { background: #3a1d1d; }

.job-card h3 { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.job-company { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.job-desc {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.job-foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.job-author { font-size: 12px; color: var(--text-muted); cursor: pointer; }
.job-author:hover { color: var(--primary); }

/* ---------- Duyurular ---------- */

.announcements-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.announcement-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  border-left: 4px solid var(--primary);
  min-width: 0;
}

.announcement-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.announcement-icon {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1.2;
}

.announcement-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.announcement-card h3 {
  font-size: 17px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.announcement-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.announcement-author { cursor: pointer; font-weight: 600; }
.announcement-author:hover { color: var(--primary); }

.announcement-delete {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 15px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}
.announcement-delete:hover { background: #fee2e2; color: var(--danger); }
html.dark .announcement-delete:hover { background: #3a1d1d; }

.announcement-body {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 8px; }

/* --- Doğum günü --- */
.birthday-widget { display: flex; flex-direction: column; gap: 4px; }

.birthday-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  text-align: left;
  width: 100%;
}

.birthday-person:hover { background: var(--primary-light); }
html.dark .birthday-person:hover { background: #16324d; }
.birthday-person img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.birthday-person span { display: flex; flex-direction: column; min-width: 0; }
.birthday-person strong { font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.birthday-person small { font-size: 11px; color: var(--text-muted); }

.widget-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 4px;
}

/* --- Birleşik arama --- */
.search-group + .search-group { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.search-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 7px 12px 3px;
}
.search-result-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  border-radius: 50%;
  flex: 0 0 auto;
}
.search-post .search-result-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}

/* --- Rol matrisi --- */
.role-matrix { background: var(--bg-white); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.role-matrix-scroll { overflow-x: auto; }

.role-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.role-table th, .role-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: center; }
.role-table th:first-child, .role-table td:first-child { text-align: left; }
.role-table th { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.role-table tr:last-child td { border-bottom: none; }
.perm-yes { color: #16a34a; font-weight: 700; }
.perm-no { color: #b0b7c3; }
html.dark .perm-yes { color: #4ade80; }
html.dark .perm-no { color: #5a6473; }

.member-role-select {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-white);
  color: var(--text);
  font-size: 12px;
}

.member-badge.role-moderator { background: #eef2ff; color: #4338ca; }
html.dark .member-badge.role-moderator { background: #1e1b4b; color: #a5b4fc; }

/* --- Analitik --- */
.analytics-panel { background: var(--bg-white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 16px; }

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.stat-card {
  background: var(--bg);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stat-card span { font-size: 22px; font-weight: 800; color: var(--primary); }
html.dark .stat-card span { color: #7cc2ff; }
.stat-card small { font-size: 11px; color: var(--text-muted); }

.analytics-block { margin-top: 18px; }
.analytics-block h4 { font-size: 13px; margin-bottom: 8px; color: var(--text); }

.signup-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 96px;
  padding: 6px;
  background: var(--bg);
  border-radius: 10px;
}
.signup-bar {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}
.signup-bar > div {
  width: 100%;
  max-width: 22px;
  min-height: 2px;
  background: var(--primary);
  border-radius: 4px 4px 0 0;
}
.signup-bar span { font-size: 9px; color: var(--text-muted); }

.analytics-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  min-width: 0;
}
.analytics-row:last-child { border-bottom: none; }
.analytics-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.analytics-row-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.analytics-row-meta { flex: 0 0 auto; font-size: 11px; color: var(--text-muted); }

.reset-link-input {
  width: 100%;
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Şifre sıfırlama --- */
.modal-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

.error-msg.success {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
html.dark .error-msg.success { background: #052e22; color: #6ee7b7; border-color: #065f46; }

input[type="date"] {
  color-scheme: light;
}
html.dark input[type="date"] { color-scheme: dark; }

/* --- Mobil uyum --- */
@media (max-width: 640px) {
  .jobs-grid { grid-template-columns: 1fr; }
  .jobs-toolbar { flex-direction: column; align-items: stretch; }
  .jobs-toolbar input, .jobs-toolbar select { width: 100%; }
  .analytics-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .analytics-row { flex-wrap: wrap; }
  .analytics-row-meta { flex-basis: 100%; }
  .stat-card span { font-size: 19px; }
  .search-post .search-result-meta { max-width: 160px; }
  .poll-head { align-items: flex-start; }
  .job-card { padding: 13px; }
}

@media (max-width: 380px) {
  .stat-card { padding: 9px; }
  .stat-card span { font-size: 17px; }
  .stat-card small { font-size: 10px; }
  .signup-chart { gap: 2px; }
  .member-role-select { width: 100%; }
  .member-actions { gap: 6px; }
}

@media (max-width: 480px) {
  .create-tabs { flex-wrap: wrap; overflow-x: visible; }
  .create-tab { flex: 1 1 calc(50% - 6px); }
}

/* ============================================================
   Ana sayfaya gömülü paylaşım kutusu
   ============================================================ */

.inline-composer {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.composer-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.composer-top textarea {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  max-height: 240px;
  resize: vertical;
  border: 1px solid transparent;
  background: var(--bg);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.composer-top textarea::placeholder { color: var(--text-muted); }

.composer-top textarea:focus {
  border-color: var(--primary);
  background: var(--bg-white);
}

.inline-composer .poll-composer { margin-bottom: 0; }
.inline-composer .terms-box { margin-top: 0; }

.composer-options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.composer-options .media-add-btn {
  border: 1px solid var(--border);
  background: var(--bg-white);
  color: var(--text-muted);
}

.composer-options .media-add-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary-light);
  color: var(--primary);
}

.composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.composer-foot .visibility-toggle { flex-wrap: wrap; }

.composer-submit {
  width: auto;
  padding: 9px 26px;
  border-radius: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.composer-submit:disabled { opacity: 0.6; cursor: default; }

html.dark .composer-top textarea { background: #22272e; }
html.dark .composer-top textarea:focus { background: #1b2027; }
html.dark .composer-options .media-add-btn {
  background: transparent;
  border-color: #3a424d;
  color: #b6c0cc;
}
html.dark .composer-options .media-add-btn:hover {
  background: #16324d;
  border-color: #16324d;
  color: #7cc2ff;
}

@media (max-width: 480px) {
  .inline-composer { padding: 11px; }
  .composer-foot { flex-direction: column; align-items: stretch; }
  .composer-submit { width: 100%; }
  .composer-options .media-add-btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }
}

/* Mobilde gönderi aksiyonları iki satıra yayılsın */
@media (max-width: 480px) {
  .post-actions { flex-wrap: wrap; }
  .post-actions button {
    flex: 1 1 calc(50% - 8px);
    font-size: 12px;
    padding: 7px 4px;
    gap: 4px;
  }
}

/* Genel gizleme yardımcısı */
.hidden { display: none !important; }

/* Oyu değiştirme */
button.poll-option { width: 100%; font-family: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.poll-option-result:hover { border-color: var(--primary); background: var(--primary-light); }
.poll-option-result:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.poll-hint { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
html.dark .poll-option-result:hover { background: #16324d; }

/* Kayit: dogum gunu alani */
#register-form .reg-field input { margin-bottom: 0; }
#register-form input[type="date"] { min-height: 48px; max-width: 100%; }

/* Fotoğraf büyütme (lightbox) */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 10, 16, 0.93);
}

.photo-lightbox img {
  width: auto;
  height: auto;
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  object-fit: contain;
  cursor: zoom-out;
  border-radius: 8px;
  background: #0b0f14;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}

.lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 10001;
}

.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

html.lightbox-open,
html.lightbox-open body { overflow: hidden; }

@media (max-width: 480px) {
  .photo-lightbox { padding: 10px; }
  .lightbox-close { top: 10px; right: 10px; width: 38px; height: 38px; }
}

/* ===== Deneyimler ===== */
.exp-composer {
  display: flex;
  gap: 12px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.exp-composer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 40px;
  background: var(--bg);
}

.exp-composer-body { flex: 1; min-width: 0; }

.exp-composer textarea {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-white);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

.exp-composer textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.exp-composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.exp-composer-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.exp-media-btn {
  padding: 5px 10px;
  font-size: 12px;
  gap: 6px;
}

.exp-char { font-size: 12px; color: var(--text-muted); flex: 0 0 auto; white-space: nowrap; }

.exp-composer-foot .btn-primary,
.qa-ask .btn-primary,
.qa-answer-form .btn-primary {
  width: auto;
  flex: 0 0 auto;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
}

.exp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.exp-grid.is-empty {
  display: block;
}

.exp-grid.is-empty .empty-state {
  width: 100%;
}

.exp-grid .post-card {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.exp-grid .post-actions button {
  font-size: 12px;
  padding: 8px 4px;
}

.exp-card .post-content { font-size: 14px; }

/* ===== Soru & Cevap ===== */
.qa-ask {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.qa-ask-body {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qa-ask textarea {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-white);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

.qa-ask-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.qa-ask .photo-preview { margin-top: 0; }

.qa-ask textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.qa-ask .btn-primary { flex: 0 0 auto; }

.qa-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qa-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.qa-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.qa-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 38px;
  background: var(--bg);
}

.qa-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.qa-name { font-size: 14px; font-weight: 600; color: var(--text); }
.qa-time { font-size: 12px; color: var(--text-muted); }

.qa-delete,
.qa-delete-sm {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 15px;
  padding: 2px 6px;
  border-radius: 6px;
}

.qa-delete:hover,
.qa-delete-sm:hover { background: var(--bg); color: #e5484d; }

.qa-question {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 12px;
}

.qa-answers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.qa-empty { font-size: 13px; color: var(--text-muted); }

.qa-answer { display: flex; gap: 8px; }

.qa-answer-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 30px;
  background: var(--bg);
}

.qa-answer-body {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border-radius: 10px;
  padding: 8px 10px;
}

.qa-answer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.qa-answer-name { font-size: 13px; font-weight: 600; color: var(--text); }

.qa-answer-text {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.qa-answer-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.qa-answer-form input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-white);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

.qa-answer-form input[type="text"]:focus {
  outline: none;
  border-color: var(--primary);
}

.qa-answer-form .btn-primary { flex: 0 0 auto; }

.qa-photo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  cursor: pointer;
  font-size: 15px;
  flex: 0 0 auto;
  transition: background 0.2s;
}

.qa-photo-btn:hover { background: #d0e8ff; }

.qa-answer-preview {
  flex: 1 0 100%;
  margin-top: 0;
}

.qa-photos {
  margin: 6px 0 0;
}

.qa-photos img {
  max-height: 260px;
  border-radius: 8px;
}

.qa-question-photos { margin: 8px 0 4px; }

.qa-answer .qa-photos { margin-top: 6px; }

html.dark .qa-photo-btn { background: #16324d; color: #7cc2ff; }
html.dark .qa-photo-btn:hover { background: #244c73; }

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

@media (max-width: 640px) {
  .exp-grid { grid-template-columns: 1fr; }
  .qa-ask { flex-direction: column; align-items: stretch; }
  .qa-ask .btn-primary { width: 100%; }
  .qa-answer-form .btn-primary { padding: 8px 12px; }
}

@media (max-width: 480px) {
  .exp-grid .post-actions { flex-wrap: nowrap; }
  .exp-grid .post-actions button { font-size: 11.5px; padding: 8px 2px; }
}

/* ===== EB'ler ===== */
.eb-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eb-item {
  display: block;
}

.eb-panel {
  display: none;
  padding: 14px 4px 6px;
}

.eb-item.open .eb-panel {
  display: block;
  animation: ebPanelIn 0.2s ease both;
}

@keyframes ebPanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .eb-item.open .eb-panel { animation: none; }
}

.eb-term-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-white);
  box-shadow: var(--shadow);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.eb-term-row:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(3, 126, 243, 0.12);
}

.eb-term-row.active {
  border-color: var(--primary);
  background: var(--primary-light);
}

.eb-item.open .eb-term-row {
  border-color: var(--primary);
  background: var(--primary-light);
}

.eb-term-year {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

.eb-term-row.active .eb-term-year { color: var(--primary); }

.eb-item.open .eb-term-row .eb-term-year { color: var(--primary); }

.eb-term-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eb-term-count {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.eb-term-row.active .eb-term-count {
  background: var(--primary);
  color: #fff;
}

.eb-term-arrow {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
}

.eb-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.eb-detail-titles { min-width: 0; }

.eb-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.25;
  word-break: break-word;
}

.eb-meta {
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-muted);
}

.eb-name-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.eb-name-form input {
  flex: 1;
  min-width: 180px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-white);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}

.eb-name-form input:focus {
  outline: none;
  border-color: var(--primary);
}

.eb-name-form .btn-primary,
.eb-name-form .btn-outline {
  width: auto;
  flex: 0 0 auto;
}

.eb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

/* Profilde EB bilgisi */
.profile-eb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.profile-eb-position,
.profile-eb-role {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.profile-eb-position {
  background: var(--primary);
  color: #fff;
  text-transform: uppercase;
}

.profile-eb-role {
  background: var(--primary-light);
  color: var(--primary);
}

html.dark .eb-term-row {
  background: #161b21;
  border-color: #333a44;
}

html.dark .eb-term-row.active,
html.dark .eb-item.open .eb-term-row {
  background: #16283e;
  border-color: var(--primary);
}

html.dark .eb-term-count { background: #262b33; }

html.dark .eb-term-row.active .eb-term-count,
html.dark .eb-item.open .eb-term-row .eb-term-count {
  background: var(--primary);
  color: #fff;
}

html.dark .profile-eb-role {
  background: #16324d;
  color: #7cc2ff;
}

@media (max-width: 480px) {
  .eb-grid { grid-template-columns: 1fr; }
  .eb-term-row { gap: 8px; padding: 11px 12px; }
  .eb-term-name { font-size: 12.5px; }
  .eb-name { font-size: 19px; }
}

/* ===== Mesajlar: koyu tema ===== */
html.dark .messages-panel {
  background: #1d2127;
  border-color: #313842;
}

html.dark .messages-panel-head { border-color: #313842; }

html.dark .messages-panel-icon { background: #16324d; }

html.dark .conversation-item:hover {
  background: #262b33;
  border-color: #3a424d;
}

html.dark .conversation-item.unread {
  background: #16283e;
  border-color: #16324d;
}

html.dark .conversation-avatar {
  border-color: #1d2127;
  box-shadow: 0 0 0 1px #3a424d;
}

html.dark .conversation-item.unread .conversation-avatar {
  box-shadow: 0 0 0 2px var(--primary);
}

html.dark .chat-header {
  background: linear-gradient(180deg, #1d2127, #171b21);
  border-color: #313842;
}

html.dark .chat-header-avatar {
  border-color: #1d2127;
  box-shadow: 0 0 0 1px #3a424d;
}

html.dark .chat-empty-icon,
html.dark .conv-empty-icon {
  background: #16324d;
}

html.dark .chat-bubble.theirs {
  background: #262b33;
  border-color: #333b45;
}

html.dark .conv-prefix { color: #7cc2ff; }
html.dark .conversation-item.unread .conversation-last { color: #e8edf5; }

/* Mesajlar sayfasında daha geniş alan */
body[data-page="messages"] .center-feed { max-width: 980px; }
body[data-page="messages"] .right-sidebar { display: none; }

@media (max-width: 1100px) {
  body[data-page="messages"] .center-feed { max-width: 100%; }
}

/* ===== Etkinlik aksiyonları: koyu tema ===== */
html.dark .event-action-btn {
  background: #1d2127;
  border-color: #333a44;
  color: var(--text-muted);
}

html.dark .event-action-btn:hover {
  background: #16324d;
  border-color: var(--primary);
  color: #7cc2ff;
}

html.dark .event-action-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ===== PWA ===== */
html.pwa-mode .top-bar {
  padding-top: env(safe-area-inset-top, 0px);
}

html.pwa-mode .mobile-nav {
  top: calc(56px + env(safe-area-inset-top, 0px));
}

html.pwa-mode body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 520px) {
  .install-app-text { display: none; }
  .install-app-btn { padding: 6px 9px; }
}

/* ============================================================
   GÖRSEL YENİLEME — turuncu tema, beyaz üst çubuk, yuvarlak kartlar
   ============================================================ */

/* --- Üst çubuk --- */
.top-bar {
  background: var(--topbar-bg);
  color: var(--text);
  height: 64px;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

.top-bar-inner {
  max-width: 1520px;
  padding: 0 22px;
  gap: 16px;
}

.top-left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
}

.top-center {
  flex: 0 1 560px;
  max-width: 560px;
  min-width: 0;
  margin: 0 auto;
}

.top-right {
  flex: 1 1 0;
  justify-content: flex-end;
}

.top-title { color: var(--text); }

.top-logo .top-mark { filter: none; }

.search-bar { position: relative; }

.search-bar::before {
  content: '🔍';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

.search-bar input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 11px 18px 11px 40px;
  border-radius: 999px;
  font-size: 14px;
}

.search-bar input::placeholder { color: var(--text-muted); }

.search-bar input:focus {
  background: var(--bg-white);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light);
}

.top-right { gap: 9px; }

.nav-icon {
  width: 42px;
  height: 42px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 17px;
}

.nav-icon:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

.nav-icon.nav-home {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(3, 126, 243, 0.28);
}

.nav-icon.nav-home:hover { background: var(--primary-hover); }

.badge-dot {
  border-color: var(--bg-white);
  top: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
}

.top-profile {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.top-profile:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(3, 126, 243, 0.14);
}

.profile-pic-small {
  width: 38px;
  height: 38px;
  border: none;
  box-shadow: none;
}

.top-user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.top-user-caret {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: -2px;
}

.btn-logout-top {
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.btn-logout-top:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

.top-bar .theme-toggle {
  width: 42px;
  height: 42px;
  margin-left: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
}

.top-bar .theme-toggle:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

.install-app-btn {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
  padding: 8px 13px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(3, 126, 243, 0.24);
}

.install-app-btn:hover { background: var(--primary-hover); }

/* --- Yerleşim --- */
.facebook-layout {
  max-width: 1520px;
  gap: 22px;
  padding: 20px 22px 44px;
}

.left-sidebar {
  width: 252px;
  top: 84px;
}

.sidebar-item {
  gap: 12px;
  padding: 11px 15px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.sidebar-item:hover {
  background: var(--bg-white);
  color: var(--text);
}

.sidebar-item.active {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(3, 126, 243, 0.28);
}

.nav-count {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.sidebar-item.active .nav-count {
  background: #fff;
  color: var(--primary);
}

.right-sidebar {
  width: 330px;
  top: 84px;
}

.right-widget {
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 14px rgba(18, 24, 40, 0.05);
}

.widget-header { padding: 16px 18px 10px; }

.widget-header span:first-child {
  font-size: 16px;
  font-weight: 800;
}

/* --- Kartlar ve bileşenler --- */
.inline-composer,
.post-card,
.section-head,
.board-card,
.qa-card,
.event-item,
.job-card,
.profile-card,
.right-widget,
.messages-panel,
.messages-chat,
.exp-composer,
.qa-ask,
.admin-members {
  border-radius: 22px;
}

.post-card,
.inline-composer,
.section-head {
  border: 1px solid var(--border);
  box-shadow: 0 2px 14px rgba(18, 24, 40, 0.05);
}

.composer-top textarea {
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 12px 16px;
}

.composer-top textarea:focus {
  background: var(--bg-white);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light);
}

.media-add-btn {
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}

.media-add-btn:hover { background: #d0e8ff; }

.composer-submit,
.composer-options + .composer-foot .composer-submit {
  border-radius: 999px;
}

.btn-primary {
  background: var(--primary);
  border-radius: 12px;
}

.btn-primary:hover { background: var(--primary-hover); }

.btn-create {
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
}

.btn-create:hover { background: var(--primary-hover); }

.btn-outline { border-radius: 999px; }

.section-head { padding: 18px 20px; }

.section-head h2 { font-size: 21px; font-weight: 800; }

.section-badge {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 800;
}

.feed-filters select {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 600;
}

.post-actions button {
  border-radius: 10px;
  color: var(--text-muted);
}

.post-actions button:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.post-avatar { width: 42px; height: 42px; }

.post-name { font-size: 14.5px; }

/* --- Mobil menü --- */
.mobile-nav {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  gap: 6px;
}

.mobile-nav-item {
  border-radius: 999px;
  color: var(--text-muted);
  font-weight: 700;
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
}

.mobile-nav-item.active {
  background: var(--primary);
  color: #fff;
}

/* --- Koyu tema --- */
html.dark .top-bar { border-bottom-color: var(--border); }

html.dark .search-bar input {
  background: #1b2027;
  border-color: #2a313a;
  color: var(--text);
}

html.dark .search-bar input:focus { background: #20262e; }

html.dark .nav-icon {
  background: #1b2027;
  border-color: #2a313a;
  color: var(--text);
}

html.dark .nav-icon:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

html.dark .nav-icon.nav-home {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

html.dark .top-profile {
  background: #1b2027;
  border-color: #2a313a;
}

html.dark .btn-logout-top {
  background: #1b2027;
  border-color: #2a313a;
  color: var(--text-muted);
}

html.dark .btn-logout-top:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

html.dark .top-bar .theme-toggle {
  background: #1b2027;
  border-color: #2a313a;
  color: var(--text);
}

html.dark .top-bar .theme-toggle:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

html.dark .sidebar-item:hover { background: #1b2027; }

html.dark .sidebar-item.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(3, 126, 243, 0.24);
}

html.dark .composer-top textarea {
  background: #1b2027;
  border-color: #262c35;
}

html.dark .composer-top textarea:focus {
  background: #20262e;
  border-color: var(--primary);
}

html.dark .mobile-nav-item.active {
  background: var(--primary);
  color: #fff;
}

/* --- Duyarlı --- */
@media (max-width: 768px) {
  .top-bar { height: 56px; }
  .top-bar-inner { padding: 0 12px; }
  .facebook-layout { padding: 12px 10px 40px; }
  .top-user-name,
  .top-user-caret { display: none; }
  .top-profile { padding: 3px; background: transparent; border: none; box-shadow: none; }
  .top-profile:hover { background: transparent; box-shadow: none; }
  .nav-icon, .top-bar .theme-toggle { width: 36px; height: 36px; font-size: 15px; }
}

/* --- İnce ayarlar --- */
.center-feed { max-width: 740px; }

body[data-page="messages"] .center-feed { max-width: 980px; }

@media (max-width: 1100px) {
  body[data-page="messages"] .center-feed { max-width: 100%; }
}

.composer-submit {
  border-radius: 999px;
  padding: 11px 26px;
  width: auto;
  flex: 0 0 auto;
}

.feed-filters { gap: 10px; margin: 2px 0 14px; }

.feed-filters select,
.feed-filters input {
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  font-size: 13px;
}

.feed-filters select { flex: 0 0 auto; min-width: 0; }

.feed-filters input { flex: 1; }

.feed-filters select:focus,
.feed-filters input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.btn-event {
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 800;
}

.btn-event:hover { background: #d0e8ff; }

html.dark .btn-event { background: var(--primary-light); color: #7cc2ff; }
html.dark .btn-event:hover { background: #244c73; }

/* Sol kenar çubuğu kaydırılabilir kalsın, taşmasın */
.left-sidebar { max-height: calc(100vh - 96px); overflow-y: auto; padding-bottom: 8px; }
.left-sidebar::-webkit-scrollbar { width: 0; }

/* --- Profil açılır menüsü --- */
.top-profile-wrap {
  position: relative;
  display: inline-flex;
}

.top-profile {
  font-family: inherit;
  white-space: nowrap;
}

.top-user-caret {
  transition: transform 0.18s;
}

#profile-menu-btn[aria-expanded="true"] .top-user-caret {
  transform: rotate(180deg);
}

.profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15, 20, 30, 0.16);
  z-index: 400;
  animation: profileMenuIn 0.16s ease both;
}

.profile-menu.hidden { display: none; }

@keyframes profileMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .profile-menu { animation: none; }
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.profile-menu-item:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.profile-menu-item.danger { color: #dc2626; }

.profile-menu-item.danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

.profile-menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}

html.dark .profile-menu {
  background: #1b2027;
  border-color: #2a313a;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

html.dark .profile-menu-item { color: var(--text); }

html.dark .profile-menu-item:hover {
  background: var(--primary-light);
  color: #7cc2ff;
}

html.dark .profile-menu-item.danger { color: #fca5a5; }

html.dark .profile-menu-item.danger:hover {
  background: #3a1d1d;
  color: #fca5a5;
}

/* --- Etkinlik ekleme formu --- */
.event-form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.event-form-row .input-group { margin-bottom: 0; }

@media (max-width: 520px) {
  .event-form-row { grid-template-columns: 1fr; }
}

#event-modal .modal-content { max-width: 680px; }

/* Etkinlik formu başlığı ve iki sütunlu satır */
#event-modal .event-head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 27px;
  line-height: 1;
  color: #fff;
}

#event-modal .event-form-row.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.event-photo-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-white);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.event-photo-upload:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.event-photo-preview {
  position: relative;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}

.event-photo-preview img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.event-photo-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.event-photo-thumb {
  flex: 0 0 112px;
  width: 112px;
  height: 86px;
  object-fit: cover;
  border-radius: 12px;
  cursor: zoom-in;
}

.event-photo-thumb:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .event-photo-thumb {
    flex: 1 0 100%;
    width: 100%;
    height: 170px;
  }
}

@media (max-width: 520px) {
  #event-modal .event-form-row.two-col {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Etkinlik modalında işlem düğmeleri altta sabit kalsın */
#event-modal .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--bg-white);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ===== Uygulama içi onay penceresi ===== */
.confirm-content {
  max-width: 380px;
  text-align: center;
  padding: 26px 22px 16px;
}

.confirm-icon {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 10px;
}

.confirm-content h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.confirm-content p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

.confirm-content .modal-actions {
  justify-content: center;
  gap: 10px;
  padding: 20px 0 0;
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s;
}

.btn-danger:hover { background: #dc2626; }

.confirm-content .btn-outline,
.confirm-content .btn-danger {
  min-width: 112px;
}

html.dark .confirm-content { background: var(--bg-white); }

/* --- Üst çubuk: logo solda, arama tam ortada --- */
@media (max-width: 1419px) {
  .top-user-name,
  .top-user-caret { display: none; }
  .install-app-text { display: none; }
}

@media (max-width: 1150px) {
  .top-center {
    flex-basis: 400px;
    max-width: 400px;
  }
}

@media (max-width: 1000px) {
  .top-center { display: none; }
  .top-bar .nav-icon.mobile-search-only { display: flex; }
}

/* --- Üst çubuk marka (iki satır) --- */
.top-logo { gap: 11px; }

.top-logo .top-mark {
  width: 42px;
  height: 42px;
}

.top-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}

.top-brand .top-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}

.top-subtitle {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--primary);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .top-brand { display: none; }
}

@media (max-width: 480px) {
  .top-subtitle { display: none; }
}

/* Onay penceresi odak halkası */
.confirm-content .btn-outline:focus-visible,
.confirm-content .btn-danger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ===== Mobil sağdan açılır menü ===== */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 490;
  background: rgba(8, 12, 20, 0.45);
  backdrop-filter: blur(2px);
}

.mobile-nav-head { display: none; }

.mobile-menu-overlay:not(.hidden) { display: block; }

html.mobile-menu-open body { overflow: hidden; }

@media (max-width: 768px) {
  .mobile-menu-btn { display: inline-flex; }

  /* Üst çubukta yer aç: arama ve yükle menüye taşındı */
  .top-right .nav-icon.mobile-search-only { display: none; }
  .top-right .install-app-btn { display: none !important; }

  .mobile-nav {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(310px, 84vw);
    max-height: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 3px;
    padding: 14px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-white);
    border: none;
    border-left: 1px solid var(--border);
    border-radius: 0;
    box-shadow: -24px 0 48px rgba(10, 15, 25, 0.24);
    transform: translateX(105%);
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.3, 1);
    z-index: 500;
    overflow-y: auto;
    will-change: transform;
  }

  .mobile-nav.open { transform: translateX(0); }

  html.chat-mode .mobile-nav { display: none; }

  .mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
  }

  .mobile-nav-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
  }

  .mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--text-muted);
    background: transparent;
  }

  .mobile-nav-item:hover { background: var(--bg); color: var(--text); }

  .mobile-nav-item.active {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
  }

  .mobile-nav-item .nav-count { margin-left: auto; }
  .mobile-nav-item .nav-dot { margin-left: auto; }

  .mobile-nav-item.active .nav-count {
    background: #fff;
    color: var(--primary);
  }

  .drawer-search-item,
  .drawer-install-item {
    border: 1px solid var(--border);
    margin-bottom: 6px;
  }

  .drawer-install-item { margin-top: 8px; margin-bottom: 0; }
}

@media (min-width: 769px) {
  .mobile-nav,
  .mobile-menu-overlay { display: none !important; }
}

/* Onay kutusu satırı */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.checkbox-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
  cursor: pointer;
  flex: 0 0 auto;
}

/* Mobil giriş ekranı: başlık üstü boşluk */
@media (max-width: 900px) {
  .hero-copy { margin-top: 22px; }
}

/* ===== Tek satır paylaşım kutusu ===== */
.inline-composer.collapsed {
  padding: 10px 12px;
  gap: 0;
  cursor: text;
}

.inline-composer.collapsed .composer-options,
.inline-composer.collapsed .composer-foot,
.inline-composer.collapsed .terms-box,
.inline-composer.collapsed .photo-preview,
.inline-composer.collapsed .video-preview,
.inline-composer.collapsed .poll-composer {
  display: none !important;
}

.inline-composer.collapsed .composer-top {
  align-items: center;
}

.inline-composer.collapsed .composer-top textarea {
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 11px 16px;
  resize: none;
  overflow: hidden;
  white-space: nowrap;
  cursor: text;
}

.inline-composer:not(.collapsed) .composer-top textarea {
  min-height: 68px;
  resize: none;
}

@media (max-width: 480px) {
  .inline-composer.collapsed { padding: 9px 10px; }
  .inline-composer.collapsed .composer-top textarea {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    padding: 10px 14px;
  }
}

/* ===== Mobilde sağ kenar kartları (yatay kaydırılabilir şerit) ===== */
.mobile-widget-strip { display: none; }

@media (max-width: 768px) {
  .mobile-widget-strip {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 10px 0 4px;
    padding: 2px 2px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mobile-widget-strip::-webkit-scrollbar { display: none; }

  .mobile-widget-strip .right-widget {
    flex: 0 0 78%;
    max-width: 300px;
    margin: 0;
    border-radius: 18px;
    scroll-snap-align: start;
    box-shadow: 0 2px 10px rgba(18, 24, 40, 0.06);
  }

  .mobile-widget-strip .widget-header {
    padding: 12px 14px 6px;
  }

  .mobile-widget-strip .widget-header span:first-child {
    font-size: 13.5px;
    font-weight: 800;
  }

  .mobile-widget-strip .see-all { font-size: 11.5px; white-space: nowrap; flex-shrink: 0; }

  .mobile-widget-strip #sidebar-events,
  .mobile-widget-strip #wordle-leaderboard,
  .mobile-widget-strip #birthday-widget {
    padding: 0 10px 10px;
  }

  /* Etkinlik kartı: tek etkinlik göster, kompakt */
  .mobile-widget-strip .event-card { padding: 2px 4px 6px; gap: 10px; }
  .mobile-widget-strip .event-card:nth-child(n+2) { display: none; }
  .mobile-widget-strip .event-date { min-width: 42px; padding: 3px 6px; border-radius: 7px; }
  .mobile-widget-strip .event-date .month { font-size: 9px; }
  .mobile-widget-strip .event-date .day { font-size: 17px; }
  .mobile-widget-strip .event-title { font-size: 13px; }
  .mobile-widget-strip .event-location,
  .mobile-widget-strip .event-time { font-size: 11px; }
  .mobile-widget-strip .btn-event {
    padding: 4px 10px;
    margin-top: 4px;
    font-size: 11px;
    border-radius: 7px;
  }

  /* Wordle: en fazla 3 satır */
  .mobile-widget-strip #wordle-leaderboard .leaderboard-row:nth-child(n+4) { display: none; }
  .mobile-widget-strip .leaderboard-row { padding: 4px; gap: 6px; }
  .mobile-widget-strip .leaderboard-avatar { flex: 0 0 24px; width: 24px; height: 24px; }
  .mobile-widget-strip .leaderboard-name { font-size: 12.5px; }
  .mobile-widget-strip .leaderboard-points { font-size: 11.5px; }

  /* Doğum günü: en fazla 2 kişi */
  .mobile-widget-strip .birthday-widget { gap: 2px; }
  .mobile-widget-strip .birthday-person { padding: 4px; }
  .mobile-widget-strip .birthday-person:nth-child(n+3) { display: none; }
  .mobile-widget-strip .birthday-person img { width: 28px; height: 28px; }
  .mobile-widget-strip .birthday-person strong { font-size: 12px; }
  .mobile-widget-strip .birthday-person small { font-size: 10.5px; }

  .mobile-widget-strip .leaderboard-empty,
  .mobile-widget-strip .widget-empty {
    padding: 2px 4px 4px;
    font-size: 12px;
  }
}

@media (min-width: 769px) {
  .mobile-widget-strip { display: none !important; }
}

/* Küçük telefonlarda kart biraz daha geniş olsun */
@media (max-width: 360px) {
  .mobile-widget-strip .right-widget { flex-basis: 84%; }
  .mobile-widget-strip .widget-header { padding: 11px 12px 5px; }
  .mobile-widget-strip .widget-header span:first-child { font-size: 12.5px; }
  .mobile-widget-strip .see-all { font-size: 11px; }
}

/* ===== Profil rozetleri ===== */
.profile-badges {
  margin-top: 14px;
}

.profile-completion {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.profile-completion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}

.profile-completion-head strong {
  font-size: 13px;
  color: var(--text);
}

.profile-completion-bar {
  height: 7px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.profile-completion-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #7cc2ff);
  transition: width 0.4s ease;
}

.badges-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.badges-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.badges-count {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}

.badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-white);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: default;
}

.badge-chip .badge-emoji {
  font-size: 13px;
  line-height: 1;
}

.badge-chip.earned {
  background: var(--primary-light);
  border-color: rgba(3, 126, 243, 0.28);
  color: var(--primary);
}

.badge-chip.locked {
  opacity: 0.45;
  filter: grayscale(1);
}

html.dark .badge-chip.earned {
  background: rgba(3, 126, 243, 0.18);
  border-color: rgba(124, 194, 255, 0.3);
  color: #7cc2ff;
}

@media (max-width: 480px) {
  .badge-chip {
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* ===== Sabitlenmiş gönderi ===== */
.post-card.pinned {
  border-color: rgba(3, 126, 243, 0.45);
  box-shadow: 0 6px 20px rgba(3, 126, 243, 0.1);
}

.post-pinned-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 12px 14px 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
}

html.dark .post-pinned-flag {
  background: rgba(3, 126, 243, 0.18);
  color: #7cc2ff;
}

.post-pin-btn {
  flex: 0 0 auto;
  padding: 4px 5px;
  border: none;
  border-radius: 8px;
  background: none;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.post-pin-btn:hover {
  opacity: 1;
  background: var(--bg);
}

.post-pin-btn.pinned {
  opacity: 1;
}


/* ============================================================
   Hikâyeler (24 saat)
   ============================================================ */

.story-bar {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 12px 12px 10px;
  margin-bottom: 14px;
  user-select: none;
  -webkit-user-select: none;
}

.story-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 10px;
}

.story-bar-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.story-strip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.story-strip::-webkit-scrollbar { display: none; }

.story-item {
  flex: 0 0 auto;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
  -webkit-tap-highlight-color: transparent;
}

.story-item * {
  -webkit-user-drag: none;
  cursor: inherit;
}

.story-ring {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  padding: 3px;
  display: block;
  background: #d7dbe2;
  transition: transform 0.15s ease;
}

.story-item:hover .story-ring { transform: scale(1.04); }

.story-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #eceef2;
  border: 2px solid var(--bg-white);
}

.story-ring.unviewed {
  background: conic-gradient(from 210deg, #037ef3, #00c6ff, #7c3aed, #037ef3);
}

.story-ring.viewed { background: #cfd4dc; }

html.dark .story-ring.viewed { background: #3a4350; }

.story-ring-add {
  background: var(--bg);
  border: 1.5px dashed rgba(3, 126, 243, 0.45);
}

.story-plus {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(3, 126, 243, 0.35);
}

.story-item-name {
  max-width: 100%;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.25;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-add .story-item-name { color: var(--primary); font-weight: 700; }

.story-item-term {
  display: inline-block;
  max-width: 100%;
  margin-top: -3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Hikâye paylaşma modalı --- */

.story-compose-content {
  max-width: 430px;
  width: 100%;
}

.story-compose-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 18px;
}

/* --- Kamera sahnesi --- */

.story-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 13;
  max-height: 42vh;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
}

.story-camera,
.story-preview {
  position: absolute;
  inset: 0;
}

.story-camera.hidden,
.story-preview.hidden { display: none; }

.story-camera video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

.story-camera video.mirrored { transform: scaleX(-1); }

.story-camera-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  background: rgba(8, 12, 20, 0.72);
  backdrop-filter: blur(2px);
}

.story-camera-status.hidden { display: none; }

.story-camera-spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  animation: storySpin 0.9s linear infinite;
}

@keyframes storySpin { to { transform: rotate(360deg); } }

.story-camera-status.error .story-camera-spinner { display: none; }

.story-camera-fallback {
  margin-top: 4px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.story-camera-fallback:hover { background: rgba(255, 255, 255, 0.26); }
.story-camera-fallback.hidden { display: none; }

.story-camera-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
}

.story-cam-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s, transform 0.15s;
}

.story-cam-btn:hover { background: rgba(0, 0, 0, 0.62); }
.story-cam-btn:active { transform: scale(0.94); }
.story-cam-btn.hidden { display: none; }

.story-cam-shutter {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  padding: 0;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.92);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}

.story-cam-shutter span {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  display: block;
  transition: transform 0.15s;
}

.story-cam-shutter:hover span { transform: scale(0.94); }
.story-cam-shutter:active { transform: scale(0.92); }

.story-cam-shutter:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.story-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.story-preview img,
.story-preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

.story-preview img.hidden,
.story-preview video.hidden { display: none; }

.story-retake {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s;
}

.story-retake:hover { background: rgba(0, 0, 0, 0.72); }

html.story-viewer-open,
html.story-viewer-open body,
html.story-compose-open,
html.story-compose-open body { overflow: hidden; }

.story-caption-input {
  width: 100%;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.story-caption-input::placeholder { color: var(--text-muted); }

.story-caption-input:focus {
  border-color: var(--primary);
  background: var(--bg-white);
}

/* --- Görünürlük --- */

.story-visibility {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.story-vis-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.story-vis-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.story-vis-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.story-vis-option:hover { background: var(--bg-white); }

.story-vis-option:has(input:checked) {
  background: var(--bg-white);
  border-color: rgba(3, 126, 243, 0.35);
}

.story-vis-option input {
  margin: 3px 0 0;
  accent-color: var(--primary);
  flex: 0 0 auto;
}

.story-vis-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.story-vis-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.story-vis-text small {
  font-size: 11.5px;
  color: var(--text-muted);
}

.story-term-select {
  width: 100%;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-white);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  outline: none;
}

.story-term-select.hidden { display: none; }

.story-term-select:focus { border-color: var(--primary); }

.story-submit { width: 100%; }

.story-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.story-compose-note {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
}

/* --- Hikâye görüntüleyici --- */

.story-viewer {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(8, 12, 20, 0.93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.story-viewer.hidden { display: none; }

.story-viewer-card {
  position: relative;
  width: min(430px, 100%);
  height: min(88vh, 780px);
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  animation: storyIn 0.2s ease both;
}

@keyframes storyIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.story-progress {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  z-index: 6;
  pointer-events: none;
}

.story-progress-bar {
  flex: 1;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.story-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
  border-radius: 99px;
}

.story-viewer-head {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: #fff;
}

.story-viewer-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: #222;
  flex-shrink: 0;
}

.story-viewer-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

#story-viewer-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#story-viewer-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
}

.story-viewer-term {
  align-self: flex-start;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(3, 126, 243, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.5;
  white-space: nowrap;
}

.story-viewer-term.hidden { display: none; }

.story-viewer-btn {
  flex-shrink: 0;
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  transition: background 0.15s;
}

.story-viewer-btn:hover { background: rgba(0, 0, 0, 0.45); }

.story-media {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.story-media-el {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.story-media-el.hidden { display: none; }

.story-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  z-index: 3;
  border: none;
  background: none;
  cursor: pointer;
}

.story-nav.prev { left: 0; }
.story-nav.next { right: 0; }

.story-caption-text {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 30px;
  z-index: 4;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  word-break: break-word;
}

.story-caption-text.hidden { display: none; }

.story-viewers {
  position: absolute;
  top: 66px;
  right: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.story-viewers.hidden { display: none; }

.story-viewer-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  z-index: 4;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

@media (max-width: 640px) {
  .story-bar { padding: 10px 8px 8px; border-radius: 16px; }
  .story-strip { gap: 10px; }
  .story-item { width: 68px; }
  .story-ring { width: 60px; height: 60px; }
  .story-item-name { font-size: 11px; }
  .story-viewer { padding: 0; }
  .story-viewer-card {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  .story-viewer-head { padding-top: 10px; }
  .story-viewer-foot { bottom: 14px; }
  .story-stage { max-height: 36vh; }
  .story-camera-controls { padding: 10px 14px 14px; }
  .story-cam-shutter { width: 60px; height: 60px; }
  .story-cam-shutter span { width: 46px; height: 46px; }
  .story-cam-btn { width: 42px; height: 42px; }
  .story-compose-body { padding: 12px 14px 16px; }
}

@media (max-width: 360px) {
  .story-item { width: 62px; }
  .story-ring { width: 54px; height: 54px; }
  .story-plus { width: 20px; height: 20px; font-size: 13px; }
  .story-item-name { font-size: 10.5px; }
  .story-item-term { font-size: 9px; padding: 1px 6px; }
  .story-cam-btn { width: 38px; height: 38px; font-size: 16px; }
  .story-cam-shutter { width: 56px; height: 56px; }
  .story-cam-shutter span { width: 42px; height: 42px; }
  .story-vis-option { padding: 7px 8px; }
}

/* Onay penceresi hikâye görüntüleyicinin üzerinde açılsın */
#confirm-modal { z-index: 11000; }