/* Hepalsak storefront — hand-written, no build step required. */

:root {
    /* Brand: navy and orange from the Hepalsak logo */
    --kobalt: #0B3B78;
    --kobalt-ink: #00254E;
    --kobalt-soft: #E7EEF8;
    --turuncu: #FC5D03;
    --turuncu-ink: #D94E00;
    --turuncu-soft: #FFF1E7;
    --gece: #0A1C36;
    --soluk: #56627F;
    --turkuaz: #0E8C84;
    --nar: #C8372D;
    --kagit: #F4F6FB;
    --beyaz: #FFFFFF;
    --cizgi: #DCE1EC;
    --cizgi-koyu: #C4CCDD;
    --amber: #B7791F;

    --font-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
    --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --shadow-pop: 0 18px 40px -12px rgba(15, 26, 58, .28), 0 2px 6px rgba(15, 26, 58, .08);
    --wrap: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--kagit);
    color: var(--gece);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--kobalt) 55%, white); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--soluk); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gece); color: #fff; padding: 8px 14px; border-radius: var(--r-sm); z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- Buttons & form controls ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 20px; border-radius: var(--r-sm);
    border: 1px solid transparent; font-weight: 600; font-size: 15px; cursor: pointer;
    white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--kobalt); color: #fff; }
.btn-primary:hover { background: var(--kobalt-ink); }
.btn-accent { background: var(--turuncu); color: #fff; font-weight: 700; }
.btn-accent:hover { background: var(--turuncu-ink); }
.btn-ghost { background: var(--beyaz); border-color: var(--cizgi-koyu); color: var(--gece); }
.btn-ghost:hover { border-color: var(--gece); }
.btn-dark { background: var(--gece); color: #fff; }
.btn-dark:hover { background: #1d2a52; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }

.field { display: grid; gap: 6px; }
.field label, .field .label { font-size: 14px; font-weight: 600; }
.field .hint { font-size: 13px; color: var(--soluk); }
.input, .select, .textarea {
    width: 100%; height: 46px; padding: 0 14px; border-radius: var(--r-sm);
    border: 1px solid var(--cizgi-koyu); background: var(--beyaz);
    transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 104px; padding: 12px 14px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--kobalt); box-shadow: 0 0 0 3px var(--kobalt-soft); }
.is-invalid { border-color: var(--nar) !important; }
.error { color: var(--nar); font-size: 13px; font-weight: 500; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--kobalt); flex: none; }

.alert { padding: 14px 16px; border-radius: var(--r-sm); font-size: 15px; border: 1px solid; }
.alert-ok { background: #E6F5F3; border-color: #A9DCD6; color: #0B5F59; }
.alert-err { background: #FBEAE8; border-color: #EFB9B3; color: #8E2A22; }
.alert-info { background: var(--kobalt-soft); border-color: #C3CFF3; color: var(--kobalt-ink); }

/* ---------- Utility bar ---------- */

.utility { background: var(--kobalt-ink); color: #C9D1E6; font-size: 13px; }
.utility .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 38px; }
.utility a:hover { color: #fff; }
.utility-links { display: flex; gap: 20px; align-items: center; }
.utility-promo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utility-promo strong { color: #FF9A5C; font-weight: 700; }

.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.lang summary::-webkit-details-marker { display: none; }
.lang[open] summary { color: #fff; }
.lang-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 160px;
    background: var(--beyaz); color: var(--gece); border-radius: var(--r-md); padding: 6px;
    box-shadow: var(--shadow-pop);
}
.lang-menu a { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: var(--r-sm); font-size: 14px; }
.lang-menu a:hover { background: var(--kagit); color: var(--gece); }
.lang-menu a[aria-current="true"] { font-weight: 700; color: var(--kobalt); }

/* ---------- Header ---------- */

.header { background: var(--beyaz); border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; z-index: 50; }
.header-main { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; height: 76px; }

.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 52px; width: auto; }
.footer .logo img { height: 56px; }
.logo-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--kobalt); display: grid; place-items: center; }
.logo-mark svg { width: 20px; height: 20px; }

.search { display: flex; height: 48px; border: 2px solid var(--kobalt-ink); border-radius: var(--r-md); overflow: hidden; background: var(--beyaz); max-width: 720px; }
.search:focus-within { border-color: var(--kobalt); }
.search select { border: 0; background: var(--kagit); padding: 0 12px; font-size: 14px; font-weight: 600; max-width: 180px; border-right: 1px solid var(--cizgi); cursor: pointer; }
.search input { flex: 1; border: 0; padding: 0 16px; min-width: 0; font-size: 15px; }
.search input:focus, .search select:focus { outline: none; }
.search button { border: 0; background: var(--turuncu); color: #fff; padding: 0 20px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.search button:hover { background: var(--turuncu-ink); }

.header-actions { display: flex; align-items: center; gap: 6px; }
.hact { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-md); font-size: 14px; line-height: 1.2; }
.hact:hover { background: var(--kagit); }
.hact svg { width: 24px; height: 24px; flex: none; }
.hact small { display: block; color: var(--soluk); font-size: 12px; }
.hact b { font-weight: 600; }
.cart-pill { position: relative; }
.cart-count { position: absolute; top: 2px; left: 28px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--turuncu); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--beyaz); }

.menu-toggle { display: none; border: 0; background: none; padding: 8px; cursor: pointer; flex: none; }
.menu-toggle svg { flex: none; }
.menu-toggle svg { width: 26px; height: 26px; }

/* ---------- Category bar + mega menu ---------- */

.catbar { background: var(--beyaz); border-bottom: 1px solid var(--cizgi); position: relative; z-index: 40; }
.catbar-list { display: flex; align-items: stretch; gap: 2px; height: 48px; }
.catbar-item { position: static; display: flex; }
.catbar-link {
    display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 15px; font-weight: 600;
    border-bottom: 3px solid transparent; margin-bottom: -1px; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer;
}
.catbar-link svg { width: 18px; height: 18px; color: var(--soluk); }
.catbar-item:hover > .catbar-link,
.catbar-item:focus-within > .catbar-link,
.catbar-item.is-open > .catbar-link { border-bottom-color: var(--kobalt); color: var(--kobalt); }
.catbar-item:hover > .catbar-link svg, .catbar-item.is-open > .catbar-link svg { color: var(--kobalt); }
.catbar-extra { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.catbar-extra a { padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--soluk); display: flex; align-items: center; height: 100%; }
.catbar-extra a:hover { color: var(--kobalt); }
.catbar-extra a[aria-current="page"] { color: var(--kobalt); box-shadow: inset 0 -3px 0 var(--kobalt); }
.catbar-extra .is-accent { color: var(--turuncu-ink); }

.mega {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--beyaz); border-top: 1px solid var(--cizgi); box-shadow: var(--shadow-pop);
    visibility: hidden; opacity: 0; transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.catbar-item:hover > .mega,
.catbar-item:focus-within > .mega,
.catbar-item.is-open > .mega { visibility: visible; opacity: 1; transform: none; transition-delay: .08s, .08s, 0s; }
.mega-inner { display: grid; grid-template-columns: 1fr 300px; gap: 40px; padding: 28px 20px 32px; }
.mega-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
.mega-head h3 { font-size: 24px; }
.mega-head a { font-size: 14px; font-weight: 600; color: var(--kobalt); }
.mega-head a:hover { text-decoration: underline; }
.mega-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.mega-col h4 { font-family: var(--font-body); font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.mega-col h4 a:hover { color: var(--kobalt); }
.mega-col li a { display: block; padding: 4px 0; font-size: 14px; color: var(--soluk); }
.mega-col li a:hover { color: var(--gece); text-decoration: underline; text-underline-offset: 3px; }
.mega-col .count { font-size: 12px; color: var(--cizgi-koyu); margin-left: 4px; }
.mega-side { display: grid; gap: 18px; align-content: start; border-left: 1px solid var(--cizgi); padding-left: 28px; }
.mega-side h5 { font-size: 13px; font-weight: 700; color: var(--soluk); margin: 0 0 10px; font-family: var(--font-body); }
.mega-dealers { display: grid; gap: 8px; }
.mega-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mega-brands a { display: grid; place-items: center; height: 52px; padding: 8px 10px; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--beyaz); font-weight: 700; font-size: 13px; color: var(--gece); }
.mega-brands a:hover { border-color: var(--kobalt); }
.mega-brands img { max-height: 28px; max-width: 100%; object-fit: contain; }
.drawer-small { display: block; text-align: center; font-size: 14px; color: var(--soluk); padding: 10px; text-decoration: underline; text-underline-offset: 3px; }
.mega-spot { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r-md); background: var(--kagit); }
.mega-spot:hover { background: var(--kobalt-soft); }
.mega-spot .thumb { aspect-ratio: 1; border-radius: var(--r-sm); }
.mega-spot strong { display: block; font-size: 14px; line-height: 1.3; }
.mega-spot .price { font-size: 17px; margin-top: 6px; }

