/* ============================================================================
   Sleep.css — YALNIZ /uyku
   Şablon: Pages/Site/Sleep.html · Davranış: Js/Site/Sleep.js

   Features.css · Categories.css · Growth.css'in kurduğu desen: sayfaya özel
   kurallar sayfaya özel dosyada yaşar, Site.css'e bir satır bile eklenmez.
   Bu dosya gelirken Site.css'ten eski tasarımın ölü kuralları SİLİNDİ
   (`.mode-grid` / `.mode-card` / `.sound-chip*` / `.sound-more` /
   `.sleep-why*` — sonuncusu zaten hiçbir şablonda geçmiyordu).

   TASARIM SİSTEMİNDEN NE ÖDÜNÇ ALINDI: token'ların tamamı, `.eyebrow`,
   `.container`, `.section`, `.sec-head`, `.reveal`, `.safety-note`, gece
   paneli token'ları (`--night-*`) ve telefon mockup'ı (`.phone--mini` +
   `.phone-wrap--lg`, Components/Site/PhoneSleep.html). Yeni font yok, yeni
   kütüphane yok, yeni görsel varlık yok.

   RENK: zemin lacivert gece (`--night-bg` ailesi), ışıklar mavi-mor, iki
   sıcak ay ışığı tonu (kolik · yeni doğan). Tonlar `SLEEP_BENTO[*].tint`ten
   gelir ve kartın kendi `--sx-c` değişkenine ŞABLONDA yazılır.

   İÇİNDEKİLER
     1) Kabuk + ortak parçalar (yıldızlar, dalga, not satırı)
     2) Hero — gece zemini, iki kolon, ürün ekranı
        + navbar hero'nun üstündeyken krem (`.nav.is-over-night`)
     3) Hazır modlar — asimetrik bento
     4) Oynatıcı — seçili ses + kontroller + 18 seçim düğmesi
     5) Gece rutini — üç satır
     6) Responsive (mobilde bento yatay kaydırılır)
     7) prefers-reduced-motion
============================================================================ */

/* KOYU YÜZEYLERDE SİS (2026-09-02, kullanıcı kararı: "koyu alanlarda puslu
   görüntü var, dark modda daha çok belli oluyor — genel olarak çöz").

   TEK MEKANİZMA, ÜÇ BİÇİM. Sisi yapan şey rengin kendisi değil, koyu bir
   yüzeyin üstündeki GENİŞ ve YUMUŞAK ışık rampalarıydı: (1) bulanık haleler
   (`filter: blur(46px)`), (2) geniş beyaz iç parlamalar
   (`inset ... rgba(255,255,255,.26)`), (3) menzili büyük zemin gradyanları.
   Açık bir zeminde aynı rampa "ışık" okunur, çünkü göz onu çevredeki keskin
   kenarlara göre yerleştirir; KOYU bir yüzeyde tutunacak kenar yoktur ve düşük
   kontrastlı yumuşak bir rampa doğrudan SİS okunur. Şikâyetin iki temada da
   var olup koyu temada büyümesinin sebebi bu — koyu temada sayfanın kendisi de
   koyu, yani sisi sınırlayan son kenar da gider.

   Bu yüzden kısma HER ÜÇ BİÇİMDE BİRDEN yapıldı. Yalnız birini kısmak daha
   önce iki kez denendi (hale %52 → %26 → %15, renkli gölge %62 → %30) ve
   şikâyet her seferinde geri geldi: sis toplamdan doğuyor, tek katmandan
   değil — birini kısınca kalan ikisi aynı işi görüyor.

   KISILMAYAN: yastık (kabarıklık) reçetesi. Kullanıcı kararı — hacim kalsın,
   yalnız halesi insin. Uygulaması da tam olarak bu: geniş beyaz iç parlama
   gitti, 1px'lik keskin üst ışık çizgisi ve alt iç gölge DURUYOR. Zaten
   dosyanın kendi notu da bunu söylüyordu ("göz bir kabarıklığı kenarından
   okur"); geniş hale büyük yüzeyde hacim değil sis üretiyordu. */

/* ----------------------------------------------------------------------------
   1) Kabuk + ortak parçalar
---------------------------------------------------------------------------- */
.sx {
  /* Gece yüzeyleri: kart zemininin iki durağı ve okunur iki mürekkep.
     `--night-tx` / `--night-tx2` Site.css'ten; burada yalnız zemin durakları
     tanımlanır, çünkü bu kartlar `.night` panelinden daha koyu olmak zorunda
     (sayfa zemini AÇIK, panelinki değil). */
  --sx-deep:  #0A1230;
  --sx-mid:   #101A3E;
  --sx-line:  rgba(255,255,255,.13);
}

/* Ekran okuyucuya yazılan, gözle görünmeyen etiket. Sitede başka bir
   görsel-gizli sınıf yok; oynat/duraklat butonunun metni buna muhtaç
   (ikon tek başına ne yaptığını söylemiyor). */
.sx-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Yıldız alanı — `.night-stars`ın bu sayfadaki karşılığı. Kendi kuralı var
   çünkü hero tam genişlikte ve yıldızlar oynatıcı panelinde de geçiyor. */
