/* =========================================================
   SMPI MIFTAHUL QURAN - TEMA ISLAMI FORMAL & ELEGAN
   Sistem Desain dengan Kontras Tinggi & Keterbacaan Optimal
   ========================================================= */

:root {
    --hijau-tua: #0b3d2e;
    --hijau: #145a32;
    --hijau-muda: #1f7a4f;
    --emas: #c9a227;
    --emas-terang: #ffdf79;
    --emas-teks: #8f6404;      /* Emas gelap ber-kontras tinggi untuk teks di background terang */
    --emas-gelap: #735003;
    --krem: #fbf8f1;
    --krem-tua: #f4ede0;
    --teks-gelap: #16221c;     /* Teks utama gelap pekat untuk keterbacaan tajam */
    --teks-muted: #3d4f45;     /* Teks sekunder/muted ber-kontras tinggi */
    --putih: #ffffff;
    --font-judul: 'Playfair Display', Georgia, serif;
    --font-teks: 'Poppins', 'Segoe UI', -apple-system, sans-serif;
    --font-arab: 'Amiri', serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-teks);
    color: var(--teks-gelap);
    background-color: var(--krem);
    line-height: 1.75;
    font-size: 0.98rem;
    -webkit-font-smoothing: antialiased;
}

/* ================= TYPOGRAPHY & HEADING ================= */
h1, h2, h3, h4, h5, h6, .font-judul {
    font-family: var(--font-judul);
    color: var(--hijau-tua);
    font-weight: 700;
    line-height: 1.35;
}

a { 
    text-decoration: none; 
    transition: color .2s ease, background-color .2s ease;
}

/* Penegasan Keterbacaan Teks Bootstrap Muted */
.text-muted {
    color: var(--teks-muted) !important;
}

p {
    color: var(--teks-gelap);
    margin-bottom: 1rem;
}

/* ================= POLA DEKORASI ISLAMI ================= */
.pola-islami {
    background-image:
        radial-gradient(circle at 10px 10px, rgba(201,162,39,0.12) 2px, transparent 2px);
    background-size: 32px 32px;
}

.garis-emas {
    width: 84px;
    height: 4px;
    background: linear-gradient(90deg, var(--emas), var(--emas-terang));
    margin: 14px auto 24px;
    border-radius: 3px;
    position: relative;
}
.garis-emas::before, .garis-emas::after {
    content: '';
    position: absolute;
    top: -3px;
    width: 10px; height: 10px;
    background: var(--emas);
    border-radius: 50%;
}
.garis-emas::before { left: -18px; }
.garis-emas::after { right: -18px; }

.garis-emas.garis-kiri {
    margin: 14px 0 24px;
}
.garis-emas.garis-kiri::before, .garis-emas.garis-kiri::after { display: none; }

.judul-section {
    text-align: center;
    margin-bottom: 12px;
}
.judul-section .label-arab {
    font-family: var(--font-arab);
    color: var(--emas-teks);
    font-size: 1.45rem;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}
.judul-section h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--hijau-tua);
}
.judul-section p.sub {
    max-width: 680px;
    margin: 0 auto;
    color: var(--teks-muted);
    font-size: 1rem;
}

