/* ═══════════════════════════════════════════════════════
   Erzurum Etkinlik — Tasarım Sistemi v3
   Modern • Canlı • Mobil Uyumlu
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Primary: Mor-Fuşya degrade ─────────────── */
  --primary:       #7c3aed;
  --primary-hover: #6d28d9;
  --primary-dark:  #5b21b6;
  --primary-light: #a78bfa;
  --primary-soft:  #f5f3ff;
  --primary-muted: #ede9fe;
  --primary-gradient: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  --primary-gradient-hover: linear-gradient(135deg, #6d28d9 0%, #be185d 100%);

  /* ── Secondary: Turuncu-Sarı vurgu ──────────── */
  --secondary:       #f59e0b;
  --secondary-hover: #d97706;
  --secondary-soft:  #fffbeb;
  --secondary-border:#fde68a;

  /* ── Accent: Turkuaz ────────────────────────── */
  --accent:        #0891b2;
  --accent-hover:  #0e7490;
  --accent-soft:   #ecfeff;
  --accent-muted:  #cffafe;

  /* ── Neutrals ───────────────────────────────── */
  --bg:          #fafbfc;
  --surface:     #ffffff;
  --surface-2:   #f8fafc;
  --border:      #e2e8f0;
  --border-focus:#a78bfa;
  --text:        #1e1b2e;
  --text-2:      #374151;
  --muted:       #6b7280;
  --faint:       #9ca3af;

  /* ── Semantic ───────────────────────────────── */
  --success:       #059669;
  --success-soft:  #ecfdf5;
  --success-border:#a7f3d0;
  --warn:          #d97706;
  --warn-soft:     #fffbeb;
  --warn-border:   #fde68a;
  --danger:        #dc2626;
  --danger-soft:   #fef2f2;
  --danger-border: #fecaca;

  /* ── Header ─────────────────────────────────── */
  --header-bg: linear-gradient(135deg, #312e81 0%, #7c3aed 50%, #db2777 100%);
  --header-text: #ffffff;

  /* ── Shape & Shadow ─────────────────────────── */
  --r:           14px;
  --r-sm:        10px;
  --r-xs:        6px;
  --radius:      var(--r);
  --radius-sm:   var(--r-sm);
  --radius-xs:   var(--r-xs);
  --radius-lg:   18px;
  --shadow-xs:   0 1px 2px rgba(124,58,237,.04);
  --shadow:      0 1px 3px rgba(124,58,237,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 16px rgba(124,58,237,.08), 0 2px 4px rgba(0,0,0,.03);
  --shadow-lg:   0 12px 32px rgba(124,58,237,.1), 0 4px 8px rgba(0,0,0,.04);

  /* ── Typography ─────────────────────────────── */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* ── Tipografi ÖLÇEĞİ (Paket 1) ─────────────────────────────
     Neden var
     ---------
     Ölçekten önce dosyada 348 ham `font-size` bildirimi ve 68 FARKLI
     değer vardı (`.72rem`, `.74rem`, `.76rem`, `.78rem`, `.8rem`,
     `.82rem`, `.84rem`, `.85rem`, `.88rem`…). Sonuç ziyaretçi
     yüzeyinde ölçülebilir bir kırılmaydı: takvim "Bugün" rozeti
     9.92px, widget kategori etiketleri 10px, kategori rozetleri
     11.52px ve HATA METNİ 12.48px — yani hata, gövde metninden
     küçüktü ve hiyerarşiyi tersine çeviriyordu.

     Sözleşme
     --------
     * Ziyaretçi yüzeyinde hiçbir metin 12px'in ALTINA inmez.
     * Tek istisna rozet (`--fs-badge`, 11px): tümü büyük harf, kısa
       ve etiket niteliğinde; 12px'e çıkarmak kart başlığıyla
       yarışıyordu. Bu istisna BİLİNÇLİ ve ölçülüyor.
     * Hata metni gövdeyle aynı ölçekte (`--fs-small`, 14px) — asla
       daha küçük.
     Kök yazı boyu 16px olduğu için rem→px birebir okunur. */
  /* 11.52px — YALNIZ rozet/etiket. Neden 11px değil: dosyadaki 84
     rozet bildirimi zaten `.72rem` idi; token'ı 11px'e çekmek EN YAYGIN
     rozeti KÜÇÜLTÜRDÜ. Ölçek, aykırı olanları (9.92px `cal-cell__today`,
     10px `erz-type`) bu tabana YÜKSELTİR; hiçbir rozet küçülmez. */
  --fs-badge:   0.72rem;
  --fs-caption: 0.75rem;    /* 12px — telif, sayaç, ince meta */
  --fs-small:   0.875rem;   /* 14px — yardımcı metin, HATA, meta */
  --fs-body:    1rem;       /* 16px — gövde ve tüm form alanları */
  --fs-lead:    1.125rem;   /* 18px — açıklama/lead */
  --fs-h3:      1.25rem;    /* 20px */
  --fs-h2:      1.5rem;     /* 24px */
  --fs-h1:      1.75rem;    /* 28px mobil — ≥768px'te 36px'e çıkar */

  /* ── Boşluk ölçeği (4 tabanlı) ──────────────── */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.5rem;    /*  8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.5rem;    /* 24px */
  --sp-6: 2rem;      /* 32px */
  --sp-7: 3rem;      /* 48px */
  --sp-8: 4rem;      /* 64px */

  /* ── Yerleşim ───────────────────────────────── */
  --container-max: 1200px;
  --gutter: 16px;              /* ≥768px'te 24px */

  /* ── Dokunma hedefi ─────────────────────────────────────────
     WCAG 2.5.5 / iOS HIG tabanı. Ölçekten önce `.btn` için
     `min-height` dosyada SEKİZ kez ve ÇELİŞKİLİ değerlerle
     (40px / 44px / 48px) bildiriliyordu; hangisinin kazandığına
     kaskad karar veriyordu. Tek kaynak burası. */
  --control-min:    44px;
  --control-min-lg: 48px;

  /* Legacy aliases for compatibility */
  --navy:   var(--primary-dark);
  --navy-2: var(--primary);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.pwa-standalone .site-header {
  padding-top: env(safe-area-inset-top);
}
.pwa-standalone .main-content {
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

/* Embed mode: harici sayfada şeffaf render */
body.embed-mode {
  background: transparent !important;
  min-height: 0 !important;
  display: block !important;
}
body.embed-mode .site-header,
body.embed-mode .site-footer {
  display: none !important;
}
body.embed-mode .main-content {
  padding-top: .25rem;
  padding-bottom: .25rem;
  flex: none !important;
}
body.embed-mode .main-content > .container {
  max-width: 100%;
  padding: 0;
}
body.embed-mode .upload-form {
  margin-bottom: 0 !important;
}
body.upload-success-minimal .site-header,
body.upload-success-minimal .site-footer {
  display: none !important;
}
body.upload-success-minimal .main-content {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
body.upload-success-minimal .main-content > .container {
  max-width: 760px;
}

a { color: var(--primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* ── Container ────────────────────────────────── */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.container--header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.container--footer { padding-top: 1.5rem; padding-bottom: 1.75rem; }

@media (max-width: 640px) {
  .container { padding: 0 1rem; }
}

/* ── Header ───────────────────────────────────── */
.site-header {
  background: var(--header-bg);
  color: var(--header-text);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(124,58,237,.15);
}

.site-header .container--header { padding-top: .85rem; padding-bottom: .85rem; }

.brand {
  display: inline-flex; align-items: center; gap: .65rem;
  text-decoration: none !important; color: #fff !important;
  font-weight: 700; font-size: 1.1rem;
  flex-shrink: 0;
}

.brand-mark {
  width: 34px; height: 34px; border-radius: 999px;
  overflow: hidden;
  background-image: url("/static/images/site-logo.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
  border: 1px solid rgba(255, 255, 255, .3);
}

.site-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem;
}
.site-nav > a {
  color: rgba(255,255,255,.85); text-decoration: none;
  font-size: .85rem; font-weight: 500;
  padding: .45rem .75rem; border-radius: var(--r-xs);
  transition: all .15s;
}
.site-nav > a:hover { color: #fff; background: rgba(255,255,255,.12); text-decoration: none; }

/* Kullanılmayan çıkış-formu sarmalayıcı kuralı KALDIRILDI (Paket 8): çıkış
   formu ayarlar menüsünün içinde `.settings-menu-form` ile basılıyor.
   Aşağıdaki düğme kuralı KULLANILIYOR ve duruyor. */
.site-nav-logout-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.9); font-size: .85rem; font-weight: 500;
  padding: .4rem .75rem; border-radius: var(--r-xs);
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.site-nav-logout-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }

.settings-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.settings-menu-wrap--nav {
  margin-left: auto;
}
.settings-toggle {
  border-color: rgba(255,255,255,.35) !important;
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
}
.settings-toggle:hover { background: rgba(255,255,255,.15) !important; }
.settings-notification-text {
  font-size: .75rem;
  color: rgba(255,255,255,.95);
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}
.settings-notification-count {
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  padding: 0 6px;
  background: #ef4444;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.settings-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  max-width: calc(100vw - 1rem);
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14);
  padding: 6px;
  z-index: 130;
  overflow-x: hidden;
}
.settings-menu-wrap.is-open .settings-menu {
  animation: settingsDropIn .16s ease-out;
}
@keyframes settingsDropIn {
  from {
    opacity: .35;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.settings-menu-link {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: #111827;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: .6rem .75rem;
  font-size: .875rem;
  font-weight: 500;
}
.settings-menu-notification-count {
  margin-left: auto;
  min-width: 22px;
  height: 20px;
  border-radius: 999px;
  padding: 0 7px;
  background: #ef4444;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.settings-menu-link:hover { background: #f3f4f6; color: #111827; text-decoration: none; }
.settings-menu-link.is-active { background: #ede9fe; color: #5b21b6; font-weight: 600; }
.settings-menu-form { margin: 0; }
.settings-menu-link-btn {
  cursor: pointer;
  font-family: inherit;
}

.mobile-only-install { display: none !important; }
@media (max-width: 768px) {
  .mobile-only-install { display: inline-flex !important; }
  .settings-notification-text { display: none; }
  #site-nav .settings-menu-wrap--nav {
    margin-left: 0;
    width: 100%;
    display: block;
  }
  #site-nav .settings-menu-wrap--nav .settings-toggle {
    width: 100%;
    justify-content: flex-start;
  }
  #site-nav .settings-menu-wrap--nav .settings-menu {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-shadow: none;
    margin-top: .45rem;
    animation: none !important;
    transform: none !important;
  }
  #site-nav .settings-menu-link {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ── Başlıktaki bildirim zili ─────────────────── */
.header-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
}

.header-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 999px;
  color: #fff !important;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  text-decoration: none !important;
  transition: background .15s, border-color .15s;
}
.header-bell:hover { background: rgba(255,255,255,.22); }
.header-bell svg { width: 20px; height: 20px; }

.header-bell-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  border: 2px solid rgba(255,255,255,.7);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header-bell-badge[hidden] { display: none; }

/* Okunmamış varken zil hem renk hem hareketle kendini belli etsin. */
.header-bell.has-unread {
  background: rgba(239,68,68,.28);
  border-color: rgba(248,113,113,.65);
  animation: headerBellGlow 2.2s ease-in-out infinite;
}
.header-bell.has-unread svg {
  transform-origin: top center;
  animation: headerBellSwing 2.6s ease-in-out infinite;
}

@keyframes headerBellGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
  70%      { box-shadow: 0 0 0 9px rgba(239,68,68,0); }
}
@keyframes headerBellSwing {
  0%, 60%, 100% { transform: rotate(0deg); }
  65% { transform: rotate(12deg); }
  72% { transform: rotate(-10deg); }
  79% { transform: rotate(7deg); }
  86% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .header-bell.has-unread,
  .header-bell.has-unread svg { animation: none; }
}

.settings-menu-link--notif {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.settings-menu-notification-count[hidden] { display: none; }

/* ── Mobile nav toggle ────────────────────────── */
.nav-toggle {
  display: none;
  background: transparent; border: none; cursor: pointer;
  padding: .5rem; color: #fff; line-height: 0;
}
.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .container--header {
    position: relative;
    gap: .5rem;
  }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + .35rem);
    width: auto;
    order: 10;
    flex-direction: column; align-items: stretch;
    /* Masaüstünde .site-nav flex-wrap:wrap ile satır sarar. Yön sütuna dönünce
       aynı bildirim "sütunlara sar" anlamına geliyor: yükseklik max-height ile
       sınırlı olduğu için sığmayan son öğe (Ayarlar) ekran dışında ikinci bir
       sütuna taşıyordu. Menü zaten overflow-y:auto ile kayabiliyor. */
    flex-wrap: nowrap;
    background: rgba(49,46,129,.95);
    border-radius: var(--r-sm);
    padding: .5rem;
    margin-top: 0;
    backdrop-filter: blur(8px);
    max-height: 75vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 140;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .28);
  }
  .site-nav.is-open { display: flex; }
  .site-nav > a { padding: .6rem .85rem; border-radius: var(--r-xs); }
  .site-nav > a:hover { background: rgba(255,255,255,.1); }
}

/* ── Footer ───────────────────────────────────── */
.site-footer {
  margin-top: auto;
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--muted); font-size: .85rem;
}
.site-footer p { margin: 0; }

.main-content { flex: 1; padding: 2rem 0 3rem; }

@media (max-width: 640px) {
  .main-content { padding: 1.25rem 0 2rem; }
}

/* ── Typography ───────────────────────────────── */
.page-head { margin-bottom: 2rem; }

.page-title {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--text); margin: 0 0 .4rem; line-height: 1.25;
}
.page-title--public { font-size: clamp(1.5rem, 4vw, 2.1rem); }

.page-lead { margin: 0; color: var(--muted); font-size: .95rem; max-width: 52ch; line-height: 1.6; }

.section-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0 0 .75rem; }
.section-title--sm { font-size: 1rem; }
.section-subtitle { font-size: .95rem; font-weight: 700; color: var(--text); margin: 0 0 .75rem; }

.text-muted { color: var(--muted); }
.text-danger { color: var(--danger); }
.text-readable { line-height: 1.7; white-space: pre-wrap; }

/* ── Buttons ──────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1.1rem; font-size: .875rem; font-weight: 600;
  font-family: inherit; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); text-decoration: none !important;
  cursor: pointer; line-height: 1.3;
  transition: all .2s ease;
  box-shadow: var(--shadow-xs);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn:hover { background: var(--surface-2); border-color: var(--border-focus); box-shadow: var(--shadow); text-decoration: none !important; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--primary-gradient); border-color: transparent;
  color: #fff !important; box-shadow: 0 2px 8px rgba(124,58,237,.25);
}
.btn-primary:hover { background: var(--primary-gradient-hover); border-color: transparent; box-shadow: 0 4px 12px rgba(124,58,237,.3); }

.btn-secondary {
  background: var(--surface); border-color: var(--primary-light);
  color: var(--primary) !important;
}
.btn-secondary:hover { background: var(--primary-soft); border-color: var(--primary); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff !important; box-shadow: 0 2px 6px rgba(220,38,38,.2); }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
/* Yıkıcı aksiyonlar bir satırda birincil aksiyondan daha ağır görünüyordu
   (UI raporu §3.5). Çerçeveli varyant aynı anlamı taşıyor, görsel ağırlığı
   birincil aksiyonun altında kalıyor. Kontrast: #b91c1c üzerine beyaz zemin
   4.5:1'in üzerinde. */
.btn-danger-outline {
  background: transparent;
  border-color: #dc2626;
  color: #b91c1c !important;
  box-shadow: none;
}
.btn-danger-outline:hover { background: #fef2f2; border-color: #b91c1c; }

/* Kart ızgaralarında kartlar satır yüksekliğine geriliyordu (§3.7). */
.stats-grid,
.report-metric-grid { align-items: start; }

/* Stat kartları aynı görünüyor, önem seviyesi okunmuyordu (§3.1). Üst şerit
   anlamı taşır; kartın metni de seviyeyi zaten yazıyor, yani anlam yalnız
   renge bağlı değil. */
.stat-card--error { border-top: 3px solid var(--danger); }
.stat-card--warning { border-top: 3px solid #b45309; }
.stat-card--ok { border-top: 3px solid #047857; }

/* `veri-hijyeni`de select 1300px'e yayılıyor, `notifications`ta ~100px kalıyordu
   (§3.6). Yığın formlarındaki kontroller ortak bir üst sınırda buluşuyor. */
.stack-form select,
.stack-form input[type="text"],
.stack-form input:not([type]),
.stack-form input[type="search"] { max-width: 32rem; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2) !important; box-shadow: none; }
.btn-ghost:hover { background: rgba(124,58,237,.05); color: var(--primary) !important; }
.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }

.btn-sm { padding: .38rem .7rem; font-size: .8rem; }
.btn-lg { padding: .7rem 1.4rem; font-size: .95rem; }
.btn-block { width: 100%; }
.btn-disabled, span.btn-disabled { opacity: .45; pointer-events: none; cursor: not-allowed; }

/* Loading state */
.btn.is-loading { pointer-events: none; opacity: .7; }
.btn.is-loading::after {
  content: ''; width: 14px; height: 14px; border: 2px solid transparent;
  border-top-color: currentColor; border-radius: 50%;
  animation: btn-spin .6s linear infinite; margin-left: .35rem;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Mobile full-width buttons */
@media (max-width: 480px) {
  .hero-actions .btn-lg { width: 100%; justify-content: center; }
  .container--header {
    flex-wrap: nowrap;
    align-items: center;
  }
  .brand {
    min-width: 0;
    flex: 1 1 auto;
    max-width: calc(100% - 52px);
  }
  .brand-text {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(.95rem, 3.8vw, 1.05rem);
  }
  .nav-toggle {
    margin-left: auto;
    flex-shrink: 0;
  }
}

/* ── Badge / Status ───────────────────────────── */
.badge {
  display: inline-block; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--primary); background: var(--primary-soft);
  padding: .2rem .55rem; border-radius: var(--r-xs);
}

.status-badge {
  display: inline-block; font-size: .75rem; font-weight: 600;
  padding: .22rem .65rem; border-radius: 999px;
  background: #f1f5f9; color: var(--muted);
}
/* Sağlık durumları. Daha önce ok/warning/error aynı nötr griyle basılıyor,
   önem seviyesi görsel olarak ayırt edilemiyordu. Anlam yalnız renge
   bağlı değildir: rozetin metni de durumu söyler.

   Ön plan renkleri notice bileşenlerindeki koyu semantik tonlardır
   (#065f46 / #92400e / #991b1b). Rozet metni 12px/600, yani WCAG'e göre
   normal metin: 4.5:1 eşiği geçerli. Açık `--success/--warn/--danger`
   tonları bu boyutta 3.07–4.41 arasında kalıyordu. Global token'lar
   değiştirilmedi; yalnız bu rozetlerin ön planı koyulaştırıldı. */
.status-badge--ok      { background: var(--success-soft); color: #065f46; }
.status-badge--warning { background: var(--warn-soft);    color: #92400e; }
.status-badge--error   { background: var(--danger-soft);  color: #991b1b; }
.status-badge--neutral { background: #f1f5f9;             color: #334155; }

/* Kaydi olmayan ziyaret gunu: satir sonuk, ama bilgi RENGE bagli degil —
   ayni hucrede "kayit yok" METNI de var. */
.visit-day--no-data td { opacity: .62; }
.visit-stale-warning { margin: .6rem 0 0; }

.status-published { background: var(--success-soft); color: var(--success); }
.status-pending   { background: var(--warn-soft); color: var(--warn); }
.status-draft     { background: var(--primary-muted); color: var(--primary); }
.status-rejected  { background: var(--danger-soft); color: var(--danger); }
.status-archived  { background: #f3f4f6; color: #6b7280; }

/* ── Notice ───────────────────────────────────── */
.notice {
  padding: .85rem 1.1rem; border-radius: var(--r-sm);
  margin-bottom: 1rem; font-size: .9rem; line-height: 1.5;
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--surface);
}
.notice-error   { background: var(--danger-soft); border-color: var(--danger-border); border-left-color: var(--danger); color: #991b1b; }
.notice-success { background: var(--success-soft); border-color: var(--success-border); border-left-color: var(--success); color: #065f46; }
.notice-warning { background: var(--warn-soft); border-color: var(--warn-border); border-left-color: var(--warn); color: #92400e; }
.notice-info    { background: var(--accent-soft); border-color: var(--accent-muted); border-left-color: var(--accent); color: #0e7490; }

/* ── Cards ────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.5rem;
  box-shadow: var(--shadow); margin-bottom: 1.25rem;
}
.form-card--compact { padding: 1.1rem 1.25rem; }
.form-card--narrow { max-width: 460px; margin-left: auto; margin-right: auto; margin-top: 2rem; }
.form-card--caption { margin-top: .5rem; }
.form-card--submitter { border-left: 3px solid var(--primary); }
/* Aday detayında onay ve red kararları ayrı kartlar; sol kenar şeridi
   hangi karta yazıldığını bir bakışta ayırt ettiriyor. */
.form-card--approve { border-left: 3px solid var(--primary); }
.form-card--reject { border-left: 3px solid var(--danger); }

/* ── Event grid (kartlar) ─────────────────────── */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1.5rem;
}

/* ── Public list views ────────────────────────── */
.public-events-shell {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.public-events-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.public-events-head .page-title {
  margin-bottom: 0;
}
.public-view-switch {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem;
  border-radius: 999px;
  background: #f4f2ff;
  border: 1px solid #dfd9ff;
  box-shadow: 0 8px 20px rgba(109, 40, 217, .09);
}
.public-view-btn {
  border: 0;
  background: transparent;
  color: #5b4c9c;
  font-weight: 700;
  font-size: .82rem;
  padding: .42rem .85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all .18s ease;
}
.public-view-btn:hover {
  color: #3f2f84;
}
.public-view-btn.is-active {
  background: linear-gradient(135deg, #6d28d9 0%, #ec4899 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(109, 40, 217, .28);
}
.public-type-filter {
  margin-bottom: .35rem;
}
.public-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 .25rem;
}
/* Sıralama kontrolü: sabit "en yakın etkinlik önce" metninin yerini aldı.
   Mevcut form ve çip dilini kullanır; yeni bir görsel dil getirmez. */
.public-sort {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}
.public-sort-label {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  white-space: nowrap;
}
.public-sort-select {
  font: inherit;
  font-size: .82rem;
  font-weight: 650;
  color: var(--text-2);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: .38rem 1.7rem .38rem .8rem;
  cursor: pointer;
  /* Yerleşik ok Safari'de kaybolduğu için ok da burada çiziliyor. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .65rem center;
  background-size: .6rem;
  max-width: 100%;
}
.public-sort-select:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.public-sort-submit {
  font: inherit;
  font-size: .8rem;
  font-weight: 650;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border: 1.5px solid var(--primary-muted);
  border-radius: 999px;
  padding: .38rem .8rem;
  cursor: pointer;
}
.public-sort-submit[hidden] {
  display: none;
}
/* "Ne zaman" segmenti ve sıralama aynı sağ blokta (Plan E3). Dar ekranda
   satır sarar; segment de kendi içinde sarar, yatay kaydırma üretmez. */
.public-list-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem .75rem;
}
.public-when {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
}
.public-when-label {
  color: var(--muted);
  font-size: .82rem;
  white-space: nowrap;
}
.public-when-option {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: .8rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.public-when-option:hover {
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}
.public-when-option:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
/* Seçili: açık mor zemin, koyu mor metin; degrade YOK (tür çipinden ayrışır). */
.public-when-option.is-active {
  background: var(--primary-muted);
  border-color: var(--primary-muted);
  color: var(--primary-dark);
}
.public-when-count {
  font-size: .72rem;
  font-weight: 700;
  opacity: .8;
}

/* Sayfalayıcı: liste 24 kartı aştığında görünür. */
.public-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.4rem;
}
.public-pager-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .4rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: .84rem;
  font-weight: 650;
  text-decoration: none;
}
.public-pager-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
  text-decoration: none;
}
.public-pager-btn.is-disabled {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}
.public-pager-status {
  color: var(--muted);
  font-size: .82rem;
  white-space: nowrap;
}
.public-view-panel {
  display: none;
}
.public-events-shell[data-view="grid"] .public-view-panel--grid {
  display: block;
}
.public-events-shell[data-view="table"] .public-view-panel--table {
  display: block;
}
.public-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.public-events-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .9rem;
}
.public-events-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-weight: 700;
  color: #4b4b5f;
  background: linear-gradient(180deg, #fcfbff 0%, #f4f2ff 100%);
  padding: .82rem .7rem;
  border-bottom: 1px solid var(--border);
}
.public-events-table tbody td {
  padding: .7rem;
  border-bottom: 1px solid #f0edf9;
  vertical-align: middle;
}
.public-events-table tbody tr:last-child td {
  border-bottom: 0;
}
.public-events-table tbody tr:hover {
  background: #fbf9ff;
}
.public-events-table tbody tr.is-hidden {
  display: none;
}
.public-table-poster {
  width: 58px;
  height: 74px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f0ff;
  border: 1px solid #ece7ff;
}
.public-table-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.public-table-poster-fallback {
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .04em;
  color: #7b5ac9;
}
.public-table-title {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}
.public-table-title:hover {
  color: var(--primary);
}
.public-table-datetime {
  white-space: nowrap;
  color: #4d4d66;
}
.public-table-type {
  display: inline-block;
  border: 1px solid #ddd4ff;
  color: #5d45a7;
  background: #f7f3ff;
  border-radius: 999px;
  padding: .18rem .55rem;
  font-size: .76rem;
  font-weight: 700;
}
.public-table-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.event-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.event-select-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .6rem .85rem 0;
  font-size: .82rem;
  color: var(--text-2);
}
.event-select-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}
.badge-new {
  margin-left: auto;
  color: #065f46;
  background: #dcfce7;
}
.event-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.event-card-image-wrap { display: block; text-decoration: none; color: inherit; }

.event-card-image {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  background: var(--surface-2); display: block;
}
.event-card-image--empty {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  color: var(--primary-dark);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  aspect-ratio: 4/5;
  overflow: hidden;
  background:
    radial-gradient(circle at 26% 20%, rgba(236, 72, 153, .18), transparent 34%),
    radial-gradient(circle at 78% 76%, rgba(124, 58, 237, .16), transparent 36%),
    linear-gradient(145deg, rgba(250, 247, 255, .96), rgba(246, 240, 255, .88));
}
.event-card-image--empty::before {
  content: "";
  position: absolute;
  inset: .8rem;
  border: 1px solid rgba(124, 58, 237, .13);
  border-radius: calc(var(--r) - 2px);
  background-image:
    linear-gradient(rgba(124, 58, 237, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, .045) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 86%);
}
.event-card-empty-mark,
.event-card-empty-text {
  position: relative;
  z-index: 1;
}
.event-card-empty-mark {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(196, 181, 253, .62);
  box-shadow: 0 14px 36px rgba(124, 58, 237, .14);
  backdrop-filter: blur(10px);
}
.event-card-empty-mark svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.event-card-empty-text {
  padding: .24rem .64rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(196, 181, 253, .48);
}

.event-card-body {
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex; flex-direction: column; gap: .35rem; flex: 1;
}
/* Rozet flex öğesi olduğu için `inline-block` olmasına rağmen kart
   genişliğine esniyordu; arka planı kartın sağ kenarına kadar uzuyordu. */
.event-card-body > .badge { align-self: flex-start; }

@media (max-width: 960px) {
  .public-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .public-events-table {
    min-width: 840px;
  }
}
@media (max-width: 768px) {
  .public-events-head {
    flex-direction: column;
    align-items: stretch;
  }
  .public-view-switch {
    width: fit-content;
    align-self: flex-end;
  }
  .public-count-row {
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
  }
  .public-list-controls {
    width: 100%;
    justify-content: flex-start;
  }
  .public-when-option {
    min-height: 44px;
  }
  /* Dar ekranda sıralama kontrolü satırı taşırmasın; etiket ve açılır liste
     alt alta değil yan yana kalır ama kalan genişliğe sığar. */
  .public-sort {
    width: 100%;
    flex-wrap: wrap;
  }
  .public-sort-select {
    /* Kalan genişliği alır ama sınırsız uzamaz: 768px'te satırın tamamına
       yayılan 660px'lik bir açılır liste gereksiz ağır duruyordu. */
    flex: 1 1 auto;
    min-width: 0;
    max-width: 15rem;
    min-height: 44px;
  }
  .public-sort-submit {
    min-height: 44px;
  }
}
/* Plan A6: 639px ve altında YALNIZ ızgara. Tablo `min-width: 840px` taşıdığı
   için dar ekranda yatay kayan bir liste üretiyordu. Kimlik seçicisi
   `[data-view="table"]` kuralından güçlüdür: saklı tercih ya da betik
   `data-view="table"` bıraksa bile (JS kapalıyken de) tablo gösterilemez.
   640px ve üzerindeki tablo düzeni ve görünüm anahtarı değişmez. */
@media (max-width: 639px) {
  #public-events-shell .public-view-switch { display: none; }
  #public-events-shell .public-view-panel--grid { display: block; }
  #public-events-shell .public-view-panel--table { display: none; }
}

.event-card-title { font-size: .95rem; font-weight: 700; margin: 0; line-height: 1.35; word-wrap: break-word; overflow-wrap: break-word; }
.event-card-title a { color: var(--text); text-decoration: none; }
.event-card-title a:hover { color: var(--primary); }

.event-meta { display: flex; flex-direction: column; gap: .24rem; font-size: .85rem; color: var(--muted); flex: 1; }
.event-meta-line {
  display: inline-flex;
  align-items: baseline;
  gap: .38rem;
  min-width: 0;
}
.event-meta-key {
  color: var(--text-2);
  font-weight: 700;
  flex: 0 0 auto;
}
.event-meta-line strong { color: var(--text); font-weight: 600; }

.event-card-footer {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem;
  margin-top: .5rem; padding-top: .65rem;
  border-top: 1px solid var(--border);
}

.empty-hint { color: var(--muted); font-size: .9rem; }

/* ── Stats ────────────────────────────────────── */
/* `auto-fill` GENİŞ ekranda kart sayısından fazla iz üretiyordu: altı kartın
   yanında boş bir yedinci sütun kalıyor, ızgara sağa doğru kayık
   görünüyordu. `auto-fit` boş izleri toplar; kartlar kalan genişliği
   paylaşır. Dar ekranda (375/768px) iki yazım aynı sonucu verir, çünkü
   orada bütün izler zaten doluyor.

   Yükseklikler EŞİTLENMEZ: `.stats-grid { align-items: start }` kuralı
   korunuyor, kartların içerik kaynaklı yükseklik farkı bilinçli. */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .85rem; margin-bottom: 2rem;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.1rem .9rem;
  text-align: center; box-shadow: var(--shadow);
  transition: box-shadow .2s, transform .2s;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-value { display: block; font-size: 1.65rem; font-weight: 800; color: var(--primary); line-height: 1.15; }
.stat-label { font-size: .78rem; color: var(--muted); margin-top: .2rem; display: block; }
/* Kart semantigi arayuzde de yazili: sayinin hangi kumeyi anlattigi
   yalniz koda gomulu kalmasin. */
.stat-hint {
  display: block;
  margin-top: .3rem;
  font-size: .68rem;
  line-height: 1.35;
  color: var(--muted);
  opacity: .85;
  overflow-wrap: anywhere;
}

.source-pills {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .5rem .85rem;
  font-size: .88rem;
}

/* ── Toolbar / Filters ────────────────────────── */
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.toolbar--spaced { margin-bottom: 1.5rem; }
.bulk-select-bar { margin: -.35rem 0 1rem; }
.bulk-select-count { font-size: .9rem; color: var(--muted); }

.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem; margin-bottom: 1.75rem;
}
.filter-bar-label { font-size: .85rem; color: var(--muted); margin-right: .25rem; }
.dashboard-toolbar {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: linear-gradient(180deg, #fcfbff 0%, #ffffff 100%);
  padding: 1rem 1rem .55rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}
.dashboard-toolbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
}
.dashboard-view-switch {
  display: inline-flex;
  gap: .35rem;
  padding: .25rem;
  border-radius: 999px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}
.dashboard-view-switch .filter-pill {
  margin: 0;
}
.dashboard-sort-form {
  display: grid;
  /* `auto` izler artan boşluğu paylaşıyordu: etiket kocaman boş bir alanın
     solunda kalıp boş bir input gibi görünüyor, "Uygula" da select'ten geniş
     bir butona dönüşüyordu. `max-content` + `start` ikisini de içeriğine
     sabitler. */
  grid-template-columns: max-content minmax(220px, 320px) max-content;
  justify-content: start;
  align-items: center;
  gap: .5rem;
}
.dashboard-select {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: .6rem;
  background: #fff;
  color: var(--text);
  padding: .4rem .55rem;
  font-size: .85rem;
}
.dashboard-sort-form .filter-bar-label {
  margin-right: 0;
  white-space: nowrap;
}
.dashboard-sort-form .btn {
  white-space: nowrap;
  min-height: 40px;
}
.dashboard-filter-pills {
  margin-bottom: .2rem;
}

.filter-pill {
  display: inline-block; padding: .35rem .75rem;
  border-radius: 999px; font-size: .85rem; font-weight: 500;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); text-decoration: none; transition: all .15s;
}
.filter-pill:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; background: var(--primary-soft); }
.filter-pill.is-active { background: var(--primary-gradient); border-color: transparent; color: #fff; }

/* ── Dashboard sections ───────────────────────── */
.dashboard-section {
  margin-bottom: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
}
.section-desc { margin: -.15rem 0 1rem; font-size: .88rem; color: var(--muted); }

/* Katlanır bölümler.
   `details > summary` işaretçisi genel olarak kapatıldığı için (bkz.
   "details > summary { list-style: none }") kapalı bir bölüm ekranda
   başlığı olan boş bir kutu gibi duruyordu; açılabildiği belli olmuyordu.
   Bu yüzden kendi göstergemizi koyuyoruz. */
.section-accordion > .accordion-summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  margin: 0;
  padding: .35rem 0;
  min-height: 44px;
  user-select: none;
}
.section-accordion > .accordion-summary::before {
  content: "";
  flex: 0 0 auto;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.section-accordion[open] > .accordion-summary::before {
  transform: rotate(45deg);
}
.section-accordion > .accordion-summary::after {
  content: "Göster";
  margin-left: auto;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.section-accordion[open] > .accordion-summary::after { content: "Gizle"; }
.section-accordion > .accordion-summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.accordion-body { padding-top: .85rem; }

/* Manuel kaynak taraması tetikleyicisi. */
.scan-trigger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: .6rem;
}
.scan-trigger-select { width: auto; min-width: 200px; }
.scan-trigger-btn { min-height: 40px; }
.scan-trigger-hint { font-size: .8rem; color: var(--muted); }

@media (max-width: 640px) {
  .scan-trigger { flex-direction: column; align-items: stretch; }
  .scan-trigger-select { width: 100%; }
}

/* Site ziyaret sayacı (yalnızca panelde). */
.visit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .75rem;
}
.visit-card {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.visit-card--today {
  border-color: var(--primary-muted);
  background: var(--primary-soft);
}
.visit-card-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.visit-card-value {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
}
.visit-card-sub { font-size: .8rem; color: var(--muted); }
.visit-daily { margin-top: 1rem; }
.badge-attention { background: var(--warn-soft); color: var(--warn); white-space: nowrap; }

@media (max-width: 480px) {
  /* Dar ekranda "Göster/Gizle" metni başlığı iki satıra kırıyor; ok işareti
     zaten durumu gösteriyor. */
  .section-accordion > .accordion-summary::after { content: none; }
}

@media (max-width: 640px) {
  .dashboard-section { padding: 1rem; }
}

/* ── Tables ───────────────────────────────────── */
.table-fallback { margin-top: 1.25rem; font-size: .88rem; }
.table-fallback summary { cursor: pointer; color: var(--muted); padding: .5rem 0; font-weight: 600; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-sm); }

.data-table {
  width: 100%; border-collapse: collapse; font-size: .85rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.data-table th, .data-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--border); text-align: left; }
