:root {
    --c-bg: #ffffff;
    --c-fg: #0e0e0e;
    --c-muted: #6b6b6b;
    --c-soft: #fafafa;
    --c-border: #e8e6e2;
    --c-accent: #b18d4f;
    --c-accent-dark: #8b6f3d;
    --c-error: #b00020;
    --c-success: #137a4a;
    --font: "Helvetica Neue", "Inter", "Segoe UI", Arial, sans-serif;
    --serif: "Didot", "Bodoni MT", "Playfair Display", Georgia, serif;
    --tracking: 0.08em;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--font); color: var(--c-fg); background: var(--c-bg); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--c-accent); }
button { cursor: pointer; font: inherit; }
.container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* Topbar */
.topbar { background: #0e0e0e; color: #fff; font-size: 11px; padding: 9px 0; letter-spacing: var(--tracking); text-transform: uppercase; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; }
.topbar-nav a { margin-left: 20px; opacity: 0.85; }
.topbar-nav a:hover { opacity: 1; color: #fff; }

/* Header */
.header-main { padding: 24px 0; border-bottom: 1px solid #e0d8cb; background: #f6f1ea; }
.header-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; }
.brand { display: inline-block; text-align: right; color: var(--c-accent); transition: color .25s ease; }
.brand:hover { color: var(--c-accent-dark); }
.brand .brand-name {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 32px;
    letter-spacing: 6px;
    text-transform: uppercase;
    line-height: 1;
    text-align: right;
}
/* Brand logo (PNG wordmark) */
.brand-logo { text-align: center; display: inline-flex; flex-direction: column; align-items: center; }
.brand-logo img {
    display: block;
    height: 36px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: opacity .25s ease;
}
.brand-logo:hover img { opacity: 0.85; }
.brand-logo .brand-tagline { text-align: center !important; margin-top: 8px; transform: none !important; }
.brand .brand-tagline {
    display: block;
    margin-top: 6px;
    font-family: var(--font);
    font-weight: 400;
    font-size: 9px;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--c-muted);
    line-height: 1;
    text-align: right;
    /* JS son karakterleri ölçüp tagline'ı translateX ile hizalar — buradaki padding sıfırdır */
    will-change: transform;
}
.search { display: flex; border: 1px solid #d5ccba; border-radius: 0; overflow: hidden; max-width: 360px; background: rgba(255,255,255,0.5); }
.search input { flex: 1; padding: 12px 18px; border: 0; outline: none; font-size: 13px; background: transparent; }
.search button { background: transparent; border: 0; padding: 0 18px; font-size: 16px; color: var(--c-fg); }
.user-nav { display: flex; gap: 24px; justify-content: flex-end; align-items: center; font-size: 12px; letter-spacing: var(--tracking); text-transform: uppercase; }
.user-nav .link { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.cart-link { position: relative; }
.cart-badge { background: var(--c-accent); color: #fff; border-radius: 999px; padding: 2px 7px; font-size: 10px; margin-left: 6px; display: inline-block; transform-origin: center; transition: transform .2s ease; }
.cart-badge.bump { animation: cartBadgeBump .55s cubic-bezier(.36,.07,.19,.97); }
@keyframes cartBadgeBump {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(1.6); }
    55%      { transform: scale(.9); }
    75%      { transform: scale(1.15); }
}

/* Cart toast — sağ-alt köşede yumuşak bildirim */
.cart-toast {
    position: fixed;
    right: 24px; bottom: 24px;
    background: #0e0e0e;
    color: #fff;
    padding: 14px 22px;
    font-size: 12px;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
    z-index: 10000;
    transform: translateY(20px);
    opacity: 0;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
    pointer-events: none;
}
.cart-toast.on { transform: translateY(0); opacity: 1; }
.cart-toast.error { background: var(--c-error); }

/* === Custom confirm modal — siteye yakışır zarif onay diyaloğu === */
.confirm-modal {
    position: fixed; inset: 0;
    z-index: 10500;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.confirm-modal.on { opacity: 1; visibility: visible; }
.confirm-modal[hidden] { display: none; }
.confirm-backdrop {
    position: absolute; inset: 0;
    background: rgba(14, 14, 14, .55);
    backdrop-filter: blur(4px);
}
.confirm-card {
    position: relative;
    background: #fff;
    width: 92%; max-width: 440px;
    padding: 32px 30px 24px;
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    transform: translateY(12px) scale(.97);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.confirm-modal.on .confirm-card { transform: translateY(0) scale(1); }
.confirm-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 24px;
    margin: 0 0 12px;
    color: var(--c-fg);
}
.confirm-message {
    font-size: 14px;
    line-height: 1.65;
    color: #444;
    margin: 0 0 26px;
}
.confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.confirm-actions button {
    padding: 11px 24px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid var(--c-fg);
    cursor: pointer;
    border-radius: 2px;
    transition: all .2s ease;
    font-family: inherit;
    line-height: 1;
}
.confirm-cancel { background: transparent; color: var(--c-fg); }
.confirm-cancel:hover { background: #f3eee3; }
.confirm-ok { background: var(--c-fg); color: #fff; }
.confirm-ok:hover { background: var(--c-accent); border-color: var(--c-accent); }
.confirm-ok.danger { background: var(--c-error); border-color: var(--c-error); }
.confirm-ok.danger:hover { background: #8e0017; border-color: #8e0017; }

/* Main nav */
.main-nav { border-bottom: 1px solid #e0d8cb; background: #f6f1ea; }
.main-nav ul { list-style: none; display: flex; gap: 40px; margin: 0; padding: 0; justify-content: center; }
.main-nav > .container > ul > li { position: relative; }
.main-nav > .container > ul > li > a { display: block; padding: 18px 0; font-size: 12px; letter-spacing: var(--tracking); text-transform: uppercase; font-weight: 500; }
.main-nav > .container > ul > li > a:hover { color: var(--c-fg); border-bottom: 1px solid var(--c-fg); }
.main-nav .mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--c-border); padding: 24px 32px; min-width: 240px; opacity: 0; visibility: hidden; transition: all .2s; z-index: 100; box-shadow: 0 12px 32px rgba(0,0,0,.06); }
.main-nav > .container > ul > li:hover .mega { opacity: 1; visibility: visible; }
.main-nav .mega ul { flex-direction: column; gap: 10px; align-items: flex-start; }
.main-nav .mega a { font-size: 13px; text-transform: none; letter-spacing: 0; padding: 4px 0; }

/* Hero mosaic — 2 üstte + 3 altta full-bleed kategori grid */
.hero-mosaic {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    background: #0a0a0a;
    height: calc(100vh - 168px); /* topbar + header + main-nav civarı */
    min-height: 720px;
}
.hero-mosaic .hm-tile {
    position: relative;
    overflow: hidden;
    background-color: #0a0a0a;
    color: #fff;
    display: flex;
    align-items: flex-end;
    padding: 36px 36px 40px;
    isolation: isolate;
    text-decoration: none;
}
.hero-mosaic .hm-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transform-origin: 50% 50%;
    z-index: 0;
    will-change: transform;
    animation-name: hmDrift;
    animation-duration: 18s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
/* Per-tile: staggered delay + slightly different duration → asla senkron olmayan organik nefes alma */
.hero-mosaic .hm-1 .hm-bg { animation-name: hmDrift;    animation-duration: 18s; animation-delay: 0s;   }
.hero-mosaic .hm-2 .hm-bg { animation-name: hmDriftAlt; animation-duration: 16s; animation-delay: -4s;  }
.hero-mosaic .hm-3 .hm-bg { animation-name: hmDrift;    animation-duration: 20s; animation-delay: -7s;  }
.hero-mosaic .hm-4 .hm-bg { animation-name: hmDriftAlt; animation-duration: 17s; animation-delay: -10s; }
.hero-mosaic .hm-5 .hm-bg { animation-name: hmDrift;    animation-duration: 19s; animation-delay: -13s; }

@keyframes hmDrift {
    0%   { transform: scale(1.05) translate3d(-1.5%,  1.2%, 0); }
    100% { transform: scale(1.18) translate3d( 2.5%, -2.0%, 0); }
}
@keyframes hmDriftAlt {
    0%   { transform: scale(1.05) translate3d( 1.5%, -1.2%, 0); }
    100% { transform: scale(1.18) translate3d(-2.5%,  2.0%, 0); }
}
/* Reduced-motion için sakin ama hâlâ algılanabilir sürüm */
@keyframes hmDriftLite {
    0%   { transform: scale(1.04) translate3d(0, 0, 0); }
    100% { transform: scale(1.14) translate3d(-1.6%, -1.0%, 0); }
}

/* Overlay text yumuşak şekilde dalgalansın */
.hero-mosaic .hm-overlay {
    animation: hmFloat 7s ease-in-out infinite alternate;
}
.hero-mosaic .hm-2 .hm-overlay { animation-duration: 8s;  animation-delay: -2s; }
.hero-mosaic .hm-3 .hm-overlay { animation-duration: 9s;  animation-delay: -4s; }
.hero-mosaic .hm-4 .hm-overlay { animation-duration: 7.5s; animation-delay: -1s; }
.hero-mosaic .hm-5 .hm-overlay { animation-duration: 8.5s; animation-delay: -3s; }
@keyframes hmFloat {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, -6px, 0); }
}
.hero-mosaic .hm-tile.hm-dark::after {
    /* darker bottom-fade only on dark tiles, for readable white labels */
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
    z-index: 4; pointer-events: none;
}

/* === Pedestal: Gucci stüdyosundaki gibi geometric renkli kutu/platform.
       Her karoda farklı pozisyon/boyut/açı → benzersiz ama uyumlu === */
.hero-mosaic .hm-pedestal {
    position: absolute;
    z-index: 1;          /* bg (0) üstünde, sparkles (1, DOM'da sonra) altında */
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.06),
        24px 0 40px rgba(0,0,0,0.18),
        0 18px 30px rgba(0,0,0,0.12);
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.hero-mosaic .hm-tile:hover .hm-pedestal { transform: translateY(-4px); }

/* Tile 1 — KADIN (krem-peach): pedestal sol-merkez, dikey, sıcak deeper peach */
.hero-mosaic .hm-1 .hm-pedestal {
    top: 14%; left: 8%; width: 54%; height: 82%;
    background: linear-gradient(135deg, rgba(200,150,105,0.55) 0%, rgba(165,115,75,0.42) 100%);
}

/* Tile 2 — ERKEK (mustard): pedestal sağ kayık, kare, daha koyu mustard */
.hero-mosaic .hm-2 .hm-pedestal {
    top: 10%; left: 38%; width: 58%; height: 70%;
    background: linear-gradient(135deg, rgba(160,110,28,0.55) 0%, rgba(120,80,15,0.42) 100%);
}

/* Tile 3 — FENERBAHÇE (navy dark): pedestal alt-orta, geniş + uzun, derin navy */
.hero-mosaic .hm-3 .hm-pedestal {
    top: 15%; left: 12%; width: 76%; height: 74%;
    background: linear-gradient(135deg, rgba(228,233,244,0.94) 0%, rgba(198,207,226,0.84) 100%);
    border-radius: 10px;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.35),
        0 20px 44px rgba(0,0,0,0.38);
}

/* Tile 4 — EL PORTFÖYÜ (sage): pedestal üst sol, dikey, koyu olive */
.hero-mosaic .hm-4 .hm-pedestal {
    top: 6%; left: 10%; width: 52%; height: 84%;
    background: linear-gradient(135deg, rgba(120,140,98,0.55) 0%, rgba(85,108,72,0.42) 100%);
}

/* Tile 5 — MEK. KARTLIK (terracotta): pedestal merkez, kompakt kare, daha derin terracotta */
.hero-mosaic .hm-5 .hm-pedestal {
    top: 18%; left: 28%; width: 56%; height: 70%;
    background: linear-gradient(135deg, rgba(170,98,68,0.55) 0%, rgba(130,72,50,0.42) 100%);
}

/* === Spotlight: stüdyo sahne ışığı — her karoda farklı köşeden vurur.
       z:0 + DOM'da bg'den sonra → bg üstünde, pedestal altında. Pedestal & ürün
       ışığın "içinde" durur gibi hissettirir. Yavaş breathing animasyonu. === */
.hero-mosaic .hm-spotlight {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    will-change: opacity;
    animation: hmSpotPulse 9s ease-in-out infinite alternate;
}
@keyframes hmSpotPulse {
    0%   { opacity: 0.65; }
    100% { opacity: 1.00; }
}
.hero-mosaic .hm-2 .hm-spotlight { animation-duration: 11s; animation-delay: -3s; }
.hero-mosaic .hm-3 .hm-spotlight { animation-duration: 8s;  animation-delay: -5s; }
.hero-mosaic .hm-4 .hm-spotlight { animation-duration: 10s; animation-delay: -2s; }
.hero-mosaic .hm-5 .hm-spotlight { animation-duration: 9.5s; animation-delay: -7s; }

/* Tile 1 — KADIN: ışık sağ-üst köşeden, sıcak şampanya altın */
.hero-mosaic .hm-1 .hm-spotlight {
    background: radial-gradient(ellipse 75% 65% at 92% 4%,
        rgba(255,240,205,0.55) 0%,
        rgba(255,225,170,0.30) 28%,
        rgba(255,210,150,0.10) 55%,
        transparent 80%);
}
/* Tile 2 — ERKEK: ışık sol-üst, soft cream */
.hero-mosaic .hm-2 .hm-spotlight {
    background: radial-gradient(ellipse 70% 60% at 8% 6%,
        rgba(255,250,225,0.60) 0%,
        rgba(255,240,195,0.30) 28%,
        rgba(255,225,160,0.08) 55%,
        transparent 80%);
}
/* Tile 3 — FENERBAHÇE (navy): ışık üst-merkez, soğuk soluk altın spot */
.hero-mosaic .hm-3 .hm-spotlight {
    background: radial-gradient(ellipse 80% 55% at 55% -8%,
        rgba(255,235,170,0.42) 0%,
        rgba(220,200,140,0.22) 30%,
        rgba(180,180,160,0.06) 60%,
        transparent 85%);
}
/* Tile 4 — EL PORTFÖYÜ: ışık sağdan, dramatik yan ışık */
.hero-mosaic .hm-4 .hm-spotlight {
    background: radial-gradient(ellipse 60% 80% at 100% 38%,
        rgba(255,245,210,0.55) 0%,
        rgba(255,230,180,0.28) 30%,
        rgba(255,215,150,0.08) 58%,
        transparent 82%);
}
/* Tile 5 — MEK. KARTLIK: ışık sağ-üst köşeden, parıltılı amber */
.hero-mosaic .hm-5 .hm-spotlight {
    background: radial-gradient(ellipse 75% 65% at 95% 8%,
        rgba(255,240,200,0.55) 0%,
        rgba(255,225,170,0.28) 30%,
        rgba(255,205,140,0.08) 58%,
        transparent 82%);
}

/* === Product layer: transparent PNG, pedestal'in ÜSTÜNDE → 3D katmanlama === */
.hero-mosaic .hm-product {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center 42%;
    padding: 4% 6% 12%;
    mix-blend-mode: multiply;
    z-index: 2;            /* bg (0) → pedestal (1) → product (2) → sparkles (3) → frame (4) → overlay (5) */
    pointer-events: none;
    user-select: none;
    will-change: transform;
}
/* Ürün de bg ile birlikte yumuşak Ken Burns yapsın — ama bg'den bir tık daha hafif */
.hero-mosaic .hm-1 .hm-product { animation: hmDrift     22s ease-in-out  0s   infinite alternate; }
.hero-mosaic .hm-2 .hm-product { animation: hmDriftAlt  20s ease-in-out -3s   infinite alternate; }
.hero-mosaic .hm-3 .hm-product { animation: hmDrift     24s ease-in-out -6s   infinite alternate; }
.hero-mosaic .hm-4 .hm-product { animation: hmDriftAlt  21s ease-in-out -9s   infinite alternate; }
.hero-mosaic .hm-5 .hm-product { animation: hmDrift     23s ease-in-out -12s  infinite alternate; }
.hero-mosaic .hm-tile:hover .hm-product { animation-duration: 16s; }
/* Her karoda urun farkli bir aciyla dursun — dinamik "farkli aci" hissi (dogru-logolu on cekimler) */
.hero-mosaic .hm-1 .hm-product { animation: none; transform: rotate(-7deg); }
.hero-mosaic .hm-2 .hm-product { animation: none; transform: rotate(5deg); }
.hero-mosaic .hm-3 .hm-product { animation: none; transform: rotate(-4deg); }
.hero-mosaic .hm-4 .hm-product { animation: none; transform: rotate(6deg); }
.hero-mosaic .hm-5 .hm-product { animation: none; transform: rotate(-8deg); }
.hero-mosaic .hm-product { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.hero-mosaic .hm-1:hover .hm-product { transform: rotate(-7deg) scale(1.05); }
.hero-mosaic .hm-2:hover .hm-product { transform: rotate(5deg) scale(1.05); }
.hero-mosaic .hm-3:hover .hm-product { transform: rotate(-4deg) scale(1.05); }
.hero-mosaic .hm-4:hover .hm-product { transform: rotate(6deg) scale(1.05); }
.hero-mosaic .hm-5:hover .hm-product { transform: rotate(-8deg) scale(1.05); }

/* === Sparkles: irili ufaklı, fadeli ışıltılar her karoda === */
.hero-mosaic .hm-sparkles {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 3;          /* product'ın üstünde — ışıltılar ürünün üzerinde dans eder */
}
.hero-mosaic .hm-sparkles i {
    position: absolute;
    border-radius: 50%;
    /* Bembeyaz parlak çekirdek + saf beyaz güneş halesi (güneş yansıması gibi) */
    background:
        radial-gradient(circle,
            #ffffff             0%,
            rgba(255,255,255,1) 22%,
            rgba(255,255,255,0.65) 48%,
            rgba(255,255,255,0)  78%);
    box-shadow:
        0 0 6px   rgba(255,255,255,1),
        0 0 18px  rgba(255,255,255,0.95),
        0 0 40px  rgba(255,255,255,0.65),
        0 0 80px  rgba(255,255,255,0.30);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.2);
    animation: spFlash var(--dur, 2.4s) cubic-bezier(.22, .9, .25, 1) forwards;
    will-change: opacity, transform, filter;
}
/* Light karolar (krem, mustard, sage, terracotta) — yine bembeyaz, sadece bg üzerinde
   görünürlük için dış halo'ya hafif koyulaştırma eklenir; çekirdek yine saf beyaz parlar */
.hero-mosaic .hm-tile.hm-light .hm-sparkles i {
    background:
        radial-gradient(circle,
            #ffffff             0%,
            rgba(255,255,255,1) 22%,
            rgba(255,255,255,0.75) 45%,
            rgba(255,255,255,0.10) 72%,
            rgba(255,255,255,0)  85%);
    box-shadow:
        0 0 6px   rgba(255,255,255,1),
        0 0 18px  rgba(255,255,255,0.90),
        0 0 38px  rgba(255,255,255,0.50),
        0 0 70px  rgba(0,0,0,0.18);
}

/* spFlash: parlak çakı + ease drift (rastgele yön) + odak nabzı (blur in/out) */
@keyframes spFlash {
    0%   {
        opacity: 0;
        transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(0.15);
        filter: blur(2.4px);
    }
    18%  {
        opacity: 1;
        transform: translate(-50%, -50%) translate3d(calc(var(--dx, 0px) * 0.12), calc(var(--dy, 0px) * 0.12), 0) scale(1.05);
        filter: blur(0px);
    }
    45%  {
        opacity: 0.95;
        transform: translate(-50%, -50%) translate3d(calc(var(--dx, 0px) * 0.45), calc(var(--dy, 0px) * 0.45), 0) scale(1.55);
        filter: blur(0px);
    }
    78%  {
        opacity: 0.45;
        transform: translate(-50%, -50%) translate3d(calc(var(--dx, 0px) * 0.85), calc(var(--dy, 0px) * 0.85), 0) scale(1.15);
        filter: blur(0.5px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate3d(var(--dx, 0px), var(--dy, 0px), 0) scale(0.6);
        filter: blur(2px);
    }
}

/* === Iç çerçeve: "kutu içinde kutu" hissi === */
.hero-mosaic .hm-tile::before {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(255,255,255,0.20);
    z-index: 5;          /* sparkles (3) ve dark-veil (4) üstünde, sadece overlay (6) altında */
    pointer-events: none;
    transition: border-color .35s ease, inset .35s ease;
}
.hero-mosaic .hm-tile.hm-light::before { border-color: rgba(0,0,0,0.16); }
.hero-mosaic .hm-tile:hover::before {
    border-color: rgba(255,255,255,0.45);
    inset: 16px;
}
.hero-mosaic .hm-tile.hm-light:hover::before {
    border-color: rgba(0,0,0,0.32);
    inset: 16px;
}
/* Hover'da bg animasyonu durmuyor — onun yerine yumuşak parıltı + saturasyon artışı */
.hero-mosaic .hm-tile { transition: filter .5s ease; }
.hero-mosaic .hm-tile:hover { filter: brightness(1.06) saturate(1.08); }
.hero-mosaic .hm-tile:hover .hm-bg { animation-duration: 14s; }

.hm-overlay {
    position: relative; z-index: 6;
    text-align: left;
    max-width: 480px;
}
.hm-eyebrow {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.85);
}
.hm-name {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 44px;
    line-height: 1.05;
    margin: 0 0 18px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.hm-cta-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 13px 30px;
    background: #0e0e0e;
    color: #fff;
    border: 1px solid #0e0e0e;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .25s ease;
    box-shadow: 0 4px 18px rgba(0,0,0,.20);
}
.hero-mosaic .hm-tile:hover .hm-cta-btn {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.32);
}

/* Light tiles: dark text + black button (current) */
.hero-mosaic .hm-tile.hm-light .hm-eyebrow { color: rgba(20,20,20,0.75); }
.hero-mosaic .hm-tile.hm-light .hm-name {
    color: #1a1a1a;
    text-shadow: 0 2px 12px rgba(255,255,255,.18);
}

/* Dark tiles: white text + WHITE button (inverted) */
.hero-mosaic .hm-tile.hm-dark .hm-eyebrow { color: rgba(255,255,255,0.85); }
.hero-mosaic .hm-tile.hm-dark .hm-name { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.hero-mosaic .hm-tile.hm-dark .hm-cta-btn {
    background: #fff;
    color: #0e0e0e;
    border-color: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.40);
}
.hero-mosaic .hm-tile.hm-dark:hover .hm-cta-btn {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
}

/* Grid placement: 2 üstte, 3 altta */
.hero-mosaic .hm-1 { grid-column: 1 / 4; grid-row: 1; }   /* Kadın */
.hero-mosaic .hm-2 { grid-column: 4 / 7; grid-row: 1; }   /* Erkek */
.hero-mosaic .hm-3 { grid-column: 1 / 3; grid-row: 2; }   /* Fenerbahçe */
.hero-mosaic .hm-4 { grid-column: 3 / 5; grid-row: 2; }   /* El Portföyü */
.hero-mosaic .hm-5 { grid-column: 5 / 7; grid-row: 2; }   /* Mekanizmalı Kartlık */

/* Big top tiles — bigger heading */
.hero-mosaic .hm-1 .hm-name,
.hero-mosaic .hm-2 .hm-name { font-size: 56px; }

/* Hero slider — Ken Burns + crossfade + shimmer */
.hero-slider { position: relative; min-height: 75vh; overflow: hidden; background: #0a0a0a; }
.hero-slider .slide {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end;
    color: #fff; padding: 64px 0;
    opacity: 0; visibility: hidden;
    transition: opacity 1.4s ease, visibility 1.4s ease;
    z-index: 1;
}
.hero-slider .slide.active { opacity: 1; visibility: visible; z-index: 2; }
.hero-slider .slide-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transform: scale(1.0);
    will-change: transform;
}
.hero-slider .slide.active .slide-bg {
    animation: kenBurns 12s ease-in-out forwards;
}
@keyframes kenBurns {
    0%   { transform: scale(1.0)  translate3d(0, 0, 0); }
    100% { transform: scale(1.12) translate3d(-2.5%, -1.5%, 0); }
}
.hero-slider .slide-shine {
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 38%,
        rgba(255,255,255,0.18) 48%,
        rgba(255,255,255,0.32) 50%,
        rgba(255,255,255,0.18) 52%,
        rgba(255,255,255,0) 62%,
        rgba(255,255,255,0) 100%);
    transform: translateX(-110%);
    mix-blend-mode: screen;
}
.hero-slider .slide.active .slide-shine {
    animation: shimmer 6.5s ease-in-out 1.2s infinite;
}
@keyframes shimmer {
    0%   { transform: translateX(-110%); opacity: 0; }
    8%   { opacity: 0.85; }
    45%  { transform: translateX(110%); opacity: 0; }
    100% { transform: translateX(110%); opacity: 0; }
}
.hero-slider .slide-sparkle {
    position: absolute; inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 18% 32%, rgba(255,255,255,0.85), transparent 60%),
        radial-gradient(1.5px 1.5px at 72% 22%, rgba(255,255,255,0.7), transparent 60%),
        radial-gradient(2.5px 2.5px at 38% 78%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1.5px 1.5px at 88% 64%, rgba(255,255,255,0.7), transparent 60%),
        radial-gradient(2px 2px at 58% 12%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1.5px 1.5px at 8% 70%, rgba(255,255,255,0.55), transparent 60%);
    opacity: 0;
}
.hero-slider .slide.active .slide-sparkle {
    animation: sparkleTwinkle 4.5s ease-in-out infinite;
}
@keyframes sparkleTwinkle {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    25%      { opacity: 0.85; transform: scale(1.05); }
    55%      { opacity: 0.30; transform: scale(0.95); }
    80%      { opacity: 0.70; transform: scale(1.03); }
}
.slide-content {
    position: relative; z-index: 3;
    max-width: 560px; padding: 0 32px;
    transform: translateY(20px); opacity: 0;
}
.hero-slider .slide.active .slide-content {
    animation: contentRise 1.1s ease-out 0.4s forwards;
}
@keyframes contentRise {
    to { transform: translateY(0); opacity: 1; }
}
.slide-eyebrow { display: inline-block; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 18px; color: rgba(255,255,255,0.85); }
.slide-content h2 {
    font-family: var(--serif);
    font-size: 68px; line-height: 1.0; font-weight: 400;
    margin: 0 0 18px;
    text-shadow: 0 2px 24px rgba(0,0,0,.6);
    letter-spacing: 0.5px;
}
.slide-content p {
    font-size: 17px; margin: 0 0 28px; max-width: 440px;
    text-shadow: 0 1px 12px rgba(0,0,0,.7);
    color: rgba(255,255,255,0.92);
}

