/* ==========================================================================
   DERICIDEN — Luxe teması
   Lüks moda evi (maison) tasarım dili: editoryal düzen, geniş boşluk,
   serif display tipografi, harf aralıklı sans etiketler, sessiz renk.
   site.css'ten SONRA yüklenir ve gerekli yerleri geçersiz kılar.
   ========================================================================== */

:root {
    /* ---- RENK — FINAL şartname §12.1 ----
       Kaynak: Dericiden_FINAL_Yazilimci_Teslim_Paketi §12.1 renk tablosu.
       Kahverengi ASLA global UI rengi yapılmaz; deri tonunu ürün
       fotoğrafları taşır (Aşama 7 §3). */
    --lx-ink: #111111;          /* Black — ana metin, CTA, başlık */
    --lx-ink-soft: #3d3a35;     /* ikincil koyu metin */
    --lx-anthracite: #292929;   /* Anthracite — footer / ikincil koyu alan */
    --lx-muted: #6b665f;        /* sessiz metin — açık zeminde ~4.5:1 kontrast */
    --lx-line: #d8d6d1;         /* Border — ince ayraç/çerçeve */
    --lx-paper: #ffffff;        /* White — koyu CTA üzeri yazı, kart zemini */
    --lx-cream: #f7f6f2;        /* Warm White — ana sayfa/editorial açık zemin */
    --lx-sand: #e9e5de;         /* Stone — nötr blok, ayırıcı alan */
    --lx-product-bg: #f4f3f0;   /* Ürün fotoğraf zemin standardı (FINAL §13).
                                   NOT: mevcut fotoğraflar beyaz stüdyo
                                   zeminli; fotoğraflar bu standarda
                                   çekilene dek beyaza yakın zeminle
                                   eşleştirilen yerler bilinçli istisnadır. */
    --lx-shot-bg: #fbfaf8;      /* MEVCUT fotoğrafların beyaz stüdyo zeminiyle
                                   eşleşen geçici zemin. Fotoğraflar F4F3F0
                                   standardına çekilince bu değeri
                                   var(--lx-product-bg) yap — tek anahtar. */
    --lx-error: #8e2b2b;        /* TEK hata tonu (yerleşik tuğla kırmızısı,
                                   beyaz zeminde ~7:1) — başka kırmızı yok */
    --lx-success: #137a4a;      /* stok/kargo/başarı — dekoratif kullanılmaz */
    --lx-gold: #b18d4f;         /* Dericiden marka aksanı (logo) — UI rengi değil */
    --lx-gold-deep: #8b6f3d;

    /* ---- TİPOGRAFİ — FINAL §12.4 ----
       Editorial başlıklar için Türkçe destekli, web lisanslı serif
       (Playfair Display / Google Fonts); UI için temiz sans. */
    /* Yüklenen webfont (Playfair) önde — her cihazda aynı editorial ses */
    --lx-serif: "Playfair Display", "Didot", "Bodoni MT", "Times New Roman", Georgia, serif;
    --lx-sans: "Helvetica Neue", "Inter", "Segoe UI", Arial, sans-serif;

    /* Başlık ölçüleri (desktop→mobil clamp; FINAL §12.4 tablosu).
       vw+px karışımı: saf vw, 1024-1200px bandında desktop alt sınırının
       altına düşüyordu — sabit ekleme orta bandı yukarı çeker. */
    --lx-fs-hero: clamp(34px, 3.9vw + 8px, 64px);      /* Hero H1: 48-64 / 34-44 */
    --lx-fs-section: clamp(28px, 3.1vw + 5px, 48px);   /* Section H2: 36-48 / 28-36 */
    --lx-fs-category: clamp(28px, 2.6vw + 10px, 44px); /* Category H1: 36-48 / 28-34 */
    --lx-fs-product: clamp(20px, 1.4vw + 8px, 26px);   /* PDP ürün adı: 22-28 / 20-24 */

    --lx-track: 0.18em;
    --lx-track-wide: 0.32em;

    /* ---- BOŞLUK ÖLÇEĞİ — FINAL §12.2 (S1..S11) ----
       Rastgele 17/23/37px yerine bu ölçek kullanılır. */
    --lx-s1: 4px;  --lx-s2: 8px;   --lx-s3: 12px; --lx-s4: 16px;
    --lx-s5: 24px; --lx-s6: 32px;  --lx-s7: 48px; --lx-s8: 64px;
    --lx-s9: 80px; --lx-s10: 96px; --lx-s11: 120px;

    /* ---- KONTROL ÖLÇÜLERİ — FINAL §12.5 ---- */
    --lx-btn-h: 52px;      /* Primary/Secondary: desktop 48-54, mobil 50-56 */
    --lx-input-h: 50px;    /* Input: 48-54 desktop, 50-56 mobil */
    --lx-touch: 44px;      /* minimum dokunma alanı */

    --lx-header: 72px; /* FINAL §4.1: desktop 72-84px bandının alt ucu
                          (daha önce elle 67px'e inceltilmişti; şartname
                          bandın altında kalmasına izin vermiyor) */
    /* Yan padding — FINAL §12.3 bandları: mobil 16-20, tablet 24-32,
       desktop 40-56. 3.9vw: 375→16, 768→30, 1024→40, 1440→56. */
    --lx-gutter: clamp(16px, 3.9vw, 56px);
    /* Bölüm boşluğu ölçek tavanını (S11=120) aşamaz */
    --lx-section: clamp(64px, 9vw, 120px);

    /* ---- KATMAN (z-index) — FINAL §12 drawer sistemi ----
       header < backdrop < drawer < modal < toast. Rastgele z-index yasak.
       (site.css lightbox 10000+ kullanır — modal katmanının üstü, sorun değil.) */
    --lx-z-sticky: 700;    /* sayfa içi yapışkanlar (filtre şeridi) — üst barın ALTINDA */
    --lx-z-mega: 800;      /* header'dan sarkan mega menü */
    --lx-z-header: 900;    /* üst bar (.lx-topbar) */
    --lx-z-flyout: 950;    /* üst bar mini panelleri (hesap/sepet önizleme) */
    --lx-z-backdrop: 990;
    --lx-z-drawer: 1000;   /* menü çekmecesi, arama, mini cart */
    --lx-z-overlay: var(--lx-z-drawer); /* eski ad — arama katmanı */
    --lx-z-toast: 1200;

    /* ---- HAREKET — FINAL §16: UI 200-350ms, editorial 400-600ms,
       görsel hover 250-400ms. Hareket satın almayı asla geciktirmez. ---- */
    --lx-ease: cubic-bezier(.22, .61, .36, 1);
    --lx-fade-slow: 0.6s;    /* editorial yüzeyler (üst sınır 600ms) */
    --lx-fade: 0.35s;        /* drawer/arama/perde (UI üst sınırı) */
    --lx-fade-quick: 0.25s;  /* küçük paneller, akordiyon */
    --lx-fade-card: 0.4s;    /* ürün kartı görsel geçişi (hover 250-400ms) */
    --lx-page-out: 0.3s;     /* sayfadan ayrılırken solma */
    --lx-page-in: 0.55s;     /* yeni sayfa belirirken */
    --lx-ease-soft: cubic-bezier(.33, .02, .3, 1);
}

/* ---------- Temel ---------- */

body {
    background: var(--lx-paper);
    color: var(--lx-ink);
    font-family: var(--lx-sans);
    font-size: 15px;
    line-height: 1.6; /* FINAL §12.4: gövde 1.45-1.6 */
    -webkit-font-smoothing: antialiased;
}

.lx img { display: block; max-width: 100%; }

.lx-container {
    width: 100%;
    max-width: 1440px; /* FINAL §12.3: max content ~1440; editorial görseller
                          gerektiğinde viewport genişliğine çıkabilir */
    margin-inline: auto;
    padding-inline: var(--lx-gutter);
}

.lx-narrow { max-width: 900px; margin-inline: auto; }

/* Etiket / eyebrow */
.lx-eyebrow {
    font-size: 12px; /* Micro 12-13 */
    font-weight: 500;
    letter-spacing: var(--lx-track-wide);
    text-transform: uppercase;
    color: var(--lx-muted);
    margin: 0 0 18px;
}
.lx-eyebrow--light { color: rgba(255,255,255,.72); }

/* Display başlıklar */
.lx-display {
    font-family: var(--lx-serif);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: .005em;
    margin: 0;
}
/* FINAL §12.4: Hero H1 48-64/34-44, Section H2 36-48/28-36.
   (Önceki 92px üst sınırı şartname bandının dışındaydı.) */
.lx-display--xl { font-size: var(--lx-fs-hero); }
.lx-display--lg { font-size: var(--lx-fs-section); }
.lx-display--md { font-size: clamp(22px, 2.4vw, 34px); }

/* Alt çizgili metin bağlantısı — lüks CTA dili */
.lx-link {
    display: inline-block;
    font-size: 13px; /* UI Label 13-15 */
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    transition: opacity .3s var(--lx-ease);
}
.lx-link:hover { opacity: .58; }

/* Katı butonlar */
.lx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--lx-btn-h);
    padding: 0 40px;
    border: 1px solid var(--lx-ink);
    background: var(--lx-ink);
    color: #fff;
    font-size: 13px; /* FINAL §12.4: UI Label 13-15 */
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    /* FINAL §16: buton hover 150-250ms */
    transition: background .25s var(--lx-ease), color .25s var(--lx-ease), border-color .25s var(--lx-ease);
}
.lx-btn:hover { background: transparent; color: var(--lx-ink); }

.lx-btn--ghost { background: transparent; color: var(--lx-ink); }
.lx-btn--ghost:hover { background: var(--lx-ink); color: #fff; }

.lx-btn--light { background: #fff; border-color: #fff; color: var(--lx-ink); }
.lx-btn--light:hover { background: transparent; color: #fff; }

.lx-btn--outline-light { background: transparent; border-color: rgba(255,255,255,.8); color: #fff; }
.lx-btn--outline-light:hover { background: #fff; color: var(--lx-ink); border-color: #fff; }

/* ==========================================================================
   HEADER
   ========================================================================== */

/* Mimari (gucci.com deseni):
     .lx-announce  → normal akışta, sayfayla 1:1 kayıp gider
     .lx-topbar    → position:sticky; üste değdiği an sabitlenir (beklemez, zıplamaz)
     .lx-nav-row   → normal akışta, üst barın ARKASINDAN kayıp gider
   Hiçbir eleman yükseklik değiştirmediği için içerik asla zıplamaz;
   JS ölçümü / fixed konumlandırma / gecikme yok. */

/* Duyuru bandı — akışta, kaydırınca sayfayla birlikte gider */
.lx-announce {
    background: var(--lx-ink);
    color: rgba(255,255,255,.82);
    font-size: 12px;         /* okunabilirlik; bant yüksekliğiyle dengeli */
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    text-align: center;
    padding: 7px 16px;       /* FINAL §4.1: bant 28-34px (11px x 1.6 + 14px = ~32px) */
    line-height: 1.6;
    position: relative;
    z-index: 1;
}
.lx-announce a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); }

/* ÜST BAR — sabitlenen tek parça */
.lx-topbar {
    position: sticky;
    top: 0;
    z-index: var(--lx-z-header);
    background: var(--lx-paper);
    border-bottom: 1px solid var(--lx-line);
    /* header durum değişimi UI hareketi: 200-350ms bandı */
    transition: background-color var(--lx-fade) var(--lx-ease),
                color var(--lx-fade) var(--lx-ease),
                border-color var(--lx-fade) var(--lx-ease),
                box-shadow var(--lx-fade) var(--lx-ease);
}
/* Üste yapıştığı anda yumuşakça belirir (Gucci gibi) — gölge + fade-in.
   IntersectionObserver ile, scroll dinlemeden. */
.lx-topbar.is-stuck {
    box-shadow: 0 1px 20px rgba(17,17,17,.07);
    border-bottom-color: transparent;
    animation: lxFadeIn var(--lx-fade-slow) var(--lx-ease) both;
}

/* Sitedeki tüm belirme geçişlerinin tek kaynağı — kayma yok, yalnızca fade */
@keyframes lxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- Sayfa geçişi ----------
   Yeni sayfa fade ile belirir; bir bağlantıya tıklandığında mevcut sayfa
   solar (JS `is-leaving` ekler), böylece sayfalar arası geçiş de fade olur.
   JS çalışmazsa: giriş animasyonu saf CSS olduğu için yine çalışır, çıkışta
   ise doğrudan gidilir — hiçbir şey görünmez kalmaz.                        */
body.lx { animation: lxFadeIn var(--lx-page-in) var(--lx-ease-soft) both; }
body.lx.is-leaving {
    opacity: 0;
    transition: opacity var(--lx-page-out) var(--lx-ease-soft);
}

/* Yapışma algılayıcısı — görünmez işaretçi */
.lx-sticky-sentinel { height: 1px; margin-bottom: -1px; }

/* ---------- Anasayfa: bar hero'nun ÜZERİNDE şeffaf durur ----------
   Hero, duyuru bandının hemen altından başlar; üst bar görselin üzerine biner.
   Kaydırınca `is-stuck` gelir → bar görselden kopup beyaz olarak yukarı yapışır
   (arka plan/renk geçişi + lxFadeIn). Gucci'deki davranışın aynısı. */
.lx-home main { margin-top: calc(-1 * (var(--lx-header) + 1px)); }

/* ---------- Bildirim perdesi ----------
   TempData mesajları üstten kayarak inen sabit bir bantta gösterilir;
   akışa karışmaz, süre sonunda kayarak kalkar (luxe.js — data-sure ms,
   Admin > Ayarlar'daki "Site.AlertSeconds" ile yönetilir). */
.lx-toast {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--lx-z-toast); /* FINAL katman sırası: toast en üstte */
    background: var(--lx-ink);
    color: rgba(255, 255, 255, .92);
    text-align: center;
    transform: translateY(-102%);
    transition: transform .6s var(--lx-ease-soft);
    box-shadow: 0 12px 34px rgba(17,17,17, .22);
    cursor: pointer; /* tıklayan erken kapatabilir */
}
.lx-toast.is-open { transform: translateY(0); }
.lx-toast-msg {
    padding: 17px 24px 16px;
    font: 400 12.5px/1.55 var(--lx-sans);
    letter-spacing: .08em;
    text-transform: none;
}
/* Hata mesajı bordo şeritte — başarıdan ayrışır */
.lx-toast-msg--err { background: #571e1e; }

.lx-home .lx-topbar:not(.is-stuck) {
    /* Kapak görselleri açık/resimsel olunca logo içlerinde kayboluyordu.
       Bar şeffaf kalır; arkasına yukarıdan aşağı eriyen KOYU, yarı saydam bir
       tül + blur gelir (altındaki görsel seçilmeye devam eder), yazı ve logo
       beyaza döner → her görselde okunur. */
    /* Tül %30 saydamlaştırıldı (görsel daha çok seçilir),
       renk ise %30 koyulaştırıldı (10,8,6 → 7,6,4) — okunurluk dengelenir.
       Köşelerdeki radyaller: etiketlerin (sol MENÜ, sağ ARA…SEPET) arkasına
       lokal koyuluk — bar geneli açık kalır, yalnızca yazı bölgeleri desteklenir */
    background:
        radial-gradient(ellipse 34% 130% at 0% 50%, rgba(7, 6, 4, .34), rgba(7, 6, 4, 0) 70%),
        radial-gradient(ellipse 34% 130% at 100% 50%, rgba(7, 6, 4, .34), rgba(7, 6, 4, 0) 70%),
        linear-gradient(to bottom,
        rgba(7, 6, 4, .31),
        rgba(7, 6, 4, .15) 60%,
        rgba(7, 6, 4, 0));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom-color: transparent;
    color: #fff;
}
.lx-home .lx-topbar:not(.is-stuck) .lx-menu-btn,
.lx-home .lx-topbar:not(.is-stuck) .lx-actions a,
.lx-home .lx-topbar:not(.is-stuck) .lx-actions button {
    color: #fff;
    /* Tül %30 saydamlaşınca beyaz etiketler açık görsellerde kayboluyordu;
       görseli koyulaştırmak yerine yazıya gölge verildi */
    text-shadow: 0 1px 3px rgba(10, 8, 6, .55), 0 2px 14px rgba(10, 8, 6, .45);
}
/* Hamburger çizgileri pseudo-element background'u — text-shadow işlemez */
.lx-home .lx-topbar:not(.is-stuck) .lx-menu-bars {
    filter: drop-shadow(0 1px 2px rgba(10, 8, 6, .55));
}
.lx-home .lx-topbar:not(.is-stuck) .lx-brand img {
    filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(10, 8, 6, .5)) drop-shadow(0 2px 12px rgba(10, 8, 6, .4));
}

/* ---------- Ürün sayfası: galeri de üst barın altından başlar ----------
   Anasayfadaki mantığın aynısı; fakat galeri zemini AÇIK olduğu için yazı ve
   logo beyaza çevrilmez — yalnızca barın arka planı şeffaflaşır. Kaydırınca
   `is-stuck` gelir → bar beyazlar, gölge + lxFadeIn ile donar. */
.lx-pdp-page main { margin-top: calc(-1 * (var(--lx-header) + 1px)); }

.lx-pdp-page .lx-topbar:not(.is-stuck) {
    background: transparent;
    border-bottom-color: transparent;
}

/* Sabitlenen barın altına düşen çapa (#hash) hedefleri için.
   Tek sahip: bu kural. Sayfa blokları kendi scroll-margin'ini eklememeli. */
html { scroll-padding-top: calc(var(--lx-header) + 12px); }

.lx-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    min-height: var(--lx-header);
}

.lx-brand {
    justify-self: center;
    display: block;
    line-height: 0;
}
.lx-brand img {
    height: 26px;
    width: auto;
    transition: filter .4s var(--lx-ease);
}

.lx-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 26px;
}
.lx-actions a,
.lx-actions button {
    background: none;
    border: 0;
    /* dokunma alanı: görünüm değişmeden dikey isabet kutusunu ~44px'e çıkar */
    padding: 14px 2px;
    margin-block: -14px;
    font: inherit;
    color: var(--lx-ink);
    font-size: 13px; /* UI Label 13-15 */
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .3s var(--lx-ease);
}
.lx-actions a:hover,
.lx-actions button:hover { opacity: .6; }

