/* sembunyikan ditablet dan laptop */
/*.d-md-none {}*/

/* sembunyikan pada layar PC */
/*.d-lg-none {}*/

/* sembunyikan pada layar yang berukuran extra large */
/*.d-xl-none {}*/

/* =======================================================
   1. CUSTOM STYLE JQUERY UI AUTOCOMPLETE (Global Search)
   (Penerapan Cerdas: Dark Theme + Struktur Flexbox + Scholar Purple)
   ======================================================= */

/* Container Utama (Dropdown Box) */
.ui-autocomplete {
    background-color: #343a40 !important; /* Warna gelap elegan */
    border: 1px solid #495057 !important;
    max-height: 350px; 
    overflow-y: auto; /* Aktifkan scroll jika banyak hasil */
    overflow-x: hidden;
    z-index: 9999 !important; /* Pastikan di atas modal/elemen lain */
    padding: 8px !important;
    border-radius: 15px; /* Sudut membulat modern */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Opsi (Setiap Item Line) */
.ui-menu-item {
    border-bottom: 1px solid #495057;
    margin-bottom: 4px;
    list-style: none;
}

.ui-menu-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Struktur Flexbox untuk hasil pencarian cerdas */
.ui-menu-item-wrapper {
    padding: 10px 15px !important;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    color: #f8f9fa !important; /* Teks putih terang */
    cursor: pointer;
}

/* Highlight / Hover State (Menggunakan ungu Scholar Template) */
.ui-menu-item-wrapper:hover,
.ui-state-active, 
.ui-widget-content .ui-state-active, 
.ui-widget-header .ui-state-active {
    background-color: #7a6ad8 !important; /* Warna ungu template scholar */
    color: #ffffff !important;
    border: none !important;
    margin: 0 !important;
}

/* Label Kategori Pencarian (Menu, Guru, Pengumuman, dll) */
.search-category {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: #a598f5; /* Ungu terang agar terbaca di background gelap */
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

/* Kategori saat item di-hover */
.ui-state-active .search-category,
.ui-menu-item-wrapper:hover .search-category {
    color: #e0d9ff !important; 
}

/* Teks Utama Pencarian */
.search-label {
    font-size: 14px;
    font-weight: 500;
}

/* Sembunyikan helper bawaan jquery ui */
.ui-helper-hidden-accessible {
    display: none !important;
}


/* =======================================================
   2. CUSTOM STYLE SELECT2 (Matching Dark Form/Contact-Us)
   ======================================================= */

/* Container Utama */
.select2-container--default .select2-selection--single {
    background-color: #212529 !important;
    border: 1px solid #495057 !important;
    border-radius: 30px;
    height: 50px; 
}

/* Teks Input & Placeholder */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f8f9fa !important;
    line-height: 50px;
    padding-left: 15px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #adb5bd !important;
}

/* Dropdown Menu (Hasil) */
.select2-dropdown {
    background-color: #343a40 !important;
    border: 1px solid #495057 !important;
    border-radius: 20px;
    color: #f8f9fa;
    overflow: hidden;
}

/* Hasil Opsi (Item di Dropdown) */
.select2-results__option {
    padding: 10px 15px;
    color: #f8f9fa;
}

/* Highlight / Hover State (Diubah ke Ungu Scholar agar konsisten) */
.select2-container--default .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: #7a6ad8 !important; /* Warna ungu template scholar */
    color: #ffffff !important;
}

/* Gambar di Dropdown */
.select2-results__option img {
    margin-right: 8px; 
    border-radius: 50%;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    object-fit: cover;
}

/* Perbaikan Highlight Gambar */
.select2-results__option--highlighted img {
    filter: brightness(1.1); 
}


/* =======================================================
   3. UI COMPONENTS & ANIMATIONS
   ======================================================= */

/* NAVBAR BOTTOM */
.main-nav-bottom {
    background-color: rgba(12, 102, 109, 0.95);
}
#intergram { 
    right: 20px;
    bottom: 70px; 
}

/* Style untuk kursor ketik */
.typed-cursor {
    font-size: inherit;
    color: #fff;
    opacity: 1;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* Mencegah lompatan tinggi banner saat animasi ngetik */
.banner-content {
    min-height: 100px;
}

/* Back to top button (FIXED FOR FIREFOX) */
#btn-back-to-top { 
    position: fixed; 
    bottom: 90px;
    right: 18px;
    display: none; 
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    color: white;
    z-index: 99999;
    transition: all 0.3s ease-in-out;
}

#btn-back-to-top[style*="display: block"] {
    display: flex !important; 
}

#btn-back-to-top i {
  font-size: 20px;
  line-height: 0; 
}

#btn-back-to-top:hover {
    background-color: rgba(16, 104, 107, 1);
    transform: translateY(-3px); 
    color: #ffffff;
}

/* Animasi Blink Loading */
.blink-load {
  animation: fadeBlink 1.2s ease-in-out infinite;
}

