/* =====================================================
   SuperWeb Tasarım Sistemi (tek dosya: token + uygulama stilleri)
   Web ve MAUI Hybrid aynı dosyayı kullanır: _content/SuperWeb.Shared/app.css
   Bayi teması ThemeService tarafından :root üzerine yazılır
   (--sw-primary, --sw-on-primary, --sw-bg, --sw-surface, --sw-text, --sw-header).
   ===================================================== */

/* ---------------- TOKENS ---------------- */
:root {
    /* Renk */
    --sw-bg: #FAFAF9;
    --sw-surface: #FFFFFF;
    --sw-surface-glass: rgba(255, 255, 255, .65);
    --sw-text: #17171C;
    --sw-text-muted: #6B7280;
    /* --sw-text-muted'dan bir ton koyu: ikincil ama okunması gereken metinler
       (ör. filtre panelindeki kategori adları). */
    --sw-text-muted-strong: #4B5563;
    --sw-primary: #6366F1;
    --sw-on-primary: #FFFFFF;
    --sw-accent: #8B5CF6;
    --sw-success: #10B981;
    --sw-warn: #F59E0B;
    --sw-danger: #EF4444;
    --sw-border: rgba(23, 23, 28, .08);
    --sw-header: var(--sw-surface-glass);
    /* Başlık çubuğunun ÜZERİNDEKİ yazı/ikon rengi (04.09.2026). Varsayılan tema yokken
       başlık zemini açık cam tonudur, üstünde normal metin rengi okunur. Tema yayınlandığında
       --sw-header ANA RENGE eşitlenir (bkz. ThemeService: Header = t.Primary) ve TemaCss
       bu değişkeni de "buton yazısı" rengine çeker — yoksa koyu metin kırmızı/lacivert bir
       başlığın üstünde kalır, hamburger ikonu ise --sw-primary olduğu için zeminle aynı renk
       olup TAMAMEN GÖRÜNMEZ olurdu. */
    --sw-on-header: var(--sw-text);

    /* Boşluk (8px grid) */
    --sw-s1: 4px;  --sw-s2: 8px;  --sw-s3: 12px; --sw-s4: 16px;
    --sw-s5: 24px; --sw-s6: 32px; --sw-s7: 48px; --sw-s8: 64px;
    --sw-s9: 96px; --sw-s10: 128px;

    /* Radius */
    --sw-r1: 8px; --sw-r2: 12px; --sw-r3: 16px; --sw-r4: 24px; --sw-r-full: 999px;

    /* Gölge (renkli-yumuşak) */
    --sw-shadow-1: 0 2px 12px rgba(23, 23, 28, .05);
    --sw-shadow-2: 0 8px 30px rgba(23, 23, 28, .08);
    --sw-shadow-3: 0 16px 48px rgba(23, 23, 28, .12);

    /* Tipografi */
    --sw-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --sw-fs-xs: clamp(.72rem, .7rem + .1vw, .78rem);
    --sw-fs-sm: clamp(.84rem, .8rem + .15vw, .92rem);
    --sw-fs-md: clamp(.95rem, .9rem + .2vw, 1.05rem);
    --sw-fs-lg: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
    --sw-fs-xl: clamp(1.5rem, 1.3rem + .8vw, 2.1rem);
    --sw-fs-hero: clamp(2rem, 1.6rem + 2.2vw, 4rem);

    /* Hareket */
    --sw-ease: cubic-bezier(.22, .61, .36, 1);
    --sw-dur: .28s;

    /* Yerleşim */
    --sw-container: 1280px;

    /* Header ölçeği — logo barın yüksekliğine kilitli olduğu için ikisi birlikte
       ölçeklenir: --sw-logo-h ≈ header'ın %78'i (üstte/altta eşit nefes payı).
       Mobilde oran biraz daha yüksek (60/72): eski 64px'lik barda logo 60px'ti,
       hiçbir kırılımda küçülme olmasın diye o boy korunup nefes payı eklendi. */
    --sw-header-h: 72px;
    --sw-logo-h: 60px;
    --sw-logo-max: 168px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --sw-bg: #0B0B0F;
        --sw-surface: #15151C;
        --sw-surface-glass: rgba(21, 21, 28, .55);
        --sw-text: #EDEDF2;
        --sw-text-muted: #9CA3AF;
        /* Koyu temada "daha koyu gri" = daha yüksek kontrast, yani daha AÇIK ton. */
        --sw-text-muted-strong: #D1D5DB;
        --sw-border: rgba(237, 237, 242, .08);
        --sw-shadow-1: 0 2px 12px rgba(0, 0, 0, .3);
        --sw-shadow-2: 0 8px 30px rgba(0, 0, 0, .4);
        --sw-shadow-3: 0 16px 48px rgba(0, 0, 0, .5);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root { --sw-dur: 0s; }
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--sw-font);
    font-size: var(--sw-fs-md);
    color: var(--sw-text);
    background: var(--sw-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
code { background: var(--sw-border); padding: 2px 6px; border-radius: 6px; font-size: .9em; }

.sw-container { max-width: var(--sw-container); margin-inline: auto; padding-inline: var(--sw-s4); }
.sw-muted { color: var(--sw-text-muted); }
.mt-8 { margin-top: var(--sw-s2); }

/* ---------- Kabuk ---------- */
.sw-app { min-height: 100dvh; display: flex; flex-direction: column; }
.sw-main { flex: 1; }

/* ---------- Header (glass) ---------- */
.sw-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--sw-header);
    /* Zemin ana renk olabildiği için yazı/ikonlar da onun üzerinde okunan renkte olmalı;
       tek tek her çocuğa yazmak yerine buradan miras alınıyor. */
    color: var(--sw-on-header);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--sw-border);
}
.sw-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sw-s4); height: var(--sw-header-h);
}
.sw-brand {
    display: flex; align-items: center; gap: var(--sw-s3); flex: 0 0 auto;
    font-weight: 700; font-size: var(--sw-fs-lg); border-radius: var(--sw-r1);
}
/* Marka ana sayfa bağlantısı — klavyeyle gezinende odak görünür olmalı */
.sw-brand:focus-visible { outline: 2px solid var(--sw-primary); outline-offset: 4px; }
/* Logo başlığın görsel çıpası. Bayi logoları farklı en/boy oranlarında geldiği için
   yükseklik VE max genişlik birlikte sınırlanır; contain ile hiçbiri kırpılmaz veya
   nav/aksiyon alanını daraltacak kadar yayılmaz. */
.sw-brand-logo {
    height: var(--sw-logo-h); width: auto;
    max-width: var(--sw-logo-max); object-fit: contain;
}
.sw-nav { display: none; gap: var(--sw-s5); font-size: var(--sw-fs-md); font-weight: 600; }
.sw-nav a { opacity: 1; transition: opacity var(--sw-dur) var(--sw-ease); }
.sw-nav a:hover { opacity: .65; }
.sw-header-actions { display: flex; align-items: center; gap: var(--sw-s2); }
.sw-icon-link {
    display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: var(--sw-r-full); font-size: 21px;
    transition: background var(--sw-dur) var(--sw-ease);
}
.sw-icon-link:hover { background: color-mix(in srgb, var(--sw-on-header) 16%, transparent); }

/* Ekran büyüdükçe header ve logo birlikte büyür: 72/60 → 84/64 → 96/74.
   Mobilde bar kısa kalır (yapışkan header içeriği yemesin), masaüstünde
   marka bloğu nav + aksiyonlarla yarışabilecek görsel ağırlığa çıkar. */
@media (min-width: 640px) {
    :root { --sw-header-h: 84px; --sw-logo-h: 64px; --sw-logo-max: 220px; }
}

@media (min-width: 960px) {
    :root { --sw-header-h: 96px; --sw-logo-h: 74px; --sw-logo-max: 280px; }
    .sw-nav { display: flex; }
}

/* ---------- Mobil menü (hamburger + sol drawer, <960px; sw-nav zaten ≥960px'te inline görünür) ---------- */
.sw-menu-toggle {
    display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
    border: none; border-radius: var(--sw-r-full); background: none;
    /* 31.07.2026 (kullanıcı): çubuklar (stroke="currentColor") FIRMALAR.RENK_BUTTON rengiyle
       aynı olsun — --sw-primary zaten o kolondan geliyor (bkz. ThemeService.cs, RENK_BUTTON).
       04.09.2026 DÜZELTME: tema yayınlanınca başlık zemini de ANA RENK oluyor ve ikon
       zeminle aynı renge düşüp görünmez oluyordu. Artık başlığın kendi ön plan rengi
       kullanılıyor: tema yokken --sw-on-header zaten --sw-text'e, tema varken "buton
       yazısı" rengine çözülüyor. */
    color: var(--sw-on-header);
    cursor: pointer; transition: background var(--sw-dur) var(--sw-ease);
}
.sw-menu-toggle:hover { background: color-mix(in srgb, var(--sw-on-header) 16%, transparent); }
.sw-mobile-nav-backdrop { display: none; }
.sw-mobile-nav-body { display: none; }

