/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --primary-color: #000000; /* Warna primer diubah ke hitam */
    --primary-hover: #333333; /* Hover lebih gelap */
    --secondary-color: #00b67a;
    --background-color: #ffffff; /* Latar belakang diubah ke putih */
    --card-background: #ffffff;
    --text-color: #262626; /* Warna teks utama lebih gelap */
    --text-secondary: #8e8e8e; /* Warna teks sekunder abu-abu */
    --border-color: #dbdbdb; /* Warna border lebih terang abu-abu */
    --star-color: #f39c12;
    --verified-color: #0095f6; /* Warna verified biru */
    --success-bg: #d1e7dd;
    --success-text: #0f5132;
    --error-bg: #f8d7da;
    --error-text: #842029;
    --link-color: #00376b; /* Warna link seperti Instagram */
}

/* Base Styles */
html {
    scroll-behavior: smooth;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
    padding-top: 60px; /* Disesuaikan dengan tinggi navbar baru */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: 60px; /* Default padding for bottom nav */
}

/* PERUBAHAN: Hapus padding atas jika navbar disembunyikan (misal di search.php) */
body.navbar-hidden {
    padding-top: 0;
}


.container {
    max-width: 975px; /* Lebar container Instagram */
    margin: 0 auto;
    padding: 0 1rem;
}

.card {
    background: var(--card-background);
    padding: 1.5rem;
    border-radius: 8px; /* Sudut sedikit lebih tumpul */
    box-shadow: none; /* Hilangkan shadow default */
    border: 1px solid var(--border-color);
    transition: none; /* Hilangkan transisi hover default */
}
.card:hover {
    box-shadow: none; /* Pastikan tidak ada shadow saat hover */
    transform: none; /* Pastikan tidak ada transform saat hover */
}
/* Tambahkan hover spesifik jika diperlukan, misal untuk card link */
a.card:hover {
     box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Shadow halus saat hover card link */
     transform: translateY(-2px);
}


.page-content {
    padding-top: 1rem; /* Kurangi padding atas untuk mobile view */
    padding-bottom: 2rem;
}

.section-title {
    font-size: 1.5rem; /* Lebih kecil */
    margin-bottom: 1.5rem; /* Kurangi margin */
    text-align: center;
    font-weight: 600; /* Lebih ringan */
    color: var(--text-secondary);
}

/* Tombol */
.btn {
    display: inline-block;
    padding: 7px 16px; /* Padding tombol Instagram */
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
    font-size: 14px; /* Ukuran font Instagram */
    line-height: 18px;
    text-align: center; /* Pastikan teks di tengah */
}
.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}
.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}
.btn-outline {
    background-color: transparent;
    color: var(--text-color);
    border-color: var(--border-color);
}
.btn-outline:hover {
    background-color: #fafafa; /* Latar hover sedikit abu */
}
.btn-secondary {
    background-color: #efefef; /* Tombol sekunder abu */
    color: var(--text-color);
    border-color: transparent; /* Hapus border */
}
.btn-secondary:hover {
    background-color: #dbdbdb;
}
.btn-full-width {
    width: 100%;
    text-align: center;
    padding: 10px; /* Sesuaikan padding */
}
.btn-sm { /* Tombol lebih kecil */
    padding: 5px 10px;
    font-size: 12px;
}

/* Navbar */
.navbar {
    background-color: #fff;
    height: 60px; /* Tinggi navbar Instagram */
    box-shadow: none; /* Hilangkan shadow */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
}
/* PERBAIKAN: Reset List Style Global di Navbar */
.navbar ul, .navbar li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}
.container-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: 975px; /* Lebar container Instagram */
    margin: 0 auto;
    padding: 0 1rem; /* Sesuaikan padding agar konsisten */
}
.nav-brand img {
    height: 29px; /* Tinggi logo Instagram */
    width: auto;
    display: block;
    filter: none; /* Hapus filter invert */
}

/* Tata letak nav-links */
nav.nav-links { /* Target <nav class="nav-links"> */
    display: none; /* Sembunyikan default, tampilkan di desktop via media query */
    align-items: center;
}
nav.nav-links ul { /* Target <ul> di dalam <nav class="nav-links"> */
    display: flex; /* Tampilkan item secara horizontal */
    align-items: center;
    gap: 1.5rem; /* Jarak antar item */
}

nav.nav-links a {
    color: var(--text-color); /* Warna teks utama */
    text-decoration: none;
    font-weight: 400; /* Font weight biasa */
    font-size: 14px;
}
nav.nav-links a:hover, nav.nav-links a.active {
    color: var(--primary-color); /* Warna hover/aktif primer */
}
/* Keep .nav-auth-buttons always visible */
/* PERBAIKAN: Selector diubah dari ul.nav-auth-buttons menjadi div.nav-auth-buttons */
div.nav-auth-buttons { /* Target <div> */
    display: flex;
    gap: 1rem; /* Jarak antar ikon kanan */
    align-items: center; /* Sejajarkan ikon vertikal */
}
/* PERBAIKAN: Selector disesuaikan ke div.nav-auth-buttons */
div.nav-auth-buttons > ul { /* Target <ul> di dalam <div> */
    display: flex;
    align-items: center;
}
div.nav-auth-buttons > ul > li { /* Target direct children */
    display: flex; /* Agar item di dalam LI juga align */
    align-items: center; /* Sejajarkan vertikal item di LI */
}

/* PERUBAHAN: Tampilkan tombol Masuk/Daftar di mobile */
/* PERBAIKAN: Selector disesuaikan ke div.nav-auth-buttons */
div.nav-auth-buttons .desktop-auth-buttons {
    display: flex; /* PERUBAHAN: Tampilkan default (mobile) */
    gap: 0.5rem; /* PERUBAHAN: Beri jarak antar tombol di mobile */
}

/* PERUBAHAN: Kecilkan tombol auth di mobile */
div.nav-auth-buttons .desktop-auth-buttons .btn {
    padding: 5px 10px;
    font-size: 12px;
}


/* User Dropdown */
li.dropdown { /* Target LI dengan class dropdown */
     position: relative;
     display: flex; /* Gunakan flex agar avatar align */
     align-items: center; /* Sejajarkan avatar */
}
/* PERBAIKAN: Selector salah, ganti li.dropdown menjadi div.dropdown */
div.dropdown {
     position: relative;
     display: flex;
     align-items: center;
}
.nav-user-avatar {
    width: 30px; /* Ukuran avatar lebih kecil */
    height: 30px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600; /* Font weight lebih tebal */
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
}
ul.dropdown-content { /* Target UL dropdown */
    display: none; /* Sembunyikan secara default */
    position: absolute;
    right: 0;
    top: calc(100% + 10px); /* Jarak dari avatar */
    background-color: #fff;
    min-width: 230px;
    box-shadow: 0 0 5px 1px rgba(0,0,0,.0975); /* Shadow Instagram */
    z-index: 1;
    border-radius: 6px;
    padding: 0; /* Hapus padding default */
    border: none; /* Hapus border default */
}
/* PERUBAHAN: Aturan baru untuk menampilkan menu dengan class .show (via JS) */
ul.dropdown-content.show {
    display: block;
}

ul.dropdown-content a { /* Target link item menu */
    color: var(--text-color);
    padding: 12px 16px; /* Padding default item */
    text-decoration: none;
    display: block;
    font-size: 14px;
}
/* PERUBAHAN: Tingkatkan spesifisitas selector untuk header */
ul.dropdown-content .dropdown-header {
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
    padding: 14px 16px; /* Padding header */
    color: var(--text-color);
    display: block;
    font-size: 14px;
    /* !important tidak diperlukan lagi */
}
ul.dropdown-content a:hover { background-color: #fafafa; }
ul.dropdown-content li:last-child a { /* Target link di LI terakhir */
    border-top: 1px solid var(--border-color); /* Garis pemisah untuk logout */
}

/* PERBAIKAN: Target selector diubah dari li.nav-user-actions ke ul.nav-user-actions */
ul.nav-user-actions { /* Target UL user actions */
    display: flex;
    align-items: center; /* Pastikan ikon di dalamnya sejajar vertikal */
    gap: 1rem; /* Jarak antara notif dan avatar */
}
/* Pastikan children dari nav-user-actions tidak punya list style */
/* PERBAIKAN: Selector disesuaikan */
ul.nav-user-actions > li {
     display: flex; /* Make sure inner items align */
     align-items: center;
}


/* Notifikasi */
.nav-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center; /* Sejajarkan ikon notif */
}
.nav-icon-wrapper a { /* Target link di dalam wrapper */
    display: flex; /* Sejajarkan ikon di dalam link */
    align-items: center;
}
.nav-icon-wrapper svg { /* Ukuran ikon notif */
    width: 24px;
    height: 24px;
    color: var(--text-color); /* Pastikan warna ikon konsisten */
    vertical-align: middle; /* Coba sejajarkan vertikal */
}
.notification-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: #ed4956; /* Warna badge merah Instagram */
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 2px solid white;
}

