/* --- GLOBAL STYLING (Dari _header.php Anda) --- */
body { 
    font-family: 'Inter', sans-serif; /* Font utama */
}
/* --- LOGIKA CSS UNTUK MENYEMBUNYIKAN WIDGETS DI HALAMAN TERTENTU --- */

/* 1. Menyembunyikan Floating Promo (Kiri Tengah) */
body.hide-floating-widgets .promo-vertical-widget {
    display: none !important;
}

/* 2. Menyembunyikan Floating Kontak Admin (Kanan Tengah) */
body.hide-floating-widgets .contact-widget-container {
    display: none !important;
}


/* --- 1. NAVBAR MODERN (Berdasarkan Desain Putih/Inter) --- */
.navbar { 
    z-index: 1050; 
    /* Menggunakan shadow yang lebih halus untuk header putih */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important; 
    min-height: 70px; 
    padding-top: 0; 
    padding-bottom: 0; 
}

.navbar-brand { 
    color: #1A73E8 !important; /* Logo berwarna biru */
    letter-spacing: 0.5px; 
    font-weight: 700;
}
.navbar-brand img { 
    height: 40px; 
    vertical-align: middle; 
}


/* 2. STYLING TEKS MENU */
.menu-item {
    color: #4a4a4a !important; /* Teks abu-abu gelap */
    font-weight: 500; /* Medium weight */
    letter-spacing: 0; 
    transition: color 0.3s ease-in-out; 
    text-transform: capitalize; /* Huruf pertama kapital */
    padding: 1.5rem 1rem !important; 
}

/* Efek Hover dan Active (Biru Primer) */
.menu-item:hover,
.menu-item.active { /* 'active' digunakan oleh logic PHP dinamis */
    color: #1A73E8 !important; /* Warna biru primer saat hover/aktif */
    background-color: transparent !important;
    text-shadow: none; /* Hapus efek glow lama */
}

/* Styling Tombol DAFTAR */
.btn-daftar {
    font-weight: 600 !important; 
    padding: 10px 25px !important; 
    border-radius: 50px !important; /* Bentuk pil */
    background: linear-gradient(to right, #ff416c, #ff4b2b) !important; /* Gradient Pink-Orange */
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4) !important;
    transition: all 0.3s ease;
}

.btn-daftar:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(255, 65, 108, 0.6) !important;
    opacity: 0.9; 
}

/* --- FLOATING WIDGETS (PROMO GELEMBUNG) --- */

.promo-vertical-widget {
    position: fixed;
    left: 20px; 
    top: 50%; 
    transform: translateY(-50%); 
    background: linear-gradient(to bottom, #1A73E8, #00BFFF); 
    color: white;
    padding: 15px 12px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    text-align: center;
    text-decoration: none !important;
    width: 120px; 
    transition: all 0.3s ease-in-out;
    animation: pulse-promo 2s infinite; 
}

.promo-vertical-widget:hover {
    transform: translateY(-50%) scale(1.05); 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    animation: none;
}

.promo-vertical-widget strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 900; 
    margin-bottom: 5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.promo-vertical-widget small {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.1;
}

/* Animasi berdenyut */
@keyframes pulse-promo {
    0% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.03); }
    100% { transform: translateY(-50%) scale(1); }
}

/* Responsif */
@media (max-width: 768px) {
    .promo-vertical-widget {
        width: 100px;
        left: 10px;
        padding: 10px 8px;
    }
    .promo-vertical-widget strong { font-size: 1rem; }
    .promo-vertical-widget small { font-size: 0.75rem; }
}

/* Tambahkan juga styling untuk contact-widget-container dari _footer.php agar tampil di kanan */
.contact-widget-container {
    position: fixed;
    right: 20px; /* Jarak dari tepi kanan */
    top: 50%; /* Posisikan vertikal di tengah */
    transform: translateY(-50%);
    z-index: 999;
}
.contact-bubble-left {
    display: flex;
    align-items: center;
    background-color: #ff416c; 
    color: white;
    padding: 10px;
    margin-bottom: 10px; 
    border-radius: 10px;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    width: 250px; 
    transition: all 0.3s ease-in-out;
}
.contact-bubble-left:hover {
    background-color: #ff4b2b;
    transform: translateX(-5px); /* Geser ke kiri saat hover */
}

