/* RESET CSS: Menghapus margin bawaan browser agar pas di layar */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif; /* Diatur sekali untuk semua */
}

/* WADAH GLOBAL UNTUK KONTEN WEBSITE */
.container {
    width: 92%;           
    max-width: 1440px;    
    margin: 0 auto;       /* Kunci posisi selalu di tengah layar */
}

/* STYLING HEADER UTAMA */
.main-header {
    background-color: #2c3e50; /* Jika ingin background gelap sesuai kodemu */
    color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
}

/* Mengatur posisi Logo & Navbar di dalam wadah Container */
.header-box {
    display: flex;
    justify-content: space-between; 
    align-items: center;            
    padding: 15px 0;                
}

/* Pengaturan untuk area logo di kiri */
.logo-container {
    display: flex;
    align-items: center;
}

.main-logo {
    height: 41px; 
    width: auto;  
}

/* STYLING NAVBAR / MENU */
.navbar > ul {
    list-style: none; 
    display: flex;    
    align-items: center;
}

.navbar li {
    margin-left: 15px; /* Jarak antar menu sedikit diperlonggar agar rapi */
}

/* Gabungan fungsi .navbar a dan .menu-item yang telah disatukan */
.navbar a {
    color: #ffffff; /* Ubah ke #064e70 jika nanti background header diganti putih */
    text-decoration: none; 
    font-size: 13px;
    font-weight: 600; /* Menggunakan semi-bold agar ikon dan teks seimbang */
    padding: 8px 8px;
    display: flex;         /* Membuat teks dan ikon berdampingan */
    align-items: center;   /* Membuat teks dan ikon lurus vertikal */
    gap: 6px;              /* Jarak antara teks menu dan ikon panah */
    border-radius: 4px;
    transition: all 0.3s ease; 
}

/* EFEK HOVER & KELAS AKTIF */
.navbar a:hover, 
.navbar a.active {
    color: #3498db; 
    background-color: rgba(255, 255, 255, 0.1); 
}

/* Ukuran dan ketebalan garis ikon panah */
.icon-chevron {
    width: 14px;               
    height: 14px;              
    display: inline-block;
}

/* Jarak aman untuk Konten Utama dan Wadah FOTO UTAMA */
.content {
    position: relative;        
    margin-top: 70px;          
    padding-top: 60px;         
    padding-bottom: 350px;     
    overflow: hidden;          
    z-index: 1;                
    
    /* 🔥 KUNCI UTAMA: Ubah ke 0.4 (LAPISAN BELAKANG) */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--bg-current);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    --bg-current: url('assets/home-1.svg');
    --bg-next: url('assets/home-2.svg');
}

.content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 🔥 KUNCI UTAMA: Ubah ke 0.4 JUGA (LAPISAN DEPAN) AGAR TETAP SINKRON */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--bg-next);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1; 

    opacity: 0; 
    transition: none; 
}

/* Hanya berikan transisi opacity saat menduduki kelas aktif (Fade In) */
.content.is-crossfading::before {
    opacity: 1;
    transition: opacity 1.2s ease-in-out; 
}

/* MEMBUAT LENGKUNGAN PUTIH DI BAWAH */
.content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -10%;                
    width: 120%;               
    height: 120px;             
    background-color: #F5F5F5; 
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%;
    z-index: 2; 
}

/* Teks dan Agenda */
.content > .container {
    max-width: 1200px; 
    width: 85%;        
    margin: 0 auto;    
    position: relative;
    z-index: 3; 
}

/* BACKGROUND HALAMAN BIAR AGAK ABU-ABU SESUAI FOTO */
body {
    background-color: #F5F5F5; 
}

/* ==========================================================
   TRIK SAKTI: MEMBUAT SEKSI HERO & AGENDA MENJOROK KE TENGAH
   ========================================================== */