.data-table th { font-weight: 600; color: var(--text-2); background: var(--surface-2); }
.data-table tr:last-child td { border-bottom: none; }
.table-empty-cell {
  color: var(--muted);
  text-align: center;
  padding: 1rem !important;
  background: var(--surface-2);
}
.data-table--compact th, .data-table--compact td { padding: .45rem .6rem; }

/* Sıralanabilir sütun başlığı + sayfalayıcı (uzayan kayıt listeleri için) */
.table-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}
.table-count { margin: 0; font-size: .82rem; color: var(--muted); }
.table-sort {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}
.table-sort:hover { color: var(--primary); text-decoration: none; }
.table-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: .85rem;
  flex-wrap: wrap;
}
.table-pager-status { font-size: .82rem; color: var(--muted); }
.table-pager .is-disabled {
  opacity: .45;
  pointer-events: none;
}
.dashboard-table-wrap {
  border: 1px solid var(--border);
  border-radius: .7rem;
  background: #fff;
}
.dashboard-events-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
}
.dashboard-events-table tbody tr:nth-child(even) {
  background: #fcfcff;
}
.dashboard-events-table tbody tr:hover {
  background: #f3f4ff;
}
/* Yüzen kaydırma butonu ekranın sağ alt köşesinde sabit duruyor ve tablonun
   son sütunundaki tek eylemi ("Aç") o hizadaki satırda örtüyordu. Tablo
   pencerenin sağ kenarına dayanmadığında (geniş ekran) sorun yok; dayandığı
   genişliklerde son sütuna butonun yerleştiği kadar pay bırakıyoruz. */
@media (min-width: 769px) and (max-width: 1420px) {
  .dashboard-events-table th:last-child,
  .dashboard-events-table td:last-child {
    padding-right: 4.25rem;
  }
}
.dashboard-col-title {
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-col-submitter {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Admin report surfaces ───────────────────── */
.report-shell {
  display: grid;
  gap: 1rem;
}
.report-card {
  display: grid;
  gap: .75rem;
}
.report-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.report-card-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 750;
  color: var(--text);
}
.report-card-subtitle {
  margin: .18rem 0 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}
.report-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem;
}
.report-metric {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #fff 0%, #fbfaff 100%);
  padding: .78rem .85rem;
}
.report-metric-label {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.35;
}
.report-metric-value {
  display: block;
  margin-top: .2rem;
  color: var(--primary-dark);
  font-size: 1.25rem;
  font-weight: 820;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
/* Sağlık ekranlarında olumlu/olumsuz metrikler. Varsayılan marka moru
   "hazır değil" durumunu da olumlu KPI gibi gösteriyordu. */
.report-metric-value--ok  { color: var(--success); }
.report-metric-value--bad { color: var(--danger); }
.report-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .45rem;
}
.report-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  padding: .5rem .65rem;
  font-size: .88rem;
}
.report-list strong {
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.report-code-block {
  margin: 0;
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #111827;
  color: #e5e7eb;
  padding: .9rem;
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.report-summary {
  margin: 0;
  color: var(--text-2);
  line-height: 1.55;
}
@media (max-width: 640px) {
  .report-list li {
    display: grid;
    justify-content: stretch;
    gap: .2rem;
  }
}

/* Mobile table card fallback */
@media (max-width: 640px) {
  .data-table { font-size: .8rem; }
  .data-table th, .data-table td { padding: .45rem .5rem; }
}

/* ── Stack form (admin edit, login) ───────────── */
.stack-form label {
  display: block; margin-bottom: 1rem;
  font-size: .88rem; font-weight: 600; color: var(--text-2);
}
.stack-form input,
.stack-form select,
.stack-form textarea {
  width: 100%; margin-top: .35rem;
  padding: .6rem .8rem; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-family: inherit; font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}
.stack-form input:focus,
.stack-form select:focus,
.stack-form textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}

/* ── Onay ve çoklu seçim grupları: fieldset/legend ──────────────────────
   Kök neden: `fieldset` için hiç kural yoktu, tarayıcının varsayılan
   `border: 2px groove ThreeDFace` çerçevesi çıkıyordu. 90'lar görünümündeki
   bu çerçeve formun geri kalanıyla (1px düz kenarlık + yumuşak köşe)
   uyuşmuyordu.

   `fieldset`/`legend` ETİKETLERİ KORUNUYOR: gruplama semantiği klavye ve
   ekran okuyucu için gerçek değer taşıyor; `div` + `p` ile taklit edilseydi
   "3 seçenekten oluşan grup" bilgisi kaybolurdu. Yalnız görünüm
   değiştiriliyor. */
.stack-form fieldset {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .85rem 1rem 1rem;
  margin: 0 0 1rem;
  min-width: 0; /* fieldset varsayılan min-width'i taşmaya yol açıyor */
}
.stack-form legend {
  padding: 0 .4rem;
  margin-left: -.4rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-2);
  /* UZUN LEGEND ÇERÇEVEYE GİRMEZ.
     375px'te "telefon numaramın paylaşılmasını onaylıyorum" gibi uzun bir
     legend tek satıra sığmıyor; `float` ile normal akışa alınmazsa
     çerçevenin üst kenarıyla çakışıyordu. `float` + `width: 100%` legend'ı
     tam satır hâline getirir, ardından gelen temizleyici sözde-eleman
     içeriği aşağı iter. */
  float: left;
  width: 100%;
  line-height: 1.35;
}
.stack-form legend + * { clear: both; }
.stack-form fieldset::after { content: ""; display: table; clear: both; }
/* Seçenek etiketleri: kutu ile metin yan yana, 44px dokunma hedefi.
   Seçici `:has()` ile YALNIZ onay/radyo içeren etiketlere iner — aynı
   fieldset'teki "Diğer" serbest metin etiketi blok düzeninde kalsın diye.
   `:has()` desteklenmeyen bir tarayıcıda etiketler bugünkü blok düzeninde
   kalır; kayıp yalnız hizalamadır, işlev değil. */
.stack-form fieldset label:has(input[type="checkbox"]),
.stack-form fieldset label:has(input[type="radio"]) {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .5rem;
  font-weight: 500;
  color: var(--text);
  min-height: 44px;
}
.stack-form fieldset label input[type="checkbox"],
.stack-form fieldset label input[type="radio"] {
  width: auto;
  margin-top: .55rem;
  flex: 0 0 auto;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem 1rem;
}
.form-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) {
  .form-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .form-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════
   UPLOAD FORM
   ═══════════════════════════════════════════════════════ */
.upload-form { margin-bottom: 2rem; }
.upload-form .form-hint {
  margin: .35rem 0 1.4rem;
  font-size: .9rem;
  max-width: 66ch;
}

.page-head--form {
  margin-bottom: 1.15rem;
}
.page-head--form .page-title {
  max-width: 22ch;
}
.page-head--form .page-lead {
  max-width: 58ch;
}

.upload-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(380px, 440px);
  gap: 2rem;
  align-items: start;
}
@media (max-width: 920px) {
  .upload-layout { grid-template-columns: 1fr; }
  .upload-sidebar {
    order: 0;
    position: static;
    top: auto;
  }
}

/* Field groups */
.field-group {
  border: none; margin: 0 0 1.5rem; padding: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.75rem; box-shadow: var(--shadow);
}
.field-group--compact { padding: 1.25rem; }

.field-group-title {
  font-size: .95rem; font-weight: 700; color: var(--text);
  margin: 0 0 1.25rem; padding: 0 0 .75rem;
  border-bottom: 1px solid var(--border);
}

.field { margin-bottom: 1.1rem; }
.field:last-child { margin-bottom: 0; }

.field-label {
  display: block; font-size: .85rem; font-weight: 600;
  color: var(--text-2); margin-bottom: .4rem;
}

.req { color: var(--danger); font-weight: 700; }

.field-input {
  display: block; width: 100%;
  padding: .62rem .85rem; font-size: .925rem;
  font-family: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color .2s, box-shadow .2s;
}
.field-input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}
.field-input::placeholder { color: var(--faint); }

/* Guvenilir cihaz onayi — ACIK kullanici tercihi. */
.field--check { margin-top: .2rem; }
.field-check {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .88rem; line-height: 1.35; cursor: pointer;
}
.field-check input[type="checkbox"] { margin-top: .18rem; flex: 0 0 auto; width: 1rem; height: 1rem; }
.field-check input[type="checkbox"]:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.field-hint { display: block; margin-top: .3rem; font-size: .74rem; color: var(--muted); line-height: 1.4; }

/* Guvenilir cihazlar sayfasi */
.trusted-device-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.trusted-device-item {
  border: 1px solid var(--border); border-radius: .6rem; background: #fff;
  padding: .7rem; display: flex; gap: .7rem; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap; min-width: 0;
}
.trusted-device-item.is-current { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.trusted-device-body { display: grid; gap: .18rem; min-width: 0; }
.trusted-device-name { font-weight: 700; overflow-wrap: anywhere; }
.trusted-device-meta { font-size: .74rem; color: var(--muted); overflow-wrap: anywhere; }
.trusted-device-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
select.field-input { cursor: pointer; }
textarea.field-input { resize: vertical; min-height: 5.5rem; }
.field-counter {
  margin: .4rem 0 0;
  font-size: .78rem;
  color: var(--muted);
  text-align: right;
}
.field-counter.is-over-limit { color: var(--danger); font-weight: 600; }
.field-error {
  display: none;
  margin: .35rem 0 0;
  color: var(--danger);
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.4;
}
.field-error.is-visible {
  display: block;
}
.field-input.has-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
}

.field-row { display: grid; gap: 1rem; margin-bottom: 1.1rem; }
.field-row .field { margin-bottom: 0; }
.field-row--1 { grid-template-columns: 1fr; }
.field-row--2 { grid-template-columns: 1fr 1fr; }
.field-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) {
  .field-row--2, .field-row--3 { grid-template-columns: 1fr; }
}
.field-row + .field { margin-top: 0; }
.venue-suggestions {
  margin-top: .38rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  max-height: 220px;
  overflow-y: auto;
}
.venue-suggestions.is-hidden { display: none; }
.venue-suggestion-item {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: .56rem .72rem;
  font-size: .88rem;
  cursor: pointer;
}
.venue-suggestion-item:last-child { border-bottom: 0; }
.venue-suggestion-item:hover,
.venue-suggestion-item:focus-visible {
  outline: none;
  background: var(--primary-soft);
}
.submit-validation-hint {
  margin: .15rem 0 0;
  font-size: .82rem;
  color: var(--danger);
  line-height: 1.45;
  display: none;
  text-align: left;
}
.submit-validation-hint.is-visible { display: block; }
/* Plan A8: reCAPTCHA yüklenemediğinde çıkış yolu ve gömülü formun tam sayfa bağlantısı. */
.recaptcha-unavailable-notice,
.embed-full-page-row {
  width: 100%;
  margin: .15rem 0 0;
  font-size: .82rem;
  line-height: 1.45;
  text-align: left;
}
.recaptcha-unavailable-notice { color: var(--danger); }
.recaptcha-unavailable-notice[hidden] { display: none; }
.recaptcha-unavailable-notice p { margin: 0; }
/* Bağlantı kendi satırında: 44px dokunma hedefi metnin satır aralığını açmasın. */
.recaptcha-unavailable-notice a,
.embed-full-page-row a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.section-locked {
  position: relative;
  opacity: .58;
  pointer-events: none;
  filter: grayscale(.18);
  padding-bottom: 3rem;
}
.section-locked::before {
  content: attr(data-lock-reason);
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .85rem;
  z-index: 4;
  display: block;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.4;
  color: #991b1b;
  background: rgba(254, 242, 242, .96);
  border: 1px solid var(--danger-border);
  border-left: 3px solid var(--danger);
  border-radius: var(--r-sm);
  padding: .58rem .75rem;
  box-shadow: 0 8px 20px rgba(185, 28, 28, .08);
}

/* Upload sidebar */
.upload-sidebar { position: sticky; top: 5.5rem; }

.upload-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.5rem;
  box-shadow: var(--shadow); margin-bottom: 1rem;
}
.upload-card--compact { padding: 1.1rem; }

.upload-editor-actions {
  margin-top: .75rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.upload-drop {
  position: relative;
  border: 2px dashed var(--primary-light); border-radius: var(--r);
  background: var(--primary-soft);
  transition: all .2s; cursor: pointer;
}
.upload-drop:hover { border-color: var(--primary); background: var(--primary-muted); }
.upload-drop.is-dragover { border-color: var(--primary); background: var(--primary-muted); border-style: solid; }

.upload-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }

.upload-drop-content {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2.5rem 1rem; text-align: center; pointer-events: none;
}

.upload-icon { width: 44px; height: 44px; color: var(--primary-light); margin-bottom: .75rem; }
.upload-drop-text { font-size: .9rem; color: var(--muted); margin: 0 0 .3rem; line-height: 1.5; }
.upload-drop-text strong { color: var(--primary); }
.upload-drop-hint { font-size: .78rem; color: var(--faint); margin: 0; }
.upload-select-btn {
  pointer-events: auto;
  margin: .35rem 0 .55rem;
  border: 1px solid var(--primary-light);
  background: #fff;
  color: var(--primary);
  border-radius: var(--r-sm);
  padding: .48rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.upload-select-btn:hover {
  background: var(--primary-soft);
}

.preview-watermark-surface {
  position: relative;
  overflow: hidden;
}
.preview-watermark-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
}
.preview-watermark-layer::before {
  content: "ÖNİZLEME   ÖNİZLEME   ÖNİZLEME   ÖNİZLEME   ÖNİZLEME\A ÖNİZLEME   ÖNİZLEME   ÖNİZLEME   ÖNİZLEME   ÖNİZLEME\A ÖNİZLEME   ÖNİZLEME   ÖNİZLEME   ÖNİZLEME   ÖNİZLEME\A ÖNİZLEME   ÖNİZLEME   ÖNİZLEME   ÖNİZLEME   ÖNİZLEME";
  position: absolute;
  left: -35%;
  right: -35%;
  top: 50%;
  transform: translateY(-50%) rotate(-28deg);
  white-space: pre;
  text-align: center;
  color: rgba(76, 29, 149, .2);
  font-size: clamp(1.05rem, 5vw, 2.4rem);
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 2.25;
  text-transform: uppercase;
}
.preview-watermark-layer::after {
  content: "ÖNİZLEME";
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  padding: .34rem .55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(124, 58, 237, .22);
  color: rgba(76, 29, 149, .78);
  box-shadow: 0 8px 18px rgba(31, 41, 55, .12);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.preview-watermark-layer--compact::before {
  font-size: clamp(.78rem, 4vw, 1.35rem);
  letter-spacing: .12em;
  line-height: 2.1;
  color: rgba(76, 29, 149, .23);
}
.preview-watermark-layer--compact::after {
  right: .35rem;
  bottom: .35rem;
  padding: .22rem .4rem;
  font-size: .55rem;
}
.upload-preview { position: relative; }
.upload-preview img {
  width: 100%; display: block; border-radius: calc(var(--r) - 2px);
  max-height: 320px; object-fit: contain; background: var(--surface-2);
}
.upload-preview-remove {
  position: absolute; top: .5rem; right: .5rem; z-index: 30;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: none; background: rgba(0,0,0,.6); color: #fff;
  font-size: 1.15rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: background .15s;
}
.upload-preview-remove:hover { background: rgba(0,0,0,.8); }

.upload-tip { font-size: .8rem; color: var(--muted); margin: .75rem 0 0; }

.consent-check {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .85rem; color: var(--muted); line-height: 1.5;
  margin-bottom: 1rem; cursor: pointer;
}
.consent-check input[type="checkbox"] {
  margin-top: .2rem; flex-shrink: 0;
  width: 1.1rem; height: 1.1rem; accent-color: var(--primary);
}

/* `.stack-form label { display: block }` daha spesifik olduğu için onay satırı
   flex düzenini kaybedip kutu ile metin alt alta düşüyordu. */
.stack-form .consent-check { display: flex; }

.upload-submit { font-size: 1rem; padding: .75rem 1.5rem; }
.upload-submit-row {
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
}
.upload-submit-row--inside { align-items: stretch; margin-top: .9rem; }
.upload-submit-row--inside .upload-submit { width: 100%; }
.submit-recaptcha-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.submit-recaptcha-wrap .g-recaptcha {
  transform-origin: center top;
}
.in-app-browser-alert {
  display: grid;
  gap: .75rem;
  margin: 0 0 1rem;
  padding: .95rem 1rem;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: var(--r);
  background: #fffbeb;
  color: #78350f;
  box-shadow: var(--shadow-xs);
}
.in-app-browser-alert[hidden] {
  display: none !important;
}
.in-app-browser-alert p {
  margin: .25rem 0 0;
  line-height: 1.55;
  font-size: .9rem;
}
.in-app-browser-alert__actions {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}
.in-app-browser-alert__status {
  margin: 0;
  color: #92400e;
  font-size: .82rem;
  font-weight: 650;
}

.ig-live-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: .2rem;
}
@media (max-width: 560px) {
  .ig-live-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .upload-card { padding: 1rem; }
  .upload-card--compact { padding: .9rem; }
  .ig-live-post-media { aspect-ratio: 4 / 5; }
  .ig-live-story-media {
    aspect-ratio: 9 / 13;
    max-height: 420px;
    margin: 0 auto;
  }
  .ig-live-caption { font-size: .7rem; }
  .ig-live-story-title { font-size: .84rem; }
  .ig-live-story-date { font-size: .78rem; }
  .ig-live-story-venue { font-size: .72rem; }
}
.ig-live-card {
  border: 1px solid var(--border);
  border-radius: .6rem;
  padding: .55rem;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
}
.ig-live-title {
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ig-live-phone {
  position: relative;
  border: 1px solid #dbe1ea;
  border-radius: .85rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
}
.ig-live-post-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .6rem;
  border-bottom: 1px solid #eef2f7;
  font-size: .72rem;
}
.ig-live-avatar {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  overflow: hidden;
  display: block;
  object-fit: cover;
  background: #fff;
  border: 1px solid #dbe1ea;
  flex-shrink: 0;
}
.ig-live-avatar--sm {
  width: .95rem;
  height: .95rem;
}
.ig-live-username {
  font-weight: 700;
  color: #0f172a;
}
.ig-live-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .86rem;
  height: .86rem;
  border-radius: 999px;
  background: #0ea5e9;
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  line-height: 1;
}
.ig-live-verified--sm {
  width: .78rem;
  height: .78rem;
  font-size: .54rem;
}
.ig-live-more {
  margin-left: auto;
  color: #64748b;
  letter-spacing: .08em;
}
.ig-live-post-media,
.ig-live-story-media {
  border: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #f3e8ff, #fce7f3);
  position: relative;
}
.ig-live-post-media { aspect-ratio: 4 / 5; }
.ig-live-story-media { aspect-ratio: 9 / 16; }
.ig-live-post-media img,
.ig-live-story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.ig-live-post-media .ig-live-post-template,
.ig-live-story-media .ig-live-story-template {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}
.ig-live-post-fill,
.ig-live-story-fill {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  max-width: none;
  max-height: none;
  background: transparent;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(1);
}
.ig-live-post-crop,
.ig-live-story-crop {
  position: absolute;
  overflow: hidden;
  z-index: 2;
}
/* Sunucu şablonundaki görsel kutusu: 1080×1350 tuvalde 132,232 816×1021
   (Plan P1: önizleme = sunucu). */
.ig-live-post-crop {
  left: 12.2222%;
  top: 17.1852%;
  width: 75.5556%;
  height: 75.6296%;
}
.ig-live-story-crop {
  left: 12.32%;
  top: 22.45%;
  width: 75.18%;
  height: 53.23%;
}
.ig-live-post-media.has-media img,
.ig-live-story-media.has-media img {
  display: block;
}
.ig-live-media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: .8rem;
  text-align: center;
  padding: .8rem;
  background:
    radial-gradient(circle at 18% 20%, rgba(236, 72, 153, .16), transparent 40%),
    radial-gradient(circle at 80% 78%, rgba(59, 130, 246, .17), transparent 40%);
}
.ig-live-post-media.has-media .ig-live-media-placeholder,
.ig-live-story-media.has-media .ig-live-media-placeholder {
  display: none;
}
.ig-live-post-media .preview-watermark-layer,
.ig-live-story-media .preview-watermark-layer {
  display: none;
}
.ig-live-post-media.has-media .preview-watermark-layer,
.ig-live-story-media.has-media .preview-watermark-layer {
  display: block;
}
.ig-live-post-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .52rem .12rem;
  color: #0f172a;
  font-size: .86rem;
}
.ig-live-post-save {
  margin-left: auto;
}
.ig-live-caption {
  margin: .22rem 0 .45rem;
  padding: 0 .54rem;
  font-size: .74rem;
  line-height: 1.4;
  color: #334155;
  min-height: 2.3em;
  white-space: pre-line;
}
.ig-live-story-top {
  position: absolute;
  z-index: 2;
  width: 100%;
  padding: .4rem .45rem;
  background: linear-gradient(180deg, rgba(15, 23, 42, .45), rgba(15, 23, 42, 0));
}
.ig-live-story-progress {
  height: .13rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  margin-bottom: .3rem;
}
.ig-live-story-meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: #fff;
  font-size: .67rem;
}
.ig-live-story-time {
  margin-left: auto;
  opacity: .92;
}
.ig-live-story-text {
  position: absolute;
  z-index: 2;
  left: .45rem;
  right: .45rem;
  bottom: .6rem;
  margin: 0;
  padding: .32rem .4rem;
  border-radius: .38rem;
  background: rgba(15, 23, 42, .45);
  color: #fff;
  font-size: .72rem;
  line-height: 1.35;
  min-height: 2.1em;
  white-space: pre-line;
}

/* Story template-aligned text overlays (erzurum_event_story_v1) */
.ig-live-story-title,
.ig-live-story-date,
.ig-live-story-venue {
  position: absolute;
  z-index: 3;
  left: 8.5%;
  right: 8.5%;
  margin: 0;
  color: rgba(20, 20, 20, .92);
  text-align: center;
  text-shadow: none;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.ig-live-story-title {
  top: 18%;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: .92rem;
  line-height: 1.15;
  max-height: 2.4em;
  overflow: hidden;
}
.ig-live-story-title.is-multiline {
  top: 15.8%;
  font-size: .84rem;
  line-height: 1.1;
  max-height: 2.2em;
}
.ig-live-story-date {
  top: 80%;
  font-weight: 700;
  font-size: .82rem;
}
.ig-live-story-venue {
  top: 83.5%;
  font-weight: 600;
  font-size: .76rem;
  color: rgba(40, 40, 40, .88);
}

/* ═══════════════════════════════════════════════════════
   ADMIN NOTIFICATIONS DASHBOARD
   ═══════════════════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-notif-dashboard {
  max-width: 1240px;
  margin: 0 auto;
}

.admin-notif-hero {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.2rem 1.25rem;
  background:
    radial-gradient(circle at 16% 16%, rgba(124, 58, 237, .12), transparent 42%),
    radial-gradient(circle at 85% 85%, rgba(236, 72, 153, .11), transparent 42%),
    linear-gradient(160deg, #ffffff 0%, #f8f7ff 58%, #fff8fc 100%);
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}

.admin-notif-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-notif-badge {
  margin-bottom: .45rem;
}

.admin-notif-title {
  margin: 0 0 .42rem;
  letter-spacing: -.02em;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.2;
}

.admin-notif-lead {
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
}

.admin-notif-actions {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}

/* Dört sayaç kartı var (Toplam, Gösterilen, Okunmamış, Push); masaüstünde
   dördü de tek sırada dursun. Üç sütunda dördüncü kart alt satıra tek başına
   düşüp sırayı dengesiz bırakıyordu. */
.admin-notif-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: .85rem;
}

.admin-notif-stat-card {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  padding: .85rem .9rem;
}

.admin-notif-stat-label {
  margin: 0 0 .24rem;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
}

.admin-notif-stat-value {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  font-weight: 800;
  color: var(--primary-dark);
  line-height: 1.15;
}

.admin-notif-push-state {
  margin-bottom: 1rem;
}

.admin-notif-alert {
  margin: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  padding: .7rem .85rem;
  font-size: .9rem;
}

.admin-notif-alert--ok {
  background: var(--success-soft);
  border-color: var(--success-border);
  color: #065f46;
}

.admin-notif-alert--warn {
  background: var(--warn-soft);
  border-color: var(--warn-border);
  color: #92400e;
}

.admin-notif-alert--error {
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: #991b1b;
}

.admin-notif-error {
  margin-top: .75rem;
}

.admin-notif-list-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.admin-notif-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .85rem;
}

.admin-notif-list-title {
  margin: 0 0 .2rem;
  font-size: 1.05rem;
  line-height: 1.3;
}

.admin-notif-list-sub {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
}

/* Süzgeçler ve sayfalama: pano ilk yüklemede tüm listeyi basmıyor. */
.admin-notif-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem;
  margin-bottom: .85rem;
}

.admin-notif-filter {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 10rem;
}

.admin-notif-filter-label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-notif-more {
  display: flex;
  justify-content: center;
  margin-top: .9rem;
}

.admin-notif-stat-hint {
  margin: .15rem 0 0;
  font-size: .74rem;
  color: var(--muted);
}

.admin-notif-stat-of {
  padding: 0 .15rem;
  color: var(--muted);
}

.admin-notif-item-category {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kartın etkinleştirme denetimi gerçek bir bağlantı/düğme: kartın tamamını
   button rolüne sokmak, içindeki <details> ile geçersiz bir yapı üretiyordu. */
.admin-notif-item-activate {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.admin-notif-item-activate:hover {
  text-decoration: underline;
}

.admin-notif-item-activate:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.admin-notif-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: .8rem;
}

.admin-notif-item {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: .8rem .85rem;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, opacity .14s ease;
}

.admin-notif-item:hover {
  transform: translateY(-2px);
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
}

.admin-notif-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
}

.admin-notif-item.is-read {
  opacity: .72;
  background: var(--surface-2);
}

.admin-notif-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .6rem;
}

.admin-notif-item-title {
  margin: 0 0 .45rem;
  font-size: .98rem;
  line-height: 1.35;
  color: var(--text);
}

.admin-notif-item-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #ddd6fe;
  background: #f5f3ff;
  color: #5b21b6;
  font-size: .72rem;
  font-weight: 700;
  padding: .18rem .5rem;
  white-space: nowrap;
}

.admin-notif-item-status.is-read {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #475569;
}

.admin-notif-item-msg {
  margin: 0 0 .6rem;
  color: var(--text-2);
  font-size: .88rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.1em;
}

/* Bildirim kartında değişen alanlar ve etkinliğin güncel hâli: kullanıcı
   neyin değiştiğini görmek için etkinliğe tıklamak zorunda kalmasın. */
.admin-notif-changes {
  list-style: none;
  margin: 0 0 .6rem;
  padding: .5rem .65rem;
  border-radius: 10px;
  background: var(--primary-soft);
  display: grid;
  gap: .3rem;
}

.admin-notif-change {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
  font-size: .82rem;
  line-height: 1.45;
}

.admin-notif-change-label {
  font-weight: 600;
  color: var(--text);
  min-width: 5.5rem;
}

.admin-notif-change-old {
  color: var(--muted);
  text-decoration: line-through;
}

.admin-notif-change-arrow { color: var(--muted); }

.admin-notif-change-new {
  color: var(--text);
  font-weight: 600;
}

/* Hata bildirimlerinde ne yapılacağı ve (katlanmış) ham teknik metin. */
.admin-notif-action {
  margin: 0 0 .6rem;
  font-size: .82rem;
  color: var(--text-2);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.admin-notif-action-label {
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-notif-technical {
  margin: 0 0 .6rem;
  font-size: .78rem;
  color: var(--muted);
}

.admin-notif-technical summary {
  cursor: pointer;
  user-select: none;
}

.admin-notif-technical code {
  display: block;
  margin-top: .35rem;
  word-break: break-word;
  white-space: pre-wrap;
}

.admin-notif-current {
  margin: 0 0 .6rem;
  font-size: .82rem;
  color: var(--text-2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem;
}

.admin-notif-current-label {
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-notif-current-sessions {
  width: 100%;
  color: var(--muted);
}

.admin-notif-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: .78rem;
  gap: .55rem;
}

.admin-notif-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--primary);
  flex: 0 0 auto;
}

.admin-notif-item.is-read .admin-notif-dot {
  background: #94a3b8;
}

.admin-notif-empty {
  border: 1px dashed var(--border-focus);
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, #fafaff 0%, #f8fafc 100%);
  padding: 1.4rem 1rem;
  text-align: center;
  grid-column: 1 / -1;
}

.admin-notif-empty-title {
  margin: 0 0 .35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.admin-notif-empty-text {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

@media (max-width: 980px) {
  .admin-notif-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .admin-notif-title {
    font-size: 1.4rem;
  }
  .admin-notif-list-card {
    padding: .85rem;
  }
  .admin-notif-stats {
    grid-template-columns: 1fr;
  }
  .admin-notif-actions .btn {
    flex: 1 1 auto;
    min-width: 180px;
  }
}

@media (max-width: 480px) {
  .admin-notif-hero,
  .admin-notif-list-card {
    padding: .8rem;
  }
  .admin-notif-actions {
    width: 100%;
  }
  .admin-notif-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 920px) {
  .upload-submit-row { align-items: stretch; }
  .upload-submit-row .upload-submit { width: 100%; }
}
@media (max-width: 560px) {
  .submit-recaptcha-wrap {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ═══════════════════════════════════════════════════════
   ADMIN DETAIL
   ═══════════════════════════════════════════════════════ */
.admin-breadcrumb { margin-bottom: .75rem; }
.breadcrumb-link { font-size: .88rem; text-decoration: none; color: var(--muted); }
.breadcrumb-link:hover { color: var(--primary); text-decoration: none; }

.admin-event-header { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.admin-event-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: .65rem; }
.admin-event-header-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.admin-event-title { margin: 0 0 .4rem; }
.insta-sync-banner {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.insta-sync-banner--pending {
  background: linear-gradient(180deg, #fff9ed 0%, #fff3db 100%);
  border-color: #f2c97d;
}
.insta-sync-banner--done {
  background: linear-gradient(180deg, #edfff7 0%, #ddf8ea 100%);
  border-color: #86d8b2;
}
.insta-sync-banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .45rem;
}
.insta-sync-banner-text,
.insta-sync-banner-fields {
  margin: 0;
  color: #1f2937;
  font-size: .93rem;
  line-height: 1.45;
}
.insta-sync-banner-fields { margin-top: .35rem; }
.insta-sync-banner-actions { margin-top: .7rem; }

.quick-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: .85rem;
}
.quick-status-card {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,246,255,.96));
  padding: .85rem .95rem;
}
.quick-status-card--accordion { padding: 0; overflow: hidden; }
.quick-status-summary {
  list-style: none;
  cursor: pointer;
  padding: .85rem .95rem;
}
.quick-status-summary::-webkit-details-marker { display: none; }
.quick-status-summary::after {
  content: "Detayları aç";
  display: inline-block;
  margin-top: .4rem;
  font-size: .76rem;
  color: var(--muted);
}
.quick-status-card--accordion[open] .quick-status-summary::after { content: "Detayları gizle"; }
.quick-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
}
.quick-status-title { font-size: .82rem; font-weight: 700; color: var(--muted); }
.quick-status-text { margin: .5rem 0 0; font-size: .9rem; line-height: 1.35; }
.quick-status-reasons {
  border-top: 1px solid var(--border);
  background: rgba(120, 82, 255, .04);
  padding: .7rem .95rem .85rem;
}
.quick-status-reason {
  font-size: .86rem;
  line-height: 1.35;
  padding: .45rem .55rem;
  border: 1px solid rgba(115, 126, 156, .24);
  border-radius: .5rem;
  background: rgba(255,255,255,.7);
}
.quick-status-reason + .quick-status-reason { margin-top: .45rem; }
.quick-status-reason--danger {
  border-color: rgba(220, 53, 69, .28);
  background: rgba(220, 53, 69, .08);
}
@media (max-width: 760px) {
  .quick-status-grid { grid-template-columns: 1fr; }
}

.event-detail-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.75rem; align-items: start; margin-bottom: 1.25rem;
}
@media (max-width: 960px) { .event-detail-split { grid-template-columns: 1fr; } }

.poster-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .poster-pair { grid-template-columns: 1fr; } }

.poster-label { font-size: .82rem; font-weight: 600; color: var(--muted); margin: 0 0 .4rem; }

.detail-img { width: 100%; border-radius: var(--r-sm); border: 1px solid var(--border); }
.detail-img--contain { max-height: 420px; object-fit: contain; background: var(--surface-2); }

.action-row { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; min-width: 0; }
.action-row > * { min-width: 0; }
.action-row--prominent { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.action-row--tools { margin-top: .85rem; }
.action-row--tools form { margin: 0; }

.caption-box, .caption-pre {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: .9rem; border-radius: var(--r-sm);
  font-size: .88rem; white-space: pre-wrap; font-family: var(--mono);
  word-wrap: break-word; overflow-wrap: break-word;
}

.candidate-preview {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.candidate-preview__poster {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
}
.candidate-preview__poster img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.candidate-preview__caption {
  margin: 0;
  font-family: inherit;
  font-size: .86rem;
  line-height: 1.55;
}
@media (max-width: 640px) {
  .candidate-preview {
    grid-template-columns: 1fr;
  }
}

.kv-list { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.kv-list li { margin-bottom: .4rem; }

.meta-readonly { margin: .5rem 0 1.25rem; font-size: .88rem; color: var(--muted); }

.status-actions {
  display: flex; flex-wrap: wrap; gap: .65rem;
  margin: 1.5rem 0 2rem; padding: 1.1rem 1.25rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.status-actions form { margin: 0; }
.status-actions--header {
  margin: 0;
  padding: .7rem .85rem;
  border-radius: var(--r-sm);
  box-shadow: none;
}

/* ── Manual Poster Editor Modal ───────────────── */
.manual-editor-modal {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(30, 27, 46, .6);
  display: none; align-items: center; justify-content: center;
  padding: .6rem;
  backdrop-filter: blur(4px);
}
.manual-editor-modal.is-open { display: flex; }

.manual-editor-dialog {
  width: min(1040px, 96vw); max-height: 92vh; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 1rem;
}
.manual-editor-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .5rem;
}
.manual-editor-body {
  display: grid; grid-template-columns: minmax(280px, 1fr) 240px; gap: .8rem;
  max-height: calc(92vh - 90px);
  overflow: hidden;
}
@media (max-width: 960px) {
  .manual-editor-body { grid-template-columns: 1fr; }
}

.manual-editor-frame {
  height: min(64vh, 620px);
  aspect-ratio: 1080 / 1350;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  position: relative; border-radius: var(--r-sm); overflow: hidden;
}
.manual-editor-viewport {
  position: absolute;
  left: 12.2222%;
  top: 17.1852%;
  width: 75.5556%;
  height: 75.6296%;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  z-index: 2;
}
.manual-editor-viewport:active { cursor: grabbing; }
.manual-editor-viewport img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  object-fit: cover;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(1);
  user-select: none; -webkit-user-drag: none; pointer-events: none;
  background: transparent;
}
/* Plan P1: "Görselin tamamını göster" — kutunun kalanını dolduran, aynı
   görselden üretilen bulanık zemin (sunucudaki cover + GaussianBlur eşleniği). */
.manual-editor-viewport .poster-fit-backdrop,
.ig-live-post-crop .poster-fit-backdrop,
.ig-live-story-crop .poster-fit-backdrop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  object-fit: cover;
  transform: scale(1.08);
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}
.poster-fit-choice {
  border: 0;
  margin: .45rem 0 .35rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
}
.poster-fit-choice-legend {
  padding: 0;
  margin-bottom: .25rem;
  font-weight: 600;
  font-size: .84rem;
  color: var(--text-2);
}
.poster-fit-option {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .86rem;
  cursor: pointer;
}
.manual-editor-side .poster-fit-option { display: flex; font-weight: 500; }
.manual-editor-side .poster-fit-option input,
.ctrl-panel .poster-fit-option input { width: auto; margin: 0; padding: 0; }
.manual-editor-template {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}
.manual-editor-frame > .preview-watermark-layer {
  z-index: 5;
  border-radius: var(--r-sm);
}

.manual-editor-side label {
  display: block; margin-bottom: .55rem; font-weight: 600; font-size: .84rem; color: var(--text-2);
}
.manual-editor-side input,
.manual-editor-side select {
  width: 100%; margin-top: .28rem;
  padding: .55rem .65rem; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
}
@media (max-width: 640px) {
  .manual-editor-modal { padding: .35rem; }
  .manual-editor-dialog { width: 98vw; max-height: 95vh; padding: .7rem; }
  .manual-editor-body { max-height: calc(95vh - 74px); overflow: auto; }
  .manual-editor-frame { height: min(54vh, 500px); }
}

/* ── Public detail ────────────────────────────── */
/* Görsel kurallar tek yerde: "PUBLIC EVENT DETAIL" bölümü. Burada yalnızca
   orada tanımlı olmayan kutu düzeni durur; ikisini birden tanımlamak eski
   sürümde ölü kurallara ve sessiz ezmelere yol açmıştı. */
.public-event-page { padding-bottom: 2rem; }

.public-event-header .badge { margin-bottom: .5rem; }

.public-body { margin-bottom: 1.5rem; }
.public-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ── Paylaş & Takvime ekle (etkinlik detay) ─────────────
   Sayfa paylaşılmak için var (DM botu ve hikayeler bu adresi veriyor) ama
   paylaşmanın yolu yoktu. Telefonda cihazın kendi paylaşım sayfası açılır,
   masaüstünde bağlantı kopyalanır + kanal kısayolları görünür. */
.share-block {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s;
}
.share-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
  transform: translateY(-1px);
}
.share-btn--primary {
  background: linear-gradient(90deg, var(--primary), #c026a3);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(124, 58, 237, .26);
}
.share-btn--primary:hover {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(124, 58, 237, .34);
}
.share-ic { width: 17px; height: 17px; flex: none; }
.share-channels {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}
.share-channels[hidden] { display: none; }
.share-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.share-icon-btn svg { width: 18px; height: 18px; }
.share-icon-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
  text-decoration: none;
}
.share-toast {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .75rem 0 0;
  padding: .4rem .75rem;
  border-radius: 9px;
  background: #dcefe4;
  color: #1c6244;
  font-size: .85rem;
  font-weight: 600;
}
.share-toast[hidden] { display: none; }
.share-toast::before { content: "✓"; font-weight: 800; }

@media (max-width: 480px) {
  .share-row { flex-direction: column; align-items: stretch; }
  .share-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .share-btn, .share-icon-btn { transition: none; }
  .share-btn:hover, .share-icon-btn:hover { transform: none; }
}

/* ── Hero (landing) ───────────────────────────── */
.hero--brand { padding: 3rem 0 1.5rem; }
.hero--brand .page-title { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ── Success ──────────────────────────────────── */
.success-panel .success-lead { color: var(--text); font-size: 1rem; }
.success-poster-preview {
  display: inline-block;
  max-width: 100%;
  border-radius: var(--r);
  margin-bottom: 1rem;
  line-height: 0;
}
.success-poster { max-width: 100%; border-radius: var(--r); border: 1px solid var(--border); }
.success-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; }

/* ── Widget preview ───────────────────────────── */
.widget-preview-wrap { padding: 1.25rem; }

/* ── Report ───────────────────────────────────── */
.report-messages { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--muted); font-size: .88rem; }
.report-summary { margin: 0; font-size: .93rem; }

