/* =====================
   GLOBAL BACKGROUND
===================== */
body {
    font-family: 'Inter', system-ui, sans-serif !important;
    background:
        radial-gradient(circle at top left, #eef2ff 0%, transparent 40%),
        radial-gradient(circle at bottom right, #f1f5f9 0%, transparent 45%),
        #f8fafc !important;
    color: #0f172a !important;
}

/* =====================
   NAVBAR (lebih mahal)
===================== */
nav {
    background: rgba(255,255,255,.75) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0,0,0,.04);
}

nav:hover {
    box-shadow: 0 12px 40px rgba(15,23,42,.08) !important;
}

/* =====================
   HERO SECTION
===================== */
header {
    position: relative;
    background:
        radial-gradient(circle at top, #ffffff 0%, #f1f5f9 70%) !important;
}

header::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 30%, rgba(37,99,235,.12), transparent 45%);
    pointer-events: none;
}

header h1 {
    color: #020617 !important;
}

header h1 span {
    text-shadow: 0 12px 35px rgba(37,99,235,.35);
}

/* Search box */
header .shadow-2xl {
    background: linear-gradient(to bottom, #ffffff, #f8fafc) !important;
    box-shadow:
        0 40px 90px rgba(15,23,42,.12),
        inset 0 1px 0 rgba(255,255,255,.8) !important;
}

/* =====================
   SECTION KATALOG
===================== */
main {
    position: relative;
}

main::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom, transparent, #f8fafc);
}

/* =====================
   PROPERTY CARD
===================== */
#propertyGrid > div {
    background:
        linear-gradient(to bottom, #ffffff, #f8fafc) !important;
    border-radius: 26px !important;
    box-shadow:
        0 20px 40px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
    transition: all .45s ease !important;
}

#propertyGrid > div:hover {
    transform: translateY(-12px) scale(1.01) !important;
    box-shadow:
        0 45px 80px rgba(15,23,42,.16),
        inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* IMAGE */
#propertyGrid img {
    transition: transform .7s ease !important;
}

#propertyGrid > div:hover img {
    transform: scale(1.1) !important;
}

/* BADGE SHM */
#propertyGrid .absolute {
    background: rgba(255,255,255,.85) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 25px rgba(15,23,42,.15);
}

/* =====================
   PRICE & CTA
===================== */
#propertyGrid .text-2xl {
    color: #020617 !important;
}

#propertyGrid .text-blue-600 {
    color: #1d4ed8 !important;
}

/* =====================
   MODAL
===================== */
#modalDetail {
    background: rgba(2,6,23,.75) !important;
    backdrop-filter: blur(10px);
}

#modalBox {
    background:
        linear-gradient(to bottom, #ffffff, #f8fafc) !important;
    box-shadow: 0 60px 120px rgba(2,6,23,.4) !important;
}

/* =====================
   FOOTER
===================== */
footer {
    background:
        radial-gradient(circle at top, rgba(37,99,235,.15), transparent 40%),
        linear-gradient(to top, #020617, #0f172a) !important;
}