body.guest-page {
    background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url("../img/gsd.jpg") no-repeat center center fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* HEADER BANNER MARUN KOTAK LURUS FULL */
.header-banner-guest {
    background: #a50000; /* Menyamakan warna merah tegas khas dashboard */
    color: white;
    padding: 20px; /* Menyamakan padding ruang dalam */
    border-radius: 0 !important; /* Tetap lurus nempel ujung browser */
    margin: 0 !important;
    display: flex;
    justify-content: space-between; /* Kunci membagi rata kiri, tengah, kanan */
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    font-family: "Segoe UI", Arial, sans-serif;
}

/* MENYAMAKAN STRUKTUR SISI KIRI & KANAN */
.header-banner-guest .logo-left-box,
.header-banner-guest .logo-right-box {
    display: flex;
    align-items: center;
    min-width: 150px; /* Menjaga agar tulisan tengah tidak mudah tergeser */
}

.header-banner-guest .logo-left-box {
    justify-content: flex-start;
}

.header-banner-guest .logo-right-box {
    justify-content: flex-end;
}

/* MENYAMAKAN UKURAN & EFEK LOGO (KEMBAR 100px) */
.header-banner-guest .logo-dps,
.header-banner-guest .logo-kominfos {
    height: 100px; /* Menyamakan tinggi logo sesuai dashboard */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.2)); /* Efek bayangan halus */
}

/* MENYAMAKAN GAYA TEKS TENAH BANNER */
.header-banner-guest .banner-center-text {
    text-align: center;
    flex: 1;
}

.header-banner-guest .banner-title {
    margin: 0;
    font-size: 2.2rem; /* Menyamakan skala judul SIPASTI */
    font-weight: bold;
    letter-spacing: 2px;
}

.header-banner-guest .banner-desc-1 {
    display: inline-block;
    margin-top: 5px;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: normal;
}

/* SUBTITLE ALAMAT DINAS */
.header-banner-guest .banner-desc-2 {
    font-size: 12px; /* Menyamakan ukuran kecil 12px seperti dinas-subtitle */
    font-weight: normal;
    opacity: 0.9;
    margin-top: 2px;
}

/* LAYOUT TOMBOL LOGIN */
.login-btn-container {
    padding: 20px 30px 0 30px; 
    text-align: right;
}

.login-btn-guest {
    background-color: #8B0000; 
    color: white; 
    padding: 10px 22px; 
    border-radius: 5px; 
    text-decoration: none; 
    font-size: 1rem; 
    font-weight: bold; 
    border: 1px solid #8B0000; 
    transition: 0.3s; 
    font-family: sans-serif; 
    letter-spacing: 0.5px; 
    display: inline-block;
}

/* WADAH UTAMA CONTENT */
.main-container-guest {
    padding: 10px 30px 30px 30px;
    flex: 1;
}

.content-box-guest {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    margin-top: 15px;
}

.table-title-guest {
    margin-top: 0; 
    margin-bottom: 20px; 
    font-weight: bold; 
    color: #000; 
    font-size: 1.1rem; 
    letter-spacing: 0.5px; 
    border-bottom: 2px solid #8B0000; 
    padding-bottom: 8px;
}

.table-responsive-wrapper {
    overflow-x: auto;
}

/* ========================================================
   STYLING TABEL INDEPENDEN (BAWAAN CSS LAMA)
   ======================================================== */
.agenda-table-guest {
    border-collapse: collapse; 
    text-align: center; 
    font-size: 0.85rem; 
    background: white;
    font-family: "Segoe UI", Arial, sans-serif;
    width: 100%;
}

.agenda-table-guest th, 
.agenda-table-guest td {
    border: 1px solid #ddd; /* Memunculkan garis border abu-abu halus */
}

.agenda-table-guest thead {
    background-color: #8B0000; 
    color: white; 
    text-transform: uppercase; 
    font-size: 0.8rem; 
    letter-spacing: 0.5px;
}

.agenda-table-guest thead tr {
    height: 40px;
}

.agenda-table-guest tbody tr {
    height: 50px;
    transition: background-color 0.2s;
}

/* Efek highlight baris saat disorot mouse */
.agenda-table-guest tbody tr:hover {
    background-color: #f9f9f9; 
}

