/* =========================================================
   SerFresh Tarım — Tema sistemi (8 tasarım)
   Her tema [data-tema="..."] ile seçilir; <html> ya da herhangi bir kapsayıcıya verilebilir.
   Seçim: js/tema.js  (?tema=gece  ya da alttaki tema seçici)
   ========================================================= */

/* ---------- 1) Klasik Bahçe (varsayılan) ---------- */
[data-tema="klasik"] {
  --yesil-900:#14291d; --yesil-800:#1c3a29; --yesil-700:#24503a; --yesil-500:#3d7a56; --yesil-100:#e6efe7;
  --krem:#faf6ee; --krem-2:#f3ecdd; --kart:#fff; --turuncu:#e8742a; --turuncu-koyu:#c95c18; --on-ana:#fff;
  --metin:#1d2420; --metin-2:#56615a; --cizgi:#e4ddcc;
  --baslik:#14291d; --baslik-2:#1c3a29; --baslik-3:#24503a; --bos:#f1ece0; --dolu:#bcd8c4;
  --font-baslik:"Fraunces", Georgia, serif; --font-govde:"Inter", system-ui, sans-serif;
  --r-s:10px; --r-m:18px; --r-l:28px; --ortu-rgb:8,20,12; --hero-vurgu:#ffb877; --hero-vurgu-2:#ffd9b3;
  --golge-s:0 2px 8px rgba(20,41,29,.06); --golge-m:0 12px 32px rgba(20,41,29,.10); --golge-l:0 24px 60px rgba(20,41,29,.16);
  --perde-1:#1b3a28; --perde-2:#0d1f15; --logo-zemin:#1c3a29; --logo-meyve:#e8742a; --logo-yaprak:#8fc26a;
}

