/* ==========================================================================
   Mamagre: prototype storefront
   Palet dan tipografi diambil dari aset asli Mamagre (logo, kemasan, foto produk).
   ========================================================================== */

:root {
  --krem:        #F6F2E6;
  --krem-2:      #EFEADA;
  --krem-3:      #E5DFCB;
  --tinta:       #33200F;   /* gula aren pekat */
  --tinta-2:     #6B5340;
  --tinta-3:     #9A8874;
  --pandan:      #6E8138;   /* hijau kemasan */
  --pandan-tua:  #4F5D28;
  --pandan-muda: #B3C646;   /* hijau bolu */
  /* Hijau panel hover sengaja lebih gelap dari --pandan supaya teks putih
     di atasnya lolos kontras AA (5,7:1). --pandan sendiri hanya 3,7:1. */
  --panel:       #5B6C2C;
  --panel-label: #E4F0A8;   /* 4,7:1 di atas --panel */
  --terakota:    #BE5F32;   /* piring tanah liat */
  --emas:        #B7AA6A;
  --garis:       rgba(51, 32, 15, 0.13);
  --garis-kuat:  rgba(51, 32, 15, 0.28);

  --serif: "Bodoni 72", Didot, "Playfair Display", "Hoefler Text", Georgia, serif;
  --sans: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --maks: 1180px;
  --pad: clamp(1.15rem, 4vw, 3.5rem);
  --radius: 3px;
  --radius-panel: 34px;
  --cepat: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --sedang: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --pelan: 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--krem); color: var(--tinta);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* height:auto wajib, kalau tidak atribut width/height mengunci tingginya
   dan aspect-ratio tidak pernah berlaku. */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--terakota); outline-offset: 3px; }

.batas { max-width: var(--maks); margin: 0 auto; padding-inline: var(--pad); }
.tengah { text-align: center; }
.spasi-atas { margin-top: 2rem; }
.tengah p { margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.label {
  font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.28em;
  font-weight: 700; color: var(--pandan); margin: 0 0 0.7rem;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); line-height: 1.02; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; }
h3 { font-size: 1.05rem; line-height: 1.28; }
p { margin: 0; }
p + p { margin-top: 0.85rem; }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-content: center; justify-items: center; gap: 1.5rem;
  background: var(--krem);
  transition: opacity var(--pelan), visibility var(--pelan);
}
body.siap .loader { opacity: 0; visibility: hidden; }
/* Hentikan animasinya setelah loader ditutup. visibility:hidden saja tidak
   menghentikan animation, jadi kuenya akan terus berganti dan cincinnya terus
   berputar selamanya di balik layar, memakan baterai tanpa terlihat siapa pun.
   Ketiga selektor ini harus ikut berubah kalau nama kelasnya diubah. */
body.siap .kue-muat,
body.siap .kue-cincin,
body.siap .kue-piring img { animation: none; }

@keyframes putar { to { transform: rotate(360deg); } }
@keyframes goyang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Lima foto kue asli bergantian. Tiap foto tampil sekitar satu detik, dan
   masa tampilnya sengaja ditumpuk sedikit dengan foto berikutnya supaya
   pergantiannya menyatu, bukan berkedip putus. */
@keyframes tukar-kue {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  20%  { opacity: 1; }
  24%  { opacity: 0; }
  100% { opacity: 0; }
}

.kue-muat {
  position: relative; width: clamp(104px, 21vw, 140px); aspect-ratio: 1;
  animation: goyang 1.9s ease-in-out infinite;
}
/* Yang berputar mengelilingi kue adalah cincin ini, bukan fotonya. Foto kue
   yang diambil dari sudut 3/4 kalau diputar 360 derajat akan terlihat
   terbalik dan jatuh, bukan seperti kue di atas meja putar. */
