/* --- Variables & Reset --- */
:root {
    /* Background tetap biru gelap */
    --primary-blue: #020617; 
    
    /* WARNA BARU: Biru Mengkilat (Cyan/Electric Blue) pengganti Emas */
    --accent-cyan: #06b6d4; /* Cyan Terang */
    --shiny-blue: #0ea5e9; /* Sky Blue */
    
    /* Gradient Mengkilat (Shiny Effect) */
    --shiny-gradient: linear-gradient(135deg, #67e8f9 0%, #0ea5e9 50%, #2563eb 100%);
    
    /* Glass Effect Variables */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(56, 189, 248, 0.2); /* Border sedikit biru muda */
    
    --text-light: #f1f5f9;
    --text-gray: #94a3b8;
    
    --font-main: 'Montserrat', sans-serif;
    --font-islamic: 'Amiri', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--primary-blue);
    color: var(--text-light);
    overflow-x: hidden;
    line-height: 1.6;
    /* Background dengan nuansa biru tech */
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(6, 182, 212, 0.15) 0%, transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(37, 99, 235, 0.15) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2338bdf8' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* --- Background Shapes Animation (Diubah jadi Biru) --- */
.bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: -1;
    animation: floatShape 10s infinite alternate;
}

.shape-1 {
    width: 400px;
    height: 400px;
    background: rgba(6, 182, 212, 0.15); /* Cyan glow */
    top: -100px;
    left: -100px;
}

.shape-2 {
    width: 300px;
    height: 300px;
    background: rgba(37, 99, 235, 0.2); /* Royal Blue glow */
    bottom: 10%;
    right: -50px;
    animation-delay: -5s;
}

@keyframes floatShape {
    0% { transform: translate(0, 0); }
    100% { transform: translate(30px, 50px); }
}

/* --- Glass Utility Classes --- */
.glass-nav {
    background: rgba(2, 6, 23, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.glass-card:hover {
    border-color: var(--shiny-blue);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.2);
}

.glass-panel {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

/* --- Components --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* BUTTON STYLE UPDATED */
.btn {
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-primary {
    background: var(--shiny-gradient);
    color: white; /* Text putih di atas biru */
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.4);
    border: 1px solid transparent;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(14, 165, 233, 0.7);
}

.btn-outline {
    border: 2px solid var(--shiny-blue);
    color: var(--shiny-blue);
    margin-left: 15px;
}

.btn-outline:hover {
    background: rgba(14, 165, 233, 0.1);
    color: white;
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.3);
    border-color: var(--accent-cyan);
}

/* --- Typography Highlights --- */
/* Class 'gold-text' di HTML sekarang jadi Biru Mengkilat */
.gold-text {
    color: transparent;
    background: var(--shiny-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    font-family: var(--font-islamic);
    text-shadow: 0 0 30px rgba(14, 165, 233, 0.3);
}

/* --- NAVBAR WHITE GLASS (Agar Logo Terlihat) --- */
nav#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 10px 0;
    transition: all 0.4s ease;
    
    /* Background Putih Susu Transparan */
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Container Navbar */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Ubah min-height jadi lebih besar (misal 90px) */
    min-height: 90px; 
    padding: 0 20px;
}

/* --- LOGO SETTING --- */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 100%;
}

.logo img {
    /* Ubah height sesuai keinginan (misal 80px) */
    height: 110px; 
    
    /* Pastikan tidak ada batasan max-height yang menghalangi */
    max-height: 100%; 
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    transition: transform 0.3s;
}

.logo img:hover {
    transform: scale(1.05);
}

/* --- MENU LINKS (UBAH WARNA JADI GELAP) --- */
.nav-links {
    display: flex;
    gap: 30px;
    list-style: none;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    /* WARNA TEKS JADI HITAM/BIRU TUA AGAR BISA DIBACA DI ATAS PUTIH */
    color: #0f172a; 
    font-size: 0.95rem;
    font-weight: 600;
    transition: color 0.3s;
    position: relative;
}

/* Garis bawah saat hover (Warna Cyan) */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    background: var(--shiny-blue); /* Garis tetap biru cerah */
    bottom: -5px;
    left: 0;
    transition: width 0.3s;
    border-radius: 2px;
}

.nav-links a:hover::after, .nav-links a.active::after {
    width: 100%;
}

.nav-links a:hover {
    color: var(--shiny-blue); /* Saat hover jadi biru */
}

/* Tombol Pendaftaran di Navbar */
.btn-nav {
    background: var(--shiny-blue);
    border: 1px solid var(--shiny-blue);
    padding: 10px 25px;
    border-radius: 25px;
    color: white !important; /* Teks putih */
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

.btn-nav:hover {
    background: #0284c7; /* Biru lebih gelap saat hover */
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
    transform: translateY(-2px);
}

/* Responsive Mobile Menu Icon (Hamburger) */
.hamburger {
    color: #090707; /* Warna icon menu jadi hitam di HP */
    display: none;
    cursor: pointer;
    font-size: 1.5rem;
}

/* Mobile Layout Adjustments */
/* --- 3. (PENTING) ATUR AGAR DI HP TIDAK KEGEDEAN --- */
/* Karena layar HP kecil, kita harus kecilkan logonya khusus di HP */
@media (max-width: 768px) {
    .nav-container {
        min-height: 60px; /* Di HP tingginya normal saja */
    }
    .logo img {
        height: 50px; /* Di HP logonya 50px saja cukup */
    }
}

.hamburger { display: none; cursor: pointer; font-size: 1.5rem; color: var(--text-light); }

/* --- Hero Section --- */
.hero {
    padding: 160px 0 100px;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.subtitle {
    color: var(--accent-cyan);
    letter-spacing: 2px;
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
}

.hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin: 15px 0 25px;
    font-weight: 700;
}

.hero p {
    color: var(--text-gray);
    font-size: 1.1rem;
    margin-bottom: 40px;
    max-width: 90%;
}

.image-card {
    padding: 10px;
    position: relative;
    transform: rotate(3deg);
    transition: transform 0.5s ease;
}

.image-card:hover {
    transform: rotate(0deg) scale(1.02);
}

.image-card img {
    width: 100%;
    border-radius: 15px;
    display: block;
}

/* BADGE MENGKILAT */
.float-badge {
    position: absolute;
    bottom: 30px;
    left: -30px;
    background: var(--shiny-gradient);
    color: white;
    padding: 15px 25px;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.5);
    animation: floatBadge 3s infinite alternate ease-in-out;
    border: 1px solid rgba(255,255,255,0.2);
}