.label-section {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--emas-teks);
    margin-bottom: 8px;
}
.label-section.label-emas { 
    color: var(--emas-terang) !important; 
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ================= TOPBAR ================= */
.topbar {
    background-color: var(--hijau-tua);
    color: #f7fbf8;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 9px 0;
    border-bottom: 1px solid rgba(201,162,39,0.25);
}
.topbar a { 
    color: #ffffff; 
}
.topbar a:hover {
    color: var(--emas-terang);
}
.topbar .pemisah { color: var(--emas-terang); margin: 0 10px; opacity: 0.8; }
.topbar .sosial a {
    color: var(--emas-terang);
    margin-left: 14px;
    font-size: 1rem;
}
.topbar .sosial a:hover {
    color: #ffffff;
    transform: scale(1.15);
}

/* ================= NAVBAR ================= */
.navbar-islami {
    background-color: var(--putih);
    box-shadow: 0 3px 15px rgba(11, 61, 46, 0.09);
    padding: 12px 0;
}
.navbar-islami .navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.navbar-islami .navbar-brand img {
    height: 52px;
    width: 52px;
    object-fit: contain;
}
.navbar-islami .brand-text .nama-sekolah {
    font-family: var(--font-judul);
    font-weight: 700;
    color: var(--hijau-tua);
    font-size: 1.2rem;
    line-height: 1.2;
    display: block;
}
.navbar-islami .brand-text .slogan {
    font-size: 0.75rem;
    color: var(--emas-teks);
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.navbar-islami .nav-link {
    color: #1a2a22 !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 16px !important;
    position: relative;
}
.navbar-islami .nav-link:hover,
.navbar-islami .nav-link.active {
    color: var(--hijau) !important;
}
.navbar-islami .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 2px; left: 16px; right: 16px;
    height: 3px;
    background: var(--emas);
    border-radius: 2px;
}
.btn-ppdb {
    background: linear-gradient(135deg, #d4a017, #b8860b);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 9px 24px !important;
    border-radius: 30px;
    margin-left: 10px;
    box-shadow: 0 4px 12px rgba(184,134,11,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    display: inline-flex;
    align-items: center;
}
.btn-ppdb:hover { 
    background: linear-gradient(135deg, #e5b32e, #c99713);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(184,134,11,0.4);
}

/* ================= HERO / SLIDER ================= */
.hero-slider {
    position: relative;
    height: 78vh;
    min-height: 520px;
    background-color: var(--hijau-tua);
}
.hero-slider .carousel-item {
    height: 78vh;
    min-height: 520px;
    background-size: cover;
    background-position: center;
}
.hero-slider .carousel-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,61,46,0.85) 0%, rgba(11,61,46,0.65) 50%, rgba(11,61,46,0.92) 100%);
}
.hero-img { 
    height: 78vh; 
    min-height: 520px; 
    object-fit: cover; 
}
.hero-caption {
    position: relative;
    z-index: 2;
    color: #ffffff;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    padding-top: 10vh;
}
.hero-caption .label-arab {
    font-family: var(--font-arab);
    color: var(--emas-terang);
    font-size: 1.7rem;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.hero-caption h1 {
    color: #ffffff;
    font-size: 2.7rem;
    font-weight: 700;
    margin-bottom: 16px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.hero-caption p {
    font-size: 1.15rem;
    color: #f7faf8;
    font-weight: 500;
    line-height: 1.65;
    margin-bottom: 24px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.badge-asrama-hero {
    display: inline-block;
    background: #ffffff;
    color: var(--hijau-tua);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 8px 22px;
    border-radius: 30px;
    border: 2px solid var(--emas);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.spmb-banner-mencolok {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #145a32, #0b3d2e);
    border: 2px solid var(--emas-terang);
    padding: 10px 24px;
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.35);
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 600;
    flex-wrap: wrap;
    justify-content: center;
}
.spmb-banner-mencolok .icon-mencolok {
    color: var(--emas-terang);
    font-size: 1.3rem;
    animation: bounceIcon 2s infinite ease-in-out;
}
.spmb-badge-live {
    background: #dc3545;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    animation: pulseBadge 1.8s infinite;
}

@keyframes bounceIcon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(-10deg); }
}
@keyframes pulseBadge {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220,53,69,0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(220,53,69,0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220,53,69,0); }
}

/* ================= TOMBOL UTAMA ================= */
.btn-hero-emas, .btn-emas-solid {
    background: linear-gradient(135deg, #d4a017, #b8860b);
    color: #ffffff !important;
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 30px;
    border: none;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(184,134,11,0.35);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.btn-hero-emas:hover, .btn-emas-solid:hover { 
    background: linear-gradient(135deg, #e5b32e, #c99713);
    color: #ffffff !important; 
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(184,134,11,0.45);
}

.btn-hero-outline {
    border: 2px solid #ffffff;
    color: #ffffff !important;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 30px;
    display: inline-block;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(4px);
}
.btn-hero-outline:hover { 
    background: #ffffff; 
    color: var(--hijau-tua) !important;
    transform: translateY(-2px);
}

.btn-hijau {
    background: var(--hijau);
    color: var(--putih) !important;
    border: none;
    padding: 11px 28px;
    border-radius: 30px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(20,90,50,0.25);
}
.btn-hijau:hover { 
    background: var(--hijau-tua); 
    color: var(--putih) !important; 
    transform: translateY(-2px);
}

.btn-outline-hijau {
    border: 2px solid var(--hijau);
    color: var(--hijau) !important;
    font-weight: 700;
    padding: 9px 26px;
    border-radius: 30px;
    display: inline-block;
    background: #ffffff;
}
.btn-outline-hijau:hover { 
    background: var(--hijau); 
    color: var(--putih) !important; 
}

/* ================= FOTO KEPALA SEKOLAH & BINGKAI ================= */
.foto-kepsek-wrap {
    display: inline-block;
    position: relative;
    max-width: 100%;
}
.foto-bingkai-islami {
    position: relative;
    display: inline-block;
    padding: 10px;
    background: linear-gradient(135deg, rgba(201,162,39,0.35), rgba(20,90,50,0.25));
    border-radius: 24px;
    box-shadow: 0 14px 35px rgba(11, 61, 46, 0.18);
    max-width: 100%;
}
.foto-kepsek {
    width: 320px;
    max-width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: top center;
    border-radius: 18px;
    border: 6px solid #ffffff;
    display: block;
    margin: 0 auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
@media (max-width: 767px) {
    .foto-kepsek {
        width: 260px;
        height: 320px;
    }
}

/* ================= STATISTIK STRIP ================= */
.statistik-strip {
    background: linear-gradient(135deg, #0b3d2e, #145a32);
    padding: 45px 0;
    color: #ffffff;
    border-bottom: 3px solid var(--emas);
}
.statistik-strip i { 
    font-size: 2.2rem; 
    color: var(--emas-terang); 
    margin-bottom: 8px; 
    display: block; 
}
.statistik-strip h3 { 
    color: #ffffff; 
    font-size: 2.1rem; 
    font-weight: 700;
    margin-bottom: 2px; 
}
.statistik-strip p { 
    margin: 0; 
    color: #e5f3eb; 
    font-size: 0.92rem; 
    font-weight: 500;
}

/* ================= KARTU / CARD UMUM ================= */
.card-islami {
    background: var(--putih);
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 6px 20px rgba(11,61,46,0.07);
    transition: transform .25s ease, box-shadow .25s ease;
    height: 100%;
    border: 1px solid #e5dfcf;
}
.card-islami:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(11,61,46,0.14);
}
.card-islami img {
    height: 190px;
    width: 100%;
    object-fit: cover;
}
.card-islami h4, .card-islami h5 {
    color: var(--hijau-tua);
    font-weight: 700;
}
.card-islami p {
    color: var(--teks-gelap);
    font-size: 0.95rem;
}
.card-islami .meta { 
    font-size: 0.85rem; 
    color: var(--teks-muted); 
    font-weight: 500;
}

.icon-box {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--hijau), var(--hijau-tua));
    color: var(--emas-terang);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 16px;
    flex-shrink: 0;
}

/* Kartu Fasilitas */
.kartu-fasilitas {
    background: var(--putih);
    border: 1px solid #e5dfcf;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    transition: all .25s ease;
    box-shadow: 0 4px 16px rgba(11,61,46,0.06);
}
.kartu-fasilitas h5 {
    color: var(--hijau-tua);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.kartu-fasilitas p {
    color: var(--teks-muted);
    font-size: 0.92rem;
    margin-bottom: 0;
}
.kartu-fasilitas .icon-fasilitas {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--krem-tua);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.8rem;
    color: var(--hijau);
}
.kartu-fasilitas:hover { 
    background: var(--hijau-tua); 
    transform: translateY(-6px); 
    box-shadow: 0 12px 28px rgba(11,61,46,0.2);
}
.kartu-fasilitas:hover h5 { color: #ffffff !important; }
.kartu-fasilitas:hover p { color: #e5f3eb !important; }
.kartu-fasilitas:hover .icon-fasilitas { 
    background: rgba(255,255,255,0.15); 
    color: var(--emas-terang); 
}

/* Kartu Berita */
.kartu-berita {
    background: var(--putih);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e5dfcf;
    box-shadow: 0 6px 20px rgba(11,61,46,0.06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.kartu-berita:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 14px 30px rgba(11,61,46,0.14); 
}
.kartu-berita img { width: 100%; height: 195px; object-fit: cover; }
.kartu-berita h5 a, .kartu-berita h6 a { 
    color: var(--hijau-tua); 
    font-weight: 700;
}
.kartu-berita h5 a:hover, .kartu-berita h6 a:hover { 
    color: var(--hijau); 
}
.kategori-badge {
    background: var(--hijau);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
}
.link-baca { 
    color: var(--emas-teks); 
    font-weight: 700; 
    font-size: 0.92rem; 
}
.link-baca:hover { 
    color: var(--hijau-tua); 
}

/* Kartu Guru & Staff */
.kartu-guru {
    text-align: center;
    background: var(--putih);
    border: 1px solid #e5dfcf;
    border-radius: 16px;
    padding: 24px 16px;
    box-shadow: 0 4px 16px rgba(11,61,46,0.06);
    height: 100%;
}
.kartu-guru img {
    width: 140px; height: 140px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--krem-tua);
    margin-bottom: 14px;
    box-shadow: 0 6px 16px rgba(11,61,46,0.12);
}
.kartu-guru h6 {
    color: var(--hijau-tua);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.kartu-guru .jabatan-guru, .kartu-guru .jabatan {
    color: var(--emas-teks);
    font-size: 0.88rem;
    font-weight: 700;
    display: block;
}
.kartu-guru .mapel {
    font-size: 0.84rem;
    color: var(--teks-muted);
    margin-top: 2px;
}

/* ================= KARTU GALERI & FILTER ================= */
.filter-galeri {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 35px;
}
.btn-filter {
    background: #ffffff;
    border: 2px solid #e0d8c3;
    color: var(--teks-gelap);
    padding: 8px 22px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all .25s ease;
}
.btn-filter:hover, .btn-filter.aktif {
    background: var(--hijau);
    border-color: var(--hijau);
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(11, 61, 46, 0.2);
}

.kartu-galeri-modern {
    transition: transform .25s ease, box-shadow .25s ease;
    border: 1px solid #e8e0cc !important;
    background: #ffffff;
}
.kartu-galeri-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(11, 61, 46, 0.12) !important;
}
.kartu-galeri-modern:hover .img-galeri-thumb {
    transform: scale(1.06);
}
.kartu-galeri-modern:hover .btn-zoom-overlay {
    background: var(--hijau) !important;
}

.kartu-galeri {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(11, 61, 46, 0.08);
    cursor: pointer;
    height: 240px;
    max-height: 240px;
    border: 1px solid #e5dfcf;
    transition: transform .3s ease, box-shadow .3s ease;
}
.kartu-galeri img {
    width: 100%;
    height: 240px;
    max-height: 240px;
    object-fit: cover;
    object-position: center;
    transition: transform .5s cubic-bezier(0.25, 1, 0.5, 1);
    display: block;
}
.kartu-galeri:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(11, 61, 46, 0.18);
}
.kartu-galeri:hover img {
    transform: scale(1.08);
}
.kartu-galeri .overlay-galeri {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 61, 46, 0.92) 0%, rgba(11, 61, 46, 0.4) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 16px;
    opacity: 0;
    transition: opacity .35s ease;
    text-align: center;
}
.kartu-galeri:hover .overlay-galeri {
    opacity: 1;
}
.kartu-galeri .overlay-galeri i {
    font-size: 2rem;
    color: var(--emas-terang);
    margin-bottom: 8px;
    transform: translateY(12px);
    transition: transform .3s ease;
}
.kartu-galeri:hover .overlay-galeri i {
    transform: translateY(0);
}
.kartu-galeri .overlay-galeri p {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.96rem;
    margin: 0;
    line-height: 1.4;
}

/* ================= KARTU EKSKUL ================= */
.kartu-ekskul {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(11, 61, 46, 0.08);
    aspect-ratio: 1 / 1;
    border: 1px solid #e5dfcf;
    transition: transform .3s ease, box-shadow .3s ease;
}
.kartu-ekskul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .4s ease;
    display: block;
}
.kartu-ekskul:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(11, 61, 46, 0.16);
}
.kartu-ekskul:hover img {
    transform: scale(1.08);
}
.kartu-ekskul-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 61, 46, 0.92) 0%, rgba(11, 61, 46, 0.25) 60%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    text-align: center;
}
.kartu-ekskul-overlay h6 {
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.kartu-ekskul-detail {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e5dfcf;
    box-shadow: 0 6px 20px rgba(11, 61, 46, 0.06);
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}
.kartu-ekskul-detail:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(11, 61, 46, 0.12);
}
.kartu-ekskul-detail img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
}
.kartu-ekskul-detail h4 {
    color: var(--hijau-tua);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 10px;
}