/* Slider controls */
.slider-dots {
    position: absolute;
    bottom: 32px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 10px;
    z-index: 5;
}
.slider-dots button {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.25);
    padding: 0; cursor: pointer;
    transition: all .35s ease;
}
.slider-dots button:hover { background: rgba(255,255,255,0.6); }
.slider-dots button.active {
    width: 32px; border-radius: 6px;
    background: rgba(255,255,255,0.95);
    border-color: rgba(255,255,255,0.9);
}
.slider-arrow {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff; font-size: 24px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    z-index: 5; cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all .25s ease;
    opacity: 0;
}
.hero-slider:hover .slider-arrow { opacity: 1; }
.slider-arrow:hover { background: rgba(0,0,0,0.7); }
.slider-arrow.prev { left: 28px; }
.slider-arrow.next { right: 28px; }

/* Section primitives */
.section-eyebrow { display: inline-block; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 14px; font-weight: 500; }
.section-eyebrow.light { color: rgba(255,255,255,0.9); }
.section-title { font-family: var(--serif); font-size: 44px; font-weight: 400; line-height: 1.1; margin: 0 0 14px; }
.section-lead { color: var(--c-muted); margin: 0 0 32px; font-size: 15px; max-width: 560px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }
.section-head > div h2.section-title { margin-bottom: 0; }
.section-link { font-size: 12px; letter-spacing: var(--tracking); text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid currentColor; }