/* Sayaç: JS yalnızca sayıyı yazar, parantezler burada */
.lx-cart-count {
    display: inline-block;
    margin-left: 4px;
}
.lx-cart-count::before { content: "("; }
.lx-cart-count::after { content: ")"; }

.lx-icon-btn {
    display: none;
    background: none;
    border: 0;
    padding: 0;
    color: var(--lx-ink);
    cursor: pointer;
}
.lx-icon-btn svg { display: block; width: 20px; height: 20px; }

/* Menü düğmesi — tek gezinme girişi, her ekran boyutunda görünür */
.lx-menu-btn {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    /* dokunma alanı: görünüm değişmeden isabet kutusu ~44px */
    padding: 14px 2px;
    margin-block: -14px;
    font-family: var(--lx-sans);
    font-size: 13px; /* UI Label 13-15 */
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-ink);
    cursor: pointer;
    transition: opacity .3s var(--lx-ease);
}
.lx-menu-btn:hover { opacity: .6; }

/* İki çizgi — açılınca çarpıya döner */
.lx-menu-bars {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    height: 9px;
}
.lx-menu-bars::before,
.lx-menu-bars::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: currentColor;
    transition: transform .34s var(--lx-ease), top .34s var(--lx-ease);
}
.lx-menu-bars::before { top: 0; }
.lx-menu-bars::after { top: 8px; }
.lx-menu-btn[aria-expanded="true"] .lx-menu-bars::before { top: 4px; transform: rotate(45deg); }
.lx-menu-btn[aria-expanded="true"] .lx-menu-bars::after { top: 4px; transform: rotate(-45deg); }

/* ---------- Ana gezinme (mega) ---------- */

/* Kategori satırı — akışta; kaydırınca üst barın arkasından kayıp gider.
   Yükseklik değişmediği için içerik zıplamaz, mega menü de kırpılmaz. */
.lx-nav-row {
    background: var(--lx-paper);
    border-bottom: 1px solid var(--lx-line);
}

.lx-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 46px);
    list-style: none;
    margin: 0;
    padding: 0;
}
.lx-nav > li { position: relative; }
.lx-nav > li > a {
    display: block;
    padding: 16px 0; /* spacing ölçeği S4 */
    color: var(--lx-ink);
    font-size: 13px; /* UI Label 13-15 */
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
}
.lx-nav > li > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 12px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .38s var(--lx-ease);
}
.lx-nav > li:hover > a::after { transform: scaleX(1); }

.lx-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 10px);
    min-width: 260px;
    background: var(--lx-paper);
    border: 1px solid var(--lx-line);
    padding: 26px 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .32s var(--lx-ease), transform .32s var(--lx-ease), visibility .32s;
    z-index: 20;
}
.lx-nav > li:hover .lx-mega,
.lx-nav > li:focus-within .lx-mega {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.lx-mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.lx-mega a {
    color: var(--lx-ink-soft);
    font-size: 12.5px;
    text-decoration: none;
    transition: color .28s var(--lx-ease);
}
.lx-mega a:hover { color: var(--lx-gold-deep); }

/* ---------- Arama katmanı ---------- */

/* Tam ekran arama sayfası: üstte logo + kapat, geniş alan, popüler aramalar,
   altta iki kolon (koleksiyon/öneri listesi + en çok beğenilenler ızgarası) */
.lx-search {
    position: fixed;
    inset: 0;
    z-index: var(--lx-z-overlay);
    background: var(--lx-paper);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--lx-fade) var(--lx-ease), visibility var(--lx-fade);
}
.lx-search.is-open { opacity: 1; visibility: visible; }

.lx-search-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 26px clamp(16px, 4vw, 60px);
}
.lx-search-brand {
    grid-column: 2;
    justify-self: center;
    display: block;
    line-height: 0;
}
.lx-search-brand img { height: 24px; width: auto; }
.lx-search-close {
    grid-column: 3;
    justify-self: end;
    background: none; border: 0; cursor: pointer;
    /* dokunma alanı ~44px — görünüm değişmez */
    padding: 14px 8px; margin: -14px -8px;
    font-family: var(--lx-sans);
    font-size: 13px; letter-spacing: var(--lx-track); text-transform: uppercase;
    color: var(--lx-ink);
    transition: opacity .3s var(--lx-ease);
}
.lx-search-close:hover { opacity: .6; }

.lx-search-body {
    max-width: 1320px;
    margin: 0 auto;
    padding: clamp(14px, 3vw, 40px) clamp(16px, 4vw, 60px) clamp(60px, 8vw, 110px);
}

.lx-search-label {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-search-row {
    display: flex;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid var(--lx-ink);
    padding-bottom: 12px;
}
/* Özgüllük: global `.lx input[type=…]` (0,2,1) bunu yeniyordu — [type] ile (0,3,1) */
.lx .lx-search input[type],
.lx-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: none;
    padding: 4px 0;
    font-family: var(--lx-serif);
    font-size: clamp(20px, 2.6vw, 30px);
    color: var(--lx-ink);
    outline: none;
}
/* outline:none yukarıda klavye odağını tümüyle siliyordu (SC 2.4.7).
   Odak göstergesi: satırın alt çizgisi kalınlaşıp koyulaşır. */
.lx .lx-search input[type]:focus-visible,
.lx-search input:focus-visible { outline: 2px solid var(--lx-gold-deep); outline-offset: 6px; }
.lx-search input::placeholder { color: var(--lx-muted); }

/* ---- Canlı arama önerileri (FINAL §4.3) ---- */
.lx-search-canli { display: grid; gap: 22px; margin-top: 26px; }
.lx-canli-grup { display: grid; gap: 8px; }
.lx-canli-baslik {
    font-size: 12px;
    letter-spacing: var(--lx-track-wide);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-canli-kategori {
    font-size: 14px;
    color: var(--lx-ink);
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 1px solid var(--lx-line);
}
.lx-canli-kategori:hover { color: var(--lx-gold-deep); }
.lx-canli-urun {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--lx-line);
    text-decoration: none;
    color: var(--lx-ink);
    transition: opacity .2s var(--lx-ease);
}
.lx-canli-urun:hover { opacity: .7; }
.lx-canli-urun img {
    width: 52px; height: 66px;
    object-fit: cover;
    background: var(--lx-shot-bg);
}
.lx-canli-urun-ad { font-size: 14px; }
.lx-canli-urun-fiyat { font-size: 13px; color: var(--lx-ink-soft); }
.lx-canli-tumu {
    justify-self: start;
    font-size: 13px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-ink);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
}
.lx-canli-tumu:hover { opacity: .6; }
.lx-canli-bos p { margin: 0 0 14px; color: var(--lx-muted); }
.lx-canli-yonlendir { display: flex; flex-wrap: wrap; gap: 18px; }
.lx-canli-yonlendir a {
    font-size: 13px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--lx-line);
    padding-bottom: 3px;
}
.lx-canli-yonlendir a:hover { border-color: var(--lx-ink); }
.lx-search button[type=submit] {
    flex: none;
    background: none; border: 0; cursor: pointer;
    /* dokunma alanı ~44px */
    padding: 14px 8px; margin: -14px -8px;
    font-family: var(--lx-sans);
    font-size: 13px; letter-spacing: var(--lx-track); text-transform: uppercase;
    color: var(--lx-ink);
    transition: opacity .3s var(--lx-ease);
}
.lx-search button[type=submit]:hover { opacity: .6; }

/* Popüler aramalar */
.lx-search-trend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px clamp(16px, 2vw, 28px);
    margin-top: 20px;
}
.lx-search-trend span {
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-search-trend a {
    font-size: 12px;
    color: var(--lx-ink);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--lx-line);
    transition: border-color .26s var(--lx-ease);
}
.lx-search-trend a:hover { border-bottom-color: var(--lx-ink); }

/* İki kolon */
.lx-search-panel { margin-top: clamp(34px, 5vw, 64px); }
.lx-search-cols {
    display: grid;
    grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
    gap: clamp(26px, 4vw, 70px);
    align-items: start;
}
.lx-search-side h3,
.lx-search-main h3 {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track-wide);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-search-side h3 + ul { margin-bottom: 30px; }
.lx-search-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lx-search-side a {
    font-size: 12.5px;
    color: var(--lx-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .26s var(--lx-ease), color .26s var(--lx-ease);
}
.lx-search-side a:hover { border-bottom-color: var(--lx-ink); }

.lx-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: clamp(14px, 2vw, 26px);
}
.lx-search-card { display: block; text-decoration: none; color: var(--lx-ink); }
.lx-search-card-img {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--lx-cream);
    overflow: hidden;
}
.lx-search-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lx-search-card-name {
    display: block;
    margin-top: 14px;
    font-size: 12.5px;
    line-height: 1.45;
}
.lx-search-card-price {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--lx-muted);
}

@media (max-width: 760px) {
    .lx-search-cols { grid-template-columns: 1fr; }
}

/* ---------- Mobil çekmece ---------- */

/* Gezinme paneli — SAĞDAN açılır */
.lx-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(440px, 88vw);
    z-index: var(--lx-z-drawer);
    background: var(--lx-paper);
    padding: 24px clamp(22px, 3vw, 40px) 40px;
    /* açılış da fade — kayma yok */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--lx-fade) var(--lx-ease), visibility var(--lx-fade);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.lx-drawer.is-open { opacity: 1; visibility: visible; }

.lx-drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 24px;
}
.lx-drawer-title {
    font-size: 12px; /* Micro 12-13 */
    font-weight: 500;
    letter-spacing: var(--lx-track-wide);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-drawer-close {
    background: none; border: 0; cursor: pointer;
    /* dokunma alanı ~44px — görünüm değişmez */
    padding: 14px 8px; margin: -14px -8px;
    font-family: var(--lx-sans);
    font-size: 13px; letter-spacing: var(--lx-track); text-transform: uppercase;
    color: var(--lx-ink);
    transition: opacity .3s var(--lx-ease);
}
.lx-drawer-close:hover { opacity: .6; }

.lx-drawer-foot {
    display: grid;
    gap: 14px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--lx-line);
}
.lx-drawer-foot a {
    font-size: 13px; /* UI Label 13-15 */
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-ink-soft);
    text-decoration: none;
    transition: color .28s var(--lx-ease);
}
.lx-drawer-foot a:hover { color: var(--lx-ink); }
.lx-drawer ul { list-style: none; margin: 0; padding: 0; }
.lx-drawer > ul > li { border-bottom: 1px solid var(--lx-line); }
.lx-drawer > ul > li > a {
    display: block;
    padding: 15px 0;
    font-family: var(--lx-serif);
    font-size: 20px;
    color: var(--lx-ink);
    text-decoration: none;
}
/* ---- Çok seviyeli kayan paneller (FINAL §4.2) ----
   Paneller yan yana durur; etkin panel görünür, alt seviyeye geçişte
   mevcut panel sola kayar, yenisi sağdan gelir (250-350ms bandı). */
.lx-drawer-viewport { position: relative; overflow: hidden; }
/* NOT: Bu paneller YALNIZ menü çekmecesine aittir. Seçici .lx-drawer-viewport
   ile sınırlandırıldı; aksi halde global .lx-panel (sipariş onayı/checkout
   kartları — bkz. §receipt) gizli başlangıç durumunu miras alıp kayboluyordu. */
.lx-drawer-viewport .lx-panel {
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transform: translateX(48px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--lx-fade) var(--lx-ease),
                opacity var(--lx-fade) var(--lx-ease),
                visibility var(--lx-fade);
}
/* Kök dışındaki paneller yer kaplamasın diye mutlak konumlanır */
.lx-drawer-viewport .lx-panel:not([data-panel=kok]) { position: absolute; }
.lx-drawer-viewport .lx-panel.is-current { transform: translateX(0); opacity: 1; visibility: visible; position: relative; }
/* Geriye dönüşte üstteki panel sağa kayarak çıkar */
.lx-drawer-viewport .lx-panel.is-left { transform: translateX(-48px); }
/* Alt panel açıkken kök panel yer kaplamasın; yoksa alt panel onun altına itilip üstte büyük boşluk kalıyordu */
.lx-drawer-viewport .lx-panel[data-panel=kok].is-left { position: absolute; }

.lx-panel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lx-panel-list a,
.lx-panel-etiket,
.lx-panel-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 0;
    background: none; border: 0; cursor: pointer;
    font-family: var(--lx-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-ink);
    text-decoration: none;
    text-align: left;
    border-bottom: 1px solid var(--lx-line);
    transition: opacity .2s var(--lx-ease);
}
.lx-panel-list a:hover, .lx-panel-next:hover { opacity: .6; }
.lx-panel-list .lx-sub-all { color: var(--lx-ink); }

.lx-panel-geri {
    align-self: flex-start;
    background: none; border: 0; cursor: pointer;
    padding: 14px 8px; margin: -14px -8px; /* 44px isabet */
    font-family: var(--lx-sans);
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
    transition: color .2s var(--lx-ease);
}
.lx-panel-geri:hover { color: var(--lx-ink); }
.lx-panel-baslik {
    font-family: var(--lx-serif);
    font-size: 22px;
    color: var(--lx-ink);
}

.lx-panel-yardim {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--lx-line);
}
.lx-panel-yardim-baslik {
    font-size: 12px;
    letter-spacing: var(--lx-track-wide);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-panel-yardim a { font-size: 13px; color: var(--lx-ink-soft); text-decoration: none; }
.lx-panel-yardim a:hover { color: var(--lx-ink); }

/* Tek editorial görsel — yalnız geniş ekranda (mobilde liste nefes alsın) */
.lx-panel-editorial { position: relative; display: none; margin-top: auto; text-decoration: none; }
@media (min-width: 761px) {
    .lx-panel-editorial { display: block; }
}
.lx-panel-editorial img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.lx-panel-editorial span {
    position: absolute;
    left: 14px; bottom: 12px;
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 8px rgba(17,17,17,.55);
}

.lx-drawer-cikis {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--lx-sans);
    font-size: 13px; font-weight: 500;
    letter-spacing: var(--lx-track); text-transform: uppercase;
    color: var(--lx-ink-soft);
}
.lx-drawer-cikis:hover { color: var(--lx-ink); }
.lx-backdrop {
    position: fixed; inset: 0; z-index: var(--lx-z-backdrop);
    background: rgba(17,17,17,.42);
    opacity: 0; visibility: hidden;
    transition: opacity var(--lx-fade) var(--lx-ease), visibility var(--lx-fade);
}
.lx-backdrop.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   HERO
   ========================================================================== */

