/**
 * Karanlık mod okunabilirlik katmanı
 * Sabit açık arka plan / koyu metin renklerini tema değişkenlerine çeker.
 * Yalnızca html[data-tema-mod="karanlik"] altında etkilidir.
 */

html[data-tema-mod="karanlik"] {
	color-scheme: dark;
}

/* ── Tipografi (içerik alanı) ── */
html[data-tema-mod="karanlik"] .site-icerik-alan :where(
	h1, h2, h3, h4, h5, h6,
	p, li, label, dt, dd, th, td, figcaption,
	blockquote, address, summary
) {
	color: var(--marka-metin);
}

html[data-tema-mod="karanlik"] .site-icerik-alan :where(
	small, .sayfa-baslik-alt, .urun-kart-meta, .text-muted,
	.vg-logo-metin em, .vg-section-alt-baslik, .vg-kart-alt
) {
	color: var(--marka-muted);
}

/* Bağlantılar — başlık / kart isimleri ana metin renginde kalsın */
html[data-tema-mod="karanlik"] .site-icerik-alan :is(p, li, td, .sayfa-metin, .legacy-sayfa) a:not(.btn):not(.header-aksiyon-btn):not(.vg-nav-link):not(.nav-hizli-link) {
	color: var(--marka-link);
}

html[data-tema-mod="karanlik"] .site-icerik-alan :is(h1, h2, h3, h4, h5, h6) a:not(.btn) {
	color: var(--marka-metin);
}

html[data-tema-mod="karanlik"] .site-icerik-alan :is(h1, h2, h3, h4, h5, h6) a:not(.btn):hover {
	color: var(--marka-link);
}

/* ── Kart / panel yüzeyleri (sayfa-tema sabit #fff) ── */
html[data-tema-mod="karanlik"] .site-icerik-alan :is(
	.legacy-sayfa,
	.sayfa-baslik-kutu,
	.urun-detay-bilgi,
	.urun-ozellik-cerceve,
	.uye-avantajlar,
	.uye-form,
	.sifre-sifir-kart,
	.sifre-sifir-yontem,
	.hesabim-nav,
	.hesabim-profil,
	.hesabim-kart,
	.sepet-kutu,
	.sepet-ozet,
	.odeme-kutu,
	.odeme-adim,
	.siparis-kart,
	.siparis-detay-kutu,
	.iade-kart,
	.ts-kayit-kart,
	.ts-detay-ozet > div,
	.ts-sozlesme-kutu,
	.ts-sozlesme-metin,
	.kurumsal-kart,
	.blog-kart,
	.servis-kart,
	.modern-form-kutu,
	.yp-giris-kart
) {
	background-color: var(--dt-surface);
	border-color: var(--dt-border);
	color: var(--marka-metin);
}

html[data-tema-mod="karanlik"] .site-icerik-alan :is(
	.urun-detay-thumb,
	.urun-detay-varyant,
	.uye-sonuc,
	.sepet-satir,
	.hesabim-icerik,
	.ts-zaman-oge
) {
	background-color: var(--dt-surface-2);
	border-color: var(--dt-border);
}

/* ── Form elemanları ── */
html[data-tema-mod="karanlik"] :is(
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]),
	select,
	textarea,
	.urun-detay-select,
	.uye-form input,
	.uye-form select,
	.uye-form textarea,
	.header-arama-input,
	.canli-arama-input
) {
	background-color: var(--dt-surface-2);
	border-color: var(--dt-border);
	color: var(--marka-metin);
}

html[data-tema-mod="karanlik"] :is(input, select, textarea)::placeholder {
	color: var(--marka-muted);
	opacity: 0.85;
}

html[data-tema-mod="karanlik"] :is(input, select, textarea):focus {
	border-color: var(--marka-mavi);
	box-shadow: 0 0 0 3px var(--marka-focus);
}

/* ── Üst bar / header (gradient alanlar korunur) ── */
html[data-tema-mod="karanlik"] .site-header {
	background: var(--dt-surface);
	border-bottom-color: var(--dt-border);
}

html[data-tema-mod="karanlik"] .logo-metin span {
	color: var(--marka-muted);
}

html[data-tema-mod="karanlik"] .canli-arama-panel {
	background: var(--dt-surface);
	border-color: var(--dt-border);
	box-shadow: var(--golge-lg);
}

html[data-tema-mod="karanlik"] .canli-arama-oge {
	border-bottom-color: var(--dt-border);
}

html[data-tema-mod="karanlik"] .canli-arama-oge-bilgi strong {
	color: var(--marka-metin);
}

html[data-tema-mod="karanlik"] .canli-arama-oge img {
	border-color: var(--dt-border);
}

html[data-tema-mod="karanlik"] .header-aksiyon-btn.header-aksiyon-cikis {
	background: var(--dt-danger-soft);
	border-color: color-mix(in srgb, var(--dt-danger) 35%, transparent);
	color: var(--dt-danger);
}

