/* assets/css/style.css */

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

/* --- Styling untuk Toko Online (Shop Features) --- */

/* Tombol Aksi Shop (di shop.php) */
.shop-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.shop-actions .button {
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

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

.shop-actions .button.secondary-button {
    background-color: #e4e6eb;
    color: #050505;
}
.shop-actions .button.secondary-button:hover {
    background-color: #d8dadf;
}

.shop-actions .button.success-button {
    background-color: #4CAF50;
    color: white;
}
.shop-actions .button.success-button:hover {
    background-color: #45a049;
}

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

/* Grid Produk (untuk shop.php) */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* **Ukuran produk thumbnail di grid toko** */
    gap: 20px;
}

.product-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none; /* Hilangkan underline dari link pembungkus */
}

.product-card a {
    color: #050505; /* Warna teks produk */
    text-decoration: none;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Agar konten mengisi ruang */
    padding: 15px; /* Padding di dalam kartu */
}

.product-card .product-image {
    width: 100%; /* Gambar mengisi lebar container */
    height: 180px; /* **KRUSIAL: Tinggi gambar produk thumbnail yang presisi dan tetap** */
    object-fit: cover; /* **KRUSIAL: Memastikan gambar mengisi area tanpa distorsi (akan terpotong jika rasio tidak cocok)** */
    border-radius: 4px;
    margin-bottom: 10px;
    display: block;
    flex-shrink: 0; /* Pastikan gambar tidak menyusut */
}

.product-card .product-name {
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 5px;
    line-height: 1.3;
}

.product-card .product-price {
    font-size: 1.0em;
    color: #f02849; /* Warna harga merah */
    font-weight: bold;
    margin-bottom: 5px;
}

.product-card .product-stock,
.product-card .product-category,
.product-card .product-seller {
    font-size: 0.9em;
    color: #65676b;
    margin-bottom: 3px;
}
.product-card .product-seller a {
    color: #1877f2;
    font-weight: normal;
}
.product-card .product-seller a:hover {
    text-decoration: underline;
}

.product-card .add-to-cart-button {
    background-color: #4CAF50;
    color: white;
    width: 100%;
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px; /* Jarak dari info produk */
}
.product-card .add-to-cart-button:hover {
    background-color: #45a049;
}

.product-grid .no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    font-size: 1.1em;
    color: #777;
}

/* Styling untuk Form Tambah Produk (add_product.php) */
.add-product-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 30px;
}

.add-product-container h2 {
    margin-top: 0;
    margin-bottom: 25px;
    text-align: center;
}

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

.add-product-container form input[type="text"],
.add-product-container form input[type="number"],
.add-product-container form textarea,
.add-product-container form select {
    width: calc(100% - 24px); /* Kurangi padding untuk lebar 100% */
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #dddfe2;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #f5f6f7;
    color: #050505;
}

.add-product-container form input[type="file"] {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #dddfe2;
    border-radius: 6px;
    background-color: #e4e6eb;
}

.add-product-container form input:focus,
.add-product-container form textarea:focus,
.add-product-container form select:focus {
    border-color: #1877f2;
    box-shadow: 0 0 0 1px #1877f2;
    outline: none;
    background-color: #fff;
}

.add-product-container form textarea {
    resize: vertical;
    min-height: 100px;
}

.add-product-container form small {
    color: #65676b;
    font-size: 0.9em;
    display: block;
    margin-top: -10px;
    margin-bottom: 15px;
}

.add-product-container form button[type="submit"] {
    background-color: #1877f2;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.add-product-container form button[type="submit"]:hover {
    background-color: #165bba;
}

/* Styling untuk Halaman Detail Produk (product_detail.php) */
.product-detail-container {
    display: flex;
    flex-direction: column; /* Default stack di mobile */
    gap: 20px;
    padding: 25px;
}

.product-image-large-wrapper {
    flex-shrink: 0;
    width: 100%;
    /* Atur rasio aspek jika gambar sering tidak proporsional */
    aspect-ratio: 1 / 1; /* KRUSIAL: Gambar detail produk jadi persegi */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    background-color: #f0f2f5;
    display: flex; /* Untuk pusatkan gambar di tengah jika object-fit: contain */
    align-items: center;
    justify-content: center;
}

