/* ============================================================
   NÜSHA — "Industry" tasarım sistemi
   Kaynak: Yeni_duzgun_tasarim/_ds/industry-.../styles.css (token + bileşen
   katmanı, tek doğruluk kaynağı) + Yeni_duzgun_tasarim/Nüsha Uygulama.dc.html
   (ekran düzenleri). Tek tema -- eski "parşömen" teması (Playfair Display,
   altın #b8922a) tamamen kaldırıldı; ikinci bir paralel sınıf kümesi YOK.

   Self-host: Barlow, Barlow Condensed, IBM Plex Mono, Amiri hepsi
   app/static/fonts/ altında (bkz. app/static/README-vendor.md -- CDN'e
   dışa bağımlılık yok, kullanıcı IP'si üçüncü tarafa sızmaz). Tasarımın
   "Noto Naskh Arabic"i yerine zaten self-hosted olan Amiri kullanılıyor.
   ============================================================ */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/barlow-400-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  src: url('/static/fonts/barlow-400-normal-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/barlow-500-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  src: url('/static/fonts/barlow-500-normal-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/barlow-700-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  src: url('/static/fonts/barlow-700-normal-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-400-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  src: url('/static/fonts/barlow-condensed-400-normal-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-600-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  src: url('/static/fonts/barlow-condensed-600-normal-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-400-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  src: url('/static/fonts/ibm-plex-mono-400-normal-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-500-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  src: url('/static/fonts/ibm-plex-mono-500-normal-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/amiri-400-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  src: url('/static/fonts/amiri-400-normal-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
  src: url('/static/fonts/amiri-400-normal-arabic.woff2') format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/amiri-700-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  src: url('/static/fonts/amiri-700-normal-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
  src: url('/static/fonts/amiri-700-normal-arabic.woff2') format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/amiri-400-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  src: url('/static/fonts/amiri-400-italic-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
  src: url('/static/fonts/amiri-400-italic-arabic.woff2') format('woff2');
}

/* ============================================================
   TOKEN'LAR — _ds/industry-.../styles.css'ten birebir
   ============================================================ */
:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  /* Etkilesimli denetim siniri: zemin uzerinde 3.16:1 (dekoratif
     --color-divider 1.38:1 ile AA'nin metin disi esigini gecmiyordu). */
  --color-border-field: color-mix(in srgb, #1d1f20 50%, transparent);

  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  /* ROL TABANLI RENKLER -- bir rengi ramp konumuyla degil ISLEVIYLE cagir.
     Denetimde olculdu (WCAG 2.1, AA normal punto = 4.5:1):
       --color-accent uzerine --color-bg  = 3.71:1  KALIYOR
       --color-accent-700 uzerine bg      = 5.78:1  GECIYOR
       --color-neutral-600 zemin uzerinde = 3.82:1  KALIYOR
       --color-neutral-700 zemin uzerinde = 5.87:1  GECIYOR
     Bu yuzden:
       --color-accent      YALNIZ metin tasimayan yuzeyler (hairline, ilerleme
                           cubugu, odak halkasi, accent-color). Metin disi 3:1
                           esigini 3.71 ile gecer.
       --color-accent-ink  UZERINE YAZI BASILAN her dolgu (birincil buton,
                           secili segment, marka isareti, sayac rozeti).
       --color-text-muted  Kucuk ikincil metnin TAMAMI. --color-neutral-600
                           artik yalniz kenarlik/ikon icindir, metin icin DEGIL. */
  --color-accent-ink: var(--color-accent-700);
  --color-accent-ink-hover: var(--color-accent-800);
  --color-text-muted: var(--color-neutral-700);

  --font-heading: 'Barlow Condensed', system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: 'Barlow', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-arabic: 'Amiri', serif;

  /* PUNTO OLCEGI -- sablonlardaki .8/.82/.85/.9rem ve 0.6875/0.75/0.8125rem
     ailelerinin yerini alan TEK olcek. Yeni bir font-size yazmadan once bu
     listede karsiligi var mi diye bak; yoksa olcege ekle, satir icine yazma. */
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-lg: 1rem;

  /* BOSLUK OLCEGI -- eskiden 0.85x yogunluk carpimindan kesirli piksellerdi
     (3.4 / 6.8 / 10.2 ...). Kesirli piksel kenarlik hizalarinda yarim piksel
     dikise yol aciyor, sablonlar da bu yuzden elle 18px/22px yaziyordu.
     Tam sayiya yuvarlandi; gorsel yogunluk hissedilir olcude degismedi. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 20px;
  --space-8: 28px;
  --space-10: 36px;
  --space-12: 44px;

  /* İçerik ölçüsü (bkz. "KABUK" bölümü): sayfa gövdesi bu genişlikte durur ve
     kalan boşluk iki yana EŞİT dağıtılır -- topbar/main/footer aynı hizadan
     başlayıp aynı hizada biter. Geniş ekranda içeriğin sola yapışıp ortada
     kesilmiş görünmesinin sebebi eski `max-width` + `margin` yokluğuydu. */
  --content-max: 1600px;
  --gutter: clamp(16px, 2.2vw, 48px);

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

  /* Eski değişken adları -- editör gibi henüz iç <style> bloğu taşıyan
     yerlerde de aynı paletin kullanılmasını garanti eder. */
  --error: #a3372c;
  --ok: #3d6a3d;
  /* UYARI seviyesi eskiden YOKTU: "PayTR test modu ACIK" gibi geri
     donusu olan uyarilar hata kirmizisiyla gosteriliyor, gercek hatalarla
     ayni agirligi tasiyordu. Amber ton, zemin uzerinde 5.30:1. */
  --warn: #8a5a00;
}

/* ============================================================
   TEMEL
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Tipografi ölçeği TEK kaldıraç: arayüzdeki bütün font-size değerleri rem
   (şablonlardaki inline stiller dahil), yani kök punto değişince tümü birlikte
   ölçeklenir. 125% = 20px kök -> tarayıcı varsayılanına (16px) göre +%25.
   Punto büyütmek/küçültmek için YALNIZ bu satırı değiştirin. */
html { -webkit-text-size-adjust: 100%; font-size: 125%; }
body {
  /* Dekoratif .blueprint koseleri kutunun disina tasar; kaydirma bunlar icin
     ASLA acilmamali. `clip`, `hidden`in aksine scroll konteyneri yaratmaz --
     ust cubugun position:sticky davranisi korunur. */
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
  color: var(--color-text);
}
h1 { font-size: 2.375rem; text-transform: uppercase; }
h2 { font-size: 1.75rem; text-transform: uppercase; }
h3 { font-size: 1.375rem; text-transform: uppercase; }
h4 { font-size: 1.0625rem; text-transform: uppercase; }
h5 { font-size: 0.9375rem; }
h6 { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; text-decoration: none; }
/* Hover'da alt cizgi YOK: bu kural (spesifiklik 0,1,1) `.btn`/`.tag`/
   `.editor-zoom-btn` gibi denetim bicimli her <a>'nin :hover'da
   `text-decoration:none`'i TEKRARLAMASINI zorunlu kiliyordu; unutulan
   her yerde de dugmelerin alti cizilyordu. Metin ICI baglantilar alt
   cizgiyi KALICI olarak kendileri bildirir (.error a / .info a,
   .notice-* a, .link) -- yani renk tek ayirt edici degildir. */
a:hover { color: var(--color-accent-800); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 0.6875rem; margin-top: var(--space-1); color: var(--color-text-muted); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
::placeholder { color: var(--color-text-muted); opacity: 1; }
hr, .hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }
/* Satir ici <code> genellikle URL/komut tasir; boslugu olmadigi icin dar
   ekranda GOVDEYI yatay kaydiriyordu (olculdu: 384px > 375px viewport). */
code { font-family: var(--font-mono); font-size: 0.9em; overflow-wrap: anywhere; }
* { scrollbar-width: thin; scrollbar-color: var(--color-neutral-400) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-neutral-400); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.text-muted, .muted { color: var(--color-text-muted); font-size: 0.8125rem; }
form.inline, .inline { display: inline; }

/* ============================================================
   BİLEŞENLER — tasarım sisteminin kendi sınıf adları
   ============================================================ */

/* — düğmeler — bare <button> ve input[type=submit] varsayılan olarak
   .btn.btn-secondary görünümü alır: eski şablonlardaki (henüz her satırı
   elden geçirilmemiş admin/settings formları) düz <button> etiketleri de
   otomatik doğru temaya girer. */
.btn, button, input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 0.875rem; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid var(--color-divider);
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.btn svg { display: block; }
.btn:disabled, button:disabled, input[type="submit"]:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary, button.btn-primary, input[type="submit"].btn-primary {
  background: var(--color-accent-ink); color: var(--color-bg); border-color: var(--color-accent-ink);
}
.btn-primary:hover, button.btn-primary:hover, input[type="submit"].btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-accent-ink-hover); border-color: var(--color-accent-ink-hover);
  color: var(--color-bg);
}
.btn-primary:active, button.btn-primary:active, input[type="submit"].btn-primary:active {
  background: var(--color-accent-900); border-color: var(--color-accent-900); color: var(--color-bg);
}
.btn-secondary:hover, button:hover, input[type="submit"]:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active, button:active, input[type="submit"]:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost, button.btn-ghost {
  color: var(--color-accent-700); border-color: transparent; background: transparent; padding-inline: var(--space-1);
}
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block, button.btn-block { width: 100%; }
.btn-danger, button.btn-danger { color: var(--error); border-color: var(--color-divider); }
.btn-danger:hover { background: color-mix(in srgb, var(--error) 8%, transparent); }
/* eski isim -- indirme linkleri; aynı görünüm */
.btn-dl, a.btn-dl {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem;
  padding: var(--space-2) calc(var(--space-3) * 1.2); border: 1px solid var(--color-divider);
  color: var(--color-accent-700); text-decoration: none; border-radius: 0;
}
.btn-dl:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); text-decoration: none; }
a.btn-dl-edit, .btn-dl.btn-dl-edit { background: var(--color-accent-ink); color: var(--color-bg); border-color: var(--color-accent-ink); font-weight: 700; }
a.btn-dl-edit:hover, .btn-dl.btn-dl-edit:hover { background: var(--color-accent-ink-hover); color: var(--color-bg); }
button.link, .link {
  width: auto; background: none; color: var(--color-accent-700); padding: 0; border: none;
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; text-decoration: underline;
  text-underline-offset: 2px;
}
button.link:hover, .link:hover { color: var(--color-accent-800); background: none; }

/* — form alanları — bare input/select/textarea de .input görünümü alır. */
/* Yan yana iki alan (ör. Yayınevi / Yıl). align-items:end SART: etiketlerden
   biri dar kolonda iki satıra sardığında girdiler farklı yükseklikte başlıyor,
   satır "kaymış" görünüyordu. Oranlar da içeriğe göre: yıl 4 hane. */
.field-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; align-items: end; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field > label, label {
  display: block; font-size: 0.75rem; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-family: var(--font-body); font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"], input[type="url"],
select, textarea {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-family: var(--font-body); font-size: 0.875rem; color: var(--color-text);
  caret-color: var(--color-accent); background: var(--color-surface);
  border: 1px solid var(--color-border-field); border-radius: 0;
  margin: 0 0 var(--space-2);
}
.input:hover, input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--color-accent); outline-offset: 0;
}
textarea.input, textarea { min-height: 90px; resize: vertical; }
select {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237a7a7d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px;
}
[dir="rtl"] select { background-position: left 10px center; padding-right: 10px; padding-left: 30px; }
input[type="file"] {
  width: 100%; font-size: 0.8125rem; color: var(--color-neutral-700); padding: 9px 12px;
  border: 1px dashed var(--color-border-field); background: var(--color-surface); margin-bottom: var(--space-2); cursor: pointer;
}
input[type="file"]::file-selector-button {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.75rem; color: var(--color-bg);
  background: var(--color-neutral-900); border: none; padding: 7px 14px; margin-inline-end: 12px; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--color-accent-ink); }

.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.875rem; }
.radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-border-field); }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); }
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); }
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 0.8125rem;
  cursor: pointer; text-decoration: none; color: var(--color-text); font-family: var(--font-mono);
}
.seg-opt + .seg-opt { border-inline-start: 1px solid var(--color-divider); }
.seg-opt.active, .seg-opt:has(input:checked) { background: var(--color-accent-ink); color: var(--color-bg); }
.seg-opt:not(.active):not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* — kartlar — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: 0; background: transparent;
  border: 1px solid var(--color-divider);
}
a.card { color: inherit; text-decoration: none; cursor: pointer; }
a.card:hover { border-color: var(--color-border-field); }
.card.auth { max-width: 420px; margin: 0 auto; padding: 28px; }
.card-kicker { font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); font-family: var(--font-mono); }
.card-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; line-height: 1.2; }
.card-body { margin: 0; font-size: 0.8125rem; opacity: 0.85; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 0.6875rem; color: var(--color-text-muted); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — etiketler — */
.tag { display: inline-flex; align-items: center; font-size: 0.6875rem; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 3px; text-decoration: none; border: none; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); background: transparent; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-add { border: 1px dashed var(--color-divider); color: var(--color-text-muted); background: transparent; cursor: pointer; }
.tag-add:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
/* eski durum rozetleri (work_progress.html JS'i .badge-* class'ına bakmaz,
   yalnız data-status'a bakar -- burada yalnız görünümü tasarım sistemine
   taşıyoruz) */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.6875rem; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 3px; font-family: var(--font-mono); }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: inline-block; }
.badge-pending { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.badge-running { background: var(--color-accent-100); color: var(--color-accent-800); animation: nsh-pulse 1.4s ease-in-out infinite; }
.badge-done { background: var(--color-accent-100); color: var(--color-accent-800); }
.badge-error { color: var(--error); background: color-mix(in srgb, var(--error) 10%, transparent); }
.badge-paused { background: var(--color-neutral-100); color: var(--color-neutral-700); }
/* Sihirbaz/onizleme durumlari: bunlar icin kural YOKTU, library.html
   `badge-{{ work.status }}` bastigi icin zeminsiz-kenarliksiz bir cip
   cikiyordu (bkz. templating.py:status_badge_class). */
.badge-uploading, .badge-draft, .badge-preparing, .badge-prepared { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.badge-preview_ready { background: var(--color-accent-100); color: var(--color-accent-800); }
/* Yönetici batch incelemesi bekleyen eser: `status_label` bu duruma
   etiket veriyordu ama karşılığı olan çip kuralı hiç yazılmamıştı. */
.badge-batch_staged { background: var(--color-accent-100); color: var(--color-accent-800); }
@keyframes nsh-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* — navigasyon (üst çubuk bileşeni; kabuk için bkz. aşağıdaki .topbar) — */
.nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.nav-brand { font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; margin-inline-end: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 0.875rem; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent-700); }

/* — tablolar — (eski .admin-table/.legal-table isimleri de aynı görünümü alır) */
.table, .admin-table, .legal-table { width: 100%; border-collapse: collapse; font-size: 0.8438rem; }
.table th, .admin-table th, .legal-table th {
  text-align: start; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted); padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-mono); font-weight: 500;
}
.table td, .admin-table td, .legal-table td { padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); vertical-align: middle; }
.table tbody tr:hover, .admin-table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.admin-table a { color: var(--color-accent-700); }
.admin-table tr.row-inactive td { opacity: .5; }
.admin-table td code, .admin-table td .mono { font-family: var(--font-mono); font-size: 0.75rem; }
.legal-table th { width: 33%; font-weight: 600; }

