/* =========================================================
   NINZY CORE — premium.css
   Tampilan baru halaman #/premium: hero, alasan, perbandingan,
   kartu paket, langkah bayar, FAQ. Memakai variabel tema yang ada.
   ========================================================= */
.prem-page{max-width:880px; margin:0 auto; padding-bottom:40px;}
.prem-h{
  margin:30px 0 14px; font:800 18px/1.2 var(--font-display,Poppins,sans-serif); color:var(--paper);
  display:flex; align-items:center; gap:10px;
}
.prem-h::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line-soft),transparent);}
.prem-note{text-align:center; margin-top:10px;}

/* ---------- hero ---------- */
.prem-hero{
  position:relative; overflow:hidden; isolation:isolate; border-radius:26px; padding:30px 22px 26px;
  border:1px solid var(--line-soft);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(var(--accent-rgb,124,58,237),.55) 0%, transparent 60%),
    radial-gradient(70% 90% at 0% 100%, rgba(155,92,255,.28) 0%, transparent 62%),
    linear-gradient(160deg, var(--ink-3,#1b1850), var(--ink-2,#12103a));
  box-shadow:0 18px 50px rgba(var(--accent-rgb,124,58,237),.28);
  animation:premUp .7s cubic-bezier(.2,.9,.2,1) both;
}
.prem-hero::before{ /* screentone halftone */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.55;
  background-image:radial-gradient(circle, rgba(190,160,255,.5) 0 1.2px, transparent 1.8px); background-size:12px 12px;
  -webkit-mask-image:linear-gradient(200deg,#000 0%,transparent 62%); mask-image:linear-gradient(200deg,#000 0%,transparent 62%);
}
.prem-hero::after{ /* kilau yang menyapu */
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent); transform:skewX(-18deg);
  animation:premSheen 5.5s ease-in-out 1s infinite;
}
@keyframes premSheen{0%{left:-60%;} 45%,100%{left:130%;}}
.prem-hero__gem{
  position:absolute; right:-6px; top:10px; width:clamp(92px,28vw,150px); z-index:-1;
  filter:drop-shadow(0 12px 28px rgba(124,58,237,.7)); opacity:.95; animation:premFloat 5s ease-in-out infinite;
}
@keyframes premFloat{0%,100%{transform:translateY(0) rotate(6deg);} 50%{transform:translateY(-10px) rotate(-3deg);}}
.prem-hero__eyebrow{
  display:inline-block; padding:5px 12px; border-radius:999px; font:700 11px/1 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px);
}
.prem-hero__title{
  margin:16px 0 10px; max-width:15em; font:800 clamp(25px,6.4vw,38px)/1.15 var(--font-display,Poppins,sans-serif); color:#fff;
}
.prem-hero__title em{
  font-style:normal; background:linear-gradient(90deg,#e6dcff,#b794ff 55%,#9b5cff); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.prem-hero__sub{margin:0 0 16px; max-width:30em; font-size:14px; line-height:1.6; color:rgba(241,239,255,.82);}
.prem-hero__chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.prem-hero__chips span{
  padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; color:#efe9ff;
  background:rgba(9,7,34,.45); border:1px solid rgba(190,160,255,.28);
}
.prem-hero__chips span::before{content:"✦ "; color:#b794ff;}
#app .prem-hero__cta{width:auto; padding:13px 24px; font-size:14.5px; border-radius:14px;}

/* ---------- kartu alasan ---------- */
.prem-why{display:grid; grid-template-columns:1fr; gap:12px;}
@media (min-width:600px){.prem-why{grid-template-columns:repeat(2,1fr);}}
@media (min-width:900px){.prem-why{grid-template-columns:repeat(3,1fr);}}
.prem-why__card{
  position:relative; padding:16px 16px 18px; border-radius:20px; background:var(--ink-2); border:1px solid var(--line-soft);
  transition:transform .25s cubic-bezier(.2,.9,.2,1), border-color .25s, box-shadow .25s;
  animation:premUp .6s cubic-bezier(.2,.9,.2,1) both; animation-delay:calc(var(--i,0) * 70ms + .15s);
}
.prem-why__card:hover{transform:translateY(-4px); border-color:var(--seal-hi,#9455ff); box-shadow:var(--glow,0 10px 30px rgba(124,58,237,.35));}
.prem-why__ico{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:12px; border-radius:14px; font-size:21px;
  background:var(--grad,linear-gradient(135deg,#7c3aed,#9b5cff)); box-shadow:0 8px 20px rgba(var(--accent-rgb,124,58,237),.45);
}
.prem-why__card b{display:block; margin-bottom:6px; font-size:15px; color:var(--paper);}
.prem-why__card p{margin:0; font-size:13px; line-height:1.6; color:var(--paper-dim);}

/* ---------- tabel perbandingan ---------- */
.prem-compare{border:1px solid var(--line-soft); border-radius:20px; overflow:hidden; background:var(--ink-2);}
.prem-compare__row{display:grid; grid-template-columns:1fr 62px 72px; align-items:center; gap:6px; padding:12px 14px; font-size:13px; color:var(--paper);}
.prem-compare__row + .prem-compare__row{border-top:1px solid var(--line-soft);}
.prem-compare__row span:nth-child(n+2){text-align:center; font-weight:800;}
.prem-compare__row span:last-child{color:#fff; background:rgba(var(--accent-rgb,124,58,237),.22); margin:-12px -14px -12px 0; padding:12px 0; align-self:stretch; display:grid; place-items:center;}
.prem-compare__head{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-dim); background:rgba(255,255,255,.03);}
.prem-compare__head span:last-child{background:var(--grad,#7c3aed); color:#fff;}
.prem-compare .yes{color:#a98bff;} .prem-compare .no{color:var(--paper-dim); opacity:.5;}
.prem-compare__row span:last-child.yes{color:#fff;}

/* ---------- login ---------- */
.prem-login{
  text-align:center; padding:22px 18px; border-radius:20px; background:var(--ink-2); border:1px dashed var(--seal-hi,#9455ff); margin-bottom:18px;
}
.prem-login b{display:block; font-size:16px; margin-bottom:6px;}
.prem-login .btn{display:flex; width:auto; padding:11px 24px; margin:10px auto 0; justify-content:center;}

/* ---------- status aktif ---------- */
#app .premium-status-banner{
  border:1px solid rgba(190,160,255,.5); border-radius:20px; padding:16px 18px; margin-bottom:18px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb,124,58,237),.3), rgba(var(--accent-rgb,124,58,237),.06));
  box-shadow:0 10px 30px rgba(var(--accent-rgb,124,58,237),.22);
}
#app .premium-status-banner__icon{
  display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:var(--grad); font-size:22px;
}

/* ---------- langkah ---------- */
#app .premium-steps{margin:6px 4px 22px;}
#app .premium-step__num{width:32px; height:32px; font-weight:800; transition:background .3s, box-shadow .3s;}
#app .premium-step--active .premium-step__num{background:var(--grad); border-color:transparent; box-shadow:0 0 0 5px rgba(var(--accent-rgb,124,58,237),.25);}
#app .premium-step--done .premium-step__num{background:var(--seal-hi,#9455ff); border-color:transparent; color:#fff;}
#app .premium-step__line{height:2px; border-radius:2px; margin-bottom:19px;}

/* ---------- kartu paket ---------- */
#app .premium-tier{
  position:relative; padding:20px 12px 16px; border-radius:20px; border:1px solid var(--line-soft);
  background:linear-gradient(180deg, var(--ink-3,#1b1850), var(--ink-2,#12103a));
  transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s, border-color .22s;
}
#app .premium-tier:hover{transform:translateY(-3px); border-color:var(--seal-hi,#9455ff);}
#app .premium-tier--active{
  border-color:transparent; transform:translateY(-3px);
  background:
    linear-gradient(var(--ink-2,#12103a), var(--ink-2,#12103a)) padding-box,
    var(--grad,linear-gradient(135deg,#7c3aed,#9b5cff)) border-box;
  border:2px solid transparent; box-shadow:0 14px 34px rgba(var(--accent-rgb,124,58,237),.45);
}
#app .premium-tier--active::after{
  content:"✓"; position:absolute; top:10px; left:10px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:800; color:#fff; background:var(--grad);
}
#app .premium-tier__days{font-weight:700; color:var(--paper); letter-spacing:.02em;}
#app .premium-tier__price{font-size:22px; font-weight:800; color:#fff;}
#app .premium-tier__perday{font-size:11.5px; color:var(--paper-dim);}
#app .premium-tier__save{background:var(--ink-3); color:#cdb6ff; border:1px solid var(--line-soft);}
#app .premium-tier__best{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%); white-space:nowrap;
  padding:3px 12px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:var(--grad); box-shadow:0 6px 16px rgba(var(--accent-rgb,124,58,237),.55);
}
#app .premium-tier--best{border-color:var(--seal-hi,#9455ff);}

/* ---------- pembayaran / selesai ---------- */
#app .premium-pay-summary,#app .premium-expiry-preview{border-radius:16px; background:var(--ink-2); border-color:var(--line-soft);}
#app .premium-pay-summary__price,#app .premium-expiry-preview b{color:#cdb6ff;}
#app .premium-qr-frame{border-radius:22px; padding:18px; box-shadow:0 18px 44px rgba(var(--accent-rgb,124,58,237),.4); outline:3px solid rgba(var(--accent-rgb,124,58,237),.35);}
#app .premium-done{
  border-radius:22px; border-color:rgba(190,160,255,.5);
  background:linear-gradient(160deg, rgba(var(--accent-rgb,124,58,237),.22), var(--ink-2) 60%);
}
#app .premium-done__icon{animation:premFloat 3s ease-in-out infinite;}

/* ---------- FAQ ---------- */
.prem-faq{display:grid; gap:10px;}
.prem-faq details{border:1px solid var(--line-soft); border-radius:16px; background:var(--ink-2); overflow:hidden; transition:border-color .2s;}
.prem-faq details[open]{border-color:var(--seal-hi,#9455ff);}
.prem-faq summary{
  list-style:none; cursor:pointer; padding:14px 44px 14px 16px; position:relative; font-size:14px; font-weight:600; color:var(--paper);
}
.prem-faq summary::-webkit-details-marker{display:none;}
.prem-faq summary::after{
  content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:20px; font-weight:400; color:var(--seal-hi,#9455ff); transition:transform .25s;
}
.prem-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.prem-faq p{margin:0; padding:0 16px 16px; font-size:13px; line-height:1.65; color:var(--paper-dim); animation:premUp .35s ease both;}

@keyframes premUp{from{opacity:0; transform:translateY(18px);}}
@media (prefers-reduced-motion: reduce){
  .prem-hero,.prem-hero::after,.prem-hero__gem,.prem-why__card,#app .premium-done__icon{animation:none !important;}
}
body.cx-reduce .prem-hero::after,body.cx-reduce .prem-hero__gem{animation:none !important;}

/* =========================================================
   REDEEM CODE — halaman tukar kode, kartu ajakan, bagian admin
   ========================================================= */
.prem-redeem-cta{
  display:flex; align-items:center; gap:14px; margin:18px 0 0; padding:14px 16px; border-radius:18px; color:var(--paper);
  border:1px dashed var(--seal-hi,#9455ff); background:linear-gradient(135deg,rgba(var(--accent-rgb,124,58,237),.18),rgba(var(--accent-rgb,124,58,237),.04));
  transition:transform .2s, box-shadow .2s;
}
.prem-redeem-cta:hover{transform:translateY(-2px); box-shadow:var(--glow,0 10px 30px rgba(124,58,237,.35));}
.prem-redeem-cta__ico{display:grid; place-items:center; width:42px; height:42px; border-radius:13px; font-size:20px; background:var(--grad); flex:none; transform:rotate(-8deg);}
.prem-redeem-cta b{display:block; font-size:14px;} .prem-redeem-cta small{display:block; font-size:12px; color:var(--paper-dim); margin-top:2px;}
.prem-redeem-cta i{margin-left:auto; font-style:normal; font-size:18px; color:var(--seal-hi,#9455ff);}

/* tiket */
.redeem-ticket{
  position:relative; max-width:520px; margin:8px auto 0; padding:30px 22px 26px; text-align:center; border-radius:24px; overflow:hidden; isolation:isolate;
  border:1px solid var(--line-soft);
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(var(--accent-rgb,124,58,237),.5) 0%, transparent 60%),
    linear-gradient(160deg,var(--ink-3,#1b1850),var(--ink-2,#12103a));
  box-shadow:0 18px 50px rgba(var(--accent-rgb,124,58,237),.28);
  animation:premUp .6s cubic-bezier(.2,.9,.2,1) both;
  /* takik tiket di kiri-kanan */
  -webkit-mask:radial-gradient(circle 13px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat, radial-gradient(circle 13px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 13px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat, radial-gradient(circle 13px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat;
}
.redeem-ticket::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.45;
  background-image:radial-gradient(circle,rgba(190,160,255,.5) 0 1.2px,transparent 1.8px); background-size:12px 12px;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 60%); mask-image:linear-gradient(200deg,#000,transparent 60%);
}
.redeem-ticket__eyebrow{display:inline-block; padding:5px 12px; border-radius:999px; font:700 11px/1 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);}
.redeem-ticket__title{margin:14px 0 6px; font:800 clamp(22px,6vw,30px)/1.2 var(--font-display,Poppins,sans-serif); color:#fff;}
.redeem-ticket__sub{margin:0 0 20px; font-size:13.5px; color:rgba(241,239,255,.8);}
#redeemForm{display:grid; gap:12px; padding-top:20px; border-top:2px dashed rgba(190,160,255,.35);}
.redeem-input{
  width:100%; padding:15px 14px; text-align:center; font:700 clamp(17px,5vw,22px)/1 "JetBrains Mono",ui-monospace,Menlo,monospace; letter-spacing:.12em;
  color:#fff; border-radius:14px; outline:0; transition:box-shadow .2s, border-color .2s;
}
#app .redeem-input{background:rgba(9,7,34,.7) !important; border:1px solid rgba(190,160,255,.35) !important;}
#app .redeem-input:focus{border-color:var(--seal-hi,#9455ff) !important; box-shadow:0 0 0 4px rgba(var(--accent-rgb,124,58,237),.3);}
.redeem-input::placeholder{color:rgba(241,239,255,.28); letter-spacing:.08em;}
.redeem-btn{width:100%; padding:14px; font-size:15px; border-radius:14px;}
.redeem-result{margin-top:14px; font-size:13.5px; line-height:1.55; border-radius:14px; padding:0;}
.redeem-result:empty{display:none;}
.redeem-result--err,.redeem-result--info{padding:11px 14px;}
.redeem-result--err{color:#ffd6dc; background:rgba(255,80,110,.14); border:1px solid rgba(255,80,110,.4);}
.redeem-result--info{color:var(--paper-dim); background:rgba(255,255,255,.05);}
.redeem-result--ok{padding:18px 14px; background:rgba(var(--accent-rgb,124,58,237),.22); border:1px solid rgba(190,160,255,.5); animation:premUp .45s ease both;}
.redeem-result--ok p{margin:6px 0 14px;} .redeem-ok__icon{font-size:34px; margin-bottom:6px; animation:premFloat 2.5s ease-in-out infinite;}

/* admin */
.adm-rd-box{border:1px solid var(--line-soft); border-radius:14px; padding:12px; margin-bottom:12px; background:rgba(255,255,255,.02);}
.adm-rd-box>b{display:block; margin-bottom:8px; font-size:13.5px;}
.adm-rd-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;} .adm-rd-head b{margin:0;}
.adm-rd-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.adm-rd-presets{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;}
.adm-rd-presets .chip{padding:5px 11px; font-size:12px;}
.adm-rd-row{padding:10px 0; border-top:1px solid var(--line-soft);} .adm-rd-row:first-child{border-top:0;}
.adm-rd-row__main code{font:700 13px "JetBrains Mono",ui-monospace,monospace; letter-spacing:.04em; color:var(--paper); margin-right:8px; word-break:break-all;}
.adm-rd-row__btns{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.adm-rd-row__btns .btn{width:auto; padding:5px 10px; font-size:11.5px;}
.adm-rd-users{margin-top:8px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.04);}
.adm-rd-badge{display:inline-block; padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.04em;}
.adm-rd-badge--on{background:rgba(80,220,150,.18); color:#7ff0b8;} .adm-rd-badge--off{background:rgba(255,255,255,.1); color:var(--paper-dim);}
.adm-rd-badge--full{background:rgba(255,190,80,.16); color:#ffd28a;} .adm-rd-badge--exp{background:rgba(255,80,110,.16); color:#ffa3b3;}
@media (prefers-reduced-motion: reduce){.redeem-ticket,.redeem-ok__icon{animation:none !important;}}