/* assets/css/style.css */

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

/* --- Styling untuk Halaman Hasil Pencarian (search_results.php) --- */
.search-results-container {
    margin-top: 20px;
}

.search-form-on-results {
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.search-form-on-results .search-bar-inline {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.search-form-on-results .search-bar-inline input[type="text"] {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid #dddfe2;
    border-radius: 20px;
    font-size: 16px;
    background-color: #f0f2f5;
    outline: none;
    color: #050505;
}

.search-form-on-results .search-bar-inline input[type="text"]::placeholder {
    color: #8a8d91;
}

.search-form-on-results .search-bar-inline button {
    background-color: #1877f2;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.search-form-on-results .search-bar-inline button:hover {
    background-color: #165bba;
}


.search-users-section,
.search-posts-section {
    margin-bottom: 30px;
    padding: 20px;
}

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

.users-list-grid {
    display: grid;
    /* KRUSIAL: Ukuran grid disesuaikan untuk menampung gambar presisi */
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); /* Memberi ruang lebih untuk gambar 80px + padding */
    gap: 15px;
}

.user-card {
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 15px 10px; /* Padding disesuaikan */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #050505;
    transition: background-color 0.2s ease;
    min-height: 150px; /* Minimal tinggi card agar lebih seragam */
    justify-content: center;
}
.user-card:hover {
    background-color: #e8e8e8;
}

.user-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #050505;
    width: 100%;
    height: 100%;
    justify-content: center; /* Pusatkan konten dalam link */
}

.user-profile-pic {
    width: 80px; /* **KRUSIAL: Ukuran pasti 80px** */
    height: 80px; /* **KRUSIAL: Ukuran pasti 80px** */
    border-radius: 50%; /* Bulat sempurna */
    object-fit: cover; /* **KRUSIAL: Memastikan foto mengisi area tanpa distorsi** */
    margin-bottom: 10px;
    border: 3px solid #ddd; /* Border lebih tebal */
    flex-shrink: 0;
}

.user-username {
    font-weight: bold;
    font-size: 1.1em;
    word-break: break-word;
    text-align: center;
    line-height: 1.3;
    max-height: 2.6em; /* Batasi hingga 2 baris nama */
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-posts-section .posts-feed .post-card {
    margin-bottom: 15px;
}

/* Media Query untuk Halaman Pencarian */
@media (max-width: 768px) {
    .search-form-on-results {
        padding: 10px 15px;
    }
    .search-form-on-results .search-bar-inline input[type="text"] {
        font-size: 15px;
        padding: 8px 12px;
    }
    .search-form-on-results .search-bar-inline button {
        font-size: 15px;
        padding: 8px 12px;
    }

    .search-users-section h3,
    .search-posts-section h3 {
        font-size: 1.2em;
    }
    .users-list-grid {
        /* KRUSIAL: Ukuran grid di mobile */
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Cukup ruang untuk gambar 60px */
        gap: 10px;
    }
    .user-card {
        min-height: 130px; /* Tinggi card di mobile */
        padding: 10px 8px; /* Padding lebih kecil di mobile */
    }
    .user-profile-pic {
        width: 60px; /* **KRUSIAL: Ukuran 60px di mobile** */
        height: 60px; /* **KRUSIAL: Ukuran 60px di mobile** */
    }
    .user-username {
        font-size: 0.95em; /* Lebih kecil */
        max-height: 2.5em; /* Batasi 2 baris */
    }
    .search-posts-section .posts-feed .post-card {
        padding: 15px;
    }
}
@media (max-width: 480px) {
    .search-form-on-results {
        padding: 8px 10px;
    }
    .search-form-on-results .search-bar-inline input[type="text"],
    .search-form-on-results .search-bar-inline button {
        font-size: 14px;
        padding: 6px 10px;
    }

    .users-list-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* Terkecil lagi untuk ponsel sangat kecil */
        gap: 8px;
    }
    .user-card {
        min-height: 100px; /* Tinggi card paling kecil */
        padding: 8px 5px;
    }
    .user-profile-pic {
        width: 50px; /* **KRUSIAL: Ukuran 50px di ponsel sangat kecil** */
        height: 50px; /* **KRUSIAL: Ukuran 50px di ponsel sangat kecil** */
    }
    .user-username {
        font-size: 0.8em;
    }
}