/* — dialog — */
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); }
.dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; }
.dialog-body { font-size: 0.875rem; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint çerçeve: köşe + işaretli, kare köşeli, ince kenarlıklı — */
.blueprint { position: relative; border: 1px solid var(--color-divider); }
.blueprint.halftone, .blueprint.duotone { overflow: visible; }
.blueprint > .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone { position: relative; overflow: hidden; }
.duotone::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--color-accent); mix-blend-mode: color; }

/* Eski .error/.info/.notice ÜÇLÜSÜ BURADAN KALDIRILDI. Sitede iki paralel
   bildirim sistemi yaşıyordu: bu eski aile müşteriye dönük sayfalarda, yeni
   .notice-* ailesi (aşağıda) yalnız yönetim ekranlarında -- yani modern olan
   yanlış taraftaydı. Tek aile kaldı; kullanım yerleri .notice-error /
   .notice-info / .notice-ok'a taşındı. Yeni bir yere .error/.info EKLEME. */

/* ============================================================
   KABUK — sol sidebar + üst panel (bkz. base.html)
   ============================================================ */
/* overflow-x: clip -- dekoratif .blueprint koseleri kutunun 6px disina
   tasar ve dar ekranda govdeyi yatay kaydiriyordu. `clip`, `hidden`in
   aksine scroll konteyneri YARATMAZ: sticky ust cubuk calismaya devam eder. */
.shell { display: grid; min-height: 100vh; background: var(--color-bg); color: var(--color-text); overflow-x: clip; }
.shell.with-sidebar { grid-template-columns: 232px minmax(0, 1fr); }

.sidebar {
  border-inline-end: 1px solid var(--color-divider); position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.sidebar-head { height: 58px; flex: none; display: flex; align-items: center; gap: 9px; padding: 0 18px; border-bottom: 1px solid var(--color-divider); }
/* Marka işareti: Arapça NÛN (ن) -- "Nüsha"nın baş harfi (eskiden ص idi).
   Nûn, ص'dan çok daha DAR bir harf: aynı 0.875rem'de 24px'lik kutunun
   içinde kayboluyordu, bu yüzden ölçü 1.125rem'e çıkarıldı (mürekkep
   yüksekliği ~15.5px = kutunun %65'i). padding-top optik düzeltme:
   nûn'un mürekkebi (nokta üstte, kâse yazı çizgisinin hemen altında)
   satır kutusunun merkezinden yukarıda durur, 2px aşağı iter. */
.sidebar-logo { width: 24px; height: 24px; padding-top: 2px; background: var(--color-accent-ink); color: var(--color-bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-arabic); font-size: 1.125rem; line-height: 1; flex: none; }
.sidebar-brand { font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; }
.sidebar-version { font-family: var(--font-mono); font-size: 0.5938rem; letter-spacing: 0.1em; color: var(--color-text-muted); border: 1px solid var(--color-divider); padding: 1px 4px; margin-inline-start: auto; }
.sidebar-nav { padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sidebar-group { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); padding: 12px 8px 6px; }
.sidebar-link {
  padding: 8px 10px; cursor: pointer; border-inline-start: 2px solid transparent; text-decoration: none;
  color: var(--color-text); display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sidebar-link:hover { background: var(--color-neutral-200); text-decoration: none; }
.sidebar-link.active { border-inline-start-color: var(--color-accent); background: var(--color-neutral-200); font-weight: 600; }
.sidebar-link .count { font-family: var(--font-mono); font-size: 0.625rem; background: var(--color-accent-ink); color: var(--color-bg); padding: 1px 5px; }
/* Yumuşak varyant: DOLU çip "şu kadar iş seni bekliyor" der (doğrulama
   kuyruğu). "Ücretsiz deneme"nin rozeti bir iş yükü değil, bir davettir --
   aynı görünümü paylaşırsa kullanıcı onu da bir bildirim sayacı sanar. */
.sidebar-link .count.is-soft { background: transparent; color: var(--color-accent-ink); box-shadow: inset 0 0 0 1px var(--color-accent); }
.sidebar-foot { flex: none; margin-top: auto; border-top: 1px solid var(--color-divider); padding: 16px 18px; }
.sidebar-credit-label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
/* Rakam artik para birimi tasiyor ("2.500,00 ₺"); 1.75rem'de dar kenar
   cubugunda tasiyordu. Dolar karsiligi ikinci satirda, kucuk ve soluk. */
.sidebar-credit-value { font-family: var(--font-heading); font-size: 1.375rem; line-height: 1.2; white-space: nowrap; }
.sidebar-credit-usd { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-text-muted); margin-top: 2px; }
.sidebar-credit-bar { height: 3px; background: var(--color-neutral-200); margin: 8px 0 10px; }
.sidebar-credit-bar > span { display: block; height: 3px; background: var(--color-accent); }

/* Üst çubuk, gövde ve alt bilgi AYNI iç ölçüye hizalanır: çizgi/arka plan
   kolonun tamamına yayılır (full-bleed), İÇERİK ise --content-max ile
   sınırlanıp ortalanır. max(): kolon dar olduğunda kenar boşluğu = --gutter,
   genişlediğinde artan boşluk iki yana eşit paylaştırılır. */
.topbar, .main, .container, .sitefoot {
  padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2));
}

.topbar {
  height: 58px; border-bottom: 1px solid var(--color-divider); display: flex; align-items: center; gap: 16px;
  min-width: 0; position: sticky; top: 0;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(10px); z-index: 20;
}
/* Tam ekran sayfalar (editör): üst çubuk ve alt bilgi ölçüye sıkışmaz,
   içerikle birlikte kenardan kenara yayılır (bkz. base.html: full_bleed). */
.shell-wide .topbar, .shell-wide .sitefoot { padding-inline: var(--gutter); }

/* Sidebar gizliyken üst çubuğa taşınan marka işareti (bkz. base.html) */
.topbar-brand { display: flex; align-items: center; gap: 9px; flex: none; color: var(--color-text); text-decoration: none; }
.topbar-brand:hover { color: var(--color-accent-700); text-decoration: none; }
/* .sidebar-logo ile aynı marka işareti (ن) -- ölçü/nudge gerekçesi orada. */
.topbar-brand .mark {
  width: 24px; height: 24px; padding-top: 2px; flex: none; background: var(--color-accent-ink); color: var(--color-bg);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-arabic); font-size: 1.125rem;
  line-height: 1;
}
.topbar-brand .word { font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; white-space: nowrap; }
.topbar-sep { width: 1px; height: 20px; flex: none; background: var(--color-divider); }
@media (max-width: 620px) { .topbar-brand .word { display: none; } }

.breadcrumb { font-family: var(--font-mono); font-size: 0.7188rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.topbar-nav { display: flex; align-items: center; gap: 16px; font-size: 0.8438rem; white-space: nowrap; }
.topbar-nav a { color: var(--color-text); }
.topbar-nav a:hover { color: var(--color-accent-700); text-decoration: none; }
.topbar-user { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; min-width: 0; }
.topbar-avatar { width: 26px; height: 26px; flex: none; border: 1px solid var(--color-divider); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 0.75rem; }

.main, .container { padding-block: 30px 64px; }
.auth-wrap { min-height: calc(100vh - 58px); display: flex; align-items: center; justify-content: center; padding: 40px 16px; }

.sitefoot { border-top: 1px solid var(--color-divider); padding-block: 20px; font-size: 0.7812rem; }
.sitefoot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.sitefoot a { color: var(--color-text-muted); }
.sitefoot a:hover { color: var(--color-accent-700); }
.sitefoot p { margin: .75rem 0 0; color: var(--color-text-muted); }

/* --- atlama baglantisi: klavye kullanicisi her sayfada tum kenar cubugunu
       tab'lamak zorunda kalmasin (once hicbir atlama noktasi yoktu). --- */
.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: var(--color-accent-ink); color: var(--color-bg);
  font-family: var(--font-heading); font-weight: 600; text-decoration: none;
}
/* `:focus-visible` DEGIL `:focus`: atlama baglantisi programatik olarak da
   odaklanabilir (bazi yardimci teknolojiler ve "sayfa basina don" davranisi
   boyle yapar) ve o durumda gorunur olmak ZORUNDADIR. */
.skip-link:focus {
  inset-inline-start: 0; text-decoration: none; color: var(--color-bg);
  outline: 2px solid var(--color-text); outline-offset: -2px;
}

/* --- mobil gezinme --------------------------------------------------------
   880px altinda kenar cubugu ESKIDEN `display:none` idi ve yerine hicbir sey
   konmuyordu: telefonda kullanici Kutuphane/Ayarlar/Cuzdan'a hic ulasamiyor,
   yalniz alt bilgideki hukuki linkler kaliyordu. Artik ayni <aside> disari
   kayan bir panele donusur -- ikinci bir gezinme kopyasi YOK, tek kaynak.
   -------------------------------------------------------------------------- */
.nav-toggle { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 880px) {
  .shell.with-sidebar { grid-template-columns: 1fr; }
  .main, .container { padding-block: 20px 40px; }

  .nav-toggle {
    display: inline-flex; flex: none; width: 36px; height: 36px; padding: 0;
    align-items: center; justify-content: center;
    border: 1px solid var(--color-divider); background: transparent; cursor: pointer;
  }
  .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
    display: block; width: 16px; height: 1.5px; background: var(--color-text);
  }
  .nav-toggle .bars { position: relative; }
  .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; inset-inline-start: 0; }
  .nav-toggle .bars::before { top: -5px; }
  .nav-toggle .bars::after { top: 5px; }

  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60;
    width: min(86vw, 288px); height: 100dvh;
    background: var(--color-bg); box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    /* visibility SART: yalniz transform ile kaydirilan panel EKRAN DISINDA
       da odaklanabilir kalir -- klavye kullanicisi sayfaya varmadan once
       gorunmeyen ~12 baglantiyi tab'lamak zorunda kaliyordu (olculdu).
       `visibility:hidden` onlari tab sirasindan ve ekran okuyucudan cikarir;
       gecise dahil edildigi icin kayma animasyonu bozulmaz. */
    visibility: hidden;
    transition: transform .22s ease, visibility .22s ease;
  }
  body[data-nav-open] .sidebar { visibility: visible; }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  body[data-nav-open] .sidebar,
  [dir="rtl"] body[data-nav-open] .sidebar { transform: translateX(0); }

  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  body[data-nav-open] .nav-backdrop { opacity: 1; pointer-events: auto; }
  body[data-nav-open] { overflow: hidden; }
}

/* Ust cubuk 620px altinda tasiyordu: e-posta metni dusurulur, avatar ve
   cikis kalir -- kimlik bilgisi yine avatarda gorunur durumda. */
@media (max-width: 620px) {
  .topbar { gap: 10px; }
  .seg-opt { padding: 7px 9px; }
  /* Cikis formu `display:inline` oldugu icin esnek satirda dogru daralmiyor,
     .topbar-user kutusunun DISINA tasip govdeyi yatay kaydiriyordu (olculdu:
     kutu 48px, icerik 81px). Kullanici blogu artik hic daralmaz -- daralmasi
     gereken breadcrumb'dir, o da zaten ellipsis'li. */
  /* Breadcrumb dar ekranda GIZLENIR: hemen altindaki .page-head basligi
     ayni bilgiyi zaten tasiyor, oysa ust cubukta 109px yer kapliyor ve
     hamburger + dil secici + kullanici blogu 375px'e sigmiyordu. */
  .breadcrumb { display: none; }
  .topbar-user { flex: none; }
  .topbar-user form.inline { display: flex; flex: none; }
}

/* ============================================================
   UYGULAMAYA ÖZEL BİLEŞENLER (tasarımda tekrarlayan desenler)
   ============================================================ */

/* 4 hücreli metrik şeridi -- kütüphane/değerlendirme/doğrulama/yönetim */
.metrics, .stat-strip { display: grid; grid-template-columns: repeat(var(--cells, 4), 1fr); border: 1px solid var(--color-divider); }
.metrics > div, .stat-strip > .stat-cell { padding: 16px 20px; border-inline-end: 1px solid var(--color-divider); min-width: 0; }
.metrics > div:last-child, .stat-strip > .stat-cell:last-child { border-inline-end: none; }
.metrics .metric-label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.metrics .metric-value, .stat-cell .stat-value { font-family: var(--font-heading); font-size: 1.875rem; line-height: 1.25; overflow-wrap: anywhere; }
@media (max-width: 920px) {
  .metrics, .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .metrics > div:nth-child(2n), .stat-strip > .stat-cell:nth-child(2n) { border-inline-end: none; }
  .metrics > div, .stat-strip > .stat-cell { border-bottom: 1px solid var(--color-divider); }
  .metrics > div:nth-last-child(-n+2), .stat-strip > .stat-cell:nth-last-child(-n+2) { border-bottom: none; }
}