/* Targetkan container yang BERADA DI DALAM .content saja */
.content > .container {
    max-width: 1200px; 
    width: 85%;        
    margin: 0 auto;    
    
    /* ==========================================================
       👉 CHANGES 4: PAKSA SEMUA TEKS & AGENDA KELUAR DI DEPAN OVERLAY GELAP
       ========================================================== */
    position: relative;
    z-index: 3; /* Angka 3 memastikan dia melompati kain hitam overlay (Z-Index 1) */
}

/* --- STYLING 1: PENGUMUMAN BERJALAN --- */
.ticker-wrapper {
    background-color: #005b7f; 
    color: #ffffff;
    display: flex;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
    max-width: 550px; /* Mengunci lebar bar agar sama dengan panjang pencarian & judul */
}

.ticker-title {
    background-color: #004662; 
    padding: 8px 12px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticker-text {
    flex: 1;
    padding: 0 2px;
    font-size: 13px;
    font-weight: 400;
}

/* STYLING BARU UNTUK IKON ASSETS */
.ticker-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
}

.search-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.calendar-icon {
    width: 65px; 
    height: 65px;
    display: inline-block;
    opacity: 0.8; /* Menjaga kelembutan warna hitam ikon */
}

.location-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
}

/* --- STYLING TATA LETAK GRID (KIRI & KANAN) --- */
.main-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr; 
    gap: 50px; 
    align-items: start;
}

/* ==========================================================
   POLISH UI: SEKSI INFORMASI & PENCARIAN (KIRI)
   ========================================================== */

/* Judul Utama: Dibuat lebih tegas dan tebal */
.main-title {
    font-size: 35px;
    color: #ffffff; /* Warna abu-abu sangat gelap sesuai Figma */
    font-weight: 800; /* Tebal maksimal agar dominan */
    line-height: 1.25;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

/* Sub-judul/Deskripsi di bawahnya */
.sub-title {
    font-size: 15px;
    color: #ffffffce;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 35px;
    max-width: 500px; /* Menjaga teks tidak melar terlalu panjang ke kanan */
}

/* Wadah Bar Pencarian (Input + Tombol) */
.search-container {
    display: flex;
    gap: 10px;         /* Jarak antara kolom input dan tombol cari */
    margin-bottom: 35px;
    max-width: 550px;
}

/* Kotak Input Abu-abu */
.search-input-box {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 14px;       
    flex: 1;                   
    gap: 12px;
    
    background-color: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(10px);                 
    -webkit-backdrop-filter: blur(10px);         
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);  

    /* ==========================================================
       👉 GANTI BAGIAN INI: Dari 1px rgba menjadi 2px #ffffff murni
       ========================================================== */
    border: 1px solid #ffffff67; 
}

/* Teks di dalam Input */
.search-input-box input {
    border: none;
    background: transparent;
    outline: none;             /* Menghilangkan garis biru saat diklik */
    font-size: 14px;
    font-weight: 500;
    color: #ffffffce;
    width: 100%;
}

/* Mengatur warna placeholder text "Beasiswa" */
.search-input-box input::placeholder {
    color: #ffffffce;
    opacity: 1;
}

