/* ============================================================
   xdd.baby · Yazılım Öğrenme — ders sayfaları
   Koyu tema varsayılan (xdd.baby kimliği); açık tema sistem ayarından
   ya da sağ üstteki düğmeden. Kod/terminal/VS Code çerçeveleri iki
   temada da koyu kalır (gerçek VS Code nasıl görünüyorsa öyle).
   ============================================================ */

:root{
  color-scheme: dark;
  --ust-y: 58px;
  --yan-g: 280px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --zemin: #0a0a11;
  --zemin-ust: rgba(10,10,17,.82);
  --zemin-yan: #0d0d15;
  --panel: #12121b;
  --panel-2: #181823;
  --cizgi: rgba(255,255,255,.085);
  --cizgi-2: rgba(255,255,255,.15);
  --yazi: #e9eaf3;
  --yazi-2: #b6b9cd;
  --yazi-3: #858aa3;

  --vurgu: #8f75ff;
  --vurgu-yazi: #b9a9ff;
  --vurgu-bg: rgba(143,117,255,.12);
  --vurgu-cizgi: rgba(143,117,255,.38);
  --vurgu-bg2: rgba(143,117,255,.18);

  --mavi: #62b0ff;   --mavi-bg: rgba(98,176,255,.08);   --mavi-cizgi: rgba(98,176,255,.28);   --mavi-bg2: rgba(98,176,255,.16);
  --yesil: #45d494;  --yesil-bg: rgba(69,212,148,.08);  --yesil-cizgi: rgba(69,212,148,.28);  --yesil-bg2: rgba(69,212,148,.16);
  --sari: #f4bd55;   --sari-bg: rgba(244,189,85,.08);   --sari-cizgi: rgba(244,189,85,.30);   --sari-bg2: rgba(244,189,85,.16);
  --kirmizi: #ff7474; --kirmizi-bg: rgba(255,116,116,.08); --kirmizi-cizgi: rgba(255,116,116,.32); --kirmizi-bg2: rgba(255,116,116,.16); --kirmizi-yazi: #ff9b9b;
  --mor: #d08cff;    --mor-bg: rgba(208,140,255,.08);   --mor-cizgi: rgba(208,140,255,.28);   --mor-bg2: rgba(208,140,255,.16);
  --pembe: #ff7eb6;
  --camgobegi: #3ad6ef; --camgobegi-bg: rgba(58,214,239,.08); --camgobegi-cizgi: rgba(58,214,239,.28);

  --ic-yazi: #d6ccff;
  --ic-bg: rgba(143,117,255,.13);
  --ic-cizgi: rgba(143,117,255,.22);

  --sv-kutu: #1b1b28;
  --sv-cizgi: #4a4c63;
  --sv-ok: #9a9db6;

  /* kod çerçeveleri: iki temada da koyu */
  --kod-bg: #101018;
  --kod-bas: #16161f;
  --kod-cizgi: #262634;
  --kod-yazi: #d4d4d4;
  --golge: 0 18px 50px -26px rgba(0,0,0,.75);
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --zemin: #f7f7fb; --zemin-ust: rgba(247,247,251,.86); --zemin-yan: #f1f1f7;
    --panel: #ffffff; --panel-2: #f2f2f8;
    --cizgi: rgba(20,20,50,.10); --cizgi-2: rgba(20,20,50,.18);
    --yazi: #16161f; --yazi-2: #44485c; --yazi-3: #6b6f86;
    --vurgu: #6a4cf0; --vurgu-yazi: #5536d9; --vurgu-bg: rgba(106,76,240,.08); --vurgu-cizgi: rgba(106,76,240,.32); --vurgu-bg2: rgba(106,76,240,.13);
    --mavi: #1f6fd1; --mavi-bg: rgba(31,111,209,.06); --mavi-cizgi: rgba(31,111,209,.25); --mavi-bg2: rgba(31,111,209,.12);
    --yesil: #12855a; --yesil-bg: rgba(18,133,90,.06); --yesil-cizgi: rgba(18,133,90,.26); --yesil-bg2: rgba(18,133,90,.12);
    --sari: #a8650a; --sari-bg: rgba(214,138,20,.08); --sari-cizgi: rgba(214,138,20,.32); --sari-bg2: rgba(214,138,20,.14);
    --kirmizi: #cc2f3a; --kirmizi-bg: rgba(204,47,58,.06); --kirmizi-cizgi: rgba(204,47,58,.28); --kirmizi-bg2: rgba(204,47,58,.11); --kirmizi-yazi: #b4232e;
    --mor: #9a3fd6; --mor-bg: rgba(154,63,214,.06); --mor-cizgi: rgba(154,63,214,.26); --mor-bg2: rgba(154,63,214,.12);
    --pembe: #c42c78;
    --camgobegi: #0e7f93; --camgobegi-bg: rgba(14,127,147,.06); --camgobegi-cizgi: rgba(14,127,147,.26);
    --ic-yazi: #4b2fc4; --ic-bg: rgba(106,76,240,.08); --ic-cizgi: rgba(106,76,240,.18);
    --sv-kutu: #ffffff; --sv-cizgi: #9a9db3; --sv-ok: #5f6379;
    --golge: 0 18px 44px -26px rgba(20,20,60,.35);
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --zemin: #f7f7fb; --zemin-ust: rgba(247,247,251,.86); --zemin-yan: #f1f1f7;
  --panel: #ffffff; --panel-2: #f2f2f8;
  --cizgi: rgba(20,20,50,.10); --cizgi-2: rgba(20,20,50,.18);
  --yazi: #16161f; --yazi-2: #44485c; --yazi-3: #6b6f86;
  --vurgu: #6a4cf0; --vurgu-yazi: #5536d9; --vurgu-bg: rgba(106,76,240,.08); --vurgu-cizgi: rgba(106,76,240,.32); --vurgu-bg2: rgba(106,76,240,.13);
  --mavi: #1f6fd1; --mavi-bg: rgba(31,111,209,.06); --mavi-cizgi: rgba(31,111,209,.25); --mavi-bg2: rgba(31,111,209,.12);
  --yesil: #12855a; --yesil-bg: rgba(18,133,90,.06); --yesil-cizgi: rgba(18,133,90,.26); --yesil-bg2: rgba(18,133,90,.12);
  --sari: #a8650a; --sari-bg: rgba(214,138,20,.08); --sari-cizgi: rgba(214,138,20,.32); --sari-bg2: rgba(214,138,20,.14);
  --kirmizi: #cc2f3a; --kirmizi-bg: rgba(204,47,58,.06); --kirmizi-cizgi: rgba(204,47,58,.28); --kirmizi-bg2: rgba(204,47,58,.11); --kirmizi-yazi: #b4232e;
  --mor: #9a3fd6; --mor-bg: rgba(154,63,214,.06); --mor-cizgi: rgba(154,63,214,.26); --mor-bg2: rgba(154,63,214,.12);
  --pembe: #c42c78;
  --camgobegi: #0e7f93; --camgobegi-bg: rgba(14,127,147,.06); --camgobegi-cizgi: rgba(14,127,147,.26);
  --ic-yazi: #4b2fc4; --ic-bg: rgba(106,76,240,.08); --ic-cizgi: rgba(106,76,240,.18);
  --sv-kutu: #ffffff; --sv-cizgi: #9a9db3; --sv-ok: #5f6379;
  --golge: 0 18px 44px -26px rgba(20,20,60,.35);
}

