/* BBÖ Grup & Event — ortak tasarım sistemi CSS
   Kaynak: outputs/2026-09-03-bbo-grup-web-sitesi/TASARIM_SISTEMI.md (bire bir).
   Kurallar: text-transform / text-shadow / box-shadow YOK · yarıçap 0 (form alanı 2px)
   · altın yalnız kapalı listedeki 7 yerde · sol eksen · 8 px ritim.
   Sayfaya özel stil BURAYA yazılmaz → varlik/css/sayfa-<ad>.css (README). */

/* ── 1 · Fontlar (self-host, TR alt kümesi doğrulandı) ─────────────────── */
/* Faz 4: değişken fontlar kullanılan aralığa daraltıldı (wght 400–500, opsz 18–72; VARLIK/font/INSTANCING-NOTU.md) — 323 → 161 KB */
@font-face{font-family:"Newsreader";src:url("/varlik/font/Newsreader-var2.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/varlik/font/Newsreader-Italic-var2.woff2") format("woff2");font-weight:400 500;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/varlik/font/HankenGrotesk-var2.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/varlik/font/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/varlik/font/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ── 2 · Tokenlar (TASARIM_SISTEMI §2–§4) ───────────────────────────────── */
:root{
  --zemin:#0C0B0A;--yuzey:#161412;--cizgi:#2A2723;--cizgi-kuv:#5A544C;
  --baslik:#F4F1EA;--govde:#D9D4CB;--ikincil:#A39E95;
  --altin:#CE9F51;--altin-cta-metin:#0C0B0A;
  --fildisi:#F3EEE6;--fil-murekkep:#0C0B0A;--fil-govde:#3A3631;--fil-ikincil:#5C564E;--altin-fil:#876326;
  --odak:var(--altin);
  --u:8px;
  --kenar:20px;--oluk:16px;--bolum:64px;--bolum-ic:32px;--ust-h:56px;
  --icerik-max:1312px;
  --f-display:"Newsreader",Georgia,serif;
  --f-govde:"Hanken Grotesk",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",Menlo,monospace;
  /* Tipografi ölçeği — 390 sütunu */
  --p-hero:48px;--p-h2:34px;--p-h1vaka:40px;--p-alinti:24px;--p-an:20px;--p-ad:24px;
  --p-govde:17px;--p-arayuz:15px;--p-kunye:11px;--p-menu-mobil:28px;
  --cerez-yer:0px;
}
@media (min-width:52.125rem){ /* 834 */
  :root{--kenar:40px;--oluk:20px;--bolum:96px;--bolum-ic:40px;--ust-h:64px;
    --p-hero:56px;--p-h2:44px;--p-h1vaka:56px;--p-alinti:28px;--p-an:22px;--p-ad:26px;
    --p-govde:18px;--p-arayuz:15px;--p-kunye:12px}
}
@media (min-width:80rem){ /* 1280 → 1440 sütunu; hero 834–1440 arası doğrusal büyür (§3 satır ölçüsü) */
  :root{--kenar:64px;--oluk:24px;--bolum:128px;--bolum-ic:48px;
    --p-hero:clamp(56px,calc(56px + 40 * (100vw - 834px) / 606),96px);
    --p-h2:56px;--p-h1vaka:72px;--p-alinti:32px;--p-an:24px;--p-ad:28px;
    --p-govde:19px;--p-arayuz:16px;--p-kunye:12px}
}

/* ── 3 · Sıfırlama ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--zemin);color:var(--govde);scroll-padding-top:calc(var(--ust-h) + 16px)}
body{margin:0;font:400 var(--p-govde)/1.6 var(--f-govde);font-optical-sizing:auto;font-synthesis:none;min-height:100svh;padding-bottom:var(--cerez-yer)}
h1,h2,h3,h4,p,ul,ol,figure,address{margin:0}
ul,ol{padding:0;list-style:none}
img,video,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
address{font-style:normal}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--odak);outline-offset:3px}
.fildisi :focus-visible{outline-color:var(--altin-fil)}
::selection{background:var(--baslik);color:var(--zemin)}   /* C28: altın kapalı listede değil */

/* ── 4 · Tipografi rolleri (§3) ─────────────────────────────────────────── */
em{font-family:var(--f-display);font-style:italic;font-weight:400}          /* italik = an sınıfı, her yerde */
.display{font:500 var(--p-hero)/1 var(--f-display);font-variation-settings:"opsz" 72;letter-spacing:-.025em;color:var(--baslik)}
.h2,h2{font:500 var(--p-h2)/1.08 var(--f-display);font-variation-settings:"opsz" 48;letter-spacing:-.02em;color:var(--baslik)}
.h1-vaka{font:500 var(--p-h1vaka)/1.04 var(--f-display);font-variation-settings:"opsz" 60;letter-spacing:-.02em;color:var(--baslik)}
.alinti{font:italic 400 var(--p-alinti)/1.35 var(--f-display);font-variation-settings:"opsz" 24;color:var(--baslik)}
.an{font:italic 400 var(--p-an)/1.3 var(--f-display);font-variation-settings:"opsz" 18;color:var(--baslik)}
.ad,h3{font:500 var(--p-ad)/1.2 var(--f-display);font-variation-settings:"opsz" 24;letter-spacing:-.01em;color:var(--baslik)}
.govde{font:400 var(--p-govde)/1.6 var(--f-govde);max-width:34em}
.arayuz{font:500 var(--p-arayuz)/1.4 var(--f-govde)}
.kunye{font:500 var(--p-kunye)/1.5 var(--f-mono);letter-spacing:.12em;font-variant-numeric:tabular-nums lining-nums;color:var(--ikincil)}
.us{font:500 .7em/1 var(--f-mono);vertical-align:super;letter-spacing:0;color:var(--ikincil);margin-left:.2em;display:inline-block;min-width:.6em;text-align:left}   /* min-width: JS üs rakamı gelmeden düğme genişliği zıplamasın */
.roman{font-style:normal}
.baglanti{color:var(--baslik);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--ikincil)}
.baglanti:hover{text-decoration-color:var(--baslik)}
.baglanti.arayuz{display:inline-block;padding-block:12px;margin-block:-12px}   /* dokunma hedefi ≥44 px; negatif marj görsel ritmi korur (WEB_PROJESI "telafi edilmiş iç boşluk") */
p+p{margin-top:16px}
h2,h3,.h2,.ad,.h1-vaka,.kart__baslik{text-wrap:balance}
p,.an,.alinti,.kart__cumle,figcaption{text-wrap:pretty}
.tek{white-space:nowrap}   /* A7: başlığın son kelimesi + üs rakam tek birim */

