/* assets/css/style.css */

/* --- GLOBAL STYLES & RESET --- */
body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Font mirip Facebook */
    margin: 0;
    padding: 0;
    background-color: #f0f2f5; /* Latar belakang abu-abu muda khas FB */
    color: #050505; /* Warna teks utama lebih gelap */
    line-height: 1.34; /* Line height standar FB */
}

.container {
    width: 90%;
    max-width: 980px; /* Lebar konten utama FB lebih lebar dari 960px */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar */
}

a {
    text-decoration: none;
    color: #1877f2; /* Warna biru link khas FB */
}

a:hover {
    text-decoration: underline;
}

/* --- REUSABLE COMPONENTS --- */
.profile-pic-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover; /* KRUSIAL: Memastikan foto profil presisi */
    margin-right: 10px;
    border: 1px solid #e4e6eb; /* Border tipis untuk foto profil */
}

.card-panel { /* Gaya dasar untuk box konten seperti postingan, form, dll */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Shadow halus khas FB */
    padding: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* --- HEADER STYLING (FACEBOOK-LIKE & RESPONSIVE) --- */
.main-header.fb-header {
    background-color: #fff;
    border-bottom: 1px solid #e4e6eb; /* Border bawah halus */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Shadow halus */
    display: flex;
    flex-direction: column; /* Susun baris atas dan bawah secara vertikal */
    position: sticky;
    top: 0;
    z-index: 1000;
    height: auto; /* Tinggi otomatis karena dua baris */
    box-sizing: border-box;
    padding: 0; /* Padding akan diatur di dalam baris */
}

/* Sembunyikan header mobile secara default di desktop */
.main-header.fb-header .header-mobile-content {
    display: none;
}

/* Header Desktop (Visible by default, hidden in mobile media query) */
.main-header.fb-header .header-desktop-content {
    display: flex; /* Aktifkan di desktop */
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px; /* Padding baris atas */
    width: 100%;
    height: 56px; /* Tinggi baris atas */
    box-sizing: border-box;
}

.header-top-left {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.fb-header .logo a {
    font-size: 28px; /* Ukuran logo lebih besar */
    font-weight: bold;
    color: #1877f2;
    text-decoration: none;
    margin-right: 10px;
}

.fb-header .search-bar { /* Search bar Desktop */
    position: relative;
    background-color: #f0f2f5; /* Latar belakang search bar */
    border-radius: 20px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    width: 240px;
}
.fb-header .search-bar i {
    color: #65676b; /* Warna ikon search */
    margin-right: 8px;
}
.fb-header .search-bar input {
    border: none;
    background: transparent;
    outline: none;
    padding: 0;
    font-size: 15px;
    color: #050505;
    width: calc(100% - 24px);
}
.fb-header .search-bar input::placeholder {
    color: #8a8d91;
}

/* Navigasi Tengah (Desktop) */
.fb-header .header-nav-desktop { /* Nama kelas baru untuk navigasi desktop */
    flex-grow: 1;
    justify-content: center;
    height: 100%;
}

.fb-header .nav-links-desktop { /* Nama kelas baru untuk ul navigasi desktop */
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    height: 100%;
    width: 100%;
    max-width: 800px; /* Batasi lebar maksimal seperti FB */
}

.fb-header .nav-links-desktop li {
    flex: 1;
    margin: 0 4px;
    position: relative;
    height: 100%;
}

.fb-header .nav-links-desktop li a {
    color: #65676b;
    font-size: 24px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 0;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.fb-header .nav-links-desktop li a:hover {
    background-color: #f0f2f5;
}
.fb-header .nav-links-desktop li a.active-nav-link {
    color: #1877f2;
}
.fb-header .nav-links-desktop li a.active-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #1877f2;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

/* Header Right (Desktop) */
.header-right-desktop { /* Nama kelas baru untuk header kanan desktop */
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
}

.fb-header .header-profile-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #050505;
    font-weight: 600;
    padding: 6px 10px 6px 6px;
    border-radius: 20px;
    background-color: #e4e6eb;
    transition: background-color 0.2s ease;
}
.fb-header .header-profile-link:hover {
    background-color: #d8dadf;
}
.fb-header .header-profile-pic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover; /* KRUSIAL: Memastikan foto profil di header presisi */
    margin-right: 6px;
    border: none;
}
.fb-header .header-username {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}
.fb-header .header-icon-button { /* Gaya umum untuk tombol bulat di desktop kanan (settings, logout) */
    background-color: #e4e6eb;
    color: #050505;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    border: none;
    cursor: pointer;
}
.fb-header .header-icon-button:hover {
    background-color: #d8dadf;
}
.fb-header .header-button { /* Gaya untuk tombol login/daftar di desktop */
    background-color: #1877f2;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.2s ease;
}
.fb-header .header-button:hover {
    background-color: #165bba;
}


/* Badge Notifikasi (Umum untuk Header) */
.notification-badge {
    background-color: #f02849;
    color: white;
    border-radius: 50%;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: bold;
    position: absolute;
    top: -4px;
    right: -8px;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-sizing: border-box;
    border: 1px solid #fff;
    text-align: center;
}


/* --- MOBILE HEADER & OVERLAY (MEDIA QUERY) --- */
@media (max-width: 768px) {
    /* Sembunyikan header desktop sepenuhnya */
    .main-header.fb-header .header-desktop-content {
        display: none;
    }

    /* Tampilkan header mobile */
    .main-header.fb-header .header-mobile-content {
        display: flex; /* Aktifkan tampilan header mobile */
        flex-direction: column; /* Tetap dua baris */
        height: auto;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        position: sticky;
        top: 0;
        z-index: 999; /* Pastikan di bawah overlay penuh */
    }

    /* Baris Atas Mobile (Logo & Tombol Kanan) */
    .mobile-top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;
        height: 56px; /* Tinggi standar */
        border-bottom: 1px solid #f0f2f5; /* Garis pemisah */
    }

    .mobile-logo a {
        font-size: 24px;
        font-weight: bold;
        color: #1877f2;
        text-decoration: none;
    }

    .mobile-top-actions {
        display: flex;
        align-items: center;
        gap: 8px; /* Jarak antar tombol */
    }
    .mobile-top-actions .mobile-search-button-trigger,
    .mobile-top-actions .mobile-menu-button-trigger,
    .mobile-top-actions .mobile-logout-button-trigger { /* Tambah class trigger logout mobile */
        background-color: #e4e6eb;
        color: #050505;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        text-decoration: none;
        transition: background-color 0.2s ease;
    }
    .mobile-top-actions .mobile-search-button-trigger:hover,
    .mobile-top-actions .mobile-menu-button-trigger:hover,
    .mobile-top-actions .mobile-logout-button-trigger:hover {
        background-color: #d8dadf;
    }

    /* Navigasi Ikon Utama Mobile (Baris Kedua) */
    .mobile-main-nav {
        width: 100%;
        height: 48px; /* Tinggi bar navigasi mobile */
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border-bottom: 1px solid #e4e6eb; /* Garis bawah navigasi */
    }
    .mobile-main-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        height: 100%;
        width: 100%; /* Lebar penuh */
        max-width: 600px; /* Batasi lebar agar tidak terlalu melebar di tablet */
    }
    .mobile-main-nav ul li {
        flex: 1; /* Setiap ikon mengambil ruang yang sama */
        height: 100%;
        position: relative;
    }
    .mobile-main-nav ul li a {
        color: #65676b;
        font-size: 24px; /* Ukuran ikon utama mobile */
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        transition: background-color 0.2s ease;
    }
    .mobile-main-nav ul li a:hover {
        background-color: #f0f2f5;
    }
    .mobile-main-nav ul li a.active-nav-link {
        color: #1877f2;
    }
    .mobile-main-nav ul li a.active-nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #1877f2;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
    }
    .mobile-main-nav ul li .notification-badge { /* Badge di ikon mobile nav */
        top: 4px;
        right: 4px;
        font-size: 10px;
        padding: 2px 5px;
        min-width: 14px;
        height: 14px;
    }

    /* Mobile Search Bar Overlay */
    .mobile-search-bar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 56px; /* Tinggi sama dengan header */
        background-color: #fff;
        z-index: 1001;
        display: none; /* Hidden by default */
        align-items: center;
        padding: 0 12px;
        box-sizing: border-box;
        box-shadow: 0 2px 4px rgba(0,0,0,.1);
    }
    .mobile-search-bar-overlay.active {
        display: flex; /* Tampilkan saat aktif */
    }
    .mobile-search-bar-overlay .mobile-search-form {
        display: flex;
        align-items: center;
        flex-grow: 1;
        background-color: #f0f2f5;
        border-radius: 20px;
        padding: 8px 12px;
    }
    .mobile-search-bar-overlay .mobile-search-form i.fa-search {
        color: #606770;
        margin-right: 8px;
    }
    .mobile-search-bar-overlay .mobile-search-form input {
        border: none;
        background: transparent;
        outline: none;
        padding: 0;
        font-size: 16px;
        flex-grow: 1;
        color: #050505;
    }
    .mobile-search-bar-overlay .mobile-search-form .back-button-search-mobile {
        background: none;
        border: none;
        font-size: 20px;
        color: #65676b;
        margin-right: 10px;
        cursor: pointer;
    }
    .mobile-search-bar-overlay .mobile-search-form .submit-search-mobile {
        background: none;
        border: none;
        color: #1877f2;
        font-size: 18px;
        cursor: pointer;
        margin-left: 10px;
    }


    /* Mobile Overlay Menu (Samping Kanan) */
    .mobile-overlay-menu {
        position: fixed;
        top: 0;
        right: -300px; /* Sembunyikan di luar layar kanan */
        width: 300px; /* Lebar menu overlay */
        height: 100%;
        background-color: #fff;
        z-index: 1002;
        display: flex;
        flex-direction: column;
        box-shadow: -2px 0 8px rgba(0,0,0,0.2);
        transition: right 0.3s ease-in-out;
    }
    .mobile-overlay-menu.active {
        right: 0;
    }
    .mobile-overlay-menu .overlay-header {
        background-color: #fff;
        padding: 15px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mobile-overlay-menu .overlay-header .profile-info {
        display: flex;
        align-items: center;
        font-weight: bold;
    }
    .mobile-overlay-menu .overlay-header .overlay-profile-pic {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 10px;
    }
    .mobile-overlay-menu .overlay-header .overlay-username {
        font-size: 17px;
        color: #050505;
    }
    .mobile-overlay-menu .overlay-header .overlay-guest {
        font-style: italic;
        color: #65676b;
    }
    .mobile-overlay-menu .overlay-header .close-overlay-menu {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #65676b;
    }
    .mobile-overlay-menu .overlay-links {
        list-style: none;
        padding: 0;
        margin: 0;
        flex-grow: 1;
        overflow-y: auto;
    }
    .mobile-overlay-menu .overlay-links li a {
        display: flex;
        align-items: center;
        padding: 15px;
        text-decoration: none;
        color: #050505;
        border-bottom: 1px solid #f0f2f5;
        font-size: 17px;
        transition: background-color 0.2s ease;
    }
    .mobile-overlay-menu .overlay-links li a:hover {
        background-color: #f0f2f5;
    }
    .mobile-overlay-menu .overlay-links li a i {
        margin-right: 10px;
        font-size: 20px;
        color: #65676b;
    }

    /* Penyesuaian padding-top main-content agar tidak tertutup header mobile */
    .main-content {
        padding-top: 104px; /* Tinggi header mobile (56px top bar + 48px nav bar) */
    }
}

