/* ============================================================
   EBOB EKOK — style.css
   Saf statik site: dış bağımlılık yok, sistem fontları, hızlı.
   ============================================================ */
:root{
  --marka:#4f46e5; --marka-koyu:#4338ca; --marka-2:#7c3aed;
  --vurgu:#f59e0b; --ok:#059669; --hata:#dc2626; --bilgi:#0891b2;
  --zemin:#f6f7fb; --kart:#ffffff; --yazi:#0f172a; --soluk:#51607a;
  --cizgi:#e3e8f0; --golge:0 1px 2px rgba(15,23,42,.05),0 8px 24px -12px rgba(15,23,42,.12);
  --golge-buyuk:0 2px 4px rgba(15,23,42,.06),0 18px 40px -16px rgba(15,23,42,.18);
  --r:14px; --r-kucuk:9px;
  --govde:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --ust-h:66px;
}
[data-theme="koyu"]{
  --zemin:#0b1020; --kart:#121a30; --yazi:#e8edf7; --soluk:#9aa8c2;
  --cizgi:#22304f; --golge:0 1px 2px rgba(0,0,0,.4),0 10px 26px -12px rgba(0,0,0,.55);
  --golge-buyuk:0 2px 6px rgba(0,0,0,.5),0 20px 44px -16px rgba(0,0,0,.65);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--ust-h) + 14px)}
body{
  margin:0;font-family:var(--govde);font-size:16.5px;line-height:1.7;
  color:var(--yazi);background:var(--zemin);-webkit-text-size-adjust:100%;
}
img,svg{max-width:100%;vertical-align:middle}
a{color:var(--marka);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:rgba(79,70,229,.22)}
:focus-visible{outline:3px solid rgba(79,70,229,.55);outline-offset:2px;border-radius:4px}