/* ilerleme çubuğu (work_progress.html + eser detayı + ciltler) */
.progress-wrap { height: 6px; background: var(--color-neutral-200); overflow: hidden; margin-bottom: 6px; }
.progress-bar { height: 100%; background: var(--color-accent); transition: width .4s; }
.progress-bar.running {
  background-image: linear-gradient(115deg, color-mix(in srgb, #fff 22%, transparent) 25%, transparent 25%, transparent 50%, color-mix(in srgb, #fff 22%, transparent) 50%, color-mix(in srgb, #fff 22%, transparent) 75%, transparent 75%);
  background-size: 20px 20px; animation: nsh-stripe 1.2s linear infinite;
}
@keyframes nsh-stripe { to { background-position: 40px 0; } }
/* İlk OCR yanıtından önce gerçek ilerleme %0'dır. Eski %35'lik kayan blok
   ilerleme gibi algılanıyordu; artık çubuk sıfırda kalır, canlılık sinyali
   ayrıntı kartındaki nabız/metinle verilir. İlk gerçek sonuçta yalnız gerçek
   yüzde genişliği (örn. %50 → %100) animasyonla büyür. */
.progress-bar.indeterminate { width: 0; animation: none; }

/* Eser ayrıntısındaki büyük ilerleme kartı, backend'in her gerçek ara
   sonucunda genişliğini yumuşakça günceller. Henüz ölçülebilir sonuç yoksa
   ``.is-waiting`` nabzı, sahte yüzde üretmeden işçinin canlı olduğunu anlatır. */
.work-detail-progress .progress-bar { transition: width .55s cubic-bezier(.2, .8, .2, 1); }
.work-detail-progress-note {
  margin: 16px 0 0; font-size: .8125rem; color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.work-detail-progress-note.is-waiting::before {
  content: ""; display: inline-block; width: .52rem; height: .52rem; margin-inline-end: .52rem;
  border-radius: 999px; vertical-align: -.04rem; background: var(--color-accent);
  animation: nsh-progress-wait 1.15s ease-in-out infinite;
}
@keyframes nsh-progress-wait {
  0%, 100% { opacity: .35; transform: scale(.78); }
  50% { opacity: 1; transform: scale(1); }
}
.work-active-pdf {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-divider);
}
.work-active-pdf__eyebrow {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em;
  color: var(--color-text-muted); text-transform: uppercase;
}
.work-active-pdf p { margin: 5px 0 0; font-size: .8125rem; color: var(--color-text-muted); }
.work-active-pdf__actions { display: flex; flex: none; gap: 8px; }
@media (max-width: 620px) {
  .work-active-pdf { align-items: flex-start; flex-direction: column; }
  .work-active-pdf__actions, .work-active-pdf__actions .btn { width: 100%; }
}

/* eser kartı satırı (library.html)
   Düzen: 1. satır -> başlık/meta (sol) + kredi & Sil (sağ);
          2. satır -> durum rozeti, ilerleme çubuğu ve indirme butonları,
                      TAM GENİŞLİK.
   Eski "1fr 260px 130px" + align-items:center düzeninde butonlar 260px'lik
   kolona sıkışıp alt alta düşüyor, kısa içerikli rozet de satırın dikey
   ortasında asılı kalıyordu. Yerleşim explicit (grid-row/column) -- sıraya
   değil sınıflara bağlı; review.html gibi bu sınıfları kullanmayan
   .work-row'lar eski otomatik yerleşimde kalır. */
.work-row {
  padding: 18px 20px; border-bottom: 1px solid var(--color-divider);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 20px; row-gap: 12px; align-items: start;
}
.work-row:hover { background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.work-row__main { grid-column: 1; grid-row: 1; min-width: 0; }
.work-row__aside {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
.work-row .work-progress-container { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.work-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.1875rem; color: var(--color-text); text-decoration: none; }
.work-title:hover { color: var(--color-accent-700); text-decoration: none; }
.work-meta { font-family: var(--font-mono); font-size: 0.7188rem; color: var(--color-text-muted); margin-top: 5px; }

/* durum bloğu (work_progress.html fragment'i) -- dikey ritmi gap yönetir,
   bu yüzden içindeki p/small'ların kendi margin'i sıfırlanır. */
.work-progress { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.work-progress > p, .work-progress > small { margin: 0; }
.work-progress .progress-wrap { width: 100%; }
/* rozet + aksiyon butonları aynı hizada, tek satırda (dar ekranda sarar) */
.work-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.work-status-line .badge { flex: none; }
.download-links { display: flex; gap: 8px; flex-wrap: wrap; }
.work-note { font-size: 0.8125rem; color: var(--color-text-muted); }

/* istatistik/stat şeridi (eser detayı, admin) */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 20px; }
.stat-item .label, .stat-label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 4px; }
.stat-item .value, .stat-num { font-family: var(--font-heading); font-size: 1.375rem; }
.stat-card { border: 1px solid var(--color-divider); padding: 16px 20px; min-width: 120px; }
/* Yönetim özet kutuları: flex+min-width iken kartlar sola yığılıp satırın
   sağını boş bırakıyordu; auto-fit grid ile ölçünün tamamına yayılırlar
   (bkz. .metrics / .stats-grid -- aynı davranış). */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }

.volume-list { padding: 0; overflow: hidden; }
.volume-list > .card-title { padding: 16px 20px 12px; margin: 0; border-bottom: 1px solid var(--color-divider); }
.volume-card { padding: 16px 20px; border-bottom: 1px solid var(--color-divider); }
.volume-card-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.volume-card-title { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600; color: var(--color-text); text-decoration: none; }
.volume-card-title:hover { color: var(--color-accent-700); text-decoration: none; }
.volume-pages { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.6875rem; }
.volume-card .progress-wrap { margin: 12px 0; }
.volume-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.volume-download-links { display: inline-flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 0.75rem; }
.volume-zip { padding: 14px 20px; }
.volume-zip summary { cursor: pointer; font-size: 0.8125rem; }
.volume-zip .download-links { margin: 10px 0 0; }

.actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; align-items: start; }

/* benchmark/eval model seçim ızgarası */
.model-fieldset { border: 1px solid var(--color-divider); padding: var(--space-4); margin-bottom: var(--space-4); }
.model-fieldset legend { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.6875rem; padding: 0 .4rem; }
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.checkbox-label {
  display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--color-text);
  font-size: 0.75rem; font-family: var(--font-mono); padding: 8px 11px; border: 1px solid var(--color-divider); background: var(--color-surface);
}
.checkbox-label:hover { border-color: var(--color-border-field); }
.checkbox-label:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800); }
.checkbox-label input[type=checkbox] { accent-color: var(--color-accent); width: 1rem; height: 1rem; cursor: pointer; }
.benchmark-grid { display: grid; grid-template-columns: repeat(var(--cols, 1), 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.benchmark-col { border: 1px solid var(--color-divider); }
.benchmark-header { background: var(--color-surface); padding: 10px 16px; border-bottom: 1px solid var(--color-divider); display: flex; align-items: center; justify-content: space-between; }
.benchmark-header code { font-size: 0.75rem; color: var(--color-text-muted); word-break: break-all; font-family: var(--font-mono); }
.benchmark-text { padding: 16px; white-space: pre-wrap; line-height: 2; font-size: 1rem; }

/* METİN YÜZÜ -- `face-*` sınıflarının taşıyıcısı.
   Bu kurallar eskiden YALNIZ editor.css'te vardı ve editor.css `head_extra`
   ile yalnız editor.html'de yükleniyor. `/trial` sonuç kartları `face-arabic`
   basıyordu ama karşılığı olan CSS sayfada YOKTU: Arapça çıktı Amiri yerine
   gövde fontuyla (Barlow) diziliyordu. Kural buraya, `.benchmark-text`e
   bağlı olarak taşındı -- editor.css kendi seçicileriyle olduğu gibi kalır.
   `.face-arabic` / `.face-translit` varsayılan Amiri'ye düşer (bkz.
   services/prompts.py: text_face -- Osmanlıca çeviriyazı Latin harflidir ama
   İSAM işaretleri için Amiri ister). */
.benchmark-text { --text-face-font: 'Amiri', serif; font-family: var(--text-face-font); }
.benchmark-text.face-latin { --text-face-font: 'Barlow', Georgia, 'Times New Roman', 'Amiri', serif; }

/* --- Ücretsiz deneme (Faz 15): plan karşılaştırma ekranı --- */
/* Orijinal SAĞDA yapışkan, sonuç kartları SOLDA alt alta (Pro üstte). Arapça
   sağdan sola okunduğu için "orijinal sağda" doğal duruyor. */
.trial-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}
.trial-compare-results { display: grid; gap: var(--space-4); min-width: 0; }
.trial-result-card { padding: 0; overflow: hidden; }
/* Kart başlığı: plan adı TEK BAŞINA öne çıkar. Tutar/süre/model eskiden bu
   satırı paylaşıyordu ve kart bir fatura satırı gibi görünüyordu; ikincil
   künye artık kartın ALTINDA, sessiz bir `.card-meta` şeridinde. */
.trial-result-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}
.trial-result-head .section-title { margin-inline-end: auto; }
.trial-result-card .benchmark-text { border: 0; max-height: none; }
.trial-result-card .card-meta {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-divider);
}
.trial-source-img,
.trial-original-img {
  width: 100%; max-height: 60vh; object-fit: contain;
  border: 1px solid var(--color-border-field); display: block;
}
/* Denenecek planlar: bir SEÇİM değil, bir manifesto -- hepsi koşacak.
   Bu yüzden `.plan-card` (radyo bileşeni) kullanılmaz; ayrıca o kurallar
   wizard.css'te `#process-settings-form` altına kilitli, burada stilsiz kalır. */
.trial-plan-list { display: grid; margin: 0; padding: 0; list-style: none; }
.trial-plan-list li {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider);
}
.trial-plan-list li:last-child { border-bottom: 0; }
.trial-plan-name { font-family: var(--font-heading); font-size: var(--fs-lg); text-transform: uppercase; }
.trial-file-name { margin-top: var(--space-3); }
.trial-pending { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; }
.trial-pending .spinner,
.trial-result-card .spinner {
  width: 14px; height: 14px; border: 2px solid var(--color-divider);
  border-top-color: var(--color-accent); border-radius: 50%;
  display: inline-block; animation: trial-spin .8s linear infinite;
}
@keyframes trial-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  /* Mobilde referans ÖNCE görünmeli: orijinali başa al. */
  .trial-compare { grid-template-columns: 1fr; }
  .trial-compare-original { order: -1; }
  /* `relative`, `static` DEĞİL: blueprint köşeleri (.corner) mutlak
     konumlanır ve kapsayıcı bloğunu kaybetmemeli -- bkz. .sticky-aside'ın
     900px kuralındaki aynı gerekçe. */
  .trial-compare-original .sticky-aside,
  .trial-compare .sticky-aside { position: relative; top: auto; }
}

/* okuma ölçüsü: hukuki metinler satır uzunluğu için dar tutulur, ama gövde
   ölçüsünün içinde ORTALANIR -- sola yapışıp kesilmiş görünmesin. */
.legal { max-width: 52rem; margin-inline: auto; line-height: 1.7; }
.legal h2 { margin-top: 2rem; font-size: 1.25rem; }
.legal h3 { margin-top: 1.25rem; font-size: 1rem; }
.legal li { margin-bottom: .4rem; }

/* Arapça içerik -- KASITLI OLARAK fiziksel (rtl/right): OCR edilen Arapça
   metnin kendi yön özelliği, arayüz dilinden bağımsız. */
.rtl { direction: rtl; text-align: right; font-family: var(--font-arabic); font-size: 1.25rem; line-height: 2.2; color: var(--color-text); }

/* Gemini Batch aday metni, kod/ön-biçimli varsayılanla değil metnin kendi
   yönüyle okunur. `pre`nin monospace yüzü Arap harflerini gereksiz seyrek
   gösteriyor; `dir=auto` korunurken Amiri ve doğal harf/kelime aralığı
   kullanılır. Yeni satırlar anlamlıdır, fazladan OCR boşlukları değildir. */
.batch-bidi-text {
  font-family: var(--font-arabic), var(--font-body), serif;
  font-size: var(--fs-md);
  line-height: 1.9;
  letter-spacing: normal;
  word-spacing: normal;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
pre.batch-bidi-text {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
}
code.batch-bidi-text { display: block; }

@media (max-width: 760px) {
  .work-row { grid-template-columns: 1fr; }
  /* tek kolon: başlık -> kredi/Sil -> durum (aside sağa yaslı kalır) */
  .work-row__aside { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  .work-row .work-progress-container { grid-row: 3; }
  .stats-grid, .actions-grid { grid-template-columns: 1fr; }
  .volume-card-head { align-items: flex-start; }
  .admin-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ============================================================
   Ortak sihirbaz / detay bileşenleri
   Üç ayrı şablonda (02 PDF hazırla, 03 İşlem ayarı, eser detayı)
   kopyalanan başlık-bloğu, bölüm kartı, özet listesi ve anahtar
   satırı buraya alındı. Global `.checkbox-label` DEĞİŞMEDİ --
   benchmark/eval ekranları ona bağlı; buradaki `.toggle-row` ise
   açıklama satırı taşıyabilen daha geniş bir varyanttır.
   ============================================================ */

/* --- sayfa başlığı + sağdaki ikincil eylemler --- */
.page-hero, .page-head, .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); }
.page-hero h1, .page-head h1, .page-header h1 { margin: 5px 0 0; font-size: 2.35rem; line-height: .95; }
.page-head > div, .page-header > div { min-width: 0; }
.page-hero-copy, .page-head-lede { max-width: 74ch; margin: 10px 0 0; color: var(--color-text-muted); }
.page-hero-actions, .page-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.hero-kicker {
  margin: 0; color: var(--color-accent-700); font-family: var(--font-mono);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 820px) {
  .page-hero, .page-head, .page-header { align-items: flex-start; flex-direction: column; }
  .page-hero-actions, .page-head-actions { width: 100%; justify-content: flex-start; }
  .page-hero h1, .page-head h1, .page-header h1 { font-size: 2rem; }
}

/* --- dikey bölüm kartı (tek sayfalık akışlar) --- */
.stack-section, .panel { border: 1px solid var(--color-divider); background: var(--color-surface); }
.panel + .panel { margin-top: var(--space-4); }
.stack-section + .stack-section { margin-top: 14px; }
.section-head {
  /* wrap: başlığın yanındaki yardımcı öğe (sayaç, açıklama düğmesi) dar
     sütunda başlığı birkaç karakter genişliğine sıkıştırmasın diye alta
     iner; açılan açıklama metni de tam satır kaplayabilir. */
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding: 15px 20px; border-bottom: 1px solid var(--color-divider);
}
.section-head-main { display: grid; gap: 3px; min-width: 0; }
.section-num {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-accent-700);
}
.section-title { margin: 0; font-family: var(--font-heading); font-size: 1.3rem; line-height: 1.1; text-transform: uppercase; }
/* Sayfa basligi, `.page-head` sarmalayicisi OLMADAN kullanildiginda
   (fiyatlandirma paneli, herkese acik fiyat sayfasi). Tanimsizdi: iki
   ekranda h1 kendi varsayilan olcusunde kaliyor, .page-head'li ekranlardan
   farkli bir puntoda basiliyordu. */
.page-title { margin: 5px 0 0; font-size: 2.35rem; line-height: .95; }
.section-hint { margin: 3px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--color-neutral-700); }
.section-body { display: grid; gap: 14px; padding: 18px 20px; }
.section-aside { flex: none; font-family: var(--font-mono); font-size: .7rem; color: var(--color-text-muted); text-align: end; }

/* --- dt/dd özet listesi (iş özeti, onay ekranı) --- */
.summary-list { display: grid; gap: 0; margin: 0; }
.summary-list > div {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--color-divider);
}
.summary-list > div:first-child { border-top: 0; padding-top: 0; }
.summary-list dt { margin: 0; color: var(--color-text-muted); font-family: var(--font-mono); font-size: .6875rem; }
.summary-list dd { margin: 0; font-size: .8125rem; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .summary-list > div { grid-template-columns: 1fr; gap: 3px; }
}

/* --- açıklama satırı taşıyan anahtar/onay kutusu --- */
.toggle-grid { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.toggle-grid legend {
  padding: 0 0 6px; font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted);
}
.toggle-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--color-divider); background: var(--color-bg);
  cursor: pointer; transition: border-color .14s, background .14s;
}
.toggle-row:hover { border-color: var(--color-accent-400); }
.toggle-row:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-100); }
.toggle-row:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.toggle-row input[type=checkbox] { margin-top: 2px; accent-color: var(--color-accent); width: 1rem; height: 1rem; cursor: pointer; }
.toggle-row-text { display: grid; gap: 2px; min-width: 0; }
.toggle-row-text strong { font-size: .8438rem; font-weight: 600; }
.toggle-row-text small { font-size: .7188rem; line-height: 1.45; color: var(--color-neutral-700); }

/* --- geri alınamayan eylemler --- */
.danger-zone { border-color: color-mix(in srgb, var(--error) 40%, var(--color-divider)); }
.danger-zone .card-title { color: var(--error); }

/* ============================================================
   KANONİK BİLEŞENLER
   Denetimde aynı işi yapan çoklu desenler bulundu: 7 ayrı "eyebrow"
   sınıfı (+ ~35 satır içi kopya), 5 ayrı istatistik kutusu, 4 ayrı
   sayfa başlığı, 3 ayrı buton ailesi. Aşağısı bunların TEK karşılığı.
   Eski adlar SİLİNMEDİ, kanonik kuralın takma adı olarak bağlandı --
   markup'a bağlı testler ve henüz elden geçmemiş şablonlar kırılmasın.
   ============================================================ */

/* --- eyebrow: mono + küçük + harf aralıklı büyük harf etiketi.
       Yerine geçtiği: .card-kicker .metric-label .stat-label .section-num
       .sidebar-group .sidebar-credit-label .work-active-pdf__eyebrow
       .hero-kicker + şablonlardaki elle yazılmış kopyalar. --- */