/* assets/css/style.css */

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

/* --- Styling untuk Halaman Hasil Pencarian (search_results.php) --- */
.search-results-container {
    margin-top: 20px;
}

.search-form-on-results {
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.search-form-on-results .search-bar-inline {
    display: flex;
    gap: 10px; /* Jarak antar input dan tombol */
    align-items: center; /* Pusatkan secara vertikal */
    width: 100%;
}

.search-form-on-results .search-bar-inline input[type="text"] {
    flex-grow: 1; /* Input teks mengambil ruang yang tersedia */
    padding: 10px 15px;
    border: 1px solid #dddfe2;
    border-radius: 20px; /* Bentuk pil */
    font-size: 16px;
    background-color: #f0f2f5;
    outline: none;
    color: #050505;
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar */
    height: 40px; /* **KRUSIAL: Tinggi input yang presisi** */
}

.search-form-on-results .search-bar-inline input[type="text"]::placeholder {
    color: #8a8d91;
}

.search-form-on-results .search-bar-inline button {
    background-color: #1877f2;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 0 15px; /* **KRUSIAL: Padding horizontal saja** */
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 40px; /* **KRUSIAL: Tinggi tombol yang sama dengan input** */
}
.search-form-on-results .search-bar-inline button:hover {
    background-color: #165bba;
}


.search-users-section,
.search-posts-section {
    margin-bottom: 30px;
    padding: 20px;
}

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

.users-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 15px;
}

.user-card {
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 15px 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #050505;
    transition: background-color 0.2s ease;
    min-height: 150px;
    justify-content: center;
}
.user-card:hover {
    background-color: #e8e8e8;
}

.user-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #050505;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.user-profile-pic {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid #ddd;
    flex-shrink: 0;
}

.user-username {
    font-weight: bold;
    font-size: 1em;
    word-break: break-word;
    text-align: center;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-posts-section .posts-feed .post-card {
    margin-bottom: 15px;
}

/* Media Query untuk Halaman Pencarian */
@media (max-width: 768px) {
    .search-form-on-results {
        padding: 10px 15px;
    }
    .search-form-on-results .search-bar-inline input[type="text"],
    .search-form-on-results .search-bar-inline button {
        height: 36px; /* **KRUSIAL: Tinggi lebih kecil di mobile** */
        font-size: 15px;
        padding: 0 12px;
    }

    .search-users-section h3,
    .search-posts-section h3 {
        font-size: 1.2em;
    }
    .users-list-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }
    .user-profile-pic {
        width: 60px;
        height: 60px;
    }
    .user-username {
        font-size: 0.9em;
        max-height: 2.5em;
    }
    .search-posts-section .posts-feed .post-card {
        padding: 15px;
    }
}
@media (max-width: 480px) {
    .search-form-on-results {
        padding: 8px 10px;
    }
    .search-form-on-results .search-bar-inline input[type="text"],
    .search-form-on-results .search-bar-inline button {
        height: 32px; /* **KRUSIAL: Tinggi paling kecil di mobile** */
        font-size: 14px;
        padding: 0 10px;
    }

    .users-list-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
    }
    .user-card {
        min-height: 100px;
        padding: 8px 5px;
    }
    .user-profile-pic {
        width: 50px;
        height: 50px;
    }
    .user-username {
        font-size: 0.8em;
    }
}

/* assets/css/style.css */

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

/* --- Styling untuk Halaman Hasil Pencarian (search_results.php) --- */
.search-results-container {
    margin-top: 20px;
}