.kapsayici{max-width:1160px;margin:0 auto;padding:0 20px}
.atla{position:absolute;left:-9999px;top:0;background:var(--marka);color:#fff;padding:.6rem 1rem;z-index:200;border-radius:0 0 8px 0}
.atla:focus{left:0}

/* ── Üst bar ─────────────────────────────────────────── */
.ust{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--kart) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--cizgi)}
.ust-ic{display:flex;align-items:center;gap:1.2rem;height:var(--ust-h)}
.logo{display:flex;align-items:center;gap:.6rem;color:var(--yazi);text-decoration:none!important;flex-shrink:0}
.logo-yazi{display:flex;flex-direction:column;line-height:1.15}
.logo-yazi strong{font-size:1.13rem;letter-spacing:.02em}
.logo-yazi small{font-size:.68rem;color:var(--soluk);letter-spacing:.02em}
.nav{margin-left:auto}
.nav>ul{display:flex;gap:.2rem;list-style:none;margin:0;padding:0;align-items:center}
.nav>ul>li{position:relative}
.nav a{display:block;padding:.55rem .8rem;border-radius:var(--r-kucuk);color:var(--yazi);font-weight:550;font-size:.97rem;text-decoration:none!important}
.nav a:hover{background:color-mix(in srgb,var(--marka) 9%,transparent);color:var(--marka)}
.nav a.aktif{color:var(--marka);background:color-mix(in srgb,var(--marka) 10%,transparent)}
.acilir-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);opacity:0;visibility:hidden;transition:.18s ease;z-index:120}
.acilir:hover .acilir-panel,.acilir:focus-within .acilir-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.panel-ic{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);box-shadow:var(--golge-buyuk);padding:.7rem;min-width:300px}
.panel-arac{display:flex!important;align-items:center;gap:.65rem;padding:.5rem .6rem!important;border-radius:var(--r-kucuk);font-weight:500!important;font-size:.93rem!important;white-space:nowrap}
.panel-ikon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);font-weight:700;flex-shrink:0}
.panel-kategori{list-style:none;margin:0;padding:0;min-width:250px}
.panel-kategori a{padding:.45rem .6rem!important;font-size:.94rem!important}
.ust-araclar{display:flex;align-items:center;gap:.35rem}
.ikon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--cizgi);background:var(--kart);color:var(--yazi);cursor:pointer;text-decoration:none!important}
.ikon-btn:hover{border-color:var(--marka);color:var(--marka)}
.hamburger{display:none;flex-direction:column;gap:4px;width:38px;height:38px;border:1px solid var(--cizgi);border-radius:10px;background:var(--kart);cursor:pointer;align-items:center;justify-content:center}
.hamburger span{width:17px;height:2px;background:var(--yazi);border-radius:2px;transition:.2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── Butonlar ────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.6rem 1.15rem;border-radius:11px;font-weight:650;font-size:.97rem;border:1.5px solid transparent;cursor:pointer;text-decoration:none!important;transition:.15s;font-family:inherit;line-height:1.4}
.btn-birincil{background:linear-gradient(135deg,var(--marka),var(--marka-2));color:#fff;box-shadow:0 6px 18px -6px rgba(79,70,229,.55)}
.btn-birincil:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ikincil{background:var(--kart);color:var(--yazi);border-color:var(--cizgi)}
.btn-ikincil:hover{border-color:var(--marka);color:var(--marka)}
.btn-buyuk{padding:.78rem 1.5rem;font-size:1.04rem;border-radius:12px}

/* ── Hero ────────────────────────────────────────────── */
.hero{background:
  radial-gradient(900px 420px at 85% -10%,rgba(124,58,237,.16),transparent 60%),
  radial-gradient(700px 380px at 8% 110%,rgba(79,70,229,.12),transparent 60%),
  linear-gradient(180deg,color-mix(in srgb,var(--marka) 5%,var(--zemin)),var(--zemin));
  border-bottom:1px solid var(--cizgi);position:relative;overflow:hidden}
.hero::before{content:"∩ × ÷ √ π ² Σ %";position:absolute;inset:0;display:flex;align-items:center;justify-content:space-around;font-size:9rem;color:color-mix(in srgb,var(--marka) 5%,transparent);pointer-events:none;white-space:nowrap;font-weight:700}
.hero-ic{display:grid;grid-template-columns:1.15fr .85fr;gap:2.8rem;align-items:center;padding:3.4rem 20px 3.8rem;position:relative}
.rozet{display:inline-block;background:color-mix(in srgb,var(--marka) 12%,transparent);color:var(--marka);font-weight:650;font-size:.82rem;padding:.35rem .85rem;border-radius:999px;margin-bottom:1rem;letter-spacing:.01em}
.hero h1{font-size:clamp(1.75rem,3.6vw,2.7rem);line-height:1.22;margin:.1rem 0 .9rem;letter-spacing:-.01em}
.vurgu{background:linear-gradient(120deg,var(--marka),var(--marka-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-metin>p{color:var(--soluk);font-size:1.06rem;max-width:36rem;margin:0 0 1.4rem}
.hero-istatistik{display:flex;gap:2rem;margin-bottom:1.6rem;flex-wrap:wrap}
.hero-istatistik div{display:flex;flex-direction:column}
.hero-istatistik strong{font-size:1.6rem;color:var(--marka);line-height:1.2}
.hero-istatistik span{font-size:.85rem;color:var(--soluk)}
.hero-butonlar{display:flex;gap:.8rem;flex-wrap:wrap}

/* ── Araç kartı (hesaplayıcı) ────────────────────────── */
.arac{background:var(--kart);border:1px solid var(--cizgi);border-radius:18px;box-shadow:var(--golge-buyuk);overflow:hidden}
.arac-baslik{display:flex;align-items:center;gap:.55rem;padding:.75rem 1.2rem;background:linear-gradient(135deg,color-mix(in srgb,var(--marka) 8%,var(--kart)),color-mix(in srgb,var(--marka-2) 8%,var(--kart)));border-bottom:1px solid var(--cizgi);font-size:.88rem;font-weight:600;color:var(--soluk)}
.arac-baslik-nokta{width:9px;height:9px;border-radius:50%;background:var(--ok);flex-shrink:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.arac>[data-arac-govde],.arac label,.arac input,.arac fieldset,.arac .arac-ornekler,.arac .arac-butonlar,.arac .arac-hata,.arac .arac-sonuc,.arac .mini-alt,.arac .kesir-giris,.arac .ki-satir,.arac .ok-satir{margin-left:1.2rem;margin-right:1.2rem}
.arac label{display:block;font-weight:600;font-size:.94rem;margin-top:1.1rem}
.ipucu-metin{font-weight:400;color:var(--soluk);font-size:.82rem}
.arac input[type="text"],.arama-kutu input,.ok-alan input,.kesir-alan input,.ki-satir input{
  width:100%;padding:.72rem .95rem;border:1.5px solid var(--cizgi);border-radius:11px;
  font-size:1.05rem;font-family:inherit;background:var(--zemin);color:var(--yazi);margin-top:.35rem;transition:.15s}
.arac input:focus,.arama-kutu input:focus{border-color:var(--marka);outline:none;box-shadow:0 0 0 3.5px color-mix(in srgb,var(--marka) 15%,transparent)}
.arac-ornekler{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.7rem;font-size:.86rem;color:var(--soluk)}
.ornek-cip{border:1px solid var(--cizgi);background:var(--kart);color:var(--yazi);border-radius:999px;padding:.22rem .7rem;font-size:.84rem;cursor:pointer;font-family:inherit;transition:.15s}
.ornek-cip:hover{border-color:var(--marka);color:var(--marka);background:color-mix(in srgb,var(--marka) 7%,var(--kart))}
.arac-secenekler{display:flex;gap:1.1rem;flex-wrap:wrap;border:1px dashed var(--cizgi);border-radius:11px;padding:.55rem .95rem;margin-top:1rem}
.arac-secenekler legend{font-size:.82rem;color:var(--soluk);padding:0 .4rem;font-weight:600}
.arac-secenekler label{display:inline-flex;align-items:center;gap:.4rem;margin:0;font-weight:500;font-size:.93rem}
.arac-secenekler input{accent-color:var(--marka)}
.arac-butonlar{display:flex;gap:.7rem;margin-top:1.1rem;flex-wrap:wrap}
.arac-hata{margin-top:1rem;background:color-mix(in srgb,var(--hata) 9%,var(--kart));border:1px solid color-mix(in srgb,var(--hata) 35%,transparent);color:var(--hata);border-radius:11px;padding:.7rem 1rem;font-size:.94rem;font-weight:550}
.arac-sonuc{margin-top:1.2rem;margin-bottom:1.4rem}
.hero-arac .arac-sonuc{margin-bottom:1.2rem}
.mini-alt{font-size:.86rem;color:var(--soluk);margin:0 1.2rem 1.2rem;padding-top:.2rem}

/* sonuç bileşenleri (tools.js üretir) */
.sonuc-ust{background:linear-gradient(135deg,var(--marka),var(--marka-2));color:#fff;border-radius:14px;padding:1.1rem 1.3rem;display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center;justify-content:center}
.sonuc-kutu{display:flex;flex-direction:column;align-items:center;min-width:120px}
.sonuc-kutu span{font-size:.85rem;opacity:.85;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.sonuc-kutu strong{font-size:2rem;line-height:1.25;word-break:break-all;text-align:center}
.adim-kutu{border:1px solid var(--cizgi);border-radius:13px;margin-top:1rem;overflow:hidden;background:var(--kart)}
.adim-kutu>h4{margin:0;padding:.7rem 1rem;background:color-mix(in srgb,var(--marka) 6%,var(--kart));font-size:.95rem;border-bottom:1px solid var(--cizgi)}
.adim-kutu .adim-ic{padding:.85rem 1rem}
.adim-kutu p{margin:.35rem 0;font-size:.95rem}
.adim-kutu ol,.adim-kutu ul{margin:.4rem 0;padding-left:1.4rem;font-size:.95rem}
.adim-kutu li{margin:.3rem 0}
.mat{font-family:ui-monospace,"Cascadia Code",Consolas,Menlo,monospace;background:color-mix(in srgb,var(--marka) 8%,transparent);padding:.08rem .38rem;border-radius:6px;font-size:.95em;white-space:nowrap}
.sonuc-ek{margin-top:.9rem;font-size:.92rem;color:var(--soluk)}
.sonuc-ek strong{color:var(--yazi)}
.etiket-dogruluk{display:inline-block;background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok);font-weight:650;border-radius:999px;padding:.15rem .7rem;font-size:.85rem}
.etiket-yanlis{display:inline-block;background:color-mix(in srgb,var(--hata) 11%,transparent);color:var(--hata);font-weight:650;border-radius:999px;padding:.15rem .7rem;font-size:.85rem}
.bolunebilir-tablo{width:100%;border-collapse:collapse;font-size:.93rem}
.bolunebilir-tablo th,.bolunebilir-tablo td{padding:.5rem .65rem;border-bottom:1px solid var(--cizgi);text-align:left;vertical-align:top}
.bolunebilir-tablo th{background:color-mix(in srgb,var(--marka) 5%,var(--kart))}
.evethayir-1{color:var(--ok);font-weight:700}
.evethayir-0{color:var(--hata);font-weight:700}

/* mini hesaplayıcı (hero) */
.mini-satir{display:flex;gap:.5rem;align-items:center}
.mini-satir input{flex:1;min-width:0;text-align:center;font-size:1.25rem;font-weight:600}
.mini-virgul{font-size:1.5rem;color:var(--soluk);font-weight:700}
.mini-btn{width:calc(100% - 2.4rem);margin-top:.9rem}
.mini-sonuc{display:flex;gap:.9rem;margin-top:1rem}
.mini-kutu{flex:1;background:color-mix(in srgb,var(--marka) 8%,var(--kart));border:1px solid color-mix(in srgb,var(--marka) 22%,transparent);border-radius:12px;padding:.75rem;text-align:center}
.mini-kutu span{display:block;font-size:.78rem;font-weight:700;color:var(--soluk);letter-spacing:.06em;text-transform:uppercase}
.mini-kutu strong{font-size:1.7rem;color:var(--marka);word-break:break-all}

/* kesir girişleri */
.kesir-giris{display:flex;align-items:center;gap:.8rem;margin-top:1rem;justify-content:center}
.kesir-alan{flex:1;max-width:150px}
.kesir-alan label{margin-top:0;text-align:center;font-size:.85rem;color:var(--soluk)}
.kesir-alan input{text-align:center;font-size:1.2rem;font-weight:600}
.kesir-cizgi{width:70px;height:3px;background:var(--yazi);border-radius:2px;margin-top:1.3rem;flex-shrink:0}
.ki-satir{display:flex;align-items:center;gap:.9rem;margin-top:1rem;flex-wrap:wrap;justify-content:center}
.ki-satir .kesir-giris{margin-top:0}
.ki-satir .kesir-alan{max-width:105px}
.ki-satir .kesir-cizgi{width:52px;margin-top:1.15rem}
.ki-islem{padding:.7rem .8rem;border-radius:11px;border:1.5px solid var(--cizgi);background:var(--zemin);color:var(--yazi);font-size:1.05rem;font-family:inherit;font-weight:600;margin-top:1.2rem}
.ok-satir{display:flex;gap:1rem;margin-top:.4rem;flex-wrap:wrap}
.ok-alan{flex:1;min-width:200px}
.kesir-giris.kucuk .kesir-alan label{font-size:.78rem}

/* ── Bölümler / ızgaralar ────────────────────────────── */
.bolum{padding:3rem 0}
.bolum-gri{background:color-mix(in srgb,var(--marka) 3.5%,var(--zemin));border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi)}
.bolum-baslik{font-size:1.55rem;margin:0 0 .4rem;letter-spacing:-.01em}
.bolum-baslik-satir{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.bolum-link{font-weight:650;font-size:.95rem;white-space:nowrap}
.bolum-alt{color:var(--soluk);margin:.2rem 0 1.5rem;max-width:46rem}
.izgara{display:grid;gap:1.15rem;margin-top:1.4rem}
.izgara-3{grid-template-columns:repeat(3,1fr)}
.izgara-4{grid-template-columns:repeat(4,1fr)}
.izgara-5{grid-template-columns:repeat(5,1fr)}
.kart{display:flex;flex-direction:column;background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);padding:1.25rem;box-shadow:var(--golge);transition:.18s;color:var(--yazi);text-decoration:none!important}
.kart:hover{transform:translateY(-3px);box-shadow:var(--golge-buyuk);border-color:color-mix(in srgb,var(--marka) 40%,var(--cizgi))}
.kart h3{font-size:1.06rem;margin:.55rem 0 .4rem;line-height:1.35}
.kart p{color:var(--soluk);font-size:.9rem;margin:0;line-height:1.55;flex:1}
.kart-devam{margin-top:.85rem;color:var(--marka);font-weight:650;font-size:.88rem}
.yazi-kart-ust{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.yazi-tarih{font-size:.8rem;color:var(--soluk)}
.arac-ikon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--c);font-size:1.35rem;font-weight:700}
.cip-kategori{display:inline-block;font-size:.74rem;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);border-radius:999px;padding:.18rem .65rem;text-decoration:none!important}
.cip-arac{display:inline-block;font-size:.78rem;font-weight:700;color:var(--marka);background:color-mix(in srgb,var(--marka) 11%,transparent);border-radius:999px;padding:.22rem .8rem}
.kategori-kutu{display:flex;flex-direction:column;gap:.15rem;background:var(--kart);border:1px solid var(--cizgi);border-left:4px solid var(--c);border-radius:var(--r);padding:1.15rem 1.25rem;text-decoration:none!important;color:var(--yazi);transition:.18s;box-shadow:var(--golge)}
.kategori-kutu:hover{transform:translateY(-2px);box-shadow:var(--golge-buyuk);text-decoration:none!important}
.kategori-ikon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--c);font-weight:700;font-size:1.2rem;margin-bottom:.35rem}
.kategori-kutu h3{font-size:1.02rem;margin:0}
.kategori-kutu p{color:var(--soluk);font-size:.85rem;margin:.15rem 0 0}

/* ── SSS ─────────────────────────────────────────────── */
.sss-kutu{max-width:52rem}
.sss{border:1px solid var(--cizgi);background:var(--kart);border-radius:12px;margin:.6rem 0;overflow:hidden}
.sss summary{cursor:pointer;padding:.85rem 1.1rem;font-weight:650;list-style:none;position:relative;padding-right:2.6rem;font-size:.99rem}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);font-size:1.35rem;color:var(--marka);font-weight:600;transition:.2s}
.sss[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.sss[open] summary{border-bottom:1px solid var(--cizgi);color:var(--marka)}
.sss p{padding:.75rem 1.1rem;margin:0;color:var(--soluk);font-size:.95rem}

/* ── Sayfa başlıkları / liste sayfaları ──────────────── */
.sayfa-baslik-bolum{padding-bottom:0}
.sayfa-baslik-bolum h1{font-size:clamp(1.6rem,3vw,2.2rem);margin:.4rem 0 .5rem;letter-spacing:-.01em}
.sayfa-ozet{color:var(--soluk);max-width:52rem;margin:0;font-size:1.02rem}
.sayfalama{display:flex;gap:.4rem;justify-content:center;margin-top:2.2rem;flex-wrap:wrap}
.sayfalama a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 .7rem;border:1px solid var(--cizgi);border-radius:10px;background:var(--kart);color:var(--yazi);font-weight:600;font-size:.92rem;text-decoration:none!important}
.sayfalama a.aktif{background:var(--marka);border-color:var(--marka);color:#fff}
.sayfalama a:hover:not(.aktif){border-color:var(--marka);color:var(--marka)}

/* ── Kırıntı ─────────────────────────────────────────── */
.kirinti{font-size:.85rem;margin-bottom:1rem}
.kirinti ol{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:0;color:var(--soluk)}
.kirinti li+li::before{content:"›";margin-right:.4rem;color:var(--soluk)}
.kirinti a{color:var(--soluk)}
.kirinti a:hover{color:var(--marka)}

/* ── Yazı düzeni ─────────────────────────────────────── */
.yazi-duzeni{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.6rem;align-items:start;padding-top:2rem;padding-bottom:2rem}
.yazi{background:var(--kart);border:1px solid var(--cizgi);border-radius:18px;padding:clamp(1.4rem,3.5vw,2.6rem);box-shadow:var(--golge);min-width:0}
.yazi-baslik h1{font-size:clamp(1.55rem,3vw,2.15rem);line-height:1.28;margin:.65rem 0 .6rem;letter-spacing:-.012em}
.yazi-ozet{color:var(--soluk);font-size:1.06rem;margin:0 0 1rem}
.yazi-meta{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.84rem;color:var(--soluk);border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);padding:.65rem 0;margin-bottom:1.6rem}
.yazi-meta a{color:var(--soluk);font-weight:600}
.yazi-meta a:hover{color:var(--marka)}

