/* ────────────────────────────────────────────────────────────
   SAHAFİYYE — MODERN EDITORIAL DESIGN SYSTEM
   Spectral display + IBM Plex Sans body. Cream / bordo / altın.
   Tek palet, light + dark. Sade yüzeyler, geniş tipografi.

   Bu dosya Tailwind CDN ile birlikte çalışır: yalnızca tasarım
   sistemine özgü token ve sınıflar tanımlanır (Tailwind utility
   adlarıyla çakışmaz). Tailwind köprüsü base.html içindeki
   `tailwind.config` ile kurulur (font-serif=Spectral, font-sans=
   IBM Plex Sans, text-leather/bg-paper/… renkleri).
   ──────────────────────────────────────────────────────────── */

[x-cloak] { display: none !important; }

/* ───────── Tokens — Editorial (light) ───────── */
:root {
  /* Renkler */
  --paper: #F4F1EA;
  --paper-elev: #FCFAF5;
  --paper-deep: #EAE4D7;
  --ink: #2C2A29;
  --ink-muted: #6B6660;
  /* --ink-faint was #A39D94 (~2.4:1 on paper — failed WCAG 1.4.3 for any text).
     Darkened to meet AA body (4.5:1) while staying a hair lighter than --ink-muted;
     reserve for the faintest still-informational text (timestamps, meta). */
  --ink-faint: #706A62;
  --leather: #7C2D2A;
  --leather-hover: #5E2220;
  --leather-soft: rgba(124, 45, 42, 0.10);
  /* Form-error red as a token (was hard-coded #b3261e across ~5 templates). AA on paper (~5.8:1). */
  --color-error: #B3261E;
  --color-error-soft: rgba(179, 38, 30, 0.10);
  /* Visible input border for dark mode (see dark root); light uses --border-strong. */
  --input-border: var(--border-strong);
  --gold: #C5A059;
  /* Deep gilt for small text (eyebrows) on cream: ~5.4:1, meets WCAG AA.
     Bright --gold stays for badges/accents and dark-mode (high contrast there). */
  --gilt-text: #7B5E1C;
  --gold-soft: rgba(197, 160, 89, 0.16);
  --border: rgba(44, 42, 41, 0.10);
  --border-strong: rgba(44, 42, 41, 0.22);
  --shadow-sm: 0 1px 2px rgba(44, 42, 41, .05);
  --shadow-md: 0 4px 16px rgba(44, 42, 41, .06);
  --shadow-lg: 0 18px 40px -16px rgba(44, 42, 41, .18);

  /* Tipografi — Editorial */
  --font-display: "Spectral", "Georgia", serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --display-tracking: -0.022em;
  --display-weight: 600;
  --display-italic-style: italic;

  /* Geometri — sade, keskin köşeler */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-pill: 0px;
}

/* ───────── Tokens — Editorial (dark) ───────── */
:root[data-mode="dark"] {
  --paper: #161413;
  --paper-elev: #1F1C1A;
  --paper-deep: #0E0C0B;
  --ink: #E2D5C3;
  --ink-muted: #9C9286;
  --ink-faint: #8C8379;  /* was #635A4F (~2.7:1 on dark) — raised to ~4.9:1 for AA body */
  --leather: #C2433F;
  --leather-hover: #D75852;
  --leather-soft: rgba(194, 67, 63, 0.16);
  --gold: #D1AC60;
  --gilt-text: #D1AC60;  /* bright gilt already passes on the near-black dark bg */
  --gold-soft: rgba(209, 172, 96, 0.18);
  --color-error: #DB5A50;  /* AA on near-black dark bg (~4.9:1) */
  --color-error-soft: rgba(219, 90, 80, 0.16);
  --border: rgba(226, 213, 195, 0.10);
  --border-strong: rgba(226, 213, 195, 0.22);
  /* Inputs need a stronger visible edge on dark than the faint --border-strong. */
  --input-border: #7C726A;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .40);
  --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, .65);
}

