/* ═══════════════════════════════════════════════════════════════
   Swest Studios · swest.dev

   Sayfa üç durumdan geçiyor:
     1. giriş  — erişim kodu animasyonu, marka anı
     2. seçim  — hangi işi yapıyorsunuz, altı sektör
     3. karusel — o sektörün tasarımları, 3B

   Sayfa hiç kaydırılmıyor; perde değişimi kaydırmanın yerini alıyor.

   Hareket kuralı:
     giriş  520ms  yavaşlayarak biter
     çıkış  180ms  hızlanarak gider
     sıra    70ms  kartlar arası gecikme
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#000; --yazi:#f3f0fa; --soluk:#7c7392; --soluk2:#443c58; --cizgi:#241d36;
  --mor:#8b5cf6; --mor-ac:#a78bfa; --onay:#4fc9a0;
  --vurgu:#8b5cf6;                     /* seçili sektörün rengi, JS değiştirir */
  --mono:"Cascadia Mono","Consolas",ui-monospace,monospace;
  --ui:"Segoe UI",system-ui,-apple-system,sans-serif;
  --yay:cubic-bezier(.16,1,.3,1);
  --hiz:cubic-bezier(.5,0,.9,.3);
  --kw:clamp(215px,22vw,330px);
  --kh:clamp(290px,53svh,470px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--yazi);font:400 16px/1.7 var(--ui);
  -webkit-font-smoothing:antialiased;overflow:hidden}
/* Yatayda hiçbir şey taşmasın. Tek bir taşan katman bile telefonda
   sayfayı genişletip ortalanmış her yazıyı sola kaydırıyor. */
html{overflow-x:hidden;max-width:100%}

/* Telefonda `height:100%` yanlış ölçü veriyor: tarayıcı araç çubuğu
   gizliyken ki BÜYÜK alanı gösteriyor, oysa sayfa açıldığında çubuk
   duruyor. İçerik görünenden uzun kalıyor, sayfa kayıyor ve kart
   üstteki başlığın, alttaki açıklamanın üstüne biniyordu.
   svh her zaman en küçük (çubuk açıkken) alanı verir; çubuk gizlenince
   altta biraz boşluk kalır, bu kaymadan iyidir. */
@supports (height:100svh){
  html,body{height:100svh}
}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.rozet-sw{border-radius:22%;display:grid;place-items:center;
  background:linear-gradient(160deg,#582dbe,#3a1a8c);border:1.5px solid var(--mor-ac);
  box-shadow:0 0 40px rgba(139,92,246,.38),0 18px 50px rgba(0,0,0,.7)}
.rozet-sw svg{width:58%;height:58%}
.rozet-sw polygon{fill:#fff}

/* ══ 1 · giriş ═══════════════════════════════════════════ */
/* Açılış bir kararma değil, bir kapı: panel öne doğru büyüyüp
   dağılırken arkadaki sahne alttan yükseliyor. İki hareket
   üst üste binsin diye sahnenin gecikmesi perdeden kısa. */
#giris{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;
  transition:opacity .7s var(--hiz),visibility .7s,
             transform .9s var(--yay),filter .7s ease}
#giris.acildi{opacity:0;visibility:hidden;transform:scale(1.09);filter:blur(7px)}
.giris-ic{text-align:center;padding:24px}
.giris-ic .rozet-sw{width:62px;height:62px;margin:0 auto 24px}
#girisAd{font-family:var(--mono);font-size:clamp(24px,6vw,42px);font-weight:700;
  letter-spacing:.34em;text-indent:.34em;color:#fff;min-height:1.2em}
.kutular{display:flex;gap:13px;justify-content:center;margin:28px 0 16px}
.kutu{width:48px;height:62px;border:1px solid var(--cizgi);display:grid;place-items:center;
  font-family:var(--mono);font-size:28px;color:transparent;
  transition:border-color .2s,color .2s,background .2s,transform .2s}
.kutu.acik{border:2px solid var(--mor-ac);color:var(--mor-ac);transform:translateY(-3px)}
.kutu.onay{border:2px solid var(--onay);color:var(--onay);background:#152a26;transform:none}
#girisDurum{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--soluk2);
  min-height:1.4em}
#girisDurum.onay{color:var(--onay)}
.atla{margin-top:28px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--soluk2);transition:color .2s}
.atla:hover{color:var(--mor-ac)}
.imza{position:absolute;bottom:24px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:11px;color:var(--soluk2)}

/* ══ ambiyans · zemin ═══════════════════════════════════
   Üçüncü hareket katmanı. Hiçbir şey olmadığında bile sayfa
   nefes alıyor; ışık çok yavaş salınıyor ki göz fark etmeden
   ortam canlı kalsın. Sektör seçilince rengi oraya kayıyor. */
