/* ==========================================================================
   icerik: okuma sayfaları (rehber yazısı, gizlilik ve KVKK, iade),
   rehber dizini ve hakkımızda. Yalnız bu sayfalarda yüklenir
   (site/sablon/icerik.mjs → ctx.duzen ekStil); site.css bütçesine girmez.
   Uzun metin .akis içinde durur (en çok 68 karakter). Gruplama boşlukla ve
   ince ayırıcıyla; kutu yalnız özet ve içindekiler için.
   Yalnız 00-token.css belirteçleri kullanılır.
   ========================================================================== */

/* Sayfa başından sonraki ilk blok */
.icerik-blok,
.okuma {
  padding-top: var(--space-7);
}

/* ---------- Okuma düzeni: gövde + içindekiler ---------- */

.okuma {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
.okuma__govde {
  min-width: 0;
}
.okuma__govde > section + section {
  margin-top: var(--space-8);
}
.okuma__govde .akis > h2:first-child {
  margin-top: 0;
}
.okuma-tarih {
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

/* Model kodu (FV-202) satır sonunda tireden bölünmez */
.bolunmez {
  white-space: nowrap;
}

/* Özet: yazının ilk paragrafı plaka üstünde, bir boy büyük */
.ozet {
  color: var(--color-text-heading);
  font-size: var(--text-lead);
  line-height: 1.55;
}

/* Kod adı (çerez adı gibi): monospace değil, plaka tonunda etiket */
.okuma__govde code {
  padding: 1px 6px;
  border-radius: var(--radius-plate);
  background: var(--color-bg-surface);
  font-family: inherit;
  font-size: 0.875em;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ---------- İçindekiler ---------- */

.icindekiler {
  padding: var(--space-5);
  border-radius: var(--radius-plate);
  background: var(--color-bg-subtle);
  font-size: 0.9375rem;
  font-stretch: var(--font-width-dense);
  line-height: 1.4;
}
.icindekiler__baslik {
  font-family: var(--font-sans);
  font-stretch: var(--font-width-text);
  font-size: var(--text-body);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.35;
}
.icindekiler ol {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.icindekiler a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text-primary);
  text-decoration: none;
}
/* Alt başlıklar yalnız geniş ekranda, yan sütunda */
.icindekiler .icindekiler__alt {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .icindekiler a:hover {
    color: var(--color-accent-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
}
@media (min-width: 1040px) {
  .okuma {
    grid-template-columns: minmax(0, var(--measure)) minmax(0, 320px);
    justify-content: space-between;
    column-gap: var(--space-8);
  }
  .okuma__govde {
    grid-column: 1;
    grid-row: 1;
  }
  .icindekiler {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    max-height: calc(100vh - var(--header-h) - var(--space-7));
    overflow-y: auto;
  }
  .icindekiler a {
    min-height: 0;
    padding: 5px 0;
  }
  .icindekiler .icindekiler__alt {
    display: block;
    margin: 0 0 var(--space-2);
    padding-left: var(--space-4);
  }
  .icindekiler__alt a {
    padding: 3px 0;
    color: var(--color-text-secondary);
    font-size: var(--text-small);
  }
}

/* ---------- Yasal metin: künye, not, tablo ---------- */

.yasal-kunye {
  max-width: 46rem;
  margin-top: var(--space-6);
}
.yasal-kunye dd {
  overflow-wrap: anywhere;
}
/* Dar ekranda tek sütun: e-posta adresi yarım hücreye sığmaz */
@media (max-width: 479px) {
  .yasal-kunye {
    grid-template-columns: minmax(0, 1fr);
  }
}
.yasal-not {
  max-width: var(--measure);
  margin-top: var(--space-5);
}
.yasal-eylem {
  margin-top: var(--space-7);
}
.yasal-kunye dd a,
.adresler dd a {
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .yasal-kunye dd a:hover,
  .adresler dd a:hover {
    color: var(--color-accent-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }
}

/* Çok sütunlu tablo; dar ekranda her satır alt alta, hücre etiketiyle */
.yasal-tablo {
  width: 100%;
  font-size: 0.9375rem;
  font-stretch: var(--font-width-dense);
  line-height: var(--leading-dense);
}
.yasal-tablo :is(th, td) {
  padding: 10px var(--space-4) 10px 0;
  border-bottom: var(--border-hair) solid var(--color-border-separator);
  vertical-align: top;
}
.yasal-tablo :is(th, td):last-child {
  padding-right: 0;
}
.yasal-tablo thead th {
  border-bottom-color: var(--color-border);
  color: var(--color-text-secondary);
  font-weight: 600;
}
.yasal-tablo tbody th {
  color: var(--color-text-heading);
  font-weight: 600;
}
@media (max-width: 599px) {
  .yasal-tablo thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .yasal-tablo tbody tr {
    display: block;
    padding-block: var(--space-3);
    border-bottom: var(--border-hair) solid var(--color-border-separator);
  }
  .yasal-tablo tbody tr:first-child {
    border-top: var(--border-hair) solid var(--color-border-separator);
  }
  .yasal-tablo tbody :is(th, td) {
    display: block;
    padding: 2px 0;
    border: 0;
  }
  .yasal-tablo td[data-etiket]::before {
    content: attr(data-etiket);
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
    font-weight: 400;
  }
}

/* ---------- Rehber: karşılaştırma tablosu, ilgili kategoriler ---------- */

/* position: boş hücrelerdeki görünmez etiketler (.gorsel-gizli) kaydırma kabının içinde kalsın, sayfayı taşırmasın */
.rehber-tablo {
  position: relative;
}
.rehber-tablo .veri-tablosu {
  min-width: 940px;
}
/* Ürün sütunu yatay kaydırmada yerinde kalır */
.rehber-tablo :is(thead th:first-child, tbody th) {
  position: sticky;
  left: 0;
  width: 150px;
  min-width: 150px;
  background: var(--color-bg-page);
}
/* 320–419 px: yapışkan sütun daralır, iki veri sütunu aynı anda görünür */
@media (max-width: 419px) {
  .rehber-tablo :is(thead th:first-child, tbody th) {
    width: 112px;
    min-width: 112px;
    font-size: var(--text-small);
  }
}
@media (min-width: 640px) {
  .rehber-tablo :is(thead th:first-child, tbody th) {
    width: 24%;
    min-width: 220px;
  }
}
/* Gruplu tablo (rehber dedektör: iğne / gıda): her tablonun üstünde kategori adı */
.rehber-tablo__baslik {
  margin: var(--space-6) 0 var(--space-3);
}
.rehber-tablo__baslik:first-child {
  margin-top: 0;
}
.ilgili {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.sonraki .bolum__bas {
  margin-bottom: 0;
}

/* ---------- Satırlar: başlık solda, açıklama sağda (rehber dizini, sorular, gruplar) ---------- */

.satirlar {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--border-hair) solid var(--color-border-separator);
}
.satirlar > li {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: var(--border-hair) solid var(--color-border-separator);
}
.satirlar :is(h2, h3) {
  font-family: var(--font-display);
  font-stretch: 110%;
  font-size: var(--text-h3);
  font-weight: 650;
  line-height: var(--leading-heading);
}
.satirlar :is(h2, h3) a {
  color: var(--color-text-heading);
  text-decoration: none;
}
.satirlar__govde {
  display: grid;
  gap: var(--space-2);
}
.satirlar p {
  max-width: 62ch;
  color: var(--color-text-secondary);
}
@media (hover: hover) and (pointer: fine) {
  .satirlar :is(h2, h3) a:hover {
    color: var(--color-accent-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
}
@media (min-width: 900px) {
  .satirlar > li {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-5);
    align-items: baseline;
  }
  .satirlar > li > :first-child {
    grid-column: span 5;
  }
  .satirlar > li > :last-child {
    grid-column: 7 / span 6;
  }
}

/* ---------- Hakkımızda: başlık solda, içerik sağda ---------- */

.yan-bolum {
  display: grid;
  gap: var(--space-5);
}
.yan-bolum__govde {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}
@media (min-width: 900px) {
  .yan-bolum {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-5);
  }
  .yan-bolum > h2 {
    grid-column: span 4;
  }
  .yan-bolum__govde {
    grid-column: 5 / -1;
    gap: var(--space-6);
  }
}

/* Tarihçe: yıl solda, olay sağda */
.tarihce {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--border-hair) solid var(--color-border-separator);
}
.tarihce li {
  display: grid;
  gap: var(--space-1) var(--space-5);
  padding-block: var(--space-4);
  border-top: var(--border-hair) solid var(--color-border-separator);
}
.tarihce__yil {
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-stretch: 110%;
  font-size: var(--text-h3);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-heading);
  white-space: nowrap;
}
.tarihce h3 {
  font-family: var(--font-sans);
  font-stretch: var(--font-width-text);
  font-size: var(--text-h4);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.35;
}
.tarihce h3 + p {
  max-width: 60ch;
  margin-top: 2px;
  color: var(--color-text-secondary);
}
@media (min-width: 640px) {
  .tarihce li {
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: baseline;
  }
}

/* İki adres: iki tip etiketi yan yana */
.adresler {
  display: grid;
  gap: var(--space-6) var(--space-5);
}
.adresler h3 {
  margin-bottom: var(--space-3);
}
@media (min-width: 640px) {
  .adresler {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}