/* hero-static.css */

/* VARIABEL WARNA (Dibiarkan sama) */
:root {
    --primary-color: #004d99;
    /* Biru UIN */
    --text-light: #ffffff;
    --accent-yellow: #ffc107;
    /* Kuning Accent */
    --uin-font-cursive: 'Satisfy', cursive;
    --uin-font-heading: 'Philosopher', sans-serif;
}

/* -------------------------------------------------------------
   HEADER TRANSISI (REVISI KRITIS: DEFAULT FIXED & SOLID)
   ------------------------------------------------------------- */

/* 1. Status DEFAULT (Untuk SEMUA halaman Non-Home & saat SCROLLED) - SOLID & FIXED */
#header.header {
    background-color: var(--primary-color) !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.5s ease-in-out;
    z-index: 1020;
    position: fixed;
    /* KRITIS: DEFAULT FIXED */
    width: 100%;
    top: 0;
    padding: 10px 0;
    /* Padding solid */
}

/* 2. Status HOME-INITIAL: Ketika belum di-scroll (Ditambah JS sebagai 'header-transparent') */
#header.header.header-transparent {
    background-color: transparent !important;
    box-shadow: none !important;
    position: absolute;
    /* HANYA absolute saat transparent */
    padding: 15px 0;
    /* Padding lebih besar saat transparent */
}

/* 3. Penyesuaian Warna Teks (Selalu Putih) */
#header.header .logo .sitename,
#header.header .navmenu a,
#header.header .mobile-nav-toggle,
#header.header .header-extras a {
    color: var(--text-light) !important;
}

/* 4. Fix untuk Mobile: Selalu Solid & Fixed */
@media (max-width: 991px) {
    #header.header {
        position: fixed !important;
        background-color: var(--primary-color) !important;
    }

    /* Pastikan menu mobile juga berlatar biru UIN */
    .navmenu ul {
        background-color: var(--primary-color) !important;
        border: none !important;
    }

    /* Warna teks dropdown di mobile tetap putih */
    .navmenu .dropdown ul {
        background: var(--secondary-color) !important;
    }
}

/* KRITIS: Beri padding atas pada KONTEN agar tidak tertutup header FIXED */
/* Ini penting untuk SEMUA halaman non-home/section lain */
.page-title,
.trainers-index,
.about-us,
.contact,
.starter-section,
.section {
    padding-top: 100px !important;
    /* Sesuaikan dengan tinggi header fixed + sedikit margin */
}

/* Override agar hero section di home tidak memiliki padding tambahan */
#hero.hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* -------------------------------------------------------------
   HERO VIDEO SLIDER (Dibiarkan sama)
   ------------------------------------------------------------- */

/* 1. Hero Section - Full Viewport Height */
#hero.hero {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #000;
    overflow: hidden;
}

/* 2. Aktifkan Efek Fade Carousel (Optimasi Transisi) */
.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity 1.0s ease-in-out;
    /* Durasi Pudar 1.0 detik */
    transform: none;
    z-index: 1;
}

.carousel-fade .carousel-item.active {
    opacity: 1;
    z-index: 2;
}

#hero-carousel.carousel .carousel-inner,
#hero-carousel.carousel .carousel-inner .carousel-item {
    height: 100vh !important;
}

/* 3. Video Background - FULL COVER */
#hero .video-slide-item {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#hero .video-slide-item .hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    /* KRITIS: Meredupkan kecerahan video */
    filter: brightness(0.7);
}

/* 4. Overlay Utama (Efek Mika/Dip-to-Black) */
#hero.hero:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* KRITIS: Overlay 0.9 (Sangat Gelap) */
    background: rgba(0, 0, 0, 0.9);
    z-index: 2;
}

/* KRITIS: EFEK SCANLINE (KOTAK-KOTAK TV/CRT) */
#hero.hero:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.05),
            rgba(0, 0, 0, 0.05) 1px,
            transparent 1px,
            transparent 3px);
    z-index: 3;
    pointer-events: none;
}


/* -------------------------------------------------------------
   GAYA TEKS MIRIP UIN ALAUDDIN - HARMONIS
   ------------------------------------------------------------- */
#hero.hero .container {
    position: relative;
    z-index: 4;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 15px;
    text-align: center;
}

/* Text Level 1: Menggunakan font Cursive untuk pembeda yang halus */
#hero .text-uin-grand {
    font-family: var(--uin-font-cursive);
    font-size: 36px;
    margin-bottom: 5px;
    color: var(--text-light) !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    font-weight: normal;
}

/* Text Level 2: Headline Utama (Paling Menonjol) */
#hero h2 {
    font-family: var(--uin-font-heading);
    font-weight: 900 !important;
    font-size: 3em !important;
    margin-bottom: 10px;
    line-height: 1.1;
    color: var(--text-light) !important;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
    text-transform: uppercase;
}

/* KRITIS: Text Level 3 (Tanggal) & Level 4 (Keterangan) */
#hero p {
    font-family: var(--uin-font-heading);
    /* Menggunakan Philosopher/Poppins */
    font-size: 1.2em !important;
    margin-top: 5px;
    color: var(--text-light) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    font-weight: 400;
    text-transform: none;
}

