/* ============================================================================
   CUSTOMER.CSS
   Styles untuk customer page: navbar, footer, banner, product grid.
   ============================================================================ */

/* ── NAVBAR ──────────────────────────────────────────────────────────────── */
.site-nav {
    background: var(--primary);
    border-bottom: 1px solid var(--primary-dark);
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.site-nav-inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
}

.site-nav-brand .brand-logo {
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    padding: 4px;
}

.site-nav-brand .brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.site-nav-brand .brand-name {
    font-weight: 600;
    color: #fff;
    font-size: 15px;
}

.site-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    border-radius: 999px;
    transition: all .15s;
}

.nav-link:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
}

.nav-link.active {
    background: rgba(255,255,255,.2);
    color: #fff;
    font-weight: 600;
}

/* ── FOOTER ─ hanya color biru, content simple ──────────────────────────── */
.site-footer {
    background: var(--primary);
    border-top: 1px solid var(--primary-dark);
    padding: 24px 16px;
    margin-top: 32px;
}

.site-footer-inner {
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,.75);
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  BANNER — FIT CONTAINER tanpa crop berlebihan                       ║
   ║  Strategy: width responsive, aspect ratio 3:1, object-cover dengan   ║
   ║  position center supaya focal point gambar tetap di tengah.         ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* Wrapper supaya banner punya batas lebar yang sama dengan content area */
.banner-wrapper {
    max-width: 1024px;
    margin: 0 auto;
    padding: 16px 16px 0;
}

.banner-section {
    position: relative;
    background: var(--primary-dark);
    width: 100%;
    aspect-ratio: 3 / 1;       /* Ratio standard banner — lebar 3x tinggi */
    overflow: hidden;
    border-radius: 16px;       /* Rounded corner, lebih modern */
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* ── BANNER SLIDE ────────────────────────────────────────────────────────── */
.banner-slide {
    position: absolute;
    inset: 0;
    text-decoration: none;
    transition: opacity .7s ease;
    opacity: 0;
    display: block;
}

.banner-slide.active,
.banner-slide:only-child {
    opacity: 1;
    z-index: 10;
}

/* ── BANNER IMAGE ─────────────────────────────────────────────────────────
   object-fit: cover    → fill container tanpa distorsi
   object-position: center → fokus di tengah supaya konten penting tetap terlihat
   width/height: 100%   → fill seluruh container
   ───────────────────────────────────────────────────────────────────────── */
.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Banner mobile — tetap proporsional tapi sedikit lebih tinggi (4:1.5) */
@media (max-width: 640px) {
    .banner-section {
        aspect-ratio: 4 / 1.8;
        border-radius: 12px;
    }
    .banner-wrapper {
        padding: 12px 12px 0;
    }
}

/* Fallback kalau tidak ada banner */
.banner-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    padding: 24px;
    text-align: center;
}

.banner-fallback h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

@media (min-width: 768px) {
    .banner-fallback h1 { font-size: 32px; }
}

.banner-fallback p {
    font-size: 14px;
    opacity: .85;
    max-width: 30rem;
}

/* ── SLIDESHOW CONTROLS ──────────────────────────────────────────────────── */
.banner-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 20;
}

.banner-dot {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.5);
    width: 8px;
    transition: all .3s;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.banner-dot.active {
    background: #fff;
    width: 24px;
}

.banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(4px);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: background .15s;
}

.banner-arrow:hover { background: rgba(0,0,0,.55); }
.banner-arrow svg { width: 16px; height: 16px; }
.banner-arrow.prev { left: 12px; }
.banner-arrow.next { right: 12px; }

/* ── FLOATING WA BUTTON ──────────────────────────────────────────────────── */
.fab-wa {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-wa);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 999px;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    text-decoration: none;
    transition: background .15s, box-shadow .15s;
}

.fab-wa:hover {
    background: var(--color-wa-hover);
    box-shadow: 0 15px 30px rgba(0,0,0,.2);
}

.fab-wa svg { width: 20px; height: 20px; }

.fab-wa-label {
    max-width: 0;
    overflow: hidden;
    transition: max-width .3s;
    white-space: nowrap;
}

.fab-wa:hover .fab-wa-label { max-width: 200px; }

/* ── CATEGORY PILLS ──────────────────────────────────────────────────────── */
.cat-pill {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background: #fff;
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
    transition: all .15s;
    cursor: pointer;
    text-decoration: none;
}

.cat-pill:hover { border-color: var(--secondary); color: var(--primary); }

.cat-pill.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ── PRODUCT CARD ────────────────────────────────────────────────────────── */
.category-badge {
    display: inline-block;
    font-size: 10px;
    background: var(--neutral-light);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 500;
}

.product-card-image {
    height: 160px;
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
    position: relative;
}

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

.product-badge-new {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--secondary);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

.product-badge-featured {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #fbbf24;
    color: #78350f;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  PRICE TEXT — Ganti warna text harga di sini                        ║
   ║  Pilihan: var(--primary), var(--secondary), var(--color-success),    ║
   ║           #dc2626 (merah), #d97706 (orange)                          ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.price-text {
    font-weight: 600;
    color: var(--primary);   /* ← UBAH WARNA TEXT HARGA DI SINI */
    font-size: 14px;
}

/* ── INFO ICON BOX (tentang toko) ────────────────────────────────────────── */
.info-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--neutral-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-icon-box svg { width: 20px; height: 20px; }

/* ── SECTION HEADER ──────────────────────────────────────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.section-title-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-title-icon svg { width: 14px; height: 14px; }