/* ── Honeypot ─────────────────────────────────── */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Misc helpers ─────────────────────────────── */
.small-print { font-size: .82rem; margin-top: .75rem; }

.calendar-actions-sticky {
  position: sticky;
  top: 76px;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* ── Responsive nav ───────────────────────────── */
@media (max-width: 640px) {
  .site-nav:not(.is-open) { width: 100%; justify-content: flex-start; }
  .container--header { gap: .5rem; }
}

/* ── Global responsive safety ─────────────────── */
html, body { overflow-x: clip; } /* clip: prevents scroll but doesn't create BFC issues unlike hidden */

/* Prevent text overflow everywhere */
h1, h2, h3, h4, h5, h6, p, li, td, th, label, span {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Pre/code blocks: prevent horizontal overflow */
pre, code {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: pre-wrap;
  max-width: 100%;
}
pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ensure images don't cause horizontal scroll */
img, video, iframe, embed, object {
  max-width: 100%;
}

/* ── Print ────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .toolbar, .filter-bar { display: none; }
  .main-content { padding: 0; }
  body { background: #fff; }
}

/* ── Additional utility classes ───────────────── */
.action-grid {
  display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: center;
}

.automation-settings-card .automation-toggle-form {
  display: flex;
  flex-direction: column;
  gap: .72rem;
}
.automation-settings-card .automation-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  padding: .75rem .85rem;
  width: 100%;
}
.automation-settings-card .automation-toggle-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: .2rem;
  accent-color: var(--primary);
  flex: 0 0 auto;
}
.automation-settings-card .automation-toggle-copy {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}
.automation-settings-card .automation-toggle-copy strong {
  display: block;
  color: var(--text);
  margin-bottom: .12rem;
}
.automation-settings-card .automation-toggle-copy small {
  display: block;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4;
}
/* Sistem duzeyinde kapatilmis, DUZENLENEMEZ akis satiri. Kesikli kenarlik
   "bu bir kontrol degil, bir durum" ayrimini gorsel olarak da tasir. Stil
   sinif olarak tanimlanir: CSP `style-src 'self'` gonderir, inline stil
   uygulanmaz (bkz. tests/test_form_templates_csp.py). */
.automation-settings-card .automation-toggle-row--locked {
  background: var(--surface);
  border-style: dashed;
}
.automation-settings-card .automation-toggle-row--locked .status-badge {
  flex: 0 0 auto;
  margin-top: .1rem;
}
.automation-settings-card .automation-toggle-row--locked .automation-toggle-copy {
  cursor: default;
}
.automation-settings-card .automation-toggle-actions {
  margin-top: .2rem;
  justify-content: flex-start;
}
.automation-token-panel {
  display: grid;
  gap: .85rem;
}
.automation-token-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
}
.automation-token-form {
  display: grid;
  gap: .55rem;
  max-width: 760px;
}
@media (max-width: 640px) {
  .automation-settings-card .automation-toggle-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .automation-token-form .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Login page centered layout ───────────────── */

@media (max-width: 480px) {
  .form-card--narrow { margin-top: 1rem; padding: 1.25rem; }
  .action-row { gap: .4rem; }
  .status-actions { padding: .85rem; gap: .5rem; }
  .toolbar { gap: .5rem; }
  .hero--brand { padding: 2rem 0 1rem; }
}

/* ── Stat card accent stripe ──────────────────── */
.stat-card:nth-child(3n+1) { border-top: 3px solid var(--primary); }
.stat-card:nth-child(3n+2) { border-top: 3px solid var(--secondary); }
.stat-card:nth-child(3n) { border-top: 3px solid var(--accent); }
/* Sıraya göre dağıtılan renk hiçbir şey anlatmıyor ve kart eklenince
   kayıyor. Durumu bilinen kartlar rengini kendi anlamından alır; sıra
   renkleri yalnızca etiketlenmemiş kartlar için geride durur. */
.stat-card.stat-card--neutral { border-top-color: var(--primary); }
.stat-card.stat-card--attention { border-top-color: var(--warn); }
.stat-card.stat-card--done { border-top-color: var(--success); }

/* ══════════════════════════════════════════════════════════
   MODERNIZASYON EKLEMELERİ v4
   ══════════════════════════════════════════════════════════ */

/* ── Smooth scroll & focus ────────────────────────────────── */
html { scroll-behavior: smooth; }
/* Klavye odak halkası ölçüldü: `--primary-light` (#a78bfa) sayfa zemininde
   (#fafbfc) 2.63:1 kalıyor, WCAG 2.2 §1.4.11'in metin dışı öğeler için
   istediği 3:1'in altında. `--primary` (#7c3aed) aynı zeminde 5.50:1. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ── Nav enhancements ─────────────────────────────────────── */
.nav-link {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  padding: .45rem .8rem;
  border-radius: var(--r-xs);
  transition: all .15s;
  white-space: nowrap;
}
.nav-link.mobile-only-install {
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  font-family: inherit;
  cursor: pointer;
}
.nav-link.mobile-only-install:hover {
  background: rgba(255,255,255,.18);
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.12); text-decoration: none; }
.nav-link--active { color: #fff !important; background: rgba(255,255,255,.15); font-weight: 600; }
.nav-link--cta {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff !important;
  font-weight: 600;
}
.nav-link--cta:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); }
/* Kitap Kulübü bağlantısı "Etkinlik Gönder" ile aynı satırda ama ikincil:
   birincil eylemi bastırmasın diye daha sönük bir dolgu kullanıyor.
   Renk TEK BAŞINA ayırt edici değil; metin zaten farklı. */
.nav-link--cta-secondary {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.nav-link--cta-secondary:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.35); }

/* AKTİF SAYFA — masaüstü.

   Kök neden: `.nav-link--active` (özgüllük 0,1,0) iki kural tarafından
   birden eziliyordu:

   * `.site-nav > a` (0,1,1) `font-weight: 500` — aktif bağlantının kalın
     yazısı hiç uygulanmıyordu.
   * `.nav-link--cta` (0,1,0, daha SONRA) `background: rgba(255,255,255,.15)`
     — aktif ile pasif "+ Etkinlik Gönder" AYNI zemini alıyordu, yani hangi
     sayfada olunduğu CTA bağlantılarında hiç görünmüyordu.

   0,2,1 özgüllüklü bu kural ikisini de yener. Mobil karşılığı aynı
   özgüllükte ve daha sonraki medya bloğunda tanımlı, dolayısıyla dar
   ekranda oradaki sol şerit görünümü kazanmaya devam eder.

   Durum TEK BAŞINA renkle anlatılmıyor: zemin + kalın yazı + kenarlık +
   alt şerit birlikte çalışır. */
.site-nav > a.nav-link--active {
  background: rgba(255,255,255,.3);
  border-color: #fff;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 0 #fff;
}
.nav-divider {
  width: 1px; height: 20px;
  background: rgba(255,255,255,.2);
  margin: 0 .25rem;
  align-self: center;
}

/* ── Skeleton loading ─────────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}

/* ── Toast bildirim ───────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  display: flex; flex-direction: column; gap: .5rem;
}
.toast {
  padding: .75rem 1.1rem; border-radius: var(--r-sm);
  background: #1e1b2e; color: #fff; font-size: .875rem;
  box-shadow: var(--shadow-lg); max-width: 320px;
  animation: toast-in .25s ease;
}
.toast--success { background: var(--success); }
.toast--error { background: var(--danger); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Event list filter chips ──────────────────────────────── */
.type-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; align-items: center; }
.type-chip {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .38rem .9rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 650;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--muted); cursor: pointer; transition: all .15s;
  white-space: nowrap;
  line-height: 1;
}
/* Çipler public listede <a> olarak basılıyor (filtre URL'de tutuluyor):
   bağlantı altı çizgisi ve mavi ziyaret rengi çip görünümünü bozmasın. */
a.type-chip { text-decoration: none; }
a.type-chip:hover { text-decoration: none; }
/* Çipler global `:focus-visible` kuralını almıyor, tarayıcının zayıf
   varsayılan halkasını (1.5px currentColor) çiziyordu; seçili olmayan çipte
   bu `--muted` griye düşüyor. Global kural değiştirilmeden, yalnız bu
   bileşen için açıkça yazılıyor. */
.type-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.type-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
a.type-chip.type-chip--active:hover { color: #fff; }
.type-chip.active,
.type-chip--active { background: var(--primary-gradient); border-color: transparent; color: #fff; }
.type-chip .type-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .38rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  background: rgba(17, 24, 39, .08);
  color: inherit;
}
.type-chip--active .type-count,
.type-chip.active .type-count {
  background: rgba(255, 255, 255, .26);
  color: #fff;
}
.public-type-filter .type-chip {
  box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
}

/* ── Event card improvements ──────────────────────────────── */
.event-card--public { cursor: pointer; }
.event-card-image-wrap { position: relative; overflow: hidden; }
.event-card-image { transition: transform .35s ease; }
.event-card:hover .event-card-image { transform: scale(1.04); }
.event-type-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: var(--primary-soft);
  border: 1px solid var(--primary-muted);
  color: var(--primary-dark);
  font-size: .72rem; font-weight: 700;
  padding: .22rem .6rem; border-radius: 999px;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ── Public event detail ──────────────────────────────────── */
.platform-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; }
.platform-link-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; min-height: 44px; border-radius: var(--r-sm);
  border: 1.5px solid var(--primary); color: var(--primary);
  font-size: .875rem; font-weight: 600; transition: all .15s;
  text-decoration: none;
}
.platform-link-btn:hover {
  background: var(--primary); color: #fff; text-decoration: none;
}
.sessions-list {
  list-style: none; padding: 0; margin: .5rem 0 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.session-badge {
  background: var(--primary-soft); color: var(--primary);
  border: 1px solid var(--primary-muted);
  padding: .3rem .75rem; border-radius: var(--r-xs);
  font-size: .875rem; font-weight: 600;
}

/* ── Yayın Takvimi (inline CSS'i buraya taşındı) ──────────── */
.yt-head { margin-bottom: 1.5rem; }
.yt-head h1 { font-size: 1.6rem; font-weight: 800; margin: 0 0 .25rem; }
.yt-head p { color: var(--muted); font-size: .9rem; margin: 0; }

.tab-bar {
  display: flex; gap: 0; border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: .6rem 1.25rem; border: none; background: none; cursor: pointer;
  font-size: .875rem; font-weight: 600; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  white-space: nowrap; font-family: inherit; transition: all .15s;
}
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-btn:hover:not(.active) { color: var(--text); }
/* Yayın Takvimi sekmeleri sunucu taraflı olduğu için <button> değil <a>.
   Yalnız anchor'lara uygulanır; poster editörünün <button> sekmeleri
   etkilenmez. Amaç düğmelerle görsel eşitlik: alt çizgi yok, dikey hizalama
   aynı. Aktif/hover görünümü yukarıdaki kurallardan gelir. */
a.tab-btn { display: inline-flex; align-items: center; text-decoration: none; }
a.tab-btn:hover { text-decoration: none; }
.tab-status-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  display: inline-block;
  margin-right: .45rem;
  background: var(--muted);
  vertical-align: .05em;
}
.tab-status-dot--pending { background: var(--warn); }
.tab-status-dot--published { background: var(--success); }
.tab-status-dot--suspect { background: var(--danger); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.yt-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.yt-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: .8rem; display: flex; flex-direction: column; gap: .7rem;
  box-shadow: var(--shadow); transition: box-shadow .2s;
}
.yt-card:hover { box-shadow: var(--shadow-md); }
.yt-card--suspect { border-left: 3px solid var(--danger); }
.yt-thumb-link { display: block; text-decoration: none; color: inherit; }
.yt-thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.yt-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-size: .85rem;
  background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft));
}
.yt-card-body { min-height: 0; }
.yt-card-title { font-weight: 700; font-size: 1rem; margin-bottom: .2rem; }
.yt-card-meta { font-size: .82rem; color: var(--muted); line-height: 1.7; }
.yt-meta-label { color: var(--text-2); font-weight: 700; }
.yt-card-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.yt-platform-tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .35rem; }
.yt-platform-tag {
  font-size: .72rem; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: .1rem .4rem; color: var(--text-2);
}
.yt-scheduled { font-size: .8rem; color: var(--primary); margin-top: .3rem; font-weight: 600; }
.yt-empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.yt-empty .icon {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .75rem;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid #ddd6fe;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .04em;
}

/* ── Poster editor page ───────────────────────────────────── */
.poster-editor.editor-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 1rem;
}
.poster-editor .editor-title {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: .25rem;
}
.poster-editor .editor-sub {
  color: var(--muted);
  margin-bottom: 1.5rem;
  font-size: .92rem;
}
.poster-editor .tab-bar {
  gap: .5rem;
}
.poster-editor .tab-btn {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1.25rem;
  font-size: .95rem;
  font-weight: 650;
}
.poster-editor .editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.5rem;
  align-items: start;
}
.poster-editor .canvas-wrap {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.poster-editor .canvas-wrap canvas {
  display: block;
  border-radius: var(--r-sm);
  cursor: grab;
  /* Plan P1: dokunmatik sürükleme/iki parmak zoom yalnız tuvalde; sayfa
     kaydırması tuval dışında korunur. Dar ekranda tuval taşmaz. */
  touch-action: none;
  max-width: 100%;
  height: auto;
}
.poster-editor .canvas-wrap canvas:active { cursor: grabbing; }
.poster-editor .canvas-label {
  font-size: .75rem;
  color: var(--faint);
  margin-top: .5rem;
  text-align: center;
}
.poster-editor .ctrl-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.poster-editor .ctrl-title {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 1rem;
}
.poster-editor .ctrl-row { margin-bottom: 1rem; }
.poster-editor .ctrl-row label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .4rem;
}
.poster-editor .ctrl-row input[type=range] {
  width: 100%;
  accent-color: var(--primary);
}
.poster-editor .ctrl-value {
  font-size: .8rem;
  color: var(--muted);
  text-align: right;
  margin-top: .2rem;
}
.poster-editor .btn-reset {
  width: 100%;
  padding: .6rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: .9rem;
  margin-top: .5rem;
  color: var(--text-2);
}
.poster-editor .btn-reset:hover {
  background: var(--primary-soft);
  color: var(--primary);
}
.poster-editor .btn-save {
  width: 100%;
  padding: .75rem;
  background: var(--primary-gradient);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: .95rem;
  font-weight: 700;
  margin-top: .75rem;
  box-shadow: 0 4px 12px rgba(124,58,237,.22);
}
.poster-editor .btn-save:hover { background: var(--primary-gradient-hover); }
.poster-editor .preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
}
.poster-editor .preview-label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: .75rem;
  text-align: center;
}
.poster-editor .ig-mockup {
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: var(--r-sm);
  overflow: hidden;
  font-family: var(--font);
}
.poster-editor .ig-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  border-bottom: 1px solid #efefef;
}
.poster-editor .ig-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-gradient);
}
.poster-editor .ig-username {
  font-size: .85rem;
  font-weight: 700;
}
.poster-editor .ig-post-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
}
.poster-editor .ig-story-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
}
.poster-editor .ig-caption {
  padding: .75rem;
  font-size: .82rem;
  line-height: 1.5;
  border-top: 1px solid #efefef;
  color: #262626;
  max-height: 120px;
  overflow: hidden;
}
.poster-editor .ig-caption .username {
  font-weight: 700;
  margin-right: .25rem;
}
.poster-editor .info-bar {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .75rem 1rem;
  font-size: .85rem;
  color: var(--text-2);
  margin-bottom: 1rem;
}
.poster-editor .info-bar strong { color: var(--text); }

@media (max-width: 700px) {
  .poster-editor .editor-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .poster-editor .preview-layout { grid-template-columns: 1fr; }
}

/* ── Admin dashboard simplification ──────────────────────── */
.admin-quick-actions {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: 1.5rem;
}

/* ── Mobile improvements ──────────────────────────────────── */
@media (max-width: 640px) {
  .hero--modern { padding: 2rem 0 1.25rem; }
  .hero-stats { gap: 1rem; }
  .tab-btn { padding: .55rem .9rem; font-size: .82rem; }
  .yt-grid { grid-template-columns: 1fr; }
  .yt-card-actions { justify-content: flex-start; }
  .platform-links { flex-direction: column; }
  .platform-link-btn { justify-content: center; }
}

/* ── Genel overflow güvenliği ─────────────────────────────── */
.container { overflow-x: clip; }

/* ===== LANDING PAGE ===== */
.hero--modern {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #1a3a5c 100%);
  color: #fff;
  padding: 5rem 1.5rem 4rem;
  text-align: center;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-inner { max-width: 640px; margin: 0 auto; }
.hero-eyebrow {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: .75rem;
}
.hero-title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 1rem;
  letter-spacing: -.02em;
}
.hero-lead {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  opacity: .85;
  margin: 0 0 2rem;
  line-height: 1.5;
}
.hero--modern .hero-actions { gap: .75rem; }
.hero--modern .btn-outline {
  border: 2px solid rgba(255,255,255,.6);
  color: #fff;
  background: transparent;
}
.hero--modern .btn-outline:hover {
  background: rgba(255,255,255,.15);
  border-color: #fff;
}
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 2rem;
  font-size: .8rem;
  opacity: .65;
  flex-wrap: wrap;
}
.hero-stat strong { font-weight: 700; }
.hero-stat-sep { opacity: .4; }

/* Landing sections */
.landing-section { padding: 3rem 1.5rem; max-width: 1200px; margin: 0 auto; }
.landing-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}
.section-link {
  font-size: .875rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.section-link:hover { text-decoration: underline; }
.section-title--center { text-align: center; }
.landing-more { text-align: center; margin-top: 2rem; }
.landing-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  max-width: 640px;
  margin: 2rem auto;
  background: var(--surface);
  border: 1px dashed var(--primary-muted);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.event-count-hint {
  text-align: center;
  color: var(--muted);
  font-size: .8rem;
  margin-top: 1.5rem;
}

/* How steps */
.landing-how {
  background: var(--surface-2);
  padding: 4rem 1.5rem;
  text-align: center;
}
.how-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 800px;
  margin: 2.5rem auto 0;
}
.how-step {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-xs);
}
.how-step-icon {
  width: 2.8rem;
  height: 2.8rem;
  margin: 0 auto .75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  border: 1px solid var(--primary-muted);
  color: var(--primary-dark);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .04em;
}
.how-step h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; }
.how-step p { font-size: .875rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* Platform tags (mini, no link) */
.platform-links--mini { margin-bottom: .75rem; }
.platform-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: .2em .55em;
  border-radius: 4px;
  background: var(--primary-soft);
  color: var(--primary);
  margin-right: .25rem;
  margin-bottom: .2rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Event type chip variants */
.event-type-chip--lg {
  font-size: .8rem;
  padding: .3em .8em;
  margin-bottom: .75rem;
}

/* Ücret durumu rozeti: fiyat bilgisi sayfada hiç görünmüyordu.
   Plan C4: "Ücretli" rozeti aynı görsel ailede. İki durum yalnız renkle
   değil, görünür metinle de ("Ücretsiz" / "Ücretli") ayrılır; ücret
   bilinmiyorsa hiçbir rozet basılmaz. */
.event-free-chip,
.event-paid-chip {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  padding: .3em .8em;
  border-radius: 999px;
  margin-bottom: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.event-free-chip {
  background: #d1e7dd;
  color: #0a3622;
}
.event-paid-chip {
  background: #fff3cd;
  color: #664d03;
}
/* Kart çip satırı (Plan C4): kategori + ücret rozeti başlığın üstünde tek
   satırda; ücret rozeti kartta kategori çipiyle aynı ölçüde. */
.event-card-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}
.event-card-chips .event-free-chip,
.event-card-chips .event-paid-chip {
  font-size: var(--fs-badge);
  padding: .22rem .6rem;
  margin-bottom: 0;
}
.public-event-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.public-event-chips > * { margin-right: 0; }

/* ===== PUBLIC EVENT DETAIL ===== */
@media (min-width: 860px) {
  .public-event-page--with-poster {
    display: grid;
    grid-template-columns: minmax(320px, 520px) minmax(0, 1fr);
    /* Sağ sütundaki bloklar kendi yüksekliklerinde kalsın; afiş onlardan
       uzun olduğunda artan yükseklik son (boş) satıra gitsin. Aksi halde
       fazlalık satırlara dağılıp bölümlerin arasını açıyordu. */
    grid-template-rows: repeat(4, min-content) 1fr;
    gap: 2rem;
    align-items: start;
  }
  .public-event-page--with-poster .public-event-hero {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  .public-event-page--with-poster .public-event-topline,
  .public-event-page--with-poster .public-event-header,
  .public-event-page--with-poster .public-body,
  .public-event-page--with-poster .public-tickets,
  .public-event-page--with-poster .public-contact,
  .public-event-page--with-poster .similar-events,
  .public-event-page--with-poster .public-actions {
    grid-column: 2;
  }
}

/* İLETİŞİM (Plan E5): açık izinli Instagram iletişimi. Mesaj her zaman
   seçilebilir metin; pano başarısız olursa betik onu seçer. */
.public-contact {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  min-width: 0;
}
.public-contact-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}
.public-contact-handle { margin: 0; overflow-wrap: anywhere; }
.public-contact-note { margin: 0; font-size: .8rem; color: var(--muted); }
.public-contact-message-label { margin: .25rem 0 0; font-size: .82rem; color: var(--muted); }
.public-contact-message {
  margin: 0;
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text);
  font-size: .9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  user-select: text;
  -webkit-user-select: text;
}
.public-contact-status { margin: 0; font-size: .82rem; color: var(--primary-dark); }
@media (max-width: 639px) {
  .public-contact-dm { width: 100%; justify-content: center; min-height: 44px; }
  .public-contact-copy { min-height: 44px; }
}

/* ÜST GERİ DÖNÜŞ VE BİLGİ SATIRI (Plan E4): h1'in üstünde tek satır.
   Uzun mekân adı satırı taşırmaz, sarar; ayraçlar yalnız dolu parçalar
   arasında (şablon). Tür bağlantısı dışındaki parçalar düz metin. */
.public-event-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
  margin: 0 0 1rem;
  min-width: 0;
  font-size: .86rem;
}
.public-event-back {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}
.public-event-back:hover { text-decoration: underline; }
.public-event-topline-info {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  /* Sütun boşluğu ayracın kutusudur: ayraç negatif sol boşlukla bu alana
     oturur. Satır başındaki öğenin ayracı kapsayıcının SOLUNA düşer ve
     yalnız sol kenarı kırpan `clip-path` onu gizler (diğer kenarlarda odak
     halkası kırpılmaz). */
  gap: .15rem 1rem;
  min-width: 0;
  color: var(--muted);
  clip-path: inset(-8px -8px -8px 0);
}
.public-event-topline-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.public-event-topline-sep {
  display: inline-block;
  width: 1rem;
  margin-left: -1rem;
  text-align: center;
  color: var(--muted);
}
.public-event-topline-part { overflow-wrap: anywhere; min-width: 0; }
.public-event-topline-part--type {
  color: var(--primary-dark);
  font-weight: 650;
}
/* Sol kırpma odak halkasını kesmesin: halka bağlantının İÇİNDE çizilir. */
.public-event-topline-part--type:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  border-radius: 4px;
}
@media (max-width: 639px) {
  .public-event-back { min-height: 44px; }
}

/* BENZER ETKİNLİKLER (Plan E2): paylaş bloğunun altında en fazla üç kart.
   Masaüstünde üç sütun; dar ekranda afiş solda, metin sağda yatay kart
   (üç tam genişlik 4:5 afiş alt alta sayfayı gereksiz uzatırdı). */
.similar-events {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  min-width: 0;
}
.similar-events-title {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}
.similar-events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  /* Afişsiz tek sütun detayda kartlar 370px'e (460px yüksek afiş) çıkıyordu;
     öneri, sayfanın asıl içeriğinden büyük görünmemeli. */
  max-width: 760px;
}
.similar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.similar-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.similar-card-image-wrap { display: block; position: relative; overflow: hidden; }
.similar-card-image { width: 100%; }
.similar-card-body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .75rem .85rem .9rem;
  min-width: 0;
}
.similar-card-venue-tag {
  align-self: flex-start;
  padding: .16rem .55rem;
  border-radius: 999px;
  background: var(--primary-muted);
  color: var(--primary-dark);
  font-size: .72rem;
  font-weight: 700;
}
.similar-card-title {
  margin: 0;
  font-size: .95rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.similar-card-title a { color: var(--text); text-decoration: none; }
/* Kartın TAMAMI tek hedef: başlık bağlantısı kartı kaplar. */
.similar-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.similar-card:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.similar-card .event-meta { font-size: .8rem; }
@media (max-width: 639px) {
  .similar-events-grid { grid-template-columns: 1fr; gap: .75rem; }
  .similar-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
  }
  .similar-card-body { padding: .6rem .75rem; }
  /* 96px küçük görselde "Afiş yok" rozeti sığmıyor ve bölünüyordu; yalnız
     işaret kalır (metin ekran okuyucuya zaten görsel değil, kart başlığı). */
  .similar-card .event-card-image--empty { gap: 0; }
  .similar-card .event-card-image--empty::before { inset: .35rem; }
  .similar-card .event-card-empty-text { display: none; }
  .similar-card .event-card-empty-mark {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .75rem;
  }
  .similar-card .event-card-empty-mark svg { width: 1.2rem; height: 1.2rem; }
}
.public-event-hero {
  margin: 0 0 1.5rem;
}
.public-event-hero img {
  width: 100%;
  display: block;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface-2);
  max-height: min(78vh, 900px);
  object-fit: contain;
}
/* AFİŞ SUNULAMADIĞINDA hero yedeği.
   Kutu, görselin taşıdığı ölçü sözleşmesini paylaşır: aynı 4:5 oran,
   aynı kenarlık/köşe ve aynı üst sınır. Böylece görselden yedeğe geçiş
   YERLEŞİM SIÇRAMASI üretmez. Kart/tablo yedeğiyle aynı görsel dil
   (`event-card-empty-*`) kullanılır; ikinci bir tasarım kurulmaz.

   KUTU HESABI çalışan afişle BİREBİR aynıdır: `img` yüksekliğini
   `height: auto` ile İÇERİK kutusundan türetir, 1px kenarlıklar bunun
   DIŞINA eklenir. `aspect-ratio` border-box'a uygulandığında yedek,
   afişten kenarlıklar kadar (2px) kısa kalıyordu. Bu yüzden oran
   content-box üzerinde hesaplanır ve kenarlık payı TEK değişkenden
   düşülür — sabit yükseklik ya da tek bir genişliğe özel değer YOK. */
.public-event-hero__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  --hero-edge: 1px;   /* üst/alt kenarlık kalınlığı */
  --hero-edge-x: 1px; /* sol/sağ kenarlık kalınlığı (mobilde 0 olur) */
  box-sizing: content-box;
  width: calc(100% - 2 * var(--hero-edge-x));
  aspect-ratio: 4/5;
  max-height: calc(min(78vh, 900px) - 2 * var(--hero-edge));
  border-radius: var(--r);
  border: var(--hero-edge) solid var(--border);
  border-left-width: var(--hero-edge-x);
  border-right-width: var(--hero-edge-x);
  background: var(--surface-2);
  color: var(--primary-dark);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.public-event-hero__empty .event-card-empty-mark svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.public-event-header { margin-bottom: 1.5rem; }