/* Mobile Navigation Dihapus */
.mobile-nav-toggle,
.mobile-menu {
    display: none !important; /* SEMBUNYIKAN SELALU */
}


/* Halaman Utama */
.hero {
    width: 100%;
    margin-left: 0;
    transform: none;
    padding: 2rem 1rem; /* Kurangi padding untuk mobile */
    text-align: center;
    background: none;
    border-bottom: 1px solid var(--border-color);
}
.hero-content h1 {
    font-size: 1.8rem; /* Lebih kecil di mobile */
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-color);
}
.hero-content p {
    font-size: 1rem; /* Lebih kecil di mobile */
    color: var(--text-secondary);
    margin-bottom: 1.5rem; /* Kurangi margin */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.search-bar form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    box-shadow: none;
    border-radius: 8px;
    background: #efefef;
    border: 1px solid var(--border-color);
}
.search-bar input {
    flex-grow: 1;
    padding: 12px 15px; /* Kurangi padding */
    border: none;
    border-radius: 8px 0 0 8px;
    font-size: 14px;
    background: transparent;
    min-width: 0;
}
.search-bar input:focus { outline: none; }
.search-bar button {
    border-radius: 0 8px 8px 0;
    padding: 12px 15px; /* Kurangi padding */
    border: none;
    font-size: 14px;
    background-color: var(--primary-color);
    color: #fff;
    flex-shrink: 0;
}
.search-bar button:hover {
    background-color: var(--primary-hover);
}

.category-section { margin: 2rem 0; } /* Kurangi margin */
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } /* 3 Kolom di mobile */
.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-color);
    padding: 1rem 0.5rem; /* Kurangi padding */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #fff;
    transition: box-shadow 0.3s, transform 0.3s;
}
.category-card:hover {
     box-shadow: 0 5px 15px rgba(0,0,0,0.08);
     transform: translateY(-2px);
}
.category-icon { margin-bottom: 0.5rem; color: var(--primary-color); }
.category-icon svg { width: 28px; height: 28px; } /* Ikon lebih kecil */
.category-name { font-weight: 500; text-align: center; font-size: 13px; } /* Font lebih kecil */

.how-it-works-section {
    background-color: transparent;
    padding: 2rem 1rem; /* Kurangi padding */
    margin: 2rem 0;
    text-align: center;
    border-radius: 0;
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    max-width: 900px;
    margin: 1.5rem auto 0;
}
.step-card { padding: 1rem; text-align: center; }
.step-icon {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--text-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 auto 1rem;
    box-shadow: none;
}
.step-card h3 { margin-bottom: 0.5rem; font-size: 1.1rem; }
.step-card p { color: var(--text-secondary); font-size: 14px; }

.company-list-section { margin-bottom: 2rem; }
.company-list-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } /* 1 Kolom di mobile */
.company-card-v2 { padding: 1rem; text-decoration: none; color: var(--text-color); transition: box-shadow 0.3s, transform 0.3s; background-color: var(--card-background); border: 1px solid var(--border-color); border-radius: 8px; }
.company-card-v2:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.08); transform: translateY(-2px); }
.company-card-v2-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.company-card-v2-logo { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-color); object-fit: cover; flex-shrink: 0; }
.company-card-v2-title { font-weight: 600; margin: 0; font-size: 1rem; line-height: 1.3; }
.company-card-v2-website { font-size: 12px; color: var(--text-secondary); word-break: break-all; margin-top: 2px; }
.company-card-v2-rating { display: flex; align-items: center; gap: 0.5rem; font-size: 12px; color: var(--text-secondary); margin-top: 0.75rem; }
.company-card-v2-rating .stars { color: var(--star-color); font-size: 1.1em; }
.company-card-v2-rating span:nth-child(2) { font-weight: 600; color: var(--text-color); }


/* Halaman Login & Registrasi */
.auth-wrapper { display: flex; min-height: calc(100vh - 60px); align-items: center; justify-content: center; padding: 1rem; } /* Kurangi padding */
.auth-container { display: grid; grid-template-columns: 1fr; max-width: 380px; width: 100%; background-color: var(--card-background); box-shadow: none; border-radius: 3px; border: 1px solid var(--border-color); }
.auth-promo-panel { display: none; }
.auth-form-panel { padding: 1.5rem; } /* Kurangi padding */
.auth-form-panel h2 { text-align: center; margin-bottom: 1.5rem; font-weight: 600; font-size: 1.3rem; }
.auth-form-panel p { text-align: center; font-size: 13px; margin-top: 1rem; }
.auth-form-panel p a { color: var(--link-color); text-decoration: none; font-weight: 600; }
.auth-form-panel p a:hover { text-decoration: underline; }
.divider { display: flex; align-items: center; text-align: center; color: var(--text-secondary); font-size: 12px; font-weight: 600; margin: 1rem 0; }
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border-color); }
.divider:not(:empty)::before { margin-right: 15px; }
.divider:not(:empty)::after { margin-left: 15px; }
.btn-social { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; background-color: transparent; border: none; color: #385185; font-weight: 600; font-size: 13px; padding: 0; }
.btn-social svg { width: 16px; height: 16px; }
.form-group { margin-bottom: 0.75rem; } /* Kurangi margin */
/* PERBAIKAN: Aturan default untuk label form */
.form-group label {
    display: none; /* Sembunyikan label secara default (untuk auth) */
    font-weight: 500;
    margin-bottom: 0.3rem;
    font-size: 13px;
    color: var(--text-color);
}
/* PERBAIKAN: Aturan spesifik untuk menampilkan label di wizard */
.review-wizard-container .form-group label,
/* PERBAIKAN: Aturan spesifik untuk menampilkan label di form ulasan standar */
#write-review .form-group label {
    display: block; /* Tampilkan label di wizard DAN form ulasan standar */
}