.lx-hero {
    position: relative;
    /* header artık örtmüyor — kalan görüntü alanını doldurur */
    min-height: min(78vh, 820px);
    display: grid;
    align-items: end;
    overflow: hidden;
    background: var(--lx-sand);
}
.lx-hero-media,
.lx-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lx-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12,9,6,.62) 0%, rgba(12,9,6,.16) 46%, rgba(12,9,6,.20) 100%);
}
.lx-hero-caption {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 0 var(--lx-gutter) clamp(56px, 8vw, 108px);
    max-width: 860px;
}
.lx-hero-caption .lx-display { color: #fff; }
.lx-hero-caption p {
    margin: 20px 0 30px;
    max-width: 46ch;
    font-size: 15px;
    color: rgba(255,255,255,.86);
}
.lx-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Slider (mevcut hero-slider yerine luxe sürüm) */
.lx-hero--slider .lx-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.6s var(--lx-ease);
}
.lx-hero--slider .lx-slide.is-active { opacity: 1; }
.lx-hero--slider .lx-slide .lx-hero-caption {
    position: absolute;
    inset: auto 0 0 0;
}
.lx-hero-dots {
    position: absolute;
    z-index: 3;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.lx-hero-dots button {
    /* Görünen çizgi 26x2; isabet kutusu 26x30 (content-box dolgusu).
       2px'lik çizgiye dokunmak imkânsızdı — FINAL §17: touch ~44px.
       Yatayda noktalar bitişik durduğu için 44 genişletilmedi; dikey
       dolgu esas kazanım. */
    width: 26px; height: 2px;
    border: 0;
    padding: 14px 0;
    box-sizing: content-box;
    background-clip: content-box;
    background-color: rgba(255,255,255,.42);
    cursor: pointer;
    transition: background-color .3s var(--lx-ease);
}
.lx-hero-dots button.is-active { background-color: #fff; }

/* ==========================================================================
   BÖLÜMLER
   ========================================================================== */

.lx-section { padding: var(--lx-section) 0; }
.lx-section--tight { padding: clamp(44px, 5vw, 78px) 0; }
.lx-section--cream { background: var(--lx-cream); }

.lx-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: clamp(30px, 4vw, 56px);
}
.lx-section-head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.lx-section-head .lx-eyebrow { margin-bottom: 12px; }

/* ---------- Ürün rayı (yatay kaydırma) ---------- */

.lx-rail-wrap { position: relative; }
.lx-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: clamp(14px, 1.6vw, 28px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
}
.lx-rail::-webkit-scrollbar { display: none; }
.lx-rail > * { scroll-snap-align: start; }
@media (min-width: 1100px) {
    .lx-rail { grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; }
}

.lx-rail-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px; height: 44px;
    border: 1px solid var(--lx-line);
    background: rgba(255,255,255,.92);
    color: var(--lx-ink);
    cursor: pointer;
    font-size: 16px;
    transition: background .3s var(--lx-ease), border-color .3s var(--lx-ease);
}
.lx-rail-nav:hover { background: var(--lx-ink); color: #fff; border-color: var(--lx-ink); }
.lx-rail-nav--prev { left: -14px; }
.lx-rail-nav--next { right: -14px; }
@media (min-width: 1100px) { .lx-rail-nav { display: none; } }

/* ---------- Ürün kartı — sessiz lüks ---------- */

.lx .product-card,
.lx-grid .product-card {
    border: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}
.lx .product-card .card-image {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--lx-shot-bg);   /* fotograf zeminiyle ayni -> dikis gorunmez */
    overflow: hidden;
    border: 0;
    border-radius: 0;
}
.lx .product-card .card-image img {
    width: 100%;
    height: 100%;
    /* cover: karo 3:4, fotoğraflar 2:3 → alttan/üstten ~%6 kırpılır ve karo
       kenardan kenara dolar. Ürün fotoğraflarında üst/alt zaten boşluk
       olduğu için ürün kesilmez, ızgara da delik deliksiz görünür.
       (contain denendi: her karoda iki yanda ölü alan bırakıyor, ızgaranın
       ritmini dağıtıyor.) */
    object-fit: cover;
    /* zum yok; tek geçiş yumuşak çapraz fade (kart galerisi bunu kullanır) */
    transition: opacity var(--lx-fade-card) var(--lx-ease-soft);
}

/* ---------- Kart içi görsel gezinme (hover'da 2. görsele geçiş + oklar) ---------- */

.lx .product-card .card-image.has-gallery { position: relative; }

/* Görseller yan yana şerit gibi dizilir: etkin olan çerçevede (0), öncekiler solda,
   sonrakiler sağda bekler. Geçişte yeni görsel SAĞDAN SOLA kayar; ease-out eğrisi
   hızlı başlayıp yavaşça çerçeveye oturtur. */
.lx .product-card .card-shot {
    transition: transform var(--lx-card-slide, 1.1s) cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}
/* Kart terk edilince ilk görsele animasyonsuz dönülür (JS .is-reset ekler) */
.lx .product-card .card-image.is-reset .card-shot { transition: none; }
.lx .product-card .card-image.has-gallery .card-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* yukarıdaki karo kuralıyla AYNI kalmalı: bu seçici daha özgül olduğu
       için `.card-image img` üzerindeki değeri eziyor. İkisi ayrışırsa
       kartlar sessizce farklı davranır (bir denemede burası contain kalıp
       tüm ızgarayı contain'e çevirmişti). */
    object-fit: cover;
    transform: translateX(100%);   /* sıradaki: sağda bekler */
}
.lx .product-card .card-image.has-gallery .card-shot.is-before { transform: translateX(-100%); }
.lx .product-card .card-image.has-gallery .card-shot.is-active { transform: translateX(0); }

/* Oklar — yalnızca imleç kartın üzerindeyken (dokunmatikte her zaman) */
.lx .product-card .card-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: var(--lx-touch);  /* FINAL §17: min ~44px dokunma alanı */
    height: var(--lx-touch);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255,255,255,.86);
    color: var(--lx-ink);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--lx-fade-quick) var(--lx-ease), background var(--lx-fade-quick) var(--lx-ease);
}
.lx .product-card .card-nav svg { width: 16px; height: 16px; display: block; }
.lx .product-card .card-nav:hover { background: #fff; }
.lx .product-card .card-nav--prev { left: 10px; }
.lx .product-card .card-nav--next { right: 10px; }
.lx .product-card:hover .card-nav,
.lx .product-card:focus-within .card-nav { opacity: 1; }
.lx .product-card .card-nav[disabled] { opacity: 0 !important; pointer-events: none; }

/* Görsel sayacı — ince çizgiler */
.lx .product-card .card-dots {
    position: absolute;
    z-index: 3;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity var(--lx-fade-quick) var(--lx-ease);
}
.lx .product-card:hover .card-dots,
.lx .product-card:focus-within .card-dots { opacity: 1; }
.lx .product-card .card-dots span {
    width: 16px;
    height: 1px;
    background: rgba(17,17,17,.28);
    transition: background var(--lx-fade-quick) var(--lx-ease);
}
.lx .product-card .card-dots span.is-active { background: var(--lx-ink); }

/* Dokunmatik: hover yok → oklar ve noktalar görünür kalır */
@media (hover: none) {
    .lx .product-card .card-nav,
    .lx .product-card .card-dots { opacity: 1; }
    .lx .product-card .card-nav { background: rgba(255,255,255,.9); }
}
.lx .product-card .placeholder {
    position: absolute; inset: 0;
    background: var(--lx-sand);
}
.lx .product-card .badge {
    position: absolute;
    top: 14px; left: 14px;
    background: none;
    color: var(--lx-ink);
    font-size: 12px; /* Micro 12-13 (9px okunmuyordu) */
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    padding: 0;
    border-radius: 0;
}
.lx .product-card .badge-sale { left: auto; right: 14px; color: var(--lx-gold-deep); }
/* FB koleksiyon ibaresi: küçük ve sade (Aşama 4 §14) */
.lx .product-card .badge-fb { color: #1f2a44; }

.lx .product-card .card-body {
    padding: 18px 2px 0;
    text-align: left;
}
.lx .product-card .brand {
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
    margin-bottom: 7px;
}
/* Kart renk noktaları (PLP-05): görsel 16-20px bandının içinde, bilgi amaçlı */
.lx .product-card .card-renkler {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
}
.lx .product-card .card-renk {
    width: 14px; height: 14px;
    border: 1px solid rgba(17,17,17,.18);
    border-radius: 50%;
}
.lx .product-card .card-renk-fazla {
    font-size: 12px;
    color: var(--lx-muted);
    letter-spacing: .02em;
}

.lx .product-card .title {
    margin: 0 0 9px;
    font-family: var(--lx-sans);
    font-size: 14px; /* Card Title 14-16 desktop / 13-15 mobil */
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: .015em;
}
.lx .product-card .title a { color: var(--lx-ink); text-decoration: none; }
.lx .product-card .price { display: flex; align-items: baseline; gap: 10px; }
.lx .product-card .price-now { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--lx-ink); }
.lx .product-card .price-old { font-size: 12px; color: var(--lx-muted); }

/* Aksiyonlar: masaüstünde hover ile görünür, mobilde sade */
.lx .product-card .actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.lx .product-card .actions .btn-card {
    flex: 1;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--lx-line);
    background: #fff;
    color: var(--lx-ink);
    border-radius: 0;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .3s var(--lx-ease), color .3s var(--lx-ease), border-color .3s var(--lx-ease);
}
.lx .product-card .actions .btn-card:hover { background: var(--lx-ink); color: #fff; border-color: var(--lx-ink); }
.lx .product-card .actions .btn-card.primary { background: var(--lx-ink); color: #fff; border-color: var(--lx-ink); }
.lx .product-card .actions .btn-card.primary:hover { background: transparent; color: var(--lx-ink); }
.lx .product-card .actions-form { flex: 1; display: flex; }
.lx .product-card .actions-form .btn-card { width: 100%; }

@media (min-width: 900px) {
    /* saf fade — kayma yok */
    .lx .product-card .actions {
        opacity: 0;
        transition: opacity var(--lx-fade-quick) var(--lx-ease);
    }
    .lx .product-card:hover .actions,
    .lx .product-card:focus-within .actions { opacity: 1; }
    /* "İncele" masaüstünde gizli — kart zaten tıklanabilir */
    .lx .product-card .actions > a.btn-card { display: none; }
}

/* ---------- Ürün ızgarası ---------- */

/* FINAL §6/§12.3: KESİN sütun hedefi — mobil 2 / tablet 3 / desktop 4.
   (auto-fill geniş ekranda 5-6 sütuna çıkıyordu; şartname fotoğrafı büyük
   tutmayı sütun eklemeye tercih ediyor.) Boşluklar FINAL §10 bandları:
   dikey 28-48, yatay 12-28. */
.lx-grid,
.lx .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(28px, 3.4vw, 48px) clamp(12px, 1.8vw, 28px);
}
@media (min-width: 768px) {
    .lx-grid, .lx .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .lx-grid, .lx .product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   KOLEKSİYON KARTLARI (editoryal kareler)
   ========================================================================== */

.lx-collections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: 2px;
}
.lx-collection {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: var(--lx-sand);
}
.lx-collection img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--lx-ease);
}
.lx-collection::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12,9,6,.66), rgba(12,9,6,.06) 62%);
    transition: background .5s var(--lx-ease);
}
/* Koleksiyon karosu: zum yerine örtünün fade ile açılması */
.lx-collection:hover img { transform: none; }
.lx-collection:hover::after { background: linear-gradient(to top, rgba(12,9,6,.74), rgba(12,9,6,.16) 70%); }
.lx-collection-body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: clamp(20px, 2.4vw, 34px);
}
.lx-collection-body .lx-eyebrow { color: rgba(255,255,255,.74); margin-bottom: 8px; }
.lx-collection-body h3 {
    font-family: var(--lx-serif);
    font-weight: 400;
    font-size: clamp(21px, 2vw, 30px);
    margin: 0 0 14px;
    line-height: 1.15;
}
.lx-collection-body .lx-link { border-color: rgba(255,255,255,.7); }

/* Geniş vitrin (2 sütun) */
.lx-collections--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.lx-collections--wide .lx-collection { aspect-ratio: 3 / 2; }

/* ==========================================================================
   EDİTORYAL BLOKLAR
   ========================================================================== */

.lx-editorial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: min(84vh, 780px);
}
.lx-editorial-media { position: relative; overflow: hidden; background: var(--lx-sand); min-height: 340px; }
.lx-editorial-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lx-editorial-copy {
    display: grid;
    align-content: center;
    padding: clamp(40px, 6vw, 100px) clamp(24px, 5vw, 88px);
    background: var(--lx-cream);
}
.lx-editorial-copy p {
    margin: 22px 0 30px;
    max-width: 44ch;
    color: var(--lx-ink-soft);
}
.lx-editorial--reverse .lx-editorial-media { order: 2; }
.lx-editorial--dark .lx-editorial-copy { background: var(--lx-ink); color: #fff; }
.lx-editorial--dark .lx-editorial-copy p { color: rgba(255,255,255,.78); }
.lx-editorial--dark .lx-eyebrow { color: rgba(255,255,255,.6); }

@media (max-width: 860px) {
    .lx-editorial { grid-template-columns: 1fr; }
    .lx-editorial--reverse .lx-editorial-media { order: 0; }
}

/* Tam genişlik hikâye bandı */
.lx-story {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    min-height: min(74vh, 640px);
    padding: var(--lx-section) var(--lx-gutter);
    color: #fff;
    background: var(--lx-ink) center / cover no-repeat;
}
.lx-story::before {
    content: "";
    position: absolute; inset: 0;
    background: rgba(12,9,6,.52);
}
.lx-story-inner { position: relative; z-index: 2; max-width: 720px; }
.lx-story-inner p {
    margin: 22px auto 32px;
    max-width: 56ch;
    color: rgba(255,255,255,.86);
}

/* Zanaat / değer üçlüsü */
.lx-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(28px, 4vw, 64px);
    text-align: center;
}
.lx-value h3 {
    font-family: var(--lx-serif);
    font-weight: 400;
    font-size: 19px;
    margin: 0 0 12px;
}
.lx-value p { margin: 0; color: var(--lx-ink-soft); font-size: 13.5px; }
.lx-value-mark {
    display: block;
    margin: 0 auto 18px;
    width: 30px; height: 1px;
    background: var(--lx-gold);
}

/* ==========================================================================
   BÜLTEN
   ========================================================================== */

.lx-newsletter {
    background: var(--lx-cream);
    padding: var(--lx-section) 0;
    text-align: center;
}
.lx-newsletter-form {
    display: flex;
    gap: 0;
    max-width: 520px;
    margin: 30px auto 14px;
    border-bottom: 1px solid var(--lx-ink);
}
.lx-newsletter-form input {
    flex: 1;
    border: 0;
    background: none;
    padding: 14px 4px;
    font-size: 14px;
    color: var(--lx-ink);
    outline: none;
}
.lx-newsletter-form button {
    border: 0;
    background: none;
    padding: 0 6px;
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    cursor: pointer;
}
.lx-fine { font-size: 12px; color: var(--lx-muted); max-width: 46ch; margin: 0 auto; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* Koyu kapanış (FINAL §12.1: Anthracite footer; Aşama 7 §30).
   Newsletter ayrı açık bant olarak footer'dan önce durur. */
.lx-footer {
    background: var(--lx-anthracite);
    color: rgba(255,255,255,.82);
    padding: clamp(52px, 6vw, 88px) 0 0;
}
.lx-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: clamp(30px, 4vw, 60px);
    padding-bottom: clamp(40px, 5vw, 68px);
}
.lx-footer h4 {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    margin: 0 0 20px;
    color: #fff;
}
.lx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lx-footer a {
    color: rgba(255,255,255,.66);
    font-size: 13px;
    text-decoration: none;
    transition: color .28s var(--lx-ease);
}
.lx-footer a:hover { color: #fff; }
.lx-footer-about img { height: 22px; width: auto; margin-bottom: 18px;
    /* koyu zeminde logo beyaza çevrilir (tek renkli wordmark) */
    filter: brightness(0) invert(1); opacity: .92; }
.lx-footer-about p { margin: 0; color: rgba(255,255,255,.66); font-size: 13px; max-width: 34ch; }

.lx-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.16);
    padding: 24px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 12px;
    letter-spacing: .06em;
    color: rgba(255,255,255,.52);
}

/* Footer en altı: dev DERİCİDEN yazısı (Gucci tarzı), genişliğe sığar */
.lx-footer-mark {
    padding: clamp(8px, 2vw, 28px) clamp(16px, 2vw, 32px) clamp(16px, 2.4vw, 36px);
    user-select: none;
}
.lx-footer-mark img {
    display: block;
    width: 100%;
    height: auto;
    /* koyu zeminde logo beyaza çevrilir (tek renkli wordmark) */
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   İÇ SAYFALAR (katalog / ürün / sepet / form) — cila
   ========================================================================== */

.lx-page-head {
    padding: clamp(38px, 5vw, 74px) 0 clamp(24px, 3vw, 40px);
    text-align: center;
}
.lx-breadcrumb {
    font-size: 12px; /* Micro 12-13 */
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lx-muted);
    margin-bottom: 16px;
}
.lx-breadcrumb a { color: inherit; text-decoration: none; }
.lx-breadcrumb a:hover { color: var(--lx-ink); }

