/* Bileşenler. Yalnız tokens.css değişkenleri kullanılır. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--renk-zemin); color: var(--renk-metin); font-family: var(--font-govde); font-size: var(--fs-md); line-height: var(--lh-govde); overflow-wrap: anywhere; }
img, svg, canvas { max-width: 100%; height: auto; }
a { color: var(--renk-vurgu); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--odak-halka); border-radius: var(--kose-kucuk); }
h1, h2, h3 { letter-spacing: -0.02em; font-family: var(--font-baslik); line-height: var(--lh-baslik); font-weight: var(--fw-kalin); }
h1 { font-size: var(--fs-2xl); margin: var(--bosluk-4) 0 var(--bosluk-3); }
h2 { font-size: var(--fs-xl); margin: var(--bosluk-6) 0 var(--bosluk-3); }
h3 { font-size: var(--fs-lg); margin: var(--bosluk-5) 0 var(--bosluk-2); }
.atla { position: absolute; left: -999px; }
.atla:focus { left: var(--bosluk-4); top: var(--bosluk-2); background: var(--renk-yuzey); padding: var(--bosluk-2); z-index: 10; }
.kap { max-width: var(--genislik-site); margin: 0 auto; padding: 0 var(--bosluk-4); }

/* Üst ve alt bilgi */
.ust { border-bottom: 1px solid var(--renk-cizgi); background: var(--renk-yuzey); }
.ust .kap { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-3); min-height: 3.5rem; }
.marka { font-weight: var(--fw-kalin); font-size: var(--fs-lg); color: var(--renk-metin); text-decoration: none; }
.alt { margin-top: var(--bosluk-7); border-top: 1px solid var(--renk-cizgi); background: var(--renk-zemin-2); color: var(--renk-metin-2); font-size: var(--fs-sm); padding: var(--bosluk-5) 0; }
.alt ul { list-style: none; padding: 0; margin: 0 0 var(--bosluk-3); display: flex; flex-wrap: wrap; gap: var(--bosluk-2) var(--bosluk-4); }
.alt a { color: var(--renk-metin-2); }
.yol { font-size: var(--fs-sm); color: var(--renk-metin-2); margin-top: var(--bosluk-4); }
.yol ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--bosluk-1); }
.yol li + li::before { content: "/"; margin-right: var(--bosluk-1); color: var(--renk-metin-2); }
.giris { color: var(--renk-metin-2); max-width: var(--genislik-icerik); }
.guncel { font-size: var(--fs-sm); color: var(--renk-metin-2); }