/* ---------- Dealer signboard (tabela) — the signature element ---------- */

.tabela {
    --sign: var(--kobalt);
    display: inline-flex; align-items: stretch; max-width: 100%;
    border-radius: var(--r-sm); overflow: hidden; background: var(--beyaz);
    border: 1px solid color-mix(in srgb, var(--sign) 30%, var(--cizgi));
    box-shadow: inset 0 -3px 0 var(--sign);
    font-size: 13px; line-height: 1.2;
}
.tabela-mono {
    display: grid; place-items: center; min-width: 30px; padding: 0 6px;
    background: var(--sign); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .02em;
}
.tabela-text { padding: 6px 10px 8px; min-width: 0; }
.tabela-name { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-meta { display: block; color: var(--soluk); font-size: 12px; margin-top: 2px; white-space: nowrap; }
a.tabela:hover { border-color: var(--sign); }
.tabela-lg { font-size: 15px; }
.tabela-lg .tabela-mono { min-width: 52px; font-size: 18px; }
.tabela-lg .tabela-text { padding: 10px 14px 13px; }
.tabela-platform { --sign: var(--gece); }

/* ---------- Hero: the bazaar wall ---------- */

.hero { background: var(--beyaz); border-bottom: 1px solid var(--cizgi); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding: 56px 20px 64px; }
.hero h1 { font-size: clamp(40px, 5.2vw, 68px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; max-width: 11ch; }
.hero-lead { font-size: 19px; color: var(--soluk); margin-top: 20px; max-width: 46ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 36px; font-size: 14px; color: var(--soluk); }
.hero-trust span { display: flex; align-items: center; gap: 8px; }
.hero-trust svg { width: 18px; height: 18px; color: var(--turkuaz); }

.hero-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hero-pick { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--beyaz); transition: border-color .15s; }
.hero-pick:hover { border-color: var(--kobalt); }
.hero-pick:nth-child(even) { transform: translateY(22px); }
.hero-pick .thumb { border-radius: 8px; aspect-ratio: 1; }
.hero-pick-body { display: grid; gap: 6px; min-width: 0; }
.hero-pick-body strong { font-size: 15px; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-pick-off { position: absolute; top: 8px; left: 8px; padding: 2px 6px; border-radius: 4px; background: var(--nar); color: #fff; font-size: 12px; font-weight: 700; }
@media (max-width: 720px) { .hero-picks { grid-template-columns: 1fr; } .hero-pick:nth-child(even) { transform: none; } .hero-pick:nth-child(n+3) { display: none; } }
.bazaar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bazaar-sign {
    --sign: var(--kobalt);
    position: relative; display: flex; flex-direction: column; gap: 14px;
    padding: 18px 16px 20px; border-radius: var(--r-md);
    background: color-mix(in srgb, var(--sign) 6%, white);
    border: 1px solid color-mix(in srgb, var(--sign) 22%, white);
    box-shadow: inset 0 -5px 0 var(--sign);
    min-height: 172px;
}
.bazaar-sign:hover { background: color-mix(in srgb, var(--sign) 11%, white); }
.bazaar-sign:nth-child(3n+2) { transform: translateY(22px); }
.bazaar-mono {
    width: 46px; height: 46px; border-radius: 10px; background: var(--sign); color: #fff;
    display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 18px;
}
.bazaar-sign strong { font-family: var(--font-display); font-size: 18px; line-height: 1.15; letter-spacing: -0.01em; }
.bazaar-sign .meta { font-size: 13px; color: var(--soluk); margin-top: auto; }
.bazaar-sign .meta b { color: var(--gece); font-weight: 700; }
.bazaar-join {
    display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 18px 16px;
    border-radius: var(--r-md); border: 2px dashed var(--cizgi-koyu); color: var(--soluk); font-size: 14px; min-height: 172px;
}
.bazaar-join strong { color: var(--gece); font-family: var(--font-display); font-size: 18px; }
.bazaar-join:hover { border-color: var(--kobalt); color: var(--kobalt); }

@media (prefers-reduced-motion: no-preference) {
    .bazaar > * { animation: hang .55s cubic-bezier(.2, .9, .3, 1.2) both; }
    .bazaar > *:nth-child(1) { animation-delay: .05s; }
    .bazaar > *:nth-child(2) { animation-delay: .12s; }
    .bazaar > *:nth-child(3) { animation-delay: .19s; }
    .bazaar > *:nth-child(4) { animation-delay: .26s; }
    .bazaar > *:nth-child(5) { animation-delay: .33s; }
    .bazaar > *:nth-child(6) { animation-delay: .40s; }
    .bazaar > *:nth-child(n+7) { animation-delay: .47s; }
}
@keyframes hang {
    from { opacity: 0; translate: 0 -18px; rotate: -1.5deg; }
    to { opacity: 1; translate: 0 0; rotate: 0deg; }
}

/* ---------- Sections ---------- */

.section { padding: 56px 0 0; }
.section:last-of-type { padding-bottom: 72px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.section-head h2 { font-size: 30px; font-weight: 700; }
.section-head p { color: var(--soluk); margin-top: 6px; }
.section-head .more { font-weight: 600; color: var(--kobalt); white-space: nowrap; font-size: 15px; }
.section-head .more:hover { text-decoration: underline; }

/* Category tiles */
.cat-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.cat-tile {
    --tint: var(--kobalt);
    display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-md);
    background: var(--beyaz); border: 1px solid var(--cizgi); min-height: 168px;
}
.cat-tile:hover { border-color: var(--tint); }
.cat-tile .ico { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--tint) 12%, white); color: var(--tint); }
.cat-tile .ico svg { width: 28px; height: 28px; }
.cat-tile strong { font-family: var(--font-display); font-size: 18px; }
.cat-tile small { color: var(--soluk); font-size: 13px; line-height: 1.4; margin-top: auto; }

/* ---------- Product grid & card ---------- */

.grid-products { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.grid-products.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-products.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
    position: relative; display: flex; flex-direction: column; background: var(--beyaz);
    border: 1px solid var(--cizgi); border-radius: var(--r-md); overflow: hidden;
}
.card:hover { border-color: var(--cizgi-koyu); }
.card:hover .card-title { color: var(--kobalt); }
.card-media { position: relative; display: block; }
.thumb {
    --tint: var(--kobalt);
    aspect-ratio: 1 / 1; display: grid; place-items: center;
    background: color-mix(in srgb, var(--tint) 7%, #F7F8FC);
}
.thumb img { width: 58%; height: 58%; object-fit: contain; }
.thumb.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.badge {
    position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 4px;
    font-size: 12px; font-weight: 700; background: var(--nar); color: #fff;
}
.badge-low { left: auto; right: 10px; background: var(--beyaz); color: var(--amber); border: 1px solid #EED7AE; }
.badge-out { left: auto; right: 10px; background: var(--gece); }
.card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 10px; flex: 1; }
.card-brand { font-size: 12px; font-weight: 700; color: var(--soluk); }
.card-title { font-size: 14.5px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.card-title::after { content: ''; position: absolute; inset: 0; }
.price { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.price-old { font-size: 13px; color: var(--soluk); text-decoration: line-through; font-weight: 500; font-family: var(--font-body); }
.price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.price-row .price.is-deal { color: var(--nar); }
.card-seller {
    --sign: var(--kobalt);
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 8px; padding: 9px 14px;
    border-top: 1px solid var(--cizgi); font-size: 12.5px;
    box-shadow: inset 4px 0 0 var(--sign);
    background: color-mix(in srgb, var(--sign) 4%, white);
}
.card-seller:hover { background: color-mix(in srgb, var(--sign) 10%, white); }
.card-seller .mono { width: 22px; height: 22px; border-radius: 5px; background: var(--sign); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 10px; flex: none; }
.card-seller .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-seller .who b { font-weight: 700; }
.card-seller .city { margin-left: auto; color: var(--soluk); flex: none; }

/* Dealer shelf (products grouped by dealer on the home page) */
.shelves { display: grid; gap: 18px; }
.shelf {
    --sign: var(--kobalt);
    display: grid; grid-template-columns: 260px 1fr; gap: 0; background: var(--beyaz);
    border: 1px solid var(--cizgi); border-radius: var(--r-lg); overflow: hidden;
}
.shelf-sign {
    display: flex; flex-direction: column; gap: 14px; padding: 24px;
    background: color-mix(in srgb, var(--sign) 8%, white); box-shadow: inset 0 -6px 0 var(--sign);
}
.shelf-sign .bazaar-mono { width: 56px; height: 56px; font-size: 22px; }
.shelf-sign h3 { font-size: 22px; }
.shelf-sign p { font-size: 14px; color: var(--soluk); }
.shelf-sign .btn { margin-top: auto; align-self: flex-start; }
.shelf-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shelf-products .card { border: 0; border-radius: 0; border-left: 1px solid var(--cizgi); }
.shelf-products .card-seller { display: none; }

/* Dealer CTA band */
.join-band { background: var(--kobalt-ink); color: #fff; border-radius: var(--r-lg); padding: 44px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.join-band h2 { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; }
.join-band p { color: #B7C1DC; margin-top: 12px; max-width: 44ch; }
.join-band .btn { margin-top: 24px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: step; }
.step { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: 18px; }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--gece); font-weight: 800; font-family: var(--font-display); margin-bottom: 14px; }
.step strong { display: block; font-size: 16px; }
.step span { display: block; color: #B7C1DC; font-size: 14px; margin-top: 6px; }

/* Service strip */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-md); }
.service { display: flex; gap: 14px; align-items: center; padding: 18px 20px; }
.service + .service { border-left: 1px solid var(--cizgi); }
.service svg { width: 30px; height: 30px; color: var(--kobalt); flex: none; }
.service strong { display: block; font-size: 15px; }
.service span { display: block; font-size: 13px; color: var(--soluk); }

/* ---------- Catalog ---------- */

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--soluk); padding: 18px 0 0; }
.crumbs a:hover { color: var(--kobalt); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--cizgi-koyu); }