@media (min-width: 960px) {
    .sw-menu-toggle { display: none; }
}

@media (max-width: 959px) {
    /* 31.07.2026 (kullanıcı): mobilde toggle sağa, logo toggle'ın eski yerine (sola) geçsin.
       DOM sırası (erişilebilirlik/tab sırası) DEĞİŞMEDİ — yalnız GÖRSEL sırayı flex order ile
       değiştiriyoruz. Toggle artık en sağda olduğu için açılan menü de sağdan gelir (aşağıda). */
    .sw-brand { order: 1; }
    /* 31.07.2026 (kullanıcı: "ikonlar ortada değil toggle'a yakın olsun") — margin-inline-start:auto
       .sw-header-inner'daki justify-content:space-between'in aradaki boşluğu TAMAMEN buraya
       yığmasını sağlar; actions böylece sola değil, sağdaki toggle'ın hemen yanına yapışır. */
    .sw-header-actions { order: 2; margin-inline-start: auto; }
    .sw-menu-toggle { order: 3; }

    .sw-mobile-nav-backdrop {
        display: block; position: fixed; inset: 0; z-index: 200;
        background: rgba(0, 0, 0, .5);
    }

    .sw-mobile-nav-body {
        display: flex; flex-direction: column; gap: 2px;
        /* Toggle sağda olduğu için menü de sağdan açılır — düğmenin göründüğü yönle tutarlı. */
        position: fixed; top: 0; bottom: 0; right: 0; z-index: 201;
        width: min(300px, 85vw); overflow-y: auto;
        background: var(--sw-surface); padding: var(--sw-s5);
        box-shadow: var(--sw-shadow-3);
        transform: translateX(100%);
        transition: transform var(--sw-dur) var(--sw-ease);
    }
    .sw-mobile-nav-body.is-open { transform: translateX(0); }
    .sw-mobile-nav-body a {
        padding: 10px 8px; border-radius: var(--sw-r1); font-size: var(--sw-fs-md);
        transition: background var(--sw-dur) var(--sw-ease);
    }
    .sw-mobile-nav-body a:hover { background: var(--sw-border); }

    .sw-mobile-nav-header {
        display: flex; align-items: center; gap: var(--sw-s3);
        margin-bottom: var(--sw-s3); padding-bottom: var(--sw-s3);
        border-bottom: 1px solid var(--sw-border);
    }
    .sw-mobile-nav-close {
        display: flex; align-items: center; justify-content: center;
        margin-left: auto;   /* logo yanındaki firma ismi span'ı kaldırıldı — kapat düğmesini sağa iten artık bu */
        width: 32px; height: 32px; border: none; border-radius: var(--sw-r1);
        background: none; color: var(--sw-text); font-size: 1.1rem; cursor: pointer;
    }
    .sw-mobile-nav-close:hover { background: var(--sw-border); }

    body:has(.sw-mobile-nav-body.is-open) { overflow: hidden; }
}

.sw-header-search { display: none; }
@media (min-width: 640px) { .sw-header-search { display: block; } }
.sw-header-search input {
    width: 200px; padding: 9px 16px;
    border: 1px solid var(--sw-border); border-radius: var(--sw-r-full);
    background: var(--sw-surface); color: var(--sw-text);
    font-family: inherit; font-size: var(--sw-fs-sm);
    transition: width var(--sw-dur) var(--sw-ease), border-color var(--sw-dur) var(--sw-ease);
}
.sw-header-search input:focus { width: 260px; outline: none; border-color: var(--sw-primary); }

/* ---------- Bölümler ---------- */
.sw-section { padding-block: var(--sw-s7); }
.sw-section-title { font-size: var(--sw-fs-xl); font-weight: 700; margin: 0 0 var(--sw-s5); letter-spacing: -.02em; }

/* 31.07.2026: eski ".sw-hero*" bloğu (klasik anasayfa hero'su) buradan kaldırıldı — tek
   kullanıcısı olan HeroSlider.razor silindi (bkz. Anasayfa2'nin anasayfa yapılması). Anasayfa2'nin
   kendi hero'su ayrı ad alanında: .sw-h2-hero* (bkz. HeroBanner.razor.css). */

/* ---------- Buton ---------- */
.sw-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 28px; border-radius: var(--sw-r-full);
    font-weight: 600; font-size: var(--sw-fs-sm);
    border: 1px solid transparent; cursor: pointer;
    transition: background var(--sw-dur) var(--sw-ease), box-shadow var(--sw-dur) var(--sw-ease);
}
.sw-btn-primary {
    background: var(--sw-primary); color: var(--sw-on-primary);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--sw-primary) 25%, transparent);
}
.sw-btn-primary:hover { background: color-mix(in srgb, var(--sw-primary) 85%, white 15%); }

/* ---------- Kategori şeridi ---------- */
/* Bootstrap'taki d-flex flex-row flex-wrap mantığı: kartların sabit bir genişliği var,
   satıra kaç tane sığıyorsa yan yana diziliyor, sığmayan bir sonraki satıra geçiyor —
   önceki sabit 2/3/6 sütunlu grid yerine. */
.sw-strip {
    display: flex; flex-direction: row; flex-wrap: wrap;
    gap: var(--sw-s3);
}

.sw-category-card {
    display: flex; flex-direction: column; gap: var(--sw-s2);
    flex: 0 0 130px;
    padding: var(--sw-s2); border-radius: var(--sw-r3);
    background: var(--sw-surface); border: 1px solid var(--sw-border);
    box-shadow: var(--sw-shadow-1);
}
.sw-category-media {
    height: 95px; border-radius: var(--sw-r2); overflow: hidden;
    background: color-mix(in srgb, var(--sw-primary) 10%, var(--sw-surface));
}
.sw-category-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.sw-category-card:hover .sw-category-media img { transform: scale(1.06); }
.sw-category-name { font-weight: 600; font-size: var(--sw-fs-sm); }

/* Başlık + ok butonları satırı: başlık solda, oklar sağa yaslı (yalnızca mobilde görünür). */
.sw-category-strip-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sw-s3); margin-bottom: var(--sw-s5);
}
.sw-category-strip-head .sw-section-title { margin: 0; }
.sw-strip-arrows {
    display: none; /* mobilde tek satır+kaydırma olduğunda gösterilir, bkz. aşağıdaki media query */
    align-items: center; gap: var(--sw-s2); flex-shrink: 0;
}
.sw-strip-arrow {
    display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border: none; border-radius: var(--sw-r-full); flex-shrink: 0;
    background: var(--sw-surface); color: var(--sw-text); box-shadow: var(--sw-shadow-1);
    cursor: pointer;
}

@media (max-width: 959px) {
    /* Mobilde owl-carousel tarzı: tek satır, native overflow-x scroll ile parmakla kaydırma
       (JS gerekmez), ok butonları sadece bir adım kaydırmak için swScrollStrip'i çağırır. */
    .sw-strip {
        flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none;
        padding-inline: 2px; /* kart gölgesinin kırpılmaması için */
    }
    .sw-strip::-webkit-scrollbar { display: none; }
    .sw-category-card { scroll-snap-align: start; }
    .sw-strip-arrows { display: flex; }
}

/* ---------- Ürün grid/kart ---------- */
.sw-product-grid {
    display: grid; gap: var(--sw-s5);
    grid-template-columns: repeat(var(--sw-cols-mobile, 2), 1fr);
}
@media (min-width: 960px) {
    .sw-product-grid { grid-template-columns: repeat(var(--sw-cols-desktop, 4), 1fr); }
}

