/* ============================================================
   PUBLIC-SHARED.CSS
   Dipakai di semua halaman publik (index, make-money, premium).
   Token warna mewarisi dari dashboard, tambah aksen gold untuk
   konteks uang/premium yang lebih hangat dari blue teknikal.
============================================================ */

:root{
  --bg:        #060c1a;
  --bg2:       #0a1020;
  --surface:   #0d1526;
  --surface2:  #111d35;
  --surface3:  #162240;
  --border:    rgba(56,139,253,0.13);
  --border2:   rgba(56,139,253,0.26);
  --blue:      #388bfd;
  --blue2:     #1d6feb;
  --blue3:     #58a6ff;
  --blue-glow: rgba(56,139,253,0.22);
  --cyan:      #39d0f7;
  --indigo:    #7c6fe0;
  --green:     #2dba6f;
  --green2:    #39d98a;
  --red:       #f85149;
  --amber:     #d29922;
  --gold:      #fbbf24;
  --gold2:     #f59e0b;
  --text:      #e6edf3;
  --text2:     #7d8ea5;
  --text3:     #3d4f6a;
  --r:         16px;
  --r-sm:      10px;
  --r-xs:      7px;
  --r-lg:      22px;
  --sh:        0 8px 32px rgba(0,0,0,.5);
  --sh-b:      0 0 24px rgba(56,139,253,.18);
  --maxw:      1180px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 900px 600px at 12% -8%, rgba(56,139,253,.16), transparent 60%),
    radial-gradient(ellipse 800px 600px at 105% 18%, rgba(57,208,247,.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 50% 100%, rgba(124,111,224,.08), transparent 60%);
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
ul{list-style:none;}
img,svg{display:block;}
::selection{background:rgba(56,139,253,.32);}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* tabular numerals for ticking counters */
.tnum{font-variant-numeric:tabular-nums;}

/* Scroll reveal */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
[data-reveal].revealed{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* ============================================================
   NAVBAR (public)
============================================================ */
.pnav{
  position:sticky;top:0;z-index:200;
  height:56px;display:flex;align-items:center;
  background:rgba(6,10,22,.78);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.pnav .wrap{display:flex;align-items:center;gap:28px;width:100%;}
.pnav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.pnav-logo .logo-icon{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,#1d4ed8,#388bfd);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(56,139,253,.4),inset 0 1px 0 rgba(255,255,255,.18);
}
.pnav-logo .lw{font-size:16px;font-weight:800;letter-spacing:-.2px;}
.pnav-logo .lw b{color:var(--blue3);}

.pnav-links{display:flex;align-items:center;gap:4px;flex:1;}
.pnav-links a{
  position:relative;padding:7px 15px;border-radius:8px;
  font-size:13.5px;font-weight:600;color:var(--text2);transition:.15s;
}
.pnav-links a:hover{color:var(--text);background:rgba(56,139,253,.07);}
.pnav-links a.current{color:var(--blue3);}
.pnav-links a.current::after{
  content:'';position:absolute;left:15px;right:15px;bottom:4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}

.pnav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.btn-ghost{
  padding:7px 17px;border-radius:9px;font-size:13.5px;font-weight:700;
  color:var(--text2);border:1px solid var(--border2);transition:.15s;
}
.btn-ghost:hover{color:var(--text);border-color:var(--blue);background:rgba(56,139,253,.06);}
.btn-grad{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 18px;border-radius:9px;font-size:13.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#1d4ed8,#388bfd);
  box-shadow:0 3px 14px rgba(56,139,253,.38),inset 0 1px 0 rgba(255,255,255,.16);
  position:relative;overflow:hidden;transition:.18s;
}
.btn-grad::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:translateX(-100%);transition:.5s;
}
.btn-grad:hover::before{transform:translateX(100%);}
.btn-grad:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 20px rgba(56,139,253,.48);}
.btn-grad svg{width:15px;height:15px;}

.pnav-burger{
  display:none;width:38px;height:38px;border-radius:9px;flex-shrink:0;
  align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
}
.pnav-burger svg{width:18px;height:18px;}

/* Mobile dropdown menu */
.pnav-mobile{
  display:none;position:fixed;top:56px;left:0;right:0;z-index:199;
  background:#0a1020;
  border-bottom:1px solid var(--border);
  box-shadow:0 20px 40px rgba(0,0,0,.5);
  padding:10px 20px 18px;flex-direction:column;gap:2px;
  max-height:calc(100vh - 56px);overflow-y:auto;
}
.pnav-mobile.open{display:flex;}
.pnav-mobile a{padding:12px 10px;border-radius:8px;font-size:14.5px;font-weight:600;color:var(--text2);}
.pnav-mobile a.current{color:var(--blue3);}
.pnav-mobile a:hover{background:rgba(56,139,253,.07);color:var(--text);}
.pnav-mobile .pnav-mobile-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:14px;border-top:1px solid var(--border);}
.pnav-mobile .btn-ghost,.pnav-mobile .btn-grad{text-align:center;justify-content:center;}

