/* ============================================================
   ds- TASARIM SİSTEMİ KATMANI · Ürün v2 Sprint 1 · FRT 15.09.2026
   k26.css'in ÜSTÜNE eklenir; mevcut sınıfları (gcard, tabbar, qopt...) EZMEZ.
   Yalnız yeni "ds-" ön ekli sınıflar tanımlar. Karanlık mod: layout.php'nin
   [data-tema="koyu"] token'larını miras alır (--bg2, --line, --accent-*).
   Değerler k26.css :root ile uyumlu; eksik token'lara güvenli fallback verilir.
   ============================================================ */

:root {
  /* renk (k26.css ile hizalı; fallback'li) */
  --ds-fg: var(--text, #172033);
  --ds-muted: var(--muted, #5b677a);
  --ds-line: var(--line, #dbe4ec);
  --ds-card: var(--surface, #fff);
  --ds-bg-soft: var(--background, #f6f8fa);
  --ds-accent: var(--accent, #ff8a3d);
  --ds-brand: var(--primary, #1f4e79);
  --ds-brand-deep: var(--primary-dark, #10263b);
  --ds-ok: var(--success, #15803d);
  --ds-no: var(--danger, #b91c1c);
  --ds-ok-soft: #eaf7ef;
  --ds-no-soft: #fdeceb;
  --ds-brand-soft: #eef4fb;
  /* aralık ölçeği (4pt) */
  --ds-1: 4px; --ds-2: 8px; --ds-3: 12px; --ds-4: 16px; --ds-5: 24px; --ds-6: 32px; --ds-7: 48px;
  /* köşe */
  --ds-r-sm: 10px; --ds-r-md: 16px; --ds-r-lg: 22px; --ds-r-pill: 999px;
  /* gölge */
  --ds-sh-1: 0 1px 2px rgba(16,38,59,.06), 0 4px 14px rgba(16,38,59,.06);
  --ds-sh-2: 0 6px 18px rgba(16,38,59,.10), 0 18px 44px rgba(16,38,59,.10);
  /* dokunma hedefi */
  --ds-tap: 44px;
}
html[data-tema="koyu"] {
  --ds-card: var(--panel, #151d28);
  --ds-bg-soft: var(--bg2, #161f2b);
  --ds-brand-soft: var(--accent-soft, #1a2534);
  --ds-ok-soft: #14301f;
  --ds-no-soft: #33191a;
}

/* ---- tipografi yardımcıları (satır 16-18 kelime hedefi ~62ch) ---- */
.ds-h1 { font-size: clamp(22px, 5.4vw, 30px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 var(--ds-2); color: var(--ds-fg); }
.ds-h2 { font-size: clamp(18px, 4.4vw, 22px); font-weight: 800; line-height: 1.25; margin: 0 0 var(--ds-2); color: var(--ds-fg); }
.ds-lead { color: var(--ds-muted); font-size: 15px; line-height: 1.55; max-width: 62ch; margin: 0; }
.ds-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-accent); margin: 0 0 var(--ds-1); }

/* ---- düğme ---- */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-2);
  min-height: var(--ds-tap); padding: 11px 20px; border-radius: var(--ds-r-pill);
  font: inherit; font-weight: 800; font-size: 15px; line-height: 1; cursor: pointer;
  border: 1px solid transparent; text-decoration: none; transition: transform .12s ease, box-shadow .18s ease, background .18s ease; }
.ds-btn:active { transform: translateY(1px); }
.ds-btn--primary { background: var(--ds-brand); color: #fff; box-shadow: var(--ds-sh-1); }
.ds-btn--primary:hover { background: var(--ds-brand-deep); }
.ds-btn--accent { background: var(--ds-accent); color: #241000; box-shadow: var(--ds-sh-1); }
.ds-btn--accent:hover { filter: brightness(.97); }
.ds-btn--ghost { background: transparent; color: var(--ds-brand); border-color: var(--ds-line); }
.ds-btn--ghost:hover { background: var(--ds-brand-soft); }
.ds-btn[disabled], .ds-btn--muted { background: var(--ds-line); color: var(--ds-muted); cursor: default; box-shadow: none; pointer-events: none; }
.ds-btn--block { display: flex; width: 100%; }
.ds-btn--sm { min-height: 36px; padding: 8px 14px; font-size: 13px; }

/* ---- kart ---- */
.ds-card { background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-r-md);
  padding: var(--ds-4); box-shadow: var(--ds-sh-1); }
.ds-card--lift { box-shadow: var(--ds-sh-2); }
.ds-card--pad-lg { padding: var(--ds-5); }

/* ---- ilerleme çubuğu ---- */
.ds-prog { height: 10px; background: var(--ds-bg-soft); border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill); overflow: hidden; }
.ds-prog > i { display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--ds-brand), var(--ds-accent)); transition: width .5s ease; }

/* ---- rozet ---- */
.ds-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--ds-r-pill); font-size: 12px; font-weight: 800; line-height: 1;
  background: var(--ds-brand-soft); color: var(--ds-brand); border: 1px solid transparent; }
.ds-badge--ok { background: var(--ds-ok-soft); color: var(--ds-ok); }
.ds-badge--no { background: var(--ds-no-soft); color: var(--ds-no); }
.ds-badge--accent { background: color-mix(in srgb, var(--ds-accent) 16%, transparent); color: #a2521a; }

/* ---- sekme ---- */
.ds-tabs { display: flex; gap: var(--ds-1); background: var(--ds-bg-soft); border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill); padding: 4px; }
.ds-tab { flex: 1; min-height: 40px; border: 0; background: transparent; color: var(--ds-muted);
  border-radius: var(--ds-r-pill); font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer; }
.ds-tab[aria-selected="true"] { background: var(--ds-card); color: var(--ds-brand); box-shadow: var(--ds-sh-1); }

/* ---- Bugün bloğu ---- */
.ds-bugun { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--ds-2); }
.ds-stat { background: var(--ds-bg-soft); border: 1px solid var(--ds-line); border-radius: var(--ds-r-sm);
  padding: var(--ds-3); text-align: center; }
.ds-stat b { display: block; font-size: 22px; font-weight: 800; color: var(--ds-brand); line-height: 1.1; }
.ds-stat span { display: block; font-size: 12px; color: var(--ds-muted); margin-top: 2px; }

/* ---- Özellik vitrini ---- */
.ds-vitrin { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ds-3); }
.ds-feat { display: flex; flex-direction: column; gap: 6px; text-align: left;
  background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-r-md);
  padding: var(--ds-4); text-decoration: none; color: var(--ds-fg); min-height: var(--ds-tap);
  box-shadow: var(--ds-sh-1); transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease; }
.ds-feat:hover { transform: translateY(-2px); box-shadow: var(--ds-sh-2); border-color: var(--ds-brand); }
.ds-feat-ust { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-2); }
.ds-feat-ikon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px;
  background: var(--ds-brand-soft); color: var(--ds-brand); font-size: 20px; flex: none; }
.ds-feat h3 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.2; }
.ds-feat p { margin: 0; font-size: 13px; color: var(--ds-muted); line-height: 1.45; }
.ds-feat .ds-badge { align-self: flex-start; }

