/* ============================================================================
   A101 Kapıda - Custom Store Styles
   Mobil-öncelikli (mobile-first) responsive düzen.
   ============================================================================ */

/* ---------- Temel sıfırlama ---------- */
html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Yatay taşmayı tamamen engelle */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
}

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

/* Tüm img ve medya öğeleri taşmasın */
img, svg, video, canvas {
    max-width: 100%;
}

img {
    height: auto;
    display: block;
}

/* ============================================================================
   KADEME: Tailwind CDN'e düşmeyen kritik layout utility'leri
   (Bu kurallar, Tailwind üretilmese bile sayfa geometrisini garanti eder.)
   ============================================================================ */

/* Ortala + maksimum genişlik container'ları (max-w-* karşılıkları) */
.max-w-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; }
.max-w-6xl { max-width: 72rem; margin-left: auto; margin-right: auto; }
.max-w-5xl { max-width: 64rem; margin-left: auto; margin-right: auto; }
.max-w-4xl { max-width: 56rem; margin-left: auto; margin-right: auto; }
.max-w-3xl { max-width: 48rem; margin-left: auto; margin-right: auto; }
.max-w-2xl { max-width: 42rem; margin-left: auto; margin-right: auto; }
.max-w-xl  { max-width: 36rem; margin-left: auto; margin-right: auto; }
.max-w-lg  { max-width: 32rem; margin-left: auto; margin-right: auto; }
.max-w-md  { max-width: 28rem; margin-left: auto; margin-right: auto; }
.max-w-sm  { max-width: 24rem; margin-left: auto; margin-right: auto; }

/* Temel flex/grid yardımcıları (Tailwind yoksa bozulmasın) */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-1 { flex: 1 1 0%; min-width: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.w-full { width: 100%; }
.shrink-0 { flex-shrink: 0; }
.text-center { text-align: center; }

/* Grid (Tailwind yoksa da çalışsın) */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Yatay kaydırmalı scroll container */
.overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ============================================================================
   MOBIL (max-width: 639px) — Tailwind sm: önekine eşdeğer garantili kurallar
   ============================================================================ */
@media (max-width: 639px) {

    /* Container'lar varsayılan olarak tüm genişliği kaplasın, asla taşmasın */
    main,
    main.max-w-7xl,
    main.max-w-4xl,
    main.max-w-3xl,
    main.max-w-2xl {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Masaüstü 3-4-5 kolonlu grid'ler mobilde 2 kolona düşsün */
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid.grid-cols-3,
    .grid.grid-cols-4,
    .grid.grid-cols-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* Masaüstü 2 kolon zaten 2 kolon, sadece boşluk sıkılaşsın */
    .grid-cols-2,
    .grid.grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .product-card { border-radius: 12px; }
    .product-image-box { padding: 8px; }
    h2 { font-size: 1.1rem !important; }

    /* Genel mobil tipografi — daha sıkı ve profesyonel */
    body { font-size: 14px; }
    h1 { font-size: 1.25rem !important; }
    h3 { font-size: 1rem !important; }

    /* Boşlukları sıkılaştır */
    main { padding-top: 10px !important; padding-bottom: 10px !important; }
    main > section, main > div { margin-bottom: 16px; }

    /* ==================================================================
       KOMPAKT ÜRÜN KARTI — tipik mobil e-ticaret (Trendyol/Amazon) ayarı
       ================================================================== */

    /* Görsel kutusu: kare yerine daha kısa, kart daha kompakt */
    .product-image-box {
        aspect-ratio: 1 / 1;
        height: 140px;
        min-height: 140px;
        padding: 6px;
    }

    .product-image-box img {
        max-height: 130px;
    }

    /* Kart iç dolgu azalt */
    .product-card { padding-bottom: 2px; }

    /* Ürün adı: daha küçük, 2 satır */
    .product-name {
        font-size: 11px !important;
        line-height: 1.25;
        min-height: 30px !important;
    }

    /* Birim (Adet) ve meta daha küçük */
    .product-card .text-\[11px\] {
        font-size: 10px !important;
        margin-top: 2px !important;
    }

    /* Fiyat daha küçük ama okunur */
    .product-card .text-base {
        font-size: 14px !important;
    }

    /* Ekle butonu daha ince */
    .btn-add-cart {
        padding: 7px 10px;
        font-size: 11px;
        min-height: 36px;
        border-radius: 10px;
    }

    /* Eski fiyat (üstü çizili) daha küçük */
    .product-card .line-through {
        font-size: 10px !important;
    }

    /* Kart içindeki dikey boşlukları azalt */
    .product-card .mb-3 { margin-bottom: 6px !important; }
}

/* ---------- Ürün Kartı ---------- */
.product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
    width: 100%;
    height: 100%;
}

.product-card:hover {
    box-shadow: 0 10px 25px -5px rgba(2, 132, 199, .12);
    transform: translateY(-2px);
}

/* Ürün adı 2 satırla sınırlı (line-clamp polyfill) */
.product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Sepete ekle butonu mobilde dokunulabilir boyutta (min 44px) */
@media (max-width: 639px) {
    .btn-add-cart {
        min-height: 44px;
    }
    .qty-btn {
        width: 40px;
        height: 40px;
    }
}

.product-image-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.product-image-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* İndirim rozeti */
.badge-discount {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 9999px;
    letter-spacing: .02em;
}

/* Aldın Aldın rozeti */
.badge-aldin {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #faf064;
    color: #0f172a;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Sepete ekle butonu */
.btn-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    background: #00a8c3;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    border: none;
    cursor: pointer;
    transition: background .15s ease;
}

.btn-add-cart:hover { background: #0091a8; }
.btn-add-cart:active { transform: scale(.98); }

/* Adet stepper (sepete eklenince) */
.qty-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #00a8c3;
    border-radius: 12px;
    padding: 4px;
}

.qty-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .9);
    color: #0f172a;
    border: none;
    cursor: pointer;
    font-weight: 700;
    transition: background .15s ease;
}