/* ───────── Base ───────── */
body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  transition: background-color .25s ease, color .25s ease;
}
:root[data-mode="dark"] body {
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
::selection { background: var(--leather); color: var(--paper); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* ───────── Tipografi yardımcıları ───────── */
.font-display {
  font-family: var(--font-display);
  letter-spacing: var(--display-tracking);
  font-weight: var(--display-weight);
}
.font-body { font-family: var(--font-body); }
.italic-display { font-style: var(--display-italic-style); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gilt-text);
  /* When the eyebrow carries a leading icon (a common pattern on inner
     page headings) the raw `svg + space + text` layout misaligns because
     the SVG sits on the baseline and the uppercase + 0.18em-tracked text
     pushes the line box. inline-flex with align-items:center + a small
     gap makes the icon and text share the middle line cleanly without
     affecting text-only eyebrows. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Geniş başlık ölçeği — fluid */
.display-xl {
  font-family: var(--font-display);
  /* Ceiling lowered 128px -> 96px: above ~96px the hero shouts rather than
     designs, undercutting the "intimate bookshop" register. (Audit P3) */
  font-size: clamp(44px, 8vw, 96px);
  line-height: 1.0;
  letter-spacing: var(--display-tracking);
  font-weight: var(--display-weight);
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  font-weight: var(--display-weight);
}
.display-md {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.15;
  letter-spacing: var(--display-tracking);
  font-weight: var(--display-weight);
}
.display-sm {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.25;
  letter-spacing: var(--display-tracking);
  font-weight: var(--display-weight);
}

/* Renk yardımcıları (token tabanlı) */
.text-ink { color: var(--ink); }
.text-muted { color: var(--ink-muted); }
.text-faint { color: var(--ink-faint); }
.text-gold { color: var(--gold); }
.text-leather { color: var(--leather); }
.bg-paper { background-color: var(--paper); }
.bg-paper-elev { background-color: var(--paper-elev); }
.bg-paper-deep { background-color: var(--paper-deep); }
.border-rule { border-color: var(--border); }
.divider { height: 1px; background: var(--border); margin: 24px 0; border: 0; }
.ornament {
  display: inline-block; line-height: 1;
  font-family: var(--font-display); color: var(--gold); opacity: 0.6;
}

/* ───────── Kartlar (Editorial: hafif, transparan) ───────── */
.card {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-elev { background: var(--paper-elev); }
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

/* ───────── Butonlar ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--leather); color: var(--paper);
  box-shadow: 0 6px 18px -8px var(--leather);
}
.btn-primary:hover { background: var(--leather-hover); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--paper-elev); border-color: var(--ink-muted); }
.btn-gold { background: var(--gold); color: var(--paper); }
.btn-gold:hover { filter: brightness(0.95); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-lg { padding: 16px 28px; font-size: 15px; }

/* Empty-state "Şiir Yaz" CTA — touch/mobile-first full-width primary button.
   Pairs with .btn .btn-primary (leather fill, paper text, shadow). */
.poem-cta {
  display: flex; width: 100%; min-height: 50px; gap: 8px;
  align-items: center; justify-content: center;
  padding: 14px 22px; font-size: 16px; font-weight: 600;
  border-radius: var(--radius-md);
  transition: transform .12s ease, background .2s ease;
}
@media (pointer: coarse) { .poem-cta { min-height: 54px; } }
.poem-cta:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .poem-cta { transition: none; }
  .poem-cta:active { transform: none; }
}

/* ───────── Etiketler ───────── */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--leather-soft);
  color: var(--leather);
}
.tag-gold { background: var(--gold-soft); color: var(--gilt-text); }
.tag-ink { background: rgba(44, 42, 41, 0.08); color: var(--ink-muted); }
:root[data-mode="dark"] .tag-ink { background: rgba(226, 213, 195, 0.08); color: var(--ink-muted); }

/* ───────── Inputlar ───────── */
.input {
  width: 100%;
  padding: 12px 16px;
  background: var(--paper-elev);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus { border-color: var(--leather); box-shadow: 0 0 0 3px var(--leather-soft); }
/* Placeholder must meet WCAG 1.4.3 (4.5:1). --ink-faint was ~2.5:1 (reads as disabled);
   --ink-muted is ~4.9:1 light / passes dark. (Audit P0) */
.input::placeholder { color: var(--ink-muted); }

/* ───────── Layout — container / content ───────── */
.container { max-width: var(--container, 1280px); margin: 0 auto; padding: 0 32px; }
.content { max-width: var(--content, 1080px); margin: 0 auto; padding: 0 32px; }
@media (max-width: 600px) {
  .container, .content { padding: 0 20px; }
}

/* ───────── Grid yardımcıları ───────── */
.grid-2, .grid-3, .grid-4, .grid-5 { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}

/* ───────── Üst navigasyon (sticky) ───────── */
:root { --nav-height: 72px; --container: 1280px; --content: 1080px; }
.nav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-height);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.nav-link {
  color: var(--ink-muted); transition: color .15s;
  padding: 6px 0; position: relative;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); }
