* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: 'Roboto', sans-serif; background-color: #f8f9fa;}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    width: 1056px;
}

.breadcrumb {
    background: #dbe7f3;
    padding: 10px 15px;
    border-radius: 8px;
    margin: 0;
    font-size: 20px;
}
.breadcrumb .fas {margin-right: 2px;}

/* 1. Aturan Dasar Bersama (Gunakan lebar utama 95%) */
.container, 
.container-fluid, 
.container-lg, 
.container-md, 
.container-sm, 
.container-xl, 
.container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 95% !important;
    max-width: 95% !important;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 360px) and (max-width: 575px) {
    .container, .container-sm {
        width: 100% !important;
        max-width: 100% !important; /* Aman: Kurang dari 576px */
    }
}

/* 2. Media Queries (Koreksi batas max-width agar lebih kecil dari lebar layar) */
@media (min-width: 576px) {
    .container, .container-sm {
        max-width: 540px; /* Aman: Kurang dari 576px */
    }
}

@media (min-width: 768px) {
    .container, .container-md, .container-sm {
        max-width: 720px; /* Aman: Kurang dari 768px */
    }
}

@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 960px; /* Aman: Kurang dari 992px */
    }
}

/* Catatan: Di bawah ini max-width diubah agar memberikan ruang 95% atau batas maksimal yang aman */
@media (min-width: 1024px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 972px; /* Koreksi: Diturunkan agar tidak mentok 100% di layar 1024px */
    }
}

@media (min-width: 1056px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 1003px; /* Koreksi: Diturunkan (95% dari 1056px) sebagai batas maksimal tertinggi */
    }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-xl, .container-xxl {
        max-width: 1140px; /* Memberikan keleluasaan ekstra pada monitor desktop */
    }
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-xl, .container-xxl {
        max-width: 1320px; /* Ukuran maksimal yang pas agar tidak terlalu melar */
    }
}

/* ========== HEADER VERSI 2 (DENGAN BACKGROUND GAMBAR) ========== */
.koran-header {
    position: relative;
    background-image: linear-gradient(rgba(0, 150, 135, 0.219), rgba(99, 99, 99, 0.75)), var(--bg-header);
    background-size: cover;
    background-position: center 30%;
    text-align: center;padding: 2.5rem 0;
    border-bottom: 3px solid #b91c1c;
    color: white;
}
.header-logo {
    width: 90px;
    height: auto;
    max-width: 100%;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4));
    margin-top: -35px;
}
.header-sekolah .nama {
    font-weight: 700; font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}