.lx main .alert {
    border-radius: 0;
    border-left: 2px solid var(--lx-gold);
    background: var(--lx-cream);
    color: var(--lx-ink);
    font-size: 13px;
    padding: 14px 18px;
    margin-top: 18px;
}

/* Form alanları */
.lx input[type=text],
.lx input[type=email],
.lx input[type=password],
.lx input[type=tel],
.lx input[type=number],
.lx select,
.lx textarea {
    border: 1px solid var(--lx-line);
    border-radius: 0;
    background: #fff;
    min-height: var(--lx-input-h); /* FINAL §12.5: 48-54 desktop / 50-56 mobil */
    padding: 13px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--lx-ink);
    transition: border-color .3s var(--lx-ease);
}
.lx textarea { min-height: 120px; resize: vertical; } /* FINAL §6 */
.lx input:focus,
.lx select:focus,
.lx textarea:focus { outline: none; border-color: var(--lx-ink); }

/* Boş durum */
.lx-empty {
    text-align: center;
    padding: clamp(50px, 8vw, 110px) 0;
}
.lx-empty p { color: var(--lx-muted); margin: 12px 0 26px; }

/* ==========================================================================
   DUYARLI (responsive)
   ========================================================================== */

@media (max-width: 1024px) {
    :root { --lx-header: 56px; } /* FINAL §4.1: mobil 56-64px bandının alt ucu */
    .lx-header-inner { grid-template-columns: auto 1fr auto; }
    .lx-icon-btn { display: block; }
    .lx-nav-row { display: none; }
    .lx-brand { justify-self: center; }
    .lx-brand img { height: 20px; }
    .lx-actions { gap: 16px; }
    .lx-actions .lx-hide-sm { display: none; }
}

@media (max-width: 600px) {
    /* sağdan açılmayı korur, yalnızca genişliği tam ekrana çıkarır */
    .lx-drawer { width: 100%; }
    .lx-hero { min-height: 84vh; }
    .lx-section-head { flex-direction: column; align-items: flex-start; }
    .lx-btn { width: 100%; }
    .lx-hero-actions .lx-btn { width: auto; }
}

/* ==========================================================================
   GLOBAL TEMEL
   Katman token'ları dosyanın başındaki :root'ta tanımlıdır (FINAL §12
   drawer sistemi) — yeni bileşenler rastgele z-index yazamaz.
   ========================================================================== */

:root {
    /* Sayfa içi yapışkan bileşenler bu ofseti kullanmalı (üst bar + nefes payı) */
    --lx-stick-top: calc(var(--lx-header) + 14px);
}

/* Mega menü, sayfa içi yapışkan barların (700) ÜSTÜNDE kalmalı.
   Aksi halde katalogdaki filtre şeridi açılır menüyü örtüyor. */
.lx-mega { z-index: var(--lx-z-mega); }

/* ---------- Klavye erişimi ---------- */

.lx :focus-visible {
    outline: 2px solid var(--lx-gold-deep);
    outline-offset: 3px;
}
.lx :focus:not(:focus-visible) { outline: none; }

.lx ::selection { background: var(--lx-sand); color: var(--lx-ink); }

/* İçeriğe atla — yalnızca odaklanınca görünür */
.lx-skip {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: calc(var(--lx-z-overlay) + 10);
    padding: 12px 20px;
    background: var(--lx-ink);
    color: var(--lx-paper);
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform .28s var(--lx-ease);
}
.lx-skip:focus { transform: none; }

/* ---------- Bildirim bandı (TempData) — sitenin ana geri bildirim yüzeyi ---------- */

.lx main .alert {
    max-width: 1560px;
    margin: 20px auto 0;
    padding: 15px 20px;
    border: 0;
    border-left: 2px solid var(--lx-ink);
    border-radius: 0;
    background: var(--lx-cream);
    color: var(--lx-ink);
    font-size: 12.5px;
    letter-spacing: .02em;
}
.lx main .alert-error { border-left-color: var(--lx-error); }
.lx main .alert-success { border-left-color: var(--lx-success); }

/* ---------- Eski site.css'ten sızan yuvarlak köşeler / renkler ----------
   Bu bileşenler JS ile enjekte ediliyor (site.js): sepet sayacı, toast,
   onay kutusu. Lüks dilde köşe yuvarlaklığı ve altın vurgu yok. */

.lx .cart-badge {
    border-radius: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    margin-left: 4px;
    font-size: inherit;
    letter-spacing: inherit;
}
.lx .cart-toast,
.lx .confirm-card { border-radius: 0; }
.lx .confirm-card { border: 1px solid var(--lx-line); }
.lx .confirm-btn { border-radius: 0; }
.lx .confirm-ok { background: var(--lx-ink); border-color: var(--lx-ink); }
.lx .confirm-ok:hover { background: var(--lx-ink-soft); border-color: var(--lx-ink-soft); }

/* ==========================================================================
   PAYLAŞILAN KATMAN — birden fazla sayfanın kullandığı bileşenler.
   Tek tanım noktası: sayfa blokları bunları YENİDEN tanımlamaz, sadece kullanır.
   Kırılma noktaları (mevcut düzenle uyumlu): 1024 (header) · 1100 · 900 · 600
   ========================================================================== */

/* Blok buton (ürün detay + hesap + ödeme) */
.lx-btn--block { display: flex; width: 100%; }

/* Sessiz metin CTA'nın <button> uyumlu hâli — .lx-link ile aynı dil */
.lx-linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--lx-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-ink);
    cursor: pointer;
    transition: opacity .3s var(--lx-ease);
}
.lx-linkbtn:hover { opacity: .58; }

/* Adet seçici — hem ürün detay (input + JS) hem sepet (POST butonları) için */
.lx-qty { display: inline-flex; align-items: center; border: 1px solid var(--lx-line); }
.lx-qty button {
    width: var(--lx-touch);   /* FINAL §17: min ~44px */
    height: var(--lx-touch);
    background: none;
    border: 0;
    font-family: var(--lx-sans);
    font-size: 14px;
    line-height: 1;
    color: var(--lx-ink);
    cursor: pointer;
    transition: background .25s var(--lx-ease);
}
.lx-qty button:hover:not(:disabled) { background: var(--lx-cream); }
.lx-qty button:disabled { opacity: .28; cursor: default; }
.lx-qty input {
    width: 48px;
    height: var(--lx-touch); /* butonlarla ayni yukseklik (44px) */
    min-height: 0;           /* global .lx input min-height'ini (50px) ezer */
    border: 0;
    background: transparent;
    text-align: center;
    font-family: var(--lx-sans);
    font-size: 13px;
    color: var(--lx-ink);
    -moz-appearance: textfield;
}
.lx-qty input::-webkit-outer-spin-button,
.lx-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Güven satırı (ürün detay + ödeme) */
.lx-assure { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lx-assure li {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: var(--lx-ink-soft);
    letter-spacing: .02em;
}
.lx-assure li::before { content: "—"; color: var(--lx-gold-deep); }

/* ==========================================================================
   ÜRÜN DETAY (PDP)
   Üstte tam genişlik yatay görsel şeridi; altında solda künye, sağda
   yapışkan satın alma paneli. Tipografi sade: küçük, hafif, sans-serif.
   ========================================================================== */

/* ---------- Galeri: tam genişlik yatay şerit ---------- */

.lx-pdp-gallery { position: relative; }

.lx-pdp-strip {
    display: flex;
    gap: 2px;
    /* Yükseklik ekran genişliğinin yarısı kadar: 1280px ekranda vitrin
       1280×589, sonrakiler ikili.
       82svh sınırı: 100svh iken galeri ekranı tümüyle kaplıyor, altındaki
       ürün adı/fiyat görünmüyor ve kaydırmadan hiçbir bilgi okunmuyordu.
       Bu ölçüde vitrinin altından bir şerit görünür, sayfanın devamı
       olduğu anlaşılır. */
    height: min(46vw, 82svh);
    /* fareyle sürükleyerek gezinme */
    cursor: grab;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* Masaüstünde yakalama YOK: vitrin tam ekran, sonrakiler yarım ekran olduğu
       için yakalama noktaları (0 ve 1267...) yarım görsellik adımla örtüşmüyor,
       `mandatory` snap adımı sona çekiyordu. Mobilde tek görsel = tek ekran
       olduğu için orada yakalama açık kalır (aşağıdaki medya kuralı). */
    scroll-snap-type: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: var(--lx-cream);
}
.lx-pdp-strip::-webkit-scrollbar { display: none; }
/* Animasyon sürerken yakalama kapanır, yoksa kaydırmayı ortada kesip sertleştirir */
.lx-pdp-strip.is-sliding { scroll-snap-type: none; }
/* Sürükleme sırasında: imleç yumruk, metin/görsel seçilmesin */
.lx-pdp-strip.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.lx-pdp-strip img { -webkit-user-drag: none; user-select: none; }

/* Editoryal ritim: vitrin tam genişlikte tek başına, sonraki görseller
   yarım genişlikte ikili gider. Bu asimetri kasıtlı — ürünün "kapak"
   fotoğrafı ayrı bir sahne, diğerleri detay.
   NOT: Bir denemede tüm hücreler eşit 2:3 plakaya çevrildi (fotoğraf
   çerçeveyi %100 dolduruyordu) ama bu ritmi yok ediyor ve üç görsel aynı
   anda ekrana geliyordu. Doluluk oranı burada amaç değil; vitrinin geniş
   bandında dikey fotoğrafın iki yanında sessiz boşluk kalması tasarımın
   parçası. */
.lx-pdp-cell {
    flex: 0 0 50%;
    width: 50%;
    height: 100%;
    /* display: block (grid DEĞİL). Kare grid kabı olduğunda satırı `auto`
       kalıyor; görselin `height: 100%` değeri auto satıra karşı çözülemediği
       için görsel doğal yüksekliğine düşüyordu (920×1380 fotoğraf 1874px
       genişlikte 2811px yükseklik) ve `overflow: hidden` onu kırpıyordu —
       ekranda ürün değil, fotoğrafın boş üst kısmı görünüyordu.
       Blok kabın yüksekliği kesin olduğu için yüzde artık doğru çözülür;
       ortalamayı da object-fit hallediyor, place-items gerekmez. */
    display: block;
    overflow: hidden;
    scroll-snap-align: start;
    cursor: zoom-in;
    /* isolation: hücrenin karışım/yığın bağlamı kendi içinde kalsın */
    position: relative;
    isolation: isolate;
    /* DÜZ, SESSİZ ZEMİN — efekt yok.
       Önce radyal "stüdyo parlatması", sonra fotoğrafın bulanık kopyası
       denendi; ikisi de kötüydü. Radyal gradyan kenarları çamurlaştırıyor,
       bulanık kopya ise renkli ürünlerde (kırmızı cüzdan) çerçeveyi agresif
       bir lekeye çeviriyor, beyaz ürünlerde bembeyaz kalıyordu.
       Lüks maison dili tam tersi: tek tonlu, çok açık nötr bir alan ve ortada
       nefes alan ürün. Görsellerin dolgu rengi bu tonla birebir aynı olduğu
       için fotoğrafın kenarı/dikişi hiç belli olmaz. */
    background: var(--lx-shot-bg);   /* fotograf zeminiyle BIREBIR ayni */
}

.lx-pdp-shot { position: relative; z-index: 1; }

/* Vitrin görseli tek başına, tam ekran genişliğinde */
.lx-pdp-cell:first-child {
    flex: 0 0 100%;
    width: 100%;
}

.lx-pdp-shot {
    width: 100%;
    height: 100%;
    /* ürün tamamen görünsün — kırpma yok */
    object-fit: contain;
    /* multiply KALDIRILDI: görsellerin dolgu rengi artık karo zeminiyle
       birebir aynı (#fbfaf8), dolayısıyla dikiş zaten görünmüyor. Aynı renkte
       multiply yalnızca zemini koyulaştırıp kirli bir ton bırakırdı. */
}

/* ---- Mini cart (FINAL §8.1 / §13): sağ drawer 400-480px ---- */
.lx-minicart { width: min(440px, 92vw); }
.lx-mini-bos { color: var(--lx-muted); margin: 8px 0 18px; }
.lx-mini-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.lx-mini-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 14px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lx-line);
}
.lx-mini-item img {
    width: 72px; height: 92px;   /* FINAL §13: 72-96px görsel */
    object-fit: cover;
    background: var(--lx-shot-bg);
}
.lx-mini-bilgi { display: grid; gap: 3px; min-width: 0; }
.lx-mini-ad { font-size: 13.5px; color: var(--lx-ink); }
.lx-mini-renk, .lx-mini-adet { font-size: 12px; color: var(--lx-muted); }
.lx-mini-fiyat { font-size: 13.5px; color: var(--lx-ink); white-space: nowrap; }
.lx-mini-kargo { margin: 4px 0 16px; }
.lx-mini-kargo p { margin: 0 0 8px; font-size: 12.5px; color: var(--lx-ink-soft); }
.lx-mini-kargo-tamam { color: var(--lx-success) !important; }
.lx-mini-bar {
    display: block;
    height: 4px;                 /* FINAL §13: ince 4-6px, sakin */
    background: var(--lx-sand);
    overflow: hidden;
}
.lx-mini-bar > span { display: block; height: 100%; background: var(--lx-ink); transition: width .35s var(--lx-ease); }
.lx-mini-toplam {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 4px 0 16px;
    font-size: 14px;
}
.lx-mini-sepet {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-ink);
    text-decoration: none;
    border-bottom: 0;
}
.lx-mini-sepet:hover { opacity: .6; }

/* ==========================================================================
   CHECKOUT (FINAL §9 / §14): minimal kabuk, 3 adım göstergesi,
   misafir formu, çift özet (mobil açılır / masaüstü yapışkan)
   ========================================================================== */

.lx-topbar--checkout { position: static; }
.lx-header-inner--checkout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px; /* FINAL §14: minimal header 64-72 */
}
.lx-secure {
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-footer--checkout { padding-top: 0; margin-top: clamp(40px, 6vw, 72px); }
.lx-footer-legal-links { display: flex; gap: 16px; flex-wrap: wrap; }
.lx-footer-legal-links a { color: rgba(255,255,255,.66); text-decoration: none; font-size: 12px; }
.lx-footer-legal-links a:hover { color: #fff; }

.lx-steps {
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-steps li + li::before { content: "→"; margin-right: 8px; color: var(--lx-line); }

.lx-step-hint { margin: 0 0 16px; font-size: 13px; color: var(--lx-ink-soft); }
.lx-step-hint a { color: var(--lx-ink); }

.lx-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 16px; /* FINAL §14 form gap */
    margin-bottom: 16px;
}
.lx-checkout label { display: block; font-size: 13px; color: var(--lx-ink-soft); }
.lx-checkout label > input,
.lx-checkout label > textarea { display: block; width: 100%; margin-top: 6px; }
.lx-check {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0;
    font-size: 13px;
    color: var(--lx-ink-soft);
    cursor: pointer;
}
.lx-check input { width: 18px; height: 18px; margin-top: 1px; min-height: 0 !important; flex: none; accent-color: var(--lx-ink); }

/* Mobil açılır özet; masaüstü yapışkan özet (FINAL §9) */
.lx-summary--mobil { display: none; }
@media (max-width: 1023px) {
    .lx-summary--mobil {
        display: block;
        margin-bottom: 22px;
        border: 1px solid var(--lx-line);
        padding: 0 16px;
    }
    .lx-summary--mobil > summary {
        padding: 14px 0;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: var(--lx-track);
        text-transform: uppercase;
    }
    .lx-summary--mobil[open] > summary { border-bottom: 1px solid var(--lx-line); }
    .lx-summary--masaustu .lx-sum-items,
    .lx-summary--masaustu .lx-sum-rows,
    .lx-summary--masaustu .lx-sum-total { display: none; }
}

/* ---- PDP: Favorilere Ekle (ikincil aksiyon, PDP-09) ---- */
.lx-buy-fav-form { margin-top: 10px; }
.lx-buy-fav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: var(--lx-btn-h);
    background: transparent;
    border: 1px solid var(--lx-ink);
    font-family: var(--lx-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-ink);
    cursor: pointer;
    transition: background .25s var(--lx-ease), color .25s var(--lx-ease);
}
.lx-buy-fav:hover { background: var(--lx-ink); color: var(--lx-paper); }
.lx-buy-fav svg { width: 17px; height: 17px; }

/* Güven bağlantıları — CTA yakınında (FINAL §7.1) */
.lx-buy-service {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--lx-line);
}
.lx-buy-service a {
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--lx-line);
    padding-bottom: 2px;
}
.lx-buy-service a:hover { color: var(--lx-ink); border-color: var(--lx-ink); }

