/* ============================================================
   RUMI SOLO — DESIGN SYSTEM
   Palet berakar pada batik Solo: nila (indigo) + kunyit (turmeric)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* --- Nila: pewarna indigo batik Solo --- */
  --nila-950:#050F2E;
  --nila-900:#091C46;
  --nila-800:#0E2757;
  --nila-700:#15356B;
  --nila-600:#1E4483;
  --nila-300:#94A6C9;
  --nila-100:#E3E8F3;
  --nila-50:#F2F5FB;

  /* --- Kunyit: bahan lulur, aksen hangat --- */
  --kunyit-600:#C98A94;
  --kunyit-500:#E8B0B8;
  --kunyit-400:#F0C4CA;
  --kunyit-200:#F7E0E3;
  --kunyit-50:#FCF3F4;

  /* --- Pendukung --- */
  --pandan-600:#6E7D59;
  --pandan-50:#EEF1E8;
  --rose-600:#B23A52;
  --rose-50:#FCEEF1;
  --amber-600:#A96A12;
  --amber-50:#FDF3E3;

  /* --- Netral --- */
  --ink:#161A26;
  --ink-2:#535A6B;
  --ink-3:#8C93A3;
  --ink-4:#B8BDC8;
  --line:#E3E1DC;
  --line-soft:#EFEDE9;
  --paper:#F3F2EF;
  --surface:#FFFFFF;

  /* --- Bentuk & bayangan --- */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-full:999px;
  --sh-1:0 1px 2px rgba(13,19,38,.05);
  --sh-2:0 4px 14px rgba(13,19,38,.07);
  --sh-3:0 12px 34px rgba(13,19,38,.12);
  --sh-4:0 24px 60px rgba(13,19,38,.18);

  /* --- Tipografi --- */
  --f-display:'Fraunces', Georgia, serif;
  --f-body:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;

  --ease:cubic-bezier(.32,.72,.28,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--f-body); color:var(--ink);
  background:var(--paper); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:2.5px solid var(--kunyit-500);outline-offset:2px;border-radius:6px;}