/* ---- soru şıkları (ds) ---- */
.ds-opt { display: flex; gap: var(--ds-3); align-items: flex-start; width: 100%; text-align: left;
  background: var(--ds-card); border: 1.5px solid var(--ds-line); border-radius: var(--ds-r-sm);
  padding: 13px 15px; margin-bottom: var(--ds-2); color: var(--ds-fg); font: inherit; font-size: 15px;
  line-height: 1.45; cursor: pointer; min-height: var(--ds-tap); transition: border-color .14s, background .14s; }
.ds-opt:hover { border-color: var(--ds-brand); }
.ds-opt .h { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
  background: var(--ds-bg-soft); font-weight: 800; font-size: 13px; }
.ds-opt.dogru { border-color: var(--ds-ok); background: var(--ds-ok-soft); }
.ds-opt.dogru .h { background: var(--ds-ok); color: #fff; }
.ds-opt.yanlis { border-color: var(--ds-no); background: var(--ds-no-soft); }
.ds-opt.yanlis .h { background: var(--ds-no); color: #fff; }

/* ---- açıklama kutusu ---- */
.ds-acik { background: var(--ds-brand-soft); border: 1px solid var(--ds-line); border-left: 3px solid var(--ds-brand);
  border-radius: var(--ds-r-sm); padding: 13px 15px; font-size: 14px; line-height: 1.6; }
.ds-acik b { color: var(--ds-brand); }

/* ---- ipucu / bilgi şeridi (PWA, push) ---- */
.ds-ipucu { display: flex; align-items: flex-start; gap: var(--ds-3); background: var(--ds-brand-soft);
  border: 1px solid var(--ds-line); border-radius: var(--ds-r-md); padding: var(--ds-3) var(--ds-4); }
.ds-ipucu .ds-ipucu-ikon { font-size: 22px; flex: none; }
.ds-ipucu .ds-ipucu-kapat { margin-left: auto; background: transparent; border: 0; color: var(--ds-muted);
  font-size: 20px; line-height: 1; cursor: pointer; min-width: 32px; min-height: 32px; }

/* ---- karşılaştırma tablosu (fiyat) ---- */
.ds-kar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-3); }
.ds-kar-sut { border: 1px solid var(--ds-line); border-radius: var(--ds-r-md); overflow: hidden; background: var(--ds-card); }
.ds-kar-sut.one { border-color: var(--ds-brand); box-shadow: var(--ds-sh-2); }
.ds-kar-bas { padding: var(--ds-3) var(--ds-4); font-weight: 800; font-size: 15px; }
.ds-kar-sut.one .ds-kar-bas { background: var(--ds-brand); color: #fff; }
.ds-kar-sut:not(.one) .ds-kar-bas { background: var(--ds-bg-soft); color: var(--ds-muted); }
.ds-kar ul { list-style: none; margin: 0; padding: var(--ds-2) 0; }
.ds-kar li { display: flex; gap: var(--ds-2); align-items: flex-start; padding: 9px var(--ds-4); font-size: 13.5px; line-height: 1.4; }
.ds-kar li .im { flex: none; font-weight: 800; }
.ds-kar-sut.one li .im { color: var(--ds-ok); }
.ds-kar-sut:not(.one) li .im { color: var(--ds-muted); }

/* ---- yardımcı düzen ---- */
.ds-stack > * + * { margin-top: var(--ds-4); }
.ds-row { display: flex; align-items: center; gap: var(--ds-3); flex-wrap: wrap; }

/* ---- 390 ve altı: taşmayı önle, vitrin tek/çift korunur ---- */
@media (max-width: 360px) {
  .ds-bugun { grid-template-columns: 1fr 1fr; }
  .ds-bugun > :nth-child(3) { grid-column: 1 / -1; }
  .ds-kar { grid-template-columns: 1fr; }
}