.sw-product-card {
    display: flex; flex-direction: column;
    border-radius: var(--sw-r3); overflow: hidden;
    background: var(--sw-surface); border: 1px solid var(--sw-border);
    box-shadow: var(--sw-shadow-1);
}
.sw-product-media {
    position: relative; overflow: hidden; background: var(--sw-border);
    height: var(--sw-card-img-h-mobile, 190px); /* seçilen sütun adedine göre Products.razor'dan geliyor */
}
@media (min-width: 960px) {
    .sw-product-media { height: var(--sw-card-img-h-desktop, 210px); }
}
.sw-product-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.sw-product-card:hover .sw-product-media img { transform: scale(1.06); }
.sw-product-qty { margin-left: var(--sw-s1); font-size: .82em; font-weight: 400; color: var(--sw-text-muted); }
.sw-product-noimg {
    display: grid; place-items: center; height: 100%;
    font-size: 48px; font-weight: 800; color: var(--sw-text-muted); opacity: .35;
}
.sw-product-body { padding: var(--sw-s4); display: flex; flex-direction: column; gap: var(--sw-s2); }
.sw-product-name { margin: 0; font-size: var(--sw-fs-md); font-weight: 600; }
.sw-product-desc {
    margin: 0; color: var(--sw-text-muted); font-size: var(--sw-fs-sm);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sw-price-row { display: flex; align-items: baseline; gap: var(--sw-s2); margin-top: auto; }
.sw-price { font-weight: 700; font-size: var(--sw-fs-lg); color: var(--sw-primary); }
.sw-price-strike { color: var(--sw-text-muted); text-decoration: line-through; font-size: var(--sw-fs-sm); }

.sw-badge {
    position: absolute; top: var(--sw-s3); left: var(--sw-s3);
    padding: 4px 12px; border-radius: var(--sw-r-full);
    font-size: var(--sw-fs-xs); font-weight: 700;
}
.sw-badge-discount { background: var(--sw-danger); color: #fff; }

/* ---------- Skeleton ---------- */
.sw-skeleton {
    background: linear-gradient(90deg, var(--sw-border) 25%, color-mix(in srgb, var(--sw-border) 50%, transparent) 50%, var(--sw-border) 75%);
    background-size: 200% 100%;
    animation: sw-shimmer 1.4s infinite;
}
@keyframes sw-shimmer { to { background-position: -200% 0; } }

/* ---------- Footer ---------- */
.sw-footer { margin-top: var(--sw-s8); border-top: 1px solid var(--sw-border); background: var(--sw-surface); }
.sw-footer-grid {
    display: grid; gap: var(--sw-s6); padding-block: var(--sw-s7);
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .sw-footer-grid { grid-template-columns: repeat(3, 1fr); } }
.sw-footer-title { font-size: var(--sw-fs-md); font-weight: 700; margin: 0 0 var(--sw-s3); }
.sw-footer p { margin: 0 0 var(--sw-s2); font-size: var(--sw-fs-sm); color: var(--sw-text-muted); }
.sw-footer a:hover { color: var(--sw-primary); }

/* Marka sütunu: logo + slogan yan yana (telefon/e-posta "Bize Ulaşın"a taşındı, bkz. 31.07.2026). */
.sw-footer-brand { display: flex; align-items: center; gap: var(--sw-s3); margin-bottom: var(--sw-s3); }
.sw-footer-logo { height: 56px; width: auto; max-width: 180px; object-fit: contain; }
/* 31.07.2026 (kullanıcı: "hâlâ gri çıkıyor") — .sw-footer p { color: var(--sw-text-muted) }
   (class+element, 0-1-1) .sw-footer-slogan'dan (tek class, 0-1-0) daha özgüldü ve rengi eziyordu.
   .sw-footer .sw-footer-slogan (0-2-0) ile özgüllük artırıldı, sıra değil seçici gücü düzeltildi. */
.sw-footer .sw-footer-slogan {
    margin: 0; display: flex; flex-direction: column;
    font-size: var(--sw-fs-lg); font-weight: 800; line-height: 1.15;
    letter-spacing: -.01em; text-transform: uppercase;
    color: var(--sw-primary);
}

/* Telefon/e-posta satırı: ikon + metin aynı hizada. */
.sw-footer-contact { display: flex; align-items: center; gap: var(--sw-s2); }
.sw-footer-ico { width: 16px; height: 16px; flex-shrink: 0; color: var(--sw-text-muted); }

/* Instagram/Facebook — metinsiz, salt ikon (erişilebilirlik: aria-label anchor üzerinde). */
.sw-footer-social { display: flex; gap: var(--sw-s2); margin-top: var(--sw-s3); }
.sw-footer-social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--sw-border); border-radius: var(--sw-r-full);
    color: var(--sw-text-muted);
    transition: color var(--sw-dur) var(--sw-ease), border-color var(--sw-dur) var(--sw-ease);
}
.sw-footer-social-link svg { width: 18px; height: 18px; }
.sw-footer-social-link:hover { color: var(--sw-primary); border-color: var(--sw-primary); }
.sw-footer-bottom {
    padding-block: var(--sw-s4); border-top: 1px solid var(--sw-border);
    font-size: var(--sw-fs-xs); color: var(--sw-text-muted);
}

/* ---------- WhatsApp iletişim butonu (sol alt, sabit) ---------- */
.sw-whatsapp-fab {
    position: fixed; left: var(--sw-s4); bottom: var(--sw-s4); z-index: 500;
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff; box-shadow: var(--sw-shadow-2);
    transition: transform .15s ease, box-shadow .15s ease;
}
.sw-whatsapp-fab:hover { transform: scale(1.06); box-shadow: var(--sw-shadow-3); color: #fff; }
@media (max-width: 959px) {
    .sw-whatsapp-fab { left: var(--sw-s3); bottom: var(--sw-s3); width: 52px; height: 52px; }
}

/* ---------- Firma seçilmedi ---------- */
.sw-company-missing { text-align: center; padding-block: var(--sw-s10); }

/* ---------- Ürünler sayfası ---------- */
.sw-products-layout {
    display: grid; gap: var(--sw-s6); padding-block: var(--sw-s6);
    grid-template-columns: 1fr;
}
@media (min-width: 960px) { .sw-products-layout { grid-template-columns: 240px 1fr; } }

.sw-filters { display: flex; flex-direction: column; gap: var(--sw-s2); align-self: start; }
.sw-filters-body { display: flex; flex-direction: column; gap: var(--sw-s4); }
.sw-filters-title { font-size: var(--sw-fs-md); font-weight: 700; margin: var(--sw-s3) 0 0; }
.sw-filter-cats { display: flex; flex-direction: column; gap: 2px; }
/* Kategori/alt kategori adları. Punto SABİT .95rem: --sw-fs-md akışkan olduğu için
   (clamp(.95rem, .9rem + .2vw, 1.05rem)) geniş ekranda üst sınırına çıkıyor ve masaüstü
   sol panelde, mobil filtre çekmecesindekinden (≈.95rem) belirgin biçimde büyük
   görünüyordu. Sabit değer clamp'in mobil tabanıdır → iki yerleşimde aynı punto.
   Renk --sw-text-muted yerine bir ton koyu --sw-text-muted-strong. */
.sw-filter-cats a {
    padding: 8px 12px; border-radius: var(--sw-r1); font-size: .95rem;
    color: var(--sw-text-muted-strong); transition: background var(--sw-dur) var(--sw-ease);
}
.sw-filter-cats a:hover { background: var(--sw-border); color: var(--sw-text); }
.sw-filter-cats a.active { background: color-mix(in srgb, var(--sw-primary) 12%, transparent); color: var(--sw-primary); font-weight: 600; }

.sw-filter-cat-row { display: flex; align-items: center; gap: 2px; }
.sw-filter-cat-row a { flex: 1; }
.sw-filter-cat-expand {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 32px; height: 32px; border: none; border-radius: var(--sw-r1);
    background: none; color: var(--sw-text-muted); cursor: pointer;
    transition: background var(--sw-dur) var(--sw-ease);
}
.sw-filter-cat-expand:hover { background: var(--sw-border); color: var(--sw-text); }
.sw-filter-cat-expand svg { transition: transform var(--sw-dur) var(--sw-ease); }
.sw-filter-cat-expand.is-open svg { transform: rotate(180deg); }

.sw-filter-subcats { display: flex; flex-direction: column; padding-left: var(--sw-s4); }
.sw-filter-price { display: flex; flex-wrap: wrap; gap: var(--sw-s2); }
.sw-filter-price input {
    width: 90px; padding: 8px 12px; border: 1px solid var(--sw-border);
    border-radius: var(--sw-r1); background: var(--sw-surface); color: var(--sw-text);
    font-family: inherit;
}
.sw-filter-price .sw-btn { padding: 8px 16px; }

/* Mobilde (<960px) kategori+fiyat bloğu sağdan açılan bir modal (drawer); "Filtreler" butonuyla açılır,
   seçim uygulanınca (kategori/alt kategori linki veya fiyat "Uygula") otomatik kapanır. */
.sw-filters-toggle { display: none; }
.sw-filters-toggle-icon { width: 16px; height: 16px; flex-shrink: 0; }
.sw-filters-backdrop { display: none; }
.sw-filters-body-header { display: none; }
.sw-filters-close { display: none; }

/* Sütun sayısı (ızgara ikonlu butonlar) + sıralama + (mobilde) Filtreler butonu — her genişlikte görünür kontrol çubuğu. */
.sw-controls-bar { display: flex; align-items: center; gap: var(--sw-s2); }

.sw-select-wrap { position: relative; display: inline-flex; align-items: center; }
.sw-select-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--sw-text-muted); pointer-events: none;
}
.sw-sort-select {
    padding: 10px 12px 10px 32px; border: 1px solid var(--sw-border); border-radius: var(--sw-r2);
    background: var(--sw-surface); color: var(--sw-text);
    font-family: inherit; font-size: var(--sw-fs-sm); cursor: pointer;
}

