/* ═══════════════════════════════════════════════════════════════════
   KLIK · KADRO (kariyer.css) — TEK KAYNAK: php + html preview ayni dosya
   Iki perde: KADRO (editoryal asimetrik akis) + SECME (merkezi form).
   Palet/font token'lari main.css'ten MIRAS (yeniden tanimlanmaz).
   --settle = --ease-magnetic (main.css'te zaten var) → tekrar edilmez.
   Sifir gorsel · sifir font · sifir kutuphane · sifir ikon.
   Yalniz transform + opacity + clip-path anime edilir.
   Onek: kl-kd-*  (main.css / klikhero.css / branding.css EZILMEZ)
   ═══════════════════════════════════════════════════════════════════ */

body.kl-kd {
  --snap: cubic-bezier(0.34,1.56,0.64,1); --settle: var(--ease-magnetic); --t-stamp: 120ms; --t-land: 380ms;
  /* --gold main.css :root'ta TANIMLI DEGIL (yalniz --void/--ink/--accent/
     --light/--ease-magnetic var). Bu sayfa --gold kullaniyor → kendi
     tanimini getirmek ZORUNDA, yoksa deger cozulmez. Bkz. anayasa §3. */
  --gold: #E8B85C;
  margin:0; background:var(--void); color:var(--ink);
  font-family:'Inter',-apple-system,sans-serif; line-height:1.65;
}
html, body.kl-kd { overflow-x:clip; }

/* ENTEGRASYON: header.php'nin main.js'e bagli inert katmanlari kapali
   (main.js yuklenmez; loader sonsuza dek ekranda kalirdi).
   IMLEC (.cursor-dot/.cursor-ring) listede DEGIL: stili main.css'ten,
   surucusu kariyer.js'te (main site ile birebir). Nav + footer kalir. */
body.kl-kd .ec-loader, body.kl-kd .ec-progress-rail, body.kl-kd #globalParticles,
body.kl-kd .veil, body.kl-kd .global-bg, body.kl-kd .sound-toggle,
body.kl-kd .klik-progress, body.kl-kd .klik-film-strip, body.kl-kd .klik-timecode { display:none !important; }
body.kl-kd .klik-nav { opacity:1; visibility:visible; transform:none; pointer-events:auto; }

/* Yonlu giris + overshoot (sadece-fade yasak). Giris BIR KEZ. */
.kl-kd-r { opacity:0; transform:translateY(24px); }
.kl-kd-r.is-in { opacity:1; transform:none; transition:transform var(--t-land) var(--snap), opacity var(--t-land) var(--snap); }
.kl-kd-eyebrow { margin:0 0 18px; font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.42em; color:rgba(248,215,148,.45); }
.kl-kd-eyebrow--soluk { color:rgba(248,215,148,.35); }
.kl-kd-secme-eyebrow { position:relative; }   /* spot katmaninin ustunde kalir */

/* ═══ PERDE I · KADRO (asimetrik: sag taraf bilincli bos) ═══ */
.kl-kd-kadro { padding:clamp(120px,16vh,200px) 10vw clamp(90px,12vh,140px) 6vw; }
.kl-kd-in { max-width:66%; }
.kl-kd-h1 {
  position:relative; margin:0 0 clamp(20px,3vh,32px);
  font-family:'Bebas Neue',sans-serif; font-weight:400;
  font-size:clamp(2.8rem,7vw,8rem); line-height:.88; letter-spacing:-.005em;
  color:var(--ink); opacity:0; transform:scale(1.12);
}
.kl-kd-h1.is-in { opacity:1; transform:none; transition:transform var(--t-stamp) var(--snap), opacity var(--t-stamp) var(--snap); }
.kl-kd-h1::after { content:''; position:absolute; inset:0; background:rgba(248,215,148,.9); opacity:0; pointer-events:none; }
.kl-kd-h1.is-in::after { animation:klKdFlash 90ms steps(2,end); }   /* tek karelik flash */
@keyframes klKdFlash { 0%{opacity:0} 50%{opacity:.12} 100%{opacity:0} }
.kl-kd-lede { margin:0; font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:clamp(1.1rem,2vw,1.7rem); color:rgba(248,215,148,.8); max-width:52ch; }