/* ---- PDP: mobil sticky satın alma barı (PDP-12, FINAL §11) ---- */
.lx-pdp-sticky {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--lx-z-flyout);
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px var(--lx-gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--lx-paper);
    border-top: 1px solid var(--lx-line);
    box-shadow: 0 -8px 30px rgba(17,17,17,.08);
}
.lx-pdp-sticky-fiyat { font-size: 15px; font-weight: 500; color: var(--lx-ink); white-space: nowrap; }
.lx-pdp-sticky-btn { flex: 1; max-width: 340px; }
@media (max-width: 1023px) {
    .lx-pdp-sticky { display: flex; }
    /* bar içeriği örtmesin: sayfa dibine nefes payı */
    .lx-pdp-page main { padding-bottom: 84px; }
}

/* ---------- Detaylardaki Ustalık (FINAL §5 sıra 10) ----------
   Üç gerçek ürün karesi; kısa tek kelimelik altyazılar. */
.lx-craft {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 2vw, 24px);
}
.lx-craft-item { margin: 0; }
.lx-craft-item img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--lx-shot-bg);
    display: block;
}
.lx-craft-item figcaption {
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
    text-align: center;
}
@media (max-width: 760px) {
    .lx-craft { grid-template-columns: 1fr; gap: 20px; }
    .lx-craft-item img { aspect-ratio: 4 / 3; }
}

/* ---------- Görsel üzerinde beliren hızlı ekleme kutusu ---------- */

.lx-pdp-quick {
    position: absolute;
    left: 50%;
    bottom: clamp(16px, 2.4vw, 30px);
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 22px);
    max-width: min(560px, 90vw);
    padding: 9px 9px 9px 20px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(17,17,17,.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--lx-fade) var(--lx-ease), visibility var(--lx-fade);
}
/* "Biraz bekleyince" belirir; imleç ayrılınca gecikmesiz kaybolur */
.lx-pdp-gallery:hover .lx-pdp-quick,
.lx-pdp-gallery:focus-within .lx-pdp-quick {
    opacity: 1;
    visibility: visible;
    transition-delay: .45s;
}

.lx-pdp-quick-name {
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--lx-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lx-pdp-quick-price {
    flex: none;
    font-size: 12.5px;
    color: var(--lx-ink);
}
.lx-pdp-quick-btn {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--lx-ink);
    color: var(--lx-paper);
    cursor: pointer;
    transition: background var(--lx-fade-quick) var(--lx-ease);
}
.lx-pdp-quick-btn svg { width: 17px; height: 17px; display: block; }
.lx-pdp-quick-btn:hover:not(:disabled) { background: var(--lx-gold-deep); }
.lx-pdp-quick-btn:disabled { background: var(--lx-sand); color: var(--lx-muted); cursor: not-allowed; }

/* Dokunmatikte hover yok → kutu görünür kalır */
@media (hover: none) {
    .lx-pdp-quick { opacity: 1; visibility: visible; }
}

/* ---------- Alta sabitlenen kayıt bandı (giriş yapılmadıysa) ---------- */

.lx-signup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--lx-z-flyout); /* içerik üstünde, çekmecenin altında */
    background: var(--lx-paper);
    border-top: 1px solid var(--lx-line);
    box-shadow: 0 -12px 40px rgba(17,17,17,.08);
    opacity: 0;
    transition: opacity var(--lx-fade) var(--lx-ease-soft);
}
.lx-signup.is-in { opacity: 1; }

.lx-signup-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(20px, 2.6vw, 34px) clamp(46px, 5vw, 84px) clamp(20px, 2.6vw, 34px) clamp(16px, 4vw, 64px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 620px);
    align-items: center;
    gap: clamp(20px, 3vw, 60px);
}

.lx-signup-copy h2 {
    margin: 0;
    font-family: var(--lx-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-ink);
}
.lx-signup-copy p {
    margin: 12px 0 0;
    max-width: 62ch;
    font-size: 13px;
    line-height: 1.7;
    color: var(--lx-ink-soft);
}
.lx-signup-fine {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: var(--lx-muted) !important;
}
.lx-signup-fine a { color: var(--lx-ink-soft); }

.lx-signup-form {
    display: flex;
    align-items: flex-end;
    gap: clamp(14px, 2vw, 26px);
}
.lx-signup-field { flex: 1; min-width: 0; }
.lx-signup-field span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx .lx-signup-field input[type],
.lx-signup-field input {
    width: 100%;
    /* Global min-height (50px) geçerli; alt-çizgi estetiğinde metni
       çizgiye yaklaştırmak için dolgu alta değil üste verilir. */
    padding: 20px 0 9px;
    border: 0;
    border-bottom: 1px solid var(--lx-line);
    border-radius: 0;
    background: transparent;
    font-family: var(--lx-sans);
    font-size: 13.5px;
    color: var(--lx-ink);
}
.lx .lx-signup-field input:focus { border-bottom-color: var(--lx-ink); outline: none; }

.lx-signup-form button[type=submit] {
    flex: none;
    height: 48px; /* buton bandı 48-54 */
    padding: 0 clamp(20px, 2.4vw, 34px);
    border: 1px solid var(--lx-ink);
    border-radius: 0;
    background: transparent;
    font-family: var(--lx-sans);
    font-size: 13px; /* UI Label 13-15 */
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-ink);
    cursor: pointer;
    transition: background var(--lx-fade-quick) var(--lx-ease), color var(--lx-fade-quick) var(--lx-ease);
}
.lx-signup-form button[type=submit]:hover { background: var(--lx-ink); color: var(--lx-paper); }

.lx-signup-close {
    position: absolute;
    top: clamp(12px, 1.6vw, 20px);
    right: clamp(12px, 1.6vw, 24px);
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--lx-muted);
    cursor: pointer;
    transition: color var(--lx-fade-quick) var(--lx-ease);
}
.lx-signup-close:hover { color: var(--lx-ink); }
.lx-signup-close svg { width: 16px; height: 16px; display: block; }

@media (max-width: 900px) {
    .lx-signup-inner { grid-template-columns: 1fr; gap: 18px; }
    .lx-signup-fine { display: none; }
    .lx-signup-form { flex-wrap: wrap; }
    .lx-signup-form button[type=submit] { width: 100%; }
}

/* Şerit okları */
.lx-strip-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: var(--lx-touch);  /* FINAL §17: min ~44px */
    height: var(--lx-touch);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255,255,255,.82);
    color: var(--lx-ink);
    cursor: pointer;
    transition: background var(--lx-fade-quick) var(--lx-ease);
}
.lx-strip-nav:hover { background: #fff; }
.lx-strip-nav svg { width: 18px; height: 18px; display: block; }
.lx-strip-nav--prev { left: clamp(10px, 2vw, 26px); }
.lx-strip-nav--next { right: clamp(10px, 2vw, 26px); }

/* Yakınlaştırma köprüsü görünmez (site.js kancaları burada yaşar) */
.pd-gallery.lx-pdp-zoomproxy { display: none; }

.lx-pdp-noimg {
    height: min(60vh, 520px);
    background: var(--lx-cream);
    display: grid;
    place-items: center;
    color: var(--lx-muted);
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
}

/* ---------- Görsellerin altı: künye + satın alma ---------- */

/* FINAL §7.1: sol %60-65 galeri+künye, sağ %35-40 yapışkan panel.
   (420-520px panel, 12.Aşama §11 "max width 420-520".) */
.lx-pdp-below {
    --lx-pdp-pad: clamp(16px, 4vw, 64px);
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(18px, 3vw, 40px) var(--lx-pdp-pad) clamp(60px, 8vw, 110px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
    gap: clamp(30px, 5vw, 96px);
    align-items: start;
}

/* Masaüstü galeri: yatay şerit yerine editorial ızgara —
   büyük ana kare + ikili detay kareleri (12.Aşama §3.1 iskeleti). */
@media (min-width: 1024px) {
    /* Vakko düzeni: görseller sayfada KÜÇÜK mozaik olarak yan yana durur —
       ilk satır 2'li, sonraki 3'lü, sonra yine 2'li/3'lü. Böylece tek bir dev
       görselde aşağı kaydırmak yerine 5 görsel birden ekrana sığar. Altı
       sütunlu ızgarada 2'li hücre 3, 3'lü hücre 2 sütun kaplar. */
    /* GUCCI düzeni (gucci.com ürün sayfasından ölçüldü, 1920px ekran):
       tam genişlik yatay galeri, yüksekliği ekran genişliğinin yarısı (960px),
       ilk görsel tam genişlikte, sonrakiler yarım genişlikte ve KARE, aralarında
       boşluk yok, görseller çerçeveyi doldurur (cover). Oklar sağ altta. */
    .lx-pdp-strip {
        gap: 0;
        height: min(50vw, 96svh);
        cursor: grab;
        background: var(--lx-shot-bg);
    }
    .lx-pdp-cell,
    .lx-pdp-cell:first-child { height: 100%; }
    .lx-pdp-cell:first-child { flex: 0 0 100%; width: 100%; }   /* Gucci: vitrin tam genişlikte, ortada büyük; sonrakiler ikili */
    .lx-pdp-shot { height: 100%; aspect-ratio: auto; object-fit: contain; object-position: 50% 50%; }   /* kırpma yok: ürün bütün görünür */
    /* Oklar: küçük kare düğmeler, sağ altta yan yana */
    .lx-strip-nav {
        top: auto;
        bottom: 24px;
        width: 32px;
        height: 32px;
        transform: none;
        background: rgba(255,255,255,.92);
    }
    .lx-strip-nav--next { right: 24px; }
    .lx-strip-nav--prev { left: auto; right: 62px; }
    /* Küçük resim şeridi: oklardan önce, sağ altta */
    .lx-pdp-thumbs { position: absolute; z-index: 3; right: 106px; bottom: 24px; display: flex; gap: 4px; }
    .lx-pdp-thumbs[hidden] { display: none; }
    .lx-pdp-thumb { width: 32px; height: 40px; padding: 0; border: 1px solid transparent; background: var(--lx-shot-bg); cursor: pointer; opacity: .7; }
    .lx-pdp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .lx-pdp-thumb.is-active { border-color: var(--lx-ink); opacity: 1; }
    .lx-pdp-thumb:hover { opacity: 1; }
    .lx-pdp-gallery { margin-bottom: clamp(24px, 3vw, 44px); }
    /* Ürün adı / fiyat / sepet kutusu görselin üstünde HER ZAMAN görünür (Gucci) */
    .lx-pdp-quick { opacity: 1; visibility: visible; }
}

/* Mobil/tablette galeri kolon dolgusunu kırar — tam genişlik şerit */
@media (max-width: 1023px) {
    .lx-pdp-gallery {
        margin-inline: 0;
        margin-bottom: 22px;
    }
}

.lx-pdp-flag {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-gold-deep);
}

/* Başlık: küçük, hafif, sans — Gucci ölçeği */
.lx-pdp-name {
    margin: 0;
    font-family: var(--lx-sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: var(--lx-ink);
}

.lx-pdp-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .01em;
}
.lx-pdp-price del { color: var(--lx-muted); font-size: 13px; }

.lx-pdp-short {
    margin: 20px 0 0;
    max-width: 62ch;
    font-size: 13px;
    line-height: 1.75;
    color: var(--lx-ink-soft);
}

/* ---------- Açıklama bloğu (Gucci düzeni) ---------- */

.lx-pdp-descblock { margin-top: clamp(34px, 4.6vw, 62px); }
.lx-pdp-descblock h2 {
    margin: 0;
    font-family: var(--lx-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lx-ink);
}
.lx-pdp-style {
    margin: 12px 0 0;
    font-size: 12px;
    letter-spacing: .02em;
    color: var(--lx-muted);
}

.lx-pdp-desc {
    margin-top: 18px;
    max-width: 66ch;
    font-size: 14px;
    line-height: 1.85;
    color: var(--lx-ink);
    /* Kırpma satır SAYISINA göre yapılır — piksel sınırı satırın ortasından
       keserek yarım satır bırakıyordu. line-clamp her zaman tam satırda biter
       ve sonuna üç nokta koyar. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}
.lx-pdp-desc.is-open {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.lx-pdp-desc p { margin: 0 0 1em; }
.lx-pdp-desc p:last-child { margin-bottom: 0; }

.lx-pdp-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--lx-sans);
    font-size: 12.5px;
    color: var(--lx-ink);
    cursor: pointer;
}
.lx-pdp-more-mark {
    position: relative;
    width: 12px;
    height: 12px;
    flex: none;
}
.lx-pdp-more-mark::before,
.lx-pdp-more-mark::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: transform var(--lx-fade-quick) var(--lx-ease);
}
.lx-pdp-more-mark::before { left: 0; right: 0; top: 5.5px; height: 1px; }
.lx-pdp-more-mark::after { top: 0; bottom: 0; left: 5.5px; width: 1px; }
.lx-pdp-more[aria-expanded="true"] .lx-pdp-more-mark::after { transform: scaleY(0); }
.lx-pdp-more-text { text-decoration: underline; text-underline-offset: 3px; }

.lx-pdp-acc { margin-top: clamp(30px, 4vw, 52px); }

/* ---------- Satın alma paneli (yapışkan) ---------- */

.lx-pdp-buy { position: sticky; top: var(--lx-stick-top); }

.lx-buy-btn {
    display: block;
    width: 100%;
    height: 50px;
    margin-top: 4px;
    border: 1px solid var(--lx-ink);
    border-radius: 0;
    background: var(--lx-ink);
    color: var(--lx-paper);
    font-family: var(--lx-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--lx-fade-quick) var(--lx-ease),
                color var(--lx-fade-quick) var(--lx-ease);
}
.lx-buy-btn:hover:not(:disabled) { background: transparent; color: var(--lx-ink); }
.lx-buy-btn:disabled {
    background: var(--lx-sand);
    border-color: var(--lx-sand);
    color: var(--lx-muted);
    cursor: not-allowed;
}

.lx-buy-note {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--lx-muted);
}

.lx-buy-service {
    margin-top: clamp(24px, 3vw, 34px);
    padding-top: 20px;
    border-top: 1px solid var(--lx-line);
}
.lx-buy-service span {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
}
.lx-buy-service p {
    margin: 0;
    font-size: 12px;
    line-height: 1.75;
    color: var(--lx-ink-soft);
}

.lx-buy-link {
    display: block;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--lx-line);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-ink);
    text-decoration: none;
}
.lx-buy-link span {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--lx-muted);
}
.lx-buy-link:hover span { color: var(--lx-ink-soft); }

/* Varyant seçimi — kutucuklar */
.lx-pdp-group { border: 0; margin: 0; padding: 0; }
.lx-pdp-group + .lx-pdp-group { margin-top: 22px; }
.lx-pdp-legend {
    padding: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-pdp-legend em { font-style: normal; color: var(--lx-ink); }

.lx-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lx-swatch { position: relative; }
.lx-swatch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.lx-swatch span {
    display: block;
    min-width: 54px;
    padding: 11px 14px;
    border: 1px solid var(--lx-line);
    text-align: center;
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--lx-ink);
    transition: border-color .26s var(--lx-ease), background .26s var(--lx-ease);
}
/* radyo saydam (opacity:0) olduğu için odak çerçevesi kardeş etikete çizilir */
.lx-swatch input:focus-visible + span {
    outline: 2px solid var(--lx-gold-deep);
    outline-offset: 3px;
}
.lx-swatch input:hover + span { border-color: var(--lx-ink-soft); }
.lx-swatch input:checked + span { border-color: var(--lx-ink); background: var(--lx-ink); color: var(--lx-paper); }
.lx-swatch input:disabled + span {
    color: var(--lx-muted);
    background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(17,17,17,.05) 6px 7px);
    cursor: not-allowed;
}

/* ---- Renk noktası swatch'ları (FINAL §7.1: "RENK: BORDO + swatch") ----
   Metin kutusu yerine gerçek renk yuvarlağı; görsel çap 24px, isabet
   alanı 44px (FINAL §11: mobil 22-26px görsel / 44px etkin). */
.lx-swatch--renk { display: grid; place-items: center; width: var(--lx-touch); height: var(--lx-touch); }
.lx-swatch--renk .lx-swatch-dot {
    display: block;
    width: 24px; height: 24px;
    min-width: 0; padding: 0;              /* metin kutusu kurallarını ez */
    border: 1px solid var(--lx-line);
    border-radius: 50%;                    /* renk noktası — buton değil */
    transition: box-shadow .2s var(--lx-ease), border-color .2s var(--lx-ease);
}
.lx-swatch--renk input:hover + .lx-swatch-dot { border-color: var(--lx-ink-soft); }
.lx-swatch--renk input:checked + .lx-swatch-dot {
    border-color: var(--lx-ink);
    box-shadow: 0 0 0 3px var(--lx-paper), 0 0 0 4px var(--lx-ink); /* seçim halkası */
    background-clip: padding-box;
}
.lx-swatch--renk input:focus-visible + .lx-swatch-dot {
    outline: 2px solid var(--lx-gold-deep);
    outline-offset: 3px;
}
/* Stokta olmayan renk: silinmez, pasif görünür (FINAL 12.Aşama §3.3) */
.lx-swatch--renk input:disabled + .lx-swatch-dot {
    opacity: .35;
    background-image: linear-gradient(135deg, transparent 46%, var(--lx-paper) 46%, var(--lx-paper) 54%, transparent 54%);
    cursor: not-allowed;
}