.sw-cols-toggle {
    display: none; align-items: center; gap: 2px;
    border: 1px solid var(--sw-border); border-radius: var(--sw-r2); padding: 2px; flex-shrink: 0;
}
.sw-cols-toggle button {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: none; border-radius: var(--sw-r1);
    background: none; color: var(--sw-text-muted); cursor: pointer;
    transition: background var(--sw-dur) var(--sw-ease), color var(--sw-dur) var(--sw-ease);
}
.sw-cols-toggle button:hover { background: var(--sw-border); }
.sw-cols-toggle button.active { background: var(--sw-primary); color: var(--sw-on-primary); }

@media (min-width: 960px) { .sw-cols-toggle-desktop { display: flex; } }

@media (max-width: 959px) {
    .sw-controls-bar { width: 100%; }

    .sw-cols-toggle-mobile { display: flex; }

    .sw-filters-toggle {
        display: flex; align-items: center; gap: var(--sw-s2); flex-shrink: 0;
        width: auto; padding: 10px 14px;
        border: 1px solid var(--sw-border); border-radius: var(--sw-r2);
        background: var(--sw-surface); color: var(--sw-text);
        font-family: inherit; font-size: var(--sw-fs-sm); font-weight: 600; cursor: pointer;
    }

    .sw-select-wrap { flex: 1; min-width: 0; }
    .sw-sort-select { width: 100%; }

    .sw-filters-backdrop {
        display: block; position: fixed; inset: 0; z-index: 200;
        background: rgba(0, 0, 0, .5);
    }

    .sw-filters-body {
        display: flex; flex-direction: column; gap: var(--sw-s4);
        position: fixed; top: 0; bottom: 0; right: 0; z-index: 201;
        width: min(320px, 85vw); overflow-y: auto;
        background: var(--sw-surface); padding: var(--sw-s5);
        box-shadow: var(--sw-shadow-3);
        transform: translateX(100%);
        transition: transform var(--sw-dur) var(--sw-ease);
    }
    .sw-filters-body.is-open { transform: translateX(0); }

    .sw-filters-body-header { display: flex; align-items: center; justify-content: space-between; }
    .sw-filters-close {
        display: flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; border: none; border-radius: var(--sw-r1);
        background: none; color: var(--sw-text); font-size: 1.1rem; cursor: pointer;
    }
    .sw-filters-close:hover { background: var(--sw-border); }

    /* Panel açıkken arka planın kaydırılmasını engelle (destekleyen tarayıcılarda). */
    body:has(.sw-filters-body.is-open) { overflow: hidden; }
}

.sw-results-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sw-s3); margin-bottom: var(--sw-s5);
}
.sw-results-heading { display: flex; flex-direction: column; gap: 2px; }
.sw-results-title { font-size: var(--sw-fs-lg); font-weight: 700; margin: 0; }
.sw-results-subtitle { margin: 0; font-size: var(--sw-fs-md); font-weight: 600; color: var(--sw-text-muted); }
.sw-results-count { margin-left: var(--sw-s1); font-size: var(--sw-fs-sm); font-weight: 400; color: var(--sw-text-muted); }

/* ---------- Sayfalama ---------- */
.sw-pagination { display: flex; gap: var(--sw-s2); justify-content: center; margin-top: var(--sw-s6); }
.sw-page-link {
    display: grid; place-items: center; min-width: 38px; height: 38px; padding-inline: 8px;
    border-radius: var(--sw-r1); border: 1px solid var(--sw-border); font-size: var(--sw-fs-sm);
}
.sw-page-link:hover { background: var(--sw-border); }
.sw-page-current { background: var(--sw-primary); color: var(--sw-on-primary); border-color: transparent; }

/* ---------- Ürün detay ---------- */
.sw-breadcrumb { padding-block: var(--sw-s4); font-size: var(--sw-fs-sm); color: var(--sw-text-muted); display: flex; align-items: center; gap: var(--sw-s2); flex-wrap: wrap; }
.sw-breadcrumb a:hover { color: var(--sw-primary); }

/* Ana Sayfa metni yerine home iconu — ilk kırıntı her zaman bu. */
.sw-breadcrumb-home { display: inline-flex; align-items: center; }
.sw-breadcrumb-home svg { display: block; }

.sw-detail-layout {
    display: grid; gap: var(--sw-s6); padding-block: var(--sw-s4) var(--sw-s7);
    grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 960px) { .sw-detail-layout { grid-template-columns: 1fr 1fr; } }

.sw-gallery-main {
    aspect-ratio: 1; border-radius: var(--sw-r3); overflow: hidden;
    background: var(--sw-surface); border: 1px solid var(--sw-border);
    display: grid; place-items: center;
}
.sw-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.sw-gallery-thumbs { display: flex; gap: var(--sw-s2); margin-top: var(--sw-s3); overflow-x: auto; }
.sw-gallery-thumbs img {
    width: 84px; height: 84px; object-fit: contain;
    background: var(--sw-surface);
    border-radius: var(--sw-r2); border: 1px solid var(--sw-border);
}

.sw-detail-info { display: flex; flex-direction: column; gap: var(--sw-s4); }
.sw-detail-name { font-size: var(--sw-fs-xl); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.sw-detail-price .sw-price { font-size: var(--sw-fs-xl); }
.sw-vat-note { font-size: var(--sw-fs-xs); }
.sw-detail-desc { color: var(--sw-text-muted); line-height: 1.7; margin: 0; }
.sw-detail-subtitle { font-size: var(--sw-fs-md); font-weight: 700; margin: 0 0 var(--sw-s2); }
.sw-required {
    font-size: var(--sw-fs-xs); color: var(--sw-danger); font-weight: 600;
    margin-left: var(--sw-s2); text-transform: uppercase;
}

.sw-variant-values { display: flex; gap: var(--sw-s2); flex-wrap: wrap; }
.sw-swatch {
    width: 32px; height: 32px; border-radius: var(--sw-r-full);
    border: 2px solid var(--sw-border); cursor: pointer; display: inline-block;
}
.sw-variant-chip {
    padding: 6px 16px; border-radius: var(--sw-r-full); font-size: var(--sw-fs-sm);
    border: 1px solid var(--sw-border);
}

.sw-option-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sw-option-items li {
    display: flex; justify-content: space-between; padding: 8px 12px;
    border: 1px solid var(--sw-border); border-radius: var(--sw-r1); font-size: var(--sw-fs-sm);
}
.sw-option-price { color: var(--sw-primary); font-weight: 600; }

.sw-detail-meta { display: flex; gap: var(--sw-s4); font-size: var(--sw-fs-sm); color: var(--sw-text-muted); }

.sw-allergen-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sw-s2); }
.sw-allergen-label { font-size: var(--sw-fs-sm); font-weight: 600; color: var(--sw-text-muted); }
.sw-allergen-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--sw-primary) 8%, transparent);
    border: 1px solid var(--sw-border);
    font-size: var(--sw-fs-sm); color: var(--sw-text);
}
.sw-allergen-icon { font-size: 1.1em; line-height: 1; }