.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 3px; box-sizing: border-box; font-family: 'Inter', sans-serif; font-size: 14px; /* Sedikit lebih besar */ background-color: #fafafa; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-secondary); }
.form-group textarea { min-height: 100px; resize: vertical; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: #a8a8a8; outline: none; background-color: #fff; }
.form-group .form-text { display: block; margin-top: 0.5rem; font-size: 11px; color: var(--text-secondary); }
.form-group input[type="file"] { padding: 8px; border: 1px solid var(--border-color); background: #fafafa; font-size: 13px; }
.auth-form-panel .form-group input { font-size: 12px; } /* Kecilkan lagi font input auth */


/* Halaman Detail Perusahaan (company.php) */
.company-header {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.company-header h1 { margin: 0 0 0.5rem 0; font-size: 1.5rem; }
.company-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.verified-badge { background-color: var(--verified-color); color: #fff; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; gap: 0.3rem; }
.verified-badge svg { width: 0.9em; height: 0.9em; }
.claimed-badge { background-color: var(--primary-color); }
.company-website-link { color: var(--link-color); text-decoration: none; font-weight: 500; word-break: break-all; font-size: 13px; }
.company-website-link:hover { text-decoration: underline; }
.company-page-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } /* 1 Kolom */
.company-sidebar { display: grid; gap: 1rem; position: static; order: -1; } /* Non-sticky, di atas */
.rating-summary h2, #write-review h3 { margin-top: 0; font-size: 1rem; margin-bottom: 1rem; }
.overall-rating { text-align: center; margin-bottom: 1rem; }
.overall-rating .score { font-size: 2.5em; font-weight: 600; line-height: 1; }
.overall-rating .stars { font-size: 1.1em; color: var(--star-color); }
.overall-rating .total-reviews { font-size: 12px; color: var(--text-secondary); }
.rating-distribution { flex-grow: 1; }
.rating-bar-container { display: flex; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem; font-size: 12px; }
.rating-bar-label { width: 35px; flex-shrink: 0;}
.rating-bar { flex-grow: 1; height: 5px; background-color: #efefef; border-radius: 5px; overflow: hidden; }
.rating-bar-fill { height: 100%; background-color: var(--star-color); border-radius: 5px; }
.rating-bar-percentage { width: 25px; text-align: right; color: var(--text-secondary); flex-shrink: 0;}
.company-main-content { display: grid; gap: 1rem; }
.company-main-content > h3 { margin-top: 0; font-size: 1.1rem; }
.review-card, .review { padding: 1rem; border: 1px solid var(--border-color); border-radius: 8px; background-color: #fff; }
.review-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
.review-author-info { display: flex; align-items: center; gap: 0.5rem; }
.review-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--text-color); background-color: #efefef; flex-shrink: 0;}
.review-author { font-weight: 600; display: block; font-size: 13px; }
.verified-review-badge { background-color: var(--success-bg); color: var(--success-text); padding: 0.15rem 0.5rem; border-radius: 15px; font-size: 10px; font-weight: 500; display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.2rem; }
.verified-review-badge svg { width: 0.9em; height: 0.9em; }
.review-count { font-size: 11px; color: var(--text-secondary); }
.review-title { font-weight: 600; margin: 0 0 0.5rem; font-size: 0.95rem; }
.review-body { color: var(--text-color); line-height: 1.5; margin-bottom: 0.75rem; font-size: 13px; }
.review-body-caption { font-size: 13px; color: var(--text-secondary); margin-top: 0.75rem; margin-bottom: 0; }
.review-video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 0.75rem; border-radius: 4px; border: 1px solid var(--border-color); }
.review-video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.review-photo-container { margin-bottom: 0.75rem; max-height: 300px; overflow: hidden; border-radius: 4px; background-color: #efefef; display: flex; justify-content: center; align-items: center; border: 1px solid var(--border-color); }
.review-photo-container img { display: block; width: auto; max-width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.review-date { font-size: 11px; color: var(--text-secondary); }
.star-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
.star-rating input[type="radio"] { display: none; }
.star-rating label { font-size: 1.5rem; color: #ccc; cursor: pointer; transition: color 0.2s; }
.star-rating input[type="radio"]:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: var(--star-color); }
.review-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color); flex-wrap: wrap; gap: 0.5rem; }
.review-actions { display: flex; align-items: center; gap: 0.75rem; }
.vote-button { background-color: transparent; border: none; color: var(--text-secondary); padding: 5px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; font-size: 12px; transition: color 0.2s; }
.vote-button:hover { color: var(--text-color); background-color: transparent; }
.vote-button.voted { background-color: transparent; color: var(--primary-color); }
.vote-button.voted:hover { color: var(--primary-hover); }
.vote-button svg { width: 18px; height: 18px; }
.vote-count { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.review-controls-container { padding: 0; display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: 8px; background-color: #fff; margin-bottom: 1rem; overflow: hidden; }
.review-filter-tabs { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 0; padding: 0 0.5rem; background-color: #fafafa; }
.review-filter-tabs a { padding: 10px 8px; text-decoration: none; color: var(--text-secondary); font-weight: 600; font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.2s, border-color 0.2s; text-align: center; flex-grow: 1; white-space: nowrap; } /* No wrap */
.review-filter-tabs a:hover { color: var(--text-color); }
.review-filter-tabs a.active { color: var(--text-color); border-bottom-color: var(--text-color); }
.review-controls { padding: 1rem; }
.review-controls form { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; } /* Tumpuk filter di mobile */
.control-group { display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; } /* Sejajarkan label dan select */
.control-group label { font-weight: 500; font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }
.control-group select { padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 5px; background-color: #fff; font-size: 12px; flex-grow: 1; }
.claim-business-section { background-color: #fafafa; border: 1px solid var(--border-color); text-align: center; border-radius: 8px; }
.claim-business-section h3 { margin-top: 0; font-size: 1rem; }
.claim-business-section p { font-size: 12px; color: var(--text-secondary); margin-bottom: 1rem; }
.business-owner-section { background-color: #fafafa; border: 1px solid var(--border-color); text-align: center; border-radius: 8px; }
.business-owner-section h3 { margin-top: 0; font-size: 1rem; color: var(--text-color); }
.business-owner-section p { font-size: 12px; color: var(--text-secondary); margin-bottom: 1rem; }
.review-reply { margin-top: 0.75rem; padding: 0.75rem; background-color: #fafafa; border-radius: 8px; border-left: none; }
.reply-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.reply-author { font-weight: 600; font-size: 13px; }
.reply-badge { background-color: var(--secondary-color); color: #fff; font-size: 9px; padding: 0.15rem 0.4rem; border-radius: 10px; font-weight: 500; }
.reply-body { margin-bottom: 0; font-size: 13px; }
.reply-date { font-size: 10px; color: var(--text-secondary); margin-top: 0.4rem; display: block; }
.reply-form { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color); }
.reply-form h4 { margin-top: 0; font-size: 0.9rem; }
.reply-form textarea { font-size: 12px; }
.reply-form button { font-size: 12px; padding: 6px 12px; }

/* Halaman Profil (profile.php) - Gaya untuk Layout Baru */
.profile-page-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 Kolom di mobile */
    gap: 1.5rem;
    align-items: flex-start;
}
.profile-sidebar {
    position: static; /* Non-sticky di mobile */
    margin-bottom: 1.5rem; /* Jarak ke konten */
}
.profile-sidebar .card {
    text-align: center;
}
.profile-avatar {
    width: 80px; /* Lebih kecil */
    height: 80px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5em; /* Lebih kecil */
    font-weight: 700;
    margin-bottom: 1rem;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.profile-sidebar h3 { /* Nama User */
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem; /* Lebih kecil */
}
.profile-sidebar p { /* Bio */
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    font-size: 13px; /* Lebih kecil */
}
.profile-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.stat-value {
    font-size: 1.3em; /* Lebih kecil */
    font-weight: 700;
    display: block;
}
.stat-label {
    font-size: 12px; /* Lebih kecil */
    color: var(--text-secondary);
}
.profile-sidebar .btn {
    margin-top: 1rem;
    display: block;
    width: 100%;
}
.profile-main-content {
     display: grid;
     gap: 1rem; /* Kurangi gap */
}
.review-history-list {
    margin-top: 1rem;
    display: grid;
    gap: 1rem;
}
.review-item {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-background);
}
.review-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.company-link {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 13px; /* Lebih kecil */
}
.company-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}
.review-item .review-stars {
    color: var(--star-color);
    font-size: 13px; /* Lebih kecil */
    flex-shrink: 0;
}
.review-item .review-title {
    font-weight: 600;
    font-size: 0.95rem; /* Lebih kecil */
    margin: 0.5rem 0;
}
.review-item .review-body {
    font-size: 13px; /* Lebih kecil */
    color: #555;
    margin-bottom: 0.5rem;
}
.review-item .review-date {
    font-size: 11px; /* Lebih kecil */
    color: var(--text-secondary);
    margin-top: 0.5rem;
}
#creatorWidgetCode {
    width: 100%;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: monospace;
    margin-bottom: 1rem;
    resize: none;
    font-size: 11px; /* Lebih kecil */
    box-sizing: border-box;
}
#copyWidgetSuccess {
    display: none;
    margin-top: 0.5rem;
    color: var(--secondary-color);
    font-size: 12px; /* Lebih kecil */
}


/* Halaman Kategori */
.category-header { text-align: center; padding: 1.5rem 1rem; background-color: transparent; border-radius: 0; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); }
.category-header-icon { display: none; }
.category-header h1 { font-size: 1.5rem; margin: 0 0 0.5rem 0; font-weight: 600; }
.category-header p { font-size: 0.9rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto; }

/* Halaman Notifikasi */
.notification-list { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 0;}
.notification-item { display: block; padding: 1rem; text-decoration: none; color: var(--text-color); border-bottom: 1px solid var(--border-color); transition: background-color 0.2s; } /* Kurangi padding */
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background-color: #fafafa; }
.notification-item.unread { background-color: #fafafa; font-weight: 600; }
.notification-message { margin-bottom: 0.25rem; font-size: 13px; }
.notification-time { font-size: 11px; color: var(--text-secondary); }

/* Admin & Business Panel - Disederhanakan */
.admin-login-body { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 1rem; background-color: #fafafa; }
.admin-login-container { width: 100%; max-width: 380px; padding: 2rem; background: #fff; border-radius: 3px; border: 1px solid var(--border-color); }
.admin-logo { display: block; max-width: 150px; margin: 0 auto 1.5rem; filter: none; }
.admin-body, .business-portal-body { display: flex; padding-top: 0; background-color: var(--background-color); min-height: 100vh; }
.admin-sidebar { width: 220px; background-color: #fff; color: var(--text-color); display: flex; flex-direction: column; height: 100vh; position: fixed; top: 0; left: 0; flex-shrink: 0; border-right: 1px solid var(--border-color); z-index: 10; transition: transform 0.3s ease; transform: translateX(0); /* Default visible */ }
.sidebar-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: center; align-items: center; background: none; height: 60px; box-sizing: border-box; }
.sidebar-header img { max-width: 120px; height: auto; filter: none; }
.admin-sidebar nav { display: flex; flex-direction: column; flex-grow: 1; padding-top: 1rem; }
.admin-sidebar nav a { color: var(--text-color); padding: 0.8rem 1.5rem; text-decoration: none; border-left: 3px solid transparent; transition: background-color 0.2s, border-left-color 0.2s, font-weight 0.2s; font-size: 14px; }
.admin-sidebar nav a:hover { background-color: #fafafa; }
.admin-sidebar nav a.active { background-color: #fafafa; border-left-color: var(--primary-color); font-weight: 600; }
.admin-content { margin-left: 220px; flex-grow: 1; padding: 1.5rem; width: calc(100% - 220px); box-sizing: border-box; transition: margin-left 0.3s ease, width 0.3s ease; } /* Animasi margin */
.admin-main h1 { margin-top: 0; font-size: 1.3rem; font-weight: 600; }
.stats-grid { display: grid; gap: 1rem; margin-top: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } /* Lebih fleksibel */
.stat-card { background-color: #fff; padding: 1rem; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: none; }
.stat-card h3 { margin-top: 0; color: var(--text-secondary); font-size: 12px; font-weight: 500; }
.stat-card p { font-size: 1.8em; font-weight: 600; margin: 0; }
.stat-card.pending { border-left: 4px solid var(--star-color); }
.stat-card a { text-decoration: none; font-weight: 600; color: var(--link-color); font-size: 12px; }
.stat-card a:hover { text-decoration: underline; }
.grid-3-col { display: grid; grid-template-columns: 1fr; gap: 1rem; } /* 1 Kolom */
.span-2 { grid-column: span 1; } /* Reset span */
.share-distribution-list { list-style: none; padding: 0; margin: 0; }
.share-distribution-list li { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.share-distribution-list li:last-child { border-bottom: none; }
.share-distribution-list li span { color: var(--text-secondary); }
.admin-table-container { background-color: #fff; padding: 0; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: none; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 13px; }
th { background-color: #fafafa; font-weight: 600; }
tbody tr:hover { background-color: #fafafa; }
.btn-approve, .btn-reject, .btn-view { padding: 5px 8px; border-radius: 5px; border: none; cursor: pointer; color: #fff; font-weight: 500; font-size: 12px; }
.btn-approve { background-color: var(--secondary-color); }
.btn-reject { background-color: #ed4956; }
.btn-view { display: inline-block; background-color: var(--primary-color); text-decoration: none; }
.btn-view:hover { background-color: var(--primary-hover); }
.chart-container { background-color: #fff; padding: 1rem; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: none; margin-top: 1rem; position: relative; height: 250px; } /* Lebih kecil */
.grid-2-col { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; } /* 1 Kolom */
#embedCode, #creatorWidgetCode {
    width: 100%;
    padding: 1rem;
    background-color: #fafafa;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: monospace;
    margin-bottom: 1rem;
    resize: none;
    font-size: 11px; /* Lebih kecil */
    box-sizing: border-box;
}
.reviews-management-list { display: grid; gap: 1rem; }
.review-management-item { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.reply-section { padding-top: 1rem; border-top: 1px solid var(--border-color); }
.logo-preview-container { margin-bottom: 1rem; }
.logo-preview { max-width: 80px; height: auto; border: 1px solid var(--border-color); border-radius: 8px; }
.logo-preview-placeholder { display: inline-block; padding: 1.5rem; border: 1px dashed var(--border-color); color: var(--text-secondary); border-radius: 8px; font-size: 13px; }


/* Lain-lain */
.alert { padding: 0.8rem 1rem; margin-bottom: 1rem; border-radius: 8px; border: 1px solid transparent; font-size: 13px; }
.alert-success { background-color: var(--success-bg); color: var(--success-text); border-color: rgba(15, 81, 50, 0.2); }
.alert-error { background-color: var(--error-bg); color: var(--error-text); border-color: rgba(132, 32, 41, 0.2); }
.site-footer { text-align: center; padding: 1.5rem; margin-top: 1.5rem; font-size: 11px; color: var(--text-secondary); border-top: 1px solid var(--border-color); }

/* =============== */
/* Gaya untuk Blog */
/* =============== */
.blog-posts-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } /* 1 Kolom */
.blog-post-card { text-decoration: none; color: var(--text-color); overflow: hidden; border: 1px solid var(--border-color); border-radius: 8px; background-color: #fff; display: flex; flex-direction: column; transition: box-shadow 0.3s, transform 0.3s; }
.blog-post-card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.08); transform: translateY(-2px); }
.blog-card-image { width: 100%; height: 150px; object-fit: cover; border-bottom: 1px solid var(--border-color); } /* Lebih pendek */
.blog-card-content { padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; }
.blog-card-category { display: inline-block; background-color: #efefef; color: var(--text-secondary); padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 10px; font-weight: 500; margin-bottom: 0.5rem; align-self: flex-start; }
.blog-card-title { font-size: 1rem; margin: 0 0 0.5rem 0; font-weight: 600; line-height: 1.4; }
.blog-card-excerpt { color: var(--text-secondary); margin-bottom: 0.75rem; font-size: 13px; line-height: 1.5; flex-grow: 1; }
.blog-card-meta { font-size: 11px; color: var(--text-secondary); margin-top: auto; padding-top: 0.5rem; border-top: 1px solid #efefef; }
.blog-post-full { background-color: #fff; padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color); }
.blog-post-header { text-align: center; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); }
.blog-post-header h1 { font-size: 1.5rem; margin: 0 0 0.75rem 0; font-weight: 600; }
.blog-post-meta { color: var(--text-secondary); font-size: 12px; }
.blog-post-meta span { margin: 0 0.3rem; }
.blog-post-meta strong { color: var(--text-color); }
.blog-post-image { width: 100%; height: auto; max-height: 250px; object-fit: cover; border-radius: 8px; margin-bottom: 1.5rem; border: 1px solid var(--border-color); }
.blog-post-content { font-size: 0.95rem; line-height: 1.6; }
.blog-post-content p { margin-bottom: 1rem; }
.blog-post-content h2, .blog-post-content h3 { margin-top: 1.5rem; margin-bottom: 0.75rem; font-weight: 600; font-size: 1.2rem; }

/* ==================================== */
/* GAYA BARU UNTUK FITUR SHARE          */
/* ==================================== */
.share-button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 7px 16px; border: 1px solid var(--border-color); background-color: transparent; color: var(--text-color); font-weight: 600; font-size: 13px; border-radius: 8px; }
.share-button:hover { background-color: #fafafa; }
.share-button svg { width: 16px; height: 16px; }

/* Modal Styling */
.share-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); display: none; justify-content: center; align-items: center; z-index: 1100; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.share-modal-overlay.visible { display: flex; opacity: 1; visibility: visible; }
.share-modal-content { background: #fff; padding: 1.5rem; border-radius: 12px; box-shadow: 0 0 5px 1px rgba(0,0,0,.0975); width: 90%; max-width: 450px; text-align: center; position: relative; transform: scale(0.95); transition: transform 0.3s; }
.share-modal-overlay.visible .share-modal-content { transform: scale(1); }
.share-modal-close { position: absolute; top: 8px; right: 12px; background: transparent; border: none; font-size: 1.8rem; color: #aaa; cursor: pointer; line-height: 1; }
.share-modal-close:hover { color: #333; }
.share-modal-content h3 { margin-top: 0; font-size: 1.1rem; font-weight: 600; }
.share-links { display: flex; justify-content: center; gap: 0.75rem; margin: 1.2rem 0; flex-wrap: wrap; }
.share-link { display: inline-block; padding: 7px 14px; border-radius: 8px; color: #fff; text-decoration: none; font-weight: 500; font-size: 13px; transition: transform 0.2s; }
.share-link:hover { transform: scale(1.05); }
.share-link.facebook { background-color: #1877F2; }
.share-link.twitter { background-color: #1DA1F2; }
.share-link.whatsapp { background-color: #25D366; }
.copy-link-container { display: flex; margin-top: 1rem; }
.copy-link-container input { flex-grow: 1; padding: 8px; border: 1px solid var(--border-color); border-radius: 8px 0 0 8px; background-color: #fafafa; font-size: 12px; min-width: 0; }
.copy-link-container input:focus { border-color: #a8a8a8; outline: none; }
.copy-link-container button { padding: 8px 12px; border: 1px solid var(--primary-color); background-color: var(--primary-color); color: #fff; border-radius: 0 8px 8px 0; cursor: pointer; font-weight: 500; font-size: 12px; flex-shrink: 0; }
.copy-link-container button:hover { background-color: var(--primary-hover); }

/* ================================= */
/* ATURAN MOBILE BARU (PERBAIKAN) */
/* ================================= */
/* Bottom Navigation */
.bottom-nav {
    display: none; /* Sembunyikan default */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.98); /* Sedikit transparan */
    backdrop-filter: blur(8px); /* Efek blur */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.08); /* Shadow lebih halus */
    z-index: 999;
    border-top: 1px solid var(--border-color);
}
.bottom-nav-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none; /* Pastikan tidak ada bullet points */
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}
.bottom-nav-item {
     list-style: none !important; /* Force no list style */
     margin: 0; /* Reset margin */
     padding: 0; /* Reset padding */
}
.bottom-nav-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 500; /* Sedikit lebih tebal */
    padding: 5px;
    transition: color 0.3s;
    width: 60px; /* Lebar area tap */
    text-align: center;
    position: relative; /* Untuk ::after */
}
.bottom-nav-item a svg {
    width: 24px; /* Ikon sedikit lebih besar */
    height: 24px;
    margin-bottom: 2px;
}
.bottom-nav-item a.active {
    color: var(--primary-color);
    font-weight: 600;
}
/* Indikator aktif (opsional) */
.bottom-nav-item a.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background-color: var(--primary-color);
    border-radius: 50%;
}

@media (max-width: 768px) { /* Tampilkan bottom nav hanya di mobile */
    .bottom-nav {
        display: flex;
    }
    body {
        padding-bottom: 60px; /* Beri ruang untuk bottom nav */
    }
    /* Sembunyikan nav links desktop di mobile */
     nav.nav-links { /* Target <nav> */
        display: none;
    }
    /* PERBAIKAN: Selector diubah dari ul.nav-auth-buttons ke div.nav-auth-buttons */
    div.nav-auth-buttons { /* Target <div> */
         display: flex; /* Ensure it's visible */
    }
     /* PERBAIKAN: Aturan `display: none;` yang konflik dihapus */

    /* Kecilkan gap antar ikon di user actions pada mobile */
    /* PERBAIKAN: Selector diubah dari li.nav-user-actions ke ul.nav-user-actions */
    ul.nav-user-actions { /* Target <ul> */
        gap: 0.75rem;
    }

}


/* ================================================= */
/* GAYA BARU UNTUK PROFIL PUBLIK (Mobile First)    */
/* ================================================= */

.main-content-profile { /* Class baru untuk main di public_profile.php */
     padding-top: 0; /* Hapus padding atas */
     padding-bottom: 0; /* Hapus padding bawah jika bottom nav ada */
}
.profile-container-mobile { /* Container khusus untuk profil */
     max-width: 100%; /* Lebar penuh */
     padding: 0; /* Hapus padding container */
}
.profile-info-mobile { /* Card untuk info atas */
    background-color: var(--card-background);
    border: none; /* Hapus border card default */
    border-bottom: 1px solid var(--border-color); /* Garis bawah */
    border-radius: 0; /* Hapus radius */
    margin-bottom: 0; /* Hapus margin bawah */
    padding: 1.5rem 1rem; /* Padding internal (atas/bawah lebih besar) */
    text-align: center; /* Tengahkan semua konten */
    box-shadow: none;
}
.profile-avatar-mobile { /* Wrapper avatar */
    margin: 0 auto 1rem; /* Tengahkan dan beri jarak bawah */
}
.avatar-circle { /* Lingkaran avatar */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #efefef;
    color: var(--text-secondary);
    display: inline-flex; /* Agar bisa ditengahkan */
    align-items: center;
    justify-content: center;
    font-size: 2.5em; /* Font inisial */
    font-weight: 300; /* Font lebih tipis */
    overflow: hidden; /* Untuk gambar */
    border: 1px solid var(--border-color); /* Border tipis */
}
.avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-stats-mobile {
    display: flex;
    justify-content: center; /* Tengahkan statistik */
    gap: 40px; /* Jarak antar item stat (lebih besar) */
    margin-bottom: 1rem; /* Jarak ke detail */
    padding-bottom: 1rem; /* Padding bawah */
    border-bottom: none; /* Hapus border bawah stat */
    list-style: none; /* Hapus bullet */
    padding-left: 0; /* Reset padding kiri */
}
.stat-item {
    display: flex;
    flex-direction: column; /* Tumpuk angka dan label */
    align-items: center; /* Tengahkan */
    list-style: none !important; /* Force no list style */
}
.stat-item strong { /* Angka statistik */
    font-size: 1rem; /* Ukuran angka */
    font-weight: 600;
}
.stat-item span { /* Label statistik */
    font-size: 12px; /* Ukuran label */
    color: var(--text-secondary);
    margin-top: 2px; /* Jarak kecil antara angka dan label */
}
.profile-details-mobile {
    margin-bottom: 1rem; /* Jarak ke tombol */
}
.username-mobile {
    font-size: 1.2rem; /* Ukuran username */
    font-weight: 600;
    margin: 0 0 5px 0; /* Margin bawah kecil */
    display: inline-flex; /* Agar ikon verified sejajar */
    align-items: center;
    gap: 5px; /* Jarak username dan ikon */
}
.verified-icon { /* Ikon verified */
    width: 1em; /* Sesuaikan ukuran ikon */
    height: 1em;
    color: var(--verified-color);
    vertical-align: middle; /* Sejajarkan vertikal */
}
.bio-mobile {
    font-size: 14px; /* Ukuran font bio */
    line-height: 1.5;
    color: var(--text-color); /* Warna bio */
    margin: 0 0 10px 0; /* Margin bawah */
    max-width: 450px; /* Batasi lebar bio */
    margin-left: auto;
    margin-right: auto;
}
.profile-social-links-mobile {
    display: flex;
    justify-content: center; /* Tengahkan link */
    flex-wrap: wrap; /* Wrap link jika banyak */
    gap: 15px; /* Jarak antar link */
    margin-top: 5px;
    list-style: none; /* Hapus bullet */
    padding: 0;
}
.profile-social-links-mobile a {
    font-size: 13px; /* Ukuran link sosial */
    font-weight: 600; /* Link lebih bold */
    color: var(--link-color);
    text-decoration: none;
}
.profile-social-links-mobile a:hover {
    text-decoration: underline;
}
.profile-actions-mobile {
    margin-top: 1rem; /* Jarak tombol dari bio/link */
    max-width: 250px; /* Batasi lebar tombol */
    margin-left: auto;
    margin-right: auto;
}
.profile-actions-mobile .btn {
    padding: 8px 16px; /* Padding tombol edit */
}

/* Tab Konten */
nav.profile-content-tabs { /* Target <nav> */
    display: flex;
    justify-content: space-around; /* Sebar rata */
    border-bottom: 1px solid var(--border-color); /* Garis bawah tab */
    background-color: #fff; /* Latar putih */
    list-style: none; /* Hapus bullet */
    padding: 0;
    margin: 0;
}
nav.profile-content-tabs a {
    padding: 12px 0; /* Padding atas bawah */
    text-decoration: none;
    color: var(--text-secondary); /* Warna ikon tidak aktif */
    border-bottom: 2px solid transparent; /* Indikator tidak aktif */
    margin-bottom: -1px; /* Agar border bawah menyatu */
    transition: color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center; /* Center ikon */
    flex-grow: 1; /* Ambil ruang sama rata */
}
nav.profile-content-tabs a svg {
    width: 24px; /* Ukuran ikon tab */
    height: 24px;
}
nav.profile-content-tabs a span { /* Sembunyikan teks tab di mobile */
    display: none;
}
nav.profile-content-tabs a.active {
    color: var(--text-color); /* Warna ikon aktif */
    border-bottom-color: var(--text-color); /* Indikator aktif */
}
nav.profile-content-tabs a:hover {
    background-color: #fafafa; /* Efek hover ringan */
}
/* Grid Konten */
section.profile-content-grid { /* Target <section> */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Kolom */
    gap: 2px; /* Jarak antar thumbnail (lebih kecil) */
    background-color: var(--background-color); /* Latar belakang grid */
    padding: 2px 0 0 0; /* Padding atas sedikit */
}
a.creator-content-card { /* Target <a> card */
    text-decoration: none;
    color: var(--text-color);
    display: block;
    overflow: hidden;
    position: relative;
    background-color: #efefef; /* Warna placeholder */
    padding: 0;
    aspect-ratio: 1 / 1; /* Paksa rasio 1:1 (persegi) */
    border-radius: 0; /* Hapus radius card */
    border: none; /* Hapus border card */
    box-shadow: none; /* Hapus shadow card */
}
a.creator-content-card:hover { /* Hapus hover card di mobile */
    box-shadow: none;
    transform: none;
}
a.creator-content-card:hover .content-card-overlay {
    opacity: 0; /* Sembunyikan overlay hover di mobile */
}
.content-card-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.content-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Gambar mengisi area */
    display: block;
}
.content-card-media.video-thumb .play-icon { /* Ikon play video */
    position: absolute;
    top: 5px; /* Lebih dekat ke sudut */
    right: 5px;
    width: 18px; /* Ukuran ikon */
    height: 18px;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); /* Shadow tipis */
}
.content-card-media.text-thumb span { /* Placeholder teks */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--text-secondary);
}
.content-card-info { display: none; } /* Sembunyikan info di mobile grid */
/* Overlay konten di profile grid (tampil saat hover di desktop) */
.content-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Overlay lebih gelap */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Agar tidak menghalangi link card */
    text-align: center;
    padding: 10px;
    font-size: 14px;
}
.overlay-stats {
    display: flex;
    gap: 15px; /* Jarak antar stat */
}
.overlay-stats div {
    display: flex;
    align-items: center;
    gap: 5px; /* Jarak ikon dan angka */
    font-weight: 600;
}
.overlay-stats svg {
    width: 18px;
    height: 18px;
}
.no-content-card { /* Styling jika tidak ada konten */
    grid-column: 1 / -1; /* Span full width */
    text-align: center;
    padding: 2rem;
    border: none;
    box-shadow: none;
    background: none;
    color: var(--text-secondary);
}


/* Responsif Umum (Gabungkan dengan yang sudah ada) */
@media (min-width: 769px) { /* Mulai dari tablet ke atas */
    /* Kembalikan gaya desktop/tablet */
    body { padding-bottom: 0; /* Hapus padding bawah di desktop */ }
    .bottom-nav { display: none; /* Sembunyikan bottom nav di desktop */ }

    .hero { padding: 4rem 1rem; }
    .hero-content h1 { font-size: 2.5rem; }
    .hero-content p { font-size: 1.05rem; }
    .search-bar form { max-width: 500px; flex-direction: row; background: #efefef; border: 1px solid var(--border-color); }
    .search-bar input { border-radius: 8px 0 0 8px; margin-bottom: 0; border: none; padding: 12px 20px; background: transparent; }
    .search-bar button { border-radius: 0 8px 8px 0; padding: 12px 20px; }
    .category-section { margin: 3rem 0; }
    .category-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; }
    .category-card { padding: 1.5rem 0.5rem; }
    .category-icon svg { width: 32px; height: 32px; }
    .category-name { font-size: 14px; }
    .company-list-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
    .company-card-v2 { padding: 1.5rem; }
    .company-card-v2-header { margin-bottom: 1rem; }
    .company-card-v2-logo { width: 45px; height: 45px; }
    .company-card-v2-title { font-size: 1rem; }
    .company-card-v2-website { font-size: 13px; }
    .company-card-v2-rating { margin-top: 1rem; font-size: 13px; }
    .company-page-grid { grid-template-columns: 280px 1fr; gap: 2rem; }
    .company-sidebar { position: sticky; top: 90px; order: initial; margin-bottom: 0; }
    .review-controls form { flex-direction: row; align-items: center; justify-content: flex-end; }
    .review-filter-tabs a { padding: 12px 16px; font-size: 14px; }
    .profile-page-grid { grid-template-columns: 300px 1fr; } /* Layout profil standar */
    .profile-sidebar { position: sticky; top: 90px; margin-bottom: 0; }

    /* Profil Publik Desktop/Tablet */
    .profile-container-mobile { max-width: 975px; padding: 0 1rem; } /* Kembalikan container */
    .profile-info-mobile { /* Kembalikan ke layout card biasa */
        padding: 2rem; /* Padding lebih besar */
        border: 1px solid var(--border-color);
        border-radius: 8px;
        margin-bottom: 2rem; /* Jarak lebih besar */
        text-align: left; /* Rata kiri */
        display: grid; /* Gunakan grid untuk layout desktop */
        grid-template-columns: auto 1fr; /* Kolom avatar dan info */
        grid-template-areas:
            "avatar stats"
            "avatar details"
            "avatar actions";
        gap: 1rem 2rem; /* Jarak baris dan kolom */
        align-items: start; /* Rata atas */
    }
    .profile-avatar-mobile { /* Avatar di kiri */
        grid-area: avatar;
        margin: 0;
    }
    .avatar-circle {
        width: 150px; /* Avatar lebih besar */
        height: 150px;
        font-size: 5em;
    }
    .profile-stats-mobile { /* Statistik di kanan atas */
        grid-area: stats;
        justify-content: flex-start; /* Rata kiri */
        gap: 40px;
        padding: 0;
        margin: 0;
        border: none;
    }
     .stat-item strong { font-size: 1.1rem; }
     .stat-item span { font-size: 14px; }

     .profile-details-mobile { /* Detail di bawah stat */
        grid-area: details;
        margin: 0;
     }
     .username-mobile { font-size: 1.8rem; }
     .bio-mobile { font-size: 1rem; padding: 0; margin: 5px 0 10px 0; max-width: none; }
     .profile-social-links-mobile { padding: 0; justify-content: flex-start; }
     .social-link-item { font-size: 14px; }

     .profile-actions-mobile { /* Tombol di bawah detail */
        grid-area: actions;
        margin: 0;
        max-width: none;
     }
     .profile-actions-mobile .btn-full-width { width: auto; } /* Reset width tombol */

    /* Tab Konten Desktop */
    nav.profile-content-tabs { justify-content: center; gap: 4rem; margin-top: 2rem; border-bottom: none; border-top: 1px solid var(--border-color); }
    nav.profile-content-tabs a { padding: 1rem 0; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; border-bottom: none; border-top: 2px solid transparent; margin-bottom: 0; margin-top: -1px;}
    nav.profile-content-tabs a svg { width: 14px; height: 14px; }
    nav.profile-content-tabs a span { display: inline; margin-left: 6px; } /* Tampilkan teks tab */
    nav.profile-content-tabs a.active { border-top-color: var(--text-color); border-bottom: none; color: var(--text-color); }
    nav.profile-content-tabs a:hover { background: none; color: var(--text-color); }

    /* Grid Konten Desktop */
    section.profile-content-grid { gap: 1.5rem; padding: 1.5rem 0; /* Jarak grid desktop */ }
    a.creator-content-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); } /* Efek hover card */
    a.creator-content-card:hover .content-card-overlay { opacity: 1; }
    .content-card-overlay { display: flex; } /* Tampilkan overlay */
    .content-card-media.video-thumb .play-icon { width: 30px; height: 30px; top: 8px; right: 8px;}

    /* Kembalikan Tampilan Desktop/Tablet */
    nav.nav-links { display: flex; } /* Tampilkan nav links desktop */
    /* PERBAIKAN: Selector diubah dari ul.nav-auth-buttons ke div.nav-auth-buttons */
    div.nav-auth-buttons { display: flex; } /* Ensure desktop auth buttons are shown */
     /* Tampilkan tombol Masuk/Daftar teks di desktop */
     /* PERBAIKAN: Selector diubah dari ul.nav-auth-buttons ke div.nav-auth-buttons */
     div.nav-auth-buttons .desktop-auth-buttons {
         display: flex; /* Show text buttons on desktop */
         gap: 0.75rem;
     }

     /* PERUBAHAN: Kembalikan ukuran tombol normal di desktop */
     div.nav-auth-buttons .desktop-auth-buttons .btn {
        padding: 7px 16px; /* Padding .btn normal */
        font-size: 14px; /* Font size .btn normal */
     }

    /* Admin Sidebar */
    .admin-content { margin-left: 220px; width: calc(100% - 220px); }
    .admin-sidebar { transform: translateX(0); }
}


/* Penyesuaian Tata Letak Ulasan Media */
.review-card-media {
    display: grid;
    /* grid-template-columns diatur oleh media query */
    gap: 1.5rem;
    align-items: start;
}
.review-card-media .review-video-container,
.review-card-media .review-photo-container {
    margin-bottom: 0;
    padding-bottom: 0; /* Pastikan tidak ada padding bawah tambahan */
    height: 250px; /* Default height */
    border-radius: 8px; /* Pastikan radius diterapkan */
}
.review-card-media .review-content-area {
    /* grid-column diatur oleh media query */
}

/* Lencana Kreator Inline */
.creator-badge-inline {
    background-color: rgba(0, 182, 122, 0.1);
    color: var(--secondary-color);
    padding: 0.2rem 0.6rem;
    border-radius: 15px;
    font-size: 0.75em;
    font-weight: 600;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Penyesuaian Media Query untuk review-card-media */
@media (min-width: 769px) { /* Terapkan layout 2 kolom hanya di layar > 768px */
    .review-card-media {
        grid-template-columns: 40% 1fr;
    }
    .review-card-media .review-video-container,
    .review-card-media .review-photo-container {
        grid-column: 1 / 2;
    }
    .review-card-media .review-content-area {
        grid-column: 2 / 3;
    }
}
@media (max-width: 768px) { /* Tumpuk di mobile */
     .review-card-media {
        grid-template-columns: 1fr;
    }
    .review-card-media .review-video-container,
    .review-card-media .review-photo-container {
        grid-column: 1 / -1;
        height: 200px; /* Kurangi tinggi di mobile */
        margin-bottom: 1rem;
    }
    .review-card-media .review-content-area {
        grid-column: 1 / -1;
    }
}

/* Gaya Wizard Ulasan Terpandu */
.review-wizard-container h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.review-wizard-container p { color: var(--text-secondary); margin-bottom: 1.5rem; }
.wizard-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    counter-reset: wizard-step;
    overflow-x: auto; /* Agar bisa discroll di mobile */
    white-space: nowrap; /* Mencegah wrap */
    -webkit-overflow-scrolling: touch; /* Scrolling halus di iOS */
}
.wizard-steps .step {
    flex: 1; /* Ambil ruang sama rata */
    min-width: 100px; /* Lebar minimum */
    text-align: center;
    padding: 0.5rem 0.25rem;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    position: relative;
    border-bottom: 3px solid transparent;
    transition: color 0.3s, border-color 0.3s;
}
.wizard-steps .step.active {
    color: var(--primary-color);
    font-weight: 600;
    border-bottom-color: var(--primary-color);
}
.wizard-steps .step.completed {
    color: var(--secondary-color);
    font-weight: 600;
    border-bottom-color: var(--secondary-color);
}
/* Sembunyikan langkah yang tidak aktif */
.wizard-step-content {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}
.wizard-step-content.active {
    display: block;
}
/* Navigasi wizard */
.wizard-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.wizard-navigation button {
    padding: 10px 20px; /* Padding lebih besar */
}
/* Animasi sederhana */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Gaya tambahan untuk Pro/Cons */
.pros-cons-pair {
    border: 1px solid #efefef;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 6px;
    background-color: #fafafa;
}
.pros-cons-pair h4 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}
.form-group label.sr-only { /* Gaya untuk label screen-reader only */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
/* Pesan Error Wizard */
.step-error-message {
    font-size: 13px;
}
/* Beri border error pada star rating */
.star-rating[style*="border: 1px solid red;"] label {
    color: red; /* Ubah warna bintang jika error */
}

/* ==================================== */
/* PERUBAHAN: Gaya Halaman Pencarian Baru */
/* ==================================== */

/* Header Halaman Pencarian Baru */
.search-page-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 1000;
    padding: 10px 1rem;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
    height: 61px; /* Tinggi header */
}
.search-page-header .search-bar {
    max-width: 975px; /* Samakan dengan container */
    margin: 0 auto;
    height: 100%;
}
.search-page-header .search-bar form {
    position: relative; /* Untuk ikon SVG */
    display: flex;
    height: 100%;
    margin: 0;
    box-shadow: none;
    border: none;
    border-radius: 8px; /* Radius form */
    background: #efefef; /* Latar abu-abu */
}
.search-page-header .search-bar input {
    flex-grow: 1;
    padding: 10px 15px 10px 40px; /* Padding kiri untuk ikon */
    border: none;
    border-radius: 8px;
    font-size: 14px; /* Font input */
    background: transparent;
    height: 100%; /* Tinggi form */
    box-sizing: border-box;
    min-width: 0;
}
.search-page-header .search-bar input:focus {
    outline: none;
}
.search-page-header .search-bar button {
     display: none; /* Sembunyikan tombol "Cari" */
}
/* Ikon SVG di dalam form */
.search-page-header .search-bar form svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    pointer-events: none; /* Agar bisa klik input di atasnya */
}

/* PERUBAHAN: Navigasi Tab Halaman Pencarian */
.search-tabs {
    display: flex;
    position: fixed;
    top: 61px; /* Di bawah header search */
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 999; /* Di bawah header, di atas konten */
    border-bottom: 1px solid var(--border-color);
    height: 45px; /* Tinggi tab */
}
/* Center container untuk tabs di desktop */
.search-tabs-container {
    display: flex;
    max-width: 975px; /* Samakan container */
    margin: 0 auto;
    width: 100%;
}
.search-tabs a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* Overlap border */
    transition: color 0.2s, border-color 0.2s;
    text-align: center;
}
.search-tabs a:hover {
    color: var(--text-color);
}
.search-tabs a.active {
    color: var(--text-color);
    border-bottom-color: var(--text-color);
}


/* Grid Hasil Pencarian (Gaya IG) */
.search-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px; /* Jarak antar thumbnail */
    padding: 0; /* Hapus padding section */
    background-color: var(--background-color);
    /* Hapus padding atas, sudah dihandle <main> */
}
/* Item di dalam search grid (pakai class yang sama) */
.search-results-grid .creator-content-card {
    border-radius: 0;
    border: none;
    box-shadow: none;
    background-color: #efefef; /* Placeholder color */
    padding: 0; /* Pastikan tidak ada padding */
    aspect-ratio: 1 / 1; /* Paksa 1:1 */
}
.search-results-grid .creator-content-card:hover {
    transform: none;
    box-shadow: none;
}
/* Sembunyikan overlay di grid pencarian */
.search-results-grid .creator-content-card:hover .content-card-overlay {
    opacity: 0;
}
.content-card-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.content-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* PERUBAHAN: List Hasil Pencarian Kreator */
.creator-list {
    display: grid;
    gap: 1rem;
    /* Padding ditambahkan inline di search.php */
}
.creator-list-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-background);
    text-decoration: none;
    color: var(--text-color);
    transition: box-shadow 0.3s, transform 0.3s;
}
.creator-list-card:hover {
     box-shadow: 0 5px 15px rgba(0,0,0,0.08);
     transform: translateY(-2px);
}
.creator-list-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}
.creator-list-info h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
/* Ikon verified di daftar kreator */
.creator-list-info .verified-icon {
     width: 0.9em;
     height: 0.9em;
     color: var(--verified-color);
}
.creator-list-info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    /* Truncate bio */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}


/* Override gap grid profile di desktop agar tetap 3px */
@media (min-width: 769px) {
    /* Atur grid pencarian di desktop */
    .search-results-grid {
        gap: 3px; /* Jaga gap 3px di desktop */
        /* Beri padding samping agar konten di tengah */
        padding-left: 1rem;
        padding-right: 1rem;
        /* Batasi lebar maks grid */
        max-width: 975px;
        margin: 0 auto;
    }
    
    /* Atur tab search di desktop */
    .search-tabs-container {
        padding: 0 1rem;
    }
    .search-tabs a {
        flex: 0 1 auto; /* Jangan paksa flex-grow */
        padding: 0 1rem; /* Padding samping */
    }
    .search-tabs {
        justify-content: center; /* Tengahkan grup tab */
    }
    .search-tabs-container {
        width: auto; /* Biarkan width menyesuaikan konten */
        gap: 2rem; /* Beri jarak antar tab */
    }
    
}

/* ============================ */
/* Gaya Halaman Statis Tambahan */
/* ============================ */
.static-page-content {
    padding: 2rem; /* Padding lebih besar dari card biasa */
}

.static-page-content h1 {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}

.static-page-content h2 {
    font-size: 1.3rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.static-page-content p,
.static-page-content li {
    line-height: 1.7;
    color: #4f4f4f; /* Warna teks sedikit lebih lembut */
}

.static-page-content ul {
    margin-left: 0.5rem;
    margin-bottom: 1rem;
}

.static-page-content address {
    font-style: normal;
    line-height: 1.6;
    margin-top: 1rem;
    padding: 1rem;
    background-color: #fafafa;
    border-left: 3px solid var(--border-color);
    color: var(--text-secondary);
}

/* ============================ */
/* PERUBAHAN: Gaya Footer Statis */
/* ============================ */
.site-footer {
    padding-top: 2rem; /* Beri jarak atas lebih */
}
.footer-static-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem; /* Jarak antar link */
    margin-bottom: 0.75rem;
}
.footer-static-links a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 13px; /* Kecilkan font */
    font-weight: 500;
}
.footer-static-links a:hover {
    color: var(--text-color);
    text-decoration: underline;
}
.site-footer .copyright {
    margin-top: 0;
    font-size: 13px; /* Samakan ukuran font */
    color: var(--text-secondary);
}
/* Atur ulang margin atas footer jika bottom nav disembunyikan */
body.navbar-hidden .site-footer {
    margin-top: 0;
    border-top: none; /* Hapus border atas jika di halaman search */
    padding-bottom: 2rem; /* Beri padding bawah */
}


@media (max-width: 768px) {
    .static-page-content {
        padding: 1.5rem; /* Kurangi padding di mobile */
    }
    .static-page-content h1 {
        font-size: 1.5rem;
    }
    .static-page-content h2 {
        font-size: 1.1rem;
    }

    /* Tumpuk link footer di mobile jika perlu */
    .footer-static-links {
        flex-wrap: wrap; /* Biarkan wrap jika tidak muat */
        gap: 0.75rem 1.5rem; /* Atur jarak baris dan kolom */
    }
}

/* ============================ */
/* Gaya Floating Action Button (FAB) */
/* ============================ */
.fab-add-post {
    position: fixed;
    bottom: 80px; /* Jarak dari bawah (lebih tinggi dari bottom-nav) */
    /* PINDAH KE KANAN */
    right: 20px; 
    left: auto; /* Pastikan tidak ada left */
    width: 56px;
    height: 56px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    z-index: 998; /* Di bawah bottom-nav tapi di atas konten */
    transition: transform 0.2s ease-out, background-color 0.2s;
}

.fab-add-post:hover {
    background-color: var(--primary-hover);
    transform: scale(1.05);
}

.fab-add-post svg {
    width: 28px;
    height: 28px;
}

/* Penyesuaian posisi FAB di layar lebih besar */
@media (min-width: 769px) {
    .fab-add-post {
        bottom: 30px; /* Lebih rendah di desktop */
        right: 30px;
        left: auto;
    }
}


/* ============================ */
/* Gaya Halaman Blog Feed */
/* ============================ */
.blog-feed {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Jarak antar post */
    padding-top: 0.1rem; /* Jarak dari atas (jika header blog dihapus) */
}

.feed-post {
    border: 0px solid var(--border-color);
    border-radius: 0; /* Hapus radius di feed */
    background-color: var(--card-background);
    padding: 0; /* Hapus padding default card */
    box-shadow: none; /* Hapus shadow default card */
    margin-bottom: 0;
}

.post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 1rem; /* Padding header post */
    position: relative; /* Untuk menampung menu opsi */
}

.post-author-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--text-color);
}

.post-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #efefef; /* Warna placeholder avatar */
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.9rem;
    border: 1px solid var(--border-color);
    overflow: hidden; /* Jika menggunakan img */
}
.post-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-username {
    font-weight: 600;
    font-size: 14px;
}
.post-username:hover {
    text-decoration: underline;
}

.post-options-button {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: var(--text-color);
}
.post-options-button svg {
    display: block;
}

/* --- Gaya Menu Opsi Postingan (Dropdown) --- */
.post-options-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
}
ul.post-options-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none; /* Sembunyikan default */
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 150px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 100;
    transform: translateY(5px); /* Jarak dari tombol */
}
ul.post-options-menu.show {
    display: block;
}
ul.post-options-menu li {
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #eee;
}
ul.post-options-menu li:last-child {
    border-bottom: none;
}
ul.post-options-menu a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-color);
    font-size: 14px;
    white-space: nowrap;
}
ul.post-options-menu a:hover {
    background-color: #fafafa;
}
ul.post-options-menu a.delete-post-btn {
    color: #e74c3c; /* Warna merah untuk Hapus */
    font-weight: 600;
}
/* --- Akhir Gaya Menu Opsi Postingan --- */