/* ---------------- temel ---------------- */
*, *::before, *::after{ box-sizing:border-box }
[hidden]{ display:none !important }
/* Kod yazı tipinde bitişik harfler KAPALI: JetBrains Mono `===`'i ≡, `<=`'i ≤, `=>`'i ⇒ gibi çiziyor;
   işaretleri tek tek yazmayı öğrenen okur için yanıltıcı. */
code, pre, kbd, samp, .ic, .kod-ic, .vsc-kod, .vsc-term, .term-ic, .sn, .terim-en, .ara input,
svg.sv text, .sv tspan{
  font-variant-ligatures:none; font-feature-settings:"liga" 0, "calt" 0, "dlig" 0;
}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--ust-y) + 16px) }
body{
  margin:0; min-height:100vh; background:var(--zemin); color:var(--yazi);
  font-family:var(--font); font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img, svg{ max-width:100% }
a{ color:var(--vurgu-yazi); text-underline-offset:3px; text-decoration-thickness:1px }
a:hover{ text-decoration-thickness:2px }
:focus-visible{ outline:2px solid var(--vurgu); outline-offset:2px; border-radius:6px }
button{ font:inherit; color:inherit }
.atla{ position:absolute; left:12px; top:-60px; z-index:100; padding:8px 14px; border-radius:8px; background:var(--vurgu); color:#fff; font-weight:700; text-decoration:none }
.atla:focus{ top:10px }
.ikon{ flex:none; vertical-align:-3px }
.tanimlar{ position:absolute; width:0; height:0; overflow:hidden }
hr{ border:0; border-top:1px solid var(--cizgi); margin:2.4em 0 }
::selection{ background:rgba(143,117,255,.35) }

/* ---------------- üst çubuk ---------------- */
.ust{
  position:sticky; top:0; z-index:70; height:var(--ust-y);
  display:flex; align-items:center; gap:12px; padding:0 20px;
  background:var(--zemin-ust); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--cizgi);
}
.marka{ display:flex; align-items:center; gap:8px; color:var(--yazi); text-decoration:none; font-weight:800; letter-spacing:.02em; font-size:.95rem }
.marka b{ color:var(--vurgu-yazi); font-weight:800 }
.marka img{ display:block }
.ayrac{ color:var(--yazi-3) }
.kurs-ad{ color:var(--yazi); text-decoration:none; font-weight:700; font-size:.95rem; white-space:nowrap }
.ust-sag{ margin-left:auto; display:flex; align-items:center; gap:6px }
.ust-link{ padding:6px 10px; border-radius:8px; color:var(--yazi-2); text-decoration:none; font-size:.88rem; font-weight:600 }
.ust-link:hover{ background:var(--panel-2); color:var(--yazi) }
.ilerleme{ display:flex; align-items:center; gap:8px; padding:5px 10px; margin-left:4px; border:1px solid var(--cizgi); border-radius:999px; color:var(--yazi-2); font-size:.8rem; text-decoration:none; font-variant-numeric:tabular-nums }
.ilerleme b{ color:var(--yazi) }
.ilerleme-cubuk{ position:relative; display:inline-block; width:54px; height:6px; border-radius:99px; background:var(--cizgi-2); overflow:hidden }
.ilerleme-cubuk i{ position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg, var(--vurgu), var(--yesil)); border-radius:inherit; transition:width .4s }
.tema-dugme{ display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--cizgi); border-radius:10px; background:transparent; cursor:pointer; color:var(--yazi-2) }
.tema-dugme:hover{ color:var(--yazi); background:var(--panel-2) }
.tema-dugme .ay{ display:none }
:root[data-theme="light"] .tema-dugme .ay{ display:block }
:root[data-theme="light"] .tema-dugme .gunes{ display:none }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .tema-dugme .ay{ display:block }
  :root:not([data-theme="dark"]) .tema-dugme .gunes{ display:none }
}
.menu-dugme{ display:none; width:38px; height:38px; margin-left:-6px; border:0; background:transparent; border-radius:10px; cursor:pointer; padding:10px 9px; flex-direction:column; justify-content:space-between }
.menu-dugme span{ display:block; height:2px; border-radius:2px; background:var(--yazi) }

/* ---------------- düzen ---------------- */
.duzen{
  display:grid; grid-template-columns:var(--yan-g) minmax(0,1fr);
  gap:0 clamp(28px, 4vw, 56px); max-width:1480px; margin:0 auto; padding:0 24px;
}
.duzen.ucl{ grid-template-columns:var(--yan-g) minmax(0,1fr) 220px }
.ana{ min-width:0; width:100%; max-width:800px; justify-self:center; padding:26px 0 80px; outline:none }
.perde{ display:none }

