/* css/style.css */

a {
  text-decoration: none;
}

.podcast-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}

/* Pola slash untuk seluruh bar */
.podcast-section-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(
        45deg,
        #e0e0e0,
        #e0e0e0 2px,
        transparent 2px,
        transparent 6px
    );
    z-index: 0;
    opacity: 0.5;
}

/* Judul dengan background transparan mengikuti pola */
.podcast-section-header h4 {
    z-index: 1;
    background-color: transparent;
    margin: 0;
    padding: 0.25rem 0.5rem;
    font-size: 1.5rem;
}

/* Tombol navigasi tetap di atas */
.podcast-nav-buttons {
    z-index: 1;
}



.lead {
    font-size: 1rem;
}

.headline-main .badge-seksi {
    font-size: 0.8rem;
    padding: 0.5em 0.8em;
    border-radius: 0;
    font-weight: bold;
    position: relative;
    top: -8px; /* Naik 3px, sesuaikan sesuai kebutuhan */
}
h2.headline {
    margin-top: 20px;
}

body {
    /* Ganti font-family default */
    font-family: 'Rubik', 'Inter', sans-serif; /* Fallback ke sans-serif generik */
    font-size: 16px; /* Ukuran font dasar yang baik untuk keterbacaan */
    line-height: 1.6; /* Jarak antar baris yang baik */
    color: #333; /* Warna teks utama */
    position: relative;
    overflow-x: hidden;
}
.dkylb-logo {
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    color: black;
    text-decoration: none;
    margin-top: 20px;
    padding: 0 10px;
    line-height: 1;
}
.dkylb-logo:hover {
    color: black;
    text-decoration: none;
}
.top-header {
    border-bottom: 1px solid #e0e0e0;
	height:80px;
}
.navbar-brand-centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.top-header .btn-header-icon {
    font-size: 1.5rem;
    color: #333;
    padding: 0.25rem 0.5rem;
}
.top-header .btn-header-icon:hover {
    color: #000;
}
.top-header .btn-register {
    font-weight: bold;
}

.main-nav-bar {
    border-bottom: 1px solid #e0e0e0; /* Border utama nav bar tetap ada */
    background-color: white;
}
.main-nav-bar .navbar-nav .nav-link {
    color: #333;
    font-weight: 500;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    position: relative; /* Diperlukan untuk beberapa teknik atau jika ada elemen ::after */
    /* Hapus border-bottom transparan jika ada dari solusi lain */
    /* border-bottom: 3px solid transparent; */ /* HAPUS INI JIKA ADA */
    transition: color 0.2s ease-in-out; /* Transisi warna agar lebih halus */
}

.main-nav-bar .navbar-nav .nav-link.active,
.main-nav-bar .navbar-nav .nav-link:hover {
    color: #000;
    /* GANTI border-bottom dengan box-shadow */
    /* border-bottom: 3px solid #000; */ /* HAPUS INI */
    box-shadow: inset 0 -3px 0 0 #000; /* Garis bawah menggunakan box-shadow inset */
    /* -3px adalah offset vertikal ke atas (karena inset), 0 blur, 0 spread, #000 warna */
}
@media (max-width: 991.98px) {
    .main-nav-bar {
        display: none;
    }
}

/* Sidebar Menu (Slide-in from left) */
.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1050;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.3s;
    padding-top: 60px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    border-right: 1px solid #e0e0e0;
}
.sidebar .closebtn {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    color: #333;
    text-decoration: none;
}
.sidebar .closebtn:hover {
    color: #000;
}
.sidebar-header {
    padding: 15px 25px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 15px;
}
.sidebar-header .dkylb-sidebar-logo {
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    color: black;
    text-decoration: none;
    
    padding: 0 8px;
}
.sidebar .sidebar-search-form {
    padding: 0 25px 15px 25px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 15px;
}
.sidebar .sidebar-search-form .form-control {
    border-radius: 0;
}
.sidebar .sidebar-search-form .btn {
    border-radius: 0;
}
.sidebar a.nav-link, .sidebar .dropdown-toggle {
    padding: 10px 15px 10px 25px;
    text-decoration: none;
    font-size: 1.1rem;
    color: #333;
    display: block;
    transition: 0.2s;
    font-weight: 500;
}
.sidebar a.nav-link:hover, .sidebar .dropdown-toggle:hover {
    color: #000;
    background-color: #f8f9fa;
}
.sidebar .dropdown-menu {
    background-color: #f8f9fa;
    border: none;
    box-shadow: none;
    padding-left: 15px;
    position: static !important;
    float: none !important;
    width: 100% !important;
}
.sidebar .dropdown-item {
    color: #333;
    font-size: 1rem;
    padding: 8px 15px;
}
.sidebar .dropdown-item:hover {
    color: #000;
    background-color: #e9ecef;
}

