/* ═══════════════════════════════════════════════════════════════════
   KLIK · MARKA (branding) · kl-br-*  ·  TEK KAYNAK (php + html preview)
   Altı perde: Reddediş / Tanım / Teklif / İnşa / Süreç / Kanıt / Davet.
   Hareket: THE SNAP. Yalnız transform + opacity + clip-path anime edilir.
   Logo khaki/mor renkleri buraya SIZMAZ. Palet: void/ink/gold/accent/atmosphere.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --void: #111A19; --ink: #F8D794; --gold: #E8B85C; --accent: #E8712A; --atmosphere: #336468;
  --snap: cubic-bezier(0.34,1.56,0.64,1); --settle: cubic-bezier(0.16,1,0.3,1); --gate: cubic-bezier(0.7,0,0.3,1);
  --t-stamp:120ms; --t-land:380ms; --t-scene:620ms;
}
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body.kl-br {
  margin:0; background:var(--void); color:var(--ink);
  font-family:'Inter',-apple-system,sans-serif;
  font-size:clamp(1rem,1.15vw,1.15rem); line-height:1.65;
}
/* header.php'nin main.js'e bagli inert katmanlari bu sayfada kapali (main.js yuklenmez).
   IMLEC (.cursor-dot/.cursor-ring) listede DEGIL: stili main.css'ten (birebir ayni
   sistem: --light, --ease-magnetic, z-index 90), surucusu branding.js'e port edildi. */
body.kl-br .ec-loader, body.kl-br .ec-progress-rail, body.kl-br #globalParticles,
body.kl-br .veil, body.kl-br .global-bg, body.kl-br .sound-toggle,
body.kl-br .klik-progress,
body.kl-br .klik-film-strip, body.kl-br .klik-timecode { display:none !important; }
body.kl-br .klik-nav {
  transition: opacity var(--t-land) var(--snap), transform var(--t-land) var(--snap),
              visibility var(--t-land), background .3s, border-color .3s;
  transform: translateY(-12px);
}
body.kl-br .klik-nav.revealed { transform: translateY(0); }

/* Reveal: yonlu giris + overshoot (sadece-fade yasak) */
.kl-r { opacity:0; transform:translateY(24px); transition: transform var(--t-land) var(--snap), opacity var(--t-land) var(--snap); }
.kl-r.is-in { opacity:1; transform:none; }

