/* Sigorta Pro — site stil dosyası
   Renk, tipografi ve boşluk değerleri uygulamanın src/tokens.css dosyasından
   ÖLÇÜLEREK alınmıştır. Değiştirmeden önce arac/kontrast.mjs ile ölçün.

   Kurallar (uygulamadan devralındı):
   - Altın dolgu (--aksan zemin) bir sayfada TEK öğede kullanılır.
   - Gölge ve gradyan yoktur. Derinlik yüzey katmanları ve 1px ayırıcılarla kurulur.
   - Yazı ağırlığı 500'ü geçmez.
   - Varsayılan tema KOYU; seçim tarayıcıda saklanır (tema.js).
*/

/* ---------- Yazı tipi: Inter, yerel dosyalardan ---------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fontlar/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fontlar/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fontlar/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fontlar/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Belirteçler: koyu tema (VARSAYILAN) ---------- */

:root {
  --aksan: #EF9F27;
  --aksan-ustu: #412402;
  --aksan-baglanti: #FAC775;

  --yuzey-0: #101216;
  --yuzey-1: #14161B;
  --yuzey-2: #1B1E25;

  --metin-birincil: #F2EFE9;
  --metin-ikincil: #A8ADB6;
  --metin-soluk: #868B96;

  --kenarlik-girdi: #6B7285;
  --kenarlik-ayirici: #2A2E37;

  --durum-aktif: #5DCAA5;
  --durum-uyari: #EF9F27;
  --durum-hata: #E24B4A;
  --durum-notr: #7C818C;

  --durum-uyari-zemin: #2E2113;
  --ortu-zemin: rgba(0, 0, 0, .65);

  /* Tipografi — uygulamanın ölçeği masaüstü arayüz için 11/13/16/19/22.
     Site okuma mesafesi farklı olduğu için oranlar korunarak büyütüldü:
     11→13, 13→16, 16→19, 19→24, 22→30 (h1 clamp ile 28–44). */
  --yazi: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --agirlik-normal: 400;
  --agirlik-orta: 500;

  --punto-taban: 13px;
  --punto-govde: 16px;
  --punto-vurgu: 19px;
  --punto-baslik: 24px;
  --punto-baslik-buyuk: 30px;

  --izleme-baslik: -0.02em;
  --satir-siki: 1.25;
  --satir-govde: 1.55;

  --kose-kucuk: 6px;
  --kose-orta: 10px;

  --nokta-boy: 7px;

  --genislik: 720px;
  --genislik-genis: 1120px;

  /* TEK kenar boşluğu kaynağı — bloklar bunu kullanır, kendi değerini yazmaz */
  --kenar-bosluk: 24px;
}

@media (max-width: 1099.98px) {
  :root { --kenar-bosluk: 20px; }
}
@media (max-width: 480px) {
  :root { --kenar-bosluk: 16px; }
}

:root[data-tema="acik"] {
  --aksan: #854F0B;
  --aksan-ustu: #FFFFFF;
  --aksan-baglanti: #854F0B;

  --yuzey-0: #FAF6EE;
  --yuzey-1: #FFFDFA;
  --yuzey-2: #FDF8EF;

  --metin-birincil: #412402;
  --metin-ikincil: #6B5636;
  --metin-soluk: #96590B;

  --kenarlik-girdi: #A88C55;
  --kenarlik-ayirici: #F0E8D8;

  --durum-aktif: #0F6E56;
  --durum-uyari: #BA7517;
  --durum-hata: #E24B4A;
  --durum-notr: #9A9186;

  --durum-uyari-zemin: #FAF0DC;
}

@media (prefers-contrast: more) {
  :root {
    --metin-ikincil: var(--metin-birincil);
    --metin-soluk: var(--metin-birincil);
    --kenarlik-ayirici: var(--kenarlik-girdi);
  }
}

/* ---------- Taban ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--yuzey-0);
  color: var(--metin-birincil);
  font-family: var(--yazi);
  font-size: var(--punto-govde);
  font-weight: var(--agirlik-normal);
  line-height: var(--satir-govde);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: var(--agirlik-orta);
  letter-spacing: var(--izleme-baslik);
  line-height: var(--satir-siki);
  margin: 0;
}

h1 { font-size: clamp(28px, 5.5vw, 44px); }
h2 { font-size: var(--punto-baslik); }
h3 { font-size: var(--punto-vurgu); }

p { margin: 0; }

strong { font-weight: var(--agirlik-orta); }

a {
  color: var(--aksan-baglanti);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a:hover { border-bottom-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--aksan);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Yerleşim ---------- */

