/* Global Dark Theme (eye-friendly deep violet) */
body {
    background-color: #111827; /* Slate dark, soft & relaxing */
    color: #e5e7eb; /* Light gray text, high readability */
    font-family: 'Arial', sans-serif;
}
a {
    color: #7c3aed; /* Deep violet accent */
    text-decoration: none;
}
a:hover {
    color: #a855f7; /* Lighter violet hover */
}

/* Navbar Styles */
.navbar {
    background-color: #111827 !important;
    border-bottom: 2px solid #7c3aed !important;
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.1); /* Soft violet shadow */
}
.navbar-brand {
    font-weight: bold;
    letter-spacing: 1px;
    color: #7c3aed !important;
}
.navbar-brand:hover {
    color: #a855f7 !important;
}

/* Hamburger Icon (deep violet) */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28124, 58, 237, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler {
    border: 1px solid #7c3aed;
    border-radius: 6px; /* Medium rounded */
    padding: 0.375rem 0.5rem;
    transition: all 0.2s ease;
}
.navbar-toggler:hover {
    background-color: rgba(124, 58, 237, 0.1);
    border-color: #a855f7;
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.15);
}

/* Search Integrated (bingkai lebih jelas: border tebal di input) */
.navbar .search-integrated {
    border: none !important; /* Hapus bingkai luar total */
    background-color: transparent !important; /* No bg, nyatu dengan navbar */
    overflow: hidden; /* Biar tombol nyatu */
    transition: all 0.2s ease;
}
.navbar .search-integrated:focus-within {
    box-shadow: none; /* No focus shadow kalo ga mau, atau tambah subtle kalo perlu */
}
.navbar .form-control {
    background-color: transparent !important;
    border: 2px solid #374151 !important; /* Bingkai jelas: border tebal 2px gray, kontras sama bg */
    color: #e5e7eb;
    border-radius: 6px 0 0 6px; /* Rounded kiri aja, biar nyatu dengan tombol */
    padding: 0.5rem 1rem; /* Padding standar */
}
.navbar .form-control::placeholder {
    color: #9ca3af; /* Muted gray placeholder */
}
.navbar .form-control:focus {
    border-color: #7c3aed !important; /* Focus cuma di input */
    box-shadow: none;
}

/* Tombol Search Kebungkus (di kanan input, nyatu dengan garis bingkai jelas) */
.navbar .btn-search-integrated {
    background-color: #1f2937 !important; /* Subtle bg biar ga plain text, tapi nyatu */
    border-left: 2px solid #374151 !important; /* Garis nyatu dengan input */
    border-right: 2px solid #374151 !important; /* Garis bingkai kanan tombol: tebal 2px gray biar keliatan jelas sebagai button */
    border-top: none !important;
    border-bottom: none !important; /* No frame atas/bawah biar nyatu vertikal */
    color: #7c3aed;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0 6px 6px 0; /* Rounded kanan aja */
    white-space: nowrap;
    transition: all 0.2s ease;
}
.navbar .btn-search-integrated:hover {
    background-color: #7c3aed !important;
    color: #111827 !important;
    border-left-color: #7c3aed !important;
    border-right-color: #7c3aed !important; /* Hover nyatu juga */
}

/* Mobile: Horizontal, tombol mungil kanan */
@media (max-width: 991.98px) {
    .navbar .search-integrated {
        max-width: 100%; /* Full di mobile */
        margin-bottom: 0; /* No margin bottom */
    }
    .navbar .form-control {
        font-size: 1rem; /* Readable di mobile */
        border: 2px solid #374151 !important; /* Bingkai jelas di mobile juga */
    }
    .navbar .btn-search-integrated {
        min-width: 60px; /* Tombol ga sempit di mobile */
        padding: 0.5rem 0.75rem; /* Lebih mungil */
        border-left: 2px solid #374151 !important; /* Garis nyatu di mobile */
        border-right: 2px solid #374151 !important; /* Garis kanan jelas di mobile */
        background-color: #1f2937 !important; /* Bg subtle di mobile */
    }
}