@keyframes floatBadge {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

/* --- Stats --- */
.stats { padding: 50px 0; margin-top: -50px; position: relative; z-index: 2; }

/* --- Stats Update --- */
.stat-grid { 
    display: flex;            /* Ubah dari grid ke flex */
    justify-content: center;  /* Wajib: Agar posisi di tengah layar */
    align-items: center;
    gap: 100px;               /* Jarak antar angka (sesuaikan jika kejauhan) */
    flex-wrap: wrap;          /* Agar aman di layar kecil */
    text-align: center;
}

/* Pastikan di HP tetap rapi (menurun) */
@media (max-width: 768px) {
    .stat-grid {
        flex-direction: column; /* Di HP jadi susun ke bawah */
        gap: 40px;
    }
}

/* Angka Statistik jadi Cyan Mengkilat */
.stat-item h2 { 
    font-size: 3rem; 
    color: var(--accent-cyan); 
    font-family: var(--font-islamic);
    text-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
}
.stat-item p { color: var(--text-gray); font-size: 0.9rem; }

/* --- Features --- */
.features, .gallery, .cta { padding: 100px 0; }
.section-header { text-align: center; margin-bottom: 60px; }
.section-subtitle { color: var(--shiny-blue); text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; }
.section-header h2 { font-size: 2.5rem; margin-top: 10px; font-family: var(--font-islamic); }

/* Garis dekorasi jadi gradasi biru */
.line-decoration { 
    width: 80px; 
    height: 4px; 
    background: var(--shiny-gradient); 
    margin: 15px auto; 
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }

.feature-card {
    padding: 40px 30px;
    text-align: center;
    transition: all 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: var(--shiny-blue);
    background: rgba(14, 165, 233, 0.05);
    box-shadow: 0 0 30px rgba(14, 165, 233, 0.15);
}

.icon-box {
    width: 70px;
    height: 70px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: var(--accent-cyan); /* Icon cyan */
    font-size: 1.8rem;
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 0 10px rgba(6, 182, 212, 0.1);
}

/* --- Gallery --- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.gallery-item { position: relative; border-radius: 15px; overflow: hidden; height: 250px; cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.gallery-item:hover img { transform: scale(1.1); }
.overlay {
    position: absolute; inset: 0; background: rgba(2, 6, 23, 0.7);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s;
    backdrop-filter: blur(3px);
}
.gallery-item:hover .overlay { opacity: 1; }
.overlay i { 
    color: var(--accent-cyan); 
    font-size: 2rem; 
    text-shadow: 0 0 15px var(--accent-cyan);
}

/* --- CTA --- */
.cta-card { padding: 60px; text-align: center; position: relative; overflow: hidden; }
/* Efek cahaya belakang CTA diubah biru */
.cta-card::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
    pointer-events: none;
}
.cta-form {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}
.cta-form input {
    padding: 12px 20px;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    outline: none;
    width: 300px;
}
.cta-form input:focus { 
    border-color: var(--shiny-blue);
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.2);
}

/* --- Footer --- */
footer { background: #020617; padding: 80px 0 30px; border-top: 1px solid var(--glass-border); }
.footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; margin-bottom: 50px; }
.footer-brand h3 { color: var(--shiny-blue); font-family: var(--font-islamic); margin-bottom: 15px; }
.footer-links, .footer-contact { display: flex; flex-direction: column; gap: 15px; }
.footer-links a { color: var(--text-gray); text-decoration: none; transition: 0.3s; }
.footer-links a:hover { color: var(--accent-cyan); padding-left: 5px; text-shadow: 0 0 8px rgba(6,182,212,0.5); }
.copyright { text-align: center; color: var(--text-gray); padding-top: 30px; border-top: 1px solid #1e293b; }

/* --- Animations Classes --- */
.hidden-left { opacity: 0; transform: translateX(-50px); transition: all 1s; }
.hidden-right { opacity: 0; transform: translateX(50px); transition: all 1s; }
.hidden-bottom { opacity: 0; transform: translateY(50px); transition: all 0.8s; }
.hidden-scale { opacity: 0; transform: scale(0.8); transition: all 0.8s; }

.visible { opacity: 1; transform: translate(0) scale(1); }

/* --- Responsive --- */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.5rem; }
    .hero-content, .footer-content, .stat-grid { grid-template-columns: 1fr; text-align: center; }
    .image-card { margin-top: 50px; }
    .float-badge { left: 50%; transform: translateX(-50%); bottom: -20px; width: 80%; }
    
    .nav-links {
        position: fixed; top: 0; right: -100%; height: 100vh; width: 70%;
        background: rgba(2, 6, 23, 0.98); flex-direction: column;
        justify-content: center; transition: 0.4s; backdrop-filter: blur(20px);
    }
    .nav-links.nav-active { right: 0; }
    .hamburger { display: block; z-index: 1001; }
}

/* --- UPDATE CTA SECTION WITH POSTER --- */

/* Hapus padding lama, kita atur ulang */
.cta-card {
    padding: 0; 
    overflow: hidden;
    text-align: left; /* Reset alignment jadi kiri */
}

/* Wrapper untuk membagi 2 kolom */
.cta-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 450px;
}

/* Kolom Kiri (Teks & Form) */
.cta-text-content {
    padding: 50px;
    flex: 1;
    max-width: 60%;
    z-index: 2;
}

.cta-text-content h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
    line-height: 1.3;
    /* Text gradient biru */
    background: var(--shiny-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; 
}

.cta-text-content p {
    color: var(--text-gray);
    margin-bottom: 30px;
    font-size: 1rem;
}

/* Styling Form Baru (Vertical Stack) */
.cta-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 0; /* Reset margin lama */
    justify-content: flex-start;
}

.input-group {
    position: relative;
    width: 100%;
}

.input-group i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--shiny-blue);
    z-index: 2;
}