.kl-eyebrow { font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.42em; text-transform:uppercase; color:rgba(248,215,148,.45); margin:0; }
.kl-h { font-family:'Bebas Neue',sans-serif; font-weight:400; line-height:.86; letter-spacing:-.02em; color:var(--ink); margin:0; }
.kl-it { font-family:'Fraunces',Georgia,serif; font-style:italic; }
.kl-sr-only { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ═══ PERDE 0 · REDDEDIS (hero) ═══ */
.kl-hero { position:relative; min-height:100svh; display:grid; grid-template-columns:repeat(12,1fr);
  align-items:center; padding:0 10vw 0 6vw; }
.kl-hero-in { grid-column:1 / 9; }
.kl-hero-eyebrow { margin-bottom:clamp(20px,4vh,40px); }
.kl-hero-swap { position:relative; display:inline-flex; align-items:baseline; height:1.02em; margin-bottom:.06em; }
.kl-hero-word { font-family:'Bebas Neue',sans-serif; line-height:.86; display:inline-block; }
.kl-hero-logo { position:absolute; left:0; bottom:0; color:var(--gold); transform-origin:left bottom;
  opacity:0; transform:scale(1.14); }
.kl-hero-marka { color:var(--ink); opacity:0; transform:scale(1.14); }
.kl-hero-h1 { font-size:clamp(3.5rem,9vw,11rem); }
.kl-hero-sub { font-size:clamp(1.4rem,2.6vw,2.4rem); color:rgba(248,215,148,.8); max-width:22ch; margin:clamp(20px,4vh,40px) 0 0; }
.kl-hero-scroll { position:absolute; right:6vw; bottom:calc(28px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.3em; color:rgba(248,215,148,.3); }
.kl-hero-scroll span { writing-mode:vertical-rl; }
.kl-hero-scroll i { width:1px; height:48px; background:rgba(248,215,148,.3); }

/* ═══ PERDE I · TANIM (gorulen/hissedilen) ═══ */
.kl-def { padding:clamp(120px,14vh,200px) 10vw clamp(120px,14vh,200px) 6vw; position:relative; }
.kl-def-split { max-width:1100px; }
.kl-def-lab { font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; margin:0 0 20px; }
.kl-def-top .kl-def-lab { color:rgba(248,215,148,.4); }
.kl-def-words { display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,64px); font-family:'Bebas Neue',sans-serif;
  font-size:clamp(1.8rem,5vw,4rem); line-height:1; }
.kl-def-top { transition:opacity var(--t-land) var(--settle); }
.kl-def.is-in .kl-def-top { opacity:.5; }
.kl-def-top .kl-def-words { color:rgba(248,215,148,.28); }
.kl-def-rule { height:1px; background:rgba(232,184,92,.3); margin:clamp(28px,5vh,56px) 0; }
.kl-def-bot { clip-path:inset(100% 0 0 0); transition:clip-path var(--t-scene) var(--gate); }
.kl-def.is-in .kl-def-bot { clip-path:inset(0 0 0 0); }
.kl-def-bot .kl-def-lab { color:var(--gold); }
.kl-def-bot .kl-def-words { color:var(--gold); }
.kl-def-close { display:grid; grid-template-columns:repeat(12,1fr); margin-top:clamp(56px,9vh,120px); }
.kl-def-close-in { grid-column:3 / 10; }
.kl-def-close p.big { font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:clamp(1.4rem,2.6vw,2.2rem); color:rgba(248,215,148,.9); margin:0 0 16px; }
.kl-def-close p.sub { font-family:'Space Mono',monospace; font-size:.8rem; letter-spacing:.06em; color:rgba(248,215,148,.5); margin:0; }
.kl-acc { color:var(--accent); }

/* ═══ PERDE II · TEKLIF (cerceve dogar) ═══ */
.kl-offer { padding:clamp(120px,14vh,200px) 10vw clamp(90px,10vh,150px) 6vw; }
.kl-offer-head { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,2vw,32px); align-items:end; margin-bottom:clamp(64px,10vh,130px); }
.kl-offer-eyebrow { grid-column:1 / -1; margin-bottom:12px; }
.kl-offer-title { grid-column:1 / 8; font-size:clamp(3rem,7.5vw,8.5rem); }
.kl-offer-body { grid-column:8 / 13; font-size:clamp(1rem,1.1vw,1.1rem); color:rgba(248,215,148,.75); max-width:48ch; margin:0; }
.kl-frame-wrap { display:flex; justify-content:center; }
.kl-frame {
  position:relative; width:min(62vw,560px); aspect-ratio:16 / 11;
  border:1px solid rgba(232,184,92,.3); border-radius:4px;
  display:flex; align-items:center; justify-content:center;
}
.kl-frame.is-draw { animation:klFrameDraw var(--t-scene) var(--settle) both; }
@keyframes klFrameDraw { from { clip-path:inset(50% 50% 50% 50%); opacity:.2; } to { clip-path:inset(0 0 0 0); opacity:1; } }
.kl-frame-c { position:absolute; font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.24em; color:rgba(248,215,148,.4); }
.kl-frame-c.tl { top:10px; left:12px; } .kl-frame-c.br { bottom:10px; right:12px; }
.kl-frame-empty { font-family:'Space Mono',monospace; font-size:.66rem; letter-spacing:.28em; color:rgba(248,215,148,.22); }

/* ═══ PERDE III · INSA (sticky cerceve dolar) ═══ */
.kl-build { position:relative; }
/* Sticky çerçevenin dolması için scroll odası: track uzun, stage içeride pinlenir */
.kl-build-track { position:relative; height:640svh; }
.kl-build-stage { position:sticky; top:0; min-height:100svh; display:grid; grid-template-columns:repeat(12,1fr);
  align-items:center; gap:clamp(20px,3vw,56px); padding:0 10vw 0 6vw; overflow:clip; }