/* Featured Categories */
.featured-categories { padding: 96px 0 80px; text-align: center; }
.featured-categories .section-lead { margin: 0 auto 48px; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cat-tile { display: block; position: relative; aspect-ratio: 3/4; background: #f3f3f3; overflow: hidden; isolation: isolate; }
.cat-tile img, .cat-tile .placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.cat-tile .placeholder { background: linear-gradient(135deg, #eee, #ddd); }
.cat-tile:hover img, .cat-tile:hover .placeholder { transform: scale(1.06); }
.cat-tile-overlay {
    position: absolute; inset: auto 0 0 0;
    padding: 28px 24px;
    color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.85) 100%);
    text-align: left;
}
.cat-tile-eyebrow { display: block; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.8; margin-bottom: 6px; }
.cat-tile-name { display: block; font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.cat-tile-cta { display: inline-block; margin-top: 12px; font-size: 11px; letter-spacing: var(--tracking); text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: all .35s ease; }
.cat-tile:hover .cat-tile-cta { opacity: 1; transform: translateY(0); }

/* Editorial blocks (full-bleed image with copy beside) */
.editorial { position: relative; min-height: 600px; background-size: cover; background-position: center; color: #fff; padding: 80px 0; display: flex; align-items: center; }
.editorial::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 40%, rgba(0,0,0,0) 65%); pointer-events: none; }
.editorial.editorial-left::before { background: linear-gradient(270deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 40%, rgba(0,0,0,0) 65%); }
.editorial .container { position: relative; z-index: 1; }
.editorial-copy { max-width: 480px; }
.editorial.editorial-right .editorial-copy { margin-left: 0; }
.editorial.editorial-left .editorial-copy { margin-left: auto; text-align: left; }
.editorial-copy h2 { font-family: var(--serif); font-size: 56px; font-weight: 400; line-height: 1.05; margin: 0 0 20px; }
.editorial-copy p { font-size: 16px; margin: 0 0 28px; color: rgba(255,255,255,0.92); line-height: 1.65; }
.btn-outline-light { display: inline-block; padding: 14px 32px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.7); letter-spacing: var(--tracking); font-size: 12px; text-transform: uppercase; transition: all .25s ease; }
.btn-outline-light:hover { background: #fff; color: #0e0e0e; border-color: #fff; }

/* Story / craftsmanship full-bleed banner */
.story-banner { position: relative; min-height: 640px; background-size: cover; background-position: center; color: #fff; padding: 96px 0; display: flex; align-items: center; justify-content: center; text-align: center; }
.story-banner::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.35); pointer-events: none; }
.story-banner .container { position: relative; z-index: 1; }
.story-copy { max-width: 720px; margin: 0 auto; }
.story-copy h2 { font-family: var(--serif); font-size: 60px; font-weight: 400; line-height: 1.05; margin: 0 0 24px; letter-spacing: 0.5px; }
.story-copy p { font-size: 17px; line-height: 1.7; margin: 0 0 32px; color: rgba(255,255,255,0.92); }

/* Product sections */
.product-section { padding: 96px 0; }
.product-section.alt { background: var(--c-soft); }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }

