/* =========================================================
   LANDING PAGE - TEMA CERAH (Publik / Masyarakat)
   Palet: merah Damkar sebagai warna utama, putih bersih sebagai
   dasar, dengan aksen biru/oranye/hijau di kartu fitur.
   Terpisah dari style.css (dashboard admin bertema navy gelap).
   ========================================================= */

:root {
    --ld-red:        #dc2626;
    --ld-red-dark:   #b91c1c;
    --ld-navy-text:  #0f172a;
    --ld-muted:      #64748b;
    --ld-bg:         #ffffff;
    --ld-soft-red:   #fef2f2;
    --ld-soft-blue:  #eff6ff;
    --ld-soft-green: #f0fdf4;
    --ld-soft-orange:#fff7ed;
    --ld-soft-purple:#faf5ff;
    --ld-border:     #f1f5f9;
    --ld-radius:     18px;
    --ld-shadow:     0 10px 30px rgba(15, 23, 42, .08);
}

* { box-sizing: border-box; }
body.landing {
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #1a1aeb;
    color: var(--ld-navy-text);
    padding: 26px 20px;
}
.ld-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Panel putih tempat seluruh konten "mengambang" di atas latar biru,
   supaya teks tetap kontras & mudah dibaca */
.ld-page-card {
    max-width: 1248px;
    margin: 0 auto;
    background: var(--ld-bg);
    border-radius: 28px;
    padding-top: 6px;
    padding-bottom: 10px;
    box-shadow: 0 30px 70px rgba(15, 23, 42, .35);
}

/* ---------- Navbar ---------- */
.ld-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
}
.ld-nav .ld-logo { display: flex; align-items: center; gap: 12px; }
.ld-nav .ld-logo-img {
    height: 46px; width: auto;
    flex-shrink: 0;
}
.ld-nav .ld-logo-text h1 { margin: 0; font-size: 16px; color: var(--ld-red-dark); letter-spacing: .3px; }
.ld-nav .ld-logo-text p { margin: 0; font-size: 11.5px; color: var(--ld-muted); }
.ld-nav-actions { display: flex; gap: 10px; align-items: center; }