.page-title--public {
  font-size: clamp(1.4rem, 4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.2;
  margin: .5rem 0 1rem;
}
.public-meta-list {
  --meta-icon-size: 1.9rem;
  --meta-label-w: 7.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
/* İkon / etiket / değer sütunları. İlk sütun ikon kutusunun tam genişliği
   kadar olmalı; dar tutulduğunda ikon etiketin üstüne biniyordu. İkinci
   sütun da en uzun etiketi ("Organizasyon") tek satırda taşımalı. */
.public-meta-list li {
  display: grid;
  grid-template-columns: var(--meta-icon-size) var(--meta-label-w) minmax(0, 1fr);
  column-gap: .55rem;
  align-items: center;
  font-size: .925rem;
  padding: .62rem .75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.public-meta-list li > span:last-child,
.public-meta-list li > .sessions-list {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-weight: 500;
}
.meta-icon {
  width: var(--meta-icon-size);
  height: var(--meta-icon-size);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  border: 1px solid var(--primary-muted);
  color: var(--primary-dark);
  line-height: 1;
}
.meta-icon svg {
  width: 1rem;
  height: 1rem;
  display: block;
}
.meta-label {
  font-weight: 600;
  color: var(--clr-text-muted, #6b7280);
}

/* Ticket platforms on detail */
.public-tickets { margin: 2rem 0; }
.public-tickets-title {
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--clr-text-muted, #6b7280);
  margin-bottom: .75rem;
}
.platform-link-btn--nolink {
  cursor: default;
  background: var(--clr-surface, #f3f4f6);
  color: var(--clr-text-muted, #6b7280);
}
.platform-link-btn--nolink:hover {
  transform: none;
  box-shadow: none;
}

/* Public actions */
.public-actions { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--clr-border, #e5e7eb); }
.public-actions .btn { min-height: 44px; }

/* ===== EVENT LIST PAGE ===== */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--surface);
  border: 1px dashed var(--primary-muted);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.empty-state .empty-hint { margin-bottom: 1.5rem; }

/* ===== MOBILE OVERRIDES ===== */
@media (max-width: 640px) {
  .event-card {
    overflow: hidden;
  }
  .event-card-image-wrap {
    display: block;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
  }
  .event-card-image {
    display: block;
  }
  .event-card-body {
    position: relative;
    z-index: 2;
    background: var(--surface);
    margin-top: 0;
  }
  .event-card-body .event-type-chip {
    position: static;
    inset: auto;
    align-self: flex-start;
    margin-bottom: .15rem;
    background: var(--primary-soft);
    color: var(--primary-dark);
  }
  .hero--modern { padding: 3.5rem 1rem 3rem; min-height: auto; }
  .hero-title { font-size: 2rem; }
  .landing-section { padding: 2rem 1rem; }
  .landing-section-head { flex-direction: column; gap: .5rem; }
  .public-event-hero {
    border-radius: 0;
    margin-left: -1rem;
    margin-right: -1rem;
    max-height: none;
    overflow: visible;
  }
  .public-event-hero img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    /* Afiş bu kırılımda kenardan kenara; köşe yuvarlaması figure ile
       birlikte kalkmalı, yoksa tam genişlikte yuvarlak köşe görünüyor. */
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .public-event-hero__empty {
    /* Yedek, çalışan afişle AYNI kenardan kenara işlemi görür: yan
       kenarlıklar ve köşe yuvarlaması kalkar, genişlik payı sıfırlanır,
       üst sınır da img gibi serbest kalır. Ölçü hesabı böylece her
       kırılımda afişle aynı kalır. */
    --hero-edge-x: 0px;
    border-radius: 0;
    max-height: none;
  }
  .public-meta-list { --meta-label-w: 6.4rem; }
  .platform-links { flex-direction: column; }
  .platform-link-btn { width: 100%; justify-content: space-between; }
  .how-steps { grid-template-columns: 1fr; gap: 1rem; }
}

/* ===== FORM MOBILE ENHANCEMENTS ===== */
.upload-form .field-input {
  font-size: 1rem; /* Prevents iOS zoom on focus (must be >= 16px) */
}
.upload-form .field-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.upload-submit:disabled {
  opacity: .65;
  cursor: not-allowed;
}
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .875rem;
  line-height: 1.5;
  cursor: pointer;
}
.consent-check input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .15rem;
  accent-color: var(--primary);
}
@media (max-width: 640px) {
  .upload-layout { grid-template-columns: 1fr; }
  .upload-sidebar { width: 100%; }
  .field-row--3 { grid-template-columns: 1fr 1fr; }
  .field-row--3 .field:last-child { grid-column: 1 / -1; }
}

/* ===== BADGE VARIANTS ===== */
.badge-yellow { background: #fff3cd; color: #856404; }
.badge-green  { background: #d1e7dd; color: #0a3622; }
.badge-red    { background: #f8d7da; color: #842029; }
.badge-blue   { background: #cfe2ff; color: #084298; }

/* ===== PANELDEKİ OKUNMAMIŞ BİLDİRİM ŞERİDİ ===== */
.dashboard-notif-alert {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: var(--r);
  border: 1px solid #fca5a5;
  background: linear-gradient(135deg, #fef2f2 0%, #fff7ed 100%);
  color: var(--text);
  text-decoration: none !important;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .15s, transform .15s;
}
.dashboard-notif-alert:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.dashboard-notif-alert-icon {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #fff;
}
.dashboard-notif-alert-icon svg { width: 21px; height: 21px; }
.dashboard-notif-alert-count {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  border: 2px solid #fef2f2;
  font-size: .68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dashboard-notif-alert-body {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
  flex: 1 1 auto;
}
.dashboard-notif-alert-title {
  font-size: .95rem;
  font-weight: 700;
  color: #991b1b;
}
.dashboard-notif-alert-list {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .5rem;
  font-size: .82rem;
  color: var(--muted);
  min-width: 0;
}
.dashboard-notif-alert-item {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-notif-alert-item + .dashboard-notif-alert-item::before {
  content: "•";
  margin-right: .5rem;
  color: #d1d5db;
}
.dashboard-notif-alert-item--more { font-weight: 600; }

.dashboard-notif-alert-cta {
  flex: 0 0 auto;
  font-size: .84rem;
  font-weight: 700;
  color: #b91c1c;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .dashboard-notif-alert { flex-wrap: wrap; gap: .7rem; }
  .dashboard-notif-alert-cta { width: 100%; text-align: right; }
}

.btn-unread-count {
  /* Ölçüm: masaüstünde `.admin-quick-actions` flex olduğu için rozet
     `flex: 0 1 auto` ile 20px'e sıkışıyor ve `99+` kırpılıyordu
     (clientWidth 20 / scrollWidth 22). Genişlik içeriğe bırakılıyor,
     küçülme kapatılıyor; `min-width` tek basamağın daireselliğini koruyor. */
  min-width: 20px;
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-unread-count[hidden] { display: none; }
.btn--has-unread {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}

/* ===== ADMIN QUICK ACTIONS ===== */
.admin-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.75rem;
}
.admin-quick-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.admin-action-mark {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .3);
  color: currentColor;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .02em;
  line-height: 1;
}
.btn-secondary .admin-action-mark {
  background: var(--primary-soft);
  border-color: #ddd6fe;
  color: var(--primary);
}
.admin-action-mark svg {
  width: .95rem;
  height: .95rem;
  display: block;
}

/* ===== DETAILS/SUMMARY RESET ===== */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { display: none; }
.settings-card {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  padding: .75rem .85rem;
}
.settings-card--spaced { margin-bottom: .875rem; }
.settings-card-summary {
  cursor: pointer;
  color: var(--text-2);
  font-size: .88rem;
  font-weight: 650;
}
.field-mt-sm { margin-top: .625rem; }
.form-mt-sm { margin-top: .75rem; }
.check-row {
  display: inline-flex;
  align-items: flex-start;
  gap: .55rem;
  color: var(--text-2);
  font-size: .9rem;
}
.check-row--spaced { margin-bottom: .75rem; }
.check-row input {
  margin-top: .2rem;
  accent-color: var(--primary);
}

/* ===== AUTH PAGE (login) ===== */
.auth-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
/* Okunabilir kart genişliği. 420px'te e-posta alanı ile "Şifreyi
   göster" düğmesi sıkışıyordu; 470px hem alanlara hem düğmeye nefes
   veriyor ve tek sütunlu bir formda satır uzunluğunu aşırıtmıyor.
   Mobilde `.auth-page` yatay dolgusu sayesinde taşma OLMAZ. */
.auth-card {
  width: 100%;
  max-width: 470px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, .75rem);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-md);
}
.auth-card--elevated {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,250,255,.98));
  border-color: rgba(139, 92, 246, .25);
}
.auth-logo {
  width: 3.1rem;
  height: 3.1rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border: 1px solid #ddd6fe;
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .04em;
}
.auth-title {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  margin: 0 0 .25rem;
}
.auth-lead {
  text-align: center;
  font-size: .875rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
}
/* Açıklama satırı OLMAYAN kart (giriş ekranı): alt boşluğu başlık taşır,
   yoksa kaldırılan paragrafın yerinde boşluk kalırdı. */
.auth-title--solo { margin-bottom: 1.5rem; }

.auth-form { display: flex; flex-direction: column; gap: 1.1rem; }
.auth-form .btn-block { margin-top: .35rem; }

/* ——— DOKUNMA VE OKUNABİLİRLİK ÖLÇÜLERİ ———
   Alanlar, şifre göster düğmesi ve ana düğme AYNI yüksekliği paylaşır:
   üçü farklı ölçülerdeyken kart dengesiz görünüyordu. 48px hem WCAG'in
   44px dokunma hedefini hem de rahat bir masaüstü ölçüsünü karşılıyor. */
.auth-form .field-input {
  min-height: 48px;
  padding: .7rem .9rem;
  font-size: 1rem;
}
.auth-form .btn-block.btn-lg {
  min-height: 48px;
  font-size: 1rem;
}
.auth-form .field-check { min-height: 44px; align-items: center; }
.auth-form .field-check input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: 0; }
/* "Göster" düğmesi de bir DOKUNMA HEDEFİ: 40px, 44px eşiğinin altındaydı. */
.auth-form .field-password-toggle { min-height: 44px; display: flex; align-items: center; }
/* Mobilde 16px'in ALTINA düşen bir girdi, iOS Safari'de odaklanınca
   sayfayı yakınlaştırır ve kullanıcı elle geri küçültmek zorunda kalır. */
@media (max-width: 599px) {
  .auth-page { padding: 1.5rem 1rem; }
  .auth-card { padding: 1.75rem 1.25rem; }
  .auth-form .field-input { font-size: 16px; }
}
.auth-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .25rem;
}
.auth-link {
  font-size: .87rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.auth-link:hover { text-decoration: underline; }

/* Password toggle */
.field-password-wrap { position: relative; }
.field-password-wrap .field-input { padding-right: 4.2rem; }
.field-password-toggle {
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: .25rem;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
}
.field-password-toggle:hover { color: var(--text); }

/* ===== ADMIN USERS PAGE ===== */
.au-section { margin-bottom: 2.5rem; }
.au-row--inactive { opacity: .5; }
.au-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.au-add-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }

/* Şifre sıfırlama modal */
.au-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 900;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.au-modal.is-open { display: flex; }
.au-modal-dialog {
  background: var(--surface);
  border-radius: var(--radius-lg, .75rem);
  padding: 1.75rem;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-md);
}
.au-modal-actions { display: flex; gap: .5rem; margin-top: .75rem; }
body.au-modal-open { overflow: hidden; }

.gemini-share-form {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .75rem;
  align-items: center;
}
.gemini-share-form label {
  font-size: .78rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

@media (max-width: 480px) {
  .auth-card { padding: 2rem 1.25rem; }
  .au-add-form .field-row--3 { grid-template-columns: 1fr; }
}

/* Admin login nav link — subtle stil */
.nav-link--admin-login {
  font-size: .8rem;
  opacity: .6;
  letter-spacing: .01em;
}
.nav-link--admin-login:hover {
  opacity: 1;
}

/* Kullanılmayan "yalnız masaüstü" menü kuralı KALDIRILDI (Paket 8):
   hiçbir şablon o sınıfı basmıyordu, yani hiçbir bağlantıyı gizlemiyordu.
   Mobil görünürlük `.mobile-only-install` ve `@media (max-width: 768px)`
   menü kurallarıyla çözülüyor. */

/* ===== POSTER EDITOR — RESİMSİZ DURUM ===== */
.no-poster-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  border: 2px dashed var(--border, #e5e7eb);
  border-radius: var(--radius, .5rem);
  background: var(--surface, #f9fafb);
  text-align: center;
  margin-bottom: 1rem;
}
.no-poster-icon {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .75rem;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid #ddd6fe;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .04em;
}
.no-poster-text { font-size: .95rem; color: var(--muted); margin: 0 0 1rem; }

/* ===== INLINE STYLE REPLACEMENTS ===== */
.inline-form { display: inline; margin: 0; }
.is-hidden { display: none; }
/* hidden özniteliği, forma özgü `label { display: block }` gibi daha spesifik
   kurallar tarafından eziliyordu; taban kural bu yüzden zorunlu. */
[hidden] { display: none !important; }
.cursor-pointer { cursor: pointer; }
.small-print-top { margin-top: .5rem; }
.field-spaced-y { margin: .75rem 0; }
.notice-mb-1 { margin-bottom: 1rem; }
.mt-1 { margin-top: 1rem; }
.admin-autofill-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .7rem;
  align-items: end;
}
.admin-autofill-form .field-label { margin-bottom: 0; }
.admin-create-upload-layout {
  grid-template-columns: minmax(0, .92fr) minmax(320px, 380px);
}
.admin-upload-card { margin-bottom: 1rem; }
.admin-preview-card { position: sticky; top: 5.5rem; }
.admin-preview-image {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.admin-preview-list {
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
  display: grid;
  gap: .45rem;
  font-size: .85rem;
}
.admin-preview-list li {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface);
}
.admin-preview-list strong { color: var(--text-2); }

@media (max-width: 920px) {
  .admin-create-upload-layout { grid-template-columns: 1fr; }
  .admin-preview-card { position: static; top: auto; }
}
@media (max-width: 640px) {
  .admin-autofill-form { grid-template-columns: 1fr; }
  .admin-autofill-form .btn { width: 100%; }
  .admin-quick-actions .btn { width: 100%; justify-content: center; }
  .notice, .page-lead, .section-desc, .small-print { overflow-wrap: anywhere; }
}
.mt-075 { margin-top: .75rem; }
.mt-12 { margin-top: 12px; }

.phone-prefix-row { display: flex; gap: .5rem; align-items: center; }
.phone-prefix-input { max-width: 84px; background: #f7f7f7; }

.text-danger-inline { color: var(--danger); }
.yt-card-meta-danger { margin-top: .35rem; color: var(--danger); }

.story-preview-image {
  max-width: 260px;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.action-row-spaced { margin-top: 10px; }

.manual-editor-frame {
  background-image: url('/static/templates/erzurum_event_overlay.png');
}
.manual-editor-canvas-full { width: 100%; height: 100%; }

.canvas-debug-text {
  font-size: .75rem;
  color: #e53e3e;
  margin-top: .25rem;
  min-height: 1rem;
}
.preview-note {
  font-size: .85rem;
  color: #495057;
  line-height: 1.6;
}
.ig-mockup-compact {
  max-width: 280px;
  margin: auto;
}

.queue-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(240px, 1fr));
  gap: .75rem;
  margin-top: 1rem;
  overflow-x: auto;
  padding-bottom: .35rem;
  align-items: start;
  scroll-snap-type: x proximity;
}
.queue-calendar-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .65rem;
}
.queue-calendar-nav {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.queue-calendar-nav strong {
  min-width: 180px;
  text-align: center;
}
.queue-calendar-day {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}
.queue-calendar-day-head {
  padding: .65rem .7rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}
.queue-calendar-day-head h3 {
  font-size: .95rem;
  margin: 0;
}
.queue-calendar-list {
  margin: 0;
  padding: .5rem;
  display: grid;
  gap: .5rem;
  max-height: 68vh;
  overflow-y: auto;
}
.queue-calendar-week.is-hidden,
.queue-calendar-dayview.is-hidden,
.queue-day-picker.is-hidden { display: none; }
.queue-day-picker {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  margin-top: .5rem;
}
.queue-day-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  padding: .35rem .65rem;
  display: grid;
  gap: .08rem;
  white-space: nowrap;
  cursor: pointer;
}
.queue-day-chip small { color: var(--muted); font-size: .72rem; }
.queue-day-chip.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  font-weight: 700;
}
.queue-day-chip.is-today { border-color: #6366f1; }
.queue-day-chip:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.queue-time-group {
  border: 1px solid #ececf3;
  border-radius: .55rem;
  background: #fcfcff;
  padding: .35rem;
}
.queue-time-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  padding: .2rem .3rem .35rem;
  border-bottom: 1px dashed #e5e7eb;
  margin-bottom: .35rem;
  cursor: pointer;
  list-style: none;
}
.queue-time-group-head::-webkit-details-marker { display: none; }
.queue-time-group-head strong { font-size: .8rem; color: #111827; }
.queue-time-group-head span { font-size: .72rem; color: var(--muted); }
.queue-time-group-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
  min-width: 0;
}
.queue-calendar-item {
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: .45rem;
  padding: .55rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-width: 0;
}
.queue-calendar-time-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .35rem;
}
.queue-calendar-time {
  font-size: .8rem;
  font-weight: 800;
  color: var(--text-2);
}
.queue-calendar-body {
  min-width: 0;
  display: grid;
  gap: .3rem;
}
.queue-calendar-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.queue-calendar-title:hover {
  text-decoration: underline;
}
.queue-calendar-action {
  font-size: .68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .18rem .46rem;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid var(--border);
  color: var(--text-2);
  background: #fff;
}
.queue-calendar-action--post { background: #f3e8ff; border-color: #d8b4fe; color: #6b21a8; }
.queue-calendar-action--story { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; }
.queue-calendar-action--story_digest { background: #ecfeff; border-color: #67e8f9; color: #155e75; }
.queue-calendar-action--sync { background: #e0f2fe; border-color: #7dd3fc; color: #075985; }
.queue-calendar-action--publish { background: #dcfce7; border-color: #86efac; color: #166534; }
.queue-calendar-action--auto-publish { background: #fff7ed; border-color: #fdba74; color: #9a3412; }

.queue-calendar-preview {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: .42rem;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: .42rem;
  background: #fff;
  padding: .3rem;
}
.queue-preview-icon {
  justify-self: end;
  font-size: .82rem;
  color: #6b7280;
}
.queue-preview-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-day-panel {
  display: none;
  margin-top: .75rem;
}
.queue-day-panel.is-active { display: block; }
.queue-day-panel-list {
  margin-top: .45rem;
  display: grid;
  gap: .55rem;
}
.queue-calendar-month {
  margin-top: .9rem;
}
.queue-month-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .45rem;
  margin-bottom: .45rem;
}
.queue-month-head div {
  font-size: .76rem;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
}
.queue-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .45rem;
}
/* ── Paylasim Takvimi: ay hucresi ─────────────────────────────────────
   Hucre artik gercek bir <a>. Ayirt edici isaretlerin HICBIRI yalniz renge
   dayanmiyor: bugun/secili gun ayri bir METIN rozetiyle, kanal ayrimi kisa
   METIN + ikonla, yogunluk ise sayi + "Az/Orta/Yogun" METNIYLE gosteriliyor.
   Renk yalnizca ucuncu bir isaret. */
.queue-month-cell {
  border: 1px solid var(--border);
  border-radius: .6rem;
  background: #fff;
  min-height: 132px;
  padding: .45rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
a.queue-month-cell:hover {
  border-color: #c4b5fd;
  box-shadow: 0 2px 10px rgba(79, 70, 229, .1);
  transform: translateY(-1px);
}
a.queue-month-cell:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
}
.queue-month-cell.is-today { border-color: #6366f1; box-shadow: inset 0 0 0 1px #6366f1; }
.queue-month-cell.is-selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 2px var(--primary);
}
.queue-month-cell--empty { background: #fbfbfe; }
.queue-month-cell--blank {
  background: transparent;
  border-style: dashed;
  opacity: .45;
  min-height: 132px;
}
.queue-month-cell-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .3rem;
  flex-wrap: wrap;
}
.queue-month-daynum { font-size: 1rem; font-weight: 700; line-height: 1; }
.queue-month-flag {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: .08rem .34rem;
  background: #e0e7ff;
  color: #3730a3;
}
/* "Seçili" rozeti CSS'ten ÜRETİLİYOR.

   Kök neden: rozet sunucu tarafında basılıyordu. Gün istemci tarafında
   değiştirildiğinde JavaScript yalnız `is-selected` sınıfını ve
   `aria-current`'ı taşıyor, rozet ESKİ hücrede kalıyordu; iki gün birden
   seçili görünüyordu. Rozet artık `is-selected`'ten türediği için üçü
   (sınıf, `aria-current`, rozet) ayrışamaz — tek kaynak var. */
.queue-month-flag--sel { display: none; }
.queue-month-cell.is-selected .queue-month-flag--sel {
  display: inline-block;
  background: var(--primary);
  color: #fff;
}

.queue-month-density { display: flex; align-items: center; gap: .3rem; }
.queue-month-density-dot {
  width: .5rem; height: .5rem; border-radius: 999px;
  background: #cbd5e1; flex: 0 0 auto;
}
.queue-month-density-text { font-size: .66rem; color: var(--muted); font-weight: 600; }
.queue-month-density--light  .queue-month-density-dot { background: #a5b4fc; }
.queue-month-density--medium .queue-month-density-dot { background: #6366f1; }
.queue-month-density--heavy  .queue-month-density-dot { background: #4338ca; }

.queue-month-marks { display: flex; flex-wrap: wrap; gap: .18rem; }
.queue-month-mark {
  display: inline-flex; align-items: center; gap: .14rem;
  font-size: .6rem; font-weight: 700;
  border-radius: .3rem; padding: .1rem .26rem;
  background: #f1f5f9; color: #334155;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.queue-month-mark--queue-instagram { background: #fdf2f8; color: #9d174d; border-color: #fbcfe8; }
.queue-month-mark--queue-calendar  { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.queue-month-mark--queue-web       { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.queue-month-mark--auto-publish    { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.queue-month-empty { font-size: .66rem; color: var(--muted); font-style: italic; }

.queue-month-cell-items {
  display: grid;
  gap: .16rem;
  margin-top: auto;
}
.queue-month-dotline {
  display: flex;
  justify-content: space-between;
  gap: .3rem;
  font-size: .72rem;
  color: var(--muted);
}

/* ── Secilen gunun SUNUCU tarafinda basilan detayi ───────────────────── */
.queue-selected-day {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: .7rem;
  background: #fff;
  padding: .8rem;
}
.queue-selected-day__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.queue-selected-day__head .section-subtitle { margin: 0; }
.queue-selected-day__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.queue-selected-day__item {
  display: flex; gap: .7rem; align-items: flex-start;
  border: 1px solid #ececf3; border-radius: .55rem;
  background: #fcfcff; padding: .5rem; min-width: 0;
}
.queue-selected-day__thumb {
  flex: 0 0 auto; width: 84px; height: 84px;
  border-radius: .45rem; overflow: hidden;
  border: 1px solid var(--border); background: #f8fafc;
  display: flex; align-items: center; justify-content: center;
}
.queue-selected-day__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.queue-selected-day__thumb--empty {
  flex-direction: column; gap: .12rem; text-align: center;
  color: var(--muted); font-size: .6rem; line-height: 1.2; padding: .25rem;
  border-style: dashed;
}
.queue-selected-day__thumb--empty span { font-size: 1.2rem; }
.queue-selected-day__body { display: grid; gap: .2rem; min-width: 0; }
.queue-selected-day__pills { display: flex; flex-wrap: wrap; gap: .25rem; }
.queue-selected-day__pill {
  font-size: .64rem; font-weight: 700;
  border-radius: 999px; padding: .1rem .4rem;
  background: #eef2ff; color: #3730a3;
}
.queue-selected-day__pill--kind { background: #f1f5f9; color: #334155; }
.queue-selected-day__body .queue-calendar-title { overflow-wrap: anywhere; }
.queue-selected-day__body .queue-item-meta { overflow-wrap: anywhere; }
.queue-calendar-preview img {
  width: 56px;
  height: 56px;
  border-radius: .35rem;
  object-fit: cover;
  border: 1px solid var(--border);
  background: #f8fafc;
}
.queue-calendar-preview span {
  font-size: .75rem;
  color: var(--text-2);
  line-height: 1.3;
}
.queue-calendar-preview:hover {
  border-color: #c4b5fd;
  box-shadow: 0 2px 10px rgba(124, 58, 237, .08);
}
.queue-calendar-item--queue-instagram { border-left-color: #7c3aed; background: #f5f1ff; }
.queue-calendar-item--queue-calendar { border-left-color: #0ea5e9; background: #eef9ff; }
.queue-calendar-item--queue-web { border-left-color: #16a34a; background: #f1fff5; }
.queue-calendar-item--auto-publish { border-left-color: #f59e0b; background: #fff9ed; }
.queue-calendar-empty {
  color: var(--muted);
  font-size: .84rem;
  padding: .45rem .2rem;
}
.queue-density-compact .queue-item-meta { display: none; }
.queue-density-compact .queue-time-group[open] .queue-time-group-items {
  display: grid;
  gap: .3rem;
}
.queue-density-compact .queue-calendar-preview {
  grid-template-columns: 1fr auto;
}
.queue-density-compact .queue-calendar-preview img {
  display: none;
}
.queue-density-compact .queue-preview-label {
  font-size: .72rem;
}
.queue-day-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.queue-day-modal.is-open { display: flex; }
.queue-day-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .45);
}
.queue-day-modal__dialog {
  position: relative;
  width: min(960px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: #fff;
  border-radius: .8rem;
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .2);
}
.queue-day-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.queue-day-modal__head h3 {
  margin: 0;
  font-size: 1rem;
}
.queue-day-modal__body {
  display: grid;
  gap: .55rem;
  padding: .9rem 1rem 1rem;
}
.queue-day-modal__item {
  display: grid;
  gap: .35rem;
  border: 1px solid var(--border);
  border-radius: .55rem;
  padding: .55rem .6rem;
  background: #fff;
}
.queue-day-modal__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.queue-day-modal__kind {
  color: var(--muted);
  font-size: .75rem;
}
.queue-day-modal__title {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.queue-day-modal__title:hover { color: var(--brand-700); }
.queue-day-modal__item small {
  color: var(--muted);
  font-size: .75rem;
}
.queue-day-modal__thumb {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
}
.queue-day-modal__thumb img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: .4rem;
  border: 1px solid var(--border);
}
.queue-day-modal__thumb span {
  color: var(--brand-700);
  font-size: .75rem;
}

.queue-item-modal {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.queue-item-modal.is-open { display: flex; }
.queue-item-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .48);
}
.queue-item-modal__dialog {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: #fff;
  border-radius: .85rem;
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .22);
}
.queue-item-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.queue-item-modal__head h3 {
  margin: 0;
  font-size: 1.02rem;
}
.queue-item-modal__body {
  padding: .95rem 1rem 1.1rem;
}
.queue-item-modal__card {
  display: grid;
  gap: .7rem;
}
.queue-item-modal__thumb {
  /* Kutu GÖRÜNTÜ GELMEDEN de yer kaplar.
     `display: block` + yüksekliksiz bir `<img>` ile kutu, görsel yüklenene
     kadar (ve yüklenemezse hiç) ~2px'lik bir şeride çöküyordu; ekranda
     ince bir çizgi kalıyor, modal boş görünüyordu. Aynı taban yükseklik
     yer tutucu varyantında da geçerli. */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: .6rem;
  overflow: hidden;
  background: #f8fafc;
  min-height: 180px;
  max-height: min(56vh, 520px);
}
.queue-item-modal__thumb img {
  width: 100%;
  max-height: min(56vh, 520px);
  object-fit: contain;
  display: block;
}
/* MODAL YER TUTUCUSU — liste yer tutucusuyla AYNI görsel dil.

   Kök neden: görsel yüklenemediğinde JavaScript kaba `queue-selected-day`
   varyantını ekliyor, modal varyantını EKLEMİYORDU. `.queue-item-modal__thumb`
   kendi başına yükseklik vermediği için kutu içeriğe çöküyor ve ekranda
   ~33px'lik ince bir şerit kalıyordu. Artık iki durum da bu kuralı alıyor:
   kesikli kenarlık + ikon + metin, ve içerik yokken bile anlamlı bir oran. */
.queue-item-modal__thumb--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  text-align: center;
  color: var(--muted);
  border-style: dashed;
  /* Oran + taban: 33px'lik şerit bir daha oluşamaz. */
  aspect-ratio: 4 / 3;
  min-height: 180px;
  max-height: min(56vh, 520px);
  padding: 1rem;
  font-size: .8rem;
}
.queue-item-modal__thumb--empty span[aria-hidden="true"] { font-size: 2rem; line-height: 1; }
.queue-item-modal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.queue-item-modal__pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #f8fafc;
  padding: .2rem .55rem;
  font-size: .78rem;
  font-weight: 600;
}
.queue-item-modal__pill--kind {
  background: #f3e8ff;
  border-color: #d8b4fe;
  color: #6b21a8;
}
.queue-item-modal__text {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
}
.queue-item-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.special-days-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: .8rem;
  align-items: start;
}
.special-days-panel,
.special-days-calendar {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  padding: .75rem;
}
.special-days-calendar {
  overflow: hidden;
}
.special-days-calendar .queue-month-cell {
  min-height: 138px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.special-days-calendar .queue-month-cell-head strong {
  font-size: .98rem;
}
.special-days-calendar .queue-month-cell-head small {
  color: var(--muted);
}
.special-dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: .6rem;
  padding: .8rem;
  display: grid;
  gap: .55rem;
  margin-bottom: .65rem;
  background: #f8fafc;
}
.special-dropzone.is-over {
  border-color: #7c3aed;
  background: #f3e8ff;
}
.special-asset-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
  max-height: 60vh;
  overflow: auto;
}
.special-asset-card {
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .45rem;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: .45rem;
  align-items: center;
  background: #fff;
  cursor: grab;
}
.special-asset-card img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: .35rem;
}
.special-asset-card small {
  display: block;
  font-size: .72rem;
  color: var(--muted);
}
.special-day-cell-list {
  display: grid;
  gap: .2rem;
  max-height: 108px;
  overflow: auto;
}
.special-scheduled-item {
  /* seçim kutusu · saat · başlık · sil */
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: .35rem;
  align-items: center;
  border: 1px solid #ececf3;
  border-radius: .4rem;
  padding: .2rem .35rem;
  font-size: .74rem;
  cursor: grab;
}
.special-pick {
  margin: 0;
  cursor: pointer;
}
.special-time-btn {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.special-time-btn:hover {
  color: #7c3aed;
}
.special-bulk-bar {
  gap: .6rem;
  align-items: center;
}
.special-scheduled-item a {
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.special-delete-btn {
  border: 0;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
}
.queue-month-cell.is-over {
  outline: 2px dashed #7c3aed;
  outline-offset: 2px;
}

.special-day-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.special-day-modal.is-open {
  display: flex;
}
.special-day-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .45);
}
.special-day-modal__dialog {
  position: relative;
  width: min(960px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: #fff;
  border-radius: .8rem;
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .2);
}
.special-day-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.special-day-modal__head h3 {
  margin: 0;
  font-size: 1rem;
}
.special-day-modal__body {
  display: grid;
  gap: .55rem;
  padding: .9rem 1rem 1rem;
}
.special-day-modal__item {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr auto;
  gap: .65rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: .55rem;
  padding: .45rem;
}
.special-day-modal__thumb {
  display: block;
  border-radius: .45rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #f8fafc;
}
.special-day-modal__item img {
  width: 100%;
  max-height: min(38vh, 280px);
  object-fit: contain;
  border-radius: .4rem;
  display: block;
}
.special-day-modal__item strong {
  display: block;
  font-size: .86rem;
  line-height: 1.3;
}
.special-day-modal__item small {
  color: var(--muted);
  font-size: .74rem;
}
@media (max-width: 760px) {
  .queue-day-modal {
    align-items: flex-end;
    padding: .45rem;
  }
  .queue-day-modal__dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: .75rem .75rem .35rem .35rem;
  }
  .special-day-modal {
    align-items: flex-end;
    padding: .45rem;
  }
  .special-day-modal__dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: .75rem .75rem .35rem .35rem;
  }
  .special-day-modal__item {
    grid-template-columns: 1fr;
  }
  .special-day-modal__item .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 1500px) {
  .queue-calendar-grid {
    grid-template-columns: repeat(4, minmax(250px, 1fr));
    overflow-x: visible;
  }
}
@media (max-width: 1200px) {
  .queue-calendar-grid {
    grid-template-columns: repeat(3, minmax(230px, 1fr));
    overflow-x: visible;
  }
}
@media (max-width: 900px) {
  .dashboard-toolbar-main {
    flex-direction: column;
    align-items: stretch;
  }
  .dashboard-sort-form {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .dashboard-select {
    min-width: 0;
    width: 100%;
  }
  .dashboard-col-title {
    max-width: 240px;
  }
  .queue-calendar-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    overflow-x: visible;
  }
  .queue-calendar-topbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .queue-month-head div { font-size: .68rem; }
  .queue-month-cell,
  .queue-month-cell--blank { min-height: 108px; padding: .3rem; }
  .queue-month-cell-head strong { font-size: .82rem; }
  .queue-month-cell-head small { font-size: .64rem; }
  .queue-month-dotline { font-size: .62rem; }
  .queue-month-mark-text { display: none; }
  .queue-month-flag { font-size: .55rem; padding: .06rem .24rem; }
  .queue-selected-day__item { gap: .5rem; }
  .queue-selected-day__thumb { width: 64px; height: 64px; }
  .special-days-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .queue-calendar-grid {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }
  .queue-calendar-preview {
    grid-template-columns: 48px 1fr;
  }
  .queue-calendar-preview img {
    width: 48px;
    height: 48px;
  }
  .queue-month-head div { font-size: .63rem; }
  .queue-month-cell { min-height: 96px; }
  .queue-day-modal__dialog,
  .special-day-modal__dialog,
  .queue-item-modal__dialog {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .queue-item-modal {
    align-items: flex-end;
    padding: .45rem;
  }
  .queue-item-modal__dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: .75rem .75rem .35rem .35rem;
  }
  .queue-item-modal__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===== GLOBAL VISUAL REFINEMENTS ===== */
.page-title--public-center {
  text-align: center;
  margin-bottom: 0;
}

.scroll-toggle-btn {
  position: fixed;
  right: max(2rem, env(safe-area-inset-right));
  bottom: calc(2rem + env(safe-area-inset-bottom));
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, .24);
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  box-shadow: 0 10px 24px rgba(124, 58, 237, .35);
  z-index: 800;
  cursor: pointer;
  font-size: 1.18rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scroll-toggle-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(124, 58, 237, .4);
}

.settings-menu {
  top: calc(100% + 6px);
  transform-origin: top right;
}
.settings-menu[hidden] {
  display: none !important;
}

.dashboard-sort-form {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: .85rem;
  padding: .5rem;
}
.dashboard-list-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
}
.dashboard-list-filter {
  flex: 1;
  min-width: 0;
}
.dashboard-list-label {
  display: inline-block;
  margin-bottom: .25rem;
}
.dashboard-filter-pills--desktop {
  margin-bottom: 0;
}
.dashboard-filter-mobile-form {
  display: none;
}
.dashboard-view-switch--table-corner {
  margin-left: auto;
}
.admin-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .6rem;
}
.admin-quick-actions .btn,
.admin-quick-actions .inline-form,
.admin-quick-actions .inline-form .btn {
  width: 100%;
}
.admin-quick-actions .inline-form {
  display: block;
}

.automation-effective-grid {
  display: grid;
  gap: .65rem;
}
.automation-effective-card {
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: #fff;
  padding: .7rem .78rem;
}
.automation-effective-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .3rem;
}
.automation-effective-meta {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.48;
  overflow-wrap: anywhere;
}

.automation-digest {
  margin-top: 1rem;
  border: 1px solid #ded8f8;
  border-radius: 14px;
  padding: .95rem;
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(124, 58, 237, .11), transparent 52%),
    linear-gradient(180deg, #fff 0%, #faf8ff 100%);
  box-shadow: 0 10px 24px rgba(91, 33, 182, .08);
}
.automation-digest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}
.automation-digest-updated {
  margin: 0;
  color: #6b7280;
  font-size: .79rem;
}
.automation-digest-lead {
  margin: .35rem 0 .75rem;
  color: #4b5563;
  font-size: .84rem;
}
.automation-digest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}
.automation-day-card {
  border: 1px solid #e8e2fd;
  border-radius: 12px;
  background: #fff;
  padding: .7rem;
}
.automation-day-head h4 {
  margin: 0;
  font-size: .95rem;
  color: #2f1f66;
}
.automation-day-head p {
  margin: .1rem 0 0;
  font-size: .76rem;
  color: #7a7f8d;
}
.automation-day-items {
  margin-top: .55rem;
  display: grid;
  gap: .45rem;
}
.automation-day-item {
  border: 1px solid #ece9f8;
  border-radius: 10px;
  background: #fcfbff;
  overflow: hidden;
}
.automation-day-item-details {
  margin: 0;
}
.automation-day-item-summary-head {
  width: 100%;
  list-style: none;
  text-align: left;
  cursor: pointer;
  padding: .52rem .55rem;
  display: grid;
  gap: .2rem;
}
.automation-day-item-summary-head::-webkit-details-marker {
  display: none;
}
.automation-day-item-summary-head:focus-visible {
  outline: 2px solid rgba(124, 58, 237, .45);
  outline-offset: -2px;
}
.automation-day-item-summary-head::after {
  content: "▾";
  font-size: .9rem;
  color: #6b7280;
  justify-self: end;
  margin-top: -.1rem;
  transition: transform .2s ease;
}
.automation-day-item-details[open] .automation-day-item-summary-head::after {
  transform: rotate(180deg);
}
.automation-day-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.automation-day-item-top strong {
  font-size: .82rem;
  color: #1f2937;
}
.automation-day-item-summary {
  margin: 0;
  font-size: .79rem;
  color: #374151;
  line-height: 1.4;
  display: block;
}
.automation-day-item-meta {
  margin: 0;
  font-size: .74rem;
  color: #6b7280;
  line-height: 1.35;
}
.automation-day-item-panel {
  border-top: 1px dashed #e8e2fb;
  margin: 0 .55rem .52rem;
  padding-top: .4rem;
  display: grid;
  gap: .2rem;
}
@media (max-width: 980px) {
  .automation-digest-grid {
    grid-template-columns: 1fr;
  }
}

.users-table td[data-label] {
  position: relative;
}

.gemini-filter-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.gemini-filter-mobile {
  display: none;
}
.gemini-mobile-list {
  display: none;
}
.gemini-mobile-card {
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: #fff;
  padding: .75rem;
  margin-bottom: .6rem;
}
.gemini-mobile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}
.gemini-mobile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-top: .45rem;
}
.gemini-mobile-actions .gemini-share-form,
.gemini-mobile-actions .btn {
  width: 100%;
}

.queue-calendar-topbar {
  border: 1px solid var(--border);
  border-radius: .85rem;
  padding: .7rem .8rem;
  background: #fff;
}
.queue-channel-filter {
  border: 1px solid var(--border);
  border-radius: .85rem;
  padding: .65rem .75rem;
  background: #fff;
}
.queue-channel-filter-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.queue-channel-filter-mobile {
  display: none;
}
.queue-calendar-mobile-summary {
  display: none;
}
.queue-mobile-day-card {
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: #fff;
  color: var(--text);
  text-align: center;
  padding: .8rem .7rem;
  display: grid;
  gap: .2rem;
  cursor: pointer;
}
.queue-mobile-day-card strong {
  font-size: .9rem;
}
.queue-mobile-day-card span {
  color: var(--muted);
  font-size: .8rem;
}
.queue-mobile-day-card:hover {
  border-color: #c4b5fd;
  background: #faf7ff;
}

