/* ==========================================================================
   lastik34.com — mağaza (B2C) stil dosyası
   Tek dosya, derleme adımı yok. Panel tarafındaki derlenmiş Tailwind
   (b2b/public/assets/css/app.css) burada BİLEREK kullanılmaz: mağaza herkese
   açık ve SEO/performans odaklı, panel ise ağır bir arayüz kütüphanesi.
   ========================================================================== */

:root {
    --brand: #dc2626;
    --brand-dark: #b91c1c;
    --brand-soft: #fef2f2;
    --ink: #0f172a;
    --ink-2: #334155;
    --muted: #64748b;
    --line: #e2e8f0;
    --line-2: #cbd5e1;
    --bg: #f8fafc;
    --white: #fff;
    --ok: #059669;
    --warn: #b45309;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .18);
    --shadow-lg: 0 12px 40px -16px rgba(15, 23, 42, .35);
    --container: 1240px;
}

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

/* Tarayıcının [hidden] kuralı (display:none) sınıf seçicilerine yenilir:
   .formgrid { display: grid } yüzünden kasadaki gizli bölümler (kurumsal fatura
   alanları, kargo adresi) "hidden" olmasına rağmen ekranda kalıyordu. */
[hidden] { display: none !important; }

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

/* Alt bilgi sayfa kısa olsa da en altta durur ("yapışkan alt bilgi").
   Sepeti boş, 404, sipariş takibi gibi kısa sayfalarda footer ekranın
   ortasında kalıp altında boşluk bırakıyordu.

   Neden flex, grid değil: body'nin çocuk sayısı sabit değil (flash kutusu
   koşullu, karşılaştırma çubuğu ile toast'ları JS ekliyor). grid-template-rows
   ile satır ataması bu yüzden kayardı; flex'te yalnızca <main> büyür, diğer
   çocuklar kendi boyunda kalır — sayısı kaç olursa olsun.

   Konumlandırılmış öğeler (skip-link, .comparebar, .modal, toast) akış dışında
   olduğu için esnek öğe olmazlar; sticky başlık da sütun flex içinde çalışır. */
body {
    margin: 0;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Telefonda adres çubuğu 100vh'yi taşırıyor; destekleyen tarayıcıda dvh. */
    min-height: 100dvh;
}

/* flex: 1 0 auto — temel boyut "auto" kalır. `flex: 1` (basis 0) uzun
   sayfalarda içeriği yeniden ölçüp yerleşimi bozabiliyordu. */
main { flex: 1 0 auto; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 860px; }
.muted { color: var(--muted); }
.free { color: var(--ok); font-weight: 600; }

/* Ekran okuyucu bağlantısı. Eskiden left:-9999px ile gizleniyordu; bu, belgeyi
   sola doğru genişletip TÜM sayfalarda yatay kaydırma yaratıyordu. Görsel olarak
   gizleme artık kırpma ile yapılır, belge genişliğine dokunmaz. */
