/* =========================================================
   ROTI GEMBUNG SRIKAYA — design tokens
   Palette terinspirasi dari roti gembung itu sendiri:
   krim tepung, emas kulit roti panggang, & hijau pandan srikaya.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --krim:        #FBF3E3;   /* dasar tepung */
  --krim-tua:    #F2E6CC;
  --emas-roti:   #D9A441;   /* kulit roti panggang */
  --emas-tua:    #B9842B;
  --coklat-roti: #6B4226;   /* coklat kulit roti */
  --hijau-srikaya:#5E7F3F;  /* selai pandan */
  --hijau-tua:   #3F5C32;
  --hijau-muda:  #8FAE68;
  --tinta:       #2B2014;
  --tinta-lembut:#5B4B3A;
  --putih:       #FFFDF8;
  --garis:       #E7D8B8;
  --merah:       #C0463A;

  --radius-blob: 58% 42% 65% 35% / 45% 53% 47% 55%;
  --radius-md:   18px;
  --radius-lg:   28px;
  --shadow-soft: 0 14px 34px -16px rgba(107,66,38,.35);
  --shadow-card: 0 8px 22px -12px rgba(43,32,20,.22);

  --font-display: 'Fraunces', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--krim);
  color:var(--tinta);
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 .4em; color:var(--coklat-roti); line-height:1.15; }
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:1rem; }
:focus-visible{ outline:3px solid var(--hijau-srikaya); outline-offset:2px; }

.container{ width:min(1180px, 92%); margin-inline:auto; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hijau-tua); margin-bottom:.6em;
}
.eyebrow::before{ content:"●"; color:var(--emas-roti); font-size:.7em; }

/* =========================== BUTTONS =========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.85em 1.6em; border-radius:999px; border:2px solid transparent;
  font-weight:700; font-size:.95rem; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-utama{ background:var(--hijau-srikaya); color:var(--putih); box-shadow:var(--shadow-soft); }
.btn-utama:hover{ background:var(--hijau-tua); transform:translateY(-2px); }
.btn-emas{ background:var(--emas-roti); color:var(--coklat-roti); box-shadow:var(--shadow-soft); }
.btn-emas:hover{ background:var(--emas-tua); transform:translateY(-2px); }
.btn-outline{ background:transparent; border-color:var(--coklat-roti); color:var(--coklat-roti); }
.btn-outline:hover{ background:var(--coklat-roti); color:var(--putih); }
.btn-kecil{ padding:.5em 1em; font-size:.82rem; border-radius:999px; }
.btn-blok{ width:100%; }
.btn-bahaya{ background:var(--merah); color:var(--putih); }
.btn-bahaya:hover{ background:#9d3a30; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* =========================== HEADER / NAV =========================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,243,227,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--garis);
}
.navbar{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:.9rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--coklat-roti); }
.brand-mark{ width:42px; height:42px; flex-shrink:0; }
.brand small{ display:block; font-family:var(--font-body); font-weight:600; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--hijau-tua); }
.nav-links{ display:flex; align-items:center; gap:1.6rem; font-weight:600; font-size:.95rem; }
.nav-links a{ position:relative; padding:.3em 0; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--emas-roti); transition:width .2s; }
.nav-links a:hover::after, .nav-links a.aktif::after{ width:100%; }
.nav-aksi{ display:flex; align-items:center; gap:.9rem; }
.icon-btn{ position:relative; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--putih); border:1px solid var(--garis); transition:background .2s,transform .2s; }
.icon-btn:hover{ background:var(--krim-tua); transform:translateY(-2px); }
.icon-btn svg{ width:19px; height:19px; stroke:var(--coklat-roti); }
.badge-keranjang{ position:absolute; top:-4px; right:-4px; background:var(--merah); color:#fff; font-size:.65rem; font-weight:800; width:19px; height:19px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.menu-toggle{ display:none; background:none; border:none; padding:.4em; }
.menu-toggle svg{ width:26px; height:26px; stroke:var(--coklat-roti); }

/* =========================== HERO =========================== */
.hero{ position:relative; overflow:hidden; padding:4.2rem 0 5rem; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center; }
.hero h1{ font-size:clamp(2.3rem, 4.2vw, 3.5rem); font-weight:600; }
.hero h1 em{ font-style:italic; color:var(--hijau-srikaya); }
.hero p.lead{ font-size:1.08rem; color:var(--tinta-lembut); max-width:46ch; }
.hero-cta{ display:flex; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:1.8rem; margin-top:2.4rem; }
.hero-stats div strong{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--coklat-roti); }
.hero-stats div span{ font-size:.78rem; color:var(--tinta-lembut); }