/* ---- Fotoğraflı renk seçeneği (Vakko): varyantın ilk görseli + altında renk adı ---- */
.lx-swatches:has(.lx-swatch--foto) { gap: 12px; }
.lx-swatch--foto { display: block; width: 64px; }
.lx-swatch--foto .lx-swatch-kare {
    display: block;
    width: 64px; height: 80px;
    min-width: 0; padding: 0;
    overflow: hidden;
    background: var(--lx-shot-bg);
}
.lx-swatch--foto .lx-swatch-kare img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
.lx-swatch--foto input:checked + .lx-swatch-kare {
    background: var(--lx-shot-bg);
    border-color: var(--lx-ink);
    box-shadow: 0 0 0 1px var(--lx-ink);
}
.lx-swatch--foto input:disabled + .lx-swatch-kare { opacity: .4; background: var(--lx-shot-bg); }
.lx-swatch--foto .lx-swatch-ad {
    min-width: 0; padding: 0; border: 0;
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: .02em;
    text-align: center;
    color: var(--lx-ink);
}

/* Yalnız ekran okuyucular için metin */
.lx-gorunmez {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    min-width: 0 !important; padding: 0 !important; border: 0 !important;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.lx-pdp-actions { display: grid; gap: 10px; margin-top: clamp(22px, 3vw, 30px); }
.lx-pdp-row { display: flex; align-items: center; gap: 14px; }
.lx-pdp-stock {
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-pdp-stock--low { color: var(--lx-error); }

/* ---------- Akordiyonlar (Gucci düzeni) ----------
   Cümle düzeni başlık, sağda chevron, satırları ince çizgi ayırır.
   Satıra yaklaşınca ayırıcı çizgi soldan sağa çizilir. */
.lx-acc { position: relative; }

/* Duran ayırıcı çizgi — her satırın ALTINDA, soluk */
.lx-acc::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(17,17,17,.15);
    pointer-events: none;
}

/* Animasyonlu çizgi: durur hâlde ortada ve genişliği sıfır (görünmez).
   Satıra gelince `left` anında 0'a atlar — o anda genişlik 0 olduğu için
   sıçrama görünmez — ve genişlik 0.8s'de %100'e çizilir. */
.lx-acc::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--lx-ink);
    transition: width .8s cubic-bezier(.5, 0, 0, 1);
    pointer-events: none;
}
.lx-acc:hover::after,
.lx-acc:focus-within::after {
    left: 0;
    width: 100%;
}

.lx-acc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: clamp(22px, 2.6vw, 32px) 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--lx-sans);
    font-size: 14.5px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--lx-ink);
}
.lx-acc summary::-webkit-details-marker { display: none; }

/* Sağdaki chevron */
.lx-acc summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 2px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--lx-fade-quick) var(--lx-ease);
}
.lx-acc[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
/* Akordiyon içeriği de fade ile açılır */
details.lx-acc[open] > .lx-acc-body { animation: lxFadeIn var(--lx-fade-quick) var(--lx-ease) both; }
.lx-acc-body {
    padding: 0 0 clamp(22px, 2.6vw, 30px);
    max-width: 66ch;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--lx-ink-soft);
}

/* ==========================================================================
   KATEGORİ GİRİŞ GÖRSELLERİ
   İlk karo tam yükseklik; altındakiler yan yana %50. Zeminde özgün monogram
   deseni, üzerinde koyu tül ve beyaz başlık + düğme.
   ========================================================================== */

.lx-cats { display: block; }

.lx-cat {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background-color: #17110c;
    /* özgün monogram deseni — fotoğrafın boşluklarında ve yüklenmeden önce görünür */
    background-image: url('/img/pattern/dericiden-monogram.svg');
    background-size: 220px 220px;
    background-position: center;
}

/* Kapak: ekranın tamamı (üst bar zaten üzerine biniyor) */
.lx-cat--full { height: 100svh; min-height: 520px; }

/* Alt sıra: iki karo yan yana, her biri %50.
   Karolar arasında BOŞLUK YOK — üç görsel kesintisiz tek yüzey gibi akar
   (gap ve margin bilinçli olarak 0). */
.lx-cat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 0;
}
.lx-cat--half { aspect-ratio: 3 / 4; }

.lx-cat img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* fotoğraf hafifçe şeffaf: arkadaki monogram deseni dokusal olarak sızar */
    opacity: .94;
    transition: opacity var(--lx-fade-slow) var(--lx-ease-soft);
}
/* hover opaklığı kaldırıldı: fare üstünde kalınca görsel başlangıç haline dönemiyor, arka plan deseni/filigran siliniyordu */

/* Alt kısımda yazıyı taşıyan koyu tül */
.lx-cat-veil {
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    /* Görseller yeniden renklendirildi (daha sıcak/aydınlık) — tül hafifletildi,
       yoksa fotoğrafın parlaklığı yeniden çamura dönüyordu */
    background: linear-gradient(to top, rgba(12,9,6,.58), rgba(12,9,6,.18) 46%, rgba(12,9,6,0));
    transition: opacity var(--lx-fade-slow) var(--lx-ease-soft);
}
.lx-cat.is-zoom .lx-cat-veil { opacity: .86; }

.lx-cat-body {
    position: absolute;
    left: 50%;
    bottom: clamp(34px, 5vw, 78px);
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: clamp(14px, 1.8vw, 22px);
    width: 100%;
    padding: 0 20px;
    text-align: center;
}

.lx-cat-title {
    /* h1/h2 olarak render ediliyor — tarayıcı varsayılan boşlukları sıfırlanır */
    margin: 0;
    font-family: var(--lx-serif);
    font-weight: 400;
    font-size: clamp(22px, 3.2vw, 46px);
    line-height: 1.1;
    letter-spacing: .01em;
    text-shadow: 0 2px 18px rgba(12,9,6,.45);
}
.lx-cat--half .lx-cat-title { font-size: clamp(18px, 2.2vw, 30px); }

.lx-cat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 148px;
    height: 46px;
    padding: 0 26px;
    background: var(--lx-paper);
    color: var(--lx-ink);
    font-family: var(--lx-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    transition: background var(--lx-fade-quick) var(--lx-ease),
                color var(--lx-fade-quick) var(--lx-ease);
}
.lx-cat:hover .lx-cat-btn { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #fff; }

@media (max-width: 760px) {
    .lx-cat--full { height: 82svh; min-height: 440px; }
    /* mobilde ikili sıra alt alta iner */
    .lx-cat-row { grid-template-columns: 1fr; }
    .lx-cat--half { aspect-ratio: 4 / 5; }
    .lx-cat-btn { height: 42px; min-width: 130px; }
}

/* ---------- Hizmet karoları (Gucci Services deseni) ----------
   Ortalı küçük başlık; üç kare görsel; altında aralıklı büyük harf
   başlık ve altı çizili bağlantı. */
.lx-services-head {
    margin: 0 0 clamp(36px, 5vw, 60px);
    text-align: center;
    font: 500 13px/1 var(--lx-sans);
    letter-spacing: var(--lx-track-wide);
    text-transform: uppercase;
}
.lx-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 4vw, 60px);
    max-width: 1220px;
    margin: 0 auto;
}
.lx-service {
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--lx-ink);
}
.lx-service-media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #efe9df;
}
.lx-service-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* FINAL §16: görsel hover 250-400ms */
    transition: transform var(--lx-fade-card) var(--lx-ease-soft);
}
.lx-service:hover .lx-service-media img,
.lx-service:focus-visible .lx-service-media img { transform: scale(1.045); }
.lx-service-title {
    display: block;
    margin: clamp(20px, 2.6vw, 30px) 0 14px;
    font: 500 12.5px/1.6 var(--lx-sans);
    letter-spacing: var(--lx-track-wide);
    text-transform: uppercase;
}
.lx-service-link {
    display: inline-block;
    font: 400 13.5px/1 var(--lx-sans);
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    transition: opacity var(--lx-fade-quick) var(--lx-ease);
}
.lx-service:hover .lx-service-link { opacity: .6; }

@media (max-width: 760px) {
    .lx-services { grid-template-columns: 1fr; gap: 44px; max-width: 420px; }
}

/* Anasayfa "Sizin İçin" notu */
.lx-foryou-note {
    margin: 12px 0 0;
    font-size: 12px;
    letter-spacing: .02em;
    color: var(--lx-muted);
}
.lx-acc-body p { margin: 0 0 10px; }
.lx-acc-body dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; margin: 0; }
.lx-acc-body dt {
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-acc-body dd { margin: 0; font-size: 12.5px; }

.lx-pdp-related {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(36px, 4.5vw, 60px) clamp(16px, 4vw, 64px) clamp(60px, 8vw, 110px);
    border-top: 1px solid var(--lx-line);
}

/* Devre dışı buton (tükendi) */
.lx-btn:disabled,
.lx-btn[disabled] {
    background: var(--lx-sand);
    border-color: var(--lx-sand);
    color: var(--lx-muted);
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .lx-pdp-below { grid-template-columns: 1fr; gap: 30px; }
    .lx-pdp-buy { position: static; }
}
@media (max-width: 760px) {
    /* Mobilde vitrin/detay ayrımı yok: tek ekran = tek görsel, yakalama
       tam oturur. Yapı masaüstündekiyle aynı mantıkta, yalnızca yükseklik
       150vw (= genişlik x 3/2, yani 2:3): 375px telefonda 375x563 çıkar ve
       fotoğraf çerçeveyi tam doldurur. Eskiden min(100vw,560px) ile hücre
       kare kalıyordu, dikey fotoğrafın iki yanında büyük boşluk oluyordu. */
    .lx-pdp-strip { gap: 0; height: min(150vw, 76svh); scroll-snap-type: x mandatory; }
    .lx-pdp-cell,
    .lx-pdp-cell:first-child { flex: 0 0 100%; width: 100%; }
    .lx-strip-nav { width: var(--lx-touch); height: var(--lx-touch); } /* mobilde de 44px */
    .lx-pdp-quick { left: 12px; right: 12px; transform: none; max-width: none; }
}

/* Kaydırılacak yer yoksa oklar gizlenir (JS işaretler) */
.lx-pdp-gallery.is-static .lx-strip-nav { display: none; }
.lx-strip-nav[disabled] { opacity: 0; pointer-events: none; }

/* ---- PLP: kısa giriş + SEO metni + Daha Fazla Göster + renk filtresi ---- */
.lx-plp-intro {
    max-width: 780px; /* FINAL §10: intro 700-900px */
    margin: 10px auto 0;
    color: var(--lx-ink-soft);
    font-size: 14px;
}
.lx-plp-seo {
    margin: clamp(40px, 6vw, 72px) auto 0;
    padding-top: clamp(24px, 3vw, 40px);
    border-top: 1px solid var(--lx-line);
    color: var(--lx-ink-soft);
    font-size: 14px;
    line-height: 1.7;
}
.lx-plp-seo h2, .lx-plp-seo h3 { font-family: var(--lx-serif); font-weight: 400; color: var(--lx-ink); }
.lx-loadmore {
    display: grid;
    justify-items: center;
    gap: 14px;
    margin-top: clamp(32px, 4vw, 56px);
}
.lx-loadmore-progress {
    margin: 0;
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-filterlist--renk a { display: inline-flex; align-items: center; gap: 10px; }
.lx-filter-renk {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(17,17,17,.2);
    flex: none;
}
/* Filtre panelini kapatan CTA yalnız mobil alt-sayfada görünür */
.lx-filter-kapat { display: none; }
@media (max-width: 760px) {
    /* Mobil filtre: alttan yükselen sayfa (FINAL §12.4 mobil filtre) */
    .lx-disc[open] .lx-disc-panel {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        max-height: 82svh;
        overflow-y: auto;
        z-index: var(--lx-z-drawer);
        background: var(--lx-paper);
        box-shadow: 0 -12px 40px rgba(17,17,17,.18);
        padding: 20px var(--lx-gutter) calc(20px + env(safe-area-inset-bottom));
    }
    .lx-filter-kapat {
        display: flex;
        position: sticky;
        bottom: 0;
        width: 100%;
        margin-top: 16px;
    }
}

/* ==========================================================================
   KATALOG (PLP)
   Merkezî başlık + üst barın altına yapışan ince filtre/sıralama şeridi.
   Paneller <details> ile açılır — JS gerekmez.
   ========================================================================== */

.lx-plp-head {
    max-width: 1560px;
    margin: 0 auto;
    padding: clamp(18px, 2.4vw, 30px) clamp(16px, 4vw, 60px) clamp(24px, 3vw, 40px);
    text-align: center;
}
.lx-plp-head .lx-breadcrumb { justify-content: center; }
.lx-plp-title { margin: 14px 0 0; }
.lx-plp-count {
    margin: 14px 0 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track-wide);
    text-transform: uppercase;
    color: var(--lx-muted);
}

/* Alt / kardeş kategori satırı */
.lx-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px clamp(16px, 2vw, 30px);
    margin-top: clamp(22px, 2.8vw, 34px);
}
.lx-subnav a {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: color .28s var(--lx-ease), border-color .28s var(--lx-ease);
}
.lx-subnav a:hover { color: var(--lx-ink); }
.lx-subnav a.is-active { color: var(--lx-ink); border-bottom-color: var(--lx-ink); }

/* ---------- Yapışkan filtre / sıralama şeridi ---------- */

.lx-filterbar {
    position: sticky;
    /* üst bar (--lx-header) + 1px alt çizgisinin hemen altı; mobilde kendiliğinden 53px */
    top: calc(var(--lx-header) + 1px);
    z-index: var(--lx-z-sticky);
    background: var(--lx-paper);
    border-top: 1px solid var(--lx-line);
    border-bottom: 1px solid var(--lx-line);
}
.lx-filterbar-inner {
    /* panelleri container'a göre konumlandırır — geniş ekranda sağa kaçmasın */
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 18px;
    min-height: 54px;
}
.lx-filterbar-inner > * { padding-block: 6px; }

.lx-bar-mark { position: relative; flex: 0 0 10px; width: 10px; height: 10px; }
.lx-bar-mark::before,
.lx-bar-mark::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: transform .3s var(--lx-ease);
}
.lx-bar-mark::before { left: 0; right: 0; top: 4.5px; height: 1px; }
.lx-bar-mark::after { top: 0; bottom: 0; left: 4.5px; width: 1px; }
details[open] > summary .lx-bar-mark::after { transform: scaleY(0); }

/* Açılan paneller de fade ile gelir (filtre / sıralama) */
details.lx-disc[open] > .lx-disc-panel { animation: lxFadeIn var(--lx-fade-quick) var(--lx-ease) both; }

.lx-disc > summary {
    list-style: none;
    cursor: pointer;
}
.lx-disc > summary::-webkit-details-marker { display: none; }
.lx-disc > summary em { font-style: normal; color: var(--lx-gold-deep); }