/* Kart: belirgin ama narin — krem zemin, ince çerçeve, yumuşak gölge.
   Hover'da hafifçe yükselir + daha derin gölge. */
.product-card {
    background: #faf6ee;
    border: 1px solid #ebe4d5;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
    box-shadow: 0 1px 3px rgba(60, 40, 20, .04);
}
.product-card:hover {
    transform: translateY(-4px);
    border-color: #d8cebb;
    box-shadow: 0 14px 28px rgba(60, 40, 20, .10);
}

/* Per-category subtle tint — mosaic paletinin içine sızdırılmış soft versiyonu */
.product-card.cat-kadin       { background: #f9efe5; border-color: #ead8c4; }
.product-card.cat-erkek       { background: #f7eedb; border-color: #e6d6b3; }
.product-card.cat-fenerbahce  { background: #eef0f6; border-color: #ccd2e0; }
.product-card.cat-default     { background: #faf6ee; border-color: #ebe4d5; }

.product-card.cat-kadin:hover      { border-color: #dec6a8; box-shadow: 0 14px 28px rgba(110, 60, 30, .10); }
.product-card.cat-erkek:hover      { border-color: #d6c188; box-shadow: 0 14px 28px rgba(95, 65, 15, .10); }
.product-card.cat-fenerbahce:hover { border-color: #b1bbd1; box-shadow: 0 14px 28px rgba(20, 35, 75, .12); }

.product-card .card-image {
    position: relative;
    aspect-ratio: 3/4;
    background: rgba(255, 255, 255, 0.55);
    display: block;
    overflow: hidden;
}
.product-card .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .card-image img { transform: scale(1.05); }
.product-card .placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #efefef, #dcdcdc); }

.product-card .badge { position: absolute; top: 12px; padding: 5px 10px; font-size: 10px; letter-spacing: var(--tracking); text-transform: uppercase; color: #fff; border-radius: 2px; }
.product-card .badge-new { left: 12px; background: var(--c-fg); }
.product-card .badge-sale { right: 12px; background: var(--c-accent); }

.product-card .card-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.product-card .brand { font-size: 10px; text-transform: uppercase; color: var(--c-muted); letter-spacing: 0.25em; margin-bottom: 6px; }
.product-card .title { font-size: 14px; margin: 4px 0 10px; font-weight: 400; line-height: 1.4; min-height: 40px; }
.product-card .title a { color: var(--c-fg); }
.product-card .title a:hover { color: var(--c-accent); }
.price { display: flex; gap: 10px; align-items: baseline; }
.price-now { font-weight: 500; font-size: 15px; }
.price-old { color: var(--c-muted); font-size: 12px; text-decoration: line-through; }

/* Aksiyon düğmeleri — 3'lü ızgara, primary ortada vurgu */
.product-card .actions {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 5px;
}
.product-card .actions form { margin: 0; display: contents; }
.product-card .actions form > button { width: 100%; }
.btn-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 6px;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    background: transparent;
    color: var(--c-fg);
    border: 1px solid rgba(20, 20, 20, 0.30);
    border-radius: 2px;
    cursor: pointer;
    transition: all .22s ease;
    line-height: 1;
    font-family: inherit;
}
.btn-card:hover {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
}
.btn-card.primary {
    background: var(--c-fg);
    color: #fff;
    border-color: var(--c-fg);
}
.btn-card.primary:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
}

/* Newsletter */
.newsletter { padding: 96px 0; background: var(--c-soft); text-align: center; }
.newsletter-inner { max-width: 600px; margin: 0 auto; }
.newsletter h2 { font-family: var(--serif); font-size: 36px; font-weight: 400; line-height: 1.2; margin: 0 0 32px; }
.newsletter-form { display: flex; gap: 0; max-width: 520px; margin: 0 auto 16px; border: 1px solid var(--c-border); background: #fff; }
.newsletter-form input { flex: 1; padding: 16px 20px; border: 0; outline: none; font-size: 14px; background: transparent; }
.newsletter-form .btn { padding: 16px 32px; }
.fine-print { font-size: 11px; color: var(--c-muted); margin: 12px 0 0; }

/* Catalog */
.catalog .catalog-header { display: flex; justify-content: space-between; align-items: center; padding: 32px 0; border-bottom: 1px solid var(--c-border); }
.catalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: 48px; padding: 32px 0; }
.filters h4 { margin: 24px 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking); }
.filters ul { list-style: none; padding: 0; margin: 0 0 16px; }
.filters li a { display: block; padding: 5px 0; color: var(--c-muted); font-size: 13px; }
.filters li a:hover { color: var(--c-accent); }
.pagination { display: flex; gap: 16px; justify-content: center; padding: 48px 0; }
.empty { text-align: center; padding: 64px 0; color: var(--c-muted); }

/* Product detail */
.product-detail { padding: 48px 0 96px; }
.pd-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; }
.pd-gallery .main { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.pd-gallery .thumbs { display: flex; gap: 10px; margin-top: 12px; }
.pd-gallery .thumbs img { width: 88px; height: 88px; object-fit: cover; cursor: pointer; border: 1px solid var(--c-border); }
.pd-info h1 { font-family: var(--serif); font-size: 38px; font-weight: 400; margin: 8px 0 12px; line-height: 1.2; }
.pd-info .brand { color: var(--c-accent); text-transform: uppercase; font-size: 11px; letter-spacing: var(--tracking); }
.pd-info .short { color: var(--c-muted); margin: 12px 0 20px; }
.pd-info .price { font-size: 24px; margin: 20px 0 28px; }
.pd-info .add-form label { display: block; margin-bottom: 14px; font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking); }
.pd-info .add-form input, .pd-info .add-form select { padding: 12px 14px; border: 1px solid var(--c-border); margin-top: 6px; width: 100%; max-width: 220px; font-size: 14px; }
.pd-info details { margin-top: 28px; padding: 18px 0; border-top: 1px solid var(--c-border); }
.pd-info details summary { cursor: pointer; font-weight: 500; padding: 8px 0; font-size: 13px; text-transform: uppercase; letter-spacing: var(--tracking); }
.related { padding-top: 64px; }

/* Ana ürün görseli — tıklanabilir olduğunu belli et */
.pd-gallery .main { cursor: zoom-in; transition: filter .25s ease; }
.pd-gallery .main:hover { filter: brightness(1.03); }
.pd-gallery .thumbs img { transition: border-color .2s ease, transform .25s ease; }
.pd-gallery .thumbs img:hover { border-color: var(--c-accent); transform: translateY(-2px); }

/* === Ürün galerisi lightbox + büyüteç === */
.pd-lightbox {
    position: fixed; inset: 0;
    z-index: 10800;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}
.pd-lightbox.on { opacity: 1; visibility: visible; }
.pd-lightbox[hidden] { display: none; }
.pd-lightbox .lb-backdrop {
    position: absolute; inset: 0;
    background: rgba(8, 8, 8, .9);
    backdrop-filter: blur(6px);
}
.pd-lightbox .lb-close {
    position: absolute; top: 18px; right: 22px;
    width: 44px; height: 44px;
    background: rgba(255,255,255,.08);
    color: #fff; border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    font-size: 26px; line-height: 1;
    cursor: pointer; z-index: 3;
    transition: background .2s ease, transform .2s ease;
}
.pd-lightbox .lb-close:hover { background: var(--c-accent); border-color: var(--c-accent); transform: rotate(90deg); }
.pd-lightbox .lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 56px; height: 56px;
    background: rgba(255,255,255,.06);
    color: #fff; border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    font-size: 32px; line-height: 1;
    cursor: pointer; z-index: 3;
    transition: background .2s ease, transform .2s ease;
}
.pd-lightbox .lb-nav:hover { background: var(--c-accent); border-color: var(--c-accent); }
.pd-lightbox .lb-prev { left: 28px; }
.pd-lightbox .lb-next { right: 28px; }
.pd-lightbox .lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.pd-lightbox .lb-next:hover { transform: translateY(-50%) translateX(3px); }

.pd-lightbox .lb-stage {
    position: relative; z-index: 2;
    max-width: 90vw; max-height: 78vh;
    display: flex; flex-direction: column; align-items: center;
}
.pd-lightbox .lb-image-wrap {
    position: relative;
    max-width: 90vw; max-height: 72vh;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    background: #fff;
}
.pd-lightbox .lb-image {
    display: block;
    max-width: 90vw; max-height: 72vh;
    width: auto; height: auto;
    object-fit: contain;
    cursor: crosshair;
    user-select: none;
    -webkit-user-drag: none;
}
.pd-lightbox .lb-lens {
    position: absolute;
    width: 140px; height: 140px;
    border: 2px solid rgba(255,255,255,.85);
    box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4);
    background: rgba(255,255,255,.18);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    border-radius: 4px;
    backdrop-filter: blur(1px);
}
.pd-lightbox .lb-zoom {
    position: absolute;
    top: 0; left: calc(100% + 24px);
    width: 420px; height: 420px;
    background-repeat: no-repeat;
    background-color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}
.pd-lightbox .lb-counter {
    margin-top: 14px;
    color: rgba(255,255,255,.75);
    font-size: 12px;
    letter-spacing: var(--tracking);
    text-transform: uppercase;
}
.pd-lightbox .lb-thumbs {
    position: relative; z-index: 2;
    margin-top: 18px;
    display: flex; gap: 8px;
    max-width: 90vw;
    overflow-x: auto;
    padding: 6px 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.3) transparent;
}
.pd-lightbox .lb-thumbs::-webkit-scrollbar { height: 6px; }
.pd-lightbox .lb-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 3px; }
.pd-lightbox .lb-thumbs img {
    width: 60px; height: 60px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.25);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
    flex: 0 0 auto;
}
.pd-lightbox .lb-thumbs img:hover { opacity: 0.85; transform: translateY(-2px); }
.pd-lightbox .lb-thumbs img.active {
    opacity: 1;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2px rgba(177,141,79,.3);
}