.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero-visual::before{
  content:""; position:absolute; inset:6% ; background:var(--emas-roti); opacity:.18;
  border-radius:var(--radius-blob); filter:blur(2px); animation:goyang 9s ease-in-out infinite;
}
.bun-frame{ position:relative; width:min(420px, 90%); aspect-ratio:1/1; }
.bun-frame svg{ width:100%; height:100%; filter:drop-shadow(0 22px 26px rgba(107,66,38,.28)); }
.steam{ position:absolute; top:-6%; left:50%; width:2px; }
@keyframes goyang{ 0%,100%{ transform:rotate(0deg) scale(1);} 50%{ transform:rotate(6deg) scale(1.04);} }
@keyframes mengepul{ 0%{ opacity:0; transform:translate(-50%,0) scaleY(.6);} 30%{opacity:.55;} 100%{ opacity:0; transform:translate(-50%,-46px) scaleY(1.3);} }
.steam-path{ animation:mengepul 3.2s ease-in-out infinite; transform-origin:bottom; }
.steam-path:nth-child(2){ animation-delay:.9s; }
.steam-path:nth-child(3){ animation-delay:1.8s; }

@media (prefers-reduced-motion: reduce){
  .hero-visual::before, .steam-path{ animation:none; }
}

/* =========================== SECTION HEADERS =========================== */
.section{ padding:4rem 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:2.2rem; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin:0; }
.section-head p{ color:var(--tinta-lembut); margin:0; max-width:50ch; }
.bg-krim-tua{ background:var(--krim-tua); }
.bg-coklat{ background:var(--coklat-roti); color:var(--krim); }
.bg-coklat h2, .bg-coklat .eyebrow{ color:var(--krim); }
.bg-coklat .eyebrow::before{ color:var(--emas-roti); }

/* =========================== KATEGORI PILLS =========================== */
.kategori-pills{ display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:2rem; }
.kategori-pills a{
  padding:.55em 1.2em; border-radius:999px; background:var(--putih); border:1px solid var(--garis);
  font-weight:600; font-size:.88rem; color:var(--tinta-lembut); transition:.2s;
}
.kategori-pills a:hover, .kategori-pills a.aktif{ background:var(--hijau-srikaya); border-color:var(--hijau-srikaya); color:#fff; }

/* =========================== PRODUCT GRID & CARD =========================== */
.grid-produk{ display:grid; grid-template-columns:repeat(auto-fill, minmax(248px,1fr)); gap:1.6rem; }
.kartu-produk{
  background:var(--putih); border:1px solid var(--garis); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .22s ease;
  box-shadow:var(--shadow-card);
}
.kartu-produk:hover{ transform:translateY(-6px); box-shadow:0 20px 30px -16px rgba(43,32,20,.3); }
.kartu-produk .gambar-bungkus{
  position:relative; background:linear-gradient(160deg, var(--krim-tua), var(--krim));
  padding:1.4rem; display:flex; align-items:center; justify-content:center;
}
.kartu-produk .gambar-bungkus img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-blob);
  box-shadow:0 10px 18px -10px rgba(107,66,38,.4);
}
.label-diskon{ position:absolute; top:.8rem; left:.8rem; background:var(--merah); color:#fff; font-size:.7rem; font-weight:800; padding:.3em .7em; border-radius:999px; }
.kartu-produk .isi{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.kartu-produk .kategori-label{ font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--hijau-tua); }
.kartu-produk h3{ font-size:1.08rem; margin:0; }
.kartu-produk h3 a:hover{ color:var(--hijau-srikaya); }
.rating-mini{ display:flex; align-items:center; gap:.3rem; font-size:.82rem; color:var(--tinta-lembut); }
.rating-mini svg{ width:14px; height:14px; fill:var(--emas-roti); }
.harga-baris{ display:flex; align-items:baseline; gap:.5rem; margin-top:.2rem; }
.harga{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--coklat-roti); }
.harga-coret{ font-size:.8rem; color:#9c8b75; text-decoration:line-through; }
.kartu-produk .aksi-bawah{ margin-top:.6rem; display:flex; gap:.5rem; }

/* =========================== DETAIL PRODUK =========================== */
.detail-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:start; }
.detail-gambar{ background:linear-gradient(160deg, var(--krim-tua), var(--krim)); border-radius:var(--radius-lg); padding:2.4rem; position:sticky; top:100px; }
.detail-gambar img{ border-radius:var(--radius-blob); aspect-ratio:1/1; object-fit:cover; box-shadow:var(--shadow-soft); }
.detail-info .harga-besar{ font-family:var(--font-display); font-size:2rem; color:var(--coklat-roti); font-weight:700; }
.stok-info{ font-size:.88rem; color:var(--hijau-tua); font-weight:600; }
.stepper{ display:inline-flex; align-items:center; border:1px solid var(--garis); border-radius:999px; overflow:hidden; }
.stepper button{ width:40px; height:40px; background:var(--krim-tua); border:none; font-size:1.1rem; font-weight:700; color:var(--coklat-roti); }
.stepper input{ width:54px; text-align:center; border:none; background:transparent; font-weight:700; }
.fitur-list{ display:grid; gap:.6rem; margin:1.4rem 0; }
.fitur-list li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--tinta-lembut); }
.fitur-list svg{ width:18px; height:18px; flex-shrink:0; stroke:var(--hijau-srikaya); margin-top:2px; }