.cta-form input {
    width: 100%; /* Full width */
    padding: 15px 15px 15px 50px; /* Space untuk icon */
    background: rgba(2, 6, 23, 0.6); /* Lebih gelap biar kontras */
    border: 1px solid var(--glass-border);
}

.cta-form button {
    justify-content: center;
    margin-top: 10px;
    width: 100%;
}

/* Kolom Kanan (Poster Area) */
.cta-poster-area {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
}

.poster-frame {
    position: relative;
    width: 100%;
    max-width: 350px; /* Batas lebar poster */
    border-radius: 15px;
    transform: rotate(3deg); /* Sedikit miring estetik */
    transition: all 0.5s ease;
}

.poster-frame:hover {
    transform: rotate(0deg) scale(1.02);
}

.poster-frame img {
    width: 100%;
    border-radius: 15px;
    border: 2px solid var(--shiny-blue); /* Border biru mengkilat */
    box-shadow: 0 0 30px rgba(14, 165, 233, 0.3);
    display: block;
}

/* Efek Glow di belakang poster */
.glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: var(--shiny-blue);
    filter: blur(60px);
    opacity: 0.2;
    z-index: -1;
    border-radius: 50%;
}

/* --- RESPONSIVE MOBILE (HP) --- */
@media (max-width: 768px) {
    
    /* 1. PERBAIKAN LOGO DI HP */
    .nav-container {
        min-height: 80px; /* Wadah navbar diperbesar */
        padding: 0 20px;
    }

    .logo img {
        height: 65px; /* Logo diperbesar (tadinya 40px) */
        max-height: 65px; 
        width: auto;
    }

    /* 2. PERBAIKAN MENU HAMBURGER (SLIDE MENU) */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* Sembunyi di kanan */
        height: 100vh;
        width: 75%; /* Lebar menu 75% layar */
        
        /* GANTI BACKGROUND JADI PUTIH AGAR TEKS KELIHATAN */
        background: rgba(255, 255, 255, 0.98); 
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: -10px 0 30px rgba(0,0,0,0.2);
        
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px; /* Jarak antar menu lebih renggang */
        transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 999;
    }

    /* Kelas aktif saat menu dibuka */
    .nav-links.nav-active {
        right: 0;
    }

    /* 3. PERBAIKAN TEKS MENU DI HP */
    .nav-links a {
        color: #0f172a; /* Teks jadi HITAM/GELAP */
        font-size: 1.3rem; /* Teks lebih besar biar enak dipencet */
        font-weight: 600;
    }

    /* Garis bawah menu saat aktif */
    .nav-links a::after {
        background: var(--shiny-blue);
        height: 3px;
        bottom: -8px;
    }

    /* Tombol Pendaftaran di dalam menu HP */
    .btn-nav {
        margin-top: 20px;
        background: var(--shiny-blue);
        color: white !important;
        width: 80%; /* Tombol lebar */
        text-align: center;
        justify-content: center;
        padding: 15px;
    }

    /* 4. PERBAIKAN ICON HAMBURGER (GARIS TIGA) */
    .hamburger {
        display: block;
        z-index: 1001; /* Pastikan di atas menu */
        color: #0f172a; /* Icon garis tiga jadi HITAM */
        font-size: 1.8rem;
        transition: 0.3s;
    }

    /* Warna Icon X (Close) saat menu terbuka */
    .hamburger.fa-times {
        color: #0f172a; 
        transform: rotate(180deg);
    }

    /* Layout Hero di HP */
    .hero h1 { font-size: 2.5rem; }
    .hero-content, .footer-content, .stat-grid { 
        grid-template-columns: 1fr; 
        text-align: center; 
    }
    
    .image-card { margin-top: 50px; }
    .float-badge { left: 50%; transform: translateX(-50%); bottom: -20px; width: 80%; }
}

/* --- SOCIAL MEDIA SECTION --- */
.social-section {
    padding: 80px 0 120px; /* Padding bawah agak besar biar napas sebelum footer */
    position: relative;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efek bounce */
}

/* Typography di dalam card */
.social-card h3 {
    color: var(--text-light);
    font-size: 1.2rem;
    margin-top: 15px;
    font-weight: 600;
    transition: color 0.3s;
}

.social-card span {
    color: var(--text-gray);
    font-size: 0.85rem;
    margin-top: 5px;
}

/* Base Icon Style (Cyan Theme) */
.social-icon {
    font-size: 2.5rem;
    color: var(--accent-cyan);
    transition: all 0.4s ease;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.4));
}

/* --- HOVER EFFECTS (Brand Colors) --- */

/* 1. Facebook */
.social-card:hover .fb-icon {
    color: #1877F2;
    filter: drop-shadow(0 0 20px rgba(24, 119, 242, 0.8));
    transform: scale(1.2) rotate(-5deg);
}
.social-card:hover:has(.fb-icon) {
    border-color: #1877F2;
    box-shadow: 0 10px 30px rgba(24, 119, 242, 0.2);
}

/* 2. Instagram */
.social-card:hover .ig-icon {
    color: #E4405F; /* Fallback color */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 20px rgba(228, 64, 95, 0.6));
    transform: scale(1.2) rotate(5deg);
}
.social-card:hover:has(.ig-icon) {
    border-color: #E4405F;
    box-shadow: 0 10px 30px rgba(214, 36, 159, 0.2);
}

/* 3. TikTok */
.social-card:hover .tt-icon {
    color: #ffffff;
    filter: drop-shadow(2px 2px 0px #FE2C55) drop-shadow(-2px -2px 0px #25F4EE); /* Glitch effect shadow */
    transform: scale(1.2);
}
.social-card:hover:has(.tt-icon) {
    border-color: #FE2C55;
    box-shadow: 0 10px 30px rgba(254, 44, 85, 0.2);
}

/* 4. YouTube */
.social-card:hover .yt-icon {
    color: #FF0000;
    filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8));
    transform: scale(1.2) rotate(-5deg);
}
.social-card:hover:has(.yt-icon) {
    border-color: #FF0000;
    box-shadow: 0 10px 30px rgba(255, 0, 0, 0.2);
}

