/* ============================================================
   DASHBOARD AFILIASI (member & admin) — tema terang
   ============================================================ */

.af-body{
  background:
    radial-gradient(900px 520px at 88% -6%, rgba(79,126,231,.16), transparent 60%),
    radial-gradient(760px 460px at -6% 20%, rgba(11,170,126,.13), transparent 60%),
    linear-gradient(180deg,#f7faff,#eef4ff 60%,#f7faff);
  min-height:100vh;
}
.af-top{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.86);backdrop-filter:blur(16px) saturate(170%);
  border-bottom:1px solid rgba(20,40,95,.08);
}
.af-top-in{display:flex;align-items:center;gap:1rem;height:66px}
.af-top .brand{flex:none}
.af-top-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.af-chip{
  display:inline-flex;align-items:center;gap:.35rem;font-weight:800;font-size:.85rem;color:var(--navy-900);
  background:#fff;border:1px solid rgba(20,40,95,.14);border-radius:999px;padding:.45rem .9rem;
  max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.af-wrap{display:grid;gap:1.3rem;padding:clamp(1.2rem,3vw,2rem) 0 3rem;grid-template-columns:1fr}
.af-side{display:none}
.af-nav{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem 0 .6rem;scrollbar-width:none}
.af-nav::-webkit-scrollbar{display:none}
.af-nav a{
  flex:none;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  font-weight:700;font-size:.88rem;color:var(--ink-soft);
  background:#fff;border:1px solid rgba(20,40,95,.12);border-radius:999px;padding:.55rem .95rem;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.af-nav a:hover{transform:translateY(-1px);border-color:rgba(11,170,126,.45);color:var(--navy-900)}
.af-nav a.active{background:linear-gradient(135deg,#19e3a4,#0ab383);color:#04301f;border-color:transparent;box-shadow:0 10px 22px -10px rgba(10,179,131,.6)}

.af-main{min-width:0;display:flex;flex-direction:column;gap:1.2rem}
.af-sec{display:none}
.af-sec.active{display:flex;flex-direction:column;gap:1.2rem}

.af-h1{font-family:var(--font-head);font-size:clamp(1.35rem,3.6vw,1.85rem);font-weight:800;color:var(--navy-900);margin:0}
.af-sub{color:var(--muted);font-size:.95rem;margin:0}

/* kartu */
.af-card{
  background:linear-gradient(165deg,rgba(255,255,255,.96),rgba(255,255,255,.72));
  border:1px solid rgba(20,40,95,.1);border-radius:18px;padding:1.2rem 1.25rem;
  box-shadow:0 14px 34px -22px rgba(23,43,100,.4);
}
.af-card h2{font-size:1rem;font-weight:800;color:var(--navy-900);margin:0 0 .8rem;display:flex;align-items:center;gap:.45rem}

/* stat cards */
.af-stats{display:grid;gap:.85rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.af-stat{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid rgba(20,40,95,.1);border-radius:16px;padding:1rem;
  box-shadow:0 12px 28px -20px rgba(23,43,100,.45);
}
.af-stat::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,#19e3a4,#0ab383)}
.af-stat.b2::before{background:linear-gradient(180deg,#5f9dff,#2f6fe0)}
.af-stat.b3::before{background:linear-gradient(180deg,#f6c453,#e0a020)}
.af-stat.b4::before{background:linear-gradient(180deg,#a78bfa,#7c3aed)}
.af-stat .k{font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.af-stat .v{font-family:var(--font-head);font-size:clamp(1.15rem,3.4vw,1.5rem);font-weight:800;color:var(--navy-900);margin-top:.25rem;line-height:1.2}
.af-stat .n{font-size:.78rem;color:var(--muted);margin-top:.15rem}

/* link afiliasi */
.af-linkbox{
  display:flex;gap:.5rem;align-items:stretch;flex-wrap:wrap;
  background:rgba(11,170,126,.07);border:1px dashed rgba(11,170,126,.45);
  border-radius:14px;padding:.7rem .8rem;
}
.af-linkbox input{
  flex:1;min-width:200px;font:inherit;font-size:.9rem;font-weight:600;color:var(--navy-900);
  background:#fff;border:1px solid rgba(20,40,95,.14);border-radius:10px;padding:.6rem .8rem;outline:none;
}
.af-copy{
  flex:none;display:inline-flex;align-items:center;gap:.4rem;
  font:inherit;font-weight:800;font-size:.9rem;color:#04301f;cursor:pointer;
  background:linear-gradient(135deg,#19e3a4,#0ab383);border:none;border-radius:10px;padding:.65rem 1.1rem;
  box-shadow:0 12px 26px -12px rgba(10,179,131,.7);
  transition:transform .2s;
}
.af-copy:hover{transform:translateY(-2px)}
.af-share{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.af-share a,.af-share button{
  display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-weight:700;font-size:.85rem;
  border-radius:999px;padding:.55rem 1rem;cursor:pointer;border:1px solid transparent;color:#fff;
  transition:transform .2s,filter .2s;
}
.af-share a:hover,.af-share button:hover{transform:translateY(-2px);filter:brightness(1.05)}
.sh-wa{background:linear-gradient(135deg,#2bd56e,#129e4b)}
.sh-fb{background:linear-gradient(135deg,#4c69ba,#2f4a9a)}
.sh-tg{background:linear-gradient(135deg,#37aee2,#1d8dc4)}
.sh-email{background:linear-gradient(135deg,#8b8f9e,#5d6273)}
.sh-copy{background:linear-gradient(135deg,#f0b429,#c98a06);color:#3a2a00}

/* tabel */
.af-table{width:100%;border-collapse:collapse;font-size:.88rem}
.af-table th{
  text-align:left;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);
  padding:.55rem .6rem;border-bottom:1px solid rgba(20,40,95,.1);white-space:nowrap;
}
.af-table td{padding:.65rem .6rem;border-bottom:1px solid rgba(20,40,95,.06);color:var(--ink-soft);vertical-align:top}
.af-table tr:hover td{background:rgba(21,45,100,.03)}
.af-table .num{text-align:right;white-space:nowrap;font-weight:700;color:var(--navy-900)}
.af-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.af-empty{text-align:center;color:var(--muted-2);font-size:.9rem;padding:1.4rem .5rem}

/* badge status */
.st{display:inline-block;font-size:.72rem;font-weight:900;letter-spacing:.03em;border-radius:999px;padding:.24rem .6rem;white-space:nowrap}
.st-pending{background:rgba(240,180,41,.18);color:#8a5f00;border:1px solid rgba(240,180,41,.45)}
.st-approved{background:rgba(95,157,255,.16);color:#24509e;border:1px solid rgba(95,157,255,.45)}
.st-withdrawable{background:rgba(11,170,126,.16);color:#067a5c;border:1px solid rgba(11,170,126,.45)}
.st-paid{background:rgba(21,45,100,.1);color:#15233f;border:1px solid rgba(21,45,100,.25)}
.st-rejected{background:rgba(212,42,26,.12);color:#b02a19;border:1px solid rgba(212,42,26,.35)}
.st-verified{background:rgba(11,170,126,.16);color:#067a5c;border:1px solid rgba(11,170,126,.45)}
.st-processing{background:rgba(124,58,237,.14);color:#5b2bb8;border:1px solid rgba(124,58,237,.4)}
.st-requested{background:rgba(240,180,41,.18);color:#8a5f00;border:1px solid rgba(240,180,41,.45)}
.st-aktif{background:rgba(11,170,126,.16);color:#067a5c;border:1px solid rgba(11,170,126,.45)}
.st-nonaktif{background:rgba(212,42,26,.12);color:#b02a19;border:1px solid rgba(212,42,26,.35)}
.st-susp{background:rgba(212,42,26,.14);color:#b02a19;border:1px solid rgba(212,42,26,.4)}

/* form */
.af-form{display:grid;gap:.8rem;grid-template-columns:1fr}
.af-field{display:flex;flex-direction:column;gap:.35rem}
.af-field label{font-weight:700;font-size:.88rem;color:var(--navy-800)}
.af-field label span{font-weight:500;color:var(--muted-2);font-size:.82rem}
.af-field input,.af-field select,.af-field textarea{
  font:inherit;font-size:.93rem;color:var(--ink);background:#fff;
  border:1px solid rgba(20,40,95,.18);border-radius:11px;padding:.68rem .85rem;outline:none;width:100%;
  transition:border-color .2s,box-shadow .2s;
}
.af-field input:focus,.af-field select:focus,.af-field textarea:focus{border-color:rgba(11,170,126,.6);box-shadow:0 0 0 4px rgba(11,170,126,.12)}
.af-row2{display:grid;gap:.8rem;grid-template-columns:1fr}
.af-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font:inherit;font-weight:800;font-size:.93rem;cursor:pointer;border:none;border-radius:12px;
  padding:.8rem 1.2rem;color:#04301f;background:linear-gradient(135deg,#19e3a4,#0ab383);
  box-shadow:0 14px 28px -14px rgba(10,179,131,.7);transition:transform .2s,filter .2s;
}
.af-btn:hover{transform:translateY(-2px)}
.af-btn.ghost{background:#fff;color:var(--navy-800);border:1px solid rgba(20,40,95,.2);box-shadow:none}
.af-btn.gold{background:linear-gradient(135deg,#ffd97c,#f0b429);color:#3a2a00}
.af-btn.red{background:linear-gradient(135deg,#ff6a5e,#d42a1a);color:#fff}
.af-btn.sm{padding:.5rem .85rem;font-size:.82rem;border-radius:999px}
.af-msg{font-size:.88rem;font-weight:700;border-radius:11px;padding:.6rem .8rem}
.af-msg.ok{background:rgba(11,170,126,.1);color:#067a5c;border:1px solid rgba(11,170,126,.3)}
.af-msg.err{background:rgba(212,42,26,.08);color:#b02a19;border:1px solid rgba(212,42,26,.3)}

/* notifikasi */
.af-notif{display:flex;gap:.7rem;align-items:flex-start;padding:.75rem .5rem;border-bottom:1px solid rgba(20,40,95,.07)}
.af-notif:last-child{border-bottom:none}
.af-notif .ic{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(21,45,100,.06);font-size:1.05rem}
.af-notif b{display:block;font-size:.9rem;color:var(--navy-900)}
.af-notif small{color:var(--muted-2);font-size:.78rem}
.af-notif p{margin:.15rem 0 0;color:var(--muted);font-size:.85rem}
.af-notif.unread{background:rgba(11,170,126,.05)}

/* bar chart sederhana */
.af-chart{display:flex;align-items:flex-end;gap:.4rem;height:130px;padding:.4rem 0}
.af-chart .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.2rem;align-items:center;height:100%}
.af-chart .bar i{display:block;width:100%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#5f9dff,#2f6fe0);min-height:3px}
.af-chart .bar em{font-style:normal;font-size:.62rem;color:var(--muted-2);white-space:nowrap}
.af-legend{display:flex;gap:1rem;font-size:.8rem;color:var(--muted);flex-wrap:wrap}

/* admin toolbar */
.af-toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.8rem}
.af-toolbar select,.af-toolbar input{
  font:inherit;font-size:.88rem;color:var(--ink);background:#fff;border:1px solid rgba(20,40,95,.16);
  border-radius:10px;padding:.55rem .8rem;outline:none;
}
.af-actions{display:flex;gap:.35rem;flex-wrap:wrap}

@media (min-width:700px){
  .af-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .af-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .af-form .full{grid-column:1/-1}
  .af-row2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .af-wrap{grid-template-columns:250px 1fr;align-items:start}
  .af-side{display:block;position:sticky;top:82px}
  .af-nav{flex-direction:column;overflow:visible;gap:.3rem}
  .af-nav a{border-radius:12px;padding:.7rem .9rem}
  .af-mobile-nav{display:none}
}