:root {
  --navy:#0E2442; --navy-2:#173559; --ink:#14233A;
  --orange:#FF7A2B; --orange-text:#BF4A08;
  --mist:#EEF2F7; --line:#DCE3EC; --muted:#5B6B80;
}
body { font-family:'Figtree',system-ui,sans-serif; color:var(--ink); background:#fff; line-height:1.6; }
h1,h2,h3,h4,.brand,.brand-link,.footer-brand { font-family:'Young Serif',Georgia,serif; font-weight:400; color:var(--navy); line-height:1.2; }
a { text-decoration:none; }
a:focus-visible, button:focus-visible, .form-control:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }

/* utilitas (dipakai juga oleh admin) */
.bg-navy { background:var(--navy) !important; }
.text-navy { color:var(--navy) !important; }
.text-orange { color:var(--orange-text) !important; }
.brand { color:#fff; font-size:1.2rem; }
.brand span { color:var(--orange); }
.navbar-dark .nav-link.active { color:var(--orange) !important; }

/* tombol */
.btn { font-weight:600; border-radius:6px; padding:.6rem 1.1rem; }
.btn-orange { background:var(--orange); color:var(--navy); border:1px solid var(--orange); }
.btn-orange:hover, .btn-orange:focus { background:#FF8F4A; border-color:#FF8F4A; color:var(--navy); }
.btn-line, .btn-outline-navy { background:#fff; color:var(--navy); border:1px solid var(--navy); }
.btn-line:hover, .btn-outline-navy:hover { background:var(--navy); color:#fff; }
.btn-ghost { color:#fff; border:1px solid rgba(255,255,255,.45); }
.btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; }
.btn-sm { padding:.35rem .7rem; }

/* navbar pelanggan */
.site-nav { background:#fff; border-bottom:1px solid var(--line); z-index:1030; }
.site-nav .navbar { padding:.7rem 0; }
.brand-link { display:inline-flex; align-items:center; gap:.65rem; font-size:1.3rem; }
.site-nav .nav-link { color:var(--ink); font-weight:500; padding:.5rem 1rem; border-bottom:2px solid transparent; }
.site-nav .nav-link:hover { color:var(--navy); border-bottom-color:var(--line); }
.site-nav .nav-link.active { color:var(--navy); font-weight:700; border-bottom-color:var(--orange); }
.cart-btn { display:inline-flex; align-items:center; gap:.5rem; background:var(--navy); color:#fff; padding:.5rem .9rem; border-radius:6px; font-weight:600; font-size:.95rem; }
.cart-btn:hover { background:var(--navy-2); color:#fff; }
.cart-count { background:var(--orange); color:var(--navy); border-radius:20px; min-width:22px; padding:0 7px; text-align:center; font-size:.8rem; font-weight:700; }
@media (max-width:991px) { .site-nav .navbar-collapse { padding:.8rem 0 .4rem; } }
.nav-right { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.user-btn { background:#fff; border:1px solid var(--line); border-radius:6px; padding:.45rem .8rem; font-weight:600; color:var(--navy); }
.user-btn:hover { border-color:var(--navy); }
.dropdown-menu { border-color:var(--line); border-radius:8px; }
.dropdown-item:active { background:var(--navy); }

/* hero */
.hero { background-color:var(--navy); color:#fff; padding:76px 0 84px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='44'%3E%3Cpath d='M0 22 Q15 2 30 22 T60 22 T90 22 T120 22' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.5'/%3E%3C/svg%3E"); }
.hero h1 { color:#fff; font-size:clamp(2.1rem,4.4vw,3.5rem); max-width:15em; }
.hero-lead { color:#BFCCDD; font-size:1.12rem; max-width:34em; margin:1.3rem 0 1.8rem; }
.hero-points { list-style:none; padding:0; margin:2rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; color:#D5DEEA; font-size:.95rem; }
.hero-points i { color:var(--orange); margin-right:.4rem; }
.hero-art svg { width:100%; max-width:440px; height:auto; display:block; margin:0 auto; overflow:visible; }
.pouch-a { animation:rise .9s cubic-bezier(.2,.7,.2,1) both; }
.pouch-b { animation:rise .9s .12s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .pouch-a, .pouch-b { animation:none; } }

/* bagian umum */
.section { padding:72px 0 0; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.section-head h2 { font-size:clamp(1.6rem,3vw,2.2rem); margin:0; }
.link-more { font-weight:600; color:var(--navy); border-bottom:2px solid var(--orange); }
.link-more:hover { color:var(--orange-text); }

/* kartu produk */
.pcard { height:100%; display:flex; flex-direction:column; }
.pcard-img { display:block; aspect-ratio:1/1; background:var(--mist); border-radius:6px; overflow:hidden; }
.pcard-img img { width:100%; height:100%; object-fit:cover; display:block; }
.pcard-body { padding:.9rem 0 0; display:flex; flex-direction:column; flex-grow:1; }
.pcard-name { font-weight:700; color:var(--navy); font-size:1.05rem; line-height:1.3; }
.pcard-name:hover { text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:4px; }
.pcard-meta { font-size:.85rem; color:var(--muted); }
.pcard-desc { font-size:.9rem; color:var(--muted); margin:.5rem 0; flex-grow:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.price { color:var(--orange-text); font-weight:700; font-size:1.15rem; }
.pcard-actions { display:grid; grid-template-columns:1fr 1.3fr; gap:.5rem; margin-top:.7rem; }
.pcard-actions .btn { padding:.5rem .5rem; font-size:.92rem; }

/* keunggulan */
.why-intro { position:sticky; top:100px; }
.why-intro h2 { font-size:clamp(1.6rem,3vw,2.2rem); }
.why-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:1.5rem; padding:1.4rem 0; border-top:1px solid var(--line); }
.why-row:last-child { border-bottom:1px solid var(--line); }
.why-row h3 { font-size:1.2rem; margin:0; }
.why-row p { margin:0; color:var(--muted); }
@media (max-width:767px) { .why-row { grid-template-columns:1fr; gap:.3rem; } .why-intro { position:static; } }

/* testimoni */
.quote-big { font-family:'Young Serif',Georgia,serif; color:var(--navy); font-size:clamp(1.4rem,2.6vw,1.95rem); line-height:1.4; margin:0 0 1.2rem; }
.quote-who { color:var(--muted); font-size:.95rem; }
.quote-who strong { color:var(--ink); }
.quote-small { border-top:1px solid var(--line); padding:1.2rem 0; margin:0; }
.quote-small p { margin:0 0 .5rem; }

/* ajakan bawah */
.cta-panel { background:var(--navy); color:#fff; border-radius:8px; padding:2.4rem; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.cta-panel h2 { color:#fff; font-size:1.6rem; margin:0 0 .3rem; }
.cta-panel p { margin:0; color:#BFCCDD; }

/* footer */
.site-footer { background:var(--navy); color:#BFCCDD; padding:56px 0 24px; margin-top:80px; }
.footer-brand { display:inline-flex; align-items:center; gap:.65rem; color:#fff; font-size:1.3rem; }
.site-footer h6 { color:#fff; font-weight:700; margin-bottom:.9rem; }
.site-footer li { margin-bottom:.45rem; }
.site-footer a { color:#BFCCDD; }
.site-footer a:hover { color:var(--orange); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.14); margin-top:2.5rem; padding-top:1.2rem; font-size:.88rem; }

/* halaman dalam */
.page-head { padding:44px 0 26px; border-bottom:1px solid var(--line); margin-bottom:36px; background:#fff; }
.page-head h1 { font-size:clamp(1.8rem,3.5vw,2.5rem); margin:0; }
.page-head p { margin:.4rem 0 0; color:var(--muted); }
.crumb { font-size:.9rem; color:var(--muted); margin-bottom:1.2rem; }
.crumb a { color:var(--muted); text-decoration:underline; text-underline-offset:3px; }

/* detail produk */
.detail-media { background:var(--mist); border-radius:8px; overflow:hidden; aspect-ratio:1/1; }
.detail-media img { width:100%; height:100%; object-fit:cover; display:block; }
.detail-title { font-size:clamp(1.8rem,3.2vw,2.4rem); }
.detail-price { font-size:1.9rem; margin:.4rem 0 1.2rem; }
.spec { display:flex; gap:2rem; padding:.9rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:1.2rem; }
.spec dt { font-size:.85rem; color:var(--muted); font-weight:500; }
.spec dd { margin:0; font-weight:700; color:var(--navy); }

/* keranjang, checkout, form */
.table { --bs-table-border-color:var(--line); }
.table thead th { font-size:.88rem; color:var(--muted); font-weight:600; border-bottom:1px solid var(--navy); background:transparent; }
.form-control, .form-select { border-color:#C5CFDC; border-radius:6px; padding:.6rem .8rem; }
.form-control:focus, .form-select:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(255,122,43,.3); }
.form-label { font-weight:600; font-size:.92rem; }
.summary-box { background:var(--mist); border-radius:8px; padding:1.5rem; }
.summary-box h5 { font-family:'Young Serif',Georgia,serif; font-weight:400; color:var(--navy); }

/* tentang & kontak */
.lead-text { font-size:1.2rem; color:var(--ink); max-width:38em; }
.panel-navy { background:var(--navy); color:#D5DEEA; border-radius:8px; padding:2rem; }
.panel-navy h3 { color:#fff; font-size:1.3rem; }
.panel-navy ul { padding-left:1.1rem; margin:0; }
.panel-navy li { margin-bottom:.5rem; }
.contact-row { display:grid; grid-template-columns:150px 1fr; gap:1rem; padding:1.1rem 0; border-top:1px solid var(--line); }
.contact-row:last-child { border-bottom:1px solid var(--line); }
.contact-row dt { font-weight:600; color:var(--muted); }
.contact-row dd { margin:0; font-weight:500; }
.contact-row a { color:var(--navy); text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:4px; }

/* login & daftar */
.auth-box { max-width:440px; margin:0 auto; border:1px solid var(--line); border-radius:8px; padding:2rem; background:#fff; }
.order-box { border:1px solid var(--line); border-radius:8px; padding:1.2rem 1.4rem; margin-bottom:1rem; }

/* ================= ANIMASI & POLES (tambahan) ================= */
html { scroll-behavior:smooth; }
::selection { background:var(--orange); color:var(--navy); }

/* transisi halus global */
.btn, .cart-btn, .user-btn, .link-more, .site-nav .nav-link, .form-control { transition:all .25s ease; }

/* tombol */
.btn:active { transform:scale(.97); }
.btn-orange:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,122,43,.35); }
.btn-line:hover, .btn-outline-navy:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(14,36,66,.18); }
.btn-ghost:hover { transform:translateY(-2px); }
.cart-btn:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(14,36,66,.25); }

/* navbar: bayangan saat di-scroll + garis oranye geser */
.site-nav { transition:box-shadow .3s ease, background .3s ease; }
.site-nav.scrolled { box-shadow:0 6px 24px rgba(14,36,66,.12); background:rgba(255,255,255,.96); backdrop-filter:blur(8px); }
.site-nav.scrolled .navbar { padding:.45rem 0; }
.site-nav .navbar { transition:padding .3s ease; }
.site-nav .nav-link:hover { border-bottom-color:var(--orange); }
.brand-link img { transition:transform .5s cubic-bezier(.3,1.6,.5,1); }
.brand-link:hover img { transform:rotate(-12deg) scale(1.1); }

/* badge keranjang: denyut + pop */
.cart-count { display:inline-block; }
.cart-count.pop { animation:pop .6s cubic-bezier(.3,1.7,.5,1); }
@keyframes pop { 0%{transform:scale(1)} 40%{transform:scale(1.7) rotate(-8deg)} 100%{transform:scale(1)} }

/* hero: kemasan melayang + gelombang bergerak + teks muncul bertahap */
.pouch-a { animation:rise .9s cubic-bezier(.2,.7,.2,1) both, float 6s 1.2s ease-in-out infinite; }
.pouch-b { animation:rise .9s .12s cubic-bezier(.2,.7,.2,1) both, float 7s 1.4s ease-in-out infinite reverse; }
@keyframes float { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
.hero { position:relative; overflow:hidden; animation:waves 40s linear infinite; }
@keyframes waves { from{ background-position:0 0 } to{ background-position:240px 0 } }
.hero::after { content:""; position:absolute; width:520px; height:520px; right:-120px; top:-160px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,122,43,.22), transparent 65%); pointer-events:none; animation:glow 8s ease-in-out infinite; }
@keyframes glow { 0%,100%{ opacity:.6; transform:scale(1) } 50%{ opacity:1; transform:scale(1.15) } }
.hero .container { position:relative; z-index:1; }
.hero h1, .hero-lead, .hero .d-flex, .hero-points { animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-lead { animation-delay:.12s; }
.hero .d-flex { animation-delay:.24s; }
.hero-points { animation-delay:.36s; }
@keyframes fadeUp { from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
.hero-points li { transition:transform .25s; }
.hero-points li:hover { transform:translateX(4px); }

/* kartu produk */
.pcard { transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.pcard:hover { transform:translateY(-8px); }
.pcard-img { position:relative; box-shadow:0 2px 6px rgba(14,36,66,.06); transition:box-shadow .35s ease; }
.pcard:hover .pcard-img { box-shadow:0 18px 36px rgba(14,36,66,.18); }
.pcard-img img { transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.pcard:hover .pcard-img img { transform:scale(1.08); }
.detail-media { box-shadow:0 14px 40px rgba(14,36,66,.14); }
.detail-media img { transition:transform .6s ease; }
.detail-media:hover img { transform:scale(1.05); }

/* baris keunggulan, testimoni, CTA */
.why-row { transition:background .3s, padding-left .3s; }
.why-row:hover { background:var(--mist); padding-left:1rem; }
.why-row h3 { transition:color .3s; }
.why-row:hover h3 { color:var(--orange-text); }
.quote-small { transition:transform .3s; }
.quote-small:hover { transform:translateX(6px); }
.cta-panel { position:relative; overflow:hidden; }
.cta-panel::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,122,43,.18) 50%, transparent 70%);
  background-size:250% 100%; animation:shine 6s ease-in-out infinite; pointer-events:none; }
@keyframes shine { 0%{ background-position:150% 0 } 100%{ background-position:-100% 0 } }
.cta-panel > * { position:relative; }

/* tautan & footer */
.link-more { background:linear-gradient(var(--orange),var(--orange)) 0 100%/0 2px no-repeat; border-bottom:2px solid var(--line); transition:background-size .3s, color .3s; }
.link-more:hover { background-size:100% 2px; }
.site-footer a { display:inline-block; transition:color .2s, transform .2s; }
.site-footer a:hover { transform:translateX(4px); }

/* tabel keranjang */
.table tbody tr { transition:background .2s; }
.table tbody tr:hover { background:var(--mist); }

/* scroll reveal (hanya aktif jika JS jalan) */
.js .reveal { opacity:0; transform:translateY(32px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity:1; transform:none; }
.js .reveal.reveal-left { transform:translateX(-32px); }
.js .reveal.reveal-left.in { transform:none; }

/* halaman dalam */
.page-head h1, .page-head p { animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) both; }
.page-head p { animation-delay:.1s; }

/* HP: matikan efek hover berat */
@media (hover:none) { .pcard:hover, .why-row:hover, .quote-small:hover { transform:none; padding-left:0; } .why-row:hover { background:none; } }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .js .reveal { opacity:1; transform:none; }
}