@keyframes fadeBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* =======================================================
   4. CAMERA CONTAINER (GUESTBOOK)
   ======================================================= */
#camera {
    width: 100%;
    position: relative;
    overflow: hidden;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    margin: auto;
    transition: opacity 0.5s ease-in-out;
}

#camera video {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Diperhalus ujung kameranya */
}

#results img,
#camera-preview img {
    height: auto;
    object-fit: contain;
    animation: pulse 1s infinite alternate;
    border-radius: 10px;
}

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.02); } /* Dikurangi sedikit agar tidak terlalu goyang */
}


/* =======================================================
   5. SMART RESPONSIVE SEARCH (MOBILE & TABLET FIX)
   ======================================================= */

/* 1. Paksa munculkan kotak pencarian di bawah layar 992px (bawaan template menyembunyikannya) */
@media (max-width: 992px) {
    .header-area .main-nav #search input,
    .header-area .main-nav #search i {
        display: block !important;
    }
}

/* 2. KHUSUS TABLET / iPAD (768px - 992px) */
@media (max-width: 992px) and (min-width: 768px) {
    /* Di tablet, menu (.nav) MASIH tampil berjajar di kanan. 
       Jadi kita gunakan Flexbox untuk meletakkannya dengan rapi di antara Logo dan Menu */
    .header-area .main-nav .search-input {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        margin-left: 20px; /* Beri jarak aman dari Logo SIEBRASS */
        margin-right: 20px; /* Beri jarak aman dari Menu Navigasi */
        flex-grow: 1; /* Otomatis mengisi ruang kosong di tengah */
        max-width: 250px; /* Batasi lebar agar menu navigasi tidak terdesak */
    }
    
    .header-area .main-nav #search input {
        width: 100% !important; /* Input akan lentur mengikuti sisa ruang tablet */
    }
}

/* 3. KHUSUS SMARTPHONE / HP (< 767px) */
@media (max-width: 767px) {
    /* Sembunyikan Logo untuk memberi ruang penuh bagi Smart Search */
    .header-area .main-nav .logo {
        display: none !important;
    }

    /* Form pencarian melayang mengisi header dari ujung kiri ke tombol menu */
    .header-area .main-nav .search-input {
        position: absolute !important;
        top: 18px;
        left: 20px;
        right: 70px; /* Sisakan ruang aman untuk tombol hamburger */
        z-index: 105;
        margin: 0 !important;
        max-width: none !important;
    }
    
    /* Matikan margin bawaan template */
    .background-header .main-nav #search,
    .header-area .main-nav #search {
        margin-top: 0 !important;
    }
    
    .header-area .main-nav #search input {
        width: 100% !important;
        padding-right: 40px !important; /* Jarak teks agar tidak tertindih ikon lup */
    }
}


/* =======================================================
   6. BOTTOM NAVBAR MOBILE (App-Like UI & FAB Pattern)
   ======================================================= */
.main-nav-bottom {
    background-color: rgba(12, 102, 109, 0.98) !important; /* Warna khas template Anda dengan sedikit transparansi */
    border-top-left-radius: 25px; /* Membulat seperti aplikasi iOS modern */
    border-top-right-radius: 25px;
    backdrop-filter: blur(10px); /* Efek kaca blur */
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 0 15px 0 !important; /* Ruang aman ekstra di bawah */
    padding-bottom: env(safe-area-inset-bottom) !important; /* Support Notch iPhone */
    border-top: 1px solid rgba(255,255,255,0.1);
}

.bottom-nav-link {
    color: rgba(255, 255, 255, 0.6) !important; /* Warna putih redup saat tidak aktif */
    transition: all 0.3s ease;
    padding: 5px 0;
}

.bottom-nav-link span {
    font-size: 10.5px;
    margin-top: 3px;
    letter-spacing: 0.3px;
}

/* State ketika icon disentuh/aktif */
.bottom-nav-link:hover,
.bottom-nav-link:active,
.bottom-nav-link.active-nav {
    color: #ffffff !important; /* Menjadi putih terang */
    transform: translateY(-3px); /* Ikon sedikit loncat */
}

/* -------------------------------------
   Desain Lingkaran Tombol Tengah (FAB)
   ------------------------------------- */
.center-nav-item {
    position: relative;
    width: 20%;
}

.center-fab {
    background-color: #ffffff; /* Latar putih untuk foto logo */
    border-radius: 50%;
    padding: 4px;
    position: absolute;
    top: -35px; /* MENARIK TOMBOL KE ATAS KELUAR DARI NAVBAR */
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #f1f0fe; /* Border menyesuaikan warna background body web Anda */
    transition: all 0.3s ease;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
}

.center-fab img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.center-fab:hover, .center-fab:active {
    transform: translateX(-50%) scale(1.1); /* Efek membesar saat ditekan */
    border-color: #006875; /* Berubah menjadi warna khas Anda */
}