/* ==========================================================================
   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 {
    --lx-ink: #14100c;
    --lx-ink-soft: #4a423a;
    --lx-muted: #8a8178;
    --lx-line: #e6e1d8;
    --lx-paper: #ffffff;
    --lx-cream: #f7f4ef;
    --lx-sand: #efe9e0;
    --lx-gold: #b18d4f;
    --lx-gold-deep: #8b6f3d;

    --lx-serif: "Didot", "Bodoni MT", "Playfair Display", "Times New Roman", Georgia, serif;
    --lx-sans: "Helvetica Neue", "Inter", "Segoe UI", Arial, sans-serif;

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

    --lx-header: 67px; /* 96px'ten %30 inceltildi */
    --lx-gutter: clamp(20px, 5vw, 76px);
    --lx-section: clamp(64px, 9vw, 132px);

    --lx-ease: cubic-bezier(.22, .61, .36, 1);

    /* Beliriş (fade) süreleri — TEK ayar noktası.
       Hepsini birlikte hızlandırmak/yavaşlatmak için yalnızca bu üç değeri değiştir. */
    --lx-fade-slow: 0.85s;   /* üst bar, büyük yüzeyler */
    --lx-fade: 0.68s;        /* arama katmanı, menü paneli, perde */
    --lx-fade-quick: 0.52s;  /* küçük paneller, kart eylemleri, akordiyon */
    --lx-fade-card: 1.15s;   /* ürün kartı görsel geçişi — yumuşak ve tatlı */
    --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.65;
    -webkit-font-smoothing: antialiased;
}

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

.lx-container {
    width: 100%;
    max-width: 1560px;
    margin-inline: auto;
    padding-inline: var(--lx-gutter);
}

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

/* Etiket / eyebrow */
.lx-eyebrow {
    font-size: 10px;
    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;
}
.lx-display--xl { font-size: clamp(38px, 6.4vw, 92px); }
.lx-display--lg { font-size: clamp(30px, 4vw, 56px); }
.lx-display--md { font-size: clamp(24px, 2.6vw, 38px); }