/* Penyesuaian untuk layar ponsel yang lebih kecil lagi (misal < 480px) */
@media (max-width: 480px) {
    .mobile-logo a {
        font-size: 22px;
    }
    .mobile-main-nav ul li a {
        font-size: 20px; /* Ikon lebih kecil */
        padding: 0 6px; /* Padding lebih sempit */
    }
    .mobile-top-actions a {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    .mobile-overlay-menu {
        width: 100%;
        right: -100%;
    }
    .mobile-overlay-menu.active {
        right: 0;
    }
    .mobile-search-bar-overlay .mobile-search-form input {
        font-size: 15px;
    }
    .mobile-search-bar-overlay .mobile-search-form .back-button-search-mobile,
    .mobile-search-bar-overlay .mobile-search-form .submit-search-mobile {
        font-size: 14px;
    }

    .main-content {
        padding-top: 100px; /* Sesuaikan padding-top untuk header yang lebih kecil (56+44 = 100) */
    }
}


/* --- General Layout & Other Styles (Pertahankan yang sudah ada di bawah ini) --- */

/* Footer (Sudah disederhanakan) */
.main-footer {
    background-color: #fff;
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid #ddd;
    margin-top: 20px;
}

.main-footer p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

/* Form Styling (basic) */
form {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    margin-top: 20px;
}

form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

form input[type="text"],
form input[type="email"],
form input[type="password"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

form button {
    background-color: #1877f2;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: #165bba;
}

/* Styling untuk form postingan baru */
.post-creation-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    margin-bottom: 30px;
}

.post-creation-box h3 {
    margin-top: 0;
    color: #555;
    text-align: center;
    margin-bottom: 20px;
}

.post-creation-box textarea {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: vertical;
    font-size: 16px;
}

.post-creation-box input[type="file"] {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

form button {
    width: 100%;
    padding: 12px;
    font-size: 18px;
}

/* Styling untuk daftar postingan */
.posts-feed {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.post-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

.post-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.profile-pic-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
    border: 1px solid #eee;
}

.post-header h4 {
    margin: 0;
    font-size: 16px;
}

.post-header h4 a {
    text-decoration: none;
    color: #1877f2;
}

.post-header .post-time {
    font-size: 13px;
    color: #777;
    margin-left: auto;
}

.post-content {
    margin-bottom: 15px;
}

.post-content p {
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 15px;
}

.post-media-image,
.post-media-video {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 10px;
    border-radius: 5px;
    object-fit: contain; /* Memastikan gambar tidak terpotong, menjaga rasio asli */
}

.post-actions {
    display: flex;
    justify-content: space-around;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.post-actions .action-button {
    background: none;
    border: none;
    color: #606770;
    cursor: pointer;
    font-size: 15px;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    text-decoration: none; /* Untuk link */
    display: flex;
    align-items: center;
}

.post-actions .action-button:hover {
    background-color: #f0f2f5;
}

.post-actions .view-count {
    font-weight: bold;
    margin-right: 5px;
}

.no-posts {
    text-align: center;
    color: #777;
    margin-top: 50px;
}

/* Untuk Post Card di halaman detail agar lebih menonjol */
.post-card.detail-view {
    padding: 30px;
    margin-bottom: 30px;
    border-left: 5px solid #1877f2;
}

/* Chat Section */
.chat-section {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    margin-top: 30px;
}

.chat-section h3 {
    margin-top: 0;
    color: #555;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.chat-messages-container {
    max-height: 400px; /* Batasi tinggi container chat */
    overflow-y: auto; /* Aktifkan scroll jika konten chat terlalu panjang */
    padding-right: 10px; /* Ruang untuk scrollbar */
    margin-bottom: 20px;
}

.chat-message {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    position: relative; /* Penting untuk posisi absolut overlay */
}

.chat-message:last-child {
    margin-bottom: 0;
}

.chat-message .profile-pic-small {
    width: 36px; /* **Ukuran foto profil yang presisi** */
    height: 36px; /* **Ukuran foto profil yang presisi** */
    border-radius: 50%;
    object-fit: cover; /* **KRUSIAL: Memastikan foto presisi dan mengisi area** */
    flex-shrink: 0; /* Mencegah gambar menyusut */
    border: 1px solid #e4e6eb; /* Border tipis */
}

.chat-message .chat-content {
    flex-grow: 1;
    padding-right: 30px; /* Ruang untuk tombol hapus */
}

.chat-message .chat-username {
    font-weight: bold;
    color: #333; /* Warna standar */
    margin-right: 5px;
    font-size: 14px;
    display: block; /* Agar username di baris sendiri */
    margin-bottom: 3px;
}

/* Styling untuk tautan nama pengguna di chat */
.chat-content .chat-username-link {
    text-decoration: none;
    color: #1877f2; /* Warna link standar Smansab */
    font-weight: bold;
    font-size: 14px; /* Sesuaikan dengan ukuran chat-username */
    display: block; /* Agar username berada di baris sendiri */
    margin-bottom: 3px;
}

.chat-content .chat-username-link:hover {
    text-decoration: underline;
}

.chat-message .chat-time {
    font-size: 12px;
    color: #999;
}

.chat-message p {
    margin: 5px 0 0 0;
    line-height: 1.5;
    font-size: 15px;
}

.no-chats {
    text-align: center;
    color: #777;
    padding: 20px;
    background-color: #f0f2f5;
    border-radius: 5px;
}

.chat-form textarea {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: vertical;
    font-size: 15px;
}

.chat-form button {
    width: 100%;
    padding: 10px;
    font-size: 16px;
}

/* Tombol Hapus Chat di Postingan */
.chat-message .delete-post-chat-button {
    background: none;
    border: none;
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 8px;
    padding: 2px;
    transition: color 0.2s ease;
    opacity: 0; /* Sembunyikan default */
}

.chat-message:hover .delete-post-chat-button {
    opacity: 1; /* Tampilkan saat hover */
}

.chat-message .delete-post-chat-button:hover {
    color: #f44336;
}

/* Styling untuk Tombol Edit/Hapus Chat Diskusi */
.chat-message {
    /* Pastikan padding-right cukup untuk tombol */
    position: relative;
}

.chat-message .chat-actions-overlay {
    position: absolute;
    top: 5px; /* Sesuaikan posisi vertikal */
    right: 5px; /* Sesuaikan posisi horizontal */
    display: flex;
    gap: 5px; /* Jarak antar tombol */
    opacity: 0; /* Sembunyikan secara default */
    transition: opacity 0.2s ease;
    z-index: 5; /* Pastikan di atas konten chat */
}

.chat-message:hover .chat-actions-overlay {
    opacity: 1; /* Tampilkan saat hover */
}

.chat-actions-overlay button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 3px 5px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
    color: #65676b; /* Warna ikon default */
}

.chat-item.my-chat .chat-actions-overlay button {
    color: rgba(255, 255, 255, 0.8); /* Warna ikon di bubble saya */
}


.chat-actions-overlay .edit-chat-button:hover {
    background-color: rgba(0,0,0,0.1); /* Latar belakang hover */
}
.chat-item.my-chat .chat-actions-overlay .edit-chat-button:hover {
    background-color: rgba(255,255,255,0.2); /* Latar belakang hover di bubble saya */
}


.chat-actions-overlay .delete-chat-button:hover {
    background-color: rgba(0,0,0,0.1); /* Latar belakang hover */
}
.chat-item.my-chat .chat-actions-overlay .delete-chat-button:hover {
    background-color: rgba(255,255,255,0.2); /* Latar belakang hover di bubble saya */
}


/* Styling untuk Form Edit Chat (jika diimplementasikan secara inline) */
.edit-chat-form {
    display: flex; /* Default disembunyikan oleh JS */
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    width: 100%; /* Lebar penuh */
}

.edit-chat-form textarea {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: vertical;
    font-size: 14px;
    min-height: 30px;
    line-height: 1.4;
}

.edit-chat-form button {
    background-color: #1877f2;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.edit-chat-form button.cancel-edit-chat {
    background-color: #6c757d; /* Abu-abu untuk cancel */
}
.edit-chat-form button.cancel-edit-chat:hover {
    background-color: #5a6268;
}

.edit-chat-form .fa-check,
.edit-chat-form .fa-times {
    margin: 0; /* Hapus margin ikon */
}


/* Profile Page Styling */
.profile-header-section {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    text-align: center;
    margin-bottom: 30px;
}

.profile-pic-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover; /* KRUSIAL: Memastikan foto profil utama presisi */
    border: 3px solid #eee;
    margin-bottom: 15px;
}

.profile-header-section h2 {
    margin-top: 10px;
    margin-bottom: 5px;
    color: #333;
    font-size: 28px;
}

.profile-header-section p {
    color: #666;
    font-size: 15px;
}

.edit-profile-button {
    display: inline-block;
    background-color: #1877f2;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 15px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.edit-profile-button:hover {
    background-color: #165bba;
}

/* --- Styling untuk Pratinjau Foto di Profil (profile.php) --- */
/* CATATAN: Karena fitur Album Foto dihapus, kelas ini digunakan untuk menampilkan foto-foto postingan */
.photos-preview-section { /* Mengganti albums-preview-section */
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    margin-top: 20px;
    margin-bottom: 20px;
}

.photos-preview-section h3 { /* Mengganti h3 dari albums-preview-section */
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.photos-grid-small { /* Mengganti albums-grid-small */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* **Lebar thumbnail foto** */
    gap: 8px; /* Jarak antar item */
    margin-top: 10px;
}

.photo-preview-item { /* Mengganti album-preview-item */
    display: block;
    text-decoration: none;
    color: #333;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background-color: #f0f2f5;
    aspect-ratio: 16 / 9; /* **KRUSIAL: Rasio aspek 16:9 agar sama dengan video** */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.photo-preview-img { /* Mengganti album-preview-img */
    width: 100%;
    height: 100%; /* **KRUSIAL: Tetap 100% tinggi container** */
    object-fit: cover; /* KRUSIAL: Memastikan gambar mengisi item tanpa distorsi */
    display: block;
}

.no-cover-preview { /* Tetap ada sebagai fallback jika tidak ada gambar */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #65676b;
    font-size: 0.8em;
    font-style: italic;
}
.no-cover-preview i {
    font-size: 1.5em;
    margin-bottom: 5px;
}

.photo-preview-caption { /* Mengganti album-preview-name */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.65em;
    padding: 3px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.photo-preview-item.view-all-photos { /* Mengganti album-preview-item.view-all-albums */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: bold;
    background-color: #e4e6eb;
    color: #333;
    transition: background-color 0.2s ease;
}
.photo-preview-item.view-all-photos:hover {
    background-color: #d8dadf;
}

.photo-preview-item.view-all-photos i {
    font-size: 1em;
    margin-bottom: 3px;
}

.photos-preview-section .no-photos-found { /* Mengganti no-albums */
    padding: 10px;
    font-size: 0.9em;
    color: #65676b;
    text-align: center;
    grid-column: 1 / -1;
}


/* --- Styling untuk Pratinjau Video di Profil (profile.php) --- */
/* **Catatan: Video ini biasanya lebih lebar dari foto, rasio 16:9** */
.videos-preview-section {
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    margin-top: 20px;
    margin-bottom: 20px;
}

.videos-preview-section h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.videos-grid-small {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* **Lebar thumbnail video** */
    gap: 8px;
    margin-top: 10px;
}

.video-preview-item {
    display: block;
    text-decoration: none;
    color: #333;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background-color: #f0f2f5;
    aspect-ratio: 16 / 9; /* KRUSIAL: Rasio aspek standar video (16:9) */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.video-preview-img {
    width: 100%;
    height: 100%; /* **KRUSIAL: Tetap 100% tinggi container** */
    object-fit: cover; /* KRUSIAL: Memastikan gambar/video mengisi item tanpa distorsi */
    display: block;
}

.video-preview-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.65em;
    padding: 3px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* Video Play Overlay (untuk thumbnail video postingan) */
.video-thumbnail-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Rasio aspek 16:9 untuk video */
    height: 0;
    overflow: hidden;
    border-radius: 5px;
}

.video-thumbnail-container video,
.video-thumbnail-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* KRUSIAL: Memastikan video/gambar mengisi container */
    border-radius: 5px;
}

.video-thumbnail-container .video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Overlay gelap saat tidak dimainkan */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: white;
    text-decoration: none;
    transition: background-color 0.2s ease;
    z-index: 1;
}
.video-thumbnail-container .video-play-overlay:hover {
    background-color: rgba(0, 0, 0, 0.5);
}
.video-thumbnail-container .video-play-overlay i {
    pointer-events: none;
}

.no-videos {
    width: 100%;
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    font-size: 16px;
    color: #65676b;
}

/* --- Styling untuk Halaman Semua Foto (all_photos.php) --- */
.all-photos-grid-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    margin-top: 20px;
    margin-bottom: 20px;
}

.all-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* **Sama dengan ukuran video (default)** */
    gap: 15px; /* Jarak antar foto */
}

