/* ================================================
   ALDEN CAMP GEAR - modern-elegant.css v5.0
   Shared component styles — Blue & White Theme
   ================================================ */

:root {
    --primary:        #1D72F5;
    --primary-dark:   #1558C0;
    --primary-light:  #4F8EFF;
    --secondary:      #3B82F6;
    --accent:         #F59E0B;
    --dark:           #0A0F1E;
    --dark-light:     #1A2035;
    --gray:           #64748B;
    --gray-light:     #94A3B8;
    --light:          #F1F5F9;
    --white:          #FFFFFF;
    --success:        #22C55E;
    --warning:        #F59E0B;
    --danger:         #EF4444;
    --info:           #3B82F6;
    --blue-pale:      #EEF4FF;
    --blue-mid:       #DBEAFE;
    --border:         #E2E8F0;
    --bg:             #F8FAFF;
    --gradient-primary:  linear-gradient(135deg, #1D72F5, #4F8EFF);
    --gradient-success:  linear-gradient(135deg, #22C55E, #16A34A);
    --gradient-danger:   linear-gradient(135deg, #EF4444, #DC2626);
    --gradient-ocean:    linear-gradient(135deg, #1D72F5, #4F8EFF);
    --shadow-sm: 0 2px 8px rgba(29,114,245,.09);
    --shadow:    0 6px 20px rgba(29,114,245,.12);
    --shadow-md: 0 10px 30px rgba(29,114,245,.14);
    --shadow-lg: 0 16px 40px rgba(29,114,245,.16);
    --shadow-xl: 0 28px 60px rgba(29,114,245,.2);
    --font-primary: 'DM Sans', -apple-system, sans-serif;
    --font-heading: 'Outfit', 'DM Sans', sans-serif;
    --transition: all .24s cubic-bezier(.4,0,.2,1);
    --transition-fast: all .15s ease;
}

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

body {
    font-family:var(--font-primary);
    font-size:15.5px;
    line-height:1.65;
    color:var(--gray);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6 {
    font-family:var(--font-heading);
    font-weight:800;
    line-height:1.2;
    color:var(--dark);
    letter-spacing:-.02em;
}
h1{font-size:2.5rem} h2{font-size:2rem} h3{font-size:1.75rem}
h4{font-size:1.5rem} h5{font-size:1.25rem} h6{font-size:1rem}

a { text-decoration:none; color:var(--primary); transition:var(--transition); }
a:hover { color:var(--primary-dark); }
img { max-width:100%; height:auto; display:block; }

/* ── CONTAINER ── */
.container {
    max-width:1240px;
    margin:0 auto;
    padding:0 24px;
}

/* ── NAVBAR ── */
.navbar {
    background:var(--white);
    border-bottom:1.5px solid var(--border);
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 16px rgba(29,114,245,.06);
}
.navbar-container {
    display:flex;justify-content:space-between;align-items:center;
    padding:.875rem 2rem;
    max-width:1240px;margin:0 auto;
}
.nav-brand { display:flex; align-items:center; gap:.875rem; }
.nav-brand img,.nav-logo {
    width:44px;height:44px;
    object-fit:contain;   /* tidak terpotong, proporsional */
    border-radius:10px;
    border:1.5px solid var(--blue-mid);
    background:var(--white);
    flex-shrink:0;
}
.nav-logo-fallback {
    width:44px;height:44px;flex-shrink:0;
    background:var(--primary);border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.2rem;
}
.nav-brand-text h2 {
    font-size:.9rem;font-weight:700;color:var(--dark);
    margin:0;line-height:1.2;
}
.nav-brand h2 {
    font-size:1.35rem;font-weight:900;margin:0;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.nav-brand .tagline { font-size:.72rem;color:var(--gray-light);display:block;font-weight:400;margin-top:-2px; }
.nav-menu { display:flex;gap:.75rem;align-items:center; }

/* User Dropdown */
.user-dropdown { position:relative; }
.user-dropdown-btn {
    display:flex;align-items:center;gap:.5rem;
    background:var(--blue-pale);color:var(--primary);
    border:1.5px solid var(--blue-mid);padding:.55rem 1.125rem;
    border-radius:25px;cursor:pointer;font-size:.875rem;font-weight:600;
    font-family:inherit;transition:var(--transition);
}
.user-dropdown-btn:hover,.user-dropdown-btn.active { background:var(--primary);color:var(--white);border-color:var(--primary); }
.user-dropdown-menu {
    display:none;position:absolute;top:100%;right:0;padding-top:10px;
    z-index:9999;min-width:180px;
}
.user-dropdown-menu-inner {
    background:var(--white);border-radius:14px;
    box-shadow:var(--shadow-lg);border:1px solid var(--border);
    overflow:hidden;
}
.user-dropdown-menu a {
    display:flex;align-items:center;gap:.6rem;
    padding:.75rem 1.125rem;color:var(--dark);font-size:.875rem;font-weight:500;
    transition:var(--transition);border-bottom:1px solid #f0f4ff;
}
.user-dropdown-menu a:last-child { border-bottom:none; }
.user-dropdown-menu a:hover { background:var(--blue-pale);color:var(--primary); }
.user-dropdown-menu a.logout-link:hover { background:#FEE2E2;color:#991B1B; }
.user-dropdown.open .user-dropdown-menu { display:block; }

/* ── BUTTONS ── */
.btn {
    display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
    padding:.65rem 1.375rem;font-size:.9rem;font-weight:600;
    border:none;border-radius:10px;cursor:pointer;
    transition:var(--transition);text-decoration:none;
    white-space:nowrap;font-family:inherit;letter-spacing:.01em;
}
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-light));color:var(--white);box-shadow:0 4px 14px rgba(29,114,245,.3); }
.btn-primary:hover { box-shadow:0 6px 22px rgba(29,114,245,.48);color:var(--white); }
.btn-secondary { background:var(--white);color:var(--dark);border:1.5px solid var(--border); }
.btn-secondary:hover { border-color:var(--primary);color:var(--primary);background:var(--blue-pale); }
.btn-success { background:linear-gradient(135deg,#22C55E,#16A34A);color:var(--white);box-shadow:0 4px 14px rgba(34,197,94,.28); }
.btn-danger  { background:linear-gradient(135deg,#EF4444,#DC2626);color:var(--white);box-shadow:0 4px 14px rgba(239,68,68,.28); }
.btn-info    { background:linear-gradient(135deg,#3B82F6,#2563EB);color:var(--white); }
.btn-warning { background:linear-gradient(135deg,#F59E0B,#D97706);color:var(--white); }
.btn-lg  { padding:.9rem 2rem;font-size:1rem;border-radius:12px; }
.btn-sm  { padding:.4rem .875rem;font-size:.8rem;border-radius:8px; }
.btn-block { width:100%; }

/* ── HERO ── */
.hero {
    background:linear-gradient(150deg,#1565C0 0%,#1976D2 25%,#0288D1 55%,#00ACC1 80%,#26C6DA 100%);
    min-height:0;
    display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;
    color:var(--white);text-align:center;
    padding:56px 24px 52px;
}
.hero-content { position:relative;z-index:3;max-width:700px; }
.hero h1 { font-size:2.6rem;font-weight:900;color:var(--white);letter-spacing:-.025em;margin-bottom:.875rem; }
.hero p { font-size:1rem;color:rgba(255,255,255,.82);max-width:520px;margin:0 auto 1.5rem; }

/* ── SECTION TITLE ── */
.section-title {
    text-align:center;font-size:2.25rem;font-weight:900;
    color:var(--dark);margin:3rem 0 1rem;
    background:none !important;
    -webkit-text-fill-color:initial !important;
}
.section-title::after, .section-title::before { display:none !important; }

/* ── PRODUCT GRID & CARD ── */
.product-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.25rem;
    margin-top:1.5rem;
}
.product-card {
    background:var(--white);border-radius:16px;overflow:hidden;
    box-shadow:0 2px 12px rgba(29,114,245,.08);
    transition:var(--transition);border:1.5px solid var(--border);
    display:flex;flex-direction:column;
}
.product-card:hover { transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--blue-mid); }
.product-image { width:100%;height:200px;overflow:hidden;background:var(--blue-pale);flex-shrink:0;position:relative; }
.product-image img { width:100%;height:100%;object-fit:cover;transition:transform .5s ease; }
.product-card:hover .product-image img { transform:scale(1.06); }
.badge-sold { position:absolute;top:10px;right:10px;background:#ef4444;color:#fff;padding:.25rem .65rem;border-radius:20px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em; }
.product-info { padding:1rem;display:flex;flex-direction:column;flex:1; }
.product-info h3 { font-size:.95rem;font-weight:700;color:var(--dark);margin-bottom:.3rem;cursor:pointer;transition:var(--transition);font-family:var(--font-primary);line-height:1.35; }
.product-info h3:hover { color:var(--primary); }
.product-info .price { font-size:1.15rem;font-weight:800;color:var(--primary);margin-bottom:.25rem;display:block;font-family:var(--font-heading); }
.product-info .stock { color:var(--gray);margin-bottom:.75rem;font-size:.8rem;display:flex;align-items:center;gap:.35rem; }
.product-info .stock i { color:var(--success); }

/* ── QUANTITY CONTROL ── */
.quantity-control {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.5rem;
    margin-bottom:.875rem;
    background:var(--blue-pale);
    border-radius:50px;
    padding:.3rem .5rem;
    border:1.5px solid var(--blue-mid);
}
.quantity-control button {
    width:32px; height:32px;
    border:none;
    background:var(--white);
    color:var(--primary);
    border-radius:50%;
    cursor:pointer;
    font-size:1.1rem;
    font-weight:700;
    transition:var(--transition);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 4px rgba(29,114,245,.15);
    flex-shrink:0;
}
.quantity-control button:hover {
    background:var(--primary);
    color:var(--white);
    box-shadow:0 2px 8px rgba(29,114,245,.35);
    transform:scale(1.08);
}
.quantity-control button:active { transform:scale(.95); }
.quantity-control input {
    width:44px;
    text-align:center;
    border:none;
    background:transparent;
    font-size:.95rem;
    font-weight:700;
    color:var(--dark);
    font-family:inherit;
    outline:none;
}

/* ── ALERTS ── */
.alert {
    padding:1rem 1.25rem;border-radius:10px;margin-bottom:1.125rem;
    display:flex;align-items:center;gap:.75rem;
    font-weight:500;font-size:.9rem;
    animation:alertSlide .3s ease;
}
@keyframes alertSlide { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.alert-success { background:#DCFCE7;color:#166534;border-left:4px solid var(--success); }
.alert-danger  { background:#FEE2E2;color:#991B1B;border-left:4px solid var(--danger); }
.alert-info    { background:var(--blue-pale);color:#1E3A8A;border-left:4px solid var(--primary); }
.alert-warning { background:#FEF3C7;color:#92400E;border-left:4px solid var(--warning); }

/* ── BADGES ── */
.badge { display:inline-block;padding:.3rem .8rem;border-radius:20px;font-size:.72rem;font-weight:700;letter-spacing:.02em; }
.badge-success  { background:#DCFCE7;color:#166534; }
.badge-danger   { background:#FEE2E2;color:#991B1B; }
.badge-warning  { background:#FEF3C7;color:#92400E; }
.badge-info     { background:var(--blue-pale);color:#1E3A8A; }
.badge-secondary{ background:var(--light);color:var(--gray); }
.badge-sold     { background:var(--danger);color:white; }

/* ── FORM SHARED ── */
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block;margin-bottom:.45rem;font-weight:600;color:var(--dark);font-size:.875rem; }
.form-group label i { margin-right:.35rem;color:var(--primary); }
.form-group small { display:block;margin-top:.3rem;color:var(--gray);font-size:.78rem; }

.form-control {
    width:100%;padding:.65rem .9rem;
    border:1.5px solid var(--border);border-radius:9px;
    font-size:.9rem;transition:var(--transition);
    background:var(--white);font-family:inherit;color:var(--dark);
}
.form-control:focus { outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(29,114,245,.12); }
textarea.form-control { resize:vertical;min-height:90px; }

.form-card {
    background:var(--white);padding:2rem;border-radius:18px;
    box-shadow:0 2px 8px rgba(29,114,245,.07);
    margin-bottom:1.5rem;border:1.5px solid var(--border);
}

.form-row { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem; }

/* ── SEARCH BOX ── */
.search-box {
    padding:.55rem 1rem;border:1.5px solid var(--border);border-radius:9px;
    font-size:.85rem;outline:none;transition:var(--transition);
    font-family:inherit;min-width:200px;
}
.search-box:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(29,114,245,.1); }

/* ── TABLE ── */
.table-container {
    background:var(--white);border-radius:18px;
    box-shadow:0 2px 8px rgba(29,114,245,.07);
    overflow:hidden;margin-bottom:1.5rem;border:1.5px solid var(--border);
}
.table-header {
    padding:1.125rem 1.375rem;border-bottom:1.5px solid var(--border);
    display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
}
.table-header h2 { margin:0;font-size:1.05rem;color:var(--dark);font-weight:700;font-family:var(--font-primary); }
table { width:100%;border-collapse:collapse; }
table thead { background:var(--bg,#F8FAFF); }
table thead th { padding:.75rem 1.125rem;text-align:left;font-weight:700;color:var(--dark);font-size:.7rem;text-transform:uppercase;letter-spacing:.7px;white-space:nowrap; }
table tbody tr { border-bottom:1px solid var(--border);transition:background .14s; }
table tbody tr:last-child { border-bottom:none; }
table tbody tr:hover { background:#f5f8ff; }
table tbody td { padding:.875rem 1.125rem;color:var(--gray);font-size:.875rem;vertical-align:middle; }

/* ── MODAL ── */
.modal-overlay {
    display:none;position:fixed;inset:0;
    background:rgba(10,15,30,.6);backdrop-filter:blur(6px);
    z-index:9999;align-items:center;justify-content:center;padding:1rem;
}
.modal-overlay.show { display:flex; }
.modal-box {
    background:var(--white);border-radius:22px;
    box-shadow:0 30px 70px rgba(0,0,0,.2);
    width:100%;max-width:580px;max-height:90vh;overflow-y:auto;
    animation:modalIn .27s cubic-bezier(.34,1.56,.64,1);
}
.modal-box.modal-lg { max-width:860px; }
@keyframes modalIn { from{transform:translateY(22px) scale(.97);opacity:0} to{transform:translateY(0) scale(1);opacity:1} }
.modal-header {
    padding:1.25rem 1.5rem 1rem;border-bottom:1.5px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    position:sticky;top:0;background:var(--white);border-radius:22px 22px 0 0;z-index:10;
}
.modal-header h3 { font-size:1rem;font-weight:700;color:var(--dark);display:flex;align-items:center;gap:.5rem;margin:0;font-family:var(--font-primary); }
.modal-header h3 i { color:var(--primary); }
.modal-close {
    width:31px;height:31px;border-radius:7px;background:var(--light);
    border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
    color:var(--gray);font-size:.875rem;transition:var(--transition);flex-shrink:0;
}
.modal-close:hover { background:#FEE2E2;color:var(--danger); }
.modal-body { padding:1.5rem; }
.modal-footer {
    padding:1rem 1.5rem;border-top:1.5px solid var(--border);
    display:flex;gap:.625rem;justify-content:flex-end;
    background:var(--light);border-radius:0 0 22px 22px;
}

/* ── ACTION BUTTONS ── */
.action-buttons { display:flex;gap:.35rem;flex-wrap:wrap; }
.btn-icon { width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;font-size:.775rem; }

/* ── BLOG CARDS ── */
.blog-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:2rem; }
.blog-card { background:var(--white);border-radius:18px;overflow:hidden;box-shadow:0 2px 8px rgba(29,114,245,.07);transition:var(--transition);border:1.5px solid var(--border); }
.blog-card:hover { transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--blue-mid); }
.blog-image { height:200px;overflow:hidden;background:var(--blue-pale); }
.blog-image img { width:100%;height:100%;object-fit:cover;transition:transform .4s ease; }
.blog-card:hover .blog-image img { transform:scale(1.06); }
.blog-info { padding:1.25rem; }
.blog-info h3 { font-size:1rem;font-weight:700;color:var(--dark);margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--font-primary); }
.blog-excerpt { color:var(--gray);font-size:.85rem;margin-bottom:.75rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.blog-meta { display:flex;gap:1rem;font-size:.78rem;color:var(--gray-light);margin-bottom:.75rem; }

/* ── TESTIMONIALS ── */
.testimonial-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem; }
.testimonial-card { background:var(--white);padding:1.625rem;border-radius:18px;box-shadow:0 2px 8px rgba(29,114,245,.07);transition:var(--transition);border:1.5px solid var(--border);border-top:3px solid var(--primary); }
.testimonial-card:hover { transform:translateY(-5px);box-shadow:var(--shadow-lg); }
.testimonial-header { display:flex;align-items:center;gap:.875rem;margin-bottom:1rem; }
.testimonial-header img { width:52px;height:52px;border-radius:50%;object-fit:cover;border:2.5px solid var(--blue-mid); }
.rating { display:flex;gap:.2rem; }
.rating i { color:var(--border);font-size:.9rem; }
.rating i.active { color:var(--accent); }
.testimonial-text { color:var(--gray);font-style:italic;line-height:1.75;font-size:.9rem; }

/* ── FOOTER ── */
.footer { background:var(--dark);color:rgba(255,255,255,.7);text-align:center;padding:2.5rem 1.5rem;position:relative;overflow:hidden; }
.footer::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(29,114,245,.15),transparent);pointer-events:none; }
.footer p { margin:.3rem 0;position:relative;z-index:1;font-size:.875rem; }
.footer a { color:#93C5FD; }

/* ── AUTH PAGES ── */
.auth-page {
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    padding:2rem;overflow-y:auto;
    background:linear-gradient(160deg,#0A0F1E 0%,#0d1a3d 50%,#0e2054 100%);
    position:relative;
}
.auth-page::after {
    content:'';position:fixed;inset:0;
    background:radial-gradient(circle at 25% 60%,rgba(29,114,245,.28) 0%,transparent 55%),
               radial-gradient(circle at 75% 20%,rgba(79,142,255,.18) 0%,transparent 50%);
    z-index:0;pointer-events:none;
}
.auth-container { width:100%;max-width:460px;margin:auto;position:relative;z-index:1; }
.auth-box {
    background:var(--white);border-radius:24px;padding:2.5rem;
    box-shadow:0 30px 80px rgba(0,0,0,.3);
    margin:1.5rem 0;border-top:3px solid var(--primary);
}
.auth-box-large { max-width:600px; }
.auth-header { text-align:center;margin-bottom:2rem; }
.auth-header i { font-size:3rem;color:var(--primary);margin-bottom:1rem;display:block; }
.auth-header img { width:80px;height:80px;object-fit:contain;margin:0 auto 1rem;border-radius:16px;border:2px solid var(--blue-mid); }
.auth-header h1 { font-size:1.75rem;color:var(--dark);margin-bottom:.375rem; }
.auth-header p { color:var(--gray);font-size:.9rem; }
.auth-form { margin-top:1.5rem; }
.auth-footer { margin-top:1.5rem;text-align:center;color:var(--gray);font-size:.875rem; }
.auth-footer a { color:var(--primary);font-weight:600; }
.auth-footer a:hover { color:var(--primary-dark); }

/* ── GALLERY GRID ── */
.gallery-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:1.25rem;margin-top:1.25rem; }
.gallery-album-card { background:var(--white);border-radius:14px;overflow:hidden;border:1.5px solid var(--border);box-shadow:0 2px 8px rgba(29,114,245,.07);transition:var(--transition); }
.gallery-album-card:hover { transform:translateY(-4px);box-shadow:var(--shadow-lg); }
.gallery-album-cover { position:relative;overflow:hidden; }
.gallery-album-cover img { width:100%;height:170px;object-fit:cover;display:block;transition:transform .4s ease; }
.gallery-album-card:hover .gallery-album-cover img { transform:scale(1.05); }
.gallery-album-badge { position:absolute;top:9px;right:9px; }
.gallery-album-info { padding:.875rem 1.125rem; }
.gallery-album-info h3 { font-size:.9rem;font-weight:700;color:var(--dark);margin-bottom:.2rem;font-family:var(--font-primary); }
.gallery-album-info p { font-size:.775rem;color:var(--gray);margin-bottom:.75rem; }
.gallery-album-actions { display:flex;gap:.375rem;flex-wrap:wrap; }

/* ── WISATA GRID ── */
.wisata-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.25rem;margin-top:1.25rem; }
.wisata-card { background:var(--white);border-radius:14px;overflow:hidden;border:1.5px solid var(--border);box-shadow:0 2px 8px rgba(29,114,245,.07);transition:var(--transition); }
.wisata-card:hover { transform:translateY(-4px);box-shadow:var(--shadow-lg); }
.wisata-card-body { padding:1.1rem 1.25rem; }
.wisata-card-footer { padding:.8rem 1.25rem;background:var(--bg,#F8FAFF);border-top:1px solid var(--border);display:flex;gap:.375rem;flex-wrap:wrap; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--bg,#F8FAFF); }
::-webkit-scrollbar-thumb { background:var(--blue-mid);border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary); }

/* ── UTILS ── */
.text-center{text-align:center} .text-muted{color:var(--gray)} .fw-bold{font-weight:700}
.fade-in{animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.mb-0{margin-bottom:0} .mb-1{margin-bottom:.5rem} .mb-2{margin-bottom:1rem}
.mb-3{margin-bottom:1.5rem} .mb-4{margin-bottom:2rem}
.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem}

/* ── RESPONSIVE ── */
@media(max-width:1200px) {
    .product-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:900px) {
    .product-grid { grid-template-columns:repeat(2,1fr); }
    .testimonial-grid { grid-template-columns:1fr 1fr; }
    .blog-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:640px) {
    /* Sembunyikan nama toko & tagline di navbar mode mobile */
    .nav-brand .tagline { display:none; }
    .nav-brand .brand-name { display:none; }
    .nav-brand img,.nav-logo { width:36px;height:36px; }
    .nav-logo-fallback { width:36px;height:36px;font-size:1rem; }
    .nav-brand-text { display:none; }  /* Sembunyikan nama di mobile */

    /* Sembunyikan nama username, tampilkan hanya ikon user */
    .username-text { display:none; }
    .user-dropdown-btn { padding:.5rem .6rem;border-radius:50%;width:38px;height:38px;justify-content:center; }
    .user-dropdown-btn i.fa-user-circle { font-size:1.1rem;margin:0; }

    /* Navbar buttons: sembunyikan teks, hanya icon */
    .nav-menu { gap:.4rem; }
    .nav-menu .btn span.btn-text { display:none; }
    .nav-menu .btn { padding:.5rem .65rem;font-size:.8rem;min-width:0; }
    .nav-menu .btn i { margin:0; }

    /* Sembunyikan teks tombol keranjang, hanya icon */
    .cart-btn-text { display:none; }

    /* Product grid 2 kolom di HP */
    .product-grid { grid-template-columns:repeat(2,1fr);gap:.75rem; }
    .product-image { height:150px; }
    .product-info { padding:.75rem; }
    .product-info h3 { font-size:.82rem; }
    .product-info .price { font-size:.95rem; }

    .testimonial-grid,.blog-grid { grid-template-columns:1fr; }
    .gallery-grid,.wisata-grid { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
    .auth-box { padding:1.75rem 1.25rem; }
    .modal-box { border-radius:16px; }
    .table-header { padding:.875rem;flex-direction:column;align-items:flex-start; }
}