@media(max-width:880px){
  .pnav-links{display:none;}
  .pnav-actions .btn-ghost{display:none;}
  .pnav-burger{display:flex;}
}
@media(max-width:520px){
  .pnav-actions .btn-grad{padding:8px 13px;font-size:12.5px;}
}

/* ============================================================
   SECTION SCAFFOLDING (reused by every page)
============================================================ */
.section{padding:84px 0;position:relative;}
.section-tight{padding:56px 0;}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--blue3);margin-bottom:14px;
}
.eyebrow::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue3);box-shadow:0 0 8px var(--blue3);}
.sec-head{max-width:620px;margin-bottom:48px;}
.sec-head h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:-.6px;line-height:1.15;margin-bottom:12px;}
.sec-head p{font-size:15.5px;color:var(--text2);line-height:1.65;}
.sec-head.center{margin-inline:auto;text-align:center;}

/* Glass card base, reused everywhere */
.gcard{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--sh);
  position:relative;overflow:hidden;
}
.gcard::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(56,139,253,.04) 0%,transparent 55%);
}

/* ============================================================
   FOOTER (public)
============================================================ */
.pfoot{border-top:1px solid var(--border);padding:56px 0 28px;margin-top:40px;}
.pfoot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:42px;}
.pfoot-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.pfoot-brand .logo-icon{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,#1d4ed8,#388bfd);
  display:flex;align-items:center;justify-content:center;
}
.pfoot-brand .lw{font-size:15px;font-weight:800;}
.pfoot-brand .lw b{color:var(--blue3);}
.pfoot-desc{font-size:13px;color:var(--text2);line-height:1.7;max-width:280px;}
.pfoot h5{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text);margin-bottom:14px;}
.pfoot ul{display:flex;flex-direction:column;gap:10px;}
.pfoot a{font-size:13.5px;color:var(--text2);transition:.15s;}
.pfoot a:hover{color:var(--blue3);}
.pfoot-bottom{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-top:24px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--text3);
}
.pfoot-social{display:flex;gap:10px;}
.pfoot-social a{
  width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--border);color:var(--text2);transition:.15s;
}
.pfoot-social a:hover{color:var(--blue3);border-color:var(--blue);}
.pfoot-social svg{width:14px;height:14px;}

@media(max-width:880px){
  .pfoot-top{grid-template-columns:1fr 1fr;gap:30px;}
}
@media(max-width:560px){
  .pfoot-top{grid-template-columns:1fr;gap:28px;}
  .pfoot-bottom{flex-direction:column;align-items:flex-start;}
}

/* ============================================================
   SHARED CTA BAND (bottom of every page)
============================================================ */
.cta-band{
  border-radius:var(--r-lg);padding:54px 40px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(29,78,216,.16),rgba(57,208,247,.08));
  border:1px solid var(--border2);
}
.cta-band::before{
  content:'';position:absolute;top:-60%;left:50%;transform:translateX(-50%);
  width:600px;height:400px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(56,139,253,.22) 0%,transparent 70%);
  pointer-events:none;
}
.cta-band h3{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.5px;margin-bottom:10px;position:relative;}
.cta-band p{font-size:14.5px;color:var(--text2);margin-bottom:26px;position:relative;}
.cta-band .cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;}
.btn-lg{padding:13px 26px;font-size:14.5px;border-radius:10px;}

@media(max-width:560px){
  .cta-band{padding:40px 22px;}
}

/* ============================================================
   FAQ ACCORDION (reused by index.php & premium.php)
============================================================ */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
.faq-item{overflow:hidden;}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 22px;text-align:left;font-size:14.5px;font-weight:700;color:var(--text);
}
.faq-q svg{width:18px;height:18px;color:var(--text2);flex-shrink:0;transition:.25s;}
.faq-item.open .faq-q svg{transform:rotate(45deg);color:var(--blue3);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a-inner{padding:0 22px 18px;font-size:13.5px;color:var(--text2);line-height:1.7;}

/* ============================================================
   SECTION TITLE pattern + ICON COLOR VARIANTS
   (reused from dashboard's visual language)
============================================================ */
.sec{
  font-size:13px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:7px;margin-bottom:12px;
}
.sec .dot{width:5px;height:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 7px var(--blue);flex-shrink:0;}
.ic-b{background:rgba(56,139,253,.14);color:var(--blue3);}
.ic-g{background:rgba(45,186,111,.14);color:var(--green2);}
.ic-i{background:rgba(124,111,224,.14);color:#a78bfa;}
.ic-c{background:rgba(57,208,247,.14);color:var(--cyan);}
.ic-a{background:rgba(210,153,34,.14);color:#fbbf24;}
.ic-t{background:rgba(20,184,166,.14);color:#2dd4bf;}
.ic-r{background:rgba(248,81,73,.14);color:var(--red);}