/* ============================================================
   BEBEQ REDESIGN — tema publik baru
   Sumber: "Desain website Bebeq baru/Bebeq Redesign.dc.html"

   Dimuat SETELAH style.css dan di-scope ke body.bq-theme, jadi
   halaman yang belum diport (dan panel admin) tidak ikut berubah.
   ============================================================ */

.bq-theme {
  --bq-ink: #241c12;
  --bq-cream: #fff6e8;
  --bq-cream2: #ffe9c2;
  --bq-paper: #ffffff;
  --bq-acc: #ffb020;
  --bq-acc-hi: #ffc64d;
  --bq-muted: #8a7c68;
  --bq-body: #574733;
  --bq-faint: #a3927c;
  --bq-dash: #e6d8c2;
  --bq-green: #b6f0c6;
  --bq-green-s: #3ec46d;
  --bq-red: #ff3b30;
  --bq-blurple: #5865f2;
  --bq-sky: #cfe0ff;

  /* Banyak markup lama memakai token style.css lewat style inline
     (var(--primary), var(--text-muted), …). Dipetakan ke palet baru supaya
     tidak ada sisa warna ungu tema lama di halaman publik. */
  --primary: var(--bq-ink);
  --primary-soft: var(--bq-cream2);
  --primary-dark: #a35c00;
  --success: #1f8f4d;
  --success-soft: var(--bq-green);
  --danger: var(--bq-red);
  --danger-soft: #ffd9d6;
  --warning: var(--bq-acc);
  --text: var(--bq-ink);
  --text-muted: var(--bq-muted);
  --text-light: var(--bq-faint);
  --border: var(--bq-dash);
  --border-strong: var(--bq-ink);
  --bg: var(--bq-cream);
  --surface: var(--bq-paper);
  --card: var(--bq-paper);
  --radius: 12px;
  --radius-lg: 16px;

  --bq-b: 3px solid var(--bq-ink);
  --bq-sh-sm: 3px 3px 0 var(--bq-ink);
  --bq-sh: 4px 4px 0 var(--bq-ink);
  --bq-sh-md: 5px 5px 0 var(--bq-ink);
  --bq-sh-lg: 7px 7px 0 var(--bq-ink);
}

body.bq-theme {
  /* Kolom fleks supaya footer tetap menempel ke bawah layar pada halaman
     yang isinya pendek (checkout, invoice, panel client). */
  display: flex; flex-direction: column; min-height: 100vh;
  background-color: var(--bq-cream);
  background-image: radial-gradient(circle at center, rgba(36, 28, 18, .07) 2.4px, transparent 2.9px);
  background-size: 24px 24px;
  color: var(--bq-ink);
  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

.bq-theme h1,
.bq-theme h2,
.bq-theme h3,
.bq-theme h4 {
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-weight: 800;
  letter-spacing: -.01em;
}

.bq-theme a { color: var(--bq-ink); text-decoration: none; }
.bq-theme a:hover { color: #a35c00; }
.bq-theme ::selection { background: var(--bq-acc); color: var(--bq-ink); }

@keyframes bq-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   Topbar gelap
   ============================================================ */
.bq-topbar {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding: 8px clamp(14px, 4vw, 44px);
  background: var(--bq-ink); color: var(--bq-cream);
  font-size: 12px; font-weight: 700;
}
.bq-topbar a { color: var(--bq-cream); }
.bq-topbar a:hover { color: var(--bq-acc); }
.bq-tb-left, .bq-tb-right { display: flex; align-items: center; gap: 14px; }
.bq-tb-left { gap: 8px; }
.bq-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--bq-acc); flex: none; }

.bq-lang { display: flex; gap: 4px; padding: 3px; border-radius: 8px; background: #3a2f20; }
.bq-lang a { padding: 2px 8px; border-radius: 6px; color: #c8bcab; }
.bq-lang a.active { background: var(--bq-acc); color: var(--bq-ink); }
.bq-lang a.active:hover { color: var(--bq-ink); }

.bq-user { display: flex; align-items: center; gap: 7px; }
.bq-user img { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.bq-user span {
  max-width: 120px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   Header sticky
   ============================================================ */
.bq-head {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  padding: 12px clamp(14px, 4vw, 44px);
  background: var(--bq-cream); border-bottom: var(--bq-b);
}
.bq-logo { display: flex; align-items: center; gap: 12px; }
.bq-logo-mark {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border: var(--bq-b); border-radius: 14px;
  background: var(--bq-acc);
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 24px;
  box-shadow: var(--bq-sh-sm); overflow: hidden;
}
.bq-logo-mark img { width: 100%; height: 100%; object-fit: cover; }
/* min-width:0 wajib, kalau tidak kolom teks ini menolak menyusut dan namanya
   menjulur ke bawah tombol "Order saya" di layar sempit. */
.bq-logo-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.bq-logo-name { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 19px; }
.bq-logo-sub {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bq-muted);
}

.bq-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin-left: auto;
  font-size: 14px; font-weight: 700;
}
.bq-nav a { padding: 9px 13px; border-radius: 10px; }
.bq-nav a:hover { background: var(--bq-cream2); color: var(--bq-ink); }
.bq-head .bq-nav-cta {
  flex: none; margin-left: 6px; padding: 10px 18px;
  border: var(--bq-b); border-radius: 12px;
  background: var(--bq-acc); box-shadow: var(--bq-sh-sm);
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
.bq-head .bq-nav-cta:hover { background: var(--bq-acc-hi); color: var(--bq-ink); }
.bq-head .bq-nav-cta:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--bq-ink); }

/* ============================================================
   Layout
   ============================================================ */
.bq-theme .user-page { max-width: none; margin: 0; padding: 0; }
/* width:100% wajib: body adalah kolom fleks, dan "margin: 0 auto" saja bikin
   blok ini menyusut ke lebar isinya alih-alih memenuhi barisnya. */
.bq-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(14px, 4vw, 44px); }

/* ============================================================
   Hero
   ============================================================ */
.bq-hero {
  display: grid; gap: clamp(24px, 4vw, 48px);
  /* min() penting: tanpa itu track 310px memaksa lebar melebihi layar 320px
     dan halamannya jadi bisa digeser ke samping (tampak "terpotong" di HP). */
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  align-items: start;
  padding: clamp(32px, 6vw, 76px) 0 clamp(24px, 4vw, 44px);
}
.bq-hero-copy { animation: bq-rise .5s ease both; }
.bq-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 2px solid var(--bq-ink); border-radius: 999px;
  background: var(--bq-paper);
  font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.bq-eyebrow .bq-dot { background: var(--bq-green-s); }
.bq-hero h1 {
  margin: 16px 0 0;
  font-size: clamp(38px, 7vw, 82px); line-height: .92; letter-spacing: -.02em;
  text-wrap: balance;
}
.bq-hero h1 mark {
  display: inline-block; padding: 0 12px;
  border: var(--bq-b); border-radius: 16px;
  background: var(--bq-acc); color: var(--bq-ink);
  box-shadow: var(--bq-sh-md); transform: rotate(-2deg);
}
.bq-hero p {
  margin: 26px 0 0; max-width: 50ch;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65; color: var(--bq-body);
  text-wrap: pretty;
}
.bq-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ============================================================
   Tombol
   ============================================================ */
