.plan-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--b4);align-items:start}
@media (max-width:991px){ .plan-izgara{grid-template-columns:1fr} }

.plan{padding:var(--b5);display:flex;flex-direction:column;gap:var(--b4)}
.plan-ad{font-size:var(--t7);line-height:var(--t7-s);font-weight:500}
.plan-fiyat{font-family:var(--aile-display);font-size:var(--t5);line-height:var(--t5-s)}
.plan-maddeler{display:flex;flex-direction:column;gap:var(--b2)}
.plan-maddeler li{display:flex;gap:var(--b2);font-size:var(--t9);line-height:var(--t9-s)}
.plan-maddeler svg{
  width:var(--b3);height:var(--b3);flex:none;margin-block-start:calc(var(--b1) / 2);
  fill:none;stroke:var(--vurgu);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.plan-ek{
  font-size:var(--tmicro);line-height:var(--t9-s);color:var(--soluk);
  padding-block-start:var(--b3);border-block-start:1px solid var(--cizgi);
}
.plan-vurgu{border-color:var(--vurgu)}

.fiyat-not{display:flex;flex-direction:column;gap:var(--b3);margin-block-start:var(--b5)}
.fiyat-not p{font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk);max-inline-size:var(--olcu-orta)}

.sss{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--b4) var(--b5)}
@media (max-width:991px){ .sss{grid-template-columns:1fr} }
.sss h3{font-size:var(--t8);line-height:var(--t8-s);font-weight:500;margin-block-end:var(--b1)}
.sss p{font-size:var(--t9);line-height:var(--t9-s);color:var(--soluk)}

/* ============================================================================
   W-40 / DALGA V — fiyat sayfasının YAPI PARİTESİ eklentileri.

   KULLANILAN ORTAK BİLEŞENLER (buraya KOPYALANMADI, olduğu gibi çağrıldı):
   `.iskelet` + `.kas` (süreğen nabız, bilesen.css) · `.bas` / `.bas-orta` ·
   `.kart` · `.sekmeler` / `.sekme` / `.sekme-cubuk` / `.sekme-panel`
   (+ `site.js:sekmeKur`, İKİNCİ bir uygulama yazılmadı) · `.sss` (iki sütunlu
   soru-cevap ızgarası, yukarıda) · `.ist` / `.ist-m` / `.ist-n` / `.ist-e` ·
   `.ikili` · `.akordeon` / `.akordeon-m` / `.akordeon-g` (`<details>`, JS YOK) ·
   `.kaynak-not` · `.cta` · `.dg` / `.dg-cift` / `.dg-3` · `.yt` (yer-tutucu.css) ·
   `.ac` (scroll-reveal, temel.css) · `.gizli-okur` · `.sayi` · `.mono`.

   Aşağıdaki her kural `.fy-` önekli bir sınıfın ALTINDA kapsanmış: bu dosya
   başka bir sayfaya yüklenirse etkisi sıfır, ve ortak bileşenlerin çıplak
   seçicilerine hiç yazılmıyor (kaskad yarışı yok, yükleme sırası önemsiz).
   ============================================================================ */

/* ---- Başlıktaki iki atlama bağlantısı ------------------------------------- */
/* `.bas-orta` metni ortalıyor ama `.dg-cift` bir flex KAPSAYICI: içindeki iki
   bağlantı kendi ekseninde sola yığılır. Ortalama burada veriliyor. */
.fy-capa { justify-content: center; }

/* ÖLÇÜLDÜ (30 Eylül, başsız Chrome + CDP, dört görünüm): `.dg-3` metin
   yüksekliğinde geliyor — 238x16 ve 140x16 — ve parmakla kullanılan bir hedef
   için bu az. `guvenlik.css` aynı kusuru `.iskelet-ust .dg-3`te ölçüp aynı
   düzeltmeyi yapmış; o kural BU kapsayıcıyı görmüyor (bağlantılar `.bas-orta`
   içinde), o yüzden burada kendi kapsamında tekrar veriliyor. Dikey dolgu
   hedefi 48 px'e çıkarıyor: zemin yok, görünüm aynı, dokunulabilir alan büyür. */
.fy-capa .dg-3 { padding-block: calc(var(--b2) + var(--b1)); }

/* ---- Dönem anahtarı (aylık ↔ yıllık) ------------------------------------- */
/* NEDEN SEKME, NEDEN FORM DEĞİL: CSP `form-action 'none'` — bir `<form>`
   gönderilemez, yani anahtar düğmeyle kurulmak zorunda. Ortak `sekmeKur()`
   zaten düğme + panel deseni: tıklama ve klavye her zaman çalışıyor,
   kendiliğinden ilerleme yalnız hareket açıkken.
   ⚠️ Kart FİYAT SATIRINA dokunmuyor ve dokunamaz: `data-plan-fiyat` kaynağın
   metnini TEK metin düğümü olarak taşıyor ("$39/month · $390/year") ve
   `test/siteAnasayfa.test.ts` onu satır satır kaynağa karşı denetliyor —
   anahtar orayı bölse parite kapısı kırmızı olurdu. Anahtarın değiştirdiği şey
   dönemin DAVRANIŞI (aşım bandı var / bandı sıfır), yani gerçek fark. */

/* Ortak `.sekme-medya` ana sayfanın görsel paneli için 4×--b7 taban yükseklik
   taşıyor; burada panel METİN ve o taban sayfada boş bir şerit bırakıyor. */
.fy-donem .sekme-medya { min-block-size: 0; }

.fy-panel { padding: var(--b4); }
.fy-panel h3 {
  font-size: var(--t8);
  line-height: var(--t8-s);
  font-weight: 500;
  margin-block-end: var(--b3);
}
.fy-panel p { font-size: var(--t9); line-height: var(--t9-s); color: var(--soluk); }
.fy-panel p + p { margin-block-start: var(--b3); }