.page-head { padding: 12px 0 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.page-head p { color: var(--soluk); margin-top: 4px; }

.catalog { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 28px; align-items: start; padding-bottom: 72px; }
.filters { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-md); }
.filter { padding: 16px 18px; border-bottom: 1px solid var(--cizgi); }
.filter:last-child { border-bottom: 0; }
.filter h3 { font-family: var(--font-body); font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.filter-tree a { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; color: var(--soluk); }
.filter-tree a:hover, .filter-tree a[aria-current="page"] { color: var(--kobalt); }
.filter-tree a[aria-current="page"] { font-weight: 700; }
.filter-tree ul ul { padding-left: 12px; border-left: 1px solid var(--cizgi); margin: 2px 0 4px 2px; }
.filter .opt { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; cursor: pointer; }
.filter .opt input { width: 17px; height: 17px; accent-color: var(--kobalt); margin: 0; }
.filter .opt .n { margin-left: auto; color: var(--soluk); font-size: 12px; }
.filter .opt .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.price-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.price-range .input { height: 40px; font-size: 14px; }
.filters-actions { padding: 14px 18px; display: grid; gap: 8px; background: var(--beyaz); border-top: 1px solid var(--cizgi); }
@media (max-width: 980px) { .filters { overflow-y: auto; } .filters-actions { position: sticky; bottom: 0; } }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .count { font-size: 14px; color: var(--soluk); }
.toolbar .count b { color: var(--gece); }
.toolbar select { height: 40px; width: auto; font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--kobalt-soft); color: var(--kobalt-ink); font-size: 13px; font-weight: 600; }
.chip:hover { background: #d6dff8; }
.filters-toggle { display: none; }

.empty { background: var(--beyaz); border: 1px dashed var(--cizgi-koyu); border-radius: var(--r-md); padding: 48px 24px; text-align: center; }
.empty h2 { font-size: 22px; }
.empty p { color: var(--soluk); margin: 8px auto 20px; max-width: 46ch; }

.pager { margin-top: 28px; }
.pager nav > div:first-child { display: none; }
.pager nav { display: flex; justify-content: center; }
.pager nav span, .pager nav a { display: inline-flex; }
.pager .pg { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pager .pg a, .pager .pg span { min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--cizgi); background: var(--beyaz); display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.pager .pg a:hover { border-color: var(--gece); }
.pager .pg .is-current { background: var(--gece); color: #fff; border-color: var(--gece); }
.pager .pg .is-disabled { color: var(--cizgi-koyu); }

/* ---------- Product detail ---------- */

.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; padding: 8px 0 40px; }
.gallery { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-self: start; position: sticky; top: 140px; }
.gallery-thumbs { display: grid; gap: 10px; align-content: start; }
.gallery-thumbs button { padding: 0; border: 2px solid var(--cizgi); border-radius: var(--r-sm); background: none; cursor: pointer; overflow: hidden; }
.gallery-thumbs button[aria-pressed="true"] { border-color: var(--kobalt); }
.gallery-main { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--cizgi); }
.gallery-main .thumb img { width: 62%; height: 62%; }
.pdp-info h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: 6px; }
.pdp-brand { font-weight: 700; color: var(--kobalt); font-size: 15px; }
.pdp-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 14px; color: var(--soluk); }
.pdp-meta b { color: var(--gece); font-weight: 600; }
.pdp-buy { margin-top: 22px; padding: 22px; border-radius: var(--r-lg); background: var(--beyaz); border: 1px solid var(--cizgi); display: grid; gap: 16px; }
.pdp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pdp-price .price { font-size: 36px; }
.pdp-price .save { background: #FBEAE8; color: var(--nar); font-weight: 700; font-size: 13px; padding: 4px 8px; border-radius: 4px; }
.stock { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--turkuaz); }
.stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stock.is-low { color: var(--amber); }
.stock.is-out { color: var(--nar); }
.buy-row { display: flex; gap: 10px; align-items: stretch; }
.qty { display: flex; border: 1px solid var(--cizgi-koyu); border-radius: var(--r-sm); overflow: hidden; height: 52px; background: var(--beyaz); }
.qty button { width: 42px; border: 0; background: var(--kagit); font-size: 20px; cursor: pointer; }
.qty button:hover { background: var(--kobalt-soft); }
.qty input { width: 54px; border: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.added { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ship-note { display: grid; gap: 10px; font-size: 14px; padding-top: 4px; border-top: 1px solid var(--cizgi); padding-top: 16px; }
.ship-note div { display: flex; gap: 10px; align-items: center; }
.ship-note svg { width: 20px; height: 20px; color: var(--soluk); flex: none; }

.seller-card {
    --sign: var(--kobalt);
    margin-top: 16px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid color-mix(in srgb, var(--sign) 28%, var(--cizgi));
    background: var(--beyaz);
}
.seller-top { display: flex; gap: 16px; align-items: center; padding: 18px 20px; background: color-mix(in srgb, var(--sign) 7%, white); box-shadow: inset 0 -4px 0 var(--sign); }
.seller-top .bazaar-mono { width: 54px; height: 54px; font-size: 20px; flex: none; }
.seller-top .label { font-size: 13px; color: var(--soluk); }
.seller-top strong { display: block; font-family: var(--font-display); font-size: 20px; }
.seller-facts { display: grid; grid-template-columns: repeat(3, 1fr); }
.seller-facts div { padding: 14px 20px; font-size: 13px; color: var(--soluk); }
.seller-facts div + div { border-left: 1px solid var(--cizgi); }
.seller-facts b { display: block; color: var(--gece); font-size: 16px; font-weight: 700; }
.seller-card .seller-link { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid var(--cizgi); font-weight: 600; font-size: 14px; color: var(--kobalt); }
.seller-card .seller-link:hover { background: var(--kagit); }

.tabs { margin-top: 8px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); }
.tabs-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--cizgi); padding: 0 12px; overflow-x: auto; }
.tabs-nav button { border: 0; background: none; padding: 16px 14px; font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; color: var(--soluk); white-space: nowrap; }
.tabs-nav button[aria-selected="true"] { color: var(--gece); border-bottom-color: var(--kobalt); }
.tab-panel { padding: 24px; }
.tab-panel[hidden] { display: none; }
.prose { max-width: 72ch; color: #2a3557; line-height: 1.7; }
.prose p + p { margin-top: 12px; }
.specs { width: 100%; border-collapse: collapse; font-size: 14.5px; max-width: 760px; }
.specs th, .specs td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.specs th { width: 38%; color: var(--soluk); font-weight: 500; background: var(--kagit); }

/* ---------- Dealer store page ---------- */

.store-card {
    --sign: var(--kobalt);
    margin-top: 16px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); overflow: hidden;
}
.store-cover {
    height: 92px;
    background:
        repeating-linear-gradient(115deg, rgba(255,255,255,.10) 0 2px, transparent 2px 22px),
        linear-gradient(100deg, var(--sign), color-mix(in srgb, var(--sign) 70%, #0F1A3A));
}
.store-head { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 320px); gap: 20px; align-items: start; padding: 0 28px 22px; }
.store-search { align-self: center; margin-top: 14px; }
.store-mono {
    width: 88px; height: 88px; margin-top: -44px; border-radius: 20px; border: 4px solid var(--beyaz);
    background: var(--sign); color: #fff; display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 800; font-size: 30px; box-shadow: 0 6px 18px -6px rgba(15,26,58,.35);
}
.store-title { padding-top: 14px; min-width: 0; }
.store-title h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--gece); }
.store-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 14px; color: var(--soluk); }
.store-meta li { display: inline-flex; align-items: center; gap: 6px; }
.store-meta svg { width: 16px; height: 16px; }
.store-meta .is-verified { color: var(--turkuaz); font-weight: 600; }
.store-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid var(--cizgi-koyu); border-radius: var(--r-sm); background: var(--kagit); }
.store-search:focus-within { border-color: var(--sign); background: var(--beyaz); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sign) 18%, transparent); }
.store-search svg { width: 18px; height: 18px; color: var(--soluk); flex: none; }
.store-search input { border: 0; background: none; flex: 1; min-width: 0; font-size: 15px; }
.store-search input:focus { outline: none; }
.store-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-top: 1px solid var(--cizgi); }
.store-stats div { padding: 14px 28px; }
.store-stats div + div { border-left: 1px solid var(--cizgi); }
.store-stats dt { font-size: 13px; color: var(--soluk); }
.store-stats dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--gece); }
.store-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 28px; align-items: start; padding: 24px 0 72px; }
.store-side { display: grid; gap: 14px; position: sticky; top: 140px; }
.side-card { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-md); padding: 18px; }
.side-card h2 { font-family: var(--font-body); font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.side-card p { font-size: 14px; color: var(--soluk); line-height: 1.6; }
.side-nav a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: var(--r-sm); font-size: 14px; color: var(--soluk); }
.side-nav a span { font-size: 12px; color: var(--cizgi-koyu); font-weight: 600; }
.side-nav a:hover { background: var(--kagit); color: var(--gece); }
.side-nav a[aria-current="page"] { background: var(--kobalt-soft); color: var(--kobalt-ink); font-weight: 700; }
.side-nav a[aria-current="page"] span { color: var(--kobalt); }
.side-trust li { display: flex; gap: 10px; font-size: 13.5px; color: var(--soluk); padding: 5px 0; line-height: 1.45; }
.side-trust svg { width: 18px; height: 18px; color: var(--turkuaz); flex: none; margin-top: 1px; }
.is-store .card-seller { display: none; }