/* Paneller: yapışkan şeride göre konumlanır (sticky = konumlanmış eleman) */
.lx-disc-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--lx-paper);
    border-bottom: 1px solid var(--lx-line);
    box-shadow: 0 18px 40px rgba(17,17,17,.07);
    padding: clamp(22px, 3vw, 38px) clamp(16px, 4vw, 60px);
    /* küçük ekranda panelin altı erişilemez kalmasın */
    max-height: calc(100vh - var(--lx-header) - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.lx-disc-panel--right {
    left: auto;
    right: 0;
    width: min(300px, 92vw);
    padding: 20px 24px;
    border-left: 1px solid var(--lx-line);
}

.lx-filtercols {
    max-width: 1560px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: clamp(22px, 3vw, 48px);
}
.lx-filtercol h4 {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-filterlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lx-filterlist a {
    font-size: 12.5px;
    color: var(--lx-ink-soft);
    text-decoration: none;
    transition: color .26s var(--lx-ease);
}
.lx-filterlist a:hover { color: var(--lx-ink); }
.lx-filterlist a.is-active { color: var(--lx-ink); }
.lx-filterlist a.is-active::before { content: "— "; color: var(--lx-gold-deep); }

/* Fiyat aralığı formu — yalnız alt çizgi */
.lx-pricerange { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
.lx-pricerange input {
    width: 82px;
    padding: 7px 0;
    border: 0;
    border-bottom: 1px solid var(--lx-line);
    background: transparent;
    font-family: var(--lx-sans);
    font-size: 12.5px;
    color: var(--lx-ink);
}
.lx-pricerange input:focus { border-bottom-color: var(--lx-ink); outline: none; }

/* ---------- Etkin filtre etiketleri ---------- */

.lx-chips {
    max-width: 1560px;
    margin: 0 auto;
    padding: 18px clamp(16px, 4vw, 60px) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}
.lx-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid var(--lx-line);
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--lx-ink);
    text-decoration: none;
    transition: border-color .26s var(--lx-ease);
}
.lx-chip:hover { border-color: var(--lx-ink); }
.lx-chip::after { content: "×"; font-size: 13px; line-height: 1; color: var(--lx-muted); }

/* ---------- Izgara + sayfalama ---------- */

.lx-plp-body {
    max-width: 1560px;
    margin: 0 auto;
    padding: clamp(24px, 3vw, 40px) clamp(16px, 4vw, 60px) clamp(60px, 8vw, 110px);
}

.lx-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 4px;
    margin-top: clamp(38px, 5vw, 66px);
}
.lx-pager a,
.lx-pager span {
    min-width: 38px;
    padding: 10px 6px;
    text-align: center;
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--lx-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .26s var(--lx-ease), border-color .26s var(--lx-ease);
}
.lx-pager a:hover { color: var(--lx-ink); }
.lx-pager .is-current { color: var(--lx-ink); border-bottom-color: var(--lx-ink); }
.lx-pager .lx-pager-edge { min-width: auto; padding-inline: 14px; }

.lx-plp-empty {
    padding: clamp(50px, 8vw, 100px) 0;
    text-align: center;
}
.lx-plp-empty p {
    margin: 16px auto 0;
    max-width: 44ch;
    font-size: 13.5px;
    color: var(--lx-ink-soft);
}
.lx-plp-empty .lx-plp-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

@media (max-width: 600px) {
    .lx-disc-panel--right { width: 100%; left: 0; right: 0; border-left: 0; }
}

/* ==========================================================================
   SEPET · ÖDEME · SİPARİŞ ONAYI
   İki kolon: solda akış, sağda yapışkan özet. Kutu yok, ince çizgiler.
   ========================================================================== */

.lx-shop {
    max-width: 1360px;
    margin: 0 auto;
    padding: clamp(18px, 2.4vw, 30px) clamp(16px, 4vw, 60px) clamp(60px, 8vw, 110px);
}
.lx-shop-head { text-align: center; padding-bottom: clamp(26px, 3.4vw, 44px); }
.lx-shop-head .lx-breadcrumb { justify-content: center; }
.lx-shop-head h1 { margin: 14px 0 0; }
.lx-shop-meta {
    margin: 12px 0 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track-wide);
    text-transform: uppercase;
    color: var(--lx-muted);
}

.lx-shop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
    gap: clamp(28px, 4vw, 74px);
    align-items: start;
}

/* ---------- Sepet satırları ---------- */

.lx-lines { border-top: 1px solid var(--lx-line); }
.lx-line {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: clamp(14px, 2vw, 26px);
    padding: clamp(18px, 2.4vw, 26px) 0;
    border-bottom: 1px solid var(--lx-line);
    align-items: start;
}
.lx-line-img {
    width: 92px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--lx-cream);
}
.lx-line-name {
    display: block;
    font-family: var(--lx-serif);
    font-size: 16px;
    color: var(--lx-ink);
    text-decoration: none;
    line-height: 1.3;
}
.lx-line-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.lx-line-variant,
.lx-line-unit {
    margin: 7px 0 0;
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--lx-muted);
}
.lx-line-tools { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.lx-line-right { text-align: right; display: grid; gap: 10px; justify-items: end; }
.lx-line-total { font-size: 14px; letter-spacing: .02em; }

/* Sepette adet: JS'siz — artı/eksi doğrudan yeni adedi POST eder */
.lx-qty--form { display: inline-flex; align-items: center; }
.lx-qty--form .lx-qty-val {
    min-width: 44px;
    text-align: center;
    font-size: 13px;
    color: var(--lx-ink);
}

/* ---------- Özet (yapışkan) ---------- */

.lx-summary {
    position: sticky;
    top: var(--lx-stick-top);
    background: var(--lx-cream);
    padding: clamp(22px, 2.6vw, 32px);
}
.lx-summary h2 {
    margin: 0 0 20px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track-wide);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-sum-items { display: grid; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--lx-line); }
.lx-sum-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 12px;
    color: var(--lx-ink-soft);
}
.lx-sum-rows { display: grid; gap: 11px; padding: 18px 0; }
.lx-sum-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 12.5px;
    color: var(--lx-ink-soft);
}
.lx-sum-row--free span:last-child { color: var(--lx-gold-deep); }
.lx-sum-row--discount span:last-child { color: var(--lx-gold-deep); }
.lx-sum-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--lx-line);
    font-size: 15px;
}
.lx-sum-total strong { font-weight: 500; }
.lx-summary .lx-btn { margin-top: 20px; }
.lx-sum-note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--lx-muted);
}

/* ---------- Seçim kartları (adres / ödeme) ---------- */

.lx-step + .lx-step { margin-top: clamp(30px, 4vw, 48px); }
.lx-step-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--lx-line);
    margin-bottom: 18px;
}
.lx-step-num {
    font-size: 12px;
    letter-spacing: var(--lx-track);
    color: var(--lx-gold-deep);
}
.lx-step-head h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
}

.lx-choices { display: grid; gap: 10px; }
.lx-choice { position: relative; display: block; cursor: pointer; }
.lx-choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lx-choice-box {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--lx-line);
    transition: border-color .26s var(--lx-ease), background .26s var(--lx-ease);
}
.lx-choice input:hover + .lx-choice-box { border-color: var(--lx-ink-soft); }
.lx-choice input:checked + .lx-choice-box { border-color: var(--lx-ink); background: var(--lx-paper); }
.lx-choice-title {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.lx-choice-body { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.6; color: var(--lx-ink-soft); }

.lx-note-label {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-note {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--lx-line);
    background: var(--lx-paper);
    font-family: var(--lx-sans);
    font-size: 13px;
    color: var(--lx-ink);
    resize: vertical;
}
.lx-note:focus { border-color: var(--lx-ink); outline: none; }

/* ---------- Boş sepet ---------- */

.lx-shop-empty { text-align: center; padding: clamp(50px, 8vw, 96px) 0; }
.lx-shop-empty p { margin: 16px auto 0; max-width: 44ch; font-size: 13.5px; color: var(--lx-ink-soft); }
.lx-shop-empty .lx-btn { margin-top: 28px; }

/* ---------- Sipariş onayı ---------- */

.lx-receipt { max-width: 760px; margin: 0 auto; }
.lx-receipt-mark {
    width: 46px;
    height: 46px;
    margin: 0 auto clamp(18px, 2.4vw, 26px);
    border: 1px solid var(--lx-gold-deep);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--lx-gold-deep);
    font-size: 17px;
}
.lx-panel {
    border: 1px solid var(--lx-line);
    padding: clamp(22px, 3vw, 34px);
    margin-top: clamp(26px, 3.4vw, 40px);
}
.lx-panel h2 {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track-wide);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; margin: 0; }
.lx-dl dt {
    font-size: 12px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-dl dd { margin: 0; font-size: 12.5px; }

/* Kupon kutusu (sepet özeti — A12). Girdi .lx-field ile aynı çizgi dilinde;
   uygulanmış hâl tek satır: kod + Kaldır. */
.lx-kupon { margin: 14px 0 6px; }
.lx-kupon-form { display: flex; gap: 10px; align-items: flex-end; }
/* Girdi satırı doldurur; buton İÇERİĞİ kadar. `.lx .lx-btn` bazı kırılımlarda
   tam genişlik (width:100%) aldığı için flex satırında girdiyi sıfıra
   eziyordu (mobilde kutu görünmüyordu) — 0,3,0 özgüllükle sabitlenir. */
.lx .lx-kupon-form .lx-field { flex: 1 1 auto; min-width: 0; width: auto; }
.lx .lx-kupon-form .lx-field input { text-transform: uppercase; width: 100%; }
.lx .lx-kupon-form .lx-btn {
    flex: 0 0 auto; width: auto; min-width: 0; white-space: nowrap;
    margin-top: 0;      /* .lx-summary .lx-btn'in 20px üst boşluğunu iptal — girdiyle hizalı */
    padding: 0 22px;    /* kompakt satır: temel 40px yatay dolgu girdiye yer bırakmıyordu */
}
.lx-kupon-uygulanan {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; font-size: 13px; padding: 10px 0; border-top: 1px solid var(--lx-line);
}
/* Kupon kaldır: metin bağlantısı görünümü korunur ama dokunma alanı
   FINAL §17 asgari 44px'e çıkar (eskiden ~12-15px idi). */
.lx-kupon-uygulanan .lx-linkbtn,
.lx-kupon-ozet .lx-linkbtn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
}
/* Checkout özetindeki kupon satırı (kaldırma buraya taşındı) */
.lx-kupon-ozet {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap;
}
.lx-mini-indirim strong { color: var(--lx-gold-deep); }

@media (max-width: 900px) {
    .lx-shop-layout { grid-template-columns: 1fr; gap: 30px; }
    .lx-summary { position: static; }
}
@media (max-width: 600px) {
    .lx-line { grid-template-columns: 74px minmax(0, 1fr); }
    .lx-line-img { width: 74px; }
    .lx-line-right { grid-column: 1 / -1; justify-items: start; text-align: left; }
}

/* ==========================================================================
   HESAP (giriş / üyelik / profil) + İÇERİK SAYFALARI
   Dar merkezî kolon, yalnızca alt çizgili alanlar, kutu yok.
   .lx-field YALNIZCA burada tanımlıdır (ürün detay .lx-pdp-group kullanır).
   ========================================================================== */

.lx-auth {
    max-width: 470px;
    margin: 0 auto;
    padding: clamp(30px, 5vw, 70px) clamp(16px, 4vw, 30px) clamp(60px, 8vw, 110px);
}
.lx-auth-head { text-align: center; margin-bottom: clamp(28px, 3.6vw, 44px); }
.lx-auth-head h1 { margin: 12px 0 0; }
.lx-auth-head p {
    margin: 14px auto 0;
    max-width: 42ch;
    font-size: 13px;
    color: var(--lx-ink-soft);
}

.lx-form { display: grid; gap: 20px; }
.lx-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.lx-field { display: block; }
.lx-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
/* Özgüllük: global `.lx input[type=…]` kuralı (0,2,1) bu bloğu yeniyordu —
   `[type]` ile (0,3,1)'e çıkarıp alt çizgili tasarımın uygulanmasını garantiliyoruz */
.lx .lx-field input[type],
.lx .lx-field input,
.lx .lx-field select {
    width: 100%;
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid var(--lx-line);
    border-radius: 0;
    background: transparent;
    font-family: var(--lx-sans);
    font-size: 14px;
    color: var(--lx-ink);
    transition: border-color .26s var(--lx-ease);
}
.lx-field input:focus,
.lx-field select:focus { border-bottom-color: var(--lx-ink); outline: none; }
.lx-field input::placeholder { color: var(--lx-muted); }
.lx-field input.input-validation-error { border-bottom-color: var(--lx-error); }

.lx-field-msg,
.lx-form .field-validation-error {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    color: var(--lx-error);
}

/* Onay kutuları — sola yaslı, aynı hizada */
.lx-check {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: start;
    gap: 11px;
    text-align: left;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--lx-ink-soft);
    cursor: pointer;
}
.lx-check input[type=checkbox] {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--lx-ink);
    flex: none;
}
.lx-check a { color: var(--lx-ink); }
.lx-check .field-validation-error { grid-column: 2; }

.lx-validation:not(:empty) {
    padding: 13px 16px;
    border-left: 2px solid var(--lx-error);
    background: var(--lx-cream);
    font-size: 12.5px;
    color: var(--lx-error);
}
.lx-validation ul { margin: 0; padding-left: 16px; }

.lx-auth-foot {
    margin-top: clamp(24px, 3vw, 34px);
    padding-top: 20px;
    border-top: 1px solid var(--lx-line);
    text-align: center;
    font-size: 12.5px;
    color: var(--lx-ink-soft);
}
.lx-auth-foot a { color: var(--lx-ink); }
.lx-fine-print {
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--lx-muted);
    text-align: left;
}

/* ---------- Profil ---------- */

.lx-account {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(18px, 2.4vw, 30px) clamp(16px, 4vw, 60px) clamp(60px, 8vw, 110px);
}
.lx-account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(18px, 2.4vw, 30px);
    margin-top: clamp(26px, 3.4vw, 40px);
}

/* ---------- İçerik / makale sayfaları ---------- */

.lx-article {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(24px, 3.4vw, 44px) clamp(16px, 4vw, 30px) clamp(60px, 8vw, 110px);
}
.lx-article-head { text-align: center; padding-bottom: clamp(26px, 3.4vw, 42px); }
.lx-article-head .lx-breadcrumb { justify-content: center; }
.lx-article-head h1 { margin: 14px 0 0; }
.lx-article-rule {
    width: 46px;
    height: 1px;
    background: var(--lx-gold-deep);
    margin: clamp(22px, 3vw, 32px) auto 0;
}

/* Uzun metin ritmi — tek sahip */
.lx-prose { font-size: 14.5px; line-height: 1.85; color: var(--lx-ink-soft); }
.lx-prose > * + * { margin-top: 1.1em; }
.lx-prose h2,
.lx-prose h3 {
    margin-top: 1.9em;
    font-family: var(--lx-serif);
    font-weight: 400;
    color: var(--lx-ink);
    line-height: 1.25;
}
.lx-prose h2 { font-size: clamp(20px, 2vw, 26px); }
.lx-prose h3 { font-size: clamp(16px, 1.6vw, 19px); }
.lx-prose a { color: var(--lx-ink); text-underline-offset: 3px; }
.lx-prose ul,
.lx-prose ol { padding-left: 20px; }
.lx-prose li + li { margin-top: .5em; }
.lx-prose blockquote {
    margin-inline: 0;
    padding-left: 20px;
    border-left: 1px solid var(--lx-gold-deep);
    font-family: var(--lx-serif);
    font-size: 17px;
    color: var(--lx-ink);
}
.lx-prose img { max-width: 100%; height: auto; }
.lx-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.lx-prose th,
.lx-prose td { padding: 11px 12px; border-bottom: 1px solid var(--lx-line); text-align: left; font-size: 13px; }
.lx-prose th { font-size: 12px; letter-spacing: var(--lx-track); text-transform: uppercase; color: var(--lx-muted); }

/* ---------- Hata / erişim sayfaları ---------- */

.lx-notice {
    max-width: 620px;
    margin: 0 auto;
    padding: clamp(56px, 9vw, 130px) clamp(16px, 4vw, 30px);
    text-align: center;
}
.lx-notice p { margin: 16px auto 0; max-width: 46ch; font-size: 13.5px; color: var(--lx-ink-soft); }
.lx-notice-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.lx-notice-code {
    font-family: var(--lx-serif);
    font-size: clamp(48px, 8vw, 86px);
    line-height: 1;
    color: var(--lx-sand);
}