.product-image-large {
    width: 100%;
    height: 100%; /* KRUSIAL: Memastikan gambar mengisi tanpa terpotong, menjaga rasio asli */
    object-fit: contain; /* KRUSIAL: Memastikan gambar mengisi tanpa terpotong, menjaga rasio asli */
    display: block;
    border-radius: 8px;
}

.product-info {
    flex-grow: 1;
}

.product-info h3.product-name {
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 10px;
    color: #050505;
}

.product-info p {
    margin-bottom: 8px;
    font-size: 1em;
    color: #333;
}

.product-info p.product-price {
    font-size: 1.5em;
    font-weight: bold;
    color: #f02849;
    margin-bottom: 15px;
}

.product-info p.product-stock {
    font-weight: bold;
    color: #4CAF50;
}
.product-info p.out-of-stock {
    font-weight: bold;
    color: #f44336;
}

.product-info p.product-description {
    font-size: 0.95em;
    line-height: 1.5;
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.product-info p.product-seller a {
    font-weight: bold;
}

.product-info .add-to-cart-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #f0f2f5;
}

.product-info .add-to-cart-form label {
    font-weight: bold;
    margin-bottom: 0;
}

.product-info .add-to-cart-form input[type="number"] {
    width: 60px;
    padding: 8px;
    border: 1px solid #dddfe2;
    border-radius: 6px;
    font-size: 1em;
    text-align: center;
}

.product-info .add-to-cart-button {
    background-color: #1877f2;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.product-info .add-to-cart-button:hover {
    background-color: #165bba;
}

/* --- Gaya baru untuk tombol Order via WhatsApp --- */
.whatsapp-order-button {
    background-color: #25D366; /* Warna hijau WhatsApp */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px; /* Jarak dari form add to cart atau stok habis */
    text-decoration: none; /* Penting untuk link <a> */
}
.whatsapp-order-button:hover {
    background-color: #1DA851;
}
.whatsapp-order-button.out-of-stock-wa { /* Gaya jika stok habis */
    background-color: #ff9800; /* Warna oranye */
}
.whatsapp-order-button.out-of-stock-wa:hover {
    background-color: #fb8c00;
}
/* --- Akhir Gaya tombol WhatsApp --- */


.product-info .seller-own-product {
    font-style: italic;
    color: #65676b;
    margin-top: 15px;
}

/* Styling khusus untuk Halaman Produk Saya (my_products.php) */
.my-products-grid .product-card .product-image {
    height: 150px; /* Sedikit lebih kecil dari shop.php agar lebih padat */
}

.product-management-actions {
    display: flex;
    justify-content: space-around;
    padding: 10px 15px 15px;
    border-top: 1px solid #f0f2f5;
    margin-top: auto;
    gap: 10px;
}

.product-management-actions .button {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    font-size: 0.9em;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background-color 0.2s ease;
}

.product-management-actions .edit-product-button {
    background-color: #0084ff;
    color: white;
}
.product-management-actions .edit-product-button:hover {
    background-color: #0073e6;
}

.product-management-actions .delete-product-button {
    background-color: #f44336;
    color: white;
}
.product-management-actions .delete-product-button:hover {
    background-color: #da190b;
}

/* Media Queries untuk Toko Online */
@media (min-width: 768px) {
    .product-detail-container {
        flex-direction: row;
        align-items: flex-start;
    }
    .product-image-large-wrapper {
        width: 40%;
        aspect-ratio: 1 / 1; /* KRUSIAL: Gambar detail produk jadi persegi di desktop */
    }
    .product-info {
        width: 60%;
    }
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Sedikit lebih kecil di desktop menengah */
        gap: 15px;
    }
    .product-card .product-image {
        height: 160px; /* Tinggi gambar produk thumbnail desktop */
    }
}