.dealers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 72px; }
.dealer-card { --sign: var(--kobalt); background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.dealer-card:hover { border-color: var(--sign); }
.dealer-card .top { display: flex; gap: 14px; align-items: center; padding: 20px; background: color-mix(in srgb, var(--sign) 7%, white); box-shadow: inset 0 -4px 0 var(--sign); }
.dealer-card .top strong { font-family: var(--font-display); font-size: 19px; display: block; }
.dealer-card .top span { font-size: 13px; color: var(--soluk); }
.dealer-card .body { padding: 16px 20px 20px; font-size: 14px; color: var(--soluk); display: grid; gap: 12px; flex: 1; }
.dealer-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 4px; background: var(--kagit); color: var(--gece); border: 1px solid var(--cizgi); }

/* ---------- Dealer application ---------- */

.apply { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; padding: 8px 0 72px; }
.apply-form { display: grid; gap: 18px; }
.fieldset { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); padding: 24px; margin: 0; }
.fieldset legend { float: left; width: 100%; padding: 0; margin-bottom: 18px; }
.fieldset legend h2 { font-size: 20px; }
.fieldset legend p { font-size: 14px; color: var(--soluk); margin-top: 4px; font-family: var(--font-body); }
.fieldset .grid { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fieldset .full { grid-column: 1 / -1; }
.cat-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cat-pick { position: relative; }
.cat-pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cat-pick span { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--cizgi-koyu); border-radius: var(--r-sm); font-size: 14px; font-weight: 600; height: 100%; }
.cat-pick span svg { width: 20px; height: 20px; color: var(--soluk); flex: none; }
.cat-pick input:checked + span { border-color: var(--kobalt); background: var(--kobalt-soft); color: var(--kobalt-ink); box-shadow: inset 0 0 0 1px var(--kobalt); }
.cat-pick input:checked + span svg { color: var(--kobalt); }
.cat-pick input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--kobalt) 55%, white); outline-offset: 2px; }
.apply-aside { position: sticky; top: 140px; display: grid; gap: 16px; }
.aside-card { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); padding: 22px; }
.aside-card h3 { font-size: 18px; margin-bottom: 14px; }
.aside-card.dark { background: var(--gece); border-color: var(--gece); color: #fff; }
.aside-card.dark p, .aside-card.dark li { color: #B7C1DC; }
.flow { display: grid; gap: 14px; counter-reset: flow; }
.flow li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 14px; }
.flow li::before { counter-increment: flow; content: counter(flow); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--kobalt-soft); color: var(--kobalt-ink); font-weight: 800; font-size: 13px; }
.flow b { display: block; color: var(--gece); }
.flow span { color: var(--soluk); }
.perks li { display: flex; gap: 10px; font-size: 14px; padding: 6px 0; }
.perks svg { width: 18px; height: 18px; color: #7FD3CB; flex: none; margin-top: 2px; }

.done { max-width: 640px; margin: 48px auto 88px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); padding: 40px; text-align: center; }
.done .ok-ico { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: #E6F5F3; color: var(--turkuaz); display: grid; place-items: center; }
.done .ok-ico svg { width: 32px; height: 32px; }
.done h1 { font-size: 30px; }
.done p { color: var(--soluk); margin-top: 12px; }
.done .flow { text-align: left; margin: 28px auto; max-width: 420px; }

/* ---------- Auth ---------- */

.auth { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 980px; margin: 40px auto 80px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); overflow: hidden; }
.auth-form { padding: 40px; display: grid; gap: 18px; align-content: start; }
.auth-form h1 { font-size: 30px; }
.auth-side { background: var(--gece); color: #fff; padding: 40px; display: flex; flex-direction: column; gap: 18px; }
.auth-side h2 { font-size: 24px; }
.auth-side p { color: #B7C1DC; font-size: 15px; }
.demo-accounts { display: grid; gap: 8px; margin-top: auto; }
.demo-accounts button { display: flex; justify-content: space-between; gap: 12px; text-align: left; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; }
.demo-accounts button:hover { background: rgba(255,255,255,.13); }
.demo-accounts small { color: #9AA6C7; }

/* ---------- Cart & checkout ---------- */

.cart { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; padding-bottom: 72px; }
.cart-group { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); overflow: hidden; }
.cart-group + .cart-group { margin-top: 16px; }
.cart-group-head { --sign: var(--kobalt); display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; background: color-mix(in srgb, var(--sign) 6%, white); box-shadow: inset 0 -3px 0 var(--sign); font-size: 14px; }
.cart-line { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; padding: 16px 18px; align-items: center; }
.cart-line + .cart-line { border-top: 1px solid var(--cizgi); }
.cart-line .thumb { border-radius: var(--r-sm); }
.cart-line h3 { font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.cart-line h3 a:hover { color: var(--kobalt); }
.cart-line .meta { font-size: 13px; color: var(--soluk); margin-top: 4px; }
.cart-line .right { display: grid; justify-items: end; gap: 8px; }
.cart-line .qty { height: 38px; }
.cart-line .qty button { width: 34px; font-size: 16px; }
.cart-line .qty input { width: 42px; }
.link-btn { border: 0; background: none; padding: 0; color: var(--soluk); font-size: 13px; text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--nar); }
.summary { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); padding: 22px; position: sticky; top: 140px; display: grid; gap: 12px; }
.summary h2 { font-size: 20px; }
.summary .row { display: flex; justify-content: space-between; font-size: 15px; }
.summary .row.total { font-size: 18px; font-weight: 700; padding-top: 12px; border-top: 1px solid var(--cizgi); }
.summary .row.total span:last-child { font-family: var(--font-display); font-size: 24px; }
.free-bar { font-size: 13px; color: var(--soluk); }
.free-bar .track { height: 6px; background: var(--kagit); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.free-bar .fill { height: 100%; background: var(--turkuaz); border-radius: 3px; }
.pay-opts { display: grid; gap: 8px; }
.pay-opt { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--cizgi-koyu); border-radius: var(--r-sm); cursor: pointer; font-weight: 600; font-size: 15px; }
.pay-opt:has(input:checked) { border-color: var(--kobalt); background: var(--kobalt-soft); }
.pay-opt input { accent-color: var(--kobalt); width: 18px; height: 18px; margin: 0; }
.mini-lines { display: grid; gap: 12px; }
.mini-line { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.mini-line .thumb { border-radius: 6px; }
.mini-line small { display: block; color: var(--soluk); font-size: 12px; }

.orders-table { width: 100%; border-collapse: collapse; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); overflow: hidden; font-size: 15px; }
.orders-table th, .orders-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--cizgi); }
.orders-table th { font-size: 13px; color: var(--soluk); font-weight: 600; background: var(--kagit); }
.orders-table tr:last-child td { border-bottom: 0; }
.status { display: inline-block; padding: 3px 9px; border-radius: 4px; font-size: 12.5px; font-weight: 700; background: var(--kagit); }
.status-pending_payment { background: #FDF3E1; color: #8A5A10; }
.status-paid, .status-shipped { background: var(--kobalt-soft); color: var(--kobalt-ink); }
.status-processing { background: #EEE8F8; color: #5B2E8A; }
.status-completed { background: #E6F5F3; color: #0B5F59; }
.status-cancelled { background: #FBEAE8; color: #8E2A22; }

/* ---------- User menu ---------- */

.umenu { position: relative; }
.umenu > summary { list-style: none; cursor: pointer; }
.umenu > summary::-webkit-details-marker { display: none; }
.umenu .chev { width: 16px !important; height: 16px !important; color: var(--soluk); transition: transform .15s; }
.umenu[open] .chev { transform: rotate(180deg); }
.umenu[open] > summary { background: var(--kagit); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--kobalt); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; letter-spacing: .02em; }
.avatar.is-lg { width: 44px; height: 44px; font-size: 16px; }
.umenu-panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: 280px;
    background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-md); box-shadow: var(--shadow-pop);
    padding: 8px; display: grid; gap: 4px;
}
.umenu-head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 14px; border-bottom: 1px solid var(--cizgi); margin-bottom: 4px; }
.umenu-head b { display: block; font-size: 15px; }
.umenu-head div span { display: block; font-size: 13px; color: var(--soluk); overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.umenu-links { display: grid; }
.umenu-links a, .umenu-panel-link, .umenu-logout {
    display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 500;
    width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
}
.umenu-links a svg, .umenu-panel-link svg, .umenu-logout svg { width: 18px; height: 18px; color: var(--soluk); }
.umenu-links a:hover, .umenu-logout:hover { background: var(--kagit); }
.umenu-panel-link { background: var(--kobalt-soft); color: var(--kobalt-ink); font-weight: 700; }
.umenu-panel-link svg { color: var(--kobalt); }
.umenu-logout { border-top: 1px solid var(--cizgi); border-radius: 0 0 var(--r-sm) var(--r-sm); margin-top: 4px; padding-top: 12px; color: var(--nar); }
.umenu-logout svg { color: var(--nar); }

.link { color: var(--kobalt); font-weight: 600; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-danger-ghost { background: var(--beyaz); border-color: #EFB9B3; color: var(--nar); }
.btn-danger-ghost:hover { background: #FBEAE8; }
.auth.is-narrow { grid-template-columns: 1fr; max-width: 480px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* ---------- Account area ---------- */

.account { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 28px; padding-bottom: 72px; }
.account-side { position: sticky; top: 140px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); overflow: hidden; }
.account-user { display: flex; gap: 12px; align-items: center; padding: 18px; border-bottom: 1px solid var(--cizgi); background: var(--kagit); }
.account-user b { display: block; font-size: 15px; }
.account-user div span { display: block; font-size: 12.5px; color: var(--soluk); }
.account-nav { display: grid; padding: 8px; }
.account-nav a, .account-nav button {
    display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-sm);
    font-size: 15px; font-weight: 500; color: var(--gece); border: 0; background: none; width: 100%; text-align: left; cursor: pointer;
}
.account-nav svg { width: 19px; height: 19px; color: var(--soluk); }
.account-nav a:hover, .account-nav button:hover { background: var(--kagit); }
.account-nav a[aria-current="page"] { background: var(--kobalt-soft); color: var(--kobalt-ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--kobalt); }
.account-nav a[aria-current="page"] svg { color: var(--kobalt); }
.account-nav form { border-top: 1px solid var(--cizgi); margin-top: 6px; padding-top: 6px; }
.account-nav button { color: var(--nar); }
.account-nav button svg { color: var(--nar); }
.account-main { display: grid; gap: 18px; min-width: 0; }
.account-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; }
.account-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; flex-basis: 100%; }
.account-head p { color: var(--soluk); }
.account-actions { display: flex; gap: 8px; margin-left: auto; }
.account-head:has(.account-actions) h1 { flex-basis: auto; flex: 1; }
.account-head:has(.account-actions) p { order: 3; flex-basis: 100%; margin-top: -4px; }

.acc-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); }
.acc-stats div { padding: 16px 20px; }
.acc-stats div + div { border-left: 1px solid var(--cizgi); }
.acc-stats dt { font-size: 13px; color: var(--soluk); }
.acc-stats dd { margin: 4px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.acc-card { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); overflow: hidden; }
.acc-card h2 { font-size: 18px; margin-bottom: 16px; }
.acc-pad { padding: 22px; }
.acc-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--cizgi); }
.acc-card-head h2 { margin: 0; font-size: 17px; }
.acc-card-head a { font-size: 14px; font-weight: 600; color: var(--kobalt); }
.acc-card-head a:hover { text-decoration: underline; }
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.acc-grid.is-wide { grid-template-columns: minmax(0, 1fr) 320px; }
.acc-empty { padding: 32px 22px; text-align: center; color: var(--soluk); display: grid; gap: 14px; justify-items: center; }
.acc-dl { margin: 0; display: grid; gap: 12px; }
.acc-dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; font-size: 14.5px; }
.acc-dl dt { color: var(--soluk); }
.acc-dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.addr-title { font-weight: 700; margin-bottom: 4px; }