/* ---------------- yan menü ---------------- */
.yan{
  position:sticky; top:var(--ust-y); height:calc(100vh - var(--ust-y)); overflow:auto;
  padding:20px 6px 48px 0; scrollbar-width:thin; scrollbar-color:var(--cizgi-2) transparent; font-size:.9rem;
}
.yan-bas, .yan-alt{ margin:0 0 6px }
.yan-alt{ margin-top:14px; padding-top:12px; border-top:1px solid var(--cizgi) }
.yan-bas a, .yan-alt a{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px; color:var(--yazi-2); text-decoration:none; font-weight:600 }
.yan-bas a:hover, .yan-alt a:hover{ background:var(--panel-2); color:var(--yazi) }
.yblok{ margin:4px 0 }
.yblok > summary{ list-style:none; cursor:pointer; display:flex; flex-direction:column; gap:1px; padding:8px 10px; border-radius:9px; position:relative }
.yblok > summary::-webkit-details-marker{ display:none }
.yblok > summary::after{ content:''; position:absolute; right:12px; top:50%; width:7px; height:7px; margin-top:-5px; border-right:2px solid var(--yazi-3); border-bottom:2px solid var(--yazi-3); transform:rotate(-45deg); transition:transform .15s }
.yblok[open] > summary::after{ transform:rotate(45deg) }
.yblok > summary:hover{ background:var(--panel-2) }
.yblok-no{ font-size:.66rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--yazi-3) }
.yblok-ad{ font-weight:700; color:var(--yazi); padding-right:18px; line-height:1.35 }
.yblok ol{ list-style:none; margin:2px 0 10px; padding:0 0 0 4px }
.yblok a{ display:flex; gap:10px; align-items:flex-start; padding:6px 10px; border-radius:9px; color:var(--yazi-2); text-decoration:none; line-height:1.35 }
.yblok a:hover{ background:var(--panel-2); color:var(--yazi) }
.yblok a[aria-current="page"]{ background:var(--vurgu-bg); color:var(--yazi); font-weight:600 }
.yno{ flex:none; display:grid; place-items:center; width:24px; height:24px; margin-top:-1px; border-radius:50%; border:1px solid var(--cizgi-2); color:var(--yazi-3); font-size:.7rem; font-weight:700; font-variant-numeric:tabular-nums }
.yblok a[aria-current="page"] .yno{ border-color:var(--vurgu); color:var(--vurgu-yazi) }
.yblok a.bitti .yno{ background:var(--yesil); border-color:var(--yesil); color:transparent; position:relative }
.yblok a.bitti .yno::after{ content:''; position:absolute; left:8px; top:5px; width:5px; height:9px; border:solid #071a10; border-width:0 2px 2px 0; transform:rotate(45deg) }
.yblok a.yakinda{ opacity:.55 }

/* ---------------- sağ içindekiler ---------------- */
.sag{ position:sticky; top:calc(var(--ust-y) + 8px); align-self:start; max-height:calc(100vh - var(--ust-y) - 16px); overflow:auto; padding:30px 0 30px; scrollbar-width:thin }
.toc-bas{ margin:0 0 10px; font-size:.7rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--yazi-3) }
.toc ol, .toc-mobil ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--cizgi) }
.toc a, .toc-mobil a{ display:block; margin-left:-1px; padding:5px 0 5px 14px; border-left:2px solid transparent; color:var(--yazi-3); text-decoration:none; font-size:.84rem; line-height:1.4 }
.toc a:hover, .toc-mobil a:hover{ color:var(--yazi) }
.toc a.aktif{ color:var(--vurgu-yazi); border-left-color:var(--vurgu) }
.toc-mobil{ display:none; margin:0 0 26px; border:1px solid var(--cizgi); border-radius:12px; background:var(--panel) }
.toc-mobil > summary{ cursor:pointer; padding:10px 16px; font-weight:700; font-size:.92rem }
.toc-mobil ol{ margin:0 16px 14px }

/* ---------------- ders başı ---------------- */
.kirinti{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 14px; font-size:.84rem; color:var(--yazi-3) }
.kirinti a{ color:var(--yazi-3); text-decoration:none }
.kirinti a:hover{ color:var(--yazi); text-decoration:underline }
.ders-bas{ margin:0 0 24px }
.ust-baslik{ margin:0 0 8px; font-size:.76rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--vurgu-yazi) }
.ders-bas h1, .hero h1{ margin:0 0 .35em; font-size:clamp(1.9rem, 1.25rem + 2.4vw, 2.75rem); line-height:1.13; letter-spacing:-.022em; font-weight:800 }
.giris{ margin:0 0 16px; font-size:1.16rem; line-height:1.6; color:var(--yazi-2) }
.ders-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none }
.ders-meta li{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border:1px solid var(--cizgi); border-radius:999px; background:var(--panel); color:var(--yazi-2); font-size:.85rem; line-height:1.4 }
.ders-meta a{ color:var(--yazi) }
.ders-meta .proje-rozet{ border-color:var(--vurgu-cizgi); color:var(--vurgu-yazi) }
.hedefler{ margin:0 0 30px; padding:16px 20px 8px; border:1px solid var(--cizgi); border-radius:14px; background:var(--panel) }
.hedef-bas{ display:flex; align-items:center; gap:8px; margin:0 0 6px; font-weight:700; color:var(--vurgu-yazi) }
.hedefler ul{ margin:0 0 8px; padding-left:1.3em }
.hedefler li{ margin:.25em 0; padding-left:.2em }
.hedefler li::marker{ content:'✓  '; color:var(--yesil); font-weight:700 }

/* ---------------- metin ---------------- */
.ders-govde > :first-child{ margin-top:0 }
.ders-govde p, .kutu-ic p, .ac-ic p, .gorev-ic p, .soru-ic p, .hata-ic p{ margin:0 0 1em }
.ders-govde h2, .ders-govde h3, .ders-govde h4{ position:relative; scroll-margin-top:calc(var(--ust-y) + 16px) }
.ders-govde h2{ margin:2.5em 0 .7em; padding-top:1em; border-top:1px solid var(--cizgi); font-size:1.62rem; line-height:1.25; letter-spacing:-.015em; font-weight:800 }
.ders-govde h3{ margin:1.9em 0 .55em; font-size:1.24rem; line-height:1.3; font-weight:750 }
.ders-govde h4{ margin:1.6em 0 .4em; font-size:1.05rem; font-weight:700 }
.capa{ position:absolute; left:-1.15em; width:1em; color:var(--yazi-3); text-decoration:none; opacity:0; font-weight:600 }
h2:hover > .capa, h3:hover > .capa, h4:hover > .capa{ opacity:1 }
.ders-govde ul, .ders-govde ol{ margin:0 0 1.1em; padding-left:1.45em }
.ders-govde li{ margin:.35em 0; padding-left:.15em }
.ders-govde li::marker{ color:var(--yazi-3) }
.ders-govde li > ul, .ders-govde li > ol{ margin:.3em 0 .4em }
strong{ font-weight:700; color:var(--yazi) }
blockquote{ margin:1.4em 0; padding:4px 0 4px 18px; border-left:3px solid var(--cizgi-2); color:var(--yazi-2) }
code.ic{
  font-family:var(--mono); font-size:.86em; padding:.12em .38em; border-radius:6px;
  background:var(--ic-bg); border:1px solid var(--ic-cizgi); color:var(--ic-yazi); white-space:break-spaces; word-break:break-word;
}
kbd{
  display:inline-block; min-width:1.6em; padding:.08em .45em; text-align:center; font-family:var(--mono); font-size:.8em; line-height:1.5;
  color:var(--yazi); background:var(--panel-2); border:1px solid var(--cizgi-2); border-bottom-width:3px; border-radius:7px; white-space:nowrap;
}
mark{ background:rgba(244,189,85,.28); color:inherit; border-radius:4px; padding:0 .15em }
.tablo{ margin:1.4em 0; overflow-x:auto; border:1px solid var(--cizgi); border-radius:12px }
.tablo table{ width:100%; border-collapse:collapse; font-size:.93rem; line-height:1.55 }
.tablo th, .tablo td{ padding:10px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--cizgi) }
.tablo th{ background:var(--panel-2); font-weight:700; white-space:nowrap }
.tablo tr:last-child td{ border-bottom:0 }
.tablo td code.ic{ white-space:nowrap }
.tablo th code.ic{ white-space:nowrap; word-break:normal }