.sw-product-warnings {
    display: grid; gap: 8px; margin: var(--sw-s3) 0;
}
.sw-product-warning {
    display: grid; gap: 4px;
    padding: 12px 14px; border-radius: var(--sw-r1);
    border: 1px solid #fed7aa; border-left: 4px solid #f97316;
    background: #fff7ed; color: #7c2d12;
    font-size: var(--sw-fs-sm); line-height: 1.45; white-space: pre-wrap;
}
.sw-product-warning strong { color: #9a3412; }

/* Kişisel alerjen uyarısı (Faz 5, 15.08.2026).
   Rozet listesinden BİLEREK farklı görünüyor: 14 nötr rozetin arasında aynı
   dille yazılmış bir uyarı kaybolur. Renk tek sinyal DEĞİL — ikon ve "Dikkat"
   sözcüğü de var, renk körlüğünde de okunabilsin diye.
   Marka rengine değil sabit kırmızıya bağlı: tema kırmızı tonlardaysa uyarı
   normal içerikten ayırt edilemez hale gelirdi. */
.sw-allergen-alert {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; margin: var(--sw-s2) 0;
    border-radius: var(--sw-radius, 12px);
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
    font-size: var(--sw-fs-sm); line-height: 1.45;
}
.sw-allergen-alert-icon { font-size: 1.15em; line-height: 1.2; flex-shrink: 0; }

/* Sepet satırındaki kısa uyarı — ürün sayfasındakinin daha küçük hâli.
   Kampanya satırıyla aynı yerde duruyor ama farklı renkte: ikisi de "ek bilgi"
   ama biri kazanç, diğeri risk. */
.sw-cart-allergen {
    display: block; font-size: var(--sw-fs-sm); font-weight: 600;
    color: #b91c1c; margin-top: 2px;
}

/* Duyuru / haber (Faz 5, 15.08.2026) */
.sw-ann-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
               gap: var(--sw-s3); margin-top: var(--sw-s3); }
.sw-ann-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
               color: inherit; background: var(--sw-surface); border: 1px solid var(--sw-border);
               border-radius: var(--sw-radius, 14px); transition: border-color .15s, transform .15s; }
.sw-ann-card:hover { border-color: var(--sw-primary); transform: translateY(-2px); }
.sw-ann-img { width: 100%; height: 160px; object-fit: cover; }
.sw-ann-body { padding: var(--sw-s3); }
.sw-ann-meta { display: flex; align-items: center; gap: var(--sw-s2);
               font-size: var(--sw-fs-sm); color: var(--sw-text-muted); margin-bottom: 6px; }
.sw-ann-tag { background: color-mix(in srgb, var(--sw-primary) 12%, transparent);
              color: var(--sw-primary); font-weight: 700; font-size: .72rem;
              padding: 2px 8px; border-radius: 999px; }
.sw-ann-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
/* Özet iki satırla sınırlı: kartlar farklı yükseklikte olursa ızgara bozulur. */
.sw-ann-summary { font-size: var(--sw-fs-sm); color: var(--sw-text-muted); margin: 0;
                  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                  overflow: hidden; }

.sw-ann-detail { max-width: 760px; }
.sw-ann-detail-img { width: 100%; max-height: 380px; object-fit: cover;
                     border-radius: var(--sw-radius, 14px); margin: var(--sw-s3) 0; }
.sw-ann-lead { font-size: 1.05rem; color: var(--sw-text-muted); line-height: 1.6; }
.sw-ann-body-html { line-height: 1.7; }
.sw-ann-body-html img { max-width: 100%; height: auto; border-radius: 10px; }

/* Ürün değerlendirmeleri (Faz 5, 16.08.2026) */
.sw-rv-block { margin-top: var(--sw-s4); }
.sw-rv-summary { display: flex; align-items: center; gap: var(--sw-s2); margin-bottom: var(--sw-s3); }
.sw-rv-avg { font-size: 1.6rem; font-weight: 800; line-height: 1; }
/* Yıldız rengi marka renginden BAĞIMSIZ: temanın ana rengi sarıya yakınsa
   dolu/boş yıldız ayırt edilemez hale gelirdi. */
