/*
 * USL Home — marka tasarım sistemi.
 * style.css'in ÜZERİNE yüklenir; onaylanan tasarım önerisinin (dusty rose-beige zemin,
 * derin bordo vurgu, serif+sans tipografi, kumaş-swatch kartlar) gerçek site üzerinde
 * birebir uygulanmış hâlidir.
 */

:root {
    --ground: #f3eae4;
    --ground-raised: #ece0d8;
    --ink: #2b1a1f;
    --ink-soft: #6b5a56;
    --accent: #6b2740;
    --accent-soft: #c98ca0;
    --accent-tint: #f0dde3;
    --sage: #5f7350;
    --sage-tint: #e4e9db;
    --sand: #d9cabb;
    --line: #d9c8bd;
    --card: #faf5f1;
    --danger: #b3261e;
    --shadow: 0 18px 40px -24px rgba(43, 26, 31, 0.35);
    --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Noto Serif', serif;
    --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Fiyat rakamları için sıkışık aile: web fontu gelmezse sistemdeki dar yazı tiplerine düşer. */
    --nums-condensed: 'Roboto Condensed', 'Arial Narrow', 'Helvetica Neue Condensed', 'Inter', -apple-system, 'Segoe UI', sans-serif;

    /* Önceki reskin geçişinde kullanılan takma adlar (checkout/sipariş sayfaları bunları referans alıyor) */
    --usl-ground: var(--ground);
    --usl-surface: var(--card);
    --usl-surface-raised: #ffffff;
    --usl-ink: var(--ink);
    --usl-ink-soft: var(--ink-soft);
    --usl-ink-faint: #a8938b;
    --usl-accent: var(--accent);
    --usl-accent-dark: #4a1a2c;
    --usl-accent-soft: var(--accent-tint);
    --usl-gold: #a9824f;
    --usl-border: var(--line);
    --usl-success: var(--sage);
    --usl-danger: var(--danger);
    --usl-font-display: var(--serif);
    --usl-font-body: var(--sans);
}

/* ── Temel ── */
body {
    font-family: var(--sans);
    background: var(--ground);
    color: var(--ink);
}
h1, h2, h3, .section-header h2 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.005em;
}
.nums { font-variant-numeric: tabular-nums; }

/* ── Kumaş swatch üreteci (gerçek ürün fotoğrafı olmayan yerlerde) ── */
.swatch {
    position: relative;
    background:
        linear-gradient(155deg, transparent 46%, rgba(0,0,0,0.06) 47%, transparent 54%),
        linear-gradient(var(--sw-a, var(--accent-tint)), var(--sw-b, var(--sand)));
    overflow: hidden;
}
.swatch::after {
    content: "";
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0 1px, transparent 1px 3px);
    opacity: 0.12;
    mix-blend-mode: overlay;
}

/* ================= HEADER ================= */
.site-header.brand-header {
    background: rgba(250, 245, 241, 0.7);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(217, 200, 189, 0.6);
    box-shadow: none;
    position: sticky; top: 0; z-index: 1000;
}
.brand-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: 1480px;
    margin-inline: auto;
    padding: 14px clamp(22px, 3vw, 52px);
    box-sizing: border-box;
}
.brand {
    font-family: var(--serif);
    font-size: 21px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex: 0 0 auto;
    line-height: 1;
}
.brand-logo-img { height: 48px; width: auto; display: block; }