/* ---------------- kod blokları (iki temada da koyu) ---------------- */
figure{ margin:0 }
.kod, .cikti, .term, .vsc, .tarayici{ margin:1.4em 0 }
.kod{ background:var(--kod-bg); border:1px solid var(--kod-cizgi); border-radius:12px; overflow:hidden; box-shadow:var(--golge) }
.kod-bas{ display:flex; align-items:center; gap:10px; min-height:36px; padding:6px 12px; background:var(--kod-bas); border-bottom:1px solid var(--kod-cizgi); font-size:.8rem; color:#9ea2b8; line-height:1.4 }
.kod-dosya{ display:inline-flex; align-items:center; gap:7px; color:#e8e8f0; font-family:var(--mono); font-size:.8rem }
.kod-baslik{ color:#c9cbe0 }
.kod-baslik code.ic{ background:transparent; border:0; padding:0; color:#e8e8f0 }
.kod-dil{ font-weight:600; letter-spacing:.02em }
.kod-rozet{ margin-left:auto; padding:2px 9px; border-radius:999px; font-weight:700; font-size:.75rem; white-space:nowrap }
.kod-rozet.yanlis{ color:#ff9a9a; background:rgba(255,107,107,.14) }
.kod-rozet.dogru{ color:#6fe7ab; background:rgba(63,207,142,.14) }
.k-yanlis{ border-color:rgba(255,107,107,.5) }
.k-dogru{ border-color:rgba(63,207,142,.45) }
.kopyala{ margin-left:auto; padding:3px 10px; border:1px solid #33344a; border-radius:7px; background:#1d1d29; color:#c9cbe0; font-size:.75rem; font-weight:600; cursor:pointer }
.kopyala:hover{ background:#26263a; color:#fff }
.kod-rozet + .kopyala{ margin-left:8px }
.kod-ic{ margin:0; padding:12px 0; overflow-x:auto; font-family:var(--mono); font-size:.875rem; line-height:1.68; color:var(--kod-yazi); tab-size:4; scrollbar-width:thin; scrollbar-color:#3a3a4c transparent }
.kod-ic code, .term-ic code, .vsc-kod code, .vsc-term code{ display:block; min-width:max-content; font-family:inherit }
.sk{ display:block; padding:0 18px }
.sk.vurgu{ background:rgba(143,117,255,.17); box-shadow:inset 3px 0 0 #8f75ff }
.sk.dalga .sc{ text-decoration:underline wavy #f14c4c; text-decoration-skip-ink:none; text-underline-offset:4px }
.sk.adim{ background:rgba(255,204,0,.16); box-shadow:inset 3px 0 0 #ffcc00 }
.sk.kirma .sn, .sk.adim .sn{ position:relative }
.sk.kirma .sn::before{ content:''; position:absolute; left:-2px; top:50%; width:9px; height:9px; margin-top:-5px; border-radius:50%; background:#e51400 }
.sk.adim .sn::after{ content:''; position:absolute; left:-4px; top:50%; margin-top:-6px; border:6px solid transparent; border-left:8px solid #ffcc00 }
.sn{ display:inline-block; width:2.1em; margin-right:16px; text-align:right; color:#5d6175; user-select:none; -webkit-user-select:none }
.dik{ display:inline-grid; place-items:center; min-width:20px; height:16px; padding:0 3px; border-radius:4px; font-style:normal; font-family:var(--font); font-size:.6rem; font-weight:800; letter-spacing:.02em; line-height:1 }
.dik-js{ background:#f1dd35; color:#1b1b1b }
.dik-ts{ background:#3178c6; color:#fff }
.dik-html{ background:#e44d26; color:#fff }
.dik-css{ background:#2965f1; color:#fff }
.dik-json{ background:#cbcb41; color:#1b1b1b }
.dik-md{ background:#6d8086; color:#fff }
.dik-sql{ background:#e38c00; color:#fff }
.dik-env, .dik-genel{ background:#5a5d72; color:#fff }

/* sözdizimi renkleri (VS Code Dark Modern'e yakın) */
.h-k{ color:#569cd6 } .h-k2{ color:#c586c0 } .h-s{ color:#ce9178 } .h-n{ color:#b5cea8 }
.h-c{ color:#6a9955; font-style:italic } .h-f{ color:#dcdcaa } .h-p, .h-v, .h-at{ color:#9cdcfe }
.h-t{ color:#4ec9b0 } .h-l{ color:#569cd6 } .h-o{ color:#d4d4d4 } .h-tg{ color:#569cd6 }
.h-sl{ color:#d7ba7d } .h-ip{ color:#569cd6 } .h-x{ color:#d4d4d4 }

/* çıktı ve hata çıktısı */
.cikti{ background:#0b0b10; border:1px solid var(--kod-cizgi); border-radius:12px; overflow:hidden; box-shadow:var(--golge) }
.cikti-bas{ display:flex; align-items:center; gap:8px; padding:6px 14px; background:#111118; border-bottom:1px solid var(--kod-cizgi); color:#8f93aa; font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase }
.cikti .kod-ic{ color:#ececf2 }
.cikti-not{ margin-left:auto; font-weight:500; letter-spacing:0; text-transform:none; font-size:.75rem }
.cikti.hata{ border-color:rgba(255,107,107,.48) }
.cikti.hata .cikti-bas{ color:#ff9393; background:rgba(255,80,80,.09) }
.he .sc{ color:#ff7b7b; font-weight:600 }
.hc .sc{ color:#ff7b7b }
.hs .sc{ color:#6b6f84 }
.hp .sc{ color:#a8adc9 }

/* terminal (Windows Terminal + PowerShell görünümü) */
.term{ background:#0c0c0c; border:1px solid #2c2c2c; border-radius:10px; overflow:hidden; box-shadow:var(--golge) }
.term-bar{ display:flex; align-items:center; gap:10px; height:36px; padding:0 0 0 8px; background:#202020; border-bottom:1px solid #2c2c2c }
.term-sekme{ display:inline-flex; align-items:center; gap:8px; height:28px; margin-top:8px; padding:0 14px 0 10px; border-radius:8px 8px 0 0; background:#0c0c0c; color:#e6e6e6; font-size:.76rem; font-family:var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.term-bar .kopyala{ margin-left:auto; border-color:#3a3a3a; background:#2a2a2a }
.term-bar .kopyala + .pencere{ margin-left:6px }
.term-ic{ margin:0; padding:12px 0 14px; overflow-x:auto; font-family:'Cascadia Mono', var(--mono); font-size:.86rem; line-height:1.6; color:#cccccc; scrollbar-width:thin; scrollbar-color:#3a3a3a transparent }
.term-ic .sk{ padding:0 16px }
.istem{ color:#cccccc }
.komut .sc{ color:#f2f2f2 }
.term .h-f, .vsc-term .h-f{ color:#f9f1a5 }
.term .h-at, .vsc-term .h-at{ color:#a5a5a5 }
.term .h-s, .vsc-term .h-s{ color:#61b4ff }
.term .h-v, .vsc-term .h-v{ color:#61d6d6 }
.term .h-x, .vsc-term .h-x{ color:#ececec }
.term .h-o, .vsc-term .h-o{ color:#cccccc }
.term .he .sc, .vsc-term .he .sc{ color:#f14c4c; font-weight:500 }
.tnot .sc{ color:#6a9955; font-style:italic }
.pencere{ display:flex; align-self:stretch; margin-left:auto; flex:none }
.pencere i{ position:relative; display:block; width:40px; height:100% }
.pencere .p-alt::before{ content:''; position:absolute; left:15px; top:50%; width:10px; height:1px; background:#bdbdbd }
.pencere .p-kare::before{ content:''; position:absolute; left:15px; top:50%; width:9px; height:9px; margin-top:-5px; border:1px solid #bdbdbd }
.pencere .p-kapat::before, .pencere .p-kapat::after{ content:''; position:absolute; left:14px; top:50%; width:12px; height:1px; background:#bdbdbd; transform:rotate(45deg) }
.pencere .p-kapat::after{ transform:rotate(-45deg) }
.ps-ikon{ flex:none }

/* VS Code penceresi (Dark Modern) */
.vsc{ border:1px solid #2b2b2b; border-radius:10px; overflow:hidden; background:#1f1f1f; color:#cccccc; font-family:var(--font); box-shadow:var(--golge); line-height:1.5 }
.vsc-bar{ display:flex; align-items:center; gap:10px; height:34px; padding:0 0 0 10px; background:#181818; border-bottom:1px solid #2b2b2b; font-size:.74rem; color:#9d9d9d }
.vsc-logo{ flex:none }
.vsc-menu{ white-space:nowrap; color:#cccccc; font-size:.72rem }
.vsc-baslik{ flex:1; min-width:0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.vsc-bar .pencere{ margin-left:0 }
.vsc-govde{ display:grid; grid-template-columns:46px 170px minmax(0,1fr); min-height:180px }
.vsc.gezginsiz .vsc-govde{ grid-template-columns:46px minmax(0,1fr) }
.vsc-akt{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:12px 0; background:#181818; border-right:1px solid #2b2b2b; color:#868686 }
.vsc-akt svg.on{ color:#d7d7d7 }
.vsc-gezgin{ padding:8px 0; background:#181818; border-right:1px solid #2b2b2b; font-size:.78rem; color:#cccccc; min-width:0 }
.vsc-gz-bas{ margin:0; padding:2px 16px 8px; font-size:.66rem; letter-spacing:.08em; color:#9d9d9d }
.vsc-gz-klasor{ margin:0; padding:2px 10px; font-size:.7rem; font-weight:700; letter-spacing:.03em }
.vsc-gezgin ul{ list-style:none; margin:2px 0 0; padding:0 }
.vsc-gezgin li{ display:flex; align-items:center; gap:7px; padding:2px 10px 2px 24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.vsc-gezgin li.on{ background:#37373d; color:#fff; box-shadow:inset 0 0 0 1px #0078d4 }
.vsc-ana{ display:flex; flex-direction:column; min-width:0 }
.vsc-sekmeler{ display:flex; height:35px; background:#181818; border-bottom:1px solid #2b2b2b; overflow:hidden }
.vsc-sekme{ display:flex; align-items:center; gap:7px; padding:0 16px; color:#9d9d9d; font-size:.78rem; border-right:1px solid #2b2b2b; white-space:nowrap }
.vsc-sekme.on{ background:#1f1f1f; color:#fff; box-shadow:inset 0 1px 0 #0078d4; margin-bottom:-1px }
.vsc-nokta{ color:#e6e6e6; font-size:.62rem; margin-left:2px }
.vsc-kod{ flex:1; margin:0; padding:8px 0 16px; overflow-x:auto; font-family:var(--mono); font-size:.84rem; line-height:1.62; color:#cccccc; scrollbar-width:thin; scrollbar-color:#3a3a3a transparent }
.vsc-kod .sk{ padding:0 14px 0 6px }
.vsc-kod .sn{ color:#6e7681; width:2.3em; margin-right:20px }
.vsc-panel{ border-top:1px solid #2b2b2b; background:#181818 }
.vsc-psek{ display:flex; gap:20px; padding:8px 16px 0; font-size:.66rem; letter-spacing:.05em; color:#9d9d9d; white-space:nowrap; overflow:hidden }
.vsc-psek span.on{ color:#e7e7e7; padding-bottom:5px; border-bottom:1px solid #e7e7e7 }
.vsc-term{ margin:0; padding:10px 0 14px; max-height:300px; overflow:auto; font-family:'Cascadia Mono', var(--mono); font-size:.82rem; line-height:1.55; color:#cccccc }
.vsc-term .sk{ padding:0 16px }
.vsc-durum{ display:flex; align-items:center; gap:16px; height:24px; padding:0 12px; background:#181818; border-top:1px solid #2b2b2b; color:#9d9d9d; font-size:.7rem; white-space:nowrap; overflow:hidden }
.vsc-durum .sag{ margin-left:auto }
.vsc > figcaption{ padding:12px 16px 2px; background:var(--panel); border-top:1px solid var(--cizgi); color:var(--yazi-2); font-size:.92rem; line-height:1.6 }
.vsc > figcaption p{ margin:0 0 10px }

/* tarayıcı penceresi */
.tarayici{ border:1px solid var(--cizgi-2); border-radius:10px; overflow:hidden; background:#ffffff; box-shadow:var(--golge) }
.tr-bar{ display:flex; align-items:center; gap:10px; height:40px; padding:0 0 0 10px; background:#202124 }
.tr-gezinme{ display:flex; gap:10px; color:#9aa0a6 }
.tr-adres{ flex:1; min-width:0; display:flex; align-items:center; gap:7px; height:28px; padding:0 12px; border-radius:999px; background:#35363a; color:#e8eaed; font-size:.8rem; white-space:nowrap; overflow:hidden }
.tr-adres span{ overflow:hidden; text-overflow:ellipsis }
.tr-adres .ikon{ width:13px; height:13px; color:#9aa0a6 }
.tr-ic{ background:#ffffff; color:#111111 }
.onizleme{ display:block; width:100%; border:0; background:#ffffff }
.tr-sayfa{ padding:18px 20px; font-size:.95rem; line-height:1.6; color:#111 }
.tr-sayfa p{ margin:0 0 .8em }
.tarayici > figcaption{ padding:10px 16px; background:var(--panel); border-top:1px solid var(--cizgi); color:var(--yazi-2); font-size:.9rem }

/* ---------------- kutular ---------------- */
.kutu{ margin:1.5em 0; padding:14px 18px 6px; border:1px solid var(--k-cizgi); border-left:4px solid var(--k-renk); border-radius:12px; background:var(--k-bg) }
.kutu-bas{ display:flex; align-items:center; gap:9px; margin:0 0 .45em; color:var(--k-renk); font-weight:750; font-size:.96rem; line-height:1.4 }
.kutu-ic > :last-child{ margin-bottom:10px }
.kutu-ic > .kod, .kutu-ic > .cikti, .kutu-ic > .term{ margin:.8em 0 }
.k-bilgi{ --k-renk:var(--mavi); --k-bg:var(--mavi-bg); --k-cizgi:var(--mavi-cizgi) }
.k-ipucu{ --k-renk:var(--yesil); --k-bg:var(--yesil-bg); --k-cizgi:var(--yesil-cizgi) }
.k-dikkat{ --k-renk:var(--sari); --k-bg:var(--sari-bg); --k-cizgi:var(--sari-cizgi) }
.k-benzetme{ --k-renk:var(--mor); --k-bg:var(--mor-bg); --k-cizgi:var(--mor-cizgi) }
.k-not, .k-hatirla{ --k-renk:var(--yazi-2); --k-bg:var(--panel); --k-cizgi:var(--cizgi) }
.k-ozet{ --k-renk:var(--vurgu-yazi); --k-bg:var(--vurgu-bg); --k-cizgi:var(--vurgu-cizgi) }
.k-terim{ --k-renk:var(--camgobegi); --k-bg:var(--camgobegi-bg); --k-cizgi:var(--camgobegi-cizgi) }
.k-isinma{ --k-renk:var(--sari); --k-bg:var(--panel); --k-cizgi:var(--sari-cizgi) }
.k-commit{ --k-renk:#f0703a; --k-bg:rgba(240,112,58,.07); --k-cizgi:rgba(240,112,58,.3) }
.k-terim .kutu-bas{ flex-wrap:wrap; gap:4px 10px }
.terim-ad{ color:var(--yazi); font-size:1.02rem }
.terim-en{ font-family:var(--mono); font-size:.86rem; font-weight:600; color:var(--camgobegi) }
.terim-ok{ font-size:.8rem; font-weight:500; color:var(--yazi-3); font-style:italic }

/* hata kartı */
.hata-kart{ margin:1.6em 0; border:1px solid var(--kirmizi-cizgi); border-radius:12px; overflow:hidden; background:var(--panel) }
.hata-bas{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:11px 16px; background:var(--kirmizi-bg); border-bottom:1px solid var(--kirmizi-cizgi); color:var(--kirmizi) }
.hata-etiket{ font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase }
.hata-ad{ flex-basis:100%; font-weight:700; color:var(--yazi); line-height:1.45 }
.hata-ad code.ic{ background:transparent; border:0; padding:0; color:var(--kirmizi-yazi); font-size:.93em }
.hata-ic{ padding:14px 16px 4px }
.hata-ic > :last-child{ margin-bottom:12px }

/* görev */
.gorev{ margin:2em 0; padding:14px 18px 8px; border:1px solid var(--vurgu-cizgi); border-radius:14px; background:linear-gradient(180deg, var(--vurgu-bg), transparent 120px), var(--panel) }
.gorev-bas{ display:flex; align-items:center; gap:10px }
.gorev-no{ display:inline-flex; align-items:center; gap:7px; font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--vurgu-yazi) }
.zorluk{ display:inline-flex; gap:4px; margin-left:auto }
.zorluk i{ width:8px; height:8px; border-radius:50%; background:var(--cizgi-2) }
.zorluk i.dolu{ background:var(--vurgu) }
.ders-govde .gorev-ad{ margin:.35em 0 .55em; padding:0; border:0; font-size:1.16rem; line-height:1.35 }
.gorev-ic > :last-child{ margin-bottom:10px }

/* açılır (ipucu / çözüm / cevap) */
.ac{ margin:.7em 0; border:1px solid var(--cizgi); border-radius:10px; background:var(--panel-2) }
.ac > summary{ display:flex; align-items:center; gap:10px; padding:9px 14px; cursor:pointer; list-style:none; font-weight:650; font-size:.92rem; border-radius:10px }
.ac > summary::-webkit-details-marker{ display:none }
.ac > summary::before{ content:''; flex:none; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .15s }
.ac[open] > summary::before{ transform:rotate(45deg) }
.ac > summary:hover{ background:var(--panel) }
.ac-ic{ padding:12px 14px 2px; border-top:1px solid var(--cizgi) }
.ac-ic > :last-child{ margin-bottom:10px }
.ipucu-ac > summary{ color:var(--sari) }
.cozum-ac > summary{ color:var(--yesil) }
.cevap-ac > summary{ color:var(--mavi) }

/* soru */
.soru{ margin:1.2em 0; padding:12px 16px 4px; border:1px solid var(--cizgi); border-radius:12px; background:var(--panel) }
.soru-no{ display:flex; align-items:center; gap:7px; margin:0 0 .35em !important; color:var(--pembe); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase }
.soru-ad{ margin:0 0 .5em !important; font-weight:650 }
.soru-ic > :last-child{ margin-bottom:10px }

/* şekil ve SVG çizim takımı */
.sekil{ margin:1.8em 0; padding:18px 16px 14px; border:1px solid var(--cizgi); border-radius:14px; background:var(--panel) }
.sekil-ic{ overflow-x:auto; scrollbar-width:thin }
.ders-govde > .sekil-ic{ margin:1.6em 0 }
.sekil figcaption{ margin-top:12px; color:var(--yazi-2); font-size:.88rem; line-height:1.55; text-align:center }
.sekil figcaption b{ color:var(--yazi) }
svg.sv{ display:block; width:100%; height:auto; min-width:var(--sv-min, 460px); max-width:var(--sv-maks, 680px); margin:0 auto; font-family:var(--font); overflow:visible }
.sv text{ fill:var(--yazi); font-size:15px; font-family:var(--font) }
.sv .y-k{ font-size:13px; fill:var(--yazi-2) }
.sv .y-b{ font-size:17px; font-weight:700 }
.sv .y-kod{ font-family:var(--mono); font-size:14px }
.sv .y-v{ fill:var(--vurgu-yazi) } .sv .y-iyi{ fill:var(--yesil) } .sv .y-kotu{ fill:var(--kirmizi) }
.sv .y-sari{ fill:var(--sari) } .sv .y-mavi{ fill:var(--mavi) } .sv .y-mor{ fill:var(--mor) } .sv .y-soluk{ fill:var(--yazi-3) }
.sv .orta{ text-anchor:middle } .sv .sona{ text-anchor:end }
.sv .kalin{ font-weight:700 }
.sv .kutu-s{ fill:var(--sv-kutu); stroke:var(--sv-cizgi); stroke-width:1.5 }
.sv .zemin-s{ fill:var(--panel-2); stroke:none }
.sv .vurgu-s{ fill:var(--vurgu-bg2); stroke:var(--vurgu); stroke-width:1.5 }
.sv .iyi-s{ fill:var(--yesil-bg2); stroke:var(--yesil); stroke-width:1.5 }
.sv .kotu-s{ fill:var(--kirmizi-bg2); stroke:var(--kirmizi); stroke-width:1.5 }
.sv .uyari-s{ fill:var(--sari-bg2); stroke:var(--sari); stroke-width:1.5 }
.sv .bilgi-s{ fill:var(--mavi-bg2); stroke:var(--mavi); stroke-width:1.5 }
.sv .oyun-s{ fill:var(--mor-bg2); stroke:var(--mor); stroke-width:1.5 }
.sv .cizgi-s{ fill:none; stroke:var(--sv-cizgi); stroke-width:1.5 }
.sv .ok-s{ fill:none; stroke:var(--sv-ok); stroke-width:2; marker-end:url(#ok) }
.sv .ok-v{ fill:none; stroke:var(--vurgu); stroke-width:2; marker-end:url(#ok-v) }
.sv .ok-iyi{ fill:none; stroke:var(--yesil); stroke-width:2; marker-end:url(#ok-iyi) }
.sv .ok-kotu{ fill:none; stroke:var(--kirmizi); stroke-width:2; marker-end:url(#ok-kotu) }
.sv .kesik{ stroke-dasharray:6 5 }
.ucu{ fill:var(--sv-ok) } .ucu-v{ fill:var(--vurgu) } .ucu-iyi{ fill:var(--yesil) } .ucu-kotu{ fill:var(--kirmizi) }

/* karşılaştırma ve adımlar */
.karsilastir{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:14px; margin:1.4em 0 }
.karsilastir > *{ margin:0 !important; min-width:0 }
.adimlar > ol{ list-style:none; counter-reset:adim; margin:1.2em 0; padding:0 }
.adimlar > ol > li{ position:relative; counter-increment:adim; margin:0; padding:0 0 1.15em 3.2em; min-height:2.2em }
.adimlar > ol > li::before{ content:counter(adim); position:absolute; left:0; top:-.05em; display:grid; place-items:center; width:2.2em; height:2.2em; border-radius:50%; border:1px solid var(--vurgu-cizgi); background:var(--vurgu-bg); color:var(--vurgu-yazi); font-weight:800; font-size:.9rem }
.adimlar > ol > li::after{ content:''; position:absolute; left:calc(.99rem - 1px); top:2.3em; bottom:.2em; width:2px; background:var(--cizgi) }
.adimlar > ol > li:last-child::after{ display:none }
.adimlar > ol > li > .kod, .adimlar > ol > li > .term{ margin:.7em 0 }

/* ders sonu */
.bitti-kutu{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:52px 0 22px; padding:18px 20px; border:1px dashed var(--cizgi-2); border-radius:14px }
.bitti-etiket{ display:flex; align-items:center; gap:10px; font-weight:700; cursor:pointer }
.bitti-etiket input{ width:20px; height:20px; accent-color:var(--yesil); cursor:pointer }
.bitti-kutu small{ color:var(--yazi-3); font-size:.82rem }
.sayfalama{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px }
.sayfalama a{ display:flex; flex-direction:column; gap:3px; padding:14px 16px; border:1px solid var(--cizgi); border-radius:12px; background:var(--panel); color:var(--yazi); text-decoration:none; line-height:1.4 }
.sayfalama a:hover{ border-color:var(--vurgu-cizgi) }
.sayfalama .sonraki{ align-items:flex-end; text-align:right }
.sayfalama small{ display:inline-flex; align-items:center; gap:6px; color:var(--yazi-3); font-size:.78rem; font-weight:600 }
.sayfalama span{ font-weight:700 }
.yakinda-kutu{ margin:8px 0 30px; padding:20px 22px 10px; border:1px dashed var(--cizgi-2); border-radius:14px; background:var(--panel) }
.yakinda-bas{ display:flex; align-items:center; gap:8px; margin:0 0 6px; font-weight:800; color:var(--sari) }
.yakinda-kutu p{ margin:0 0 .8em }
.dugme{ display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:12px; border:1px solid var(--cizgi-2); background:var(--panel); color:var(--yazi); text-decoration:none; font-weight:700; line-height:1.3 }
.dugme:hover{ border-color:var(--vurgu-cizgi) }
.dugme.ana-dugme{ background:var(--vurgu); border-color:var(--vurgu); color:#fff }
.dugme.ana-dugme:hover{ filter:brightness(1.08) }

/* ---------------- ders haritası (/ders) ---------------- */
.hero{ padding:22px 0 10px }
.hero .giris{ max-width:640px; font-size:1.2rem }
.hero-dugmeler{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 26px }
.hero-sayilar{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none }
.hero-sayilar li{ display:flex; align-items:baseline; gap:7px; padding:9px 14px; border:1px solid var(--cizgi); border-radius:12px; background:var(--panel); color:var(--yazi-2); font-size:.9rem }
.hero-sayilar b{ color:var(--yazi); font-size:1.15rem; font-weight:800 }
.harita h2{ margin:2.2em 0 .8em; font-size:1.5rem; font-weight:800; letter-spacing:-.01em }
.nasil-liste{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap:12px; margin:0; padding:0; list-style:none; counter-reset:nasil }
.nasil-liste li{ counter-increment:nasil; position:relative; padding:16px 16px 6px; border:1px solid var(--cizgi); border-radius:14px; background:var(--panel); font-size:.93rem; line-height:1.6; color:var(--yazi-2) }
.nasil-liste li::before{ content:counter(nasil); display:grid; place-items:center; width:28px; height:28px; margin-bottom:8px; border-radius:9px; background:var(--vurgu-bg); color:var(--vurgu-yazi); font-weight:800; font-size:.85rem }
.nasil-liste p{ margin:0 0 .6em }
.nasil-ad{ color:var(--yazi); font-weight:700; font-size:1rem }
.yol{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none }
.yol li{ flex:1 1 150px; position:relative }
.yol a{ display:flex; flex-direction:column; gap:2px; height:100%; padding:14px 14px 12px; border:1px solid var(--cizgi); border-radius:14px; background:var(--panel); color:var(--yazi); text-decoration:none; line-height:1.35 }
.yol a:hover{ border-color:var(--vurgu-cizgi) }
.yol-no{ display:grid; place-items:center; width:30px; height:30px; margin-bottom:8px; border-radius:50%; background:linear-gradient(135deg, var(--vurgu), var(--mor)); color:#fff; font-weight:800; font-size:.85rem }
.yol-ad{ font-weight:700; font-size:.95rem }
.yol small{ color:var(--yazi-3); font-size:.8rem }
.bloklar{ display:grid; gap:18px; margin-top:34px }
.blok-kart{ border:1px solid var(--cizgi); border-radius:16px; background:var(--panel); overflow:hidden; scroll-margin-top:calc(var(--ust-y) + 16px) }
.blok-bas{ padding:18px 20px 12px; border-bottom:1px solid var(--cizgi); background:linear-gradient(180deg, var(--vurgu-bg), transparent) }
.blok-ust{ margin:0 0 2px; font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--vurgu-yazi) }
.harita .blok-bas h2{ margin:0 0 6px; font-size:1.3rem }
.blok-bas p{ margin:0 0 10px; color:var(--yazi-2); font-size:.94rem; line-height:1.6 }
.blok-ilerleme{ display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--yazi-3) }
.blok-ilerleme .ilerleme-cubuk{ width:120px }
.ders-listesi{ margin:0; padding:6px; list-style:none }
.ders-satir{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:start; padding:12px 14px; border-radius:11px; color:var(--yazi); text-decoration:none }
.ders-satir:hover{ background:var(--panel-2) }
.ds-no{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--cizgi-2); color:var(--yazi-2); font-weight:800; font-size:.8rem; font-variant-numeric:tabular-nums }
.ders-satir.bitti .ds-no{ background:var(--yesil); border-color:var(--yesil); color:#071a10 }
.ds-govde{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.ds-ad{ font-weight:700; line-height:1.4 }
.ds-proje{ font-style:normal; margin-left:6px; padding:1px 8px; border-radius:999px; background:var(--vurgu-bg); color:var(--vurgu-yazi); font-size:.72rem; font-weight:700; vertical-align:2px }
.ds-ozet{ color:var(--yazi-2); font-size:.9rem; line-height:1.55 }
.ds-sag{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; white-space:nowrap; font-size:.78rem; color:var(--yazi-3); padding-top:4px }
.ds-durum{ color:var(--sari); font-weight:600 }
.ders-satir.yakinda .ds-ad{ color:var(--yazi-2) }
.ekler{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:12px; margin-top:28px }
.ek-kart{ display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--cizgi); border-radius:14px; background:var(--panel); color:var(--yazi); text-decoration:none }
.ek-kart:hover{ border-color:var(--vurgu-cizgi) }
.ek-kart .ikon{ width:24px; height:24px; color:var(--vurgu-yazi); margin-top:2px }
.ek-kart b{ display:block; font-size:1.05rem }
.ek-kart small{ display:block; color:var(--yazi-2); font-size:.88rem; line-height:1.5 }

/* ---------------- sözlük ve hata rehberi ---------------- */
.ara{ display:flex; flex-direction:column; gap:6px; margin:6px 0 22px; font-weight:700; font-size:.88rem; color:var(--yazi-2) }
.ara input{ width:100%; padding:12px 14px; border:1px solid var(--cizgi-2); border-radius:12px; background:var(--panel); color:var(--yazi); font:inherit; font-weight:500; font-size:1rem }
.ara input:focus{ outline:2px solid var(--vurgu); outline-offset:1px }
.ara-yok{ color:var(--yazi-3) }
.harf{ margin:1.6em 0 .5em; font-size:1.3rem; font-weight:800; color:var(--vurgu-yazi) }
.terim-kart, .hata-ozet{ margin:0 0 12px; padding:14px 18px 6px; border:1px solid var(--cizgi); border-radius:12px; background:var(--panel) }
.terim-kart h3, .hata-ozet h3{ margin:0 0 4px; font-size:1.08rem; line-height:1.4 }
.terim-kart .terim-ok{ margin:0 0 6px }
.terim-ic p, .hata-ozet p{ margin:0 0 .7em; font-size:.95rem }
.terim-ic .kod, .terim-ic .cikti{ margin:.7em 0 }
.terim-kaynak{ font-size:.84rem }
.hata-grup h2{ margin:1.8em 0 .4em; font-size:1.3rem; font-weight:800 }
.hata-grup h2 small{ color:var(--yazi-3); font-weight:600; font-size:.85rem }
.grup-acik{ margin:0 0 14px; color:var(--yazi-2); font-size:.95rem }
.hata-ozet h3 code.ic{ background:transparent; border:0; padding:0; color:var(--kirmizi-yazi) }
[data-ara-gizli]{ display:none !important }

/* ---------------- alt bilgi ---------------- */
.alt{ max-width:1480px; margin:0 auto; padding:28px 24px 40px; border-top:1px solid var(--cizgi); color:var(--yazi-3); font-size:.85rem; text-align:center }
.alt p{ margin:.3em 0 }
.alt a{ color:var(--yazi-2) }

/* ---------------- duyarlı ---------------- */
@media (max-width:1240px){
  .duzen.ucl{ grid-template-columns:var(--yan-g) minmax(0,1fr) }
  .sag{ display:none }
  .toc-mobil{ display:block }
}
@media (max-width:960px){
  .menu-dugme{ display:flex }
  .duzen, .duzen.ucl{ grid-template-columns:minmax(0,1fr); padding:0 16px }
  .yan{
    position:fixed; z-index:60; top:var(--ust-y); bottom:0; left:0; height:auto; width:min(330px, 88vw);
    padding:16px 12px 48px; background:var(--zemin-yan); border-right:1px solid var(--cizgi);
    transform:translateX(-102%); transition:transform .25s ease; visibility:hidden;
  }
  body.yan-acik .yan{ transform:none; visibility:visible }
  body.yan-acik .perde{ display:block; position:fixed; inset:var(--ust-y) 0 0 0; z-index:55; background:rgba(0,0,0,.5) }
  body.yan-acik{ overflow:hidden }
  .ana{ padding-top:18px }
}
@media (max-width:760px){
  .ust-link{ display:none }
}
@media (max-width:640px){
  body{ font-size:16px; line-height:1.72 }
  .ust{ padding:0 12px; gap:8px }
  .marka span, .ayrac{ display:none }
  .ilerleme-cubuk{ display:none }
  .ders-govde h2{ font-size:1.36rem }
  .ders-govde h3{ font-size:1.14rem }
  .giris{ font-size:1.06rem }
  .kutu, .gorev, .soru{ padding-left:14px; padding-right:14px }
  .hata-bas, .hata-ic{ padding-left:14px; padding-right:14px }
  .sekil{ padding:14px 10px 12px }
  .kod-ic, .term-ic{ font-size:.82rem }
  .sk, .term-ic .sk{ padding:0 14px }
  .vsc-govde, .vsc.gezginsiz .vsc-govde{ grid-template-columns:40px minmax(0,1fr) }
  .vsc-gezgin, .vsc-menu{ display:none }
  .term-bar .pencere{ display:none }
  .term-bar .kopyala{ margin-right:10px }
  .tablo td code.ic{ white-space:break-spaces }
  .vsc-durum span:nth-child(n+3){ display:none }
  .vsc-kod{ font-size:.8rem }
  .sayfalama{ grid-template-columns:1fr }
  .sayfalama .sonraki{ align-items:flex-start; text-align:left }
  .ders-satir{ grid-template-columns:auto minmax(0,1fr); gap:12px }
  .ds-sag{ grid-column:2; flex-direction:row; gap:10px; align-items:center; padding-top:0 }
  .capa{ display:none }
}
@media (max-width:420px){
  .vsc-akt{ display:none }
  .vsc-govde, .vsc.gezginsiz .vsc-govde{ grid-template-columns:minmax(0,1fr) }
  .pencere i{ width:32px }
  .tr-gezinme{ display:none }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important }
}
@media print{
  .ust, .yan, .sag, .perde, .toc-mobil, .bitti-kutu, .sayfalama, .alt{ display:none !important }
  .duzen, .duzen.ucl{ display:block; padding:0 }
  body{ background:#fff; color:#000 }
  .ac{ border:0 }
  .ac > summary{ display:none }
  .ac:not([open]) > .ac-ic{ display:block }
}