@media (max-width: 520px) {
    .lx-form-row { grid-template-columns: 1fr; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
    /* Tercih "az hareket" — hareketsizlik değil. Kayma, zum ve döndürme gibi
       vestibüler tetikleyiciler kaldırılır; SAF OPAKLIK geçişleri (fade)
       korunur çünkü ekranda hareket eden bir nesne yoktur ve arayüz dilinin
       temelini oluşturur. */
    .lx *, .lx *::before, .lx *::after {
        transition-property: opacity, visibility, color, background-color,
                             border-color, box-shadow, outline-color !important;
        transition-duration: var(--lx-fade) !important;
        animation-duration: .001ms !important;
    }

    /* Yalnızca fade animasyonu kullanan bileşenler çalışmaya devam eder */
    .lx .lx-topbar.is-stuck,
    .lx details[open] > .lx-disc-panel,
    .lx details[open] > .lx-acc-body { animation-duration: var(--lx-fade-slow) !important; }

    /* Ürün kartı çapraz geçişi kendi yumuşak süresini korur (saf opaklık) */
    .lx .product-card .card-shot { transition-duration: var(--lx-fade-card) !important; }

    /* Sayfa geçişi de saf fade — korunur */
    body.lx { animation-duration: var(--lx-page-in) !important; }
    body.lx.is-leaving { transition-duration: var(--lx-page-out) !important; }

    /* Bildirim perdesi kaymaz — saf fade ile belirir/kaybolur */
    .lx .lx-toast {
        transform: none !important;
        opacity: 0;
        transition-property: opacity !important;
        transition-duration: var(--lx-fade) !important;
    }
    .lx .lx-toast.is-open { opacity: 1; }

    /* Akordiyon çizgisi 1px'lik bir çizim — hareket sayılmaz, korunur */
    .lx .lx-acc::after {
        transition-property: width !important;
        transition-duration: .8s !important;
    }

    /* Hover zum / kayma tamamen kapalı */
    .lx .product-card:hover .card-image img:not(.card-shot),
    .lx .lx-collection:hover img,
    .lx .lx-hero-media img { transform: none !important; }
}


/* ==========================================================================
   GUCCI TEMASI — gucci.com kategori ve ürün sayfalarından ölçülen değerler.
   Kategori: 12 sütunlu ızgarada 4'lü kart, kartlar arası yalnız 1px, kenardan
   kenara; kart görseli 3:4 alan, #fbfbfb zemin, ürün kırpılmadan ortada;
   alt bilgi 12px, harf aralığı -0.03em, dolgu 12/12/56.
   Ürün: ad 16px ince, fiyat 12px, sepet düğmesi siyah 48px.
   ========================================================================== */

/* ---------- Kategori / arama ızgarası ---------- */
.lx-plp-body:has(> .lx-grid) {
    max-width: none;
    padding-inline: 0;
}
.lx-plp-body > .lx-grid,
.lx-plp-body .lx-grid#lxPlpGrid {
    gap: 0 1px;
    background: #fff;
}
.lx-plp-body .lx-grid .product-card .card-image {
    background: var(--lx-shot-bg);
}
/* Ürün kırpılmaz, 3:4 alanın ortasında durur (Gucci: kare görsel 3:4 kutuda) */
.lx-plp-body .lx-grid .product-card .card-image img,
.lx-plp-body .lx-grid .product-card .card-image.has-gallery .card-shot {
    object-fit: contain;
}
.lx-plp-body .lx-grid .product-card .card-body {
    padding: 12px 12px clamp(28px, 4vw, 56px);
}
.lx-plp-body .lx-grid .product-card .title {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -.03em;
}
.lx-plp-body .lx-grid .product-card .price { gap: 8px; }
.lx-plp-body .lx-grid .product-card .price-now {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: -.03em;
}
.lx-plp-body .lx-grid .product-card .price-old { font-size: 12px; letter-spacing: -.03em; }
.lx-plp-body .lx-grid .product-card .card-renkler { margin: 6px 0 0; }
.lx-plp-body .lx-grid .product-card .badge { top: 12px; left: 12px; font-size: 11px; letter-spacing: .02em; }
.lx-plp-body .lx-grid .product-card .badge-sale { left: auto; right: 12px; }

/* ---------- Ürün sayfası künyesi ---------- */
.lx-pdp-name {
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: -.04em;
}
.lx-pdp-price {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -.03em;
}
.lx-pdp-price del { font-size: 12px; }
.lx-buy-btn {
    height: 48px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}
.lx-pdp-quick-name,
.lx-pdp-quick-price {
    font-size: 12px;
    letter-spacing: -.03em;
}
@media (min-width: 1024px) {
    .lx-pdp-below { grid-template-columns: minmax(0, 1fr) 432px; }
}
/* Küçük resim şeridi yalnız masaüstünde (mobilde kaydırma + oklar yeterli) */
@media (max-width: 1023px) { .lx-pdp-thumbs { display: none; } }
/* Gucci ürün sayfasında görsellerin üstünde/altında yol çizgisi yok */
@media (min-width: 1024px) { .lx-pdp-main > .lx-breadcrumb { display: none; } }

/* ---------- Kart hover galerisi — Gucci: çapraz solma, yuvarlak oklar, alt ilerleme çizgisi ---------- */
.lx .product-card .card-shot { transition: opacity .5s ease; will-change: opacity; }
.lx .product-card .card-image.has-gallery .card-shot,
.lx .product-card .card-image.has-gallery .card-shot.is-before {
    transform: none;
    opacity: 0;
    z-index: 1;
    /* etkin görsel tam örtünene dek eskisi altta görünür kalır (aradaki zemin parlamaz) */
    transition: opacity 0s linear .5s;
}
.lx .product-card .card-image.has-gallery .card-shot.is-active {
    transform: none;
    opacity: 1;
    z-index: 2;
    transition: opacity .5s ease;
}
.lx .product-card .card-image.is-reset.has-gallery .card-shot { transition: none; }
/* İlk görsel stüdyo çekimi (kırpılmaz); sonrakiler çerçeveyi doldurur */
.lx .product-card .card-image.has-gallery .card-shot:not([data-index="0"]) { object-fit: cover; }

/* Oklar: 24px yuvarlak, yarı saydam gri, kenardan 8px, dikey ortada */
.lx .product-card .card-nav {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(68, 73, 78, .4);
    color: #000;
    z-index: 4;
}
.lx .product-card .card-nav:hover { background: rgba(68, 73, 78, .55); }
.lx .product-card .card-nav svg { width: 12px; height: 12px; }
.lx .product-card .card-nav--prev { left: 8px; }
.lx .product-card .card-nav--next { right: 8px; }

/* Alt ilerleme çizgisi: 2px, görsel sayısı kadar parça, etkin parça beyaz */
.lx .product-card .card-dots {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    gap: 0;
    height: 2px;
    background: rgba(68, 73, 78, .4);
    z-index: 4;
}
.lx .product-card .card-dots span { flex: 1 1 0; width: auto; height: 2px; background: transparent; }
.lx .product-card .card-dots span.is-active { background: #fff; }

/* Kapalı menü çekmecesi tıklamayı/hover'ı YUTMASIN. İçindeki .lx-panel.is-current
   kendi `visibility: visible` değeriyle gizli kabı eziyor ve çekmece sağ kenarda
   440px'lik görünmez bir alan olarak duruyordu: ızgaradaki en sağ kartın üstünde
   fare hiç karta ulaşmıyor, oklar ve ilerleme çizgisi çıkmıyordu. */
.lx-drawer:not(.is-open),
.lx-drawer:not(.is-open) * { pointer-events: none; }
.lx-drawer:not(.is-open) .lx-panel { visibility: hidden; }

/* ==========================================================================
   ÜST ÇUBUK — Gucci düzeni: solda "+ İletişim", ortada logo, sağda
   sepet · hesap · ara ikonları ve yanında hamburger + MENÜ.
   ========================================================================== */
.lx-contact {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 2px;
    margin-block: -14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--lx-ink);
    text-decoration: none;
    transition: opacity .3s var(--lx-ease);
}
.lx-contact:hover { opacity: .6; }
/* "+" işareti */
.lx-contact-plus { position: relative; width: 11px; height: 11px; flex: none; }
.lx-contact-plus::before,
.lx-contact-plus::after { content: ""; position: absolute; background: currentColor; }
.lx-contact-plus::before { left: 0; right: 0; top: 5px; height: 1px; }
.lx-contact-plus::after { top: 0; bottom: 0; left: 5px; width: 1px; }

.lx-actions { gap: clamp(16px, 1.9vw, 28px); }
.lx-actions .lx-menu-btn { justify-self: auto; padding: 14px 2px; margin-block: -14px; font-size: 12px; letter-spacing: -.02em; }
.lx-ico {
    position: relative;
    display: inline-grid;
    place-items: center;
    line-height: 0;
}
.lx-actions a.lx-ico,
.lx-actions button.lx-ico { padding: 12px 2px; margin-block: -12px; }
.lx-ico svg { width: 20px; height: 20px; display: block; }
/* Sepet sayısı: ikonun sağ üstünde küçük rakam, 0 iken gizli */
.lx-ico .lx-cart-count {
    position: absolute;
    top: 4px;
    right: -7px;
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}
.lx-ico .lx-cart-count::before,
.lx-ico .lx-cart-count::after { content: none; }
.lx-ico .lx-cart-count.is-zero { display: none; }

/* Anasayfada saydam üst çubukta beyaz gölge */
.lx-home .lx-topbar:not(.is-stuck) .lx-contact,
.lx-home .lx-topbar:not(.is-stuck) .lx-ico { color: #fff; filter: drop-shadow(0 1px 2px rgba(10, 8, 6, .5)); }

@media (max-width: 1024px) {
    /* Mobilde İletişim gizli (menüde var); sepet/ara/menü ikonları kalır */
    .lx-contact { display: none; }
    .lx-header-inner { grid-template-columns: 1fr auto 1fr; }
    .lx-actions { gap: 14px; }
    .lx-actions .lx-menu-btn span:last-child { display: none; }
}

/* ==========================================================================
   FİLTRELE VE SIRALA — Gucci: şeritte solda "N ürün · Önerilen sıralı",
   sağda tek düğme; tıklayınca sağdan açılan panel.
   ========================================================================== */
.lx-plp-count--bar { margin: 0; font-size: 12px; letter-spacing: -.02em; text-transform: none; color: var(--lx-ink); }
.lx-plp-count--bar em { font-style: normal; text-decoration: underline; text-underline-offset: 3px; }
.lx-fbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 6px 0;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--lx-ink);
    cursor: pointer;
    transition: opacity .3s var(--lx-ease);
}
.lx-fbtn:hover { opacity: .6; }
.lx-fbtn svg { width: 18px; height: 18px; display: block; }
.lx-fbtn span { text-decoration: underline; text-underline-offset: 3px; }

.lx-fbackdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--lx-z-drawer) - 1);
    background: rgba(17, 17, 17, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--lx-fade) var(--lx-ease), visibility var(--lx-fade);
}
.lx-fbackdrop.is-open { opacity: 1; visibility: visible; }

.lx-fdrawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 92vw);
    z-index: var(--lx-z-drawer);
    display: flex;
    flex-direction: column;
    background: var(--lx-paper);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), visibility .45s;
}
.lx-fdrawer.is-open { transform: translateX(0); visibility: visible; }
.lx-fdrawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px clamp(22px, 3vw, 36px);
    border-bottom: 1px solid var(--lx-line);
}
.lx-fdrawer-title { font-size: 13px; font-weight: 500; letter-spacing: var(--lx-track); text-transform: uppercase; }
.lx-fdrawer-close { background: none; border: 0; padding: 6px 0; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: var(--lx-ink); }
.lx-fdrawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px clamp(22px, 3vw, 36px) 24px; }
/* Tek sütun, bölümler ince çizgiyle ayrılır */
.lx-fdrawer .lx-filtercols { display: block; max-width: none; margin: 0; }
.lx-fdrawer .lx-filtercol { padding: 22px 0; border-bottom: 1px solid var(--lx-line); }
.lx-fdrawer .lx-filtercol:last-child { border-bottom: 0; }
.lx-fdrawer-foot { padding: 16px clamp(22px, 3vw, 36px) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--lx-line); }
.lx-fdrawer-foot .lx-btn { width: 100%; }

/* Gucci: her görsel kendi kutusunda büyür (tıkla → 2x, fareyle gez, tekrar tıkla → eski hâli) */
@media (min-width: 1024px) {
    .lx-pdp-cell { overflow: hidden; }
    .lx-pdp-shot { transition: transform .4s cubic-bezier(.22, .61, .36, 1); transform-origin: 50% 50%; }
    .lx-pdp-cell.is-zoomed { cursor: zoom-out; }
    .lx-pdp-cell.is-zoomed .lx-pdp-shot { transform: scale(2); }
}

/* ==========================================================================
   ÜRÜN SAYFASI ŞERİTLERİ — Gucci "You may also like" / son baktıklarınız:
   ortada küçük başlık, kartlar kenardan kenara (1px boşluk), yatay kaydırma + oklar.
   ========================================================================== */
.lx-pdp-related { max-width: none; padding: clamp(36px, 4vw, 56px) 0 clamp(20px, 3vw, 40px); }
.lx-pdp-recent { border-top: 0; padding-top: 0; padding-bottom: clamp(60px, 8vw, 110px); }
.lx-pdp-recent[hidden] { display: none; }
.lx-pdp-rail-title {
    margin: 0 0 clamp(18px, 2.4vw, 32px);
    text-align: center;
    font-family: var(--lx-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-ink);
}
.lx-prail-wrap { position: relative; }
.lx-prail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 50%;          /* telefon: 2 kart */
    gap: 0 1px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background: #fff;
}
.lx-prail::-webkit-scrollbar { display: none; }
.lx-prail > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 768px)  { .lx-prail { grid-auto-columns: calc(100% / 3); } }
@media (min-width: 1024px) { .lx-prail { grid-auto-columns: 25%; } }
@media (min-width: 1500px) { .lx-prail { grid-auto-columns: 20%; } }
.lx-prail .product-card .card-body { padding: 12px 12px 28px; }
.lx-prail .product-card .title { margin: 0; font-size: 12px; line-height: 16px; letter-spacing: -.03em; }
.lx-prail .product-card .price-now { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -.03em; }
.lx-prail .product-card .card-image { background: var(--lx-shot-bg); }
.lx-prail .product-card .card-image img { object-fit: contain; }
.lx-prail .product-card .card-image.has-gallery .card-shot:not([data-index="0"]) { object-fit: cover; }

.lx-prail-nav {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 5;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, .92);
    color: var(--lx-ink);
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s var(--lx-ease);
}
.lx-prail-nav svg { width: 16px; height: 16px; display: block; }
.lx-prail-wrap:hover .lx-prail-nav { opacity: 1; }
.lx-prail-nav[disabled] { opacity: 0 !important; pointer-events: none; }
.lx-prail-nav--prev { left: 12px; }
.lx-prail-nav--next { right: 12px; }
@media (hover: none) { .lx-prail-nav { opacity: 1; } }

/* Görsel hover: üzerine gelince yavaşça büyür, ayrılınca küçülür (Gucci benzeri).
   Çerçeve overflow:hidden olduğundan taşma görünmez. Ürün kartları hariç (onlarda ikinci görsel geçişi var). */
.lx-cat img,
.lx-editorial-media img,
.lx-collection img {
    /* küçülme (varsayılan durum): büyümeden 1,7 kat daha yumuşak/uzun */
    transition: transform 1.53s ease-in-out, opacity var(--lx-fade-slow) var(--lx-ease-soft);
    will-change: transform;
}
.lx-collection { overflow: hidden; }
/* "is-zoom" sınıfını luxe.js verir: fare girince eklenir, büyüdükten ~1 sn sonra
   kendiliğinden kalkar (görsel hemen küçülür), fare çıkınca da kalkar. */
.lx-cat.is-zoom img,
.lx-editorial-media.is-zoom img,
.lx-collection.is-zoom img { transform: scale(1.07); transition-duration: .9s, var(--lx-fade-slow); }
/* Sitenin genel "az hareket" kuralı geçiş türlerini sadeleştirir; bu zum efekti özellikle
   istendiği için (yavaş, %7) o modda da çalışır. Geri almak için bu bloğu silin. */
@media (prefers-reduced-motion: reduce) {
    .lx .lx-cat img, .lx .lx-editorial-media img, .lx .lx-collection img {
        transition-property: transform, opacity !important;
        transition-duration: 1.53s !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .lx .lx-cat.is-zoom img, .lx .lx-editorial-media.is-zoom img, .lx .lx-collection.is-zoom img { transition-duration: .9s !important; }
}

/* ==========================================================================
   Mobil iyileştirmeler (telefon müşterileri çoğunlukta)
   - dokunma alanları ~44px'e çıkarıldı (görünüm aynı kalır)
   - kayıt bandı telefonda kompakt; ekranın yarısını kaplamaz
   ========================================================================== */
@media (max-width: 760px) {
    .lx-actions a.lx-ico,
    .lx-actions button.lx-ico { padding: 12px 9px; margin-inline: -5px; }
    .lx-actions .lx-menu-btn { padding: 14px 9px; margin-inline: -5px; }
    .lx-subnav a { display: inline-flex; align-items: center; min-height: 40px; }
    .lx-fbtn { padding: 14px 0; margin-block: -8px; }
    .lx .product-card .card-nav::before { content: ""; position: absolute; inset: -10px; }
    .lx-footer ul { gap: 0; }
    .lx-footer li a { display: inline-block; padding: 11px 0; }

    .lx-signup-inner { padding: 16px 52px 16px 16px; gap: 10px; }
    .lx-signup-copy p { display: none; }
    .lx-signup-copy h2 { font-size: 11px; line-height: 1.5; }
    .lx-signup-field span { display: none; }
}

/* iOS Safari, 16px'ten küçük alanlara odaklanınca sayfayı yakınlaştırır; telefonda 16px */
@media (max-width: 760px) {
    .lx input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
    .lx select,
    .lx textarea { font-size: 16px; }
}
/* çift dokunuşla yakınlaştırma gecikmesini ve gri dokunma parlamasını kaldır */
.lx a, .lx button, .lx input, .lx select, .lx label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }