@import url("../fonts/fonts.css");

/* ==========================================================================
   Moonvia Labs — Design System
   Referans: Web-site/web-site.png
   1 Tokens · 2 Base · 3 Atmosphere · 4 Glass · 5 Buttons · 6 Header
   7 Hero · 8 Cards · 9 Sections · 10 Footer · 11 Motion · 12 RWD
   ========================================================================== */

/* ------------------------------------------------------------- 1. TOKENS */
:root {
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* marka renkleri — referanstan örneklendi */
  --brand: #00a2ff;
  --blue-300: #7cc0ff;
  --blue-400: #4da3ff;
  --blue-500: #2e7bf6;
  --blue-600: #1a56e8;
  --violet-400: #a56bff;
  --violet-500: #7b4dff;
  --teal-400: #3fe0d0;
  --teal-500: #17bfb8;
  --pink-400: #e86be0;
  --pink-500: #c93fd6;

  --shell: 1360px;
  --gutter: clamp(20px, 3.6vw, 52px);
  --head-h: 84px;
  /* header'ın üstte bıraktığı boşluk; sabit header'ın altına giren ilk
     bölümün payı buradan hesaplanır (bkz. `.page > .sec:first-child`). */
  --head-top: 18px;

  /* ---- DİKEY RİTİM ----
     Bölüm boşlukları TEK yerden gelir. Önceden her bölüm kendi
     `clamp()`ini taşıyor, kimi yerde de HTML'de `style="padding-top:0"`
     ile eziliyordu; iki sayfa arasında ritim tutmuyordu.
       --sp-sec    bölümler arası standart boşluk
       --sp-tight  yakın duran (aynı konuyu süren) bölümler
       --sp-head   bölüm başlığı ile içeriği arası
       --sp-block  bir bölümün içindeki bloklar arası */
  --sp-sec: clamp(56px, 7vw, 104px);
  --sp-tight: clamp(34px, 4.2vw, 60px);
  --sp-head: clamp(24px, 3vw, 44px);
  --sp-block: clamp(20px, 2.6vw, 36px);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-2xl: 44px;
  --pill: 999px;

  --ease: cubic-bezier(0.22, 0.75, 0.28, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Erişilebilirlik tabanları — bütün kırılımlarda geçerlidir.
     · --fs-min  arayüzde kullanılan EN KÜÇÜK punto (12 px). Rozet alt yazısı,
                 sütun başlığı, görsel numarası gibi ikincil metinler dahil
                 hiçbir şey bunun altına inmez.
     · --tap     en küçük dokunma hedefi (WCAG 2.2 §2.5.8 AA = 24×24 CSS px).
                 Satır yüksekliği yetmediğinde dikey dolguyla tamamlanır. */
  --fs-min: 0.75rem;   /* 12px */
  --tap: 24px;
}

/* ---- DARK (referans tema) ---- */
:root,
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #01040c;
  --bg-soft: #050b1c;

  --tx-1: #ffffff;
  --tx-2: #a9b8d4;
  /* #74839e idi. Düz zemine karşı 5.35:1 veriyordu ama üçüncül metin hep bir
     cam yüzeyin ÜSTÜNDE duruyor; mağaza rozetinin zemininde (≈#252930) oran
     3.81'e, alt bilgide gökyüzü parıltısının üstünde 2.96'ya düşüyordu.
     #8f9cb6 aynı zeminlerde 5.3:1 verir ve --tx-2 ile arasındaki basamak
     korunur. */
  --tx-3: #8f9cb6;

  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.18);
  --line-hi: rgba(255, 255, 255, 0.42);

  /* Yüzeylerin çoğu artık bulanıklaştırma yerine biraz daha opak bir zemin
     kullanıyor (bkz. §4); görünüm aynı kalsın diye opaklık yükseltildi. */
  --pane: rgba(255, 255, 255, 0.055);
  --pane-2: rgba(255, 255, 255, 0.095);
  --pane-blur: blur(22px) saturate(160%);
  /* ---- ÜÇ KADEMELİ GÖLGE ----
     Tek bir geniş gölge yüzeyi zemine yaklaştırmıyor, sadece etrafını
     karartıyordu. Gerçek bir cam levha üç iz bırakır: temas çizgisi (1 px),
     yakın gölge ve uzak ortam gölgesi. Kademeler ayrı ayrı okunmaz, birlikte
     "yüzey zeminin üstünde duruyor" hissini verir. */
  --pane-shadow:
    0 1px 2px rgba(0, 0, 0, 0.32),
    0 12px 26px -18px rgba(0, 0, 0, 0.65),
    0 30px 80px -34px rgba(0, 0, 0, 0.9);

  /* ---- cam yüzey ışıkları (bkz. §4) ----
     --glass-sheen  üst kenardan aşağı sönen SABİT tepe ışığı. Sabit olması
                    şart: imleci izleyen kaustik dokunmatikte hiç kımıldamıyor,
                    yüzeyler telefonda ışıksız ve düz görünüyordu.
     --glass-edge   çerçevenin hemen İÇİNDEKİ 1 px'lik kırılma çizgisi; dış
                    çerçeveyle birlikte camın kalınlığını okutur. */
  --glass-sheen: rgba(255, 255, 255, 0.075);
  --glass-edge: rgba(255, 255, 255, 0.11);

  --accent: #4da3ff;
  --link: #57b4ff;

  /* Dolgu butonun etiketi 15.2 px kalın — WCAG'in "büyük metin" eşiği olan
     18.66 px'in altında, yani 4.5:1 gerekiyor. Eski rampa (#2e7bf6 / #3f8ffb)
     beyaz metinle 3.9:1'de kalıyordu; ton korunarak koyulaştırıldı, en açık
     durak dahil her yerde ≥4.7:1. */
  --btn-fill: linear-gradient(103deg, #1340c4 0%, #1f5ed6 52%, #2a6fe0 100%);
  --btn-glow: 0 14px 40px -14px rgba(38, 104, 224, 0.85);

  --glow-1: rgba(28, 96, 255, 0.30);   /* telefonların arkasındaki ana mavi */
  --glow-2: rgba(120, 70, 255, 0.22);  /* sol alt mor */
  --glow-3: rgba(24, 110, 255, 0.34);  /* alt kenar mavisi */
  /* Üst kenardaki koyulaştırma. Değişken OLMASI şart: sabit yazıldığında
     açık temada krem zemine lacivert bir gölge düşürüyordu. */
  --glow-4: rgba(10, 30, 90, 0.35);
  --grain: 0.055;

  --logo-d: block;
  --logo-l: none;
}

/* ---- LIGHT (soğuk nötr) ----
   ÖNCEKİ SÜRÜM SICAK BİR KREMDİ (#f4eee1) ve üç sorunu vardı:

   1) Marka paletiyle çakışıyordu. Ürün ikonları mavi / mor / turkuaz / pembe;
      bunların hepsi SOĞUK. Bej bir zeminin üstünde aynı tonlar çamurlaşıyor,
      ikon kutuları pastel ve soluk görünüyordu.
   2) Yüzey ayrımı yoktu. Zemin %92 parlaklıkta, panel (`--pane`) ise onun
      yalnızca bir tık açığı; kart nerede bitiyor zemin nerede başlıyor
      okunmuyordu. Kart şeridinin İÇİNDEKİ kartlar şeridin kendisiyle aynı
      değerdeydi.
   3) Vurgu rengi (#17357f) zemine göre 9.4:1 — yani neredeyse siyah bir
      lacivert. Erişilebilir ama cansız: bir vurgu renginin işi dikkat çekmek,
      kontrast rekoru kırmak değil.

   Yeni taban soğuk ve düşük kromalı bir gri-mavi (#eceff5, ~%86 parlaklık).
   Saf beyaz DEĞİL — uzun okumada beyaz zemin göz yorar — ama nötr olduğu için
   marka renkleri üstünde doğru okunur. Paneller neredeyse saf beyaza çekildi;
   zeminle aralarındaki 10 puanlık parlaklık farkı yüzeyleri kendiliğinden
   ayırır, kalın çerçeveye gerek kalmaz.

   ---- KONTRAST (WCAG AA) ----
   İki zemine göre ölçüldü: düz zemin (#eceff5) ve gökyüzü parıltılarının
   zemini en çok KOYULAŞTIRDIĞI nokta (dördü birden üst üste bindiğinde
   #c2ceea — pratikte olmaz, en kötü hâl olarak alındı).
                     düz zemin   en kötü zemin   panel üstü
     --tx-1  #0f1420   15.98         —            17.80
     --tx-2  #414a5c    7.73        5.64           8.61
     --tx-3  #4b5466    6.61        4.82           7.36
     --accent#1747c9    6.56        4.79           7.31
     --link  #1642bd    7.15        5.22             —
   Dolgu butonun en AÇIK durağında beyaz metin 4.86:1.                     */
html[data-theme="light"] {
  color-scheme: light;

  --bg: #eceff5;
  --bg-soft: #f7f9fc;

  --tx-1: #0f1420;
  --tx-2: #414a5c;
  --tx-3: #4b5466;

  /* Çizgiler zeminle aynı sıcaklıkta: sıcak kahve çizgiler soğuk gri-mavi
     zeminin üstünde sarımsı bir kirlilik bırakıyordu. */
  --line: rgba(18, 30, 58, 0.12);
  --line-2: rgba(18, 30, 58, 0.22);
  --line-hi: rgba(255, 255, 255, 0.95);

  /* Panel neredeyse opak: asıl yüzey ayrımını bu yapıyor (bkz. yukarıdaki
     2. madde). Cam etkisi kaybolmaz — zeminin rengi hâlâ %22 oranında
     sızar ve kenar ışıkları yerinde durur. */
  --pane: rgba(255, 255, 255, 0.78);
  --pane-2: rgba(255, 255, 255, 0.95);
  --pane-blur: blur(20px) saturate(140%);
  /* Gölge nötr gri DEĞİL, zeminle aynı aileden soğuk lacivert: gri gölge
     mavimsi zeminin üstünde ölü bir leke gibi duruyor. Kademeler koyu
     temayla aynı ama daha belirgin — açık temada derinliği sadece gölge
     taşıyor, koyu temadaki gibi bir parıltı yardımı yok. */
  --pane-shadow:
    0 1px 2px rgba(16, 28, 58, 0.06),
    0 8px 20px -12px rgba(16, 28, 58, 0.16),
    0 28px 60px -28px rgba(16, 28, 58, 0.24);

  /* Tepe ışığı ve iç kenar saf beyaz: neredeyse beyaz bir panelin üstünde
     ancak bu değerde bir kabartma oluşur. */
  --glass-sheen: rgba(255, 255, 255, 0.85);
  --glass-edge: rgba(255, 255, 255, 1);

  /* Canlı ama erişilebilir mavi. Eski #17357f'in yerine geçer; 9.4:1'den
     6.56:1'e inmek kontrastı "yeterli"nin altına DÜŞÜRMEZ (eşik 4.5) ama
     rengi lacivertten gerçek bir maviye çıkarır. */
  --accent: #1747c9;
  /* Bağlantı bir tık daha koyu: yasal metinde altı çizili ve uzun paragraf
     içinde geçiyor, orada okunurluk vurgudan önce gelir. */
  --link: #1642bd;

  --btn-fill: linear-gradient(103deg, #1740b8 0%, #1f57d8 52%, #2a6ae8 100%);
  --btn-glow: 0 14px 38px -16px rgba(31, 87, 216, 0.42);

  /* Parıltılar soğudu ve KISILDI. Amaç zemini renklendirmek değil derinlik
     vermek; ayrıca parıltının zemini koyulaştırdığı yerde ikincil metnin
     kontrastı düşüyor (bkz. yukarıdaki "en kötü zemin" sütunu). */
  --glow-1: rgba(96, 132, 214, 0.13);
  --glow-2: rgba(140, 124, 208, 0.10);
  --glow-3: rgba(120, 158, 220, 0.13);
  --glow-4: rgba(176, 194, 224, 0.20);
  --grain: 0.018;

  --logo-d: none;
  --logo-l: block;
}

/* --------------------------------------------------------------- 2. BASE */
*, *::before, *::after { box-sizing: border-box; }

/* `scroll-behavior: smooth` bilerek YOK: kaydırmaya bağlı tüm animasyonlar
   kaldırıldı, çapa bağlantıları da anında gider. */
html { -webkit-text-size-adjust: 100%; }

/* Sayfa dikey bir esnek sütundur: içerik kısa kalsa bile alt bilgi ekranın
   dibine oturur. Bunsuz kısa sayfalarda (oyunlar, uygulamalar, saas, ürün
   tanıtımı) alt bilgiden sonra bir şerit boş zemin kalıyor ve arka plan
   sayfanın geri kalanıyla uyuşmuyordu. Sabit konumlu katmanlar (`.sky`, `#gl`,
   `.head`, `.drawer`, `.lb`, `.skip`) akıştan çıktığı için esnek öğe olmazlar. */
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.42vw + 0.86rem, 1.03rem);
  line-height: 1.68;
  color: var(--tx-2);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.55s var(--ease), color 0.55s var(--ease);
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--tx-1);
  font-weight: 800;
  letter-spacing: -0.03em;
  /* 1.05 → 1.12: h1 ile aynı gerekçe (bkz. aşağıdaki not). Ara başlıklar da
     Türkçede çok satıra kırılıyor ve "mağazalarımızdan / inceleyebilirsiniz"
     gibi yerlerde ğ kuyruğu alttaki satıra değiyordu. */
  line-height: 1.12;
}
/* `.hero__copy > h2`: tanıtım sayfalarında beş ürün paneli tek belgede duruyor,
   bu yüzden yalnızca ilki h1. Kalanlar semantikte h2 ama görünümde h1. */
/* Satır yüksekliği 1.0 DEĞİL 1.06. Plus Jakarta Sans'ın iniş kuyruğu
   (`descender`) yaklaşık 0.22em; 1.0'lık satır kutusu bunu bir sonraki satırın
   büyük harf hizasına sokuyordu. Türkçe metinde bu istisna değil kural:
   "Gerçeğe" (ğ + ç) alt satırdaki "MoonVia Labs"ın üstüne biniyordu.
   Mobilde başlık daha çok satıra kırıldığı için orada 1.14'e çıkar
   (bkz. §12, ≤980 px). */
h1,
.hero__copy > h2 { font-size: clamp(2.45rem, 4.35vw, 4.05rem); line-height: 1.06; letter-spacing: -0.038em; }
h2 { font-size: clamp(1.8rem, 2.9vw, 2.7rem); }
h3 { font-size: clamp(1.1rem, 1.25vw, 1.32rem); font-weight: 700; letter-spacing: -0.022em; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; }

/* Yalnızca ekran okuyucular için: bölümün adı görünür bir başlık olmadan
   duyurulur (`aria-labelledby`). `display: none` KULLANILMAZ — o hâlde
   ekran okuyucu da göremez. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Seçim vurgusu GERÇEK METİNDİR: 4.5:1 eşiği burada da geçerli. `--blue-500`
   (#2e7bf6) beyaz metinle 3.98:1 veriyordu — bir ton koyu duraga çekildi,
   `--blue-600` (#1a56e8) 5.93:1. İki temada da aynı: seçim rengi zemine değil
   kendi üstündeki metne göre ölçülür. */
::selection { background: var(--blue-600); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* Çapa hedefleri SABİT header'ın altında kalmasın. "İçeriğe geç" bağlantısı
   `#main`i ekranın tam tepesine getiriyordu; header da tam orada durduğu için
   atlanan içeriğin ilk satırları görünmüyordu. `:where()` özgüllüğü sıfırlar,
   böylece kural hiçbir bileşenin kendi ayarını ezmez. */
:where([id]) { scroll-margin-top: calc(var(--head-h) + var(--head-top) + 12px); }

/* Dokunmatikte tarayıcının kendi gri dokunma vurgusu, sayfanın kendi basınç
   tepkisiyle (bkz. §4 `:active`) üst üste binip tek bir dokunuşa iki ayrı geri
   bildirim veriyordu. `touch-action: manipulation` da çift dokunuşla
   yakınlaştırmayı beklemeyi bırakır — mobilde her tıklama ~300 ms erken. */
a, button, [role="button"], summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 99px;
  border: 3px solid transparent; background-clip: padding-box;
}