/* Tombol "Cari" Gelap */
.btn-search {
    color: #ffffff;
    border: none;
    padding: 0 25px;
    border-radius: 14px;       /* Kebulatan disamakan dengan kotak input */
    font-size: 14px;
    font-weight: 500;          /* Teks tombol dibuat tebal */
    cursor: pointer;
    /* 🔥 KUNCI TOMBOL VERSI KACA KONTRAST */
    background-color: rgba(0, 0, 0, 0.3);        /* Hitam transparan 40% agar lebih tegas dari input box */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

/* Efek Hover Tombol Cari saat Disentuh Mouse */
.btn-search:hover {
    background-color: rgba(255, 255, 255, 0.25); /* Berubah menjadi putih transparan saat di-hover */
    color: #ffffff;
}

/* Judul Kecil Pencarian Populer */
.popular-tags span {
    display: block;
    font-size: 15px;
    font-weight: 600;          /* Cetak tebal sesuai gambar */
    color: #ffffff;
    margin-bottom: 14px;
}

/* Kelompok Tombol Tag Pilihan */
.tags-group {
    display: flex;
    gap: 10px;                 /* Jarak antar pil tag */
}

/* Pil Tag (Beasiswa, UKT, dll) */
.tag {
    color: #ffffffce;
    text-decoration: none;     /* Menghapus garis bawah bawaan link */
    padding: 9px 15px;
    border-radius: 10px;       /* Kotak membulat proporsional */
    font-size: 14px;
    font-weight: 600;          /* Teks tag tebal */
    transition: all 0.2s ease;
    /* ==========================================================
       TAMBAHKAN 3 BARIS INI UNTUK MENGAKTIFKAN STRUKTUR IKON
       ========================================================== */
    display: inline-flex;
    align-items: center;
    gap: 6px;                  /* Mengatur jarak renggang antara teks dan ikon panah */
    /* 🔥 KUNCI SAKTI GLOSSY TRANSPARAN */
    background-color: rgba(255, 255, 255, 0.15); /* Warna putih transparan 15% */
    backdrop-filter: blur(10px);                 /* Membuat objek di belakangnya blur halus */
    -webkit-backdrop-filter: blur(10px);         /* Pengaman untuk browser Safari */
    border: 1px solid rgba(255, 255, 255, 0.25); /* Garis tepi putih tipis untuk refleksi cahaya kaca */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);  /* Bayangan lembut agar boks terlihat mengambang */
}

/* Tambahkan selector baru ini untuk mengunci dimensi ukuran ikon asetmu */
.tag-icon {
    width: 15px;               /* Ukuran ideal yang proporsional dengan font-size 14px */
    height: 15px;
    display: inline-block;
}

.tag:hover {
    background-color: #004d7194; /* Efek visual sedikit menggelap saat di-hover */
}

/* ==========================================================
   STYLING DETAIL KARTU AGENDA (KANAN)
   ========================================================== */

/* Wadah Utama Agenda */
.agenda-card {
    border-radius: 24px;       /* Sudut kotak lebih membulat halus */
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(10px);                 
    -webkit-backdrop-filter: blur(10px);         
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);  

    /* ==========================================================
       👉 GANTI BAGIAN INI: Dari 1px rgba menjadi 2px #ffffff murni
       ========================================================== */
    border: 1px solid #ffffff67; 
}

/* Header: Teks Agenda BEM & Tanggal */
.agenda-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
}

.agenda-header h3 {
    font-size: 20px;
    font-weight: 800; /* Super Bold */
    color: #ffffff;
}

.agenda-date {
    font-size: 14px;
    color: #ffffffce;
    font-weight: 500;
}

/* Kotak Jam & Ikon Kalender */
.agenda-time-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.agenda-time-box h2 {
    font-size: 48px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -1px;
}

.agenda-time-box h2 span {
    font-size: 18px;
    font-weight: 600;
    margin-left: 0px;
}

/* Detail Acara & Lokasi */
.agenda-details h4 {
    font-size: 18px;
    font-weight: 600;
    color: #ffffffce;
    margin-bottom: 4px;
}

.location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #ffffffce;
    font-weight: 500;
    margin-bottom: 20px;
}

/* Wadah Status (Kotak Transparan Bersama) */
.agenda-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: rgba(255, 255, 255, 0.2); /* Efek putih transparan */
    border: 1px solid rgba(255, 255, 255, 0.4);  /* Garis tepi tipis halus */
    border-radius: 14px;
    padding: 8px 3px;
    margin-bottom: 25px;
}

/* Kolom di dalam Kotak Status */
.status-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}

/* Membuat Garis Pembatas Vertikal di antara kolom status */
.status-col:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.15); /* Garis sekat tipis */
}

.status-col span {
    font-size: 11px;
    color: #ffffffce;
    font-weight: 700;
}

