/* ═══════════════════════════════════════════════════════════════════
   YASAL & DESTEK SAYFALARI — ortak belge şablonu

   Kaynak metinler: `_temp/ai-notes/docx-metin/` (Word'den çıkarıldı).
   Çizilen ekran: `eklentiler/platfrom-karti-alti-guvence-bol-ekranlar/
   03-image24` (Garanti, Kullanım ve Bakım Rehberi) — **açık zeminli**,
   numaralı accordion, altta destek şeridi. Diğer yasal sayfalar da aynı
   açık zemin dilini kullanır: uzun metin koyu zeminde okunmuyor.

   ⚠️ `QUAREST CAYMA VE IADE KOSULLARI.docx` son bölümü
   "WEB EKİBİNE — KULLANICIYA GÖSTERİLMEYECEK UYGULAMA NOTLARI" başlığını
   taşır; o bölüm siteye ALINMAZ. Aynı dokümandaki kural: "Web ekibi
   kullanıcıya görünen metni sadeleştirmeye, yeni hukuk cümlesi eklemeye,
   CTA adlarını değiştirmeye yetkili değildir." → metinler birebir alındı.
   ═══════════════════════════════════════════════════════════════════ */
.ys{background:var(--q-cream);color:var(--q-ink);
  padding:calc(var(--header-height,78px) + clamp(24px,6vw,44px)) 0 clamp(56px,12vw,100px)}
.ys .wrap{max-width:820px}

/* ─── Sayfa başlığı ─── */
.ys-ust{padding-bottom:clamp(24px,6vw,36px);border-bottom:1px solid var(--q-line-light)}
.ys-kicker{display:block;font-size:clamp(10.5px,2.8vw,12px);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--q-orange-deep);margin-bottom:16px}
.ys h1{font-family:var(--font-serif);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(32px,8.4vw,54px);line-height:1.08;color:var(--q-ink)}
.ys-lead{font-size:clamp(13px,3.4vw,16px);line-height:1.7;color:var(--q-ink-soft);
  margin-top:clamp(16px,4vw,24px);max-width:60ch}
.ys-tarih{display:flex;align-items:center;gap:9px;margin-top:clamp(16px,4vw,22px);
  font-size:clamp(11px,2.9vw,12.5px);color:var(--q-ink-soft)}
.ys-tarih .qi{width:15px;height:15px;color:var(--q-orange-deep)}

/* ─── Bilgilendirme kutusu (03-image24) ─── */
.ys-bilgi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  margin-top:clamp(22px,5vw,32px);padding:clamp(16px,4vw,22px);
  border:1px solid var(--q-line-light);border-radius:var(--r-card);background:var(--q-cream-warm)}
.ys-bilgi>.qi{width:22px;height:22px;color:var(--q-orange-deep)}
.ys-bilgi b{display:block;font-size:clamp(12.5px,3.2vw,14px);font-weight:600;
  color:var(--q-orange-deep);margin-bottom:6px}
.ys-bilgi p{font-size:clamp(11.5px,3vw,13.5px);line-height:1.65;color:var(--q-ink-soft)}

/* ─── Belge gövdesi: numaralı bölümler ─── */
.ys-govde{margin-top:clamp(30px,7vw,48px)}
.ys-bolum+.ys-bolum{margin-top:clamp(34px,7.5vw,52px);padding-top:clamp(28px,6.5vw,42px);
  border-top:1px solid var(--q-line-light)}
.ys-bolum>h2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,3vw,18px);
  align-items:baseline;font-family:var(--font-serif);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(21px,5.4vw,30px);line-height:1.2;color:var(--q-ink)}
.ys-bolum>h2 .no{font-family:var(--font-sans);font-size:clamp(12px,3.1vw,14px);
  font-weight:600;color:var(--q-orange-deep);font-variant-numeric:tabular-nums}
.ys-bolum p{font-size:clamp(12.5px,3.2vw,14.5px);line-height:1.8;color:var(--q-ink);
  margin-top:clamp(12px,3vw,16px)}
.ys-bolum h3{font-family:var(--font-sans);font-size:clamp(13px,3.4vw,15.5px);font-weight:600;
  color:var(--q-ink);margin-top:clamp(20px,4.6vw,28px)}
.ys-bolum ul{list-style:none;margin-top:clamp(12px,3vw,16px);display:grid;gap:10px}
.ys-bolum ul li{position:relative;padding-left:22px;
  font-size:clamp(12.5px,3.2vw,14.5px);line-height:1.75;color:var(--q-ink)}
.ys-bolum ul li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--q-orange-deep)}
.ys-bolum a{color:var(--q-orange-deep);text-decoration:underline;text-underline-offset:3px}

/* Etiket / değer çiftleri (Ticaret Unvanı · Adres · MERSİS …) */
.ys-kunye{display:grid;gap:0;margin-top:clamp(14px,3.4vw,20px);
  border:1px solid var(--q-line-light);border-radius:var(--r-card);background:#fff;
  overflow:hidden}