/* içerik tipografisi */
.icerik h2{font-size:1.42rem;margin:2.2rem 0 .8rem;line-height:1.32;letter-spacing:-.008em;scroll-margin-top:calc(var(--ust-h) + 14px)}
.icerik h3{font-size:1.14rem;margin:1.6rem 0 .6rem;scroll-margin-top:calc(var(--ust-h) + 14px)}
.icerik h4{font-size:1.02rem;margin:1.3rem 0 .5rem}
.icerik p{margin:.85rem 0}
.icerik ul,.icerik ol{margin:.85rem 0;padding-left:1.5rem}
.icerik li{margin:.4rem 0}
.icerik li::marker{color:var(--marka)}
.icerik strong{font-weight:700}
.icerik a{text-decoration:underline;text-underline-offset:2.5px;text-decoration-color:color-mix(in srgb,var(--marka) 40%,transparent)}
.icerik a:hover{text-decoration-color:var(--marka)}
.icerik code{font-family:ui-monospace,Consolas,Menlo,monospace;background:color-mix(in srgb,var(--marka) 9%,transparent);padding:.1rem .4rem;border-radius:6px;font-size:.9em}
.icerik blockquote{margin:1.2rem 0;padding:.9rem 1.2rem;border-left:4px solid var(--marka);background:color-mix(in srgb,var(--marka) 5%,var(--kart));border-radius:0 12px 12px 0;color:var(--soluk)}
.icerik blockquote p{margin:.3rem 0}
.tablo-sar{overflow-x:auto;margin:1.2rem 0;border:1px solid var(--cizgi);border-radius:12px}
.icerik table,.adim-kutu table{width:100%;border-collapse:collapse;font-size:.94rem}
.icerik th,.icerik td{padding:.6rem .85rem;border-bottom:1px solid var(--cizgi);text-align:left}
.icerik th{background:color-mix(in srgb,var(--marka) 6%,var(--kart));font-weight:700}
.icerik tr:last-child td{border-bottom:none}
.icerik tbody tr:hover{background:color-mix(in srgb,var(--marka) 3.5%,transparent)}