.nav-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -26px;
  height: 2px; background: var(--ink);
}
.nav-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  background: transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.nav-icon-btn:hover { color: var(--ink); border-color: var(--ink-muted); }

/* Account dropdown (authenticated profile menu). Anchored to the avatar/icon
   button; escapes the nav box (nav has no overflow clip) and floats over content. */
.acct-menu { position: relative; display: inline-flex; }
.acct-panel {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 220px;
  background: var(--paper-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 50;
}
.acct-panel a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  font-size: 13.5px; font-weight: 500;
  color: var(--ink-muted);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.acct-panel a:hover { background: var(--paper-deep); color: var(--ink); }
.acct-panel a.is-gold { color: var(--gilt-text); }
.acct-panel .acct-head {
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.acct-panel .acct-sep { height: 1px; background: var(--border); margin: 6px 4px; }

/* Cart count badge on the nav cart icon (gold editorial accent). */
.nav-cart-wrap { position: relative; display: inline-flex; }
.cart-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--gold); color: var(--paper);
  font-size: 11px; font-weight: 700; line-height: 1;
}

/* ───────── Footer ───────── */
.footer {
  margin-top: 80px;
  background: var(--paper-deep);
  border-top: 1px solid var(--border);
  padding: 56px 0 32px;
}

/* ───────── Sayısal vurgu (stat) ───────── */
.stat-num {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--leather);
  line-height: 1;
}
.stat-label {
  font-size: 11.5px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 8px;
}

/* ───────── Editorial prose (blog / yazı gövdesi) ───────── */
.prose-editorial {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  /* Cap measure for readable long-form (legal pages, articles). ~65-72ch is the
     comfortable band; below this, text ran the full container width on wide screens. */
  max-width: 72ch;
}
.prose-editorial > * + * { margin-top: 1.1em; }
.prose-editorial h2,
.prose-editorial h3,
.prose-editorial h4 {
  font-family: var(--font-display);
  letter-spacing: var(--display-tracking);
  font-weight: var(--display-weight);
  line-height: 1.2;
  margin-top: 1.8em;
}
.prose-editorial h2 { font-size: 30px; }
.prose-editorial h3 { font-size: 23px; }
.prose-editorial h4 { font-size: 19px; }
.prose-editorial a { color: var(--leather); text-decoration: underline; text-underline-offset: 3px; }
.prose-editorial a:hover { color: var(--leather-hover); }
.prose-editorial ul { list-style: disc; padding-left: 1.5em; }
.prose-editorial ol { list-style: decimal; padding-left: 1.5em; }
.prose-editorial blockquote {
  border-left: 2px solid var(--gold);
  padding-left: 1.1em;
  margin-left: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-muted);
}
.prose-editorial pre {
  background: var(--paper-elev);
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13.5px;
}
.prose-editorial code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-elev);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}
.prose-editorial pre code { background: none; border: 0; padding: 0; }
.prose-editorial img { max-width: 100%; border-radius: var(--radius-md); }

/* ───────── Kitap kapağı placeholder ───────── */
.book-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  isolation: isolate;
}
.book-cover::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--cover-1, #5a3a2a), var(--cover-2, #2a1810));
  z-index: 0;
}
.book-cover::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.05) 60%, transparent);
  z-index: 2;
}
.book-cover-title {
  position: absolute; inset: 14% 12% auto 18%;
  font-family: var(--font-display);
  font-size: clamp(11px, 1.4vw, 17px);
  color: var(--cover-fg, #F4F1EA);
  line-height: 1.15;
  z-index: 1;
  letter-spacing: -0.005em;
}
.book-cover-author {
  position: absolute; left: 18%; right: 12%; bottom: 12%;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cover-fg, #F4F1EA);
  opacity: 0.7;
  z-index: 1;
}
.book-cover-rule {
  position: absolute; left: 18%; width: 28%; height: 1px;
  background: var(--cover-fg, #F4F1EA); opacity: 0.4;
  top: 38%; z-index: 1;
}

/* ───────── Sayfa geçişi ───────── */
.page-fade { animation: pageFade .35s ease; }
@keyframes pageFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ───────── Okuyucu (e-kitap reader) ───────── */
.reader-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--leather);
  animation: readerSpin .7s linear infinite;
}
@keyframes readerSpin { to { transform: rotate(360deg); } }
[data-reader-status][data-state="error"] .reader-spinner { display: none; }
[data-reader-status][data-state="error"] [data-reader-status-text] { color: var(--leather); }

