/* ===== Portal anggota (mobile-first) ===== */
body.m-body{background:#dfe5f4}
.m-shell{width:100%;max-width:480px;overflow-x:hidden;margin:0 auto;min-height:100vh;background:var(--bg);display:flex;flex-direction:column;position:relative;box-shadow:0 0 40px rgba(23,37,90,.12)}
.m-head{height:76px;flex-shrink:0;background:var(--navy);display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:12px}
.m-head .l{display:flex;align-items:center;gap:14px;min-width:0}
.m-av{width:44px;height:44px;border-radius:14px;background:var(--indigo);color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.m-head b{display:block;color:#fff;font-weight:800;font-size:17px;line-height:1.2}
.m-head small{color:#c9d2f2;font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-ib{width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:20px;text-decoration:none;padding:0}
.m-back{font-size:22px}
.m-main{flex:1;padding:16px 16px 110px;display:flex;flex-direction:column;gap:14px}
.m-hero{border-radius:24px;background:var(--grad);padding:18px;color:#fff;box-shadow:0 12px 28px rgba(47,107,234,.28)}
.m-hero .top{display:flex;align-items:center;gap:14px}
.m-hero .big{width:60px;height:60px;border-radius:18px;background:#fff;color:var(--indigo);font-weight:700;font-size:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.m-hero .hi{font-size:12.5px;color:#e0e7ff}
.m-hero .nm{font-size:21px;font-weight:800;line-height:1.25;word-break:break-word}
.m-hero .absen-b{width:58px;height:58px;border-radius:16px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.16);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:700;text-decoration:none;flex-shrink:0;margin-left:auto}
.m-hero .absen-b i{font-size:21px}
.m-chips{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.m-chips span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:5px 10px;font-size:12px;font-weight:700}
.m-hr{height:1px;background:rgba(255,255,255,.25);margin:14px 0}
.m-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.m-stats div{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:10px 6px;text-align:center}
.m-stats small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#eef2ff}
.m-stats b{display:block;font-size:15px;font-weight:800;margin-top:3px}
.m-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:14px 16px}
.m-card .t{font-size:11px;font-weight:800;letter-spacing:.07em;color:var(--indigo)}
.m-card h3{font-size:16px;font-weight:800;margin:6px 0 0}
.m-meta{display:flex;gap:14px;margin-top:6px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.m-meta span{display:flex;align-items:center;gap:5px}
.m-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;border:0;border-radius:14px;background:var(--grad);color:#fff;font-size:15px;font-weight:700;text-decoration:none;font-family:var(--font)}
.m-btn:hover{color:#fff;filter:brightness(1.06)}
.m-btn.alt{background:#fff;color:var(--text);border:1.5px solid var(--border2)}
.m-btn[disabled]{opacity:.5}
.m-menu-h{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #eef1f8;margin-bottom:14px}
.m-menu-h b{font-size:13.5px;font-weight:800;letter-spacing:.04em}
.m-menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 6px}
.m-menu a{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--text);text-decoration:none;font-size:12px;font-weight:600;text-align:center;line-height:1.2}
.m-menu .ic{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:25px}
.m-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;height:76px;background:#fff;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;padding-top:10px;z-index:30}
.m-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:#5b6685;text-decoration:none;font-size:11.5px;font-weight:600}
.m-nav a i{font-size:23px;line-height:1}
.m-nav a.on{color:var(--indigo);font-weight:700}
.m-nav a.mid{margin-top:-34px;color:var(--indigo);font-weight:800}
.m-nav a.mid span.fab{width:62px;height:62px;border-radius:50%;background:var(--grad);border:4px solid var(--bg);box-shadow:0 8px 18px rgba(47,107,234,.4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px}
.m-list .item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #eef1f8}
.m-list .item:last-child{border-bottom:0}
.m-list .ico{width:44px;height:44px;border-radius:14px;background:#eef0ff;color:var(--indigo);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.m-list .tx{flex:1;min-width:0}
.m-list .tx b{display:block;font-size:14px}
.m-list .tx small{color:var(--muted);font-size:12.5px;display:block}
.m-alert{border-radius:14px;padding:12px 14px;font-size:13.5px;font-weight:600}
.m-alert.ok{background:var(--ok-bg);color:var(--ok-fg)}
.m-alert.err{background:var(--bad-bg);color:var(--bad-fg)}
.m-alert.info{background:#eef0ff;color:#3730a3}
/* Formulir */
.m-f{display:flex;flex-direction:column;gap:6px}
.m-f label{font-size:12.5px;font-weight:700}
.m-f input,.m-f select{height:46px;border:1.5px solid var(--border2);border-radius:12px;padding:0 14px;font-size:15px;font-family:var(--font);color:var(--text);background:#fff;width:100%;outline:none}
.m-f input:focus,.m-f select:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.m-f input[readonly]{background:#f1f4fb;font-weight:700}
.m-f .hint{font-size:12px;color:var(--muted)}
.m-f .hint.ok{color:var(--ok-fg);font-weight:700}
.m-f .hint.err{color:var(--bad-fg);font-weight:700}
.m-sec{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--indigo);margin-top:6px}
.m-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* Layar masuk / daftar */
.m-band{background:linear-gradient(160deg,#17255a 0%,#3a3fcf 62%,#2f6bea 100%);color:#fff;padding:26px 22px 40px}
.m-band .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px}
.m-band .brand .lg{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:18px}
.m-band h1{font-size:23px;font-weight:800;margin:16px 0 4px}
.m-band p{margin:0;font-size:13px;color:#e3e9ff}
.m-sheet{margin-top:-22px;background:#fff;border-radius:26px 26px 0 0;padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
/* Kamera absen */
.cam{position:relative;border-radius:24px;overflow:hidden;background:radial-gradient(120% 90% at 50% 30%,#31459a 0%,#17255a 60%,#0e1740 100%);aspect-ratio:3/4;max-height:62vh;width:100%}
.cam video,.cam img.prev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam video{transform:scaleX(-1)}
.cam .oval{position:absolute;left:50%;top:44%;width:56%;height:62%;transform:translate(-50%,-50%);border:2.5px dashed rgba(255,255,255,.75);border-radius:50%;pointer-events:none}
.cam .tag{position:absolute;top:12px;background:rgba(8,14,40,.6);color:#fff;border-radius:10px;padding:5px 10px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.cam .tag.l{left:12px}.cam .tag.r{right:12px}
.cam .wm{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(8,14,40,.74);border-radius:14px;padding:9px 12px;color:#fff;font-size:12px;line-height:1.5}
.cam .wm b{font-size:12.5px}
.cam .msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#dbe4ff;padding:30px;font-size:14px;font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#9aa6cf}
.dot.on{background:#34d399}.dot.off{background:#f87171}
.radar{position:relative;width:104px;height:104px;border-radius:14px;overflow:hidden;flex-shrink:0;background-color:#e6edfb;background-image:linear-gradient(#d3ddf5 1px,transparent 1px),linear-gradient(90deg,#d3ddf5 1px,transparent 1px);background-size:20px 20px}
.radar .ring{position:absolute;left:50%;top:50%;width:60px;height:60px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(79,70,229,.14);border:1.5px dashed var(--indigo)}
.radar .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);color:#e11d48;font-size:22px;line-height:1}
.radar .me{position:absolute;width:12px;height:12px;border-radius:50%;background:#2563eb;border:2px solid #fff;box-shadow:0 0 0 3px rgba(37,99,235,.3);left:50%;top:50%;transform:translate(-50%,-50%)}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stat-grid div{background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px 8px;text-align:center}
.stat-grid b{display:block;font-size:20px;font-weight:800}
.stat-grid small{font-size:11.5px;color:var(--muted);font-weight:600}
.bar-m{height:10px;border-radius:5px;background:#eef1f8;overflow:hidden}
.bar-m i{display:block;height:100%;background:linear-gradient(90deg,#4f46e5,#2f6bea);border-radius:5px}
.m-pager{display:flex;justify-content:space-between;gap:10px}
.m-pager a{flex:1}
@media (min-width:481px){.m-shell{margin-top:0}}
/* Pagination ringan (tanpa Bootstrap) */
.pagination{display:flex;gap:6px;list-style:none;padding:0;margin:0;flex-wrap:wrap;justify-content:center}
.pagination .page-link{display:block;min-width:38px;text-align:center;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid var(--border);color:var(--text);text-decoration:none;font-size:13px;font-weight:700}
.pagination .active .page-link{background:var(--indigo);border-color:var(--indigo);color:#fff}
.pagination .disabled .page-link{opacity:.45}
/* ===== Login (gaya kartu lembut) ===== */
.m-login .m-shell{background:#fff}
.lg-top{position:relative;overflow:hidden;background:#e4eaf3;border-radius:0 0 40px 40px;padding:44px 24px 40px;text-align:center}
.lg-c{position:absolute;border-radius:50%;background:#d5def0}
.lg-c1{width:150px;height:150px;left:-50px;top:-40px}
.lg-c2{width:90px;height:90px;right:-24px;top:70px;background:#cfd8f3}
.lg-c3{width:60px;height:60px;left:28px;bottom:-22px;background:#dbe3f5}
.lg-logo{position:relative;width:132px;height:132px;margin:0 auto 16px;background:#fff;border-radius:36px;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(79,70,229,.16);padding:16px}
.lg-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lg-app{position:relative;font-size:22px;font-weight:800;color:#4f46e5;letter-spacing:.02em}
.lg-sub{position:relative;font-size:13px;color:#5b6685;margin-top:4px;line-height:1.4}
.lg-body{flex:1;padding:26px 30px 36px;display:flex;flex-direction:column;gap:14px;background:#fff}
.lg-h{margin:0 0 2px;font-size:30px;font-weight:800;color:#6366f1}
.lg-form{display:flex;flex-direction:column;gap:14px}
.lg-in{display:flex;align-items:center;gap:10px;height:52px;border:2px solid #e4eaf3;border-radius:999px;padding:0 18px;background:#fff;color:#8a94b3;margin:0}
.lg-in:focus-within{border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.12)}
.lg-in i{font-size:18px;flex-shrink:0}
.lg-in input{flex:1;min-width:0;width:100%;height:100%;border:0;outline:0;background:transparent;font-size:15px;color:#1c2447;padding:0}
.lg-eye{border:0;background:none;color:#8a94b3;padding:0;font-size:18px;line-height:1;cursor:pointer}
.lg-btn{height:52px;border:0;border-radius:999px;background:#6366f1;color:#fff;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 10px 20px rgba(99,102,241,.3)}
.lg-btn:active{filter:brightness(.95)}
.lg-foot{text-align:center;font-size:13.5px;color:#5b6685;margin-top:6px}
.lg-foot a{font-weight:700;color:#4f46e5}
/* Peta pada formulir laporan */
.m-map{position:relative;height:190px;border-radius:16px;overflow:hidden;background:#e6edfb;margin-top:10px}
.m-map iframe{width:100%;height:100%;border:0;display:block}
.m-map-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#6b7aa8;font-size:13px;font-weight:600}
.m-map-ph i{font-size:30px}
.m-gps{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.4}
.m-gps .dot{margin-top:5px;flex-shrink:0}
/* Kamera laporan: lebih ringkas agar tombol selalu terlihat */
.lapor-page .cam{aspect-ratio:4/5;max-height:56vh}
.lapor-page .m-main{padding-bottom:140px!important}

/* Logo + teks rata tengah */
.m-band{text-align:center}
.m-band .brand{flex-direction:column;justify-content:center;gap:10px}
.m-band .brand .lg{width:84px;height:84px;border-radius:24px;background:#fff;border:0;padding:10px;box-shadow:0 10px 24px rgba(8,14,40,.25)}
.m-band .brand .lg img{width:100%;height:100%;object-fit:contain;display:block}
.m-sheet .m-sec,.m-sheet .m-f label{text-align:left}
.lg-top,.lg-body{text-align:center}
.lg-h{text-align:center}
.lg-in input{text-align:left}
.lg-logo img{display:block}
.m-head .m-av img{width:100%;height:100%;object-fit:contain}
.m-av-logo{background:#fff;padding:5px;overflow:hidden}
.m-av-logo img{width:100%;height:100%;object-fit:contain;display:block}
/* Login: logo langsung tanpa kotak putih */
.lg-logo{width:auto;height:auto;background:none;box-shadow:none;border-radius:0;padding:0;margin:0 auto 14px}
.lg-logo img{width:170px;height:auto;max-width:70%;max-height:170px;object-fit:contain;margin:0 auto}