/**
 * SARMALAYICI ADLARI.
 *
 * Arşivdeki içerik iki farklı sarmalayıcı kullanıyor: hizmet, sayfa ve
 * araç içerikleri `<div class="thz-icerik">`, sözlük terimleri ise
 * `<section id="thzContent">`. İkisi de aynı blok setini kullandığı için
 * stiller ikisini birden hedefliyor — içeriği düzenlemek yerine seçiciyi
 * genişletmek doğru: HTML kaynağı olduğu gibi korunuyor.
 */
/**
 * THZ İÇERİK STYLESHEET.
 *
 * Eski TakipçiHizmet içeriklerinin tamamı aynı HTML blok setini kullanıyor.
 * İçerik AYNEN korunuyor — yeniden yazılmıyor, Markdown'a çevrilmiyor,
 * başlık hiyerarşisi bozulmuyor. Bozulan tek şey eski `<style>` bloklarıydı:
 * açık zeminli, indigo (#162A8E) paletli ve gövde genişliğini kendi
 * belirleyen bir CSS. Koyu tasarımın üzerine basıldığında okunmaz metin
 * üretiyordu.
 *
 * Bu dosya o blokların YERİNE geçer: aynı sınıf adları, aynı yapı, ama
 * boyama tamamen yeni tasarım token'larından. Eski tema CSS runtime'ı
 * kopyalanmadı; tek bir ham renk kodu yok.
 *
 * Kapsanan sınıflar (içerikte gözlenen 33 sınıfın tamamı):
 *   thz-icerik · lead · k · stats · stat · steps · step · grid · feat · ic
 *   check · cross · tablewrap · tb · note · links · ar · in · tags · chips
 *   seok · cta · btns · ghost · buybox · buylist · trust · faq · thz-yt
 *   thz-gorsel · bio · copybox · char
 *
 * Başlık hiyerarşisi: sayfanın `<h1>`i varlık adıdır ve İÇERİĞİN DIŞINDA
 * basılır. İçerikteki `<h2>` bölüm, `<h3>` alt başlık/kart olarak kalır.
 */

.thz-icerik,
#thzContent {
  color: var(--ink-2);
  font-size: var(--fs-lg);
  line-height: 1.75;
  max-width: var(--w-prose);
}
.thz-icerik > * + * { margin-top: var(--sp-7); }

.thz-icerik h2,
#thzContent h2 {
  position: relative;
  margin-top: var(--sp-14);
  margin-bottom: var(--sp-7);
  padding-inline-start: var(--sp-6);
  font-size: var(--fs-2xl);
  line-height: 1.28;
  color: var(--ink);
}
/* Eski temada başlıkların solunda degrade bir çubuk vardı; işaret
   korunuyor, rengi marka token'ından geliyor. */
.thz-icerik h2::before,
#thzContent h2::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  bottom: 6px;
  width: 5px;
  border-radius: 5px;
  background: linear-gradient(var(--brand), var(--brand-d));
}
.thz-icerik h3,
#thzContent h3 {
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xl);
  color: var(--ink);
}
.thz-icerik p { margin: 0; }
.thz-icerik strong,
.thz-icerik b { color: var(--ink); font-weight: var(--fw-bold); }
.thz-icerik a { color: var(--brand); font-weight: var(--fw-semibold); }
.thz-icerik a:hover { color: var(--brand-d); }
.thz-icerik ul,
.thz-icerik ol { margin: 0; padding-inline-start: var(--sp-11); }
.thz-icerik li + li { margin-top: var(--sp-3); }
.thz-icerik img { border-radius: var(--r-md); }
.thz-icerik figure { margin: var(--sp-12) auto; text-align: center; }
.thz-icerik hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-12) 0; }
.thz-icerik blockquote,
#thzContent blockquote {
  margin: 0;
  padding: var(--sp-6) var(--sp-8);
  border-inline-start: 3px solid var(--brand);
  background: var(--card-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.thz-icerik code,
#thzContent code {
  padding: 2px var(--sp-2);
  border-radius: var(--r-xs);
  background: var(--card-2);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ── Giriş bloğu ───────────────────────────────────────────────────────── */

.thz-icerik .lead,
#thzContent .lead {
  padding: var(--sp-11);
  border-radius: var(--r-hero);
  background: linear-gradient(135deg, var(--green-deep), var(--brand-d) 90%);
  color: var(--on-image);
}
.thz-icerik .lead p { color: var(--on-image); }
.thz-icerik .lead strong { color: var(--on-image); }
.thz-icerik .lead .k,
.thz-icerik .k,
#thzContent .k {
  display: inline-block;
  margin-bottom: var(--sp-4);
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--green-soft);
}

