/* Pastikan elemen body dan html tidak memiliki margin/padding yang mengganggu */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Header Utama Website */
.custom-header {
    background-image: url("/front/assets/back-header.png");
    background-color: rgba(
        107,
        201,
        129,
        0.69
    ); /* Pertahankan warna overlay awal */
    background-blend-mode: multiply; /* Pertahankan mode blending */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;
    /* color: #063e23; <--- Dihapus karena warna teks diatur di h1 dan p di bawah */

    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    min-height: 90vh; /* Sesuaikan tinggi */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Style untuk Judul H1 di Header */
.custom-header h1 {
    font-size: 2.8rem;
    font-weight: bolder; /* Membuat teks lebih tebal */
    color: #ffffff; /* Ubah warna judul menjadi putih */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Tambah bayangan hitam yang lebih kuat */
}

/* Style untuk Paragraf di Header */
.custom-header p {
    font-size: 1.25rem;
    opacity: 1; /* Pastikan tidak transparan */
    margin-bottom: 0;
    color: #f0f0f0; /* Ubah warna paragraf menjadi putih keabu-abuan */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Tambah bayangan hitam yang lebih kuat */
}

/* Container khusus search bar */
.search-container {
    max-width: 600px;
    margin: 0 auto;
}

/* Search Bar Input Group */
.search-bar {
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.2);
}

.search-bar input.form-control {
    border: none;
    border-radius: 30px 0 0 30px;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.search-bar input.form-control::placeholder {
    color: #063e23;
    font-style: italic;
}

.search-bar input.form-control:focus {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    outline: none;
    box-shadow: none;
}

.btn-search {
    border: none;
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0 30px 30px 0;
    transition: background 0.3s ease;
}

.btn-search:hover {
    /* Menambahkan hover untuk btn-search */
    background: rgba(
        255,
        255,
        255,
        0.4
    ); /* Contoh: sedikit lebih terang saat hover */
}

/* Gambar utama (featured, post, single) */
.featured-img,
.post-img,
.single-img {
    /* Menggabungkan selektor untuk menghindari duplikasi */
    width: 100%;
    height: 350px; /* Nilai height yang sama */
    object-fit: cover;
    border-radius: calc(0.24rem - 1px);
}
/* Jika .post-img di card konten perlu height berbeda, bisa ditimpa */
.card-img-top.post-img {
    /* Ini akan menimpa height 350px di atas */
    height: 200px;
}

/* Card konten (misalnya untuk daftar postingan) */
.card.konten {
    max-width: 700px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.125);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
}