/* ── 5 · Yerleşim (§4) ──────────────────────────────────────────────────── */
.kap{max-width:calc(var(--icerik-max) + 2 * var(--kenar));margin-inline:auto;padding-inline:var(--kenar)}
.izgara{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--oluk)}
@media (min-width:52.125rem){.izgara{grid-template-columns:repeat(12,minmax(0,1fr))}}
.bolum{padding-block-start:var(--bolum)}
main{padding-block-end:var(--bolum)}
.bolum__bas{margin-bottom:var(--bolum-ic)}
.bolum__bas .govde{margin-top:16px}
.bolum__son{margin-top:var(--bolum-ic)}
.gorsel-gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.atla{position:absolute;left:var(--kenar);top:-100px;z-index:50;background:var(--baslik);color:var(--zemin);padding:12px 16px;min-height:44px;display:inline-flex;align-items:center;font:500 var(--p-arayuz)/1 var(--f-govde);text-decoration:none}
.atla:focus{top:8px}

/* ── 6 · Düğmeler ───────────────────────────────────────────────────────── */
.dugme{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;font:500 var(--p-arayuz)/1.4 var(--f-govde);text-decoration:none;border:1px solid var(--ikincil);color:var(--baslik);border-radius:0;transition:border-color .2s,background-color .2s,color .2s}
.dugme:hover{border-color:var(--baslik)}
.dugme--altin{background:var(--altin);border-color:var(--altin);color:var(--altin-cta-metin)}   /* sayfa başına TEK */
.dugme--altin:hover{background:var(--baslik);border-color:var(--baslik)}
.dugme--cizgi{border-color:var(--ikincil)}
.dugme--metin{border:0;min-height:44px;padding:0 8px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ikincil)}
.dugme--metin:hover{text-decoration-color:var(--baslik)}
.dugme--fil{border:0;padding:0 0 4px;min-height:44px;align-items:flex-end;border-bottom:2px solid var(--altin-fil);color:var(--fil-murekkep);border-radius:0}   /* kutu 44 px, metin+çizgi altta */
.dugme--fil:hover{border-color:var(--fil-murekkep)}
.cta-satir{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}

