:root{
  --brand:#0b2545;
  --brand-2:#13315c;
  --accent:#e63946;
  --gold:#ffb703;
  --bg:#f7f8fc;
  --ink:#0f172a;
  --muted:#64748b;
  --radius:18px;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --shadow-lg:0 20px 50px rgba(2,6,23,.14);
}

*{ -webkit-tap-highlight-color: transparent; }
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  padding-bottom:0;
}
@media (max-width: 991.98px){ body{ padding-bottom: 84px; } }

.text-gradient{
  background:linear-gradient(90deg,var(--brand) 0%,var(--accent) 60%,var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===================== NAVBAR ===================== */
.nav-premium{
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(2,6,23,.06);
  padding:.7rem 0;
  transition: transform .35s ease, box-shadow .3s ease, background .3s ease;
  z-index:1030;
}
.nav-premium.scrolled{ box-shadow: var(--shadow); background:rgba(255,255,255,.95); }
.nav-premium.nav-hidden{ transform: translateY(-110%); }

.brand-logo{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 6px 18px rgba(11,37,69,.35);
}
.brand-text{ font-weight:800; font-size:1.15rem; color:var(--brand); letter-spacing:-.02em; }
.brand-text span{ color:var(--accent); }

.nav-premium .nav-link{
  font-weight:600; color:#475569; padding:.5rem .9rem; border-radius:10px;
  transition:.2s;
}
.nav-premium .nav-link:hover{ color:var(--brand); background:rgba(11,37,69,.05); }
.nav-premium .nav-link.active{ color:var(--brand); background:rgba(11,37,69,.08); }

/* ===================== BUTTONS ===================== */
.btn{ border-radius:12px; font-weight:600; padding:.55rem 1.15rem; transition:.25s; }
.btn-brand{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff; border:none;
  box-shadow:0 8px 20px rgba(11,37,69,.28);
}
.btn-brand:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 12px 26px rgba(11,37,69,.38); }
.btn-outline-brand{ border:1.5px solid var(--brand); color:var(--brand); background:transparent; }
.btn-outline-brand:hover{ background:var(--brand); color:#fff; }
.btn-ghost{ color:var(--brand); background:transparent; }
.btn-ghost:hover{ background:rgba(11,37,69,.06); color:var(--brand); }

/* ===================== HERO ===================== */
.hero{
  padding: 140px 0 70px;
  background:
    radial-gradient(1200px 500px at 90% -10%, rgba(230,57,70,.10), transparent 60%),
    radial-gradient(800px 400px at -10% 20%, rgba(11,37,69,.08), transparent 60%),
    linear-gradient(180deg,#fff 0%, var(--bg) 100%);
}
.badge-pill{
  display:inline-block; padding:.45rem 1rem; border-radius:999px;
  background:#fff; color:var(--brand); font-weight:600; font-size:.85rem;
  box-shadow: var(--shadow);
}
.hero-title{
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight:800; letter-spacing:-.03em; line-height:1.1;
}
.hero-desc{ color:var(--muted); font-size:1.1rem; max-width:520px; }
.hero-stats .stat-num{ font-size:1.6rem; font-weight:800; color:var(--brand); }
.hero-stats .stat-lbl{ color:var(--muted); font-size:.85rem; }
.hero-visual{
  width:100%; aspect-ratio:1/1; max-width:420px; margin:auto;
  border-radius:32px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2) 60%,var(--accent));
  display:grid; place-items:center;
  box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}
.hero-visual::after{
  content:""; position:absolute; inset:-40% -40% auto auto; width:80%; height:80%;
  background:radial-gradient(circle, rgba(255,183,3,.35), transparent 60%);
}

/* ===================== FEATURES ===================== */
.section-title{ font-weight:800; letter-spacing:-.02em; font-size:clamp(1.6rem,3vw,2.2rem); }
.feature-card{
  background:#fff; border-radius:var(--radius); padding:1.75rem 1.5rem;
  box-shadow:var(--shadow); transition:.3s; height:100%;
  border:1px solid rgba(2,6,23,.04);
}
.feature-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.fc-icon{
  width:56px;height:56px;border-radius:16px; display:grid;place-items:center;
  font-size:1.6rem; color:#fff; margin-bottom:1rem;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
}
.feature-card:nth-child(2) .fc-icon{ background:linear-gradient(135deg,var(--accent),#b91c1c); }
.feature-card:nth-child(3) .fc-icon{ background:linear-gradient(135deg,var(--gold),#f59e0b); }
.feature-card h5{ font-weight:700; }
.feature-card p{ color:var(--muted); margin:0; }

/* ===================== CTA ===================== */
.cta-premium{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-radius:24px; padding:2.5rem; display:flex; flex-wrap:wrap;
  gap:1rem; align-items:center; justify-content:space-between;
  box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}
.cta-premium::before{
  content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px;
  background:radial-gradient(circle, rgba(255,183,3,.35), transparent 70%);
}

/* ===================== BOTTOM NAV (Mobile) ===================== */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1040;
  display:flex; justify-content:space-around; align-items:center;
  background:rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  border-top:1px solid rgba(2,6,23,.06);
  padding:.5rem .25rem calc(.5rem + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px rgba(2,6,23,.06);
}
.bn-item{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--muted); font-size:.7rem; font-weight:600; text-decoration:none;
  padding:.35rem .6rem; border-radius:12px; transition:.2s; flex:1;
}
.bn-item i{ font-size:1.3rem; }
.bn-item.active, .bn-item:hover{ color:var(--brand); }
.bn-item.active i{ color:var(--brand); }
.bn-main{ flex:0 0 auto; }
.bn-circle{
  width:52px;height:52px;border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff; font-size:1.4rem; margin-top:-24px;
  box-shadow:0 10px 24px rgba(230,57,70,.4);
  border:4px solid #fff;
}

/* ===================== OFFCANVAS PREMIUM ===================== */
.offcanvas-premium{ width:330px !important; border:none; }
.offcanvas-head{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  padding:1.2rem 1.2rem 1.4rem;
}
.offcanvas-premium .offcanvas-body{ padding:1.25rem; }

.user-box{
  display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1rem; border-radius:14px;
  background:linear-gradient(135deg,#fff, #f1f5f9);
  border:1px solid rgba(2,6,23,.05);
}
.user-box .avatar{
  width:44px;height:44px;border-radius:50%; display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--accent)); color:#fff; font-size:1.2rem;
}
.user-box .avatar{ overflow:hidden; }
.user-box .avatar img{ width:100%; height:100%; object-fit:cover; }

.menu-list li{ margin-bottom:.35rem; }
.menu-list a{
  display:flex; align-items:center; gap:.85rem;
  padding:.85rem 1rem; border-radius:12px; color:#334155;
  text-decoration:none; font-weight:600; transition:.2s;
}
.menu-list a i:first-child{
  width:34px;height:34px;border-radius:10px; display:grid;place-items:center;
  background:#eef2f7; color:var(--brand); font-size:1rem;
}
.menu-list a:hover, .menu-list a.active{
  background:linear-gradient(135deg, rgba(11,37,69,.08), rgba(230,57,70,.08));
  color:var(--brand);
}
.menu-list a.active i:first-child{ background:var(--brand); color:#fff; }

/* ===================== FOOTER ===================== */
.footer-premium{
  background:linear-gradient(135deg,#0b2545,#13315c);
  color:#fff;
}
.footer-links a{ color:rgba(255,255,255,.6); text-decoration:none; font-size:.9rem; transition:.2s; }
.footer-links a:hover{ color:#fff; }
.soc{
  width:40px;height:40px;border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:#fff; text-decoration:none; transition:.25s;
}
.soc:hover{ background:var(--accent); color:#fff; transform:translateY(-3px); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 991.98px){
  .hero{ padding: 110px 0 50px; }
  .hero-visual{ max-width:320px; }
}

/* ===================== AUTH PAGE ===================== */
.auth-body{ background:var(--bg); min-height:100vh; }
.auth-wrap{ display:grid; grid-template-columns: 1fr 1fr; min-height:100vh; }
.auth-visual{
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 45%, var(--accent) 100%);
  color:#fff; padding:2.5rem; display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.auth-visual::before{
  content:""; position:absolute; inset:auto -100px -100px auto;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,183,3,.35), transparent 70%);
}
.auth-brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:#fff; }
.auth-visual-body{ margin-top:auto; max-width:420px; position:relative; z-index:1; }
.auth-visual-body h2{ font-size:2.2rem; font-weight:800; line-height:1.15; letter-spacing:-.02em; }
.auth-visual-body p{ color:rgba(255,255,255,.75); margin-top:.75rem; }
.badge-pill-dark{
  display:inline-block; padding:.45rem 1rem; border-radius:999px;
  background:rgba(255,255,255,.15); backdrop-filter:blur(6px);
  font-size:.85rem; font-weight:600;
}
.text-gradient-light{
  background:linear-gradient(90deg,#ffb703,#fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.auth-visual-stats{ display:flex; gap:2rem; margin-top:2rem; }
.auth-visual-stats .num{ font-size:1.6rem; font-weight:800; }
.auth-visual-stats .lbl{ font-size:.8rem; color:rgba(255,255,255,.7); }

.auth-form-wrap{ display:grid; place-items:center; padding:2rem; }
.auth-card{ width:100%; max-width:440px; }
.auth-back{ color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:600; display:inline-flex; gap:.4rem; margin-bottom:1.5rem; }
.auth-back:hover{ color:var(--brand); }
.auth-title{ font-weight:800; letter-spacing:-.02em; font-size:1.9rem; margin-bottom:.3rem; }
.auth-sub{ color:var(--muted); margin-bottom:1.5rem; }
.auth-sub a{ color:var(--accent); font-weight:600; text-decoration:none; }

.auth-alert{
  background:#fef2f2; color:#b91c1c; padding:.85rem 1rem;
  border-radius:12px; font-size:.9rem; margin-bottom:1rem;
  display:flex; align-items:center; gap:.5rem;
  border:1px solid #fecaca;
}

.field{ position:relative; margin-bottom:1rem; }
.field input{
  width:100%; padding:1.15rem 3rem .55rem 3rem;
  border:1.5px solid #e2e8f0; border-radius:14px; font-size:.95rem;
  background:#fff; transition:.2s; outline:none;
}
.field input:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(11,37,69,.08); }
.field label{
  position:absolute; left:3rem; top:50%; transform:translateY(-50%);
  color:#94a3b8; font-size:.95rem; pointer-events:none;
  transition:.2s; background:#fff; padding:0 .35rem;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  top:0; font-size:.75rem; color:var(--brand); font-weight:600;
}
.field-icon{
  position:absolute; left:1.1rem; top:50%; transform:translateY(-50%);
  color:#94a3b8; font-size:1.05rem;
}
.field input:focus ~ .field-icon{ color:var(--brand); }
.field-eye{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:#94a3b8; padding:.4rem .6rem; cursor:pointer;
}

.check{ display:flex; align-items:center; gap:.55rem; font-size:.88rem; color:#334155; cursor:pointer; }
.check input{ display:none; }
.check span{
  width:20px; height:20px; border-radius:6px; border:1.5px solid #cbd5e1;
  display:grid; place-items:center; color:#fff; transition:.2s;
}
.check input:checked + span{ background:var(--brand); border-color:var(--brand); }
.check span i{ font-size:.75rem; opacity:0; transition:.2s; }
.check input:checked + span i{ opacity:1; }

.auth-divider{
  display:flex; align-items:center; gap:1rem; margin:1.5rem 0;
  color:#cbd5e1; font-size:.8rem; font-weight:600;
}
.auth-divider::before,.auth-divider::after{
  content:""; flex:1; height:1px; background:#e2e8f0;
}
.auth-demo{ text-align:center; color:var(--muted); font-size:.8rem; margin-top:1.5rem; }

@media (max-width: 991.98px){
  .auth-wrap{ grid-template-columns: 1fr; }
  .auth-visual{ display:none; }
  .auth-form-wrap{ padding:1.5rem; }
}

/* ================= ARTICLE FRONTEND ================= */
.art-hero{
  padding:130px 0 40px;
  background:linear-gradient(180deg,#fff,var(--bg));
  border-bottom:1px solid rgba(2,6,23,.04);
}
.art-breadcrumb{
  display:flex; align-items:center; gap:.5rem;
  font-size:.85rem; color:var(--muted); margin-bottom:1rem;
}
.art-breadcrumb a{ color:var(--muted); text-decoration:none; }
.art-breadcrumb a:hover{ color:var(--brand); }
.art-breadcrumb i{ font-size:.7rem; }

.kat-badge-large{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem 1rem; border-radius:999px;
  background:color-mix(in srgb, var(--c) 15%, white);
  color:var(--c); font-size:.8rem; font-weight:700;
  border:1px solid color-mix(in srgb, var(--c) 30%, white);
  text-decoration:none;
}
.art-title-hero{
  font-size:clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight:800; letter-spacing:-.02em;
  margin:1rem 0 .75rem; line-height:1.15;
}
.art-desc-hero{ color:var(--muted); font-size:1.05rem; max-width:600px; }

/* Filter bar */
.kat-filter-bar{
  display:flex; gap:.5rem; overflow-x:auto; padding:.5rem 0 1.5rem;
  scrollbar-width:none; margin:0 -.75rem; padding-left:.75rem; padding-right:.75rem;
}
.kat-filter-bar::-webkit-scrollbar{ display:none; }
.kat-pill{
  display:inline-flex; align-items:center; gap:.4rem; flex-shrink:0;
  padding:.55rem 1rem; border-radius:999px;
  background:#fff; color:#475569; text-decoration:none;
  font-size:.85rem; font-weight:600;
  border:1.5px solid var(--line);
  transition:.25s;
}
.kat-pill:hover{ border-color:var(--brand); color:var(--brand); }
.kat-pill.active{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff; border-color:transparent;
  box-shadow:0 8px 20px rgba(11,37,69,.25);
}
.kat-pill.active .kat-count{ background:rgba(255,255,255,.25); color:#fff; }
.kat-count{
  font-size:.7rem; padding:.1rem .5rem; border-radius:999px;
  background:rgba(11,37,69,.08); color:var(--brand); font-weight:800;
}

/* Card */
.art-card{
  background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow); border:1px solid rgba(2,6,23,.04);
  transition:.3s; height:100%; display:flex; flex-direction:column;
}
.art-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.art-card-link{ text-decoration:none; color:inherit; display:block; height:100%; }
.art-card-thumb{
  aspect-ratio:16/10; position:relative; overflow:hidden; background:#eef2f7;
}
.art-card-thumb img{
  width:100%;height:100%;object-fit:cover; transition:transform .5s;
}
.art-card:hover .art-card-thumb img{ transform:scale(1.06); }
.art-placeholder{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#94a3b8; font-size:2.5rem;
  background:linear-gradient(135deg,#eef2f7,#dde6f0);
}
.art-cat-chip{
  position:absolute; top:.75rem; left:.75rem;
  padding:.3rem .75rem; border-radius:999px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  font-size:.7rem; font-weight:700;
  color:var(--c); box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.art-card-body{ padding:1.25rem; flex:1; display:flex; flex-direction:column; }
.art-meta{
  display:flex; gap:1rem; color:var(--muted); font-size:.75rem; margin-bottom:.5rem;
}
.art-meta i{ margin-right:.25rem; }
.art-card-title{
  font-size:1.1rem; font-weight:700; letter-spacing:-.01em; line-height:1.35;
  margin-bottom:.5rem; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.art-card:hover .art-card-title{ color:var(--brand); }
.art-card-desc{
  color:var(--muted); font-size:.88rem; line-height:1.55; margin-bottom:1rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  flex:1;
}
.art-read-more{
  color:var(--brand); font-weight:700; font-size:.85rem;
  display:inline-flex; align-items:center; gap:.35rem;
  transition:gap .25s;
}
.art-card:hover .art-read-more{ gap:.6rem; color:var(--accent); }

/* Pagination */
.pagination-premium{
  display:flex; justify-content:center; gap:.4rem; margin-top:2.5rem;
}
.pagination-premium a{
  width:42px;height:42px;border-radius:12px; display:grid; place-items:center;
  background:#fff; color:#475569; text-decoration:none; font-weight:700;
  border:1px solid var(--line); transition:.2s;
}
.pagination-premium a:hover{ border-color:var(--brand); color:var(--brand); }
.pagination-premium a.active{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(11,37,69,.25);
}

/* Empty state big */
.empty-state-big{ text-align:center; padding:4rem 1rem; }
.empty-state-big i{ font-size:4rem; color:#cbd5e1; }
.empty-state-big h4{ margin-top:1rem; font-weight:800; color:var(--ink); }
.empty-state-big p{ color:var(--muted); }

/* ================= DETAIL ================= */
.art-detail-container{ max-width:820px; }
.art-detail-head{ padding:130px 0 1rem; }
.art-detail-title{
  font-size:clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight:800; letter-spacing:-.02em; line-height:1.2;
  margin:1rem 0 1rem;
}
.art-detail-meta{ display:flex; gap:1.25rem; color:var(--muted); font-size:.88rem; }
.art-detail-hero{
  border-radius:20px; overflow:hidden; margin:1.5rem 0 2rem;
  aspect-ratio:16/9; box-shadow:var(--shadow-lg);
}
.art-detail-hero img{ width:100%;height:100%; object-fit:cover; }

.art-content{
  font-size:1.05rem; line-height:1.8; color:#1e293b;
}
.art-content h2{ font-size:1.65rem; font-weight:800; margin:2rem 0 .85rem; letter-spacing:-.02em; }
.art-content h3{ font-size:1.3rem; font-weight:800; margin:1.75rem 0 .7rem; }
.art-content p{ margin-bottom:1.15rem; }
.art-content ul, .art-content ol{ margin-bottom:1.15rem; padding-left:1.5rem; }
.art-content li{ margin-bottom:.5rem; }
.art-content a{ color:var(--brand); font-weight:600; }
.art-content img{ max-width:100%; border-radius:14px; margin:1rem 0; }
.art-content blockquote{
  border-left:4px solid var(--accent); padding:.5rem 0 .5rem 1.25rem;
  margin:1.5rem 0; color:var(--muted); font-style:italic;
  background:linear-gradient(90deg, rgba(230,57,70,.05), transparent);
  border-radius:0 12px 12px 0;
}
.art-content code{
  background:#f1f5f9; padding:.15rem .5rem; border-radius:6px;
  font-size:.9em; color:var(--accent);
}

.art-tags{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  margin:2.5rem 0; padding-top:1.5rem; border-top:1px solid var(--line);
}
.art-tags > i{ color:var(--muted); margin-right:.25rem; }
.art-tag{
  background:#eef2f7; color:#475569; padding:.35rem .85rem;
  border-radius:999px; font-size:.8rem; font-weight:600;
  text-decoration:none; transition:.2s;
}
.art-tag:hover{ background:var(--brand); color:#fff; }

.art-share{
  display:flex; align-items:center; gap:.6rem; padding:1.25rem;
  background:#fff; border-radius:16px; box-shadow:var(--shadow);
  margin-bottom:2rem;
}
.art-share span{ font-weight:700; color:var(--muted); font-size:.85rem; margin-right:.5rem; }
.share-btn{
  width:40px;height:40px;border-radius:12px; display:grid; place-items:center;
  color:#fff; text-decoration:none; transition:.2s;
}
.share-btn.facebook{ background:#1877f2; }
.share-btn.twitter { background:#000; }
.share-btn.whatsapp{ background:#25d366; }
.share-btn.link     { background:var(--brand); }
.share-btn:hover{ transform:translateY(-3px); box-shadow:0 8px 16px rgba(2,6,23,.2); }

.art-related-title{
  font-size:1.4rem; font-weight:800; letter-spacing:-.02em;
  margin-bottom:1.5rem;
}
.art-card-mini{
  display:flex; gap:.85rem; text-decoration:none; color:inherit;
  background:#fff; border-radius:16px; padding:.85rem;
  box-shadow:var(--shadow); transition:.25s;
  border:1px solid rgba(2,6,23,.04);
}
.art-card-mini:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.acm-thumb{
  width:90px;height:90px;border-radius:12px; overflow:hidden;
  flex-shrink:0; background:#eef2f7; position:relative;
}
.acm-thumb img{ width:100%;height:100%;object-fit:cover; }
.acm-body{ min-width:0; }
.acm-title{
  font-size:.95rem; font-weight:700; line-height:1.35; margin-top:.35rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

@media (max-width: 767.98px){
  .art-hero, .art-detail-head{ padding-top:100px; }
  .art-detail-title{ font-size:1.5rem; }
  .art-content{ font-size:1rem; }
  .acm-thumb{ width:70px;height:70px; }
}

/* ================= INFINITE SCROLL ================= */
.scroll-loader{
  text-align:center; padding:2.5rem 1rem 1rem;
  display:none;
}
.scroll-loader[data-has-more="1"]{ display:block; }

.loader-spinner{
  width:44px;height:44px;margin:0 auto .75rem;
  border-radius:50%;
  border:3px solid rgba(11,37,69,.12);
  border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
.scroll-loader.loading .loader-spinner{ display:block; }
.scroll-loader:not(.loading) .loader-spinner{ animation-play-state:paused; opacity:.4; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loader-text{ color:var(--muted); font-size:.9rem; font-weight:600; margin:0; }

.scroll-end{
  text-align:center; padding:2.5rem 1rem 1rem;
  color:var(--muted);
}
.scroll-end i{ font-size:2rem; color:var(--green, #10b981); display:block; margin-bottom:.5rem; }
.scroll-end p{ margin:0; font-weight:600; font-size:.9rem; }

.art-col-new{
  animation:cardIn .55s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(24px) scale(.98); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}

/* ================= DETAIL: READING PROGRESS ================= */
.read-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:1050;
  background:rgba(11,37,69,.06); pointer-events:none;
}
.read-progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--brand),var(--accent),var(--gold));
  transition:width .1s linear;
}

/* ================= DETAIL: HERO ================= */
.ad-hero{
  position:relative; padding:140px 0 60px; color:#fff;
  background:linear-gradient(135deg,var(--brand) 0%, var(--brand-2) 60%, #1e4d8c 100%);
  overflow:hidden;
}
.ad-hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.05);
  filter:blur(0px);
}
.ad-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,37,69,.55) 0%, rgba(11,37,69,.85) 100%);
}
.ad-hero.has-thumb .ad-hero-overlay{
  background:linear-gradient(180deg, rgba(11,37,69,.45) 0%, rgba(11,37,69,.92) 100%);
}
.ad-hero-content{ position:relative; z-index:1; max-width:820px; }

.art-breadcrumb.light a,
.art-breadcrumb.light span,
.art-breadcrumb.light{ color:rgba(255,255,255,.75); }
.art-breadcrumb.light a:hover{ color:#fff; }

.ad-cat{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem 1rem; border-radius:999px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(10px);
  color:#fff; font-size:.78rem; font-weight:700;
  text-decoration:none; margin:1rem 0 1.2rem;
  border:1px solid rgba(255,255,255,.22);
  transition:.25s;
}
.ad-cat:hover{ background:#fff; color:var(--c, var(--brand)); }

.ad-title{
  font-size:clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight:800; letter-spacing:-.025em; line-height:1.18;
  color:#fff; margin:0 0 1.5rem;
  max-width:720px;
}

.ad-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.25rem;
  color:rgba(255,255,255,.85); font-size:.88rem;
}
.ad-meta-item{ display:inline-flex; align-items:center; gap:.35rem; }
.ad-meta-item i{ opacity:.75; }
.ad-meta-sep{
  width:1px; height:22px; background:rgba(255,255,255,.25);
}
.ad-author{ display:flex; align-items:center; gap:.6rem; }
.ad-author-av{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--gold));
  display:grid;place-items:center;font-weight:800;color:#fff;
  font-size:.95rem; box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.ad-author-name{ font-weight:700; font-size:.88rem; color:#fff; line-height:1.1; }
.ad-author-role{ font-size:.72rem; color:rgba(255,255,255,.7); }

@media (max-width: 767.98px){
  .ad-hero{ padding:110px 0 40px; }
  .ad-meta-sep{ display:none; }
}

/* ================= DETAIL: LAYOUT ================= */
.ad-container{ max-width:1080px; }
.ad-layout{
  display:grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap:2rem;
  padding:2.5rem 0 4rem;
}
@media (max-width: 991.98px){
  .ad-layout{ grid-template-columns: 1fr; padding:1.5rem 0 3rem; }
}

/* Share rail (desktop) */
.ad-share-rail{ position:relative; }
.ad-share-sticky{
  position:sticky; top:100px;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding:1rem .6rem; background:#fff;
  border-radius:20px; box-shadow:var(--shadow);
  border:1px solid rgba(2,6,23,.05);
}
.ad-share-label{
  font-size:.65rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); margin-bottom:.15rem;
  writing-mode:vertical-rl; transform:rotate(180deg); margin:.15rem 0 .4rem;
}

.asr-btn{
  width:40px;height:40px;border-radius:12px; border:0;
  display:grid; place-items:center; cursor:pointer;
  background:#f1f5f9; color:#475569; font-size:1rem;
  transition:.22s; position:relative;
}
.asr-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(2,6,23,.15); color:#fff; }
.asr-btn.facebook:hover{ background:#1877f2; }
.asr-btn.twitter:hover { background:#000; }
.asr-btn.whatsapp:hover{ background:#25d366; }
.asr-btn.telegram:hover{ background:#229ed9; }
.asr-btn.link:hover     { background:var(--brand); }
.asr-btn.copied{ background:#10b981 !important; color:#fff !important; }

/* Content */
.ad-main{ min-width:0; }

.ad-content{
  font-size:1.05rem; line-height:1.85; color:#1e293b;
}
.ad-content h2{
  font-size:1.65rem; font-weight:800; letter-spacing:-.02em;
  margin:2.5rem 0 1rem; color:var(--ink); scroll-margin-top:100px;
  padding-bottom:.4rem; border-bottom:2px solid rgba(11,37,69,.08);
}
.ad-content h3{
  font-size:1.28rem; font-weight:800; color:var(--ink);
  margin:2rem 0 .8rem; scroll-margin-top:100px;
}
.ad-content p{ margin-bottom:1.2rem; }
.ad-content ul, .ad-content ol{ margin-bottom:1.2rem; padding-left:1.5rem; }
.ad-content li{ margin-bottom:.5rem; }
.ad-content a{ color:var(--brand); font-weight:600; text-decoration:none; border-bottom:1.5px solid rgba(11,37,69,.2); }
.ad-content a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.ad-content img{ max-width:100%; height:auto; border-radius:16px; margin:1.5rem 0; box-shadow:var(--shadow); }
.ad-content blockquote{
  border-left:4px solid var(--accent); padding:.75rem 1.25rem;
  margin:1.75rem 0; color:#475569; font-style:italic;
  background:linear-gradient(90deg, rgba(230,57,70,.06), transparent);
  border-radius:0 14px 14px 0;
}
.ad-content code{
  background:#f1f5f9; padding:.15rem .5rem; border-radius:6px;
  font-size:.9em; color:var(--accent); font-family:ui-monospace, monospace;
}
.ad-content pre{
  background:#0f172a; color:#e2e8f0; padding:1.25rem 1.5rem;
  border-radius:14px; overflow-x:auto; font-size:.9rem; line-height:1.6;
  margin:1.5rem 0;
}

/* TOC */
.ad-toc{
  background:linear-gradient(135deg,#f8fafc,#eef2f7);
  border:1px solid rgba(11,37,69,.06);
  border-radius:18px; padding:1rem 1.25rem; margin-bottom:2rem;
  box-shadow:0 4px 14px rgba(2,6,23,.04);
}
.ad-toc-head{
  display:flex; align-items:center; gap:.55rem;
  font-size:.9rem; color:var(--brand);
}
.ad-toc-head strong{ flex:1; }
.ad-toc-toggle{
  border:0; background:transparent; color:var(--muted);
  cursor:pointer; padding:.3rem; transition:.25s;
}
.ad-toc.collapsed .ad-toc-toggle i{ transform:rotate(180deg); }
.ad-toc.collapsed .ad-toc-list{ display:none; }
.ad-toc-toggle i{ transition:.25s; }

.ad-toc-list{
  list-style:none; padding:0; margin:.9rem 0 0;
  counter-reset:toc;
}
.ad-toc-list li{ margin-bottom:.35rem; counter-increment:toc; }
.ad-toc-list li.lvl-3{ padding-left:1.4rem; }
.ad-toc-list a{
  display:flex; align-items:baseline; gap:.5rem;
  color:#475569; text-decoration:none; font-size:.9rem; font-weight:600;
  padding:.4rem .6rem; border-radius:8px; transition:.18s;
  border-bottom:0 !important;
}
.ad-toc-list a:hover{ background:rgba(11,37,69,.06); color:var(--brand); }
.ad-toc-list a.active{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; }
.ad-toc-list li.lvl-2 a::before{
  content:counter(toc) '.';
  font-weight:800; color:var(--accent); flex-shrink:0;
}
.ad-toc-list li.lvl-2 a.active::before{ color:var(--gold); }

/* Tags */
.ad-tags{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  margin:2.5rem 0 1.5rem; padding-top:1.5rem;
  border-top:1px solid rgba(2,6,23,.08);
}
.ad-tags > i{ color:var(--muted); margin-right:.25rem; }
.ad-tag{
  background:#eef2f7; color:#475569; padding:.4rem .9rem;
  border-radius:999px; font-size:.8rem; font-weight:600;
  text-decoration:none; transition:.22s;
}
.ad-tag:hover{ background:var(--brand); color:#fff; transform:translateY(-2px); }

/* ================= DETAIL: SHARE STRIP (mobile) ================= */
.ad-share-strip{
  background:#fff; border-radius:16px; padding:1rem 1.25rem;
  box-shadow:var(--shadow); margin:1.5rem 0;
  display:flex; flex-direction:column; gap:.75rem;
  align-items:center; text-align:center;
}
.ad-share-strip > span{ font-weight:700; color:var(--muted); font-size:.85rem; }
.ad-share-btns{ display:flex; gap:.5rem; }
.ad-share-btns .asr-btn{ width:44px;height:44px; }

/* ================= DETAIL: AUTHOR CARD ================= */
.ad-author-card{
  display:flex; gap:1rem; align-items:flex-start;
  background:linear-gradient(135deg,#fff,#f8fafc);
  border:1px solid rgba(11,37,69,.06);
  border-radius:18px; padding:1.25rem; margin:1.5rem 0;
  box-shadow:0 4px 14px rgba(2,6,23,.04);
}
.ad-author-card-av{
  width:56px;height:56px;border-radius:16px; flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.3rem;
  box-shadow:0 8px 20px rgba(11,37,69,.25);
}
.ad-author-card-body{ min-width:0; }
.ad-author-card-name{ font-weight:800; font-size:1rem; letter-spacing:-.01em; }
.ad-author-card-desc{ color:var(--muted); font-size:.88rem; margin:.35rem 0 0; line-height:1.55; }

/* ================= DETAIL: RELATED ================= */
.ad-related{
  background:linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  padding:4rem 0;
  border-top:1px solid rgba(2,6,23,.05);
}
.ad-related-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; margin-bottom:2rem; flex-wrap:wrap;
}
.ad-related-eyebrow{
  display:inline-block; font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--accent); margin-bottom:.35rem;
}
.ad-related-title{
  font-size:1.75rem; font-weight:800; letter-spacing:-.02em; margin:0;
}
.ad-related-more{
  color:var(--brand); text-decoration:none; font-size:.9rem; font-weight:700;
  display:inline-flex; align-items:center; gap:.4rem; transition:gap .22s;
}
.ad-related-more:hover{ gap:.7rem; color:var(--accent); }

.ad-rel-card{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:18px; overflow:hidden;
  text-decoration:none; color:inherit;
  box-shadow:0 6px 20px rgba(2,6,23,.06);
  transition:.3s;
}
.ad-rel-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.ad-rel-thumb{
  aspect-ratio:16/10; position:relative; overflow:hidden; background:#eef2f7;
}
.ad-rel-thumb img{ width:100%;height:100%;object-fit:cover; transition:transform .5s; }
.ad-rel-card:hover .ad-rel-thumb img{ transform:scale(1.06); }
.ad-rel-body{ padding:1.1rem 1.15rem 1.25rem; flex:1; display:flex; flex-direction:column; }
.ad-rel-title{
  font-size:1.02rem; font-weight:700; line-height:1.35; margin:.1rem 0 .5rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ad-rel-card:hover .ad-rel-title{ color:var(--brand); }
.ad-rel-desc{
  color:var(--muted); font-size:.85rem; line-height:1.55; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  flex:1;
}

/* ================= MOBILE FAB ================= */
.ad-fab{
  position:fixed; right:1rem; bottom:100px; z-index:1050;
  display:flex; flex-direction:column; align-items:flex-end; gap:.6rem;
}
.ad-fab-main{
  width:56px;height:56px;border-radius:50%;border:0;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff; font-size:1.35rem;
  box-shadow:0 12px 28px rgba(230,57,70,.4);
  cursor:pointer; transition:.3s cubic-bezier(.34,1.56,.64,1);
}
.ad-fab.open .ad-fab-main{ transform:rotate(45deg); background:linear-gradient(135deg,#0f172a,#334155); }
.ad-fab-menu{
  display:flex; flex-direction:column; gap:.5rem;
  opacity:0; transform:translateY(20px) scale(.8);
  pointer-events:none; transition:.3s cubic-bezier(.34,1.56,.64,1);
}
.ad-fab.open .ad-fab-menu{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.ad-fab-menu .asr-btn{
  box-shadow:0 8px 18px rgba(2,6,23,.18);
  background:#fff;
}
@media (max-width: 991.98px){
  .ad-fab{ bottom:110px; }
  .ad-content{ font-size:1rem; line-height:1.75; }
  .ad-content h2{ font-size:1.35rem; }
  .ad-content h3{ font-size:1.15rem; }
}

/* ================= PREMIUM TOAST ================= */
.premium-toast{
  position:fixed; left:50%; bottom:30px; transform:translate(-50%, 60px);
  background:linear-gradient(135deg,#0f172a,#1e293b);
  color:#fff; padding:.85rem 1.4rem; border-radius:14px;
  font-size:.9rem; font-weight:600;
  box-shadow:0 20px 40px rgba(2,6,23,.35);
  opacity:0; pointer-events:none;
  transition:.4s cubic-bezier(.34,1.56,.64,1);
  z-index:1100;
  max-width:calc(100% - 2rem); text-align:center;
}
.premium-toast.show{ opacity:1; transform:translate(-50%, 0); }
@media (max-width: 991.98px){
  .premium-toast{ bottom:96px; }
}


/* ================= AUTH FRONT ================= */
.auth-front{
  min-height:100vh; padding:120px 1rem 60px;
  background:
    radial-gradient(1200px 500px at 90% -10%, rgba(230,57,70,.08), transparent 60%),
    radial-gradient(800px 400px at -10% 20%, rgba(11,37,69,.06), transparent 60%),
    var(--bg);
  display:grid; place-items:center;
}
.auth-front-card{
  width:100%; max-width:1000px;
  display:grid; grid-template-columns:1.05fr 1fr;
  background:#fff; border-radius:28px;
  box-shadow:0 30px 80px rgba(2,6,23,.14);
  overflow:hidden;
}
.afk-visual{
  background:linear-gradient(135deg,var(--brand) 0%, var(--brand-2) 55%, var(--accent) 120%);
  color:#fff; padding:2.5rem;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
}
.afk-visual::before{
  content:""; position:absolute; top:-100px; right:-100px;
  width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,183,3,.35), transparent 70%);
}
.afk-visual-content{ position:relative; z-index:1; }
.afk-brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:#fff; margin-bottom:2rem; }
.afk-badge{
  display:inline-block; padding:.4rem 1rem; border-radius:999px;
  background:rgba(255,255,255,.15); backdrop-filter:blur(8px);
  font-size:.8rem; font-weight:600; margin-bottom:1rem;
  border:1px solid rgba(255,255,255,.2);
}
.afk-title{ font-size:1.9rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; margin-bottom:.75rem; }
.afk-sub{ color:rgba(255,255,255,.75); margin-bottom:1.5rem; }
.afk-list{ list-style:none; padding:0; margin:0 0 2rem; display:flex; flex-direction:column; gap:.65rem; }
.afk-list li{ display:flex; align-items:center; gap:.6rem; font-size:.9rem; }
.afk-list i{ color:var(--gold); }
.afk-stats{ display:flex; gap:2rem; }
.afk-stats .num{ font-size:1.5rem; font-weight:800; }
.afk-stats .lbl{ font-size:.75rem; color:rgba(255,255,255,.7); }
.afk-deco{
  position:absolute; bottom:-30px; right:-30px;
  font-size:11rem; opacity:.08; line-height:1; transform:rotate(-15deg);
}

.afk-action{ padding:2.5rem; display:flex; flex-direction:column; justify-content:center; }
.afk-action-title{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; margin:0 0 .35rem; }
.afk-action-sub{ color:var(--muted); margin-bottom:1.5rem; }
.afk-action-sub a{ color:var(--accent); font-weight:600; text-decoration:none; }

.btn-google{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  padding:1rem 1.25rem; border-radius:14px;
  background:#fff; color:#334155;
  border:2px solid #e2e8f0; text-decoration:none;
  font-weight:700; font-size:1rem;
  transition:.25s; margin-bottom:1rem;
}
.btn-google:hover{
  border-color:var(--brand); color:var(--brand);
  box-shadow:0 10px 24px rgba(11,37,69,.1);
  transform:translateY(-2px);
}
.afk-terms{ color:var(--muted); font-size:.78rem; text-align:center; margin:1rem 0 1.5rem; }
.afk-terms a{ color:#475569; text-decoration:none; border-bottom:1px dashed #cbd5e1; }
.afk-note{
  display:flex; gap:.75rem; padding:1rem;
  background:linear-gradient(135deg, rgba(11,37,69,.05), rgba(230,57,70,.03));
  border:1px solid rgba(11,37,69,.08);
  border-radius:14px; font-size:.85rem;
}
.afk-note i{ color:var(--brand); font-size:1.15rem; flex-shrink:0; margin-top:.1rem; }

@media (max-width: 991.98px){
  .auth-front{ padding-top:100px; }
  .auth-front-card{ grid-template-columns:1fr; }
  .afk-action{ padding:2rem 1.5rem; }
}

/* ================= MEMBER DASHBOARD ================= */
.md-hero{
  padding:130px 0 40px;
  background:linear-gradient(135deg,var(--brand) 0%, var(--brand-2) 60%, #1e4d8c 100%);
  color:#fff; position:relative; overflow:hidden;
}
.md-hero::before{
  content:""; position:absolute; right:-100px; top:-100px;
  width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,183,3,.3), transparent 70%);
}
.md-hero-inner{
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  position:relative; z-index:1;
}
.md-avatar{
  width:88px; height:88px; border-radius:24px; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--gold));
  display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:2rem;
  overflow:hidden; border:3px solid rgba(255,255,255,.35);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.md-avatar img{ width:100%; height:100%; object-fit:cover; }
.md-hero-body{ flex:1; min-width:220px; }
.md-welcome{ color:rgba(255,255,255,.75); font-size:.9rem; }
.md-name{ font-size:1.75rem; font-weight:800; letter-spacing:-.02em; margin:.15rem 0 .75rem; }
.md-meta{ display:flex; flex-wrap:wrap; gap:1rem; font-size:.85rem; color:rgba(255,255,255,.85); }
.md-meta i{ margin-right:.35rem; opacity:.75; }
.md-kd code{
  background:rgba(255,255,255,.15); padding:.15rem .5rem; border-radius:6px;
  font-family:ui-monospace, monospace;
}

.md-kelas{
  display:flex; align-items:center; gap:.85rem;
  padding:.9rem 1.25rem; border-radius:18px;
  background:rgba(255,255,255,.15); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
}
.md-kelas i{ font-size:1.75rem; }
.md-kelas.premium{ background:linear-gradient(135deg, rgba(255,183,3,.28), rgba(255,183,3,.1)); border-color:rgba(255,183,3,.4); }
.md-kelas.premium i{ color:var(--gold); }
.md-kelas.expired{ background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.35); }
.md-kelas.free i{ color:rgba(255,255,255,.85); }
.mdk-title{ font-weight:800; font-size:1rem; }
.mdk-sub{ font-size:.75rem; color:rgba(255,255,255,.75); }

.md-stat{
  display:flex; align-items:center; gap:.85rem;
  background:#fff; border-radius:16px; padding:1.1rem;
  box-shadow:var(--shadow); border:1px solid rgba(2,6,23,.04);
}
.md-stat .ms-icon{
  width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center; color:#fff; font-size:1.2rem; flex-shrink:0;
}
.md-stat .tone-brand{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); }
.md-stat .tone-accent{ background:linear-gradient(135deg,var(--accent),#b91c1c); }
.md-stat .tone-gold{ background:linear-gradient(135deg,var(--gold),#f59e0b); }
.md-stat .tone-green{ background:linear-gradient(135deg,#10b981,#059669); }
.md-stat .ms-value{ font-size:1.35rem; font-weight:800; }
.md-stat .ms-label{ color:var(--muted); font-size:.8rem; }

.md-panel{
  background:#fff; border-radius:20px; padding:1.75rem;
  box-shadow:var(--shadow); border:1px solid rgba(2,6,23,.04);
  margin-bottom:1.5rem;
}
.md-panel-title{ font-size:1.1rem; font-weight:800; letter-spacing:-.01em; margin:0 0 1rem; }

.md-soon{ display:flex; flex-direction:column; gap:.75rem; }
.md-soon-item{
  display:flex; align-items:center; gap:1rem;
  padding:.9rem; border-radius:14px; background:#f8fafc;
  border:1px solid var(--line, #e8edf5);
}
.mds-icon{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  flex-shrink:0;
}
.mds-title{ font-weight:700; font-size:.9rem; }
.mds-badge{
  margin-left:auto;
  font-size:.7rem; font-weight:800; letter-spacing:.05em;
  padding:.3rem .6rem; border-radius:999px;
  background:rgba(255,183,3,.15); color:#b45309;
}

.md-account{ display:flex; flex-direction:column; gap:.85rem; }
.md-acc-row{ display:flex; gap:.85rem; align-items:flex-start; }
.md-acc-row i{
  width:36px;height:36px;border-radius:10px;
  background:#f1f5f9; color:var(--brand);
  display:grid; place-items:center; flex-shrink:0;
}
.md-acc-row code{
  background:#f1f5f9; padding:.15rem .5rem; border-radius:6px;
  font-family:ui-monospace, monospace; font-size:.85em;
}

.md-upgrade{
  background:linear-gradient(135deg, #0b2545, #13315c);
  color:#fff; text-align:center;
  border:none; padding:2rem 1.5rem;
}
.mdu-icon{
  font-size:2.5rem; color:var(--gold);
  margin-bottom:.75rem;
}
.mdu-title{ font-weight:800; font-size:1.1rem; margin-bottom:.4rem; }
.mdu-desc{ color:rgba(255,255,255,.75); font-size:.88rem; margin-bottom:1.25rem; }

@media (max-width: 767.98px){
  .md-hero{ padding:100px 0 30px; }
  .md-avatar{ width:72px;height:72px; font-size:1.5rem; }
  .md-name{ font-size:1.4rem; }
}

/* ================= BRAND MOBILE (auth) ================= */
.afk-brand-mobile{
  margin-bottom:1.75rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid rgba(2,6,23,.06);
}
.afk-brand-mobile-link{
  display:inline-flex; align-items:center; gap:.75rem;
  text-decoration:none; color:inherit;
}
.afk-brand-mobile-link .brand-text{
  font-weight:800; font-size:1.15rem; color:var(--brand);
  letter-spacing:-.02em; line-height:1.1;
}
.afk-brand-mobile-link .brand-text span{ color:var(--accent); }
.afk-brand-mobile-link small{
  color:var(--muted); font-size:.72rem; font-weight:600;
}

/* ================= APP PANEL (dashboard member) ================= */
.app-features{
  list-style:none; padding:0; margin:1rem 0 1.25rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.app-features li{ display:flex; align-items:center; gap:.6rem; font-size:.9rem; color:#334155; }
.app-features i{ color:var(--brand); }

.app-ready{
  display:flex; gap:1rem; align-items:center;
  padding:1.1rem 1.25rem; border-radius:14px;
  background:linear-gradient(135deg, rgba(16,185,129,.08), rgba(16,185,129,.02));
  border:1px solid rgba(16,185,129,.25);
}
.ar-icon{
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,#10b981,#059669);
  display:grid; place-items:center; color:#fff; font-size:1.4rem;
  flex-shrink:0;
  box-shadow:0 8px 20px rgba(16,185,129,.3);
}
.ar-title{ font-weight:800; color:#065f46; font-size:1rem; }
.ar-sub{ color:#047857; font-size:.85rem; margin-top:.15rem; }

/* ========================================================
   MODAL APLIKASI — PREMIUM EDITION
   ======================================================== */

/* ---------- CONTAINER ---------- */
.modal-premium-app .modal-dialog{ max-width:720px; }
.modal-premium-app .modal-content{
  border:0; border-radius:28px; overflow:hidden;
  box-shadow:
    0 40px 100px rgba(11,37,69,.35),
    0 0 0 1px rgba(255,255,255,.05) inset;
  background:#fff;
}
.modal-premium-app .modal-backdrop,
.modal-backdrop.show{ 
  background: radial-gradient(circle at 50% 30%, rgba(11,37,69,.75), rgba(2,6,23,.85));
  opacity:1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------- HEADER ---------- */
.modal-premium-app .amh{
  background: linear-gradient(135deg, #0b2545 0%, #13315c 50%, #1e4d8c 100%);
  color:#fff; padding:1.75rem 1.75rem 1.5rem; border:0;
  align-items:flex-start; gap:1.1rem;
  position:relative; overflow:hidden;
}
.modal-premium-app .amh::before{
  content:""; position:absolute; top:-80px; right:-80px;
  width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,183,3,.4), transparent 65%);
  animation: amhPulse 4s ease-in-out infinite;
}
.modal-premium-app .amh::after{
  content:""; position:absolute; bottom:-100px; left:-50px;
  width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle, rgba(230,57,70,.3), transparent 70%);
}
@keyframes amhPulse{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%{ transform:scale(1.15); opacity:1; }
}

.amh-icon{
  width:60px; height:60px; border-radius:18px; flex-shrink:0;
  background: linear-gradient(135deg, #e63946, #b91c1c);
  display:grid; place-items:center; color:#fff; font-size:1.65rem;
  box-shadow:
    0 12px 28px rgba(230,57,70,.45),
    0 0 0 6px rgba(255,255,255,.08);
  position:relative; z-index:2;
  animation: amhFloat 3s ease-in-out infinite;
}
@keyframes amhFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-3px) rotate(-3deg); }
}
.amh-body{ flex:1; position:relative; z-index:2; }
.modal-premium-app .modal-title{ 
  font-weight:800; letter-spacing:-.02em; color:#fff; 
  margin:0 0 .3rem; font-size:1.25rem;
}
.modal-premium-app .amh small{ 
  color:rgba(255,255,255,.78); font-size:.87rem; 
}
.modal-premium-app .btn-close{
  filter:invert(1) brightness(3); opacity:.75;
  background-size:14px; padding:.75rem; z-index:3;
  transition:.2s;
}
.modal-premium-app .btn-close:hover{ opacity:1; transform:rotate(90deg); }

/* ---------- BODY ---------- */
.modal-premium-app .modal-body{ 
  padding:1.75rem 1.75rem 1.5rem; 
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

/* ---------- FORM FIELDS ---------- */
.modal-premium-app .form-label-premium{
  font-size:.82rem; font-weight:700; color:#334155;
  margin-bottom:.4rem; letter-spacing:-.005em;
}
.modal-premium-app .form-control-premium,
.modal-premium-app .form-select-premium{
  border:2px solid #e8eef6;
  border-radius:14px;
  padding:.85rem 1.1rem;
  font-size:.94rem;
  background:#fff;
  transition: all .22s cubic-bezier(.34,1.2,.64,1);
  box-shadow: 0 1px 2px rgba(2,6,23,.02);
}
.modal-premium-app .form-control-premium:hover:not(:disabled),
.modal-premium-app .form-select-premium:hover{
  border-color:#cbd5e1;
}
.modal-premium-app .form-control-premium:focus,
.modal-premium-app .form-select-premium:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 5px rgba(11,37,69,.08), 0 4px 12px rgba(11,37,69,.08);
  outline:0;
}
.modal-premium-app .form-control-premium:disabled{
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  color:#64748b;
  border-style:dashed;
  cursor:not-allowed;
}
.modal-premium-app .form-hint{
  font-size:.76rem; color:#94a3b8; margin-top:.35rem;
  display:flex; align-items:center; gap:.3rem;
}

/* ---------- INFO BOX ---------- */
.modal-premium-app .app-info-box{
  display:flex; gap:.9rem;
  padding:1.1rem 1.2rem;
  background: linear-gradient(135deg, rgba(11,37,69,.06), rgba(230,57,70,.03));
  border:1px solid rgba(11,37,69,.1);
  border-radius:16px;
  position:relative; overflow:hidden;
}
.modal-premium-app .app-info-box::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
}
.modal-premium-app .aib-icon{
  color: var(--brand); font-size:1.35rem; flex-shrink:0;
  margin-top:.1rem;
}
.modal-premium-app .app-info-box small{ 
  color:#64748b; line-height:1.5; 
}

/* ---------- PASSWORD FIELD ---------- */
.modal-premium-app .field-pass{ position:relative; }
.modal-premium-app .field-pass .form-control-premium{ padding-right:3rem; }
.modal-premium-app .eye-btn{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:#94a3b8;
  padding:.5rem .7rem; cursor:pointer; border-radius:10px;
  transition:.2s;
}
.modal-premium-app .eye-btn:hover{ 
  background:rgba(11,37,69,.06); color:var(--brand); 
}

/* ---------- CHECKBOX RESET DEVICE ---------- */
.modal-premium-app .check-reset{
  display:flex; gap:.85rem; align-items:flex-start; cursor:pointer;
  padding:1.1rem 1.25rem;
  background: linear-gradient(135deg, rgba(255,183,3,.1), rgba(255,183,3,.02));
  border:2px solid rgba(255,183,3,.35);
  border-radius:16px;
  transition: all .25s;
}
.modal-premium-app .check-reset:hover{
  background: linear-gradient(135deg, rgba(255,183,3,.15), rgba(255,183,3,.05));
  border-color: rgba(255,183,3,.55);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255,183,3,.18);
}
.modal-premium-app .check-reset input{ display:none; }
.modal-premium-app .cr-box{
  width:24px; height:24px; border-radius:8px; flex-shrink:0;
  border:2px solid #cbd5e1; background:#fff;
  display:grid; place-items:center;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
  color:#fff; font-size:.82rem; font-weight:bold;
}
.modal-premium-app .check-reset input:checked + .cr-box{
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: #f59e0b;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(251,191,36,.4);
}
.modal-premium-app .check-reset b{ 
  color:#92400e; display:block; margin-bottom:.15rem; font-size:.9rem;
}
.modal-premium-app .check-reset small{ color:#b45309; font-size:.78rem; line-height:1.45; }

/* ---------- FOOTER ---------- */
.modal-premium-app .amf{
  border:0; padding:1.25rem 1.75rem 1.5rem;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-top:1px solid rgba(11,37,69,.05);
  display:flex; gap:.65rem; justify-content:flex-end;
  border-radius: 0 0 28px 28px;
}
.modal-premium-app .amf .btn{
  padding:.75rem 1.5rem; font-weight:700; border-radius:14px;
  transition: all .25s cubic-bezier(.34,1.2,.64,1);
}
.modal-premium-app .amf .btn-brand{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 20px rgba(11,37,69,.28);
  position:relative; overflow:hidden;
}
.modal-premium-app .amf .btn-brand::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s;
}
.modal-premium-app .amf .btn-brand:hover::before{ transform: translateX(100%); }
.modal-premium-app .amf .btn-brand:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(11,37,69,.4);
}

/* ---------- LOADING ---------- */
.modal-premium-app .app-loading{
  text-align:center; padding:3rem 1rem;
}
.modal-premium-app .al-spinner{
  width:70px;height:70px; margin:0 auto 1.5rem;
  border-radius:50%; border:4px solid rgba(11,37,69,.08);
  border-top-color: var(--brand);
  border-right-color: var(--accent);
  animation: appSpin .9s linear infinite;
  box-shadow: 0 8px 30px rgba(11,37,69,.12);
}
@keyframes appSpin{ to{ transform:rotate(360deg); } }
.modal-premium-app .al-text{ 
  font-weight:800; font-size:1.15rem; color:var(--brand); 
  margin-bottom:.4rem; letter-spacing:-.01em;
}

/* ---------- SUCCESS ---------- */
.modal-premium-app .app-success{
  text-align:center; padding:2.5rem 1rem;
  animation: appFadeIn .5s cubic-bezier(.34,1.4,.64,1);
}
@keyframes appFadeIn{ from{ opacity:0; transform:translateY(15px); } to{ opacity:1; transform:translateY(0); } }
.modal-premium-app .as-icon{
  width:96px;height:96px;margin:0 auto 1.5rem;
  border-radius:50%;
  background: linear-gradient(135deg, #10b981, #059669);
  display:grid; place-items:center; color:#fff; font-size:3rem;
  animation: appPop .6s cubic-bezier(.34,1.56,.64,1);
  box-shadow:
    0 20px 50px rgba(16,185,129,.4),
    0 0 0 12px rgba(16,185,129,.1);
  position:relative;
}
.modal-premium-app .as-icon::after{
  content:""; position:absolute; inset:-15px; border-radius:50%;
  border:2px solid rgba(16,185,129,.3);
  animation: appRipple 1.5s ease-out infinite;
}
@keyframes appRipple{
  0%{ transform:scale(.8); opacity:1; }
  100%{ transform:scale(1.3); opacity:0; }
}
@keyframes appPop{
  from{ transform:scale(.3) rotate(-30deg); opacity:0; }
  to{ transform:scale(1) rotate(0); opacity:1; }
}
.modal-premium-app .as-title{
  font-size:1.45rem; font-weight:800; color:#065f46; 
  margin-bottom:.5rem; letter-spacing:-.02em;
}
.modal-premium-app .as-desc{ color:#64748b; font-size:.97rem; line-height:1.55; }

/* ---------- ERROR ---------- */
.modal-premium-app .app-error{
  text-align:center; padding:2.5rem 1rem;
  animation: appFadeIn .4s cubic-bezier(.34,1.4,.64,1);
}
.modal-premium-app .ae-icon{
  width:86px;height:86px;margin:0 auto 1.5rem;
  border-radius:50%;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  display:grid; place-items:center; color:#fff; font-size:2.4rem;
  animation: appShake .5s cubic-bezier(.36,.07,.19,.97);
  box-shadow:
    0 20px 50px rgba(239,68,68,.35),
    0 0 0 12px rgba(239,68,68,.08);
}
@keyframes appShake{
  10%,90%{ transform:translateX(-2px); }
  20%,80%{ transform:translateX(4px); }
  30%,50%,70%{ transform:translateX(-8px); }
  40%,60%{ transform:translateX(8px); }
}
.modal-premium-app .ae-title{
  font-size:1.3rem; font-weight:800; color:#991b1b; 
  margin-bottom:.5rem; letter-spacing:-.02em;
}
.modal-premium-app .ae-desc{ color:#7f1d1d; font-size:.93rem; line-height:1.55; max-width:400px; margin:0 auto; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 767.98px){
  .modal-premium-app .modal-dialog{ margin:.75rem; max-width:calc(100% - 1.5rem); }
  .modal-premium-app .modal-content{ border-radius:22px; }
  .modal-premium-app .amh{ padding:1.25rem; }
  .amh-icon{ width:48px;height:48px; font-size:1.3rem; border-radius:14px; }
  .modal-premium-app .modal-title{ font-size:1.05rem; }
  .modal-premium-app .amh small{ font-size:.78rem; }
  .modal-premium-app .modal-body{ padding:1.25rem; }
  .modal-premium-app .amf{ padding:1rem 1.25rem 1.25rem; }
  .modal-premium-app .amf .btn{ padding:.65rem 1.15rem; font-size:.9rem; }
  .modal-premium-app .as-icon{ width:76px;height:76px;font-size:2.4rem; }
  .modal-premium-app .as-title{ font-size:1.2rem; }
  .modal-premium-app .ae-icon{ width:70px;height:70px;font-size:1.9rem; }
}

/* ---------- APP FEATURES + READY (dashboard) ---------- */
.modal-premium-app ~ .app-features, .app-features{
  list-style:none; padding:0; margin:1rem 0 1.25rem;
  display:flex; flex-direction:column; gap:.6rem;
}
.app-features li{ 
  display:flex; align-items:center; gap:.65rem; 
  font-size:.9rem; color:#334155; font-weight:500;
}
.app-features i{ color:var(--brand); font-size:1.05rem; }

.app-ready{
  display:flex; gap:1.1rem; align-items:center;
  padding:1.25rem 1.35rem; border-radius:16px;
  background: linear-gradient(135deg, rgba(16,185,129,.09), rgba(16,185,129,.02));
  border:1px solid rgba(16,185,129,.28);
  position:relative; overflow:hidden;
}
.app-ready::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, #10b981, #059669);
}
.app-ready .ar-icon{
  width:54px; height:54px; border-radius:50%;
  background: linear-gradient(135deg, #10b981, #059669);
  display:grid; place-items:center; color:#fff; font-size:1.55rem;
  flex-shrink:0;
  box-shadow: 0 10px 24px rgba(16,185,129,.35);
}
.app-ready .ar-title{ 
  font-weight:800; color:#065f46; font-size:1.02rem; letter-spacing:-.01em;
}
.app-ready .ar-sub{ 
  color:#047857; font-size:.86rem; margin-top:.2rem; line-height:1.5;
}
.app-ready .ar-sub b{ color:#065f46; }


/* ================= APP DOWNLOAD CTA ================= */
.app-download-cta{
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  padding:1.35rem 1.5rem; border-radius:18px;
  margin-top:1.25rem;
  background:
    linear-gradient(135deg, #0b2545 0%, #13315c 60%, #1e4d8c 100%);
  color:#fff;
  position:relative; overflow:hidden;
  box-shadow: 0 12px 30px rgba(11,37,69,.25);
}
.app-download-cta::before{
  content:""; position:absolute; right:-60px; bottom:-60px;
  width:200px; height:200px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,183,3,.35), transparent 70%);
  pointer-events:none;
}
.adc-left{ display:flex; align-items:center; gap:1rem; position:relative; z-index:1; min-width:0; }
.adc-icon{
  width:56px; height:56px; border-radius:16px; flex-shrink:0;
  background: linear-gradient(135deg, #e63946, #b91c1c);
  display:grid; place-items:center; color:#fff; font-size:1.65rem;
  box-shadow: 0 10px 24px rgba(230,57,70,.45);
}
.adc-title{ font-weight:800; font-size:1.02rem; letter-spacing:-.01em; }
.adc-sub{ color:rgba(255,255,255,.75); font-size:.85rem; margin-top:.15rem; }
.adc-btn{
  position:relative; z-index:1; flex-shrink:0;
  background: #fff !important; color: var(--brand) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
  font-weight: 800 !important;
}
.adc-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(0,0,0,.35) !important;
  background: #ffb703 !important; color: #0b2545 !important;
}
.adc-btn i{ font-size:1.1rem; }

.app-no-apk{
  display:flex; gap:.75rem; align-items:flex-start;
  margin-top:1.25rem; padding:1rem 1.15rem;
  background: linear-gradient(135deg, rgв(255,183,3,.1), rgba(255,183,3,.02));
  border:1px solid rgba(255,183,3,.35);
  border-radius:14px;
  color:#92400e; font-size:.87rem; line-height:1.5;
}
.app-no-apk i{ color:#d97706; font-size:1.15rem; flex-shrink:0; margin-top:.1rem; }

@media (max-width: 767.98px){
  .app-download-cta{
    flex-direction:column; align-items:stretch; text-align:left;
    padding:1.25rem;
  }
  .adc-left{ width:100%; }
  .adc-btn{ width:100%; justify-content:center; }
  .adc-icon{ width:48px; height:48px; font-size:1.4rem; }
  .adc-title{ font-size:.95rem; }
  .adc-sub{ font-size:.8rem; }
}


/* ==========================================================
   PREMIUM ALERT — toast + modal
   ========================================================== */

/* ---------- TOAST (notifikasi kanan atas / tengah bawah) ---------- */
.pa-toast{
  position: fixed;
  top: 90px; right: 1.25rem;
  z-index: 99999;
  display: flex; align-items: center; gap: .85rem;
  min-width: 300px; max-width: 420px;
  padding: .95rem 1.15rem;
  border-radius: 16px;
  background: #fff;
  color: #1e293b;
  font-size: .92rem; font-weight: 600;
  box-shadow:
    0 20px 50px rgba(2,6,23,.18),
    0 0 0 1px rgba(2,6,23,.04);
  transform: translateX(calc(100% + 2rem)) scale(.9);
  opacity: 0;
  pointer-events: none;
  transition: all .4s cubic-bezier(.34,1.56,.64,1);
}
.pa-toast.show{
  transform: translateX(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.pa-toast-icon{
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: 1.15rem;
}
.pa-toast-msg{ flex: 1; min-width: 0; }
.pa-toast-close{
  width: 26px; height: 26px; border: 0;
  background: transparent; color: #94a3b8;
  display: grid; place-items: center; cursor: pointer;
  border-radius: 8px; transition: .2s; padding: 0;
}
.pa-toast-close:hover{ background: rgba(2,6,23,.06); color: #334155; }

/* Varian warna */
.pa-toast-success .pa-toast-icon{ background: linear-gradient(135deg,#10b981,#059669); }
.pa-toast-success{ border-left: 4px solid #10b981; }
.pa-toast-error   .pa-toast-icon{ background: linear-gradient(135deg,#ef4444,#b91c1c); }
.pa-toast-error   { border-left: 4px solid #ef4444; }
.pa-toast-warning .pa-toast-icon{ background: linear-gradient(135deg,#fbbf24,#f59e0b); }
.pa-toast-warning { border-left: 4px solid #fbbf24; }
.pa-toast-info    .pa-toast-icon{ background: linear-gradient(135deg,#0b2545,#13315c); }
.pa-toast-info    { border-left: 4px solid #0b2545; }

@media (max-width: 767.98px){
  .pa-toast{
    top: auto; bottom: 96px; left: 1rem; right: 1rem;
    min-width: 0; max-width: none;
    transform: translateY(100%) scale(.9);
  }
  .pa-toast.show{ transform: translateY(0) scale(1); }
}

/* ---------- MODAL ---------- */
.pa-modal .modal-dialog{ max-width: 440px; }
.pa-modal .modal-content{
  border: 0; border-radius: 24px; overflow: hidden;
  padding: 2rem 1.75rem 1.5rem;
  text-align: center;
  box-shadow:
    0 40px 100px rgba(11,37,69,.35),
    0 0 0 1px rgba(255,255,255,.05) inset;
  background: linear-gradient(180deg, #ffffff 0 0, #fbfcfe 100%);
  position: relative;
}
.pa-modal .modal-content::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--brand), var(--accent), var(--gold));
}

.pa-icon{
  width: 82px; height: 82px; margin: 0 auto 1.35rem;
  border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-size: 2.4rem;
  position: relative;
  animation: paPop .5s cubic-bezier(.34,1.56,.64,1);
}
.pa-icon::after{
  content: ""; position: absolute; inset: -14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: .22;
  animation: paRipple 1.8s ease-out infinite;
}
@keyframes paPop{
  from { transform: scale(.4) rotate(-25deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes paRipple{
  0%   { transform: scale(.85); opacity: .35; }
  100% { transform: scale(1.35); opacity: 0; }
}

.pa-icon-success{
  background: linear-gradient(135deg,#10b981,#059669);
  color: #10b981;
  box-shadow: 0 15px 40px rgba(16,185,129,.35);
}
.pa-icon-success i{ color: #fff; }
.pa-icon-error{
  background: linear-gradient(135deg,#ef4444,#b91c1c);
  color: #ef4444;
  box-shadow: 0 15px 40px rgba(239,68,68,.35);
}
.pa-icon-error i{ color: #fff; }
.pa-icon-warning{
  background: linear-gradient(135deg,#fbbf24,#f59e0b);
  color: #fbbf24;
  box-shadow: 0 15px 40px rgba(251,191,36,.4);
}
.pa-icon-warning i{ color: #fff; }
.pa-icon-info, .pa-icon-question{
  background: linear-gradient(135deg,#0b2545,#13315c);
  color: #0b2545;
  box-shadow: 0 15px 40px rgba(11,37,69,.35);
}
.pa-icon-info i, .pa-icon-question i{ color: #fff; }

.pa-title{
  font-weight: 800; letter-spacing: -.02em;
  font-size: 1.25rem; margin: 0 0 .6rem; color: #0f172a;
}
.pa-body{
  color: #64748b; font-size: .94rem; line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 360px; margin-left: auto; margin-right: auto;
}
.pa-body b, .pa-body strong{ color: #334155; }

.pa-actions{
  display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap;
}
.pa-btn{
  min-width: 110px;
  padding: .75rem 1.5rem;
  border-radius: 14px;
  font-weight: 700; font-size: .94rem;
  border: 0; cursor: pointer;
  transition: all .25s cubic-bezier(.34,1.2,.64,1);
  position: relative; overflow: hidden;
}
.pa-btn-ok{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 8px 20px rgba(11,37,69,.28);
}
.pa-btn-ok:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(11,37,69,.4);
}
.pa-btn-cancel{
  background: #f1f5f9; color: #475569;
  border: 1px solid #e2e8f0;
}
.pa-btn-cancel:hover{
  background: #e2e8f0; color: #1e293b;
  transform: translateY(-2px);
}

.pa-modal .modal-backdrop { background: rgba(2,6,23,.7); }

@media (max-width: 480px){
  .pa-modal .modal-dialog{ margin: .75rem; }
  .pa-modal .modal-content{ padding: 1.6rem 1.25rem 1.25rem; }
  .pa-icon{ width: 68px; height: 68px; font-size: 2rem; }
  .pa-title{ font-size: 1.12rem; }
  .pa-btn{ min-width: 0; flex: 1; padding: .7rem 1rem; }
}

/* ================= KELAS RADIO (modal) ================= */
.kelas-radio-group{
  display: flex; flex-direction: column; gap: .65rem;
  margin-top: .35rem;
}
.kelas-radio-option{
  cursor: pointer; position: relative;
  display: block;
}
.kelas-radio-option input{
  position: absolute; opacity: 0; pointer-events: none;
}
.kro-inner{
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.15rem;
  border: 2px solid #e2e8f0; border-radius: 16px;
  background: #fff; transition: all .25s cubic-bezier(.34,1.2,.64,1);
}
.kelas-radio-option:hover .kro-inner{
  border-color: #cbd5e1;
  transform: translateY(-1px);
}
.kro-icon{
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.5rem; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, #0b2545, #13315c);
  transition: .25s;
}
.kelas-radio-option.premium .kro-icon{
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 8px 20px rgba(251,191,36,.35);
}
.kro-body{ flex: 1; min-width: 0; }
.kro-title{
  font-weight: 800; font-size: 1rem; color: #0f172a;
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
}
.kro-price{
  font-size: .76rem; font-weight: 800;
  padding: .2rem .6rem; border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff; letter-spacing: .01em;
}
.kro-price.free{
  background: rgba(11,37,69,.08); color: var(--brand);
}
.kro-tagline{
  color: #64748b; font-size: .82rem; margin-top: .25rem;
}
.kro-check{
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #cbd5e1; background: #fff;
  display: grid; place-items: center;
  color: transparent; font-size: .8rem;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
.kelas-radio-option input:checked ~ .kro-inner{
  border-color: var(--brand);
  background: linear-gradient(135deg, rgba(11,37,69,.05), rgba(11,37,69,.01));
  box-shadow: 0 6px 20px rgba(11,37,69,.12);
}
.kelas-radio-option.premium input:checked ~ .kro-inner{
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(251,191,36,.1), rgba(251,191,36,.02));
  box-shadow: 0 6px 20px rgba(251,191,36,.2);
}
.kelas-radio-option input:checked ~ .kro-inner .kro-check{
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.kelas-radio-option.premium input:checked ~ .kro-inner .kro-check{
  background: linear-gradient(135deg, #fbbf24, #f59e0b); border-color: #f59e0b;
}


/* ================= APP READY BADGE ================= */
.ar-badge{
  display: inline-block; margin-left: .55rem;
  padding: .18rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .02em;
  vertical-align: middle;
}
.ar-badge.free{
  background: rgba(11,37,69,.1); color: var(--brand);
}
.ar-badge.penuh{ /* premium */
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  box-shadow: 0 4px 12px rgba(251,191,36,.35);
}
.ar-icon.premium{
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  box-shadow: 0 10px 24px rgba(251,191,36,.4) !important;
}

/* ================= DEVICE WARNING ================= */
.device-warning{
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1.1rem 1.25rem; margin-top: 1rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(11,37,69,.06), rgba(11,37,69,.02));
  border: 1px solid rgba(11,37,69,.12);
  color: #334155; font-size: .87rem; line-height: 1.55;
}
.device-warning i{
  color: var(--brand); font-size: 1.3rem; flex-shrink: 0; margin-top: .05rem;
}
.device-warning b{ color: #0f172a; display: block; margin-bottom: .15rem; }
.device-warning span{ color: #475569; }
.device-warning.compact{
  padding: .85rem 1rem; font-size: .82rem;
  background: linear-gradient(135deg, rgba(255,183,3,.08), rgba(255,183,3,.02));
  border-color: rgba(255,183,3,.35); color: #92400e;
}
.device-warning.compact i{ color: #d97706; font-size: 1.05rem; }
.device-warning.compact b{ color: #92400e; display: inline; }

/* ================= KELAS COMPARE ================= */
.kelas-compare{
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-top: 1.25rem;
}
.kc-card{
  padding: 1.25rem; border-radius: 18px;
  border: 2px solid #e2e8f0; background: #fff;
  transition: .25s; position: relative;
}
.kc-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px rgba(2,6,23,.08); }
.kc-card.premium{
  border-color: #fbbf24;
  background: linear-gradient(135deg, #fffbeb, #fff);
  box-shadow: 0 8px 24px rgba(251,191,36,.15);
}
.kc-badge{
  position: absolute; top: -12px; right: 12px;
  padding: .25rem .7rem; border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff; font-size: .7rem; font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 4px 12px rgba(251,191,36,.4);
}
.kc-head{
  display: flex; align-items: center; gap: .85rem;
  padding-bottom: .85rem; border-bottom: 1px solid #f1f5f9;
  margin-bottom: .85rem;
}
.kc-card.free .kc-head i{
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; color: #fff; font-size: 1.2rem;
  background: linear-gradient(135deg, #0b2545, #13315c);
}
.kc-card.premium .kc-head i{
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; color: #fff; font-size: 1.2rem;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 8px 18px rgba(251,191,36,.35);
}
.kc-title{ font-weight: 800; font-size: 1rem; color: #0f172a; }
.kc-price{
  font-weight: 800; font-size: .92rem; color: var(--brand); margin-top: .1rem;
}
.kc-card.premium .kc-price{ color: #b45309; }
.kc-price span{ font-weight: 600; font-size: .75rem; color: #94a3b8; }
.kc-list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .5rem;
}
.kc-list li{
  display: flex; align-items: center; gap: .5rem;
  font-size: .84rem; color: #334155;
}
.kc-list li i{ font-size: .9rem; color: #10b981; flex-shrink: 0; }
.kc-list li.off{ color: #94a3b8; }
.kc-list li.off i{ color: #cbd5e1; }

@media (max-width: 575.98px){
  .kelas-compare{ grid-template-columns: 1fr; gap: .75rem; }
}


/* ========================================================
   PLAY STORE STYLE DOWNLOAD PAGE
   ======================================================== */

/* ================= HERO ================= */
.ps-hero{
  padding: 130px 0 40px;
  background:
    radial-gradient(1200px 500px at 90% -10%, rgba(251,191,36,.12), transparent 60%),
    radial-gradient(800px 400px at -10% 20%, rgba(11,37,69,.06), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}
.ps-hero-inner{
  display: flex; gap: 2.25rem; align-items: center;
  flex-wrap: wrap;
}
.ps-app-icon{
  width: 148px; height: 148px; border-radius: 32px;
  overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: grid; place-items: center;
  box-shadow:
    0 25px 60px rgba(11,37,69,.35),
    0 0 0 8px rgba(11,37,69,.05);
}
.ps-app-icon img{ width: 100%; height: 100%; object-fit: cover; }
.ps-app-icon-fallback{
  font-size: 4.5rem; color: #fff;
}
.ps-hero-body{ flex: 1; min-width: 280px; }
.ps-app-name{
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800; letter-spacing: -.03em;
  margin: 0 0 .35rem; color: #0f172a; line-height: 1.15;
}
.ps-app-dev{
  color: var(--brand); font-weight: 700; font-size: .92rem;
  margin-bottom: 1.25rem;
}
.ps-app-stats{
  display: flex; align-items: center; gap: 1.25rem;
  flex-wrap: wrap; margin-bottom: 1.75rem;
}
.ps-stat{
  display: flex; flex-direction: column; align-items: center;
  gap: .15rem; min-width: 70px;
}
.ps-stat b{
  font-size: 1.05rem; font-weight: 800; color: #0f172a;
  letter-spacing: -.01em;
}
.ps-stat span{
  display: flex; gap: 1px; color: #fbbf24; font-size: .65rem;
}
.ps-stat small{
  color: #94a3b8; font-size: .7rem; font-weight: 600;
}
.ps-stat-sep{
  width: 1px; height: 32px; background: #e2e8f0;
}
.ps-btn-install{
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: .95rem 2.25rem; min-width: 220px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0b2545, #13315c);
  color: #fff; font-size: 1.05rem; font-weight: 800;
  border: 0; cursor: pointer;
  box-shadow: 0 12px 30px rgba(11,37,69,.3);
  transition: all .25s cubic-bezier(.34,1.2,.64,1);
  text-decoration: none;
}
.ps-btn-install:hover{
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 20px 45px rgba(11,37,69,.42);
  background: linear-gradient(135deg, #13315c, #1e4d8c);
}
.ps-btn-install i{ font-size: 1.25rem; }
.ps-btn-install[disabled]{
  background: #e2e8f0; color: #94a3b8;
  cursor: not-allowed; box-shadow: none;
}
.ps-btn-install[disabled]:hover{ transform: none; }

.ps-app-chips{
  display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem;
}
.ps-app-chips > span{
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: 999px;
  background: #fff; color: #475569;
  font-size: .78rem; font-weight: 700;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(2,6,23,.04);
}
.ps-app-chips i{ color: var(--brand); font-size: .9rem; }
.chip-safe i{ color: #10b981; }
.chip-device i{ color: #f59e0b; }

@media (max-width: 767.98px){
  .ps-hero{ padding: 100px 0 30px; }
  .ps-app-icon{ width: 100px; height: 100px; border-radius: 24px; }
  .ps-app-icon-fallback{ font-size: 3rem; }
  .ps-app-stats{ gap: .85rem; }
  .ps-stat-sep{ display: none; }
  .ps-stat{ min-width: 0; flex-direction: row; gap: .5rem; align-items: baseline; }
  .ps-btn-install{ width: 100%; }
}

/* ================= SECTION HEADER ================= */
.ps-section-head{ text-align: center; margin-bottom: 2rem; }
.ps-section-head h2{
  font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  color: #0f172a; margin: 0 0 .35rem;
}
.ps-section-head p{ color: var(--muted); margin: 0; }

/* ================= SCREENSHOTS SLIDER ================= */
.ps-screenshots{
  padding: 3rem 0 3.5rem;
  background: linear-gradient(180deg, var(--bg) 0%, #fff 100%);
}
.ps-slider-wrap{ overflow: hidden; margin: 0 -.75rem; }
.ps-slider{
  display: flex; gap: 1rem;
  padding: .5rem .75rem 2rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ps-slider::-webkit-scrollbar{ display: none; }
.ps-slide{
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  scroll-snap-align: center;
  width: 240px;
}
.ps-slide-frame{
  width: 100%; aspect-ratio: 9/16;
  border-radius: 24px; padding: 10px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  box-shadow:
    0 20px 50px rgba(2,6,23,.25),
    0 0 0 1px rgba(255,255,255,.05) inset;
  transition: all .35s cubic-bezier(.34,1.2,.64,1);
}
.ps-slide:hover .ps-slide-frame{
  transform: translateY(-8px);
  box-shadow:
    0 30px 70px rgba(2,6,23,.35),
    0 0 0 1px rgba(255,255,255,.1) inset;
}
.ps-slide-screen{
  width: 100%; height: 100%;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(251,191,36,.15), transparent 60%),
    linear-gradient(135deg, var(--brand), var(--brand-2));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff; gap: 1rem;
  padding: 2rem 1rem; text-align: center;
  position: relative; overflow: hidden;
}
.ps-slide-screen::before{
  content: ""; position: absolute; inset: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.15)"/><circle cx="80" cy="30" r="1" fill="rgba(255,255,255,0.15)"/><circle cx="50" cy="80" r="1" fill="rgba(255,255,255,0.15)"/></svg>');
  opacity: .5;
}
.ps-slide-screen i{
  font-size: 3.5rem; color: rgba(255,255,255,.9);
  position: relative; z-index: 1;
}
.ps-slide-title{
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em;
  position: relative; z-index: 1;
}
.ps-slide-desc{
  font-size: .82rem; color: rgba(255,255,255,.75);
  line-height: 1.4; position: relative; z-index: 1;
  max-width: 160px;
}
.ps-slide-label{
  margin-top: .85rem; color: #475569;
  font-weight: 700; font-size: .82rem;
}

.ps-slider-dots{
  display: flex; justify-content: center; gap: .4rem;
  margin-top: 1.5rem;
}
.ps-dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: #cbd5e1; border: 0; padding: 0;
  cursor: pointer; transition: all .3s;
}
.ps-dot.active{
  width: 24px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

@media (max-width: 575.98px){
  .ps-slide{ width: 200px; }
  .ps-slide-screen i{ font-size: 2.75rem; }
}

/* ================= FITUR ================= */
.ps-features{ padding: 3rem 0; background: #fff; }
.ps-features-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.ps-feat-item{
  display: flex; gap: .95rem; align-items: flex-start;
  padding: 1.35rem; border-radius: 18px;
  background: linear-gradient(135deg, #f8fafc, #fff);
  border: 1px solid rgba(2,6,23,.05);
  transition: all .25s;
}
.ps-feat-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(2,6,23,.08);
  border-color: rgba(11,37,69,.15);
}
.ps-feat-icon{
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  color: #fff; font-size: 1.4rem; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 20px rgba(11,37,69,.2);
}
.ps-feat-item:nth-child(2n) .ps-feat-icon{
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 8px 20px rgba(251,191,36,.3);
}
.ps-feat-item:nth-child(3n) .ps-feat-icon{
  background: linear-gradient(135deg, var(--accent), #b91c1c);
  box-shadow: 0 8px 20px rgba(230,57,70,.3);
}
.ps-feat-title{ font-weight: 800; color: #0f172a; font-size: 1rem; margin-bottom: .25rem; }
.ps-feat-desc{ color: var(--muted); font-size: .85rem; line-height: 1.5; }

/* ================= INFO ================= */
.ps-info{ padding: 3rem 0; background: linear-gradient(180deg, #fff, var(--bg)); }
.ps-info-card{
  background: #fff; border-radius: 22px; padding: 1.75rem;
  border: 1px solid rgba(2,6,23,.05);
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
  height: 100%;
}
.ps-info-title{
  font-weight: 800; letter-spacing: -.01em;
  font-size: 1.2rem; margin: 0 0 1rem; color: #0f172a;
}
.ps-info-card p{ color: #475569; line-height: 1.7; margin-bottom: 1.25rem; }
.ps-info-grid{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 1.5rem;
  padding-top: 1.25rem; border-top: 1px solid #f1f5f9;
}
.ps-info-grid > div .label{
  color: #94a3b8; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: .2rem;
}
.ps-info-grid > div .value{
  font-weight: 800; color: #0f172a; font-size: .95rem;
}

.ps-warning-card{
  background: linear-gradient(135deg, #fff7ed, #fff);
  border-color: rgba(251,191,36,.35);
}
.ps-warn-icon{
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff; font-size: 1.5rem; margin-bottom: 1rem;
  box-shadow: 0 10px 25px rgba(251,191,36,.35);
}
.ps-steps{
  display: flex; flex-direction: column; gap: .75rem;
  margin-top: 1rem;
}
.ps-step{
  display: flex; align-items: center; gap: .75rem;
  font-size: .88rem; color: #334155;
}
.ps-step-num{
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; font-weight: 800; font-size: .8rem; flex-shrink: 0;
}

/* ================= CTA STICKY ================= */
.ps-cta-sticky{
  position: sticky; bottom: 0; z-index: 100;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(2,6,23,.08);
  padding: .9rem 0;
  box-shadow: 0 -8px 24px rgba(2,6,23,.06);
}
.ps-cta-inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.ps-cta-left{
  display: flex; align-items: center; gap: .85rem; min-width: 0;
}
.ps-cta-left > i{
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; font-size: 1.35rem; flex-shrink: 0;
}
.ps-cta-title{ font-weight: 800; color: #0f172a; font-size: .95rem; }
.ps-cta-desc{ color: var(--muted); font-size: .78rem; }
.ps-btn-sm{
  padding: .7rem 1.5rem; min-width: auto; font-size: .92rem;
}
@media (max-width: 575.98px){
  .ps-cta-inner{ flex-direction: column; align-items: stretch; }
  .ps-btn-sm{ width: 100%; }
}



/* ==========================================================
   MEMBER DASHBOARD REDESIGN — PREMIUM EDITION
   ========================================================== */

/* ---------- PANEL HERO PLAN (State A) ---------- */
.panel-hero-plan{ padding: 2rem; background: #fff; }
.php-head{ text-align: center; margin-bottom: 1.75rem; }
.php-eyebrow{
  display: inline-block; padding: .35rem .9rem; border-radius: 999px;
  background: rgba(11,37,69,.08); color: var(--brand);
  font-size: .78rem; font-weight: 800; margin-bottom: .85rem;
}
.php-title{
  font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 .5rem; color: #0f172a;
}
.php-sub{ color: var(--muted); margin: 0 auto; max-width: 560px; font-size: .95rem; line-height: 1.6; }

.plan-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem;
  margin-bottom: 1.5rem;
}
.plan-card{
  position: relative;
  padding: 1.5rem; border-radius: 20px;
  border: 2px solid #e2e8f0; background: #fff;
  transition: all .3s cubic-bezier(.34,1.2,.64,1);
  display: flex; flex-direction: column;
}
.plan-card:hover{ transform: translateY(-4px); box-shadow: 0 15px 40px rgba(2,6,23,.1); }
.plan-card.premium{
  border-color: #fbbf24;
  background: linear-gradient(135deg, #fffdf5, #fff);
  box-shadow: 0 10px 32px rgba(251,191,36,.18);
}
.plan-card.premium:hover{
  box-shadow: 0 20px 50px rgba(251,191,36,.28);
  border-color: #f59e0b;
}

.plan-badge{
  position: absolute; top: -14px; right: 16px;
  padding: .3rem .75rem; border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff; font-size: .7rem; font-weight: 800;
  letter-spacing: .03em;
  box-shadow: 0 6px 16px rgba(251,191,36,.45);
}

.plan-head{
  display: flex; align-items: center; gap: .9rem;
  padding-bottom: 1.1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid #f1f5f9;
}
.plan-icon{
  width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: 1.55rem;
  background: linear-gradient(135deg, #0b2545, #13315c);
}
.plan-card.premium .plan-icon{
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 10px 24px rgba(251,191,36,.4);
}
.plan-name{ font-weight: 800; font-size: 1.1rem; color: #0f172a; }
.plan-price{
  font-weight: 800; font-size: 1.3rem; color: var(--brand);
  margin-top: .2rem; letter-spacing: -.02em;
}
.plan-price span{ font-weight: 600; font-size: .75rem; color: #94a3b8; margin-left: .15rem; }
.plan-card.premium .plan-price{ color: #b45309; }

.plan-list{
  list-style: none; padding: 0; margin: 0 0 1.25rem;
  display: flex; flex-direction: column; gap: .55rem;
  flex: 1;
}
.plan-list li{
  display: flex; align-items: center; gap: .55rem;
  font-size: .87rem; color: #334155;
}
.plan-list li i{ font-size: .95rem; color: #10b981; flex-shrink: 0; }
.plan-list li.off{ color: #94a3b8; }
.plan-list li.off i{ color: #cbd5e1; }

.plan-btn{
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.25rem; border-radius: 14px;
  font-weight: 800; font-size: .95rem; border: 0; cursor: pointer;
  text-decoration: none;
  transition: all .25s cubic-bezier(.34,1.2,.64,1);
}
.plan-btn.free{
  background: linear-gradient(135deg, #0b2545, #13315c); color: #fff;
  box-shadow: 0 8px 20px rgba(11,37,69,.25);
}
.plan-btn.free:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11,37,69,.4); color: #fff; }
.plan-btn.premium{
  background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff;
  box-shadow: 0 10px 24px rgba(251,191,36,.4);
}
.plan-btn.premium:hover{
  transform: translateY(-2px); box-shadow: 0 15px 35px rgba(251,191,36,.55);
  color: #fff; background: linear-gradient(135deg, #f59e0b, #d97706);
}

.php-check{
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center;
  padding-top: 1.25rem; margin-top: .5rem;
  border-top: 1px solid #f1f5f9;
  font-size: .9rem; color: var(--muted);
}
.php-check button{
  background: transparent; border: 0; cursor: pointer;
  color: var(--brand); font-weight: 700;
  padding: .35rem .75rem; border-radius: 10px;
  transition: .2s; font-size: .9rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
.php-check button:hover{ background: rgba(11,37,69,.08); }
.php-check button i{ font-size: 1rem; }

@media (max-width: 767.98px){
  .panel-hero-plan{ padding: 1.25rem; }
  .plan-grid{ grid-template-columns: 1fr; gap: .85rem; }
  .plan-card{ padding: 1.25rem; }
}

/* ---------- STATUS CARD ---------- */
.status-card{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.35rem 1.5rem;
  border-left: 4px solid var(--brand);
  border-radius: 16px;
}
.status-card.expired{ border-left-color: var(--accent); }
.sc-left{ display: flex; align-items: center; gap: 1rem; min-width: 0; }
.sc-icon{
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: 1.6rem;
  background: linear-gradient(135deg, #0b2545, #13315c);
}
.sc-icon.expired{ background: linear-gradient(135deg, #ef4444, #b91c1c); }
.sc-eyebrow{ font-size: .75rem; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sc-title{ font-weight: 800; font-size: 1.15rem; color: #0f172a; margin-top: .15rem; }
.sc-pill{
  display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  font-size: .7rem; font-weight: 800;
  background: rgba(16,185,129,.15); color: #059669;
  vertical-align: middle; margin-left: .4rem;
  letter-spacing: .04em;
}
.sc-pill.danger{ background: rgba(239,68,68,.15); color: #b91c1c; }
.sc-meta{ color: #64748b; font-size: .85rem; margin-top: .3rem; }
.sc-meta b{ color: #334155; }

/* ---------- UPGRADE BANNER ---------- */
.upgrade-banner{
  position: relative; overflow: hidden;
  border-radius: 22px; padding: 2rem;
  background: linear-gradient(135deg, #0b2545 0%, #13315c 55%, #1e4d8c 100%);
  color: #fff; margin-top: 1rem;
  box-shadow: 0 20px 50px rgba(11,37,69,.3);
}
.ub-glow{
  position: absolute; right: -120px; top: -120px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,.45), transparent 65%);
  animation: ubPulse 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ubPulse{
  0%,100%{ transform: scale(1); opacity: .8; }
  50%{ transform: scale(1.2); opacity: 1; }
}
.ub-content{ position: relative; z-index: 1; }
.ub-eyebrow{
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .9rem; border-radius: 999px;
  background: rgba(251,191,36,.2); color: #fbbf24;
  font-size: .78rem; font-weight: 800; margin-bottom: .85rem;
  border: 1px solid rgba(251,191,36,.35);
  backdrop-filter: blur(8px);
}
.ub-eyebrow i{ font-size: .95rem; }
.ub-title{
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 .65rem; line-height: 1.2;
}
.ub-title span{
  background: linear-gradient(90deg, #fbbf24, #fcd34d);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.ub-sub{
  color: rgba(255,255,255,.85); line-height: 1.6;
  font-size: .95rem; margin: 0 0 1.25rem;
  max-width: 480px;
}
.ub-benefits{
  display: flex; flex-wrap: wrap; gap: .65rem;
  margin-bottom: 1.5rem;
}
.ub-benefit{
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.15);
  font-size: .8rem; font-weight: 700;
}
.ub-benefit i{ color: #10b981; font-size: .9rem; }

.ub-cta{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.15);
}
.ub-price-num{
  font-size: 1.9rem; font-weight: 800; color: #fbbf24;
  letter-spacing: -.03em; line-height: 1;
}
.ub-price-sub{
  color: rgba(255,255,255,.7); font-size: .78rem; margin-top: .25rem;
}
.ub-btn{
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 1rem 1.75rem; border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0f172a; font-weight: 800; font-size: 1rem;
  border: 0; cursor: pointer;
  box-shadow: 0 12px 30px rgba(251,191,36,.4);
  transition: all .3s cubic-bezier(.34,1.2,.64,1);
}
.ub-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 45px rgba(251,191,36,.55);
  color: #0f172a;
}
.ub-btn i{ font-size: 1.15rem; }

@media (max-width: 767.98px){
  .upgrade-banner{ padding: 1.5rem; }
  .ub-cta{ flex-direction: column; align-items: stretch; text-align: center; }
  .ub-price{ margin-bottom: .5rem; }
  .ub-btn{ width: 100%; justify-content: center; }
}

/* ---------- PREMIUM HERO (State C) ---------- */
.premium-hero{
  position: relative; overflow: hidden;
  border-radius: 22px; padding: 2rem;
  background:
    linear-gradient(135deg, #78350f 0%, #b45309 45%, #f59e0b 100%);
  color: #fff;
  box-shadow: 0 20px 50px rgba(180,83,9,.35);
}
.pr-glow{
  position: absolute; right: -100px; top: -100px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,237,213,.4), transparent 70%);
  animation: ubPulse 5s ease-in-out infinite;
  pointer-events: none;
}
.pr-content{ position: relative; z-index: 1; }
.pr-top{
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;
}
.pr-icon{
  width: 64px; height: 64px; border-radius: 20px;
  display: grid; place-items: center; color: #f59e0b;
  font-size: 2rem; flex-shrink: 0;
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 26px rgba(0,0,0,.2);
  animation: prFloat 3s ease-in-out infinite;
}
@keyframes prFloat{
  0%,100%{ transform: translateY(0) rotate(0); }
  50%{ transform: translateY(-4px) rotate(-3deg); }
}
.pr-eyebrow{
  font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.85);
}
.pr-title{
  font-size: 1.35rem; font-weight: 800;
  letter-spacing: -.02em; margin-top: .25rem; line-height: 1.2;
}

.pr-info{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .6rem; margin-bottom: 1.25rem;
}
.pr-info-box{
  padding: .85rem 1rem; border-radius: 14px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
}
.pr-info-box.highlight{
  background: rgba(255,255,255,.95); color: #78350f;
  border-color: rgba(255,255,255,.5);
}
.pr-info-label{
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; opacity: .8; margin-bottom: .25rem;
}
.pr-info-value{ font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.pr-info-box.highlight .pr-info-value{ color: #b45309; }

.pr-progress{ margin-top: 1rem; }
.pr-progress-bar{
  height: 8px; background: rgba(255,255,255,.2);
  border-radius: 999px; overflow: hidden;
}
.pr-progress-bar span{
  display: block; height: 100%;
  background: linear-gradient(90deg, #fcd34d, #fff);
  border-radius: 999px;
  transition: width .6s cubic-bezier(.34,1.2,.64,1);
}
.pr-progress-meta{
  display: flex; justify-content: space-between;
  font-size: .75rem; color: rgba(255,255,255,.85);
  margin-top: .5rem; font-weight: 600;
}

@media (max-width: 575.98px){
  .premium-hero{ padding: 1.5rem; }
  .pr-info{ grid-template-columns: 1fr 1fr; }
  .pr-info-box.highlight{ grid-column: 1 / -1; }
  .pr-icon{ width: 52px; height: 52px; font-size: 1.65rem; }
  .pr-title{ font-size: 1.1rem; }
}

/* ---------- ACTION GRID ---------- */
.action-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
}
.action-tile{
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem; border-radius: 14px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  cursor: pointer; text-decoration: none; color: inherit;
  transition: all .25s cubic-bezier(.34,1.2,.64,1);
  text-align: left;
}
.action-tile:hover{
  transform: translateY(-2px); border-color: var(--brand);
  box-shadow: 0 10px 24px rgba(11,37,69,.1);
  color: inherit;
}
.at-icon{
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: 1.15rem;
}
.at-icon.brand{ background: linear-gradient(135deg, #0b2545, #13315c); }
.at-icon.gold{ background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.at-title{ font-weight: 800; font-size: .9rem; color: #0f172a; }
.at-sub{ color: #64748b; font-size: .75rem; margin-top: .1rem; }

@media (max-width: 575.98px){
  .action-grid{ grid-template-columns: 1fr; }
}

/* ---------- SIDE PANEL ---------- */
.side-panel{ padding: 1.35rem; }
.side-head{
  display: flex; align-items: center; gap: .85rem;
  padding-bottom: 1rem; margin-bottom: 1rem;
  border-bottom: 1px solid #f1f5f9;
}
.side-ava{
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 1.3rem;
  overflow: hidden;
}
.side-ava img{ width: 100%; height: 100%; object-fit: cover; }
.side-name{ min-width: 0; flex: 1; }
.side-name-full{
  font-weight: 800; font-size: .95rem; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-name-email{
  color: #64748b; font-size: .78rem; margin-top: .15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-list{ display: flex; flex-direction: column; gap: .55rem; }
.side-row{
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; font-size: .85rem;
}
.side-label{ color: #64748b; font-weight: 600; }
.side-val{ color: #0f172a; font-weight: 700; text-align: right; word-break: break-word; }
.side-val code{
  background: #f1f5f9; padding: .15rem .55rem; border-radius: 6px;
  font-family: ui-monospace, monospace; font-size: .78rem;
  color: var(--brand);
}

/* ---------- QUICK HELP ---------- */
.quick-help{
  display: flex; gap: .85rem; align-items: flex-start;
  background: linear-gradient(135deg, rgba(11,37,69,.05), rgba(230,57,70,.03));
  border-color: rgba(11,37,69,.1);
}
.quick-help > i{
  color: var(--brand); font-size: 1.3rem; flex-shrink: 0; margin-top: .1rem;
}
.quick-help > div{ flex: 1; min-width: 0; }
.quick-help b{ display: block; color: #0f172a; font-size: .9rem; margin-bottom: .25rem; }
.quick-help span{ color: #475569; font-size: .82rem; line-height: 1.5; display: block; }
.quick-help a{
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--brand); font-weight: 700; font-size: .82rem;
  text-decoration: none; margin-top: .5rem;
}
.quick-help a:hover{ color: var(--accent); }

/* ---------- KONTAK TERKUNCI DI MODAL ---------- */
.form-control-premium.locked,
.form-control-premium[readonly]{
  background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
  color: #64748b !important;
  border-style: dashed !important;
  cursor: not-allowed !important;
}
.locked-tag{
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .5rem; border-radius: 999px;
  background: rgba(11,37,69,.1); color: var(--brand);
  font-size: .68rem; font-weight: 800;
  margin-left: .4rem;
  letter-spacing: .03em;
}
.locked-tag i{ font-size: .7rem; }


.locked-kelas-note{
  display: flex; gap: .55rem; align-items: flex-start;
  margin-top: .75rem; padding: .75rem 1rem;
  background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(251,191,36,.03));
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 12px;
  color: #92400e; font-size: .82rem; line-height: 1.5;
}
.locked-kelas-note i{
  color: #d97706; font-size: 1rem; flex-shrink: 0; margin-top: .05rem;
}
.locked-kelas-note b{ color: #b45309; }

/* ================= AVATAR INISIAL ================= */

/* Hero avatar */
.md-avatar{
  position: relative;
}
.md-avatar span{
  display: grid; place-items: center;
  width: 100%; height: 100%;
  color: #fff;
  font-weight: 900;
  font-size: 1.9rem;
  letter-spacing: -.03em;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
  position: relative;
  z-index: 1;
}
.md-avatar span::before{
  /* Glow subtle di belakang inisial */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 55%);
  border-radius: inherit;
  pointer-events: none;
}

/* Side avatar */
.side-ava span{
  display: grid; place-items: center;
  width: 100%; height: 100%;
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.03em;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0,0,0,.2);
}

@media (max-width: 767.98px){
  .md-avatar span{ font-size: 1.5rem; }
  .side-ava span{ font-size: 1.05rem; }
}


/* ============================================
   KONTAK (untuk download.php)
   ============================================ */
.ps-contact {
  padding: 60px 0;
  background: #F9FAFB;
}
.ps-contact-wrap {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.ps-contact-title {
  font-size: 24px;
  font-weight: 700;
  color: #1E3A8A;
  margin-bottom: 12px;
}
.ps-contact-title i { color: #7C3AED; margin-right: 8px; }
.ps-contact-desc {
  color: #6B7280;
  margin-bottom: 30px;
}
.ps-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 600px) {
  .ps-contact-grid { grid-template-columns: 1fr; }
}
.ps-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 14px;
  background: #F3F4F6;
  text-decoration: none;
  transition: all 0.2s;
  border: 1px solid #E5E7EB;
  text-align: left;
}
.ps-contact-item:hover {
  background: #EDE9FE;
  border-color: #7C3AED;
  transform: translateY(-2px);
}
.ps-contact-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7C3AED, #3B82F6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.ps-contact-label {
  font-size: 12px;
  color: #6B7280;
  font-weight: 500;
}
.ps-contact-value {
  font-size: 14px;
  color: #1E3A8A;
  font-weight: 600;
}
.ps-contact-org {
  padding: 14px;
  background: #EFF6FF;
  border-radius: 10px;
  color: #1E40AF;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ps-contact-org i { font-size: 18px; }
.ps-contact-policy {
  margin-top: 20px;
  font-size: 12px;
  color: #9CA3AF;
}
.ps-contact-policy a {
  color: #7C3AED;
  text-decoration: underline;
  font-weight: 600;
}

/* Screenshot image (kalau pakai real screenshot) */
.ps-slide-img {
  width: 100%;
  border-radius: 16px;
  display: block;
}