.order-row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.order-row + .order-row { border-top: 1px solid var(--cizgi); }
.order-row:hover { background: var(--kagit); }
.order-row-main { display: grid; gap: 6px; min-width: 0; font-size: 14px; }
.order-row-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.order-row-top b { font-size: 15px; }
.order-row-sellers { display: flex; flex-wrap: wrap; gap: 6px; }
.order-row-side { display: grid; justify-items: end; align-content: center; gap: 4px; font-size: 13px; text-align: right; flex: none; }
.mini-sign { --sign: var(--kobalt); display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 8px 2px 2px; border-radius: 5px; background: color-mix(in srgb, var(--sign) 8%, white); border: 1px solid color-mix(in srgb, var(--sign) 22%, white); }
.mini-sign b { width: 20px; height: 20px; border-radius: 4px; background: var(--sign); color: #fff; display: grid; place-items: center; font-size: 9px; font-family: var(--font-display); }

.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-md); flex-wrap: wrap; justify-self: start; }
.seg a { padding: 8px 14px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--soluk); }
.seg a:hover { color: var(--gece); background: var(--kagit); }
.seg a[aria-current="page"] { background: var(--gece); color: #fff; }

.track { display: grid; grid-template-columns: repeat(5, 1fr); counter-reset: none; }
.track li { position: relative; display: grid; justify-items: center; gap: 8px; font-size: 13px; color: var(--soluk); text-align: center; }
.track li::before { content: ''; position: absolute; top: 8px; left: -50%; right: 50%; height: 3px; background: var(--cizgi); }
.track li:first-child::before { display: none; }
.track .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--beyaz); border: 3px solid var(--cizgi); position: relative; z-index: 1; }
.track li.is-done .dot, .track li.is-current .dot { border-color: var(--turkuaz); background: var(--turkuaz); }
.track li.is-done::before, .track li.is-current::before { background: var(--turkuaz); }
.track li.is-current { color: var(--gece); font-weight: 700; }
.track li.is-current .dot { box-shadow: 0 0 0 5px color-mix(in srgb, var(--turkuaz) 20%, transparent); }

.addr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.addr-card { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); padding: 18px 20px; display: grid; gap: 4px; font-size: 14.5px; }
.addr-card.is-default { border-color: var(--kobalt); box-shadow: inset 0 0 0 1px var(--kobalt); }
.addr-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.addr-top b { font-size: 16px; }
.pill { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 12px; background: var(--kobalt-soft); color: var(--kobalt-ink); }
.addr-actions { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cizgi); }
.addr-actions a, .addr-actions button { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--kobalt); border: 0; background: none; padding: 0; cursor: pointer; }
.addr-actions svg { width: 15px; height: 15px; }
.addr-actions .is-danger { color: var(--nar); }
.addr-actions a:hover, .addr-actions button:hover { text-decoration: underline; }