.ld-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: .2s;
}
.ld-btn-outline { background: #fff; color: var(--ld-navy-text); border: 1px solid #e2e8f0; }
.ld-btn-outline:hover { background: #f8fafc; }
.ld-btn-red { background: var(--ld-red); color: #fff; box-shadow: 0 8px 18px rgba(220,38,38,.3); }
.ld-btn-red:hover { background: var(--ld-red-dark); }
.ld-btn-lg { padding: 15px 26px; font-size: 15px; }

/* ---------- Hero ---------- */
.ld-hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
    padding: 30px 0 50px;
}
.ld-badge-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ld-soft-blue);
    color: #2563eb;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 18px;
}
.ld-hero h2 {
    font-size: 46px;
    line-height: 1.12;
    margin: 0 0 18px;
    font-weight: 800;
}
.ld-hero h2 .hl-red { color: var(--ld-red); }
.ld-hero h2 .hl-purple { color: #7c3aed; }
.ld-hero .ld-tagline { font-size: 15px; font-weight: 700; color: var(--ld-navy-text); margin-bottom: 10px; }
.ld-hero p.desc { font-size: 15px; color: var(--ld-muted); line-height: 1.6; max-width: 480px; margin-bottom: 26px; }
.ld-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Hero visual: foto unit Damkar asli sebagai background ---------- */
.ld-hero-visual {
    position: relative;
    border-radius: 24px;
    min-height: 420px;
    background-image: var(--ld-hero-image, url('../img/homepage.jpeg'));
    /* URL dari index.php dipakai agar gambar tetap benar di domain maupun subfolder. */
    background-size: cover;
    background-position: center 55%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    box-shadow: var(--ld-shadow);
}
.ld-hero-visual::before {
    content: '';
    position: absolute; inset: 0;
    /* Overlay gelap tipis supaya kartu putih/merah tetap terbaca jelas di atas foto */
    background: linear-gradient(180deg, rgba(15,23,42,.15) 0%, rgba(15,23,42,.05) 40%, rgba(15,23,42,.35) 100%);
}
.ld-float-card {
    position: absolute;
    background: rgba(255,255,255,.97);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    font-size: 12.5px;
    z-index: 2;
}
.ld-float-card.card-alert { top: 22px; left: 22px; background: var(--ld-red); color: #fff; max-width: 220px; }
.ld-float-card.card-alert .t1 { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.ld-float-card.card-alert .t2 { opacity: .9; font-size: 11.5px; }
.ld-float-card.card-unit { bottom: 90px; left: 22px; min-width: 170px; }
.ld-float-card.card-unit .lbl { color: var(--ld-muted); font-size: 11px; }
.ld-float-card.card-unit .val { font-weight: 800; font-size: 14px; margin: 2px 0 6px; }
.ld-progress { height: 5px; border-radius: 4px; background: #e2e8f0; overflow: hidden; }
.ld-progress span { display: block; height: 100%; background: #16a34a; width: 78%; }
.ld-float-card.card-247 {
    top: 22px; right: 22px;
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    color: #fff;
    display: flex; align-items: center; gap: 10px;
}
.ld-float-card.card-247 .num { font-size: 22px; font-weight: 800; line-height: 1; }

/* ---------- Fitur ---------- */
.ld-features {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    background: #fff;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius);
    box-shadow: var(--ld-shadow);
    padding: 30px 24px;
    margin-top: -10px;
}
.ld-feature-item { text-align: center; }
.ld-feature-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    margin: 0 auto 12px;
}
.ld-feature-item h4 { margin: 0 0 6px; font-size: 14px; }
.ld-feature-item p { margin: 0; font-size: 12px; color: var(--ld-muted); line-height: 1.5; }

/* ---------- Stat / prioritas ---------- */
.ld-stats-row {
    display: grid;
    grid-template-columns: 1.2fr repeat(4, 0.7fr) 1.2fr;
    gap: 18px;
    margin: 26px 0 50px;
}
.ld-priority-card {
    background: linear-gradient(135deg, var(--ld-red), #f97316);
    color: #fff;
    border-radius: var(--ld-radius);
    padding: 24px;
}
.ld-priority-card h3 { margin: 0 0 8px; font-size: 18px; }
.ld-priority-card p { margin: 0; font-size: 13px; opacity: .92; line-height: 1.5; }
.ld-stat-box {
    background: #fff;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius);
    box-shadow: var(--ld-shadow);
    padding: 18px 14px;
    text-align: center;
}
.ld-stat-box .num { font-size: 24px; font-weight: 800; }
.ld-stat-box .lbl { font-size: 11.5px; color: var(--ld-muted); margin-top: 4px; }
.ld-tagline-card {
    background: var(--ld-soft-red);
    border-radius: var(--ld-radius);
    padding: 24px;
    display: flex; flex-direction: column; justify-content: center;
    text-align: center;
}
.ld-tagline-card h3 { margin: 0 0 4px; font-size: 17px; color: var(--ld-red-dark); }
.ld-tagline-card p { margin: 0; font-size: 12px; color: var(--ld-muted); }

/* ---------- SOP Section ---------- */
.ld-section { padding: 40px 0; }
.ld-section-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.ld-section-head h2 { font-size: 30px; margin: 0 0 10px; font-weight: 800; }
.ld-section-head p { color: var(--ld-muted); font-size: 14.5px; margin: 0; }

.ld-sop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.ld-sop-card {
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius);
    padding: 24px;
    position: relative;
    box-shadow: var(--ld-shadow);
}
.ld-sop-card .step-num {
    position: absolute; top: -14px; left: 22px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--ld-red);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
    box-shadow: 0 6px 14px rgba(220,38,38,.35);
}
.ld-sop-card .step-icon { font-size: 26px; margin-bottom: 12px; margin-top: 6px; }
.ld-sop-card h4 { margin: 0 0 8px; font-size: 15.5px; }
.ld-sop-card p { margin: 0; font-size: 13px; color: var(--ld-muted); line-height: 1.6; }

/* ---------- Nomor darurat ---------- */
.ld-emergency {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-radius: var(--ld-radius);
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    color: #fff;
}
.ld-emergency-text h3 { margin: 0 0 6px; font-size: 20px; }
.ld-emergency-text p { margin: 0; font-size: 13px; color: #cbd5e1; }
.ld-emergency-numbers { display: flex; gap: 14px; flex-wrap: wrap; }
.ld-emergency-numbers a {
    display: flex; align-items: center; gap: 10px;
    background: var(--ld-red);
    color: #fff;
    padding: 14px 22px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    font-size: 20px;
}
.ld-emergency-numbers a small { display: block; font-size: 10.5px; font-weight: 600; opacity: .85; }

/* ---------- Footer ---------- */
.ld-footer-band {
    background: linear-gradient(90deg, var(--ld-red), #991b1b);
    color: #fff;
    text-align: center;
    padding: 26px 20px;
    margin-top: 24px;
    border-radius: var(--ld-radius);
    max-width: 1248px;
    margin-left: auto; margin-right: auto;
}
.ld-footer-band h3 { margin: 0 0 4px; font-size: 20px; }
.ld-footer-band p { margin: 0; font-size: 12.5px; opacity: .9; letter-spacing: .5px; }
.ld-footer-bottom {
    text-align: center;
    padding: 18px;
    font-size: 12px;
    color: #e0ecff;
}
.ld-footer-bottom a { color: #fecaca; }

/* =========================================================
   RESPONSIF
   ========================================================= */
@media (max-width: 992px) {
    .ld-hero { grid-template-columns: 1fr; }
    .ld-hero-visual { min-height: 300px; order: -1; }
    .ld-features { grid-template-columns: repeat(3, 1fr); }
    .ld-stats-row { grid-template-columns: repeat(3, 1fr); }
    .ld-priority-card, .ld-tagline-card { grid-column: span 3; }
    .ld-sop-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    body.landing { padding: 14px 8px; }
    .ld-page-card { border-radius: 18px; }
    .ld-wrap { padding: 0 16px; }
    .ld-nav { flex-wrap: wrap; gap: 10px; }
    .ld-nav-actions { width: 100%; justify-content: flex-start; }
    .ld-btn { padding: 10px 16px; font-size: 13px; }
    .ld-hero h2 { font-size: 30px; }
    .ld-hero p.desc { font-size: 14px; }
    .ld-hero-actions { flex-direction: column; align-items: stretch; }
    .ld-hero-actions .ld-btn { justify-content: center; }
    .ld-features { grid-template-columns: repeat(2, 1fr); padding: 20px 16px; }
    .ld-stats-row { grid-template-columns: repeat(2, 1fr); }
    .ld-priority-card, .ld-tagline-card { grid-column: span 2; }
    .ld-sop-grid { grid-template-columns: 1fr; }
    .ld-emergency { flex-direction: column; align-items: stretch; text-align: center; }
    .ld-emergency-numbers { justify-content: center; }
    .ld-float-card.card-unit { bottom: 70px; }
}

/* =========================================================
   FORM (dipakai lapor.php) — sebelumnya form-group/form-control
   hanya didefinisikan di style.css (dashboard), sekarang
   dilengkapi juga di sini agar halaman publik mandiri (tidak
   bergantung memuat style.css dashboard yang bertema gelap).
   ========================================================= */
.ld-form-group { margin-bottom: 18px; }
.ld-form-group label {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ld-navy-text);
}
.ld-form-group .hint { font-weight: 400; color: var(--ld-muted); font-size: 12px; }
.ld-input, .ld-textarea, .ld-select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14.5px;
    font-family: inherit;
    background: #fff;
    color: var(--ld-navy-text);
    transition: .15s;
}
.ld-input:focus, .ld-textarea:focus, .ld-select:focus {
    outline: none;
    border-color: var(--ld-red);
    box-shadow: 0 0 0 4px rgba(220,38,38,.1);
}
.ld-input[readonly] { background: #f8fafc; color: #64748b; }
.ld-textarea { resize: vertical; min-height: 70px; }
.ld-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.ld-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ld-btn-sm {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 12.5px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: var(--ld-navy-text);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.ld-btn-sm:hover { background: #f8fafc; }
.ld-btn-sm.wa { background: #25d366; color: #fff; border: none; }
.ld-btn-sm.wa:hover { background: #1ebc59; }
.ld-btn-sm.locate { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }

.ld-locate-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* Kartu WA Center di atas form */
.ld-wa-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.ld-wa-card .wa-icon {
    width: 42px; height: 42px;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.ld-wa-card .wa-text { flex: 1; font-size: 12.5px; color: #065f46; }
.ld-wa-card .wa-text strong { display: block; font-size: 13.5px; color: #047857; margin-bottom: 1px; }
.ld-wa-card a.wa-btn {
    background: #25d366; color: #fff; text-decoration: none;
    padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 12.5px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Peta share-lokasi */
.ld-map-wrap { margin-top: 10px; }
.ld-map-status {
    font-size: 12px;
    color: var(--ld-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ld-map-status.found { color: #16a34a; font-weight: 600; }
#ldPetaLokasi {
    width: 100%;
    height: 260px;
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    overflow: hidden;
}

@media (max-width: 560px) {
    .ld-row-2 { grid-template-columns: 1fr; }
    .ld-wa-card { flex-direction: column; align-items: flex-start; text-align: left; }
    .ld-wa-card a.wa-btn { width: 100%; text-align: center; }
}

/* =========================================================
   STRIP NOMOR DARURAT (paling atas halaman)
   ========================================================= */
.ld-emergency-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 10px 14px;
    margin: 14px 0 0;
}
.ld-emergency-strip-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #991b1b;
    margin-right: 4px;
}
.ld-strip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ld-red);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 999px;
    white-space: nowrap;
}
.ld-strip-btn small { font-weight: 500; opacity: .85; margin-left: 2px; }
.ld-strip-btn.wa { background: #25d366; }
.ld-strip-btn:not(.pulse):not(.wa) { background: #1e293b; }

/* Animasi kedap-kedip pada nomor paling darurat (112 & 113) */
@keyframes ldBlink {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220,38,38,.55); }
    50%      { opacity: .55; box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}
.ld-strip-btn.pulse {
    animation: ldBlink 1.1s ease-in-out infinite;
}

@media (max-width: 640px) {
    .ld-emergency-strip { justify-content: center; }
    .ld-emergency-strip-label { width: 100%; text-align: center; margin-bottom: 4px; }
}

/* Animasi kedap-kedip untuk tombol "Laporkan Insiden" di navbar */
@keyframes ldBtnBlink {
    0%, 100% { box-shadow: 0 8px 18px rgba(220,38,38,.3); }
    50%      { box-shadow: 0 0 0 8px rgba(220,38,38,.25); }
}
.ld-btn-blink { animation: ldBtnBlink 1.3s ease-in-out infinite; }
\n/* ===== HERO GEDUNG DAMKAR 3D ===== */\n.ld-hero-3d { background: radial-gradient(circle at 50% 35%, #dff7ff 0, #9fd4e6 36%, #5c91a5 70%, #1e3a4a 100%); perspective: 1200px; }\n.ld-hero-3d::before { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(15,23,42,.18)); }\n.ld-3d-scene { position:relative; width:92%; height:390px; transform: rotateX(2deg) rotateY(-8deg); transform-style:preserve-3d; filter: drop-shadow(0 28px 25px rgba(15,23,42,.30)); }\n.ld-3d-building { position:absolute; left:8%; right:8%; bottom:55px; height:270px; transform-style:preserve-3d; }\n.ld-building-front { position:absolute; left:7%; bottom:0; width:76%; height:235px; background:linear-gradient(145deg,#f8fafc,#d7dee8); border:3px solid #94a3b8; box-shadow:inset 0 -16px 0 rgba(15,23,42,.07); transform:translateZ(55px); }\n.ld-building-side { position:absolute; right:0; bottom:0; width:18%; height:235px; background:linear-gradient(90deg,#b7c2cf,#7f8d9c); transform:skewY(-28deg) translateZ(10px); transform-origin:left bottom; border-right:3px solid #64748b; }\n.ld-building-roof { position:absolute; left:2%; top:12px; width:82%; height:52px; background:linear-gradient(145deg,#dc2626,#991b1b); clip-path:polygon(0 100%,8% 15%,92% 15%,100% 100%); transform:translateZ(70px); box-shadow:0 12px 0 #7f1d1d; }\n.ld-building-sign { position:absolute; top:22px; left:10%; right:10%; background:#fff; color:#991b1b; font-weight:900; font-size:11px; text-align:center; padding:8px; border-radius:5px; box-shadow:0 5px 10px rgba(0,0,0,.15); }\n.ld-building-door { position:absolute; bottom:0; left:43%; width:14%; height:112px; background:linear-gradient(90deg,#334155,#0f172a); border:4px solid #475569; }\n.ld-building-window { position:absolute; top:78px; width:15%; height:48px; background:linear-gradient(135deg,#bae6fd,#2563eb); border:5px solid #475569; box-shadow:inset 0 0 15px rgba(255,255,255,.55); }\n.ld-building-window.w1 { left:11%; }.ld-building-window.w2 { right:11%; }\n.ld-building-bay { position:absolute; bottom:8px; width:25%; height:65px; background:linear-gradient(#e2e8f0,#94a3b8); border:4px solid #475569; border-radius:4px 4px 0 0; display:flex;align-items:center;justify-content:center;font-size:30px; }\n.ld-building-bay.b1 { left:3%; }.ld-building-bay.b2 { right:3%; }\n.ld-building-ground { position:absolute; left:-6%; right:-6%; bottom:-16px; height:30px; background:linear-gradient(#64748b,#334155); transform:skewX(-35deg) translateZ(-30px); box-shadow:0 12px 0 rgba(15,23,42,.22); }\n.ld-3d-shadow { position:absolute; left:12%; right:10%; bottom:25px; height:35px; background:rgba(15,23,42,.38); border-radius:50%; filter:blur(12px); transform:rotateX(65deg); }\n.ld-3d-badge { position:absolute; right:2%; top:28px; background:rgba(15,23,42,.88); color:#fff; border:1px solid rgba(255,255,255,.25); padding:10px 14px; border-radius:12px; box-shadow:0 14px 30px rgba(15,23,42,.28); transform:translateZ(100px); display:flex; flex-direction:column; gap:2px; font-size:11px; }\n.ld-3d-badge span { color:#cbd5e1; font-size:9px; }\n@media(max-width:640px){.ld-3d-scene{height:290px;transform:scale(.82) rotateY(-5deg)}.ld-hero-3d{min-height:330px}.ld-building-sign{font-size:8px}.ld-building-bay{font-size:20px}}\n
/* ===== PERBAIKAN: TAMPILKAN FOTO GEDUNG ASLI ===== */
/* Elemen 3D lama disembunyikan karena dapat menutupi foto gedung. */
.ld-hero-visual {
    background-image: var(--ld-hero-image, url('../img/homepage.jpeg')) !important;
    background-size: cover !important;
    background-position: center center !important;
}
.ld-hero-visual .ld-3d-scene,
.ld-hero-visual .ld-3d-badge,
.ld-hero-visual .ld-3d-shadow {
    display: none !important;
}

/* =========================================================
   RESPONSIVE LANDING PAGE - HP / TABLET
   ========================================================= */
@media (max-width: 900px) {
  .ld-wrap { padding:0 18px; }
  .ld-hero { grid-template-columns:1fr; gap:24px; }
  .ld-hero-visual { min-height:360px; }
  .ld-features { grid-template-columns:repeat(3,1fr); }
  .ld-stats-row { grid-template-columns:repeat(3,1fr); }
  .ld-priority-card,.ld-tagline-card { grid-column:span 3; }
  .ld-sop-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px) {
  body.landing { padding:0; }
  .ld-page-card { border-radius:0; }
  .ld-wrap { padding:0 14px; }
  .ld-nav { gap:10px; align-items:flex-start; }
  .ld-nav .ld-logo-img { height:38px; }
  .ld-nav .ld-logo-text h1 { font-size:12px; }
  .ld-nav .ld-logo-text p { font-size:10px; }
  .ld-nav-actions { gap:6px; }
  .ld-btn { padding:9px 12px; font-size:12px; }
  .ld-nav-actions .ld-btn-red { display:none; }
  .ld-hero { padding:20px 0 30px; }
  .ld-hero h2 { font-size:34px; }
  .ld-hero p.desc { font-size:14px; }
  .ld-hero-actions { display:grid; grid-template-columns:1fr; }
  .ld-hero-actions .ld-btn { justify-content:center; }
  .ld-hero-visual { min-height:280px; border-radius:18px; }
  .ld-float-card.card-unit { display:none; }
  .ld-float-card.card-alert { left:12px; top:12px; max-width:180px; }
  .ld-float-card.card-247 { right:12px; top:12px; padding:9px; }
  .ld-features { grid-template-columns:repeat(2,1fr); padding:18px 12px; gap:14px; }
  .ld-stats-row { grid-template-columns:repeat(2,1fr); gap:10px; }
  .ld-priority-card,.ld-tagline-card { grid-column:span 2; }
  .ld-sop-grid { grid-template-columns:1fr; }
  .ld-section { padding:28px 0; }
  .ld-section-head h2 { font-size:24px; }
  .ld-emergency { padding:22px 16px; }
  .ld-emergency-numbers { width:100%; }
  .ld-emergency-numbers a { flex:1; justify-content:center; font-size:17px; }
  #ldPetaLokasi { height:220px; }
}