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

   Features.css · Categories.css · Growth.css · Sleep.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 §14'ün TAMAMI (`.tier*`, `.tiers*`,
   `.discount-banner`) oradan SİLİNDİ: kartların tek kullanıcısı bu sayfaydı,
   Site.css ise her sayfaya iniyor.

   TASARIM SİSTEMİNDEN NE ÖDÜNÇ ALINDI: token'ların tamamı, `.eyebrow`,
   `.container`, `.section`, `.sec-head`, `.reveal`, `.btn`, `.faq-*`, gece
   token'ları (`--night-*`) ve UYGULAMA PANELİ ailesi (`.fs`, `.fs-sky`,
   `.fs-body`, `.fs-label`, `.fs-card`, `.fs-sec`). Yeni font yok, yeni
   kütüphane yok, yeni görsel varlık yok.

   İÇİNDEKİLER
     1) Kabuk
     2) Hero — iki kolon, kendi zemini
     3) Deneme paneli (`.fs` ödünç)
     4) Planlar — seçici · iki kart · şeffaflık notu
     5) Responsive (mobilde ilk üç fayda + 44px dokunma hedefleri)
     6) prefers-reduced-motion
============================================================================ */

/* ----------------------------------------------------------------------------
   1) Kabuk
---------------------------------------------------------------------------- */
.px {
  /* Kartların iki yüzeyi. `--px-blue-*` açık Kidlio mavisi (Bireysel),
     lacivert (Aile) doğrudan `--night-bg` ailesinden gelir — yeni bir yüzey
     ailesi değil, mevcut olanın ikinci kullanımı (`.night`, `.gx-trust`). */
  --px-blue-bg: color-mix(in oklch, var(--blue) 12%, var(--card-solid));
  --px-blue-bd: color-mix(in srgb, var(--blue) 26%, var(--border));
}
/* KOYU TEMADA HİYERARŞİ TERSİNE DÖNMÜŞTÜ (2026-08-26, kullanıcı kararı).
   Ölçüldü (OKLCH L): Bireysel'in mavi tinti **.399**, nötr kart .287, Aile'nin
   `--night-bg` gradyanı ise .343 → .260 → **.207**. Yani sayfanın EN PARLAK
   yüzeyi öne çıkmayan plan, EN SÖNÜK yüzeyi de "Popüler" rozetli plandı;
   üstelik Aile'nin içindeki metin, gradyanın nerede durduğuna göre 6.47 ile
   9.81 arasında değişiyordu.
   Sebep tasarımın kendisi değil, LIGHT için doğru olan bir kararın koyu temaya
   olduğu gibi taşınmasıydı: krem sayfada lacivert bir kart en ağır bloktur,
   gece zemininde aynı kart zeminin içinde kaybolur. Koyu temanın yükseklik
   modeli bunun tersi — "yükseklik yüzeyin AÇIKLIĞINDAN gelir" (Site.css
   `--shadow-*` notu). O yüzden koyuda vurgu YÖN DEĞİŞTİRİR: Bireysel nötr
   karta iner, Aile bir kademe AÇILIR.
   Kart ölçüleri, dolgusu, yarıçapı, hover kalkması ve LIGHT tema DEĞİŞMEDİ. */
[data-theme="dark"] .px {
  /* Bireysel artık sitenin standart kartı: kendi yüzeyi yok. Yan etkisi
     ölçülebilir bir DÜZELTME — mavi tint üstünde `--tx3` (üstü çizili liste
     fiyatı, "/ay", "sonrasında…" satırı) **3.78:1** ile AA'nın ALTINDAYDI;
     nötr kartta 5.79, fayda listesi (`--tx2`) 6.15 → 9.43. */
  --px-blue-bg: var(--card);
  --px-blue-bd: var(--border);
}
/* Aile'nin koyu tema yüzeyi kuralın KENDİ yanında, §4'te (`.px-plan--navy`in
   hemen altında) — burada tanımlanamaz, çünkü `--night-bg` bir token değil o
   kuralın kendi bildirimi. */

/* ----------------------------------------------------------------------------
   2) Hero — iki kolon: kopya solda, ürün paneli sağda

   Ü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 panelin tepesi
   navbar'ın altında kalır (Kategoriler/Gelişim/Uyku hero'larındaki aynı tuzak).
---------------------------------------------------------------------------- */
.px-hero {
  position: relative; overflow: hidden;
  /* İlk-ekran denetimi (2026-08-30): 26/4vw/56 → 16/2.6vw/36, alt
     30/4.5vw/58 → 20/3vw/38 — hero ile #planlar arasındaki 133px'lik
     bandın hero payı. */
  padding: calc(var(--nav-h) + clamp(16px, 2.6vw, 36px)) 0 clamp(20px, 3vw, 38px);
}

/* İlk-ekran denetimi (2026-08-30): hero ile #planlar arasında 1440×900'de
   133px'lik bant vardı (hero altı 58 + bölüm üstü 104 üst üste). Yalnız hero
   komşusu kısıldı; `#planlar` çapası bölümün kendisinde — scroll-padding
   navbar payından gelir, bu kural o hesabı etkilemez. 761px altında blok
   geçmez, mobil ritim değişmedi. */
@media (min-width: 761px) {
  .px-hero + .px-sec { padding-top: 48px; }
}
/* HERO'NUN ZEMİN KATMANI (`.px-hero-bg`) TAMAMEN KALDIRILDI — 2026-09-02,
   kullanıcı kararı, ÜÇ TURDA (dosyada kural yok, `span` de silindi).
   Ne vardı: `inset: 0` bir katman, üstünde mavi radial gradyan(lar).
     1) Başlangıç: İKİ dev radial (60%×70% @ %16 sağ üst + 52%×60% @ %9 sol
        üst) — ikisi ilk ekranın TAMAMINI gri-mavi perdeyle örtüyordu; ölçüldü,
        sol üst köşe rgb(237,240,244), sitenin kremi rgb(253,250,246).
        Önce yalnız KOYU temada kapatıldı ("diğer sayfalar gibi olsun").
     2) Sonra açık temada TEK cebe indirildi (46%×66% @ 80% 32%, %14), yalnız
        sağdaki ürün panelinin arkasına — kopya kolonu kreme döndü ve ölçüm
        doğruladı (251,248,244). Yine de istenmedi: *"sağ üstten hâlâ mavi bir
        ışık süzmesi geliyor."*
     3) Katman silindi. Kalan tek soru "cep ne kadar küçük olmalı" değildi;
        SAYFANIN İLK EKRANINDA ZEMİN RENGİ İSTENMİYOR.
   Bu, `Site.css`teki üç turluk arka plan dekoru kaydının (nokta ızgarası ·
   ortam ışığı · çizgi figürler) sayfa ölçeğinde DÖRDÜNCÜ tekrarıdır ve aynı
   yerden reddedilmiştir: görünürlük ya da okunabilirlik değil, dekorun kendisi.
   Derinlik zaten yüzeylerden geliyor — ürün paneli, sticker, kartlar.
   Buraya bir daha zemin gradyanı önermeden önce o notu oku. */

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

/* 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. Tavan `.page-hero`nun ALTINDA: bu kopya kolonun yarısına sığmalı. */
.px-hero-copy h1 {
  margin: 14px 0 12px;
  font-size: clamp(2rem, 4.2vw, 2.95rem);
  letter-spacing: -.02em; text-wrap: balance;
}
.px-hero-copy > p {
  margin: 0; color: var(--tx2); font-size: var(--fs-2xl); max-width: 54ch;
}

