/* =====================================================
   ROOT
===================================================== */

:root{
    --primary:#2563EB;
    --secondary:#14B8A6;
    --bg:#F8FAFC;
    --text:#334155;
    --muted:#64748B;
    --white:#FFFFFF;

    --radius:20px;
    --shadow:0 10px 25px rgba(0,0,0,.08);
}

/* =====================================================
   GLOBAL
===================================================== */

body{
    font-family:'Segoe UI',sans-serif;
    background:var(--bg);
    color:var(--text);
    padding-bottom:90px;
}

/* =====================================================
   HEADER
===================================================== */

.top-navbar{
    background:linear-gradient(135deg,#14b8a6,#3b82f6);
    padding:18px 0;
    border-radius:0 0 25px 25px;
    box-shadow:var(--shadow);
}

.brand-wrapper{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo-circle{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#fff;
    padding:5px;
}

.brand-text h3{
    color:#fff;
    font-size:20px;
    font-weight:800;
    margin:0;
}

.brand-text span{
    color:#fff;
    font-size:12px;
    opacity:.9;
}

.menu-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:10px;
    background:#fff;
    color:var(--primary);
}

/* =====================================================
   NAV DESKTOP
===================================================== */

.main-nav{
    margin:15px 0 20px;
}

.desktop-nav-wrapper{
    background:#fff;
    border-radius:15px;
    box-shadow:var(--shadow);
    padding:10px;
    display:flex;
    justify-content:center;
}

.desktop-menu{
    list-style:none;
    display:flex;
    gap:10px;
    margin:0;
    padding:0;
}

.desktop-menu a{
    text-decoration:none;
    color:var(--text);
    font-weight:600;
    padding:10px 14px;
    border-radius:10px;
}

.desktop-menu a:hover{
    background:#eff6ff;
    color:var(--primary);
}

/* =====================================================
   HERO INFO CARD (SEJAJAR NAVBAR STYLE)
===================================================== */
/* =====================================================
   HERO INFO CARD = STYLE SAMA SEPERTI NAVBAR
===================================================== */

.hero-info-card.navbar-card{
    width:100%;
    background:#fff;
    border-radius:18px;
    padding:16px 24px;
    margin:20px 0;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

/* isi text center clean */
.hero-info-card .info-left{
    text-align:center;
}

/* judul seperti navbar brand */
.hero-info-card h2{
    font-size:18px;
    font-weight:800;
    margin:0;
    color:#0f172a;
}

/* subtitle kecil seperti navbar desc */
.hero-info-card p{
    font-size:13px;
    margin:5px 0 0;
    color:#64748b;
}

/* =====================================================
   DIRECTORY CARD
===================================================== */

.directory-card{
    color:#fff;
    border-radius:18px;
    padding:24px;
    box-shadow:var(--shadow);
    height:100%;
    transition:.3s ease;
    display:block;
    text-decoration:none;
    position:relative;
    overflow:hidden;
}

.directory-card:hover{
    transform:translateY(-6px);
    color:#fff;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.directory-card i{
    font-size:32px;
    margin-bottom:12px;
    display:block;
}

.directory-card h4{
    font-size:18px;
    font-weight:800;
    margin-bottom:8px;
}

.directory-card p{
    font-size:13px;
    margin:0;
    opacity:.95;
}

/* =====================
   PELAPORAN - MERAH
===================== */

.report-card{
    background:linear-gradient(
        135deg,
        #dc2626,
        #ef4444
    );
}

/* =====================
   APRESIASI - KUNING
===================== */

.apresiasi-card{
    background:linear-gradient(
        135deg,
        #eab308,
        #facc15
    );
}

/* =====================
   BERITA - HIJAU
===================== */

.direktori-card{
    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );
}

/* =====================
   ICON WATERMARK
===================== */

.directory-card::after{
    content:"";
    position:absolute;
    right:-20px;
    bottom:-20px;
    width:90px;
    height:90px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
}
/* =====================
   SPPG - BIRU
===================== */

.sppg-card{
    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );
}
/* =====================================================
   OFFCANVAS
===================================================== */

