/* ===================== PIANPEDIA COMIC THEME ===================== */
/* Dipakai di semua halaman (lewat partials/header.ejs ATAU di-link langsung
   di halaman standalone seperti login/register/forgot/reset password)     */

:root {
  --comic-red: #ef2b2d;
  --comic-red-dark: #b3161c;
  --comic-red-light: #ff8f91;
  --comic-yellow: #ffd400;
  --comic-yellow-dark: #ffb703;
  /* NOTE: warna aksen yang dulu biru sekarang MERAH komik (nama variabel dipertahankan supaya semua komponen ikut berubah) */
  --comic-blue: #ef2b2d;
  --comic-blue-dark: #b3161c;
  --comic-blue-light: #ff8f91;
  /* Biru komik BARU (beda dari biru lama) — khusus latar belakang */
  --comic-sky: #12a4ff;
  --comic-sky-dark: #0873d6;
  --comic-sky-light: #6fc4ff;
  --comic-black: #14120f;
  --comic-cream: #fff4d6;
}

body {
  background-color: var(--comic-sky) !important;
  background-image: linear-gradient(160deg, #35b4ff 0%, #12a4ff 45%, #0873d6 100%) !important;
  background-attachment: fixed !important;
  color: var(--comic-black);
  font-family: 'Baloo 2', 'Open Sans', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bangers', 'Baloo 2', sans-serif;
  letter-spacing: 0.5px;
}

::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #111; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #000; }

/* ===== Comic-ify every blue-* Tailwind utility (termasuk varian opacity) ===== */
/* Tombol (button) TETAP BIRU tegas ala brand — non-tombol pakai biru komik juga (bukan merah/pink) */
[class*="bg-blue-"]:not(button) { background-color: var(--comic-blue) !important; }
[class*="hover:bg-blue-"]:not(button):hover { background-color: var(--comic-blue-dark) !important; }
button[class*="bg-blue-"] { background-color: var(--comic-blue) !important; }
button[class*="hover:bg-blue-"]:hover { background-color: var(--comic-blue-dark) !important; }
[class*="bg-blue-50"] { background-color: #fdeaea !important; }
[class*="bg-blue-100"] { background-color: #fad0d1 !important; }
[class*="hover:bg-blue-50"]:hover { background-color: #fad0d1 !important; }
[class*="text-blue-"] { color: var(--comic-blue) !important; }
[class*="hover:text-blue-"]:hover { color: var(--comic-blue-dark) !important; }
[class*="border-blue-"] { border-color: var(--comic-black) !important; }
[class*="ring-blue-"], [class*="focus:ring-blue-"]:focus { --tw-ring-color: var(--comic-yellow-dark) !important; }
[class*="from-blue-"] { --tw-gradient-from: var(--comic-blue) !important; }
[class*="via-blue-"] { --tw-gradient-via: var(--comic-blue-light) !important; }
[class*="to-blue-"] { --tw-gradient-to: var(--comic-blue-dark) !important; }
[class*="shadow-blue-"] { --tw-shadow-color: rgba(20,18,15,0.35) !important; }
[class*="placeholder-blue-"]::placeholder { color: var(--comic-blue) !important; }

/* ===== Sisa warna merah (bg-red-*/text-red-*/border-red-*) diubah jadi biru komik,
   supaya seluruh tampilan konsisten biru (bukan lagi merah) ===== */
[class*="bg-red-"]:not(button) { background-color: var(--comic-blue) !important; }
[class*="hover:bg-red-"]:not(button):hover { background-color: var(--comic-blue-dark) !important; }
button[class*="bg-red-"] { background-color: var(--comic-blue) !important; }
button[class*="hover:bg-red-"]:hover { background-color: var(--comic-blue-dark) !important; }
[class*="bg-red-50"] { background-color: #fdeaea !important; }
[class*="bg-red-100"] { background-color: #fad0d1 !important; }
[class*="hover:bg-red-50"]:hover { background-color: #fad0d1 !important; }
[class*="text-red-"] { color: var(--comic-blue-dark) !important; }
[class*="hover:text-red-"]:hover { color: var(--comic-blue-dark) !important; }
[class*="border-red-"] { border-color: var(--comic-black) !important; }
[class*="ring-red-"], [class*="focus:ring-red-"]:focus { --tw-ring-color: var(--comic-yellow-dark) !important; }
[class*="placeholder-red-"]::placeholder { color: var(--comic-blue) !important; }

/* ===== Comic panel look untuk card / tombol / border ===== */
.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl { border-radius: 16px !important; }
.border, [class*="border-gray-100"], [class*="border-gray-200"] { border-color: var(--comic-black) !important; }
.border { border-width: 2.5px !important; }
/* Divider satu sisi (border-t/-b/-l/-r) hanya ditebalkan di sisi itu saja, bukan jadi kotak penuh */
[class~="border-t"] { border-top-width: 2.5px !important; }
[class~="border-b"] { border-bottom-width: 2.5px !important; }
[class~="border-l"] { border-left-width: 2.5px !important; }
[class~="border-r"] { border-right-width: 2.5px !important; }
.shadow, .shadow-sm, .shadow-md, .shadow-lg { box-shadow: 4px 4px 0 var(--comic-black) !important; }
button, a.rounded-full, a.rounded-xl, a.rounded-2xl { font-weight: 700; }

/* ===== Tombol Penarikan Manual – kuning tegas, teks hitam ===== */
.btn-manual-withdraw {
  background-color: var(--comic-yellow) !important;
  color: var(--comic-black) !important;
  border: 2.5px solid var(--comic-black) !important;
  box-shadow: 3px 3px 0 var(--comic-black) !important;
  font-weight: 800 !important;
}
.btn-manual-withdraw:hover {
  background-color: var(--comic-yellow-dark) !important;
  box-shadow: 2px 2px 0 var(--comic-black) !important;
  transform: translate(1px, 1px);
}

/* ===== Cegah warna biru bawaan browser muncul saat tombol ditekan/difokus ===== */
/* (native focus outline & tap-highlight bawaan HP sering kelihatan biru sekilas saat tombol diklik/ditekan) */
button, a.rounded-full, a.rounded-xl, a.rounded-2xl, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}
button:focus, button:focus-visible,
a:focus, a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--comic-yellow-dark) !important;
}
/* Pastikan tombol biru tetap biru saat ditekan/aktif/fokus (bukan biru bawaan browser yang beda, dan bukan ke-merah-in) */
button[class*="bg-blue-"]:active,
button[class*="bg-blue-"]:focus {
  background-color: var(--comic-blue-dark) !important;
}
:not(button)[class*="bg-blue-"]:active,
:not(button)[class*="bg-blue-"]:focus {
  background-color: var(--comic-blue-dark) !important;
}

/* ===== Tombol "Simpan" tetap terlihat jelas walau lagi disabled (proses simpan), bukan pudar/transparan ===== */
/* Tanpa ini, browser mem-fade warna tombol saat disabled=true sehingga warnanya jadi pudar/tidak kelihatan */
button:disabled {
  opacity: 1 !important;
  filter: none !important;
  cursor: not-allowed;
}
button[class*="bg-blue-"]:disabled {
  background-color: var(--comic-blue-light) !important;
  color: #fff !important;
}

/* ===== Animasi kartu masuk ala komik (dashboard user & admin) ===== */
@keyframes comicCardIn {
  0%   { opacity: 0; transform: translateY(16px) scale(0.95); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.comic-anim {
  animation: comicCardIn 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
.comic-anim:nth-child(1) { animation-delay: 0.03s; }
.comic-anim:nth-child(2) { animation-delay: 0.09s; }
.comic-anim:nth-child(3) { animation-delay: 0.15s; }
.comic-anim:nth-child(4) { animation-delay: 0.21s; }
.comic-anim:nth-child(5) { animation-delay: 0.27s; }
.comic-anim:nth-child(6) { animation-delay: 0.33s; }
.comic-anim:nth-child(7) { animation-delay: 0.39s; }
.comic-anim:nth-child(8) { animation-delay: 0.45s; }
/* Sedikit "pop" saat disentuh/hover, biar terasa komik & interaktif */
.comic-anim {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.comic-anim:hover, .comic-anim:active {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--comic-black) !important;
}
@media (prefers-reduced-motion: reduce) {
  .comic-anim { animation: none !important; transition: none !important; }
}

/* ===== Kartu Saldo besar (dipakai di dashboard member & admin) ===== */
.comic-balance-card {
  background: linear-gradient(135deg, var(--comic-blue) 0%, var(--comic-blue-dark) 100%);
  border: 3px solid var(--comic-black);
  box-shadow: 5px 5px 0 var(--comic-black) !important;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.comic-balance-card::after {
  content: "";
  position: absolute;
  top: -30px; right: -30px;
  width: 140px; height: 140px;
  background: radial-gradient(var(--comic-yellow) 45%, transparent 46%);
  opacity: 0.35;
}
.comic-flow-box {
  border: 3px solid var(--comic-black);
  box-shadow: 5px 5px 0 var(--comic-black) !important;
}
.comic-flow-box.masuk { background: var(--comic-yellow); }
.comic-flow-box.keluar { background: #fffdf7; }

/* ===== Hero komik warna biru (halaman home) ===== */
.comic-hero-card {
  background: linear-gradient(165deg, var(--comic-blue) 0%, var(--comic-blue-light) 45%, #ffffff 80%);
  border: 3px solid var(--comic-black);
  box-shadow: 6px 6px 0 var(--comic-black) !important;
  position: relative;
}
.comic-hero-card::after {
  content: "";
  position: absolute;
  top: -30px; right: -30px;
  width: 150px; height: 150px;
  background: radial-gradient(var(--comic-yellow) 45%, transparent 46%);
  opacity: 0.4;
  pointer-events: none;
}

/* Bingkai logo ala komik */
.comic-logo-frame {
  width: 92px;
  height: 92px;
  border-radius: 20px;
  border: 3px solid var(--comic-black);
  background: #fffdf7;
  box-shadow: 4px 4px 0 var(--comic-black);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.comic-logo-frame img { width: 100%; height: 100%; object-fit: contain; }

.comic-hero-title {
  color: var(--comic-black);
  text-shadow: 1.5px 1.5px 0 rgba(255,255,255,0.5);
}

/* Tombol utama hero (Mulai Sekarang) */
.comic-btn-primary {
  background: var(--comic-blue) !important;
  color: #fff !important;
  border: 2.5px solid var(--comic-black) !important;
  box-shadow: 3px 3px 0 var(--comic-black) !important;
  font-weight: 800 !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.comic-btn-primary:hover {
  background: var(--comic-blue-dark) !important;
  box-shadow: 2px 2px 0 var(--comic-black) !important;
  transform: translate(1px, 1px);
}

/* Tombol sekunder hero (Panduan API) */
.comic-btn-secondary {
  background: #fffdf7 !important;
  color: var(--comic-black) !important;
  border: 2.5px solid var(--comic-black) !important;
  box-shadow: 3px 3px 0 var(--comic-black) !important;
  font-weight: 800 !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.comic-btn-secondary:hover {
  background: #fff2c9 !important;
  box-shadow: 2px 2px 0 var(--comic-black) !important;
  transform: translate(1px, 1px);
}

/* Tombol bahaya (Hapus, dsb) — pakai variabel warna sendiri, aman dari override bg-red-*/text-red-* */
.comic-btn-danger {
  background: var(--comic-red) !important;
  color: #fff !important;
  border: 2.5px solid var(--comic-black) !important;
  box-shadow: 3px 3px 0 var(--comic-black) !important;
  font-weight: 800 !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.comic-btn-danger:hover {
  background: var(--comic-red-dark) !important;
  box-shadow: 2px 2px 0 var(--comic-black) !important;
  transform: translate(1px, 1px);
}

/* ===== Bingkai logo tipis untuk footer ===== */
.comic-logo-frame-thin {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1.5px solid var(--comic-black);
  background: #fffdf7;
  box-shadow: 1.5px 1.5px 0 var(--comic-black);
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.comic-logo-frame-thin img { width: 100%; height: 100%; object-fit: contain; }

/* ===== Tombol CTA "Buat Akun Gratis" di halaman home ===== */
.cta-register-btn {
  background-color: var(--comic-yellow) !important;
  color: var(--comic-black) !important;
  border: 2.5px solid var(--comic-black) !important;
  box-shadow: 3px 3px 0 var(--comic-black) !important;
  font-weight: 800 !important;
}
.cta-register-btn:hover {
  background-color: var(--comic-yellow-dark) !important;
  box-shadow: 2px 2px 0 var(--comic-black) !important;
  transform: translate(1px, 1px);
}

/* ===================== TV KOMIK BANNER (auto-slide, full width) ===================== */
.comic-tv-banner { position: relative; }
.comic-tv-frame {
  position: relative;
  background: linear-gradient(160deg, #3a3a3a, var(--comic-black) 65%);
  border: 4px solid var(--comic-black);
  border-radius: 26px 26px 34px 34px;
  padding: 16px 16px 24px;
  box-shadow: 6px 6px 0 var(--comic-black);
}
.comic-tv-screen {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  border: 3px solid var(--comic-black);
  background: #000;
  box-shadow: inset 0 0 0 3px var(--comic-yellow), inset 0 0 22px rgba(0,0,0,0.55);
}
.comic-tv-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(.65,0,.35,1);
  will-change: transform;
}
.comic-tv-slide { flex: 0 0 100%; width: 100%; height: 100%; }
.comic-tv-slide a, .comic-tv-slide img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* antena ala TV jadul */
.comic-tv-antenna {
  position: absolute;
  top: -22px;
  width: 4px;
  height: 28px;
  background: var(--comic-black);
  border-radius: 2px;
}
.comic-tv-antenna::after {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  width: 11px; height: 11px;
  background: var(--comic-red);
  border: 2px solid var(--comic-black);
  border-radius: 50%;
  transform: translateX(-50%);
}
.comic-tv-antenna-l { left: 22%; transform: rotate(-20deg); }
.comic-tv-antenna-r { right: 22%; transform: rotate(20deg); }

/* kenop TV */
.comic-tv-knobs {
  position: absolute;
  bottom: 5px; right: 16px;
  display: flex; gap: 8px;
}
.comic-tv-knobs span {
  width: 13px; height: 13px;
  background: var(--comic-yellow);
  border: 2px solid var(--comic-black);
  border-radius: 50%;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}

/* titik indikator slide */
.comic-tv-dots {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 10px;
}
.comic-tv-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ded4ae;
  border: 2px solid var(--comic-black);
  transition: background 0.25s;
}
.comic-tv-dot.active { background: var(--comic-red); }

@media (min-width: 640px) {
  .comic-tv-frame { padding: 20px 20px 28px; }
}


/* ===================== LATAR BELAKANG BIRU KOMIK + ANIMASI "ZIP ZIP" ===================== */
/* Mode dipilih admin (Pengaturan > Background) lewat atribut html[data-bg]:
   blue-anim (default) = biru + animasi | blue = biru statis | cream = krem bertitik klasik */
body::before, body::after {
  content: ""; position: fixed; pointer-events: none; z-index: -1;
}
/* Lapisan 1: titik halftone melayang pelan */
body::before {
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.30) 2.2px, transparent 2.8px);
  background-size: 26px 26px;
  animation: cmDots 6s linear infinite;
}
/* Lapisan 2: garis kecepatan (zip zip) melesat menyamping, dimiringkan; 3 lapis dgn kecepatan beda (paralaks) */
body::after {
  left: -60vmax; top: -60vmax; width: 220vmax; height: 220vmax;
  transform: rotate(-18deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='360'%3E%3Crect x='40' y='20' width='260' height='6' rx='3.0' fill='white' fill-opacity='0.55'/%3E%3Crect x='430' y='62' width='180' height='4' rx='2.0' fill='white' fill-opacity='0.4'/%3E%3Crect x='180' y='112' width='340' height='7' rx='3.5' fill='white' fill-opacity='0.5'/%3E%3Crect x='620' y='150' width='140' height='5' rx='2.5' fill='white' fill-opacity='0.4'/%3E%3Crect x='90' y='204' width='210' height='4' rx='2.0' fill='white' fill-opacity='0.35'/%3E%3Crect x='480' y='244' width='280' height='8' rx='4.0' fill='white' fill-opacity='0.55'/%3E%3Crect x='300' y='300' width='170' height='5' rx='2.5' fill='white' fill-opacity='0.4'/%3E%3Crect x='690' y='332' width='90' height='4' rx='2.0' fill='white' fill-opacity='0.35'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1300' height='520'%3E%3Crect x='60' y='40' width='420' height='5' rx='2.5' fill='white' fill-opacity='0.3'/%3E%3Crect x='700' y='110' width='300' height='8' rx='4.0' fill='white' fill-opacity='0.35'/%3E%3Crect x='200' y='190' width='180' height='4' rx='2.0' fill='white' fill-opacity='0.28'/%3E%3Crect x='900' y='260' width='320' height='6' rx='3.0' fill='white' fill-opacity='0.32'/%3E%3Crect x='350' y='330' width='380' height='5' rx='2.5' fill='white' fill-opacity='0.3'/%3E%3Crect x='40' y='420' width='240' height='7' rx='3.5' fill='white' fill-opacity='0.3'/%3E%3Crect x='820' y='470' width='400' height='4' rx='2.0' fill='white' fill-opacity='0.28'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='300'%3E%3Crect x='100' y='30' width='200' height='10' rx='5.0' fill='#0873d6' fill-opacity='0.3'/%3E%3Crect x='380' y='150' width='260' height='12' rx='6.0' fill='#0873d6' fill-opacity='0.25'/%3E%3Crect x='60' y='260' width='300' height='9' rx='4.5' fill='#0873d6' fill-opacity='0.28'/%3E%3C/svg%3E");
  background-size: 800px 360px, 1300px 520px, 700px 300px;
  background-repeat: repeat, repeat, repeat;
  animation: cmZip 1.1s linear infinite;
}
@keyframes cmZip {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: -800px 0, -1300px 0, -700px 0; }
}
@keyframes cmDots {
  from { background-position: 0 0; }
  to   { background-position: 26px 26px; }
}
/* Biru statis */
html[data-bg="blue"] body::after { animation: none; }
html[data-bg="blue"] body::before { animation: none; }
/* Klasik krem bertitik (tampilan lama) */
html[data-bg="cream"] body {
  background-color: var(--comic-cream) !important;
  background-image: radial-gradient(var(--comic-black) 1.4px, transparent 1.4px) !important;
  background-size: 18px 18px !important;
  background-position: -9px -9px !important;
  background-attachment: scroll !important;
}
html[data-bg="cream"] body::before, html[data-bg="cream"] body::after { display: none; }
/* Halaman padat teks (docs): tanpa garis/titik supaya tidak mengganggu baca */
body.no-dots::before, body.no-dots::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
}

/* ===================== KREDIT PEMBUAT ===================== */
.cm-credit {
  display: table; margin: 18px auto 22px; align-self: center;
  background: #fff; color: var(--comic-black); border: 3px solid var(--comic-black); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--comic-black); padding: 3px 16px 4px;
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 12.5px; text-align: center; letter-spacing: .2px;
}
.cm-credit b { font-family: 'Bangers','Baloo 2',sans-serif; font-weight: 400; letter-spacing: 1px; color: var(--comic-red); font-size: 15px; -webkit-text-stroke: .4px var(--comic-black); }
.cm-credit i { color: var(--comic-yellow-dark); margin-right: 4px; }

/* Kartu putih di footer supaya teks tetap terbaca di atas latar biru */
.cm-foot { display: inline-block; background: #fff; border: 3px solid var(--comic-black); border-radius: 16px; box-shadow: 4px 4px 0 var(--comic-black); padding: 10px 18px; max-width: 100%; }

/* ===================== TABEL: isi kotak/garis selalu putih (biar terbaca di atas latar biru) ===================== */
table { background-color: #fff; }
table tbody tr, table tbody td { background-color: #fff; }
table thead th { background-color: #f8fafc; }
/* pembungkus tabel (kotak berborder + area scroll) ikut putih supaya tidak ada celah biru di tepi */
div:has(> table):not(.fixed):not([id$="Modal"]),
div[class*="overflow-"]:has(table):not(.fixed):not([id$="Modal"]),
div[class*="rounded"][class*="border"]:has(table):not(.fixed):not([id$="Modal"]) { background-color: #fff; }
/* pembungkus layar penuh popup TIDAK boleh putih (biar animasi background tetap kelihatan di luar kotak) */
.fixed[id$="Modal"], [id$="Modal"].fixed { background-color: transparent !important; }
/* baris hover tetap terlihat */
table tbody tr:hover, table tbody tr:hover td { background-color: #fff7d6; }

/* ===================== MODAL: tanpa lapisan abu/gelap ===================== */
/* Latar gelap (overlay) di belakang modal dihilangkan supaya animasi background biru tetap kelihatan.
   Overlay klik-untuk-tutup tetap ada (hanya transparan). Penampil gambar (bg-black/85) tidak diubah. */
[class*="inset-0"][class*="bg-black/40"],
[class*="inset-0"][class*="bg-black/50"],
[class*="inset-0"][class*="bg-black/60"] {
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ===================== MODAL / POPUP: ukuran lebih ringkas ===================== */
[id$="Modal"] > .relative { max-width: 320px !important; margin-top: 16px !important; margin-bottom: 16px !important; }
[id$="Modal"] > .relative > div[class*="px-5"][class*="py-3"] { padding: 6px 14px !important; }
[id$="Modal"] > .relative > div[class*="px-5"][class*="py-3"] h3 { font-size: 15px !important; line-height: 1.2; }
[id$="Modal"] > .relative > div[class*="px-5"][class*="py-3"] button { width: 28px !important; height: 28px !important; }
[id$="Modal"] > .relative > div[class*="px-5"][class*="py-3"] button i { font-size: 13px !important; }
[id$="Modal"] > .relative > div[class*="p-5"] { padding: 12px 14px !important; }
[id$="Modal"] .relative { border-width: 2px !important; box-shadow: 3px 3px 0 var(--comic-black) !important; }
/* tabel detail */
[id$="Modal"] table { border-width: 2px !important; box-shadow: 2px 2px 0 var(--comic-black) !important; }
[id$="Modal"] table td, [id$="Modal"] table th { padding: 5px 10px !important; font-size: 12px !important; line-height: 1.25 !important; }
[id$="Modal"] table td.px-4 { padding-left: 10px !important; padding-right: 10px !important; }
/* label, input, select, textarea, tombol */
[id$="Modal"] label { font-size: 12px !important; margin-bottom: 4px !important; }
[id$="Modal"] input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
[id$="Modal"] select, [id$="Modal"] textarea {
  padding: 6px 10px !important; font-size: 12.5px !important; border-width: 2px !important;
  border-radius: 12px !important; box-shadow: 2px 2px 0 var(--comic-black) !important; line-height: 1.3 !important;
}
[id$="Modal"] form button, [id$="Modal"] .flex.gap-2 > button {
  padding-top: 6px !important; padding-bottom: 6px !important; font-size: 12.5px !important;
}
[id$="Modal"] p, [id$="Modal"] .leading-relaxed { font-size: 11.5px !important; line-height: 1.35 !important; }
[id$="Modal"] form > div[class*="mb-3"], [id$="Modal"] form > div[class*="mb-4"] { margin-bottom: 8px !important; }
[id$="Modal"] form > div.mt-4 { margin-top: 10px !important; }
[id$="Modal"] .bg-blue-100 { padding: 6px 8px !important; font-size: 11.5px !important; }

/* ===================== BACKGROUND FOTO (URL dari Admin > Pengaturan) ===================== */
/* photo      = foto statis | photo-anim = foto bergerak pelan (zoom & geser) */
html[data-bg^="photo"] body {
  background-color: var(--comic-sky) !important;
  background-image: var(--bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}
html[data-bg^="photo"] body::after { display: none; }
html[data-bg="photo"] body::before { display: none; }
html[data-bg="photo-anim"] body::before {
  inset: -6%; background-image: var(--bg-image); background-size: cover; background-position: center;
  animation: cmKen 22s ease-in-out infinite alternate;
}
html[data-bg="photo-anim"] body.no-dots::before { display: block; }
@keyframes cmKen {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(-2.5%, -2%); }
}

/* ===================== PARTIKEL (khusus mode Foto beranimasi) ===================== */
/* Dipilih admin: html[data-particle="galaxy"|"sakura"]. Memakai body::after + html::before/::after (semua fixed, di belakang konten) */
html[data-bg="photo-anim"] { --cm-dummy: 1; }
html[data-bg="photo-anim"]::before, html[data-bg="photo-anim"]::after {
  content: ""; position: fixed; pointer-events: none; z-index: -1; left: 0; top: 0; width: 100%; height: 100%;
}
html[data-bg="photo-anim"][data-particle="galaxy"] body:not(.no-dots)::after,
html[data-bg="photo-anim"][data-particle="sakura"] body:not(.no-dots)::after {
  display: block; left: -40px; top: -40px; width: calc(100% + 80px); height: calc(100% + 80px);
  transform: none; background-repeat: repeat;
}

/* ---------- GALAXY: bintang berkelip 2 lapis + bintang jatuh ---------- */
html[data-bg="photo-anim"][data-particle="galaxy"] body:not(.no-dots)::after {
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, #fff, transparent 60%),
    radial-gradient(1px 1px at 90px 120px, #fff, transparent 60%),
    radial-gradient(2.2px 2.2px at 160px 60px, #cfe8ff, transparent 60%),
    radial-gradient(1.2px 1.2px at 220px 200px, #ffe9ff, transparent 60%),
    radial-gradient(2.6px 2.6px at 60px 220px, #fff, transparent 60%);
  background-size: 250px 250px, 320px 320px, 400px 400px, 280px 280px, 460px 460px;
  animation: cmTwinkle 3.2s ease-in-out infinite alternate, cmStarDrift 90s linear infinite;
}
html[data-bg="photo-anim"][data-particle="galaxy"]::before {
  background-image:
    radial-gradient(1.4px 1.4px at 50px 70px, #bfe0ff, transparent 60%),
    radial-gradient(2px 2px at 140px 30px, #fff, transparent 60%),
    radial-gradient(1px 1px at 200px 160px, #ffd6ff, transparent 60%),
    radial-gradient(1.8px 1.8px at 100px 190px, #fff, transparent 60%);
  background-size: 300px 300px, 380px 380px, 260px 260px, 340px 340px;
  animation: cmTwinkle 4.7s ease-in-out -2s infinite alternate-reverse;
}
html[data-bg="photo-anim"][data-particle="galaxy"]::after {
  left: 0; top: 0; width: 160px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 70%, rgba(190,220,255,.9));
  box-shadow: 0 0 8px 1px rgba(255,255,255,.7);
  opacity: 0; transform: translate(110vw, -5vh) rotate(28deg);
  animation: cmShoot 7s ease-in infinite;
}
@keyframes cmTwinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes cmStarDrift { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: -250px 250px, -320px 320px, -400px 400px, -280px 280px, -460px 460px; } }
@keyframes cmShoot {
  0%, 78% { opacity: 0; transform: translate(105vw, -6vh) rotate(28deg); }
  80% { opacity: 1; }
  92% { opacity: 1; }
  100% { opacity: 0; transform: translate(-30vw, 62vh) rotate(28deg); }
}

/* ---------- SAKURA: kelopak berguguran, 2 lapis (besar & kecil) + goyang ---------- */
html[data-bg="photo-anim"][data-particle="sakura"] body:not(.no-dots)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg transform='translate%28185 97%29 rotate%28202%29 scale%281.16%29' opacity='0.96'%3E%3Cpath d='M20 4 C26 -2 38 6 30 20 C26 28 22 32 20 36 C18 32 14 28 10 20 C2 6 14 -2 20 4Z' fill='%23ffc9d9'/%3E%3Cpath d='M20 8 C20 16 20 26 20 34' stroke='%23ff8fab' stroke-width='0.8' fill='none' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate%2868 207%29 rotate%28298%29 scale%280.92%29' opacity='0.76'%3E%3Cpath d='M20 4 C26 -2 38 6 30 20 C26 28 22 32 20 36 C18 32 14 28 10 20 C2 6 14 -2 20 4Z' fill='%23ffb3c8'/%3E%3Cpath d='M20 8 C20 16 20 26 20 34' stroke='%23ff8fab' stroke-width='0.8' fill='none' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate%28242 234%29 rotate%2835%29 scale%281.0%29' opacity='0.76'%3E%3Cpath d='M20 4 C26 -2 38 6 30 20 C26 28 22 32 20 36 C18 32 14 28 10 20 C2 6 14 -2 20 4Z' fill='%23ff9fba'/%3E%3Cpath d='M20 8 C20 16 20 26 20 34' stroke='%23ff8fab' stroke-width='0.8' fill='none' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate%28309 83%29 rotate%28114%29 scale%281.15%29' opacity='0.89'%3E%3Cpath d='M20 4 C26 -2 38 6 30 20 C26 28 22 32 20 36 C18 32 14 28 10 20 C2 6 14 -2 20 4Z' fill='%23ffc9d9'/%3E%3Cpath d='M20 8 C20 16 20 26 20 34' stroke='%23ff8fab' stroke-width='0.8' fill='none' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate%28223 45%29 rotate%28113%29 scale%280.92%29' opacity='0.82'%3E%3Cpath d='M20 4 C26 -2 38 6 30 20 C26 28 22 32 20 36 C18 32 14 28 10 20 C2 6 14 -2 20 4Z' fill='%23ffb3c8'/%3E%3Cpath d='M20 8 C20 16 20 26 20 34' stroke='%23ff8fab' stroke-width='0.8' fill='none' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate%2893 296%29 rotate%2860%29 scale%281.13%29' opacity='0.78'%3E%3Cpath d='M20 4 C26 -2 38 6 30 20 C26 28 22 32 20 36 C18 32 14 28 10 20 C2 6 14 -2 20 4Z' fill='%23ffb3c8'/%3E%3Cpath d='M20 8 C20 16 20 26 20 34' stroke='%23ff8fab' stroke-width='0.8' fill='none' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate%28312 347%29 rotate%2896%29 scale%281.05%29' opacity='0.89'%3E%3Cpath d='M20 4 C26 -2 38 6 30 20 C26 28 22 32 20 36 C18 32 14 28 10 20 C2 6 14 -2 20 4Z' fill='%23ffc9d9'/%3E%3Cpath d='M20 8 C20 16 20 26 20 34' stroke='%23ff8fab' stroke-width='0.8' fill='none' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 420px 420px;
  animation: cmPetalFall 15s linear infinite, cmPetalSway 6s ease-in-out infinite alternate;
}
html[data-bg="photo-anim"][data-particle="sakura"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg transform='translate%28178 72%29 rotate%28254%29 scale%280.7%29' opacity='0.94'%3E%3Cpath d='M20 4 C26 -2 38 6 30 20 C26 28 22 32 20 36 C18 32 14 28 10 20 C2 6 14 -2 20 4Z' fill='%23ff9fba'/%3E%3Cpath d='M20 8 C20 16 20 26 20 34' stroke='%23ff8fab' stroke-width='0.8' fill='none' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate%28139 169%29 rotate%28232%29 scale%280.61%29' opacity='0.95'%3E%3Cpath d='M20 4 C26 -2 38 6 30 20 C26 28 22 32 20 36 C18 32 14 28 10 20 C2 6 14 -2 20 4Z' fill='%23ffb3c8'/%3E%3Cpath d='M20 8 C20 16 20 26 20 34' stroke='%23ff8fab' stroke-width='0.8' fill='none' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate%28198 219%29 rotate%28124%29 scale%280.52%29' opacity='0.88'%3E%3Cpath d='M20 4 C26 -2 38 6 30 20 C26 28 22 32 20 36 C18 32 14 28 10 20 C2 6 14 -2 20 4Z' fill='%23ffd6e2'/%3E%3Cpath d='M20 8 C20 16 20 26 20 34' stroke='%23ff8fab' stroke-width='0.8' fill='none' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate%28244 107%29 rotate%28229%29 scale%280.59%29' opacity='0.78'%3E%3Cpath d='M20 4 C26 -2 38 6 30 20 C26 28 22 32 20 36 C18 32 14 28 10 20 C2 6 14 -2 20 4Z' fill='%23ffc9d9'/%3E%3Cpath d='M20 8 C20 16 20 26 20 34' stroke='%23ff8fab' stroke-width='0.8' fill='none' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate%28127 62%29 rotate%28175%29 scale%280.55%29' opacity='0.86'%3E%3Cpath d='M20 4 C26 -2 38 6 30 20 C26 28 22 32 20 36 C18 32 14 28 10 20 C2 6 14 -2 20 4Z' fill='%23ff9fba'/%3E%3Cpath d='M20 8 C20 16 20 26 20 34' stroke='%23ff8fab' stroke-width='0.8' fill='none' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate%28191 39%29 rotate%28285%29 scale%280.67%29' opacity='0.84'%3E%3Cpath d='M20 4 C26 -2 38 6 30 20 C26 28 22 32 20 36 C18 32 14 28 10 20 C2 6 14 -2 20 4Z' fill='%23ffd6e2'/%3E%3Cpath d='M20 8 C20 16 20 26 20 34' stroke='%23ff8fab' stroke-width='0.8' fill='none' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 300px; opacity: .85;
  animation: cmPetalFall2 22s linear infinite, cmPetalSway 8s ease-in-out -3s infinite alternate-reverse;
}
@keyframes cmPetalFall { from { background-position: 0 -420px; } to { background-position: 0 0; } }
@keyframes cmPetalFall2 { from { background-position: 0 -300px; } to { background-position: 0 0; } }
@keyframes cmPetalSway { from { transform: translateX(-28px); } to { transform: translateX(28px); } }
@media (prefers-reduced-motion: reduce) {
  html[data-bg="photo-anim"]::before, html[data-bg="photo-anim"]::after { animation: none !important; }
}
/* foto beranimasi ditaruh paling belakang supaya lapisan partikel (html::before) tampil di atasnya */
html[data-bg="photo-anim"] body::before { z-index: -2; }

/* ===== Badge "GRATIS" gaya komik (dipakai di halaman Produk, harga = 0) ===== */
.comic-badge-free {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-family: 'Bangers', 'Baloo 2', sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.6px;
  color: var(--comic-black);
  background: var(--comic-yellow);
  border: 2.5px solid var(--comic-black);
  border-radius: 8px;
  box-shadow: 2.5px 2.5px 0 var(--comic-black);
  transform: rotate(-6deg);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ===== Badge "Full Up" gaya komik (produk yang dapat link Group Join) ===== */
.comic-badge-fullup {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff;
  background: var(--comic-blue);
  border: 2px solid var(--comic-black);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--comic-black);
  white-space: nowrap;
}