/* Stokop ana sayfası (giriş yapmamış ziyaretçi), sahibin tasarımı: koyu sahnede altı ürün döner (hazır render resimler,
   WebGL yok), altta açık renkli bölüm. CSP satır içi stile izin vermez: bütün stil bu dosyadadır; anasayfa.js yalnız
   element.style ile ürünlerin konumunu, boyunu ve rengini yazar. */
@property --c{syntax:'<color>';inherits:true;initial-value:#F072B0}
:root{--bg:#0B0F1C;--ink:#13192C;--cream:#FEFAF7;--muted:#4A5068;--wa:#25D366;--ease:cubic-bezier(.7,0,.2,1);--side:clamp(16px,4vw,48px);color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Üst menü: logo · Fiyatlar · Demo iste · Giriş yap · Başvuru yap (en güçlü düğme). Telefonda iki satır (aşağıda). */
.nav{position:absolute;z-index:30;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;
  padding:16px max(var(--side),env(safe-area-inset-right)) 16px max(var(--side),env(safe-area-inset-left))}
.nav .more{display:flex;gap:10px}
.brand{display:inline-flex;align-items:center;min-height:44px;font-weight:900;font-size:26px;letter-spacing:-1px;text-decoration:none;margin-right:auto;color:#fff}
.brand i{font-style:normal;background:linear-gradient(100deg,#4C9DF8,#A98BF7,#F072B0,#FBC07E);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;transition:transform .2s,background .2s}
.btn:active{transform:scale(.96)}
.btn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.btn.ghost:hover{background:rgba(255,255,255,.16)}
.btn.primary{background:#fff;color:var(--bg)}
.btn.primary:hover{background:#E6E9F2}
.btn.wa{background:var(--wa);color:#08281a}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:#26304D}
.btn.line{border:1px solid rgba(19,25,44,.25);color:var(--ink)}
.btn.line:hover{background:rgba(19,25,44,.06)}

/* Sahne */
.hero{--c:#F072B0;position:relative;height:100vh;height:100svh;min-height:600px;max-height:1100px;overflow:hidden;background:var(--bg);user-select:none;-webkit-user-select:none;transition:--c .8s ease}
.glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 42% at 50% var(--fy,62%),rgba(240,114,176,.38),transparent 72%);background:radial-gradient(55% 42% at 50% var(--fy,62%),color-mix(in srgb,var(--c) 38%,transparent),transparent 72%)}
.beam{position:absolute;left:50%;top:70px;width:min(64vw,520px);height:70%;transform:translateX(-50%);pointer-events:none;background:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.035) 55%,transparent);clip-path:polygon(32% 0,68% 0,100% 100%,0 100%)}
.ringlight{position:absolute;left:50%;top:70px;width:min(40vw,250px);height:18px;transform:translateX(-50%);border-radius:50%;border:2px solid rgba(255,255,255,.85);box-shadow:0 0 24px 2px rgba(255,255,255,.35),inset 0 0 10px rgba(255,255,255,.45);pointer-events:none}
.eyebrow{position:absolute;z-index:4;left:0;right:0;top:104px;text-align:center;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);padding:0 16px}
/* Tek parmak ürünleri kaydırır; sayfayı yukarı-aşağı kaydırmak ve iki parmakla yakınlaştırmak tarayıcınındır. */
.stage{position:absolute;inset:0;z-index:5;touch-action:pan-y pinch-zoom;cursor:grab;-webkit-tap-highlight-color:transparent}
.stage.drag{cursor:grabbing}
.ped{position:absolute;left:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 35%,#1E2640 0%,#121829 55%,#0C101C 100%);
  box-shadow:0 0 0 2px var(--c),0 18px 0 -2px #0A0D17;
  box-shadow:0 0 0 2px var(--c),0 0 26px 3px color-mix(in srgb,var(--c) 70%,transparent),0 18px 0 -2px #0A0D17,0 18px 0 0 color-mix(in srgb,var(--c) 35%,transparent),0 40px 70px 10px color-mix(in srgb,var(--c) 30%,transparent)}
/* Ürünler sayfada yazılıdır; betik onları yerleştirip gösterir (yerleşmeden boş ya da üst üste görünmesinler). */
.slide{position:absolute;left:50%;top:0;visibility:hidden;will-change:transform,opacity;pointer-events:none}
.slide img{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-user-drag:none;animation:float 5.5s ease-in-out infinite;opacity:0;transition:opacity .5s ease}
.slide img.in{opacity:1}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6%)}}
.name{position:absolute;left:0;right:0;text-align:center;font-weight:800;letter-spacing:-.01em;white-space:nowrap;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.name i{display:inline-block;width:.32em;height:.32em;border-radius:50%;margin-right:.35em;vertical-align:.18em;background:var(--dot);box-shadow:0 0 .5em var(--dot)}
.led{position:absolute;width:2.2%;aspect-ratio:1;border-radius:50%;background:#FF4D6D;box-shadow:0 0 10px 4px rgba(255,77,109,.75);transform:translate(-50%,-50%);animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}
.arr{position:absolute;z-index:8;width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:22px;cursor:pointer;transition:background .2s;-webkit-tap-highlight-color:transparent}
.arr:hover{background:rgba(255,255,255,.18)}
#prev{left:clamp(16px,3vw,40px)}#next{right:clamp(16px,3vw,40px)}
.bottom{position:absolute;z-index:9;left:0;right:0;bottom:clamp(16px,3.5vh,40px);display:flex;flex-direction:column;align-items:center;padding:0 16px;pointer-events:none}
.caps{position:relative;width:100%;max-width:620px;height:128px}
.cap{position:absolute;left:0;right:0;bottom:0;text-align:center;opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .55s var(--ease)}
.cap.on{opacity:1;transform:none;transition-delay:.1s}
.cap h2{font-size:clamp(28px,3.4vw,44px);line-height:1.04;letter-spacing:-.035em;margin-bottom:10px;font-weight:800}
.cap p{color:rgba(255,255,255,.7);max-width:500px;margin:0 auto;font-size:clamp(15px,1.3vw,17px);line-height:1.45}
.dots{display:flex;gap:8px;margin-top:18px;pointer-events:auto}
.dots button{position:relative;width:9px;height:9px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.28);cursor:pointer;transition:width .4s var(--ease),background .4s;-webkit-tap-highlight-color:transparent}
/* Görünen nokta küçük kalır; parmakla dokunulan alan daha büyüktür. */
.dots button::after{content:"";position:absolute;inset:-14px -4px}
.dots button.on{width:32px;background:#fff}
.hint{display:none;margin-top:10px;font-size:12px;color:rgba(255,255,255,.55);font-weight:600;letter-spacing:.06em}
/* Betik sahneyi yerleştirene kadar (ve betik yoksa) boş düğme, kayan ışık görünmez; sonra hepsi birlikte belirir. */
.hero:not(.ready) :is(.glow,.ped,.arr,.dots,.hint){visibility:hidden}
.hero.ready :is(.glow,.stage,.arr,.dots,.hint){animation:show .6s ease both}
@keyframes show{from{opacity:0}}
.still{position:absolute;z-index:5;left:50%;width:min(580px,42vw,64.8vh);height:auto;transform:translateX(-50%);bottom:calc(38% - .139*min(580px,42vw,64.8vh));pointer-events:none}

/* Açık bölüm, başvuru çağrısı ve alt bilgi */
.light{background:var(--cream);color:var(--ink)}
.strip{padding:64px max(clamp(16px,5vw,64px),env(safe-area-inset-right)) 32px max(clamp(16px,5vw,64px),env(safe-area-inset-left));display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1180px;margin:0 auto}
.strip div{background:#fff;border-radius:24px;padding:24px;box-shadow:0 10px 30px rgba(19,25,44,.06)}
.strip b{display:block;font-size:20px;margin-bottom:6px}.strip span{color:var(--muted);font-size:15px;line-height:1.45}
.cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:16px 16px 72px}
.cta p{width:100%;text-align:center;color:var(--muted);font-size:15px;margin-bottom:6px}
/* Dar ekranda teklif iki cümlesinin arasından bölünür ("ücretsiz." tek başına alt satıra düşmez). */
.cta p span{display:inline-block}
.foot{background:var(--cream);color:var(--ink);border-top:1px solid rgba(19,25,44,.1);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 22px;
  padding:18px max(16px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));font-size:14px;font-weight:600}
.foot .brand{margin-right:0;font-size:20px;letter-spacing:-.5px;color:var(--ink)}
.foot a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;text-decoration:none;opacity:.85}
.foot a:hover{opacity:1;text-decoration:underline}
.light :focus-visible,.foot :focus-visible{outline-color:var(--ink)}

@media (max-width:760px){
  :root{--side:16px}
  .nav{gap:8px;padding-top:14px;padding-bottom:14px}
  .nav .more{gap:8px}
  .nav .btn{padding:0 14px;font-size:14px}
  /* Menü düğmeleri 44 px: halka ışık tasarımdaki gibi menünün 10 px altındadır, ışıltısı düğmelere değmez. Küçük başlık
     halkanın ışığı üstünde de okunur (en az 4.5:1). */
  .ringlight{top:68px}.beam{top:68px;width:84vw}
  .eyebrow{top:94px;font-size:11px;color:rgba(255,255,255,.55)}
  .arr{display:none}
  .caps{height:140px}
  /* Telefonda oklar yoktur, noktalar vardır: her birinin dokunma alanı 24 px genişliktedir, komşusununkine taşmaz
     (noktalar aynı boyda kalır, aralarındaki boşluk büyür). */
  .dots{gap:15px}.dots button::after{inset:-14px -7.5px}
  .hint{display:block}
  .strip{grid-template-columns:1fr;padding-top:40px}
  .still{width:min(100vw,52vh);bottom:calc(44.5% - .139*min(100vw,52vh))}
}
/* Telefon: menü iki satırdır (logo, Giriş yap, Başvuru yap; altında Fiyatlar ve Demo iste). Halka ışık, ışık huzmesi
   ve başlık menünün altına iner; betik ürünleri başlıkla alt yazının arasına sığdırır. */
@media (max-width:600px){
  .nav{flex-wrap:wrap;row-gap:6px;padding-top:8px;padding-bottom:8px}
  .nav .more{order:1;flex:1 0 100%;justify-content:flex-end}
  .ringlight,.beam{top:112px}
  .eyebrow{top:138px}
}
/* Dar telefon: ilk satır (logo, Giriş yap, Başvuru yap) geniş yazı tipleriyle de tek satırda kalır. */
@media (max-width:400px){
  .brand{font-size:23px}
  .nav .btn{padding:0 12px}
}
@media (max-width:350px){
  .nav{column-gap:6px}.nav .more{gap:6px}
  .brand{font-size:20px}
  .nav .btn{padding:0 10px;font-size:13px}
}
/* Kısa ekran: başlık ekran okuyucu için sayfada kalır, sahneyi ürünlere bırakır. */
@media (max-height:700px){.eyebrow{left:auto;right:auto;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media (prefers-reduced-motion:reduce){
  .slide img,.led{animation:none}
  .slide img,.cap{transition-duration:.01s}
  .hero.ready :is(.glow,.stage,.arr,.dots,.hint){animation:none}
  .btn,.dots button{transition:none}
}