.sw-rv-stars { color: #f59e0b; letter-spacing: 1px; }
.sw-rv-item { padding: var(--sw-s3) 0; border-top: 1px solid var(--sw-border); }
.sw-rv-item-head { display: flex; align-items: center; gap: var(--sw-s2);
                   font-size: var(--sw-fs-sm); margin-bottom: 4px; }
.sw-rv-comment { margin: 0; font-size: var(--sw-fs-sm); line-height: 1.6; }

/* Sipariş detayındaki değerlendirme formu (Faz 5) */
.sw-rvform { padding: .6rem .8rem; margin: 0 0 var(--sw-s2);
             background: color-mix(in srgb, var(--sw-primary) 4%, transparent);
             border-radius: var(--sw-radius, 10px); }
.sw-rvform-label { display: block; font-size: var(--sw-fs-sm); color: var(--sw-text-muted); margin-bottom: 4px; }
.sw-rvform-stars { display: flex; gap: 2px; }
/* Yıldız butonu: boş hâli gri, seçili hâli sarı. Renk tek sinyal değil —
   aria-checked ekran okuyucuya durumu ayrıca bildiriyor. */
.sw-rvform-star { background: none; border: none; padding: 0 2px; cursor: pointer;
                  font-size: 1.5rem; line-height: 1; color: #d1d5db; }
.sw-rvform-star.on { color: #f59e0b; }
.sw-rvform-text { width: 100%; margin-top: .5rem; padding: .5rem .7rem; font: inherit;
                  font-size: var(--sw-fs-sm); border: 1px solid var(--sw-border);
                  border-radius: var(--sw-radius, 10px); background: var(--sw-surface); color: inherit; }
.sw-rvform-send { margin-top: .5rem; }
.sw-rvform-done { font-size: var(--sw-fs-sm); color: #166534; margin: 0 0 var(--sw-s2); }

/* Sepeti kasaya devret (Faz 5) */
.sw-tr-block { margin-top: var(--sw-s3); padding-top: var(--sw-s3);
               border-top: 1px dashed var(--sw-border); text-align: center; }
.sw-tr-btn { width: 100%; display: inline-flex; align-items: center;
             justify-content: center; gap: 6px; }
.sw-tr-hint { font-size: var(--sw-fs-sm); color: var(--sw-text-muted); margin-top: 6px; }
.sw-tr-ticket { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* QR'ın arkası HER ZAMAN beyaz: koyu temada sessiz bölge kaybolur ve
   okuyucu kodu bulamaz. */
.sw-tr-qr { background: #fff; padding: 8px; border-radius: 10px; display: block; }
.sw-tr-code { font-family: monospace; font-size: 1.1rem; font-weight: 800;
              letter-spacing: .1em; background: var(--sw-primary);
              color: var(--sw-on-primary); border-radius: 8px; padding: 4px 12px; }
.sw-tr-countdown { font-size: var(--sw-fs-sm); color: var(--sw-text-muted); }
.sw-tr-expired { font-size: var(--sw-fs-sm); color: #b91c1c; font-weight: 600; }
.sw-tr-again { font-size: var(--sw-fs-sm); padding: 4px 12px; }
.sw-tr-error { color: #b91c1c; font-size: var(--sw-fs-sm); margin-top: 6px; }

.sw-detail-cta { align-self: start; }
.sw-detail-cta:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.sw-specs { border: 1px solid var(--sw-border); border-radius: var(--sw-r2); padding: var(--sw-s3) var(--sw-s4); }
.sw-specs summary { cursor: pointer; font-weight: 600; }
.sw-specs div { padding-top: var(--sw-s3); color: var(--sw-text-muted); white-space: pre-line; }

/* ---------- Arama sayfası ---------- */
.sw-search-topbar { display: flex; align-items: center; gap: var(--sw-s3); margin-bottom: var(--sw-s5); }
.sw-search-form { display: flex; gap: var(--sw-s2); margin-bottom: 0; max-width: 560px; flex: 1; }
.sw-search-input {
    flex: 1; padding: 12px 20px; border: 1px solid var(--sw-border);
    border-radius: var(--sw-r-full); background: var(--sw-surface); color: var(--sw-text);
    font-family: inherit; font-size: var(--sw-fs-md);
}
.sw-search-input:focus { outline: none; border-color: var(--sw-primary); }
.sw-search-close { flex-shrink: 0; }

@media (max-width: 959px) {
    /* Az/hiç sonuç olduğunda footer hemen altta başlayıp sıkışık görünüyordu — mobilde header
       yüksekliği (64px) düşülerek ekranın kalanını dolduracak şekilde minimum yükseklik verildi. */
    .sw-search-page { min-height: calc(100dvh - 64px); }
}

/* ---------- Varyant/opsiyon seçimi ---------- */
.sw-swatch { padding: 0; }
.sw-swatch.selected { border-color: var(--sw-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw-primary) 30%, transparent); }
.sw-variant-chip { background: transparent; color: var(--sw-text); font-family: inherit; cursor: pointer; }
.sw-variant-chip.selected { background: var(--sw-primary); color: var(--sw-on-primary); border-color: transparent; }

/* ---------- Varyant seçici (30.07.2026, referans: paninopizza.com ürün sayfası) ----------
   Neden çip değil KUTU? Her seçeneğin yanında kendi fiyatı yazıyor ("Büyük  320,00 ₺");
   yuvarlak çipte iki satırlık bu içerik sığmıyor ve fiyatlar hizasız duruyordu. Sabit
   genişlikli otomatik ızgara, seçenek sayısı 2 de olsa 6 da olsa düzenli bir sıra veriyor;
   mobilde kendiliğinden alt alta iniyor. */
.sw-variant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sw-s2);
}

.sw-variant-opt {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    /* 44px dokunma hedefi — boy seçimi mobilde en çok dokunulan alan. */
    min-height: 56px; padding: 10px 14px;
    font-family: inherit; text-align: start;
    color: var(--sw-text); background: transparent;
    border: 1.5px solid var(--sw-border); border-radius: var(--sw-r2);
    cursor: pointer;
    transition: border-color var(--sw-dur) var(--sw-ease), background var(--sw-dur) var(--sw-ease);
}

.sw-variant-opt:hover { border-color: var(--sw-primary); }

.sw-variant-opt.is-on {
    border-color: var(--sw-primary);
    background: color-mix(in srgb, var(--sw-primary) 8%, transparent);
}

.sw-variant-opt:focus-visible { outline: 2px solid var(--sw-primary); outline-offset: 2px; }

.sw-variant-opt-name { font-size: var(--sw-fs-sm); font-weight: 700; line-height: 1.25; }

.sw-variant-opt-price {
    font-size: var(--sw-fs-sm); font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--sw-primary);
}

/* Renk varyantlarında adın soluna küçük bir renk noktası. */
.sw-variant-dot {
    width: 14px; height: 14px; border-radius: var(--sw-r-full);
    border: 1px solid color-mix(in srgb, var(--sw-text) 20%, transparent);
    display: inline-block; margin-bottom: 2px;
}

/* Kartta "başlangıç" etiketi: varyant fiyatları farklıysa kartta EN UCUZ/varsayılan
   yazdığı için, detaydaki daha yüksek rakam sürpriz olmasın. */
.sw-price-from {
    font-size: var(--sw-fs-xs); font-weight: 500;
    color: var(--sw-text-muted);
    margin-inline-start: 4px;
}
.sw-option-items li { cursor: pointer; transition: border-color var(--sw-dur) var(--sw-ease), background var(--sw-dur) var(--sw-ease); }
.sw-option-items li:hover { border-color: var(--sw-primary); }
.sw-option-items li.selected { border-color: var(--sw-primary); background: color-mix(in srgb, var(--sw-primary) 8%, transparent); }
.sw-option-mark { color: var(--sw-primary); margin-right: var(--sw-s2); }

/* ---------- Adet + sepete ekle ---------- */
.sw-addtocart-row { display: flex; gap: var(--sw-s3); align-items: center; flex-wrap: wrap; }
.sw-qty {
    display: inline-flex; align-items: center; gap: var(--sw-s2);
    border: 1px solid var(--sw-border); border-radius: var(--sw-r-full); padding: 4px;
}
.sw-qty button {
    width: 36px; height: 36px; border: none; border-radius: var(--sw-r-full);
    background: var(--sw-border); color: var(--sw-text); font-size: 18px; cursor: pointer;
    display: grid; place-items: center;
}
.sw-qty button:hover { background: var(--sw-primary); color: var(--sw-on-primary); }
.sw-qty span { min-width: 32px; text-align: center; font-weight: 700; }

/* ---------- Uyarı kutuları ---------- */
.sw-alert { padding: var(--sw-s3) var(--sw-s4); border-radius: var(--sw-r2); font-size: var(--sw-fs-sm); margin-block: var(--sw-s2); }
.sw-alert-success { background: color-mix(in srgb, var(--sw-success) 12%, transparent); color: var(--sw-success); }
.sw-alert-error { background: color-mix(in srgb, var(--sw-danger) 12%, transparent); color: var(--sw-danger); }
.sw-alert-link { margin-left: var(--sw-s3); font-weight: 700; text-decoration: underline; color: inherit; }

/* ---------- Header sepet rozeti ---------- */
.sw-cart-link { position: relative; }
.sw-cart-badge {
    position: absolute; top: 0; right: 0;
    min-width: 18px; height: 18px; padding-inline: 4px;
    border-radius: var(--sw-r-full); background: var(--sw-danger); color: #fff;
    font-size: 11px; font-weight: 700; display: grid; place-items: center;
}

/* ---------- Sepet sayfası ---------- */
.sw-cart-layout { display: grid; gap: var(--sw-s6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .sw-cart-layout { grid-template-columns: 1fr 340px; } }

.sw-cart-lines { display: flex; flex-direction: column; gap: var(--sw-s3); }
.sw-cart-line {
    display: grid; grid-template-columns: 72px 1fr auto auto auto;
    gap: var(--sw-s3); align-items: center;
    background: var(--sw-surface); border: 1px solid var(--sw-border);
    border-radius: var(--sw-r3); padding: var(--sw-s3);
}
.sw-cart-media { width: 72px; height: 72px; border-radius: var(--sw-r2); overflow: hidden; background: var(--sw-border); }
.sw-cart-media img { width: 100%; height: 100%; object-fit: cover; }
.sw-cart-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-cart-name { font-weight: 600; }
.sw-cart-name:hover { color: var(--sw-primary); }
.sw-cart-sub { font-size: var(--sw-fs-xs); }
.sw-cart-discount { font-size: var(--sw-fs-xs); color: var(--sw-success); font-weight: 600; }
.sw-cart-linetotal { font-weight: 700; color: var(--sw-primary); white-space: nowrap; }
.sw-cart-remove {
    border: none; background: transparent; color: var(--sw-text-muted);
    cursor: pointer; font-size: 16px; padding: var(--sw-s2);
}
.sw-cart-remove:hover { color: var(--sw-danger); }

.sw-cart-summary {
    background: var(--sw-surface); border: 1px solid var(--sw-border);
    border-radius: var(--sw-r3); padding: var(--sw-s5);
    display: flex; flex-direction: column; gap: var(--sw-s3);
    position: sticky; top: 80px;
}
.sw-summary-row { display: flex; justify-content: space-between; font-size: var(--sw-fs-sm); }
.sw-summary-discount { color: var(--sw-success); }
.sw-summary-total { font-size: var(--sw-fs-lg); font-weight: 800; border-top: 1px solid var(--sw-border); padding-top: var(--sw-s3); }
.sw-summary-cta { width: 100%; }
.sw-summary-cta:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.sw-btn-ghost { background: transparent; color: var(--sw-text-muted); border-color: var(--sw-border); }
.sw-btn-ghost:hover { color: var(--sw-danger); border-color: var(--sw-danger); }

.sw-cart-empty { text-align: center; padding-block: var(--sw-s8); display: flex; flex-direction: column; gap: var(--sw-s4); align-items: center; }
.sw-cart-empty-icon { color: var(--sw-muted, #9CA3AF); opacity: .6; }
.sw-cart-empty-text { text-transform: uppercase; }

@media (max-width: 640px) {
    .sw-cart-line { grid-template-columns: 56px 1fr auto; grid-template-rows: auto auto; }
    .sw-cart-media { width: 56px; height: 56px; grid-row: span 2; }
    .sw-cart-linetotal { grid-column: 3; }
}

/* ---------- Formlar (giriş/kayıt/checkout) ---------- */
.sw-auth { display: grid; place-items: center; }
.sw-auth-card {
    width: 100%; max-width: 440px;
    background: var(--sw-surface); border: 1px solid var(--sw-border);
    border-radius: var(--sw-r3); padding: var(--sw-s6);
    display: flex; flex-direction: column; gap: var(--sw-s4);
}
.sw-auth-alt { text-align: center; font-size: var(--sw-fs-sm); }
.sw-auth-alt a { color: var(--sw-primary); font-weight: 600; }
.sw-auth-cta { text-decoration: underline; letter-spacing: .04em; }

.sw-form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sw-s3); }
.sw-form-field label { font-size: var(--sw-fs-sm); font-weight: 600; }
.sw-forgot-link {
    align-self: flex-end;
    background: none; border: none; padding: 0; margin: 0;
    font-size: var(--sw-fs-sm); font-weight: 600; color: var(--sw-primary);
    cursor: pointer; text-decoration: underline; font-family: inherit;
}
.sw-form-field input, .sw-form-field select, .sw-form-field textarea {
    padding: 11px 14px; border: 1px solid var(--sw-border); border-radius: var(--sw-r1);
    background: var(--sw-bg); color: var(--sw-text); font-family: inherit; font-size: var(--sw-fs-md);
}
.sw-form-field input:focus, .sw-form-field select:focus, .sw-form-field textarea:focus {
    outline: none; border-color: var(--sw-primary);
}
.sw-form-row { display: grid; gap: var(--sw-s3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .sw-form-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } }
.sw-form-check { display: flex; gap: var(--sw-s2); align-items: flex-start; font-size: var(--sw-fs-sm); margin-bottom: var(--sw-s3); }
.sw-form-check a { color: var(--sw-primary); text-decoration: underline; }
.sw-form-submit { width: 100%; }

.sw-password-field { position: relative; }
.sw-password-field input { padding-right: 42px; width: 100%; box-sizing: border-box; }
.sw-password-toggle {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--sw-r1);
    background: none; color: var(--sw-text); opacity: .55; cursor: pointer;
}
.sw-password-toggle:hover { opacity: .9; }
.sw-password-toggle svg { width: 18px; height: 18px; }
.sw-password-toggle .sw-eye-closed { display: none; }
.sw-password-toggle.is-visible .sw-eye-open { display: none; }
.sw-password-toggle.is-visible .sw-eye-closed { display: block; }

/* ---------- Checkout ---------- */
.sw-checkout-layout { display: grid; gap: var(--sw-s6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .sw-checkout-layout { grid-template-columns: 1fr 360px; } }
.sw-checkout-branch {
    background: color-mix(in srgb, var(--sw-primary) 8%, transparent);
    border-radius: var(--sw-r2); padding: var(--sw-s3) var(--sw-s4);
    font-size: var(--sw-fs-sm); margin-bottom: var(--sw-s4);
}
.sw-branch-select select {
    width: 100%; padding: 11px 14px; border: 1px solid var(--sw-border);
    border-radius: var(--sw-r1); background: var(--sw-bg); color: var(--sw-text);
    font-family: inherit;
}

.sw-payment-methods { display: flex; flex-direction: column; gap: var(--sw-s2); }
.sw-payment-method {
    display: flex; gap: var(--sw-s3); align-items: center;
    border: 1px solid var(--sw-border); border-radius: var(--sw-r2);
    padding: var(--sw-s3) var(--sw-s4); cursor: pointer;
    transition: border-color var(--sw-dur) var(--sw-ease);
}
.sw-payment-method:hover { border-color: var(--sw-primary); }
.sw-payment-method.selected {
    border-color: var(--sw-primary);
    background: color-mix(in srgb, var(--sw-primary) 8%, transparent);
}

/* ---------- Sipariş listesi / takip ---------- */
.sw-order-list { display: flex; flex-direction: column; gap: var(--sw-s2); }
.sw-order-row {
    display: flex; gap: var(--sw-s4); align-items: center; flex-wrap: wrap;
    background: var(--sw-surface); border: 1px solid var(--sw-border);
    border-radius: var(--sw-r2); padding: var(--sw-s3) var(--sw-s4);
}
a.sw-order-row:hover { border-color: var(--sw-primary); }
.sw-order-no { font-weight: 700; }
.sw-order-total { margin-left: auto; font-weight: 700; color: var(--sw-primary); }
.sw-order-status { font-size: var(--sw-fs-xs); font-weight: 700; padding: 4px 12px; border-radius: var(--sw-r-full); background: var(--sw-border); }
.sw-order-status[data-status="TESLIM"] { background: color-mix(in srgb, var(--sw-success) 15%, transparent); color: var(--sw-success); }
.sw-order-status[data-status="IPTAL"], .sw-order-status[data-status="RED"] { background: color-mix(in srgb, var(--sw-danger) 15%, transparent); color: var(--sw-danger); }
.sw-order-address { max-width: 200px; text-align: right; }

/* ---------- Hesabım (üye menüsü) ---------- */

/* Üst özet şeridi: "Tanıma, hatırlamaya tercih edilir" — kullanıcı hangi hesapta olduğunu
   isim + telefon/e-posta ile tek bakışta teyit eder (oryantasyon, aesthetic-usability effect). */
.sw-account-hero { display: flex; align-items: center; gap: var(--sw-s4); margin-bottom: var(--sw-s2); }
.sw-account-avatar {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--sw-r-full);
    display: grid; place-items: center;
    background: var(--sw-primary); color: var(--sw-on-primary);
    font-size: var(--sw-fs-lg); font-weight: 700;
}
.sw-account-hero-meta { margin-top: 2px; }

.sw-account-layout { display: grid; gap: var(--sw-s5); grid-template-columns: 1fr; margin-top: var(--sw-s4); }
@media (min-width: 760px) { .sw-account-layout { grid-template-columns: 220px 1fr; align-items: start; } }

.sw-account-nav { display: flex; flex-direction: column; gap: var(--sw-s2); }

.sw-account-tablist { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sw-s2); }
@media (min-width: 760px) { .sw-account-tablist { flex-direction: column; flex-wrap: nowrap; gap: 2px; } }

/* Çıkış, sekme listesinden görsel olarak ayrık: bu bir içerik paneli değil, sayfadan çıkış —
   Jakob Yasası (diğer sitelerde de çıkış ayrık durur) + yanlış tıklamayı azaltmak için mesafe. */
.sw-account-nav-divider { border: none; border-top: 1px solid var(--sw-border); margin: var(--sw-s2) 0; }
@media (min-width: 760px) { .sw-account-nav-divider { margin: var(--sw-s3) 0 0; } }

.sw-account-nav button, .sw-account-nav-link {
    display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
    padding: var(--sw-s3) var(--sw-s4); border-radius: var(--sw-r2); border: 1px solid transparent;
    background: none; color: var(--sw-text); font-family: inherit; font-size: var(--sw-fs-md);
    cursor: pointer; text-decoration: none;
}
.sw-account-nav-icon { flex: 0 0 auto; width: 18px; height: 18px; opacity: .75; }
.sw-account-nav button:hover, .sw-account-nav-link:hover { background: var(--sw-surface); }
.sw-account-nav button:hover .sw-account-nav-icon, .sw-account-nav-link:hover .sw-account-nav-icon { opacity: 1; }
.sw-account-nav button.active { background: var(--sw-surface); border-color: var(--sw-border); font-weight: 700; color: var(--sw-primary); }
.sw-account-nav button.active .sw-account-nav-icon { opacity: 1; }
.sw-account-nav-link { color: var(--sw-danger); }
.sw-account-nav-link .sw-account-nav-icon { opacity: .85; }

.sw-account-content { min-width: 0; }
.sw-account-card { display: flex; flex-direction: column; gap: var(--sw-s3); max-width: 480px; }

/* Boş durum: tek satır link yerine metin + gerçek buton (Fitts Yasası: sonraki adımın hedefi
   büyüsün). Sipariş/adres gibi birden çok boş durumda tekrar kullanılıyor. */
.sw-account-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sw-s3); padding: var(--sw-s5) 0; }

.sw-address-list { display: flex; flex-direction: column; gap: var(--sw-s2); margin-bottom: var(--sw-s4); }
.sw-address-card { background: var(--sw-surface); border: 1px solid var(--sw-border); border-radius: var(--sw-r2); padding: var(--sw-s3) var(--sw-s4); }
.sw-address-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sw-s2); margin-bottom: var(--sw-s1); }
.sw-address-card-actions { display: flex; gap: var(--sw-s3); }
.sw-danger-link { color: var(--sw-danger); }
.sw-address-form { border-top: 1px solid var(--sw-border); padding-top: var(--sw-s4); margin-top: var(--sw-s2); }
.sw-address-add-btn { align-self: flex-start; }