.search-form-on-results {
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.search-form-on-results .search-bar-inline {
    display: flex; /* Menggunakan flexbox untuk penyejajaran */
    gap: 10px; /* Jarak antar input dan tombol */
    align-items: center; /* **KRUSIAL: Pusatkan item secara vertikal** */
    width: 100%;
}

.search-form-on-results .search-bar-inline input[type="text"] {
    flex-grow: 1; /* Input teks mengambil ruang yang tersedia */
    padding: 10px 15px;
    border: 1px solid #dddfe2;
    border-radius: 20px; /* Bentuk pil */
    font-size: 16px;
    background-color: #f0f2f5;
    outline: none;
    color: #050505;
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar */
    height: 40px; /* **KRUSIAL: Tinggi input yang presisi** */
    line-height: 20px; /* Untuk penyejajaran vertikal teks di dalam input */
}

.search-form-on-results .search-bar-inline input[type="text"]::placeholder {
    color: #8a8d91;
}

.search-form-on-results .search-bar-inline button {
    background-color: #1877f2;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 0 15px; /* **KRUSIAL: Padding horizontal saja** */
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.2s ease;
    display: flex; /* Untuk pusatkan ikon di dalam tombol */
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 40px; /* **KRUSIAL: Tinggi tombol yang sama dengan input** */
}
.search-form-on-results .search-bar-inline button:hover {
    background-color: #165bba;
}


.search-users-section,
.search-posts-section {
    margin-bottom: 30px;
    padding: 20px;
}

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

.users-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 15px;
}

.user-card {
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 15px 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #050505;
    transition: background-color 0.2s ease;
    min-height: 150px;
    justify-content: center;
}
.user-card:hover {
    background-color: #e8e8e8;
}

.user-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #050505;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.user-profile-pic {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid #ddd;
    flex-shrink: 0;
}

.user-username {
    font-weight: bold;
    font-size: 1.1em;
    word-break: break-word;
    text-align: center;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-posts-section .posts-feed .post-card {
    margin-bottom: 15px;
}

/* Media Query untuk Halaman Pencarian */
@media (max-width: 768px) {
    .search-form-on-results {
        padding: 10px 15px;
    }
    .search-form-on-results .search-bar-inline input[type="text"],
    .search-form-on-results .search-bar-inline button {
        height: 36px; /* **KRUSIAL: Tinggi lebih kecil di mobile** */
        font-size: 15px;
        padding: 0 12px;
    }

    .search-users-section h3,
    .search-posts-section h3 {
        font-size: 1.2em;
    }
    .users-list-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }
    .user-profile-pic {
        width: 60px;
        height: 60px;
    }
    .user-username {
        font-size: 0.9em;
        max-height: 2.5em;
    }
    .search-posts-section .posts-feed .post-card {
        padding: 15px;
    }
}
@media (max-width: 480px) {
    .search-form-on-results {
        padding: 8px 10px;
    }
    .search-form-on-results .search-bar-inline input[type="text"],
    .search-form-on-results .search-bar-inline button {
        height: 32px; /* **KRUSIAL: Tinggi paling kecil di mobile** */
        font-size: 14px;
        padding: 0 10px;
    }

    .users-list-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
    }
    .user-card {
        min-height: 100px;
        padding: 8px 5px;
    }
    .user-profile-pic {
        width: 50px;
        height: 50px;
    }
    .user-username {
        font-size: 0.8em;
    }
}


/* assets/css/style.css */

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

/* Styling untuk daftar postingan */
.posts-feed {
    display: flex;
    flex-direction: column;
    gap: 5px; /* **KRUSIAL: Jarak antar postingan dikurangi menjadi 15px** */
}

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

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

/* ... (sisa kode CSS di bawahnya, pertahankan) ... */



/* 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 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(250px, 1fr)); /* Kolom adaptif */
    gap: 15px; /* Jarak antar item */
}

.user-item {
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antara gambar dan teks */
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 10px 15px;
    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 .profile-pic-small { /* Gunakan kelas yang sudah ada, tapi sesuaikan sedikit */
    width: 50px; /* Ukuran lebih besar untuk daftar */
    height: 50px;
    border: 2px solid #ddd;
    flex-shrink: 0; /* Pastikan tidak menyusut */
}

.user-item .username-link {
    font-weight: bold;
    font-size: 1.1em;
    text-decoration: none;
    color: #050505;
    flex-grow: 1; /* Agar nama mengisi ruang */
    word-break: break-word; /* Memastikan nama panjang tidak melebar */
}
.user-item .username-link:hover {
    text-decoration: underline;
}

.user-actions {
    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;
}

.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; /* Biru Messenger */
    color: white;
    margin-left: 5px; /* Jarak dari tombol follow/unfollow */
}
.user-actions .message-button:hover {
    background-color: #0073e6;
}


