/* Styling Avatar Melingkar */
.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.media-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    background-color: #f8f9fa;
}

.media-slider-inner {
    position: relative;
    width: 100%;
    height: auto;
    display: flex; /* Untuk sliding media */
    transition: transform 0.3s ease-in-out; 
    /* Implementasi sliding/carousel memerlukan JS tambahan atau menggunakan Bootstrap Carousel */
}

.media-item {
    min-width: 100%; /* Setiap item media mengisi container */
    height: auto;
    object-fit: cover; /* Gambar/Video menyesuaikan proporsi di dalam container */
    background-color: black; /* Latar belakang untuk video/gambar yang tidak full */
}

/* Styling Sederhana (Tambahkan ke file CSS Anda) */
.user-header {
    height: 170px; /* Tinggi Header */
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 8px;
    margin-bottom: 1px; /* Jarak dari konten di bawah */
}

.user-header-overlay {
    position: absolute;
    bottom: -30px; /* Turunkan Avatar di bawah header */
    left: 10px;
    display: flex;
    align-items: flex-end;
}

.header-avatar {
    width: 80px;
    height: 80px;
    border: 3px solid white;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    margin-right: 1px;
}

.header-logout-btn {
    position: absolute;
    top: 180px;
    right: 10px;
    z-index: 10;
}

.header-controls {
    position: absolute;
    top: 10px;
    right: 10px; /* Sebelah tombol logout */
    z-index: 10;
}

/* Untuk form postingan */
.post-form-compact .form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 0.5rem !important;
    
}

/* --- 1. MEMBATASI LEBAR FORM POSTINGAN (Sama seperti Feed) --- */
.post-form-wrapper {
    max-width: 600px; /* Batas lebar form postingan */
    width: 100%;
    margin: 0 auto 1.5rem auto; /* Pusatkan dan berikan margin bawah */
    padding: 0 1rem; /* Tambahkan sedikit padding di sisi HP agar tidak menempel */
}

.post-form-compact .form-row > * {
    flex: 1;
}

.post-form-compact .title-input {
    flex: 2; /* Judul lebih lebar */
}

.post-form-compact .check-input, .post-form-compact .file-input {
    flex: 1; /* File dan Publik lebih kecil */
}

/* Overwrite CSS Bootstrap untuk membuat tinggi carousel menyesuaikan konten */
.carousel {
    height: auto !important; 
    touch-action: pan-y; /* PENTING: Mengurangi konflik geser/scroll di HP */
}

.carousel-inner {
    height: auto !important;
}

.carousel-item {
    height: auto !important;
    max-height: 100vh; /* Batasi tinggi maksimum jika perlu, tapi biarkan 'auto' */
}

/* 2. Visual: Membuat Panah Lebih Kontras dan Terlihat */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* Membuat ikon panah lebih gelap/terlihat */
    filter: invert(100%); 
    
    /* Tambahkan latar belakang agar ikon lebih menonjol di latar terang */
    background-color: rgba(0, 0, 0, 0.4); 
    border-radius: 50%;
    padding: 10px;
}

/* 3. Tumpang Tindih (Z-Index): Memastikan panah selalu di atas media */
.carousel-control-prev,
.carousel-control-next {
    z-index: 10; /* Beri z-index tinggi */
}

.carousel-item img, .carousel-item video {
    z-index: 1; /* Pastikan media di belakang kontrol */
    width: 100%;
    height: auto; 
}

/* Anda sudah memiliki ini di renderPostForm(), mari kita terapkan stylenya */
.post-form-compact textarea[name="note"] {
    /* Wajib: Tinggi baris harus konsisten untuk perhitungan JS */
    line-height: 1.5em; 
    /* Wajib: Menonaktifkan resize dan scroll default */
    resize: vertical; /* Biarkan vertikal saja, atau none jika ingin JS sepenuhnya mengontrol */
    overflow-y: hidden; 
    padding-top: 0.25em; 
    padding-bottom: 0.25em;
    min-height: 2em; 
}

/* Loading Indicator untuk Infinite Scroll */
#loading-indicator {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
}

#scroll-trigger {
    /* Elemen tak terlihat untuk men-trigger load more */
    visibility: hidden; 
}

