/* Ürün hub'ı — 13 bölüm.
   Sayfaya ÖZEL sınıflar burada; ortak olanlar `bilesen.css`te ve oradan
   KOPYALANMIYOR (aynı kavramın iki yazımı yan yana bayatlar). Bu sayfanın
   kullandığı ortak bileşenler, ölçülerek (yorumlar sökülü `grep`):
     `.iskelet` `.bas`/`.bas-orta` `.kas` `.ist`/`.ist-m`/`.ist-n`/`.ist-e`
     `.kaynak-not` `.sekmeler`/`.sekme`/`.sekme-cubuk`/`.sekme-yazi`/`.sekme-panel`
     `.oz`/`.oz-m`/`.oz-kutu` `.kizgara`/`.kizgara-m`/`.kizgara-et`
     `.akordeon`/`.akordeon-m`/`.akordeon-g` `.dortlu` `.ikili` `.kart` `.chip`
     `.dg`/`.dg-1`/`.dg-2`/`.dg-3` `.koyu` — artı `serit.css`teki
     `.kaynak-kayan`/`.kaynak-yol` ve `yer-tutucu.css`teki `.yt` ailesi.
   Sekme davranışı `site.js:sekmeKur()` — ikinci bir uygulama yazılmadı ve
   sayfada TEK `[data-sekmeler]` var (o fonksiyon `querySelector` kullanıyor,
   yani ikinci bir grup sessizce ölü kalırdı). */

/* ---- §4 Beş yüzey kartı ---------------------------------------------------- */
.yuzey-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--b4);
  margin-top: var(--b5);
}

.yuzey {
  display: flex;
  flex-direction: column;
  gap: var(--b2);
  padding: var(--b4);
}

/* Başlık ve rozet DİKEY yığılıyor, yan yana DEĞİL — ölçüldü (ekran görüntüsü,
   29 Eylül): yan yana dizilişte rozet yalnız KISA başlıkta aynı satırda kalıyor,
   dört kartta alta kayıyordu. Tekrarlayan şeyler tek bir nesne gibi durmalı:
   beş kartta rozet aynı yerde. DOM sırası korunuyor (önce başlık), yani ekran
   okuyucu da başlığı önce duyuyor. */
.yuzey-ust {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--b1);
}

/* Rozetin içine ikon girdi: `.chip` `inline-flex` ama BOŞLUK tanımlamıyor
   (ortak kütüphanede rozet yalnız metin taşıyordu). Boşluk burada, `.yuzey`
   altında kapsamlı — ortak `.chip` kuralına dokunulmuyor. */
.yuzey .chip { gap: var(--b1); }
.yuzey .chip .ikon { color: var(--soluk); }

.yuzey h2 {
  margin: 0;
  font-size: var(--t4);
  letter-spacing: -0.01em;
}

.yuzey p { margin: 0; }

/* Yüzeyin NEREDE koştuğu — sayfa şablonu. Bu bir iddia değil ölçüm:
   değerler uzantı bloklarının `enabled_on.templates` alanından geliyor.
   ⚠️ 29 Eylül (2. tur): bu satır `--t7` (18px) ve aşağıdaki davranış satırı
   `--t6` (20px) idi — yani kartın EN BÜYÜK metni bir DİPNOTTU ve gövde
   paragrafı (16px) onun altında kalıyordu. Ölçüldü (`tokens.css`): t6 20 ·
   t7 18 · t8 16 · t9 14. İkisi de meta satırı, ikisi de artık `--t9`. */
.yuzey-yer {
  font-size: var(--t9);
  line-height: var(--t9-s);
  color: var(--soluk);
}

/* Yüzeyin DAVRANIŞ satırı: ne zaman açılır, neyi düşürür, neyi devreder.
   `margin-top:auto` onu ve altındaki derin sayfa bağlantısını kartın DİBİNE
   iter, yani beş kartta ikisi de aynı hizada. */
.yuzey-sinir {
  margin-top: auto;
  padding-top: var(--b3);
  border-top: 1px solid var(--cizgi);
  font-size: var(--t9);
  line-height: var(--t9-s);
  color: var(--soluk);
}

/* ---- §5 · §8 Panel kartı -------------------------------------------------- */
/* Sekme panelinin ve ton kartlarının gövdesi. `.kart` çerçeveyi/zemini veriyor;
   burada yalnız iç boşluk ve tipografi rolleri. Ayrı bir `maket` YOK: bu sayfa
   arayüz maketi basmıyor, o yüzden "Interface illustration" etiketi de yok
   (etiketsiz maket dürüstlük kapısına takılırdı — maket basılmadı). */
.yetki-panel {
  display: flex;
  flex-direction: column;
  gap: var(--b2);
  padding: var(--b4);
  block-size: 100%;
}
.yetki-panel h3 {
  font-size: var(--t5);
  line-height: var(--t5-s);
  font-family: var(--aile-display);
  font-weight: 400;
}
.yetki-panel > p:not([class]) {
  font-size: var(--t9);
  line-height: var(--t9-s);
  color: var(--soluk);
}
/* `.kizgara-et` mikro etiketi ikon taşıyor: ortak kural yalnız tipografi
   veriyor, dizilim burada ve `.yetki-panel` altında kapsamlı. */
.yetki-panel .kizgara-et {
  display: flex;
  align-items: center;
  gap: var(--b2);
}

/* ---- §9 Araç ızgarası (koyu bant) ----------------------------------------- */
/* `.dortlu` ortak kütüphaneden geliyor (4 kolon → 2 → 1) ve yeniden
   yazılmıyor. Buradaki tek iş: araç ADI koyu zeminde gövde metninden ayrılsın.
   `.koyu .mono`ya GENEL bir kural yazılmadı — o ortak kütüphanenin işi ve bu
   sayfanın dışındaki her koyu bantta yan etki üretirdi. */
.arac-liste { margin-block-start: var(--b5); }
.arac-liste .mono { color: var(--koyu-soluk); }
.arac-liste h4 { margin-block: var(--b1) var(--b1); }

/* ---- §10 Erişim kapsamı rozetleri ---------------------------------------- */
/* Ana sayfanın `.kapsam-liste`si `anasayfa.css`te ve bu sayfa o dosyayı
   YÜKLEMİYOR; ikinci bir yazım olmaması için ad da farklı tutuldu (aynı ada
   iki anlam yüklemek bu depoda ödenmiş bir sınıf). Liste `data-erisim-kapsam-ad`
   ile TOML'a pinli: `siteAnasayfa.test.ts` üyeleri kaynakla karşılaştırıyor. */
.urun-kapsam {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b2);
  margin-block-start: var(--b5);
}
.urun-kapsam li {
  padding: var(--b1) var(--b3);
  border: 1px solid var(--cizgi);
  border-radius: var(--y-hap);
  background: var(--kagit);
  color: var(--soluk);
}

/* ---- Bölüm içi bağlantı satırı ------------------------------------------- */
/* `.dg-3` bir `<p>` içinde duruyor (satır kendi bloğu olsun diye). Ortak
   `.bas + *` kuralı yalnız BAŞLIK bloğundan sonrakini boşluklandırıyor; ızgara
   ya da akordeondan sonra gelen bağlantı satırının boşluğu burada. */
.kizgara + p,
.akordeon + p,
.ikili + p,
.kaynak-not + p { margin-block-start: var(--b4); }

@media (max-width: 767px) {
  .yuzey { padding: var(--b3); }
  .yuzey-liste { gap: var(--b3); }
  .yetki-panel { padding: var(--b3); }
}