/* ═══════════════════════════════════════════════════════════════
   VİZYONA — VİTRİN STİLİ
   Yeniden yazıldı: 14 Eylül 2026.
   Kullanıcı: "Websitesinin tasarımını beğenmiyorum... uygulama
   tasarımından ayrılmadan güzel bir hale getir. Tüm site tasarımı."

   İLKE: jetonlar UYGULAMADAN gelir (ui/ortak/Tasarim.kt). Site ile
   uygulama aynı ürün gibi görünmeli; renk uydurmak ikisini ayırır.
   Önceki stilde palet zaten doğruydu — eksik olan DÜZEN ve İŞÇİLİKTİ:
   tek sütun akış, zayıf hiyerarşi, yüzeysiz kartlar, dar nefes.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* — uygulamadan birebir (Renk objesi) — */
  --zemin:#0A0C10;
  --panel:#11151E;
  --panel-2:#161A24;
  --mor:#7C5CFF;
  --mor-acik:#A88BFF;
  --metin:#E9ECF2;
  --solgun:#9AA2B6;
  --orta:#B9C0D2;
  --altin:#F0C674;
  --uyari:#E8B24C;
  --uyari-zemin:#2A2113;
  --ayrac:rgba(255,255,255,.09);
  --ayrac-2:rgba(255,255,255,.16);

  --r-s:10px; --r-m:16px; --r-l:24px;
  --en:1120px;
  --nefes:clamp(20px,5vw,40px);
  /* Mor ışıma: uygulamadaki odak vurgusunun web karşılığı */
  --isik:0 0 0 1px rgba(124,92,255,.28), 0 18px 50px -18px rgba(124,92,255,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--zemin); color:var(--metin);
  font:400 16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* Zemin dokusu: uygulamada poster ışığının yarattığı derinliğin
     sakin bir karşılığı. Düz siyah web'de ucuz duruyor. */
  background-image:
    radial-gradient(900px 500px at 78% -8%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(700px 420px at 8% 4%, rgba(168,139,255,.09), transparent 62%);
  background-attachment:fixed;
}
img{max-width:100%; display:block}
a{color:var(--mor-acik); text-decoration:none}
a:hover{color:#C4B2FF}
:focus-visible{outline:2px solid var(--mor-acik); outline-offset:3px; border-radius:6px}

/* ── ÜST BAR ── */
.ust{
  position:sticky; top:0; z-index:50;
  background:rgba(10,12,16,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ayrac);
}
.ust-ic{
  max-width:var(--en); margin:0 auto; padding:14px var(--nefes);
  display:flex; align-items:center; gap:18px;
}
.marka{
  display:flex; align-items:center; gap:10px;
  color:var(--metin); font-weight:800; font-size:19px; letter-spacing:-.02em;
}
.marka-kutu{
  width:34px; height:34px; border-radius:9px; overflow:hidden;
  display:grid; place-items:center; background:var(--panel);
  border:1px solid var(--ayrac-2);
}
.marka-kutu img{width:100%; height:100%; object-fit:cover}
.ana-nav{margin-left:auto; display:flex; gap:6px}
.ana-nav a{
  padding:8px 14px; border-radius:999px; color:var(--orta);
  font-size:14.5px; font-weight:500; transition:background .15s,color .15s;
}
.ana-nav a:hover{background:rgba(255,255,255,.06); color:var(--metin)}
.ana-nav a[aria-current="page"]{background:rgba(124,92,255,.16); color:var(--mor-acik)}
.mobil-menu{display:none; margin-left:auto; position:relative}
.mobil-menu>summary{
  list-style:none; cursor:pointer; padding:8px 14px; border-radius:999px;
  background:var(--panel); border:1px solid var(--ayrac-2);
  color:var(--metin); font-size:14.5px;
}
.mobil-menu>summary::-webkit-details-marker{display:none}
.mobil-menu nav{
  position:absolute; right:0; top:calc(100% + 8px); min-width:190px;
  background:var(--panel-2); border:1px solid var(--ayrac-2);
  border-radius:var(--r-m); padding:6px; display:grid; gap:2px;
  box-shadow:0 24px 60px -20px #000;
}
.mobil-menu nav a{padding:11px 14px; border-radius:var(--r-s); color:var(--orta)}
.mobil-menu nav a:hover{background:rgba(255,255,255,.06); color:var(--metin)}

/* ── GÖVDE ── */
.kapsam{max-width:var(--en); margin:0 auto; padding:0 var(--nefes) 72px}

/* ── GİRİŞ (hero) ── */
.giris{padding:clamp(44px,7vw,84px) 0 clamp(24px,4vw,40px); text-align:center}
.rozet{
  display:inline-block; margin:0 0 22px;
  padding:7px 16px; border-radius:999px;
  background:rgba(124,92,255,.14); border:1px solid rgba(124,92,255,.34);
  color:var(--mor-acik); font-size:13px; font-weight:600; letter-spacing:.02em;
}
.giris h1{
  margin:0 0 18px; font-size:clamp(36px,6.4vw,62px); line-height:1.06;
  font-weight:800; letter-spacing:-.035em;
}
.h1-alt{
  display:block; margin-top:8px;
  background:linear-gradient(100deg,var(--mor-acik),#C9B6FF 45%,var(--mor));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ozet{
  max-width:620px; margin:0 auto 32px; color:var(--orta);
  font-size:clamp(16px,1.7vw,18.5px); line-height:1.7;
}
.dugme-sira{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
/* DAR EKRANDA SARMA: metin iki satıra düşünce sürüm çipi yanda, iki satırın
   ortasında asılı kalıyordu (390px'te ölçüldü). Metin kendi elemanında
   olduğu için artık çip alt satıra düşüp ortalanıyor. */
.dugme{
  display:inline-flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:10px;
  padding:14px 26px; border-radius:999px;
  background:linear-gradient(180deg,var(--mor),#6A49F0);
  color:#fff; font-weight:650; font-size:15.5px;
  box-shadow:var(--isik); transition:transform .15s, box-shadow .15s, filter .15s;
}
.dugme:hover{transform:translateY(-2px); filter:brightness(1.07); color:#fff}
.dugme:active{transform:translateY(0)}
.dugme.ikincil{
  background:var(--panel); color:var(--metin);
  border:1px solid var(--ayrac-2); box-shadow:none;
}
.dugme.ikincil:hover{background:var(--panel-2); border-color:var(--mor)}
.dugme-metin{text-align:center}
.surum-cip{
  padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:700;
  background:rgba(255,255,255,.17);
}

/* ── VİTRİN: TEK BÜYÜK TV GÖRÜNTÜSÜ ──
   Eskiden iki 640x360 kare yan yana sıkıştırılıyordu; detay ekranı 250px'e
   inince okunmuyordu (kullanıcı bildirdi). TV görüntüsü TV oranında durur.
   Çerçeve uygulamanın kart dilini taşır: yumuşak köşe, ince kenar, mor sızıntı. */
.vitrin{margin:clamp(30px,4.5vw,52px) auto 0; max-width:940px}
.vitrin-cerceve{
  position:relative; border-radius:var(--r-l); overflow:hidden;
  border:1px solid var(--ayrac-2);
  box-shadow:0 50px 110px -40px #000, 0 0 0 1px rgba(124,92,255,.14),
             0 0 90px -30px rgba(124,92,255,.35);
}
.vitrin-cerceve img{display:block; width:100%; height:auto}
/* Üstten aşağı hafif karartma: alttaki metne geçiş yumuşasın. */
.vitrin-cerceve::after{
  content:""; position:absolute; inset:auto 0 0 0; height:22%;
  background:linear-gradient(180deg,transparent,rgba(10,12,16,.55));
  pointer-events:none;
}

/* ── RAF: UYGULAMADAKİ AFİŞ RAFININ AYNISI ──
   Yatay kayar, kart üzerine gelince MOR ODAK HALKASI belirir — TV'de
   kumandayla gezerken görülen davranışın birebir karşılığı.
   Amaç: kullanıcı siteyi gezerken uygulamanın diline alışsın. */
.raf{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(420px,78vw);
  gap:18px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; padding:4px 4px 16px;
  scrollbar-width:thin; scrollbar-color:var(--ayrac-2) transparent;
}
.raf-kart{
  margin:0; scroll-snap-align:start;
  border-radius:var(--r-m); background:var(--panel);
  border:1px solid var(--ayrac); overflow:hidden;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.raf-kart img{display:block; width:100%; height:auto}
.raf-kart:hover,
.raf-kart:focus-within{
  border-color:var(--mor-acik);
  transform:translateY(-3px);
  box-shadow:0 0 0 2px rgba(168,139,255,.35), 0 28px 60px -30px #000;
}
.raf-kart figcaption{
  display:flex; flex-direction:column; gap:3px;
  padding:13px 16px 15px; font-size:13.5px;
}
.raf-kart figcaption strong{color:var(--metin); font-weight:650; font-size:14.5px}
.raf-kart figcaption span{color:var(--solgun)}

/* ── GÖSTERİ (tek görsel + sağ/sol + noktalar) ── */
.gosteri{position:relative; max-width:960px; margin:0 auto}
.gosteri-sahne{border-radius:var(--r-m); overflow:hidden; background:var(--panel); border:1px solid var(--ayrac)}
.gosteri-kart{display:none; margin:0}
.gosteri-kart.aktif{display:block; animation:gosteriGir .45s ease}
.gosteri-kart img{display:block; width:100%; height:auto}
.gosteri-kart figcaption{display:flex; flex-direction:column; gap:3px; padding:14px 18px 16px; font-size:14px}
.gosteri-kart figcaption strong{color:var(--metin); font-weight:650; font-size:15.5px}
.gosteri-kart figcaption span{color:var(--solgun)}
.gosteri-ok{position:absolute; top:40%; width:52px; height:52px; margin-top:-26px; border-radius:50%;
  border:2px solid rgba(255,255,255,.18); background:rgba(10,12,16,.72); color:#fff; font-size:34px; line-height:44px;
  cursor:pointer; z-index:2; transition:border-color .15s, background .15s}
.gosteri-ok.sol{left:-18px} .gosteri-ok.sag{right:-18px}
.gosteri-ok:hover,.gosteri-ok:focus{border-color:var(--mor-acik); background:rgba(109,79,224,.85); outline:none}
.gosteri-noktalar{text-align:center; margin-top:12px}
.gosteri-noktalar .nokta{width:10px; height:10px; margin:0 5px; border-radius:50%; border:0; padding:0;
  background:var(--ayrac-2); cursor:pointer}
.gosteri-noktalar .nokta.aktif{background:var(--mor-acik); width:26px; border-radius:6px}
.gosteri-noktalar .nokta:focus{outline:2px solid var(--mor-acik); outline-offset:2px}
@keyframes gosteriGir{from{opacity:.35}to{opacity:1}}
@media (max-width:760px){ .gosteri-ok.sol{left:6px} .gosteri-ok.sag{right:6px} }

/* ── BÖLÜMLER ── */
/* Dikey ritim sıkılaştırıldı: bölümler arası boşluk sayfayı gereksiz
   uzatıyor ve "toplanmamış" gösteriyordu (1280 ve 390px'te ölçüldü). */
.bolum{padding:clamp(40px,6vw,64px) 0; border-top:1px solid var(--ayrac)}
/* ═══ .bolum-baslik BİR SARMALAYICI, BAŞLIĞIN KENDİSİ DEĞİL ═══
   Kurallar doğrudan sınıfa yazılmıştı; ama markup şöyle:
       <div class="bolum-baslik"><h2>…</h2><p class="bolum-ozet">…</p></div>
   h2 HİÇ kural almıyordu: tarayıcının varsayılan h2 kenar boşlukları
   (0.67em alt+üst) devreye giriyor, başlıkla özet arasında ~80px ölü
   boşluk oluşuyordu. Ayrıca font-weight:750 sarmalayıcıdan MİRAS kalınca
   özet metni de kalın çıkıyordu — hiyerarşi kayboluyordu. */
.bolum-baslik{margin:0 0 26px}
.bolum-baslik h2{
  margin:0 0 10px; font-size:clamp(25px,3.6vw,34px);
  font-weight:750; letter-spacing:-.025em; line-height:1.15;
}
.bolum-ozet{
  margin:0; color:var(--orta); max-width:660px;
  font-size:16.5px; font-weight:400; line-height:1.6;
}

/* ── ÖZELLİK KARTLARI ── */
.ozellikler{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.ozellik{
  padding:26px; border-radius:var(--r-m);
  background:linear-gradient(180deg,var(--panel),rgba(17,21,30,.55));
  border:1px solid var(--ayrac);
  transition:border-color .18s, transform .18s, background .18s;
}
.ozellik:hover{border-color:rgba(124,92,255,.42); transform:translateY(-3px)}
.ozellik h3{margin:0 0 9px; font-size:17.5px; font-weight:670; letter-spacing:-.01em}
.ozellik p{margin:0; color:var(--solgun); font-size:14.8px; line-height:1.62}

/* ── GÜVEN ŞERİDİ ── */
.guven-seridi{
  margin-top:clamp(28px,4vw,44px); padding:22px;
  border-radius:var(--r-m); background:var(--panel); border:1px solid var(--ayrac);
}
.guven-hucreler{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
/* ÖLÜ SEÇİCİ DÜZELTMESİ: burada ".guven-hucre h4" ve ".guven-hucre p"
   yazıyordu ama markup <span class="guven-hucre">Metin</span>; içeride h4/p
   YOKTU. Yani hücreler HİÇBİR stil almıyordu — şerit ekranda düz, biçimsiz
   metin olarak görünüyordu (TV tarayıcısında ölçüldü). Sınıfın kendisi
   stillenir. */
.guven-hucre{
  display:flex; align-items:center; gap:10px;
  padding:13px 16px; border-radius:var(--r-s);
  background:var(--panel-2); border:1px solid var(--ayrac);
  color:var(--metin); font-size:14.5px; font-weight:600; line-height:1.35;
}
.guven-hucre::before{
  content:"✓"; flex:0 0 auto;
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(124,92,255,.16); color:var(--mor-acik);
  font-size:12px; font-weight:700;
}

/* ── MOTTO ── */
.motto-bandi{
  margin:clamp(40px,6vw,64px) 0 0; padding:clamp(30px,5vw,46px);
  border-radius:var(--r-l); text-align:center;
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(124,92,255,.20), transparent 68%),
    var(--panel);
  border:1px solid rgba(124,92,255,.24);
}
.motto-bandi p{margin:0; font-size:clamp(18px,2.4vw,23px); font-weight:600; letter-spacing:-.015em}

/* ── SSS ── */
.sorular{display:grid; gap:10px}
.sorular details{
  border-radius:var(--r-m); background:var(--panel);
  border:1px solid var(--ayrac); overflow:hidden;
  transition:border-color .18s;
}
.sorular details[open]{border-color:rgba(124,92,255,.40)}
.sorular summary{
  list-style:none; cursor:pointer; padding:18px 22px;
  font-weight:620; font-size:16px; display:flex; align-items:center; gap:12px;
}
.sorular summary::-webkit-details-marker{display:none}
.sorular summary::before{
  content:"+"; flex:0 0 auto; width:22px; height:22px; border-radius:7px;
  display:grid; place-items:center; font-size:15px; line-height:1;
  background:rgba(124,92,255,.16); color:var(--mor-acik);
  transition:transform .2s;
}
.sorular details[open] summary::before{content:"–"; transform:rotate(180deg)}
.sorular details>*:not(summary){padding:0 22px 20px; color:var(--orta); margin:0}
.sorular details p+p{margin-top:12px}
.sss-tumu{margin-top:22px; color:var(--solgun); font-size:14.5px}

/* ── YASAL / METİN SAYFALARI ── */
.sayfa{padding:clamp(44px,7vw,76px) 0 0; max-width:780px}
.sayfa h1{
  margin:0 0 10px; font-size:clamp(30px,4.6vw,42px);
  font-weight:780; letter-spacing:-.03em;
}
.tarih{margin:0 0 34px; color:var(--solgun); font-size:14px}
.sayfa h2{
  margin:40px 0 12px; font-size:20.5px; font-weight:680; letter-spacing:-.015em;
  padding-left:14px; border-left:3px solid var(--mor); line-height:1.3;
}
.sayfa p, .sayfa li{color:var(--orta); font-size:16px; line-height:1.78}
.sayfa ul, .sayfa ol{padding-left:22px}
.sayfa li{margin:7px 0}
.sayfa strong{color:var(--metin); font-weight:650}
.onemli{
  margin:26px 0; padding:18px 20px; border-radius:var(--r-m);
  background:var(--uyari-zemin); border:1px solid rgba(232,178,76,.28);
  color:var(--uyari);
}
.onemli p{color:inherit; margin:0}
.onemli p+p{margin-top:10px}
.yasal-bandi{
  margin:0 0 30px; padding:18px 20px; border-radius:var(--r-m);
  background:var(--panel); border:1px solid var(--ayrac);
}
.yasal-ozet{margin:0; color:var(--orta); font-size:15.5px}
.yasal-alt{margin-top:44px; padding-top:22px; border-top:1px solid var(--ayrac); color:var(--solgun); font-size:14.5px}
.iletisim-pilleri{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 0; padding:0; list-style:none}
.pil-ad{color:var(--solgun); font-size:13px; display:block}
.pil-deger{color:var(--metin); font-weight:600; font-size:15px}
/* ÖLÜ SEÇİCİ DÜZELTMESİ: markup <a> kullanıyor, <li> değil. Piller
   arka planı/kenarlığı/iç boşluğu ALMIYORDU — çıplak bağlantı gibi
   görünüyorlardı. Seçici gerçek etikete taşındı. */
.iletisim-pilleri a{
  display:block; text-decoration:none;
  padding:12px 18px; border-radius:var(--r-s);
  background:var(--panel); border:1px solid var(--ayrac);
  transition:border-color .18s, background .18s;
}
.iletisim-pilleri a:hover,
.iletisim-pilleri a:focus-visible{
  border-color:rgba(124,92,255,.45); background:var(--panel-2);
}

/* ── SÜRÜM NOTU ── */
.surum-notu{
  margin:26px 0 0; color:var(--solgun); font-size:14.5px;
}
.surum-notu strong{color:var(--mor-acik)}

/* ── ALT BİLGİ ── */
.alt{margin-top:64px; border-top:1px solid var(--ayrac); background:rgba(0,0,0,.32)}
.alt-ic{max-width:var(--en); margin:0 auto; padding:40px var(--nefes) 20px}
.alt-ust{display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start}
.alt-marka{display:flex; align-items:center; gap:10px; font-weight:750; color:var(--metin)}
.alt nav{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap}
.alt nav a{color:var(--solgun); font-size:14.5px}
.alt nav a:hover{color:var(--metin)}
.alt-dip{
  max-width:var(--en); margin:0 auto; padding:18px var(--nefes) 34px;
  border-top:1px solid var(--ayrac); color:var(--solgun); font-size:13.5px;
}
.surum-satiri{color:var(--solgun); font-weight:400; margin-left:8px; font-size:13.5px}
.ad{font-weight:750}

/* ── DAR EKRAN ── */
@media (max-width:760px){
  .ana-nav{display:none}
  .mobil-menu{display:block}
  /* Dar ekranda raf tek kart genişliğinde kayar; kart neredeyse tam en. */
  .raf{grid-auto-columns:86vw; gap:14px}
  .alt nav{margin-left:0; gap:16px}
}

/* Hareket azaltma tercihi: geçişler kapanır. */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  .dugme:hover,.ozellik:hover{transform:none}
}

/* ── DOWNLOADER KODU (3 Eki 2026) ──
   Ana indirme düğmesinin ALTINA, ona değerek; daha küçük, ortalanmış.
   Turuncu sitenin altın/uyarı tonlarından türetildi — cırtlak değil, koyu
   zeminde yumuşak. Ana düğmeyle kaynaşsın diye üst kenarı düz, alt kenarı yuvarlak. */
.indir-grup{display:flex; flex-direction:column; align-items:center}
/* SSS düğmesi grubun toplam yüksekliğine uzuyordu ("tombul", 4 Eki 2026): yalnız ana düğme hizasında durur. */
.dugme-sira{align-items:flex-start}
.indir-grup .dugme{position:relative; z-index:1}
.downloader{
  margin-top:-4px; padding:9px 18px 8px; border:0; cursor:pointer;
  border-radius:0 0 14px 14px; min-width:62%;
  background:linear-gradient(180deg,#C9773A,#B5652C);
  color:#FFF4EA; font:inherit; font-size:13.5px; font-weight:600; letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(201,119,58,.22);
  transition:filter .15s;
}
.downloader b{font-weight:800; letter-spacing:1.5px; margin-left:4px}
.downloader:hover{filter:brightness(1.08)}
.downloader:focus-visible{outline:2px solid var(--altin); outline-offset:2px}

/* ── SOSYAL (X / Telegram) ── */
.sosyal{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin:22px 0 14px}
.sosyal a{display:inline-flex; align-items:center; gap:8px; color:var(--solgun); font-size:14.5px}
.sosyal a:hover{color:var(--metin)}
.sosyal svg{width:18px; height:18px; fill:currentColor}

/* ── ÜST ÇUBUKTA X / TELEGRAM (3 Eki 2026) ── menünün soluna, tek tıkla hesaba. */
.ust-sosyal{margin-left:auto; display:flex; gap:4px; align-items:center}
.ust-sosyal a{display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center;
  border-radius:999px; color:var(--solgun)}
.ust-sosyal a:hover{background:rgba(255,255,255,.06); color:var(--metin)}
.ust-sosyal svg{width:18px; height:18px; fill:currentColor}
.ust-sosyal ~ .ana-nav, .ust-sosyal ~ .mobil-menu{margin-left:8px}