.ys-kunye>div{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:clamp(10px,2.6vw,20px);padding:clamp(13px,3.2vw,16px) clamp(15px,3.6vw,20px)}
.ys-kunye>div+div{border-top:1px solid var(--q-line-light)}
.ys-kunye dt{font-size:clamp(11px,2.9vw,12.5px);font-weight:600;letter-spacing:.04em;
  color:var(--q-ink-soft)}
.ys-kunye dd{font-size:clamp(12.5px,3.2vw,14px);line-height:1.6;color:var(--q-ink)}
@media(max-width:519px){.ys-kunye>div{grid-template-columns:1fr;gap:5px}}

/* Dinamik alan yer tutucusu ({{...}} — checkout verisinden dolar) */
.ys-dinamik{display:inline-block;padding:2px 8px;border-radius:6px;
  background:rgba(169,69,1,.09);color:var(--q-orange-deep);
  font-family:var(--font-mono);font-size:.88em}

/* ─── Numaralı accordion (garanti rehberi · 03-image24) ─── */
.ys-akordeon{display:grid;gap:10px;margin-top:clamp(26px,6vw,38px)}
.ys-akordeon details{border:1px solid var(--q-line-light);border-radius:var(--r-card);
  background:#fff;overflow:hidden}
.ys-akordeon summary{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;
  gap:clamp(12px,3vw,18px);align-items:center;padding:clamp(15px,3.8vw,20px);
  cursor:pointer;list-style:none}
.ys-akordeon summary::-webkit-details-marker{display:none}
.ys-akordeon .no{font-size:clamp(14px,3.7vw,17px);font-weight:400;color:var(--q-orange-deep);
  font-variant-numeric:tabular-nums;font-family:var(--font-serif)}
.ys-akordeon .ayrac{width:1px;height:22px;background:var(--q-line-light)}
.ys-akordeon summary b{font-size:clamp(13px,3.4vw,15px);font-weight:500;color:var(--q-ink);
  line-height:1.35}
.ys-akordeon .arti{position:relative;width:18px;height:18px;flex:0 0 auto}
.ys-akordeon .arti::before,.ys-akordeon .arti::after{content:"";position:absolute;
  background:var(--q-orange-deep);transition:transform var(--dur) var(--ease)}
.ys-akordeon .arti::before{left:0;top:8px;width:18px;height:2px}
.ys-akordeon .arti::after{left:8px;top:0;width:2px;height:18px}
.ys-akordeon details[open] .arti::after{transform:rotate(90deg)}
.ys-akordeon .ic{padding:0 clamp(15px,3.8vw,20px) clamp(18px,4.4vw,24px)}
.ys-akordeon .ic>*:first-child{margin-top:0}
.ys-akordeon .ic p{font-size:clamp(12.5px,3.2vw,14px);line-height:1.75;color:var(--q-ink);
  margin-top:12px}
.ys-akordeon .ic h3{font-family:var(--font-sans);font-size:clamp(12.5px,3.2vw,14px);
  font-weight:600;color:var(--q-ink);margin-top:clamp(16px,4vw,22px)}
.ys-akordeon .ic ul{list-style:none;margin-top:12px;display:grid;gap:9px}
.ys-akordeon .ic li{position:relative;padding-left:20px;
  font-size:clamp(12px,3.1vw,13.5px);line-height:1.7;color:var(--q-ink)}
.ys-akordeon .ic li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--q-orange-deep)}

/* ─── Adım listesi (iade süreci 01–04) ─── */
.ys-adimlar{counter-reset:ys;display:grid;gap:0;margin-top:clamp(26px,6vw,38px)}
.ys-adimlar li{counter-increment:ys;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,3.6vw,22px);
  padding:clamp(16px,4vw,22px) 0}
.ys-adimlar li+li{border-top:1px solid var(--q-line-light)}
.ys-adimlar li::before{content:"0" counter(ys);font-family:var(--font-serif);
  font-size:clamp(17px,4.4vw,22px);color:var(--q-orange-deep);line-height:1.2}
.ys-adimlar b{display:block;font-size:clamp(14px,3.6vw,16.5px);font-weight:600;color:var(--q-ink)}
.ys-adimlar p{font-size:clamp(12px,3.1vw,14px);line-height:1.7;color:var(--q-ink-soft);
  margin-top:8px}

/* ─── Destek şeridi (sayfa sonu) ─── */
.ys-destek{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;
  margin-top:clamp(34px,7.5vw,52px);padding:clamp(18px,4.4vw,24px);
  border:1px solid var(--q-line-light);border-radius:var(--r-card);background:var(--q-cream-warm)}
.ys-destek>.qi{width:34px;height:34px;color:var(--q-orange-deep)}
.ys-destek b{display:block;font-size:clamp(13px,3.4vw,15px);font-weight:600;color:var(--q-ink)}
.ys-destek small{display:block;font-size:clamp(11.5px,3vw,13px);color:var(--q-ink-soft);
  margin-top:4px}
