/* =====================================================================
   fe-docs.css — Tema dokümantasyonu (/temalar/dokumantasyon)
   Kılavuz kabuğu (.dk-*) + kılavuz merkezi (.dh-*).
   Renkler site belirteçlerinden okunur; koyu mod için ayrı geçersiz kılma
   bloğu en altta durur. Temanın kendi rengi yalnız --dk-vurgu ile girer.
   ===================================================================== */

.dk-hero, .dh { --dk-vurgu: var(--brand); }
/* Temanın vurgusu yüzeye göre iki sürümde gelir (PHP hesaplar); satır içi
   yalnız --dk-vurgu-acik/-koyu yazılır, seçimi bu iki kural yapar —
   satır içine --dk-vurgu yazılsaydı koyu mod onu ezemezdi. */
.dk{ --dk-vurgu: var(--dk-vurgu-acik, var(--brand)); }
[data-theme="dark"] .dk{ --dk-vurgu: var(--dk-vurgu-koyu, var(--brand)); }
/* METİN için ayrı tonlar: --brand ve --success zemin renkleridir; küçük yazıda
   AA'yı geçmezler (koyu modda --brand 3.31'e düşüyor). --faint ise açık modda
   beyaz üstünde 2.56 — bu dosyada yazı rengi olarak KULLANILMAZ. */