.post-image {
    width: 100%;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background-color: #efefef; /* Warna background jika gambar tidak load */
    display: block; /* Pastikan tidak ada spasi bawah */
}
.post-image a {
    display: block; /* Link mengisi area */
}
.post-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover; /* Atau contain, sesuai preferensi */
    max-height: 70vh; /* Batasi tinggi maksimum gambar */
}

.post-footer {
    padding: 0 1rem 1rem 1rem; /* Padding bawah footer */
}

.post-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0; /* Jarak vertikal tombol aksi */
}
.post-actions > div {
    display: flex;
    gap: 1rem; /* Jarak antar tombol */
}

.action-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-color);
}
.action-button svg {
    display: block;
    transition: transform 0.1s ease-out;
}
.action-button:active svg {
    transform: scale(0.85); /* Efek klik */
}

/* (Opsional) Gaya untuk tombol Suka yang aktif */
.action-button.liked svg {
    fill: #ed4956; /* Warna merah */
    color: #ed4956;
}

.post-likes {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}
.post-likes strong {
    font-weight: 600;
}

.post-caption {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px;
    word-wrap: break-word; /* Wrap teks panjang */
}

.post-username-caption {
    font-weight: 600;
    text-decoration: none;
    color: var(--text-color);
    margin-right: 5px;
}
.post-username-caption:hover {
    text-decoration: underline;
}
.caption-text strong {
    font-weight: 600;
    margin-right: 5px; /* Jarak antara judul bold dan excerpt */
}
.read-more-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
}
.read-more-link:hover {
    text-decoration: underline;
}


