/* KS 3D Hero — hero-proto/live.html'den tools/build_child.py ile üretildi; elle düzenleme */
:root{ --pink:#e0268f; --pink2:#f91176; --ink:#0a0b0f; }#hero,#hero *{box-sizing:border-box}#hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:100svh;min-height:600px;overflow:hidden;background:var(--ink);color:#fff;font-family:Archivo,Arial,Helvetica,sans-serif;line-height:1.4}#hero /* 1) poster: anında görünür (LCP),#hero WebGL hazır olunca altında kalır */
  #poster{position:absolute;inset:0;background:var(--ink) url(poster-v3.webp) center/auto 100% no-repeat;transition:opacity 1.2s ease}#hero /* yüksekliğe göre sığdır: 3D kameranın dikey FOV'uyla aynı ölçek; 21:9 poster geniş ekranları da kapsar */
  #gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}#hero.gl-ready #gl{opacity:1}#hero.gl-ready #poster{opacity:0}#hero #grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}#hero #vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 100% at 62% 45%,transparent 45%,rgba(0,0,0,.55) 100%)}#hero .copy{position:absolute;left:clamp(24px,6vw,110px);top:50%;transform:translateY(-50%);width:min(640px,44vw);z-index:3}#hero .copy>*{opacity:0;transform:translateY(14px);animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards}#hero .copy>*:nth-child(2){animation-delay:.12s}#hero .copy>*:nth-child(3){animation-delay:.24s}#hero .copy>*:nth-child(4){animation-delay:.36s}#hero .copy>*:nth-child(5){animation-delay:.46s}#hero .copy>*:nth-child(6){animation-delay:.58s}
  @keyframes rise{to{opacity:1;transform:none}}#hero .eyebrow{font-weight:500;letter-spacing:.18em;font-size:13px;color:rgba(255,255,255,.6);text-transform:uppercase;margin:0 0 18px}#hero h1{font-weight:800;font-size:clamp(40px,5.9vw,84px);line-height:.95;letter-spacing:-.02em;margin:0 0 10px;text-transform:uppercase;text-shadow:0 2px 30px rgba(0,0,0,.7)}#hero h1 span{display:block;color:var(--pink)}#hero .sub{font-weight:500;font-size:clamp(15px,1.4vw,20px);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 26px}#hero p{font-weight:300;font-size:clamp(15px,1.15vw,18px);line-height:1.65;color:rgba(255,255,255,.74);margin:0 0 14px;max-width:520px}#hero .btn{display:inline-block;margin-top:14px;padding:16px 34px;border-radius:999px;font-weight:700;letter-spacing:.06em;font-size:14px;text-transform:uppercase;text-decoration:none;color:#fff;
    background:linear-gradient(135deg,var(--pink2),var(--pink));box-shadow:0 10px 40px rgba(224,38,143,.35);transition:transform .3s,box-shadow .3s}#hero .btn:hover{transform:translateY(-2px);box-shadow:0 16px 50px rgba(224,38,143,.5)}#hero #ui{position:absolute;right:20px;bottom:20px;z-index:4;display:none;gap:6px;font-size:12px}#hero #ui.show{display:flex}#hero #ui button{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);padding:7px 11px;border-radius:6px;cursor:pointer;font-family:inherit}#hero #ui button.on{background:var(--pink);border-color:var(--pink)}#hero /* ---- day / night toggle ---- */
  #dn{position:absolute;right:clamp(20px,4vw,60px);top:clamp(20px,4vh,40px);z-index:5;display:flex;align-items:center;gap:14px;
    font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);opacity:0;animation:rise 1s .8s cubic-bezier(.2,.7,.2,1) forwards;transform:translateY(14px)}#hero #dn .lbl{width:52px;text-align:right;transition:color .6s}#hero #dn .lbl.on{color:#fff}#hero #dn button{position:relative;width:78px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.25);cursor:pointer;padding:0;overflow:hidden;
    background:linear-gradient(135deg,#0e1330,#2a1f4d);box-shadow:inset 0 2px 10px rgba(0,0,0,.6),0 8px 30px rgba(0,0,0,.35);transition:background 1.2s,border-color 1.2s,box-shadow 1.2s}#hero #dn button:focus-visible{outline:2px solid var(--pink);outline-offset:3px}#hero #dn button .knob{position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;transition:transform 1.1s cubic-bezier(.65,0,.15,1),background 1.2s,box-shadow 1.2s;
    background:radial-gradient(circle at 35% 35%,#fff,#cfd6ea 60%,#9aa5c9);box-shadow:0 0 18px rgba(200,215,255,.55)}#hero #dn button .knob::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 68% 40%,#0e1330 0 33%,transparent 35%);transition:opacity .9s}#hero #dn button .stars,#hero #dn button .sky{position:absolute;inset:0;transition:opacity 1.2s}#hero #dn button .stars{background:radial-gradient(circle,#fff 0 1px,transparent 1.5px) 52px 9px/3px 3px no-repeat,radial-gradient(circle,#fff 0 .8px,transparent 1.3px) 60px 22px/3px 3px no-repeat,radial-gradient(circle,#fff 0 .7px,transparent 1.2px) 44px 27px/3px 3px no-repeat}#hero #dn button .sky{opacity:0;background:radial-gradient(ellipse 22px 8px at 22px 26px,rgba(255,255,255,.85),transparent 70%),radial-gradient(ellipse 14px 6px at 14px 14px,rgba(255,255,255,.6),transparent 70%)}body.day #dn button{background:linear-gradient(135deg,#7fc3ff,#3b8fe0);border-color:rgba(255,255,255,.55);box-shadow:inset 0 2px 8px rgba(0,60,120,.35),0 8px 30px rgba(80,150,255,.35)}body.day #dn button .knob{transform:translateX(40px);background:radial-gradient(circle at 40% 40%,#fff7d6,#ffcf5a 55%,#f5a623);box-shadow:0 0 22px rgba(255,200,90,.9),0 0 50px rgba(255,170,60,.45)}body.day #dn button .knob::after{opacity:0}body.day #dn button .stars{opacity:0}body.day #dn button .sky{opacity:1}body.day .copy p,body.day .eyebrow{color:rgba(255,255,255,.86)}body.day #vig{background:radial-gradient(130% 100% at 62% 45%,transparent 55%,rgba(0,0,0,.35) 100%)}#hero /* ---- model selector ---- */
  #models{position:absolute;left:50%;bottom:clamp(18px,4vh,40px);transform:translateX(-50%) translateY(14px);z-index:5;display:flex;gap:2px;padding:5px;border-radius:999px;
    background:rgba(10,11,15,.45);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 60px rgba(0,0,0,.45);
    opacity:0;animation:rise 1s 1s cubic-bezier(.2,.7,.2,1) forwards}#hero #models .ind{position:absolute;top:5px;left:0;height:calc(100% - 10px);width:0;border-radius:999px;background:linear-gradient(135deg,rgba(249,17,118,.95),rgba(224,38,143,.85));
    box-shadow:0 6px 24px rgba(224,38,143,.45);transition:left .7s cubic-bezier(.65,0,.15,1),width .7s cubic-bezier(.65,0,.15,1)}#hero #models button{position:relative;z-index:1;background:none;border:0;color:rgba(255,255,255,.62);cursor:pointer;font-family:inherit;text-align:left;padding:9px 18px 9px 14px;border-radius:999px;
    display:flex;align-items:center;gap:10px;transition:color .5s;white-space:nowrap}#hero #models button i{font-style:normal;font-size:10px;letter-spacing:.18em;opacity:.55;font-weight:500}#hero #models button b{font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}#hero #models button.on{color:#fff}#hero #models button.on i{opacity:.9}#hero #models button:focus-visible{outline:2px solid #fff;outline-offset:-4px}#hero .copy{will-change:transform;transform-style:preserve-3d}#hero /* model geçişi: satırlar kademeli yukarı çıkar,#hero hemen ardından yeni metin alttan kademeli gelir (üst üste binme yok) */
  .copy.loaded>*{animation:none;opacity:1;transform:none}#hero .copy>*{transition:opacity .42s cubic-bezier(.2,.7,.2,1),transform .42s cubic-bezier(.2,.7,.2,1)}#hero .copy>*.out{opacity:0;transform:translateY(-12px);transition-duration:.24s;transition-timing-function:cubic-bezier(.4,0,.6,1)}#hero .copy>*.pre{opacity:0;transform:translateY(16px);transition:none}#hero /* aşağı kaydır butonu: diğer harf tipleri */
  #scrollDown{position:absolute;left:clamp(24px,6vw,110px);bottom:clamp(18px,4vh,40px);z-index:5;display:flex;align-items:center;gap:14px;text-decoration:none;color:rgba(255,255,255,.72);
    font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:0;transform:translateY(14px);animation:rise 1s 1s cubic-bezier(.2,.7,.2,1) forwards;transition:color .3s}#hero #scrollDown:hover{color:#fff}#hero #scrollDown .ring{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.04);backdrop-filter:blur(8px);display:grid;place-items:center;overflow:hidden;transition:border-color .3s,background .3s}#hero #scrollDown:hover .ring{border-color:var(--pink);background:rgba(224,38,143,.15)}#hero #scrollDown .ring svg{width:16px;height:16px;position:absolute;animation:chev 1.8s cubic-bezier(.45,0,.55,1) infinite}#hero #scrollDown .ring svg:nth-child(2){animation-delay:-.9s}
  @keyframes chev{0%{transform:translateY(-22px);opacity:0}30%{opacity:1}70%{opacity:1}100%{transform:translateY(22px);opacity:0}}#hero #scrollDown b{font-weight:500;display:block}#hero #scrollDown small{display:block;font-size:10px;letter-spacing:.16em;opacity:.55;margin-top:3px}
  @media (max-width:820px){#hero #scrollDown{left:50%;transform:translateX(-50%);bottom:14px}#hero #scrollDown b,#hero #scrollDown small{display:none} }
  @media (max-width:1100px){#hero #models button b{display:none}#hero #models button{padding:9px 12px} }#hero #stats{position:absolute;left:8px;top:8px;z-index:20;font:12px monospace;color:#0f0;background:rgba(0,0,0,.6);padding:4px 6px;display:none}body.poster-only .copy{}   /* poster modunda metin aynı */
  @media (max-width:820px){#hero .copy{top:auto;bottom:60px;transform:none;max-width:90%}#hero p{display:none}#hero #vig{background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.85) 100%)}#hero #poster{background-image:url(poster_mobile-v2.webp);background-position:70% center} }

  /* --- Avada/Fusion override'ları --- */
  #hero h1,#hero h1 span,#hero .sub{color:#fff}
  #hero h1 span{color:var(--pink)}
  #hero p{color:rgba(255,255,255,.74)}
  #hero .eyebrow{color:rgba(255,255,255,.6)}
  #hero a.btn,#hero a.btn:hover,#hero a.btn:focus{color:#fff;text-decoration:none}
  #hero #scrollDown,#hero #scrollDown:hover{color:rgba(255,255,255,.72);text-decoration:none}#hero #scrollDown:hover{color:#fff}
  #hero button{font-family:inherit}
  #hero h1{margin-top:0}
  #hero::before{content:'';position:absolute;left:0;right:0;top:0;height:160px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent)}