.ys-destek .ys-btn{grid-column:1/-1}
.ys-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  min-height:56px;margin-top:clamp(14px,3.4vw,18px);padding:16px 24px;
  border-radius:var(--r-btn);background:var(--q-ink);color:#fff;
  font-size:clamp(12px,3.1vw,13.5px);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;transition:var(--dur) var(--ease)}
.ys-btn:hover{background:var(--q-orange-deep)}
.ys-btn .qi{width:17px;height:17px}
.ys-btn--cizgi{background:#fff;color:var(--q-ink);border:1px solid var(--q-line-light)}
.ys-btn--cizgi:hover{background:#fff;border-color:var(--q-ink);color:var(--q-ink)}

/* ─── İlgili belgeler ─── */
.ys-ilgili{margin-top:clamp(34px,7.5vw,52px);padding-top:clamp(26px,6vw,38px);
  border-top:1px solid var(--q-line-light)}
.ys-ilgili h2{font-family:var(--font-sans);font-size:clamp(11px,2.9vw,12.5px);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--q-ink-soft);margin-bottom:16px}
.ys-ilgili ul{list-style:none;display:grid;gap:10px}
@media(min-width:640px){.ys-ilgili ul{grid-template-columns:1fr 1fr}}
.ys-ilgili a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;
  align-items:center;padding:clamp(14px,3.4vw,17px) clamp(15px,3.6vw,18px);
  border:1px solid var(--q-line-light);border-radius:var(--r-card);background:#fff;
  font-size:clamp(12.5px,3.2vw,14px);color:var(--q-ink);transition:var(--dur) var(--ease)}
.ys-ilgili a:hover{border-color:var(--q-orange-deep)}
.ys-ilgili .qi{width:17px;height:17px;color:var(--q-orange-deep)}
.ys-ilgili .go{width:15px;height:15px}

/* ─── Bekleyen metin uyarısı ─── */
.ys-bekliyor{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  margin-top:clamp(26px,6vw,38px);padding:clamp(18px,4.4vw,24px);
  border:1px dashed var(--q-orange-deep);border-radius:var(--r-card);
  background:rgba(169,69,1,.04)}
.ys-bekliyor>.qi{width:24px;height:24px;color:var(--q-orange-deep)}
.ys-bekliyor b{display:block;font-size:clamp(13px,3.4vw,15px);font-weight:600;
  color:var(--q-ink);margin-bottom:6px}
.ys-bekliyor p{font-size:clamp(12px,3.1vw,13.5px);line-height:1.7;color:var(--q-ink-soft)}
.ys-bekliyor p+p{margin-top:10px}

/* ─── Çerez tercihleri anahtarları ─── */
.ys-cerez{list-style:none;display:grid;gap:12px;margin-top:clamp(20px,5vw,28px)}
.ys-cerez li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(14px,3.6vw,22px);
  align-items:center;padding:clamp(16px,4vw,22px);border:1px solid var(--q-line-light);
  border-radius:var(--r-card);background:#fff}
.ys-cerez b{display:block;font-size:clamp(13px,3.4vw,15px);font-weight:600;color:var(--q-ink)}
.ys-cerez p{font-size:clamp(11.5px,3vw,13px);line-height:1.65;color:var(--q-ink-soft);
  margin-top:7px}
.ys-anahtar{display:grid;justify-items:center;gap:7px;cursor:pointer}
.ys-anahtar input{position:absolute;opacity:0;width:0;height:0}
.ys-anahtar .yol{position:relative;width:50px;height:28px;border-radius:28px;
  background:#DCD5CF;transition:background var(--dur) var(--ease)}
.ys-anahtar .yol::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:transform var(--dur) var(--ease)}
.ys-anahtar input:checked+.yol{background:var(--q-orange-deep)}
.ys-anahtar input:checked+.yol::after{transform:translateX(22px)}
.ys-anahtar input:disabled+.yol{background:var(--q-ink-soft);cursor:not-allowed}
.ys-anahtar input:focus-visible+.yol{outline:2px solid var(--q-orange-deep);outline-offset:3px}
.ys-anahtar .et{font-size:11px;color:var(--q-ink-soft);white-space:nowrap}
.ys-cerez-eylem{display:grid;gap:10px;margin-top:clamp(22px,5vw,30px)}
@media(min-width:720px){.ys-cerez-eylem{grid-template-columns:repeat(3,1fr)}
  .ys-cerez-eylem .ys-btn{margin-top:0}}
.ys-cerez-durum{margin-top:14px;font-size:clamp(11.5px,3vw,13px);color:var(--q-orange-deep);
  opacity:0;transition:opacity var(--dur) var(--ease)}
.ys-cerez-durum[data-gorunur]{opacity:1}
@media(max-width:439px){.ys-cerez li{grid-template-columns:1fr;justify-items:start}}