.kl-build-framecol { grid-column:1 / 6; display:flex; justify-content:center; }
.kl-build-frame {
  position:relative; width:100%; max-width:440px; aspect-ratio:16 / 11;
  border:1px solid rgba(232,184,92,.32); border-radius:4px; overflow:clip;
}
.kl-build-frame.is-hit { animation:klShake var(--t-stamp) var(--settle); }
@keyframes klShake { 0%{transform:translateY(2px)} 100%{transform:translateY(0)} }
.kl-build-frame.is-hit .kl-build-frameline { animation:klLineFlash 90ms steps(3,end); }
.kl-build-frameline { position:absolute; inset:0; border:1px solid rgba(232,184,92,.3); pointer-events:none; }
@keyframes klLineFlash { 0%{opacity:.3} 50%{opacity:.55} 100%{opacity:.3} }
.kl-build-count { position:absolute; top:10px; left:12px; font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.24em; color:rgba(248,215,148,.5); z-index:3; }
.kl-build-state { position:absolute; bottom:10px; right:12px; font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.24em; color:rgba(248,215,148,.4); z-index:3; }
/* katman formlari (cerceve icinde ust uste birikir) */
.kl-layer { position:absolute; left:8%; right:8%; opacity:0; transform:scale(1.14); }
.kl-layer.is-set { opacity:1; transform:scale(1); transition:transform var(--t-stamp) var(--snap), opacity var(--t-stamp) var(--snap); }
.kl-ly-0 { top:14%; height:8%; background:linear-gradient(90deg,rgba(248,215,148,.14),rgba(248,215,148,.03)); }
.kl-ly-1 { top:26%; height:12%; display:flex; align-items:center; font-family:'Bebas Neue',sans-serif; font-size:clamp(1rem,2.4vw,2rem); color:rgba(248,215,148,.55); letter-spacing:.04em; }
.kl-ly-2 { top:41%; height:14%; }
.kl-ly-2 i { display:block; height:2px; margin:4px 0; background:rgba(248,215,148,.22); }
.kl-ly-2 i:nth-child(2){width:82%} .kl-ly-2 i:nth-child(3){width:64%} .kl-ly-2 i:nth-child(4){width:74%}
.kl-ly-3 { top:58%; height:16%; display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.kl-ly-3 span { border:1px solid rgba(232,184,92,.25); border-radius:2px; }
.kl-ly-3 span:nth-child(1){ background:rgba(248,215,148,.10); }
.kl-ly-3 span:nth-child(2){ background:rgba(232,184,92,.14); }
.kl-ly-4 { top:77%; height:8%; display:grid; grid-template-columns:repeat(6,1fr); gap:5px; }
.kl-ly-4 span { border:1px solid rgba(232,184,92,.2); border-radius:1px; }
.kl-ly-5 { inset:8%; top:auto; height:6%; bottom:6%; display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.3em; color:var(--gold); }
/* yan panel */
.kl-build-panelcol { grid-column:7 / 13; }
.kl-build-panel { position:absolute; opacity:0; transform:translateY(20px); pointer-events:none; width:100%; }
.kl-build-panel.is-on { opacity:1; transform:none; pointer-events:auto; transition:transform var(--t-land) var(--settle), opacity var(--t-land) var(--settle); }
.kl-build-num { font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.4em; color:var(--gold); }
.kl-build-name { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.4rem,5.5vw,5rem); line-height:.9; margin:8px 0 14px; color:var(--ink); }
.kl-build-def { font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:clamp(1.1rem,1.9vw,1.5rem); color:rgba(248,215,148,.85); margin:0 0 20px; clip-path:inset(0 100% 0 0); transition:clip-path var(--t-land) var(--settle) 40ms; }
.kl-build-panel.is-on .kl-build-def { clip-path:inset(0 0 0 0); }
.kl-build-expl { font-size:1rem; color:rgba(248,215,148,.7); margin:0 0 22px; max-width:46ch; }
.kl-build-expl a { color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(232,184,92,.3); }
.kl-build-expl a:hover { color:var(--ink); }
/* final */
.kl-build-final { display:grid; grid-template-columns:repeat(12,1fr); padding:clamp(90px,12vh,160px) 10vw clamp(120px,14vh,200px) 6vw; }
.kl-build-final-in { grid-column:2 / 11; }
.kl-build-final .snap { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.4rem,7vw,6rem); line-height:.9; color:var(--ink); margin:0 0 16px;
  opacity:0; transform:translateY(20px) scale(1.08); }
.kl-build-final.is-in .snap { opacity:1; transform:none; transition:transform var(--t-stamp) var(--snap), opacity var(--t-stamp) var(--snap); }
.kl-build-final .cl { font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:clamp(1.2rem,2.2vw,1.8rem); color:rgba(248,215,148,.85); margin:0; }