/* General Hover Text color change */
.social-card:hover h3 {
    color: white;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

/* --- FOOTER UPDATES (Maps & Counter) --- */

/* Update Grid menjadi 4 Kolom */
.footer-content {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr 1.5fr; /* Kolom Maps lebih lebar */
    gap: 40px;
    align-items: start;
}

/* Style Map Frame */
.map-frame {
    width: 100%;
    height: 180px; /* Tinggi peta */
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid var(--glass-border);
    margin-bottom: 20px;
    transition: all 0.3s;
}

.map-frame:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}

/* Style iframe agar grayscale (opsional, biar estetik menyatu) dan berwarna saat hover */
.map-frame iframe {
    filter: grayscale(100%) invert(90%) hue-rotate(180deg); /* Efek dark map */
    transition: filter 0.5s;
}

.map-frame:hover iframe {
    filter: grayscale(0%) invert(0%); /* Warna asli saat hover */
}

/* Visitor Counter Box */
.visitor-counter {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.6); /* Lebih gelap */
}

.vc-icon {
    width: 40px;
    height: 40px;
    background: rgba(6, 182, 212, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
    font-size: 1.2rem;
}

.vc-text {
    flex: 1;
}

.vc-text span {
    display: block;
    font-size: 0.75rem;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vc-text h5 {
    font-size: 1.2rem;
    color: var(--text-light);
    font-family: monospace; /* Font ala digital */
    margin: 0;
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

/* Indikator Online */
.vc-live {
    font-size: 0.7rem;
    color: #10b981; /* Hijau */
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(16, 185, 129, 0.1);
    padding: 4px 8px;
    border-radius: 20px;
}

.dot {
    width: 6px;
    height: 6px;
    background-color: #10b981;
    border-radius: 50%;
    animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

/* Mini Socials di Footer Brand */
.footer-socials-mini {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.footer-socials-mini a {
    color: var(--text-gray);
    transition: 0.3s;
}

.footer-socials-mini a:hover {
    color: var(--accent-cyan);
    transform: translateY(-3px);
}

/* Responsive Update untuk 4 Kolom */
@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1fr 1fr; /* Tablet: 2 kolom */
    }
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr; /* HP: 1 kolom */
        text-align: center;
    }
    
    .visitor-counter, .footer-socials-mini {
        justify-content: center;
    }
    
    .vc-text { text-align: left; } /* Teks counter tetap rata kiri biar rapi di dalam box */
}

/* --- NATIVE SLIDER & LIGHTBOX --- */

.slider-container {
    position: relative;
    width: 100%;
    padding: 0 20px;
}

/* Track Slider (Tempat Item Berjejer) */
.slider-track {
    display: flex;
    gap: 20px;
    overflow-x: auto; /* Bisa discroll menyamping */
    scroll-snap-type: x mandatory; /* Kunci scroll per item */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px; /* Space buat scrollbar */
    /* Sembunyikan scrollbar default biar rapi */
    scrollbar-width: none; 
}
.slider-track::-webkit-scrollbar { display: none; }

/* Item Slider */
.slider-item {
    flex: 0 0 100%; /* Default HP: 1 item full width */
    scroll-snap-align: center; /* Item selalu berhenti di tengah */
    height: 300px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: all 0.3s;
}

.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.slider-item:hover img { transform: scale(1.1); }
.slider-item:hover { border-color: var(--shiny-blue); }

/* Overlay Icon */
.overlay {
    position: absolute; inset: 0; background: rgba(2, 6, 23, 0.6);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: 0.3s;
}
.slider-item:hover .overlay { opacity: 1; }
.overlay i { color: var(--accent-cyan); font-size: 2rem; }

/* Tombol Navigasi Kiri Kanan */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(2, 6, 23, 0.8);
    color: var(--accent-cyan);
    border: 1px solid var(--glass-border);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    z-index: 10;
    cursor: pointer;
    transition: 0.3s;
    display: flex; align-items: center; justify-content: center;
}
.slider-btn:hover { background: var(--shiny-blue); color: white; }
.prev-btn { left: -10px; }
.next-btn { right: -10px; }

/* Responsiveness: Tablet & Desktop */
@media (min-width: 768px) {
    .slider-item { flex: 0 0 calc(50% - 10px); } /* Tablet: 2 item */
}
@media (min-width: 1024px) {
    .slider-item { flex: 0 0 calc(33.333% - 14px); } /* Desktop: 3 item */
}

/* --- NATIVE LIGHTBOX MODAL --- */
.lightbox-modal {
    display: none; /* Hidden default */
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.95);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s;
}

.lightbox-content {
    max-width: 90%;
    max-height: 80vh;
    border-radius: 5px;
    box-shadow: 0 0 50px rgba(14, 165, 233, 0.3);
    border: 2px solid var(--accent-cyan);
}

.close-lightbox {
    position: absolute;
    top: 20px; right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
.close-lightbox:hover { color: var(--accent-cyan); }

@keyframes fadeIn { from {opacity: 0} to {opacity: 1} }

/* --- WELCOME POPUP --- */
.popup-overlay {
    position: fixed;
    inset: 0; /* Full screen */
    background: rgba(2, 6, 23, 0.85); /* Background gelap transparan */
    backdrop-filter: blur(8px); /* Efek blur background */
    z-index: 9999; /* Pastikan paling atas */
    display: none; /* Sembunyi default */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Tampil */
.popup-overlay.show {
    display: flex;
    opacity: 1;
}

.popup-content {
    position: relative;
    width: 90%;
    max-width: 400px; /* Ukuran ideal poster HP */
    padding: 15px;
    text-align: center;
    transform: scale(0.8) translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efek bounce */
    border: 1px solid var(--shiny-blue);
    box-shadow: 0 0 50px rgba(14, 165, 233, 0.2);
}

/* Animasi masuk */
.popup-overlay.show .popup-content {
    transform: scale(1) translateY(0);
}

/* Tombol Close (X) */
.close-popup-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--shiny-gradient);
    border: 2px solid #fff;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s;
}

.close-popup-btn:hover {
    transform: rotate(90deg) scale(1.1);
}

/* Gambar Poster */
.popup-image-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

/* Tombol CTA di Bawah Poster */
.popup-action {
    margin-top: 15px;
}

.popup-action .btn {
    width: 100%;
    justify-content: center;
}

/* --- UPDATE CTA POSTER FOR LIGHTBOX --- */

