/* ==========================================================================
   NOT FM — giriş sayfası alternatifi: dönen koni
   Yalnızca /alternatif/ sayfasına yükleniyor. site.css'e DOKUNMUYOR ki
   alternatif reddedilirse tek dosya silinerek geri alınabilsin.
   ========================================================================== */

.konihero{
  /* Video inmezse (azaltılmış hareket, veri tasarrufu, ağ hatası) geriye düz
     siyah kalmasın: sitenin koyu bölümlerinde kullanılan aynı doku. */
  background:
    radial-gradient(72% 58% at 82% 2%,   rgba(49,162,220,.17), transparent 58%),
    radial-gradient(62% 55% at 12% 98%,  rgba(49,162,220,.11), transparent 62%),
    url('/assets/img/facet-dark.svg'),
    linear-gradient(158deg, #0d131a 0%, #06080b 46%, #0b0f14 100%);
  color:var(--on-dark, #fff);
}

/* ---------- arka plan videosu ---------- */

.konihero__zemin{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background-size:cover; background-position:center;
}
.konihero__klip{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity 1.2s ease;
}
.konihero__klip.acik{ opacity:1 }

/* KARARTMA: yeterince ama fazla değil.
   İlk denemede iki katman (.80-.92 elips + .86-.97 dikey) üst üste binince
   video tamamen kayboldu, geriye siyah bir zemin kaldı; videoyu koymanın
   anlamı buydu. Şimdi ortada koni için bir miktar koyuluk var, kenarlarda
   AVM görüntüsü okunuyor, altta metnin oturduğu yer solid'e yaklaşıyor. */
.konihero__zemin::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 66% 60% at 50% 46%,
                    rgba(11,13,17,.62), rgba(11,13,17,.34) 78%),
    linear-gradient(180deg,
                    rgba(11,13,17,.62) 0%,
                    rgba(11,13,17,.24) 34%,
                    rgba(11,13,17,.80) 76%,
                    rgba(11,13,17,.96) 100%);
}

/* YOL ARTIK TEK EKRAN. Önce 260vh idi ve dönüş sayfa kaydırmasına bağlıydı;
   koninin altındaki bölümlere inmek iki tam ekran boyu kaydırma istiyordu.
   Dönüş yatay sürüklemeye taşındı, dikey kaydırma sayfanın kendi işi oldu. */
.konihero__yol{ height:100svh; position:relative; }

/* KATMANLAR AÇIK KONUMLANDIRMAYLA, grid ile DEĞİL.
   Önce kapsayıcı `display:grid; place-items:center` idi ve içindeki mutlak
   konumlu çocuklarla çakıştı: başlığın `top` değeri uygulanmadı, koninin
   merkezi ekranın 540'ıncı pikseli yerine 808'ine düştü. Grid hizalaması ile
   mutlak konumlandırmayı aynı kutuda karıştırmak, ikisinin de nereye
   oturacağını tahmin edilemez yapıyor. */
.konihero__yapisik{
  position:sticky; top:0;
  height:100svh;                 /* svh: mobil tarayıcı çubuğu açılıp kapanınca zıplamasın */
  overflow:hidden;
  isolation:isolate;
}

/* ---------- başlık ---------- */

/* BAŞLIK KONİNİN ÖNÜNDE. Referansta arkadaydı ama orada cümlenin ortası
   kayboluyordu; kullanıcı kararı öne almak. Silikliği (opacity .34) zaten
   arkada duruyormuş hissini veriyor, karolar yazının içinden geçiyor.

   `pointer-events:none` ŞART: koni artık sürükleme yüzeyi ve başlık onun
   üstünde geniş bir bant kaplıyor. Olayları yutsaydı yazının bulunduğu
   yükseklikte koni sürüklenemezdi. */
.konihero__baslik{
  position:absolute; z-index:5; pointer-events:none;
  inset-inline:0; top:clamp(132px, 18vh, 196px);
  margin:0; padding-inline:var(--gut, 24px);
  text-align:center;
  font-weight:800; letter-spacing:-.03em; line-height:.94;
  /* PUNTO 13vw'DEN 9,5vw'YE İNDİ. 13vw'de başlık 1568 px'lik bir ekranda
     nowrap olarak 1900 px tutuyor ve iki ucundan kırpılıyordu; ortası da koni
     tarafından kapandığı için geriye "Marka ... sini aç" kalıyordu. Şimdi
     satır ekrana sığıyor ve koni yalnızca harflerin ALT kısmını örtüyor,
     yani derinlik duruyor ama cümle okunuyor. */
  font-size:clamp(2rem, 8.2vw, 6.8rem);
  /* SİLİK AMA KAYBOLMASIN. Zemin düz siyahken #8f9aa6 + %34 opaklık doğru
     tondu; arkaya AVM videosu gelince başlık tamamen yok oldu, çünkü
     videonun aydınlık kareleri o griyi yutuyor. Ton açıldı, opaklık biraz
     yükseldi, altına yumuşak bir gölge kondu; hâlâ arka planda duruyor ama
     her karede seçiliyor. */
  color:#d7dfe7;
  text-shadow:0 2px 26px rgba(0,0,0,.55);
  white-space:nowrap;
}
@media (max-width: 1180px){
  .konihero__baslik{ white-space:normal; text-wrap:balance }
}