/* Header altı ince güven / ödeme bandı */
.usl-trust-band {
    background: var(--tb-bg, #f3e6ea);
    color: var(--tb-fg, #6b2740);
    border-bottom: 1px solid rgba(107, 39, 64, 0.08);
}
.usl-trust-band-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 7px clamp(16px, 3vw, 52px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    box-sizing: border-box;
}
.usl-tb-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
}
.usl-tb-ship .usl-tb-ico {
    width: 16px; height: 16px; flex: none; opacity: 0.9;
}
.usl-tb-sep {
    width: 1px; height: 14px;
    background: currentColor; opacity: 0.22;
    flex: none;
}
.usl-tb-pay { gap: 10px; }
.usl-tb-logos,
.usl-ft-logos {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.usl-tb-logo,
.usl-ft-logo {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    flex: none;
}
.usl-tb-logo svg,
.usl-ft-logo svg {
    display: block;
    /* Yükseklik aşağıda tek elden verilir; buradaki auto onu ezmemeli. */
}
/* Tüm ödeme logoları AYNI yükseklikte durur; genişlik her rozetin kendi
   viewBox oranından hesaplanır. Tek tek width/height verildiğinde yükseklikler
   12–18px arasında dağılıyor ve bant düzensiz görünüyordu. */
.usl-tb-logo svg { height: 18px; width: auto; }
@media (min-width: 900px) {
    .usl-tb-pay { gap: 12px; }
    .usl-tb-logos { gap: 10px; }
}
@media (max-width: 640px) {
    .usl-trust-band-inner {
        padding: 6px 12px;
        gap: 6px 12px;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .usl-trust-band-inner::-webkit-scrollbar { display: none; }
    .usl-tb-item { font-size: 11px; }
    .usl-tb-pay { gap: 8px; }
    .usl-tb-logos { gap: 6px; flex-wrap: nowrap; }
    .usl-tb-logo svg { height: 16px; width: auto; }
}

.brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}
.brand-name,
.brand-tagline {
    display: block;
    max-width: min(32vw, 420px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand small {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.nav-primary {
    display: flex;
    gap: 26px;
    font-size: 13.5px;
    color: var(--ink-soft);
    flex: 1 1 auto;
    justify-content: center;
    flex-wrap: wrap;
}
.nav-primary a {
    text-decoration: none;
    color: inherit;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: border-color .2s, color .2s;
}
.nav-primary a:hover { color: var(--ink); border-color: var(--accent); }
.nav-toggle {
    display: none;
    background: none; border: 1px solid var(--line); border-radius: 8px;
    color: var(--ink); width: 38px; height: 38px; font-size: 15px;
}
.header-tools { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

.search-pill {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 13.5px;
    color: var(--ink-soft);
    min-width: 320px;
    background: var(--ground);
}
.search-pill:focus-within { border-color: var(--accent); }
.search-pill i { font-size: 13px; color: var(--ink-soft); }
.search-pill input {
    border: none; background: none; outline: none;
    font-family: var(--sans); font-size: 14px; color: var(--ink);
    width: 100%;
}
.search-pill input::placeholder { color: var(--ink-soft); overflow: visible; }

.icon-btn {
    background: none; border: none; color: var(--ink);
    padding: 4px; position: relative; font-size: 17px;
    display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: var(--accent); }
.icon-btn .badge {
    position: absolute; top: -4px; right: -6px;
    background: var(--accent); color: var(--card);
    font-size: 9px; min-width: 15px; height: 15px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; padding: 0 2px;
    font-family: var(--sans);
}
.header-account-wrap, .header-auth-wrap { position: relative; display: flex; }

/* Giris/hesap acilir panelleri — yeni paletle */
.login-popup { border-color: var(--line) !important; box-shadow: var(--shadow) !important; }
.login-popup-title { color: var(--ink-soft) !important; }
.login-popup-btn-primary { background: var(--accent) !important; }
.login-popup-btn-primary:hover { background: var(--usl-accent-dark) !important; }
.login-popup-btn-outline { border-color: var(--line) !important; color: var(--ink) !important; }
.login-popup-btn-outline:hover { background: var(--accent-tint) !important; color: var(--accent) !important; }
.account-dropdown {
    background: var(--card) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow) !important;
}
.account-dropdown-header {
    background: var(--ground) !important;
    border-bottom: 1px solid var(--line) !important;
}
.account-dropdown-name { color: var(--ink) !important; }
.account-dropdown-email { color: var(--ink-soft) !important; }
.account-dropdown-menu { background: var(--card) !important; }
.account-dropdown-link { color: var(--ink) !important; }
.account-dropdown-link i { color: var(--ink-soft) !important; }
.account-dropdown-link:hover { background: var(--accent-tint) !important; color: var(--accent) !important; }
.account-dropdown-link:hover i { color: var(--accent) !important; }
.account-dropdown-divider { background: var(--line) !important; border-color: var(--line) !important; }

/* ================= HERO ================= */
.hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    border-bottom: 1px solid var(--line);
}
.hero-copy {
    padding: 6vw 5vw;
    display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.eyebrow {
    font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 600;
}
.hero-copy h1 {
    font-size: clamp(32px, 4.2vw, 52px);
    line-height: 1.08;
    max-width: 13ch;
    color: var(--ink);
}
.hero-copy p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); max-width: 42ch; }
.cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-primary {
    background: var(--accent); color: var(--card); border: none;
    padding: 14px 26px; font-size: 13px; letter-spacing: 0.03em; border-radius: 2px;
    text-decoration: none; display: inline-block; font-family: var(--sans); font-weight: 600;
}
.btn-primary:hover { background: var(--usl-accent-dark); }
.btn-ghost {
    background: none; border: 1px solid var(--ink); color: var(--ink);
    padding: 13px 24px; font-size: 13px; border-radius: 2px; text-decoration: none;
    display: inline-block; font-family: var(--sans);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.stock-proof { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sage); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 3px var(--sage-tint); flex: none; }
.hero-visual { min-height: 420px; position: relative; overflow: hidden; }
.hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(243,234,228) 0%, rgba(243,234,228,0.75) 6%, rgba(243,234,228,0) 26%);
    pointer-events: none;
}

/* ================= TRUST STRIP ================= */
.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.trust-item { padding: 24px 5vw; display: flex; gap: 14px; align-items: flex-start; border-left: 1px solid var(--line); }
.trust-item:first-child { border-left: none; }
.trust-item svg { flex: none; margin-top: 2px; color: var(--accent); }
.trust-item h3 { font-size: 15px; margin: 0 0 4px; }
.trust-item p { margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }

/* ================= SECTION HEADS ================= */
.section { padding: 56px 0; }
/* Arkaplan ekrana tam otursun (edge-to-edge) — .container'in max-width'inden taşıp
   tam viewport genişliğine yayılır, içerik ise kendi kapsayıcısıyla hizalı kalır. */
.section--raised {
    background: var(--ground-raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.section--raised > * {
    max-width: 1480px; margin-left: auto; margin-right: auto;
    padding-left: clamp(22px, 3vw, 52px); padding-right: clamp(22px, 3vw, 52px); box-sizing: border-box;
}
/* Üst üste raised bölümlerde (ör. İndirim → Öne Çıkanlar) fazla boşluğu kıs */
.section--raised + .section--raised { padding-top: 28px; border-top: none; }
.section--featured { padding-top: 28px; padding-bottom: 40px; }
.section--featured .section-head {
    margin-bottom: 14px; padding-bottom: 12px;
}
.section-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 30px; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 16px;
}
.section-head h2 { font-size: 26px; }
/* Başlık + chip/badge satırı: web'de yan yana, chip'ler tek satırda */
.section-head--with-pills {
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px 18px;
}
.section-head--with-pills h2 {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
}
.section-head--with-pills .usl-pill-row {
    flex: 1 1 auto;
    justify-content: flex-end;
    margin-bottom: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    gap: 8px;
}
.section-head--with-pills .usl-pill-row::-webkit-scrollbar { display: none; }
@media (max-width: 760px) {
    .section-head--with-pills {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .section-head--with-pills .usl-pill-row {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ── kategori swatch kutucukları ── */
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.cat-tile {
    aspect-ratio: 3/4; border-radius: 16px; display: flex; align-items: flex-end;
    padding: 14px; text-decoration: none; color: var(--ink); border: 1px solid var(--line);
}
.cat-tile span { font-size: 12.5px; font-family: var(--serif); font-style: italic; }

/* ── ürün kartları (gerçek _product_card.php) — tek parça, modern kart görünümü ──
   Görsel + isim/fiyat alanı artık TEK bir yuvarlatılmış yüzeyde birleşiyor:
   dış kapsayıcı (.product-card-wrap) köşeleri yuvarlar ve taşmayı keser, görselin
   kendi köşeleri düz kalır — böylece görsel ile alt bilgi bloğu kesintisiz akar. */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 20px; }
.product-card-wrap {
    position: relative; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--line); background: var(--card);
    box-shadow: 0 1px 2px rgba(43,26,31,0.04);
    transition: box-shadow .2s ease, transform .2s ease;
}
.product-card-wrap:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.product-card { text-decoration: none; color: var(--ink); display: block; }
.product-card-img {
    aspect-ratio: 3/4; overflow: hidden; background: var(--card); position: relative;
}
.product-card-img > img {
    width: 100%; height: 100%; display: block; object-fit: cover; object-position: center;
}
.badge-stack { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.product-badge {
    font-size: 12px; padding: 4px 12px; border-radius: 4px; font-weight: 500;
    width: fit-content; background: #fff; color: #9C5D57; border: 1px solid #E8E8E8;
}
.badge-discount { background: #fff; color: #9C5D57; }
.badge-new-product { background: var(--ink); color: #fff; border-color: var(--ink); }
.product-card-body { padding: 12px 14px 16px; }
.product-card-rating { font-size: 11px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.product-card-rating .pcr-stars i { color: var(--usl-gold); font-size: 10px; }
.product-card-rating--empty .pcr-stars i { color: var(--line); }
.product-card-colors { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.product-card-name {
    font-family: var(--serif); font-weight: 400; font-size: 15px; line-height: 1.32; margin: 3px 0 6px; color: var(--ink);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 39.6px;
}
.product-card-price { font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; font-family: var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.product-card-price .price-old { text-decoration: line-through; color: var(--ink-soft); font-size: 12px; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.product-card-price .price-discounted { color: #9C5D57; }

/* ── "Yeni Gelenler" için sade kart varyantı: arkaplan/kenarlık/gölge yok,
   şeffaf; görsel üstte olduğu gibi altta da yuvarlatılmış (yüzen kart değil). ── */
.usl-cards-plain .product-card-wrap,
.usl-cards-plain .product-card,
.usl-cards-plain .product-card-body {
    background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
.usl-cards-plain .product-card-wrap:hover { box-shadow: none !important; transform: none !important; }
.usl-cards-plain .product-card-img { border-radius: 16px; background: transparent !important; }
.usl-cards-plain .product-card-body { padding: 10px 0 0 !important; }

/* ── Ürün resmi üzeri hızlı sepete ekle ikonu (tek varyantlı ürünlerde) ── */
.product-quick-add {
    position: absolute; bottom: 10px; right: 10px; z-index: 2;
    width: 22px; height: 22px; border: 0; padding: 0; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
}
.product-quick-add svg { width: 19px; height: 19px; }
.product-quick-add:disabled { opacity: 0.7; cursor: default; }
.product-fav-btn {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    background: var(--card); border: 1px solid var(--line); border-radius: 50%;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    color: var(--ink-soft);
}
.product-fav-btn:hover { color: var(--accent); border-color: var(--accent); }
.product-fav-btn.favorited i { color: var(--accent) !important; }
.product-fav-band,
.product-fav-band.band--view,
.hero-product-fav-band,
.hero-product-fav-band.band--view {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(107,90,86,0.85) 0%, rgba(107,90,86,0.55) 45%, rgba(107,90,86,0) 85%) !important;
    color: #fff; font-size: 10.5px;
    padding: 7px 34px 7px 10px; text-align: left;
}

/* ── koleksiyon blokları ── */
.collections { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.collection-block {
    min-height: 340px; border-radius: 18px; border: 1px solid var(--line);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 28px;
    text-decoration: none; color: var(--ink);
}
.collection-block .eyebrow { color: var(--card); opacity: 0.85; }
.collection-block h3 { color: var(--card); font-size: 26px; max-width: 16ch; }
.collection-block p.tag { color: var(--card); opacity: 0.85; font-size: 12.5px; margin-top: 6px; }

/* ── Instagram akışı ızgarası ── */
.proof-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.proof-tile { aspect-ratio: 1; display: block; position: relative; overflow: hidden; background: var(--card); }
.proof-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.usl-vh {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ================= FOOTER ================= */
.site-footer {
    background: var(--ink); color: #cbb9b4;
    border-top: none;
    padding: 44px 0 26px;
}
.site-footer .footer-grid {
    display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px;
    font-size: 12.5px;
}
.site-footer .brand { color: #fff; }
.site-footer .brand small { color: var(--accent-soft); }
.footer-desc { max-width: 32ch; color: #cbb9b4; }
.site-footer h5 { font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin: 0 0 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer a { text-decoration: none; color: #cbb9b4; }
.site-footer a:hover { color: var(--accent-soft); }
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a {
    width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.footer-payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-payments .usl-ft-logos { gap: 10px; justify-content: center; }
.footer-payments .usl-ft-logo svg {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}
.footer-payments .usl-ft-logo svg { height: 22px; width: auto; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 22px; padding-top: 18px; font-size: 11.5px; color: #a8938b; text-align: center; }
.footer-bottom .footer-company {
    margin: 0 0 10px;
    color: #cbb9b4;
    line-height: 1.55;
    font-size: 12px;
}
.footer-bottom .footer-company strong { color: #fff; font-weight: 600; }
.footer-bottom .footer-company a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom .footer-company a:hover { color: #fff; }
/* Yasal bağlantılar: ödeme kuruluşu ve yönetmelik, bunların her sayfadan
   kolayca erişilebilir olmasını arıyor — ödeme logolarının hemen altında. */
.footer-legal {
    list-style: none; margin: 16px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 6px 18px; font-size: 12px;
}
.footer-legal a { color: #cbb9b4; text-decoration: none; }
.footer-legal a:hover { color: #fff; text-decoration: underline; }

/* Biz Kimiz */
.usl-about { padding: 40px 0 64px; }
.usl-about-inner { max-width: 720px; margin: 0 auto; }
.usl-about-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 10px;
}
.usl-about h1 {
    font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 42px);
    color: var(--ink); margin: 0 0 14px; line-height: 1.15;
}
.usl-about-lead {
    font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 28px;
}
.usl-about-block { margin-bottom: 28px; }
.usl-about-block h2 {
    font-family: var(--serif); font-weight: 400; font-size: 22px;
    color: var(--ink); margin: 0 0 10px;
}
.usl-about-block p,
.usl-about-body p {
    margin: 0 0 12px; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft);
}
.usl-about-body h2,
.usl-about-block h2 {
    font-family: var(--serif); font-weight: 400; font-size: 22px;
    color: var(--ink); margin: 22px 0 10px;
}
.usl-about-body h2:first-child { margin-top: 0; }
.usl-about-address {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 22px;
}
.usl-about-company { color: var(--ink) !important; margin-bottom: 6px !important; }
.usl-about-address address {
    font-style: normal; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft);
}
.usl-about-pay { margin-top: 12px; }
.usl-about-pay .usl-ft-logos { gap: 10px; }
.usl-about-pay .usl-ft-logo svg { height: 22px; width: auto; }

/* ================= Kategori/Arama listeleme sayfaları ================= */
.page-heading h1 { font-family: var(--serif); font-weight: 400; color: var(--ink); }
.page-heading .result-count { color: var(--ink-soft); font-size: 13px; }
.empty-state { color: var(--ink-soft); }
.empty-state i { color: var(--accent); }
.page-btn.active, .page-btn:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }

/* ================= ÜRÜN DETAY SAYFASI ================= */
/* 3 kolonu (galeri | bilgi | satın-al) 2 koloni birleştir: galeri solda, bilgi+satın-al sağda TEK
   akan panel (tasarım önerisindeki .pdp-info gibi — ayrı kutulanmış kartlar değil). */
.product-detail {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto;
    gap: 0 !important;
}
.pd-gallery { grid-row: 1 / 3; top: 96px; }
.pd-info {
    grid-column: 2; grid-row: 1;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 5vw 5vw 0 4vw !important;
}
.pd-buy { grid-column: 2; grid-row: 2; top: 96px; }
.pd-buy-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 22px 5vw 5vw 4vw !important;
    gap: 18px !important;
}

/* Galeri: ana görsel + thumbnail'lar tasarım önerisindeki gibi orantılı grid */
.pd-gallery-main {
    border-color: var(--line) !important;
    border-radius: 18px !important;
    aspect-ratio: 4/5 !important;
    margin-bottom: 12px;
    overflow: hidden;
}
.pd-gallery-main > img {
    width: 100%; height: 100%; display: block; object-fit: cover; object-position: center;
}
.pd-gallery-thumbs {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
    overflow: visible !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}
.thumb-btn {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/4;
    flex-shrink: initial;
    overflow: hidden;
}
.thumb-btn > img {
    width: 100%; height: 100%; display: block; object-fit: cover; object-position: center;
}
.pd-brand {
    display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
    position: relative; /* .usl-vh absolute için bağlam */
}
.pd-brand-logo {
    height: 28px; width: auto; max-width: 120px; object-fit: contain; display: block;
}
.pd-brand-name {
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-soft);
}
.pd-title { font-family: var(--serif); font-weight: 400; color: var(--ink); font-size: 27px; }
.feat-tag-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px;
}
.feat-tag {
    border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
    font-size: 13px; color: var(--ink); background: var(--card);
}
.pd-code { color: var(--ink-soft); }
.tag { border-color: var(--line) !important; color: var(--ink-soft) !important; }
.pd-divider { border-color: var(--line) !important; }

.variant-label { color: var(--ink-soft); display: flex; justify-content: space-between; }
.variant-selected { color: var(--ink-soft); font-weight: 400; }
.variant-btn { border-color: var(--line) !important; background: #fff !important; color: var(--ink) !important; border-radius: 2px !important; cursor: pointer; }
.variant-btn:hover { border-color: var(--accent) !important; }
.variant-btn.active { border-color: var(--accent) !important; background: var(--accent) !important; color: #fff !important; }
.variant-btn.active .color-name { color: #fff !important; }
/* OOS: gri + üstü çizili ama her zaman tıklanabilir (kilit yok) */
.variant-btn.out-of-stock {
    opacity: 0.55 !important;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    pointer-events: auto !important;
    cursor: pointer !important;
}
.variant-btn.out-of-stock .color-name { text-decoration: line-through; }
.variant-btn.out-of-stock.active {
    opacity: 0.85 !important;
    background: #fff !important;
    color: var(--ink) !important;
    border-color: var(--accent) !important;
    border-style: dashed !important;
}
.variant-btn.out-of-stock.active .color-name { color: var(--ink) !important; }

/* Stoksuz kombinasyon alternatif önerileri: bilgi ikonu + kişisel başlık +
   yönlendirici alt metin. Zemin markanın açık vurgu tonunda, sol kenarı vurgulu. */
.usl-variant-alts {
    margin: 4px 0 12px; padding: 13px 15px; border-radius: 12px;
    background: var(--accent-tint, #f3e6ea);
    border: 1px solid rgba(107, 39, 64, .22);
    border-left: 4px solid var(--accent, #6b2740);
}
.usl-variant-alts[hidden] { display: none !important; }
.usl-variant-alts-bas { display: flex; gap: 10px; align-items: flex-start; }
.usl-variant-alts-bas svg {
    width: 20px; height: 20px; flex: none; margin-top: 1px;
    color: var(--accent, #6b2740);
}
.usl-variant-alts-title {
    margin: 0; font-size: 13.5px; font-weight: 700; color: var(--accent, #6b2740);
}
.usl-variant-alts-sub {
    margin: 3px 0 0; font-size: 12px; color: var(--ink-soft, #6b5a56); line-height: 1.45;
}
.usl-variant-alts-yok {
    margin: 10px 0 0; font-size: 12.5px; color: var(--ink, #2b1a1f); line-height: 1.5;
}
.usl-variant-alts-yok[hidden] { display: none !important; }

/* "Beden: 85B — Siyah, Ten renginde mevcut" satır içi ipucu */
.usl-beden-ipucu {
    font-size: 12px; font-weight: 600; color: var(--accent, #6b2740);
    margin-left: 6px;
}
.usl-beden-ipucu[hidden] { display: none !important; }
.usl-variant-alts-block { margin-top: 8px; }
.usl-variant-alts-label {
    display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; font-weight: 600;
}
.usl-variant-alts-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.usl-alt-chip {
    border: 1px solid var(--accent); background: #fff; color: var(--accent);
    border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: var(--sans);
    box-shadow: 0 1px 3px rgba(74, 26, 44, .12);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.usl-alt-chip:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.product-card-price .price-dec { font-size: 0.62em; }
.product-card-price .price-cur { font-size: 0.72em; }

/* Renk seçimi: tasarım önerisindeki gibi sade, isimsiz daireler */
.variant-color {
    padding: 0 !important;
    width: 32px; height: 32px;
    border-radius: 50% !important;
    border-width: 2px !important;
    justify-content: center;
    overflow: hidden;
}
.variant-color .color-swatch { width: 100%; height: 100%; border: none; margin: 0; }
.variant-color .color-name { display: none; }
.variant-color.active { border-color: var(--accent) !important; background: #fff !important; padding: 2px !important; }

/* Beden seçimi: tasarım önerisindeki chip ölçüleri */
.variant-text { min-width: 44px; height: 40px; padding: 0 12px; border-radius: 2px !important; }

.pd-details h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); }
.detail-table td { border-color: var(--line) !important; color: var(--ink-soft); }

/* Değerlendirme satırı (başlığın hemen altı) */
.pdp-rating { font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdp-rating .stars { color: var(--usl-gold); letter-spacing: 1px; font-size: 12px; }
.pd-fav-count { color: var(--accent); }
.pdp-rating-empty { color: var(--usl-ink-faint); }

/* Fiyat satırı */
.pdp-price-row { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 2px; }
.pdp-price-row .price { font-family: var(--serif); font-size: 30px; color: var(--ink); }
.pdp-price-row .old { color: var(--ink-soft); text-decoration: line-through; font-size: 15px; font-family: var(--sans); }
.pdp-price-row .off { background: #fff; color: #9C5D57; font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 4px; border: 1px solid #E8E8E8; font-family: var(--sans); }
.pd-price-na { font-family: var(--sans) !important; font-size: 15px !important; color: var(--ink-soft); }

/* Stok bandı */
.stock-banner {
    display: flex; align-items: center; gap: 10px;
    background: var(--sage-tint); color: var(--sage);
    padding: 10px 14px; border-radius: 3px; font-size: 12.5px;
    margin-bottom: 4px;
}
.stock-banner .stock-out { background: none; padding: 0; }
.stock-out { color: var(--danger) !important; }

/* Adet + Sepete Ekle + Favori: tek satır (adet solda) */
.pd-actions-row { display: flex; gap: 12px; align-items: stretch; }
.pd-actions-row .qty-spinner { flex: none; height: 48px; border-radius: 2px; border-color: var(--line); }
.qty-btn { border-color: var(--line) !important; color: var(--ink) !important; }
.qty-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.pd-actions-row .qty-spinner .qty-btn { width: 40px; height: 100%; }
.pd-actions-row .qty-spinner input { height: 100%; }
.pd-actions-row .btn-add-cart { flex: 1; }
.pd-actions-row .btn-favorite {
    width: 52px; flex: none; padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
}
.pd-actions-row .btn-favorite .btn-favorite-label { display: none; }
.pd-actions-row .btn-favorite i { margin: 0; font-size: 17px; }

.btn-add-cart {
    background: var(--accent) !important;
    border-radius: 2px !important;
    letter-spacing: 0.03em;
}
.btn-add-cart:hover { background: var(--usl-accent-dark) !important; transform: none !important; box-shadow: none !important; }
.btn-favorite { border-color: var(--line) !important; color: var(--ink-soft) !important; border-radius: 2px !important; }
.btn-favorite:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.btn-favorite.favorited { border-color: var(--accent) !important; color: var(--accent) !important; }

/* Mağazadan teslim notu */
.collect-note { margin-top: 4px; font-size: 12px; color: var(--ink-soft); display: flex; gap: 8px; }
.collect-note svg { flex: none; margin-top: 1px; color: var(--accent); }
.collect-note strong { color: var(--ink); font-weight: 600; }

/* Aynı gün kargo sayacı */
.ship-today-note {
    margin-top: 6px;
    font-size: 12px;
    color: var(--ink-soft);
    display: flex;
    gap: 8px;
    align-items: flex-start;
    line-height: 1.45;
}
.ship-today-note svg { flex: none; margin-top: 1px; color: var(--accent); }
.ship-today-note strong { color: var(--ink); font-weight: 600; }
.ship-today-note .ship-today-cd {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.02em;
}

/* Bilgi akordiyonu */
.accordion { margin-top: 8px; border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head {
    width: 100%; background: none; border: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 2px; font-size: 13.5px; font-family: var(--sans);
    color: var(--ink); text-align: left; font-weight: 600;
}
.acc-head .plus { color: var(--accent); font-family: var(--serif); font-size: 18px; transition: transform 0.2s; line-height: 1; }
.acc-item.open .plus { transform: rotate(45deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.acc-item.open .acc-body { max-height: 960px; }
.acc-body-inner { padding: 0 2px 16px; }
.acc-body-inner .detail-table { width: 100%; }
.acc-body-inner .detail-table td { padding: 6px 0; font-size: 12.5px; }
.acc-body-inner .detail-table td:first-child { color: var(--usl-ink-faint); width: 40%; }

/* Fiyat: sıkışık (condensed) rakam + ondalık üstte (supercase) + küçük TL birimi.
   Yalnız fiyatlar bu aileyi kullanır; başlık ve metin tipografisi değişmez. */
.price-amount,
.price-dec,
.price-cur,
.ki-price {
    font-family: var(--nums-condensed);
    font-stretch: condensed;          /* genişlik ekseni olan ailelerde (SF, Segoe) de daralt */
    letter-spacing: -0.005em;
}
.price-amount { font-variant-numeric: tabular-nums; font-weight: 400; }
.price-dec { font-size: 0.58em; font-weight: 500; margin-left: 1px; vertical-align: super; line-height: 0; }
.price-cur { font-size: 0.62em; font-weight: 500; margin-left: 3px; letter-spacing: 0.02em; opacity: 0.85; }
.pdp-price-row .price { font-family: var(--serif); font-size: 30px; color: var(--ink); }
.pdp-price-row .old { opacity: 0.55; font-size: 16px; }
.pdp-price-row .old .price-dec { font-size: 0.58em; }
.usl-pdp-sticky-bar .usl-price .price-amount { font-size: 17px; }
.usl-pdp-sticky-bar .usl-price .price-cur { font-size: 13px; }

/* Stok bildirimi modal */
.usl-notify-modal {
    position: fixed; inset: 0; z-index: 4000; background: rgba(43,26,31,0.45);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.usl-notify-modal[hidden] { display: none !important; }
.usl-notify-dialog {
    position: relative; width: min(400px, 100%); background: #fff; border-radius: 12px;
    padding: 24px 22px 20px; box-shadow: 0 20px 50px -20px rgba(43,26,31,0.45);
}
.usl-notify-dialog h3 { margin: 0 0 6px; font-size: 18px; color: var(--ink); }
.usl-notify-dialog > p { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-soft); }
.usl-notify-close {
    position: absolute; top: 10px; right: 12px; border: none; background: none;
    font-size: 24px; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
.usl-notify-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--ink-soft); }
.usl-notify-input {
    width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--line);
    border-radius: 8px; font-size: 14px; margin-bottom: 12px;
}
.usl-notify-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.usl-notify-login { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--accent); }
.usl-notify-status { margin-top: 12px; font-size: 13px; text-align: center; }
.usl-notify-email-hint { font-size: 13.5px; margin-bottom: 12px; color: var(--ink); }
.btn-add-cart.btn-notify { background: var(--ink) !important; }

/* Kumaş-swatch galeri (gerçek fotoğraf yoksa) */
.thumb-btn .swatch { width: 100%; height: 100%; display: block; }

/* Kombini Tamamla */
.cross-sell { padding: 0 0 70px; }

/* ── Ürün detay sekmeleri ── */
.pd-tabs-wrap {
    margin: 8px 0 48px;
    background: var(--card, #fff);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.pd-tabs-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    border-bottom: 1px solid var(--line);
    background: var(--ground-raised, #faf7f4);
    overflow: hidden;
}
.pd-tab {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 13px 10px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s, background .15s, border-color .15s;
}
.pd-tab i { flex-shrink: 0; font-size: 13px; opacity: .9; }
.pd-tab-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-tab-full { display: inline; }
.pd-tab-short { display: none; }
.pd-tab-count {
    flex-shrink: 0;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent-tint, #f7e9ee);
    color: var(--accent);
}
.pd-tab:hover { color: var(--accent) !important; background: var(--accent-tint) !important; }
.pd-tab.active {
    color: var(--accent) !important;
    border-bottom-color: var(--accent) !important;
    background: #fff;
}
.pd-tab.active em,
.pd-tab.active .pd-tab-count { color: var(--accent) !important; }

.pd-panel { display: none; padding: 20px 18px 24px; }
.pd-panel.active { display: block; }
.pd-panel-head { margin-bottom: 16px; }
.pd-panel-head h3 {
    margin: 0 0 4px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 20px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pd-panel-head h3 i { color: var(--accent) !important; font-size: 16px; }
.pd-panel-head p { margin: 0; font-size: 13px; color: var(--ink-soft); }
/* İptal & İade sekmesi: metin Yardım Sayfaları'ndan geldiği için uzun olabilir,
   sekme içinde kendi alanında kaydırılır — sayfayı aşırı uzatmasın. */
.pd-iade-metin { max-height: 420px; overflow-y: auto; padding-right: 6px; }
.pd-iade-metin h2 {
    margin: 16px 0 6px; font-size: 14.5px; font-weight: 700; color: var(--ink);
}
.pd-iade-metin h2:first-child { margin-top: 0; }
.pd-iade-metin p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.pd-iade-link { margin: 14px 0 0; font-size: 13px; }
.pd-iade-link a { color: var(--accent); text-decoration: none; font-weight: 600; }
.pd-iade-link a:hover { text-decoration: underline; }
.pd-iade-link i { font-size: 11px; margin-left: 3px; }
.pd-panel-empty {
    text-align: center;
    padding: 28px 12px;
    color: var(--ink-soft);
}
.pd-panel-empty .empty-icon { font-size: 28px; margin-bottom: 8px; opacity: .45; }

@media (max-width: 760px) {
    .pd-tabs-wrap { margin: 4px 0 28px; border-radius: 10px; }
    .pd-tabs-bar { border-bottom-width: 1px; }
    .pd-tab {
        flex-direction: row;
        gap: 4px;
        padding: 10px 3px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: -0.015em;
        border-bottom-width: 2px;
    }
    .pd-tab i { font-size: 11px; }
    .pd-tab-full { display: none; }
    .pd-tab-short { display: inline; }
    .pd-tab-count {
        font-size: 9.5px;
        padding: 0 4px;
        line-height: 1.35;
        max-width: 2.2em;
        overflow: hidden;
    }
    .pd-panel { padding: 16px 12px 20px; }
    .pd-panel-head h3 { font-size: 17px; }
}

@media (max-width: 380px) {
    .pd-tab { font-size: 10px; padding: 9px 2px; gap: 3px; }
    .pd-tab i { font-size: 10px; }
    .pd-tab-count { display: none; }
}

.pd-tabs-bar { border-color: var(--line) !important; }
.pd-tab.active { color: var(--accent) !important; border-color: var(--accent) !important; }
.pd-tab:hover { color: var(--accent) !important; background: var(--accent-tint) !important; }
.pd-tab.active em { color: var(--accent) !important; }
.pd-panel-head h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); }
.pd-panel-head h3 i { color: var(--accent) !important; }
.loc-card { border-color: var(--line) !important; }
.loc-name { color: var(--ink) !important; }
.loc-magaza { background: var(--accent-tint) !important; color: var(--usl-accent-dark) !important; }
.loc-depo { background: var(--ground-raised) !important; color: var(--ink-soft) !important; }
.rv-score-num { color: var(--ink); font-family: var(--serif); }
.rv-bar-fill { background: var(--accent) !important; }
.rv-author { color: var(--ink) !important; }
.rv-form input:focus, .rv-form textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-tint) !important; }
.btn-write-review, .btn-submit-review { background: var(--accent) !important; }
.btn-write-review:hover, .btn-submit-review:hover { background: var(--usl-accent-dark) !important; }

/* ── Kalan eski-tema noktaları (breadcrumb, galeri, etiketler, kargo ikonları) ── */
.breadcrumb a:hover { color: var(--accent) !important; }
.bc-current { color: var(--ink) !important; }
.gallery-zoom { color: var(--ink) !important; }
.gallery-zoom:hover { background: var(--accent) !important; color: #fff !important; }
.thumb-btn { border: 1px solid var(--line) !important; border-radius: 10px !important; }
.thumb-btn.active { border-color: var(--line) !important; outline: 2px solid var(--accent); outline-offset: 2px; }
.shipping-item i { color: var(--accent) !important; }
.shipping-item strong { color: var(--ink) !important; }
.tag-family { background: var(--accent-tint) !important; color: var(--usl-accent-dark) !important; }
.tag-cat { background: var(--ground-raised) !important; color: var(--ink-soft) !important; }

/* ================= Mobil ================= */
@media (max-width: 980px) {
    .nav-primary { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--card); flex-direction: column; padding: 10px 5vw; border-bottom: 1px solid var(--line); gap: 4px; }
    .nav-primary.open { display: flex; }
    /* tezenis.com üst header'ı gibi: solda menü + arama, ortada logo, sağda giriş + sepet */
    .usl-header-left { display: flex; align-items: center; gap: 6px; order: -1; }
    .nav-toggle, .usl-search-trigger { display: inline-flex; align-items: center; justify-content: center; }
    .brand { order: 0; flex: 1 1 auto; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 2px; min-width: 0; }
    .header-tools { order: 1; }
    .usl-hide-mobile { display: none !important; }
    .hero-visual::before { background: linear-gradient(180deg, rgb(243,234,228) 0%, rgba(243,234,228,0.75) 6%, rgba(243,234,228,0) 26%); }
    .search-pill { display: none; }
    .brand-header-row {
        position: relative;
        gap: 10px;
        padding: 11px clamp(16px, 4vw, 26px);
    }
    .brand { min-width: 0; gap: 2px; }
    .brand-logo-img { height: 32px; max-width: 90px; object-fit: contain; }
    .brand-name, .brand-tagline { max-width: min(55vw, 280px); }
    .brand-header-row .brand .brand-name { font-size: 14px !important; letter-spacing: normal !important; }
    .brand-header-row .brand .brand-tagline { font-size: 8.5px !important; }
    .header-tools { gap: 8px; }
    .icon-btn { width: 36px; height: 36px; padding: 6px; }
    .hero { grid-template-columns: 1fr; }
    .cat-grid, .product-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-strip { grid-template-columns: repeat(3, 1fr); }
    .trust-item {
        flex-direction: column; align-items: center; text-align: center;
        gap: 5px; padding: 14px 4px; border-top: none;
    }
    .trust-item svg { margin-top: 0; width: 18px; height: 18px; }
    .trust-item h3 { font-size: 10.5px; line-height: 1.25; margin: 0; }
    .trust-item p { display: none; }
    .collections { grid-template-columns: 1fr; }
    .proof-grid { grid-template-columns: repeat(3, 1fr); }
    .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
    .product-detail { grid-template-columns: 1fr !important; }
    .pd-gallery, .pd-info, .pd-buy { grid-column: 1; }
    .pd-gallery { grid-row: 1; }
    .pd-info { grid-row: 2; padding: 24px 5vw 0 5vw !important; }
    .pd-buy { grid-row: 3; }
    .pd-buy-card { padding: 18px 5vw 40px 5vw !important; }
}

/* ── Checkout / sipariş sayfaları (önceki reskin katmanı) ── */
.ck-wrap { padding: 40px 0 72px; max-width: 760px; }
.ck-title { font-family: var(--usl-font-display); font-size: 26px; font-weight: 600; color: var(--usl-ink); margin: 0 0 28px; }
.ck-card {
    background: var(--usl-surface-raised);
    border: 1px solid var(--usl-border);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
}
.ck-card h3 {
    font-family: var(--usl-font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--usl-ink);
    margin: 0 0 16px;
}
.ck-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--usl-ground); font-size: 13.5px; color: var(--usl-ink); }
.ck-line:last-of-type { border-bottom: none; }
.ck-line-meta { color: var(--usl-ink-faint); }
.ck-total-row { display: flex; justify-content: space-between; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--usl-border); font-weight: 700; font-size: 15px; color: var(--usl-accent-dark); font-family: var(--usl-font-display); }
.ck-empty { text-align: center; padding: 64px 20px; color: var(--usl-ink-faint); }
.ck-empty-cta { display: inline-block; margin-top: 16px; padding: 12px 30px; background: var(--usl-accent); color: #fff; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; }
.ck-empty-cta:hover { background: var(--usl-accent-dark); }
.ck-error { display: none; background: #fbe6e4; color: var(--usl-danger); padding: 12px 16px; border-radius: 10px; margin-bottom: 20px; font-size: 13.5px; }
.ck-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ck-input {
    padding: 12px 14px; border: 1px solid var(--usl-border); border-radius: 9px;
    font-family: var(--usl-font-body); font-size: 13.5px; color: var(--usl-ink);
    background: var(--usl-ground); width: 100%; box-sizing: border-box;
}
.ck-input:focus { outline: none; border-color: var(--usl-accent); background: var(--usl-surface-raised); }
textarea.ck-input { margin-bottom: 18px; }
.ck-pay-option {
    display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--usl-border);
    border-radius: 10px; margin-bottom: 10px; font-size: 13.5px; color: var(--usl-ink); cursor: pointer;
}
.ck-pay-option.is-disabled { color: var(--usl-ink-faint); cursor: not-allowed; }
/* Ödeme düğmesi: "onayla/öde" eylemi yeşil okunur — bordo aksan burada uyarıya benziyordu.
   Üstündeki taksit tablosundan 10px ayrılır. */
/* Ödeme düğmesi: üç satır — yazı / tutar / güven logoları.
   Sabit dizilim sayesinde yükseklik metin uzunluğundan bağımsız aynı kalır
   ("Güvenli Ödeme" ile "Taksit ile Güvenli Ödeme" aynı yüksekliktedir). */
.ck-submit-btn {
    width: 100%; padding: 12px 18px; margin-top: 10px;
    background: #4f7a45; color: #fff; border: none;
    border-radius: 18px; font-family: var(--usl-font-body); font-size: 14.5px; font-weight: 700; cursor: pointer;
    transition: background .15s;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 74px; line-height: 1.25;
}
.ck-submit-btn:hover { background: #446b3b; }
.ck-submit-btn:disabled { background: var(--usl-ink-faint); cursor: not-allowed; }
#ckSubmitText { display: block; }
#ckSubmitTutar { display: block; font-family: var(--nums-condensed); font-size: 17px; font-weight: 700; }
/* Güven logoları en altta, hafif soluk. */
.ck-submit-rozetler { display: flex; align-items: center; justify-content: center; gap: 7px; opacity: .9; margin-top: 2px; }
.ck-submit-rozetler[hidden] { display: none; }
.ck-submit-rozetler svg { display: block; }

/* ── Katmanlı onay ekranı (masaüstünde modal, mobilde bottom sheet) ── */
.ck-onay-katman {
    position: fixed; inset: 0; z-index: 3200;
    background: rgba(43, 26, 31, .5);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ck-onay-katman[hidden] { display: none; }
.ck-onay-sheet {
    width: min(560px, 100%); max-height: min(88vh, 860px);
    background: #fff; border-radius: 18px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 28px 70px -30px rgba(43, 26, 31, .65);
}
.ck-onay-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--usl-border); background: #fbfaf9;
}
.ck-onay-head strong { flex: 1 1 auto; font-size: 15px; color: var(--usl-ink); }
.ck-onay-kapat {
    border: 0; background: none; cursor: pointer; font-size: 24px; line-height: 1;
    color: var(--usl-ink-soft); padding: 0 4px;
}
.ck-onay-govde { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 8px; -webkit-overflow-scrolling: touch; }

.ck-onay-bolum { margin-bottom: 18px; }
.ck-onay-bolum h4 {
    margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--usl-ink-faint);
}
.ck-onay-urunler { list-style: none; margin: 0 0 10px; padding: 0; }
.ck-onay-urunler li {
    display: flex; gap: 10px; justify-content: space-between;
    padding: 6px 0; border-bottom: 1px solid var(--usl-border);
    font-size: 13px; line-height: 1.4; color: var(--usl-ink);
}
.ck-onay-urunler em { font-style: normal; color: var(--usl-ink-soft); }
.ck-onay-urunler b { white-space: nowrap; font-family: var(--nums-condensed); }

.ck-onay-tutarlar { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; }
.ck-onay-tutarlar dt { font-size: 13px; color: var(--usl-ink-soft); }
.ck-onay-tutarlar dd {
    margin: 0; text-align: right; font-size: 13px; color: var(--usl-ink);
    font-family: var(--nums-condensed);
}
.ck-onay-tutarlar .ck-onay-vurgu {
    padding-top: 7px; margin-top: 3px; border-top: 1px solid var(--usl-border);
    font-size: 15px; font-weight: 700; color: var(--usl-ink);
}
.ck-onay-tutarlar .ck-onay-vurgu small { font-weight: 400; font-size: 11px; color: var(--usl-ink-faint); }
.ck-onay-satir-bilgi { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--usl-ink-soft); }

.ck-onay-madde { margin: 0; padding-left: 18px; }
.ck-onay-madde li { font-size: 12.5px; line-height: 1.55; color: var(--usl-ink-soft); margin-bottom: 4px; }
.ck-onay-satici { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--usl-ink-soft); }
.ck-onay-satici strong { color: var(--usl-ink); }

.ck-onay-ozet-sonu { display: block; height: 1px; }

.ck-onay-belge { border-top: 1px solid var(--usl-border); }
.ck-onay-belge summary {
    padding: 11px 2px; cursor: pointer; font-size: 13px; font-weight: 600;
    color: var(--usl-accent); list-style: none;
}
.ck-onay-belge summary::-webkit-details-marker { display: none; }
.ck-onay-belge summary::before { content: "▸ "; }
.ck-onay-belge[open] summary::before { content: "▾ "; }
.ck-onay-belge-metin {
    max-height: 260px; overflow-y: auto; padding: 4px 2px 12px;
    font-size: 12px; line-height: 1.6; color: var(--usl-ink-soft);
}
.ck-onay-belge-metin h2 { font-size: 13px; color: var(--usl-ink); margin: 12px 0 4px; }

.ck-onay-foot { border-top: 1px solid var(--usl-border); padding: 14px 18px 16px; background: #fbfaf9; }
.ck-onay-beyan { margin: 0 0 11px; font-size: 12px; line-height: 1.55; color: var(--usl-ink-soft); }
.ck-onay-beyan strong { color: var(--usl-ink); }
.ck-onay-tamamla {
    width: 100%; padding: 14px; border: 0; border-radius: 999px;
    background: #4f7a45; color: #fff; font-family: inherit;
    font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.ck-onay-tamamla:hover:not(:disabled) { background: #446b3b; }
.ck-onay-tamamla:disabled { background: var(--usl-ink-faint); cursor: not-allowed; }
.ck-onay-ipucu { margin: 8px 0 0; font-size: 11.5px; text-align: center; color: var(--usl-ink-faint); }
.ck-onay-ipucu[hidden] { display: none; }

@media (max-width: 600px) {
    /* Mobilde alttan açılan tam genişlikte sayfa (bottom sheet). */
    .ck-onay-katman { padding: 0; align-items: flex-end; }
    .ck-onay-sheet { width: 100%; max-height: 94vh; border-radius: 18px 18px 0 0; }
}

/* Sözleşme metni penceresi */
.ck-belge-katman {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(43, 26, 31, .5);
    display: flex; align-items: center; justify-content: center; padding: 18px;
}
.ck-belge-katman[hidden] { display: none; }
.ck-belge-kutu {
    width: min(720px, 100%); height: min(80vh, 760px);
    background: #fff; border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 60px -28px rgba(43, 26, 31, .6);
}
.ck-belge-head {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-bottom: 1px solid var(--usl-border); background: #fbfaf9;
}
.ck-belge-head strong { flex: 1 1 auto; font-size: 14px; color: var(--usl-ink); }
.ck-belge-yazdir { font-size: 12px; color: var(--usl-ink-soft); text-decoration: underline; }
.ck-belge-kapat {
    border: 0; background: none; cursor: pointer; font-size: 22px; line-height: 1;
    color: var(--usl-ink-soft); padding: 0 4px;
}
.ck-belge-govde { flex: 1 1 auto; width: 100%; border: 0; }

/* Taksitli ödemede ödeme ekranına geçerken çıkan kısa hatırlatma */
.ck-uyari-katman {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(43, 26, 31, .45);
    display: flex; align-items: center; justify-content: center; padding: 22px;
}
.ck-uyari-katman[hidden] { display: none; }
.ck-uyari-kutu {
    width: min(340px, 100%); background: #fff; border-radius: 16px;
    padding: 22px 20px; text-align: center;
    box-shadow: 0 24px 60px -28px rgba(43, 26, 31, .6);
}
.ck-uyari-ikon {
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    border-radius: 50%; background: var(--sage-tint); color: var(--sage); margin-bottom: 10px;
}
.ck-uyari-ikon svg { width: 22px; height: 22px; }
.ck-uyari-kutu strong { display: block; font-size: 15px; color: var(--usl-ink); }
.ck-uyari-kutu p {
    margin: 7px 0 16px; font-size: 12.5px; line-height: 1.55; color: var(--usl-ink-soft);
}
.ck-uyari-btn {
    width: 100%; padding: 11px; border: 0; border-radius: 999px;
    background: #4f7a45; color: #fff; font-family: inherit;
    font-size: 14px; font-weight: 700; cursor: pointer;
}
.ck-uyari-btn:hover { background: #446b3b; }

/* Tek çekim / taksitli tercihi — kart seçeneğinin altında iki kutu */
.ck-taksit-tercih { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ck-taksit-tercih[hidden] { display: none; }
.ck-tercih {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 11px 12px; border: 1px solid var(--usl-border); border-radius: 11px;
    background: var(--usl-surface-raised); cursor: pointer; transition: border-color .15s, background .15s;
}
.ck-tercih:hover { border-color: var(--usl-accent-soft); }
.ck-tercih.is-active { border-color: var(--sage); background: var(--sage-tint); }
.ck-tercih input[type="radio"] { flex: none; margin-top: 2px; width: 16px; height: 16px; accent-color: var(--sage); }
.ck-tercih strong { display: block; font-size: 13px; color: var(--usl-ink); }
.ck-tercih small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--usl-ink-soft); }
@media (max-width: 480px) {
    .ck-taksit-tercih { grid-template-columns: 1fr; }
}

.ck-confirm-wrap { padding: 72px 0; max-width: 560px; text-align: center; }
.ck-confirm-icon {
    width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 50%;
    background: var(--usl-accent-soft); color: var(--usl-accent);
    display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.ck-confirm-title { font-family: var(--usl-font-display); font-size: 24px; font-weight: 600; color: var(--usl-ink); margin: 0 0 10px; }
.ck-confirm-label { color: var(--usl-ink-soft); margin: 0 0 6px; font-size: 13.5px; }
.ck-confirm-no { font-family: var(--usl-font-display); font-size: 20px; font-weight: 600; letter-spacing: 0.03em; color: var(--usl-accent-dark); margin: 0 0 24px; }
.ck-confirm-hint { color: var(--usl-ink-faint); font-size: 13.5px; margin-bottom: 28px; }
.ck-confirm-hint a { color: var(--usl-accent); text-decoration: underline; }

.ck-lookup-form { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.ck-lookup-form .ck-input { flex: 1; min-width: 160px; }
.ck-lookup-btn { padding: 12px 26px; background: var(--usl-accent); color: #fff; border: none; border-radius: 9px; font-family: var(--usl-font-body); font-weight: 600; cursor: pointer; }
.ck-lookup-btn:hover { background: var(--usl-accent-dark); }
.ck-status-pill { background: var(--usl-accent-soft); color: var(--usl-accent-dark); padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ck-tracking { margin-top: 14px; font-size: 13px; color: var(--usl-ink-soft); }

/* ── Ödeme alanı (checkout): yöntem seçimi + 3D Secure kart formu ── */
.ck-pay-methods { display: grid; gap: 10px; margin-bottom: 4px; }
.ck-pay-method {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--usl-border);
    border-radius: 12px;
    background: var(--usl-surface-raised);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.ck-pay-method:hover { border-color: var(--usl-accent-soft); }
.ck-pay-method.is-active {
    border-color: var(--usl-accent);
    box-shadow: 0 0 0 3px rgba(107, 39, 64, 0.08);
    background: #fff;
}
.ck-pay-method input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ck-pay-method-body { display: flex; align-items: center; gap: 13px; }
/* İkon zemini nötr kum tonunda: pembe/bordo dolgu "uyarı" gibi okunuyordu. */
.ck-pay-method-ico {
    flex: none; width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--ground-raised); color: var(--usl-ink);
}
/* Secili odeme yontemi, gonderim secenekleriyle ayni dili konussun: yumusak yesil. */
.ck-pay-method.is-active {
    border-color: var(--sage);
    background: var(--sage-tint);
}
.ck-pay-method.is-active .ck-pay-method-ico { background: #fff; color: var(--sage); }
.ck-pay-method input[type="radio"] { accent-color: var(--sage); }
.ck-pay-method-ico svg { width: 21px; height: 21px; }
.ck-pay-method-body strong { display: block; font-size: 14px; color: var(--usl-ink); font-weight: 600; }
.ck-pay-method-body small { display: block; margin-top: 2px; font-size: 12px; color: var(--usl-ink-soft); line-height: 1.35; }
.ck-pay-method-tag {
    flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
    padding: 4px 9px; border-radius: 999px;
    background: var(--ground-raised); color: var(--usl-ink-soft);
}
/* Logo etiketi: rozet dolgusu yok, logo kendi zeminini taşır. */
.ck-pay-method-tag--logo { background: none; padding: 0; display: flex; align-items: center; }
.ck-pay-method-tag--logo svg { display: block; }

.ck-cc-area {
    margin-top: 16px; padding: 18px;
    border: 1px solid var(--usl-border); border-radius: 14px;
    background: linear-gradient(180deg, var(--usl-surface) 0%, var(--usl-surface-raised) 100%);
}
.ck-cc-area[hidden] { display: none; }

/* Kart önizlemesi — CVC alanına gelince arkaya döner */
.ck-cc-preview { perspective: 900px; max-width: 340px; margin: 0 auto 18px; }
.ck-cc-inner {
    position: relative; width: 100%; aspect-ratio: 1.6 / 1;
    transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}
.ck-cc-preview.is-flipped .ck-cc-inner { transform: rotateY(180deg); }
.ck-cc-face {
    position: absolute; inset: 0;
    border-radius: 16px; padding: 18px;
    color: #fff; backface-visibility: hidden;
    background: linear-gradient(135deg, var(--usl-accent) 0%, var(--usl-accent-dark) 65%, #2c0f1b 100%);
    box-shadow: 0 16px 30px -18px rgba(43, 26, 31, 0.75);
    display: flex; flex-direction: column; justify-content: space-between;
}
.ck-cc-back { transform: rotateY(180deg); justify-content: flex-start; padding: 0; }
.ck-cc-top { display: flex; align-items: center; justify-content: space-between; }
.ck-cc-chip {
    width: 36px; height: 26px; border-radius: 6px;
    background: linear-gradient(135deg, #e8c98a, #b98f4d);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.ck-cc-brand { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; opacity: 0.95; }
.ck-cc-num {
    font-family: var(--usl-font-body); font-variant-numeric: tabular-nums;
    font-size: clamp(15px, 4.6vw, 19px); letter-spacing: 0.09em; font-weight: 600;
}
.ck-cc-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ck-cc-bottom small, .ck-cc-cvc small {
    display: block; font-size: 8.5px; letter-spacing: 0.12em; opacity: 0.7; margin-bottom: 3px;
}
.ck-cc-bottom b { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; }
.ck-cc-exp { text-align: right; flex: none; }
.ck-cc-stripe { height: 42px; margin-top: 22px; background: #21121a; }
.ck-cc-cvc { margin: 16px 18px 0; text-align: right; }
.ck-cc-cvc b {
    display: inline-block; min-width: 66px; padding: 6px 10px;
    background: #fff; color: var(--usl-ink); border-radius: 5px;
    font-size: 13px; letter-spacing: 0.16em; text-align: center;
}

.ck-cc-fields { display: grid; gap: 12px; }
.ck-field { display: block; }
.ck-field > span {
    display: block; margin-bottom: 6px;
    font-size: 12px; font-weight: 600; color: var(--usl-ink-soft);
}
.ck-field .ck-input { margin-bottom: 0; width: 100%; }
.ck-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 12px; }

/* ════════ Ürün filtre pop-up'ı (renk aileleri + beden sınıfları) ════════ */
.usl-filter-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    max-width: 1480px; margin: 0 auto 10px; padding: 0 clamp(16px, 3vw, 52px);
}
.usl-filter-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border: 1.4px solid var(--usl-ink); border-radius: 999px;
    background: transparent; color: var(--usl-ink); font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 0.15s, color 0.15s;
}
.usl-filter-trigger:hover { background: var(--usl-ink); color: #fff; }
.usl-filter-badge {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--usl-accent); color: #fff; font-size: 11px; font-weight: 700;
}
.usl-filter-count { font-size: 12.5px; color: var(--usl-ink-soft); }

.usl-filter-sheet { position: fixed; inset: 0; z-index: 9998; }
.usl-filter-sheet[hidden] { display: none; }
.usl-filter-backdrop { position: absolute; inset: 0; background: rgba(28, 16, 20, 0.5); backdrop-filter: blur(2px); }
.usl-filter-panel {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: min(560px, 100%); max-height: 88vh;
    background: var(--usl-surface); border-radius: 22px 22px 0 0;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.5);
    animation: uslFpUp 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes uslFpUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@media (min-width: 720px) {
    .usl-filter-panel { bottom: auto; top: 50%; transform: translate(-50%, -50%); border-radius: 18px; animation: none; }
}
.usl-filter-head {
    display: flex; align-items: center; gap: 12px; padding: 16px 18px;
    border-bottom: 1px solid var(--usl-border);
}
.usl-filter-head strong { flex: 1; text-align: center; font-size: 14px; letter-spacing: 0.08em; color: var(--usl-ink); }
.usl-filter-x, .usl-filter-clear {
    border: none; background: none; font: inherit; cursor: pointer; padding: 4px;
}
.usl-filter-x { font-size: 17px; color: var(--usl-ink); }
.usl-filter-clear { font-size: 13px; color: var(--usl-accent); font-weight: 600; }
.usl-filter-body { flex: 1; overflow-y: auto; padding: 18px; }
.usl-filter-loading { padding: 40px 10px; text-align: center; color: var(--usl-ink-faint); font-size: 13.5px; }
.usl-filter-foot { padding: 12px 18px 18px; border-top: 1px solid var(--usl-border); }
.usl-filter-apply {
    width: 100%; padding: 15px; border: none; border-radius: 999px;
    background: var(--usl-ink); color: #fff; font: inherit; font-size: 14px; font-weight: 700;
    letter-spacing: 0.04em; cursor: pointer;
}
.usl-filter-apply:hover { background: var(--usl-accent-dark); }

.usl-fp-sec { margin-bottom: 24px; }
.usl-fp-sec h4 { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--usl-ink); font-family: var(--usl-font-body); }

.usl-fp-fams { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.usl-fp-fams::-webkit-scrollbar { display: none; }
.usl-fp-fam {
    flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 62px;
    border: none; background: none; cursor: pointer; font: inherit;
}
.usl-fp-swatch {
    width: 50px; height: 50px; border-radius: 50%;
    border: 1.5px solid var(--usl-border); box-shadow: inset 0 0 0 2px #fff;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.usl-fp-fam.is-sel .usl-fp-swatch { border-color: var(--usl-accent); box-shadow: 0 0 0 2px var(--usl-accent), inset 0 0 0 2px #fff; }
.usl-fp-fam-name { font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--usl-ink); }
.usl-fp-fam.is-sel .usl-fp-fam-name { color: var(--usl-accent); font-weight: 600; }

.usl-fp-children {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 12px;
    border: 1.3px solid var(--usl-accent); border-radius: 14px; background: var(--usl-accent-soft);
}

.usl-fp-tabs {
    display: flex; gap: 4px; padding: 4px; margin-bottom: 12px;
    background: var(--usl-ground); border-radius: 12px; overflow-x: auto; scrollbar-width: none;
}
.usl-fp-tabs::-webkit-scrollbar { display: none; }
.usl-fp-tab {
    flex: none; padding: 8px 14px; border: none; border-radius: 9px; background: transparent;
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--usl-ink-soft); cursor: pointer; white-space: nowrap;
}
.usl-fp-tab.is-active { background: var(--usl-ink); color: #fff; }

.usl-fp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.usl-fp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border: 1.3px solid var(--usl-border); border-radius: 999px;
    background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--usl-ink); cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.usl-fp-chip:hover { border-color: var(--usl-accent-soft); }
.usl-fp-chip.is-sel { background: var(--usl-ink); border-color: var(--usl-ink); color: #fff; }
.usl-fp-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); }

.usl-fp-acc {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; border: none; background: none; cursor: pointer; font: inherit; text-align: left;
    border-top: 1px solid var(--usl-border);
}
.usl-fp-acc b { display: block; font-size: 13.5px; color: var(--usl-ink); }
.usl-fp-acc small { display: block; margin-top: 2px; font-size: 12px; color: var(--usl-ink-soft); }
.usl-fp-chev { font-size: 16px; color: var(--usl-ink-soft); }
.usl-fp-acc-body { padding: 4px 0 12px; }
.usl-fp-acc-body[hidden] { display: none; }
.usl-fp-price { display: flex; align-items: center; gap: 10px; }
.usl-fp-price input {
    flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--usl-border);
    border-radius: 10px; font: inherit; font-size: 14px; background: #fff; color: var(--usl-ink);
}
.usl-fp-price input:focus { outline: none; border-color: var(--usl-accent); }
.usl-fp-price span { color: var(--usl-ink-faint); }

/* ════════ Sipariş durumu: animasyonlu sahne + adım çizgisi ════════ */
.usl-od { display: grid; gap: 18px; }

.usl-od-scene {
    border-radius: 16px; overflow: hidden;
    background: linear-gradient(180deg, var(--usl-accent-soft) 0%, var(--usl-surface) 100%);
    border: 1px solid var(--usl-border);
    color: var(--usl-accent-dark);
}
.usl-od-scene svg { display: block; width: 100%; height: auto; }

/* — Kargoda: akan yol + zıplayan kamyon — */
.usl-od-hill { fill: var(--usl-accent-soft); opacity: 0.85; }
.usl-od-road { fill: var(--usl-ink); opacity: 0.86; }
.usl-od-lane rect { fill: #fff; opacity: 0.85; }
.usl-od-lane { animation: uslOdLane 1.1s linear infinite; }
@keyframes uslOdLane { from { transform: translateX(0); } to { transform: translateX(-52px); } }

.usl-od-truck { animation: uslOdBump 0.9s ease-in-out infinite; }
@keyframes uslOdBump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
.usl-od-truck-body { fill: var(--usl-accent); }
.usl-od-truck-cab { fill: var(--usl-accent-dark); }
.usl-od-truck-win { fill: #ffffff; opacity: 0.85; }
.usl-od-truck-logo { stroke: #ffffff; stroke-width: 3; stroke-linecap: round; opacity: 0.55; }
.usl-od-wheel circle { fill: var(--usl-ink); }
.usl-od-wheel path { stroke: #ffffff; stroke-width: 1.4; opacity: 0.65; }
.usl-od-wheel { transform-box: fill-box; transform-origin: center; animation: uslOdSpin 0.7s linear infinite; }
@keyframes uslOdSpin { to { transform: rotate(360deg); } }
.usl-od-speed path {
    stroke: var(--usl-accent); stroke-width: 3; stroke-linecap: round; opacity: 0.35;
    animation: uslOdSpeed 0.9s ease-in-out infinite;
}
.usl-od-speed path:nth-child(2) { animation-delay: 0.15s; }
.usl-od-speed path:nth-child(3) { animation-delay: 0.3s; }
@keyframes uslOdSpeed {
    0% { opacity: 0; transform: translateX(14px); }
    40% { opacity: 0.45; }
    100% { opacity: 0; transform: translateX(-16px); }
}

/* — Teslim edildi: inen paket + onay rozeti — */
.usl-od-house { fill: var(--usl-surface-raised); stroke: var(--usl-border); stroke-width: 2; }
.usl-od-roof { fill: var(--usl-accent-dark); }
.usl-od-door { fill: var(--usl-accent); opacity: 0.9; }
.usl-od-knob { fill: var(--usl-gold); }
.usl-od-ground { stroke: var(--usl-border); stroke-width: 2; }
.usl-od-parcel rect { fill: var(--usl-sand, #d9cabb); stroke: var(--usl-accent-dark); stroke-width: 1.6; }
.usl-od-ribbon { stroke: var(--usl-accent); stroke-width: 3; }
.usl-od-parcel { animation: uslOdDrop 2.6s cubic-bezier(0.3, 1.4, 0.5, 1) infinite; }
@keyframes uslOdDrop {
    0% { transform: translateY(-46px); opacity: 0; }
    26% { transform: translateY(0); opacity: 1; }
    34% { transform: translateY(-5px); }
    44%, 88% { transform: translateY(0); }
    100% { transform: translateY(0); opacity: 1; }
}
.usl-od-check circle { fill: var(--usl-success); }
.usl-od-check-mark { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.usl-od-check { opacity: 0; animation: uslOdPop 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes uslOdPop {
    0%, 30% { opacity: 0; transform: scale(0.6); }
    42% { opacity: 1; transform: scale(1.12); }
    50%, 92% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

/* — Alındı / Hazırlanıyor: paketleme — */
.usl-od-box-body { fill: var(--usl-sand, #d9cabb); stroke: var(--usl-accent-dark); stroke-width: 1.8; }
.usl-od-box-lid { fill: var(--usl-accent); transform-box: fill-box; transform-origin: 50% 100%; }
.usl-od-box-tape { stroke: var(--usl-accent); stroke-width: 3; }
.usl-od-scene--hazir .usl-od-box-lid { animation: uslOdLid 2.2s ease-in-out infinite; }
@keyframes uslOdLid { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-4deg); } }
.usl-od-scene--alindi .usl-od-box { animation: uslOdBump 2.4s ease-in-out infinite; }
.usl-od-sparks circle { fill: var(--usl-gold); opacity: 0.5; animation: uslOdSpark 2s ease-in-out infinite; }
.usl-od-sparks circle:nth-child(2) { animation-delay: 0.4s; }
.usl-od-sparks circle:nth-child(3) { animation-delay: 0.8s; }
.usl-od-sparks circle:nth-child(4) { animation-delay: 1.2s; }
@keyframes uslOdSpark { 0%, 100% { opacity: 0.15; transform: translateY(3px); } 50% { opacity: 0.75; transform: translateY(-3px); } }

.usl-od-scene--iptal { background: #f7f1ef; color: var(--usl-danger); }

/* — Adım çizgisi — */
.usl-od-steps {
    position: relative;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    padding: 22px 4px 4px;
}
.usl-od-track {
    position: absolute; left: 6%; right: 6%; top: 36px; height: 3px;
    background: var(--usl-border); border-radius: 2px; overflow: hidden;
}
.usl-od-track-fill {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--usl-accent), var(--usl-accent-dark));
    border-radius: 2px;
    animation: uslOdFill 1.1s 0.15s cubic-bezier(0.3, 0.9, 0.3, 1) forwards;
}
@keyframes uslOdFill { to { width: var(--od-progress, 0%); } }
.usl-od-step { position: relative; text-align: center; padding-top: 2px; }
.usl-od-dot {
    display: grid; place-items: center;
    width: 30px; height: 30px; margin: 0 auto 8px;
    border-radius: 50%; border: 2px solid var(--usl-border);
    background: var(--usl-surface-raised); color: var(--usl-ink-faint);
    font-size: 13px; font-weight: 700; position: relative; z-index: 1;
}
.usl-od-step b { display: block; font-size: 12.5px; font-weight: 600; color: var(--usl-ink); }
.usl-od-step small { display: block; margin-top: 3px; font-size: 11px; color: var(--usl-ink-soft); line-height: 1.35; }
.usl-od-step.is-done .usl-od-dot { background: var(--usl-accent); border-color: var(--usl-accent); color: #fff; }
.usl-od-step.is-current .usl-od-dot {
    background: var(--usl-accent-dark); border-color: var(--usl-accent-dark); color: #fff;
    animation: uslOdPulse 1.8s ease-out infinite;
}
@keyframes uslOdPulse {
    0% { box-shadow: 0 0 0 0 rgba(107, 39, 64, 0.45); }
    70% { box-shadow: 0 0 0 12px rgba(107, 39, 64, 0); }
    100% { box-shadow: 0 0 0 0 rgba(107, 39, 64, 0); }
}
.usl-od-step.is-next { opacity: 0.55; }
.usl-od-step.is-cancel .usl-od-dot { background: var(--usl-danger); border-color: var(--usl-danger); color: #fff; }
.usl-od-steps--iptal { grid-template-columns: 1fr; }

.usl-od-section-title {
    font-family: var(--usl-font-display); font-size: 17px; font-weight: 600;
    color: var(--usl-ink); margin: 30px 0 12px;
}
.usl-od-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.usl-od-date { margin: 6px 0 12px; font-size: 12px; color: var(--usl-ink-faint); }

/* Siparişlerim listesi */
.usl-od-list { display: grid; gap: 12px; margin-bottom: 26px; }
.usl-od-item {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 14px 16px; border: 1.5px solid var(--usl-border); border-radius: 12px;
    background: var(--usl-surface-raised); text-decoration: none; color: inherit;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.usl-od-item:hover { border-color: var(--usl-accent-soft); box-shadow: var(--shadow); }
.usl-od-item.is-active { border-color: var(--usl-accent); }
.usl-od-item-main b { display: block; font-size: 14px; }
.usl-od-item-main small { display: block; margin-top: 3px; font-size: 12px; color: var(--usl-ink-soft); }
.usl-od-item-right { display: flex; align-items: center; gap: 12px; }
.usl-od-empty { text-align: center; padding: 44px 20px; color: var(--usl-ink-faint); }

@media (max-width: 620px) {
    .usl-od-steps { grid-template-columns: 1fr 1fr; gap: 16px 8px; padding-top: 10px; }
    .usl-od-track { display: none; }
    .usl-od-step small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .usl-od-lane, .usl-od-truck, .usl-od-wheel, .usl-od-speed path, .usl-od-parcel,
    .usl-od-check, .usl-od-box, .usl-od-box-lid, .usl-od-sparks circle,
    .usl-od-step.is-current .usl-od-dot { animation: none !important; }
    .usl-od-check { opacity: 1; }
    .usl-od-track-fill { animation: none; width: var(--od-progress, 0%); }
}

/* Yönetici önizleme şeridi (checkout.php?onizleme=1) */
.ck-preview-bar {
    display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
    margin-bottom: 20px; padding: 12px 16px;
    border: 1px dashed var(--usl-gold); border-radius: 12px;
    background: #fdf6ea; color: #6a4a17; font-size: 12.5px; line-height: 1.5;
}
.ck-preview-bar strong { flex: none; font-size: 12.5px; }

/* Taksit seçenekleri (BIN sorgusu sonrası doldurulur) */
.ck-inst { margin-top: 16px; }
.ck-inst[hidden] { display: none; }
.ck-inst-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin-bottom: 8px;
}
.ck-inst-head span { font-size: 12px; font-weight: 600; color: var(--usl-ink-soft); }
.ck-inst-head small { font-size: 11.5px; color: var(--usl-ink-faint); }
.ck-inst-hint {
    margin: 0 0 8px; padding: 10px 12px;
    border: 1px dashed var(--usl-border); border-radius: 10px;
    background: var(--usl-surface); color: var(--usl-ink-soft);
    font-size: 12px; line-height: 1.45;
}
.ck-inst-hint[hidden] { display: none; }
.ck-inst-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.ck-inst-list:empty { display: none; }
.ck-inst-opt {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px; text-align: left;
    border: 1.5px solid var(--usl-border); border-radius: 10px;
    background: var(--usl-surface-raised); cursor: pointer;
    font-family: var(--usl-font-body); color: var(--usl-ink);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.ck-inst-opt:hover { border-color: var(--usl-accent-soft); }
.ck-inst-opt.is-active {
    border-color: var(--usl-accent);
    box-shadow: 0 0 0 3px rgba(107, 39, 64, 0.08);
    background: #fff;
}
.ck-inst-opt b { font-size: 13px; font-weight: 600; }
.ck-inst-opt span { font-size: 12px; color: var(--usl-ink-soft); }
.ck-inst-opt em { font-size: 11px; font-style: normal; color: var(--usl-ink-faint); }

.ck-secure-note {
    display: flex; align-items: flex-start; gap: 9px;
    margin-top: 14px; padding: 11px 13px;
    border-radius: 10px; background: var(--usl-accent-soft);
    color: var(--usl-accent-dark); font-size: 12px; line-height: 1.5;
}
.ck-secure-note svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }

/* PayTR bilgilendirmesi: kart alanının yerini alır (kart formu PayTR iframe'inde) */
/* Bilgilendirme: tek satırlık ince şerit. Uzun paragraf ödeme adımını gereksiz
   uzatıyordu; asıl anlatım zaten PayTR'ın kendi ekranında. */
.ck-paytr-note {
    display: flex; align-items: center; justify-content: center;
    gap: 9px; flex-wrap: wrap;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--usl-border); border-radius: 10px;
    background: var(--usl-surface); color: var(--usl-ink-soft);
    font-size: 12.5px; line-height: 1.45; text-align: center;
}
.ck-paytr-note svg.ck-paytr-kalkan { width: 16px; height: 16px; flex: none; color: var(--usl-success); }
.ck-paytr-note .ck-paytr-logo { flex: none; display: inline-flex; }
.ck-paytr-note .ck-paytr-logo svg { display: block; }

/* ── Ödeme sayfası sepet satırları: görsel + adet + kaldır ── */
.ck-sepet-liste { display: flex; flex-direction: column; }
.ck-sepet-satir {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--usl-border);
}
.ck-sepet-satir:last-child { border-bottom: 0; }
.ck-sepet-gorsel {
    flex: none; width: 56px; height: 72px; border-radius: 8px; overflow: hidden;
    background: var(--ground-raised); display: grid; place-items: center;
}
.ck-sepet-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-sepet-gorsel-yok { color: var(--usl-ink-faint); }
.ck-sepet-gorsel-yok svg { width: 22px; height: 22px; }

.ck-sepet-bilgi { flex: 1 1 auto; min-width: 0; }
.ck-sepet-ad {
    display: block; font-size: 13.5px; line-height: 1.35; color: var(--usl-ink);
    /* Uzun ürün adları satırı şişirmesin: en fazla iki satır. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ck-sepet-varyant {
    display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 20px;
    background: var(--ground-raised); color: var(--usl-ink-soft); font-size: 11px;
}
.ck-sepet-birim { display: block; margin-top: 4px; font-size: 11.5px; color: var(--usl-ink-faint); }

.ck-sepet-sag { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.ck-adet {
    display: inline-flex; align-items: center; border: 1px solid var(--usl-border);
    border-radius: 999px; background: #fff; overflow: hidden;
}
.ck-adet-btn {
    width: 28px; height: 28px; border: 0; background: none; cursor: pointer;
    font-size: 16px; line-height: 1; color: var(--usl-ink-soft); font-family: inherit;
}
.ck-adet-btn:hover:not(:disabled) { background: var(--ground-raised); color: var(--usl-ink); }
.ck-adet-btn:disabled { opacity: .45; cursor: default; }
.ck-adet-deger {
    min-width: 28px; text-align: center; font-size: 13px; font-weight: 700;
    font-family: var(--nums-condensed); color: var(--usl-ink);
}
.ck-sepet-tutar {
    font-size: 14px; font-weight: 700; color: var(--usl-ink);
    font-family: var(--nums-condensed);
}
.ck-sepet-sil {
    border: 0; background: none; cursor: pointer; padding: 2px;
    color: var(--usl-ink-faint); line-height: 0;
}
.ck-sepet-sil:hover { color: var(--usl-danger); }
.ck-sepet-sil svg { width: 15px; height: 15px; }

/* Ara toplam: sepet ile gönderim seçimi arasında nefes payı */
.ck-ara-toplam {
    padding-top: 12px; margin-bottom: 16px;
    border-top: 1px solid var(--usl-border);
    font-size: 14px; font-weight: 600; color: var(--usl-ink);
}
.ck-bolum-basligi {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--usl-ink-faint); margin-bottom: 8px;
}
/* Toplamlar bloğu: seçimlerden ayrılsın */
.ck-toplamlar { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--usl-border); }

@media (max-width: 520px) {
    .ck-sepet-gorsel { width: 46px; height: 60px; }
    .ck-sepet-sag { gap: 5px; }
    .ck-sepet-ad { font-size: 12.5px; }
}

/* ── Gönderim yöntemi seçimi (kargo firmaları + mağazadan teslim) ── */
.ck-gonderim-secenekler { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.ck-gonderim-secenek {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--usl-border); border-radius: 12px;
    background: var(--usl-surface-raised); cursor: pointer; transition: border-color .15s, background .15s;
}
.ck-gonderim-secenek:hover { border-color: var(--usl-accent-soft); }
.ck-gonderim-secenek.is-active { border-color: var(--sage); background: var(--sage-tint); }
.ck-gonderim-secenek input[type="radio"] { flex: none; width: 17px; height: 17px; accent-color: var(--sage); }
.ck-gonderim-govde { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; }
.ck-gonderim-ikon {
    flex: none; width: 34px; height: 34px; border-radius: 9px;
    display: grid; place-items: center; background: var(--ground-raised); color: var(--usl-ink);
}
.ck-gonderim-ikon svg { width: 19px; height: 19px; }
.ck-gonderim-logo {
    flex: none; width: 56px; height: 34px; display: grid; place-items: center;
    background: #fff; border: 1px solid var(--usl-border); border-radius: 8px;
}
.ck-gonderim-logo img { max-width: 48px; max-height: 24px; object-fit: contain; display: block; }
.ck-gonderim-metin { min-width: 0; }
.ck-gonderim-metin strong { display: block; font-size: 13.5px; color: var(--usl-ink); }
/* Baslik icindeki "(Ucretsiz)" rozeti: ayri sutuna gerek birakmaz. */
.ck-gonderim-metin strong .ck-kargo-bedava { font-size: 12.5px; font-weight: 700; }
.ck-gonderim-metin small { display: block; font-size: 11.5px; color: var(--usl-ink-soft); margin-top: 2px; line-height: 1.4; }
.ck-gonderim-metin small.ck-gonderim-stok { color: var(--sage); }
.ck-gonderim-ucret { flex: none; font-size: 13.5px; font-weight: 700; color: var(--usl-ink); }
@media (max-width: 520px) {
    /* Dar ekranda satir sarabilir; radyo dugmesi metnin ilk satiriyla hizali dursun,
       dikeyde ortalanip yukarida asili kalmasin. */
    .ck-gonderim-secenek { flex-wrap: wrap; align-items: flex-start; padding: 11px 12px; }
    .ck-gonderim-secenek input[type="radio"] { margin-top: 2px; }
    .ck-gonderim-govde { align-items: flex-start; gap: 9px; }
    .ck-gonderim-logo { width: 48px; height: 30px; }
    .ck-gonderim-ucret { margin-left: auto; }
}

/* Magazadan teslim secilince acilan magaza listesi */
.ck-magaza-secim {
    margin: -2px 0 4px; padding: 10px 12px;
    border: 1px dashed var(--usl-border); border-radius: 10px;
    background: var(--usl-surface);
}
.ck-magaza-secim[hidden] { display: none; }
.ck-magaza-secim label {
    display: block; font-size: 11.5px; font-weight: 600;
    color: var(--usl-ink-soft); margin-bottom: 5px;
}
.ck-magaza-secim select { width: 100%; margin: 0; }
.ck-magaza-adres {
    margin: 7px 0 0; font-size: 12px; line-height: 1.45; color: var(--usl-ink-soft);
}
.ck-kargo-ipucu[hidden] { display: none; }

/* ── Gönderim bloğu: ücret/ücretsiz durumu + anlaşmalı kargo firmaları ──
   Sipariş özetinden ayrı okunsun diye kendi zemini ve paket ikonu var. */
.gonderim-blok {
    margin-top: 14px; padding: 13px 14px;
    border: 1px solid var(--usl-border); border-radius: 12px;
    background: var(--ground-raised);
}
.gonderim-ust { display: flex; align-items: center; gap: 11px; }
.gonderim-ikon {
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    background: #fff; color: var(--sage);
}
.gonderim-ikon svg { width: 19px; height: 19px; }
/* Tek satirlik mesaj: dikeyde yer kaplamasin diye baslik + paragraf yerine tek cumle. */
.gonderim-metin { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--usl-ink-soft); }
.gonderim-metin strong { color: var(--usl-ink); font-weight: 700; }
.gonderim-metin strong.gonderim-bedava { color: var(--sage); }

.gonderim-firmalar { margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--usl-border); }
.gonderim-firmalar-baslik {
    display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--usl-ink-faint); margin-bottom: 7px;
}
.gonderim-firma-listesi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gonderim-firma {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 4px 10px; border-radius: 8px;
    background: #fff; border: 1px solid var(--usl-border);
}
.gonderim-firma img { max-height: 24px; max-width: 96px; object-fit: contain; display: block; }
.gonderim-firma-ad { font-size: 12px; font-weight: 600; color: var(--usl-ink-soft); }

/* Sipariş özeti: ara toplam / kargo satırları ve ücretsiz kargo ipucu */
.ck-total-row--ara { font-size: 13px; color: var(--usl-ink-soft); font-weight: 400; }
.ck-kargo-bedava { color: var(--usl-success); font-weight: 700; }
.ck-kargo-ipucu {
    margin: 2px 0 8px; padding: 8px 11px; border-radius: 9px;
    background: var(--sage-tint); color: #3f5638;
    font-size: 12px; line-height: 1.45; text-align: center;
}

/* Üyenin kayıtlı adresi ile önden doldurulan teslimat bölümü */
.ck-teslimat-baslik {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
/* Olumlu bir bildirim: pembe/bordo dolgu uyarı gibi okunuyordu. */
.ck-uye-rozet {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 20px;
    background: var(--sage-tint); color: #3f5638;
    font-size: 11.5px; font-weight: 600;
}
.ck-uye-rozet svg { width: 13px; height: 13px; flex: none; }
.ck-uye-not {
    margin: 0 0 12px; font-size: 12px; line-height: 1.5;
    color: var(--usl-ink-soft);
}

/* PayTR ödeme çerçevesi — sayfaya gömülü (açılır pencere değil).
   Kart içinde ikinci bir kart görünmesin diye kendi çerçevesi/zemini YOKTUR;
   teslimat bölümü gibi düz bir bölüm olarak akar. */
.ck-odeme-panel { background: none; border: 0; }
.ck-odeme-panel-head {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.ck-odeme-panel-head h3 { margin: 0; }
/* Odenecek tutar: sepet karti gizlendigi icin burada hatirlatilir. */
.ck-odeme-tutar {
    font-family: var(--nums-condensed); font-size: 15px; font-weight: 700;
    color: var(--usl-ink);
}
.ck-odeme-geri {
    margin-left: auto; border: 0; background: none; cursor: pointer;
    color: var(--usl-ink-soft); font-size: 12.5px; font-family: inherit; padding: 2px;
}
.ck-odeme-geri:hover { color: var(--usl-ink); text-decoration: underline; }
.ck-odeme-yukleniyor {
    padding: 26px 4px; text-align: center;
    color: var(--usl-ink-soft); font-size: 13px;
}
/* iframeResizer yüksekliği devralana kadar geçerli taban yükseklik. PayTR kart formu
   + taksit şeridi + 3DS ekranı bu aralıkta kalıyor; düşük tutulursa çerçeve kendi
   içinde kayıyordu. Bağlanırsa yükseklik zaten içeriğe göre ayarlanır. */
/* Yukseklik neden ekrana gore?
   iframeResizer yalnizca PayTR'in KENDI odeme sayfasinda calisir; 3D Secure adiminda
   cerceve bankanin sayfasina gider ve orada boyut bildiren betik bulunmaz. Sabit buyuk
   bir yukseklik verince (860px) kisa iceriklerde altta genis bir bosluk kaliyordu.
   Bunun yerine cerceve ekranin makul bir orani kadar yer kaplar; icerik uzunsa
   scrolling="auto" ile kendi icinde kayar. */
.ck-odeme-frame {
    display: block; width: 100%; border: 0;
    height: 640px; max-height: calc(100vh - 180px); min-height: 460px;
}
@supports (height: 100svh) {
    .ck-odeme-frame { max-height: calc(100svh - 180px); }
}
@media (max-width: 600px) {
    /* PayTR ekrani dar kolona sikisinca icerik uzuyor ve alt kismi kirpiliyordu.
       Panel, kartin yan dolgusundan tasirilarak cerceveye tam genislik verilir. */
    .ck-odeme-panel { margin-left: -14px; margin-right: -14px; }
    .ck-odeme-panel-head { padding-left: 14px; padding-right: 14px; }
    /* Mobilde odeme sayfasi gibi davransin: ekranin buyuk kismini kaplar,
       alt sekme cubugu ve baslik icin pay birakilir. */
    .ck-odeme-frame {
        height: calc(100vh - 210px);
        max-height: none; min-height: 420px;
    }
}
@supports (height: 100svh) {
    @media (max-width: 600px) {
        .ck-odeme-frame { height: calc(100svh - 210px); }
    }
}

/* ── PayTR taksit tablosu ──
   İçeriği PayTR'ın kendi betiği basar; aşağıdaki sınıf adları (taksit-tablosu-wrapper,
   taksit-tutari …) PayTR tarafından üretilir, değiştirilemez — yalnızca biçimlenir.
   PayTR'ın örnek CSS'i Arial/gri iken burada site paletine uyarlanmıştır. */
.paytr-taksit-blok {
    border: 1px solid var(--usl-border); border-radius: 12px;
    padding: 14px 16px 10px; margin-top: 14px; background: var(--usl-surface-raised);
}
.paytr-taksit-baslik {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.paytr-taksit-baslik h3 { margin: 0; font-size: 14px; }
.paytr-taksit-baslik span { font-size: 12px; color: var(--usl-ink-soft); }
/* Sekme içinde kullanıldığında panel başlığı zaten var; blok kendi çerçevesini bırakır. */
.paytr-taksit-blok--sade { border: 0; padding: 0; margin-top: 0; }
.paytr-taksit-not {
    margin: 8px 0 4px; font-size: 11.5px; line-height: 1.5; color: var(--usl-ink-faint);
}
/* Katlanır kip: blok kapalı gelir, başlığına tıklayınca açılır (<details>). */
.paytr-taksit-blok--katlanir { padding: 0; overflow: hidden; }
.paytr-taksit-ozet {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px; cursor: pointer; list-style: none;
}
.paytr-taksit-ozet::-webkit-details-marker { display: none; }
.paytr-taksit-ozet:hover { background: var(--ground-raised); }
.paytr-taksit-ozet-ikon {
    flex: none; width: 32px; height: 32px; border-radius: 9px;
    display: grid; place-items: center;
    background: var(--ground-raised); color: var(--usl-ink);
}
.paytr-taksit-ozet-ikon svg { width: 18px; height: 18px; }
.paytr-taksit-ozet-metin { flex: 1 1 auto; min-width: 0; }
.paytr-taksit-ozet-metin strong { display: block; font-size: 13.5px; color: var(--usl-ink); }
.paytr-taksit-ozet-metin small { display: block; font-size: 11.5px; color: var(--usl-ink-soft); margin-top: 2px; }
.paytr-taksit-ozet-ok {
    flex: none; color: var(--usl-ink-soft); display: grid; place-items: center;
    transition: transform .18s;
}
.paytr-taksit-ozet-ok svg { width: 18px; height: 18px; }
.paytr-taksit-blok--katlanir[open] .paytr-taksit-ozet-ok { transform: rotate(180deg); }
.paytr-taksit-blok--katlanir[open] .paytr-taksit-ozet { border-bottom: 1px solid var(--usl-border); }
.paytr-taksit-blok--katlanir .paytr-taksit-govde { padding: 13px 14px 10px; }

/* "Burada seçim yapılmaz" uyarısı — tablonun üstünde, gözden kaçmasın diye vurgulu. */
.paytr-taksit-uyari {
    margin: 0 0 12px; padding: 9px 12px;
    border-radius: 9px; background: var(--sage-tint); color: #3f5638;
    font-size: 12px; line-height: 1.5;
}
.paytr-taksit-uyari strong { font-weight: 700; }

/* Kaydırma okları tablonun iki yanında yüzer; taşma yoksa gizli kalır. */
.paytr-taksit-sarmal { position: relative; }
.paytr-taksit-ok {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--usl-border); background: #fff; color: var(--usl-ink);
    display: grid; place-items: center; cursor: pointer; padding: 0;
    box-shadow: 0 2px 10px -4px rgba(43, 26, 31, .35);
}
.paytr-taksit-ok:hover { background: var(--ground-raised); }
.paytr-taksit-ok[hidden] { display: none; }
.paytr-taksit-ok svg { width: 17px; height: 17px; }
.paytr-taksit-ok--sol { left: -6px; }
.paytr-taksit-ok--sag { right: -6px; }
@media (max-width: 600px) {
    .paytr-taksit-ok--sol { left: -2px; }
    .paytr-taksit-ok--sag { right: -2px; }
}

#paytr_taksit_tablosu {
    clear: both; font-size: 12px; max-width: 1200px; text-align: center;
    font-family: inherit;
}
#paytr_taksit_tablosu::before { display: table; content: " "; }
#paytr_taksit_tablosu::after { content: ""; clear: both; display: table; }
#paytr_taksit_tablosu .taksit-tablosu-wrapper {
    margin: 5px; width: 280px; padding: 12px; cursor: default; text-align: center;
    display: inline-block; border: 1px solid var(--usl-border); border-radius: 10px;
    vertical-align: top;
}
#paytr_taksit_tablosu .taksit-logo img { max-height: 28px; padding-bottom: 10px; }
#paytr_taksit_tablosu .taksit-tutari-text {
    float: left; width: 126px; color: var(--usl-ink-faint); margin-bottom: 5px;
}
#paytr_taksit_tablosu .taksit-tutar-wrapper {
    display: inline-block; background-color: #f7f5f3; border-radius: 8px; overflow: hidden;
}
#paytr_taksit_tablosu .taksit-tutar-wrapper:hover { background-color: #efeae6; }
#paytr_taksit_tablosu .taksit-tutari {
    float: left; width: 126px; padding: 6px 0; color: var(--usl-ink);
    border: 2px solid #ffffff;
}
#paytr_taksit_tablosu .taksit-tutari-bold { font-weight: 700; }
/* Tutar değişince tablo yeni tutarla yeniden yükleniyor: başlıktaki rakam hemen
   güncellendiği için tablonun kısa süre eski tutarı göstermesi yanıltıcı olurdu. */
.paytr-taksit-blok[aria-busy="true"] #paytr_taksit_tablosu {
    opacity: 0.45; transition: opacity 0.15s ease;
}
/* "Vade farkı yok" rozeti satırın altına, iki hücrenin tam genişliğine oturur —
   hücreler float olduğu için clear:both olmadan yan yana kayardı. */
/* Vade farksiz satirin tutarlari koyu yazilir: metinde "koyu olanlar vade farksiz"
   denildigi icin gorsel ipucu ile metin ayni seyi soylemeli. */
#paytr_taksit_tablosu .paytr-vadesiz-satir .taksit-tutari { font-weight: 700; color: var(--usl-ink); }
#paytr_taksit_tablosu .paytr-vade-yok {
    float: left; clear: both; width: 100%;
    padding: 2px 0 4px; font-size: 10.5px; font-weight: 600;
    color: var(--usl-success, #4a7c59);
}
@media all and (max-width: 600px) {
    #paytr_taksit_tablosu .paytr-vade-yok { width: 100%; }
}
@media all and (max-width: 600px) {
    /* PayTR hücreleri 126px sabit; dar ekranda yan yana sığmayıp alt alta düşüyordu.
       Yüzdeye çevrilir, kart da ekran genişliğine göre esner. */
    #paytr_taksit_tablosu .taksit-tablosu-wrapper {
        margin: 5px 0; width: 100%; max-width: 340px;
        padding: 12px 10px; box-sizing: border-box;
    }
    #paytr_taksit_tablosu .taksit-tutar-wrapper { display: block; width: 100%; }
    #paytr_taksit_tablosu .taksit-tutari,
    #paytr_taksit_tablosu .taksit-tutari-text {
        width: 50%; box-sizing: border-box;
    }
    #paytr_taksit_tablosu .paytr-vade-yok { width: 100%; }
}

/* Kaydırılabilir kip: kartlar alt alta yayılmak yerine tek sırada yan yana durur,
   yatayda kaydırılır. Ödeme sayfasını gereksiz uzatmamak için. */
.paytr-taksit-blok--kaydir #paytr_taksit_tablosu {
    display: flex; flex-wrap: nowrap; gap: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; text-align: left;
}
.paytr-taksit-blok--kaydir #paytr_taksit_tablosu::before,
.paytr-taksit-blok--kaydir #paytr_taksit_tablosu::after { content: none; display: none; }
.paytr-taksit-blok--kaydir #paytr_taksit_tablosu .taksit-tablosu-wrapper {
    flex: 0 0 auto; scroll-snap-align: start; margin: 0 8px 0 0;
}
.paytr-taksit-blok--kaydir #paytr_taksit_tablosu::-webkit-scrollbar { height: 7px; }
.paytr-taksit-blok--kaydir #paytr_taksit_tablosu::-webkit-scrollbar-thumb {
    background: var(--usl-border); border-radius: 4px;
}
@media all and (max-width: 600px) {
    /* Kaydırılabilir kip: kart, ekranın neredeyse tamamını kaplar ki iki sütun
       (taksit tutarı / toplam) yan yana okunabilsin. */
    .paytr-taksit-blok--kaydir #paytr_taksit_tablosu .taksit-tablosu-wrapper {
        width: min(300px, calc(100vw - 78px));
        max-width: none;
    }
}

/* Güvenli ödeme / 3D Secure katmanı */
.ck-3ds-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(28, 16, 20, 0.72);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ck-3ds-overlay[hidden] { display: none; }
.ck-3ds-box {
    width: min(560px, 100%); height: min(760px, 92vh);
    background: #fff; border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}
.ck-3ds-head {
    display: flex; align-items: center; gap: 9px;
    padding: 13px 16px; border-bottom: 1px solid var(--usl-border);
    font-size: 13.5px; color: var(--usl-ink);
}
.ck-3ds-head strong { flex: 1; font-weight: 600; }
.ck-3ds-dot {
    width: 9px; height: 9px; border-radius: 50%; background: var(--usl-success);
    box-shadow: 0 0 0 4px rgba(95, 115, 80, 0.16);
}
.ck-3ds-close {
    border: none; background: none; font-size: 22px; line-height: 1;
    color: var(--usl-ink-faint); cursor: pointer; padding: 0 4px;
}
.ck-3ds-close:hover { color: var(--usl-ink); }
.ck-3ds-frame { flex: 1; width: 100%; border: none; background: #fff; }
.ck-3ds-foot {
    padding: 10px 16px; border-top: 1px solid var(--usl-border);
    font-size: 11.5px; color: var(--usl-ink-soft); text-align: center;
}
.ck-3ds-link {
    border: none; background: none; padding: 0;
    color: var(--usl-accent); font: inherit; text-decoration: underline; cursor: pointer;
}

.ck-confirm-icon--fail { background: #fbe6e4; color: var(--usl-danger); }

@media (max-width: 560px) {
    .ck-cc-area { padding: 14px; }
    .ck-grid-3 { grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
    .ck-pay-method { padding: 12px 13px; }
    .ck-pay-method-tag { display: none; }
}

/* ================= ADMIN PANEL ================= */
/* Admin bir çalışma aracıdır — burada editoryal serif değil, temiz/işlevsel sans tipografi kullanılır. */
.admin-layout, .admin-layout h1, .admin-layout h2, .admin-layout h3,
.admin-top-bar, .admin-content-header, .admin-card-header {
    font-family: var(--sans) !important;
    font-weight: inherit;
    letter-spacing: normal;
}
.admin-content-header h1 { font-weight: 700 !important; color: var(--ink) !important; }
.admin-card-header h2, .admin-card-header h3 { font-weight: 700 !important; color: var(--ink) !important; }
body { background: var(--ground); }
.admin-content { background: var(--ground); }
.admin-sidebar { background: var(--ink); border-right-color: #3a2a2f; }
.admin-sidebar-header { border-bottom-color: #3a2a2f; }
.admin-sidebar-header i { color: var(--accent-soft) !important; }
.admin-nav-item { color: #cbb9b4; }
.admin-nav-item:hover { color: #fff; }
.admin-nav-item.active { background: rgba(201,140,160,0.14) !important; color: var(--accent-soft) !important; border-left-color: var(--accent-soft) !important; }
.admin-sidebar-footer { border-top-color: #3a2a2f; }
.admin-sidebar-footer a { color: #cbb9b4; }
.admin-sidebar-footer a:hover { color: var(--accent-soft) !important; }
.admin-content-header h1 i { color: var(--accent) !important; }
.admin-card { background: #fff; border-color: var(--line); border-radius: 10px; }
.admin-card-header { border-bottom-color: var(--ground-raised); }
.admin-card-header h2 i { color: var(--accent) !important; }
.admin-empty i { color: var(--line) !important; }

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-tint) !important;
}
.btn-test { color: var(--usl-accent-dark) !important; }
.btn-test:hover { background: var(--accent-tint) !important; }
.toggle-pw:hover { color: var(--accent) !important; }
.shortcut-item:hover { border-color: var(--accent-soft) !important; background: var(--accent-tint) !important; }
.db-status.connected { color: var(--sage) !important; }
.settings-shortcut-active, .settings-shortcut-card:hover { border-color: var(--accent) !important; background: var(--accent-tint) !important; }
.settings-shortcut-card i { color: var(--accent) !important; }
.btn-save, .btn-save-sm { background: var(--accent) !important; }
.btn-save:hover, .btn-save-sm:hover { background: var(--usl-accent-dark) !important; }
.admin-nav-badge { background: var(--danger) !important; }

/* ── Cerez onay bandı ── */
.cookie-consent-icon { background: linear-gradient(135deg, var(--accent), var(--usl-accent-dark)) !important; }
.cookie-consent-link { color: var(--accent) !important; }
.cookie-consent-btn-primary { background: linear-gradient(135deg, var(--accent), var(--usl-accent-dark)) !important; }

/* =====================================================================
   YENİ TASARIM — Urban Outfitters + tezenis.com esintili anasayfa/ürün
   sayfası bileşenleri (mega menü, mobil çekmece, arama paneli, yatay
   raylar, pill filtreler, PDP mobil galeri + sabit alt bar).
   Marka paletini (--ground/--ink/--accent/--line/--card) değiştirmez,
   sadece üstüne yeni bileşenler ekler.
   ===================================================================== */

/* ── Ana slider: tam genişlik, görsel üzeri yazı (eski yan-yana split hero'nun yerine) ──
   .container'ın max-width'inden taşıp tam viewport genişliğine yayılır (edge-to-edge). */
.usl-hero-slide {
    position: relative; min-height: 460px; display: flex; align-items: flex-end;
    padding: 56px clamp(24px, 5vw, 64px); color: #fff;
    background-size: cover; background-position: center; overflow: hidden;
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    --hero-zoom: 1; --hero-x: 0%; --hero-y: 0%;
}
.usl-hero-media-frame {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.usl-hero-media-frame > picture {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%;
}
.usl-hero-media-frame > .usl-hero-media,
.usl-hero-media-frame > picture > .usl-hero-media,
.usl-hero-media-frame > .usl-hero-poster > img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    /* contain: zoom=1 iken orijinal medyanın tamamı görünür; kullanıcı zoom/pan ile kadraja oturtur */
    object-fit: contain; object-position: center;
    transform: translate(var(--hero-x), var(--hero-y)) scale(var(--hero-zoom));
    transform-origin: center center; will-change: transform;
}
.usl-hero-media-frame > .usl-hero-poster { z-index: 0; }
.usl-hero-media-frame > video.usl-hero-media { z-index: 1; }
.usl-hero-media-frame > video.usl-hero-media.has-poster {
    /* Poster altta; video oynarken ustte — opacity 0 yapma (oynasa bile gorunmez kaliyordu) */
    opacity: 1;
}
.usl-hero-media-frame > video.usl-hero-media.has-poster:not(.is-ready) {
    opacity: 0;
    transition: opacity .2s ease;
}
.usl-hero-media-frame > video.usl-hero-media.has-poster.is-ready { opacity: 1; }
.usl-hero-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(20,10,13,0.72) 0%, rgba(20,10,13,0.2) 55%, rgba(20,10,13,0) 78%),
                linear-gradient(0deg, rgba(20,10,13,0.55) 0%, rgba(20,10,13,0) 48%);
}
.usl-hero-inner { position: relative; z-index: 2; max-width: 480px; pointer-events: auto; }
.usl-hero-tag {
    display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    background: rgba(255,255,255,0.18); padding: 5px 14px; border-radius: 999px; margin-bottom: 16px; backdrop-filter: blur(6px);
}
.usl-hero-inner h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 58px); line-height: 1.05; margin: 0 0 14px; color: #fff; max-width: none; }
.usl-hero-inner p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.88); max-width: 40ch; margin: 0 0 22px; }
.usl-hero-inner .btn-primary { border-radius: 999px; }
.usl-hero-inner .stock-proof { color: #fff; }
.usl-hero-inner .stock-proof .dot-live { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.35); }
@media (max-width: 640px) { .usl-hero-slide { min-height: 400px; padding: 32px 20px; } }
/* ── Hero "fit" modu: bölüm yüksekliği medyanın gerçek oranından (aspect-ratio) gelir —
   sabit 460px + contain'in bıraktığı üst/alt boş bantlar kalkar. min-height yalnızca
   aşırı geniş (çok basık) görsellerde yazının sığması için alt sınır olarak kalır. ── */
.usl-hero-slide.usl-hero-fit { min-height: 300px; max-height: 520px; }
.usl-hero-slide.usl-hero-fit .usl-hero-media,
.usl-hero-slide.usl-hero-fit .usl-hero-poster > img { object-fit: cover; }
/* NOT: Burada "prefers-reduced-motion: reduce" iken hero videosunu opacity:0 !important ile
   gizleyen bir kural vardi. Video aslinda OYNUYOR, yalnizca gorunmez kaliyordu; kullanici
   "slider videosu baslamiyor" olarak yasiyordu. Windows'ta "Animasyon efektleri" kapali olan
   herkes (cok yaygin bir performans tercihi) bu duruma dusuyordu ve kolaj videosu oynamaya
   devam ettigi icin sonuc tutarsizdi. Arka plan videolari artik her ayarda gorunur. */
@media (max-width: 640px) { .usl-hero-slide.usl-hero-fit { min-height: 220px; max-height: 420px; } }

/* ── Mobil hero: yazılar masaüstü clamp'inden 34px tabanla geliyordu — kısa (orana göre
   daralan) slaytta tüm görseli kaplıyordu. Site geneli hiyerarşiye uygun küçültme. ── */
@media (max-width: 640px) {
    .usl-hero-slide { padding: 22px 16px; }
    .usl-hero-tag { font-size: 9.5px; padding: 4px 10px; margin-bottom: 8px; }
    .usl-hero-inner h1 { font-size: 23px; margin-bottom: 8px; }
    .usl-hero-inner p { font-size: 12px; line-height: 1.5; margin-bottom: 12px; max-width: 36ch; }
    .usl-hero-inner .btn-primary { padding: 10px 18px; font-size: 12.5px; }
    .usl-hero-inner .stock-proof { font-size: 10.5px; }
}

/* Slider altındaki ilk bölüm (Kategoriler) slidera daha yakın dursun. */
.trust-strip + .section { padding-top: 20px; }

/* ── Basit ikon buton (header'daki eski .icon-btn'i bozmadan yeni ihtiyaçlar için) ── */
.usl-icon-btn {
    background: none; border: 0; color: var(--ink); padding: 4px;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ── Hamburger (mobil menü açma) / mobil arama tetikleyici ── */
.usl-hamburger, .usl-search-trigger { display: none; }
.usl-header-left { display: contents; }
@media (max-width: 980px) {
    .usl-hamburger, .usl-search-trigger { display: inline-flex; }
}

/* ── Mega menü (masaüstü, hover ile açılır) ── */
.usl-nav-item { position: relative; display: flex; align-items: center; }
.usl-mega {
    position: absolute; top: 100%; left: 0; margin-top: 1px;
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
    display: flex; min-width: 600px;
    opacity: 0; visibility: hidden; pointer-events: none; z-index: 45;
    transition: opacity .16s ease, transform .16s ease; transform: translateY(4px);
}
.usl-nav-item:hover .usl-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.usl-mega-links { flex: 1; padding: 26px 30px 28px; }
.usl-mega-top {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.usl-mega-fam { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.usl-mega-all {
    display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: #a8938b; text-decoration: none;
}
.usl-mega-all:hover { color: var(--ink-soft); }
.usl-mega-cols { display: grid; grid-template-columns: repeat(3, 140px); gap: 24px 26px; }
.usl-mega-col a {
    font-size: 13px; color: var(--ink-soft); text-decoration: none; display: flex;
    align-items: baseline; justify-content: space-between; gap: 8px;
}
.usl-mega-col a:hover { color: var(--accent); }
.usl-mega-col a small { color: #a8938b; font-size: 11px; }
.usl-mega-promo {
    position: relative; width: 192px; flex-shrink: 0; border-left: 1px solid var(--line);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: #fff; text-decoration: none;
}
.usl-mega-promo-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,10,13,0.74) 0%, rgba(20,10,13,0) 58%); }
.usl-mega-promo-content { position: relative; z-index: 1; }
.usl-mega-promo-eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.78); margin-bottom: 6px; }
.usl-mega-promo-text { font-size: 15px; font-weight: 700; line-height: 1.28; text-transform: uppercase; margin-bottom: 12px; font-family: var(--serif); }
.usl-mega-promo-link { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
@media (max-width: 980px) { .usl-mega { display: none !important; } }

/* ── Mobil açılır menü (tam ekran çekmece) ── */
.usl-mobile-nav {
    position: fixed; inset: 0; z-index: 3000; background: #fff;
    transform: translateX(-100%); transition: transform .25s ease;
    display: flex; flex-direction: column; overflow-y: auto;
}
.usl-mobile-nav.open { transform: translateX(0); }
.usl-mobile-nav-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.usl-mobile-nav-list { padding: 4px 18px 8px; display: flex; flex-direction: column; }

/* ── Yardımcı bağlantılar satırı (Sipariş Takibi / Mağazalar / Hediye Çeki / Uygulamayı İndir / Yardım) ── */
.usl-mnav-utility { padding: 6px 18px 44px; display: flex; flex-direction: column; border-top: 8px solid var(--ground); }
.usl-mnav-utility a {
    display: flex; align-items: center; gap: 12px; padding: 14px 2px;
    font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none;
    border-bottom: 1px solid var(--line);
}
.usl-mnav-utility a:last-child { border-bottom: none; }
.usl-mnav-utility a svg { width: 18px; height: 18px; color: var(--ink-soft); flex-shrink: 0; }
.usl-mnav-item { border-bottom: 1px solid var(--line); }
.usl-mnav-top {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 16px 2px; font-size: 14.5px; font-weight: 700; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--ink); background: none; border: 0; text-align: left;
    font-family: var(--sans); text-decoration: none; cursor: pointer;
}
.usl-mnav-caret { width: 12px; height: 12px; flex-shrink: 0; color: #a8938b; transition: transform .2s ease; }
.usl-mnav-item.expanded .usl-mnav-caret { transform: rotate(180deg); }
.usl-mnav-sub { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.usl-mnav-item.expanded .usl-mnav-sub { max-height: 640px; }
.usl-mnav-sub-inner { padding: 0 2px 20px 6px; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.usl-mnav-sub-inner a { font-size: 13.5px; color: var(--ink-soft); text-decoration: none; }

/* ── Mobil menü: aile sekmeleri (tezenis.com mobil menüsüyle birebir — Kadın/Erkek/Kız Çocuk/Erkek Çocuk sekmeleri) ── */
.usl-mnav-famtabs {
    display: flex; gap: 26px; padding: 0 18px; border-bottom: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none; flex-shrink: 0;
}
.usl-mnav-famtabs::-webkit-scrollbar { display: none; }
.usl-mnav-famtab {
    background: none; border: 0; padding: 14px 0 12px; margin-bottom: -1px;
    font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: #a8938b; border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; font-family: var(--sans);
}
.usl-mnav-famtab.active { color: var(--ink); border-bottom-color: var(--ink); }
.usl-mnav-viewall {
    display: block; padding: 14px 2px; font-size: 13px; font-weight: 700; color: var(--accent);
    text-decoration: none; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: 0.04em;
}
.usl-mnav-catlink {
    display: block; padding: 14px 2px; font-size: 14px; color: var(--ink); text-decoration: none;
    border-bottom: 1px solid var(--line);
}
.usl-mnav-catlink:last-child { border-bottom: none; }

/* ── Üstten açılır arama paneli (header'ın hemen altına, sticky header'a göre konumlanır) ── */
.usl-search-overlay {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.usl-search-overlay.open { max-height: 280px; }
.usl-search-overlay-inner { display: flex; align-items: center; gap: 14px; padding: 24px clamp(22px,3vw,52px) 16px; max-width: 1480px; margin: 0 auto; }
.usl-search-overlay-inner input {
    flex: 1; border: 0; background: none; font-size: 21px; font-weight: 600; color: var(--ink);
    padding: 6px 0 10px; border-bottom: 1.5px solid var(--line); font-family: var(--sans);
}
.usl-search-overlay-inner input:focus { outline: none; border-bottom-color: var(--ink); }
@media (max-width: 640px) { .usl-search-overlay-inner input { font-size: 17px; } }
.usl-search-overlay-suggest { max-width: 1480px; margin: 0 auto; padding: 2px clamp(22px,3vw,52px) 24px; }
.usl-search-overlay-suggest .eyebrow { display: block; margin-bottom: 12px; }
.usl-search-overlay-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.usl-search-overlay-tags .usl-pill { cursor: pointer; padding: 8px 16px; font-size: 12px; }

/* ── Yatay kayan ürün rayı (indirim / trend / kombin) ── */
.rail {
    display: flex; gap: 18px; overflow-x: auto; padding-bottom: 6px;
    scroll-snap-type: x proximity; scrollbar-width: none;
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}
.rail::-webkit-scrollbar { display: none; }
.rail .product-card-wrap { flex: 0 0 220px; scroll-snap-align: start; position: relative; z-index: 5; }
@media (max-width: 640px) { .rail .product-card-wrap { flex: 0 0 64vw; } }

.usl-scroller { position: relative; width: 100%; max-width: 100%; min-width: 0; }
/* Ürün rayları: linkler kenar katmanının üstünde. Kolaj bölgelerine DOKUNMA —
   position:relative maskeyi/videoyu bozuyordu. */
.usl-scroller .rail .product-card-wrap,
.usl-scroller .usl-klk-tile,
.usl-scroller .usl-ess-card {
    position: relative;
    z-index: 5;
}
.usl-scroll-hint {
    display: none; position: absolute; top: 45%; right: 4px; z-index: 3;
    width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid var(--line);
    box-shadow: var(--shadow); align-items: center; justify-content: center; color: var(--ink-soft);
    pointer-events: none; animation: uslScrollNudge 1.6s ease-in-out infinite;
}
.usl-scroller.scrolled .usl-scroll-hint { opacity: 0; }
@keyframes uslScrollNudge { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(5px); } }
@media (max-width: 760px) { .usl-scroll-hint { display: flex; } }

/* Masaüstü: kenar gradient (sadece görsel) + ok butonları.
   pointer-events:none + düşük z-index — ürün linklerinin altında kalsın. */
.usl-scroll-edge {
    display: none; position: absolute; top: 0; bottom: 36px; width: 48px; z-index: 2;
    pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
.usl-scroll-edge--left {
    left: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 100%);
}
.usl-scroll-edge--right {
    right: 0;
    background: linear-gradient(270deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 100%);
}
.section--raised .usl-scroll-edge--left {
    background: linear-gradient(90deg, rgba(250,245,241,.9) 0%, rgba(250,245,241,0) 100%);
}
.section--raised .usl-scroll-edge--right {
    background: linear-gradient(270deg, rgba(250,245,241,.9) 0%, rgba(250,245,241,0) 100%);
}
.usl-scroller.has-overflow .usl-scroll-edge { display: block; }
.usl-scroller.has-overflow:not(.at-start) .usl-scroll-edge--left,
.usl-scroller.has-overflow:not(.at-end) .usl-scroll-edge--right { opacity: 1; }
.usl-scroll-nav {
    display: none; position: absolute; top: 42%; z-index: 14;
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
    background: #fff; color: var(--ink); box-shadow: var(--shadow);
    align-items: center; justify-content: center; cursor: pointer; padding: 0;
    transform: translateY(-50%);
    pointer-events: auto;
}
.usl-scroll-nav--prev { left: 8px; }
.usl-scroll-nav--next { right: 8px; }
.usl-scroll-nav:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.usl-scroller.has-overflow .usl-scroll-nav { display: flex; }
.usl-scroller.at-start .usl-scroll-nav--prev,
.usl-scroller.at-end .usl-scroll-nav--next { opacity: .35; pointer-events: none; }
.rail, .usl-brand-rail, .usl-essentials-rail, .usl-klk-scroll {
    cursor: default;
}
.rail a, .usl-essentials-rail a, .usl-klk-scroll a, .rail .product-card-wrap {
    cursor: pointer;
    position: relative;
    z-index: 1;
}
@media (max-width: 760px) {
    .usl-scroll-edge, .usl-scroll-nav { display: none !important; }
}

/* ── Esaslar / öne çıkan kategoriler eşit kart rayı ── */
.usl-essentials-rail { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.usl-essentials-rail::-webkit-scrollbar { display: none; }
.usl-ess-card {
    flex: 0 0 220px; position: relative; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden;
    display: flex; align-items: flex-end; padding: 18px; color: #fff; text-decoration: none;
    background-color: var(--card);
}
.usl-ess-card .usl-ess-media {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.usl-ess-card .usl-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,10,13,0.7) 0%, rgba(20,10,13,0) 55%); z-index: 1; }
.usl-ess-card .usl-content { position: relative; z-index: 2; }
.usl-ess-card .usl-eyebrow-light { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 6px; }
.usl-ess-card h3 { font-family: var(--serif); font-weight: 400; font-size: 18px; margin: 0; }
@media (max-width: 640px) { .usl-ess-card { flex: 0 0 66vw; } }

/* ── Kategori Kolajı: tek kompozisyon görseli, beyaz çizgili tıklanabilir bölgeler ── */
.usl-collage-scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.usl-collage-scroll::-webkit-scrollbar { display: none; }
/* Kolajın kaydırma oku: kolaj yalnızca <=640px'te kaydırılabilir olduğundan ok da o eşikte
   görünür (raylardaki genel 760px kuralından ayrışır — kaydırılamayan şeye ok gösterilmez). */
.usl-collage-scroll ~ .usl-scroll-hint { display: none; }
@media (max-width: 640px) { .usl-collage-scroll ~ .usl-scroll-hint { display: flex; } }
.usl-collage { position: relative; border-radius: 16px; overflow: hidden; line-height: 0; background: var(--card); }
.usl-collage > img, .usl-collage > video, .usl-collage > picture {
    width: 100%; display: block; position: relative; z-index: 0;
}
.usl-collage > picture > img { width: 100%; display: block; }
.usl-collage > .usl-collage-vp { position: relative; z-index: 0; }
/* Köşe maskesi (JS üretir): bölge delikleri dışında kalan her yer zemin rengi */
.usl-collage-mask { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }

/* Video/GIF kırpma penceresi: medya, kırpma oranlarıyla büyütülüp kaydırılır; taşan kenarlar gizlenir. */
.usl-collage-vp { position: relative; overflow: hidden; width: 100%; }
.usl-collage-vp > video,
.usl-collage-vp > img { position: absolute; display: block; object-fit: fill; }
.usl-collage-region {
    position: absolute; z-index: 2; box-sizing: border-box; text-decoration: none;
    /* Varsayılan zemin rengi; JS çalışınca kolajın gerçek zemininden dinamik güncellenir. */
    border: 2px solid var(--ground, #f3eae4);
    /* Ürün kartı görselleriyle aynı köşe yuvarlaklığı (16px) — bölgeler kart gibi görünür. */
    border-radius: 16px;
    display: flex; align-items: flex-end;
    padding: clamp(6px, 1.4vw, 18px);
    transition: background 0.25s ease;
}
.usl-collage-region:hover { background: rgba(255,255,255,0.12); }
.usl-collage-text { line-height: 1.3; }
.usl-collage-label {
    display: block; color: #fff; font-weight: 700;
    font-size: clamp(11px, 1.6vw, 20px);
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.usl-collage-sub {
    display: block; font-weight: 700; color: #E8B4C8;
    font-size: clamp(9px, 1.1vw, 13.5px);
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
    margin-top: 2px;
}
@media (max-width: 640px) {
    /* Mobil: resim viewport'a sıkıştırılmaz — büyük kalır, sağa kaydırılarak gezilir
       (raylardaki carousel davranışı). Yükseklik sabitlenir, genişlik orana göre taşar. */
    .usl-collage { width: max-content; border-radius: 16px; }
    .usl-collage > img, .usl-collage > video, .usl-collage > picture {
        width: auto; max-width: none; height: clamp(280px, 48vh, 430px);
    }
    .usl-collage > picture > img { width: auto; max-width: none; height: 100%; }
    /* Kırpma penceresi: yükseklik sabit, genişlik inline aspect-ratio'dan türetilir
       (içteki video inline yüzdelerle pencereye göre boyutlanır, ek kural gerekmez). */
    .usl-collage > .usl-collage-vp { width: auto; height: clamp(280px, 48vh, 430px); }
    .usl-collage-region { border-width: 1.5px; border-radius: 12px; }
    .usl-collage-label { font-size: 14.5px; }
    .usl-collage-sub { font-size: 11px; }
}

/* ── Kaydırma konum çubukları (yatay rayların altı — mobil + web; taşma yoksa JS gizler) ── */
.usl-scroll-bars {
    display: flex; gap: 8px; justify-content: center; margin-top: 14px; padding-bottom: 2px;
}
.usl-scroll-bars span {
    width: 46px; height: 3.5px; border-radius: 2px;
    background: #DCD4CE; transition: background 0.25s ease;
}
.usl-scroll-bars span.active { background: var(--ink); }
@media (min-width: 761px) {
    .usl-scroll-bars span { width: 56px; height: 3px; }
}

/* ── Koleksiyon: elle seçilen ürünlerden asimetrik 3:4 mozaik vitrin ──
   Birim hücre 3:4; g=3x3, b=2x2, s=1x1 — üç boy da 3:4 olduğundan fotoğraflar
   kırpılmadan oturur. Zemin sayfa ground'u (Kategoriler bölümüyle aynı). */
.section.usl-klk-section {
    /* .section'ın 56px üst padding'ini ez — Öne Çıkanlar / Kategoriler gibi sıkı */
    padding-top: 12px;
    padding-bottom: 36px;
}
.section--raised + .section.usl-klk-section {
    padding-top: 8px;
}
.usl-klk-section .section-head {
    margin-bottom: 14px;
    padding-bottom: 12px;
}
.usl-klk-scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.usl-klk-scroll::-webkit-scrollbar { display: none; }
.usl-klk-grid {
    --klk-u: 104px;
    --klk-gap: 10px;
    display: grid;
    grid-auto-flow: column dense;
    grid-template-rows: repeat(3, calc(var(--klk-u) * 4 / 3));
    grid-auto-columns: var(--klk-u);
    gap: var(--klk-gap);
    width: max-content;
}
.usl-klk-tile {
    position: relative; display: block; border-radius: 14px; overflow: hidden;
    background: var(--card); text-decoration: none; color: var(--ink);
    min-height: 0;
}
/* Grid hücresini doldur — height:% bazı tarayıcılarda çöküyordu */
.usl-klk-tile > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    background: var(--card);
}
.usl-klk-tile.g { grid-row: span 3; grid-column: span 3; }
.usl-klk-tile.b { grid-row: span 2; grid-column: span 2; }
/* Bilgi bandı: .product-fav-band gibi soldan sağa solan koyu şerit + beyaz yazı.
   Yazılar bandın içinde düşey ortalı (alta yapışık değil). */
.usl-klk-info {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 9px 12px;
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(90deg, rgba(107,90,86,0.85) 0%, rgba(107,90,86,0.55) 45%, rgba(107,90,86,0) 85%);
    color: #fff;
}
.usl-klk-info::before { display: none; }
.usl-klk-info > * { position: relative; z-index: 1; }
.usl-klk-info .ki-l { flex: 1; min-width: 0; }
.usl-klk-info .ki-name {
    font-size: 13px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(20,10,13,0.35);
    margin-bottom: 0;
    line-height: 1.25;
}
.usl-klk-info .ki-meta {
    font-size: 11.5px; color: #fff; margin-top: 2px;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 5px;
    text-shadow: 0 1px 2px rgba(20,10,13,0.3);
    line-height: 1.25;
    white-space: nowrap;
}
.usl-klk-info .ki-star { color: #fff; font-size: 9.5px; flex: none; }
.usl-klk-info .ki-dot { color: rgba(255,255,255,0.75); flex: none; }
.usl-klk-info .ki-price { color: #fff; font-weight: 500; flex: none; }
/* Çip küçük olduğu için TL burada oransal olarak daha büyük kalır (okunabilirlik). */
.ki-price .price-cur { font-size: 0.86em; margin-left: 3px; opacity: 0.9; }
.usl-klk-tile.g .usl-klk-info,
.usl-klk-tile.b .usl-klk-info {
    padding: 10px 12px;
    min-height: 0;
}
.usl-klk-tile.g .usl-klk-info .ki-l,
.usl-klk-tile.b .usl-klk-info .ki-l {
    max-width: calc(100% - 38px);
}
/* Sepet: ürün kartı .product-quick-add absolute kurallarını ezer */
.usl-klk-tile .ki-cart.product-quick-add {
    flex: none; border: 0; padding: 0; background: none;
    width: 22px; height: 22px; border-radius: 0;
    box-shadow: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
    transition: opacity 0.15s, transform 0.15s;
    /* .product-quick-add bottom/right konumunu iptal */
    position: relative; bottom: auto; right: auto; top: auto; left: auto;
}
.usl-klk-tile .ki-cart.product-quick-add svg { width: 19px; height: 19px; display: block; }
.usl-klk-tile .ki-cart.product-quick-add:hover {
    color: #fff; background: none; opacity: 0.85; transform: scale(1.06);
}
/* Dev / büyük: bilgi bandında sağda (alt şerit) */
.usl-klk-info .ki-cart {
    align-self: center;
    margin: 0;
    flex-shrink: 0;
}
/* Küçük karo: sağ üst */
.usl-klk-tile > .ki-cart--tr.product-quick-add {
    position: absolute;
    top: 8px; right: 8px; bottom: auto; left: auto;
    z-index: 3;
}
/* Küçük karo: ad yok — alçak koyu şerit */
.usl-klk-info--mini {
    padding: 7px 10px; gap: 0;
    min-height: 0;
}
.usl-klk-info--mini .ki-meta {
    margin-top: 0; font-size: 10px; gap: 4px;
    flex-wrap: nowrap; white-space: nowrap;
}
.usl-klk-info--mini .ki-star { font-size: 8px; }
.usl-klk-info--mini .ki-price { font-size: 10px; }
@media (max-width: 640px) {
    .usl-klk-scroll { overflow: visible; }
    .usl-klk-grid {
        width: 100%;
        grid-auto-flow: row dense;
        grid-template-rows: none;
        grid-auto-columns: unset;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: calc((100vw - 32px - 2 * var(--klk-gap)) / 3 * 1.3333);
    }
    .usl-klk-tile { border-radius: 12px; }
    .usl-klk-tile.g .usl-klk-info,
    .usl-klk-tile.b .usl-klk-info {
        padding: 9px 10px; gap: 7px; min-height: 0;
    }
    .usl-klk-info .ki-name { font-size: 12px; }
    .usl-klk-tile .ki-cart.product-quick-add { width: 20px; height: 20px; }
    .usl-klk-info--mini { padding: 6px 8px; }
    .usl-klk-tile > .ki-cart--tr.product-quick-add { top: 6px; right: 6px; }
    .usl-klk-tile.b.klk-b-trail { grid-column: 2 / span 2; }
    .usl-klk-scroll ~ .usl-scroll-hint { display: none; }
}

/* ── Promo banner ── */
.usl-promo-banner {
    background: var(--accent); color: #fff; border-radius: 16px;
    padding: 30px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.usl-promo-banner .big { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 4vw, 42px); line-height: 1; }
.usl-promo-banner .sub { font-size: 13.5px; opacity: 0.85; margin-top: 6px; }

/* ── Sevdiğimiz Markalar ── */
.usl-brand-rail { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.usl-brand-rail::-webkit-scrollbar { display: none; }
.usl-brand-chip {
    flex: 0 0 auto; padding: 22px 34px; border: 1px solid var(--line); border-radius: 14px;
    font-size: 19px; font-weight: 700; color: var(--ink-soft); background: var(--ground-raised);
    display: flex; align-items: center; justify-content: center; font-family: var(--serif);
    min-height: 72px;
}
.usl-brand-chip--logo {
    padding: 14px 28px; min-width: 140px; background: #fff;
}
.usl-brand-chip--logo img {
    display: block; max-height: 40px; max-width: 140px; width: auto; height: auto;
    object-fit: contain;
}

/* Opsiyonel: Sevdiğimiz Markalar — siyah-beyaz nostaljik logo görünümü */
.usl-brand-rail--bw .usl-brand-chip--logo {
    background: #f4f1ea;
    border-color: #d6d0c4;
}
.usl-brand-rail--bw .usl-brand-chip--logo img {
    filter: grayscale(1) contrast(1.18) brightness(0.9) sepia(0.28);
    opacity: 0.9;
    transition: filter 0.35s ease, opacity 0.35s ease;
}
.usl-brand-rail--bw .usl-brand-chip--logo:hover img {
    filter: grayscale(0.45) contrast(1.08) brightness(0.96) sepia(0.12);
    opacity: 1;
}
.usl-brand-rail--bw .usl-brand-chip:not(.usl-brand-chip--logo) {
    color: #5c564c;
    background: #f4f1ea;
    border-color: #d6d0c4;
}

/* ── Pill / badge chip filtreler — web'de kompakt yan yana ── */
.usl-pill-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: nowrap; align-items: center; }
.usl-pill {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 16px; border-radius: 999px; border: 1px solid var(--ink); background: transparent;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
    text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-family: var(--sans); line-height: 1.2;
}
.usl-pill:hover, .usl-pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (min-width: 761px) {
    .usl-pill { padding: 9px 18px; font-size: 12px; }
}
@media (max-width: 760px) {
    .usl-pill-row { gap: 7px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .usl-pill-row::-webkit-scrollbar { display: none; }
    .usl-pill { padding: 8px 14px; font-size: 11px; }
}

/* ── USL Journal (editoryal içerik kartları) ── */
.usl-journal-grid {
    display: grid;
    grid-template-columns: repeat(var(--jrnl-cols, 3), 1fr);
    gap: 24px;
}
/* Son sayfada az kart: per_page genişliğinde sabit kart, ortalanmış. */
.usl-journal-grid--sparse {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
.usl-journal-grid--sparse .usl-journal-card {
    flex: 0 0 calc((100% - 24px * (var(--jrnl-cols, 3) - 1)) / var(--jrnl-cols, 3));
    max-width: calc((100% - 24px * (var(--jrnl-cols, 3) - 1)) / var(--jrnl-cols, 3));
    width: calc((100% - 24px * (var(--jrnl-cols, 3) - 1)) / var(--jrnl-cols, 3));
    box-sizing: border-box;
}
@media (max-width: 860px) {
    .usl-journal-grid { grid-template-columns: 1fr; }
    .usl-journal-grid--sparse .usl-journal-card {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}
.usl-journal-card { text-decoration: none; color: var(--ink); display: block; }
.usl-journal-card .usl-thumb {
    aspect-ratio: 16/10; border-radius: 16px; margin-bottom: 16px; background-color: var(--card);
    overflow: hidden;
}
.usl-journal-card .usl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.usl-journal-card h3 { font-family: var(--serif); font-weight: 400; font-size: 19px; margin: 0 0 8px; line-height: 1.3; }
.usl-journal-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 10px; }
.usl-journal-card .usl-read { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
/* Sayfalama: 3'ten fazla yazı olunca altta numaralar */
.usl-journal-pager {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 28px; flex-wrap: wrap;
}
.usl-journal-pager__num,
.usl-journal-pager__btn {
    min-width: 36px; height: 36px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); color: var(--ink);
    text-decoration: none; font-size: 13.5px; font-weight: 600;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.usl-journal-pager__num:hover,
.usl-journal-pager__btn:hover {
    border-color: var(--accent); color: var(--accent);
}
.usl-journal-pager__num.is-active {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
/* Detay sayfası */
.usl-journal-article { max-width: 760px; margin: 0 auto; padding-top: 28px; padding-bottom: 56px; }
.usl-journal-back {
    display: inline-block; margin-bottom: 14px;
    font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.usl-journal-article h1 {
    font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 40px);
    line-height: 1.2; margin: 0 0 12px; color: var(--ink);
}
.usl-journal-lead { font-size: 16px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 22px; }
.usl-journal-hero {
    aspect-ratio: 16/9; border-radius: 18px; margin-bottom: 28px;
    background-color: var(--card); overflow: hidden;
}
.usl-journal-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.usl-journal-body {
    font-size: 15.5px; line-height: 1.75; color: var(--ink);
}

/* ── Kumaş swatch üreteci varyasyonu (kart temalı arka planlar) ── */
.usl-swatch-tile {
    position: relative;
    background: linear-gradient(145deg, transparent 42%, rgba(255,255,255,0.16) 48%, transparent 56%),
                linear-gradient(165deg, var(--sw-a, var(--accent)), var(--sw-b, var(--sand)));
}

/* ── PDP: mobil galeri (USL Home uygulaması ile aynı) ── */
.usl-pdp-gallery-mobile { display: none; position: relative; background: var(--ground-raised, #ece0d8); }
.usl-pdp-mobile-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.usl-pdp-mobile-track::-webkit-scrollbar { display: none; }
.usl-pdp-mobile-slide { flex: 0 0 100%; aspect-ratio: 3/4; scroll-snap-align: start; background: var(--ground-raised, #ece0d8); }
.usl-pdp-mobile-slide > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.usl-pdp-mobile-dots {
    display: none; justify-content: center; gap: 7px; padding: 10px 0 2px; margin: 0;
}
.usl-pdp-mobile-dots span {
    width: 9px; height: 9px; border-radius: 50%; background: var(--line, #d9c8bd);
}
.usl-pdp-mobile-dots span.on { background: var(--accent, #6b2740); }
.usl-pdp-mobile-topbtn {
    position: absolute; top: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 22px;
    background: var(--card, #faf5f1); border: 1px solid var(--line, #d9c8bd);
    display: flex; align-items: center; justify-content: center; color: var(--accent, #6b2740);
    box-shadow: none; padding: 0; cursor: pointer;
}
.usl-pdp-mobile-back { left: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(250,245,241,0.92); }
.usl-pdp-mobile-fav { right: 14px; font-size: 20px; }
.usl-pdp-mobile-fav.favorited { color: var(--accent); }
.usl-pdp-mobile-fav.favorited i { font-weight: 900; }
.usl-pdp-mobile-badge {
    position: absolute; top: 14px; left: 56px; z-index: 3;
    background: var(--danger, #b3261e); color: #fff; font-size: 13px; font-weight: 700;
    padding: 5px 10px; border-radius: 10px;
}
.usl-pdp-nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 42px; height: 42px; border-radius: 21px; border: 1px solid var(--line, #d9c8bd);
    background: rgba(250,245,241,0.8); color: var(--accent, #6b2740);
    font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0 0 4px;
}
.usl-pdp-nav-prev { left: 10px; }
.usl-pdp-nav-next { right: 10px; }
.usl-pdp-mobile-thumbs {
    position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 3;
    display: flex; gap: 7px; justify-content: center; overflow-x: auto;
    scrollbar-width: none; pointer-events: auto;
}
.usl-pdp-mobile-thumbs::-webkit-scrollbar { display: none; }
.usl-pdp-thumb {
    flex: 0 0 46px; width: 46px; height: 46px; padding: 0; border-radius: 9px;
    border: 2px solid #fff; overflow: hidden; background: var(--ground-raised, #ece0d8); cursor: pointer;
}
.usl-pdp-thumb.on { border-color: var(--accent, #6b2740); }
.usl-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.usl-pdp-thumb.swatch {
    background: linear-gradient(145deg, var(--sw-a), var(--sw-b));
}

/* Adet kutusu — uygulama InputBorder stili */
.usl-app-qty {
    display: grid; grid-template-columns: auto auto; gap: 14px; align-items: center;
    margin: 4px 0 8px; justify-content: start;
}
.usl-app-qty-label { font-size: 15px; font-weight: 700; color: var(--ink); }
.usl-app-qty-box {
    display: inline-flex; align-items: center; gap: 2px;
    background: #fff; border: 1px solid var(--line, #d9c8bd); border-radius: 12px; padding: 4px 0;
}
.usl-app-qty-btn {
    width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer;
    color: var(--accent, #6b2740); font-size: 18px; line-height: 1; padding: 0;
}
.usl-app-qty-val {
    width: 26px; text-align: center; font-size: 16px; font-weight: 700; color: var(--ink);
}

@media (max-width: 640px) {
    .usl-pdp-gallery-mobile { display: block; margin: -24px -5vw 0; }
    .usl-pdp-mobile-dots { display: flex; }
    .pd-gallery > .pd-gallery-main,
    .pd-gallery > .pd-gallery-thumbs {
        display: none !important;
    }
    .breadcrumb { display: none; }
}

/* ── PDP sticky bar — uygulama Card + PrimaryButton ── */
.usl-pdp-sticky-bar {
    display: none; position: fixed; left: 0; right: 0; z-index: 2200;
    align-items: center; gap: 16px;
    padding: 12px 18px;
    background: var(--card, #faf5f1); border-top: 0;
    box-shadow: 0 -8px 24px -16px rgba(43,26,31,0.22);
    /* alt tab (56px) + safe-area üstünde */
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}
/* Sepet cekmecesi acikken urun sayfasinin yapiskan cubugu gizlenir: cekmecenin
   "Siparisi Tamamla" dugmesinin onunde duruyordu (z-index 2200). */
body.usl-cart-acik .usl-pdp-sticky-bar { display: none !important; }
.usl-sticky-price-col { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.usl-sticky-label { font-size: 12px; color: var(--ink-soft, #6b5a56); line-height: 1.2; }
.usl-pdp-sticky-bar .usl-price { font-size: 21px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--accent, #6b2740); line-height: 1.15; }
.usl-pdp-sticky-bar .usl-price .price-amount { font-size: 21px; }
.usl-pdp-sticky-bar .usl-price .price-dec { font-size: 0.58em; }
.usl-pdp-sticky-bar .usl-price .price-cur { font-size: 0.52em; }
.usl-pdp-sticky-bar .usl-sticky-cta,
.usl-pdp-sticky-bar .btn-add-cart {
    flex: 1; justify-content: center; align-items: center;
    height: 50px !important; min-height: 50px !important;
    border-radius: 14px !important; font-size: 16px !important; font-weight: 700 !important;
    letter-spacing: 0 !important; padding: 0 16px !important;
}
@media (max-width: 640px) {
    .usl-pdp-sticky-bar { display: flex; }
    .pd-actions-row.add-cart-row { display: none; }
    .pdp-price-row { display: none; }
    .product-detail { padding-bottom: calc(90px + 56px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Mobil alt tab bar (USL Home Shell ile birebir) ── */
.usl-bottom-tabs {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2300;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    background: var(--card, #faf5f1);
    border-top: 1px solid var(--line, #d9c8bd);
    box-sizing: border-box;
}
.usl-bottom-tabs-inner {
    display: flex; height: 56px; align-items: stretch; justify-content: space-around;
    max-width: 560px; margin: 0 auto; width: 100%;
}
.usl-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; text-decoration: none; color: var(--ink-faint, #a8938b);
    font-size: 10px; font-weight: 600; font-family: var(--sans); line-height: 1.15;
    min-width: 0; padding: 4px 2px 2px; -webkit-tap-highlight-color: transparent;
}
.usl-tab-icon {
    width: 24px; height: 24px; color: var(--ink-faint, #a8938b);
    display: flex; align-items: center; justify-content: center;
}
.usl-tab-icon svg { width: 22px; height: 22px; display: block; }
.usl-tab.active { color: var(--usl-accent-dark, #4a1a2c); }
.usl-tab.active .usl-tab-icon { color: var(--accent, #6b2740); }
.usl-tab-badge {
    position: absolute; top: -2px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
    display: none; align-items: center; justify-content: center;
}
.usl-tab-icon-wrap { position: relative; display: inline-flex; }
@media (max-width: 640px) {
    .usl-bottom-tabs { display: block; }
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
    .cookie-consent { bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ── Giriş / Kayıt sayfası (site temasına uyumlu) ── */
.auth-page-wrap {
    background: linear-gradient(165deg, var(--ground) 0%, var(--accent-tint) 48%, var(--ground-raised) 100%);
    min-height: calc(100vh - 180px);
    padding: 36px 16px 64px;
}
.auth-container {
    max-width: 960px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 28px clamp(18px, 3vw, 36px) 36px;
}
.auth-tabs {
    display: none;
    gap: 8px;
    margin-bottom: 22px;
    background: var(--ground-raised);
    padding: 6px;
    border-radius: 999px;
}
.auth-tab {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 14px;
    border-radius: 999px;
    cursor: pointer;
}
.auth-tab.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 8px 18px -10px rgba(107, 39, 64, 0.55);
}
.auth-panels {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.auth-panel { flex: 1; min-width: 0; }
.auth-divider {
    width: 1px;
    align-self: stretch;
    background: var(--line);
    flex: none;
}
.auth-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 28px;
    color: var(--ink);
    margin: 0 0 8px;
}
.auth-page-wrap .text-muted { color: var(--ink-soft) !important; }
.auth-page-wrap .form-group label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}
.auth-page-wrap .form-control {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 14px;
    color: var(--ink);
}
.auth-page-wrap .form-control:focus {
    outline: none;
    border-color: var(--accent-soft);
    box-shadow: 0 0 0 3px rgba(201, 140, 160, 0.25);
}
.auth-page-wrap .btn-primary,
.auth-page-wrap .btn.btn-primary {
    background: var(--accent) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 12px 20px !important;
    font-weight: 700 !important;
}
.auth-page-wrap .btn-outline,
.auth-page-wrap .btn.btn-outline {
    border: 1px solid var(--line) !important;
    background: #fff !important;
    color: var(--ink) !important;
    border-radius: 999px !important;
    padding: 12px 20px !important;
    font-weight: 700 !important;
}
.auth-page-wrap a[href*="forgot"] { color: var(--accent) !important; }
.wizard-progress {
    display: flex;
    gap: 8px;
}
.wizard-step {
    flex: 1;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-soft);
    padding: 8px 6px;
    border-radius: 10px;
    background: var(--ground-raised);
    border: 1px solid transparent;
}
.wizard-step.active {
    color: var(--accent);
    background: var(--accent-tint);
    border-color: rgba(107, 39, 64, 0.18);
}
@media (max-width: 820px) {
    .auth-tabs { display: flex; }
    .auth-panels { display: block; }
    .auth-divider { display: none; }
    .auth-panel { display: none; }
    .auth-panel.active { display: block; }
}

/* ── Mini sepet çekmecesi ── */
.usl-cart-drawer-backdrop {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(43, 26, 31, 0.42);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
}
.usl-cart-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.usl-cart-drawer {
    position: fixed; top: 0; right: 0; z-index: 1210;
    width: min(400px, 100vw);
    height: 100%;
    background: var(--card);
    color: var(--ink);
    box-shadow: -18px 0 40px -24px rgba(43, 26, 31, 0.45);
    transform: translateX(105%);
    transition: transform .28s ease;
    display: flex; flex-direction: column;
}
.usl-cart-drawer.open { transform: translateX(0); }
.usl-cart-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.usl-cart-drawer-head h3 {
    margin: 0; font-family: var(--serif); font-weight: 400; font-size: 22px;
}
.usl-cart-drawer-body {
    flex: 1; overflow-y: auto; padding: 12px 16px 20px;
}
.usl-cart-empty {
    text-align: center; color: var(--ink-soft); padding: 40px 12px; font-size: 14px;
}
.usl-cart-line {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.usl-cart-line img {
    width: 64px; height: 80px; object-fit: cover; border-radius: 8px; background: var(--ground-raised);
}
.usl-cart-line-info { min-width: 0; }
.usl-cart-line-name {
    font-size: 13.5px; font-weight: 700; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.usl-cart-line-meta { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; }
.usl-cart-line-price { font-size: 13px; font-weight: 700; margin-top: 6px; }
.usl-cart-qty {
    display: inline-flex; align-items: center; gap: 0;
    border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-top: 8px;
}
.usl-cart-qty button {
    width: 28px; height: 28px; border: 0; background: var(--ground-raised);
    color: var(--ink); cursor: pointer; font-weight: 700;
}
.usl-cart-qty span {
    min-width: 28px; text-align: center; font-size: 12.5px; font-weight: 700;
}
.usl-cart-line-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.usl-cart-remove {
    border: 0; background: none; color: var(--ink-soft); cursor: pointer; font-size: 12px;
    text-decoration: underline;
}
.usl-cart-drawer-foot {
    border-top: 1px solid var(--line);
    padding: 14px 18px 18px;
    background: #fff;
}
/* Mobilde alt sekme çubuğu (z-index 2300) çekmecenin üstünde kalıyor ve
   "Siparişi Tamamla" düğmesini örtüyordu. Çubuk görünür kalsın diye gizlemek
   yerine çekmecenin altına onun yüksekliği kadar boşluk bırakılır. */
@media (max-width: 640px) {
    .usl-cart-drawer-foot {
        padding-bottom: calc(18px + 56px + env(safe-area-inset-bottom, 0px));
    }
}
.usl-cart-subtotal {
    display: flex; justify-content: space-between; font-weight: 700;
    margin-bottom: 12px; font-size: 15px;
}
/* Ara toplam ve kargo satırları ikincil; asıl vurgu "Toplam" satırında. */
.usl-cart-subtotal.usl-cart-ship,
.usl-cart-drawer-foot .usl-cart-subtotal:first-child {
    font-weight: 500; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 6px;
}
.usl-cart-ship #uslCartShip.is-free { color: var(--sage); font-weight: 700; }
.usl-cart-total {
    padding-top: 10px; border-top: 1px solid var(--line); font-size: 16px;
}
.usl-cart-ship-hint {
    margin: 0 0 10px; padding: 7px 10px; border-radius: 8px;
    background: var(--sage-tint); color: #3f5638;
    font-size: 11.5px; line-height: 1.45; text-align: center;
}
.usl-cart-ship-hint[hidden] { display: none; }
.usl-cart-checkout {
    display: block; text-align: center; text-decoration: none;
    background: var(--accent); color: #fff; font-weight: 700;
    padding: 13px 16px; border-radius: 999px;
}
.usl-cart-checkout:hover { color: #fff; opacity: 0.92; }

/* ── Öne çıkan kategori blokları (görsel/GIF) ── */
.collections .collection-block.usl-feat-cat {
    position: relative; overflow: hidden; min-height: 280px;
    background-size: cover; background-position: center;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 22px; text-decoration: none; color: #fff;
    border-radius: 16px;
}
.collections .collection-block.usl-feat-cat::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(43,26,31,0.08), rgba(43,26,31,0.72));
}
.collections .collection-block.usl-feat-cat > * { position: relative; z-index: 1; }
.collections .collection-block.usl-feat-cat img.usl-feat-cat-media {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}

/* ── Hero overlay (konumlu metin / butonlar) — sol-üst köşe yüzde konum; translate yok ── */
.usl-hero-slide.usl-hero-overlay-mode {
    padding: 0;
    align-items: stretch;
    min-height: 460px;
}
.usl-hero-slide.usl-hero-overlay-mode .usl-hero-overlay { pointer-events: none; }
.usl-hero-slide.usl-hero-overlay-mode .usl-hero-el,
.usl-hero-slide.usl-hero-overlay-mode .usl-hero-inner-abs,
.usl-hero-slide.usl-hero-overlay-mode .usl-hero-btn-abs {
    position: absolute;
    z-index: 3;
    left: var(--dx);
    top: var(--dy);
    transform: none;
    max-width: min(520px, 86%);
    font-size: var(--size-d, 36px);
}
.usl-hero-slide.usl-hero-overlay-mode .usl-hero-btn-abs {
    white-space: nowrap;
    text-decoration: none;
    border-radius: 999px !important;
    max-width: none;
    font-size: var(--size-d, 14px);
}
.usl-hero-slide.usl-hero-overlay-mode.usl-hero-fit {
    min-height: 320px;
    max-height: 560px;
}
.usl-hero-slide.usl-hero-overlay-mode .usl-hero-media,
.usl-hero-slide.usl-hero-overlay-mode .usl-hero-poster > img {
    object-fit: cover;
}
/* Mobil: medya oranını koru (yatay banner). Editör 390×clamp(180–280) ile aynı mantık. */
@media (max-width: 640px) {
    .usl-hero-slide.usl-hero-overlay-mode {
        min-height: 180px;
        max-height: 280px;
    }
    .usl-hero-slide.usl-hero-overlay-mode.usl-hero-fit {
        min-height: 180px;
        max-height: 280px;
    }
    .usl-hero-slide.usl-hero-overlay-mode .usl-hero-el,
    .usl-hero-slide.usl-hero-overlay-mode .usl-hero-inner-abs,
    .usl-hero-slide.usl-hero-overlay-mode .usl-hero-btn-abs {
        left: var(--mx);
        top: var(--my);
        font-size: var(--size-m, 23px);
    }
    .usl-hero-slide.usl-hero-overlay-mode .usl-hero-btn-abs {
        font-size: var(--size-m, 12.5px);
        padding: 10px 18px;
    }
    .usl-hero-stock-abs { font-size: 10.5px; left: 3% !important; bottom: 3% !important; }
}

/* ═══════════ ÖNE ÇIKAN KATEGORİLER ═══════════
   Tek işaretleme, iki düzen.
     Masaüstü: kart = [görsel][krem metin paneli] yan yana.
     Mobil   : kart = görsel; panel görselin üstüne oturan renkli şerite döner.
   Renk her karta --fc-renk ile geçirilir (yönetimden seçilir). */

.usl-fc { padding-top: 8px; }

.usl-fc-head { text-align: center; margin: 0 0 22px; }
.usl-fc-eyebrow {
    display: inline-block; font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--ink-faint, #9a8b86); margin-bottom: 8px;
}
.usl-fc-head h2 {
    font-family: var(--serif); font-weight: 400; color: var(--accent, #6b2740);
    font-size: clamp(26px, 3.4vw, 42px); letter-spacing: 0.02em; margin: 0 0 8px;
    text-transform: uppercase;
}
.usl-fc-head p { margin: 0; font-size: 14px; color: var(--ink-soft, #6f625e); }

/* ── Izgara ── */
.usl-fc-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 2.05fr);
    gap: 12px;
    align-items: stretch;
    /* Satırlar içeriğe göre büzülmesin: bölüm, genişliğe oranlı bir yükseklik tutar
       (mockup'ta ızgara, genişliğinin ~0.44'ü kadar). Aksi hâlde görseller birkaç
       satırlık metin yüksekliğine sıkışıyor. */
    min-height: clamp(430px, 43vw, 680px);
}
.usl-fc-grid--tek { grid-template-columns: minmax(0, 1fr); }
.usl-fc-side { display: grid; grid-template-rows: 1.12fr 1fr; gap: 12px; min-width: 0; }
.usl-fc-row { display: grid; gap: 12px; min-width: 0; }
.usl-fc-row--ikili { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.usl-fc-row--uclu  { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ── Kart ── */
.usl-fc-item {
    display: flex; align-items: stretch; min-width: 0; overflow: hidden;
    background: var(--fc-krem, #f7f1e8); border-radius: 4px;
    text-decoration: none; color: inherit;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.usl-fc-item:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(43, 26, 31, 0.14); }

.usl-fc-media { flex: 1 1 56%; min-width: 0; overflow: hidden; background: #ece3d8; }
.usl-fc-media img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.usl-fc-item:hover .usl-fc-media img { transform: scale(1.045); }

.usl-fc-panel {
    flex: 1 1 44%; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    gap: 12px; padding: 18px 20px;
}
.usl-fc-baslik {
    display: block; font-family: var(--serif); font-weight: 400;
    color: var(--accent, #6b2740); text-transform: uppercase;
    font-size: clamp(15px, 1.25vw, 23px); line-height: 1.22; letter-spacing: 0.03em;
}
/* Başlık altındaki ince ayraç — mockup'taki süslü çizgi. */
.usl-fc-baslik::after {
    content: ""; display: block; width: 46px; height: 1px;
    background: var(--fc-renk, #6b2740); opacity: 0.35; margin: 9px 0 0;
}
.usl-fc-alt {
    display: block; margin-top: 9px; font-size: 12.5px; line-height: 1.5;
    color: var(--ink-soft, #6f625e);
}
.usl-fc-btn {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    padding: 9px 16px; background: var(--accent, #6b2740); color: #fff;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
    border-radius: 2px; transition: background 0.25s ease;
}
.usl-fc-btn svg { width: 15px; height: 15px; flex: none; }
.usl-fc-item:hover .usl-fc-btn { background: var(--fc-renk, #4a1a2b); }

/* Kahraman karo: görsel üstte, panel altta ve ortalanmış. */
.usl-fc-item--hero { flex-direction: column; }
.usl-fc-item--hero .usl-fc-media { flex: 1 1 auto; min-height: 0; }
.usl-fc-item--hero .usl-fc-panel {
    flex: 0 0 auto; align-items: center; text-align: center; padding: 22px 20px 26px;
}
.usl-fc-item--hero .usl-fc-baslik { font-size: clamp(19px, 1.8vw, 30px); }
.usl-fc-item--hero .usl-fc-baslik::after { margin-inline: auto; }
.usl-fc-item--hero .usl-fc-btn { align-self: center; }

/* İkili sıranın ilk kartında panel solda: iki görsel ortada buluşur. */
.usl-fc-item--panel-once { flex-direction: row-reverse; }
.usl-fc-item--genis .usl-fc-media { flex: 1 1 58%; }
.usl-fc-item--genis .usl-fc-panel { flex: 1 1 42%; }

/* Üçlü sıra daha küçük: panel sıkışmasın diye yazı ve boşluklar küçülür. */
.usl-fc-row--uclu .usl-fc-panel { padding: 14px 14px; gap: 10px; }
.usl-fc-row--uclu .usl-fc-alt { font-size: 11.5px; margin-top: 7px; }
.usl-fc-row--uclu .usl-fc-btn { padding: 7px 12px; font-size: 10px; letter-spacing: 0.12em; }
.usl-fc-row--uclu .usl-fc-baslik::after { width: 32px; margin-top: 7px; }

/* Yalnızca tablet aralığı: 760px altında mobil düzen devreye girdiği için
   buradaki min-height oraya sızmamalı — aspect-ratio ile birleşince yükseklik
   kesinleşip genişlik ondan türetiliyor ve kart ızgaradan taşıyordu. */
@media (min-width: 761px) and (max-width: 1100px) {
    .usl-fc-grid { grid-template-columns: minmax(0, 1fr); }
    .usl-fc-side { grid-template-rows: auto auto; }
    .usl-fc-item--hero { min-height: 340px; }
    .usl-fc-item--hero .usl-fc-media { min-height: 240px; }
}

/* ═══ Mobil: panel görselin üstünde renkli şerit ═══ */
@media (max-width: 760px) {
    .usl-fc-head { text-align: left; margin-bottom: 16px; }
    .usl-fc-head h2 { text-transform: none; font-size: clamp(26px, 8vw, 38px); }
    .usl-fc-eyebrow { position: relative; padding-bottom: 6px; }
    .usl-fc-eyebrow::after {
        content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 1px;
        background: var(--accent, #6b2740); opacity: 0.5;
    }

    /* Satır sarmalayıcıları ızgaradan çıkar; altı kart tek bir 2 sütuna akar. */
    /* minmax(0,1fr): "GECELİK & SABAHLIK" gibi uzun bir başlık, varsayılan
       min-width:auto yüzünden sütunu kendi genişliğine zorlayıp ızgarayı ekrandan
       taşırıyordu (yatay kaydırma). Sıfır alt sınır bunu keser. */
    .usl-fc-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
        /* dense: sağdaki uzun kart, solundaki iki kısa kartın hizasına geri döner. */
        grid-auto-flow: row dense;
    }
    .usl-fc-side, .usl-fc-row { display: contents; }

    .usl-fc-item { position: relative; flex-direction: column; border-radius: 3px; }
    .usl-fc-media { flex: 1 1 auto; height: 100%; }
    .usl-fc-panel {
        position: absolute; left: 0; right: 0; bottom: 0;
        flex-direction: row; align-items: center; justify-content: space-between;
        gap: 10px; padding: 9px 11px;
        background: var(--fc-renk, #6b2740); color: #fff;
    }
    .usl-fc-baslik { color: #fff; font-size: 14px; letter-spacing: 0.02em; }
    .usl-fc-baslik::after { display: none; }   /* şeritte ayraç fazlalık */
    .usl-fc-alt { margin-top: 2px; font-size: 11px; color: rgba(255, 255, 255, 0.82); }
    .usl-fc-btn {
        align-self: center; background: none; padding: 0; font-size: 10px;
        letter-spacing: 0.14em; flex: none;
    }
    .usl-fc-item:hover .usl-fc-btn { background: none; }
    .usl-fc-btn svg { width: 13px; height: 13px; }

    /* Kahraman: tam genişlik, şerit beyaz ve kenarlardan içeri kaçık. */
    .usl-fc-item--hero { grid-column: 1 / -1; aspect-ratio: 4 / 3.4; }
    .usl-fc-item--hero .usl-fc-panel {
        left: 10px; right: 10px; bottom: 10px; padding: 12px 14px;
        background: #fbf7f1; color: var(--ink, #2b1a1f);
        text-align: left; align-items: center;
    }
    .usl-fc-item--hero .usl-fc-baslik { color: var(--accent, #6b2740); font-size: 17px; }
    .usl-fc-item--hero .usl-fc-alt { color: var(--ink-soft, #6f625e); }
    .usl-fc-item--hero .usl-fc-btn { color: var(--ink, #2b1a1f); align-self: center; }

    /* Kartların birbirine geçen yükseklikleri (mockup'taki kırık ızgara).
       Son kart iki satır boyunca uzanır; solda iki kısa kart onun yanına dizilir. */
    .usl-fc-row--ikili > .usl-fc-item { aspect-ratio: 1 / 1; }
    .usl-fc-row--uclu  > .usl-fc-item { aspect-ratio: 5 / 4; }
    /* Sol sütuna iki kısa kart, sağa onların toplam boyunca uzanan tek uzun kart.
       Sütunlar açıkça verilir: otomatik yerleşimde ikinci kart sağa kaçıp uzun
       kartı boş satırlara itiyor ve o kart yükseklik bulamadan çöküyordu. */
    .usl-fc-row--uclu > .usl-fc-item:nth-child(1) { grid-column: 1; }
    .usl-fc-row--uclu > .usl-fc-item:nth-child(2) { grid-column: 1; }
    .usl-fc-row--uclu > .usl-fc-item:nth-child(3) {
        grid-column: 2; grid-row: span 2; aspect-ratio: auto;
    }
    /* Üçten fazla blok varsa sıradan akışa dönülür — düzen bozulmasın. */
    .usl-fc-row--uclu > .usl-fc-item:nth-child(n+4) { grid-column: auto; }
}

@media (max-width: 330px) {
    /* Yalnızca çok dar cihazlarda tek sütuna düşülür. 360–430px arası telefonlarda
       iki sütun korunur — tasarımın kırık ızgara görünümü buna dayanıyor. */
    .usl-fc-grid { grid-template-columns: 1fr; }
    .usl-fc-row--uclu > .usl-fc-item:last-child { grid-column: 1; grid-row: auto; aspect-ratio: 5 / 4; }
}

/* ═══════════ ÜRÜN SAYFASI — SATIN ALMA KARTI ═══════════
   Sağ sütun artık yalnızca karar alanı: marka, ad, puan, fiyat, varyant, adet,
   Sepete Ekle ve üç satırlık güven şeridi. Açıklayıcı içeriğin tamamı aşağıdaki
   sekme şeridine taşındı (akordeon kaldırıldı) — her bilgi tek yerde. */

/* Galeri kaydırılırken fiyat ve Sepete Ekle ekranda kalsın. */
@media (min-width: 981px) {
    .pd-info {
        position: sticky;
        top: 84px;
        align-self: start;
    }
}

/* Güven şeridi: en fazla üç satır, her biri tek satır. */
.pd-guven {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 2px;
}
.pd-guven-satir {
    display: grid;
    grid-template-columns: 17px 1fr;
    gap: 9px;
    align-items: start;
    margin: 0;
    padding: 4px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
}
.pd-guven-satir svg {
    width: 15px; height: 15px;
    margin-top: 2px;
    color: var(--sage);
    flex: none;
}
.pd-guven-satir strong { color: var(--ink); font-weight: 620; }

/* Sekmelere taşınan metin blokları (Açıklama, Kumaş & Bakım, Teslimat). */
.pd-metin { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); max-width: 74ch; }
.pd-metin h4 {
    margin: 20px 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}
.pd-metin h4:first-child { margin-top: 0; }
.pd-metin p { margin: 0 0 12px; }
.pd-metin ul, .pd-metin ol { margin: 0 0 12px; padding-left: 20px; }
.pd-metin li { margin-bottom: 5px; }
.pd-metin table { border-collapse: collapse; width: 100%; max-width: 520px; }
.pd-metin td { padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pd-metin td:first-child { color: var(--ink-faint, #a8938b); width: 44%; }
/* Teslimat metni, İptal & İade sekmesinin başında ayrı bir blok olarak durur. */
.pd-iade-ek { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

/* "Hızla tükeniyor" rozeti — ürün adının yanında, satır içi.
   Aciliyet rengi accent'ten AYRI: marka bordosu her yerde kullanıldığı için rozet
   onunla aynı olursa fark edilmiyor. Uyarı tonu yalnızca burada. */
.pd-az-stok {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 9px;
    padding: 3px 9px 3px 7px;
    border-radius: 20px;
    background: #fbeadb;
    color: #9a4d10;
    font-family: var(--sans);
    font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}
.pd-az-stok svg { width: 12px; height: 12px; flex: none; }
@media (max-width: 640px) {
    .pd-az-stok { font-size: 11px; padding: 2px 8px 2px 6px; margin-left: 7px; }
}

/* ═══════════ SATIN ALMA KARTI — GÖRSEL KAP ═══════════
   Sağ sütun önceki bir reskinde `!important` ile şeffaflaştırılmıştı; öneride
   kabul edilen "tek kart" görünümü için o kural burada bilerek geri alınıyor.
   Bu blok dosyanın SONUNDA duruyor ki aynı özgüllükteki eski kuralları yensin. */
@media (min-width: 981px) {
    .pd-info {
        background: var(--card) !important;
        border: 1px solid var(--line) !important;
        border-radius: 4px !important;
        padding: 22px 22px 20px !important;
    }
}
@media (max-width: 980px) {
    /* Dar ekranda kart kenarlıksız: içerik zaten tam genişlikte, çerçeve daraltıyor. */
    .pd-info { padding: 18px 0 0 !important; }
}

/* Marka / kod satırı */
.pd-brand { margin-bottom: 6px; }
.pd-brand-name {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint, #a8938b);
}

.pd-title {
    font-size: clamp(20px, 2.1vw, 26px);
    line-height: 1.22;
    margin: 0 0 6px;
    text-wrap: balance;
}

.pdp-rating { margin-bottom: 14px; }

/* Fiyat: rakamlar sıkışık aile ve marka bordosu — sayfadaki en güçlü öğe. */
.pdp-price-row { margin: 0 0 3px; gap: 10px; flex-wrap: wrap; }
.pdp-price-row .price {
    font-family: var(--nums-condensed);
    font-size: clamp(26px, 2.6vw, 33px);
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.pdp-price-row .old {
    font-family: var(--nums-condensed);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}
.pdp-price-row .off {
    background: var(--accent); color: #fff; border: 0;
    font-weight: 700; font-size: 11.5px; padding: 3px 8px; border-radius: 2px;
}

/* Varyant blokları: etiket satırında seçili değer kalın, sağda yardımcı bağlantı. */
.pd-variant-group { margin-bottom: 15px; }
.variant-label {
    font-size: 12.5px; align-items: baseline; margin-bottom: 7px;
}
.variant-label .val { color: var(--ink); font-weight: 620; }

.variant-btn.variant-text {
    min-width: 44px; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: 2px; background: #fff;
    font-size: 13px; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.variant-btn.variant-text.active,
.variant-btn.variant-text[aria-pressed="true"] {
    border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600;
}

/* Sepete ekle satırı: adet + düğme + favori tek sırada. */
.pd-actions-row.add-cart-row { gap: 8px; margin-bottom: 4px; }
.btn-add-cart {
    border-radius: 2px;
    font-size: 13.5px; font-weight: 600; letter-spacing: .03em;
}

/* Kart köşeleri ana görselle aynı (.pd-gallery-main: 18px) ve aralarında boşluk.
   Yalnızca bu ikisi — kartın yüksekliğini görsele bağlayan `aspect-ratio` ve iç
   kaydırma denemesi GERİ ALINDI: ızgara tek sütuna düştüğünde kartı ekranlarca
   uzatıp altındaki bölümleri kullanılamaz hâle getiriyordu. */
@media (min-width: 981px) {
    .product-detail { column-gap: 26px !important; }
    .pd-info { border-radius: 18px !important; }
}
/* ═══════════ SAĞ SÜTUN AKORDEONU ═══════════
   Başlıklar HER ZAMAN görünür; yalnızca açık bölümün gövdesi kendi içinde kaydırılır.
   Kartın yüksekliği CSS ile DEĞİL, ana görselin ölçülen yüksekliğiyle sınırlanır
   (bkz. product.php sonundaki betik): ızgara tek sütuna düşerse sınır hiç uygulanmaz
   ve kart doğal akışında uzar — önceki denemede aspect-ratio bu durumda kartı
   ekranlarca uzatıp altındaki bölümleri kullanılamaz hâle getirmişti. */
.pd-info { display: flex; flex-direction: column; }

.pd-akordeon {
    display: flex; flex-direction: column;
    min-height: 0;
    margin-top: 14px;
    border-top: 1px solid var(--line);
}
/* Kart yüksekliği sınırlandığında (betik .pd-kart-sinirli sınıfını ve max-height'ı
   verir) akordeon kalan boşluğu alır ve taşmaz. Sınıf yoksa hiçbiri devreye girmez. */
.pd-info.pd-kart-sinirli { overflow: hidden; }
.pd-info.pd-kart-sinirli .pd-akordeon { flex: 1 1 auto; overflow: hidden; }
.pd-info.pd-kart-sinirli .pd-acc { flex: 0 0 auto; }
.pd-info.pd-kart-sinirli .pd-acc[open] {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.pd-info.pd-kart-sinirli .pd-acc[open] > summary { flex: 0 0 auto; }
.pd-info.pd-kart-sinirli .pd-acc[open] > .pd-acc-govde {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px;
}

.pd-acc { border-bottom: 1px solid var(--line); }
.pd-acc:last-child { border-bottom: 0; }
.pd-acc > summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 13px 26px 13px 0;
    font-size: 13.5px; font-weight: 620; color: var(--ink);
}
.pd-acc > summary::-webkit-details-marker { display: none; }
.pd-acc > summary::after {
    content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font-size: 17px; font-weight: 400; line-height: 1; color: var(--accent);
}
.pd-acc[open] > summary::after { content: "−"; }
.pd-acc > summary:hover { color: var(--accent); }
.pd-acc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-acc-govde { padding: 0 0 14px; }
.pd-acc-govde::-webkit-scrollbar { width: 8px; }
.pd-acc-govde::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 4px; }
.pd-acc-govde .detail-table { width: 100%; border-collapse: collapse; }
.pd-acc-govde .detail-table td {
    padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.pd-acc-govde .detail-table td:first-child { color: var(--ink-faint, #a8938b); width: 44%; }
.pd-acc-govde .feat-tag-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pd-acc-govde .feat-tag {
    background: var(--ground); border: 1px solid var(--line); border-radius: 20px;
    padding: 3px 10px; font-size: 11.5px; color: var(--ink-soft);
}

/* "Kombini Tamamla": negatif kaydırma YOK — galeri karttan uzun olduğunda başlık
   küçük resimlerin arkasına girip tamamen görünmez oluyordu. Boşluk, başlığın
   kendi alt/üst payları kısılarak azaltılır. */
.cross-sell { margin-top: 28px; padding-top: 0; }
.cross-sell .section-head { margin-bottom: 14px; padding-top: 0; }
@media (max-width: 980px) {
    .cross-sell { margin-top: 0; }
}

/* ═══════════ SATIN ALMA KARTI — SIKIŞTIRMA ═══════════
   Yapı doğruydu ama ölçekler öneridekinden büyüktü: kart gereksiz uzuyor, akordeona
   yer kalmıyordu. Buradaki değerler tasarım önerisindeki karttan alınmıştır.
   Yalnızca boşluk/boyut ayarı — hiçbir öğe kaldırılmıyor, koşullu bloklar aynen kalıyor. */
@media (min-width: 981px) {
    .pd-info { padding: 18px 18px 16px !important; }
}

.pd-title { font-size: clamp(19px, 1.9vw, 23px); margin: 0 0 5px; }
.pdp-rating { margin-bottom: 11px; font-size: 11.5px; }
.pdp-price-row { margin: 0 0 2px; gap: 8px; }
.pdp-price-row .price { font-size: clamp(24px, 2.3vw, 29px); }
.pdp-price-row .old { font-size: 14px; }
.pdp-price-row .off { font-size: 11px; padding: 2px 7px; }

/* Varyant blokları */
.pd-variant-group { margin-bottom: 11px !important; }
.variant-label { margin-bottom: 6px; font-size: 12px; }
.variant-options { gap: 6px !important; }

/* Renk yuvarlakları: 32 → 26px */
.variant-color { width: 26px !important; height: 26px !important; border-width: 1.5px !important; }
.variant-color.active { padding: 1.5px !important; }

/* Beden butonları */
.variant-btn.variant-text {
    min-width: 38px; padding: 6px 9px !important; font-size: 12.5px;
}

/* Adet + Sepete Ekle: tek sıra, daha alçak */
.pd-actions-row.add-cart-row { gap: 7px; margin-bottom: 3px; }
.btn-add-cart { padding: 11px 14px !important; font-size: 13px !important; }
.usl-app-qty { margin-bottom: 9px !important; }
.usl-app-qty-box { height: 38px !important; }
.usl-app-qty-btn { width: 30px !important; }
.btn-favorite { width: 42px !important; }

/* Güven şeridi: satırlar daha sıkı */
.pd-guven { margin-top: 11px; padding-top: 10px; gap: 0; }
.pd-guven-satir { padding: 3px 0; font-size: 12.5px; }

/* Akordeon başlıkları */
.pd-acc > summary { padding: 11px 24px 11px 0; font-size: 13px; }
.pd-acc-govde { padding: 0 0 11px; font-size: 13px; }

/* Puan satırı — öneri kartındaki gibi: yıldızlar altın, sayı bordo bağlantı. */
.pdp-rating { gap: 6px; font-size: 12px; color: var(--ink-soft); }
.pdp-rating .stars { color: #c9902c; font-size: 12px; letter-spacing: -0.5px; }
.pdp-rating-link {
    color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.pdp-rating-link:hover { color: var(--usl-accent-dark, #4a1a2c); }

/* ═══════════ KART YÜKSEKLİĞİ = GALERİ YÜKSEKLİĞİ ═══════════
   Kart, galeriyle AYNI satır aralığına yayılır ve esnetilir; böylece alt kenarı
   alternatif ürün resimlerinin bittiği yere iner. Izgara bunu kendi hesaplar —
   ölçüm/uygulama geri beslemesi yok, tek sütuna düşünce de kural kendiliğinden
   anlamsızlaşıp içerik doğal akışına döner. */
@media (min-width: 981px) {
    .pd-info {
        grid-row: 1 / 3 !important;
        align-self: stretch !important;   /* .product-detail'deki align-items:start ezilir */
        overflow: hidden;
    }
    /* Izgara satırları içeriğe göre büyüdüğü için tek başına esnetme kartı SINIRLAMAZ:
       kart kendi yüksekliğini satıra dayatıyor. Sınır bu yüzden akordeona konur —
       kartın sabit bölümü (başlık, fiyat, varyant, sepet, güven şeridi) zaten kısa;
       değişken tek parça akordeon. Böylece kart öngörülebilir bir boyda kalır ve
       galerinin altını taşırmaz. */
    /* Kaydırma doğrudan AÇIK GÖVDEYE verilir. Esnek kutu zincirine (akordeon →
       details → gövde) bırakıldığında <details> flex kabı olarak güvenilir
       davranmıyor ve gövde sınırı hiç almıyordu; ölçtüm, taşıyordu. */
    .pd-akordeon > .pd-acc[open] > .pd-acc-govde {
        /* SABİT yükseklik, max-height değil: aynı anda tek bölüm açık olduğu için
           kartın toplam boyu böylece hangi bölüm açılırsa açılsın DEĞİŞMEZ —
           max-height'ta kısa içerikli bölüm kartı küçültüyor, altındaki
           "Kombini Tamamla" her açma/kapamada zıplıyordu. Kısa içerikte altta
           boşluk kalır; kararlılığın bedeli bu ve doğru takas. */
        height: 240px;
        box-sizing: border-box;
        overflow-y: auto;
    }
    /* Akordeon kalan boşluğu alır; yalnızca AÇIK bölümün gövdesi kaydırılır,
       başlıklar her zaman görünür kalır. */
    .pd-akordeon { flex: 1 1 auto; min-height: 0; overflow: hidden; }
    .pd-akordeon > .pd-acc { flex: 0 0 auto; }
    .pd-akordeon > .pd-acc[open] {
        flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    }
    .pd-akordeon > .pd-acc[open] > summary { flex: 0 0 auto; }
    .pd-akordeon > .pd-acc[open] > .pd-acc-govde {
        flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px;
    }
}

/* Köşeler adet kutusuyla (12px) aynı yuvarlaklıkta. */
.btn-add-cart { border-radius: 12px !important; }
.btn-favorite { border-radius: 12px !important; }
.variant-btn.variant-text { border-radius: 12px !important; }
/* Renk yuvarlakları daire kalır — onlar zaten renk lekesi. */
.variant-color { border-radius: 50% !important; }

/* "Renk: Gül Kurusu" satırı: etiket ve değer yan yana; yardımcı bağlantı sağda. */
.variant-label {
    justify-content: flex-start !important;
    gap: 5px;
}
.variant-label .variant-label-ad { color: var(--ink-soft); }
.variant-label .val { color: var(--ink); font-weight: 620; }
.variant-label a { margin-left: auto; }

/* Adet kutusu Sepete Ekle'nin solunda; favori sağda — üçü tek satır. */
.pd-satinal-satir {
    display: flex; align-items: stretch; gap: 7px; margin-bottom: 3px;
}
.pd-satinal-satir .usl-app-qty { margin: 0 !important; flex: 0 0 auto; display: flex; }
.pd-satinal-satir .usl-app-qty-box { margin: 0; height: 100%; box-sizing: border-box; }
.pd-satinal-satir .pd-actions-row { flex: 1 1 auto; margin: 0; min-width: 0; }
@media (max-width: 520px) {
    /* Çok dar ekranda satır sıkışır; buton tam genişliğe düşer. */
    .pd-satinal-satir { flex-wrap: wrap; }
    .pd-satinal-satir .pd-actions-row { flex: 1 1 100%; }
}

/* ═══ AKORDEON YÜKSEKLİK KARARLILIĞI — nihai kurallar ═══
   Yukarıdaki denemelerden kalan esnek kutu (flex) zinciri, gövdenin sabit
   yüksekliğini bölüme göre esnetip kartı 670–848px arasında oynatıyordu;
   "Kombini Tamamla" da bu yüzden zıplıyordu. Akordeon burada düz blok akışına
   döndürülür: kartın boyu = sabit üst bölüm + 5 başlık + 240px gövde. Tek bölüm
   açık olabildiği için (details name=) bu toplam HİÇ değişmez. */
@media (min-width: 981px) {
    /* Taban: gövde sabit 240px (zıplamayı önler). Kartta boşluk kalırsa satır içi
       betik gövdeyi ölçüp büyütür (product.php sonunda) — <details> esnek kutu
       zincirini kırdığı için doldurma CSS'e bırakılamıyor; canlıda denendi,
       uzun bölüm kartı 2100px'e fırlatıyordu. */
    .pd-info { overflow: hidden !important; }
    .pd-akordeon,
    .pd-akordeon > .pd-acc,
    .pd-akordeon > .pd-acc[open] {
        display: block !important;
        flex: none !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .pd-akordeon > .pd-acc[open] > .pd-acc-govde {
        /* Sabit boy YOK: otomatik açılan bölümler doğal içeriğiyle görünür;
           yalnızca SON açık bölümün boyunu betik verir (kalan payı doldurur ya da
           taşmayı kısar). overflow'u da betik o gövdeye satır içi verir. */
        max-height: none !important;
        box-sizing: border-box;
        padding-right: 6px;
    }
}



/* ═══ SEKME KABI: beyaz panel kabın kenarına TAM otursun ═══
   style.css kaba sayfa oluğu olarak `padding: 0 16px` veriyor; tema kabı krem
   kart yaptığı için beyaz panel o dolgunun içinde kalıyor ve iki yanda krem
   şerit görünüyordu. Dolgu kaptan kaldırılır; panelin kendi kenarlığı ve
   yuvarlatması da kalkar (kap zaten kenarlıklı ve overflow:hidden — köşeleri o
   kırpar). İçerik payını panelin iç dolgusu verir. */
.pd-tabs-wrap { padding: 0; }
.pd-panel {
    border: none !important;
    border-radius: 0 !important;
    background: #fff;
    padding: 20px 22px 24px !important;
}

/* Fiyat altındaki vade farksız taksit özeti (betik doldurur; yoksa gizli). */
.pd-taksit-ozet {
    margin: 2px 0 12px;
    font-size: 12px;
    color: var(--ink-soft);
}
.pd-taksit-ozet strong { color: var(--ink); font-weight: 650; }

/* ═══ Beden rehberi popup'ı ═══ */
.pd-br-katman {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(43, 26, 31, 0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
}
.pd-br-kutu {
    background: var(--card, #faf5f1);
    border-radius: 12px;
    width: min(560px, 100%);
    max-height: min(78vh, 640px);
    display: flex; flex-direction: column;
    box-shadow: var(--shadow);
}
.pd-br-bas {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.pd-br-bas strong { font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--ink); }
.pd-br-kapat {
    border: 0; background: none; font-size: 22px; line-height: 1;
    color: var(--ink-soft); cursor: pointer; padding: 2px 6px;
}
.pd-br-kapat:hover { color: var(--accent); }
.pd-br-govde { padding: 14px 18px 18px; overflow-y: auto; }
.pd-br-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd-br-tablo th {
    text-align: left; padding: 8px 10px; font-size: 11.5px; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink-faint, #a8938b);
    border-bottom: 2px solid var(--line);
    font-variant-numeric: tabular-nums;
}
.pd-br-tablo td {
    padding: 8px 10px; border-bottom: 1px solid var(--line);
    color: var(--ink); font-variant-numeric: tabular-nums;
}
.pd-br-tablo tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.55); }
.pd-br-not { margin: 12px 0 0; font-size: 11.5px; color: var(--ink-soft); }
@media (max-width: 640px) {
    /* Mobil: alt sayfa (bottom sheet) gibi durur */
    .pd-br-katman { align-items: flex-end; padding: 0; }
    .pd-br-kutu { width: 100%; border-radius: 14px 14px 0 0; max-height: 82vh; }
}


/* ═══ HEADER: her sayfada yapışkan ═══
   style.css'teki `html { overflow-x: hidden }` bir kaydırma kabı yaratıp
   position:sticky'yi çalışmaz kılıyordu — header bu yüzden kayıp gidiyordu.
   `clip` taşmayı aynı şekilde keser ama kaydırma kabı OLUŞTURMAZ; sticky işler. */
@supports (overflow-x: clip) {
    /* body'de de overflow-x:hidden var ve onu kaydırma kabına çeviriyordu —
       canlıda ölçüldü: yalnız html'i düzeltmek yetmiyor, ikisi birden clip olmalı. */
    html, body { overflow-x: clip !important; }
}

/* Header sağı: bildirim + kargo takibi */
.usl-kargo-takip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: var(--ink);
    text-decoration: none; padding: 7px 10px; border-radius: 8px;
    white-space: nowrap;
}
.usl-kargo-takip:hover { background: var(--accent-tint); color: var(--accent); }
.usl-kargo-takip i { font-size: 14px; }
@media (max-width: 900px) {
    /* Dar ekranda yazı sığmaz; yalnız ikon kalır. */
    .usl-kargo-takip span { display: none; }
}

/* Kategori menüsü: ayarlardan yazı tipi/boyu (header.php değişkenleri doldurur). */
.nav-primary a,
.usl-nav-item > a {
    font-family: var(--nav-font, inherit) !important;
    font-size: var(--nav-size, inherit) !important;
}

/* Beden rehberi bağlantısı: cetvel ikonu + metin */
#pdBedenRehberiAc {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
    font-size: 11.5px;
}
#pdBedenRehberiAc svg { width: 15px; height: 15px; flex: none; }

/* KRİTİK: hidden niteliği her zaman kazansın. .pd-br-katman'a display:flex verildiği
   için tarayıcının hidden=display:none kuralı eziliyor, popup sayfa açılır açılmaz
   görünüyor ve kapatılamıyordu. */
.pd-br-katman[hidden] { display: none !important; }

/* ══════════ Sepet İndirim Kampanyası ══════════ */

/* Ödeme sayfası + sepet çekmecesi: satır altı indirim */
.ck-indirim-satiri span:last-child,
.ck-indirim-tutar,
.usl-cart-discount span:last-child { color: #b3261e; font-weight: 600; }
.usl-cart-discount-hint strong,
.ck-line-indirim span { color: #b3261e; }
#ckOnayIndirim { color: #b3261e; font-weight: 600; }

/* Üst bant: kargo yazısı ⇄ kampanya metni dönüşümü */
.usl-tb-ship { position: relative; }
.usl-tb-mesaj { display: inline-flex; align-items: center; gap: 7px; }
.usl-tb-donusumlu { display: inline-grid; }
.usl-tb-donusumlu .usl-tb-mesaj {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
    white-space: nowrap;
}
.usl-tb-donusumlu .usl-tb-mesaj.is-gorunur {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
/* Dönüşümsüz (tek mesaj) hâlde normal akışta durur */
.usl-tb-ship:not(.usl-tb-donusumlu) .usl-tb-mesaj { opacity: 1; }

/* Bildirim zili + açılır duyuru */
.usl-bildirim-wrap { position: relative; display: inline-flex; }
/* Nokta ikonun sağ üst KÖŞESİNDE durur (glifin üstüne binmez) ve bildirim
   sürdükçe yanık kalır — tıklamak söndürmez. */
.usl-bildirim-wrap .icon-btn { position: relative; }
.usl-bildirim-nokta {
    position: absolute; top: 1px; right: 1px;
    width: 9px; height: 9px; border-radius: 50%;
    background: #dc2626; box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}
.usl-bildirim-menu {
    position: absolute; top: calc(100% + 10px); right: -8px;
    width: min(320px, 86vw);
    background: #fff; border: 1px solid #e8e0d8; border-radius: 14px;
    box-shadow: 0 14px 38px rgba(31, 27, 22, .16);
    padding: 8px; z-index: 1200;
}
.usl-bildirim-menu[hidden] { display: none; }
.usl-bildirim-menu::before {
    content: ""; position: absolute; top: -6px; right: 18px;
    width: 10px; height: 10px; background: #fff;
    border-left: 1px solid #e8e0d8; border-top: 1px solid #e8e0d8;
    transform: rotate(45deg);
}
.usl-bildirim-baslik {
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #8a7f74;
    padding: 8px 10px 6px;
}
.usl-bildirim-oge {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px; border-radius: 10px; text-decoration: none;
    color: inherit;
}
.usl-bildirim-oge:hover { background: #f7f2ec; }
.usl-bildirim-ikon {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fdeaea; color: #b3261e; font-size: 14px;
}
/* Sipariş durumu bildirimleri: durumuna uygun renkler */
.usl-bildirim-ikon--durum-bekliyor { background: #f1f5f9; color: #475569; }
.usl-bildirim-ikon--durum-hazirlik { background: #fef3c7; color: #b45309; }
.usl-bildirim-ikon--durum-kargoda  { background: #e0ecff; color: #1d4ed8; }
.usl-bildirim-ikon--durum-teslim   { background: #dcfce7; color: #15803d; }
.usl-bildirim-ikon--durum-iptal    { background: #fee2e2; color: #b91c1c; }
/* Uzun listede kaydırma İÇ listede: menünün kendisinde overflow olsaydı
   ikona uzanan sivri uç (::before) kırpılır, panel ikondan kopuk görünürdü. */
.usl-bildirim-liste { max-height: min(420px, 70vh); overflow-y: auto; }
.usl-bildirim-metinler { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.usl-bildirim-metinler strong { font-size: 13.5px; }
.usl-bildirim-metinler span { font-size: 12.5px; color: #6b6157; line-height: 1.45; }

/* Bildirim menüsünde kademeli kampanya satırları */
.usl-bildirim-kademeler {
    display: flex; flex-direction: column; gap: 2px;
    margin-top: 5px; padding-top: 5px;
    border-top: 1px dashed #eadfd6;
}
.usl-bildirim-kademeler span {
    font-size: 12px; color: #8a5a2b; font-weight: 600;
}

/* ══════════ Ürün sayfası: sepette indirim (klasik fiyat deseniyle) ══════════
   Sitenin indirim gösterimi korunur: üstü çizili eski fiyat + indirimli fiyat +
   oran rozeti. Sepette kademesi geçerliyken rozet turuncu "Sepette %X" olur ve
   indirimli fiyatın sağ üst köşesinde durur; altına küçük koşul notu düşer. */
.pdp-price-row .off.off-sepette {
    background: #ea6a12; color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 3px 9px; border-radius: 999px;
    position: relative; top: -10px;
    white-space: nowrap;
}
.pd-sepette-not {
    font-size: 12px; color: #9a5b31;
    margin: 2px 0 4px;
}
/* hidden niteliği her durumda kazansın (display kuralı ezmesin) */
.pd-sepette-not[hidden],
#pdEskiFiyat[hidden],
#pdOranBadge[hidden],
#uslStickySepetteBadge[hidden] { display: none !important; }

/* Mobil sabit bar: sepette indirim — normal fiyat üstü çizili, yanında sepette
   fiyat; ayrı satır/uzun not yok ki Sepete Ekle düğmesi daralmasın. */
.usl-sticky-sepette-badge {
    background: #ea6a12; color: #fff;
    font-size: 9px; font-weight: 700;
    padding: 1.5px 7px; border-radius: 999px;
    margin-left: 5px; vertical-align: 1px;
    white-space: nowrap;
}
/* Mobil sabit bardaki eski fiyat: masaüstüyle aynı görünüm — vurgu renginin bir
   ton açığı ve çapraz çizgi (boyut, bar sıkışmasın diye küçük kalır). */
.usl-sticky-eski {
    position: relative;
    color: var(--accent); opacity: .6;
    font-weight: 400; font-size: .78em;
    text-decoration: none; margin-right: 4px;
    display: inline-block;
}
@supports (color: color-mix(in srgb, red 50%, white)) {
    .usl-sticky-eski { color: color-mix(in srgb, var(--accent) 62%, #fff); opacity: 1; }
}
.usl-sticky-eski::after {
    content: "";
    position: absolute; left: -3%; right: -3%; top: 50%;
    border-top: 1.5px solid currentColor;
    transform: rotate(-8deg);
    pointer-events: none;
}
.usl-sticky-sepette-fiyat { color: #c2410c; }

/* Eski fiyat: indirimli fiyatla AYNI boyutta, bold değil, hafifçe yumuşatılmış
   (okunur kalır) ve üzeri ÇAPRAZ çizilir — düz line-through yerine hafif eğimli
   tek çizgi (klasik fiyat üstü çizme görünümü). */
.pdp-price-row .old {
    position: relative;
    font-size: clamp(24px, 2.3vw, 29px);
    font-weight: 400;
    /* İndirimli fiyatla aynı renk ailesi, yalnız bir ton açık. Eski tarayıcı
       color-mix bilmiyorsa vurgu renginin yarı saydam hâline düşer. */
    color: var(--accent);
    opacity: .6;
    text-decoration: none;
}
@supports (color: color-mix(in srgb, red 50%, white)) {
    .pdp-price-row .old {
        color: color-mix(in srgb, var(--accent) 62%, #fff);
        opacity: 1;
    }
}
.pdp-price-row .old::after {
    content: "";
    position: absolute;
    left: -3%; right: -3%;
    top: 50%;
    border-top: 2px solid currentColor;
    transform: rotate(-8deg);
    pointer-events: none;
}
.pdp-price-row .old .price-dec { font-size: 0.58em; }

/* Ürün kartlarındaki (liste/vitrin) eski fiyat da aynı dille: açık vurgu tonu +
   çapraz çizgi; kart içindeki küçük boyutunu korur. */
.product-card-price .price-old {
    position: relative;
    color: var(--accent); opacity: .6;
    text-decoration: none;
    display: inline-block;
}
@supports (color: color-mix(in srgb, red 50%, white)) {
    .product-card-price .price-old { color: color-mix(in srgb, var(--accent) 62%, #fff); opacity: 1; }
}
.product-card-price .price-old::after {
    content: "";
    position: absolute; left: -3%; right: -3%; top: 50%;
    border-top: 1.5px solid currentColor;
    transform: rotate(-8deg);
    pointer-events: none;
}

/* Üstü çizili fiyat ile indirimli fiyat arasında nefes payı */
.pdp-price-row .old { margin-right: 7px; }

/* ── Mobil header: zil logonun solunda, logo gerçekten ortada ── */
.usl-bildirim-wrap--mobil { display: none !important; }
@media (max-width: 980px) {
    .usl-bildirim-wrap--mobil { display: inline-flex !important; }
    /* Mobil zil solda durduğu için menüsü sola yaslanarak açılır */
    .usl-bildirim-wrap--mobil .usl-bildirim-menu { left: -8px; right: auto; }
    .usl-bildirim-wrap--mobil .usl-bildirim-menu::before { left: 18px; right: auto; }

    /* Logo ortalama: marka akıştan çıkarılıp satırın TAM ortasına sabitlenir —
       yanlardaki ikon sayısı/genişliği (☰, ara, zil / hesap, kargo, sepet) kaç
       olursa olsun logo satır ortasından şaşmaz. Yan bloklar kendi köşelerine
       yaslanır; dar ekranda taşmasın diye marka genişliği sınırlanır. */
    .brand-header-row { position: relative; }
    /* display:contents (masaüstü kuralı) sol grubu kutu olmaktan çıkarıyor; o hâlde
       genişlik eşitlenemiyor ve logonun iki yanındaki boşluk farklı kalıyordu. */
    .brand-header-row .usl-header-left {
        display: flex !important;
        align-items: center;
        gap: 6px;
        flex: 1 1 0;
        justify-content: flex-start;
        min-width: 0;
    }
    .brand-header-row .header-tools { flex: 1 1 0; justify-content: flex-end; min-width: 0; }
    .site-header .brand {
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        flex: none;
        margin: 0;
        max-width: 40vw;
        overflow: hidden;
    }
    /* "Kargo Takibi" yazısı mobilde logoyla çakışacak kadar yer kaplıyor:
       yalnız kamyon ikonu kalır (sağda da solda olduğu gibi 3 kompakt ikon). */
    .usl-kargo-takip span { display: none; }
    /* Sağ grup soldan geniş kaldığı için logo sağdaki ikonlara değiyordu:
       ikon dolguları/aralığı biraz kısılınca iki yanda da nefes payı oluşur. */
    .brand-header-row .header-tools { gap: 4px; }
    .brand-header-row .header-tools .icon-btn,
    .brand-header-row .usl-kargo-takip { padding: 6px; }
}

/* ══════════ Öne Çıkan Kategoriler: "Keşfet" altı çizili bağlantı ══════════
   Dolu düğme yerine ince, altı çizili metin (malabadiicgiyim.com düzeni).
   Mobil şeritte de aynı dil geçerli; renk zeminden devralınır. */
.usl-fc-btn {
    background: none !important;
    color: inherit;
    padding: 0 !important;
    border-radius: 0;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: none;
    font-weight: 600;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px !important;
    line-height: 1.2;
    transition: opacity .2s ease;
}
.usl-fc-panel .usl-fc-btn { align-self: flex-start; }
.usl-fc-item--hero .usl-fc-btn { align-self: center; }
.usl-fc-item:hover .usl-fc-btn { background: none !important; opacity: .7; }
.usl-fc-row--uclu .usl-fc-btn { font-size: 11px; letter-spacing: .05em; }
@media (max-width: 760px) {
    .usl-fc-btn { font-size: 11px; border-bottom-color: currentColor; }
}

/* ══════════ Öne Çıkan Kategoriler: görsel kartın TAMAMINI kaplar ══════════
   Görsel + yan panel bölüşmesi kaldırıldı; görsel kartı doldurur, yazı bloğu
   alt kenarda koyu geçişli bir katman olarak görselin üstünde durur.
   (Mobil şerit düzeni korunur — o 760px altında ayrı kurallarla yönetiliyor.) */
@media (min-width: 761px) {
    .usl-fc-item { position: relative; overflow: hidden; display: block; }
    .usl-fc-media {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        margin: 0; flex: none;
    }
    .usl-fc-media img { width: 100%; height: 100%; object-fit: cover; }
    .usl-fc-panel {
        position: absolute; left: 0; right: 0; bottom: 0;
        display: flex; flex-direction: column; gap: 8px;
        padding: 20px 20px 18px;
        background: linear-gradient(to top, rgba(28, 16, 20, .72), rgba(28, 16, 20, .34) 52%, rgba(28, 16, 20, 0));
        color: #fff;
        align-items: flex-start; text-align: left;
    }
    .usl-fc-baslik { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
    .usl-fc-baslik::after { background: #fff; opacity: .55; }
    .usl-fc-alt { color: rgba(255, 255, 255, .88); }
    .usl-fc-btn { color: #fff; border-bottom-color: rgba(255, 255, 255, .9); }
    .usl-fc-item:hover .usl-fc-btn { opacity: .8; }

    /* Kahraman karo: yazı ortalanır (eski düzendeki gibi). */
    .usl-fc-item--hero .usl-fc-panel {
        align-items: center; text-align: center;
        padding: 26px 22px 24px;
    }
    .usl-fc-item--hero .usl-fc-baslik::after { margin-inline: auto; }
    .usl-fc-item--hero .usl-fc-btn { align-self: center; }

    /* Üçlü sıradaki küçük kartlarda katman daha ince. */
    .usl-fc-row--uclu .usl-fc-panel { padding: 14px 14px 13px; gap: 6px; }
}

/* Kategori adının altındaki ayraç çizgisi kaldırıldı — altı çizili tek öğe
   "Keşfet" bağlantısı olsun (iki çizgi birbirine karışıyordu). */
.usl-fc-baslik::after { display: none !important; }

/* Kart medyası video ise görsel gibi kartı tamamen kaplar. */
.usl-fc-video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    background: #efe7df;
}

/* ══════════ Ürün galerisi: 5'ten fazla alternatif görselde kaydırmalı şerit ══════════
   5 ve altında eski 5'li ızgara aynen kalır. Üstünde: tek satır, yatay kaydırma
   (parmak/tekerlek) + iki yanda ok düğmeleri. Böylece ana görselin altındaki alan
   görsel sayısı ne olursa olsun tek satır yüksekliğinde sabit kalır. */
.pd-thumbs-wrap { position: relative; }
.pd-thumbs-wrap--slider { padding: 0 26px; }

.pd-gallery-thumbs--slider {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;              /* şerit görünümü bozulmasın */
    -ms-overflow-style: none;
}
.pd-gallery-thumbs--slider::-webkit-scrollbar { display: none; }
.pd-gallery-thumbs--slider .thumb-btn {
    /* Tam 5 kare görünür; kalanlar kaydırınca gelir. */
    flex: 0 0 calc((100% - 4 * 8px) / 5) !important;
    width: auto !important;
    scroll-snap-align: start;
}

.pd-thumbs-ok {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 24px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--card, #fff);
    border: 1px solid var(--line, #e6ded6);
    border-radius: 8px;
    color: var(--ink, #2b1a1f);
    cursor: pointer;
    transition: opacity .2s ease, background .2s ease;
    z-index: 2;
}
.pd-thumbs-ok svg { width: 14px; height: 14px; }
.pd-thumbs-ok:hover { background: var(--ground-raised, #f6efe8); }
.pd-thumbs-ok--sol { left: 0; }
.pd-thumbs-ok--sag { right: 0; }
.pd-thumbs-ok.is-pasif { opacity: .28; pointer-events: none; }

/* Seçili küçük görselin çerçevesi: outline + offset, kaydırmalı şeritte
   (overflow) kırpıldığı için yarım görünüyordu. İçeriye çizilen çerçeve
   her iki düzende de tam görünür. */
.thumb-btn.active {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: inset 0 0 0 2px var(--accent);
}
.thumb-btn { transition: box-shadow .18s ease, border-color .18s ease; }
.thumb-btn:hover { border-color: var(--accent) !important; }

/* Seçili küçük görsel çerçevesi — daha yüksek özgüllük + fallback renk
   (önceki kural, eski temadaki !important'lı .thumb-btn.active tarafından
   eziliyor ve çerçeve hiç görünmüyordu). */
.pd-thumbs-wrap .thumb-btn.active,
.pd-gallery-thumbs .thumb-btn.active {
    box-shadow: inset 0 0 0 2px var(--accent, #6b2740) !important;
    border-color: var(--accent, #6b2740) !important;
    outline: none !important;
    outline-offset: 0 !important;
}

/* ── Küçük görsel şeridi: son rötuşlar ──
   1) scroll-snap kaldırıldı: "başka görseller var" ipucu 46px kayınca snap onu
      anında başa çekiyordu (ölçüldü) — ipucu hiç görünmüyordu.
   2) Şeridin iki yanına 2px iç boşluk: ilk/son karenin kenarlığı kırpılmıyor.
   3) Seçim çerçevesi iç gölge yerine 2px KENARLIK: iç gölge, 10px köşe
      yarıçapında köşelere doğru inceliyordu; kenarlık her yerde eşit kalınlıkta.
      Kenarlık kalınlığı seçili/seçimsiz aynı (2px, saydam) — tıklayınca kare
      yerinden oynamaz. */
.pd-gallery-thumbs--slider {
    scroll-snap-type: none !important;
    padding: 2px !important;
    scroll-padding-inline: 2px;
}
.pd-gallery-thumbs--slider .thumb-btn { scroll-snap-align: none; }

.pd-thumbs-wrap .thumb-btn,
.pd-gallery-thumbs .thumb-btn {
    box-sizing: border-box;
    border: 2px solid transparent !important;
    box-shadow: none !important;
    background-clip: padding-box;
}
.pd-thumbs-wrap .thumb-btn.active,
.pd-gallery-thumbs .thumb-btn.active {
    border-color: var(--accent, #6b2740) !important;
    box-shadow: none !important;
    outline: none !important;
}
.pd-thumbs-wrap .thumb-btn:hover,
.pd-gallery-thumbs .thumb-btn:hover {
    border-color: color-mix(in srgb, var(--accent, #6b2740) 45%, #fff) !important;
}
.pd-thumbs-wrap .thumb-btn.active:hover,
.pd-gallery-thumbs .thumb-btn.active:hover {
    border-color: var(--accent, #6b2740) !important;
}

/* Mobilde masaüstü galerisi gizli (üstte uygulama tarzı kaydırmalı galeri var).
   Küçük görsel şeridi artık .pd-thumbs-wrap içinde durduğu için eski
   ".pd-gallery > .pd-gallery-thumbs" kuralı onu yakalamıyordu ve şerit
   mobilde de görünüyordu. */
@media (max-width: 640px) {
    .pd-gallery > .pd-thumbs-wrap { display: none !important; }
}

/* ══════════ Öne Çıkanlar — sabit sol panel + kayan ürün rayı ══════════
   La Redoute düzeni, sitenin kendi diliyle: solda krem-gül zeminli sabit panel
   (slogan + sekmeler + "Tümünü Gör"), sağda yatay kayan ürünler. Panel kaydırma
   kabının DIŞINDA olduğu için düğme her zaman görünür kalır. */
.usl-oc {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}
.usl-oc > .usl-oc-panel {
    /* Zemin sitenin sıcak krem ailesinden: sayfa zemini #f3eae4, kartlar #faf5f1.
       Panel bir ton koyu krem (--ground-raised) + çok hafif bordo dokunuş — hem
       kartlardan ayrışır hem sayfayla aynı sıcaklıkta kalır. Önceki --accent-tint
       (#f0dde3) pembeye kaçtığı için krem zeminde yamalı duruyordu. */
    background: var(--ground-raised, #ece0d8);
    border: 1px solid var(--line, #d9c8bd);
    border-radius: 16px;
    padding: 26px 22px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
}
.usl-oc-slogan {
    margin: 0 0 14px;
    font-size: clamp(20px, 1.9vw, 28px);
    line-height: 1.22;
    font-weight: 700;
    color: var(--accent, #6b2740);
    letter-spacing: -0.01em;
}
/* Sekmeler panelde alt alta: dar sütunda yan yana sıkışmasın. */
.usl-oc-pills {
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
    margin: 0;
}
.usl-oc-pills .usl-pill { white-space: nowrap; }
.usl-oc-btn {
    align-self: flex-start;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 26px;
    background: var(--ink, #2b1a1f);
    color: #fff;
    border-radius: 999px;
    font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.usl-oc-btn:hover { background: var(--accent, #6b2740); transform: translateY(-1px); }
.usl-oc-ray { min-width: 0; }

/* Mobil: panel üstte tam genişlik, slogan ile düğme yan yana; ray altta kayar. */
@media (max-width: 760px) {
    .usl-oc { grid-template-columns: 1fr; gap: 12px; }
    .usl-oc > .usl-oc-panel {
        padding: 18px 16px;
        gap: 14px;
    }
    .usl-oc-slogan { margin-bottom: 10px; font-size: 19px; }
    .usl-oc-pills { flex-direction: row; flex-wrap: wrap; }
    .usl-oc-btn { padding: 11px 20px; font-size: 13px; }
}

/* Panel zemini: krem tabana bordodan çok hafif bir sıcaklık katılır (destekleyen
   tarayıcılarda). Desteklemeyende yukarıdaki düz krem geçerli kalır. */
@supports (background: color-mix(in srgb, red 10%, white)) {
    .usl-oc > .usl-oc-panel {
        background: color-mix(in srgb, var(--accent, #6b2740) 7%, var(--ground-raised, #ece0d8));
    }
}

/* Öne Çıkanlar: kaydırma okları bölümün SAĞ ALT köşesinde, yan yana durur.
   (Diğer raylarda oklar kartların iki yanında ortada kalır — burada La Redoute
   düzenindeki gibi rayın altına, sağa toplanıyor.) Ray altında oklara yer açılır
   ki son kartın üstüne binmesinler. */
/* Oklar widget'ın TAMAMEN DIŞINDA: ray'a alt dolgu verilmiyor — dolgu ray'ı
   uzatıyor, ızgara stretch olduğu için sol panel de onunla birlikte uzuyordu.
   Yer, bölümün kendi alt dolgusundan açılır; böylece panel ile ürün kartları
   birebir aynı yükseklikte kalır, oklar ikisinin de altında durur. */
.usl-oc { padding-bottom: 68px; }
.usl-oc .usl-oc-ray { position: relative; padding-bottom: 0; }
.usl-oc .usl-scroller .usl-scroll-nav {
    top: auto;
    bottom: -58px;
    transform: none;
    width: 40px; height: 40px;
}
.usl-oc .usl-scroller .usl-scroll-nav--prev { left: auto; right: 56px; }
.usl-oc .usl-scroller .usl-scroll-nav--next { right: 6px; }
/* Kaydırma çubuğu (noktalar) da akıştan çıkarılır: akışta kalınca ray'ı ~25px
   uzatıyor ve panel ürün kartlarından daha uzun görünüyordu. Artık oklarla aynı
   satırda, solda duruyor; ray'ın yüksekliği = kartların yüksekliği. */
.usl-oc .usl-scroller .usl-scroll-bars {
    position: absolute;
    left: 0; right: 110px; bottom: -46px;
    justify-content: flex-start;
    margin-top: 0;
}

@media (max-width: 760px) {
    /* Dar ekranda parmakla kaydırma yeterli; oklar yer kaplamasın. */
    .usl-oc .usl-oc-ray { padding-bottom: 0; }
    .usl-oc .usl-scroller .usl-scroll-nav { display: none !important; }
}

/* Panel zemini krem hâline geri alındı (bordo kontrast blok denendi, kaldırıldı):
   yukarıdaki --ground-raised + hafif bordo dokunuşu geçerli, yazı/sekme/düğme de
   açık zemin varsayılanlarında kalır. */

/* Kaydırma okları: koyu zemin, beyaz ikon. */
.usl-oc .usl-scroller .usl-scroll-nav {
    background: var(--ink, #2b1a1f);
    color: #fff;
    border-color: var(--ink, #2b1a1f);
}
.usl-oc .usl-scroller .usl-scroll-nav:hover {
    background: var(--accent, #6b2740);
    border-color: var(--accent, #6b2740);
    color: #fff;
}

/* Ray'ın 6px alt dolgusu (yatay kaydırma çubuğu payı) panel ile kartlar arasında
   küçük bir yükseklik farkı bırakıyordu; bu bölümde kaldırılır — kaydırma çubuğu
   zaten gizli. Böylece sol panel ile ürün kartları birebir aynı boyda. */
.usl-oc .usl-scroller .rail { padding-bottom: 0; }

/* ── Gösterge çizgisi: solda sabit parça + kayan parçalar ──
   Sol paneli izleyen SABİT bir çizgi (panel genişliğinde, hep koyu), ardından
   ray'ın altında kaydırmayla değişen çizgiler. İkisi aynı satırda durur ve
   satır bölüme biraz daha yaklaştırıldı (oklar daha altta kalır). */
.usl-oc > .usl-oc-panel { position: relative; }
.usl-oc > .usl-oc-panel::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -26px;
    height: 3px; border-radius: 2px;
    background: var(--ink, #2b1a1f);
}
.usl-oc .usl-scroller .usl-scroll-bars { bottom: -26px; }

@media (max-width: 760px) {
    /* Mobilde panel üstte, ray altta: sabit çizgi anlamını yitirir. */
    .usl-oc > .usl-oc-panel::after { display: none; }
    .usl-oc .usl-scroller .usl-scroll-bars { position: static; margin-top: 12px; padding-right: 0; }
}

/* Gösterge çizgileri okların ÜSTÜNDE ayrı bir satır olsun: çizgiler kartların
   hemen altına çekildi, oklar biraz daha aşağı indirildi. */
.usl-oc > .usl-oc-panel::after,
.usl-oc .usl-scroller .usl-scroll-bars { bottom: -13px; }
.usl-oc .usl-scroller .usl-scroll-nav { bottom: -64px; }

/* Gösterge çizgileri sağ kenara kadar devam eder (oklar artık alt satırda, yer
   açmaya gerek yok): parçalar sabit genişlik yerine eşit paylaşımla ray'ın tüm
   genişliğine yayılır — sabit çizgiyle birlikte satır sayfa sonuna dek sürer. */
.usl-oc .usl-scroller .usl-scroll-bars { right: 0; gap: 10px; }
.usl-oc .usl-scroller .usl-scroll-bars span { flex: 1 1 0; width: auto; }

/* ══════════ Öne Çıkanlar — v2: dar panel, tek parça gösterge, mobilde kayan panel ══════════ */
.usl-oc-wrap { position: relative; padding-bottom: 96px; --oc-panel: 250px; --oc-bosluk: 18px; }

/* Panel genişliği bir ürün kartından (220px) biraz fazla. */
.usl-oc { grid-template-columns: var(--oc-panel) minmax(0, 1fr); gap: var(--oc-bosluk); padding-bottom: 0; }

/* Eski (JS üretimi) gösterge ve oklar bu bölümde kullanılmıyor — kendi
   göstergemiz kaydırma kabının dışında ve mobilde de çalışıyor. */
.usl-oc .usl-scroll-bars,
.usl-oc .usl-scroll-nav,
.usl-oc > .usl-oc-panel::after { display: none !important; }

/* ── Gösterge satırı: solda sabit parça (panel genişliği) + tek parça çubuk ── */
.usl-oc-gosterge {
    position: absolute;
    left: 0; right: 0; bottom: 56px;
    display: flex; align-items: center; gap: var(--oc-bosluk);
}
.usl-oc-sabit {
    flex: 0 0 var(--oc-panel);
    height: 3px; border-radius: 2px;
    background: var(--ink, #2b1a1f);
}
.usl-oc-track {
    position: relative; flex: 1 1 auto;
    height: 3px; border-radius: 2px;
    background: #DCD4CE;
    cursor: pointer;
}
.usl-oc-thumb {
    position: absolute; top: 0; left: 0; height: 100%;
    border-radius: 2px;
    background: var(--ink, #2b1a1f);
    transition: left .12s linear, width .12s linear;
}

/* ── Oklar: gösterge satırının ALTINDA, sağda ── */
.usl-oc-oklar {
    position: absolute; right: 0; bottom: 0;
    display: flex; gap: 10px;
}
.usl-oc-ok {
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--ink, #2b1a1f);
    background: var(--ink, #2b1a1f); color: #fff;
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
}
.usl-oc-ok svg { width: 16px; height: 16px; }
.usl-oc-ok:hover { background: var(--accent, #6b2740); border-color: var(--accent, #6b2740); }
.usl-oc-ok.is-pasif { opacity: .3; pointer-events: none; }

/* ══════════ Mobil: panel de ürünlerle birlikte kayar ══════════
   Bölümün kendisi yatay kaydırma kabı olur; iç ray'ın kendi kaydırması kapatılır.
   Görünürde: panel + bir ürün kartı + sonraki kartın yaklaşık üçte biri. */
@media (max-width: 760px) {
    .usl-oc-wrap { --oc-panel: 40vw; --oc-bosluk: 10px; padding-bottom: 92px; }
    .usl-oc {
        display: flex; flex-wrap: nowrap;
        overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none; -ms-overflow-style: none;
        gap: var(--oc-bosluk);
    }
    .usl-oc::-webkit-scrollbar { display: none; }
    .usl-oc > .usl-oc-panel {
        flex: 0 0 var(--oc-panel);
        padding: 16px 14px;
    }
    .usl-oc .usl-oc-slogan { font-size: 16px; margin-bottom: 8px; }
    .usl-oc .usl-oc-pills { flex-direction: column; align-items: stretch; }
    .usl-oc .usl-oc-pills .usl-pill { font-size: 10px; padding: 7px 10px; letter-spacing: .02em; }
    .usl-oc .usl-oc-btn { padding: 10px 16px; font-size: 12px; }
    .usl-oc-ray { flex: 0 0 auto; }
    /* İç kaydırma kapalı: kartlar bölümle birlikte akar. */
    .usl-oc .usl-scroller { overflow: visible; }
    .usl-oc .usl-scroller .rail { overflow: visible; gap: var(--oc-bosluk); }
    .usl-oc .rail .product-card-wrap { flex: 0 0 36vw; }
    /* Sabit çizgi mobilde yok (panel de kayıyor); çubuk tam genişlik. */
    .usl-oc-sabit { display: none; }
    /* Oklar mobilde de görünür. */
    .usl-oc-ok { width: 36px; height: 36px; }
    .usl-oc-gosterge { bottom: 52px; }
}

/* ══════════ Öne Çıkanlar — mobil ince ayar ══════════ */
@media (max-width: 760px) {
    /* Panel biraz daralır, kartlar genişler: panel + 1 tam kart + sonraki kartın
       ~1/5'i (önce 1/3'tü, kart görselleri sıkışık kalıyordu).
       35vw + 10 + 42vw + 10 + 8.4vw ≈ 85.4vw + 20px → 375px ekranda ~340px. */
    .usl-oc-wrap { --oc-panel: 35vw; }
    .usl-oc .rail .product-card-wrap { flex: 0 0 42vw; }

    /* Sekme düğmeleri: dar panelde metin kırpılıyordu. Artık kutu içinde
       satır kırarak TAMAMI görünür; yükseklik metne göre kendiliğinden büyür. */
    .usl-oc .usl-oc-pills .usl-pill {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
        padding: 7px 8px;
        font-size: 9.5px;
        letter-spacing: .01em;
        border-radius: 12px;
        width: 100%;
        min-height: 0;
        height: auto;
    }

    /* "… kişi favorilerine ekledi / … kişi şu an inceliyor" şeridi dar kartta iki
       satıra düşüp çirkin duruyordu: tek satırda kalır, sığmazsa kısaltılır. */
    .usl-oc .product-fav-band,
    .usl-oc .product-fav-band.band--view {
        font-size: 9px;
        padding: 5px 10px 5px 8px;
        white-space: nowrap;
        overflow: hidden;
    }
    .usl-oc .product-fav-band .band-msg {
        display: flex; align-items: center; gap: 4px;
        min-width: 0;
    }
    .usl-oc .product-fav-band .band-text {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}

/* Pay hesabı: içerik ~359px (375 − kenar boşlukları). panel + 10 + kart + 10 + pay
   olacak şekilde panel 40vw (150) ve kart 42vw (158) → pay ≈ 31px = kartın ~1/5'i. */
@media (max-width: 760px) {
    .usl-oc-wrap { --oc-panel: 40vw; }
}

/* ══════════ Öne Çıkanlar — tam genişlik bant (section--raised) uyarlaması ══════════
   Bölüm sayfadan ayrışan krem banda oturdu; gösterge ve oklar artık normal
   akışta (mutlak değil), böylece bandın içerik sütunuyla hizalanıyorlar. */
.usl-oc-wrap { padding-bottom: 34px; }
.usl-oc-alt { margin-top: 14px; }
.usl-oc-gosterge {
    position: static;
    display: flex; align-items: center; gap: var(--oc-bosluk);
}
.usl-oc-oklar {
    position: static;
    display: flex; gap: 10px; justify-content: flex-end;
    margin-top: 14px;
}

/* Panel, bandın kremiyle aynı tona düşmesin: bir tık daha gül/açık dursun. */
.usl-oc > .usl-oc-panel {
    background: var(--card, #faf5f1);
    border-color: var(--line, #d9c8bd);
}
@supports (background: color-mix(in srgb, red 10%, white)) {
    .usl-oc > .usl-oc-panel {
        background: color-mix(in srgb, var(--accent, #6b2740) 9%, var(--card, #faf5f1));
    }
}

@media (max-width: 760px) {
    .usl-oc-wrap { padding-bottom: 26px; }
    .usl-oc-alt { margin-top: 12px; }
    .usl-oc-oklar { margin-top: 12px; }
}

/* ══════════ Ortak yatay ray düzeni (Trend Ürünler vb.) ══════════
   Öne Çıkanlar'daki gösterge + oklar, sol sabit paneli olmayan bölümlerde de
   aynı biçimde kullanılır. Bant (section--raised) sayfadan ayırır. */
.usl-kaydirma-wrap { padding-bottom: 34px; --oc-bosluk: 18px; }
.usl-kaydirma-wrap .usl-scroll-bars,
.usl-kaydirma-wrap .usl-scroll-nav { display: none !important; }
/* Panelsiz bölümde çubuk tam genişlikte (sabit çizgi parçası yok). */
.usl-kaydirma-wrap .usl-oc-gosterge { display: flex; align-items: center; }
.usl-kaydirma-wrap .usl-oc-track { flex: 1 1 auto; }
/* Ray'ın 6px alt dolgusu göstergeyle kartlar arasını gereksiz açıyordu. */
.usl-kaydirma-wrap .usl-scroller .rail { padding-bottom: 0; }

@media (max-width: 760px) {
    .usl-kaydirma-wrap { padding-bottom: 26px; --oc-bosluk: 10px; }
}

/* ══════════ Öne Çıkan Kategoriler: "Keşfet" yerine ok düğmesi ══════════
   Referanstaki (La Redoute "Our exclusive brands") gibi: kartın sağ alt köşesinde
   yuvarlak ok; kartın üzerine gelince hem yatayda hem düşeyde büyür. */
.usl-fc-btn { display: none !important; }

.usl-fc-ok {
    position: absolute;
    right: 16px; bottom: 16px;
    z-index: 3;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--ink, #2b1a1f);
    box-shadow: 0 6px 18px -8px rgba(28, 16, 20, .55);
    /* Büyüme her iki eksende: genişlik + yükseklik birlikte artar. */
    transition: width .28s cubic-bezier(.22,.61,.36,1),
                height .28s cubic-bezier(.22,.61,.36,1),
                background .28s ease, color .28s ease;
    pointer-events: none;   /* tıklama kartın kendi bağlantısına gitsin */
}
.usl-fc-ok svg {
    width: 18px; height: 18px;
    transition: width .28s ease, height .28s ease;
}
.usl-fc-item:hover .usl-fc-ok,
.usl-fc-item:focus-visible .usl-fc-ok {
    width: 58px; height: 58px;
    background: var(--accent, #6b2740);
    color: #fff;
}
.usl-fc-item:hover .usl-fc-ok svg { width: 22px; height: 22px; }

/* Kahraman karo daha büyük olduğu için oku da bir tık büyük. */
.usl-fc-item--hero .usl-fc-ok { width: 48px; height: 48px; right: 20px; bottom: 20px; }
.usl-fc-item--hero:hover .usl-fc-ok { width: 66px; height: 66px; }

/* Üçlü sıradaki küçük kartlarda ölçüler kısılır. */
.usl-fc-row--uclu .usl-fc-ok { width: 36px; height: 36px; right: 12px; bottom: 12px; }
.usl-fc-row--uclu .usl-fc-ok svg { width: 15px; height: 15px; }
.usl-fc-row--uclu .usl-fc-item:hover .usl-fc-ok { width: 48px; height: 48px; }

@media (max-width: 760px) {
    /* Mobilde dokunmatik: hover yok, ok sabit ve şeridin üstünde durur. */
    .usl-fc-ok, .usl-fc-item--hero .usl-fc-ok, .usl-fc-row--uclu .usl-fc-ok {
        width: 34px; height: 34px; right: 10px; bottom: 54px;
    }
    .usl-fc-ok svg { width: 14px; height: 14px; }
}

/* ══════════ Öne Çıkan Kategoriler: kartın TAMAMI büyüsün ══════════
   Önce yalnız içerideki görsel yakınlaşıyordu (kart çerçevesi sabit kalıyordu).
   Referanstaki davranış: fareyle gelince kartın kendisi — çerçevesi, kremi,
   yazı katmanı ve görseliyle birlikte — hem yatayda hem düşeyde büyür.
   Kart komşularının üstüne taşabilsin diye ızgara/satır kırpması açılır ve
   büyüyen kart üste alınır. */
.usl-fc-grid,
.usl-fc-side,
.usl-fc-row { overflow: visible; }

.usl-fc-item {
    position: relative;
    z-index: 1;
    transform-origin: center center;
    will-change: transform;
}
.usl-fc-item:hover,
.usl-fc-item:focus-visible {
    transform: scale(1.045);
    z-index: 5;
    box-shadow: 0 22px 48px -18px rgba(43, 26, 31, .38);
}
/* Görselin kendi yakınlaşması kapatıldı: kartla birlikte zaten büyüyor. */
.usl-fc-item:hover .usl-fc-media img { transform: none; }

@media (max-width: 760px) {
    /* Dokunmatikte büyüme yok (hover kalıcı takılabiliyor). */
    .usl-fc-item:hover { transform: none; box-shadow: none; }
}

/* ══════════ Öne Çıkan Kategoriler: hover'da kartlar birbirine yer açar ══════════
   scale() ile büyütmek kartı komşularının ÜSTÜNE taşıyordu. Bunun yerine düzenin
   kendisi yeniden paylaşılır: üzerine gelinen kart yatayda ve düşeyde büyürken
   diğerleri oranlı biçimde küçülür (toplam alan sabit kalır, taşma olmaz). */
@media (min-width: 761px) {
    /* Ölçekleme kapatıldı; yalnız gölge ve öne alma kalır. */
    .usl-fc-item:hover,
    .usl-fc-item:focus-visible { transform: none; }

    /* ── Yatay: satır içindeki kartlar esner ── */
    .usl-fc-row { display: flex; }
    .usl-fc-row > .usl-fc-item {
        flex: 1 1 0;
        min-width: 0;
        transition: flex-grow .38s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
    }
    .usl-fc-row > .usl-fc-item:hover,
    .usl-fc-row > .usl-fc-item:focus-visible { flex-grow: 1.75; }

    /* ── Düşey: hover hangi satırdaysa o satır uzar, diğeri kısalır ── */
    .usl-fc-side { transition: grid-template-rows .38s cubic-bezier(.22, 1, .36, 1); }
    .usl-fc-side:has(.usl-fc-row--ikili .usl-fc-item:hover) { grid-template-rows: 1.45fr 0.85fr; }
    .usl-fc-side:has(.usl-fc-row--uclu  .usl-fc-item:hover) { grid-template-rows: 0.92fr 1.28fr; }

    /* ── Üst seviye: kahraman karo ile sağ blok birbirine yer açar ── */
    .usl-fc-grid { transition: grid-template-columns .38s cubic-bezier(.22, 1, .36, 1); }
    .usl-fc-grid:has(.usl-fc-item--hero:hover) {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.65fr);
    }
    .usl-fc-grid:has(.usl-fc-side .usl-fc-item:hover) {
        grid-template-columns: minmax(0, 0.74fr) minmax(0, 2.26fr);
    }
}

/* ══════════ Mobil: kategori kartları sırayla vurgulanır ══════════
   Dokunmatikte hover olmadığı için masaüstündeki "büyüyen kart" etkisi burada
   otomatik sırayla uygulanır (bkz. index.php'deki is-vurgulu döngüsü).
   Geçiş yavaş: kart büyürken göz takip edebilsin. */
@media (max-width: 760px) {
    .usl-fc-item {
        transition: transform .85s cubic-bezier(.22, 1, .36, 1),
                    box-shadow .85s ease;
    }
    /* Büyüme scale ile DEĞİL, sütun paylaşımıyla yapılıyor (aşağıdaki
       .vurgu-sol/.vurgu-sag kuralları) — scale kartı komşusunun üstüne bindiriyordu. */
    .usl-fc-item.is-vurgulu {
        box-shadow: 0 12px 26px -14px rgba(43, 26, 31, .3);
    }
    /* Vurgulu kartta ok düğmesi de büyür — masaüstündeki hover ile aynı dil. */
    .usl-fc-item.is-vurgulu .usl-fc-ok {
        width: 44px; height: 44px;
        background: var(--accent, #6b2740);
        color: #fff;
        transition: width .85s cubic-bezier(.22, 1, .36, 1),
                    height .85s cubic-bezier(.22, 1, .36, 1),
                    background .85s ease, color .85s ease;
    }
}

/* ══════════ Bant bölümlerinin hizası ══════════
   Sorun: .section--raised kutusu 100vw'ye çıkıp KENDİ iç dolgusunu kullanıyordu;
   sayfanın geri kalanı ise .container (max 1400px + 16px dolgu) ile hizalı.
   Aradaki fark (ölçüldü: içerik 31px'den başlıyor, diğer bölümler 16px'den)
   Trend/Öne Çıkanlar raylarının diğer bölümlerle aynı hizada başlayıp bitmemesine
   yol açıyordu. Çözüm: kutu normal akışta kalır (dolayısıyla container hizasında),
   ekran boyu uzanan krem bant arka plana sözde-elemanla çizilir. */
.section--raised {
    position: relative;
    width: auto;
    margin-left: 0; margin-right: 0;
    background: none;
    border-top: 0; border-bottom: 0;
}
.section--raised::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%; transform: translateX(-50%);
    width: 100vw;
    background: var(--ground-raised);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    z-index: 0;
    pointer-events: none;
}
.section--raised > * {
    position: relative;
    z-index: 1;
    max-width: none;
    margin-left: 0; margin-right: 0;
    padding-left: 0; padding-right: 0;
}

/* ══════════ Mobil: kategori kartları web görünümüyle aynı ══════════ */
@media (max-width: 760px) {
    /* 1) Kategori adının zemini: kart başına farklı renk (--fc-renk) yerine
          masaüstündeki koyu geçiş katmanı. Artık iki görünüm aynı dili konuşuyor. */
    .usl-fc-panel,
    .usl-fc-item--hero .usl-fc-panel {
        left: 0; right: 0; bottom: 0;
        padding: 10px 12px;
        background: linear-gradient(to top, rgba(28, 16, 20, .74), rgba(28, 16, 20, .34) 55%, rgba(28, 16, 20, 0));
        color: #fff;
        text-align: left;
    }
    .usl-fc-baslik,
    .usl-fc-item--hero .usl-fc-baslik { color: #fff; }
    .usl-fc-alt,
    .usl-fc-item--hero .usl-fc-alt { color: rgba(255, 255, 255, .88); }

    /* 2) Büyüme: masaüstündeki gibi düzen yeniden paylaşılır — vurgulanan kartın
          sütunu genişler, diğer sütun daralır. Kartların en-boy oranı sabit
          olduğu için genişleyen sütundaki kart aynı anda YÜKSELİR de. */
    .usl-fc-item.is-vurgulu { transform: none; }
    .usl-fc-grid {
        transition: grid-template-columns .85s cubic-bezier(.22, 1, .36, 1);
    }
    .usl-fc-grid.vurgu-sol { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); }
    .usl-fc-grid.vurgu-sag { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr); }

    /* Kahraman karo tam genişlik olduğu için yüksekliğiyle büyür. */
    .usl-fc-item--hero { transition: aspect-ratio .85s cubic-bezier(.22, 1, .36, 1); }
}

/* Mobil vurgu: daha ölçülü ve daha yavaş.
   Sütun oranı 1.5/0.5 (kart 196→250px) gözü yoruyordu; 1.18/0.82 ile büyüme
   yaklaşık üçte birine iner. Geçiş 0.85s → 1.6s. */
@media (max-width: 760px) {
    .usl-fc-grid { transition: grid-template-columns 1.6s cubic-bezier(.33, 1, .68, 1); }
    .usl-fc-grid.vurgu-sol { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
    .usl-fc-grid.vurgu-sag { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }

    .usl-fc-item { transition: transform 1.6s cubic-bezier(.33, 1, .68, 1), box-shadow 1.6s ease; }
    .usl-fc-item--hero { transition: aspect-ratio 1.6s cubic-bezier(.33, 1, .68, 1); }
    .usl-fc-item.is-vurgulu { box-shadow: 0 12px 26px -14px rgba(43, 26, 31, .3); }
    .usl-fc-item.is-vurgulu .usl-fc-ok {
        width: 38px; height: 38px;
        transition: width 1.6s cubic-bezier(.33, 1, .68, 1),
                    height 1.6s cubic-bezier(.33, 1, .68, 1),
                    background 1.6s ease, color 1.6s ease;
    }
}

/* ══════════ Mobil örtüşmenin kökü ══════════
   Kartlar ızgarada varsayılan olarak "stretch" hizalanıyor: yükseklik satırdan
   geliyor, aspect-ratio da o yükseklikten GENİŞLİK türetiyordu. Sütun daralınca
   (vurgu paylaşımı) kart 196px'te kalıp 147px'lik sütundan taşıyor ve komşusunun
   üstüne biniyordu (ölçüldü: 50px örtüşme). Çözüm: yükseklik genişlikten
   türetilsin — kart hiçbir zaman sütununu aşamaz. */
@media (max-width: 760px) {
    /* NOT: .usl-fc-side/.usl-fc-row display:contents olduğu için kartlar DOM'da
       ızgaranın doğrudan çocuğu DEĞİL — "> " seçicisi eşleşmiyordu. */
    .usl-fc .usl-fc-item {
        align-self: start;
        justify-self: stretch;
        width: 100%;
        min-width: 0;
    }
    /* İki satır boyunca uzanan uzun kart yüksekliği satırlardan almalı. */
    .usl-fc-row--uclu > .usl-fc-item:nth-child(3) { align-self: stretch; }
}

/* ══════════ Mobil: sütun daralınca düşeyde boşluk kalmasın ══════════
   Kartların yüksekliği en-boy oranıyla GENİŞLİKTEN türüyordu; vurgu sırasında
   daralan sütunun kartları kısalıp satırlarda boşluk bırakıyordu (geniş sütunda
   ise tam tersi). Çözüm: satır yüksekliği ızgarada sabitlenir, kartlar hücrenin
   tamamını doldurur — genişlik sütundan, yükseklik satırdan gelir. Böylece ne
   taşma ne boşluk olur; büyüme yatayda görünür. */
@media (max-width: 760px) {
    .usl-fc-grid {
        grid-template-rows: auto;   /* 1. satır: kahraman karo, içeriğine göre */
        grid-auto-rows: 42vw;       /* mozaik satırları sabit yükseklikte */
    }
    .usl-fc .usl-fc-item:not(.usl-fc-item--hero) {
        aspect-ratio: auto;
        align-self: stretch;
        height: 100%;
    }
    /* Kahraman karo kendi oranını korur (tam genişlik, ilk satır). */
    .usl-fc-item--hero { aspect-ratio: 4 / 3.4; align-self: start; }
}

/* ══════════ Duyuru bandı — header'ın üstünde, kampanya rengi ══════════
   Bant artık ödeme logolarını taşımıyor (onlar footer'da); yalnız kampanya ve
   kargo mesajlarını döndürüyor. Sayfa başında görünür, kaydırınca yukarı kayar;
   header sticky olduğu için ekranda kalan tek şerit header olur. */
.usl-trust-band {
    background: var(--accent, #6b2740) !important;
    color: #fff !important;
    border: 0;
    position: relative;
    z-index: 1001;              /* sticky header'ın üstünde başlar */
}
.usl-trust-band-inner {
    position: relative;
    min-height: 38px;
    padding-block: 0;
    justify-content: center;
}
.usl-trust-band .usl-tb-item,
.usl-trust-band .usl-tb-mesaj { color: #fff; }
.usl-trust-band .usl-tb-mesaj { font-size: 12.5px; letter-spacing: .015em; }
.usl-trust-band .usl-tb-ico { opacity: .9; }
/* Kapatma düğmesi kaldırıldı: duyuru bandı her sayfada görünür kalır. */
.usl-tb-kisisel[hidden] { display: none !important; }

/* Sticky header: bant üstte akıp giderken header ekranda kalır (mobil + masaüstü). */
.site-header.brand-header { position: sticky; top: 0; z-index: 1000; }

@media (max-width: 760px) {
    /* Kapatma düğmesi yok: sağdaki 30px'lik yer artık gerekmiyor, mesaj ortada. */
    .usl-trust-band-inner { min-height: 34px; padding-inline: 14px; }
    .usl-trust-band .usl-tb-mesaj { font-size: 11px; }
}

/* Sepet ikonundaki kampanya etiketi: "%15 aktif" */
/* Kampanya oranı sepet ikonunun ALTINDA, akıştan bağımsız durur: düğmenin
   kutusu hiç değişmediği için ikon yerinden oynamaz. İkon ile oranı ortak bir
   çerçeve sarar — hap değil, köşeleri yuvarlatılmış DÜŞEY bir dikdörtgen.
   Çerçeve de akış dışı bir katman (::before) olduğu için yerleşimi etkilemez. */
.usl-sepet-kampanya {
    /* Üstten konumlanır: ikonun alt kenarı düğmenin üstünden 21 px aşağıda,
       yazı 1 px boşlukla hemen altında başlar. */
    position: absolute; left: 50%; top: 22px; bottom: auto; transform: translateX(-50%);
    z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    color: inherit;                     /* ikonla aynı renk */
    font-size: 8.5px; font-weight: 700; letter-spacing: .01em; line-height: 1;
    padding: 0 3px; white-space: nowrap; pointer-events: none;
}
.usl-sepet-kampanya[hidden] { display: none !important; }
.usl-sk-alt { font-size: 6.5px; font-weight: 600; letter-spacing: .01em; line-height: 1; }
/* "aktif" sözcüğü çerçeveyi yatay dikdörtgene çevirirdi; anlamı sepet
   bağlantısının title'ında duruyor (JS yazıyor). */
.usl-sk-ek { display: none; }
#btnHeaderCart { position: relative; overflow: visible; }
#btnHeaderCart.is-kampanyali > i { position: relative; z-index: 1; }
/* Adet sayacı çerçeveye bağlı değil: kendi doğal yerinde (ikonun sağ üstü)
   kalır, yalnız her şeyin üstünde çizilsin diye en yüksek katmanı alır.
   position'ı DEĞİŞTİRİLMEZ — relative yapılsaydı akışa girip ikonu kaydırırdı. */
#btnHeaderCart.is-kampanyali .badge { z-index: 3; }
#btnHeaderCart.is-kampanyali::before {
    content: "";
    position: absolute; left: 50%; transform: translateX(-50%);
    top: -3px; bottom: -5px;
    width: max(calc(100% - 6px), 38px);
    /* Alt navigasyondaki sepet düğmesiyle aynı dil: şerit rengine yakın,
       hafif kabartmalı; yeşil zemin/çerçeve yok. */
    background: #fff;
    box-shadow: 0 1px 3px rgba(74, 26, 44, .14), 0 0 0 1px rgba(217, 200, 189, .55);
    border-radius: 12px; z-index: 0;
}
/* Yazı gizlenirken display:none kullanılsaydı düğme kısalır, ikon kayardı. */
#btnHeaderCart.is-kampanyali .usl-ikon-etiket { visibility: hidden; }

@media (max-width: 980px) {
    /* Mobilde ikon düğmenin ortasında; alt kenarı üstten 26,5 px'te. */
    .usl-sepet-kampanya { font-size: 8px; top: 27.5px; bottom: auto; }
    .usl-sk-alt { font-size: 6px; }
    #btnHeaderCart.is-kampanyali::before {
        width: max(calc(100% - 4px), 32px);
        top: -2px; bottom: -8px; border-radius: 9px;
    }
}

/* ══════════ Slider üzerindeki kampanya bloğu (kademe merdiveni) ══════════ */
/* Blok, slider section'ının KARDEŞİDİR: section'ın aspect-ratio + overflow:hidden
   yapısı içine akıcı olarak yerleşemediği için sarmalayıcı üzerinden konumlanır.
   Masaüstünde slider'ın üzerine biner, mobilde altına tam genişlikte kart olur. */
.usl-hero-kap { position: relative; }
.usl-hero-kampanya {
    position: absolute; z-index: 4;
    /* Sağ tarafta durur: slider'ın kendi başlığı, alt başlığı ve stok şeridi
       sol alt köşeyi kullanıyor; blok sola konsaydı üstlerine binerdi. */
    right: 4%; bottom: 10%;
    width: min(380px, 38%);
    display: flex; flex-direction: column; gap: 14px;
    padding: 20px 22px;
    background: rgba(250, 245, 241, .94);
    border-radius: 14px;
    box-shadow: 0 20px 44px -26px rgba(28, 16, 20, .55);
}
.usl-hk-baslik {
    margin: 0; font-family: var(--serif, Georgia, serif);
    font-size: clamp(18px, 1.9vw, 23px); line-height: 1.2;
    color: var(--accent, #6b2740); font-weight: 600;
}
.usl-hk-merdiven { display: flex; flex-direction: column; gap: 7px; }
.usl-hk-yol {
    position: relative; height: 5px; border-radius: 999px;
    background: var(--ground-raised, #ece0d8);
}
.usl-hk-dolgu {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    border-radius: 999px; background: var(--accent, #6b2740);
    transition: width .8s cubic-bezier(.22, 1, .36, 1);
}
.usl-hk-kademeler {
    display: flex; justify-content: space-between;
    font-size: 10.5px; color: var(--ink-soft, #6b5a56);
    font-variant-numeric: tabular-nums;
}
.usl-hk-kademe { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.usl-hk-kademe b { font-size: 12.5px; color: var(--ink, #2b1a1f); }
.usl-hk-kademe.aktif b { color: var(--accent, #6b2740); }
.usl-hk-durum { margin: 0; font-size: 12px; color: var(--ink-soft, #6b5a56); }
.usl-hk-durum[hidden] { display: none !important; }
.usl-hk-btn {
    align-self: flex-start;
    background: var(--ink, #2b1a1f); color: #fff;
    border-radius: 999px; padding: 11px 24px;
    font-size: 13px; font-weight: 600; text-decoration: none;
    transition: background .2s ease;
}
.usl-hk-btn:hover { background: var(--accent, #6b2740); }

@media (max-width: 760px) {
    /* Mobilde slider yalnızca ~180px yüksekliğinde; blok üzerine binseydi
       görselin tamamını kapatırdı. Bu yüzden akışa girip altına yerleşir. */
    .usl-hero-kampanya {
        position: static; width: auto; right: auto; bottom: auto;
        margin: 12px 0 0; padding: 14px 15px;   /* sayfa kenarları sarmalayıcıdan gelir */
        gap: 11px; border-radius: 12px;
        background: var(--ground-raised, #f4ece6);
        box-shadow: none; border: 1px solid rgba(107, 39, 64, .14);
    }
    .usl-hk-baslik { font-size: 17px; }
    .usl-hk-kademeler { font-size: 9.5px; }
    .usl-hk-kademe b { font-size: 11.5px; }
    .usl-hk-btn { align-self: stretch; text-align: center; padding: 11px 18px; font-size: 13px; }
}

/* ══════════ Menüde kampanya izleri ══════════ */
/* Aktif ürün indirimi olan ailenin adının sağ üstünde küçük nokta. Nokta
   ::after ile basılır; menü bağlantısı zaten position:relative değilse
   konumlanamayacağı için burada da veriliyor. */
.nav-primary .usl-nav-kampanyali,
.usl-mnav-famtab.usl-nav-kampanyali { position: relative; }
.nav-primary .usl-nav-kampanyali::after,
.usl-mnav-famtab.usl-nav-kampanyali::after {
    content: ""; position: absolute; top: 2px; right: -9px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent, #6b2740);
}
/* Şeridin sağ ucunda kampanya özeti — bilgi amaçlı, bağlantı değil.
   Bant align-items:stretch olduğu için etiket kutusu bandın tamamına uzuyor ve
   yazı yukarı kaçıyordu; flex ortalama ile dikeyde tam ortaya oturur. */
.usl-nav-kampanya-etiket {
    margin-left: auto; white-space: nowrap;
    display: inline-flex; align-items: center; align-self: center;
    line-height: 1;
    font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent, #6b2740);
}
@media (max-width: 980px) {
    .usl-nav-kampanya-etiket { display: none; }
}

/* ══════════ Bildirim menüsündeki kademe merdiveni (mobil) ══════════ */
/* Merdiven iki yerde yaşar: masaüstünde slider üzerindeki blokta, mobilde
   bildirim panelinde. İkisi de .usl-hk sınıfını taşır ve aynı JS ile dolar. */
.usl-hk-bildirim {
    display: none;                       /* masaüstünde slider bloğu yeter */
    flex-direction: column; gap: 10px;
    margin: 2px 4px 8px; padding: 12px 13px;
    background: var(--ground-raised, #f4ece6);
    border: 1px solid rgba(107, 39, 64, .14);
    border-radius: 12px;
}
.usl-hk-bildirim .usl-hk-baslik { font-size: 14.5px; }
.usl-hk-bildirim .usl-hk-kademeler { font-size: 9.5px; }
.usl-hk-bildirim .usl-hk-kademe b { font-size: 11.5px; }
.usl-hk-bildirim .usl-hk-durum { font-size: 11.5px; }

/* Sivri uç ikona doğru daha belirgin uzansın — panelin zilden çıktığı okunsun. */
.usl-bildirim-menu::before {
    width: 13px; height: 13px; top: -7px;
    box-shadow: -2px -2px 4px -3px rgba(31, 27, 22, .35);
}
/* Ucun merkezi zilin merkezine denk gelsin (menü zil sarmalayıcısından 8px taşar). */
.usl-bildirim-menu::before { right: var(--uc-sag, 13px); }
.usl-bildirim-wrap--mobil .usl-bildirim-menu::before { left: var(--uc-sol, 13px); right: auto; }

@media (max-width: 760px) {
    .usl-hk-bildirim { display: flex; }
    /* Merdiven bildirime taşındı: slider altındaki kopyası mobilde gizlenir. */
    .usl-hero-kampanya { display: none; }
    /* Kademe satırları merdivende görünüyor; metin listesi tekrar olmasın. */
    .usl-bildirim-kademeler { display: none; }
    /* Panel zilin altında, ekranın büyük kısmını kaplasın ama taşmasın. */
    .usl-bildirim-wrap--mobil .usl-bildirim-menu { width: min(340px, calc(100vw - 24px)); }
}

/* ══════════ Kategori bandı (laredoute düzeni: marka satırı + ayrı şerit) ══════════
   Aileler artık marka satırının içinde sıkışmıyor; kendi tam genişlikli
   bandında duruyor. Marka satırı üç sütuna dönüşür: marka · arama · ikonlar. */
.usl-kategori-bandi {
    border-top: 1px solid var(--line);
    /* Bant marka satırından AYRIŞSIN: yükseltilmiş zeminin bir tık koyusu ve
       altında ince aksan çizgisi. Aksi hâlde header ile aynı renkte eriyordu. */
    background: var(--kat-band-bg, #e6d6cd);
    border-bottom: 2px solid rgba(107, 39, 64, .18);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .45);
}
/* Bağlantılar zemin koyulaştığı için biraz daha koyu; KALINLIK temanın kendi
   değeridir — 600 verilince şerit "bold" görünüyordu. */
.usl-kategori-bandi .nav-primary > a,
.usl-kategori-bandi .nav-primary .usl-mega-wrap > a {
    color: var(--ink, #2b1a1f);
}
.usl-kategori-bandi .nav-primary > a:hover,
.usl-kategori-bandi .nav-primary .usl-mega-wrap > a:hover { color: var(--accent, #6b2740); }
.usl-kategori-bandi .nav-primary {
    width: 100%; max-width: 1480px; margin-inline: auto;
    padding: 10px clamp(22px, 3vw, 52px);
    box-sizing: border-box;
    flex: none; justify-content: flex-start; flex-wrap: nowrap;
    gap: clamp(18px, 2.2vw, 30px);
    align-items: center;
}
/* Mega menü bandın altından açılır; bant kırpmamalı. Aile bağlantısı bandın
   ortasında durduğu için top:100% bandın 6 px üstüne düşüyordu: öğe bandın
   yüksekliğine yayılır, panel de alt dolgu kadar aşağı itilir. */
.usl-kategori-bandi { overflow: visible; }
.usl-kategori-bandi .nav-primary { align-items: stretch; }
.usl-kategori-bandi .usl-mega { top: calc(100% + 10px); }

/* Marka satırı: arama ortada esner, marka ve ikonlar kendi genişliğinde kalır. */
.brand-header-row > .brand { flex: 0 0 auto; }
.brand-header-row > .search-pill { flex: 1 1 auto; min-width: 220px; max-width: 560px; }
.brand-header-row > .header-tools { flex: 0 0 auto; }

@media (max-width: 980px) {
    /* Eski davranış: nav gizli, hamburgerden açılan mutlak konumlu liste.
       Artık bant görünür ve yatay kaydırılır — kategoriye ulaşmak için
       düğmeye basmak gerekmez. Hamburger alt kategoriler için durur. */
    .usl-kategori-bandi .nav-primary {
        display: flex !important;
        position: static;
        /* Eski açılır liste kuralından gelen kendi zemini bandı örtüyordu. */
        background: transparent;
        flex-direction: row; flex-wrap: nowrap;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding: 9px clamp(16px, 4vw, 26px);
        gap: 18px; border-bottom: none;
        scrollbar-width: none;
    }
    .usl-kategori-bandi .nav-primary::-webkit-scrollbar { display: none; }
    .usl-kategori-bandi .usl-nav-item { flex: 0 0 auto; }
    .usl-kategori-bandi .nav-primary > a { flex: 0 0 auto; white-space: nowrap; }
    /* Dokunmatikte hover mega menüsü açılmasın — bağlantı doğrudan aileye gider. */
    .usl-kategori-bandi .usl-mega { display: none; }
}

/* ══════════ Header sağı: ikonun altında adı ══════════
   Öneride olduğu gibi her ikonun altında küçük etiketi var; ikonlar tek
   hizada durur. Mobilde etiketler gizlenir (yer yok, logo ortada). */
.brand-header-row .icon-btn,
.brand-header-row .usl-kargo-takip {
    flex-direction: column; gap: 3px; padding: 4px 6px;
}
.usl-ikon-etiket {
    font-size: 9.5px; letter-spacing: .04em; font-weight: 600;
    color: var(--ink-soft); line-height: 1; white-space: nowrap;
}
.brand-header-row .icon-btn:hover .usl-ikon-etiket,
.brand-header-row .usl-kargo-takip:hover .usl-ikon-etiket { color: inherit; }
/* Rozet ve "%X aktif" etiketi ikona göre konumlanıyordu; sütun düzeninde
   düğme yükseldiği için üst kenara sabitlenir. */
.brand-header-row .icon-btn .badge { top: -2px; right: 0; }
.brand-header-row .usl-kargo-takip { font-size: 0; }
.brand-header-row .usl-kargo-takip i { font-size: 17px; }
.brand-header-row .usl-kargo-takip:hover { background: none; }
@media (max-width: 980px) {
    .usl-ikon-etiket { display: none; }
    .brand-header-row .icon-btn,
    .brand-header-row .usl-kargo-takip { flex-direction: row; }
}

/* ══════════ Kategori bandındaki "Kategoriler" düğmesi ══════════ */
.usl-kat-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 1px solid var(--line); border-radius: 999px;
    padding: 7px 15px; margin-right: 6px;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    letter-spacing: .04em; color: var(--ink); cursor: pointer;
    white-space: nowrap; flex: 0 0 auto;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.usl-kat-btn:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
.usl-kat-btn i { font-size: 13px; }

/* Masaüstünde kategori çekmecesi tam ekran değil, soldan açılan panel olur. */
@media (min-width: 981px) {
    .usl-mobile-nav { right: auto; width: min(420px, 92vw); box-shadow: 0 0 60px rgba(31, 27, 22, .28); }
}
@media (max-width: 980px) {
    /* Mobilde aynı işi marka satırındaki hamburger görüyor. */
    .usl-kat-btn { display: none; }
    /* Aile adları bandın ortasında toplansın. */
    .usl-kategori-bandi .nav-primary { justify-content: center; }
}

/* ══════════ Header'ın en alt şeridi: kargo kampanyası + ödeme logoları ══════════ */
.usl-guven-serit {
    border-top: 1px solid var(--line);
    background: var(--ground, #faf5f1);
}
.usl-guven-serit-ic {
    width: 100%; max-width: 1480px; margin-inline: auto;
    padding: 7px clamp(22px, 3vw, 52px);
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.usl-gs-kargo {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 600; letter-spacing: .02em;
    color: var(--accent, #6b2740); white-space: nowrap;
}
.usl-gs-kargo i { font-size: 13px; }
.usl-gs-logos { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.usl-gs-logo { display: inline-flex; align-items: center; line-height: 0; opacity: .92; }
.usl-gs-logo svg { height: 17px; width: auto; display: block; }

@media (max-width: 760px) {
    /* Dar ekranda tek satırda kalsın: yazı küçülür, logolar kayabilir. */
    .usl-guven-serit-ic {
        padding: 6px clamp(12px, 4vw, 20px);
        gap: 10px; justify-content: center; flex-wrap: wrap;
    }
    .usl-gs-kargo { font-size: 10.5px; }
    .usl-gs-logos { gap: 6px; }
    .usl-gs-logo svg { height: 14px; }
}

/* ══════════ Ürün kartında indirim rozeti (fiyat satırı) ══════════
   Üstü çizili liste fiyatı + yeni fiyat zaten vardı; yanına oranı da koyuyoruz.
   "Sepette" varyantı, sepete eklendiğinde uygulanacak kampanya oranını anlatır. */
/* Rozet ikinci satıra düşüyor; yatay raylarda kartlar eşit boyda kalsın diye
   fiyat satırı iki satırlık yer ayırır (indirimsiz kartta ikinci satır boş). */
.product-card-price { flex-wrap: wrap; row-gap: 4px; min-height: 46px; align-content: flex-start; }
.price-rozet {
    display: inline-flex; align-items: center;
    font-family: var(--sans); font-size: 10px; font-weight: 700;
    letter-spacing: .02em; line-height: 1;
    padding: 3px 7px; border-radius: 999px;
    background: var(--accent-tint, #f3e6ea); color: var(--accent, #6b2740);
    white-space: nowrap;
}
.price-rozet--sepet { background: #e6f4ea; color: #1f7a44; }
@media (max-width: 640px) {
    .price-rozet { font-size: 9px; padding: 2px 6px; }
    /* Dar kartta (156 px) eski + yeni fiyat aynı satıra ancak bu boyutlarla
       sığıyor; rozet ikinci satıra düşer, min-height ikisini de karşılar. */
    .product-card-price { min-height: 40px; }
    .product-card-price .price-old { font-size: 11px; }
    .product-card-price .price-current { font-size: 13px; }
}

/* Mobil güven şeridi biraz daha derli toplu olsun (iki satıra düşüyor). */
@media (max-width: 760px) {
    .usl-guven-serit-ic { gap: 6px 10px; padding: 5px clamp(12px, 4vw, 20px); }
    .usl-gs-logo svg { height: 13px; }
}

/* Slider, ödeme/kargo şeridine yapışsın: .site-main'in üst dolgusu (24px)
   ana sayfada hero için geri alınır. Değer style.css'teki `.site-main`
   dolgusuyla aynı olmalı — ikisi birlikte değişir. */
.site-main > .container:first-child > .usl-hero-kap:first-child,
.site-main > .container:first-child > .usl-hero-slide:first-child {
    margin-top: -24px;
}

/* ══════════ Alt navigasyondaki sepet sekmesi ══════════
   Sepet, şeridin ortasındaki eylem düğmesi gibi durur: ikonu ve altındaki
   yazıyı birlikte saran, köşeleri yuvarlatılmış hafif kabartmalı bir alan.
   Zemin şeridin rengine yakın (pembe değil); kabartma gölgeden gelir.
   Düğme akış dışı bir katman (::before) olduğu için hiçbir şey kaymaz. */
.usl-tab { position: relative; }
#uslTabCart::before {
    content: "";
    position: absolute; left: 4px; right: 4px; top: 5px; bottom: 5px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(74, 26, 44, .14), 0 0 0 1px rgba(217, 200, 189, .55);
    z-index: 0;
}
#uslTabCart.active::before { background: var(--accent-tint, #f3e6ea); }
#uslTabCart > * { position: relative; z-index: 1; }
.usl-tab-icon-wrap { background: none; padding: 0; }
/* Adet sayacı kendi yerinde ve her şeyin üstünde kalır. */
.usl-tab-badge { z-index: 3; }

/* İndirim satırı ikon ile "Sepet" yazısının ARASINA girer: ikon üstte,
   ortada küçük "%15 İndirim", altta "Sepet". Üçü de düğmenin içinde kalsın
   diye sekme aralıkları biraz kısılır. */
/* Sekmenin üst dolgusu 4px, altı 2px; üç satır varken içerik düğmede
   ortalanmıyordu — dolgu eşitlenir. */
#uslTabCart.is-kampanyali { gap: 1px; padding-top: 3px; padding-bottom: 3px; }
#uslTabCart.is-kampanyali .usl-tab-icon-wrap { order: 0; }
#uslTabCart.is-kampanyali .usl-tab-kampanya { order: 1; }
#uslTabCart.is-kampanyali .usl-tab-yazi { order: 2; }
#uslTabCart.is-kampanyali::before { top: 3px; bottom: 3px; }
/* Header rozetinden gelen mutlak konum (left/top) burada geçersiz kılınmalı:
   #uslTabCart > * kuralı position:relative verdiği için o offsetler yoksa
   yazı sekmenin dışına kayar. */
#uslTabCart .usl-tab-kampanya {
    position: relative; left: auto; right: auto; top: auto; bottom: auto;
    transform: none;
    display: inline-flex; flex-direction: row; align-items: baseline; gap: 3px;
    padding: 0; color: inherit;
    font-size: 8px; font-weight: 700; letter-spacing: 0; line-height: 1.1;
}
.usl-tab-kampanya .usl-sk-alt {
    display: inline; font-size: inherit; font-weight: inherit; letter-spacing: 0;
}

/* ══════════ Sepet çekmecesi: kupon alanı ══════════ */
.usl-cart-kupon { margin: 8px 0 2px; }
.usl-cart-kupon-giris { display: flex; gap: 6px; }
.usl-cart-kupon-giris[hidden] { display: none !important; }
.usl-cart-kupon-giris input {
    flex: 1; min-width: 0; padding: 8px 10px; font-size: 12.5px;
    border: 1px dashed var(--line, #d9c8bd); border-radius: 8px;
    text-transform: uppercase; letter-spacing: .06em;
}
.usl-cart-kupon-giris input:focus { outline: none; border-color: var(--accent, #6b2740); }
.usl-cart-kupon-giris button {
    border: none; border-radius: 8px; padding: 8px 14px; cursor: pointer;
    background: var(--accent-tint, #f3e6ea); color: var(--accent, #6b2740);
    font-size: 12.5px; font-weight: 700;
}
.usl-cart-kupon-giris button:hover { background: var(--accent, #6b2740); color: #fff; }
.usl-cart-kupon-hata { margin: 4px 0 0; font-size: 11.5px; color: #b3261e; }
.usl-cart-kupon-hata[hidden] { display: none !important; }
.usl-cart-kupon-satir { color: #1f7a44; font-weight: 600; }
.usl-cart-kupon-satir[hidden] { display: none !important; }
.usl-cart-kupon-satir b { letter-spacing: .04em; }
#uslKuponKaldir {
    border: none; background: none; color: #b3261e; cursor: pointer;
    font-size: 14px; padding: 0 2px; vertical-align: 1px;
}


/* ══════════ Çekmece: kademe barı + kupon yönlendirme butonu ══════════ */
.usl-cart-kademe-bar {
    margin: 8px 0 2px; padding: 7px 10px; border-radius: 8px;
    background: #e6f4ea; color: #166534;
    font-size: 11.5px; font-weight: 700; line-height: 1.35;
}
.usl-cart-kademe-bar[hidden] { display: none !important; }
.usl-cart-kupon-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px; padding: 7px 12px; border-radius: 999px;
    border: 1px dashed var(--accent, #6b2740);
    color: var(--accent, #6b2740); background: #fff;
    font-size: 12px; font-weight: 700; text-decoration: none;
}
.usl-cart-kupon-btn:hover { background: var(--accent-tint, #f3e6ea); }
.usl-cart-kupon-btn[hidden] { display: none !important; }

/* ══════════ Ödeme adımı: kupon girişi ══════════ */
.ck-kupon { margin: 10px 0 4px; }
.ck-kupon-giris { display: flex; gap: 8px; }
.ck-kupon-giris input {
    flex: 1; min-width: 0; padding: 10px 12px; font-size: 13px;
    border: 1px dashed var(--line, #d9c8bd); border-radius: 10px;
    text-transform: uppercase; letter-spacing: .06em;
}
.ck-kupon-giris input:focus { outline: none; border-color: var(--accent, #6b2740); }
.ck-kupon-giris button {
    border: none; border-radius: 10px; padding: 10px 18px; cursor: pointer;
    background: var(--accent-tint, #f3e6ea); color: var(--accent, #6b2740);
    font-size: 13px; font-weight: 700;
}
.ck-kupon-giris button:hover { background: var(--accent, #6b2740); color: #fff; }
.ck-kupon-hata { margin: 5px 0 0; font-size: 12px; color: #b3261e; }
.ck-kupon-hata[hidden] { display: none !important; }
.ck-kupon-uygulandi {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border-radius: 10px;
    background: #e6f4ea; color: #166534; font-size: 13px; font-weight: 600;
}
.ck-kupon-uygulandi button {
    border: none; background: none; color: #b3261e; cursor: pointer;
    font-size: 12.5px; font-weight: 700; text-decoration: underline;
}


/* ══════════ Kupon popup'ı ══════════ */
.usl-kupon-popup-backdrop {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(31, 27, 22, .45);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.usl-kupon-popup-backdrop[hidden] { display: none !important; }
.usl-kupon-popup {
    position: relative; width: min(380px, 100%);
    background: #fff; border-radius: 16px; padding: 22px 20px 18px;
    box-shadow: 0 24px 60px rgba(31, 27, 22, .28);
}
.usl-kupon-popup h3 { margin: 0 0 4px; font-size: 17px; color: var(--ink, #2b1a1f); }
.usl-kupon-popup p { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-soft, #6b5a56); }
.usl-kupon-popup-kapat {
    position: absolute; top: 10px; right: 12px;
    border: none; background: none; font-size: 20px; cursor: pointer;
    color: var(--ink-soft, #6b5a56); line-height: 1;
}
.usl-kupon-popup-giris { display: flex; gap: 8px; }
.usl-kupon-popup-giris input {
    flex: 1; min-width: 0; padding: 11px 12px; font-size: 14px; font-weight: 700;
    border: 1.5px dashed var(--accent, #6b2740); border-radius: 10px;
    text-transform: uppercase; letter-spacing: .08em; text-align: center;
}
.usl-kupon-popup-giris input:focus { outline: none; border-style: solid; }
.usl-kupon-popup-giris button {
    border: none; border-radius: 10px; padding: 11px 18px; cursor: pointer;
    background: var(--accent, #6b2740); color: #fff; font-size: 13.5px; font-weight: 700;
}
.usl-kupon-popup-giris button:hover { background: var(--usl-accent-dark, #4a1a2c); }
.usl-kupon-popup-hata { margin: 8px 0 0 !important; color: #b3261e !important; font-weight: 600; }

/* Çekmecede küçük kupon bağlantısı: sağa yaslı, az yer kaplar */
.usl-cart-kupon { display: flex; justify-content: flex-end; margin: 2px 0; }
.usl-cart-kupon .usl-cart-kupon-satir { flex: 1; }
.usl-cart-kupon-link {
    border: none; background: none; cursor: pointer; padding: 2px 0;
    font-size: 11.5px; font-weight: 700; color: var(--accent, #6b2740);
    text-decoration: underline; text-underline-offset: 2px;
}
.usl-cart-kupon-link:hover { color: var(--usl-accent-dark, #4a1a2c); }
.usl-cart-kupon-link[hidden] { display: none !important; }

/* Ödeme adımında kupon aç butonu + gönderim adı */
.ck-kupon-ac {
    border: 1.5px dashed var(--accent, #6b2740); background: #fff;
    color: var(--accent, #6b2740); border-radius: 10px; padding: 9px 14px;
    font-size: 13px; font-weight: 700; cursor: pointer; width: 100%;
}
.ck-kupon-ac:hover { background: var(--accent-tint, #f3e6ea); }
.ck-gonderim-adi { font-size: 12px; color: var(--ink-soft, #6b5a56); font-weight: 600; }

/* ── Checkout: bölüm ayrımları + KDV dökümü ── */
/* Gönderim Yöntemi ayrı bir bölümdür: üstündeki indirim/kupon satırlarından
   boşluk ve ince çizgiyle ayrılır. */
.ck-bolum-ayrik {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--usl-border);
}
/* Kupon yönetimi artık kupon indirim satırının hemen altında durur. */
.ck-kupon { margin: 2px 0 6px; }


/* Genel toplam en alttaki bölümdür: üstündekilerden belirgin ayrılır. */
.ck-genel-toplam-satir {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--usl-border);
}

/* Kalem KDV'si (fiyata dahil) satır tutarının solunda küçük yazıyla durur. */
.ck-sepet-tutar-satir {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.ck-sepet-kdv {
    font-size: 10.5px;
    color: var(--usl-ink-faint);
    font-family: var(--nums-condensed);
    white-space: nowrap;
}

/* .ck-total-row'un display:flex'i öznitelik gizlemesini eziyordu:
   0 TL'lik indirim satırı "−0,00 ₺" olarak görünüyordu. hidden HER ZAMAN kazanır. */
.ck-total-row[hidden] { display: none !important; }

/* ── Hediye ürün kampanyası (checkout + sepet çekmecesi) ── */
.ck-hediye {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px;
    padding: 9px 11px;
    border-radius: 10px;
    background: var(--usl-soft, #f6f4f1);
    border: 1px dashed var(--usl-border);
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--usl-ink);
}
.ck-hediye.is-kazanildi {
    background: #eaf8ee;
    border-style: solid;
    border-color: #bfe6c9;
    color: #1d7a37;
}
.ck-hediye-ikon { font-size: 15px; flex-shrink: 0; }

.usl-cart-hediye {
    margin: 6px 0 0;
    padding: 7px 10px;
    border-radius: 9px;
    background: var(--usl-soft, #f6f4f1);
    border: 1px dashed var(--usl-border);
    font-size: 12px;
    line-height: 1.3;
    color: var(--usl-ink);
}
.usl-cart-hediye.is-kazanildi {
    background: #eaf8ee;
    border-style: solid;
    border-color: #bfe6c9;
    color: #1d7a37;
}

/* ── Sipariş sonrası kazanılan sadakat kuponu ── */
.usl-sadakat-kart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 420px;
    margin: 18px auto;
    padding: 16px 18px;
    border-radius: 14px;
    background: #eaf8ee;
    border: 1px solid #bfe6c9;
}
.usl-sadakat-baslik { font-size: 14px; font-weight: 700; color: #1d7a37; text-align: center; }
.usl-sadakat-kod {
    font-family: var(--nums-condensed, monospace);
    font-size: 22px; font-weight: 800; letter-spacing: .06em; color: #145c2a;
}
.usl-sadakat-not { font-size: 11.5px; color: #4b7a58; }

/* ── Mega menü promo alanı: yönetici görseli ──
   Görsel yüklendiyse kumaş dokusu yerine fotoğraf zemin olur; üzerindeki
   koyu geçiş yazının okunmasını sürdürür. */
.usl-mega-promo--foto {
    background-image: var(--promo-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.usl-mega-promo--foto .usl-mega-promo-overlay {
    background: linear-gradient(180deg, rgba(20, 12, 15, .05) 0%, rgba(20, 12, 15, .58) 100%);
}