/* Badge Pil Kategori (Warna Emas/Khaki) */
.badge {
    background-color: #004D71; /* Warna emas/khaki sesuai gambar */
    color: #ffffffce;
    text-align: center;
    width: 85%;                /* Memastikan proporsi pil pas di dalam kolom */
    padding: 5px 0;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); /* Dimensi halus di dalam badge */
}

/* Tombol Lihat Kalender Agenda */
.btn-agenda-calendar {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.2); /* Latar tombol transparan cerah */
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 11px 0;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}

.btn-agenda-calendar:hover {
    background-color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================
   STYLING SEKSI LAYANAN PUBLIK (BAWAH) - UPDATED WITH ARROW ANIMATION
   ========================================================== */

.layanan-section {
    padding: 35px 0 80px 0;
    background-color: #F5F5F5; 
}

.layanan-box {
    background-color: #ffffff; 
    border-radius: 24px;       
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    position: relative;   
    z-index: 10;          
    margin-top: -300px;
    margin-bottom: 22px;
}

.layanan-title {
    font-size: 32px;
    font-weight: 800;
    color: #333333;
    margin-bottom: 2px;
}

.layanan-subtitle {
    font-size: 14px;
    color: #666666;
    font-weight: 500;
    margin-bottom: 35px;
}

.layanan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; 
}

.layanan-card {
    display: block;
    height: 130px;             
    border-radius: 10px;       
    overflow: hidden;
    text-decoration: none;     
    background-size: cover;
    background-position: center;
    position: relative; /* Menjadi jangkar utama bagi .layanan-arrow-icon */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.layanan-overlay {
    background-color: rgba(0, 0, 0, 0.25); 
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
}

/* ==========================================================
   PERBAIKAN FINAL: HANYA LINGKARAN YANG AKTIF & BISA DIKLIK
   ========================================================== */

/* 1. Wadah Link (Ukurannya kita kunci pas seukuran bulatan panah) */
.layanan-arrow-link {
    position: absolute;    /* Melayang bebas di atas banner */
    right: 20px;           /* Jarak dari tepi kanan banner */
    bottom: 45px;          /* Jarak dari tepi bawah banner */
    width: 35px;           /* Lebar area klik */
    height: 35px;          /* Tinggi area klik */
    z-index: 15;           /* Berdiri di lapisan paling depan agar tidak tertutup overlay */
    display: inline-block; 
}

/* 2. Desain Gambar Ikon di Dalam Link */
.layanan-arrow-icon {
    width: 100%;           /* Mengikuti 100% dari lebar .layanan-arrow-link (36px) */
    height: 100%;          /* Mengikuti 100% dari tinggi .layanan-arrow-link (36px) */
    opacity: 0.75;         /* Efek transparan halus saat diam */
    display: block;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* Transisi smooth */
}

/* 3. Efek Hover (Hanya terpicu ketika kursor menyentuh TEPAT di area lingkaran) */
.layanan-arrow-link:hover .layanan-arrow-icon {
    opacity: 1;                            /* Menjadi terang solid */
    transform: scale(1.15) translateX(4px); /* Lingkaran membesar dan meluncur ke kanan */
}

/* ==========================================================
   STYLING SLIDER BANNER GAMBAR (BAWAH)
   ========================================================== */
.slider-section {
    padding: 0 0 100px 0; 
    background-color: #F5F5F5; 
    display: flex;
    justify-content: center;
}

.banner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Wadah utama */
.carousel-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 10px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); 
    
    /* SYNC: Samakan dengan tinggi slide (310px) agar pembungkusnya kokoh */
    height: 310px; 
}

/* Jalur track tempat berjejernya seluruh gambar slide */
.carousel-track {
    display: flex;
    width: 75%;
    height: 100%; /* Tambahkan ini agar track mengisi penuh tinggi wrapper */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* Kotak Luar */
.carousel-slide {
    flex: 0 0 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;       
    box-sizing: border-box;
    background: transparent !important; 
    padding-right: 30px;                
    height: 100%; /* Ubah menjadi 100% mengikuti tinggi track induknya */
    z-index: 1;
    cursor: pointer;
}

/* KARTU GAIB */
.carousel-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 30px;             
    background-color: #b0a483; 
    border-radius: 10px;       
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 
    z-index: -1;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), filter 0.2s ease, box-shadow 0.2s ease;               
}