/* İki eylem: listeye katıl (birincil) + planları gör (sayfa içi kaydırma).
   Buton bir DOKUNMA HEDEFİ (WCAG 2.5.8) ve ölçü `min-height` ile verilir,
   dolguyla DEĞİL — dolgu iki satıra sarabilecek bir etiketi de büyütür
   (uyku oynatıcısındaki aynı karar; `.px-more` 2026-09-04'te silindi). */
.px-hero-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: clamp(20px, 2.8vw, 28px) 0 0;
}
.px-hero-cta .btn { min-height: 46px; }

/* Dört güven etiketi — çip, kutu değil: dört dolu kutu sağdaki panelle
   yarışırdı. Bilgiyi metin taşır, ikon yalnız onu işaretler. */
.px-tags {
  list-style: none; padding: 0;
  margin: clamp(16px, 2.2vw, 22px) 0 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.px-tags li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--card);
  font-size: var(--fs-sm); font-weight: 700; color: var(--tx1);
}
.px-tags li i { color: var(--blue-ink); font-size: .95em; }

/* ----------------------------------------------------------------------------
   3) Deneme paneli — `.fs` ailesi, TELEFON GÖVDESİ YOK

   Sayfada başka maket yok ve çerçeve eklemek ekranı küçültürdü (Gelişim
   hero'sundaki aynı karar).
---------------------------------------------------------------------------- */
.px-panel-wrap { justify-self: end; width: 100%; max-width: 420px; position: relative; }
.px-panel { flex: none; }

/* KÖŞE STICKER'I SİLİNDİ (2026-09-10, kullanıcı kararı: *"açık yazısının
   yerine 7 gün ücretsiz yazısını taşı"*). Dize panelin dışından panelin KENDİ
   etiket satırına, `.px-state` rozetinin yerine geçti — yani vaat artık
   panelin üstüne vurulmuş bir etiket değil, ekranın kendi parçası.
   Kural neyi taşıyordu: `.px-panel-wrap .sticker { top: -26px; right: 14px }`,
   ve o -26px ÖLÇÜLMÜŞTÜ (-14px'te stickerın alt kenarı `.px-state`in üstüne
   ~2px biniyordu, Playwright rect). Sticker geri gelirse iki şey birlikte
   döner: bu ofset ve rozetin ne yazacağı sorusu — ikisi aynı satırda yaşıyor.
   Güneş kuralı (aşağıda) stickerdan bağımsız, `.px-state` yüzünden duruyor. */

/* GÜNEŞ ÜST KENARIN ARDINA ÇEKİLİR. Varsayılan yeri `top: 14px right: 18px`
   ve tam olarak `.px-state` rozetinin (bugün "7 gün ücretsiz") soluna düşüyor: yan yana duran
   sarı disk + hap biçimli rozet ekranda bir AÇMA/KAPAMA ANAHTARI okunuyordu —
   panelin söylediğinin tam tersi (burada kapatılacak bir şey yok). Küçülüp
   yukarı çekilince kartın ARDINDAN doğan bir güneş oluyor; `.fs--fill`in aynı
   düzeltmesi, `/gelisim` hero'sunda da var (orada `.gx-who` etiketiyle
   çakışıyordu). `.fs` zaten `overflow: hidden`, yani üst yarısı kırpılır.

   Yarım kırpılmış KÜÇÜK bir disk de denendi ve elendi: panelin üst şeridi
   ince, orada duran sarı bir yay güneş değil "ekranda kalmış bir nokta"
   okunuyordu. Köşeye çekilmiş BÜYÜK ve yumuşak hâli ışık okunur; etiket
   `.fs-label--sky`in kendi `text-shadow`u sayesinde üstünde okunur kalır.

   ŞU AN HİÇBİR ŞEY BOYAMIYOR: panel 2026-08-31'de `fs--bare`e geçti ve gök
   gizli (`display: none`). Kural SİLİNMEDİ — varyant şablondan tek sınıfla
   geri alınabiliyor ve o gün bu düzeltme aynı anda gerekiyor (Site.css'teki
   `.fs--fill .fs-sky::before` kuralının aynı gerekçesi). */
.px-panel .fs-sky::before {
  top: -32px; left: -28px; right: auto; width: 74px; height: 74px;
  box-shadow: 0 0 44px 18px rgba(255, 216, 77, .24);
}

/* Deneme rozeti — etiket satırının sağına yaslı. İçeriği bir DURUM değil
   TEKLİF ("7 gün ücretsiz", 2026-09-10); "Açık" gitti çünkü panelin açık
   olduğunu kartın başlığı ve dört satırın hepsi zaten söylüyordu.
   `white-space: nowrap` ŞART: dize eski "Açık"ın üç katı ve sarınca rozet iki
   satıra çıkıp etiket satırının yüksekliğini paneldeki her şeyle birlikte
   kaydırıyor; `flex: none` da app adının rozeti ezmesini engeller. */
.px-state {
  margin-left: auto; flex: none; white-space: nowrap;
  padding: 4px 12px; border-radius: var(--r-full);
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.34);
  font-size: .9em; font-weight: 800; color: #fff;
}

.px-pcard { gap: 13px; }

/* Yedi gün. NOKTALAR BİR İLERLEME ÇUBUĞU DEĞİL: hepsi aynı, hiçbiri
   "harcanmış" değil — deneme daha başlamadı. Yarısı dolu bir bar burada
   olmayan bir durumu anlatırdı (gelişim çemberindeki "veri taşımaz" kuralı). */
