/* ==========================================================================
   LUXURY — TEMEL KATMAN (perfect.css'ten SONRA yüklenir)
   Sıra: luxury.css → css/kart.css → css/footer.css → css/genel.css (kabuk) → css/cark.css → css/asistan.css → css/<sayfa>.css
   İçindekiler: 1 belirteçler (kanonik --lx-* + eski ex, ln, bj, el önekli belirteçlerin takma adları) · 2 koyu / yüksek kontrast ·
   3 temel + kapsayıcı + tipografi · 4 düğmeler (.lx-btn) · 5 form alanları · 6 rozet / sayaç / yardımcılar ·
   7 çekmece kabuğu (sepet yüzen kart, off-canvas) · 8 pencere kabuğu (r12) · 9 kapat düğmeleri ·
   11 son gezilenler + çekirdek varyant penceresi tabanı (kart.css ezer) · 13 kayan ray + oklar · 14 ortak ·
   16 eski kabuk ezmeleri · 17 hareket azaltma / zorunlu renkler
   (electro'dan kalan sepet çekmecesi içi, eski ürün kartı, klasör başlık ve boş durum kuralları kaldırıldı — hiçbir sayfa kullanmıyor)
   Renkler panelden: temaheader.php → --lx-gold / --lx-btn-bg / --lx-topbar-bg (§1.1-C).
   ========================================================================== */