/* Dort vurus: kart/kutu/ikon/grid YOK. Editoryal akis, farkli girintiler. */
.kl-kd-vuruslar { margin:clamp(70px,10vh,120px) 0 0; }
.kl-kd-vurus { max-width:46ch; margin-bottom:clamp(48px,7vh,80px); }
.kl-kd-vurus:nth-child(2) { margin-left:7%; }
.kl-kd-vurus:nth-child(3) { margin-left:3%; }
.kl-kd-vurus:nth-child(4) { margin-left:11%; }
.kl-kd-num { display:block; font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.4em; color:var(--gold); }
.kl-kd-vurus h2 { margin:10px 0 12px; font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(1.8rem,3.5vw,3rem); line-height:.9; letter-spacing:.01em; color:var(--ink); }
.kl-kd-vurus p { margin:0; color:rgba(248,215,148,.72); }

/* Sormadiklarimiz: soldan saga acilir (clip-path), sonra kapanis SNAP eder */
.kl-kd-sormaz { margin:clamp(80px,11vh,130px) 0 0; max-width:60ch; }
.kl-kd-sormaz-list { margin:0 0 clamp(28px,4vh,44px); padding:0; list-style:none; }
.kl-kd-sormaz-list li { margin:0 0 12px; font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:300; font-size:1.02rem; color:rgba(248,215,148,.5); clip-path:inset(0 100% 0 0); }
.kl-kd-sormaz.is-in .kl-kd-sormaz-list li { clip-path:inset(0 0 0 0); transition:clip-path var(--t-land) var(--settle); }
.kl-kd-sormaz.is-in .kl-kd-sormaz-list li:nth-child(2) { transition-delay:60ms; }
.kl-kd-sormaz.is-in .kl-kd-sormaz-list li:nth-child(3) { transition-delay:120ms; }
.kl-kd-kapanis { margin:0; font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(1.4rem,2.6vw,2.2rem); line-height:1.05; letter-spacing:.02em; color:var(--ink); opacity:0; transform:scale(1.12); }
.kl-kd-sormaz.is-in .kl-kd-kapanis { opacity:1; transform:none; transition:transform var(--t-stamp) var(--snap) 200ms, opacity var(--t-stamp) var(--snap) 200ms; }

/* ═══ PERDE II · SECME (MERKEZ · bilincli istisna: spot duser) ═══ */
.kl-kd-secme { position:relative; padding:clamp(100px,14vh,170px) 6vw clamp(110px,15vh,190px); display:flex; flex-direction:column; align-items:center; text-align:center; }
/* STATIK altin halo = spot isigi. Tek gradient, animasyonsuz, blur/filter YOK. */
.kl-kd-spot { position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(232,184,92,.05) 0%, rgba(232,184,92,0) 68%); pointer-events:none; }
.kl-kd-secme-h { position:relative; margin:0 0 clamp(36px,5vh,56px); font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(2rem,4.5vw,4rem); line-height:.95; color:var(--ink); }
/* SECME iki kolon: mulakat sahnesi (SOL) + bilet form (SAG).
   Sahne bilet kutusunun DISINDA; ustten hizali (form uzun, sahne formun
   ust kismiyla oturur, sticky YOK). Mobil: alt alta, sahne USTTE. */
.kl-kd-secme-wrap { position:relative; width:100%; display:flex; justify-content:center; align-items:flex-start; gap:clamp(32px,4vw,64px); }
/* Sahne: CERCEVESIZ (altin hat/radius/zemin YOK), filter YOK, metin YOK.
   aspect-ratio yer rezerve eder → CLS 0. */
.kl-kd-sahne { margin:0; flex:0 1 480px; min-width:0; }
.kl-kd-sahne img { display:block; width:100%; height:auto; aspect-ratio:960/814; }

/* ═══ BILET CERCEVESI — contact.html'deki .ct-ticket'in BIREBIR gorsel portu.
   Degerler contact'tan OKUNDU (zemin .02 · kenar .08 · radius 12 · perforasyon
   2px dashed .08 · kertik 20px daire). contact.html'e DOKUNULMADI: stil burada
   yasar (kl-kd-tk-*), boylece canli bilet formunu bozma riski SIFIR.
   backdrop-filter/blur/filter YOK (bilette de yoktu — dogrulandi).
   z-index sirasi: .kl-kd-spot (halo, en arka) → cerceve → alanlar. ═══ */
.kl-kd-form {
  position:relative; width:100%; max-width:560px; text-align:left;
  background:rgba(248,215,148,.02);
  border:1px solid rgba(248,215,148,.08);
  border-radius:12px;
  overflow:hidden;              /* kertiklerin dis yarisi kirpilir → "kesik" hissi */
}