/* ============ TIPOGRAFI ============ */
.display{
  font-family:var(--f-display); font-weight:600; letter-spacing:-.02em;
  font-variation-settings:'SOFT' 40,'WONK' 1; line-height:1.08;
}
.eyebrow{
  font-size:10.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.num{font-variant-numeric:tabular-nums;}
.mono{font-family:var(--f-mono);}

/* ============ MOTIF KAWUNG ============
   Motif batik Jawa Tengah — dipakai sangat samar sebagai tekstur */
.kawung{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23E8B0B8' stroke-width='1.15' opacity='.30'%3E%3Crect x='17' y='17' width='6.2' height='6.2' rx='.8'/%3E%3Crect x='24.8' y='17' width='6.2' height='6.2' rx='.8'/%3E%3Crect x='17' y='24.8' width='6.2' height='6.2' rx='.8'/%3E%3Crect x='24.8' y='24.8' width='6.2' height='6.2' rx='.8'/%3E%3C/g%3E%3Cg fill='none' stroke='%23809068' stroke-width='1.05' opacity='.22'%3E%3Cpath d='M0 24 q6 -5 12 0'/%3E%3Cpath d='M36 24 q6 -5 12 0'/%3E%3Cpath d='M24 0 q-5 6 0 12'/%3E%3Cpath d='M24 36 q-5 6 0 12'/%3E%3C/g%3E%3C/svg%3E");
  background-size:48px 48px;
}
.kawung-ink{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23091C46' stroke-width='1' opacity='.06'%3E%3Crect x='17' y='17' width='6.2' height='6.2' rx='.8'/%3E%3Crect x='24.8' y='17' width='6.2' height='6.2' rx='.8'/%3E%3Crect x='17' y='24.8' width='6.2' height='6.2' rx='.8'/%3E%3Crect x='24.8' y='24.8' width='6.2' height='6.2' rx='.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size:48px 48px;
}

/* ============ TOMBOL ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:var(--r-full); font-weight:700; font-size:14.5px;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s;
  white-space:nowrap;
}
.btn:active{transform:scale(.975);}
.btn-primary{background:var(--nila-900); color:#fff; box-shadow:var(--sh-2);}
.btn-primary:hover{background:var(--nila-800); box-shadow:var(--sh-3);}
.btn-gold{background:var(--kunyit-500); color:var(--nila-950); box-shadow:0 4px 14px rgba(232,176,184,.34);}
.btn-gold:hover{background:var(--kunyit-400);}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--ink-3); background:#fff;}
.btn-quiet{background:var(--nila-50); color:var(--nila-800);}
.btn-quiet:hover{background:var(--nila-100);}
.btn-block{width:100%;}
.btn-sm{padding:9px 15px; font-size:13px;}

/* ============ CHIP ============ */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 15px; border-radius:var(--r-full);
  background:var(--surface); border:1.5px solid var(--line);
  font-size:13.5px; font-weight:600; color:var(--ink-2);
  transition:.15s var(--ease); white-space:nowrap;
}
.chip:hover{border-color:var(--nila-300); color:var(--nila-800);}
.chip.is-on{background:var(--nila-900); border-color:var(--nila-900); color:#fff;}

/* ============ BADGE ============ */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3.5px 10px; border-radius:var(--r-full);
  font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
}
.badge-gold{background:var(--kunyit-50); color:var(--kunyit-600);}
.badge-green{background:var(--pandan-50); color:var(--pandan-600);}
.badge-red{background:var(--rose-50); color:var(--rose-600);}
.badge-amber{background:var(--amber-50); color:var(--amber-600);}
.badge-nila{background:var(--nila-50); color:var(--nila-700);}
.badge-ink{background:var(--nila-900); color:#fff;}

/* ============ KARTU ============ */
.card{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
}

/* ============ THUMBNAIL TREATMENT ============
   Gradien + motif, bukan foto — agar bebas hak cipta & tetap tajam */
.thumb{
  position:relative; border-radius:var(--r-md); overflow:hidden;
  background:linear-gradient(140deg,var(--nila-800),var(--nila-600));
  flex-shrink:0;
}
.thumb::after{
  content:''; position:absolute; inset:0;
  background-image:inherit;
}
.thumb-body{background:linear-gradient(145deg,#0E2757,#3D5C86);}
.thumb-face{background:linear-gradient(145deg,#B07C86,#E8B0B8);}
.thumb-hair{background:linear-gradient(145deg,#5E6C4C,#96A87E);}
.thumb-hand{background:linear-gradient(145deg,#7C8A66,#B3C199);}
.thumb-paket{background:linear-gradient(145deg,#7A4A57,#E8B0B8);}
.thumb-wax{background:linear-gradient(145deg,#15356B,#7B92C4);}
.thumb .kawung-ovl{position:absolute;inset:0;}

/* ============ RATING ============ */
.stars{display:inline-flex;gap:1.5px;color:var(--kunyit-500);font-size:11px;letter-spacing:.5px;}

/* ============ DIVIDER ============ */
.rule{height:1px;background:var(--line-soft);border:0;margin:0;}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#D6D3CD;border-radius:9px;border:2px solid var(--paper);}
::-webkit-scrollbar-thumb:hover{background:#BFBBB3;}

/* ============ UTIL ============ */
.row{display:flex;align-items:center;}
.between{display:flex;align-items:center;justify-content:space-between;}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.grow{flex:1;min-width:0;}
.center{text-align:center;}
.t2{color:var(--ink-2)}.t3{color:var(--ink-3)}
.fs-11{font-size:11px}.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-14{font-size:14px}
.fw-6{font-weight:600}.fw-7{font-weight:700}.fw-8{font-weight:800}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

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