.eyebrow,
.card-kicker, .metric-label, .stat-label, .stat-item .label,
.section-num, .sidebar-group, .sidebar-credit-label,
.work-active-pdf__eyebrow, .hero-kicker {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-text-muted);
}
/* Aksan tonu: bölüm numarasını ve hero kicker'ı gövdeden ayırır. */
.eyebrow-accent, .hero-kicker, .section-num, .card-kicker { color: var(--color-accent-700); }

/* --- panel: başlıklı kutu. Yerine geçtiği: padding'i sıfırlanmış .card +
       elle kurulmuş başlık div'i deseni (lexicon x2, cüzdan, gizlilik,
       çeviriler) ve .stack-section/.section-head ikilisi. --- */
.panel { display: block; padding: 0; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}
.panel-body { padding: var(--space-4) var(--space-5); }
/* Panel içindeki tablo kenardan kenara oturur: kendi kenarlığı zaten var. */
.panel > .table, .panel > .admin-table { margin: 0; }
.panel > .table th, .panel > .admin-table th,
.panel > .table td, .panel > .admin-table td { padding-inline: var(--space-5); }
.panel-empty { padding: var(--space-4) var(--space-5); color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }

/* --- boş durum: kütüphanede elle kurulmuş blueprint bloğu vardı,
       versions.html tanımsız bir .empty-state'e bağlıydı, kalan ekranlar
       düz muted paragraf kullanıyordu. Tek karşılık: --- */
.empty-state {
  position: relative; border: 1px solid var(--color-divider);
  padding: var(--space-12) var(--space-8); text-align: center;
}
.empty-state h2, .empty-state .empty-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 1.75rem; text-transform: uppercase; margin: 0;
}
.empty-state p { max-width: 52ch; margin: var(--space-3) auto var(--space-6); color: var(--color-text-muted); }
.empty-state > :last-child { margin-bottom: 0; }
/* Panel/tablo içindeki küçük boş durum: çerçevesiz, sade. */
.panel > .empty-state, .empty-state.is-inline { border: 0; padding: var(--space-8) var(--space-5); }

/* --- BİLDİRİM AİLESİ (sitedeki tek aile). Eskiden yalnız .error ve .info
       vardı; UYARI seviyesi yoktu, bu yüzden "PayTR test modu AÇIK" gibi
       uyarılar hata kırmızısıyla gösteriliyordu.

       BİLGİ ≠ BAŞARI: .notice-info eskiden --ok (yeşil) ile boyanıyordu, yani
       nötr bir bilgi ile tamamlanmış bir işlem ayırt edilemiyordu. Bilgi artık
       sitenin vurgu mavisini, .notice-ok yeşili taşır.

       Alt çizgi kuralı BİLİNÇLİ (2026-09-02 kararı): metin içi bağlantılarda
       renk tek ayırt edici olmasın. --- */
.notice-info, .notice-ok, .notice-warn, .notice-error {
  padding: var(--space-3); font-size: var(--fs-sm);
  margin-bottom: var(--space-4); border-inline-start: 3px solid currentColor;
}
.notice-info  { color: var(--color-accent-ink); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.notice-ok    { color: var(--ok);    background: color-mix(in srgb, var(--ok) 8%, transparent); }
.notice-warn  { color: var(--warn);  background: color-mix(in srgb, var(--warn) 10%, transparent); }
.notice-error { color: var(--error); background: color-mix(in srgb, var(--error) 8%, transparent); }
.notice-info a, .notice-ok a, .notice-warn a, .notice-error a { color: currentColor; text-decoration: underline; }
/* Dar yerler: panel içi, editör paneli, tablo hücresi. */
.notice-info.is-compact, .notice-ok.is-compact,
.notice-warn.is-compact, .notice-error.is-compact {
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); font-size: var(--fs-xs);
}

/* --- durum listesi: geçti/kaldı YALNIZ RENKLE anlatılıyordu (yönetim
       panelindeki "Ticari Hazırlık"). İşaret + metin birlikte taşınır. --- */
.status-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.status-list > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
.status-list .status-mark { font-family: var(--font-mono); font-weight: 500; }
.status-list > li[data-state="ok"] .status-mark { color: var(--ok); }
.status-list > li[data-state="warn"] .status-mark { color: var(--warn); }
.status-list > li[data-state="error"] .status-mark { color: var(--error); }

/* --- küçük buton: .btn'in ince varyantı. Yerine geçtiği: .btn-dl,
       tablolarda elle küçültülmüş butonlar, editörün .editor-btn'i. --- */
.btn-sm, .btn.btn-sm { font-size: var(--fs-xs); padding: 5px 10px; gap: 5px; }

/* --- büyük buton: .btn'in KALIN varyantı. Bir ekranın tek birincil eylemi
       için (kütüphanede "Yeni eser yükle"): o sayfada ikinci bir eylem
       kalmayınca normal ölçüdeki buton başlığın yanında kayboluyordu. --- */
.btn-lg, .btn.btn-lg { font-size: 0.9375rem; padding: 10px 20px; }

/* --- yerleşim yardımcıları: şablonlarda 76 kez display:flex, 35 kez
       flex-wrap:wrap ve onlarca kez aynı iki kolonlu grid elle yazılmıştı. --- */
.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }

/* --- hukuki beyan bloğu (_document_notice.html / _processing_consent.html).
       Sitenin EN YÜKSEK BAHİSLİ metnini taşır; eskiden yalnız yerleşimdi
       (çerçevesiz, zeminsiz, iç boşluksuz) ve `.stack` sınıfına bağımlıydı --
       tek başına `display` bile taşımıyordu. Artık kendi kutusu var. --- */
.legal-action-notice {
  display: grid; gap: var(--space-2); min-width: 0;
  margin-block: var(--space-4); padding: var(--space-4);
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
  border: 1px solid var(--color-divider);
  border-inline-start: 3px solid var(--color-accent-ink);
}
.legal-action-notice > p { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
/* Yayın kapsamı uyarısı destek metni DEĞİL, bloğun konusudur. */
.legal-action-notice > p[data-publication-scope] { font-size: var(--fs-sm); color: var(--color-text); }
.legal-action-notice a { color: currentColor; text-decoration: underline; }
.legal-action-notice:focus-within { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* Onay satırı. Bu sınıfın GLOBAL bir kuralı YOKTU: tek tanım
   works/confirmation.html'in kendi <style> bloğundaydı, kalan 13 kullanım yeri
   jenerik `label` kuralına (yukarıda: block + .75rem + %70 opaklık) düşüyordu.
   Sonuç: onay kutusu metinden ayrı satıra iniyor ve ZORUNLU beyan bloğun en
   soluk yazısı oluyordu. Özgüllük o kuralla aynı (0,1,0) -- bu blok dosyada
   ondan SONRA gelmek zorunda. */
.confirmation-ack {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin: 0; max-width: 72ch; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 400;
  line-height: 1.5; color: var(--color-text);
  text-transform: none; letter-spacing: 0;
}
/* Onay kutusunun ÖLÇÜSÜ ve accent rengi burada TANIMLANMAZ: global
   `input[type="checkbox"]` kuralı (bu dosyanın sonunda) 1.1rem/--color-accent-ink
   ile tek doğruluk kaynağı. Burada tekrar yazmak yalnız ölü kod üretiyordu --
   o kural sonra geldiği için zaten eziyordu. Optik hizalama için gereken üst
   boşluk .checkbox-label/.toggle-row ile aynı satırda veriliyor. */

/* Dar yerler: durum rozetinin yanı (work_progress.html), kenar paneli
   (translations/detail.html), editörün yeniden OCR paneli. */
.legal-action-notice.is-compact {
  padding: var(--space-2) var(--space-3); margin-block: var(--space-2);
  gap: var(--space-1); background: none;
}
.legal-action-notice.is-compact .confirmation-ack,
.legal-action-notice.is-compact > p,
.legal-action-notice.is-compact > p[data-publication-scope] { font-size: var(--fs-xs); }

/* Rozet satırındaki form. Eskiden `class="inline"` (display:inline) idi ve
   içine flex/grid bir blok konuyordu -- dört yerde bozuk akış üretiyordu. */
.status-line-action { display: grid; gap: var(--space-2); justify-items: start; }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cluster-lg { gap: var(--space-3) var(--space-4); }
.split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.split-top { align-items: flex-start; }
.split-end { align-items: flex-end; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-6); align-items: start; }
.grid-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--space-6); align-items: start; }
.sticky-aside { position: sticky; top: 78px; }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.fs-2xs { font-size: var(--fs-2xs); }
.fs-xs  { font-size: var(--fs-xs); }
.fs-sm  { font-size: var(--fs-sm); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
@media (max-width: 900px) {
  .grid-aside { grid-template-columns: minmax(0, 1fr); }
  /* `static` DEGIL `relative`: yan panel ayni zamanda bir .blueprint olabilir
     ve .blueprint'in position:relative'i onun mutlak konumlu kose isaretleri
     icin KAPSAYICI BLOKTUR. static yapilinca koseler kapsayici bloklarini
     kaybedip sayfanin disina dusuyor ve govdeyi 6px yatay kaydiriyordu. */
  .sticky-aside { position: relative; top: auto; }
}

/* ============================================================
   ESER SİHİRBAZI -- adım şeridi ve eylem çubuğu
   Bu iki bileşen works/_wizard_steps.html'in style bloğunda duruyordu,
   ama .wizard-action-bar BEŞ ayrı şablonda kullanılıyor; partial include
   edilmediğinde stilsiz kalıyordu. Paylaşılan bileşen paylaşılan yere.
   ============================================================ */
.wizard-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--color-divider); margin: var(--space-6) 0 var(--space-8);
}
.wizard-step {
  min-width: 0; min-height: 78px; padding: var(--space-4) var(--space-5);
  border-inline-end: 1px solid var(--color-divider);
  color: var(--color-text-muted); text-decoration: none;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.wizard-step:last-child { border-inline-end: 0; }
.wizard-step-number, .wizard-step-state { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .04em; }
.wizard-step-label { color: var(--color-text); font-family: var(--font-heading); font-size: 1.0625rem; line-height: 1.15; text-transform: uppercase; }
.wizard-step-state { color: var(--color-text-muted); }
.wizard-step.is-active { color: var(--color-bg); background: var(--color-accent-900); }
.wizard-step.is-active .wizard-step-number,
.wizard-step.is-active .wizard-step-label,
.wizard-step.is-active .wizard-step-state { color: inherit; }
.wizard-step.is-complete { background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface)); }
.wizard-step.is-complete .wizard-step-number,
.wizard-step.is-complete .wizard-step-state { color: var(--color-accent-700); }
.wizard-step.is-complete:hover { background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); }
.wizard-action-bar {
  position: sticky; bottom: var(--space-4); z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(8px); box-shadow: var(--shadow-sm);
}
@media (max-width: 760px) {
  .wizard-steps { grid-template-columns: 1fr 1fr; }
  .wizard-step { min-height: 68px; border-bottom: 1px solid var(--color-divider); }
  .wizard-step:nth-child(2n) { border-inline-end: 0; }
  .wizard-step:nth-last-child(-n + 2) { border-bottom: 0; }
  .wizard-action-bar { align-items: stretch; flex-direction: column; bottom: 8px; }
  .wizard-action-bar .btn { width: 100%; }
  /* Çubuk dikey yığıldığı için onay bloğu 375px'te görüntünün yarısından
     fazlasını kaplıyordu (ölçüldü). METİN AYNEN KALIR -- yalnız kutu
     inceltilir: zemin kalkar (çubuğun kendi zemini zaten var), boşluk ve
     punto düşer. */
  .wizard-action-bar .legal-action-notice {
    padding: var(--space-2) var(--space-3); background: none;
  }
  .wizard-action-bar .confirmation-ack { font-size: var(--fs-xs); }
  .wizard-action-bar .legal-action-notice > p,
  .wizard-action-bar .legal-action-notice > p[data-publication-scope] { font-size: var(--fs-2xs); }
}

/* base.html'den tasinan satir ici stiller */
.shell-col {
  min-width: 0; display: flex; flex-direction: column;
  /* Dekoratif .blueprint koseleri kutunun 6px disina tasar; dar ekranda
     bu govdeyi yatay kaydiriyordu. `clip` scroll konteyneri yaratmadigi
     icin sticky ust cubuk calismaya devam eder. */
  overflow-x: clip;
}
.sidebar-credit-cta { margin-top: var(--space-3); }
.topbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.topbar-lang { flex: none; gap: 2px; padding: 3px; border-radius: 999px; background: var(--color-surface); overflow: visible; }
.topbar-lang > a.seg-opt { justify-content: center; min-width: 38px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 999px; font-size: .6875rem; line-height: 1; text-decoration: none; }
.seg.topbar-lang > a.seg-opt + a.seg-opt { border-inline-start: 0; }
.topbar-lang > a.seg-opt.active { box-shadow: var(--shadow-sm); }
.topbar-lang > a.seg-opt.active:hover { background: var(--color-accent-ink-hover); color: var(--color-bg); }
.topbar-profile { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 44px; padding: 4px 8px 4px 4px; border-radius: var(--radius-sm); color: var(--color-text); }
.topbar-profile:hover { background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.topbar-profile .topbar-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent-100); border-color: transparent; color: var(--color-accent-ink); font-weight: 600; }
.topbar-identity { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topbar-name { display: block; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; line-height: 1.2; }
.topbar-role { color: var(--color-text-muted); font-size: .6875rem; line-height: 1.2; }
.topbar-user form.inline { flex: none; }
.topbar-profile:focus-visible, .topbar-lang > a.seg-opt:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }
@media (max-width: 1100px) { .topbar-name { max-width: 14ch; } }
@media (max-width: 620px) {
  .topbar-end { gap: 8px; }
  .topbar-profile { justify-content: center; width: 44px; padding: 4px; }
  .topbar-identity { display: none; }
  .topbar-lang > a.seg-opt { min-height: 38px; }
}

/* Segment seçenekleri artık gerçek <button> (klavye erişimi için). Çıplak
   <button> varsayılan olarak .btn-secondary görünümü aldığından her seçenek
   kendi kenarlığını getiriyordu; şeridin tek çerçevesi .seg'in kendisidir. */
/* `background: transparent` KOSULSUZ verilirse (0,2,1) ozgulluk .seg-opt.active
   (0,2,0) kuralini EZER: secili secenek dolgusunu kaybeder ama yazi rengi
   --color-bg (neredeyse beyaz) kaldigi icin GORUNMEZ olur. Sifirlama yalniz
   secili OLMAYAN seceneklere uygulanir. */
.seg > button.seg-opt { border: 0; border-radius: 0; }
.seg > button.seg-opt:not(.active) { background: transparent; }
.seg > button.seg-opt + button.seg-opt { border-inline-start: 1px solid var(--color-divider); }