.sx-stars {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  /* Yıldızlar 2026-09-01'de BELİRGİNLEŞTİRİLDİ (kullanıcı kararı): hero zemini
     koyulaşıp `.sx-glow` ve ay hale'si kısılınca gecenin dokusunu tek başına
     yıldızlar taşıyor — noktalar büyütüldü, alfalar yükseltildi, dört yıldız
     eklendi ve parıltının tabanı .45 → .62 (dipte kaybolmasınlar). */
  background-image:
    radial-gradient(2px 2px   at 11% 24%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1.6px 1.6px at 27% 62%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(2.4px 2.4px at 48% 16%, rgba(255,255,255,.90), transparent 60%),
    radial-gradient(1.7px 1.7px at 63% 48%, rgba(255,255,255,.80), transparent 60%),
    radial-gradient(2.1px 2.1px at 82% 22%, rgba(255,255,255,.92), transparent 60%),
    radial-gradient(1.6px 1.6px at 37% 86%, rgba(255,255,255,.68), transparent 60%),
    radial-gradient(1.9px 1.9px at 91% 70%, rgba(255,255,255,.78), transparent 60%),
    radial-gradient(1.7px 1.7px at 6% 82%, rgba(255,255,255,.70), transparent 60%),
    radial-gradient(1.5px 1.5px at 19% 44%, rgba(255,255,255,.66), transparent 60%),
    radial-gradient(2px 2px   at 71% 10%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 74%, rgba(255,255,255,.62), transparent 60%),
    radial-gradient(1.8px 1.8px at 96% 42%, rgba(255,255,255,.74), transparent 60%);
  animation: sxTwinkle 5.5s ease-in-out infinite alternate;
}
.sx-stars--in { opacity: .55; }
@keyframes sxTwinkle { from { opacity: .62; } to { opacity: 1; } }

/* ---- Dalga göstergesi -------------------------------------------------------
   Çubuklar `scaleY` ile nefes alır, `height` ile DEĞİL: yükseklik animasyonu
   her karede düzeni yeniden hesaplatır ve altı bento kartında aynı anda
   dönerken gözle görülür şekilde takılır. Gecikme şablondan gelen `--i` ile,
   `:nth-child` ile değil — çubuk sayısı iki yerde farklı (7 · 15). */
.sx-wave {
  display: inline-flex; align-items: center; gap: 5px; height: 20px;
}
.sx-wave i {
  display: block; width: 3px; height: 100%;
  border-radius: var(--r-full); transform-origin: 50% 50%;
  background: color-mix(in oklch, var(--sx-c, #6CB4FF) 55%, white);
  opacity: .8;
  transform: scaleY(.3);
  animation: sxWave 1.9s ease-in-out infinite alternate;
  /* GECİKME ADIMI DÖNGÜNÜN TAM KATI OLMAMALI. `alternate` ile döngü 3.8s;
     adım küçük olduğunda (340ms denendi) yedi çubuk sırayla yükselen bir
     MERDİVEN, döngünün tam böleni olduğunda simetrik bir TEPE çiziyor —
     ikisi de ses değil grafik okunuyor. 2.32s ≈ döngünün altın oranı: kalan
     her çubukta farklı bir yere düşer, dizilim tekrar etmez ve gösterge bir
     ekolayzır gibi dağınık durur. */
  animation-delay: calc(var(--i, 0) * -2.32s);
}
.sx-wave--lg { height: 36px; gap: 5px; }
.sx-wave--lg i { width: 4px; }
@keyframes sxWave {
  from { transform: scaleY(.18); }
  to   { transform: scaleY(1); }
}

/* Not satırı — "ekranlar uygulamanın kendisinden, ses burada çalmaz".

   ARTIK DİPNOT DEĞİL, ÇİP (kullanıcı kararı, 2026-09-10). Eski hâli en soluk
   mürekkeple (`--tx3`), en küçük punto ile (`--fs-sm`), kutusuz ve ortalanmış
   duruyordu — yani sayfanın en az okunan satırıydı; oysa cümlenin işi tam
   olarak bir SÜRPRİZİ ÖNLEMEK: üstündeki oynatıcı gerçekten çalışıyor, 18
   düğme gerçekten seçiliyor ve hiç ses çıkmıyor. Görülmeyen bir uyarı, o
   ziyaretçi için sayfayı bozuk gösterir.

   Vurgu PUNTOYU BÜYÜTEREK değil KENAR vererek geldi: gövde ölçeği (`--fs`)
   + `--tx2` mürekkep + oynatıcının kendi mavisiyle (`--sx-c`) çizilmiş ince
   bir hap. Bölümün asıl kahramanı panelin kendisi; not onunla yarışmamalı,
   yalnız görünmeli. İkon (`fa-volume-mute`) cümlenin ta kendisini söyler ve
   `aria-hidden` — ekran okuyucu metni zaten okuyor. */
.sx-note {
  --sx-c: #6CB4FF;
  margin: 20px auto 0; max-width: 58ch;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 11px 20px;
  border-radius: var(--r-full); text-align: center; text-wrap: balance;
  font-size: var(--fs); font-weight: 600; color: var(--tx2);
  background: color-mix(in srgb, var(--sx-c) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--sx-c) 40%, transparent);
}
.sx-note i { flex: none; font-size: 1.05em; color: #2E8BF7; }
[data-theme="dark"] .sx-note i { color: var(--sx-c); }
@media (max-width: 560px) {
  .sx-note { padding: 12px 16px; font-size: var(--fs-md); }
}

/* ----------------------------------------------------------------------------
   2) Hero — tam genişlikte gece zemini, iki kolon

   ÜST DOLGUYA `--nav-h` DAHİLDİR: navbar `position: fixed`, sayfa akışında hiç
   yer kaplamıyor ve hero `top: 0`dan başlıyor. Düz bir dolguyla telefonun
   tepesi navbar'ın altında kalır.

   ALT KÖŞELER YUVARLAK: Kidlio'nun yuvarlak dili tam genişlikte bir bantta da
   sürsün diye. Bu, kapanış CTA'sındaki "tam genişlik bant yasak" kuralına
   aykırı DEĞİL — o kural ortalanmış kutunun yerine geçen bir bandı yasaklar;
   burada bant hero'nun kendisi, yani sayfanın ilk ekranı.
---------------------------------------------------------------------------- */
/* SAYFANIN SCROLLBAR'I GECE RENGİNDE (kullanıcı kararı, 2026-09-01): sistem
   scrollbar'ının beyaz rayı, tam genişlikteki lacivert hero'nun sağında dik
   beyaz bir şerit bırakıyordu. Kural `html`e yazılabiliyor çünkü bu dosya
   YALNIZ /uyku şablonundan yükleniyor — kapsam dosyanın kendisi (navbar'ın
   `.nav.is-over-night` kuralıyla aynı gerekçe). İki temada da aynı: sayfanın
   kimliği gece. */
html {
  scrollbar-color: #33437A #0E1737;
}

.sx-hero {
  position: relative; overflow: hidden;
  /* AYIN ÇAPI VE ÜST OFSETİ TEK YERDE. İkisi de aşağıda iki ayrı yerde
     kullanılıyor: `.sx-moon`un kendi ölçüsünde ve 1020px altında hero'nun üst
     dolgusunda (ay orada başlığın üstündeki banda geçer, dolgu o bandı açar).
     Sayılar elle iki yere yazılırsa bant ayla ayrışır ve ay yine başlığın
     üstüne düşer — 2026-09-06'da tam olarak bu oldu: dolgu `--nav-h + 20px`,
     ay `--nav-h + 18px`ten başlayıp 54px iniyordu, yani başlık ayın içinden
     başlıyordu (360-900px arasındaki HER genişlikte, iki dilde de). */
  --sx-moon-d: clamp(54px, 6vw, 80px);
  --sx-moon-top: 18px;
  /* İlk-ekran denetimi (2026-08-30): 26/4vw/54 → 16/2.6vw/34, alt
     32/4.5vw/62 → 22/3.2vw/40 — hero altındaki mod bentosu fold'a yaklaştı
     (184px'lik ölü bandın hero payı). */
  padding: calc(var(--nav-h) + clamp(16px, 2.6vw, 34px)) 0 clamp(22px, 3.2vw, 40px);
  /* `var(--night-bg)` DEĞİL (kullanıcı kararı, 2026-09-01): o token'ın parlak
     ucu (#23346B, sol üst) kısa gece bantlarında (`.night`, `.gx-trust`)
     çalışıyor ama tam ekran bir hero'da büyük bir alan kaplayıp yüzeyi
     METALİK okutuyordu — `.sx-glow` kaldırıldıktan sonra kalan tek parlaklık
     oydu. Referans, Gelişim'in güven bandının baskın koyu tonu: aynı
     lacivertler (#14204A → #0C1533), tepede yalnız bir nefes açıklık. */
  background: radial-gradient(130% 150% at 22% -8%, #1B2A57 0%, #13204A 42%, #0C1533 100%);
  color: var(--night-tx);
  border-radius: 0 0 clamp(22px, 3.5vw, 42px) clamp(22px, 3.5vw, 42px);
}

/* İlk-ekran denetimi (2026-08-30): hero'yu izleyen ilk bölümün 104px üst
   dolgusu, hero alt dolgusuyla üst üste binip 1440×900'de 184px'lik ölü bant
   açıyordu (telefonun oynatıcı barı 716'da bitiyor, mod bentosu fold'un
   altındaydı). Yalnız hero KOMŞUSU kısıldı (kapanış kutusunun
   `.section:has(+ .cta-sec)` deseninin hero tarafındaki karşılığı); 761px
   altında blok hiç geçmez — mobil .section ritmi (44px) ölçülü hâliyle
   kaldı. `+` komşuluk seçicisi: hero ile bu bölüm arasında DOM'da öğe yok. */
@media (min-width: 761px) {
  .sx-hero + .sx-sec { padding-top: 48px; }
}

/* Ay — sıcak ay ışığı, gece zemininin tek sıcak lekesi (`.night-moon`un aynı
   dili). SOL ÜSTTE, sağda DEĞİL: sağ kolon telefonun ve telefon konteynerin
   sağ kenarına kadar geliyor — ayın oradaki yeri (ilk hâli) ekranın köşesine
   biniyordu. Sol üst, kopya bloğunun ÜSTÜNDEKİ boşluk: kompozisyon dengelenir
   (sol üstte ay, sağ altta ekran) ve hiçbir metnin arkasına düşmez. */
.sx-moon {
  position: absolute; top: clamp(96px, 13vw, 172px); left: clamp(20px, 12vw, 196px);
  width: var(--sx-moon-d); aspect-ratio: 1; border-radius: 50%;
  /* AY SOLGUNDUR, GÜNEŞ DOYGUN. İlk hâli `#FFD166`ya kadar doygundu ve gece
     zemininin üstünde 80px'lik dolu bir amber disk GÜNEŞ okunuyordu. Krem
     uçlu gradyan + üç soluk krater onu aya çevirir; sıcaklık hale'de kalır.
     PARANTEZ İÇİNDEKİ ESKİ KAYIT ("aynı renk ana sayfanın gece panelinde
     çalışıyor, çünkü orada disk metnin arkasında ve alfası düşük") 2026-09-01'de
     ÖLÇÜLDÜ VE ÇÜRÜDÜ: `.night-moon` %100 opaktı ve hiçbir metnin arkasında
     değildi — telefonun üstündeki boş bantta duruyordu, yani ana sayfa da
     aynı güneşi gösteriyordu (konsey kararı 7). Bugün oradaki disk de bu
     kuralın değerlerini taşır; İKİSİ AYRIŞAMAZ — ayrışırsa ziyaretçi ana
     sayfadan `/uyku`ya geçerken aynı öğenin iki farklı hâlini görür. */
  background:
    radial-gradient(circle at 33% 64%, rgba(226,214,186,.34) 0 11%, transparent 12%),
    radial-gradient(circle at 60% 27%, rgba(226,214,186,.24) 0 6%, transparent 7%),
    radial-gradient(circle at 71% 61%, rgba(226,214,186,.20) 0 5%, transparent 6%),
    radial-gradient(circle at 58% 42%, #FFFCF0, #FFE9BC 78%);
  /* HALE DAR VE SOLUK (kullanıcı kararı, 2026-09-01): 62px/14px yayılım +
     .26 alfa, koyulaşan hero zemininde ayı yine GÜNEŞ gibi parlatıyordu.
     Sıcaklık hale'de kalır ama yayılım ay boyunun altında durur. AYNI ORAN
     `.night-moon`da da geçerli (Site.css) — iki ay ayrışamaz. */
  box-shadow: 0 0 30px 7px rgba(255, 224, 160, .17);
  animation: sxMoon 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sxMoon {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* `.sx-glow` IŞIKLARI KALDIRILDI ve geri gelmemeli (kullanıcı kararı,
   2026-09-01). İki mavi-mor blur diski (460px mor sol üstte, 420px mavi
   altta) "derinlik" niyetiyle konmuştu ama lacivert zeminde geniş, parlak
   renk alanları geceyi değil METALİK bir yüzeyi okutuyordu. Gecenin
   derinliği zaten üç öğede var: düz `--night-bg`, yıldız alanı ve ayın
   sıcak hale'si — hero'nun tek ışık kaynağı AY kalır. */

.sx-hero-in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr minmax(0, 400px);
  gap: clamp(22px, 4vw, 60px); align-items: center;
}

/* Gece zemininde eyebrow'un açık tema rengi okunmuyor — `.night .eyebrow`
   ile aynı düzeltme, bu sayfanın kapsamında. */
.sx-hero .eyebrow {
  /* Cam pilin halesi lacivert bantta leke okunuyor (Site.css `.night
     .eyebrow` ile aynı düzeltme). */
  box-shadow: none; border-width: 1px;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color: #BBD4FA;
}

/* BAŞLIĞIN PUNTOSU ELLE YAZILIR. Taban `h1` kuralı yalnız aile/ağırlık/satır
   verir, ÖLÇÜ vermez; yazılmazsa tarayıcının 2em varsayılanı geçerli olur ve
   başlık masaüstünde ~34px'te kalır — iki kolonlu bir hero'da kopya baş
   roldür, küçük başlık sağdaki ekranı yalnız bırakır. Tavan `.page-hero`nun
   ALTINDA: bu kopya kolonun yarısına sığmak zorunda. */
.sx-hero-copy h1 {
  margin: 14px 0 12px;
  font-size: clamp(2rem, 4.2vw, 2.95rem);
  letter-spacing: -.02em; text-wrap: balance;
  color: var(--night-tx);
}
.sx-hero-copy > p {
  margin: 0; max-width: 34em;
  font-size: var(--fs-2xl); color: var(--night-tx2);
}

/* Üç sayı — kutusuz, yalnız kılcal ayraçla. Dolu üç rozet, hemen altındaki
   telefonla ve navbar'ın CTA'sıyla ağırlık yarışına girerdi (hero'daki
   "dolu blok sayısı" kuralı). */
.sx-facts {
  list-style: none; padding: 0;
  margin: clamp(20px, 3vh, 32px) 0 0;
  display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 3vw, 34px);
}
.sx-facts li { display: flex; align-items: baseline; gap: 8px; }
.sx-facts li + li {
  padding-left: clamp(18px, 3vw, 34px);
  border-left: 1px solid var(--sx-line);
}
.sx-facts b {
  font-family: var(--font-head); font-size: 1.85rem; font-weight: 800;
  color: #FFE7AE;                       /* ay ışığı — sayfadaki tek sıcak vurgu */
  font-variant-numeric: tabular-nums;   /* rakam genişliği sabit, satır kaymaz */
  line-height: 1;
}
.sx-facts span { font-size: var(--fs-sm); font-weight: 700; color: var(--night-tx2); }

.sx-hero-phone { display: flex; justify-content: center; align-items: center; min-width: 0; }

/* ---- Navbar hero'nun ÜSTÜNDEYKEN krem, geçince eski hâline döner ----------
   Bu sayfanın hero'su tam genişlikte LACİVERT, navbar ise `position: fixed` ve
   varsayılan olarak SAYDAM: açık temada "Kidlio" yazısı ve masaüstü menü
   bağlantıları (`--tx1` / `--tx2`, ikisi de lacivert) gece zemininin üstünde
   okunmuyordu — ölçüm değil, tamamen kayboluyorlardı.

   Sınıfı `Js/Site/Sleep.js` yazar (`.nav.is-over-night`) ve YALNIZ bu sayfada:
   kural bu dosyada, dosya da yalnız bu şablondan yükleniyor. Navbar `.sx`
   sarmalayıcısının DIŞINDA olduğu için seçici ona kapsanamaz — kapsam
   dosyanın kendisi.

   ÜÇ TUZAK:
   1. KAPSÜL PALETİ yalnız 1021px ÜSTÜNDE çevrilir. Altında kapsül, dil ve tema
      `.nav-links` kayan panelinin İÇİNDE yaşıyor ve panelin zemini
      `--card-solid` (açık) — krem metin orada görünmez olurdu. Marka yazısı
      ile hamburger panelin dışında, o yüzden her genişlikte boyanır.
   2. ÇEVRİLEN ŞEY TEK TEK KURALLAR DEĞİL, ÜÇ TOKEN. Navbar'ın yüzeyi
      2026-08-26'da sayfa genişliğindeki buzlu banttan (`.nav::before`, artık
      YOK) ortadaki kapsüle taşındı ve palet `--nav-cap*` / `--nav-pill*`
      token'larında toplandı (Site.css §4). Burada o token'ları gece
      değerleriyle yeniden tanımlamak yeter — `.nav-link`, `.nav-lang` ve
      `.nav-theme` üçü de onları okuyor. Ayrı ayrı yazılan kurallar, taban
      kural her değiştiğinde sessizce ayrışırdı.
   3. Geçiş eşiği navbar'ın ORTASI (bkz. Sleep.js). Hero'nun dibiyle
      hizalanırsa bir kare boyunca krem metin açık zeminde kalır. */
.nav.is-over-night .nav-brand { color: #FFF7E8; }
.nav.is-over-night .nav-toggle {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.24);
}
.nav.is-over-night .nav-toggle span { background: #FFF7E8; }
/* MENÜ AÇIKKEN HAMBURGER GERİ DÖNER. Kayan panel (`--card-solid`, açık) sağ
   üst köşeyi kaplıyor ve hamburger onun ÜSTÜNDE duruyor (`z-index: 2`) —
   krem çubuklar orada tamamen kayboluyordu. */
.nav.is-over-night.is-open .nav-toggle {
  background: var(--card); border-color: var(--border);
}
.nav.is-over-night.is-open .nav-toggle span { background: var(--tx1); }

@media (min-width: 1021px) {
  .nav.is-over-night {
    --nav-cap: rgba(255,255,255,.10);
    --nav-cap-edge: rgba(255,255,255,.22);
    --nav-cap-tx: rgba(233,242,255,.88);
    --nav-pill: rgba(255,255,255,.16);
    --nav-pill-tx: #FFF;
  }
  /* Seçili dil kutusu DOLU kalır (taban kuraldaki `--card-solid` yerine düz
     beyaz): gece zemininde tint bir kutu "seçili" demiyor, sönük duruyor. */
  .nav.is-over-night .nav-lang-btn.is-active {
    background: #F3F8FF; color: #14346E;
  }
}

/* ----------------------------------------------------------------------------
   3) Hazır modlar — asimetrik bento

   YERLEŞİM BOYUT SINIFINDAN GELİR, `:nth-child`ten DEĞİL: mod sayısı ya da
   sırası değişirse `SLEEP_BENTO` onunla gelir, sabitlenmiş kurallar sessizce
   yanlış satıra yerleştirirdi.

     satır 1-2, kolon 1-3 → büyük kart (Derin Gece)
     satır 1  , kolon 4-6 → orta (Arabada Uyku)      · otomatik yerleşim
     satır 2  , kolon 4-6 → orta (Yeni Doğan)        · otomatik yerleşim
     satır 3  , 2'şer kolon → üç küçük kart
---------------------------------------------------------------------------- */
.sx-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
.sx-mode {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(18px, 2vw, 26px);
  border-radius: var(--r-lg);
  /* Her kartın KENDİ yumuşak gece gradyanı. Karışım OKLCH'de: sRGB'de koyu
     uçta chroma kayboluyor ve altı ton birbirinden ayrılmayan altı lacivert
     griye iniyor (`.cta-box`taki aynı gerekçe).

     GEÇİŞ 2026-09-01'DE YUMUŞATILDI (kullanıcı kararı, hero'nun zemini ve ay
     hale'siyle aynı turda): parlak köşe %46 renkken kartın sol üstünde keskin
     bir cam parlaması vardı ve altı kart METALİK okunuyordu. İki değişiklik,
     ikisi de aynı sebeple — **kartlar hâlâ birbirinden ayrılır, ama renk artık
     bir IŞIK değil bir TON**:
       1. tepe %46 → %28 (renk hâlâ tanınır, parlama gider),
       2. ara durak %56 → %72 — geçiş uzar, yani gradyan kartın içinde
          yayılır; kısa geçiş parlak köşeyi bir KENAR gibi çiziyordu.

     İKİNCİ KISMA, 2026-09-02 (kullanıcı kararı: "gradient min seviyede
     olsun"). Yukarıdaki tur parlamayı aldı ama geçişin KENDİSİ hâlâ
     görünüyordu: altı kartın her biri sol üstten sağ alta doğru gözle
     izlenebilen bir renk yolculuğu yapıyordu ve bento — altı kart yan yana —
     bunu altı kez tekrarladığı için ızgara huzursuz okunuyordu. Üç ayar,
     hepsi aynı yöne: **gradyan artık bir geçiş değil, düz zeminin üstünde
     yalnızca bir renk İMASI**:
       1. tepe %28 → %13 (renk hâlâ var ama olay değil),
       2. ara durak %72 → %86 — kartın neredeyse tamamı düz `--sx-mid`,
          `--sx-deep`e iniş yalnız en alt köşede,
       3. yarıçap 130%/120% → 160%/150%: aynı renk daha geniş bir alana
          yayılınca birim mesafedeki değişim, yani geçişin görünürlüğü düşer.

     KENARLIK KARŞILIĞINDA GÜÇLENDİ (%18 → %26) ve bu bir süs değil telafi:
     zemin düzleştikçe tonu taşıyan yük gradyandan kenarlığa geçti. Altı kart
     birbirinden AYRILMAK zorunda (dosyanın başındaki kural); yoksa altı özdeş
     lacivert kutu kalır ve modların ayrı ayrı var olduğu okunmaz. Gradyanı
     buradan daha da kısacaksan, önce kenarlığı yükselt. */
  background:
    radial-gradient(160% 150% at 14% -12%,
      color-mix(in oklch, var(--sx-c) 13%, var(--sx-mid)) 0%,
      var(--sx-mid) 86%, var(--sx-deep) 100%);
  border: 1px solid color-mix(in srgb, var(--sx-c) 26%, transparent);
  /* RENKLİ DIŞ GÖLGE KISILDI (%62 → %30). Koyu zeminde renkli bir gölge
     "gölge" değil IŞIMA okunuyor — kart zeminden ayrılsın diye var, parlasın
     diye değil.

     KABARIK, 2026-09-02 (kullanıcı kararı, telefondaki ses kartlarıyla aynı
     turda). Reçetenin tamamı ve NEDEN üst ışık olmadan alt gölgenin yüzeyi
     çukurlaştırdığı `Site.css`teki `.sps-card` notunda — burada tekrar
     edilmiyor, çünkü iki yerde duran bir gerekçe bir yerde güncellenir.

     BU KART İÇİN İKİ FARK:
       1. Kabarıklık ALANDAN değil KENARDAN gelir. İlk deneme telefondaki
          reçeteyi olduğu gibi kopyaladı (geniş üst hale) ve ölçüldü: hiç
          görünmedi. Sebep alfa değil ÖLÇEK — 92px'lik bir diskte yüzeyin
          yarısını kaplayan bir hale bombe okunur, 286px'lik bir kartta aynı
          hale yüzeye dağılıp kaybolur. Alfayı yükseltmek de çözüm değildi:
          büyük yüzeyde beyaz bir alan, bombe değil CAM PARLAMASI olur — 2026
          -09-01'de gradyandan tam olarak onu söküp atmıştık. Çözüm ikisi de
          değil: üstte 1px parlak, altta 1px koyu KENAR ÇİZGİSİ + alttan içeri
          güçlü bir gölge. Göz bir kabarıklığı zaten kenarından okur.
       2. Kabarıklık RENKSİZ: beyaz/lacivert. Aynı turda gradyan minimuma
          indirildi (yukarıdaki nota bak); derinliği renge geri yükletmek o
          kararı arka kapıdan iptal ederdi.

     Dış gölge de yükseldi (nötr, `-18px`): kart zeminden ayrılmadan
     "kabarık" duramaz — yastığın altında yer olmalı. */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.30),
    inset 0 -1.5px 0 rgba(3,6,22,.6),
    inset 0 -26px 34px -20px rgba(4,7,26,.85),
    0 16px 30px -18px rgba(3,6,22,.62),
    0 20px 42px -26px color-mix(in srgb, var(--sx-c) 30%, transparent),
    var(--shadow-sm);
  color: var(--night-tx);
  transition: transform var(--t-sm) ease, box-shadow var(--t-sm) ease;
}
/* Hover de yastığı TAŞIMAK zorunda: `box-shadow` tek özellik, buradaki liste
   yukarıdakini eklemez ezer — inset'ler tekrar yazılmazsa kart imleç üstüne
   gelince kabarıklığını kaybedip düzleşir (yükselirken sönen bir kart). */
.sx-mode:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.30),
    inset 0 -1.5px 0 rgba(3,6,22,.6),
    inset 0 -26px 34px -20px rgba(4,7,26,.85),
    0 22px 38px -18px rgba(3,6,22,.66),
    0 26px 52px -24px color-mix(in srgb, var(--sx-c) 38%, transparent),
    var(--shadow);
}
/* KOYU TEMADA DIŞ GÖLGE GÖLGE OLMAKTAN ÇIKIYORDU (2026-09-02, "koyu modda
   kartlar puslu görünüyor" şikâyeti; açık temada aynı kart net).

   ÖLÇÜLDÜ, ve şikâyet kartın RENGİNDE değil ÇEVRESİNDE. Kartın hemen ALTINDAKİ
   24px, sayfa zeminine göre:
     · açık tema  (249,246,242) → (171,168,182)   yani zemin KOYULUYOR = gölge
     · koyu tema  (  3, 14, 36) → ( 11, 15, 43)   yani zemin AÇILIYOR  = hale
   Renkli dış gölge (`--sx-c %30`) krem zeminde koyulaştırıyor, gece zemininde
   ise AYDINLATIYOR — kart zeminden kopmuyor, zemine sızıyor. Dosyada zaten
   duran kayıt ("koyu zeminde renkli bir gölge 'gölge' değil IŞIMA okunur")
   tam olarak bu; %62 → %30 kısma yetmemiş, çünkü sorun MİKTAR değil YÖN.

   İkinci ölçü kenarda: kartın kenarındaki yerel sıçrama açık temada 9.26,
   koyu temada 1.56 idi — kartı sayfadan ayıran şey açık temada zaten kartın
   kendi koyuluğu (kart:sayfa 14.89), koyu temada ise SADECE kenar çizgisi
   (kart:sayfa 1.20). O tek çizgi %26'da kalınca kenar de eriyordu; %50'de
   yerel sıçrama 2.17 (+%39) ve kart yeniden bir yüzey gibi duruyor.

   İKİ DEĞİŞİKLİK, İKİSİ DE YALNIZ KOYU TEMADA:
     1. renkli dış gölge KALKTI, yerine tek bir nötr siyah gölge,
     2. kenarlık %26 → %50.
   Açık tema piksel piksel korunur (ölçüldü) — oradaki denge zaten doğruydu ve
   `--sx-c`nin rengi kartları birbirinden ayırma işini orada hâlâ yapıyor.
   YÜZEYİ AÇMAK bu turda AYRICA yapıldı ve iki iş birbirini tamamlıyor: yüzey
   basamağı dosyanın başındaki `[data-theme="dark"] .sx` bloğunda, kenar ve
   gölge burada. (İlk teşhis "yüzeyi açmak ters teper" diyordu ve ÖLÇÜMLE
   ÇÜRÜDÜ — gerekçesi oradaki notta.) İç yastık katmanları (inset'ler) AYNEN korunur — `box-shadow` tek
   özellik olduğu için burada tekrar yazılmak zorundalar, yoksa kart düzleşir
   (yukarıdaki hover notundaki aynı tuzak). */
[data-theme="dark"] .sx-mode {
  border-color: color-mix(in srgb, var(--sx-c) 50%, transparent);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.30),
    inset 0 -1.5px 0 rgba(3,6,22,.6),
    inset 0 -26px 34px -20px rgba(4,7,26,.85),
    0 18px 34px -20px rgba(0,0,0,.85);
}
[data-theme="dark"] .sx-mode:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.30),
    inset 0 -1.5px 0 rgba(3,6,22,.6),
    inset 0 -26px 34px -20px rgba(4,7,26,.85),
    0 24px 44px -20px rgba(0,0,0,.9);
}