/* Media Query untuk Halaman Follower */
@media (max-width: 600px) {
    .followers-container {
        padding: 15px;
    }
    .users-list {
        grid-template-columns: 1fr; /* Stack di mobile */
        gap: 10px;
    }
    .user-item {
        flex-direction: column; /* Gambar di atas teks */
        text-align: center;
        padding: 15px;
    }
    .user-item .profile-pic-small {
        margin-bottom: 10px;
        margin-right: 0; /* Hapus margin kanan */
        width: 60px;
        height: 60px;
    }
    .user-item .username-link {
        font-size: 1em;
        margin-bottom: 10px; /* Jarak dari tombol */
    }
    .user-actions {
        flex-direction: row; /* Tombol berdampingan */
        width: 100%;
        justify-content: center;
    }
    .user-actions .action-button {
        flex: 1; /* Agar tombol mengisi lebar yang sama */
        font-size: 0.85em;
        padding: 8px;
    }
}
@media (max-width: 480px) {
    .user-item .profile-pic-small {
        width: 50px;
        height: 50px;
    }
    .user-item .username-link {
        font-size: 0.95em;
    }
}

/* 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 Hasil Pencarian (search_results.php) --- */
.search-results-container {
    margin-top: 20px;
}

.search-form-on-results {
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.search-form-on-results .search-bar-inline {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.search-form-on-results .search-bar-inline input[type="text"] {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid #dddfe2;
    border-radius: 20px;
    font-size: 16px;
    background-color: #f0f2f5;
    outline: none;
    color: #050505;
    box-sizing: border-box;
    height: 40px;
    line-height: 20px;
}

.search-form-on-results .search-bar-inline input[type="text"]::placeholder {
    color: #8a8d91;
}

.search-form-on-results .search-bar-inline button {
    background-color: #1877f2;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 0 15px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 40px;
}
.search-form-on-results .search-bar-inline button:hover {
    background-color: #165bba;
}


.search-users-section,
.search-posts-section {
    margin-bottom: 30px;
    padding: 20px;
}

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

.users-list-grid {
    display: grid;
    /* KRUSIAL: Ukuran grid disesuaikan untuk menampung gambar presisi */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* Memberi ruang lebih untuk gambar 80px + padding */
    gap: 15px;
}

.user-card {
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 15px 10px; /* Padding disesuaikan */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #050505;
    transition: background-color 0.2s ease;
    min-height: 160px; /* **KRUSIAL: Tinggi minimal card untuk konsistensi** */
    justify-content: center;
}
.user-card:hover {
    background-color: #e8e8e8;
}

.user-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #050505;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.user-profile-pic {
    width: 80px; /* **KRUSIAL: Ukuran pasti 80px** */
    height: 80px; /* **KRUSIAL: Ukuran pasti 80px** */
    border-radius: 50%; /* Bulat sempurna */
    object-fit: cover; /* **KRUSIAL: Memastikan foto mengisi area tanpa distorsi** */
    margin-bottom: 10px;
    border: 3px solid #ddd; /* Border lebih tebal */
    flex-shrink: 0;
}

.user-username {
    font-weight: bold;
    font-size: 1.1em;
    word-break: break-word;
    text-align: center;
    line-height: 1.3;
    max-height: 2.6em; /* Batasi hingga 2 baris nama */
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-posts-section .posts-feed .post-card {
    margin-bottom: 15px;
}

/* Media Query untuk Halaman Pencarian */
@media (max-width: 768px) {
    .search-form-on-results {
        padding: 10px 15px;
    }
    .search-form-on-results .search-bar-inline input[type="text"],
    .search-form-on-results .search-bar-inline button {
        height: 36px;
        font-size: 15px;
        padding: 0 12px;
    }

    .search-users-section h3,
    .search-posts-section h3 {
        font-size: 1.2em;
    }
    .users-list-grid {
        /* KRUSIAL: Ukuran grid di mobile */
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); /* Cukup ruang untuk gambar 60px */
        gap: 10px;
    }
    .user-card {
        min-height: 140px; /* Tinggi card di mobile */
        padding: 10px 8px; /* Padding lebih kecil di mobile */
    }
    .user-profile-pic {
        width: 60px; /* **KRUSIAL: Ukuran 60px di mobile** */
        height: 60px; /* **KRUSIAL: Ukuran 60px di mobile** */
    }
    .user-username {
        font-size: 0.95em; /* Lebih kecil */
        max-height: 2.5em; /* Batasi 2 baris */
    }
    .search-posts-section .posts-feed .post-card {
        padding: 15px;
    }
}
@media (max-width: 480px) {
    .search-form-on-results {
        padding: 8px 10px;
    }
    .search-form-on-results .search-bar-inline input[type="text"],
    .search-form-on-results .search-bar-inline button {
        height: 32px;
        font-size: 14px;
        padding: 0 10px;
    }

    .users-list-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); /* Terkecil lagi untuk ponsel sangat kecil */
        gap: 8px;
    }
    .user-card {
        min-height: 120px; /* Tinggi card paling kecil */
        padding: 8px 5px;
    }
    .user-profile-pic {
        width: 50px; /* **KRUSIAL: Ukuran 50px di ponsel sangat kecil** */
        height: 50px; /* **KRUSIAL: Ukuran 50px di ponsel sangat kecil** */
    }
    .user-username {
        font-size: 0.85em; /* Lebih kecil lagi */
    }
}