/* ---------------- 1) BELİRTEÇLER ---------------- */
:root {
  /* kanonik (§1.1-A) */
  --lx-gold: #DBAF36; --lx-gold-rgb: 219, 175, 54; --lx-gold-ink: #FFFFFF;
  --lx-ink: #22201D; --lx-ink-2: #202025; --lx-text: #4B4B4A; --lx-icon-2: #2C2C2C; --lx-muted: #A1A1A0;
  --lx-line: #EAEAE9; --lx-soft: #F4F3F1; --lx-soft-2: #F4F4F4;
  --lx-bg: #FFFFFF; --lx-surface: #FFFFFF; --lx-header-bg: #FFFFFF; --lx-drop-bg: #FFFFFF; --lx-input-bg: #F4F3F1;
  --lx-on-dark-line: rgba(255, 255, 255, .18); --lx-overlay: rgba(0, 0, 0, .5);
  --lx-shadow-drop: 0 10px 30px rgba(0, 0, 0, .1); --lx-shadow-backtop: 2px 3px 10px rgba(0, 0, 0, .15);
  --lx-shadow-sticky: 0 -6px 10px 5px rgba(0, 0, 0, .2); --lx-shadow-quick: 0 2px 5px rgba(0, 0, 0, .11);
  --lx-backtop: #000000; --lx-new: #9CBB14; --lx-sale: #DD8752;
  --lx-ok: #4CBB6C; --lx-err: #FF4C4C; --lx-warn: #FF9A52; --lx-ok-text: #1E7E46; --lx-err-text: #B03A2E;
  --lx-btn-bg: #22201D; --lx-btn-ink: #FFFFFF; --lx-topbar-bg: #22201D; --lx-topbar-ink: #FFFFFF;
  --lx-focus: #22201D; --lx-bant-yedek: radial-gradient(120% 140% at 70% 40%, #6B5A3E 0%, #2A2520 55%, #1A1816 100%);
  --lx-font: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* boşluk ve kap (§1.3–1.4) */
  --lx-gutter: 30px; --lx-sec: 80px; --lx-menu-gap: 19px; --lx-col-title-mb: 22px; --lx-link-lh: 31px;
  --lx-drop-pad: 28px 34px; --lx-mega-pad: 56px 34px 74px; --lx-mega-gorsel-bg: var(--lx-soft-2);
  --lx-shell: 1730px; --lx-container: 1440px; --lx-mega-inner: 1650px; --lx-news: 616px;
  --lx-r-btn: 9px; --lx-r-card: 12px; --lx-r-img: 18px; --lx-r-badge: 3px;
  --lx-gecis: .3s ease;
  /* §1.1-B takma adları (mağaza, giriş-hesap, sepet-ödeme katmanları) */
  --lx-altin: var(--lx-gold); --lx-koyu: var(--lx-ink); --lx-metin: var(--lx-text); --lx-gri: var(--lx-muted);
  --lx-cizgi: var(--lx-line); --lx-blok-baslik: var(--lx-ink-2); --lx-field: var(--lx-soft); --lx-perde: var(--lx-overlay);

  /* eski electro belirteçleri → Luxury (yeniden yazılmamış sayfa katmanları çalışmaya devam etsin) */
  --ex-primary: var(--lx-gold); --ex-primary-rgb: var(--lx-gold-rgb); --ex-on-primary: var(--lx-gold-ink);
  --ex-button: var(--lx-btn-bg); --ex-on-button: var(--lx-btn-ink);
  --ex-menubar: var(--lx-header-bg); --ex-on-menubar: var(--lx-ink);
  --ex-secondary: var(--lx-sale); --ex-on-secondary: #FFFFFF;
  --ex-topbar: var(--lx-topbar-bg); --ex-on-topbar: var(--lx-topbar-ink);
  --ex-heading: var(--lx-ink); --ex-body: var(--lx-text);
  --ex-gray-light: var(--lx-soft); --ex-gray-100: var(--lx-soft-2); --ex-gray-200: var(--lx-line); --ex-gray-300: #D6D5D2;
  --ex-gray-400: var(--lx-muted); --ex-gray-500: #6B6A67; --ex-gray-600: var(--lx-text); --ex-gray-700: #3A3835;
  --ex-brand-50: var(--lx-soft); --ex-brand-100: var(--lx-soft-2); --ex-brand-200: #F8F1DE; --ex-brand-300: #F0E3BC;
  --ex-brand-400: #E6CF8C; --ex-brand-500: var(--lx-gold);
  --ex-border-soft: var(--lx-line); --ex-tab-bg: var(--lx-soft);
  --ex-green: var(--lx-ok-text); --ex-green-light: #E7F4EB; --ex-success: var(--lx-ok);
  --ex-danger: var(--lx-err-text); --ex-danger-light: #FBEAE8; --ex-warning: var(--lx-warn); --ex-star: var(--lx-sale);
  --ex-best-seller: linear-gradient(90deg, var(--lx-sale) 0, var(--lx-gold) 100%); --ex-campaign: var(--lx-ink);
  --ex-sh-1: none; --ex-sh-3: var(--lx-shadow-drop); --ex-sh-card: var(--lx-shadow-drop); --ex-sh-detail: var(--lx-shadow-drop);
  --ex-sh-search: var(--lx-shadow-drop); --ex-sh-bar: var(--lx-shadow-drop); --ex-sh-toolbar: none; --ex-sh-btn: none;
  --ex-sh-cookie: var(--lx-shadow-drop); --ex-sh-media: var(--lx-shadow-drop); --ex-sh-input: none;
  --ex-gecis: .3s ease; --ex-gecis-dugme: .3s ease; --ex-gecis-cekmece: .3s ease;
  --ex-font: var(--lx-font); --ex-font-el: var(--lx-font);
  --ex-kap: var(--lx-container); --ex-kenar: 15px; --ex-sec-y: var(--lx-sec); --ex-gutter: 30px; --ex-sabit-h: 0px;
  --pf-font: var(--lx-font);
  /* eski Lina / Bujiteri / Elisa belirteçleri */
  --ln-baslik: var(--lx-ink); --ln-yazi: var(--lx-text); --ln-yazi-2: #6B6A67; --ln-meta: var(--lx-muted); --ln-meta-2: #D6D5D2;
  --ln-gri: var(--lx-soft); --ln-gri-2: var(--lx-soft-2); --ln-gri-3: var(--lx-line); --ln-cizgi: var(--lx-line); --ln-cizgi-2: var(--lx-soft-2);
  --ln-ayrac: var(--lx-line); --ln-yildiz: var(--lx-sale); --ln-yildiz-bos: var(--lx-muted); --ln-kirmizi: var(--lx-err-text);
  --ln-vurgu: var(--lx-gold); --ln-dugme: var(--lx-btn-bg); --ln-on-dugme: var(--lx-btn-ink); --ln-dugme-hover: var(--lx-gold);
  --ln-r: 9px; --ln-r-k: 12px; --ln-golge-dd: var(--lx-shadow-drop); --ln-kap: var(--lx-container);
  --ln-fs-sayfa: 44px; --ln-fs-h2: 36px; --ln-fs-h3: 18px; --ln-fs-govde: 15px; --ln-fs-kart: 16px; --ln-fs-fiyat: 16px; --ln-fs-kucuk: 14px; --ln-gecis: .3s;
  --bj-font: var(--lx-font); --bj-altin: var(--lx-gold); --bj-altin-yazi: var(--lx-gold); --bj-altin-acik: #F8F1DE; --bj-altin-cizgi: #E6CF8C;
  --bj-on-altin: var(--lx-gold-ink); --bj-siyah: var(--lx-btn-bg); --bj-on-siyah: var(--lx-btn-ink);
  --bj-yazi: var(--lx-ink); --bj-yazi-2: var(--lx-text); --bj-yazi-3: var(--lx-muted); --bj-yazi-4: #D6D5D2;
  --bj-cizgi: var(--lx-line); --bj-cizgi-2: var(--lx-soft-2); --bj-zemin: var(--lx-bg); --bj-zemin-2: var(--lx-soft); --bj-zemin-3: var(--lx-soft-2);
  --bj-koyu: var(--lx-ink); --bj-footer: var(--lx-bg); --bj-basari: var(--lx-ok-text); --bj-hata: var(--lx-err-text);
  --bj-r-s: 9px; --bj-r: 9px; --bj-r-l: 12px; --bj-golge: none; --bj-golge-2: var(--lx-shadow-drop); --bj-kap: var(--lx-container); --bj-kenar: 15px;
  --el-zemin: var(--lx-bg); --el-kart: var(--lx-surface); --el-cizgi: var(--lx-line); --el-cizgi-2: var(--lx-soft-2);
  --el-ink: var(--lx-ink); --el-ink-2: var(--lx-text); --el-ink-3: var(--lx-muted); --el-lacivert: var(--lx-ink);
  --el-golge: none; --el-golge-2: var(--lx-shadow-drop); --el-buton: var(--lx-btn-bg); --el-turuncu: var(--lx-sale); --el-rozet: var(--lx-sale);
  --el-yesil-yumusak: #E7F4EB; --el-yesil-yazi: var(--lx-ok-text); --el-fiyat: var(--lx-ink);
  --el-r-s: 9px; --el-r-m: 9px; --el-r-l: 12px; --el-r-xl: 18px;
  --vt-accent: var(--lx-gold); --vt-btn: var(--lx-btn-bg); --pf-primary: var(--lx-gold);
  --bp-primary: var(--lx-gold); --bp-secondary: var(--lx-sale); --bp-topbar: var(--lx-topbar-bg); --bp-menubar: var(--lx-header-bg); --bp-button: var(--lx-btn-bg);
  color-scheme: light;
}