.offcanvas-header{
    background:linear-gradient(135deg,#14b8a6,#3b82f6);
    color:#fff;
}

.mobile-menu{
    list-style:none;
    padding:0;
}

.mobile-menu a{
    display:block;
    padding:14px;
    text-decoration:none;
    color:var(--text);
    border-bottom:1px solid #eee;
    font-weight:600;
}

/* =====================================================
   BOTTOM NAV
===================================================== */

.bottom-nav{
    position:fixed;
    bottom:15px;
    left:15px;
    right:15px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    padding:8px 0;
    z-index:999;
}

.bottom-nav a{
    text-decoration:none;
    color:var(--muted);
    font-size:12px;
}

.bottom-nav i{
    font-size:20px;
    display:block;
}

/* =====================================================
   HERO SLIDER RESPONSIVE
   TV + DESKTOP + TABLET + MOBILE
===================================================== */

.hero-slider-wrapper{
    width:100%;
    max-width:100%;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

/* Bootstrap Carousel */
.hero-slider,
.hero-slider .carousel-inner,
.hero-slider .carousel-item{
    width:100%;
}

/* Gambar mengikuti ukuran layar */
.slider-img{
    width:100%;
    height:auto;
    display:block;
}

/* Indikator */
.hero-slider .carousel-indicators{
    bottom:10px;
    margin-bottom:0;
}

/* =====================================================
   RESPONSIVE NAVBAR + SLIDER
===================================================== */

/* =========================
   TV / MONITOR BESAR
========================= */
@media (min-width:1921px){

    .hero-slider-wrapper{
        max-width:1800px;
        margin:auto;
    }

}

/* =========================
   DESKTOP
========================= */
@media (min-width:1200px) and (max-width:1920px){

    .hero-slider-wrapper{
        width:100%;
    }

}

/* =========================
   LAPTOP
========================= */
@media (min-width:992px) and (max-width:1199px){

    .hero-slider-wrapper{
        border-radius:16px;
    }

}

/* =========================
   TABLET & MOBILE
========================= */
@media (max-width:991.98px){

    /* Sembunyikan navbar desktop */
    .main-nav{
        display:none;
    }

    /* Tampilkan hamburger */
    .menu-btn{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    /* Jarak header ke slider */
    .hero-slider-wrapper{
        margin-top:15px;
        border-radius:14px;
    }

}

/* =========================
   MOBILE
========================= */
@media (max-width:767px){

    .hero-slider-wrapper{
        margin-top:15px;
        border-radius:12px;
    }

    .hero-slider .carousel-indicators{
        bottom:5px;
        margin-bottom:0;
    }

    .hero-slider .carousel-indicators button{
        width:8px;
        height:8px;
        border-radius:50%;
    }

}

/* =========================
   MOBILE KECIL
========================= */
@media (max-width:480px){

    .hero-slider-wrapper{
        margin-top:12px;
        border-radius:10px;
    }

}

/* =========================
   DESKTOP NAVIGATION
========================= */
@media (min-width:992px){

    /* Hilangkan hamburger */
    .menu-btn{
        display:none !important;
    }

    /* Pastikan navbar tampil */
    .main-nav{
        display:block;
    }

}

.center-btn{
    width:55px;
    height:55px;
    background:#22c55e;
    color:#fff !important;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    margin:-25px auto 0;

    box-shadow:0 8px 20px rgba(34,197,94,.35);

    transition:.3s;
}

.center-btn i{
    font-size:24px;
}

.center-btn:hover{
    background:#16a34a;
    color:#fff;
    transform:translateY(-3px);
}

/* CARD SPPG */
.directory-card.big{
    padding:28px;
    position:relative;
}

/* Tombol di pojok kanan atas */
.directory-btn{
    position:absolute;
    top:18px;
    right:18px;

    width:50px;
    height:50px;

    background:#fff;
    color:var(--primary);

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

    transition:.3s;
}

.directory-btn:hover{
    transform:scale(1.08);
    color:var(--primary);
}

.directory-btn i{
    font-size:22px;
}
.sppg-card{
    display:block;
    position:relative;
    color:#fff;
    text-decoration:none;
}

.sppg-card:hover{
    color:#fff;
}

.directory-btn{
    position:absolute;
    top:18px;
    right:18px;

    width:50px;
    height:50px;

    background:#fff;
    color:#2563eb;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 5px 15px rgba(0,0,0,.15);
}