/* Kartın metni sözde öğelerin ÜSTÜNDE kalmalı: konumlandırılmış bir ::before /
   ::after, konumlandırılmamış kardeş metnin üstüne boyanır ve büyük karttaki
   yıldız dokusu başlığın üstünden geçer. */
.sx-mode > * { position: relative; z-index: 1; }

.sx-mode--lg { grid-column: 1 / 4; grid-row: 1 / 3; min-height: 286px; }
.sx-mode--md { grid-column: 4 / 7; min-height: 142px; }
.sx-mode--sm { grid-column: span 2; min-height: 132px; }

/* BÜYÜK KART ATMOSFERLE DOLAR, İÇERİKLE DEĞİL. "Derin Gece" komşularının iki
   katı yüksekliğinde ve metni onlarla aynı uzunlukta — boşluğu doldurmak için
   cümle eklemek kartı metin bloğuna çevirirdi, uydurma bir istatistik eklemek
   ise sitenin her yerinde reddedilen sahte veri olurdu. Onun yerine gecenin
   kendisi: yıldız dokusu + köşeden doğan yumuşak bir hale. İkisi de
   dekoratif, ikisi de bilgi taşımıyor — ve kart tam olarak onu anlatıyor. */
.sx-mode--lg::before {
  content: ""; position: absolute; right: -70px; bottom: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  /* HALE KALDIRILDI (2026-09-02) — kartın SİS kaynağıydı, bkz. dosyanın
     başındaki "KOYU YÜZEYLERDE SİS" notu. 260px'lik bir daire 46px blur ile
     kartın sağ alt çeyreğine yayılan, kenarsız, düşük kontrastlı bir ışık
     rampası ediyordu; tam tarifi budur. Üç turda %52 → %26 → %15 kısıldı ve
     her seferinde şikâyet geri geldi, çünkü sorun MİKTAR değil TÜRDÜ.
     Kural kendisi duruyor ki kartın "atmosferle dolar" kararı (yıldızlar,
     `::after`) kaybolmasın — hale yerine artık hiçbir şey yok, yıldızlar
     derinliği tek başına taşıyor. */
  background: none;
  pointer-events: none;
}
.sx-mode--lg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background-image:
    radial-gradient(1.6px 1.6px at 78% 22%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 62% 46%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(2px 2px   at 88% 58%, rgba(255,255,255,.70), transparent 60%),
    radial-gradient(1.3px 1.3px at 70% 74%, rgba(255,255,255,.50), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 30%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 34%, rgba(255,255,255,.60), transparent 60%);
  animation: sxTwinkle 6.5s ease-in-out infinite alternate;
}
/* Büyük kartta dalga bir işaret değil bir YÜZEY: kartın dibini boydan boya
   kaplar (`flex: 1` + `space-between`), böylece "burası gecenin kendisi"
   diyen kart altında bir ses manzarası taşır. Sağ marj YOK: oynat üçgeni
   kalktıktan sonra dalganın sağında ayıracağı bir şey kalmadı. */