.header-sekolah .edisi {
    font-style: italic;
    opacity: 0.9;
    font-size: 12px;
}
/* Responsif: Perkecil logo sedikit saat dibuka di layar HP */
@media (max-width: 767px) {
    .header-logo {
        width: 70px!important;
    }
    .header-sekolah .nama {
        font-size: 26px!important;
    }
    .header-sekolah .edisi {
        font-size: 10px!important;
    }
}
.koran-header h1 {font-family: 'Playfair Display', serif;font-size: 3.5rem;font-weight: 900;letter-spacing: -1px;margin-bottom: 0;text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);}
.koran-header p {font-family: 'Playfair Display', serif;text-transform: uppercase;letter-spacing: 3px;font-size: 0.8rem;margin-top: 8px;color: #ffd966;font-weight: 500;}
.koran-header .header-date {font-size: 0.8rem;margin-top: 10px;margin-bottom: 20px;color: #ddd;border-top: 1px solid rgba(255, 255, 255, 0.3);display: inline-block;padding-top: 8px;}

/* ========== RUNNING TEXT (VERSI 2 - BARIS KE 2) ========== */
.running-text {background-color: #1e293b;color: #facc15;padding: 8px 0;font-size: 0.85rem;overflow: hidden;white-space: nowrap;border-bottom: 1px solid #334155;}
.running-text marquee {font-weight: 500;}
.running-text i {margin-right: 10px;margin-left: 20px;color: #facc15;}

/* ========== MENU BAR VERSI 2 ========== */
.nav-koran {background: #0f172a;color: white;padding: 0.7rem 0;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);position: sticky;top: 0;z-index: 1000;}
.nav-koran a {
    color: #f1f5f9;
    text-decoration: none;
    margin: 0 4px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    transition: 0.2s;
    padding: 4px 8px;
    border: 1px solid #4a4a4a;
    border-radius: 25px;
}
.nav-koran a:hover,.nav-koran a.active {color: #facc15;border-bottom: 2px solid #facc15;padding-bottom: 4px; background: #3F51B5;}

/* ========== KONTEN VERSI 0 (HERO SLIDER + GRID + SIDEBAR) ========== */
.hero-slider {margin-bottom: 2rem;margin-top: 1.5rem;}
.swiper-slide {position: relative;border-radius: 20px;overflow: hidden;height: 450px;}
.slide-img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;}
.swiper-slide:hover .slide-img {transform: scale(1.03);}
.slide-caption {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);color: white;padding: 2rem 2rem 1.5rem;}
.slide-caption .badge-date {font-size: 0.8rem;background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(4px);display: inline-block;padding: 0.25rem 0.75rem;border-radius: 30px;margin-bottom: 0.75rem;}
.slide-caption h3 {font-size: 1.75rem;font-weight: 700;}

/* Section title */
.section-title {position: relative;font-weight: 700;margin-bottom: 1.5rem;padding-bottom: 0.75rem;border-bottom: 3px solid #b91c1c;display: inline-block;}

/* Berita Grid Card */
.news-card {border: none;border-radius: 18px;overflow: hidden;transition: all 0.3s ease;background: white;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);margin-bottom: 2.5rem;height: 500px;max-height: 500px;}
.news-card:hover {transform: translateY(-5px);box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);}
.news-img {height: 200px;object-fit: cover;width: 100%;}
.card-body {padding: 1.25rem;}
.card-title {font-size: 16px;font-weight: 700;margin-bottom: 0.5rem;}
.card-text {color: #6c757d;font-size: 0.9rem;}
.meta-info {font-size: 0.75rem;color: #adb5bd;margin-top: 0.75rem;}

/* Sidebar */
.sidebar-card {background: white;border-radius: 20px;padding: 1.2rem;box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);margin-bottom: 2rem;border: 1px solid rgba(0, 0, 0, 0.05);}
.sidebar-title {font-weight: 700;border-left: 4px solid #b91c1c;padding-left: 12px;margin-bottom: 1rem;}
.popular-item {display: flex;gap: 12px;margin-bottom: 1rem;align-items: center;}
.popular-img {width: 70px;height: 70px;object-fit: cover;border-radius: 12px;}
.popular-content h6 {font-size: 0.9rem;font-weight: 700;margin-bottom: 4px;line-height: 1.3;}
.popular-views {font-size: 0.7rem;color: #6c757d;}
.category-badge {display: flex;justify-content: space-between;align-items: center;padding: 8px 0;border-bottom: 1px solid #efefef;}
.category-badge:last-child {border-bottom: 0;}
.cat-name {font-weight: 500;}
.cat-count {background: #e9ecef;padding: 2px 8px;border-radius: 40px;font-size: 0.75rem;font-weight: 600;}

/* Footer (gabungan gaya) */
.footer {background-color: #0f172a;color: #ccc;padding: 3rem 0 1.5rem;margin-top: 3rem;border-top: 3px solid #b91c1c;}
.footer a {color: #ddd;text-decoration: none;}
.footer a:hover {color: #facc15;}
.social-icons a {font-size: 1.4rem;margin-right: 1rem;color: #aaa;}

@media (min-width: 360px) and (max-width: 767px) {
    .koran-header {padding: 1.5rem 0 !important;}
    .news-card {margin-bottom: 1rem;height: auto;max-height: 450px;}
}

@media (max-width: 768px) {
    .swiper-slide {height: 300px;}
    .slide-caption h3 {font-size: 1.2rem;}
    .slide-caption {padding: 1rem;}
    .koran-header h1 {font-size: 2rem;}
    .nav-koran a {margin: 0 0.6rem;font-size: 0.7rem;}
    .card-body {padding: 0.75rem !important;}
}

/* Styling form pencarian di header */
.header-search .input-group {box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}
.header-search input {border: none;padding: 12px 20px;}
.header-search button {background: #c0392b;border: none;padding: 12px 24px;}
.header-search button:hover {background: #a93226;}

/* Menu search */
.menu-search input {background: rgba(255, 255, 255, 0.2);border: 1px solid rgba(255, 255, 255, 0.3);color: white;}
.menu-search input::placeholder {color: rgba(255, 255, 255, 0.7);}
.menu-search input:focus {background: white;color: #333;}

/* Sidebar search widget */.sidebar-card .btn-primary {background: #2c3e50;border: none;}
.sidebar-card .btn-primary:hover {background: #1a252f;}

/* ========== STYLE UNTUK DETAIL BERITA ========== */
.single-post {background: #fff;padding: 30px;border-radius: 20px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);margin-bottom: 30px;border: 1px solid rgb(0 0 0 / 8%);}
.post-title {font-size: 32px;font-weight: 700;margin-bottom: 20px;color: #0f172a;font-family: 'Playfair Display', serif;}
.post-meta {padding-bottom: 15px;margin-bottom: 20px;border-bottom: 1px solid #eee;}
.post-meta ul li {margin-right: 15px;color: #666;}
.post-meta .list-inline .list-inline-item {font-size: 14px;}
.post-image {margin-bottom: 25px;}
.post-image img {width: 100%;border-radius: 16px;}
.post-content {line-height: 1.8;font-size: 16px;color: #444;}
.post-content img {max-width: 100%;height: auto;}
.post-category-tag {margin-top: 30px;padding-top: 15px;border-top: 1px solid #eee;}
.share {border: 1px solid #e3e3e3;padding: 4px 10px;border-radius: 25px;}
.share-buttons .btn {
    width: 30px;
    height: 30px;
    padding: 0;
    line-height: 30px;
    border-radius: 50%;
    margin-left: 0px;
}
.btn-facebook {background: #3b5998;color: #fff;}
.btn-twitter {background: #1da1f2;color: #fff;}
.btn-whatsapp {background: #25d366;color: #fff;}
.btn-telegram {background: #0088cc;color: #fff;}
.related-card {background: white;border-radius: 16px;overflow: hidden;margin-bottom: 20px;transition: transform 0.3s ease;border: 1px solid rgb(0 0 0 / 8%);height: 300px;max-height: 300px;}
.related-card:hover {transform: translateY(-3px);}
.related-img img {width: 100%;height: 150px;object-fit: cover;}
.related-body {padding: 15px;}
.related-title {font-size: 16px;margin-bottom: 10px;}
.related-title a {color: #0f172a;text-decoration: none;font-weight: 600;}
.related-title a:hover {color: #b91c1c;}

@media (max-width: 768px) {
    .related-card {height: 250px;margin-bottom: 15px;}
}