.isik{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(58% 42% at 50% 24%,
    color-mix(in srgb,var(--vurgu) 22%,transparent),transparent 72%);
  background-repeat:no-repeat;background-size:118% 118%;background-position:50% 50%;
  transition:background-image 1.1s var(--yay);
  animation:isikSalin 19s ease-in-out infinite}
.isik::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(80% 60% at 50% 118%,rgba(139,92,246,.13),transparent 70%);
  background-repeat:no-repeat;background-size:120% 120%;background-position:50% 50%;
  animation:isikSalin 26s ease-in-out infinite reverse}
/* Salınımı katmanı kaydırarak değil zemini kaydırarak yapıyoruz:
   transform ile büyütünce kutu ekranın dışına taşıyor ve telefonda
   sayfayı genişletiyordu. */
@keyframes isikSalin{
  0%,100%{background-position:50% 50%}
  50%{background-position:58% 43%}
}

/* İnce tane dokusu: düz siyah zemini kırıp derinlik veriyor.
   Katman ekranı taşmıyor. Önce `inset:-50%` ile taşırıp kendisini
   kaydırıyorduk; iOS'ta sabit konumlu bu taşma sayfayı genişletiyor
   ve ortalanmış her yazı sola kayıyordu. Artık kutu ekranla aynı
   boyda, hareketi zemin deseni yapıyor. */
.tane{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:taneKay 7s steps(6) infinite}
@keyframes taneKay{
  0%{background-position:0 0} 33%{background-position:-26px 18px}
  66%{background-position:20px -24px} 100%{background-position:0 0}
}

.sahne{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
  opacity:0;transform:translateY(18px) scale(.986);
  transition:opacity .9s var(--yay) .12s,transform .9s var(--yay) .12s}
body.gorundu .sahne{opacity:1;transform:none}

/* ══ üst şerit ═══════════════════════════════════════════ */
/* Perde `position:absolute;inset:0` ile üst şeridin de üstünü kaplıyor
   ve DOM'da sonra geldiği için tıklamalar ona düşüyordu: e-posta,
   Instagram ve logo bağlantıları görünüyor ama çalışmıyordu. Şerit
   yığında perdenin üstüne alındı; zemin de verildi, yoksa aşağıdan
   kayan kartlar şeridin içinden geçiyor. */
.ust{position:relative;z-index:5;flex:none;display:flex;align-items:center;gap:1rem;
  padding:1rem clamp(1.1rem,4vw,2.4rem);border-bottom:1px solid var(--cizgi);
  background:var(--bg)}
.marka{display:flex;align-items:center;gap:.75rem}
.marka .rozet-sw{width:34px;height:34px;border-radius:26%;flex:none;
  box-shadow:0 0 22px rgba(139,92,246,.35)}
.marka .amblem{width:34px;height:34px;flex:none;object-fit:contain}
/* logo.png yoksa SVG rozete düşülüyor, marka boşluğu kalmıyor */
.gorsel-yuva{display:grid;place-items:center;flex:none}
.gorsel-yuva>*{grid-area:1/1}
.gorsel-yuva .yedek{display:none}
.gorsel-yuva.yedekte .amblem{display:none}
.gorsel-yuva.yedekte .yedek{display:grid}
.marka b{font-size:1rem;font-weight:700;letter-spacing:-.01em;display:block;line-height:1.1}
.marka small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.34em;
  color:var(--soluk2);margin-top:1px}
.ustbag{margin-left:auto;display:flex;gap:.4rem}
/* Kenarlık dururken de görünüyor: tıklanabilir olduğu üstüne
   gelmeden anlaşılsın. Onlar iletişim kanalımız, gizlenmemeli. */
.ustbag a{display:inline-flex;align-items:center;gap:.5rem;
  padding:.52rem .95rem;border-radius:20px;
  border:1px solid var(--cizgi);background:rgba(255,255,255,.025);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--soluk);
  transition:color .3s,border-color .3s,background .3s,transform .35s var(--yay)}
.ustbag a:hover{color:var(--yazi);border-color:var(--mor-ac);
  background:rgba(139,92,246,.16);transform:translateY(-2px)}
.ustbag a:hover svg{stroke:var(--mor-ac)}
.ustbag svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ══ perde ortak ═════════════════════════════════════════ */
.perde{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:clamp(4.5rem,9vh,6rem) clamp(1.1rem,4vw,2.4rem) clamp(3.6rem,7vh,4.4rem)}
.perde[hidden]{display:none}
.perde.cikiyor{pointer-events:none}