.addr-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.addr-pick { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid var(--cizgi-koyu); border-radius: var(--r-sm); background: var(--beyaz); cursor: pointer; font-size: 13.5px; }
.addr-pick b { font-size: 14.5px; }
.addr-pick:hover { border-color: var(--gece); }
.addr-pick.is-on { border-color: var(--kobalt); background: var(--kobalt-soft); box-shadow: inset 0 0 0 1px var(--kobalt); }
.addr-pick.is-new { border-style: dashed; }

@media (max-width: 980px) {
    .account { grid-template-columns: 1fr; padding-top: 16px; }
    .account-side { position: static; }
    .account-nav { grid-auto-flow: column; overflow-x: auto; }
    .account-nav a, .account-nav button { white-space: nowrap; }
    .account-nav form { border-top: 0; margin: 0; padding: 0; }
    .account-user { display: none; }
    .acc-grid, .acc-grid.is-wide { grid-template-columns: 1fr; }
    .acc-stats { grid-template-columns: repeat(2, 1fr); }
    .acc-stats div:nth-child(3) { border-left: 0; }
    .acc-stats div:nth-child(n+3) { border-top: 1px solid var(--cizgi); }
    .umenu .lbl { display: none; }
}
@media (max-width: 640px) {
    .form-grid, .addr-grid { grid-template-columns: 1fr; }
    .track { grid-template-columns: 1fr; gap: 12px; justify-items: start; }
    .track li { grid-auto-flow: column; justify-content: start; }
    .track li::before { display: none; }
    .order-row { flex-direction: column; }
    .order-row-side { justify-items: start; text-align: left; }
    .umenu-panel { position: fixed; left: 12px; right: 12px; top: 120px; width: auto; }
    .account-head h1 { font-size: 24px; }
    .acc-stats dd { font-size: 19px; }
    .store-search { margin-top: 0; }
    .header-actions { gap: 0; }
    .hact { padding: 8px; }
}

/* ---------- Home slider ---------- */

.hs { padding-top: 28px; }
.hs-stage {
    position: relative; overflow: hidden; border-radius: 20px;
    aspect-ratio: 1600 / 600; max-height: 480px; min-height: 280px; background: var(--kobalt-ink);
    isolation: isolate;
}
.hs-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.hs-slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; z-index: 1; }
.hs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s ease; }
.hs-slide.is-active .hs-img { transform: scale(1); }
.hs-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 22, 48, .72) 0%, rgba(0, 22, 48, .38) 38%, rgba(0, 22, 48, 0) 62%); pointer-events: none; }
.hs-copy {
    position: absolute; z-index: 2; left: clamp(24px, 5vw, 64px); top: 50%; transform: translateY(-50%);
    max-width: min(46%, 520px); color: #fff;
}
.hs-copy h2 { font-size: clamp(26px, 3.4vw, 46px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; }
.hs-copy p { font-size: clamp(15px, 1.3vw, 18px); color: rgba(255,255,255,.86); margin-top: 14px; line-height: 1.5; }
.hs-copy .btn { margin-top: 26px; }
.hs-slide.is-active .hs-copy > * { animation: hs-in .6s ease both; }
.hs-slide.is-active .hs-copy > :nth-child(2) { animation-delay: .08s; }
.hs-slide.is-active .hs-copy > :nth-child(3) { animation-delay: .16s; }
@keyframes hs-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.hs-cover { position: absolute; inset: 0; z-index: 2; }
.hs-nav {
    position: absolute; z-index: 3; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 4px;
    padding: 4px; border-radius: 999px; background: rgba(0, 22, 48, .55); backdrop-filter: blur(8px); color: #fff;
}
.hs-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.hs-btn:hover { background: rgba(255,255,255,.16); }
.hs-btn svg { width: 20px; height: 20px; }
.hs-count { font-size: 13px; font-variant-numeric: tabular-nums; padding: 0 6px; color: rgba(255,255,255,.75); }
.hs-count b { color: #fff; }

.hs-thumbs { display: grid; grid-template-columns: repeat(var(--hs-count), minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.hs-thumb {
    position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; text-align: left;
    padding: 8px 12px 12px 8px; border-radius: 12px; border: 1px solid var(--cizgi); background: var(--beyaz); cursor: pointer;
    color: var(--soluk); overflow: hidden;
}
.hs-thumb:hover { border-color: var(--cizgi-koyu); color: var(--gece); }
.hs-thumb img { width: 76px; height: 44px; object-fit: cover; object-position: 75% 50%; border-radius: 7px; opacity: .8; }
.hs-thumb-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hs-thumb.is-active { border-color: var(--kobalt-ink); color: var(--gece); box-shadow: 0 0 0 1px var(--kobalt-ink); }
.hs-thumb.is-active img { opacity: 1; }
.hs-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--kagit); }
.hs-bar span { display: block; height: 100%; width: 0; background: var(--turuncu); }
.hs-thumb.is-active .hs-bar span { width: 100%; }
.hs.is-auto .hs-thumb.is-active .hs-bar span { width: 0; animation: hs-progress var(--hs-interval) linear forwards; }
.hs.is-paused .hs-thumb.is-active .hs-bar span { animation-play-state: paused; }
@keyframes hs-progress { from { width: 0; } to { width: 100%; } }

/* ---------- Category image grid ---------- */

.cbanners { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 14px; }
.cbanner { position: relative; display: block; aspect-ratio: var(--ratio, 4 / 5); border-radius: var(--r-lg); overflow: hidden; background: var(--kagit); }
.cbanner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cbanner:hover img, .cbanner:focus-visible img { transform: scale(1.04); }
.cbanner-label {
    position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
}
.cbanner-label strong { font-family: var(--font-display); font-size: 17px; line-height: 1.2; color: var(--gece); }
.cbanner-label span { font-size: 12.5px; color: var(--soluk); white-space: nowrap; }
.cbanner:hover .cbanner-label strong { color: var(--kobalt); }
.home-end { height: 72px; }

@media (max-width: 980px) {
    .cbanners { grid-template-columns: repeat(min(var(--cols, 4), 3), minmax(0, 1fr)); }
    .hs-thumbs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 220px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
    .hs-thumb { scroll-snap-align: start; }
}
@media (max-width: 640px) {
    .hs { padding-top: 16px; }
    .hs-stage { aspect-ratio: 4 / 5; max-height: 520px; border-radius: 16px; }
    .hs-slide::after { background: linear-gradient(0deg, rgba(0, 22, 48, .96) 0%, rgba(0, 22, 48, .88) 42%, rgba(0, 22, 48, .2) 68%, rgba(0, 22, 48, 0) 80%); }
    .hs-img { height: 62%; object-position: 78% 50%; }
    .hs-copy { top: auto; bottom: 72px; transform: none; max-width: none; right: 20px; left: 20px; }
    .hs-nav { right: 12px; bottom: 12px; }
    .cbanners { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cbanner-label { left: 8px; right: 8px; bottom: 8px; padding: 10px; flex-direction: column; align-items: flex-start; gap: 2px; }
    .cbanner-label strong { font-size: 15px; }
    .hs-thumbs { grid-auto-columns: 180px; }
}

/* ---------- Filters (shared) ---------- */

.filter-top { display: flex; justify-content: space-between; align-items: center; }
.filter-top h3 { margin: 0 !important; font-size: 15px !important; }
.filter .opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter .opt-logo { width: 44px; height: 20px; object-fit: contain; flex: none; }
.filter .opt[hidden] { display: none; }
.filter-tree a .n { font-size: 12px; color: var(--cizgi-koyu); font-weight: 600; }
.facet-list { max-height: 248px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; }
.facet-search { height: 36px; font-size: 14px; margin-bottom: 8px; }
.bands { display: grid; gap: 2px; margin-bottom: 12px; }
.bands a { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; color: var(--gece); }
.bands a:hover { color: var(--kobalt); }
.bands .radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--cizgi-koyu); flex: none; }
.bands a[aria-current="true"] { font-weight: 700; }
.bands a[aria-current="true"] .radio { border-color: var(--kobalt); box-shadow: inset 0 0 0 3px var(--beyaz); background: var(--kobalt); }
.bands .n { margin-left: auto; color: var(--soluk); font-size: 12px; }
.filter .price-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.filter .price-range .btn { grid-column: 1 / -1; }
.filter .price-range .input { height: 38px; padding: 0 10px; font-size: 14px; min-width: 0; }
.filter .price-range > span { color: var(--soluk); }
.filter .price-range .btn { height: 38px; padding: 0 12px; }
.price-hint { font-size: 12px; color: var(--soluk); margin-top: 8px; }
.toolbar-right { display: flex; gap: 8px; align-items: center; }
.chip.is-clear { background: none; color: var(--soluk); text-decoration: underline; }

/* Brand logos above a category listing */
.brand-pills { display: flex; gap: 10px; overflow-x: auto; padding: 0 0 18px; scrollbar-width: none; }
.brand-pills::-webkit-scrollbar { display: none; }
.brand-pill { flex: none; display: grid; place-items: center; height: 52px; min-width: 116px; padding: 8px 14px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-md); }
.brand-pill:hover { border-color: var(--kobalt); }
.brand-pill img { height: 32px; width: 96px; object-fit: contain; }
.brand-pill span { font-weight: 700; font-size: 14px; }

