/* ============================================================
   MAKE-MONEY.CSS — khusus halaman Earn Money
   Bergantung pada public-shared.css (harus di-load duluan).
============================================================ */

/* ============================================================
   HERO (ringkas)
============================================================ */
.em-hero{padding:64px 0 50px;text-align:center;}
.em-hero .eyebrow{justify-content:center;width:100%;}
.em-hero h1{
  font-size:clamp(30px,4.6vw,46px);font-weight:900;letter-spacing:-1px;
  line-height:1.12;margin-bottom:16px;
}
.em-hero h1 .grad{
  background:linear-gradient(135deg,var(--gold) 0%,#fde68a 50%,var(--cyan) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.em-hero p{font-size:15.5px;color:var(--text2);line-height:1.65;max-width:560px;margin:0 auto 28px;}
.em-hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ============================================================
   RATE TABLE
============================================================ */
.rate-card{padding:0;overflow:hidden;}
.rate-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.rate-table thead th{
  text-align:left;padding:16px 22px;font-size:11px;font-weight:700;
  color:var(--text3);text-transform:uppercase;letter-spacing:.6px;
  border-bottom:1px solid var(--border);background:var(--surface2);
}
.rate-table thead th:not(:first-child){text-align:right;}
.rate-table tbody td{padding:16px 22px;border-bottom:1px solid rgba(56,139,253,.06);color:var(--text2);}
.rate-table tbody td:not(:first-child){text-align:right;font-weight:700;color:var(--text);}
.rate-table tbody tr:last-child td{border-bottom:none;}
.rate-table tbody tr:hover{background:rgba(56,139,253,.04);}
.rate-tier{display:flex;align-items:center;gap:10px;}
.rate-flag{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
}
.rate-tier-name{font-weight:700;color:var(--text);}
.rate-tier-name small{display:block;font-weight:500;color:var(--text3);font-size:11px;margin-top:1px;}
.rate-best{color:var(--green2) !important;}

/* ============================================================
   CALCULATOR
============================================================ */
.calc-card{padding:28px 26px;}
.calc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px;}
.calc-row label{font-size:13px;font-weight:600;color:var(--text);}
.calc-row .calc-val{font-size:18px;font-weight:800;color:var(--blue3);}
.calc-slider{
  width:100%;height:6px;border-radius:4px;background:var(--surface3);
  -webkit-appearance:none;appearance:none;outline:none;margin:14px 0 22px;cursor:pointer;
}
.calc-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,#1d4ed8,#388bfd);cursor:pointer;
  box-shadow:0 2px 8px rgba(56,139,253,.5);border:2px solid #fff;
}
.calc-slider::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;border:2px solid #fff;
  background:linear-gradient(135deg,#1d4ed8,#388bfd);cursor:pointer;
  box-shadow:0 2px 8px rgba(56,139,253,.5);
}
.calc-result{
  border-radius:var(--r-sm);padding:20px;text-align:center;
  background:linear-gradient(135deg,rgba(45,186,111,.1),rgba(57,217,138,.05));
  border:1px solid rgba(45,186,111,.25);
}
.calc-result .cl{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px;}
.calc-result .cv{font-size:32px;font-weight:900;color:var(--green2);letter-spacing:-.5px;}
.calc-result .cv span{font-size:15px;color:var(--text2);font-weight:600;}
.calc-note{font-size:11.5px;color:var(--text3);text-align:center;margin-top:14px;}

/* ============================================================
   EARNINGS BREAKDOWN (how it's calculated)
============================================================ */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.how-card{padding:24px 22px;}
.how-ico{
  width:40px;height:40px;border-radius:11px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
}
.how-ico svg{width:19px;height:19px;}
.how-card h4{font-size:14.5px;font-weight:700;margin-bottom:7px;}
.how-card p{font-size:13px;color:var(--text2);line-height:1.6;}

/* ============================================================
   REFERRAL BANNER
============================================================ */
.ref-band{
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  padding:32px 36px;
}
.ref-band h3{font-size:20px;font-weight:800;margin-bottom:8px;}
.ref-band p{font-size:13.5px;color:var(--text2);line-height:1.6;max-width:440px;}
.ref-pct{
  text-align:center;flex-shrink:0;
  background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r-sm);
  padding:18px 28px;
}
.ref-pct .rv{font-size:30px;font-weight:900;color:var(--gold);}
.ref-pct .rl{font-size:11px;color:var(--text2);margin-top:4px;}

@media(max-width:760px){
  .how-grid{grid-template-columns:1fr;}
  .ref-band{grid-template-columns:1fr;text-align:center;}
  .ref-band p{margin-inline:auto;}
}
@media(max-width:560px){
  .rate-table{font-size:12px;}
  .rate-table thead th,.rate-table tbody td{padding:12px 14px;}
  .rate-flag{width:24px;height:24px;font-size:11px;}
}