/* ══ 2 · sektör seçimi ═══════════════════════════════════ */
.sec{justify-content:center;text-align:center}
.sec-bas{max-width:44rem;margin:0 auto clamp(1.6rem,4vh,2.6rem)}
.etiket{font-family:var(--mono);font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--mor-ac)}
h1{margin-top:.9rem;font-size:clamp(1.9rem,4.6vw,3.2rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.05;text-shadow:0 0 42px rgba(199,180,255,.26)}
.sec-bas p{margin-top:.9rem;color:var(--soluk);font-size:clamp(.88rem,1.6vw,1rem)}

/* ── şeritler ──────────────────────────────────────────────
   Altı sektör, kalan yüksekliği bölüşen tam boy paneller.
   Izgara değil olmasının sebebi: ızgara sabit yükseklik istiyor
   ve %100 yakınlıkta alt sıra ekrandan taşıyordu. Şerit ne kadar
   yer varsa onu dolduruyor, hiçbir ekranda kaydırma gerekmiyor.

   Üstüne gelinen şerit açılıyor: fotoğrafı renklenip yakınlaşıyor,
   dikey adı yerini yatay bloğa bırakıyor.                        */
/* On sektör tek sırada dizilince şerit başına ~120px kalıyor, fotoğraf
   dilime dönüyor ve uzun adlar kırpılıyordu. Şeritler artık sarıyor.
   Satır başına kaç kart düşeceğini vitrin.js sektör sayısından
   hesaplayıp --sr-sutun'a yazıyor; burada elle ayar yok. Yana açılma
   duruyor: flex-grow yalnızca kendi satırındaki kardeşleri daraltıyor. */
/* Her satır kendi flex kabında (vitrin.js sarıyor). Böylece açılan kart
   yalnızca kendi satırındaki kardeşleri daraltıyor, kartlar satır
   değiştirmiyor ve flex-grow yumuşak geçiyor. */
.seritler{--g:clamp(.4rem,.8vw,.7rem);
  flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--g);
  width:min(78rem,100%);margin-inline:auto}
.sr-satir{flex:1;min-height:0;display:flex;gap:var(--g)}
.sr{position:relative;flex:1 1 0;min-width:0;overflow:hidden;text-align:left;
  border-radius:14px;border:1px solid var(--cizgi);background:#0a0812;
  /* Buradaki süre KAPANIŞI yönetiyor, :hover'daki AÇILIŞI. Açılış
     yaylı bir eğriyle geliyor; aynı eğri geri dönüşte kartı bir anda
     kapatıp sert duruyordu, kapanış daha dengeli bir eğriyle gidiyor. */
  transition:flex-grow .6s cubic-bezier(.33,0,.2,1),
             border-color .5s ease,box-shadow .5s ease}
.sr:hover,.sr.acik{flex-grow:3.1;
  transition:flex-grow .62s var(--yay),border-color .45s ease,box-shadow .45s ease;
  border-color:color-mix(in srgb,var(--r) 55%,transparent);
  box-shadow:0 0 50px color-mix(in srgb,var(--r) 18%,transparent);outline:none}

/* Fotoğraflar duran hâlde de renkli. Önce gri bırakıp üstüne
   gelince renklendiriyordum; yedi şerit birden gri olunca sektörler
   birbirinden ayrılmıyor ve gelen kişi kendi işini gözüyle
   bulamıyordu. Açılınca yine de belirgin biçimde canlanıyor. */
.sr-foto{position:absolute;inset:0;object-fit:cover;
  filter:grayscale(.12) brightness(.5) saturate(1.05);transform:scale(1.06);
  transition:filter .7s ease,transform 1.1s var(--yay)}
.sr:hover .sr-foto,.sr.acik .sr-foto{filter:grayscale(0) brightness(.72) saturate(1.15);
  transform:scale(1)}
/* Yazının okunması fotoğrafın parlaklığına kalmasın diye alt perde
   biraz daha koyu. */
/* Kartlar kısaldığı için eski perde fotoğrafın yarısını yutuyordu.
   Solid uç kalktı: yazının oturduğu alt bant koyu, üstü açık. */
.sr-perde{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,3,10,.22) 0%,rgba(4,3,10,.55) 52%,rgba(4,3,10,.93) 100%)}
/* imleci takip eden parıltı — ikincil katman, JS --mx/--my veriyor */
.sr::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(18rem 18rem at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--r) 22%,transparent),transparent 68%);
  transition:opacity .45s ease}
.sr:hover::after,.sr.acik::after{opacity:1}

.sr-no{position:absolute;top:.85rem;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--r)}

/* Yazı hep yatay duruyor. Dikey yazı şık ama taranmıyor: gelen kişi
   ilk bakışta kendi işini bulamazsa şeridin havalı olması bir işe
   yaramıyor. Kapalıyken kısa ad görünüyor ("Berber"), şerit açılınca
   tam ad, özet ve tasarım sayısı alttan geliyor. */