/* ---------- Brands ---------- */

.brand-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.brand-grid.is-featured { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.brand-card { display: flex; flex-direction: column; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-md); overflow: hidden; }
.brand-card:hover { border-color: var(--kobalt); box-shadow: 0 6px 18px -10px rgba(11, 42, 91, .35); }
.brand-card[hidden] { display: none; }
.brand-logo { display: grid; place-items: center; aspect-ratio: 5 / 2; padding: 14px 18px; background: var(--beyaz); }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.is-featured .brand-logo { aspect-ratio: 2 / 1; padding: 20px 28px; }
.brand-initials { width: 56px; height: 56px; border-radius: 14px; background: var(--kagit); color: var(--soluk); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.brand-initials.is-lg { width: 96px; height: 96px; font-size: 34px; border-radius: 20px; }
.brand-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--cizgi); background: var(--kagit); }
.brand-meta strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-meta span { font-size: 12px; color: var(--soluk); flex: none; }

.brand-find { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; width: min(320px, 100%); background: var(--beyaz); border: 1px solid var(--cizgi-koyu); border-radius: var(--r-sm); }
.brand-find:focus-within { border-color: var(--kobalt); box-shadow: 0 0 0 3px var(--kobalt-soft); }
.brand-find svg { width: 18px; height: 18px; color: var(--soluk); }
.brand-find input { border: 0; background: none; flex: 1; min-width: 0; font-size: 15px; }
.brand-find input:focus { outline: none; }
.brands-featured { margin-bottom: 28px; }
.az { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-md); position: sticky; top: 128px; z-index: 5; }
.az a { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); font-weight: 700; font-size: 14px; color: var(--gece); }
.az a:hover { background: var(--kobalt-soft); color: var(--kobalt-ink); }
.az-groups { padding: 8px 0 72px; }
.az-group { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--cizgi); scroll-margin-top: 200px; }
.az-group[hidden] { display: none; }
.az-group h2 { font-size: 34px; font-weight: 800; color: var(--kobalt); }
.az-group .brand-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.brand-hero { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 28px; align-items: center; margin-top: 16px; padding: 24px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); }
.brand-hero-logo { display: grid; place-items: center; aspect-ratio: 5 / 2; padding: 12px; border: 1px solid var(--cizgi); border-radius: var(--r-md); }
.brand-hero-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-hero-text h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.brand-hero-text p { color: var(--soluk); margin-top: 6px; max-width: 60ch; }
.brand-hero-text .link { display: inline-block; margin-top: 8px; font-size: 14px; }
.brand-stats { display: grid; grid-template-columns: repeat(4, auto); margin: 0; border-left: 1px solid var(--cizgi); }
.brand-stats div { padding: 4px 22px; }
.brand-stats div + div { border-left: 1px solid var(--cizgi); }
.brand-stats dt { font-size: 12.5px; color: var(--soluk); white-space: nowrap; }
.brand-stats dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.pdp-brand { display: inline-flex; align-items: center; gap: 10px; }
.pdp-brand-logo { height: 28px; width: auto; max-width: 110px; object-fit: contain; }
.store-about-line { margin-top: 14px; color: var(--soluk); max-width: 80ch; }

/* Home: brand strip (auto-scrolling marquee) */
.brand-strip { overflow: hidden; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-lg); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.brand-strip-track { display: flex; width: max-content; animation: brand-marquee 40s linear infinite; }
.brand-strip:hover .brand-strip-track, .brand-strip:focus-within .brand-strip-track { animation-play-state: paused; }
.brand-strip-item { display: grid; place-items: center; width: 180px; height: 96px; padding: 18px 26px; border-right: 1px solid var(--cizgi); }
.brand-strip-item img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.brand-strip-item:hover img, .brand-strip-item:focus-visible img { filter: none; opacity: 1; }
@keyframes brand-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .brand-strip { overflow-x: auto; } .brand-strip-track { animation: none; } }

@media (max-width: 1180px) {
    .brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .az-group .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .brand-hero { grid-template-columns: 180px minmax(0, 1fr); }
    .brand-stats { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--cizgi); padding-top: 16px; grid-template-columns: repeat(4, 1fr); }
    .brand-stats div:first-child { padding-left: 0; }
}
@media (max-width: 640px) {
    .brand-grid, .brand-grid.is-featured, .az-group .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .az-group { grid-template-columns: 1fr; gap: 8px; }
    .az { top: 116px; overflow-x: auto; flex-wrap: nowrap; }
    .brand-hero { grid-template-columns: 1fr; padding: 18px; gap: 16px; }
    .brand-hero-logo { max-width: 200px; }
    .brand-stats { grid-template-columns: repeat(2, 1fr); }
    .brand-stats div { padding: 8px 0; }
    .brand-stats div + div { border-left: 0; }
    .brand-hero-text h1 { font-size: 26px; }
}

/* ---------- Footer ---------- */