/* --- kütüphane --- */
.library-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: var(--space-8) 0; background: var(--color-surface); }
.library-metrics[data-has-drafts="true"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.library-metrics > .stat-cell {
  display: flex; flex-direction: column; gap: var(--space-3); min-height: 132px;
  padding: var(--space-5) var(--space-6); border: 0; border-inline-end: 1px solid var(--color-divider);
}
.library-metrics > .stat-cell:last-child { border-inline-end: 0; }
.library-metrics .eyebrow { line-height: 1.5; }
.library-metrics .stat-value { margin-block-start: auto; }
.library-metric-link {
  color: var(--color-text); text-decoration: none;
  transition: background .12s, box-shadow .12s;
}
.library-metric-link:hover { color: var(--color-text); background: var(--color-bg); }
.library-metric-link.is-active {
  color: var(--color-accent-ink); background: var(--color-accent-100);
  box-shadow: inset 0 -3px 0 var(--color-accent-ink);
}
.library-metric-link.is-active .eyebrow { color: var(--color-accent-ink); }
.library-metric-link:focus-visible { outline-offset: -4px; }
.library-metric-drafts { background: var(--color-accent-100); }
.library-metric-drafts .eyebrow, .library-metric-drafts .stat-value { color: var(--color-accent-ink); }
#library-drafts { scroll-margin-top: 80px; }
.library-filter { margin-bottom: var(--space-5); }
.library-filter .seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-color: var(--color-divider); }
.library-filter .seg > .seg-opt { min-height: 44px; border: 0; padding: var(--space-2) var(--space-4); }
.library-filter .seg > .seg-opt + .seg-opt { border-inline-start: 0; }
.library-filter .seg-opt.active:hover { color: var(--color-bg); background: var(--color-accent-ink-hover); }
.library-collection { min-width: 0; }
.library-collection-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-5); }
.library-collection-head .section-title { line-height: 1.3; }
.library-work-list { background: var(--color-surface); }
.library-work-list .work-row { padding: var(--space-6); }
.library-work-list .work-title, .library-work-list .work-meta { overflow-wrap: anywhere; }
.library-selection-empty, .library-filter-empty {
  margin: 0; padding: var(--space-10) var(--space-6); border: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.library-selection-empty p, .library-filter-empty p { max-width: 54ch; margin-inline: auto; }
@media (max-width: 1100px) {
  .library-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .library-metrics > .stat-cell:nth-child(n) { grid-column: span 2; border-inline-end: 1px solid var(--color-divider); border-bottom: 0; }
  .library-metrics > .stat-cell:nth-child(-n+2) { grid-column: span 3; border-bottom: 1px solid var(--color-divider); }
  .library-metrics > .stat-cell:nth-child(2), .library-metrics > .stat-cell:last-child { border-inline-end: 0; }
  .library-metrics[data-has-drafts="true"] > .stat-cell:nth-child(n) { grid-column: span 2; border-inline-end: 1px solid var(--color-divider); border-bottom: 0; }
  .library-metrics[data-has-drafts="true"] > .stat-cell:nth-child(-n+3) { border-bottom: 1px solid var(--color-divider); }
  .library-metrics[data-has-drafts="true"] > .stat-cell:nth-child(3n) { border-inline-end: 0; }
}
@media (max-width: 560px) {
  .library-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-metrics > .stat-cell:nth-child(n) { grid-column: auto; min-height: 112px; padding: var(--space-4); }
  .library-metrics > .stat-cell:nth-child(-n+2) { grid-column: auto; }
  .library-metrics > .stat-cell:nth-child(3) { grid-column: 1 / -1; border-inline-end: 0; border-bottom: 1px solid var(--color-divider); }
  .library-metrics[data-has-drafts="true"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-metrics[data-has-drafts="true"] > .stat-cell:nth-child(n) { grid-column: auto; border-inline-end: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
  .library-metrics[data-has-drafts="true"] > .stat-cell:nth-child(2n) { border-inline-end: 0; }
  .library-metrics[data-has-drafts="true"] > .stat-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .library-filter, .library-filter .seg { width: 100%; }
  .library-filter .seg > .seg-opt {
    flex: 1 1 calc(50% - 4px); justify-content: center; padding-inline: var(--space-2);
    font-family: var(--font-body); font-size: var(--fs-sm); white-space: nowrap;
  }
  .library-work-list .work-row { padding: var(--space-4); }
}
/* Satır listesi: alt kenarlığı .work-row'lar taşır, kapsayıcı yalnız
   çerçeveyi kapatır. */
.work-list { border: 1px solid var(--color-divider); border-bottom: none; }
.tag-inline { margin-inline-start: 6px; }
.work-cost { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--color-text-muted); }
.work-delete { color: var(--color-text-muted); }
.work-delete:hover { color: var(--error); }
.library-section { margin-top: var(--space-10); }
.library-section-title { margin-top: var(--space-10); }
.library-section-head { align-items: baseline; margin-bottom: var(--space-3); }
/* Başlık yanındaki sayaç: başlığın büyük harf dönüşümünü DEVRALMAZ. */
.section-count { font-size: var(--fs-md); text-transform: none; color: var(--color-text-muted); font-weight: 400; }

/* --- ayarlar --- */
/* Tam genişlik segment şeridi: seçenekler eşit paylaşır. Ayırıcı çizgi
   doğrudan çocuklara verilir, çünkü seçeneklerden biri <span> (mevcut
   durum), diğeri <form> içinde <button> (geçilebilir eylem). */
.seg-block { display: flex; width: 100%; }
.seg-block > * { flex: 1; margin: 0; }
.seg-block > * + * { border-inline-start: 1px solid var(--color-divider); }
.seg-form { display: flex; }
.seg-block .seg-opt { flex: 1; justify-content: center; border: 0; border-radius: 0; }
.seg-block span.seg-opt { cursor: default; }

.key-state {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  border: 1px solid var(--color-accent); background: var(--color-accent-100);
  color: var(--color-accent-800); padding: var(--space-3) var(--space-4);
}
/* Kart içine gömülü form: kartın kendi yüzeyinden bir kademe ayrılır. */
.inset-form {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border: 1px solid var(--color-divider);
  background: var(--color-surface); margin: 0;
}
.inset-form[hidden] { display: none; }
.is-error { color: var(--error); }
.is-accent { color: var(--color-accent-800); }
/* Kendi satırında duran, gerilmeyen buton (form flex kolonu içinde). */
.btn-start { align-self: flex-start; }
.model-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); }
.account-line { margin: 0; font-size: var(--fs-sm); color: var(--color-neutral-800); }

/* ============================================================
   YÖNETİM PANELİ
   Bu ekranlar tasarım sisteminin dışında kalmıştı: 8px yuvarlatılmış
   kutular (sistem 0/4px), font-weight:bold, ad-hoc 2rem puntolar,
   onmouseover ile satır içi JS hover, yalnız renge dayalı durumlar.
   ============================================================ */
.panel-title { margin: 0; font-family: var(--font-heading); font-size: 1.375rem; line-height: 1.1; text-transform: uppercase; }

/* Hücre sayısı değişken olan şerit (silme talebi varsa 6, yoksa 5). */
.admin-summary { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); margin-bottom: var(--space-6); }
.analytics-strip { --cells: 3; border-inline: 0; border-block-start: 0; }
.batch-summary-strip { --cells: 5; }
.stat-cell-link { color: inherit; text-decoration: none; }
.stat-cell-link:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); text-decoration: none; }
/* Dikkat gerektiren hücre: renk TEK başına anlam taşımaz, sayı zaten
   sıfırdan büyük olduğu için okunur; renk yalnız pekiştirir. */
.stat-cell.is-alert { box-shadow: inset 3px 0 0 var(--error); }
.stat-cell.is-alert .stat-value { color: var(--error); }
.stat-cell.is-flagged { box-shadow: inset 3px 0 0 var(--color-accent); }
[dir="rtl"] .stat-cell.is-alert, [dir="rtl"] .stat-cell.is-flagged { box-shadow: inset -3px 0 0 currentColor; }
.stat-note { font-size: var(--fs-2xs); color: var(--color-text-muted); margin-top: 2px; }

.panel + .panel, .panel + .grid-2, .grid-2 + .panel, .stat-strip + .panel { margin-top: var(--space-8); }
.commerce-panel.is-alert { border-color: var(--error); }
.commerce-note { margin: var(--space-4) 0 0; }
.commerce-totals { margin: var(--space-4) 0 0; }
.commerce-panel .status-list small { color: var(--error); }
.chart-box { max-width: 380px; margin-inline: auto; }
.admin-links { margin-top: var(--space-8); }
.admin-links .card-body { margin-top: var(--space-2); }

.tag-danger { background: var(--error); color: var(--color-bg); margin-inline-start: 4px; }

/* Satır eylemleri: eskiden her eylem KENDİ tablo kolonundaydı (11 kolon).
   Tek hücrede toplandı; dar hücrede alt alta sarar. */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.row-actions form { margin: 0; }

/* --- 900px altında tablo satırları karta döner ---------------------------
   .admin-table 760px altında yatay kaydırmaya düşüyordu; 7 kolonluk bir
   tabloda bu, telefonda kullanılamaz demekti. data-label'lar başlık
   satırının işini üstlenir. -------------------------------------------- */
@media (max-width: 900px) {
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards { white-space: normal; overflow: visible; }
  .table-cards thead {
    display: block; position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    inset-inline-start: -9999px;
  }
  .table-cards tr {
    border: 1px solid var(--color-divider); padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
  }
  .table-cards tr:hover { background: transparent; }
  .table-cards td {
    border: 0; padding: 5px 0;
    display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: var(--space-3); align-items: baseline;
  }
  .table-cards td::before {
    content: attr(data-label);
    font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .08em;
    text-transform: uppercase; color: var(--color-text-muted);
  }
  .table-cards td[data-label=""]::before { content: ""; }
}

/* ============================================================
   SÖZLÜK / KARIŞMA KATALOGU
   ============================================================ */
/* Arapça terim hücresi: yön kasıtlı olarak fiziksel (metnin kendi yönü,
   arayüz dilinden bağımsız) -- bkz. .rtl açıklaması. */
.lex-term { font-family: var(--font-arabic); font-size: 0.9375rem; }

/* Satırın tamamı tıklanabilir kalır ama gezinmeyi GERÇEK bir bağlantı
   yapar: tab sırası, Enter, orta tık, "yeni sekmede aç" hepsi çalışır.
   Eskiden <tr onclick> vardı ve hiçbiri çalışmıyordu. */