.kue-cincin {
  position: absolute; inset: -11px; border-radius: 50%;
  border: 3px solid rgba(51, 32, 15, 0.10);
  border-top-color: var(--pandan);
  animation: putar 1.15s linear infinite;
}
/* Masker lingkaran. Watermark sudah hilang di tahap potong, bukan di sini. */
.kue-piring {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: #FFFFFF; box-shadow: 0 6px 18px rgba(51, 32, 15, 0.13);
}
.kue-piring img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* Tidak perlu digeser lagi: potongan di img/loader/ sudah menempatkan
     kuenya di tengah. Lihat potong_loader.py. */
  object-fit: cover;
  opacity: 0; animation: tukar-kue 6s ease-in-out infinite;
}
.kue-piring img:nth-child(1) { animation-delay: 0s; }
.kue-piring img:nth-child(2) { animation-delay: 1.2s; }
.kue-piring img:nth-child(3) { animation-delay: 2.4s; }
.kue-piring img:nth-child(4) { animation-delay: 3.6s; }
.kue-piring img:nth-child(5) { animation-delay: 4.8s; }

/* Yang minta gerakan dikurangi tetap dapat kuenya, diam. */
@media (prefers-reduced-motion: reduce) {
  .kue-muat, .kue-cincin, .kue-piring img { animation: none; }
  .kue-piring img:first-child { opacity: 1; }
}
.loader-teks {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.3em;
  color: var(--tinta-3); font-weight: 700;
}

/* ---------- Pita prototipe ---------- */
.pita {
  background: var(--terakota); color: #FFF6E9; text-align: center;
  font-size: 0.73rem; padding: 0.5rem 1rem; letter-spacing: 0.02em;
}
.pita b { font-weight: 700; }

/* ---------- Logo ---------- */
.logo-img { display: block; height: auto; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(246, 242, 230, 0.93);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--garis);
}
.header-in { display: flex; align-items: center; gap: 1.25rem; min-height: 68px; }
.header-logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.nav { display: flex; gap: 1.35rem; margin-left: auto; }
.nav a {
  text-decoration: none; font-size: 0.73rem; text-transform: uppercase;
  letter-spacing: 0.14em; font-weight: 600; color: var(--tinta-2);
  padding: 0.45rem 0; position: relative; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1.5px; background: var(--pandan); transition: right var(--cepat);
}
.nav a:hover { color: var(--tinta); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--pandan-tua); }

.burger { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 10px; }
.burger span { display: block; height: 2px; background: var(--tinta); margin: 4px 0; transition: transform var(--cepat), opacity var(--cepat); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Tombol ---------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0 1.35rem;
  background: var(--pandan); color: var(--krem);
  border: 1px solid var(--pandan); border-radius: 999px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--cepat), color var(--cepat), transform var(--cepat), box-shadow var(--cepat), border-color var(--cepat);
}
.tombol:hover { background: var(--pandan-tua); border-color: var(--pandan-tua); transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(79, 93, 40, 0.24); }
.tombol:active { transform: translateY(0); }
.tombol.besar { min-height: 52px; padding: 0 1.8rem; font-size: 0.85rem; }
.tombol.garis { background: transparent; color: var(--tinta); border-color: var(--garis-kuat); }
.tombol.garis:hover { background: var(--tinta); color: var(--krem); border-color: var(--tinta); box-shadow: none; }