@media (max-width: 600px) {
    .shop-actions {
        gap: 10px;
        flex-direction: column; /* Stack tombol di mobile */
        align-items: center;
    }
    .shop-actions .button {
        width: 80%; /* Lebar penuh di mobile */
    }
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* Lebih kecil di mobile */
        gap: 10px;
    }
    .product-card .product-image {
        height: 120px; /* Tinggi gambar produk lebih kecil di mobile */
    }
    .product-card .add-to-cart-button {
        padding: 8px 12px;
        font-size: 0.9em;
    }
    /* Whatsapp button di mobile detail produk */
    .whatsapp-order-button {
        width: 100%;
        margin-top: 15px; /* Tambah jarak di mobile */
    }

    .product-detail-container {
        padding: 15px;
        gap: 15px;
    }
    .product-info h3.product-name {
        font-size: 1.5em;
    }
    .product-info p {
        font-size: 0.9em;
    }
    .product-info p.product-price {
        font-size: 1.2em;
    }
    .product-info .add-to-cart-form {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .product-info .add-to-cart-form input[type="number"] {
        width: 100px;
    }

    .my-products-grid .product-card .product-image {
        height: 120px;
    }
    .product-management-actions .button {
        padding: 6px 8px;
        font-size: 0.8em;
    }
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
    .product-card .product-image {
        height: 100px;
    }
}

/* assets/css/style.css */

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

/* Sesuaikan h2 di halaman beranda atau h2 secara umum jika tidak ada efek samping */
h2 {
    text-align: center;
    margin-bottom: 15px; /* **DIKECILKAN: Jarak bawah judul menjadi 15px** */
}

/* Jika h2 di halaman lain juga terpengaruh dan Anda tidak ingin itu,
   buatlah kelas khusus untuk h2 di index.php, contoh: */
/*
.welcome-heading {
    text-align: center;
    margin-bottom: 15px;
}
*/
/* Lalu di index.php, ubah <h2 class="welcome-heading"> */


/* Styling untuk form postingan baru (Pastikan margin-top tidak terlalu besar jika ada) */
.post-creation-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    margin-bottom: 30px;
    margin-top: 0; /* **PASTIKAN tidak ada margin-top berlebihan di sini** */
}

/* ... (Sisa kode CSS, pertahankan) ... */

/* assets/css/style.css */

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

/* --- Styling untuk Halaman Pesanan Saya (my_orders.php) --- */
.my-orders-container {
    max-width: 900px; /* Lebar maksimum container */
    margin: 20px auto;
    background-color: #fff; /* Latar belakang sama dengan card-panel */
    border-radius: 8px; /* Sudut membulat */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Shadow halus */
    padding: 20px; /* Padding keseluruhan container */
}

.order-card {
    padding: 20px;
    margin-bottom: 20px; /* Jarak antar kartu pesanan */
    background-color: #f8f8f8; /* Latar belakang kartu pesanan individu */
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Shadow lebih halus untuk kartu individu */
    border: 1px solid #eee; /* Border tipis */
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f2f5;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    flex-wrap: wrap; /* Agar bisa wrap di mobile */
}

.order-header .order-id {
    color: #1877f2;
    font-size: 1.1em;
    flex-basis: 100%; /* Ambil baris penuh di mobile */
    margin-bottom: 5px; /* Jarak dari elemen di bawahnya di mobile */
}
@media (min-width: 601px) { /* Di desktop, id pesanan dan tanggal di satu baris */
    .order-header .order-id {
        flex-basis: auto;
        margin-bottom: 0;
    }
}

.order-header .order-date {
    color: #65676b;
    font-size: 0.9em;
    margin-bottom: 5px; /* Jarak antar baris di mobile */
}
@media (min-width: 601px) { /* Di desktop, id pesanan dan tanggal di satu baris */
    .order-header .order-date {
        margin-bottom: 0;
    }
}

.order-header .order-buyer-name { /* Gaya untuk nama pembeli */
    font-size: 1em;
    color: #050505;
    flex-grow: 1; /* Agar nama pembeli mengambil ruang lebih */
    text-align: right;
    margin-bottom: 5px; /* Jarak dari elemen di bawahnya di mobile */
}
.order-header .order-buyer-name a {
    font-weight: bold;
    color: #1877f2;
}
@media (min-width: 601px) { /* Di desktop, nama pembeli dan order ID di satu baris */
    .order-header .order-buyer-name {
        margin-bottom: 0;
        text-align: left; /* Rata kiri di desktop */
    }
}


.order-items-list {
    margin-bottom: 15px;
}