.sx-mode--lg .sx-wave {
  flex: 1; justify-content: space-between; gap: 0;
  height: 34px;
}
.sx-mode--lg .sx-wave i { flex: 0 0 4px; width: 4px; }

/* İkon rozeti — DOLU değil TİNTLİ, glyph rengin AÇIK ucu.
   Dolu rozet + beyaz glyph burada işe yaramaz: altı tondan ikisi sıcak
   (`#E0A45E` amber, `#D0699B` gül) ve beyaz onların üstünde grafik eşiğinin
   (3:1) altına düşer. Koyu kart zemininde açık tint tam ters yönde çalışır. */
.sx-mode-ico {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--r);
  background: color-mix(in srgb, var(--sx-c) 22%, rgba(255,255,255,.05));
  border: 1px solid color-mix(in srgb, var(--sx-c) 40%, transparent);
  color: color-mix(in oklch, var(--sx-c) 58%, white);
  font-size: 1.15rem;
  flex: none;
}
.sx-mode--lg .sx-mode-ico { width: 62px; height: 62px; font-size: 1.6rem; }

.sx-mode-name {
  margin: 14px 0 6px;
  font-size: var(--fs-2xl); color: var(--night-tx);
}
.sx-mode--lg .sx-mode-name { margin-top: 18px; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.sx-mode-text {
  margin: 0; font-size: var(--fs-sm); color: var(--night-tx2);
  max-width: 34em;
}
.sx-mode--lg .sx-mode-text { font-size: var(--fs); }

/* Alt satır: yalnız dalga. `margin-top: auto` — üç boyda da kartın dibine
   oturur, yoksa küçük kartlarda metnin hemen altında asılı kalır.

   OYNAT ROZETİ (`.sx-mode-play`) KALDIRILDI ve geri gelmemeli. 38px'lik
   yuvarlak bir üçgen rozet buton okunuyordu ama tıklanınca hiçbir şey
   olmuyordu — Özellikler sayfasındaki "tıklanmayan bir 'İncele' sahte
   butondur" kuralının aynısı. Gerçek bir butona çevirmenin yolu da yoktu:
   bir MOD altı sesin karışımı, oynatıcı ise TEK ses gösteriyor; mod→ses
   eşlemesi veride yok ve uydurulamaz. Dalga afordans DEĞİL, gösterge — o
   yüzden kaldı. */
.sx-mode-foot {
  margin-top: auto; padding-top: 16px;
  display: flex; align-items: center; gap: 12px;
}

/* ----------------------------------------------------------------------------
   4) Oynatıcı — seçili ses solda büyük, 18 seçim düğmesi sağda

   Panelin aksanı kategori paletinden değil uygulamanın kendi oynatıcı
   mavisinden (`--sleep-accent`, SortBar/PlayerBar). `--sx-c` burada da
   tanımlıdır çünkü `.sx-wave` onu okuyor ve BİR CUSTOM PROPERTY'NİN İÇİNDEKİ
   `var()` O PROPERTY'NİN TANIMLANDIĞI ÖĞEDE çözülür: `--sx-c` panelde
   tanımlanmazsa `color-mix` geçersiz olur, dalga rengi sessizce miras alınır
   (Categories.css'teki `--cw-ink` ile aynı tuzak, aynı çözüm).
---------------------------------------------------------------------------- */
.sx-player {
  --sx-c: #6CB4FF;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(20px, 2.6vw, 34px);
  border-radius: var(--r-xl);
  /* İKİ RENK YIKAMASI KISILDI (%30/%20 → %13/%08, yarıçap 90/80 → 62/58,
     2026-09-02). Panelin en büyük iki sis katmanı bunlardı: yarım paneli
     kaplayan, kenarsız, düşük kontrastlı iki ışık rampası. Silinmediler çünkü
     panelin mor→mavi ekseni ürünün oynatıcısından geliyor; daraltıldılar —
     artık köşede duran bir renk İMASI, yüzeye yayılan bir yıkama değil. */
  background:
    radial-gradient(62% 80% at 8% 0%, rgba(122,90,240,.13), transparent 60%),
    radial-gradient(58% 76% at 96% 100%, rgba(108,180,255,.08), transparent 62%),
    linear-gradient(160deg, var(--sx-mid), var(--sx-deep));
  border: 1px solid rgba(108,180,255,.24);
  box-shadow: var(--shadow-lg);
  color: var(--night-tx);
}
/* KOYU TEMADA PANEL KENDİ KENARINI ÇİZER (2026-09-02, "dark modda ses kartları
   puslu görünüyor" şikâyeti).

   ŞİKÂYETİN KAYNAĞI DÜĞME DEĞİL, ÖLÇÜLDÜ: 18 `.sx-pick` iki temada da PİKSEL
   PİKSEL AYNI (Playwright, ortalama fark 0.01/255 — yalnız yıldız alanının
   gürültüsü) ve düğme:panel kontrastı iki temada da 2.52. Bu beklenen sonuç,
   çünkü panelin bütün renkleri (`--sx-mid`/`--sx-deep`/`--night-tx`) tema
   bağımsız. Değişen tek şey ÇERÇEVE: panel zemini (#101A3E) sayfa zeminine
   karşı açık temada 16.71 : 1, koyu temada 1.08 : 1. Yani koyu temada panelin
   kenarı fiilen yok, panel sayfanın içinde eriyor — ve çerçevesiz kalan bir
   yüzeyin üstündeki her şey "puslu" okunur. Göz bir yüzeyi mutlak parlaklıkla
   değil ÇEVRESİYLE kıyaslayarak yargılar.

   ÇÖZÜMÜN BİR YARISI KENARI GÜÇLENDİRMEK (aşağıdaki kural), diğer yarısı
   yüzeyi bir kademe açmak (dosyanın başındaki `[data-theme="dark"] .sx`).
   DİKKAT — bu notun ilk hâli "paneli açmak ters teper, düğmeler soluklaşır"
   diyordu ve ÖLÇÜMLE ÇÜRÜDÜ: düğme zemini YARI SAYDAM, panel açılınca düğme de
   aynı miktarda açılıyor, düğme:panel oranı yerinde kalıyor (1.06 → 1.07).
   O tahmin opak bir düğme için doğru olurdu. Kenar tek başına da yetmedi;
   kullanıcı ilk turdan sonra "hâlâ puslu" dedi.

   NEDEN AYNI PANELDE MOD KARTLARI SORUNSUZ: onların kenarı %26 DOYGUN mavi ve
   kart ~286px; buradaki %24'lük tek çizgi ise ~1100px'lik bir kenara yayılıyor
   — aynı alfa, çok daha uzun kenar, çok daha zayıf sinyal. Alfa o yüzden %24 →
   %46'ya çıktı. `box-shadow` ezildiği için `--shadow-lg` burada TEKRAR
   yazılmaz: koyu zeminde zaten görünmüyordu, yerine 1px'lik mavi halka (kenarı
   ikinci kez, sayfanın tarafından çizer) + nötr, çok yayvan bir dip gölgesi
   geldi. Renkli gölge KULLANILMADI — koyu zeminde renkli gölge "gölge" değil
   IŞIMA okunuyor (mod kartlarındaki aynı kayıt). */
[data-theme="dark"] .sx-player {
  border-color: color-mix(in srgb, var(--sx-c) 46%, transparent);
  box-shadow:
    0 0 0 1px rgba(108,180,255,.10),
    0 30px 70px -40px rgba(0,0,0,.95);
}

/* ---- Şimdi çalıyor ---- */
.sx-now {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(16px, 2vw, 24px) clamp(14px, 1.6vw, 20px);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--sx-line);
}
.sx-now-label {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(187,212,250,.9);
}