.row-link-table tbody tr { position: relative; }
.row-link { text-decoration: none; color: inherit; }
.row-link:hover { text-decoration: none; color: inherit; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link-table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); cursor: pointer; }
.row-link-table tbody tr:has(.row-link:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.row-link-table tbody tr.is-selected { background: color-mix(in srgb, var(--color-accent) 9%, transparent); }

.lex-inspector { padding: var(--space-6); display: grid; gap: var(--space-2); align-content: start; }
.lex-inspector > p { margin: 0; }
.lex-headword { font-family: var(--font-arabic); font-size: 1.375rem; line-height: 1.6; }
.lex-headword.is-lg { font-size: 1.625rem; }
.lex-block { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.lex-hits { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.lex-hit { border: 1px solid var(--color-divider); padding: 6px 8px; font-size: var(--fs-xs); }
.lex-hit-meta { margin-bottom: 3px; letter-spacing: .04em; }
.lex-hit-text { font-family: var(--font-arabic); }
.lex-sample { font-family: var(--font-arabic); font-size: var(--fs-md); border: 1px solid var(--color-divider); padding: 8px 10px; }
/* Kopyalanmak üzere gösterilen komut: tek tıkla tamamı seçilir. */
.cli-command {
  border: 1px solid var(--color-divider); background: var(--color-surface);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  word-break: break-all; user-select: all;
}

/* Satir ici stillerden donusturulen yardimcilar (bkz. destyle pasi). */
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.is-ok { color: var(--ok); }
.is-text { color: var(--color-text); }
.text-center { text-align: center; }
/* `.table-wrap` UC sablonda (fiyatlandirma, gemini batch x2) kullaniliyordu
   ama HICBIR yerde tanimli degildi: genis tablolar kaydirma kutusu almadan
   kabuktan tasiyordu. `.scroll-x`in takma adi -- ayri bir kural degil. */
/* `position: relative` SART: kutunun icindeki mutlak konumlu ogeler (ornegin
   bir baslik hucresindeki `.sr-only`) konumlanmis bir ata bulamazsa kaydirma
   kutusunun DISINA, sayfanin ilk kapsayici blokuna yerlesir ve GOVDEYI yatay
   kaydirir -- kaydirma kutusunun tam da onlemek icin var oldugu sey. */
.scroll-x, .table-wrap { overflow-x: auto; position: relative; }

/* --- ekonomi / cüzdan --------------------------------------------------- */
.economics-summary { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.economics-summary .stat-cell { text-align: center; }
.wallet-balance { --cells: 3; margin: var(--space-6) 0; }
.stat-value.is-xl { font-size: 2.5rem; line-height: 1.15; }
/* Kredi artışı: alacak satırı borç satırından ayrılsın. */
.is-credit { color: var(--color-accent-700); }
.section-gap { margin-bottom: var(--space-8); }
.subhead { margin-top: var(--space-6); font-size: var(--fs-lg); }
.tight { margin-bottom: var(--space-2); }
.col-auto { width: auto; }
@media (max-width: 700px) {
  .wallet-balance { --cells: 1; }
  .wallet-balance .stat-cell { border-inline-end: 0; border-bottom: 1px solid var(--color-divider); }
  .wallet-balance .stat-cell:last-child { border-bottom: 0; }
}

/* --- karşılaştırma: sütun başlığındaki model/koşul künyesi.
       Bu sınıf HİÇBİR yerde tanımlı değildi, stilsiz render ediliyordu. --- */
.benchmark-meta { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--color-text-muted); }

/* ============================================================
   BOŞLUK / TİPOGRAFİ YARDIMCILARI
   Şablonlardaki 675 satır içi bildirimin büyük kısmı tek bir margin
   ya da font-size'dı. Ölçekten sapmayı önlemek için hepsi ölçek
   basamaklarına bağlı yardımcı sınıflara çevrildi -- yeni bir değer
   yazmadan önce ölçekte karşılığı var mı diye bakın.
   ============================================================ */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.my-3 { margin-block: var(--space-3); }
/* Olcekte tek eksik basamak: iki sablon `.my-5` yaziyor, karsiligi yoktu. */
.my-5 { margin-block: var(--space-5); }
.my-6 { margin-block: var(--space-6); }
.ms-3 { margin-inline-start: var(--space-3); }
.p-3 { padding: var(--space-3); }
.p-5 { padding: var(--space-5); }
.fw-600 { font-weight: 600; }
.jc-between { justify-content: space-between; }
.is-warn { color: var(--warn); }
/* Okuma ölçüsü: uzun açıklama paragrafları satır uzunluğunu aşmasın. */
.measure { max-width: 70ch; }
.narrow { max-width: 480px; }
/* Esnek satırda eşit paylaşan, belli bir genişliğin altına inmeyen kolon. */
.flex-col-min { flex: 1; min-width: 200px; }
.flex-col-min.is-wide { min-width: 280px; }
/* Bölüm başlığı satırı: başlık + yanındaki sayaç/eylem, tabanda hizalı. */
.head-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); }
.subtitle { font-family: var(--font-heading); font-size: 1.25rem; text-transform: uppercase; }
.summary-toggle { cursor: pointer; font-size: var(--fs-sm); }

/* Ek boşluk/ölçü basamakları ve tekrar eden küçük desenler. */
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.split-baseline { align-items: baseline; }
.narrow.is-wide { max-width: 640px; }
/* Geri dönüş bağlantısı / bağlam etiketi (sayfa başlığının üstünde). */
.crumb-tag { font-family: var(--font-mono); font-size: var(--fs-2xs); display: inline-block; margin-bottom: var(--space-3); color: var(--color-text-muted); }

/* Satır içi stillerden dönüştürülen kalan yardımcılar. */
.my-1 { margin-block: var(--space-1); }
.my-8 { margin-block: var(--space-8); }
.prewrap { white-space: pre-wrap; }
.clickable { cursor: pointer; }
.is-dim { opacity: .5; }
.is-struck { text-decoration: line-through; color: var(--color-text-muted); }
.is-accent-ink { color: var(--color-accent-700); }
.d-block { display: block; }
.flex-1 { flex: 1; }
.flex-none { flex: none; }
.jc-end { justify-content: flex-end; }
.align-end { align-items: flex-end; }
.text-start { text-align: start; }
.stack-md { display: flex; flex-direction: column; gap: var(--space-3); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.grid-auto.is-tight { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-2); }
.narrow.is-sm { max-width: 420px; }
.measure.is-wide { max-width: 760px; }
.field-narrow { max-width: 240px; }
/* Listede satırları ayıran ince çizgi (kart içi tekrar eden öğe). */
.divided-item { border-top: 1px solid var(--color-divider); padding-top: var(--space-3); }
.rule { height: 1px; background: var(--color-divider); margin: var(--space-4) 0; border: 0; }
/* Öne çıkan tek sayı: bakiye, ilerleme yüzdesi, toplam. */
.big-figure { font-family: var(--font-heading); font-size: 2.125rem; line-height: 1.2; color: var(--color-accent-700); }
.big-figure.is-sm { font-size: 1.5rem; color: inherit; }
/* Onay kutusu/radyo yanındaki açıklama metni. */
.choice-text { font-size: var(--fs-sm); color: var(--color-neutral-800); line-height: 1.6; }
/* Başlığın hemen altındaki tek satırlık alt açıklama. */
.page-head-sub { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0 0 var(--space-6); }
.empty-lede { margin: var(--space-3) auto 0; max-width: 52ch; }
/* Panel başlığı, alt kenarlıksız (kendi tablosu zaten ayırıyor). */
.panel-head-plain { padding: var(--space-3) var(--space-5); margin: 0; }
.fs-md { font-size: var(--fs-md); }
.fs-lg { font-size: var(--fs-lg); }
/* Esnek satırda öğeyi satır sonuna iter -- RTL'de de doğru kenara. */
.push-end { margin-inline-start: auto; }

/* ============================================================
   Son tur: şablonlardan sökülen tekil desenler
   ============================================================ */
/* İlerleme çubuğu kalınlık varyantları (eskiden her çağrı yerinde
   satır içi height veriliyordu). */
.progress-wrap.is-md { height: 6px; }
.progress-wrap.is-lg { height: 8px; }

/* Küçük önizleme görseli (şikâyet/aday listeleri). */
.thumb-sm { max-width: 220px; border: 1px solid var(--color-divider); border-radius: var(--radius-sm); }
.thumb-sm.is-lg { max-width: 320px; border-radius: 0; }
/* Sayfa taraması: kutuya sığar, oranı bozulmaz. */
.page-image { width: 100%; max-height: 550px; object-fit: contain; border: 1px solid var(--color-divider); }
.page-image.is-sm { max-height: 300px; }

/* Geniş dolgulu buton ve tam kırmızı (yıkıcı) buton. .btn-danger yalnız
   METNİ kırmızıya çevirir; onay ekranlarındaki "kalıcı olarak sil" gibi
   geri dönüşü olmayan eylemler dolu zemin ister. */
.btn-wide, .btn.btn-wide { width: auto; padding: var(--space-3) var(--space-8); }
.w-auto, .btn.w-auto { width: auto; }
.btn-danger-solid, button.btn-danger-solid {
  background: var(--error); border-color: var(--error); color: var(--color-bg);
}
.btn-danger-solid:hover, button.btn-danger-solid:hover {
  background: color-mix(in srgb, var(--error) 82%, #000); color: var(--color-bg);
}
.radius-0 { border-radius: 0; }

/* Kaydırma kutusu içindeki geniş tablo -- kolonlar sıkışıp okunmaz olmasın. */
.table-wide { min-width: 800px; }
.grid-halves { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.span-2 { grid-column: span 2; }
@media (max-width: 560px) {
  .grid-halves { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}
/* Doğrulama kuyruğu: liste + dar yan sütun. */
.grid-review { grid-template-columns: minmax(0, 1fr) 200px; }
@media (max-width: 760px) { .grid-review { grid-template-columns: minmax(0, 1fr); } }

/* Onay kutusu + açıklama satırı (ödeme sözleşmesi onayı gibi). */
.choice-row { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.checkbox-inline { width: auto; margin-top: 3px; }
.field-flex { flex: 1 1 140px; min-width: 0; max-width: 220px; margin: 0; }
.col-50 { min-width: 50px; }
.col-70 { min-width: 70px; text-align: end; }

/* Arapça metin yüzü (yön DEĞİL yalnız yazı tipi -- yönü dir= belirler). */
.font-arabic { font-family: var(--font-arabic); }

/* <details> başlığı: tıklanabilir, ok işareti gizli. */
.summary-row {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-4); padding: var(--space-3) var(--space-4);
}
.summary-row::-webkit-details-marker { display: none; }
.detail-body { padding: 0 var(--space-4) var(--space-4); }

/* Kod/komut bloğu (değerlendirme raporu). */
.code-block {
  background: var(--color-surface); border: 1px solid var(--color-divider);
  padding: var(--space-3); font-size: var(--fs-xs); overflow-x: auto;
  font-family: var(--font-mono);
}
/* Kaydırılabilir alt liste (uzun sayfa listeleri panelin boyunu şişirmesin). */
.scroll-panel { max-height: 360px; overflow: auto; }
.list-link {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: 9px 2px; border-bottom: 1px solid var(--color-divider); text-decoration: none;
}
.list-link:hover { text-decoration: none; background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.is-highlighted { border-color: var(--color-accent); }
.my-2 { margin-block: var(--space-2); }
.my-4 { margin-block: var(--space-4); }

/* Kod/prompt metin alanı: sistemin .input'u üzerine mono yüz. (Eskiden her
   kullanım yerinde 8px yuvarlak, elle boyanmış bir kutu olarak yazılıyordu.) */
.code-input { font-family: var(--font-mono); font-size: var(--fs-md); line-height: 1.6; }
/* Segment şeridi içindeki bağlantı seçenekleri (JS'siz sekmeler). */
.seg > a.seg-opt + a.seg-opt { border-inline-start: 1px solid var(--color-divider); }
/* Karşılaştırma sütunu künyesi: model/koşul bilgisi, metinden çizgiyle ayrı. */
.benchmark-colmeta {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--fs-sm); margin-bottom: var(--space-2);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider);
}

/* ============================================================
   SAYFALAMA (pager) — templates/_macros.html:pager ile birlikte
   ============================================================
   Uygulamada hic sayfalama bileseni yoktu; cilt ekrani 400 satiri tek
   dokumanda basiyordu. Editorun kendi pager'i (editor.css:.editor-pager)
   yalnizca o ekranda yuklenen bir stil dosyasinda yasadigi icin yeniden
   kullanilamiyordu -- bu, uygulama genelindeki kanonik bilesendir. */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-3) 0;
}
.pager-info {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  color: var(--color-text-muted); margin-inline-end: auto;
}
.pager-item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 5px 9px;
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  border: 1px solid var(--color-divider); background: var(--color-surface);
  color: var(--color-text); text-decoration: none;
}
.pager-item:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.pager-item.is-current {
  background: var(--color-accent-ink); border-color: var(--color-accent-ink);
  color: var(--color-bg); font-weight: 700;
}
.pager-item.is-current:hover { background: var(--color-accent-ink-hover); color: var(--color-bg); }
.pager-gap { padding: 5px 2px; color: var(--color-text-muted); font-size: var(--fs-2xs); }
.pager-item[aria-disabled='true'] { opacity: .35; pointer-events: none; }

/* ============================================================
   ESER AYRINTISI — templates/works/work_detail.html
   ============================================================
   Bu kurallar ESKİDEN o şablonun içinde 45 satırlık bir <style> bloğuydu;
   tasarım sisteminin dışında, her sayfa yüklemesinde yeniden gönderilen ve
   hiçbir yerden yeniden kullanılamayan bir ada. */
.work-back-link { display: inline-block; margin-bottom: 10px; font-family: var(--font-mono); font-size: .7188rem; }
.work-hero { align-items: flex-start; margin-bottom: 4px; }
.work-hero-title { margin: 0; font-size: 2.35rem; line-height: 1; }
.work-hero-author { margin: 8px 0 6px; font-size: .9375rem; }
.work-hero-meta { font-family: var(--font-mono); font-size: .7188rem; color: var(--color-text-muted); }
.work-hero-actions { align-items: center; }
.work-notice { margin-top: 16px; }
.work-detail-progress { margin: 24px 0; padding: 24px; }
.work-progress-head { display: flex; justify-content: space-between; align-items: baseline; }
.work-progress-label { font-family: var(--font-heading); font-size: 1.25rem; text-transform: uppercase; }
.work-progress-percent { font-family: var(--font-heading); font-size: 2.125rem; color: var(--color-accent-700); }
.work-progress-track { height: 8px; margin: 14px 0 20px; }
.work-progress-error { margin: 16px 0 0; }
.work-stat-sm { font-size: 1rem; }
.work-stat-note { font-size: .6875rem; }
.work-section { margin-top: 22px; }
.work-section .volume-list { padding: 0; }
.work-section .volume-card:last-child { border-bottom: 0; }
.work-volume-hint { padding: 0 20px 14px; }
.work-table { margin: 0; }
.work-tag-xs { font-size: .625rem; }
.work-download-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.work-download-row > .btn { gap: 8px; }
.work-retention { margin: 0; font-size: .75rem; }
.work-tool-btn { justify-content: space-between; }
.work-details > summary { cursor: pointer; font-size: .8125rem; padding: 8px 13px; border: 1px solid var(--color-divider); list-style: none; }
.work-details[open] > summary { border-color: var(--color-accent); }
.work-details-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.work-note-card { border: 1px solid var(--color-divider); background: var(--color-bg); padding: 11px 13px; }
.work-note-card p { margin: 0 0 6px; font-size: .8125rem; white-space: pre-wrap; }
.work-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.work-note-foot span { font-family: var(--font-mono); font-size: .6875rem; }
.work-note-delete, .work-share-remove { font-size: .6875rem; color: var(--error); }
.work-note-form { display: grid; gap: 8px; }
.work-share-list { display: flex; flex-direction: column; gap: 8px; }
.work-share-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--color-divider); background: var(--color-bg); font-size: .8125rem; }
.work-share-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.work-share-email { flex: 1; min-width: 220px; }
.danger-zone p { margin: 0 0 10px; }

/* Work management keeps the existing palette and shares one control rhythm.
   Scope these rules so editor, wizard and research-dialog controls stay local. */
.work-detail-page { min-width: 0; }
.work-detail-page > .work-section { margin-block-start: var(--space-8); }
.work-detail-page > .stack-section { border-radius: var(--radius-md); }
.work-detail-page .work-hero > div { min-width: 0; }
.work-detail-page .work-hero-title, .work-detail-page .work-hero-meta { overflow-wrap: anywhere; }
.work-detail-page .work-hero-title { line-height: 1.08; }
.work-detail-page .work-hero-author { line-height: 1.5; }
.work-detail-page .work-detail-progress { padding: var(--space-6); }
.work-detail-page .work-detail-progress .stats-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-5); }
.work-detail-page .work-section > .section-head { align-items: center; }
.work-page-actions, .work-progress-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.work-progress-actions { margin-block-start: var(--space-5); }
.work-progress-actions form { margin: 0; }
.work-page-actions .btn, .work-progress-actions .btn,
.work-detail-page .volume-card-actions .btn { min-height: 44px; }
.work-detail-page .volume-card { padding: var(--space-6); }
.work-detail-page .volume-card-head { flex-wrap: wrap; gap: var(--space-3); }
.work-detail-page .volume-card-head > div { min-width: 0; }
.work-detail-page .volume-card-title { overflow-wrap: anywhere; }
.work-detail-page .volume-card .progress-wrap { margin-block: var(--space-4) var(--space-5); }
.work-detail-page .volume-card-actions { gap: var(--space-3); }
.work-detail-page .volume-card-downloads {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  padding-block-start: var(--space-3); margin-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-divider);
}
.work-detail-page .volume-card-downloads a { min-height: 44px; display: inline-flex; align-items: center; }
.work-detail-page .volume-download-links { flex-wrap: wrap; gap: var(--space-3); }

.work-detail-page .work-download-row { align-items: flex-start; gap: var(--space-4) var(--space-5); }
.work-download-main { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); min-width: 0; flex: 1 1 580px; }
.work-download-source { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; margin-inline-start: auto; }
.work-download-main > .btn, .work-download-source > .btn,
.work-download-main > .research-package > .research-package-trigger,
.work-download-main > .research-package > .research-package-fallback > summary { min-height: 44px; }
.work-download-source > .btn { border-color: var(--color-border-field); }
.work-download-zips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.work-download-zips .btn { min-height: 44px; }
.work-source-meta { display: grid; gap: var(--space-2); padding-block-start: var(--space-4); border-top: 1px solid var(--color-divider); }
.work-source-meta p { margin: 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--color-text-muted); }
.work-source-meta .work-retention form { display: inline; }
.work-detail-page .work-table th, .work-detail-page .work-table td { padding: var(--space-4) var(--space-6); }

