/* ==========================================================================
e-SISKA — Sistem Informasi Kebencanaan Kabupaten Purworejo
Global Theme Stylesheet (BPBD Purworejo)
--------------------------------------------------------------------------
Catatan:
- File ini adalah satu-satunya sumber tampilan global aplikasi (di-load
lewat AppAsset.php & AppAssetLogin.php).
- Hanya berisi STYLING (tanpa mengubah logic / flow Yii2).
- Semua nama class lama (.esiska-*) dipertahankan agar view PHP yang
sudah ada tidak perlu diubah, lalu ditambahkan komponen baru
(.panel, .event-item, .app-header, dsb) sesuai desain baru.
========================================================================== */
/* Font utama desain baru (ringan, di-load dari Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
/* --------------------------------------------------------------------------
1. DESIGN TOKENS
Variabel warna / radius / shadow. Nama "--esiska-*" lama tetap dipakai
agar kompatibel, lalu dipetakan ke palet baru.
-------------------------------------------------------------------------- */
:root {
/* Palet desain baru */
--bg: #f8fafc;
--surface: #ffffff;
--card: #ffffff;
--border: #e2e8f0;
--accent: #1e40af; /* biru tua */
--accent2: #0ea5e9; /* biru langit */
--danger: #dc2626;
--warning: #f59e0b;
--success: #16a34a;
--text: #0f172a;
--text2: #475569;
--text3: #94a3b8;
--shadow: 0 2px 8px rgba(15, 23, 42, .06);
--shadow-lg: 0 8px 24px rgba(15, 23, 42, .08);
--header-grad:linear-gradient(90deg, #991b1b 0%, #dc2626 22%, #f97316 52%, #f97316 100%);
/* Alias lama (dipakai oleh banyak view) -> dipetakan ke palet baru */
--esiska-blue: var(--accent);
--esiska-blue-light: #eff6ff;
--esiska-red: var(--danger);
--esiska-red-light: #fef2f2;
--esiska-orange: #f97316;
--esiska-orange-light:#fff7ed;
--esiska-gold: var(--warning);
--esiska-dark: var(--text);
--esiska-white: #ffffff;
--esiska-gradient: var(--header-grad);
--esiska-gradient-blue: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #0ea5e9 100%);
--esiska-radius: 14px;
--esiska-radius-lg: 18px;
--esiska-shadow-sm: var(--shadow);
--esiska-shadow: var(--shadow);
--esiska-shadow-lg: var(--shadow-lg);
}
/* --------------------------------------------------------------------------
2. BASE
-------------------------------------------------------------------------- */
body {
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
}
/* ---- Skeleton loader & lazy image utilities ------------------------------
- .esiska-skeleton = wrapper / placeholder dengan animasi shimmer abu-abu
(tampil sebagai latar sebelum gambar selesai dimuat)
- .esiska-lazy = penanda ![]()
yang akan di-fade-in oleh
ESISKA.initLazyImages() begitu event "load" terpicu */
@keyframes esiska-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.esiska-skeleton {
background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
background-size: 200% 100%;
animation: esiska-shimmer 1.4s linear infinite;
}
/* ![]()
: transparan dulu, fade-in setelah load. */
img.esiska-lazy { opacity: 0; transition: opacity .35s ease; }
img.esiska-lazy.esiska-loaded { opacity: 1; }
/* Begitu loaded, animasi shimmer dimatikan supaya CPU tidak terpakai sia-sia. */
.esiska-skeleton.esiska-loaded { animation: none; background: transparent; }
/* Scrollbar tipis & modern */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* Utility yang dipakai di beberapa view */
.text-esiska-blue { color: var(--accent) !important; }
.text-esiska-red { color: var(--danger) !important; }
.bg-esiska-blue { background: var(--accent) !important; color: #fff !important; }
.btn-esiska-primary {
background: var(--accent);
border: 1px solid var(--accent);
color: #fff;
font-weight: 700;
border-radius: 10px;
padding: 8px 16px;
transition: all .15s ease;
}
.btn-esiska-primary:hover { background: #1e3a8a; color: #fff; transform: translateY(-1px); }
/* --------------------------------------------------------------------------
3. HARMONISASI TEMA METRONIC (layout utama)
Metronic memakai banyak class bawaan; di sini hanya disesuaikan warnanya
agar serasi dengan desain baru. Struktur HTML layout tidak diubah.
-------------------------------------------------------------------------- */
/* Header bar atas -> gradien BPBD (merah-oranye) */
body .header,
body #kt_header { background: var(--header-grad) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
body #kt_header .menu-title,
body #kt_header .card-label,
body #kt_header .svg-icon i,
body #kt_header .aside-toggle i { color: #fff !important; }
/* Override Metronic btn-icon default yang memberi background gelap saat hover/active */
body #kt_header #kt_aside_toggle.btn-icon { background: transparent !important; }
body #kt_header #kt_aside_toggle.btn-icon:hover,
body #kt_header #kt_aside_toggle.btn-icon:focus,
body #kt_header #kt_aside_toggle.btn-icon:active,
body #kt_header #kt_aside_toggle.btn-icon.active { background: rgba(255,255,255,.15) !important; box-shadow: none !important; }
/* Pastikan tombol toggle hamburger selalu terlihat di semua ukuran layar */
#kt_aside_toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
background: transparent !important;
border-radius: 6px !important;
border: none !important;
box-shadow: none !important;
cursor: pointer;
margin-right: 8px;
padding: 0 !important;
z-index: 10;
transition: background .15s;
}
#kt_aside_toggle:hover,
#kt_aside_toggle:focus,
#kt_aside_toggle:active {
background: rgba(255,255,255,.15) !important;
outline: none !important;
box-shadow: none !important;
}
#kt_aside_toggle i {
color: #fff !important;
font-size: 18px !important;
line-height: 1;
}
body #kt_header .text-white-50 { color: rgba(255, 255, 255, .8) !important; }
/* Tombol "Jadi Relawan" / "Lapor Bencana" di header agar kontras di gradien */
body #kt_header .btn-light-primary {
background: #fff !important; color: var(--danger) !important;
font-weight: 700; border-radius: 8px;
}
body #kt_header .btn-light-primary:hover { background: #fef2f2 !important; }
/* Sidebar / aside */
body .aside { background: var(--surface) !important; border-right: 1px solid var(--border); box-shadow: var(--shadow-lg); }
body .aside .menu-section { color: var(--text3) !important; letter-spacing: .08em; }
body .aside .menu-link { border-radius: 10px; color: var(--text2) !important; font-weight: 600; }
body .aside .menu-link:hover { background: #f1f5f9 !important; color: var(--text) !important; }
body .aside .menu-item.menu-accordion.show > .menu-link,
body .aside .menu-link.active { background: var(--accent) !important; color: #fff !important; }
body .aside .menu-link.active .menu-icon i { color: #fff !important; }
/* Card bawaan Metronic */
body .card { border: 1px solid var(--border); border-radius: var(--esiska-radius-lg); box-shadow: var(--shadow); }
body .card .card-header { border-bottom: 1px solid var(--border); }
/* Tombol primary global */
body .btn-primary { background: var(--accent); border-color: var(--accent); }
body .btn-primary:hover { background: #1e3a8a; border-color: #1e3a8a; }
body .btn-danger { background: var(--danger); border-color: var(--danger); }
/* Toolbar / page title */
body .toolbar .page-title h1 { color: var(--text) !important; font-weight: 800; }
body .breadcrumb .breadcrumb-item, body .breadcrumb a { color: var(--text2) !important; }
/* Scroll-to-top */
body .scrolltop { background: var(--accent) !important; }
/* --------------------------------------------------------------------------
4. APP SHELL (header + marquee + footer) — komponen desain baru
Kelas-kelas ini siap dipakai bila suatu layout publik ingin memakai
struktur header/footer baru, tanpa mengganggu Metronic.
-------------------------------------------------------------------------- */
.app-header {
height: 64px;
background: var(--header-grad);
display: flex; align-items: center; gap: 14px;
padding: 0 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.app-header .gov-logo {
width: 36px; height: 36px; border-radius: 50%;
background: #fff; display: flex; align-items: center; justify-content: center;
font-size: 18px; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.app-header .header-brand h1 { font-size: 20px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em; }
.app-header .header-brand p { font-size: 11px; color: rgba(255, 255, 255, .85); margin-top: 3px; font-weight: 500; }
.app-header .header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Marquee / running text info */
.marquee-bar {
height: 44px; background: #ecfccb; border-bottom: 1px solid #d9f99d;
display: flex; align-items: center; overflow: hidden;
}
.marquee-bar .label {
flex-shrink: 0; background: var(--success); color: #fff;
padding: 6px 14px; font-size: 11px; font-weight: 800; letter-spacing: .05em;
align-self: stretch; display: flex; align-items: center; gap: 6px;
}
.marquee-track { flex: 1; overflow: hidden; position: relative; }
.marquee-content {
display: inline-block; white-space: nowrap;
animation: esiska-marquee 45s linear infinite;
font-size: 13px; color: #365314; font-weight: 600; padding-left: 100%;
}
.marquee-content span { padding: 0 30px; }
.marquee-content span::before { content: "\25C6"; color: var(--success); margin-right: 30px; }
@keyframes esiska-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
/* Footer gelap desain baru */
.esiska-footer { background: #0f172a; color: #cbd5e1; padding: 40px 24px 20px; }
.esiska-footer .footer-grid {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
max-width: 1400px; margin: 0 auto;
}
.esiska-footer .footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.esiska-footer .footer-brand-logo {
width: 44px; height: 44px; border-radius: 10px;
background: linear-gradient(135deg, #dc2626, #f59e0b);
display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff;
}
.esiska-footer .footer-brand-name { font-size: 20px; font-weight: 800; color: #fff; }
.esiska-footer .footer-brand-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.esiska-footer p { font-size: 13px; line-height: 1.7; color: #94a3b8; }
.esiska-footer .footer-col h4 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .05em; }
.esiska-footer .footer-col ul { list-style: none; padding: 0; margin: 0; }
.esiska-footer .footer-col li, .esiska-footer .footer-col a { font-size: 13px; color: #94a3b8; padding: 4px 0; display: block; text-decoration: none; transition: color .15s; }
.esiska-footer .footer-col li:hover, .esiska-footer .footer-col a:hover { color: #fff; }
.esiska-footer .footer-contact { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #94a3b8; margin-bottom: 10px; line-height: 1.5; }
.esiska-footer .footer-contact i { color: #f59e0b; margin-top: 2px; }
.esiska-footer .footer-social { display: flex; gap: 8px; margin-top: 16px; }
.esiska-footer .footer-social a { width: 34px; height: 34px; border-radius: 8px; background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; color: #cbd5e1; transition: all .15s; }
.esiska-footer .footer-social a:hover { background: var(--accent); color: #fff; }
.esiska-footer .footer-bottom {
border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 32px; padding-top: 20px;
max-width: 1400px; margin-left: auto; margin-right: auto;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #64748b;
}
@media (max-width: 768px) { .esiska-footer .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
/* --------------------------------------------------------------------------
5. KOMPONEN PANEL / KARTU UMUM
-------------------------------------------------------------------------- */
/* Kartu generik */
.esiska-card {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--esiska-radius-lg); box-shadow: var(--shadow);
}
.esiska-card .card-body { padding: 20px; }
/* Panel (gaya desain baru — judul + sub + badge) */
.panel {
background: var(--card); border: 1px solid var(--border);
border-radius: 16px; padding: 20px; box-shadow: var(--shadow);
display: flex; flex-direction: column; min-width: 0;
}
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.panel-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text); }
.panel-sub { font-size: 11px; color: var(--text2); font-weight: 500; }
.panel-badge { font-size: 10px; font-weight: 700; background: var(--accent); color: #fff; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
/* Judul section dengan ikon kotak berwarna */
.esiska-section-title {
display: flex; align-items: center; gap: 10px;
font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 12px;
}
.esiska-section-title .icon {
width: 32px; height: 32px; border-radius: 9px;
display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.esiska-section-title .icon.blue { background: rgba(30, 64, 175, .12); color: var(--accent); }
.esiska-section-title .icon.red { background: rgba(220, 38, 38, .12); color: var(--danger); }
.esiska-section-title .icon.orange { background: rgba(245, 158, 11, .14); color: var(--warning); }
.esiska-section-title .icon.green { background: rgba(22, 163, 74, .12); color: var(--success); }
/* --------------------------------------------------------------------------
6. NEWS TICKER (running text)
-------------------------------------------------------------------------- */
.esiska-ticker {
display: flex; align-items: stretch; overflow: hidden;
background: #ecfccb; border: 1px solid #d9f99d; border-radius: 12px;
}
.esiska-ticker .badge-label {
flex-shrink: 0; background: var(--success); color: #fff;
padding: 8px 16px; font-size: 11px; font-weight: 800; letter-spacing: .05em;
display: flex; align-items: center;
}
.esiska-ticker .ticker-text {
flex: 1; padding: 8px 16px; font-size: 13px; font-weight: 600; color: #365314;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: opacity .4s ease, transform .4s ease;
}
/* Varian "bar" — info bar full-width yang menempel di bawah menu/header.
position:sticky agar ikut "nempel" di atas saat halaman di-scroll (tepat di
bawah header Metronic yang fixed, tinggi ±70px). */
.esiska-ticker-bar {
border-radius: 0; border-left: 0; border-right: 0;
position: sticky; top: 70px; z-index: 95;
}
.esiska-ticker-bar .badge-label { letter-spacing: .08em; }
@media (max-width: 991px) { .esiska-ticker-bar { top: 60px; } }
/* --------------------------------------------------------------------------
7. FILTER BAR
-------------------------------------------------------------------------- */
.esiska-filter-bar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow);
}
.esiska-filter-bar .form-control,
.esiska-filter-bar select.form-control {
width: auto; min-width: 150px;
border: 1px solid var(--border); border-radius: 10px;
font-size: 13px; font-weight: 600; color: var(--text); padding: 7px 12px; height: auto;
background-color: #fff;
}
.esiska-filter-bar .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30, 64, 175, .12); }
/* --------------------------------------------------------------------------
8. STAT CARDS
-------------------------------------------------------------------------- */
.esiska-stat-card {
display: flex; align-items: center; gap: 14px;
background: var(--surface); border: 1px solid var(--border);
border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow);
transition: transform .15s ease, box-shadow .15s ease; height: 100%;
}
.esiska-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.esiska-stat-card .stat-icon {
width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.esiska-stat-card .stat-icon.red { background: rgba(220, 38, 38, .12); color: var(--danger); }
.esiska-stat-card .stat-icon.blue { background: rgba(30, 64, 175, .12); color: var(--accent); }
.esiska-stat-card .stat-icon.orange { background: rgba(245, 158, 11, .14); color: var(--warning); }
.esiska-stat-card .stat-icon.green { background: rgba(22, 163, 74, .12); color: var(--success); }
.esiska-stat-card .stat-value { font-size: 26px; font-weight: 800; line-height: 1; color: var(--text); }
.esiska-stat-card .stat-label { font-size: 12px; font-weight: 600; color: var(--text2); margin-top: 4px; }
/* Kartu kecil "top card" / cuaca (gaya desain baru) */
.top-card {
background: #fff; border: 1px solid var(--border); border-radius: 14px;
padding: 10px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow);
}
.weather-temp { font-size: 24px; font-weight: 800; color: var(--accent); line-height: 1; }
.weather-desc { font-size: 11px; color: var(--text2); }
.weather-loc { font-size: 11px; color: var(--accent2); font-weight: 600; }
/* --------------------------------------------------------------------------
9. MAP CARD & LEAFLET
-------------------------------------------------------------------------- */
.esiska-map-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--esiska-radius-lg); box-shadow: var(--shadow); overflow: hidden;
}
.esiska-map-card .card-body { padding: 18px; }
.esiska-map-card #map { border-radius: 12px; overflow: hidden; }
.esiska-map-container { position: relative; border-radius: var(--esiska-radius-lg); overflow: hidden; box-shadow: var(--shadow); }
/* Tombol kontrol leaflet agar serasi */
.leaflet-control-zoom { border: 1px solid var(--border) !important; border-radius: 10px !important; overflow: hidden; box-shadow: var(--shadow) !important; }
.leaflet-control-zoom a { background: #fff !important; color: var(--text) !important; }
.leaflet-control-zoom a:hover { background: var(--accent) !important; color: #fff !important; }
/* Legenda leaflet (dibangun via JS di home.php) */
.leaflet-control .legend, .legend {
background: #fff; border: 1px solid var(--border); border-radius: 14px;
padding: 12px 14px; box-shadow: var(--shadow-lg); font-size: 11px; color: var(--text2); line-height: 1.8;
}
.legend h4 { font-size: 11px; font-weight: 700; margin: 0 0 6px; color: var(--text); text-transform: uppercase; letter-spacing: .05em; }
.legend .icon { display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: middle; background-size: contain; }
/* Panel legenda statis (komponen baru) */
.legend-panel {
background: #fff; border: 1px solid var(--border); border-radius: 14px;
padding: 14px 16px; box-shadow: var(--shadow-lg); max-width: 200px;
}
.legend-title { font-size: 11px; font-weight: 700; margin-bottom: 8px; color: var(--text); text-transform: uppercase; letter-spacing: .05em; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text2); padding: 3px 0; font-weight: 500; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
/* --------------------------------------------------------------------------
10. HAZARD MAP LINKS (peta rawan eksternal)
-------------------------------------------------------------------------- */
.esiska-hazard-links { display: flex; flex-wrap: wrap; gap: 10px; }
.esiska-hazard-link {
display: flex; align-items: center; gap: 8px;
background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text);
text-decoration: none; box-shadow: var(--shadow); transition: all .15s ease;
}
.esiska-hazard-link:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.esiska-hazard-link img { width: 22px; height: 22px; object-fit: contain; }
/* --------------------------------------------------------------------------
11. CHART CARDS
-------------------------------------------------------------------------- */
.esiska-chart-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--esiska-radius-lg); box-shadow: var(--shadow);
padding: 18px 20px; margin-bottom: 1rem;
}
.esiska-chart-card .chart-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.esiska-chart-card .chart-header img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); }
.esiska-chart-card .chart-header h5 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.esiska-chart-card .chart-header .subtitle { font-size: 11px; color: var(--text2); display: block; margin-top: 2px; line-height: 1.4; }
.esiska-chart-card > div[id^="container"] { width: 100%; min-height: 300px; }
/* Bungkus chart generik */
.chart-wrap { position: relative; width: 100%; }
.chart-kec { height: 320px; }
.chart-sm { height: 260px; }
/* --------------------------------------------------------------------------
12. KARTU "BENCANA TERBARU" (slider horizontal) & EVENT ITEM
-------------------------------------------------------------------------- */
/* Kartu kejadian besar bergambar (dipakai di home.php) */
.esiska-bencana-card {
flex: 0 0 260px; width: 260px;
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
overflow: hidden; box-shadow: var(--shadow); transition: all .15s ease;
}
.esiska-bencana-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(30, 64, 175, .14); border-color: var(--accent); }
.esiska-bencana-card .card-img {
height: 140px; background-color: #cbd5e1; position: relative; overflow: hidden;
}
/* Thumbnail bergaya "lazy fade-in": gambar transparan dulu, fade jadi terlihat
setelah onload. Saat masih loading, skeleton shimmer di latar tetap kelihatan. */
.esiska-bencana-card .card-img .card-thumb {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
opacity: 0; transition: opacity .35s ease; z-index: 1;
}
.esiska-bencana-card .card-img .card-thumb.esiska-loaded { opacity: 1; }
.esiska-bencana-card .card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .35)); z-index: 2; pointer-events: none; }
.esiska-bencana-card .badge-overlay {
position: absolute; left: 10px; bottom: 10px; z-index: 3;
background: rgba(220, 38, 38, .92); color: #fff; font-size: 10px; font-weight: 800;
text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 20px;
}
.esiska-bencana-card .card-content { padding: 12px 14px 14px; }
.esiska-bencana-card .card-content .title { font-size: 12px; font-weight: 700; color: var(--text2); }
.esiska-bencana-card .card-content .location { font-size: 12px; color: var(--accent2); font-weight: 600; margin: 4px 0; }
.esiska-bencana-card .card-content .desc { font-size: 12px; color: var(--text2); line-height: 1.45; }
/* Event item (daftar vertikal — komponen baru, dipakai di detail / list) */
.events-list { display: flex; flex-direction: column; gap: 10px; }
.event-item {
display: flex; gap: 14px; padding: 12px; border-radius: 14px;
background: #f8fafc; border: 1px solid var(--border);
text-decoration: none; color: inherit; transition: all .15s ease;
}
.event-item:hover { background: #fff; border-color: var(--accent); box-shadow: 0 4px 12px rgba(30, 64, 175, .12); transform: translateY(-2px); }
.event-thumb {
width: 84px; height: 84px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 34px; color: #fff;
position: relative; overflow: hidden; background-size: cover; background-position: center; background-color: #475569;
}
.event-thumb-badge {
position: absolute; bottom: 6px; left: 6px; z-index: 1;
font-size: 9px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .55);
padding: 2px 6px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em;
}
.event-info { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.event-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 4px; }
.event-meta { font-size: 12px; color: var(--text2); line-height: 1.4; margin-bottom: 6px; }
.event-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.event-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: #fff; border: 1px solid var(--border); color: var(--text2); }
.event-tag.danger { background: #fef2f2; color: var(--danger); border-color: #fecaca; }
.event-tag.warning { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.event-tag.info { background: #eff6ff; color: var(--accent); border-color: #bfdbfe; }
.event-time { font-size: 11px; color: var(--text3); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.event-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; font-weight: 800; }
/* Scroll area horizontal halus */
.esiska-scroll { scrollbar-width: thin; }
.esiska-scroll::-webkit-scrollbar { height: 6px; }
/* --------------------------------------------------------------------------
13. EMPTY STATE & WEATHER WIDGET
-------------------------------------------------------------------------- */
.esiska-empty-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; padding: 40px 20px; color: var(--text3); font-size: 14px; text-align: center;
}
.esiska-empty-state i { font-size: 28px; opacity: .6; }
.esiska-weather-widget { padding: 4px; min-height: 80px; }
/* --------------------------------------------------------------------------
14. HALAMAN LOGIN
-------------------------------------------------------------------------- */
body.esiska-login-body {
background: var(--header-grad) !important;
min-height: 100vh;
}
.esiska-login-page {
/* min-height (bukan height) + margin:auto pada child => konten yang lebih
tinggi dari layar tetap bisa di-scroll dari atas (tidak terpotong). */
min-height: 100vh; display: flex; padding: 40px 16px;
background: var(--header-grad);
background-attachment: fixed;
}
/* margin:auto memusatkan kartu horizontal & vertikal tanpa memotong saat overflow */
.esiska-login-wrapper { width: 100%; max-width: 460px; margin: auto; }
/* Halaman pendaftaran relawan memakai layout login namun form-nya panjang -> lebih lebar */
.esiska-login-wrapper.esiska-login-wide { max-width: 760px; }
/* Bila view memakai pembungkus Metronic sendiri (mis. daftar_petugas.php) -> tetap di tengah */
.esiska-login-page > .w-lg-600px, .esiska-login-page > .bg-body { margin: auto !important; }
.esiska-login-card {
background: #fff; border-radius: 20px; padding: 36px 32px;
box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.esiska-login-logo { text-align: center; margin-bottom: 18px; }
.esiska-login-logo img { height: 54px; object-fit: contain; }
.esiska-login-title { font-size: 22px; font-weight: 800; text-align: center; color: var(--text); }
.esiska-login-subtitle { font-size: 13px; color: var(--text2); text-align: center; margin-top: 6px; margin-bottom: 22px; }
.esiska-login-card .form-control,
.esiska-login-card .form-control-solid {
background: #f8fafc; border: 1px solid var(--border); border-radius: 10px;
padding: 11px 14px; font-size: 14px; height: auto;
}
.esiska-login-card .form-control:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30, 64, 175, .12); }
.esiska-login-card .form-label, .esiska-login-card .control-label { font-size: 12px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; }
.esiska-login-card .btn-primary {
background: var(--accent); border-color: var(--accent); border-radius: 10px;
font-weight: 700; padding: 11px; font-size: 15px;
}
.esiska-login-card .btn-primary:hover { background: #1e3a8a; border-color: #1e3a8a; }
.esiska-login-divider { height: 1px; background: var(--border); margin: 18px 0; }
.esiska-login-card .invalid-feedback, .esiska-login-card .help-block { font-size: 12px; }
/* --------------------------------------------------------------------------
15. HALAMAN DETAIL BENCANA
-------------------------------------------------------------------------- */
/* Header detail (foto + judul kejadian + meta + tab) — kartu putih bersih */
.esiska-detail-header {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--esiska-radius-lg); box-shadow: var(--shadow); margin-bottom: 1.25rem;
}
.esiska-detail-header h4, .esiska-detail-header h1, .esiska-detail-header h2 { font-weight: 800; color: var(--text); }
.esiska-detail-header .nav-line-tabs .nav-link.active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
.esiska-detail-header .thumb { box-shadow: var(--shadow); }
/* Kartu info detail (keterangan, penyebab, kronologis, ...) */
.esiska-detail-info-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--esiska-radius-lg); box-shadow: var(--shadow);
}
.esiska-detail-info-card .card-body { padding: 20px; }
.esiska-detail-info-card h5, .esiska-detail-info-card h6, .esiska-detail-info-card .card-title {
font-size: 14px; font-weight: 800; color: var(--text);
display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
/* Baris label : nilai (dipakai bila view memakai struktur ini) */
.esiska-detail-info-item { padding: 10px 0; border-bottom: 1px dashed var(--border); display: flex; flex-direction: column; gap: 3px; }
.esiska-detail-info-item:last-child { border-bottom: 0; }
.esiska-detail-info-item .label { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; }
.esiska-detail-info-item .value { font-size: 14px; color: var(--text); line-height: 1.55; }
/* Kotak statistik ringkas (bencana / kecamatan / korban dll).
Mendukung dua pola anak: .value/.label (master_detail) & .num/.cap (detail dampak). */
.esiska-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.esiska-detail-stat {
border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px;
background: #f8fafc; text-align: center; min-width: 120px; transition: all .15s ease;
}
.esiska-detail-stat:hover { border-color: var(--accent); }
.esiska-detail-stat .value, .esiska-detail-stat .stat-value { font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.2; }
.esiska-detail-stat .num { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1; }
.esiska-detail-stat .label, .esiska-detail-stat .stat-label { font-size: 11px; font-weight: 600; color: var(--text2); margin-top: 4px; }
.esiska-detail-stat .cap { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text2); margin-top: 6px; }
/* Varian warna */
.esiska-detail-stat.highlight { background: var(--accent); border-color: var(--accent); }
.esiska-detail-stat.highlight .value, .esiska-detail-stat.highlight .label, .esiska-detail-stat.highlight .num, .esiska-detail-stat.highlight .cap { color: #fff; }
.esiska-detail-stat.danger { background: #fef2f2; border-color: #fecaca; } .esiska-detail-stat.danger .num, .esiska-detail-stat.danger .value { color: var(--danger); }
.esiska-detail-stat.warning { background: #fffbeb; border-color: #fde68a; } .esiska-detail-stat.warning .num, .esiska-detail-stat.warning .value { color: #b45309; }
.esiska-detail-stat.info { background: #eff6ff; border-color: #bfdbfe; } .esiska-detail-stat.info .num, .esiska-detail-stat.info .value { color: var(--accent); }
/* Peta di halaman detail */
.esiska-detail-map { border-radius: 12px; overflow: hidden; }
.esiska-detail-map.card { border: 1px solid var(--border) !important; }
.esiska-detail-map #map { border-radius: 10px; overflow: hidden; }
/* --------------------------------------------------------------------------
16. KARTU "TENTANG" & "KONTAK"
-------------------------------------------------------------------------- */
.esiska-about-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--esiska-radius-lg); box-shadow: var(--shadow); padding: 24px;
}
.esiska-contact-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--esiska-radius-lg); box-shadow: var(--shadow); padding: 20px;
display: flex; gap: 14px; align-items: flex-start; transition: all .15s ease; height: 100%;
}
.esiska-contact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.esiska-contact-icon {
width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 18px;
background: rgba(30, 64, 175, .12); color: var(--accent);
}
/* --------------------------------------------------------------------------
17. KARTU PETA RAWAN / RISIKO (grid artikel peta)
-------------------------------------------------------------------------- */
.esiska-peta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.esiska-peta-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--esiska-radius-lg); box-shadow: var(--shadow);
overflow: hidden; transition: all .15s ease; display: flex; flex-direction: column;
}
.esiska-peta-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.esiska-peta-img-wrap { position: relative; overflow: hidden; aspect-ratio: 16/10; background: #cbd5e1; }
.esiska-peta-img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.esiska-peta-card:hover .esiska-peta-img { transform: scale(1.05); }
.esiska-peta-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.esiska-peta-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.35; }
.esiska-peta-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text3); font-weight: 600; }
.esiska-peta-date { display: flex; align-items: center; gap: 4px; }
.esiska-peta-excerpt { font-size: 13px; color: var(--text2); line-height: 1.5; }
/* Overlay / lightbox gambar — memakai mekanisme :target (href="#id")
sehingga kompatibel dengan view yang sudah ada (master_detail, detail_foto, peta). */
.esiska-overlay {
width: 0; height: 0; overflow: hidden; position: fixed; top: 0; left: 0;
background: rgba(15, 23, 42, 0); z-index: 9999; text-align: center;
display: flex; align-items: center; justify-content: center; transition: background .4s ease;
}
.esiska-overlay:target { width: 100vw; height: 100vh; right: 0; bottom: 0; background: rgba(15, 23, 42, .85); backdrop-filter: blur(4px); }
.esiska-overlay img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 12px; box-shadow: var(--shadow-lg); }
.esiska-overlay:target img { animation: esiskaZoomIn .35s ease; }
/* Tombol tutup — mendukung class .close (lama) maupun .esiska-overlay-close (baru) */
.esiska-overlay .close, .esiska-overlay .esiska-overlay-close {
position: absolute; top: 18px; right: 18px; width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 0;
background: rgba(255, 255, 255, .15); color: #fff; font-size: 20px; cursor: pointer;
text-decoration: none; opacity: 0; transition: background .15s ease;
}
.esiska-overlay .close:hover, .esiska-overlay .esiska-overlay-close:hover { background: rgba(255, 255, 255, .3); }
.esiska-overlay:target .close, .esiska-overlay:target .esiska-overlay-close { animation: esiskaFadeIn .4s .25s forwards; }
@keyframes esiskaZoomIn { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes esiskaFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
/* --------------------------------------------------------------------------
17b. FORM INPUTS — paksa latar putih agar terlihat "bisa diisi"
Tema Metronic menjadikan `.form-control-solid` (dan beberapa varian lain)
abu-abu sehingga terkesan disabled. Override di sini supaya seluruh
input/select/textarea pada aplikasi tampil putih + border jelas + fokus
biru sehingga user tahu pasti bahwa field bisa diisi.
-------------------------------------------------------------------------- */
body .form-control,
body .form-control-solid,
body .form-select,
body select.form-control,
body textarea.form-control,
body input.form-control,
body .form-control[readonly], /* readonly tetap putih, beda dgn disabled */
body input[type="text"].form-control,
body input[type="email"].form-control,
body input[type="number"].form-control,
body input[type="tel"].form-control,
body input[type="password"].form-control,
body input[type="search"].form-control,
body input[type="date"].form-control,
body input[type="time"].form-control,
body input[type="datetime-local"].form-control {
background-color: #ffffff !important;
background-image: none !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
box-shadow: none;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body .form-control::placeholder,
body .form-control-solid::placeholder,
body textarea.form-control::placeholder {
color: var(--text3) !important;
opacity: 1;
}
/* Saat fokus: highlight biru lembut supaya jelas sedang aktif */
body .form-control:focus,
body .form-control-solid:focus,
body .form-select:focus,
body textarea.form-control:focus {
background-color: #ffffff !important;
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px rgba(30, 64, 175, .12) !important;
color: var(--text) !important;
}
/* HANYA input yang benar-benar disabled yang tetap abu-abu */
body .form-control:disabled,
body .form-control-solid:disabled,
body .form-control[disabled],
body .form-select:disabled,
body textarea.form-control:disabled {
background-color: #f1f5f9 !important;
color: var(--text3) !important;
cursor: not-allowed;
}
/* Kartik Select2 — samakan dengan input lain (default-nya juga abu-abu) */
body .select2-container--krajee .select2-selection,
body .select2-container--krajee-bs4 .select2-selection,
body .select2-container--default .select2-selection {
background-color: #ffffff !important;
border: 1px solid var(--border) !important;
min-height: 38px !important;
}
body .select2-container--krajee .select2-selection--single .select2-selection__rendered,
body .select2-container--krajee-bs4 .select2-selection--single .select2-selection__rendered,
body .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--text) !important; line-height: 36px !important; padding-left: 12px !important;
}
body .select2-container--krajee .select2-selection--single .select2-selection__placeholder,
body .select2-container--krajee-bs4 .select2-selection--single .select2-selection__placeholder,
body .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: var(--text3) !important;
}
body .select2-container--open .select2-selection,
body .select2-container--focus .select2-selection {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px rgba(30, 64, 175, .12) !important;
}
/* Label field — warna jelas (kadang Metronic memberi text-muted) */
body .form-group > label,
body .form-label,
body .control-label,
body [class^="field-"] > label,
body [class*=" field-"] > label { color: var(--text2); font-weight: 600; }
/* Tombol upload bootstrap-fileinput agar tidak ikut abu-abu */
body .file-caption .form-control { background: #ffffff !important; }
/* --------------------------------------------------------------------------
18. TABEL / GRIDVIEW (Kartik & Bootstrap) — penyesuaian ringan
-------------------------------------------------------------------------- */
.kv-grid-container, .table-responsive { border-radius: var(--esiska-radius); }
.table thead th { background: #f8fafc; color: var(--text2); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border); }
.table td, .table th { border-color: var(--border); vertical-align: middle; }
.table-hover tbody tr:hover { background: #f8fafc; }
.kv-grid-table thead th { vertical-align: middle; }
/* --------------------------------------------------------------------------
19. RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
.esiska-section-title { font-size: 15px; }
.esiska-stat-card { padding: 14px 16px; }
.esiska-stat-card .stat-value { font-size: 22px; }
.esiska-chart-card { padding: 14px; }
.esiska-login-card { padding: 28px 22px; }
.esiska-detail-header { padding: 18px; }
.esiska-bencana-card { flex: 0 0 220px; width: 220px; }
}