/* ---- GÜVENLİ ALAN ----
   Üç sayfa da `viewport-fit=cover` ile açılıyor: içerik çentiğin ve ana sayfa
   çubuğunun ALTINA kadar uzanıyor. Bunu isteyip payı bırakmamak, payı hiç
   istememekten kötüdür — iPhone YATAY tutulduğunda çentik ekranın SOL (ya da
   sağ) kenarında durur ve 47 px'lik şeridi kaplar; oradaki `--gutter` 20 px
   olduğu için kart kenarları ve metin çentiğin altında kalıyordu.
   `env(..., 0px)` yedeği şart: yedeksiz `env()` desteklemeyen tarayıcıda
   `max()` ifadesinin tamamı geçersiz olur ve yatay dolgu tümden düşer. */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline:
    max(var(--gutter), env(safe-area-inset-left, 0px))
    max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* --------------------------------------------------- 3. ATMOSPHERE / GLOW */
/* Referanstaki ışık kompozisyonu: koyu lacivert zemin üzerinde birkaç büyük,
   yumuşak ışık kaynağı. Doku değil — ışık.                                   */
.sky {
  position: fixed;
  /* scroll'a bağlı derinlik kaydırmasında kenar açılmaması için taşırılır */
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Hareket eden TEK katman burasıdır. `.sky` kabı sabit kalır, böylece
   aşağıdaki gren dokusu ölçeklenen katmanın içine düşmez ve her ölçek
   değişiminde yeniden rasterize edilmez. Taşma payı da -12% yerine -5%:
   iki kat taşma, ekranın üç katından büyük bir katman üretiyordu. */
.sky::before {
  content: "";
  position: absolute;
  inset: -5%;
  background:
    radial-gradient(46% 40% at 74% 30%, var(--glow-1), transparent 68%),
    radial-gradient(40% 38% at 26% 74%, var(--glow-2), transparent 70%),
    radial-gradient(78% 34% at 50% 106%, var(--glow-3), transparent 72%),
    radial-gradient(60% 50% at 50% -10%, var(--glow-4), transparent 70%);
  animation: sky-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes sky-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2.2%, 1.6%, 0) scale(1.06); }
}
/* ince film grenü — düz gradyanların bantlaşmasını kırar */
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

#gl {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.page { position: relative; z-index: 2; flex: 1 0 auto; }

/* Hero'su olmayan sayfalarda (ürün listeleri, tanıtım sayfaları) ilk bölüm
   sabit header'ın altına giriyordu; hero'lu sayfalarda bu payı `.hero` verir.
   Pay artık header'ın kendi üst boşluğunu da (`--head-top`) sayar; önceden
   header 18 px aşağıdan başladığı için başlık header'a değiyordu. */
.page > .sec:first-child {
  padding-top: calc(var(--head-h) + var(--head-top) + var(--sp-tight));
}

/* ------------------------------------------------------- 4. LIQUID GLASS */
/*
   Katmanlar (alttan üste)
   1  gövde       ince süt rengi + sabit tepe ışığı
   2  ::after     ışık bulutu: imleci izleyen odak + üstten inen genel parlama
   3  ::before    kenar: speküler pah + kromatik sapma (cam dispersiyonu)
   4  :active     basınç tepkisi

   ---- BU BÖLÜM NEDEN YENİDEN YAZILDI ----
   Önceki sürümde `::after` "sıvı kırılma halkası"ydı ve iki pahalı özellik
   taşıyordu:

     filter: url(#mvl-liquid)   feTurbulence + feDisplacementMap + blur
     mix-blend-mode: screen

   İkisi birlikte sayfanın en büyük kare bütçesi kalemiydi:
     · Karıştırma kipi (`screen`) yüzeyin ARKASINI ayrı bir dokuda tutmayı
       zorunlu kılar. Arkada `sky-drift` ile sürekli hareket eden bir katman
       var (bkz. §3), yani arka plan HER KARE değişiyor — dolayısıyla her cam
       yüzey her karede yeniden karıştırılıyordu. Anasayfada dokuz, ürün
       sayfasında yirmiden fazla yüzey var.
     · SVG filtresi statik çizilse bile öğeyi kendi katmanına hapseder ve her
       ölçü değişiminde (kaydırmada adres çubuğu toplanması dahil) yeniden
       rasterize edilir. feTurbulence bunun en pahalı türü.

   Yerine geçen katman AYNI izlenimi —camın kalınlığı, kenardaki ışık kırılması,
   yüzeyin üstünden geçen parlama— saf degradeyle verir: filtre yok, karıştırma
   yok, maske yok. Tek bir boyama geçişi.

   Ayrıca `@property --sa` kaldırıldı. Kayıtlı bir özel özelliği geçişlemek
   (`transition: --sa`) degradenin renk durağını her karede yeniden
   hesaplatır — yani 0.5 s boyunca yüzeyin TAMAMI yeniden boyanır. Aynı etki
   artık `::after` katmanının `opacity`si ile yapılıyor: opaklık yalnızca
   birleştiricide (compositor) çalışır, boyama tetiklemez.                   */

/* ---- ortak cam gövdesi ---- */
.glass,
.card,
.panel,
.row-card,
.stat,
.store,
.head {
  position: relative;
  isolation: isolate;
  background-color: var(--pane);
  /* SABİT tepe ışığı: yüzeyin üst kenarından aşağı söner. Sönüş PİKSEL
     cinsinden (100px), yüzde DEĞİL: yüzde, 600 px'lik bir şeritte ışığı yarım
     panele yayıp "cam" yerine "degrade" gibi gösteriyor, 44 px'lik bir rozette
     ise neredeyse hiç görünmüyordu. Sabit uzunlukta ışık, yüzey büyüklüğünden
     bağımsız olarak hep aynı kalınlıkta okunur. */
  background-image: linear-gradient(180deg, var(--glass-sheen) 0, transparent 100px);
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  /* Kenar İKİ çizgidir: dıştaki `border` + içteki `inset 0 1px 0`. Aradaki
     yarım tonluk fark camın kalınlığını okutur; tek çizgi hep "kutu" gibi
     duruyordu. Alttaki geniş iç gölge de yüzeyin dibini kapatır. */
  box-shadow: var(--pane-shadow),
    inset 0 1px 0 var(--glass-edge),
    inset 0 -18px 34px -22px color-mix(in srgb, var(--tx-1) 12%, transparent);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
    transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.glass { border-radius: var(--r-lg); }

/* Arka plan bulanıklaştırma yalnızca BÜYÜK ve HAREKET ETMEYEN yüzeylerde.
   Hareket eden bir öğede backdrop-filter, her karede arka planın yeniden
   örneklenip bulanıklaştırılmasını zorlar; ölçümde kaydırma performansının
   en pahalı kalemi buydu. Küçük ve tekrar eden yüzeyler (kartlar, rozetler,
   butonlar) bunun yerine biraz daha opak bir zeminle aynı etkiyi verir. */
/* Header ve footer listede DEĞİL: ikisi de sürekli çizilen WebGL tuvalinin
   üzerinde duruyor, bu yüzden arka planları her karede yeniden bulanıklaştırılıyor
   ve kaydırmada ~8 ms'lik ek maliyet çıkarıyorlardı. Referans tasarımda header
   zaten neredeyse opak; biraz daha opak bir zemin aynı görünümü bedelsiz verir. */
/* `.drawer` bu listeden ÇIKARILDI. Çekmece tam ekran ve zemini zaten %92
   opak — arkasındaki bulanıklık pratikte görünmüyordu. Buna karşılık
   `backdrop-filter` TAM EKRAN bir alanı her karede yeniden bulanıklaştırır ve
   çekmecenin arkasında sürekli çizen WebGL tuvali var; menü açılırken telefonda
   hissedilen takılmanın kaynağı buydu. Zemin %97'ye çıkarıldı (bkz. `.drawer`),
   görünüm neredeyse aynı, maliyet sıfır.
   `.lb` listede KALIR: büyütme penceresi seyrek açılır, kısa ömürlüdür ve
   zemini %88 — orada bulanıklık gerçekten görülüyor. */
.lb {
  backdrop-filter: var(--pane-blur);
  -webkit-backdrop-filter: var(--pane-blur);
}

/* Üzerine gelince ışık bulutu güçlenir. Değişen TEK şey `opacity` — bu
   özellik birleştiricide çalışır, yeniden boyama yaptırmaz (eski `--sa`
   geçişi yüzeyin tamamını yeniden boyuyordu). */
.glass:hover::after,
.card:hover::after,
.panel:hover::after,
.row-card:hover::after,
.stat:hover::after,
.store:hover::after,
.glass:focus-visible::after,
.card:focus-visible::after,
.row-card:focus-visible::after,
.store:focus-visible::after { opacity: 1; }

/* ---- 3. kenar: speküler + kromatik sapma ---- */
.glass::before,
.card::before,
.panel::before,
.row-card::before,
.stat::before,
.store::before,
.head::before,
.pill::before,
.tag::before,
.btn--ghost::before,
.theme::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  /* Kenar ışığı artık DÖRT duraklı: parlak sol-üst köşe → hızlı sönüş → sönük
     gövde → yumuşak yükseliş → sağ-alt köşede ikinci, daha zayıf parlama.
     Gerçek bir cam pah da ışığı böyle tutar; eski iki duraklı rampa kenarı
     baştan sona eşit parlatıp yüzeyi "çerçeveli kutu" gibi gösteriyordu.
     Kromatik sapma kısıldı (%34→%26, %26→%20): amaç gökkuşağı bir kenar değil,
     ışığın kenarda ayrıştığının sezilmesi. */
  background:
    linear-gradient(152deg,
      var(--line-hi) 0%,
      color-mix(in srgb, var(--line-hi) 34%, transparent) 17%,
      transparent 38%,
      transparent 62%,
      color-mix(in srgb, var(--line-hi) 24%, transparent) 82%,
      color-mix(in srgb, var(--line-hi) 60%, transparent) 100%),
    linear-gradient(118deg, color-mix(in srgb, #5ac8ff 26%, transparent), transparent 26%),
    linear-gradient(302deg, color-mix(in srgb, #ff78dc 20%, transparent), transparent 24%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* ---- 2. IŞIK BULUTU (eski "sıvı kırılma halkası"nın yerine) ----
   İki degrade, tek katman:
     1) imleci izleyen odak — yüzeyin altındaki ışık kaynağı gibi okunur.
        Dokunmatikte `--mx/--my` varsayılanında (50% / 0%) kalır, yani orada
        da yüzeyin üstünden geçen bir parlama olarak görünür; ışıksız düz bir
        panel hiçbir cihazda kalmaz.
     2) üstten inen genel parlama — yüzeyin tepesini ortamdan ayırır.
   Ne filtre, ne maske, ne karıştırma kipi var: tek boyama geçişi.           */
.glass::after,
.card::after,
.panel::after,
.row-card::after,
.stat::after,
.store::after,
.head::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(58% 46% at var(--mx, 50%) var(--my, 0%),
      color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%),
    radial-gradient(130% 78% at 50% -24%,
      color-mix(in srgb, var(--accent) 12%, transparent), transparent 64%);
  opacity: 0.5;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
  z-index: 1;
}
/* Krem zeminde aynı bulut griye çalıyordu: açık temada vurgu koyu lacivert
   (bkz. §1) ve düşük opaklıkta zemini renklendirmek yerine kirletiyor.
   Orada bulut kısılır ve işi büyük ölçüde `--glass-sheen` devralır. */
html[data-theme="light"] :is(.glass, .card, .panel, .row-card, .stat, .store,
  .head)::after { opacity: 0.3; }
/* Kenardaki kromatik sapma koyu zemin için ayarlanmıştı; açık zeminde camgöbeği
   ve pembe saçaklar yüzeye "kirli" bir ton veriyordu. Açık temada sapma kısılır
   ve zeminle aynı soğuk aileye çekilir (eskiden bej-turuncuydu; soğuk nötr
   zeminde o sıcak saçak paslı görünüyordu). */
html[data-theme="light"] :is(.glass, .card, .panel, .row-card, .stat, .store,
  .head, .pill, .tag, .btn--ghost, .theme)::before {
  background:
    linear-gradient(155deg, var(--line-hi), transparent 38%, transparent 62%,
      color-mix(in srgb, var(--line-hi) 45%, transparent)),
    linear-gradient(118deg, rgba(70, 120, 210, 0.18), transparent 26%),
    linear-gradient(302deg, rgba(140, 110, 220, 0.14), transparent 24%);
}

/* içerik kenar katmanlarının üstünde kalsın */
.glass > *,
.card > *,
.panel > *,
.row-card > *,
.stat > *,
.store > *,
.head > * { position: relative; z-index: 3; }

/* ---- 5. basınç tepkisi ---- */
.card:active,
.row-card:active,
.store:active { transform: scale(0.99); transition-duration: 0.12s; }

/* .glass-sheen artık ek bir işaret; sıvı cam tüm yüzeylerde etkin */
.glass-sheen { position: relative; }

/* ------------------------------------------------------------ 5. BUTTONS */
.btn {
  /* İkon çapı değişken: dar ekranda buton etiketini tam ortalarken dolgu bu
     değerden hesaplanıyor (bkz. §12, ≤680 px). */
  --btn-i: 34px;
  --btn-pad-r: 0.46rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.82rem var(--btn-pad-r) 0.82rem 1.5rem;
  border-radius: var(--pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.012em;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn i {
  display: grid;
  place-items: center;
  width: var(--btn-i); height: var(--btn-i);
  flex: 0 0 var(--btn-i);
  border-radius: 50%;
  transition: transform 0.4s var(--ease);
}
.btn i svg { width: 15px; height: 15px; }
.btn:active { transform: scale(0.98); }

.btn--fill {
  color: #fff;
  background: var(--btn-fill);
  box-shadow: var(--btn-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn--fill i { background: rgba(255, 255, 255, 0.2); }
.btn--fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 24%, rgba(255, 255, 255, 0.34), transparent 76%);
  transform: translateX(-130%);
  transition: transform 0.85s var(--ease);
}
.btn--fill:hover { transform: translateY(-3px); }
.btn--fill:hover::after { transform: translateX(130%); }
.btn--fill:hover i { transform: translateX(3px); }

.btn--ghost {
  color: var(--tx-1);
  /* Dolgu butonun `inset 0 1px 0` üst çizgisinin (bkz. `.btn--fill`) cam
     karşılığı: hayalet buton da aynı ışığı alır, ikisi yan yana durduğunda
     tek bir aileden okunur. */
  background-color: var(--pane);
  background-image: linear-gradient(180deg, var(--glass-sheen) 0, transparent 100px);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  border: 1px solid var(--line);
}
.btn--ghost i { background: var(--pane-2); }
.btn--ghost:hover {
  transform: translateY(-3px);
  background-color: var(--pane-2);
  border-color: var(--line-2);
}
.btn--sm {
  --btn-i: 27px;
  --btn-pad-r: 0.36rem;
  padding: 0.58rem var(--btn-pad-r) 0.58rem 1.1rem;
  font-size: 0.86rem;
  gap: 0.6rem;
}
.btn--sm i svg { width: 12px; height: 12px; }

/* rozet */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.15rem 0.5rem 0.9rem;
  border-radius: var(--pill);
  /* Küçük yüzeyler de büyükleriyle aynı dili konuşur: tepe ışığı + iç kenar
     (bkz. §4). Bunlar yoksa rozetler kartların yanında düz birer etiket gibi
     kalıyor, cam sistemi "bazı yerlerde" uygulanmış görünüyordu. */
  background-color: var(--pane);
  background-image: linear-gradient(180deg, var(--glass-sheen) 0, transparent 100px);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.81rem;
  color: var(--tx-1);
}
/* `--blue-400` yerine `--accent`: sabit açık mavi, krem zeminde kaybolan tek
   renkti. Koyu temada iki değer zaten aynı (#4da3ff). */
.pill svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

.tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.75rem;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background-color: var(--pane);
  background-image: linear-gradient(180deg, var(--glass-sheen) 0, transparent 100px);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--tx-2);
}
.tag svg { width: 12px; height: 12px; }

/* metin bağlantısı + dolu daire ok (referanstaki "Daha Fazla Bilgi") */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--link);
}
.arrow-link i {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  color: #fff;
  background: var(--btn-fill);
  box-shadow: var(--btn-glow);
  transition: transform 0.4s var(--ease);
}
.arrow-link i svg { width: 15px; height: 15px; }
.arrow-link:hover i { transform: translateX(4px); }

/* ------------------------------------------------------------- 6. HEADER */
/* Header SABİTTİR ve aşağı kaydırırken GİZLENİR, yukarı kaydırırken geri
   gelir (`is-away`; sınıfı `site.js` içindeki `initHeaderHide` takar).
   Zemin baştan okunur opaklıkta verilir; önceden yalnızca kaydırınca
   opaklaşıyordu ve sayfanın başında menü metni arkadaki gökyüzüne
   karışıyordu.
   Gizleme SALT `transform` ile yapılır — düzen/boyama tetiklemez, bileşik
   katmanda kalır. `top`, `height` ya da `display` DEĞİŞTİRİLMEZ: hero'nun
   üst dolgusu `--head-h`den hesaplandığı için bunlar sayfayı zıplatırdı. */
.head {
  position: fixed;
  top: var(--head-top);
  left: 50%;
  /* Yatay ortalama ve dikey kaçış TEK dönüşümde birleşir; `transform` tek
     değerdir, ikisini ayrı kurallara bölmek birbirini ezerdi. */
  --head-shift: 0px;
  transform: translate(-50%, var(--head-shift));
  /* Çubuk `.shell` DEĞİL; kendi genişliğini kendi hesaplar, bu yüzden güvenli
     alan payını da ayrıca alması gerekir (bkz. `.shell`). Yatay çentikte
     ortalanmış çubuğun sol ucu çentiğin altına giriyor, logo kırpılıyordu. */
  width: min(
    calc(100% - 2 * max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))),
    1460px);
  height: var(--head-h);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0 0.5rem 0 1.55rem;
  border-radius: var(--pill);
  background-color: color-mix(in srgb, var(--bg) 94%, transparent);
  background-image: none;
  border-color: var(--line-2);
  box-shadow: 0 22px 60px -34px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  overflow: hidden;
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease),
    box-shadow 0.45s var(--ease), transform 0.34s var(--ease);
}
/* `-100%` çubuğun KENDİ yüksekliği; üstüne `--head-top` payı ve gölgenin
   taşma payı eklenir, böylece ekranda hiçbir iz kalmaz. */
.head.is-away { --head-shift: calc(-100% - var(--head-top) - 24px); }

.brand { display: flex; align-items: center; flex: none; }
/* Genişlik srcset adaylarıyla BİREBİR eşleşir (146 / 124 / 104 px) ve yükseklik
   içsel orandan (3.113) gelir. Yüksekliği sabitlemek kesirli genişlik üretip
   tarayıcıyı yeniden ölçeklemeye zorluyordu; "LABS"in ince çizgileri bu yüzden
   yumuşuyordu. */
.brand img {
  width: 146px;
  height: auto;
  transition: filter 0.4s var(--ease);
}
.brand .l-d { display: var(--logo-d); }
.brand .l-l { display: var(--logo-l); }
.brand:hover img { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--brand) 70%, transparent)); }

.nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-inline: auto;
  height: 100%;
}
/* Bağlantı artık header'ın TAM yüksekliğini kaplamıyor; içeride kendi hap
   kutusu var. Eski hâlde aktif öğenin ışık çubuğu header'ın yuvarlatılmış alt
   kenarına oturuyordu ve kenarda kırpılıyordu. */
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 1.05rem;
  border-radius: var(--pill);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.94rem;
  color: var(--tx-2);
  white-space: nowrap;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.nav a:hover { color: var(--tx-1); background-color: var(--pane); }
.nav a[aria-current] {
  color: var(--tx-1);
  font-weight: 700;
  background-color: color-mix(in srgb, var(--accent) 14%, transparent);
}
/* aktif öğenin altındaki ince ışık çizgisi — hap kutusunun içinde kalır */
.nav a[aria-current]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 42%;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 60%, transparent);
}

.tools { display: flex; align-items: center; gap: 0.7rem; flex: none; }
/* Header'daki iletişim butonu — dar ekranlarda çekmece menüdeki eşi devralır */
.head__cta { display: none; }
/* Eşik çekmece kırılımıyla eşleşir (bkz. §12, ≤760 px): çubuktaki iletişim
   butonu yalnızca çekmecedeki eşi DEVREDE DEĞİLKEN görünür. */
@media (min-width: 761px) {
  .head__cta { display: inline-flex; }
}

.lang {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--tx-3);
  letter-spacing: 0.01em;
}
/* Yatay dolgu, "TR"/"EN" dokunma alanını 24 px'in altına düşmekten kurtarır
   (WCAG 2.5.8). Görsel olarak yalnızca birkaç piksel genişler. */
.lang button { padding: 0.3rem 0.45rem; transition: color 0.3s var(--ease); }
.lang button:hover { color: var(--tx-1); }
.lang button[aria-pressed="true"] { color: var(--tx-1); }
.lang span { opacity: 0.5; }

/* tema anahtarı — solda güneş ikonu, sağda parlayan mavi-mor küre */
.theme {
  position: relative;
  width: 74px;
  height: 40px;
  flex: none;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.theme svg { width: 15px; height: 15px; color: var(--tx-3); z-index: 1; transition: color 0.35s var(--ease); }
.theme .knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #86b6ff 0%, #3f7cf5 38%, #7b4dff 100%);
  box-shadow: 0 0 22px 2px rgba(80, 120, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.5s var(--ease);
}
html[data-theme="dark"] .theme .knob { transform: translateX(36px); }
html[data-theme="dark"] .theme .i-moon { color: #cfe1ff; }
html[data-theme="light"] .theme .i-sun { color: var(--accent); }

.burger {
  display: none;
  width: 44px; height: 42px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 13px;
  border: 1px solid var(--line-2);
  background: var(--pane);
}
.burger b {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: var(--tx-1);
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
.burger[aria-expanded="true"] b:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] b:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] b:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 85;
  padding:
    calc(var(--head-h) + var(--head-top) + 22px)
    max(var(--gutter), env(safe-area-inset-right, 0px))
    calc(var(--gutter) + env(safe-area-inset-bottom, 0px))
    max(var(--gutter), env(safe-area-inset-left, 0px));
  /* %92 → %97: arkadaki bulanıklık kaldırıldı (gerekçe: §4'teki `.lb` notu),
     zemin onun yerine biraz daha kapatıldı. */
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  display: flex;
  flex-direction: column;
  /* Telefon YATAY tutulduğunda kullanılabilir yükseklik 320–390 px'e iner;
     bağlantılar + alttaki araç satırı bunu aşabiliyor ve taşan kısma
     ulaşmanın hiçbir yolu kalmıyordu. Çekmece tam ekran olduğu için sayfanın
     kendi kaydırması da kilitli (`body { overflow: hidden }`). */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--tx-1);
}
.drawer a em { font-style: normal; font-family: var(--font-body); font-size: 0.8rem; color: var(--tx-3); font-weight: 500; }
.drawer a[aria-current] { color: var(--accent); }
.drawer__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.4rem;
}
.drawer__tools .lang { font-size: 1rem; }
/* Dil seçimi çekmecede yalnızca header'da GÖRÜNMEDİĞİ genişlikte durur.
   Üstünde ikisi aynı anda ekranda olup mükerrer görünüyordu.
   Eşik 380 → 520: çubuğa hamburger eklenince (bkz. §12, ≤760 px) 390 px'lik
   telefonda araç kutusu 192 px'e çıktı ve çubuğun içi 350 px'in 349'unu
   doldurdu — 1 px pay. `.head { overflow: hidden }` olduğu için taşma
   görünmez; hamburger sessizce kırpılır ve menüye erişim tümden kaybolurdu.
   Dil seçimi çekmeceye devredilince araç kutusu 113 px'e iner (79 px pay). */
@media (min-width: 521px) {
  .drawer__tools .lang { display: none; }
  .drawer__tools .btn { margin-left: auto; }
}
.drawer__tools .btn { border-bottom: 0; }
.drawer__tools a { border-bottom: 0; padding: 0.58rem 0.36rem 0.58rem 1.1rem; font-size: 0.86rem; }

/* --------------------------------------------------------------- 7. HERO */
.hero {
  position: relative;
  padding-top: calc(var(--head-h) + var(--head-top) + var(--sp-tight));
  padding-bottom: var(--sp-tight);
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
  width: 100%;
}
/* ---- hero kartı: YALNIZCA MOBİLDE bir kutudur ----
   Masaüstünde sarmalayıcı hiçbir kutu ÜRETMEZ. `display: contents` ile ızgara
   öğesi yine `.hero__copy` olur; iki sütunlu hero bire bir korunur, tek bir
   ölçü bile kaymaz.
   ::before/::after AYRICA kapatılır: `display: contents` elemanın kendi
   kutusunu kaldırır ama pseudo kutuları üretilmeye devam eder. Kapatılmazsa
   §4'ün cam kenarı (`inset: 0`) ve sıvı halkası (`inset: -1px`) en yakın
   KONUMLU ataya —`.hero`— göre yerleşir ve tüm bölümü çerçeveye alır.
   Cam gövdenin kendisi (zemin, çerçeve, kaustik) HTML'deki `.glass` sınıfından
   gelir; buradaki iki kural onu yalnızca açıp kapatır (bkz. §12, ≤980 px). */
.hero__card { display: contents; }
.hero__card::before,
.hero__card::after { content: none; }

.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.45rem; }
.hero__copy h1,
.hero__copy > h2 { max-width: 13ch; }
.hero__copy h1 b,
.hero__copy > h2 b {
  display: block;
  font-weight: 800;
  background: linear-gradient(96deg, #2f80f4 0%, #4da3ff 46%, #7fb6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Açık zeminde koyu temanın açık mavi degradesi 2:1'e kadar düşüyor; ton
   korunup koyulaştırılır. Eski ramp lacivertten mora gidiyordu ve neredeyse
   siyah okunuyordu; yeni ramp gerçek mavi → mor. Duraklar zemine göre
   sırasıyla 6.56 / 4.89 / 5.95 — en açık durak dahil hepsi ≥4.5. */
html[data-theme="light"] .hero__copy h1 b,
html[data-theme="light"] .hero__copy > h2 b {
  background: linear-gradient(96deg, #1747c9 0%, #2a5fd8 52%, #5b3fd0 100%);
  -webkit-background-clip: text; background-clip: text;
}
.hero__lead { max-width: 44ch; font-size: clamp(0.98rem, 0.42vw + 0.9rem, 1.1rem); }
.hero__sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.4vw, 1.45rem);
  letter-spacing: -0.025em;
  color: var(--accent);
  max-width: 26ch;
  margin-top: -0.5rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* mağaza rozetleri */
.stores { display: flex; flex-direction: column; gap: 0.8rem; }
.stores__lbl {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: var(--tx-3);
}
.stores__lbl svg { width: 14px; height: 14px; color: var(--accent); }
.stores__row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.store {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.58rem 1.15rem 0.58rem 0.9rem;
  border-radius: var(--r-md);
  /* Rozet bir DENETİM; zemini öngörülebilir olmalı. Yalnızca `--pane` ile
     gökyüzünün en parlak bölgesi rozetin içinden geçiyor ve "İncele" alt
     yazısı 3.5:1'e düşüyordu. `--bg` katmanı parıltıyı sınırlar. */
  background-color: color-mix(in srgb, var(--bg) 55%, var(--pane-2));
}
/* Üzerine gelince zemin AÇILIR ama sınırlı kalır: düz `--pane-2` neredeyse
   saydam olduğu için parıltı geri sızıyor ve alt yazının kontrastı yalnızca
   hover durumunda düşüyordu. */
.store:hover {
  transform: translateY(-3px);
  background-color: color-mix(in srgb, var(--bg) 42%, var(--pane-2));
  border-color: var(--line-2);
}
/* Odakta aynı açılma, yükselme olmadan (gerekçe: bkz. §8 `.card:focus-visible`). */
.store:focus-visible {
  background-color: color-mix(in srgb, var(--bg) 42%, var(--pane-2));
  border-color: var(--line-2);
}
.store svg { width: 22px; height: 22px; color: var(--tx-1); flex: none; }
.store b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--tx-1); line-height: 1.2; }
/* 0.72rem = 11.5 px idi; okunabilir taban 12 px (bkz. --fs-min). */
.store em { display: block; font-style: normal; font-size: var(--fs-min); color: var(--tx-3); line-height: 1.25; }

/* ================= hero görseli: STATİK TELEFON MAKETİ (§7b) =================
   Buradaki her şey HTML + CSS. Eskiden bu alanda `#gl` tuvaline çizilen bir 3B
   sahne (three.js + phone.js, 734 KB) vardı; salınıyor, imlece eğiliyor, aşağıdan
   yükselerek giriyor ve kaydırmayla yeniden konumlanıyordu. Tamamı kaldırıldı.
   Yıldızlı zemin ETKİLENMEDİ: o aynı tuvalin ayrı bir dalı (`dust`) ve sayfada
   telefon kutusu kalmayınca sahne kendiliğinden "ambient" kipine düşer —
   yalnızca yıldızlar ve ışık şeridi çizilir (bkz. `phone.js` → compose).

   TASARIM SÖZLEŞMESİ: bu bölümde `animation`, `transition` ve `:hover` YOKTUR.
   Blok sayfayla birlikte kayar, başka hiçbir şey yapmaz. Yeni bir kural
   eklerken bunu bozmayın.

   ÖLÇEK NEREDEN GELİYOR: `.pset` kare bir ölçüm kabıdır (`container-type: size`)
   ve içindeki HER ölçü `cqmin` cinsindendir. Yani maket, kutu ne kadarsa o kadar
   büyür; tek bir piksel değeri, tek bir kırılım ayarı yoktur. Kutu kare olduğu
   için `cqmin` = `cqw` = `cqh`, ölçü belirsizliği de yok.
   Kutu neden KARE: sınırı `max-width` veriyor (aşağıda), karede bu doğrudan
   yüksekliği de sınırlar — hero `100svh` ve maket uzarsa mağaza rozetleri
   katlamanın altına inerdi. */
.pset {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* `svh` bileşeni katlamayı, `540px` ise geniş ekranda maketin gereksiz
     büyümesini engeller. Kare kutuda `max-width` yüksekliği de kilitler. */
  max-width: min(54svh, 540px);
  margin-inline: auto;
  container-type: size;
  color: #dce9ff;
}

/* arkadaki yumuşak ışık bulutu — 3B sahnedeki bloom'un yerini tutar */
.pset__glow {
  position: absolute;
  inset: 4% -8% -6% -4%;
  border-radius: 50%;
  background:
    radial-gradient(46% 42% at 42% 44%, color-mix(in srgb, var(--blue-500) 34%, transparent), transparent 72%),
    radial-gradient(40% 38% at 66% 74%, color-mix(in srgb, var(--violet-500) 26%, transparent), transparent 74%);
  filter: blur(6cqmin);
}

/* ince yörünge yayı. Tam çember çizilir, `mask` ile bir ucu söndürülür —
   böylece 3B sahnedeki "açık halka" duygusu tek elemanla korunur. */
.pset__ring {
  position: absolute;
  left: 4%; top: 1%;
  width: 94%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--blue-300) 58%, transparent);
  -webkit-mask-image: linear-gradient(200deg, #000 8%, transparent 62%);
          mask-image: linear-gradient(200deg, #000 8%, transparent 62%);
}

/* Astronot uygulama karosu. `z-index` en üstte ve konum telefonların ÜSTÜNDE
   kalacak şekilde seçildi: karo 2–21% bandında, öndeki telefon 22%'de başlıyor,
   yani üst üste binmiyorlar. */
.pset__tile {
  position: absolute;
  right: 0; top: 2%;
  width: 19cqmin;
  height: auto;
  border-radius: 24%;
  z-index: 3;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--blue-300) 34%, transparent),
    0 3cqmin 6cqmin rgba(2, 8, 26, 0.5);
}

/* ---- gövde ----
   İki telefon da aynı `.dev`dir; farkları yalnızca konum ve eğim.
   Eğim `rotate3d` ile TEK SEFERLİK verilir — bir dönüşüm, bir animasyon
   değildir; kare boyunca sabit kalır. */
.dev {
  position: absolute;
  width: 41cqmin;
  aspect-ratio: 1 / 2.04;
  padding: 0.85cqmin;
  border-radius: 6.4cqmin;
  /* titanyum çerçeve: iki yanı parlak, ortası koyu */
  background: linear-gradient(102deg, #8ea6c8 0%, #43536e 16%, #1b2434 46%, #35435c 78%, #9db3d2 100%);
  box-shadow:
    0 0 0 0.35cqmin rgba(6, 12, 28, 0.55),
    0 6cqmin 12cqmin rgba(2, 7, 22, 0.55);
}
/* yan tuşlar: TEK eleman, sert duraklı degrade üç ayrı tuş gösterir
   (sessize alma + ses artır + ses azalt). */
.dev::before,
.dev::after {
  content: "";
  position: absolute;
  width: 0.75cqmin;
  border-radius: 0.4cqmin;
  background: linear-gradient(180deg,
    #7d90ad 0 17%, transparent 17% 30%,
    #7d90ad 30% 60%, transparent 60% 73%,
    #7d90ad 73% 100%);
}
.dev::before { left: -0.5cqmin; top: 19%; height: 30%; }
/* sağ taraf tek tuş (güç): aynı degradenin yalnızca ilk dilimi kullanılır */
.dev::after {
  right: -0.5cqmin; top: 27%; height: 12%;
  background: #7d90ad;
}

.dev--a {
  left: 0;
  top: 12%;
  transform: perspective(120cqmin) rotateY(15deg) rotate(-4.2deg);
  z-index: 1;
}
.dev--b {
  right: 4%;
  top: 22%;
  transform: perspective(120cqmin) rotateY(-9deg) rotate(2.6deg);
  z-index: 2;
}

/* ---- ekran ---- */
.dev__scr {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5.7cqmin;
  overflow: hidden;
  background: #060c1e;
  font-family: "Plus Jakarta Sans", var(--ff, system-ui), sans-serif;
}
/* cam yansıması — sabit bir huzme */
.dev__scr::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(126deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 26%, transparent 46%);
  pointer-events: none;
}
/* dinamik ada */
.scr::before {
  content: "";
  position: absolute;
  top: 1.6cqmin; left: 50%;
  translate: -50% 0;
  width: 11cqmin; height: 3.1cqmin;
  border-radius: 2cqmin;
  background: #05070e;
  z-index: 3;
}

/* durum çubuğu: saat + pil */
.scr__st {
  position: absolute;
  top: 2.1cqmin; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3.2cqmin;
  font-size: 1.75cqmin;
  font-weight: 600;
  color: rgba(233, 242, 255, 0.9);
  z-index: 2;
}
.scr__st i {
  width: 3.4cqmin; height: 1.7cqmin;
  border: 0.28cqmin solid rgba(233, 242, 255, 0.7);
  border-radius: 0.5cqmin;
  background: linear-gradient(90deg, rgba(233, 242, 255, 0.75) 0 68%, transparent 68%);
  background-clip: content-box;
}
/* alt tutamak */
.scr__home {
  position: absolute;
  bottom: 1.6cqmin; left: 50%;
  translate: -50% 0;
  width: 30%; height: 0.55cqmin;
  border-radius: 1cqmin;
  background: rgba(226, 238, 255, 0.5);
  z-index: 2;
}

/* ---- ekran A: marka açılışı ---- */
.scr--brand {
  background:
    radial-gradient(58% 34% at 50% 22%, rgba(30, 86, 220, 0.55), transparent 70%),
    radial-gradient(52% 32% at 25% 82%, rgba(96, 52, 220, 0.42), transparent 72%),
    #050a1a;
}
/* İç içe üç İNCE halka. `box-shadow` yayılımı DOLU disk üretir (halka değil),
   o yüzden çember sınırı `border` ile çizilir: bir eleman + iki pseudo. */
.scr__rings {
  position: absolute;
  left: 50%; top: 46%;
  width: 15cqmin; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 0.24cqmin solid rgba(120, 180, 255, 0.42);
  background: radial-gradient(circle, rgba(70, 140, 255, 0.4), transparent 72%);
}
.scr__rings::before,
.scr__rings::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 0.22cqmin solid rgba(120, 180, 255, 0.26);
}
.scr__rings::before { inset: -5cqmin; }
.scr__rings::after  { inset: -10cqmin; border-color: rgba(120, 180, 255, 0.14); }
.scr__logo {
  position: absolute;
  left: 0; right: 0; top: 46%;
  translate: 0 -50%;
  text-align: center;
  font-size: 4.7cqmin;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  z-index: 1;
}
.scr__logo em {
  display: block;
  margin-top: 0.4cqmin;
  font-style: normal;
  font-size: 3.5cqmin;
  letter-spacing: 0.16em;
  color: #00a2ff;
}
.scr__prog {
  position: absolute;
  left: 50%; top: 74%;
  translate: -50% 0;
  width: 37%; height: 0.55cqmin;
  border-radius: 1cqmin;
  /* dolu kısım da zeminin kendisi: iki duraklı degrade, ikinci eleman yok */
  background: linear-gradient(90deg, var(--blue-400) 0 67%, rgba(255, 255, 255, 0.14) 67%);
}
.scr__url {
  position: absolute;
  left: 0; right: 0; top: 78.5%;
  text-align: center;
  font-size: 1.55cqmin;
  font-weight: 500;
  color: rgba(190, 215, 250, 0.6);
}

/* ---- ekran B: slogan ---- */
.scr--slogan {
  background:
    radial-gradient(58% 34% at 50% 20%, rgba(24, 60, 170, 0.5), transparent 70%),
    radial-gradient(52% 32% at 25% 80%, rgba(80, 40, 190, 0.4), transparent 72%),
    #050a1a;
}
/* organik damla: düzensiz `border-radius` + tek seferlik eğim */
.scr__blob {
  position: absolute;
  left: 50%; top: 40%;
  width: 54%; aspect-ratio: 1 / 1.42;
  translate: -50% -50%;
  rotate: -17deg;
  border-radius: 64% 36% 43% 57% / 40% 58% 42% 60%;
  background: linear-gradient(148deg, rgba(88, 158, 255, 0.92) 0%, rgba(52, 80, 220, 0.45) 55%, rgba(10, 18, 55, 0.12) 100%);
}
/* damlanın içindeki kaçık ikinci kontur — 3B sahnedeki ışık halkasının izi */
.scr__blob::after {
  content: "";
  position: absolute;
  inset: 9% 14% 13% 8%;
  border-radius: 58% 42% 50% 50% / 46% 54% 46% 54%;
  border: 0.4cqmin solid rgba(180, 215, 255, 0.42);
}
.scr__lines {
  position: absolute;
  left: 0; right: 0; top: 66%;
  margin: 0;
  text-align: center;
  font-style: italic;
  font-size: 2.55cqmin;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.scr__lines b,
.scr__lines i {
  display: block;
  font-style: italic;
  font-size: 2.95cqmin;
  font-weight: 700;
  color: #fff;
}

/* AÇIK TEMA: cihazlar koyu kalır (gerçek telefon öyledir), yalnızca zemine
   oturan katmanlar — ışık bulutu, yay, gölge — krem zemine göre yumuşatılır. */
html[data-theme="light"] .pset__glow { opacity: 0.5; }
html[data-theme="light"] .pset__ring {
  border-color: color-mix(in srgb, var(--blue-600) 30%, transparent);
}
html[data-theme="light"] .dev {
  box-shadow:
    0 0 0 0.35cqmin rgba(255, 255, 255, 0.6),
    0 6cqmin 12cqmin rgba(28, 48, 92, 0.24);
}

/* ikon kutusu — referanstaki gibi: koyu tonlu zemin, renkli ince çerçeve,
   içinde renkli çizgi ikon (dolu parlak gradient DEĞİL)                    */
.ico {
  --c: var(--blue-400);
  --c2: var(--blue-500);
  width: 52px; height: 52px;
  flex: none;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--c);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--c) 26%, transparent), color-mix(in srgb, var(--c2) 8%, transparent)),
    color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c) 30%, transparent),
              0 10px 26px -14px color-mix(in srgb, var(--c) 70%, transparent);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.ico svg { width: 23px; height: 23px; }
.ico--violet { --c: var(--violet-400); --c2: var(--violet-500); }
.ico--teal   { --c: var(--teal-400);   --c2: var(--teal-500); }
.ico--pink   { --c: var(--pink-400);   --c2: var(--pink-500); }
.ico--sm { width: 42px; height: 42px; border-radius: 13px; }
.ico--sm svg { width: 19px; height: 19px; }

/* Açık temada ikon renkleri koyulaştırılır: koyu zemin için seçilen neon
   tonlar beyaza yakın kutunun içinde 2:1 civarında kalıyordu. Yeni set eskisine
   göre daha DOYGUN — soğuk nötr zemin artık tonları çamurlaştırmıyor, bu yüzden
   canlılığı kısmaya gerek yok. Panel üstünde sırasıyla 6.58 / 7.05 / 6.86 / 7.68. */
html[data-theme="light"] .ico          { --c: #1f4fd0; --c2: #1642bd; }
html[data-theme="light"] .ico--violet  { --c: #6236c8; --c2: #4d27a8; }
html[data-theme="light"] .ico--teal    { --c: #0a635f; --c2: #084c49; }
html[data-theme="light"] .ico--pink    { --c: #8c1f84; --c2: #74166d; }

/* --------------------------------------------------------------- 8. CARDS */
/* dış cam konteyner + içinde 4 kart (referanstaki şerit) */
.strip {
  padding: clamp(14px, 1.5vw, 22px);
  border-radius: var(--r-2xl);
}
/* ---- İÇ İÇE CAM ----
   `.strip` bir KAP, içindeki `.card`lar ayrı yüzeyler. İkisi de `--pane`
   kullanınca açık temada aynı değere düşüyor (ikisi de neredeyse beyaz) ve
   şerit görünmez oluyordu — dört kart tek bir beyaz levhanın üstünde yüzüyor
   gibiydi. Kap bir basamak GERİ çekilir: zeminin tonunu daha çok içeri alır,
   böylece üstündeki beyaz kartlar öne çıkar.
   Koyu temada gerek yok: orada `--pane` saydam beyaz, üst üste binince
   doğal olarak birikiyor ve basamak kendiliğinden oluşuyor. */
html[data-theme="light"] .strip {
  background-color: rgba(226, 232, 244, 0.66);
}
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
  align-items: start;   /* paneller içeriği kadar yükselsin, boş alan bırakmasın */
}

.card {
  position: relative;
  display: block;
  padding: clamp(18px, 1.65vw, 26px);
  padding-bottom: 4.6rem;
  border-radius: var(--r-xl);
  min-height: 230px;
  overflow: hidden;
}
.card h3 { margin: 1.15rem 0 0.5rem; }
.card p { font-size: 0.9rem; color: var(--tx-2); }
/* ok butonu SAĞ ALTTA — ince çerçeveli, saydam daire */
.card__go {
  position: absolute;
  right: clamp(18px, 1.65vw, 26px);
  bottom: clamp(18px, 1.65vw, 26px);
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  color: var(--tx-1);
  transition: transform 0.45s var(--ease), background 0.45s var(--ease), border-color 0.45s var(--ease);
}
.card__go svg { width: 15px; height: 15px; }
.card:hover { transform: translateY(-6px); background-color: var(--pane-2); border-color: var(--line-2); }
.card:hover .card__go { background: var(--btn-fill); border-color: transparent; color: #fff; transform: translateX(4px); }
.card:hover .ico { transform: translateY(-2px) scale(1.05); }
/* Klavyeyle gezinen kullanıcı fareyle gezinenle AYNI bilgiyi görür: kart bir
   bağlantı ve sağ alttaki ok onun düğmesi. Yalnızca odak halkası varken kartın
   tıklanabilir olduğu okunuyor ama nereye gittiği okunmuyordu.
   Yükselme (`translateY`) bilerek YOK: odak imleçle değil klavyeyle geziyor,
   sıçrayan bir kutu takibi zorlaştırır. */
.card:focus-visible { background-color: var(--pane-2); border-color: var(--line-2); }
.card:focus-visible .card__go { background: var(--btn-fill); border-color: transparent; color: #fff; }

/* düz bilgi kartı */
.panel {
  padding: clamp(20px, 1.9vw, 30px);
  border-radius: var(--r-xl);
}
.panel h3 { margin-bottom: 0.6rem; }
.panel p { font-size: 0.92rem; }

/* istatistik */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); }
.stat { padding: clamp(18px, 1.6vw, 26px); border-radius: var(--r-xl); }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 2.5vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--tx-1);
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: 0.5rem; font-size: 0.83rem; color: var(--tx-3); }

/* satır kartı (ürün listesi) */
.row-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 1.15rem;
  border-radius: var(--r-md);
}
.row-card:hover { transform: translateY(-4px); background-color: var(--pane-2); border-color: var(--line-2); }
.row-card b { display: block; font-family: var(--font-display); font-size: 0.95rem; color: var(--tx-1); letter-spacing: -0.018em; }
.row-card em { font-style: normal; font-size: 0.77rem; color: var(--tx-3); }

/* ------------------------------------------------------------ 9. SECTIONS */
/* Bölüm boşlukları TEK ölçekten gelir (bkz. §1 DİKEY RİTİM). Önceki sürümde
   değerler `vh` tabanlıydı: mobil tarayıcıda adres çubuğu görünüp kaybolunca
   bölüm boşlukları kaydırma sırasında değişiyordu. Artık hepsi `vw` tabanlı. */
.sec { padding-block: var(--sp-sec); position: relative; }
.sec--tight { padding-block: var(--sp-tight); }
/* Aynı konuyu süren ardışık bölümler: aradaki boşluk iki kez sayılmasın diye
   üst dolgu kapatılır. HTML'de `style="padding-top:0"` yazmanın yerini alır. */
.sec--flush-top { padding-top: 0; }
.sec--flush-bottom { padding-bottom: 0; }

.sec__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.3rem; margin-bottom: var(--sp-head);
}
/* Ortalanmış bölüm başlığı (ör. "Dijital Ürün Kataloğumuz") */
.sec__head--center {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sec__head--center .eyebrow { justify-content: center; }
.sec__head--center p { margin-inline: auto; }
/* Yalnızca bir üst-etiket (eyebrow) taşıyan başlık: tam `--sp-head` boşluğu
   burada fazla kaçıyor ve etiketle içeriği birbirinden koparıyordu. */
.sec__head--slim { margin-bottom: 1rem; }
.sec__head--slim .eyebrow { margin-bottom: 0; }
/* Bölümün TEK içeriği bir başlıksa alt boşluğunu bölümün kendi dolgusu verir;
   ikisi üst üste binince başlıkla sonraki bölüm arasında iki kat boşluk
   oluşuyordu. */
.shell > .sec__head:last-child { margin-bottom: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.77rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.8rem;
}
.eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), transparent); }
/* Alt sayfalarda bölüm başlığı aynı zamanda sayfanın h1'idir; anlam h1 kalır,
   ölçü bölüm başlığınınkiyle aynı olur. */
.sec__head h1 { font-size: clamp(1.85rem, 3vw, 2.7rem); letter-spacing: -0.03em; }
.sec__head p { max-width: 52ch; margin-top: 0.8rem; }
.sec__head .crumb { margin-bottom: 0.9rem; }

.crumb { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.81rem; color: var(--tx-3); }
/* Alt menüdekiyle aynı gerekçe: dolgu yalnızca dokunma alanını 24 px'e
   çıkarır, satırın görünen yüksekliği değişmez. */
.crumb a { padding-block: 0.2rem; }
.crumb a:hover { color: var(--accent); }
/* Ayraç, KENDİ başına bir esnek öğe değil; kendisinden sonraki adımın
   ::before'udur. Kardeş olarak dursaydı satır sonuna düşüp havada
   kalabilirdi — 280 px'te "Anasayfa › Projelerimiz ›" diye kırılıyordu. */
.crumb > * + * { display: inline-flex; align-items: center; gap: 0.4rem; }
.crumb > * + *::before {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  opacity: 0.55;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(9px, 1vw, 15px); }
.step { padding: clamp(17px, 1.5vw, 24px); border-radius: var(--r-lg); background: var(--pane); border: 1px solid var(--line); }
.step em { display: block; font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.8rem; }
.step p { font-size: 0.85rem; margin-top: 0.4rem; }

.tline { position: relative; padding-left: 32px; }
.tline::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--violet-500) 70%, transparent), transparent); }
.tline li { position: relative; padding: 1rem 0 1.2rem; border-bottom: 1px solid var(--line); }
.tline li:last-child { border-bottom: 0; }
.tline li::before { content: ""; position: absolute; left: -32px; top: 1.4rem; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.tline em { font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 0.87rem; color: var(--accent); letter-spacing: 0.04em; }
.tline h4 { margin: 0.3rem 0 0.35rem; }
.tline p { font-size: 0.88rem; }

.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; }
.specs > div { background: color-mix(in srgb, var(--bg-soft) 55%, transparent); padding: 0.9rem 1.1rem; }
.specs dt { font-size: 0.74rem; color: var(--tx-3); margin-bottom: 0.22rem; }
.specs dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 0.93rem; color: var(--tx-1); }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.prose p + p { margin-top: 1rem; }