.order-item-detail {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}
.order-item-detail:last-child {
    border-bottom: none;
}

.order-item-image {
    width: 60px; /* Ukuran gambar item produk */
    height: 60px; /* Ukuran gambar item produk */
    object-fit: cover; /* KRUSIAL: Memastikan gambar item produk presisi */
    border-radius: 4px;
    margin-right: 15px;
    flex-shrink: 0;
}

.order-item-info {
    flex-grow: 1;
}

.order-item-name {
    font-weight: bold;
    margin: 0 0 5px 0;
    font-size: 1em;
}

.order-item-qty-price {
    font-size: 0.9em;
    color: #65676b;
    margin: 0;
}

.order-summary {
    padding-top: 15px;
    border-top: 1px solid #f0f2f5;
}

.order-summary p {
    margin-bottom: 8px;
    font-size: 0.95em;
    color: #333;
}

.order-summary .order-status {
    font-weight: bold;
    margin-bottom: 10px;
}

/* Status badge styles (re-use from my_orders.php) */
.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
    text-transform: capitalize;
}
.status-pending { background-color: #ffc107; color: #343a40; } /* Kuning */
.status-processing { background-color: #007bff; } /* Biru */
.status-shipped { background-color: #28a745; } /* Hijau */
.status-delivered { background-color: #6c757d; } /* Abu-abu */
.status-cancelled { background-color: #dc3545; } /* Merah */

.order-total {
    font-size: 1.2em;
    font-weight: bold;
    color: #050505;
    margin-top: 10px;
}

.update-status-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
}

.update-status-section h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em;
    color: #050505;
}

.update-order-status-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.update-order-status-form select {
    flex-grow: 1;
    min-width: 120px;
    padding: 8px 12px;
    border: 1px solid #dddfe2;
    border-radius: 6px;
    font-size: 0.95em;
    background-color: #f5f6f7;
}

.update-order-status-form button {
    background-color: #1877f2;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: bold;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.update-order-status-form button:hover {
    background-color: #165bba;
}

.my-orders-container .no-orders {
    text-align: center;
    padding: 40px;
    font-size: 1.1em;
    color: #65676b;
}

/* Media Query untuk Halaman Pesanan Saya */
@media (max-width: 600px) {
    .order-card {
        padding: 15px;
    }
    .order-header {
        flex-direction: column;
        align-items: flex-start;
        font-size: 0.85em;
    }
    .order-header .order-id,
    .order-header .order-date {
        width: 100%;
    }
    .order-header .order-buyer-name {
        font-size: 1em;
        text-align: left; /* Rata kiri di mobile juga */
        width: 100%;
    }
    .order-item-image {
        width: 50px;
        height: 50px;
    }
    .order-item-name,
    .order-item-qty-price {
        font-size: 0.9em;
    }
    .order-summary p {
        font-size: 0.9em;
    }
    .order-total {
        font-size: 1.1em;
    }
    .update-order-status-form {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .update-order-status-form select,
    .update-order-status-form button {
        width: 100%;
    }
}

/* ... (Sisa kode CSS, pertahankan) ... */

/* assets/css/style.css */

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

/* Grid Produk (untuk shop.php) */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Default 4 kolom untuk desktop */
    gap: 20px; /* Jarak antar produk */
}

.product-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    /* Tambahan agar tinggi card lebih konsisten untuk beberapa baris teks */
    min-height: 380px; /* Sesuaikan ini jika konten produk Anda sangat bervariasi */
    justify-content: space-between; /* Untuk mendorong tombol ke bawah */
}

.product-card a {
    color: #050505;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 15px;
}

.product-card .product-image {
    width: 100%;
    height: 180px; /* Tinggi gambar thumbnail */
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 10px;
    display: block;
    flex-shrink: 0;
}

.product-card .product-name {
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 5px;
    line-height: 1.3;
    min-height: 3.9em; /* Beri tinggi min untuk 3 baris nama, agar kartu lebih konsisten */
    overflow: hidden; /* Sembunyikan jika melebihi tinggi min */
}

.product-card .product-price {
    font-size: 1.0em;
    color: #f02849;
    font-weight: bold;
    margin-bottom: 5px;
}

.product-card .product-stock,
.product-card .product-category,
.product-card .product-seller {
    font-size: 0.9em;
    color: #65676b;
    margin-bottom: 3px;
}
.product-card .product-seller a {
    color: #1877f2;
    font-weight: normal;
}
.product-card .product-seller a:hover {
    text-decoration: underline;
}

.product-card .add-to-cart-button {
    background-color: #4CAF50;
    color: white;
    width: 100%;
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.product-card .add-to-cart-button:hover {
    background-color: #45a049;
}

.product-grid .no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    font-size: 1.1em;
    color: #777;
}

/* --- Media Queries untuk Toko Online --- */
@media (min-width: 768px) {
    .product-detail-container {
        flex-direction: row;
        align-items: flex-start;
    }
    .product-image-large-wrapper {
        width: 40%;
        aspect-ratio: 1 / 1;
    }
    .product-info {
        width: 60%;
    }
    /* Untuk desktop menengah (misal tablet dalam landscape) */
    .product-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 kolom */
        gap: 15px;
    }
    .product-card .product-image {
        height: 160px;
    }
}

@media (max-width: 767px) { /* Untuk tampilan mobile */
    .product-grid {
        grid-template-columns: repeat(2, 1fr); /* **2 kolom berdampingan di mobile** */
        gap: 15px; /* Jarak antar produk */
    }
    .product-card {
        min-height: 320px; /* Sesuaikan tinggi minimum untuk 2 kolom mobile */
    }
    .product-card .product-name {
        min-height: 3.2em; /* Sesuaikan tinggi nama produk agar 2 baris */
        font-size: 1em;
    }
    .product-card .product-image {
        height: 150px; /* Tinggi gambar produk di mobile */
    }
    .product-card .add-to-cart-button {
        padding: 8px 12px;
        font-size: 0.9em;
    }
    .shop-actions {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .shop-actions .button {
        width: 90%;
    }
    .whatsapp-order-button {
        width: 100%;
        margin-top: 15px;
    }
    .product-detail-container {
        padding: 15px;
        gap: 15px;
    }
    .product-info h3.product-name {
        font-size: 1.5em;
    }
    .product-info p {
        font-size: 0.9em;
    }
    .product-info p.product-price {
        font-size: 1.2em;
    }
    .product-info .add-to-cart-form {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .product-info .add-to-cart-form input[type="number"] {
        width: 100px;
    }
    .my-products-grid .product-card {
        min-height: auto; /* Jangan paksa min-height di halaman ini */
    }
    .my-products-grid .product-card .product-image {
        height: 120px;
    }
    .product-management-actions .button {
        padding: 6px 8px;
        font-size: 0.8em;
    }
}

@media (max-width: 480px) { /* Untuk ponsel yang lebih kecil */
    .product-grid {
        grid-template-columns: repeat(2, 1fr); /* Tetap 2 kolom */
        gap: 10px;
    }
    .product-card {
        min-height: 280px; /* Lebih kecil lagi untuk ponsel kecil */
    }
    .product-card .product-image {
        height: 120px;
    }
    .product-card .product-name {
        min-height: 3.2em;
        font-size: 0.95em;
    }
    .shop-actions .button {
        width: 95%; /* Lebih lebar lagi di ponsel sangat kecil */
    }
}

/* assets/css/style.css */

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

/* --- Styling untuk Halaman Keranjang (cart.php) --- */
.cart-container {
    padding: 25px;
    max-width: 800px; /* Lebar maksimum container */
    margin: 20px auto;
    background-color: #fff; /* Latar belakang sama dengan card-panel */
    border-radius: 8px; /* Sudut membulat */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Shadow halus */
}

.cart-items-list {
    margin-bottom: 20px;
}

.cart-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    gap: 15px; /* Jarak antar elemen dalam item keranjang */
    flex-wrap: wrap; /* Agar bisa wrap di mobile */
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-image {
    width: 80px; /* **Ukuran gambar item keranjang yang presisi** */
    height: 80px; /* **Ukuran gambar item keranjang yang presisi** */
    object-fit: cover; /* **KRUSIAL: Memastikan gambar mengisi area tanpa distorsi** */
    border-radius: 4px;
    flex-shrink: 0; /* Mencegah gambar menyusut */
}

.cart-item-details {
    flex-grow: 1; /* Memungkinkan detail mengisi ruang */
    min-width: 150px; /* Pastikan detail tidak terlalu kecil */
}

.cart-item-name {
    font-size: 1.1em;
    font-weight: bold;
    margin: 0 0 5px 0;
    line-height: 1.3;
}

.cart-item-price {
    font-size: 0.95em;
    color: #f02849;
    margin-bottom: 5px;
}

.cart-item-seller {
    font-size: 0.85em;
    color: #65676b;
}
.cart-item-seller a {
    font-weight: bold;
}

.cart-item-stock-info {
    font-size: 0.8em;
    color: #4CAF50;
}

.cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Aksi rata kanan */
    gap: 8px;
    flex-shrink: 0; /* Mencegah aksi menyusut */
}

.cart-quantity-input {
    width: 60px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 0.9em;
}

.remove-from-cart-button {
    background: none;
    border: none;
    color: #f44336;
    cursor: pointer;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s ease;
}
.remove-from-cart-button:hover {
    color: #da190b;
}

.cart-summary {
    border-top: 1px solid #eee;
    padding-top: 20px;
    text-align: right;
    margin-top: 20px; /* Jarak dari daftar item */
}

.total-amount {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 15px;
    color: #050505;
}

.checkout-button {
    background-color: #1877f2;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.checkout-button:hover {
    background-color: #165bba;
}

.no-items {
    text-align: center;
    padding: 40px;
    font-size: 1.1em;
    color: #65676b;
}

/* Media Queries untuk Keranjang (cart.php) */
@media (max-width: 600px) {
    .cart-item {
        flex-direction: column; /* Tumpuk item di mobile */
        align-items: flex-start;
        gap: 10px;
        padding: 10px 0;
    }
    .cart-item-image {
        width: 70px; /* Sedikit lebih kecil di mobile */
        height: 70px;
        margin-right: 0; /* Hapus margin-right di mobile */
    }
    .cart-item-details {
        width: 100%;
    }
    .cart-item-name {
        font-size: 1em; /* Ukuran font normal */
    }
    .cart-item-price, .cart-item-seller, .cart-item-stock-info {
        font-size: 0.85em; /* Ukuran font lebih kecil */
    }
    .cart-item-actions {
        flex-direction: row; /* Aksi berdampingan di mobile */
        width: 100%;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #eee;
        padding-top: 10px;
        margin-top: 10px;
    }
    .cart-quantity-input {
        width: 70px;
        font-size: 0.85em;
    }
    .remove-from-cart-button {
        font-size: 0.85em;
    }
    .total-amount {
        font-size: 1.2em; /* Total lebih kecil di mobile */
    }
    .checkout-button {
        width: 100%;
        justify-content: center;
        font-size: 1em;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .cart-container {
        padding: 15px;
    }
    .cart-item-image {
        width: 60px;
        height: 60px;
    }
}



/* assets/css/style.css */

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

/* --- Styling untuk Halaman Checkout (checkout.php) --- */
.checkout-container {
    padding: 25px;
    max-width: 800px; /* Lebar maksimum container */
    margin: 20px auto;
    background-color: #fff; /* Latar belakang sama dengan card-panel */
    border-radius: 8px; /* Sudut membulat */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Shadow halus */
    display: flex;
    flex-direction: column; /* Default stack di mobile */
    gap: 30px; /* Jarak antar section */
}

.checkout-summary-section,
.checkout-form-section {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.checkout-summary-section h3,
.checkout-form-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.2em;
    color: #050505;
    border-bottom: 1px solid #f0f2f5;
    padding-bottom: 10px;
}

.checkout-items-list {
    margin-bottom: 20px;
}

.checkout-item-detail {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    gap: 15px; /* Jarak antar gambar dan info item */
}
.checkout-item-detail:last-child {
    border-bottom: none;
}

.checkout-item-image {
    width: 60px; /* **Ukuran gambar item yang presisi** */
    height: 60px; /* **Ukuran gambar item yang presisi** */
    object-fit: cover; /* **KRUSIAL: Memastikan gambar mengisi area tanpa distorsi** */
    border-radius: 4px;
    flex-shrink: 0; /* Mencegah gambar menyusut */
}

.checkout-item-info {
    flex-grow: 1; /* Memungkinkan detail mengisi ruang */
    min-width: 150px; /* Pastikan detail tidak terlalu kecil */
}

.checkout-item-name {
    font-weight: bold;
    margin: 0 0 5px 0;
    font-size: 1em;
}

.checkout-item-qty-price,
.checkout-item-subtotal {
    font-size: 0.9em;
    color: #65676b;
    margin: 0;
}
.checkout-item-subtotal {
    font-weight: bold;
}

.checkout-total {
    font-size: 1.3em;
    font-weight: bold;
    color: #f02849;
    text-align: right;
    margin-top: 15px;
}

.checkout-form-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.checkout-form-section textarea,
.checkout-form-section select {
    width: calc(100% - 24px); /* Sesuaikan dengan padding */
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #dddfe2;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #f5f6f7;
    color: #050505;
}

.checkout-form-section textarea:focus,
.checkout-form-section select:focus {
    border-color: #1877f2;
    box-shadow: 0 0 0 1px #1877f2;
    outline: none;
    background-color: #fff;
}

.checkout-form-section textarea {
    resize: vertical;
    min-height: 80px;
}

.info-text { /* Untuk teks info pembayaran di checkout */
    font-size: 0.9em;
    color: #65676b;
    margin-bottom: 15px;
    line-height: 1.4;
}

.place-order-button {
    background-color: #28a745; /* Hijau untuk selesaikan */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.2s ease;
    width: 100%;
    display: flex; /* Untuk ikon dan teks */
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.place-order-button:hover {
    background-color: #218838;
}

/* Media Queries untuk Checkout */
@media (min-width: 768px) {
    .checkout-container {
        flex-direction: row; /* Side-by-side di desktop */
        justify-content: space-between;
        align-items: flex-start;
    }
    .checkout-summary-section,
    .checkout-form-section {
        flex: 1; /* Ambil ruang yang sama */
    }
    .checkout-summary-section {
        margin-right: 20px; /* Jarak antar kolom */
    }
}
@media (max-width: 600px) {
    .checkout-summary-section,
    .checkout-form-section {
        padding: 15px;
    }
    .checkout-item-image {
        width: 50px; /* Lebih kecil di mobile */
        height: 50px;
    }
    .checkout-item-name, .checkout-item-qty-price, .checkout-item-subtotal {
        font-size: 0.9em;
    }
    .checkout-total {
        font-size: 1.1em;
    }
    .place-order-button {
        font-size: 1em;
        padding: 10px;
    }
}


/* assets/css/style.css */

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

/* --- Styling untuk Detail Postingan (post_detail.php) --- */
.post-detail-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin: 20px auto;
    padding: 25px;
    max-width: 700px;
}

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

.post-detail-card .post-header .profile-pic-small { /* Menggunakan kelas yang sudah ada */
    width: 48px; /* Ukuran foto profil di header postingan */
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ddd;
    flex-shrink: 0;
}

.post-detail-card .post-header h4 {
    margin: 0;
    font-size: 1.1em;
    color: #050505;
}

.post-detail-card .post-header .post-time {
    font-size: 0.8em;
    color: #65676b;
    margin-left: auto;
}

.post-detail-card .post-content {
    margin-bottom: 20px;
    line-height: 1.6;
    color: #050505;
    word-break: break-word;
}

.post-detail-card .post-content img.post-media-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 10px;
    display: block;
}

.post-detail-card .post-content .video-thumbnail-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #f0f2f5;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 10px;
}

.post-detail-card .post-content .video-thumbnail-container video.post-media-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-detail-card .post-content .video-thumbnail-container .video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5em;
    color: white;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.post-detail-card .post-content .video-thumbnail-container:hover .video-play-overlay {
    opacity: 1;
}


.post-detail-card .post-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    border-top: 1px solid #f0f2f5;
    padding-top: 15px;
}