.work-management-grid, .work-collaboration-grid {
  display: grid; gap: var(--space-5); align-items: stretch; min-width: 0;
}
.work-management-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-collaboration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work-detail-page .volume-list ~ .work-tools-body { border-top: 1px solid var(--color-divider); }
.work-management-grid > .stack-section, .work-collaboration-grid > .stack-section {
  min-width: 0; margin: 0; border-radius: var(--radius-md);
}
.work-management-grid > :only-child, .work-collaboration-grid > :only-child { grid-column: 1 / -1; }
.work-tool-card { overflow: clip; transition: border-color .12s; }
.work-tool-card:hover, .work-tool-card[open] { border-color: var(--color-accent); }
.work-tool-summary, .work-tool-content {
  display: flex; flex-direction: column; gap: var(--space-3);
  min-height: 220px; padding: var(--space-6); text-align: start;
}
.work-tool-summary { cursor: pointer; list-style: none; }
.work-tool-summary::-webkit-details-marker { display: none; }
.work-tool-summary::marker { content: ''; }
.work-tool-summary:focus-visible { outline-offset: -4px; }
.work-tool-title { margin: 0; font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--font-heading-weight); line-height: 1.2; text-transform: none; }
.work-tool-description { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); line-height: 1.6; }
.work-tool-action { margin-block-start: auto; padding-block-start: var(--space-3); color: var(--color-accent-ink); font-family: var(--font-heading); font-size: var(--fs-md); font-weight: var(--font-heading-weight); }
.work-tool-action.btn { min-height: 44px; padding: var(--space-2) var(--space-4); text-align: start; }
.work-tool-summary .work-tool-action { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.work-tool-summary .work-tool-action::after { content: '+'; font-family: var(--font-body); font-size: 1.25rem; font-weight: 400; }
.work-tool-card[open] > .work-tool-summary .work-tool-action::after { content: '−'; }
.work-tool-content > .btn { align-self: stretch; justify-content: space-between; margin-block-start: auto; min-height: 44px; }
.work-tool-body { border-top: 1px solid var(--color-divider); padding: var(--space-6); background: var(--color-bg); }
.work-tool-card:not([open]) > .work-tool-body { display: none; }
.work-reocr-volumes { display: grid; gap: var(--space-2); }
.work-reocr-volumes .btn { min-height: 44px; justify-content: space-between; }
.work-form { display: grid; gap: var(--space-4); min-width: 0; margin: 0; }
.work-form .field { min-width: 0; margin: 0; }
.work-form .field > label { margin-block-end: var(--space-2); color: var(--color-text); }
.work-form .input { min-height: 44px; margin: 0; }
.work-form textarea.input { min-height: 112px; }
.work-form .btn { min-height: 44px; }
.work-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.work-form [data-form-feedback] { font-size: var(--fs-xs); line-height: 1.5; color: var(--color-text-muted); }
.work-form [data-form-feedback].is-error { color: var(--error); border-inline-start: 2px solid currentColor; padding-inline-start: var(--space-3); }
.work-form [data-form-feedback][hidden] { display: none; }
.work-collaboration-grid > .stack-section { display: flex; flex-direction: column; }
.work-collaboration-grid .section-body { align-content: start; flex: 1; }
.work-detail-page .work-note-card, .work-detail-page .work-share-row { padding: var(--space-4); border-radius: var(--radius-sm); }
.work-detail-page .work-note-card p { overflow-wrap: anywhere; }
.work-detail-page .work-note-foot, .work-detail-page .work-share-row { flex-wrap: wrap; }
.work-detail-page .work-note-foot > span, .work-detail-page .work-share-row > span { min-width: 0; overflow-wrap: anywhere; }
.work-detail-page .work-note-delete, .work-detail-page .work-share-remove { min-height: 44px; }
.work-detail-page .work-note-form { gap: var(--space-4); }
.work-detail-page .work-share-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .55fr) auto; align-items: end; gap: var(--space-4); }
.work-detail-page .work-share-form .work-share-email { min-width: 0; }
.work-detail-page .work-share-form > .work-form-actions { grid-column: auto; }
.work-detail-page .work-share-form > .btn { justify-self: start; }

@media (max-width: 1100px) {
  .work-management-grid { grid-template-columns: minmax(0, 1fr); }
  .work-tool-summary, .work-tool-content { min-height: 0; }
  .work-tool-content > .btn { margin-block-start: var(--space-2); }
  .work-detail-page .work-share-form { grid-template-columns: minmax(0, 1fr) minmax(110px, .55fr); }
  .work-detail-page .work-share-form > .work-form-actions { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .work-hero-title { font-size: 1.9rem; }
  .work-download-row > .btn { flex: 1 1 100%; }
  .work-collaboration-grid { grid-template-columns: minmax(0, 1fr); }
  .work-download-main, .work-download-source { flex: 1 1 100%; width: 100%; margin-inline-start: 0; }
  .work-download-main > .btn, .work-download-source > .btn { flex: 1 1 100%; }
  .work-detail-page .volume-card-downloads { width: 100%; }
  .work-detail-page .work-detail-progress .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .work-detail-page .section-head, .work-detail-page .section-body,
  .work-detail-page .volume-card, .work-tool-summary, .work-tool-content, .work-tool-body { padding: var(--space-4); }
  .work-page-actions { width: 100%; }
  .work-page-actions .btn { flex: 1 1 100%; }
  .work-detail-page .volume-card-actions > .btn { flex: 1 1 100%; }
  .work-detail-page .work-share-form { grid-template-columns: minmax(0, 1fr); }
  .work-form-actions .btn, .work-download-zips .btn { width: 100%; }
  .work-detail-page .work-table th, .work-detail-page .work-table td { padding: var(--space-3); }
}

/* Yalnizca ekran okuyucu icin. `hidden`/`display:none` OKUNMAZ; bu desen
   gorsel olarak gizler ama erisilebilirlik agacinda birakir. */
.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;
}

/* ============================================================
   SAYFA IZGARASI — templates/works/volume.html
   ============================================================
   Cilt ekrani ESKIDEN her sayfa icin bir <tr> basiyordu; 400 sayfalik bir
   cilt 400 satirlik tek bir dokumandi. Cip izgarasi ayni bilgiyi (~10 cip/
   satir) verir ve durum isaretlerini yaninda tasir. */
.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 6px;
}
.page-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: 42px; padding: 5px 3px;
  border: 1px solid var(--color-divider); background: var(--color-bg);
  color: var(--color-text); text-decoration: none; line-height: 1;
}
.page-chip:hover {
  border-color: var(--color-accent); background: var(--color-surface);
  color: var(--color-text); text-decoration: none;
}
.page-chip-no { font-family: var(--font-mono); font-size: var(--fs-xs); }
.page-chip-marks { font-size: .625rem; min-height: .7rem; color: var(--color-text-muted); }
/* Isaretli sayfa: zemin + kenar + cip icindeki ⚠ birlikte calisir; renk tek
   ayirt edici degildir. */
.page-chip.is-flagged {
  border-color: color-mix(in srgb, var(--warn) 55%, var(--color-divider));
  background: color-mix(in srgb, var(--warn) 9%, transparent);
}
.page-chip.is-flagged .page-chip-marks { color: var(--warn); }
.page-chip.is-edited { border-inline-start-width: 3px; border-inline-start-color: var(--color-accent); }
.volume-filter { flex: none; }

/* ============================================================
   YENIDEN OCR ONAY EKRANI — templates/works/reocr.html
   ============================================================ */
.reocr-layout { align-items: start; }
.reocr-form { min-width: 0; }
.reocr-scope { align-self: start; }
.reocr-cost { padding: 20px 22px; display: grid; gap: var(--space-2); }
.reocr-cost .big-figure { margin: 0; }

/* ── Sözlük: terfi paneli ve htmx gösterge (Faz: terfi web'e açıldı) ── */
.lex-promote { border-top: 1px solid var(--color-divider); padding-top: var(--space-4); }
.lex-promote .field-row { gap: var(--space-2); }
.lex-reject { color: var(--error); }
.lex-reject:hover { background: color-mix(in srgb, var(--error) 10%, transparent); color: var(--error); }
.cli-copy { margin-top: 4px; justify-self: start; }
/* htmx yalnizca istek suresince `.htmx-request` ekler; gosterge varsayilan
   olarak gizli, yalnizca o sirada gorunur. Konkordans taramasi tum kulliyati
   gezdigi icin bu geri bildirim SART. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline; }

/* ============================================================
   ISTEM KUTUPHANESI — templates/prompts.html
   ============================================================
   Bu kurallar ESKIDEN o sablonun icinde bir <style> blogudur; 8 bilesen
   sinifi + 3 medya sorgusu tasarim sisteminin disinda yasiyordu. */
.prompt-profile-tabs { display: flex; flex-wrap: wrap; max-width: 100%; }
.prompt-profile-tabs .seg-opt { white-space: normal; text-align: center; }
.prompt-translation-summary {
  margin: 0 0 22px; padding: 20px 22px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
  gap: 24px; align-items: center;
}
.prompt-summary-kicker { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700); }
.prompt-translation-summary h2 { margin: 4px 0 6px; font-size: 1.25rem; }
.prompt-translation-summary p { margin: 0; font-size: .8125rem; max-width: 72ch; }
.prompt-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prompt-principles span { padding: 8px 10px; border: 1px solid var(--color-divider); background: var(--color-surface); font-size: .75rem; }
.prompt-body-input { font-family: var(--font-mono); font-size: .7812rem; line-height: 1.65; resize: vertical; }
.prompt-field-help { font-size: .75rem; margin: 4px 0 8px; }
.prompt-field-help code { display: inline-block; margin: 3px 3px 0 0; padding: 2px 5px; border: 1px solid var(--color-divider); background: var(--color-bg); }
.prompt-runtime-note {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
  border-inline-start: 3px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
  font-size: .7812rem;
}

/* Surum ray ogesi. ESKIDEN `.panel-head` (bir BASLIK sinifi) liste ogesi
   olarak kullaniliyordu; ogeler arasinda hicbir ayrim yoktu. */
.prompt-version-list { gap: var(--space-3); }
.version-item {
  display: grid; gap: 4px; padding: 10px 12px;
  border: 1px solid var(--color-divider); background: var(--color-bg);
}
.version-item.is-current { border-inline-start: 3px solid var(--color-accent); }
.version-preview > summary { cursor: pointer; color: var(--color-accent-700); list-style: none; }
.version-body {
  margin: 6px 0 0; max-height: 240px; overflow: auto; white-space: pre-wrap;
  font-family: var(--font-mono); font-size: var(--fs-2xs); line-height: 1.55;
  padding: 8px 10px; border: 1px solid var(--color-divider); background: var(--color-surface);
}
@media (max-width: 860px) {
  .prompt-translation-summary { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) { .prompt-principles { grid-template-columns: 1fr; } }

/* Sozluk kural satirindaki eylemler tek satirda kalsin: "kuru kos" artik
   ciplak bir link degil bir dugme oldugu icin varsayilan sarma iki satira
   dusuruyordu (bkz. templates/lexicon.html). */
.lex-rule-actions { flex-wrap: nowrap; justify-content: flex-end; }

/* ============================================================
   FİYATLANDIRMA PANELİ — templates/admin/pricing.html
   ============================================================
   Bu ekran tasarım sisteminin DIŞINDA yazılmıştı: `.data-table`,
   `.tabs`/`.tab`, `.checkbox`, `.inline-form` sınıflarının hiçbiri
   tanımlı değildi. Sonuç, iki tablonun kenarlıksız-dolgusuz çıplak
   HTML olarak, iş türü sekmelerinin de yan yana üç düz bağlantı
   olarak basılmasıydı. Sınıflar kanonik karşılıklarıyla değiştirildi
   (.admin-table, .seg/.seg-opt, .checkbox-label); aşağısı yalnız bu
   ekranın kendine özgü ihtiyaçları. */

/* --- başlık altındaki sabitler şeridi: net oran / marj tabanı.
       Eskiden bunlar sekmelerin altına sıkışmış tek satır muted
       metindi ve fiyat kararının iki dayanağı olduğu anlaşılmıyordu. */
.pricing-facts {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-divider); background: var(--color-surface);
}
.pricing-fact { display: grid; gap: 1px; min-width: 0; }
.pricing-fact > strong { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; }

/* --- kademe kartları ---
   `.grid-auto` (minmax 220px) bu kart için fazla dardı: içinde bir form,
   iki açılır liste ve marj şeridi var, 220px'de her etiket iki satıra
   sarıyordu. */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); align-items: start; }
.tier-card { padding: 0; gap: 0; }
.tier-card.is-off { border-style: dashed; }
.tier-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-3);
}
.tier-card-head .big-figure { margin-top: 2px; }
/* Fiyatı girilmemiş kademe: rakam yerine tire. Aksan rengi "burada bir
   fiyat var" der; boş kademede rengi sürdürmek yanlış sinyaldir. */
.big-figure.is-empty { color: var(--color-text-muted); }
.tier-health {
  padding: var(--space-3) var(--space-5);
  border-block: 1px solid var(--color-divider); background: var(--color-surface);
}
.tier-health > :last-child { margin-bottom: 0; }
.tier-multiple strong { font-family: var(--font-mono); font-size: var(--fs-sm); }
.tier-form { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.tier-form .field, .tier-form label { margin: 0; }
.tier-form input, .tier-form select { margin-bottom: 0; }
.tier-form .field small { display: block; margin-top: 4px; }
.tier-members { padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--color-divider); }

/* --- model tablosu ---
   Kolon başlıkları İKİ SATIRLI: üst satır kararı (kademe/satış) kanıttan
   (fiyat, bağlam, token, maliyet) ayırır. Dokuz kolonluk düz bir başlık
   satırında hangi kolonun karar hangisinin ölçüm olduğu görünmüyordu. */
.model-table { font-size: var(--fs-sm); }
.model-table thead th { vertical-align: bottom; }
.model-table th.col-group {
  text-align: center; color: var(--color-accent-700);
  border-bottom: 1px solid var(--color-divider); padding-bottom: 4px;
}
.model-table th.col-group + th.col-group { border-inline-start: 1px solid var(--color-divider); }
/* Model kimliği: `code` genelinde `overflow-wrap:anywhere` var (uzun
   URL'ler gövdeyi kaydırmasın diye). Burada o kural adı HARF HARF
   kırıyordu ("anth/ropi/c/cl/aude..."): kolona taban genişlik verilip
   sarma kapatılır. */
.model-cell { min-width: 210px; }
.model-ident { display: block; min-width: 0; }
.model-id { display: block; font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: normal; word-break: normal; }
.model-provider { display: block; margin-bottom: 1px; }
/* Sayısal kolonlar sona yaslı. `nowrap` YALNIZ hücrelerde: başlıklara da
   verilince "Gözlenen token/sayfa" gibi uzun başlıklar sarmayı reddedip
   kolonu 220px'e şişiriyor, dokuz kolonluk tablo boşuna yatay kaydırmaya
   düşüyordu (ölçüldü: 1568px → 1180px). */
/* Sayısal kolon hizası TÜM admin tablolarında geçerli: kural eskiden yalnız
   .model-table'a bağlıydı, aynı ihtiyacı olan kredi defteri hizasız kalıyordu. */
.admin-table td.num { text-align: end; white-space: nowrap; }
.admin-table th.num { text-align: end; }
.model-table .num-value { font-family: var(--font-mono); font-size: var(--fs-xs); }
.model-table select { margin: 0; min-width: 108px; }
.model-table .checkbox-label { margin: 0; justify-content: center; }
.model-table .btn { margin: 0; }
.model-note { display: block; max-width: 22ch; margin-top: 2px; }
/* Kademe öbeği başlığı: tablonun içinde bir "bölüm" çizgisi. */
.model-group-row td {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-field);
  padding-block: var(--space-2);
}
.model-table tbody tr.model-group-row:hover td { background: var(--color-surface); }
.model-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.model-group-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 1.0625rem; text-transform: uppercase; line-height: 1; }
/* Panel içindeki tablo, kaydırma kutusuyla sarılınca `.panel > .admin-table`
   kuralına artık uymuyor; başlığıyla aynı hizadan başlaması için dolgu
   burada tekrarlanır. */
.panel > .table-wrap > .admin-table th,
.panel > .table-wrap > .admin-table td { padding-inline: var(--space-5); }

/* --- denetim izi --- */
.audit-change { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 5px; }
.audit-arrow { color: var(--color-text-muted); }
/* Eski -> yeni değer yönü de RTL'de dönmeli (bkz. .back-link). */
.audit-arrow::before { content: "92"; }
[dir="rtl"] .audit-arrow::before { content: "90"; }
.audit-note { display: block; max-width: 42ch; }

@media (max-width: 900px) {
  /* Satırlar karta dönüşünce (.table-cards) öbek başlığı bir "kart" gibi
     değil, kartların ARASINDAKİ ayraç gibi durmalı. */
  .model-table .model-group-row { border: 0; padding: 0; margin: var(--space-5) 0 var(--space-2); }
  .model-table .model-group-row td { padding: 0; display: block; background: transparent; border-top: 0; }
  .model-cell { min-width: 0; }
  .model-table .checkbox-label { justify-content: flex-start; }
  /* `white-space: normal` GERİ ALINMALI: kart kipinde hücrenin etiketi
     `td::before`den gelir ve `nowrap`i o da devralır -- "OPENROUTER
     FİYATI" tek satırda kalıp %38'lik etiket sütununu taşarak değerin
     üstüne biniyordu. */
  .model-table td.num { text-align: start; white-space: normal; }
}

