/* ============================================================
   AERI STORE — Neobrutalism
   Palette: #FF7F50 coral · #FFD166 kuning · #06D6A0 mint · #118AB2 biru
   ============================================================ */
:root{
  --coral:#FF7F50;
  --kuning:#FFD166;
  --mint:#06D6A0;
  --biru:#118AB2;
  --paper:#FFFCF5;
  --ink:#000000;
  --bd:3px solid var(--ink);
  --sh:6px 6px 0 var(--ink);
  --sh-sm:4px 4px 0 var(--ink);
  --sh-lg:10px 10px 0 var(--ink);
  --font-display:'Archivo Black','Arial Black',Impact,sans-serif;
  --font-body:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(var(--ink) 1.2px,transparent 1.2px);
  background-size:22px 22px;
  background-position:-11px -11px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:4px solid var(--biru);outline-offset:3px}

.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}

/* ---------- Reusable neobrutalist bits ---------- */
.box{border:var(--bd);box-shadow:var(--sh);background:#fff}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  border:var(--bd);box-shadow:var(--sh-sm);
  background:var(--kuning);color:var(--ink);
  padding:.72rem 1.15rem;font-weight:700;font-size:1rem;
  text-decoration:none;transition:transform .08s ease,box-shadow .08s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn--mint{background:var(--mint)}
.btn--coral{background:var(--coral)}
.btn--biru{background:var(--biru);color:#fff}
.btn--block{width:100%;justify-content:center}
.pill{
  display:inline-block;border:2px solid var(--ink);background:#fff;
  padding:.2rem .6rem;font-size:.74rem;font-weight:700;letter-spacing:.01em;
}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  border-bottom:var(--bd);background:var(--paper);
}
.nav__in{display:flex;align-items:center;gap:1rem;height:70px}
.logo{
  display:flex;align-items:center;gap:.55rem;text-decoration:none;
  background:var(--ink);color:var(--paper);
  padding:.4rem .7rem;border:var(--bd);box-shadow:var(--sh-sm);
  font-family:var(--font-display);font-size:1.05rem;letter-spacing:-.01em;
}
.logo span{color:var(--kuning)}
.nav__links{display:flex;gap:1.4rem;margin-left:auto;font-weight:500}
.nav__links a{text-decoration:none;padding:.2rem 0;border-bottom:3px solid transparent}
.nav__links a:hover{border-bottom-color:var(--coral)}
.nav .btn{margin-left:auto}
.nav__links + .btn{margin-left:0}
@media (max-width:860px){.nav__links{display:none}}
@media (max-width:520px){.nav .btn span{display:none}}

/* ---------- Marquee ---------- */
.marquee{
  border-bottom:var(--bd);background:var(--coral);
  overflow:hidden;white-space:nowrap;
}
.marquee__track{
  display:inline-block;padding:.55rem 0;
  font-family:var(--font-display);font-size:.95rem;letter-spacing:.02em;
  animation:slide 28s linear infinite;
}
.marquee__track b{padding:0 1.1rem;font-weight:400}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Hero ---------- */
.hero{padding:64px 0 72px}
.hero__in{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero__tag{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--mint);border:var(--bd);box-shadow:var(--sh-sm);
  padding:.35rem .8rem;font-weight:700;font-size:.85rem;margin-bottom:1.4rem;
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,7vw,4.6rem);
  line-height:.94;letter-spacing:-.03em;
}
.hero h1 em{
  font-style:normal;display:inline-block;
  background:var(--kuning);border:var(--bd);
  padding:0 .3em;box-shadow:var(--sh-sm);margin:.14em 0;
}
.hero p{
  max-width:44ch;margin:1.5rem 0 2rem;font-size:1.08rem;font-weight:500;
}
.hero p strong{font-weight:800}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.hero__note{font-size:.85rem;font-weight:500}

/* Hero visual: tumpukan price tag */
.tags{position:relative;height:352px}
.tag{
  position:absolute;left:0;right:0;
  border:var(--bd);box-shadow:var(--sh);background:#fff;
  padding:1rem 1.15rem;display:flex;align-items:center;gap:.9rem;
}
.tag__mark{
  width:46px;height:46px;flex:0 0 46px;border:var(--bd);
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.25rem;
}
.tag__name{font-weight:700;font-size:1.02rem;line-height:1.2}
.tag__meta{font-size:.8rem}
.tag__price{margin-left:auto;font-family:var(--font-display);font-size:1.1rem;white-space:nowrap}
.tag:nth-child(1){top:6px;transform:rotate(-3deg)}
.tag:nth-child(2){top:104px;transform:rotate(1.8deg)}
.tag:nth-child(3){top:202px;transform:rotate(-1deg)}
.stamp{
  position:absolute;right:-14px;bottom:-6px;width:132px;height:132px;
  border:var(--bd);border-radius:50%;background:var(--biru);color:#fff;
  box-shadow:var(--sh);display:grid;place-items:center;text-align:center;
  transform:rotate(-11deg);
}
.stamp b{display:block;font-family:var(--font-display);font-size:1.6rem;line-height:1}
.stamp i{font-style:normal;font-size:.7rem;font-weight:700;display:block;margin-top:.2rem}
@media (max-width:900px){
  .hero{padding:44px 0 52px}
  .hero__in{grid-template-columns:1fr;gap:44px}
  .tags{height:330px;max-width:440px}
}

