/* Import Google Fonts */
body {
    font-family: 'Poppins', sans-serif;
    
    /* Fallback color untuk browser lama */
    background-color: #48D1CC; 
    
    /* Gradasi dari Hijau Tosca ke Biru Muda */
    background-color: rgba(245, 245, 220, 0.5);

    /* Pastikan gradasi menutupi seluruh halaman dan tidak berulang */
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Header Gradient & Styling */
.header-gradient {
    background: linear-gradient(90deg, rgba(20, 140, 120, 1) 0%, rgba(70, 160, 180, 1) 100%);
}

.logo-header {
    width: 60px;
    height: 60px;
    border: 3px solid #ffffff;
    object-fit: cover;
}

.navbar-brand h1 {
    font-weight: 700;
    font-size: 1.5rem;
}

.navbar-brand h2 {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Styling Tombol Login */
.btn-login {
    transition: all 0.3s ease-in-out;
}

/* Styling untuk Link Menu Aktif */
.navbar-nav .nav-link.active {
    color: #ffffff !important; /* Warna teks putih tebal */
    font-weight: 700; /* Membuat font menjadi tebal */
    border-bottom: 3px solid #ffffff; /* Garis bawah sebagai penanda */
}

.btn-login:hover {
    background-color: white;
    color: #148c78 !important;
}

/* Card Styling */
.card-header {
    font-weight: 500;
}

.card {
    border: 3px;
    border-radius: 1.75rem;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0);
}


/* Video Responsive */
.ratio iframe {
    border-radius: 0.5rem;
}

/* ==============================================
  UTILITY & HELPER CLASSES
==============================================
*/
.text-justify {
    text-align: justify;
}
/* ==============================================
  STYLING STRUKTUR PENGURUS (BARU)
==============================================
*/
.pengurus-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Rata tengah secara default */
    gap: 1.5rem; /* Memberi jarak antar kartu */
    margin-top: 1.5rem;
}