.sw-timeline { display: flex; gap: 0; margin-block: var(--sw-s5) var(--sw-s6); }
.sw-timeline-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sw-s2); position: relative; }
.sw-timeline-step::before {
    content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px;
    background: var(--sw-border);
}
.sw-timeline-step:first-child::before { display: none; }
.sw-timeline-step.done::before, .sw-timeline-step.active::before { background: var(--sw-primary); }
.sw-timeline-dot {
    width: 20px; height: 20px; border-radius: var(--sw-r-full);
    background: var(--sw-border); position: relative; z-index: 1;
}
.sw-timeline-step.done .sw-timeline-dot { background: var(--sw-primary); }
.sw-timeline-step.active .sw-timeline-dot {
    background: var(--sw-primary);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--sw-primary) 25%, transparent);
}
.sw-timeline-label { font-size: var(--sw-fs-xs); color: var(--sw-text-muted); text-align: center; }
.sw-timeline-step.active .sw-timeline-label { color: var(--sw-primary); font-weight: 700; }

/* ---------- Autocomplete (SearchBox) ---------- */
.sw-searchbox { position: relative; }
.sw-searchbox input {
    width: 200px; padding: 9px 16px;
    border: 1px solid var(--sw-border); border-radius: var(--sw-r-full);
    background: var(--sw-surface); color: var(--sw-text);
    font-family: inherit; font-size: var(--sw-fs-sm);
    transition: width var(--sw-dur) var(--sw-ease), border-color var(--sw-dur) var(--sw-ease);
}
.sw-searchbox input:focus { width: 280px; outline: none; border-color: var(--sw-primary); }
.sw-searchbox-panel {
    position: absolute; top: calc(100% + 8px); right: 0; width: 340px; z-index: 100;
    background: var(--sw-surface); border: 1px solid var(--sw-border);
    border-radius: var(--sw-r2); box-shadow: var(--sw-shadow-3); overflow: hidden;
}
.sw-searchbox-item {
    display: flex; align-items: center; gap: var(--sw-s3);
    padding: var(--sw-s2) var(--sw-s3); font-size: var(--sw-fs-sm);
}
.sw-searchbox-item:hover { background: color-mix(in srgb, var(--sw-primary) 8%, transparent); }
.sw-searchbox-item img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--sw-r1); }
.sw-searchbox-name { flex: 1; }
.sw-searchbox-price { color: var(--sw-primary); font-weight: 700; white-space: nowrap; }
.sw-searchbox-all {
    display: block; padding: var(--sw-s3); text-align: center;
    font-size: var(--sw-fs-xs); font-weight: 700; color: var(--sw-primary);
    border-top: 1px solid var(--sw-border);
}