.px-days { display: flex; align-items: center; gap: 10px; }
.px-dots { display: inline-flex; gap: 5px; }
.px-dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 34%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 52%, transparent);
}
.px-days b {
  font-family: var(--font-head); font-size: 1.05em; color: var(--tx1);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .px .px-days b { color: #EAF1FF; }

/* Dört satır: solda etiket, sağda değer. Dördü de bir ENDİŞEYE "yok/kapalı"
   diye cevap veriyor, o yüzden değer sütunu hizalı ve kalın. */
.px-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.px-rows li {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 0;
  font-size: .96em; color: var(--tx2);
}
/* Satırları KILCAL ÇİZGİ ayırır (dekoratif renkli şerit yasağı) ve son satır
   çizgisiz kalır — yoksa kartın dibinde asılı bir çizgi durur. */
.px-rows li + li { border-top: 1px solid var(--border); }
.px-rows li > i { flex: 0 0 18px; color: var(--blue); font-size: .95em; }
.px-rows li > span { flex: 1 1 auto; }
.px-rows li > b { color: var(--tx1); font-family: var(--font-head); }
[data-theme="dark"] .px .px-rows li { color: #AFC0E4; }
[data-theme="dark"] .px .px-rows li > b { color: #EAF1FF; }
[data-theme="dark"] .px .px-rows li + li { border-top-color: rgba(255,255,255,.12); }

.px-pnote {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0; font-size: .84em; line-height: 1.45;
  color: rgba(255,255,255,.92);
}
.px-pnote i { margin-top: .18em; }

/* ---- ÇIPLAK PANEL (2026-08-31, kullanıcı kararı: *"mavi bg'yi kaldır,
   özellikler sayfasındaki kartlar gibi gölgeyle"*) --------------------------
   Zemin, gök ve panel gölgesi Site.css'in `fs--bare` varyantından gelir.
   Burada, `.fs-label--sky` dışında GÖĞÜN ÜSTÜNDE duran her şeyin mürekkebi
   yeniden yazılmak zorunda: ikisi de beyaz üstüne kurulmuştu ve krem zeminde
   GÖRÜNMEZ olurlar — hiçbir şey hata vermez.

   • `.px-state` (o gün "Açık") cam rozetti (%22 beyaz zemin + %34 beyaz kenar +
     beyaz metin) ve krem zeminde GÖRÜNMEZ oluyordu. Bir dönem site çip diline
     döndü (yüzey + güçlü kılcal kenar + `--tx1`); 2026-09-10'da rozet vaadin
     kendisini taşımaya başlayınca (bkz. yukarısı) o nötr çip fazla sessiz
     kaldı ve **dolu `--btn` pili** oldu — ayrıntısı aşağıdaki bloğunda.
   • `.px-pnote` (7. gün notu) `--tx2`ye iner; ikonu `--blue-ink`, çünkü ham
     `--blue` bu boyutta gece zemininde grafik eşiğini zorluyor.
   • `.fs-card`ın `flex: 1` (basis 0) + `align-content: center`i sıfırlanır: o
     ikisi varyantın kolonu DOLDURMASI gereken panelleri için. Buranın boyu
     içerikten geliyor (`.px-panel { flex: none }`) ve kartın altında ayrıca
     bir not satırı var — basis 0 kartı nota karşı sıkıştırır. */
.px-panel.fs--bare .fs-card { flex: 0 0 auto; align-content: normal; }
/* DOLU PİL, NÖTR ÇİP DEĞİL (2026-09-10, kullanıcı: *"7 gün ücretsiz biraz
   daha göze çarpan olsun"*). Rozet artık bir durum değil sayfanın vaadi;
   yüzey + kılcal kenar + `--tx1` mürekkep onu etiket satırının gürültüsüne
   karıştırıyordu.
   • Renk `--btn`, YENİ BİR TON DEĞİL: sitenin eylem mavisi, `.btn-primary`nin
     zemini. Beyaz metinle **5.17** — AA'yı rahat geçer ve `--btn` koyu temada
     da #2563EB kaldığı için TEK KURAL iki temayı birden karşılar (koyu tema
     override'ı yok; `.px-promo`nun 5a'daki aynı kazancı).
   • Kenarlık ve gölge YOK: dolu renk zaten ayrışıyor, hale kuralı burada da
     geçerli. Punto .82 → .9em, dolgu 3/11 → 4/12 — pil BÜYÜMEZ, yalnız
     okunur olur.
   • Yeşile KAÇMAZ: dolu yeşil pil bu sayfada indirim sinyali (`.px-promo`),
     iki ayrı iddia aynı renkle konuşamaz. */
.px-panel.fs--bare .px-state {
  background: var(--btn);
  border: none;
  color: #fff;
}
.px-panel.fs--bare .px-pnote { color: var(--tx2); }
.px-panel.fs--bare .px-pnote i { color: var(--blue-ink); }

/* ----------------------------------------------------------------------------
   4) Planlar
---------------------------------------------------------------------------- */
.px-sec { padding-top: calc(var(--sec-pad) * .75); }
/* SSS bölümünün alt dolgusunu Site.css §16'nın `.section:has(+ .cta-sec)`
   kuralı sıfırlar ve burada da öyle olmalı: lacivert bant kendi dolgusunu
   taşıyor, ikisi toplandığında bant sayfadan kopmuş gibi durur. Kural
   KARDEŞLİK arıyor — kapanış `.px` sarmalayıcısının İÇİNDE ve SSS bölümünün
   kardeşi olarak kalmak zorunda (Uyku sayfasındaki aynı tuzak). */

/* Aylık/yıllık seçici kartların ÜSTÜNDE ve ORTADA, TEK tane. Kart-içi olduğu
   dönemde Bireysel aylık, Aile yıllık kalabiliyordu: yan yana duran iki fiyat
   farklı dönemleri gösteriyor, fiyat tablosunun tek işi olan karşılaştırma
   sessizce ölüyordu. JS kapsamı bu yüzden kart değil `[data-bill-scope]`. */
.px-bill {
  display: inline-flex; width: fit-content;
  background: var(--blue-ghost);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 4px;
}
/* Ortak seçici ORTADA durur. Kural taban `.px-bill`den SONRA gelmek zorunda:
   aynı özgüllükte (0,1,0) sonra yazılan kazanır — önce yazıldığında taban
   `display: inline-flex`i geri veriyor, inline kutuda `margin: auto`
   ortalamıyor ve seçici sola yapışıyor, hiçbir şey hata vermeden. */
/* GİRİŞ YIĞINI İNCELTİLDİ — kartlar fold'u kırsın (2026-09-02, tasarım
   konseyi, editoryal mercek). ÖLÇÜLEN SORUN: `#planlar` 1328px'lik bir
   sandviçti ve içi %45'ti — kartların ÖNÜNDEKİ ambalaj (363px) ile
   ARKASINDAKİ kuyruk (363px) matematiksel olarak eşitti. Sonuç: kartların
   tepesi y=895, fold 900 → 1440×900'de ziyaretçi ilk ekranda kartlardan
   **5 piksel** görüyordu, yani ilk ekran ne hero'ya ne tabloya aitti.
   Üç kural, üçü de yalnız bu sayfada; `--sec-pad` token'ına DOKUNULMADI ve
   `.sec-head`in 720px'lik tabanı sitenin geri kalanında duruyor:
     - 860px: 40px'lik başlık ("Denemeden sonra devam etmek istersen" ≈ 805px)
       720'ye sığmayıp İKİ SATIRA sarıyordu. Tek satıra inince ~58px kazanç —
       ve ölçek kademesi kendiliğinden düzeliyor: h1 (47px, tek satır) yeniden
       sayfanın en büyük olayı, çünkü 2×40px ortalanmış bir blok 1×47px'i
       kütle olarak yeniyordu.
     - `.sec-head` alt marjı 54 → 32 (~22px), seçici alt marjı 30 → 22 (~8px).
   TERS YÖN ELENDİ: "h1'i büyüt" (2.95 → 3.4rem) hesaplandı — kopya kolonu
   1440'ta 704px ve h1 o puntoda iki satıra sarıyor, kazancın çoğunu geri
   veriyordu. Fold'a karşı çalışan bir büyütme yapılmadı. */
.px-sec .sec-head { max-width: 860px; margin-bottom: 32px; }

.px-bill--shared {
  display: flex; width: fit-content;
  margin: 0 auto clamp(18px, 2.4vw, 22px);
}
.px-bill-opt {
  position: relative;
  /* DOKUNMA HEDEFİ (WCAG 2.5.8): ölçü `min-height` ile verilir, dolguyla
     değil — dolgu iki satıra sarabilecek etiketi de büyütür. */
  min-height: 44px; padding: 0 20px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--r-full);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
  color: var(--tx2);
  transition: background var(--t-xs) ease, color var(--t-xs) ease;
}
/* Seçili dönem `--card-solid` üstünde duruyor — koyu temada #151B3D. Etiket
   `--fs-sm` ve bu düğme sayfanın TEK durum göstergesi: hangi dönemin fiyatı
   okunduğunu yalnız o söylüyor, o yüzden ham pigment değil mürekkep token'ı
   okur. `--blue-ink` ile 7.65:1 (aktif dil rozetiyle
   birebir aynı tuzak, aynı çözüm — bkz. UI-Templates "küçük renkli metin").
   Zemin DEĞİŞMEDİ: koyulaştırmak seçili düğmeyi kapsayıcısından ayıran şeyi
   (yüzeyin açıklığı) zayıflatırdı; açılması gereken mürekkepti. */
.px-bill-opt.is-on { background: var(--card-solid); color: var(--blue-ink); box-shadow: var(--shadow-sm); }

/* "2 ay ücretsiz" — yıllık düğmesinin İÇİNDE, ikinci bir rozet olarak değil.
   Ayrı bir rozet olsaydı seçicinin yanında duran ÜÇÜNCÜ bir öğe olur ve
   hangi düğmeye ait olduğu belirsizleşirdi. Mürekkep yeşil aile (`.px-promo`
   ve ana sayfanın `.ptease-promo` ile tek ses); punto bir kademe küçük, yani
   etiketin kendisiyle yarışmaz.
   Düğme `min-height: 44px` (WCAG 2.5.8) ve rozet SATIR İÇİ olduğu için o ölçü
   bozulmaz. Dar ekranda rozet gizlenir: 390px'te "Yıllık 2 ay ücretsiz" iki
   satıra sarıp seçiciyi büyütüyordu.
   BİLGİNİN İKİNCİ KOPYASI ŞART ve kartın yıllık fiyat satırındadır: rozet
   460px altında kaybolduğu için tek kopya olsaydı "2 ay ücretsiz" küçük
   telefonda HİÇBİR YERDE görünmezdi. (Bu tam olarak bir kez oldu — ikinci
   kopya `.px-after` satırındaydı ve o satır 2026-09-02'de silindi.) */
.px-bill-save {
  margin-left: 7px;
  font-size: var(--fs-xs); font-weight: 700;
  color: color-mix(in srgb, var(--cat-kesfet-deep) 55%, var(--tx1));
}
[data-theme="dark"] .px-bill-save { color: color-mix(in srgb, var(--cat-kesfet) 62%, #ffffff); }
@media (max-width: 460px) { .px-bill-save { display: none; } }

/* GENİŞLİK 940 → 1000: SAYFANIN OMURGASI (2026-09-02, tasarım konseyi).
   Sayfa yukarıdan aşağı BEŞ farklı ölçü kullanıyordu — 1180 (hero) · 720
   (sec-head) · 940 (kartlar) · 720 (notlar) · 1000 (kapanış kutusu) — ve
   hiçbirinin sol kenarı bir diğeriyle hizalı değildi (hero x=130, kartlar
   x=250, kapanış x=220). Göz aşağı inerken tutunacak dikey bir eksen
   bulamıyordu: sayfa "hizalanmış" değil "ortalanmış" okunuyordu, ikisi aynı
   şey değil. 1000'e çıkınca sayfanın İKİ DOLU BLOĞU (kartlar + kapanış
   kutusu) aynı eksene oturur ve ölçü ailesi üç kademeye iner:
   1180 (hero) / 1000 (dolu bloklar) / 860-720 (metin).
   940'ın dokümante edilmiş bir gerekçesi yoktu (arandı, `Pricing.md`de
   geçmiyor). Yan fayda: kartlar +60px, fayda satırlarının sarması azalır.
   980px altında zaten tek kolona düşüyor, mobil etkilenmiyor. */
.px-cards {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.6vw, 26px);
  align-items: stretch;
  max-width: 1000px; margin-inline: auto;
}

.px-plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-xl);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) ease;
}
.px-plan:hover { transform: translateY(-6px); }

/* ORTAK RAY — iki kartın SATIRLARI aynı hattan başlar (2026-09-02, tasarım
   konseyi, görsel mercek). ÖLÇÜLEN SORUN: kartlar `align-items: stretch` +
   `.px-cta { margin-top:auto }` sayesinde yalnız TEPEDEN ve DİPTEN hizalıydı,
   aradaki her şey serbest yüzüyordu. Ölçüm (1440px): Bireysel'in fayda
   maddeleri y≈738·772·807·842·877, Aile'ninkiler y≈808·843·878 — yani
   **Bireysel'in ÜÇÜNCÜ maddesi Aile'nin BİRİNCİ maddesiyle aynı hizadaydı.**
   Sebep zincirleme: `.px-plan-text` Bireysel'de tek, Aile'de iki satır.
   Bir fiyat tablosunun tek işi yatay okumaktır ve burada yatay okuma üçüncü
   satırda ölüyordu.

   YEDİ RAY: head · price · promo · adults · feats · diff · cta.
   `extra` rayı 2026-09-04'te DÜŞTÜ: mobil akordeon kaldırıldı (kullanıcı
   kararı "hepsini göster"), `.px-extra` ve `.px-more` artık yok.
   `.px-diff` yalnız Aile'de basılır; o rayı Bireysel'de BOŞ bırakmak
   kasıtlı (karşılaştırmada "burada bir şey var, ötekinde yok" demek) ve
   CTA'nın kayması `.px-cta { grid-row: -2/-1 }` ile engellenir.
   **Karta yeni bir çocuk eklenirse aşağıdaki `repeat()` de artırılmak
   ZORUNDA** — yoksa fazla öğe son rayın içine yığılır, hiçbir şey hata
   vermez. Sayının geçmişi (hepsi 2026-09-02): `promo` eklendi 9 → 10 ·
   listeler 3 maddeye inince `extra`+`more` düştü 10 → 8 · `.px-after`
   silindi 8 → 7 · `text` silindi, `diff` kendi rayına çıktı, `points` 5'e
   dönünce `extra` geri geldi 7 → 8 · akordeon silindi, `extra` düştü 8 → 7
   (2026-09-04).

   İKİ KORUMA:
   - `@supports`: subgrid desteklemeyen tarayıcıda kural sessizce düşer ve
     bugünkü flex davranışı aynen kalır (progressive enhancement, JS yok).
   - `min-width: 981px`: 980px altında kartlar TEK KOLONA iniyor ve orada
     `grid-row: 1/-1` ikisini de aynı kolona koyup ÜST ÜSTE bindirirdi.
     Zaten alt alta yığılı kartlarda satır hizası diye bir şey de yok. */
@media (min-width: 981px) {
  @supports (grid-template-rows: subgrid) {
    /* `row-gap: 0` ŞART ve ölçülmüş bir tuzağı kapatıyor: `.px-cards`ın `gap`
       KISAYOLU satır boşluğunu da veriyor (26px). Tek satır varken hiç
       görünmüyordu; subgrid dokuz satır açınca aynı boşluk kartın HER
       satırının arasına girdi — 8 × 26 = **208px**, yani kart 598 → 806px
       oldu ve ritim turunun kazandığı 185px'i tek başına geri yedi. Satır
       aralıkları zaten çocukların kendi marjlarında.
       Kolon boşluğu KORUNUR (iki kart arası), o yüzden `gap: 0` DEĞİL. */
    .px-cards { grid-template-rows: repeat(6, auto) 1fr; row-gap: 0; }
    .px-plan {
      display: grid; grid-row: 1 / -1; grid-template-rows: subgrid;
    }
    /* CTA'ya BURADA DOKUNULMAZ. `.px-cta`nın kendi `margin-top: auto`su
       grid'de de çalışıyor (öğeyi kendi rayının dibine iter) ve son ray zaten
       `1fr`. Buraya bir `.px-cta { ... }` bloğu yazmak iki şeyi birden
       kırıyordu: (1) o blok dosyada asıl kuraldan ÖNCE geldiği için asıl
       kural onu eziyordu, (2) `test_pricing_controls_are_real_touch_targets_
       on_a_phone` `.px-cta {` metnini regex'le ARAR ve İLK eşleşmeyi okur —
       min-height taşımayan bir override, dokunma hedefi testini sessizce
       yanlış bloğa bakmaya yönlendiriyordu. */
  }
}

/* ---- Bireysel: AÇIK KİDLİO MAVİSİ ---- */
.px-plan--blue {
  /* Avatar halkası kartın KENDİ yüzeyi. `--px-blue-bg` iki temada da SOLID
     (açıkta color-mix, koyuda `--card`), yani `box-shadow` rengi olarak
     geçerli — gradyan olsaydı bildirim düşerdi. */
  --px-ring: var(--px-blue-bg);
  background: var(--px-blue-bg);
  border: 1px solid var(--px-blue-bd);
  box-shadow: var(--shadow-sm);
}

/* ---- Aile: LACİVERT PREMIUM ----
   Tek görsel vurgu odur. Yüzey `--night-bg`, yani sitenin gece ailesi; yeni
   bir renk uydurulmadı. */
.px-plan--navy {
  --px-navy-ring: #16224E;   /* gradyanın orta durağı — avatar halkası için */
  --px-ring: var(--px-navy-ring);
  background: var(--night-bg);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow-lg);
  color: var(--night-tx);
}
.px-plan--navy h3,
.px-plan--navy .px-price b { color: var(--night-tx); }
.px-plan--navy .px-price small,
.px-plan--navy .px-adults,
.px-plan--navy .px-feats li { color: var(--night-tx2); }