.photo-grid-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 9; /* **KRUSIAL: Rasio aspek 16:9 agar sama dengan video** */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.photo-grid-item img.photo-grid-img {
    width: 100%;
    height: 100%; /* KRUSIAL: Memastikan gambar mengisi item tanpa distorsi */
    object-fit: cover; /* KRUSIAL: Memastikan gambar mengisi item tanpa distorsi */
    display: block;
    flex-shrink: 0;
}

.photo-grid-item .photo-grid-link-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 5px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: white;
    text-align: center;
    text-decoration: none;
}
.photo-grid-item:hover .photo-grid-link-overlay {
    opacity: 1;
}

.photo-grid-item .photo-grid-caption {
    font-size: 0.75em;
    margin-bottom: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}
.photo-grid-item .view-post-icon {
    font-size: 1.5em;
    margin-top: auto;
    margin-bottom: 5px;
}

.photo-grid-actions-overlay {
    position: absolute;
    top: 5px;
    right: 5px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
}
.photo-grid-item:hover .photo-grid-actions-overlay {
    opacity: 1;
}
.photo-grid-actions-overlay .delete-photo-button {
    background-color: rgba(244, 67, 54, 0.8);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 7px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: background-color 0.2s ease;
}
.photo-grid-actions-overlay .delete-photo-button:hover {
    background-color: #f44336;
}

