@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #f1f5f3;
}

/* Kustomisasi tampilan kartu menu */
.menu-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    cursor: pointer; transition: transform 0.2s ease-in-out;
}
.menu-card:hover { transform: translateY(-2px); }
.menu-card > span { font-size: 12px; font-weight: 600; line-height: 1.25; color: #243a34; }
.mi { width: 3.4rem; height: 3.4rem; border-radius: 1.1rem; display: flex; align-items: center;
      justify-content: center; color: #fff; margin-bottom: 0.45rem; }
.mi .ic { width: 1.6rem; height: 1.6rem; }

/* Sembunyikan scrollbar namun tetap bisa digeser */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Teks kosong untuk daftar yang belum berisi */
.empty-hint:empty::before {
    content: attr(data-empty);
    display: block; text-align: center; padding: 0.75rem;
    font-size: 0.75rem; color: #8ea19b;
}

.ic { display: inline-block; }
.ic svg { width: 100%; height: 100%; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0.45rem 1rem;
            border-radius: 1.1rem; font-size: 11px; font-weight: 500; color: #8ea19b; transition: all 0.2s; }
.nav-item .ic { width: 1.5rem; height: 1.5rem; }
.nav-active { background: #e4ece8; color: #c0502f; font-weight: 700; }

.seg { background: #e4ece8; border-radius: 1.1rem; padding: 0.3rem; display: flex; gap: 0.25rem; }
.seg button { flex: 1; padding: 0.7rem 1rem; border-radius: 0.9rem; font-weight: 600; font-size: 15px; color: #6f847d; white-space: nowrap; }
.seg button.on { background: #fff; color: #14231f; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.seg.sm { padding: 0.2rem; } .seg.sm button { padding: 0.45rem 0.6rem; font-size: 13px; }
.soft { background: #e4ece8; border-radius: 1.1rem; }

.seg button.sel { background: #14231f; color: #fff; }
.scope { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 1rem; border: 2px solid #e7e5e4; border-radius: 1rem; font-weight: 600; text-align: left; color: #14231f; }
.scope.on { border-color: #3d7a4f; background: #e6f0ec; }
.rad { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid #8ea19b; flex-shrink: 0; }
.scope.on .rad { border: 6px solid #3d7a4f; }

.mi.sm { width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; margin-bottom: 0; }
.mi.sm .ic { width: 1.25rem; height: 1.25rem; }

/* ===== versi lebih ringkas ===== */
html { font-size: 14px; }
.mi { width: 2.9rem; height: 2.9rem; border-radius: 0.95rem; }
.mi .ic { width: 1.35rem; height: 1.35rem; }
.mi.sm { width: 2.2rem; height: 2.2rem; border-radius: 0.7rem; }
.mi.sm .ic { width: 1.1rem; height: 1.1rem; }
.menu-card > span { font-size: 11px; }
.seg button { padding: 0.55rem 0.8rem; font-size: 13px; }
.seg.sm button { padding: 0.4rem 0.55rem; font-size: 12px; }
.nav-item { padding: 0.35rem 0.9rem; font-size: 10px; }
.nav-item .ic { width: 1.3rem; height: 1.3rem; }

/* =================== ANIMASI =================== */
@keyframes pageInFwd  { from { opacity: 0; transform: translateX(28px); }  to { opacity: 1; transform: none; } }
@keyframes pageInBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes rise   { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes popIn  { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; transform: scale(.96); } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fabItem { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes navPop  { 0% { transform: scale(.8); } 60% { transform: scale(1.18); } 100% { transform: none; } }

/* pindah halaman */
.page-in-fwd  { animation: pageInFwd .38s cubic-bezier(.22, 1, .36, 1) both; }
.page-in-back { animation: pageInBack .38s cubic-bezier(.22, 1, .36, 1) both; }
/* kartu & bagian muncul berurutan */
.rise   { animation: rise .5s cubic-bezier(.22, 1, .36, 1) both; }
.pop-in { animation: popIn .38s cubic-bezier(.22, 1, .36, 1) both; }
.fade-out { animation: fadeOut .25s ease both; }

/* tekan tombol */
button, .menu-card, .nav-item { -webkit-tap-highlight-color: transparent; }
button, .menu-card {
    transition: scale .18s cubic-bezier(.22, 1, .36, 1), background-color .25s, color .25s, border-color .25s, box-shadow .25s, opacity .2s;
}
button:active, .menu-card:active { scale: .95; }
.seg button.on { transition: background-color .25s, color .25s, box-shadow .25s; }

/* bottom sheet & overlay */
#pos-overlay:not(.hidden), #quick-overlay:not(.hidden), #calc-overlay:not(.hidden), #fab-overlay:not(.hidden) { animation: fadeIn .25s ease both; }
#pos-overlay:not(.hidden) > div, #quick-overlay:not(.hidden) > div, #calc-overlay:not(.hidden) > div { animation: sheetUp .4s cubic-bezier(.22, 1, .36, 1) both; }

/* form yang dibuka-tutup */
#bud-addform:not(.hidden), #goal-form:not(.hidden), #debt-form:not(.hidden), #calendar-form:not(.hidden),
#maintenance-form:not(.hidden), #alloc-editor:not(.hidden) { animation: popIn .38s cubic-bezier(.22, 1, .36, 1) both; }

/* tombol + (FAB) */
#fab-btn { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), scale .18s; }
#fab-menu:not(.hidden) > button { animation: fabItem .34s cubic-bezier(.22, 1, .36, 1) both; }
#fab-menu:not(.hidden) > button:nth-last-child(1) { animation-delay: 0s; }
#fab-menu:not(.hidden) > button:nth-last-child(2) { animation-delay: .05s; }
#fab-menu:not(.hidden) > button:nth-last-child(3) { animation-delay: .10s; }
#fab-menu:not(.hidden) > button:nth-last-child(4) { animation-delay: .15s; }

/* bar progres tumbuh dari kiri */
div[style*="width:"][style*="%"] { transform-origin: left center; animation: barGrow .7s cubic-bezier(.22, 1, .36, 1) both; }
#alloc-bar > div { animation: none; }

/* ikon menu bawah memantul saat aktif */
.nav-active .ic { animation: navPop .4s cubic-bezier(.34, 1.56, .64, 1); }

/* hormati pengaturan "kurangi gerakan" */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* =================== DIALOG (pengganti alert/confirm/prompt) =================== */
@keyframes dlgIn  { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes dlgOut { to { opacity: 0; transform: translateY(8px) scale(.96); } }
.dlg-ov { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.25rem;
          background: rgba(43, 33, 24, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fadeIn .2s ease both; }
.dlg-ov.out { animation: fadeOut .18s ease both; }
.dlg-ov.out .dlg { animation: dlgOut .18s ease both; }
.dlg { width: 100%; max-width: 21rem; background: #f1f5f3; border-radius: 1.75rem; padding: 1.5rem 1.25rem 1.25rem; text-align: center;
       box-shadow: 0 24px 60px rgba(43, 33, 24, .35); animation: dlgIn .34s cubic-bezier(.34, 1.4, .64, 1) both; }
.dlg-ic { width: 3.6rem; height: 3.6rem; border-radius: 1.2rem; margin: 0 auto .9rem; display: flex; align-items: center; justify-content: center; }
.dlg-ic svg { width: 1.8rem; height: 1.8rem; }
.dlg h3 { font-size: 1.25rem; font-weight: 700; color: #14231f; line-height: 1.2; }
.dlg p { margin-top: .45rem; font-size: 1rem; font-weight: 500; color: #56695f; line-height: 1.45; white-space: pre-line; word-break: break-word; }
.dlg-in { display: flex; align-items: center; margin-top: 1rem; background: #fff; border: 2px solid #d3dfda; border-radius: 1rem; padding: 0 1rem; text-align: left; transition: border-color .2s; }
.dlg-in:focus-within { border-color: #e2674a; }
.dlg-in span { font-weight: 700; color: #8ea19b; margin-right: .5rem; }
.dlg-in input { flex: 1; min-width: 0; padding: .9rem 0; font-size: 1.1rem; font-weight: 600; color: #14231f; outline: none; background: transparent; }
.dlg-btns { display: flex; gap: .6rem; margin-top: 1.3rem; }
.dlg-btns button { flex: 1; padding: .9rem .5rem; border-radius: 1rem; font-weight: 700; font-size: 1rem; }
.dlg-cancel { background: #e4ece8; color: #14231f; }
.dlg-ok { background: #14231f; color: #fff; }
.dlg-ok.danger { background: #a0504a; }

/* cetak laporan */
@media print {
    nav, .no-print, #fab-btn, footer { display: none !important; }
    body { background: #fff !important; }
    .page-view { min-height: 0 !important; }
    * { animation: none !important; }
}

/* ===== PICKER CANTIK (pengganti select & tanggal bawaan browser) ===== */
.pk-wrap { position: relative; }
.pk-btn {
    width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    background: #fff; border: 1px solid #d3dfda; border-radius: 1rem; padding: .7rem .9rem;
    font-size: .9rem; font-weight: 600; color: #14231f; text-align: left;
    box-shadow: 0 1px 2px rgba(43, 33, 24, .06); transition: border-color .2s, box-shadow .2s;
}
.pk-btn:hover { border-color: #b6c6bf; }
.pk-btn:focus-visible { outline: none; border-color: #5b8fa3; box-shadow: 0 0 0 3px rgba(91, 143, 163, .22); }
.pk-btn:disabled { opacity: .55; }
.pk-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pk-val.pk-empty { color: #879a94; font-weight: 500; }
.pk-ico { color: #7f928c; display: flex; flex-shrink: 0; }
.pk-ico svg { width: 1.05rem; height: 1.05rem; }

.pk-ov {
    position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center;
    background: rgba(43, 33, 24, .4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    animation: fadeIn .2s ease both;
}
.pk-ov.out { animation: fadeOut .2s ease both; }
.pk-ov.out .pk-sheet { animation: pkDown .24s ease-in both; }
@keyframes pkDown { to { transform: translateY(100%); } }
@keyframes pkIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

.pk-sheet {
    width: 100%; max-width: 480px; max-height: 80vh; display: flex; flex-direction: column;
    background: #f1f5f3; border-radius: 1.75rem 1.75rem 0 0;
    padding: .75rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -14px 40px rgba(43, 33, 24, .28);
    animation: sheetUp .34s cubic-bezier(.22, 1, .36, 1) both;
}
.pk-grip { width: 2.75rem; height: .3rem; border-radius: 999px; background: #c2d1ca; margin: 0 auto .85rem; }
.pk-title { font-size: 1.05rem; font-weight: 700; color: #14231f; padding: 0 .25rem .8rem; }

.pk-list { overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; }
.pk-opt {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%;
    padding: .95rem 1rem; border-radius: 1.15rem; background: #fff; border: 2px solid transparent;
    font-size: .95rem; font-weight: 600; color: #243a34; text-align: left;
    animation: pkIn .3s ease both; transition: background .15s, border-color .15s;
}
.pk-opt.on { background: #e6f0ec; border-color: #3d6b4a; color: #14231f; }
.pk-check {
    width: 1.5rem; height: 1.5rem; border-radius: 999px; flex-shrink: 0; color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.pk-opt.on .pk-check { background: #3d6b4a; }
.pk-check svg { width: .9rem; height: .9rem; }

.pk-cal { display: flex; flex-direction: column; gap: .8rem; }
.pk-nav { display: flex; align-items: center; justify-content: space-between; }
.pk-arrow {
    width: 2.5rem; height: 2.5rem; border-radius: 999px; background: #fff; border: 1px solid #d3dfda;
    font-size: 1.4rem; line-height: 1; color: #14231f;
}
.pk-month { font-weight: 700; color: #14231f; font-size: .95rem; }
.pk-week, .pk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; text-align: center; }
.pk-week span { font-size: .65rem; font-weight: 700; color: #7f928c; padding: .2rem 0; }
.pk-week .sun { color: #c0655e; }
.pk-day {
    aspect-ratio: 1; border-radius: .9rem; font-size: .88rem; font-weight: 600; color: #243a34;
    background: #fff; border: 1px solid transparent; transition: background .15s;
}
.pk-day:hover { background: #e4ece8; }
.pk-day.sun { color: #c0655e; }
.pk-day.today { border-color: #5b8fa3; color: #2e6a7e; }
.pk-day.sel { background: #14231f; color: #fff; border-color: #14231f; }
.pk-foot { display: flex; justify-content: flex-end; }
.pk-ghost { padding: .5rem .95rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #3d6b4a; background: #e6f0ec; }
.pk-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pk-mon { padding: .8rem 0; border-radius: 1rem; background: #fff; font-weight: 600; color: #243a34; font-size: .9rem; }
.pk-mon.sel { background: #14231f; color: #fff; }

/* ===== PILIH JAM ===== */
.pk-sec { font-size: .7rem; font-weight: 700; color: #7f928c; text-transform: uppercase; letter-spacing: .06em; margin-top: .2rem; }
.pk-tiles { display: grid; gap: .4rem; }
.pk-tiles-h { grid-template-columns: repeat(6, 1fr); }
.pk-tiles-m { grid-template-columns: repeat(4, 1fr); }
.pk-tile {
    padding: .6rem 0; border-radius: .85rem; background: #fff; border: 1px solid transparent;
    font-size: .9rem; font-weight: 600; color: #243a34; font-variant-numeric: tabular-nums;
    transition: background .15s;
}
.pk-tile:hover { background: #e4ece8; }
.pk-tile.sel { background: #14231f; color: #fff; border-color: #14231f; }
.pk-foot-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .4rem; }
.pk-ghost { padding: .7rem .5rem; border-radius: 1rem; font-size: .85rem; font-weight: 700; }
.pk-ghost-muted { color: #56695f; background: #e4ece8; }
.pk-ghost-solid { color: #fff; background: #3d6b4a; }

/* ===== PILIH JAM: roda putar ===== */
.pk-wheel-disp {
    text-align: center; font-size: 2.6rem; font-weight: 700; color: #14231f;
    font-variant-numeric: tabular-nums; letter-spacing: .02em; margin: .1rem 0 .4rem;
}
.pk-colon-d { display: inline-block; margin: 0 .35rem; color: #7f928c; }
.pk-wheel { position: relative; display: flex; justify-content: center; align-items: center; gap: .25rem; height: 132px; }
.pk-wheel-band {
    position: absolute; left: .75rem; right: .75rem; top: 44px; height: 44px; border-radius: 1rem;
    background: #e6f0ec; border: 2px solid #3d6b4a; pointer-events: none;
}
.pk-col {
    position: relative; z-index: 1; width: 5.5rem; height: 132px; overflow-y: auto;
    scroll-snap-type: y mandatory; scrollbar-width: none; padding: 44px 0;
}
.pk-col::-webkit-scrollbar { display: none; }
.pk-col-item {
    height: 44px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center;
    font-size: 1.2rem; font-weight: 600; color: #9aaca6; font-variant-numeric: tabular-nums; cursor: pointer;
    transition: color .15s, font-size .15s;
}
.pk-col-item.on { color: #14231f; font-weight: 700; font-size: 1.45rem; }
.pk-wheel .pk-colon { position: relative; z-index: 1; font-size: 1.6rem; font-weight: 700; color: #14231f; }

/* ===== HALAMAN TAMBAHAN ===== */
.conv-anim { animation: convIn .35s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes convIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
details.faq summary { cursor: pointer; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq[open] .faq-plus { transform: rotate(45deg); display: inline-block; }
.faq-plus { transition: transform .2s; display: inline-block; }

/* ================= BERDUA ================= */
.bd-title { font-size: 2.1rem; font-weight: 800; color: #7a2f58; line-height: 1.1; }
.bd-polaroid { position: relative; width: 72%; max-width: 260px; margin: 0 auto; cursor: pointer; }
.bd-photo { aspect-ratio: 4/5; background: #e4ece8 center/cover no-repeat; border-radius: 999px 999px 1.2rem 1.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; color: #879a94; font-size: .8rem; font-weight: 600; box-shadow: 0 10px 28px rgba(20,35,31,.18); }
.bd-photo .ic { width: 2rem; height: 2rem; }
.bd-cap { padding: .8rem 0 .2rem; font-weight: 700; color: #14231f; }
.bd-note { position: relative; background: #f6e4ee; border-radius: .9rem; padding: 1rem 1.1rem; color: #7a2f58;  }
.bd-note b { display: block; font-size: 1.05rem; } .bd-note span { font-size: .85rem; font-weight: 500; }
.bd-strip { display: flex; gap: .75rem; overflow-x: auto; padding: .3rem .2rem .9rem; scroll-snap-type: x proximity; }
  .bd-card { flex: 0 0 8.2rem; scroll-snap-align: start; background: #fff; border: 1px solid #d3dfda; border-radius: 1rem; padding: .45rem .45rem .7rem; box-shadow: 0 4px 14px rgba(60,40,30,.13); text-align: center; }
.bd-card .th { aspect-ratio: 1; background: #f6e4ee; border-radius: .3rem; display: flex; align-items: center; justify-content: center; color: #8f4a73; margin-bottom: .5rem; }
.bd-card .th .ic { width: 1.8rem; height: 1.8rem; }
.bd-card p { font-weight: 700; font-size: .8rem; line-height: 1.2; color: #14231f; } .bd-card small { font-size: .72rem; color: #6f847d; font-weight: 600; }
.bd-conv { display: flex; align-items: center; gap: 1rem; padding: 1.1rem; border-radius: 1.6rem; color: #fff; background: linear-gradient(135deg,#a8406f,#7a2f58); }
.bd-conv-ic { width: 3.1rem; height: 3.1rem; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; flex: none; }
.bd-conv-ic .ic { width: 1.5rem; height: 1.5rem; }
.bd-tile { border-radius: 1.2rem; padding: 1rem; cursor: pointer; }
.bd-tile-ic { width: 2.6rem; height: 2.6rem; border-radius: .8rem; color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: .7rem; }
.bd-tile-ic .ic { width: 1.25rem; height: 1.25rem; }
.bd-know { background: #12231f; color: #fff; border-radius: 1.1rem; padding: 1.1rem;  }
.bd-cta { width: 100%; padding: 1rem; border-radius: 1.8rem; color: #fff; font-weight: 700; font-size: 1rem; background: linear-gradient(135deg,#a8406f,#7a2f58); }
.bd-row { display: flex; align-items: center; gap: 1rem; background: #fff; border-radius: 1.4rem; padding: .9rem; box-shadow: 0 2px 10px rgba(60,40,30,.07); }
.bd-row .ic-h { width: 3rem; height: 3rem; border-radius: 50%; background: #f6e4ee; color: #7a2f58; display: flex; align-items: center; justify-content: center; flex: none; }
.bd-row .ic-h .ic { width: 1.4rem; height: 1.4rem; }
.bd-row button { width: 2rem; height: 2rem; color: #879a94; display: flex; align-items: center; justify-content: center; }
.bd-row button .ic { width: 1.1rem; height: 1.1rem; }
.bd-seg { display: flex; background: #e4ece8; border-radius: 1.2rem; padding: .3rem; }
.bd-seg button { flex: 1; padding: .7rem; border-radius: .95rem; font-weight: 700; color: #6f847d; }
.bd-seg button.on { background: #fff; color: #14231f; }
.bd-chip { padding: .55rem 1rem; border-radius: 2rem; font-weight: 700; font-size: .85rem; background: #e4ece8; color: #6f847d; }
.bd-chip.on { background: #a8406f; color: #fff; }
.bd-q { display: block; font-size: .85rem; font-weight: 600; color: #6f847d; margin-bottom: .4rem; }
.bd-ta { width: 100%; min-height: 6rem; padding: .8rem 1rem; border: 1px solid #d3dfda; border-radius: 1.1rem; background: #f1f5f3; outline: none; resize: none; font-size: .9rem; }
.bd-ta:focus { border-color: #a8406f; }

/* ================= PENCARIAN & PENGINGAT ================= */
.sheet-ov { position: fixed; inset: 0; z-index: 90; background: rgba(20,35,31,.45); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 480px; max-height: 88vh; background: #f1f5f3; border-radius: 1.6rem 1.6rem 0 0; display: flex; flex-direction: column; animation: sheetUp .28s ease-out; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.25rem .6rem; }
.sheet-head h3 { font-weight: 800; font-size: 1.15rem; color: #14231f; }
.sheet-head button { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #e4ece8; display: flex; align-items: center; justify-content: center; }
.sheet-head .ic { width: 1.1rem; height: 1.1rem; }
.sheet-body { padding: .4rem 1.25rem 1.6rem; overflow-y: auto; }
.srch-in { width: 100%; padding: .85rem 1rem; border-radius: 1rem; border: 1px solid #d3dfda; background: #fff; outline: none; font-size: .95rem; }
.srch-in:focus { border-color: #1f4d43; }
.srch-grp { font-size: .78rem; font-weight: 800; color: #1f4d43; margin-bottom: .35rem; }
.srch-row { width: 100%; text-align: left; background: #fff; border: 1px solid #e4ece8; border-radius: 1rem; padding: .7rem .9rem; margin-bottom: .4rem; }
.bell-ic { width: 2.4rem; height: 2.4rem; border-radius: .8rem; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.bell-ic .ic { width: 1.2rem; height: 1.2rem; }
[data-bell].has-notif::after { content: ""; position: absolute; top: .55rem; right: .6rem; width: .55rem; height: .55rem; border-radius: 50%; background: #e2674a; border: 2px solid #fff; }
@keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }

/* ================= PANEL LONCENG ================= */
.bell-ov { position: fixed; inset: 0; z-index: 94; }
.bell-pop { position: fixed; z-index: 95; background: #fff; border-radius: 1.4rem; box-shadow: 0 14px 40px rgba(20,35,31,.22); border: 1px solid #e4ece8; overflow-y: auto; padding: .4rem 0; animation: bellIn .18s ease-out; }
.bell-item { display: flex; gap: .85rem; width: 100%; text-align: left; padding: .9rem 1.1rem; }
.bell-item + .bell-item { border-top: 1px solid #eef3f1; }
.bell-item > .ic { width: 1.5rem; height: 1.5rem; flex: none; margin-top: .1rem; }
.bell-item b { display: block; font-size: 1rem; color: #14231f; }
.bell-desc { display: block; font-size: .9rem; line-height: 1.5; color: #6f847d; margin-top: .15rem; }
.bell-time { display: block; font-size: .8rem; font-weight: 700; color: #9aaca6; margin-top: .3rem; }
[data-bell].bell-open { background: #e4ece8; border-radius: .9rem; }
@keyframes bellIn { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bell-pop { animation: none; } }

.srch-wrap { padding: .7rem 1rem 1rem; }
.srch-row:last-child { margin-bottom: 0; }

/* ================= HALAMAN LAINNYA ================= */
.more-row { display: flex; align-items: center; gap: 1rem; background: #fff; border-radius: 1.5rem; padding: .95rem 1rem; box-shadow: 0 2px 12px rgba(20,35,31,.07); cursor: pointer; }
.more-ic { width: 3.2rem; height: 3.2rem; border-radius: 1rem; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.more-ic .ic { width: 1.5rem; height: 1.5rem; }
.more-tx { flex: 1; min-width: 0; } .more-tx b { display: block; font-size: 1.05rem; color: #14231f; }
.more-tx small { display: block; font-size: .85rem; color: #6f847d; margin-top: .1rem; line-height: 1.35; }
.more-ch { width: 1.2rem; height: 1.2rem; color: #9aaca6; flex: none; }
.lock-ov { position: fixed; inset: 0; z-index: 300; background: #f1f5f3; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.lock-box { width: 100%; max-width: 320px; text-align: center; }
.lock-box h3 { font-weight: 800; font-size: 1.2rem; color: #14231f; margin: 1rem 0; }
.lock-box input { width: 100%; text-align: center; letter-spacing: .6rem; font-size: 1.5rem; padding: .8rem; border: 1px solid #d3dfda; border-radius: 1rem; background: #fff; outline: none; }
.lock-box input:focus { border-color: #1f4d43; }
.lock-err { min-height: 1.4rem; color: #a0504a; font-weight: 600; font-size: .85rem; margin: .5rem 0; }
.lock-box button { width: 100%; background: #14231f; color: #fff; font-weight: 700; padding: .9rem; border-radius: 1rem; }


/* ================= HALAMAN PROFIL ================= */
.pf-avatar { width: 7rem; height: 7rem; border-radius: 50%; background: #e8eeeb; color: #6f847d; display: flex; align-items: center; justify-content: center; }
.pf-avatar .ic { width: 2.8rem; height: 2.8rem; }
.pf-safe { display: flex; gap: .8rem; background: #e8efec; color: #1f4d43; border-radius: 1.5rem; padding: 1rem; }
.pf-safe .ic { width: 1.4rem; height: 1.4rem; flex: none; margin-top: .1rem; }
.pf-safe b { display: block; font-size: 1rem; margin-bottom: .25rem; }
.pf-safe p { font-size: .85rem; line-height: 1.5; }
.pf-row { display: flex; align-items: center; gap: 1rem; background: #fff; border-radius: 1.5rem; padding: .95rem 1rem; box-shadow: 0 2px 12px rgba(20,35,31,.07); }
.pf-act { flex: none; background: #14231f; color: #fff; font-weight: 700; font-size: .9rem; padding: .6rem 1.1rem; border-radius: 2rem; }
.pf-act.soft { background: #e8eeeb; color: #52665f; }
.pf-act.danger { background: #f5e3e0; color: #a0504a; }
.pf-act:disabled { opacity: .75; }
.pf-note { font-size: .85rem; color: #6f847d; line-height: 1.4; }
.pf-in { width: 100%; font-size: .9rem; padding: .7rem .75rem; border-radius: .75rem; border: 1px solid #d3dfda; background: #f4f7f5; outline: none; }

/* ================= LAYAR LOGIN & LISENSI ================= */
.gate-ov, .gate-ov *, .gate-ov *::before, .gate-ov *::after { box-sizing: border-box; }
.gate-ov button { border: 0; font-family: inherit; cursor: pointer; }
.gate-ov input { font-family: inherit; }
.gate-ov { z-index: 310; overflow-y: auto; display: block; padding: 0; background: #f1f5f3; }
.gate-page { max-width: 440px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; background: #f1f5f3; }
.gate-hero { position: relative; flex: none; background: #1f4d43; color: #fff; text-align: center; padding: max(2.25rem, env(safe-area-inset-top)) 1.5rem 6.5rem; overflow: hidden; }
.gate-mark { width: 3.4rem; height: 3.4rem; margin: 0 auto; border-radius: 1.1rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; }
.gate-mark svg { width: 1.9rem; height: 1.9rem; }
.gate-word { margin-top: .7rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.gate-pines { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; }
.gate-ov .gate-card { position: relative; flex: 1; max-width: none; margin-top: -1.4rem; background: #f1f5f3; border-radius: 1.75rem 1.75rem 0 0; padding: 1.75rem 1.5rem 2rem; text-align: left; }
.gate-ov .gate-card h3 { margin: 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -.015em; color: #14231f; }
.gate-sub { margin: .3rem 0 1.25rem; font-size: .92rem; line-height: 1.45; color: #6f847d; }
.gate-lb { display: block; margin: .85rem 0 .35rem; font-size: .85rem; font-weight: 700; color: #3b4e48; }
.gate-lb:first-of-type { margin-top: 0; }
.lock-box input.gate-in { text-align: left; letter-spacing: normal; font-size: 1rem; padding: .85rem 1rem; margin-bottom: 0; border-radius: .9rem; }
.lock-box input.gate-in:focus { border-color: #1f4d43; box-shadow: 0 0 0 3px rgba(31,77,67,.16); }
.gate-pw { position: relative; }
.lock-box .gate-pw input.gate-in { padding-right: 5rem; }
.gate-ov .gate-card .gate-eye { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: auto; background: transparent; color: #1f4d43; font-size: .85rem; font-weight: 700; padding: .5rem .7rem; border-radius: .6rem; }
.gate-ov .gate-card .lock-err { min-height: 1.4rem; margin: .7rem 0 .4rem; }
.gate-ov .gate-card #g-go, .gate-ov .gate-card #g-ok, .gate-ov .gate-card #g-wa, .gate-ov .gate-card #g-again:not(.gate-link) { background: #1f4d43; padding: .95rem; border-radius: .95rem; font-size: 1rem; }
.gate-ov .gate-card .gate-link { background: transparent; color: #1f4d43; font-weight: 600; padding: .65rem; margin-top: .15rem; }
.lock-box .gate-note { font-size: .88rem; color: #6f847d; line-height: 1.5; margin: .5rem 0 1rem; }
.lock-box button:disabled { opacity: .6; }
.gate-ov button:focus-visible, .gate-ov input:focus-visible { outline: 2px solid #1f4d43; outline-offset: 2px; }
@media (min-width: 520px) { .gate-ov { padding: 2rem 1rem; } .gate-page { min-height: 0; border-radius: 1.75rem; overflow: hidden; box-shadow: 0 8px 32px rgba(20,35,31,.14); } }
@media (max-height: 560px) { .gate-hero { padding-bottom: 5.5rem; } }