/* When reader.js hides the loading overlay it sets the `hidden` attribute,
   but the template's inline `style="display:flex"` ranks above the UA
   `[hidden] { display: none }` rule and keeps the spinner on top of the
   already-rendered chapter. Force the override (Phase 07.8b bugfix —
   see debug/ebook-reader-epub-pdf). */
[data-reader-status][hidden] { display: none !important; }

/* ═══════════════ UI/UX düzeltmeleri ═══════════════ */

/* (d) İkon + yazı dikey ortalama. Satır içi SVG ikonlar varsayılan olarak
   yazı tabanına (baseline) oturur ve kayık görünür; orta hizaya çekiyoruz.
   Flex bağlamlarında (.btn, .tag, .nav-icon-btn) zaten görmezden gelinir. */
svg { vertical-align: middle; }
.btn svg, .tag svg, .eyebrow svg { flex-shrink: 0; }

/* (e) Üst nav aktif link çizgisi. Bar linkleri nav yüksekliği kadar uzanır,
   böylece alt çizgi tam nav alt kenarına (border) oturur — sabit -26px tahmini
   yerine. .nav-bar yalnızca masaüstü bar; mobil dropdown linkleri etkilenmez. */
.nav-bar .nav-link {
  height: var(--nav-height);
  display: inline-flex;
  align-items: center;
  padding: 0;
}
.nav-bar .nav-link.active::after { bottom: 0; left: 0; right: 0; }

/* (b) Hesap menüsü — native <details> açılır menü (JS bağımsız, kırılmaz). */
details.acct-menu { position: relative; display: inline-flex; }
/* Below lg the hamburger menu already carries every account link, so the
   icon dropdown is redundant — hide it to declutter the mobile nav. */
@media (max-width: 1023px) { details.acct-menu { display: none; } }
details.acct-menu > summary { list-style: none; cursor: pointer; }
details.acct-menu > summary::-webkit-details-marker { display: none; }
details.acct-menu > summary::marker { content: ""; }

/* (c) Generic Tailwind köprüsü — JSX/crispy_tailwind kalıntısı off-brand
   yardımcı sınıfları editöryel token'lara eşler. Tüm formlar tek seferde uyumlu. */
.bg-white { background-color: var(--paper-elev) !important; }
.text-gray-900, .text-gray-800, .text-gray-700 { color: var(--ink) !important; }
.text-gray-600, .text-gray-500, .text-gray-400 { color: var(--ink-muted) !important; }
.border-gray-300, .border-gray-200, .border-gray-100 { border-color: var(--border-strong) !important; }
.bg-gray-50, .bg-gray-100 { background-color: var(--paper-deep) !important; }
.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover { background-color: var(--paper-deep) !important; }
.bg-blue-600, .bg-indigo-600 { background-color: var(--leather) !important; }
.hover\:bg-blue-700:hover, .hover\:bg-indigo-700:hover { background-color: var(--leather-hover) !important; }
.text-blue-600, .text-indigo-600 { color: var(--leather) !important; }

/* (c) Form alanları — crispy_tailwind input/select/textarea editöryel görünüm. */
.textinput, .numberinput, .emailinput, .passwordinput, .urlinput, .dateinput, .textarea,
form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
form select, form textarea {
  border-radius: var(--radius-md) !important;
  padding: 11px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  /* Visible field edge in both modes; on dark, --border-strong was near-invisible. */
  border: 1px solid var(--input-border) !important;
}
.textinput:focus, .numberinput:focus, .emailinput:focus, .passwordinput:focus,
.urlinput:focus, .dateinput:focus, .textarea:focus,
form input:focus, form select:focus, form textarea:focus {
  border-color: var(--leather) !important;
  box-shadow: 0 0 0 3px var(--leather-soft) !important;
  outline: none !important;
}

/* Collapsible filter rail — a tappable toggle on mobile, always open on desktop.
   Pair with the sync script in base.html (sets open=true at >=881px). */
.filter-collapse > summary {
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  padding: 12px 14px; margin-bottom: 16px;
  background: var(--paper-elev); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-weight: 600; font-size: 14px; color: var(--ink);
}
.filter-collapse > summary::-webkit-details-marker { display: none; }
@media (min-width: 881px) { .filter-collapse > summary { display: none; } }

/* ═══════════════ Account Hub (Phase 7.13) ═══════════════
   Shell, sidebar, nav-item, tabs, header — token-based only.
   Light + dark + reduced-motion included.
   ═══════════════════════════════════════════════════════ */