/* ── 7 · Üst bilgi + mobil menü (§5.1) ─────────────────────────────────── */
.ust{position:sticky;top:0;z-index:30;background:var(--zemin);height:var(--ust-h)}
.ust__ic{display:flex;align-items:center;justify-content:space-between;height:100%;gap:16px}
.ust__logo{display:flex;align-items:center;height:44px;min-width:44px}
.ust__logo img{width:42px;height:28px}
.ust__menu-dugme{display:none;min-width:44px;min-height:44px;padding:0 4px;font:500 var(--p-arayuz)/1 var(--f-govde);color:var(--baslik)}
.ust__nav{display:flex;align-items:center;gap:32px}
.ust__liste{display:flex;gap:24px}
.ust__liste a,.ust__dil{font:500 var(--p-arayuz)/1.4 var(--f-govde);color:var(--govde);text-decoration:none;padding:12px 8px;margin-inline:-8px;display:inline-block}   /* yatay 8 px telafi: kısa kelime (İşler 31 px) 44 px kutuya; çizgi text-decoration ile yalnız kelimenin altında */
.ust__liste a:hover,.ust__liste a[aria-current="page"]{color:var(--baslik);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:11px}
.ust__yan{display:flex;align-items:center;gap:24px}
.ust__dil{font:500 12px/1.5 var(--f-mono);letter-spacing:.12em;color:var(--ikincil);padding:13px 14px;margin-inline:-14px}
.ust__dil:hover{color:var(--baslik);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:11px}
.ust__cta{min-height:44px;padding:0 16px}   /* TS §5.1 40 px idi → dokunma hedefi 44 (Faz 4 erişilebilirlik) */
@media (max-width:52.0625rem){
  html.js .ust__menu-dugme{display:inline-flex;align-items:center;justify-content:center}
  html.js .ust__nav{display:none;position:fixed;inset:var(--ust-h) 0 0 0;background:var(--zemin);z-index:40;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--bolum-ic);padding:var(--bolum-ic) var(--kenar);overflow-y:auto}
  html.js .ust__nav.acik{display:flex}
  html.js .ust__liste{flex-direction:column;gap:8px}
  html.js .ust__liste a{font:500 var(--p-menu-mobil)/1.2 var(--f-display);font-variation-settings:"opsz" 24;letter-spacing:-.01em;color:var(--baslik);padding:8px 0}
  html.js .ust__yan{flex-direction:column;align-items:flex-start;gap:24px}
  html:not(.js) .ust{height:auto;position:static}
  html:not(.js) .ust__ic{flex-wrap:wrap;padding-block:8px}
  html:not(.js) .ust__nav{flex-wrap:wrap;gap:8px 16px;width:100%}
  html:not(.js) .ust__liste{flex-wrap:wrap;gap:0 16px}
  html:not(.js) .ust__yan{gap:16px}
  .ust__cta{display:none}
  html:not(.js) .ust__cta{display:inline-flex}
}
@media (max-width:52.0625rem) and (min-width:36rem){html.js .ust__cta{display:inline-flex}}
body.menu-acik{overflow:hidden}
@media (max-width:79.9375rem){.ana .ust__cta{display:none}}   /* B18: 834'te ilk ekranda iki "Keşif planlayın" → ana sayfada hero CTA tek */