/* ---- Aile, KOYU TEMADA: gece gradyanı yerine kart ailesinin BİR KADEME
   AÇIĞI (2026-08-26, kullanıcı kararı; gerekçe ve ölçümler §1'deki
   `[data-theme="dark"] .px` bloğunda).
   Yüzey = #1F2C5B → OKLCH L .3095, nötr karttan **+.072**: gözle ayrılan tek
   kademe. Değer ELLE YAZILMAZ, formülden gelir — kart ailesi 2026-08-26 akşamı
   #1B2A46'dan #151B3D'ye inince bu yüzey de onunla birlikte indi (o gün
   #223A63 idi), tam olarak istenen davranış.
   Yeni renk uydurulmadı — aynı `color-mix(in oklch, var(--blue) X%,
   var(--card-solid))` formülü, yalnız oran Bireysel'in eski %32'sinin ALTINDA:
   vurgu parlaklıktan değil KADEME FARKINDAN geliyor. `in oklch` şart, sRGB'de
   açık uçta chroma kaybolur ve yüzey griye kaçar; karışım geçersiz olursa kart
   ZEMİNSİZ kalır (`.cta-box`taki aynı gerekçe).
   Kenar da belirginleşir: kendi yüzeyine karşı RGB toplam farkı nötr kartın
   kenarında 95, burada **168** — çerçeve okunur ama yüzeyin önüne geçmez.
   HALE/GLOW EKLENMEDİ: derinliği tabandaki `--shadow-lg` ve yüzeyin açıklığı
   veriyor; koyu temada renkli bir parıltı kartın çevresine yayılan bir leke
   olurdu (dünya kartlarının halesinin kaldırılma gerekçesinin aynısı).
   Özgüllük (0,2,0) tabanın (0,1,0) üstünde, yani sıra yük taşımıyor —
   `border-color` longhand'i de taban `border` shorthand'ini böyle ezer. */
