/* =================================================================
   NUUNA — Design System v3.0   "Clean Apothecary — Minimalist"
   ================================================================= */

@font-face { font-family: Poppins; font-weight: 500; src: url(../font/Poppins-Medium.ttf); }
@font-face { font-family: Poppins; font-weight: 600; src: url(../font/Poppins-SemiBold.ttf); }
@font-face { font-family: Poppins; font-weight: 700; src: url(../font/Poppins-Bold.ttf); }
@font-face { font-family: Poppins; font-weight: 900; src: url(../font/Poppins-Black.ttf); }

/* ── Tokens ── */
:root {
    --brand:        #0284c7;
    --brand-mid:    #0369a1;
    --brand-dark:   #075985;
    --brand-light:  #e0f2fe;
    --brand-glow:   rgba(2,132,199,.12);

    --success:      #059669;
    --success-lt:   #d1fae5;
    --danger:       #dc2626;
    --danger-lt:    #fee2e2;
    --warn:         #d97706;

    --navy:         #0f172a;
    --navy-mid:     #1e293b;
    --navy-soft:    #334155;

    --text:         #0f172a;
    --text-muted:   #475569;
    --text-light:   #94a3b8;

    --surface:      #ffffff;
    --surface-2:    #f8fafc;
    --bg:           #f1f5f9;
    --bg-alt:       #e2e8f0;
    --border:       #cbd5e1;
    --border-light: #e2e8f0;

    --grad-brand:   linear-gradient(135deg,#0ea5e9 0%,#0284c7 100%);
    --grad-navy:    linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
    --grad-danger:  linear-gradient(135deg,#ef4444 0%,#dc2626 100%);

    --shadow-xs:    0 1px 3px rgba(15,23,42,.06);
    --shadow-sm:    0 2px 8px rgba(15,23,42,.08);
    --shadow-md:    0 6px 20px rgba(15,23,42,.10);
    --shadow-lg:    0 16px 40px rgba(15,23,42,.13);
    --shadow-brand: 0 4px 14px rgba(2,132,199,.22);

    --radius-xs:  3px; --radius-sm: 8px; --radius-md: 12px;
    --radius-lg:  18px; --radius-xl: 26px; --radius-pill: 999px;

    --ease:       cubic-bezier(.4,0,.2,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);
    --t-fast: .14s; --t-base: .22s; --t-slow: .36s;

    --navbar-h:       68px;
    --container-pad:  6%;
}

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;outline:none;border:none;}
html{scroll-behavior:smooth;font-size:16px; overflow-x:hidden;}
body{font-family:Poppins,sans-serif;font-weight:500;font-size:15px;line-height:1.65;
     color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar{
    position:sticky;top:0;z-index:1000;
    height:var(--navbar-h);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 var(--container-pad);
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    border-bottom:1px solid var(--border-light);
    box-shadow:var(--shadow-xs);
    transition:box-shadow var(--t-base) var(--ease);
}
.navbar::after{
    content:'';position:absolute;bottom:0;left:0;
    width:100%;height:2px;
    background:var(--grad-brand);opacity:.5;
}
.navbar .navbar-logo{
    font-size:1.7rem;font-weight:900;color:var(--navy);
    letter-spacing:-1.5px;
}
.navbar .navbar-logo span{
    background:var(--grad-brand);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.navbar .navbar-menu a{
    position:relative;color:var(--text-muted);font-size:.88rem;font-weight:600;
    margin:0 .8rem;padding:.3rem 0;display:inline-block;
    transition:color var(--t-base);
}
.navbar .navbar-menu a::after{
    content:'';position:absolute;bottom:-3px;left:50%;
    width:0;height:2px;background:var(--brand);
    border-radius:var(--radius-pill);transform:translateX(-50%);
    transition:width var(--t-base) var(--ease-spring);
}
.navbar .navbar-menu a:hover{color:var(--brand-dark);}
.navbar .navbar-menu a:hover::after{width:70%;}
.navbar .navbar-icon{display:flex;align-items:center;gap:.15rem;}
.navbar .navbar-icon a{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:var(--radius-sm);
    color:var(--text-muted);font-size:1rem;
    transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.navbar .navbar-icon a:hover{background:var(--brand-light);color:var(--brand-dark);transform:translateY(-1px);}
.navbar .navbar-icon a i{font-size:.8rem;font-style:normal;}
#btn-menu{display:none;}
.navbar .user{
    position:absolute;top:calc(var(--navbar-h) + 8px);right:var(--container-pad);
    width:165px;padding:.4rem 0;background:var(--surface);
    border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
    border:1px solid var(--border-light);
    opacity:0;visibility:hidden;transform:translateY(-10px) scale(.97);
    transform-origin:top right;
    transition:opacity var(--t-base),transform var(--t-base) var(--ease-spring),visibility var(--t-base);
    list-style:none;overflow:hidden;
}
.navbar .user.active{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.navbar .user a{
    display:flex;align-items:center;gap:.45rem;
    padding:.6rem 1rem;font-size:.86rem;font-weight:600;color:var(--text);
    transition:background var(--t-fast),color var(--t-fast),padding-left var(--t-fast);
}
.navbar .user a:hover{background:var(--brand-light);color:var(--brand-dark);padding-left:1.3rem;}
.navbar .search-form{
    position:absolute;display:flex;
    top:calc(var(--navbar-h) + 8px);right:var(--container-pad);
    width:320px;background:var(--surface);
    border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
    border:1px solid var(--border);overflow:hidden;
    opacity:0;visibility:hidden;transform:translateY(-8px) scaleX(.96);
    transform-origin:top right;
    transition:opacity var(--t-base),transform var(--t-base) var(--ease-spring),visibility var(--t-base);
}
.navbar .search-form.active{opacity:1;visibility:visible;transform:translateY(0) scaleX(1);}
.navbar .search-form input{flex:1;font-size:.9rem;font-family:Poppins,sans-serif;font-weight:500;padding:.75rem 1rem;color:var(--text);background:transparent;}
.navbar .search-form .btn{background:var(--grad-brand);color:#fff;border-radius:0;padding:0 1.1rem;transition:opacity var(--t-fast);}
.navbar .search-form .btn:hover{opacity:.88;}

/* ================================================================
   HERO
   ================================================================ */
.hero{position:relative;display:block;overflow:hidden;}
.hero .owl-carousel{height:90vh;min-height:500px;}
.hero .owl-stage-outer{height:100%;}
.hero .owl-stage{height:100%;}
.hero .owl-item{height:100%;}
.hero .item{position:relative;height:100%;overflow:hidden;display:flex;align-items:center;}
.hero .item>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero .item::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(110deg,rgba(255,255,255,.88) 0%,rgba(224,242,254,.60) 45%,rgba(15,23,42,.04) 100%);
    z-index:1;pointer-events:none;
}
.hero::after{
    content:'';position:absolute;top:-10%;right:-5%;
    width:50vw;height:50vw;border-radius:50%;
    background:radial-gradient(circle,rgba(2,132,199,.08) 0%,transparent 70%);
    pointer-events:none;z-index:2;
}
.hero .content{position:relative;z-index:2;padding:2rem var(--container-pad);max-width:660px;animation:heroIn .8s var(--ease) both;}
.hero .content h1{font-size:clamp(1.9rem,5vw,3.6rem);font-weight:900;color:var(--navy);line-height:1.12;letter-spacing:-2px;}
.hero .content h1 span{background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero .content p{font-size:clamp(.86rem,1.8vw,1.06rem);margin-top:1.1rem;color:var(--text-muted);max-width:480px;line-height:1.8;}
.hero .content .btn{
    display:inline-flex;align-items:center;gap:.5rem;margin-top:1.8rem;
    padding:.8rem 2rem;font-size:.95rem;font-family:Poppins,sans-serif;font-weight:700;
    letter-spacing:.2px;border-radius:var(--radius-pill);
    transition:transform var(--t-base) var(--ease-spring),box-shadow var(--t-base);
}
.hero .content .btn-primary{background:var(--grad-brand);color:#fff;border:none;box-shadow:var(--shadow-brand);}
.hero .content .btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 28px rgba(2,132,199,.38);color:#fff;}
.hero #owl-nav .owl-prev,.hero #owl-nav .owl-next,
#owl-nav .owl-prev,#owl-nav .owl-next{
    position:absolute;top:50%;transform:translateY(-50%);z-index:10;
    background:rgba(15,23,42,.55);backdrop-filter:blur(6px);
    color:#fff;padding:12px 16px;font-size:10px;cursor:pointer;
    transition:background var(--t-base);border:1px solid rgba(255,255,255,.12);
}
.hero #owl-nav .owl-prev,#owl-nav .owl-prev{left:0;border-radius:0 var(--radius-pill) var(--radius-pill) 0;}
.hero #owl-nav .owl-next,#owl-nav .owl-next{right:0;border-radius:var(--radius-pill) 0 0 var(--radius-pill);}
.hero #owl-nav .owl-prev:hover,.hero #owl-nav .owl-next:hover,
#owl-nav .owl-prev:hover,#owl-nav .owl-next:hover{background:var(--brand-dark);}

/* ================================================================
   ABOUT
   ================================================================ */
.about{margin-top:4rem;background:var(--surface);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--border-light);position:relative;}
.about::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--grad-brand);}
.about .about-img img{width:100%;height:360px;object-fit:cover;display:block;}
.about .content{padding:2.6rem 2rem;display:flex;flex-direction:column;justify-content:center;}
.about .content h3{font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:900;color:var(--navy);margin-bottom:1rem;line-height:1.2;letter-spacing:-.4px;}
.about .content h3 span{background:var(--grad-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.about .content p{color:var(--text-muted);line-height:1.85;margin-bottom:.7rem;}

/* ================================================================
   PRODUCTS
   ================================================================ */
.produk{margin-top:2rem;}
.produk-box{
    background:var(--surface);border-radius:var(--radius-xl);padding:1.8rem 1.5rem 1rem;
    margin:2.5rem 0 .8rem;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);text-align:center;
}
.produk-box h2{font-weight:900;font-size:clamp(1.3rem,3vw,2rem);color:var(--navy);text-transform:uppercase;letter-spacing:2px;}
.produk-box h2::after{content:'';display:block;width:42px;height:3px;background:var(--grad-brand);border-radius:var(--radius-pill);margin:.5rem auto 0;}

/* Product card */
.produk .card{
    border:1px solid var(--border-light)!important;border-radius:var(--radius-lg)!important;
    box-shadow:var(--shadow-sm)!important;margin-top:1.4rem;background:var(--surface)!important;
    overflow:hidden;transition:transform var(--t-base) var(--ease-spring),box-shadow var(--t-base)!important;
}
.produk .card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(2,132,199,.14),var(--shadow-md)!important;}
.produk .card img{width:100%;height:190px;object-fit:cover;transition:transform .4s var(--ease);}
.produk .card:hover img{transform:scale(1.05);}
.produk .card-body{background:var(--surface);}
.produk .card-body h5{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-weight:700;color:var(--navy);font-size:.88rem;}
.produk .content{text-align:center;padding:.2rem .5rem .8rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;}
.produk .content p{color:var(--brand-dark);font-weight:700;font-size:.92rem;margin:0;}

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination{margin-top:2.5rem;gap:4px;flex-wrap:wrap;}
.pagination li{border-radius:var(--radius-sm)!important;overflow:hidden;}
.pagination .page-link{color:var(--text-muted);border:1px solid var(--border);font-weight:600;font-size:.86rem;transition:background var(--t-fast),color var(--t-fast);}
.pagination .page-item.active .page-link,.pagination .prev a,.pagination .next a{background:var(--grad-brand);border-color:var(--brand);color:#fff;box-shadow:var(--shadow-brand);}
.pagination a:hover,.pagination .page-link:hover{background:var(--brand-light);color:var(--brand-dark);border-color:var(--brand);}

/* ================================================================
   CONTACT
   ================================================================ */
.kontak{padding:0 0 3rem;margin-top:4rem;}
.kontak .kontak-map iframe{
    width:100%;height:320px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    border:none;display:block;
}
.kontak .kontak-form .card{border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-md)!important;border:1px solid var(--border-light)!important;}

/* BREADCRUMB
   ================================================================ */
.breadcrumb{
    display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;
    padding:.65rem 1rem;margin-bottom:1.4rem;
    background:var(--surface);border-radius:var(--radius-pill);
    border:1px solid var(--border-light);box-shadow:var(--shadow-xs);
    font-size:.8rem;font-weight:600;list-style:none;
}
.breadcrumb li a{color:var(--brand-dark);transition:color var(--t-fast);}
.breadcrumb li a:hover{color:var(--brand);}
.breadcrumb>li+li::before{content:"›";color:var(--text-light);font-size:1rem;margin-right:.2rem;}

/* ================================================================
   PAGE PRODUK
   ================================================================ */
.page-produk{margin:2rem 0;}
.page-produk .card{border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-sm)!important;border:1px solid var(--border-light)!important;}
.page-produk .card-header{background:var(--surface-2)!important;border-bottom:1px solid var(--border-light)!important;border-radius:var(--radius-lg) var(--radius-lg) 0 0!important;}
.page-produk .card-header h4{font-size:1rem;font-weight:700;color:var(--navy);}
.page-produk .nav a{font-size:.88rem;font-weight:600;color:var(--text-muted);border-radius:var(--radius-sm)!important;transition:background var(--t-fast),color var(--t-fast);padding:.38rem .75rem;}
.page-produk .nav a:hover{background:var(--brand-light);color:var(--brand-dark);}
.page-produk .box h2{font-size:clamp(1.1rem,2.5vw,1.7rem);font-weight:700;color:var(--navy);}
.page-produk .card-produk{text-align:center;font-weight:600;color:var(--navy);}

/* ================================================================
   DETAIL PRODUK — image & form same height
   ================================================================ */
.detail-produk{position:relative;}
.detail-produk>.row>.col-6:first-child{position:relative;}

/* Make both columns same height by stretching their inner card */
.detail-produk>.row{align-items:stretch;}
.detail-produk>.row>.col-6{display:flex;flex-direction:column;}
.detail-produk>.row>.col-6:first-child .owl-carousel,
.detail-produk>.row>.col-6:first-child .owl-stage-outer,
.detail-produk>.row>.col-6:first-child .owl-stage,
.detail-produk>.row>.col-6:first-child .owl-item{height:100%;}
.detail-produk>.row>.col-6:first-child .item{height:100%;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border-radius:var(--radius-lg);}
.detail-produk>.row>.col-6:first-child .item img{width:100%;height:300px;object-fit:contain;padding:1rem;}

.detail-produk .detail-form .card{flex:1;}
.detail-produk .owl-carousel{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);flex:1;}
.detail-produk .detail-form h3{margin-bottom:1.4rem;text-align:center;font-weight:700;color:var(--navy);font-size:1.05rem;}
.detail-produk .detail{margin-top:2rem;}
.detail-produk .detail h2{margin-bottom:1.1rem;font-weight:700;color:var(--navy);}
.detail-produk .detail-form a{color:var(--success);font-size:2.8rem;background:transparent;transition:transform var(--t-base) var(--ease-spring);display:inline-block;}
.detail-produk .detail-form a:hover{transform:scale(1.15) rotate(-3deg);}

/* ================================================================
   CART (KERANJANG)
   ================================================================ */
.page-keranjang{margin:2rem 0;}
.page-keranjang .card{border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-md)!important;border:1px solid var(--border-light)!important;overflow:hidden;}
.page-keranjang .box{margin-bottom:1.4rem;}
.page-keranjang .box .card-body h2{font-size:1.2rem;font-weight:700;color:var(--navy);}
.page-keranjang .box .card-body p{color:var(--text-muted);font-size:.86rem;margin-top:.3rem;}
.page-keranjang .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.page-keranjang table{border-collapse:separate;border-spacing:0;}
.page-keranjang table thead tr{background:linear-gradient(90deg,var(--bg) 0%,var(--brand-light) 100%);}
.page-keranjang table th{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--navy-soft);padding:12px 14px;border-bottom:2px solid var(--border)!important;white-space:nowrap;}
.page-keranjang table td{padding:11px 14px;vertical-align:middle;font-size:.88rem;border-bottom:1px solid var(--border-light)!important;color:var(--text);}
.page-keranjang table tbody tr:last-child td{border-bottom:none!important;}
.page-keranjang table tbody tr{transition:background var(--t-fast);}
.page-keranjang table tbody tr:hover{background:rgba(2,132,199,.04);}
.page-keranjang table td img{width:52px;height:52px;object-fit:cover;border-radius:var(--radius-sm);border:2px solid var(--border-light);}
.page-keranjang .card .card-header{background:linear-gradient(135deg,var(--surface-2) 0%,var(--bg) 100%)!important;border-top:1px solid var(--border-light)!important;padding:1.2rem 1.5rem;}
.card .card-header .total-belanja-text{font-size:.82rem;color:var(--text-muted);font-weight:600;line-height:1.5;}
.card .card-header .total-belanja-text strong{display:block;font-size:1.35rem;font-weight:900;color:var(--brand-dark);margin-top:2px;letter-spacing:-.4px;}
.card .card-header .minimal-belanja-text{font-size:.76rem;color:var(--danger);font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:.3rem;background:var(--danger-lt);padding:.38rem .7rem;border-radius:var(--radius-sm);border:1px solid rgba(220,38,38,.15);}
.btn-checkout-disabled{opacity:.45;cursor:not-allowed!important;pointer-events:none;}

