/* ========================================================================== IKAPA — Stylesheet bersama untuk seluruh halaman (public & admin) Dimuat lewat asset('css/style.css') -> otomatis kena cache-busting (?v=filemtime) ========================================================================== */ html { scroll-behavior: smooth; } body { font-family: 'Plus Jakarta Sans', sans-serif; } .font-display { font-family: 'Amiri', serif; } .skip-link{position:absolute;left:-9999px;top:0;background:#0F5132;color:#fff;padding:.6rem 1rem;z-index:100;border-radius:0 0 .5rem 0;} .skip-link:focus{left:0;} /* Motif geometris 8-titik (girih) — signature pattern, dipakai berulang di beberapa halaman */ .star-pattern{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.9'%3E%3Crect x='14' y='14' width='16' height='16'/%3E%3Crect x='14' y='14' width='16' height='16' transform='rotate(45 22 22)'/%3E%3C/g%3E%3C/svg%3E"); background-size:44px 44px; } .hero-bg, .brand-panel { background:radial-gradient(120% 100% at 15% 0%,#146840 0%,#0F5132 45%,#0B3D26 100%); } /* Bingkai arch (mihrab) — elemen visual berulang khas pesantren */ .arch-frame{ width:min(78vw,300px); height:340px; margin:0 auto; position:relative; border-radius:500px 500px 0 0; overflow:hidden; background:linear-gradient(160deg,#1B7A4D,#0B3D26); border:6px solid #D4AF37; box-shadow:0 24px 60px rgba(0,0,0,.35); } .arch-frame::before{content:"";position:absolute;inset:0;opacity:.35;background-image:inherit;} .arch-frame.arch-frame--sm{width:min(60vw,220px);height:250px;border-width:5px;} /* Pembatas skyline berbentuk kubah — pengganti garis pembatas biasa */ .arch-divider{height:34px;background-color:#0B3D26;background-image:radial-gradient(circle at 50% 100%,#FBF8F1 0 17px,transparent 17px);background-size:34px 34px;background-repeat:repeat-x;} .hero-slide{transition:opacity .7s ease;} .hero-slide.is-hidden{opacity:0;position:absolute;inset:0;pointer-events:none;} .hero-slide.is-active{opacity:1;position:relative;} [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;} [data-reveal].in-view{opacity:1;transform:translateY(0);} .progress-fill{width:0%;transition:width 1.1s cubic-bezier(.22,.9,.3,1);} /* -------------------------------------------------------------------------- Bottom navigation (mobile-only) — dipakai di layout publik & admin. Kelima item berbagi struktur flex yang IDENTIK (column, center, gap sama) supaya presisi; hanya "bungkus ikon" tombol tengah yang lebih besar & diangkat lewat margin-top negatif (bukan position:absolute), sehingga tetap ikut alur flex yang sama dengan 4 tombol lain — label selalu sejajar persis di semua tombol. -------------------------------------------------------------------------- */ .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:70;height:64px;background:#fff;display:flex;box-shadow:0 -6px 24px rgba(11,61,38,.10);padding-bottom:env(safe-area-inset-bottom);} .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:#4B5750;text-decoration:none;position:relative;} .bottom-nav a .nav-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;} .bottom-nav a .nav-icon svg{width:100%;height:100%;} .bottom-nav a.is-active{color:#0F5132;} .bottom-nav a.fab-slot{color:#0F5132;font-weight:700;} .bottom-nav a.fab-slot .nav-icon{width:56px;height:56px;margin-top:-30px;border-radius:9999px;background:linear-gradient(150deg,#1B7A4D,#0B3D26);border:3px solid #D4AF37;box-shadow:0 10px 22px rgba(15,81,50,.4),0 0 0 6px #fff;} .bottom-nav a.fab-slot .nav-icon svg{width:26px;height:26px;color:#fff;} .bottom-nav a.fab-slot .nav-icon img{width:32px;height:32px;border-radius:9999px;object-fit:cover;} .bottom-nav a.fab-slot .nav-badge{position:absolute;top:-28px;right:calc(50% - 26px);background:#D4AF37;color:#0B3D26;font-size:9px;font-weight:800;width:16px;height:16px;border-radius:9999px;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;} @media (min-width:768px){ .bottom-nav.is-public{display:none;} } @media (min-width:768px){ .bottom-nav.is-alumni{display:none;} } @media (min-width:1024px){ .bottom-nav.is-admin{display:none;} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;} } html.dark .bottom-nav{background:#0F231A;box-shadow:0 -6px 24px rgba(0,0,0,.35);} html.dark .bottom-nav a{color:#9FB3A9;} html.dark .bottom-nav a.is-active{color:#7CBC97;} html.dark .bottom-nav a.fab-slot{color:#E6C766;} html.dark .bottom-nav a.fab-slot .nav-icon{box-shadow:0 10px 22px rgba(0,0,0,.5),0 0 0 6px #0F231A;} /* -------------------------------------------------------------------------- Admin dashboard: sidebar off-canvas + item nav sidebar -------------------------------------------------------------------------- */ .sidebar{transition:transform .25s ease;} @media (max-width:1023px){ .sidebar{position:fixed;inset:0 auto 0 0;transform:translateX(-100%);z-index:60;} .sidebar.is-open{transform:translateX(0);} } .side-nav-item{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;border-radius:.65rem;font-size:.875rem;font-weight:600;color:#D3E9DC;} .side-nav-item svg{width:18px;height:18px;flex-shrink:0;} .side-nav-item:hover{background:rgba(255,255,255,.06);} .side-nav-item.is-active{background:#D4AF37;color:#0B3D26;} /* Override tampilan default DataTables (v2.3.8) agar senada tema. DataTables 2 sudah membuat baris kontrolnya sendiri jadi flexbox (.dt-layout-row), jadi di sini kita tinggal merapikan ELEMEN DI DALAMNYA — bukan lagi menulis ulang tata letaknya dari nol. */ table.dataTable{border-collapse:separate !important;border-spacing:0;font-size:.875rem;width:100%;} table.dataTable thead th{background:#EAF4EE;color:#0B3D26;font-weight:700;border-bottom:1px solid rgba(11,61,38,.1) !important;padding:.75rem 1rem !important;white-space:nowrap;} table.dataTable tbody td{padding:.75rem 1rem !important;border-bottom:1px solid rgba(11,61,38,.06);vertical-align:middle;} table.dataTable tbody tr:last-child td{border-bottom:none;} html.dark table.dataTable thead th{background:#0F231A;color:#EAF4EE;border-bottom-color:rgba(255,255,255,.08) !important;} html.dark table.dataTable tbody td{border-bottom-color:rgba(255,255,255,.06);color:#D3E9DC;} /* Baris atas (length + search) dan baris bawah (info + paging) — DataTables sendiri sudah menaruh keduanya sebagai flex row rata kiri/kanan; di sini cuma menambah jarak & garis pemisah supaya menyatu rapi dengan kartu. */ .dt-container .dt-layout-row:has(.dt-length){margin-bottom:1rem;} .dt-container .dt-layout-row:has(.dt-paging){margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(11,61,38,.08);} .dt-length label, .dt-search label{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;color:#4B5750;margin:0 !important;white-space:nowrap;} .dt-length select{height:2.25rem !important;border:1px solid rgba(11,61,38,.2) !important;border-radius:.5rem !important;padding:0 2rem 0 .6rem !important;font-size:.8rem !important;background-color:#fff !important;color:#1B231D !important;} .dt-search{position:relative;} .dt-search::before{content:"";position:absolute;left:.9rem;top:50%;width:14px;height:14px;transform:translateY(-50%);pointer-events:none;z-index:1;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5750' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4' stroke-linecap='round'/%3E%3C/svg%3E");} .dt-search input{height:2.25rem !important;width:220px !important;max-width:100%;background:#FBF8F1 !important;border:1px solid rgba(11,61,38,.2) !important;border-radius:.6rem !important;padding:0 .8rem 0 2.75rem !important;font-size:.8rem !important;box-sizing:border-box;margin:0 !important;color:#1B231D !important;} .dt-search input::placeholder{color:#8A9490;} .dt-search input:focus{outline:none;background:#fff !important;border-color:#1B7A4D !important;box-shadow:0 0 0 2px rgba(27,122,77,.15);} html.dark .dt-length label, html.dark .dt-search label{color:#9FB3A9;} html.dark .dt-length select{background-color:#10261C !important;border-color:rgba(255,255,255,.15) !important;color:#EAF4EE !important;} html.dark .dt-search input{background:#10261C !important;border-color:rgba(255,255,255,.15) !important;color:#EAF4EE !important;} html.dark .dt-search input:focus{background:#0F231A !important;border-color:#4E9E71 !important;} html.dark .dt-search::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FB3A9' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4' stroke-linecap='round'/%3E%3C/svg%3E");} .dt-info{margin:0;font-size:.75rem;color:#4B5750;display:flex;align-items:center;gap:.35rem;white-space:nowrap;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;} .dt-info .dt-info-icon{width:14px;height:14px;flex-shrink:0;color:#8A9490;} .dt-paging{margin:0;display:flex;flex-shrink:0;} .dt-container .dt-paging .dt-paging-button{display:inline-flex !important;align-items:center !important;justify-content:center !important;min-width:2rem !important;height:2rem !important;border-radius:.5rem !important;padding:0 .5rem !important;margin-left:2px !important;border:1px solid transparent !important;font-size:.8rem !important;line-height:1 !important;color:#33403A !important;background:transparent;} .dt-container .dt-paging .dt-paging-button:hover{background:#EAF4EE !important;border-color:transparent !important;color:#0F5132 !important;} .dt-container .dt-paging .dt-paging-button.current{background:#0F5132 !important;color:#fff !important;border-color:#0F5132 !important;} .dt-container .dt-paging .dt-paging-button.disabled{opacity:.35;pointer-events:none;} .dt-paging .dt-paging-button .dt-page-icon{width:14px;height:14px;display:block;} .badge{font-size:.7rem;font-weight:700;padding:.2rem .6rem;border-radius:9999px;display:inline-block;} .badge-approved{background:#D3E9DC;color:#0F5132;} .badge-pending{background:#F7ECC4;color:#8F711F;} .badge-rejected{background:#FBDAD6;color:#9B3B30;} html.dark .badge-approved{background:rgba(78,158,113,.2);color:#7CBC97;} html.dark .badge-pending{background:rgba(212,175,55,.2);color:#E6C766;} html.dark .badge-rejected{background:rgba(184,73,63,.2);color:#E8877D;} html.dark .dt-container .dt-layout-row:has(.dt-paging){border-top-color:rgba(255,255,255,.08);} html.dark .dt-info{color:#9FB3A9;} html.dark .dt-container .dt-paging .dt-paging-button{color:#D3E9DC !important;} html.dark .dt-container .dt-paging .dt-paging-button:hover{background:rgba(255,255,255,.08) !important;color:#EAF4EE !important;} /* DataTables sendiri men-stack baris kontrol (length/search/info/paging) jadi vertikal di bawah 768px (lihat dataTables.dataTables.css bawaan). Kita batalkan itu supaya tetap sejajar kiri-kanan di semua ukuran layar — kolom tabel yang menyesuaikan lewat Responsive di bawah, bukan toolbar-nya yang menumpuk. */ @media screen and (max-width:767px){ .dt-container .dt-layout-row:not(.dt-layout-table){display:flex !important;flex-wrap:nowrap !important;} .dt-container .dt-layout-row:not(.dt-layout-table) .dt-layout-cell{display:flex !important;text-align:left !important;} .dt-container .dt-layout-row:not(.dt-layout-table) .dt-layout-cell > *{margin:0 !important;} } @media (max-width:640px){ .dt-search input{width:auto;min-width:0;flex:1 1 auto;} .dt-info{font-size:.7rem;} .dt-paging .dt-paging-button{min-width:1.75rem;height:1.75rem;padding:0 .35rem !important;} } /* -------------------------------------------------------------------------- DataTables Responsive — kolom yang tersembunyi di layar sempit dibuka lewat tanda "+" di depan Nama Lengkap (mode inline, bawaan ekstensi). -------------------------------------------------------------------------- */ table.dataTable.dtr-inline.collapsed > tbody > tr > td.dt-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dt-control:before{ background-color:#1B7A4D;box-shadow:0 0 0 rgba(0,0,0,0);border:none;line-height:1.1; } table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dt-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dt-control:before{ background-color:#B8912A; } table.dataTable > tbody > tr.child{background:#FBF8F1;} table.dataTable > tbody > tr.child ul.dtr-details{padding:.5rem 1rem;margin:0;list-style:none;} table.dataTable > tbody > tr.child ul.dtr-details li{padding:.4rem 0;border-bottom:1px dashed rgba(11,61,38,.12);font-size:.8rem;} table.dataTable > tbody > tr.child ul.dtr-details li:last-child{border-bottom:none;} table.dataTable > tbody > tr.child span.dtr-title{font-weight:700;color:#0B3D26;min-width:110px;display:inline-block;} html.dark table.dataTable.dtr-inline.collapsed > tbody > tr > td.dt-control:before{background-color:#4E9E71;} html.dark table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dt-control:before{background-color:#D4AF37;} html.dark table.dataTable > tbody > tr.child{background:#0F231A;} html.dark table.dataTable > tbody > tr.child ul.dtr-details li{border-bottom-color:rgba(255,255,255,.1);} html.dark table.dataTable > tbody > tr.child span.dtr-title{color:#EAF4EE;} /* Toast kecil (dipakai halaman login untuk pesan error) */ .toast{transition:opacity .3s ease, transform .3s ease;} /* -------------------------------------------------------------------------- Mode Gelap — switch on/off ala iOS, dipakai di drawer publik & sidebar admin -------------------------------------------------------------------------- */ .theme-switch{width:44px;height:24px;border-radius:9999px;background:rgba(0,0,0,.15);position:relative;flex-shrink:0;transition:background .2s ease;border:none;cursor:pointer;} .theme-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.3);} .theme-switch[aria-checked="true"]{background:#1B7A4D;} .theme-switch[aria-checked="true"]::after{transform:translateX(20px);} html.dark .theme-switch{background:rgba(255,255,255,.15);} .theme-icon-toggle .icon-sun{display:none;} .theme-icon-toggle .icon-moon{display:block;} html.dark .theme-icon-toggle .icon-sun{display:block;} html.dark .theme-icon-toggle .icon-moon{display:none;} /* -------------------------------------------------------------------------- Drawer navigasi mobile (pengganti dropdown sederhana) — panel geser dari kiri + overlay gelap, dipakai di halaman publik. -------------------------------------------------------------------------- */ .drawer-overlay{position:fixed;inset:0;background:rgba(8,26,17,.55);z-index:80;opacity:0;pointer-events:none;transition:opacity .25s ease;} .drawer-overlay.is-open{opacity:1;pointer-events:auto;} .drawer-panel{position:fixed;top:0;bottom:0;left:0;width:min(88vw,340px);background:#FBF8F1;z-index:90;transform:translateX(-100%);transition:transform .3s cubic-bezier(.22,.9,.3,1);overflow-y:auto;box-shadow:12px 0 40px rgba(0,0,0,.25);} .drawer-panel.is-open{transform:translateX(0);} .drawer-nav-item{display:flex;align-items:center;gap:.85rem;padding:.7rem .5rem;border-radius:.75rem;color:#33403A;text-decoration:none;font-weight:600;font-size:.9rem;} .drawer-nav-item:hover{background:rgba(11,61,38,.05);} .drawer-nav-item .drawer-icon{width:38px;height:38px;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;} .drawer-nav-item .drawer-chevron{margin-left:auto;color:#8A9490;} .drawer-nav-item.is-active{background:rgba(27,122,77,.08);color:#0F5132;} .drawer-nav-item--danger{color:#B8493F;} .drawer-nav-item--danger:hover{background:rgba(184,73,63,.08);} html.dark .drawer-panel{background:#0A1A13;box-shadow:12px 0 40px rgba(0,0,0,.5);} html.dark .drawer-nav-item{color:#EAF4EE;} html.dark .drawer-nav-item:hover{background:rgba(255,255,255,.05);} html.dark .drawer-nav-item .drawer-chevron{color:#6B756F;} html.dark .drawer-nav-item.is-active{background:rgba(78,158,113,.15);color:#7CBC97;} html.dark .drawer-nav-item--danger{color:#E8877D;} html.dark .drawer-nav-item--danger:hover{background:rgba(184,73,63,.12);} /* Kartu interaktif area alumni — sedikit terangkat & bayangan lebih tebal saat hover/fokus */ .hover-lift{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;} .hover-lift:hover,.hover-lift:focus-visible{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(15,81,50,.25);} html.dark .hover-lift:hover,html.dark .hover-lift:focus-visible{box-shadow:0 12px 24px -12px rgba(0,0,0,.5);} /* Pemilih channel pembayaran (Iuran & Donasi) — radio disembunyikan (sr-only), kartu label-nya sendiri yang jadi tombol pilihan visual. */ .channel-opsi:has(input:checked){border-color:#146840;background:#EAF4EE;box-shadow:0 0 0 1.5px #146840;} html.dark .channel-opsi:has(input:checked){background:rgba(20,104,64,.18);box-shadow:0 0 0 1.5px #4E9E71;} /* Tab horizontal /dashboard/pengaturan — full-width, scrollable di mobile (overflow-x-auto pada wrapper). Tombol tidak aktif abu-abu netral, aktif hijau tebal + garis bawah (pola underline tab standar). */ .tab-pengaturan-btn{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;padding:.75rem 1.1rem;font-size:.825rem;font-weight:700;color:#6B756F;border-bottom:2.5px solid transparent;transition:color .15s ease,border-color .15s ease;} .tab-pengaturan-btn:hover{color:#146840;} .tab-pengaturan-btn.is-active{color:#0F5132;border-bottom-color:#146840;} html.dark .tab-pengaturan-btn{color:#6B756F;} html.dark .tab-pengaturan-btn:hover{color:#7CBC97;} html.dark .tab-pengaturan-btn.is-active{color:#7CBC97;border-bottom-color:#4E9E71;} .tab-panel-pengaturan.hidden{display:none;} /* Indikator "Memuat data…" DataTables server-side (dt-processing) — BUG DITEMUKAN via screenshot pengguna: DataTables 2.x PUNYA CSS bawaan SENDIRI `div.dt-processing{position:absolute;top:50%;left:50%; width:200px;margin-left:-100px;margin-top:-22px;...}` (lihat CDN dataTables.dataTables.min.css) — SELECTOR itu (tag+class) SPECIFICITY- nya LEBIH TINGGI drpd `.dt-processing` polos yg SEBELUMNYA ditulis di sini, jadi override kita KALAH utk position/top/left/width/margin (HANYA background yg menang, krn DataTables tidak mendefinisikan ulang) — hasilnya: kotak transparan KECIL 200px doang di tengah, BUKAN overlay penuh — baris-baris di LUAR kotak 200px itu (tabel yg lebih lebar) tetap terlihat jelas TANPA backdrop sama sekali, persis yg terlihat "mengambang aneh menimpa data lama" di screenshot. DataTables JUGA membuat 4 titik loader BIRU bawaan sendiri di dalam div.dt-processing>div:last-child (warna rgb(2,117,216) — biru Bootstrap default, SAMA SEKALI tidak sesuai tema hijau IKAPA) — disembunyikan, diganti spinner sendiri via ::before. Diperbaiki dgn: (1) selector `div.dt-processing` (match specificity DataTables) + !important pd property yg DataTables sudah definisikan sendiri, (2) sembunyikan 4-dot loader biru bawaan, (3) inset:0 penuh + backdrop solid supaya SELURUH tabel tertutup rapi, bukan cuma kotak kecil di tengah. .dt-container perlu position:relative eksplisit — DataTables 2.x TIDAK selalu menyetelnya sendiri, dan tanpa itu overlay absolute akan lepas relatif ke . */ .dt-container{position:relative;} div.dt-processing{position:absolute !important;inset:0 !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;margin:0 !important;padding:0 !important;display:flex;align-items:center;justify-content:center;gap:.6rem;background:rgba(251,248,241,.92);z-index:10;border-radius:.75rem;} div.dt-processing>div:last-child{display:none !important;} div.dt-processing::before{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(11,61,38,.15);border-top-color:#1B7A4D;animation:dt-spin .7s linear infinite;flex-shrink:0;} @keyframes dt-spin{to{transform:rotate(360deg);}} html.dark div.dt-processing{background:rgba(10,26,19,.92);} html.dark div.dt-processing::before{border-color:rgba(255,255,255,.15);border-top-color:#4E9E71;} /* Scrollbar tipis & senada tema — diminta eksplisit: "scroll bar vertical sangat mengganggu". Selector atribut [class*="overflow-y-auto"] (BUKAN class baru yg ditambah manual di tiap tempat) otomatis menjangkau SEMUA elemen scroll ber-Tailwind-class overflow-y-auto di SELURUH situs — modal, daftar scrollable, sidebar admin — TERMASUK yg akan dibuat nanti, tanpa perlu diingat-ingat lagi tiap kali bikin elemen scroll baru. Webkit (Chrome/Edge/Safari, ::-webkit-scrollbar) + Firefox (scrollbar-width/-color, tidak py ::-webkit-scrollbar). Lebar 6px (drpd default browser ~15-17px) — jauh lebih tak mengganggu & TIDAK lagi memakan ruang kanan secara signifikan (ikut membantu perbaikan "kiri kanan tidak presisi" bersama restrukturisasi modal di app/Views/dashboard/{anggota,transaksi,kas-biaya-layanan}.php, lihat komentar lengkap di sana). */ [class*="overflow-y-auto"]{scrollbar-width:thin;scrollbar-color:rgba(15,81,50,.25) transparent;} [class*="overflow-y-auto"]::-webkit-scrollbar{width:6px;height:6px;} [class*="overflow-y-auto"]::-webkit-scrollbar-track{background:transparent;} [class*="overflow-y-auto"]::-webkit-scrollbar-thumb{background:rgba(15,81,50,.25);border-radius:9999px;} [class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover{background:rgba(15,81,50,.4);} html.dark [class*="overflow-y-auto"]{scrollbar-color:rgba(124,188,151,.3) transparent;} html.dark [class*="overflow-y-auto"]::-webkit-scrollbar-thumb{background:rgba(124,188,151,.3);} html.dark [class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover{background:rgba(124,188,151,.45);} /* Styling isi konten Berita/Tausiah/Agenda (diminta eksplisit: "gunakan text editor") — HTML dari Quill.js (sudah dibersihkan via App\Core\helpers.php::sanitasi_html_konten() SEBELUM disimpan) dirender LANGSUNG di app/Views/publik/berita-detail.php, class .konten-artikel memberi jarak & tipografi yg rapi utk tag2 dasar yg diizinkan whitelist sanitasi (h2/h3/h4/ul/ol/li/blockquote/a/ strong/em/dst) — TANPA library "prose" pihak ketiga (Tailwind Typography, dst — proyek ini pakai Tailwind via CDN polos, plugin tsb butuh build step yg tidak tersedia). */ .konten-artikel{line-height:1.75;} .konten-artikel>*+*{margin-top:1rem;} .konten-artikel h2{font-size:1.375rem;font-weight:800;margin-top:1.75rem;} .konten-artikel h3{font-size:1.175rem;font-weight:800;margin-top:1.5rem;} .konten-artikel h4{font-size:1.05rem;font-weight:700;margin-top:1.25rem;} .konten-artikel ul,.konten-artikel ol{padding-left:1.375rem;} .konten-artikel ul{list-style-type:disc;} .konten-artikel ol{list-style-type:decimal;} .konten-artikel li+li{margin-top:.35rem;} .konten-artikel blockquote{border-left:3px solid #D4AF37;padding-left:1rem;font-style:italic;color:#4B5750;} .konten-artikel a{color:#146840;font-weight:700;text-decoration:underline;text-underline-offset:2px;} html.dark .konten-artikel blockquote{border-left-color:#E6C766;color:#9FB3A9;} html.dark .konten-artikel a{color:#7CBC97;} /* Quill.js toolbar — override DEFENSIF dgn !important (diminta eksplisit, 2 laporan berturut-turut: "text editor tidak berfungsi, layar berantakan" [ikon jadi 2 segitiga RAKSASA], lalu "masih tidak berfungsi" [ikon jadi kecil TAPI solid hitam berantakan tanpa jarak antar grup]). AKAR MASALAH GANDA: (1) proyek ini memakai Tailwind Play CDN (`