/* ── 8 · Perde hero (§5.2 — imza bileşen, yalnız / ve /en/) ────────────── */
.hero__sahne{position:relative}
.perde{position:relative;height:62svh;min-height:420px;overflow:hidden;background:var(--zemin);--perde:50%;user-select:none;-webkit-user-select:none}
.perde__yuz{position:absolute;inset:0}
.perde__yuz picture,.perde__yuz img,.perde__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.perde__video{opacity:0;transition:opacity .4s}
.perde__video.oynuyor{opacity:1}
.perde__yuz--an{clip-path:inset(0 0 0 var(--perde))}
.perde__scrim{position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;background:linear-gradient(to top,rgba(12,11,10,.72) 0%,rgba(12,11,10,.50) 74%,rgba(12,11,10,.25) 86%,rgba(12,11,10,0) 100%)}
/* Perde ölçüsü (Faz 4 tur 2, D1 — qc/faz4-tur2/SCRIM-ADAYLAR-TUR2.txt): TS §7 sınırı "ortalama luminans işlenmemişin ≥%72'si".
   Faz 2'nin C3 şekli (.78/.58/.30, %46) 1440'ta perde %100'de %69,3 ve %50'de %73,4 ölçüldü (CSS yorumu "%73–90" yazıyordu — yanlıştı, B8).
   D1 (.72/.50/.25, %46) ölçüm: 1440 → %0 89,2 · %50 76,4 · %100 72,6 (hepsi ≥72); 390 → 95/97/80. Bedel: h1 en kötü kontrast 4,27 → 3,28:1
   (96 px büyük metin eşiği 3:1 — geçer; 4,3'ün altına indi, bilinçli). Daha açık aday (D2 .70/.45/.20) h1'i 2,1:1'e düşürdü → alınmadı. */
