/* 4P Flows — paylaşılan dark/light tema katmanı.
   Her sayfaya  <link rel="stylesheet" href="/theme.css">  ile bağlanır.
   Aydınlık tema sayfaların kendi stiline aittir; bu dosya YALNIZCA
   [data-theme="dark"] altında devreye girer. Telefon mockup'ları,
   callout'lar (.notes/.transitions) ve rozetler bilinçli olarak aydınlık
   bırakılır — "koyu pano + aydınlık içerik kartı" görünümü. */

/* ---- toggle butonu (her iki temada) ---- */
#theme-toggle{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--rule-2, #cbd5d8);
  background:var(--paper-2, #fff); color:var(--ink, #1c1e21);
  font-size:19px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 14px rgba(0,0,0,.20); transition:transform .12s, background .2s;
}
#theme-toggle:hover{ transform:translateY(-1px); }
#theme-toggle:active{ transform:translateY(1px); }

/* ============ KOYU TEMA ============ */
:root[data-theme="dark"]{
  /* spec/icerik sayfalarının değişken şeması */
  --paper:   oklch(20% 0.012 240);
  --paper-2: oklch(25% 0.014 240);
  --rule:    oklch(34% 0.014 240);
  --rule-2:  oklch(44% 0.016 240);
  --muted:   oklch(68% 0.020 240);
  --neutral: oklch(78% 0.020 240);
  --ink:     oklch(94% 0.010 240);
  --card:    oklch(24% 0.014 240);
  /* ana sayfa (index.html) --color-* şeması */
  --color-paper:   oklch(20% 0.012 240);
  --color-paper-2: oklch(25% 0.014 240);
  --color-rule:    oklch(34% 0.014 240);
  --color-rule-2:  oklch(44% 0.016 240);
  --color-muted:   oklch(68% 0.020 240);
  --color-neutral: oklch(78% 0.020 240);
  --color-ink:     oklch(94% 0.010 240);
  color-scheme:dark;
}

/* gövde + ortak kabuk (değişken kullanan sayfalar zaten çevirir; sabit
   renkli v1 sayfası için açıkça zorlanır) */
[data-theme="dark"] body{ background:var(--paper)!important; color:var(--ink)!important; }
[data-theme="dark"] .header{ background:var(--paper)!important; color:var(--ink)!important; border-bottom:1px solid var(--rule)!important; box-shadow:none!important; }
[data-theme="dark"] .header h1{ color:var(--ink)!important; }
[data-theme="dark"] .toc{ background:var(--paper)!important; border-color:var(--rule)!important; }
[data-theme="dark"] .bar{ background:var(--paper)!important; border-color:var(--rule)!important; }
[data-theme="dark"] .section-title{ color:var(--ink)!important; border-color:var(--rule)!important; }

/* kartlar / yüzeyler */
[data-theme="dark"] .screen{ background:var(--card)!important; border-color:var(--rule)!important; }
[data-theme="dark"] .flowbox{ background:var(--card)!important; border-color:var(--rule)!important; }
[data-theme="dark"] .ext-panel{ background:var(--paper-2)!important; border-color:var(--rule)!important; }
[data-theme="dark"] .ext-panel h3{ color:var(--ink)!important; }

/* spec paneli metinleri */
[data-theme="dark"] .spec-key{ color:var(--ink)!important; }
[data-theme="dark"] .spec-value{ color:var(--ink)!important; }
[data-theme="dark"] .spec-row{ border-color:var(--rule)!important; }
[data-theme="dark"] .spec-value code{ background:var(--paper-2)!important; }
[data-theme="dark"] .spec-message{ background:var(--paper-2)!important; color:var(--ink)!important; }

/* içerik tablosu (icerik.html) */
[data-theme="dark"] table{ background:var(--card)!important; }
[data-theme="dark"] th{ background:var(--paper-2)!important; }
[data-theme="dark"] td{ border-color:var(--rule)!important; }
[data-theme="dark"] .val{ background:color-mix(in oklch, var(--card), #00a884 9%)!important; color:var(--ink)!important; }
[data-theme="dark"] .val:focus{ background:color-mix(in oklch, var(--card), #00a884 16%)!important; }
[data-theme="dark"] tr:hover td{ background:var(--paper-2)!important; }
[data-theme="dark"] tr:hover .val{ background:color-mix(in oklch, var(--card), #00a884 14%)!important; }

/* içerik tablosu — ikincil butonlar + düzenlenebilir sütun başlığı */
[data-theme="dark"] .btn.alt{ background:var(--paper-2)!important; color:var(--ink)!important; border-color:var(--rule-2)!important; }
[data-theme="dark"] th:nth-child(5),[data-theme="dark"] th:nth-child(6){ background:color-mix(in oklch, var(--paper-2), #00a884 14%)!important; color:#86e3c4!important; }

/* ana sayfa satırları */
[data-theme="dark"] .footer{ color:var(--muted)!important; }