/* Tanabar Coffee Roasters — landing page
   Konsep "Sedikit Lebih Jauh" (hero) + "Ngobrol di Bar" (menu).
   Brand Guideline: dua warna saja; Ampas hanya untuk teks panjang di atas cream;
   DM Mono untuk display, DM Sans untuk teks; garis tangan satu warna; tanpa gradasi, bayangan, tekstur. */

@font-face{font-family:"DM Mono";src:url("../fonts/dm-mono-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/dm-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-var.woff2") format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}

:root{
  --merah:#AE3B2C;                 /* Tanah Merah */
  --cream:#F5ECD8;                 /* Susu Cream */
  --ampas:#1A1512;                 /* Ampas */
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(20px,5vw,96px);      /* tepi kiri-kanan halaman */
  --sec:clamp(72px,10vw,150px);    /* jarak atas-bawah tiap bagian */
  --garis:2px;                     /* tebal garis antarmuka */
}

/* ---------- dasar ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--merah);color:var(--cream);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
[hidden]{display:none!important}
svg{display:block;overflow:visible}
a{color:inherit}
em{font-style:italic}
p{margin:0}
h1,h2,h3{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
address{font-style:normal}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--pad);top:-80px;z-index:60;padding:12px 18px;background:var(--cream);color:var(--merah);font:500 14px/1 var(--mono);text-decoration:none;border-radius:999px}
.skip:focus{top:12px}

/* dua "tanah": merah dan cream. --line untuk display & garis, --text untuk teks isi */
.g-merah{background:var(--merah);color:var(--cream);--ground:var(--merah);--line:var(--cream);--text:var(--cream)}
.g-cream{background:var(--cream);color:var(--ampas);--ground:var(--cream);--line:var(--merah);--text:var(--ampas)}

/* gambar garis dari SVG Asset Kit: warnanya ikut --line */
.kit{color:var(--line)}
.kit path{stroke-linecap:round;stroke-linejoin:round}
html.anim [data-gambar]:not(.digambar){visibility:hidden}

/* ---------- tipografi ---------- */
.h2{font:300 clamp(32px,5.3vw,88px)/1 var(--mono);letter-spacing:-.04em;color:var(--line)}
.h2 span{display:block}
.h2 b{font-weight:500}
.eyebrow{font:500 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--line)}
.tagar{font:500 clamp(15px,1.4vw,18px)/1.3 var(--mono);letter-spacing:-.01em;color:var(--line)}
.lead{font:500 clamp(20px,2.2vw,30px)/1.22 var(--mono);letter-spacing:-.025em;color:var(--line)}
.todo{display:inline-block;border:1.5px dashed currentColor;padding:0 8px;font:500 11px/1.9 var(--mono);letter-spacing:.03em;border-radius:3px;white-space:nowrap;vertical-align:middle}
/* Penanda TODO(user) disembunyikan selama situs tayang; daftar yang belum lengkap: cari data-todo di index.html. */
.todo{display:none}