/* KELAS UKURAN KOLOM & CELL TABEL */
.col-tanggal { width: 8%; }
.col-waktu { width: 8%; }
.col-kegiatan { width: 25%; }
.col-menghadiri { width: 15%; }
.col-lokasi { width: 12%; }
.col-pakaian { width: 7%; }
.col-pic { width: 7%; }
.col-multimedia { width: 10%; }
.col-surat { width: 8%; }

.cell-padding-center {
    padding: 8px; 
    vertical-align: middle;
}

.cell-waktu-text {
    padding: 8px; 
    vertical-align: middle; 
    white-space: nowrap;
}

.cell-kegiatan-text {
    text-align: left; 
    padding: 10px; 
    vertical-align: middle; 
    line-height: 1.4;
}

.cell-surat-text {
    padding: 8px; 
    vertical-align: middle; 
    font-size: 0.8rem;
}

.cell-empty-state {
    padding: 30px; 
    color: #777; 
    font-style: italic; 
    font-size: 0.9rem;
}

/* CLASS NOTIFIKASI FLASH */
.alert-guest-flash {
    padding: 12px; 
    margin-bottom: 15px; 
    border-radius: 4px; 
    font-size: 0.9rem; 
    font-weight: bold; 
    text-align: center;
    transition: opacity 0.5s ease-out;
    opacity: 1;
}

.alert-guest-success {
    background-color: #d4edda; 
    color: #155724; 
    border: 1px solid #c3e6cb;
}

.alert-guest-danger {
    background-color: #f8d7da; 
    color: #721c24; 
    border: 1px solid #f5c6cb;
}

/* REVISI KONTAINER TEKS BERJALAN MODERN */
.marquee-container {
    background-color: #8B0000; 
    color: white; 
    padding: 12px 0; 
    font-size: 1.1rem; 
    font-weight: bold; 
    border-bottom: 2px solid #ffcc00; 
    font-family: 'Segoe UI', Arial, sans-serif; 
    letter-spacing: 0.5px;
    overflow: hidden; /* Menyembunyikan teks yang keluar dari layar */
    white-space: nowrap; /* Memaksa teks tetap satu baris panjang */
    position: relative;
}

/* Membuat teks berjalan dari kanan ke kiri secara smooth */
.marquee-text-modern {
    display: inline-block;
    padding-left: 100%; /* Memulai teks dari ujung kanan luar layar */
    animation: jalankan-teks 25s linear infinite; /* Kecepatan jalan teks (25 detik) */
}

/* Kontrol pergerakan animasi */
@keyframes jalankan-teks {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0); /* Berjalan sampai seluruh teks habis di kiri */
    }
}

/* ========================================================
   STYLING FOOTER ELEGAN (SESUAI DASHBOARD INTERNAL)
   ======================================================== */
.main-footer {
    background-color: rgba(51, 51, 51, 0.9); /* Latar belakang abu-abu gelap transparan */
    color: #ffffff;
    text-align: center;
    padding: 20px 10px;
    margin-top: 40px;
    font-size: 0.85rem;
    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.6;
    
}

.footer-content p {
    margin: 0 0 10px 0;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

.footer-contact {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px; /* Jarak antar informasi kontak */
}

.footer-contact span {
    display: inline-flex;
    align-items: center;
    opacity: 0.85;
}

/* Mengubah warna semua ikon sosial media & kontak menjadi merah marun khas dinas */
.footer-contact span i {
    color: #ff4d4d; /* Merah marun terang agar kontras di latar gelap */
    margin-right: 8px;
    font-size: 0.95rem;
}

.cell-waktu-text {
    white-space: nowrap !important; /* Memaksa teks tetap satu baris horizontal */
    text-align: center;            /* Membuat posisi teks jam pas di tengah kolom */
    font-weight: 450;              /* Membuat tulisan jam sedikit lebih tegas */
    padding: 10px 12px !important; /* Memberikan ruang udara di dalam kotak cell */
}

/* Memastikan ukuran kepala tabel waktu juga ikut menyesuaikan */
.col-waktu {
    white-space: nowrap !important;
    min-width: 110px; /* Memberikan ruang minimal agar jam tidak berdesakan */
}