/* Tema visual v2 — CSS murni (tanpa gambar/JS tambahan), ringan. Dimuat setelah base/portal/admin. */
:root{--grad-top:#2A21C9;--pad:20px}
body{background:
  radial-gradient(720px 420px at 100% 520px,rgba(56,182,255,.13),transparent 65%),
  radial-gradient(640px 460px at 0% 1000px,rgba(61,51,255,.08),transparent 65%),
  var(--bg)}

/* Header transparan di atas hero agar latar menyatu */
.site-header{background:transparent;position:relative;z-index:3}
.header-link{backdrop-filter:blur(6px);background:rgba(255,255,255,.08)}

/* HERO: dasar ungu + kilau cyan/violet + pola titik + busur logo */
.hero{position:relative;overflow:hidden;isolation:isolate;margin-top:-76px;padding-top:96px;
  border-radius:0 0 32px 32px;
  background:
    radial-gradient(55% 70% at 92% 38%,rgba(56,182,255,.40),transparent 62%),
    radial-gradient(60% 70% at 4% 108%,rgba(140,100,255,.60),transparent 64%),
    linear-gradient(170deg,#3D33FF 0%,#3D33FF 20%,var(--grad-top) 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.20) 1.2px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 80px,#000 200px,transparent 94%);
  mask-image:linear-gradient(180deg,transparent 0,transparent 80px,#000 200px,transparent 94%)}
.hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;right:0;top:0;width:min(84vw,440px);aspect-ratio:1;
  transform-origin:100% 0;animation:drift 9s ease-in-out infinite alternate;
  background:repeating-radial-gradient(circle at 100% 0,transparent 0 40px,rgba(56,182,255,.15) 40px 80px);
  -webkit-mask-image:radial-gradient(circle at 100% 0,#000 0,#000 52%,transparent 74%);
  mask-image:radial-gradient(circle at 100% 0,#000 0,#000 52%,transparent 74%)}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.06)}}
.badge{backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22)}
.trust{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.trust li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.8125rem;font-weight:600;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.trust li::before{content:"✓";color:#7fd3ff;font-weight:800}

/* Kartu pencarian */
.search-card{border:1px solid rgba(255,255,255,.7);
  box-shadow:0 36px 60px -28px rgba(31,22,160,.55),0 2px 6px rgba(23,43,77,.06)}
.search-card .input{padding-left:50px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%233D33FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E") no-repeat 16px center}
.btn-primary{background:linear-gradient(180deg,#4a41ff,#3D33FF)}

/* Kartu tagihan: aksen gradien + efek tiket */
.bill-card{position:relative;overflow:hidden;--pad:20px}
.bill-card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--purple),var(--cyan))}
.bill-card .bill-top{margin-top:6px}
.bill-meta{position:relative;border-top:2px dashed var(--line)}
.bill-meta::before,.bill-meta::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.bill-meta::before{left:calc(-1 * var(--pad) - 11px)}.bill-meta::after{right:calc(-1 * var(--pad) - 11px)}
.amount{background:linear-gradient(90deg,var(--purple),#2F8CFF);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* Langkah & footer */
.step-n{background:linear-gradient(135deg,var(--purple),var(--cyan));color:#fff}
.steps li{transition:transform .2s,box-shadow .2s}.steps li:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.site-footer{background:radial-gradient(60% 120% at 100% 100%,rgba(56,182,255,.35),transparent 60%),linear-gradient(170deg,#3D33FF,var(--grad-top))}

/* Admin */
.topbar{background:radial-gradient(40% 160% at 95% 0%,rgba(56,182,255,.40),transparent 62%),linear-gradient(170deg,#3D33FF 0%,#3D33FF 35%,var(--grad-top) 100%)}
.login{background:
  radial-gradient(50% 60% at 90% 10%,rgba(56,182,255,.45),transparent 62%),
  radial-gradient(55% 60% at 0% 100%,rgba(140,100,255,.55),transparent 64%),
  radial-gradient(rgba(255,255,255,.14) 1.2px,transparent 1.5px) 0 0/22px 22px,
  linear-gradient(170deg,#3D33FF,var(--grad-top))}
.kpi{position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;right:-24px;top:-24px;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle,rgba(56,182,255,.22),transparent 68%)}

@media (min-width:768px){
  .hero{border-radius:0 0 48px 48px;padding-top:112px}
  .hero::after{width:560px}
  .bill-card{--pad:32px}
  .trust{justify-content:center}
}
@media (prefers-reduced-motion:reduce){.hero::after{animation:none}}
.hint .eg{display:inline;margin:0;padding:0 2px}
body{background-repeat:no-repeat;min-height:100vh}

/* Kotak perhatian di atas tombol cari */
.notice{margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--warn-bg);border:1px solid #F0D58A;color:#6B4600;font-size:.875rem;line-height:1.5}
.notice strong{display:block;margin-bottom:4px}
.notice ul{margin:0;padding-left:18px}.notice li+li{margin-top:4px}

@media (max-width:767px){.trust{display:none}}

.site-footer{background:radial-gradient(60% 120% at 100% 100%,rgba(56,182,255,.35),transparent 60%),linear-gradient(170deg,#3D33FF 0%,#3D33FF 38%,var(--grad-top) 100%)}

/* Kontak (kartu sendiri) & member: di atas footer */
.contact,.partner{max-width:960px;margin:16px auto 0;padding:0 20px}
.contact{margin-top:40px}
.contact-in{padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.contact-ic{flex:none;line-height:0}
.contact-text{flex:1 1 220px;display:grid;gap:2px;color:var(--ink)}
.contact-text strong{font-size:1.0625rem}
.contact-text span{color:var(--muted);font-weight:600}
.contact-text a{color:var(--purple);font-weight:800;font-size:1.125rem;text-decoration:none;border-bottom:2px solid var(--cyan)}
.btn-wa{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;background:#25D366;color:#06351B;font-weight:800;text-decoration:none;box-shadow:0 6px 16px rgba(37,211,102,.30)}
.btn-wa:hover{background:#1fbf5b}
.partner-in{padding:16px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.m-label{font-weight:700;color:var(--ink)}
.logo-chip{display:inline-flex;align-items:center;padding:8px 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.logo-chip img{height:40px;width:auto;display:block}
.partner+.site-footer{margin-top:40px}
@media (max-width:767px){.btn-wa{width:100%}.partner-in .m-label{flex-basis:100%}.logo-chip{padding:6px 12px}.logo-chip img{height:32px}}
@media (min-width:768px){.contact-in,.partner-in{padding-left:28px;padding-right:28px}}
@media (min-width:768px){.main-col{max-width:700px}.search-card{padding:40px}.search-card .field-label{font-size:1.0625rem;margin-bottom:10px}.search-card .input{min-height:62px;font-size:1.25rem;padding-left:56px;background-position:20px center;background-size:24px}.search-card .hint{font-size:.9375rem}.search-card .notice{font-size:.9375rem;padding:16px 20px;margin-top:20px}.search-card .btn-lg{min-height:66px;font-size:1.125rem;margin-top:20px}.bill-card{padding:40px;--pad:40px}}

/* Tombol Cara Bayar + popup video */
.actions{display:flex;flex-wrap:nowrap;gap:10px;margin-top:16px}
.search-card .actions .btn{margin-top:0;padding:0 12px;gap:8px;font-size:.9375rem;white-space:nowrap}
.actions .btn-primary{flex:1 1 0;min-width:0}
.btn-yt{flex:0 0 auto;background:#C8372D;color:#fff;box-shadow:0 6px 16px rgba(200,55,45,.28)}
.btn-yt:hover{background:#A92D24}
.video{position:relative;aspect-ratio:16/9;background:#0b1020;border-radius:12px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:379px){.search-card .actions .btn{padding:0 8px;gap:6px;font-size:.875rem}.btn-yt svg{width:18px;height:18px}}
@media (min-width:768px){.actions{margin-top:20px;gap:12px}.search-card .actions .btn{padding:0 22px;gap:10px;font-size:1.125rem}}

.yt-row{display:flex;gap:10px;flex-wrap:wrap}.yt-row .input{flex:1 1 280px;min-height:48px;font-size:1rem}
.yt-pv{max-width:480px;margin-top:14px}
#yt-status{font-size:.875rem;color:var(--muted);margin-top:10px;overflow-wrap:anywhere}

/* Popup Cara Bayar v2 */
.howto{border:0;padding:0;border-radius:24px;width:min(94vw,820px);max-width:none;max-height:94vh;overflow:hidden auto;background:#fff;color:var(--ink);box-shadow:0 30px 80px -20px rgba(31,22,160,.55)}
.howto[open]{animation:hpop .28s cubic-bezier(.2,.8,.2,1)}
@keyframes hpop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.howto::backdrop{background:radial-gradient(60% 60% at 50% 40%,rgba(61,51,255,.45),rgba(14,18,48,.80));backdrop-filter:blur(3px)}
.howto-head{display:flex;align-items:center;gap:14px;padding:18px 18px 18px 20px;color:#fff;background:radial-gradient(60% 140% at 100% 0%,rgba(56,182,255,.55),transparent 60%),linear-gradient(160deg,#3D33FF,#2A21C9)}
.howto-badge{flex:none;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;color:#fff}
.howto-titles{flex:1;min-width:0}
.howto-head h2{font-size:1.1875rem;font-weight:800;line-height:1.2}
.howto-head p{font-size:.8125rem;opacity:.9;margin-top:2px}
.howto-x{all:unset;cursor:pointer;flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.16);color:#fff;font-size:1.5rem;line-height:1}
.howto-x:hover{background:rgba(255,255,255,.28)}
.howto-x:focus-visible{outline:3px solid var(--cyan)}
.howto-body{padding:18px 20px 4px;background:linear-gradient(#F1F2FF,#fff)}
.video{box-shadow:0 18px 40px -18px rgba(31,22,160,.6);border:1px solid rgba(61,51,255,.2)}
.howto-empty{display:grid;justify-items:center;gap:6px;padding:26px 12px;text-align:center;color:var(--muted)}
.howto-empty strong{color:var(--ink);font-size:1.0625rem}
.howto-empty .ic{width:60px;height:60px;border-radius:20px;background:var(--purple-50);color:var(--purple);display:grid;place-items:center;margin-bottom:6px;font-weight:800;font-size:1.5rem}
.howto-steps{list-style:none;margin:0;padding:14px 20px 2px;display:grid;gap:8px}
.howto-steps li{display:flex;gap:10px;align-items:center;font-size:.875rem;font-weight:600}
.howto-steps b{flex:none;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--purple),var(--cyan));color:#fff;display:grid;place-items:center;font-size:.8125rem}
.howto-foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center;padding:14px 20px 18px}
.howto-foot .btn{min-height:44px;padding:0 18px;text-decoration:none}
@media (min-width:640px){.howto-steps{grid-template-columns:repeat(3,1fr);gap:10px}.howto-steps li{background:#F6F8FC;border:1px solid var(--line-soft);border-radius:12px;padding:10px 12px}}
@media (max-width:639px){.howto{width:calc(100vw - 32px);max-width:none;margin:auto;max-height:calc(100dvh - 32px);border-radius:24px}.howto-foot .btn{flex:1}}
@media (prefers-reduced-motion:reduce){.howto[open]{animation:none}}