.card-body.card-height {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Efek hover pada card konten */
.card.konten:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Card tinggi seragam (perhatikan potensi konflik dengan .card-body.card-height) */
/* Saya mengasumsikan ini untuk elemen yang berbeda atau ini adalah fallback */
.card-height {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Tombol detail khusus */
.btn-detail {
    background-color: #098251ba;
    color: #13432b;
}

/* List category (agar lebih rapi) */
.unstyle-list-categories {
    text-decoration: none;
    color: inherit;
}

/* Responsive Grid Spacing untuk postingan */
.row.post {
    max-width: 1350px;
    row-gap: 20px;
    justify-content: center;
}

/* Responsive Grid Spacing untuk tampilan show */
.row.show {
    justify-content: center;
}

/* Style dasar untuk semua card Bootstrap */
.card {
    border: none;
    border-radius: 0.5rem;
}

/* Tombol primary Bootstrap */
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
.btn-primary:hover {
    background-color: #0069d9;
    border-color: #0062cc;
}

/* Custom logo di navbar */
.custom-logo {
    font-size: 24px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.study-text {
    color: green;
    -webkit-text-stroke: 0.5px white;
    text-stroke: 1px white;
}

.group-text {
    color: white;
    -webkit-text-stroke: 0.5px green;
    text-stroke: 1px green;
}

/* Row kustom (misalnya untuk kategori di beranda) */
.row.custom-row {
    max-width: 1000px;
    margin: 0 auto;
    row-gap: 20px;
    justify-content: center;
}

/* Card utama (kotak Kategori Yang Tersedia) */
.card.widget.mb-4.shadow.mt-3 {
    /* Selektor ini menargetkan card kategori */
    background-color: rgba(255, 255, 255, 0.15); /* Putih dengan opacity 15% */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Border tipis putih transparan */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Pertahankan shadow */
    backdrop-filter: blur(
        8px
    ); /* Efek blur di belakang elemen (glassmorphism) */
    -webkit-backdrop-filter: blur(8px); /* Untuk kompatibilitas Safari */
    border-radius: 0.5rem; /* Pastikan radius sudut konsisten */
}

/* Header dari card kategori */
.card-header {
    background: rgba(
        107,
        201,
        129,
        0.4
    ) !important; /* Hijau dengan opacity 40% */
    color: #063e23; /* Warna teks header, bisa diubah ke putih jika kurang kontras */
    border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* Garis bawah transparan */
}

/* Body dari card kategori */
.card-body {
    background-color: rgba(
        255,
        255,
        255,
        0.05
    ); /* Putih dengan opacity sangat rendah (5%) */
    /* Pastikan padding default bootstrap tetap ada */
}

/* Badge untuk setiap kategori di dalam card */
.back-kat.badge {
    background: rgba(
        107,
        201,
        129,
        0.6
    ) !important; /* Hijau dengan opacity 60% */
    color: #ffffff !important; /* Ubah warna teks badge menjadi putih agar kontras */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Border putih transparan pada badge */
    backdrop-filter: blur(3px); /* Efek blur ringan untuk badge */
    -webkit-backdrop-filter: blur(3px);
    transition: background 0.3s ease; /* Transisi untuk efek hover */
}

.back-kat.badge:hover {
    background: rgba(
        107,
        201,
        129,
        0.8
    ) !important; /* Sedikit lebih solid saat dihover */
}

/* Teks judul "Kategori Yang Tersedia" */
.text-kat {
    color: #063e23; /* Pertahankan warna hijau gelap Anda */
    /* Jika kurang terlihat, pertimbangkan untuk menambahkan text-shadow: */
    /* text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5); */
    /* Atau ubah langsung ke putih: color: #FFFFFF; */
}

/* --- Pastikan semua CSS lainnya ada di file yang sama di bawah atau di atas ini sesuai penempatannya --- */

/* Warna teks kategori */
.teks-kat {
    color: #063e23;
}

/* Background untuk badge kategori */
.back-kat {
    background: rgba(107, 201, 129, 0.69);
}

/* Tombol Login */
.btn.btn-login {
    background: rgba(107, 201, 129, 0.69);
}

.btn.btn-login:hover {
    background: rgba(74, 136, 89, 0.69);
}

/* Background Login Page */
.bg-login {
    background-color: rgba(107, 201, 129, 0.37);
}
/* --- Penyesuaian untuk Halaman Detail Postingan --- */

/* Card Utama Postingan Detail */
.card.mb-4.shadow {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Gambar Single Post (jika diaktifkan) */
.single-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    transition: transform 0.3s ease;
}

.single-img:hover {
    transform: scale(1.03);
}

/* Profil Pengguna di Card Detail */
.d-flex.align-items-center.p-3 {
    padding-top: 1rem !important; /* Kurangi padding atas dari 1.5rem default p-3 */
    padding-bottom: 0.75rem !important; /* Kurangi padding bawah */
    /* border-bottom: 1px solid #eee; /* Opsional: garis tipis */
}

/* Card Body Postingan Detail */
.card-body {
    padding: 1.5rem !important; /* Kurangi padding total card-body */
    padding-top: 0.5rem !important; /* Kurangi padding atas agar lebih dekat dengan profil */
}

/* Info Meta (tanggal, kategori, view count, status) */
.small.text-muted {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.5rem; /* Kurangi jarak bawah */
    padding-top: 0.5rem; /* Tambah padding atas untuk spasi dari kuota */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee; /* Garis pemisah tipis */
    padding-bottom: 0.75rem; /* Padding bawah garis */
}

.small.text-muted span {
    margin-right: 0.75rem; /* Kurangi jarak antar span */
    display: flex;
    align-items: center;
}

.small.text-muted span i.bi {
    font-size: 0.95rem;
    margin-left: 0.25rem;
}

.small.text-muted a {
    color: #0d6efd;
    text-decoration: none;
    font-weight: bold;
}
.small.text-muted a:hover {
    text-decoration: underline;
}

/* Status Badge */
.small.text-muted .badge {
    font-size: 0.75rem;
    padding: 0.4em 0.7em;
    border-radius: 0.25rem;
    margin-left: auto;
    /* Periksa di sini: Anda punya .ms-3 di HTML. ms-3 adalah 1rem. */
    /* Jika ingin lebih dekat, bisa tambahkan .ms-1 atau .ms-2 di HTML, atau hapus ms-3 di HTML */
}

/* Kuota Text */
p.mt-3.text-muted {
    /* Hapus mt-3 di HTML, atur di sini */
    font-size: 1rem;
    font-weight: 500;
    color: #495057;
    margin-top: 0.75rem !important; /* Jarak atas dari info meta */
    margin-bottom: 1rem !important; /* Jarak bawah ke judul */
    /* Hapus border-bottom dan padding-bottom jika ingin garis di info meta saja */
    /* border-bottom: 1px solid #dee2e6; */
    /* padding-bottom: 1rem; */
}

/* Judul Postingan (H1 di dalam card-body) */
.card-body h1.card-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: #212529;
    margin-top: 0 !important; /* Pastikan tidak ada margin atas */
    margin-bottom: 1rem !important; /* Jarak bawah ke deskripsi */
}

/* Deskripsi Postingan */
.card-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #343a40;
    margin-bottom: 1.5rem !important; /* Kurangi jarak bawah sebelum tombol */
}

/* Tombol Aksi (Join, Lihat Permintaan, Lihat Lainnya) */
.card-body .btn {
    margin-right: 0.75rem;
    margin-top: 0.5rem !important; /* Tambah sedikit margin atas jika perlu */
    margin-bottom: 0.5rem !important; /* Spasi antar tombol vertikal */
    padding: 0.65rem 1.25rem; /* Ukuran padding tombol sedikit lebih kecil */
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 0.3rem;
    transition: all 0.2s ease-in-out;
}

.card-body .btn:last-child {
    margin-right: 0;
}

/* Alert warning untuk link WA */
.alert-warning {
    margin-top: 0.5rem !important; /* Kurangi margin top alert */
    margin-bottom: 0.5rem !important; /* Kurangi margin bottom alert */
}

/* Row show (untuk konten detail) */
.row.show {
    justify-content: center;
    margin-top: 1.5rem !important; /* Kurangi margin atas container card */
    margin-bottom: 2rem; /* Kurangi margin bawah */
}

/* Optional: Untuk form di dalam tombol, pastikan tidak ada margin ekstra */
form.d-inline {
    margin-bottom: 0;
}

/* Untuk teks yang dianimasikan per huruf */
#animated-headline span,
#animated-slogan span {
    opacity: 0; /* Semua huruf awalnya tidak terlihat */
    display: inline-block; /* Penting untuk animasi individual */
}

/* Opsional: Kursor berkedip untuk efek typing */
.typing-cursor {
    display: inline-block;
    width: 2px; /* Lebar kursor */
    height: 1.2em; /* Tinggi kursor, sesuaikan dengan tinggi font */
    background-color: #ffffff; /* Warna kursor (sesuaikan dengan warna teks Anda) */
    animation: blink-caret 0.75s step-end infinite;
    vertical-align: middle; /* Sejajarkan kursor dengan teks */
    margin-left: 2px; /* Spasi setelah teks */
}

@keyframes blink-caret {
    from,
    to {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}