/* Araç düzeni */
.arac { display: grid; gap: var(--bosluk-5); grid-template-columns: 1fr; margin-top: var(--bosluk-4); }
@media (min-width: 860px) { .arac { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .sonuc { position: sticky; top: var(--bosluk-4); } }
.form, .sonuc { background: var(--renk-yuzey); border: 1px solid var(--renk-cizgi); border-radius: var(--kose-buyuk); padding: var(--bosluk-4); box-shadow: var(--golge-1); min-width: 0; }
.alan { margin-bottom: var(--bosluk-4); }
.alan[hidden] { display: none; }
.alan label { display: block; font-weight: var(--fw-orta); margin-bottom: var(--bosluk-1); }
.girdi { display: flex; align-items: stretch; border: 1px solid var(--renk-cizgi); border-radius: var(--kose-orta); background: var(--renk-zemin); overflow: hidden; }
.girdi:focus-within { box-shadow: var(--odak-halka); border-color: var(--renk-vurgu); }
.girdi input, .girdi select { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; color: var(--renk-metin); font: inherit; font-size: var(--fs-md); padding: var(--bosluk-3); min-height: 2.875rem; }
.girdi input:focus, .girdi select:focus { outline: none; }
.girdi select option { background: var(--renk-yuzey); color: var(--renk-metin); }
.birim { display: flex; align-items: center; padding: 0 var(--bosluk-3); color: var(--renk-metin-2); background: var(--renk-zemin-2); border-left: 1px solid var(--renk-cizgi); font-size: var(--fs-sm); white-space: nowrap; }
.ipucu { font-size: var(--fs-xs); color: var(--renk-metin-2); margin: var(--bosluk-1) 0 0; }
.ana-sonuc { margin: 0 0 var(--bosluk-4); }
.ana-sonuc .etiket { color: var(--renk-metin-2); font-size: var(--fs-sm); }
.ana-sonuc .deger { display: block; font-family: var(--font-rakam); font-size: var(--fs-3xl); font-weight: var(--fw-kalin); color: var(--renk-vurgu); line-height: 1.15; font-variant-numeric: tabular-nums; }
.satirlar { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.satirlar th, .satirlar td { padding: var(--bosluk-2) 0; border-bottom: 1px solid var(--renk-cizgi); text-align: left; vertical-align: top; font-weight: var(--fw-normal); }
.satirlar td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: var(--bosluk-3); }
.notlar { font-size: var(--fs-xs); color: var(--renk-metin-2); padding-left: var(--bosluk-4); margin: var(--bosluk-3) 0 0; }
.not { margin-top: var(--bosluk-4); padding: var(--bosluk-3); background: var(--renk-zemin-2); border-left: 3px solid var(--renk-vurgu); border-radius: var(--kose-orta); font-size: var(--fs-sm); }
.not b { display: block; margin-bottom: var(--bosluk-1); }
.not p { margin: 0; color: var(--renk-metin-2); }
.uyari { background: var(--renk-uyari-zemin); color: var(--renk-uyari); border-radius: var(--kose-orta); padding: var(--bosluk-3); font-size: var(--fs-sm); margin: 0; }
.tablo-kap { overflow-x: auto; margin-top: var(--bosluk-2); }
.tablo-kap table { border-collapse: collapse; font-size: var(--fs-xs); width: 100%; min-width: 30rem; }
.tablo-kap th, .tablo-kap td { padding: var(--bosluk-1) var(--bosluk-2); border-bottom: 1px solid var(--renk-cizgi); text-align: right; font-variant-numeric: tabular-nums; }
.tablo-kap th:first-child, .tablo-kap td:first-child { text-align: left; }
details.yillik summary { cursor: pointer; margin-top: var(--bosluk-4); font-weight: var(--fw-orta); }

/* Düğmeler ve paylaşım */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: var(--bosluk-2); min-height: 2.75rem; padding: 0 var(--bosluk-4); border-radius: var(--kose-orta); border: 1px solid var(--renk-vurgu); background: var(--renk-vurgu); color: var(--renk-vurgu-metin); font: inherit; font-weight: var(--fw-orta); cursor: pointer; text-decoration: none; }
.dugme.ikincil { background: transparent; color: var(--renk-vurgu); }
.paylas { margin-top: var(--bosluk-4); border-top: 1px solid var(--renk-cizgi); padding-top: var(--bosluk-4); }
.paylas canvas { display: block; width: 100%; border-radius: var(--kose-orta); margin-bottom: var(--bosluk-3); }
.dugmeler { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); }
.durum { font-size: var(--fs-sm); color: var(--renk-basari); min-height: 1.5em; margin: var(--bosluk-2) 0 0; }