.contact-bubble-left .icon { font-size: 1.8rem; margin-right: 15px; }
.contact-bubble-left .details { text-align: left; line-height: 1.2; }
.contact-bubble-left .details strong { font-size: 1rem; font-weight: 700; }
.contact-bubble-left .details small { display: block; font-size: 0.85rem; font-weight: 500;
}

/* --- Tambahkan/Sesuaikan Kode Responsif Ini --- */
@media (max-width: 768px) {
    
    /* 1. PENYESUAIAN TINGGI HERO SECTION (AGAR TIDAK TERLALU PANJANG) */
    .carousel-item,
    .carousel-item.video-slide,
    .hero-img {
        height: 400px !important; /* Turunkan tinggi slide di mobile */
    }
    
    /* 2. PENYESUAIAN VIDEO/LOTTIE BACKGROUND */
    .lottie-bg {
        /* Memastikan Lottie/Video tetap memenuhi layar, meskipun tingginya berkurang */
        min-width: 150%; /* Diperbesar sedikit agar benar-benar menutupi lebar mobile yang sempit */
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%);
    }

    /* 3. PENYESUAIAN TEKS CAROUSEL (Agar tidak terlalu besar di HP) */
    .carousel-caption h1 {
        font-size: 1.8rem;
        line-height: 1.2;
    }
    .carousel-caption p.lead {
        font-size: 0.9rem;
        display: none; /* Sembunyikan teks deskripsi panjang agar fokus pada headline */
    }
    .carousel-caption .btn-lg {
        padding: 8px 15px;
        font-size: 0.9rem;
    }

    /* 4. PENYESUAIAN FLOATING WIDGETS (Sangat penting agar tidak menghalangi) */
    /* Gelembung Promo Kiri Tengah */
    .promo-vertical-widget {
        left: 10px;
        width: 90px;
        padding: 10px 5px;
    }
    .promo-vertical-widget strong {
        font-size: 0.9rem;
    }
    .promo-vertical-widget small {
        font-size: 0.7rem;
    }

    /* Floating Kontak Kanan Tengah */
    .contact-widget-container {
        right: 10px;
        top: 60%; /* Pindahkan sedikit ke bawah agar tidak terlalu dekat navbar */
    }
    .contact-bubble-left {
        width: 180px; /* Lebar widget kontak yang lebih ramping */
        padding: 8px;
    }
    .contact-bubble-left .details small {
        font-size: 0.75rem;
    }
}

/* --- Tambahkan/Sesuaikan Kode Responsif Ini di _header.php style block --- */
@media (max-width: 768px) {
    
    /* 1. PENYESUAIAN TINGGI HERO SECTION MENGGUNAKAN VH */
    .carousel-item,
    .carousel-item.video-slide,
    .hero-img {
        /* Menggunakan 70% dari tinggi layar agar tidak terlalu full */
        height: 70vh !important; 
    }
    
    /* 2. PENYESUAIAN VIDEO/LOTTIE BACKGROUND */
    .lottie-bg {
        min-width: 150%; 
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translate(-50%, -50%);
    }

    /* 3. PENYESUAIAN TEKS CAROUSEL */
    .carousel-caption h1 {
        font-size: 1.6rem; /* Lebih kecil lagi */
    }
    .carousel-caption p.lead {
        font-size: 0.8rem;
        display: none; 
    }
    .carousel-caption .btn-lg {
        padding: 6px 12px; /* Tombol lebih kecil */
        font-size: 0.8rem;
    }

    /* ... (CSS Floating Widgets yang lain tetap sama) ... */
}