.all-photos-grid-container .no-photos {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    font-size: 16px;
    color: #65676b;
}

/* --- Media Query untuk Responsivitas Pratinjau Gambar/Video (Global) --- */
/* Ini akan memengaruhi tampilan di profile.php, albums.php, all_photos.php, all_videos.php */
@media (max-width: 600px) {
    .photos-grid-small { /* Foto di profile.php */
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); /* Ukuran lebih kecil di mobile */
        gap: 6px;
    }
    .videos-grid-small { /* Video di profile.php */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Ukuran lebih kecil di mobile */
        gap: 6px;
    }
    .all-photos-grid { /* all_photos.php */
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Ukuran lebih kecil di mobile */
        gap: 10px;
    }
    .album-preview-name, .video-preview-caption, .photo-grid-caption {
        font-size: 0.6em;
        padding: 2px;
    }
    .photo-preview-item.view-all-photos span,
    .video-preview-item.view-all-videos span {
        font-size: 0.7em;
        margin-bottom: 2px;
    }
    .photo-preview-item.view-all-photos i,
    .video-preview-item.view-all-videos i {
        font-size: 0.8em;
        margin-bottom: 2px;
    }
    .no-cover-preview i {
        font-size: 1.2em;
    }
    .photo-grid-item .view-post-icon {
        font-size: 1.2em;
    }
    .photo-grid-actions-overlay .delete-photo-button {
        padding: 4px 6px;
        font-size: 11px;
        gap: 2px;
    }
}
    
