/* Gallery Aroma Loka — Link page
   Palet & font dari brand guide (ink/paper/sand/amber). */
:root{
  --ink:#1B1714;
  --ink-soft:#6B6157;
  --paper:#F6F1EA;
  --paper2:#EFE8DE;
  --sand:#E6DAC8;
  --amber:#B8863B;
  --amber-d:#8F6425;
  --on-amber:#FBF7F0;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --r:3px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--amber);outline-offset:3px;border-radius:2px}

.page{max-width:560px;margin:0 auto;min-height:100svh;display:flex;flex-direction:column}

/* ---------- header ---------- */
.head{position:relative;aspect-ratio:4/5;max-height:62svh;overflow:hidden;background:var(--ink)}
.head video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.head-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,23,20,.35) 0%,rgba(27,23,20,.2) 40%,rgba(27,23,20,.85) 100%)}
.head-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 24px 28px}
.brand{font-family:var(--serif);font-weight:700;font-size:clamp(28px,7vw,40px);line-height:1.0;letter-spacing:-.015em;color:var(--paper)}
.tagline{font-size:14.5px;color:#E6DAC8;margin-top:8px}
@media(max-width:380px){.brand{font-size:26px}}

/* ---------- groups ---------- */
.links{padding:30px 18px 8px;flex:1}
.group{margin-bottom:30px}
.group.fm{margin-bottom:34px}
.group h2{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--ink-soft);text-transform:uppercase;margin:0 4px 12px}
.group.fm h2{color:var(--amber-d)}

/* ---------- card dasar ---------- */
.card{
  display:flex;align-items:center;gap:14px;width:100%;padding:15px 16px;margin-bottom:9px;
  background:var(--paper2);border-radius:var(--r);transition:background .18s var(--ease),transform .14s var(--ease);
}
.card:hover{background:var(--sand);transform:translateX(2px)}
.card:active{transform:translateX(0)}
.card .ic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--amber);color:var(--on-amber);display:grid;place-items:center;font-size:18px;font-weight:600}
.card .lbl{flex:1 1 auto;min-width:0}
.card .lbl b{display:block;font-size:16.5px;font-weight:500;line-height:1.25;color:var(--ink)}
.card .lbl small{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:2px;word-break:break-word}
.card .go{flex:0 0 auto;color:var(--ink-soft);font-size:20px;font-weight:300;transition:transform .18s var(--ease),color .18s var(--ease)}
.card:hover .go{transform:translateX(3px);color:var(--ink)}

/* ---------- card HERO: Fun Mixing — gelap, besar, kalimat ajak ---------- */
.card.hero{
  background:var(--ink);color:var(--paper);padding:22px 18px;margin-bottom:11px;position:relative;overflow:hidden;
}
.card.hero:hover{background:#2A1F2D;transform:translateX(2px)}
.card.hero .ic{width:52px;height:52px;font-size:22px;background:var(--amber)}
.card.hero .lbl b{color:var(--paper);font-size:18px;font-weight:600}
.card.hero .lbl small{color:#A79C8D;font-size:14px;margin-top:4px}
.card.hero .go{color:#A79C8D;font-size:24px}
.card.hero:hover .go{color:var(--paper)}

/* badge "Baru buka" */
.card.hero .badge{
  position:absolute;top:0;right:0;background:var(--amber);color:var(--on-amber);
  font-size:11px;font-weight:600;letter-spacing:.03em;padding:5px 11px;border-radius:0 0 0 var(--r);
}

/* ---------- card foto outlet ---------- */
.card.photo{padding:8px 14px 8px 8px}
.card.photo .thumb{flex:0 0 auto;width:60px;height:60px;border-radius:var(--r);overflow:hidden;background:var(--sand)}
.card.photo .thumb img{width:100%;height:100%;object-fit:cover}
.card.photo .thumb.ic-only{display:grid;place-items:center;font-size:22px;color:var(--ink-soft)}
.card.photo .lbl b{font-size:16px}
.card.photo .lbl small{font-size:13px}

/* ---------- card web (asisten/compro): aksen kuat ---------- */
.card.web{background:var(--ink);color:var(--paper)}
.card.web:hover{background:#2A1F2D}
.card.web .ic{background:var(--amber)}
.card.web .lbl b{color:var(--paper)}
.card.web .lbl small{color:#A79C8D}
.card.web .go{color:#A79C8D}
.card.web:hover .go{color:var(--paper)}

/* belum tersedia */
.card.soon{opacity:.7}
.card.soon .ic{background:var(--sand);color:var(--ink-soft)}
.card.soon .lbl small{color:var(--amber-d)}

/* ---------- footer ---------- */
.foot{padding:20px 18px 28px;text-align:center}
.foot p{font-size:13px;color:var(--ink-soft)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}