/* =========================== TESTIMONI =========================== */
.grid-testimoni{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.4rem; }
.kartu-testimoni{ background:var(--putih); border-radius:var(--radius-md); padding:1.6rem; border:1px solid var(--garis); }
.kartu-testimoni .stars{ display:flex; gap:2px; margin-bottom:.6rem; }
.kartu-testimoni .stars svg{ width:15px; height:15px; fill:var(--emas-roti); }
.kartu-testimoni .nama-testi{ font-weight:700; color:var(--coklat-roti); margin-top:.8rem; }

/* =========================== FOOTER =========================== */
.site-footer{ background:var(--coklat-roti); color:#EAD9BC; padding:3.2rem 0 1.4rem; margin-top:3rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.4rem; }
.footer-grid h4{ color:var(--krim); font-family:var(--font-body); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; }
.footer-grid li{ margin-bottom:.55rem; font-size:.92rem; opacity:.88; }
.footer-grid a:hover{ color:var(--emas-roti); }
.footer-bawah{ margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.15); font-size:.82rem; opacity:.75; text-align:center; }

/* =========================== FORM / AUTH =========================== */
.bungkus-form{ max-width:460px; margin:3.5rem auto; background:var(--putih); border:1px solid var(--garis); border-radius:var(--radius-lg); padding:2.4rem; box-shadow:var(--shadow-card); }
.bungkus-form h1{ font-size:1.8rem; text-align:center; }
.subjudul-form{ text-align:center; color:var(--tinta-lembut); margin-bottom:1.8rem; font-size:.92rem; }
.grup-form{ margin-bottom:1.1rem; }
.grup-form label{ display:block; font-weight:700; font-size:.85rem; margin-bottom:.4rem; color:var(--coklat-roti); }
.grup-form input, .grup-form select, .grup-form textarea{
  width:100%; padding:.75em .9em; border-radius:12px; border:1.5px solid var(--garis); background:var(--krim);
  transition:border-color .2s;
}
.grup-form input:focus, .grup-form select:focus, .grup-form textarea:focus{ border-color:var(--hijau-srikaya); outline:none; }
.tautan-bawah{ text-align:center; margin-top:1.2rem; font-size:.9rem; color:var(--tinta-lembut); }
.tautan-bawah a{ color:var(--hijau-srikaya); font-weight:700; }