/* Kunye seridi: KLIK. + KADRO BILETI + NO. (tek satir, mobilde bolunmez) */
.kl-kd-tk-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:24px 28px; border-bottom:1px solid rgba(248,215,148,.06); }
.kl-kd-tk-left { display:flex; align-items:center; gap:16px; min-width:0; }
.kl-kd-tk-logo { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:.1em; color:var(--ink); white-space:nowrap; }
.kl-kd-tk-logo i { font-style:normal; color:var(--accent); }        /* accent 1/4 */
.kl-kd-tk-type { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.25em; color:rgba(248,215,148,.3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kl-kd-tk-num  { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.15em; color:var(--gold); white-space:nowrap; }

/* Perforasyon: SAF CSS — gorsel/SVG dosyasi YOK */
.kl-kd-tk-tear { position:relative; height:20px; display:flex; align-items:center; padding:0 28px; }
.kl-kd-tk-line { flex:1; height:0; border-top:2px dashed rgba(248,215,148,.08); }
/* ⚠️ Kertik = YARIM daire, kutunun ICINDE. Bilette tam daire left/right:-10px
   ile disari tasar ve overflow:hidden onu kirpar — ama tasma formu YATAY
   KAYDIRILABILIR kutu yapar (scrollWidth 568 > clientWidth 558). Icerideki
   herhangi bir focus()/scrollIntoView() (kariyer.js ilk hatali alana tam
   bunu yapiyor) bileti 10px kaydirip icerigi kalici yamultuyordu.
   Cizilen sekil AYNI (kirpilmis dairenin ic yarisi), tasma SIFIR. */
.kl-kd-tk-notch { position:absolute; top:50%; transform:translateY(-50%); width:10px; height:20px; background:var(--void); }
.kl-kd-tk-notch--l { left:0; border-radius:0 10px 10px 0; }
.kl-kd-tk-notch--r { right:0; border-radius:10px 0 0 10px; }

.kl-kd-tk-body { position:relative; padding:clamp(32px,3vw,44px); }
.kl-kd-tk-foot { padding:24px 28px; }

/* ── Alanlar: BILET GIBI KUTULU (karar 2A). Alt cizgili stil kaldirildi.
   Etiket ustte + yardimci satir + kutu — ucu de bilettekiyle ayni degerlerde. */
.kl-kd-f { position:relative; margin-bottom:30px; }
.kl-kd-f:last-child { margin-bottom:0; }
.kl-kd-f label { display:block; margin-bottom:4px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.2em; line-height:1.55; color:var(--ink); }
.kl-kd-f--soru label { font-size:11px; letter-spacing:.16em; }      /* uzun sorular okunur kalsin */
.kl-kd-req { color:var(--accent); }                                  /* accent 2/4 (zorunlu yildizi) */
.kl-kd-yardim { display:block; margin-bottom:10px; font-family:'Inter',sans-serif; font-size:12px; color:rgba(248,215,148,.25); }
.kl-kd-f input, .kl-kd-f textarea, .kl-kd-f select {
  width:100%; box-sizing:border-box; padding:18px 16px;
  background:rgba(248,215,148,.03);
  border:1px solid rgba(248,215,148,.08);
  border-radius:6px; color:var(--ink);
  font-family:'Inter',sans-serif; font-size:16px;   /* iOS otomatik zoom onleme */
  line-height:1.5; min-height:44px; outline:none;
  resize:vertical;                                   /* otomatik buyume YOK */
  transition:border-color var(--t-stamp) linear, box-shadow var(--t-stamp) linear;
}
.kl-kd-f textarea { min-height:90px; }
.kl-kd-f select { appearance:none; cursor:pointer; }
.kl-kd-f input::placeholder, .kl-kd-f textarea::placeholder { color:rgba(248,215,148,.15); }
/* Focus: kenar accent'e gecer + STATIK ic parlaklik (tek gecis; animasyonlu
   box-shadow DEGIL). Renkler bilettekiyle birebir; sure bilette 300ms idi →
   anayasa geregi --t-stamp (120ms) yapildi. Layout tetikleyen degisiklik YOK. */
.kl-kd-f input:focus, .kl-kd-f textarea:focus, .kl-kd-f select:focus { border-color:rgba(232,113,42,.3); box-shadow:0 0 0 3px rgba(232,113,42,.08); }
.kl-kd-f.err input, .kl-kd-f.err textarea, .kl-kd-f.err select { border-color:rgba(232,113,42,.55); box-shadow:0 0 0 3px rgba(232,113,42,.12); }
.kl-kd-hata { display:block; margin-top:8px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.06em; color:var(--accent); }  /* accent 3/4 (hata) */
.kl-kd-hata[hidden] { display:none; }
/* Genel hata: bilettekiyle ayni uyari kutusu, kunyenin degil koclanin yaninda */
#kdGen { margin:0 0 16px; padding:12px 16px; background:rgba(232,113,42,.08); border:1px solid rgba(232,113,42,.35); border-radius:6px; text-align:center; }
/* Honeypot: display:none DEGIL (bot tespit eder) → ekran disina tasinir */
.kl-kd-hp { position:absolute; left:-4000px; width:1px; height:1px; overflow:hidden; }

/* ═══ HANGİ ALAN · isaretleme kutulari (max 2) ═══════════════════════
   Gorsel BIREBIR contact "SEANS TİPİ" (.ct-checkbox): kare 20x20,
   radius 4, kenar rgba(.12), isaretli --accent dolu + ✓. Onek kl-kd-cb.
   Fieldset reset (border/margin/padding sifir → bilet alanlariyla ayni ritim).
   Native input display:none DEGIL → opacity/clip (klavye erisilebilir kalir). */
.kl-kd-cb-group { border:0; margin:0 0 30px; padding:0; min-width:0; }   /* min-width:0: fieldset flex tasmasi */
.kl-kd-cb-legend { display:block; padding:0; margin:0 0 4px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.2em; line-height:1.55; color:var(--ink); }
.kl-kd-cb-list { display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.kl-kd-cb { display:flex; align-items:center; gap:12px; min-height:44px; cursor:pointer; font-family:'Inter',sans-serif; font-size:15px; color:rgba(248,215,148,.5); transition:color var(--t-stamp) linear; }
.kl-kd-cb:hover { color:var(--ink); }
.kl-kd-cb input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }   /* gizli AMA odaklanabilir */
.kl-kd-cb-box { width:20px; height:20px; border-radius:4px; border:1px solid rgba(248,215,148,.12); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background var(--t-stamp) linear, border-color var(--t-stamp) linear; }
.kl-kd-cb input:checked ~ .kl-kd-cb-box { background:var(--accent); border-color:var(--accent); }   /* isaretli: accent dolu (bilet ile birebir) */
.kl-kd-cb input:checked ~ .kl-kd-cb-box::after { content:'✓'; color:var(--void); font-size:11px; font-weight:700; line-height:1; }
.kl-kd-cb input:checked ~ .kl-kd-cb-text { color:var(--ink); }
.kl-kd-cb input:focus-visible ~ .kl-kd-cb-box { outline:2px solid var(--accent); outline-offset:2px; }   /* klavye odagi gorunur */

/* ═══ MAAŞ BEKLENTİSİ · range slider ═══════════════════════════════
   Genel .kl-kd-f input kutusu range'e uygulanMAmali → sifirlanir.
   Dolu kisim --gold: JS --pct (0-100%) yazar, track linear-gradient.
   TEK custom property; layout TETIKLEMEZ. Animasyonlu golge YOK. */
.kl-kd-maas-deger { display:block; margin:2px 0 10px; font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(1.6rem,2.4vw,2rem); letter-spacing:.04em; color:var(--ink); }
.kl-kd-f input[type="range"] {
  --pct:37.5%;                                 /* varsayilan 40000 icin; JS init gunceller */
  appearance:none; -webkit-appearance:none;
  padding:0; border:0; border-radius:3px;
  height:5px; min-height:28px;                 /* gorunur track 5px; dokunma alani 28px */
  background:transparent; cursor:pointer;
}
/* Track (webkit + moz ayri stillenmek zorunda) */
.kl-kd-f input[type="range"]::-webkit-slider-runnable-track {
  height:5px; border-radius:3px;
  background:linear-gradient(90deg, var(--gold) 0 var(--pct), rgba(248,215,148,.10) var(--pct) 100%);
}
.kl-kd-f input[type="range"]::-moz-range-track { height:5px; border-radius:3px; background:rgba(248,215,148,.10); }
.kl-kd-f input[type="range"]::-moz-range-progress { height:5px; border-radius:3px; background:var(--gold); }
/* Thumb: 18px altin daire, ince koyu kenar */
.kl-kd-f input[type="range"]::-webkit-slider-thumb {
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; margin-top:-6.5px;  /* (18-5)/2: track ortasina oturur */
  border-radius:50%; background:var(--gold); border:2px solid var(--void);
}
.kl-kd-f input[type="range"]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--gold); border:2px solid var(--void); }
/* Focus: STATIK accent halka (animasyon yok) */
.kl-kd-f input[type="range"]:focus-visible { outline:none; }
.kl-kd-f input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 3px rgba(232,113,42,.5); }
.kl-kd-f input[type="range"]:focus-visible::-moz-range-thumb { box-shadow:0 0 0 3px rgba(232,113,42,.5); }
/* Uc etiketleri */
.kl-kd-maas-uclar { display:flex; justify-content:space-between; margin-top:6px; font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.08em; color:rgba(248,215,148,.35); }