@media (max-width: 900px) {
  .dashboard-list-controls {
    flex-direction: column;
  }
  .dashboard-view-switch--table-corner {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
}
@media (max-width: 768px) {
  .settings-menu-wrap {
    width: 100%;
  }
  #site-nav .settings-menu-wrap--nav .settings-menu {
    margin-top: .4rem;
    border-radius: 12px;
    border: 1px solid #d8def0;
    overflow: hidden;
  }
  .dashboard-filter-pills--desktop {
    display: none;
  }
  .dashboard-filter-mobile-form {
    display: grid;
    gap: .3rem;
  }
  .dashboard-view-switch--table-corner .filter-pill {
    flex: 1;
    text-align: center;
  }
  .table-scroll--mobile-cards {
    overflow-x: visible;
  }
  .mobile-card-table {
    border: 0;
    background: transparent;
  }
  .mobile-card-table thead {
    display: none;
  }
  .mobile-card-table,
  .mobile-card-table tbody,
  .mobile-card-table tr,
  .mobile-card-table td {
    display: block;
    width: 100%;
  }
  .mobile-card-table tr {
    border: 1px solid var(--border);
    border-radius: .85rem;
    padding: .55rem .65rem;
    margin-bottom: .65rem;
    background: #fff;
    box-shadow: var(--shadow-xs);
  }
  .mobile-card-table td {
    border-bottom: 1px dashed #e5e7eb;
    padding: .55rem 0;
  }
  .mobile-card-table td:last-child {
    border-bottom: 0;
    padding-bottom: .2rem;
  }
  .mobile-card-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .18rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .01em;
  }
  .mobile-card-table .inline-form,
  .mobile-card-table td[data-label*="Aksiyon"] form {
    display: block;
    margin-top: .38rem;
  }
  .mobile-card-table td[data-label*="Aksiyon"] .btn,
  .mobile-card-table td[data-label="Detay"] .btn {
    width: 100%;
    justify-content: center;
  }
  .mobile-card-table-empty {
    color: var(--muted);
  }
  .users-table thead {
    display: none;
  }
  .users-table,
  .users-table tbody,
  .users-table tr,
  .users-table td {
    display: block;
    width: 100%;
  }
  .users-table tr {
    border: 1px solid var(--border);
    border-radius: .8rem;
    padding: .5rem .6rem;
    margin-bottom: .55rem;
    background: #fff;
  }
  .users-table td {
    border-bottom: 1px dashed #e5e7eb;
    padding: .5rem 0;
  }
  .users-table td:last-child {
    border-bottom: 0;
    padding-bottom: .2rem;
  }
  .users-table td::before {
    content: attr(data-label);
    display: block;
    font-size: .72rem;
    color: var(--muted);
    margin-bottom: .15rem;
    font-weight: 700;
  }
  .users-table .au-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .gemini-filter-pills {
    display: none;
  }
  .gemini-filter-mobile {
    display: grid;
    gap: .3rem;
    width: 100%;
  }
  .gemini-table-wrap {
    display: none;
  }
  .gemini-mobile-list {
    display: block;
    margin-top: .65rem;
  }
  .gemini-mobile-actions {
    grid-template-columns: 1fr;
  }
  .gemini-mobile-actions .btn {
    justify-content: center;
  }
  .queue-channel-filter-pills {
    display: none;
  }
  .queue-channel-filter-mobile {
    display: grid;
    gap: .3rem;
    width: 100%;
  }
  .queue-day-picker {
    display: none;
  }
  .queue-calendar-mobile-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    margin: .65rem 0 .45rem;
  }
  .queue-calendar-week,
  .queue-calendar-month {
    margin-top: .35rem;
  }
  .queue-calendar-grid,
  .queue-month-head,
  .queue-month-grid {
    display: none;
  }
  .queue-calendar-nav {
    width: 100%;
    justify-content: space-between;
  }
  .queue-calendar-nav strong {
    min-width: 0;
  }
  .table-scroll .data-table {
    font-size: .8rem;
  }
}
@media (max-width: 460px) {
  .queue-calendar-mobile-summary {
    grid-template-columns: 1fr;
  }
  .scroll-toggle-btn {
    right: max(1rem, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
  }
}

/* ===== Mobile Responsive Hardening ===== */
html, body {
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
body {
  min-width: 0;
}
.main-content,
.main-content > .container,
.page-head,
.upload-layout,
.event-grid,
.event-card,
.field-group,
.upload-card,
.dashboard-toolbar,
.dashboard-section {
  min-width: 0;
}

.mobile-nav-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--mobile-header-offset, 64px);
  bottom: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 95;
}
body.mobile-nav-open {
  /* Konumu koruyan kilit: `top` JS tarafından -scrollY olarak veriliyor.
     Yalnızca overflow:hidden vermek uzun gövdede sayfayı başa zıplatıyordu. */
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  /* Başlık aşağıdaki kuralla akıştan çıkıyor; aynı yükseklikte iç boşluk,
     arkadaki içeriğin menü açılırken yukarı zıplamasını engeller. */
  padding-top: var(--mobile-header-offset, 64px);
}
body.mobile-nav-open .site-header {
  /* Gövdeye `position: fixed` verilince başlıktaki `position: sticky` iptal
     oluyor: yapışkan konum bir kaydırma kabı ister, kap kalmayınca başlık
     statik yerine — yani -scrollY noktasına — düşüp ekran dışına çıkıyordu.
     Menü ise başlığın kilitten ÖNCE ölçülen alt kenarına sabitlendiği için
     üstte başlık boyunda boş bir şerit kalıyordu (sayfa ne kadar aşağıdaysa
     o kadar belirgin). Menü açıkken başlık da sabit tutulur. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 160;
}

.scroll-toggle-btn {
  bottom: calc(2rem + env(safe-area-inset-bottom));
}
.scroll-toggle-btn.is-lifted {
  bottom: calc(6rem + env(safe-area-inset-bottom));
}

/* SABİT KAYDIRMA DÜĞMESİ DAR EKRANDA BASILMAZ.
   -------------------------------------------------------------------
   Ölçüm (Chromium, gerçek eleman sınırları): 320/375/390 px'te düğme
   kart bağlantısının ve "Detay" CTA'sının ÜZERİNE biniyordu. Dar
   ekranda kartlar tam genişlikte; düğmenin sığabileceği bir kenar
   boşluğu YOK, yani konum ayarıyla çözülemiyor (`right: 1rem` zaten
   kartın içinde kalıyor).

   600 px ve üzerinde kutu içerik sütununun DIŞINDA kalıyor ve hiçbir
   şeyi örtmüyor (ölçüldü: 600/768/1024'te 0 örtüşme), bu yüzden
   masaüstü davranışı DEĞİŞMİYOR.

   Kaybolan yetenek telafi ediliyor: mobil tarayıcıların kendi hızlı
   kaydırması ve durum çubuğuna dokunma zaten aynı işi yapıyor. Örtüşen
   bir dokunma hedefi bırakmak, kullanıcının yanlışlıkla başka bir
   karta gitmesi demekti. */
@media (max-width: 599px) {
  .scroll-toggle-btn {
    display: none !important;
  }
}

.type-chip,
.filter-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.phone-prefix-row > .field-input {
  min-width: 0;
}
.upload-drop-content {
  padding: 1.5rem .9rem;
}
.submit-validation-hint {
  width: 100%;
  margin-top: .2rem;
}

@media (max-width: 768px) {
  .site-header {
    position: sticky;
    top: 0;
  }
  .container--header {
    flex-wrap: nowrap;
    align-items: center;
    gap: .45rem;
  }
  .brand {
    min-width: 0;
    flex: 1 1 auto;
  }
  .brand-text {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(.92rem, 3.5vw, 1.1rem);
  }
  .nav-toggle {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    margin-left: auto;
  }

  .site-nav {
    display: none;
    /* Mutlak konumlandırma, menüyü başlığın içine bağlıyordu: sayfa aşağıdayken
       gövdeye kaydırma kilidi uygulanınca yapışkan başlık belge başına dönüyor
       ve menü ekran dışında kalıyordu — kullanıcı yalnızca kararan arka planı
       görüyordu. Sabit konumlandırma menüyü her zaman görünür alanda tutar;
       üst boşluk açılışta başlığın gerçek alt kenarından hesaplanır. */
    position: fixed;
    top: var(--mobile-nav-top, 4.6rem);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(75dvh, 520px);
    border-radius: 16px;
    background:
      linear-gradient(165deg, rgba(35, 25, 93, .98) 0%, rgba(67, 41, 148, .98) 55%, rgba(92, 43, 144, .98) 100%);
    border: 1px solid rgba(196, 181, 253, .42);
    transform: none;
    opacity: 1;
    pointer-events: auto;
    z-index: 150;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    box-shadow: 0 14px 30px rgba(15, 23, 42, .32);
  }
  .site-nav.is-open {
    display: flex;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav .nav-link,
  .site-nav > a,
  .site-nav .settings-toggle {
    min-height: 44px;
    width: 100%;
    justify-content: flex-start;
    touch-action: manipulation;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .06);
  }
  .site-nav > a:active,
  .site-nav .nav-link:active,
  .site-nav .settings-toggle:active {
    background: rgba(255, 255, 255, .14);
  }
  /* AKTİF SAYFA — mobil.
     Kök neden: yukarıdaki `.site-nav .nav-link` (özgüllük 0,2,0) tek sınıflı
     `.nav-link--active` (0,1,0) kuralından hem daha güçlü hem daha SONRA
     geliyordu; aktif bağlantının zemini ve kenarlığı eziliyor, hamburger
     menüde hangi sayfada olduğunuz görünmüyordu. Aynı özgüllük düzeyinde
     ve aynı medya sorgusu içinde yeniden bildiriyoruz.

     Durum TEK BAŞINA renkle anlatılmıyor: zemin + kalın yazı + sol kenar
     şeridi birlikte çalışıyor, böylece renk ayrımını görmeyen kullanıcı da
     aktif satırı ayırt ediyor. `aria-current="page"` şablonda basılıyor. */
  .site-nav .nav-link--active,
  .site-nav > a.nav-link--active {
    background: rgba(255, 255, 255, .26);
    border-color: rgba(255, 255, 255, .55);
    font-weight: 700;
    box-shadow: inset 3px 0 0 0 #fff;
  }
  .site-nav .nav-divider {
    width: 100%;
    height: 1px;
    margin: .2rem 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  }
  .site-nav.is-open,
  .site-nav.is-open * {
    pointer-events: auto;
  }
  #site-nav .settings-menu-wrap--nav {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  /* Menünün mobil davranışını belirleyen KURAL BUDUR: aynı seçici yukarıda iki
     kez daha geçiyor (bkz. ~306 ve ~5250. satırlar) ve sonuncusu kazanıyor. */
  #site-nav .settings-menu-wrap--nav .settings-menu {
    position: static !important;
    inset: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    transform-origin: top left;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    /* Panelin kendi max-height + overflow'u, zaten kayan menünün içinde İKİNCİ
       bir kaydırma kutusu oluşturuyordu: 9 maddenin en çok 6'sı görünüyor,
       "Çıkış"a inmek için önce menüyü sonra paneli kaydırmak gerekiyordu; panel
       kesildiğinde ise düğmeye basınca hiçbir şey açılmamış gibi duruyordu.
       Yükseklik sınırı yok: panel menünün tek kaydırma yüzeyinin parçası. */
    margin-top: .45rem;
    box-shadow: none;
    animation: none !important;
  }

  .events-carousel {
    padding-left: .15rem;
    padding-right: .15rem;
  }
  .events-carousel-nav {
    width: 2rem;
    height: 2rem;
    top: 44%;
    background: rgba(255, 255, 255, .92);
  }
  .events-carousel-nav--prev {
    left: .25rem;
  }
  .events-carousel-nav--next {
    right: .25rem;
  }

  .type-filter {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: .25rem;
    margin-right: -1rem;
    padding-right: 1rem;
    -webkit-overflow-scrolling: touch;
  }
  .type-filter::-webkit-scrollbar {
    display: none;
  }

  .upload-sidebar {
    position: static !important;
    top: auto !important;
  }
  .upload-submit-row {
    align-items: stretch;
  }
  .upload-submit-row .btn {
    width: 100%;
    justify-content: center;
  }
  .upload-preview img {
    aspect-ratio: 4 / 5;
    max-height: none;
    object-fit: contain;
  }
  .ig-live-post-media { aspect-ratio: 4 / 5; }
  .ig-live-story-media { aspect-ratio: 9 / 16; max-height: 64vh; }
  .ig-live-media-placeholder {
    min-height: 160px;
  }

  .toast-container {
    left: 16px;
    right: 16px;
    bottom: auto;
    top: calc(74px + env(safe-area-inset-top));
  }
  .toast {
    width: calc(100vw - 32px);
    max-width: none;
  }

  .auth-page {
    min-height: calc(100dvh - 1rem);
    align-items: flex-start;
    padding: 1rem 0 1.2rem;
  }
  .auth-card {
    margin-top: .2rem;
    padding: 1.5rem 1.2rem;
  }

  .queue-calendar-topbar {
    gap: .45rem;
  }
  .queue-calendar-nav strong {
    text-align: center;
    overflow-wrap: anywhere;
  }
  .admin-quick-actions {
    grid-template-columns: 1fr;
  }
  .dashboard-list-controls {
    gap: .55rem;
  }
  .dashboard-view-switch--table-corner {
    width: 100%;
    justify-content: stretch;
  }
  .dashboard-view-switch--table-corner .filter-pill {
    flex: 1 1 0;
    text-align: center;
  }

  .dashboard-events-table thead {
    display: none;
  }
  .dashboard-events-table,
  .dashboard-events-table tbody,
  .dashboard-events-table tr,
  .dashboard-events-table td {
    display: block;
    width: 100%;
  }
  .dashboard-events-table tr {
    border: 1px solid var(--border);
    border-radius: .8rem;
    padding: .55rem .65rem;
    margin-bottom: .6rem;
    background: #fff;
  }
  .dashboard-events-table td {
    border-bottom: 1px dashed #e5e7eb;
    padding: .42rem 0;
  }
  .dashboard-events-table td:last-child {
    border-bottom: 0;
    padding-bottom: .15rem;
  }
  .dashboard-events-table td::before {
    display: block;
    margin-bottom: .12rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
  }
  .dashboard-events-table td:nth-child(1)::before { content: "ID"; }
  .dashboard-events-table td:nth-child(2)::before { content: "Başlık"; }
  .dashboard-events-table td:nth-child(3)::before { content: "Gönderen"; }
  .dashboard-events-table td:nth-child(4)::before { content: "Tür"; }
  .dashboard-events-table td:nth-child(5)::before { content: "Etkinlik"; }
  .dashboard-events-table td:nth-child(6)::before { content: "Durum"; }
  .dashboard-events-table td:nth-child(7)::before { content: "Eklenme"; }
  .dashboard-events-table td:nth-child(8)::before { content: "Yayın"; }
  .dashboard-events-table td:nth-child(9)::before { content: "Kaynak"; }
  .dashboard-events-table td:nth-child(10)::before { content: "İşlem"; }

  .template-board .main-content {
    padding-top: 1rem;
  }
}

@media (max-width: 430px) {
  .phone-prefix-row {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: .45rem;
  }
  .public-meta-list {
    --meta-icon-size: 1.7rem;
    --meta-label-w: 5.9rem;
  }
  .public-meta-list li {
    font-size: .875rem;
  }
}

@media (max-width: 360px) {
  .events-carousel-nav {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 1.05rem;
  }
  .brand-mark {
    width: 30px;
    height: 30px;
  }
}