:root{ --dk-marka-ink:#1d4ed8; --dk-basari-ink:#15803d; }
[data-theme="dark"]{ --dk-marka-ink:#93b4ff; --dk-basari-ink:#4ade80; }

/* ---------- Kılavuz başlığı ---------- */
.dk-hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:44px 0 40px;isolation:isolate}
.dk-hero-in{position:relative;z-index:2}
/* .breadcrumb .cur taban stilde --ink-2 (koyu) — koyu bantta 1,2:1'e düşüyordu. */
.dk-hero .breadcrumb, .dk-hero .breadcrumb a, .dk-hero .breadcrumb .icon{color:rgba(255,255,255,.72)}
.dk-hero .breadcrumb .cur{color:#dbe4f7}
.dk-hero .breadcrumb a:hover{color:#fff}
.dk-hero .eyebrow-mono{color:#fff;opacity:.9}
.dk-hero h1{font-size:clamp(1.9rem,4vw,3rem);line-height:1.06;letter-spacing:-.03em;margin:.35rem 0 .6rem;color:#fff}
.dk-hero h1 em{font-style:normal;color:transparent;background:linear-gradient(92deg,#fff,var(--dk-vurgu) 120%);
  -webkit-background-clip:text;background-clip:text;filter:brightness(1.25)}
.dk-hero-lede{max-width:70ch;color:rgba(255,255,255,.86);font-size:1.02rem;line-height:1.7;margin:0 0 18px}
.dk-hero-kunye{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.dk-hero-kunye span{display:inline-flex;flex-direction:column;gap:1px;padding:8px 14px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(255,255,255,.78)}
.dk-hero-kunye b{font-size:1rem;letter-spacing:-.01em;text-transform:none;color:#fff;font-family:var(--font-mono)}
.dk-hero-eylem{display:flex;flex-wrap:wrap;gap:10px}
.dk-hero .btn--ghost-light{border:1px solid rgba(255,255,255,.28);color:#fff;background:transparent}
.dk-hero .btn--ghost-light:hover{background:rgba(255,255,255,.10)}

/* ---------- Kafes ---------- */
.dk{padding:0 0 64px;scroll-behavior:smooth}
.dk-kafes{display:grid;grid-template-columns:262px minmax(0,1fr);gap:44px;align-items:start}
html{scroll-padding-top:96px}

/* ---------- Kenar çubuğu ---------- */
.dk-yan-ic{position:sticky;top:92px;max-height:calc(100vh - 112px);overflow:auto;overscroll-behavior:contain;
  padding:18px 4px 18px 0;scrollbar-width:thin}
.dk-secici{display:block;margin:0 0 12px}
.dk-secici span{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.dk-secici select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:.88rem}
.dk-ara{position:relative;margin:0 0 14px}
.dk-ara .icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.dk-ara input{width:100%;padding:9px 11px 9px 32px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:.86rem}
.dk-ara input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.dk-toc-grup{margin:16px 0 6px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.dk-toc ul{list-style:none;margin:0 0 4px;padding:0;border-left:1px solid var(--line)}
.dk-toc li{margin:0}
.dk-toc a{display:flex;align-items:center;gap:8px;padding:6px 10px;margin-left:-1px;border-left:2px solid transparent;
  color:var(--text);font-size:.855rem;line-height:1.35;text-decoration:none;transition:color .16s,border-color .16s,background .16s}
.dk-toc a .icon{flex:none;color:var(--faint);transition:color .16s}
.dk-toc a:hover{color:var(--ink);background:var(--bg-soft)}
.dk-toc a.is-aktif{color:var(--dk-marka-ink);border-left-color:var(--brand);font-weight:600;background:var(--brand-050)}
.dk-toc a.is-aktif .icon{color:var(--dk-marka-ink)}
.dk-toc a[hidden]{display:none}
.dk-toc-bos{margin:10px;color:var(--muted);font-size:.85rem}
.dk-yan-alt{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.dk-yan-alt a,.dk-yan-alt button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 6px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--text);
  font:inherit;font-size:.78rem;cursor:pointer;text-decoration:none}
.dk-yan-alt a:hover,.dk-yan-alt button:hover{border-color:var(--brand);color:var(--dk-marka-ink)}

/* ---------- Gövde ---------- */
.dk-govde{position:relative;min-width:0;padding-top:26px}
.dk-ilerleme{position:sticky;top:80px;height:2px;background:var(--line-2);border-radius:2px;margin:0 0 8px;z-index:3}
.dk-ilerleme i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--dk-vurgu))}
.dk-blok{padding:14px 0 34px;border-bottom:1px solid var(--line-2)}
.dk-blok--son{border-bottom:0}
.dk-h2{display:flex;align-items:center;gap:10px;margin:16px 0 14px;font-size:1.42rem;line-height:1.25;
  letter-spacing:-.02em;color:var(--ink)}
.dk-h2-ikon{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:var(--brand-050);color:var(--dk-marka-ink)}
.dk-cipa{margin-left:auto;color:var(--muted);text-decoration:none;font-size:1rem;opacity:0;transition:opacity .16s}
.dk-h2:hover .dk-cipa,.dk-cipa:focus{opacity:1}
.dk-govde h3{font-size:1rem;margin:0 0 10px;color:var(--ink);display:flex;align-items:center;gap:7px}
.dk-govde h3 .icon{color:var(--dk-marka-ink)}
.dk-govde p{color:var(--text);line-height:1.72;margin:0 0 12px}
.dk-lede{font-size:1.02rem;color:var(--ink-2)!important;max-width:74ch}
/* Yalnız METİN İÇİ bağlantılar: .btn ve kart bağlantıları kendi rengini taşır.
   Bu ayrım olmadan `.dk-govde a` (0,2,0) `.btn--primary`ı (0,1,0) eziyor ve
   mavi zeminli düğmenin yazısı da maviye dönüyordu (1,3:1 — okunmuyordu). */
.dk-govde a:not(.btn):not(.dk-destek-kart):not(.dk-gez){color:var(--dk-marka-ink)}
.dk-alt{display:block;color:var(--muted);font-size:.8rem;line-height:1.5}

/* Listeler */
.dk-liste{list-style:none;margin:0;padding:0}
.dk-liste li{position:relative;padding:0 0 0 22px;margin:0 0 8px;color:var(--text);line-height:1.62}
.dk-liste li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--brand);opacity:.55}
.dk-liste--genis li{margin-bottom:11px}
.dk-liste b{color:var(--ink)}
.dk-adim{counter-reset:dk;list-style:none;margin:0 0 14px;padding:0}
.dk-adim li{counter-increment:dk;position:relative;padding:0 0 0 38px;margin:0 0 12px;color:var(--text);line-height:1.65}
.dk-adim li::before{content:counter(dk);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:var(--brand);color:#fff;font-size:.8rem;font-weight:700;
  font-family:var(--font-mono)}

/* Kartlar */
.dk-ikili{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:0 0 16px}
.dk-kart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.dk-kart p{margin:0}
.dk-kart--iyi{border-color:color-mix(in srgb,var(--success) 34%,var(--line))}
.dk-kart--iyi h3 .icon{color:var(--dk-basari-ink)}
.dk-kart--sabit h3 .icon{color:var(--muted)}
.dk-kart--sabit .dk-liste li::before{background:var(--muted)}

/* Not kutusu */
/* DİKKAT — burada `display:flex` KULLANILAMAZ: flex kabının doğrudan çocukları
   bloklaşır; kutunun içindeki <b>, <code> ve <a> ayrı birer flex ögesi olup yan
   yana dizilirdi (cümle sütunlara bölünüyordu). İkon konumlandırılır, metin
   normal satır akışında kalır. */
.dk-not{position:relative;background:var(--brand-050);border:1px solid var(--brand-100);
  border-left:3px solid var(--brand);border-radius:var(--r-sm);padding:12px 14px 12px 40px;color:var(--ink-2)!important;
  font-size:.92rem;line-height:1.65;margin:14px 0 0}
.dk-not>.icon{position:absolute;left:14px;top:14px;color:var(--dk-marka-ink)}

/* Tablolar */
.dk-tablo{width:100%;border-collapse:collapse;margin:14px 0;font-size:.92rem;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dk-tablo caption{caption-side:top;text-align:left;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:0 0 7px;font-weight:700}
.dk-tablo th,.dk-tablo td{padding:10px 13px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top;
  color:var(--text);line-height:1.55}
.dk-tablo thead th{background:var(--bg-soft);color:var(--ink);font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--line)}
.dk-tablo tbody th{color:var(--ink);font-weight:600;width:34%}
.dk-tablo tbody tr:last-child th,.dk-tablo tbody tr:last-child td{border-bottom:0}
.dk-tablo tbody tr:hover{background:var(--bg-soft)}
.dk-tablo--sorun td:first-child{color:var(--ink);font-weight:600}
.dk-tablo code,.dk-govde p code,.dk-liste code,.dk-adim code{font-family:var(--font-mono);font-size:.85em;
  background:var(--bg-softer);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px;color:var(--ink-2);
  /* Uzun ve boşluksuz örnek adresler (https://alanadınız.com/install.php) 320px'te
     satıra sığmıyor; kırılmasına izin verilmezse kabından taşar. */
  overflow-wrap:anywhere}
.dk-sarma{overflow-x:auto}

/* Palet */
.dk-palet-sahne{position:relative;height:150px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 4px}
.dk-palet-sahne canvas{position:absolute;inset:0;width:100%;height:100%}
.dk-tablo--palet tbody th{width:auto;white-space:nowrap}
.dk-renk-h{white-space:nowrap}
.dk-pul{display:inline-block;width:18px;height:18px;border-radius:5px;border:1px solid var(--line);
  vertical-align:-4px;margin-right:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.dk-rozet{display:inline-block;padding:1px 7px;border-radius:99px;font-size:.7rem;font-weight:700;
  background:var(--bg-softer);color:var(--text);border:1px solid var(--line)}
.dk-rozet--iyi{background:var(--success-050);color:var(--dk-basari-ink);border-color:var(--success-100)}
.dk-rozet--ozel{background:var(--brand-050);color:var(--dk-marka-ink);border-color:var(--brand-100)}

/* Katman şeması */
.dk-sema{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,1.1fr);gap:22px;align-items:center;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:0 0 18px}
.dk-sema-cv{width:100%;height:280px;display:block}
.dk-sema-lejant{list-style:none;counter-reset:kt;margin:0;padding:0;display:flex;flex-direction:column-reverse;gap:9px}
.dk-sema-lejant li{position:relative;padding:9px 12px 9px 14px;border-left:3px solid var(--dk-vurgu);
  background:var(--surface);border-radius:0 var(--r-sm) var(--r-sm) 0}
.dk-sema-lejant li.is-sabit{border-left-color:var(--line);opacity:.86}
.dk-sema-lejant b{display:block;color:var(--ink);font-size:.92rem;margin:0 0 2px}
.dk-sema-lejant span{display:block;color:var(--muted);font-size:.82rem;line-height:1.5}

/* Kurulum hattı */
.dk-hat{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:16px 14px 14px;margin:0 0 18px}
.dk-hat canvas{width:100%;height:56px;display:block}
.dk-hat-durak{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:2px 0 0;padding:0}
.dk-hat-durak li{text-align:center;padding:0 6px}
.dk-hat-durak b{display:block;color:var(--ink);font-size:.88rem}
.dk-hat-durak span{display:block;color:var(--muted);font-size:.78rem;line-height:1.45;margin-top:2px}

/* Tipografi örneği */
.dk-tipo{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:0 0 6px}
.dk-tipo-ornek{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.dk-tipo-buyuk{font-family:var(--font-display);font-size:1.72rem;color:var(--ink)!important;margin:6px 0 0}
.dk-tipo-govde{font-size:.94rem;color:var(--text)!important;margin:6px 0 0;line-height:1.7}

/* Biçim örneği */
.dk-bicim{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:0 0 6px}
.dk-bicim figure{margin:0;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:center}
.dk-bicim figcaption{margin-top:10px;font-size:.78rem;color:var(--muted)}
.dk-bicim figcaption b{display:block;color:var(--ink);font-family:var(--font-mono);font-size:.9rem;margin-top:2px}
.dk-bicim-kart{height:56px;background:var(--surface);border:1px solid var(--line);border-radius:var(--dk-kart-r,12px)}
.dk-bicim-gorsel{height:56px;border-radius:var(--dk-gorsel-r,12px);border:1px solid var(--line);
  background:linear-gradient(135deg,var(--dk-vurgu),color-mix(in srgb,var(--dk-vurgu) 40%,#fff))}
.dk-bicim-dugme{display:inline-block;padding:11px 20px;border-radius:var(--dk-dugme-r,8px);background:var(--dk-vurgu);
  color:var(--dk-vurgu-ustu,#fff);font-size:.86rem;font-weight:600;margin-top:9px}

/* Anatomi */
.dk-anatomi{display:grid;grid-template-columns:minmax(260px,.95fr) minmax(0,1fr);gap:20px;align-items:start;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:0 0 16px}
.dk-anatomi canvas{width:100%;height:460px;display:block;position:sticky;top:96px}
.dk-anatomi-liste{list-style:none;counter-reset:an;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dk-anatomi-liste button{width:100%;display:flex;align-items:center;gap:11px;padding:9px 12px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;font:inherit;
  color:var(--text);transition:border-color .16s,background .16s}
.dk-anatomi-liste button:hover,.dk-anatomi-liste li.is-aktif button{border-color:var(--dk-vurgu);background:var(--surface)}
.dk-anatomi-n{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  background:var(--bg-softer);color:var(--text);font-size:.76rem;font-weight:700;font-family:var(--font-mono)}
.dk-anatomi-liste li.is-aktif .dk-anatomi-n{background:var(--dk-vurgu);color:#fff}
.dk-anatomi-ad{display:flex;flex-direction:column;gap:1px;color:var(--ink);font-size:.9rem;font-weight:600;min-width:0}
.dk-anatomi-ad code{font-size:.72rem;font-weight:400;background:none;border:0;padding:0;color:var(--muted)}
.dk-anatomi-liste .dk-rozet{margin-left:auto;flex:none}

/* Kod kutusu */
.dk-kod{margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.dk-kod figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;
  background:var(--bg-soft);border-bottom:1px solid var(--line);font-size:.82rem;font-weight:600;color:var(--ink)}
.dk-kopya{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--text);font:inherit;font-size:.76rem;cursor:pointer}
.dk-kopya:hover{border-color:var(--brand);color:var(--dk-marka-ink)}
.dk-kopya.is-ok{border-color:var(--success);color:var(--dk-basari-ink)}
.dk-kod pre{margin:0;padding:14px;overflow-x:auto;background:var(--surface)}
.dk-kod code{font-family:var(--font-mono);font-size:.83rem;line-height:1.7;color:var(--ink-2);white-space:pre}

/* SSS */
.dk-sss details{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);margin:0 0 8px}
.dk-sss summary{padding:12px 15px;cursor:pointer;font-weight:600;color:var(--ink);font-size:.94rem;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.dk-sss summary::-webkit-details-marker{display:none}
.dk-sss summary::after{content:"+";font-family:var(--font-mono);color:var(--dk-marka-ink);font-size:1.1rem;flex:none}
.dk-sss details[open] summary::after{content:"−"}
.dk-sss details p{margin:0;padding:0 15px 14px;color:var(--text);font-size:.92rem}

/* Destek + gezinme */
.dk-destek{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0 0 20px}
.dk-destek-kart{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);text-decoration:none;transition:border-color .16s,transform .16s}
.dk-destek-kart:hover{border-color:var(--dk-marka-ink);transform:translateY(-2px)}
.dk-destek-kart .icon{color:var(--dk-marka-ink)}
.dk-destek-kart b{color:var(--ink);font-size:.96rem;margin-top:4px}
.dk-destek-kart span{color:var(--muted);font-size:.84rem;line-height:1.5}
.dk-gezinme{display:flex;justify-content:space-between;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.dk-gez{display:flex;flex-direction:column;gap:2px;text-decoration:none;max-width:48%}
.dk-gez span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dk-gez b{display:flex;align-items:center;gap:6px;color:var(--ink);font-size:.95rem}
.dk-gez:hover b{color:var(--dk-marka-ink)}
.dk-gez--ileri{text-align:right;margin-left:auto}
.dk-gez--ileri b{justify-content:flex-end}

/* Kılavuz merkezi stilleri .dh-* olarak yeniden yazıldı (dosya sonunda). */

/* ---------- Koyu mod ---------- */
[data-theme="dark"] .dk-hero{background:#060c1a}
[data-theme="dark"] .dk-toc a.is-aktif{background:var(--brand-050)}
[data-theme="dark"] .dk-not{background:var(--brand-050);border-color:var(--brand-100)}
[data-theme="dark"] .dk-tablo thead th{background:var(--surface-3)}
[data-theme="dark"] .dk-tablo tbody tr:hover{background:var(--surface-2)}
[data-theme="dark"] .dk-sema,[data-theme="dark"] .dk-hat,[data-theme="dark"] .dk-anatomi,
[data-theme="dark"] .dk-bicim figure{background:var(--surface-2);border-color:var(--line)}
[data-theme="dark"] .dk-kod pre,[data-theme="dark"] .dk-kod{background:var(--surface)}
[data-theme="dark"] .dk-kod figcaption{background:var(--surface-3)}
[data-theme="dark"] .dk-tablo code,[data-theme="dark"] .dk-govde p code,
[data-theme="dark"] .dk-liste code,[data-theme="dark"] .dk-adim code{background:var(--surface-3);border-color:var(--line)}
[data-theme="dark"] .dk-pul{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
[data-theme="dark"] .dk-anatomi-n{background:var(--surface-3)}

/* ---------- Duyarlılık ---------- */
@media (max-width:1080px){
  .dk-kafes{grid-template-columns:220px minmax(0,1fr);gap:28px}
  .dk-sema{grid-template-columns:1fr}
  .dk-sema-cv{height:230px}
  .dk-anatomi{grid-template-columns:1fr}
  .dk-anatomi canvas{position:static;height:380px}
}
@media (max-width:860px){
  .dk-kafes{grid-template-columns:1fr;gap:0}
  /* Kabın yan boşluğu kırılım noktasına göre 24/16/14px değişiyor; sabit bir
     negatif kenar boşluğu (-16px) dar ekranda 2px taşırıyordu. Çubuk kabın
     içinde kalır, gutter'ları gölgeyle boyanır — taşma imkânsız. */
  .dk-yan{position:sticky;top:64px;z-index:6;background:var(--bg);padding:10px 0 8px;
    border-bottom:1px solid var(--line);box-shadow:-24px 0 0 var(--bg),24px 0 0 var(--bg)}
  .dk-yan-ic{position:static;max-height:none;overflow:visible;padding:0}
  .dk-toc{display:none}
  .dk-yan-alt{display:none}
  .dk-secici,.dk-ara{margin-bottom:8px}
  .dk-govde{padding-top:18px}
  .dk-ilerleme{top:118px}
  .dk-hat-durak{grid-template-columns:repeat(2,1fr);gap:12px}
  .dk-tablo{display:block;overflow-x:auto;white-space:normal}
  .dk-h2{font-size:1.24rem}
  .dk-hero{padding:30px 0 30px}
}
@media (max-width:560px){
  .dk-hero-kunye span{flex:1 1 44%}
  .dk-destek{grid-template-columns:1fr}
  .dk-gezinme{flex-direction:column}
  .dk-gez{max-width:100%}
  .dk-gez--ileri{text-align:left;margin-left:0}
  .dk-gez--ileri b{justify-content:flex-start}
  .dk-anatomi canvas{height:300px}
}
@media print{
  .dk-yan,.dk-hero-eylem,.dk-ilerleme,.dk-kopya,.dk-cipa,.site-header,.site-footer{display:none!important}
  .dk-kafes{grid-template-columns:1fr}
  .dk-sss details{border:0}
  .dk-sss details p{display:block!important}
  .dk-blok{break-inside:avoid;page-break-inside:avoid}
}

/* Palet tablosunda tıklanabilir renk kodu */
.dk-hex{font-family:var(--font-mono);font-size:.85em;background:var(--bg-softer);border:1px solid var(--line-2);
  border-radius:5px;padding:2px 7px;color:var(--ink-2);cursor:pointer;transition:border-color .16s,color .16s}
.dk-hex:hover{border-color:var(--brand);color:var(--dk-marka-ink)}
.dk-hex.is-ok{border-color:var(--success);color:var(--dk-basari-ink)}
[data-theme="dark"] .dk-hex{background:var(--surface-3);border-color:var(--line)}

/* =====================================================================
   ÜRÜN KILAVUZU (/dokumantasyon/{urun}) — kılavuz kabuğunun eklentileri
   ===================================================================== */
/* ---------------------------------------------------------------
   Ürün kılavuzu hero'su. Arka planı `belge` canvas sahnesi taşır:
   aurora + sayfa satırları + kılavuzun kendi bölüm kadranı.
   Perde artık tüm bandı değil YALNIZ ORTAYI karartır; kenarlarda
   saydama iner, yoksa sahne görünmez olur.
   --------------------------------------------------------------- */
.dk-hero--urun{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 48%,#0a1b3c 100%);
  padding:clamp(34px,5vw,58px) 0 clamp(30px,4.5vw,48px)}
.dk-hero--urun::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(56% 64% at 50% 50%,rgba(9,20,44,.86) 0%,rgba(9,20,44,.58) 58%,rgba(9,20,44,0) 100%)}
[data-theme="dark"] .dk-hero--urun{background:linear-gradient(160deg,#060c1a 0%,#08122a 48%,#08152f 100%)}
[data-theme="dark"] .dk-hero--urun::after{
  background:radial-gradient(56% 64% at 50% 50%,rgba(4,9,20,.88) 0%,rgba(4,9,20,.60) 58%,rgba(4,9,20,0) 100%)}

.dk-hero-sahne{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}

/* --- belge künyesi (masthead): ürün adı üstte, belgenin adı altta --- */
.dk-mast{display:block;margin:0 0 14px;line-height:1.06}
.dk-hero .dk-mast-ad{display:block;font-size:clamp(1.95rem,4.2vw,3.1rem);letter-spacing:-.032em;color:#fff}
.dk-hero .dk-mast em{display:block;margin-top:10px;font-style:normal;font-weight:600;
  font-size:clamp(.78rem,1.5vw,.94rem);letter-spacing:.24em;text-transform:uppercase;
  color:transparent;background:linear-gradient(100deg,#7fb0ff,#c9a5ff 55%,#ff9b7a);
  -webkit-background-clip:text;background-clip:text}
/* Degradeli metin bazı tarayıcılarda hiç boyanmaz; o durumda düz renge dön. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .dk-hero .dk-mast em{color:#a9c4ff;background:none}
}
.dk-hero .dk-mast em::before,.dk-hero .dk-mast em::after{content:"";display:inline-block;width:26px;height:1px;
  vertical-align:.34em;margin:0 12px;background:rgba(160,190,255,.42)}
/* Dar ekranda yan çizgiler satırı sıkıştırıp harf aralığını okunmaz yapıyor. */
@media (max-width:560px){
  .dk-hero .dk-mast em{letter-spacing:.15em;margin-top:8px}
  .dk-hero .dk-mast em::before,.dk-hero .dk-mast em::after{display:none}
}

/* --- başlık, açıklama ve düğmeler: sahnenin üstünde yükselsin --- */
.dk-mast{position:relative}
/* Degradeyle boyanmış metin gölge almaz; parıltı ayrı bir katmandan gelir. */
.dk-mast::before{content:"";position:absolute;left:50%;top:36%;z-index:-1;
  transform:translate(-50%,-50%);width:min(620px,92%);height:170px;border-radius:50%;
  pointer-events:none;filter:blur(10px);
  background:radial-gradient(closest-side,rgba(96,145,255,.36),rgba(96,145,255,0))}
.dk-hero .dk-mast-ad{font-size:clamp(2.2rem,5.1vw,3.85rem);letter-spacing:-.035em;
  background:linear-gradient(180deg,#ffffff 0%,#d3dffb 78%,#b9caf3 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .dk-hero .dk-mast-ad{color:#fff;background:none}
}

.dk-hero--urun .dk-hero-lede{font-size:clamp(1.02rem,1.4vw,1.14rem);line-height:1.68;
  color:#c8d6f0;margin-bottom:24px}

.dk-hero--urun .dk-hero-kunye{gap:10px;margin-bottom:26px}
.dk-hero--urun .dk-hero-kunye span{padding:11px 19px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
  border-color:rgba(160,192,255,.30);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 10px 26px rgba(4,10,26,.34),inset 0 1px 0 rgba(255,255,255,.18)}
.dk-hero--urun .dk-hero-kunye b{font-size:1.12rem}

.dk-hero--urun .dk-hero-eylem{gap:12px}
.dk-hero--urun .dk-hero-eylem .btn{padding:15px 27px;font-size:1rem;border-radius:var(--r)}
.dk-hero--urun .btn--primary{border-color:rgba(255,255,255,.18);
  background:linear-gradient(135deg,#2a63d8 0%,#1e4fd0 56%,#4338ca 100%);
  box-shadow:0 12px 32px rgba(37,99,235,.46),inset 0 1px 0 rgba(255,255,255,.26)}
.dk-hero--urun .btn--primary:hover{transform:translateY(-2px);
  background:linear-gradient(135deg,#3170e6 0%,#2559d8 56%,#4c41d6 100%);
  box-shadow:0 16px 40px rgba(37,99,235,.6),inset 0 1px 0 rgba(255,255,255,.32)}
.dk-hero--urun .btn--light{background:rgba(255,255,255,.95);color:var(--brand-700);
  box-shadow:0 10px 26px rgba(4,10,26,.36)}
.dk-hero--urun .btn--light:hover{background:#fff;transform:translateY(-2px)}
.dk-hero--urun .btn--ghost-light{background:rgba(255,255,255,.07);
  border-color:rgba(172,200,255,.36);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dk-hero--urun .btn--ghost-light:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.dk-hero--urun .btn:hover{transform:none}}

/* içerik ortada */
.dk-hero--urun .dk-hero-in{max-width:860px;margin-left:auto;margin-right:auto;text-align:center}
.dk-hero--urun .breadcrumb{justify-content:center;margin-bottom:16px}
.dk-hero--urun .eyebrow-mono{justify-content:center;color:#9fc0ff;opacity:1}
.dk-hero--urun .dk-mast{margin:2px 0 14px}
.dk-hero--urun .dk-hero-lede{margin-left:auto;margin-right:auto;max-width:60ch;color:#b9c8e4}
.dk-hero--urun .dk-hero-kunye,.dk-hero--urun .dk-hero-eylem{justify-content:center}
.dk-hero--urun .dk-hero-kunye span{align-items:center;text-align:center}
@media print{.dk-hero-sahne{display:none}}
.dk-h3{margin:26px 0 10px;font-size:1.06rem;color:var(--ink);letter-spacing:-.01em}

/* Yönetim paneli haritası */
.dk-harita{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px;margin:14px 0;
  align-items:start}
.dk-harita-grup{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.dk-harita-grup h3{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-size:.76rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dk-marka-ink)}
.dk-harita-grup h3 small{margin-left:auto;font-size:.72rem;letter-spacing:0;text-transform:none;color:var(--text);
  background:var(--bg-softer);border-radius:99px;padding:1px 8px;font-weight:700}
.dk-harita-grup ul{list-style:none;margin:0;padding:0}
/* İki satır: ekran adı üstte, yolu altta. Tek satırda yan yana dizilince uzun
   Türkçe etiketler (“Değerlendirmeler”) yolun üstüne biniyordu. */
.dk-harita-grup li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:2px 8px;padding:6px 0;
  border-bottom:1px solid var(--line-2);color:var(--ink);font-size:.875rem}
.dk-harita-grup li:last-child{border-bottom:0}
.dk-harita-grup li>.icon{grid-row:1;color:var(--muted);align-self:center}
.dk-harita-grup li span{grid-column:2;line-height:1.35}
.dk-harita-grup li code{grid-column:2;font-family:var(--font-mono);font-size:.7rem;color:var(--muted);
  background:none;border:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Günlük akış */
.dk-akis{list-style:none;margin:0 0 16px;padding:0;counter-reset:ak}
.dk-akis>li{display:flex;gap:13px;align-items:flex-start;padding:0 0 14px 0;position:relative}
.dk-akis>li:not(:last-child)::before{content:"";position:absolute;left:14px;top:32px;bottom:2px;width:2px;
  background:var(--line);border-radius:2px}
.dk-akis-n{flex:none;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;
  background:var(--dk-vurgu);color:#fff;font-size:.84rem;font-weight:700;font-family:var(--font-mono);
  position:relative;z-index:1}
.dk-akis b{display:block;color:var(--ink);font-size:.98rem;margin:4px 0 3px}
.dk-akis p{margin:0;color:var(--text);line-height:1.66}

/* İpucu kutuları */
.dk-ipucu{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.dk-ipucu>div{display:flex;gap:10px;align-items:flex-start;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 14px}
.dk-ipucu>div>.icon{flex:none;margin-top:2px;color:var(--dk-marka-ink)}
.dk-ipucu b{display:block;color:var(--ink);font-size:.9rem;margin:0 0 2px}
.dk-ipucu p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.55}

/* =====================================================================
   TEK KART TEMA BÖLÜMÜ (.tk)
   ===================================================================== */
.tk{--tk-vurgu:var(--brand);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  overflow:hidden;margin:14px 0 18px}
[data-theme="dark"] .tk{--tk-vurgu:var(--tk-vurgu-koyu,var(--brand))}

/* Seçim şeridi */
.tk-serit{display:flex;gap:6px;padding:12px;overflow-x:auto;scrollbar-width:thin;
  background:var(--bg-soft);border-bottom:1px solid var(--line)}
.tk-cip{flex:none;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-size:.84rem;
  font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .16s,color .16s,background .16s}
.tk-cip:hover{border-color:var(--dk-marka-ink);color:var(--ink)}
.tk-cip.is-aktif{border-color:var(--tk-vurgu);background:var(--bg);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--tk-vurgu)}
.tk-cip em{font-style:normal;font-size:.7rem;font-weight:700;color:var(--dk-basari-ink);
  background:var(--success-050);border:1px solid var(--success-100);border-radius:99px;padding:0 6px}
.tk-cip-renk{display:inline-flex;border-radius:4px;overflow:hidden;border:1px solid var(--line);flex:none}
.tk-cip-renk i{width:7px;height:16px;display:block}

/* Palet sahnesi */
.tk-sahne{position:relative;height:104px;border-bottom:1px solid var(--line)}
.tk-cv{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Panel */
.tk-panel{padding:18px}
.tk-bas{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;
  padding:0 0 12px;border-bottom:1px solid var(--line-2)}
.tk-bas h3{margin:0 0 5px;font-size:1.22rem;color:var(--ink);letter-spacing:-.015em}
.tk-bas p{margin:0;color:var(--text);line-height:1.65;max-width:62ch}
.tk-bas-eylem{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tk-fiyat{color:var(--ink);font-weight:700;font-size:1.02rem}
.tk-rozet{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:.76rem;
  font-weight:700;background:var(--bg-softer);color:var(--text);border:1px solid var(--line)}
.tk-rozet--tab{background:var(--success-050);color:var(--dk-basari-ink);border-color:var(--success-100)}
.tk-etiket{display:flex;flex-wrap:wrap;gap:7px;padding:12px 0}
.tk-etiket span{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;
  background:var(--bg-softer);border:1px solid var(--line-2);color:var(--text);font-size:.78rem}
.tk-alt{display:block;color:var(--muted);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;margin:0 0 6px}
/* Cümle olan açıklama satırı: büyük harfe çevrilmez (içinde kod parçası geçiyor). */
.tk-aciklama{margin:0;color:var(--muted);font-size:.82rem;line-height:1.55}
.tk-aciklama code{font-family:var(--font-mono);font-size:.92em;background:var(--bg-softer);
  border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;color:var(--text)}
[data-theme="dark"] .tk-aciklama code{background:var(--surface-3);border-color:var(--line)}

.tk-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px;align-items:start}
.tk-blok{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.tk-blok--genis{grid-column:1/-1}
.tk-blok h4{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:.9rem;color:var(--ink)}
.tk-blok h4 .icon{color:var(--tk-vurgu)}
.tk-imza{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:.85rem;line-height:1.55}
.tk-imza .icon{flex:none;margin-top:2px;color:var(--tk-vurgu)}

/* Palet pulları */
.tk-pullar{display:grid;grid-template-columns:1fr;gap:5px;margin:0 0 12px}
.tk-pul{display:flex;align-items:center;gap:9px;width:100%;padding:5px 8px;border:1px solid transparent;
  border-radius:var(--r-sm);background:var(--surface);cursor:pointer;font:inherit;text-align:left}
.tk-pul:hover{border-color:var(--tk-vurgu)}
.tk-pul.is-ok{border-color:var(--success)}
.tk-pul i{flex:none;width:17px;height:17px;border-radius:5px;border:1px solid var(--line);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.tk-pul b{flex:1;min-width:0;color:var(--ink);font-size:.82rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-pul code{font-family:var(--font-mono);font-size:.74rem;color:var(--muted)}
.tk-kontrast{width:100%;border-collapse:collapse;font-size:.83rem}
.tk-kontrast caption{caption-side:top;text-align:left;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:0 0 6px}
.tk-kontrast th,.tk-kontrast td{padding:5px 0;border-bottom:1px solid var(--line-2);text-align:left;color:var(--text)}
.tk-kontrast th{font-weight:500}
.tk-kontrast td{text-align:right;color:var(--ink);white-space:nowrap}
.tk-kontrast tr:last-child th,.tk-kontrast tr:last-child td{border-bottom:0}

/* Tipografi ve değer listesi */
.tk-ornek{font-family:var(--font-display);font-size:1.5rem;color:var(--ink)!important;margin:0 0 12px;line-height:1.2}
.tk-deger{margin:0;display:grid;grid-template-columns:1fr;gap:2px}
.tk-deger>div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid var(--line-2)}
.tk-deger>div:last-child{border-bottom:0}
.tk-deger dt{color:var(--muted);font-size:.82rem}
.tk-deger dd{margin:0;color:var(--ink);font-size:.82rem;font-weight:600;text-align:right}

.tk-ikili{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tk-ikili p{margin:0;color:var(--text);line-height:1.68;font-size:.9rem}

/* Bölüm sırası */
.tk-bolum{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tk-bolum li{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:.83rem}
.tk-bolum li span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-softer);color:var(--text);font-size:.7rem;font-weight:700;font-family:var(--font-mono)}
.tk-bolum li.is-ozel{border-color:var(--tk-vurgu)}
.tk-bolum li.is-ozel span{background:var(--tk-vurgu);color:#fff}
.tk-bolum li em{font-style:normal;font-size:.7rem;color:var(--muted)}

/* Anatomi */
.tk-anatomi{padding:0 18px 18px}
.tk-anatomi canvas{width:100%;height:420px;display:block}

/* Koyu mod */
[data-theme="dark"] .dk-harita-grup,[data-theme="dark"] .tk,[data-theme="dark"] .tk-pul{background:var(--surface)}
[data-theme="dark"] .tk-serit,[data-theme="dark"] .tk-blok,[data-theme="dark"] .dk-ipucu>div{background:var(--surface-2)}
[data-theme="dark"] .tk-cip{background:var(--surface-2)}
[data-theme="dark"] .tk-cip.is-aktif{background:var(--surface-3)}
[data-theme="dark"] .tk-imza,[data-theme="dark"] .tk-bolum li{background:var(--surface-3)}
[data-theme="dark"] .tk-etiket span,
[data-theme="dark"] .dk-harita-grup h3 small,[data-theme="dark"] .tk-bolum li span{background:var(--surface-3);border-color:var(--line)}
[data-theme="dark"] .tk-pul i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}

/* Duyarlılık */
@media (max-width:1080px){
  .tk-anatomi canvas{height:360px}
}
@media (max-width:860px){
  .tk-panel,.tk-anatomi{padding:14px}
  .tk-anatomi{padding-top:0}
  .dk-harita{grid-template-columns:1fr}
  .tk-bas-eylem{width:100%}
}
@media (max-width:560px){
  .tk-anatomi canvas{height:300px}
  .dk-akis-n{width:25px;height:25px;font-size:.78rem}
  .dk-akis>li:not(:last-child)::before{left:12px}
}

/* Kılavuz başlığındaki ürün ikonu */

/* =====================================================================
   KILAVUZ MERKEZİ (.dh-*) — /dokumantasyon
   Kahraman canvas'lı, liste yazılımların GERÇEK ekran görüntüleriyle.
   ===================================================================== */
.dh{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:56px 0 52px;isolation:isolate}
.dh-cv{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85}
.dh-perde{position:absolute;inset:0;z-index:1;
  /* Yazı SOLDA; sağ yarıda perde açılır ki canvas'taki belge sahnesi görünsün. */
  background:linear-gradient(102deg,rgba(6,12,26,.96) 0%,rgba(6,12,26,.93) 38%,rgba(6,12,26,.70) 62%,rgba(6,12,26,.30) 84%,rgba(6,12,26,.20) 100%)}
.dh-in{position:relative;z-index:2;max-width:min(var(--container),1200px)}
.dh .breadcrumb, .dh .breadcrumb a, .dh .breadcrumb .icon{color:rgba(255,255,255,.70)}
.dh .breadcrumb .cur{color:#dbe4f7}
.dh .breadcrumb a:hover{color:#fff}
.dh h1{max-width:20ch;font-size:clamp(1.8rem,3.7vw,2.9rem);line-height:1.1;letter-spacing:-.03em;
  margin:.5rem 0 .75rem;color:#fff;text-wrap:balance}
.dh h1 em{font-style:normal;color:transparent;background:linear-gradient(92deg,#fff,var(--dk-vurgu) 125%);
  -webkit-background-clip:text;background-clip:text;filter:brightness(1.3)}
.dh-lede{max-width:62ch;color:rgba(255,255,255,.86);font-size:1.02rem;line-height:1.75;margin:0 0 22px}
.dh-lede b{color:#fff}
.dh-sayim{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.dh-sayim span{display:inline-flex;flex-direction:column;gap:1px;padding:9px 15px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(255,255,255,.78)}
.dh-sayim b{font-size:1.12rem;letter-spacing:-.02em;text-transform:none;color:#fff;font-family:var(--font-mono)}
.dh-eylem{display:flex;flex-wrap:wrap;gap:10px}
.dh .btn--ghost-light{border:1px solid rgba(255,255,255,.28);color:#fff;background:transparent}
.dh .btn--ghost-light:hover{background:rgba(255,255,255,.10)}

/* Bölüm başlığı */
.dh-bas{max-width:66ch;margin:0 0 26px}
.dh-bas h2{font-size:clamp(1.5rem,2.7vw,2.05rem);line-height:1.18;letter-spacing:-.026em;margin:0 0 .5rem;color:var(--ink)}
.dh-bas p{margin:0;color:var(--text);line-height:1.75}
.dh-bas b{color:var(--ink)}

/* Yazılım kartları */
.dh-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:20px}
.dh-kart{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.dh-kart:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--sh-md)}
.dh-kapak{position:relative;display:block;text-decoration:none;background:var(--bg-soft);padding:14px 14px 0}
/* Tarayıcı camı — ekran görüntüsünü ürün gibi çerçeveler */
.dh-cam{display:block;border-radius:10px 10px 0 0;overflow:hidden;border:1px solid var(--line);
  border-bottom:0;background:var(--surface);box-shadow:0 -1px 0 rgba(15,23,42,.04)}
.dh-cam-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:var(--bg-softer);
  border-bottom:1px solid var(--line-2)}
.dh-cam-bar i{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none}
.dh-cam-bar em{margin-left:6px;font-style:normal;font-family:var(--font-mono);font-size:.66rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-cam img{display:block;width:100%;height:auto;aspect-ratio:1440/900;object-fit:cover;object-position:top center}
.dh-cam-bos{display:grid;place-items:center;aspect-ratio:1440/900;color:var(--faint);background:var(--bg-softer)}
.dh-rozet{position:absolute;right:22px;bottom:10px;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:99px;background:var(--brand);color:#fff;font-size:.76rem;font-weight:700;
  box-shadow:var(--sh);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.dh-kart:hover .dh-rozet,.dh-kapak:focus-visible .dh-rozet{opacity:1;transform:translateY(0)}
.dh-govde{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;flex:1}
.dh-govde h3{margin:0;font-size:1.08rem;letter-spacing:-.015em}
.dh-govde h3 a{color:var(--ink);text-decoration:none}
.dh-govde h3 a:hover{color:var(--dk-marka-ink)}
.dh-govde p{margin:0;color:var(--text);font-size:.885rem;line-height:1.62}

/* Ölçü şeridi */
.dh-olcu{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:2px 0 0;padding:0;
  background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.dh-olcu>div{background:var(--surface);padding:8px 9px;min-width:0}
.dh-olcu dt{margin:0 0 2px;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Değer mono ve dar sütunda: "60-90 dk" 0.92rem'de iki satıra kırılıyordu. */
.dh-olcu dd{margin:0;color:var(--ink);font-weight:700;font-size:.84rem;font-family:var(--font-mono);
  letter-spacing:-.03em;display:flex;align-items:baseline;gap:4px;white-space:nowrap;line-height:1.3}
.dh-olcu dd small{font-family:var(--font-body);font-weight:500;font-size:.68rem;color:var(--muted);letter-spacing:0}
.dh-alt{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;padding-top:10px;
  border-top:1px solid var(--line-2)}
.dh-demo{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:.8rem;text-decoration:none}
.dh-demo:hover{color:var(--dk-marka-ink)}
.dh-etiket{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;
  background:var(--bg-softer);border:1px solid var(--line-2);color:var(--text);font-size:.72rem}

/* Ortak sıra */
.dh-yol{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:0;padding:0}
.dh-yol li{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px 14px 52px}
.dh-yol span{position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:8px;display:grid;
  place-items:center;background:var(--brand-050);color:var(--dk-marka-ink);font-family:var(--font-mono);
  font-size:.76rem;font-weight:700}
.dh-yol b{display:block;color:var(--ink);font-size:.94rem;margin:0 0 2px}
.dh-yol em{display:block;font-style:normal;color:var(--muted);font-size:.82rem;line-height:1.5}

/* Koyu mod */
[data-theme="dark"] .dh{background:#060c1a}
[data-theme="dark"] .dh-kapak{background:var(--surface-2)}
[data-theme="dark"] .dh-cam,[data-theme="dark"] .dh-olcu>div{background:var(--surface)}
[data-theme="dark"] .dh-cam-bar,[data-theme="dark"] .dh-cam-bos{background:var(--surface-3)}
[data-theme="dark"] .dh-etiket{background:var(--surface-3);border-color:var(--line)}
[data-theme="dark"] .dh-cam img{filter:brightness(.94)}

@media (max-width:860px){
  .dh{padding:38px 0 36px}
  .dh-izgara{grid-template-columns:1fr}
  .dh-perde{background:linear-gradient(180deg,rgba(6,12,26,.95) 0%,rgba(6,12,26,.90) 60%,rgba(6,12,26,.72) 100%)}
}
@media (max-width:560px){
  .dh-sayim span{flex:1 1 44%}
  .dh-olcu{grid-template-columns:repeat(2,1fr)}
}

/* =====================================================================
   KILAVUZ SAHNESİ — anlatılan ekranın gerçek görüntüsü (.dk-sahne)
   ===================================================================== */
.dk-sahne{margin:16px 0 18px}
.dk-sahne-cam{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  box-shadow:var(--sh)}
.dk-sahne-bar{display:flex;align-items:center;gap:7px;padding:9px 13px;background:var(--bg-soft);
  border-bottom:1px solid var(--line)}
.dk-sahne-bar i{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none}
.dk-sahne-ic{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;flex:none;
  background:var(--brand-050);color:var(--dk-marka-ink)}
.dk-sahne-ad{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.dk-sahne-goruntu{position:relative;line-height:0}
.dk-sahne-goruntu img{display:block;width:100%;height:auto;aspect-ratio:1600/1000;object-fit:cover;object-position:top center}
.dk-sahne figcaption{margin:9px 2px 0;color:var(--muted);font-size:.85rem;line-height:1.6}

/* İşaretler */
.dk-nokta{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;
  border:2px solid #fff;background:var(--brand);color:#fff;font-size:.78rem;font-weight:700;
  font-family:var(--font-mono);cursor:pointer;display:grid;place-items:center;padding:0;line-height:1;
  box-shadow:0 2px 10px rgba(15,23,42,.35);transition:transform .18s,box-shadow .18s}
.dk-nokta::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--brand);
  opacity:0;transition:opacity .18s,transform .18s;transform:scale(.7)}
.dk-nokta:hover,.dk-nokta.is-vurgu{transform:translate(-50%,-50%) scale(1.15)}
.dk-nokta.is-vurgu::after{opacity:.55;transform:scale(1)}
.dk-nokta:focus-visible{outline:3px solid #fff;outline-offset:2px}
.dk-isaret{list-style:none;counter-reset:is;margin:12px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:6px}
.dk-isaret li{margin:0}
.dk-isaret button{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:9px 11px;
  border:1px solid transparent;border-radius:var(--r-sm);background:transparent;font:inherit;
  color:var(--text);cursor:pointer;line-height:1.6;font-size:.88rem}
.dk-isaret button:hover,.dk-isaret li.is-vurgu button{border-color:var(--line);background:var(--bg-soft)}
.dk-isaret-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-size:.72rem;font-weight:700;font-family:var(--font-mono);margin-top:1px}
.dk-isaret b{color:var(--ink)}

/* Ekran şeridi — tek satırda birden çok görüntü */
.dk-serit{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:16px 0}
.dk-serit figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.dk-serit img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  border-bottom:1px solid var(--line-2)}
.dk-serit figcaption{padding:10px 12px}
.dk-serit figcaption b{display:block;color:var(--ink);font-size:.9rem;margin:0 0 2px}
.dk-serit figcaption span{display:block;color:var(--muted);font-size:.82rem;line-height:1.5}

/* Akış omurgası */
.dk-omur{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:0;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 16px 10px;margin:0 0 18px}
.dk-omur>canvas{width:56px;height:100%;display:block;align-self:stretch}
.dk-omur-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.dk-omur-liste li{min-height:34px}
.dk-omur-liste b{display:block;color:var(--ink);font-size:.98rem;margin:0 0 3px}
.dk-omur-liste span{display:block;color:var(--text);font-size:.9rem;line-height:1.65}

/* Üçlü kart ızgarası + sık adım listesi */
.dk-uclu{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:0 0 16px}
.dk-adim--sik li{margin-bottom:7px}

[data-theme="dark"] .dk-sahne-cam,[data-theme="dark"] .dk-serit figure{background:var(--surface)}
[data-theme="dark"] .dk-sahne-bar{background:var(--surface-3)}
[data-theme="dark"] .dk-omur{background:var(--surface-2)}
[data-theme="dark"] .dk-sahne-goruntu img,[data-theme="dark"] .dk-serit img{filter:brightness(.94)}
[data-theme="dark"] .dk-nokta{border-color:rgba(255,255,255,.85)}

@media (max-width:640px){
  /* Küçük ekranda 26px'lik işaretler görüntüyü kapatıyor; liste zaten altta. */
  .dk-nokta{width:20px;height:20px;font-size:.68rem}
  .dk-omur{grid-template-columns:40px minmax(0,1fr);padding-left:6px}
  .dk-omur>canvas{width:40px}
  .dk-serit{grid-template-columns:1fr}
}

/* =====================================================================
   KILAVUZ BÖLÜMÜ — her bölümün aynı iskeleti (.dk-bol)
   Simetri kasıtlı: nişan+başlık → künye → ekran → dört adım → gövde →
   uyarı çifti. Katmanın içi boş kalabilir ama YERİ değişmez.
   ===================================================================== */
:root{
  --dk-uyari-ink:#b45309;              /* amber-700 — beyaz üstünde 4,9:1 */
  --dk-uyari-zemin:#fffbeb;
  --dk-uyari-cizgi:#fde68a;
}
[data-theme="dark"]{
  --dk-uyari-ink:#fbbf24;
  --dk-uyari-zemin:#2a2008;
  --dk-uyari-cizgi:#4a3a12;
}

.dk-bol{padding-top:22px}
.dk-bol-bas{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;margin:0 0 18px}
/* Nişan başlığın ikonunun işini görüyor; ikisi birden gürültü olur. */
.dk-bol-bas .dk-h2-ikon{display:none}
.dk-bol-bas .dk-h2{margin:2px 0 8px}
.dk-bol-bas .dk-lede{margin:0}
.dk-bol-nisan{position:relative;flex:none;width:62px;height:62px;display:block}
.dk-bol-nisan canvas{display:block;width:62px;height:62px}
.dk-bol-nisan b{position:absolute;right:-4px;bottom:-3px;min-width:22px;height:22px;padding:0 5px;
  display:grid;place-items:center;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);color:var(--muted);
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.02em}

/* ---- künye: ne işe yarar × panelde nerede ---- */
.dk-bol-kunye{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin:0 0 18px}
.dk-bol-kunye>div{padding:15px 17px;min-width:0}
.dk-bol-kunye>div+div{border-left:1px solid var(--line)}
.dk-bol-kunye h3{font-size:.74rem!important;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted)!important;margin:0 0 8px!important}
.dk-bol-kunye h3 .icon{color:var(--muted)!important}
.dk-bol-kunye p{margin:0;font-size:.92rem;line-height:1.68}
.dk-bol-yol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dk-bol-yol li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-width:0}
.dk-bol-yol span{color:var(--ink);font-size:.9rem;font-weight:500}
.dk-bol-yol code{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);
  background:var(--surface);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;
  overflow-wrap:anywhere}

/* ---- dört adım ---- */
.dk-bol-adim{margin:0 0 18px}
.dk-bol-adim>h3{font-size:.74rem!important;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted)!important;margin:0 0 10px!important}
.dk-bol-adim>h3 .icon{color:var(--muted)!important}
.dk-bol-adim ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dk-bol-adim li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px}
.dk-bol-adim li>span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-050);color:var(--dk-marka-ink);
  font-family:var(--font-mono);font-size:.76rem;font-weight:700}
.dk-bol-adim li>div>b{display:block;color:var(--ink);font-size:.94rem;margin:0 0 3px}
.dk-bol-adim li p{margin:0!important;font-size:.88rem;line-height:1.62}

.dk-bol-govde{margin:0 0 18px}
.dk-bol-govde>*:last-child{margin-bottom:0}

/* ---- uyarı çifti ---- */
.dk-bol-son{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dk-uyari{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;
  border:1px solid var(--line);border-left-width:3px;border-radius:var(--r);padding:13px 15px;
  background:var(--surface)}
.dk-uyari>div>b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin:1px 0 4px}
.dk-uyari p{margin:0!important;font-size:.88rem;line-height:1.66}
.dk-uyari>.icon{margin-top:1px}
.dk-uyari--dikkat{border-left-color:var(--dk-uyari-ink);background:var(--dk-uyari-zemin)}
.dk-uyari--dikkat>.icon,.dk-uyari--dikkat>div>b{color:var(--dk-uyari-ink)}
.dk-uyari--ipucu{border-left-color:var(--dk-marka-ink);background:var(--brand-050)}
.dk-uyari--ipucu>.icon,.dk-uyari--ipucu>div>b{color:var(--dk-marka-ink)}

/* ---- katman yığını (katalog hiyerarşisi) ---- */
.dk-katman{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:18px;align-items:center;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin:0 0 16px}
.dk-katman canvas{width:100%;height:165px;display:block}
.dk-katman ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dk-katman b{display:block;color:var(--ink);font-size:.94rem}
.dk-katman span{display:block;color:var(--muted);font-size:.85rem;line-height:1.5}

/* ---- satış kanalları ---- */
.dk-kanal{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 14px 16px;margin:0 0 16px}
.dk-kanal canvas{width:100%;height:130px;display:block}
.dk-kanal ol{list-style:none;margin:6px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.dk-kanal li{text-align:center;padding:0 6px;min-width:0}
.dk-kanal b{display:block;color:var(--ink);font-size:.9rem}
.dk-kanal span{display:block;color:var(--muted);font-size:.79rem;line-height:1.45;margin-top:2px}

/* ---- çip listesi (sebep, seçenek kümeleri) ---- */
.dk-cip{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 10px}
.dk-cip span{display:inline-block;padding:5px 11px;border-radius:999px;font-size:.84rem;
  background:var(--surface);border:1px solid var(--line);color:var(--ink)}

.dk-hat-durak--5{grid-template-columns:repeat(5,1fr)}

@media (max-width:900px){
  .dk-bol-kunye{grid-template-columns:1fr}
  .dk-bol-kunye>div+div{border-left:0;border-top:1px solid var(--line)}
  .dk-bol-adim ol,.dk-bol-son{grid-template-columns:1fr}
  .dk-katman{grid-template-columns:1fr}
  .dk-katman canvas{height:110px}
  .dk-kanal ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dk-hat-durak--5{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .dk-bol-bas{grid-template-columns:1fr;gap:12px}
  .dk-bol-nisan,.dk-bol-nisan canvas{width:52px;height:52px}
}
@media print{
  .dk-bol-nisan,.dk-kanal canvas,.dk-katman canvas{display:none}
  .dk-bol-son,.dk-bol-adim ol{grid-template-columns:1fr}
}