.bq-theme .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px;
  border: var(--bq-b); border-radius: 13px;
  background: var(--bq-paper); color: var(--bq-ink);
  font-family: inherit; font-weight: 900; font-size: 15px;
  box-shadow: var(--bq-sh);
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.bq-theme .btn:hover { background: var(--bq-cream2); border-color: var(--bq-ink); color: var(--bq-ink); }
.bq-theme .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--bq-ink); }
.bq-theme .btn:disabled { opacity: .45; cursor: not-allowed; }
.bq-theme .btn:disabled:active { transform: none; box-shadow: var(--bq-sh); }

.bq-theme .btn-primary { background: var(--bq-acc); color: var(--bq-ink); }
.bq-theme .btn-primary:hover { background: var(--bq-acc-hi); color: var(--bq-ink); }
.bq-theme .btn-yt { background: var(--bq-red); color: #fff; }
.bq-theme .btn-yt:hover { background: #ff5b52; color: #fff; }
.bq-theme .btn-discord { background: var(--bq-blurple); color: #fff; }
.bq-theme .btn-discord:hover { background: #6f7bff; color: #fff; }
.bq-theme .btn-ink { background: var(--bq-ink); color: var(--bq-cream); }
.bq-theme .btn-ink:hover { background: #3a2f20; color: var(--bq-cream); }
.bq-theme .btn-lg { padding: 15px 26px; border-radius: 16px; font-size: 16px; box-shadow: var(--bq-sh-md); }
.bq-theme .btn-lg:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--bq-ink); }
.bq-theme .btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Pulse bawaan menimpa box-shadow dan menghapus bayangan kerasnya —
   di tema ini pulse-nya lewat pergeseran bayangan, bukan cincin glow. */
@keyframes bq-pulse {
  0%, 100% { transform: translate(0, 0); box-shadow: var(--bq-sh); }
  50%      { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--bq-ink); }
}
.bq-theme .pulse-attention { animation: bq-pulse 1.4s infinite; }
.bq-theme .pulse-attention-green {
  animation: bq-pulse 1.4s infinite;
  background-color: var(--bq-green) !important;
  border-color: var(--bq-ink) !important;
  color: var(--bq-ink) !important;
}

/* ============================================================
   Gate card
   ============================================================ */
.bq-theme .gate-card {
  border: var(--bq-b); border-radius: 22px;
  background: var(--bq-paper);
  box-shadow: var(--bq-sh-lg);
  padding: clamp(20px, 2.6vw, 30px);
  scroll-margin-top: 90px;
  animation: bq-rise .6s ease both;
}
.bq-theme .gate-header {
  display: flex; align-items: center; gap: 12px;
  text-align: left; margin-bottom: 0;
}
.bq-theme .gate-avatar {
  width: 46px; height: 46px; margin: 0; flex: none;
  border: var(--bq-b); border-radius: 14px;
  background: var(--bq-acc); color: var(--bq-ink);
  font-family: "Baloo 2", sans-serif; font-size: 24px; font-weight: 800;
}
.bq-theme .gate-title { font-size: 20px; margin-bottom: 2px; }
.bq-theme .gate-subtitle { font-size: 13px; color: var(--bq-muted); margin-bottom: 0; }
.bq-theme .gate-id { flex: 1; min-width: 0; }
.bq-theme .badge-subscriber {
  margin-left: auto; align-self: flex-start; flex: none;
  padding: 4px 11px; border: 2px solid var(--bq-ink); border-radius: 9px;
  background: var(--bq-cream2); color: var(--bq-ink);
  font-size: 10px; font-weight: 900; letter-spacing: .08em; white-space: nowrap;
}
/* Status terverifikasi sudah ditandai pill "✓ Selesai" di langkah 1 dan
   nomor langkah yang berubah hijau — badge mengambang lama jadi mubazir. */
.bq-theme .gate-card.gate-verified .gate-header::after { content: none; }

.bq-steps-bar { display: flex; gap: 6px; margin: 18px 0 24px; }
.bq-steps-bar span {
  flex: 1; height: 8px;
  border: 2px solid var(--bq-ink); border-radius: 6px;
  background: var(--bq-paper);
  transition: background .25s ease;
}
.bq-steps-bar span:first-child { background: var(--bq-acc); }
.gate-card.gate-verified .bq-steps-bar span { background: var(--bq-acc); }

/* ============================================================
   Langkah gate
   ============================================================ */
.bq-theme .step { gap: 14px; padding: 0; align-items: flex-start; }
.bq-theme .step-divider {
  height: 0; margin: 24px 0 22px;
  background: none; border-top: 3px dashed var(--bq-dash);
}
.bq-theme .step-num {
  width: 36px; height: 36px;
  border: var(--bq-b); border-radius: 12px;
  background: var(--bq-acc); color: var(--bq-ink);
  font-family: "Baloo 2", sans-serif; font-size: 18px; font-weight: 800;
}
.bq-theme .step.locked .step-num { background: var(--bq-paper); border-color: var(--bq-dash); color: var(--bq-faint); }
/* Langkah 1 adalah langkah yang sedang berjalan — jangan ikut diredupkan. */
.bq-theme #step1.locked .step-num { background: var(--bq-acc); border-color: var(--bq-ink); color: var(--bq-ink); }
.bq-theme #step1.locked .step-body h3 { color: var(--bq-ink); }
.bq-theme #step1.locked .step-body p { color: var(--bq-body); }
.bq-theme .step.done .step-num { background: var(--bq-green); border-color: var(--bq-ink); color: var(--bq-ink); }
.bq-theme .step-body h3 { font-size: 21px; margin: 3px 0 6px; color: var(--bq-ink); }
.bq-theme .step-body p { font-size: 15px; line-height: 1.55; color: var(--bq-body); margin-bottom: 0; }
.bq-theme .step.locked .step-body h3 { color: var(--bq-faint); }
.bq-theme .step.locked .step-body p { color: var(--bq-faint); }
.bq-theme .step .btn-row { margin-top: 22px; }

.bq-theme .verify-pill,
.bq-theme .verified-pill,
.bq-theme .warn-msg {
  padding: 8px 13px; border: 2px solid var(--bq-ink); border-radius: 10px;
  font-size: 13px; font-weight: 900;
}
.bq-theme .verify-pill { background: var(--bq-cream2); color: var(--bq-ink); }
.bq-theme .verified-pill { background: var(--bq-green); color: var(--bq-ink); }
.bq-theme .warn-msg { background: #ffd9d6; color: #8a1a12; border-color: var(--bq-red); font-weight: 700; }

/* ============================================================
   Judul seksi
   ============================================================ */
.bq-sec { padding: clamp(28px, 5vw, 60px) 0 0; }
.bq-theme #tools { padding-bottom: clamp(34px, 5vw, 60px); }
.bq-sec-head {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: baseline; justify-content: space-between;
  margin-bottom: 22px;
}
.bq-sec-head h2 { margin: 0; font-size: clamp(28px, 3.6vw, 40px); }
.bq-sec-sub {
  font-size: 12px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bq-muted);
}
.bq-sec-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bq-pill-slot:not(:empty) { margin: 0 0 24px; }

/* ============================================================
   Panel "subscribe dulu"
   ============================================================ */
.bq-locknote {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  align-items: center;
  padding: clamp(24px, 3.4vw, 40px);
  border: 3px dashed var(--bq-ink); border-radius: 24px;
  background: var(--bq-paper);
  margin-bottom: 26px;
}
.bq-locknote h2 { margin: 12px 0 8px; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.05; }
.bq-locknote p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--bq-body); max-width: 44ch; }
.bq-locknote-tag {
  display: inline-block; padding: 4px 11px;
  border: 2px solid var(--bq-ink); border-radius: 9px; background: var(--bq-green);
  font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.bq-locknote-cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; text-align: right; }