[data-theme="dark"] .px-plan--navy {
  /* Avatar halkası yüzeyle BİRLİKTE taşınmak zorunda: gradyanın orta durağına
     (#16224E) sabit kalsaydı beş daire kartından KOYU bir halka takardı. Bir
     literal olduğu için kart ailesi her değiştiğinde ELLE taşınır — aşağıdaki
     karışımın o günkü sonucu (bugün `--card-solid` #151B3D ile #1F2C5B). */
  --px-navy-ring: #1F2C5B;
  background: color-mix(in oklch, var(--blue) 18%, var(--card-solid));
  border-color: rgba(255, 255, 255, .28);
  color: var(--tx1);
}
/* Yüzey kart ailesine girdiği için METİN de kartın token'larını okur;
   `--night-*` LIGHT'ta kalır — orada kart gerçekten bir gece yüzeyi.
   Ölçüm (#1F2C5B üstünde): başlık/fiyat 11.80 · üstü çizili fiyat, "sonrasında"
   satırı, fayda listesi **8.81**. Öncesinde bu satırlar `--night-tx2` ile
   gradyanın nerede durduğuna göre 6.47-9.81 arasında değişiyordu: aynı dipnot
   kartın tepesinde ve dibinde farklı okunuyordu. */
[data-theme="dark"] .px-plan--navy h3,
[data-theme="dark"] .px-plan--navy .px-price b { color: var(--tx1); }
[data-theme="dark"] .px-plan--navy .px-price small,
[data-theme="dark"] .px-plan--navy .px-adults,
[data-theme="dark"] .px-plan--navy .px-feats li { color: var(--tx2); }

/* ---- İNDİRİMİN ŞARTI: fiyatın ALTINDAKİ küçük rozet (2026-09-02) ----
   Sayfanın tek dönüşüm kaldıracı (%50) bir dönem yalnız üstü çizili gri
   sayıdan ve İKİ BLOK aşağıdaki `.px-fine` dipnotundan okunuyordu — yani
   ödülün ARKASINDA ve sayfanın en soluk tipografisinde.

   RENK YENİ DEĞİL: ana sayfanın `.ptease-promo` rozetiyle AYNI aile
   (`--cat-kesfet`) ve AYNI ölçülmüş karışım oranları. İkisi de "lansman
   indirimi" sinyali; ayrı renk vermek aynı iddiayı iki sesle konuşturur.

   TABAN `--px-ring`, `--card-solid` DEĞİL — ve bu kritik: rozet SAYFA
   zemininde değil KART yüzeyinde duruyor ve dört yüzeyden ÜÇÜ koyu
   (Aile açık temada bile bir gece yüzeyi, `--night-bg`). `--px-ring` her
   kartın kendi yüzeyini taşıdığı için karışım dördünde de doğru zemine
   oturur. Bu yüzden VARSAYILAN koyu-yüzey formülü; tek istisna açık temadaki
   Bireysel kartı, o da kendi kuralında.
   MÜREKKEP YÖNÜ TERS ÇEVRİLİR: koyu yüzeyde beyazla, açık yüzeyde `--tx1`
   ile karışır — `-deep` varyantı açık zemin için koyulaştırılmıştır ve gece
   zemininde ters yönde çalışır (sitenin her yerindeki aynı kural).
   TİNT OKLCH'DE: sRGB'de açık uçta chroma kaybolur; `in oklch` silinirse
   renk eskiye dönmez, `color-mix` GEÇERSİZ olur ve rozet zeminsiz kalır. */
