/* Portal pelanggan */
.site-header{background:var(--purple)}
.header-in{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:16px}
.logo{display:block;line-height:0}
.logo img{height:48px;width:auto;display:block}
.header-link{color:#fff;font-weight:700;font-size:.9375rem;text-decoration:none;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.35)}
.header-link:hover{background:rgba(255,255,255,.12)}

.hero{background:var(--purple);color:#fff;padding:18px 0 88px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:700;letter-spacing:.02em;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.14);margin-bottom:16px}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.hero h1{font-size:clamp(1.85rem,7.4vw,3.25rem);line-height:1.12;font-weight:800;letter-spacing:-.025em;max-width:18ch}
.hero p.sub{margin-top:14px;font-size:1.0625rem;line-height:1.6;color:rgba(255,255,255,.92);max-width:46ch}

.main-col{max-width:600px;margin:-56px auto 0;padding:0 16px;position:relative}
.search-card{padding:24px 20px;box-shadow:var(--shadow-lg);border-color:transparent}
.search-card .btn{margin-top:16px}
.hint{font-size:.875rem;color:var(--muted);margin-top:10px}

#result{margin-top:20px;scroll-margin-top:16px}
#result:empty{display:none}
.bill-card{padding:24px 20px;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bill-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.cust-name{margin-top:6px;font-size:clamp(1.5rem,6.2vw,1.9rem);line-height:1.2;font-weight:800;letter-spacing:-.015em;overflow-wrap:anywhere;word-break:break-word}
.bill-meta{margin-top:20px;padding-top:20px;border-top:1px dashed var(--line);display:grid;gap:18px}
.invoice-no{margin-top:4px;font-size:1.125rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.amount{margin-top:2px;font-size:clamp(2.25rem,10.5vw,2.875rem);line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--purple)}
.instruction{margin-top:22px;color:var(--muted);font-size:1rem}
.bill-card .btn{margin-top:14px}
.after-note{margin-top:14px;font-size:.8125rem;color:var(--muted);text-align:center}
.link-reset{background:none;border:0;padding:6px;margin:10px auto 0;display:block;font:inherit;font-weight:700;font-size:.9rem;color:var(--purple);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.disclaimer{margin-top:14px;font-size:.8125rem;color:var(--muted);text-align:center}

.state-card{padding:28px 22px;text-align:center;animation:rise .35s ease both}
.state-icon{width:52px;height:52px;border-radius:16px;margin:0 auto 14px;display:grid;place-items:center}
.state-icon.info{background:var(--purple-50);color:var(--purple)}
.state-icon.err{background:var(--danger-bg);color:var(--danger)}
.state-card h2{font-size:1.25rem;font-weight:800}
.state-card p{margin-top:8px;color:var(--muted)}
.state-card .btn{margin-top:18px}
.state-card .btn+.btn{margin-top:10px}

.how{max-width:960px;margin:56px auto 0;padding:0 20px}
.how h2{font-size:1.25rem;font-weight:800;text-align:center}
.steps{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.steps li{display:flex;gap:14px;align-items:flex-start;padding:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)}
.step-n{flex:none;width:32px;height:32px;border-radius:10px;background:var(--purple-50);color:var(--purple);font-weight:800;display:grid;place-items:center}
.steps strong{display:block;font-size:.9875rem}
.steps span{color:var(--muted);font-size:.9rem}
.help{max-width:600px;margin:28px auto 0;padding:0 20px;text-align:center;color:var(--muted);font-size:.9375rem}
.help a{font-weight:700}
.site-footer{margin-top:56px;background:var(--purple);color:rgba(255,255,255,.92);padding:28px 0;font-size:.875rem}
.footer-in{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.footer-in img{height:40px;width:auto;display:block}
.site-footer small{display:block;color:rgba(255,255,255,.78)}

@media (min-width:768px){
  .hero{padding:28px 0 112px;text-align:center}
  .hero h1,.hero p.sub{margin-left:auto;margin-right:auto}
  .hero h1{max-width:20ch}
  .hero p.sub{font-size:1.1875rem}
  .logo img{height:54px}
  .main-col{margin-top:-72px;padding:0}
  .search-card{padding:32px}
  .bill-card{padding:32px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .steps li{flex-direction:column;gap:12px;padding:20px}
  .footer-in{flex-direction:row;justify-content:space-between;align-items:center}
}

.noscript{padding:16px;text-align:center;background:#fff}