/* assets/css/style.css */

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

/* --- Styling untuk Halaman Hasil Pencarian (search_results.php) --- */
.search-results-container {
    margin-top: 20px;
}

.search-form-on-results {
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.search-form-on-results .search-bar-inline {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.search-form-on-results .search-bar-inline input[type="text"] {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid #dddfe2;
    border-radius: 20px;
    font-size: 16px;
    background-color: #f0f2f5;
    outline: none;
    color: #050505;
    box-sizing: border-box;
    height: 40px;
    line-height: 20px;
}

.search-form-on-results .search-bar-inline input[type="text"]::placeholder {
    color: #8a8d91;
}

.search-form-on-results .search-bar-inline button {
    background-color: #1877f2;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 0 15px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 40px;
}
.search-form-on-results .search-bar-inline button:hover {
    background-color: #165bba;
}


.search-users-section,
.search-posts-section {
    margin-bottom: 30px;
    padding: 20px; /* Padding card-panel, bukan section itu sendiri */
}

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

.users-list-grid {
    display: grid;
    /* KRUSIAL: Ukuran grid disesuaikan. Gambar 80px + padding + border. minmax sekitar 110-120px */
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); /* Ukuran per item user */
    gap: 15px; /* Jarak antar item */
}

.user-card {
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 10px; /* **KRUSIAL: Padding internal card untuk ruang** */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #050505;
    transition: background-color 0.2s ease;
    min-height: 140px; /* **KRUSIAL: Tinggi minimal card untuk konsistensi di desktop** */
    justify-content: center; /* Pusatkan konten vertikal */
}
.user-card:hover {
    background-color: #e8e8e8;
}

.user-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #050505;
    width: 100%;
    height: 100%;
    justify-content: center; /* Pusatkan konten dalam link */
    padding: 5px; /* Sedikit padding di dalam link */
    box-sizing: border-box;
}

.user-profile-pic {
    width: 80px; /* **KRUSIAL: Ukuran pasti 80px** */
    height: 80px; /* **KRUSIAL: Ukuran pasti 80px** */
    border-radius: 50%; /* Bulat sempurna */
    object-fit: cover; /* **KRUSIAL: Memastikan foto mengisi area tanpa distorsi** */
    margin-bottom: 8px; /* **KRUSIAL: Jarak dari username** */
    border: 3px solid #ddd;
    flex-shrink: 0;
}

.user-username {
    font-weight: bold;
    font-size: 1em; /* Ukuran font umum */
    word-break: break-word; /* Memastikan username panjang tidak meluber */
    text-align: center;
    line-height: 1.3em; /* Tingkatkan line-height */
    max-height: 2.6em; /* Batasi hingga 2 baris nama (1.3em * 2) */
    overflow: hidden;
    text-overflow: ellipsis; /* Tambah ellipsis jika terlalu panjang */
}

.search-posts-section .posts-feed .post-card {
    margin-bottom: 15px;
}