@media (max-width: 480px) {
    .photos-grid-small {
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); /* Terkecil */
        gap: 4px;
    }
    .videos-grid-small {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Terkecil */
        gap: 4px;
    }
    .all-photos-grid { /* all_photos.php */
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); /* Terkecil */
        gap: 4px;
    }
}


/* --- BROWSER NOTIFICATION POPUP --- */
/* CATATAN: Ini adalah gaya untuk notifikasi pop-up yang sebelumnya dihilangkan. */
/* Jika Anda benar-benar tidak ingin fitur popup, Anda bisa menghapus blok ini dari style.css. */
/* Saya meninggalkannya di sini untuk referensi jika Anda memutuskan untuk menambahkannya kembali di masa depan. */
/* .browser-notification-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 90%;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 10px 20px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.browser-notification-popup.active {
    display: block;
    opacity: 1;
} */

/* assets/css/style.css */

/* ... (Kode CSS lainnya di bagian atas, pertahankan) ... */

/* --- Styling untuk Halaman Follower (followers.php) --- */
.followers-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 25px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.followers-section {
    margin-bottom: 30px;
}
.followers-section:last-of-type { /* Hapus margin bawah untuk section terakhir */
    margin-bottom: 0;
}


.followers-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.3em;
    color: #050505;
    border-bottom: 1px solid #f0f2f5;
    padding-bottom: 10px;
}