.sr-ic{position:absolute;left:0;right:0;bottom:0;padding:1.05rem 1.1rem 1.1rem;
  display:flex;flex-direction:column;gap:.22rem;pointer-events:none}
/* Sektör sayısı arttıkça şerit daralıyor: "Kameraman" gibi tek parça
   uzun adlar kırpılıyordu, bölünecek yeri de yok. Alt sınır düşürüldü. */
.sr-ad{font-size:clamp(.8rem,1.05vw,1.15rem);font-weight:700;letter-spacing:-.015em;
  line-height:1.18;text-shadow:0 2px 14px rgba(0,0,0,.8);hyphens:auto;
  transition:opacity .3s ease,transform .42s var(--yay)}
.sr:hover .sr-ad,.sr.acik .sr-ad{opacity:0;transform:translateY(-6px)}

/* Tam ad kısa adın tam üzerine oturuyor, ikisi yer değiştirirken
   hiçbir şey zıplamıyor. Konumu `top` ile veriyoruz: önce kutunun
   dışına `bottom:calc(100% - ...)` ile koymuştuk ve üst öğenin
   overflow'u onu kırpıyordu, yani şerit açılınca ad hiç görünmüyordu. */
.sr-tam{position:absolute;left:1.1rem;right:1.1rem;top:1.05rem;
  font-size:clamp(.95rem,1.25vw,1.15rem);font-weight:700;letter-spacing:-.015em;
  line-height:1.18;text-shadow:0 2px 14px rgba(0,0,0,.8);
  opacity:0;transform:translateY(8px);
  transition:opacity .42s var(--yay) .06s,transform .42s var(--yay) .06s}

.sr-ozet,.sr-alt{opacity:0;transform:translateY(9px);
  transition:opacity .42s var(--yay) .12s,transform .42s var(--yay) .12s}
.sr:hover .sr-tam,.sr.acik .sr-tam,
.sr:hover .sr-ozet,.sr.acik .sr-ozet,
.sr:hover .sr-alt,.sr.acik .sr-alt{opacity:1;transform:none}

.sr-ozet{font-size:.82rem;line-height:1.45;color:rgba(243,240,250,.75);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sr-alt{display:flex;align-items:center;gap:.6rem;margin-top:.45rem;padding-top:.6rem;
  border-top:1px solid rgba(255,255,255,.14);white-space:nowrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--r)}
.sr-alt i{font-style:normal;transition:transform .35s var(--yay)}
.sr:hover .sr-alt i,.sr.acik .sr-alt i{transform:translateX(5px)}

.sec-not{margin:clamp(1.4rem,3.5vh,2.2rem) auto 0;max-width:36rem;
  font-size:.84rem;color:var(--soluk)}
.sec-not b{color:var(--mor-ac);font-weight:600}

/* ══ 3 · karusel ═════════════════════════════════════════ */
.kar{justify-content:space-between}
.kar-bas{flex:none;display:flex;align-items:center;gap:1rem;max-width:64rem;width:100%;
  margin:0 auto}
.geri{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:20px;
  border:1px solid var(--cizgi);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soluk);
  transition:color .3s,border-color .3s,background .3s}
.geri:hover{color:var(--yazi);border-color:var(--mor);background:rgba(139,92,246,.12)}
.kar-ad{flex:1;text-align:center}
.kar-ad h2{font-size:clamp(1.05rem,2.4vw,1.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.kar-ad p{margin-top:.15rem;font-size:.8rem;color:var(--soluk)}
.kar-adet{flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  color:var(--soluk2);white-space:nowrap;min-width:5.5rem;text-align:right}

.raylar{flex:1;position:relative;width:min(68rem,100%);margin-inline:auto;
  display:flex;align-items:center;justify-content:center;
  min-height:0;perspective:1500px;perspective-origin:50% 46%}
.ray{position:absolute;left:50%;top:50%;width:0;height:var(--kh);
  transform-style:preserve-3d;transition:transform .62s var(--yay)}
.ray[hidden]{display:none}

.kart{position:absolute;left:0;top:0;width:var(--kw);height:100%;margin-left:calc(var(--kw)/-2);
  margin-top:calc(var(--kh)/-2);display:flex;flex-direction:column;overflow:hidden;
  border-radius:13px;border:1px solid var(--cizgi);background:#0a0812;
  box-shadow:0 26px 60px rgba(0,0,0,.6);
  transition:transform .62s var(--yay),opacity .5s var(--yay),
             border-color .4s,box-shadow .5s,filter .5s}
.kart .gorsel{position:relative;flex:1;min-height:0;overflow:hidden}
.kart .gorsel img{opacity:.7;transition:opacity .6s,transform 1s var(--yay)}
.kart .gorsel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,#0a0812)}
.kart.etkin{border-color:color-mix(in srgb,var(--r) 45%,transparent);
  box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 60px color-mix(in srgb,var(--r) 16%,transparent)}
.kart.etkin .gorsel img{opacity:1}
.kart:not(.etkin){filter:saturate(.6) brightness(.85);cursor:pointer}
.kart.etkin:hover .gorsel img{transform:scale(1.04)}

.kart.kilitli .gorsel img{filter:grayscale(.85) brightness(.6)}
.kart.kilitli.etkin .gorsel img{filter:grayscale(.7) brightness(.75)}
.kilit-katman{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  background:rgba(6,5,12,.3)}
.kilit-katman span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.55);border:1px solid rgba(167,139,250,.55);
  box-shadow:0 0 22px rgba(139,92,246,.35)}
