/* ==========================================================================
   karminlastik.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: #ea580c;
    --brand-dark: #c2410c;
    --brand-soft: #fff7ed;
    --brand-line: #fed7aa;

    /* Kırmızı MARKA rengi olmaktan çıktı ama ANLAM olarak duruyor: hata
       kutusu, "sil" düğmesi ve tehlikeli bölge kırmızı kalmalı. Bunlar
       eskiden --brand üzerinden çiziliyordu; marka turuncuya dönünce
       "hata" ile "vurgu" aynı renge düşer, uyarı uyarı gibi durmazdı. */
    --danger: #dc2626;
    --danger-dark: #b91c1c;
    --danger-soft: #fef2f2;
    --danger-line: #fecaca;
    --danger-ink: #991b1b;
    --ink: #0f172a;
    --ink-2: #334155;
    --muted: #64748b;
    --line: #e2e8f0;
    --line-2: #cbd5e1;
    --bg: #f8fafc;
    /* Sayfa zemini ile "yumuşak yüzey" ARTIK AYRI. --bg hâlâ girdi, sekme,
       tablo başlığı gibi hafif gri yüzeyler için kullanılıyor; sayfanın
       kendi zemini beyaz (gri zemin paneli/B2B'yi andırıyordu). İkisi tek
       değişken olsaydı body'yi beyaza çevirmek o yüzeyleri de silerdi. */
    --page: #fff;
    --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(--page);
    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); }
/* Renk metinden miras alınır. Eskiden WhatsApp yeşiline sabitlenmişti ve
   hesap düğmesi bunu dosyanın sonundaki bir kuralla geri alıyordu; başlıkta
   WhatsApp düğmesi kalmadığı için o istisnaya da gerek yok. */
.btn-ghost svg { width: 17px; height: 17px; }

.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; }
/* Aktif sekmenin altı SİYAH: kırmızı çubukta beyaz çizgi, beyaz yazının
   devamı gibi durup sekmeyi işaretlemiyordu. */
.mainnav__link.is-active { background: rgba(0, 0, 0, .18); border-bottom-color: var(--ink); }
.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; }

/* 7/24 Yol Yardım: kategori çubuğunun en sağındaki hizmet bağlantısı.
   Kategorilerden ayrışsın diye WhatsApp yeşili zeminli; yanıp sönen nokta
   hattın açık olduğunu söyler. */