.post-comments-link {
    display: block;
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 8px;
}
.post-comments-link:hover {
    text-decoration: underline;
}

.post-meta {
    font-size: 11px; /* Ukuran font lebih kecil */
    color: var(--text-secondary);
    text-transform: uppercase; /* Huruf besar */
    letter-spacing: 0.5px;
}
.post-meta time {
    cursor: default;
}

/* Responsive untuk feed */
@media (min-width: 640px) { 
     .post-image img {
         /* Sesuaikan jika perlu */
     }
}

/* Hapus gaya grid lama di blog.php jika masih ada */
.blog-posts-grid, .blog-post-card { 
    /* Pastikan gaya lama dinonaktifkan jika ada */
}


/* ============================ */
/* Gaya untuk Quote Post di Feed */
/* ============================ */
.feed-post.quote-post .post-image {
    background-color: #000; /* Latar belakang hitam pekat */
    border-top: 1px solid #000; /* Border juga hitam */
    border-bottom: 1px solid #000;
    aspect-ratio: 4 / 5; /* Rasio umum Instagram (4:5) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    overflow: hidden; 
}

/* Sembunyikan link dan gambar placeholder untuk quote */
.feed-post.quote-post .post-image a,
.feed-post.quote-post .post-image img {
    display: none; 
}

.quote-text-container {
    text-align: center;
    padding: 10px; /* Padding di dalam container */
}

.feed-post.quote-post .quote-text-container p {
    /* Gunakan Inter (default font) tapi di-bold */
    font-family: 'Inter', sans-serif; 
    font-size: 1.5rem; 
    font-weight: 800; /* Extra bold */
    color: #fff; /* Teks putih */
    line-height: 1.4;
    margin: 0;
    max-width: 90%; 
    display: block; /* Agar nl2br bisa bekerja dengan baik */
}

/* Penyesuaian font quote di mobile */
@media (max-width: 639px) {
    .feed-post.quote-post .quote-text-container p {
        font-size: 1.4rem; 
    }
     .feed-post.quote-post .post-image {
         aspect-ratio: 4 / 5; 
         padding: 1.5rem 0.75rem;
     }
}