.pengurus-card {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.75rem; /* Sama dengan .card */
    text-align: center;
    padding: 1.5rem 1rem;
    width: 220px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pengurus-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.pengurus-foto {
    width: 130px;
    height: 130px;
    border-radius: 50%; /* Membuat foto menjadi bulat */
    object-fit: cover; /* Memastikan gambar tidak gepeng */
    border: 4px solid #e9ecef;
    margin-bottom: 1rem;
}

.pengurus-info h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.pengurus-info p {
    font-size: 0.9rem;
    color: #6c757d; /* Warna abu-abu untuk jabatan */
    margin-bottom: 0;
}

/* ==============================================
  PERBAIKAN RESPONSIVE
==============================================
*/

/* Breakpoint untuk Tablet & Ponsel Besar (Layout Umum) */
/* Bootstrap menggunakan 991.98px untuk breakpoint 'lg' */
@media (max-width: 991.98px) {
    .navbar-nav .nav-item {
        margin: 5px 0;
    }
    .btn-login {
        width: 100%;
    }
}

/* Breakpoint untuk Ponsel & Tablet Kecil (Perbaikan Komponen Spesifik) */
/* 768px adalah breakpoint standar untuk tablet potret */
@media (max-width: 768px) {
    /* Perbaikan untuk SweetAlert agar selalu di tengah di tablet & ponsel */
    .swal2-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .swal2-popup {
        width: 90vw !important; 
    }
    .swal2-title {
        font-size: 1.25rem !important;
    }
    .swal2-html-container {
        font-size: 0.9rem !important;
    }

    /* Perbaikan untuk Foto Ketua di mode mobile */
    .foto-ketua {
        max-width: 150px; 
        margin-bottom: 1.5rem;
    }
}
/* ==============================================
  PERBAIKAN STRUKTUR PENGURUS DI MODE MOBILE
==============================================
*/

/* Breakpoint untuk Ponsel & Tablet Kecil */
@media (max-width: 780px) {
    
      /* (BARU) Menggunakan CSS Grid dengan unit 1fr */
    .pengurus-grid {
        display: grid; /* Mengubah dari flex ke grid */
        gap: 1rem; 
        width: 100%;
        margin: 0 auto;
        place-items: center;
        grid-template-columns: 1fr 1fr;
    }

    /* KARTU TIDAK PERLU LEBAR KHUSUS LAGI */
    .pengurus-card {
        padding: 1rem 0.5rem;
    }

    .pengurus-foto {
        width: 90px;  /* Mengecilkan ukuran foto */
        height: 90px;
    }

    .pengurus-info h4 {
        font-size: 0.9rem; /* Mengecilkan font nama */
    }

    .pengurus-info p {
        font-size: 0.8rem; /* Mengecilkan font jabatan */
    }
}
/* Untuk link yang tidak ingin digarisbawahi */
.link-unstyled {
  text-decoration: none;
  color: inherit;
}
/* Style untuk Halaman Error 404 */
.error-page {
    max-width: 600px;
    margin: 0 auto;
}

.error-page .display-1 {
    font-size: 10rem; /* Membuat angka 404 sangat besar */
}

/* Style untuk kartu video YouTube */
.video-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
.video-card .card-title {
    font-size: 0.9rem;
    line-height: 1.4;
}
/* ==============================================
  STYLE UNTUK HALAMAN BACA ARTIKEL
============================================== */
.article-container {
    padding: 2rem 0;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem; /* Jarak atas-bawah dan kiri-kanan */
    color: #6c757d; /* Warna abu-abu muted */
    font-size: 0.8rem;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 1rem;
}

.article-body {
    font-size: 0.8rem;
    line-height: 1.8;
    color: #343a40;
    text-align: justify;
}
/* ==============================================
  STYLE UNTUK TOMBOL SHARE MEDIA SOSIAL
============================================== */
.share-buttons {
    display: flex;
    align-items: center;
    gap: 10px; /* Jarak antar tombol */
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%; /* Membuat tombol menjadi lingkaran */
    color: #ffffff;
    font-size: 1.1rem;
    text-decoration: none;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.share-btn:hover {
    transform: scale(1.1);
    color: #ffffff;
}

/* Warna brand media sosial */
.share-wa { background-color: #25D366; }
.share-fb { background-color: #1877F2; }
.share-tw { background-color: #1DA1F2; }
.share-tg { background-color: #2AABEE; }

/* ==============================================
   ANIMASI TEKS ARAB WARNA-WARNI
============================================== */
.arabic-welcome-animated {
    /* Menentukan font yang bagus untuk tulisan Arab */
    font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;
    font-size: 5rem; /* Ukuran font bisa disesuaikan */
    font-weight: 700;
    
    /* 1. Membuat latar belakang gradasi pelangi */
    background: linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff);
    background-size: 400% 400%; /* Membuat ukuran gradasi lebih besar dari teks */
    
    /* 2. Memotong latar belakang agar hanya terlihat di dalam teks */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 3. Membuat warna teks menjadi transparan agar gradasi terlihat */
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    /* 4. Menjalankan animasi yang telah kita buat di bawah */
    animation: animate-gradient 10s ease-in-out infinite;
}

/* Kunci animasi untuk menggerakkan posisi gradasi */
@keyframes animate-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Penyesuaian untuk layar mobile agar font tidak terlalu besar */
@media (max-width: 576px) {
    .arabic-welcome-animated {
        font-size: 3.5rem;
    }
}

/* ==============================================
   STYLE UNTUK KARTU CUPLIKAN ARTIKEL
============================================== */
.article-snippet-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.article-snippet-card:hover {
    transform: translateY(-5px); /* Efek terangkat saat disentuh kursor */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* Untuk membuat teks cuplikan artikel menjadi rata kanan-kiri */
.article-snippet-text {
    text-align: justify;
}

/* ==============================================
  PEMBATAS LEBAR KONTEN UNTUK DESKTOP
============================================== */
.main-container {
    max-width: 900px; /* Atur lebar maksimal yang Anda inginkan, misalnya 1200px */
    margin-left: auto; /* Membuat container berada di tengah secara horizontal */
    margin-right: auto; /* Membuat container berada di tengah secara horizontal */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1); /* Opsional: Tambahkan bayangan agar terlihat 'terpisah' */
}
/* ==============================================
  PENYESUAIAN FONT UNTUK DESKTOP
============================================== */
@media (min-width: 992px) {
    body {
        font-size: 0.7rem; /* Ubah ukuran font di sini, misalnya 0.9rem atau 15px */
    }
}

/* Style untuk Card Kata Bermakna */
.quote-card .card-body {
    position: relative;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.quote-card .date-display {
    font-size: 0.9rem;
    color: #6c757d;
}
.quote-card .arabic-quote {
    font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    line-height: 2;
    direction: rtl; /* Teks Arab dari kanan ke kiri */
}
.quote-card .translation {
    font-style: italic;
    color: #495057;
}
.quote-card .quote-source {
    margin-top: 1rem;
    font-weight: 600;
    color: #28a745;
}
.quote-card .carousel-item {
    transition: transform 1.5s ease-in-out; /* Animasi geser lebih lambat dan halus */
}

/* Style untuk kontainer tombol share kutipan */
.share-buttons-quote {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Jarak antar tombol */
}
/* ==============================================
   STYLE BARU UNTUK BERITA & KEGIATAN (GAMBAR DI KIRI)
============================================== */

/* Mengubah kartu menjadi flex container */
.article-snippet-card {
    display: flex;             /* 1. Mengaktifkan Flexbox untuk layout baris */
    align-items: center;       /* 2. Membuat gambar dan teks sejajar di tengah secara vertikal */
    gap: 1.25rem;              /* 3. Memberi jarak antara gambar dan teks */
    padding: 1rem;             /* Menyesuaikan padding internal kartu agar tidak terlalu mepet */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-snippet-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Wadah spesifik untuk gambar di sebelah kiri */
.article-snippet-img {
    flex-shrink: 0;            /* Mencegah gambar 'gepeng' saat lebar layar sempit */
    width: 130px;              /* Atur lebar gambar yang Anda inginkan */
    height: 100px;             /* Atur tinggi gambar yang Anda inginkan */
}

/* Styling untuk tag <img> di dalamnya */
.article-snippet-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* 4. Memastikan gambar mengisi area tanpa distorsi */
    border-radius: 0.6rem;     /* Membuat sudut gambar sedikit melengkung */
}

/* Wadah untuk konten teks di sebelah kanan */
.article-snippet-content {
    flex-grow: 1;              /* 5. Memastikan area teks mengisi sisa ruang yang tersedia */
}

/* Penyesuaian kecil pada judul dan teks cuplikan */
.article-snippet-content .card-title {
    margin-bottom: 0.25rem;
    font-size: 1rem;           /* Sedikit memperbesar judul agar lebih mudah dibaca */
}

.article-snippet-text {
    text-align: justify;
    font-size: 0.85rem;
    margin-bottom: 0;          /* Menghapus margin bawah dari paragraf */
}