@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
@font-face{font-family:"Tusker Grotesk";src:url("assets/TuskerGrotesk-5700Bold.otf") format("opentype");font-weight:800 900;font-display:swap}

:root{color-scheme:light;--ink:#28170f;--cream:#fff6e6;--orange:#f88b3e;--line:#d8bfaa;--display:"Tusker Grotesk","Barlow Condensed","Arial Narrow",Impact,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:500 1rem/1.55 "DM Sans",Arial,sans-serif}
a{color:inherit;text-underline-offset:.22em}
button{color:inherit;font:inherit}
img{display:block;width:100%;height:auto}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.08;letter-spacing:.012em}
h1{font-size:clamp(3.5rem,6.9vw,7.5rem);text-transform:uppercase}
h1 em{display:block;font-style:normal}
h2{font-size:clamp(3rem,6vw,5.7rem)}
p{max-width:55ch}
.wrap{width:min(91%,1320px);margin-inline:auto}
.section{padding:clamp(3.8rem,7vw,7rem) 0;scroll-margin-top:5.5rem}
.skip{position:fixed;left:1rem;top:-5rem;background:var(--cream);padding:.5rem;z-index:6}
.skip:focus{top:1rem}
:focus-visible{outline:3px solid #813207;outline-offset:4px}
header{position:sticky;top:0;z-index:3;background:var(--cream);border-bottom:1px solid #28170f20}
nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;min-height:76px}
.logo{font:900 3rem/.75 var(--display);letter-spacing:-.035em;text-decoration:none;display:inline-flex;align-items:end;gap:.2rem;width:fit-content}
.logo span{font-size:.75rem;letter-spacing:.07em}
.navlinks,.nav-actions,.footer-links{display:flex;align-items:center;gap:clamp(.8rem,2.2vw,2rem)}
.navlinks a,.nav-outlet,.footer-links a{text-decoration:none;font-weight:700}
.navlinks a:hover,.nav-outlet:hover,.footer-links a:hover{text-decoration:underline}
.nav-actions{justify-content:flex-end}
.button{display:inline-flex;width:fit-content;align-items:center;justify-content:center;min-height:46px;padding:.65rem 1.25rem;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--cream);text-decoration:none;font-weight:700;cursor:pointer}
.button:hover{background:var(--cream);color:var(--ink)}
.button.outline{background:transparent;color:var(--ink)}
.button.outline:hover{background:var(--cream)}
.hero{--hero-ground:#b6d4e5;--hero-ink:#28170f;position:relative;isolation:isolate;background:var(--hero-ground);color:var(--hero-ink);overflow:hidden}
.hero-lemon{--hero-ground:#f5ab24}
.hero-ginger{--hero-ground:#a4291d;--hero-ink:#fff6e6}
.hero-krim{--hero-ground:#e6cdb2}
.hero-kola{--hero-ground:#780c1b;--hero-ink:#fff6e6}
.hero-image{position:absolute;inset:0;z-index:-1}
.hero-image img{transform-origin:70% 79%;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-image video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .hero-ice:not(.hero-previewing) .hero-image video.is-ready{visibility:visible}
}

@media (prefers-reduced-motion:no-preference){
  .hero-ice .hero-image img{transform:scale(var(--hero-camera-scale,1));transform-origin:70% 79%}
}
.hero-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--hero-ground),transparent 58%);opacity:.55}
.hero-grid{min-height:clamp(510px,55vw,740px);display:grid;align-content:center;position:relative;padding-block:clamp(3rem,8vw,7rem)}
.intro{width:min(48%,38rem);padding-bottom:1.5rem}
.intro p{font-size:clamp(1rem,1.7vw,1.28rem);margin:1.4rem 0 1.6rem;max-width:31ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.hero .button{background:var(--hero-ink);border-color:var(--hero-ink);color:var(--hero-ground)}
.hero .button.outline{color:var(--hero-ink);background:transparent}
.hero .button:hover,.hero .button:focus-visible{background:var(--hero-ground);color:var(--hero-ink)}
.hero-picker{position:absolute;bottom:1.25rem;left:0;display:flex;flex-wrap:wrap;gap:.35rem}
.hero-picker button{border:1px solid var(--hero-ink);border-radius:999px;background:var(--hero-ground);color:var(--hero-ink);padding:.35rem .7rem;min-height:38px;font-size:.82rem;font-weight:700;cursor:pointer}
.hero-picker button[aria-pressed="true"]{background:var(--hero-ink);color:var(--hero-ground)}
.hero-ice{--hero-ground:#ffe0b9;--hero-accent:#ff7a26}
.hero-ice .hero-image::after{background:linear-gradient(90deg,#ffd09a 0%,#ffd09ae8 23%,#ff8a354d 48%,transparent 68%);opacity:1}
.hero-ice .intro h1 em{color:#a63808}
.hero-ice #hero-link,.hero-ice .hero-picker button[aria-pressed="true"]{background:var(--hero-accent);color:var(--hero-ink)}
.hero-ice #hero-link:hover,.hero-ice #hero-link:focus-visible{background:#ff9f57}

.collection .wrap{width:min(91%,1200px)}
.collection h2{text-align:center;font-size:clamp(2.7rem,5vw,4.7rem)}
.products{--gallery-gap:clamp(.75rem,2vw,1.75rem);display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--gallery-gap))/3);gap:var(--gallery-gap);margin-top:clamp(1.35rem,3vw,2.65rem);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.products::-webkit-scrollbar{display:none}
.product{min-width:0;scroll-snap-align:start;padding-inline:4px}
.product-trigger{display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:.55rem;width:100%;height:100%;padding:.4rem 0;text-decoration:none;text-align:center}
.product-image{position:relative;display:block;width:min(100%,260px);aspect-ratio:1;overflow:clip}
.product-image > img,.mix-cutout{position:absolute;inset:3% 0 auto;width:100%;height:94%;filter:drop-shadow(0 8px 6px #53230c26)}
.product-image > img{object-fit:contain}
.mix-cutout img{position:absolute;width:114%;max-width:none;left:-8.4%;top:-58.2%;clip-path:url(#mix-box-outline)}
.clip-definitions{position:absolute;pointer-events:none}
.product-pop{position:absolute;inset:0;border-radius:12px;overflow:hidden;opacity:0;transform:scale(.94);transition:opacity .2s ease,transform .22s ease;pointer-events:none}
.product-trigger:focus-visible .product-pop{opacity:1;transform:scale(1)}
.product-title{align-self:start;font-size:clamp(1rem,1.6vw,1.25rem);font-weight:700}
.product-shop{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.3rem .85rem;border:1px solid #28170f82;border-radius:999px;font-size:.85rem;font-weight:700}
.product-trigger:is(:hover,:focus-visible) .product-shop{background:var(--ink);color:var(--cream)}
@media(hover:hover) and (pointer:fine){
  .product-trigger:hover .product-pop{opacity:1;transform:scale(1)}
}
.gallery-controls{display:flex;justify-content:center;gap:.5rem;margin-top:1rem}
.gallery-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;background:var(--cream);cursor:pointer}
.split{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:clamp(1.5rem,5vw,5rem)}
.split p{font-size:clamp(1rem,1.6vw,1.22rem)}
.split h2+p{margin-top:1rem}
.about{position:relative;isolation:isolate;overflow:hidden;background:#ff963e;color:var(--ink);min-height:clamp(28rem,48vw,46rem);display:grid;align-items:center}
.about::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#ffa24d 0%,#ff9a43f5 32%,#ff8c3540 57%,transparent 74%)}
.about-copy{max-width: min(45%,32rem)}
.about-copy p{margin-top:1rem;font-size:clamp(1rem,1.6vw,1.22rem)}
.about .button{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.about .button:hover,.about .button:focus-visible{background:var(--cream);border-color:var(--ink);color:var(--ink)}
.about-copy .button{margin-top:1.4rem}
.about-photo{position:absolute;inset:0;width:100%;height:100%;z-index:-2;object-fit:cover;object-position:right center}
@media(max-width:740px){
  .about{min-height:0;align-items:start;padding-bottom:clamp(13rem,58vw,24rem)}
  .about-copy{max-width:34rem}
  .about-photo{object-position:75% bottom}
  .about::before{background:linear-gradient(180deg,#ffa24d 0%,#ff9a43f5 42%,#ff8c3540 63%,transparent 79%)}
}
.outlets{position:relative;isolation:isolate;overflow:hidden;background:#ffe0a1}
.outlet-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:start;min-height:34rem}
.outlet-intro{padding-top:clamp(.5rem,3vw,3rem)}
.outlet-intro p{margin-top:.8rem;max-width:27ch}
.outlet-photo{position:absolute;inset:0 auto auto 0;width:60%;height:100%;max-height:56rem;object-fit:cover;object-position:50% 62%;z-index:-2}
.outlets::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#ffdfa3 0%,#ffdfa3ed 16%,#ffdfa312 43%,transparent 78%,#ffe0a1 100%) left top / 60% min(100%,56rem) no-repeat}
.outlets::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent 30%,#ffe0a1 60%)}
.outlet-finder{min-width:0;padding:clamp(1rem,2.3vw,2rem);border:1px solid #c58e4c;border-radius:1.25rem;background:#fff4dd}
.outlet-finder .outlet-list li{background:#fffaf0;border:1px solid #e8d2ad}
@media(max-width:740px){
  .outlet-layout{grid-template-columns:minmax(0,1fr);gap:1.25rem;min-height:0}
  .outlet-intro{padding-top:0;min-height:clamp(20rem,87vw,29rem)}
  .outlet-intro h2 br{display:none}
  .outlet-photo{width:100%;height:clamp(26rem,112vw,36rem);object-position:center 58%}
  .outlets::before{background:linear-gradient(180deg,#ffdfa3 0%,#ffdfa3e8 27%,transparent 51%,transparent 76%,#ffe0a1 100%) left top / 100% clamp(26rem,112vw,36rem) no-repeat}
  .outlets::after{display:none}
}
.outlet-finder{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:1rem}
.outlet-intro{min-height:clamp(16rem,26vw,25rem)}
.outlet-finder .outlet-list{grid-template-columns:1fr;max-height:25rem;overflow:auto}
.outlet-map{min-width:0;display:grid;align-content:start;gap:.65rem}
.outlet-map p,.outlet-map a{font-weight:700}
#outlet-google-map{width:100%;height:clamp(19rem,40vw,32rem);border:1px solid #e8d2ad;border-radius:.75rem}
.outlet-map-graphic{position:relative;border:1px solid #e8d2ad;border-radius:.75rem;overflow:hidden}
.outlet-map-graphic img{width:100%;height:auto}
.outlet-map-pin{position:absolute;transform:translate(-50%,-50%);min-width:27px;min-height:27px;padding:0 .22rem;border:2px solid #fffaf0;border-radius:99px;background:#492417;color:#fffaf0;font:700 .75rem/1 system-ui;cursor:pointer}
.outlet-map-pin[aria-pressed="true"]{background:#a43708}
.outlet-map-pin[data-region="Jawa Timur"]{margin-top:-14px}
.outlet-map-pin[data-region="Yogyakarta"]{margin-top:9px}
.outlet-map .outlet-map-note{font-size:.85rem;font-weight:500}
.outlet-card-map{display:block;border:0;padding:0;background:none;text-align:left;font-weight:700;cursor:pointer}
.outlet-card-map[aria-pressed="true"]{color:#8b3009;text-decoration:underline;text-underline-offset:.2em}
@media(max-width:740px){
  .outlet-finder{grid-template-columns:minmax(0,1fr)}
  .outlet-finder .outlet-list{max-height:15rem}
}
.filters{display:grid;grid-template-columns:1.3fr 1fr;gap:.75rem}
label{display:grid;gap:.35rem;font-weight:700}
input,select{width:100%;min-width:0;min-height:46px;border:1px solid #794e22;border-radius:8px;padding:.5rem .65rem;background:#fffaf0;color:var(--ink);font:inherit}
input:disabled,select:disabled{opacity:.72;color:var(--ink)}
#outlet-status{margin:.85rem 0}
.outlet-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:0;padding:0;list-style:none}
.outlet-list li{padding:1rem;background:var(--cream);border-radius:10px}
.outlet-list li p{font-size:.9rem;margin:.2rem 0}
.outlet-list li a{font-weight:700;font-size:.9rem}
#outlet-more{margin-top:1rem;font:inherit}
[hidden]{display:none!important}
.faq{background:#f2dfc3}
details{padding:1rem 0;border-top:1px solid #a88d74}
details:last-child{border-bottom:1px solid #a88d74}
summary{cursor:pointer;font-weight:700}
details p{margin-top:.5rem}
.faq-halal{display:flex;align-items:center;gap:.85rem;margin-top:.7rem}
.faq-halal p{margin:0}
.faq-halal img{flex:none;width:54px;height:auto;border-radius:6px}
.buy,footer{background:#492417;color:var(--cream)}
.buy .button{justify-self:start;background:#ffd879;color:var(--ink);border-color:#ffd879}
.buy .button:hover{background:var(--cream);border-color:var(--cream)}
footer{border-top:1px solid #fff6e640}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.4rem}
.product-detail{--product-ground:#fff0cb;--product-info:#f5ce7b;background:var(--product-ground)}
.product-detail.krim-marin{--product-ground:#f5e8d4;--product-info:#dfbc97}
.product-detail.klasik-kola{--product-ground:#fae5dd;--product-info:#e8ab9c}
.product-detail.ginger-ale{--product-ground:#ffead9;--product-info:#ffbb8c}
.product-detail .wrap{width:min(91%,1120px)}
.detail-top{padding-block:clamp(1.5rem,4vw,4rem) clamp(3.5rem,7vw,7rem)}
.product-back{display:inline-flex;margin-bottom:1.35rem;font-weight:700}
.detail-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:start}
.detail-cover{grid-column:1;grid-row:1}
.detail-cover img,.detail-serving img,.detail-nutrition img{border-radius:12px}
.detail-copy{grid-column:2;grid-row:1 / span 2;position:sticky;top:7rem;padding-block:clamp(.5rem,4vw,3rem)}
.detail-copy h1{font-size:clamp(3.4rem,6.6vw,6.5rem);overflow-wrap:anywhere}
.detail-copy p{margin-top:.9rem;font-size:1.12rem}
.detail-copy .hero-actions{margin:1.4rem 0}
.flavor-select,.product-order{margin-top:1rem;max-width:26rem}
.quantity-options{display:flex;gap:.5rem;margin-top:.35rem}
.product-order #order-minimum{font-size:.9rem;margin-top:.35rem}
.mix-link{display:block;width:fit-content;margin-top:.8rem;font-weight:700}
.mix-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.mix-gallery img{aspect-ratio:4/5;object-fit:cover}
.detail-copy #pesan,.detail-info{scroll-margin-top:7rem}
.detail-serving{grid-column:1}
.detail-serving h2{font-size:clamp(2rem,4vw,3.35rem);margin-bottom:1rem}
.detail-info{position:relative;background:var(--product-info);padding-block:clamp(2rem,5vw,5rem) clamp(3.75rem,8vw,7rem)}
.detail-info::before{content:"";position:absolute;inset:auto 0 calc(100% - 1px);height:clamp(24px,5vw,62px);background:var(--product-info);clip-path:polygon(0 44%,5% 29%,10% 20%,15% 18%,20% 23%,25% 35%,30% 48%,35% 62%,40% 69%,45% 69%,50% 61%,55% 47%,60% 31%,65% 20%,70% 15%,75% 17%,80% 26%,85% 41%,90% 55%,95% 62%,100% 60%,100% 100%,0 100%)}
.detail-info-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(1.8rem,7vw,6rem);align-items:start}
.detail-story h2{font-size:clamp(2.9rem,5vw,5rem);margin-bottom:1rem}
.detail-info h3{font-size:clamp(1.7rem,3vw,2.25rem);margin-bottom:.7rem}
.detail-story p+h3{margin-top:1.7rem}
.detail-nutrition a{display:inline-block;margin-top:.75rem;font-weight:700}
@media(max-width:820px){
  nav{grid-template-columns:auto 1fr;gap:.6rem;padding-block:.75rem}
  .navlinks{grid-row:2;grid-column:1/-1;justify-content:space-between}
  .nav-actions{grid-column:2;grid-row:1}
  .logo{font-size:2.6rem}
  .section{scroll-margin-top:7rem}
  .split,.detail-hero,.detail-info-grid{grid-template-columns:1fr}
  .detail-cover,.detail-copy,.detail-serving{grid-column:auto;grid-row:auto}
  .detail-copy{position:static;padding:0}
  .hero-grid{min-height:0;padding-block:2.6rem 1rem}
  .intro{width:100%;padding-bottom:clamp(265px,62vw,410px)}
  .hero-image{top:auto;bottom:5.7rem;height:clamp(270px,67vw,460px)}
  .hero-image :is(img,video){object-position:right center}
  .hero-image::after{background:linear-gradient(180deg,var(--hero-ground),transparent 29%,transparent 73%,var(--hero-ground));opacity:1}
  .hero-ice .hero-image::after{background:linear-gradient(180deg,var(--hero-ground),#ff8a3533 26%,transparent 47%,transparent 76%,var(--hero-ground))}
  .hero-picker{position:relative;bottom:auto;padding-top:.5rem}

}
@media(max-width:480px){
  .products{grid-auto-columns:68%}
  .nav-actions{gap:.6rem}
  .nav-outlet,.navbuy{font-size:.82rem}
  .navbuy{padding:.4rem .75rem;min-height:40px}
  .outlet-list{grid-template-columns:1fr}
  footer .wrap,.footer-links{flex-wrap:wrap}
}
@media(max-width:355px){.nav-outlet{display:none}.filters{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.product-pop{transition:none}}