/* public/style/style.css */

.navbar {
    background-color: #1a3c57;
    position: fixed; /* Tetap di posisi atas */
    top: 0;
    left: 0;
    width: 100%;
    /* background-color: #333; */
    /* color: white; */
    padding: 10px 20px;
    z-index: 1000; /* Supaya di atas elemen lain */
    
}

.navbar-brand, 
.nav-link {
    color: #fff !important;
}


.navbar-nav .nav-link {
    font-weight: 500;
    color: #ffffff !important;
    padding: 8px 15px;
    transition: 0.3s;
}

.navbar-nav .nav-link:hover {
    color: #ff4d4d !important;
}

.navbar-nav .nav-link.active {
    color: #ff4d4d !important;
    border-bottom: 2px solid #ff4d4d;
}

body {
    background-color: #f8f9fa;
    font-family: Arial, sans-serif;
    padding-top: 40px; /* sesuaikan dengan tinggi navbar */
}


.hero {
    background-color: #e9ecef;
    padding: 50px 20px;
    text-align: center;
}

.hero img {
    max-width: 120px;
    margin-bottom: 15px;
}

.section-title {
    border-left: 5px solid #1a3c57;
    padding-left: 10px;
    margin-bottom: 20px;
    font-weight: bold;
}

.berita-card img {
    max-height: 180px;
    object-fit: cover;
}

.site-footer {
    background-color: #1a3c57;
    color: white;
    padding: 40px 20px 20px;
    font-family: Arial, sans-serif;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1100px;
    margin: auto;
}

.footer-section {
    flex: 1 1 250px;
    margin: 10px;
}

.footer-section h4 {
    border-bottom: 2px solid #fff;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-size: 16px;
}

.footer-section p,
.footer-section a {
    font-size: 14px;
    line-height: 1.6;
    color: white;
    text-decoration: none;
}

.footer-section a:hover {
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.3);
    font-size: 13px;
}


.social-icons a {
        text-decoration: none; /* hilangkan garis bawah */
        font-size: 1.5rem;     /* ukuran ikon */
    }

    .social-icons a:hover {
        color: #ff0000; /* contoh: merah saat hover, bisa disesuaikan */
    }

/* Responsive */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
}


.carousel-item img {
            width: 100%;        /* lebar mengikuti layar penuh */
            height: 600px;      /* tinggi tetap 600px */
            /* object-fit: contain; /* tampilkan gambar penuh tanpa terpotong */
            background-color: #000; /* warna latar bila ada ruang kosong */
            object-fit: cover;
        }
        .carousel-caption {
            background: rgba(0, 0, 0, 0.4);
            padding: 20px;
            border-radius: 8px;
        }
        .carousel-caption h1 {
            font-size: 2rem;
            font-weight: bold;
        }
        .carousel-caption p {
            font-size: 1rem;
        }

body-menu {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #fff;
        }

        .container-menu {
            max-width: 1100px;
            margin: auto;
            padding: 40px 20px;
        }

        .menu-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .menu-item {
            background-color: #d32f2f;
            color: white;
            text-align: center;
            padding: 30px 20px;
            border-radius: 8px;
            transition: background-color 0.3s ease;
            text-decoration: none;
            display: block;
        }

        .menu-item:hover {
            background-color: #b71c1c;
        }

        .menu-item i {
            font-size: 40px;
            margin-bottom: 15px;
        }

        .menu-item h3 {
            margin: 10px 0;
        }

        .menu-item p {
            font-size: 14px;
            color: #f5f5f5;
        }

/* Overlay */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

/* Popup Box */
.popup-box-blanko {
    background: white;
    border-radius: 15px;
    max-width: 400px;
    width: 90%;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    animation: fadeIn 0.3s ease-in-out;
    font-family: Arial, sans-serif;
}

/* Header */
.popup-header {
    background: #eaf3ef;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    color: #1a3c57;
}

.popup-header button {
    background: transparent;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
}

.popup-header button:hover {
    color: #d9534f;
}

/* Content */
.popup-content {
    background-image: radial-gradient(#cfcfcf 1px, transparent 1px);
    background-size: 20px 20px;
    padding: 20px;
    text-align: center;
}

.popup-item p {
    font-size: 14px;
    margin: 0;
    color: #333;
}

.popup-item h1 {
    font-size: 32px;
    color: #1a3c57;
    margin: 8px 0;
}

hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 15px 0;
}

/* Animasi */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* View Layanan */
.service-card {
            border: 1px solid #eee;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: 0.3s;
        }

        .service-card:hover {
            background-color: #f8f9fa;
            transform: translateY(-5px);
        }

        .service-icon {
            font-size: 40px;
            color: #d32f2f;
            margin-bottom: 15px;
        }

/* pagination berita */
.news-card img {
    height:220px;
    object-fit:cover}
    .pagination-min{gap:.5rem
    }
    .pagination-min .btn {
        border-radius:.5rem;
        padding:.5rem .85rem
    }
    .pagination-min .btn.active {
        background:#111;
        border-color:#111
    }

/* Style Rating */
.rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
}
.rating input { display: none; }
.rating label {
  font-size: 2rem;
  color: #ddd;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}
.rating input:checked ~ label,
.rating label:hover,
.rating label:hover ~ label {
  color: #ffc107;
}

/* SKM */
.rating-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .rating-container label {
        flex: 1 1 calc(50% - 10px);
        /* default: 2 per baris di mobile */
        text-align: center;
        cursor: pointer;
    }

    .rating-option {
        padding: 15px;
        border-radius: 10px;
        font-weight: bold;
        transition: transform 0.2s ease;
    }

    .rating-option:hover {
        transform: scale(1.05);
    }

    /* Saat radio dipilih */
    input[type="radio"]:checked+.rating-option {
        border: 3px solid #198754;
        box-shadow: 0 0 8px rgba(25, 135, 84, 0.5);
    }

    /* Versi tablet/desktop */
    @media (min-width: 768px) {
        .rating-container label {
            flex: 1 1 calc(20% - 10px);
            /* 5 per baris */
        }
    }

/* Dokumen */
body {
            background-color: #f8fdf5;
        }

        .dokumen-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }

        .dokumen-left {
            color: #c7a300;
            font-weight: 500;
            min-width: 180px;
        }

        .dokumen-right {
            flex-grow: 1;
            color: #333;
        }

        .download-btn {
            color: #f1c40f;
            text-decoration: none;
            font-size: 14px;
        }

        .download-btn:hover {
            color: #d4ac0d;
        }