/* Styling Gambar Banner */
.banner-image {
    width: 100%;
    height: 100%;       
    object-fit: cover;  
    border-radius: 10px; 
    position: relative;
    z-index: 1;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- Dots (Tetap Sama) --- */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #b5b5b5;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background-color: #333333;
    width: 20px;
    border-radius: 4px;
}

/* ==========================================================
   KODE BARU: EFEK INTERAKSI HOVER & KLIK MEMBAL
   ========================================================== */

/* Efek Hover: Kartu gaib sedikit menggelap saat didekati mouse */
.carousel-slide:hover::before {
    filter: brightness(0.95);
}

/* Efek Klik: Kartu gaib mengecil dan bayangan merapat ke bawah */
.carousel-slide.clicked::before {
    transform: scale(0.97); /* Mengecil 3% untuk efek ditekan */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}

/* Gambar di dalamnya ikut mengecil serasi saat diklik */
.carousel-slide.clicked .banner-image {
    transform: scale(0.97);
}

/* ==========================================================
   STYLING DROPDOWN PILIHAN BAHASA (NAVBAR)
   ========================================================== */
.lang-switcher {
    position: relative; 
}

/* Mengatur warna dan ukuran ikon globe baru */
.lang-icon {
    width: 16px;
    height: 16px;
    stroke: #ffffff; /* Mengikuti warna teks putih */
    display: inline-block;
}

.lang-dropdown {
    display: none;             
    position: absolute;
    top: 100%;                 
    right: 0;
    background-color: #2c3e50; 
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    min-width: 140px;
    padding: 6px 0;
    list-style: none;
    z-index: 2000;             
    
    /* KUNCI UTAMA: Memaksa isi dropdown berjejer ke bawah jika terpicu flex */
    flex-direction: column; 
}

.lang-dropdown li {
    margin-left: 0 !important; 
    width: 100%;
}

.lang-dropdown a {
    display: block;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 600;
    color: #ffffff;
    border-radius: 0px !important; 
}

.lang-dropdown a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #3498db !important;
}

/* Mengubah display menjadi flex saat di-hover agar flex-direction bekerja */
.lang-switcher:hover .lang-dropdown {
    display: flex;
}

/* ==========================================================
   CSS HACK PRO: MEMBERSIHKAN TOTAL ATRIBUT GOOGLE TRANSLATE
   ========================================================== */

/* 1. Paksa Iframe Google Translate Bar untuk Hilang Gaib */
iframe.goog-te-banner-frame,
.goog-te-banner-frame,
.goog-te-banner,
.skiptranslate {
    display: none !important;
    visibility: hidden !important;
}

/* 2. Normalkan Kembali Struktur Atas Halaman (Nuke Layout Shift) */
html {
    top: 0 !important;
}

body {
    top: 0 !important;
    position: static !important;
}

/* 3. Sembunyikan Kotak Pilihan Asli Google yang Kita Lempar Keluar Layar */
#google_translate_element {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    z-index: -9999;
    top: -1000px;
}

/* 4. Sembunyikan Tooltip Popup Kuning Saat Teks Dihover Kursor */
.goog-tooltip, 
.goog-tooltip:hover {
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 5. Hilangkan Efek Stabilo Kuning pada Teks yang Berhasil Diterjemahkan */
.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

/* ==========================================================
   STYLING SEKSI KABAR BEM / BERITA
   ========================================================== */
.kabar-section {
    background-color: #ffffff; /* Menggunakan warna abu-abu solid sesuai contoh komponen */
    padding: 64px 0;           /* Memberikan ruang vertikal atas-bawah yang luas & ideal */
}

/* Tata Letak Atas: Membuat judul berjejer ke samping */
.kabar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;       /* Jarak aman ke grid kartu di bawahnya */
}