/* ===== Footer refresh (modern, architecture-aligned) ===== */
.site-footer {
  background:
    radial-gradient(140% 220% at 10% -20%, #f3edff 0%, #fbfaff 44%, #ffffff 88%);
  border-top: 1px solid #ebe5ff;
  padding-bottom: env(safe-area-inset-bottom);
}
.container--footer {
  padding-top: 1.05rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.site-footer-main {
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1rem 1.2rem;
  align-items: center;
  border: 1px solid #e7defc;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(250, 247, 255, .95) 100%);
  box-shadow: 0 10px 26px rgba(124, 58, 237, .09);
  padding: .85rem 1rem;
}
.site-footer-brand {
  min-width: 0;
}
.site-footer-title {
  margin: 0;
  font-size: .97rem;
  font-weight: 760;
  color: #312e81;
  line-height: 1.3;
}
.site-footer-text {
  margin: .15rem 0 0;
  color: #6b7280;
  font-size: .81rem;
  line-height: 1.45;
}
.site-footer-links {
  max-width: 100%;
  display: grid;
  gap: .14rem;
  justify-items: flex-end;
}
.site-footer-link {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .83rem;
  font-weight: 620;
  color: #5b21b6;
  text-decoration: none;
  line-height: 1.25;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.site-footer-link:hover {
  color: #4c1d95;
  text-decoration: underline;
}
.site-footer-copy {
  margin: .58rem .1rem 0;
  color: #667085;
  font-size: .79rem;
  text-align: center;
}
.site-footer-legal {
  margin: .2rem .1rem 0;
  color: #8a94a8;
  font-size: .74rem;
  text-align: center;
  line-height: 1.35;
}

@media (max-width: 768px) {
  .site-footer-main {
    grid-template-columns: 1fr;
    gap: .7rem;
    padding: .8rem .85rem;
  }
  .site-footer-title,
  .site-footer-text {
    text-align: center;
  }
  .site-footer-links {
    justify-items: center;
    text-align: center;
    gap: .12rem;
  }
  .site-footer-link {
    font-size: .82rem;
    line-height: 1.25;
  }
}

@media (max-width: 430px) {
  .site-footer-main {
    border-radius: 14px;
    padding: .75rem .72rem;
  }
  .site-footer-title {
    font-size: .92rem;
  }
  .site-footer-text,
  .site-footer-link {
    font-size: .79rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===========================================================================
   Dinamik başvuru formları

   Bu sayfaların stilleri BURADA tanımlanır, şablonlarda `style="..."` ile
   değil: `SecurityHeadersMiddleware` `style-src 'self'` gönderdiği için
   inline stil öznitelikleri tarayıcıda hiç uygulanmaz. Bot tuzağının
   gizlenmesi de buna bağlı olduğundan bu bir güvenlik gereğidir.
   =========================================================================== */

/* Bot tuzağı: gerçek kullanıcıya görünmez, ekran okuyucudan da gizli. */
.form-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Yöneticinin girdiği çok satırlı metinler satır sonlarını korur. */
.form-prose { white-space: pre-line; }

/* Geniş tablolar YALNIZ gerektiğinde kendi içinde yatay kayar;
   sayfa gövdesi asla yatay kaymaz. */
.form-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------------
   BAŞVURU DETAYI — CEVAP TABLOSU

   Kusur: şablon `class="table"` kullanıyordu ve bu dosyada `.table` diye bir
   kural YOKTU. Tablo tümüyle stilsiz basılıyor, uzun soru metinleri "Tür" ve
   "Cevap" sütunlarının üzerine taşıyordu. Şablon artık yönetim sözleşmesi
   olan `.data-table`ı kullanıyor; aşağıdaki sınıf yalnız SÜTUN GENİŞLİKLERİNİ
   ve kırılma davranışını ekliyor.

   `table-layout: fixed` şart: otomatik yerleşimde en uzun hücre sütunu
   şişirip diğerlerini eziyor. Sabit yerleşimde genişlikler aşağıdaki
   yüzdelerle belirlenir ve içerik hücrenin İÇİNDE kırılır.
   --------------------------------------------------------------------------- */
.form-answers-table {
  table-layout: fixed;
  width: 100%;
  min-width: 34rem; /* dar ekranda sarmalayıcı yatay kaydırır */
}
.form-answers-table th,
.form-answers-table td {
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.form-answers-table th:nth-child(1),
.form-answers-table td:nth-child(1) { width: 42%; }
.form-answers-table th:nth-child(2),
.form-answers-table td:nth-child(2) { width: 16%; }
.form-answers-table th:nth-child(3),
.form-answers-table td:nth-child(3) { width: 42%; }
/* Tür sütunu kısa kodlar taşır; satır ortasında kırılmasın. */
.form-cell-type { white-space: nowrap; }

/* Kimlik bilgileri: etiket/değer hizası tarayıcı varsayılanına bırakılmaz.
   Varsayılan `dd` girintisi uzun değerlerde etiketten kopuk görünüyordu. */
.form-identity-list {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  gap: .35rem .9rem;
  margin: 0;
}
.form-identity-list dt {
  margin: 0;
  font-weight: 600;
  color: var(--text-2, #555);
}
.form-identity-list dd {
  margin: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  /* Telefonda etiket ve değer alt alta; iki sütun sıkışıp okunmaz oluyordu. */
  .form-identity-list { grid-template-columns: 1fr; gap: .15rem; }
  .form-identity-list dd { margin-bottom: .5rem; }
  /* Cevap tablosu kendi içinde yatay kayar; sayfa gövdesi ASLA kaymaz. */
  .form-answers-table { min-width: 30rem; font-size: .8rem; }
  .form-answers-table th,
  .form-answers-table td { padding: .45rem .5rem; }
  .form-cell-type { white-space: normal; }
}

/* Uzun PII ve serbest cevaplar hücreyi taşırmaz. */
.form-cell-wrap {
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 40ch;
}

.form-preview-box {
  overflow-x: auto;
  border: 1px solid var(--border, #e3e3e3);
  border-radius: var(--r-sm, 8px);
  padding: .5rem;
}
.form-preview-box pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.form-period-card { margin-bottom: 1rem; }

/* ---------------------------------------------------------------------------
   Kaynak gönderi incelemesi (Paket 1)

   Yönetici burada ÖZGÜN görseli bozulmadan görmeli, açıklamayı ve kaynak
   bağlantısını okuyabilmeli, onay ile reddi karıştırmamalı. Üç ölçüde de
   (375 / 768 / 1440) yatay taşma olmamalı: uzun permalink ve açıklama
   kırılır, geniş medya kendi kabında kayar.
--------------------------------------------------------------------------- */
.source-post-review { max-width: 100%; }

.source-post-media {
  display: flex;
  gap: .75rem;
  margin-top: .85rem;
  /* Carousel geniş olabilir: sayfa değil, bu kap kayar. */
  overflow-x: auto;
  padding-bottom: .35rem;
}
.source-post-media-item {
  margin: 0;
  flex: 0 0 auto;
  max-width: min(320px, 100%);
}
.source-post-media-item img {
  display: block;
  width: 100%;
  height: auto;          /* Özgün en-boy oranı korunur, görsel ezilmez. */
  max-width: 100%;
  border-radius: var(--r-sm, 8px);
  border: 1px solid var(--border, #e3e3e3);
  background: #f7f7f8;
}
.source-post-media-item figcaption { margin-top: .35rem; }

.source-post-caption {
  margin: .5rem 0 0;
  padding: .65rem .75rem;
  border: 1px solid var(--border, #e3e3e3);
  border-radius: var(--r-sm, 8px);
  background: #fafafa;
  white-space: pre-wrap;     /* Satır sonları korunur; kaynak satırı görünür. */
  word-break: break-word;
  overflow-wrap: anywhere;
  font: inherit;
  max-width: 100%;
}

.source-post-permalink {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* Onay ile reddi görsel olarak AYIRIR: yan yana değil, aralarında belirgin
   boşlukla; reddet ikincil ve kırmızı çerçeveli kalır. */
.source-post-decision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border, #e3e3e3);
}
.source-post-decision form { margin: 0; }
/* Ozgullugu `.source-post-decision form` ile ESIT tutulur: aksi halde o kural
   `margin: 0` ile bu itmeyi eziyor ve reddet, onayin hemen yanina yapisiyordu. */
.source-post-decision .source-post-decision-reject { margin-left: auto; }

@media (max-width: 640px) {
  .source-post-media-item { max-width: 100%; }
  .source-post-decision { gap: .75rem; }
  /* Dar ekranda iki eylem tam genişlik ve alt alta: yanlış tıklama azalır. */
  .source-post-decision form { width: 100%; }
  .source-post-decision .source-post-decision-reject { margin-left: 0; }
  .source-post-decision .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Kaynak gönderi: tarih kanıtı, hikâye zamanı ve düzeltme formları
   (Paket 1 revizyonu)

   Yönetici onay vermeden ÖNCE üç şeyi görmeli: hangi tarihin bulunduğunu,
   bunun açıklamadaki hangi bölüme dayandığını ve nihai hikâye zamanını.
   Uyarılar saklanmaz; dar ekranda da tam görünür.
--------------------------------------------------------------------------- */
.source-post-date,
.source-post-story {
  margin-top: .5rem;
  padding: .65rem .75rem;
  border: 1px solid var(--border, #e3e3e3);
  border-radius: var(--r-sm, 8px);
  background: #fafafa;
  max-width: 100%;
}
/* Uyarı hâli sessiz kalmamalı: kenar rengi ve zemin belirgin değişir. */
.source-post-date.is-warning,
.source-post-story.is-warning {
  border-color: #f0b4b4;
  background: #fff7f7;
}

.source-post-caption--source {
  background: #f4f6f8;
  color: #333;
}

/* Açıklamadaki dayanak bölümü: alıntı olduğu görsel olarak da belli olsun. */
.source-post-evidence {
  background: #fff3bf;
  padding: .1rem .35rem;
  border-radius: 4px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Yönetici düzeltmesi sistem sonucuymuş gibi görünmemeli. */
.source-post-admin-tag {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: #ede9fe;
  color: #5b21b6;
  font-size: .8em;
  font-weight: 600;
}

.source-post-story-time { font-weight: 700; }

/* Onay kapalıyken düğme AÇIK GİBİ görünmemeli: gradient dolgu devre dışı
   halde de canlı kalıyordu, yönetici tıklanabilir sanıyordu. */
.source-post-decision .btn:disabled,
.source-post-decision .btn[disabled] {
  background: #e5e7eb;
  background-image: none;
  border-color: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 1;
}

.source-post-corrections {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border, #e3e3e3);
}
.source-post-correction-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0;
  min-width: 0;
}
.source-post-correction-form label {
  font-size: .85em;
  font-weight: 600;
  white-space: nowrap;
}
.source-post-correction-form input { min-width: 0; }

@media (max-width: 640px) {
  /* Dar ekranda her düzeltme formu tam genişlik ve alt alta okunur kalır. */
  .source-post-corrections { gap: 1.25rem; }
  .source-post-correction-form { width: 100%; }
  .source-post-correction-form input { flex: 1 1 100%; }
  .source-post-correction-form .btn { width: 100%; }
}

/* ============================================================
   Başvuru formu hero/banner — Kitap Kulübü ve diğer formlar
   ------------------------------------------------------------
   Google Forms görünümü kopyalanmadı: sitenin mor-fuşya degradesi ve
   mevcut `site-logo.png` kullanılıyor, yeni ikili görsel üretilmedi.
   Banner hem açık formda hem kapalı ekranda basılır.
   ============================================================ */
.form-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  margin: 0 0 20px;
  border-radius: 16px;
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: 0 8px 24px rgba(124, 58, 237, .22);
}

.form-hero__logo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(255, 255, 255, .16);
  padding: 6px;
}

.form-hero__text { min-width: 0; }

.form-hero__brand,
.form-hero__kicker {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* Beyaz üstünde okunurluk için tam opak değil ama AA sınırının üstünde. */
  color: rgba(255, 255, 255, .92);
}

.form-hero__title {
  margin: 4px 0 2px;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #fff;
  overflow-wrap: anywhere;
}

.form-card--closed .form-prose { white-space: pre-line; }

.form-inline-link {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: underline;
  /* Dokunma hedefi cümle içi bağlantı için DOLGUYLA büyütülür. Satır içi
     bir öğeye `min-height: 44px` vermek satır kutusunu bozar ve paragrafı
     okunmaz hâle getirirdi; dolgu ise tıklama alanını satır akışını
     bozmadan genişletir. Ekrandaki asıl 44px'lik hedef kapalı ekrandaki
     Instagram düğmesidir. */
  padding: 10px 4px;
  margin: 0 -4px;
  border-radius: 6px;
}

.form-inline-link:hover,
.form-inline-link:focus-visible { background: var(--primary-muted); }

@media (max-width: 560px) {
  .form-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
  }
  .form-hero__logo { width: 56px; height: 56px; }
  .form-hero__title { font-size: 1.35rem; }
}

/* ── Başvuru formu yönetimi: durum rozetleri ───────────────── */
.status-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
}

.status-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
}

/* Durum YALNIZ renkle anlatılmaz: rozetin metni de durumu söyler. */
.status-pill--ok {
  background: var(--success-soft);
  border-color: var(--success-border);
  color: #065f46;
}

.status-pill--off {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-2);
}

/* ============================================================
   Paylaşım Takvimi — gün detayı sayfalaması ve saat düzenleme
   ============================================================ */
.queue-selected-day__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.queue-selected-day__pill--locked {
  background: var(--warn-soft);
  border: 1px solid var(--warn-border);
  color: #92400e;
}

.queue-calendar-more {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px dashed var(--border);
  background: var(--surface-2);
  color: var(--primary-dark);
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.queue-item-modal__form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.queue-item-modal__form-row { display: flex; flex-direction: column; gap: 6px; }

.queue-item-modal__label { font-weight: 600; color: var(--text); }

/* Dokunma hedefi: mobilde de rahat seçilebilsin. */
.queue-item-modal__input {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  width: 100%;
  max-width: 100%;
}

.queue-item-modal__input:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 1px;
}

.queue-item-modal__input:disabled {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}

.queue-item-modal__form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.queue-item-modal__form-actions .btn { min-height: 44px; }

/* Mobil gün kartı artık gerçek bir bağlantı. */
a.queue-mobile-day-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
}

a.queue-mobile-day-card.is-selected {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 2px var(--primary-muted);
}

/* Kart klavyeyle seçilebiliyor: odak GÖRÜNÜR olmalı. */
.queue-calendar-item:focus-visible,
.queue-selected-day__item:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
}

/* ============================================================
   Instagram Yönetimi ortak kabuğu
   ============================================================ */
.ig-shell {
  margin: 0 0 22px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.ig-shell__eyebrow {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.ig-shell__head .page-title { margin: 4px 0 6px; }
.ig-shell__head .page-lead { margin: 0; }

.ig-shell__status {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
}

.ig-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--surface-2);
}

.ig-status__label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.ig-status__value { font-weight: 700; color: var(--text); }
.ig-status__detail { font-size: .8rem; color: var(--text-2); }

/* Renk YALNIZ ikinci işaret; değer metni durumu zaten söylüyor. */
.ig-status--ok      { border-left-color: var(--success); }
.ig-status--off     { border-left-color: var(--faint); }
.ig-status--warn    { border-left-color: var(--warn); }
.ig-status--unknown { border-left-color: var(--accent); }

.ig-shell__tabs { margin-top: 16px; }

.ig-tablist {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0 0 4px;
  /* Mobilde SAYFA yatay kaymaz; şerit KENDİ İÇİNDE kayar. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.ig-tab {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}

.ig-tab:hover { background: var(--primary-soft); color: var(--primary-dark); }

.ig-tab:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
}

/* Aktif sekme renkten BAĞIMSIZ olarak da ayırt edilir: kalın çerçeve. */
.ig-tab.is-active {
  background: var(--primary-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}

@media (max-width: 560px) {
  .ig-shell { padding: 14px; }
  .ig-shell__status { grid-template-columns: 1fr; }
}

/* ============================================================
   Instagram konuşma detayı — balonlar ve yanıt alanı
   ============================================================ */
.ig-peer { display: flex; align-items: center; gap: 14px; }

.ig-peer__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
}

.ig-peer__name { margin: 0 0 8px; font-size: 1.15rem; overflow-wrap: anywhere; }

.ig-peer__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.status-pill--warn {
  background: var(--warn-soft);
  border-color: var(--warn-border);
  color: #92400e;
}

.ig-thread-tools { margin-bottom: 12px; }

.ig-thread {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.ig-bubble {
  max-width: min(680px, 88%);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}

/* Hizalama ve renk YARDIMCI işaret; yön metni her balonda yazılı. */
.ig-bubble--in { align-self: flex-start; border-bottom-left-radius: 4px; }

.ig-bubble--out {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--primary-soft);
  border-color: var(--primary-muted);
}

.ig-bubble__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: .78rem;
  color: var(--muted);
}

.ig-bubble__dir { font-weight: 700; color: var(--text-2); }
.ig-bubble__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ig-bubble__method { margin: 8px 0 0; font-size: .8rem; color: var(--text-2); }
.ig-bubble__detail { margin-top: 6px; font-size: .82rem; }
.ig-bubble__detail summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }

.ig-decision { margin: 6px 0 0 18px; padding: 0; color: var(--text-2); }

.ig-reply__row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ig-reply__label { font-weight: 600; color: var(--text); }

.ig-reply__select,
.ig-reply__textarea {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.ig-reply__textarea { min-height: 128px; resize: vertical; }

.ig-reply__select:focus-visible,
.ig-reply__textarea:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 1px;
}

.ig-reply__actions .btn { min-height: 44px; }

/* ============================================================
   Instagram — form alanları, çipler ve boş durum
   ============================================================ */
.ig-canned-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ig-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ig-field--wide { grid-column: 1 / -1; }
.ig-field__label { font-weight: 600; color: var(--text); }

/* Dokunma hedefi: her kontrol en az 44px. */
.ig-field__control {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.ig-field__control--tall { min-height: 150px; resize: vertical; }

.ig-field__control:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 1px;
}

.ig-field__help { font-size: .82rem; color: var(--muted); }

.ig-canned-form__actions { grid-column: 1 / -1; }
.ig-canned-form__actions .btn { min-height: 44px; }

.ig-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
}

.ig-chip {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid var(--primary-muted);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: .82rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.empty-state {
  padding: 28px 20px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  text-align: center;
}

.empty-state__title { margin: 0 0 6px; font-weight: 700; color: var(--text); }
.empty-state__text { margin: 0; color: var(--text-2); }

@media (max-width: 720px) {
  .ig-canned-form { grid-template-columns: 1fr; }
}

/* ── Instagram yapay zekâ ayarları ─────────────────────────── */
.ig-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.ig-settings-grid .ig-field--wide { grid-column: 1 / -1; }

.ig-advanced {
  margin: 4px 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}

.ig-advanced__summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.ig-field__control--xtall { min-height: 320px; }

.ig-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.ig-settings-actions .btn { min-height: 44px; }

@media (max-width: 720px) {
  .ig-settings-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Dokunma hedefleri — BU PAKETİN sayfaları
   ------------------------------------------------------------
   Sitenin paylaşılan `.btn` (38px) ve `.btn-sm` (31px) ölçüleri
   DEĞİŞTİRİLMEDİ: onları global olarak büyütmek bütün panelin
   düzenini etkileyen ayrı bir iş. Burada yalnız bu paketin teslim
   ettiği ekranlardaki kontroller 44px'e çıkarılıyor.
   ============================================================ */

/* Instagram yönetim kabuğu taşıyan sayfalar. `:has()` desteklenmeyen
   eski tarayıcıda kural düşer ve ölçüler bugünküyle aynı kalır. */
main:has(.ig-shell) .btn,
main:has(.ig-shell) .btn-sm,
main:has(.ig-shell) select,
main:has(.ig-shell) input[type="text"],
main:has(.ig-shell) input[type="number"],
main:has(.ig-shell) input[type="password"] {
  min-height: 44px;
}

/* Onay kutusu KÜÇÜK kalır ama etiketin tamamı tıklanabilir hedeftir. */
main:has(.ig-shell) label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

main:has(.ig-shell) input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* Kitap Kulübü açık form + kapalı ekran. */
main:has(.form-hero) .btn,
main:has(.form-hero) input,
main:has(.form-hero) select,
main:has(.form-hero) textarea {
  min-height: 44px;
}

main:has(.form-hero) label:has(input[type="checkbox"]),
main:has(.form-hero) label:has(input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

main:has(.form-hero) input[type="checkbox"],
main:has(.form-hero) input[type="radio"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* Başvuru Formları durum kartı ve takvim gün detayı. */
.book-club-status .btn,
.book-club-status button,
.queue-selected-day__pager .btn,
.queue-item-modal .btn,
.empty-state .btn {
  min-height: 44px;
}

/* Instagram sayfalarındaki çok satırlı alanlar da 44px tabanlı. */
main:has(.ig-shell) textarea { min-height: 44px; }

/* Paylaşım/Kuyruk takvimi: dönem gezinmesi, görünüm hapları ve mobil
   kanal filtresi. İki rota da aynı gün detayı bölümünü taşıyor. */
main:has(#queueSelectedDay) .btn,
main:has(#queueSelectedDay) .btn-sm,
main:has(#queueSelectedDay) .filter-pill,
main:has(#queueSelectedDay) select,
main:has(#queueSelectedDay) input {
  min-height: 44px;
}

/* Başvuru Formları yönetim listesi. */
main:has(.book-club-status) .btn,
main:has(.book-club-status) button,
main:has(.book-club-status) select,
main:has(.book-club-status) input {
  min-height: 44px;
}

/* ===========================================================================
   PAKET 8 — ORTAK TASARIM DİLİ
   ---------------------------------------------------------------------------
   Sayfa başına rastgele kural EKLENMEZ: burada tanımlananlar mevcut
   token'ları (`--primary`, `--border`, `--r`, `--muted` …) kullanan ORTAK
   bileşenlerdir ve birden çok ekran tarafından paylaşılır.

   Özgüllük notu: bu blok dosyanın SONUNDA. Aynı özgüllükteki daha erken bir
   kuralı ezmek istemediğimiz her yerde (ör. aktif menü bağlantısı) açıkça
   daha yüksek özgüllüklü bir override yazılır — "sonra geldiği için kazanır"
   varsayımına bırakılmaz.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1) ÜST MENÜ — public / yönetim ayrımı
   ---------------------------------------------------------------------------
   Kök neden: dokuz bağlantı (logo, zil, Etkinlikler, Etkinlik Gönder, Kitap
   Kulübü, Panel, Admin Etkinlik Gönder, Paylaşım Takvimi, Ayarlar) tek bir
   düz şeritte AYNI ağırlıkta duruyordu. Ziyaretçiye açık işler ile yalnız
   yöneticinin gördüğü işler ayırt edilemiyor, birincil iş (Panel) seyrek
   kullanılan işten (Admin Etkinlik Gönder) farklı görünmüyordu.
--------------------------------------------------------------------------- */
.nav-section-label {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: 0 .15rem;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  white-space: nowrap;
  user-select: none;
}

/* Yönetim bağlantıları: hap biçimli, daha sakin, daha küçük. Public
   bağlantılar mevcut görünümünü KORUR. */
.site-nav > a.nav-link--admin {
  font-size: .84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: .32rem .72rem;
}
.site-nav > a.nav-link--admin:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}
/* Yönetimin GİRİŞ noktası bu bölümün tek birincil bağlantısı. */
.site-nav > a.nav-link--admin-primary {
  font-weight: 700;
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .34);
}
/* Aktif hâl, `.site-nav > a.nav-link--admin` (0,2,1) ile AYNI özgüllükte
   olsaydı ve dosyada daha önce yazılsaydı ezilirdi; iki sınıf birlikte
   hedeflenerek (0,3,1) sıra bağımlılığı kaldırılıyor. */
.site-nav > a.nav-link--admin.nav-link--active {
  color: #fff !important;
  background: rgba(255, 255, 255, .3);
  border-color: rgba(255, 255, 255, .5);
  font-weight: 700;
}

/* Ayırıcı artık bir bölüm sınırı: daha belirgin ama gürültüsüz. */
.site-nav .nav-divider {
  align-self: center;
  width: 1px;
  height: 20px;
  margin: 0 .15rem;
  background: rgba(255, 255, 255, .28);
}

@media (max-width: 768px) {
  /* Mobil menü sütun; bölüm etiketi gerçek bir başlık gibi davranır. */
  .site-nav .nav-section-label {
    width: 100%;
    padding: .55rem .2rem .15rem;
    color: rgba(255, 255, 255, .7);
  }
  .site-nav > a.nav-link--admin {
    width: 100%;
    border-radius: var(--r-xs);
    padding: .6rem .85rem;
    font-size: .95rem;
  }
  .site-nav > a.nav-link--admin.nav-link--active {
    background: rgba(255, 255, 255, .3);
  }
  .site-nav .nav-divider {
    width: 100%;
    height: 1px;
    margin: .35rem 0 .1rem;
  }
}

/* Ayarlar menüsü bölüm başlıkları. */
.settings-menu-group {
  margin: .55rem 0 .15rem;
  padding: 0 .9rem;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}
.settings-menu-group:first-child { margin-top: .15rem; }

/* ---------------------------------------------------------------------------
   2) ORTAK FORM BİLEŞENİ — genişlik sınırları
   ---------------------------------------------------------------------------
   Kök neden: `.field-input` her zaman `width: 100%`. Yaş, saat, öncelik gibi
   üç-beş karakterlik alanlar da kartın tamamına yayılıyor, form "boş bir
   sütun" gibi görünüyordu. Alanın genişliği artık BEKLENEN İÇERİĞE göre
   sınırlanabiliyor; taban bileşen değişmedi, yalnız değiştirici eklendi.

   `max-width` kullanılıyor: dar ekranda alan yine tam genişliğe iner.
--------------------------------------------------------------------------- */
/* Dokunma hedefi: ortak form kontrolü her yerde en az 44px yüksek.
   Ölçüm: `time`/`date` girdileri 43px'te kalıyordu. `textarea` ve `select`
   kendi kuralları ile daha yüksek; bu taban onları düşürmez. */
.field-input { min-height: 44px; }

.field-input--xs { max-width: 9rem; }
.field-input--sm { max-width: 15rem; }
.field-input--md { max-width: 28rem; }

/* Etiketi kontrolün YANINDA duran kompakt satır (takvim araç çubukları). */
.field--inline {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.field--inline .field-label { margin-bottom: 0; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   3) GELİŞMİŞ BÖLÜM — seyrek kullanılan teknik işlemler
   ---------------------------------------------------------------------------
   Teknik yüzeyler SİLİNMİYOR, günlük işten ayrılıyor. Aynı görünüm dört
   ekranda paylaşılıyor: form yönetimi, başvuru filtreleri, takvim ve
   Özel Günler.
--------------------------------------------------------------------------- */
.advanced-panel { margin-top: 1rem; }
.advanced-panel__summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .9rem;
  color: var(--text-2);
  padding: .55rem .2rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
}
.advanced-panel__summary::-webkit-details-marker { display: none; }
.advanced-panel__summary::before {
  content: "▸";
  color: var(--muted);
  transition: transform .15s ease;
}
.advanced-panel[open] > .advanced-panel__summary::before { transform: rotate(90deg); }
.advanced-panel__summary:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.advanced-panel__body { padding-top: .35rem; }
/* Kart İÇİNDE kullanıldığında kendi çerçevesini çizmez. */
.advanced-panel--inline {
  margin-top: .35rem;
  border-top: 1px solid var(--border);
}

@media (prefers-reduced-motion: reduce) {
  .advanced-panel__summary::before { transition: none; }
}

/* ---------------------------------------------------------------------------
   4) DURUM ÖZETİ KARTI
--------------------------------------------------------------------------- */
.panel-summary .status-list { margin-bottom: .6rem; }

/* ---------------------------------------------------------------------------
   5) PUBLIC BAŞVURU FORMU (Kitap Kulübü ve diğer dinamik formlar)
   ---------------------------------------------------------------------------
   Kök neden: form tek ve uzun bir alan şeridiydi. Her girdi kartın tam
   genişliğine yayılıyor, katılım koşulları bir metin duvarı gibi duruyor,
   tür seçenekleri dev boşluklarla dikey uzuyordu.
--------------------------------------------------------------------------- */

/* Okunabilir satır genişliği. Uzun metin bir kartın 900px'ine yayılınca
   göz satır başını kaybediyor; ~68 karakter tipografik ölçü. */
.form-measure { max-width: 68ch; }
.form-measure > p { margin: 0 0 .85rem; line-height: 1.7; }
.form-measure > p:last-child { margin-bottom: 0; }

.form-intro__list {
  margin: 0 0 .9rem;
  padding-left: 1.15rem;
  display: grid;
  gap: .55rem;
  line-height: 1.65;
}
.form-intro__list:last-child { margin-bottom: 0; }
.form-intro__list li { padding-left: .15rem; }

/* Bölüm başlığı `.field-group-title` ile ORTAK; burada yalnız zorunluluk
   notunun konumu ayarlanıyor. */
.form-required-note { margin: -.6rem 0 1.1rem; }

/* Seçim ızgarası: 44px dokunma hedefi, dar ekranda tek sütun. */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .5rem;
  margin-top: .55rem;
}
.choice-option {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .5rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  line-height: 1.35;
}
.choice-option:hover { border-color: var(--primary-light); background: var(--primary-soft); }
.choice-option input { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin: 0; }
/* Klavye odağı seçeneğin TAMAMINDA görünür; yalnız kutucukta değil. */
.choice-option:focus-within {
  outline: 3px solid var(--border-focus);
  outline-offset: 1px;
  border-color: var(--primary);
}
.choice-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  font-weight: 600;
}

/* "Diğer" alanı seçim kümesinin parçası olarak okunur. */
.choice-other {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--border);
}

/* Seçim alanı bir `fieldset`: tarayıcı varsayılan çerçevesi sıfırlanır,
   `legend` normal alan etiketi gibi davranır. */
.form-choice {
  border: 0;
  margin: 0 0 1.1rem;
  padding: 0;
  min-width: 0;
}
.form-choice > .field-label { padding: 0; float: none; }

.form-info-block { margin-bottom: 1.1rem; }

/* KAPANIŞ ALANI — gönderim tek ve belirgin. */
.form-submit-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.form-submit-bar__link { font-size: .88rem; color: var(--muted); }
.form-secondary-action { margin-top: .9rem; }

.btn-lg {
  min-height: 48px;
  padding: .8rem 1.6rem;
  font-size: 1rem;
}

@media (max-width: 560px) {
  /* Mobil: tek sütun ve tam genişlik dokunma hedefi. */
  .choice-grid { grid-template-columns: 1fr; }
  .form-submit-bar { padding: 1rem; }
  .form-submit-bar .btn-lg { width: 100%; }
  /* Genişlik sınırları dar ekranda kalkar; alan tam genişliğe iner. */
  .field-input--xs,
  .field-input--sm,
  .field-input--md { max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   6) TAKVİM ARAÇ ÇUBUĞU — dönem / kanal / görünüm ayrımı
   ---------------------------------------------------------------------------
   Kök neden: üç şerit de aynı kutu, aynı yazı ağırlığı, aynı hap düğmeler.
   Dönem gezinmesi (veriyi değiştirir), kanal süzgeci (veriyi daraltır) ve
   görünüm/yoğunluk (yalnız gösterimi değiştirir) tek bakışta ayrılmıyordu.

   Aynı dil Özel Günler sayfasında da kullanılıyor: iki ekran aynı ürün
   ailesine ait görünmeli.
--------------------------------------------------------------------------- */
.calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
  padding: .8rem .9rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
/* Birincil grup daha güçlü: dönem başlığı sayfanın bağlamıdır. */
.calendar-toolbar__group--primary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem 1rem;
  min-width: 0;
}
.calendar-toolbar__label {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.calendar-toolbar__period {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}
.calendar-toolbar__counts {
  margin: 0;
  font-size: .8rem;
  color: var(--muted);
}
/* Sayfadan ÇIKAN bağlantı: filtrelerle karışmasın diye sağ uçta ve sakin. */
.calendar-toolbar__away { margin-left: auto; }

/* Filtre şeritleri aynı kabuğu paylaşır ama daha hafif. */
.filter-bar.calendar-toolbar__group {
  border: 1px solid var(--border);
  border-radius: .85rem;
  padding: .55rem .75rem;
  background: var(--surface-2);
  box-shadow: none;
}
/* Görünüm/yoğunluk yalnız gösterimi etkiler: en hafif grup. */
.filter-bar.calendar-toolbar__group--view {
  background: transparent;
  border-style: dashed;
}
.calendar-toolbar__sep {
  margin-left: .75rem;
  padding-left: .75rem;
  border-left: 1px solid var(--border);
}

@media (max-width: 640px) {
  .calendar-toolbar { padding: .7rem; }
  .calendar-toolbar__away { margin-left: 0; width: 100%; text-align: center; }
  .calendar-toolbar__sep { margin-left: 0; padding-left: 0; border-left: 0; width: 100%; }
}

/* Dokunma hedefi: `.btn-sm` masaüstünde 31px. Ölçüm hem 375 hem 768'de ay
   gezinme okları ve Özel Günler eylemleri için 44px'in altını gösterdi.
   Sınır, sitenin mobil menü kırılma noktasıyla (768px) AYNI tutuluyor;
   `.btn-sm` masaüstü görünümü değişmez. */
@media (max-width: 768px) {
  .calendar-toolbar .btn,
  .special-days-panel .btn,
  .special-days-panel .advanced-panel__summary { min-height: 44px; }
  .calendar-toolbar .btn { display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   7) TAKVİM HÜCRE DURUMLARI — bugün / seçili / dolu / hafta sonu
   ---------------------------------------------------------------------------
   Boş hücrelerdeki tekrar eden metin kaldırıldı (bkz. şablon notu). Durum
   ayrımı artık zemin ve kenarla kuruluyor; her durum METİN ya da
   `aria-label` ile de anlatılıyor, yalnız renge bırakılmıyor.
--------------------------------------------------------------------------- */
.queue-month-empty { min-height: .35rem; display: block; }

/* Hafta sonu: sakin ama fark edilir bir zemin. */
.queue-month-cell.is-weekend { background: #f7f7fb; }
.queue-calendar-day.is-weekend .queue-calendar-day-head { background: #f2f2f8; }

/* İçerik OLAN gün: sol kenarda dolu bir işaret. */
.queue-month-cell.has-content { border-left: 3px solid var(--primary-light); }

/* Sıra bağımlılığı bırakılmıyor: bugün ve seçili durumları hafta sonu
   zemininden daha GÜÇLÜ seçicilerle yeniden yazılıyor. */
.queue-month-cell.is-weekend.is-today { background: #eef2ff; }
.queue-month-cell.is-weekend.is-selected,
.queue-month-cell.is-selected { background: var(--primary-soft); }

.queue-calendar-empty {
  margin: 0;
  font-size: .78rem;
  font-style: italic;
  opacity: .8;
}

/* ---------------------------------------------------------------------------
   8) ÖZEL GÜNLER — yükleme alanı, boş durumlar, saat kartları
   ---------------------------------------------------------------------------
   Kök neden: görsel havuzu çıplak bir `<input type="file">` idi; kutu bir
   yükleme alanı gibi görünmüyor, boş havuz bir liste satırı olarak
   yazılıyordu. İki farklı saat girdisi aynı görünüyordu.
--------------------------------------------------------------------------- */
.special-days-panel { display: grid; gap: .8rem; background: transparent; border: 0; padding: 0; }
.special-days-panel > .form-card { margin: 0; }

.special-dropzone {
  place-items: center;
  text-align: center;
  padding: 1.25rem .8rem;
  gap: .3rem;
  transition: border-color .15s, background .15s;
}
.special-dropzone__icon {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--primary);
}
.special-dropzone__title { margin: 0; font-weight: 700; color: var(--text); }
.special-dropzone__hint { margin: 0; font-size: .78rem; color: var(--muted); }
.special-dropzone__button { margin-top: .35rem; cursor: pointer; }
/* Dosya girdisi `sr-only`: klavye odağı etiketin üstünde görünür kalmalı. */
.special-dropzone:focus-within {
  border-color: var(--primary);
  background: var(--primary-soft);
}
@media (prefers-reduced-motion: reduce) {
  .special-dropzone { transition: none; }
}

.special-upload-errors ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.special-upload-errors[hidden] { display: none; }

.special-default-time { margin-top: .75rem; }

.empty-state--compact { padding: 16px 14px; }

/* Ay hücresindeki içerik sayacı: yalnız DOLU günlerde basılır. */
.queue-month-count { font-size: .68rem; color: var(--muted); font-weight: 600; }

/* Özel Günler takvimi de Paylaşım Takvimi durumlarını paylaşır. */
.special-days-calendar .queue-month-cell.is-today {
  border-color: #6366f1;
  box-shadow: inset 0 0 0 1px #6366f1;
}
.special-days-calendar .queue-month-cell.is-weekend { background: #f7f7fb; }
.special-days-calendar .queue-month-cell.has-content { border-left: 3px solid var(--primary-light); }
.special-days-calendar .queue-month-cell.is-over {
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* ---------------------------------------------------------------------------
   9) DOKUNMA HEDEFİ — mobil taban
   ---------------------------------------------------------------------------
   Ölçüm: `.btn` 375px'te 38px, `.btn-sm` 31px yüksekliğinde. Parmakla
   kullanılan her ekranda kontrolün en az 44px olması gerekiyor.

   Kural YALNIZ mobil kırılma noktasında (sitenin menü kırılma noktasıyla
   aynı, 768px) geçerli: masaüstü yoğunluğu ve mevcut public sayfaların
   görünümü DEĞİŞMEZ. `min-height` kullanılıyor, `height` değil — daha uzun
   olması gereken düğmeler (çok satırlı etiket) küçültülmez.
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .btn,
  .btn-sm,
  .filter-pill { min-height: 44px; }
}

/* Adres sözleşmesine uymayan kayıtta kırık `src` yerine metin (Özel Günler). */
.special-asset-card__noimg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .4rem;
  border: 1px dashed var(--border);
  border-radius: var(--r-xs);
  color: var(--muted);
  font-size: .72rem;
  text-align: center;
}

/* Ayarlar menüsü satırları da dokunma hedefi tabanına uyar.
   Paket 8 revizyonunda "Admin Etkinlik Gönder" kalıcı çubuktan buraya
   taşındı; ölçüm menü satırlarının 44px'in altında olduğunu gösterdi. */
@media (max-width: 768px) {
  .settings-menu-link { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   PAKET 10 — Kitap Kulübü ziyaretçi akışı
   ---------------------------------------------------------------------------
   Yalnız public başvuru ekranlarını etkiler. Paylaşılan `.btn`, `.btn-sm`
   ve `.field-input` tabanları DEĞİŞTİRİLMEZ; her kural ya yeni bir sınıfa
   ya da bu paketin ekranlarına bağlıdır.
--------------------------------------------------------------------------- */

/* Hata özeti: hero'nun hemen ardında duruyor ve göz onu ilk yakalamalı.
   `:focus` görünür bir çerçeve verir — özet sayfa açılışında programatik
   odak alıyor ve odağın nereye gittiği GÖRÜLEBİLİR olmalı. */
.form-error-summary { scroll-margin-top: 12px; }
/* Hata özeti PROGRAMATİK olarak odaklanıyor (sayfa açılışında). Odak
   göstergesi bu yüzden `:focus-visible` ile sınırlandırılmaz: bastırma
   kuralı, klavye dışı odakta çerçeveyi tamamen kaldırıyordu ve
   erişilebilirlik sözleşmesini ihlal ediyordu. Çerçeve HER odak
   durumunda görünür kalır. */
.form-error-summary:focus { outline: 2px solid var(--danger, #dc2626); outline-offset: 3px; }
.form-error-summary ul { margin: .4rem 0 0; padding-left: 1.15rem; }
.form-error-summary li { margin-bottom: .15rem; }

/* Özet bağlantısı bir DOKUNMA hedefi: 44px yükseklik, satır içi blok. */
.form-error-summary__link {
  display: inline-block;
  min-height: 44px;
  padding: 11px 2px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* OTP alanı: iOS Safari 16px ALTINDAKİ girdilerde odakta sayfayı
   yakınlaştırır. `.field-input` tabanı .925rem (~14.8px) olduğu için kod
   ekranı her dokunuşta zıplıyordu. 16px bu davranışı kapatır. */
.form-otp-input {
  font-size: 16px;
  letter-spacing: .18em;
}

/* Paylaşılan `.btn` 38px, `.btn-sm` 31px yüksekliğinde. "Yeni kod gönder"
   ikincil ama YİNE DE parmakla basılan bir düğme: 44px'e çıkarılır. */
.btn-touch {
  min-height: 44px;
  padding: .55rem 1.1rem;
  font-size: .875rem;
}

/* `.btn` tabanı metni tek satıra kilitler ve taşanı gizler. Başarı
   ekranındaki Instagram bağlantısı 375px'te bu yüzden KESİLİYORDU
   (görünür ~291px, metin ~315px). `.btn-wrap` yalnız o üç kuralı geri
   alır; ölçüler ve görünüm aynı kalır. */
.btn-wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  height: auto;
  text-align: center;
}

/* Başvuru kodu: kesilmez, sarılır, seçilebilir. */
.form-code-line { overflow-wrap: anywhere; }
.form-code-value { user-select: all; letter-spacing: .04em; }

/* ---------------------------------------------------------------------------
   PAKET 10/B — Kitap Kulübü ziyaretçi arayüzü
   ---------------------------------------------------------------------------
   Yalnız ziyaretçinin gördüğü başvuru ekranlarını etkiler. Paylaşılan
   `.btn`, `.field-input` ve `.form-card` tabanları DEĞİŞTİRİLMEZ; her
   kural ya yeni bir sınıfa ya da `.public-form-page` kapsamına bağlıdır.
--------------------------------------------------------------------------- */

/* ── Hero: kompakt ────────────────────────────────────────────────────
   Kök neden: hero 178px yüksekliğindeydi ve "Başvuru Formu" satırı
   dikeyde ayrı bir blok tüketiyordu. Mobilde bu, formu ekrandan daha
   da aşağı itiyordu. */
.form-hero--compact { padding: 14px 16px; gap: 12px; margin-bottom: 14px; }
.form-hero--compact .form-hero__logo { width: 48px; height: 48px; border-radius: 12px; }
.form-hero--compact .form-hero__title { font-size: 1.3rem; margin: 2px 0; }

/* Kicker ve durum rozeti AYNI satırda; sarılabilir. */
.form-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 0;
}

/* Durum rozeti: anlam METİNDE, renk yalnız destek. */
.form-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .18);
  color: #fff;
  white-space: nowrap;
}
.form-status--closed { background: rgba(0, 0, 0, .28); }

/* ── İlerleme göstergesi ──────────────────────────────────────────── */
.form-steps { margin: 0 0 14px; }
.form-steps__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.form-steps__item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .85rem;
  line-height: 1.3;
}
.form-steps__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: .78rem;
  font-weight: 700;
}
.form-steps__label { min-width: 0; overflow-wrap: anywhere; }

/* Durum METNİ görsel olarak gizli ama ekran okuyucuya açık: anlam
   yalnız renge bağlı KALMAZ. Gizleme için projenin PAYLAŞILAN `.sr-only`
   yardımcısı kullanılır (şablonda), burada ayrı bir kopya tanımlanmaz. */

.form-steps__item--current {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary) inset;
  font-weight: 600;
}
.form-steps__item--current .form-steps__badge {
  background: var(--primary-gradient);
  border-color: transparent;
  color: #fff;
}
.form-steps__item--done .form-steps__badge {
  background: var(--primary-muted);
  border-color: var(--primary);
  color: var(--primary-dark);
}
/* Tamamlanan adım ayrıca bir işaretle de ayrılır (renk körlüğü). */
.form-steps__item--done .form-steps__badge::after { content: "✓"; }
.form-steps__item--done .form-steps__badge { font-size: 0; }
.form-steps__item--done .form-steps__badge::after { font-size: .8rem; }
.form-steps__item--upcoming { color: var(--muted); }

/* ── Katılım koşulları: katlanan ayrıntı ──────────────────────────── */
.form-intro__details { margin-top: .6rem; }
.form-intro__summary {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .55rem .2rem;
  font-weight: 600;
  color: var(--primary-dark);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.form-intro__summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.form-intro__summary::marker { color: var(--primary); }
.form-intro__body { padding-top: .2rem; }

/* ── Form ızgarası ────────────────────────────────────────────────────
   Mobil TABAN tek sütun; ızgara yalnız geniş ekranda açılır. Alan
   SIRASI değişmez, yalnız yerleşim değişir. */
.form-section { display: block; }
.field--cell, .field--wide { min-width: 0; }

@media (min-width: 720px) {
  .public-form-page .form-section--contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.1rem;
    align-items: start;
  }
  /* Legend ve zorunluluk notu ızgarayı bölmemeli. */
  .public-form-page .form-section--contact > legend,
  .public-form-page .form-section--contact > .form-required-note,
  .public-form-page .form-section--contact > .field--wide,
  .public-form-page .form-section--contact > .field--check,
  .public-form-page .form-section--contact > .form-choice,
  .public-form-page .form-section--contact > .form-info-block {
    grid-column: 1 / -1;
  }
}

/* Uzun cevaplar için yeterli başlangıç yüksekliği. */
.form-textarea { min-height: 8.5rem; resize: vertical; }

/* ── Kapanış kartı ────────────────────────────────────────────────── */
.form-submit-bar__go { flex: 0 0 auto; }

/* ── reCAPTCHA: dar ekranda ORANTILI KÜÇÜLTME ─────────────────────────
   Kök neden: widget SABİT 304px geniştir. 320px ekranda kullanılabilir
   alan 254px olduğu için widget kutusundan taşıyordu.

   ÖNCEKİ ÇÖZÜM YANLIŞTI: `overflow-x: auto` sayfanın taşmasını
   engelliyordu ama kullanıcıyı reCAPTCHA'nın İÇİNDE yatay kaydırmaya
   zorluyordu; checkbox ile logo aynı anda görünmüyordu.

   Şimdi widget yalnız GERÇEKTEN sığmadığı genişlikte orantılı
   küçültülüyor. Ölçüm: kullanılabilir alan = viewport - 66px, yani
   370px ve üstünde 304px zaten sığıyor ve HİÇ küçültme yapılmıyor.

   `transform` LAYOUT'U DEĞİŞTİRMEZ: ölçekli öğe kutuda hâlâ 304x78px
   yer kaplar ve altta "hayalet boşluk" bırakırdı. Negatif kenar
   boşlukları bu farkı tam olarak telafi eder, böylece sarmalayıcı
   görsel yüksekliğe oturur ve `scrollWidth == clientWidth` olur —
   yani ne sayfa ne de captcha kutusu kaydırma üretir.

   Kırpma YOK: `overflow` gizlenmez, ölçeklenmiş içerik kutuya tamamen
   sığar. reCAPTCHA yapılandırması, anahtarları, "compact"/görünmez mod
   ve doğrulama davranışı DEĞİŞMEZ — yalnız görsel yerleşim. */
.form-captcha {
  /* Google'ın standart (normal) widget ölçüsü. */
  --captcha-w: 304px;
  --captcha-h: 78px;
  --captcha-scale: 1;
  flex: 1 1 100%;
  max-width: 100%;
}

.form-captcha .g-recaptcha {
  display: inline-block;
  /* `inline-block` taban çizgisi altında iniş payı bırakır ve kutunun
     altında ~7px'lik bir boşluk oluşuyordu; üstten hizalama bunu keser. */
  vertical-align: top;
  transform: scale(var(--captcha-scale));
  /* Sol-üst köken: küçültme soldan başlar, kutunun dışına taşmaz. */
  transform-origin: left top;
  /* Ölçeğin layout'ta yer kaplamayan farkını geri al. Ölçek 1 iken
     ikisi de 0'dır, yani geniş ekranda hiçbir şey değişmez. */
  margin-right: calc(var(--captcha-w) * (var(--captcha-scale) - 1));
  margin-bottom: calc(var(--captcha-h) * (var(--captcha-scale) - 1));
}

/* 345-369px: kullanılabilir alan 279-303px. */
@media (max-width: 369.98px) {
  .form-captcha { --captcha-scale: .90; }
}

/* 320-344px: kullanılabilir alan 254-278px; en dar hâl 254px'e sığmalı
   (304 * .83 = 252.3px). */
@media (max-width: 344.98px) {
  .form-captcha { --captcha-scale: .83; }
}

/* ── Ziyaretçi ekranlarında okunur girdi boyutu ───────────────────────
   iOS Safari 16px ALTINDAKİ girdilerde odakta sayfayı yakınlaştırır.
   Paylaşılan `.field-input` tabanı .925rem (~14.8px) olduğu için bütün
   form her dokunuşta zıplıyordu. Kural YALNIZ ziyaretçi sayfasında. */
.public-form-page .field-input,
.public-form-page select.field-input,
.public-form-page textarea.field-input { font-size: 16px; }

/* Klavye odağı her yerde GÖRÜNÜR olmalı. */
.public-form-page a:focus-visible,
.public-form-page button:focus-visible,
.public-form-page summary:focus-visible,
.public-form-page input:focus-visible,
.public-form-page select:focus-visible,
.public-form-page textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Mobil: kompakt hero SATIRDA kalır.
   Paylaşılan `.form-hero` 560px altında sütuna dönüyor ve logo koca bir
   satır tüketiyordu. Logo artık 48px; yanda durunca hero belirgin
   biçimde kısalıyor ve form yukarı geliyor. */
@media (max-width: 560px) {
  .form-hero--compact {
    flex-direction: row;
    /* Logo, metin bloğunun ORTASINA değil ÜSTÜNE hizalanır: dar ekranda
       metin dört satıra çıkınca ortalanmış logo boşlukta asılı kalıyordu. */
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
  }
  .form-hero--compact .form-hero__logo { width: 44px; height: 44px; }
  .form-hero--compact .form-hero__title { font-size: 1.2rem; }
}

/* 320px sınırı: dar ekranda hiçbir şey taşmaz. */
@media (max-width: 380px) {
  .form-hero--compact { padding: 11px 12px; gap: 10px; }
  .form-hero--compact .form-hero__logo { width: 40px; height: 40px; }
  .form-hero--compact .form-hero__title { font-size: 1.1rem; }
  .form-hero--compact .form-hero__brand { font-size: .72rem; }
  .form-steps__item { flex: 1 1 100%; }
  .form-status { white-space: normal; }
}

/* Hareket azaltma tercihi korunur. */
@media (prefers-reduced-motion: reduce) {
  .form-intro__details,
  .form-steps__item { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------------
   PAKET 10/D-1 — Ziyaretçi etkinlik detayı
   ---------------------------------------------------------------------------
   Yalnız herkese açık detay sayfasını etkiler. Paylaşılan `.btn`,
   `.field-input` ve kart tabanları DEĞİŞTİRİLMEZ.
--------------------------------------------------------------------------- */

/* Başlığın üzerindeki açıklayıcı etiket. */
.public-title-eyebrow {
  margin: 0 0 2px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Mekân satırı: tamamı tıklanabilir ─────────────────────────────── */
.meta-venue-link {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  min-height: 44px;
  padding: 4px 0;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.meta-venue-link:hover .meta-venue-name,
.meta-venue-link:focus-visible .meta-venue-name { text-decoration: underline; }
.meta-venue-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.meta-venue-cta {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  flex: 0 0 auto;
  font-size: .8rem;
  font-weight: 600;
  color: var(--primary-dark);
  white-space: nowrap;
}
.meta-venue-ic { width: 13px; height: 13px; flex: 0 0 auto; }

/* ── Detay sayfası ölçü/boşluk düzeni ──────────────────────────────── */
/* Masaüstünde poster ile bilgi arasındaki ağırlık dengelenir; dikey
   boşluk azaltılır.

   Kök neden: kural `.public-detail-grid` seçicisine yazılmıştı ama
   şablonda BÖYLE BİR SINIF YOK — yani kural hiç uygulanmıyordu.
   Gerçek sarmalayıcı `.public-event-page--with-poster`. Yeni bir
   şablon sarmalayıcısı ÜRETİLMEDİ; kural mevcut öğeye bağlandı. */
@media (min-width: 900px) {
  .public-event-page--with-poster {
    gap: 1.6rem;
    align-items: start;
  }
  /* Bölümler arası dikey boşluk masaüstünde gereksiz büyüktü. */
  .public-event-page--with-poster .public-body,
  .public-event-page--with-poster .public-tickets,
  .public-event-page--with-poster .share-block {
    margin-top: 1.1rem;
  }
}

/* Mobilde ana işlemler tam genişlik ve 44px+ dokunma hedefi. */
@media (max-width: 560px) {
  .public-actions .btn,
  .share-row .share-btn { width: 100%; min-height: 46px; }
  .share-row { flex-direction: column; gap: .5rem; }
}

/* ---------------------------------------------------------------------------
   PAKET 10/D-2 — Ziyaretçi Etkinlik Takvimi
   ---------------------------------------------------------------------------
   Masaüstünde aylık ızgara, mobilde tarih gruplu gündem. İki görünüm de
   HER ZAMAN DOM'da; hangisinin görüneceğini yalnız medya sorgusu seçer,
   böylece JavaScript gerekmez.
--------------------------------------------------------------------------- */
/* ── Ortak genişlik (Plan A2) ─────────────────────────────────────
   Araç çubuğu ve aylık ızgara TEK değişkenden beslenir; iki kutu aynı
   sol ve sağ kenara sahiptir. Eskiden araç çubuğu `46rem`, ızgara içerik
   alanının tamamıydı: 1440px'te sağ kenarlar ~416px kayıyordu. Değer
   sayfa kabının üst sınırıdır; ızgara 46rem'e DARALTILMAZ, geniş
   masaüstü alanını kullanmaya devam eder. */
.public-calendar-page { --cal-width: var(--container-max); }

/* ── Araç çubuğu ───────────────────────────────────────────────────
   Önceki ay, ay adı + sayaç, sonraki ay ve "Bugüne dön" TEK kutuda.
   Kutu ızgara genişliğindedir; kontroller ise savrulmaz: önceki/ay/
   sonraki içerik genişliğinde TEK küme olarak orta sütunda, "Bugüne
   dön" sağ sütunun ucunda. Sol ve sağ sütun eşit (`1fr`), bu yüzden
   küme "Bugüne dön" basılsa da basılmasa da tam ortada kalır. */
.cal-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
  max-width: var(--cal-width);
  margin: 0 auto 1.25rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.cal-toolbar__nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.cal-toolbar__heading {
  flex: 0 1 auto;
  /* Ay adları farklı uzunlukta: taban genişlik, küme her ayda aynı
     görünsün diye. */
  min-width: 10rem;
  text-align: center;
}
.cal-toolbar__today {
  grid-column: 3;
  justify-self: end;
}
.cal-toolbar__month {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}
.cal-toolbar__count {
  margin: .1rem 0 0;
  font-size: .78rem;
  color: var(--muted);
}
/* Dokunma hedefi her ölçüde en az 44px. */
.cal-toolbar__btn,
.cal-toolbar__today {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  flex: 0 0 auto;
}
/* Sınırdaki pasif ay düğmesi: durum yalnız solukluk DEĞİL, ekran
   okuyucuya açık metinle de bildirilir (şablondaki `.sr-only`). */
.cal-toolbar__btn.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Dar ekran: ay adı ÜSTTE ve tam genişlikte; ileri/geri ALTINDA eşit
   iki sütun; "Bugüne dön" en altta tam genişlikte. Üç kontrol alt alta
   dizilip gereksiz yükseklik üretmiyor. */
@media (max-width: 599px) {
  .cal-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .cal-toolbar__nav { display: contents; }
  .cal-toolbar__heading { grid-column: 1 / -1; order: -1; }
  .cal-toolbar__btn { width: 100%; }
  .cal-toolbar__today { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
}
/* Çok dar ekranda ok işareti tek başına yeterli; metin gizlenmez,
   yalnız kısalır. */
@media (max-width: 359px) {
  .cal-toolbar__btn-text { font-size: .8rem; }
}

.cal-empty { margin-bottom: 1rem; max-width: 46rem; }

/* ── Aylık ızgara (masaüstü) ───────────────────────────────────────── */
.cal-grid-wrap { display: none; }
/* Araç çubuğuyla AYNI genişlik ve hizalama (bkz. `--cal-width`). */
.cal-grid-wrap { max-width: var(--cal-width); margin-inline: auto; }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Gün başlığındaki noktalı `abbr` alt çizgisi KALDIRILDI: tarayıcı
   varsayılanı hem noktalı çizgi hem "help" imleci veriyordu ve bu, tek
   kelimelik bir sütun başlığında tıklanabilir/etkileşimli bir öğe gibi
   okunuyordu. `title` açılımı DURUYOR — erişilebilir açıklama kaybolmadı. */
.cal-grid th abbr[title] {
  text-decoration: none;
  border-bottom: 0;
  cursor: default;
}
.cal-grid th {
  padding: .4rem .3rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
/* SABİT yükseklik KALDIRILDI. `height: 104px` seyrek bir ayda 42 boş
   hücrenin her birine 104px veriyordu: ekranın çoğu beyaz alandı.
   `min-height` ızgaranın hizasını korur, içerik varsa hücre büyür. */
.cal-cell {
  vertical-align: top;
  min-height: 74px;
  height: auto;
  padding: .35rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
/* Etkinliği olan hücre okunabilir bir taban yükseklik alır ve seyrek
   ayda boş günlerden AYRIŞIR (Plan A2): hafif mor zemin ve belirgin
   kenar. Boş günler SOLDURULMAZ (opacity yok), gün numarası ve içerik
   kontrastı değişmez. Kenar `border-collapse` içinde komşu hücrenin gri
   kenarına yenilebildiği için tam çerçeve 1px iç gölgeyle de çizilir;
   `.cal-cell--today` SONRA gelir ve 2px işaretini korur. */
.cal-cell--has {
  min-height: 96px;
  background: var(--primary-soft);
  border-color: var(--primary-light);
  box-shadow: 0 0 0 1px var(--primary-light) inset;
}
.cal-cell--muted { background: var(--surface-2); color: var(--faint); }
.cal-cell--today { box-shadow: 0 0 0 2px var(--primary) inset; }
/* Gün numarası ile "Bugün" rozeti: rozet sarabilir, numara KÜÇÜLMEZ.
   Önceki sürümde ikisi tek satıra sıkışıyor ve dar sütunda üst üste
   biniyordu. */
.cal-cell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .15rem .35rem;
  margin-bottom: .25rem;
  min-width: 0;
}
.cal-cell__num { font-size: .82rem; font-weight: 700; flex: 0 0 auto; }
/* Bugün yalnız RENKLE değil, METİNLE de işaretlenir. */
.cal-cell__today {
  font-size: .62rem;
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--primary-muted);
  color: var(--primary-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* UZUN BAŞLIK KOMŞU SÜTUNA TAŞMAZ.
   Kök neden: liste `display: grid` ve sütun tanımı yoktu; ızgara sütunu
   içeriğe göre (`auto`) boyutlanıyor, `white-space: nowrap` taşıyan çip de
   metnin TAM genişliğine uzuyordu. 176px'lik hücrede 423px'lik bir çip
   oluşuyor ve yandaki günlerin üzerine biniyordu — `text-overflow:
   ellipsis` hiç devreye girmiyordu, çünkü kısaltacak bir sınır yoktu.
   `minmax(0, 1fr)` + `min-width: 0` sütunu hücreye bağlar. */
.cal-cell__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}
.cal-cell__list > li { min-width: 0; }
.cal-chip {
  display: block;
  max-width: 100%;
  padding: 3px 5px;
  border-radius: 6px;
  background: var(--primary-muted);
  color: var(--primary-dark);
  font-size: .72rem;
  line-height: 1.25;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-chip:hover, .cal-chip:focus-visible { background: var(--primary); color: #fff; }
.cal-chip__type { font-weight: 700; margin-right: .25rem; }
/* Yoğun gün: kalan etkinlikler YERLEŞİK `<details>` içinde.
   Kapalıyken hücre büyümez; açılınca liste aynı hücrede genişler. */
.cal-cell__more { margin: 3px 0 0; }
.cal-cell__more-toggle {
  display: inline-block;
  padding: 3px 2px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--primary-dark);
  cursor: pointer;
  border-radius: 4px;
}
.cal-cell__more-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.cal-cell__list--rest { margin-top: 2px; }
/* Aşırı yoğun gün ızgarayı kontrolsüz büyütmesin: açık liste kendi
   içinde kaydırılır, hücre yüksekliği sınırlı kalır. */
.cal-cell__more[open] .cal-cell__list--rest {
  max-height: 132px;
  overflow-y: auto;
}


/* ── Gündem (mobil taban) ──────────────────────────────────────────── */
.cal-agenda__group { margin-bottom: 1.1rem; }
.cal-agenda__date {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .4rem;
  font-size: .95rem;
  font-weight: 700;
}
.cal-agenda__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cal-item {
  display: grid;
  gap: .15rem;
  min-height: 56px;
  padding: .7rem .8rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.cal-item:hover, .cal-item:focus-visible { border-color: var(--primary); background: var(--surface-2); }
.cal-item__time { font-size: .78rem; font-weight: 700; color: var(--primary-dark); }
.cal-item__title { font-weight: 600; line-height: 1.3; }
.cal-item__meta { display: flex; flex-wrap: wrap; gap: .3rem .6rem; font-size: .78rem; color: var(--muted); }
.cal-item__type { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

/* Klavye odağı her iki görünümde de GÖRÜNÜR. */
.public-calendar-page a:focus-visible,
.public-calendar-page .btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Izgara YALNIZ geniş ekranda; mobil gündemde kalır. */
@media (min-width: 880px) {
  .cal-grid-wrap { display: block; }
  .cal-agenda { display: none; }
}


/* ===========================================================================
   PAKET 11 — ZİYARETÇİ (PUBLIC) KABUĞU
   ===========================================================================
   `_shells/public_shell.html` ile birlikte çalışan ORTAK SÖZLEŞME.

   Kök neden: giriş gerektirmeyen sayfalar aynı bileşenleri kullanıyordu
   ama her biri kendi içerik başlangıcını, başlık boşluğunu ve araç çubuğu
   düzenini kuruyordu; ana sayfa, takvim, etkinlik gönderme ve başvuru
   formu arasında dikey ritim ve mobil yatay boşluk tutmuyordu.

   Buradaki kurallar YALNIZ kabuğun kendi sınıflarına (`.pub*`) dokunur;
   mevcut sayfa bileşenleri (`.form-card`, `.btn`, marka renkleri)
   DEĞİŞMEZ ve yönetim ekranları etkilenmez.
--------------------------------------------------------------------------- */

/* Okunabilir metin ölçüsü — açıklama ve düz metin blokları için. */
.public-shell { --pub-measure: 68ch; }

.pub__head { margin-bottom: 1.5rem; }
.pub__title { margin-bottom: .35rem; }
/* Açıklama satırı sayfa genişliğine yayılmaz: uzun satır okunmaz. */
.pub__lead { max-width: var(--pub-measure); margin: 0; }

/* Araç çubuğu: filtre/gezinme kontrolleri TEK sırada, sarılabilir. */
.pub__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem .75rem;
  margin: 0 0 1.25rem;
}

/* Gövde bir BLOK kalır: mevcut sayfaların kendi kenar boşlukları ve
   ızgaraları bozulmasın. Kabuk yalnız KARDEŞ kartlar arasındaki ritmi
   tutarlı kılar. */
.pub__body > .form-card + .form-card { margin-top: 1.25rem; }

/* Ortak boş durum kutusu. Takvimin boş ayı ile başka bir ziyaretçi
   sayfasının boş durumu aynı görünmeli. */
.pub-empty {
  max-width: 46rem;
  text-align: left;
}
.pub-empty .action-row { margin-bottom: 0; }

/* Ziyaretçi sayfalarında klavye odağı HER ZAMAN görünür. */
.public-shell a:focus-visible,
.public-shell button:focus-visible,
.public-shell .btn:focus-visible,
.public-shell input:focus-visible,
.public-shell select:focus-visible,
.public-shell textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Yatay taşma güvenliği: uzun başlık, uzun URL ya da geniş tablo
   sayfanın tamamını yana kaydırmasın. */
.public-shell .pub__body { min-width: 0; }

@media (max-width: 599px) {
  .pub__head { margin-bottom: 1.15rem; }
  .pub__toolbar { margin-bottom: 1rem; }
}

/* ===========================================================================
   PAKET 11 — HATA ÖZETİ (KOMPAKT)
   ---------------------------------------------------------------------------
   Ayrıntılı hata her alanın ALTINDA. Üstteki özet yalnız kaç alanın
   kontrol edilmesi gerektiğini söyler ve ilk hatalı alana götürür.
--------------------------------------------------------------------------- */
.form-error-summary--compact { padding: .75rem 1rem; }
.form-error-summary--compact .form-error-summary__text {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .6rem;
}
.form-error-summary--compact .form-error-summary__link {
  font-weight: 600;
  text-decoration: underline;
}
.form-error-summary--compact:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

/* Sayfada karşılığı OLMAYAN hataların metni (kurcalanmış istemci/bot).
   Alanın altında gösterilecek bir yer yok; özet içinde basılır. */
.form-error-summary__orphans {
  margin: .4rem 0 0;
  padding-left: 1.15rem;
  font-size: .85rem;
}


/* ---------------------------------------------------------------------------
   PAKET 11 — ZİYARETÇİ SAYFALARINDA DOKUNMA HEDEFLERİ
   ---------------------------------------------------------------------------
   Ölçülen değerler (390px, Chromium): "Izgara"/"Tablo" 28.4px, boş ay
   "Tüm etkinlikler" 37.8px — ikisi de 44px eşiğinin altındaydı. Sıralama
   `select`i 13.1px yazı taşıyordu ve iOS Safari odakta sayfayı
   yakınlaştırıyordu.

   Yalnız ÖLÇÜ değişir: sınıflar, davranış ve marka renkleri aynı kalır.
--------------------------------------------------------------------------- */
.public-view-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-empty .btn,
.pub-empty .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 599px) {
  .public-shell select.field-input,
  .public-shell .public-sort select,
  #public-sort-select {
    font-size: 16px;
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAKET 1 — ORTAK ÖLÇEK (yalnız ZİYARETÇİ yüzeyi)
   ═══════════════════════════════════════════════════════════════════════

   YÖNETİM DEĞİŞMEZLİĞİ — yapısal garanti
   ---------------------------------------
   Buradaki her kural `.public-shell`, `.auth-shell` ya da
   `.public-widget` gövde sınıfına KAPSANMIŞTIR. Bu sınıfları yalnız
   ziyaretçi kabukları basar:

       _shells/public_shell.html : body class="public-shell …"
       _shells/auth_shell.html   : body class="auth-shell"
       public_widget.html        : body class="public-widget"

   Yönetim şablonları `base.html`'i DOĞRUDAN genişletir ve `body_class`
   bloğunu doldurmaz; gövde sınıfı BOŞ kalır. Dolayısıyla aşağıdaki
   seçicilerin HİÇBİRİ bir yönetim sayfasıyla eşleşemez. Değişmezlik
   teste değil SEÇİCİYE dayanır: kanıt, testten önce yapısaldır.

   Ölçüm tabanı (gerçek Chromium, 14 rota × 7 viewport = 98 koşum):
     • 12px altı metin  : 331 örnek, 16 farklı sınıf
     • 44px altı hedef  : 887 örnek
     • yatay taşma      : 0 (korunacak)
   ------------------------------------------------------------------- */

/* ── 1. Rozet tabanı ────────────────────────────────────────────────
   Aykırı küçük rozetler ortak tabana YÜKSELTİLİR. `cal-cell__today`
   9.92px ile üründeki en küçük metindi; `erz-type` 10px idi. */
.public-shell .cal-cell__today,
.public-shell .cal-chip__title,
.public-shell .cal-chip__type,
.public-shell .event-type-chip,
.public-shell .public-title-eyebrow,
.public-shell .form-hero__brand,
.public-shell .form-status,
.public-widget .erz-type,
.public-widget .event-type-chip {
  font-size: var(--fs-badge);   /* 11.52px */
}

/* ── 2. İnce metin tabanı ───────────────────────────────────────────
   Rozet OLMAYAN hiçbir ziyaretçi metni 12px altına inmez.
   `site-footer-legal` 11.84px ile HER sayfada görünüyordu; kapsam
   sayesinde yönetim footer'ı 11.84px'te DEĞİŞMEDEN kalır. */
.public-shell .site-footer-legal,
.auth-shell   .site-footer-legal,
.public-widget .site-footer-legal,
.public-shell .field-hint,
.auth-shell   .field-hint {
  font-size: var(--fs-caption); /* 12px */
}

/* ── 3. Hata metni ──────────────────────────────────────────────────
   Hata, gövde metninden KÜÇÜK olamaz. Taban 12.48px idi: yardımcı
   metinle aynı ağırlıkta görünüyor ve hiyerarşiyi tersine çeviriyordu. */
.public-shell .field-error,
.public-shell .form-error-summary__text,
.public-shell .form-error-summary__orphan,
.auth-shell   .field-error {
  font-size: var(--fs-small);   /* 14px */
}

/* ── 4. Dokunma hedefi tabanı ───────────────────────────────────────
   Ortak ölçekten gelen ADLI bileşenler. Kart içi içerik bağlantıları
   (liste kartı başlığı, takvim çipi) BİLEREK dışarıda: onlar Paket
   5'te kartın tamamı tek hedef hâline getirilerek çözülür; burada
   dolgu vermek kart düzenini şimdiden bozardı. */
.public-shell .site-footer-link,
.auth-shell   .site-footer-link,
.public-widget .site-footer-link,
/* Üst menü bağlantıları 36–38px ölçülmüştü. Mobilde menü hamburger
   içinde olduğu için ilk denetimde görünmediler; 768px tablette ise
   masaüstü menüsü DOKUNMATİK kullanılıyor. Kapsam sayesinde YÖNETİM
   menüsündeki `.nav-link` öğeleri 36px'te DEĞİŞMEDEN kalır. */
.public-shell .nav-link,
.auth-shell   .nav-link,
.public-widget .nav-link,
.public-shell .public-sort-select,
.public-shell .brand,
.auth-shell   .brand,
.public-widget .brand,
.public-shell .share-icon-btn,
.public-shell .upload-select-btn,
.public-shell .form-inline-link,
.public-shell .form-submit-bar__link,
.auth-shell   .auth-link,
.public-widget .erz-btn {
  min-height: var(--control-min);
  display: inline-flex;
  align-items: center;
}

/* Marka bloğu logo + metni yan yana taşır; hizalama korunur. */
.public-shell .brand,
.auth-shell   .brand,
.public-widget .brand {
  gap: var(--sp-2);
}

/* İkon düğmesi kare kalmalı: yükseklikle birlikte genişlik de tabana
   çıkar, yoksa 42×44 gibi bir dikdörtgen kalırdı. */
.public-shell .share-icon-btn {
  min-width: var(--control-min);
  justify-content: center;
}

/* ── 5. Düğme hiyerarşisi ───────────────────────────────────────────
   `.btn` ailesi ziyaretçi yüzeyinde ölçüldüğünde zaten 44px'e
   çözülüyordu; ancak `min-height` dosyada SEKİZ kez ve çelişkili
   değerlerle (40/44/48) bildirildiği için hangisinin kazandığına
   kaskad karar veriyordu. Burada tek kaynağa bağlanır. `.erz-btn`
   ise `min-height: auto` ile 43px'te kalan TEK gerçek kusurdu. */
.public-shell .btn,
.auth-shell   .btn,
.public-widget .btn,
.public-widget .erz-btn {
  min-height: var(--control-min);
}
.public-shell .btn-lg,
.auth-shell   .btn-lg {
  min-height: var(--control-min-lg);
}

/* ── 6. Yerleşim token'ları ─────────────────────────────────────────
   Kapsayıcı genişliği ve yatay dolgu tek kaynaktan. Mevcut değerlerle
   AYNI sonucu verir; amaç ölçüyü token'a bağlamak, düzeni değiştirmek
   değil. Bu yüzden Paket 1'de taşma sayısı 0'da KALMALIDIR. */
.public-shell .pub,
.auth-shell   .auth-wrap {
  max-width: var(--container-max);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
@media (min-width: 768px) {
  .public-shell, .auth-shell, .public-widget { --gutter: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAKET 2 — NAVİGASYON VE FOOTER (yalnız ZİYARETÇİ yüzeyi)
   ═══════════════════════════════════════════════════════════════════════

   Kapsam sözleşmesi Paket 1'dekiyle AYNI: her kural `.public-shell`,
   `.auth-shell` ya da `.public-widget` gövde sınıfına kapsanmıştır;
   yönetim şablonları bu sınıfları basmaz, dolayısıyla yönetim footer'ı
   ve menüsü ölçülebilir biçimde DEĞİŞMEZ.
   ------------------------------------------------------------------- */

/* ── 1. Footer metin kontrastı ──────────────────────────────────────
   Piksel örneklemesiyle ölçüldü (metin rengi hesaplanmış stilden,
   zemin gerçek pikselden):

       "Her hakkı saklıdır."  #8a94a8 -> 2.96:1   (gerek 4.5)
       "© 2026 …"             #667085 -> 3.85:1 (320px)
                                         4.41:1 (375/1440)

   İkisi de WCAG AA'nın altındaydı; telif satırı 320px'te daha da
   kötüleşiyor, çünkü footer'ın radial degradesi dar ekranda daha koyu
   bir noktadan başlıyor. Renkler tasarım sisteminin nötr token'ına
   bağlanıyor; sabit hex kalmıyor. */
.public-shell .site-footer-copy,
.auth-shell   .site-footer-copy,
.public-widget .site-footer-copy,
.public-shell .site-footer-legal,
.auth-shell   .site-footer-legal,
.public-widget .site-footer-legal {
  color: var(--text-2);
}

/* ── 2. Footer iç çerçevesi kaldırıldı ──────────────────────────────
   `.site-footer-main` footer'ın İÇİNDE ayrı bir karttı: 1px kenarlık,
   degrade zemin, 16px yarıçap ve mor gölge. Footer'ın kendi zemini ve
   üst çizgisi zaten var; iç kart ikinci bir çerçeve üretiyordu.
   Yerleşim (grid) KORUNUR — yalnız çerçeve kalkar. */
.public-shell .site-footer-main,
.auth-shell   .site-footer-main,
.public-widget .site-footer-main {
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ── 3. Menüde TEK birincil eylem ───────────────────────────────────
   Üst menüde iki CTA vardı ve ikisi de aynı görünüyordu: şeffaf zemin
   + 1px beyaz kenarlık. Ziyaretçiye "eşit önemde iki çağrı" diyorlardı.
   Birincil eylem etkinlik göndermek; Kitap Kulübü ikincil kalır.
   Ayrım DOLGU ile yapılır, renkle değil: başlık zaten mor-pembe
   degrade, üstüne ikinci bir degrade okunmuyordu. */
.public-shell .nav-link--cta,
.auth-shell   .nav-link--cta {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .34);
  font-weight: 600;
}
.public-shell .nav-link--cta-secondary,
.auth-shell   .nav-link--cta-secondary {
  background: none;
  border-color: rgba(255, 255, 255, .22);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════
   PAKET 3 — ORTAK DURUM BLOĞU (hata / bulunamadı / sona erdi)
   ═══════════════════════════════════════════════════════════════════════

   `state_page.html` bunu kullanır. Ziyaretçi kabuğuna kapsanmıştır;
   yönetim yüzeyinde `.state-block` hiç basılmaz.

   Ölçü ve renkler Paket 1 token'larından gelir — bu blok kendi
   tipografi ölçeğini KURMAZ. Çerçeve YOK: raporun "her şeyi çerçeve
   içine almak" bulgusundan sonra durum sayfaları da kart içine
   alınmıyor; ayırıcı olarak yalnız boşluk ve ikon kullanılıyor.
   ------------------------------------------------------------------- */
.public-shell .state-block {
  max-width: 34rem;
  margin: var(--sp-6) auto var(--sp-7);
  padding: 0 var(--gutter);
  text-align: center;
}
.public-shell .state-block__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.public-shell .state-block__icon svg {
  width: 26px;
  height: 26px;
}
.public-shell .state-block__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h2);
  line-height: 1.25;
  color: var(--text);
}
.public-shell .state-block__lead {
  margin: 0 auto var(--sp-5);
  max-width: 30rem;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text-2);
}
/* Eylemler mobilde ALT ALTA ve tam genişlikte; masaüstünde yan yana.
   Raporun "mobilde üst üste uzun buton yığınları" uyarısı gereği en
   fazla İKİ eylem basılır (birincil + geri dönüş). */
.public-shell .state-block__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.public-shell .state-block__actions .btn {
  width: 100%;
}
@media (min-width: 480px) {
  .public-shell .state-block__actions {
    flex-direction: row;
    justify-content: center;
  }
  .public-shell .state-block__actions .btn {
    width: auto;
    min-width: 12rem;
  }
}
@media (min-width: 768px) {
  .public-shell .state-block__title { font-size: var(--fs-h1); }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAKET 4 — KİLİTLİ BÖLÜM AÇIKLAMASI (etkinlik gönderme formu)
   ═══════════════════════════════════════════════════════════════════════

   Ölçülen eski davranış:

     * gerekçe `::before` sözde-elemanındaydı — ekran okuyucuya
       duyurulmuyor, odaklanamıyor,
     * bloğun EN ALTINDAydı: bölüm y=794'te başlıyor ve 909px yüksekliğinde,
       yani mobilde metin y≈1650 — iki ekran aşağıda,
     * sayfa açılır açılmaz KIRMIZI bir doğrulama hatası yazıyordu
       ("Ad soyad en az 2 karakter olmalı."), kullanıcı hiçbir alana
       dokunmamışken.

   Artık gerçek bir eleman bölümün BAŞINDA duruyor, `role="status"` ile
   duyuruluyor ve dili duruma göre değişiyor: dokunulmadan önce nötr
   yönlendirme, dokunulduktan sonra uyarı.
   ------------------------------------------------------------------- */
.public-shell .section-locked::before {
  content: none;   /* eski, en altta duran kirmizi kutu */
}

.public-shell .section-lock-note {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  background: var(--primary-soft);
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: 1.5;
}
/* Kullanıcı yazmaya başladıktan SONRA eksik bildirilir; renk o zaman
   uyarıya döner. Bilgi yalnız RENKLE verilmiyor: metnin kendisi zaten
   hangi alanın eksik olduğunu söylüyor. */
.public-shell .section-lock-note--uyari {
  border-color: var(--warn-border);
  border-left-color: var(--warn);
  background: var(--warn-soft);
  color: var(--text);
}

/* Kilitli bölüm artık tamamen tıklanamaz DEĞİL: alanlar zaten
   `disabled`, açıklama ise okunabilir ve seçilebilir kalmalı.
   `pointer-events: none` metni de seçilemez yapıyordu. */
.public-shell .section-locked {
  pointer-events: auto;
}
.public-shell .section-locked .field-input,
.public-shell .section-locked select,
.public-shell .section-locked textarea {
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   PAKET 5 — ETKİNLİK KARTI TEK HEDEF
   ═══════════════════════════════════════════════════════════════════════

   Ölçülen eski durum: kartta İKİ hedef vardı. Birincil içerik bağlantısı
   (başlık) sınıfsız bir satır içi `<a>` idi ve 92×19 … 239×19 px
   ölçülüyordu — dokunma tabanının çok altında. Altında ise tam genişlikte
   degrade bir "Detay" düğmesi duruyordu; gereksiz olan hedefi tutuyor,
   asıl olan tutmuyordu. Üstelik masaüstünde tek ekranda YEDİ adet aynı
   ağırlıkta CTA görünüyordu.

   Çözüm kartı tek bağlantıya indirger: başlık bağlantısı `::after` ile
   kartın tamamını kaplar. Görsel sarmalayıcı zaten `aria-hidden` ve
   `tabindex="-1"` olduğu için klavye ve ekran okuyucu tarafında TEK
   bağlantı kalır — çift duyuru olmaz.
   ------------------------------------------------------------------- */
.public-shell .event-card--public {
  position: relative;
}
.public-shell .event-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
/* Odak halkası kartın TAMAMINDA görünür: bağlantının kendi kutusu hâlâ
   metin kadar, ama klavye kullanıcısı neyin seçili olduğunu kartın
   çerçevesinden görür.

   Bağlantının KENDİ odak halkası BİLEREK bastırılmıyor. İlk yazdığım
   sürüm `outline: none` koyuyordu ve `test_focus_is_not_removed_without_
   a_replacement` bunu haklı olarak düşürdü: o kuralın içinde görünür bir
   alternatif yoktu — alternatif ATA elemandaydı ve statik bir CSS
   taraması bunu göremez. Sözleşmeyi kurcalamak yerine baskılama
   kaldırıldı; iki halka biraz fazlalık ama klavye kullanıcısı lehine
   bir fazlalık. */
.public-shell .event-card--public:focus-within {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
}
/* KAPLAMANIN KONUMLANMA BAĞLAMI.
   `.event-card-body` zaten `position: relative` taşıyordu; bu yüzden
   `inset: 0` kartı DEĞİL gövdeyi referans alıyordu ve kartın alt iki
   köşesi tıklanamıyordu (ölçüldü). Ziyaretçi kartında gövdenin
   konumlanmasına ihtiyaç yok: içinde mutlak konumlanan çocuk kalmadı
   (`.event-type-chip` zaten `position: static`). */
.public-shell .event-card--public .event-card-body {
  position: static;
}
/* Başlık bağlantısının KENDİSİ de statik kalmalı, yoksa kaplama yine
   metnin kutusuna çekilirdi. */
.public-shell .event-card-title a {
  position: static;
}
/* Kart içindeki DİĞER gerçek bağlantılar (bilet etiketleri vb.)
   kaplamanın ÜSTÜNDE kalmalı, yoksa tıklanamazlardı. */
.public-shell .event-card--public .platform-links a,
.public-shell .event-card--public button {
  position: relative;
  z-index: 2;
}

/* Etiketsiz meta satırı: "Tarih:" / "Mekan:" kalktığı için değer artık
   tek başına duruyor ve okunaklı olmalı. */
.public-shell .event-card--public .event-meta-line {
  color: var(--text-2);
  font-size: var(--fs-small);
}

/* ═══════════════════════════════════════════════════════════════════════
   PAKET 5/B — MOBİLDE YATAY KART
   ═══════════════════════════════════════════════════════════════════════

   Ölçülen sorun: 375px'te yedi etkinlik 5244px, aynı içerik masaüstünde
   1744px. Mobil ziyaretçi aynı yedi etkinliği görmek için ÜÇ KAT fazla
   kaydırıyordu. Sebep dikey kart: tam genişlik 4:5 afiş (341x426) +
   gövde ≈ 648px/kart. Paket 5'te "Detay" düğmesi kalkınca 535px'e indi
   ama bu hâlâ bir ekran boyu.

   Çözüm afişi KIRPMAZ — 4:5 oranı korunur, yalnız küçültülür ve sola
   alınır. Kırpmak, afiş yedeği sözleşmesini bozardı: yedek kutu ile
   `img` kutusu birebir aynı ölçüde olmak zorunda (bkz.
   `test_public_visitor_browser_package11`).

   Yalnız DAR ekranda; ≥600px'te ızgara düzeni aynen kalır.
   ------------------------------------------------------------------- */
@media (max-width: 599px) {
  .public-shell .event-card--public {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-3);
    padding: var(--sp-3);
  }
  /* Afiş sarmalayıcısı sabit genişlik; oran 4:5 olduğu için yükseklik
     130px'e oturur. `img` ve "Afiş yok" yedeği AYNI kutuyu paylaşır. */
  .public-shell .event-card--public .event-card-image-wrap {
    width: 104px;
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .public-shell .event-card--public .event-card-body {
    padding: 0;
    min-width: 0;   /* uzun başlık ızgara sütununu genişletemesin */
  }
  /* Üç satırdan sonra kırp: dört satırlık bir başlık kartı yeniden
     uzatırdı. Kırpma GÖRSEL; tam başlık detay sayfasında duruyor. */
  .public-shell .event-card--public .event-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .public-shell .event-card--public .event-meta {
    margin-top: var(--sp-2);
  }
  /* Bilet etiketleri dar sütunda alt alta yığılıp kartı uzatıyordu. */
  .public-shell .event-card--public .platform-links--mini {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAKET 6 — ZİYARETÇİ TAKVİMİ
   ═══════════════════════════════════════════════════════════════════════

   1. ÇİP DOKUNMA HEDEFİ — yalnız KABA İŞARETÇİDE
   Ay ızgarasındaki `.cal-chip` bağlantıları 120x20 / 152x20 ölçüldü.
   Izgara ≥768px'te basılıyor, yani tablette DOKUNMATİK kullanılıyor.

   Hedefi KOŞULSUZ 44px yapmak yanlış olurdu: bir hücrede üç çip + "daha"
   düğmesi var, ay ızgarası gereksiz yere iki katına çıkardı ve fare
   kullanan masaüstü ziyaretçisi bundan hiçbir şey kazanmazdı.
   `pointer: coarse` tam olarak doğru ayrımı yapar — parmakla kullanılan
   cihazda hedef büyür, fareyle kullanılanda düzen korunur.

   2. İÇ İÇE ÇERÇEVE
   Boş ayda `form-card` çerçevesi + araç çubuğu çerçevesi üst üste
   biniyordu. Boş durum artık Paket 3'ün `.state-block` diliyle aynı
   yerde duruyor: çerçevesiz, ortalanmış, tek eylemli.
   ------------------------------------------------------------------- */
@media (pointer: coarse) {
  .public-shell .cal-chip {
    min-height: var(--control-min);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .public-shell .cal-cell__more-toggle {
    min-height: var(--control-min);
    display: flex;
    align-items: center;
  }
}

/* Boş ay: çerçeve kalkıyor, dikey ritim `--sp-*` ölçeğinden geliyor. */
.public-shell .cal-empty {
  border: 0;
  background: none;
  box-shadow: none;
  padding: var(--sp-6) 0 var(--sp-7);
  margin: 0 auto;
  text-align: center;
}
.public-shell .cal-empty .section-title {
  margin-bottom: var(--sp-3);
}
.public-shell .cal-empty .text-muted {
  margin: 0 auto var(--sp-5);
  max-width: 30rem;
  color: var(--text-2);
}

/* ═══════════════════════════════════════════════════════════════════════
   PAKET 7 — AUTH EKRANLARI
   ═══════════════════════════════════════════════════════════════════════

   Denetimin iki bulgusu GERİ ÇEKİLDİ, ikisi gerçek çıktı:

   * "Şifremi unuttum bağlantısı yok" — YANLIŞ. Bağlantı şablonda var,
     `{% if reset_enabled %}` içinde. Önizleme betiği e-posta gönderdiği
     için `ADMIN_PASSWORD_RESET_ENABLED`ı kapatıyor; üretim varsayılanı
     `true`. Bulgu bir ÖNİZLEME ARTEFAKTIYDI.
   * "Bu cihazı kaydet açıklaması yok" — açıklama BİLEREK kaldırılmış
     (cihaz yönetimi Ayarlar › Güvenilir Cihazlar'da). Kararlı bir tercih
     tersine çevrilmiyor.

   Gerçek olanlar aşağıda.
   ------------------------------------------------------------------- */

/* 1. PAZARLAMA İÇERİĞİ AUTH EKRANINDA GEREKSİZ.
   Giriş sayfası "+ Etkinlik Gönder" ve "Kitap Kulübü" çağrılarını,
   footer da "Erzurum'daki etkinlikleri tek noktadan takip edin"
   satırını taşıyordu. Buraya gelen kişi yönetime giriyor.

   Gezinme bağlantıları (Etkinlikler / Etkinlik Takvimi), marka ve
   `/gizlilik` dâhil footer bağlantıları KALIR: siteye dönüş yolu
   kapatılmıyor, yalnız pazarlama çağrıları susuyor.
   `display: none` erişilebilirlik ağacından ve sekme sırasından da
   çıkarır — görsel olarak gizleyip klavyede bırakmak daha kötü olurdu. */
.auth-shell .nav-link--cta,
.auth-shell .site-footer-text {
  display: none;
}

/* 2. KART İLE FOOTER ARASINDA 272px ÖLÜ BOŞLUK (375x812'de ölçüldü).
   Kart üste yapışık duruyordu. Dikey ortalama, KISA ekranda taşma
   üretmemeli: `min-height` ile `justify-content: center` birlikte,
   içerik sığmazsa normal akışa döner ve sayfa kaydırılır. */
.auth-shell .auth-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 13rem);
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
}

/* 3. ŞİFRE GÖSTER DÜĞMESİ 12.16px metin ve küçük hedefti.
   Alan içinde sağa yaslı duruyor; hedef büyürken metnin üstüne
   binmemesi için genişleme sağdaki boş alana doğru. */
.auth-shell .field-password-toggle {
  min-width: var(--control-min);
  min-height: var(--control-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
}

/* ═══════════════════════════════════════════════════════════════════════
   PAKET 9 — ERİŞİLEBİLİRLİK VE PERFORMANS
   ═══════════════════════════════════════════════════════════════════════

   İÇERİĞE ATLA. Sayfada `<main id="main-content">` zaten vardı ama ona
   giden bir bağlantı yoktu: klavyeyle gelen ziyaretçi her sayfada başlık
   ve menünün tamamını sekmeyle geçmek zorundaydı.

   Bağlantı ekran DIŞINDA durur, `display: none` DEĞİLDİR — gizlenseydi
   sekme sırasına hiç girmez ve hiçbir işe yaramazdı. Odak aldığında
   görünür hâle gelir.

   Kabuk ayrımı YOK: bu bağlantı yönetim ekranlarında da aynı işi görür
   ve orada da bir kazançtır. Görsel fark üretmez — yalnız odaklanınca
   görünür.
   ------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  min-height: var(--control-min);
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  color: var(--primary-dark);
  font-size: var(--fs-small);
  font-weight: 600;
  border: 2px solid var(--primary);
  border-radius: 0 0 var(--radius-sm) 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   ÇEREZ TERCİHİ BANDI VE PENCERESİ
   ==========================================================================

   Yerleşim kuralları:
   * Bant sayfanın ALTINA sabitlenir ama içeriği KAPATMAZ: bant görünürken
     `body` alt boşluğu kadar yer bırakılır, böylece mobilde form gönder
     düğmesi bandın altında kalmaz.
   * Üç seçenek AYNI görsel ağırlıkta. Ret düğmesi soluk ya da ikincil
     değildir; yanıltıcı renk/yerleşim yoktur.
   * Mevcut bileşen dili kullanılır (`.btn`, `.form-card`, `--sp-*`,
     `--radius-*`); yeni bir tipografi ölçeği getirilmez.
   ========================================================================== */
.oto-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Yukarı çıkma düğmesi (800) ve sabit başlık (100) üzerinde. */
  z-index: 900;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.12);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
}
.oto-consent[hidden] {
  display: none;
}
.oto-consent__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
}
.oto-consent__text {
  flex: 1 1 320px;
  min-width: 0;
}
.oto-consent__title {
  margin: 0 0 var(--sp-1);
  font-weight: 700;
}
.oto-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
/* Üç düğme de birincil: hiçbiri diğerinden kolay ya da zor değil. */
.oto-consent__actions .btn {
  min-height: var(--control-min);
  flex: 1 1 auto;
}
.oto-consent__status {
  max-width: var(--container-max);
  margin: var(--sp-2) auto 0;
}
.oto-consent__status--error {
  color: var(--danger, #b91c1c);
  font-weight: 600;
}
/* Bant görünürken sayfanın altına yer aç: içerik ve düğmeler kapanmasın.

   Yükseklik SABİT DEĞİL: `consent.js` bandın gerçek yüksekliğini
   `--oto-consent-height` değişkenine yazar. Sabit bir `rem` değeri, metin
   uzunluğu ya da kullanıcının yazı tipi ölçeği değiştiğinde yetersiz kalır
   ve bant mobilde form gönder düğmesinin üstünü kapatırdı. Değişken
   yoksa (JavaScript kapalı) güvenli bir taban kullanılır. */
body:has(#otoConsentBanner:not([hidden])) {
  padding-bottom: calc(var(--oto-consent-height, 16rem) + var(--sp-4, 1rem));
}

.oto-consent-dialog {
  position: fixed;
  inset: 0;
  /* Modal: sabit başlık (100) ve diğer her şeyin ÜSTÜNDE. Altta kalırsa
     başlık pencerenin başlığını örter ve odak görünmez olurdu. */
  z-index: 1000;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  overflow-y: auto;
}
.oto-consent-dialog[hidden] {
  display: none;
}
.oto-consent-dialog__panel {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
}
.oto-consent-dialog__row {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.oto-consent-dialog__row:last-of-type {
  border-bottom: 0;
}
.oto-consent-dialog__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--control-min);
  font-weight: 600;
  cursor: pointer;
}
.oto-consent-dialog__label input {
  width: 1.15rem;
  height: 1.15rem;
}
/* Panel odaklanabilir yalnız pencerenin BAŞINDAN başlaması için; tıklanabilir
   bir denetim değil. Varsayılan kalın halka yerine görünür bir alternatif
   bırakılıyor: odak KALDIRILMIYOR, daha sakin bir işarete çevriliyor. */
.oto-consent-dialog__panel:focus,
.oto-consent-dialog__panel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-soft, #f5f3ff), 0 18px 48px rgba(15, 23, 42, .25);
}
/* Dar ekranda dört eylem tek sütuna iner; hiçbiri yarım kalmaz. */
@media (max-width: 520px) {
  .oto-consent-dialog__panel .action-row {
    flex-direction: column;
    align-items: stretch;
  }
  .oto-consent-dialog__panel .action-row .btn {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAKET C — ZİYARETÇİ YÜZEYİ: FOOTER, DETAY RİTMİ, YÖNETİM ETİKETİ
   ═══════════════════════════════════════════════════════════════════════

   Kapsam sözleşmesi Paket 1/2 ile AYNI: her kural `.public-shell`,
   `.auth-shell` ya da `.public-widget` gövde sınıfına kapsanır (yönetim
   etiketi hariç — o zaten yalnız ziyaretçi kabuğunda basılan üst çubukta).
   Yönetim şablonları bu sınıfları basmaz; yönetim footer'ı ve menüsü
   ÖLÇÜLEBİLİR BİÇİMDE DEĞİŞMEZ.

   Afiş kompozisyonuna (blur üst/alt bantlar) DOKUNULMAZ: o kasıtlı bir
   poster tasarımıdır, `poster_service.py:312-327`.
   ------------------------------------------------------------------- */

/* ── 1. Footer bağlantıları masaüstünde TEK SÜTUN YIĞIN DEĞİL ────────
   Ölçüldü (canlı `/e/80`, 1440×900):
       .site-footer          373px
       .site-footer-links    275px   (6 bağlantı × 44px + boşluk)
       .site-footer-brand     39px
   Bağlantılar her genişlikte tek sütuna diziliyordu; sağa dayalı sütun
   ile sol marka bloğu arasında ~1150px boşluk kalıyor ve footer sayfanın
   %24'ünü kaplıyordu.

   MOBİLDE HİÇBİR ŞEY DEĞİŞMEZ: kural 769px ve üzeri içindir, 44px
   dokunma hedefi 768px'e kadar (tablet dokunmatik dâhil) korunur. */
@media (min-width: 769px) {
  .public-shell .site-footer-links,
  .auth-shell   .site-footer-links,
  .public-widget .site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: center;
    gap: .15rem 1.4rem;
    /* Altı bağlantı tek satırda ~930px yer istiyor; sınırsız bırakılırsa
       altbilgi baştan sona yatay bir şerit oluyor ve marka sütununa yer
       kalmıyordu (1024px'te marka sütunu eziliyor, altbilgi 1045px'e
       uzuyordu). Sınır bağlantıları iki-üç dengeli satıra sarar. */
    max-width: 28rem;
  }
  /* Fare hedefi: 34px WCAG 2.2 AA (2.5.8, 24px) sınırının üzerinde kalır;
     dokunmatik genişliklerde 44px kuralı yerinde durur. */
  .public-shell .site-footer-link,
  .auth-shell   .site-footer-link,
  .public-widget .site-footer-link {
    min-height: 34px;
  }
  /* Marka ile bağlantılar arası boşluk: bağlantı sütunu ihtiyacı kadar
     yer kaplar, ikisi birbirinden KOPUK durmaz.

     Sütun sırası [marka, bağlantılar] olduğu için ARTAN ALAN MARKAYA
     verilir. Bunun tersi (`auto 1fr`) ölçüldü: bağlantı sütunu 1440px'te
     904px'e şişiyor, `justify-content: flex-end` altı bağlantıyı o
     genişliğe yayıyor ve altıncısı tek başına alt satıra düşüyordu —
     altbilgi "yatayda yayılmış" görünüyordu. */
  .public-shell .site-footer-main,
  .auth-shell   .site-footer-main,
  .public-widget .site-footer-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    column-gap: 2rem;
  }
}

/* Tablet (481–768px): DOKUNMATİK sayılır, 44px hedef KORUNUR — ama altı
   bağlantı tek sütunda 274px yer kaplıyordu. İki sütun aynı hedef
   yüksekliğiyle bunu üç satıra indirir; her sütun ~340px, yani hedefler
   birbirine yaklaşmaz. */
@media (min-width: 481px) and (max-width: 768px) {
  .public-shell .site-footer-links,
  .auth-shell   .site-footer-links,
  .public-widget .site-footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }
}

/* ── 2. İçerik ile footer arasındaki gereksiz boşluk ─────────────────
   Ölçüldü: "← Tüm etkinlikler" düğmesinin altından footer'ın üstüne
   106px vardı — 48px `.main-content` alt dolgusu, 32px
   `.public-event-page` alt dolgusu ve grid artığı. */
.public-shell .main-content {
  padding-bottom: 1.5rem;
}
/* Afişli detayda ayrım zaten grid satır boşluğundan geliyor; ikinci bir
   alt dolgu ölçülebilir bir katkı yapmadan boşluğu büyütüyordu. */
.public-shell .public-event-page {
  padding-bottom: .5rem;
}

/* ── 3. Sağ sütunun dikey ritmi ──────────────────────────────────────
   Ölçüldü (1440×900): bloklar arası 68 / 75 / 65px iken bilgi kartı
   satır aralığı 63px'ti; ayırıcılar bilgiden daha çok yer tutuyordu. */
.public-shell .public-tickets {
  margin: 1.5rem 0;
}
.public-shell .share-block {
  margin-top: 1.5rem;
  padding-top: 1.15rem;
}
.public-shell .public-actions {
  margin-top: 1.5rem;
  padding-top: 1.15rem;
}

/* ── 4. Kısa değerlerde geniş sabit etiket alanı ─────────────────────
   "Tarih" ve "Saat" 7.6rem'lik sabit sütunda duruyordu; en uzun etiket
   ("Organizasyon") 6.4rem'e sığıyor ve dar ekran kırılımı zaten bu
   değeri kullanıyordu. Etiketler HİZALI kalır (sütun sabit), yalnız
   gereksiz genişlik gider. */
.public-shell .public-meta-list {
  --meta-label-w: 6.4rem;
}

/* ── 5. Uzun başlıklar 320–1440px arasında taşmaz ────────────────────
   `break-word` yalnız satıra SIĞMAYAN sözcüğü böler; `anywhere` her
   yerden bölüp okunaklığı düşürürdü. */
.public-shell .page-title--public {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ── 6. "YÖNETİM" bölüm etiketi ──────────────────────────────────────
   Ölçüldü: `rgba(255,255,255,.58)` üst çubuğun degradesi üzerinde
   2,88:1 (gerekli 4,5:1) ve 10,56px — projenin kendi "ziyaretçi metni
   12px altına inmez" kuralının altında.

   Degradenin EN AÇIK ucu `#db2777`; orada bile AA'yı geçen tek değer
   TAM BEYAZ (4,60:1). Ayrım renkle değil, ölçü ve harf aralığıyla
   kurulur: etiket hâlâ bağlantılardan küçük, aralıklı ve büyük harf. */
.nav-section-label {
  font-size: .75rem;          /* 12px — ziyaretçi metni tabanı */
  color: #ffffff;
}

/* ——— KAYNAK GÖNDERİLERİ (R24) ———————————————————————————————————
 *
 * Liste satırındaki küçük afiş önizlemesi. Boyut ŞABLONDA da yazılı
 * (`width`/`height`): görsel inmeden önce yer ayrılır ve satır oynamaz.
 * Büyük görseller listeyi ağırlaştırmasın diye `object-fit` ile kırpılır
 * ve `loading="lazy"` korunur.
 */
.queue-source-preview {
  display: block;
  width: 96px;
  height: 120px;
  margin-top: .5rem;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-muted, #f3f4f6);
}

/* Görsel yoksa, bozuksa ya da desteklenmeyen medyaysa AYNI kutuyu dolduran
 * tasarımlı boş durum: kırık ikon görünmez, satır yüksekliği değişmez. */
.queue-source-preview--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-muted, #d1d5db);
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  text-align: center;
  padding: .25rem;
}

/* Panel kartındaki zaman damgası sayı değil metin: aynı kutuda taşmasın. */
.visit-card-value--small {
  font-size: 1rem;
  line-height: 1.35;
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════════
   PLAN U1 — SADE ALTBİLGİ
   ═══════════════════════════════════════════════════════════════════════
   Marka yalnız METİN (logo/amblem yok) ve tek bağlantı olarak ana sayfaya
   gider. Sağ bölüm: "Gizlilik", tek "Çerezler", Instagram ve e-posta
   simgeleri — masaüstünde tek dengeli satır; dar ekranda ortalanmış,
   dokunulabilir tek satır (sığmazsa sarılır ama "Çerezler" iki metin
   bağlantısından ayrı düşmez: simgeler kendi grubundadır). Telif satırı
   ince bir çizgiyle ayrılır ve marka adını tekrarlamaz. Renk kimliği
   mevcut mor tonlarıdır. */
.site-footer-title {
  display: inline-block;
  text-decoration: none;
}
a.site-footer-title:hover,
a.site-footer-title:focus-visible {
  text-decoration: underline;
  color: #4c1d95;
}
.site-footer-icons {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.site-footer-icon {
  min-width: 34px;
  min-height: 34px;
  justify-content: center;
  border-radius: 10px;
}
.site-footer-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}
.site-footer-icon:hover {
  background: rgba(124, 58, 237, .08);
  text-decoration: none;
}
.site-footer-link:focus-visible,
a.site-footer-title:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
  border-radius: 6px;
}
.site-footer-copy {
  border-top: 1px solid #ebe5ff;
  margin-top: .9rem;
  padding-top: .8rem;
}
.public-shell .site-footer-title,
.auth-shell   .site-footer-title,
.public-widget .site-footer-title {
  color: #4c1d95;
  font-size: 1.12rem;
}
.public-shell .site-footer-icon,
.auth-shell   .site-footer-icon,
.public-widget .site-footer-icon {
  min-width: var(--control-min);
}

@media (min-width: 769px) {
  .public-shell .site-footer-links,
  .auth-shell   .site-footer-links,
  .public-widget .site-footer-links {
    align-items: center;
    column-gap: 1.6rem;
  }
  .public-shell .site-footer-icon,
  .auth-shell   .site-footer-icon,
  .public-widget .site-footer-icon {
    min-width: 34px;
  }
}

@media (max-width: 768px) {
  /* Marka artık `<p>` değil satır içi bağlantı: ortalanması kapsayıcıdan
     gelir (tanıtım satırıyla aynı eksen). */
  .site-footer-brand {
    text-align: center;
  }
  .public-shell .site-footer-links,
  .auth-shell   .site-footer-links,
  .public-widget .site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .1rem 1.2rem;
  }
}

/* Plan U1 — "Çerezler" sayfasının bölüm çapaları (`/cerezler#tercihler`,
   `#politika`). Eski adresler bu çapalara yönlenir; yapışkan üst menü
   (≈71px) bölüm başlığını örtmesin. */
.public-shell #tercihler,
.public-shell #politika {
  scroll-margin-top: 88px;
}

/* ==========================================================================
   MOBİL KOMPAKT ZİYARETÇİ GÖRÜNÜMÜ — liste tür filtresi + etkinlik detayı
   --------------------------------------------------------------------------
   Düzen değişiklikleri YALNIZ dar ekrandadır (≤639px); geniş ekranda liste
   ve detay düzeni değişmez. Tür simgesi ve "Afişi aç" bağlantısı geniş
   ekranda gizlidir. Benzer kartların simgeli meta listesi yeni yapı olduğu
   için her genişlikte stil alır.
   ========================================================================== */
.type-chip-icon { display: none; }
.public-event-poster-open { display: none; }

/* Benzer kart: tarih / saat / mekân, her biri kendi simgesiyle. Eksik bilgi
   şablonda hiç basılmaz. Uzun mekân tek satırda üç noktayla kısalır. */
.similar-card-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .75rem;
  min-width: 0;
  font-size: .8rem;
  color: var(--muted);
}
.similar-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-width: 0;
  max-width: 100%;
}
.similar-card-meta-item--venue { flex-basis: 100%; }
.similar-card-meta-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.similar-card-meta .meta-icon {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--primary);
}
.similar-card-meta .meta-icon svg { width: .85rem; height: .85rem; }
/* Uzun başlık iki satırda kesilir; kartı kaplayan bağlantı (`::after`) kartın
   kendisine konumlandığı için bu kırpmadan etkilenmez. */
.similar-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 639px) {
  /* ── Liste: tür filtresi ──────────────────────────────────────────────
     Yatay kaydırılan tek satır sağ kenarda çipleri kırpıyordu. Artık
     sarmalanan simgeli kutular: hepsi görünür, her biri ≥44px dokunma
     hedefi. Bağlantılar, sayılar ve `aria-current` aynen korunur. */
  .public-shell .public-type-filter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr));
    gap: .45rem;
    overflow: visible;
    margin: 0 0 .75rem;
    padding: 0;
  }
  .public-shell .public-type-filter .type-chip {
    position: relative;
    overflow-wrap: break-word;
    flex-direction: column;
    justify-content: center;
    gap: .22rem;
    min-width: 0;
    min-height: 3.6rem;
    padding: .45rem .2rem .4rem;
    border-radius: .9rem;
    font-size: .68rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }
  .public-shell .public-type-filter .type-chip-icon {
    display: inline-flex;
    order: -1;
  }
  .public-shell .public-type-filter .type-chip-icon svg {
    width: 1.15rem;
    height: 1.15rem;
  }
  /* Sayı kutunun köşesinde küçük rozet: kutu yüksekliğini büyütmez. */
  .public-shell .public-type-filter .type-count {
    position: absolute;
    top: .2rem;
    right: .2rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .25rem;
    font-size: .6rem;
  }
  /* Seçili kutu: degrade zemin + beyaz metin + belirgin gölge. */
  .public-shell .public-type-filter .type-chip--active {
    box-shadow: 0 6px 16px rgba(109, 40, 217, .32);
  }

  /* ── Detay: gezinme satırı ─────────────────────────────────────────────
     Solda geri düğmesi, sağda AYNI satırda Tür · Ücret. 390px'te tek satır;
     daha dar ekranda bilgi kesilmeden alt satıra, sağa yaslı kırılır. */
  .public-shell .public-event-topline {
    justify-content: space-between;
    gap: .35rem .75rem;
    margin: 0 0 .6rem;
    font-size: .82rem;
  }
  .public-shell .public-event-back {
    min-height: 44px;
    padding: 0 .8rem;
    border: 1.5px solid var(--primary-muted);
    border-radius: 999px;
    background: var(--surface);
  }
  .public-shell .public-event-topline-info { margin-left: auto; }

  /* ── Detay: başlık, afiş ve bilgi ──────────────────────────────────────
     Başlık tam genişlik; altında küçük afiş (oran korunur, kırpılmaz) ve
     yanında Tarih / Saat / Mekân. Başlık kabuğu (`header`) ızgarada
     `contents` olur ki h1 ile bilgi listesi ayrı yerleşebilsin. */
  .public-shell .public-event-page--with-poster {
    display: grid;
    grid-template-columns: 7.25rem minmax(0, 1fr);
    column-gap: .85rem;
    align-items: start;
  }
  .public-shell .public-event-page--with-poster > * {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .public-shell .public-event-page--with-poster .public-event-header { display: contents; }
  .public-shell .public-event-page--with-poster .public-event-topline { grid-row: 1; }
  .public-shell .public-event-page--with-poster .page-title--public { grid-row: 2; grid-column: 1 / -1; }
  .public-shell .public-event-page--with-poster .public-event-hero {
    grid-row: 3;
    grid-column: 1;
    margin: 0;
  }
  .public-shell .public-event-page--with-poster .public-meta-list {
    grid-row: 3;
    grid-column: 2;
  }
  .public-shell .page-title--public {
    margin: .2rem 0 .8rem;
    font-size: 1.35rem;
  }
  .public-shell .public-event-page--with-poster .public-event-hero img {
    max-height: none;
    height: auto;
  }
  .public-shell .public-event-poster-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-height: 44px;
    margin-top: .4rem;
    border-radius: var(--r-sm);
    background: var(--text);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none;
  }
  .public-shell .public-event-poster-open svg { width: .9rem; height: .9rem; }
  /* Afiş sunulamadıysa (yedek görünür) açılacak bir afiş de yoktur. */
  .public-shell .public-event-hero:has(> [data-poster-fallback]:not([hidden])) .public-event-poster-open {
    display: none;
  }
  .public-shell .public-meta-list { gap: .55rem; }
  .public-shell .public-meta-list li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .05rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: .9rem;
  }
  .public-shell .public-meta-list li > .meta-icon { display: none; }
  .public-shell .public-meta-list .meta-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
  }
  .public-shell .public-body { margin-top: 1rem; }

  /* ── Detay: bilet ve rezervasyon ───────────────────────────────────────
     Tek satırlık kart: başlık solda, platform bağlantıları sağda. Ücret
     bilgisi düğmeye eklenmez (gezinme satırında durur). */
  .public-shell .public-tickets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 .75rem;
    margin: 1rem 0 0;
    padding: 0 .85rem;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
  }
  .public-shell .public-tickets-title {
    margin: 0;
    font-size: .85rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
  }
  .public-shell .public-tickets .platform-links {
    margin: 0 0 0 auto;
    gap: 0 .75rem;
    justify-content: flex-end;
  }
  .public-shell .public-tickets .platform-link-btn {
    min-height: 44px;
    padding: 0 .1rem;
    border: 0;
    background: none;
    color: var(--primary);
  }
  .public-shell .public-tickets .platform-link-btn:hover {
    background: none;
    color: var(--primary-dark);
    text-decoration: underline;
  }

  /* ── Detay: Paylaş ve Takvime ekle yan yana ────────────────────────────
     Takvim bağlantısı yoksa (başlangıç bilinmiyor) tek düğme tam genişlik
     kalır. İkisi de ≥44px. "Google" sözcüğü görünmez ama erişilebilir adda
     kalır. */
  .public-shell .share-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: .6rem;
  }
  .public-shell .share-row .share-btn {
    width: 100%;
    min-height: 46px;
    padding: .5rem .6rem;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
  .public-shell .share-btn-label-extra {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ── Detay: benzer etkinlikler kısa yatay kart ─────────────────────────── */
  .public-shell .similar-card {
    grid-template-columns: 4rem minmax(0, 1fr);
    column-gap: 0;
  }
  .public-shell .similar-card-body {
    gap: .25rem;
    padding: .55rem .75rem;
  }
  .public-shell .similar-card-title { font-size: .9rem; }
}

/* ==========================================================================
   MOBİL KOMPAKT — İKİNCİ SIKILAŞTIRMA (tür kutuları + detay aralıkları)
   --------------------------------------------------------------------------
   "Diğer" açılımı ve liste denetimleri üçüncü düzenlemede yeniden yazıldı
   (bkz. aşağıdaki "ÜÇÜNCÜ DÜZENLEME" bloğu).
   ========================================================================== */

@media (max-width: 639px) {
  /* ── Liste: tek sırada dört ana tür + "Diğer" ──────────────────────────── */
  .public-shell .public-type-filter {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: .35rem;
    margin-bottom: .5rem;
  }
  .public-shell .public-type-filter .type-chip {
    min-height: 3.4rem;
    padding: .4rem .15rem .35rem;
    font-size: .66rem;
  }

  /* ── Detay: bölüm aralıkları ─────────────────────────────────────────────
     Açıklama, bilet, paylaşım seçenekleri ve öneriler YERİNDE; yalnız
     aralarındaki boşluklar daralır. Yazı ölçüleri değişmez. */
  .public-shell .page-title--public { margin: .15rem 0 .65rem; }
  .public-shell .public-event-page--with-poster {
    grid-template-columns: 6.75rem minmax(0, 1fr);
  }
  .public-shell .public-body { margin-top: .75rem; }
  .public-shell .public-tickets { margin-top: .75rem; }
  .public-shell .share-block {
    margin-top: .8rem;
    padding-top: .75rem;
  }
  .public-shell .share-channels { margin-top: .5rem; }
  .public-shell .similar-events {
    margin-top: .9rem;
    padding-top: .8rem;
  }
  .public-shell .similar-events-title { margin-bottom: .55rem; }
  .public-shell .similar-events-grid { gap: .55rem; }
  /* Alttaki ikinci "← Tüm etkinlikler": dar ekranda üstteki düğme ilk
     görünümde ve sayfa artık kısa; tekrar gizlenir. Geniş ekranda (uzun
     sağ sütun) yerinde kalır. */
  .public-shell .public-event-page .public-actions { display: none; }
}

/* 360px ve altı: beş kutu dar kaldığı için sayı rozeti kutunun köşesinin
   DIŞINA alınır, simgenin üstüne binmez. */
@media (max-width: 360px) {
  .public-shell .public-type-filter .type-count {
    top: -.35rem;
    right: -.3rem;
    box-shadow: 0 0 0 2px var(--surface);
  }
  .public-shell .public-type-filter .type-chip--active .type-count {
    background: var(--primary-dark);
  }
}

/* ==========================================================================
   ÜÇÜNCÜ DÜZENLEME — tür seçimi, yatay kartlar, "Etkinlik hakkında"
   --------------------------------------------------------------------------
   * "Ne zaman" filtresi ve görünür "Tümü" çipi kaldırıldı.
   * Dört ana tür + "Diğer" (`<details>`; JavaScript GEREKMEZ). "Diğer"
     geniş ekranda sağa yaslanır; açılan bölüm içeriğin üstünde katmandır,
     dar ekranda sürekli ikinci bir satır oluşturmaz.
   * Liste kartı her genişlikte yatay: 4:5 afiş küçük ve solda (oran
     korunur, afiş yedeği aynı kutuyu paylaşır), başlık/tarih/saat/mekân
     sağda. 1280px'te ilk sıranın bilgileri ilk ekranda okunur.
   ========================================================================== */
.public-shell .public-type-filter { position: relative; }
.type-filter-more { position: relative; }
.type-filter-more-toggle { list-style: none; cursor: pointer; user-select: none; }
.type-filter-more-toggle::-webkit-details-marker { display: none; }
.type-filter-more-toggle::marker { content: ""; }
.type-filter-more-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.type-filter-others {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 15rem;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.type-filter-other {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: 0 .75rem;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: .88rem;
  font-weight: 650;
  text-decoration: none;
}
.type-filter-other:hover { background: var(--primary-soft); color: var(--primary-dark); text-decoration: none; }
.type-filter-other:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.type-filter-other.is-active { background: var(--primary-muted); color: var(--primary-dark); }
.type-filter-other .type-chip-icon { display: inline-flex; }
.type-filter-other .type-chip-icon svg { width: 1.05rem; height: 1.05rem; }
.type-filter-other-label { flex: 1 1 auto; min-width: 0; }
.type-filter-other .type-count {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .38rem;
  border-radius: 999px;
  background: rgba(17, 24, 39, .08);
  font-size: .72rem;
  line-height: 1.25rem;
  text-align: center;
}
/* "Filtreyi temizle": seçili tür varken sayacın yanında; ≥44px hedef. */
.type-filter-clear {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: .5rem;
  color: var(--primary-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 640px) {
  /* "Diğer" sağa yaslanır. */
  .public-shell .public-type-filter { flex-wrap: wrap; }
  .public-shell .public-type-filter .type-filter-more { margin-left: auto; }
}

/* ── Liste kartı: her genişlikte yatay ─────────────────────────────────── */
.public-shell .event-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 1rem;
}
.public-shell .event-card--public {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-3);
}
.public-shell .event-card--public .event-card-image-wrap {
  width: 128px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.public-shell .event-card--public .event-card-body {
  padding: 0;
  min-width: 0;
}
.public-shell .event-card--public .event-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.public-shell .event-card--public .platform-links--mini {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
/* Tarih · saat aynı satırda, mekân kendi satırında; simgeler küçük ve
   `aria-hidden`. Uzun mekân üç noktayla kısalır. */
.public-shell .event-card--public .event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .8rem;
  margin-top: var(--sp-2);
  min-width: 0;
}
.public-shell .event-card--public .event-meta-line {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  max-width: 100%;
}
.public-shell .event-card--public .event-meta-line--venue { flex-basis: 100%; }
.public-shell .event-card--public .event-meta-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.public-shell .event-card--public .event-meta .meta-icon {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--primary);
}
.public-shell .event-card--public .event-meta .meta-icon svg { width: .9rem; height: .9rem; display: block; }

@media (max-width: 599px) {
  .public-shell .event-card--public { grid-template-columns: 104px minmax(0, 1fr); }
  .public-shell .event-card--public .event-card-image-wrap { width: 104px; }
}

/* ── Detay: "Etkinlik hakkında" ─────────────────────────────────────────── */
.public-about {
  margin: 1rem 0 0;
  padding: .85rem 1rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  min-width: 0;
}
.public-about-title {
  margin: 0 0 .4rem;
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
}
.public-shell .public-about .public-body,
.public-shell .public-about .public-summary {
  margin: 0;
  line-height: 1.6;
  overflow-wrap: break-word;
}
@media (min-width: 860px) {
  .public-event-page--with-poster .public-about { grid-column: 2; }
}
@media (max-width: 639px) {
  .public-shell .public-about { margin-top: .75rem; padding: .6rem .8rem .7rem; }
  .public-shell .public-about-title { margin-bottom: .25rem; }

  /* Mobil liste: "Diğer" beşinci kutu; açılan bölüm AYNI satırın altında
     içeriğin üstünde açılır (sürekli ikinci satır yok). */
  .public-shell .public-type-filter .type-filter-more { position: static; min-width: 0; }
  .public-shell .public-type-filter .type-filter-more-toggle { height: 100%; }
  .public-shell .type-filter-others {
    left: 0;
    right: 0;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Sayaç ve sıralama tek satır; sığmazsa sıralama alt satıra iner. */
  .public-shell .public-count-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .3rem .75rem;
    margin: 0 0 .75rem;
  }
  .public-shell .public-count-row .event-count-hint { margin: 0; font-size: .82rem; }
  .public-shell .public-list-controls { width: auto; }
  .public-shell .public-sort { width: auto; flex-wrap: nowrap; }
  .public-shell .public-sort-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .public-shell .public-sort-select { min-height: 44px; }
}
/* "Diğer" paneldeki bağlantılar kutu değil satırdır: kutuya özgü köşe
   rozeti ve üste alınan simge burada uygulanmaz. */
.public-shell .public-type-filter .type-filter-other .type-count {
  position: static;
  box-shadow: none;
}
.public-shell .public-type-filter .type-filter-other .type-chip-icon { order: 0; }
/* Özet kutusu hücreyi doldurur (içeriği kadar daralmaz); kapalı açılımın
   paneli her tarayıcıda yer kaplamaz. */
.public-shell .type-filter-more > .type-filter-more-toggle { display: flex; width: 100%; box-sizing: border-box; }
.type-filter-more:not([open]) > .type-filter-others { display: none; }
.public-shell .public-count-row .type-filter-clear { margin-left: 0; margin-right: auto; }
@media (min-width: 640px) {
  .public-shell .type-filter-more > .type-filter-more-toggle { display: inline-flex; width: auto; }
}
/* Detay gezinme satırı: geri düğmesi ve tür bağlantısı her genişlikte ≥44px
   dokunma hedefi (görünüm aynı; yalnız tıklanabilir alan büyür). */
.public-shell .public-event-back,
.public-shell .public-event-topline-part--type {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Masaüstü detay: iletişim bölümü eklenince ızgaranın açık satırları
   bitiyor ve paylaşım bloğu afişin altına (sol sütuna) düşüyordu. Sağ
   sütundaki bütün bloklar açıkça ikinci sütuna yerleşir. */
@media (min-width: 860px) {
  .public-event-page--with-poster .share-block,
  .public-event-page--with-poster .public-about { grid-column: 2; }
}
/* Mobil sayaç satırı: solda sayaç (altında gerekirse "Filtreyi temizle"),
   sağda sıralama. 360px ve altında alt alta. */
@media (max-width: 639px) {
  .public-shell .public-count-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: .75rem;
    row-gap: 0;
  }
  .public-shell .public-count-row .event-count-hint { grid-column: 1; text-align: left; }
  .public-shell .public-count-row .type-filter-clear { grid-column: 1; justify-self: start; font-size: .82rem; }
  .public-shell .public-count-row .public-list-controls { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 360px) {
  .public-shell .public-count-row { grid-template-columns: minmax(0, 1fr); }
  .public-shell .public-count-row .public-list-controls { grid-column: 1; grid-row: auto; }
}
/* Masaüstü detay ritmi. Sağ sütundaki bloklar kendi dış boşluklarını ızgara
   aralığının ÜSTÜNE ekliyordu (60–70px boşluklar) ve uzun afişin fazla
   yüksekliği içerik satırlarından birine (iletişim) dağılıyordu. Aralığı
   yalnız ızgara verir; satır sayısı şablonda sayılan blok sayısıdır
   (`public-event-page--rows-N`) ve fazla yükseklik içerikten SONRAKİ tek
   boş satıra gider. */
@media (min-width: 860px) {
  .public-shell .public-event-page--with-poster { row-gap: 1.1rem; }
  .public-shell .public-event-page--rows-4 { grid-template-rows: repeat(4, min-content) 1fr; }
  .public-shell .public-event-page--rows-5 { grid-template-rows: repeat(5, min-content) 1fr; }
  .public-shell .public-event-page--rows-6 { grid-template-rows: repeat(6, min-content) 1fr; }
  .public-shell .public-event-page--rows-7 { grid-template-rows: repeat(7, min-content) 1fr; }
  .public-shell .public-event-page--rows-8 { grid-template-rows: repeat(8, min-content) 1fr; }
  .public-shell .public-event-page--with-poster .public-event-topline,
  .public-shell .public-event-page--with-poster .public-event-header,
  .public-shell .public-event-page--with-poster .public-about,
  .public-shell .public-event-page--with-poster .public-tickets {
    margin-top: 0;
    margin-bottom: 0;
  }
  .public-shell .public-event-page--with-poster .public-contact,
  .public-shell .public-event-page--with-poster .share-block,
  .public-shell .public-event-page--with-poster .similar-events,
  .public-shell .public-event-page--with-poster .public-actions {
    margin-top: 0;
    padding-top: 1rem;
  }
  .public-shell .public-event-page--with-poster .page-title--public { margin: .1rem 0 .8rem; }
}

/* ==========================================================================
   DÖRDÜNCÜ DÜZELTME — masaüstü "Diğer" simgesi, iletişim açılımı
   ========================================================================== */
/* "Diğer" açılabilir: geniş ekranda da simgesi ve aşağı ok görünür (öteki
   çiplerin simgesi geniş ekranda gizli kalır). Açıkken ok döner. */
.type-filter-more-chevron { display: none; width: .95rem; height: .95rem; flex: 0 0 auto; transition: transform .15s ease; }
.type-filter-more[open] .type-filter-more-chevron { transform: rotate(180deg); }
@media (min-width: 640px) {
  .public-shell .type-filter-more-toggle .type-chip-icon { display: inline-flex; order: -1; }
  .public-shell .type-filter-more-toggle .type-chip-icon svg { width: 1.05rem; height: 1.05rem; }
  .public-shell .type-filter-more-toggle .type-filter-more-chevron { display: block; }
}

/* İletişim: kullanıcı adı ve DM düğmesi açık; örnek mesaj ve kopyalama
   varsayılan kapalı açılımda. */
.public-contact-more { width: 100%; }
.public-contact-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  color: var(--primary-dark);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.public-contact-more-toggle::-webkit-details-marker { display: none; }
.public-contact-more-toggle::marker { content: ""; }
.public-contact-more-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.public-contact-more-chevron { width: 1rem; height: 1rem; transition: transform .15s ease; }
.public-contact-more[open] .public-contact-more-chevron { transform: rotate(180deg); }
.public-contact-more-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  padding-top: .25rem;
}
@media (max-width: 639px) {
  .public-shell .public-contact { margin-top: .9rem; padding-top: .8rem; gap: .45rem; }
  .public-shell .public-contact-note { font-size: .76rem; }
}

/* Yayın İşleri karar alanları ve gündelik açıklama (2026-09-27).
   Kartlar bağlantıdır: sayı, açtığı listeyle aynı kapsamdır. */
.decision-cards .decision-card { display: flex; flex-direction: column; gap: .25rem; color: inherit; text-decoration: none; }
.decision-cards .decision-card:hover,
.decision-cards .decision-card:focus-visible { border-color: var(--primary); }
.decision-cards .decision-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.decision-cards .decision-card.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; }
.queue-explain { margin: 0; font-size: .88rem; }
.queue-explain dt { font-weight: 600; margin-top: .35rem; }
.queue-explain dt:first-child { margin-top: 0; }
.queue-explain dd { margin: 0; }
#simple-queue-table td[data-label="Açıklama"] { min-width: 18rem; }
#simple-queue-table .action-row .btn { white-space: normal; text-align: left; }
.queue-explain-uncertain { color: #b45309; font-weight: 600; }
.queue-tech, .queue-group-members { margin-top: .35rem; }
.queue-group-summary { margin: .35rem 0 0; font-weight: 600; }
.republish-preview-image { max-width: 100%; height: auto; border-radius: var(--r); display: block; margin-bottom: .75rem; }
@media (max-width: 599px) {
  #simple-queue-table td[data-label="Açıklama"] { min-width: 0; }
}