/* --- geri bağlantısı: ok CSS'ten gelir ki RTL'de kendiliğinden dönsün.
       Şablonlara sabit `←` yazıldığında Arapça arayüzde sekiz ekranda birden
       ters yöne bakıyordu. --- */
.back-link { color: var(--color-text-muted); font-size: var(--fs-md); text-decoration: none; }
.back-link::before { content: "\2190"; margin-inline-end: 6px; display: inline-block; }
[dir="rtl"] .back-link::before { content: "\2192"; }
.back-link:hover { color: var(--color-accent-700); }
.credits-summary { --cells: 3; }
.credits-forms { align-items: start; }
.activity-summary { --cells: 3; }
/* Çubuk grafik 30 günlük ekseni taşır: .chart-box'ın 380px'lik halkalı-grafik
   ölçüsü burada etiketleri üst üste bindiriyordu. */
.chart-box.is-wide { max-width: none; height: 260px; }
/* Nakit mutabakatı: satır BAŞLIĞI ilk kolonda (etiket/değer tablosu). */
.cash-table th { width: 45%; text-transform: none; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); }
/* fieldset.field: <legend> etiketi, .field içindeki <span> ile aynı görünsün
   (tarayıcının varsayılan fieldset çerçevesi/dolgusu istenmiyor). */
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > legend { display: block; font-size: 0.75rem; margin-bottom: 5px; padding: 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-family: var(--font-body); font-weight: 500; }
/* Ardışık panel gövdeleri arasında ayırıcı: satır içi style yerine sınıf. */
.panel-body.is-divided { border-bottom: 1px solid var(--color-divider); }

/* İleri yön oku CSS'ten: şablona sabit `→` yazmak Arapça (dir="rtl")
   arayüzde oku ters yöne çeviriyordu (.back-link ile aynı gerekçe). */
.card-title::after, .link-forward::after { content: "\2192"; margin-inline-start: 6px; display: inline-block; }
[dir="rtl"] .card-title::after, [dir="rtl"] .link-forward::after { content: "\2190"; }

/* --- /admin/pricing: dolar kuru kutusu ---------------------------------- */
.fx-card { padding: var(--space-5); }
.fx-card-main { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
.fx-form { display: flex; align-items: flex-end; gap: var(--space-3); }
.fx-form .field { margin: 0; min-width: 9rem; }
.fx-drift { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 0.8125rem; color: var(--color-text-muted); }
/* Uyari yalnizca kur GERIDE kalinca cikar (marj eriyor demektir); rengi
   bu yuzden bilgi degil uyari tonudur. */
.fx-drift.is-warn { color: var(--color-text); }
.fx-drift.is-warn strong { color: var(--error); }

/* Istatistik hucresinde ikincil satir (dolar karsiligi). */
.stat-sub { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-text-muted); margin-top: 2px; }

/* Hediye hem paketlerde hem odeme ozetinde ayri gosterilir. */
.pack-bonus { margin-top: var(--space-2); font-weight: 600; color: var(--color-accent-ink, inherit); }

/* Yedi paket + iletisim masaustunde iki siraya sigar. Iletisim karti da
   tek hucre kaplar; mobilde fazladan, tasan bir grid sutunu olusturmaz. */
.packs-heading {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4) var(--space-6); margin: var(--space-3) 0 var(--space-5);
}
.packs-heading > div { min-width: 0; max-width: 66ch; }
.packs-heading p { margin: 0; }
.packs-calculator-link { flex: none; min-height: 44px; gap: var(--space-3); }
.pack-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pack-card {
  min-width: 0; gap: var(--space-2); padding: var(--space-4);
  background: var(--color-surface);
}
.pack-label { overflow-wrap: anywhere; line-height: 1.3; }
.pack-payment > .text-muted { line-height: 1.35; }
.pack-price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); }
.pack-price-line .big-figure { font-size: 1.75rem; line-height: 1.1; color: var(--color-text); }
.pack-price-line > span { white-space: nowrap; }
.pack-credit { border-top: 1px solid var(--color-divider); padding-top: var(--space-2); }
.pack-credit-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-2); }
.pack-credit-line > span { line-height: 1.35; }
.pack-credit-line .subtitle { font-size: 1.125rem; white-space: nowrap; }
.pack-card .pack-bonus { margin-top: 2px; font-size: var(--fs-xs); line-height: 1.4; }
.pack-action {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); margin-top: auto; padding-top: var(--space-1);
  color: var(--color-accent-ink); font-size: var(--fs-sm); font-weight: 600; line-height: 1.35;
}
.pack-action-arrow { font-size: 1.125rem; line-height: 1; }
[dir="rtl"] .pack-action-arrow { transform: scaleX(-1); }
a.pack-card { transition: border-color .12s, background .12s, box-shadow .12s; }
a.pack-card:hover, a.pack-card:focus-visible {
  background: var(--color-bg); border-color: var(--color-accent-ink);
  box-shadow: inset 0 3px 0 var(--color-accent-ink);
}
.pack-contact { background: transparent; border-style: dashed; align-items: flex-start; }
.pack-contact p { margin: 0; }
.pack-contact .btn { margin-top: auto; min-height: 44px; }
.billing-packs .price-calculator { margin-top: var(--space-6); }
#calc-title { scroll-margin-top: 80px; }
@media (max-width: 1200px) {
  .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .packs-heading { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
  .pack-grid { grid-template-columns: minmax(0, 1fr); }
  .pack-card:not(.pack-contact) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
  .pack-label, .pack-action { grid-column: 1 / -1; }
  .pack-credit { border-top: 0; border-inline-start: 1px solid var(--color-divider); padding-top: 0; padding-inline-start: var(--space-4); }
  .pack-credit-line { display: block; }
  .pack-credit-line > span { display: block; }
  .pack-price-line { display: block; }
  .pack-price-line > span { display: block; }
  .pack-price-line .big-figure { font-size: 1.5rem; line-height: 1.2; }
  .pack-contact { gap: var(--space-2); }
  .pack-contact .btn { margin-top: var(--space-1); }
}

/* --- maliyet hesaplayici --------------------------------------------------
   Tablo `.admin-table`i YENIDEN KULLANMAZ: o tablo yogun ve dar satirlar icin
   ayarli, buradaki hucre ise ust uste UC bilgi tasiyor (toplam, sayfa ucreti,
   model adi). Ayni sinifi zorlamak ucunu de esit agirlikta basiyordu ve
   kullanicinin aradigi rakam (toplam) obur ikisinin arasinda kayboluyordu.
   -------------------------------------------------------------------------- */

/* Kontrol seridi: panel basligi ile tablo ARASINDA durur, iki cizgisiyle
   ikisini de ayirir. */
.calc-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.calc-input-wrap { display: flex; align-items: baseline; gap: var(--space-2); }
/* Rakam mono ve SAGA hizali: farkli uzunluktaki sayilar ayni kenardan okunur. */
.calc-input-wrap .input {
  width: 6.5rem; font-family: var(--font-mono); font-size: var(--fs-lg);
  text-align: end;
}
.calc-unit { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); }

.calc-quick { display: flex; flex-direction: column; gap: var(--space-2); }
.calc-quick-label {
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.calc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.calc-chip {
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1;
  padding: 7px 12px; border: 1px solid var(--color-divider); border-radius: 3px;
  color: var(--color-text-muted); text-decoration: none;
}
.calc-chip:hover {
  border-color: var(--color-accent-500); background: var(--color-accent-100);
  color: var(--color-accent-800);
}
.calc-chip.is-active {
  border-color: var(--color-accent-700); background: var(--color-accent-100);
  color: var(--color-accent-800); font-weight: 600;
}
.calc-submit { margin-inline-start: auto; }
.calc-busy { font-size: var(--fs-2xs); color: var(--color-text-muted); align-self: center; }

.calc-table { width: 100%; border-collapse: collapse; }
.calc-table th, .calc-table td {
  padding: var(--space-4) var(--space-5); text-align: start; vertical-align: top;
}
.calc-table thead th {
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-text-muted); font-weight: 400;
  border-bottom: 1px solid var(--color-divider); padding-block: var(--space-3);
}
.calc-table tbody tr + tr td { border-top: 1px solid var(--color-divider); }
/* Islem sutunu icerigi kadar dar kalsin, plan sutunlari kalani esit bolussun. */
.calc-table thead th:first-child,
.calc-table tbody td:first-child { width: 1%; white-space: nowrap; }

.calc-op { font-family: var(--font-heading); font-size: 1.125rem; text-transform: uppercase; line-height: 1.2; }
/* BAS RAKAM: kullanicinin aradigi cevap toplamdir. */
.calc-total { font-family: var(--font-heading); font-size: 1.75rem; line-height: 1.15; color: var(--color-accent-700); }
.calc-rate { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; }
/* Sayfa sayisi HENUZ girilmemisken gosterilecek toplam yok -> sayfa ucreti
   bas rakam olur (hiyerarsi bos birakilmaz). */
.calc-rate.is-primary {
  font-family: var(--font-heading); font-size: 1.375rem; line-height: 1.2;
  color: var(--color-neutral-900); margin-top: 0;
}
/* Model adi UCUNCUL: yalniz yonetici gorur, fiyatla yarismamali. */
.calc-model {
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--color-neutral-500);
  margin-top: var(--space-2); overflow-wrap: anywhere;
}
.calc-na { color: var(--color-neutral-400); font-size: 1.5rem; line-height: 1.2; }
.calc-closed { color: var(--color-text-muted); font-size: var(--fs-sm); }
.calc-foot {
  margin: 0; padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-divider);
  color: var(--color-text-muted); font-size: var(--fs-xs);
}

@media (max-width: 900px) {
  /* .table-cards td'yi iki sutunlu bir grid yapiyor (::before etiketi +
     icerik). calc-table'in masaustu dolgusu/cizgisi/genisligi o duzende
     fazlalik oldugu icin GERI ALINIR -- aksi halde kart icinde ic ice
     cizgiler ve %1 genisliginde bir ilk sutun kalirdi. */
  .calc-table tbody tr + tr td { border-top: 0; }
  .calc-table th, .calc-table td { padding: 5px 0; }
  .calc-table tbody td:first-child { width: 100%; white-space: normal; }
  .calc-total { font-size: 1.5rem; }
  .calc-submit { margin-inline-start: 0; }
}

/* Launch: compact task pages and a usable 320px viewport. */
.shell-col, .main, .card, .field, .grid-2 > *, .page-head > * { min-width: 0; }
input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; min-height: 1.1rem; flex: 0 0 1.1rem; padding: 0; margin: 0; appearance: auto; accent-color: var(--color-accent-ink); vertical-align: middle; }
.checkbox-label, .toggle-row { align-items: flex-start; gap: 10px; }
.checkbox-label input, .toggle-row input, .confirmation-ack input { margin-top: 3px; }
.sidebar-close { display: none; margin-inline-start: auto; }
.action-confirm-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 24px; border: 1px solid var(--color-divider); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); }
.action-confirm-dialog::backdrop { background: rgb(20 25 30 / 45%); }
.action-confirm-dialog h2 { margin-top: 0; }
.action-confirm-dialog .cluster { justify-content: flex-end; margin-top: 24px; }
.launch-disclosure { border: 1px solid var(--color-divider); background: var(--color-surface); }
.launch-disclosure > summary { cursor: pointer; padding: 18px 20px; font-weight: 600; list-style-position: inside; }
.launch-disclosure > div { padding: 0 20px 20px; }
.launch-disclosure[open] > summary { border-bottom: 1px solid var(--color-divider); margin-bottom: 16px; }
.landing { max-width: 1160px; margin: 0 auto; }
.landing-hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: clamp(28px,6vw,90px); align-items: center; padding: 48px 0 72px; }
.landing h1 { font-size: clamp(2.8rem,5.8vw,5.5rem); line-height: 1.02; max-width: 13ch; margin: 16px 0 24px; }
.landing-lede { font-size: 1.15rem; line-height: 1.65; max-width: 44ch; color: var(--color-text-muted); }
.landing-copy .cluster { margin: 30px 0 18px; }
.landing-example { margin: 0; padding: 32px; text-align: center; }
.landing-example-source { font-family: var(--font-arabic); font-size: clamp(1.7rem,3vw,2.5rem); padding: 28px 4px 12px; }
.landing-example-arrow { color: var(--color-text-muted); font-size: 1.6rem; margin: 12px; }
.landing-example-result { background: var(--color-surface); border: 1px solid var(--color-divider); padding: 22px 12px; margin-bottom: 20px; }
.landing-example-result p { font-family: var(--font-arabic); font-size: 1.8rem; }
.landing-steps { padding: 36px 0 44px; border-top: 1px solid var(--color-divider); }
.landing-step-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 34px; list-style: none; padding: 0; margin: 28px 0 0; }
.landing-step-grid h3 { margin: 12px 0; }
.landing-step-grid p, .landing-help p { color: var(--color-text-muted); line-height: 1.65; }
.landing-help { display: flex; gap: 24px; justify-content: space-between; align-items: center; padding: 28px 0; border-top: 1px solid var(--color-divider); }
.help-page { max-width: 850px; margin: 0 auto; }
.help-topics { display: grid; gap: 12px; }
.help-topics p { line-height: 1.7; }
.help-support { margin-top: 28px; }
.error-page { max-width: 680px; margin: 60px auto; padding: clamp(24px,5vw,48px); }
.settings-sections { display: grid; gap: 34px; max-width: 900px; }
.settings-group > h2 { font-size: 1.6rem; margin-bottom: 14px; }
.settings-group .card + .launch-disclosure { margin-top: 14px; }
.settings-group .grid-2 { gap: 18px; }
.settings-admin { margin-top: 28px; }
.library-search { display: flex; align-items: end; gap: 10px; margin: 18px 0; }
.library-search .field { flex: 1; margin: 0; max-width: 520px; }
.library-search input { margin: 0; }
.library-pagination { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 22px; }
.work-detail-progress.is-complete { padding: 20px 24px; background-image: none; }
.work-detail-progress.is-complete > .corner, .work-detail-progress.is-complete .work-progress-head, .work-detail-progress.is-complete .work-progress-track { display: none; }
.work-detail-progress.is-complete .stats-grid { margin: 0; }
.work-detail-progress.is-complete .stat-item .value { font-size: 1.3rem; }
.work-collaboration-disclosure { margin-top: 28px; }
.work-collaboration-disclosure .work-collaboration-grid { margin-top: 0; }
.work-support-link { display: inline-block; margin-top: 18px; }
@media (max-width: 880px) { .sidebar-close { display: inline-flex; } }
@media (max-width: 700px) {
  .landing-hero { grid-template-columns: minmax(0,1fr); padding: 26px 0 36px; gap: 28px; }
  .landing h1 { max-width: 18ch; }
  .landing-example { padding: 24px; }
  .landing-step-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .landing-step-grid p { margin-bottom: 0; }
  .landing-help { align-items: flex-start; flex-direction: column; }
  .library-filter .seg { display: flex; flex-wrap: wrap; }
  .library-search { flex-wrap: wrap; }
  .library-search .field { min-width: 160px; }
}
@media (max-width: 390px) { .topbar { gap: 8px; } .topbar-lang .seg-opt { padding-inline: 7px; } .topbar .breadcrumb { min-width: 0; overflow-wrap: anywhere; } }