/* ================= BACKGROUND SECTIONS ================= */
.section-padding { padding: 75px 0; }
.bg-krem-tua { background-color: var(--krem-tua); }
.bg-hijau-tua { 
    background: linear-gradient(135deg, #0b3d2e, #145a32); 
    color: #ffffff;
}

.section-visi {
    background: linear-gradient(135deg, #0b3d2e 0%, #145a32 100%);
    position: relative;
    color: #ffffff;
}
.kartu-visimisi {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 16px;
    padding: 34px 26px;
    text-align: center;
    height: 100%;
    backdrop-filter: blur(4px);
    color: #ffffff;
}
.kartu-visimisi i { 
    font-size: 2.4rem; 
    color: var(--emas-terang); 
    margin-bottom: 14px; 
    display: block; 
}
.kartu-visimisi h4 { 
    color: #ffffff; 
    font-weight: 700;
    margin-bottom: 14px; 
}
.kartu-visimisi p, .kartu-visimisi .teks-list { 
    color: #f2f9f5; 
    font-size: 0.96rem;
    line-height: 1.7;
}
.kartu-visimisi .teks-list { text-align: left; }
.kartu-visimisi .teks-list ol, .kartu-visimisi .teks-list ul { padding-left: 20px; margin: 0; }
.kartu-visimisi .teks-list li { margin-bottom: 8px; }

/* Header Halaman Dalam */
.header-halaman {
    background: linear-gradient(135deg, #0b3d2e, #145a32);
    padding: 70px 0 50px;
    color: #ffffff;
    text-align: center;
    border-bottom: 3px solid var(--emas);
}
.header-halaman h1 { 
    color: #ffffff; 
    font-weight: 700;
    font-size: 2.3rem;
    margin-bottom: 8px; 
}
.header-halaman p, .header-halaman a, .header-halaman span {
    color: #e5f3eb;
    font-weight: 500;
}
.header-halaman a:hover {
    color: var(--emas-terang);
}

/* ================= TIMELINE ALUR PENDAFTARAN ================= */
.timeline-islami {
    position: relative;
    padding-left: 20px;
}
.timeline-islami::before {
    content: '';
    position: absolute;
    left: 42px;
    top: 20px;
    bottom: 20px;
    width: 3px;
    background: linear-gradient(to bottom, var(--emas), var(--hijau));
}
.timeline-item {
    display: flex;
    gap: 20px;
    margin-bottom: 28px;
    position: relative;
}
.timeline-item .nomor {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0b3d2e, #145a32);
    border: 3px solid var(--emas);
    color: var(--emas-terang);
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.timeline-item .konten {
    background: var(--putih);
    padding: 20px 24px;
    border-radius: 14px;
    border: 1px solid #e0e9da;
    box-shadow: 0 4px 16px rgba(11,61,46,0.05);
    flex-grow: 1;
}
.timeline-item .konten h5 {
    margin-bottom: 6px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hijau-tua);
}
.timeline-item .konten p {
    color: var(--teks-gelap);
    font-size: 0.93rem;
}

/* ================= STATUS BADGES & ALERTS ================= */
.badge-status-menunggu {
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffe69c;
    padding: 7px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
}
.badge-status-diterima {
    background: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
    padding: 7px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
}
.badge-status-ditolak {
    background: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
    padding: 7px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
}

.alert-warning {
    background-color: #fff8e1;
    border-color: #ffe082;
    color: #5c4300;
}
.alert-success {
    background-color: #e8f5e9;
    border-color: #a5d6a7;
    color: #1b5e20;
}
.alert-danger {
    background-color: #ffebee;
    border-color: #ef9a9a;
    color: #b71c1c;
}

/* ================= FORM STYLING ================= */
.form-islami label, .form-label {
    font-weight: 600;
    color: var(--hijau-tua);
    margin-bottom: 6px;
    font-size: 0.93rem;
}
.form-islami .form-control, .form-islami .form-select, .form-control, .form-select {
    border: 1px solid #d5cfbd;
    padding: 10px 14px;
    border-radius: 8px;
    color: #16221c;
    font-size: 0.95rem;
}
.form-islami .form-control:focus, .form-islami .form-select:focus,
.form-control:focus, .form-select:focus {
    border-color: var(--hijau);
    box-shadow: 0 0 0 3px rgba(20,90,50,0.15);
    color: #16221c;
}
.form-text, .form-control::placeholder {
    color: #63776b;
}

/* ================= FOOTER ================= */
footer.footer-islami {
    background: var(--hijau-tua);
    color: #e2efe7;
    padding-top: 60px;
    border-top: 3px solid var(--emas);
}
footer.footer-islami h5 {
    color: var(--emas-terang);
    font-family: var(--font-judul);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 18px;
}
footer.footer-islami p {
    color: #d6e8dd;
    font-size: 0.92rem;
    line-height: 1.7;
}
footer.footer-islami a { 
    color: #d6e8dd; 
    font-size: 0.92rem;
}
footer.footer-islami a:hover { 
    color: var(--emas-terang); 
    padding-left: 3px;
}
footer.footer-islami .list-unstyled li { 
    margin-bottom: 10px; 
    color: #d6e8dd;
}
footer.footer-islami .footer-bawah {
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 40px;
    padding: 20px 0;
    font-size: 0.88rem;
    text-align: center;
    color: #c0dbcd;
}
.sosial-footer a {
    display: inline-flex; align-items:center; justify-content:center;
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.12);
    border-radius: 50%;
    margin-right: 8px;
    color: #ffffff;
    font-size: 1.1rem;
}
.sosial-footer a:hover { 
    background: var(--emas); 
    color: var(--hijau-tua); 
}

/* Floating WhatsApp Button */
.wa-float {
    position: fixed;
    bottom: 26px; right: 26px;
    background: #25D366;
    color: #fff;
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 6px 22px rgba(0,0,0,0.3);
    z-index: 999;
}
.wa-float:hover { 
    color: #fff; 
    transform: scale(1.1); 
}

/* Print Slip Styles */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .topbar, .navbar-islami, .footer-islami, .no-print, .btn, .breadcrumb-wrap, .wa-float { display: none !important; }
    .slip-cetak { box-shadow: none !important; border: 1px solid #333 !important; max-width: 100% !important; margin: 0 !important; }
}

/* Kartu Guru Modern */
.kartu-guru-modern {
    transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow .3s ease !important;
}
.kartu-guru-modern:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(11, 61, 46, 0.12) !important;
    border-color: var(--emas) !important;
}
.kartu-guru-modern img {
    transition: transform .3s ease;
}
.kartu-guru-modern:hover img {
    transform: scale(1.05);
}

@media (max-width: 767px) {
    .hero-caption h1 { font-size: 1.9rem; }
    .py-section, .section-padding { padding: 50px 0; }
    .judul-section h2 { font-size: 1.65rem; }
}

/* =========================================
   WIDGET JADWAL SHALAT OTOMATIS (TASIKMALAYA)
   ========================================= */
.widget-shalat-wrapper {
    background: linear-gradient(135deg, #072a1f 0%, #0b3d2e 60%, #115741 100%);
    border: 2px solid #d4af37;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(11, 61, 46, 0.22);
    position: relative;
    overflow: hidden;
    color: #ffffff;
}
.widget-shalat-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 90% 10%, rgba(212, 175, 55, 0.15), transparent 45%),
                radial-gradient(circle at 10% 90%, rgba(26, 122, 90, 0.25), transparent 50%);
    pointer-events: none;
}
.kartu-shalat-item {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 14px;
    padding: 14px 10px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}