/* Panel geçişi: seçilen panel süzülerek girer. SON KARE GÖRÜNÜR
   (`opacity:1; transform:none`), yani az-hareket kipinde süre .001ms'ye
   inince panel son karesine atlar ve OKUNUR kalır — kaybolan bir şey yok. */
.fy-donem .sekme-panel.secili { animation: fyPanelAc var(--sure-kisa) var(--egri) both; }
@keyframes fyPanelAc {
  from { opacity: 0; transform: translateY(var(--b2)); }
  to   { opacity: 1; transform: none; }
}

/* ---- Mutlak tavan bandı --------------------------------------------------- */
.fy-ist { margin-block-start: var(--b5); }

/* ---- KARŞILAŞTIRMA TABLOSU ----------------------------------------------- */
/* Şekil referansın `CompareTable` adasından alındı (ref-envanter/B-pricing.md
   §1b: 4 plan kolonu, gruplanmış satırlar, hücre değeri ya LİTERAL dizge ya
   işaret). Bizde hücrelerin TAMAMI literal: işaret bileşeni (dolu daire /
   çıplak çizgi) `karsilastirma.css`te yaşıyor ve o dosya bu sayfaya
   YÜKLENMİYOR — onu buraya kopyalamak aynı kavramın ikinci yazımı olurdu.
   Literal değer ayrıca daha çok şey söylüyor: "Open" ile "Required" aynı
   işaretle anlatılamaz.

   YAPIŞKANLIK KARARI `karsilastirma.css`in ÖLÇÜMÜNDEN alındı (kod değil, KARAR):
   `overflow-x:auto` bir elemanı İKİ eksende de kaydırma kabı yapar ve dikey
   yapışkanlık o zaman sayfaya değil KABA göre çözülür. Bu yüzden kap
   YALNIZ ≤767px'te açılıyor: ≥768px'te başlık satırı sayfa kaydırmasında
   yapışır, ≤767px'te yapışmaz ve bedeli yazılı — o genişlikte kolonlar
   küçülüyor, tablo sığıyor ve kap pratikte hiç kaymıyor.
   `border-collapse:separate`: `collapse` ile kenarlık TABLOYA ait olur ve
   yapışkan hücreyle GEZMEZ; kenarlıklar hücrenin kendi `box-shadow:inset`inde. */
.fy-t-kap { margin-block-start: var(--b5); }
.fy-t-kap:focus-visible { border-radius: var(--y-kart); }

.fy-t {
  --fy-et-en: calc(var(--b7) + var(--b6));
  --fy-k-en: var(--b7);
  --fy-zemin: var(--kagit);

  inline-size: 100%;
  min-inline-size: calc(var(--fy-et-en) + var(--fy-k-en) * 3);
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t9);
  line-height: var(--t9-s);
}
/* Tint bölümde yapışkan hücrenin zemini bölümle aynı olmalı; yoksa kayarken
   beyaz bir şerit görünür. */
.bolum-tint .fy-t { --fy-zemin: var(--kagit2); }

.fy-t th,
.fy-t td {
  text-align: start;
  vertical-align: top;
  padding-block: var(--b3);
  padding-inline: 0 var(--b4);
  box-shadow: inset 0 -1px 0 var(--cizgi);
}

.fy-t thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  background: var(--fy-zemin);
  font-weight: 500;
  font-size: var(--tm);
  line-height: var(--tm-s);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--soluk);
  box-shadow: inset 0 -1px 0 var(--murekkep);
}

.fy-t .fy-t-et {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  inline-size: var(--fy-et-en);
  background: var(--fy-zemin);
  font-weight: 500;
  color: var(--murekkep);
}
/* Köşe hücresi iki eksende de yapışkan — ikisinin de üstünde durmalı. */
.fy-t thead .fy-t-et { z-index: 3; }

/* Grup satırı tüm genişliği kaplıyor; yatay yapışkanlık orada anlamsız ve
   verilen bir `z-index` başlık satırının üstüne çıkmasına yol açar. */
.fy-t-grup .fy-t-et,
.fy-t-grup th {
  position: static;
  inline-size: auto;
  padding-block: var(--b4) var(--b2);
  background: var(--kagit2);
  font-weight: 500;
  font-size: var(--tm);
  line-height: var(--tm-s);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--soluk);
  box-shadow: inset 0 -1px 0 var(--cizgi);
}
.bolum-tint .fy-t-grup th { background: var(--kagit); }

.fy-t td { color: var(--soluk); }

@media (max-width: 991px) {
  .fy-t th,
  .fy-t td { padding-inline-end: var(--b3); }
}

@media (max-width: 767px) {
  /* `temel.css` `body{overflow-x:hidden}` sayfa kaydırmasını kapatıyor: kap
     olmasa fazla genişlik KIRPILIRDI (kaydırılamaz, okunamaz). */
  .fy-t-kap { overflow-x: auto; }
  .fy-t {
    --fy-et-en: calc(var(--b7) + var(--b1));
    --fy-k-en: calc(var(--b5) + var(--b3));
  }
  .fy-t th,
  .fy-t td { padding-block: var(--b2); padding-inline-end: var(--b2); }
}

/* ---- Ara CTA bandı ------------------------------------------------------- */
/* Ortak `.cta` kullanılıyor ama `.cta-not` KULLANILMIYOR: o sınıf
   `--koyu-soluk` taşıyor (koyu ayak zemini için) ve açık zeminde okunmaz.
   Ölçü kapağı burada, rengi `temel.css`in `.soluk`u veriyor. */
.fy-band .fy-band-not {
  max-inline-size: var(--olcu-orta);
  font-size: var(--t9);
  line-height: var(--t9-s);
}