/* Wrapper untuk overlay */
.poster-content {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Overlay di atas poster untuk indikator klik */
.poster-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 15px; /* Sama dengan border poster */
    z-index: 5;
}

.poster-frame:hover .poster-overlay {
    opacity: 1;
}

.poster-overlay i {
    color: var(--accent-cyan);
    font-size: 2.5rem;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.5));
}

.poster-overlay span {
    color: var(--text-light);
    font-size: 0.9rem;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* Modifikasi Lightbox Modal yang sudah ada agar poster lebih besar */
#ppdbPosterLightbox .lightbox-content {
    max-width: 90%;
    max-height: 95vh; /* Bisa lebih tinggi */
    width: auto; /* Biar menyesuaikan lebar poster */
}

/* --- PAGE HEADER (PROFILE) --- */
.page-header {
    height: 60vh;
    background: url('https://images.unsplash.com/photo-1519817650390-64a93db51149?q=80&w=1000&auto=format&fit=crop') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    margin-bottom: 80px;
}

.overlay-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(2, 6, 23, 0.6), var(--primary-blue));
}

.page-header .container { z-index: 2; position: relative; }
.page-header h1 {
    font-size: 3.5rem;
    font-family: var(--font-islamic);
    color: var(--accent-cyan);
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
}

/* --- MUDIR / SAMBUTAN SECTION --- */
.mudir-content {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 50px;
    border-radius: 30px;
}

.mudir-image {
    flex: 1;
    position: relative;
}

.mudir-image img {
    width: 100%;
    border-radius: 20px;
    border: 2px solid var(--shiny-blue);
    box-shadow: 0 0 30px rgba(14, 165, 233, 0.3);
}

.mudir-badge {
    position: absolute;
    bottom: -20px; right: -20px;
    background: var(--shiny-gradient);
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    color: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.mudir-text { flex: 1.5; }
.mudir-text h2 { color: var(--shiny-blue); font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; }
.mudir-text h3 { font-family: var(--font-islamic); font-size: 2.5rem; margin-bottom: 10px; }
.arabic-quote { font-family: var(--font-islamic); font-size: 1.8rem; color: var(--accent-cyan); margin-bottom: 15px; }
.signature { height: 60px; margin-top: 20px; opacity: 0.7; }

/* --- VISI MISI --- */
.visi-box {
    text-align: center;
    padding: 40px;
    margin-bottom: 40px;
    border: 2px solid var(--shiny-blue);
    background: rgba(6, 182, 212, 0.05);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.1);
}
.visi-box h3 { font-size: 2rem; color: var(--accent-cyan); font-family: var(--font-islamic); margin-bottom: 15px; }
.visi-box p { font-size: 1.3rem; font-style: italic; }

.misi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.misi-card { padding: 30px; position: relative; overflow: hidden; }
.misi-card .number {
    font-size: 4rem; font-weight: bold; color: rgba(255,255,255,0.05);
    position: absolute; top: 0; right: 20px; font-family: var(--font-islamic);
}
.misi-card:hover { background: rgba(255,255,255,0.05); border-color: var(--shiny-blue); }

/* --- TIMELINE SEJARAH --- */
.timeline { position: relative; max-width: 1000px; margin: 0 auto; }
.timeline::after {
    content: ''; position: absolute; width: 4px; background: var(--glass-border);
    top: 0; bottom: 0; left: 50%; margin-left: -2px; border-radius: 2px;
}

.timeline-item { padding: 10px 40px; position: relative; width: 50%; }
.timeline-item.left { left: 0; }
.timeline-item.right { left: 50%; }

.timeline-item::after {
    content: ''; position: absolute; width: 20px; height: 20px; right: -10px; top: 25px;
    background: var(--primary-blue); border: 4px solid var(--accent-cyan);
    border-radius: 50%; z-index: 1; box-shadow: 0 0 10px var(--accent-cyan);
}
.timeline-item.right::after { left: -10px; }

.timeline-item .content { padding: 20px 30px; position: relative; border-radius: 15px; }
.timeline-item h2 { color: var(--accent-cyan); font-family: var(--font-islamic); font-size: 2rem; }

/* --- TEAM / GURU --- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }
.team-card { padding: 30px 20px; text-align: center; transition: 0.4s; }
.team-card:hover { transform: translateY(-10px); border-color: var(--shiny-blue); }

.team-img {
    width: 120px; height: 120px; margin: 0 auto 20px; border-radius: 50%; overflow: hidden;
    border: 3px solid var(--glass-border); padding: 3px;
}
.team-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.team-card h3 { font-size: 1.1rem; margin-bottom: 5px; color: var(--text-light); }
.team-card span { display: block; font-size: 0.85rem; color: var(--accent-cyan); margin-bottom: 15px; }

.team-social a { color: var(--text-gray); margin: 0 5px; transition: 0.3s; font-size: 1.1rem; }
.team-social a:hover { color: var(--accent-cyan); }

/* Responsive Profile */
@media (max-width: 768px) {
    .mudir-content { flex-direction: column; text-align: center; padding: 30px; }
    .mudir-badge { right: 50%; transform: translateX(50%); bottom: -25px; }
    
    .timeline::after { left: 31px; }
    .timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; }
    .timeline-item.right { left: 0; }
    .timeline-item::after { left: 21px; }
    .timeline-item.right::after { left: 21px; }
}

/* --- CSS KHUSUS SEJARAH & KEUNGGULAN --- */

/* Tipografi intro */
.subtitle-sm {
    color: var(--accent-cyan);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.intro-text {
    color: var(--text-gray);
    margin-bottom: 30px;
    line-height: 1.7;
    text-align: justify;
}

.intro-text b {
    color: var(--text-light);
    font-weight: 600;
}

/* Grid Layout untuk Poin Keunggulan */
.keunggulan-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 kolom ke bawah */
    gap: 20px;
    margin-top: 20px;
}

/* Item Keunggulan */
.unggul-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.unggul-item:hover {
    background: rgba(6, 182, 212, 0.05);
    border-color: var(--glass-border);
    transform: translateX(5px); /* Geser dikit pas di hover */
}

/* Ikon di sebelah kiri */
.unggul-icon {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
    font-size: 1.2rem;
    border: 1px solid var(--glass-border);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.1);
}