.kap {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 0 var(--kenar-bosluk);
}

.kap--genis {
  max-width: var(--genislik-genis);
  margin: 0 auto;
  padding: 0 var(--kenar-bosluk);
}

.bolum {
  padding-block: 56px;
  border-bottom: 1px solid var(--kenarlik-ayirici);
}
.bolum:last-of-type { border-bottom: none; }

.bolum > * + * { margin-top: 20px; }

.ikincil { color: var(--metin-ikincil); }

.etiket {
  font-size: var(--punto-taban);
  color: var(--metin-soluk);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Üst çubuk ---------- */

.ust {
  border-bottom: 1px solid var(--kenarlik-ayirici);
  background: var(--yuzey-0);
  position: sticky;
  top: 0;
  z-index: 10;
}

.ust-ic {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 14px var(--kenar-bosluk);
  display: flex;
  align-items: center;
  gap: 20px;
}

.marka {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--punto-vurgu);
  font-weight: var(--agirlik-orta);
  letter-spacing: var(--izleme-baslik);
  color: var(--metin-birincil);
  border: none;
}
.marka:hover { border: none; }
.marka svg { color: var(--aksan); flex: none; }

.gezinme {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: var(--punto-govde);
}
.gezinme a { color: var(--metin-ikincil); }
.gezinme a:hover { color: var(--metin-birincil); }
.gezinme a[aria-current="page"] { color: var(--metin-birincil); }

.tema-dugme {
  background: none;
  border: none;
  padding: 4px;
  color: var(--metin-ikincil);
  cursor: pointer;
  font: inherit;
  display: flex;
  border-radius: var(--kose-kucuk);
}
.tema-dugme:hover { color: var(--metin-birincil); }

/* ---------- Düğmeler ---------- */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--yazi);
  font-size: var(--punto-govde);
  font-weight: var(--agirlik-orta);
  line-height: var(--satir-siki);
  padding: 12px 20px;
  border-radius: var(--kose-kucuk);
  border: 1px solid var(--kenarlik-girdi);
  background: transparent;
  color: var(--metin-birincil);
  cursor: pointer;
  transition: transform 0.08s ease;
}
.dugme:hover { border-color: var(--metin-ikincil); }
.dugme:active { transform: scale(0.97); }

/* Tek altın dolgu — sayfa başına BİR tane */
.dugme--dolgu {
  background: var(--aksan);
  border-color: var(--aksan);
  color: var(--aksan-ustu);
}
.dugme--dolgu:hover { border-color: var(--aksan); opacity: 0.92; }

.dugme--vurgu {
  border-color: var(--aksan);
  color: var(--aksan-baglanti);
}

.dugme-sira {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Kahraman ---------- */

.kahraman { padding-block: 64px 48px; }

.kahraman h1 { max-width: 16ch; }

.kahraman .altyazi {
  font-size: var(--punto-vurgu);
  color: var(--metin-ikincil);
  max-width: 46ch;
}

.kahraman-not {
  font-size: var(--punto-taban);
  color: var(--metin-soluk);
}

/* ---------- Klip ve ekran görüntüsü çerçevesi ---------- */

.klip {
  margin: 0;
  background: var(--yuzey-1);
  border: 1px solid var(--kenarlik-ayirici);
  border-radius: var(--kose-orta);
  overflow: hidden;
}
.klip video,
.klip img {
  display: block;
  width: 100%;
  height: auto;
}

.kahraman-klip { margin-top: 36px; }

/* ---------- Tam ekran sahneler (masaüstünde pin + scrub) ----------
   Mobil ve azaltılmış harekette normal akış: panel klipten önce, statik.
   Masaüstü hareket dalı .sahne--etkin ekler; 100dvh + üstte panel katmanı
   yalnız o zaman devreye girer. 100vh KULLANILMAZ. */

.sahne {
  border-bottom: 1px solid var(--kenarlik-ayirici);
  padding-block: 40px;
}
.sahne-kap {
  max-width: var(--genislik-genis);
  margin: 0 auto;
  padding: 0 var(--kenar-bosluk);
}
.sahne-panel {
  background: var(--yuzey-1);
  border: 1px solid var(--kenarlik-ayirici);
  border-radius: var(--kose-orta);
  padding: 22px 24px;
  max-width: 62ch;
  margin-top: 20px;
}
.sahne-panel h2 { font-size: var(--punto-vurgu); }
.sahne-panel .etiket + h2 { margin-top: 14px; }
.sahne-panel h2 + p { margin-top: 8px; }

.sahne-adimlar {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.sahne-adim {
  position: relative;
  padding: 8px 0 8px 19px;
  color: var(--metin-ikincil);
}
.sahne-adim::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--nokta-boy);
  height: var(--nokta-boy);
  border-radius: 50%;
  background: var(--durum-notr);
}
.sahne-adim--gecmis { color: var(--metin-soluk); }
.sahne-adim--etkin { color: var(--metin-birincil); }
.sahne-adim--etkin::before { background: var(--aksan); }