.users-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* **Lebar kolom disesuaikan untuk presisi** */
    gap: 15px; /* Jarak antar item */
}

.user-item {
    display: flex;
    align-items: center; /* **Pusatkan vertikal** */
    gap: 15px; /* Jarak antara gambar dan teks/tombol */
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 10px 15px; /* **Padding yang lebih proporsional** */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: background-color 0.2s ease;
    text-decoration: none;
    color: #050505;
}
.user-item:hover {
    background-color: #e8e8e8;
}

.user-item a { /* Link yang membungkus gambar dan username */
    display: flex;
    align-items: center; /* **Pusatkan gambar dan teks** */
    gap: 10px; /* Jarak antara gambar dan username */
    text-decoration: none;
    color: #050505;
    flex-grow: 1; /* Biarkan link mengisi ruang untuk interaksi lebih mudah */
}

.user-item .profile-pic-small { /* Gunakan kelas yang sudah ada */
    width: 48px; /* **Ukuran foto profil yang presisi (sesuai standar 48px)** */
    height: 48px; /* **Ukuran foto profil yang presisi** */
    border: 2px solid #ddd;
    flex-shrink: 0;
}

.user-item .username-link {
    font-weight: bold;
    font-size: 1.1em;
    word-break: break-word;
    white-space: nowrap; /* Pastikan nama tetap dalam satu baris */
    overflow: hidden;
    text-overflow: ellipsis; /* Tambah ellipsis jika nama terlalu panjang */
    line-height: 1.2; /* Tingkatkan line-height untuk kerapian */
}
.user-item .username-link:hover {
    text-decoration: underline;
}