/* İçerik bölümleri */
.icerik { max-width: var(--genislik-icerik); }
.sss details { border-bottom: 1px solid var(--renk-cizgi); padding: var(--bosluk-3) 0; }
.sss summary { cursor: pointer; font-weight: var(--fw-orta); }
.sss details p { margin: var(--bosluk-2) 0 0; color: var(--renk-metin-2); }
.kaynaklar { font-size: var(--fs-sm); padding-left: var(--bosluk-4); }
.kaynaklar li { margin-bottom: var(--bosluk-2); }
.rozet { display: inline-block; font-size: var(--fs-xs); background: var(--renk-uyari-zemin); color: var(--renk-uyari); border-radius: var(--kose-tam); padding: 0 var(--bosluk-2); margin-left: var(--bosluk-1); }
.ilgili, .liste { list-style: none; padding: 0; display: grid; gap: var(--bosluk-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.ilgili a, .liste a { display: block; height: 100%; padding: var(--bosluk-3); border: 1px solid var(--renk-cizgi); border-radius: var(--kose-orta); background: var(--renk-yuzey); text-decoration: none; color: var(--renk-metin); }
.ilgili a:hover, .liste a:hover { border-color: var(--renk-vurgu); }
.ilgili small, .liste small { display: block; color: var(--renk-metin-2); font-size: var(--fs-xs); margin-top: var(--bosluk-1); }
.liste [hidden], .kategori[hidden] { display: none; }
.ara { margin: var(--bosluk-4) 0; max-width: var(--genislik-icerik); }
.reklam, .sponsor { border: 1px dashed var(--renk-cizgi); border-radius: var(--kose-orta); padding: var(--bosluk-3); margin: var(--bosluk-5) 0; font-size: var(--fs-sm); color: var(--renk-metin-2); }
.sponsor .etiket { font-size: var(--fs-xs); font-weight: var(--fw-kalin); }
.yasal { max-width: var(--genislik-icerik); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---- Olgun Can teması ---- */
.ust { background: var(--renk-kart-zemin); color: var(--renk-kart-metin); border-bottom: 0; }
.marka { font-family: var(--font-baslik); font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.02em; color: var(--renk-kart-metin); }

.sahne { background: var(--kat); color: var(--kat-metin); border-radius: var(--kose-buyuk); padding: var(--bosluk-1) var(--bosluk-5) var(--bosluk-5); margin-top: var(--bosluk-4); }
.sahne .yol, .sahne .yol li + li::before, .sahne .giris { color: color-mix(in srgb, var(--kat-metin) 82%, transparent); }
.sahne a { color: var(--kat-metin); }
.sahne a:focus-visible, .sahne button:focus-visible, .sahne summary:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--kat-metin) 70%, transparent); }
.sahne .form, .sahne .sonuc { background: transparent; border: 0; box-shadow: none; padding: 0; color: var(--kat-metin); }
.sahne .alan label { color: var(--kat-metin); }
.sahne .ipucu, .sahne .notlar { color: color-mix(in srgb, var(--kat-metin) 80%, transparent); }
.sahne .girdi { background: var(--kat-metin); border-color: transparent; }
.sahne .girdi:focus-within { border-color: transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--kat-metin) 55%, transparent); }
.sahne .girdi input, .sahne .girdi select { color: var(--renk-kart-zemin); }
.sahne .girdi input::placeholder { color: color-mix(in srgb, var(--renk-kart-zemin) 50%, transparent); }
.sahne .girdi select option { background: var(--kat-metin); color: var(--renk-kart-zemin); }
.sahne .birim { background: color-mix(in srgb, var(--kat) 12%, var(--kat-metin)); color: var(--kat); border-left-color: color-mix(in srgb, var(--kat) 20%, var(--kat-metin)); font-weight: var(--fw-orta); }
.sahne .dugme { background: var(--kat-metin); border-color: var(--kat-metin); color: var(--kat); }
.sahne .dugme.ikincil { background: transparent; color: var(--kat-metin); border-color: color-mix(in srgb, var(--kat-metin) 60%, transparent); }
.dugme.hesapla { width: 100%; border-radius: 12px; min-height: 3rem; font-weight: 700; font-size: var(--fs-md); }
.sahne .ana-sonuc .etiket { color: color-mix(in srgb, var(--kat-metin) 85%, transparent); }
.sahne .ana-sonuc .deger { color: var(--kat-metin); font-family: var(--font-rakam); font-weight: 600; white-space: nowrap; font-size: clamp(26px, 9vw, 40px); letter-spacing: -0.02em; }
@media (min-width: 860px) { .sahne .ana-sonuc .deger { font-size: clamp(26px, 3.4vw, 40px); } }
.sahne .satirlar th, .sahne .satirlar td, .sahne .tablo-kap th, .sahne .tablo-kap td { border-bottom-color: color-mix(in srgb, var(--kat-metin) 25%, transparent); }
.sahne .paylas { border-top-color: color-mix(in srgb, var(--kat-metin) 25%, transparent); }
.sahne .durum { color: var(--kat-metin); }
.sahne .uyari { background: color-mix(in srgb, var(--kat-metin) 92%, transparent); color: var(--renk-kart-zemin); }
.sahne .sonuc { position: relative; }
@media (min-width: 860px) { .sahne .sonuc { position: sticky; } }
.sonuc-meta { position: relative; margin-top: var(--bosluk-4); padding: var(--bosluk-3) 96px 0 0; min-height: 84px; border-top: 1px solid color-mix(in srgb, var(--kat-metin) 25%, transparent); font-size: var(--fs-xs); }
.sonuc-meta p { margin: 0 0 var(--bosluk-1); display: grid; grid-template-columns: 6.5em 1fr; gap: var(--bosluk-2); align-items: baseline; }
.sonuc-meta span { opacity: .85; }
.sonuc-meta code { font-family: var(--font-govde); background: color-mix(in srgb, var(--kat-metin) 15%, transparent); padding: 1px 6px; border-radius: var(--kose-kucuk); overflow-wrap: anywhere; }
.sonuc > svg.can { position: absolute; right: 0; bottom: 0; width: 84px; height: auto; aspect-ratio: 120 / 150; pointer-events: none; }