/* ---------- 2) Gece Meyvesi — koyu, lüks, altın ---------- */
[data-tema="gece"] {
  --yesil-900:#070a08; --yesil-800:#1b241e; --yesil-700:#2b382f; --yesil-500:#8aa58f; --yesil-100:#1c261f;
  --krem:#0d1210; --krem-2:#121a15; --kart:#151d18; --turuncu:#d4a24f; --turuncu-koyu:#e8c27c; --on-ana:#17110a;
  --metin:#e6e2d8; --metin-2:#9fa89f; --cizgi:#25312a;
  --baslik:#f5f0e4; --baslik-2:#ece5d3; --baslik-3:#c4d6c8; --bos:#1a231d; --dolu:#3d5a46;
  --font-baslik:"Cormorant Garamond", Georgia, serif; --font-govde:"Inter", system-ui, sans-serif;
  --r-s:8px; --r-m:14px; --r-l:22px; --ortu-rgb:4,7,5; --hero-vurgu:#f0cf8c; --hero-vurgu-2:#f4dfb0;
  --golge-s:0 2px 8px rgba(0,0,0,.4); --golge-m:0 14px 36px rgba(0,0,0,.45); --golge-l:0 28px 70px rgba(0,0,0,.6);
  --perde-1:#1b241e; --perde-2:#050806; --logo-zemin:#1b241e; --logo-meyve:#d4a24f; --logo-yaprak:#a9c9a2; --ag-vurgu:#d4a24f;
  color-scheme: dark;
}
[data-tema="gece"] h1, [data-tema="gece"] h2, [data-tema="gece"] h3 { font-weight: 500; letter-spacing: 0; }
[data-tema="gece"] h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); }
[data-tema="gece"] h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); }
[data-tema="gece"] .hero-sin__h1 { font-size: clamp(2.8rem, 5vw, 4.8rem); font-weight: 500; letter-spacing: 0; }
[data-tema="gece"] .logo__ad { font-weight: 600; font-size: 1.6rem; }
[data-tema="gece"] .hero-sin__cam { background: linear-gradient(145deg, rgba(14,20,16,.62), rgba(14,20,16,.38)); border-color: rgba(212,162,79,.45); }
[data-tema="gece"] .btn--koyu { background: var(--turuncu); color: var(--on-ana); }
[data-tema="gece"] .btn--cizgi { border-color: var(--turuncu); color: var(--turuncu-koyu); }
[data-tema="gece"] .btn--cizgi:hover { background: var(--turuncu); color: var(--on-ana); }
[data-tema="gece"] .header.kaydi, [data-tema="gece"] .header { border-color: var(--cizgi); }
[data-tema="gece"] .nav__link:hover { background: var(--yesil-100); color: var(--baslik); }
[data-tema="gece"] .son-cta, [data-tema="gece"] .bolum--koyu, [data-tema="gece"] .iletisim-kart { background: linear-gradient(160deg, #101813, #070a08); border: 1px solid var(--cizgi); }
[data-tema="gece"] .neden { background: var(--krem-2); }
[data-tema="gece"] input, [data-tema="gece"] select, [data-tema="gece"] textarea { background: #0f1511; color: var(--metin); }
[data-tema="gece"] .alan input, [data-tema="gece"] .alan select, [data-tema="gece"] .alan textarea { background: #0f1511; border-color: var(--cizgi); }

/* ---------- 3) Şeftali Bahçesi — yumuşak, sıcak, yuvarlak ---------- */
[data-tema="seftali"] {
  --yesil-900:#3b1a2b; --yesil-800:#5a2a41; --yesil-700:#7b3b58; --yesil-500:#c25a74; --yesil-100:#fde5df;
  --krem:#fff6f0; --krem-2:#ffe8dc; --kart:#fff; --turuncu:#ff6b4a; --turuncu-koyu:#d9442a; --on-ana:#fff;
  --metin:#3a2326; --metin-2:#7c5e61; --cizgi:#f4d8ce;
  --baslik:#3b1a2b; --baslik-2:#5a2a41; --baslik-3:#7b3b58; --bos:#fbe6dc; --dolu:#ffc4ae;
  --font-baslik:"DM Serif Display", Georgia, serif; --font-govde:"DM Sans", system-ui, sans-serif;
  --r-s:14px; --r-m:24px; --r-l:40px; --ortu-rgb:58,26,42; --hero-vurgu:#ffc4ae; --hero-vurgu-2:#ffe0d2;
  --golge-s:0 3px 12px rgba(123,59,88,.08); --golge-m:0 16px 40px rgba(123,59,88,.14); --golge-l:0 30px 70px rgba(123,59,88,.22);
  --perde-1:#7b3b58; --perde-2:#2a1020; --logo-zemin:#5a2a41; --logo-meyve:#ff8a5c; --logo-yaprak:#a5d98a; --ag-vurgu:#ff8a5c;
}
[data-tema="seftali"] h1, [data-tema="seftali"] h2, [data-tema="seftali"] h3, [data-tema="seftali"] .hero-sin__h1, [data-tema="seftali"] .logo__ad { font-weight: 400; letter-spacing: 0; }
[data-tema="seftali"] .hero-sin__cam { border-radius: 44px; background: linear-gradient(150deg, rgba(255,236,226,.3), rgba(255,214,196,.12)); }
[data-tema="seftali"] .hero-sin__cam .btn { padding: 15px 28px; }
[data-tema="seftali"] .btn--ana { box-shadow: 0 12px 28px color-mix(in srgb, var(--turuncu) 38%, transparent); }
[data-tema="seftali"] body { background: radial-gradient(70% 40% at 90% 0%, #ffe3d6 0%, transparent 60%), var(--krem); }

/* ---------- 4) Nordik Sade — beyaz, siyah, keskin, editoryal ---------- */
[data-tema="nordik"] {
  --yesil-900:#0d0d0d; --yesil-800:#1a1a1a; --yesil-700:#333; --yesil-500:#6b6b6b; --yesil-100:#f0f0ee;
  --krem:#ffffff; --krem-2:#f5f5f3; --kart:#fff; --turuncu:#e5332a; --turuncu-koyu:#c4231b; --on-ana:#fff;
  --metin:#161616; --metin-2:#686868; --cizgi:#e3e3e0;
  --baslik:#0d0d0d; --baslik-2:#1a1a1a; --baslik-3:#333; --bos:#eeeeec; --dolu:#cfcfca;
  --font-baslik:"Inter Tight", "Inter", system-ui, sans-serif; --font-govde:"Inter", system-ui, sans-serif;
  --r-s:2px; --r-m:4px; --r-l:6px; --ortu-rgb:0,0,0; --hero-vurgu:#ff8f87; --hero-vurgu-2:#ffd0cc;
  --golge-s:none; --golge-m:0 1px 0 rgba(0,0,0,.06); --golge-l:0 18px 40px rgba(0,0,0,.12);
  --perde-1:#1a1a1a; --perde-2:#000; --logo-zemin:#0d0d0d; --logo-meyve:#e5332a; --logo-yaprak:#fff; --ag-vurgu:#e5332a;
}
[data-tema="nordik"] h1, [data-tema="nordik"] h2, [data-tema="nordik"] h3, [data-tema="nordik"] .hero-sin__h1 { font-weight: 600; letter-spacing: -.035em; line-height: 1.04; }
[data-tema="nordik"] .btn, [data-tema="nordik"] .filtre, [data-tema="nordik"] .arama input, [data-tema="nordik"] .dil-sec, [data-tema="nordik"] .hero-sin__etiket { border-radius: 0; }
[data-tema="nordik"] .btn { text-transform: uppercase; letter-spacing: .09em; font-size: .78rem; padding: 17px 28px; }
[data-tema="nordik"] .btn--ana { box-shadow: none; }
[data-tema="nordik"] .logo__ad { letter-spacing: -.03em; text-transform: uppercase; font-size: 1.25rem; }
[data-tema="nordik"] .hero-sin__cam { border-radius: 0; background: #fff; border: 0; color: #111; box-shadow: 0 40px 90px rgba(0,0,0,.35); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-tema="nordik"] .hero-sin__ust { color: var(--turuncu); }
[data-tema="nordik"] .hero-sin__h1 { color: #0d0d0d; }
[data-tema="nordik"] .hero-sin__h1 em { color: var(--turuncu); }
[data-tema="nordik"] .hero-sin__p { color: #555; }
[data-tema="nordik"] .hero-sin__cam .btn--cam { background: transparent; color: #0d0d0d; border-color: #0d0d0d; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-tema="nordik"] .hero-sin__cam .btn--cam:hover { background: #0d0d0d; color: #fff; }
[data-tema="nordik"] .kk, [data-tema="nordik"] .rk, [data-tema="nordik"] .neden__gorsel, [data-tema="nordik"] .mani__foto figure, [data-tema="nordik"] .son-cta, [data-tema="nordik"] .uh-teklif, [data-tema="nordik"] .uh-ozellik, [data-tema="nordik"] .adim-kart, [data-tema="nordik"] .form, [data-tema="nordik"] .urun-kart, [data-tema="nordik"] .kutu { border-radius: 2px; }
[data-tema="nordik"] .ay-serit__ay i, [data-tema="nordik"] .rozet-ikon, [data-tema="nordik"] .ozellik__ikon { border-radius: 0; }

/* ---------- 5) Bordo Editoryal — şarap, krem, altın ---------- */
[data-tema="bordo"] {
  --yesil-900:#2b0a12; --yesil-800:#4a1220; --yesil-700:#6c1d31; --yesil-500:#9c3b54; --yesil-100:#f4e4df;
  --krem:#f8f1e6; --krem-2:#efe3d1; --kart:#fffdf8; --turuncu:#bf9140; --turuncu-koyu:#8d6420; --on-ana:#21110a;
  --metin:#2b1b1d; --metin-2:#6e5a58; --cizgi:#e2d4c0;
  --baslik:#3a0e19; --baslik-2:#4a1220; --baslik-3:#6c1d31; --bos:#eee2d0; --dolu:#e0b9b0;
  --font-baslik:"Playfair Display", Georgia, serif; --font-govde:"Source Sans 3", system-ui, sans-serif;
  --r-s:3px; --r-m:6px; --r-l:10px; --ortu-rgb:43,10,18; --hero-vurgu:#e9c98a; --hero-vurgu-2:#f3e0b8;
  --golge-s:0 2px 6px rgba(43,10,18,.08); --golge-m:0 14px 34px rgba(43,10,18,.14); --golge-l:0 28px 64px rgba(43,10,18,.24);
  --perde-1:#6c1d31; --perde-2:#1d060c; --logo-zemin:#4a1220; --logo-meyve:#d0a550; --logo-yaprak:#e6d3a3; --ag-vurgu:#d0a550;
}
[data-tema="bordo"] body { font-size: 17px; }
[data-tema="bordo"] h1, [data-tema="bordo"] h2, [data-tema="bordo"] h3, [data-tema="bordo"] .hero-sin__h1 { font-weight: 500; letter-spacing: -.015em; }
[data-tema="bordo"] .hero-sin__cam { background: linear-gradient(150deg, rgba(74,18,32,.62), rgba(43,10,18,.46)); border-color: rgba(233,201,138,.5); border-radius: 6px; }
[data-tema="bordo"] .btn { border-radius: 2px; letter-spacing: .04em; }
[data-tema="bordo"] .btn--koyu { background: var(--yesil-800); }
[data-tema="bordo"] .hero-sin__ust { color: var(--hero-vurgu); }
[data-tema="bordo"] .kk, [data-tema="bordo"] .rk, [data-tema="bordo"] .neden__gorsel, [data-tema="bordo"] .mani__foto figure, [data-tema="bordo"] .son-cta { border-radius: 6px; }
[data-tema="bordo"] .filtre, [data-tema="bordo"] .arama input, [data-tema="bordo"] .dil-sec, [data-tema="bordo"] .hero-sin__etiket { border-radius: 4px; }
[data-tema="bordo"] .bant { background: var(--yesil-800); }

/* ---------- 6) Mavi Ova — kurumsal ihracat, lacivert + limon ---------- */
[data-tema="mavi"] {
  --yesil-900:#071a30; --yesil-800:#0e2a47; --yesil-700:#17406b; --yesil-500:#2f6fa8; --yesil-100:#e4eff9;
  --krem:#f4f8fc; --krem-2:#e8f0f8; --kart:#fff; --turuncu:#f6c224; --turuncu-koyu:#a87500; --on-ana:#0e2a47;
  --metin:#14253a; --metin-2:#566a82; --cizgi:#d6e3f0;
  --baslik:#0b2240; --baslik-2:#0e2a47; --baslik-3:#17406b; --bos:#e3ecf5; --dolu:#a9cdea;
  --font-baslik:"Sora", system-ui, sans-serif; --font-govde:"Manrope", system-ui, sans-serif;
  --r-s:10px; --r-m:16px; --r-l:26px; --ortu-rgb:7,26,48; --hero-vurgu:#ffd75e; --hero-vurgu-2:#cfe6fa;
  --golge-s:0 2px 8px rgba(14,42,71,.07); --golge-m:0 14px 34px rgba(14,42,71,.12); --golge-l:0 28px 64px rgba(14,42,71,.2);
  --perde-1:#17406b; --perde-2:#040d19; --logo-zemin:#0e2a47; --logo-meyve:#f6c224; --logo-yaprak:#6fd0ff; --ag-vurgu:#f6c224;
}
[data-tema="mavi"] h1, [data-tema="mavi"] h2, [data-tema="mavi"] h3, [data-tema="mavi"] .hero-sin__h1 { font-weight: 600; letter-spacing: -.035em; }
[data-tema="mavi"] .hero-sin__h1 { font-size: clamp(2.1rem, 3.7vw, 3.5rem); }
[data-tema="mavi"] .hero-sin__cam { background: linear-gradient(150deg, rgba(14,42,71,.62), rgba(14,42,71,.34)); border-color: rgba(255,255,255,.28); }
[data-tema="mavi"] .btn--koyu { background: var(--yesil-800); }
[data-tema="mavi"] .btn--ana { box-shadow: 0 10px 24px rgba(246,194,36,.32); }
[data-tema="mavi"] .footer a:hover, [data-tema="mavi"] .iletisim-oge a:hover { color: var(--turuncu); }

/* ---------- 7) Toprak & Hasır — rustik, kâğıt dokusu, terracotta ---------- */
[data-tema="toprak"] {
  --yesil-900:#2d1c11; --yesil-800:#49301f; --yesil-700:#6a4a2e; --yesil-500:#6f7b3a; --yesil-100:#eadfc7;
  --krem:#f4ead6; --krem-2:#eadcc1; --kart:#fbf5e8; --turuncu:#c4572a; --turuncu-koyu:#a2431c; --on-ana:#fff;
  --metin:#33261b; --metin-2:#715f4b; --cizgi:#d9caa9;
  --baslik:#2d1c11; --baslik-2:#49301f; --baslik-3:#6a4a2e; --bos:#e8dcc2; --dolu:#c3c98a;
  --font-baslik:"Bitter", Georgia, serif; --font-govde:"Work Sans", system-ui, sans-serif;
  --r-s:3px; --r-m:6px; --r-l:12px; --ortu-rgb:46,28,17; --hero-vurgu:#f2b27a; --hero-vurgu-2:#f8dcc0;
  --golge-s:0 2px 6px rgba(45,28,17,.1); --golge-m:0 12px 28px rgba(45,28,17,.16); --golge-l:0 26px 60px rgba(45,28,17,.26);
  --perde-1:#5a3a22; --perde-2:#1c1008; --logo-zemin:#49301f; --logo-meyve:#c4572a; --logo-yaprak:#9aa84a; --ag-vurgu:#e08a4a;
}
[data-tema="toprak"] body { background-image: radial-gradient(rgba(73,48,31,.045) 1px, transparent 1.2px), radial-gradient(rgba(73,48,31,.03) 1px, transparent 1.2px); background-size: 22px 22px, 37px 37px; background-position: 0 0, 11px 17px; }
[data-tema="toprak"] h1, [data-tema="toprak"] h2, [data-tema="toprak"] h3, [data-tema="toprak"] .hero-sin__h1 { font-weight: 700; letter-spacing: -.02em; }
[data-tema="toprak"] .hero-sin__cam { border-radius: 8px; background: rgba(251,245,232,.94); border: 0; color: var(--metin); box-shadow: 0 30px 70px rgba(30,16,8,.4), 0 0 0 7px rgba(251,245,232,.22); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-tema="toprak"] .hero-sin__ust { color: var(--turuncu); }
[data-tema="toprak"] .hero-sin__h1 { color: #2d1c11; }
[data-tema="toprak"] .hero-sin__h1 em { color: var(--turuncu); }
[data-tema="toprak"] .hero-sin__p { color: #5b4836; }
[data-tema="toprak"] .hero-sin__cam .btn--cam { background: transparent; color: #2d1c11; border-color: #2d1c11; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-tema="toprak"] .hero-sin__cam .btn--cam:hover { background: #2d1c11; color: #fbf5e8; }
[data-tema="toprak"] .btn { border-radius: 4px; font-weight: 600; }
[data-tema="toprak"] .urun-kart, [data-tema="toprak"] .kutu, [data-tema="toprak"] .ozellik, [data-tema="toprak"] .adim-kart, [data-tema="toprak"] .form, [data-tema="toprak"] .sss details { border-style: solid; border-width: 1.5px; }
[data-tema="toprak"] .kk, [data-tema="toprak"] .rk, [data-tema="toprak"] .neden__gorsel, [data-tema="toprak"] .mani__foto figure, [data-tema="toprak"] .son-cta { border-radius: 8px; }
[data-tema="toprak"] .filtre, [data-tema="toprak"] .arama input, [data-tema="toprak"] .dil-sec { border-radius: 6px; }

/* ---------- 8) Taze Lime — cesur, modern, neo-brütalist ---------- */
[data-tema="lime"] {
  --yesil-900:#06180f; --yesil-800:#0b2b1c; --yesil-700:#144a30; --yesil-500:#2e8a58; --yesil-100:#e6f5cf;
  --krem:#f4f8e8; --krem-2:#e7efd0; --kart:#fff; --turuncu:#b6f03a; --turuncu-koyu:#3f7a12; --on-ana:#06180f;
  --metin:#10231a; --metin-2:#4f6458; --cizgi:#06180f;
  --baslik:#06180f; --baslik-2:#0b2b1c; --baslik-3:#144a30; --bos:#e1ead0; --dolu:#a9e06a;
  --font-baslik:"Space Grotesk", system-ui, sans-serif; --font-govde:"DM Sans", system-ui, sans-serif;
  --r-s:8px; --r-m:16px; --r-l:26px; --ortu-rgb:6,24,15; --hero-vurgu:#c9ff5c; --hero-vurgu-2:#e9ffbd;
  --golge-s:3px 3px 0 #06180f; --golge-m:5px 5px 0 #06180f; --golge-l:8px 8px 0 #06180f;
  --perde-1:#144a30; --perde-2:#03100a; --logo-zemin:#06180f; --logo-meyve:#b6f03a; --logo-yaprak:#ffffff; --ag-vurgu:#b6f03a;
}
[data-tema="lime"] h1, [data-tema="lime"] h2, [data-tema="lime"] h3, [data-tema="lime"] .hero-sin__h1 { font-weight: 700; letter-spacing: -.04em; line-height: 1.02; }
[data-tema="lime"] .btn { border: 2px solid #06180f; font-weight: 700; box-shadow: 3px 3px 0 #06180f; }
[data-tema="lime"] .btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 #06180f; }
[data-tema="lime"] .btn--ana:hover { background: #c9ff5c; }
[data-tema="lime"] .btn--koyu { background: #06180f; color: #fff; }
[data-tema="lime"] .btn--cizgi { color: #06180f; border-color: #06180f; }
[data-tema="lime"] .btn--cizgi:hover { background: #06180f; color: var(--turuncu); }
[data-tema="lime"] .hero-sin__cam { background: var(--turuncu); border: 2.5px solid #06180f; color: #06180f; border-radius: 22px; box-shadow: 10px 10px 0 #06180f; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-tema="lime"] .hero-sin__ust { color: #06180f; }
[data-tema="lime"] .hero-sin__h1, [data-tema="lime"] .hero-sin__p { color: #06180f; }
[data-tema="lime"] .hero-sin__h1 em { color: #fff; -webkit-text-stroke: 0; background: #06180f; padding: 0 .18em; border-radius: 8px; }
[data-tema="lime"] .hero-sin__cam .btn--ana { background: #06180f; color: var(--turuncu); }
[data-tema="lime"] .hero-sin__cam .btn--cam { background: #fff; color: #06180f; border-color: #06180f; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-tema="lime"] .urun-kart, [data-tema="lime"] .ozellik, [data-tema="lime"] .kutu, [data-tema="lime"] .adim-kart, [data-tema="lime"] .ozet-kart, [data-tema="lime"] .form, [data-tema="lime"] .uh-teklif, [data-tema="lime"] .sss details, [data-tema="lime"] .belge, [data-tema="lime"] .yasal__icindekiler { border: 2px solid #06180f; box-shadow: 5px 5px 0 #06180f; }
[data-tema="lime"] .kk, [data-tema="lime"] .rk { border: 2px solid #06180f; box-shadow: 4px 4px 0 #06180f; }
[data-tema="lime"] .filtre, [data-tema="lime"] .arama input { border: 2px solid #06180f; }
[data-tema="lime"] .filtre.aktif, [data-tema="lime"] .filtre[aria-pressed="true"] { background: var(--turuncu); color: #06180f; border-color: #06180f; }
[data-tema="lime"] .header.kaydi { border-color: #06180f; }
[data-tema="lime"] .bant { background: var(--turuncu); color: #06180f; border-block: 2px solid #06180f; }
[data-tema="lime"] .bant__ic span::after { color: #06180f; }
[data-tema="lime"] .footer a:hover, [data-tema="lime"] .iletisim-oge a:hover { color: var(--turuncu); }

/* ---------- Sans-serif temalarda italik yerine renkli vurgu ---------- */
[data-tema="nordik"] em, [data-tema="mavi"] em, [data-tema="lime"] em { font-style: normal !important; }
[data-tema="nordik"] .bant__ic span, [data-tema="mavi"] .bant__ic span, [data-tema="lime"] .bant__ic span { font-style: normal; font-weight: 600; letter-spacing: -.01em; }

/* =========================================================
   TEMA SEÇİCİ (sunum çubuğu) — js/tema.js
   ========================================================= */
.tema-cubuk { position: fixed; left: 50%; bottom: 18px; z-index: 9000; transform: translateX(-50%); font-family: "Inter", system-ui, sans-serif; font-size: 14px; line-height: 1.3; color: #f4f1ea; }
.tema-cubuk * { box-sizing: border-box; }
.tema-cubuk__ana { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(18,22,19,.88); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 14px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12); }
.tema-cubuk button { font: inherit; color: inherit; border: 0; background: transparent; cursor: pointer; }
.tema-cubuk__ok { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; transition: background .2s; }
.tema-cubuk__ok:hover { background: rgba(255,255,255,.14); }
.tema-cubuk__ok svg { width: 16px; height: 16px; }
.tema-cubuk__ac { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 6px; border-radius: 999px; min-width: 210px; text-align: left; transition: background .2s; }
.tema-cubuk__ac:hover { background: rgba(255,255,255,.1); }
.tema-cubuk__nokta { display: flex; flex: none; }
.tema-cubuk__nokta i { width: 18px; height: 28px; display: block; }
.tema-cubuk__nokta i:first-child { border-radius: 10px 0 0 10px; } .tema-cubuk__nokta i:last-child { border-radius: 0 10px 10px 0; }
.tema-cubuk__ad { display: grid; gap: 1px; min-width: 0; }
.tema-cubuk__ad small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #9ba59d; }
.tema-cubuk__ad b { font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.tema-cubuk__sayi { margin-left: auto; font-size: 12px; color: #9ba59d; padding-left: 8px; }
.tema-cubuk__panel { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%) translateY(8px); width: min(720px, calc(100vw - 24px)); max-height: min(70vh, 640px); overflow: auto; padding: 14px; border-radius: 22px; background: rgba(18,22,19,.95); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.12); display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; opacity: 0; visibility: hidden; transition: opacity .2s, transform .25s, visibility .2s; }
.tema-cubuk.acik .tema-cubuk__panel { opacity: 1; visibility: visible; transform: translateX(-50%); }
.tema-oge { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; text-align: left; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: background .2s, box-shadow .2s; }
.tema-oge:hover { background: rgba(255,255,255,.08); }
.tema-oge[aria-current="true"] { box-shadow: inset 0 0 0 2px #fff; background: rgba(255,255,255,.08); }
.tema-oge__renk { display: grid; grid-template-columns: repeat(3, 1fr); width: 64px; height: 44px; border-radius: 10px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.tema-oge__yazi { display: grid; gap: 1px; min-width: 0; }
.tema-oge__yazi b { font-weight: 600; font-size: 14px; }
.tema-oge__yazi small { font-size: 12px; color: #a3ada5; }
@media (max-width: 600px) {
  .tema-cubuk { bottom: 10px; }
  .tema-cubuk__ac { min-width: 0; padding-right: 10px; }
  .tema-cubuk__sayi { display: none; }
  .tema-cubuk__panel { grid-template-columns: 1fr; }
}
@media print { .tema-cubuk { display: none; } }