.kabar-title-group {
    display: flex;
    align-items: baseline;     /* Memastikan baris bawah teks h2 dan p lurus sejajar */
    gap: 24px;                 /* Jarak spasi antara Judul dengan Sub-judul */
}

.kabar-title-group h2 {
    font-size: 32px;
    font-weight: 800;
    color: #333333;
}

.kabar-title-group p {
    font-size: 14px;
    color: #555555;
    font-weight: 600;
}

/* Link "Lihat Selengkapnya" di Sisi Kanan */
.btn-see-all {
    font-size: 14px;
    font-weight: 700;
    color: #005b7f;            /* Warna biru khas identitas kabinet */
    text-decoration: none;
    transition: color 0.2s ease;
}

.btn-see-all:hover {
    color: #004662;            /* Sedikit menggelap saat disorot kursor */
}

/* SISTEM GRID: Membagi rata menjadi 3 kolom berita */
.kabar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;                 /* Jarak renggang antar kartu agar terlihat profesional */
}

/* Struktur Kerangka Kartu */
.kabar-card {
    display: flex;
    flex-direction: column;
    gap: 16px;                 /* Jarak konsisten antara Gambar -> Teks -> Footer */
}

/* Pembungkus Gambar untuk Efek Crop */
.kabar-img-wrapper {
    width: 100%;
    height: 190px;             /* Mengunci tinggi gambar agar barisan kartu selalu rata & simetris */
    border-radius: 16px;       /* Kebulatan sudut foto sesuai gambar referensi */
    overflow: hidden;
}

.kabar-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* Memotong gambar secara proporsional agar tidak gepeng */
    transition: transform 0.3s ease;
}

/* Efek mikro-interaksi saat kartu disentuh */
.kabar-card:hover .kabar-img-wrapper img {
    transform: scale(1.04);    /* Efek zoom-in gambar yang halus dan elegan */
}

/* Teks Deskripsi Berita */
.kabar-excerpt {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    line-height: 1.5;
    
    /* Batasan Otomatis: Memaksa teks berhenti di baris ke-3 jika terlalu panjang */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bagian Informasi Bawah Kartu */
.kabar-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;          /* Memaksa info footer selalu menempel di dasar bawah kartu */
}

/* Badge Topik Berita (Khaki/Emas) */
.kabar-badge {
    background-color: #b09a73; /* Warna emas/khaki disamakan dengan tema agenda */
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 6px;        
    font-size: 12px;
    font-weight: 600;
}

/* Teks Tanggal & Waktu */
.kabar-date {
    font-size: 12px;
    color: #555555;
    font-weight: 600;
}

/* ==========================================================
   STYLING SEKSI PENGUMUMAN FILE / LAMPIRAN
   ========================================================== */
.file-section {
    background-color: #ffffff; /* Selaras dengan abu-abu seksi berita */
    padding: 0 0 64px 0;        /* Atasnya 0 karena menyambung dari bawah seksi berita */
}

.file-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.file-title-group {
    display: flex;
    align-items: baseline;
    gap: 24px;
}

.file-title-group h2 {
    font-size: 32px;
    font-weight: 800;
    color: #333333;
}

.file-title-group p {
    font-size: 14px;
    color: #555555;
    font-weight: 600;
}

.file-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.file-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Wadah tempat ikon dokumen besar berada (Putih Bersih) */
.file-thumb-wrapper {
    width: 100%;
    height: 190px;
    background-color: #F5F5F5; /* Sesuai contoh fotomu yang berlatar putih/terang */
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease;
}

.file-card:hover .file-thumb-wrapper {
    transform: translateY(-3px); /* Memberikan efek interaktif memantul ke atas */
}

/* Ukuran & warna siluet ikon dokumen utama */
.big-doc-icon {
    width: 100px;
    height: 100px;
    stroke: #333333;
}