/* Teks Judul & Deskripsi Poin */
.unggul-desc h4 {
    color: var(--text-light);
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 600;
}

.unggul-desc p {
    color: var(--text-gray);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.5;
}

/* Responsive: Tablet ke atas jadi 2 kolom */
@media (min-width: 768px) {
    .keunggulan-grid {
        grid-template-columns: 1fr 1fr; /* Jadi 2 kolom sebelah-sebelahan */
    }
}

/* --- STRUKTUR ORGANISASI KOMPLEKS (PONDOK BESAR) --- */
.org-tree-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 20px 0;
}

.org-tier {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Styles Kartu Berdasarkan Level */
.org-card {
    text-align: center;
    transition: 0.3s;
    background: rgba(2, 6, 23, 0.7);
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.org-card:hover {
    transform: translateY(-5px);
    border-color: var(--shiny-blue);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.2);
}

/* Level 1 (Big) */
.big-card {
    padding: 30px;
    width: 280px;
    background: linear-gradient(145deg, rgba(2,6,23,0.8), rgba(15,23,42,0.9));
    border: 1px solid var(--shiny-blue); /* Border emas/biru */
}
.big-card .org-img { width: 100px; height: 100px; }
.big-card h3 { font-size: 1.3rem; margin-top: 15px; color: var(--text-light); }

/* Level 2 (Medium) */
.medium-card {
    padding: 20px;
    width: 240px;
}
.medium-card .org-img { width: 80px; height: 80px; }
.medium-card h3 { font-size: 1.1rem; margin-top: 10px; }

/* Level 3 (Small / List Style) */
.dept-group {
    position: relative;
}
.small-card {
    padding: 15px;
    width: 220px;
    min-height: 140px;
    gap: 10px;
}
.dept-icon {
    width: 40px; height: 40px;
    background: rgba(6, 182, 212, 0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-cyan);
    font-size: 1.2rem;
    margin-bottom: 5px;
}
.small-card h3 { font-size: 1rem; margin: 0; }
.small-card small { display: block; color: var(--text-gray); font-size: 0.75rem; margin-top: 3px; }

/* Foto Profil Umum */
.org-img {
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--glass-border);
    padding: 3px;
    margin-bottom: 10px;
}
.org-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Role Badge (Tulisan Jabatan) */
.role-badge {
    display: inline-block;
    padding: 5px 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--accent-cyan);
    border: 1px solid var(--glass-border);
    margin-top: 5px;
}
.role-badge.main {
    background: var(--shiny-gradient);
    color: white;
    border: none;
    font-weight: bold;
}

/* --- GARIS PENGHUBUNG (LINES) --- */
.tree-line-vertical {
    width: 2px;
    height: 40px;
    background: var(--shiny-blue);
    margin: 0 auto;
    box-shadow: 0 0 8px var(--shiny-blue);
}

.tree-branch-horizontal {
    width: 70%;
    height: 2px;
    background: var(--shiny-blue);
    margin: 0 auto 30px; /* Jarak ke level 3 */
    position: relative;
    box-shadow: 0 0 8px var(--shiny-blue);
}

/* Garis turun dari cabang horizontal ke masing-masing divisi level 3 */
.tree-branch-horizontal::before {
    content: ''; position: absolute; top: 0; left: 13%; /* Posisi garis turun kiri */
    width: 2px; height: 30px; background: var(--shiny-blue);
}
.tree-branch-horizontal::after {
    content: ''; position: absolute; top: 0; right: 13%; /* Posisi garis turun kanan */
    width: 2px; height: 30px; background: var(--shiny-blue);
}

/* Garis tengah penghubung level 2 ke 3 */
.org-tree-wrapper .tree-branch-horizontal .center-line {
     /* Logic CSS complex, kita simplify saja dengan layout flex gap */
}

/* Responsiveness */
@media (max-width: 900px) {
    .org-tier { flex-wrap: wrap; }
    .tree-line-vertical, .tree-branch-horizontal { display: none; } /* Hilangkan garis di HP */
    
    .tier-1, .tier-2, .tier-3 {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
    }
    
    /* Tambah panah turun manual di HP */
    .org-card::after {
        content: '▼';
        position: absolute;
        bottom: -25px;
        color: var(--glass-border);
    }
    .tier-3 .org-card::after { display: none; } /* Level terakhir ga usah panah */
    
    .medium-card, .small-card, .big-card { width: 100%; max-width: 320px; }
}

/* --- RESPONSIVE NAV BUTTON --- */
@media (max-width: 600px) {
    /* Sembunyikan teks di HP, sisakan icon panah saja */
    .btn-text {
        display: none;
    }
    
    /* Atur padding tombol di HP biar rapi */
    .nav-container .btn {
        padding: 10px 15px;
        border-radius: 50%; /* Jadi bulat di HP */
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-container .btn i {
        margin: 0; /* Reset margin icon */
    }
}

/* --- SUCCESS TOAST NOTIFICATION --- */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px); /* Sembunyi di bawah */
    background: rgba(16, 185, 129, 0.9); /* Hijau Emerald */
    backdrop-filter: blur(10px);
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Efek mantul */
    z-index: 10000;
    border: 1px solid rgba(255,255,255,0.2);
    white-space: nowrap;
}

.toast-notification.show {
    transform: translateX(-50%) translateY(0); /* Muncul */
    opacity: 1;
}

.toast-notification i {
    font-size: 1.2rem;
}

/* --- PERBAIKAN ALIGNMENT FOOTER --- */

.footer-contact p {
    display: flex;            /* Wajib: Biar sejajar ke samping */
    align-items: flex-start;  /* Icon sejajar dengan baris pertama teks */
    gap: 15px;                /* Jarak antara icon dan teks */
    margin-bottom: 15px;      /* Jarak antar baris kontak */
    line-height: 1.4;         /* Jarak antar baris teks (untuk alamat panjang) */
}

.footer-contact i {
    width: 20px;              /* Lebar tetap untuk icon biar lurus vertikal */
    text-align: center;       /* Icon rata tengah di kolomnya */
    flex-shrink: 0;           /* PENTING: Agar icon tidak gepeng/mengecil */
    margin-top: 4px;          /* Turunkan dikit biar pas sama huruf pertama */
    color: var(--accent-cyan);
}