html[data-tema-mod="karanlik"] .header-aksiyon-btn.header-aksiyon-cikis:hover {
	background: color-mix(in srgb, var(--dt-danger) 18%, var(--dt-surface));
	border-color: color-mix(in srgb, var(--dt-danger) 45%, transparent);
}

/* ── Vitrin header (hero dışı) ── */
html[data-tema-mod="karanlik"] .vg-header {
	background: color-mix(in srgb, var(--dt-surface) 94%, transparent);
	border-bottom-color: var(--dt-border);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

html[data-tema-mod="karanlik"] .vg-nav-toggle {
	border-color: var(--dt-border);
	color: var(--marka-metin);
}

html[data-tema-mod="karanlik"] .mod-vitrin .vg-kart,
html[data-tema-mod="karanlik"] .mod-vitrin .vg-ozellik-kart,
html[data-tema-mod="karanlik"] .mod-vitrin .vg-blog-kart,
html[data-tema-mod="karanlik"] .mod-vitrin .vg-iletisim-kutu {
	background: var(--dt-surface);
	border-color: var(--dt-border);
}

html[data-tema-mod="karanlik"] .mod-vitrin .vg-section-gri {
	background: var(--dt-surface-2);
}

/* Hero / gradient bantlarda açık metin korunur */
html[data-tema-mod="karanlik"] .vg-hero-band,
html[data-tema-mod="karanlik"] .vg-hero-band :is(h1, h2, p, span, em, strong),
html[data-tema-mod="karanlik"] .vg-cta-band,
html[data-tema-mod="karanlik"] .vg-cta-band :is(h2, p),
html[data-tema-mod="karanlik"] .ust-bar,
html[data-tema-mod="karanlik"] .ust-bar :is(a, span, strong) {
	color: inherit;
}

/* ── Durum rozetleri ── */
html[data-tema-mod="karanlik"] :is(
	.iade-durum-gri,
	.siparis-durum-gri,
	.ts-durum-gri,
	.durum-gri
) {
	background: var(--dt-surface-2);
	color: var(--marka-muted);
}

html[data-tema-mod="karanlik"] :is(
	.sepet-bildirim-uyari,
	.uye-bildirim-hata,
	.yp-alert-hata
) {
	background: var(--dt-danger-soft);
	color: var(--dt-danger);
	border-color: color-mix(in srgb, var(--dt-danger) 30%, transparent);
}

html[data-tema-mod="karanlik"] :is(
	.sepet-bildirim-basari,
	.uye-bildirim-basarili,
	.yp-alert-basarili
) {
	background: var(--dt-success-soft);
	color: var(--dt-success);
	border-color: color-mix(in srgb, var(--dt-success) 30%, transparent);
}

/* ── Tablolar ── */
html[data-tema-mod="karanlik"] .site-icerik-alan table :is(th, td) {
	border-color: var(--dt-border);
}

html[data-tema-mod="karanlik"] .site-icerik-alan table thead th,
html[data-tema-mod="karanlik"] .site-icerik-alan .urun-ozellik-tablo th {
	background: var(--dt-surface-2);
	color: var(--marka-metin);
}

html[data-tema-mod="karanlik"] .site-icerik-alan table tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--dt-surface-2) 55%, transparent);
}

/* ── Mega menü / sidebar ── */
html[data-tema-mod="karanlik"] .nav-mega-panel,
html[data-tema-mod="karanlik"] .mg-menu-icerik {
	background: var(--dt-surface);
	border-color: var(--dt-border);
}

html[data-tema-mod="karanlik"] .mg-menu-link {
	color: var(--marka-metin);
}

html[data-tema-mod="karanlik"] .mg-menu-link:hover {
	background: var(--dt-surface-2);
}

html[data-tema-mod="karanlik"] .sidebar-katalog {
	background: var(--dt-surface);
	border-color: var(--dt-border);
}

html[data-tema-mod="karanlik"] .sidebar-katalog a {
	color: var(--marka-metin);
}

html[data-tema-mod="karanlik"] .sidebar-katalog a:hover,
html[data-tema-mod="karanlik"] .sidebar-katalog a.aktif {
	background: var(--dt-surface-2);
	color: var(--marka-link);
}

html[data-tema-mod="karanlik"] .nav-kurumsal-vitrin {
	color: var(--marka-link) !important;
}

html[data-tema-mod="karanlik"] .nav-hizli-v2 .nav-hizli-link.nav-destek {
	color: var(--dt-ikon-mor-fg);
}

html[data-tema-mod="karanlik"] .nav-hizli-v2 .nav-hizli-link.nav-destek:hover,
html[data-tema-mod="karanlik"] .nav-hizli-v2 .nav-hizli-link.nav-destek.aktif {
	background: var(--dt-ikon-mor-bg);
	color: var(--dt-ikon-mor-fg);
}