.post-detail-card .post-actions .view-count {
    font-size: 0.9em;
    color: #65676b;
}

.post-detail-card .post-actions .action-button {
    background-color: #e4e6eb;
    color: #050505;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9em;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.post-detail-card .post-actions .action-button:hover {
    background-color: #d8dadf;
}
.post-detail-card .post-actions .edit-post-button,
.post-detail-card .post-actions .delete-post-button {
    margin-left: auto;
}

/* --- Styling untuk Chat di Detail Postingan --- */
.chat-section {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin: 20px auto;
    padding: 25px;
    max-width: 700px;
}

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

.chat-list {
    margin-bottom: 15px;
}

.chat-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #f0f2f5;
}
.chat-item:last-child {
    border-bottom: none;
}

.chat-item .chat-profile-pic {
    width: 36px; /* Ukuran foto profil di chat */
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ddd;
    flex-shrink: 0;
}

.chat-item .chat-content-bubble {
    background-color: #f0f2f5;
    border-radius: 18px;
    padding: 10px 15px;
    color: #050505;
    flex-grow: 1;
    min-width: 0; /* Mencegah overflow */
}

.chat-item.my-chat {
    flex-direction: row-reverse;
}
.chat-item.my-chat .chat-content-bubble {
    background-color: #e1f3ff;
}