#hero #hero-current-date {
    font-size: 1.25em !important;
    font-weight: 700;
    margin-bottom: 5px;
}

/* Responsive Fix */
@media (max-width: 768px) {
    #hero h2 {
        font-size: 2.5em !important;
    }

    #hero .text-uin-grand {
        font-size: 24px;
    }

    #hero p {
        font-size: 1em !important;
    }
}


/* -------------------------------------------------------------
   PENYESUAIAN UKURAN FONT HEADER KECIL (TAMBAHAN UNTUK OVERRIDE)
   ------------------------------------------------------------- */

/* 1. Ukuran Font untuk Nama Situs (Logo Text) */
#header.header .logo .sitename {
    /* Mengecilkan ukuran font nama situs di desktop */
    font-size: 18px !important;
    line-height: 1.2;
    margin: 0;
}

/* 2. Ukuran Font untuk Menu Navigasi */
#header .navmenu ul li a,
#header .navmenu ul li.dropdown>a {
    /* Mengecilkan ukuran font item menu di desktop */
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 10px 12px !important;
}

.dropdown .bi-chevron-down {
    display: none !important;
}

@media (max-width: 1290px) {
    .dropdown .bi-chevron-down {
        display: flex !important;
    }

    .dropdown .bi-chevron-down::before {
        justify-content: center;
    }


}

/* 3. Penyesuaian Responsif untuk Font Kecil (Agar tidak bertabrakan di mobile) */
@media (max-width: 991px) {

    /* Jika logo atau nama situs terlalu besar, kecilkan lagi di mobile */
    #header.header .logo .sitename {
        font-size: 16px !important;
    }



    /* Tambahan Padding untuk header mobile yang FIXED agar ada ruang */
    #header.header {
        padding: 15px 0 !important;
    }
}



@media (max-width: 1199px) {

    .navmenu a i,
    .navmenu a:focus {
        display: flex;
        background-color: rgba(0, 136, 255, 0.692) !important;
    }
}

/* ============================================================
   TAMBAHAN: EFEK WARNA SAAT HOVER MENU HEADER
   ============================================================ */

/* Warna kuning lembut dari variabel accent-yellow */
@media (min-width: 992px) {
    #header .navmenu ul li a {
        transition: color 0.3s ease-in-out;
    }

    #header .navmenu ul li a:hover {
        color: var(--accent-yellow) !important;
    }
}


/* Tambahkan ke file CSS Kustom Anda (misalnya: style.css) */
.carousel-caption {
    /* Menghapus offset default Bootstrap */
    left: 0 !important;
    right: 0 !important;
    bottom: 0;
    /* Sesuaikan jika Anda ingin teks lebih tinggi */
    top: 0;
    /* Memungkinkan centering vertikal */
    display: flex;
    align-items: center;
    /* Centering Vertikal */
    justify-content: center;
    /* Centering Horizontal */
    text-align: center;
    /* Memastikan teks itu sendiri rata tengah */
}

/* Menghilangkan padding horizontal yang kadang tersisa */
.carousel-caption .container {
    padding-left: 0;
    padding-right: 0;
}



/* Tambahkan ke file CSS Kustom Anda */
.carousel-caption {
    /* Menghapus offset default Bootstrap */
    left: 0 !important;
    right: 0 !important;

    /* Centering Vertikal/Horizontal yang lebih agresif */
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    /* Centering Vertikal */
    justify-content: center;
    /* Centering Horizontal */
    text-align: center;
}


/* hero-static.css (Tambahkan/Timpa di bagian paling bawah) */

/* -------------------------------------------------------------
    GAYA TEKS CAROUSEL CAPTION (FINAL PROPORSI KECIL)
    ------------------------------------------------------------- */

/* KONTEN (Pilihan: Philosopher/Satisfy) */
#hero .carousel-caption h1,
#hero .carousel-caption h2,
#hero .carousel-caption p {
    color: var(--text-light) !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Bayangan sedikit dikurangi */
    margin: 5px 0;
    line-height: 1.1;
}

/* 1. KET1 (Nama Sekolah) - PALING BESAR/HIGHLIGHT */
#hero .carousel-caption .caption-ket1 {
    font-family: 'Philosopher', sans-serif;
    font-weight: 900 !important;
    /* 🚨 KECIL: Dari 5.5rem menjadi 4.5rem (Max) */
    font-size: clamp(2.5rem, 10vw, 4.5rem) !important;
    text-transform: uppercase;
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.9) !important;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* 2. JDL_SLIDER ("Selamat Datang di") - MENENGAH */
#hero .carousel-caption .caption-jdl-slider {
    font-family: 'Philosopher', sans-serif;
    font-weight: 700 !important;
    /* 🚨 KECIL: Dari 3.5rem menjadi 3.0rem (Max) */
    font-size: clamp(0.8rem, 7vw, 3.0rem) !important;
}