/* ── İstatistik şeridi ─────────────────────────────────────────────────── */

.thz-icerik .stats,
#thzContent .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-4);
}
.thz-icerik .stat,
#thzContent .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  text-align: center;
  font-size: var(--fs-sm);
}
.thz-icerik .stat b { font-size: var(--fs-2xl); line-height: 1; }

/* Tam DÖRT kutulu şeritte 3+1 kırılıyor, sonuncusu yalnız kalıyordu
   (denetim, madde 09). Yalnızca dörtlü şeride uygulanır; üçlü ve
   beşli şeritler `auto-fit` davranışını korur. */
.thz-icerik .stats:has(> .stat:nth-child(4):last-child),
#thzContent .stats:has(> .stat:nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .thz-icerik .stats:has(> .stat:nth-child(4):last-child),
  #thzContent .stats:has(> .stat:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Künye kutusundaki ikon: `Icon::svg()` glifleri yalnızca `viewBox`
   taşır; boyut verilmezse 300 px'e büyür. Makale gövdesindeki satır içi
   SVG'lerde width/height AÇIKÇA yazılı, bu kural ikinci emniyet. */
.thz-icerik .stat b svg,
#thzContent .stat b svg { width: 20px; height: 20px; }

/* ── Adımlar ───────────────────────────────────────────────────────────── */

.thz-icerik .steps { display: flex; flex-direction: column; gap: var(--sp-5); counter-reset: thz-step; }
.thz-icerik .step,
#thzContent .step {
  display: flex;
  gap: var(--sp-6);
  padding: var(--sp-7);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}
/* Numara içerikte yok; sırayı CSS sayacı veriyor — kaynak HTML'e
   dokunmadan görsel hiyerarşi kuruluyor. */
.thz-icerik .step::before,
#thzContent .step::before {
  counter-increment: thz-step;
  content: counter(thz-step);
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--brand-l);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: var(--fw-black);
}
.thz-icerik .step h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.thz-icerik .step p { font-size: var(--fs-md); }

/* ── Özellik ızgarası ──────────────────────────────────────────────────── */

.thz-icerik .grid,
#thzContent .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
}
.thz-icerik .feat,
#thzContent .feat {
  padding: var(--sp-7);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}
.thz-icerik .feat h3 { margin-top: var(--sp-4); font-size: var(--fs-lg); }
.thz-icerik .feat p { margin-top: var(--sp-2); font-size: var(--fs-md); }
.thz-icerik .ic,
#thzContent .ic {
  width: 40px;
  height: 40px;
  border-radius: var(--r-lg);
  background: var(--brand-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
}

/* ── Onay / ret listeleri ──────────────────────────────────────────────── */

.thz-icerik ul.check,
.thz-icerik ul.cross { list-style: none; padding-inline-start: 0; }
.thz-icerik ul.check > li,
.thz-icerik ul.cross > li,
#thzContent ul.cross > li {
  position: relative;
  padding-inline-start: var(--sp-9);
}
.thz-icerik ul.check > li::before,
#thzContent ul.check > li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  color: var(--brand);
  font-weight: var(--fw-black);
}
.thz-icerik ul.cross > li::before,
#thzContent ul.cross > li::before {
  content: '✕';
  position: absolute;
  inset-inline-start: 0;
  color: var(--red);
  font-weight: var(--fw-black);
}

/* ── Tablolar ──────────────────────────────────────────────────────────── */

/* Geniş tablo SAYFAYI değil kendi kabını kaydırır. */
.thz-icerik .tablewrap,
#thzContent .tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.thz-icerik table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.thz-icerik th,
.thz-icerik td,
#thzContent td {
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}
.thz-icerik thead th { background: var(--card-2); color: var(--ink); white-space: nowrap; }
.thz-icerik tbody tr:last-child td { border-bottom: 0; }

/* ── Not / uyarı ───────────────────────────────────────────────────────── */

.thz-icerik .note,
#thzContent .note {
  padding: var(--sp-7);
  border: 1px solid var(--yel-b);
  border-radius: var(--r-card);
  background: var(--yel);
  color: var(--gold);
  font-size: var(--fs-md);
}
.thz-icerik .note strong,
.thz-icerik .note b { color: var(--gold); }

/* ── Bağlantı kartları ─────────────────────────────────────────────────── */

.thz-icerik .links,
#thzContent .links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.thz-icerik .links a,
#thzContent .links a {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
  font-weight: var(--fw-semibold);
  min-height: var(--tap);
}
.thz-icerik .links a:hover { border-color: var(--brand); color: var(--brand); }
.thz-icerik .ar { margin-inline-start: auto; color: var(--brand); }