/* DOLU YEŞİL PİL, BEYAZ YAZI (2026-09-04, kullanıcı kararı: “yeşil çip yeşil
   kalsın ama üstündeki yazı beyaz olsun”). Rozet artık kartının zeminiyle
   KARIŞMIYOR: tek renk, dört yüzeyde de aynı.

   NEİÇİN ÖNCE BÖYLE DEĞİLDİ — ve neden artık dert değil: zemin `--px-ring`le
   karışıyordu, yani her kartın kendi yüzeyini takıp yeşille yalnız tintleniyordu
   (açık Bireysel kartında zemin/kart **1.07:1**, yani pil değil kartın üstünde
   duran yeşil bir yazıydı). Karışım gidince dört kural ikişer satırdan tek
   kurala düştü: `--px-ring` tint'i, açık temadaki Bireysel istisnası ve onun
   koyu tema geri alımı artık gereksiz.

   TONU BEYAZ SEÇTİ, BEĞENİ DEĞİL: yeşil aile beyaz yazıyla tek tek ölçüldü —
   `--cat-kesfet` (parlak) **2.27**, `-deep` **3.35**, deep70+ink 4.10,
   deep50+ink 4.64, deep30+ink **5.35**, `-ink` 6.71. İlk üçü AA tabanının (4.5)
   ALTINDA: marka yeşili beyaz yazı TAŞIMAZ, taşıması için koyulaşması gerekir.
   Seçilen deep30+ink rgb(9,122,85): beyazla 5.35, yani AA'yı rahat marjla
   geçen EN CANLI ton. Daha açık bir yeşil istenirse yazı beyaz KALAMAZ.
   Pilin kartla kontrastı: 4.72 · 5.35 · 3.13 · 2.50 (açık Bireysel · açık Aile ·
   koyu Bireysel · koyu Aile) — dördünde de dolu bir nesne olarak okunuyor.

   ÖLÇÜM `getComputedStyle` İLE YAPILMAZ: `color-mix(...)` hesaplanmış değer
   olarak `oklch()`/`color()` döner ve sRGB sanan bir okuma hata vermeden
   saçma sayı verir (ilk ölçümde açık Bireysel 1.55 çıkmıştı). Renk canvas'a
   basılıp `getImageData` ile okunur. */
.px-promo {
  --promo-bg:  color-mix(in srgb, var(--cat-kesfet-deep) 30%, var(--cat-kesfet-ink));
  --promo-ink: #ffffff;
  margin: 9px 0 0;
}
.px-promo > span {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 7px;
  padding: 4px 12px; border-radius: var(--r-full);
  background: var(--promo-bg);
  font-family: var(--font-head); font-weight: 800;
  font-size: var(--fs-sm); color: var(--promo-ink);
  letter-spacing: .01em;
}
/* İNDİRİMLİ SAYI ROZETİN İÇİNDE (2026-09-02, kullanıcı kararı): manşet
   standart fiyata dönünce bu sayının başka evi kalmadı. Şartla AYNI pilde
   duruyor ki teklif ile karşılığı tek nesne olarak okunsun.
   BİR KADEME ÖNDE ama pili bölmüyor: aynı yeşil mürekkep, yalnız `--fs-md`
   (şart `--fs-sm`) ve 900 ağırlık. Ayrı bir RENK verilmedi — pilin kendi
   kontrastı dört yüzeyde de ölçülmüştü (4.79 · 6.72 · 7.41 · 5.87, hepsi AA)
   ve ikinci bir mürekkep o ölçümü geçersiz kılardı.
   `[hidden]` İÇİN KURAL YAZILMAZ: bu `<b>`lere `display` verilmiyor, yani
   tarayıcının `[hidden] { display: none }` varsayılanı geçerli kalıyor.
   Bir gün buraya `display` yazılırsa `.px-price > span[hidden]`in yanına
   bunun da eklenmesi ŞART, yoksa aylık VE yıllık sayı aynı anda görünür. */
.px-promo b {
  font-size: var(--fs-md); font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.px-plan-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.px-plan-ico {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--r-lg);
  background: var(--blue-ghost); color: var(--blue);
  font-size: 1.15rem;
}
/* Lacivert kartta açık tint zemin ters yönde çalışır (kart zaten koyu): rozet
   DOLU, glyph beyaz. Gradyanın açık ucu %70'ten önce biter — glyph gövdesi
   koyu uçta kalırsa beyaz grafik eşiğinin (3:1) altına düşer. */
.px-plan--navy .px-plan-ico {
  background: var(--grad-brand); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(46, 139, 247, .8);
}
/* KOYU TEMADA RENKLİ IŞIMA YOK (2026-09-02, tasarım konseyi bulgusu).
   Yukarıdaki mavi `box-shadow` açık temada doğru: krem sayfada lacivert kartın
   rozeti yükselmiş görünmeli. Koyu temada aynı gölge, sitenin kayıtlı kuralını
   çiğniyordu — "yükseklik yüzeyin AÇIKLIĞINDAN gelir" (`Site.css --shadow-*`)
   ve renkli parıltı gece zemininde yayılan bir leke olur. Aynı gerekçe kart
   ailesinin kendisinde de yazılı: *"Hale/glow EKLENMEZ"* (bkz. Aile kartının
   koyu tema yüzeyi) — rozet o kuralın dışında kalmıştı, şimdi eşitlendi. */
[data-theme="dark"] .px-plan--navy .px-plan-ico { box-shadow: none; }
.px-plan-head h3 { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
.px-badge {
  margin-left: auto;
  padding: 5px 13px; border-radius: var(--r-full);
  background: var(--grad-brand); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs);
  white-space: nowrap;
}

/* ---- Fiyat: üstü çizili liste → indirimli ilk dönem ----
   Üstü çizilen sayı "eski fiyat" DEĞİL, aynı planın liste fiyatı: indirim
   iddiası uydurma bir zam geçmişine değil, ziyaretçinin AYNI ANDA gördüğü
   komşu sayıya dayanıyor. */