.perde__cizgi{position:absolute;top:0;bottom:0;left:var(--perde);width:2px;margin-left:-1px;background:var(--altin);pointer-events:none;z-index:2}   /* A3: her genişlikte 2 px */
.perde__etiket{position:absolute;bottom:24px;z-index:3;pointer-events:none;transition:opacity .2s;margin:0}
.perde__etiket--kurulum{left:var(--kenar);color:var(--govde)}
.perde__etiket--an{right:var(--kenar);font-size:var(--p-an)}
.perde--kurulum-gizli .perde__etiket--kurulum,.perde--an-gizli .perde__etiket--an{opacity:.4}
.perde__eksen{position:absolute;top:50%;left:-24px;width:calc(100% + 48px);height:48px;margin:-24px 0 0;z-index:5;-webkit-appearance:none;appearance:none;background:transparent;cursor:ew-resize;touch-action:pan-y}
.perde__eksen::-webkit-slider-runnable-track{height:48px;background:transparent}
.perde__eksen::-moz-range-track{height:48px;background:transparent}
/* A3: tutamaç 48 px dolgulu altın, koyu bar 6×32 */
.perde__eksen::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:48px;height:48px;border:0;border-radius:0;background:linear-gradient(var(--zemin),var(--zemin)) center/6px 32px no-repeat var(--altin);cursor:ew-resize}
.perde__eksen::-moz-range-thumb{width:48px;height:48px;border:0;border-radius:0;background:linear-gradient(var(--zemin),var(--zemin)) center/6px 32px no-repeat var(--altin);cursor:ew-resize}
/* A3: ilk 3 sn'de tek yumuşak nefes (çizgi + tutamaç); reduced-motion'da statik (§21 animasyonu kapatır) */
.perde--nefes .perde__cizgi{animation:perde-nefes 1.6s ease-in-out .8s 1}
.perde--nefes .perde__eksen::-webkit-slider-thumb{animation:perde-nefes-tutamac 1.6s ease-in-out .8s 1}
@keyframes perde-nefes{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes perde-nefes-tutamac{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
/* Dikey perde (834 altı, [data-dikey]): an yüzü alt yarı, çizgi yatay, eksen dikey (writing-mode).
   Yalnız CSS medya sorgusuyla — JS sınıfıyla yapılınca eksen ilk boyamadan SONRA yer değiştiriyor ve PSI CLS 0,079–0,134 ölçtü (final tur, layout-shifts: input.perde__eksen). */
@media (max-width:52.0625rem){
  .perde[data-dikey] .perde__yuz--an{clip-path:inset(var(--perde) 0 0 0)}
  .perde[data-dikey] .perde__cizgi{top:var(--perde);bottom:auto;left:0;right:0;width:auto;height:2px;margin:-1px 0 0}
  .perde[data-dikey] .perde__eksen{top:-24px;left:50%;width:48px;height:calc(100% + 48px);margin:0 0 0 -24px;writing-mode:vertical-lr;cursor:ns-resize;touch-action:pan-x}
  .perde[data-dikey] .perde__eksen::-webkit-slider-runnable-track{width:48px;height:auto}
  .perde[data-dikey] .perde__eksen::-webkit-slider-thumb{background:linear-gradient(var(--zemin),var(--zemin)) center/32px 6px no-repeat var(--altin);cursor:ns-resize}
  .perde[data-dikey] .perde__ipucu{top:calc(var(--perde) + 40px);left:50%;transform:translateX(-50%)}
  /* etiketler: kurulum üst-sol (üst yüz, gündüz, scrim yok → koyu çip; 390'da çipsiz 2,31:1 ölçüldü), an alt-sağ */
  .perde[data-dikey] .perde__etiket--kurulum{top:24px;bottom:auto;background:rgba(12,11,10,.85);padding:8px 12px}
}
/* Fotoğraf perdesi (ikinci çift, / — kamu: Bayrampaşa lansman salonu boş ↔ dolu): video yok, kutu kaynak oranında; metin binmez → scrim yok, etiketler koyu çipte */
.perde--foto{height:auto;min-height:0;aspect-ratio:4/5}
.perde--foto .perde__etiket{background:rgba(12,11,10,.85);padding:8px 12px}
.perde__son{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;padding-top:16px}
.perde__son p{margin:0}
/* ≥834: .perde{height:min(…)} kuralı sonra geldiği için .perde.perde--foto ile yükseklik auto'ya zorlanır — aksi hâlde aspect-ratio genişliği YÜKSEKLİKTEN türetip 1486/1600 px yatay taşma yaptı (tur 2 ölçümü) */
@media (min-width:52.125rem){.perde.perde--foto{height:auto;min-height:0;aspect-ratio:16/9;max-height:min(calc(100svh - var(--ust-h)),900px)}.perde--foto .perde__etiket{bottom:24px}}
.perde__eksen:focus-visible{outline:0}
.perde__eksen:focus-visible::-webkit-slider-thumb{outline:2px solid var(--odak);outline-offset:3px}
.perde__eksen:focus-visible::-moz-range-thumb{outline:2px solid var(--odak);outline-offset:3px}
.perde__ipucu{position:absolute;top:50%;left:calc(var(--perde) + 32px);transform:translateY(-50%);z-index:3;pointer-events:none;background:rgba(12,11,10,.85);padding:8px 12px;color:var(--govde);white-space:nowrap;transition:opacity .3s}
.perde__ipucu.sonuk{opacity:0}
.perde__durdur{position:absolute;top:16px;right:var(--kenar);z-index:6;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--ikincil);background:rgba(12,11,10,.85);color:var(--baslik);font:500 12px/1 var(--f-mono);letter-spacing:.12em}
.perde__durdur:hover{border-color:var(--baslik)}
.hero__etiket{margin:var(--bolum-ic) 0 16px}
.hero__baslik{color:var(--baslik)}
.hero__baslik em{font-weight:500;font-variation-settings:"opsz" 72}
.hero__roman,.hero__italik{display:block}
.hero__italik{margin-top:16px}
.hero__alt{padding-top:var(--bolum-ic)}
.hero__para{grid-column:1/-1}
.hero__cta{grid-column:1/-1;margin-top:8px}
@media (min-width:52.125rem){
  .perde{height:min(calc(100svh - var(--ust-h)),900px);min-height:520px}
  .perde__etiket{bottom:32px}
  .hero__etiket{position:absolute;top:16px;left:var(--kenar);z-index:3;margin:0;background:rgba(12,11,10,.85);padding:8px 12px;color:var(--govde);pointer-events:none}
  .hero__baslik{position:absolute;left:0;right:0;bottom:96px;z-index:3;pointer-events:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--oluk);padding-inline:var(--kenar);max-width:calc(var(--icerik-max) + 2 * var(--kenar));margin-inline:auto}
  .hero__roman{grid-column:1/7;padding-right:24px;align-self:end}
  .hero__italik{grid-column:7/13;padding-left:24px;align-self:end;margin:0}
  .hero__para{grid-column:1/7;margin:0}
  .hero__cta{grid-column:7/13;margin:0;align-self:start}
}