/* ═══ PERDE IV · SUREC (dort faz, asimetrik) ═══ */
.kl-proc { padding:clamp(120px,14vh,200px) 10vw clamp(120px,14vh,200px) 6vw; }
.kl-proc-head { display:grid; grid-template-columns:repeat(12,1fr); margin-bottom:clamp(64px,9vh,120px); }
.kl-proc-eyebrow { grid-column:1 / -1; margin-bottom:12px; }
.kl-proc-title { grid-column:2 / 10; font-size:clamp(3rem,7vw,8rem); }
.kl-proc-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,3vw,40px); }
.kl-phase { border-top:1px solid rgba(232,184,92,.14); padding-top:20px; transition:transform var(--t-stamp) var(--settle), border-color var(--t-stamp) var(--settle); }
.kl-phase:hover { transform:scale(1.02); border-color:rgba(232,184,92,.4); }
.kl-phase-0 { grid-column:1 / 4; margin-top:0; }
.kl-phase-1 { grid-column:4 / 7; margin-top:64px; }
.kl-phase-2 { grid-column:7 / 10; margin-top:-32px; }
.kl-phase-3 { grid-column:10 / 13; margin-top:96px; }
.kl-phase-num { font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.4em; color:var(--gold); }
.kl-phase-name { font-family:'Bebas Neue',sans-serif; font-size:clamp(1.8rem,3.5vw,3rem); line-height:.9; margin:8px 0 12px; color:var(--ink); }
.kl-phase-def { font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:1.05rem; color:rgba(248,215,148,.78); margin:0 0 18px; }
/* Faz gorseli: KUTU YOK. Rex seffaf zeminiyle dogrudan --void ustunde durur.
   Footprint kaldirilan .kl-slot kutusuyla birebir ayni (kare, sutun genisligi).
   Asset'ler 1000x1000 normalize + alta hizali (ortak zemin) → contain ile kirpma olmaz.
   filter / background / border / mix-blend-mode YOK. */
.kl-phase-img { display:block; }
.kl-phase-img img {
  display:block; width:100%; height:auto;
  aspect-ratio:1 / 1;   /* yer onceden rezerve: CLS = 0 */
  object-fit:contain;
}

/* ═══ PERDE V · KANIT (editoryal sergi) ═══ */
.kl-proof { padding:clamp(90px,12vh,160px) 10vw clamp(120px,14vh,200px) 6vw; }
.kl-proof-head { display:grid; grid-template-columns:repeat(12,1fr); margin-bottom:clamp(56px,8vh,110px); }
.kl-proof-eyebrow { grid-column:1 / -1; margin-bottom:12px; }
.kl-proof-title { grid-column:1 / 9; font-size:clamp(3rem,7vw,8rem); }
.kl-proof-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:auto auto; gap:clamp(20px,3vw,32px); }
/* Slot oranlari GORSELE UYARLANDI (kutuyu gorsele uyduruyoruz):
   S1 9/16 · S2 4/3 · S3 21/9. Uc farkli oran → "uc esit kutu" gorumusu kalkar.
   S1: yukseklik ~referans, GENISLIK daralir (2/6 → 2/5 = 3 sutun); sol kenar
   (col2) sabit, daralma SAGA. Boylece S1 genisligi = S2 genisligi (esitlendi),
   izgara gorunmez bir duzen kazanir; perde UZAMAZ. */
.kl-proof-a { grid-column:2 / 5; grid-row:1 / 3; }
.kl-proof-b { grid-column:7 / 10; grid-row:1; margin-top:80px; }
.kl-proof-c { grid-column:8 / 13; grid-row:2; margin-top:-40px; }
.kl-proof-a .kl-case-img { aspect-ratio:9 / 16; }
.kl-proof-b .kl-case-img { aspect-ratio:4 / 3; }
.kl-proof-c .kl-case-img { aspect-ratio:21 / 9; }
/* Cerceve KALIR: bu fotograflar kendi zeminlerini (mavi/fusya/terrakota)
   tasir; altin hat onlari noir'a baglar. (Rex figurleri seffafti, cerceve
   kalkmisti — farkli problem.) filter/mix-blend/animasyonlu overlay YOK. */
.kl-case-img {
  display:block; position:relative;
  border:1px solid rgba(232,184,92,.14); border-radius:6px;
  overflow:clip; background:#0D1413;
  transition:transform var(--t-stamp) var(--settle), border-color var(--t-stamp) var(--settle);
}
.kl-case-img img { display:block; width:100%; height:100%; object-fit:cover; }  /* zaten tam orana kirpildi; cover emniyet */
.kl-case-img:hover { transform:scale(1.02); border-color:rgba(232,184,92,.4); }
.kl-proof-grid figure { margin:0; }
.kl-proof-grid figcaption { margin-top:12px; font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.22em; color:rgba(248,215,148,.4); }

/* ═══ PERDE VI · DAVET ═══ */
.kl-cta { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(28px,4vw,56px); align-items:center;
  padding:clamp(120px,15vh,200px) 10vw clamp(120px,14vh,190px) 6vw; }