/* Desktop Prettiness: Lebih lebar & smooth */
@media (min-width: 992px) {
    .navbar form {
        padding: 0 1rem; /* Spacing ekstra sisi */
    }
    .navbar .form-control {
        border: 2px solid #374151 !important; /* Bingkai jelas di desktop */
    }
    .navbar .btn-search-integrated {
        padding: 0.5rem 1.25rem; /* Lebih lega di desktop */
        border-left: 2px solid #374151 !important; /* Garis nyatu di desktop */
        border-right: 2px solid #374151 !important; /* Garis kanan jelas di desktop */
        background-color: #1f2937 !important; /* Bg subtle di desktop */
    }
}

/* Navbar Nav & Collapse */
.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    margin: 0 0.25rem;
    color: #e5e7eb;
    transition: all 0.2s ease;
}
.navbar-nav .nav-link:hover {
    background-color: rgba(124, 58, 237, 0.1);
    color: #a855f7;
}

/* Collapse Menu (mobile panel – ZERO PADDING/MARGIN, no frame/bingkai) */
.navbar-collapse {
    margin-top: 0 !important; /* No margin top */
    margin-bottom: 0 !important; /* No margin bottom */
    padding: 0 !important; /* Zero padding total */
    transition: all 0.3s ease;
}
.navbar-nav .nav-link {
    padding: 0.75rem 1rem !important;
    margin: 0.25rem 0;
    border-radius: 6px;
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
}
.navbar-nav .nav-link:hover {
    border-color: #7c3aed;
    background-color: rgba(124, 58, 237, 0.05);
}

/* Categories Inline Desktop (no dropdown, horizontal list mirip kingbokep.tv) */
@media (min-width: 992px) {
    .categories-nav .nav-item {
        margin: 0 0.5rem; /* Spacing horizontal antara categories */
    }
    .categories-nav .nav-link {
        padding: 0.5rem 0.75rem !important; /* Lebih compact horizontal */
        font-size: 0.95rem; /* Sedikit kecil biar fit lebih banyak */
    }
    .categories-nav .dropdown-menu {
        display: none !important; /* Hide dropdown desktop */
    }
    .categories-nav .dropdown-toggle::after {
        display: none !important; /* No arrow desktop */
    }
}

/* Dropdown Styles (hanya mobile, bingkai jelas: border violet, lebar sama search) */
.dropdown-toggle::after {
    border-top-color: #7c3aed;
    margin-left: 0.5rem;
}
.dropdown-toggle:hover::after {
    border-top-color: #a855f7;
}
.dropdown-menu {
    background-color: #1f2937; /* Softer slate bg */
    border: 1px solid #7c3aed !important; /* Bingkai jelas: border violet tipis */
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15); /* Shadow lebih visible */
    border-radius: 6px; /* Medium rounded */
    min-width: 600px; /* Sama lebar dengan search (max-width 600px), biar balance cantik */
}
.dropdown-item {
    padding: 0.5rem 1rem;
    color: #e5e7eb !important;
    border-radius: 4px; /* Slight inner rounded */
}
.dropdown-item:hover {
    background-color: rgba(124, 58, 237, 0.1);
    color: #a855f7 !important;
}
.dropdown-divider {
    border-top: 1px solid #374151; /* Soft divider */
}

/* Mobile Responsiveness (update dropdown – bingkai kategori, lebar rata 100% ga nonjol, indent agak ke kanan) */
@media (max-width: 991.98px) {
    .navbar-collapse {
        /* Zero everything, no frame */
    }
    .navbar form.d-flex {
        gap: 0; /* No gap, nyatu */
    }
    .navbar .form-control {
        border: 2px solid #374151 !important; /* Bingkai jelas di mobile */
    }
    .dropdown-menu {
        position: static !important;
        float: none;
        width: 100% !important; /* Rata 100% ga nonjol, sama panjang dengan search di mobile */
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1); /* Shadow subtle di mobile */
        border: 1px solid #7c3aed !important; /* Bingkai jelas di mobile juga */
        border-left: none !important; /* Hapus border-left kategori */
        margin-left: 0; /* No indent margin, biar rata kiri */
        margin-right: 0;
        border-radius: 6px; /* Radius biar cantik */
        background-color: #1f2937 !important; /* Bg subtle di mobile */
    }
    .dropdown-menu.show {
        display: block;
    }
    .dropdown-item {
        padding-left: 15px !important; /* Indent agak ke kanan di mobile: 15px (adjust sendiri: tambah/kurangi px di sini, misal 10px buat lebih kiri, 25px buat lebih kanan) */
        border-left: 2px solid transparent; /* Subtle indent tanpa bingkai */
    }
    .dropdown-item:hover {
        border-left-color: #7c3aed;
        background-color: rgba(124, 58, 237, 0.05) !important;
    }
}