/* Mobil — büyüteç paneli yan tarafa sığmaz, gizle; sadece lens göster */
@media (max-width: 900px) {
    .pd-lightbox .lb-zoom { display: none; }
    .pd-lightbox .lb-prev { left: 8px; }
    .pd-lightbox .lb-next { right: 8px; }
    .pd-lightbox .lb-nav { width: 44px; height: 44px; font-size: 24px; }
    .pd-lightbox .lb-thumbs img { width: 48px; height: 48px; }
}

/* Cart */
.cart { padding: 32px 0; }
.cart-table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.cart-table th, .cart-table td { padding: 16px; border-bottom: 1px solid var(--c-border); text-align: left; }
.cart-table .product { display: flex; gap: 16px; align-items: center; }
.cart-table .product img { width: 80px; height: 80px; object-fit: cover; }
.cart-table input[type=number] { width: 60px; padding: 6px; }
.cart-summary { background: var(--c-soft); padding: 28px; max-width: 420px; margin-left: auto; }
.cart-summary > div { display: flex; justify-content: space-between; padding: 10px 0; }
.cart-summary .total { font-size: 18px; border-top: 1px solid var(--c-border); padding-top: 14px; margin-top: 10px; }

/* Checkout */
.checkout-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; padding: 24px 0; }
.address-card { display: block; border: 1px solid var(--c-border); padding: 16px; margin-bottom: 12px; cursor: pointer; }
.address-card input { margin-right: 8px; }