/* Alt çizgili metin bağlantısı — lüks CTA dili */
.lx-link {
    display: inline-block;
    font-size: 11px;
    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: 52px;
    padding: 0 40px;
    border: 1px solid var(--lx-ink);
    background: var(--lx-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .35s var(--lx-ease), color .35s var(--lx-ease), border-color .35s 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: 10px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    text-align: center;
    padding: 11px 16px;
    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: 900;
    background: var(--lx-paper);
    border-bottom: 1px solid var(--lx-line);
    transition: background-color var(--lx-fade-slow) var(--lx-ease),
                color var(--lx-fade-slow) var(--lx-ease),
                border-color var(--lx-fade-slow) var(--lx-ease),
                box-shadow var(--lx-fade-slow) 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(20,16,12,.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: 950; /* çekmece/aramanın (1000) altında, üst barın (900) üstünde */
    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(20, 16, 12, .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;
    padding: 0;
    font: inherit;
    color: var(--lx-ink);
    font-size: 10px;
    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;
    padding: 0;
    font-family: var(--lx-sans);
    font-size: 10px;
    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: 17px 0;
    color: var(--lx-ink);
    font-size: 11px;
    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; padding: 0; cursor: pointer;
    font-family: var(--lx-sans);
    font-size: 10px; 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: 10px;
    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;
}
.lx-search input::placeholder { color: var(--lx-muted); }
.lx-search button[type=submit] {
    flex: none;
    background: none; border: 0; cursor: pointer;
    font-family: var(--lx-sans);
    font-size: 10px; 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: 10px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-search-trend a {
    font-size: 11.5px;
    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: 10px;
    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: 1000;
    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: 10px;
    font-weight: 500;
    letter-spacing: var(--lx-track-wide);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-drawer-close {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--lx-sans);
    font-size: 10px; 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: 10.5px;
    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;
}
.lx-drawer .lx-sub { padding: 0 0 14px 14px; display: grid; gap: 10px; }
.lx-drawer .lx-sub a { color: var(--lx-ink-soft); font-size: 13px; text-decoration: none; }
.lx-backdrop {
    position: fixed; inset: 0; z-index: 990;
    background: rgba(20,16,12,.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 {
    width: 26px; height: 2px;
    border: 0; padding: 0;
    background: rgba(255,255,255,.42);
    cursor: pointer;
    transition: background .3s var(--lx-ease);
}
.lx-hero-dots button.is-active { background: #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: #fbfaf8;   /* gorsel dolgu rengiyle 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 üst üste; etkin olan opaklıkla belirir */
.lx .product-card .card-shot {
    /* uzun ve yumuşak çapraz geçiş */
    transition: opacity var(--lx-fade-card) var(--lx-ease-soft);
}
.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;
    opacity: 0;
}
.lx .product-card .card-image.has-gallery .card-shot.is-active { opacity: 1; }

/* 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: 34px;
    height: 34px;
    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(20,16,12,.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: 9px;
    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); }

.lx .product-card .card-body {
    padding: 18px 2px 0;
    text-align: left;
}
.lx .product-card .brand {
    font-size: 9.5px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
    margin-bottom: 7px;
}
.lx .product-card .title {
    margin: 0 0 9px;
    font-family: var(--lx-sans);
    font-size: 13px;
    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: 11.5px; 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: 10px;
    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ı ---------- */

.lx-grid,
.lx .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr));
    gap: clamp(16px, 2vw, 34px) clamp(12px, 1.6vw, 26px);
}

/* ==========================================================================
   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: 11px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    cursor: pointer;
}
.lx-fine { font-size: 11px; color: var(--lx-muted); max-width: 46ch; margin: 0 auto; }

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

.lx-footer {
    background: var(--lx-paper);
    border-top: 1px solid var(--lx-line);
    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: 10px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    margin: 0 0 20px;
    color: var(--lx-ink);
}
.lx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lx-footer a {
    color: var(--lx-ink-soft);
    font-size: 13px;
    text-decoration: none;
    transition: color .28s var(--lx-ease);
}
.lx-footer a:hover { color: var(--lx-ink); }
.lx-footer-about img { height: 22px; width: auto; margin-bottom: 18px; }
.lx-footer-about p { margin: 0; color: var(--lx-ink-soft); font-size: 13px; max-width: 34ch; }

.lx-footer-bottom {
    border-top: 1px solid var(--lx-line);
    padding: 24px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--lx-muted);
}

/* ==========================================================================
   İÇ 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: 10.5px;
    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;
    padding: 13px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--lx-ink);
    transition: border-color .3s var(--lx-ease);
}
.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: 52px; } /* 74px'ten %30 inceltildi */
    .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 sırası (z-index merdiveni) — yeni bileşenler buna uymalı:
     çekmece / arama katmanı ... 1000
     çekmece perdesi ............ 990
     üst bar (.lx-topbar) ....... 900
     mega menü .................. 800
     sayfa içi yapışkanlar ...... 700  (üst barın ALTINDA kalır)
     normal içerik .............. auto
   ========================================================================== */

:root {
    --lx-z-overlay: 1000;
    --lx-z-backdrop: 990;
    --lx-z-topbar: 900;
    --lx-z-mega: 800;
    --lx-z-sticky: 700;
    /* 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: 10px;
    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: #8e2b2b; }
.lx main .alert-success { border-left-color: var(--lx-gold-deep); }

/* ---------- 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: 10px;
    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: 38px;
    height: 40px;
    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: 40px;
    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: 11.5px;
    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: #fbfaf8;   /* gorsellerin dolgu rengiyle 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ı. */
}

/* ---------- 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(20,16,12,.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-mega);
    background: var(--lx-paper);
    border-top: 1px solid var(--lx-line);
    box-shadow: 0 -12px 40px rgba(20,16,12,.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: 10.5px !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: 10px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx .lx-signup-field input[type],
.lx-signup-field input {
    width: 100%;
    padding: 9px 0;
    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: 44px;
    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: 10.5px;
    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: 42px;
    height: 42px;
    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: 11px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
}

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

.lx-pdp-below {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(30px, 4vw, 56px) clamp(16px, 4vw, 64px) clamp(60px, 8vw, 110px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: clamp(30px, 5vw, 96px);
    align-items: start;
}

.lx-pdp-flag {
    margin: 0 0 10px;
    font-size: 10px;
    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: 11.5px;
    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: 11px;
    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: 11.5px;
    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: 10px;
    font-weight: 500;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
}
.lx-buy-service p {
    margin: 0;
    font-size: 11.5px;
    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: 10px;
    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: 11.5px;
    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: 10px;
    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: 11.5px;
    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(20,16,12,.05) 6px 7px);
    cursor: not-allowed;
}

.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: 10.5px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-pdp-stock--low { color: #8e2b2b; }

/* ---------- 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(20,16,12,.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);
}
.lx-cat:hover img { opacity: 1; }

/* 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:hover .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: 10.5px;
    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;
    transition: transform 1.2s 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: 11.5px;
    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: 10px;
    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: 36px; height: 36px; }
    .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; }

/* ==========================================================================
   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: 10px;
    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: 10.5px;
    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(20,16,12,.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: 10px;
    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: 10.5px;
    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: 11px;
    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: 10px;
    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: 11px;
    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: 10px;
    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: 10.5px;
    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: 10px;
    letter-spacing: var(--lx-track);
    color: var(--lx-gold-deep);
}
.lx-step-head h2 {
    margin: 0;
    font-size: 11px;
    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: 10px;
    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: 10px;
    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: 10px;
    letter-spacing: var(--lx-track);
    text-transform: uppercase;
    color: var(--lx-muted);
}
.lx-dl dd { margin: 0; font-size: 12.5px; }

@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: 10px;
    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: #8e2b2b; }

.lx-field-msg,
.lx-form .field-validation-error {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    color: #8e2b2b;
}

/* 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 #8e2b2b;
    background: var(--lx-cream);
    font-size: 12.5px;
    color: #8e2b2b;
}
.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: 10.5px;
    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: 10px; 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,
    .lx .lx-collection:hover img,
    .lx .lx-hero-media img { transform: none !important; }
}