/* ---- ÜRÜN POLİTİKASI ANAHTARI ----
   Katalogdan bir ürüne basıldığında YALNIZCA o ürünün belgesi açılır.
   Anahtar CSS'in `:target` seçicisidir, JS DEĞİL. Bu bilinçli bir seçim:
   · Her ürünün belgesi KENDİ ADRESİNDE durur —
     `privacy-policy.html#p-urun-adi`. Play Console'a uygulama başına
     yazılacak "Privacy policy URL" tam olarak budur; adres paylaşıldığında
     doğrudan o ürünün belgesi açılır, ziyaretçinin tıklaması gerekmez.
   · Betiği engellenmiş bir tarayıcıda da çalışır. Mağaza incelemesinin
     boş sayfa görmesi ret sebebidir; buna JS bağlamak gereksiz risk.
   `:has(:target)`: belgenin İÇİNDEKİ bir başlığa (ör. o ürünün veri silme
   bölümüne) doğrudan bağlantı verildiğinde de kapsayan belge açılır. */
.policy { display: none; }
.policy:target,
.policy:has(:target) { display: block; }
/* Hiçbir ürün seçilmemişken katalogdan seçim yapılmasını isteyen kutu durur;
   bir ürün açıldığında yerini belgeye bırakır. */
.policies:has(.policy:target) .policy__none,
.policies:has(.policy :target) .policy__none { display: none; }
/* `:has()` desteklenmiyorsa yönlendirme kutusu hep görünür kalır — belge yine
   açılır, yalnızca üstünde bir yönerge fazladan durur. Sessizce bozulmaktansa
   fazladan bir cümle. */

/* Ürünün "Data safety" beyanıyla eşleşen veri tablosu.
   Play Console'daki beyanla politikadaki metnin ÇELİŞMESİ en sık ret
   sebeplerinden biri; tablo ikisini yan yana denetlenebilir kılar. */
.dtable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dtable {
  width: 100%;
  min-width: 520px;   /* dar ekranda sıkışıp okunmaz olmaktansa kaydırılır */
  border-collapse: collapse;
  font-size: 0.87rem;
}
.dtable th,
.dtable td {
  text-align: left;
  padding: 0.62rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--tx-2);
}
.dtable thead th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.dtable tbody th { font-weight: 700; color: var(--tx-1); }
.dtable tbody tr:last-child > * { border-bottom: 0; }

/* Belge kartı: `.band` kadar geniş bir cam yüzey ama ŞERİDİN KURALLARI
   OLMADAN. `.band` kısa ve ortalanmış bir çağrı için tasarlandı; içine belge
   konduğunda `.band h2 { max-width: 26ch }` ve `.band p { max-width: 54ch }`
   devreye giriyor, başlıklar erken kırılıyor ve paragraflar liste maddelerinden
   dar kalıyordu — aynı belgede iki ayrı satır ölçüsü. Belgenin ölçüsü tek bir
   yerden gelmeli: `.doc`. */
.doc-card {
  padding: clamp(24px, 3.6vw, 56px);
  border-radius: var(--r-2xl);
}
.doc-card > .doc { margin-inline: auto; }

/* ---- yasal belge gövdesi (gizlilik politikası, koşullar, ürün ekleri) ----
   Sitede başka hiçbir yerde UZUN düz metin yok: kartlarda iki cümle, bölüm
   başlıklarında bir paragraf var. Bu blok tek bir iş için: sayfalarca metnin
   okunabilir kalması.
   · `max-width: 74ch` — satır uzunluğu. Cam panel 1360 px'e kadar genişliyor;
     sınır olmadan satırlar 160 karaktere çıkıyor ve göz satır başını
     kaybediyor.
   · Başlık üstü boşluk, başlık altı boşluğun ~2.5 katı: hiyerarşi numaraya
     değil boşluğa bakarak okunur.
   · `ul` global olarak `list-style: none` ile sıfırlanmış (bkz. §2); madde
     imleri burada geri açılır — yasal metinde madde listesi anlamın parçası. */
.doc { max-width: 74ch; }
.doc > * + * { margin-top: 0.95rem; }
.doc h2 {
  font-size: clamp(1.18rem, 1.6vw, 1.5rem);
  margin-top: 2.5rem;
  scroll-margin-top: calc(var(--head-h) + var(--head-top) + 20px);
}
.doc > h2:first-child { margin-top: 0; }
.doc h3 { margin-top: 1.7rem; font-size: clamp(1rem, 1.1vw, 1.08rem); }
.doc p, .doc li { font-size: 0.94rem; color: var(--tx-2); }
.doc ul, .doc ol {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.25rem;
  list-style: disc;
}
.doc ol { list-style: decimal; }
.doc li::marker { color: var(--accent); }
.doc li > strong:first-child { color: var(--tx-1); }
.doc strong { color: var(--tx-1); font-weight: 700; }
/* Yasal metinde bağlantı ALTI ÇİZİLİ olmalı: rengi tek başına ayırt edici
   değildir (WCAG 1.4.1) ve bu sayfa renk körü bir denetçi tarafından da
   okunabilmelidir. */
.doc a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.doc a:hover { text-decoration-thickness: 2px; }
/* Teknik tanımlayıcılar (paket adı, izin adı) düz metinden ayrılır: yasal
   metinde `AD_ID` bir kelime değil, birebir kopyalanacak bir değerdir. */
.doc code {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 0.88em;
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: var(--pane-2);
  border: 1px solid var(--line);
  color: var(--tx-1);
}
/* ---- KIRILAMAYAN TANIMLAYICILAR ----
   `com.google.android.gms.permission.AD_ID` tek parça 296 px sürüyor; 320 px'lik
   telefonda belgenin satır kutusu 228 px. Kırılamayan bu tek jeton, belgeyi ve
   ONUNLA BİRLİKTE TÜM SAYFAYI 357 px'e genişletiyordu — başlık, alt bilgi ve
   çubuk dahil her şey sağdan kesiliyordu.
   `anywhere`, `break-word` DEĞİL: ikisi de taşan kelimeyi kırar ama yalnızca
   `anywhere` öğenin min-content ölçüsünü de küçültür; sayfa genişliğini
   belirleyen o ölçü olduğu için `break-word` hatayı çözmüyordu.
   Aynı sorun uzun bağlantı metinlerinde (e-posta, URL) da var. */
.doc :is(code, a) { overflow-wrap: anywhere; }
/* Katalog ızgarasının altındaki bilgi notu ızgaraya yapışmasın. */
.grid-4 + .doc__empty { margin-top: 14px; }

/* Belgenin künyesi: yürürlük tarihi, sürüm, kapsam. */
.doc__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  margin: 0 0 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-min);
  color: var(--tx-3);
}
.doc__meta b { font-family: var(--font-display); color: var(--tx-2); font-weight: 700; }

/* Boş durum: ürün eklenene kadar bölümün neden boş olduğunu söyler.
   Sessiz bir boşluk, "sayfa yarım kalmış" gibi okunuyordu. */
.doc__empty {
  padding: clamp(18px, 2vw, 26px);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  text-align: center;
  font-size: 0.9rem;
  color: var(--tx-3);
}

/* ---- KATALOG FİLTRESİ ----
   Tek seçimli, dört seçenekli şerit: Tümü · Oyunlar · Mobil Uygulamalar · SaaS.

   Kap `.glass` ailesindendir; kenar ışığı, tepe parıltısı, imleci izleyen
   bulut ve gölge oradan gelir (bkz. §4). Burada yalnızca ölçü, ızgara ve hap
   yarıçapı tanımlanır — yüzey dili sayfanın geri kalanıyla ortak kalsın.

   Sütunlar EŞİT (`1fr`), içerik genişliğine göre DEĞİL: "Tümü" 78 px,
   "Mobil Uygulamalar" 210 px sürüyor; içerik ölçülü bir şerit segmentli bir
   denetim gibi değil, yan yana dizilmiş dört ayrı düğme gibi okunuyordu.

   Seçili düğme birincil eylemin gradyanını kullanır (`--btn-fill`): sayfada
   "seçili" hâli başka hiçbir şey bu renkte değil, ve beyaz etiketle her
   durakta ≥4.7:1 (bkz. §1).

   İşaretleme dili dil seçiciyle aynı: `aria-pressed` + normal sekme sırası.
   Roving tabindex (ok tuşlarıyla gezinme) BİLEREK YOK — sayfadaki diğer
   düğme grubu (`.lang`) da öyle çalışıyor, iki farklı klavye modeli tek
   sayfada öğrenilecek şey sayısını artırırdı.                              */
.filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  padding: 6px;
  border-radius: var(--pill);
}
.filt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
  /* 24 px'lik WCAG tabanının (bkz. §1 `--tap`) belirgin üstünde: şerit
     sayfanın ana gezinme aracı, hedefleri rahat olmalı. */
  min-height: 46px;
  padding: 0.55rem 0.9rem;
  border-radius: var(--pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.012em;
  line-height: 1.2;
  text-align: center;
  color: var(--tx-2);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.filt > svg { width: 16px; height: 16px; flex: none; opacity: 0.9; }
.filt:hover { color: var(--tx-1); background-color: var(--pane-2); }
.filt[aria-pressed="true"] {
  color: #fff;
  background: var(--btn-fill);
  box-shadow: var(--btn-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.filt[aria-pressed="true"]:hover { color: #fff; }
.filt:active { transform: scale(0.98); }
/* Sayaç rozeti: kategoride kaç ürün olduğunu düğmeye basmadan söyler.
   Değerleri `site.js` yazar — HTML'deki sayı yalnızca ilk boyama içindir,
   ürün eklenince elle güncellenmesi gerekmez. Ekran okuyuculardan gizlidir;
   sayı `#cat-live` bölgesinde cümle olarak duyurulur. */
.filt__n {
  font-style: normal;
  min-width: 22px;
  padding: 0 0.35rem;
  border-radius: var(--pill);
  font-size: var(--fs-min);
  line-height: 20px;
  color: var(--tx-3);
  background: var(--pane-2);
  border: 1px solid var(--line);
}
.filt[aria-pressed="true"] .filt__n {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Katalog kabı. Ürünler arasındaki boşluk MARGIN DEĞİL ızgara `gap`i:
   filtre gizlenen ürünü `display: none` yapar, gizli öğe gap üretmez ama
   margin üretirdi — hangi ürünün ilk sırada kaldığı filtreye göre
   değiştiği için dikey ritim ancak böyle korunuyor. */
.catalog { display: grid; gap: var(--sp-sec); }
/* ---- IZGARA ÖĞESİNİN EN KÜÇÜK GENİŞLİĞİ ----
   Ürün kabı ızgara öğesi olduğu anda varsayılan `min-width: auto` devreye
   girer: öğe, İÇİNDEKİ en geniş şeyin min-content ölçüsünden dar olamaz.
   İçeride de telefonda yatay kaydırmalı ekran görüntüsü şeridi var
   (bkz. §12, ≤680 px): altı kart × ~172 px = 1130 px. Sonuç, 390 px'lik
   telefonda 1130 px genişliğinde bir sayfaydı — `body { overflow-x: hidden }`
   kaydırma çubuğunu gizlediği için hata "sayfanın sağı kesilmiş" gibi
   görünüyordu, başlıklar ve alt bilgi dahil.
   `min-width: 0` otomatik tabanı kapatır; şerit kendi içinde kaydırır,
   dışarıya taşmaz. Kural `.catalog`ın TÜM çocukları için geçerli: aynı tuzak
   ileride eklenecek her ürün kabında da vardır. */
.catalog > * { min-width: 0; }
/* `hidden` özniteliğinin UA kuralı (`display: none`) sınıf seçicileriyle
   yazılmış `display` değerlerini EZEMEZ — `.band` esnek bir kutu, gizlenmesi
   gerekirken görünür kalıyordu. */
.catalog > [hidden] { display: none; }

/* ---- ürün kimliği: logo + ad + künye ---- */
.pident {
  --a: var(--blue-400);
  --b: var(--violet-500);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  padding: clamp(18px, 2vw, 26px);
  border-radius: var(--r-xl);
}
.pident__logo {
  position: relative;
  width: clamp(72px, 8vw, 104px);
  aspect-ratio: 1;
  flex: none;
  border-radius: 24%;
  overflow: hidden;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--a) 40%, transparent), color-mix(in srgb, var(--b) 26%, transparent)),
    color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--a) 34%, transparent);
  box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--a) 70%, transparent);
  display: grid;
  place-items: center;
}
/* Görsel ve yer tutucu ikon AYNI hücrede üst üste durur. Bunsuz ikisi iki ayrı
   satıra düşüyor ve ikon kutunun dışında kalıp kırpılıyordu (görsel artık
   `display: none` ile ızgaradan çıkmıyor, yalnızca saydamlaşıyor). */
.pident__logo > * { grid-area: 1 / 1; }
.pident__logo img { width: 100%; height: 100%; object-fit: cover; }
/* Dosya yoksa `site.js` kutuyu `.is-empty` bırakır ve görsel görünmez —
   kırık resim simgesi çıkmaz. Dosya `assets/img/products/<slug>/logo.png`
   olarak eklendiği anda görsel yüklenir, sınıf kalkar, ikon gizlenir.

   BURADA `display: none` KULLANILMAZ: kutusu olmayan bir öğe hiçbir zaman
   görünüm alanıyla kesişmez, bu yüzden `loading="lazy"` görseli asla
   yüklenmez — sınıf da hiç kalkmazdı. `opacity` düzeni bozmadan gizler. */
.pident__logo img { transition: opacity 0.4s var(--ease); }
.pident__logo.is-empty img { opacity: 0; pointer-events: none; }
/* gerçek logo varsa ikon gizlenir; yoksa yer tutucu ikon görünür */
.pident__logo .ico {
  display: none;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--a);
  width: 50%; height: 50%;
}
.pident__logo .ico svg { width: 100%; height: 100%; }
.pident__logo.is-empty .ico { display: grid; }
.pident__txt { min-width: 0; flex: 1 1 auto; }
/* Ürün adı tanıtım sayfasının h1'idir; ölçü künye bloğuna göre belirlenir,
   varsayılan h1 ölçüsü bu şeridi üç satıra kırıyordu. */
.pident__txt :is(h1, h2) { font-size: clamp(1.45rem, 2.4vw, 2.1rem); letter-spacing: -0.03em; }
.pident__txt p { font-size: 0.9rem; color: var(--tx-3); margin: 0.3rem 0 0.7rem; }
/* mağaza rozetleri künyenin sağında tek satırda kalır */
.pident > .stores__row { flex: none; }

/* ---- 1080×1920 dikey ekran görüntüleri ---- */
.shots {
  --a: var(--blue-400);
  --b: var(--violet-500);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(9px, 1vw, 15px);
}
.shot {
  position: relative;
  margin: 0;
  aspect-ratio: 1080 / 1920;
  border-radius: clamp(12px, 1.4vw, 20px);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--a) 26%, transparent), transparent 70%),
    radial-gradient(80% 60% at 50% 100%, color-mix(in srgb, var(--b) 22%, transparent), transparent 72%),
    var(--pane);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}
.shot figcaption {
  position: absolute;
  left: 8px; bottom: 8px;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  font-family: var(--font-display);
  font-size: var(--fs-min);
  font-weight: 700;
  color: var(--tx-2);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.shot:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: var(--pane-shadow); }
.shot:hover figcaption { opacity: 1; }

/* dosya henüz eklenmemişse: ölçüyü gösteren yer tutucu.
   `display: none` değil `opacity` — gerekçe için bkz. `.pident__logo`. */
.shot img { transition: opacity 0.4s var(--ease); }
.shot.is-empty img { opacity: 0; pointer-events: none; }
.shot.is-empty::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1.5px dashed color-mix(in srgb, var(--a) 42%, transparent);
  border-radius: 12px;
}
.shot.is-empty::after {
  content: "1080 × 1920";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 0.85vw, 0.76rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--a) 78%, var(--tx-3));
}
/* Yer tutucu etiketi açık temada krem/beyaza yakın kartın üstünde
   okunmuyordu; ton korunup metin rengine doğru koyulaştırılır. */
html[data-theme="light"] .shot.is-empty::after {
  color: color-mix(in srgb, var(--a) 40%, var(--tx-1));
}
html[data-theme="light"] .shot.is-empty::before {
  border-color: color-mix(in srgb, var(--a) 55%, transparent);
}
.shot.is-empty figcaption { opacity: 1; }
/* Galeri ipucu. Boşluk artık burada; önceden not, sırf üst boşluk versin diye
   boş bir `.sec__head` kabının içine ve satır içi `style` ile konuyordu. */
.shots__note {
  font-size: 0.82rem;
  color: var(--tx-3);
  white-space: nowrap;
  margin: var(--sp-block) 0 0.7rem;
}