.file-title {
    font-size: 18px;
    font-weight: 800;
    color: #333333;
    line-height: 1.3;
}

.file-excerpt {
    font-size: 14px;
    font-weight: 600;
    color: #555555;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Wadah tombol aksi di bawah */
.file-actions {
    display: flex;
    gap: 12px;
    margin-top: auto; /* Memastikan barisan tombol selalu sejajar rata di paling bawah */
}

/* Styling Tombol Khaki/Emas Khas Desainmu */
.btn-file-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: #b09a73; /* Warna khaki seragam dengan badge agenda */
    color: #ffffff;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    transition: background-color 0.2s ease;
}

.btn-file-action:hover {
    background-color: #9c8763; /* Sedikit menggelap saat disentuh kursor */
}

/* Ukuran ikon di dalam tombol file */
.btn-file-action svg {
    width: 14px;
    height: 14px;
    stroke: #ffffff;
    fill: none;
}

/* ==========================================================
   STYLING SEKSI GALERI FOTO (FOCUS CENTER EFFECT)
   ========================================================== */
.galeri-section {
    background-color: #004e70; /* Warna biru gelap sesuai identitas BEM Fapet */
    padding: 64px 0;
    overflow: hidden;
}

.galeri-main-title {
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    color: #fff5e6;            /* Warna cream lembut sesuai gambar contoh */
    margin-bottom: 40px;
}

/* Container utama pembungkus track dan tombol panah */
.galeri-slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 16px;
}

/* Jendela pemotong sisa gambar luar agar tidak meluber */
.galeri-wrapper {
    width: 85%;
    overflow: hidden;
    padding: 20px 0;
}

/* Rel horizontal tempat berjejer posisi gambar */
.galeri-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Pengaturan default untuk seluruh halaman slide */
.galeri-slide {
    flex: 0 0 55%;             /* Lebar fokus gambar utama di tengah layar */
    display: flex;
    justify-content: center;
    opacity: 0.35;             /* Meredupkan gambar antrean di kanan-kiri */
    transform: scale(0.85);    /* Mengecilkan gambar antrean */
    transition: all 0.5s ease;
}

/* ATURAN EMAS: Ketika slide berstatus AKTIF di tengah */
.galeri-slide.active {
    opacity: 1;                /* Menjadi terang benderang */
    transform: scale(1);       /* Membesar ke ukuran aslinya */
}

/* Kotak frame pembungkus gambar */
.galeri-card-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.galeri-card-box img {
    width: 100%;
    height: 340px;             /* Mengunci tinggi box foto agar proporsional */
    object-fit: cover;
    border-radius: 16px;       
    border: 3px solid #fff5e6; /* Frame warna cream tipis sesuai foto contoh */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* Area Deskripsi Teks di bawah foto */
.galeri-caption {
    text-align: center;
    color: #ffffff;
    margin-top: 24px;
    max-width: 80%;
    opacity: 0;                /* Disembunyikan secara default saat di samping */
    display: none;
    transition: opacity 0.4s ease;
}

/* Hanya tampilkan teks deskripsi milik gambar yang sedang aktif di tengah */
.galeri-slide.active .galeri-caption {
    display: block;
    opacity: 1;
}

.galeri-caption p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 30px;
}

.galeri-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

/* --- Tombol Navigasi Panah Kanan-Kiri --- */
.galeri-nav-btn {
    background: transparent;
    border: none;
    color: #fff5e6;
    cursor: pointer;
    padding: 10px;
    z-index: 100;
    transition: transform 0.2s;
}

.galeri-nav-btn:hover {
    transform: scale(1.2);
}

.galeri-nav-btn svg {
    width: 32px;
    height: 32px;
}

/* --- Indikator Titik Bawah --- */
.galeri-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 5px;
}

.g-dot {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.g-dot.active {
    background-color: #fff5e6;
    width: 24px;
    border-radius: 4px;
}