/* ── 9 · Dikey (hizmet) satırı (§5.3) ───────────────────────────────────── */
.dikeyler{border-top:1px solid var(--cizgi)}
.dikey{display:grid;grid-template-columns:1fr;gap:8px var(--oluk);padding:24px 0;border-bottom:1px solid var(--cizgi);text-decoration:none;color:inherit;transition:background-color .2s;margin-inline:calc(-1 * var(--kenar));padding-inline:var(--kenar)}
.dikey:hover{background:var(--yuzey)}
.dikey__no{margin:0}
.dikey__ad{margin:0}
.dikey__tanim{max-width:34em}
.dikey__tanim .an{display:block;margin-top:12px}
.dikey__not{display:block;margin-top:12px;max-width:34em}   /* dürüst arşiv notu (mono): kaydı olmayan dikeyde rakam yerine */
.dikey__git{display:inline-block;margin-top:12px;color:var(--baslik);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ikincil);font:500 var(--p-arayuz)/1.4 var(--f-govde)}
.dikey:hover .dikey__git{text-decoration-color:var(--baslik)}
@media (min-width:52.125rem){
  .dikey{grid-template-columns:repeat(12,minmax(0,1fr));padding-block:32px}
  .dikey__no{grid-column:1/3;padding-top:8px}
  .dikey__ad{grid-column:3/7}
  .dikey__tanim{grid-column:7/13}
}