html[data-tema-mod="karanlik"] .nav-hizli-v2 .nav-hizli-link.aktif,
html[data-tema-mod="karanlik"] .nav-hizli-v2 .nav-hizli-ic a.aktif {
	background: var(--marka-turuncu-soft);
	color: var(--marka-turuncu);
}

html[data-tema-mod="karanlik"] .nav-hizli-v2 .nav-hizli-link:not(.aktif):not(.nav-firsat):not(.nav-destek):not(.nav-kurumsal-vitrin),
html[data-tema-mod="karanlik"] .nav-hizli-v2 .nav-hizli-ic a:not(.aktif) {
	color: var(--marka-metin);
}

html[data-tema-mod="karanlik"] .nav-hizli-v2 .nav-hizli-link.nav-firsat {
	color: var(--marka-turuncu);
}

html[data-tema-mod="karanlik"] .nav-hizli-v2 .nav-hizli-link.nav-firsat:hover,
html[data-tema-mod="karanlik"] .nav-hizli-v2 .nav-hizli-link.nav-firsat.aktif {
	background: var(--marka-turuncu-soft);
	color: var(--marka-turuncu);
}

html[data-tema-mod="karanlik"] .urun-kart-fiyat,
html[data-tema-mod="karanlik"] .canli-arama-oge-fiyat {
	color: var(--marka-mavi-acik);
}

html[data-tema-mod="karanlik"] :is(.urun-kart-barkod, .urun-kart-satis) {
	color: var(--marka-muted);
}

html[data-tema-mod="karanlik"] .urun-kart-satis {
	background: var(--dt-surface-2);
}

html[data-tema-mod="karanlik"] .urun-stok-rozet.stok-var {
	background: var(--dt-ikon-yesil-bg);
	color: var(--dt-ikon-yesil-fg);
}

html[data-tema-mod="karanlik"] .urun-stok-rozet.stok-yok {
	background: var(--dt-danger-soft);
	color: var(--dt-danger);
}

/* ── Ürün kartları ── */
html[data-tema-mod="karanlik"] .urun-kart {
	background: var(--dt-surface);
	border-color: var(--dt-border);
}

html[data-tema-mod="karanlik"] .urun-kart h3 a {
	color: var(--marka-metin);
}

html[data-tema-mod="karanlik"] .urun-kart h3 a:hover {
	color: var(--marka-link);
}

html[data-tema-mod="karanlik"] .btn-outline,
html[data-tema-mod="karanlik"] a.btn-outline {
	background: var(--dt-surface-2);
	border-color: color-mix(in srgb, var(--marka-mavi) 55%, var(--dt-border));
	color: var(--marka-mavi-acik);
}

html[data-tema-mod="karanlik"] .btn-outline:hover,
html[data-tema-mod="karanlik"] a.btn-outline:hover {
	background: var(--marka-mavi-soft);
	border-color: var(--marka-mavi);
	color: var(--marka-metin);
}

html[data-tema-mod="karanlik"] .urun-kart-resim img {
	background: var(--dt-surface-2);
	border: 1px solid var(--dt-border);
}

html[data-tema-mod="karanlik"] .vg-btn-ikincil {
	background: var(--dt-surface-2);
	border-color: var(--dt-border);
	color: var(--marka-metin);
}

html[data-tema-mod="karanlik"] .vg-btn-ikincil:hover {
	background: var(--dt-surface-3);
	border-color: var(--marka-mavi-soft-2);
	color: var(--marka-link);
}

/* Hero butonları — karanlık modda kontrast */
html[data-tema-mod="karanlik"] .vg-hero-band .vg-btn-ikincil,
html[data-tema-mod="karanlik"] .vg-hero-aksiyon .vg-btn-ikincil {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

html[data-tema-mod="karanlik"] .vg-hero-band .vg-btn-ikincil:hover,
html[data-tema-mod="karanlik"] .vg-hero-aksiyon .vg-btn-ikincil:hover {
	background: rgba(255, 255, 255, 0.22);
	border-color: #fff;
	color: #fff;
}

/* ── Footer ── */
html[data-tema-mod="karanlik"] .site-footer {
	background: var(--marka-lacivert);
	border-top-color: var(--dt-border);
}

html[data-tema-mod="karanlik"] .site-footer :is(p, li, a, span) {
	color: var(--marka-bar-metin);
}

html[data-tema-mod="karanlik"] .site-footer a:hover {
	color: var(--marka-bar-metin-guclu);
}

/* ── Yönetim paneli (temel) — ayrıntılar tema-karanlik-panel.css ── */
html[data-tema-mod="karanlik"] body.dt-admin {
	background: var(--marka-arka);
	color: var(--marka-metin);
}