/* --- TAMBAHAN STYLE UNTUK LIST GURU --- */

/* Style untuk Kartu List (Guru) */
.list-card {
    width: 350px; /* Lebar kartu daftar guru */
    padding: 25px;
    align-items: flex-start; /* Rata kiri */
    text-align: left;
}

.list-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}

.list-header h3 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--accent-cyan);
    font-family: var(--font-islamic);
}

/* Daftar Nama Guru */
.teacher-list {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.teacher-list li {
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
    color: var(--text-light);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}

.teacher-list li::before {
    content: '•';
    color: var(--shiny-blue);
    font-weight: bold;
    margin-right: 10px;
}

.teacher-list li:last-child {
    border-bottom: none;
}

/* Khusus Guru Diniyah (Bagi 2 Kolom biar ga kepanjangan) */
.two-column-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Kolom */
    column-gap: 20px;
}

/* Responsif di HP */
@media (max-width: 768px) {
    .list-card {
        width: 100%; /* Full width di HP */
    }
    .two-column-list {
        grid-template-columns: 1fr; /* Balik 1 kolom di HP biar ga sempit */
    }
}

/* --- RESPONSIVE MOBILE (HP) - FINAL FIX --- */
@media (max-width: 768px) {

    /* 1. PERBAIKAN LAYOUT UMUM */
    .container {
        padding: 0 20px; /* Beri jarak kiri kanan biar ga mentok */
        width: 100%;
    }
    
    /* 2. NAVBAR & LOGO DI HP */
    .nav-container {
        min-height: 70px;
        padding: 0 15px;
    }
    .logo img {
        height: 50px; /* Ukuran logo pas di HP */
    }

    /* 3. MENU MOBILE (PUTIH BERSIH) */
    .nav-links {
        position: fixed;
        top: 0; right: -100%;
        height: 100vh; width: 80%;
        background: #ffffff; /* Background Putih */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        transition: 0.4s;
        z-index: 999;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }
    .nav-links.nav-active { right: 0; }
    
    /* Teks Menu di HP */
    .nav-links a {
        color: #0f172a; /* Teks Hitam */
        font-size: 1.2rem;
        font-weight: 600;
    }
    .hamburger { display: block; color: #0f172a; font-size: 1.6rem; }

    /* 4. PERBAIKAN JUDUL HALAMAN (HERO & PROFILE) */
    .hero h1 {
        font-size: 2.2rem; /* Kecilkan font judul utama */
        line-height: 1.2;
    }
    
    .page-header {
        height: 50vh; /* Kurangi tinggi header profil */
        padding-top: 60px; /* Biar ga ketutupan navbar */
    }
    .page-header h1 {
        font-size: 2.5rem; /* Judul Profil dikecilkan */
    }

    /* 5. PERBAIKAN FORMULIR & TOMBOL (PENTING!) */
    .cta-wrapper {
        flex-direction: column-reverse; /* Poster di atas, Form di bawah */
        padding: 30px 10px;
    }
    
    .cta-text-content {
        padding: 20px 0 0 0;
        max-width: 100%;
    }

    /* Judul "Siap Bergabung..." dikecilkan */
    .cta-text-content h2 {
        font-size: 1.8rem; /* Ukuran font aman buat HP */
        word-wrap: break-word; /* Biar kata ga kepotong aneh */
        line-height: 1.3;
    }

    /* Input & Tombol jadi Full Width (Lebar Penuh) */
    .cta-form {
        width: 100%;
        align-items: stretch; /* Paksa melebar */
    }
    
    .input-group {
        width: 100%;
        margin-bottom: 10px;
    }

    .cta-form input {
        width: 100%; /* Lebar penuh */
        box-sizing: border-box; /* Agar padding ga bikin lewat layar */
        font-size: 1rem;
        padding: 12px 15px 12px 45px;
    }

    .cta-form button {
        width: 100%; /* Tombol lebar penuh */
        margin-top: 10px;
    }

    /* 6. PERBAIKAN FOOTER DI HP */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }
    
    /* Ratakan teks kontak ke tengah khusus di HP */
    .footer-contact p {
        justify-content: center; 
        text-align: left; /* Teks tetap rata kiri, tapi bloknya di tengah */
    }
    
    /* Tombol Back di Profile (Kanan Atas) */
    .nav-container .btn {
        width: 40px; height: 40px; padding: 0;
        border-radius: 50%;
        display: flex; justify-content: center; align-items: center;
    }
    .btn-text { display: none; } /* Sembunyikan tulisan "Kembali" di HP */
}

/* --- CSS HALAMAN ARTIKEL --- */

.article-list-section { padding: 50px 0; min-height: 80vh; }
.article-detail-section { padding: 120px 0 50px; }

/* 1. Search Bar Glass */
.search-container {
    padding: 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}
.search-container form {
    display: flex;
    width: 100%;
    max-width: 600px;
    gap: 10px;
}
.search-container input {
    flex: 1;
    padding: 12px 20px;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    outline: none;
}
.search-container button {
    padding: 12px 25px;
    border-radius: 50px;
    background: var(--shiny-gradient);
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

/* 2. Glass Table (Tabel Transparan) */
.glass-table-wrapper {
    overflow-x: auto;
    border-radius: 15px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    background: rgba(2, 6, 23, 0.4);
}

.glass-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-light);
}

.glass-table th {
    background: rgba(14, 165, 233, 0.2); /* Biru transparan */
    padding: 15px;
    text-align: left;
    font-weight: 600;
    color: var(--accent-cyan);
    border-bottom: 1px solid var(--glass-border);
}

.glass-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: 0.3s;
}

/* Hover Effect pada Baris */
.glass-table tr:hover td {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.thumb-mini {
    width: 50px; height: 35px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 15px;
    border: 1px solid var(--glass-border);
}

.flex-title {
    display: flex;
    align-items: center;
    font-weight: 500;
}

.btn-read {
    color: var(--shiny-blue);
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
}
.glass-table tr:hover .btn-read { margin-left: 5px; color: white; }

/* 3. Detail Artikel */
.detail-card { padding: 40px; }
.detail-header h1 { font-family: var(--font-islamic); font-size: 2.5rem; margin: 15px 0 30px; line-height: 1.3; }
.date-badge { color: var(--accent-cyan); font-size: 0.9rem; }

.detail-image img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 30px;
    border: 1px solid var(--glass-border);
}