/* ---------- Hero ---------- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); }
.hero-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { margin-top: 0.3rem; font-size: clamp(2.5rem, 6.2vw, 4.5rem); letter-spacing: -0.005em; }
.hero h1 em { font-style: italic; color: var(--pandan-tua); }
.hero-sub { margin-top: 1.15rem; font-size: clamp(0.98rem, 1.6vw, 1.1rem); color: var(--tinta-2); max-width: 42ch; }
.hero-cta { margin-top: 1.9rem; display: flex; gap: 0.7rem; flex-wrap: wrap; }
.hero-foto { position: relative; }
.hero-foto img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius);
  box-shadow: 0 28px 60px -28px rgba(51, 32, 15, 0.45);
}
.stempel {
  position: absolute; left: -14px; bottom: 22px;
  background: var(--terakota); color: #FFF6E9;
  padding: 0.7rem 1.05rem; border-radius: var(--radius);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700;
  line-height: 1.35; box-shadow: 0 10px 26px -10px rgba(190, 95, 50, 0.7);
}
.stempel b { display: block; font-size: 1.1rem; letter-spacing: 0.04em; font-family: var(--serif); font-weight: 400; }

/* ---------- Kepala halaman dalam ---------- */
.kepala-halaman { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.kepala-sub { margin-top: 1.1rem; max-width: 56ch; color: var(--tinta-2); font-size: clamp(0.96rem, 1.5vw, 1.06rem); }

/* ---------- Strip janji ---------- */
.janji { border-block: 1px solid var(--garis); background: var(--krem-2); }
.janji-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.janji div { padding: 1.4rem 1.2rem; border-left: 1px solid var(--garis); }
.janji div:first-child { border-left: 0; }
.janji b { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; }
.janji span { font-size: 0.75rem; color: var(--tinta-2); }

/* ---------- Bagian ---------- */
section { scroll-margin-top: 88px; }
.bagian { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.bagian.pucat { background: var(--krem-2); border-block: 1px solid var(--garis); }
.bagian-kepala { max-width: 62ch; margin-bottom: 2.2rem; }
.bagian-kepala.tengah { margin-inline: auto; }
.bagian-kepala p { margin-top: 0.7rem; color: var(--tinta-2); }

.dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.dua-kolom img { border-radius: var(--radius); aspect-ratio: 1; object-fit: cover; }

/* ==========================================================================
   BARIS PRODUK: panel hijau muncul saat hover.
   Sebelum hover polos di atas krem, sesudahnya panel membulat dengan teks
   putih dan tombol putih. Mengikuti pola skillets.com.
   ========================================================================== */
.baris-wrap { display: grid; gap: 0.5rem; }
.baris {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
  text-decoration: none; background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
}
.baris::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--panel); border-radius: var(--radius-panel);
  opacity: 0; transform: scale(0.985);
  transition: opacity var(--sedang), transform var(--sedang);
}
.baris:hover::before, .baris:focus-within::before { opacity: 1; transform: scale(1); }
.baris img { width: 100%; aspect-ratio: 1; object-fit: contain; transition: transform var(--pelan); }
.baris:hover img, .baris:focus-within img { transform: scale(1.05) rotate(-2deg); }
.baris h3 { font-size: clamp(1.5rem, 3.2vw, 2.35rem); margin: 0.55rem 0 0; transition: color var(--sedang); }
.baris-desc { margin-top: 0.7rem; color: var(--tinta-2); max-width: 52ch; font-size: 0.95rem; transition: color var(--sedang); }
.baris-harga { margin-top: 0.7rem; font-family: var(--serif); font-size: 1.4rem; font-variant-numeric: tabular-nums; transition: color var(--sedang); }
.baris .label { transition: color var(--sedang); }
.baris:hover .label, .baris:focus-within .label { color: var(--panel-label); }
.baris:hover h3, .baris:hover .baris-desc, .baris:hover .baris-harga,
.baris:focus-within h3, .baris:focus-within .baris-desc, .baris:focus-within .baris-harga { color: #FFFFFF; }

.baris-tanda { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.6rem; }
.tanda {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.13em; font-weight: 700;
  padding: 0.34rem 0.7rem; border-radius: 999px; border: 1.5px solid var(--garis-kuat);
  transition: background var(--sedang), color var(--sedang), border-color var(--sedang); white-space: nowrap;
}
.tanda.sorot { background: var(--pandan-muda); border-color: var(--tinta); color: var(--tinta); }
.baris:hover .tanda, .baris:focus-within .tanda { border-color: rgba(255, 255, 255, 0.85); color: #FFFFFF; }
.baris:hover .tanda.sorot, .baris:focus-within .tanda.sorot { background: var(--pandan-muda); border-color: var(--pandan-muda); color: var(--tinta); }

/* CTA: teks polos sebelum hover, pil putih sesudahnya */
.baris-cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1.35rem; margin-left: -1.5rem; min-height: 46px; padding: 0 1.5rem;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
  border-radius: 999px; border: 1.5px solid transparent;
  background: transparent; color: var(--tinta);
  transition: background var(--sedang), color var(--sedang), margin var(--sedang), transform var(--cepat);
}
.baris:hover .baris-cta, .baris:focus-within .baris-cta {
  background: #FFFFFF; color: var(--pandan-tua); margin-left: 0;
}

/* ---------- Kategori ---------- */
.kat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 1.2rem 1rem; }
.kat { display: block; text-decoration: none; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--krem-3); }
.kat img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform var(--pelan); }
.kat:hover img { transform: scale(1.06); }
.kat-nama {
  position: absolute; inset: auto 0 0 0; padding: 2.5rem 0.9rem 0.85rem;
  background: linear-gradient(to top, rgba(51, 32, 15, 0.85), transparent);
  color: var(--krem); font-weight: 700; font-size: 0.9rem;
}
.kat-nama small { display: block; font-weight: 400; font-size: 0.72rem; opacity: 0.82; margin-top: 0.15rem; }