/* ---- büyütme penceresi ---- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 160;   /* header (90) ve çekmece (85) üzerinde */
  display: grid;
  place-items: center;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  animation: lb-in 0.3s var(--ease-out) both;
}
.lb[hidden] { display: none; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb__img {
  grid-column: 2;
  max-width: min(420px, 100%);
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: clamp(14px, 2vw, 26px);
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  object-fit: contain;
}
.lb__nav, .lb__x {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--pane);
  color: var(--tx-1);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.lb__nav svg, .lb__x svg { width: 18px; height: 18px; }
.lb__nav:hover, .lb__x:hover { background: var(--btn-fill); color: #fff; border-color: transparent; }
.lb__x {
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
}
.lb__x:hover { transform: scale(1.06); }
.lb__n {
  position: absolute;
  bottom: clamp(14px, 3vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}

/* ---- alıntılanabilir gerçekler şeridi ---- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.facts li {
  background: var(--pane-2);
  padding: clamp(16px, 1.6vw, 24px);
  text-align: center;
}
.facts b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: -0.035em;
  color: var(--tx-1);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.facts span { display: block; margin-top: 0.4rem; font-size: 0.8rem; color: var(--tx-3); }

/* ---- SSS ---- */
.faq { display: grid; gap: 10px; }
.faq__i {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--pane);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.faq__i[open] { border-color: var(--line-2); background-color: var(--pane-2); }
.faq__i summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(15px, 1.5vw, 21px) clamp(16px, 1.7vw, 24px);
  cursor: pointer;
  list-style: none;
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary h3 {
  font-size: clamp(0.98rem, 1.05vw, 1.12rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.faq__i summary i {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--accent);
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease);
}
.faq__i summary i svg { width: 13px; height: 13px; }
.faq__i[open] summary i { transform: rotate(90deg); background: var(--accent); color: #fff; }
.faq__a {
  padding: 0 clamp(16px, 1.7vw, 24px) clamp(16px, 1.7vw, 22px);
  animation: faq-in 0.32s var(--ease-out) both;
}
.faq__a p { font-size: 0.94rem; max-width: 76ch; color: var(--tx-2); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ---- içeriğe geç bağlantısı ---- */
.skip {
  position: fixed;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  padding: 0.7rem 1.3rem;
  border-radius: var(--pill);
  background: var(--btn-fill);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  transition: top 0.25s var(--ease);
}
.skip:focus-visible { top: 14px; }

.band {
  padding: clamp(30px, 4vw, 56px);
  border-radius: var(--r-2xl);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}
/* Şeritteki başlık h2'dir ama şerit içinde bölüm başlığı kadar iri durmaz;
   20ch fazla dar kalıp üç satıra kırıyordu. */
.band h2 { max-width: 26ch; font-size: clamp(1.45rem, 2.2vw, 2.05rem); }
.band p { max-width: 54ch; }
.band .hero__cta { justify-content: center; }

/* ----------------------------------------------------------- 10. FOOTER */
/* Alt bilgi de sayfanın geri kalanıyla aynı dili konuşur: içeriği düz bir
   şeridin üzerinde değil, header ve kartlarla aynı cam panelin içinde durur. */
.foot {
  position: relative;
  z-index: 2;
  margin-top: auto;   /* kısa sayfalarda ekranın dibine yaslanır */
  /* Alt pay ana sayfa çubuğunu (home indicator) da sayar; `viewport-fit=cover`
     ile telif satırı onun altında kalıyordu (bkz. `.shell`). */
  padding-block: var(--sp-tight)
    calc(clamp(16px, 2.4vw, 28px) + env(safe-area-inset-bottom, 0px));
}
.foot__card {
  padding: clamp(24px, 3vw, 42px) clamp(22px, 3vw, 44px) clamp(14px, 1.6vw, 20px);
  border-radius: var(--r-2xl);
  /* Alt bilgi, gökyüzü kompozisyonunun EN PARLAK bölgesinin (alt kenardaki
     mor/mavi parıltı) tam üstüne denk geliyor. `--pane` neredeyse saydam
     olduğu için zemin yer yer #3a2f77'ye kadar açılıyor ve 12 px'lik ikincil
     metinler 3:1'in altına düşüyordu. Zemine bir `--bg` katmanı eklenerek
     parıltının katkısı sınırlanır; cam görünümü korunur. */
  background-color: color-mix(in srgb, var(--bg) 70%, var(--pane));
}
/* ÜÇ sütun: marka · sosyal medya · iletişim (e-posta + mağazalar).
   Son sütun iki bloklu bir yığındır (`.foot__stack`). */
/* Sosyal sütun 0.8fr → 0.95fr: ikon sayısı dörtten ALTIYA çıktı (Facebook ve
   Threads eklendi). Altı rozet 6×40 + 5×7.2 = 276 px tutuyor; 0.8fr sütunu
   1360 px'lik kabukta 270 px veriyor ve son iki ikon alt satıra düşüp şeridi
   4+2 diye asimetrik bırakıyordu. 0.95fr'de sütun 311 px — tek satır. */
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(26px, 3vw, 52px);
  align-items: start;
}
.foot__stack { display: flex; flex-direction: column; gap: clamp(18px, 1.8vw, 26px); }

/* Marka bloğu: LOGO ve altındaki metin SOLA dayalıdır (satır başlangıçları
   hizada dursun diye).
   Genişlik sınırı `.foot__tag` yerine BLOĞUN kendisinde: sütun genişliğinden
   bağımsız olarak logo ile metin aynı sol kenardan başlar. */
/* `36ch` sınırı 1360–1900 px arasında marka sütununun (≈500 px) yarısını boş
   bırakıp tanıtım cümlesini beş kısa satıra kırıyordu; sınır sütunla birlikte
   büyür ama okunur satır uzunluğunun (≈45ch) üstüne çıkmaz. */
.foot__brand {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.95rem;
  max-width: min(100%, 44ch);
}
/* header ile aynı ilke: genişlik srcset adayıyla birebir (146 px) */
.foot__brand img { width: 146px; height: auto; margin-inline: 0; }
.foot__brand .l-d { display: var(--logo-d); }
.foot__brand .l-l { display: var(--logo-l); }
/* Alt bilgideki logo da anasayfaya götürür (header'daki `.brand` gibi).
   `align-self: flex-start` şart: `.foot__brand` sütun yönlü ve `stretch`
   hizalı bir esnek kap, bağlantı sütunun TAMAMINI kaplar ve logonun sağındaki
   boşluk da tıklanabilir olurdu. ≤980 px'te blok ortalandığı için hizalama
   orada `center`a döner (bkz. §12). */
.foot__logo {
  display: inline-flex;
  align-self: flex-start;
  border-radius: 10px;
  transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
}
.foot__logo:hover img {
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--brand) 70%, transparent));
}
/* Alt bilgideki bütün metinler ESKİDEN sabit puntoluydu: 1600 px+ ekranlarda
   gövde metni büyürken alt bilgi 12–14 px'te kalıp orantısız küçülüyordu.
   Taban değerler (telefon) korunur, yalnızca üst uç açılır. */
.foot__tag {
  font-size: clamp(0.88rem, 0.24vw + 0.82rem, 1rem);
  color: var(--tx-2);
  text-wrap: pretty;
}

.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.foot__h {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  /* taban --fs-min (12 px) — erişilebilirlik zemini bozulmaz */
  font-size: clamp(var(--fs-min), 0.16vw + 0.71rem, 0.85rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-3);
}
/* ---- sosyal medya ---- */
/* Altı rozet IZGARADA durur, esnek sarmada değil. Esnek sarmayla sütun
   daraldığında son ikon tek başına alt satıra düşüyordu (1024 px'te 5+1) —
   şerit kırık görünüyor. Izgara satır başına düşen sayıyı KESİN belirler:
   geniş sütunda 6, dar sütunda 3+3. */
.foot__social {
  display: grid;
  grid-template-columns: repeat(6, auto);
  justify-content: start;
  gap: 0.45rem;
}
@media (max-width: 1240px) {
  .foot__social { grid-template-columns: repeat(3, auto); }
}
.soc {
  --soc: var(--accent);
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 13px;
  border: 1px solid var(--line-2);
  background: var(--pane);
  color: var(--tx-2);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease),
    border-color 0.3s var(--ease), transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.soc svg { width: 19px; height: 19px; }
/* Marka renkleri her iki temada da beyaz ikonla ≥4.5:1 verir. */
.soc--ig { --soc: #c13584; }
.soc--tt { --soc: #0e9aa7; }
.soc--yt { --soc: #d62222; }
/* Facebook'un marka mavisi (#1877f2) beyaz ikonla 4.23:1 — ikon için gereken
   3:1'i geçer ama bu dosyanın kendine koyduğu 4.5 eşiğinin altında kalır.
   Ton korunup bir basamak koyulaştırıldı: 5.0:1, Instagram'la aynı seviye. */
.soc--fb { --soc: #1668e3; }
/* X ve Threads'in marka rengi siyahtır; koyu temada saf siyah zemin cam
   panelin içinde "delik" gibi durup gölgesi de kayboluyor, bu yüzden orada
   arayüzlerinin kendi koyu grisi kullanılır. İkisi de beyaz ikonla ≥13:1. */
.soc--x,
.soc--th { --soc: #000; }
html[data-theme="dark"] :is(.soc--x, .soc--th) { --soc: #26292e; }
.soc:hover, .soc:focus-visible {
  color: #fff;
  background-color: var(--soc);
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -12px var(--soc);
}

.foot__mail {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: var(--tap);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.9rem, 0.22vw + 0.84rem, 1.02rem);
  color: var(--link);
  /* uzun e-posta adresi dar sütunda taşmasın */
  overflow-wrap: anywhere;
  transition: color 0.3s var(--ease);
}
.foot__mail svg { width: 16px; height: 16px; flex: none; }
.foot__mail:hover { color: var(--tx-1); }
.foot__stores { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* alt bilgideki mağaza rozetleri gövdedekilerden bir tık küçük durur */
.foot__stores .store { padding: 0.46rem 0.9rem 0.46rem 0.72rem; border-radius: var(--r-sm); gap: 0.55rem; }
.foot__stores .store svg { width: 18px; height: 18px; }
.foot__stores .store b { font-size: clamp(0.84rem, 0.18vw + 0.79rem, 0.94rem); }
/* alt yazı gövdedekiyle aynı tabanda kalır — 0.68rem (10.9 px) okunmuyordu */

/* Alt bar tek satırdan ibaret: telif metni ORTALANIR. ("Başa dön" bağlantısı
   kaldırıldı; sağda tek başına durduğu için barı asimetrik bırakıyordu.) */
.foot__bar {
  margin-top: clamp(20px, 2.4vw, 32px);
  padding-top: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid var(--line);
  text-align: center;
}
.foot__meta { font-size: clamp(0.8rem, 0.2vw + 0.75rem, 0.92rem); color: var(--tx-3); }

/* ------------------------------------------------------------ 11. MOTION */
/*
   KAYDIRMAYA BAĞLI ANİMASYON YOKTUR.

   Önceki sürümdeki beş kaydırma animasyonunun tamamı kaldırıldı:
     · `.rv` + IntersectionObserver — "görünüme girince açılma"
     · `depth-*` kare kümeleri — `animation-timeline: view()` ile 3B parallax
     · `sky-depth` — arka plan ışıklarının kaydırmayla ölçeklenmesi
     · `page-in` / `.is-leaving` — sayfa giriş ve çıkış geçişleri
     · `.head__prog` — header'ın altındaki okuma ilerleme çubuğu
   İçerik ilk karede son hâliyle durur; hiçbir öğe `opacity: 0` ile başlamaz.
   Bu yüzden JS kapalıyken de sayfa eksiksiz görünür (eski `.rv` kuralında
   içerik JS olmadan görünmez kalıyordu).

   Sayfada kalan hareketlerin hiçbiri kaydırmaya bağlı değildir:
     · arka plandaki yıldızların parlaması — WebGL, `assets/js/phone.js`
     · `sky-drift` — ışık kompozisyonunun çok yavaş süzülmesi
     · imleç ve odak tepkileri (hover, manyetik buton, kart eğilmesi)
*/
/* manyetik butonlar — transform'u ezmeden çalışsın diye translate kullanılır */
.btn, .card__go, .arrow-link i {
  translate: var(--tx, 0) var(--ty, 0);
  transition: translate 0.25s var(--ease), transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease), background-color 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

/* kart eğilmesi — imleci anında takip etmesi için kısa geçiş süresi */
.grid-4, .grid-3 { perspective: 1400px; }
.card {
  /* `transform-style: preserve-3d` KALDIRILDI: kartın 3B çocuğu yok, tek işi
     her kartı ayrı bir 3B işleme bağlamına sokmaktı — bu da her kartı kendi
     katmanına çıkarıp kaydırmada birleştirme maliyetini artırıyordu.
     Düz bir `rotateX/rotateY` `perspective`li atanın içinde aynı görünür. */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.28s var(--ease), background-color 0.4s var(--ease),
    border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
.card:hover { transform: translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* --------------------------------------------------------- 12. RESPONSIVE */
/*
   Kırılım merdiveni
   ≥1600  geniş masaüstü — kabuk genişler
   1280   dizüstü        — menü sıkışır
   1200   TABLET ÜST UCU — hero iki sütun KALIR ama yeniden dengelenir
   1120   küçük dizüstü  — ızgaralar seyrelir (4→2, 5→3, 6→4)
    980   tablet yatay   — hero tek sütuna iner, telefon sahnesi kalkar
    900   dar tablet     — menü sıkışır
    860   tablet dikey   — iki sütunlu bloklar teke iner
    760   TELEFON        — menü hamburgere döner
    680   büyük telefon  — header küçülür, ızgaralar tek sütun
    520   telefon
    440   dar telefon
    380   küçük telefon
   + yönelim/yükseklik katmanı (tablet dikey, tablet yatay, kısa yatay ekran)

   ---- YÖNELİM NEDEN AYRI BİR KATMAN ----
   Aynı tablet çevrildiğinde iki FARKLI ekran olur; tek başına genişlik bunu
   ayırt edemez. Üç somut örnek:
     · iPad Pro 12.9 DİKEY  1024×1366 — genişlik masaüstü kadar, yükseklik iki
       katı. `min-height: 100svh` hero'yu 1366 px'e uzatıp altındaki bölümü
       katlamanın çok altında bırakıyordu.
     · iPad Pro 12.9 YATAY  1366×1024 — masaüstü kurallarıyla sorunsuz.
     · iPad 10.2 YATAY      1024×768  — genişliği DİKEY iPad Pro ile aynı ama
       yükseklik 768; burada hero'nun dikey payı kısılmalı.
   Bu yüzden 981 px üstünde genişlik kuralları ortak, yükseklik kuralları
   `orientation` ile ayrışır.                                                */

/* uzun Türkçe kelimeler taşmasın */
h1, h2, h3, h4 { overflow-wrap: break-word; text-wrap: balance; }
.hero__lead, .sec__head p, .card p, .faq__a p { text-wrap: pretty; }

@media (min-width: 1600px) {
  :root { --shell: 1480px; }
  .hero__grid { gap: clamp(40px, 4vw, 80px); }
  /* NOT: burada eskiden `.stage { width: min(100%, 880px) }` vardı; 3B sahne
     sütun genişliğine göre ölçüldüğü için geniş ekranda taşıyordu. Maketin
     kendi `max-width: min(54svh, 540px)` sınırı (bkz. §7b `.pset`) bu işi her
     genişlikte yaptığından istisnaya gerek kalmadı. */
}

@media (max-width: 1280px) {
  .nav a { padding: 0 0.85rem; font-size: 0.9rem; }
  .head { padding-left: 1.25rem; }
}

/* ---- IZGARA YOĞUNLUĞU ----
   Menüyle İLGİSİ YOK. Eskiden bu blok hem ızgaraları seyreltiyor hem de
   menüyü hamburgere çeviriyordu; iki iş tek eşiğe bağlıydı ve menü, iki kısa
   bağlantının rahatça sığdığı 1024 px'lik tablette bile gizleniyordu. */
@media (max-width: 1120px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- TABLET (981–1200 px): iPad yatay + iPad Pro dikey ----
   Hero İKİ SÜTUN KALIR — telefon sahnesi bu cihazlarda hero'nun tek görsel
   unsuru ve gizlemek sayfayı düz bir metin bloğuna indiriyor. Sorun sütun
   PAYLAŞIMINDAYDI: masaüstü oranı (0.9fr / 1.1fr) metne 1024 px'te yalnızca
   412 px bırakıyor, `4.35vw`lik başlık (44.5 px) o genişlikte 13ch sınırıyla
   birleşince beş-altı satıra kırılıyordu.
   İki ayar birlikte çözer:
     · oran metin lehine döner (1fr / 0.95fr → 1024 px'te 473 px),
     · başlık ölçüsü `3.6vw`ye iner ve `13ch` sınırı KALKAR — sınırın işi
       başlığı yandaki sahneden ayrı tutmaktı, sütun zaten onu yapıyor.
   Sonuç: "Hayallerden Gerçeğe / MoonVia Labs ile Zirveye!" üç satır. */
@media (min-width: 981px) and (max-width: 1200px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: clamp(20px, 2.6vw, 34px);
  }
  .hero__copy { gap: 1.15rem; }
  .hero__copy h1,
  .hero__copy > h2 {
    font-size: clamp(2.05rem, 3.6vw, 2.7rem);
    max-width: none;
    line-height: 1.1;
  }
  .hero__lead { max-width: 40ch; }
  .hero__sub { max-width: none; }
  /* Maket kutusu kare; sınırı `max-width` verir (bkz. §7b `.pset`).
     54svh, 768 px'lik yatay tablette 414 px — sütun genişliğinin (431 px)
     hemen altında, yani telefonlar katlamayı zorluyordu. */
  .pset { max-width: min(52svh, 460px); }
}

/* ---- TABLET DİKEY (≥981 px, uzun ekran) ----
   iPad Pro dikeyde ekran 1366 px; `100svh`lik hero, altındaki kart şeridinden
   hiçbir şey göstermiyor ve sayfa tek ekranlık bir afiş gibi duruyordu.
   Üst sınır, hero'nun ekranı doldurmasını korur ama uzun ekranda bir sonraki
   bölümün üst kenarını katlamanın içine sokar. */
@media (min-width: 981px) and (orientation: portrait) {
  .hero { min-height: min(100svh, 860px); }
}

/* ---- TABLET YATAY / kısa masaüstü (≥981 px, yükseklik ≤860 px) ----
   1024×768 ve 1180×820'de hero'nun üst payı (84+18+43=145 px) ile alt payı
   birlikte 188 px yiyor; mağaza rozetleri katlamanın altına iniyordu. */
@media (min-width: 981px) and (max-height: 860px) and (orientation: landscape) {
  .hero {
    padding-top: calc(var(--head-h) + var(--head-top) + 20px);
    padding-bottom: 20px;
  }
}

/* NOT: burada eskiden bir `981–1219 px` istisnası vardı; bilgi kartının
   telefon sloganını örtmesini yalnızca o aralıkta düzeltiyordu. Kart artık
   HER genişlikte akışta durduğu için (bkz. §7b `.pset`) istisnaya gerek yok. */

/* ---- TABLET VE ALTINDA HERO + ALT BİLGİ ORTALI ----
   Üst sınır 1200 px, yani tablet bandının tamamı: 768 / 820 / 834 DİKEY ve
   1024 / 1180 / 1194 YATAY. Masaüstü (>1200) sola dayalı kalır — orada satır
   uzunlukları geniş ve ortalanmış uzun metin okumayı zorlaştırır.

   Neden ikisi birden ve neden tek blok:
     · Hero, ≤980'de tek sütuna inince sola dayalı kalıyordu; 981–1200 arası
       iki sütunda da metin sütunun soluna yapışıktı.
     · Alt bilgide hizalama KARIŞIKTI: ≤980'de marka bloğu ortalanıyor ama
       "Sosyal Medya" ve "İletişim" sütunları sola dayalı kalıyordu — aynı
       kartın içinde iki farklı hizalama.
   Tek eşik ikisini de aynı anda düzeltir ve bandın tamamında tutarlı olur.

   1366 px'lik iPad Pro 12.9 YATAY bilerek kapsam DIŞINDA: o genişlik
   masaüstü sınıfı (aynı ölçüde bir dizüstü de var) ve orada sola dayalı
   düzen doğru okunuyor. */
@media (max-width: 1200px) {
  /* --- HERO --- */
  .hero__copy { align-items: center; text-align: center; }
  .hero__lead,
  .hero__sub { margin-inline: auto; }
  .hero__cta,
  .hero__meta { justify-content: center; }
  .stores { align-items: center; }
  .stores__row { justify-content: center; }

  /* --- ALT BİLGİ --- */
  /* `justify-items` ızgara HÜCRESİNİN içeriğini ortalar, `align-items: center`
     ise sütunun kendi esnek çocuklarını; alt bilgi iç içe iki düzen olduğu
     için ikisi de gerekir. */
  .foot__grid { justify-items: center; }
  .foot__brand { align-items: center; text-align: center; margin-inline: auto; }
  .foot__logo { align-self: center; }
  .foot__col { align-items: center; text-align: center; }
  .foot__social,
  .foot__stores { justify-content: center; }
}

@media (max-width: 980px) {
  /* Üst dolgu 28 → 16 px: hero artık kendi dolgusu olan bir cam kartın içinde
     (bkz. `.hero__card` aşağıda); iki dolgu üst üste binince header ile kartın
     arası gereksiz açılıyordu. */
  .hero { min-height: auto; padding-top: calc(var(--head-h) + var(--head-top) + 16px); padding-bottom: 24px; }
  .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pident { flex-wrap: wrap; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* NOT: `.hero__copy { align-items: flex-start }` BURADAN ALINDI. Hero artık
     bütün tablet bandında ortalanıyor (bkz. aşağıdaki ≤1200 px bloğu);
     buradaki sola dayama onu eziyordu. */
  /* Başlık sınırı KALKAR. 13ch, başlığı yanındaki telefon sahnesinden ayrı
     tutmak içindi; sahne gidince aynı sınır başlığı dört satıra kırıp kartın
     sağ yarısını boş bırakıyor. Sınırsız hâlde iki satıra iner ve kartı
     doldurur. (≤680 px'te bu zaten böyleydi.)
     Satır yüksekliği de 1.06'dan 1.14'e çıkar: başlık burada iki değil dört
     satıra kırılıyor, yani iniş kuyruğu / büyük harf teması dört kat daha çok
     yerde oluyor (bkz. §2 `h1`). */
  .hero__copy h1,
  .hero__copy > h2 { max-width: none; line-height: 1.14; }
  /* ---- MOBİLDE HERO'DA TELEFON YOK ----
     Maket iki sütunlu hero için tasarlandı. Tek sütuna inince metnin ALTINA
     düşüyor, katlamanın dışında kalıyor ve dar şeritte orantısız büyüyordu.
     Artık tek kural yetiyor: maket sıradan bir DOM bloğu olduğu için
     `display: none` onu gerçekten kaldırır. (3B sahne döneminde bu yetmiyordu;
     kutu gizlenince ölçüm sıfırlanıp telefonlar sayfanın üstünde yüzüyor,
     asıl gizlemeyi `site.js` → `wantsPhones()` yapıyordu.)
     ARKA PLAN KALIR: yıldızlar ayrı bir katman, mobilde de çiziliyor. */
  .pset { display: none; }

  /* ---- MOBİLDE HERO CAM KARTIN İÇİNDE ----
     Telefon sahnesi kalkınca hero geriye zemine yapışık düz bir metin bloğu
     olarak kalıyor ve sayfanın geri kalanındaki cam yüzeylerden (kart şeridi,
     mağaza bandı, alt bilgi) kopuyordu. Sarmalayıcı burada GERÇEK bir kutuya
     döner; gövdeyi §4'teki `.glass` verir, aşağıdaki kurallar yalnızca ölçüyü
     ve köşe yarıçapını belirler.
     Yarıçap `--r-2xl`: kart, kendisiyle aynı genişlikteki `.strip` ve
     `.foot__card` ile aynı ailedendir, `--r-lg` yanlarında küçük kalıyordu. */
  .hero__card {
    display: block;
    padding: clamp(26px, 5.2vw, 40px) clamp(20px, 4.4vw, 34px);
    border-radius: var(--r-2xl);
  }
  .hero__card::before,
  .hero__card::after { content: ""; }

  /* NOT: hero'nun ikincil butonunu ve mağaza rozet başlığını gizleyen iki
     kural BURADAN ALINDI, ≤680 px'e taşındı. İkisi de "tek sütuna inince
     yer kalmıyor" gerekçesiyle yazılmıştı ama o gerekçe telefonda geçerli:
     768 px'lik tablet dikeyde hero kartının içi 645 px ve iki buton yan yana
     505 px tutuyor — rahatça sığıyorlar. Tablette gizlemek, sayfadaki tek
     doğrudan iletişim çağrısını sebepsiz yere kaldırıyordu. */

  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* üç öğe iki sütuna inince tek kalan sonuncusu satırı doldurur */
  .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* ---- KATALOG FİLTRESİ: DÖRT SÜTUN KALIR, İKONLAR ÇIKAR ----
     768 px'lik tablet dikeyde sütun 170 px'e iniyor; "Mobil Uygulamalar"
     tek satırda 213 px sürdüğü için ikon + boşluk (24 px) sığmayan son
     parçaydı. İkon yalnızca süs — etiket bilgiyi zaten taşıyor. Etiket
     gerektiğinde iki satıra iner (`white-space` bilerek serbest), sütunlar
     eşit kaldığı için düğmeler de eşit yükseklikte kalır. */
  .filt > svg { display: none; }
  .filt { font-size: 0.84rem; padding: 0.5rem 0.6rem; gap: 0.4rem; }

  /* alt bilgi: marka bloğu tam genişlik ve ortalı, geri kalanı iki sütun */
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__brand {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
    max-width: 60ch;
    margin-inline: auto;
  }
  /* Blok ortalanınca logo bağlantısı da ortalanır; masaüstündeki
     `align-self: flex-start` burada onu sola çekerdi. */
  .foot__logo { align-self: center; }
}

/* ---- MENÜ SIKIŞIR (≤900 px) ----
   Hamburger DEĞİL. Menüde iki kısa bağlantı var; çubuk daralınca önce onlar
   sıkışır, çekmeceye ancak gerçekten yer kalmadığında (≤760) geçilir.
   768 px'lik tablet dikeyde hesap: 16 (sol dolgu) + 146 (logo) + 19 (boşluk)
   + 250 (menü) + 158 (araçlar) + 8 = ~597 px; çubuğun içi 712 px. */
@media (max-width: 900px) {
  .head { gap: 0.6rem; padding-left: 1rem; }
  .nav { gap: 0; }
  .nav a { padding: 0 0.7rem; font-size: 0.88rem; }
}

/* ---- TABLET DİKEY (≤860 px) ----
   Sınır 820 DEĞİL 860: iPad Pro 11" dikey 834 px. Eski eşikte 834, 820 ile
   768'in arasına düşüp TEK BAŞINA farklı davranıyordu (iki sütunlu `.grid-2`,
   üç sütunlu `.steps`) — aynı aileden üç tablet, üç ayrı düzen. */
@media (max-width: 860px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .band { padding: clamp(26px, 5vw, 40px); }
  /* Ürün künyesi: logo + ad üstte, mağaza rozetleri altta tam genişlik.
     Önceden rozetler künyenin yanında kalıp adı iki-üç satıra kırıyordu. */
  .pident { flex-wrap: wrap; }
  .pident > .stores__row { flex: 1 1 100%; }
}

/* ---- ÇEKMECE MENÜ (≤760 px) ----
   Eşik 1120'den buraya indi. `.burger` ve `.drawer` bu sürüme kadar CSS ve
   JS'te vardı ama HTML'de YOKTU: 1120 px'in altındaki HER cihazda —bütün
   tabletler ve telefonlar— menü ekrandan tamamen kayboluyordu. İşaretleme
   üç sayfaya da eklendi; eşik de menünün gerçekten sığmadığı yere çekildi.
   Eşiği `site.js` de okur (bkz. `initHeader` → resize). İkisi birlikte
   değiştirilmelidir: ayrışırlarsa çekmece masaüstü genişliğinde açık kalıp
   `body { overflow: hidden }` ile sayfayı kilitler. */
@media (max-width: 760px) {
  .nav { display: none; }
  .burger { display: flex; }
  .tools { margin-left: auto; }   /* menü gizlenince araçlar sağa yaslanır */

  /* ---- KATALOG FİLTRESİ 2×2 ----
     Dört sütun burada bitiyor: 480 px'lik ekranda sütun 105 px'e iniyor ve
     "Mobil Uygulamalar" üç satıra kırılıyor. 2×2 ızgarada en dar telefonda
     bile iki satırı geçmez. Şerit daralıp ORTALANIR — tam genişlikte iki
     kocaman düğme, altındaki ürün kartlarından daha baskın duruyordu.
     Kabın yarıçapı hap değil `--r-xl`: iki sıralı bir kutuda hap kenarları
     köşelerdeki düğmelerin altında boş yarım aylar bırakıyor. */
  .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* İki SIRA eşit yükseklikte. Varsayılanda her sıra kendi içeriğine göre
       ölçülüyor; "Mobil Uygulamalar" iki satıra indiği için alt sıra üst
       sıradan yüksek kalıyor ve dört düğme aynı denetimin parçası gibi
       durmuyordu. */
    grid-auto-rows: 1fr;
    max-width: 460px;
    border-radius: var(--r-xl);
  }
}

@media (max-width: 680px) {
  :root { --head-h: 68px; --head-top: 12px; }
  .head { padding: 0 0.42rem 0 1rem; }
  .brand img { width: 124px; }
  .lang { font-size: 0.82rem; }
  .theme { width: 62px; height: 34px; }
  .theme .knob { width: 27px; height: 27px; }
  html[data-theme="dark"] .theme .knob { transform: translateX(30px); }
  .tools { gap: 0.45rem; }

  .grid-4, .grid-3, .stats, .steps, .specs { grid-template-columns: minmax(0, 1fr); }
  .card { min-height: 0; padding-bottom: 4.2rem; }

  /* ---- hero'da İKİNCİL BUTON telefonda YOK ----
     (≤980'den buraya taşındı.) Aşağıdaki `.hero__cta .btn { flex: 1 1 100% }`
     kuralı TAM BURADA başlıyor: iki buton alt alta tam genişlik alıyor ve eşit
     ağırlıkta iki çağrı, birincil eylemi gölgeliyor. İletişim yolu kaybolmaz —
     çekmece menüdeki "Bize Ulaşın" ve alt bilgideki e-posta yerinde duruyor.
     Seçici `.hero__copy` ile daraltılmıştır — `.hero__cta` ürün sayfalarındaki
     `.band` şeridinde de kullanılıyor, oradaki butonlar etkilenmez. */
  .hero__copy .hero__cta .btn--ghost { display: none; }

  /* ---- HERO'DA MAĞAZA ROZETLERİ TELEFONDA YOK ----
     App Store / Google Play rozetleri hero'nun en altında, tek sütunda tam
     genişlik alarak duruyordu; birincil eylemle ("Dijital Ürünlerimizi
     Keşfedin") aynı ağırlıkta üç yığılı düğme, katlamayı tek başına
     dolduruyordu. Rozetler kaybolmuyor: hemen alttaki mağaza şeridinde
     (`.band .stores__row`) ve alt bilgide (`.foot__stores`) duruyorlar.
     Seçici `.hero__copy` ile daraltılmıştır — şeritteki ve alt bilgideki
     eşleri bu kuraldan etkilenmez.
     Başlık rozeti (`.stores__pill`) de kapsam içinde kalır: kap gidince
     zaten görünmez, ayrı kurala gerek yok. */
  .hero__copy .stores { display: none; }

  /* ---- TELEFONDA HER ŞEY ORTADA ----
     Hero'nun ortalanması artık tablet bandında da geçerli (bkz. ≤1200 px
     bloğu); burada yalnızca telefona özgü ölçüler kalır. */
  .hero__copy h1,
  .hero__copy > h2 { max-width: none; }
  .hero__lead { max-width: 46ch; }
  /* Mağaza rozetleri, üstlerindeki butonlar ve alt bilgideki eşleri gibi TAM
     GENİŞLİK alır.
     Ortalama kuralı (`align-items: center`) sütun yönlü esnek kaplarda
     çocukları içerikleri kadar daraltıyor; `.stores__row`daki `width: 100%`
     de bu daralmış kabın %100'ünü ölçtüğü için etkisiz kalıyordu — rozetler
     390 px'te 306 px'te takılıp butonlardan (350 px) dar duruyordu.
     `align-self: stretch` daralmayı iptal eder.
     Seçiciler bilerek dar: `.pident > .stores__row` SATIR yönlü bir kabın
     içinde, orada `stretch` dikeyde çalışıp rozeti uzatırdı. */
  .hero__copy .stores,
  .hero__copy .stores__row,
  .band .stores__row { align-self: stretch; width: 100%; }
  .sec__head { justify-content: center; text-align: center; }
  .sec__head .eyebrow { justify-content: center; }
  .sec__head p { margin-inline: auto; }
  .pident { justify-content: center; text-align: center; }
  .pident__logo { margin-inline: auto; }
  .pident .chips { justify-content: center; }

  .hero__cta { width: 100%; justify-content: center; }
  /* Etiket butonun TAM ortasında durur: ikon akıştan çıkarılır (sağ kenara
     sabitlenir), dolgu iki yanda eşitlenir. `justify-content: space-between`
     ile etiket sola yapışıyordu. Dikey ortalama `transform` yerine otomatik
     kenar boşluğuyla yapılır — `transform`ı hover ve manyetik imleç efekti
     zaten kullanıyor. */
  .hero__cta .btn {
    flex: 1 1 100%;
    justify-content: center;
    padding-inline: calc(var(--btn-i) + var(--btn-pad-r) + 0.6rem);
  }
  .hero__cta .btn i {
    position: absolute;
    right: var(--btn-pad-r);
    top: 0; bottom: 0;
    margin-block: auto;
  }

  .stores__row { width: 100%; justify-content: center; }
  .stores__row .store { flex: 1 1 calc(50% - 0.35rem); }
  /* Rozet tam genişliğe yayıldığında ikon ve yazı kutunun soluna yapışıyordu. */
  .store { justify-content: center; }
  /* Alt bilgide rozetler tam genişliğe yayılmaz: 521–680 px'te alt bilgi iki
     sütunlu ve sola dayalı, orada içerikleri kadar kalmaları gerekiyor. */
  .foot__stores .store { flex: 0 1 auto; }
  .store b { white-space: nowrap; }

  .foot__grid { gap: 1.8rem 1.4rem; }
  .foot__card { padding-inline: clamp(18px, 5vw, 26px); }

  /* ekran görüntüleri: mağaza listelerindeki gibi yatay kaydırmalı şerit */
  .shots {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .shots::-webkit-scrollbar { display: none; }
  .shot { flex: 0 0 clamp(150px, 44vw, 200px); scroll-snap-align: start; }
  /* Şerit yatay kaydırılıyor; ipucu gizlenirse bunu gösteren hiçbir şey
     kalmıyordu. Gizlemek yerine satır kırılmasına izin verilir. */
  .shots__note { white-space: normal; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* SIRA ÖNEMLİ: 520 bloğu 440'tan ÖNCE gelir. Eşit özgüllükteki kurallarda
   sonra yazılan kazanır; ters sırada 440'taki düzeltmeler 520 tarafından
   eziliyordu. */
@media (max-width: 520px) {
  h1, .hero__copy > h2 { font-size: clamp(2.05rem, 9vw, 2.6rem); }
  h2 { font-size: clamp(1.55rem, 7vw, 2rem); }
  .hero__sub { font-size: 1.05rem; }
  /* NOT: burada hero görseli için bir yükseklik kuralı vardı; maket 980 px'in
     altında zaten gizli olduğu için kaldırıldı (bkz. §12, ≤980 px). */
  .drawer a { font-size: 1.2rem; }
  /* iki dar sütun yerine tek sütun: 520 px'te "Mağazalar" rozetleri kendi
     sütununa sığmıyordu */
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  /* Tek sütunda her blok ortalanır — sola dayalı bloklar kartın içinde
     kopuk duruyordu. */
  .foot__col { align-items: center; text-align: center; }
  .foot__social, .foot__stores { justify-content: center; width: 100%; }
  /* Tek sütunda rozetler tam genişlik alır AMA içerikleri ortalanır. Yalnızca
     genişletmek yetmiyordu: ikon ve yazı kutunun soluna yapışıp ortalanmış
     sütunun içinde hizasız duruyordu. */
  .foot__stores .store { flex: 1 1 100%; justify-content: center; }

  /* NOT: Dil seçimi burada GİZLENMİYOR. Eskiden `.tools > .lang { display: none }`
     ile çekmeceye devrediliyordu; çekmece (`.burger` + `.drawer`) işaretlemesi
     sayfalarda bulunmadığı için EN/TR telefonda tümden kayboluyordu. Seçim artık
     çubukta, tema anahtarının solunda kalıyor. */
}

@media (max-width: 560px) {
  /* ---- BÜYÜTME PENCERESİ: oklar görselin YANINDAN ALTINA iner ----
     Pencere üç sütunlu bir ızgara: ok · görsel · ok. Dar ekranda iki düğme
     (2×48) + boşluklar (2×16) + dolgu (2×16) = 160 px'i görselden alıyor;
     360 px'lik telefonda 1080×1920'lik bir ekran görüntüsüne 200 px kalıyor,
     yani büyütme penceresi görseli KÜÇÜLTÜYORDU.
     Tek sütuna inip okları alt şeride almak görsele tam genişliği verir. */
  .lb {
    grid-template-columns: minmax(0, 1fr);
    padding:
      clamp(56px, 14vw, 72px)
      max(12px, env(safe-area-inset-right, 0px))
      calc(clamp(16px, 4vw, 28px) + 62px + env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }
  .lb__img { grid-column: 1; max-width: 100%; }
  /* Düğmeler sayacın iki yanında: merkezden ±52 px, aralarındaki 104 px'lik
     boşluk sayacın (≈50 px) yeri. Toplam 192 px — 280 px'lik kapak ekranında
     bile sığar. */
  .lb__nav {
    position: absolute;
    bottom: calc(clamp(14px, 3vw, 28px) + env(safe-area-inset-bottom, 0px));
    left: 50%;
    width: 44px; height: 44px;
  }
  .lb__prev { transform: translateX(calc(-100% - 52px)); }
  .lb__next { transform: translateX(52px); }
  /* Sayaç düğmelerle aynı satırda; 11 px onları dikeyde ortalar (44/2 − 20/2). */
  .lb__n { bottom: calc(clamp(14px, 3vw, 28px) + 11px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 440px) {
  /* "Google Play" iki satıra kırılmasın diye mağaza rozetleri alt alta */
  .stores__row .store { flex: 1 1 100%; }
}

@media (max-width: 380px) {
  :root { --gutter: 16px; --head-h: 62px; --head-top: 10px; }
  /* 280 px'lik kapak ekranında tam genişlikteki butonun etiketi kutusundan
     7 px taşıp kırpılıyordu (`.btn` overflow:hidden + nowrap). Dolgu kısılır
     VE emniyet olarak sarma açılır: daha uzun bir etiket geldiğinde kırpmak
     yerine iki satıra iner. */
  /* `:not(.btn--sm)`: eski kural küçük butonların 27 px'lik ikonunu da
     30 px'e çıkarıyordu (aynı özgüllük, sonra yazıldığı için kazanıyordu). */
  .btn:not(.btn--sm) { --btn-i: 30px; padding-left: 1.1rem; gap: 0.5rem; }
  .hero__cta .btn { white-space: normal; }
  .hero__cta .btn > span { text-align: center; }
  h1, .hero__copy > h2 { font-size: 1.92rem; letter-spacing: -0.03em; }
  .brand img { width: 104px; }
  /* Dil seçimi bu genişlikte de çubukta kalır (bkz. ≤520 px'teki not). 320 px'lik
     kapak ekranında logo + EN/TR + tema anahtarı yan yana ~281 px tuttuğu için
     yazı bir tık küçülür; `.head { overflow: hidden }` olduğundan taşan parça
     sessizce kırpılırdı. Dolgu korunur, dokunma alanı 24 px'in altına inmez. */
  .lang { font-size: 0.78rem; }
  .pill { font-size: 0.76rem; padding: 0.45rem 0.9rem 0.45rem 0.75rem; }
  /* 280 px'lik kapak ekranında 2×2 şeridin sütunu 115 px'e iniyor. Etiket,
     dolgu ve rozet birlikte kısılır; hiçbiri 12 px'lik okunabilirlik
     tabanının (bkz. §1 `--fs-min`) altına inmez. Rozet GİZLENMEZ: "0 ürün"
     bilgisi, kategoriye basıp boş kutuyu görmekten daha hızlı. */
  .filt { font-size: 0.78rem; padding: 0.5rem 0.35rem; gap: 0.3rem; }
  .filt__n { min-width: 18px; padding: 0 0.25rem; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .foot__brand img { width: 124px; }
}

/* ---- KAPAK EKRANI (≤320 px) ----
   Yukarıdaki ≤380 bloğunun notu "yazı bir tık küçülür, taşan parça
   kırpılmaz" diyor ama ölçüm bunu doğrulamıyordu: 280 px'te logo (104) +
   EN/TR (≈60) + tema anahtarı (62) + boşluklar, çubuğun içine sığan
   225 px'i 28 px aşıyor ve `.head { overflow: hidden }` FAZLALIĞI SESSİZCE
   KESİYORDU — kesilen şey tema anahtarının sağ yarısıydı, yani kullanıcı
   temayı değiştiremiyordu.
   Kayıp tek bir yerden değil, hepsinden azar azar alınır: çubuk dolgusu,
   iki öğe arasındaki boşluk, EN/TR'nin yatay dolgusu ve anahtarın ölçüsü.
   Anahtar 52×30'a inse de topu (24 px) ve dokunma alanı 24 px'in üstünde
   kalır (WCAG 2.5.8). Logo KÜÇÜLTÜLMEZ: 104 px, srcset'teki en küçük
   adayla birebir eşleşiyor (bkz. §6 `.brand img`), aradaki her değer
   yeniden ölçekleme bulanıklığı demek.
   Eşik 320: taşma ~305 px'in altında başlıyor, 320 px de (iPhone SE 1.
   kuşak, kapak ekranları) bu ölçülerle rahat duruyor. */
@media (max-width: 320px) {
  .head { gap: 0.4rem; padding: 0 0.35rem 0 0.6rem; }
  .tools { gap: 0.3rem; }
  .lang button { padding: 0.3rem 0.28rem; }
  .theme { width: 52px; height: 30px; padding: 0 8px; }
  .theme .knob { width: 24px; height: 24px; }
  html[data-theme="dark"] .theme .knob { transform: translateX(22px); }
}

/* kısa yatay ekranlar (telefon yatay, küçük dizüstü) */
@media (max-height: 620px) and (min-width: 700px) {
  .hero { min-height: 0; padding-top: calc(var(--head-h) + var(--head-top) + 24px); padding-bottom: 32px; }
  .pset { max-width: min(58vh, 420px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  /* Telefon YATAY. Genişlik 700–930 px arasına çıktığı için genişlik tabanlı
     merdiven bu ekranı "tablet" sayıyor ve 84 px'lik çubuğu veriyordu:
     390 px'lik ekranın beşte biri yalnızca header. Ölçüler ≤680 px'teki
     telefon değerlerine çekilir — kırılım genişlikten değil YÜKSEKLİKTEN
     geldiği için sayfanın geri kalanı olduğu gibi kalır. */
  /* Bölüm ritmi de kısılır: `--sp-sec` 7vw tabanlı ve yatay telefonda genişlik
     büyük olduğu için 65–104 px'e çıkıyor — ekranın dörtte biri boşluk. */
  :root {
    --head-h: 62px;
    --head-top: 10px;
    --sp-sec: clamp(40px, 5vw, 60px);
    --sp-tight: clamp(26px, 3vw, 38px);
  }
  .hero { min-height: 0; }
  .pset { max-width: min(56vh, 300px); }
  /* Çekmece: iki bağlantı + araç satırı 390 px'e sığmıyor, üst pay kısılır. */
  .drawer { padding-top: calc(var(--head-h) + var(--head-top) + 14px); }
  .drawer a { padding: 0.62rem 0; font-size: 1.15rem; }
}

/* Dokunmatik cihazlarda hover efektleri yapışmasın: dokunulan öğe, başka bir
   yere dokunulana kadar `:hover` durumunda KALIR. */
@media (hover: none) {
  .card:hover, .row-card:hover, .store:hover, .stat:hover, .panel:hover { transform: none; }
  /* Işık bulutu da sönük tabanında kalır (eski `--sa` sıfırlamasının yerine —
     hover artık `::after` opaklığıyla yapılıyor, bkz. §4). Odak hâli DIŞARIDA
     bırakıldı: klavye/ekran okuyucu ile gezinen kullanıcıya geri bildirim
     gerekir, o dokunuşla yapışmaz. */
  .glass:hover::after, .card:hover::after, .panel:hover::after,
  .row-card:hover::after, .stat:hover::after, .store:hover::after { opacity: 0.5; }
}

@media print {
  #gl, .sky, .head, .drawer, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .faq__i { border-color: #ccc; }
  .faq__a { display: block !important; }
}

/* Hareket azaltma tercihi: geriye kalan süslemeler de (yıldızların parlaması
   dahil, bkz. `phone.js`) durur. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  /* İMLECE BAĞLI YER DEĞİŞTİRMELER DE DURUR.
     Süreyi sıfırlamak bunlar için yetmiyor, tersine çeviriyordu: kart eğilmesi
     ve manyetik buton değerlerini `site.js` her fare hareketinde yeniden
     yazıyor: geçiş süresi 0 olunca yumuşama kalkıyor ve öğe imlecin altında
     kare kare SIÇRIYOR — hareket azaltma isteyen kullanıcı için efektin en
     rahatsız hâli. Değerler burada tamamen yok sayılır; hover'ın rengi ve
     çerçevesi (hareketsiz geri bildirim) yerinde kalır. */
  .card, .card:hover,
  .row-card:hover, .store:hover, .stat:hover, .panel:hover { transform: none; }
  .btn, .card__go, .arrow-link i { translate: none; }
  .card:hover .card__go, .arrow-link:hover i { transform: none; }
  .card:hover .ico { transform: none; }
  /* ---- HEADER GİZLEME BURADA KAPATILMAZ ----
     Önceki sürümde `.head.is-away { --head-shift: 0px }` vardı; yani hareket
     azaltma tercihi açık olan kullanıcıda çubuk kaydırmada HİÇ gizlenmiyordu.
     Gerekçe "geçişsiz gizleme daha rahatsız edici" idi — savunulabilir bir
     yorum ama sonucu, işletim sisteminde animasyonları kapatmış herkesin
     özelliği tamamen kaybetmesiydi (Windows'ta "Animasyonları göster"
     kapalıysa bu tercih açık sayılır ve bu hiç de nadir değil).
     Doğru denge: DAVRANIŞ korunur, HAREKET kaldırılır. Yukarıdaki genel kural
     geçiş sürelerini zaten 0.001 ms'ye indiriyor, bu yüzden çubuk kaymadan,
     anında görünmez olur — tercihe uyulur, özellik çalışır. */
}

/* Yüksek kontrast tercihi: tasarımın tamamı SAYDAM yüzeylere dayanıyor —
   kartın nerede bitip zeminin nerede başladığını yalnızca çok soluk bir çizgi
   söylüyor. Bu tercihi açan kullanıcı için sınırlar görünür hâle gelir ve
   kenardaki süs katmanları (kromatik sapma, sıvı halka) kısılır; ikisi de
   sınırı okumayı kolaylaştırmıyor, tersine bulanıklaştırıyor.
   Seçicilerin `:root` DEĞİL tema seçicileriyle yazılması şart: `--line`i
   `html[data-theme="..."]` (0,1,1) tanımlıyor, `:root` (0,1,0) onu ezemezdi. */
@media (prefers-contrast: more) {
  :root, html[data-theme="dark"] {
    --line: rgba(255, 255, 255, 0.30);
    --line-2: rgba(255, 255, 255, 0.48);
    --pane: rgba(255, 255, 255, 0.09);
    --tx-2: #c3cee3;
    --tx-3: #a9b6ce;
  }
  html[data-theme="light"] {
    --line: rgba(40, 32, 18, 0.38);
    --line-2: rgba(40, 32, 18, 0.55);
    --pane: rgba(255, 253, 248, 0.90);
    --tx-2: #37352f;
    --tx-3: #47443d;
  }
  :is(.glass, .card, .panel, .row-card, .stat, .store, .head)::after { opacity: 0.15; }
  :is(.glass, .card, .panel, .row-card, .stat, .store, .head, .pill, .tag,
    .btn--ghost, .theme)::before { opacity: 0.5; }
  :focus-visible { outline-width: 3px; }
}

/* WebGL yoksa boş tuval sayfanın üstünde durmasın. Hero görselinin bununla
   ilgisi kalmadı: telefon maketi saf CSS (bkz. §7b `.pset`), tuvalde artık
   yalnızca yıldızlar var. */
html.no-gl #gl { display: none; }