/* =====================================================================
   Portal Anggota HK — gaya ESS mobile-app (dibuat sendiri).
   Hero gelap, quick actions warna, stat pills, list, bottom tab + FAB.
   ===================================================================== */
:root{
  --ess-bg:#f4f6f9; --ess-ink:#1a2530; --ess-soft:#8a94a3; --ess-line:#eceff3;
  --ess-brand:#0d8a5f; --ess-brand2:#14b8a6; --ess-card:#fff; --ess-radius:18px;
}
body.ess-app{ margin:0; background:var(--ess-bg); color:var(--ess-ink);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; }

/* Bingkai ponsel di layar lebar */
.ess-phone{ max-width:480px; margin:0 auto; min-height:100vh; background:var(--ess-bg);
  position:relative; padding-bottom:84px; box-shadow:0 0 60px rgba(16,24,40,.08); }
@media(min-width:520px){ .ess-phone{ margin:18px auto; min-height:calc(100vh - 36px); border-radius:26px; overflow:hidden; } }

/* App bar */
.ess-appbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:var(--ess-card); border-bottom:1px solid var(--ess-line); }
.ess-appbar__title{ font-weight:800; font-size:16px; }
.ess-appbar__act{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:#f1f4f8; color:#516072; font-size:17px; text-decoration:none; }
.ess-appbar__act:hover{ background:#e7ecf2; }

.ess-body{ padding:16px; }

/* Hero */
.ess-hero2{ background:linear-gradient(135deg,#0f766e 0%, #0a3f39 100%); color:#fff;
  border-radius:var(--ess-radius); padding:20px; box-shadow:0 12px 28px rgba(12,59,55,.32); }
.ess-hero2__top{ display:flex; align-items:center; gap:14px; }
.ess-hero2__ph{ width:58px;height:58px;border-radius:50%;overflow:hidden;flex:none;border:2px solid rgba(255,255,255,.35); }
.ess-hero2__ph img{ width:100%;height:100%;object-fit:cover; }
.ess-hero2__hi{ font-size:13px;color:#a9ddcf; }
.ess-hero2__name{ font-size:20px;font-weight:800;line-height:1.15; }
.ess-hero2__no{ font-size:12px;color:#bfe9dd;letter-spacing:1px;margin-top:2px; }
.ess-hero2__big{ margin-top:16px;display:flex;align-items:flex-end;justify-content:space-between; }
.ess-hero2__lbl{ font-size:12px;color:#bfe9dd; }
.ess-hero2__amt{ font-size:26px;font-weight:800; }
.ess-hero2__chip{ background:rgba(255,255,255,.18);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;text-decoration:none;color:#fff; }

/* Stat pills */
.ess-pills{ display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px; }
.ess-pill{ background:var(--ess-card);border:1px solid var(--ess-line);border-radius:14px;padding:12px;text-align:center; }
.ess-pill__v{ font-size:19px;font-weight:800; }
.ess-pill__l{ font-size:11px;color:var(--ess-soft);margin-top:2px; }

/* Section */
.ess-sec{ margin-top:20px; }
.ess-sec__h{ display:flex;align-items:center;justify-content:space-between;margin:0 4px 10px; }
.ess-sec__h b{ font-size:14px; }
.ess-sec__h a{ font-size:12.5px;color:var(--ess-brand);text-decoration:none;font-weight:600; }

/* Quick actions */
.ess-quick{ display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }
.ess-qi{ background:var(--ess-card);border:1px solid var(--ess-line);border-radius:16px;padding:14px 6px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--ess-ink);
  font-size:11.5px;font-weight:600;text-align:center;transition:transform .12s ease; }
.ess-qi:active{ transform:scale(.94); }
.ess-qi__ic{ width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:21px; }
.ic-blue{ background:#eff6ff;color:#2563eb;} .ic-green{ background:#f0fdf4;color:#16a34a;}
.ic-orange{ background:#fffbeb;color:#d97706;} .ic-purple{ background:#faf5ff;color:#9333ea;}
.ic-red{ background:#fef2f2;color:#dc2626;} .ic-teal{ background:#f0fdfa;color:#0d9488;}
.ic-pink{ background:#fdf2f8;color:#db2777;} .ic-indigo{ background:#eef2ff;color:#4f46e5;}

/* Card list */
.ess-card{ background:var(--ess-card);border:1px solid var(--ess-line);border-radius:var(--ess-radius);overflow:hidden; }
.ess-li{ display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--ess-line);text-decoration:none;color:var(--ess-ink); }
.ess-li:last-child{ border-bottom:0; }
.ess-li__ic{ width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:17px;flex:none; }
.ess-li__main{ flex:1;min-width:0;display:flex;flex-direction:column;gap:2px; }
.ess-li__t{ display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ess-li__s{ display:block;font-size:12px;color:var(--ess-soft); }
.ess-li__r{ text-align:right;font-size:13px;font-weight:700;white-space:nowrap;flex:none; }
.ess-chip{ display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700; }
.chip-green{ background:#dcfce7;color:#166534;} .chip-orange{ background:#fef3c7;color:#92400e;}
.chip-red{ background:#fee2e2;color:#991b1b;}

/* progres */
.ess-prog{ background:var(--ess-card);border:1px solid var(--ess-line);border-radius:var(--ess-radius);padding:16px; }
.ess-prog__bar{ height:10px;border-radius:999px;background:#eef0f3;overflow:hidden;margin-top:10px; }
.ess-prog__fill{ height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ess-brand),var(--ess-brand2)); }

.ess-empty{ text-align:center;padding:34px 16px;color:var(--ess-soft); }
.ess-empty .i{ font-size:34px;opacity:.5; }

/* Rincian saldo per jenis tabungan */
.ess-split{ display:flex;gap:10px;margin:10px 0 4px; }
.ess-split__item{ flex:1;background:var(--ess-card);border:1px solid var(--ess-line);
  border-radius:14px;padding:11px 13px;min-width:0; }
.ess-split__lbl{ display:block;font-size:11.5px;color:var(--ess-soft); }
.ess-split__val{ display:block;font-size:15px;font-weight:800;margin-top:2px;
  letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* Bottom tab bar + FAB */
.ess-tabbar{ position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;
  height:68px;background:var(--ess-card);border-top:1px solid var(--ess-line);
  display:flex;align-items:center;justify-content:space-around;z-index:30; }
@media(min-width:520px){ .ess-tabbar{ bottom:18px;border-radius:0 0 26px 26px; } }
.ess-tab{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;
  color:#9aa4b2;font-size:10.5px;font-weight:600;padding-top:8px; }
.ess-tab i{ font-size:19px;font-style:normal; }
.ess-tab.active{ color:var(--ess-brand); }
.ess-fab{ flex:0 0 64px;display:flex;flex-direction:column;align-items:center;text-decoration:none; }
.ess-fab__btn{ width:58px;height:58px;border-radius:50%;margin-top:-26px;
  background:linear-gradient(135deg,var(--ess-brand),var(--ess-brand2));color:#fff;
  display:grid;place-items:center;font-size:26px;box-shadow:0 8px 20px rgba(13,138,95,.45);border:4px solid var(--ess-bg); }
.ess-fab span{ font-size:10.5px;font-weight:700;color:var(--ess-brand);margin-top:3px; }

/* Form ESS */
.ess-field{ margin-bottom:14px; }
.ess-field label{ display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#384655; }
.ess-field input,.ess-field select,.ess-field textarea{ width:100%;padding:13px 14px;border:1.5px solid var(--ess-line);
  border-radius:13px;font:inherit;background:#fff;color:var(--ess-ink);outline:none;-webkit-appearance:none; }
.ess-field input:focus,.ess-field select:focus{ border-color:var(--ess-brand);box-shadow:0 0 0 3px rgba(13,138,95,.12); }
.ess-hint{ font-size:11.5px;color:var(--ess-soft);margin-top:5px; }

.ess-btn{ display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border-radius:14px;border:0;
  font:inherit;font-weight:700;font-size:15px;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--ess-brand),var(--ess-brand2));box-shadow:0 8px 18px rgba(13,138,95,.28); }
.ess-btn:disabled{ opacity:.45;box-shadow:none;cursor:not-allowed; }
.ess-btn--ghost{ background:#fff;border:1.5px solid var(--ess-line);color:var(--ess-ink);box-shadow:none; }
.ess-btn--sm{ width:auto;padding:9px 14px;font-size:13px;border-radius:11px; }
.ess-btn--danger{ background:#fff;border:1.5px solid #f3c4cd;color:#dc2626;box-shadow:none; }

/* Bulan (pilih iuran) */
.ess-months{ display:grid;grid-template-columns:repeat(3,1fr);gap:9px; }
.ess-month{ position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;
  border:1.5px solid var(--ess-line);border-radius:13px;background:#fff;font-size:13px;font-weight:600;cursor:pointer;user-select:none; }
.ess-month input{ position:absolute;opacity:0;pointer-events:none; }
.ess-month.on{ background:var(--ess-brand);border-color:var(--ess-brand);color:#fff;box-shadow:0 6px 14px rgba(13,138,95,.28); }
.ess-month small{ font-size:10px;font-weight:700;text-transform:uppercase;opacity:.85; }
.ess-month.lunas{ background:#f0fdf4;border-color:#bbf7d0;color:#166534;cursor:default; }
.ess-month.pending{ background:#fffbeb;border-color:#fde68a;color:#92400e;cursor:default; }

/* Bank transfer */
.ess-bank{ display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--ess-radius);
  background:linear-gradient(135deg,#0f766e,#0a3f39);color:#fff;margin-bottom:14px; }
.ess-bank i{ font-size:26px;opacity:.9; }
.ess-bank .b1{ font-size:11px;color:#bfe9dd;text-transform:uppercase;letter-spacing:.04em; }
.ess-bank .b2{ font-size:17px;font-weight:800; }
.ess-bank .b3{ font-size:12.5px;color:#d7efe5; }

/* total card */
.ess-total{ display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:var(--ess-radius);
  background:#fff;border:1px solid var(--ess-line);margin:14px 0; }
.ess-total .t1{ font-size:12px;color:var(--ess-soft);text-transform:uppercase;letter-spacing:.04em; }
.ess-total .t2{ font-size:24px;font-weight:800;color:var(--ess-brand); }

/* Profil */
.ess-profhead{ text-align:center;padding:6px 0 16px; }
.ess-profhead__ph{ width:96px;height:96px;border-radius:50%;margin:0 auto 10px;overflow:hidden;border:3px solid #e8f5ef; }
.ess-profhead__ph img{ width:100%;height:100%;object-fit:cover; }
.ess-profhead__name{ font-size:19px;font-weight:800; }
.ess-profhead__no{ font-size:12.5px;color:var(--ess-soft);letter-spacing:1px; }
.ess-row{ display:flex;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--ess-line);font-size:13.5px; }
.ess-row:last-child{ border-bottom:0; }
.ess-row .k{ color:var(--ess-soft); }
.ess-row .v{ font-weight:600;text-align:right; }

/* Login ESS */
.ess-login{ min-height:100vh;display:flex;flex-direction:column; }
.ess-login__hero{ background:linear-gradient(135deg,#0f766e,#0a3f39);color:#fff;
  padding:54px 26px 40px;text-align:center;border-radius:0 0 30px 30px; }
.ess-login__logo{ width:78px;height:78px;margin:0 auto 16px; }
.ess-login__logo img{ width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.28)); }
.ess-login__hero h1{ margin:0;font-size:23px; }
.ess-login__hero p{ margin:6px 0 0;color:#bfe9dd;font-size:13.5px; }
.ess-login__card{ margin:-24px 20px 0;background:#fff;border-radius:20px;padding:22px;
  box-shadow:0 14px 34px rgba(16,24,40,.12);flex:1 0 auto; }
.ess-login__card h2{ margin:0 0 4px;font-size:18px; }
.ess-login__card .sub{ margin:0 0 18px;color:var(--ess-soft);font-size:13px; }
.ess-login__ft{ text-align:center;padding:20px;font-size:12.5px;color:var(--ess-soft); }

/* ============ POLISH "WOW" ============ */
html, body.ess-app{ overflow-x:hidden; }
.ess-phone{ width:100%; }

/* shadow lebih lembut & berlapis */
.ess-card,.ess-pill,.ess-qi,.ess-prog,.ess-total{ box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 24px rgba(16,24,40,.05); }

/* animasi masuk bertahap */
@keyframes essUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
.ess-hero2,.ess-pills,.ess-sec{ animation:essUp .45s cubic-bezier(.22,1,.36,1) both; }
.ess-pills{ animation-delay:.05s; } .ess-sec:nth-of-type(1){ animation-delay:.08s; }
.ess-sec:nth-of-type(2){ animation-delay:.13s; } .ess-sec:nth-of-type(3){ animation-delay:.18s; }
.ess-sec:nth-of-type(4){ animation-delay:.23s; } .ess-sec:nth-of-type(5){ animation-delay:.28s; }

/* hero: kilau dekoratif + interaksi */
.ess-hero2{ position:relative; overflow:hidden; }
.ess-hero2::after{ content:''; position:absolute; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); top:-70px; right:-50px; }
.ess-hero2__chip{ transition:transform .12s ease, background .2s ease; }
.ess-hero2__chip:active{ transform:scale(.94); }

/* tiles & list interaksi */
.ess-qi{ transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.ess-qi:hover{ transform:translateY(-3px); border-color:#cdeadd; box-shadow:0 10px 22px rgba(13,138,95,.14); }
.ess-li{ transition:background .15s ease; }
.ess-li:hover{ background:#fafdfb; }
.ess-pill{ transition:transform .14s ease; } .ess-pill:hover{ transform:translateY(-2px); }
.ess-btn{ transition:transform .12s ease, filter .15s ease, box-shadow .15s ease; }
.ess-btn:active:not(:disabled){ transform:scale(.98); }
.ess-btn:hover:not(:disabled){ filter:brightness(1.03); }

/* FAB berdenyut */
@keyframes essPulse{ 0%{ box-shadow:0 8px 20px rgba(13,138,95,.45), 0 0 0 0 rgba(20,184,166,.45);} 70%{ box-shadow:0 8px 20px rgba(13,138,95,.45), 0 0 0 13px rgba(20,184,166,0);} 100%{ box-shadow:0 8px 20px rgba(13,138,95,.45), 0 0 0 0 rgba(20,184,166,0);} }
.ess-fab__btn{ animation:essPulse 2.6s infinite; transition:transform .12s ease; }
.ess-fab:active .ess-fab__btn{ transform:scale(.92); }
.ess-tab{ transition:color .15s ease; }
.ess-tab i{ transition:transform .15s ease; }
.ess-tab.active i{ transform:translateY(-2px); }

/* Pengumuman */
.ess-ann{ display:flex; gap:12px; align-items:flex-start; padding:13px 15px; border-radius:15px;
  background:linear-gradient(135deg,#fff7ed,#ffedd5); border:1px solid #fed7aa; margin-bottom:16px; }
.ess-ann__ic{ width:34px;height:34px;border-radius:10px;background:#fed7aa;color:#c2410c;display:grid;place-items:center;font-size:15px;flex:none; }
.ess-ann b{ display:block; font-size:13px; color:#9a3412; }
.ess-ann span{ font-size:12.5px; color:#b45309; }

/* Lonceng notifikasi */
.ess-appbar__act{ position:relative; }
.ess-bell-badge{ position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; border-radius:9px;
  background:#ef4444; color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center; padding:0 4px; border:2px solid #fff; }

/* Banner promo/info bergradien */
.ess-promo{ display:flex; align-items:center; gap:14px; padding:16px; border-radius:16px; color:#fff; margin-bottom:16px;
  background:linear-gradient(120deg,#4f46e5,#7c3aed); box-shadow:0 10px 24px rgba(79,70,229,.28); }
.ess-promo i{ font-size:26px; opacity:.95; }
.ess-promo b{ font-size:14px; } .ess-promo span{ font-size:12.5px; opacity:.9; display:block; }

/* ============ Gaya Doclyn (portal) ============ */
/* Header beranda: salam + bell + avatar (ringan) */
.dcl-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 16px 6px; }
.dcl-head__greet{ font-size:13px; color:var(--ess-soft); }
.dcl-head__name{ font-size:20px; font-weight:800; letter-spacing:-.01em; }
.dcl-head__act{ display:flex; align-items:center; gap:10px; }
.dcl-iconbtn{ position:relative; width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--ess-line);
  display:grid; place-items:center; color:#56606e; font-size:16px; box-shadow:0 1px 3px rgba(16,24,40,.06); }
.dcl-iconbtn .dot{ position:absolute; top:0; right:0; min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  background:#ef4444; color:#fff; font-size:9px; font-weight:800; display:grid; place-items:center; border:2px solid #fff; }
.dcl-ava{ width:42px; height:42px; border-radius:50%; overflow:hidden; background:var(--ess-brand); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:17px; }
.dcl-ava img{ width:100%; height:100%; object-fit:cover; }

/* Topbar halaman dalam: back + judul + bell */
.dcl-top{ display:flex; align-items:center; gap:12px; padding:13px 14px; background:#fff;
  border-bottom:1px solid var(--ess-line); position:sticky; top:0; z-index:20; }
.dcl-back{ width:40px; height:40px; border-radius:50%; background:#f1f4f8; display:grid; place-items:center;
  color:#384655; font-size:16px; text-decoration:none; flex:none; }
.dcl-top__title{ flex:1; font-weight:800; font-size:16px; }

/* Kartu ringkas tunggakan (hijau) */
.dcl-balance{ background:linear-gradient(135deg, var(--ess-brand), #0a4f44); color:#fff; border-radius:18px;
  padding:18px; box-shadow:0 12px 26px rgba(13,138,95,.30); position:relative; overflow:hidden; }
.dcl-balance::after{ content:''; position:absolute; width:150px; height:150px; border-radius:50%;
  background:rgba(255,255,255,.10); top:-60px; right:-40px; }
.dcl-balance__lbl{ font-size:12.5px; color:#bfe9dd; }
.dcl-balance__amt{ font-size:27px; font-weight:800; margin-top:2px; }
.dcl-balance__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.dcl-balance__btn{ background:#fff; color:var(--ess-brand); border-radius:11px; padding:9px 16px; font-weight:700;
  font-size:13px; text-decoration:none; display:inline-flex; align-items:center; gap:7px; }

/* Banner status (klik -> detail) */
.dcl-banner{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:15px; margin-top:14px;
  background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; text-decoration:none; }
.dcl-banner__ic{ width:38px; height:38px; border-radius:11px; background:#fed7aa; color:#c2410c; display:grid; place-items:center; font-size:16px; flex:none; }
.dcl-banner__b{ flex:1; min-width:0; } .dcl-banner__b b{ display:block; font-size:13.5px; } .dcl-banner__b span{ font-size:12px; color:#b45309; }
.dcl-chev{ color:#cbd5e1; }

/* Section head dengan link */
.dcl-sechead{ display:flex; align-items:center; justify-content:space-between; margin:20px 4px 10px; }
.dcl-sechead b{ font-size:15px; }
.dcl-sechead a{ font-size:12.5px; color:var(--ess-brand); font-weight:700; text-decoration:none; }

/* ============ Action Sheet (bottom sheet) ============ */
.sheet-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; z-index:60; }
.sheet-overlay.open{ display:block; animation:essFade .2s ease; }
@keyframes essFade{ from{opacity:0} to{opacity:1} }
.sheet{ position:fixed; left:50%; bottom:0; width:100%; max-width:480px;
  transform:translateX(-50%) translateY(100%); background:#fff; border-radius:22px 22px 0 0;
  padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px)); z-index:61;
  transition:transform .3s cubic-bezier(.22,1,.36,1); }
.sheet-overlay.open .sheet{ transform:translateX(-50%) translateY(0); }
.sheet-handle{ width:42px; height:5px; border-radius:3px; background:#e2e8f0; margin:6px auto 14px; }
.sheet-title{ font-weight:800; font-size:16px; margin:0 4px 12px; }
.sheet-action{ display:flex; align-items:center; gap:14px; padding:12px; border-radius:14px; text-decoration:none; color:var(--ess-ink); }
.sheet-action:active{ background:#f4f6f9; }
.sheet-action__ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:19px; flex:none; }
.sheet-action__t{ flex:1; min-width:0; }
.sheet-action__t b{ display:block; font-size:14px; } .sheet-action__t small{ font-size:12px; color:var(--ess-soft); }
.sheet-action__chev{ color:#cbd5e1; }
.sheet-cancel{ width:100%; margin-top:10px; padding:13px; border-radius:14px; background:#f1f4f8; color:#56606e;
  font:inherit; font-weight:700; cursor:pointer; border:0; }

/* ============ Notifikasi ============ */
.notif{ display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--ess-line); }
.notif:last-child{ border-bottom:0; }
.notif.unread{ background:#f0fdf9; }
.notif__ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:17px; flex:none; }
.notif__b{ flex:1; min-width:0; }
.notif__t{ font-size:13.5px; font-weight:600; }
.notif__s{ font-size:12.5px; color:var(--ess-soft); margin-top:2px; }
.notif__time{ font-size:11px; color:#9aa4b2; margin-top:4px; }

/* ============ Onboarding ============ */
.onb{ min-height:100vh; display:flex; flex-direction:column; background:linear-gradient(180deg,#0f766e 0%, #0a3f39 60%, #0a3f39 100%); color:#fff; padding:0; }
.onb__top{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 30px; }
.onb__logo{ width:88px; height:88px; margin-bottom:26px; }
.onb__logo img{ filter:drop-shadow(0 14px 30px rgba(0,0,0,.3)); }
.onb__title{ font-size:26px; font-weight:800; line-height:1.15; }
.onb__desc{ color:#bfe9dd; margin-top:10px; max-width:300px; }
.onb__sheet{ background:#fff; color:var(--ess-ink); border-radius:26px 26px 0 0; padding:26px 24px calc(26px + env(safe-area-inset-bottom,0px)); }
.onb__feat{ display:flex; gap:14px; align-items:flex-start; margin-bottom:16px; }
.onb__feat-ic{ width:44px; height:44px; border-radius:13px; background:var(--ess-brand-light,#e8f5ef); color:var(--ess-brand); display:grid; place-items:center; font-size:18px; flex:none; }
.onb__feat b{ font-size:14px; } .onb__feat span{ font-size:12.5px; color:var(--ess-soft); }

@media print{ .ess-tabbar,.ess-appbar{ display:none!important; } }

/* ===== Makam (portal anggota) ===== */
.ic-slate{ background:#eef1f5; color:#475569; }
.mk-kav{ display:flex; align-items:center; gap:13px; background:linear-gradient(135deg,#0f766e,#0a3f39); color:#fff; border-radius:16px; padding:16px; margin-bottom:10px; box-shadow:0 10px 24px rgba(12,59,55,.28); }
.mk-kav__ic{ width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.16); display:grid; place-items:center; font-size:22px; flex:none; }
.mk-kav__main{ flex:1; min-width:0; }
.mk-kav__no{ font-weight:800; font-size:18px; }
.mk-kav__sub{ font-size:12.5px; opacity:.92; margin-top:1px; }
.ess-note{ display:flex; gap:10px; align-items:flex-start; background:#eef6ff; color:#1e40af; border:1px solid #dbeafe; border-radius:14px; padding:12px 14px; font-size:13px; line-height:1.45; }
.ess-note i{ margin-top:2px; }

/* Pagination (portal) */
.hk-pg--portal{ flex-direction:column; gap:10px; align-items:center; padding:14px 4px 2px; border-top:0; font-size:12.5px; color:var(--ess-soft); }
.hk-pg--portal .hk-pg__per select{ border:1px solid var(--ess-line); border-radius:9px; font-size:12.5px; }
.hk-pg--portal .hk-pg__b{ border:1px solid var(--ess-line); border-radius:9px; color:var(--ess-ink); font-weight:700; }
.hk-pg--portal .hk-pg__b.is-on{ background:var(--ess-brand); border-color:var(--ess-brand); color:#fff; }

/* Pesan flash (sukses/error/info) di portal anggota */
.flash{ padding:12px 14px;border-radius:14px;font-size:13.5px;font-weight:500;border:1px solid transparent; }
.flash--success{ background:#e7f7ee;color:#15803d;border-color:#bbe7cd; }
.flash--error{ background:#fde8ec;color:#be123c;border-color:#f5c2cf; }
.flash--info{ background:#e8f5ef;color:#0a6f4c;border-color:#bfe6d6; }
.flash--action{ display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; }
.flash--action .ess-btn{ margin:0; }