/* ---------- Tab dan grid produk ---------- */
.tabs { display: flex; gap: 0.45rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 1.8rem; }
.tab {
  flex: none; min-height: 40px; padding: 0 1rem;
  background: transparent; border: 1px solid var(--garis-kuat); border-radius: 999px;
  font-size: 0.76rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all var(--cepat);
}
.tab:hover { border-color: var(--pandan); color: var(--pandan-tua); }
.tab[aria-selected="true"] { background: var(--tinta); color: var(--krem); border-color: var(--tinta); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 1.6rem 1.3rem; }
.kartu { display: flex; flex-direction: column; }
.kartu-foto { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--krem-3); aspect-ratio: 1; }
.kartu-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sedang); }
.kartu:hover .kartu-foto img { transform: scale(1.045); }
.badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--terakota); color: #FFF6E9;
  font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700;
  padding: 0.32rem 0.55rem; border-radius: 2px;
}
.kartu h3 { margin-top: 0.85rem; }
.kartu-desc { font-size: 0.82rem; color: var(--tinta-2); margin-top: 0.35rem; line-height: 1.5; }
.kartu-bawah { margin-top: auto; padding-top: 0.85rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.harga { font-family: var(--serif); font-size: 1.22rem; font-variant-numeric: tabular-nums; }
.kartu-plus {
  margin-left: auto; min-height: 40px; padding: 0 1rem; font-size: 0.76rem; font-weight: 700;
  background: transparent; border: 1px solid var(--garis-kuat); border-radius: 999px; cursor: pointer;
  transition: all var(--cepat);
}
.kartu-plus:hover { background: var(--tinta); color: var(--krem); border-color: var(--tinta); }
.kartu-plus.ada { background: var(--pandan); color: var(--krem); border-color: var(--pandan); }

/* ---------- Cerita ---------- */
.cerita-teaser { background: var(--tinta); color: var(--krem); }
.cerita-teaser .label { color: var(--pandan-muda); }
.cerita-in { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.cerita-teaser p { color: rgba(246, 242, 230, 0.8); }
.cerita-teaser .tombol.garis { color: var(--krem); border-color: rgba(246, 242, 230, 0.45); margin-top: 1.6rem; }
.cerita-teaser .tombol.garis:hover { background: var(--krem); color: var(--tinta); border-color: var(--krem); }
.cerita-in img { border-radius: var(--radius); aspect-ratio: 1; object-fit: cover; }
.kutip {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.5vw, 1.8rem); line-height: 1.32;
  margin-top: 1.6rem; padding-left: 1.1rem; border-left: 2px solid var(--pandan);
}

/* ---------- Pemilih ukuran dalam kartu produk ---------- */
.ukuran-pilih { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.65rem; }
.ukuran-tombol {
  flex: none; min-height: 34px; padding: 0 0.75rem;
  background: transparent; border: 1px solid var(--garis-kuat); border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all var(--cepat);
}
.ukuran-tombol:hover { border-color: var(--pandan); color: var(--pandan-tua); }
.ukuran-tombol.aktif { background: var(--tinta); color: var(--krem); border-color: var(--tinta); }

/* ---------- Kartu tebal, langkah, musim ---------- */
.tiga-kartu { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; }
.kartu-tebal { background: var(--krem); border: 1px solid var(--garis); border-radius: var(--radius); padding: 1.6rem; }
.kartu-tebal .nomor { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--pandan); margin-bottom: 0.4rem; }
.kartu-tebal h3 { font-size: 1.25rem; }
.kartu-tebal p { margin-top: 0.6rem; font-size: 0.9rem; color: var(--tinta-2); }
a.kartu-tebal { display: block; text-decoration: none; color: inherit; transition: border-color var(--cepat), transform var(--cepat); }
a.kartu-tebal:hover { border-color: var(--pandan); transform: translateY(-2px); }