.footer { background: var(--kobalt-ink); color: #B7C1DC; margin-top: 0; font-size: 14px; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding: 56px 20px 40px; }
.footer .logo { color: #fff; }
.footer h4 { font-family: var(--font-body); font-size: 14px; color: #fff; font-weight: 700; margin-bottom: 14px; }
.footer li { padding: 4px 0; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-about p { margin-top: 14px; max-width: 34ch; line-height: 1.6; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom .wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; font-size: 13px; }
.pay-logos { display: flex; gap: 8px; }
.pay-logos span { border: 1px solid rgba(255,255,255,.18); border-radius: 4px; padding: 2px 8px; font-size: 12px; font-weight: 700; color: #DCE2F2; }

/* ---------- Mobile drawer ---------- */

.drawer { position: fixed; inset: 0; z-index: 80; display: none; }
.drawer.is-open { display: block; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(15, 26, 58, .5); }
.drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(360px, 88vw); background: var(--beyaz); overflow-y: auto; padding: 18px; display: grid; align-content: start; gap: 10px; }
.drawer-panel details { border-bottom: 1px solid var(--cizgi); }
.drawer-panel summary { padding: 14px 4px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.drawer-panel summary::-webkit-details-marker { display: none; }
.drawer-panel summary::after { content: '+'; color: var(--soluk); font-size: 20px; line-height: 1; }
.drawer-panel details[open] summary::after { content: '−'; }
.drawer-panel details ul { padding: 0 4px 14px 12px; }
.drawer-panel details li a { display: block; padding: 7px 0; color: var(--soluk); font-size: 15px; }
.drawer-close { justify-self: end; border: 0; background: var(--kagit); border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 22px; }

.maint { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.maint h1 { font-size: 40px; margin: 20px 0 12px; }
.maint p { color: var(--soluk); max-width: 48ch; margin: 0 auto; }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
    .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mega-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .header-actions .hact small { display: none; }
    .footer-top { grid-template-columns: 1fr 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
    .logo img { height: 44px; }
}

@media (max-width: 980px) {
    .header-main { grid-template-columns: auto 1fr auto; gap: 12px; height: auto; padding: 12px 0; }
    .menu-toggle { display: block; }
    .search { grid-column: 1 / -1; order: 3; max-width: none; }
    .search select { display: none; }
    .hact .lbl { display: none; }
    .catbar { display: none; }
    .hero-grid { grid-template-columns: 1fr; gap: 36px; padding: 44px 16px 48px; }
    .catalog, .cart, .apply, .pdp, .store-layout { grid-template-columns: 1fr; }
    .store-side { position: static; }
    .store-head { grid-template-columns: auto minmax(0, 1fr); }
    .store-search { grid-column: 1 / -1; }
    .store-stats { grid-template-columns: repeat(2, 1fr); }
    .store-stats div:nth-child(3) { border-left: 0; }
    .store-stats div:nth-child(n+3) { border-top: 1px solid var(--cizgi); }
    .filters { position: fixed; inset: 0 20% 0 0; z-index: 90; max-height: none; border-radius: 0; display: none; }
    .filters.is-open { display: block; }
    .filters-toggle { display: inline-flex; }
    .gallery { position: static; }
    .summary, .apply-aside { position: static; }
    .grid-products, .grid-products.cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .shelf { grid-template-columns: 1fr; }
    .shelf-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .join-band { grid-template-columns: 1fr; padding: 32px; }
    .services { grid-template-columns: 1fr 1fr; }
    .service:nth-child(3) { border-left: 0; }
    .service:nth-child(n+3) { border-top: 1px solid var(--cizgi); }
    .dealers-grid { grid-template-columns: 1fr 1fr; }
    .auth { grid-template-columns: 1fr; margin: 20px auto 56px; }
}

@media (max-width: 640px) {
    .wrap { padding: 0 16px; }
    .hero-grid { padding: 36px 16px 44px; }
    .utility-promo { display: none; }
    .logo img { height: 38px; }
    .utility .wrap { justify-content: flex-end; }
    .grid-products, .grid-products.cols-4, .grid-products.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bazaar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bazaar-sign:nth-child(3n+2) { transform: none; }
    .bazaar-sign:nth-child(2n) { transform: translateY(16px); }
    .steps { grid-template-columns: 1fr; }
    .fieldset .grid, .cat-picks { grid-template-columns: 1fr; }
    .dealers-grid { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .section-head h2 { font-size: 24px; }
    .page-head h1 { font-size: 28px; }
    .pdp-info h1 { font-size: 26px; }
    .store-head { padding: 0 18px 18px; gap: 14px; }
    .store-mono { width: 68px; height: 68px; margin-top: -34px; font-size: 24px; border-radius: 16px; }
    .store-title h1 { font-size: 24px; }
    .store-stats div { padding: 12px 18px; }
    .gallery { grid-template-columns: 1fr; }
    .gallery-thumbs { grid-auto-flow: column; grid-auto-columns: 64px; order: 2; }
    .cart-line { grid-template-columns: 64px 1fr; }
    .cart-line .right { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; align-items: center; }
    .seller-facts { grid-template-columns: 1fr; }
    .seller-facts div + div { border-left: 0; border-top: 1px solid var(--cizgi); }
    .card-seller .city { display: none; }
    .services { grid-template-columns: 1fr; }
    .service + .service { border-left: 0; border-top: 1px solid var(--cizgi); }
    .orders-table th:nth-child(3), .orders-table td:nth-child(3) { display: none; }
    .auth-form, .auth-side, .done { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Design refinements (spacing rhythm, colour harmony, polish)
   One vertical rhythm for the home page: every block is separated by the same
   --sec gap, the slider sits a step closer to the hero it belongs with.
   ========================================================================== */

:root { --sec: 72px; --sec-tight: 40px; }

/* Home sections: one gap between blocks (previously 72 + 56 stacked, or 28 under the hero). */
.home-flow .section { padding: var(--sec) 0 0; }
.home-flow .section:last-of-type { padding-bottom: 0; }
.home-flow > .hs { padding-top: var(--sec-tight); }
.home-flow > .hs:first-child { padding-top: 32px; }
.home-flow > .hero + .hs { padding-top: var(--sec-tight); }
.home-flow > .hs + .wrap > .section { padding-top: 56px; }
.home-end { height: var(--sec); }

.section-head { margin-bottom: 24px; align-items: flex-end; }
.section-head h2 { font-size: 28px; letter-spacing: -0.02em; }
.section-head p { font-size: 15px; }
.section-head .more { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; }
.section-head .more::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); margin-left: 2px; transition: transform .15s; }
.section-head .more:hover { text-decoration: none; }
.section-head .more:hover::after { transform: translateX(3px) rotate(45deg); }

/* Header lifts off the page once scrolled */
.header { transition: box-shadow .2s ease; }
.header.is-scrolled { box-shadow: 0 6px 20px -12px rgba(10, 28, 54, .35); border-bottom-color: transparent; }

/* Hero: the two columns of picks line up instead of the staggered offset */
.hero-pick:nth-child(even) { transform: none; }
.hero-picks { align-content: center; }
.hero-pick { transition: border-color .15s, box-shadow .15s; }
.hero-pick:hover { box-shadow: 0 10px 24px -16px rgba(11, 59, 120, .45); }

/* Slider: thumbnails breathe a little away from the stage; active state in brand navy, not a double outline */
.hs-thumbs { margin-top: 16px; gap: 14px; }
.hs-thumb { transition: border-color .15s, color .15s, background-color .15s; }
.hs-thumb.is-active { border-color: var(--kobalt); box-shadow: none; background: var(--kobalt-soft); }
.hs-thumb.is-active .hs-bar { background: color-mix(in srgb, var(--kobalt) 14%, white); }

/* Colour harmony: category icons and product placeholders use the brand palette, not a hue per category */
.cat-tile { --tint: var(--kobalt) !important; transition: border-color .15s, box-shadow .15s; }
.cat-tile:hover { border-color: var(--kobalt); box-shadow: 0 10px 24px -18px rgba(11, 59, 120, .55); }
.cat-tile:hover .ico { background: var(--turuncu-soft); color: var(--turuncu-ink); }
.cat-tile .ico { transition: background-color .15s, color .15s; }
.thumb { background: #F1F4F9; }
.thumb img { opacity: .9; }
.thumb.is-photo { background: var(--beyaz); }
.thumb.is-photo img { opacity: 1; }

/* Product cards: a clear lift on hover, room for the price, a quiet seller line */
.card { transition: border-color .15s, box-shadow .2s, transform .2s; }
.card:hover { border-color: var(--cizgi-koyu); box-shadow: 0 14px 30px -22px rgba(10, 28, 54, .5); }
@media (hover: hover) { .card:hover { transform: translateY(-2px); } }
.card-body { padding: 14px 14px 12px; }
.card-brand { letter-spacing: .01em; }
.price-row { margin-top: auto; padding-top: 4px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.badge { box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.card-seller { box-shadow: none; background: #FAFBFD; }
.card-seller:hover { background: var(--kobalt-soft); }
.card-seller .mono { border-radius: 6px; }
.shelf-products .card:hover { transform: none; box-shadow: none; }

/* Category image grid labels: a touch more contrast and a hover cue */
.cbanner { transition: box-shadow .2s; }
.cbanner:hover { box-shadow: 0 16px 34px -24px rgba(10, 28, 54, .55); }
.cbanner-label { box-shadow: 0 2px 8px rgba(10, 28, 54, .08); }

/* Trust strip sits closer to what it reassures about */
.home-flow .services { margin-top: 0; }
.service svg { color: var(--kobalt); }

/* Footer brand line and spacing */
.footer-top { padding-top: 64px; padding-bottom: 48px; }
.footer .logo img { height: 52px; }
.footer-about p { color: #B7C1DC; }

/* Reduced motion: no lifts or transitions */
@media (prefers-reduced-motion: reduce) {
    .card, .card:hover, .cat-tile, .hero-pick, .cbanner img, .header { transition: none !important; transform: none !important; }
}

@media (max-width: 980px) {
    :root { --sec: 56px; --sec-tight: 28px; }
    .home-flow > .hs + .wrap > .section { padding-top: 44px; }
}
@media (max-width: 640px) {
    :root { --sec: 44px; --sec-tight: 20px; }
    .home-flow > .hs:first-child { padding-top: 16px; }
    .home-flow > .hs + .wrap > .section { padding-top: 36px; }
    .section-head { margin-bottom: 16px; }
    .section-head h2 { font-size: 22px; }
    .section-head p { font-size: 14px; }
    .hs-thumbs { margin-top: 12px; gap: 10px; grid-auto-columns: 168px; }
    .hs-thumb { grid-template-columns: 52px 1fr; gap: 8px; padding: 6px 10px 9px 6px; }
    .hs-thumb img { width: 52px; height: 36px; }
    .hs-thumb-title { font-size: 12.5px; }
    /* Keep the artwork clear of the headline: image in the top half, copy on the dark lower half */
    .hs-img { height: 54%; }
    .hs-slide::after { background: linear-gradient(0deg, rgba(0, 22, 48, 1) 0%, rgba(0, 22, 48, .96) 44%, rgba(0, 22, 48, .35) 58%, rgba(0, 22, 48, 0) 70%); }
    .hs-copy { bottom: 68px; }
    .hs-copy h2 { font-size: 26px; }
}