/* furkantortcu.com v5 — 3B "patlatılmış kesit" sahnesi (v2-3d'den) + güncel hikâyenin kartları.
   Temel sistem (renk, font, bileşenler) style.css'ten gelir; burada yalnız sahne düzeni ve kartlar var. */

/* Sahne yarı saydam menünün altına uzanır: tuval her zaman ekranın tepesinden başlar (yerleşim hesapları buna göre).
   overflow:clip — yapışkan katmanın -100vh alt payı onu bölüm bitince 100vh taşırır, kesit sonraki bölümün üstüne
   biner. clip kaydırma kabı oluşturmaz, sticky bozulmaz (HATALAR-VE-DERSLER #18). */
.sahne{position:relative;margin-top:calc(-1 * var(--nav-h) - 1px);overflow:clip}

/* Yapışkan katman: tuval + ölçü çizgileri + yedek 2B çizim. Kartlar bunun üstünden kayar. */
.sahne-yapiskan{position:sticky;top:0;z-index:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;overflow:hidden;pointer-events:none}
#sahne-tuval{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
.sahne.hazir #sahne-tuval{opacity:1}

.sahne-olcu{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .5s ease}
.sahne.hazir[data-durum="hero"] .sahne-olcu,.sahne.hazir[data-durum="yapi"] .sahne-olcu{opacity:1}
.o-cizgi{fill:none;stroke:var(--blue);stroke-width:1.3;stroke-linecap:round}
.o-uzanti{fill:none;stroke:var(--blue);stroke-width:.8;stroke-dasharray:3 3}
.o-not{font-family:var(--sans);font-style:oblique 10deg;font-size:16px;font-weight:500;fill:var(--blue)}

/* 3B hazır olana kadar (ya da hiç olamazsa) 2B kesit çizimi görünür */
.sahne-yedek{position:absolute;top:calc(var(--nav-h) + 40px);right:var(--gut);width:min(40vw,480px)}
.sahne.bekliyor .sahne-yedek,.sahne.hazir .sahne-yedek{display:none}
.k-kolon{fill:var(--blue);opacity:.8}

.sahne-derinlik{position:absolute;right:var(--gut);bottom:22px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--blue);font-stretch:90%;opacity:0;transition:opacity .3s}
.sahne[data-durum="kat"] .sahne-derinlik{opacity:1}

/* Adımlar */
.adimlar{position:relative;z-index:1}
.adim{display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:calc(var(--nav-h) + 24px) 0 48px}
.adim[data-durum="kat"]{min-height:96vh;min-height:96svh}
.kart{width:min(100%,460px);padding:clamp(20px,2.4vw,30px);border:1px solid var(--line);
  background:color-mix(in oklch, var(--paper) 90%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kart>*:first-child{margin-top:0}
.kart-no{display:flex;gap:6px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--blue);font-stretch:90%}
.kart-no span+span{color:var(--muted)}
.kosul{display:inline-flex;align-items:center;gap:8px;margin-top:12px!important;padding:4px 10px;border:1px dashed var(--line);border-radius:2px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted)!important;font-stretch:90%}
.kart h2{margin-top:14px;font-size:clamp(28px,3.2vw,44px);line-height:1.06;letter-spacing:-.03em}
.kart h3{margin-top:12px;font-size:clamp(24px,2.4vw,34px);line-height:1.12;letter-spacing:-.02em}
.kart h3 small{display:block;margin-top:8px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-stretch:90%}
.kart>p{margin-top:14px;color:var(--muted)}
.kart .etiketler{margin-top:16px}
.yz-satir{display:flex;gap:12px;align-items:baseline;margin-top:18px!important;padding-top:14px;border-top:1px solid var(--line);color:var(--ink)!important}
/* Yapay zekâ kartı: her kattaki katkısı, kesitteki sırayla */
.yz-katlar{margin-top:16px;border-top:1px solid var(--line)}
.yz-katlar>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:2px 14px;padding:9px 0;border-bottom:1px solid var(--line)}
.yz-katlar dt{padding-top:3px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);font-stretch:90%}
.yz-katlar dd{margin:0;font-size:14.5px;line-height:1.45}
.adim.aktif .kart-no span:first-child{text-decoration:underline;text-underline-offset:4px}