.px-price { margin: 4px 0 2px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.px-price > span { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
/* `[hidden]`i GERİ ALAN kural ŞART. Tarayıcının `[hidden] { display: none }`
   varsayılanı (0,1,0) ile buradaki `display: inline-flex` aynı özgüllükte ve
   yazar sayfası kazanır: kural olmadan aylık VE yıllık fiyat aynı anda
   görünür, yani seçici hiçbir şey yapmıyormuş gibi durur ve hiçbir şey hata
   vermez. Aynı tuzak `.px-after`ın iki satırında da var. */
.px-price > span[hidden] { display: none; }
/* `.px-price s` KURALI 2026-09-02'DE SİLİNDİ, üstü çizili sayı karttan
   çıktığı için (manşet artık standart fiyatın kendisi — bkz. Macros.html).
   Ölçülmüş gerekçesi arşivde duruyor ve GERİ GELİRSE yeniden geçerli: sayı
   `--tx3`te kalmalıydı (açık 2.57 · koyu 6.76) çünkü ödenmeyecek olan oydu.
   Ana sayfanın `.ptease` özeti üstü çizgiyi kendi kuralıyla koruyor. */
.px-price b {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem); color: var(--tx1);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
/* NİTELEYİCİ ("/ay" · "/yıl · ≈124₺/ay") `--tx2`DE, `--tx3`TE DEĞİL
   (2026-08-30, konsey kararı 2): manşetin hemen yanındaki tek sınırlayıcı,
   kartın en sönük üçüncü kademesinde duruyordu.
   ÖLÇÜLDÜ (Bireysel kartının kendi zemininde — açıkta %12 mavi tint
   `#E7F2FF`, koyuda `--card-solid` `#151B3D`): eski `--tx3` açık temada
   **2.57**, yani metin tabanının (4.5) epey ALTINDA; `--tx2` ile **4.68**.
   Koyu tema **11.0**.
   `tabular-nums` ŞART: yıllıkta niteleyici artık bir SAYI taşıyor
   (`≈124₺/ay`) ve iki kartta alt alta okunuyor. */
.px-price small {
  font-size: var(--fs-md); font-weight: 700; color: var(--tx2);
  font-variant-numeric: tabular-nums;
}

/* `.px-after` ("sonrasında 149₺/ay") 2026-09-02'DE SİLİNDİ — manşet standart
   fiyata döndüğü için o satır aynı sayıyı ikinci kez söylüyordu. Var oluş
   sebebi ("kampanya fiyatı kalıcı fiyat sanılmasın", iki persona bunu yanlış
   okumuştu) bugün YAPISAL olarak imkânsız: kalıcı fiyat manşette, kampanya
   ise "ilk ay" niteleyicisiyle indirim rozetinin içinde. Satır geri gelirse
   bu gerekçe yeniden okunur — mürekkebi `--tx2` olmalıydı, `--tx3` değil. */

/* ---- Beş yetişkin: AVATAR DİZİSİ, cümle değil ----
   Üst üste binen daireler "aynı hesaba bağlı beş kişi"yi tek bakışta anlatır;
   sayı `adults`tan geldiği için dizi ile cümle asla ayrışamaz.
   KILCAL AYRAÇ BURADA, çünkü `.px-plan-text` (tier.text) 2026-09-02'de silindi
   (avatar satırıyla aynı şeyi söylüyordu) ve ayraç onun üstündeydi — taşınmasa
   fiyat bloğu ile faydalar arasındaki tek ayrım kaybolurdu. */
.px-adults {
  display: flex; align-items: center; gap: 11px;
  margin: clamp(14px, 2vw, 18px) 0 0;
  padding-top: clamp(14px, 2vw, 18px);
  border-top: 1px solid var(--border);
  font-size: var(--fs-md); font-weight: 700; color: var(--tx2);
}
.px-plan--navy .px-adults { border-top-color: rgba(255,255,255,.16); }
.px-avatars { display: inline-flex; flex: 0 0 auto; }
.px-av {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--grad-brand); color: #fff;
  font-size: .72rem;
  /* Daireleri birbirinden ayıran halka `box-shadow`, `border` DEĞİL: kenarlık
     30px'in içinden yer yer, yani glyph küçülür ve avatarlar farklı ağırlıkta
     okunur.
     HALKA RENGİ KARTIN KENDİ YÜZEYİ ve artık İKİ KART İÇİN de tanımlı
     (2026-09-02): avatar satırı Bireysel'e de gelince `--px-navy-ring` orada
     TANIMSIZ kalıyordu → `box-shadow` bildirimi tamamen geçersiz olur ve halka
     sessizce düşerdi (mavi kartta bitişik daireler tek bir leke). `--night-bg`
     bir GRADYAN olduğu için doğrudan kullanılamaz; lacivert tarafta ayrı
     literal token (`--px-navy-ring`) bu yüzden var ve yüzeyle birlikte taşınır. */
  box-shadow: 0 0 0 2px var(--px-ring);
}
/* Binme KOMŞULUKLA verilir, `--i` ile değil: sayı `adults`tan geliyor ve
   şablona indeks yazmak, bir gün 5 değiştiğinde bakılacak ikinci bir yer
   açardı. Alttaki `+` seçici kaç avatar olursa olsun doğru çalışır. */
.px-av + .px-av { margin-left: -10px; }

/* ---- Faydalar ---- */
/* `align-content: start` ÖLÇÜLMÜŞ BİR HİZA HATASINI KAPATIYOR (2026-09-02,
   kullanıcı bildirimi: "soldaki karttaki maddeleri sağdaki ile aynı hizaya
   getir"). Sekiz subgrid RAYININ sekizi de zaten hizalıydı (ölçüldü, 1440px:
   903·960·1011·1044·1082·1160·1205·1372 — iki kartta birebir aynı); kayma
   `feats` rayının İÇİNDEYDİ. Sebep: bu `ul` bir ızgara ve `auto` rayları,
   varsayılan `align-content: normal` (= stretch) altında ARTAN YERİ PAYLAŞIR.
   Ray yüksekliği iki kartın büyüğüne göre kurulduğu için (Aile'de 4 madde,
   Bireysel'de 3) Bireysel'in üç maddesi 24px yerine 43px'e ŞİŞİYOR ve
   maddeler satır satır ayrışıyordu: Bireysel 1205·1257·1311, Aile
   1205·1238·1272.
   `start` ile maddeler kendi boylarında kalır, hiza satır satır tutar ve
   ARTAN YER KARTIN DİBİNDE toplanır — kullanıcı kararı bunu açıkça serbest
   bıraktı ("altta boşluk kalması sorun değil"). Ölçüm sonrası: üç maddenin
   üçünde de fark 0px.
   `align-items` DEĞİL, `align-content`: ilki maddeyi kendi rayının içinde
   hizalar (rayları şişiren şey o değil), ikincisi rayların kendisini. */
.px-feats {
  list-style: none; padding: 0;
  margin: clamp(14px, 2vw, 18px) 0 0;
  display: grid; gap: 10px; align-content: start;
}
.px-feats li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs); font-weight: 600; color: var(--tx2);
}
.px-feats li::before {
  content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900;
  flex: 0 0 20px; height: 20px; margin-top: 2px;
  display: grid; place-items: center;
  background: var(--blue-ghost); color: var(--blue);
  font-size: var(--fs-xs);
  border-radius: 50%;
}
.px-plan--navy .px-feats li::before { background: rgba(108, 180, 255, .20); color: #9CCBFF; }

/* ---- AİLE FARKI: `.px-diff` — listenin TAMAMINDAN sonraki tek ek satır ----
   Fayda maddeleriyle AYNI geometri (20px rozet + 10px boşluk) ama üç kanaldan
   ayrışır: yeşil mürekkep + 700 ağırlık + ✓ yerine ARTI ("listenin ÜSTÜNE
   eklenen şey"). Renk yeni değil, `.px-promo`nun ölçülmüş koyu-yüzey formülü
   (`--cat-kesfet` 62% + beyaz); yeşil bu sayfada "kazanç" sesi.
   Mürekkep beyazla karışır, `-deep` ile DEĞİL — satır yalnız lacivert kartta
   yaşıyor. Açık (mavi) karta bir gün yazılırsa formül TERS döner ve
   `.px-plan--blue` için `-deep + --tx1` çifti ayrıca yazılmalıdır.
   Gerekçe ve yerleşim kuralı: docs/ui/Pricing.md. */
.px-diff {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 18px;
  font-size: var(--fs); font-weight: 700;
  color: color-mix(in srgb, var(--cat-kesfet) 62%, #ffffff);
}
.px-diff::before {
  content: "\f067"; font-family: "Font Awesome 5 Free"; font-weight: 900;
  flex: 0 0 20px; height: 20px; margin-top: 2px;
  display: grid; place-items: center;
  background: var(--cat-kesfet-deep); color: #fff;
  font-size: var(--fs-xs);
  border-radius: 50%;
}

/* Buton kartın DİBİNE sabitlenir. İki planın fayda sayısı eşit olsa bile
   metinlerin sarma sayısı eşit değil; `margin-top: auto` olmadan kısa kartın
   butonu ortada asılı kalır ve altında bir kart boyu boşluk açılır.
   ASGARİ NEFES `auto`dan gelmez (CSS'te "auto ama en az 18px" yazılamaz):
   üstteki bloğun kendi alt marjı verir, `auto` yalnız KALANI yutar. */
.px-cta {
  margin-top: auto;
  /* SON RAYA ÇAKILI (subgrid rejiminde). Otomatik yerleşime bırakılsaydı
     Bireysel'de `.px-diff` basılmadığı için CTA bir ray YUKARI kayar ve iki
     kartın butonu ayrışırdı. Flex rejiminde (<=980px) `grid-row` yok sayılır,
     `margin-top: auto` işi orada da görüyor. Kural BU bloktadır, @supports
     içinde ayrı bir `.px-cta { }` DEĞİL: orada yazılsa hem dosyada asıl
     kuraldan önce gelip ezilirdi hem de dokunma hedefi testi `min-height`
     taşımayan o bloğu okurdu. */
  grid-row: -2 / -1;
  /* DOKUNMA HEDEFİ (WCAG 2.5.8) her genişlikte: ölçü `min-height` ile verilir,
     dolguyla değil — dolgu iki satıra sarabilecek bir etiketi de büyütür. */
  min-height: 46px;
}
/* `.px-adults` BU LİSTEDE DEĞİL: onun altındaki `.px-feats` zaten kendi üst
   marjını taşıyor ve ikisi (flex kolonunda marjlar birleşmez) 36px ediyordu —
   avatar satırı fayda listesinden kopuk duruyordu. */
.px-feats { margin-bottom: 18px; }


/* Maskot SERBEST durur: kutu/kenarlık/zemin yok, derinliği yalnız drop-shadow
   verir (sitenin her yerindeki maskot kuralı). Ölçü KÜÇÜK kalır — kapanış
   kutusundaki 190px'lik poz sayfanın çağrısını taşıyor, buradaki yalnız iki
   satırlık notun yanında duruyor; büyütmek notu bir bölüm başlığına çevirir.
   Alt boşluk NEGATİF: maskot notun kılcal üst çizgisine doğru sarkar, yani
   çizginin üstünde duran ayrı bir blok gibi değil o satırın parçası okunur. */
/* KUYRUK TEK KOMPOZİSYON (2026-09-02, tasarım konseyi — üç mercek de aynı
   yeri işaretledi). Öncesinde maskot · ücretsiz notu · dipnot ÜÇ ayrı
   ortalanmış bloktu ve toplam 363px tutuyordu, kartların önündeki ambalajla
   birebir eşit. Şimdi maskot solda, iki not sağda, kılcal çizgi ikisini de
   kapsıyor. Kazanç ~110-130px ve maskot "bölüm sonu noktası" olmaktan çıkıp
   güvence cümlesinin sesi oluyor.
   `.px-kido`nun eski NEGATİF alt marjı (-6px) burada gereksiz: niyeti
   "maskot çizginin üstünde ayrı bir blok değil, o satırın parçası olsun"du —
   yeni düzende zaten o satırın içinde. */
.px-tail {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 26px);
  max-width: 720px; margin: clamp(22px, 3vw, 30px) auto 0;
  padding-top: 18px; border-top: 1px solid var(--border);
}
.px-tail-txt { min-width: 0; }

.px-kido {
  display: block; flex: 0 0 auto;
  width: min(120px, 26vw); height: auto; margin: 0;
  filter: drop-shadow(0 14px 22px rgba(60, 45, 32, .20));
}
[data-theme="dark"] .px-kido { filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .5)); }