.not { display: flex; gap: var(--bosluk-3); align-items: flex-start; border-left-color: var(--kat); margin-top: var(--bosluk-5); }
.not .can-mini { flex: none; width: 32px; height: 40px; }

h2 .nokta { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--kat); margin-right: .45em; vertical-align: .1em; }

.sekme { display: none; }
@media (max-width: 720px) {
  .sahne { margin-inline: calc(-1 * var(--bosluk-4)); border-radius: 0; padding-inline: var(--bosluk-4); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .sekme { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--renk-kart-zemin); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -1px 0 color-mix(in srgb, var(--renk-kart-metin) 12%, transparent); }
  .sekme a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; color: var(--renk-kart-metin); text-decoration: none; font-size: var(--fs-xs); -webkit-tap-highlight-color: transparent; }
  .sekme svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
}

/* Ana sayfa */
.hero-ana { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--bosluk-5); align-items: center; margin: var(--bosluk-5) 0 var(--bosluk-4); }
.hero-ana h1 { font-size: clamp(30px, 4.6vw, 52px); letter-spacing: -.03em; margin: 0 0 var(--bosluk-3); }
.hero-ana .giris { max-width: 50ch; margin: 0; }
.hero-ana .ara { margin: var(--bosluk-4) 0 var(--bosluk-3); }
.hero-ana .ara label { position: absolute; left: -9999px; }
.hero-ana .girdi { min-height: 3.4rem; border-width: 2px; border-color: var(--renk-metin); }
.populer { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); list-style: none; padding: 0; margin: 0; }
.populer a { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--renk-yuzey); border: 1px solid var(--renk-cizgi); color: var(--renk-metin); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.populer a:hover { border-color: var(--renk-metin); }
.can-sahne { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 330px; }
.can-sahne .can-buyuk { width: 200px; height: 250px; }
.balon { position: absolute; top: 0; left: 0; max-width: 230px; margin: 0; background: var(--renk-kart-zemin); color: var(--renk-kart-metin); padding: 12px 16px; border-radius: 16px 16px 16px 4px; font-size: var(--fs-sm); line-height: 1.45; }
.balon b { font-family: var(--font-baslik); font-weight: 600; }
.balon a { color: inherit; }
.rakamlar { margin: var(--bosluk-5) 0; }
.rakamlar h2 { font-size: var(--fs-lg); margin: 0 0 var(--bosluk-3); }
.rakamlar ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--renk-cizgi); border-radius: var(--kose-buyuk); overflow: hidden; background: var(--renk-yuzey); }
.rakamlar li + li { border-left: 1px solid var(--renk-cizgi); }
.rakamlar a { display: flex; flex-direction: column; gap: 2px; padding: var(--bosluk-4); color: var(--renk-metin); text-decoration: none; height: 100%; }
.rakamlar a:hover { background: var(--renk-zemin-2); }
.r-ad, .r-not { font-size: var(--fs-xs); color: var(--renk-metin-2); }
.r-deger { font-family: var(--font-rakam); font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.r-kurlar { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--bosluk-4); }
.r-kur { display: flex; flex-direction: column; gap: 2px; }
.karolar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bosluk-4); margin: var(--bosluk-4) 0 var(--bosluk-5); }
.karo { background: var(--renk-yuzey); border: 1px solid var(--renk-cizgi); border-radius: var(--kose-buyuk); overflow: hidden; display: flex; flex-direction: column; }
.karo-bas { background: var(--kat); color: var(--kat-metin); padding: var(--bosluk-4); min-height: 118px; position: relative; }
.karo-bas h2 { margin: 0; padding-right: 4.5rem; font-size: var(--fs-lg); color: var(--kat-metin); }
.karo-bas p { margin: 6px 0 0; font-size: var(--fs-xs); opacity: .9; max-width: 32ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; }
.karo-bas .sayi { position: absolute; right: var(--bosluk-4); top: var(--bosluk-4); font-family: var(--font-baslik); font-size: var(--fs-sm); opacity: .8; }
.karo ul { list-style: none; padding: var(--bosluk-2) 0; margin: 0; }
.karo li a { display: block; padding: 9px var(--bosluk-4); color: var(--renk-metin); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
.karo li a:hover { background: var(--renk-zemin-2); color: var(--kat); }
.karo li a::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--kat); margin-right: 10px; vertical-align: 2px; }
.karo li[hidden] { display: none; }
@media (max-width: 860px) { .karolar { grid-template-columns: 1fr 1fr; } .rakamlar ul { grid-template-columns: 1fr 1fr; } .rakamlar li:nth-child(odd) { border-left: 0; } .rakamlar li:last-child:nth-child(odd) { grid-column: 1 / -1; } .rakamlar li:nth-child(n+3) { border-top: 1px solid var(--renk-cizgi); } }
@media (max-width: 640px) { .hero-ana { grid-template-columns: 1fr; gap: 0; } .can-sahne { min-height: 0; justify-content: flex-start; order: -1; align-items: center; gap: 12px; margin-bottom: var(--bosluk-3); } .can-sahne .can-buyuk { width: 64px; height: 80px; flex: none; } .balon { position: static; max-width: none; flex: 1; } .karolar { grid-template-columns: 1fr; } .karo-bas { min-height: 0; } .rakamlar a { padding: var(--bosluk-3); } .r-deger { font-size: var(--fs-lg); } }