/* Giriş kartı: çerçevesiz, büyük tipografi */
.adim-hero .kart{width:min(100%,620px,46vw);padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.adim-hero h1{margin-top:22px;font-size:clamp(40px,5vw,76px);line-height:1.03;letter-spacing:-.035em;font-weight:620}
.adim-hero h1 .satir{display:block}
.adim-hero h1 .vurgu{color:var(--blue)}
.kaydir-ipucu{display:inline-flex;align-items:center;gap:10px;margin-top:40px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-stretch:90%}
.kaydir-ipucu::before{content:"";width:1.5px;height:28px;background:linear-gradient(var(--blue),transparent)}
@media (prefers-reduced-motion:no-preference){
  .kaydir-ipucu::before{animation:ipucu 1.8s ease-in-out infinite}
}
@keyframes ipucu{0%,100%{transform:translateY(-4px);opacity:.4}50%{transform:translateY(4px);opacity:1}}

/* Yapınızı seçin */
.adim-yapi .kart{width:min(100%,500px)}
.modul-sec{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
.modul-sec button{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:3px;
  background:transparent;font-size:14.5px;text-align:left;line-height:1.25;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.modul-sec button::before{content:"";flex:none;width:14px;height:14px;border:1.5px solid currentColor;border-radius:2px}
.modul-sec button[aria-pressed="true"]{border-color:var(--blue);color:var(--ink)}
.modul-sec button[aria-pressed="true"]::before{background:var(--blue);border-color:var(--blue);box-shadow:inset 0 0 0 2px var(--paper)}
.modul-sec button[aria-pressed="false"]{color:var(--muted)}
.modul-sec button:hover{border-color:var(--ink)}
.yapi-cta{margin-top:22px}

/* İletişim formundaki kat seçimi */
.moduller{border:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
.moduller legend{grid-column:1 / -1;margin-bottom:8px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-stretch:90%}
.moduller label{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;font-family:var(--sans);font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--paper);cursor:pointer}
.moduller input{width:18px;height:18px;flex:none;accent-color:var(--blue);cursor:pointer}

/* ---------- mobil / tablet: model üstte, kart altta ---------- */
@media (max-width:900px){
  .adim{align-items:flex-end;padding:calc(var(--nav-h) + 16px) 0 20px}
  .adim[data-durum="kat"]{min-height:100vh;min-height:100svh}
  .adim-hero{align-items:flex-start}
  .kart,.adim-yapi .kart{width:100%;max-width:560px}
  .adim-hero .kart{width:100%;max-width:none}
  .kaydir-ipucu{display:none}
  .adim-hero h1{font-size:clamp(38px,8vw,60px)}
  .sahne-olcu{display:none}
  .sahne-yedek.kesit-cizim{display:block;top:calc(var(--nav-h) + 12px);left:0;right:0;width:min(78vw,380px);margin-inline:auto}
  .sahne[data-durum="hero"] .sahne-yedek{top:auto;bottom:16px}
  .sahne-derinlik{top:calc(var(--nav-h) + 12px);bottom:auto}
}
/* ---------- telefon (dik): kesit üstte yapışkan ve hep açık; kart hemen altında sabit durur, okurken kıpırdamaz ---------- */
@media (max-width:900px) and (orientation:portrait){
  .sahne{--sahne-h:46svh}
  .sahne-yapiskan{height:var(--sahne-h);margin-bottom:calc(-1 * var(--sahne-h));z-index:2;background:var(--paper);
    border-bottom:1px solid var(--line);pointer-events:auto}   /* altında kalan kartın düğmesine yanlışlıkla dokunulmasın */
  .sahne-derinlik{top:12px}                                    /* menü aşağı kaydırınca gizlenir */
  .adim,.adim[data-durum="kat"]{display:block;min-height:120svh;padding:0 0 24px}
  .adim-hero{padding-top:calc(var(--sahne-h) + 16px);min-height:0}
  .adim-yapi{min-height:0;padding-bottom:48px}
  /* kart kesitin hemen altında yapışır: adım boyunca yerinde durur, kesit o sırada canlanır */
  .adim:not(.adim-hero):not(.adim-yapi) .kart{position:sticky;top:calc(var(--sahne-h) + 8px)}   /* --sahne-h: sahne.js ekrana göre */
  .adim:not(.adim-hero):not(.adim-yapi) .kart.uzun{position:static}   /* pencereye sığmayan kart normal akar (sahne.js işaretler) */
  .kart{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;padding:16px 18px}
  .kart .etiketler{display:none}
  .kart h2{font-size:28px}
  .kart h3{font-size:26px}
  /* gövde metni: büyük ve koyu (küçük etiketler — aşama no, koşul, üst etiket — kendi boyunda kalır) */
  .kart>p:not(.kart-no):not(.kosul):not(.etiket):not(.form-not),.yz-satir,.yz-katlar dd{font-size:16px;line-height:1.55;
    color:color-mix(in oklch, var(--ink) 80%, var(--paper))!important}
  .kart>p:not(.kart-no):not(.kosul):not(.etiket){margin-top:10px}
  .yz-katlar>div{grid-template-columns:1fr;gap:0;padding:6px 0}
  .yz-katlar dd{font-size:14.5px!important;line-height:1.4!important}
  .adim-hero h1{font-size:clamp(32px,9vw,44px)}
  .adim-hero .giris{font-size:16px;margin-top:16px}
}
/* ---------- yatay telefon: masaüstü gibi yan yana; kart solda, kesit sağda hep görünür ---------- */
@media (max-width:900px) and (orientation:landscape){
  .adim,.adim[data-durum="kat"],.adim-hero{align-items:center;min-height:100svh;padding:calc(var(--nav-h) + 12px) 0 16px}
  .kart,.adim-yapi .kart,.adim-hero .kart{width:min(50%,440px);max-width:none}
  .adim-hero h1{font-size:clamp(26px,4.6vw,40px)}
  .sahne-yedek.kesit-cizim,.sahne[data-durum="hero"] .sahne-yedek{top:calc(var(--nav-h) + 12px);bottom:auto;left:auto;right:var(--gut);width:min(44vw,380px);margin:0}
}
@media (max-width:600px){
  .adim-hero h1{font-size:clamp(36px,10.4vw,48px)}
  .kart{padding:18px}
  .yz-katlar>div{grid-template-columns:86px minmax(0,1fr);gap:2px 10px;padding:7px 0}
  .yz-katlar dd{font-size:14px}
  .modul-sec button{min-height:48px;padding:8px 10px;font-size:13.5px;gap:8px}
  .moduller{grid-template-columns:1fr}
}