/* ---------------- 2) KOYU TEMA + YÜKSEK KONTRAST (§26.2; anahtar <html data-tema="acik|koyu|kontrast">) ---------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]):not([data-tema="kontrast"]) {
    --lx-gold: #E2BC52; --lx-gold-rgb: 226, 188, 82; --lx-gold-ink: #121110;
    --lx-ink: #F2EFE9; --lx-ink-2: #F2EFE9; --lx-text: #C9C6C0; --lx-icon-2: #F2EFE9; --lx-muted: #8E8B85;
    --lx-line: #2C2A27; --lx-soft: #22201E; --lx-soft-2: #1E1D1B; --lx-bg: #121110; --lx-surface: #1A1917; --lx-header-bg: #121110;
    --lx-drop-bg: #1A1917; --lx-input-bg: #22201E; --lx-overlay: rgba(0, 0, 0, .65); --lx-shadow-drop: 0 10px 30px rgba(0, 0, 0, .5);
    --lx-btn-bg: #F2EFE9; --lx-btn-ink: #121110; --lx-topbar-bg: #1A1917; --lx-topbar-ink: #F2EFE9; --lx-backtop: #2C2A27;
    --lx-focus: #E2BC52; --lx-ok-text: #6FD08D; --lx-err-text: #FF8A80;
    --ex-gray-300: #3A3835; --ex-gray-500: #A9A59E; --ex-gray-700: #D9D5CE; --ex-brand-200: #2A2418; --ex-brand-300: #3A3120; --ex-brand-400: #6B5A2E;
    --ex-green-light: #16271C; --ex-danger-light: #2E1A18; --ln-yazi-2: #A9A59E; --bj-altin-acik: #2A2418;
    color-scheme: dark;
  }
}
:root[data-tema="koyu"] {
  --lx-gold: #E2BC52; --lx-gold-rgb: 226, 188, 82; --lx-gold-ink: #121110;
  --lx-ink: #F2EFE9; --lx-ink-2: #F2EFE9; --lx-text: #C9C6C0; --lx-icon-2: #F2EFE9; --lx-muted: #8E8B85;
  --lx-line: #2C2A27; --lx-soft: #22201E; --lx-soft-2: #1E1D1B; --lx-bg: #121110; --lx-surface: #1A1917; --lx-header-bg: #121110;
  --lx-drop-bg: #1A1917; --lx-input-bg: #22201E; --lx-overlay: rgba(0, 0, 0, .65); --lx-shadow-drop: 0 10px 30px rgba(0, 0, 0, .5);
  --lx-btn-bg: #F2EFE9; --lx-btn-ink: #121110; --lx-topbar-bg: #1A1917; --lx-topbar-ink: #F2EFE9; --lx-backtop: #2C2A27;
  --lx-focus: #E2BC52; --lx-ok-text: #6FD08D; --lx-err-text: #FF8A80;
  --ex-gray-300: #3A3835; --ex-gray-500: #A9A59E; --ex-gray-700: #D9D5CE; --ex-brand-200: #2A2418; --ex-brand-300: #3A3120; --ex-brand-400: #6B5A2E;
  --ex-green-light: #16271C; --ex-danger-light: #2E1A18; --ln-yazi-2: #A9A59E; --bj-altin-acik: #2A2418;
  color-scheme: dark;
}
:root[data-tema="kontrast"] {
  --lx-gold: #7A5C0E; --lx-gold-rgb: 122, 92, 14; --lx-gold-ink: #FFFFFF;
  --lx-ink: #000000; --lx-ink-2: #000000; --lx-text: #1A1A1A; --lx-icon-2: #000000; --lx-muted: #5C5C5B;
  --lx-line: #6B6B6B; --lx-soft: #FFFFFF; --lx-soft-2: #FFFFFF; --lx-bg: #FFFFFF; --lx-surface: #FFFFFF; --lx-input-bg: #FFFFFF;
  --lx-btn-bg: #000000; --lx-btn-ink: #FFFFFF; --lx-topbar-bg: #000000; --lx-topbar-ink: #FFFFFF; --lx-focus: #000000;
  --lx-overlay: rgba(0, 0, 0, .7); --lx-ok-text: #145C32; --lx-err-text: #8E2B22;
  --ex-gray-300: #6B6B6B; --ex-gray-500: #333333; --ex-gray-700: #111111;
}

/* ---------------- 3) TEMEL + KAPSAYICI + TİPOGRAFİ (§1.2, §1.4) ---------------- */
html body .pf-container, html body .container, html body .container-lg, html body .container-xl, html body .container-md, html body .container-sm {
  width: 100%; max-width: var(--lx-container) !important; margin-left: auto; margin-right: auto; padding-left: 15px !important; padding-right: 15px !important; }