/* Media Query untuk Halaman Pencarian */
@media (max-width: 768px) {
    .search-form-on-results {
        padding: 10px 15px;
    }
    .search-form-on-results .search-bar-inline input[type="text"],
    .search-form-on-results .search-bar-inline button {
        height: 36px;
        font-size: 15px;
        padding: 0 12px;
    }

    .search-users-section h3,
    .search-posts-section h3 {
        font-size: 1.2em;
    }
    .users-list-grid {
        /* KRUSIAL: Ukuran grid di mobile */
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); /* Memberi ruang untuk gambar 60px */
        gap: 10px;
    }
    .user-card {
        min-height: 120px; /* Tinggi card di mobile */
        padding: 8px; /* Padding lebih kecil di mobile */
    }
    .user-profile-pic {
        width: 60px; /* **KRUSIAL: Ukuran 60px di mobile** */
        height: 60px; /* **KRUSIAL: Ukuran 60px di mobile** */
        margin-bottom: 5px; /* Jarak lebih kecil di mobile */
    }
    .user-username {
        font-size: 0.9em;
        max-height: 2.4em; /* Batasi 2 baris di mobile */
    }
    .search-posts-section .posts-feed .post-card {
        padding: 15px;
    }
}
@media (max-width: 480px) {
    .search-form-on-results {
        padding: 8px 10px;
    }
    .search-form-on-results .search-bar-inline input[type="text"],
    .search-form-on-results .search-bar-inline button {
        height: 32px;
        font-size: 14px;
        padding: 0 10px;
    }

    .users-list-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); /* Terkecil lagi untuk ponsel sangat kecil */
        gap: 8px;
    }
    .user-card {
        min-height: 100px; /* Tinggi card paling kecil */
        padding: 6px; /* Padding paling kecil */
    }
    .user-profile-pic {
        width: 45px; /* **KRUSIAL: Ukuran 45px di ponsel sangat kecil** */
        height: 45px; /* **KRUSIAL: Ukuran 45px di ponsel sangat kecil** */
        margin-bottom: 5px;
    }
    .user-username {
        font-size: 0.8em;
    }
}
/* 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; /* **KRUSIAL: Pusatkan vertikal semua elemen dalam item** */
    gap: 15px; /* Jarak antara grup foto+nama dan tombol */
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 10px 15px; /* Padding yang konsisten */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: background-color 0.2s ease;
    text-decoration: none;
    color: #050505;
    min-height: 70px; /* **KRUSIAL: Tinggi minimal untuk konsistensi kartu** */
    box-sizing: border-box; /* Pastikan padding dihitung dalam lebar/tinggi */
}
.user-item:hover {
    background-color: #e8e8e8;
}

.user-item-content { /* Wrapper baru untuk foto dan username */
    display: flex;
    align-items: center; /* **KRUSIAL: Pusatkan foto dan username** */
    gap: 10px; /* Jarak antara gambar dan username */
    text-decoration: none;
    color: #050505;
    flex-grow: 1; /* Biarkan konten ini mengisi ruang yang tersedia */
    min-width: 0; /* Penting untuk flex-grow agar tidak overflow */
}

.user-item-content .profile-pic-small { /* Gunakan kelas yang sudah ada */
    width: 48px; /* **KRUSIAL: Ukuran pasti 48px** */
    height: 48px; /* **KRUSIAL: Ukuran pasti 48px** */
    border-radius: 50%; /* Bulat sempurna */
    object-fit: cover; /* Memastikan foto mengisi area tanpa distorsi */
    flex-shrink: 0; /* Pastikan gambar tidak menyusut */
}

.user-item-content .username-link {
    font-weight: bold;
    font-size: 1.1em;
    word-break: break-word;
    white-space: nowrap; /* Coba pertahankan satu baris */
    overflow: hidden;
    text-overflow: ellipsis; /* Tambah ellipsis jika nama terlalu panjang */
    line-height: 1.2;
    flex-grow: 1; /* Biarkan username mengisi sisa ruang */
    min-width: 0; /* Penting untuk flex-grow agar tidak overflow */
}
.user-item-content .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 */
    margin-left: auto; /* Dorong tombol ke kanan */
}

