.hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
        body { font-family: system-ui, -apple-system, sans-serif; background-color: #f9fafb; -webkit-tap-highlight-color: transparent; }
        .pb-safe { padding-bottom: env(safe-area-inset-bottom, 20px); }
        /* Stage 6: hilangkan permintaan Google Font dari aplikasi utama. */
        .signature-font { font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; }


/* YouTube KOIN NU - pola kartu/slider seperti SIMDA: swipe halus, tanpa panah, kartu berikut mengintip */
.youtube-strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;scrollbar-width:none}
.youtube-strip::-webkit-scrollbar{display:none}
.youtube-card{flex:0 0 min(82vw,320px);scroll-snap-align:start;text-decoration:none;color:inherit}
@media(min-width:768px){.youtube-card{flex-basis:300px}}
@media(min-width:1200px){.youtube-card{flex-basis:310px}}

.tv-panel{background:linear-gradient(135deg,#eaf7ff 0%,#bfe7ff 28%,#6ab6ff 66%,#1d4ed8 100%);border-radius:28px;box-shadow:0 18px 45px rgba(29,78,216,.16)}
.tv-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 22px 8px 22px}
.tv-icon{width:46px;height:46px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.tv-chip{font-size:12px;font-weight:800;background:rgba(255,255,255,.24);color:#eff6ff;padding:10px 14px;border-radius:999px;white-space:nowrap;border:1px solid rgba(255,255,255,.28)}
.youtube-strip.tv-strip{gap:18px}
.youtube-card.wide-card{flex:0 0 min(92vw,620px);display:flex;gap:0;background:#fff;border:1px solid rgba(229,231,235,.9);border-radius:24px;overflow:hidden;box-shadow:0 12px 32px rgba(15,23,42,.08);min-height:210px}
.youtube-card.wide-card.wide-card-news{border-color:#dcf0e3}
.wide-thumb{position:relative;flex:0 0 43%;min-height:210px;overflow:hidden;background:#eef2ef}
.wide-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wide-body{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 16px 18px}
.wide-meta{font-size:11px;font-weight:800;letter-spacing:.03em;color:#6b7280;text-transform:uppercase}
.wide-badge{position:absolute;left:14px;top:14px;font-size:10px;font-weight:800;color:#fff;background:rgba(29,78,216,.95);padding:7px 10px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase}
.wide-badge.badge-green{background:rgba(21,128,61,.95)}
@media(min-width:768px){.youtube-card.wide-card{flex-basis:640px}}
@media(max-width:767px){
.tv-head{padding:15px 14px 7px;flex-direction:row;align-items:center;gap:10px}
.tv-head h2,.tv-head h3{font-size:16px!important;line-height:1.2}
.tv-head p{font-size:9px!important}
.tv-icon{width:36px;height:36px;border-radius:12px;flex:0 0 36px}
.tv-chip{display:none}
.youtube-strip.tv-strip{gap:10px;padding-left:12px!important;padding-right:12px!important}
.youtube-card.wide-card{flex:0 0 82vw;max-width:315px;min-height:132px;height:132px;flex-direction:row;border-radius:16px}
.wide-thumb{flex:0 0 39%;min-height:132px;height:132px}
.wide-body{padding:10px 10px 9px;min-width:0}
.wide-body h3,.wide-body h4{font-size:12px!important;line-height:1.3;margin:0}
.wide-body p{font-size:10px!important;line-height:1.35}
.wide-body .mt-4{margin-top:6px!important}
.wide-body .text-xs{font-size:8px!important;padding:3px 6px!important}
.wide-meta{font-size:8px}
.wide-badge{left:7px;top:7px;font-size:7px;padding:4px 6px}
.wide-thumb .w-14{width:36px!important;height:36px!important}
}

.youtube-card[type="button"]{font:inherit;border:1px solid rgba(229,231,235,.9);cursor:pointer;-webkit-appearance:none;appearance:none}
@media(max-width:767px){.youtube-strip{touch-action:pan-x pan-y}.youtube-card{position:relative;z-index:1}.youtube-card *{pointer-events:none}}

.koin-tv-shell{background:linear-gradient(145deg,#f8fdff 0%,#e7f6ff 24%,#c8e9ff 58%,#6ab8ff 100%);border:1px solid #c9e6fb;border-radius:28px;padding:14px;box-shadow:0 18px 45px rgba(37,99,235,.14)}
.koin-tv-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 6px 12px}
.koin-tv-live{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:10px;font-weight:900;letter-spacing:.08em;color:#1d4ed8;background:rgba(255,255,255,.75);border:1px solid rgba(147,197,253,.8);padding:8px 11px;border-radius:999px}
.koin-tv-live span{width:7px;height:7px;border-radius:50%;background:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.koin-tv-screen{background:#07111f;border:7px solid rgba(255,255,255,.9);border-radius:24px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(15,23,42,.25),0 12px 30px rgba(30,64,175,.16)}
.koin-tv-screen iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.koin-tv-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 7px 5px}
.koin-tv-youtube-link{flex:0 0 auto;text-decoration:none;font-size:11px;font-weight:900;color:#fff;background:#1d4ed8;padding:9px 12px;border-radius:12px;box-shadow:0 6px 14px rgba(29,78,216,.18)}
@media(max-width:767px){.koin-tv-shell{padding:9px;border-radius:20px}.koin-tv-topbar{align-items:flex-start;padding:5px 4px 9px}.koin-tv-live{font-size:9px;padding:6px 8px}.koin-tv-screen{border-width:4px;border-radius:16px}.koin-tv-footer{padding:10px 4px 3px;flex-direction:column}.koin-tv-youtube-link{align-self:flex-start}}

.koin-tv-screen{position:relative}
.koin-tv-autoplay-note{position:absolute;z-index:3;left:14px;bottom:14px;background:rgba(15,23,42,.72);color:#fff;font-size:10px;font-weight:700;padding:7px 10px;border-radius:999px;pointer-events:none;backdrop-filter:blur(4px)}
@media(max-width:767px){.koin-tv-autoplay-note{left:9px;bottom:9px;font-size:9px;padding:6px 8px;max-width:78%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}


/* TV MWCNU Pasrepan sebagai player terpisah di atas sistem */

/* === YouTube KOIN NU — kartu seperti SIMDA, hanya geser kanan/kiri === */
.youtube-gallery-panel{background:#fff;border:1px solid #e7eee9;border-radius:22px;overflow:hidden;box-shadow:0 8px 28px rgba(15,23,42,.055)}
.youtube-gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:18px 18px 8px}
.youtube-gallery-head p{margin:0 0 3px;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#15803d}
.youtube-gallery-head h2,.youtube-gallery-head h3{margin:0;font-size:20px;line-height:1.2;font-weight:900;color:#18382a}
.youtube-gallery-head span{display:block;margin-top:5px;font-size:11px;color:#6b7b72}
.youtube-gallery-head button,.youtube-gallery-head>b{border:0;background:#ecfdf5;color:#0f6b4f;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:900;white-space:nowrap}
.youtube-empty{padding:28px;text-align:center;color:#8a9890;font-size:13px}
.youtube-strip.simda-card-strip{display:flex!important;gap:12px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;scroll-behavior:smooth!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important;touch-action:pan-x!important;scrollbar-width:none!important;padding:8px 18px 18px!important}
.youtube-strip.simda-card-strip::-webkit-scrollbar{display:none!important}
.youtube-card.simda-video-card{position:relative;flex:0 0 286px;width:286px;height:176px;min-width:286px;max-width:286px;border:0!important;border-radius:17px;overflow:hidden;background:#10231b;scroll-snap-align:start;padding:0;box-shadow:0 8px 24px rgba(15,23,42,.11);cursor:pointer;isolation:isolate}
.simda-video-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.simda-video-card:hover>img{transform:scale(1.025)}
.simda-video-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.03) 28%,rgba(2,6,23,.82) 100%)}
.simda-video-type{position:absolute;left:10px;top:10px;padding:5px 8px;border-radius:999px;background:rgba(220,38,38,.92);color:#fff;font-size:9px;font-weight:900;letter-spacing:.05em}
.simda-video-play{position:absolute;right:11px;top:11px;width:36px;height:27px;border-radius:9px;background:rgba(255,255,255,.92);color:#dc2626;display:flex;align-items:center;justify-content:center;box-shadow:0 7px 20px rgba(0,0,0,.18)}
.simda-video-copy{position:absolute;left:12px;right:12px;bottom:11px;color:#fff;text-align:left;display:block}
.simda-video-copy small{display:block;margin-bottom:5px;font-size:9px;font-weight:800;color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.simda-video-copy strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.26;font-weight:900;text-shadow:0 2px 9px rgba(0,0,0,.4)}
@media(max-width:640px){.youtube-gallery-head{padding:14px 13px 6px}.youtube-gallery-head h2,.youtube-gallery-head h3{font-size:16px}.youtube-gallery-head span{font-size:10px}.youtube-strip.simda-card-strip{gap:10px!important;padding:7px 13px 15px!important}.youtube-card.simda-video-card{flex-basis:min(78vw,286px);width:min(78vw,286px);min-width:min(78vw,286px);max-width:min(78vw,286px);height:158px}}

/* === Player mandiri: portal ke body, terpisah visual dari layout KOIN NU === */
.koin-player-portal{position:fixed;inset:0;width:100vw;height:100dvh;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:8px;background:radial-gradient(circle at 50% 0%,rgba(22,163,74,.16),rgba(2,6,23,.92) 55%,rgba(2,6,23,.98));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden}
.koin-player-window{position:relative;width:min(1180px,100%);height:min(94dvh,900px);max-height:calc(100dvh - 16px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border-radius:28px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(145deg,rgba(5,78,43,.91),rgba(15,23,42,.92));box-shadow:0 30px 100px rgba(0,0,0,.55)}
.koin-player-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-bottom:1px solid rgba(255,255,255,.12);color:#fff}
.koin-player-brand{display:flex;align-items:center;gap:9px;min-width:0;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:7px 11px;backdrop-filter:blur(15px)}
.koin-player-brand img{width:31px;height:31px;object-fit:contain}.koin-player-brand div{display:flex;flex-direction:column;min-width:0}.koin-player-brand span{font-size:9px;font-weight:900;letter-spacing:.16em;color:rgba(255,255,255,.72)}.koin-player-brand strong{font-size:11px;white-space:nowrap}
.koin-player-controls{display:flex;gap:8px;position:relative}.koin-player-controls>button,.koin-player-menu button,.koin-player-menu a{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.12);color:#fff;border-radius:14px;padding:9px 11px;font-size:11px;font-weight:900;text-decoration:none;cursor:pointer;backdrop-filter:blur(12px)}.koin-player-controls>button.close{width:40px;height:40px;padding:0;background:rgba(255,255,255,.94);color:#334155;font-size:20px}
.koin-player-menu{position:absolute;right:0;top:48px;width:200px;z-index:5;padding:8px;border-radius:18px;background:rgba(15,23,42,.9);border:1px solid rgba(255,255,255,.15);box-shadow:0 18px 44px rgba(0,0,0,.35);display:grid;gap:7px}.koin-player-menu button,.koin-player-menu a{display:block;width:100%;text-align:left}.koin-player-menu a{background:rgba(220,38,38,.93)}
.koin-player-stage{min-height:0;padding:10px 14px 6px;display:flex;align-items:center;justify-content:center}.koin-player-frame{position:relative;width:100%;height:100%;min-height:220px;background:#000;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 60px rgba(0,0,0,.34);display:flex;align-items:center;justify-content:center}.koin-player-frame iframe{width:100%;height:100%;border:0;display:block;background:#000}.koin-player-empty{color:#fff;text-align:center;padding:22px}.koin-player-badge{position:absolute;left:12px;top:12px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:9px;font-weight:900;letter-spacing:.1em;pointer-events:none;backdrop-filter:blur(12px)}
.koin-player-footer{padding:8px 16px 14px;color:#fff;text-align:center}.koin-player-footer h2{margin:0;font-size:clamp(17px,4.3vw,26px);line-height:1.16;font-weight:900}.koin-player-footer p{margin:7px auto 0;max-width:900px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.9);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.koin-player-footer div{margin-top:8px;font-size:10px;font-weight:800;color:rgba(255,255,255,.7)}
@media(max-width:640px){.koin-player-portal{padding:5px}.koin-player-window{height:calc(100dvh - 10px);border-radius:21px}.koin-player-header{padding:9px}.koin-player-brand{padding:6px 8px;border-radius:14px}.koin-player-brand img{width:27px;height:27px}.koin-player-controls>button{font-size:10px;padding:8px 9px}.koin-player-stage{padding:7px 7px 4px}.koin-player-frame{border-radius:16px;min-height:190px}.koin-player-footer{padding:7px 11px 10px}.koin-player-footer h2{font-size:17px}.koin-player-footer p{font-size:11px}}


/* Stage 6 — boot shell: halaman tidak tampak putih saat framework sedang dimuat */
.boot-shell{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#f7faf8;color:#174a32;font-family:system-ui,-apple-system,sans-serif}
.boot-shell .boot-mark{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#0f6b3d;color:#fff;font-weight:900;font-size:22px;box-shadow:0 10px 28px rgba(15,107,61,.18)}
.boot-shell strong{font-size:16px}.boot-shell span{font-size:12px;color:#718078}
.framework-warning{position:fixed;left:12px;right:12px;bottom:12px;z-index:2147483600;padding:12px 14px;border-radius:14px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font:600 12px/1.4 system-ui,-apple-system,sans-serif;box-shadow:0 14px 36px rgba(15,23,42,.16)}

/* Tahap 8C - menu mobile temperglass NU */
.mobile-menu-glass{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px;border-radius:26px;background:linear-gradient(145deg,rgba(5,92,39,.96),rgba(10,112,41,.88));box-shadow:0 18px 40px rgba(4,76,31,.18);position:relative;overflow:hidden}
.mobile-menu-glass:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 12%,rgba(255,215,80,.17),transparent 28%),linear-gradient(125deg,rgba(255,255,255,.08),transparent 42%);pointer-events:none}
.mobile-menu-card{min-height:112px;border:1px solid rgba(255,255,255,.34);border-radius:20px;background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.72));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:11px 7px;box-shadow:0 8px 20px rgba(1,48,20,.14);position:relative;z-index:1;transition:.18s ease}
.mobile-menu-card:active{transform:scale(.97)}
.mobile-menu-icon{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#9b6c00;background:linear-gradient(145deg,#fff7cf,#f4cf5a);box-shadow:inset 0 1px 0 #fff,0 6px 15px rgba(144,98,0,.18)}
.mobile-menu-label{font-size:11.5px;line-height:1.15;text-align:center;font-weight:800;color:#0b5e2b;max-width:92px}
.announcement-compact-list{display:flex;flex-direction:column;gap:8px}.announcement-compact-card{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:10px 11px;border:1px solid #dcf1e3;border-radius:14px;background:linear-gradient(135deg,#fbfffc,#f1fbf4)}.announcement-dot{width:34px;height:34px;flex:none;border-radius:12px;background:#fff3c7;color:#9a6900;display:flex;align-items:center;justify-content:center}.announcement-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}.announcement-copy small{font-size:9px;color:#5b8068}.announcement-copy strong{font-size:12px;line-height:1.3;color:#153b23;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.announcement-open{font-size:10px;font-weight:800;color:#0a7029}.announcement-modal-backdrop{position:fixed;inset:0;background:rgba(1,33,14,.68);z-index:100050;display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(5px)}.announcement-modal{width:min(560px,100%);max-height:82vh;overflow:auto;background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.7);border-radius:26px;padding:24px;box-shadow:0 28px 80px rgba(0,0,0,.3);position:relative}.announcement-close{position:absolute;right:15px;top:12px;font-size:26px;color:#496253}.announcement-modal-icon{width:48px;height:48px;border-radius:16px;background:#fff1b5;color:#956400;display:flex;align-items:center;justify-content:center;margin-bottom:12px}.announcement-modal small{display:block;color:#66806f;font-size:11px;margin-bottom:10px}.announcement-modal p{white-space:pre-wrap;line-height:1.7;color:#183827;font-size:14px}.announcement-modal a{margin-top:18px;display:inline-flex;align-items:center;gap:6px;background:#eef6ff;color:#1456a0;padding:9px 12px;border-radius:10px;font-size:12px;font-weight:700}.finance-mini-card,.finance-public-card{border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:4px}.finance-mini-card{background:#f5faf6;border:1px solid #e0efe4}.finance-mini-card small,.finance-public-card small{font-size:10px;color:#5d7565}.finance-mini-card strong,.finance-public-card strong{font-size:16px;color:#0f5f2d}.finance-public-card.income{background:#ecfaef;border:1px solid #ccebd4}.finance-public-card.expense{background:#fff5f0;border:1px solid #f1d9cd}.finance-public-card.expense strong{color:#a43b1a}.expense-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #edf1ee}.expense-row:last-child{border-bottom:0}.expense-row div{display:flex;flex-direction:column;gap:2px}.expense-row b{font-size:11px;color:#53705d}.expense-row span{font-size:12px;color:#303c34}.expense-row strong{font-size:13px;color:#a43b1a;white-space:nowrap}.media-hub-hero{border-radius:22px;padding:22px;color:#fff;background:linear-gradient(135deg,#075c28,#0a7029 62%,#7c6517);display:flex;align-items:center;justify-content:space-between;box-shadow:0 16px 35px rgba(4,80,31,.2)}.media-hub-hero span{font-size:10px;letter-spacing:.16em;color:#ffe690;font-weight:800}.media-hub-hero h2{font-size:24px;font-weight:900}.media-hub-hero p{font-size:12px;color:#d9f1e0;margin-top:3px}.media-action-card{background:rgba(255,255,255,.92);border:1px solid #e1ebe4;border-radius:18px;padding:15px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;box-shadow:0 7px 18px rgba(5,70,28,.06);color:#0b6b2d}.media-action-card svg{color:#b27b00}.media-action-card b{font-size:12px;color:#174426}.media-action-card small{font-size:10px;color:#75857a}
@media(min-width:768px){.mobile-menu-glass{display:none}.announcement-copy strong{white-space:normal}}

/* === Mobile NU Islamic Glass — 2026-09-17 === */
@media(max-width:767px){
  .mobile-nu-hero{position:relative;overflow:hidden;min-height:250px;padding:38px 20px 26px;color:#fff;border-radius:0 0 34px 34px;background:
    radial-gradient(circle at 88% 6%,rgba(247,205,70,.22),transparent 29%),
    radial-gradient(circle at 12% 100%,rgba(255,255,255,.10),transparent 32%),
    linear-gradient(145deg,#075426 0%,#087032 54%,#0a5b2b 100%);box-shadow:0 18px 44px rgba(3,82,35,.22)}
  .mobile-nu-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(30deg,rgba(255,255,255,.028) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.028) 87.5%),linear-gradient(150deg,rgba(255,255,255,.028) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.028) 87.5%);background-size:38px 66px;opacity:.7;pointer-events:none}
  .mobile-islamic-frame{position:absolute;inset:14px 12px 12px;border:1px solid rgba(255,239,177,.30);border-radius:28px;pointer-events:none}
  .mobile-islamic-frame:before,.mobile-islamic-frame:after{content:"";position:absolute;width:56px;height:56px;opacity:.72;background:conic-gradient(from 45deg,transparent 0 12.5%,rgba(246,204,78,.72) 12.5% 14.5%,transparent 14.5% 37.5%,rgba(246,204,78,.72) 37.5% 39.5%,transparent 39.5% 62.5%,rgba(246,204,78,.72) 62.5% 64.5%,transparent 64.5% 87.5%,rgba(246,204,78,.72) 87.5% 89.5%,transparent 89.5%);border-radius:50%}
  .mobile-islamic-frame:before{left:-18px;top:-18px}.mobile-islamic-frame:after{right:-18px;bottom:-18px}
  .mobile-hero-content{position:relative;z-index:2}
  .mobile-profile-row{display:grid;grid-template-columns:58px minmax(0,1fr) 42px;align-items:center;gap:12px}
  .mobile-profile-photo{width:58px;height:58px;border-radius:20px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.72));border:1px solid rgba(255,236,165,.65);box-shadow:0 9px 24px rgba(0,0,0,.18),inset 0 0 0 3px rgba(255,255,255,.18);color:#087032;font-size:17px;font-weight:900;letter-spacing:.04em}
  .mobile-profile-photo img{width:100%;height:100%;object-fit:cover}
  .mobile-greeting-copy{min-width:0}.mobile-salam{font-size:10px;line-height:1.25;font-weight:800;color:#ffe9a0;letter-spacing:.01em}.mobile-greeting-copy h2{margin-top:3px;font-size:18px;line-height:1.14;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-system-name{margin-top:4px;font-size:10px;line-height:1.3;color:rgba(235,255,242,.84)}
  .mobile-nu-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:15px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.mobile-nu-mark img{width:35px;height:35px;object-fit:contain;filter:drop-shadow(0 3px 7px rgba(0,0,0,.18))}
  .mobile-hero-stats{margin-top:21px;display:grid;grid-template-columns:1fr 1px 1fr;align-items:stretch;gap:14px;padding:13px 15px;border-radius:19px;background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.20);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)}
  .mobile-stat-glass{min-width:0;display:flex;flex-direction:column;justify-content:center}.mobile-stat-glass span{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#cfead7;font-weight:800}.mobile-stat-glass strong{margin-top:3px;font-size:16px;line-height:1.1;color:#fff;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-stat-divider{width:1px;background:linear-gradient(transparent,rgba(255,231,151,.55),transparent)}

  .mobile-menu-section{padding:18px 2px 2px}.mobile-section-title{display:flex;align-items:end;justify-content:space-between;padding:0 8px 11px}.mobile-section-title span:first-child{display:block;font-size:9px;letter-spacing:.16em;color:#aa7b13;font-weight:900}.mobile-section-title h3{margin-top:1px;font-size:18px;line-height:1.1;font-weight:900;color:#174829}.mobile-section-ornament{font-size:19px;color:#c49324!important;line-height:1}
  .mobile-menu-glass{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px;border-radius:26px;background:
    radial-gradient(circle at 88% 8%,rgba(245,202,67,.18),transparent 25%),
    linear-gradient(145deg,rgba(5,91,39,.97),rgba(9,111,45,.92));border:1px solid rgba(6,90,38,.10);box-shadow:0 16px 40px rgba(4,72,30,.18);overflow:hidden}
  .mobile-menu-glass:before{background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 30%,transparent 70%,rgba(243,204,84,.08)),repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 1px,transparent 1px 18px)}
  .mobile-menu-card{min-height:112px;border-radius:19px;padding:11px 6px 10px;gap:8px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(250,255,251,.76));border:1px solid rgba(255,255,255,.54);box-shadow:0 7px 18px rgba(2,54,23,.13),inset 0 1px 0 rgba(255,255,255,.95)}
  .mobile-menu-card:before{content:"";position:absolute;inset:6px;border:1px solid rgba(9,106,45,.10);border-radius:14px;pointer-events:none}.mobile-menu-card:after{content:"";position:absolute;width:30px;height:30px;right:-11px;top:-11px;transform:rotate(45deg);border:1px solid rgba(181,132,25,.22);background:rgba(248,211,98,.10)}
  .mobile-card-corner{position:absolute;left:8px;top:8px;width:13px;height:13px;border-left:1px solid rgba(183,136,31,.38);border-top:1px solid rgba(183,136,31,.38);border-radius:4px 0 0 0}
  .mobile-menu-icon{width:49px;height:49px;border-radius:17px;color:#956600;background:linear-gradient(145deg,#fff9dc,#efd060);border:1px solid rgba(189,140,24,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 7px 15px rgba(135,91,0,.15)}
  .mobile-menu-label{position:relative;z-index:2;max-width:94px;font-size:11.3px;line-height:1.17;color:#0b5f2d;font-weight:900;letter-spacing:-.01em}
  .mobile-menu-number{position:absolute;right:9px;bottom:7px;font-size:8px;line-height:1;color:rgba(8,91,40,.30);font-weight:900;letter-spacing:.08em}
  .mobile-menu-card:active{transform:translateY(1px) scale(.975);box-shadow:0 3px 10px rgba(2,54,23,.12)}
}

/* === KOIN NU Mobile Premium Islamic Dashboard v34 === */
@media(max-width:767px){
  body{background:#eaf5ef;color:#153b29}
  .mobile-dashboard-canvas{background:linear-gradient(180deg,#dff3e8 0,#eff8f3 46%,#e7f4ed 100%);min-height:100vh;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}

  .mobile-nu-hero{min-height:285px;padding:22px 18px 46px;border-radius:0 0 32px 32px;background:
    radial-gradient(circle at 78% 10%,rgba(41,220,143,.22),transparent 31%),
    radial-gradient(circle at 18% 92%,rgba(245,196,56,.16),transparent 30%),
    linear-gradient(142deg,#05653c 0%,#008a58 43%,#056436 100%);box-shadow:0 18px 44px rgba(2,77,45,.24)}
  .mobile-nu-hero:before{background:
    radial-gradient(circle at 84% 72%,rgba(0,35,19,.15) 0 11%,transparent 11.5%),
    repeating-radial-gradient(circle at 88% 76%,transparent 0 17px,rgba(255,255,255,.025) 18px 19px,transparent 20px 32px);opacity:1}
  .mobile-nu-hero:after{content:"";position:absolute;right:-18px;bottom:-9px;width:220px;height:125px;opacity:.14;background:
    radial-gradient(ellipse at 50% 100%,transparent 0 44%,#001f12 45% 49%,transparent 50%),
    linear-gradient(90deg,transparent 0 12%,#001f12 12% 15%,transparent 15% 32%,#001f12 32% 36%,transparent 36% 58%,#001f12 58% 62%,transparent 62% 80%,#001f12 80% 83%,transparent 83%);filter:blur(.1px);pointer-events:none}
  .mobile-islamic-frame{inset:12px;border:1px solid rgba(250,210,82,.52);border-radius:25px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.025)}
  .mobile-islamic-frame:before,.mobile-islamic-frame:after{width:72px;height:72px;opacity:.8;background:
    linear-gradient(45deg,transparent 44%,rgba(247,206,72,.75) 45% 47%,transparent 48%) center/15px 15px,
    radial-gradient(circle,transparent 55%,rgba(247,206,72,.5) 56% 58%,transparent 59%)}
  .mobile-islamic-frame:before{left:-25px;top:-25px}.mobile-islamic-frame:after{right:-25px;bottom:-25px}
  .mobile-hero-content{position:relative;z-index:3}
  .mobile-brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 3px 15px;border-bottom:1px solid rgba(255,232,144,.25)}
  .mobile-brand-lockup{display:flex;align-items:center;gap:10px;min-width:0}.mobile-brand-logo{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;border:1px solid rgba(249,215,92,.8);box-shadow:0 5px 15px rgba(0,0,0,.14)}.mobile-brand-logo img{width:35px;height:35px;object-fit:contain}
  .mobile-brand-lockup strong{display:block;color:#fff;font-size:24px;line-height:1;font-weight:950;letter-spacing:.02em;text-shadow:0 2px 7px rgba(0,0,0,.16)}.mobile-brand-lockup strong em{font-style:normal;color:#f0c84b}.mobile-brand-lockup span{display:block;margin-top:5px;color:rgba(255,244,204,.78);font-size:7px;letter-spacing:.17em;font-weight:800;white-space:nowrap}
  .mobile-top-actions{display:flex;gap:7px}.mobile-top-actions button{position:relative;width:36px;height:36px;border-radius:13px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.10);color:#fff;display:grid;place-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.mobile-top-actions button i{position:absolute;right:6px;top:5px;width:6px;height:6px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px #087548}
  .mobile-welcome-glass{margin-top:16px;display:grid;grid-template-columns:66px 1fr;align-items:center;gap:13px;padding:12px 15px 12px 11px;border-radius:28px 46px 28px 28px;background:linear-gradient(105deg,rgba(255,255,255,.16),rgba(255,255,255,.08));border:1px solid rgba(255,230,126,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.19),0 12px 26px rgba(0,54,30,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .mobile-profile-photo{width:64px;height:64px;border-radius:50%;border:3px solid rgba(246,202,61,.88);box-shadow:0 0 0 3px rgba(255,255,255,.16),0 9px 22px rgba(0,0,0,.18);background:#fff;color:#087145;font-size:18px}
  .mobile-greeting-copy{min-width:0}.mobile-salam{font-family:Georgia,'Times New Roman',serif;font-size:16px;line-height:1.1;font-weight:700;color:#fff}.mobile-greeting-copy h2{margin-top:4px;font-size:18px;color:#f2cc54;line-height:1.1;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-system-name{margin-top:6px;color:rgba(234,255,244,.76);font-size:10px;letter-spacing:.01em}

  .mobile-summary-row{position:relative;z-index:5;margin-top:-30px;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 3px}
  .mobile-summary-card{min-width:0;display:grid;grid-template-columns:43px 1fr;align-items:center;gap:9px;text-align:left;padding:13px 11px;border-radius:21px;background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(247,255,250,.84));border:1px solid rgba(255,255,255,.95);box-shadow:0 10px 25px rgba(3,83,45,.14),inset 0 1px 0 #fff;position:relative;overflow:hidden}
  .mobile-summary-card:before{content:"";position:absolute;inset:5px;border:1px solid rgba(192,147,34,.16);border-radius:16px;pointer-events:none}.mobile-summary-card:after{content:"";position:absolute;right:-18px;bottom:-18px;width:62px;height:62px;border:1px solid rgba(5,124,72,.09);transform:rotate(45deg)}
  .mobile-summary-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#b9850a;background:linear-gradient(145deg,#fff5c8,#e9bd3c);box-shadow:0 6px 14px rgba(166,113,0,.16)}
  .mobile-summary-card>span:last-child{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px;min-width:0}.mobile-summary-card small{width:100%;font-size:8px;color:#5f7569;font-weight:750}.mobile-summary-card strong{max-width:100%;font-size:15px;line-height:1.05;color:#087044;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-summary-card em{font-style:normal;font-size:8px;color:#6d7f74}

  .mobile-menu-section{padding:10px 0 0}.mobile-section-title{padding:0 7px 10px}.mobile-section-title span:first-child{font-size:8px;color:#ad7b09;letter-spacing:.18em}.mobile-section-title h3{font-size:17px;color:#104d34}.mobile-section-ornament{color:#c59117!important}
  .mobile-menu-glass{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:0;background:transparent;border:0;box-shadow:none;overflow:visible}
  .mobile-menu-glass:before{display:none}
  .mobile-menu-card{min-height:148px;align-items:flex-start;justify-content:flex-start;gap:5px;padding:17px 11px 10px;border-radius:20px;text-align:left;background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(246,255,250,.83));border:1px solid rgba(255,255,255,.96);box-shadow:0 9px 22px rgba(4,75,42,.12),inset 0 1px 0 #fff}
  .mobile-menu-card:before{inset:5px;border-radius:15px;border:1px solid rgba(202,156,45,.18)}.mobile-menu-card:after{width:35px;height:35px;border-color:rgba(188,137,23,.25);background:rgba(242,201,74,.06)}
  .mobile-card-corner{left:8px;top:8px;width:18px;height:18px;border-color:rgba(189,139,24,.38)}
  .mobile-menu-number{left:10px;right:auto;top:9px;bottom:auto;color:rgba(23,70,46,.55);font-size:8px;z-index:3}
  .mobile-menu-icon{align-self:center;width:50px;height:50px;margin-top:7px;border-radius:16px;color:#b67c00;background:linear-gradient(145deg,#fff6cd,#e9bb38);box-shadow:0 7px 16px rgba(152,101,0,.16),inset 0 1px 0 #fff}
  .mobile-menu-label{align-self:stretch;max-width:none;text-align:left;font-size:11.5px;line-height:1.12;color:#123c2c;font-weight:950;min-height:25px}
  .mobile-menu-desc{display:block;align-self:stretch;font-size:8.6px;line-height:1.25;color:#718078;min-height:22px;position:relative;z-index:2}
  .mobile-menu-arrow{position:absolute;right:9px;bottom:9px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#fff3c2;color:#7f6100;font-size:19px;line-height:1;box-shadow:0 3px 8px rgba(147,99,0,.12)}

  .youtube-gallery-panel{margin-left:0!important;margin-right:0!important;margin-top:12px!important;border-radius:20px;border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 20px rgba(4,70,38,.09);background:rgba(255,255,255,.88)}
  .youtube-gallery-head{padding:13px 13px 5px;align-items:center}.youtube-gallery-head p{font-size:8px;color:#168052}.youtube-gallery-head h3{font-size:14px;color:#173f2e}.youtube-gallery-head button{background:transparent;padding:5px;color:#0b7447;font-size:9px}
  .youtube-strip.simda-card-strip{padding:7px 12px 13px!important}.youtube-card.simda-video-card{height:128px!important;min-width:72vw!important;width:72vw!important;max-width:285px!important;border-radius:15px}.simda-video-copy strong{font-size:11px}.simda-video-copy small{font-size:7.5px}

  .announcement-compact-list{display:flex;overflow-x:auto;gap:9px;scroll-snap-type:x mandatory;scrollbar-width:none}.announcement-compact-list::-webkit-scrollbar{display:none}.announcement-compact-card{min-width:82%;scroll-snap-align:start;border-radius:16px!important;background:linear-gradient(145deg,#fff,#f7fcf9)!important;border:1px solid #e0eee6!important;box-shadow:0 6px 16px rgba(4,76,40,.07);padding:11px!important}.announcement-copy small{font-size:7.5px!important}.announcement-copy strong{font-size:10px!important;line-height:1.25}.announcement-open{font-size:8px!important}

  .mobile-bottom-nav{left:10px!important;right:10px!important;bottom:8px!important;border:1px solid rgba(255,255,255,.92)!important;border-radius:25px!important;background:rgba(255,255,255,.91)!important;box-shadow:0 12px 30px rgba(4,70,38,.18)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:6px 5px calc(5px + env(safe-area-inset-bottom,0px))!important}
  .mobile-bottom-nav button:not(.mobile-fab-button){border-radius:15px;min-width:55px!important;padding:7px 5px!important}.mobile-bottom-nav button:not(.mobile-fab-button):active{background:#edf8f1}.mobile-bottom-nav .mobile-fab-button{background:linear-gradient(145deg,#0b8752,#05693d)!important;border-color:#e9f7ef!important;box-shadow:0 8px 20px rgba(4,103,58,.3)!important}
}

/* === KOIN NU Mobile UI v35 — closer to approved mockup === */
@media(max-width:767px){
  body{background:#eaf6ef!important}
  .flex-1.max-w-full{padding-left:0!important;padding-right:0!important;padding-top:0!important}
  .mobile-dashboard-canvas{margin:0!important;padding:0 18px 118px!important;background:
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.82),transparent 28%),
    linear-gradient(180deg,#e7f7ee 0,#f5fbf7 56%,#e8f6ee 100%)!important}

  .mobile-nu-hero{margin:0 -18px!important;min-height:0!important;padding:20px 26px 28px!important;border-radius:0 0 34px 34px!important;background:
    radial-gradient(circle at 82% 6%,rgba(46,221,153,.22),transparent 28%),
    linear-gradient(145deg,#07653e 0%,#008f5b 48%,#075832 100%)!important;box-shadow:0 14px 34px rgba(1,73,40,.20)!important}
  .mobile-islamic-frame{inset:14px 18px!important;border-color:rgba(245,204,74,.58)!important;border-radius:24px!important}
  .mobile-islamic-frame:before,.mobile-islamic-frame:after{width:58px!important;height:58px!important;opacity:.58!important}
  .mobile-islamic-frame:before{left:-19px!important;top:-19px!important}.mobile-islamic-frame:after{right:-19px!important;bottom:-19px!important}
  .mobile-mosque-silhouette{opacity:.12!important}
  .mobile-brand-row{padding:0 2px 14px!important}
  .mobile-brand-logo{width:48px!important;height:48px!important;border:2px solid rgba(255,219,95,.78)!important;box-shadow:0 5px 13px rgba(0,0,0,.14)!important}
  .mobile-brand-logo img{width:40px!important;height:40px!important}
  .mobile-brand-lockup{gap:11px!important}.mobile-brand-lockup strong{font-size:27px!important;letter-spacing:.01em!important}.mobile-brand-lockup span{font-size:7.6px!important;letter-spacing:.18em!important}
  .mobile-top-actions button{width:39px!important;height:39px!important;border-radius:14px!important;background:rgba(255,255,255,.09)!important}

  .mobile-welcome-glass{margin:19px 4px 0!important;grid-template-columns:78px 1fr!important;gap:16px!important;padding:15px 18px 15px 13px!important;border-radius:28px 44px 28px 28px!important;background:linear-gradient(100deg,rgba(255,255,255,.17),rgba(255,255,255,.07))!important;border:1px solid rgba(252,216,88,.48)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 9px 20px rgba(0,51,28,.13)!important}
  .mobile-profile-photo{width:76px!important;height:76px!important;border:4px solid #edc84d!important;box-shadow:0 0 0 5px rgba(255,255,255,.12),0 8px 19px rgba(0,0,0,.16)!important;font-size:22px!important}
  .mobile-salam{font-size:17px!important;line-height:1.1!important}.mobile-greeting-copy h2{font-size:18px!important;margin-top:3px!important}.mobile-system-name{font-size:10.5px!important;margin-top:7px!important}

  .mobile-summary-row{margin-top:18px!important;padding:0 12px!important;gap:12px!important}
  .mobile-summary-card{grid-template-columns:50px 1fr!important;gap:10px!important;padding:14px 13px!important;border-radius:22px!important;min-height:94px!important;box-shadow:0 9px 22px rgba(4,79,43,.12)!important}
  .mobile-summary-icon{width:48px!important;height:48px!important;border-radius:15px!important}
  .mobile-summary-card small{font-size:9px!important}.mobile-summary-card strong{font-size:17px!important}.mobile-summary-card em{font-size:8.5px!important}

  .mobile-menu-section{padding:20px 10px 0!important}
  .mobile-section-title{padding:0 4px 13px!important}.mobile-section-title span:first-child{font-size:8.5px!important}.mobile-section-title h3{font-size:20px!important;margin-top:2px!important}.mobile-section-ornament{font-size:22px!important}
  .mobile-menu-glass{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:11px!important;padding:0!important}
  .mobile-menu-card{min-height:162px!important;padding:18px 10px 12px!important;border-radius:21px!important;background:linear-gradient(150deg,rgba(255,255,255,.97),rgba(248,254,250,.91))!important;box-shadow:0 8px 18px rgba(4,73,41,.105),inset 0 1px 0 #fff!important}
  .mobile-menu-card:before{inset:6px!important;border-radius:16px!important;border-color:rgba(193,147,38,.18)!important}
  .mobile-menu-icon{width:54px!important;height:54px!important;margin-top:10px!important;border-radius:17px!important;background:linear-gradient(145deg,#fff6c9,#eaba39)!important}
  .mobile-menu-number{font-size:8.5px!important;left:11px!important;top:10px!important}
  .mobile-menu-label{font-size:12.2px!important;line-height:1.1!important;min-height:28px!important;margin-top:2px!important}
  .mobile-menu-desc{font-size:8.8px!important;line-height:1.27!important;min-height:25px!important}
  .mobile-menu-arrow{width:24px!important;height:24px!important;right:10px!important;bottom:10px!important}

  .youtube-gallery-panel,.announcement-home-panel,.bg-white.rounded-3xl{margin-left:10px!important;margin-right:10px!important}
  .youtube-gallery-panel{margin-top:18px!important;border-radius:23px!important}
  .youtube-card.simda-video-card{min-width:70vw!important;width:70vw!important;max-width:300px!important;height:142px!important;border-radius:16px!important}
  .announcement-compact-card{min-width:86%!important}

  .mobile-bottom-nav{left:18px!important;right:18px!important;bottom:10px!important;height:78px!important;border-radius:29px!important;padding:7px 9px calc(7px + env(safe-area-inset-bottom,0px))!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:2px!important;background:rgba(255,255,255,.95)!important;box-shadow:0 12px 30px rgba(4,70,38,.17)!important}
  .mobile-nav-item{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;color:#81908a!important;font-size:10px!important;font-weight:700!important;border-radius:16px!important;padding:5px 2px!important;min-width:0!important}
  .mobile-nav-item.is-active{color:#087746!important}.mobile-nav-item.is-active svg{stroke-width:2.5}
  .mobile-nav-center{position:relative!important;top:-18px!important;gap:3px!important;color:#087746!important;font-size:9px!important;font-weight:800!important}
  .mobile-bottom-nav .mobile-fab-button{width:58px!important;height:58px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:linear-gradient(145deg,#0b8b56,#05683d)!important;color:#f6d66a!important;border:4px solid rgba(255,255,255,.96)!important;box-shadow:0 9px 20px rgba(4,103,58,.27)!important}
  .mobile-nav-center span{margin-top:-1px!important}
}

@media(min-width:600px) and (max-width:767px){
  .mobile-dashboard-canvas{padding-left:44px!important;padding-right:44px!important}
  .mobile-nu-hero{margin-left:-44px!important;margin-right:-44px!important;padding-left:58px!important;padding-right:58px!important}
  .mobile-summary-row{padding-left:28px!important;padding-right:28px!important}
  .mobile-menu-section{padding-left:24px!important;padding-right:24px!important}
  .mobile-menu-card{min-height:176px!important}
  .youtube-gallery-panel,.announcement-home-panel,.bg-white.rounded-3xl{margin-left:24px!important;margin-right:24px!important}
  .mobile-bottom-nav{left:44px!important;right:44px!important}
}

/* === KOIN NU MOBILE UI v38 compact refinement === */
@media (max-width:767px){
  html[data-koin-font-family="modern"] body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important}
  html[data-koin-font-family="klasik"] body{font-family:Georgia,"Times New Roman",serif!important}
  html[data-koin-font-family="klasik"] .mobile-menu-desc,
  html[data-koin-font-family="klasik"] .mobile-system-name,
  html[data-koin-font-family="klasik"] .mobile-brand-copy span{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important}

  .mobile-dashboard-canvas{padding-left:14px!important;padding-right:14px!important;padding-bottom:104px!important}
  .mobile-nu-hero{margin-left:-14px!important;margin-right:-14px!important;padding:12px 18px 17px!important;border-radius:0 0 25px 25px!important;min-height:0!important;overflow:hidden!important}
  .mobile-islamic-frame{inset:8px 10px!important;border-radius:18px!important;border-color:rgba(246,207,77,.50)!important}
  .mobile-islamic-frame:before,.mobile-islamic-frame:after{width:42px!important;height:42px!important;opacity:.42!important}
  .mobile-mosque-silhouette{opacity:.08!important;transform:scale(.86);transform-origin:right bottom}
  .mobile-hero-content{position:relative;z-index:3}

  .mobile-brand-row{padding:0 0 8px!important;gap:8px!important;align-items:center!important;border-bottom:1px solid rgba(255,255,255,.10)}
  .mobile-brand-lockup{gap:8px!important;min-width:0!important;align-items:center!important}
  .mobile-brand-logo{width:47px!important;height:43px!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important;overflow:visible!important;flex:0 0 auto!important}
  .mobile-brand-logo img{width:47px!important;height:43px!important;object-fit:contain!important;filter:drop-shadow(0 3px 7px rgba(0,0,0,.16))!important}
  .mobile-brand-copy{min-width:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
  .mobile-brand-lockup strong{font-size:20px!important;line-height:1!important;letter-spacing:.015em!important;white-space:nowrap!important;color:#fff!important;font-weight:950!important}
  .mobile-brand-lockup strong em{font-style:normal!important;color:#f3cf55!important}
  .mobile-brand-lockup span{display:block!important;margin-top:4px!important;font-size:6.3px!important;line-height:1.2!important;letter-spacing:.12em!important;color:rgba(255,255,255,.78)!important;white-space:nowrap!important}
  .mobile-top-actions{gap:6px!important;flex:0 0 auto!important}
  .mobile-top-actions button{width:34px!important;height:34px!important;border-radius:12px!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.14)!important;backdrop-filter:blur(8px)}

  .mobile-welcome-glass{margin:10px 0 0!important;grid-template-columns:62px minmax(0,1fr)!important;gap:11px!important;min-height:75px!important;padding:9px 13px 9px 8px!important;border-radius:20px 30px 20px 20px!important;background:linear-gradient(105deg,rgba(255,255,255,.15),rgba(255,255,255,.055))!important;border:1px solid rgba(246,207,78,.38)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 18px rgba(0,45,24,.12)!important;overflow:visible!important}
  .mobile-profile-photo{width:62px!important;height:62px!important;border-radius:50%!important;border:0!important;position:relative!important;z-index:4!important;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(145deg,#f7de75,#c88c13 48%,#0b9a60) border-box!important;border:4px solid transparent!important;box-shadow:0 0 0 4px rgba(255,255,255,.13),0 10px 22px rgba(0,28,15,.30),0 0 24px rgba(246,205,74,.15)!important;transform:translateY(1px)!important;overflow:hidden!important}
  .mobile-profile-photo:after{content:"";position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(255,223,104,.22),transparent 68%);z-index:-1;pointer-events:none}
  .mobile-profile-photo img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important}
  .mobile-profile-photo span{font-size:18px!important;font-weight:950!important;color:#087747!important}
  .mobile-greeting-copy{min-width:0!important;align-self:center!important;overflow:hidden!important}
  .mobile-salam{font-size:10.2px!important;line-height:1.1!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#fff!important;margin:0!important}
  .mobile-greeting-copy h2{font-size:15px!important;line-height:1.08!important;margin:4px 0 0!important;color:#f2ce55!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-weight:950!important}
  .mobile-system-name{font-size:8.7px!important;line-height:1.15!important;margin-top:4px!important;color:rgba(255,255,255,.76)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

  .mobile-summary-row{margin-top:10px!important;padding:0 2px!important;gap:8px!important}
  .mobile-summary-card{grid-template-columns:40px minmax(0,1fr)!important;gap:8px!important;min-height:72px!important;padding:10px!important;border-radius:18px!important}
  .mobile-summary-icon{width:40px!important;height:40px!important;border-radius:13px!important}
  .mobile-summary-card small{font-size:8px!important}.mobile-summary-card strong{font-size:15px!important}.mobile-summary-card em{font-size:7.7px!important}

  .mobile-menu-section{padding:12px 2px 0!important}
  .mobile-section-title{padding:0 2px 8px!important}.mobile-section-title span:first-child{font-size:7.7px!important}.mobile-section-title h3{font-size:17px!important}.mobile-section-ornament{font-size:17px!important}
  .mobile-menu-glass{gap:8px!important}
  .mobile-menu-card{min-height:133px!important;padding:13px 8px 9px!important;border-radius:18px!important;align-items:center!important;text-align:center!important;justify-content:flex-start!important;overflow:hidden!important}
  .mobile-menu-card:before{inset:4px!important;border-radius:14px!important}
  .mobile-card-corner{width:15px!important;height:15px!important;left:7px!important;top:7px!important}
  .mobile-menu-number{left:9px!important;top:8px!important;font-size:7.7px!important}
  .mobile-menu-icon{width:45px!important;height:45px!important;border-radius:14px!important;margin:5px auto 0!important;align-self:center!important}
  .mobile-menu-icon svg{width:25px!important;height:25px!important}
  .mobile-menu-label{width:100%!important;max-width:100%!important;min-height:0!important;margin-top:3px!important;text-align:center!important;font-size:10.5px!important;line-height:1.15!important;display:block!important;overflow-wrap:anywhere!important;word-break:normal!important;color:#103e2d!important}
  .mobile-menu-desc{width:100%!important;max-width:100%!important;min-height:0!important;text-align:center!important;font-size:7.5px!important;line-height:1.2!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;color:#718078!important}
  .mobile-menu-arrow{width:19px!important;height:19px!important;right:8px!important;bottom:7px!important;font-size:16px!important}

  html[data-koin-font-size="kecil"] .mobile-brand-lockup strong{font-size:17px!important}
  html[data-koin-font-size="kecil"] .mobile-salam{font-size:9px!important}
  html[data-koin-font-size="kecil"] .mobile-greeting-copy h2{font-size:13px!important}
  html[data-koin-font-size="kecil"] .mobile-system-name{font-size:7.8px!important}
  html[data-koin-font-size="kecil"] .mobile-menu-label{font-size:9.3px!important}
  html[data-koin-font-size="kecil"] .mobile-menu-desc{font-size:6.8px!important}
  html[data-koin-font-size="kecil"] .mobile-menu-card{min-height:123px!important}
  html[data-koin-font-size="kecil"] .mobile-section-title h3{font-size:15px!important}

  .ui-settings-backdrop{position:fixed;inset:0;z-index:2147483000;background:rgba(0,28,16,.42);display:flex;align-items:flex-end;justify-content:center;padding:14px;backdrop-filter:blur(5px)}
  .ui-settings-sheet{width:min(100%,430px);border-radius:24px;background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 45px rgba(0,44,25,.24);padding:17px;position:relative;overflow:hidden}
  .ui-settings-sheet:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0,rgba(223,181,54,.13),transparent 32%),radial-gradient(circle at 0 100%,rgba(8,126,73,.09),transparent 38%);pointer-events:none}
  .ui-settings-head,.ui-settings-group,.ui-settings-note{position:relative;z-index:1}
  .ui-settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.ui-settings-head small{font-size:8px;letter-spacing:.16em;color:#9c720a;font-weight:900}.ui-settings-head h3{font-size:19px;color:#0d5638;font-weight:950}.ui-settings-head button{width:34px;height:34px;border-radius:12px;background:#edf7f1;color:#0a6b44;font-size:22px;line-height:1}
  .ui-settings-group{margin-top:12px}.ui-settings-group>span{display:block;font-size:11px;font-weight:850;color:#3d5b4c;margin-bottom:7px}.ui-settings-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ui-settings-options button{border:1px solid #dce9e1;background:#fff;border-radius:15px;padding:10px;display:flex;align-items:center;justify-content:center;gap:8px;color:#53675d}.ui-settings-options button.active{border-color:#d9b23a;background:linear-gradient(145deg,#fffdf5,#f4fbf6);color:#087348;box-shadow:0 5px 14px rgba(6,105,60,.08)}.ui-settings-options b{font-size:19px}.ui-settings-options small{font-size:10px;font-weight:800}.font-classic-preview{font-family:Georgia,"Times New Roman",serif}.font-modern-preview{font-family:Inter,ui-sans-serif,system-ui,sans-serif}.ui-settings-note{font-size:9px;color:#7a8b82;margin-top:13px;text-align:center}
}

/* === KOIN NU MOBILE UI v39 — CONSISTENT ISLAMIC FRAME SYSTEM ===
   Final override: menyatukan semua bingkai mobile agar rapi, tipis, dan tidak tampak pecah. */
@media (max-width:767px){
  :root{
    --koin-gold:#d6aa32;
    --koin-gold-soft:rgba(214,170,50,.34);
    --koin-green:#087446;
    --koin-green-dark:#0b5136;
    --koin-card:rgba(255,255,255,.94);
  }

  /* HERO: satu bingkai utuh, ornamen sudut sederhana seperti mockup */
  .mobile-nu-hero{isolation:isolate!important}
  .mobile-islamic-frame{
    inset:8px 10px!important;
    border:1px solid rgba(232,191,69,.62)!important;
    border-radius:19px!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.045)!important;
    background:
      linear-gradient(var(--koin-gold),var(--koin-gold)) left 12px top 12px/24px 1px no-repeat,
      linear-gradient(var(--koin-gold),var(--koin-gold)) left 12px top 12px/1px 24px no-repeat,
      linear-gradient(var(--koin-gold),var(--koin-gold)) right 12px top 12px/24px 1px no-repeat,
      linear-gradient(var(--koin-gold),var(--koin-gold)) right 12px top 12px/1px 24px no-repeat,
      linear-gradient(var(--koin-gold),var(--koin-gold)) left 12px bottom 12px/24px 1px no-repeat,
      linear-gradient(var(--koin-gold),var(--koin-gold)) left 12px bottom 12px/1px 24px no-repeat,
      linear-gradient(var(--koin-gold),var(--koin-gold)) right 12px bottom 12px/24px 1px no-repeat,
      linear-gradient(var(--koin-gold),var(--koin-gold)) right 12px bottom 12px/1px 24px no-repeat!important;
    opacity:.92!important;
  }
  .mobile-islamic-frame:before,
  .mobile-islamic-frame:after{display:none!important;content:none!important}

  /* WELCOME/PROFILE: bingkai kaca yang sama, tanpa bentuk miring/pecah */
  .mobile-welcome-glass{
    border-radius:20px!important;
    border:1px solid rgba(229,191,71,.48)!important;
    background:
      linear-gradient(135deg,rgba(255,255,255,.17),rgba(255,255,255,.07))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 8px 20px rgba(0,45,25,.14)!important;
    position:relative!important;
  }
  .mobile-welcome-glass:before{
    content:""!important;position:absolute!important;inset:5px!important;border-radius:15px!important;
    border:1px solid rgba(255,229,140,.15)!important;pointer-events:none!important;
  }
  .mobile-welcome-glass:after{display:none!important;content:none!important}

  /* FOTO PROFIL: terpisah/mengambang, cincin gradasi rapi */
  .mobile-profile-photo{
    border-radius:50%!important;
    background:linear-gradient(#fff,#fff) padding-box,
      linear-gradient(145deg,#f9e27e 0%,#c7921a 42%,#0a9d61 100%) border-box!important;
    border:4px solid transparent!important;
    box-shadow:0 0 0 3px rgba(255,255,255,.16),0 10px 24px rgba(0,31,17,.30)!important;
  }
  .mobile-profile-photo:before,.mobile-profile-photo:after{display:none!important;content:none!important}

  /* SUMMARY CARDS: bingkai ganda tipis seragam */
  .mobile-summary-card{
    border:1px solid rgba(212,171,58,.22)!important;
    background:linear-gradient(150deg,rgba(255,255,255,.97),rgba(248,253,250,.91))!important;
    box-shadow:0 8px 20px rgba(3,82,45,.10),inset 0 1px 0 #fff!important;
    border-radius:18px!important;
  }
  .mobile-summary-card:before{
    content:""!important;position:absolute!important;inset:5px!important;border-radius:13px!important;
    border:1px solid rgba(10,117,70,.08)!important;
    background:
      linear-gradient(var(--koin-gold-soft),var(--koin-gold-soft)) left 7px top 7px/14px 1px no-repeat,
      linear-gradient(var(--koin-gold-soft),var(--koin-gold-soft)) left 7px top 7px/1px 14px no-repeat,
      linear-gradient(var(--koin-gold-soft),var(--koin-gold-soft)) right 7px bottom 7px/14px 1px no-repeat,
      linear-gradient(var(--koin-gold-soft),var(--koin-gold-soft)) right 7px bottom 7px/1px 14px no-repeat!important;
    pointer-events:none!important;
  }
  .mobile-summary-card:after{display:none!important;content:none!important}

  /* MENU GRID: tidak memakai panel hijau/bingkai tambahan agar bersih seperti mockup */
  .mobile-menu-glass{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
  .mobile-menu-glass:before,.mobile-menu-glass:after{display:none!important;content:none!important}

  /* MENU CARD: satu sistem bingkai konsisten */
  .mobile-menu-card{
    position:relative!important;
    border:1px solid rgba(211,171,59,.24)!important;
    background:linear-gradient(150deg,rgba(255,255,255,.97),rgba(248,253,250,.90))!important;
    box-shadow:0 8px 18px rgba(3,77,42,.10),inset 0 1px 0 rgba(255,255,255,.95)!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }
  /* Bingkai sudut emas kecil di dalam kartu dihapus agar tampilan lebih bersih. */
  .mobile-menu-card:before{display:none!important;content:none!important;background:none!important;border:0!important}
  .mobile-menu-card:after{display:none!important;content:none!important}
  .mobile-card-corner{display:none!important}
  .mobile-menu-number,.mobile-menu-icon,.mobile-menu-label,.mobile-menu-desc,.mobile-menu-arrow{position:relative;z-index:2}
  .mobile-menu-number{position:absolute!important;left:10px!important;top:9px!important}
  .mobile-menu-arrow{position:absolute!important;right:8px!important;bottom:7px!important}

  /* Panel pengumuman/video: sudut dan garis mengikuti keluarga kartu */
  .youtube-gallery-panel,.announcement-home-panel{
    border-radius:18px!important;border:1px solid rgba(211,171,59,.18)!important;
    box-shadow:0 8px 20px rgba(3,77,42,.08)!important;background:rgba(255,255,255,.94)!important;
  }

  /* Bottom nav: bingkai lembut, tidak bersaing dengan kartu utama */
  .mobile-bottom-nav{
    border:1px solid rgba(211,171,59,.18)!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 10px 28px rgba(4,70,38,.14)!important;
  }
}
\n\n/* v40 — focused mobile fixes: Koin box FAB + clean NU logo/frame separation */
@media (max-width: 767px){
  .mobile-brand-row{
    position:relative!important;
    z-index:8!important;
  }
  .mobile-brand-lockup{
    position:relative!important;
    z-index:9!important;
  }
  .mobile-brand-logo{
    position:relative!important;
    z-index:10!important;
    width:52px!important;
    height:48px!important;
    flex:0 0 52px!important;
    display:grid!important;
    place-items:center!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    padding:1px!important;
    margin-left:4px!important;
    overflow:visible!important;
    box-shadow:none!important;
  }
  .mobile-brand-logo img{
    width:50px!important;
    height:46px!important;
    object-fit:contain!important;
    display:block!important;
    filter:drop-shadow(0 3px 7px rgba(0,0,0,.18))!important;
  }
  .mobile-islamic-frame{
    inset:8px 10px 8px 10px!important;
    z-index:1!important;
    pointer-events:none!important;
  }
  .mobile-islamic-frame:before,
  .mobile-islamic-frame:after{
    z-index:1!important;
  }
  .mobile-hero-content{
    position:relative!important;
    z-index:5!important;
  }
  .mobile-fab-button{
    width:60px!important;
    height:60px!important;
    padding:3px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:50%!important;
    background:linear-gradient(145deg,#0b8b56,#05683d)!important;
    border:4px solid rgba(255,255,255,.98)!important;
    box-shadow:0 10px 22px rgba(4,103,58,.30)!important;
    overflow:hidden!important;
  }
  .mobile-fab-image{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    border-radius:50%!important;
    display:block!important;
    background:#0b6f3a!important;
  }
}


/* === v42 CLEAN HERO — sesuai mockup final ===
   - hapus bingkai hero yang mengganggu logo
   - hapus siluet/batang lama
   - ganti dekorasi latar dengan Kotak Koin NU transparan
   Berlaku untuk semua role pada tampilan mobile. */
@media (max-width:767px){
  .mobile-islamic-frame,
  .mobile-mosque-silhouette{display:none!important;content:none!important;background:none!important;border:0!important;box-shadow:none!important}

  .mobile-nu-hero:after{display:none!important;content:none!important;background:none!important}

  .mobile-koin-watermark{
    position:absolute!important;
    right:48px!important;
    top:74px!important;
    width:126px!important;
    height:126px!important;
    z-index:1!important;
    opacity:.105!important;
    pointer-events:none!important;
    transform:rotate(-5deg)!important;
    filter:saturate(.85) drop-shadow(0 8px 18px rgba(0,45,24,.12))!important;
  }
  .mobile-koin-watermark img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    display:block!important;
  }

  .mobile-hero-content{position:relative!important;z-index:4!important}
  .mobile-brand-row{position:relative!important;z-index:6!important;border-bottom-color:rgba(255,255,255,.10)!important}
  .mobile-brand-logo{z-index:7!important;margin-left:0!important}

  /* logo NU benar-benar bebas dari garis/bingkai apa pun */
  .mobile-brand-logo,
  .mobile-brand-logo:before,
  .mobile-brand-logo:after{
    border:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .mobile-brand-logo img{position:relative!important;z-index:8!important}
}

/* v43 — Pengumuman terstruktur + badge notifikasi */
.notification-dot{position:absolute!important;right:7px!important;top:6px!important;width:8px!important;height:8px!important;border-radius:999px!important;background:#ef4444!important;border:2px solid rgba(255,255,255,.9)!important;box-shadow:0 0 0 2px rgba(239,68,68,.12)!important}
.mobile-bell-button{position:relative!important}
.mobile-nav-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.mobile-nav-notification-dot{position:absolute;right:-3px;top:-2px;width:8px;height:8px;border-radius:999px;background:#ef4444;border:2px solid #fff;box-sizing:content-box}

.announcement-page{max-width:980px;margin:0 auto}
.announcement-form-card,.announcement-list-card{background:#fff;border:1px solid #e4eee7;border-radius:22px;box-shadow:0 10px 30px rgba(8,79,40,.06);overflow:hidden}
.announcement-form-card{padding:20px}.announcement-form-head,.announcement-list-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.announcement-form-head>div span,.announcement-list-head>div span{display:block;font-size:9px;letter-spacing:.16em;font-weight:900;color:#b47b08}.announcement-form-head h3,.announcement-list-head h3{font-size:19px;line-height:1.2;font-weight:900;color:#0c5c31}.announcement-form-head>svg,.announcement-list-head>svg{color:#b47b08}
.announcement-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.announcement-field{display:flex;flex-direction:column;gap:6px}.announcement-field.full{grid-column:1/-1}.announcement-field>span{font-size:11px;font-weight:800;color:#284d38}.announcement-field input{width:100%;border:1px solid #dce9e0;border-radius:13px;padding:11px 12px;font-size:13px;outline:none;background:#fbfefc}.announcement-field input:focus{border-color:#1c8a50;box-shadow:0 0 0 3px rgba(28,138,80,.08)}.pdf-picked{font-size:10px;color:#0b7139;font-weight:700}
.announcement-scope-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.announcement-scope-options button{border:1px solid #dce9e0;border-radius:14px;background:#fbfefc;padding:11px;text-align:left;display:flex;flex-direction:column;gap:3px;transition:.2s}.announcement-scope-options button b{font-size:12px;color:#16462b}.announcement-scope-options button small{font-size:9px;line-height:1.35;color:#718078}.announcement-scope-options button.active{border-color:#d5ab3e;background:linear-gradient(145deg,#fffdf6,#f9fff9);box-shadow:0 0 0 2px rgba(213,171,62,.12)}.announcement-scope-options button.active b{color:#0d6b37}.announcement-submit{grid-column:1/-1;border:0;border-radius:14px;padding:12px 16px;background:linear-gradient(135deg,#08753f,#0d8b4c);color:#fff;font-size:12px;font-weight:900;box-shadow:0 8px 18px rgba(8,117,63,.18)}.announcement-submit:disabled{opacity:.6}
.announcement-list-card{padding:20px}.announcement-list{display:flex;flex-direction:column;gap:10px}.announcement-item{border:1px solid #e2ede5;border-radius:16px;background:linear-gradient(145deg,#fff,#fbfefc);overflow:hidden}.announcement-item-main{width:100%;border:0;background:transparent;text-align:left;padding:14px;display:block}.announcement-item-copy h4{font-size:14px;line-height:1.25;font-weight:900;color:#123f27;margin-bottom:8px}.announcement-item-copy p{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:10px;color:#5f7467;margin-top:4px}.announcement-item-copy p svg{color:#ae790b;flex:none}.announcement-scope{display:inline-flex;margin-top:8px;padding:3px 7px;border-radius:999px;font-size:8px;font-weight:900;letter-spacing:.05em}.announcement-scope.general{background:#e9f8ef;color:#0b7038}.announcement-scope.internal{background:#fff4d8;color:#8b6205}.announcement-item-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px 12px}.announcement-item-actions a{display:inline-flex;align-items:center;gap:5px;color:#b42318;background:#fff1f0;border-radius:9px;padding:7px 9px;font-size:9px;font-weight:800}.announcement-item-actions button{margin-left:auto;color:#b42318;background:#fff4f2;border-radius:9px;padding:7px}.announcement-empty{text-align:center;padding:28px;color:#839087}.announcement-empty svg{margin:0 auto 6px;color:#c3cec7}.announcement-empty p{font-size:11px}
.announcement-modal-meta{display:flex;flex-direction:column;gap:8px;margin:10px 0 2px}.announcement-modal-meta p{display:flex!important;align-items:center;gap:7px!important;font-size:12px!important;line-height:1.4!important;color:#526c5c!important}.announcement-modal-meta svg{color:#aa7609;flex:none}

@media(max-width:640px){.announcement-form-card,.announcement-list-card{border-radius:18px;padding:15px}.announcement-form-grid{grid-template-columns:1fr}.announcement-field.full{grid-column:auto}.announcement-scope-options{grid-template-columns:1fr}.announcement-submit{grid-column:auto}.announcement-form-head h3,.announcement-list-head h3{font-size:17px}.announcement-item-main{padding:12px}.announcement-item-copy h4{font-size:13px}}


/* v46 PWA + smooth refresh */
html,body{background:#f4fbf6}body{min-height:100vh}
.boot-shell{background:linear-gradient(180deg,#f4fbf6,#eef8f1);transition:opacity .18s ease}
.pwa-install-card{position:fixed;left:12px;right:12px;bottom:96px;z-index:2147483000;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 38px 11px 11px;border:1px solid rgba(255,255,255,.92);border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 18px 50px rgba(3,80,37,.22);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#123a23}
.pwa-install-card img{width:48px;height:48px;border-radius:14px;object-fit:cover}.pwa-install-card div{min-width:0;display:flex;flex-direction:column;gap:2px}.pwa-install-card strong{font-size:13px;color:#075c28}.pwa-install-card span{font-size:10px;line-height:1.35;color:#617267}.pwa-install-card>button:not(.pwa-install-close){border:0;border-radius:12px;padding:9px 12px;background:#087029;color:#fff;font-size:11px;font-weight:900}.pwa-install-close{position:absolute;right:9px;top:5px;border:0;background:transparent;color:#718077;font-size:20px;line-height:1}
@media(min-width:768px){.pwa-install-card{left:auto;right:18px;bottom:18px;width:390px}}

/* v47 smooth refresh: jangan tampilkan form login sesaat saat sesi masih diperiksa */
.koin-refresh-shell{
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;background:linear-gradient(180deg,#087029 0%,#075f26 100%);color:#fff;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.koin-refresh-logo{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:rgba(255,255,255,.10);border:1px solid rgba(255,220,101,.45);box-shadow:0 14px 36px rgba(0,0,0,.18);overflow:hidden}
.koin-refresh-logo img{width:100%;height:100%;object-fit:cover;display:block}
.koin-refresh-shell strong{font-size:18px;letter-spacing:.02em}.koin-refresh-shell span{font-size:11px;color:rgba(255,255,255,.76)}

/* v51 — Pengaturan mobile: tombol Keluar selalu terlihat di dalam gear */
@media (max-width:767px){
  .ui-settings-sheet{max-height:min(88dvh,720px);display:flex;flex-direction:column;padding-bottom:14px!important}
  .ui-settings-head{flex:0 0 auto}
  .ui-settings-scroll{position:relative;z-index:1;overflow-y:auto;overscroll-behavior:contain;padding-right:2px;min-height:0}
  .ui-settings-account{position:relative;z-index:2;flex:0 0 auto;margin-top:12px;padding-top:12px;border-top:1px solid #e8efe9;background:rgba(255,255,255,.96)}
  .ui-settings-logout{width:100%;min-height:46px;border-radius:14px;border:1px solid #fecaca;background:#fff1f2;color:#b91c1c;font-weight:900;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 12px rgba(185,28,28,.05)}
  .ui-settings-logout:active{transform:scale(.99);background:#ffe4e6}
}

/* v53 — Pengaturan: tombol Keluar Sistem dipastikan terlihat tepat di bawah judul */
@media (max-width: 767px){
  .ui-settings-sheet{max-height:min(92dvh,760px)!important;overflow:hidden!important;}
  .ui-settings-head{margin-bottom:10px!important;}
  .ui-settings-logout-primary{
    position:relative!important;z-index:3!important;width:100%!important;min-height:50px!important;
    margin:0 0 12px!important;border-radius:15px!important;border:1px solid #fecaca!important;
    background:linear-gradient(145deg,#fff7f7,#ffecee)!important;color:#b91c1c!important;
    font-weight:950!important;display:flex!important;align-items:center!important;justify-content:center!important;
    gap:9px!important;box-shadow:0 6px 15px rgba(185,28,28,.08)!important;
  }
  .ui-settings-scroll{max-height:calc(92dvh - 150px)!important;overflow-y:auto!important;}
}


/* v54 — modal Pengaturan dipindahkan ke document.body via React Portal.
   Tujuan: tidak terpengaruh transform/animasi dashboard yang sebelumnya membuat sheet
   berada di luar visual viewport pada sebagian Android/PWA. */
@media (max-width: 767px){
  .ui-settings-backdrop{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    z-index:2147483640!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    padding:12px 12px max(12px,env(safe-area-inset-bottom,0px))!important;
    background:rgba(0,38,22,.48)!important;
    backdrop-filter:blur(3px)!important;
    -webkit-backdrop-filter:blur(3px)!important;
    overflow:hidden!important;
  }
  .ui-settings-sheet{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    width:min(100%,430px)!important;
    max-height:calc(100dvh - 28px)!important;
    margin:0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border-radius:24px!important;
    padding:16px!important;
    background:#fff!important;
    border:1px solid rgba(255,255,255,.95)!important;
    box-shadow:0 22px 60px rgba(0,39,21,.30)!important;
    opacity:1!important;
    visibility:visible!important;
    z-index:2147483641!important;
  }
  .ui-settings-head{
    position:relative!important;
    z-index:2!important;
    flex:0 0 auto!important;
    margin-bottom:10px!important;
  }
  .ui-settings-logout-primary{
    position:relative!important;
    z-index:2!important;
    flex:0 0 auto!important;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    min-height:50px!important;
    margin:0 0 12px!important;
    border:1px solid #fecaca!important;
    border-radius:15px!important;
    background:linear-gradient(145deg,#fff7f7,#ffecee)!important;
    color:#b91c1c!important;
    font-weight:950!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
  }
  .ui-settings-scroll{
    position:relative!important;
    z-index:2!important;
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
}


/* v55 — Dashboard Anggota: kartu media horizontal ala SIMDA dan bottom nav 3 item */
@media (max-width: 767px){
  .dashboard-peek-strip{
    display:flex!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:10px!important;
    padding-left:14px!important;
    padding-right:14px!important;
    scroll-snap-type:x proximity!important;
    scroll-padding-inline:14px!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-inline:contain!important;
    scrollbar-width:none!important;
  }
  .dashboard-peek-strip::-webkit-scrollbar{display:none!important}
  .dashboard-peek-strip > *{
    flex:0 0 calc(86vw - 42px)!important;
    max-width:340px!important;
    scroll-snap-align:center!important;
  }
  .mobile-bottom-nav:has(.mobile-nav-item:nth-child(3):last-child){
    grid-template-columns:repeat(3,1fr)!important;
    padding-left:22px!important;
    padding-right:22px!important;
  }
}


/* v56 — Dashboard media carousel ala SIMDA
   Kartu Web & YouTube digeser horizontal dan selalu memperlihatkan
   sedikit kartu berikut/sebelumnya sebagai petunjuk masih ada konten lain. */
@media (max-width: 767px){
  .dashboard-peek-strip{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:12px!important;
    padding:8px 18px 16px!important;
    margin-left:0!important;
    margin-right:0!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:18px!important;
    scroll-behavior:smooth!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    touch-action:pan-x!important;
    scrollbar-width:none!important;
  }

  .dashboard-peek-strip::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }

  .dashboard-peek-strip > *{
    flex:0 0 clamp(250px, calc(100% - 64px), 340px)!important;
    width:auto!important;
    min-width:0!important;
    max-width:340px!important;
    scroll-snap-align:center!important;
    scroll-snap-stop:normal!important;
  }

  /* Video dashboard: ukurannya mengikuti lebar carousel, bukan aturan lama 72/78vw */
  .dashboard-peek-strip .youtube-card.simda-video-card{
    flex-basis:clamp(250px, calc(100% - 64px), 340px)!important;
    width:auto!important;
    min-width:0!important;
    max-width:340px!important;
  }

  /* Berita web dashboard juga sama agar sisi kartu tetangga terlihat */
  .dashboard-peek-strip .youtube-card.wide-card{
    flex-basis:clamp(250px, calc(100% - 64px), 340px)!important;
    width:auto!important;
    min-width:0!important;
    max-width:340px!important;
  }

  /* ruang kecil di ujung agar kartu terakhir tetap bisa berhenti rapi */
  .dashboard-peek-strip::after{
    content:""!important;
    flex:0 0 6px!important;
    width:6px!important;
  }
}


/* v57 — SATU carousel Web + YouTube ala SIMDA.
   Perbaikan gesture: aturan lama touch-action:pan-x + mandatory snap dapat menahan
   scroll vertikal pada Android. Sekarang kedua arah gesture diizinkan dan snap dibuat proximity. */
.dashboard-media-panel{
  overflow:hidden;
  border-radius:22px;
  background:#fff;
  border:1px solid #eef2ef;
  box-shadow:0 7px 22px rgba(4,70,38,.06);
}
.dashboard-media-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px 5px;
}
.dashboard-media-head p{
  margin:0 0 2px;
  font-size:8px;
  line-height:1.2;
  letter-spacing:.16em;
  font-weight:900;
  color:#a87300;
}
.dashboard-media-head h3{
  margin:0;
  font-size:16px;
  line-height:1.2;
  font-weight:900;
  color:#103f2a;
}
.dashboard-media-head>span{
  flex:none;
  font-size:9px;
  font-weight:800;
  color:#718078;
}

.dashboard-media-strip{
  display:flex!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  gap:10px!important;
  padding:8px 16px 15px!important;
  scroll-snap-type:x proximity!important;
  scroll-padding-inline:16px!important;
  scroll-behavior:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:auto!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-x pan-y!important;
  scrollbar-width:none!important;
}
.dashboard-media-strip::-webkit-scrollbar{display:none!important}
.dashboard-media-strip,
.dashboard-media-strip *{
  -webkit-user-drag:none;
}
.dashboard-media-strip .dashboard-media-card{
  position:relative!important;
  flex:0 0 min(76vw,286px)!important;
  width:min(76vw,286px)!important;
  min-width:min(76vw,286px)!important;
  max-width:min(76vw,286px)!important;
  height:116px!important; /* ±10% lebih rendah dari 128px */
  min-height:116px!important;
  max-height:116px!important;
  overflow:hidden!important;
  border-radius:15px!important;
  scroll-snap-align:center!important;
  scroll-snap-stop:normal!important;
  touch-action:pan-x pan-y!important;
  border:1px solid rgba(17,94,55,.10)!important;
  background:#0b3f29!important;
}
.dashboard-media-strip .dashboard-media-card>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
.dashboard-media-strip .dashboard-media-card .simda-video-copy{
  left:11px!important;
  right:10px!important;
  bottom:9px!important;
}
.dashboard-media-strip .dashboard-media-card .simda-video-copy strong{
  font-size:11px!important;
  line-height:1.2!important;
}
.dashboard-media-strip .dashboard-media-card .simda-video-copy small{
  font-size:7px!important;
  margin-bottom:3px!important;
}
.dashboard-media-strip .dashboard-media-card .simda-video-type{
  top:8px!important;
  left:8px!important;
  font-size:7px!important;
  padding:4px 6px!important;
}
.dashboard-media-strip .dashboard-media-card .web-type{
  background:rgba(5,112,55,.90)!important;
}
.dashboard-web-mark{
  position:absolute;
  right:9px;
  top:9px;
  z-index:4;
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(7px);
}
.dashboard-media-placeholder{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(145deg,#0c7848,#064829);
}

/* kartu berikut dan sebelumnya sengaja "mengintip" */
.dashboard-media-strip::after{
  content:"";
  flex:0 0 3px;
}

/* Hilangkan penguncian vertikal dari selector carousel lama jika masih cocok pada elemen lain. */
@media (max-width:767px){
  .youtube-strip.simda-card-strip,
  .dashboard-peek-strip{
    touch-action:pan-x pan-y!important;
    scroll-snap-type:x proximity!important;
    overscroll-behavior-x:auto!important;
  }
}


/* v59 — Judul header ranting fleksibel.
   MWC tetap MWCNU PASREPAN. Ranting menjadi RANTING + nama wilayah.
   Font otomatis mengecil bila nama ranting panjang agar tidak bertabrakan
   dengan tombol lonceng/pengaturan. */
@media (max-width: 767px){
  .mobile-brand-lockup{
    flex:1 1 auto!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .mobile-brand-copy{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:calc(100vw - 150px)!important;
    overflow:hidden!important;
  }
  .mobile-brand-title{
    display:block!important;
    max-width:100%!important;
    font-size:clamp(15px,4.9vw,20px)!important;
    line-height:1!important;
    letter-spacing:.01em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }
  .mobile-brand-title.is-long{
    font-size:clamp(13px,4.25vw,18px)!important;
    letter-spacing:0!important;
  }
  .mobile-brand-title.is-very-long{
    font-size:clamp(11.5px,3.7vw,16px)!important;
    letter-spacing:-.01em!important;
  }
  .mobile-brand-row>div:last-child{
    flex:0 0 auto!important;
  }
  html[data-koin-font-size="kecil"] .mobile-brand-title{
    font-size:clamp(13px,4.1vw,17px)!important;
  }
  html[data-koin-font-size="kecil"] .mobile-brand-title.is-long{
    font-size:clamp(12px,3.8vw,15px)!important;
  }
  html[data-koin-font-size="kecil"] .mobile-brand-title.is-very-long{
    font-size:clamp(11px,3.45vw,14px)!important;
  }
}

/* v60 laporan */


/* v71 Security: opsi cabut semua sesi */
@media (max-width:767px){
  .ui-settings-logout-all{
    width:100%!important;min-height:46px!important;margin:0 0 12px!important;
    border:1px solid #f5d78a!important;border-radius:15px!important;
    background:linear-gradient(145deg,#fffbeb,#fff6cf)!important;color:#7c5700!important;
    font-weight:900!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  }
}