:root{
  --zemin:#070B16; --metin:#EEF1F7; --metin2:#9AA4BA; --cizgi:rgba(255,255,255,.10);
  --mor:#7C5CFF; --cam:#38D9F5; --lacivert:#1B2A6B; --hata:#FF5D5D; --kayma:#FFB454; --temiz:#3ED598;
  --display:'Plus Jakarta Sans',sans-serif; --govde:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--zemin);color:var(--metin);font-family:var(--govde);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cam);outline-offset:3px}
h1{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.1;font-size:clamp(30px,3.7vw,48px)}

/* ---- nav (sahnenin ustunde, saydam) */
nav{position:fixed;top:0;left:0;right:0;z-index:30;padding:14px 0;background:linear-gradient(180deg,rgba(7,11,22,.85),rgba(7,11,22,0))}
nav .kap{width:min(1240px,92vw);margin:0 auto;display:flex;align-items:center;gap:28px}
nav .logo{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:19px}
nav .logo img{height:56px}
.sol-bulut{position:fixed;left:calc((100vw - min(1240px,92vw))/2 - 60px);top:-6px;width:300px;height:250px;z-index:5;pointer-events:none}
/* asagi ok: ici bos altigen (SVG), turkuaz cizgi, hover'da az hareket + isilti */
.asagi-btn{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;width:54px;height:60px;display:block;color:var(--cam);text-decoration:none;transition:transform .25s,filter .25s;cursor:pointer}
.asagi-btn svg{display:block;width:100%;height:100%}
.asagi-btn:hover{transform:translateX(-50%) translateY(3px);filter:drop-shadow(0 0 10px rgba(56,217,245,.75))}
.asagi-btn.sakin-ok{position:relative;left:auto;bottom:auto;transform:none;margin:56px auto 0}
.asagi-btn.sakin-ok:hover{transform:translateY(3px)}
/* giris yap: hover'da yukselme + mavi isilti */