.kl-kd-btn { display:block; width:100%; font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(1.4rem,2vw,1.8rem); letter-spacing:.1em; background:var(--gold); color:var(--void); border:0; border-radius:6px; padding:16px 24px; min-height:56px; cursor:pointer; transition:transform var(--t-stamp) var(--snap), background var(--t-stamp) linear; }
.kl-kd-btn:hover { transform:scale(1.02); background:#F0C46B; }
.kl-kd-btn:active { transform:scale(.97); transition-duration:80ms; }
.kl-kd-btn:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }  /* accent 4/4 */
.kl-kd-btn[disabled] { cursor:default; opacity:.7; }

/* Basari: CERCEVE KALIR, ici degisir. Alanlar + kocan geri cekilir (yerini
   BIRAKMAZ → bilet boyu sabit, layout sicramasi yok), satir SNAP eder. */
.kl-kd-form.is-ok .kl-kd-tk-fields,
.kl-kd-form.is-ok .kl-kd-tk-foot { opacity:0; transform:scale(.98); pointer-events:none; transition:transform var(--t-land) var(--settle), opacity var(--t-land) var(--settle); }
.kl-kd-ok { position:absolute; left:clamp(32px,3vw,44px); right:clamp(32px,3vw,44px); top:50%; transform:translateY(-50%) scale(1.12); opacity:0; visibility:hidden; text-align:center; }
.kl-kd-ok.is-in { opacity:1; visibility:visible; transform:translateY(-50%); transition:transform var(--t-stamp) var(--snap), opacity var(--t-stamp) var(--snap); }
.kl-kd-ok b { display:block; font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:.04em; color:var(--ink); }
.kl-kd-ok span { display:block; margin-top:10px; font-family:'Space Mono',monospace; font-size:.68rem; letter-spacing:.1em; color:rgba(248,215,148,.4); }