/* Üst menü (09.11): kategori + açılır araç listesi; 960px altı Menü düğmesiyle */
.ust .kap { justify-content: flex-start; }
.ust-menu { flex: 1; margin-left: var(--bosluk-5); }
.ust-menu > ul { display: flex; gap: var(--bosluk-1); list-style: none; margin: 0; padding: 0; }
.menu-kat { position: relative; }
.menu-kat summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 2.5rem; padding: 0 var(--bosluk-3); border-radius: var(--kose-orta); font-size: var(--fs-sm); font-weight: 600; color: var(--renk-kart-metin); white-space: nowrap; user-select: none; }
.menu-kat summary::-webkit-details-marker { display: none; }
.menu-kat summary::after { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; transition: transform .15s ease; }
.menu-kat[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.menu-kat summary:hover, .menu-kat[open] summary { background: color-mix(in srgb, var(--renk-kart-metin) 10%, transparent); }
.menu-kat summary[aria-current] { box-shadow: inset 0 -2px 0 var(--renk-vurgu); }
.menu-kat summary:focus-visible { outline: none; box-shadow: var(--odak-halka); }
.menu-acilir { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 15rem; background: var(--renk-yuzey); border: 1px solid var(--renk-cizgi); border-radius: var(--kose-buyuk); box-shadow: 0 10px 30px rgb(0 0 0 / .14); padding: var(--bosluk-2); transform-origin: top left; animation: menu-ac .14s ease-out; }
@keyframes menu-ac { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu-acilir ul { list-style: none; margin: 0; padding: 0; }
.menu-acilir a { display: block; padding: var(--bosluk-2) var(--bosluk-3); border-radius: var(--kose-orta); color: var(--renk-metin); text-decoration: none; font-size: var(--fs-sm); }
.menu-acilir a:hover, .menu-acilir a:focus-visible { background: var(--renk-vurgu-zemin); color: var(--renk-vurgu); outline: none; }
.menu-acilir a[aria-current] { color: var(--renk-vurgu); font-weight: 700; }
.ust-sag { display: flex; align-items: center; gap: var(--bosluk-2); margin-left: auto; }
.ust-ara { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--kose-orta); color: var(--renk-kart-metin); }
.ust-ara:hover { background: color-mix(in srgb, var(--renk-kart-metin) 10%, transparent); }
.ust-ara svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.menu-dugme { display: none; background: var(--renk-kart-metin); color: var(--renk-kart-zemin); border: 0; border-radius: var(--kose-orta); padding: 0 var(--bosluk-3); min-height: 2.25rem; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .menu-acilir { animation: none; } }
@media (max-width: 720px) { .ust-ara { display: none; } }
@media (max-width: 1200px) {
  .ust { position: relative; }
  .menu-dugme { display: block; }
  .ust-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin: 0; background: var(--renk-kart-zemin); padding: var(--bosluk-2) var(--bosluk-4) var(--bosluk-4); box-shadow: 0 14px 30px rgb(0 0 0 / .25); max-height: calc(100vh - 3.5rem); overflow-y: auto; border-radius: 0 0 var(--kose-buyuk) var(--kose-buyuk); }
  .ust-menu.acik { display: block; }
  .ust-menu > ul { flex-direction: column; gap: 0; }
  .menu-kat summary { min-height: 3rem; font-size: var(--fs-md); justify-content: space-between; border-bottom: 1px solid color-mix(in srgb, var(--renk-kart-metin) 12%, transparent); border-radius: 0; }
  .ust-menu > ul > li:last-child .menu-kat:not([open]) summary { border-bottom: 0; }
  .menu-kat summary:hover, .menu-kat[open] summary { background: none; }
  .menu-acilir { position: static; animation: none; box-shadow: none; border: 0; background: none; padding: var(--bosluk-1) 0 var(--bosluk-2); min-width: 0; }
  .menu-acilir a { color: var(--renk-kart-metin-2); padding: var(--bosluk-2) var(--bosluk-3); font-size: var(--fs-md); }
  .menu-acilir a:hover, .menu-acilir a:focus-visible { background: color-mix(in srgb, var(--renk-kart-metin) 8%, transparent); color: var(--renk-kart-metin); }
  .menu-acilir a[aria-current] { color: var(--renk-kart-metin); font-weight: 700; box-shadow: inset 3px 0 0 var(--kat-ana); }
}