/* Büyük ses göstergesi — çift halka, ortada ikon. Halkalar `box-shadow` ile
   çizilir (ayrı öğe yok): tek öğe = tek nefes animasyonu, iki katman ayrı
   ayrı animasyona girmez ve senkron kayması olmaz. */
.sx-now-ico {
  margin: 14px 0 10px;
  display: grid; place-items: center;
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, rgba(108,180,255,.42), rgba(46,139,247,.18) 70%);
  box-shadow: 0 0 0 8px rgba(108,180,255,.10), 0 0 0 18px rgba(108,180,255,.05),
              0 14px 34px -16px rgba(46,139,247,.85);
  color: #EAF4FF; font-size: 2rem;
}
.sx-player.is-playing .sx-now-ico { animation: sxBreath 4.2s ease-in-out infinite; }
@keyframes sxBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
.sx-now-name {
  font-family: var(--font-head); font-size: 1.32rem; font-weight: 800;
  color: #fff; line-height: 1.25;
}
.sx-now .sx-wave { margin: 14px 0 4px; }
/* DURAKLATILMIŞ hâl: çubuklar durur ve yatar. `animation-play-state: paused`
   çubuğu bulunduğu karede dondurur — on beş çubuk on beş farklı yükseklikte
   kalır ve "duraklatıldı" değil "bozuldu" okunur. */