/* --- FITUR TEXT FORMATTING & READ MORE --- */

/* Class utama untuk teks postingan */
.post-text {
    white-space: pre-wrap; /* PENTING: Agar enter/ganti baris terbaca */
    word-wrap: break-word; /* Agar kata panjang tidak merusak layout */
    margin-bottom: 0.5rem;
}

/* Class untuk membatasi baris (Truncate) */
.post-text.text-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 7; /* Batas 7 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tombol Selengkapnya */
.read-more-btn {
    display: none; /* Sembunyi default, JS akan memunculkan jika teks panjang */
    color: #0d6efd;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    text-decoration: underline;
    margin-bottom: 1rem;
}

.read-more-btn:hover {
    color: #0a58ca;
}

/* --- GALLERY GRID LAYOUT --- */
.gallery-header {
    text-align: center;
    padding: 20px 0;
    background: #fff;
    margin-bottom: 1px;
    border-bottom: 1px solid #ddd;
}

.gallery-header .avatar-small {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 5px;
    border: 2px solid #007bff;
}

.gallery-grid {
    display: grid;
    /* Membuat 3 kolom dengan lebar rata */
    grid-template-columns: repeat(3, 1fr); 
    gap: 2px; /* Jarak antar foto sangat tipis */
    padding-bottom: 60px;
}

.gallery-item {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Membuat kotak menjadi PERSEGI (Aspect Ratio 1:1) */
    overflow: hidden;
    background: #000;
    cursor: pointer;
}

.gallery-item img, 
.gallery-item video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Gambar mengisi penuh kotak tanpa gepeng */
    transition: transform 0.2s;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* --- LIGHTBOX / FULL SCREEN VIEW --- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.lightbox-content {
    max-width: 100%;
    max-height: 80vh; /* Sisakan ruang untuk footer */
    object-fit: contain;
}

.lightbox-header {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10001;
}

.lightbox-footer {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10001;
}

.lightbox-user-info {
    display: flex;
    align-items: center;
}

.lightbox-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    border: 2px solid white;
}

.share-btn {
    background: transparent;
    border: 1px solid white;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
}

.share-btn:hover {
    background: rgba(255,255,255,0.2);
}

/* --- PERBAIKAN LEBAR DAN KERAPATAN POSTINGAN --- */

/* 1. Maksimalkan Lebar Container Utama */
/* Hilangkan margin/padding horizontal yang membatasi lebar di layar kecil */
.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 1. Aturan Global (Memastikan lebar layar penuh) */
.container-fluid {
    /* Hapus padding horizontal bawaan Bootstrap agar menempel ke sisi layar HP */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Khusus untuk tampilan utama (main-content) agar rapat ke sisi */
#main-content {
    padding-left: 0;
    padding-right: 0;
}

/* 2. Hilangkan Gap Antar Postingan (Buat Rapat) */
.card {
    /* Hapus margin-bottom standar Bootstrap antar card */
    margin-bottom: 0 !important; 
    
    /* Hapus border/shadow agar tidak ada celah visual */
    border: none !important;
    border-radius: 0 !important;
    
    /* Tambahkan garis tipis sebagai pemisah postingan */
    border-bottom: 1px solid #e0e0e0 !important;
}

/* 3. Aturan Card Body (Mempersiapkan Wrapper) */
.card-body {
    /* Hapus padding default Bootstrap agar media bisa full width, 
       padding akan dipindahkan ke .post-content-wrapper */
    padding: 0 !important; 
}

/* Optional: Hilangkan border-top di card pertama */
.card:first-child {
    border-top: none !important;
}

/* 4. WRAPPER UNTUK KONTEN TEKS/AVATAR/KOMENTAR (Pembatas Lebar) */
.post-content-wrapper {
    /* Batas lebar maksimum untuk konten (ideal untuk dibaca) */
    max-width: 600px; 
    width: 100%; 
    /* Memusatkan wrapper di tengah card */
    margin-left: auto; 
    margin-right: auto; 
    /* Tambahkan kembali padding agar teks tidak menempel ke sisi HP */
    padding: 1rem; 
}