/* ═══ MOBIL: girintiler sifir, form tam genislik, merkez korunur ═══ */
@media (max-width: 820px) {
  .kl-kd-kadro { padding:clamp(90px,12vh,140px) 7vw clamp(70px,9vh,100px); }
  .kl-kd-in, .kl-kd-vurus { max-width:100%; }
  .kl-kd-vurus:nth-child(2), .kl-kd-vurus:nth-child(3), .kl-kd-vurus:nth-child(4) { margin-left:0; }
  .kl-kd-secme { padding:clamp(80px,11vh,120px) 7vw clamp(90px,12vh,130px); }
  /* Sahne + form alt alta; sahne USTTE (once mulakat sahnesi, sonra form) */
  .kl-kd-secme-wrap { flex-direction:column; align-items:center; }
  .kl-kd-sahne { flex:none; width:100%; max-width:480px; }
  /* Bilet mobilde tam genislik (kenar payi section padding'inden); radius korunur.
     Kunye TEK SATIRDA kalir: once "KADRO BILETI" kuculur, satir BOLUNMEZ. */
  .kl-kd-tk-head { padding:18px 20px; gap:10px; }
  .kl-kd-tk-left { gap:10px; }
  .kl-kd-tk-logo { font-size:19px; }
  .kl-kd-tk-type { font-size:9px; letter-spacing:.16em; }
  .kl-kd-tk-num  { font-size:10px; letter-spacing:.1em; }
  .kl-kd-tk-tear { padding:0 20px; }
  .kl-kd-tk-foot { padding:20px; }
  .kl-kd-f label { font-size:11px; letter-spacing:.16em; }
}

/* ═══ REDUCED MOTION: sifir animasyon, icerik tam okunur ═══ */
@media (prefers-reduced-motion: reduce) {
  body.kl-kd * { transition:none !important; animation:none !important; }
  .kl-kd-r, .kl-kd-h1, .kl-kd-kapanis { opacity:1; transform:none; }
  .kl-kd-sormaz-list li { clip-path:none; }
  .kl-kd-ok.is-in { transform:translateY(-50%); }
}