/* ============================================================
   KALEKS — 3D scroll hero (die3d.js ile birlikte)
   style.css'ten SONRA yüklenmeli. İzole .d3-* sınıfları.
   ============================================================ */
.d3-wrap{position:relative;height:320vh;background:var(--black)}
/* style.css'teki eski #hero{display:grid;1fr 1fr;overflow:hidden} kuralını ez (ID özgüllüğü).
   overflow:visible ŞART — ebeveynde overflow:hidden position:sticky'yi tamamen öldürür! */
#hero.d3-wrap{display:block;grid-template-columns:none;min-height:0;overflow:visible}
.d3-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:
    radial-gradient(1100px 620px at 68% 42%, rgba(120,125,135,0.16), transparent 62%),
    radial-gradient(900px 700px at 20% 85%, rgba(204,0,0,0.07), transparent 60%),
    var(--black);
}
.d3-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.d3-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,0.55) 100%);
}
/* alt kenar yumuşak geçiş */
.d3-sticky::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--dark));
}

/* ── bölüm metin katmanları ── */
.d3-chapter{
  position:absolute;top:0;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px 8vw 80px;
  opacity:0;visibility:hidden;pointer-events:none;
  will-change:opacity,transform;
  max-width:none;
}
.d3-chapter .d3-box{max-width:520px;text-shadow:0 2px 22px rgba(0,0,0,0.85),0 0 6px rgba(0,0,0,0.6)}
.d3-ch1{opacity:1;visibility:visible}          /* ilk boyamada görünür (LCP) */
.d3-right{align-items:flex-end}
.d3-right .d3-box{text-align:left}
.d3-chapter h1{
  font-family:var(--H);font-weight:900;
  font-size:clamp(46px,5.4vw,80px);
  line-height:0.95;color:var(--white);margin-bottom:8px;
}
.d3-chapter h1 .red{color:var(--red)}
.d3-chapter h2{
  font-family:var(--H);font-weight:800;
  font-size:clamp(34px,3.8vw,58px);
  line-height:1.02;color:var(--white);margin-bottom:16px;
}
.d3-chapter h2 .red{color:var(--red)}
.d3-sub{
  font-family:var(--H);font-weight:400;
  font-size:clamp(20px,2.3vw,32px);
  color:#8a8f96;letter-spacing:0.04em;margin-bottom:26px;line-height:1.2;
}
.d3-kicker{
  font-family:var(--H);font-size:12px;font-weight:600;
  letter-spacing:0.25em;text-transform:uppercase;
  color:var(--redT);margin-bottom:18px;
  display:flex;align-items:center;gap:12px;
}
.d3-kicker::before{content:'';display:block;width:32px;height:1px;background:var(--red)}
.d3-desc{
  font-size:15px;font-weight:300;color:#9aa0a6;
  max-width:440px;line-height:1.8;margin-bottom:34px;
}
.d3-chapter .hero-btns{margin-bottom:0}
.d3-stats{display:flex;gap:34px;margin-top:38px;border-top:1px solid var(--border);padding-top:26px}
.d3-stat b{font-family:var(--H);font-weight:900;font-size:34px;color:var(--white);line-height:1;display:block}
.d3-stat b sup{font-size:18px;color:var(--red)}
.d3-stat i{font-family:var(--H);font-style:normal;font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim)}

/* ── GLB yükleme göstergesi (die3d.js üretir) ── */
.d3-loader{
  position:absolute;left:66%;top:50%;transform:translate(-50%,-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:13px;
  pointer-events:none;opacity:0;
  animation:d3lin .4s ease .25s forwards;transition:opacity .45s ease;
}
.d3-loader.done{opacity:0!important;animation:none}
@keyframes d3lin{to{opacity:1}}
.d3-loader-ring{
  width:46px;height:46px;border-radius:50%;
  border:2px solid rgba(255,255,255,0.10);border-top-color:var(--red);
  animation:d3lspin .9s linear infinite;
}
@keyframes d3lspin{to{transform:rotate(360deg)}}
.d3-loader-txt{
  font-family:var(--H);font-size:11px;font-weight:600;
  letter-spacing:0.3em;color:var(--dim);white-space:nowrap;
}
.d3-loader-pct{
  font-family:var(--H);font-size:12px;font-weight:700;
  letter-spacing:0.1em;color:var(--redT);font-variant-numeric:tabular-nums;
  min-height:15px;
}
@media (max-width:900px){
  .d3-loader{left:50%;top:38%}
}

/* kaydırma ipucu */
.d3-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--H);font-size:11px;font-weight:500;letter-spacing:0.3em;
  text-transform:uppercase;color:var(--dim);text-align:center;
  animation:d3cue 2.2s ease-in-out infinite;pointer-events:none;
}
.d3-cue::after{content:'';display:block;width:1px;height:34px;background:linear-gradient(var(--red),transparent);margin:10px auto 0}
@keyframes d3cue{0%,100%{opacity:0.5;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(6px)}}

/* ilerleme noktaları */
.d3-dots{position:absolute;right:26px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.d3-dots span{width:7px;height:7px;border-radius:50%;background:var(--mid);transition:all .3s}
.d3-dots span.on{background:var(--red);box-shadow:0 0 10px rgba(204,0,0,0.8);transform:scale(1.3)}

/* ── fallback: WebGL yok / reduced-motion / JS hatası ── */
body.d3-off .d3-wrap{height:auto}
body.d3-off .d3-sticky{
  position:relative;height:auto;min-height:100vh;
  background:linear-gradient(rgba(5,5,6,0.55),rgba(5,5,6,0.82)),url('kaleks-4719-kalip.jpg') center/cover no-repeat;
}
body.d3-off .d3-canvas,body.d3-off .d3-dots,body.d3-off .d3-cue{display:none}
body.d3-off .d3-chapter{
  position:relative;opacity:1!important;visibility:visible!important;
  pointer-events:auto!important;transform:none!important;
  min-height:0;padding:90px 8vw;
}
body.d3-off .d3-ch1{padding-top:150px}

/* ── mobil ── */
@media (max-width:900px){
  .d3-wrap{height:290vh}
  .d3-chapter{padding:100px 7vw 70px;justify-content:flex-end;padding-bottom:120px}
  .d3-right{align-items:flex-start}
  .d3-dots{right:12px}
  .d3-stats{gap:22px;flex-wrap:wrap}
  .d3-desc{font-size:14px}
  /* metin parlak modelin üstüne binince okunmuyordu: kutuya koyu scrim */
  .d3-chapter .d3-box{
    background:rgba(4,5,9,0.58);
    -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
    padding:18px 18px 16px;
  }
}

/* RTL (Arapça) */
html[dir="rtl"] .d3-kicker::before{order:2}
html[dir="rtl"] .d3-right{align-items:flex-start}
html[dir="rtl"] .d3-dots{right:auto;left:26px}

/* Dil görünürlüğü — style.css'teki global kuralı bu dosya ezmesin
   (bilinen bug: sonradan gelen display kuralı [data-en]'i görünür yapar) */
#hero [data-en]{display:none}
body.en #hero [data-tr]{display:none}
body.en #hero [data-en]{display:block}
body.en #hero span[data-en]{display:inline}
body.en #hero span[data-tr]{display:none}