.kilit-katman svg{width:20px;height:20px;fill:none;stroke:#c4b5fd;stroke-width:1.8;
  stroke-linecap:round}

.etiket-kart{position:absolute;top:.7rem;left:.7rem;z-index:4;padding:.26rem .65rem;border-radius:20px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(0,0,0,.62);border:1px solid var(--cizgi);color:var(--onay)}
.kart.kilitli .etiket-kart{border-color:rgba(167,139,250,.5);color:#c4b5fd}
.kart .ic{position:relative;flex:none;padding:.9rem 1rem 1rem}
.kart h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--r);font-weight:500}
.palet{display:flex;gap:.3rem;margin-top:.7rem}
.palet i{width:.85rem;height:.85rem;border-radius:50%;border:1px solid rgba(255,255,255,.14)}
.kart .ac{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--cizgi);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--r)}
.kart.kilitli .ac{color:#c4b5fd}
.kart .ac i{font-style:normal;transition:transform .35s var(--yay)}
.kart.etkin:hover .ac i{transform:translateX(5px)}

.ok{position:absolute;top:50%;z-index:60;width:44px;height:44px;margin-top:-22px;
  display:grid;place-items:center;border-radius:50%;border:1px solid var(--cizgi);
  background:rgba(10,8,18,.8);color:var(--soluk);backdrop-filter:blur(6px);
  transition:color .3s,border-color .3s,background .3s,opacity .3s}
.ok:hover{color:var(--yazi);border-color:var(--mor);background:rgba(139,92,246,.2)}
.ok[disabled]{opacity:0;pointer-events:none}
.ok.sol{left:clamp(.2rem,2vw,1.6rem)}
.ok.sag{right:clamp(.2rem,2vw,1.6rem)}
.ok svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}

.kar-alt{flex:none;max-width:40rem;width:100%;margin:0 auto;text-align:center}
.kar-alt .aciklama{min-height:3.4em;font-size:clamp(.84rem,1.5vw,.94rem);color:var(--soluk);
  transition:opacity .3s}
.kar-alt .aciklama.gizli{opacity:0}
.noktalar{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}
.noktalar[hidden]{display:none}
.nk{width:26px;height:3px;border-radius:2px;background:var(--soluk2);
  transition:background .35s,width .4s var(--yay)}
.nk.etkin{background:var(--r);width:44px}

/* ══ alt şerit ═══════════════════════════════════════════ */
.alt{position:fixed;left:0;right:0;bottom:0;z-index:2;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;
  align-items:center;justify-content:center;padding:.7rem 1.2rem;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soluk2);opacity:0;transition:opacity 1s ease .8s}
body.gorundu .alt{opacity:1}
.alt a{transition:color .3s}
.alt a:hover{color:var(--mor-ac)}

/* ══ perde geçişi ════════════════════════════════════════ */
@keyframes perdeGir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes perdeCik{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}
.perde.giriyor{animation:perdeGir .52s var(--yay) both}
.perde.cikiyor{animation:perdeCik .18s var(--hiz) both}

/* Kutular giriş perdesi kalkana kadar bekliyor. Yoksa açılış
   animasyonu oynarken arkada çoktan bitmiş olurlar ve bu ilk
   bakışın en iyi anı boşa gider. Toplam sıra 500ms'i geçmiyor. */
@keyframes seritGir{from{opacity:0;transform:translateY(26px) scaleY(.9)}
  to{opacity:1;transform:none}}
.sr{opacity:0;transform-origin:bottom}
.sec-bas>*{opacity:0}
body.gorundu .sec-bas>*{animation:perdeGir .62s var(--yay) both;
  animation-delay:calc(.18s + var(--i,0)*80ms)}
body.gorundu .sr{animation:seritGir .62s var(--yay) both;
  animation-delay:calc(.42s + var(--i)*70ms)}