.bq-locknote-cta small { font-size: 13px; font-weight: 700; color: var(--bq-muted); }

/* Panel ini hilang sendiri begitu gate.js menandai kartu gate terverifikasi. */
body.bq-theme:has(.gate-card.gate-verified) .bq-locknote { display: none; }

/* ============================================================
   Katalog
   ============================================================ */
.bq-theme .catalog { padding: clamp(12px, 3vw, 28px) 0 clamp(36px, 6vw, 68px); }
.bq-theme .catalog-head {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: baseline; justify-content: space-between;
  border: 0; padding: 0; margin-bottom: 20px;
}
.bq-theme .catalog-head h2 { font-size: clamp(28px, 3.6vw, 40px); margin: 0; }
.bq-theme .catalog-head p {
  font-size: 12px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bq-muted); margin: 0;
}

.bq-theme .filter-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bq-theme .filter-group input,
.bq-theme .filter-group select {
  padding: 10px 16px;
  border: var(--bq-b); border-radius: 999px;
  background: var(--bq-paper); color: var(--bq-ink);
  font-family: inherit; font-size: 15px; font-weight: 600;
  outline: none;
}
.bq-theme .filter-group input::placeholder { color: var(--bq-faint); font-weight: 600; }
.bq-theme .filter-group input:focus,
.bq-theme .filter-group select:focus { box-shadow: var(--bq-sh-sm); }

.bq-theme .tabs { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0 0 14px; }
.bq-theme .tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  border: var(--bq-b); border-radius: 999px;
  background: var(--bq-paper); color: var(--bq-ink);
  font-family: inherit; font-size: 14px; font-weight: 800;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.bq-theme .tab:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--bq-ink); }
.bq-theme .tab.active { background: var(--bq-acc); box-shadow: var(--bq-sh-sm); }
.bq-theme .tab .count {
  padding: 1px 7px; border-radius: 999px;
  background: var(--bq-cream2); color: var(--bq-ink);
  font-size: 11px; font-weight: 900;
}
.bq-theme .tab.active .count { background: var(--bq-ink); color: var(--bq-cream); }

/* Pill kategori (dibangun gate.js dari <select id="categoryFilter">) */
.bq-theme .cat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.bq-theme .cat-pill {
  padding: 9px 15px;
  border: var(--bq-b); border-radius: 999px;
  background: var(--bq-paper); color: var(--bq-ink);
  font-family: inherit; font-size: 14px; font-weight: 800;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.bq-theme .cat-pill:hover { background: var(--bq-cream2); }
.bq-theme .cat-pill.active { background: var(--bq-acc); box-shadow: var(--bq-sh-sm); }
.bq-theme .cat-pill:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--bq-ink); }

/* ============================================================
   Kartu tool
   ============================================================ */
.bq-theme .tool-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.bq-theme .tool-card {
  display: flex; flex-direction: column;
  border: var(--bq-b); border-radius: 18px;
  background: var(--bq-paper);
  box-shadow: var(--bq-sh);
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.bq-theme .tool-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--bq-ink);
  border-color: var(--bq-ink);
}
/* Spesifisitasnya sama dengan .bq-theme .tool-card di atas, jadi harus ditulis
   ulang di sini — kalau tidak, "Load More" tidak pernah menyembunyikan kartu. */
.bq-theme .tool-card.card-hidden { display: none; }
.bq-theme .tool-card.premium { border-radius: 20px; box-shadow: var(--bq-sh-md); }
.bq-theme .tool-card.premium:hover { box-shadow: 8px 8px 0 var(--bq-ink); }