.detail-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #e2e8f0;
}
.detail-content p { margin-bottom: 20px; }

/* Share Buttons */
.share-area {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--glass-border);
    display: flex; align-items: center; gap: 15px;
}
.share-area i { font-size: 1.5rem; color: var(--text-gray); transition: 0.3s; }
.share-area i:hover { color: var(--shiny-blue); transform: scale(1.2); }

/* Responsive Table */
@media (max-width: 768px) {
    .glass-table th:nth-child(2), 
    .glass-table td:nth-child(2) { display: none; } /* Sembunyikan tanggal di HP */
    .detail-card { padding: 20px; }
    .detail-header h1 { font-size: 1.8rem; }
}

/* --- GAYA ARTIKEL TEMA "NETFLIX / POSTER" --- */

.movie-section {
    padding: 40px 0 100px;
    min-height: 100vh;
}

/* Judul Kategori */
.section-title {
    font-size: 1.5rem;
    color: var(--text-light);
    margin-bottom: 25px;
    font-weight: 600;
    border-left: 4px solid var(--shiny-blue);
    padding-left: 15px;
}

/* Search Bar Baru */
.movie-search {
    margin-bottom: 40px;
    position: relative;
    max-width: 500px;
}
.movie-search input {
    width: 100%;
    padding: 15px 20px 15px 50px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
    transition: 0.3s;
}
.movie-search input:focus {
    background: rgba(2, 6, 23, 0.8);
    border-color: var(--shiny-blue);
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.3);
}
.search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-gray);
}

/* GRID SYSTEM (Poster Layout) */
.movie-grid {
    display: grid;
    /* Membuat kolom otomatis, minimal lebar 160px (ukuran poster standar) */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
    gap: 30px 20px; /* Jarak atas-bawah 30, kiri-kanan 20 */
}

/* Kartu Artikel */
.movie-card {
    text-decoration: none;
    color: white;
    display: block;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

/* Efek Hover Zoom */
.movie-card:hover {
    transform: scale(1.05); /* Membesar sedikit saat disentuh */
    z-index: 2;
}

/* Bingkai Gambar (Poster) */
.poster-frame {
    width: 100%;
    aspect-ratio: 2 / 3; /* Rasio Portrait (Poster Film) */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    margin-bottom: 12px;
    background: #1e293b; /* Placeholder color */
}

.poster-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Gambar mengisi penuh tanpa gepeng */
    transition: 0.3s;
}

/* Overlay "Baca" saat hover */
.play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
    backdrop-filter: blur(2px);
    font-weight: bold;
    color: var(--shiny-blue);
    gap: 8px;
}

.movie-card:hover .play-overlay {
    opacity: 1;
}

/* Info Judul & Tanggal */
.movie-info h4 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
    /* Batasi judul max 2 baris */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.meta-date {
    font-size: 0.8rem;
    color: var(--text-gray);
}

/* Empty State */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px;
    color: var(--text-gray);
}

/* Responsive di HP */
@media (max-width: 768px) {
    .movie-grid {
        grid-template-columns: repeat(2, 1fr); /* Di HP jadi 2 kolom */
        gap: 15px;
    }
    .poster-frame {
        border-radius: 6px;
    }
    .movie-info h4 { font-size: 0.9rem; }
}

/* --- CSS TRIX EDITOR GAMBAR --- */

/* Gambar Default (Rata Kiri & Ada Jarak) */
.trix-content img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 8px;
}

/* Gambar Rata Kiri */
.trix-content .attachment--preview[data-trix-attributes*='"alignment":"left"'] {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

/* Gambar Rata Kanan */
.trix-content .attachment--preview[data-trix-attributes*='"alignment":"right"'] {
    float: right;
    margin-left: 20px;
    margin-bottom: 20px;
}

/* Gambar Rata Tengah */
.trix-content .attachment--preview[data-trix-attributes*='"alignment":"center"'] {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.trix-content .attachment--preview[data-trix-attributes*='"alignment":"center"'] img {
    display: block; /* Penting biar margin auto jalan */
}

/* --- HERO SLIDER (Artikel Otomatis) --- */
.slider-wrapper {
    position: relative;
    width: 100%;
    height: 400px; /* Tinggi slider */
    overflow: hidden;
    border-radius: 20px;
}

.slide-item {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Efek Fade Halus */
    z-index: 1;
}

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

.slide-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

/* Caption di Bawah Gambar */
.slide-caption {
    position: absolute;
    bottom: 20px; left: 20px; right: 20px;
    background: rgba(2, 6, 23, 0.85); /* Gelap Transparan */
    backdrop-filter: blur(5px);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--shiny-blue);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s ease 0.3s; /* Muncul sedikit terlambat */
}

.slide-item.active .slide-caption {
    transform: translateY(0);
    opacity: 1;
}

.slide-caption h4 {
    color: white;
    font-size: 1rem;
    margin: 5px 0 0;
}

.badge-new {
    background: var(--shiny-gradient);
    color: white;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}

/* Responsif di HP */
@media (max-width: 768px) {
    .slider-wrapper { height: 250px; }
    .slide-caption h4 { font-size: 0.9rem; }

    /* Wadah Tombol */
    .hero-buttons {
        display: flex !important;
        flex-direction: row !important; /* Paksa baris ke samping */
        justify-content: center;
        align-items: center;
        gap: 10px; /* Jarak antar tombol */
        width: 100%;
        max-width: 100%; /* Pastikan tidak dibatasi */
        margin-top: 20px;
    }

    /* Tombolnya */
    .hero-buttons .btn {
        width: auto !important;
        flex: 1;          /* Membagi lebar 50:50 */
        padding: 12px 5px !important; /* Padding dikecilkan biar muat */
        font-size: 0.85rem !important; /* Font dikecilkan sedikit */
        margin: 0 !important;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap; /* Teks jangan turun baris */
    }
    
    /* Sembunyikan ikon panah di HP biar teksnya muat */
    .hero-buttons .btn i {
        display: none !important; 
    }
}