/* ================================================================
   CHECKOUT page — order summary strip
   ================================================================ */
.checkout-summary{background:var(--surface-2);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:1rem 1.2rem;margin-bottom:1rem;}
.checkout-summary .cs-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;font-size:.9rem;color:var(--text-muted);font-weight:600;}
.checkout-summary .cs-row.cs-total{border-top:2px solid var(--border);margin-top:.5rem;padding-top:.8rem;color:var(--navy);font-size:1.05rem;font-weight:900;}
.checkout-summary .cs-row.cs-total span:last-child{color:var(--brand-dark);}
.checkout-summary .cs-row.cs-ongkir{color:var(--warn);}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn{font-family:Poppins,sans-serif;font-weight:700;letter-spacing:.15px;transition:transform var(--t-base) var(--ease-spring),box-shadow var(--t-base),opacity var(--t-fast)!important;}
.btn-primary{background:var(--grad-brand)!important;border:none!important;border-radius:var(--radius-pill)!important;color:#fff!important;box-shadow:var(--shadow-brand)!important;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(2,132,199,.38)!important;color:#fff!important;opacity:.94;}
.btn-success{background:linear-gradient(135deg,#10b981 0%,#059669 100%)!important;border:none!important;border-radius:var(--radius-pill)!important;color:#fff!important;font-weight:700;box-shadow:0 3px 12px rgba(5,150,105,.28)!important;}
.btn-success:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(5,150,105,.38)!important;color:#fff!important;opacity:.93;}
.btn-info{background:var(--grad-brand)!important;border:none!important;border-radius:var(--radius-pill)!important;color:#fff!important;font-weight:700;box-shadow:var(--shadow-brand)!important;}
.btn-info:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(2,132,199,.35)!important;color:#fff!important;opacity:.93;}
.btn-danger{background:var(--grad-danger)!important;border:none!important;border-radius:var(--radius-sm)!important;box-shadow:0 3px 10px rgba(220,38,38,.25)!important;}
.btn-danger:hover{transform:scale(1.05);box-shadow:0 6px 16px rgba(220,38,38,.4)!important;}
.btn-secondary{background:var(--bg-alt)!important;border:1px solid var(--border)!important;border-radius:var(--radius-pill)!important;color:var(--text-muted)!important;}
.btn-outline-primary{border:2px solid var(--brand)!important;color:var(--brand)!important;border-radius:var(--radius-pill)!important;background:transparent!important;font-weight:700;}
.btn-outline-primary:hover{background:var(--brand-light)!important;color:var(--brand-dark)!important;}

/* ================================================================
   FORMS
   ================================================================ */
.form-control{font-family:Poppins,sans-serif;font-weight:500;font-size:.9rem;border-radius:var(--radius-sm)!important;border:1.5px solid var(--border)!important;color:var(--text);padding:.6rem .9rem;background:var(--surface);transition:border-color var(--t-fast),box-shadow var(--t-fast)!important;}
.form-control:focus{border-color:var(--brand)!important;box-shadow:0 0 0 3px rgba(2,132,199,.12)!important;background:var(--surface);}
.form-control[readonly]{background:var(--surface-2)!important;color:var(--text-muted);}

/* ================================================================
   CARDS
   ================================================================ */
.card{border-radius:var(--radius-lg)!important;border:1px solid var(--border-light)!important;box-shadow:var(--shadow-sm)!important;background:var(--surface);}
.card-body{padding:1.3rem;}
.card-header{padding:.9rem 1.3rem;}

/* ================================================================
   PROFILE page
   ================================================================ */
.page-profil{margin:2rem 0;}
.page-profil .card{border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-sm)!important;border:1px solid var(--border-light)!important;}
.page-profil .card-header{background:linear-gradient(135deg,var(--brand-light) 0%,var(--surface) 100%)!important;border-bottom:1px solid var(--border-light)!important;text-align:center;padding:1.5rem 1rem;}
.page-profil .card-header .profile-avatar{
    width:90px;height:90px;border-radius:50%;object-fit:cover;
    border:3px solid var(--surface);box-shadow:0 0 0 3px var(--brand),var(--shadow-md);
    margin:0 auto 1rem;display:block;
}
.page-profil .card-title h2{text-align:center;font-size:1.1rem;font-weight:700;color:var(--navy);letter-spacing:-.2px;}
.page-profil .nav a{font-size:.88rem;font-weight:600;color:var(--text-muted);border-radius:var(--radius-sm)!important;transition:background var(--t-fast),color var(--t-fast),padding-left var(--t-fast);padding:.45rem .9rem;display:block;}
.page-profil .nav a:hover{background:var(--brand-light);color:var(--brand-dark);}
.page-profil .nav .active-menu{background:var(--brand-light);color:var(--brand-dark);font-weight:700;}

/* Profile info grid */
.profile-info-grid{display:grid;gap:.8rem;}
.profile-info-row{display:flex;align-items:flex-start;gap:1rem;padding:.75rem;background:var(--surface-2);border-radius:var(--radius-sm);border:1px solid var(--border-light);}
.profile-info-row .pir-label{font-size:.76rem;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.6px;min-width:80px;padding-top:.1rem;}
.profile-info-row .pir-value{font-size:.92rem;font-weight:600;color:var(--text);word-break:break-all;}

/* ================================================================
   PESANAN / ORDER TABLE
   ================================================================ */
.pesanan-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;}
.pesanan-header h5{font-size:1.1rem;font-weight:700;color:var(--navy);margin:0;}
.table-clean{width:100%;border-collapse:collapse;}
.table-clean thead tr{background:var(--bg);}
.table-clean th{padding:11px 14px;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:2px solid var(--border);}
.table-clean td{padding:12px 14px;font-size:.9rem;vertical-align:middle;border-bottom:1px solid var(--border-light);}
.table-clean tbody tr:last-child td{border-bottom:none;}
.table-clean tbody tr{transition:background var(--t-fast);}
.table-clean tbody tr:hover{background:rgba(2,132,199,.04);}
.badge-status{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .7rem;border-radius:var(--radius-pill);font-size:.76rem;font-weight:700;}
.badge-pending{background:var(--danger-lt);color:var(--danger);}
.badge-lunas{background:var(--success-lt);color:var(--success);}
.whatsapp-cta{display:flex;align-items:center;gap:.75rem;background:var(--success-lt);border-radius:var(--radius-md);padding:1rem 1.2rem;border:1px solid rgba(5,150,105,.15);margin-top:1.2rem;}
.whatsapp-cta p{margin:0;font-size:.88rem;font-weight:600;color:var(--success);}
.whatsapp-cta a{font-size:2rem;color:var(--success);transition:transform var(--t-fast) var(--ease-spring);}
.whatsapp-cta a:hover{transform:scale(1.15) rotate(-4deg);}

/* ================================================================
   RIWAYAT
   ================================================================ */
.riwayat-card{border-radius:var(--radius-md);border:1px solid var(--border-light);box-shadow:var(--shadow-xs);overflow:hidden;margin-bottom:1.1rem;transition:box-shadow var(--t-base);}
.riwayat-card:hover{box-shadow:var(--shadow-sm);}
.riwayat-card-header{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.1rem;background:var(--surface-2);border-bottom:1px solid var(--border-light);}
.riwayat-card-header .rch-date{font-size:.8rem;color:var(--text-light);font-weight:600;}
.riwayat-card-header .rch-id{font-size:.82rem;color:var(--brand-dark);font-weight:700;}
.riwayat-card-body{padding:.9rem 1.1rem;}
.riwayat-item{display:flex;align-items:center;gap:.75rem;padding:.55rem 0;border-bottom:1px solid var(--border-light);}
.riwayat-item:last-child{border-bottom:none;}
.riwayat-item img{width:48px;height:48px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border-light);flex-shrink:0;}
.riwayat-item .ri-name{font-size:.88rem;font-weight:600;color:var(--text);flex:1;}
.riwayat-item .ri-qty{font-size:.8rem;color:var(--text-muted);}
.riwayat-item .ri-sub{font-size:.88rem;font-weight:700;color:var(--brand-dark);white-space:nowrap;}
.riwayat-card-footer{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.1rem;background:var(--surface-2);border-top:1px solid var(--border-light);}
.riwayat-card-footer .rcf-total{font-size:.92rem;font-weight:700;color:var(--navy);}
.riwayat-card-footer .rcf-total span{color:var(--brand-dark);font-size:1rem;}
.riwayat-empty{text-align:center;padding:3rem 1rem;}
.riwayat-empty i{font-size:3rem;color:var(--text-light);margin-bottom:1rem;}
.riwayat-empty p{color:var(--text-muted);font-size:.92rem;}

/* ================================================================
   AUTH pages (login / daftar)
   ================================================================ */
.auth-wrap{min-height:calc(100vh - var(--navbar-h));display:flex;align-items:center;justify-content:center;padding:2rem var(--container-pad);}
.auth-card{background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-light);overflow:hidden;width:100%;max-width:480px;}
.auth-card-header{background:var(--grad-brand);padding:2.2rem 2rem;text-align:center;}
.auth-card-header .auth-logo{font-size:2rem;font-weight:900;color:#fff;letter-spacing:-1.5px;margin-bottom:.3rem;}
.auth-card-header p{color:rgba(255,255,255,.85);font-size:.88rem;font-weight:500;margin:0;}
.auth-card-body{padding:2rem;}
.auth-field{margin-bottom:1.1rem;}
.auth-field label{display:block;font-size:.8rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.4rem;}
.auth-field .input-wrap{position:relative;}
.auth-field .input-wrap i{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:.9rem;}
.auth-field .input-wrap input,.auth-field .input-wrap textarea,.auth-field .input-wrap select{padding-left:2.4rem;}
.auth-field textarea.form-control{min-height:80px;resize:vertical;}
.auth-divider{text-align:center;margin:1.2rem 0;color:var(--text-light);font-size:.82rem;position:relative;}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:42%;height:1px;background:var(--border);}
.auth-divider::before{left:0;} .auth-divider::after{right:0;}
.auth-links{text-align:center;font-size:.84rem;color:var(--text-muted);margin-top:1.1rem;}
.auth-links a{color:var(--brand-dark);font-weight:700;transition:color var(--t-fast);}
.auth-links a:hover{color:var(--brand);}