/* =========================== ALERTS / BADGE STATUS =========================== */
.alert{ padding:.9em 1.2em; border-radius:14px; font-size:.92rem; font-weight:600; margin-bottom:1.2rem; }
.alert-sukses{ background:#E6F0DD; color:var(--hijau-tua); border:1px solid #C2DBAE; }
.alert-error{ background:#FBE6E3; color:var(--merah); border:1px solid #F0BDB5; }
.alert-info{ background:#FFF3DC; color:var(--emas-tua); border:1px solid #F0DBA8; }
.badge{ display:inline-block; padding:.3em .8em; border-radius:999px; font-size:.74rem; font-weight:700; }
.badge-kuning{ background:#FFF3DC; color:#9A6A14; }
.badge-biru{ background:#DCEAFB; color:#1D5C9C; }
.badge-ungu{ background:#EBE0FA; color:#5E3A9C; }
.badge-hijau{ background:#E1F0D6; color:#3F5C32; }
.badge-merah{ background:#FBE0DD; color:#A1372C; }

/* =========================== KERANJANG / CHECKOUT =========================== */
.tabel-keranjang{ width:100%; border-collapse:collapse; background:var(--putih); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); }
.tabel-keranjang th{ text-align:left; background:var(--krim-tua); padding:1em; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--coklat-roti); }
.tabel-keranjang td{ padding:1em; border-top:1px solid var(--garis); vertical-align:middle; }
.item-produk-keranjang{ display:flex; gap:1rem; align-items:center; }
.item-produk-keranjang img{ width:64px; height:64px; object-fit:cover; border-radius:50%; }
.ringkasan-box{ background:var(--putih); border:1px solid var(--garis); border-radius:var(--radius-lg); padding:1.6rem; position:sticky; top:100px; }
.baris-ringkasan{ display:flex; justify-content:space-between; padding:.5em 0; font-size:.94rem; color:var(--tinta-lembut); }
.baris-ringkasan.total{ font-weight:800; font-size:1.15rem; color:var(--coklat-roti); border-top:1px dashed var(--garis); margin-top:.5em; padding-top:1em; }
.keranjang-kosong{ text-align:center; padding:4rem 1rem; }
.keranjang-kosong svg{ width:90px; height:90px; stroke:var(--garis); margin-bottom:1rem; }

/* =========================== ADMIN =========================== */
.admin-shell{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.admin-sidebar{ background:var(--coklat-roti); color:var(--krim); padding:1.6rem 1.2rem; }
.admin-sidebar .brand{ color:var(--krim); margin-bottom:2rem; }
.admin-sidebar a{ display:flex; align-items:center; gap:.7rem; padding:.75em 1em; border-radius:12px; font-weight:600; font-size:.92rem; opacity:.85; margin-bottom:.3rem; }
.admin-sidebar a:hover, .admin-sidebar a.aktif{ background:rgba(255,255,255,.12); opacity:1; }
.admin-sidebar a svg{ width:18px; height:18px; }
.admin-main{ padding:2rem 2.4rem; background:var(--krim); }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.8rem; }
.kartu-statistik{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.2rem; margin-bottom:2rem; }
.statistik{ background:var(--putih); border:1px solid var(--garis); border-radius:var(--radius-md); padding:1.4rem; box-shadow:var(--shadow-card); }
.statistik span{ font-size:.8rem; color:var(--tinta-lembut); font-weight:600; }
.statistik strong{ display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--coklat-roti); margin-top:.3rem; }
.panel{ background:var(--putih); border:1px solid var(--garis); border-radius:var(--radius-md); padding:1.6rem; box-shadow:var(--shadow-card); }
.tabel-admin{ width:100%; border-collapse:collapse; }
.tabel-admin th{ text-align:left; padding:.8em; font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-lembut); border-bottom:2px solid var(--garis); }
.tabel-admin td{ padding:.9em .8em; border-bottom:1px solid var(--garis); font-size:.92rem; }
.tabel-admin img{ width:46px; height:46px; object-fit:cover; border-radius:50%; }
.aksi-tabel{ display:flex; gap:.4rem; }
.aksi-tabel a, .aksi-tabel button{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--garis); background:var(--krim); }
.aksi-tabel svg{ width:15px; height:15px; }

/* =========================== UTIL =========================== */
.kosong-state{ text-align:center; padding:3rem; color:var(--tinta-lembut); }
.label-login-admin{ background:var(--hijau-tua); color:#fff; text-align:center; padding:.5em; font-size:.8rem; }

/* =========================== RESPONSIVE =========================== */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .detail-grid{ grid-template-columns:1fr; }
  .detail-gambar{ position:static; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .admin-shell{ grid-template-columns:1fr; }
  .admin-sidebar{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
  .admin-sidebar .brand{ margin-bottom:0; width:100%; }
}
@media (max-width: 760px){
  .nav-links{ position:fixed; inset:64px 0 0 0; background:var(--krim); flex-direction:column; padding:2rem; gap:1.4rem; transform:translateX(100%); transition:transform .25s ease; }
  .nav-links.terbuka{ transform:translateX(0); }
  .menu-toggle{ display:flex; }
  .footer-grid{ grid-template-columns:1fr; }
  .ringkasan-box{ position:static; }
}