/* Animations (smooth, ga flashy – tetep jalan tanpa frame) */
.navbar-collapse.collapsing,
.navbar-collapse.show {
    animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.card, .dropdown-menu, .btn, .form-control, .search-integrated {
    transition: all 0.2s ease; /* Smooth transitions everywhere */
}

/* Video Card Overlays Simetris (violet theme) */
.views-badge {
    background-color: rgba(124, 58, 237, 0.8) !important; /* Semi-transparent violet biar ga nutupin thumbnail */
    font-size: 0.7rem; /* Kecil di bottom-left */
    backdrop-filter: blur(2px); /* Blur subtle biar keliatan di atas gambar */
}
.duration-badge {
    background-color: rgba(124, 58, 237, 0.8) !important; /* Sama seperti views, semi-transparent violet bottom-right */
    font-size: 0.7rem; /* Kecil simetris */
    backdrop-filter: blur(2px); /* Blur subtle */
}
.category-container {
    margin-top: 0.25rem; /* Space kecil di bawah title */
}
.category-chip {
    background-color: rgba(124, 58, 237, 0.1) !important; /* Soft violet chips */
    border: 1px solid rgba(124, 58, 237, 0.3) !important;
    transition: all 0.2s ease;
}
.category-chip:hover {
    background-color: #7c3aed !important;
    color: #e5e7eb !important;
    transform: scale(1.05); /* Hover pop subtle */
}
.title-link {
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.title-link:hover {
    color: #a855f7 !important;
}

/* Mobile Video Card Tweaks */
@media (max-width: 991.98px) {
    .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .thumbnail-img {
        height: 150px;
    }
    .views-badge, .duration-badge {
        font-size: 0.65rem; /* Lebih kecil di mobile */
        margin: 0.25rem; /* Adjust margin biar ga overlap */
    }
    .category-container {
        gap: 0.5rem; /* Lebih space di mobile */
    }
}

/* Custom Violet Classes */
.text-violet { color: #7c3aed !important; }
.border-violet { border-color: #7c3aed !important; }

/* Sidebar Responsif Fix (no sticky, mobile hidden clean) */
.sidebar-aside {
    position: relative; /* Ganti dari sticky-top ke relative, no sticky bug */
}
.sidebar-card {
    background-color: #1f2937 !important; /* Match theme */
    border: 1px solid #374151;
}
.sidebar-card:hover {
    border-color: #7c3aed;
}
.trending-item:hover {
    background-color: rgba(124, 58, 237, 0.05);
}
.trending-item img {
    transition: transform 0.2s ease;
}
.trending-item:hover img {
    transform: scale(1.05);
}

/* Mobile: Full Video Grid (no sidebar bug, main full-width) */
@media (max-width: 991.98px) {
    .main-content { /* Alias buat col-12 col-md-9 */
        flex: 0 0 100% !important;
        max-width: 100% !important; /* Full width video di mobile, no gap kanan */
    }
    .sidebar-aside {
        display: none !important; /* Hide sidebar total, no bug */
    }
    .container-fluid .row {
        margin: 0; /* No margin row di mobile biar clean */
    }
    .container-fluid {
        padding: 0 0.5rem; /* Small padding sisi mobile */
    }
}

/* Desktop Sidebar Normal (no sticky) */
@media (min-width: 992px) {
    .sidebar-aside {
        position: relative; /* Normal flow, no sticky */
        max-height: none; /* No limit height */
    }
    .main-content {
        flex: 0 0 auto; /* Normal 9/12 */
    }
}

/* Footer Styles (violet theme, responsif) */
.bg-slate-dark {
    background-color: #111827 !important;
    border-top: 1px solid #374151 !important;
}
footer a:hover {
    color: #a855f7 !important;
}
footer i.bi {
    font-size: 1.2rem;
    transition: color 0.2s ease;
}
footer i.bi:hover {
    color: #a855f7 !important;
}

/* Mobile Footer Stack */
@media (max-width: 991.98px) {
    footer .row > div {
        text-align: center !important; /* Center links & social di mobile */
    }
    footer .d-flex {
        justify-content: center !important;
    }
    footer h6 {
        font-size: 1rem;
    }
}

/* Watch Page Player Styles */
.video-player-container video {
    max-height: 60vh; /* Responsive height */
    background-color: #000;
}
.player-controls {
    background-color: #1f2937;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #374151;
}
.quality-selector select {
    min-width: 100px;
}
.player-controls button {
    border: 1px solid #7c3aed;
    color: #7c3aed;
}
.player-controls button:hover {
    background-color: #7c3aed;
    color: #111827;
}

/* Related Mini Cards */
.related-card img {
    transition: transform 0.2s ease;
}
.related-card:hover img {
    transform: scale(1.05);
}

/* Mobile Player Full */
@media (max-width: 991.98px) {
    .video-player-container video {
        max-height: 50vh;
    }
    .player-controls {
        flex-direction: column;
        gap: 0.5rem;
    }
    .quality-selector {
        order: 2;
        width: 100%;
    }
}

/* Related Grid Mini (sama tampilan index, tapi ukuran kecil) */
.related-grid .video-card {
    height: auto; /* Ga full height */
}
.related-grid .thumbnail-img {
    height: 112px !important; /* Thumbnail kecil buat related */
}
.related-grid .views-badge, .related-grid .duration-badge {
    font-size: 0.65rem; /* Badge kecil */
}
.related-grid .title-link {
    font-size: 0.8rem; /* Title compact */
}
.related-grid .category-container {
    gap: 0.25rem; /* Chips rapat */
    margin-top: 0.125rem;
}
.related-grid .category-chip {
    font-size: 0.7rem;
    padding: 0.125rem 0.25rem; /* Chips mungil */
}

/* Mobile Related (2 kolom) */
@media (max-width: 991.98px) {
    .related-grid .col-md-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important; /* 2 kolom mobile */
    }
}

/* Thumbnail 16:9 Aspect Ratio (responsif, fallback padding-hack) */
.thumbnail-wrapper {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 6px 6px 0 0; /* Rounded atas card */
}
.thumbnail-aspect {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 9/16 = 56.25% fallback buat browser lama */
    aspect-ratio: 16 / 9; /* Modern CSS, override padding-top */
}
.thumbnail-aspect img.thumbnail-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop biar perfect 16:9 */
    transition: transform 0.2s ease;
}
.thumbnail-wrapper:hover .thumbnail-img {
    transform: scale(1.05); /* Zoom hover */
}

/* Adjust badges biar ga keluar 16:9 wrapper */
.views-badge, .duration-badge {
    z-index: 2; /* Di atas img */
}

/* Related Grid di Watch (16:9 mini) */
.related-grid .thumbnail-aspect {
    padding-top: 56.25%; /* Sama 16:9 */
}
.related-grid .thumbnail-img {
    height: auto !important; /* Auto dari aspect */
}

/* Mobile Tweaks 16:9 */
@media (max-width: 991.98px) {
    .col-md-3 .thumbnail-aspect {
        padding-top: 56.25%; /* 16:9 mobile juga */
    }
}



/* ===================================================== */

/* Breadcrumb Styles (violet theme) */
.breadcrumb {
    background-color: transparent !important;
    padding: 0;
    margin-bottom: 1rem;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: #9ca3af; /* Muted separator */
}
.breadcrumb-item.active {
    color: #e5e7eb !important; /* Light active */
}
.breadcrumb a:hover {
    color: #a855f7 !important;
}

/* Mobile Breadcrumb Stack */
@media (max-width: 991.98px) {
    .breadcrumb {
        font-size: 0.875rem; /* Smaller mobile */
    }
}


/* ===================================================== */

/* Search Page Styles */
.search-header {
    background-color: #1f2937;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #374151;
}
.no-results {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 6px;
    padding: 2rem;
}

/* Mobile Search */
@media (max-width: 991.98px) {
    .search-header h2 {
        font-size: 1.5rem;
    }
}