/* 3. KET2 (Slogan) - KECIL */
#hero .carousel-caption .caption-ket2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600 !important;
    /* 🚨 KECIL: Dari 1.5rem menjadi 1.4rem (Max) */
    font-size: clamp(0.9rem, 2.5vw, 1.4rem) !important;
    color: var(--accent-yellow) !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    margin-top: 10px;
    margin-bottom: 5px;
}

/* 4. JS DATE - PALING KECIL */
#hero .carousel-caption .caption-date {
    font-family: 'Poppins', sans-serif;
    font-weight: 400 !important;
    /* 🚨 KECIL: Dari 1.1rem menjadi 1.0rem (Max) */
    font-size: clamp(0.8rem, 1.8vw, 1.0rem) !important;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    margin-top: 5px;
    margin-bottom: 0;
    color: white !important;
}

/* responsive fix jika diperlukan */
@media (max-width: 768px) {
    /* Turunkan ukuran agar mobile tidak terlalu penuh */
    #hero .carousel-caption .caption-ket1 {
        font-size: 8vw !important;
    }
    #hero .carousel-caption .caption-jdl-slider {
        font-size: 5vw !important;
    }
}


/* hero-static.css (Tambahkan/Timpa di bagian paling bawah) */

/* 1. KET1 (Nama Sekolah) - PALING BESAR/HIGHLIGHT */
#hero .carousel-caption .caption-ket1 {
    font-family: 'Philosopher', sans-serif;
    font-weight: 900 !important;
    /* Ukuran tetap sama, yang terpenting adalah properti di bawah */
    font-size: clamp(2.5rem, 10vw, 4.5rem) !important;
    text-transform: uppercase;
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.9) !important;
    margin-top: 5px;
    margin-bottom: 5px;

    /* 🚀 KRITIS: Mencegah teks ter-*enter* */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ... (Elemen CSS lainnya tetap sama) ... */



/* hero-static.css (Tambahkan/Timpa di bagian paling bawah) */

/* -------------------------------------------------------------
    FIX KRITIS: OVERRIDE TEXT WRAP DAN CENTERING
    ------------------------------------------------------------- */

/* Reset Padding Horizontal pada elemen Container di dalam Carousel */
#hero .carousel-caption .container,
#hero .carousel-caption .row {
    /* Menghilangkan sisa padding/margin horizontal Bootstrap yang menyebabkan "menceng" */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* KONTEN UTAMA (Global Style) */
#hero .carousel-caption h1,
#hero .carousel-caption h2,
#hero .carousel-caption p {
    color: var(--text-light) !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin: 5px 0;
    line-height: 1.1;
    /* Pastikan semua elemen inline-block agar centering bekerja sempurna */
    display: inline-block;
}


/* 1. KET1 (Nama Sekolah) - PALING BESAR/HIGHLIGHT */
#hero .carousel-caption .caption-ket1 {
    font-family: 'Philosopher', sans-serif;
    font-weight: 900 !important;
    /* Ukuran Final yang Lebih Kecil */
    font-size: clamp(2.5rem, 10vw, 4.5rem) !important;
    text-transform: uppercase;
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.9) !important;
    margin-top: 5px;
    margin-bottom: 5px;

    /* 🚀 KRITIS FIX: Memaksa teks untuk WRAP (Pindah Baris) dan TIDAK TERPOTONG */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.1;
}

/* 2. JDL_SLIDER ("Selamat Datang di") - MENENGAH */
#hero .carousel-caption .caption-jdl-slider {
    font-family: 'Philosopher', sans-serif;
    font-weight: 700 !important;
    font-size: clamp(1.8rem, 7vw, 3.0rem) !important;
}

/* 3. KET2 (Slogan) - KECIL */
#hero .carousel-caption .caption-ket2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600 !important;
    font-size: clamp(0.9rem, 2.5vw, 1.4rem) !important;
    color: var(--accent-yellow) !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    margin-top: 10px;
    margin-bottom: 5px;
}

/* 4. JS DATE - PALING KECIL */
#hero .carousel-caption .caption-date {
    font-family: 'Poppins', sans-serif;
    font-weight: 400 !important;
    font-size: clamp(0.8rem, 1.8vw, 1.0rem) !important;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    margin-top: 5px;
    margin-bottom: 0;
    color: white !important;
}

/* responsive fix jika diperlukan */
@media (max-width: 768px) {
    /* Turunkan ukuran agar mobile tidak terlalu penuh */
    #hero .carousel-caption .caption-ket1 {
        font-size: 8vw !important;
    }
    #hero .carousel-caption .caption-jdl-slider {
        font-size: 5vw !important;
    }
}

/* hero-static.css (Tambahkan/Timpa di bagian paling bawah) */

/* 4. JS DATE - PALING KECIL */
#hero .carousel-caption .caption-date {
    font-family: 'Poppins', sans-serif;
    font-weight: 400 !important;
    font-size: clamp(0.8rem, 1.8vw, 1.0rem) !important;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    margin-top: 5px;
    margin-bottom: 0;
    color: white !important;

    /* 🚀 KRITIS FIX: Memaksa elemen menjadi blok (baris baru) */
    display: block !important;
}