.chat-item .chat-username {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
    color: #1877f2;
    text-decoration: none;
}
.chat-item .chat-username:hover {
    text-decoration: underline;
}

.chat-item .chat-content-bubble p {
    margin: 0;
    line-height: 1.4;
    word-break: break-word;
}

.chat-item .chat-time {
    font-size: 0.75em;
    color: #65676b;
    display: block;
    margin-top: 3px;
}

.chat-form {
    display: flex;
    gap: 10px;
}

.chat-form textarea {
    flex-grow: 1;
    border: 1px solid #dddfe2;
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 1em;
    outline: none;
    background-color: #f0f2f5;
    color: #050505;
    resize: none; /* Mencegah resize manual */
    min-height: 40px;
    box-sizing: border-box;
}
.chat-form textarea:focus {
    border-color: #1877f2;
}
.chat-form textarea::placeholder {
    color: #8a8d91;
}

.chat-form button {
    background-color: #1877f2;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 0 15px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s ease;
    height: 40px;
}
.chat-form button:hover {
    background-color: #165bba;
}

.no-chats {
    text-align: center;
    padding: 15px;
    color: #777;
    font-style: italic;
}

/* Media Query untuk Detail Postingan */
@media (max-width: 600px) {
    .post-detail-card {
        padding: 15px;
        margin: 15px;
    }
    .post-detail-card .post-header {
        gap: 8px;
    }
    .post-detail-card .post-header .profile-pic-small {
        width: 36px;
        height: 36px;
    }
    .post-detail-card .post-header h4 {
        font-size: 1em;
    }
    .post-detail-card .post-header .post-time {
        font-size: 0.75em;
    }
    .chat-section {
        padding: 15px;
        margin: 15px;
    }
    .chat-item {
        gap: 8px;
        padding: 8px;
    }
    .chat-item .chat-profile-pic {
        width: 30px;
        height: 30px;
    }
    .chat-item .chat-content-bubble {
        padding: 8px 12px;
        font-size: 0.9em;
    }
    .chat-form textarea {
        padding: 8px 12px;
        font-size: 0.9em;
        min-height: 36px;
    }
    .chat-form button {
        font-size: 0.9em;
        padding: 0 12px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    .post-detail-card {
        padding: 10px;
        margin: 10px;
    }
    .post-detail-card .post-header {
        gap: 5px;
    }
    .post-detail-card .post-header .profile-pic-small {
        width: 32px;
        height: 32px;
    }
    .post-detail-card .post-header h4 {
        font-size: 0.9em;
    }
    .chat-section {
        padding: 10px;
        margin: 10px;
    }
    .chat-item {
        gap: 5px;
        padding: 6px;
    }
    .chat-item .chat-profile-pic {
        width: 28px;
        height: 28px;
    }
    .chat-item .chat-content-bubble {
        padding: 6px 10px;
        font-size: 0.85em;
    }
    .chat-form textarea {
        padding: 6px 10px;
        font-size: 0.85em;
        min-height: 32px;
    }
    .chat-form button {
        font-size: 0.85em;
        padding: 0 10px;
        height: 32px;
    }
}