/* ── 10 · İş kartı kurulum→an (§5.4) ────────────────────────────────────── */
.kartlar{display:grid;grid-template-columns:1fr;gap:var(--bolum-ic) var(--oluk)}
@media (min-width:52.125rem){.kartlar{grid-template-columns:1fr 1fr}}
.kart{display:block;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.kart__gorsel{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--yuzey)}
.kart__gorsel--genis{aspect-ratio:16/9}
.kart__yuz{position:absolute;inset:0}
.kart__yuz picture{height:100%}
.kart__yuz img{width:100%;height:100%;object-fit:cover}   /* A5: <picture> auto yükseklik → img %100 çözülmüyordu (16:9 kare 4:5 kutuda %55 boş) */
.kart__yuz--an{opacity:0;transition:opacity .4s}
.kart:hover .kart__yuz--an,.kart:focus-visible .kart__yuz--an,.kart:focus-within .kart__yuz--an,.kart.kart--an .kart__yuz--an{opacity:1}   /* focus-within: bağlantısız (article, tabindex=0) kart klavyede de an yüzünü gösterir */
.kart__gorsel::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--altin);opacity:0;pointer-events:none}
.kart--cift:hover .kart__gorsel::after,.kart--cift:focus-visible .kart__gorsel::after,.kart--cift:focus-within .kart__gorsel::after,.kart--cift.kart--an .kart__gorsel::after{animation:kart-kenar .4s linear}
@keyframes kart-kenar{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.kart__alt{padding-top:16px}
.kart__etiket{margin:0 0 8px}
.kart__baslik{margin:0}
.kart__rol{margin:8px 0 0}
.kart__cumle{margin:12px 0 0;max-width:34em}
.kart__kunye{margin:12px 0 0}                                                    /* altın yalnız künye RAKAMI taşırsa (saat) → .kart__kunye .rakam */
.kart__kunye .rakam{color:var(--altin)}
.kart:hover .kart__baslik{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* ── 11 · Filtre çubuğu (§5.5, /isler/) ─────────────────────────────────── */
.filtre{display:flex;flex-direction:column;gap:16px;margin-bottom:var(--bolum-ic)}
html:not(.js) .filtre{display:none}
.filtre__grup{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px}
.filtre__baslik{margin:0;min-width:96px}
.filtre__dugme{font:500 var(--p-arayuz)/1.4 var(--f-govde);color:var(--govde);padding:8px 9px;margin-inline:-9px;border-bottom:2px solid transparent;min-height:44px}   /* yatay 9 px telafi: EN "All" 26 px → 44 */
.filtre__dugme:hover{color:var(--baslik)}
.filtre__dugme[aria-pressed="true"]{color:var(--baslik);border-bottom-color:var(--altin)}   /* altın listesi (3) */
.filtre__dugme[aria-pressed="true"] .us{color:var(--altin)}
.filtre__durum{margin:0}
.filtre__bos{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:var(--bolum-ic) 0}   /* metin + temizle düğmesi tek satır; aralık gap ile (margin değil) */

/* ── 12 · Süreç şeridi (§5.7) ───────────────────────────────────────────── */
.surec{display:grid;grid-template-columns:1fr;gap:var(--bolum-ic) var(--oluk)}
@media (min-width:52.125rem){.surec{grid-template-columns:repeat(2,1fr)}}   /* B13: 3 sütun 238 px = 25 kar/satır → 2 sütun (37) */
@media (min-width:80rem){.surec{grid-template-columns:repeat(3,1fr)}}      /* B13: 5 sütun 243 px = 25 kar/satır → 3 sütun (421 px ≈ 45) */
.surec__adim{position:relative}
.surec__kare{position:relative;aspect-ratio:1;overflow:hidden;background:var(--yuzey)}
.surec__kare picture,.surec__kare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}   /* A4: 5 kare kutuyu doldurmuyordu (%44 boş) */
.surec__kare.ton-kurulum img{filter:saturate(.7) brightness(.85)}   /* B11: gece karesi (ton-dugun, filter:none) 1. bakış olsun */
.surec__no{margin:16px 0 8px}
.surec__baslik{margin:0;font-size:var(--p-ad)}
.surec__metin{margin-top:8px}
.surec__metin em{display:block;margin-top:8px}

/* ── 13 · İki kapı (§5.8 kısa hâli; /iletisim/ tam) ─────────────────────── */
.kapilar{display:grid;grid-template-columns:1fr}
@media (min-width:52.125rem){.kapilar{grid-template-columns:1fr 1fr}}
.kapi{padding:var(--bolum-ic) var(--kenar);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.kapi__baslik{margin:0}
.kapi .govde{max-width:30em}
.kapi__cta{margin-top:16px}
.fildisi{background:var(--fildisi);color:var(--fil-govde)}
.fildisi h2,.fildisi h3,.fildisi .ad,.fildisi em,.fildisi .h2{color:var(--fil-murekkep)}
.fildisi .kunye{color:var(--fil-ikincil)}
.fildisi a{color:var(--fil-murekkep)}
.fildisi .dugme{border-color:var(--fil-ikincil);color:var(--fil-murekkep)}
.fildisi .dugme--fil{border-color:var(--altin-fil)}                     /* yüzey bağlamı (0,2,0) değişkeni (0,1,0) eziyordu → fildişi kapının tek altını (5) */
.fildisi .dugme--fil:hover{border-color:var(--fil-murekkep)}
.yuzey{background:var(--yuzey)}
@media (min-width:80rem){.kapi{padding:var(--bolum) var(--kenar)}.kapilar .kapi:first-child{padding-left:max(var(--kenar),calc((100vw - var(--icerik-max)) / 2))}.kapilar .kapi:last-child{padding-right:max(var(--kenar),calc((100vw - var(--icerik-max)) / 2))}}

/* ── 14 · Form alanı (§5.8) ─────────────────────────────────────────────── */
.alan{display:flex;flex-direction:column;gap:8px}
.alan__etiket{font:500 var(--p-arayuz)/1.4 var(--f-govde);color:var(--baslik)}
.alan__yardim{margin:0}
.alan input,.alan select,.alan textarea{width:100%;min-height:48px;padding:12px 16px;font:400 var(--p-govde)/1.4 var(--f-govde);color:var(--baslik);background:transparent;border:1px solid var(--ikincil);border-radius:2px}
.alan textarea{min-height:144px;resize:vertical}
.alan input:focus-visible,.alan select:focus-visible,.alan textarea:focus-visible{outline:2px solid var(--odak);outline-offset:3px}
.alan__hata{color:var(--govde);margin:0}
.fildisi .alan__etiket{color:var(--fil-murekkep)}
.fildisi .alan__hata{color:var(--fil-govde)}                          /* --govde fildişide 1,28:1 → fil-govde 10,38:1 */
.fildisi .alan__yardim{color:var(--fil-ikincil)}
.fildisi .alan input,.fildisi .alan select,.fildisi .alan textarea{color:var(--fil-murekkep);border-color:var(--fil-ikincil)}
.form-not{margin-top:16px}

/* ── 15 · Vaka sayfası (§5.6) ───────────────────────────────────────────── */
.vaka__bas{grid-column:1/-1}
.vaka__govde{grid-column:1/-1}
.vaka__ray{grid-column:1/-1}
.ray{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-items:baseline;border-top:1px solid var(--cizgi);padding-top:16px}
.ray__deger{font:500 var(--p-ad)/1.2 var(--f-mono);letter-spacing:0;color:var(--altin)}   /* altın listesi (4) */
.kare-cifti{display:grid;grid-template-columns:1fr;gap:var(--oluk)}
@media (min-width:52.125rem){
  .vaka__bas{grid-column:1/9}
  .vaka__govde{grid-column:1/8}
  .vaka__ray{grid-column:9/13;position:sticky;top:96px;align-self:start}
  .kare-cifti{grid-template-columns:1fr 1fr}
}
.kare figcaption{margin-top:8px}
.sonraki{margin-top:var(--bolum-ic);border-top:1px solid var(--cizgi);padding-top:16px}

/* ── 16 · Alt bilgi (§5.9 — tek sütun, sol eksen) ───────────────────────── */
.alt{background:var(--yuzey);border-top:1px solid var(--cizgi);padding-block:var(--bolum)}
.alt__ic{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.alt__logo{display:inline-flex;align-items:center;min-width:44px;min-height:44px;margin-block:-8px}
.alt__cift{font:500 var(--p-h2)/1.08 var(--f-display);font-variation-settings:"opsz" 48;letter-spacing:-.02em;color:var(--baslik)}
.alt__cift em{font-weight:500;font-variation-settings:"opsz" 48}
.alt--ic .alt__cift,.alt--ic .alt__cift em{font-size:var(--p-ad);line-height:1.2;font-variation-settings:"opsz" 24}   /* B21: çift yalnız / alt bilgisinde büyük */
.alt__satir{display:flex;flex-direction:column;gap:8px}
.alt__etiket{margin:0}
.alt__adres{color:var(--govde);line-height:1.6}
.alt__adres a,.alt__liste a{color:var(--govde);text-decoration:none;border-bottom:1px solid transparent}
.alt__adres a:hover,.alt__liste a:hover{color:var(--baslik);border-bottom-color:var(--baslik)}
.alt__liste{display:flex;flex-wrap:wrap;gap:8px 24px}
.alt__arsiv,.alt__telif{margin:0}
.alt__telif{font-size:11px}

/* ── 17 · Çerez şeridi (§5.10) — yalnız ölçüm çerezi varsa derlenir ─────── */
.cerez{position:fixed;left:0;right:0;bottom:0;z-index:20;min-height:56px;background:var(--yuzey);border-top:1px solid var(--cizgi);display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:8px var(--kenar)}
.cerez__metin{margin:0;font-size:15px}
.cerez__dugmeler{display:flex;gap:8px}

/* ── 18 · 404 (§5.11) ───────────────────────────────────────────────────── */
.d404{position:relative;min-height:calc(100svh - var(--ust-h));padding-block:var(--bolum)}
.d404::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--altin);pointer-events:none}   /* altın listesi (7) */
.d404__ic{position:relative;z-index:1;max-width:calc(50% - 32px);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
@media (max-width:52.0625rem){.d404__ic{max-width:none;padding-right:16px}.d404::after{left:auto;right:var(--kenar)}}   /* B22: çizgi metnin üstünden geçmesin */
.d404__liste{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px}

/* ── 19 · Fotoğraf işleme (§7) — yalnız ton; kadraj object-position ile ── */
.ton-kamu img{filter:saturate(.92) contrast(1.06)}
.ton-kurulum img{filter:saturate(.85) contrast(1.08)}
.ton-dugun img{filter:none}

/* ── 20 · Giriş animasyonu (≤12 px, 1,2 s emniyet JS'te) ───────────────── */
html.js .giris{opacity:0;transform:translateY(12px);transition:opacity .5s ease-out,transform .5s ease-out}
html.js .giris.giris--goster{opacity:1;transform:none}

/* ── 21 · Hareket azaltma ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html.js .giris{opacity:1;transform:none}
  .perde{--perde:50%!important}
  .perde__video{display:none}
}