/* ---------- Kampanya kartları + geri sayım ---------- */
.sw-campaign-grid { display: grid; gap: var(--sw-s5); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .sw-campaign-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .sw-campaign-grid { grid-template-columns: repeat(3, 1fr); } }

.sw-campaign-card {
    border-radius: var(--sw-r3); overflow: hidden;
    background: var(--sw-surface); border: 1px solid var(--sw-border);
    box-shadow: var(--sw-shadow-1); display: flex; flex-direction: column;
    transition: transform var(--sw-dur) var(--sw-ease), box-shadow var(--sw-dur) var(--sw-ease);
}
.sw-campaign-card:hover { transform: translateY(-4px); box-shadow: var(--sw-shadow-2); }
/* 28.07.2026: hero ile aynı sorun — kampanya banner'ları 16:9 değilse cover kenarları kırpıyordu
   (indirim oranı/telefon numarası genelde kenarda duruyor). Aynı çözüm: bulanık dolgu + contain. */
.sw-campaign-media { position: relative; aspect-ratio: 16/9; background: var(--sw-border); overflow: hidden; }
.sw-campaign-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sw-campaign-media-bg { object-fit: cover; filter: blur(20px) saturate(1.15) brightness(.9); transform: scale(1.15); z-index: 0; }
.sw-campaign-media-img { object-fit: contain; object-position: center; z-index: 1; }
.sw-campaign-media .sw-badge-discount { z-index: 2; }
.sw-campaign-body { padding: var(--sw-s4); display: flex; flex-direction: column; gap: var(--sw-s3); }
.sw-campaign-name { margin: 0; font-size: var(--sw-fs-lg); font-weight: 700; }
.sw-campaign-desc { margin: 0; color: var(--sw-text-muted); font-size: var(--sw-fs-sm); }

.sw-countdown { display: flex; gap: var(--sw-s2); margin-top: auto; }
.sw-countdown-cell {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    background: color-mix(in srgb, var(--sw-primary) 10%, transparent);
    border-radius: var(--sw-r2); padding: var(--sw-s2);
}
.sw-countdown-cell strong { font-size: var(--sw-fs-lg); color: var(--sw-primary); font-variant-numeric: tabular-nums; }
.sw-countdown-cell small { font-size: var(--sw-fs-xs); color: var(--sw-text-muted); }

/* ---------- Blog ---------- */
.sw-blog-grid { display: grid; gap: var(--sw-s5); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .sw-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .sw-blog-grid { grid-template-columns: repeat(3, 1fr); } }

.sw-blog-card {
    border-radius: var(--sw-r3); overflow: hidden;
    background: var(--sw-surface); border: 1px solid var(--sw-border);
    box-shadow: var(--sw-shadow-1);
    transition: transform var(--sw-dur) var(--sw-ease), box-shadow var(--sw-dur) var(--sw-ease);
}
.sw-blog-card:hover { transform: translateY(-4px); box-shadow: var(--sw-shadow-2); }
.sw-blog-media { aspect-ratio: 16/9; background: var(--sw-border); }
.sw-blog-media img { width: 100%; height: 100%; object-fit: cover; }
.sw-blog-body { padding: var(--sw-s4); display: flex; flex-direction: column; gap: var(--sw-s2); }
.sw-blog-date { font-size: var(--sw-fs-xs); }
.sw-blog-title { margin: 0; font-size: var(--sw-fs-lg); font-weight: 700; }
.sw-blog-summary { margin: 0; color: var(--sw-text-muted); font-size: var(--sw-fs-sm); }

/* ---------- Prose (markdown içerik) ---------- */
.sw-prose-wrap { max-width: 760px; }
.sw-prose { line-height: 1.75; }
.sw-prose h1 { font-size: var(--sw-fs-xl); letter-spacing: -.02em; }
.sw-prose h2 { font-size: var(--sw-fs-lg); margin-top: var(--sw-s6); }
.sw-prose p, .sw-prose li { color: var(--sw-text); }
.sw-prose img { border-radius: var(--sw-r3); margin-block: var(--sw-s4); }
.sw-prose-hero { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.sw-prose a { color: var(--sw-primary); text-decoration: underline; }
.sw-prose blockquote {
    margin: var(--sw-s4) 0; padding: var(--sw-s3) var(--sw-s4);
    border-left: 3px solid var(--sw-primary);
    background: color-mix(in srgb, var(--sw-primary) 6%, transparent);
    border-radius: 0 var(--sw-r2) var(--sw-r2) 0;
}

.sw-contact-grid { display: grid; gap: var(--sw-s5); }

/* ---------- SSS akordeon ---------- */
.sw-faq { display: flex; flex-direction: column; gap: var(--sw-s2); margin-top: var(--sw-s4); }
.sw-faq-item {
    border: 1px solid var(--sw-border); border-radius: var(--sw-r2);
    background: var(--sw-surface); padding: var(--sw-s3) var(--sw-s4);
}
.sw-faq-item summary {
    cursor: pointer; font-weight: 600; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: var(--sw-s3);
}
.sw-faq-item summary::after { content: "+"; color: var(--sw-primary); font-size: 20px; font-weight: 700; }
.sw-faq-item[open] summary::after { content: "−"; }
.sw-faq-item[open] { border-color: var(--sw-primary); }
.sw-faq-item > div { padding-top: var(--sw-s2); color: var(--sw-text-muted); }

/* ---------- Canlı takip göstergesi ---------- */
.sw-live-dot {
    display: inline-block; width: 10px; height: 10px; margin-left: var(--sw-s2);
    border-radius: var(--sw-r-full); background: var(--sw-success);
    animation: sw-pulse 1.6s infinite;
}
@keyframes sw-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sw-success) 50%, transparent); }
    70%  { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* =====================================================
   Şablon standart stilleri (Blazor form/hata altyapısı)
   ===================================================== */
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

#blazor-error-ui {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    background: var(--sw-warn); color: #17171C;
    padding: .6rem 1.25rem .7rem;
    box-shadow: 0 -2px 12px rgba(0,0,0,.2);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
#blazor-error-ui .reload { text-decoration: underline; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
    border-radius: var(--sw-r2);
}
.blazor-error-boundary::after { content: "Bir hata oluştu."; }