/* Auth */
.auth { max-width: 480px; margin: 64px auto; padding: 0 24px; }
.auth h1 { font-family: var(--serif); text-align: center; margin: 0 0 32px; font-weight: 400; }
.auth-form label { display: block; margin-bottom: 14px; font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking); }
.auth-form input:not([type=checkbox]) { display: block; width: 100%; padding: 12px 14px; border: 1px solid var(--c-border); margin-top: 6px; font-size: 14px; }
.auth-form .check { display: flex; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; }
.auth-form .check input[type=checkbox] { width: auto; min-width: 0; margin: 0; padding: 0; border: 0; flex: 0 0 auto; }
.auth-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Buttons */
.btn { display: inline-block; padding: 14px 32px; background: #0e0e0e; color: #fff; border: 0; text-align: center; cursor: pointer; letter-spacing: var(--tracking); font-size: 12px; text-transform: uppercase; transition: all .25s ease; }
.btn:hover { background: var(--c-accent-dark); color: #fff; }
.btn-primary { background: var(--c-fg); }
.btn-light { background: #fff; color: #0e0e0e; border: 1px solid #fff; }
.btn-light:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.btn-block { width: 100%; }

/* Static page */
.static-page { padding: 64px 0; max-width: 800px; margin: 0 auto; }
.static-page h1 { font-family: var(--serif); font-size: 42px; font-weight: 400; }

/* Footer */
.site-footer { background: #0e0e0e; color: #cfcfcf; padding: 64px 0 0; margin-top: 0; }
.site-footer a { color: #cfcfcf; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; }
.footer-grid h4 { font-family: var(--serif); font-size: 22px; font-weight: 400; margin: 0 0 12px; color: #fff; }
.footer-grid h5 { font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking); margin: 0 0 16px; color: #fff; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid ul li { padding: 6px 0; font-size: 13px; }
.footer-grid form input { padding: 10px 14px; border: 1px solid #333; background: #1a1a1a; color: #fff; width: 100%; margin-bottom: 10px; font-size: 13px; }
.footer-bottom { padding: 28px 0; border-top: 1px solid #2a2a2a; margin-top: 48px; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: var(--tracking); }

/* Alerts */
.alert { padding: 14px 18px; margin: 16px 0; }
.alert-error { background: #fdecea; color: var(--c-error); }
.alert-success { background: #e6f4ec; color: var(--c-success); }
.text-error { color: var(--c-error); }

/* Account */
.account-menu { list-style: none; padding: 0; }
.account-menu li { padding: 14px 0; border-bottom: 1px solid var(--c-border); }

@media (max-width: 1024px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .hero-mosaic { height: auto; min-height: 0; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 56vh); }
    .hero-mosaic .hm-1 { grid-column: 1; grid-row: 1; }
    .hero-mosaic .hm-2 { grid-column: 2; grid-row: 1; }
    .hero-mosaic .hm-3 { grid-column: 1 / 3; grid-row: 2; }
    .hero-mosaic .hm-4 { grid-column: 1; grid-row: 3; }
    .hero-mosaic .hm-5 { grid-column: 2; grid-row: 3; }
    .hero-mosaic .hm-1 .hm-name,
    .hero-mosaic .hm-2 .hm-name { font-size: 40px; }
}

@media (max-width: 768px) {
    .container { padding: 0 20px; }
    .header-grid { grid-template-columns: 1fr; gap: 16px; }
    .brand { font-size: 24px; letter-spacing: 4px; }
    .pd-grid { grid-template-columns: 1fr; gap: 32px; }
    .catalog-layout { grid-template-columns: 1fr; gap: 24px; }
    .checkout-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .main-nav ul { gap: 16px; flex-wrap: wrap; }
    .hero-slider { min-height: 60vh; }
    .slide-content h2 { font-size: 36px; }
    .slide-content p { font-size: 15px; }
    .slider-arrow { display: none; }
    .hero-mosaic { grid-template-columns: 1fr; grid-template-rows: repeat(5, 50vh); height: auto; min-height: 0; }
    .hero-mosaic .hm-1, .hero-mosaic .hm-2, .hero-mosaic .hm-3, .hero-mosaic .hm-4, .hero-mosaic .hm-5 { grid-column: 1; }
    .hero-mosaic .hm-1 { grid-row: 1; } .hero-mosaic .hm-2 { grid-row: 2; }
    .hero-mosaic .hm-3 { grid-row: 3; } .hero-mosaic .hm-4 { grid-row: 4; }
    .hero-mosaic .hm-5 { grid-row: 5; }
    .hm-name { font-size: 32px !important; }
    .hero-mosaic .hm-tile { padding: 24px; }
    .section-title { font-size: 30px; }
    .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .featured-categories { padding: 64px 0 56px; }
    .product-section { padding: 56px 0; }
    .cat-grid { grid-template-columns: 1fr; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .product-card .card-body { padding: 12px 14px 14px; }
    .product-card .actions { grid-template-columns: 1fr; gap: 4px; }
    .btn-card { padding: 10px 6px; font-size: 11px; }
    .editorial { min-height: 480px; padding: 56px 0; }
    .editorial-copy h2 { font-size: 36px; }
    .story-banner { min-height: 480px; padding: 64px 0; }
    .story-copy h2 { font-size: 36px; }
    .newsletter { padding: 56px 0; }
    .newsletter h2 { font-size: 26px; }
    .newsletter-form { flex-direction: column; border: 0; }
    .newsletter-form input { border: 1px solid var(--c-border); margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slider .slide.active .slide-bg,
    .hero-slider .slide.active .slide-shine,
    .hero-slider .slide.active .slide-sparkle,
    .hero-slider .slide.active .slide-content { animation: none; }
    .hero-slider .slide-content { transform: none; opacity: 1; }
    /* Reduce-motion: mosaic marka kimliği kapsamında tutulduğu için tam durdurmuyoruz —
       süre normalden yavaş, amplitude azaltılmış ama yine de algılanabilir. */
    .hero-mosaic .hm-bg {
        animation-name: hmDriftLite !important;
        animation-duration: 22s !important;
    }
    .hero-mosaic .hm-overlay { animation: none !important; }
    /* Sparkle'lar yarı hızda (irritasyon yapmasın ama görünsün) */
    .hero-mosaic .hm-sparkles i { animation-duration: 5.5s !important; }
    /* Spotlight breathing dursun, sabit yumuşak ışık kalsın */
    .hero-mosaic .hm-spotlight { animation: none !important; opacity: 0.9 !important; }
    .cat-tile img, .product-card .card-image img { transition: none; }
}