/* ---------- tombol & tautan ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:var(--garis) solid var(--line);border-radius:999px;background:none;color:var(--line);font:500 15px/1.1 var(--mono);letter-spacing:.005em;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .16s,color .16s}
.btn:hover{background:var(--line);color:var(--ground)}
.btn-isi{background:var(--line);color:var(--ground)}
.btn-isi:hover{background:var(--ground);color:var(--line)}
.btn-kecil{min-height:42px;padding:0 18px;font-size:14px}
.lnk{position:relative;display:inline-block;padding:12px 0 14px;color:var(--line);font:500 15px/1.1 var(--mono);text-decoration:none}
.lnk svg{position:absolute;left:-2%;bottom:1px;width:104%;height:12px}
.lnk svg path{fill:none;stroke:currentColor;stroke-width:2.2px;vector-effect:non-scaling-stroke;stroke-linecap:round}
.aksi{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}

/* ---------- header ---------- */
.top{position:absolute;z-index:40;left:0;right:0;top:0;display:flex;align-items:center;gap:clamp(8px,1.6vw,22px);padding:12px var(--pad);--ground:var(--merah);--line:var(--cream);background:var(--ground);color:var(--line)}
html.gsap .top{position:fixed}
.top[data-ground="cream"]{--ground:var(--cream);--line:var(--merah)}
.top[data-ground="cream"] .b-merah,.top:not([data-ground="cream"]) .b-cream{display:none}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none}
.brand .badge{width:44px;height:44px;flex:none}
.brand-nama{font:500 15px/1.15 var(--mono);letter-spacing:.01em}
.brand-nama span{display:block;font-weight:300;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.nav{display:flex;gap:clamp(2px,.8vw,14px)}
.nav a{padding:10px 8px;font:500 15px/1 var(--sans);text-decoration:none;border-radius:4px}
.nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.top .btn{background:var(--line);color:var(--ground)}
.top .btn:hover{background:var(--ground);color:var(--line)}
.navm{display:none}
.navm summary{list-style:none;display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:var(--garis) solid var(--line);border-radius:999px;background:var(--ground);font:500 14px/1 var(--mono);cursor:pointer}
.navm summary::-webkit-details-marker{display:none}
.navm[open] summary{background:var(--line);color:var(--ground)}
.navm nav{position:absolute;left:var(--pad);right:var(--pad);top:calc(100% + 6px);padding:6px 20px;border:var(--garis) solid var(--line);border-radius:14px;background:var(--ground)}
.navm nav a{display:block;padding:17px 0;font:500 19px/1.1 var(--mono);letter-spacing:-.01em;text-decoration:none;border-bottom:var(--garis) solid var(--line)}
.navm nav a:last-child{border-bottom:0}
@media (max-width:389px){
  .brand-nama{display:none}
}
@media (max-width:899px){
  .top .btn{white-space:nowrap}
  .nav{display:none}
  .navm{display:block}
  .brand-nama span{display:none}
}

/* ---------- 1. hero: makin jauh menggulir, makin dekat gambarnya ---------- */
.hero{position:relative}
.hero.cam{height:360vh}
.pin{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}
.hero.cam .pin{position:sticky;top:0;height:100vh;height:100svh}
.stage{position:absolute;inset:0;color:var(--cream)}
/* slot: bingkai kamera pada tiap babak; JS hanya membaca kotak-kotak ini */
.slot{position:absolute;visibility:hidden;pointer-events:none}
.slot-far,.hero:not(.cam) #world{position:absolute;right:var(--pad);bottom:13.5%;width:min(30vw,560px);aspect-ratio:468/292}
.slot-mid{right:-5vw;bottom:-3%;height:64%;aspect-ratio:468/292}
.slot-near{right:15vw;top:31%;height:40%;aspect-ratio:7.92/8.53}
.hero.cam #world{position:absolute;inset:0;width:100%;height:100%}
.hero:not(.cam) #dekat{display:none}
#world path{stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
#world .hit{stroke:none;cursor:pointer}
html.js:not(.ready) #world{visibility:hidden}

.copy{position:absolute;inset:0;display:flex;flex-direction:column;padding:104px var(--pad) 0;pointer-events:none}
.copy a{pointer-events:auto}
.kicker{display:flex;align-items:center;gap:10px;margin:0 0 20px;font:500 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.kicker svg{width:22px;height:22px;flex:none}
.kicker svg path{stroke:currentColor;stroke-width:26;stroke-linecap:round;stroke-linejoin:round}
.h1{font:300 clamp(34px,min(9.6vw,10.4vh),132px)/.98 var(--mono);letter-spacing:-.035em}
.pair{display:block;transform-origin:0 0}
.dekat{font-weight:500}
.ln{display:block;padding:.06em 0 .16em;margin:0 0 -.22em}   /* margin satu sisi: margin negatif yang bersebelahan tidak dijumlah */
.pl{display:inline-block;background:var(--merah);padding:0 .14em 0 0}  /* "pelat": garis gambar tidak pernah menembus huruf */
.caps{position:relative;margin-top:auto;margin-bottom:clamp(96px,17vh,180px);max-width:470px;min-height:176px}
.cap{position:absolute;left:0;bottom:0;width:100%}
.cap p{margin:0 0 20px;font-size:18px;line-height:1.5;background:var(--merah)}
.cap .lead{margin-bottom:10px}
.cap-mid,.cap-near{visibility:hidden}

.meter{position:absolute;left:var(--pad);bottom:26px;width:min(430px,calc(100% - 2*var(--pad)));display:flex;align-items:center;gap:14px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.m-track{position:relative;flex:1;height:28px}
.m-line{position:absolute;left:0;top:8px;width:100%;height:12px}
.m-line path{fill:none;stroke:currentColor;stroke-width:1.6px;vector-effect:non-scaling-stroke;stroke-linecap:round}
.m-bean{position:absolute;top:-8px;left:0;width:44px;height:44px;margin-left:-22px;padding:9px;border:0;border-radius:50%;background:none;color:inherit;cursor:grab;touch-action:none}
.m-bean:active{cursor:grabbing}
.m-bean span{display:block;width:26px;height:26px;border-radius:50%;background:var(--merah)}
.m-bean svg{width:100%;height:100%}
.m-bean path{stroke:currentColor;stroke-width:22;stroke-linecap:round;stroke-linejoin:round}
.m-hint{position:absolute;left:0;bottom:36px;white-space:nowrap}
.hero:not(.cam) .meter{display:none}

@media (max-width:719px),(max-width:1023px) and (orientation:portrait){
  .copy{padding-top:84px}
  .kicker{font-size:11px;letter-spacing:.12em;margin-bottom:14px}
  .caps{margin-top:20px;margin-bottom:0;min-height:0;max-width:34em}
  .cap{top:0;bottom:auto}
  .cap p{font-size:16px;margin-bottom:16px}
  .slot-far,.hero:not(.cam) #world{right:20px;bottom:14.5%;width:min(74vw,46vh)}
  .slot-mid{right:-11vw;bottom:6.5%;width:min(120vw,62vh);height:auto}
  .slot-near{right:27vw;top:auto;bottom:19%;width:min(46vw,34vh);height:auto}
  .meter{bottom:18px}
  .m-hint{bottom:34px}
}
@media (max-width:719px) and (max-height:700px){
  .kicker{margin-bottom:10px}
  .cap p{font-size:15px;line-height:1.45;margin-bottom:12px}
  .aksi{gap:8px 16px}
  .cap .btn{padding:0 18px}
  .slot-far,.hero:not(.cam) #world{width:50vw;bottom:10%}
  .slot-mid{width:min(112vw,54vh)}
  .m-hint{display:none}
}

/* ---------- 2. ringkas: empat fakta ---------- */
.ringkas{padding:clamp(40px,5.5vw,72px) var(--pad)}
.ringkas ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ringkas li{padding:2px clamp(16px,2.2vw,34px);border-left:var(--garis) solid var(--merah)}
.ringkas li:first-child{padding-left:0;border-left:0}
.ringkas h3{display:flex;align-items:center;gap:12px;min-height:2.3em;margin-bottom:10px;font:500 clamp(19px,1.75vw,25px)/1.12 var(--mono);letter-spacing:-.025em;color:var(--merah)}
.ringkas h3 svg{width:42px;height:42px;flex:none}
.ringkas h3 path{stroke-width:11}
.ringkas p{font-size:16px;line-height:1.5;max-width:30ch}
@media (max-width:999px){
  .ringkas ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
  .ringkas li:nth-child(odd){padding-left:0;border-left:0}
}
@media (max-width:519px){
  .ringkas ul{grid-template-columns:minmax(0,1fr);row-gap:0}
  .ringkas li{padding:20px 0;border-left:0;border-top:var(--garis) solid var(--merah)}
  .ringkas li:first-child{border-top:0;padding-top:0}
  .ringkas li:last-child{padding-bottom:0}
  .ringkas h3{min-height:0}
  .ringkas p{max-width:none}
}

/* ---------- 3. tentang: #SedikitLebihJauh ---------- */
.tentang{padding:var(--sec) var(--pad)}
.tentang-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,104px);align-items:start}
.tentang-kepala{position:sticky;top:116px;container-type:inline-size}
.tentang-kepala .h2,.menu-judul .h2{font-size:clamp(30px,11.4cqw,88px)}
.tentang-kepala .tagar{margin-bottom:18px}
.jejak{position:relative;margin-bottom:clamp(8px,2vw,24px)}
.jejak-garis{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.jejak-garis path{fill:none;stroke:currentColor;stroke-width:3.4px;stroke-linecap:round;stroke-linejoin:round}
.titik{position:relative;display:grid;grid-template-columns:clamp(110px,15vw,200px) minmax(0,1fr);gap:clamp(18px,3.4vw,48px);align-items:center;margin-bottom:clamp(40px,6vw,88px)}
.titik:nth-of-type(even){grid-template-columns:minmax(0,1fr) clamp(110px,15vw,200px)}
.titik:nth-of-type(even) .gambar{order:2}
.titik p{font:500 clamp(21px,2.35vw,33px)/1.18 var(--mono);letter-spacing:-.03em}
.gambar{background:var(--merah)}
.gambar svg{width:100%;height:auto}
.gambar path{stroke-width:6.5}
.inti{margin:0 0 clamp(18px,2.4vw,28px);max-width:26ch;font:300 clamp(26px,3.5vw,48px)/1.06 var(--mono);letter-spacing:-.035em}
.inti b{font-weight:500}
.tentang-isi > p:not(.inti){max-width:58ch;font-size:18px}
.sorot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);margin-top:clamp(40px,6vw,80px)}
.sorot div{padding:18px 0 22px;border-top:var(--garis) solid var(--cream)}
.sorot dt{margin-bottom:6px;font:500 clamp(18px,1.6vw,22px)/1.2 var(--mono);letter-spacing:-.02em}
.sorot dd{font-size:16px;line-height:1.5;max-width:38ch}
@media (max-width:899px){
  .tentang-grid{grid-template-columns:minmax(0,1fr)}
  .tentang-kepala{position:static}
  .titik,.titik:nth-of-type(even){grid-template-columns:clamp(84px,24vw,130px) minmax(0,1fr)}
  .titik:nth-of-type(even) .gambar{order:0}
}
@media (max-width:519px){
  .sorot{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 4. menu: ngobrol di bar ---------- */
.menu{padding:var(--sec) var(--pad) 0;--b:min(38vw,64vh,540px);--lw:calc(var(--b) / 420 * 4.6)}
.menu-kepala{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:end;margin-bottom:clamp(36px,5vw,72px)}
.menu-judul{container-type:inline-size}
.menu-kepala p{max-width:44ch;font-size:18px}
.menu-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:end}
.bar{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.balon{position:relative;width:min(100%,430px);color:var(--merah)}
.balon-garis{position:absolute;inset:0;width:100%;height:100%}
.balon-garis path{fill:none;stroke:currentColor;stroke-width:var(--lw);vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.balon-garis path:nth-child(2){display:none}
.ucap{position:relative;min-height:5.1em;display:flex;align-items:center;padding:1.05em 1.5em 2.35em 1.45em;font:500 clamp(19px,1.9vw,25px)/1.2 var(--mono);letter-spacing:-.025em}
.jawab{display:none;margin:12px 0 0}
html.js .jawab{display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:46px;padding:0 18px;border:var(--garis) solid var(--merah);border-radius:999px;background:none;color:var(--merah);font:500 15px/1 var(--mono);cursor:pointer;transition:background-color .15s,color .15s}
.chip:hover,.chip[aria-pressed="true"]{background:var(--merah);color:var(--cream)}
.ulang{display:block;margin:8px 0 0;border:0;background:none;padding:8px 0;color:var(--merah);font:500 14px/1.4 var(--mono);text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.jawab .ulang[hidden]{display:block!important;visibility:hidden}
.barista{width:var(--b);height:var(--b);margin:calc(var(--b) * -.05) 0 calc(var(--b) * -.0262);color:var(--merah)}
.menu .barista{cursor:pointer;align-self:center}
.barista path{stroke-linecap:round;stroke-linejoin:round}
.pose{visibility:hidden}
.pose.on{visibility:visible}
.pose path[d^="M103 443"]{display:none}       /* garis alas bawaan aset diganti garis meja satu halaman penuh */
.boil .barista{filter:url(#didih)}

.daftar{padding-bottom:clamp(30px,4.5vw,64px)}
.baris{position:relative;padding:22px 0 24px;border-top:var(--garis) solid var(--merah);cursor:default}
.baris:last-child{border-bottom:var(--garis) solid var(--merah)}
.tag{display:inline-block;margin-bottom:12px;padding:5px 12px;border:var(--garis) solid var(--merah);border-radius:999px;color:var(--merah);font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;transition:background-color .15s,color .15s}
.baris.on .tag{background:var(--merah);color:var(--cream)}
.baris-atas{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.nama{position:relative;font:500 clamp(20px,1.8vw,27px)/1.12 var(--mono);letter-spacing:-.03em;color:var(--merah)}
.nama svg{position:absolute;left:-1%;bottom:-9px;width:102%;height:12px;visibility:hidden}
.nama svg path{fill:none;stroke:currentColor;stroke-width:3px;vector-effect:non-scaling-stroke;stroke-linecap:round}
.baris.on .nama svg{visibility:visible}
.titik-titik{flex:1;min-width:24px;border-bottom:var(--garis) dotted var(--merah);transform:translateY(-.3em)}
.harga{flex:none;font:500 clamp(15px,1.3vw,18px)/1.3 var(--mono);color:var(--merah);white-space:nowrap}
.baris p{max-width:56ch}
.baris .todo{margin-top:10px;color:var(--merah)}
.cap-signature{position:absolute;right:0;top:-84px;width:clamp(92px,10vw,132px);color:var(--merah);transform:rotate(-9deg);pointer-events:none;background:var(--cream)}
.cap-signature path{stroke-width:7}
.meja{position:relative;height:var(--lw);margin:0 calc(var(--pad) * -1);color:var(--line)}
.meja svg{position:absolute;left:0;top:calc(var(--lw) * .5 - 7px);width:100%;height:14px}
.meja path{fill:none;stroke:currentColor;stroke-width:var(--lw);vector-effect:non-scaling-stroke;stroke-linecap:round}
.depan{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding:26px 0 clamp(48px,7vw,96px)}
.depan p{font:500 15px/1.5 var(--mono);color:var(--merah)}
@media (max-width:899px){
  .menu{--b:min(74vw,330px)}
  .menu-kepala,.menu-grid{grid-template-columns:minmax(0,1fr)}
  .menu-kepala{align-items:start;gap:16px}
  .bar{align-items:stretch}
  .balon{width:100%}
  .menu-grid{gap:0}
  .bar{order:0}
  .daftar{order:2;padding-top:clamp(28px,6vw,44px);padding-bottom:0}
  .menu-grid > .meja{order:1}
  .baris-atas{flex-wrap:wrap;gap:6px 14px}
  .titik-titik{display:none}
  .harga{width:100%}
  .cap-signature{top:-66px;width:84px}
  .chip .pre{display:none}
  .chip::first-letter{text-transform:uppercase}
}

/* ---------- 5. lokasi ---------- */
.lokasi{position:relative;padding:var(--sec) var(--pad) 0;overflow:hidden}
.lokasi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(36px,5vw,72px)}
.cabang{padding:0 clamp(20px,4vw,64px) 8px 0}
.cabang + .cabang{padding-left:clamp(20px,4vw,64px);padding-right:0;border-left:var(--garis) solid var(--cream)}
.cabang h3{display:flex;align-items:center;gap:12px;margin-bottom:10px;font:500 clamp(26px,3vw,42px)/1.05 var(--mono);letter-spacing:-.035em}
.cabang h3 svg{width:.95em;height:1.2em;flex:none;transform-origin:50% 100%}
.cabang h3 path{stroke-width:20}
.status{margin-bottom:18px;font:500 clamp(17px,1.5vw,20px)/1.35 var(--mono);letter-spacing:-.015em}
.cabang address{margin-bottom:14px;max-width:36ch}
.watak{margin-bottom:18px;max-width:44ch}
.fakta{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px;margin-bottom:24px}
.fakta dt{font-size:15px;line-height:1.6}
.fakta dd{font:500 15px/1.6 var(--mono)}
.fakta a{text-underline-offset:5px}
.cabang .aksi{align-items:flex-start;flex-direction:column;gap:10px}
.taman{position:relative;display:flex;align-items:flex-end;justify-content:flex-end;gap:clamp(8px,2vw,28px);margin:clamp(28px,4vw,56px) calc(var(--pad) * -1) clamp(36px,5vw,64px);padding-right:var(--pad);min-height:clamp(150px,20vw,260px);pointer-events:none}
.taman svg{flex:none;width:auto;transform-origin:50% 100%}
.taman path{stroke-width:calc(2.6px * var(--k,1));vector-effect:non-scaling-stroke}
.t-palem{height:clamp(190px,26vw,340px);margin-bottom:-4px}
.t-batu{height:clamp(62px,8.5vw,112px)}
.t-meja{height:clamp(86px,11.5vw,150px)}
.t-kursi{height:clamp(88px,12vw,156px)}
.tanah{position:absolute;left:0;right:0;bottom:0;height:14px}
.tanah svg{width:100%;height:14px}
.tanah path{fill:none;stroke:currentColor;stroke-width:2.6px;vector-effect:non-scaling-stroke;stroke-linecap:round}
@media (max-width:799px){
  .lokasi-grid{grid-template-columns:minmax(0,1fr)}
  .cabang{padding:0 0 34px}
  .cabang + .cabang{padding:34px 0 8px;border-left:0;border-top:var(--garis) solid var(--cream)}
  .cabang .btn{padding:0 18px;font-size:14px}
  .t-batu,.t-kursi-kiri{display:none}
}

/* ---------- 6. event & wedding: poster dengan barista ---------- */
.event{position:relative;padding:var(--sec) var(--pad) 0;overflow:hidden;--b:min(40vw,60vh,540px);--lw:calc(var(--b) / 420 * 4.6);--bawah:clamp(36px,5vw,64px)}
.event-teks{position:relative;z-index:2;max-width:min(760px,calc(100% - var(--b) * .86));padding-bottom:clamp(48px,7vw,104px)}
.event .h2{margin-bottom:clamp(20px,2.6vw,32px);font-size:clamp(32px,4.9vw,82px)}
.event-teks > p{max-width:46ch;margin-bottom:clamp(24px,3vw,36px);font-size:18px}
.event .aksi{flex-direction:column;align-items:flex-start;gap:12px}
.event-bar{position:absolute;right:calc(var(--pad) - 1vw);bottom:calc(var(--bawah) + var(--lw) * .5);display:flex;align-items:flex-end;color:var(--merah);pointer-events:none}
.event-bar .barista{margin-top:0;pointer-events:auto;cursor:pointer}
.e-mesin{width:auto;height:calc(var(--b) * .3);margin-right:calc(var(--b) * -.13)}
.e-mesin path{stroke-width:calc(var(--lw) * 1);vector-effect:non-scaling-stroke}
.e-balon{position:absolute;right:calc(var(--b) * .7);bottom:calc(var(--b) * .68);width:calc(var(--b) * .46);color:var(--merah)}
.e-balon .ucap{min-height:0;padding:.9em 1.15em 2.1em 1.2em;font-size:clamp(15px,1.35vw,19px)}
.e-kilau{position:absolute;right:calc(var(--b) * .02);bottom:calc(var(--b) * .8);width:calc(var(--b) * .2);color:var(--merah)}
.e-kilau path{stroke-width:9}
.event > .meja{position:relative;z-index:1;margin-bottom:var(--bawah)}
@media (max-width:899px){
  .event{--b:min(78vw,340px)}
  .event-teks{max-width:none;padding-bottom:0}
  .event-bar{position:relative;right:auto;bottom:auto;justify-content:center;margin-top:clamp(84px,24vw,120px);margin-bottom:calc(var(--lw) * -.5)}
  .e-mesin{display:none}
  .event .btn{padding:0 18px;font-size:14px}
  .e-balon{right:auto;left:0;bottom:calc(var(--b) * .9);width:min(64vw,250px)}
  .e-kilau{right:0;bottom:calc(var(--b) * .86)}
}

/* ---------- 7. footer ---------- */
.kaki{padding:clamp(56px,8vw,112px) var(--pad) 28px}
.kaki-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,4fr);gap:clamp(28px,5vw,80px);align-items:end}
.kaki-merek svg{width:min(100%,360px);height:auto}
.kaki-merek p{margin-top:18px;font:500 clamp(17px,1.5vw,20px)/1.3 var(--mono);letter-spacing:-.015em}
.kaki h2{margin-bottom:14px;font:500 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.kaki li{margin-bottom:10px}
.kaki li a{font:500 17px/1.3 var(--mono);letter-spacing:-.01em;text-underline-offset:5px}
.kaki li span{display:block;font-size:14px;line-height:1.45}
.kaki-bawah{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;margin-top:clamp(40px,6vw,80px);padding-top:20px;border-top:var(--garis) solid var(--cream);font-size:14px}
.kaki-bawah a{text-underline-offset:4px}
@media (max-width:899px){
  .kaki-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .kaki-merek{grid-column:1 / -1}
  .kaki-merek svg{width:min(62vw,280px)}
}
@media (max-width:519px){
  .kaki-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- gerak dikurangi ---------- */
@media (prefers-reduced-motion:reduce){
  .hero.cam{height:auto}
  .btn,.chip,.tag{transition:none}
}