.sx-player:not(.is-playing) .sx-wave i {
  animation: none; transform: scaleY(.16); opacity: .5;
}

.sx-controls {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px;
}
.sx-pp {
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(135deg, #6CB4FF, #2E8BF7 70%);
  color: #fff; font-size: 1rem;
  box-shadow: 0 10px 24px -10px rgba(46,139,247,.9);
  transition: transform var(--t-sm) ease, box-shadow var(--t-sm) ease;
  flex: none;
}
.sx-pp:hover { transform: scale(1.05); }
.sx-pp:active { transform: scale(.96); }

.sx-timers { display: flex; gap: 6px; }
.sx-timer {
  padding: 9px 13px; border-radius: var(--r-full); cursor: pointer;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--sx-line);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700;
  color: var(--night-tx);
  white-space: nowrap;
  transition: background var(--t-sm) ease, border-color var(--t-sm) ease, color var(--t-sm) ease;
}
.sx-timer:hover { background: rgba(255,255,255,.12); }
/* `aria-pressed` TEK KAYNAK: görünüm ondan türer, ayrı bir `is-active` sınıfı
   yok — iki durum kaynağı er geç sessizce ayrışır (Growth.css'teki
   `aria-selected` ile aynı karar). */
.sx-timer[aria-pressed="true"] {
  background: linear-gradient(120deg, #6CB4FF, #2E8BF7);
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px -8px rgba(46,139,247,.9);
}
.sx-now-hint {
  margin-top: 14px;
  font-size: var(--fs-xs); color: var(--night-tx2);
}
.sx-now-hint i { color: rgba(108,180,255,.9); margin-right: 5px; }

/* ---- 18 seçim düğmesi ---- */
.sx-picks { position: relative; z-index: 1; display: flex; flex-direction: column; }
.sx-picks-label {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(187,212,250,.9);
  margin-bottom: 12px;
}
/* DÜĞMELER 2026-09-02'DE SATIR OLMAKTAN ÇIKIP TELEFONDAKİ DAİRESEL SES
   KARTININ AYNISI OLDU (kullanıcı kararı: "18 sakinleştirici ses alanını da
   telefondaki ses butonları şeklinde yap").

   Eski hâli sola yaslı bir satırdı: küçük ikon + tek satır ad + ellipsis.
   Aynı sayfanın hero'sunda uygulamanın GERÇEK ekranı duruyor ve orada aynı 18
   ses yuvarlak kartlar hâlinde; iki blok aynı şeyi iki ayrı dille anlatıyordu.
   Şimdi biçim de ortak: daire, ikon üstte, ad altta, `Site.css`teki yastık
   reçetesiyle kabarık. Site "uygulama böyle görünüyor" derken kendi
   göstergesini uygulamaya benzetmiş oluyor.

   ÜÇ ŞEY DEĞİŞMEDİ ve değişmemeli:
     · 18 adın hepsi hâlâ DÜZ METİN — bilgi bir etkileşimin arkasına saklanmaz
       (bölümün kendi kuralı). Bu yüzden `text-overflow: ellipsis` KALKTI:
       daireye sığmayan ad kırpılmaz, SARAR. Kırpılmış "Süpürge Makine…" bir
       adı göstermemekle aynı şeydir.
     · Durum tek kaynaktan: `aria-pressed`.
     · Seçmek çalmaktır (JS'teki not).

   `grid-auto-rows: 1fr` KALDIRILDI ve yerine `align-content: center` geldi.
   Eski kural satırları kolonun boyuna kadar uzatıyordu; `aspect-ratio: 1`
   taşıyan bir daireyi uzatmak onu ELİPSE çevirir. Ölü alan sorunu (18 düğme
   ~272px, soldaki kart ~370px) hâlâ geçerli, ama artık boşluk düğmelerin
   içine değil ızgaranın ALTINA VE ÜSTÜNE eşit dağıtılıyor: üç sıra daire
   soldaki kartın ortasına hizalanır, `space-between`in dağıttığı görüntüyü de
   vermez. */
.sx-picks-grid {
  flex: 1;
  display: grid; gap: clamp(8px, 1vw, 12px);
  /* SABİT 6 KOLON (2026-09-02, kullanıcı kararı: "butonlar 3*6 sıralansın").
     `auto-fill` panelin genişliğine göre 5'e de 7'ye de düşüyordu; 18 ses
     6 kolonda tam üç eşit sıra eder, artık sıra sonunda yetim düğme kalmaz.
     Dar ekranların kendi kuralları aşağıda (≤760 auto-fill, ≤620 üç kolon). */
  grid-template-columns: repeat(6, 1fr);
  align-content: center;
}
.sx-pick {
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  /* Yuvarlaklık ARTIK TAM DAİRE, ve eski nottaki itiraz düştü: o itiraz
     ("uzayan satır 60px'lik bir kapsüle dönüşüyor") satır düzenine aitti,
     kare oranlı bir kutuda %50 tam olarak daire demek. */
  padding: 6px; border-radius: 50%; cursor: pointer;
  /* Alfalar 2026-09-02'de bir kademe YUKARI alındı (kullanıcı: "opaklığı
     biraz arttır"): gece zemininde .20/.12/.09'luk mor katman dairenin
     kenarını gösteriyor ama gövdesini göstermiyordu — 18 düğme zeminden
     ayrışmıyordu. Oranlar korundu, hepsi ~1.7× çarpıldı. */
  background:
    radial-gradient(75% 65% at 32% 18%, rgba(255,255,255,.20), transparent 70%),
    linear-gradient(155deg, rgba(185,165,255,.34) 0%, rgba(140,120,240,.22) 45%, rgba(80,60,200,.16) 100%);
  border: 1px solid rgba(148,112,245,.44);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.30),
    inset 0 3px 6px -5px rgba(255,255,255,.16),
    inset 0 -8px 12px -6px rgba(12,10,48,.58),
    0 7px 14px -6px rgba(0,0,0,.5);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700;
  color: var(--night-tx); text-align: center;
  transition: background var(--t-sm) ease, border-color var(--t-sm) ease, transform var(--t-sm) ease;
}
.sx-pick:hover { transform: translateY(-2px); border-color: rgba(148,112,245,.7); }
.sx-pick-ico { color: rgba(219,229,255,.95); font-size: 1.05rem; line-height: 1; flex: none; }
/* Ad SARAR, kırpılmaz. Üç satır tavanı yok: en uzun adlar iki kelime
   ("Okyanus Dalgaları", "Süpürge Makinesi") ve en uzun TEK kelime
   "Vantilatör" — .62rem'de ~62px, 88px'lik dairenin iç genişliğine sığar.
   Yeni bir ses tek parça uzun bir ad getirirse ölçü burada tekrar bakılır. */