.bq-theme .tool-thumb {
  aspect-ratio: 16/9; position: relative;
  border-bottom: var(--bq-b); border-radius: 0;
  background: repeating-linear-gradient(135deg, var(--bq-cream2) 0 8px, var(--bq-cream) 8px 16px);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: #7a6952;
}
.bq-theme .tool-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bq-theme .tool-thumb .type-badge {
  top: 9px; left: 9px; right: auto;
  padding: 3px 9px; border: 2px solid var(--bq-ink); border-radius: 8px;
  font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.bq-theme .tool-thumb .type-badge.free { background: var(--bq-green); color: var(--bq-ink); }
.bq-theme .tool-thumb .type-badge.paid { background: #ffd9a0; color: var(--bq-ink); }
.bq-theme .tool-thumb .new-badge {
  top: 9px; right: 9px; left: auto;
  padding: 3px 9px; border-radius: 8px;
  background: var(--bq-red); color: #fff;
  font-size: 10px; font-weight: 900; letter-spacing: .08em;
}

.bq-theme .tool-body { padding: 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bq-theme .tool-title {
  font-family: "Baloo 2", sans-serif;
  font-size: 17px; font-weight: 800; line-height: 1.2;
  margin: 0; text-wrap: pretty;
  /* style.css memotong judul ke satu baris (-webkit-line-clamp: 1) —
     dibatalkan di sini supaya nama tool tampil utuh. */
  display: block; -webkit-line-clamp: none; overflow: visible;
}
.bq-theme .tool-desc { font-size: 13.5px; line-height: 1.5; color: var(--bq-body); margin: 0; }
.bq-theme .tool-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 12px;
  border-top: 3px dashed var(--bq-dash);
}
.bq-theme .tool-host {
  padding: 0; border: 0; border-radius: 0; background: none;
  font-size: 10px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bq-faint);
}
.bq-theme .tool-price { font-family: "Baloo 2", sans-serif; font-size: 17px; font-weight: 800; color: var(--bq-ink); }
.bq-theme .tool-action {
  padding: 0; border-radius: 0; background: none;
  font-size: 13px; font-weight: 900; color: var(--bq-ink);
}
.bq-theme .tool-action:hover { background: none; color: #a35c00; }
.bq-theme .tool-card.locked .tool-action { background: none; color: var(--bq-faint); }
.bq-cat {
  padding: 3px 9px; border: 2px solid var(--bq-ink); border-radius: 8px;
  background: var(--bq-cream2); color: var(--bq-ink);
  font-size: 9.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
.bq-cat-row { display: flex; gap: 5px; flex-wrap: wrap; }
.bq-theme .tool-card.locked::before {
  padding: 5px 12px;
  border: 2px solid var(--bq-ink); border-radius: 9px;
  background: var(--bq-acc); color: var(--bq-ink);
  font-size: 10px; font-weight: 900; letter-spacing: .08em;
  box-shadow: var(--bq-sh-sm);
}
.bq-theme .tool-card.locked .tool-thumb { filter: grayscale(.6) blur(3px); }
.bq-theme .tool-card.premium .tool-price { font-size: 17px; color: var(--bq-ink); font-weight: 800; }

/* Navigasi halaman di bawah tiap grid */
.bq-pager {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; align-items: center;
  margin: 26px 0 0;
}
.bq-page-btn {
  min-width: 44px; height: 44px; padding: 0 12px;
  border: var(--bq-b); border-radius: 13px;
  background: var(--bq-paper); color: var(--bq-ink);
  font-family: "Baloo 2", "Nunito Sans", sans-serif;
  font-size: 16px; font-weight: 800;
  box-shadow: var(--bq-sh-sm);
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.bq-page-btn:hover:not(:disabled) { background: var(--bq-cream2); }
.bq-page-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--bq-ink); }
.bq-page-btn.active { background: var(--bq-acc); }
.bq-page-btn:disabled { opacity: .35; cursor: not-allowed; }
.bq-page-btn.gap {
  min-width: 28px; padding: 0;
  border: 0; background: none; box-shadow: none;
  opacity: 1; color: var(--bq-muted); cursor: default;
}
.bq-theme .tool-grid .bq-empty {
  grid-column: 1 / -1; padding: 46px 0; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--bq-muted);
}

/* ============================================================
   Komunitas & donate
   ============================================================ */
.bq-comm {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(278px, 100%), 1fr));
  padding-bottom: clamp(44px, 7vw, 84px);
}
.bq-comm-card {
  padding: clamp(22px, 3vw, 34px);
  border: var(--bq-b); border-radius: 22px;
  box-shadow: 6px 6px 0 var(--bq-ink);
}
.bq-comm-card h3 { margin: 10px 0 8px; font-size: clamp(22px, 2.6vw, 29px); }
.bq-comm-card p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; max-width: 42ch; }
.bq-kicker { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.bq-comm-discord { background: var(--bq-sky); }
.bq-comm-discord .bq-kicker { color: #3a4a8a; }
.bq-comm-discord p { color: #2b3556; }
.bq-comm-donate { background: var(--bq-acc); }
.bq-comm-donate .bq-kicker { color: #6b4700; }
.bq-comm-donate p { color: #3f2f16; }

/* ============================================================
   Footer
   ============================================================ */
.bq-theme .site-footer {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  border-top: var(--bq-b); border-radius: 0;
  background: var(--bq-ink); color: var(--bq-cream);
  padding: 26px clamp(14px, 4vw, 44px);
  font-size: 13px; font-weight: 700; text-align: left;
  margin-top: auto;
}
.bq-foot-links { display: flex; flex-wrap: wrap; gap: 18px; }
.bq-theme .site-footer a { color: var(--bq-acc); }
.bq-theme .site-footer a:hover { color: var(--bq-acc-hi); }

/* ============================================================
   Modal + detail tool (fragment tool.php dimuat ke dalam modal)
   ============================================================ */
.bq-theme .modal-backdrop { background: rgba(36, 28, 18, .55); }
.bq-theme .modal-box {
  border: var(--bq-b); border-radius: 22px;
  background: var(--bq-cream);
  box-shadow: var(--bq-sh-lg);
}
.bq-theme .modal-close {
  width: 38px; height: 38px;
  border: var(--bq-b); border-radius: 12px;
  background: var(--bq-paper); color: var(--bq-ink);
  font-weight: 900; box-shadow: var(--bq-sh-sm);
}
.bq-theme .modal-close:hover { background: var(--bq-acc); color: var(--bq-ink); }
.bq-theme .modal-spinner { border-color: var(--bq-dash); border-top-color: var(--bq-ink); }

.bq-theme .modal-box { max-width: 860px; box-shadow: 9px 9px 0 var(--bq-ink); }
.bq-theme .modal-content { padding: clamp(18px, 3vw, 30px); }
.bq-theme .modal-content .detail-grid { padding: 0; }
.bq-theme .modal-content .detail-extra { margin-top: clamp(18px, 2.4vw, 26px); }

/* Halaman detail tool */
.bq-detail-wrap { padding-top: clamp(20px, 4vw, 44px); padding-bottom: clamp(44px, 7vw, 84px); }
.bq-theme .detail-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 22px; padding: 9px 16px;
  border: var(--bq-b); border-radius: 12px;
  background: var(--bq-paper); color: var(--bq-ink);
  font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: var(--bq-sh-sm);
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.bq-theme .detail-back:hover { background: var(--bq-cream2); color: var(--bq-ink); }
.bq-theme .detail-back:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--bq-ink); }

/* Menumpuk, bukan dua kolom: galeri dulu, judul dan kotak beli di bawahnya. */
.bq-theme .detail-grid { display: block; animation: bq-rise .4s ease both; }
.bq-theme .detail-media { margin-bottom: clamp(22px, 3vw, 34px); }

.bq-theme .detail-hero {
  aspect-ratio: 16/9;
  border: var(--bq-b); border-radius: 20px;
  background: repeating-linear-gradient(135deg, var(--bq-cream2) 0 10px, var(--bq-cream) 10px 20px);
  box-shadow: 6px 6px 0 var(--bq-ink);
  overflow: hidden;
}
.bq-theme .detail-hero img,
.bq-theme .detail-hero iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }

.bq-theme .detail-info h1 {
  margin: 14px 0 12px;
  font-size: clamp(28px, 4.4vw, 50px); line-height: 1; text-wrap: balance;
}
.bq-theme .detail-tag { display: inline-block; background: #ffd9a0; font-size: 11px; }

/* Kotak harga / aksi — beton tebal seperti di desain */
.bq-theme .download-box,
.bq-theme .gate-required {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  margin: 24px 0 0; padding: 18px 20px;
  border: var(--bq-b); border-radius: 18px;
  background: var(--bq-paper); box-shadow: var(--bq-sh-md);
  text-align: left;
}
.bq-theme .download-box .label {
  font-size: 11px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bq-muted);
}
.bq-theme .download-box .url { color: var(--bq-muted); }
.bq-theme .detail-price {
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(24px, 3vw, 30px); font-weight: 800; line-height: 1;
}
.bq-theme .detail-note {
  flex: 1 0 100%; margin: 0;
  font-size: 13px; font-weight: 700; color: var(--bq-muted);
}
.bq-theme .download-box strong { color: var(--bq-ink); }
.bq-theme .gate-required { display: block; padding: 24px 22px; }
.bq-theme .gate-required h2 { margin-bottom: 8px; font-size: 21px; color: var(--bq-ink); }
.bq-theme .gate-required p { margin-bottom: 16px; font-size: 15px; color: var(--bq-body); }

/* Deskripsi + changelog, lebar penuh di bawah grid */
.bq-theme .detail-extra { margin-top: clamp(28px, 4vw, 46px); }
.bq-theme .detail-extra .desc {
  margin: 0 0 24px;
  padding: clamp(20px, 2.6vw, 28px);
  border: var(--bq-b); border-radius: 20px;
  background: var(--bq-paper); box-shadow: var(--bq-sh);
  color: var(--bq-body); font-size: 15px; line-height: 1.7;
  white-space: pre-wrap;
}
.bq-theme .detail-extra .desc strong { color: var(--bq-ink); }
.bq-theme .detail-extra .desc ul { padding-left: 1.2em; }
.bq-theme .detail-extra .desc li { margin-bottom: .35em; }
.bq-theme .cat-pill {
  border: 2px solid var(--bq-ink); border-radius: 999px;
  background: var(--bq-paper); color: var(--bq-ink); font-weight: 800;
}
.bq-theme .cat-pill.active { background: var(--bq-acc); color: var(--bq-ink); }
/* Carousel: bingkai keras di gambar utama, thumbnail jadi kotak terpisah di bawah */
.bq-theme .detail-hero.hero-carousel {
  border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
.bq-theme .carousel-main {
  border: var(--bq-b); border-radius: 20px;
  background: var(--bq-cream2);
  box-shadow: 6px 6px 0 var(--bq-ink);
  overflow: hidden;
}
.bq-theme .carousel-thumbs {
  display: flex; gap: 10px; margin-top: 16px; padding: 0;
  background: none; overflow-x: auto;
}
.bq-theme .c-thumb {
  flex: none; width: 96px; height: 60px; padding: 0;
  border: var(--bq-b); border-radius: 13px;
  background: var(--bq-cream2); overflow: hidden;
}
.bq-theme .c-thumb-yt { border-radius: 0; font-size: 22px; }
.bq-theme .c-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bq-theme .c-thumb.active { box-shadow: var(--bq-sh-sm); }
.bq-theme .c-arrow {
  width: 42px; height: 42px;
  border: var(--bq-b); border-radius: 12px;
  background: var(--bq-paper); color: var(--bq-ink);
  font-family: "Baloo 2", sans-serif; font-size: 20px; font-weight: 800;
  box-shadow: var(--bq-sh-sm); backdrop-filter: none;
}
.bq-theme .c-arrow:hover { background: var(--bq-acc); }
.bq-theme .c-arrow:active { transform: translateY(-50%) translate(3px, 3px); box-shadow: 0 0 0 var(--bq-ink); }
.bq-theme .c-counter {
  border: 2px solid var(--bq-ink); border-radius: 9px;
  background: var(--bq-paper); color: var(--bq-ink);
  font-size: 11px; font-weight: 900; backdrop-filter: none;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 720px) {
  /* Topbar tetap satu baris: catatan kiri disembunyikan, sisakan bahasa + login. */
  .bq-topbar { flex-wrap: nowrap; gap: 10px; padding: 7px 14px; }
  .bq-tb-left { display: none; }
  .bq-tb-right { margin-left: auto; gap: 10px; }

  .bq-head { padding: 10px 14px; gap: 10px; }

  /* Baris 1: logo + tombol "Order saya". Baris 2: menu. */
  .bq-logo { order: 0; flex: 1; min-width: 0; gap: 10px; }
  .bq-logo-mark { width: 38px; height: 38px; border-radius: 12px; font-size: 21px; }
  .bq-logo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
  .bq-logo-sub { font-size: 10px; letter-spacing: .06em; }
  .bq-head .bq-nav-cta { order: 1; margin-left: auto; padding: 9px 14px; font-size: 13px; }

  /* Menu satu baris yang bisa digeser — lebih rapi daripada patah dua baris. */
  .bq-nav {
    order: 2; flex: 1 0 100%;
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-left: 0; justify-content: flex-start; gap: 2px; font-size: 13px;
  }
  .bq-nav::-webkit-scrollbar { display: none; }
  .bq-nav a { padding: 7px 10px; white-space: nowrap; }
}

/* Di layar paling sempit, rapatkan menu sedikit supaya keempat item masih
   muat satu baris tanpa perlu digeser. */
@media (max-width: 400px) {
  .bq-nav { gap: 0; font-size: 12.5px; }
  .bq-nav a { padding: 7px 7px; }

  /* Dua produk per baris di HP, bukan satu. */
  .bq-theme .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bq-theme .tool-body { padding: 12px; gap: 6px; }
  .bq-theme .tool-title { font-size: 15px; }
  .bq-theme .tool-desc { font-size: 12.5px; }
  .bq-theme .tool-price { font-size: 15px; }
  .bq-theme .tool-action { font-size: 11px; }
  .bq-theme .tool-host { font-size: 9px; }
  .bq-theme .tool-card.locked::before { padding: 4px 7px; font-size: 8px; }
  .bq-cat { font-size: 8.5px; padding: 2px 7px; }
  .bq-pager { gap: 6px; }
  .bq-page-btn { min-width: 38px; height: 38px; padding: 0 9px; font-size: 15px; }

  .bq-locknote-cta { align-items: stretch; text-align: left; }

  /* Badge turun ke barisnya sendiri supaya nama & tagline tidak terjepit. */
  .bq-theme .gate-header { flex-wrap: wrap; }
  .bq-theme .badge-subscriber { order: 3; flex-basis: 100%; margin-left: 0; }
}

/* ============================================================
   Halaman formulir & panel (checkout, donate, invoice, client)
   Kelas-kelasnya masih didefinisikan inline di tiap halaman —
   blok ini yang menyeragamkannya dengan tema baru.
   ============================================================ */
.bq-form-wrap { padding-top: clamp(20px, 4vw, 44px); padding-bottom: clamp(44px, 7vw, 84px); }
.bq-theme .bq-form-card { max-width: 560px; margin: 0 auto; }
.bq-theme .bq-form-card .gate-header {
  display: block; text-align: center;
  margin-bottom: 24px; padding-bottom: 20px;
  border-bottom: 3px dashed var(--bq-dash);
}
.bq-theme .bq-form-card .gate-title { font-size: clamp(24px, 3vw, 32px); }
.bq-theme .bq-form-card .gate-subtitle { font-size: 14px; }

/* Kolom isian */
.bq-theme .form-group { margin-bottom: 18px; }
.bq-theme .form-group label {
  display: block; margin-bottom: 7px;
  font-size: 11px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bq-muted);
}
.bq-theme .form-control {
  width: 100%; padding: 12px 16px;
  border: var(--bq-b); border-radius: 13px;
  background: var(--bq-paper); color: var(--bq-ink);
  font-family: inherit; font-size: 15px; font-weight: 600;
  outline: none;
}
.bq-theme .form-control::placeholder { color: var(--bq-faint); font-weight: 600; }
.bq-theme .form-control:focus { border-color: var(--bq-ink); box-shadow: var(--bq-sh-sm); }

/* Ringkasan order / rincian invoice */
.bq-theme .summary-box,
.bq-theme .invoice-detail {
  padding: 16px 18px; margin-bottom: 24px;
  border: var(--bq-b); border-radius: 16px;
  background: var(--bq-cream); box-shadow: var(--bq-sh-sm);
}
.bq-theme .summary-box .flex,
.bq-theme .invoice-detail .row {
  display: flex; justify-content: space-between; gap: 12px;
  margin-bottom: 8px; font-size: 14px;
}
.bq-theme .summary-box .total {
  margin-bottom: 0; padding-top: 10px;
  border-top: 3px dashed var(--bq-dash);
  font-family: "Baloo 2", sans-serif; font-size: 22px; font-weight: 800; color: var(--bq-ink);
}
.bq-theme .invoice-detail .label { color: var(--bq-muted); font-weight: 700; }
.bq-theme .invoice-detail .value { color: var(--bq-ink); font-weight: 800; }
.bq-theme .total-amount {
  font-family: "Baloo 2", sans-serif;
  font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: var(--bq-ink);
}

/* Status & badge */
.bq-theme .status-badge,
.bq-theme .badge {
  display: inline-block; padding: 5px 13px;
  border: 2px solid var(--bq-ink); border-radius: 10px;
  font-size: 12px; font-weight: 900; letter-spacing: .04em;
}
.bq-theme .status-pending { background: var(--bq-acc); color: var(--bq-ink); }
.bq-theme .status-completed,
.bq-theme .badge-paid { background: var(--bq-green); color: var(--bq-ink); }
.bq-theme .badge-pending { background: var(--bq-cream2); color: var(--bq-ink); }
.bq-theme .badge-expired { background: #ffd9d6; color: #8a1a12; }

/* Gerbang & identitas Discord */
.bq-theme .btn-discord {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px;
  border: var(--bq-b); border-radius: 13px;
  background: var(--bq-blurple); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 900;
  box-shadow: var(--bq-sh);
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.bq-theme .btn-discord:hover { background: #6f7bff; color: #fff; }
.bq-theme .btn-discord:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--bq-ink); }

.bq-theme .discord-gate { text-align: center; padding: 30px 0 18px; }
.bq-theme .discord-gate .dg-icon { font-size: 48px; margin-bottom: 12px; }
.bq-theme .discord-gate h3 { font-size: 22px; margin: 0 0 8px; }
.bq-theme .discord-gate p { color: var(--bq-body); font-size: 15px; margin: 0 0 22px; }
.bq-theme .discord-verified {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: var(--bq-b); border-radius: 16px;
  background: var(--bq-sky); box-shadow: var(--bq-sh-sm);
}
.bq-theme .discord-verified img { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; }
.bq-theme .discord-verified .dv-name { font-weight: 800; font-size: 15px; color: var(--bq-ink); }
.bq-theme .discord-verified .dv-sub { font-size: 12px; color: #3a4a8a; }
.bq-theme .discord-verified .dv-badge {
  display: flex; align-items: center; gap: 5px;
  margin-left: auto; flex-shrink: 0; padding: 3px 9px;
  border: 2px solid var(--bq-ink); border-radius: 9px;
  background: var(--bq-blurple); color: #fff;
  font-size: 11px; font-weight: 900; white-space: nowrap;
}

/* QRIS */
.bq-theme .qr-container,
.bq-theme #qrisCode {
  border: var(--bq-b) !important; border-radius: 18px !important;
  background: var(--bq-paper) !important; box-shadow: var(--bq-sh-md);
}

/* Pill nominal donasi */
.bq-theme .btn-amount-pill {
  padding: 8px 14px;
  border: 2px solid var(--bq-ink); border-radius: 999px;
  background: var(--bq-paper); color: var(--bq-ink);
  font-family: inherit; font-size: 13px; font-weight: 800;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.bq-theme .btn-amount-pill:hover {
  background: var(--bq-acc); color: var(--bq-ink);
  transform: none; box-shadow: var(--bq-sh-sm);
}
.bq-theme .btn-donate { background: var(--bq-acc); color: var(--bq-ink); border: var(--bq-b); }
.bq-theme .btn-donate:hover { background: var(--bq-acc-hi); color: var(--bq-ink); }
.bq-theme .donate-header { text-align: center; margin-bottom: 26px; }
.bq-theme .donate-icon { font-size: 46px; margin-bottom: 8px; display: inline-block; }

/* Panel client */
.bq-theme .client-wrap { max-width: 980px; padding-top: clamp(20px, 4vw, 44px); padding-bottom: clamp(44px, 7vw, 84px); }
.bq-theme .client-header { margin-bottom: 26px; }
.bq-theme .client-brand { font-family: "Baloo 2", sans-serif; font-size: 22px; font-weight: 800; color: var(--bq-ink); }
.bq-theme .client-user {
  border: var(--bq-b); border-radius: 999px; background: var(--bq-paper);
  box-shadow: var(--bq-sh-sm);
}
.bq-theme .stats-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.bq-theme .stat-card {
  padding: 18px; text-align: center;
  border: var(--bq-b); border-radius: 18px;
  background: var(--bq-paper); box-shadow: var(--bq-sh);
}
.bq-theme .stat-card .sv { font-family: "Baloo 2", sans-serif; font-size: 30px; font-weight: 800; color: var(--bq-ink); }
.bq-theme .stat-card .sk { font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--bq-muted); }
.bq-theme .section-title { font-family: "Baloo 2", sans-serif; font-size: 24px; font-weight: 800; }
.bq-theme .alert {
  padding: 13px 16px; margin-bottom: 18px;
  border: var(--bq-b); border-radius: 14px; box-shadow: var(--bq-sh-sm);
  font-weight: 700;
}
.bq-theme .alert-ok { background: var(--bq-green); color: var(--bq-ink); }
.bq-theme .alert-err { background: #ffd9d6; color: #8a1a12; }
.bq-theme .table-wrap,
.bq-theme .orders-table,
.bq-theme .claim-card,
.bq-theme .empty-orders,
.bq-theme .tool-client-card {
  border: var(--bq-b); border-radius: 18px;
  background: var(--bq-paper); box-shadow: var(--bq-sh);
  overflow: hidden;
}
.bq-theme .orders-table { border-collapse: collapse; width: 100%; }
.bq-theme .orders-table th {
  background: var(--bq-cream2); color: var(--bq-ink);
  font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
.bq-theme .orders-table td { border-top: 2px dashed var(--bq-dash); }
.bq-theme .order-id { font-family: "SF Mono", Menlo, monospace; font-size: 12px; color: var(--bq-muted); }
.bq-theme .tool-cards-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.bq-theme .tc-title { font-family: "Baloo 2", sans-serif; font-weight: 800; }
.bq-theme .tc-btn { border: var(--bq-b); border-radius: 12px; background: var(--bq-acc); color: var(--bq-ink); font-weight: 900; box-shadow: var(--bq-sh-sm); }
.bq-theme .tc-btn:hover { background: var(--bq-acc-hi); color: var(--bq-ink); }

/* ============================================================
   Halaman donasi — "Traktir kopi buat dev"
   ============================================================ */
.bq-donate-wrap { padding-top: clamp(20px, 4vw, 44px); padding-bottom: clamp(44px, 7vw, 84px); max-width: 1080px; }
.bq-donate-grid {
  display: grid; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  align-items: start;
  animation: bq-rise .4s ease both;
}

@keyframes bq-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-8px) rotate(3deg); }
}
.bq-coffee { display: inline-block; font-size: 54px; animation: bq-bob 3s ease-in-out infinite; }
.bq-theme .bq-donate-title { margin: 10px 0 0; font-size: clamp(32px, 5vw, 54px); line-height: 1; }
.bq-donate-lead { margin: 16px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.65; color: var(--bq-body); }

/* Daftar supporter */
.bq-supporters {
  margin-top: 26px; padding: 20px;
  border: var(--bq-b); border-radius: 18px;
  background: var(--bq-paper); box-shadow: var(--bq-sh-md);
}
.bq-supporter-list { display: grid; gap: 12px; margin-top: 14px; }
.bq-supporter + .bq-supporter { padding-top: 12px; border-top: 3px dashed var(--bq-dash); }
.bq-supporter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bq-supporter-name { font-size: 15px; font-weight: 700; }
.bq-supporter-name small { margin-left: 4px; font-size: 11px; font-weight: 900; color: var(--bq-muted); }
.bq-supporter-amt { font-family: "Baloo 2", sans-serif; font-size: 17px; font-weight: 800; white-space: nowrap; }
.bq-supporter-msg { margin: 6px 0 0; font-size: 13px; font-style: italic; color: var(--bq-muted); }

/* Kartu formulir */
.bq-donate-form {
  padding: clamp(20px, 2.6vw, 30px);
  border: var(--bq-b); border-radius: 22px;
  background: var(--bq-paper); box-shadow: var(--bq-sh-lg);
}
.bq-theme .bq-donate-form h2 { margin: 0 0 16px; font-size: 24px; }

.bq-amount-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr)); }
.bq-amount {
  padding: 16px 10px;
  border: var(--bq-b); border-radius: 14px;
  background: var(--bq-paper); color: var(--bq-ink);
  font-family: "Baloo 2", sans-serif; font-size: 18px; font-weight: 800;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.bq-amount:hover { background: var(--bq-cream2); }
.bq-amount:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--bq-ink); }
.bq-amount.active { background: var(--bq-acc); box-shadow: var(--bq-sh-sm); }