.perde.cikiyor .sr{animation:perdeCik .18s var(--hiz) both;animation-delay:calc(var(--i)*26ms)}
.perde.giriyor .sr{animation:seritGir .62s var(--yay) both;animation-delay:calc(var(--i)*70ms)}
.perde.giriyor .sec-bas>*{animation:perdeGir .52s var(--yay) both;animation-delay:0ms}

/* ══ destek · hızlı yanıt ════════════════════════════════ */
.destek{position:fixed;right:clamp(1rem,3vw,1.8rem);bottom:clamp(1rem,3vw,1.8rem);z-index:200;
  display:flex;flex-direction:column;align-items:flex-end;gap:.7rem;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .6s var(--yay),transform .6s var(--yay)}
.destek.hazir{opacity:1;transform:none;pointer-events:auto}

.destek-dugme{position:relative;width:54px;height:54px;border-radius:50%;flex:none;
  display:grid;place-items:center;align-self:flex-end;
  background:linear-gradient(160deg,#6d3bd6,#3a1a8c);border:1px solid var(--mor-ac);
  box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 26px rgba(139,92,246,.32);
  transition:transform .32s var(--yay),box-shadow .32s ease}
.destek-dugme:hover{transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 36px rgba(0,0,0,.6),0 0 40px rgba(139,92,246,.5)}
.destek-dugme:active{transform:scale(.96)}
.destek-dugme svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;grid-area:1/1;
  transition:opacity .26s ease,transform .32s var(--yay)}
.dk-kapat{opacity:0;transform:rotate(-45deg) scale(.7)}
.destek.acik .dk-sohbet{opacity:0;transform:rotate(45deg) scale(.7)}
.destek.acik .dk-kapat{opacity:1;transform:none}

/* tek seferlik dikkat halkası — ısrar etmiyor */
.destek-dugme::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--mor-ac);opacity:0;pointer-events:none}
.destek.cagri .destek-dugme::after{animation:cagriHalka 1.9s var(--yay) 2}
@keyframes cagriHalka{
  0%{opacity:.65;transform:scale(1)} 70%{opacity:0;transform:scale(1.5)}
  100%{opacity:0;transform:scale(1.5)}
}

.destek-panel{width:min(21.5rem,calc(100vw - 2rem));max-height:min(30rem,72svh);
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:15px;border:1px solid var(--cizgi);background:#08060f;
  box-shadow:0 26px 70px rgba(0,0,0,.72);
  transform-origin:bottom right;
  opacity:0;transform:translateY(14px) scale(.94);
  transition:opacity .18s var(--hiz),transform .18s var(--hiz)}
.destek.acik .destek-panel{opacity:1;transform:none;
  transition:opacity .42s var(--yay),transform .42s var(--yay)}
.destek-panel[hidden]{display:none}

.dp-bas{flex:none;display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;
  border-bottom:1px solid var(--cizgi);background:rgba(139,92,246,.07)}
.dp-bas b{display:block;font-size:.92rem;font-weight:600;line-height:1.2}
.dp-bas small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soluk2);margin-top:2px}
.dp-nokta{width:8px;height:8px;border-radius:50%;background:var(--onay);flex:none;
  box-shadow:0 0 0 0 rgba(79,201,160,.5);animation:noktaNabiz 2.6s ease-out infinite}
@keyframes noktaNabiz{
  0%{box-shadow:0 0 0 0 rgba(79,201,160,.45)}
  70%{box-shadow:0 0 0 7px rgba(79,201,160,0)}
  100%{box-shadow:0 0 0 0 rgba(79,201,160,0)}
}

.dp-akis{flex:1;min-height:11rem;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;
  gap:.6rem;scrollbar-width:thin;scrollbar-color:var(--cizgi) transparent}
.dp-balon{max-width:88%;padding:.62rem .85rem;border-radius:13px;font-size:.87rem;line-height:1.55;
  animation:balonGel .42s var(--yay) both}
@keyframes balonGel{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}
.dp-onlar{align-self:flex-start;border-bottom-left-radius:4px;
  background:rgba(255,255,255,.05);border:1px solid var(--cizgi);color:var(--yazi)}
.dp-ben{align-self:flex-end;border-bottom-right-radius:4px;
  background:rgba(139,92,246,.2);border:1px solid rgba(139,92,246,.4);color:var(--yazi)}
.dp-yaziyor{display:flex;gap:4px;align-items:center;padding:.75rem .85rem}
.dp-yaziyor i{width:5px;height:5px;border-radius:50%;background:var(--soluk);
  animation:yaziyorZipla 1.15s ease-in-out infinite}
.dp-yaziyor i:nth-child(2){animation-delay:.16s}
.dp-yaziyor i:nth-child(3){animation-delay:.32s}
@keyframes yaziyorZipla{
  0%,60%,100%{transform:translateY(0);opacity:.45} 30%{transform:translateY(-4px);opacity:1}
}

