/* Gündüz (açık) tema — yalnızca html[data-theme="light"] iken etkili.
 * Sayfalarda </head>'den hemen önce, sayfa stillerinden SONRA yüklenmeli.
 * Palet bilerek yumuşak: saf beyaz yerine gri-mavi zemin + kırık beyaz kartlar,
 * saf siyah yerine koyu lacivert yazı (göz yormayan düşük parlaklık).
 * Element düzeyi düzeltmeler :where() ile sıfır öncelikli — sayfanın kendi
 * class stilleri (örn. .hero-sub) korunur, yalnızca genel koyu renkler ezilir. */

html[data-theme="light"] {
  color-scheme: light;
  /* Zemin / yüzey */
  --bg: #e9ecf1;       --bg-dark: #e9ecf1;
  --bg-mid: #e3e7ed;   --surface: #e3e7ed;  --bg-2: #e3e7ed;
  --card: #f3f5f8;     --bg-card: #f3f5f8;
  --card2: #eef1f5;    --bg-card2: #eef1f5;
  /* Çizgiler */
  --border: #d3d9e2;   --border-dim: #dde2e9;
  /* Yazı */
  --text: #1c2331;     --text-main: #1c2331;
  --muted: #4a5466;    --text-muted: #4a5466;
  --dim: #6b7486;      --text-dim: #6b7486;
  --body-copy: #334055;
  /* Vurgu tonları (açık zeminde daha hafif) */
  --accent-dim: rgba(139,92,246,0.10);
  --accent-glow: rgba(139,92,246,0.22);
  --orange-dim: rgba(235,123,21,0.10);
  /* Yazı rengi karşılıkları (--tl-*): sayfalarda color: var(--tl-x, <koyu tema rengi>)
   * olarak kullanılır — koyu temada tanımsız kalır ve eski renk geçerli olur;
   * açık temada aynı rengin açık zeminde okunur koyu tonu gelir. */
  --tl-strong: #1c2331;   /* neredeyse beyaz yazılar */
  --tl-body:   #334055;   /* açık gri gövde yazısı (#cbd5e1 vb.) */
  --tl-muted:  #4a5466;   /* #94a3b8 */
  --tl-purple: #6d28d9;   /* #a78bfa, #c4b5fd, --accent */
  --tl-green:  #047857;   /* #34d399, #10b981, --green, --success */
  --tl-red:    #b91c1c;   /* #f87171, #fca5a5, #ef4444 */
  --tl-amber:  #b45309;   /* #fbbf24, #f59e0b */
  --tl-orange: #c2410c;   /* #EB7B15, #f4a85a, #fb923c, --orange */
  --tl-whatsapp: #15803d; /* #25d366 */
}

/* ── Genel element düzeltmeleri (düşük öncelik) ── */
:where(html[data-theme="light"]) body { background-color: var(--bg); color: var(--text); }
:where(html[data-theme="light"]) header { background: rgba(233,236,241,0.9); }
:where(html[data-theme="light"]) :is(p, ul, ol, li, td) { color: var(--body-copy); }
:where(html[data-theme="light"]) th { background: #e6eaf0; }
:where(html[data-theme="light"]) code { background: #e3e7ed; }
:where(html[data-theme="light"]) label { color: #2f394b; }
:where(html[data-theme="light"]) :is(input, select, textarea) { background: #f7f8fa; color: var(--text); }
:where(html[data-theme="light"]) :is(input, select, textarea):focus { background: #ffffff; }
:where(html[data-theme="light"]) input::placeholder { color: #8e97a8; }

/* Mono beyaz logolar (SellBox + ödeme kartı logoları) açık zeminde koyu görünsün */
html[data-theme="light"] img[src*="sellbox-logo-mono-white"],
html[data-theme="light"] img[src*="logo-band-white"] { filter: invert(1) opacity(0.88); }

/* Sabit koyu arka planla yazılmış kartlar */
html[data-theme="light"] .card { background: var(--card); }           /* ödeme başarılı/başarısız */
html[data-theme="light"] .benefit { background: var(--card); }        /* ücretsiz deneme fayda kartları */

/* ── Şablona özel, class ile yazılmış açık renk yazılar ── */
html[data-theme="light"] :is(.step-text, .product-features li, .box, .highlight-box,
  .two-col-table td, .comparison-table td, .komisyon-table td) { color: var(--body-copy); }
html[data-theme="light"] header a.back:hover { border-color: var(--border); }

/* Yumuşak gölge: kartlar zeminden kenarla değil hafif gölgeyle ayrılsın */
html[data-theme="light"] :is(.card, .next, form, .product-card, .summary-card, .benefit) {
  box-shadow: 0 1px 2px rgba(28,35,49,0.05), 0 8px 24px rgba(28,35,49,0.05);
}

/* Ödeme sayfası: cam efektli kart alanları koyu zemine göre yazılmış */
html[data-theme="light"] .form-input { background: #f7f8fa; }
html[data-theme="light"] .card-group { background: var(--card); border-color: var(--border); }
html[data-theme="light"] .card-field-label { color: var(--dim); }
html[data-theme="light"] .card-input { background: #f7f8fa; border-color: var(--border); color: var(--text); text-shadow: none; }
html[data-theme="light"] .card-input::placeholder { color: #9aa3b3; }
html[data-theme="light"] .summary,
html[data-theme="light"] .gateway-badge { background: var(--card2); }