/* =========================================================
   EK TEMALAR (Siyah & Sarı ve Karbon dışındakiler)
   Panelde Site Görünümü > Tema & Yazı Tipi'nden seçilir. Seçili tema <html data-tema="..."> olarak sayfaya
   yazılır (sunucuda functions/_middleware.js, tarayıcıda index.html içindeki temaUygula). Bu temalarda <html>
   "tema-ozel" sınıfını, açık zeminli olanlar ayrıca "tema-acik" sınıfını alır. Dosya her sayfada yüklenir;
   bu temalardan biri seçili değilse hiçbir kuralı işlemez.
   Ortak kurallar renkleri değişkenlerden alır; temalar değişken değerleri ve kendi arka planlarıyla ayrışır.
   --gold: vurgu (ikon, bağlantı, sekme)   --cta: satın alma butonları   --koyu: üst/alt şeritler ve banner
   --vurgu-acik: koyu zemin üzerindeki vurgu   --text-2: ikincil yazı   --desen: sayfanın arka plan deseni
   ========================================================= */

/* ---------- Beyaz & Lacivert (açık) ---------- */
html[data-tema="lacivert"] {
  --bg: #f2f5f9; --surface: #ffffff; --surface-2: #eef2f7; --surface-3: #dde4ee;
  --line: #d6dee8; --line-soft: #e3e8ef;
  --text: #13233a; --text-2: #3b4b61; --muted: #5d6b7e;
  --green: #15803d; --danger: #d32f2f;
  --gold: #1f5fae; --gold-hi: #2a6fc4; --gold-dim: rgba(31, 95, 174, .1);
  --cta: #d4500b; --cta-hi: #e8590c;
  --black: #0c2340; --koyu: #0c2340; --koyu-2: #0f2d52; --koyu-3: #081a30;
  --vurgu-acik: #ff8a3d;
  --radius: 8px;
  --golge: 0 1px 2px rgba(12, 35, 64, .06), 0 6px 20px rgba(12, 35, 64, .07);
  --golge-hover: 0 2px 4px rgba(12, 35, 64, .08), 0 16px 36px rgba(12, 35, 64, .15);
  --nabiz: rgba(255, 138, 61, .6);
  --kahraman-1: radial-gradient(120% 140% at 100% 100%, #1f4f8a 0%, #0f2d52 45%, #0a1f3a 80%);
  --kahraman-2: radial-gradient(120% 140% at 100% 0%, #2b5d99 0%, #12335c 50%, #0a1f3a 85%);
  --kahraman-3: radial-gradient(120% 140% at 100% 50%, rgba(232, 89, 12, .42) 0%, #12305a 50%, #0a1f3a 85%);
  --sahne: radial-gradient(70% 60% at 55% 45%, #1d3a63 0%, #0c1a2e 55%, #060d18 100%);
  --art-ust: rgba(255, 138, 61, .22); --art-alt: rgba(8, 26, 48, .92);
  --desen: url("/assets/alet-desen-kucuk.svg") 0 0 / 260px 260px repeat; --desen-filtre: grayscale(1) brightness(.3); --desen-opak: .4;
}

/* ---------- Krem & Orman Yeşili (açık) ---------- */
html[data-tema="yesil"] {
  --bg: #f6f1e7; --surface: #fffdf8; --surface-2: #f1eadc; --surface-3: #e5dcc9;
  --line: #e1d6c2; --line-soft: #ebe3d4;
  --text: #22301f; --text-2: #45503f; --muted: #6b6656;
  --green: #237a3b; --danger: #c0392b;
  --gold: #2b6e45; --gold-hi: #347f52; --gold-dim: rgba(43, 110, 69, .1);
  --cta: #b5502b; --cta-hi: #c45d35;
  --black: #1c3d2a; --koyu: #1c3d2a; --koyu-2: #24563a; --koyu-3: #163323;
  --vurgu-acik: #f2b48c;
  --radius: 16px;
  --golge: 0 1px 2px rgba(60, 50, 30, .06), 0 8px 24px rgba(60, 50, 30, .08);
  --golge-hover: 0 2px 4px rgba(60, 50, 30, .08), 0 18px 40px rgba(60, 50, 30, .16);
  --nabiz: rgba(242, 180, 140, .6);
  --kahraman-1: radial-gradient(120% 140% at 100% 100%, #3d7a4f 0%, #1f4a30 45%, #142e1f 80%);
  --kahraman-2: radial-gradient(120% 140% at 100% 0%, #4f7a3c 0%, #1f4a30 50%, #142e1f 85%);
  --kahraman-3: radial-gradient(120% 140% at 100% 50%, rgba(181, 80, 43, .5) 0%, #1f4a30 50%, #142e1f 85%);
  --sahne: radial-gradient(70% 60% at 55% 45%, #2c4a33 0%, #142519 55%, #0a140d 100%);
  --art-ust: rgba(242, 180, 140, .2); --art-alt: rgba(16, 36, 24, .92);
  --desen: url("/assets/alet-desen-kucuk.svg") 0 0 / 260px 260px repeat; --desen-filtre: sepia(1) hue-rotate(55deg) saturate(1.2) brightness(.45); --desen-opak: .45;
}

/* ---------- Teknik Çizim / Mavi Kopya (koyu): mavi kâğıt üzerinde çizim ızgarası ---------- */
html[data-tema="mavikopya"] {
  --bg: #0b2545; --surface: #0f2e55; --surface-2: #13396a; --surface-3: #1a4580;
  --line: #285688; --line-soft: #1c4373;
  --text: #e8f2ff; --text-2: #c2d6ee; --muted: #93acc9;
  --green: #4ade80; --danger: #ff7676;
  --gold: #5fd0f5; --gold-hi: #8be0fa; --gold-dim: rgba(95, 208, 245, .13); --gold-yazi: #062544;
  --cta: #f1f7ff; --cta-hi: #ffffff; --cta-yazi: #0b2545;
  --black: #071a33; --koyu: #071a33; --koyu-2: #0a2240; --koyu-3: #051428;
  --vurgu-acik: #8be0fa;
  --radius: 6px;
  --golge: 0 0 0 1px rgba(95, 208, 245, .08), 0 10px 26px rgba(0, 0, 0, .35);
  --golge-hover: 0 0 0 1px rgba(95, 208, 245, .4), 0 16px 36px rgba(0, 0, 0, .45);
  --nabiz: rgba(139, 224, 250, .6);
  --izgara: linear-gradient(rgba(140, 200, 255, .08) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(140, 200, 255, .08) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(140, 200, 255, .14) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, rgba(140, 200, 255, .14) 1px, transparent 1px) 0 0 / 120px 120px;
  --kahraman-1: var(--izgara), radial-gradient(120% 140% at 100% 100%, #1d5596 0%, #0d2f58 50%, #08203e 85%);
  --kahraman-2: var(--izgara), radial-gradient(120% 140% at 100% 0%, #22609f 0%, #0d2f58 50%, #08203e 85%);
  --kahraman-3: var(--izgara), radial-gradient(120% 140% at 100% 50%, rgba(95, 208, 245, .35) 0%, #0d2f58 50%, #08203e 85%);
  --sahne: radial-gradient(70% 60% at 55% 45%, #17457c 0%, #0a2443 55%, #04122a 100%);
  --art-ust: rgba(95, 208, 245, .22); --art-alt: rgba(5, 20, 40, .92);
  --desen: var(--izgara), radial-gradient(80% 60% at 15% 0%, rgba(40, 110, 190, .45), transparent 70%) 0 0 / 100% 100% no-repeat;
  --fav-bg: rgba(7, 26, 51, .8); --altbar: rgba(7, 26, 51, .96);
}

/* ---------- Beton & Kırmızı (açık): brüt beton duvar, kalıp izleri ---------- */
html[data-tema="beton"] {
  --bg: #e6e5e1; --surface: #fbfbfa; --surface-2: #f0efec; --surface-3: #dddcd7;
  --line: #d0cec8; --line-soft: #e2e1dc;
  --text: #1d1e21; --text-2: #43454a; --muted: #616368;
  --green: #2f7d32; --danger: #c62828;
  --gold: #c81e1e; --gold-hi: #e02424; --gold-dim: rgba(200, 30, 30, .09);
  --cta: #d62828; --cta-hi: #e53935;
  --black: #26282c; --koyu: #26282c; --koyu-2: #303338; --koyu-3: #1b1c1f;
  --vurgu-acik: #ff6b5e;
  --radius: 3px;
  --golge: 0 1px 0 rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .07);
  --golge-hover: 0 2px 0 rgba(0, 0, 0, .08), 0 12px 26px rgba(0, 0, 0, .15);
  --nabiz: rgba(255, 107, 94, .6);
  --serit: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .025) 0 14px, transparent 14px 28px);
  --kahraman-1: var(--serit), radial-gradient(120% 140% at 100% 100%, rgba(214, 40, 40, .35) 0%, #26282c 50%, #17181a 85%);
  --kahraman-2: var(--serit), radial-gradient(120% 140% at 100% 0%, #4a4d53 0%, #26282c 50%, #17181a 85%);
  --kahraman-3: var(--serit), radial-gradient(120% 140% at 100% 50%, rgba(214, 40, 40, .45) 0%, #26282c 50%, #17181a 85%);
  --sahne: radial-gradient(70% 60% at 55% 45%, #3a3c41 0%, #1d1e21 55%, #0e0f10 100%);
  --art-ust: rgba(255, 107, 94, .2); --art-alt: rgba(20, 21, 23, .92);
  --desen:
    radial-gradient(circle at 60px 50px, rgba(0, 0, 0, .18) 0 3px, rgba(0, 0, 0, .06) 4px 5px, transparent 6px) 0 0 / 360px 180px,
    radial-gradient(circle at 240px 130px, rgba(0, 0, 0, .18) 0 3px, rgba(0, 0, 0, .06) 4px 5px, transparent 6px) 0 0 / 360px 180px,
    linear-gradient(90deg, rgba(0, 0, 0, .07) 1px, transparent 1px) 0 0 / 360px 180px,
    linear-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px) 0 0 / 360px 180px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .25 0 0 0 0 .25 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 300px 300px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .2 0 0 0 .35 -.08'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23b)'/%3E%3C/svg%3E") 0 0 / 700px 700px;
}

/* SVG dokularındaki filtre alanı karonun kendisiyle aynı tutulur (x/y 0, %100): böylece stitchTiles doku karolarını
   ek yeri göstermeden birleştirir. Varsayılan filtre alanı karodan %10 taşar ve karolar arasında dikey çizgi oluşur. */
/* ---------- Ceviz & Bakır (açık): ahşap tahta zemin ---------- */
html[data-tema="ceviz"] {
  --bg: #eadcc6; --surface: #fffaf1; --surface-2: #f6ecdc; --surface-3: #eadbc3;
  --line: #ddc9ab; --line-soft: #ebdcc6;
  --text: #2f2117; --text-2: #563f2e; --muted: #735c48;
  --green: #3f7a3a; --danger: #b3392b;
  --gold: #9c5a27; --gold-hi: #b4692f; --gold-dim: rgba(156, 90, 39, .11);
  --cta: #a95a26; --cta-hi: #bd6830;
  --black: #3b2618; --koyu: #3b2618; --koyu-2: #4a3020; --koyu-3: #2c1c11;
  --vurgu-acik: #f2b27a;
  --radius: 10px;
  --golge: 0 1px 2px rgba(70, 40, 15, .08), 0 8px 22px rgba(70, 40, 15, .1);
  --golge-hover: 0 2px 4px rgba(70, 40, 15, .1), 0 18px 38px rgba(70, 40, 15, .2);
  --nabiz: rgba(242, 178, 122, .6);
  --damar-koyu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='192'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .22 -.05'/%3E%3C/filter%3E%3Crect width='480' height='192' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 480px 192px;
  --kahraman-1: var(--damar-koyu), radial-gradient(120% 140% at 100% 100%, #8a5530 0%, #3b2618 50%, #24170d 85%);
  --kahraman-2: var(--damar-koyu), radial-gradient(120% 140% at 100% 0%, #6e4426 0%, #3b2618 50%, #24170d 85%);
  --kahraman-3: var(--damar-koyu), radial-gradient(120% 140% at 100% 50%, rgba(242, 178, 122, .35) 0%, #3b2618 50%, #24170d 85%);
  --sahne: radial-gradient(70% 60% at 55% 45%, #5a3a22 0%, #2c1c11 55%, #160d07 100%);
  --art-ust: rgba(242, 178, 122, .22); --art-alt: rgba(35, 22, 12, .92);
  --desen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='192'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .27 0 0 0 0 .12 0 0 0 .55 -.14'/%3E%3C/filter%3E%3Crect width='480' height='192' filter='url(%23g)'/%3E%3Cpath d='M0 95.5h480M0 191.5h480M300.5 0v96M120.5 96v96' stroke='%235a3719' stroke-opacity='.25'/%3E%3C/svg%3E") 0 0 / 480px 192px;
}

/* ---------- Gece Moru (koyu): yıldızlı mor gökyüzü, neon pembe ---------- */
html[data-tema="gece"] {
  --bg: #120c26; --surface: #1b1437; --surface-2: #241b47; --surface-3: #2f2459;
  --line: #3a2e6b; --line-soft: #2a2050;
  --text: #f2eeff; --text-2: #d2c9f2; --muted: #a69cc9;
  --green: #5eead4; --danger: #fb7185;
  --gold: #c4a1ff; --gold-hi: #d7bfff; --gold-dim: rgba(196, 161, 255, .14); --gold-yazi: #1a0f3a;
  --cta: #d63384; --cta-hi: #e64596;
  --black: #0b0719; --koyu: #0b0719; --koyu-2: #150e2e; --koyu-3: #080513;
  --vurgu-acik: #f9a8d4;
  --radius: 14px;
  --golge: 0 0 0 1px rgba(196, 161, 255, .1), 0 12px 30px rgba(0, 0, 0, .45);
  --golge-hover: 0 0 0 1px rgba(196, 161, 255, .45), 0 0 26px rgba(214, 51, 132, .25), 0 18px 40px rgba(0, 0, 0, .5);
  --nabiz: rgba(249, 168, 212, .6);
  --yildiz: radial-gradient(1px 1px at 25px 35px, rgba(255, 255, 255, .6), transparent 60%) 0 0 / 220px 220px,
    radial-gradient(1px 1px at 140px 80px, rgba(255, 255, 255, .45), transparent 60%) 0 0 / 220px 220px,
    radial-gradient(1.5px 1.5px at 90px 160px, rgba(255, 255, 255, .55), transparent 60%) 0 0 / 220px 220px,
    radial-gradient(1px 1px at 195px 125px, rgba(255, 255, 255, .4), transparent 60%) 0 0 / 220px 220px,
    radial-gradient(1px 1px at 60px 205px, rgba(255, 255, 255, .35), transparent 60%) 0 0 / 220px 220px;
  --kahraman-1: var(--yildiz), radial-gradient(120% 140% at 100% 100%, #6d28d9 0%, #2a1660 45%, #110a2a 80%);
  --kahraman-2: var(--yildiz), radial-gradient(120% 140% at 100% 0%, rgba(214, 51, 132, .55) 0%, #2a1660 50%, #110a2a 85%);
  --kahraman-3: var(--yildiz), radial-gradient(120% 140% at 100% 50%, #3b5bdb 0%, #2a1660 50%, #110a2a 85%);
  --sahne: radial-gradient(70% 60% at 55% 45%, #3b1f7a 0%, #160c33 55%, #07041a 100%);
  --art-ust: rgba(249, 168, 212, .22); --art-alt: rgba(14, 8, 34, .92);
  --desen: var(--yildiz),
    radial-gradient(60% 45% at 8% 0%, rgba(124, 58, 237, .38), transparent 70%) 0 0 / 100% 100% no-repeat,
    radial-gradient(45% 40% at 100% 25%, rgba(214, 51, 132, .2), transparent 70%) 0 0 / 100% 100% no-repeat,
    radial-gradient(55% 45% at 45% 105%, rgba(56, 189, 248, .14), transparent 70%) 0 0 / 100% 100% no-repeat;
  --fav-bg: rgba(18, 12, 38, .8); --altbar: rgba(14, 9, 30, .96);
}

/* ---------- Okyanus & Mercan (açık): dalga deseni ---------- */
html[data-tema="okyanus"] {
  --bg: #eaf6f7; --surface: #ffffff; --surface-2: #e6f3f5; --surface-3: #cfe6ea;
  --line: #c9e1e5; --line-soft: #ddeef0;
  --text: #0d2c31; --text-2: #2d4f55; --muted: #52747b;
  --green: #138a5a; --danger: #d1433a;
  --gold: #0b7285; --gold-hi: #0c8599; --gold-dim: rgba(11, 114, 133, .1);
  --cta: #d9483b; --cta-hi: #e85646;
  --black: #0a4652; --koyu: #0a4652; --koyu-2: #0c5866; --koyu-3: #07343d;
  --vurgu-acik: #ffa38f;
  --radius: 16px;
  --golge: 0 1px 2px rgba(10, 70, 82, .06), 0 8px 24px rgba(10, 70, 82, .08);
  --golge-hover: 0 2px 4px rgba(10, 70, 82, .08), 0 18px 40px rgba(10, 70, 82, .16);
  --nabiz: rgba(255, 163, 143, .6);
  --dalga-acik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48'%3E%3Cpath d='M0 24c30 0 30-12 60-12s30 12 60 12 30-12 60-12 30 12 60 12' fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 240px 48px;
  --kahraman-1: var(--dalga-acik), radial-gradient(120% 140% at 100% 100%, #149bb0 0%, #0b5563 45%, #073640 80%);
  --kahraman-2: var(--dalga-acik), radial-gradient(120% 140% at 100% 0%, #1aa3a0 0%, #0b5563 50%, #073640 85%);
  --kahraman-3: var(--dalga-acik), radial-gradient(120% 140% at 100% 50%, rgba(217, 72, 59, .45) 0%, #0b5563 50%, #073640 85%);
  --sahne: radial-gradient(70% 60% at 55% 45%, #0f6b7a 0%, #073640 55%, #031c22 100%);
  --art-ust: rgba(255, 163, 143, .22); --art-alt: rgba(5, 40, 47, .92);
  --desen:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48'%3E%3Cpath d='M0 24c30 0 30-12 60-12s30 12 60 12 30-12 60-12 30 12 60 12' fill='none' stroke='%230b7285' stroke-opacity='.1' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 240px 48px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48'%3E%3Cpath d='M0 24c30 0 30-12 60-12s30 12 60 12 30-12 60-12 30 12 60 12' fill='none' stroke='%230b7285' stroke-opacity='.05' stroke-width='2'/%3E%3C/svg%3E") 120px 24px / 240px 48px,
    linear-gradient(180deg, #f6fcfc 0%, rgba(234, 246, 247, 0) 60%) 0 0 / 100% 100% no-repeat;
}

/* ---------- Genel ---------- */
.tema-ozel ::selection { background: var(--gold); color: var(--gold-yazi, #fff); }
/* Her temanın kendi arka plan deseni (alet deseni katmanının yerine) */
html.tema-ozel body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--desen, none); filter: var(--desen-filtre, none); opacity: var(--desen-opak, 1); }

/* ---------- Üst şerit, başlık, menü ---------- */
.tema-ozel .topbar { background: var(--koyu-3); color: rgba(255, 255, 255, .9); }
.tema-ozel .header { background: var(--surface); border-bottom: 1px solid var(--line); }
.tema-ozel .logo img { filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .22)); }
.tema-ozel .search { background: var(--surface-2); border-color: var(--line); }
.tema-ozel .search:focus-within { background: var(--surface); border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-dim); }
.tema-ozel .search input::placeholder { color: var(--muted); }
.tema-ozel .search button { background: var(--cta); color: var(--cta-yazi, #fff); }
.tema-ozel .search button:hover { background: var(--cta-hi); }
.tema-ozel .hbtn { background: var(--surface); }
.tema-ozel .badge { background: var(--cta); color: var(--cta-yazi, #fff); }
.tema-ozel .nav { background: var(--koyu-2); border-bottom: 0; box-shadow: var(--golge); }
.tema-ozel .nav-links a { color: rgba(255, 255, 255, .84); }
.tema-ozel .nav-links a:hover, .tema-ozel .nav-links a.active { color: #fff; }
.tema-ozel .nav-links a::after { background: var(--vurgu-acik); }
.tema-ozel .nav-links a.hot { color: var(--vurgu-acik); }
.tema-ozel .nav-links a.a3d-link::before { background: var(--vurgu-acik); color: var(--koyu); }
.tema-ozel .catmenu-btn { background: var(--cta); color: var(--cta-yazi, #fff); }
.tema-ozel .catmenu-list { border-top-color: var(--cta); box-shadow: var(--golge-hover); }
.tema-ozel .bayi-strip { color: var(--text); border-bottom-color: var(--line); }
.tema-ozel .duyuru { background: var(--koyu-3); border-bottom: 0; }
.tema-ozel .duyuru a { color: var(--vurgu-acik); }

/* ---------- Banner (koyu kalır, renkleri temadan) ---------- */
.tema-ozel .slider { background: var(--koyu); border: 0; box-shadow: var(--golge-hover); }
.tema-ozel .s1 { background: var(--kahraman-1); }
.tema-ozel .s2 { background: var(--kahraman-2); }
.tema-ozel .s3 { background: var(--kahraman-3); }
.tema-ozel .slide::before, .tema-ozel .slide .eyebrow::before { background: var(--vurgu-acik); }
.tema-ozel .slide .eyebrow, .tema-ozel .slide h1 em, .tema-ozel .slide h2 em, .tema-ozel .slide .art, .tema-ozel .slider .gear { color: var(--vurgu-acik); }
.tema-ozel .slide p { color: rgba(255, 255, 255, .8); }
.tema-ozel .dots button.on { background: rgba(255, 255, 255, .3); }
.tema-ozel .dots button.on::after, .tema-ozel.anim-off .dots button.on { background: var(--vurgu-acik); }
.tema-ozel .slide-3b .rozet-3b { background: var(--vurgu-acik); color: var(--koyu); }
.tema-ozel .slider-ok:hover { background: var(--vurgu-acik); border-color: var(--vurgu-acik); color: var(--koyu); }
.tema-ozel .slider-ok:focus-visible { outline-color: var(--vurgu-acik); }
.tema-ozel .art3b-kart, .tema-ozel .art3b-mini { border-color: rgba(255, 255, 255, .22); color: var(--vurgu-acik);
  background: radial-gradient(120% 100% at 50% 0%, var(--art-ust), var(--art-alt) 70%); }
.tema-ozel .art3b-kart svg { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
.tema-ozel .art3b-kart span, .tema-ozel .art3b-mini span { color: rgba(255, 255, 255, .9); }
.tema-ozel .art3b-zemin { background: radial-gradient(closest-side, var(--art-ust), transparent); }
.tema-ozel .promo-a { background: linear-gradient(135deg, var(--cta) 0%, var(--cta-hi) 100%); color: var(--cta-yazi, #fff); }
.tema-ozel .promo-a p { color: var(--cta-yazi, #fff); opacity: .9; }
.tema-ozel .promo-b { box-shadow: var(--golge); }
.tema-ozel .promo-b h3 { color: var(--text); }

/* ---------- Butonlar ---------- */
.tema-ozel .btn-gold { background: var(--cta); color: var(--cta-yazi, #fff); }
.tema-ozel .btn-gold:hover { background: var(--cta-hi); }
.tema-ozel .btn-dark { background: var(--surface-3); color: var(--text); }
.tema-ozel .btn-dark:hover { background: var(--line); }
.tema-ozel .btn-ghost { background: var(--surface); }
.tema-ozel .btn-outline { border-color: var(--line); color: var(--text); }
.tema-ozel .btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.tema-ozel :is(.slide, .a3d-sahne, .m360-kart) .btn-outline { border-color: rgba(255, 255, 255, .4); color: #fff; }
.tema-ozel :is(.slide, .a3d-sahne, .m360-kart) .btn-outline:hover { border-color: var(--vurgu-acik); color: var(--vurgu-acik); }
.tema-ozel :is(.tag-hot, .price .lbl, .pager button.on, .tabs button.on, .done-ic, .anim-rozet, .reh-kat, .cat:hover .ic) { color: var(--gold-yazi, #fff); }
.tema-ozel .reh-adimlar li::before { color: var(--gold-yazi, #fff); }
.tema-ozel .toast { background: var(--koyu); color: #fff; box-shadow: var(--golge-hover); }
.tema-ozel .cartbar { background: var(--cta); color: var(--cta-yazi, #fff); box-shadow: var(--golge-hover); }
.tema-ozel .cartbar .cb-go { background: var(--koyu); color: #fff; }

/* ---------- Kutular ve ürün kartları ---------- */
.tema-ozel :is(.cat, .trust div, .filters, .pd, .page, .empty, .reh-katbtn, .reh-kart, .reh-adimlar li, .reh-kutu, .harita-kutu, .m360-bilgi, .anim-kart) { box-shadow: var(--golge); }
.tema-ozel .cat:hover { box-shadow: var(--golge-hover); }
html.tema-ozel .card { box-shadow: var(--golge); }
html.tema-ozel .card:hover { border-color: var(--gold); box-shadow: var(--golge-hover); }
html.tema-ozel.anim-desktop :is(.card, .cat, .promo)::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--gold-dim), transparent 60%); }
.tema-ozel .card .img, .tema-ozel .pd .img { background: #fff; }
.tema-ozel .card .img { border-bottom: 1px solid var(--line-soft); }
html.tema-ozel .card:hover .img svg { color: var(--gold); }
html.tema-ozel .card:hover .img img { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .12)); }
.tema-ozel .tag-new { background: var(--koyu); color: #fff; }
.tema-ozel .tag-out { color: var(--muted); }
.tema-ozel .price .now { color: var(--text); }
.tema-ozel .fav { background: var(--fav-bg, rgba(255, 255, 255, .92)); color: var(--muted); }
.tema-ozel .filters a.fcat { color: var(--text-2); }
.tema-ozel .pill { color: var(--text-2); }
.tema-ozel label { color: var(--text-2); }
.tema-ozel .legal :is(p, li) { color: var(--text-2); }

/* Sepet çekmecesi, pencereler */
.tema-ozel .overlay { background: rgba(10, 20, 35, .5); }
.tema-ozel .modal { background: rgba(10, 20, 35, .55); }
.tema-ozel .drawer { box-shadow: -10px 0 40px rgba(0, 0, 0, .2); }
.tema-ozel .modal-card { border-top-color: var(--cta); box-shadow: var(--golge-hover); }

/* Alt bilgi */
.tema-ozel .footer { background: var(--koyu); color: rgba(255, 255, 255, .74); border-top-color: var(--cta); }
.tema-ozel .footer h4, .tema-ozel .footer .konum-link { color: var(--vurgu-acik); }
.tema-ozel .footer a:hover { color: #fff; }
.tema-ozel .footer :is(b, strong) { color: #fff; }
.tema-ozel .footer-bottom { border-top-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .55); }
.tema-ozel .footer .footer-gelistirici a { color: var(--vurgu-acik); }

/* ---------- Animasyonlu ürünler ve 3B sahne ---------- */
.tema-ozel .anim-kart { background: var(--surface); }
.tema-ozel .anim-kart-gorsel { background: var(--kahraman-1); color: var(--vurgu-acik); }
.tema-ozel .anim-kart-gorsel svg { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35)); }
.tema-ozel .a3d-sahne { background: var(--sahne); }
.tema-ozel :is(.a3d-ust, .a3d-ozellik b, .a3d-mini-y small) { color: var(--vurgu-acik); }
.tema-ozel .a3d-ozellik li, .tema-ozel .a3d-mini { border-color: rgba(255, 255, 255, .2); background: rgba(5, 12, 20, .6); }
.tema-ozel .a3d-mini:hover { border-color: var(--vurgu-acik); }
.tema-ozel .a3d-cubuk i { background: linear-gradient(90deg, var(--cta), var(--vurgu-acik)); }
.tema-ozel .a3d-ipucu span::after { background: var(--vurgu-acik); }

/* ---------- Nasıl yapılır rehberleri ---------- */
.tema-ozel :is(.reh-adimlar p, .reh-ipucu, .reh-kutu ul) { color: var(--text-2); }

/* ---------- Arama önerileri ---------- */
.tema-ozel .ara-oneri { box-shadow: var(--golge-hover); scrollbar-color: var(--line) transparent; }
.tema-ozel .ara-oneri-gorsel { border: 1px solid var(--line-soft); }
.tema-ozel .ara-oneri-yok { color: var(--danger); }

/* ---------- Mağazamız (360° tur) ---------- */
.tema-ozel .m360-ok span { background: var(--cta); color: var(--cta-yazi, #fff); }
.tema-ozel .m360-ok:hover span { background: #fff; color: #141414; }
.tema-ozel .m360-nokta span { border-color: var(--vurgu-acik); }
.tema-ozel .m360-nokta i { background: var(--vurgu-acik); animation-name: m360NabizTema; }
.tema-ozel .m360-nokta:hover span { background: var(--vurgu-acik); color: #141414; }
.tema-ozel .m360-bilgi-nokta i { background: #fff; animation: none; }
.tema-ozel .m360-bilgi-nokta:hover span { background: rgba(10, 10, 10, .72); color: #fff; }
@keyframes m360NabizTema { 0% { box-shadow: 0 0 0 0 var(--nabiz); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
.tema-ozel .m360-kart { border-color: var(--line); box-shadow: var(--golge); }
.tema-ozel .m360-kart:hover { border-color: var(--gold); }
.tema-ozel .m360-rozet { background: var(--cta); color: var(--cta-yazi, #fff); }

/* ---------- Telefon alt menüsü ---------- */
.tema-ozel.mm .mm-altbar { background: var(--altbar, rgba(255, 255, 255, .97)); box-shadow: 0 -4px 18px rgba(0, 0, 0, .08); }
.tema-ozel.mm .mm-sekme { color: var(--muted); }
.tema-ozel.mm .mm-sekme.on, .tema-ozel.mm .mm-sekme.hot { color: var(--gold); }
.tema-ozel.mm .mm-rozet { background: var(--cta); color: var(--cta-yazi, #fff); box-shadow: 0 0 0 2px var(--surface); }
.tema-ozel.mm .mm-ortu { background: rgba(10, 20, 35, .5); }

/* ---------- Müşteri asistanı ---------- */
.tema-ozel .asistan-btn { background: linear-gradient(145deg, var(--cta-hi), var(--cta)); color: var(--cta-yazi, #fff); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.tema-ozel .asistan-nokta { border-color: #fff; }
.tema-ozel .asistan-pencere { background: var(--surface); border-color: var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.tema-ozel .asistan-pencere header { background: linear-gradient(135deg, var(--koyu-2), var(--koyu)); border-bottom-color: transparent; }
.tema-ozel .asistan-pencere header b { color: #fff; }
.tema-ozel .asistan-pencere header small { color: rgba(255, 255, 255, .72); }
.tema-ozel .asistan-sifirla { border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .9); }
.tema-ozel .asistan-sifirla:hover { border-color: var(--vurgu-acik); color: #fff; }
.tema-ozel .asistan-kapat { color: rgba(255, 255, 255, .82); }
.tema-ozel .asistan-kapat:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.tema-ozel .asistan-akis, .tema-ozel .asistan-hizli { background: var(--bg); }
.tema-ozel .asistan-msj.bot { background: var(--surface); color: var(--text); border: 1px solid var(--line-soft); }
.tema-ozel .asistan-msj.ben { background: var(--cta); color: var(--cta-yazi, #fff); }
.tema-ozel .asistan-msj a { color: var(--gold); }
.tema-ozel .asistan-urun { background: var(--surface-2); border-color: var(--line); color: var(--text) !important; }
.tema-ozel .asistan-urun:hover { border-color: var(--gold); }
.tema-ozel .asistan-urun small { color: var(--muted); }
.tema-ozel .asistan-hizli button { background: var(--surface); color: var(--text-2); border-color: var(--line); }
.tema-ozel .asistan-hizli button:hover { border-color: var(--gold); color: var(--gold); }
.tema-ozel .asistan-form { border-top-color: var(--line); }
.tema-ozel .asistan-form input { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.tema-ozel .asistan-form input:focus { border-color: var(--gold); }
.tema-ozel .asistan-form button { background: var(--cta); color: var(--cta-yazi, #fff); }

/* ---------- Yalnız açık zeminli temalar ---------- */
.tema-acik .filters .fcat-kaydir::-webkit-scrollbar-track { background: rgba(0, 0, 0, .05); }
.tema-acik label :is(input, textarea, select) { background: var(--surface); }
.tema-acik .reh-fiyat-uyari { background: rgba(217, 119, 6, .1); border-color: rgba(217, 119, 6, .35); color: #9a4a07; }
.tema-acik .asistan-wa { color: #128c4a; }

/* ---------- Temalara özel dokunuşlar ---------- */
/* Krem & Orman Yeşili: yuvarlak hatlar */
html[data-tema="yesil"] :is(.btn, .tag, .price .lbl) { border-radius: 999px; }
html[data-tema="yesil"] .price .lbl { padding: 1px 8px; }
html[data-tema="yesil"] :is(.slider, .promo) { border-radius: 22px; }
/* Beyaz & Lacivert: keskin, kurumsal */
html[data-tema="lacivert"] :is(.slider, .promo) { border-radius: 10px; }
html[data-tema="lacivert"] .sec-head h2::before { width: 4px; border-radius: 0; background: var(--cta); }
/* Teknik Çizim: kesik çizgili çizim çerçeveleri */
html[data-tema="mavikopya"] .slider { outline: 1px dashed rgba(139, 224, 250, .35); outline-offset: -10px; }
html[data-tema="mavikopya"] :is(.card, .cat, .promo-b, .trust div, .filters, .pd, .page) { border-color: rgba(95, 208, 245, .22); }
html[data-tema="mavikopya"] .sec-head h2::before { background: none; border-left: 2px dashed var(--gold); width: 0; }
html[data-tema="mavikopya"] .topbar { border-bottom: 1px dashed rgba(139, 224, 250, .3); }
html[data-tema="mavikopya"] .slider-ok { border-radius: 6px; border-style: dashed; border-color: rgba(139, 224, 250, .55); color: var(--vurgu-acik); }
/* Beton & Kırmızı: köşeli butonlar, kırmızı üst şerit, banner altında ikaz bandı */
html[data-tema="beton"] :is(.btn, .search, .hbtn, .tag, .catmenu-list) { border-radius: 3px; }
html[data-tema="beton"] :is(.slider, .promo) { border-radius: 4px; }
html[data-tema="beton"] .topbar { background: var(--cta); }
html[data-tema="beton"] .sec-head h2::before { width: 10px; border-radius: 0; }
html[data-tema="beton"] .slider-ok { border-radius: 3px; }
html[data-tema="beton"] .slider-ok:hover { background: var(--cta); border-color: var(--cta); color: #fff; }
html[data-tema="beton"] .slider::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--cta) 0 12px, #1b1c1f 12px 24px); }
/* Ceviz & Bakır: şeritler ve alt bilgi ceviz ahşabı */
html[data-tema="ceviz"] :is(.nav, .footer, .topbar) { background: var(--damar-koyu), var(--koyu-2); }
html[data-tema="ceviz"] .topbar { background: var(--damar-koyu), var(--koyu-3); }
/* Logonun durduğu başlık şeridi sayfanın krem zemin renginde (beyaz yerine) */
html[data-tema="ceviz"] .header { background: var(--bg); }
html[data-tema="ceviz"] .slider-ok { border-color: rgba(242, 178, 122, .45); }
/* Gece Moru: neon parıltı */
html[data-tema="gece"] :is(.btn-gold, .search button, .catmenu-btn, .cartbar) { box-shadow: 0 0 18px rgba(214, 51, 132, .45); }
html[data-tema="gece"] .slider { box-shadow: 0 0 0 1px rgba(196, 161, 255, .25), 0 0 40px rgba(124, 58, 237, .25); }
html[data-tema="gece"] .nav { box-shadow: 0 1px 0 rgba(196, 161, 255, .25), 0 8px 24px rgba(0, 0, 0, .35); }
html[data-tema="gece"] .slider-ok { border-color: rgba(196, 161, 255, .4); }
html[data-tema="gece"] .slider-ok:hover { background: var(--cta); border-color: var(--cta); color: #fff; box-shadow: 0 0 20px rgba(214, 51, 132, .55); }
/* Okyanus & Mercan: banner altında dalga */
html[data-tema="okyanus"] :is(.btn, .tag) { border-radius: 999px; }
html[data-tema="okyanus"] :is(.slider, .promo) { border-radius: 22px; }
html[data-tema="okyanus"] .slider::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; z-index: 2; pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='46'%3E%3Cpath d='M0 20c30 0 30-12 60-12s30 12 60 12 30-12 60-12 30 12 60 12v26H0z' fill='%23fff' fill-opacity='.08'/%3E%3C/svg%3E") 0 100% / 240px 46px repeat-x; }