.sx-pick-name {
  font-size: .62rem; line-height: 1.16; letter-spacing: .2px;
  padding: 0 2px; text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* Seçili ses = telefondaki `.sps-card.is-playing`in aynısı: mavi halka + mavi
   gölge. NEFES ALMIYOR, o kadarı taşınmadı — soldaki büyük ikon zaten
   `sxBreath` ile nefes alıyor ve iki ayrı ritim aynı panelde titreşim gibi
   okunuyor. `box-shadow` ezildiği için yastık katmanları burada TEKRAR
   yazılır (üsttekiyle aynı tuzak). */
.sx-pick[aria-pressed="true"] {
  border-color: rgba(108,180,255,.7);
  background:
    radial-gradient(75% 65% at 32% 18%, rgba(255,255,255,.20), transparent 70%),
    linear-gradient(155deg, rgba(108,180,255,.46) 0%, rgba(46,139,247,.30) 100%);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.36),
    inset 0 3px 6px -5px rgba(255,255,255,.18),
    inset 0 -8px 12px -6px rgba(12,10,48,.58),
    0 0 0 4px rgba(108,180,255,.14),
    0 7px 16px -6px rgba(46,139,247,.6);
}
.sx-pick[aria-pressed="true"] .sx-pick-ico { color: #EAF4FF; }

/* Klavye odağı gece zemininde de görünür olmalı — taban odak halkası açık
   tema için ayarlı ve burada kayboluyor. */
.sx-pp:focus-visible,
.sx-timer:focus-visible,
.sx-pick:focus-visible {
  outline: 2px solid #EAF4FF; outline-offset: 3px;
}

/* ----------------------------------------------------------------------------
   5) Gece rutini — üç satır

   Üç kart, üç AYRI ikon (ikonlar SiteContent'te, şablonda değil): alt alta üç
   özdeş ay satırları ayırmak yerine tek blok gibi okutuyordu.
---------------------------------------------------------------------------- */
.sx-why {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
.sx-why-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm), var(--edge);
}
.sx-why-card b { font-family: var(--font-head); font-size: var(--fs-lg); color: var(--tx1); }
.sx-why-ico {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: var(--r-sm);
  background: var(--blue-ghost); color: var(--blue);
  font-size: 1.1rem;
}
[data-theme="dark"] .sx-why-ico { color: var(--blue-light); }