/* ── Shell layout ── */
.account-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 40px;
  padding-top: 32px;
  padding-bottom: 64px;
}

/* ── Sidebar ── */
.account-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  align-self: start;
}

.account-sidebar__nav {
  display: grid;
  gap: 2px;
}

.account-sidebar__label {
  padding: 0 12px 8px;
}

/* ── Nav items ── */
.account-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  font-size: 14px;
  transition: background .15s ease-out, color .15s ease-out;
  text-decoration: none;
}

.account-nav-item:hover {
  background: var(--paper-deep);
  color: var(--ink);
}

.account-nav-item.is-active {
  background: var(--paper-deep);
  color: var(--ink);
  font-weight: 600;
  /* ≤2px inset leather indicator (nav active affordance, NOT a card side-stripe) */
  box-shadow: inset 2px 0 0 var(--leather);
}

/* Dark mode: lighter raised background for active item */
:root[data-mode="dark"] .account-nav-item.is-active {
  background: var(--paper-elev);
}

/* ── Section header row ── */
.account-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

/* ── Mobile horizontal tab strip (≤899px) ── */
.account-tabs {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.account-tabs::-webkit-scrollbar { display: none; }

.account-tabs .account-nav-item {
  flex-shrink: 0;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.account-tabs .account-nav-item.is-active {
  border-color: var(--leather);
  box-shadow: none;
}

/* ── Responsive collapse ── */
@media (max-width: 900px) {
  .account-shell {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* On narrow viewports the sidebar becomes a horizontal tab strip */
  .account-sidebar {
    position: static;
    overflow: hidden;
    margin-bottom: 24px;
  }

  /* Restyle sidebar nav as horizontal scrollable strip */
  .account-sidebar .account-sidebar__nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .account-sidebar .account-sidebar__nav::-webkit-scrollbar { display: none; }

  /* Hide label block on mobile (name/role shown in header) */
  .account-sidebar .account-sidebar__label { display: none; }

  /* Hide separators in the strip */
  .account-sidebar .acct-sep { display: none; }

  /* Items become compact horizontal pills */
  .account-sidebar .account-nav-item {
    flex-shrink: 0;
    white-space: nowrap;
    border: 1px solid var(--border);
    box-shadow: none;
    padding: 7px 12px;
  }

  .account-sidebar .account-nav-item.is-active {
    border-color: var(--leather);
    box-shadow: none;
  }
}

@media (max-width: 600px) {
  .account-shell {
    padding-top: 16px;
    padding-bottom: 40px;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .account-nav-item {
    transition: none;
  }
}

/* ── Account overview activity list (UI-SPEC §3.3) ── */
.account-activity {
  border-top: 1px solid var(--border);
}

.account-activity__row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.account-activity__when {
  color: var(--ink-faint);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 12px;
}

.account-activity__text {
  color: var(--ink);
  line-height: 1.5;
}

.account-activity__text a {
  color: var(--ink);
  text-decoration: none;
}

.account-activity__text a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .account-activity__row {
    flex-direction: column;
    gap: 2px;
  }
}

/* ═══════════════ UI/UX Audit fixes (agent-browser × impeccable) ═══════════════ */

/* (P1) Visible keyboard focus across all interactive chrome. The design relied on
   hover/:focus only; keyboard users had no focus ring (WCAG 2.4.7). Use :focus-visible
   so mouse clicks stay clean while keyboard/Tab shows a leather ring. */
.nav-link:focus-visible,
.nav-icon-btn:focus-visible,
.acct-panel a:focus-visible,
.account-nav-item:focus-visible,
.footer a:focus-visible,
.btn:focus-visible,
.poem-cta:focus-visible,
.tag:focus-visible,
a:focus-visible,
summary:focus-visible,
button:focus-visible {
  outline: 2px solid var(--leather);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:root[data-mode="dark"] :is(.nav-link,.nav-icon-btn,.account-nav-item,.btn,a,button,summary):focus-visible {
  outline-color: var(--leather);
}

/* (P0/P1) Native form-control placeholders to AA (mirrors .input::placeholder fix). */
form input::placeholder,
form textarea::placeholder,
.textinput::placeholder,
.emailinput::placeholder,
.passwordinput::placeholder,
.numberinput::placeholder,
.urlinput::placeholder,
.textarea::placeholder { color: var(--ink-muted) !important; }

/* (P1) Touch targets >=44px on touch devices. Keep the compact 38/34px visual on
   mouse; expand only where the pointer is coarse so layouts stay tight on desktop. */
@media (pointer: coarse) {
  .nav-icon-btn { width: 44px; height: 44px; }
  .btn-sm { min-height: 44px; }
}
/* Account nav is the primary task switcher — size it for touch in all cases. */
.account-nav-item { min-height: 44px; }
@media (max-width: 900px) {
  .account-sidebar .account-nav-item,
  .account-tabs .account-nav-item { min-height: 44px; }
}

/* (P1) Styled file inputs. Native control renders an illegible "No file chosen"
   off-system; style the field box + selector button to the editorial system. */
input[type="file"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-muted);
  background: var(--paper-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 8px 10px;
}
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--paper);
  background: var(--leather);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .2s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--leather-hover); }
input[type="file"]:focus-visible { outline: 2px solid var(--leather); outline-offset: 2px; }

/* (P2) Native checkbox/radio adopt the brand accent + visible focus
   (KVKK consent + filters). */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--leather);
  width: 18px;
  height: 18px;
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { outline: 2px solid var(--leather); outline-offset: 2px; }