.user-actions {
    display: flex; /* Gunakan flexbox untuk tombol aksi */
    gap: 8px; /* Jarak antar tombol aksi */
    flex-shrink: 0; /* Pastikan tombol tidak menyusut */
}

.user-actions .action-button {
    padding: 8px 12px;
    font-size: 0.9em;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap; /* Jangan memecah teks tombol */
}

.user-actions .follow-button {
    background-color: #1877f2;
    color: white;
}
.user-actions .follow-button:hover {
    background-color: #165bba;
}

.user-actions .unfollow-button {
    background-color: #e4e6eb;
    color: #050505;
}
.user-actions .unfollow-button:hover {
    background-color: #d8dadf;
}

.user-actions .message-button {
    background-color: #0084ff;
    color: white;
}
.user-actions .message-button:hover {
    background-color: #0073e6;
}

.no-users {
    text-align: center;
    grid-column: 1 / -1; /* Mengambil seluruh lebar grid */
    padding: 20px;
    color: #777;
    font-style: italic;
}


/* Media Query untuk Halaman Follower */
@media (max-width: 600px) {
    .followers-container {
        padding: 15px;
    }
    .users-list {
        /* Kembali ke tumpuk di mobile jika 1 kolom per baris */
        grid-template-columns: 1fr; 
        gap: 10px;
    }
    .user-item {
        flex-direction: row; /* Kembali berdampingan di mobile, tapi ukuran lebih kecil */
        align-items: center;
        padding: 10px;
        gap: 10px;
    }
    .user-item .profile-pic-small {
        width: 40px; /* Kembali ke ukuran kecil mobile */
        height: 40px;
        margin-right: 0; /* Hapus margin kanan */
    }
    .user-item a {
        flex-grow: 1; /* Link tetap mengisi ruang */
        justify-content: flex-start; /* Gambar dan nama rata kiri */
    }
    .user-item .username-link {
        font-size: 0.95em;
        white-space: normal; /* Izinkan nama memecah baris jika perlu */
        max-height: none; /* Hapus batasan tinggi */
    }
    .user-actions {
        flex-direction: column; /* Tombol tumpuk di mobile */
        gap: 5px;
        align-items: stretch; /* Tombol mengisi lebar */
    }
    .user-actions .action-button {
        width: 100%;
        font-size: 0.8em;
        padding: 6px 8px;
    }
}
@media (max-width: 480px) {
    .followers-container {
        padding: 10px;
    }
    .users-list {
        gap: 8px;
    }
    .user-item {
        padding: 8px;
    }
    .user-item .profile-pic-small {
        width: 36px;
        height: 36px;
    }
    .user-item .username-link {
        font-size: 0.9em;
    }
    .user-actions .action-button {
        font-size: 0.75em;
        padding: 5px;
    }
}

/* assets/css/style.css */

/* ... (Kode CSS lainnya di bagian atas, pertahankan) ... */

/* --- Styling untuk Halaman Follower (followers.php) --- */
.followers-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 25px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.followers-section {
    margin-bottom: 30px;
}
.followers-section:last-of-type { /* Hapus margin bawah untuk section terakhir */
    margin-bottom: 0;
}


.followers-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.3em;
    color: #050505;
    border-bottom: 1px solid #f0f2f5;
    padding-bottom: 10px;
}