.bq-theme .bq-amount-input {
  font-family: "Baloo 2", sans-serif; font-size: 22px; font-weight: 800;
  background: var(--bq-cream);
}
.bq-method-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bq-method {
  padding: 9px 14px;
  border: var(--bq-b); border-radius: 11px;
  background: var(--bq-cream);
  font-size: 14px; font-weight: 800;
}
.bq-theme .bq-donate-submit {
  width: 100%; margin-top: 22px; padding: 15px;
  border-radius: 14px; font-size: 17px;
  box-shadow: var(--bq-sh-md);
}
.bq-theme .bq-donate-submit:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--bq-ink); }
.bq-donate-note {
  margin: 14px 0 0; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--bq-muted);
}

/* Aktivitas donasi */
.bq-activity { margin-top: clamp(32px, 5vw, 56px); }
.bq-theme .bq-activity h3 { margin-bottom: 14px; }
.bq-activity-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.bq-activity-item {
  padding: 13px 15px;
  border: var(--bq-b); border-radius: 14px;
  background: var(--bq-paper); box-shadow: var(--bq-sh-sm);
  font-size: 13.5px;
}


/* ============================================================
   Watermark di kartu komunitas — SVG ditanam langsung supaya
   tidak perlu file gambar tambahan.
   ============================================================ */