nav .baglar{display:flex;gap:24px;margin-left:auto;color:var(--metin2);font-size:15px}
nav .baglar a:hover{color:var(--metin)}
.menu{position:relative}
.menu .tetik{cursor:pointer}
.menu .acilir{position:absolute;left:-16px;top:calc(100% + 14px);min-width:300px;padding:8px;border-radius:14px;background:rgba(12,18,34,.96);border:1px solid var(--cizgi);box-shadow:0 24px 60px rgba(0,0,0,.5);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.menu.acik .acilir,.menu:hover .acilir{opacity:1;visibility:visible;transform:none}
.menu .acilir a{display:block;padding:12px 14px;border-radius:10px;color:var(--metin)}
.menu .acilir a:hover{background:rgba(255,255,255,.06)}
.menu .acilir b{display:block;font-family:var(--display);font-weight:700;font-size:15px}
.menu .acilir span{display:block;font-size:13px;color:var(--metin2);margin-top:2px}
.dil{display:flex;gap:2px;margin-right:6px;padding:3px;border:1px solid var(--cizgi);border-radius:999px;font-size:13px;font-weight:600}
.dil span{padding:5px 10px;border-radius:999px;color:var(--metin2)}
.dil .aktif{background:rgba(255,255,255,.1);color:var(--metin)}
.dil .pasif{cursor:default;opacity:.55}
.btn{display:inline-flex;align-items:center;padding:11px 20px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid var(--cizgi);background:rgba(255,255,255,.04);backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.btn:hover{border-color:rgba(255,255,255,.35)}
.btn{transition:transform .2s,box-shadow .2s,border-color .2s,filter .2s}
.btn:hover{transform:translateY(-2px);border-color:var(--cam);box-shadow:0 0 0 1px rgba(56,217,245,.5),0 0 22px rgba(56,217,245,.45)}
.btn.dolu{background:linear-gradient(135deg,#6A4DE8,#2FB9D3);border:0;color:#fff}
.btn.dolu:hover{filter:brightness(1.05);box-shadow:0 0 0 1px rgba(56,217,245,.5),0 0 24px rgba(56,217,245,.5)}

/* ---- sahne */
.sahne{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center}
.arka{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora{position:absolute;inset:-20%;z-index:0;pointer-events:none;filter:blur(60px);opacity:.75;
  background:
    radial-gradient(40% 35% at 20% 30%, rgba(124,92,255,.45), transparent 70%),
    radial-gradient(35% 30% at 78% 22%, rgba(56,217,245,.35), transparent 70%),
    radial-gradient(45% 40% at 60% 85%, rgba(27,42,107,.9), transparent 70%);
  animation:aurora 22s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate3d(0,0,0) rotate(0deg)}100%{transform:translate3d(4%,-3%,0) rotate(6deg)}}
.tozlar{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
section,footer{position:relative;z-index:1}
canvas.parcacik{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.sahne .kap{position:relative;z-index:2;width:min(1240px,92vw);margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:118px 0 96px}

/* etiket */
.etiket-kap{position:relative;perspective:1400px}
.etiket{position:relative;transform:rotateY(-9deg) rotateX(6deg);transform-style:preserve-3d;border-radius:12px;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);opacity:0}
.etiket svg{display:block;width:100%;height:auto;border-radius:12px}
.izgara{position:absolute;inset:0;border-radius:12px;pointer-events:none;
  background-image:linear-gradient(rgba(56,217,245,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(56,217,245,.18) 1px,transparent 1px);
  background-size:18px 18px;clip-path:inset(0 0 100% 0)}
.isin{position:absolute;left:-6%;right:-6%;height:3px;top:0;border-radius:3px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,var(--cam) 20%,#fff 50%,var(--cam) 80%,transparent);
  box-shadow:0 0 18px 4px rgba(56,217,245,.55),0 0 60px 10px rgba(56,217,245,.25)}
.isin::after{content:"";position:absolute;left:0;right:0;top:3px;height:70px;background:linear-gradient(180deg,rgba(56,217,245,.28),transparent)}
.nokta{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;opacity:0;
  background:var(--hata);box-shadow:0 0 0 0 rgba(255,93,93,.6)}
.nokta.kayma{background:var(--kayma);box-shadow:0 0 0 0 rgba(255,180,84,.6)}
.nokta.gorunur{opacity:1;animation:nabiz 1.6s ease-out infinite}
.nokta.zemin.gorunur{animation:nabiz-kirmizi 1.6s ease-out infinite}
@keyframes nabiz{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}100%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
@keyframes nabiz-kirmizi{0%{box-shadow:0 0 0 0 rgba(255,120,120,.55)}100%{box-shadow:0 0 0 22px rgba(255,120,120,0)}}

/* AI olusumu + okuma */
.olusum-kap{position:relative;min-height:420px}
.okuma{position:absolute;left:52%;top:50%;transform:translateY(-50%);display:grid;gap:10px;min-width:260px}
.okuma .satir{display:flex;align-items:baseline;gap:10px;opacity:0;transform:translateX(8px);font-size:16px;color:var(--metin2)}
.okuma .satir b{font-family:var(--display);font-weight:700;font-size:16px;color:var(--metin);white-space:nowrap}
.okuma .satir.kayma b{color:var(--kayma)} .okuma .satir.hata b{color:var(--hata)}
.okuma .satir.sonuc{margin-top:6px;padding-top:12px;border-top:2px solid rgba(255,255,255,.32);color:var(--metin)}
.okuma .satir em{font-style:normal;font-size:16px;font-weight:600;color:var(--metin2);min-width:112px;padding-right:12px;margin-right:4px;border-right:2px solid rgba(255,255,255,.32);white-space:nowrap}
.okuma .satir.sonuc em{border-right:0;min-width:0;padding:0}
.okuma .satir.hata em{color:var(--hata)} .okuma .satir.kayma em{color:var(--kayma)}
.okuma .satir.sonuc b{color:var(--cam)}

/* baslik */
.baslik{position:absolute;left:0;right:0;bottom:0;z-index:4;padding-bottom:64px;pointer-events:none}
.baslik .kap{width:min(1240px,92vw);margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:end}
.baslik .metin{opacity:0;transform:translateY(16px);pointer-events:auto}
.baslik p{margin:14px 0 24px;font-size:20px;color:var(--metin2);max-width:34em}
.baslik .cta{display:flex;gap:12px;flex-wrap:wrap}
.sahne.bitti .etiket-kap,.sahne.bitti .olusum-kap{transition:opacity .8s}
.asagi{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;opacity:0}

@media (max-width:900px){
  nav .baglar{display:none}
  nav .logo img{height:44px}.sol-bulut{display:none}.asagi-btn{display:none}
  .sahne .kap,.baslik .kap{grid-template-columns:1fr;gap:24px;padding-top:100px}
  .olusum-kap{min-height:260px}
  .okuma{left:44%}
  .etiket{transform:none}
}

/* ---- scroll hikayesi (pin) */
.hikaye{position:relative;height:340vh}
.hikaye .sabit{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.hikaye .sabit .asagi-btn{position:absolute;left:50%;bottom:22px;transform:translateX(-50%)}
.hikaye .sabit .asagi-btn:hover{transform:translateX(-50%) translateY(3px)}
section.sakin .asagi-btn.sakin-ok:hover{transform:translateY(3px);filter:drop-shadow(0 0 10px rgba(56,217,245,.75))}
.hikaye .kap{width:min(1240px,92vw);margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.sahne2{position:relative;perspective:1400px}
.sahne2 .kagit{position:relative;border-radius:12px;box-shadow:0 30px 70px rgba(0,0,0,.5);transform:rotateY(-6deg) rotateX(4deg)}
.sahne2 .kagit svg{display:block;width:100%;height:auto;border-radius:12px}
.sahne2 .doku{position:absolute;inset:0;border-radius:12px;pointer-events:none;opacity:0;mix-blend-mode:multiply;
  background:radial-gradient(120% 90% at 30% 20%,rgba(120,100,60,.10),transparent 60%),repeating-linear-gradient(0deg,rgba(0,0,0,.045) 0 1px,transparent 1px 3px)}
.sahne2 .ikinci{position:absolute;inset:0;border-radius:12px;transform:translate(6%,8%) rotateY(-6deg) rotateX(4deg);opacity:0;pointer-events:none;
  background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.4);border:1px solid rgba(0,0,0,.08)}
.sahne2 .ikinci span{position:absolute;left:14px;top:12px;font-size:12px;color:#5b6472;font-weight:600}
.sahne2 .cerceve{position:absolute;border:3px solid var(--hata);border-radius:3px;opacity:0}
.sahne2 .cerceve.kayma{border-color:var(--kayma)}
.sahne2 .isin2{position:absolute;left:-6%;right:-6%;height:3px;top:0;border-radius:3px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--cam) 20%,#fff 50%,var(--cam) 80%,transparent);box-shadow:0 0 18px 4px rgba(56,217,245,.55)}
.sahne2 .olcu{position:absolute;inset:0;opacity:0;pointer-events:none}
.duraklar{position:relative;min-height:450px}
.durak{position:absolute;inset:0;opacity:0;transform:translateY(18px);pointer-events:none}
.durak.aktif{pointer-events:auto}
.durak .asama{font-size:16px;color:var(--cam);font-weight:600;margin-bottom:14px}
.durak h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.08;font-size:clamp(30px,3.6vw,46px)}
.durak p{margin:16px 0 22px;font-size:18px;color:var(--metin2);max-width:30em}
.durak .girdi{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.durak .girdi span{font-size:13px;padding:5px 11px;border-radius:999px;border:1px solid var(--cizgi);background:rgba(255,255,255,.04)}
.ilerleme{position:absolute;left:0;bottom:-12px;display:flex;gap:8px}
.ilerleme i{display:block;width:34px;height:3px;border-radius:3px;background:var(--cizgi)}
.ilerleme i.aktif{background:linear-gradient(90deg,var(--mor),var(--cam))}

/* ---- sakin bolumler */
section.sakin{padding:104px 0}
section.sakin .kap{width:min(1240px,92vw);margin:0 auto}
section.sakin h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.08;font-size:clamp(30px,3.6vw,46px)}
.buyuk{font-size:19px;color:var(--metin2);max-width:34em;margin-top:16px}
.ilke .ilke-ust{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start}
.adimlar{list-style:none;display:grid;gap:18px}
.adimlar li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.adimlar .no{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;font-family:var(--display);font-weight:800;font-size:17px;background:linear-gradient(135deg,#6A4DE8,#2FB9D3);color:#fff}
.adimlar h3{font-family:var(--display);font-weight:700;font-size:19px;margin-bottom:6px}
.adimlar p{color:var(--metin2);font-size:15px}
.yakalar-ozet{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 28px;margin-top:64px;padding-top:40px;border-top:2px solid rgba(255,255,255,.28)}
.yakalar-ozet .oge b{display:block;font-family:var(--display);font-weight:700;font-size:17px;margin-bottom:4px}
.yakalar-ozet .oge p{color:var(--metin2);font-size:15px}
.guven{margin-top:36px;font-size:15px;color:var(--metin2)}
.olcum{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--cizgi)}
.olcum:first-child{border-top:1px solid var(--cizgi)}
.olcum .deger{font-family:var(--display);font-weight:800;font-size:30px;line-height:1}
.olcum .deger.kayma{color:var(--kayma)} .olcum .deger.hata{color:var(--hata)} .olcum .deger.belirsiz{color:var(--metin2)}
.olcum p{color:var(--metin2);font-size:15px}
.kimler .liste{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.kimler .oge{padding:26px 24px;border-radius:14px;border:1px solid var(--cizgi);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}
.kimler .oge h3{font-family:var(--display);font-weight:700;font-size:19px;margin-bottom:8px}
.kimler .oge p{color:var(--metin2);font-size:15px}
.iletisim{position:relative;overflow:hidden}
.iletisim .aurora2{position:absolute;inset:-30%;filter:blur(70px);opacity:.5;pointer-events:none;
  background:radial-gradient(35% 40% at 25% 60%,rgba(124,92,255,.45),transparent 70%),radial-gradient(30% 35% at 80% 30%,rgba(56,217,245,.32),transparent 70%)}
.iletisim .kap{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.kanallar{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:4px 16px}
.kanal{display:flex;align-items:center;gap:16px;padding:14px 12px;border-radius:14px;color:var(--metin);transition:background .2s,transform .2s}
.kanal .ikon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:2px solid rgba(56,217,245,.55);color:var(--cam);flex:0 0 52px;transition:box-shadow .2s,transform .2s}
.kanal .ikon svg{width:24px;height:24px}
.kanal .metin{display:grid;gap:2px}
.kanal .metin b{font-family:var(--display);font-weight:700;font-size:16px}
.kanal .metin span{color:var(--metin2);font-size:15px}
.kanal:hover{background:rgba(255,255,255,.04);transform:translateX(2px)}
.kanal:hover .ikon{box-shadow:0 0 0 1px rgba(56,217,245,.5),0 0 22px rgba(56,217,245,.45);transform:translateY(-1px)}
footer{padding:36px 0 44px;font-size:14px;color:var(--metin2)}
footer .kap{width:min(1240px,92vw);margin:0 auto;display:flex;gap:24px;flex-wrap:wrap;align-items:center}
footer .yasal{margin-left:auto;display:flex;gap:18px}
@media (max-width:900px){
  .hikaye{height:auto}.hikaye .sabit{position:relative;height:auto;padding:60px 0}
  .hikaye .kap,.ilke .ilke-ust,.iletisim .kap,.kanallar{grid-template-columns:1fr}
  .kanallar{grid-auto-flow:row;grid-template-rows:none}
  .yakalar-ozet{grid-template-columns:1fr}
  .duraklar{min-height:0}.durak{position:relative;opacity:1;transform:none;margin-bottom:40px;pointer-events:auto}
  .kimler .liste{grid-template-columns:1fr}.olcum{grid-template-columns:110px 1fr}
}

@media (prefers-reduced-motion:reduce){.aurora{animation:none}.nokta.gorunur{animation:none}}

/* ---- SAHNE_V1: sabit sahne, ekrana oransal olcek. PC 1440x800 (k<=1), mobil 390 genislik (yukseklik icerige gore).
   --k/--sw/--sh JS (site.js sahneOlcekle) tarafindan yazilir; JS yoksa k=1 = bugunku 1440 gorunumu. */
.sahne{justify-content:center;--k:1;--sw:1440px;--sh:800px}
.sahne-alan{position:relative;z-index:2;flex:0 0 auto;width:calc(var(--sw) * var(--k));height:calc(var(--sh) * var(--k))}
.sahne-kutu{position:absolute;left:0;top:0;width:var(--sw);height:var(--sh);transform:scale(var(--k));transform-origin:0 0}
.sahne-kutu > .kap{position:absolute;left:100px;top:96px;width:1240px;margin:0;padding:0;align-items:start}
.sahne-kutu .olusum-kap{min-height:420px;margin-top:-106px} /* SAHNE_V1B: etiketle ayni hiza */
/* SAHNE_V1C ince ayar: okuma satirlari asagi (+), beyin yukari (-). Sadece bu iki sayiyi degistir. */
.sahne-kutu{--okuma-kay:16px;--beyin-kay:0px}
.sahne-kutu .okuma{top:calc(50% + var(--okuma-kay))}
.sahne-kutu .baslik{position:absolute;left:0;right:0;bottom:70px;padding:0}
.sahne-kutu .baslik .kap{width:1240px}
.sahne-kutu h1{font-size:48px}
.sahne-kutu .baslik p{font-size:20px}
.sahne-kutu .asagi{bottom:22px}
/* mobil sahne: genislige gore olcek, dikey akis, ust uste binme yok */
.sahne.mobil-sahne .sahne-kutu{height:auto;padding:90px 16px 36px}
.sahne.mobil-sahne .sahne-kutu > .kap{position:static;width:auto;grid-template-columns:1fr;gap:18px;padding:0}
.sahne.mobil-sahne .etiket{transform:none}
.sahne.mobil-sahne .olusum-kap{min-height:380px}
.sahne.mobil-sahne .okuma{position:absolute;left:0;right:0;top:auto;bottom:0;transform:none;min-width:0;gap:8px}
.sahne.mobil-sahne .okuma .satir,.sahne.mobil-sahne .okuma .satir b,.sahne.mobil-sahne .okuma .satir em{font-size:14px}
.sahne.mobil-sahne .okuma .satir em{min-width:92px;padding-right:8px}
.sahne.mobil-sahne .baslik{position:static;padding:10px 0 0}
.sahne.mobil-sahne .baslik .kap{width:auto;grid-template-columns:1fr;gap:0;padding-top:0}
.sahne.mobil-sahne h1{font-size:32px}
.sahne.mobil-sahne .baslik p{font-size:17px;margin:12px 0 18px}