/* İlerleme çizgisi: kaydırma (mobilde oynatma) ilerledikçe dolar */
.ilerleme {
  height: 2px;
  background: var(--kenarlik-ayirici);
  margin-top: 18px;
  overflow: hidden;
}
.ilerleme-dolgu {
  height: 100%;
  background: var(--aksan);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Geniş ekranda (≥1100px) iki kolon: sol panel, sağ klip — AYNI PİKSELİ PAYLAŞMAZLAR.
   Klip genişliğini hareket.js cihaz pikseline hizalar (1600/dpr sığıyorsa 1:1). */
@media (min-width: 1100px) {
  .sahne--etkin {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
  }
  .sahne--etkin .sahne-kap {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    max-width: none;
    padding: 0;
  }
  .sahne--etkin .sahne-panel {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    width: auto;
  }
  .sahne--etkin .klip {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ---------- Gerçek Net Kâr vurgusu (hesap sahnesi paneli) ---------- */

.kar-vurgu {
  background: var(--yuzey-2);
  border: 1px solid var(--kenarlik-ayirici);
  border-radius: var(--kose-orta);
  padding: 14px 18px;
  margin-top: 16px;
}
.kar-vurgu--isaret { border-color: var(--aksan); }
.kar-vurgu-etiket {
  font-size: var(--punto-taban);
  color: var(--metin-soluk);
}
.kar-vurgu-deger {
  font-size: var(--punto-baslik-buyuk);
  font-weight: var(--agirlik-orta);
  letter-spacing: var(--izleme-baslik);
  line-height: var(--satir-siki);
  color: var(--aksan);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.kar-vurgu-not {
  font-size: var(--punto-taban);
  color: var(--metin-soluk);
  margin-top: 8px;
}

@media (min-width: 900px) {
  .hesap-ic {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: center;
  }
}

/* ---------- Finans (A3) ---------- */

.bakiye-kartlar {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
.bakiye-kart {
  background: var(--yuzey-1);
  border: 1px solid var(--kenarlik-ayirici);
  border-radius: var(--kose-orta);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--metin-birincil);
}
@media (min-width: 700px) {
  .bakiye-kartlar { grid-template-columns: repeat(3, 1fr); }
}

.nokta {
  width: var(--nokta-boy);
  height: var(--nokta-boy);
  border-radius: 50%;
  flex: none;
}
.nokta--aktif { background: var(--durum-aktif); }
.nokta--uyari { background: var(--durum-uyari); }
.nokta--hata  { background: var(--durum-hata); }
.nokta--notr  { background: var(--durum-notr); }

/* ---------- Rapor (A4 + Rapor Özeti) ---------- */

.rapor-ciftli { display: grid; gap: 24px; margin-top: 28px; }
@media (min-width: 900px) {
  .rapor-ciftli {
    grid-template-columns: 400px minmax(0, 1fr);
    align-items: start;
  }
}

.ozet-panel {
  background: var(--yuzey-1);
  border: 1px solid var(--kenarlik-ayirici);
  border-radius: var(--kose-orta);
  padding: 6px 20px;
}
.ozet-baslik {
  font-weight: var(--agirlik-orta);
  padding: 14px 0;
  border-bottom: 1px solid var(--kenarlik-ayirici);
}
.ozet-satir {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--kenarlik-ayirici);
  color: var(--metin-ikincil);
}
.ozet-satir:last-child { border-bottom: none; }
.ozet-deger {
  color: var(--metin-birincil);
  font-weight: var(--agirlik-orta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ozet-satir--kar { color: var(--metin-birincil); }
.ozet-satir--kar .ozet-deger { color: var(--aksan); }

/* ---------- Özellik listesi ---------- */

.ozellik h2,
.sahne-metin h2 { font-size: var(--punto-vurgu); }
.ozellik h2 { margin-bottom: 8px; }
.ozellik p { color: var(--metin-ikincil); }
.ozellik p + p { margin-top: 10px; }

/* ---------- İkinci bilgisayar + PIN ---------- */

.ekran-ciftli { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .ekran-ciftli {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: 40px;
  }
}
.ekran-ciftli .metin-yigin > * + * { margin-top: 20px; }

/* ---------- Güvence maddeleri ---------- */

.guvence { padding-inline-start: 0; list-style: none; margin: 0; }
.guvence li {
  padding: 14px 0;
  border-bottom: 1px solid var(--kenarlik-ayirici);
  color: var(--metin-ikincil);
}
.guvence li:last-child { border-bottom: none; }
.guvence strong { color: var(--metin-birincil); display: block; }

/* ---------- Fiyat ---------- */

.fiyat-kart {
  background: var(--yuzey-1);
  border: 1px solid var(--kenarlik-ayirici);
  border-radius: var(--kose-orta);
  padding: 28px;
}

.fiyat-tutar {
  font-size: var(--punto-baslik-buyuk);
  font-weight: var(--agirlik-orta);
  letter-spacing: var(--izleme-baslik);
  line-height: var(--satir-siki);
}

.fiyat-liste { list-style: none; padding: 0; margin: 18px 0 0; }
.fiyat-liste li {
  color: var(--metin-ikincil);
  padding: 7px 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.fiyat-liste li::before {
  content: "";
  width: var(--nokta-boy);
  height: var(--nokta-boy);
  border-radius: 50%;
  background: var(--durum-aktif);
  flex: none;
  transform: translateY(-1px);
}

/* ---------- Adımlar ---------- */

.adimlar { list-style: none; counter-reset: adim; padding: 0; margin: 0; }
.adimlar li {
  counter-increment: adim;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--kenarlik-ayirici);
}
.adimlar li:last-child { border-bottom: none; }
.adimlar li::before {
  content: counter(adim);
  color: var(--metin-soluk);
  font-size: var(--punto-taban);
  line-height: var(--satir-govde);
}
.adimlar strong { display: block; margin-bottom: 3px; }
.adimlar span { color: var(--metin-ikincil); }

/* ---------- İndirme kutusu ---------- */

.indirme-kart {
  background: var(--yuzey-1);
  border: 1px solid var(--kenarlik-ayirici);
  border-radius: var(--kose-orta);
  padding: 28px;
}
.indirme-kart .surum {
  font-size: var(--punto-vurgu);
  font-weight: var(--agirlik-orta);
}
.indirme-kart .meta {
  font-size: var(--punto-taban);
  color: var(--metin-soluk);
}

/* ---------- SSS ---------- */

.sss { margin: 0; }
.sss dt {
  font-weight: var(--agirlik-orta);
  margin-top: 26px;
}
.sss dt:first-of-type { margin-top: 0; }
.sss dd {
  margin: 6px 0 0;
  color: var(--metin-ikincil);
}

.yok-liste { list-style: none; padding: 0; margin: 0; }
.yok-liste li {
  padding: 16px 0;
  border-bottom: 1px solid var(--kenarlik-ayirici);
  color: var(--metin-ikincil);
}
.yok-liste li:last-child { border-bottom: none; }
.yok-liste strong { color: var(--metin-birincil); display: block; margin-bottom: 3px; }

/* ---------- İletişim ---------- */

.iletisim-ad { font-weight: var(--agirlik-orta); }
.iletisim-tel {
  font-size: var(--punto-baslik);
  font-weight: var(--agirlik-orta);
  letter-spacing: var(--izleme-baslik);
  color: var(--metin-birincil);
  border: none;
  display: inline-block;
  margin: 4px 0 18px;
}
.iletisim-tel:hover { border: none; color: var(--aksan-baglanti); }

/* ---------- Alt bilgi ---------- */

.alt {
  border-top: 1px solid var(--kenarlik-ayirici);
  padding: 28px 0 48px;
  font-size: var(--punto-taban);
  color: var(--metin-soluk);
}
.alt-ic {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 0 var(--kenar-bosluk);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}
.alt a { color: var(--metin-soluk); }
.alt a:hover { color: var(--metin-ikincil); }

/* ---------- İndir: merkez kart, kartlı adımlar, yapışkan çubuk ---------- */

.indir-merkez {
  text-align: center;
  padding-block: 72px 56px;
}
.indir-merkez h1 { max-width: none; }
.indir-merkez .altyazi { margin: 12px auto 0; }
.indir-merkez .indirme-kart {
  max-width: 460px;
  margin: 32px auto 0;
  padding: 32px;
}

.almalar {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  color: var(--metin-ikincil);
}
.almalar li {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
}
.almalar li::before {
  content: "";
  width: var(--nokta-boy);
  height: var(--nokta-boy);
  border-radius: 50%;
  background: var(--durum-aktif);
  flex: none;
  transform: translateY(-1px);
}

.adim-kartlar {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  counter-reset: akart;
  list-style: none;
  padding: 0;
}
@media (min-width: 700px) {
  .adim-kartlar { grid-template-columns: repeat(4, 1fr); }
}
.adim-kart {
  background: var(--yuzey-1);
  border: 1px solid var(--kenarlik-ayirici);
  border-radius: var(--kose-orta);
  padding: 18px;
  counter-increment: akart;
}
.adim-kart::before {
  content: counter(akart);
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kenarlik-girdi);
  border-radius: 50%;
  color: var(--metin-soluk);
  font-size: var(--punto-taban);
  margin-bottom: 12px;
}
.adim-kart strong { display: block; margin-bottom: 4px; }
.adim-kart span { color: var(--metin-ikincil); }
.adim-kart img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--kenarlik-ayirici);
  border-radius: var(--kose-kucuk);
  margin-top: 12px;
}
.adim-kart figure { margin: 0; }
.adim-kart figcaption {
  font-size: var(--punto-taban);
  color: var(--metin-soluk);
  margin-top: 6px;
}

/* Genel kart (yardım / birlikte kurulum bloğu) */
.kart {
  background: var(--yuzey-1);
  border: 1px solid var(--kenarlik-ayirici);
  border-radius: var(--kose-orta);
  padding: 24px;
}

/* Mobilde alta yapışkan indirme çubuğu — masaüstünde yok */
.indir-cubuk { display: none; }
@media (max-width: 899.98px) {
  .indir-cubuk {
    display: flex;
    position: sticky;
    bottom: 0;
    z-index: 9;
    background: var(--yuzey-1);
    border-top: 1px solid var(--kenarlik-ayirici);
    padding: 10px var(--kenar-bosluk) calc(10px + env(safe-area-inset-bottom));
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .indir-cubuk .surum-ad {
    font-size: var(--punto-taban);
    color: var(--metin-ikincil);
  }
  .indir-cubuk .dugme { width: auto; padding: 10px 16px; }
}

/* ---------- SSS akordeonu ---------- */

.sss-madde { border-bottom: 1px solid var(--kenarlik-ayirici); }
.sss-madde:last-of-type { border-bottom: none; }
.sss-madde summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  font-weight: var(--agirlik-orta);
}
.sss-madde summary::-webkit-details-marker { display: none; }
.sss-madde summary::after {
  content: "+";
  color: var(--metin-soluk);
  font-size: var(--punto-vurgu);
  line-height: 1;
  flex: none;
}
.sss-madde[open] summary::after { content: "−"; }
.sss-icerik { overflow: hidden; }
.sss-icerik p {
  color: var(--metin-ikincil);
  padding: 0 0 16px;
}

/* ---------- Duyarlılık ---------- */

@media (max-width: 560px) {
  .bolum { padding-block: 40px; }
  .kahraman { padding-block: 44px 36px; }
  .gezinme { gap: 14px; font-size: var(--punto-taban); }
  .fiyat-kart, .indirme-kart { padding: 22px; }
  .dugme { width: 100%; }
  .dugme-sira { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .dugme:active { transform: none; }
}