/* Portal Anggota FSPPB — tampilan dashboard (selaras warna situs FSPPB) */
:root{--navy:#3b2f77;--navy2:#5242a3;--navyd:#2b2462;--cy:#5cc8ff;--bg:#f3f4fb;--ink:#1d1a3b;--mut:#6b7686;--line:#e4e7f2;--sh:0 6px 24px rgba(43,36,98,.07)}
*{box-sizing:border-box;margin:0;padding:0}
body{font:14px/1.55 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg)}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
/* tombol */
.mb{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;cursor:pointer;padding:8px 14px;border-radius:9px;font-size:12.5px;font-weight:700;color:#fff;transition:.2s;white-space:nowrap}.mb:hover{transform:translateY(-1px);filter:brightness(1.08)}
.b-blue{background:#1b7fd1}.b-dark{background:var(--navyd)}.b-green{background:#16a26a}.b-line{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line)}
.al{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-weight:600}.al.ok{background:#dcf5e8;color:#136b43}.al.er{background:#fde4ea;color:#a3173f}
.mu{color:var(--mut)}
/* kerangka */
.ms{position:fixed;inset:0 auto 0 0;width:240px;background:linear-gradient(180deg,#2f2670,#3b2f77 60%,#2b2462);color:#e3e0f8;display:flex;flex-direction:column;padding:20px 14px;z-index:50;transition:transform .3s}
.ms-brand{display:flex;align-items:center;gap:12px;color:#fff;padding:4px 8px 22px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:14px}.ms-brand img{width:44px;height:44px}.ms-brand span{font-weight:800;font-size:19px;line-height:1.15}.ms-brand small{display:block;font-weight:500;font-size:11.5px;color:var(--cy);letter-spacing:.4px}
.ms nav{display:grid;gap:3px}.ms nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;font-size:13.5px;font-weight:600;color:#d6d2f1;transition:.2s}.ms nav a:hover{background:rgba(255,255,255,.09);color:#fff}.ms nav a.on{background:var(--cy);color:#14123a}
.ms-foot{margin-top:auto;padding:14px 8px 0;font-size:12.5px;border-top:1px solid rgba(255,255,255,.12)}.ms-foot a{color:#b9b3e2}.ms-foot a:hover{color:#fff}
.ms-ov{display:none}
.mm{margin-left:240px;min-height:100vh;display:flex;flex-direction:column}
.mh{background:#fff;display:flex;align-items:center;gap:16px;padding:14px 28px;box-shadow:0 1px 0 var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.mh-t{flex:1;min-width:200px}.mh-t h1{font-size:19px;font-weight:800;color:var(--navy);line-height:1.2}.mh-t p{font-size:12px;color:var(--mut)}.mh-a{display:flex;gap:8px;flex-wrap:wrap}.mh-b{display:none;width:40px;height:40px;border:0;border-radius:10px;background:var(--bg);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px}.mh-b span{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px}
.mc{padding:22px 28px;flex:1}.mf{padding:16px 28px;color:var(--mut);font-size:12px;text-align:center}
/* hero profil */
.hero{position:relative;display:flex;justify-content:space-between;gap:20px;border-radius:20px;padding:26px;color:#fff;background:radial-gradient(120% 140% at 0% 0%,#5242a3 0%,#3b2f77 45%,#241d55 100%);overflow:hidden;box-shadow:var(--sh)}
.hero:after{content:"";position:absolute;right:-60px;bottom:-70px;width:220px;height:220px;border-radius:40px;background:rgba(92,200,255,.12);transform:rotate(18deg)}
.hero-l{position:relative;z-index:1;min-width:0}.chip{display:inline-block;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.4px}
.hero h2{font-size:clamp(22px,3.2vw,34px);font-weight:800;line-height:1.15;margin:12px 0;letter-spacing:.3px;overflow-wrap:anywhere}
.pills{display:flex;gap:8px;flex-wrap:wrap}.pill{padding:6px 14px;border-radius:9px;font-weight:800;font-size:13px}.p1{background:#2f7be5}.p2{background:#16a26a}
.boxes{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.bx{background:#fff;color:var(--ink);border-radius:12px;padding:10px 16px;min-width:190px;flex:1 1 190px;max-width:260px}.bx span{display:block;font-size:10px;letter-spacing:.6px;color:var(--mut);font-weight:700}.bx b{font-size:13.5px;overflow-wrap:anywhere}
.hero-ph{position:relative;z-index:1;flex:0 0 150px;height:190px;border-radius:18px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);display:grid;place-items:center;overflow:hidden;color:rgba(255,255,255,.55);text-align:center}.hero-ph img{width:100%;height:100%;object-fit:cover}.hero-ph svg{width:70px;height:70px}.hero-ph small{display:block;font-size:11px}
.top2{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:18px;margin-bottom:18px}.hero-card{background:linear-gradient(135deg,#fff,#f1f2fb);border-radius:20px;display:grid;place-items:center;padding:20px;box-shadow:var(--sh)}
/* kartu anggota */
.idc{width:100%;max-width:430px;aspect-ratio:1.586;border-radius:18px;color:#fff;background:linear-gradient(135deg,#2b2462 0%,#3b2f77 45%,#1b7fd1 130%);box-shadow:0 14px 34px rgba(43,36,98,.3);display:flex;flex-direction:column;padding:16px 18px;position:relative;overflow:hidden;font-family:'Plus Jakarta Sans',sans-serif}
.idc:before{content:"";position:absolute;right:-50px;top:-50px;width:190px;height:190px;border-radius:50%;background:rgba(92,200,255,.16)}
.idc-top{display:flex;align-items:center;gap:10px;position:relative}.idc-top img{width:38px;height:38px}.idc-top b{display:block;font-size:19px;line-height:1;letter-spacing:.5px}.idc-top small{display:block;font-size:8px;line-height:1.25;opacity:.85}.idc-top em{margin-left:auto;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:1.4px;color:var(--cy)}
.idc-body{display:flex;gap:14px;margin-top:12px;flex:1;position:relative;min-height:0}.idc-ph{flex:0 0 27%;border-radius:10px;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.4);display:grid;place-items:center;overflow:hidden;color:rgba(255,255,255,.6)}.idc-ph img{width:100%;height:100%;object-fit:cover}.idc-ph svg{width:52%}
.idc-d{min-width:0;display:flex;flex-direction:column;justify-content:center}.idc-d h4{font-size:15px;line-height:1.2;overflow-wrap:anywhere}.idc-d .no{font-size:15px;font-weight:800;color:var(--cy);letter-spacing:.8px;margin:3px 0}.idc-d p{font-size:11px;opacity:.92}.idc-d .s{opacity:.7;font-size:10px;margin-top:2px}
.idc-b{position:relative;font-size:8.5px;letter-spacing:.4px;opacity:.75;border-top:1px solid rgba(255,255,255,.2);padding-top:6px;margin-top:6px}
/* panel */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px}
.pn{background:#fff;border-radius:16px;padding:20px 22px;box-shadow:var(--sh)}.pn h3{font-size:14px;font-weight:800;margin-bottom:14px;color:var(--ink)}.pn h3 small{font-weight:500;color:var(--mut);font-size:11.5px}
.kv{border-left:3px solid #e8e5f8;padding:1px 0 1px 12px;margin-bottom:12px}.kv span{display:block;font-size:11px;color:var(--mut);font-weight:700}.kv b{font-weight:500;font-size:14px;overflow-wrap:anywhere}
.doc{display:block;border-radius:12px;overflow:hidden;background:#f6f7fd;border:1px solid var(--line);min-height:190px}.doc img{width:100%;max-height:260px;object-fit:contain;background:#fff}
.doc.empty{display:grid;place-content:center;justify-items:center;text-align:center;gap:6px;padding:20px;background:linear-gradient(135deg,#f3f6ff,#eaf0ff);color:var(--navy)}.doc.empty i{width:46px;height:46px;border-radius:14px;background:#dfe6ff;display:grid;place-items:center;color:#2f55d4}.doc.empty b{font-size:12.5px}.doc.empty small{font-size:11px;color:var(--mut);max-width:260px}
/* form */
.fm label{display:block;font-size:12px;font-weight:700;color:var(--mut);margin-bottom:12px}.fm input,.fm select,.fm textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:14px;font-weight:500;outline:0;transition:.2s}
.fm input:focus,.fm select:focus,.fm textarea:focus{border-color:var(--cy);box-shadow:0 0 0 3px rgba(92,200,255,.25)}.fm input:disabled{background:#f3f4fb;color:var(--mut)}
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;margin-bottom:10px}.fg .full{grid-column:1/-1}.fg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px;margin-bottom:10px}
.fm h3{margin-top:10px;padding-top:6px}.fm h3:first-child{margin-top:0}.row{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.up img{max-height:110px;border-radius:10px;border:1px solid var(--line);margin-top:4px}.up small{color:var(--mut);font-size:11.5px}
.fm .ckx{display:flex;gap:10px;align-items:flex-start;font-weight:500;color:var(--ink);font-size:13.5px}.fm .ckx input{width:auto;margin:3px 0 0}
/* aspirasi / evote / unduhan */
.asp{border-top:1px solid var(--line);padding:14px 0}.asp:first-of-type{border-top:0}.asp-h{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.asp small{color:var(--mut)}.asp p{margin-top:6px;color:#3d3a60}
.st{padding:3px 12px;border-radius:20px;font-size:11.5px;font-weight:800;background:#eef1f6;color:#475569}.st-baru{background:#e0efff;color:#1b5fb0}.st-dibaca{background:#fff3d6;color:#8a5a00}.st-ditindaklanjuti{background:#efe6ff;color:#5b34b0}.st-selesai{background:#dcf5e8;color:#136b43}.st-ditolak{background:#fde4ea;color:#a3173f}
.bal{margin-top:10px;background:#f0f7ff;border-left:3px solid var(--cy);border-radius:0 10px 10px 0;padding:10px 14px}.bal b{font-size:12px;color:var(--navy)}
.dl{display:flex;align-items:center;gap:14px;padding:13px 4px;border-top:1px solid var(--line);transition:.2s}.dl:first-of-type{border-top:0}.dl:hover{background:#f7f8ff}.dl i{width:42px;height:42px;border-radius:12px;background:#eaf0ff;color:#2f55d4;display:grid;place-items:center;flex:0 0 auto}.dl span{flex:1;min-width:0}.dl b{display:block}.dl small{color:var(--mut)}.dl em{font-style:normal;font-weight:800;font-size:12px;color:var(--navy2)}
.ev{margin-bottom:18px}.opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;margin-top:10px;cursor:pointer;transition:.2s;font-weight:600}.opt:hover{border-color:var(--cy);background:#f7fcff}.opt input{width:18px;height:18px;accent-color:var(--navy2)}
.res{margin-top:14px}.bar{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin-top:10px;font-size:13px}.bar i{grid-column:1/-1;height:9px;border-radius:9px;background:#e8ecf6;position:relative;overflow:hidden}.bar i:after{content:"";position:absolute;inset:0;width:var(--w);background:linear-gradient(90deg,var(--navy2),var(--cy));border-radius:9px}.bar em{font-style:normal;font-weight:700}
/* login */
body.lg{display:grid;grid-template-columns:minmax(300px,42%) 1fr;min-height:100vh;background:#fff}
.lg-side{background:radial-gradient(120% 120% at 0% 0%,#5242a3,#2b2462 70%);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:48px;gap:6px}.lg-side img{width:110px;margin-bottom:14px}.lg-side h2{font-size:30px;font-weight:800;line-height:1.15}.lg-side p{color:var(--cy);font-weight:600;margin-bottom:22px}.lg-side ul{list-style:none;display:grid;gap:10px;color:#d6d2f1}.lg-side li:before{content:"✓";color:var(--cy);font-weight:800;margin-right:10px}
.lg-main{display:grid;place-items:center;padding:30px;background:var(--bg)}.lg-box{width:100%;max-width:410px;background:#fff;border-radius:20px;padding:34px 32px;box-shadow:0 18px 50px rgba(43,36,98,.12)}.lg-logo{height:54px;width:auto;margin-bottom:18px}
.lg-box h1{font-size:24px;color:var(--navy);font-weight:800}.lg-s{color:var(--mut);margin:4px 0 18px;font-size:13px}.lg-box label{display:block;font-size:12px;font-weight:700;color:var(--mut);margin-bottom:14px}.lg-box input{display:block;width:100%;margin-top:5px;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;font-size:15px;outline:0}.lg-box input:focus{border-color:var(--cy);box-shadow:0 0 0 3px rgba(92,200,255,.25)}
.lg-btn{width:100%;padding:13px;font-size:15px;border-radius:11px;background:var(--navy)}.lg-n{margin-top:16px;font-size:12px;color:var(--mut);text-align:center}.lg-back{display:block;text-align:center;margin-top:14px;font-size:13px;font-weight:700;color:var(--navy2)}
/* cetak */
body.print{background:#e9eaf3;padding:20px}.pbar{display:flex;gap:10px;max-width:794px;margin:0 auto 16px}
.kartu-wrap{display:grid;place-items:center;padding:30px}.paper{width:100%;max-width:794px;margin:0 auto;background:#fff;padding:48px 56px;box-shadow:var(--sh);font:14px/1.7 'Plus Jakarta Sans',sans-serif;color:#111}
.kop{display:flex;align-items:center;gap:16px;border-bottom:3px double #333;padding-bottom:12px;margin-bottom:22px}.kop img{width:66px;height:66px}.kop b{display:block;font-size:16px}.kop small{font-size:12px;color:#444}
.dt{text-align:center;font-size:16px;text-decoration:underline;margin-bottom:18px}.paper p,.doc-t p{margin:10px 0;text-align:justify}.dtb{margin:8px 0 12px 8px;border-collapse:collapse}.dtb td{padding:2px 10px 2px 0;vertical-align:top}.dtb td:first-child{width:170px}.dtb.wide td{padding:5px 10px 5px 0}
.ttd{display:flex;justify-content:space-between;margin-top:38px;text-align:center;gap:20px}.ttd div{min-width:210px}.ttd span{display:block;height:84px}.ttd .mat{height:auto;margin:10px auto;width:74px;border:1px dashed #888;padding:16px 0;font-size:11px;color:#888}.ttd b{text-decoration:underline}
.doc-t .dt{text-align:center}
@media print{body.print{background:#fff;padding:0}.no-print{display:none!important}.paper{box-shadow:none;padding:0;max-width:none}.kartu-wrap{padding:0;place-items:start}.idc{-webkit-print-color-adjust:exact;print-color-adjust:exact;width:85.6mm;max-width:none}@page{margin:18mm}}
/* responsif */
@media(max-width:1100px){.g3{grid-template-columns:1fr 1fr}.top2{grid-template-columns:1fr}}
@media(max-width:900px){.ms{transform:translateX(-100%)}.ms.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.4)}.ms-ov.on{display:block;position:fixed;inset:0;background:rgba(10,8,40,.5);z-index:40}.mm{margin-left:0}.mh-b{display:flex}.mh{padding:12px 16px}.mc{padding:16px}}
@media(max-width:700px){.g3,.fg,.fg3{grid-template-columns:1fr}.hero{flex-direction:column-reverse;padding:20px}.hero-ph{flex:0 0 auto;width:120px;height:150px}body.lg{grid-template-columns:1fr}.lg-side{display:none}.paper{padding:26px 20px}.ttd{flex-direction:column;align-items:center}}

/* ===== poles mobile Portal Anggota ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.mp,body.lg{overflow-x:hidden;-webkit-font-smoothing:antialiased}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ms{padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(14px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mh{padding-top:calc(14px + env(safe-area-inset-top))}
@media(max-width:900px){
  .fm input,.fm select,.fm textarea,.lg-box input{font-size:16px}
  .ms{width:min(300px,86vw)}.mh-b{width:44px;height:44px}.mh-a .mb{min-height:42px;padding:0 14px}
  .mc{padding:14px 14px calc(24px + env(safe-area-inset-bottom))}.mf{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .ms nav a{min-height:48px}.pn{padding:16px;border-radius:16px}.opt{min-height:52px}
  .idc{max-width:100%}.mh-t h1{font-size:17px}
}
@media(max-width:700px){
  .hero{padding:18px;border-radius:18px}.hero h2{font-size:22px}.bx{min-width:0;flex:1 1 100%;max-width:none}
  .lg-main{padding:18px 14px calc(18px + env(safe-area-inset-bottom));align-items:start}.lg-box{padding:26px 20px;border-radius:20px;margin-top:6vh}
  .dl{flex-wrap:wrap}.row .mb{flex:1}.top2{gap:14px}.hero-card{padding:14px}
}

/* ===== MOBILE (iPhone & Android): bilah tab bawah Portal Anggota ===== */
body.nolock{overflow:hidden}
.mbn{display:none}
@media(max-width:900px){
  body.mp{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .mbn{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(62px + env(safe-area-inset-bottom,0px));padding:6px 6px env(safe-area-inset-bottom,0px);
    background:rgba(255,255,255,.95);-webkit-backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-top:1px solid rgba(43,36,98,.1);box-shadow:0 -6px 24px rgba(43,36,98,.08)}
  .mbn a,.mbn button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:#6b7686;font:600 10.5px/1.1 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer;border-radius:14px;position:relative;min-width:0;padding:0 2px;touch-action:manipulation}
  .mbn svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .mbn .on{color:var(--navy2)}.mbn .on:before{content:"";position:absolute;top:-7px;left:50%;width:26px;height:3px;margin-left:-13px;border-radius:0 0 4px 4px;background:var(--navy2)}
  .mbn a:active,.mbn button:active{background:rgba(82,66,163,.1)}
  .ms{z-index:60;padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .ms-ov{z-index:55}
  .mh{padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .mh-b{display:none}               /* tombol hamburger lama diganti tab "Menu" di bawah */
  .mh-a{width:100%;display:flex;flex-wrap:wrap;gap:8px}
  .mh-a .mb{flex:1 1 calc(50% - 8px)}
  .mf{padding-bottom:calc(16px + 8px)}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .al{font-size:14px}
}
@media print{.mbn{display:none!important}body.mp{padding-bottom:0}}