/* ====================================
   WEBSITE UDD PMI KAB. PEKALONGAN
==================================== */

body{
    font-family:'Poppins',sans-serif;
    background:#f8f9fa;
    color:#333;
}

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

.topbar{
    background:#c62828;
    color:#fff;
    padding:8px 0;
    font-size:14px;
}

.topbar a{
    color:#fff;
    text-decoration:none;
}

/* ======================
   NAVBAR
====================== */

.navbar{
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}

.navbar-brand img{
    height:60px;
}

.nav-link{
    font-weight:500;
}

/* ======================
   HERO BANNER
====================== */

.hero{
    position:relative;
}

.hero img{
    width:100%;
    height:500px;
    object-fit:cover;
}

.hero-caption{
    position:absolute;
    top:50%;
    left:10%;
    transform:translateY(-50%);
    color:white;
}

.hero-caption h1{
    font-size:48px;
    font-weight:700;
}

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

.card{
    border:none;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.card img{
    height:220px;
    object-fit:cover;
}

/* ======================
   STATISTIK
====================== */

.stat-box{
    background:white;
    padding:25px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.stat-number{
    font-size:38px;
    font-weight:bold;
    color:#dc3545;
}

/* ======================
   STOK DARAH
====================== */

.stok-card{
    text-align:center;
    color:white;
    border-radius:15px;
    padding:20px;
}

.stok-a{
    background:#dc3545;
}

.stok-b{
    background:#0d6efd;
}

.stok-ab{
    background:#198754;
}

.stok-o{
    background:#212529;
}

.stok-value{
    font-size:36px;
    font-weight:bold;
}

/* ======================
   BERITA
====================== */

.berita-card img{
    height:250px;
}

.berita-card h5{
    font-weight:600;
}

/* ======================
   GALERI
====================== */

.gallery-item{
    overflow:hidden;
    border-radius:12px;
}

.gallery-item img{
    transition:.3s;
}

.gallery-item:hover img{
    transform:scale(1.05);
}

/* ======================
   WHATSAPP FLOATING
====================== */

.whatsapp-float{
    position:fixed;
    right:25px;
    bottom:25px;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#25d366;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-size:32px;
    z-index:999;
    box-shadow:0 5px 20px rgba(0,0,0,.3);
}

/* ======================
   FOOTER
====================== */

.footer{
    background:#b71c1c;
    color:white;
    padding:40px 0;
}

.footer a{
    color:white;
    text-decoration:none;
}

/* ======================
   RESPONSIVE
====================== */
.stok-cell{
    display:block;
    padding:12px 8px;
    border-radius:6px;
    font-weight:bold;
    transition:.2s;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.stok-cell:hover{
    transform:scale(1.03);
}


@media(max-width:768px){

    .hero img{
        height:250px;
    }

    .hero-caption h1{
        font-size:26px;
    }

    .stat-number{
        font-size:28px;
    }
html {
    scroll-behavior: smooth;
}
}