.bq-comm-card { position: relative; overflow: hidden; }
.bq-comm-card > * { position: relative; z-index: 1; }
.bq-comm-card::after {
  content: '';
  position: absolute; right: -22px; bottom: -30px;
  width: 200px; height: 200px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: .15; transform: rotate(-12deg);
  pointer-events: none;
}
.bq-comm-discord::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20127.14%2096.36'%3E%3Cpath%20fill='%23241c12'%20d='M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z'/%3E%3C/svg%3E"); }
.bq-comm-donate::after  { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20fill='none'%20stroke='%23241c12'%20stroke-width='6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%2042h52v24a20%2020%200%200%201-20%2020H36a20%2020%200%200%201-20-20z'/%3E%3Cpath%20d='M68%2048h8a12%2012%200%200%201%200%2024h-8'/%3E%3Cpath%20d='M32%2012c-4%205%204%208%200%2014'/%3E%3Cpath%20d='M50%2010c-4%205%204%208%200%2014'/%3E%3Cpath%20d='M22%2092h48'/%3E%3C/svg%3E"); opacity: .18; }

@media (max-width: 720px) {
  .bq-comm-card::after { width: 150px; height: 150px; right: -18px; bottom: -24px; }
}

/* ============================================================
   PANEL ADMIN — tema yang sama, dipadatkan untuk alat kerja.
   Border 2px dan bayangan lebih kecil dipakai di baris tabel &
   isian supaya data tetap gampang dipindai.
   ============================================================ */
body.bq-admin {
  display: block; min-height: 0;
  background-image: none;
  background-color: var(--bq-cream);
}

/* Sidebar */
.bq-admin .sidebar {
  background: var(--bq-ink); color: var(--bq-cream);
  border-right: var(--bq-b);
}
.bq-admin .sidebar .brand { border-bottom: 2px solid #3a2f20; }
.bq-admin .sidebar .brand-logo {
  border: 2px solid var(--bq-cream); border-radius: 12px;
  background: var(--bq-acc); color: var(--bq-ink);
  font-family: "Baloo 2", sans-serif; font-weight: 800;
}
.bq-admin .sidebar .brand-text {
  font-family: "Baloo 2", sans-serif; font-weight: 800;
  letter-spacing: .04em; color: var(--bq-cream);
}
.bq-admin .sidebar .menu-label {
  font-size: 10px; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: #8f8069;
}
.bq-admin .sidebar nav a { border-radius: 11px; color: #d8ccb9; font-weight: 700; }
.bq-admin .sidebar nav a:hover { background: #3a2f20; color: var(--bq-cream); }
.bq-admin .sidebar nav a.active { background: var(--bq-acc); color: var(--bq-ink); font-weight: 800; }
.bq-admin .sidebar .foot { border-top: 2px solid #3a2f20; }
.bq-admin .sidebar .foot a { color: var(--bq-acc); font-weight: 700; }
.bq-admin .sidebar .foot a:hover { color: var(--bq-acc-hi); }

/* Topbar & area isi */
.bq-admin .admin-topbar { background: var(--bq-cream); border-bottom: var(--bq-b); }
.bq-admin .admin-topbar .user-name { font-weight: 800; color: var(--bq-ink); }
.bq-admin .admin-topbar .user-role {
  font-size: 10px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bq-muted);
}
.bq-admin .admin-topbar .user-avatar {
  border: 2px solid var(--bq-ink); border-radius: 11px;
  background: var(--bq-acc); color: var(--bq-ink);
  font-family: "Baloo 2", sans-serif; font-weight: 800;
  box-shadow: 2px 2px 0 var(--bq-ink);
}
.bq-admin .admin-content { background: var(--bq-cream); }

.bq-admin .page-head h1 { font-family: "Baloo 2", sans-serif; font-size: 28px; font-weight: 800; }
.bq-admin .page-head .crumbs {
  font-size: 11px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bq-muted);
}

/* Kartu */
.bq-admin .card,
.bq-admin .pcard,
.bq-admin .stat,
.bq-admin .table-wrap {
  border: var(--bq-b); border-radius: 16px;
  background: var(--bq-paper); box-shadow: var(--bq-sh-sm);
}
.bq-admin .card-head {
  border-bottom: 2px dashed var(--bq-dash);
  font-family: "Baloo 2", sans-serif; font-weight: 800; color: var(--bq-ink);
}
.bq-admin .card-head .lead { font-family: inherit; font-weight: 600; color: var(--bq-muted); }
.bq-admin .pcard-head {
  font-size: 11px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bq-muted);
}
.bq-admin .pcard-head svg { color: var(--bq-ink); }

/* Statistik */
.bq-admin .stat .label {
  font-size: 10px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bq-muted);
}
.bq-admin .stat .value { font-family: "Baloo 2", sans-serif; font-weight: 800; color: var(--bq-ink); }
.bq-admin .stat .value.accent { color: #a35c00; }

/* Isian */
.bq-admin .form-grid label,
.bq-admin .fl {
  font-size: 10px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bq-muted);
}
.bq-admin .form-grid input,
.bq-admin .form-grid select,
.bq-admin .form-grid textarea,
.bq-admin .fi {
  border: 2px solid var(--bq-ink); border-radius: 10px;
  background: var(--bq-paper); color: var(--bq-ink);
  font-family: inherit; font-weight: 600;
}
.bq-admin .form-grid input:focus,
.bq-admin .form-grid select:focus,
.bq-admin .form-grid textarea:focus,
.bq-admin .fi:focus {
  border-color: var(--bq-ink); box-shadow: 2px 2px 0 var(--bq-ink); outline: none;
}
.bq-admin .form-grid .help { color: var(--bq-muted); font-weight: 600; }
.bq-admin .form-actions { border-top: 2px dashed var(--bq-dash); }

/* Tombol — lebih ringkas daripada sisi publik */
.bq-admin .btn {
  padding: 9px 16px; border-width: 2px; border-radius: 11px;
  font-size: 13.5px; box-shadow: 2px 2px 0 var(--bq-ink);
}
.bq-admin .btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--bq-ink); }
.bq-admin .btn-sm {
  padding: 5px 12px;
  border: 2px solid var(--bq-ink); border-radius: 9px;
  background: var(--bq-paper); color: var(--bq-ink);
  font-family: inherit; font-size: 12px; font-weight: 800;
  box-shadow: 2px 2px 0 var(--bq-ink);
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.bq-admin .btn-sm:hover { background: var(--bq-cream2); }
.bq-admin .btn-sm:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--bq-ink); }
.bq-admin .btn-sm.btn-primary { background: var(--bq-acc); }
.bq-admin .btn-sm.edit { background: var(--bq-cream2); color: var(--bq-ink); border-color: var(--bq-ink); }
.bq-admin .btn-sm.view { background: var(--bq-paper); color: var(--bq-ink); border-color: var(--bq-ink); }
.bq-admin .btn-sm.danger,
.bq-admin .btn-sm.btn-danger { background: #ffd9d6; color: #8a1a12; border-color: var(--bq-ink); }
.bq-admin .btn-outline { background: var(--bq-paper); }

/* Tabel */
.bq-admin table th,
.bq-admin .ltable th {
  background: var(--bq-cream2); color: var(--bq-ink);
  font-size: 10.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 2px solid var(--bq-ink);
}
.bq-admin table td,
.bq-admin .ltable td { border-bottom: 2px dashed var(--bq-dash); }
.bq-admin .ltable tr:hover td { background: var(--bq-cream); }

/* Pil status */
.bq-admin .pill {
  border: 2px solid var(--bq-ink); border-radius: 9px;
  font-size: 11px; font-weight: 900;
}
.bq-admin .pill.primary { background: var(--bq-acc); color: var(--bq-ink); }
.bq-admin .pill.success { background: var(--bq-green); color: var(--bq-ink); }
.bq-admin .pill.info    { background: var(--bq-sky); color: var(--bq-ink); }
.bq-admin .pill.muted   { background: var(--bq-cream2); color: var(--bq-muted); }

/* Notifikasi */
.bq-admin .flash {
  border: var(--bq-b); border-radius: 12px;
  box-shadow: var(--bq-sh-sm); font-weight: 700;
}
.bq-admin .flash.ok  { background: var(--bq-green); color: var(--bq-ink); }
.bq-admin .flash.err { background: #ffd9d6; color: #8a1a12; }

/* Halaman login */
.bq-admin .standalone-wrap {
  min-height: 100vh;
  background-color: var(--bq-cream);
  background-image: radial-gradient(circle at center, rgba(36, 28, 18, .07) 2.4px, transparent 2.9px);
  background-size: 24px 24px;
}
.bq-admin .standalone-box {
  border: var(--bq-b); border-radius: 22px;
  background: var(--bq-paper); box-shadow: var(--bq-sh-lg);
}
.bq-admin .standalone-box .brand-logo {
  border: var(--bq-b); border-radius: 14px;
  background: var(--bq-acc); color: var(--bq-ink);
  font-family: "Baloo 2", sans-serif; font-weight: 800;
  box-shadow: var(--bq-sh-sm);
}
.bq-admin .standalone-box h1 { font-family: "Baloo 2", sans-serif; font-weight: 800; }
.bq-admin .standalone-box .lead { color: var(--bq-muted); }
.bq-admin .standalone-box label {
  font-size: 10px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bq-muted);
}
.bq-admin .standalone-box input {
  border: var(--bq-b); border-radius: 12px;
  background: var(--bq-paper); color: var(--bq-ink);
  font-family: inherit; font-weight: 600;
}
.bq-admin .standalone-box input:focus { border-color: var(--bq-ink); box-shadow: var(--bq-sh-sm); outline: none; }
.bq-admin .standalone-box button {
  border: var(--bq-b); border-radius: 13px;
  background: var(--bq-acc); color: var(--bq-ink);
  font-family: inherit; font-weight: 900;
  box-shadow: var(--bq-sh);
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.bq-admin .standalone-box button:hover { background: var(--bq-acc-hi); }
.bq-admin .standalone-box button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--bq-ink); }