/* (P1) Flash error styling helper — color is not the only error signal; pairs with
   an icon + role="alert" in base.html. */
.flash { display: flex; gap: 10px; align-items: flex-start; }
.flash svg { flex-shrink: 0; margin-top: 1px; }
.flash-error {
  background: var(--leather-soft);
  border-color: var(--border-strong) !important;
  color: var(--leather) !important;
}

/* (P2) Danger-zone card variant — destructive/irreversible actions must read as a
   distinct severity tier, not a normal card. */
.card-danger {
  background: var(--leather-soft);
  border: 1px solid var(--leather) !important;
}
.card-danger .display-sm,
.card-danger h2,
.card-danger h3 { color: var(--leather); }

/* (P2) Reader loading respects reduced motion (spinner is the only ungated motion). */
@media (prefers-reduced-motion: reduce) {
  .reader-spinner { animation: none; border-top-color: var(--border-strong); }
  .page-fade { animation: none; }
}

/* (P2) Reader theme swatch active state — currently no visible selection. */
.reader-theme-btn[aria-pressed="true"],
.reader-theme-btn.is-active {
  outline: 2px solid var(--leather);
  outline-offset: 2px;
}

/* ═══════════════ Admin cockpit (/yonetim/) ═══════════════ */

/* ── Semantic tokens ── */
:root {
  --accent:  var(--leather);
  --surface: var(--paper-elev);
  --danger:  var(--leather);
  --success: #2F6B4A;
}
:root[data-mode="dark"] {
  --success: #7CB594;
}

/* Cockpit full-width admin shell (dashboard foundation) */
.cockpit-shell {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 28px 40px 64px;
}
@media (max-width: 700px) { .cockpit-shell { padding: 16px 20px 40px; } }

/* ── Shell grid ── */
.cockpit {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

/* ── Cockpit content rhythm ── */
.cockpit-main > * + * { margin-top: 28px; }

/* ── Sidebar nav container ── */
.cockpit-nav {
  display: grid;
  gap: 4px;
}

/* ── Nav links ── */
.cockpit-link {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  min-height: 44px;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s ease-out, color .15s ease-out;
}
.cockpit-link:hover {
  background: var(--paper-deep);
  color: var(--ink);
}
.cockpit-link.is-active {
  background: var(--paper-deep);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--leather);
}

/* ── KPI grid + cards ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 20px;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
}

.kpi-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-muted);
  margin-top: 8px;
}

.kpi-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.15;
}

.kpi-num--alert {
  color: var(--leather);
}

/* ── Trend section ── */
.trend {
  /* container for the 14-day bar chart section */
}

/* ── Bar chart rows ── */
.bar-row {
  display: grid;
  grid-template-columns: 88px 1fr 64px;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}

.bar-track {
  display: block;
  height: 14px;
  background: var(--border);
  border-radius: 7px;
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* ── Mobile collapse (≤900px) ── */
@media (max-width: 900px) {
  .cockpit {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Sidebar becomes a horizontal scroll strip */
  .cockpit aside {
    position: static;
    overflow: hidden;
    margin-bottom: 24px;
  }

  .cockpit-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cockpit-nav::-webkit-scrollbar { display: none; }

  .cockpit-link {
    flex-shrink: 0;
    white-space: nowrap;
    border: 1px solid var(--border);
    box-shadow: none;
    padding: 7px 12px;
  }

  .cockpit-link.is-active {
    border-color: var(--leather);
    box-shadow: none;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .cockpit-link {
    transition: none;
  }
}