/* ---------- Strip keunggulan ---------- */
.strip{border-top:var(--bd);border-bottom:var(--bd);background:var(--coral)}
.strip__in{display:grid;grid-template-columns:repeat(4,1fr)}
.strip__item{
  padding:1.6rem 1.3rem;color:var(--ink);
  border-right:var(--bd);
}
.strip__item:last-child{border-right:0}
.strip__item h3{font-family:var(--font-display);font-size:1rem;margin-bottom:.35rem}
.strip__item p{font-size:.88rem;color:#4a2415}
.strip__item i{
  font-style:normal;display:inline-block;width:34px;height:34px;
  border:2px solid var(--ink);display:grid;place-items:center;margin-bottom:.7rem;
}
.strip__item:nth-child(1) i{background:#fff}
.strip__item:nth-child(2) i{background:var(--kuning)}
.strip__item:nth-child(3) i{background:var(--mint)}
.strip__item:nth-child(4) i{background:var(--biru)}
.strip__item i svg{width:18px;height:18px;stroke:var(--ink)}
.strip__item:nth-child(4) i svg{stroke:#fff}
@media (max-width:880px){
  .strip__in{grid-template-columns:repeat(2,1fr)}
  .strip__item:nth-child(2){border-right:0}
  .strip__item:nth-child(1),.strip__item:nth-child(2){border-bottom:var(--bd)}
}
@media (max-width:480px){
  .strip__in{grid-template-columns:1fr}
  .strip__item{border-right:0;border-bottom:var(--bd)}
  .strip__item:last-child{border-bottom:0}
}

/* ---------- Section shell ---------- */
.sec{padding:76px 0}
.sec__head{margin-bottom:2.2rem;max-width:60ch}
.sec__head h2{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1;letter-spacing:-.02em;
}
.sec__head p{margin-top:.9rem;font-size:1.02rem}
@media (max-width:600px){.sec{padding:56px 0}}

/* ---------- Katalog ---------- */
.tools{
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
  margin-bottom:1.8rem;
}
.chip{
  border:var(--bd);box-shadow:var(--sh-sm);background:#fff;
  padding:.45rem .95rem;font-weight:700;font-size:.9rem;
  transition:transform .08s ease,box-shadow .08s ease;
}
.chip:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.search{
  margin-left:auto;display:flex;align-items:center;gap:.5rem;
  border:var(--bd);box-shadow:var(--sh-sm);background:#fff;padding:.4rem .7rem;
}
.search input{border:0;outline:0;font:inherit;background:transparent;width:190px;padding:.15rem 0}
.search svg{width:17px;height:17px;stroke:var(--ink);flex:0 0 17px}
@media (max-width:640px){
  .search{margin-left:0;width:100%}
  .search input{width:100%}
}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:940px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid{grid-template-columns:1fr;gap:22px}}

.card{
  border:var(--bd);box-shadow:var(--sh);background:#fff;
  display:flex;flex-direction:column;
}
.card--fav{box-shadow:8px 8px 0 var(--kuning)}
.card__fav{margin-left:auto;flex:0 0 auto;background:var(--kuning);white-space:nowrap}
.card__top{display:flex;align-items:flex-start;gap:.85rem;padding:1.15rem;border-bottom:var(--bd)}
.card__mark{
  width:48px;height:48px;flex:0 0 48px;border:var(--bd);
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.3rem;
}
.card__mark--coral{background:var(--coral)}
.card__mark--kuning{background:var(--kuning)}
.card__mark--mint{background:var(--mint)}
.card__mark--biru{background:var(--biru);color:#fff}
.card__title{font-family:var(--font-display);font-size:1.12rem;line-height:1.1}
.card__cat{font-size:.8rem;font-weight:500;margin-top:.2rem}

.card__variants{padding:.2rem 1.15rem .3rem}
.card__variant{padding:.7rem 0;border-bottom:2px dashed rgba(0,0,0,.22)}
.card__variant:last-child{border-bottom:0}
.card__variant-head{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;margin-bottom:.15rem}
.tag-variant{
  display:inline-block;border:2px solid var(--ink);background:var(--kuning);
  padding:.15rem .5rem;font-size:.72rem;font-weight:700;letter-spacing:.01em;
}
.card__variant-note{font-size:.78rem;color:#555;font-style:italic}

.card__pkgs{list-style:none;padding:.2rem 0 0}
.card__pkgs li{
  display:flex;align-items:baseline;gap:.6rem;
  padding:.35rem 0;
}
.card__pkgs .l{font-size:.9rem;font-weight:500}
.card__pkgs .p{margin-left:auto;font-family:var(--font-display);font-size:1rem;white-space:nowrap}
.card__note{margin:0 1.15rem .8rem;font-size:.78rem;color:#555;font-style:italic}
.card__foot{margin-top:auto;padding:0 1.15rem 1.15rem}
.card__empty{
  grid-column:1/-1;border:var(--bd);box-shadow:var(--sh);background:var(--kuning);
  padding:2rem 1.5rem;text-align:center;font-weight:700;
}
.card__empty a{text-decoration:underline}

/* ---------- Cara order ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
.step{border:var(--bd);box-shadow:var(--sh);background:#fff;padding:1.4rem}
.step:nth-child(1){background:var(--coral)}
.step:nth-child(2){background:var(--kuning)}
.step:nth-child(3){background:var(--mint)}
.step__no{
  width:44px;height:44px;border:var(--bd);background:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-size:1.3rem;
  margin-bottom:1rem;
}
.step h3{font-family:var(--font-display);font-size:1.12rem;margin-bottom:.4rem}
.step p{font-size:.94rem}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* ---------- Testimoni ---------- */
.testi__top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:2.2rem}
.testi__nav{display:flex;gap:.6rem;flex:0 0 auto}
.testi__arrow{
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;
  border:var(--bd);background:#fff;box-shadow:var(--sh-sm);
  transition:transform .08s ease,box-shadow .08s ease;
}
.testi__arrow svg{width:20px;height:20px}
.testi__arrow:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.testi__arrow:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.testi__arrow:disabled{opacity:.35;cursor:default;box-shadow:none;transform:none}
.testi{
  display:flex;gap:20px;overflow-x:auto;padding:4px 4px 16px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.testi::-webkit-scrollbar{height:8px}
.testi::-webkit-scrollbar-track{background:var(--paper)}
.testi::-webkit-scrollbar-thumb{background:var(--ink)}
.t{
  flex:0 0 280px;scroll-snap-align:start;
  border:var(--bd);box-shadow:var(--sh);background:#fff;padding:1.2rem;display:flex;flex-direction:column;
}
.t__stars{color:var(--ink);font-size:.95rem;letter-spacing:.12em;margin-bottom:.6rem}
.t p{font-size:.94rem}
.t__who{margin-top:auto;padding-top:1rem;font-size:.84rem;font-weight:700}
@media (max-width:520px){.t{flex-basis:240px}}

/* ---------- FAQ ---------- */
.faq{max-width:820px}
.faq details{border:var(--bd);box-shadow:var(--sh-sm);background:#fff;margin-bottom:14px}
.faq details[open]{background:var(--kuning)}
.faq summary{
  cursor:pointer;list-style:none;padding:1rem 1.15rem;
  font-weight:700;display:flex;align-items:center;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;font-family:var(--font-display);font-size:1.35rem;line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 1.15rem 1.15rem;font-size:.96rem;max-width:70ch}

/* ---------- CTA + Footer ---------- */
.cta{border-top:var(--bd);background:var(--biru);padding:70px 0;color:#fff}
.cta__in{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.cta h2{font-family:var(--font-display);font-size:clamp(1.9rem,4.6vw,3rem);line-height:1;letter-spacing:-.02em}
.cta p{margin-top:1rem;max-width:46ch}
.cta__acts{display:flex;flex-wrap:wrap;gap:.85rem}
@media (max-width:860px){.cta__in{grid-template-columns:1fr;gap:28px}}

.foot{border-top:var(--bd);background:var(--ink);color:var(--paper);padding:44px 0 34px}
.foot__in{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
.foot h4{font-family:var(--font-display);font-size:.95rem;margin-bottom:.8rem}
.foot ul{list-style:none;font-size:.9rem;display:grid;gap:.4rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--kuning)}
.pays{display:flex;flex-wrap:wrap;gap:.45rem;max-width:280px}
.pays span{border:2px solid var(--paper);padding:.18rem .5rem;font-size:.76rem;font-weight:700}
.foot__base{
  margin-top:34px;padding-top:20px;border-top:2px solid #333;
  font-size:.8rem;color:#b4b4b4;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
}

/* ---------- Floating WA ---------- */
.fab{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--mint);border:var(--bd);box-shadow:var(--sh);
  padding:.8rem 1.05rem;font-weight:700;text-decoration:none;
  transition:transform .08s ease,box-shadow .08s ease;
}
.fab:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg)}
.fab svg{width:20px;height:20px}
@media (max-width:520px){.fab span{display:none}.fab{padding:.85rem}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}