.kartu-shalat-item:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.6);
}
.kartu-shalat-item.shalat-selanjutnya {
    background: linear-gradient(180deg, rgba(212, 160, 23, 0.25) 0%, rgba(11, 61, 46, 0.6) 100%);
    border: 2px solid #f9d342 !important;
    box-shadow: 0 0 20px rgba(249, 211, 66, 0.35);
    transform: scale(1.04);
}
.badge-shalat-aktif {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #d4a017;
    color: #0b3d2e;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    display: none;
}
.kartu-shalat-item.shalat-selanjutnya .badge-shalat-aktif {
    display: inline-block;
}
.nama-waktu-shalat {
    font-size: 0.88rem;
    font-weight: 600;
    color: #e3d3a3;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.jam-waktu-shalat {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px;
}
.topbar-shalat-badge {
    background: rgba(212, 160, 23, 0.2);
    border: 1px solid rgba(212, 160, 23, 0.4);
    color: #f7e7b4;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
}
.topbar-shalat-pill {
    background: rgba(255, 255, 255, 0.12);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.76rem;
    color: #fff;
    margin-right: 4px;
}
.topbar-shalat-pill.aktif {
    background: var(--emas);
    color: var(--hijau-tua);
    font-weight: 700;
}

/* =========================================
   TESTIMONI ALUMNI & WALI SANTRI
   ========================================= */