.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 (foto-nama-tombol)** */
        align-items: center;
        padding: 10px;
        gap: 10px;
        flex-wrap: wrap; /* Izinkan wrap jika nama atau tombol terlalu panjang */
        min-height: auto; /* Hapus min-height untuk mobile */
    }
    .user-item-content {
        flex-grow: 1;
        min-width: 0; /* Penting untuk flex-grow */
        gap: 8px; /* Jarak antara foto dan nama di mobile */
    }
    .user-item-content .profile-pic-small {
        width: 40px; /* **KRUSIAL: Ukuran foto profil kecil di mobile** */
        height: 40px;
    }
    .user-item-content .username-link {
        font-size: 0.95em;
        white-space: normal; /* **KRUSIAL: Izinkan nama memecah baris jika perlu** */
        max-height: 2.4em; /* Batasi 2 baris agar tetap rapi */
        line-height: 1.2em;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .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-content .profile-pic-small {
        width: 36px; /* **Ukuran foto profil paling kecil** */
        height: 36px;
    }
    .user-item-content .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 Notifikasi (notifications.php) --- */
.notifications-container {
    max-width: 700px; /* Lebar maksimum container notifikasi */
    margin: 20px auto;
    padding: 25px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.notifications-container h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #050505;
    text-align: center;
    border-bottom: 1px solid #f0f2f5;
    padding-bottom: 10px;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Jarak antar notifikasi */
}

.notification-item {
    display: flex;
    align-items: center; /* Pusatkan vertikal */
    gap: 15px; /* Jarak antara gambar profil dan konten notifikasi */
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 12px 15px; /* Padding yang proporsional */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: background-color 0.2s ease;
    text-decoration: none;
    color: #050505;
    position: relative; /* Untuk status dibaca/belum */
}
.notification-item:hover {
    background-color: #e8e8e8;
}

.notification-item.unread {
    background-color: #e7f3ff; /* Warna latar belakang untuk notifikasi belum dibaca */
    font-weight: bold;
    border-left: 5px solid #1877f2; /* Indikator biru untuk belum dibaca */
    padding-left: 10px; /* Sesuaikan padding karena border kiri */
}
.notification-item.unread:hover {
    background-color: #d8eafa; /* Hover untuk belum dibaca */
}


.notification-item .profile-pic-small { /* Menggunakan kelas yang sudah ada */
    width: 48px; /* Ukuran foto profil di notifikasi */
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0; /* Agar tidak menyusut */
    border: 1px solid #e4e6eb;
}

.notification-content {
    flex-grow: 1; /* Konten notifikasi mengisi sisa ruang */
    min-width: 0; /* Penting untuk flex-grow agar tidak overflow */
    display: flex;
    flex-direction: column;
    gap: 3px; /* Jarak antar baris teks dalam notifikasi */
}

.notification-text {
    font-size: 0.95em;
    color: #050505;
    line-height: 1.4;
    word-break: break-word; /* Pastikan teks panjang memecah baris */
}

.notification-item.unread .notification-text {
    color: #050505; /* Pastikan warna teks terbaca */
}


.notification-time {
    font-size: 0.8em;
    color: #65676b;
    white-space: nowrap; /* Waktu tidak memecah baris */
}

.notification-item.unread .notification-time {
    color: #1877f2; /* Warna waktu di notifikasi belum dibaca */
}


.no-notifications {
    text-align: center;
    padding: 20px;
    color: #777;
    font-style: italic;
    font-size: 1.1em;
}

/* Media Query untuk Halaman Notifikasi */
@media (max-width: 600px) {
    .notifications-container {
        padding: 15px;
    }
    .notifications-container h2 {
        font-size: 1.3em;
    }
    .notification-item {
        padding: 10px 12px;
        gap: 10px;
    }
    .notification-item .profile-pic-small {
        width: 40px; /* Ukuran lebih kecil di mobile */
        height: 40px;
    }
    .notification-text {
        font-size: 0.9em;
    }
    .notification-time {
        font-size: 0.75em;
    }
}
@media (max-width: 480px) {
    .notifications-container {
        padding: 10px;
    }
    .notification-item {
        padding: 8px 10px;
    }
    .notification-item .profile-pic-small {
        width: 36px;
        height: 36px;
    }
    .notification-text {
        font-size: 0.85em;
    }
    .notification-time {
        font-size: 0.7em;
    }
}