:root{--mawar:#a3202c;--mawar-tua:#6e1119;--kuning:#f6cf46;--krem:#fff9ed;--kertas:#f1e4cc;--kopi:#171310;--olive:#a3202c;--garis:rgba(23,19,16,.2)}
html{scroll-behavior:smooth}
body{font-family:"Nunito",sans-serif;color:var(--kopi);background:var(--krem);letter-spacing:.01em}
h1,h2,h3,.navbar-brand{font-family:"DM Serif Display",serif;font-weight:400}
section{padding:6.5rem 0}
.judul{font-size:clamp(2.2rem,4.5vw,3.6rem);color:var(--mawar-tua);letter-spacing:-.02em}
.eyebrow{text-transform:uppercase;color:var(--mawar);font-size:.72rem;font-weight:800;letter-spacing:.2em;display:block;margin-bottom:.8rem}

.navbar{background:var(--kopi);border-bottom:3px solid var(--kuning);padding:.8rem 0}
.navbar-brand{color:var(--krem)!important;font-size:1.6rem;letter-spacing:.02em}
.nav-link{color:var(--krem)!important}
.nav-link:hover{color:var(--kuning)!important}
.btn-koprom{background:var(--kuning);color:var(--kopi);font-weight:800;border:2px solid var(--kopi);border-radius:.45rem;padding:.65rem 1.5rem;box-shadow:4px 4px 0 var(--mawar);transition:transform .15s,background .15s}
.btn-koprom:hover{background:var(--krem);color:var(--kopi);border-color:var(--kopi);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--mawar)}
.btn-garis{color:var(--krem);font-weight:800;border:1px solid rgba(245,239,227,.75);border-radius:999px;padding:.65rem 1.5rem}
.btn-garis:hover{background:var(--krem);color:var(--kopi)}

.hero{min-height:88vh;display:flex;align-items:center;color:var(--krem);position:relative;overflow:hidden;
  background:radial-gradient(circle at 82% 22%,rgba(246,207,70,.24),transparent 32%),linear-gradient(135deg,var(--kopi) 0%,#2b201a 58%,var(--mawar-tua) 100%)}
.hero::before{content:"";position:absolute;inset:0;opacity:.07;
  background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 22px),repeating-linear-gradient(-45deg,#fff 0 2px,transparent 2px 22px)}
.hero .container{position:relative}
.tagline{color:var(--kuning);font-weight:800;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase}
.hero h1{font-size:clamp(3.5rem,9vw,7rem);line-height:.95;margin:.8rem 0 1.4rem}
.hero p{max-width:32rem;font-size:1.15rem}
.mawar{font-size:clamp(9rem,24vw,16rem);text-align:center;line-height:1;transform:rotate(-8deg);filter:drop-shadow(0 14px 0 rgba(0,0,0,.28))}

.pita{background:var(--kuning);color:var(--kopi);border-block:3px solid var(--kopi);overflow:hidden;white-space:nowrap}
.pita div{display:inline-block;padding:.8rem 0;font-family:"DM Serif Display",serif;font-size:1.4rem;animation:jalan 22s linear infinite}
.pita span{margin:0 1.5rem;letter-spacing:.08em;text-transform:uppercase}
@keyframes jalan{to{transform:translateX(-50%)}}

.tentang{background:var(--kertas)}
.stempel{border:1px solid var(--mawar);border-radius:50%;width:210px;height:210px;display:grid;place-items:center;text-align:center;color:var(--mawar);transform:rotate(8deg);margin:auto;font-family:"DM Serif Display",serif;font-size:1.5rem;line-height:1.2;box-shadow:inset 0 0 0 8px rgba(164,79,61,.08)}

.kartu-menu{background:#fffaf0;border:2px solid var(--kopi);border-radius:.65rem;box-shadow:6px 6px 0 var(--mawar);height:100%;overflow:hidden;transition:transform .2s,box-shadow .2s}
.kartu-menu:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(33,28,24,.15)}
.kartu-menu .gambar{height:150px;display:grid;place-items:center;font-size:4rem;background:var(--kertas);border-bottom:1px solid var(--garis)}
.kartu-menu .isi{padding:1.1rem}
.harga{color:var(--mawar);font-weight:800}
.catatan{font-size:.85rem;opacity:.75}

.cabang{background:var(--mawar-tua);color:var(--krem)}
.cabang .judul{color:var(--kuning)}
.kartu-cabang{border:2px solid var(--kuning);border-radius:.65rem;padding:1.6rem;height:100%;position:relative;background:rgba(23,19,16,.12)}
.kartu-cabang .kode{position:absolute;top:-.7rem;left:1.2rem;background:var(--kuning);color:var(--kopi);font-weight:800;padding:.1rem .8rem;border-radius:999px}
.kartu-cabang h3{color:var(--kuning);font-size:1.8rem;margin-top:.6rem}

.galeri div{aspect-ratio:1;display:grid;place-items:center;font-size:3.2rem;border:2px solid var(--kopi);border-radius:.65rem}
.g1{background:var(--mawar)}.g2{background:var(--kuning)}.g3{background:var(--kertas)}.g4{background:var(--kopi)}

.kontak{background:var(--kopi);color:var(--krem)}
.kontak .judul{color:var(--kuning)}
footer{background:#170d09;color:var(--kertas);text-align:center;padding:1.4rem 0;font-size:.9rem}
:focus-visible{outline:3px solid var(--kuning);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pita div{animation:none}}

.ik{width:1em;height:1em;color:var(--kuning);vertical-align:-.1em}
.mawar{color:var(--kuning)}
.mawar svg{width:100%;max-width:300px;height:auto;filter:drop-shadow(0 10px 0 rgba(43,26,20,.35))}
.wajik{display:inline-block;width:.7rem;height:.7rem;background:var(--mawar);transform:rotate(45deg);margin:0 1.6rem;vertical-align:middle}
.kartu-menu .gambar svg{width:72px;height:72px;color:var(--kopi)}
.kartu-menu .gambar img,.galeri img{width:100%;height:100%;object-fit:cover;display:block}
.galeri div{overflow:hidden}
.galeri svg{width:45%;height:45%}
.g1,.g3{background:var(--kertas)}.g2{color:var(--kopi)}.g4{color:var(--kuning)}
.foto-cabang{width:100%;height:170px;object-fit:cover;border-radius:.7rem;margin:.9rem 0 .4rem;border:1px solid rgba(245,239,227,.35);display:block}
.logo{height:46px;width:auto;background:var(--krem);border-radius:.5rem;padding:3px;display:inline-block}
footer .logo{height:64px}
.kartu-menu .gambar img{object-position:center}

.kartu-menu .gambar{position:relative;overflow:hidden}
.kartu-menu .gambar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}