html body.lx-govde { margin: 0; background: var(--lx-bg) !important; color: var(--lx-text); font-family: var(--lx-font); font-size: 15px; font-weight: 400; line-height: 1.4444;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html body.lx-govde, html body.lx-govde :is(input, textarea, select, button) { font-family: var(--lx-font); letter-spacing: normal; }
:where(body.lx-govde) :is(h1, h2, h3, h4, h5, h6) { color: var(--lx-ink); font-family: var(--lx-font); font-weight: 500; line-height: 1.1; }
:where(.lx-govde) h1 { font-size: 48px; } :where(.lx-govde) h2 { font-size: 40px; } :where(.lx-govde) h3 { font-size: 36px; }
:where(.lx-govde) h4 { font-size: 28px; } :where(.lx-govde) h5 { font-size: 22px; } :where(.lx-govde) h6 { font-size: 18px; }
:where(body.lx-govde) :where(b, strong) { font-weight: 600; }
:where(html body.lx-govde) p { font-size: inherit; }
:where(body.lx-govde) a { color: inherit; text-decoration: none; transition: color var(--lx-gecis); }
body.lx-govde header:not(.pf-header) { z-index: auto; background: transparent; }
body.lx-govde img { max-width: 100%; }
.ex-ik { display: block; flex: none; width: 1em; height: 1em; }
.lx-sr, .ln-gizli, .el-ft-gizli, .ex-gizli { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
::selection { background: rgba(var(--lx-gold-rgb), .3); color: var(--lx-ink); }

/* odak (§1.8): koyu halka (koyu zeminde altın) — her zaman görünür */
body.lx-govde :is(a, button, summary, select, textarea, input, [tabindex]):focus-visible { outline: 2px solid var(--lx-focus) !important; outline-offset: 2px; }
html body.lx-govde input:focus, html body.lx-govde textarea:focus, html body.lx-govde select:focus { box-shadow: none; }
:root[data-tema="kontrast"] body.lx-govde :is(a, button, summary, select, textarea, input, [tabindex]):focus-visible { outline-width: 3px !important; }
.lx-atla { position: fixed; top: 8px; left: 8px; z-index: 5000; display: inline-flex; align-items: center; min-height: 46px; padding: 10px 25px; border-radius: 9px;
  background: var(--lx-btn-bg); color: var(--lx-btn-ink) !important; font: 600 14px/24px var(--lx-font); letter-spacing: .28px; transform: translateY(-200%); transition: transform .2s; }
.lx-atla:focus { transform: none; }
.ex-icerik-hedef { display: block; height: 0; outline: 0; }
.ex-el-yazi { font-family: var(--lx-font); font-weight: 600; color: var(--lx-gold); }
html body .ex-el-yazi, html body .ex-el-yazi * { font-family: var(--lx-font) !important; }
.lx-vurgu { color: var(--lx-gold); }

/* ---------------- 4) DÜĞMELER (.lx-btn — §1.8; 14/24 600 ls .28, r9) ---------------- */
.lx-btn, .ex-dugme, .el-btn, .bj-dugme-siyah, .bj-dugme-altin, .ln-dugme, .bj-dugme-cizgi {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; height: auto; padding: 10px 25px;
  border: 1px solid var(--lx-btn-bg); border-radius: 9px; background: var(--lx-btn-bg); color: var(--lx-btn-ink) !important;
  font-family: var(--lx-font); font-size: 14px; font-weight: 600; line-height: 24px; letter-spacing: .28px; text-transform: none; white-space: nowrap; text-decoration: none !important;
  cursor: pointer; box-shadow: none; transition: background-color .3s, color .3s, border-color .3s; }
.lx-btn:hover, .lx-btn:focus-visible, .ex-dugme:hover, .el-btn:hover, .bj-dugme-siyah:hover, .bj-dugme-altin:hover, .ln-dugme:hover {
  border-color: var(--lx-gold); background: var(--lx-gold); color: var(--lx-gold-ink) !important; transform: none; box-shadow: none; }
.lx-btn .ex-ik, .ex-dugme .ex-ik, .el-btn svg, .bj-dugme-siyah svg, .bj-dugme-altin svg, .ln-dugme svg { width: 16px; height: 16px; flex: none; }
.lx-btn--form { padding: 10px 30px; }
.lx-btn--gold, .ex-dugme-ikincil, .bj-dugme-altin { min-height: 50px; padding: 13px 30px; border-color: var(--lx-gold); background: var(--lx-gold); color: var(--lx-gold-ink) !important; }
.lx-btn--gold:hover, .lx-btn--gold:focus-visible, .ex-dugme-ikincil:hover, .bj-dugme-altin:hover { border-color: var(--lx-ink); background: var(--lx-ink); color: var(--lx-bg) !important; }
.lx-btn--white { min-height: 42px; padding: 8px 20px; border-color: #FFFFFF; background: #FFFFFF; color: #22201D !important; }
.lx-btn--white:hover, .lx-btn--white:focus-visible { border-color: var(--lx-gold); background: var(--lx-gold); color: #FFFFFF !important; }
.lx-btn--line, .ex-dugme-cizgi, .el-btn.cizgi, .bj-dugme-cizgi, .ln-dugme.cizgi { min-height: 48px; padding: 11px 23px; border-color: var(--lx-ink); background: transparent; color: var(--lx-ink) !important; }
.lx-btn--line:hover, .lx-btn--line:focus-visible, .ex-dugme-cizgi:hover, .el-btn.cizgi:hover, .bj-dugme-cizgi:hover, .ln-dugme.cizgi:hover { border-color: var(--lx-gold); background: var(--lx-gold); color: #FFFFFF !important; }
.lx-btn--dolu { min-height: 48px; padding: 11px 23px; }
.lx-btn--link { min-height: 0; padding: 0 0 2px; border: 0; border-radius: 0; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; color: var(--lx-ink) !important; }
.lx-btn--link:hover, .lx-btn--link:focus-visible { border: 0; background: linear-gradient(var(--lx-gold), var(--lx-gold)) left bottom / 100% 1px no-repeat; color: var(--lx-gold) !important; animation: lxCizgiSupur .3s ease; }
@keyframes lxCizgiSupur { from { background-size: 0 1px; } to { background-size: 100% 1px; } }
.ex-dugme-lg { min-height: 50px; padding: 13px 30px; }
.ex-dugme-sm { min-height: 40px; padding: 7px 20px; }
.ex-dugme-gri { border-color: var(--lx-soft); background: var(--lx-soft); color: var(--lx-ink) !important; }
.ex-dugme-siyah { border-color: var(--lx-btn-bg); background: var(--lx-btn-bg); color: var(--lx-btn-ink) !important; }
.lx-btn:disabled, .lx-btn[aria-disabled="true"], .ex-dugme:disabled, .ex-dugme[aria-disabled="true"] {
  border-color: #F6F6F6; background: #F6F6F6; color: #B8B8B8 !important; opacity: .8; cursor: not-allowed; }
.lx-btn[aria-busy="true"], .ex-dugme[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.lx-btn[aria-busy="true"]::after, .ex-dugme[aria-busy="true"]::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid var(--lx-btn-ink); border-right-color: transparent; border-radius: 50%; animation: lxDon .7s linear infinite; }
@keyframes lxDon { to { transform: rotate(360deg); } }
.ex-metin-link, .lx-metin-link { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 1px; color: var(--lx-ink); font-size: 14px; font-weight: 600; line-height: 24px;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; text-decoration: none; }
.ex-metin-link:hover, .lx-metin-link:hover { color: var(--lx-gold); }

/* ---------------- 5) FORM ALANLARI (§1.9) ---------------- */
.lx-input, .ex-girdi, .el-girdi { width: 100%; height: 48px; padding: 0 20px; border: 1px solid var(--lx-line); border-radius: 9px; background: var(--lx-input-bg);
  color: var(--lx-ink); font: 400 14px/20px var(--lx-font); box-shadow: none; transition: border-color .3s, background-color .3s, box-shadow .3s; }
.lx-input::placeholder, .ex-girdi::placeholder, .el-girdi::placeholder { color: var(--lx-muted); opacity: 1; }
.lx-input:focus, .ex-girdi:focus, .el-girdi:focus { border-color: var(--lx-gold); background: var(--lx-surface); outline: 0; box-shadow: 0 0 0 3px rgba(var(--lx-gold-rgb), .25); }
.lx-input[aria-invalid="true"], .ex-girdi[aria-invalid="true"] { border-color: var(--lx-err); }
.lx-input--news { height: 50px; padding: 14px 20px; border-color: transparent; background: var(--lx-soft); }
.lx-onay { width: 14px; height: 14px; margin: 0; border: 1px solid rgba(38, 48, 54, .2); border-radius: 3px; background: var(--lx-surface); appearance: none; -webkit-appearance: none; cursor: pointer; flex: none; }
.lx-onay:checked { border-color: var(--lx-gold); background: var(--lx-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7.3 2.6 2.5L11 4.4'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* ---------------- 6) ROZET · SAYAÇ · YARDIMCILAR (§1.10) ---------------- */
.lx-sayac, .ex-sayac { position: absolute; top: -2px; right: -8px; display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0;
  border-radius: 50%; background: var(--lx-gold); color: #FFFFFF; font: 600 12px/16px var(--lx-font); letter-spacing: 0; pointer-events: none; }
.lx-sayac:not(:empty):is([data-iki], .iki) { padding: 0 4px; border-radius: 8px; }
.lx-rozet { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 3px; background: var(--lx-sale); color: #FFFFFF; font: 700 11px/20px var(--lx-font); text-transform: uppercase; letter-spacing: 0; }
.lx-rozet--yeni { background: var(--lx-new); }
.lx-rozet--indirim { background: var(--lx-sale); }
.lx-yildizlar { display: inline-flex; gap: 1px; height: 15px; }
.lx-yildizlar.bos { display: block; }
.lx-yildiz { position: relative; width: 13px; height: 15px; background: var(--lx-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z'/%3E%3C/svg%3E") center / 13px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z'/%3E%3C/svg%3E") center / 13px no-repeat; }
.lx-yildiz.dolu { background: var(--lx-sale); }
.lx-yildiz.yarim { background: linear-gradient(90deg, var(--lx-sale) 50%, var(--lx-muted) 50%); }
.lx-bayrak { display: inline-flex; flex: none; align-items: center; line-height: 0; }
.lx-bayrak svg, .lx-bayrak img { display: block; width: 16px !important; height: 11px !important; border-radius: 0 !important; object-fit: cover; }
html.ex-kilit, html.lx-kilit { overflow: hidden !important; scrollbar-gutter: stable; }

/* ---------------- 7) ÇEKMECE KABUĞU (§8 sepet yüzen kart · §20.3 off-canvas) — z: off-canvas 2000/2001 · sepet 2100/2101 ---------------- */
.ex-cekmece-karartma { position: fixed; inset: 0; z-index: 2100; background: var(--lx-overlay); opacity: 0; transition: opacity .2s linear; }
.ex-cekmece-karartma.mobil { z-index: 2000; transition-duration: .4s; }
.ex-cekmece-karartma.acik { opacity: 1; }
.ex-cekmece-karartma[hidden] { display: none; }
.ex-cekmece { position: fixed; top: 0; bottom: 0; z-index: 2101; display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--lx-surface);
  font-family: var(--lx-font); color: var(--lx-ink); box-shadow: none; visibility: hidden; transition: transform .3s ease, opacity .3s ease, visibility 0s linear .3s; }
.ex-cekmece.acik { visibility: visible; transform: none !important; opacity: 1 !important; transition: transform .3s ease, opacity .3s ease, visibility 0s; }
.ex-cekmece:focus { outline: 0; }
.ex-cekmece.sol { left: 0; z-index: 2001; transform: translateX(-100%); transition-duration: .4s; }
.ex-cekmece.sag { top: 16px; right: 16px; bottom: 16px; width: 400px; max-width: calc(100% - 32px); height: auto; overflow: hidden; border-radius: 12px; opacity: 0;
  transform: translateX(calc(100% + 16px)); scrollbar-width: thin; }
.ex-cekmece.sag :is(.ex-sc-kapat, [data-ex-cekmece-kapat].ex-kapat) { position: absolute; top: 20px; right: 20px; z-index: 3; }

/* ---------------- 8) PENCERE KABUĞU (§11: perde #000 .5, r12, gölgesiz, translateY(-25%)→0 .3s) — z 3000/3001 ---------------- */
.ex-modal { position: fixed; inset: 0; z-index: 3000; display: flex; padding: 40px 16px; overflow-y: auto; background: var(--lx-overlay); opacity: 0; transition: opacity .3s ease-out;
  font-family: var(--lx-font); color: var(--lx-ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ex-modal.acik { opacity: 1; }
.ex-modal[hidden] { display: none; }
.ex-modal-diyalog { position: relative; z-index: 3001; width: 100%; max-width: 930px; margin: auto; filter: none; transform: translateY(-25%); transition: transform .3s ease-out; outline: 0; }
.ex-modal.acik .ex-modal-diyalog { transform: none; }
.ex-modal-460 { max-width: 460px; } .ex-modal-560 { max-width: 560px; } .ex-modal-624 { max-width: 624px; } .ex-modal-750 { max-width: 750px; } .ex-modal-930 { max-width: 930px; }
.ex-modal-icerik { position: relative; padding: 40px; border-radius: 12px; background: var(--lx-surface); -webkit-mask: none; mask: none; }
.ex-modal-baslik { margin: 0 0 20px; padding-right: 32px; color: var(--lx-ink); font-size: 28px; font-weight: 500; line-height: 33px; }
html.ex-modal-acik { overflow: hidden !important; }
@media (max-width: 767.98px) { .ex-modal { padding: 24px 16px; } .ex-modal-icerik { padding: 32px 20px 24px; } .ex-modal-baslik { font-size: 22px; line-height: 28px; } }

/* ---------------- 9) KAPAT DÜĞMELERİ (pencere: × 24 px opaklık .6 → 1 · çekmece: 30×30, X 20 px) ---------------- */
.ex-kapat, .ln-kapat, html body.lx-govde .bp-ukm-head .x, html body.lx-govde #bpAlertModal .bp-modal-close, html body.lx-govde #bpSoruSorModal > div > div:first-child > span,
html body.lx-govde .bp-armodal-head .hx, html body.lx-govde #bpCarkOverlay .bp-cark-x, html body.lx-govde #lightbox .lb-data .lb-close {
  display: inline-flex !important; align-items: center; justify-content: center; flex: none; width: 30px !important; height: 30px !important; margin: 0; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--lx-ink) !important; opacity: 1 !important; font-size: 20px; line-height: 0 !important;
  cursor: pointer; box-shadow: none !important; transition: color .3s, opacity .3s !important; }
.ex-kapat .ex-ik, .ln-kapat svg { width: 20px; height: 20px; }
.ex-kapat:hover, .ln-kapat:hover, html body.lx-govde .bp-ukm-head .x:hover, html body.lx-govde #bpAlertModal .bp-modal-close:hover, html body.lx-govde #bpSoruSorModal > div > div:first-child > span:hover,
html body.lx-govde .bp-armodal-head .hx:hover, html body.lx-govde #bpCarkOverlay .bp-cark-x:hover, html body.lx-govde #lightbox .lb-data .lb-close:hover { background: transparent !important; color: var(--lx-gold) !important; }
.ex-kapat.ex-modal-kapat { position: absolute; top: 12px; right: 12px; z-index: 2; opacity: .6 !important; }
.ex-kapat.ex-modal-kapat .ex-ik { width: 22px; height: 22px; }
.ex-kapat.ex-modal-kapat:hover { opacity: 1 !important; color: var(--lx-ink) !important; }
html body.lx-govde .bp-ukm-head .x { position: absolute !important; top: 12px; right: 12px; z-index: 3; font-size: 0 !important; }
html body.lx-govde .bp-ukm-head .x svg { width: 20px; height: 20px; }
html body.lx-govde .bp-ukm-head .x:not(:has(svg))::before,
html body.lx-govde #bpAlertModal .bp-modal-close::before, html body.lx-govde #bpSoruSorModal > div > div:first-child > span::before,
html body.lx-govde .bp-armodal-head .hx::before, html body.lx-govde #bpCarkOverlay .bp-cark-x::before, html body.lx-govde #lightbox .lb-data .lb-close::before {
  content: ""; display: block; flex: none; width: 18px; height: 18px; margin: 0; background: currentColor; transform: none; grid-area: auto;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 5.5l12 13M18 5.5 6 18.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 5.5l12 13M18 5.5 6 18.5'/%3E%3C/svg%3E") center / contain no-repeat; }
html body.lx-govde #bpAlertModal .bp-modal-close, html body.lx-govde #bpSoruSorModal > div > div:first-child > span, html body.lx-govde .bp-armodal-head .hx, html body.lx-govde #lightbox .lb-data .lb-close, html body.lx-govde #bpCarkOverlay .bp-cark-x { font-size: 0 !important; text-indent: 0; }
html body.lx-govde #lightbox .lb-data .lb-close::after, html body.lx-govde #bpCarkOverlay .bp-cark-x::after { content: none !important; display: none !important; }
html body.lx-govde .bp-armodal-head .hx > *, html body.lx-govde #bpCarkOverlay .bp-cark-x > * { display: none !important; }
html body.lx-govde #lightbox .lb-data .lb-close { position: fixed; top: 16px; right: 16px; z-index: 3; color: #FFFFFF !important; }


/* ==========================================================================
   11) ESKİ BİLEŞEN: SON GEZİLENLER · VARYANT PENCERESİ (yan_menu.php, urun_kart.php)
   ========================================================================== */
/* son gezilenler penceresi */
.ex-son-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.ex-son-liste > * { padding: 12px 0; border-bottom: 2px solid var(--ex-brand-50); }
.ex-son-bos { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 0 8px; text-align: center; }
.ex-son-bos .ex-ik { width: 48px; height: 48px; color: var(--ex-gray-300); }
.ex-son-bos p { margin: 0 0 8px; color: var(--ex-body); }
@media (max-width: 575.98px) { .ex-son-liste { grid-template-columns: minmax(0, 1fr); } }

/* varyant seçim penceresi (çekirdek bpUrunKartModal) — klasör kabuk 460 */
body .bp-ukm-bg { position: fixed; inset: 0; z-index: 10060; display: none; align-items: center; justify-content: center; padding: 60px 16px; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
body .bp-ukm-bg.acik { display: flex; }
.bp-ukm { position: relative; z-index: 0; display: flex; flex-direction: column; width: 100%; max-width: 460px; max-height: calc(100vh - 80px); overflow: hidden; border-radius: 12px; background: transparent; font-family: var(--ex-font); filter: drop-shadow(0 4px 30px rgba(0, 0, 0, .08)); animation: exModalAc .3s ease-out; }
.bp-ukm::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 12px; background: #FFFFFF; -webkit-mask: linear-gradient(225deg, transparent 0 47px, #000 48.5px); mask: linear-gradient(225deg, transparent 0 47px, #000 48.5px); }
@keyframes exModalAc { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: none; } }
.bp-ukm *, .bp-ukm-bg * { box-sizing: border-box; }
.bp-ukm-head { display: flex; align-items: center; gap: 12px; padding: 32px 72px 16px 32px; border-bottom: 2px solid var(--ex-gray-100); }
.bp-ukm-head img { display: block; flex: 0 0 72px; width: 72px; height: 56px; padding: 4px; border-radius: 6px; background: var(--ex-brand-100); object-fit: contain; mix-blend-mode: multiply; }
.bp-ukm-head .t { flex: 1; min-width: 0; }
.bp-ukm-head .t b { display: -webkit-box; overflow: hidden; color: #000000; font-size: 16px; font-weight: 700; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bp-ukm-uyari { display: none; padding: 10px 32px; background: var(--ex-danger-light); color: var(--ex-danger); font-size: 14px; font-weight: 600; }
.bp-ukm-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 16px; min-height: 0; padding: 20px 32px; overflow: auto; }
.bp-ukm-grup .g { margin-bottom: 10px; color: #000000; font-size: 15px; font-weight: 600; }
.bp-ukm-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-ukm-opt { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border: 2px solid var(--ex-primary); border-radius: 60px; background: #FFFFFF; color: var(--ex-primary); font-size: 14px; font-weight: 600; line-height: 32px; cursor: pointer; user-select: none; transition: background-color var(--ex-gecis), color var(--ex-gecis); }
.bp-ukm-opt.sel { background: var(--ex-primary); color: var(--ex-on-primary); }
.bp-ukm-opt.yok { border-color: var(--ex-gray-300); color: var(--ex-gray-400); text-decoration: line-through; cursor: not-allowed; }
.bp-ukm-opt .ek { margin-left: 4px; font-size: 11px; font-weight: 600; opacity: .8; }
.bp-ukm-foot { display: flex; align-items: center; gap: 12px; padding: 16px 32px 24px; border-top: 2px solid var(--ex-gray-100); border-radius: 0 0 12px 12px; background: #FFFFFF; }
.bp-ukm-foot .fy { flex: 1; min-width: 0; }
.bp-ukm-foot .fy small { display: block; color: var(--ex-gray-400); font-size: 12px; }
.bp-ukm-foot .fy b { color: #000000; font-size: 20px; font-weight: 700; }
html body .bp-ukm-add { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 50px; padding: 0 28px; border: 0; border-radius: 60px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform var(--ex-gecis-dugme), box-shadow var(--ex-gecis-dugme); }
html body .bp-ukm-add:hover { transform: translateY(-2px); box-shadow: var(--ex-sh-btn); }
.bp-ukm-add i { display: none; }
html body .bp-ukm-add:disabled { background: var(--ex-gray-200) !important; border-color: var(--ex-gray-200) !important; color: var(--ex-gray-400) !important; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 480px) {
  body .bp-ukm-bg { align-items: flex-end; padding: 0; }
  .bp-ukm { max-width: none; max-height: 92vh; border-radius: 12px 12px 0 0; }
  .bp-ukm::before { border-radius: 12px 12px 0 0; }
  .bp-ukm-head { padding: 20px 64px 12px 20px; }
  .bp-ukm-body { padding: 16px 20px; }
  .bp-ukm-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); }
  html body .bp-ukm-add { justify-content: center; }
}

/* ==========================================================================
   13) KAYAN RAY (luxury-ray.js) + OKLAR (slick şeritleri: temafooter.php)
   ========================================================================== */
.el-bolum-oklar { display: flex; gap: 8px; }
.el-bolum-oklar:empty { display: none; }
/* kayan ray */
.ln-ray { position: relative; --ln-gor: var(--ln-n, 4); --ln-bosluk: var(--ln-ara, 24px); min-width: 0; }
.ln-ray-iz { display: flex; gap: var(--ln-bosluk); margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ln-ray-iz::-webkit-scrollbar { display: none; }
.ln-ray-oge { flex: 0 0 calc((100% - (var(--ln-gor) - 1) * var(--ln-bosluk)) / var(--ln-gor)); min-width: 0; scroll-snap-align: start; }
.ln-ray.kartli .ln-ray-iz { padding-bottom: 130px; margin-bottom: -130px; padding-top: 4px; margin-top: -4px; }   /* kart özellik paneli taşabilsin */
@media (max-width: 1199.98px) { .ln-ray { --ln-gor: var(--ln-n-t, 3); } .ln-ray.kartli .ln-ray-iz { padding-bottom: 0; margin-bottom: 0; } }
@media (max-width: 767.98px) { .ln-ray { --ln-gor: var(--ln-n-m, 2); --ln-bosluk: var(--ln-ara-m, 16px); } }
.ln-ok-dugme, .el-rok, .ex-ok-dugme { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; padding: 0; border: 0; border-radius: 50%; background: #FFFFFF; color: #000000; font-size: 18px; box-shadow: var(--ex-sh-1); cursor: pointer; transition: background-color var(--ex-gecis), color var(--ex-gecis), opacity var(--ex-gecis); }
.ln-ok-dugme svg, .el-rok svg, .ex-ok-dugme svg { display: block; width: 18px; height: 18px; }
.ln-ok-dugme:hover:not(:disabled), .el-rok:hover, .ex-ok-dugme:hover:not(:disabled) { background: var(--ex-primary); color: #FFFFFF; }
.ln-ok-dugme:disabled, .el-rok.slick-disabled, .ex-ok-dugme:disabled { opacity: .5; cursor: not-allowed; }
.slick-discount5 > .el-rok { position: absolute; top: 36%; z-index: 5; }
.slick-discount5 > .el-rok-sol { left: -6px; }
.slick-discount5 > .el-rok-sag { right: -6px; }
@media (max-width: 767.98px) { .ln-ok-dugme, .ex-ok-dugme { width: 40px; height: 40px; } }

/* ==========================================================================
   14) ORTAK BİLEŞENLER (sayfa katmanları kullanır)
   ========================================================================== */
html body.ex-govde .bp-auth-page, html body.ex-govde .pf-il { background: transparent !important; }


/* ==========================================================================
   16) ESKİ KABUK EZMELERİ — electro "klasör" (pahlı köşe) dilini Luxury'nin düz r12 diline çevirir; mobil alt araç çubuğu yok (§20.5)
   ========================================================================== */
.bp-ukm::before, html body.lx-govde .bp-cark-box::before { -webkit-mask: none !important; mask: none !important; }
.bp-ukm { filter: none; }
.bp-ukm::before { background: var(--lx-surface); }
body .bp-ukm-bg { z-index: 3000; background: var(--lx-overlay); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ex-altnav, #bpMobNav { display: none !important; }
html body.lx-govde { padding-bottom: 0 !important; }
.ex-cekmece.ex-kat-cekmece, .ex-cekmece.ex-kat-panel, .ex-cekmece.ex-teklif { display: none !important; }
.ln-ok-dugme, .el-rok, .ex-ok-dugme { box-shadow: none; border: 1px solid var(--lx-line); }
.ln-ok-dugme:hover:not(:disabled), .el-rok:hover, .ex-ok-dugme:hover:not(:disabled) { border-color: var(--lx-gold); background: var(--lx-gold); color: #FFFFFF; }

/* ==========================================================================
   17) HAREKET AZALTMA · ZORUNLU RENKLER
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lx-btn, .ex-dugme, .ex-cekmece, .ex-cekmece *, .ex-cekmece-karartma, .ex-modal, .ex-modal *, .bp-ukm, .lx-atla { transition: none !important; animation: none !important; }
  .lx-btn[aria-busy="true"]::after { animation: lxDon 2s linear infinite !important; }
}
@media (forced-colors: active) {
  .ex-modal-icerik, .ex-cekmece, .bp-ukm { border: 1px solid CanvasText; }
  .lx-sayac, .ex-sayac, .lx-rozet { border: 1px solid CanvasText; forced-color-adjust: none; }
  .lx-btn, .ex-dugme { border: 1px solid ButtonText; }
}