.skip-link {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    background: var(--ink); color: #fff; border-radius: 0 0 8px 0;
}
.skip-link:focus {
    position: fixed; left: 0; top: 0; z-index: 100;
    width: auto; height: auto; margin: 0; padding: 10px 16px;
    clip-path: none;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- üst çubuk */

.topbar {
    background: var(--ink);
    color: #cbd5e1;
    font-size: 12.5px;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar__links { display: flex; align-items: center; gap: 18px; margin-left: auto; }
/* Üst çubuk tek satır kalır: bağlantılar sarmaz, sığmayan öğe telefonda gizlenir. */
.topbar__links a { white-space: nowrap; }
.topbar__links a:hover { color: #fff; }
.topbar__phone { font-weight: 600; color: #fff; }
.topbar__b2b-short { display: none; }

/* Bayi girişi: üst çubuktaki yardım bağlantılarından ayrışsın diye çerçeveli. */
.topbar__b2b {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 11px; border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, .38); color: #e2e8f0; font-weight: 600;
    transition: background .15s, border-color .15s;
}
.topbar__b2b:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.topbar__b2b svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- başlık */

.header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.header__inner { display: flex; align-items: center; gap: 20px; padding-top: 14px; padding-bottom: 14px; }

.logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo__mark {
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 11px;
    background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .02em;
}
.logo__text { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.logo__text strong { color: var(--brand); font-weight: 700; }
.logo--footer .logo__text { color: #fff; }

/* min-width: 0 HER İKİ katmanda da gerekli. Yalnızca input'a verilince form,
   input'un iç genişliğinin (varsayılan size=20 ≈ 300px) altına inemiyor ve
   telefonda "Ara" düğmesi ekranın dışında kalıyordu. */
.search { flex: 1; display: flex; min-width: 0; max-width: 640px; }
.search input {
    flex: 1; min-width: 0;
    border: 1.5px solid var(--line-2); border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    padding: 11px 16px; font: inherit; font-size: 14px; background: var(--bg);
}
.search input:focus { outline: 0; background: #fff; border-color: var(--brand); }
.search button {
    display: inline-flex; align-items: center; gap: 7px;
    border: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--brand); color: #fff; padding: 0 20px; font-weight: 600; cursor: pointer;
}
.search button:hover { background: var(--brand-dark); }
.search svg { width: 18px; height: 18px; }

.header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.btn-ghost {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; font-weight: 500;
}
.btn-ghost:hover { border-color: var(--line-2); background: var(--bg); }
.btn-ghost svg { width: 17px; height: 17px; color: #25d366; }

.cart-btn {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: var(--radius-sm);
    background: var(--ink); color: #fff; font-weight: 600; font-size: 14px;
}
.cart-btn:hover { background: #1e293b; }
.cart-btn svg { width: 19px; height: 19px; }
.cart-btn__badge {
    min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px;
    background: var(--brand); display: grid; place-items: center;
    font-size: 12px; font-weight: 700;
}
.cart-btn__badge.is-empty { display: none; }

.menu-toggle {
    display: none; flex-direction: column; gap: 4px; justify-content: center;
    width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: #fff; cursor: pointer; padding: 0 11px;
}
.menu-toggle span { height: 2px; background: var(--ink); border-radius: 2px; }

/* Kategori çubuğu: koyu kırmızı zeminli, açılır panelli (mega menü).
   Panel .mainnav'ın dışına taşar, bu yüzden çubuk overflow kesmez —
   telefonda dikey açılan menüye dönüşür (bkz. duyarlı bölüm). */
/* Panel çubuğun TAMAMINA yayılır, sekmenin altına değil. Bu yüzden konum
   çıpası .mainnav'dır: sekmeye göre hizalanıp 100vw genişletilseydi, soldaki
   sekmelerde panel ekranın dışına taşıp yatay kaydırma açardı. */
.mainnav { position: relative; background: var(--brand); border-top: 1px solid rgba(0, 0, 0, .08); }
.mainnav__inner { display: flex; align-items: stretch; gap: 0; }

.mainnav__item { display: flex; }
.mainnav__item--end { margin-left: auto; }

.mainnav__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 13px 15px; font-size: 13.5px; font-weight: 600; color: #fff;
    text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
    border-bottom: 3px solid transparent; transition: background .15s;
}
.mainnav__link:hover { background: rgba(0, 0, 0, .14); color: #fff; }
.mainnav__link.is-active { background: rgba(0, 0, 0, .18); border-bottom-color: #fff; }
.mainnav__link--muted { font-weight: 500; text-transform: none; color: rgba(255, 255, 255, .82); }
.mainnav__caret { width: 13px; height: 13px; opacity: .8; transition: transform .15s; }

/* --------------------------------------------------------------- mega menü */

.mega {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s, transform .16s, visibility .16s;
}
.mainnav__item.has-mega:hover .mega,
.mainnav__item.has-mega.is-open .mega {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.mainnav__item.has-mega:hover > .mainnav__link,
.mainnav__item.has-mega.is-open > .mainnav__link { background: rgba(0, 0, 0, .18); }
.mainnav__item.has-mega:hover .mainnav__caret,
.mainnav__item.has-mega.is-open .mainnav__caret { transform: rotate(180deg); }

.mega__inner {
    display: grid; grid-template-columns: 1fr 1.15fr 1.15fr 300px; gap: 32px;
    padding-top: 26px; padding-bottom: 28px;
}
.mega__col { min-width: 0; }
.mega__col h3 {
    font-size: 13px; font-weight: 700; color: var(--brand);
    margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.mega__h-gap { margin-top: 20px; }
/* minmax(0, 1fr) ŞART: varsayılan `auto` sütun içeriğin max-content genişliğine
   büyür, uzun ürün adı sütunu taşırıp yandaki sütunun üstüne biner —
   bağlantıdaki overflow:hidden de bu yüzden hiç devreye girmez. */
.mega__list { display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); }
.mega__list--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
.mega__list li { min-width: 0; }
.mega__list a {
    display: block; padding: 5px 0; font-size: 13.5px; color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mega__list a:hover { color: var(--brand); }

.mega__promo { display: grid; gap: 12px; align-content: start; }
.mega__card {
    display: grid; gap: 5px; padding: 16px 18px; border-radius: var(--radius);
    background: linear-gradient(135deg, #0f172a, #7f1d1d); color: #fff;
}
.mega__card strong { font-size: 15px; }
.mega__card > span { font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.mega__card--soft { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.mega__card--soft > span { color: var(--muted); }
.mega__cta { font-weight: 700; font-size: 13px !important; color: #fff !important; margin-top: 4px; }
.mega__card--soft .mega__cta { color: var(--brand) !important; }

/* ---------------------------------------------------------------- düğmeler */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
    font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s;
    text-align: center;
}
.btn svg { width: 17px; height: 17px; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); }
.btn--outline { background: #fff; border-color: var(--line-2); color: var(--ink); }
.btn--outline:hover { border-color: var(--ink-2); }
.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--bg); }
.btn--wa { background: #25d366; color: #fff; }
.btn--wa:hover { background: #1eb955; }
.btn--sm { padding: 8px 13px; font-size: 13px; }
.btn--lg { padding: 14px 26px; font-size: 15px; }
.btn--block { display: flex; width: 100%; }
.btn--grow { flex: 1; }

/* ---------------------------------------------------------------- uyarılar */

.alert {
    border-radius: var(--radius-sm); padding: 12px 16px; margin: 16px 0;
    font-size: 14px; border: 1px solid transparent;
}
.alert--success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert--error { background: var(--brand-soft); border-color: #fecaca; color: #991b1b; }
.alert--info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

/* ---------------------------------------------------------------- hero */

.hero {
    position: relative;
    background: linear-gradient(135deg, #0b1220 0%, #1e293b 45%, #7f1d1d 100%);
    color: #fff; overflow: hidden;
}
/* Arka plandaki lastik izi dokusu: tek bir konik degrade, ek istek yok. */
.hero::after {
    content: ""; position: absolute; right: -120px; top: -80px;
    width: 520px; height: 520px; border-radius: 50%;
    background:
        repeating-conic-gradient(rgba(255, 255, 255, .05) 0deg 6deg, transparent 6deg 12deg);
    mask: radial-gradient(circle, transparent 34%, #000 35%, #000 68%, transparent 69%);
    -webkit-mask: radial-gradient(circle, transparent 34%, #000 35%, #000 68%, transparent 69%);
    pointer-events: none;
}
.hero__inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 44px; align-items: center;
    padding-top: 54px; padding-bottom: 66px;
}
.hero__copy { min-width: 0; }
.hero__eyebrow {
    display: inline-block; padding: 5px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .13); font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
    margin-bottom: 18px;
}
.hero h1 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 14px; }
.hero p { color: rgba(255, 255, 255, .82); max-width: 46ch; font-size: 15.5px; margin: 0; }

/* ---------------------------------------------------------------- lastik bulucu */

.finder {
    background: #fff; color: var(--ink);
    border-radius: 18px; box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.finder__tabs { display: flex; background: #f1f5f9; border-bottom: 1px solid var(--line); }
.finder__tab {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 14px 8px; border: 0; background: transparent; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--muted);
    border-bottom: 3px solid transparent; transition: color .15s, background .15s;
}
.finder__tab svg { width: 17px; height: 17px; }
.finder__tab:hover { color: var(--ink); }
.finder__tab.is-active { background: #fff; color: var(--brand); border-bottom-color: var(--brand); }

.finder__panel { padding: 20px; display: grid; gap: 14px; }
.finder__fields { display: grid; gap: 10px; }
.finder__fields--4 { grid-template-columns: repeat(4, 1fr); }
.finder__fields--2 { grid-template-columns: repeat(2, 1fr); }
.finder__panel label { display: block; min-width: 0; }
.finder__panel label > span {
    display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); margin-bottom: 5px;
}
.finder__panel select,
.finder__panel input[type="search"] {
    width: 100%; padding: 12px 12px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--line-2); font: inherit; font-size: 14px;
    background: #fff; color: var(--ink);
}
.finder__panel select:focus,
.finder__panel input[type="search"]:focus { outline: 0; border-color: var(--brand); }
/* Bağlı kutular: üst seçim yapılmadan alt kutu seçilemez. */
.finder__panel select:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }
.finder__hint {
    margin: 0; padding: 12px 20px; background: var(--bg); border-top: 1px solid var(--line);
    font-size: 12.5px; color: var(--muted);
}

/* ---------------------------------------------------------------- USP şeridi */

.usp {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    margin: -34px 0 0; position: relative; z-index: 2;
}
.usp li {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 18px; box-shadow: var(--shadow);
}
.usp__icon {
    display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 9px;
    border-radius: 10px; background: var(--brand-soft); color: var(--brand);
}
.usp__icon svg { width: 19px; height: 19px; }
.usp strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.usp span { font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------- kategori kutuları */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.tile {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 18px; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tile:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.tile__icon {
    display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 12px; background: var(--bg); color: var(--ink-2);
}
.tile__icon svg { width: 24px; height: 24px; }
.tile__body { display: grid; gap: 2px; min-width: 0; }
.tile__body strong { font-size: 15px; }
.tile__body > span { font-size: 12.5px; color: var(--muted); }
.tile--summer .tile__icon { background: #fff7ed; color: #ea580c; }
.tile--winter .tile__icon { background: #eff6ff; color: #2563eb; }
.tile--all .tile__icon { background: #ecfdf5; color: #059669; }

/* ---------------------------------------------------------------- bölümler */

/* DİKKAT: yatay değer 'auto' kalmalı. `margin: 44px 0` yazıldığında
   `class="container section"` olan bölümler .container'ın `margin: 0 auto`
   merkezlemesini kaybedip sola yapışıyor, sayfa ortasındaki diğer bölümlerle
   hizasız duruyordu (geniş ekranda ~340px kayma). */
.section { margin: 44px auto; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section__head h2, .section__title { font-size: 21px; }
.section__title { margin-bottom: 16px; }
.section__more { color: var(--brand); font-weight: 600; font-size: 14px; white-space: nowrap; padding: 5px 0; }

/* Marka şeridi: logolar gri tonda durur, üzerine gelince renklenir —
   farklı markaların renkleri sayfayı dağıtmasın diye. */
.brandstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.brandstrip__item {
    display: grid; place-items: center; min-height: 78px; padding: 14px 16px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.brandstrip__item:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.brandstrip__item img {
    max-width: 110px; max-height: 40px; width: auto; height: auto; object-fit: contain;
    filter: grayscale(1); opacity: .72; transition: filter .18s, opacity .18s;
}
.brandstrip__item:hover img { filter: none; opacity: 1; }
.brandstrip__text { font-weight: 700; font-size: 14px; color: var(--ink-2); text-align: center; }
.brandstrip__item:hover .brandstrip__text { color: var(--brand); }

.infoblock {
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
}
.infoblock h2 { font-size: 18px; margin-bottom: 10px; }
.infoblock p { color: var(--ink-2); margin: 0; }
.steps { counter-reset: step; }
.steps li {
    counter-increment: step; position: relative; padding-left: 34px; margin-bottom: 10px; color: var(--ink-2);
}
.steps li::before {
    content: counter(step); position: absolute; left: 0; top: 1px;
    width: 24px; height: 24px; border-radius: 50%; background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
}

/* ---------------------------------------------------------------- ürün kartı */

.grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; display: flex; flex-direction: column;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow-lg); transform: translateY(-3px); }

/* Üst şerit: solda mevsim rozeti, sağda marka logosu. Yükseklik sabit
   tutulur ki logosu olmayan markada kart kısalıp ızgara bozulmasın. */
.card__top {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 38px; padding: 9px 12px 0;
}
.card__logo { max-width: 76px; max-height: 24px; width: auto; height: auto; object-fit: contain; }
.card__logo--text {
    font-size: 11px; font-weight: 700; color: var(--ink-2);
    text-transform: uppercase; letter-spacing: .04em;
    max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.season {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px 3px 6px; border-radius: 999px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
    background: var(--bg); color: var(--muted);
}
.season svg { width: 14px; height: 14px; }
.season--summer { background: #fff7ed; color: #c2410c; }
.season--winter { background: #eff6ff; color: #1d4ed8; }
.season--all { background: #ecfdf5; color: #047857; }

.card__media { position: relative; display: block; background: #fff; padding: 6px 14px 12px; }
.card__media img { width: 100%; height: 172px; object-fit: contain; transition: transform .2s; }
.card:hover .card__media img { transform: scale(1.04); }
.badge {
    position: absolute; top: 4px; left: 10px;
    padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
}
.badge--warn { background: #fef3c7; color: var(--warn); }
.badge--ok { background: #ecfdf5; color: var(--ok); }

.card__body { padding: 0 14px 14px; display: flex; flex-direction: column; flex: 1; }
.card__brand { font-size: 11.5px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; }
/* Ebat kartın en çok aranan bilgisi: kalın ve koyu, chip'lerden ayrışır. */
.card__size {
    display: inline-block; padding: 4px 10px; border-radius: 7px;
    background: var(--ink); color: #fff;
    font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
}
.card__title { font-size: 14px; font-weight: 600; margin: 8px 0 10px; }
/* padding: tek satırlık başlıklarda dokunma hedefi 16px kalıyordu. */
.card__title a {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; padding: 2px 0; min-height: 2.6em;
}
.card__title a:hover { color: var(--brand); }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip--stock { background: #ecfdf5; color: var(--ok); }

.chip {
    padding: 3px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600;
    background: #eef2ff; color: #3730a3;
}
.chip--soft { background: var(--bg); color: var(--muted); }
.chip--lg { padding: 6px 13px; font-size: 13.5px; }

/* Fiyat ve düğme yan yana konumlandığında dar kartlarda (telefonda 2 sütun →
   ~170px) düğme kartın dışına taşıyordu. Dikey dizilim her genişlikte güvenli. */
/* Teknik özellik şeridi (karşılaştır + endeksler + kargo).
   Kartın en dar hâlinde (telefonda iki sütun) sığmayan öğeler alt satıra
   iner; satır kaydırmaz, kırpmaz. */
.specrow {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin-top: auto; padding: 10px 0 2px;
    font-size: 11.5px; color: var(--muted);
}
.spec { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink-2); }
.spec svg { width: 15px; height: 15px; color: var(--muted); }
.spec--tag {
    padding: 2px 7px; border-radius: 5px; background: var(--bg);
    border: 1px solid var(--line); font-size: 10.5px; letter-spacing: .02em;
}
.spec--free { color: var(--ok); font-weight: 700; margin-left: auto; }

.compare { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.compare input { width: 14px; height: 14px; accent-color: var(--brand); margin: 0; }
.compare span { text-decoration: underline; text-underline-offset: 2px; }
.compare:hover span { color: var(--brand); }

.card__foot {
    display: grid; gap: 10px;
    padding-top: 12px; border-top: 1px solid var(--line);
}
.card__foot form { width: 100%; }
.card__foot .btn { width: 100%; }
.price__value { display: block; font-size: 20px; font-weight: 700; color: var(--brand); letter-spacing: -.02em; }
.price__note { display: block; font-size: 11px; color: var(--muted); }
.price__note strong { color: var(--ink-2); font-weight: 600; }

/* ------------------------------------------------------- karşılaştırma şeridi */

.comparebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 30px -14px rgba(15, 23, 42, .4);
    transform: translateY(100%); transition: transform .2s;
}
.comparebar.is-open { transform: translateY(0); }
.comparebar__inner {
    display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px;
}
.comparebar__items { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; overflow-x: auto; }
.comparebar__item {
    position: relative; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 6px 26px 6px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg); max-width: 240px;
}
.comparebar__item img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.comparebar__name {
    font-size: 12px; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.comparebar__x {
    position: absolute; top: 2px; right: 4px;
    border: 0; background: transparent; color: var(--muted); cursor: pointer;
    font-size: 17px; line-height: 1; padding: 2px 4px;
}
.comparebar__x:hover { color: var(--brand); }
.comparebar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ------------------------------------------------------- karşılaştırma tablosu */

.comparewrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.comparetable { width: 100%; border-collapse: collapse; min-width: 680px; }
.comparetable th, .comparetable td {
    padding: 12px 14px; text-align: left; font-size: 13.5px;
    border-bottom: 1px solid var(--line); vertical-align: middle;
}
.comparetable tbody tr:nth-child(odd) td,
.comparetable tbody tr:nth-child(odd) .comparetable__label { background: #fbfcfd; }
.comparetable__label {
    width: 160px; color: var(--muted); font-weight: 500; font-size: 12.5px;
    position: sticky; left: 0; background: #fff; z-index: 1;
}
.comparetable thead th { border-bottom: 2px solid var(--line); vertical-align: bottom; }
.comparetable__price td { padding-top: 16px; padding-bottom: 16px; }

.comparehead { display: grid; justify-items: center; gap: 7px; text-align: center; width: 100%; }
.comparehead__img { width: 100%; max-width: 130px; height: 110px; object-fit: contain; }
.comparehead__logo { max-width: 70px; max-height: 22px; width: auto; height: auto; object-fit: contain; }
.comparehead__name {
    font-size: 13px; font-weight: 600; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.comparehead:hover .comparehead__name { color: var(--brand); }

/* ---------------------------------------------------------------- liste sayfası */

.crumbs { font-size: 13px; color: var(--muted); padding: 18px 0 6px; }
.crumbs a:hover { color: var(--brand); }
.crumbs span { margin: 0 5px; }

.page-title { font-size: 26px; margin: 22px 0 18px; }

.listing__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 8px 0 18px; flex-wrap: wrap; }
.listing__title { font-size: 26px; }
.listing__count { font-size: 13.5px; color: var(--muted); margin: 4px 0 0; }
.listing__tools { display: flex; align-items: center; gap: 10px; }
.listing__tools .js-filter-toggle { display: none; }

.sortbox { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.sortbox select {
    padding: 9px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--line-2);
    background: #fff; font: inherit; font-size: 13.5px;
}

.activefilters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px; background: #fff;
    border: 1px solid var(--line-2); font-size: 13px; font-weight: 500;
}
.tag:hover { border-color: var(--brand); color: var(--brand); }
.tag span { font-size: 15px; line-height: 1; }
.tag--clear { background: var(--brand-soft); border-color: #fecaca; color: var(--brand); }

.listing { display: grid; grid-template-columns: 258px 1fr; gap: 24px; align-items: start; padding-bottom: 40px; }

/* Kenar çubuğu ekrandan uzun olduğunda (markası bol listelerde) sticky onu
   tepeye çiviler ve alt kısmı — Marka bloğu ile Filtrele düğmesi — hiçbir
   zaman görünmezdi: sayfayı kaydırmak sonsuz kaydırmayı tetikliyor ama
   çubuğu yerinden oynatmıyor. Bu yüzden panelin kendi kaydırma alanı var.
   overscroll-behavior: imleç panelin içindeyken listenin sonuna gelince
   kaydırma sayfaya atlamasın, yeni ürün yüklemesin. */
.filters {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px; position: sticky; top: 130px;
    max-height: calc(100vh - 146px); overflow-y: auto; overscroll-behavior: contain;
}
.filters__block { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.filters__block h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 11px; }
.filters__size { display: grid; gap: 9px; }
.filters__size label span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.filters__size select, .filters__price input {
    width: 100%; padding: 9px 11px; border-radius: 8px; border: 1.5px solid var(--line-2);
    font: inherit; font-size: 13.5px; background: #fff;
}
.filters__price { display: flex; align-items: center; gap: 8px; }
.filters__price span { color: var(--muted); }
.filters__radios { display: grid; gap: 4px; }
.filters__radios--scroll { max-height: 260px; overflow-y: auto; padding-right: 4px; }

.check { display: flex; align-items: flex-start; gap: 9px; padding: 5px 4px; border-radius: 7px; cursor: pointer; font-size: 13.5px; }
.check:hover { background: var(--bg); }
.check input { margin-top: 3px; accent-color: var(--brand); width: 15px; height: 15px; flex-shrink: 0; }
.check span { flex: 1; }
.check em { font-style: normal; color: var(--muted); font-size: 12px; }
.check--terms { font-size: 13px; margin: 14px 0 6px; align-items: flex-start; }
.check--terms a { color: var(--brand); text-decoration: underline; }
.check--terms.is-invalid { background: var(--brand-soft); }

.loadmore { display: flex; justify-content: center; margin: 28px 0; }

.empty {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 48px 24px; text-align: center;
}
.empty--tall { padding: 72px 24px; }
.empty h1, .empty h2 { font-size: 21px; margin-bottom: 8px; }
.empty p { color: var(--muted); max-width: 46ch; margin: 0 auto 20px; }
.empty__code { display: block; font-size: 56px; font-weight: 700; color: var(--brand); line-height: 1; margin-bottom: 8px; }
.empty__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- ürün detayı */

.product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 34px; align-items: start; margin-bottom: 12px; }
.product__media {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 28px; display: grid; place-items: center;
}
.product__media img { width: 100%; max-width: 460px; height: auto; object-fit: contain; }
.product__brand { font-size: 12.5px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .05em; }
.product__title { font-size: clamp(21px, 3vw, 28px); margin: 6px 0 14px; }
.product__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }

.product__price {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px; margin-bottom: 16px;
}
.product__price-value { display: block; font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--brand); }
.product__price-note { font-size: 13px; color: var(--muted); }
.product__price-break { display: block; font-size: 12.5px; color: var(--muted); margin-top: 6px; }

.stock { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 18px; }
.stock .dot { width: 9px; height: 9px; border-radius: 50%; }
.stock--ok { color: var(--ok); }
.stock--ok .dot { background: var(--ok); }
.stock--out { color: var(--muted); }
.stock--out .dot { background: var(--line-2); }

.product__buy { display: flex; gap: 12px; align-items: stretch; margin-bottom: 12px; }
.product__hint { font-size: 12.5px; color: var(--muted); }

/* align-items: stretch — düğmeler kutunun tam yüksekliğini kaplasın.
   'center' iken 30px kalıyor, parmakla isabet ettirmesi zordu. */
.qty { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.qty__btn { width: 40px; border: 0; background: transparent; font-size: 18px; color: var(--ink-2); cursor: pointer; }
.qty__btn:hover { background: var(--bg); }
.qty__input {
    width: 52px; border: 0; text-align: center; font: inherit; font-weight: 600; padding: 11px 0;
    -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product__perks { margin-top: 20px; display: grid; gap: 7px; }
.product__perks li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--ink-2); }
.product__perks li::before {
    content: ""; position: absolute; left: 4px; top: 8px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
}

.spectable { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.spectable th, .spectable td { padding: 12px 18px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--line); }
.spectable tr:last-child th, .spectable tr:last-child td { border-bottom: 0; }
.spectable th { width: 180px; color: var(--muted); font-weight: 500; background: var(--bg); }

/* ---------------------------------------------------------------- sepet */

.cart { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; padding-bottom: 44px; }
.cart__items { display: grid; gap: 12px; }

.cartline {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px; display: grid; gap: 14px; align-items: center;
    grid-template-columns: 84px 1fr auto auto 34px;
}
.cartline__media img { width: 84px; height: 84px; object-fit: contain; }
.cartline__name { font-weight: 600; font-size: 14.5px; }
.cartline__name:hover { color: var(--brand); }
.cartline__meta { display: flex; gap: 10px; font-size: 12.5px; color: var(--muted); margin: 3px 0; }
.cartline__unit { font-size: 12.5px; color: var(--muted); }
.cartline__qty { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cartline__update { border: 0; background: none; color: var(--brand); font-size: 12px; cursor: pointer; text-decoration: underline; padding: 7px 6px; }
.cartline__total { font-weight: 700; font-size: 16px; white-space: nowrap; }
.cartline__remove button {
    width: 32px; height: 32px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); cursor: pointer;
}
.cartline__remove button:hover { border-color: #fecaca; color: var(--brand); background: var(--brand-soft); }
.cartline__remove svg { width: 15px; height: 15px; }

.cart__summary, .panel {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
}

/* Art arda gelen paneller birbirine yapışmasın (iletişim, sipariş takibi,
   sipariş sonucu). Boşluk .panel'in KENDİSİNE verilmiyor: kasa ve hesap
   sayfalarında paneller `gap`li kapsayıcıların (.checkout__main,
   .account__main) içinde, oralarda çift boşluk oluşurdu. Bu yüzden yalnızca
   doğrudan .container çocuğu olan komşu paneller hedefleniyor.
   16px, .checkout__main'in gap değeriyle aynı. */
.container > .panel + .panel { margin-top: 16px; }
.cart__summary { position: sticky; top: 130px; }
.cart__summary h2, .panel__title { font-size: 16px; margin-bottom: 14px; }
.cart__freehint { font-size: 12.5px; color: var(--warn); background: #fffbeb; padding: 9px 12px; border-radius: 8px; }
.cart__secure { font-size: 12px; color: var(--muted); margin: 12px 0 0; text-align: center; }

.totals { margin: 4px 0 16px; }
.totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 14px; }
.totals dt { color: var(--muted); }
.totals dd { font-weight: 600; }
.totals__grand { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px !important; }
.totals__grand dt { color: var(--ink); font-weight: 600; font-size: 15px; }
.totals__grand dd { font-size: 20px; font-weight: 700; color: var(--brand); }

/* ---------------------------------------------------------------- kasa */

.checkout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; padding-bottom: 44px; }
.checkout__main { display: grid; gap: 16px; }
.panel--sticky { position: sticky; top: 130px; }

.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: block; }
.field--wide { grid-column: 1 / -1; }
.field > span { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: var(--ink-2); }
.field input, .field textarea, .field select {
    width: 100%; padding: 11px 13px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--line-2); font: inherit; font-size: 14px; background: #fff;
}
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--brand); }
.field input.is-invalid, .field textarea.is-invalid { border-color: var(--brand); background: var(--brand-soft); }
.field__error { display: block; font-style: normal; font-size: 12px; color: var(--brand); margin-top: 4px; }
.field textarea { resize: vertical; }

.optioncards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.optioncards--sm { max-width: 420px; }
.optioncard {
    position: relative; display: block; cursor: pointer;
    border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: 14px 16px; background: #fff;
}
.optioncard:hover { border-color: var(--ink-2); }
.optioncard.is-selected { border-color: var(--brand); background: var(--brand-soft); }
.optioncard input { position: absolute; opacity: 0; pointer-events: none; }
/* Radyo görsel olarak gizli; klavyeyle gezenler seçili kutuyu görebilsin. */
.optioncard:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.optioncard__title { display: block; font-weight: 600; font-size: 14px; }
.optioncard__desc { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.bankbox {
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 14px 16px; margin-bottom: 16px; font-size: 13.5px;
}
.bankbox strong { display: block; margin-bottom: 6px; }
.bankbox pre, .bankbox__pre {
    font-family: inherit; white-space: pre-wrap; margin: 0 0 6px; color: var(--ink-2); font-size: 13.5px;
}
.bankbox span { font-size: 12.5px; color: var(--muted); }
.bankbox__pre { background: var(--bg); padding: 14px 16px; border-radius: var(--radius-sm); }

.minilist { display: grid; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.minilist li { display: flex; align-items: center; gap: 10px; }
.minilist img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.minilist__name { flex: 1; font-size: 13px; line-height: 1.35; }
.minilist__name em { display: block; font-style: normal; color: var(--muted); font-size: 12px; }
.minilist__price { font-weight: 600; font-size: 13.5px; white-space: nowrap; }

/* ---------------------------------------------------------------- sipariş */

.success { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 28px; text-align: center; margin-bottom: 18px; }
.success__icon {
    width: 62px; height: 62px; border-radius: 50%; background: #ecfdf5; color: var(--ok);
    display: grid; place-items: center; margin: 0 auto 16px;
}
.success__icon svg { width: 30px; height: 30px; }
.success h1 { font-size: 24px; margin-bottom: 10px; }
.success p { color: var(--ink-2); max-width: 52ch; margin: 0 auto 8px; }
.success__track { font-size: 13.5px; }
.success__track a { color: var(--brand); text-decoration: underline; }
.success__actions { display: flex; gap: 10px; justify-content: center; margin: 22px 0 44px; flex-wrap: wrap; }

/* Geniş tablolar kendi kabında kayar; sayfanın kendisi asla yatay kaymaz. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }
.tablewrap > table { margin-bottom: 0; }

.ordertable { width: 100%; border-collapse: collapse; margin-bottom: 16px; min-width: 380px; }
.ordertable th, .ordertable td { padding: 10px 8px; text-align: left; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.ordertable th { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.ordertable td span.muted { display: block; font-size: 12px; }
.ordertable td:last-child, .ordertable th:last-child { text-align: right; }

.deflist { display: grid; gap: 2px; }
.deflist > div { display: flex; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.deflist > div:last-child { border-bottom: 0; }
.deflist dt { width: 140px; flex-shrink: 0; color: var(--muted); }
.deflist dd { flex: 1; }

.trackform { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.trackform .btn { height: 43px; }

.tracksteps { display: flex; margin: 4px 0 20px; }
.tracksteps li { flex: 1; text-align: center; position: relative; font-size: 12.5px; color: var(--muted); }
.tracksteps li::before {
    content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--line);
}
.tracksteps li:first-child::before { display: none; }
.tracksteps li.is-done::before { background: var(--ok); }
.tracksteps__dot {
    position: relative; z-index: 1; display: block; width: 20px; height: 20px; margin: 0 auto 7px;
    border-radius: 50%; background: #fff; border: 2px solid var(--line);
}
.tracksteps li.is-done .tracksteps__dot { background: var(--ok); border-color: var(--ok); }
.tracksteps li.is-done .tracksteps__label { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- metin sayfaları */

.prose h2 { font-size: 17px; margin: 22px 0 8px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); font-size: 14.5px; }
.prose ul li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.prose ul li::before { content: "•"; position: absolute; left: 6px; color: var(--brand); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; position: relative; padding-left: 26px; margin-bottom: 6px; }
.prose ol li::before { content: counter(n) "."; position: absolute; left: 4px; color: var(--brand); font-weight: 600; }
.prose a { color: var(--brand); text-decoration: underline; }

/* ---------------------------------------------------------------- alt bilgi */

.footer { background: var(--ink); color: #94a3b8; margin-top: 40px; }
.footer__grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 32px;
    padding-top: 44px; padding-bottom: 36px;
}
.footer__col h3 { font-size: 14px; color: #fff; margin-bottom: 14px; }
.footer__col ul { display: grid; gap: 8px; }
.footer__col a:hover { color: #fff; }
.footer__col li, .footer__col a { font-size: 13.5px; }
.footer__about { font-size: 13.5px; margin: 14px 0 16px; max-width: 40ch; }
.footer__contact li { line-height: 1.6; }
.footer__bar { border-top: 1px solid rgba(148, 163, 184, .18); }
.footer__bar-inner { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; font-size: 12.5px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- duyarlı */

/* --- Küçük masaüstü / yatay tablet (≤1080px) --- */
@media (max-width: 1080px) {
    .listing { grid-template-columns: 220px 1fr; }
    .cart, .checkout { grid-template-columns: 1fr 300px; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    /* Başlıkta arama kutusuna yer açmak için ikincil düğme gizlenir. */
    .header__wa { display: none; }
    /* Daralan filtre panelinde "En çok" yazısı kutuya sığmıyordu. */
    .filters__price input { padding-left: 8px; padding-right: 8px; font-size: 13px; }
}

/* --- Dikey tablet (≤900px) ---
   Menü ve filtre paneli hâlâ görünür; yalnızca dar alana sığmayan süsler kalkar.
   Bu aralık eskiden doğrudan telefon düzenine düşüyordu ve 820px'lik bir tablette
   hamburger menü + tek sütun liste çıkıyordu. */
@media (max-width: 1080px) {
    /* Bulucu kartı 480px'e sığmayınca metin sütunu eziliyordu. */
    .hero__inner { grid-template-columns: minmax(0, 1fr) 420px; gap: 30px; }
}

@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; text-align: center; padding-top: 34px; padding-bottom: 46px; }
    .hero p { margin-left: auto; margin-right: auto; }
    .hero::after { display: none; }
    .finder { text-align: left; }
    .usp { grid-template-columns: 1fr 1fr; margin-top: 20px; }
    .infoblock { grid-template-columns: 1fr; padding: 20px; }
    .product { grid-template-columns: 1fr; gap: 20px; }
    .cart-btn__label { display: none; }
    .topbar__item--hide-sm { display: none; }
    /* Üst çubuk daralınca bağlantılar tek satıra sığmıyordu: bayi rozetinde
       yalnızca eylem kalır ("B2B paneline giriş yapın"). */
    .topbar__b2b-long { display: none; }
    /* Sol taraftaki tanıtım yazısı gizlendiği için bağlantılar tüm genişliğe
       yayılır; sağa yapışıp sıkışmazlar. */
    .topbar__links { gap: 12px; margin-left: 0; width: 100%; justify-content: space-between; }
}

/* --- Dikey tablet, dar (≤820px) --- */
@media (max-width: 820px) {
    .cart, .checkout { grid-template-columns: 1fr; }
    .cart__summary, .panel--sticky { position: static; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* --- Telefon (≤720px) --- */
@media (max-width: 720px) {
    .header__inner { flex-wrap: wrap; }
    .search { order: 3; flex-basis: 100%; max-width: none; }
    .menu-toggle { display: flex; }
    .mainnav { display: none; }
    .mainnav.is-open { display: block; }
    .mainnav__inner { flex-direction: column; align-items: stretch; padding-bottom: 8px; }
    .mainnav__item { display: block; }
    .mainnav__item--end { margin-left: 0; }
    .mainnav__link {
        display: flex; justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, .16); border-left: 3px solid transparent;
    }
    .mainnav__link.is-active { border-left-color: #fff; }
    .mainnav__item--sm-only { display: block; }

    /* Telefonda mega menü akordeona döner: panel çubuğun içinde,
       başlığa dokununca açılır (hover yok). */
    .mega {
        position: static; transform: none;
        box-shadow: none; border-top: 0; border-radius: 0;
        display: none; opacity: 1; visibility: visible;
    }
    .mainnav__item.has-mega:hover .mega { display: none; }
    .mainnav__item.has-mega.is-open .mega { display: block; transform: none; }
    .mega__inner { grid-template-columns: 1fr; gap: 18px; padding-top: 16px; padding-bottom: 18px; }
    .mega__list--2 { grid-template-columns: 1fr; }
    .mega__promo { display: none; }

    .listing { grid-template-columns: 1fr; }
    .listing__tools .js-filter-toggle { display: inline-flex; }
    /* Telefonda panel açılır çekmece: sticky yok, dolayısıyla yükseklik
       sınırı da yok — akış içinde tam boyuyla açılır. */
    .filters { display: none; position: static; max-height: none; overflow: visible; }
    .filters.is-open { display: block; }

    /* Satır toplamı 34px'lik silme sütununa düşüp kırpılıyordu; üçüncü sütun
       artık içeriğe göre genişler, silme düğmesi sağa hizalanır. */
    .cartline {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        grid-template-areas: "img info del" "qty qty total";
        column-gap: 12px;
    }
    .cartline__media { grid-area: img; }
    .cartline__media img { width: 64px; height: 64px; }
    .cartline__info { grid-area: info; min-width: 0; }
    .cartline__name { overflow-wrap: anywhere; }
    .cartline__qty { grid-area: qty; flex-direction: row; align-items: center; gap: 10px; justify-self: start; }
    .cartline__total { grid-area: total; text-align: right; justify-self: end; white-space: nowrap; }
    .cartline__remove { grid-area: del; justify-self: end; }

    .formgrid, .optioncards { grid-template-columns: 1fr; }
    .trackform { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; gap: 24px; }
    /* auto-fill + minmax(160px) 360px'lik telefonlarda tek sütuna düşüyordu;
       sabit iki sütun her cihazda çalışır. */
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .card__top { min-height: 32px; padding: 8px 10px 0; }
    .card__logo { max-width: 60px; max-height: 20px; }
    /* Dar kartta rozet metni taşıyordu; yalnızca ikon kalır. */
    .season { padding: 3px 6px; }
    .season > span { display: none; }
    .card__media { padding: 4px 10px 10px; }
    .card__media img { height: 132px; }
    .card__title { font-size: 13px; }
    .card__size { font-size: 11.5px; padding: 3px 8px; }
    .price__value { font-size: 17px; }

    /* Bulucu: dört kutu iki sütuna iner, sekme yazıları küçülür. */
    .finder__fields--4 { grid-template-columns: repeat(2, 1fr); }
    .finder__tab { font-size: 12.5px; padding: 12px 4px; gap: 5px; }
    .finder__panel { padding: 16px; }
    .brandstrip { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
    .brandstrip__item { min-height: 66px; padding: 10px; }
    .brandstrip__item img { max-width: 84px; max-height: 32px; }
    .spectable th { width: 120px; }
    .deflist > div { flex-direction: column; gap: 2px; }
    .deflist dt { width: auto; font-size: 12.5px; }
    .listing__title, .page-title { font-size: 22px; }
    .success { padding: 28px 18px; }

    /* Sipariş tablosu: birim fiyat sütunu gizlenip tablo akışkan bırakılır.
       min-width korunsaydı tablo kaydırma kabında kalır ve "Tutar" sütunu
       ekranın dışında görünmez olurdu. */
    .ordertable { min-width: 0; }
    .ordertable .col-unit { display: none; }
    .ordertable th, .ordertable td { padding: 9px 6px; font-size: 13px; }

    /* Telefonda üst çubuk: "Sipariş Takibi" ve "İletişim" mobil menüye
       devredilir, geriye bayi rozeti + telefon kalır ve satır sarmaz. */
    .topbar__link--sm-hide { display: none; }
    .topbar__b2b-full { display: none; }
    .topbar__b2b-short { display: inline; }
    .topbar { font-size: 12px; }
    .topbar__b2b { padding: 5px 12px; }

    /* Dokunma hedefleri: satır içi bağlantılar 19px yüksekliğindeydi, parmakla
       isabet ettirmek zordu. Metin akışını bozmadan tıklama alanı büyütülür.
       DİKKAT: .topbar__b2b bu listeye GİRMEZ — display:inline-block, rozetin
       inline-flex düzenini ezip ikon ile metni ayrı satırlara düşürüyordu. */
    .footer__col ul a,
    .footer__contact a,
    .topbar__links a:not(.topbar__b2b),
    .crumbs a { display: inline-block; padding: 6px 0; }
    .footer__col ul { gap: 2px; }
    .footer__contact li { line-height: 1.4; }
}

/* --- Küçük telefon (≤380px) --- */
@media (max-width: 380px) {
    .container { padding: 0 14px; }
    .grid { gap: 10px; }
    .logo__text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ============================================================ üyelik (B2C)
   Giriş/kayıt ekranları, "Hesabım" sayfaları ve favori kalbi.
   Dosyanın sonuna eklendi: .header__account svg kuralının .btn-ghost svg
   (WhatsApp yeşili, yukarıda) kuralını ezmesi gerekiyor. */

/* --- başlıktaki hesap düğmesi --- */
.header__account svg { color: currentColor; }

/* --- giriş / kayıt formları --- */
.authtabs { display: flex; gap: 4px; margin-bottom: 18px; background: var(--bg); padding: 4px; border-radius: var(--radius-sm); }
.authtabs__tab {
    flex: 1; text-align: center; padding: 9px 12px; border-radius: 8px;
    font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.authtabs__tab:hover { color: var(--ink); }
.authtabs__tab.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow); }

.authform { display: grid; gap: 14px; }
.authform .btn { margin-top: 4px; }
.authform__alt { margin-top: 16px; text-align: center; font-size: 13.5px; color: var(--muted); }
.authform__alt a { color: var(--brand); font-weight: 600; }
.authform__consent { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.authform__consent a { color: var(--brand); text-decoration: underline; }

.field__hint { display: block; margin-top: 5px; font-style: normal; font-size: 12px; color: var(--muted); }

/* Kod alanı: haneler tek tek okunsun diye geniş harf aralığı. */
.otpinput {
    text-align: center; font-size: 24px; font-weight: 700;
    letter-spacing: .4em; text-indent: .4em;
}

/* --- hesap düzeni --- */
.account { display: grid; grid-template-columns: 232px 1fr; gap: 24px; align-items: start; padding-bottom: 40px; }
.account__main { display: grid; gap: 18px; min-width: 0; }

.accountnav {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px; position: sticky; top: 130px;
}
.accountnav__who { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.accountnav__who strong { display: block; font-size: 14.5px; }
.accountnav__who span { font-size: 12.5px; color: var(--muted); }
.accountnav__links { display: grid; gap: 2px; }
.accountnav__link { padding: 9px 11px; border-radius: 8px; font-size: 14px; color: var(--ink-2); }
.accountnav__link:hover { background: var(--bg); color: var(--ink); }
.accountnav__link.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.accountnav__logout { margin-top: 14px; }

/* --- sipariş listesi --- */
.orderlist { display: grid; gap: 10px; }
.ordercard {
    display: block; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 15px 17px; transition: border-color .15s;
}
.ordercard:hover { border-color: var(--line-2); }
.ordercard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ordercard__head strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.ordercard__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.ordercard__meta strong { color: var(--ink); font-size: 15px; }

.orderstatus { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--bg); color: var(--muted); }
.orderstatus--pending { background: #fef3c7; color: var(--warn); }
.orderstatus--confirmed, .orderstatus--preparing { background: #eff6ff; color: #1d4ed8; }
.orderstatus--shipped { background: #ecfeff; color: #0e7490; }
.orderstatus--completed { background: #ecfdf5; color: var(--ok); }
.orderstatus--cancelled { background: var(--brand-soft); color: var(--brand); }

/* --- adres defteri --- */
.pill { padding: 3px 9px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 11.5px; font-weight: 700; }

.addresslist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

/* Kart bir sütun: adres metni ne kadar uzun olursa olsun düğmeler EN ALTTA
   hizalanır (margin-top: auto). Izgara satırındaki kartlar zaten eşit
   yükseklikte; bu olmadan kısa adresli kartta düğmeler yukarıda kalıyordu. */
.addresscard {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px;
}
.addresscard.is-default { border-color: var(--brand); }
.addresscard__head { display: flex; align-items: center; gap: 8px; }
.addresscard__body { margin: 8px 0 14px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; word-break: break-word; }

.addresscard__actions {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
}
/* Silme/varsayılan işlemleri birer küçük form; esnek öğe olarak dizilirler. */
.addresscard__actions form { margin: 0; display: inline-flex; }

/* --- tehlikeli bölge (hesap silme) --- */
.panel--danger { border-color: #fecaca; }
.panel--danger .panel__title { color: var(--brand); }
.btn--danger { background: var(--brand); color: #fff; }
.btn--danger:hover { background: var(--brand-dark); color: #fff; }
/* Yıkıcı işlem (Sil): dolu kırmızı düğme kartta fazla bağırıyor, o yüzden
   kırmızı yazı + açık kırmızı kenarlık; üzerine gelince zemin de kızarır.
   #fecaca tonu .tag--clear ve .panel--danger ile aynı. */
.btn--danger-soft { background: #fff; border-color: #fecaca; color: var(--brand); }
.btn--danger-soft:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }

/* --- favori düğmesi ---
   Yalnızca ürün detay sayfasında, "Sepete ekle"nin altında geniş düğme.
   Ürün kartlarında YOK: kart zaten karşılaştırma kutusu, ebat, endeksler ve
   sepet düğmesi taşıyor. */
.favform--wide { display: flex; margin-bottom: 12px; }
.favbtn--inline { width: 100%; }
.favbtn--inline svg { width: 18px; height: 18px; }
.favbtn--inline:hover { border-color: #fecaca; color: var(--brand); }
.favbtn--inline.is-on { border-color: #fecaca; color: var(--brand); }
.favbtn--inline.is-on svg { fill: currentColor; }

/* --- duyarlı --- */
@media (max-width: 900px) {
    .account { grid-template-columns: 1fr; }
    .accountnav { position: static; }
    .accountnav__links { grid-auto-flow: column; grid-auto-columns: 1fr; overflow-x: auto; }
    .accountnav__link { text-align: center; white-space: nowrap; }
}

@media (max-width: 720px) {
    /* Başlıkta üç düğme + hamburger tek satıra sığmıyor; hesap düğmesi
       yalnızca ikonla kalır. */
    .header__account-label { display: none; }
    .addresslist { grid-template-columns: 1fr; }
    .accountnav__links { grid-auto-flow: row; overflow: visible; }
    .accountnav__link { text-align: left; }
}

/* --- kasa: kayıtlı müşteri kolaylıkları --- */

/* İletişim bilgileri özeti (girişli müşteride formun yerine geçer). */
.contactsummary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg);
}
.contactsummary__body { min-width: 0; display: grid; gap: 2px; }
.contactsummary__body strong { font-size: 14.5px; }
.contactsummary__body span { font-size: 13px; color: var(--muted); word-break: break-word; }
.contactsummary .btn { flex-shrink: 0; }


@media (max-width: 520px) {
    .contactsummary { flex-direction: column; align-items: stretch; }
    .contactsummary .btn { width: 100%; }
}

/* Adres defteri: teslimat yöntemi kartlarıyla AYNI görünmemeli — ikisi üst üste
   gelince hangisinin ne olduğu belirsizleşiyordu. Bu yüzden kart değil, radyo
   noktalı kompakt liste. */
.addressbook { display: grid; gap: 10px; }
.addressbook__list { display: grid; gap: 8px; }
.addressbook__list:empty { display: none; }
.addressbook__empty { font-size: 13.5px; color: var(--muted); }
.addressbook .btn { justify-self: start; }
.addressbook .btn svg { width: 15px; height: 15px; }

.addresspick {
    position: relative; display: flex; align-items: flex-start; gap: 11px;
    padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    background: #fff; cursor: pointer; transition: border-color .15s, background .15s;
}
.addresspick:hover { border-color: var(--line-2); }
.addresspick input { position: absolute; opacity: 0; pointer-events: none; }
.addresspick__dot {
    flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px; border-radius: 50%;
    border: 1.5px solid var(--line-2); background: #fff; transition: border-color .15s;
}
.addresspick__body { display: grid; gap: 2px; min-width: 0; }
.addresspick__body strong { font-size: 14px; }
.addresspick__body span { font-size: 13px; color: var(--muted); line-height: 1.45; word-break: break-word; }

.addresspick.is-selected { border-color: var(--brand); background: var(--brand-soft); }
.addresspick.is-selected .addresspick__dot { border-color: var(--brand); border-width: 5px; }

/* --- modal (yeni adres) --- */
body.is-modal-open { overflow: hidden; }

.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.modal__panel {
    position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px);
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.modal__head h2 { font-size: 17px; }
.modal__close { border: 0; background: none; padding: 4px; cursor: pointer; color: var(--muted); line-height: 0; }
.modal__close:hover { color: var(--ink); }
.modal__close svg { width: 20px; height: 20px; }
/* Gövde kaydırılır: telefonda altı alan ekrana sığmıyor. */
.modal__body { padding: 18px; overflow-y: auto; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--bg); }

@media (max-width: 520px) {
    .modal { padding: 0; align-items: flex-end; }
    .modal__panel { max-width: none; max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; }
    .modal__foot .btn { flex: 1; }
}

/* Adres defteri başlık satırı: açıklama solda, "Adres ekle" düğmesi sağda. */
.addressbook__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.addressbook__head .muted { font-size: 13.5px; margin: 0; }
.addressbook__head .btn svg { width: 15px; height: 15px; }

@media (max-width: 520px) {
    .addressbook__head { flex-direction: column; align-items: stretch; }
    .addressbook__head .btn { justify-content: center; }
}

/* --- favori listesi: yatay kart ---
   Katalogdaki .card bileşeninin aynısı kullanılır, yalnızca yerleşimi
   değişir: görsel solda iki satır boyunca, marka şeridi ve gövde sağda.
   Kart DOM'una dokunulmadı — aynı bileşen iki yerde farklı görünsün diye
   ikinci bir kart şablonu açmak, fiyat/rozet mantığını ikiye bölerdi. */
.favlist { display: grid; gap: 12px; }

.favlist .card {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: start;
}
.favlist .card__top { grid-column: 2; grid-row: 1; padding: 12px 14px 0; min-height: 0; }
.favlist .card__media { grid-column: 1; grid-row: 1 / span 2; padding: 12px; }
.favlist .card__media img { height: 108px; }
.favlist .card__body { grid-column: 2; grid-row: 2; padding: 6px 14px 14px; }

/* Fiyat ve sepet düğmesi yan yana: yatay satırda alt alta binmeleri gereksiz
   yer kaplıyordu. */
.favlist .card__foot {
    grid-template-columns: 1fr auto; align-items: center; gap: 14px;
}
.favlist .card__foot .btn { width: auto; padding-inline: 22px; }

@media (max-width: 560px) {
    .favlist .card { grid-template-columns: 96px minmax(0, 1fr); }
    .favlist .card__media { padding: 10px; }
    .favlist .card__media img { height: 76px; }
    /* Dar ekranda düğme tam genişlik: yan yana ikisi de sıkışıyordu. */
    .favlist .card__foot { grid-template-columns: 1fr; }
    .favlist .card__foot .btn { width: 100%; }
}