/* ================================================================
   FOTO UPLOAD PREVIEW
   ================================================================ */
.foto-preview-wrap{position:relative;display:inline-block;}
.foto-preview{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid var(--surface);box-shadow:0 0 0 3px var(--brand),var(--shadow-sm);}
.foto-upload-btn{position:absolute;bottom:0;right:0;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer;box-shadow:var(--shadow-sm);transition:background var(--t-fast);}
.foto-upload-btn:hover{background:var(--brand-dark);}
.foto-upload-input{display:none;}

/* ================================================================
   FLASH POPUP (SweetAlert2 override)
   ================================================================ */
.animated-popup{border-radius:var(--radius-lg)!important;padding:2rem!important;box-shadow:var(--shadow-lg)!important;font-family:Poppins,sans-serif!important;}

/* ================================================================
   FOOTER
   ================================================================ */
footer{background:var(--grad-navy);color:#94a3b8;padding:4rem 0 1.8rem;margin-top:5rem;position:relative;overflow:hidden;}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-brand);}
footer::after{content:'';position:absolute;bottom:-40%;right:-10%;width:45vw;height:45vw;border-radius:50%;background:radial-gradient(circle,rgba(2,132,199,.06) 0%,transparent 70%);pointer-events:none;}
footer .container>.row{gap:2rem 0;position:relative;z-index:1;}
footer h3{font-size:.86rem;font-weight:700;color:#fff;margin-bottom:1.1rem;text-transform:uppercase;letter-spacing:1.5px;}
footer .footer-menu{list-style:none;}
footer .footer-menu a{color:#94a3b8;font-size:.86rem;font-weight:500;display:inline-block;margin-bottom:.55rem;transition:color var(--t-fast),padding-left var(--t-fast);}
footer .footer-menu a:hover{color:var(--brand);padding-left:4px;}
footer .footer-kontak{font-size:.84rem;line-height:2.1;color:#94a3b8;}
footer .footer-kontak b{color:#fff;}
footer .footer-social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem;}
footer .footer-social a{width:36px;height:36px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);color:#c8d9e6;font-size:13px;border:1px solid rgba(255,255,255,.1);transition:background var(--t-base),transform var(--t-base) var(--ease-spring),color var(--t-fast);}
footer .footer-social a:hover{background:var(--brand);border-color:var(--brand);transform:translateY(-3px);color:#fff;box-shadow:var(--shadow-brand);}
.created{background:rgba(0,0,0,.25);color:#64748b;text-align:center;font-size:.78rem;padding:.9rem;border-top:1px solid rgba(255,255,255,.05);position:relative;z-index:1;}
.created a{color:var(--brand);font-weight:600;}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes heroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ================================================================
   RESPONSIVE — 5 breakpoints
   ================================================================ */
@media(max-width:1366px){html{font-size:94%;}:root{--container-pad:5%;}}

@media(max-width:1024px){
    html{font-size:89%;}:root{--container-pad:4%;--navbar-h:64px;}
    #btn-menu{display:inline-flex;}
    .navbar .navbar-menu{position:fixed;top:0;right:0;bottom:0;width:min(72vw,280px);height:100dvh;background:rgba(255,255,255,.97);backdrop-filter:blur(28px);padding:calc(var(--navbar-h)+1.4rem) 1.4rem 2rem;display:flex;flex-direction:column;gap:0;
        /* Semua ini diperlukan agar menu benar-benar hilang di mobile */
        transform:translateX(110%);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:transform var(--t-slow) var(--ease),opacity var(--t-slow) var(--ease),visibility var(--t-slow);
        z-index:1100;box-shadow:-10px 0 40px rgba(15,23,42,.16);border-left:1px solid var(--border-light);overflow-y:auto;}
    .navbar .navbar-menu.active{transform:translateX(0);opacity:1;visibility:visible;pointer-events:all;}
    .navbar .navbar-menu a{display:flex;align-items:center;gap:.7rem;margin:0;padding:.9rem .75rem;font-size:.97rem;border-bottom:1px solid var(--border-light);color:var(--navy);border-radius:var(--radius-sm);transition:background var(--t-fast),color var(--t-fast),padding-left var(--t-fast);}
    .navbar .navbar-menu a:hover{background:var(--brand-light);color:var(--brand-dark);padding-left:1.1rem;}
    .navbar .navbar-menu a::after{display:none;}
    .navbar .search-form{right:var(--container-pad);width:min(55vw,310px);}
    .about .about-img img{height:260px;}
    footer{padding:2.8rem 0 1.4rem;margin-top:3.5rem;}
    footer .col-4,footer .col-6{flex:0 0 100%;max-width:100%;margin-bottom:1.4rem;}
}

@media(max-width:768px){
    html{font-size:84%;}:root{--navbar-h:66px;--container-pad:5%;}
    .navbar .navbar-logo{font-size:1.55rem;}
    .navbar .navbar-icon a{width:44px;height:44px;font-size:1.05rem;}
    .navbar .user,.navbar .search-form{right:var(--container-pad);}
    .navbar .search-form{width:calc(100vw - var(--container-pad)*2);max-width:350px;}
    .hero .owl-carousel,.hero .item{height:74vh;min-height:420px;}
    .hero .content{padding:1.4rem var(--container-pad);}
    .hero .content p{max-width:88%;}
    /* Map lebih kecil di tablet */
    .kontak .kontak-map iframe{height:240px;}
    .about{margin-top:2rem;}
    .about .about-img img{height:200px;}
    .about .content{padding:1.6rem 1.3rem;}
    .produk{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}
    .produk .card{margin-top:0;width:100%;}
    .produk .card img{height:145px;}
    .produk .card-body h5{font-size:.78rem;}
    .produk .content p{font-size:.8rem;}
    .produk-box h2{font-size:1.35rem;}
    .detail-produk>.row>.col-6:first-child .item img{height:220px;}
    .page-keranjang table th,.page-keranjang table td{font-size:.76rem;padding:9px 10px;white-space:nowrap;}
    .page-keranjang table td img{width:42px;height:42px;}
    .page-keranjang .card .card-header{padding:1rem 1.1rem;}
    .page-keranjang .card .card-header .btn,.page-keranjang .card .card-header .btn-checkout-disabled{width:100%;justify-content:center;}
    .auth-card{max-width:100%;border-radius:var(--radius-lg);}
    .auth-wrap{padding:1.5rem var(--container-pad);}
    footer{margin-top:3rem;}
    footer h3::after{display:none;}
}

@media(max-width:480px){
    html{font-size:77%;}:root{--navbar-h:64px;--container-pad:4%;}
    .navbar .navbar-logo{font-size:1.5rem;letter-spacing:-1px;}
    .navbar .navbar-icon a{width:44px;height:44px;font-size:1rem;}
    #btn-menu{font-size:1.2rem;}
    .hero .owl-carousel,.hero .item{height:64vh;min-height:350px;}
    .hero .content h1{letter-spacing:-1px;}
    /* Map sangat kecil di HP kecil */
    .kontak .kontak-map iframe{height:190px;border-radius:var(--radius-md);}
    .produk{grid-template-columns:repeat(2,1fr);gap:.6rem;}
    .produk .card img{height:112px;}
    .produk .card-body{padding:.7rem;}
    .produk .card-body h5{font-size:.74rem;}
    .page-keranjang table th:nth-child(2),.page-keranjang table td:nth-child(2){display:none;}
    .page-keranjang table th,.page-keranjang table td{font-size:.72rem;padding:7px 8px;}
    .card .card-header .minimal-belanja-text{font-size:.72rem;}
    .breadcrumb{font-size:.74rem;padding:.48rem .85rem;}
    .about .about-img img{height:170px;}
    footer{padding:2.2rem 0 1rem;margin-top:2.5rem;}
    .created{font-size:.74rem;}
    .auth-card-body{padding:1.4rem;}
}