.kl-cta-left { grid-column:1 / 8; }
.kl-cta-title { font-size:clamp(3.4rem,8.5vw,10rem); margin:14px 0 clamp(20px,3vw,34px); }
.kl-cta-scarce { font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:clamp(1.2rem,2.1vw,1.75rem); color:rgba(248,215,148,.85); max-width:24ch; margin:0 0 clamp(24px,4vw,42px); }
.kl-cta-mail { font-family:'Space Mono',monospace; font-size:.78rem; letter-spacing:.18em; color:rgba(248,215,148,.38); text-decoration:none; }
.kl-cta-mail:hover { color:rgba(248,215,148,.7); }
.kl-cta-right { grid-column:8 / 13; }
.kl-cta-btn { display:inline-block; font-family:'Bebas Neue',sans-serif; font-size:clamp(1.5rem,2.4vw,2.2rem);
  letter-spacing:.08em; background:var(--gold); color:var(--void); text-decoration:none;
  padding:18px 44px; border-radius:2px; min-height:56px; transition:transform var(--t-stamp) var(--snap), background var(--t-stamp) linear; }
.kl-cta-btn:hover { transform:scale(1.02); background:#F0C46B; }
.kl-cta-btn:active { transform:scale(.97); }

/* ═══ MOBIL ═══ */
@media (max-width:820px) {
  .kl-hero { grid-template-columns:1fr; padding:0 7vw; }
  .kl-hero-in { grid-column:auto; }
  .kl-hero-scroll { right:7vw; }

  .kl-def-close { grid-template-columns:1fr; } .kl-def-close-in { grid-column:auto; }

  .kl-offer-head { grid-template-columns:1fr; } .kl-offer-title, .kl-offer-body, .kl-offer-eyebrow { grid-column:auto; }
  .kl-offer-body { margin-top:18px; }
  .kl-frame { width:88vw; }

  /* Insa: sticky YOK, dogal akis (her katman kendi blogunda) */
  .kl-build-track { height:auto; display:flex; flex-direction:column; gap:clamp(80px,14vh,140px); padding:clamp(80px,10vh,130px) 7vw; }
  .kl-build-stage { position:static; min-height:0; grid-template-columns:1fr; padding:0; gap:24px; }
  .kl-build-frame { max-width:none; }
  .kl-build-framecol, .kl-build-panelcol { grid-column:auto; }
  .kl-build-panel { position:static; opacity:1; transform:none; }
  .kl-build-panel.mob-hidden { display:none; }
  .kl-build-final { grid-template-columns:1fr; padding:clamp(80px,10vh,120px) 7vw; } .kl-build-final-in { grid-column:auto; }

  .kl-proc { padding:clamp(90px,12vh,140px) 7vw; }
  .kl-proc-head, .kl-proc-grid { grid-template-columns:1fr; }
  .kl-proc-title { grid-column:auto; }
  .kl-phase-0,.kl-phase-1,.kl-phase-2,.kl-phase-3 { grid-column:auto; margin-top:0; }

  .kl-proof { padding:clamp(90px,12vh,140px) 7vw; }
  .kl-proof-head, .kl-proof-grid { grid-template-columns:1fr; grid-template-rows:none; }
  .kl-proof-title { grid-column:auto; }
  .kl-proof-a,.kl-proof-b,.kl-proof-c { grid-column:auto; grid-row:auto; margin-top:0; }
  /* S1 (9:16) mobilde tam genislik verilirse cok uzar → %76 ortali sinirla.
     Grid item: yatay ortalama justify-self ile (margin:auto grid'de yaslamiyor). */
  .kl-proof-a { max-width:76%; justify-self:center; }

  .kl-cta { grid-template-columns:1fr; padding:clamp(90px,12vh,140px) 7vw; }
  .kl-cta-left, .kl-cta-right { grid-column:auto; }
}

/* ═══ REDUCED MOTION: sifir animasyon, icerik tam okunur ═══ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  body.kl-br * { transition:none !important; animation:none !important; }
  body.kl-br .klik-nav { opacity:1; visibility:visible; transform:none; }
  .kl-r { opacity:1; transform:none; }
  .kl-hero-logo { display:none; } .kl-hero-marka { opacity:1; transform:none; }
  .kl-def .kl-def-top { opacity:.5; } .kl-def-bot { clip-path:none; }
  .kl-frame { clip-path:none; opacity:1; }
  .kl-build-track { height:auto; display:flex; flex-direction:column; gap:110px; padding:120px 7vw; }
  .kl-build-stage { position:static; min-height:0; grid-template-columns:1fr; gap:24px; padding:0; }
  .kl-build-panel { position:static; opacity:1; transform:none; }
  .kl-build-panel.mob-hidden { display:none; }
  .kl-layer { opacity:1; transform:none; }
  .kl-build-def { clip-path:none; }
  .kl-build-final .snap { opacity:1; transform:none; }
}