/* Koninin arkasındaki başlık okunmasın diye değil, karışmasın diye hafif
   soluk. Tam beyaz bırakınca karolarla aynı parlaklıkta olup ikisi de
   okunmuyordu. */
.konihero__baslik{ opacity:.5 }

/* ---------- koni ---------- */

.koni{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;

  /* SÜRÜKLEME YÜZEYİ. Önce `pointer-events:none` idi (koni salt dekordu);
     dönüş yatay sürüklemeye bağlanınca olayları alması gerekti.
     `touch-action:pan-y` kritik: dokunmatikte DİKEY hareketi tarayıcıya
     bırakıyor, yatayı bize veriyor. `none` yazılsaydı parmakla sayfayı
     kaydırmak hero üzerinde imkânsız olurdu. */
  touch-action:pan-y;
  cursor:grab;
}
.koni.cekiliyor{ cursor:grabbing }
/* Karolar dekor: sürükleme kabı olayları alıyor, karolar almıyor. */
.koni__karo{ pointer-events:none }

.koni__sahne{
  position:relative;
  width:1px; height:1px;         /* halkalar mutlak, sahne yalnızca merkez */
  transform-style:preserve-3d;
  /* PERSPEKTİF SAHNEDE, kapsayıcıda DEĞİL. Kapsayıcıya verilince bakış
     noktası ekranın ortasına değil kutunun ortasına oturuyor ve koni sayfa
     kaydıkça eğiliyordu. */
  perspective:1400px;
  /* Koni ekranın tam ortasında değil, biraz YUKARIDA. Ortalandığında alt
     halka, alt metnin durduğu yüksekliğe kadar iniyordu. */
  /* Koni AŞAĞI kaydırıldı. Ortalandığında başlığın tam ortasına biniyor ve
     cümleden geriye "Marka ... ini aç" kalıyordu. 52 px ile başlığın yalnızca
     alt ucu arkada kalıyor: derinlik duruyor, cümle okunuyor. */
  transform:translateY(88px) rotateX(var(--bakis, 11deg));
}

.koni__halka{
  position:absolute; left:0; top:0;
  transform-style:preserve-3d;
  /* --don JS tarafından derece olarak yazılıyor. Halkalar zıt yönlerde
     dönüyor (--yon), duran bir koniden çok yaşayan bir şey gibi duruyor. */
  transform:
    translateY(var(--yy))
    rotateX(var(--egim))
    rotateY(calc(var(--don, 0deg) * var(--yon)));
}

.koni__karo{
  position:absolute; margin:0;
  --en:128px; --boy:180px;
  width:var(--en); height:var(--boy);
  left:calc(var(--en) / -2); top:calc(var(--boy) / -2);
  /* Karo kendi açısına dönüp yarıçap kadar öne itiliyor: silindir böyle
     kuruluyor. 360/n açı adımı, n karo çemberi tam dolduruyor. */
  /* Yarıçap `--rk` ile ölçekleniyor. Dar ekranda karo küçülüyor ama yarıçap
     satır içi biçimden geldiği için sabit kalırdı; karolar arasında boşluk
     açılır, çember dağılırdı. İkisi AYNI oranda küçülmek zorunda. */
  transform:
    rotateY(calc(var(--i) * (360deg / var(--n))))
    translateZ(calc(var(--r) * var(--rk, 1) + var(--one, 0px)))
    scale(var(--buyut, 1));
  border-radius:4px; overflow:hidden;
  background:#15181d;
  box-shadow:0 18px 44px rgba(0,0,0,.45);

  /* ODAK GEÇİŞİ. Halkanın dönüşü ANNE öğede, karonun kendi dönüşü sabit;
     bu yüzden karonun `transform`una geçiş vermek dönüşü yavaşlatmıyor,
     yalnızca öne çıkışı yumuşatıyor. Aynı geçiş halkaya verilseydi bütün
     dönüş gecikmeli ve lastikli hissedilirdi. */
  filter:brightness(var(--parlak, .74)) saturate(var(--doygun, .88));
  transition:transform .55s cubic-bezier(.22,.68,.24,1),
             filter .55s cubic-bezier(.22,.68,.24,1),
             box-shadow .55s ease;
}

/* Öne çıkan karo: JS her karede öndeki karoyu hesaplayıp bu sınıfı
   TAŞIYOR (her karoya stil yazmıyor, yalnızca değişen ikisine dokunuyor). */