/* 09.11 iskelet: altbilgi, kategori sayfaları, çerez, 404 */
.alt { padding: var(--bosluk-6) 0 var(--bosluk-5); }
.alt-ust { display: grid; grid-template-columns: minmax(13rem, 1.4fr) repeat(3, 1fr); gap: var(--bosluk-5) var(--bosluk-5); padding-bottom: var(--bosluk-5); border-bottom: 1px solid var(--renk-cizgi); }
.alt-marka { grid-row: span 2; }
.alt .marka { color: var(--renk-metin); }
.alt-marka p { margin: var(--bosluk-2) 0 var(--bosluk-3); max-width: 30ch; }
.alt-marka > a:not(.marka) { color: var(--renk-vurgu); font-weight: 700; }
.alt-kat h2 { font-size: var(--fs-sm); margin: 0 0 var(--bosluk-2); }
.alt-kat h2 a { color: var(--renk-metin); text-decoration: none; }
.alt-kat h2 a:hover { color: var(--renk-vurgu); text-decoration: underline; }
.alt .alt-kat ul { display: block; margin: 0; }
.alt-kat li { margin: 0 0 6px; }
.alt-kat li a { text-decoration: none; }
.alt-kat li a:hover { color: var(--renk-metin); text-decoration: underline; }
.alt ul.alt-yasal { margin: var(--bosluk-4) 0 var(--bosluk-2); }
.alt > .kap > p { margin: 0; font-size: var(--fs-xs); }
@media (max-width: 860px) { .alt-ust { grid-template-columns: 1fr 1fr; } .alt-marka { grid-row: auto; grid-column: 1 / -1; } }
@media (max-width: 420px) { .alt-ust { grid-template-columns: 1fr; } .alt-kat li a { display: inline-block; padding: 4px 0; } }