.langkah { list-style: none; counter-reset: l; margin: 0; padding: 0; display: grid; gap: 0; max-width: 70ch; }
.langkah li { counter-increment: l; position: relative; padding: 1.15rem 0 1.15rem 3.4rem; border-bottom: 1px solid var(--garis); }
.langkah li:first-child { border-top: 1px solid var(--garis); }
.langkah li::before {
  content: counter(l, decimal-leading-zero); position: absolute; left: 0; top: 1.2rem;
  font-family: var(--serif); font-size: 1.15rem; color: var(--pandan);
}
.langkah b { display: block; }
.langkah span { color: var(--tinta-2); font-size: 0.92rem; }

.musim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.musim { background: var(--krem); border: 1px solid var(--garis); border-radius: var(--radius); padding: 1.4rem; }
.musim h3 { font-size: 1.2rem; }
.musim p { margin-top: 0.55rem; font-size: 0.9rem; color: var(--tinta-2); }
.catatan-kecil { margin-top: 1.4rem; font-size: 0.84rem; color: var(--tinta-3); }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; gap: 2.75rem; max-width: 780px; }
.faq-grup h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-bottom: 0.9rem; }
.faq-grup details { border-bottom: 1px solid var(--garis); padding: 0.15rem 0; }
.faq-grup details:first-of-type { border-top: 1px solid var(--garis); }
.faq-grup summary {
  cursor: pointer; list-style: none; padding: 1rem 2.2rem 1rem 0; position: relative;
  font-weight: 600; font-size: 0.98rem;
}
.faq-grup summary::-webkit-details-marker { display: none; }
.faq-grup summary::after {
  content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.35rem; color: var(--pandan); font-weight: 400;
}
.faq-grup details[open] summary::after { content: "\2212"; }
.faq-grup summary:hover { color: var(--pandan-tua); }
.faq-grup details p { padding: 0 2.2rem 1.15rem 0; color: var(--tinta-2); font-size: 0.94rem; }
.perlu-konfirmasi { border-left: 2px solid var(--emas); padding-left: 0.9rem; }

/* ---------- Saluran ---------- */
.saluran { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--garis); border: 1px solid var(--garis); }
.saluran a { background: var(--krem); padding: 1.5rem 1.3rem; text-decoration: none; display: block; transition: background var(--cepat); }
.saluran a:hover { background: var(--krem-3); }
.saluran b { display: block; font-family: var(--serif); font-size: 1.3rem; }
.saluran span { font-size: 0.8rem; color: var(--tinta-2); }

/* ---------- Penutup ---------- */
.penutup { background: var(--pandan); color: var(--krem); }
.penutup-in { padding: clamp(3rem, 7vw, 5rem) 0; text-align: center; }
.penutup h2 { color: var(--krem); }
.penutup p { margin: 0.9rem auto 0; max-width: 52ch; color: rgba(246, 242, 230, 0.86); }
.penutup .tombol { margin-top: 1.8rem; background: var(--krem); color: var(--pandan-tua); border-color: var(--krem); }
.penutup .tombol:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--pandan-tua); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.35); }

/* ---------- Footer ---------- */
.footer { background: var(--tinta); color: rgba(246, 242, 230, 0.72); padding: 3.25rem 0 2rem; font-size: 0.86rem; }
.footer-logo { color: var(--krem); font-size: 1.6rem; display: inline-block; }
.footer-tag { margin-top: 0.6rem; color: var(--pandan-muda); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; }
.footer-in { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
.footer-in > div > p { margin-top: 0.6rem; max-width: 32ch; }
.footer h4 { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--pandan-muda); margin: 0 0 0.85rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--krem); text-decoration: underline; }
.footer-bawah { margin-top: 2.5rem; padding-top: 1.3rem; border-top: 1px solid rgba(246, 242, 230, 0.16); font-size: 0.74rem; color: rgba(246, 242, 230, 0.5); }


