/* =====================================================================
   Portal Investasi Muna Barat — gaya tambahan (tanpa build).
   Utilitas utama memakai Tailwind CDN; file ini hanya untuk hal yang
   tidak praktis ditulis sebagai kelas Tailwind.
   ===================================================================== */

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; }

/* Fokus keyboard yang jelas */
:focus-visible { outline: 2px solid #E8B84C; outline-offset: 2px; border-radius: 6px; }

/* Scroll horizontal tanpa scrollbar (chip kategori, carousel) */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Safe area iPhone untuk bottom navigation */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
.mobile-nav-offset { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { .mobile-nav-offset { padding-bottom: 0; } }

/* Latar hero tanpa foto: gradasi laut + pola kontur */
.hero-ocean {
    background:
        radial-gradient(1200px 500px at 85% 10%, rgba(22, 115, 75, .35), transparent 60%),
        radial-gradient(900px 600px at 10% 100%, rgba(12, 74, 120, .9), transparent 60%),
        linear-gradient(135deg, #061F36 0%, #082B49 35%, #0C4A78 70%, #0E5E6F 100%);
}
.hero-contour {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.2'%3E%3Cpath d='M-50 120 C 80 60 180 180 300 120 S 520 60 650 130'/%3E%3Cpath d='M-50 170 C 80 110 180 230 300 170 S 520 110 650 180'/%3E%3Cpath d='M-50 220 C 80 160 180 280 300 220 S 520 160 650 230'/%3E%3Cpath d='M-50 270 C 80 210 180 330 300 270 S 520 210 650 280'/%3E%3Cpath d='M-50 320 C 80 260 180 380 300 320 S 520 260 650 330'/%3E%3Cpath d='M-50 370 C 80 310 180 430 300 370 S 520 310 650 380'/%3E%3Cpath d='M-50 420 C 80 360 180 480 300 420 S 520 360 650 430'/%3E%3Cpath d='M-50 470 C 80 410 180 530 300 470 S 520 410 650 480'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 600px 600px;
}
.hero-photo-overlay {
    background: linear-gradient(90deg, rgba(6, 31, 54, .92) 0%, rgba(8, 43, 73, .72) 45%, rgba(8, 43, 73, .25) 100%),
                linear-gradient(0deg, rgba(6, 31, 54, .65) 0%, transparent 40%);
}

/* Ornamen garis emas di judul section */
.title-accent::after {
    content: ""; display: inline-block; width: 36px; height: 3px; border-radius: 3px;
    background: #E8B84C; margin-left: 14px; vertical-align: middle;
}

/* Kartu gambar fallback sektor */
.sector-fallback { background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 45%), radial-gradient(circle at 80% 90%, rgba(0,0,0,.18), transparent 50%); }

/* Konten artikel / halaman dari editor admin */
.prose-portal { color: #334155; line-height: 1.8; font-size: 1rem; overflow-wrap: anywhere; }
.prose-portal > * + * { margin-top: 1em; }
.prose-portal h2 { font-size: 1.4rem; font-weight: 700; color: #172B45; margin-top: 1.6em; }
.prose-portal h3 { font-size: 1.15rem; font-weight: 700; color: #172B45; margin-top: 1.4em; }
.prose-portal h4 { font-weight: 700; color: #172B45; }
.prose-portal a { color: #0C4A78; text-decoration: underline; text-underline-offset: 3px; }
.prose-portal ul { list-style: disc; padding-left: 1.4em; }
.prose-portal ol { list-style: decimal; padding-left: 1.4em; }
.prose-portal li + li { margin-top: .4em; }
.prose-portal blockquote { border-left: 4px solid #E8B84C; padding: .4em 1em; background: #FFFBEB; border-radius: 0 12px 12px 0; color: #172B45; }
.prose-portal img { border-radius: 14px; max-width: 100%; height: auto; }
.prose-portal table { width: 100%; border-collapse: collapse; font-size: .92rem; display: block; overflow-x: auto; }
.prose-portal th, .prose-portal td { border: 1px solid #E2E8F0; padding: .5em .75em; text-align: left; }
.prose-portal th { background: #F5F8FC; }
.prose-portal strong { color: #172B45; }

/* ---------- Leaflet ---------- */
.leaflet-container { font-family: inherit; background: #CFE3EE; z-index: 0; }
.leaflet-control-attribution { font-size: 10px; }
.munbar-marker { background: transparent; border: 0; }
.munbar-marker .pin {
    width: 34px; height: 34px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
    color: #fff; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(6, 31, 54, .35); transition: transform .15s ease;
}
.munbar-marker .pin svg { width: 17px; height: 17px; }
.munbar-marker.is-investment .pin { border-radius: 10px; }
.munbar-marker:hover .pin, .munbar-marker.is-active .pin { transform: scale(1.18); }
.munbar-district-label {
    background: rgba(8, 43, 73, .78); color: #fff; border: 0; border-radius: 8px; box-shadow: none;
    font-weight: 600; font-size: 11px; padding: 2px 8px; white-space: nowrap;
}
.munbar-district-label::before { display: none; }
@media (max-width: 640px) {
    .leaflet-tooltip.munbar-district-label { font-size: 9.5px; padding: 1px 5px; border-radius: 6px; }
}
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 10px 30px rgba(6, 31, 54, .25); }
.leaflet-popup-content { margin: 12px 14px; font-size: 13px; }
.leaflet-bar a { width: 34px !important; height: 34px !important; line-height: 34px !important; }

/* Animasi halus */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.animate-fade-up { animation: fadeUp .35s ease both; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Cetak */
@media print { header, footer, nav, .no-print { display: none !important; } }