/* ----------------------------------------------------------------------------
   6) Responsive
---------------------------------------------------------------------------- */
@media (max-width: 1020px) {
  .sx-hero-in { grid-template-columns: 1fr; }
  .sx-hero-copy { text-align: center; }
  .sx-hero-copy > p { margin-inline: auto; }
  .sx-facts { justify-content: center; }
  /* Tek kolonda kopya ORTALANIR, yani ayın sol üstteki yeri artık metnin
     üstüne düşer. Sağ üste alınır ve navbar'ın altından başlar — `--nav-h`
     dahil, yoksa fixed navbar'ın arkasında yarım görünür.
     SAĞ ÜST TEK BAŞINA YETMEZ (2026-09-06): h1 tek kolonda TAM GENİŞLİK ve
     ortalı, yani "sağ üst" hâlâ başlığın ilk satırının üstüdür. Ölçüldü —
     360·375·390·393·402·412·430·440·500·600·700·768·820·900'de, TR ve EN'de,
     ayın 54px'lik diski başlığın son kelimesini örtüyordu ("kolaylaştır"
     okunmuyordu). Yatay kaçış yok: ortalı bir başlığın kutusu kenardan kenara
     gider. O yüzden ayın KENDİ BANDI açılır ve dolgu ayın ölçüsünden TÜRETİLİR
     (`--sx-moon-d` + `--sx-moon-top`, ikisi de `.sx-hero`da) — elle yazılan bir
     sayı bir dahaki clamp değişiminde sessizce ayrışır, bu ayrışamaz.
     +8px, diskin altıyla başlığın tepesi arasındaki nefes. */
  .sx-moon { top: calc(var(--nav-h) + var(--sx-moon-top)); left: auto; right: 6vw; }
  .sx-hero {
    padding-top: calc(var(--nav-h) + var(--sx-moon-top) + var(--sx-moon-d) + 8px);
  }

  .sx-player { grid-template-columns: 1fr; }
  /* Tek kolonda sağ ızgaranın doldurması gereken bir boşluk yok; dikey
     ortalamak da anlamsız (ortalanacağı bir komşu kalmadı). */
  .sx-picks-grid { flex: none; align-content: start; }
  .sx-why { grid-template-columns: 1fr; }

  /* DOKUNMA HEDEFİ TABANI (WCAG 2.5.8: 44px). Eşik 1020px, çünkü navbar da
     tam orada hamburger'a düşüyor — yani sitenin "buradan aşağısı parmakla
     kullanılıyor" çizgisi bu. Masaüstünde ses düğmeleri zaten ızgarayı
     dolduruyor (`grid-auto-rows: 1fr`), burada satırlar doğal boyuna
     döndüğü için 18 düğme de zamanlayıcılar da ~38px'te kalıyordu.
     Ölçü `min-height` ile verilir, DOLGUYLA değil: dolgu iki satıra sarabilen
     bir ses adını ("Okyanus Dalgaları") 60px'e çıkarır. */
  .sx-pick, .sx-timer { min-height: 44px; }
}

@media (max-width: 860px) {
  /* Bento tek kolona düşmez, YATAY KAYDIRILIR (aşağıdaki 760px bloğu). Bu ara
     eşikte yalnız büyük kart tam genişliğe çıkar ve orta/küçük ayrımı ikili
     ızgaraya iner — altı kartın hiçbiri 300px'in altına sıkışmasın. */
  .sx-bento { grid-template-columns: repeat(2, 1fr); }
  .sx-mode--lg { grid-column: 1 / -1; grid-row: auto; min-height: 240px; }
  .sx-mode--md, .sx-mode--sm { grid-column: span 1; }
}

@media (max-width: 760px) {
  /* MOBİLDE HAZIR MODLAR YATAY ŞERİT. Tek kolonda altı kart ~1.100px tutuyor
     ve oynatıcı bölümü ekranın çok altında kalıyor; yatay şeritte bölüm bir
     ekrandan kısa. `scroll-snap` kartı kenara oturtur, `touch-action: pan-x`
     yatay ekseni parmağa açıp dikeyi sayfaya bırakır — yazılmazsa tarayıcı
     ilk hareketin yönünü kendi tahmin eder ve şeridin üstünde başlayan dikey
     kaydırma kutuda takılır (Kategoriler şeridindeki aynı kural).
     `.container`ın kenar boşluğu negatif marjla kırılır (o boşluk 20px:
     `width: min(var(--container), 100% - 40px)`), şerit ekranın kenarına kadar
     aksın — kırpılmış bir kart "devamı var" der, kabın içinde biten bir şerit
     demez. */
  .sx-bento {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    touch-action: pan-x;
    gap: 12px;
    margin-inline: -20px;
    padding: 4px 20px 14px;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sx-bento::-webkit-scrollbar { display: none; }
  .sx-mode {
    flex: 0 0 min(78vw, 300px);
    scroll-snap-align: start;
    grid-column: auto; grid-row: auto;
  }
  .sx-mode--lg { min-height: 250px; }
  .sx-mode--md, .sx-mode--sm { min-height: 210px; }
  /* Şeritte hover yükselmesi kaydırmayı titretiyor (dokunuşta hover taklidi). */
  .sx-mode:hover { transform: none; }

  .sx-picks-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

@media (max-width: 620px) {
  /* HERO İLK EKRANI AŞIRI UZATMAZ. Kısa ekranda hero'nun boyunu telefon
     mockup'ı belirler (306px genişlikte ~638px yüksek; metin clamp'lerle
     kısalır, telefon kısalmaz). `zoom`, `scale()` DEĞİL: scale düzende hâlâ
     tam boy yer kaplar, yani hero hiç kısalmaz — çözülmek istenen tam olarak
     odur (Site.css §5'teki aynı gerekçe). Desteklemeyen tarayıcıda kural
     sessizce düşer.
     ÖLÇÜLDÜ (390×844): zoom'suz hero 1.185px, .8'de 1.009px, .72'de ~920px —
     yani ekranın oynatıcı barı ilk ekranın hemen altında kalır, bir parmak
     hareketiyle görünür ve hazır modlar hemen arkasından gelir. Daha küçük
     bir ölçekte ekrandaki ses adları (.56rem tabanlı) okunmaz oluyor. */
  .sx-hero .phone { zoom: .72; }
  .sx-hero {
    /* ÜST DOLGU BURADA KISALTILMAZ. 1020px bloğu ayın bandını açıyor; burada
       eski `--nav-h + 20px`e dönmek o bandı kapatır ve ay yine başlığın içine
       düşerdi (bu blok sonra geldiği için sessizce kazanıyordu — kusurun
       360-620px ayağı tam olarak buydu). Alt dolgu serbest, ayla ilgisi yok. */
    padding-bottom: clamp(16px, 3vw, 26px);
  }
  /* Üç sayı ÜÇ KOLON, kılcal ayraçsız. Yatay dizilim 390px'te sarıyor ve
     ayraç (`border-left`) yeni satırın BAŞINDA kalıp yerdeymiş gibi
     duruyordu — sarma sonrası bir kenarlığın nereye düşeceği kestirilemez. */
  .sx-facts {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px 8px; text-align: center;
  }
  .sx-facts li { flex-direction: column; align-items: center; gap: 3px; }
  .sx-facts li + li { padding-left: 0; border-left: 0; }
  .sx-facts b { font-size: 1.5rem; }
  .sx-facts span { line-height: 1.25; }

  .sx-now-ico { width: 80px; height: 80px; font-size: 1.7rem; }
  /* İKİ DEĞİL ÜÇ KOLON. Daireler kare oranlı: 390px'te iki kolon her daireyi
     ~150px yapar, üç sıra 470px eder ve ızgara ekranı yer. Üç kolon hem
     ~95px'lik (44px tabanının çok üstünde) bir hedef verir, hem de hero'daki
     GERÇEK ekranın kendi üç kolonuyla birebir örtüşür. */
  .sx-picks-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------------------------
   7) prefers-reduced-motion

   Global blok (Site.css) yalnız SÜREYİ sıfırlar; süresi sıfırlanan sonsuz bir
   dalga son karesine (`scaleY(1)`) yapışır ve on beş çubuk bir duvara döner.
   O yüzden burada animasyon KAPATILIR ve çubuklar okunur sabit bir yükseklikte
   bırakılır — gösterge hâlâ "ses var" der, yalnız hareket etmez.
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sx-wave i { animation: none; transform: scaleY(.55); }
  .sx-stars, .sx-moon, .sx-player.is-playing .sx-now-ico { animation: none; }
  .sx-mode:hover { transform: none; }
}