/* akışın içinde, en altta; sohbetle birlikte kayıyor */
.dp-secenek{flex:none;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.25rem}
.dp-secenek:empty{display:none}
.dp-secim{padding:.48rem .8rem;border-radius:18px;font-size:.8rem;
  border:1px solid rgba(139,92,246,.32);background:rgba(139,92,246,.07);color:var(--mor-ac);
  animation:balonGel .42s var(--yay) both;animation-delay:calc(var(--i)*70ms);
  transition:border-color .25s,background .25s,color .25s,transform .3s var(--yay)}
.dp-secim:hover{border-color:var(--mor-ac);background:rgba(139,92,246,.18);color:var(--yazi);
  transform:translateY(-2px)}

.dp-alt{flex:none;display:flex;gap:.45rem;padding:.75rem 1rem .85rem;
  border-top:1px solid var(--cizgi)}
.dp-alt a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.6rem .5rem;border-radius:9px;font-size:.8rem;font-weight:600;
  transition:filter .25s,transform .3s var(--yay),background .25s,border-color .25s}
.dp-alt a:hover{transform:translateY(-2px)}
.dp-alt svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.dp-ig{color:#fff;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.dp-ig:hover{filter:brightness(1.1)}
.dp-posta{color:var(--soluk);border:1px solid var(--cizgi);background:rgba(255,255,255,.03)}
.dp-posta:hover{color:var(--yazi);border-color:var(--mor);background:rgba(139,92,246,.12)}

@media (max-width:640px){
  .destek{left:.9rem;right:.9rem;bottom:.9rem}
  .destek-panel{width:100%}
  .destek-dugme{width:48px;height:48px}
  .destek-dugme svg{width:21px;height:21px}
  /* Destek düğmesi sağ altta duruyor. Yazıyı iki yandan daraltarak
     yer açmak yanlıştı: metin dar bir sütuna sıkışıp çirkin kırılıyor,
     ortalanmış görünmüyordu. Onun yerine alt şeridi yukarı alıyoruz,
     düğme kendi boş şeridinde kalıyor ve yazı tam genişlikte
     ortalanıyor. */
  .alt{padding:.7rem 1rem 3.8rem}
}

@media (max-width:900px){
  :root{--kw:clamp(180px,42vw,240px)}
  .sr-ozet{display:none}
}

/* ── mobil ─────────────────────────────────────────────────
   Bağlantılar mesajla gidiyor, çoğu kişi telefondan açacak.

   Önceden şeritler yatay satırlara dönüyor ve kalan yüksekliği
   bölüşüyordu: on sektörde satır başına ~85px kalıyor, fotoğraf
   ezik bir şeride, yazı da onun üstüne biniyordu. Artık iki
   sütunlu kare kart ızgarası — fotoğraf nefes alıyor, ad ve
   tasarım sayısı fotoğrafın altındaki koyu bantta duruyor.
   Sayfa kayıyor; on kart tek ekrana zorla sığdırılmıyor.       */
@media (max-width:640px){
  /* Ortalanmış bir flex kabında taşan içeriğin ÜSTÜ erişilemez oluyor:
     ilk sıra başlığın altında kalıp bir daha yukarı kaydırılamıyordu.
     Ortalamayı auto kenarlarla yapıyoruz, kaydırma çalışıyor. */
  .sec{justify-content:flex-start;overflow-y:auto}
  .sec-bas{margin-top:auto}
  .sec-not{margin-bottom:auto}
  /* Satır kapları telefonda ızgaraya karışmasın: display:contents ile
     saydamlaşıyorlar, kartlar doğrudan ızgaranın çocuğu oluyor. */
  .seritler{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
    flex:none;align-content:start}
  .sr-satir{display:contents}
  .sr{flex:none;border-radius:12px;aspect-ratio:1/1}
  .sr:hover,.sr.acik{flex-grow:0}
  /* dokunmatikte :hover yok, kartlar hep renkli duruyor */
  .sr-foto{filter:grayscale(.05) brightness(.62) saturate(1.05);transform:none}
  .sr-perde{background:linear-gradient(180deg,rgba(4,3,10,.15) 30%,rgba(4,3,10,.9))}
  .sr-no{top:.6rem;left:.7rem;right:auto;transform:none;text-align:left;font-size:9.5px}
  .sr-dik{display:none}
  .sr-ic{opacity:1;transform:none;top:auto;bottom:0;padding:.7rem .75rem .75rem;
    justify-content:flex-end;gap:.2rem}
  /* kare kartta yer dar: kısa ad daha iyi taranıyor */
  .sr-ad{display:block;font-size:.92rem;line-height:1.2}
  .sr-tam{display:none}
  .sr-ozet{display:none}
  .sr-alt{opacity:1;transform:none;margin-top:.1rem;padding-top:0;border:0;font-size:8.5px}
  .sr-alt i{margin-left:auto}

  .ustbag a span{display:none}
  .ustbag a{padding:.5rem .7rem}
  .kar{gap:1.4rem}
  .kar-bas{flex-wrap:wrap;gap:.8rem}
  .geri{order:1}
  .kar-ad{order:2;flex:1 0 100%;text-align:left}
  .raylar{min-height:0}
  .kar-adet{display:none}
  .kar-alt .aciklama{min-height:0;font-size:.8rem;line-height:1.45}
  /* alt şerit yukarı alındığı için perdenin alt boşluğu da büyüyor */
  .perde{padding:5rem 1rem 6.4rem}
  /* Oklar dar ekranda yan kartın kilit rozetiyle üst üste biniyor.
     Parmakla kaydırma zaten doğal yol, noktalar da kaç tane olduğunu
     söylüyor; okları kaldırıyoruz. */
  .ok{display:none!important}
  /* Kart yüksekliği ekrana bağlı: telefonda da kaydırma olmasın. */
  :root{--kw:min(70vw,280px);--kh:clamp(215px,42svh,340px)}
  /* Alt şerit sabit duruyor ve sağ altta destek balonu var: son sıra
     kartların altına ikisinin de sığacağı bir boşluk bırakıyoruz. */
  .sec{padding-bottom:7.5rem}
  .alt{background:linear-gradient(180deg,transparent,var(--bg) 55%);padding-top:1.6rem}
}
/* Kısa ekran. Önceden burada .sec-not gizleniyordu; sonuç: 1366x768
   bir dizüstüde %100 yakınlıkta kod isteme cümlesi hiç görünmüyor,
   ancak sayfa küçültülünce çıkıyordu. O cümle konuşmayı başlatan
   şey, gizlenmez. Yer başlıktan ve boşluklardan kısılıyor. */
@media (max-height:620px){
  :root{--kh:clamp(210px,58svh,300px)}
  .etiket{display:none}
  h1{margin-top:0;font-size:clamp(1.5rem,3.4vw,2.2rem)}
  .sec-bas{margin-bottom:1rem}
  .sec-bas p{margin-top:.5rem}
  .sec-not{margin-top:.9rem;font-size:.78rem}
  .perde{padding-top:4.2rem}
}
/* ── telefon yatay ─────────────────────────────────────────
   Yatay tutulan telefon 844x390 gibi geliyor: genişlik 640px'i
   aştığı için mobil kuralları devreye girmiyor, masaüstü şerit
   düzeni 390px'lik bir yüksekliğe sıkışıyordu. Şeritlere 97px
   kalıyor, içindeki yazı bloğu 100px; yazı sığmıyordu.

   Burada her şey inceltiliyor: sektör özeti ve karusel açıklaması
   düşüyor, başlıklar ve boşluklar küçülüyor. Telefonu dik tutan
   kimse bunlardan etkilenmiyor.                                */
@media (max-height:480px){
  .ust{padding-top:.55rem;padding-bottom:.55rem}
  .perde{padding-top:3.6rem;padding-bottom:2.6rem}
  .sec-bas{margin-bottom:.6rem}
  h1{font-size:clamp(1.2rem,2.8vw,1.7rem);margin-top:0}
  .sec-not{margin-top:.6rem;font-size:.72rem}

  .sr-ic{padding:.6rem .75rem .7rem;gap:.1rem}
  .sr-ad,.sr-tam{font-size:.88rem}
  .sr-tam{top:.6rem;left:.75rem;right:.75rem}
  .sr-ozet{display:none}
  .sr-alt{margin-top:.3rem;padding-top:.35rem;font-size:9px}
  .sr-no{top:.5rem;font-size:9.5px}

  .kar-ad p{display:none}
  .kar-alt .aciklama{display:none}
  .noktalar{margin-top:.4rem}
  .geri{padding:.45rem .8rem}
}

/* Telefonda açılış kısa. giris.js beklemeleri zaten hızlandırıyor;
   perdenin dağılması ve sahnenin yükselmesi de aynı tempoya çekiliyor,
   yoksa hızlanan sekansın sonunda uzun bir geçiş bekleniyor. */
@media (max-width:640px),(max-height:480px){
  #giris{transition:opacity .34s var(--hiz),visibility .34s,
    transform .46s var(--yay),filter .34s ease}
  .sahne{transition:opacity .5s var(--yay) .06s,transform .5s var(--yay) .06s}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-delay:0ms!important;
    transition-duration:.01ms!important}
  .isik{transition:none}
}