.kartu-testimoni {
    background: #ffffff;
    border: 1px solid #e2dac6;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    box-shadow: 0 8px 24px rgba(11, 61, 46, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.kartu-testimoni:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(11, 61, 46, 0.12);
    border-color: var(--emas);
}
.kartu-testimoni .petik-ikon {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 3.2rem;
    color: rgba(212, 175, 55, 0.22);
    font-family: Georgia, serif;
    line-height: 1;
    pointer-events: none;
}
.avatar-testimoni {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--emas);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.bintang-testimoni i {
    color: #f1b417;
    font-size: 0.95rem;
    margin-right: 2px;
}
.teks-testimoni {
    font-size: 0.95rem;
    line-height: 1.75;
    color: #334155;
    font-style: italic;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}

/* =========================================
   PRESTASI & HALL OF FAME SANTRI
   ========================================= */
.kartu-prestasi {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e4dcce;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(11, 61, 46, 0.07);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.kartu-prestasi:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(11, 61, 46, 0.14);
    border-color: var(--emas);
}
.img-box-prestasi {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: #0b3d2e;
}
.img-box-prestasi img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.kartu-prestasi:hover .img-box-prestasi img {
    transform: scale(1.06);
}
.badge-tingkat-prestasi {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(11, 61, 46, 0.9);
    backdrop-filter: blur(6px);
    color: #ffd700;
    border: 1px solid rgba(212, 175, 55, 0.6);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.badge-tahun-prestasi {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}
.badge-kategori-prestasi {
    display: inline-block;
    background: #e8f4ed;
    color: var(--hijau);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.nav-pills-prestasi .nav-link {
    color: #4b5563;
    font-weight: 600;
    border-radius: 24px;
    padding: 8px 20px;
    margin: 4px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    transition: all 0.3s ease;
}
.nav-pills-prestasi .nav-link.active,
.nav-pills-prestasi .nav-link:hover {
    background: var(--hijau);
    color: #ffffff;
    border-color: var(--hijau);
    box-shadow: 0 4px 12px rgba(11, 61, 46, 0.2);
}

/* =========================================
   TIMELINE JADWAL 24 JAM AKTIVITAS SANTRI
   ========================================= */
.timeline-santri-container {
    position: relative;
    padding: 20px 0;
}
.timeline-santri-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 32px;
    width: 3px;
    background: linear-gradient(180deg, var(--emas), var(--hijau), var(--emas));
    border-radius: 2px;
}
@media (min-width: 768px) {
    .timeline-santri-container::before {
        left: 50%;
        transform: translateX(-50%);
    }
}
.timeline-item-santri {
    position: relative;
    margin-bottom: 35px;
}
.timeline-node-icon {
    position: absolute;
    left: 12px;
    top: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0b3d2e;
    border: 3px solid var(--emas);
    color: #ffd700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 3;
}
@media (min-width: 768px) {
    .timeline-node-icon {
        left: 50%;
        transform: translateX(-50%);
    }
}
.timeline-card-santri {
    margin-left: 70px;
    background: #ffffff;
    border: 1px solid #e5dcce;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 6px 20px rgba(11, 61, 46, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
}
.timeline-card-santri:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(11, 61, 46, 0.12);
    border-color: var(--emas);
}
@media (min-width: 768px) {
    .timeline-item-santri:nth-child(odd) .timeline-card-santri {
        margin-left: 0;
        margin-right: calc(50% + 40px);
        text-align: right;
    }
    .timeline-item-santri:nth-child(even) .timeline-card-santri {
        margin-left: calc(50% + 40px);
        margin-right: 0;
        text-align: left;
    }
    .timeline-item-santri:nth-child(odd) .timeline-card-santri .d-flex-tags {
        justify-content: flex-end;
    }
}
.timeline-time-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #0b3d2e, #145a32);
    color: #ffd700;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.5);
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.badge-sesi {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
}
.badge-sesi-pagi { background: #fff3cd; color: #856404; }
.badge-sesi-kbm { background: #cff4fc; color: #055160; }
.badge-sesi-siang { background: #d1e7dd; color: #0f5132; }
.badge-sesi-malam { background: #e2d9f3; color: #432874; }
.badge-sesi-istirahat { background: #e2e3e5; color: #41464b; }

/* =========================================
   INSTANT SEARCH & MODAL
   ========================================= */
.btn-cari-navbar {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #f7e7b4;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.btn-cari-navbar:hover {
    background: var(--emas);
    color: var(--hijau-tua);
    border-color: var(--emas);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.35);
}
.search-modal-header {
    background: #0b3d2e;
    border-bottom: 2px solid var(--emas);
    padding: 18px 24px;
}
.search-input-box {
    position: relative;
}
.search-input-box input {
    background: #ffffff;
    border: 2px solid #e0d7c5;
    border-radius: 14px;
    padding: 12px 18px 12px 46px;
    font-size: 1.05rem;
    color: #1f2937;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.search-input-box input:focus {
    border-color: var(--emas);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
    outline: none;
}
.search-input-box .icon-search-inside {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #9ca3af;
}
.search-item-hover:hover {
    background-color: #f6fcf8 !important;
}

/* =========================================
   FAQ ACCORDION
   ========================================= */
.accordion-faq .accordion-item {
    border: 1px solid #e8e0cc;
    border-radius: 14px !important;
    margin-bottom: 16px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(11, 61, 46, 0.04);
    overflow: hidden;
    transition: all 0.3s ease;
}
.accordion-faq .accordion-item:hover {
    border-color: var(--emas);
    box-shadow: 0 8px 20px rgba(11, 61, 46, 0.08);
}
.accordion-faq .accordion-button {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--hijau-tua);
    background: #ffffff;
    padding: 18px 22px;
    box-shadow: none;
}
.accordion-faq .accordion-button:not(.collapsed) {
    background: #f6fcf8;
    color: var(--hijau);
    border-bottom: 1px solid #e8e0cc;
}
.accordion-faq .accordion-button:focus {
    box-shadow: none;
}
.accordion-faq .accordion-body {
    padding: 20px 24px;
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.8;
    background: #ffffff;
}

/* =========================================
   WHATSAPP MULTI-LAYANAN POPUP WIDGET
   ========================================= */
.wa-multi-widget {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
}
.wa-float-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}
.wa-float-btn:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.6);
}
.wa-btn-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background: #dc3545;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    animation: pulseBadge 2s infinite;
}
@keyframes pulseBadge {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.wa-popup-card {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 350px;
    max-width: 88vw;
    background: #ffffff;
    border-radius: 20px;
    border: 2px solid rgba(212, 175, 55, 0.45);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}
.wa-popup-card.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.wa-popup-header {
    background: linear-gradient(135deg, #0b3d2e, #145a32);
    padding: 16px 18px;
    border-bottom: 2px solid var(--emas);
}
.wa-avatar-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #ffffff;
    border: 2px solid #ffd700;
    padding: 2px;
}
.wa-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: #25d366;
    border: 2px solid #ffffff;
    border-radius: 50%;
}
.wa-popup-body {
    padding: 16px;
    background: #fdfbf5;
    max-height: 420px;
    overflow-y: auto;
}
.wa-chat-bubble {
    background: #ffffff;
    border: 1px solid #e0d7c5;
    border-radius: 14px;
    border-top-left-radius: 4px;
    padding: 12px 14px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.wa-bubble-time {
    display: block;
    text-align: right;
    font-size: 0.68rem;
    margin-top: 4px;
}
.wa-service-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wa-service-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e5dcce;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.25s ease;
}
.wa-service-item:hover {
    background: #f0fdf4;
    border-color: #25d366;
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.15);
}
.wa-service-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.wa-service-title {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: #111827;
    line-height: 1.3;
}
.wa-service-sub {
    display: block;
    font-size: 0.72rem;
    color: #6b7280;
    line-height: 1.2;
}