.mainnav__link--help { background: #25d366; text-transform: none; letter-spacing: 0; }
.mainnav__link--help:hover { background: #1eb955; }
.mainnav__link--help svg { width: 16px; height: 16px; }
.mainnav__pulse {
    width: 8px; height: 8px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
    animation: wapulse 2s infinite;
}
@keyframes wapulse {
    70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* --------------------------------------------------------------- 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); }

/* Sağ sütun: mevsimler. Başlık diğer sütunlarla aynı (.mega__col h3) görünsün
   diye .mega__promo da h3'ü aynı biçimde alır. */
.mega__promo { display: grid; gap: 12px; align-content: start; min-width: 0; }
.mega__promo h3 {
    font-size: 13px; font-weight: 700; color: var(--brand);
    margin-bottom: -2px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.mega__seasons { display: grid; gap: 8px; }
.mega__season {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; align-items: center;
    gap: 12px; padding: 11px 12px; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--bg); color: var(--ink);
    transition: border-color .15s, background .15s, transform .15s;
}
.mega__season:hover { border-color: var(--brand); background: #fff; transform: translateX(2px); }
.mega__season-ic {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line); color: var(--muted);
}
.mega__season-ic svg { width: 20px; height: 20px; }
.mega__season:hover .mega__season-ic { border-color: currentColor; }
/* Mevsimin kendi rengi: kart ayırt edilsin diye yalnızca simgeye uygulanır,
   yazı her kartta aynı kalır. */
.mega__season--summer .mega__season-ic { color: #d97706; background: #fff7ed; }
.mega__season--winter .mega__season-ic { color: #0284c7; background: #f0f9ff; }
.mega__season--allseason .mega__season-ic { color: #16a34a; background: #f0fdf4; }
.mega__season-tx { display: grid; gap: 2px; min-width: 0; }
.mega__season-tx strong { font-size: 13.5px; font-weight: 700; }
.mega__season-tx > span { font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.mega__season-go { width: 16px; height: 16px; color: var(--muted); }
.mega__season:hover .mega__season-go { color: var(--brand); }
.mega__all {
    justify-self: start; font-weight: 700; font-size: 13px; color: var(--brand);
}
.mega__all:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- 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(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
.alert--info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

/* --------------------------------------------------- ana sayfa slider'ı

   Panelden yönetilen görsel kuşak (/admin/shop-slider). JS'siz de çalışır:
   şerit yatay kaydırılabilir bir kap, noktalar da birer çıpa bağlantısıdır.
   Bu yüzden konumlandırma `transform: translateX()` ile DEĞİL, kabın kendi
   scroll'uyla yapılır — parmakla kaydırma ve klavye bedavaya gelir. */

.slider-wrap { padding-top: 18px; }

.slider {
    position: relative; border-radius: var(--radius); overflow: hidden;
    background: #0f172a; box-shadow: var(--shadow);
}
.slider__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Kaydırma çubuğu gizlenir: şerit zaten ok ve noktalarla yönetiliyor. */
    scrollbar-width: none; -ms-overflow-style: none;
}
.slider__track::-webkit-scrollbar { display: none; }

/* GÖRSEL KIRPILMAZ. Eskiden sabit yükseklik + `object-fit: cover` vardı ve
   1920×620 bir görsel 2.7:1 kutuya girince kenarlarından kesiliyordu. Artık
   görsel kendi oranında, tam boyuyla gösterilir: genişlik %100, yükseklik
   otomatik. Hangi çözünürlükte olursa olsun görselin tamamı görünür.

   `aspect-ratio` görselin GERÇEK ölçüsünden gelir (panelde yükleme anında
   okunup saklanıyor — bkz. migration 000046) ve satır içi özel değişkenle
   basılır. Amacı yalnızca yer ayırmak: olmasaydı görsel inene kadar kuşak
   sıfır yükseklikte durur, yüklendiği an sayfa aşağı zıplardı.

   BEDELİ: slaytların oranları farklıysa şerit yüksekliği slayt değiştikçe
   değişir. Panel bunu uyarı olarak gösteriyor; çözüm tüm slaytları aynı
   oranda yüklemek. */
.slider__slide {
    position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start;
    aspect-ratio: var(--slide-ratio, auto);
}
.slider__link { display: block; height: 100%; }
.slider__slide picture { display: block; height: 100%; }
.slider__slide img { display: block; width: 100%; height: auto; }

.slider__caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 44px 22px 18px;
    background: linear-gradient(to top, rgba(15, 23, 42, .8), rgba(15, 23, 42, 0));
    color: #fff; font-size: clamp(14px, 1.7vw, 20px); font-weight: 600; line-height: 1.35;
    /* Noktalar da alt kenarda duruyor; alt yazı üstlerine binmesin diye
       taban boşluğu nokta şeridinin yüksekliği kadar. */
    padding-bottom: 34px;
}

.slider__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 40px; height: 40px;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .85); color: var(--ink);
    opacity: 0; transition: opacity .18s, background .15s;
}
.slider__arrow svg { width: 20px; height: 20px; }
.slider__arrow:hover { background: #fff; }
.slider__arrow--prev { left: 12px; }
.slider__arrow--next { right: 12px; }
/* Oklar fareyle üzerine gelince çıkar; dokunmatikte parmakla kaydırma var,
   klavyede odaklanınca görünür olmaları yeterli. */
.slider:hover .slider__arrow, .slider__arrow:focus-visible { opacity: 1; }

.slider__dots {
    position: absolute; left: 0; right: 0; bottom: 12px;
    display: flex; justify-content: center; gap: 7px;
}
.slider__dot {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .55); cursor: pointer;
    transition: width .2s, background .2s;
}
.slider__dot:hover { background: rgba(255, 255, 255, .85); }
.slider__dot.is-active { width: 24px; background: #fff; }

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

/* Hero KUŞAK DEĞİL, KART: sayfanın geri kalanıyla aynı container genişliğinde
   durur ve köşeleri yuvarlanır. Eskiden ekranın iki ucuna dayanan üç duraklı
   bir degrade bandıydı; üstüne container içindeki slider gelince iki blok
   birbirine hiç oturmuyordu (biri kenardan kenara, diğeri ortada bir kart).
   Doku için kullanılan konik degrade de kaldırıldı — kart içinde gürültü
   yapıyordu, düz tek renk zemin yeterli. */
.hero { margin-top: 18px; }
.hero__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 44px; align-items: center;
    padding: 40px 42px 44px;
    border-radius: var(--radius); background: var(--ink); color: #fff;
}
.hero__copy { min-width: 0; }
.hero h1 { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 14px; }
/* Seçici bilerek `.hero__copy p`: hero kartının içine ileride açık zeminli
   bir kutu konursa `.hero p` oradaki yazıyı da beyaza boyardı. */
.hero__copy p { color: rgba(255, 255, 255, .82); max-width: 46ch; font-size: 15.5px; margin: 0; }

/* ------------------------------------------------- hero arama düğmesi

   Hero'daki dört açılır kutuluk ebat seçicinin yerini aldı: seçici artık
   başlıktan açılan tam ekran pencerede (bkz. .searchmodal). Buradaki düğme
   bir arama kutusu gibi görünür ama aynı pencereyi açar. */

.hero__search { display: grid; gap: 16px; }

.herosearch {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 6px 6px 6px 18px; border: 0; cursor: pointer; text-align: left;
    background: #fff; border-radius: 999px; box-shadow: var(--shadow-lg);
    font: inherit;
}
.herosearch svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.herosearch__text { flex: 1; min-width: 0; color: var(--muted); font-size: 15px; }
.herosearch__cta {
    flex-shrink: 0; padding: 12px 26px; border-radius: 999px;
    background: var(--brand); color: #fff; font-weight: 600; font-size: 14.5px;
}
.herosearch:hover .herosearch__cta { background: var(--brand-dark); }

.hero__popular-label {
    display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 9px;
}

/* Çip listeleri: hem hero kısayollarında hem arama penceresinde. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    font-size: 13.5px; font-weight: 600; white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s;
}
.chip-link:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.chip-link small { font-weight: 500; color: var(--muted); font-size: 12px; }
.chip-link:hover small { color: var(--brand); }

/* Hero koyu zeminde: çipler saydam, kenarlıklı. */
.chips--hero .chip-link {
    background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff;
}
.chips--hero .chip-link:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* ============================================ tam ekran arama penceresi

   Başlıktaki arama kutusundan açılır, her sayfada bulunur. İçeriği ilk
   açılışta /arama/veri'den yüklenir — ebat ağacı ve marka listesi her
   sayfanın HTML'ine gömülseydi tüm istekler şişerdi.

   Sayfayı tamamen kaplar: ebat seçimi üç adımlı bir çip listesi ve seçenek
   sayısı yüzlerce; dar bir açılır kutuda bunlar okunmuyordu. */

.searchmodal { position: fixed; inset: 0; z-index: 80; }
.searchmodal[hidden] { display: none !important; }
.searchmodal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }

.searchmodal__panel {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    height: 100%; background: var(--bg);
}

/* --- üst çubuk: kaydırmada ekranda kalır --- */
/* Üç sütunlu ızgara: arama kutusu EKRANIN ortasında dursun. Esnek düzende
   kutu "kapatma düğmesinden artan alanın" ortasına oturuyordu, yani gerçek
   merkezin ~50px solunda kalıyordu; sekmeler ortalanınca bu kayma göze
   çarpıyordu. Eşit iki yan sütun ortadakini gerçekten ortalar. */
.searchmodal__bar {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 780px) minmax(0, 1fr);
    align-items: center; gap: 12px;
    padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.searchmodal__form {
    position: relative; display: flex; align-items: center; min-width: 0; width: 100%;
    grid-column: 2;
}
.searchmodal__bar .searchmodal__close { grid-column: 3; justify-self: end; }
.searchmodal__icon {
    position: absolute; left: 16px; width: 20px; height: 20px; color: var(--muted); pointer-events: none;
}
.searchmodal__form input {
    width: 100%; padding: 14px 44px; border-radius: 999px;
    border: 1.5px solid var(--line-2); background: var(--bg);
    font: inherit; font-size: 16px; color: var(--ink);
}
.searchmodal__form input:focus { outline: 0; border-color: var(--brand); background: #fff; }
/* Tarayıcının kendi "temizle" düğmesi ikimizinkiyle üst üste biniyordu. */
.searchmodal__form input::-webkit-search-cancel-button { display: none; }

.searchmodal__clear {
    position: absolute; right: 12px; display: grid; place-items: center;
    width: 26px; height: 26px; border: 0; border-radius: 50%;
    background: var(--line); color: var(--ink-2); cursor: pointer; padding: 0;
}
.searchmodal__clear svg { width: 14px; height: 14px; }
.searchmodal__clear:hover { background: var(--line-2); }

.searchmodal__close {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: #fff; color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.searchmodal__close svg { width: 16px; height: 16px; }
.searchmodal__close:hover { border-color: var(--line-2); background: var(--bg); }

/* --- sekmeler --- */
/* Sekmeler arama kutusuyla aynı hizada, ortada durur.

   Ortalama `justify-content: center` ile DEĞİL, uçtaki sekmelere otomatik
   boşluk vererek yapılıyor: kutu taşarsa (dar ekran, uzun etiket) merkezleme
   ilk sekmeyi kaydırma alanının dışına iter ve ona hiç ulaşılamaz. Otomatik
   boşluk taşma anında kendiliğinden sıfırlanır, şerit normal kayar. */
.searchmodal__tabs {
    display: flex; gap: 4px; padding: 0 20px; background: #fff;
    border-bottom: 1px solid var(--line); flex-shrink: 0; overflow-x: auto;
    scrollbar-width: none;
}
.searchmodal__tabs::-webkit-scrollbar { display: none; }
.searchmodal__tab:first-child { margin-left: auto; }
.searchmodal__tab:last-child { margin-right: auto; }
.searchmodal__tab {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 13px 16px; border: 0; border-bottom: 2px solid transparent;
    background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.searchmodal__tab svg { width: 17px; height: 17px; }
.searchmodal__tab:hover { color: var(--ink); }
.searchmodal__tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }

/* --- gövde --- */
.searchmodal__body { flex: 1; overflow-y: auto; padding: 22px 20px 32px; }
.searchmodal__panelbody { max-width: 900px; margin: 0 auto; }
.searchmodal__panelbody[hidden] { display: none !important; }

.searchmodal__label {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 10px;
}
.searchmodal__label em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; }
.searchmodal__linkbtn {
    border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--brand); text-transform: none; letter-spacing: 0;
}
.searchmodal__linkbtn:hover { text-decoration: underline; }
.searchmodal__loading { font-size: 13.5px; color: var(--muted); }
.searchmodal__hint {
    margin: 22px 0 0; padding: 14px 16px; border-radius: var(--radius-sm);
    background: #fff; border: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.searchmodal__recent { margin-bottom: 22px; }

/* --- öneriler --- */
.suggest { display: grid; gap: 22px; }
.suggest__group { display: grid; gap: 8px; }
.suggest__item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    background: #fff; border: 1px solid var(--line);
    transition: border-color .15s, box-shadow .15s;
}
.suggest__item:hover, .suggest__item.is-active { border-color: var(--brand); box-shadow: var(--shadow); }
.suggest__item img { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
.suggest__body { min-width: 0; flex: 1; display: grid; gap: 2px; }
.suggest__name { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__meta { font-size: 12.5px; color: var(--muted); }
.suggest__price { flex-shrink: 0; font-size: 15px; font-weight: 700; color: var(--brand); }
.suggest__all {
    display: block; padding: 12px; border-radius: var(--radius-sm);
    background: var(--ink); color: #fff; text-align: center; font-weight: 600; font-size: 14px;
}
.suggest__all:hover { background: #1e293b; color: #fff; }
.suggest__empty {
    padding: 30px 20px; text-align: center; color: var(--muted); font-size: 14px;
    background: #fff; border: 1px dashed var(--line-2); border-radius: var(--radius);
}

/* --- ebat adımları --- */
.sizestep { margin-bottom: 22px; }
.sizestep[hidden] { display: none !important; }
.chip-btn {
    padding: 10px 16px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--line-2); background: #fff; color: var(--ink);
    font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.chip-btn:hover { border-color: var(--ink-2); }
.chip-btn.is-active { border-color: var(--brand); background: var(--brand); color: #fff; }

/* --- marka ızgarası --- */
.brandgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.brandgrid__item {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 12px 14px; border-radius: var(--radius-sm);
    background: #fff; border: 1px solid var(--line);
    transition: border-color .15s, box-shadow .15s;
}
.brandgrid__item:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.brandgrid__item img { max-width: 54px; max-height: 24px; object-fit: contain; flex-shrink: 0; }
.brandgrid__name { min-width: 0; display: grid; gap: 1px; }
.brandgrid__name strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brandgrid__name span { font-size: 12px; color: var(--muted); }

/* --- alt çubuk (ebat sekmesi) --- */
.searchmodal__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 20px; background: #fff; border-top: 1px solid var(--line); flex-shrink: 0;
}
.searchmodal__foot[hidden] { display: none !important; }
.searchmodal__count { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.searchmodal__count small { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }

body.is-search-open { overflow: hidden; }

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

/* Eskiden negatif üst boşlukla hero kuşağının kenarına biniyordu; hero artık
   yuvarlak köşeli bir kart olduğu için o çakışma köşelerin üstüne taşıyordu.

   Dördü de beyaz kutuydu; sayfa zemini de beyaza dönünce şerit tek bir soluk
   bant hâline geldi. Artık her kutu kendi renginde: renk hem şeridi canlandırıyor
   hem de ayırt edici oluyor ("yeşil olan kargo").

   Renk TEK değişkenden türer (--usp). Zemin ve kenarlık ayrı değişkenlerde
   çünkü color-mix() henüz her tarayıcıda yok; tonları elle vermek, eski bir
   tarayıcıda kutunun renksiz kalmasından iyi.

   DİKKAT — element seçicisi yok: `.usp span` (0,1,1) yazılsaydı ikon
   kutusundaki `.usp__icon { color:#fff }` (0,1,0) kuralını ezip beyaz ikonu
   gri yapardı. Bu dosyada aynı tuzağa daha önce yıldızlarda düşülmüştü. */
.usp {
    /* minmax(0, 1fr): düz `1fr` en dar içeriğin altına inemiyor, uzun bir
       kelime ("gördüğünüz") sütunu şişirip dördünü farklı genişliklerde
       bırakıyordu. */
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
    margin-top: 18px;
}
.usp__item {
    --usp: var(--brand);
    --usp-bg: var(--brand-soft);
    --usp-line: var(--brand-line);
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--usp-bg); border: 1px solid var(--usp-line);
    border-radius: var(--radius); padding: 15px 16px;
    transition: transform .15s, box-shadow .15s;
}
.usp__item:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.usp__item--price   { --usp: #059669; --usp-bg: #f0fdf4; --usp-line: #bbf7d0; }
.usp__item--ship    { --usp: #2563eb; --usp-bg: #eff6ff; --usp-line: #bfdbfe; }
.usp__item--genuine { --usp: #d97706; --usp-bg: #fffbeb; --usp-line: #fde68a; }
.usp__item--return  { --usp: #7c3aed; --usp-bg: #f5f3ff; --usp-line: #ddd6fe; }

.usp__icon {
    display: grid; place-items: center; flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 11px;
    background: var(--usp); color: #fff;
}
.usp__icon svg { width: 20px; height: 20px; }
.usp__text { min-width: 0; }
.usp__title { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 2px; }
.usp__note { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }

/* ---------------------------------------------------------------- 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; }

/* ------------------------------------------------------------ yatay şerit */

/* Ana sayfadaki marka ve ürün listeleri ızgara değil, yana kayan bir şerit.
   Izgarada sekiz ürün iki sıra kaplayıp sayfayı uzatıyordu; şerit aynı yerde
   daha fazla ürün gösteriyor ve "devamı var" hissi veriyor.

   Kaydırmayı TARAYICI yapar (overflow-x + scroll-snap). shop.js yalnızca
   okları ve otomatik geçişi ekler — betik çalışmazsa şerit parmakla/trackpad
   ile aynen kaydırılır, hiçbir ürün erişilemez olmaz.

   Kaç öğe görüneceği --carousel-per-view ile dışarıdan verilir; şeridin
   kendisi ne gösterdiğini bilmez. */
.carousel {
    /* Izgara: üstte şerit, altında nokta satırı. Oklar da şeridin hücresine
       yerleşip onun üstüne biniyor (bkz. .carousel__nav). */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "serit"
        "nokta";
    --carousel-gap: 16px;
    --carousel-per-view: 4;
}
.carousel__track { grid-area: serit; }
.carousel__track {
    display: flex; gap: var(--carousel-gap);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Kartın :hover'da 3px yükselmesi ve gölgesi için DİKEY pay. Pay
       olmasaydı yatay kaydırma kutusu dikeyde de taşar ve fare kartın
       üzerine geldiğinde alta ikinci bir kaydırma çubuğu düşerdi.

       Yatay iç boşluk BİLEREK sıfır: aşağıdaki genişlik hesabındaki %100,
       kabın içerik kutusuna göre çözülüyor; yanlarda boşluk olsaydı
       clientWidth ondan büyük kalır ve son durakta yarım kart görünürdü. */
    padding: 8px 0 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

/* Öğe genişliği SABİT DEĞİL, kaba tam sayıda kart sığacak şekilde hesaplanır:
       (kap - (n-1) × aralık) / n
   Sabit 244px'te 1200px'lik kapta 4,6 kart görünüyor ve şeridin sağ ucunda
   her zaman yarım bir kart kalıyordu.

   Kaydırma adımı bir kart + bir aralık olduğu için son durakta scrollLeft
   tam olarak son kartın başlangıcına denk gelir; hiçbir durakta kart
   kesilmez. */
.carousel__track > * {
    flex: 0 0 calc(
        (100% - (var(--carousel-per-view) - 1) * var(--carousel-gap)) / var(--carousel-per-view)
    );
    /* ŞART: esnek öğelerin `min-width` varsayılanı `auto`, yani içeriğinin
       en dar hâlinden küçülemezler. Marka kutusu (110px logo + 32px iç
       boşluk = 144px) hesaplanan genişliğin altına inemiyor, altı kutu
       kaba sığmayıp şeridin ucunda yarım kutu bırakıyordu. */
    min-width: 0;
    scroll-snap-align: start;
}

/* Kaç kart görüneceği kırılıma göre değişir. Eşikler KATALOG IZGARASININ
   kart boyunu tutturacak şekilde seçildi — ana sayfadaki kart ile /lastik
   sayfasındaki kart aynı büyüklükte olsun diye.

   Katalog `repeat(auto-fill, minmax(220px, 1fr))` kullanıyor; yan filtre
   sütunu olmadığı genişliklerde sütun sayısı floor((kap + 16) / 236) oluyor
   ve tam olarak 968 / 732 / 496 piksellerde değişiyor. Aşağıdaki eşikler
   bunlarla aynı; bu yüzden yuvarlak sayılar değiller.

   Geniş ekranda katalog 3 sütun gösteriyor (genişliğin bir kısmını filtre
   sütunu alıyor) ama kart 231–295px; şeritteki 4 kart da 234–288px. Sayılar
   farklı, KART BOYU aynı — istenen buydu. */
.carousel--products { --carousel-per-view: 4; }
@media (max-width: 967px) { .carousel--products { --carousel-per-view: 3; } }
@media (max-width: 731px) { .carousel--products { --carousel-per-view: 2; } }
/* Telefonda da İKİLİ. Tek kart, ekranı bir ürünle doldurup listenin
   devamını gizliyordu. */
@media (max-width: 495px) { .carousel--products { --carousel-per-view: 2; } }

/* Oklar MUTLAK KONUMLU DEĞİL, şeritle aynı ızgara hücresinde duruyor ve
   `align-self: center` ile ortalanıyor.

   Neden: altına nokta satırı eklendi. Oklar `.carousel`e göre mutlak
   konumlansaydı `top: 50%` artık şeridin değil, şerit + noktaların ortasını
   gösterirdi; noktalar gizlendiğinde (tek sayfa) de yeniden kayardı.
   Aynı hücrede duran öğe her zaman ŞERİDİN ortasında kalıyor.

   margin-top: -12px — şeridin alt gölge payı (20px) ile üst payı (8px) eşit
   olmadığı için hücrenin ortası kartların ortasından 6px aşağıda kalıyor.
   `align-self: center` MARGIN kutusunu ortaladığı için negatif üst boşluğun
   kaydırma etkisi yarısı kadar: 6px için -12px gerekiyor. */
.carousel__nav {
    grid-area: serit; align-self: center; z-index: 3; margin-top: -12px;
    display: grid; place-items: center; width: 38px; height: 38px;
    border-radius: 50%; border: 1px solid var(--line);
    background: #fff; color: var(--ink); cursor: pointer;
    box-shadow: var(--shadow); transition: background .15s, border-color .15s, color .15s;
}
.carousel__nav:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.carousel__nav svg { width: 18px; height: 18px; }
/* Oklar container'ın 20px'lik iç boşluğuna oturur: dışarıya taşırılsaydı
   tam 1240px genişliğinde bir ekranda sayfanın dışına çıkıp yatay kaydırma
   açardı. Bu konumda karta yalnızca 20px biniyorlar — kart içeriğini
   (fiyat, başlık) kapatmıyorlar. */
.carousel__nav--prev { justify-self: start; margin-left: -18px; }
.carousel__nav--next { justify-self: end; margin-right: -18px; }
/* Betik yüklenene kadar ve şerit taşmıyorsa oklar basılmaz (hidden). */

/* Sayfa noktaları her ekranda: kaç sayfa olduğunu ve kaçıncıda olunduğunu
   yalnızca oklardan anlamak mümkün değildi. */
.carousel__dots { grid-area: nokta; display: flex; justify-content: center; gap: 2px; }
.carousel__dot {
    /* Görünen nokta 7px ama düğme 22px: parmakla basılabilir bir hedef
       kalsın diye nokta ::before ile çiziliyor. */
    display: grid; place-items: center;
    width: 22px; height: 22px; padding: 0;
    border: 0; background: none; cursor: pointer;
}
.carousel__dot::before {
    content: ""; width: 7px; height: 7px; border-radius: 999px;
    background: var(--line-2); transition: width .2s, background .2s;
}
.carousel__dot.is-active::before { width: 20px; background: var(--brand); }

/* --- telefon: kumanda şeridin ALTINA iner ---
   38px'lik yuvarlak düğmeler dar ekranda kartın üstüne biniyordu. Şeridin
   altında tek bir kumanda satırı var: oklar iki uçta, noktalar aralarında.

   Izgara kullanılıyor çünkü noktaların ORTA sütunu kaplaması gerekiyor;
   esnek kutuda `justify-content: space-between` noktaları kabın ortasına
   değil, okların arasında kalan boşluğun ortasına koyardı — iki ok farklı
   genişlikte olsaydı nokta şeridi kayardı. `1fr`li orta sütun her zaman
   kabın gerçek ortasında duruyor. */
@media (max-width: 731px) {
    .carousel {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "serit serit serit"
            "geri  nokta ileri";
        row-gap: 2px;
    }
    /* Oklar şeridin üstünden çıkıp kendi sütunlarına geçiyor: negatif
       kenar boşlukları ve dikey telafi burada sıfırlanmalı. */
    .carousel__nav {
        grid-area: geri; align-self: center; justify-self: stretch;
        margin: 0; width: 40px; height: 40px;
    }
    .carousel__nav--next { grid-area: ileri; }
    /* Noktalar 22px, oklar 40px; ortalanmazsa satırın üstüne yaslanırlar. */
    .carousel__dots { align-self: center; }
}

/* Marka şeridi: logolar gri tonda durur, üzerine gelince renklenir —
   farklı markaların renkleri sayfayı dağıtmasın diye.

   Yerleşim artık .carousel__track'in işi (ızgara değil, yana kayan şerit);
   burada yalnızca tek bir markanın kutusu tarif ediliyor. Kutu genişliği
   ürün kartlarıyla aynı mantıkla hesaplanır — şeridin ucunda yarım logo
   kalmaz. */
.carousel--brands { --carousel-per-view: 6; }
@media (max-width: 967px) { .carousel--brands { --carousel-per-view: 5; } }
@media (max-width: 731px) { .carousel--brands { --carousel-per-view: 3; } }
@media (max-width: 495px) { .carousel--brands { --carousel-per-view: 2; } }
/* Telefonda aralık daralıyor: iki kartın yan yana durduğu 350px'lik bir
   kapta her 6 piksel karta yazı yeri olarak geri dönüyor. */
@media (max-width: 495px) {
    .carousel { --carousel-gap: 10px; }

    /* Kart bu genişlikte ~170px'e iniyor ve varsayılan yan boşluklarla
       "Sepete ekle" iki satıra kırılıp düğmeyi 67px yapıyor.

       Kural ŞERİTLE SINIRLI DEĞİL: katalog ızgarası da telefonda iki sütuna
       düşüyor ve kartı aynı boyda (169px). Yalnızca ana sayfa düzeltilseydi
       iki sayfada aynı kartın düğmesi farklı yükseklikte olurdu. */
    .card__body { padding: 0 10px 12px; }
    .card__foot .btn { padding: 10px 8px; gap: 6px; font-size: 13px; }
    .card__foot .btn svg { width: 15px; height: 15px; }
}
.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 {
    /* min(): kutu 110px'ten dar kaldığında logo kutudan taşmasın. Yalnızca
       `max-width: 110px` yazılsaydı genel `img { max-width: 100% }` kuralını
       özgüllükte ezip taşmaya izin verirdi. */
    max-width: min(110px, 100%); 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; }
/* Logosu olmayan marka adla gösterilir; dar kutuda uzun bir ad ("Continental")
   kutudan taşmasın diye kırılabilir. */
.brandstrip__text { font-weight: 700; font-size: 14px; color: var(--ink-2); text-align: center; overflow-wrap: anywhere; }
.brandstrip__item:hover .brandstrip__text { color: var(--brand); }

/* --------------------------------------------- ebat rehberi + sipariş adımları */

/* Eskiden iki paragraflık düz bir metin kutusuydu ("infoblock"). Ebat kodunu
   ANLATMAK yerine GÖSTERMEK gerekiyordu: 205/55 R16 91V yazısının hangi
   parçasının ne olduğu, parçalar renklendirilip altına etiket konunca tek
   bakışta anlaşılıyor. */
.howto { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.howto__card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 28px;
}
.howto__eyebrow {
    display: inline-block; margin-bottom: 10px; padding: 4px 11px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    background: var(--brand-soft); color: var(--brand);
}
.howto__title { font-size: 20px; margin-bottom: 8px; }
.howto__lead { font-size: 14px; color: var(--ink-2); margin-bottom: 18px; }
.howto__foot { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; }
.howto__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Lastiğin yan yüzü: koyu zemin + ince eğik çizgiler (sırt dokusunu andırır).
   Kod gerçekte de siyah kauçuk üzerinde okunuyor; aynı zemin renkli
   parçaların ayrışmasını da sağlıyor. */
.tyrecode {
    display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap;
    gap: 6px 10px; padding: 22px 18px 18px;
    border-radius: var(--radius); background: var(--ink);
    background-image: repeating-linear-gradient(112deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 10px);
}
.tyrecode__seg {
    display: grid; justify-items: center; gap: 6px;
    padding-bottom: 7px; border-bottom: 3px solid var(--seg, #fff);
}
.tyrecode__val { font-size: clamp(24px, 4.6vw, 32px); font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1; }
.tyrecode__key { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--seg, #fff); }
.tyrecode__slash { font-size: clamp(24px, 4.6vw, 32px); font-weight: 300; color: rgba(255, 255, 255, .45); align-self: center; }

/* Şeritteki ton (--seg) koyu zemin için parlak, açıklamadaki ton (--seg-ink)
   beyaz zemin için koyu. Tek renk kullanılsaydı biri okunmazdı. */
.tyrecode__seg--w, .tyrecode__dot--w { --seg: #fb7185; --seg-ink: #be123c; }
.tyrecode__seg--a, .tyrecode__dot--a { --seg: #38bdf8; --seg-ink: #0369a1; }
.tyrecode__seg--r, .tyrecode__dot--r { --seg: #34d399; --seg-ink: #047857; }
.tyrecode__seg--l, .tyrecode__dot--l { --seg: #fbbf24; --seg-ink: #b45309; }
.tyrecode__seg--s, .tyrecode__dot--s { --seg: #a78bfa; --seg-ink: #6d28d9; }

.tyrecode__legend { display: grid; gap: 9px; margin-top: 18px; }
.tyrecode__legend > li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.tyrecode__dot {
    flex-shrink: 0; width: 9px; height: 9px; margin-top: 6px;
    border-radius: 50%; background: var(--seg-ink, var(--brand));
}
.tyrecode__term { font-weight: 700; color: var(--ink); }

/* Sipariş adımları: numaralar arasında bağlantı çizgisi olan dikey akış.
   Eski `.steps` yalnızca numaralı bir listeydi; sıranın "akış" olduğu
   görünmüyordu. */
.timeline { counter-reset: step; display: grid; gap: 18px; }
.timeline > li { position: relative; padding-left: 42px; }
.timeline > li::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 0; top: 0; width: 28px; height: 28px;
    border-radius: 50%; background: var(--brand); color: #fff;
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.timeline > li:not(:last-child)::after {
    content: ""; position: absolute; left: 13px; top: 32px; bottom: -18px;
    width: 2px; background: var(--line);
}
.timeline__title { display: block; font-size: 14.5px; font-weight: 700; }
.timeline__note { display: block; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ---------------------------------------------------------------- ü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: var(--brand-line); 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 {
    position: relative;
    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: var(--danger-line); color: var(--danger); background: var(--danger-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(--danger); 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; }

/* ------------------------------------------- AB lastik etiketi / ürün künyesi

   Panelden girilen değerler (yakıt · ıslak zemin · dB · gürültü sınıfı).
   Tedarikçi beslemesinde gelmediği için elle girilir; hiç değer yoksa şerit
   basılmaz (bkz. ShopProductExtraService::hasEuLabel). */

.product__highlight {
    margin: -6px 0 14px; font-size: 14.5px; color: var(--ink-2);
    padding-left: 11px; border-left: 3px solid var(--brand);
}

.eulabel { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.eulabel__item {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: #fff; cursor: help;
}
.eulabel__item svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.eulabel__value { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1; }
.eulabel__name { font-size: 11.5px; color: var(--muted); }

/* ------------------------------------------------- üretim yılı seçici

   Aynı lastiğin farklı yılları katalogda AYRI ürünlerdir; her seçenek kendi
   sayfasına gider, fiyat ve stok o yılın kendi verisidir. */

.yearpick {
    margin-bottom: 18px; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
}
.yearpick__label {
    display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); margin-bottom: 9px;
}
.yearpick__options { display: flex; flex-wrap: wrap; gap: 8px; }
.yearpick__option {
    display: grid; gap: 1px; min-width: 96px;
    padding: 9px 14px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--line-2); background: #fff;
    transition: border-color .15s, background .15s;
}
.yearpick__option strong { font-size: 15px; color: var(--ink); }
.yearpick__option span { font-size: 12.5px; color: var(--muted); }
.yearpick__option:hover { border-color: var(--ink-2); }
.yearpick__option.is-active { border-color: var(--brand); background: var(--brand-soft); }
.yearpick__option.is-active strong, .yearpick__option.is-active span { color: var(--brand); }
.yearpick__hint { margin: 9px 0 0; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------- taksit satırları

   Bilgi amaçlıdır: kasa akışını ve fiyatı değiştirmez, taksit süreci
   telefon/WhatsApp üzerinden yürür (bkz. ShopInstallmentService). */

.paylines { display: grid; gap: 8px; margin: 0 0 18px; }
.payline {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: #fff;
}
.payline__badge {
    flex-shrink: 0; padding: 5px 10px; border-radius: 7px;
    background: var(--ink); color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.payline__body { display: grid; gap: 1px; min-width: 0; flex: 1; }
.payline__body strong { font-size: 14px; }
.payline__body span { font-size: 12.5px; color: var(--muted); }

.payline--wa { border-color: #a7f3d0; background: #f0fdf4; }
.payline--wa .payline__badge { background: #25d366; }
.payline__cta {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px; border-radius: var(--radius-sm);
    background: #25d366; color: #fff; font-size: 13px; font-weight: 600;
}
.payline__cta:hover { background: #1eb955; color: #fff; }
.payline__cta svg { width: 15px; height: 15px; }

/* -------------------------------------------------- ürün rozetleri (badge)

   Panelden yüklenen çıkartmalar (/admin/shop-badges). Konumlandırma kabı
   .card__media / .product__media'dır; rozetler köşeye göre gruplanmış bir
   sarmalayıcıya girer, aynı köşede alt alta dizilirler. */

.pbadges {
    position: absolute; z-index: 2;
    display: flex; flex-direction: column; gap: 5px;
    pointer-events: none;
}
.pbadges--top-left { top: 6px; left: 10px; align-items: flex-start; }
.pbadges--top-right { top: 6px; right: 10px; align-items: flex-end; }
.pbadges--bottom-left { bottom: 10px; left: 10px; align-items: flex-start; }
.pbadges--bottom-right { bottom: 10px; right: 10px; align-items: flex-end; }

/* Sol üstte zaten stok/kargo rozeti ("Son 3 adet") var; ürün rozeti onun
   altından başlar, olmadığı kartta ise en üste yerleşir. */
.card__media:has(.badge) .pbadges--top-left { top: 34px; }

.pbadge { display: block; width: auto; height: auto; object-fit: contain; }
.pbadge--sm { max-width: 44px; max-height: 44px; }
.pbadge--md { max-width: 62px; max-height: 62px; }
.pbadge--lg { max-width: 84px; max-height: 84px; }

/* Ürün detayındaki büyük görselde rozet de büyür. */
.pbadges--big .pbadge--sm { max-width: 62px; max-height: 62px; }
.pbadges--big .pbadge--md { max-width: 92px; max-height: 92px; }
.pbadges--big .pbadge--lg { max-width: 130px; max-height: 130px; }

/* ------------------------------------------------------- yıldız / puan

   İki üst üste yıldız dizisi: gri taban, üstünde --stars-fill kadar kırpılmış
   altın dizi. Böylece 3,6 gibi ondalıklı ortalama yuvarlanmadan görünür
   (bkz. shop_stars() yardımcısı). */

.stars { position: relative; display: inline-block; white-space: nowrap; line-height: 1; }
.stars__base { color: var(--line-2); }
.stars__fill {
    position: absolute; top: 0; left: 0; overflow: hidden;
    width: var(--stars-fill, 0%); color: #f59e0b;
}
.stars--sm { font-size: 13px; letter-spacing: 1px; }
.stars--md { font-size: 17px; letter-spacing: 2px; }
.stars--lg { font-size: 22px; letter-spacing: 2px; }

/* DİKKAT: aşağıdaki metin kuralları `:not(.stars)` ile daraltılmıştır.
   Yıldız şeridi de bir <span>; sade `.cardrating span` yazıldığında
   (0,1,1) özgüllüğüyle `.stars__base` / `.stars__fill` (0,1,0) kurallarını
   eziyor ve bütün yıldızlar gri metin rengine boyanıyordu. */

/* Kart: başlığın altında ince bir satır. Yorum yoksa hiç basılmaz. */
.cardrating { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 8px; }
.cardrating > span:not(.stars) { font-size: 12px; color: var(--muted); }
.cardrating:hover > span:not(.stars) { color: var(--brand); }

/* Ürün detayı: başlığın hemen altında. */
.product__rating { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.product__rating strong { font-size: 15px; }
.product__rating > span:not(.stars) { font-size: 13px; color: var(--muted); }
.product__rating:hover > span:not(.stars), .product__rating:hover strong { color: var(--brand); }
.product__rating--empty { font-size: 13px; color: var(--muted); text-decoration: underline; }

/* --------------------------------------------------------- değerlendirmeler */

/* Özet kutusu sağda sabit genişlikte: yorum listesi uzadıkça ortalama ve
   dağılım ekranda kalır. */
.reviews { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
.reviews__main { min-width: 0; }
.reviews__empty {
    margin: 0 0 20px; padding: 18px 20px; border-radius: var(--radius);
    background: var(--bg); border: 1px dashed var(--line-2); color: var(--muted); font-size: 14px;
}

.reviewlist { display: grid; gap: 14px; margin-bottom: 26px; }
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.review__author { font-size: 14px; }
.review__date { font-size: 12.5px; color: var(--muted); margin-left: auto; }
.review__verified {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    background: #ecfdf5; color: var(--ok); font-size: 11.5px; font-weight: 700;
}
.review__verified svg { width: 12px; height: 12px; }
.review__title { margin: 0 0 4px; font-weight: 600; font-size: 14.5px; }
.review__body { margin: 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }

/* Mağaza yanıtı: yorumun içinde, sola çizgiyle girintili. */
.review__reply {
    margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--brand);
    background: var(--brand-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.review__reply strong { display: block; font-size: 12.5px; color: var(--brand); margin-bottom: 3px; }
.review__reply p { margin: 0; font-size: 13.5px; color: var(--ink-2); }

.ratingbox {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px; text-align: center; display: grid; gap: 6px; justify-items: center;
}
.ratingbox__value { font-size: 38px; font-weight: 700; line-height: 1; }
.ratingbox__count { font-size: 12.5px; color: var(--muted); }

.ratingbars { display: grid; gap: 6px; margin: 14px 0; }
.ratingbars li { display: grid; grid-template-columns: 34px 1fr 26px; align-items: center; gap: 8px; }
.ratingbars__label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ratingbars__track { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ratingbars__track > span { display: block; height: 100%; background: #f59e0b; border-radius: 999px; }
.ratingbars__count { font-size: 12px; color: var(--muted); text-align: right; }

/* --------------------------------------------------------- yorum formu */

.reviewform {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
}
.reviewform h3 { font-size: 16px; margin: 0 0 14px; }

/* Form yerine basılan bilgi kutusu: ziyaretçi ürünü almadığı ya da henüz
   teslim almadığı için yazamıyor (bkz. partials/reviews.php). Çerçevesi yok,
   çünkü zaten .reviewform kartının içinde duruyor. */
.reviewgate { display: flex; align-items: flex-start; gap: 14px; }
.reviewgate__icon {
    display: grid; place-items: center; flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 11px;
    background: var(--brand-soft); color: var(--brand);
}
.reviewgate__icon svg { width: 20px; height: 20px; }
.reviewgate__body { min-width: 0; }
.reviewgate__title { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.reviewgate__note { font-size: 13.5px; color: var(--ink-2); margin: 0 0 12px; }
.reviewgate__body > .btn:last-child { margin-bottom: 0; }

/* Yıldız seçimi: radyo düğmeleri gizlenir, etiketler tıklama hedefidir.
   Diziliş TERSTİR (5→1) — CSS yalnızca SONRAKİ kardeşleri seçebildiği için
   "seçilen ve solundakiler dolu" görünümü ancak bu sırayla kurulabiliyor. */
.ratingpick { border: 0; padding: 0; margin: 0 0 14px; }
.ratingpick legend { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 5px; padding: 0; }
.ratingpick__stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.ratingpick__stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.ratingpick__stars label {
    font-size: 30px; line-height: 1; color: var(--line-2); cursor: pointer;
    padding: 0 2px; transition: color .12s;
}
.ratingpick__stars input:checked ~ label,
.ratingpick__stars label:hover,
.ratingpick__stars label:hover ~ label { color: #f59e0b; }
/* Klavyeyle gezerken hangi yıldızda olunduğu görünmeli. */
.ratingpick__stars input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* Yalnızca ekran okuyucuya görünen metin. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- 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; }

/* Panelden yazılan sayfalar (shop_pages) editörden çıkan her şeyi
   getirebiliyor: başlık, görsel, tablo, alıntı, gömülü video. Aşağısı o
   içeriğin kendi başına derli toplu görünmesi için — sayfayı yazan kişinin
   ayrıca stil yazmasını gerektirmesin. */
.prose h3 { font-size: 15.5px; margin: 18px 0 6px; }
.prose h3:first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose img { border-radius: var(--radius-sm); margin: 6px 0 14px; }
.prose figure { margin: 0 0 16px; }
.prose figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.prose blockquote {
    margin: 0 0 16px; padding: 12px 16px;
    border-left: 3px solid var(--brand); background: var(--brand-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--ink-2); font-size: 14.5px;
}
.prose blockquote > :last-child { margin-bottom: 0; }
.prose pre {
    margin: 0 0 16px; padding: 14px 16px; overflow-x: auto;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: 13px;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

/* Tablo dar ekranda taşabilir; kendi kabında yatay kaydırılır ki sayfanın
   TAMAMI yana kaymasın. Kabı sunucu tarafı ekliyor (bkz.
   ShopPageService::wrapTables) — tablonun kendisine `display:block` vermek
   kaydırmayı çözüyor ama tabloyu içeriğine göre büzüştürüp %100 genişliğini
   de elinden alıyordu. */
.prose .tablewrap { overflow-x: auto; margin-bottom: 16px; }
.prose table {
    width: 100%; border-collapse: collapse; margin: 0; font-size: 14px;
}
.prose th, .prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.prose th { background: var(--bg); font-weight: 600; }

/* Gömülü video: 16:9 oranında, kabına sığar. */
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-sm); margin-bottom: 16px; }

.pagemeta { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }

/* ------------------------------------------------- "sayfa hazırlanıyor" bloğu */

/* Montaj hizmeti gibi henüz yayımlanmamış sayfalar. Boş bir panel yerine
   durumu söyleyip iletişime yönlendirir: hizmeti bugün soran müşteri
   sayfadan eli boş dönmesin. */
.soon { text-align: center; padding: 44px 24px; }
.soon__ic {
    display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 16px;
    border-radius: 50%; background: var(--bg); border: 1px solid var(--line); color: var(--brand);
}
.soon__ic svg { width: 28px; height: 28px; }
.soon h2 { font-size: 21px; margin-bottom: 10px; }
.soon p { color: var(--muted); max-width: 52ch; margin: 0 auto 10px; line-height: 1.6; }
.soon__note { font-size: 13.5px; }
.soon__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* ------------------------------------------------------------ üyelik tipi */

/* Kayıt sayfasındaki üç kart. Radyo düğmesi değil BAĞLANTI: her tip kendi
   alanlarını istiyor ve üçünü birden basmak sayfayı gereksiz şişirirdi.
   Bağlantı olduğu için betik gerekmiyor. */
/* auto-fit: kart sayısı değişebiliyor (filo şimdilik gizli). Sabit üç sütunda
   iki kart, sağda boş bir sütun bırakıyordu; auto-fit boş rayları toplayıp
   kalanları genişletiyor. */
.signup__types { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 18px; }
.signup__type {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 15px; border-radius: var(--radius);
    border: 1.5px solid var(--line); background: #fff;
    transition: border-color .15s, background .15s;
}
.signup__type:hover { border-color: var(--line-2); }
.signup__type.is-active { border-color: var(--brand); background: var(--brand-soft); }
.signup__typeicon {
    display: grid; place-items: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--bg); color: var(--ink-2);
}
.signup__type.is-active .signup__typeicon { background: var(--brand); color: #fff; }
.signup__typeicon svg { width: 19px; height: 19px; }
.signup__typebody { min-width: 0; }
.signup__typebody strong { display: block; font-size: 14.5px; }
.signup__typebody span { display: block; font-size: 12px; color: var(--muted); }

.signup__intro { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.signup__intro h2 { font-size: 17px; margin-bottom: 6px; }
.signup__intro p { font-size: 13.5px; color: var(--ink-2); margin: 0; }

.signup__done { text-align: center; padding: 18px 0 8px; }
.signup__doneicon {
    display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px;
    border-radius: 50%; background: #ecfdf5; color: var(--ok);
}
.signup__doneicon svg { width: 26px; height: 26px; }
.signup__done h2 { font-size: 19px; margin-bottom: 8px; }
.signup__done p { font-size: 14px; color: var(--ink-2); max-width: 46ch; margin: 0 auto 18px; }

/* ------------------------------------------------------------ yol yardım */

/* Hizmet sayfası: koyu bir kuşak + adımlar. Kuşak koyu çünkü sayfanın işi
   "acil durumda ne yapmalıyım"ı öne çıkarmak; beyaz zeminde WhatsApp
   düğmesi diğer bölümlerle aynı ağırlıkta kalıyordu. */
.roadside__hero {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px;
    margin-top: 18px; padding: 38px 40px;
    border-radius: var(--radius); background: var(--ink); color: #fff;
}
.roadside__copy h1 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 14px; }
.roadside__copy p { color: rgba(255, 255, 255, .78); font-size: 15px; max-width: 52ch; margin-bottom: 22px; }

.roadside__badge {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
    padding: 5px 13px 5px 10px; border-radius: 999px;
    background: rgba(37, 211, 102, .16); color: #4ade80;
    font-size: 12.5px; font-weight: 600;
}
/* Nokta, başlıktaki 7/24 bağlantısındaki ile aynı animasyonu kullanır. */
.roadside__pulse {
    width: 8px; height: 8px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
    animation: wapulse 2s infinite;
}
.roadside__actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Koyu zeminde .btn--outline beyaz zeminli kalıyordu. */
.roadside__actions .btn--outline { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.roadside__actions .btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

.roadside__steps { counter-reset: step; display: grid; gap: 14px; align-content: start; }
.roadside__steps > li {
    position: relative; padding: 14px 16px 14px 48px;
    border-radius: var(--radius-sm); background: rgba(255, 255, 255, .06);
}
.roadside__steps > li::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 14px; top: 14px; width: 24px; height: 24px;
    border-radius: 50%; background: var(--brand); color: #fff;
    display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
}
.roadside__steptitle { display: block; font-size: 14px; font-weight: 700; }
.roadside__stepnote { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .68); line-height: 1.5; }

.roadside__cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 26px; border-radius: var(--radius);
    background: #f0fdf4; border: 1px solid #bbf7d0;
}
.roadside__cta strong { display: block; font-size: 16px; }
.roadside__cta span { font-size: 13.5px; color: var(--ink-2); }

/* ---------------------------------------------------------------- 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; }

/* -------------------------------------------- yüzen WhatsApp düğmesi

   Başlıktaki WhatsApp düğmesinin yerini aldı: düzen dosyasında (bottom.php)
   durduğu için mağazanın HER sayfasında çıkar ve sayfa kaydırıldığında da
   ekranda kalır. Karşılaştırma çubuğu açıldığında (fixed, alt kenar) düğme
   onun üstüne çıkar; `:has()` desteklenmeyen tarayıcıda yalnızca varsayılan
   konumda kalır — düğme yine tıklanabilir, sadece çubukla örtüşür. */
.wafab {
    position: fixed; right: 20px; bottom: 20px; z-index: 55;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 18px; border-radius: 999px;
    background: #25d366; color: #fff; font-weight: 600; font-size: 14.5px;
    box-shadow: 0 10px 30px -8px rgba(37, 211, 102, .65);
    transition: background .15s, transform .15s, bottom .2s;
}
.wafab:hover { background: #1eb955; color: #fff; transform: translateY(-2px); }
.wafab svg { width: 24px; height: 24px; flex-shrink: 0; }

body:has(.comparebar.is-open) .wafab { bottom: 92px; }

@media (max-width: 720px) {
    /* Telefonda yalnızca ikon: metinli düğme ürün kartlarının sepet
       düğmesini kapatıyordu. */
    .wafab { right: 14px; bottom: 14px; padding: 0; width: 54px; height: 54px; justify-content: center; }
    .wafab__label { display: none; }
}

/* ---------------------------------------------------------------- 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; }
    /* 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) 380px; gap: 30px; padding: 34px 30px 36px; }
}

@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; text-align: center; padding: 30px 22px 34px; }
    .hero__copy p { margin-left: auto; margin-right: auto; }
    /* Çipler ortalanır, arama düğmesindeki "Ara" etiketi yalnızca ikona iner. */
    .chips--hero { justify-content: center; }
    .hero__popular-label { text-align: center; }
    .usp { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
    .howto { grid-template-columns: 1fr; }
    .roadside__hero { grid-template-columns: 1fr; padding: 26px 22px; gap: 24px; }
    /* Üç kart yan yana sığmıyor; dikey listede tipler daha okunur. */
    .signup__types { grid-template-columns: 1fr; }
    .howto__card { 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: var(--ink); }
    .mainnav__item--sm-only { display: block; }
    /* Yol yardım satırı çekmecede tam genişlik olur; space-between burada
       noktayı, ikonu ve yazıyı satırın iki ucuna savuruyordu. */
    .mainnav__link--help { justify-content: flex-start; gap: 9px; }

    /* 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; }
    /* Mevsimler artık bu sütunda: telefonda gizlenemez. Çekmecede sütunların
       en üstüne alınır — akordeonu açan kişinin ilk aradığı ayrım bu. */
    .mega__promo { display: grid; order: -1; }
    .mega__season { background: #fff; }

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

    /* Taksit satırı: dar ekranda düğme alta iner, metin sıkışmasın. */
    .payline { flex-wrap: wrap; }
    .payline__body { flex-basis: calc(100% - 110px); }
    .payline__cta { width: 100%; justify-content: center; }
    /* Yıl seçenekleri iki sütun: üç kutu yan yana taşıyordu. */
    .yearpick__option { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .eulabel__item { padding: 6px 10px; }

    /* Arama penceresi telefonda: üst çubuktaki "Kapat" yazısı yer kaplıyor,
       yalnızca çarpı kalır.

       Üç sütunlu ızgara da esnek düzene döner: 390px'te ortalanacak boşluk
       yok, yan sütunlar sıfıra inip kapatma düğmesi arama kutusunun üstüne
       biniyordu. Kutu burada tüm genişliği alır. */
    .searchmodal__bar { display: flex; padding: 10px 12px; gap: 8px; }
    .searchmodal__form { grid-column: auto; flex: 1; }
    .searchmodal__bar .searchmodal__close { grid-column: auto; justify-self: auto; }
    .searchmodal__close span { display: none; }
    .searchmodal__close { padding: 10px; }
    .searchmodal__form input { padding: 12px 42px; font-size: 16px; }
    .searchmodal__tabs { padding: 0 10px; }
    /* Üç sekme 390px'e sığmıyordu ve sonuncusu kayarak yarım kalıyordu;
       ikonlar gizlenince hepsi tek bakışta görünür. */
    .searchmodal__tab { padding: 12px 11px; font-size: 13.5px; gap: 0; }
    .searchmodal__tab svg { display: none; }
    .searchmodal__body { padding: 18px 14px 28px; }
    .searchmodal__foot { padding: 12px 14px; }
    .searchmodal__foot .btn { flex-shrink: 0; }
    .brandgrid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
    .herosearch { padding-left: 14px; }
    .herosearch__cta { padding: 11px 18px; font-size: 14px; }

    /* Değerlendirmeler tek sütuna iner; özet kutusu listeden ÖNCE gelir
       (ortalama puan telefonda ilk görünmesi gereken bilgi). */
    .reviews { grid-template-columns: 1fr; }
    .reviews__summary { order: -1; }
    .review__date { margin-left: 0; width: 100%; }
    .ratingpick__stars label { font-size: 34px; padding: 0 4px; }
    /* Kartta rozet, dar görselin üstünde fazla yer kaplamasın. */
    .pbadge--md { max-width: 48px; max-height: 48px; }
    .pbadge--lg { max-width: 60px; max-height: 60px; }

    /* Slider: mobil görseller genelde kare/dikey yükleniyor, kuşak biraz
       daha yüksek olmalı. Oklar dokunmatikte gereksiz — parmakla kaydırma
       ve noktalar var. */
    .slider-wrap { padding-top: 12px; }
    /* Telefonda mobil görselin kendi oranı geçerli (ayrı görsel yoksa masaüstü
       oranı kullanılır — bkz. partials/slider.php). */
    .slider__slide { aspect-ratio: var(--slide-ratio-sm, var(--slide-ratio, auto)); }
    .slider__arrow { display: none; }
    .slider__caption { padding: 30px 14px 30px; }

    /* Bulucu: dört kutu iki sütuna iner, sekme yazıları küçülür. */
    .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; }
    /* Eskiden bu genişlikte logo yazısı gizlenip yalnızca "KL" rozeti
       kalıyordu; rozet başlıktan kaldırıldığı için yazı gizlenirse geriye
       hiçbir şey kalmaz. */
}

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

/* ============================================================ üyelik (B2C)
   Giriş/kayıt ekranları, "Hesabım" sayfaları ve favori kalbi. */

/* --- 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: var(--danger-line); }
.panel--danger .panel__title { color: var(--danger); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: var(--danger-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.
   Marka turuncuya döndü, bu düğme BİLEREK kırmızı kaldı — "sil" ile
   "öne çıkan" aynı renkte olmamalı. */
.btn--danger-soft { background: #fff; border-color: var(--danger-line); color: var(--danger); }
.btn--danger-soft:hover { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

/* --- 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: var(--brand-line); color: var(--brand); }
.favbtn--inline.is-on { border-color: var(--brand-line); 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%; }
}