/* ── Etiket ve anahtar kelime çipleri ──────────────────────────────────── */

.thz-icerik .tags,
.thz-icerik .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.thz-icerik .tags span,
.thz-icerik .chips span,
#thzContent .chips span {
  padding: var(--sp-1) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card-2);
  color: var(--mute);
  font-size: var(--fs-xs);
}
.thz-icerik .seok,
#thzContent .seok {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--mute);
}

/* ── Eylem çağrısı ─────────────────────────────────────────────────────── */

.thz-icerik .cta,
#thzContent .cta {
  padding: var(--sp-11);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}
.thz-icerik .cta h3 { margin-top: 0; }
.thz-icerik .btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.thz-icerik .btns a,
#thzContent .btns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tap);
  padding: 0 var(--sp-8);
  border-radius: var(--r-sm);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: var(--fw-bold);
}
.thz-icerik .btns a:hover { background: var(--brand-d); color: var(--on-brand); }
.thz-icerik .btns a.ghost,
#thzContent .btns a.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}
.thz-icerik .btns a.ghost:hover { border-color: var(--brand); color: var(--brand); background: transparent; }

/* ── Satın alma kutusu ─────────────────────────────────────────────────── */

.thz-icerik .buybox,
#thzContent .buybox {
  padding: var(--sp-9);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card-2);
}
.thz-icerik .trust,
#thzContent .trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.thz-icerik .tb,
#thzContent .tb {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.thz-icerik ul.buylist { list-style: none; padding-inline-start: 0; }
.thz-icerik ul.buylist > li,
#thzContent ul.buylist > li {
  position: relative;
  padding-inline-start: var(--sp-9);
  font-size: var(--fs-md);
}
.thz-icerik ul.buylist > li::before,
#thzContent ul.buylist > li::before {
  content: '▸';
  position: absolute;
  inset-inline-start: 0;
  color: var(--brand);
}

/* ── SSS blokları ──────────────────────────────────────────────────────── */

.thz-icerik .faq { display: flex; flex-direction: column; gap: var(--sp-3); }
.thz-icerik details,
#thzContent details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
}
.thz-icerik summary,
#thzContent summary {
  padding: var(--sp-6) var(--sp-7);
  min-height: var(--tap);
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--ink);
  font-weight: var(--fw-semibold);
  list-style: none;
}
.thz-icerik summary::-webkit-details-marker { display: none; }
.thz-icerik summary::after,
#thzContent summary::after {
  content: '+';
  margin-inline-start: auto;
  color: var(--brand);
  font-size: var(--fs-xl);
  line-height: 1;
}
.thz-icerik details[open] summary::after { content: '−'; }
.thz-icerik details > *:not(summary) { padding: 0 var(--sp-7) var(--sp-7); }

/* ── Gömülü video ──────────────────────────────────────────────────────── */

.thz-icerik .thz-yt { max-width: 640px; margin-inline: auto; }
.thz-icerik .thz-yt iframe,
#thzContent .thz-yt iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--r-card);
}
.thz-icerik .thz-gorsel { text-align: center; }

/* ── Seyrek sınıflar ───────────────────────────────────────────────────── */

.thz-icerik .bio { font-size: var(--fs-md); color: var(--mute); }
.thz-icerik .copybox,
#thzContent .copybox {
  padding: var(--sp-6);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--card-2);
  font-family: var(--font-mono);
  word-break: break-all;
}
.thz-icerik .char { font-family: var(--font-mono); }

/* İçerik içindeki satır içi bağlantı vurgusu. */
.thz-icerik a.in,
#thzContent a.in {
  border-bottom: 2px solid var(--brand-l);
  font-weight: var(--fw-bold);
}
.thz-icerik a.in:hover { border-bottom-color: var(--brand); }

/* Sarmalayıcısız gömülü çerçeve: arşivden gelen içerik gövdelerinde
   `<iframe width="560">` doğrudan basılmış olabiliyor; `.thz-yt`
   sarmalayıcısı yoksa yukarıdaki kural yakalamıyor ve dar ekranda
   yatay taşma oluşuyordu. */
/* `platforms.article` içindeki 6 gövdede YouTube gömülüsü sarmalayıcısız
   basılmış (`<iframe width="560" height="315">`). Yalnızca `max-width`
   vermek taşmayı bitiriyor ama `height` öznitelikte sabit kaldığı için
   dar ekranda en-boy oranı bozuluyordu; oran da burada veriliyor. */
.thz-icerik iframe,
#thzContent iframe {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}