/* <620px: maskot notun ÜSTÜNE çıkar (yan yana iki kolon o genişlikte notu
   4-5 satıra kırardı). Sol yaslı kalır — ortalamak `.px-free`nin ikon+metin
   flex satırını bozar. */
@media (max-width: 620px) {
  .px-tail { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* MASKOT ORTALANIR, METINLER SOLA KALIR (2026-09-10, kullanici istegi).
     Kabin `align-items`i DEGISTIRILMEDI ve sebebi yukaridaki nottur:
     `center` yapmak `.px-free`nin ikon + metin satirini da ortalayip
     bozuyordu. Auto marj yalnizca resmi tasir, kabin hizasina dokunmaz —
     olculdu, maskot 123px solda duruyordu. */
  .px-kido { width: 104px; margin-inline: auto; }
}

/* ---- Kalıcı ücretsiz erişim: KART DEĞİL, küçük not ----
   CTA'sı da yok — burada işi bilgi vermek, bir eyleme çağırmak değil. Dolu
   bir kutu olsaydı iki kartın altında üçüncü bir plan gibi okunur, çözmeye
   çalıştığı karışıklığı ("hangisi ücretsiz?") büyütürdü. */
/* Kılcal çizgi ve dış boşluk artık `.px-tail`de (maskotu da kapsıyor); bu
   kural yalnız notun kendi tipografisi ve ikon hizası. */
.px-free {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 0;
  font-size: var(--fs-md); color: var(--tx2); line-height: 1.55;
}
.px-free > i { flex: 0 0 auto; margin-top: .2em; color: var(--tx3); }
.px-free b { color: var(--tx1); font-family: var(--font-head); }

/* İndirim dipnotu — "kartlardaki fiyat indirimli mi?" sorusunun TEK cevabı.
   Eskiden kartların ÜSTÜNDE nabız gibi atan yeşil bir kutuydu; ziyaretçi
   kartlara indiğinde hangi sayının indirimli olduğunu bilmiyordu. */
.px-fine {
  margin: 10px 0 0;
  font-size: var(--fs-sm); color: var(--tx3); line-height: 1.5;
}

/* ----------------------------------------------------------------------------
   5) Responsive
---------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .px-hero-in { grid-template-columns: 1fr; }
  /* HERO KOPYASI TEK KOLONDA ORTALANIR (2026-09-10, kullanici istegi).
     980px altinda `.px-hero-copy`nin yatay komsusu YOK (olculdu: 900px'te
     tek, 1024'te yan yana), yani sola yasliligin gerekcesi olan "sagdaki
     kart" yerlesimi burada mevcut degil — `/uyku`, `/gelisim` ve
     `/kategoriler` hero'lari ayni cokuste ortali. Esik uydurulmadi, ustteki
     `grid-template-columns` satirinin kendi esigi.
     Dort ogenin ucu ayri kural ister: `p` auto marjla (kendi `max-width`i
     var), `.px-hero-cta` ve `.px-tags` ise FLEX kaplari — `text-align`
     onlarin ogelerini tasimaz, `justify-content` sart. */
  .px-hero-copy { text-align: center; }
  .px-hero-copy > p { margin-inline: auto; }
  .px-hero-cta, .px-tags { justify-content: center; }
  .px-panel-wrap { justify-self: center; }
  .px-cards { grid-template-columns: 1fr; max-width: 520px; }
}

/* MOBİL AKORDEON KALDIRILDI (2026-09-04, kullanıcı: "hepsini göster").
   760px altında her plan yalnız ilk üç faydasını gösterip kalanını
   "Tüm özellikleri gör" düğmesine saklıyordu. `points` 5 maddeye çıkınca
   gizlenen ikisi "Gelişim takibi" ve "Uyku sesleri" oldu — panelde Elif'in
   gelme sebebi ve Murat · Ahmet · Selin'in tek kancası, üstelik panelin 8'i
   mobilde. Gizleme görsel değil FİİLEN bilgi saklıyordu.
   Birlikte silindi: `.pxjs .px-extra` kapanması, `.pxjs .px-more` düğmesi,
   şablondaki `.pxjs` kancası, Pricing.js §2 ve subgrid'in `extra` rayı
   (§4, 8 → 7). Geri gelirse ALTISI birlikte döner. */

@media (max-width: 620px) {
  .px-tags li { padding: 8px 13px; }
  .px-plan { padding: 20px 18px; }
  /* İki buton ALT ALTA VE TAM GENİŞLİKTE, birincil üstte (ana sayfanın fiyat
     özetiyle aynı karar). Sıra DOM'dan gelir — `order` ile çevrilmez, yoksa
     klavye/ekran okuyucu sırası ile görsel sıra ayrışır. */
  .px-hero-cta { flex-direction: column; align-items: stretch; }
  .px-hero-cta .btn { width: 100%; }
}

/* ----------------------------------------------------------------------------
   6) prefers-reduced-motion — kendi bloğu ŞART: global blok yalnız SÜREYİ
   sıfırlar, `transform`la yapılan hover kalkışı orada kalırdı.
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .px-plan:hover { transform: none; }
}