/*
 * 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;
    height: auto;
}
.usl-tb-visa svg { width: 36px; height: 12px; }
.usl-tb-mc svg { width: 30px; height: 18px; }
.usl-tb-troy svg { width: 44px; height: 16px; }
.usl-tb-paytr svg { width: 54px; height: 16px; }
@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-visa svg { width: 32px; }
    .usl-tb-mc svg { width: 26px; height: 16px; }
    .usl-tb-troy svg { width: 40px; }
    .usl-tb-paytr svg { width: 48px; }
}

.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; }

/* ── @uslhomewear ı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-visa svg { width: 42px; height: 14px; }
.footer-payments .usl-ft-mc svg { width: 36px; height: 22px; }
.footer-payments .usl-ft-troy svg { width: 52px; height: 18px; }
.footer-payments .usl-ft-paytr svg { width: 68px; height: 20px; }
.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; }

/* 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-visa svg { width: 42px; height: 14px; }
.usl-about-pay .usl-ft-mc svg { width: 36px; height: 22px; }
.usl-about-pay .usl-ft-troy svg { width: 52px; height: 18px; }
.usl-about-pay .usl-ft-paytr svg { width: 68px; height: 20px; }

/* ================= 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 */
.usl-variant-alts {
    margin: 4px 0 12px; padding: 12px 14px; border-radius: 10px;
    background: var(--ground, #f3eae4); border: 1px solid var(--line, #d9c8bd);
}
.usl-variant-alts[hidden] { display: none !important; }
.usl-variant-alts-title {
    margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.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: 16px; padding: 7px 14px; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: var(--sans);
}
.usl-alt-chip:hover { background: var(--accent); color: #fff; }
.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); }
.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; }
}