/* ============================================================
   Indonesia (ID) theme — Merah-Putih-Emas, nuansa Borobudur & Batik
   Palet: merah Indonesia #E60012 · putih · emas #C9A227
   Bentuk: appbar bertingkat seperti teras candi, chip pil emas,
           pola batik kawung (lingkaran/diamond) halus di atas header.
   ============================================================ */
:root{
  --brand:#E60012;          /* merah Indonesia */
  --brand2:#C9A227;          /* emas batik */
  --brand3:#9B0C1E;         /* merah tua */
  --bg:#FBF6F0;             /* krem hangat seperti batu candi */
  --card:#FFFFFF;
  --ink:#2A1416;
}
body{
  font-family:"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
}
.app{ background:#FFFDF9; }

/* Garis bendera Indonesia: merah di atas, putih di bawah */
.flagstrip{
  height:6px;
  background:linear-gradient(to bottom,#E60012 50%,#FFFFFF 50%);
  border-bottom:1px solid #f0e6d6;
}

/* Appbar: gradasi merah -> emas, sudut melengkung bertingkat (teras candi) */
.appbar{
  background:linear-gradient(135deg,#E60012 0%,#B3001C 55%,#8A0A16 100%);
  border-radius:0 0 30px 30px;
  box-shadow:0 8px 24px rgba(155,12,30,.35);
  position:relative;
  overflow:hidden;
}
/* pola batik kawung halus (diamond/lingkaran) di kanvas header */
.appbar::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:
    radial-gradient(circle at 12px 12px, #C9A227 3.2px, transparent 4px),
    radial-gradient(circle at 26px 26px, #C9A227 3.2px, transparent 4px);
  background-size:38px 38px;
}
.appbar .brand{ letter-spacing:.6px; }
.appbar .brand .logo{
  background:rgba(255,255,255,.22);
  border:1.5px solid rgba(255,215,130,.6);
}
.appbar .iconbtn{ background:rgba(255,255,255,.2); }

/* Kartu dompet di dalam header */
.wallet-card{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,215,130,.4);
  border-radius:16px;
}
.wallet-card .acts a{ background:#fff;color:var(--brand);border-radius:11px; }
.wallet-card .acts a.ghost{ background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55); }

/* Kartu konten */
.card{
  background:var(--card);
  border-radius:16px;
  box-shadow:0 3px 12px rgba(155,12,30,.08);
  border-top:3px solid var(--brand2);
}

/* Tombol utama gradasi merah-emas */
.btn{
  background:linear-gradient(135deg,#E60012,#C9A227);
  border-radius:12px;
  box-shadow:0 5px 16px rgba(230,0,18,.3);
  letter-spacing:.3px;
}
.btn.secondary{ background:#F3E7D6;color:var(--ink); }
.price{ color:var(--brand); }

/* Banner promo batik */
.promo{
  background:linear-gradient(120deg,#E60012 0%,#C9A227 100%);
  border-radius:16px;
  box-shadow:0 8px 20px rgba(201,162,39,.35);
}
.promo h3{ letter-spacing:.4px; }

/* Chip nominal: pil emas outline */
.chip{
  background:#fff;
  border:1.5px solid var(--brand);
  color:var(--brand);
  border-radius:999px;
}
.chips{ padding:4px; }

/* Statistik gradasi merah-emas */
.stats{
  background:linear-gradient(135deg,#E60012,#9B0C1E);
  border-radius:16px;
}
.badge{ background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(155,12,30,.08); }
.badge .b-t{ color:var(--ink); }

/* Langkah lingkaran emas */
.howto .n{ background:var(--brand2);color:#3a2a00; }

/* Kategori grid */
.cat{ border-radius:14px;box-shadow:0 2px 8px rgba(155,12,30,.08); }
.cat .nm{ color:var(--ink); }

/* Testimoni */
.testi{ border-radius:14px;box-shadow:0 2px 8px rgba(155,12,30,.08); }

/* Tab bar aktif merah-emas */
.tabbar a.on{ color:var(--brand); }
a{ color:var(--brand); }