/* bilgi kutuları (makale içi) */
.kutu{border-radius:12px;padding:.95rem 1.15rem;margin:1.2rem 0;border:1px solid;font-size:.96rem}
.kutu p{margin:.35rem 0}
.kutu .kutu-baslik{font-weight:750;display:flex;align-items:center;gap:.45rem;margin-bottom:.3rem}
.kutu.ornek{background:color-mix(in srgb,var(--vurgu) 8%,var(--kart));border-color:color-mix(in srgb,var(--vurgu) 38%,transparent)}
.kutu.ornek .kutu-baslik{color:#b45309}
.kutu.bilgi{background:color-mix(in srgb,var(--bilgi) 7%,var(--kart));border-color:color-mix(in srgb,var(--bilgi) 32%,transparent)}
.kutu.bilgi .kutu-baslik{color:#0e7490}
.kutu.ipucu{background:color-mix(in srgb,var(--ok) 7%,var(--kart));border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.kutu.ipucu .kutu-baslik{color:#047857}
.kutu.uyari{background:color-mix(in srgb,var(--hata) 6%,var(--kart));border-color:color-mix(in srgb,var(--hata) 30%,transparent)}
.kutu.uyari .kutu-baslik{color:#b91c1c}
.bilgi-kutu{background:var(--kart);border:1px solid var(--cizgi);border-left:4px solid var(--marka);border-radius:var(--r);padding:1.4rem 1.6rem}
.bilgi-kutu h2{margin-top:0;font-size:1.25rem}

/* matematik gösterimi */
.mat-blok{background:color-mix(in srgb,var(--marka) 5%,var(--kart));border:1px solid var(--cizgi);border-radius:12px;padding:1rem 1.2rem;margin:1.1rem 0;font-size:1.06rem;text-align:center;overflow-x:auto}
sup,sub{line-height:0}

/* etiketler, yazar kutusu */
.etiketler{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:2rem}
.etiket{font-size:.8rem;color:var(--soluk);background:var(--zemin);border:1px solid var(--cizgi);border-radius:999px;padding:.2rem .7rem}
.yazar-kutu{display:flex;gap:1rem;align-items:flex-start;margin-top:1.4rem;background:var(--zemin);border:1px solid var(--cizgi);border-radius:14px;padding:1.1rem 1.2rem}
.yazar-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--marka),var(--marka-2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:750;font-size:.9rem;flex-shrink:0}
.yazar-kutu p{margin:.25rem 0 0;font-size:.9rem;color:var(--soluk)}
.baglanti-kopyala{margin-top:1.1rem;font-size:.88rem;padding:.45rem .9rem}

/* kenar çubuğu */
.yazi-kenar{position:sticky;top:calc(var(--ust-h) + 18px);display:flex;flex-direction:column;gap:1.1rem}
.kenar-kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);padding:1.05rem 1.15rem;box-shadow:var(--golge)}
.kenar-kart h3{margin:0 0 .55rem;font-size:.98rem;color:var(--yazi)}
.icindekiler ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--cizgi)}
.icindekiler li a{display:block;padding:.3rem 0 .3rem .8rem;font-size:.88rem;color:var(--soluk);margin-left:-2px;border-left:2px solid transparent;text-decoration:none!important;line-height:1.4}
.icindekiler li a:hover{color:var(--marka);border-left-color:var(--marka)}
.kenar-arac-liste,.kenar-liste{list-style:none;margin:0;padding:0}
.kenar-arac-liste li,.kenar-liste li{margin:.15rem 0}
.kenar-arac-liste a,.kenar-liste a{display:flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--yazi);padding:.32rem 0;text-decoration:none!important;line-height:1.35}
.kenar-arac-liste a:hover,.kenar-liste a:hover{color:var(--marka)}
.mini-ikon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--c);font-weight:700;font-size:.9rem;flex-shrink:0}