.users-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Kolom adaptif untuk desktop */
    gap: 15px; /* Jarak antar item */
}

.user-item {
    display: flex;
    align-items: center; /* Pusatkan vertikal */
    gap: 15px; /* Jarak antara gambar dan teks/tombol */
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 10px 15px; /* Padding yang lebih proporsional */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: background-color 0.2s ease;
    text-decoration: none;
    color: #050505;
}
.user-item:hover {
    background-color: #e8e8e8;
}

.user-item a { /* Link yang membungkus gambar dan username */
    display: flex;
    align-items: center; /* Pusatkan gambar dan teks */
    gap: 10px; /* Jarak antara gambar dan username */
    text-decoration: none;
    color: #050505;
    flex-grow: 1; /* Biarkan link mengisi ruang untuk interaksi lebih mudah */
}

.user-item .profile-pic-small { /* Gunakan kelas yang sudah ada */
    width: 48px; /* Ukuran foto profil yang presisi */
    height: 48px; /* Ukuran foto profil yang presisi */
    border-radius: 50%;
    object-fit: cover; /* Memastikan foto presisi dan mengisi area */
    flex-shrink: 0;
}

.user-item .username-link {
    font-weight: bold;
    font-size: 1.1em;
    word-break: break-word;
    white-space: nowrap; /* Pastikan nama tetap dalam satu baris */
    overflow: hidden;
    text-overflow: ellipsis; /* Tambah ellipsis jika nama terlalu panjang */
    line-height: 1.2;
}
.user-item .username-link:hover {
    text-decoration: underline;
}

.user-actions {
    display: flex; /* Gunakan flexbox untuk tombol aksi */
    gap: 8px; /* Jarak antar tombol aksi */
    flex-shrink: 0; /* Pastikan tombol tidak menyusut */
}

.user-actions .action-button {
    padding: 8px 12px;
    font-size: 0.9em;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap; /* Jangan memecah teks tombol */
}

.user-actions .follow-button {
    background-color: #1877f2;
    color: white;
}
.user-actions .follow-button:hover {
    background-color: #165bba;
}

.user-actions .unfollow-button {
    background-color: #e4e6eb;
    color: #050505;
}
.user-actions .unfollow-button:hover {
    background-color: #d8dadf;
}

.user-actions .message-button {
    background-color: #0084ff;
    color: white;
}
.user-actions .message-button:hover {
    background-color: #0073e6;
}

.no-users {
    text-align: center;
    grid-column: 1 / -1; /* Mengambil seluruh lebar grid */
    padding: 20px;
    color: #777;
    font-style: italic;
}


/* Media Query untuk Halaman Follower */
@media (max-width: 600px) {
    .followers-container {
        padding: 15px;
    }
    .users-list {
        grid-template-columns: 1fr; /* **KRUSIAL: 1 kolom di mobile** */
        gap: 10px;
    }
    .user-item {
        flex-direction: row; /* **KRUSIAL: Tetap berdampingan (gambar-nama-tombol)** */
        align-items: center;
        padding: 10px;
        gap: 10px;
        flex-wrap: wrap; /* Izinkan wrap jika nama atau tombol terlalu panjang */
    }
    .user-item .profile-pic-small {
        width: 40px; /* **KRUSIAL: Ukuran foto profil kecil di mobile** */
        height: 40px;
        margin-right: 0;
    }
    .user-item a { /* Link gambar dan username */
        flex-grow: 1;
        justify-content: flex-start;
        gap: 8px; /* Jarak antara foto dan nama di mobile */
    }
    .user-item .username-link {
        font-size: 0.95em; /* Sedikit lebih kecil */
        white-space: normal; /* **KRUSIAL: Izinkan nama memecah baris jika perlu** */
        max-height: 2.4em; /* Batasi 2 baris agar tetap rapi */
        line-height: 1.2em;
    }
    .user-actions {
        flex-direction: row; /* **KRUSIAL: Tombol tetap berdampingan di mobile** */
        width: 100%; /* Tombol memenuhi lebar sisa */
        justify-content: flex-end; /* Rata kanan */
        gap: 5px;
        margin-top: 5px; /* Jarak dari username jika wrap */
    }
    .user-actions .action-button {
        flex: 1; /* Distribusi lebar sama rata */
        font-size: 0.8em;
        padding: 6px 8px;
    }
}
@media (max-width: 480px) {
    .followers-container {
        padding: 10px;
    }
    .users-list {
        gap: 8px;
    }
    .user-item {
        padding: 8px;
    }
    .user-item .profile-pic-small {
        width: 36px; /* **Ukuran foto profil paling kecil** */
        height: 36px;
    }
    .user-item a {
        gap: 6px; /* Jarak lebih kecil */
    }
    .user-item .username-link {
        font-size: 0.9em;
    }
    .user-actions .action-button {
        font-size: 0.75em;
        padding: 5px;
    }
}