.menu-tumu { display: block; margin-top: var(--bosluk-1); padding: var(--bosluk-2) var(--bosluk-3); border-top: 1px solid var(--renk-cizgi); color: var(--renk-vurgu); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.menu-tumu:hover { text-decoration: underline; }
@media (max-width: 1200px) { .menu-tumu { color: var(--renk-kart-metin); border-top-color: color-mix(in srgb, var(--renk-kart-metin) 12%, transparent); } }

.sahne-kat { padding-bottom: var(--bosluk-6); }
.sahne-kat h1 { margin: var(--bosluk-3) 0 var(--bosluk-2); }
.sahne-kat .giris { margin: 0; }
.tum-bolum h2 a { color: inherit; text-decoration: none; }
.tum-bolum h2 a:hover { color: var(--renk-vurgu); text-decoration: underline; }
.yok { display: flex; gap: var(--bosluk-5); align-items: center; margin: var(--bosluk-6) 0 var(--bosluk-4); }
.yok .can-yok { flex: none; width: 120px; height: 150px; }
.yok h1 { margin: 0 0 var(--bosluk-2); }
@media (max-width: 560px) { .yok { flex-direction: column; align-items: flex-start; gap: var(--bosluk-3); } .yok .can-yok { width: 88px; height: 110px; } }

.cerez { position: fixed; left: var(--bosluk-4); right: var(--bosluk-4); bottom: var(--bosluk-4); z-index: 50; max-width: 40rem; margin-inline: auto; display: flex; gap: var(--bosluk-3); align-items: center; padding: var(--bosluk-3) var(--bosluk-4); background: var(--renk-kart-zemin); color: var(--renk-kart-metin); border-radius: var(--kose-buyuk); box-shadow: 0 10px 30px rgb(0 0 0 / .25); font-size: var(--fs-sm); }
.cerez[hidden] { display: none; }
.cerez p { margin: 0; flex: 1; }
.cerez a { color: var(--renk-kart-metin); }
.cerez .dugmeler { display: flex; gap: var(--bosluk-2); flex: none; }
.cerez .dugme.ikincil { background: transparent; color: var(--renk-kart-metin); border-color: color-mix(in srgb, var(--renk-kart-metin) 50%, transparent); }
@media (max-width: 720px) { .cerez { bottom: calc(64px + env(safe-area-inset-bottom) + var(--bosluk-2)); flex-direction: column; align-items: stretch; } .cerez .dugmeler > * { flex: 1; } }

/* Denetim 1–4 (09.11) */
.uyari--hata { background: color-mix(in srgb, var(--renk-hata) 10%, var(--renk-yuzey)); color: var(--renk-hata); border-left: 3px solid var(--renk-hata); }
.sahne .uyari--hata { background: var(--kat-metin); color: var(--renk-hata-sabit); }
.alan input[aria-invalid="true"] { outline: 2px solid var(--renk-hata); outline-offset: 2px; }
.menu-dugme { min-height: 2.75rem; }
.ust-ara { width: 2.75rem; height: 2.75rem; }
.populer a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.karo li a { padding-block: 11px; }
@media (max-width: 720px) {
  .tablo-kap { position: relative; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tablo-kap.sonda { mask-image: none; -webkit-mask-image: none; }
  .tablo-kap th, .tablo-kap td { white-space: nowrap; }
  .tablo-kap th:first-child, .tablo-kap td:first-child { position: sticky; left: 0; background: var(--renk-yuzey); z-index: 1; }
  .sahne .tablo-kap th:first-child, .sahne .tablo-kap td:first-child { background: var(--kat); }
}

/* Denetim 7–14 (09.11) */
.arac-dugmeler { margin-top: var(--bosluk-4); }
.arac-dugmeler .dugmeler { display: grid; grid-template-columns: 1fr 1fr; }
.sahne .arac-dugmeler .dugme.ikincil, .sahne .paylas .dugme.ikincil { color: var(--kat-metin); border-color: color-mix(in srgb, var(--kat-metin) 55%, transparent); }
.paylas .dugmeler { display: grid; grid-template-columns: repeat(3, 1fr); }
.paylas .dugmeler .dugme { padding-inline: var(--bosluk-2); }
@media (max-width: 420px) { .paylas .dugmeler { grid-template-columns: 1fr; } }
.yazdir-alt { display: none; }
@media print {
  .ust, .ust-menu, .sekme, .alt, .sponsor, .reklam, .cerez, .lamba, .paylas, .arac-dugmeler, .dugme.hesapla, .can, .ust-ara, .yol { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .sahne, .sahne .form, .sahne .sonuc, .sahne a { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .sahne { padding: 0; border-radius: 0; }
  .sonuc-meta { padding-right: 0; min-height: 0; border-top-color: #999; }
  .sonuc-meta code { background: none; }
  .tablo-kap { mask-image: none !important; -webkit-mask-image: none !important; overflow: visible !important; }
  .tablo-kap th:first-child, .tablo-kap td:first-child { position: static; background: none !important; }
  .yazdir-alt { display: block !important; margin-top: 12px; font-size: 10pt; color: #000; overflow-wrap: anywhere; }
  .alan input, .alan select { border: 1px solid #999 !important; background: #fff !important; color: #000 !important; }
  details > summary { list-style: none; }
}

/* Marka: tek satır, "can" vurgulu */
.marka { white-space: nowrap; flex-shrink: 0; }
/* logo tuşu: yazının x yüksekliğinden biraz büyük (09.11) */
.marka { display: inline-flex; align-items: center; gap: .45em; }
.marka-tus { width: 1.6em; height: 1.6em; flex-shrink: 0; }
.marka-can { color: var(--marka-can); }
.ust .marka-can { color: var(--marka-can-koyu-zemin); }
@media (min-width: 1201px) {
  .ust-menu { margin-left: var(--bosluk-4); }
  .ust-menu > ul { gap: 2px; }
  .menu-kat summary { padding: 0 10px; }
}

/* Sayfa zemini (09.11, C "Işık lekeleri"): kartlar ve girdiler beyaz kalır */
body { background-color: var(--sayfa-zemin); background-image: radial-gradient(55rem 38rem at 0% 0%, var(--sayfa-isik-1) 0%, transparent 65%), radial-gradient(48rem 36rem at 100% 35%, var(--sayfa-isik-2) 0%, transparent 62%), radial-gradient(50rem 30rem at 30% 100%, var(--sayfa-isik-3) 0%, transparent 60%); background-repeat: no-repeat; background-attachment: fixed; }
@media (max-width: 1200px) { body { background-attachment: scroll; background-size: 100% 100vh; } }
.alt-baglanti { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.alt-baglanti:hover { color: var(--renk-vurgu); }

/* Işık düğmesi (09.11): sol altta lamba; açık temada dolu + ışık, koyuda boş; tek renk (sarı yok, 09.11 Emin) */
.lamba { position: fixed; left: var(--bosluk-4); bottom: calc(var(--bosluk-4) + env(safe-area-inset-bottom)); z-index: 30; width: 3rem; height: 3rem; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--renk-cizgi); background: var(--renk-yuzey); color: var(--renk-metin); box-shadow: 0 4px 14px rgb(0 0 0 / .14); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .16s ease-out; }
.lamba svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.lamba-cam { fill: currentColor; transition: fill .25s ease-out; }
:root[data-theme="dark"] .lamba-cam { fill: none; }
.lamba-isin { transition: opacity .25s ease-out; }
:root[data-theme="dark"] .lamba-isin { opacity: 0; }
.lamba:focus-visible { outline: 3px solid var(--renk-odak); outline-offset: 2px; }
@media (hover: hover) { .lamba:hover { transform: translateY(-2px); } }
.lamba:active { transform: scale(.94); }
@media (max-width: 720px) { .lamba { bottom: calc(64px + env(safe-area-inset-bottom) + var(--bosluk-3)); left: var(--bosluk-3); } }
@media (prefers-reduced-motion: reduce) { .lamba, .lamba-cam, .lamba-isin { transition: none; } }

/* ---- Rehber ---- */
.rehber-yazi { max-width: var(--genislik-icerik); }
.rehber-yazi h2 { margin-top: var(--bosluk-6); }
.rehber-yazi p, .rehber-yazi li { line-height: 1.7; }
.rehber-meta { font-size: var(--fs-sm); color: var(--renk-metin-2); }
.rehber-yazi .not { margin: var(--bosluk-4) 0 var(--bosluk-5); }
.rehber-tablo { margin: var(--bosluk-4) 0; mask-image: none !important; -webkit-mask-image: none !important; }
.rehber-tablo table { min-width: 0; font-size: var(--fs-sm); }
.rehber-tablo caption { text-align: left; font-weight: 700; padding-bottom: var(--bosluk-2); }
.rehber-tablo th { font-weight: 400; white-space: normal; }
.rehber-tablo td { text-align: right; }
.rehber-tablo tr.vurgu th, .rehber-tablo tr.vurgu td { font-weight: 700; color: var(--renk-vurgu); border-bottom: 0; border-top: 2px solid var(--renk-vurgu); }
.rehber-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bosluk-3); margin: var(--bosluk-6) 0 var(--bosluk-5); padding: var(--bosluk-4); background: var(--renk-zemin-2); border-radius: var(--kose-orta); }
.rehber-cta p { margin: 0; font-weight: 700; }
/* İletişim formu */
.iletisim-form { background: var(--renk-yuzey); border: 1px solid var(--renk-cizgi); border-radius: var(--kose-buyuk); padding: var(--bosluk-4); box-shadow: var(--golge-1); margin: var(--bosluk-4) 0 var(--bosluk-5); }
.iletisim-form textarea { display: block; width: 100%; box-sizing: border-box; min-height: 9rem; resize: vertical; border: 1px solid var(--renk-cizgi); border-radius: var(--kose-orta); background: var(--renk-zemin); color: var(--renk-metin); font: inherit; font-size: var(--fs-md); line-height: 1.5; padding: var(--bosluk-3); }
.iletisim-form textarea:focus { outline: none; box-shadow: var(--odak-halka); border-color: var(--renk-vurgu); }
.iletisim-form textarea[aria-invalid="true"] { outline: 2px solid var(--renk-hata); outline-offset: 2px; }
.iletisim-form .ipucu-ic { font-weight: normal; color: var(--renk-metin-2); font-size: var(--fs-sm); }
.iletisim-form .bal { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.iletisim-form .dugmeler { margin-top: var(--bosluk-3); }
.iletisim-form button[disabled] { opacity: .6; cursor: wait; }
.iletisim-durum { min-height: 1.5em; margin: var(--bosluk-2) 0 0; font-size: var(--fs-sm); }
.iletisim-durum.tamam { color: var(--renk-basari); }
.iletisim-durum.hata { color: var(--renk-hata); }