/* ==========================================================================
   Görünüm Düzenleyici stil ayarları (v689) — TÜM temalar
   - Tema derisinden SONRA yüklenir. Değer "tema" ise body'de öznitelik yoktur → temanın kendi görünümü.
   - Seçilen değer temayı ezmek zorunda olduğu için köşe/buton/zemin kurallarında !important kullanılır
     (yalnız bu katmanda; tema dosyaları !important'sız kalır).
   ========================================================================== */

/* ---------- Duyuru şeridi ---------- */
.wcx-duyuru { position: relative; z-index: 60; font-size: 13.5px; font-weight: 600; line-height: 1.35; text-align: center; }
.wcx-duyuru-in { max-width: 1240px; margin: 0 auto; padding: 9px 16px; min-height: 18px; }
.wcx-duyuru-oge[hidden] { display: none; }
.wcx-duyuru-oge.on { animation: wcxDuyuru .35s ease; }
.wcx-duyuru a { text-decoration: underline; text-underline-offset: 3px; }
@keyframes wcxDuyuru { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wcx-duyuru-oge.on { animation: none; } }

/* ---------- İkincil renk (yalnız seçildiyse): indirim rozeti + geri sayım ---------- */
body[data-ikincil] .p-badge.sale, body[data-ikincil] .wcx-flas-rozet, body[data-ikincil] .wcx-sayac > span { background: var(--ikincil) !important; color: #ffffff !important; }

/* ---------- Köşe yuvarlaklığı ---------- */
body[data-kose="keskin"]   { --radius: 2px;  --radius-sm: 2px;  --kose-buyuk: 4px; }
body[data-kose="orta"]     { --radius: 10px; --radius-sm: 8px;  --kose-buyuk: 14px; }
body[data-kose="yuvarlak"] { --radius: 20px; --radius-sm: 14px; --kose-buyuk: 26px; }
body[data-kose] .product, body[data-kose] .p-media, body[data-kose] .p-photo, body[data-kose] .cat-tile,
body[data-kose] .cat-tile .imgwrap, body[data-kose] .feature, body[data-kose] .cart-summary, body[data-kose] .form-card,
body[data-kose] .auth-card, body[data-kose] .wcx-flas-kutu, body[data-kose] .wcx-flas-oge, body[data-kose] .pd-gallery .main,
body[data-kose] .pd-info, body[data-kose] .pd-thumbs > *, body[data-kose] .shop-toolbar, body[data-kose] .filter-kutu {
  border-radius: var(--radius) !important;
}
body[data-kose] .slide-inner, body[data-kose] .bento .cell, body[data-kose] .banner,
body[data-kose] .spec-strip, body[data-kose] .newsletter { border-radius: var(--kose-buyuk) !important; }
body[data-kose] .search, body[data-kose] .field input, body[data-kose] .field select, body[data-kose] .field textarea,
body[data-kose] .shop-toolbar select, body[data-kose] .qty, body[data-kose] .chip, body[data-kose] .fiyat-kutu input,
body[data-kose] .header-actions .icon-link, body[data-kose] .w4-fav, body[data-kose] .p-badge, body[data-kose] .filtre-ac {
  border-radius: var(--radius-sm) !important;
}
@media (min-width: 769px) {
  body[data-kose] .sidebar { border-radius: var(--radius) !important; }
  body.tema-wcx4[data-kose] .sidebar { border-radius: 0 var(--kose-buyuk) var(--kose-buyuk) 0 !important; }
}

/* ---------- Buton biçimi ---------- */
body[data-buton="hap"] .btn, body[data-buton="hap"] .add-cart, body[data-buton="hap"] .filtre-uygula,
body[data-buton="hap"] .filtre-sifirla, body[data-buton="hap"] .wcx-eklendi-btn, body[data-buton="hap"] .w4-btn,
body[data-buton="hap"] .slide-cta .btn, body[data-buton="hap"] .bento .cell .more { border-radius: 999px !important; }
body[data-buton="koseli"] .btn, body[data-buton="koseli"] .add-cart, body[data-buton="koseli"] .filtre-uygula,
body[data-buton="koseli"] .filtre-sifirla, body[data-buton="koseli"] .wcx-eklendi-btn, body[data-buton="koseli"] .w4-btn,
body[data-buton="koseli"] .slide-cta .btn, body[data-buton="koseli"] .bento .cell .more { border-radius: 6px !important; }

/* ---------- Header zemini ---------- */
body[data-header="acik"] .site-header, body[data-header="acik"] .nav-bar, body[data-header="acik"] .store-topbar {
  background: #ffffff !important; color: #111827 !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body[data-header="acik"] .site-header { border-bottom: 1px solid #e8eaef !important; }
body[data-header="acik"] .icon-link, body[data-header="acik"] .menu-toggle, body[data-header="acik"] .msearch-toggle,
body[data-header="acik"] .nav a, body[data-header="acik"] .store-topbar a, body[data-header="acik"] .icon-link strong { color: #111827 !important; }
body[data-header="acik"] .icon-link small { color: #6b7280 !important; }
body[data-header="acik"] .search { border: 1.5px solid #e8eaef !important; }
body[data-header="koyu"] .site-header, body[data-header="koyu"] .nav-bar, body[data-header="koyu"] .store-topbar {
  background: #0f1115 !important; color: #ffffff !important; border-color: #23262d !important;
}
body[data-header="koyu"] .icon-link, body[data-header="koyu"] .menu-toggle, body[data-header="koyu"] .msearch-toggle,
body[data-header="koyu"] .store-topbar a, body[data-header="koyu"] .icon-link strong { color: #ffffff !important; }
body[data-header="koyu"] .icon-link small { color: #a1a7b3 !important; }
body[data-header="koyu"] .header-actions .icon-link:not([href="/sepet"]) { background: transparent !important; border-color: #2c3039 !important; }
body[data-header="koyu"] .search { background: #ffffff !important; border-color: transparent !important; }
@media (min-width: 769px) { body[data-header="koyu"] .nav a { color: #ffffff !important; } }
@media (max-width: 768px) {
  /* Mobil açılır menü her zaman beyaz zeminde okunur kalsın */
  body[data-header] .nav { background: #ffffff !important; }
  body[data-header] .nav a { color: #111827 !important; }
}

/* ---------- Footer zemini ---------- */
body[data-footer="acik"] .site-footer { background: #ffffff !important; color: #4b5563 !important; border-top: 1px solid #e8eaef !important; }
body[data-footer="acik"] .site-footer h4, body[data-footer="acik"] .footer-col h4 { color: #111827 !important; }
body[data-footer="acik"] .site-footer a { color: #4b5563 !important; }
body[data-footer="acik"] .site-footer a:hover { color: var(--accent) !important; }
body[data-footer="acik"] .footer-odeme, body[data-footer="acik"] .footer-bottom { border-color: #e8eaef !important; color: #6b7280 !important; }
body[data-footer="koyu"] .site-footer { background: #0f1115 !important; color: #c7cbd3 !important; border-top: 0 !important; }
body[data-footer="koyu"] .site-footer h4, body[data-footer="koyu"] .footer-col h4 { color: #ffffff !important; }
body[data-footer="koyu"] .site-footer a { color: #c7cbd3 !important; }
body[data-footer="koyu"] .site-footer a:hover { color: #ffffff !important; }
body[data-footer="koyu"] .footer-odeme, body[data-footer="koyu"] .footer-bottom { border-color: #23262d !important; color: #8b919c !important; }

/* ---------- Ürün kartı ---------- */
body[data-kart-cerceve="cerceveli"] .products > .product { border: 1px solid var(--line) !important; background: #ffffff !important; box-shadow: none !important; }
body[data-kart-cerceve="cercevesiz"] .products > .product { border: 0 !important; background: transparent !important; box-shadow: none !important; }
body[data-kart-cerceve="cercevesiz"] .products > .product .p-body { padding-left: 2px !important; padding-right: 2px !important; }
body[data-kart-oran="kare"] .products .p-media { aspect-ratio: 1 / 1 !important; }
body[data-kart-oran="dikey"] .products .p-media { aspect-ratio: 3 / 4 !important; }

/* Sepete Ekle — her zaman (metinli) */
body[data-kart-sepet="her"] .products .add-cart {
  opacity: 1 !important; width: auto !important; height: auto !important; min-height: 44px; padding: 0 16px !important;
  font-size: 14px !important; display: inline-flex !important; align-items: center; gap: 8px;
}
body[data-kart-sepet="her"] .products .p-foot { position: static !important; margin-top: auto; padding-top: 10px; }
body[data-kart-sepet="her"] .products .p-title, body[data-kart-sepet="her"] .products .p-price { padding-right: 0 !important; }
/* Sepete Ekle — yalnız ikon */
body[data-kart-sepet="ikon"] .products .add-cart:not([disabled]) {
  opacity: 1 !important; width: 44px !important; height: 44px !important; min-height: 44px; padding: 0 !important;
  font-size: 0 !important; display: inline-grid !important; place-items: center;
}
body[data-kart-sepet="ikon"] .products .add-cart svg { width: 20px; height: 20px; }
/* Sepete Ekle — fareyle gelince (dokunmatikte her zaman görünür) */
body[data-kart-sepet="her"] .products .product .p-foot .add-cart,
body[data-kart-sepet="ikon"] .products .product .p-foot .add-cart { opacity: 1 !important; }
@media (hover: hover) and (min-width: 769px) {
  body[data-kart-sepet="hover"] .products .product .p-foot .add-cart { opacity: 0 !important; transition: opacity .15s; }
  body[data-kart-sepet="hover"] .products .product:hover .p-foot .add-cart,
  body[data-kart-sepet="hover"] .products .product:focus-within .p-foot .add-cart { opacity: 1 !important; }
}

/* ---------- Mobil alt gezinme kapalıysa alt boşluk bırakma ---------- */
@media (max-width: 1024px) {
  body[data-altnav="0"] { padding-bottom: 0 !important; }
  body[data-altnav="0"] .wcx-cerez { bottom: 0 !important; }
  body[data-altnav="0"].tema-wcx4 .pd-buy { bottom: 0 !important; }
}

/* ---------- Mobil arama: alt gezinmede "Ara" sekmesi varken header'daki arama ikonu gizli ----------
   Arama çubuğu yine header'da açılır (alt çubuktaki "Ara" tetikler); açıkken ikon kapatma (X) olarak görünür.
   Alt gezinme kapalıysa ya da değişken sekme "Ara" değilse header ikonu yerinde kalır (mobilde arama kaybolmasın). */
@media (max-width: 768px) {
  body[data-altnav-ara]:not(.tema-wcx4) .header-main:not(.msearch-open) .msearch-toggle { display: none !important; }
}
@media (max-width: 1024px) {
  body.tema-wcx4[data-altnav-ara] .header-main:not(.msearch-open) .msearch-toggle { display: none !important; }
}

/* ==========================================================================
   v691 Cam efekti (Liquid Glass) — Görünüm Düzenleyici > Stil > Cam efekti
   Yalnız içeriğin ÜSTÜNDE yüzen öğeler: header, mobil alt gezinme, çekmeceler, açılır sayfalar.
   Ürün kartları ve formlar cam DEĞİL (okunabilirlik + düşük donanımda kaydırma performansı).
   Siyah zeminli öğeler (WCX2/WCX3 header ve alt çubuk, "koyu" header) koyu cam alır.
   ========================================================================== */
body[data-cam="hafif"] {
  --cam-zemin: rgba(255, 255, 255, .70);  --cam-zemin-koyu: rgba(12, 14, 18, .80);
  --cam-filtre: blur(18px) saturate(180%);
  --cam-kenar: rgba(255, 255, 255, .6);   --cam-kenar-koyu: rgba(255, 255, 255, .10);
  --cam-golge: inset 0 1px 0 rgba(255, 255, 255, .85), 0 10px 30px rgba(15, 23, 42, .10);
  --cam-golge-koyu: inset 0 1px 0 rgba(255, 255, 255, .10), 0 10px 30px rgba(0, 0, 0, .28);
  --cam-perde: rgba(15, 23, 42, .26);
}
body[data-cam="belirgin"] {
  --cam-zemin: rgba(255, 255, 255, .50);  --cam-zemin-koyu: rgba(12, 14, 18, .72);
  --cam-filtre: blur(26px) saturate(210%) brightness(1.05);
  --cam-kenar: rgba(255, 255, 255, .75);  --cam-kenar-koyu: rgba(255, 255, 255, .16);
  --cam-golge: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35), inset 0 0 18px rgba(255, 255, 255, .25), 0 16px 40px rgba(15, 23, 42, .18);
  --cam-golge-koyu: inset 0 1.5px 0 rgba(255, 255, 255, .18), inset 0 0 18px rgba(255, 255, 255, .05), 0 16px 40px rgba(0, 0, 0, .35);
  --cam-perde: rgba(15, 23, 42, .20);
}
/* Geri dönüş: tarayıcı desteklemiyorsa ya da kullanıcı saydamlığı azaltmışsa neredeyse opak düz zemin */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body[data-cam] { --cam-zemin: rgba(255, 255, 255, .97); --cam-zemin-koyu: rgba(12, 14, 18, .97); }
}
@media (prefers-reduced-transparency: reduce) {
  body[data-cam] { --cam-zemin: #ffffff; --cam-zemin-koyu: #0f1115; --cam-filtre: none; }
}

/* --- Açık cam --- */
body[data-cam] .site-header,
body[data-cam] .w2-altnav, body[data-cam] .w4-altnav,
body[data-cam] .wcx-eklendi-sayfa, body[data-cam] .w4-sayfa, body[data-cam] .w4-cekmece {
  background: var(--cam-zemin) !important;
  -webkit-backdrop-filter: var(--cam-filtre) !important; backdrop-filter: var(--cam-filtre) !important;
  border-color: var(--cam-kenar) !important;
  box-shadow: var(--cam-golge) !important;
}
body[data-cam] .site-header .nav-bar, body[data-cam] .site-header .store-topbar { background: transparent !important; }
body[data-cam] .w4-cekmece-bas, body[data-cam] .w4-cekmece-alt { background: transparent; border-color: rgba(15, 23, 42, .08); }
/* Filtre: mobilde alt sayfa (tüm temalar), WCX4'te her genişlikte çekmece */
@media (max-width: 768px) {
  body[data-cam] .sidebar { background: var(--cam-zemin) !important; -webkit-backdrop-filter: var(--cam-filtre); backdrop-filter: var(--cam-filtre); box-shadow: var(--cam-golge) !important; }
  body[data-cam] .filtre-basi, body[data-cam] .filtre-dip { background: transparent !important; }
}
@media (min-width: 769px) {
  body.tema-wcx4[data-cam] .sidebar { background: var(--cam-zemin) !important; -webkit-backdrop-filter: var(--cam-filtre); backdrop-filter: var(--cam-filtre); box-shadow: var(--cam-golge) !important; }
  body.tema-wcx4[data-cam] .filtre-basi, body.tema-wcx4[data-cam] .filtre-dip { background: transparent !important; }
}
/* Perdeler: cam açıkken daha hafif karartma (arka plan camdan seçilsin) */
body[data-cam] .filtre-perde, body[data-cam] .w4-perde, body[data-cam] .wcx-eklendi-perde { background: var(--cam-perde) !important; }

/* --- Koyu cam: siyah zeminli öğeler --- */
body.tema-wcx2[data-cam]:not([data-header="acik"]) .site-header,
body.tema-wcx3[data-cam]:not([data-header="acik"]) .site-header,
body[data-cam][data-header="koyu"] .site-header,
body.tema-wcx2[data-cam] .w2-altnav, body.tema-wcx3[data-cam] .w2-altnav {
  background: var(--cam-zemin-koyu) !important;
  border-color: var(--cam-kenar-koyu) !important;
  box-shadow: var(--cam-golge-koyu) !important;
}
/* Okunabilirlik: camın arkasından koyu/renkli içerik geçse de sekme yazıları ≥4.5:1 kalsın.
   Açık camda pasif sekmeler koyulaşır, koyu camda açılır (aktif sekme vurgu renginde kalır). */
body[data-cam] .w2-altnav a:not(.on), body[data-cam] .w4-altnav a:not(.on):not(.w4-altnav-sepet) { color: #1f2937 !important; }
body.tema-wcx2[data-cam] .w2-altnav a:not(.on), body.tema-wcx3[data-cam] .w2-altnav a:not(.on) { color: #e4e4e7 !important; }
/* Aktif sekme: yazı yüksek kontrastlı, ikon vurgu renginde, arkasında hafif hap — durum yalnız renge bağlı değil */
body[data-cam] .w2-altnav a.on, body[data-cam] .w4-altnav a.on { color: #0f172a !important; background: rgba(255, 255, 255, .72); border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08); }
body[data-cam] .w2-altnav a.on svg, body[data-cam] .w4-altnav a.on svg { color: var(--accent); }
body.tema-wcx2[data-cam] .w2-altnav a.on, body.tema-wcx3[data-cam] .w2-altnav a.on { color: #ffffff !important; background: rgba(255, 255, 255, .14); }
/* Mobil açılır menü (hamburger) camın içinde kalmasın: düz beyaz */
@media (max-width: 768px) { body[data-cam] .site-header .nav { background: #ffffff !important; } }

/* ==========================================================================
   v691 Yüzen mobil öğeler — alt gezinme ve açılır sayfalar kenarlardan ayrılır
   ========================================================================== */
@media (max-width: 768px) {
  body[data-yuzen]:not(.tema-wcx4) .w2-altnav {
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 30px; padding: 4px 6px; border: 1px solid var(--cam-kenar, rgba(15, 23, 42, .08));
    box-shadow: var(--cam-golge, 0 12px 30px rgba(15, 23, 42, .16));
  }
  body[data-yuzen]:has(> .w2-altnav) { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  body[data-yuzen]:has(> .w2-altnav) .wcx-cerez { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  body[data-yuzen] .sidebar { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 28px; max-height: 80vh; }
  body[data-yuzen] .wcx-eklendi-sayfa { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 28px; padding-bottom: 18px; }
}
@media (max-width: 1024px) {
  body[data-yuzen].tema-wcx4 .w4-altnav {
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 34px; padding: 6px; align-items: center; border: 1px solid var(--cam-kenar, rgba(15, 23, 42, .08));
    box-shadow: var(--cam-golge, 0 12px 30px rgba(15, 23, 42, .16));
  }
  body[data-yuzen].tema-wcx4 .w4-altnav .w4-altnav-sepet { margin-top: 0; width: 56px; height: 56px; }
  body[data-yuzen].tema-wcx4:has(> .w4-altnav) { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  body[data-yuzen].tema-wcx4 .w4-sayfa { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 28px; padding-bottom: 18px; }
  body[data-yuzen].tema-wcx4:has(.pd-buy) .pd-buy { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 24px; border: 1px solid var(--cam-kenar, rgba(15, 23, 42, .08)); box-shadow: var(--cam-golge, 0 12px 30px rgba(15, 23, 42, .16)); }
}
@media (max-width: 1024px) {
  body.tema-wcx4[data-cam] .pd-buy { background: var(--cam-zemin) !important; -webkit-backdrop-filter: var(--cam-filtre); backdrop-filter: var(--cam-filtre); box-shadow: var(--cam-golge) !important; }
}