/* Overlay for when sidebar is open */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1040;
    cursor: pointer;
}

/* News item styles */
.news-item img { width: 100%; height: auto; object-fit: cover; max-height: 200px; }
.news-item .timestamp { font-size: 0.7rem; color: #6c757d; }
.headline-main .badge-live { font-size: 1.2rem; padding: 0.5em 0.8em; border-radius: 0; font-weight: bold; }
.article-title-link { color: #212529; text-decoration: none; font-weight: bold; }
.article-title-link:hover { color: #0056b3; text-decoration: none; }
.right-column-news .news-item { padding-bottom: 0.1rem; margin-bottom: 1rem; border-bottom: 1px solid #eee; }
.right-column-news .news-item:last-child { border-bottom: none; margin-bottom: 0; }

/* Podcast Section */
.podcast-section { margin-top: 1rem; margin-bottom: 1rem; }
.podcast-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.podcast-scroll-container { display: flex; overflow-x: auto; padding-bottom: 1rem; gap: 15px; -ms-overflow-style: none; scrollbar-width: none; }
.podcast-scroll-container::-webkit-scrollbar { display: none; }
.podcast-card { flex: 0 0 auto; width: 180px; background-color: #fff; border-radius: 4px; overflow: hidden; }
.podcast-card .card-img-top-container { position: relative; width: 100%; height: 180px; overflow: hidden; }
.podcast-card .card-img-top { width: 100%; height: 100%; object-fit: cover; }
.podcast-card .card-body { padding: 10px; }
.podcast-card .card-category { font-size: 0.8rem; color: #6c757d; margin-bottom: 0.25rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podcast-card .card-title { font-size: 0.9rem; font-weight: bold; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 5em; }
.podcast-card .card-meta { font-size: 0.8rem; color: #6c757d; display: flex; align-items: center; }
.podcast-card .card-meta .save-icon { margin-right: 5px; cursor: pointer; }
.podcast-nav-buttons button { background-color: #e9ecef; border: 1px solid #ced4da; color: #495057; }

/* Category News Section Styles */
.category-news-section { margin-top: 3rem; }
.category-column .category-header h5 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.5px; }
.category-column .category-header a { text-decoration: none; }
.category-column .category-header i { font-size: 0.7rem; vertical-align: middle; }
.category-column .thick-hr { border-top: 2px solid #333; margin-top: 0.25rem !important; margin-bottom: 1rem !important; }
.category-news-item h6 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.category-news-item .article-title-link u { text-decoration-color: #bbb; }
.category-news-item .text-muted.small { font-size: 0.85rem; line-height: 1.4; }
.category-news-item .timestamp { font-size: 0.75rem; }
.category-news-item img.category-news-image { max-height: 150px; width: 100%; object-fit: cover; margin-bottom: 0.5rem !important; }
.category-column hr.item-divider { border-top: 1px solid #eee; margin-top: 0.75rem; margin-bottom: 0.75rem; }
.category-news-item .play-icon { color: #555; font-size: 0.8em; margin-right: 4px; vertical-align: middle; }
.badge-live-small { font-size: 0.65rem; padding: 0.2em 0.4em; vertical-align: middle; font-weight: bold; }



/* Header Top - Social Icons Replacement */
.top-header .header-social-icons {
    display: flex;
    align-items: center;
}
.top-header .header-social-icons a {
    color: #333;
    font-size: 1.3rem; /* Ukuran ikon sosial di header */
    margin-left: 15px; /* Jarak antar ikon */
    transition: color 0.2s;
}
.top-header .header-social-icons a:hover {
    color: #000;
}
/* Pastikan ikon search tidak terlalu rapat jika ada elemen baru di kanannya */
.top-header .d-flex.align-items-center > button.btn-header-icon:last-of-type {
    margin-right: 10px; /* Tambah margin jika diperlukan */
}


/* Footer Styles  */

.site-footer {
        background-color: #f0f0f0; /* Warna latar footer jika diinginkan */
        padding-top: 20px; /* Padding atas untuk keseluruhan footer */
        padding-bottom: 20px; /* Padding bawah untuk keseluruhan footer */
    }

    .site-footer .container {
        max-width: 1200px; /* Atau lebar container standar Anda */
        margin: 0 auto;
        padding-left: 15px; /* Padding horizontal untuk container */
        padding-right: 15px;
    }

    .footer-top-row {
        display: flex;
        justify-content: space-between; /* Logo kiri, menu tengah (melalui flex-grow), sosial kanan */
        align-items: center;          /* Sejajarkan item secara vertikal di tengah */
        flex-wrap: wrap;              /* Izinkan wrapping jika layar terlalu sempit */
        gap: 20px;                    /* Spasi antar item jika terjadi wrapping */
        margin-bottom: 25px;          /* Spasi sebelum konten bawah footer */
        padding-bottom: 20px;         /* Padding bawah untuk baris atas */
        border-bottom: 1px solid #dcdcdc; /* Garis pemisah tipis */
    }

    .footer-logo-container {
        flex-shrink: 0; /* Mencegah logo menyusut */
    }

    .footer-logo {
        display: inline-block;
        padding: 8px 15px;
        font-size: 1.8em; /* Sesuaikan ukuran font sesuai preferensi */
        font-weight: bold;
        text-decoration: none;
        color: black;
        letter-spacing: 2px; /* Spasi antar huruf B B C */
    }

    /* Menargetkan output dari renderFooterMenu */
    /* Asumsi 1: renderFooterMenu() menghasilkan <ul class="footer-nav-links">...</ul> */
    /* Asumsi 2: renderFooterMenu() menghasilkan <nav><ul class="footer-nav-links">...</ul></nav> */
    
    /* Styling untuk elemen pembungkus menu (baik itu UL langsung atau NAV) */
    .footer-top-row > .footer-nav-links, /* Jika UL adalah anak langsung */
    .footer-top-row > nav {             /* Jika NAV adalah anak langsung */
        flex-grow: 1;                 /* Menu mengambil ruang yang tersedia di tengah */
        display: flex;                /* Untuk menengahkan UL di dalam NAV jika ada NAV */
        justify-content: center;      /* Menengahkan konten menu (UL) */
    }

    /* Styling untuk UL menu itu sendiri */
    ul.footer-nav-links {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;      /* Menengahkan item LI di dalam UL */
        align-items: center;
        flex-wrap: wrap;              /* Izinkan item menu untuk wrap */
    }

    ul.footer-nav-links li {
        margin: 5px 10px; /* Spasi antar item menu */
    }

    ul.footer-nav-links li a,
    ul.footer-nav-links li span.text-muted { /* Styling untuk link menu dan teks placeholder */
        text-decoration: none;
        color: #333; /* Warna link menu */
        font-size: 0.95em; /* Ukuran font link menu */
    }
    ul.footer-nav-links li span.text-muted {
        color: #777; /* Warna untuk teks placeholder */
    }

    .footer-social-icons {
        flex-shrink: 0; /* Mencegah ikon sosial menyusut */
        display: flex;
        align-items: center;
    }

    .footer-social-icons a {
        margin-left: 12px; /* Spasi antar ikon sosial */
        color: #333;       /* Warna ikon */
        font-size: 1.5em;   /* Ukuran ikon */
        text-decoration: none;
    }

    .footer-social-icons a:first-child {
        margin-left: 0;
    }

    .footer-bottom-content {
        text-align: center;
        font-size: 0.85em; /* Font sedikit lebih kecil untuk kepadatan */
        color: #555;
    }

    .copyright-text {
        margin-bottom: 10px;
    }

    .footer-bottom-links a {
        margin: 0 7px; /* Spasi antar link di bagian bawah */
        text-decoration: none;
        color: #555;
        display: inline-block; /* Memastikan margin vertikal berfungsi jika wrap */
        margin-bottom: 5px; /* Spasi jika link wrap ke baris baru */
    }

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

    /* Penyesuaian Responsif Sederhana */
    @media (max-width: 768px) {
        .footer-top-row {
            flex-direction: column; /* Susun item secara vertikal di layar kecil */
            align-items: center;    /* Pusatkan semua item */
            text-align: center;
        }

        .footer-logo-container,
        .footer-top-row > .footer-nav-links, /* atau .footer-top-row > nav */
        .footer-top-row > nav,
        .footer-social-icons {
            margin-bottom: 20px; /* Spasi antar blok saat vertikal */
            width: 100%;         /* Ambil lebar penuh agar penengahannya konsisten */
        }
        
        .footer-social-icons {
            justify-content: center; /* Pusatkan ikon sosial dalam containernya */
            margin-bottom: 0; /* Hapus margin bawah jika ini elemen terakhir di top-row */
        }
        .footer-social-icons a {
            margin: 0 10px; /* Sesuaikan spasi ikon di mobile */
        }
    }