.qty-btn:hover { background: #ffffff; }

.qty-value {
    flex: 1;
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
}

/* ---------- Kategori çipleri ---------- */
.category-scroll-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
    max-width: 100vw;
}

.category-scroll-container::-webkit-scrollbar { display: none; }

.category-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 72px;
    padding: 10px 8px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    text-align: center;
    text-decoration: none;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    scroll-snap-align: start;
    transition: border-color .15s ease, box-shadow .15s ease;
    flex-shrink: 0;
}

.category-chip img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.category-chip:hover { border-color: #00a8c3; }

.category-chip.active {
    border-color: #00a8c3;
    background: #ecfeff;
    color: #0891b2;
    box-shadow: 0 0 0 1px #00a8c3;
}

/* ============================================================================
   HEADER — Profesyonel mobil üst bar
   ============================================================================ */

/* Mobilde (telefon) header kompakt app tarzı:
   Satır 1: [Logo] ............ [Sepet]
   Satır 2: [Arama çubuğu - tam genişlik, ince]
   Satır 3: [Kapıda / Portal / Sipariş - yatay kaydırmalı] */
@media (max-width: 639px) {

    /* Üst bar (Row 1) yüksekliğini küçült; logo + sepet tek satır, arama alta */
    header .h-20 {
        height: auto;
        min-height: 48px;
        flex-wrap: wrap;
        padding-top: 6px;
        padding-bottom: 4px;
        gap: 6px 0;
    }

    /* Logo küçült */
    header .h-20 svg {
        width: 76px;
        height: 24px;
    }

    /* Arama kutusu: logosunun altına, tam genişlik, ince */
    header .h-20 .flex-1 {
        flex-basis: 100%;
        max-width: 100% !important;
        width: 100%;
        order: 2;
        margin-top: 0;
    }

    header .h-20 .flex-1 input {
        font-size: 13px;
        padding-top: 7px;
        padding-bottom: 7px;
        padding-left: 36px;
        border-radius: 12px;
    }

    /* Sepet butonu — kompakt karemsi, sadece ikon + rozet */
    header .h-20 button[onclick*="toggleCartDrawer"] {
        padding: 8px;
        min-width: 40px;
        min-height: 40px;
        justify-content: center;
        border-radius: 12px;
    }

    /* Alt navigasyon (Kapıda/Portal/Sipariş) ince */
    header div[class*="py-2.5"] {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

/* Üst duyuru çubuğu (announcement bar) her yerde ince ve sarar */
.announcement-bar {
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.25;
    font-size: 11px;
}

/* Alt navigasyon (Kapıda / Portal / Sipariş) mobilde yatay kaydırılabilir */
header .overflow-x-auto {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

header .overflow-x-auto::-webkit-scrollbar {
    display: none;
}