.koni__karo.onde{
  --one:52px; --buyut:1.07; --parlak:1.08; --doygun:1.05;
  box-shadow:0 26px 64px rgba(0,0,0,.6);
  z-index:1;
}
.koni__karo.onde .koni__ad{
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.82));
  font-weight:600;
}

.koni__karo img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Ad karonun altında, GERÇEK METİN. Ekranda küçücük duruyor ama JS
   çalıştırmayan botlar için sayfadaki tek performer listesi bu. */
.koni__ad{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 8px 7px;
  font-size:.62rem; letter-spacing:.09em; text-transform:uppercase;
  text-align:center; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.72));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- ön katman ---------- */

/* ALT İÇERİĞİN ARKASINA PERDE. Karolar tam arkasından geçtiğinde metin
   okunmuyordu; gölge tek başına yetmedi, çünkü karolar da açık renkli. */
.konihero__yapisik::after{
  content:''; position:absolute; z-index:3; inset:auto 0 0 0;
  /* İLK PERDE YETMEDİ. %46 yükseklik ve %62'de başlayan koyulaşmayla alt
     metin hâlâ karoların üstünde okunmuyordu; yazının bulunduğu yükseklik
     perdenin daha saydam olan bölgesine denk geliyordu. Perde metnin
     ÜSTÜNDEN başlamak zorunda. */
  height:58%; pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0,
    rgba(11,13,17,.5) 26%,
    rgba(11,13,17,.9) 54%,
    #0b0d11 78%);
}

.konihero__on{
  position:absolute; z-index:4;
  inset-inline:0; bottom:clamp(56px, 11vh, 120px);
  padding-inline:var(--gut, 24px);
  text-align:center;
  display:grid; gap:22px; justify-items:center;
}
/* EN ÇOK İKİ SATIR. 44ch ile cümle üç satıra kırılıyor ve koninin alt
   halkasının önünde bir blok gibi duruyordu; genişleyince iki satıra iniyor
   ve düğmelerle arasındaki boşluk açılıyor. */
.konihero__alt{
  /* `<h1>` OLDUĞU İÇİN font-weight AÇIKÇA yazılıyor: tarayıcı h1'e kalın
     veriyor ve etiket değişikliği ekranda görünür olurdu. Etiketi anlamlı
     yapmak görünüşü değiştirmemeli. */
  font-weight:400;
  margin:0; max-width:min(78ch, 92vw);
  font-size:clamp(1rem, 1.5vw, 1.14rem); line-height:1.55;
  color:rgba(255,255,255,.82);
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.konihero__on .btns{ pointer-events:auto }
/* ---------- piksel geçişi ----------
   Gerçek pikselleştirme tuvalde yapılıyor (koni.js). Buradaki iki kural
   yalnızca metnin kendisini animasyon sırasında saklıyor ve sonunda geri
   veriyor. `visibility` DEĞİL `opacity` kullanılıyor: yerini korusun,
   yerleşim animasyon boyunca oynamasın. */
[data-piksel]{ position:relative }
[data-piksel].piksel-calisiyor{ color:transparent }
[data-piksel] > canvas.piksel-tuval{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
  image-rendering:pixelated;
}

/* ---------- azaltılmış hareket ----------
   Dönüş de piksel geçişi de kapanıyor. Koni duruyor ama görünüyor: içerik
   kaybı yok, yalnızca hareket yok. */
@media (prefers-reduced-motion: reduce){
  .konihero__yol{ height:100svh }
  .koni__halka{ transform:translateY(var(--yy)) rotateX(var(--egim)) }
}

/* ---------- dar ekran ----------
   Yarıçaplar CSS'ten ölçekleniyor, JS'ten değil: JS kapalıyken de koni
   ekrana sığmalı. */
@media (max-width: 900px){
  .koni__sahne{ perspective:1000px }
  .koni__karo{ --en:104px; --boy:146px; --rk:.8125 }
  .koni__halka{ transform:translateY(calc(var(--yy) * .62))
                          rotateX(var(--egim))
                          rotateY(calc(var(--don, 0deg) * var(--yon))); }
}
@media (max-width: 620px){
  .koni__karo{ --en:84px;  --boy:118px; --rk:.656 }
}


/* ---------- performer şeridi koni hero'sunun içinde ----------
   `.ktp-bant` site.css'te `position:absolute; z-index:3` olarak tanımlı ve
   en yakın konumlanmış ata olan `.konihero__yapisik`a oturuyor. Tek gereken
   sıralama: koninin (2) ve karartma perdesinin (3) ÜSTÜNDE olmalı, yoksa
   perde şeridi de soldurur. */
.konihero__yapisik .ktp-bant{ z-index:6; top:clamp(10px, 1.6vh, 22px) }