/* ---------- Chat ---------- */
.chat-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 95;
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 52px; padding: 0 1.25rem;
  background: var(--tinta); color: var(--krem);
  border: 0; border-radius: 999px; cursor: pointer;
  font-size: 0.83rem; font-weight: 700; letter-spacing: 0.03em;
  box-shadow: 0 12px 32px -10px rgba(51, 32, 15, 0.65);
  transition: transform var(--cepat), background var(--cepat), opacity var(--cepat);
}
.chat-fab:hover { background: var(--pandan-tua); transform: translateY(-2px); }
.chat-fab-ikon { display: grid; place-items: center; }
.chat-fab-ikon svg { width: 20px; height: 20px; }
.chat-fab[aria-expanded="true"] { opacity: 0; pointer-events: none; }

.chat-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 96;
  width: min(370px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 40px));
  display: flex; flex-direction: column;
  background: var(--krem); border: 1px solid var(--garis-kuat);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 26px 70px -18px rgba(51, 32, 15, 0.55);
  animation: chat-masuk var(--sedang);
}
.chat-panel[hidden] { display: none; }
@keyframes chat-masuk { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.chat-head { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1rem; background: var(--tinta); color: var(--krem); }
.chat-head b { display: block; font-size: 0.92rem; }
.chat-head span { font-size: 0.72rem; color: rgba(246, 242, 230, 0.65); }
.chat-head button { margin-left: auto; width: 34px; height: 34px; flex: none; background: transparent; border: 0; color: var(--krem); font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.chat-head button:hover { background: rgba(246, 242, 230, 0.16); }
.chat-isi { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; background: var(--krem-2); }
.gel { max-width: 84%; padding: 0.62rem 0.85rem; border-radius: 12px; font-size: 0.86rem; line-height: 1.5; }
.gel.mereka { background: var(--krem); border: 1px solid var(--garis); border-bottom-left-radius: 3px; align-self: flex-start; }
.gel.saya { background: var(--pandan); color: var(--krem); border-bottom-right-radius: 3px; align-self: flex-end; }
.chat-cepat { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.75rem; background: var(--krem-2); }
.chat-cepat button {
  min-height: 34px; padding: 0 0.75rem; background: var(--krem);
  border: 1px solid var(--garis-kuat); border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all var(--cepat);
}
.chat-cepat button:hover { background: var(--pandan); color: var(--krem); border-color: var(--pandan); }
.chat-form { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--garis); background: var(--krem); }
.chat-form input {
  flex: 1; min-width: 0; min-height: 42px; padding: 0 0.85rem;
  border: 1px solid var(--garis-kuat); border-radius: 999px;
  background: var(--krem); font-size: 0.86rem; font-family: inherit; color: inherit;
}
.chat-form input:focus { outline: 2px solid var(--pandan); outline-offset: 1px; border-color: transparent; }
.chat-form button { width: 44px; height: 42px; flex: none; display: grid; place-items: center; background: var(--pandan); color: var(--krem); border: 0; border-radius: 999px; cursor: pointer; transition: background var(--cepat); }
.chat-form button:hover { background: var(--pandan-tua); }
.chat-form button svg { width: 19px; height: 19px; }

/* ---------- Keranjang ---------- */
.keranjang-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 95;
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 52px; padding: 0 1.25rem;
  background: var(--pandan); color: var(--krem);
  border: 0; border-radius: 999px; cursor: pointer;
  font-size: 0.83rem; font-weight: 700; letter-spacing: 0.03em;
  box-shadow: 0 12px 32px -10px rgba(51, 32, 15, 0.65);
  transition: transform var(--cepat), background var(--cepat), opacity var(--cepat);
}
.keranjang-fab:hover { background: var(--pandan-tua); transform: translateY(-2px); }
.keranjang-fab[hidden] { display: none; }
.keranjang-fab[aria-expanded="true"] { opacity: 0; pointer-events: none; }
.keranjang-fab-ikon svg { width: 20px; height: 20px; }
.keranjang-badge {
  background: var(--terakota); color: #FFF6E9; min-width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; padding: 0 0.3rem;
  font-variant-numeric: tabular-nums;
}
.keranjang-panel {
  position: fixed; left: 20px; bottom: 20px; z-index: 96;
  width: min(360px, calc(100vw - 32px)); max-height: min(600px, calc(100vh - 40px));
  display: flex; flex-direction: column;
  background: var(--krem); border: 1px solid var(--garis-kuat);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 26px 70px -18px rgba(51, 32, 15, 0.55);
  animation: chat-masuk var(--sedang);
}
.keranjang-panel[hidden] { display: none; }
.keranjang-head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1rem; background: var(--tinta); color: var(--krem); }
.keranjang-head b { font-size: 0.92rem; }
.keranjang-head button { width: 34px; height: 34px; flex: none; background: transparent; border: 0; color: var(--krem); font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.keranjang-head button:hover { background: rgba(246, 242, 230, 0.16); }
.keranjang-list { list-style: none; margin: 0; padding: 0.9rem 1rem 0; display: grid; gap: 0.7rem; max-height: 320px; overflow-y: auto; }
.keranjang-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center; font-size: 0.85rem; border-bottom: 1px solid var(--garis); padding-bottom: 0.7rem; }
.keranjang-item-nama { font-weight: 700; }
.keranjang-item-ukuran { display: block; font-size: 0.72rem; font-weight: 400; color: var(--tinta-3); margin-top: 0.1rem; }
.keranjang-qty { display: flex; align-items: center; gap: 0.35rem; }
.keranjang-qty button {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--garis-kuat); background: transparent;
  cursor: pointer; line-height: 1; display: grid; place-items: center; transition: all var(--cepat);
}
.keranjang-qty button:hover { background: var(--tinta); color: var(--krem); border-color: var(--tinta); }
.keranjang-qty span { min-width: 1.4ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.keranjang-harga { grid-column: 1 / -1; text-align: right; font-variant-numeric: tabular-nums; font-size: 0.78rem; color: var(--tinta-2); }
.keranjang-kosong { color: var(--tinta-3); font-size: 0.85rem; margin: 0.9rem 1rem 1rem; }
.keranjang-total { padding: 0.9rem 1rem 0; }
.keranjang-baris { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.05rem; }
#keranjang-lanjut { margin: 0.9rem 1rem 1rem; width: auto; }
#keranjang-campur { margin: 0 1rem 1rem; }

/* ---------- Isi Format Order ---------- */
.batas-sempit { max-width: 620px; margin-inline: auto; padding-inline: var(--pad); }
.fo-ringkasan {
  display: flex; flex-direction: column; gap: 0.9rem; padding: 1rem;
  background: var(--krem-2); border: 1px solid var(--garis); border-radius: var(--radius);
  margin-bottom: 1.8rem;
}
.fo-ringkasan-baris { display: flex; gap: 1rem; align-items: center; }
.fo-ringkasan-baris img { width: 56px; height: 56px; flex: none; border-radius: var(--radius); object-fit: cover; }
.fo-ringkasan-baris h3 { margin: 0.15rem 0; font-size: 0.98rem; font-weight: 700; font-family: var(--sans); }
.fo-ringkasan-baris .harga { font-size: 0.92rem; }
.fo-ringkasan-total {
  display: flex; justify-content: space-between; font-weight: 700; font-size: 1.05rem;
  padding-top: 0.8rem; border-top: 1px solid var(--garis);
}
.form-order fieldset {
  border: 0; padding: 0; margin: 0 0 1.8rem;
}
.form-order legend {
  font-weight: 700; font-size: 0.95rem; padding: 0; margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--garis); padding-bottom: 0.5rem; width: 100%;
}
.form-order label {
  display: block; font-size: 0.82rem; font-weight: 600; color: var(--tinta-2);
  margin-bottom: 0.9rem;
}
.form-order input[type="text"], .form-order input[type="tel"],
.form-order input[type="date"], .form-order input[type="time"], .form-order textarea {
  display: block; width: 100%; margin-top: 0.4rem; padding: 0.65rem 0.8rem;
  border: 1px solid var(--garis-kuat); border-radius: var(--radius);
  background: var(--krem); font: inherit; font-size: 0.92rem; color: var(--tinta);
}
.form-order textarea { resize: vertical; }
.form-order input:focus, .form-order textarea:focus {
  outline: 2px solid var(--pandan); outline-offset: 1px; border-color: transparent;
}
.form-order input:disabled { background: var(--krem-3); color: var(--tinta-3); }
.form-checkbox { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.form-checkbox input { width: 17px; height: 17px; accent-color: var(--pandan); }
.form-tanya { font-size: 0.82rem; font-weight: 600; color: var(--tinta-2); margin: 0 0 0.6rem; }
.form-pilihan { display: flex; gap: 1.4rem; margin-bottom: 0.4rem; }
.form-pilihan-kolom { flex-direction: column; gap: 0.65rem; }
.form-lainnya {
  display: block; width: 100%; margin-top: 0.7rem; padding: 0.65rem 0.8rem;
  border: 1px solid var(--garis-kuat); border-radius: var(--radius);
  background: var(--krem); font: inherit; font-size: 0.92rem; color: var(--tinta);
}
.form-order .form-lainnya[hidden] { display: none; }
.form-lainnya:focus { outline: 2px solid var(--pandan); outline-offset: 1px; border-color: transparent; }
.form-pilihan label { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; margin-bottom: 0; }
.form-pilihan input { width: 17px; height: 17px; accent-color: var(--pandan); }
.form-order .catatan-kecil { margin-top: -0.4rem; margin-bottom: 0.9rem; }
.catatan-penting { font-size: 0.78rem; color: var(--terakota); font-weight: 600; line-height: 1.55; margin: -0.3rem 0 0.9rem; }
.form-order > .tombol { width: 100%; }
.fo-selesai { text-align: center; padding: 2.5rem 0; }
.fo-selesai .tombol { margin-top: 1.2rem; }

/* ---------- Responsif ---------- */
@media (max-width: 1000px) {
  .footer-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero-in, .cerita-in, .dua-kolom { grid-template-columns: 1fr; }
  .dua-kolom img, .cerita-in img { max-height: 380px; width: 100%; }
  .dua-kolom > img { order: -1; }
  .baris { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 1.25rem; }
}
@media (max-width: 760px) {
  .burger { display: block; margin-left: auto; }
  .header .tombol { order: 2; }
  .header-in { flex-wrap: wrap; }
  .nav {
    order: 4; flex-basis: 100%; flex-direction: column; gap: 0; margin: 0;
    max-height: 0; overflow: hidden; transition: max-height var(--sedang);
  }
  body.nav-buka .nav { max-height: 460px; }
  .nav a { padding: 0.85rem 0; border-top: 1px solid var(--garis); font-size: 0.82rem; }
  .nav a::after { display: none; }
}
@media (max-width: 640px) {
  .hero-foto { order: -1; }
  .stempel { left: 8px; bottom: 8px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 1.3rem 0.9rem; }
  .kartu-desc { display: none; }
  .kat-grid { grid-template-columns: 1fr 1fr; }
  .footer-in { grid-template-columns: 1fr; }
  .baris { grid-template-columns: 1fr; padding: 1.1rem; }
  .baris::before { border-radius: 22px; opacity: 1; transform: none; background: var(--krem-2); }
  .baris img { max-width: 62%; margin-inline: auto; }
  .baris-cta { margin-left: 0; background: var(--tinta); color: var(--krem); }
  .chat-fab { right: 14px; bottom: 14px; width: 52px; padding: 0; justify-content: center; }
  .chat-fab-teks { display: none; }
  .chat-panel { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: calc(100vh - 16px); }
  .keranjang-fab { left: 14px; bottom: 14px; padding: 0 0.9rem; }
  .keranjang-fab-teks { display: none; }
  .keranjang-panel { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: calc(100vh - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  html { scroll-behavior: auto; }
  .kue-putar { animation: putar 2.4s linear infinite !important; }
}