/* ── Arama ───────────────────────────────────────────── */
.arama-kutu{max-width:40rem;margin:1.6rem 0 .5rem}
.arama-kutu input{font-size:1.12rem;padding:.85rem 1.1rem}
.arama-cipler{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;margin-top:.8rem;font-size:.86rem;color:var(--soluk)}
.arama-sayi{color:var(--soluk);font-size:.92rem;margin:.6rem 0 -.6rem}
.arama-bos{margin-top:1.5rem;color:var(--soluk)}

/* ── 404 ─────────────────────────────────────────────── */
.hata-sayfa{text-align:center;padding:4rem 0}
.hata-kod{font-size:6rem;font-weight:800;margin:0;line-height:1;background:linear-gradient(120deg,var(--marka),var(--marka-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hata-sayfa h1{font-size:1.7rem;margin:.8rem 0}
.hata-sayfa .sayfa-ozet{margin:0 auto 1.8rem}

/* ── Alt bilgi ───────────────────────────────────────── */
.alt{background:#0d1330;color:#c6cee4;margin-top:3rem}
[data-theme="koyu"] .alt{background:#070b18}
.alt-izgara{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:2.2rem;padding:3.2rem 20px 2.4rem}
.alt-marka p{font-size:.9rem;line-height:1.65;color:#9aa6c5;margin:.9rem 0 0}
.alt-marka .logo-yazi strong,.alt-marka .logo-yazi small{color:#fff}
.alt-marka .logo-yazi small{color:#9aa6c5}
.alt-iletisim a{color:#a5b4fc}
.alt-kolon h3{color:#fff;font-size:.95rem;margin:0 0 .8rem;letter-spacing:.02em}
.alt-kolon ul{list-style:none;margin:0;padding:0}
.alt-kolon li{margin:.42rem 0}
.alt-kolon a{color:#9aa6c5;font-size:.9rem;text-decoration:none!important}
.alt-kolon a:hover{color:#fff}
.alt-tumu{color:#a5b4fc!important;font-weight:600;font-size:.88rem;display:inline-block;margin-top:.6rem}
.alt-alt{border-top:1px solid rgba(255,255,255,.09);padding:1.1rem 0}
.alt-alt p{margin:0;font-size:.83rem;color:#7d89ab;text-align:center}

/* ── Çerez bandı ─────────────────────────────────────── */
.cerez-banner{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--kart);border-top:1px solid var(--cizgi);box-shadow:0 -10px 34px -12px rgba(15,23,42,.25)}
.cerez-ic{max-width:1160px;margin:0 auto;padding:.95rem 20px;display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.cerez-ic p{margin:0;font-size:.88rem;color:var(--soluk);flex:1;min-width:260px;line-height:1.55}
.cerez-butonlar{display:flex;gap:.55rem}
.cerez-butonlar .btn{padding:.45rem .95rem;font-size:.9rem}

/* ── Duyuru/ilerleme çubuğu ──────────────────────────── */
#okuma-cubugu{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--marka),var(--marka-2));z-index:130;transition:width .1s linear}

/* ── Duyarlı ─────────────────────────────────────────── */
@media (max-width:1080px){
  .izgara-5{grid-template-columns:repeat(3,1fr)}
  .izgara-4{grid-template-columns:repeat(3,1fr)}
  .alt-izgara{grid-template-columns:1fr 1fr 1fr}
  .yazi-duzeni{grid-template-columns:1fr}
  .yazi-kenar{position:static;flex-direction:row;flex-wrap:wrap}
  .yazi-kenar .kenar-kart{flex:1;min-width:240px}
}
@media (max-width:960px){
  .hero-ic{grid-template-columns:1fr;padding:2.6rem 20px 3rem}
  .hamburger{display:flex}
  /* NOT: .ust üzerindeki backdrop-filter, position:fixed için yeni bağlam oluşturur;
     bu yüzden panel header'a göre mutlak konumlanır (top:100% = header'ın altı). */
  .nav{position:absolute;top:100%;left:0;right:0;
    height:calc(100vh - var(--ust-h));height:calc(100dvh - var(--ust-h));
    background:var(--zemin);margin:0;overflow-y:auto;
    transform:translateX(102%);visibility:hidden;
    transition:transform .25s ease, visibility 0s linear .25s;
    z-index:99;box-shadow:0 24px 40px -20px rgba(15,23,42,.35)}
  body.menu-acik{overflow:hidden}
  body.menu-acik .nav{transform:translateX(0);visibility:visible;transition:transform .25s ease, visibility 0s}
  .nav>ul{flex-direction:column;align-items:stretch;padding:1rem 1.2rem;gap:.15rem}
  .nav a{font-size:1.05rem;padding:.75rem .8rem}
  .acilir-panel{position:static;opacity:1;visibility:visible;transform:none}
  .panel-ic{box-shadow:none;border:none;background:transparent;padding:0 0 .3rem .6rem;min-width:0}
  .panel-arac{white-space:normal}
  .nav-arama-mobil{display:block}
  .izgara-3,.izgara-4,.izgara-5{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .izgara-3,.izgara-4,.izgara-5{grid-template-columns:1fr}
  .alt-izgara{grid-template-columns:1fr 1fr;gap:1.6rem}
  .alt-marka{grid-column:1/-1}
  .hero-istatistik{gap:1.3rem}
  .ki-satir{gap:.6rem}
  .kesir-cizgi{width:46px}
  .sonuc-ust{gap:1rem;padding:.95rem 1rem}
  .sonuc-kutu strong{font-size:1.5rem}
  .yazi-meta{gap:.7rem}
  .cerez-ic{flex-direction:column;align-items:stretch;text-align:left}
}
@media (max-width:420px){
  .alt-izgara{grid-template-columns:1fr}
  .logo-yazi small{display:none}
}

/* ── İletişim formu ──────────────────────────────────── */
.iletisim-kart{background:var(--kart);border:1px solid var(--cizgi);border-left:4px solid var(--marka);border-radius:var(--r);padding:1rem 1.4rem;margin:1.3rem 0}
.iletisim-satir{margin:.45rem 0}
.iletisim-form{background:var(--zemin);border:1px solid var(--cizgi);border-radius:var(--r);padding:1.4rem;margin:1.3rem 0;max-width:40rem}
.form-satir{margin-bottom:1rem}
.form-satir label{display:block;font-weight:650;font-size:.92rem;margin-bottom:.3rem}
.form-satir input,.form-satir select,.form-satir textarea{width:100%;padding:.68rem .9rem;border:1.5px solid var(--cizgi);border-radius:10px;font-size:1rem;font-family:inherit;background:var(--kart);color:var(--yazi)}
.form-satir textarea{resize:vertical;min-height:110px}
.form-satir input:focus,.form-satir select:focus,.form-satir textarea:focus{border-color:var(--marka);outline:none;box-shadow:0 0 0 3.5px color-mix(in srgb,var(--marka) 15%,transparent)}
.form-not{font-size:.84rem;color:var(--soluk);margin:.85rem 0 0}

/* ── Yazdırma ────────────────────────────────────────── */
@media print{
  .ust,.alt,.yazi-kenar,.cerez-banner,.arac-butonlar,.btn,.hero-arac,#okuma-cubugu{display:none!important}
  body{background:#fff;color:#000}
  .yazi{border:none;box-shadow:none;padding:0}
}