/* =========================================
   RUNNING ANNOUNCEMENT MARQUEE BAR
   ========================================= */
.running-marquee-bar {
    position: relative;
    z-index: 1025;
    padding: 7px 15px;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: all 0.3s ease;
}
.marquee-tema-emas {
    background: linear-gradient(90deg, #0b3d2e, #145a32, #0b3d2e);
    color: #ffffff;
    border-bottom: 2px solid var(--emas);
}
.marquee-tema-hijau {
    background: linear-gradient(90deg, #1b5e20, #2e7d32, #1b5e20);
    color: #ffffff;
    border-bottom: 2px solid #81c784;
}
.marquee-tema-merah {
    background: linear-gradient(90deg, #7f1d1d, #991b1b, #7f1d1d);
    color: #ffffff;
    border-bottom: 2px solid #f87171;
}
.marquee-tema-biru {
    background: linear-gradient(90deg, #0f172a, #1e293b, #0f172a);
    color: #ffffff;
    border-bottom: 2px solid #38bdf8;
}
.marquee-badge-label {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    color: #ffd700;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.marquee-ticker-container {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 0 15px;
}
.marquee-ticker-text {
    display: inline-block;
    padding-left: 100%;
    animation: marqueeAnimation 28s linear infinite;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.marquee-ticker-container:hover .marquee-ticker-text {
    animation-play-state: paused;
}
@keyframes marqueeAnimation {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
.marquee-btn-action {
    display: inline-flex;
    align-items: center;
    background: #d4af37;
    color: #0b3d2e;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 16px;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.marquee-btn-action:hover {
    background: #ffffff;
    color: #0b3d2e;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.marquee-close-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 10px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}
.marquee-close-btn:hover {
    color: #ffffff;
}