/* === Variabel Warna (sesuai gambar) === */
:root {
    --warna-biru: #0d6efd; /* Biru utama (dari tombol) */
    --warna-biru-gelap: #0b5ed7;
    --warna-biru-header: #0b5ed7; /* Header di dashboard */
    --warna-kuning-hero: #f7da46;
    --warna-putih: #ffffff;
    --warna-abu-latar: #f4f6f8;
    --warna-abu-border: #dee2e6;
    --warna-abu-teks: #6c757d;
    --warna-teks: #333; 
    --warna-biru-auth-bg: #0052cc; /* Biru dari login/register */
    --warna-footer-bg: #e9ecef; /* Warna footer baru yang sedikit gelap */
}

/* === Reset & Global === */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; /* Ganti jika punya font spesifik */
}

body {
    background-color: var(--warna-abu-latar);
    color: var(--warna-teks);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: var(--warna-biru);
}
a:hover {
    color: var(--warna-biru-gelap);
}

img {
    max-width: 100%;
    height: auto;
}

/* === Halaman Login & Register (Auth) === */
.auth-page {
    background-color: var(--warna-biru-auth-bg);
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;  
    min-height: 100vh;
    padding: 20px;
}

.auth-container {
    background-color: var(--warna-putih);
    /* Padding normal, atas dan bawah lebih besar */
    padding: 40px 30px; 
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
    position: relative; 
    z-index: 1; 
}

/* Logo yang berada di DALAM card */
.auth-logo-inside {
    display: block;
    margin-bottom: 25px; /* Jarak antara logo dan title "Masuk" */
}

.auth-logo-inside img {
    height: 40px; /* Ukuran logo, lebih besar dari title */
    width: auto;
}

.auth-container h2 {
    /* Title "Masuk" / "Daftar" */
    font-size: 24px; 
    margin-bottom: 25px;
    color: var(--warna-teks);
}

.form-group {
    margin-bottom: 15px;
}

.form-group input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--warna-abu-border);
    border-radius: 8px;
    font-size: 16px;
    background-color: #f8f9fa;
}
.form-group-extra {
    text-align: right;
    margin-bottom: 20px;
    font-size: 14px;
}
.form-group-extra a {
    color: var(--warna-biru);
    font-weight: 600;
}
.auth-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background-color: var(--warna-biru);
    color: var(--warna-putih);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.auth-btn:hover {
    background-color: var(--warna-biru-gelap);
    transform: scale(1.02); /* TAMBAHKAN: Animasi sedikit membesar */
}

.auth-switch {
    margin-top: 20px;
    color: var(--warna-abu-teks);
}
.auth-switch a {
    font-weight: bold;
}

.auth-error {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}
.auth-sukses {
    color: #0f5132;
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

/* Responsive untuk logo di auth-page */
@media (max-width: 480px) {
    .auth-logo-inside img {
        height: 35px; /* Kecilkan logo sedikit di HP */
    }
    .auth-container {
        padding: 30px 20px; /* Padding lebih kecil di mobile */
    }
}
/* === Halaman Dashboard (Header & Nav) === */
.main-header {
    background-color: var(--warna-biru-header); /* SUDAH BIRU, SESUAI KODE ANDA */
    /* border-bottom: 1px solid var(--warna-abu-border); (Dihapus sesuai gambar) */
    padding: 15px 5%;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left { 
    display: flex; 
    align-items: center;
    gap: 60px; /* UBAH: Tambah jarak antara hamburger dan logo */
}
.logo { 
    margin-left: 0; /* UBAH: Hapus margin-left */
    display: inline-block; /* Wajib ada agar 'transform' berfungsi */
    transition: all 0.3s ease-out; /* Animasi "mouse out" */
}
.logo:hover {
    transform: translateY(-5px); /* Logo terangkat 5px */

    /* Efek glow (bayangan putih) */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

/* TAMBAHAN: Buat logo di header jadi PUTIH */
.logo img {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease; /* Tambahkan ini agar 'filter' di atas mulus */
}

.mobile-menu-btn { 
    display: block; /* Sembunyi di desktop, diubah di media query */
    background: none; 
    border: none; 
    font-size: 24px; /* UBAH: Perbesar ikon */
    cursor: pointer;
    color: var(--warna-putih); /* UBAH: Ikon jadi putih */
    transition: all 0.2s ease; /* TAMBAHKAN INI */
}
.mobile-menu-btn:hover {
    transform: scale(1.1); /* Ikon membesar */
    opacity: 0.8;
}

.header-search {
    flex-grow: 1;
    max-width: 1000px; /* UBAH: Perkecil dari 1500px */
    position: relative;
    background-color: rgba(255, 255, 255, 0.2); /* UBAH: Jadi transparan */
    border-radius: 20px;
    display: flex; /* UBAH: Tambah ini */
    align-items: center; /* UBAH: Tambah ini */
    padding: 0 15px; /* UBAH: Sederhanakan padding */
    transition: background-color 0.3s ease, box-shadow 0.3s ease-out;/* TAMBAHKAN INI (untuk animasi exit) */
}
.header-search:hover {
    background-color: #ffffff; /* Ubah jadi putih terang */
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.header-search input {
    width: 100%;
    padding: 10px 30px 10px 0;
    border-radius: 20px;
    border: none; /* UBAH: Hapus border */
    background-color: transparent; /* UBAH: Jadi transparan */
    color: var(--warna-putih); /* UBAH: Teks input jadi putih */
    font-size: 16px; /* TAMBAH: Ukuran font */
}
.header-search input::placeholder {
    color: rgba(255, 255, 255, 0.7); /* TAMBAH: Placeholder putih */
    transition: color 0.3s ease; /* TAMBAHKAN INI (untuk animasi exit) */
}
.header-search:hover input::placeholder {
    color: transparent; /* Hilangkan placeholder saat di-hover */
}
.header-search:hover i {
    color: var(--warna-teks); /* Ubah ikon jadi gelap */
}
.header-search:hover input {
    color: var(--warna-teks); /* Ubah teks input jadi gelap */
}
.header-search input:focus {
    outline: none; /* TAMBAH: Hapus outline */
}
.header-search i {
    position: static; /* UBAH: dari absolute */
    transform: none; /* UBAH: Hapus transform */
    color: var(--warna-putih); /* UBAH: Ikon search putih */
    margin-right: 10px; /* TAMBAH: Jarak ikon */
}
/* === TAMBAHAN BARU: Tombol Clear di Search Bar === */
.header-search-clear {
    display: none; /* Sembunyi by default, JS akan memunculkannya */
    position: absolute;
    right: 15px; /* Posisikan di kanan */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    /* Warna ikon X (putih transparan, agar cocok dengan placeholder) */
    color: rgba(255, 255, 255, 0.7); 
    font-size: 16px;
    padding: 0;
    transition: color 0.3s ease;
}

.header-search-clear:hover {
    color: var(--warna-putih); /* Jadi putih solid saat di-hover */
}

/* Saat search bar di-hover (jadi putih), 
   kita juga harus ubah warna ikon X jadi gelap */
.header-search:hover .header-search-clear {
    color: var(--warna-abu-teks);
}
.header-search:hover .header-search-clear:hover {
    color: var(--warna-teks);
}

.header-icons {
    display: flex;
    gap: 20px;
}
.header-icons a {
    font-size: 22px; /* UBAH: Perbesar ikon */
    color: var(--warna-putih); /* UBAH: Ikon jadi PUTIH */
    transition: all 0.2s ease; /* TAMBAHKAN INI */
}
.header-icons a:hover {
    transform: scale(1.1); /* Ikon membesar */
    opacity: 0.8;
}
.main-nav {
    background-color: var(--warna-putih);
    padding: 0 5%;
    display: flex;
    border-bottom: 1px solid var(--warna-abu-border);
    
    /* REQUEST 3: CSS untuk Animasi Scroll */
    position: sticky; /* Membuat nav menempel di bawah header */
    top: 0; /* Akan di-update oleh JS */
    z-index: 999; /* Di bawah header (1000) */
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.main-nav.main-nav-hidden {
    transform: translateY(-100%); /* Hilang ke atas */
}
.main-nav ul {
    list-style: none;
    display: flex;
    /* REQUEST 1: Membuat <ul> memenuhi bar dan meratakan isinya */
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin: 0; /* Pastikan tidak ada margin default */
    padding: 0; /* Pastikan tidak ada padding default */
}

.main-nav ul li a {
    display: block;
    padding: 18px 20px;
    color: var(--warna-teks);
    font-weight: bold;
    font-size: 15px;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease; /* Ganti dari border-bottom saja */
}
.main-nav ul li a:hover,
.main-nav ul li a.active {
    border-bottom-color: red; /* Sesuai gambar */
    color: red;
    transform: translateY(-1px); /* Sedikit naik */
}
.main-nav ul li a i { font-size: 12px; margin-left: 5px; }

li.nav-auth a {
    font-size: 15px;
    font-weight: bold;
    /* Anda bisa tambahkan style khusus di sini jika perlu */
}


/* === Halaman Dashboard (Content) === */
.content-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px 5%;
}
body, html {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden; /* Mencegah scroll samping */
}

/* === UPDATE BAGIAN INI SAJA === */
.hero-slider {
    position: relative;
    overflow: hidden;
    background-color: #eee;

    /* --- LEBAR: Full Width (Mentok Kanan Kiri) --- */
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
    margin-right: -50vw;
    
    /* --- TINGGI: Satu Layar Penuh (Dikurangi Header) --- */
    /* Angka '140px' adalah estimasi tinggi Header + Menu Anda. 
       Sesuaikan angka ini jika header Anda lebih tinggi/pendek. */
    height: calc(100vh - 140px); 
    
    margin-top: 0 !important;
    border-radius: 0; 
}

/* 2. Slide Item */
.hero-slider .slide {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1;
    
    background-size: cover;       /* Gambar akan dicrop agar memenuhi kotak */
    background-position: center;  /* Fokus gambar di tengah */
    background-repeat: no-repeat;
    border-radius: 0;
}

.hero-slider .slide.active {
    opacity: 1;
    z-index: 2;
}

/* 3. Kotak Kuning (Caption) - Tampilan Desktop */
.hero-slider .slide-caption {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; /* Full tinggi dari atas ke bawah */
    
    /* --- PERUBAHAN RESIZEABLE (SESUAI REQUEST) --- */
    width: fit-content; /* Lebar menyusut menyesuaikan isi teks */
    max-width: 45%;     /* Batas maksimal lebar (agar tidak terlalu lebar) */
    min-width: 25%;     /* Batas minimal (agar tidak terlalu tipis jika teks sedikit) */
    
    padding: 0 40px;    /* Padding kiri kanan agar teks tidak nempel pinggir */
    background-color: #f7da46; /* Kuning */
    
    /* Transisi halus jika ukuran berubah (opsional) */
    transition: width 0.3s ease, max-width 0.3s ease; 
}

/* 5. GAYA BARU: Tombol Navigasi Kiri/Kanan */
.slide-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.3); /* Latar transparan gelap */
    color: #fff;
    border: none;
    width: 45px; /* Sedikit diperbesar agar enak diklik */
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    
    /* --- LOGIKA MOUSE ENTERED/EXITED (DEFAULT: HILANG) --- */
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.3s ease-in-out; /* Efek muncul perlahan */
}

.slide-nav-btn.prev { left: 20px; }
.slide-nav-btn.next { right: 20px; }
.slide-nav-btn:hover {
    background: rgba(0,0,0,0.6); /* Lebih gelap saat tombol disorot */
}

/* --- LOGIKA MOUSE ENTERED: TAMPILKAN TOMBOL --- */
/* Saat mouse masuk ke area .hero-slider, tombol menjadi terlihat */
.hero-slider:hover .slide-nav-btn {
    opacity: 1;
    visibility: visible;
}
/* 6. GAYA BARU: Indikator Titik */
.slider-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
}
.slider-indicators .dot {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
}
.slider-indicators .dot.active {
    background: #fff;
    transform: scale(1.2);
}
.slider-indicators .dot:hover {
    background-color: var(--warna-biru);
}
.hero-slider .slide-caption h1 {
    font-size: 36px;
    margin-bottom: 10px;
    line-height: 1.2;
    color: #000;
}

.hero-slider .slide-caption p {
    font-size: 18px;
    margin-bottom: 20px;
    line-height: 1.4;
    color: #333;
}

/* Tombol Biru */
.btn-slider {
    background-color: var(--warna-biru); /* Pastikan variabel ini ada, atau ganti #007bff */
    color: #fff;
    padding: 10px 25px;
    border-radius: 25px; /* Tombol bulat/oval */
    font-weight: bold;
    text-decoration: none;
    align-self: flex-start;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    border: none;
    cursor: pointer;
}

.btn-slider:hover {
    transform: translateY(-2px);
}

.promo-section {
    margin-top: 20px; /* Jarak ke atas (ke Hero Banner) diperkecil */
}

/* Kategori unggulan tetap memiliki jarak standar agar rapi */
.kategori-unggulan {
    margin-top: 40px; 
}

/* Judul Section */
.promo-section h2, .kategori-unggulan h2 {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

/* === GRID SYSTEM BARU (MENGGANTIKAN SLIDER) === */

/* Container Grid Utama */
.promo-grid {
    display: grid;
    /* DESKTOP: 3 Kolom (1 Besar di kiri, 2 kolom kecil di kanan) */
    grid-template-columns: 1.5fr 1fr 1fr; 
    /* Tinggi Baris: Total tinggi 500px (250px x 2 baris) */
    grid-template-rows: 250px 250px; 
    gap: 15px; /* Jarak antar kotak */
    width: 100%;
}

/* Style Item Gambar */
.promo-item {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    width: 100%;
    height: 100%;
}

.promo-item a, .promo-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* PENTING: Agar gambar penuh tanpa gepeng */
    transition: transform 0.3s ease;
}

/* Efek Hover: Zoom sedikit saat ditunjuk */
.promo-item:hover img {
    transform: scale(1.05);
}


/* === PENGATURAN POSISI (LOGIKA IKEA) === */

/* Gambar 1: Besar di Kiri (Memakan 2 Baris) */
.promo-item:nth-child(1) {
    grid-column: 1 / 2; /* Kolom ke-1 */
    grid-row: 1 / 3;    /* Dari baris 1 sampai 3 (Full tinggi) */
}

/* Gambar 2: Tengah Atas */
.promo-item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

/* Gambar 3: Tengah Bawah */
.promo-item:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

/* Gambar 4: Kanan Atas */
.promo-item:nth-child(4) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

/* Gambar 5: Kanan Bawah */
.promo-item:nth-child(5) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.kategori-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 kotak */
    gap: 20px;
}
.kategori-box {
    border: none;
    border-radius: 10px;
    background: var(--warna-putih);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    color: var(--warna-teks);
    overflow: hidden; 
    position: relative; /* Agar elemen absolut di dalamnya bisa ditempatkan */
    
    /* Tentukan rasio kotak (contoh 1:1) */
    aspect-ratio: 1 / 1; 
    display: block; /* Agar link berfungsi sebagai blok */
}
.kategori-box:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px); /* TAMBAHKAN: Box akan "terangkat" */
}
.kategori-box .kategori-image-bg {
    width: 100%;
    height: 100%;
    position: absolute; /* Penuh di dalam kategori-box */
    top: 0;
    left: 0;
    
    /* GAYA BACKGROUND */
    background-size: cover; /* PASTIKAN GAMBAR MENGISI PENUH (TIDAK PEDULI RASIO) */
    background-position: center;
    background-repeat: no-repeat;
    
    /* Gunakan Flexbox untuk menengahkan teks */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Posisikan teks di bawah */
    align-items: center;
    padding-bottom: 20px; /* Jarak dari bawah kartu */

    /* Efek overlay agar teks lebih terlihat (opsional) */
    background-color: rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.kategori-box:hover .kategori-image-bg {
    background-color: rgba(0, 0, 0, 0.2);
}

/* === GAYA BARU: Label Teks dengan Background Kuning === */
.kategori-box .kategori-label {
    /* Gaya Teks */
    font-weight: bold;
    font-size: 16px;
    color: #fff; /* UBAH: Jadi Putih */

    /* HAPUS BACKGROUND KUNING */
    background-color: transparent; 
    
    padding: 5px 15px;
    border-radius: 5px;
    text-transform: uppercase;
    
    position: relative; 
    z-index: 2;

    /* TAMBAHAN PENTING: Bayangan teks agar terbaca jelas di atas gambar */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}
.kategori-wrapper-mobile {
    position: relative; /* Agar tombol nav bisa absolute terhadap ini */
}

/* === TOMBOL NAVIGASI KATEGORI (DEFAULT HILANG DI DESKTOP) === */
.kat-nav-btn {
    display: none; /* Sembunyi di Desktop */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.8); /* Putih transparan */
    border: 1px solid #ddd;
    color: #333;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    align-items: center;
    justify-content: center;
}
.kat-nav-btn.prev { left: -10px; }  /* Sedikit keluar agar tidak menutupi konten */
.kat-nav-btn.next { right: -10px; }
/* === BAGIAN BARU: BERITA UNGGULAN === */
.berita-unggulan {
    margin-top: 40px;
    padding-bottom: 40px;
}
.berita-unggulan h2 {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}
.berita-slider-wrapper {
    position: relative;
    padding: 0 40px; /* Ruang untuk tombol navigasi */
}

/* 1. Kontainer Slider (Membutuhkan JS untuk slider circular) */
.berita-slider {
    display: flex; /* Flexbox untuk menampung card berita */
    gap: 20px;
    overflow-x: hidden; /* Sembunyikan scrollbar bawaan */
    padding: 10px 0; /* Padding vertikal sedikit */
}

/* 2. Gaya Card Berita */
.berita-slider .berita-card {
    /* Buat card memiliki lebar tetap agar JS slider bisa bekerja */
    flex: 0 0 250px; 
    max-width: 250px;
    background-color: var(--warna-putih);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
/* Efek Hover */
.berita-slider .berita-card:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px); /* Efek terangkat */
}

/* 3. Area Gambar (1x1 Ratio) */
.berita-slider .berita-image-box {
    width: 100%;
    /* Rasio 1:1 */
    aspect-ratio: 1 / 1; 
    
    /* Gaya Background */
    background-size: cover; /* Gambar mengisi penuh kotak */
    background-position: center;
    background-repeat: no-repeat;
    background-color: #eee;
}

/* 4. Area Konten di Bawah Gambar */
.berita-slider .berita-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100px; /* Pastikan tinggi konten konsisten */
}
.berita-content .berita-title-link {
    font-size: 16px;
    font-weight: bold;
    color: var(--warna-teks);
    margin-bottom: 5px;
    /* Efek hover untuk judul */
    transition: color 0.3s ease;
}
.berita-content .berita-title-link:hover {
    color: var(--warna-biru);
}

.berita-content .berita-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px; /* Jarak antar baris meta */
    margin-top: 5px; /* Jarak dari judul */
    font-size: 12px;
    color: var(--warna-abu);
}
.berita-meta small {
    color: #555;
    font-weight: normal;
}
.berita-meta .read-more {
    font-weight: bold;
    color: var(--warna-biru);
    text-decoration: none;
    transition: opacity 0.3s ease;
}
.berita-meta .read-more:hover {
    opacity: 0.8;
}

/* 5. Tombol Navigasi Slider Berita */
.slider-berita-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.slider-berita-nav:hover {
    background-color: var(--warna-biru); /* Ganti warna hover menjadi warna utama */
}
.slider-berita-nav.prev {
    left: 0;
}
.slider-berita-nav.next {
    right: 0;
}
/* === FIX FINAL MOBILE (ANDROID) - DENGAN KOTAK KUNING LEBIH RAMPING === */
@media (max-width: 768px) {

    /* 1. Container Slider - Persegi Panjang 16:9 */
    .hero-slider {
        width: 100vw !important;
        margin-left: -50vw !important;
        left: 50% !important;
        margin-right: -50vw !important;
        
        height: auto !important; 
        min-height: 180px !important; /* Kurangi sedikit min-height agar proporsional */
        aspect-ratio: 16 / 9 !important; 
        
        border-radius: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        margin-bottom: 20px !important; 
    }

    /* 2. Slide Item */
    .hero-slider .slide {
        height: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
        object-fit: cover !important; 
    }

    /* 3. CAPTION KUNING (Dibuat Lebih Tipis/Kecil) */
    .hero-slider .slide-caption {
    position: absolute !important;
    
    /* === POSISI: GANTUNG DARI ATAS === */
    top: 0 !important;        /* Tempel ke atas */
    bottom: auto !important;  /* PENTING: Lepas bagian bawah agar 'terangkat' naik */
    left: 20px !important;    /* Jarak dari kiri */
    right: auto !important;
    
    /* === UKURAN: FLEKSIBEL === */
    height: auto !important;     /* Tinggi otomatis menyesuaikan isi teks */
    width: auto !important;
    max-width: 55% !important;   /* Lebar dibatasi segini (sesuai request max gedenya) */
    
    /* === TAMPILAN === */
    background-color: #f7da46 !important;
    padding: 20px 15px !important; /* Spasi dalam yang lega */
    
    /* Radius: Atas siku-siku (biar nempel langit2), Bawah rounded (efek kain gantung) */
    border-radius: 0 0 15px 15px !important; 
    
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    
    /* Flexbox Isi */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 8px !important; /* Jarak antar elemen didalamnya */
    
    z-index: 5 !important;
    opacity: 1 !important;
    transform: none !important; 
}

/* Pastikan Judul bisa turun ke bawah jika panjang (Word Wrap) */
.hero-slider .slide-caption h1 {
    font-size: 14px !important;
    margin: 0 !important;
    color: #000 !important;
    line-height: 1.3 !important;
    
    /* Izinkan teks turun ke baris baru */
    white-space: normal !important; 
    word-wrap: break-word !important;
}

    /* Sembunyikan Deskripsi (Wajib hidden biar tidak tinggi) */
    .hero-slider .slide-caption p {
        display: none !important;
    }

    /* 5. TOMBOL (Diperkecil) */
    .btn-slider {
        display: inline-block !important;
        background-color: var(--warna-biru) !important;
        color: #fff !important;
        
        /* Ukuran tombol lebih imut */
        font-size: 10px !important;
        padding: 4px 10px !important;
        
        border-radius: 4px !important;
        border: none !important;
        margin-top: 2px !important; /* Jarak dikit dari judul */
    }

    /* 6. INDIKATOR TITIK */
    .slider-indicators {
        display: flex !important;
        bottom: 10px !important;
        left: auto !important;  /* Reset left center */
        right: 10px !important; /* Pindah titik ke POJOK KANAN BAWAH agar tidak nabrak kotak kuning */
        transform: none !important;
        z-index: 20 !important; 
        gap: 5px !important;
    }

    .slider-indicators .dot {
        width: 6px !important;
        height: 6px !important;
        background-color: rgba(255,255,255,0.5) !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
    }
    
    .slider-indicators .dot.active {
        background-color: #fff !important;
    }

    /* Sembunyikan Navigasi Panah */
    .slide-nav-btn { display: none !important; }
    
    /* === GRID MOBILE 2x2 (KOTAK TAJAM / TIDAK ROUNDED) === */
    
    .promo-grid {
        display: grid;
        /* Bagi layar jadi 2 kolom sama besar */
        grid-template-columns: 1fr 1fr !important;
        /* Tinggi baris otomatis */
        grid-template-rows: auto auto !important; 
        /* Jarak antar kotak */
        gap: 10px !important;
        
        width: 100%;
        margin-bottom: 20px;
    }

    /* Reset posisi grid desktop (supaya urut 1,2,3,4) */
    .promo-item:nth-child(1),
    .promo-item:nth-child(2),
    .promo-item:nth-child(3),
    .promo-item:nth-child(4) {
        grid-column: auto !important;
        grid-row: auto !important;
        
        /* Wajib: Paksa jadi Kotak Persegi (Square) */
        aspect-ratio: 1 / 1 !important; 
        height: auto !important;
        min-width: 0 !important; /* Reset min-width slider lama */
    }
    
    .promo-item {
        /* UBAH DI SINI: Hapus radius agar sudutnya tajam (kotak) */
        border-radius: 0 !important; 
    }

    .promo-item img {
        /* UBAH DI SINI: Hapus radius juga di gambar */
        border-radius: 0 !important;
        
        object-fit: cover !important;
        height: 100% !important;
        width: 100% !important;
    }

    /* PENTING: Sembunyikan gambar ke-5 agar pas jadi 4 kotak (2x2) */
    .promo-item:nth-child(5) {
        display: none !important;
    }
}
@media (max-width: 768px) {
    
    /* 1. Kontainer Slider (Wrapper) - Tetap Pertahankan Padding Anda */
    .berita-slider-wrapper {
        padding: 0 15px; 
        position: relative; /* Pastikan relative agar tombol absolute bekerja */
    }

    /* 2. Container Slider (Agar bisa digeser/Swipe) */
    .berita-slider {
        display: flex;        /* Pastikan flex agar berjejer ke samping */
        gap: 15px;            /* Jarak antar kartu */
        
        /* Aktifkan Scroll Horizontal */
        overflow-x: auto !important; 
        
        /* Efek Magnet (Snap) saat digeser */
        scroll-snap-type: x mandatory; 
        
        /* Scroll halus jika diklik tombol */
        scroll-behavior: smooth;

        /* Sembunyikan Scrollbar agar bersih */
        scrollbar-width: none; 
        -ms-overflow-style: none;
        padding-bottom: 15px; /* Beri ruang sedikit untuk bayangan bawah */
    }
    .berita-slider::-webkit-scrollbar {
        display: none;
    }

    /* 3. Gaya Card Berita - Tetap Pertahankan Ukuran 80% Anda */
    .berita-slider .berita-card {
        /* Kode asli Anda (Keep) */
        flex: 0 0 80%; 
        max-width: 80%;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
        
        /* Kode Tambahan: Agar kartu berhenti pas di tengah saat digeser */
        scroll-snap-align: center; 
    }
    
    /* 4. Judul Section - Kode Asli Anda (Keep) */
    .berita-unggulan h2 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    /* 5. Area Gambar & Konten - Kode Asli Anda (Keep) */
    .berita-slider .berita-image-box {
        /* Tidak ada perubahan */
    }

    .berita-slider .berita-content {
        padding: 10px 15px; 
        min-height: 80px; 
    }
    .berita-content .berita-title-link {
        font-size: 14px; 
        margin-bottom: 5px;
        line-height: 1.3;
    }
    .berita-content .berita-meta {
        flex-direction: column; 
        align-items: flex-start;
        gap: 3px;
    }
    .berita-meta small {
        font-size: 11px; 
    }
    .berita-meta .read-more {
        font-size: 11px; 
    }

    /* 6. TOMBOL NAVIGASI BERITA (DIUBAH: TAMPIL & BERWARNA PUTIH) */
    .slider-berita-nav {
        /* TAMPILKAN DENGAN FLEX */
        display: flex !important; 
        
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;

        /* GAYA PUTIH (Sesuai Permintaan) */
        background-color: rgba(255, 255, 255, 0.9) !important;
        color: #333 !important; /* Warna panah gelap */
        border: 1px solid #ddd !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;

        /* UKURAN BULAT */
        width: 35px !important;
        height: 35px !important;
        border-radius: 50% !important;
        font-size: 14px !important;
        padding: 0 !important;
        cursor: pointer;

        /* TENGANHKAN ICON */
        align-items: center;
        justify-content: center;
    }

    /* POSISI TOMBOL KIRI/KANAN */
    .slider-berita-nav.prev {
        left: 0 !important; /* Nempel di kiri wrapper */
    }
    .slider-berita-nav.next {
        right: 0 !important; /* Nempel di kanan wrapper */
    }
}

/* === Koreksi Responsif Kategori Unggulan === */
@media (max-width: 768px) {
    /* Tampilkan Tombol Navigasi di HP */
    .kat-nav-btn {
        display: flex; /* Munculkan dengan Flex agar ikon di tengah */
    }

    /* Pastikan Wrapper punya padding agar tombol tidak nempel layar */
    .kategori-wrapper-mobile {
        padding: 0 10px; 
    }

    /* === UBAH GRID MENJADI SLIDER (FLEX) === */
    .kategori-container {
        display: flex !important;
        gap: 15px;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 15px;
        
        /* Tambahkan scroll-behavior agar halus saat diklik JS */
        scroll-behavior: smooth;
    }
    
    /* Hide scrollbar Chrome/Safari */
    .kategori-container::-webkit-scrollbar {
        display: none;
    }

    /* === ATUR UKURAN KARTU (2 KARTU PER LAYAR) === */
    .kategori-box {
        /* Rumus: 50% layar dikurangi setengah jarak gap */
        /* Ini akan membuat pas 2 kartu terlihat di layar HP */
        flex: 0 0 calc(50% - 10px); 
        min-width: calc(50% - 10px);
        
        aspect-ratio: 1 / 1; /* Tetap kotak */
        scroll-snap-align: start; /* Posisi berhenti geser */
        transform: none !important; /* Matikan efek hover desktop */
    }

    /* Memastikan background gambar pas */
    .kategori-box .kategori-image-bg {
        padding-bottom: 10px;
        background-size: cover;
    }
    
    /* Ukuran font di HP sedikit dikecilkan agar muat */
    .kategori-box .kategori-label {
        font-size: 13px; 
    }
}

/* === MATIKAN LOGIKA LAMA UNTUK HP KECIL === */
/* (Timpa/Hapus logika Grid 576px yang lama agar tidak bentrok dengan slider baru) */
@media (max-width: 576px) {
    .kategori-container {
        grid-template-columns: none !important;
    }
    /* Reset trik 'last-child' yang lama */
    .kategori-container .kategori-box:last-child {
        grid-column: auto !important;
        justify-self: auto !important;
        width: auto !important; /* Biarkan mengikuti flex di atas */
    }
}
/* === Footer === */
.main-footer {
    /* UBAH: Background jadi abu-abu/putih */
    background-color: var(--warna-footer-bg); /* Ganti dari --warna-abu-latar */
    /* UBAH: Warna teks jadi gelap */
    color: var(--warna-teks); 
    padding: 40px 5% 0;
    margin-top: 50px;
    border-top: 1px solid var(--warna-abu-border); /* TAMBAH: Garis batas atas */
}

.footer-container {
    display: grid;
    /* UBAH: Jadi 5 kolom (logo, 3x menu, ikon) */
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr 1fr; 
    gap: 30px;
    padding-bottom: 30px;
}

.footer-col h3 {
    font-size: 16px; /* UBAH: Sedikit lebih kecil */
    margin-bottom: 20px;
    /* UBAH: Warna teks jadi hitam/gelap */
    color: var(--warna-teks); 
    font-weight: bold;
}

.footer-col p {
    margin-bottom: 10px;
    line-height: 1.7;
    /* UBAH: Warna teks */
    color: var(--warna-abu-teks); 
}

.footer-col a {
    display: block;
    margin-bottom: 10px; /* UBAH: Jarak antar link */
    /* UBAH: Warna link */
    color: var(--warna-abu-teks); 
    transition: all 0.2s ease; /* TAMBAH: Animasi hover */
}

.footer-col a:hover {
    /* UBAH: Warna hover */
    color: var(--warna-biru); 
    transform: translateX(3px); /* TAMBAH: Animasi hover */
}

.footer-bottom {
    /* UBAH: Warna border dan teks */
    border-top: 1px solid var(--warna-abu-border); 
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
    color: var(--warna-abu-teks); 
}
/* === TAMBAHAN BARU: Footer Logo & Ikon === */
.footer-logo-col img {
    height: 80px; /* Sesuaikan ukuran logo di footer */
    width: auto;
}

.footer-social-icons {
    display: flex;
    flex-wrap: wrap; /* Jika ikon terlalu banyak */
    gap: 15px; /* Jarak antar ikon */
}

.footer-social-icons a {
    display: block;
    margin-bottom: 0; /* Hapus margin-bottom dari .footer-col a */
}

.footer-social-icons a:hover {
    transform: scale(1.1) translateY(-2px); /* Animasi hover ikon */
}

.footer-social-icons img {
    height: 28px; /* Ukuran ikon sosial */
    width: 28px;
    object-fit: contain;
}

/* === Media Queries (Contoh Responsif) === */

/* Untuk Tablet */
@media (max-width: 992px) {
    .header-search { display: none; } /* Sembunyikan search bar */
    .kategori-container { grid-template-columns: repeat(3, 1fr); } /* 3 kolom */
    .hero-slider .slide { flex-direction: column; }
    .hero-slider .slide-caption { width: 100%; text-align: center; }
    .btn-slider { align-self: center; }
    .footer-container { grid-template-columns: 1fr 1fr 1fr; }
}

/* Untuk Mobile */
@media (max-width: 768px) {
    .main-nav ul { display: none; } /* Sembunyikan nav utama, butuh JS untuk menu burger */
    .main-nav .nav-auth { display: none; }
    .header-icons { gap: 15px; }
    .header-icons a { font-size: 18px; }
    .logo { margin-left: 10px; }
    .logo img { height: 30px; }
    /* === TAMBAHKAN 2 BARIS INI === */
    .header-left { gap: 15px; } /* Kurangi jarak hamburger & logo di HP */
    .header-icons { gap: 10px; } /* Kurangi jarak ikon di HP */
    .kategori-container { grid-template-columns: repeat(2, 1fr); } /* 2 kolom */
    /* UBAH BARIS INI: Footer jadi 1 kolom di HP */
    .footer-container { grid-template-columns: 1fr; }

        /* --- TAMBAHAN: Perbaiki navbar agar tidak overflow di HP --- */
    /* --- Navbar responsif (mengikuti style di header.php) --- */
.main-header {
    padding: 10px 3%;
}
.header-container {
    flex-wrap: wrap;
}
.main-nav {
    width: 100%;
    background-color: #ffffff !important; /* Samakan dengan header.php */
    text-align: center;
    overflow-x: auto;
    white-space: nowrap;
}
.main-nav a {
    display: inline-block;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--warna-teks) !important;
}

    
    /* TAMBAH: Agar logo di HP tidak terlalu besar */
    .footer-logo-col {
        margin-bottom: 20px;
    }
    .footer-logo-col img {
        height: 40px; /* Kecilkan logo di HP */
        margin-left: 0; /* Hilangkan margin kiri di HP */
    }
}

/* === TAMBAHAN BARU: Sidebar Mobile === */
.mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px; /* Lebar sidebar */
    height: 100%;
    background-color: #fdfdfd; /* Latar putih bersih */
    z-index: 2000;
    transform: translateX(-100%); /* Sembunyi di kiri */
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.mobile-sidebar.active {
    transform: translateX(0); /* Muncul */
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 1px solid var(--warna-abu-border);
}
.sidebar-header .logo img {
    filter: none; /* Logo di sidebar berwarna (tidak putih) */
    height: 30px;
}
.sidebar-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--warna-teks);
    cursor: pointer;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Penuhi sisa ruang */
    padding: 20px 25px;
}
.sidebar-nav a {
    color: var(--warna-teks);
    font-size: 18px;
    font-weight: bold;
    padding: 18px 0;
}
.sidebar-nav a.active {
    color: red; /* Warna merah untuk link yang AKTIF */
    background-color: #eeeeee; /* Latar merah muda tipis */
    padding-left: 10px; /* Sedikit geser ke kanan agar terlihat */
    border-radius: 5px;
}

.sidebar-footer {
    padding: 25px;
    border-top: 1px solid var(--warna-abu-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sidebar-login-btn {
    display: block;
    text-align: center;
    width: 100%;
    padding: 12px;
    background-color: var(--warna-putih);
    color: var(--warna-teks);
    font-weight: bold;
    border-radius: 25px;
    border: 1px solid var(--warna-abu-border);
    font-size: 16px;
}
.sidebar-lang-btn {
    width: 100%;
    padding: 12px;
    background-color: #efefef; /* Latar tombol bahasa abu-abu */
    border: none;
    color: var(--warna-teks);
    font-weight: bold;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
}
.sidebar-lang-btn i {
    margin-right: 8px;
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}
/* === STYLE TAMBAHAN SIDEBAR DINAMIS === */

/* 1. Scrollable Nav (Agar bisa discroll tapi header & footer tetap diam) */
.sidebar-nav.scrollable {
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox */
}
.sidebar-nav.scrollable::-webkit-scrollbar {
    width: 5px;
}
.sidebar-nav.scrollable::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

/* 2. Styling Dropdown/Accordion */
.sidebar-item-dropdown a.dropdown-toggle,
.sidebar-item-nested a.nested-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

/* Submenu Styling */
.sidebar-submenu, .nested-submenu {
    display: none; /* Wajib hidden di awal */
    list-style: none;
    padding: 5px 0;
    margin: 0;
    background-color: #fff; /* Warna latar sedikit beda */
    border-left: 3px solid #eee;
}
/* Pastikan submenu muncul saat kelas active ditambahkan */
.sidebar-submenu.active {
    display: block !important; /* Gunakan !important untuk menimpa display:none default */
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Indentasi Link Submenu */
.sidebar-submenu li a {
    display: block;
    width: 100%; /* Pastikan lebar penuh */
    padding: 12px 20px 12px 35px; /* Padding sedikit diperbesar agar mudah ditap jari */
    
    /* Typography */
    font-size: 15px;
    color: #555;
    text-decoration: none;
    font-weight: 400;
    
    /* === LOGIKA SWIPE/GESER (Murni CSS) === */
    white-space: nowrap;      /* Paksa satu baris */
    overflow-x: auto;         /* Izinkan geser kanan-kiri */
    overflow-y: hidden;       /* Kunci atas-bawah */
    
    /* === Sembunyikan Scrollbar (Agar terlihat clean) === */
    -webkit-overflow-scrolling: touch; /* Agar geseran di iOS smooth/licin */
    scrollbar-width: none;             /* Sembunyiin scrollbar di Firefox */
    -ms-overflow-style: none;          /* Sembunyiin scrollbar di IE/Edge */
    
    /* Garis indikator kiri (tetap ada) */
    border-left: 3px solid transparent;
    transition: background-color 0.2s, color 0.2s;
    
    /* Agar area klik nyaman */
    box-sizing: border-box; 
}
/* Trik Sembunyiin Scrollbar di Chrome/Safari/Android Webview */
.sidebar-submenu li a::-webkit-scrollbar {
    display: none; 
}

/* Efek saat diklik/disentuh (Active State) */
.sidebar-submenu li a:active, 
.sidebar-submenu li a:focus {
    background-color: #fcfcfc;
    color: #d32f2f;
    border-left: 3px solid #d32f2f;
}

/* Efek Hover Dasar (Warna & Garis Kiri) */
.sidebar-submenu li a:hover {
    background-color: #f9f9f9;
    color: #d32f2f; /* Merah Branding */
    border-left: 3px solid #d32f2f; /* Indikator garis merah di kiri */
}

/* === 2. KELAS KHUSUS ANIMASI (DITAMBAHKAN OLEH JS) === */
/* Kelas ini hanya akan muncul jika text KEPANJANGAN */
.sidebar-submenu li a.is-scrolling {
    text-overflow: clip; /* Hilangkan titik-titik (...) saat bergerak */
    
    /* Variabel --scroll-distance dan --scroll-duration dihitung oleh JS */
    text-indent: var(--scroll-distance); 
    transition: text-indent var(--scroll-duration) linear;
}
/* (Opsional) Perbaikan untuk Nested Submenu agar konsisten */
.nested-submenu li a {
    padding-left: 50px;
}
.nested-submenu li a:hover {
    padding-left: 60px;
}

/* Rotasi Panah */
.arrow-icon, .arrow-icon-small {
    transition: transform 0.3s;
}
.rotate-down {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    background-color: #f9f9f9; /* Abu sangat muda */
    border: 1px solid #ccc; /* Stroke pinggir */
    border-radius: 25px; /* Rounded bulat */
    width: 100%;
    box-sizing: border-box; /* Agar padding tidak merusak lebar */
}

/* Foto Profil (Bulat) */
.sidebar-user-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #aaa; /* Stroke tipis di foto */
    flex-shrink: 0; /* Agar foto tidak gepeng */
}
.sidebar-user-info .user-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; /* Wajib untuk ellipsis */
    flex-grow: 1;
}
.sidebar-user-info .user-details strong,
.sidebar-user-info .user-details span {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 170px; /* Batas lebar teks sebelum ... */
    line-height: 1.2;
}

.sidebar-user-info .user-details strong {
    font-size: 15px;
    color: #333;
    margin-bottom: 2px;
}

.sidebar-user-info .user-details span {
    font-size: 12px;
    color: #666;
}

/* Tombol Keluar */
.sidebar-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background-color: #efefef; /* Abu-abu seperti tombol Bahasa */
    color: #333; /* Teks Hitam/Gelap */
    font-weight: bold;
    border-radius: 25px; /* Rounded */
    border: 1px solid transparent;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s;
    box-sizing: border-box;
}
.sidebar-logout-btn i {
    margin-right: 8px; /* Jarak ikon keluar */
}

.sidebar-logout-btn:hover {
    background-color: #e0e0e0; /* Abu lebih gelap saat hover */
    border-color: #ccc;
}

/* === TAMBAHAN BARU: Pop-up Profil === */
.profile-popup {
    position: fixed;
    top: 65px; /* Jarak dari header */
    right: 5%; /* Sejajar dengan ikon di header */
    width: 300px;
    background-color: var(--warna-putih);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 1500;
    border: 1px solid var(--warna-abu-border);
    opacity: 0; /* Mulai dari tersembunyi */
    visibility: hidden;
    transform: translateY(10px); /* Efek turun sedikit */
    transition: all 0.2s ease-out;
}
.profile-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Kembali ke posisi normal */
}

.profile-popup-header {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--warna-abu-latar);
}
.profile-popup-img {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Bulat */
    margin-right: 15px;
    object-fit: cover;
}
.profile-popup-user {
    display: flex;
    flex-direction: column;
}
.profile-popup-user strong {
    font-size: 16px;
    color: var(--warna-teks);
}
.profile-popup-user small {
    font-size: 14px;
    color: var(--warna-abu-teks);
}

.profile-popup-actions {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.profile-popup-actions button,
.profile-popup-actions a {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--warna-abu-border);
    background-color: #efefef; /* Tombol abu-abu */
    color: var(--warna-teks);
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
}
.profile-popup-actions a.btn-keluar {
    background-color: var(--warna-putih);
    border-color: var(--warna-abu-border);
    color: var(--warna-teks);
}

/* === UBAH: Media Query (max-width: 992px) === */
@media (max-width: 992px) {
    .header-search { display: none; } 
    .kategori-container { grid-template-columns: repeat(3, 1fr); }
    .hero-slider .slide { flex-direction: column; }
    .hero-slider .slide-caption { width: 100%; text-align: center; }
    .btn-slider { align-self: center; }
    .footer-container { grid-template-columns: 1fr 1fr; }
    .main-nav { display: none; } /* UBAH: Sembunyikan nav desktop */
    .mobile-menu-btn { display: block; } /* UBAH: Tampilkan hamburger */
}

/* === UBAH: Media Query (max-width: 768px) === */
@media (max-width: 768px) {
    .main-nav ul { display: none; }
    .main-nav .nav-auth { display: none; }
    .mobile-menu-btn { display: block; }
    .header-icons { gap: 15px; }
    .header-icons a { font-size: 18px; }
    .logo { margin-left: 10px; }
    .logo img { height: 30px; }
    
    .kategori-container { grid-template-columns: repeat(2, 1fr); }
    .footer-container { grid-template-columns: 1fr; }

    /* TAMBAH: Pop-up di HP */
    .profile-popup {
        width: 85%; 
        right: 7.5%;
    }
}
/* TAMBAHKAN INI: Media query baru untuk layar sangat kecil (Android/device kecil) */
@media (max-width: 480px) {
    .profile-popup {
        width: 75%; /* UBAH dari 80% → 75% agar lebih pas di layar HP kecil */
        right: 12%; /* UBAH dari 10% → 12% agar posisinya lebih ke tengah */
        top: 70px; /* Tambah sedikit jarak dari header */
    }
    .profile-popup-actions button,
    .profile-popup-actions a {
        font-size: 13px;
        padding: 8px;
    }
    .profile-popup-user strong {
        font-size: 14px;
    }
}
/* === TAMBAHAN ANIMASI UNTUK SIDEBAR & POP-UP === */

/* Tombol di Sidebar */
.sidebar-close-btn,
.sidebar-login-btn,
.sidebar-lang-btn {
    transition: all 0.3s ease;
}
.sidebar-close-btn:hover {
    transform: rotate(90deg); /* Tombol X berputar */
}
.sidebar-login-btn:hover,
.sidebar-lang-btn:hover {
    opacity: 0.8;
    transform: scale(1.02);
}

/* Link Navigasi di Sidebar */
.sidebar-nav a {
    transition: all 0.2s ease;
}
.sidebar-nav a:hover {
    background-color: var(--warna-abu-latar);
    transform: translateX(5px); /* Bergeser ke kanan */
}

/* Tombol di Pop-up Profil */
.profile-popup-actions button,
.profile-popup-actions a {
    transition: all 0.3s ease;
}
.profile-popup-actions button:hover,
.profile-popup-actions a:hover {
    opacity: 0.8;
    transform: scale(1.02);
}
/* === TAMBAHAN BARU: Halaman Tentang Kami === */

.page-container {
    max-width: 1600px; /* Batasi lebar kontainer halaman */
    margin: 0 auto;
    padding: 30px 5%;
}

.about-title {
    font-size: 36px;
    font-weight: bold;
    color: var(--warna-teks);
    margin-bottom: 30px;
}
/* SOLUSI BARU DENGAN ASPECT-RATIO 4:3 (Horizontal) */
#trigger-popup-gambar {
    display: block;
    width: 100%;
    max-width: 600px; /* Tingkatkan max-width untuk desktop agar lebih terlihat jelas */
    /* Ganti 450px menjadi 600px atau sesuai keinginan */
    margin-left: auto;
    margin-right: auto;
    
    /* GANTI padding-bottom HACK DENGAN ASPECT-RATIO */
    aspect-ratio: 4 / 3; /* Rasio 4 (lebar) berbanding 3 (tinggi) */
    
    position: relative; 
    border-radius: 12px;
    margin-bottom: 40px;
    overflow: hidden; 
    cursor: zoom-in;
    transition: opacity 0.3s ease;
    background-color: #eee; 
}

/* Biarkan ini tetap seperti ini, ini yang membuat gambar mengisi kotak 4:3 */
.about-main-image {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center; 
}

/* Jika Anda ingin efek hover tetap ada */
#trigger-popup-gambar:hover {
    opacity: 0.8;
}

.about-grid {
    display: grid;
    /* 3 kolom dengan lebar yang sama */
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px; /* Jarak antar kolom */
}

.about-col h3 {
    font-size: 22px;
    font-weight: bold;
    color: var(--warna-teks);
    margin-bottom: 15px;
}

.about-col p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--warna-abu-teks);
    margin-bottom: 20px;
}

.about-col .small-text {
    font-size: 14px;
    font-style: italic;
    color: #888;
}

.map-embed iframe {
    width: 100%;
    height: 250px;
    border: none;
    border-radius: 8px;
    filter: grayscale(80%); /* Buat peta jadi agak abu-abu */
    transition: filter 0.3s ease;
}

.map-embed iframe:hover {
    filter: grayscale(0%); /* Warna normal saat di-hover */
}
.about-description {
    position: relative;
    width: fit-content; 
    max-width: 800px;
    margin: 40px auto 60px auto;
    
    /* Tampilan Normal (Diam) - Netral */
    background-color: #f9f9f9;
    padding: 30px 40px;
    border-radius: 8px;
    
    /* Garis Kiri: Awalnya Abu-abu Gelap */
    border-left: 4px solid #555; 
    
    /* Teks */
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    font-style: normal;
    
    /* Bayangan Awal: Tipis & Hitam */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    
    /* PENTING: Tambahkan 'border-left-color' ke transisi agar warnanya berubah pelan (smooth) */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s ease;
}

/* === EFEK SAAT MOUSE ENTERED (HOVER) === */
.about-description:hover {
    /* 1. Kartu Naik Sedikit */
    transform: translateY(-5px);
    
    /* 2. Garis Kiri Berubah Jadi BIRU */
    border-left-color: #0d6efd; /* Warna Biru Utama (Bisa ganti var(--warna-biru)) */
    
    /* 3. Bayangan Berubah Jadi BIRU MUDA (Glowing Effect) */
    /* Format: x y blur spread color */
    box-shadow: 0 15px 30px rgba(13, 110, 253, 0.2); 
}

/* Ikon Petik (Tetap Abu-abu agar tidak mengganggu fokus) */
.about-description::before {
    content: '“';
    display: block;
    font-size: 40px;
    line-height: 1;
    color: #ccc;
    margin-bottom: 10px;
}

/* Responsif untuk Halaman Tentang Kami */
@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr 1fr; /* 2 kolom di tablet */
    }
}

@media (max-width: 768px) {
    .about-title {
        font-size: 28px;
    }
    .about-grid {
        grid-template-columns: 1fr; /* 1 kolom di HP */
        gap: 30px;
    }
    .about-description {
        width: 90%; /* Di HP jangan fit-content, tapi penuhi layar */
        padding: 20px;
        text-align: center;
    }
}
/* === TAMBAHAN BARU: Animasi Teks di Halaman "Tentang Kami" === */

/* (1) Atur transisi (animasi mouse out) */
.about-col h3,
.about-col p {
    /* 'all' mencakup 'color' dan 'transform' */
    transition: all 0.3s ease-out; 
}

/* (2) Atur hover (animasi mouse in) saat KOTAK-nya di-hover */
.about-col:hover h3 {
    color: var(--warna-biru); /* Ubah warna h3 jadi biru */
}

.about-col:hover p {
    color: var(--warna-biru); /* Ubah warna p jadi biru */
    transform: translateX(3px); /* Geser 3px ke kanan (seperti footer) */
}
/* === TAMBAHAN BARU: CSS untuk Popup Gambar (Lightbox) === */

/* (1) Gambar trigger (yang di halaman) */
.about-main-image {
    cursor: zoom-in; /* Ubah kursor jadi kaca pembesar */
    transition: opacity 0.3s ease;
}
.about-main-image:hover {
    opacity: 0.8; /* Sedikit pudar saat di-hover */
}

/* (2) Latar belakang overlay */
.image-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Latar hitam transparan */
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}
.image-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* (3) Kontainer popup */
.image-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7); /* Mulai dari kecil */
    z-index: 2001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}
.image-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1); /* Jadi ukuran normal */
}

/* (4) Gambar di dalam popup */
.image-popup-content {
    max-width: 90vw;  /* Lebar maks 90% lebar layar */
    max-height: 90vh; /* Tinggi maks 90% tinggi layar */
    width: auto;
    height: auto;
    display: block;
    border-radius: 5px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

/* (5) Tombol Close (X) */
.image-popup-close {
    position: absolute;
    top: -10px; /* Posisikan di atas gambar */
    right: 0px;
    font-size: 40px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    z-index: 2002;
    transition: all 0.2s ease;
    text-shadow: 0 0 5px rgba(0,0,0,0.7);
}
.image-popup-close:hover {
    color: #ccc;
}
/* === TAMBAHAN BARU: Halaman Blog & Detail Berita === */

.page-title {
    font-size: 36px;
    font-weight: bold;
    color: var(--warna-teks);
    margin-bottom: 30px;
}
/* === TAMBAHKAN BLOK INI === */
@media (max-width: 768px) {
    .page-title {
        font-size: 28px; /* Kecilkan semua judul halaman di HP */
        margin-bottom: 20px;
    }
}

/* (1) Layout Halaman Blog */
.blog-grid {
    display: grid;
    /* 2 kolom seperti di gambar */
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px;
}

.blog-card {
    background-color: var(--warna-putih);
    
    /* 1. LOGIKA "ROUNDED" & "TIDAK MEPET" */
    border-radius: 12px; /* Membuat sudut rounded */
    padding: 25px;       /* Memberi jarak di semua sisi (tidak mepet) */
    
    /* 2. LOGIKA "ANIMASI EXITED" (Persiapan) */
    /* Bayangan awal yang tipis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); 
    /* Transisi mulus untuk semua properti */
    transition: all 0.3s ease-out;
}
.blog-card:hover {
    /* Timbul ke atas */
    transform: translateY(-8px); 
    /* Bayangan menjadi lebih tebal dan gelap */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 
}

.blog-card h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.blog-card h2 a {
    color: var(--warna-teks);
    transition: color 0.3s ease;
}
.blog-card h2 a:hover {
    color: var(--warna-biru);
}

.blog-card p {
    font-size: 16px;
    color: var(--warna-abu-teks);
    line-height: 1.6;
    margin-bottom: 15px;
}

.read-more-link {
    color: #009688; /* Warna hijau toska seperti di gambar */
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s ease;
}
.read-more-link:hover {
    color: #005a52;
    transform: translateX(3px);
}

.blog-meta {
    font-size: 13px;
    color: #999;
    margin-top: 20px;
}

/* (2) Pointer "Next" (Paginasi) */
.pagination {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    border-top: 1px solid var(--warna-abu-border);
    padding-top: 20px;
}
.page-nav {
    font-weight: bold;
    color: var(--warna-biru);
    transition: all 0.2s ease;
}
.page-nav:hover {
    color: var(--warna-biru-gelap);
    transform: scale(1.05);
}

/* (3) Halaman Detail Berita */
.blog-detail-container {
    max-width: 800px; /* Batasi lebar tulisan agar mudah dibaca */
    margin: 0 auto; /* Posisikan di tengah */
    background-color: var(--warna-putih);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.blog-detail-title {
    font-size: 32px;
    margin-bottom: 10px;
    line-height: 1.3;
}

.blog-detail-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 25px 0;
}

.blog-detail-content {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
}
.blog-detail-content p {
    margin-bottom: 20px;
}
/* === TAMBAHAN BARU: Tombol Kembali di Detail Blog === */

.blog-back-button {
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    color: var(--warna-biru);
    margin-bottom: 25px; /* Jarak ke judul */
    transition: all 0.2s ease-out;
}

.blog-back-button:hover {
    color: var(--warna-biru-gelap);
    transform: translateX(-5px); /* Animasi geser ke kiri */
}

/* Responsif untuk Halaman Blog (Mobile / Android) */
@media (max-width: 768px) {
    /* 1. Mengatur Container Utama agar tidak mepet layar */
    .page-container {
        padding: 0 20px; /* Memberi "napas" di kiri dan kanan layar */
    }

    .page-title {
        font-size: 26px; 
        margin-bottom: 20px;
        text-align: left; /* Judul lebih rapi di tengah */
    }

    /* 2. Grid Blog di HP */
    .blog-grid {
        grid-template-columns: 1fr; /* Tetap 1 kolom agar terbaca jelas */
        gap: 20px; /* Jarak antar kartu diperkecil (sebelumnya 40px) */
    }

    /* 3. Desain Kartu "Sedang" & Profesional */
    .blog-card {
        padding: 20px; /* Padding dalam diperkecil (Desktop 25px -> HP 20px) */
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Bayangan lebih halus */
    }

    /* Judul Artikel */
    .blog-card h2 {
        font-size: 20px; /* Ukuran font judul pas untuk HP */
        line-height: 1.4;
        margin-bottom: 8px;
    }

    /* 4. PEMBATAS TEKS (PENTING AGAR KARTU TIDAK KEPANJANGAN) */
    .blog-card p {
        font-size: 14px;
        color: var(--warna-abu-teks);
        line-height: 1.5;
        margin-bottom: 15px;

        /* Fitur ini memotong teks jadi 3 baris lalu diberi titik-titik (...) */
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Maksimal 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Tombol Read More & Tanggal */
    .read-more-link {
        font-size: 13px;
    }
    .blog-meta {
        margin-top: 15px;
        font-size: 12px;
    }

    /* Detail Blog (Opsional) */
    .blog-detail-container {
        padding: 20px;
        margin: 0; /* Pastikan tidak ada margin aneh */
    }
    .blog-detail-title {
        font-size: 24px;
    }
}

/* === TAMBAHAN BARU: Mega Menu Produk === */

/* (1) Wadah <li> untuk Produk */
.nav-produk-container {
    position: static;
}

/* (2) Popup Mega Menu */
.mega-menu-popup {
    position: absolute;
    top: 65px;
    left: 0;
    width: 100%;
    background-color: #f8f8f8; 
    border-bottom: 1px solid var(--warna-abu-border);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    z-index: 998; 
    padding: 20px 5%; /* Sedikit tambah padding */
    
    /* [PERUBAHAN 3] Tambahkan Scrollbar Vertikal */
    height: auto;
    max-height: 450px; /* Batas tinggi popup */
    overflow-y: auto;  /* Munculkan scroll jika konten panjang */
    overflow-x: hidden;
    
    visibility: hidden;
    opacity: 0;
    transform: translateY(-20px); 
    transition: all 0.3s ease-out;
}
/* Kustomisasi Scrollbar agar terlihat manis (Opsional, Webkit only) */
.mega-menu-popup::-webkit-scrollbar {
    width: 8px;
}
.mega-menu-popup::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}
.mega-menu-popup::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* (3) Status Aktif (Dipicu oleh JS) */
.mega-menu-popup.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); 
}

/* (4) Grid di dalam Menu (5 kolom) */
.mega-menu-grid {
    display: block; /* Matikan display: grid lama */
    column-count: 5; /* Bagi menjadi 5 kolom koran */
    column-gap: 30px; /* Jarak antar kolom */
    max-width: 1600px; 
    margin: 0 auto;
    padding-right: 20px; 
}
.mega-menu-col {
    position: relative;  /* Wajib ada agar z-index berfungsi */
    z-index: 2;          /* Layer lebih tinggi dari logo (0) */
    /* Agar kategori tidak terpotong di tengah-tengah kolom */
    break-inside: avoid; 
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    
    display: inline-block; /* Penting agar rapi di mode column */
    width: 100%;
    margin-bottom: 25px; /* Jarak ke bawah antar kategori */
    vertical-align: top;
}

.mega-menu-col h3 {
    font-size: 14px; /* Sedikit diperjelas */
    font-weight: bold;
    text-transform: uppercase; 
    margin-bottom: 12px; 
    padding-bottom: 8px; 
    border-bottom: 2px solid #eee; /* Border sedikit lebih tebal */
    letter-spacing: 0.5px; 
}

/* (5) LOGIKA WARNA BARU: Link Judul Kategori */
.mega-menu-col h3 a {
    color: var(--warna-teks); /* UBAH: Jadi abu-abu gelap/hitam */
    text-decoration: none;
    transition: color 0.2s ease;
}
.mega-menu-col h3 a:hover {
    color: var(--warna-biru); /* Tetap biru saat di-hover */
}

.mega-menu-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    width: auto;
}

.mega-menu-col ul li {
    margin-bottom: 4px; 
}

.mega-menu-col ul li a {
    color: var(--warna-abu-teks);
    font-size: 12px; 
    font-weight: normal;
    line-height: 1.2; /* tambahan penting biar antar teks makin rapat */
    padding: 1px 0;  /* jarak atas bawah super tipis */
    border: none; 
    transition: all 0.2s ease;
}

.mega-menu-col ul li a:hover {
    color: var(--warna-biru);
    transform: translateX(5px); 
}

/* (6) Logo di Pojok Kanan Bawah */
.mega-menu-logo {
            position: absolute;
            bottom: 10px;        /* Jarak dari bawah */
            right: 20px;         /* Jarak dari kanan */
            opacity: 0.1;        /* PENTING: Buat sangat transparan (0.1 - 0.2) */
            z-index: 0;          /* PENTING: Taruh di layer paling bawah */
            pointer-events: none; /* Agar klik tembus ke teks di belakangnya */
            max-width: 250px;    /* Batasi ukuran agar tidak terlalu raksasa */
        }
.mega-menu-logo img {
            width: 100%;         /* Mengikuti max-width container */
            height: auto;
            display: block;
        }
/* (7) Responsif Mega Menu */
@media (max-width: 992px) {
    .mega-menu-popup {
        display: none;
    }
}
/* === CUSTOMER SERVICE PAGE STYLES === */

/* 1. Hero Banner Full Width (Breakout) */
.cs-hero-banner {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 350px; /* Tinggi banner di Desktop */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.cs-hero-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Overlay gelap */
    padding: 30px 50px;
    text-align: center;
    color: white;
    border-radius: 8px;
    backdrop-filter: blur(2px);
}

.cs-hero-overlay h1 {
    font-size: 36px;
    font-weight: bold;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cs-hero-overlay p {
    font-size: 18px;
    margin: 0;
}

/* 2. Form Wrapper (Mirip Informa) */
.cs-form-wrapper {
    max-width: 800px;
    margin: -50px auto 60px auto; /* Margin-top negatif agar naik sedikit ke banner (Efek Mengambang) */
    background: #ffffff;
    
    /* PERBAIKAN UTAMA DISINI: */
    padding: 40px; /* Memberi jarak agar isi tidak dempet ke pinggir */
    border-radius: 15px; /* Membuat sudut tumpul agar lebih modern */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Memberi efek bayangan agar terlihat 'Pop Up' */
    
    position: relative; /* Agar z-index berfungsi */
    z-index: 10; /* Agar card muncul di atas banner */
}
.cs-form-header {
    text-align: center;
    margin-bottom: 30px;
}
.cs-form-header h2 {
    font-size: 28px;
    font-weight: bold;
    color: var(--warna-teks);
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}
.cs-form-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #f7da46; /* Garis kuning khas Hulwa */
    margin: 10px auto 0 auto;
}
.cs-form-header p {
    color: var(--warna-abu-teks);
    max-width: 600px;
    margin: 0 auto;
}

/* 3. Form Inputs */
.cs-form-group {
    margin-bottom: 20px;
}
.cs-form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
}
.cs-form-group .form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px; /* Sedikit rounded */
    font-size: 14px;
    background-color: #fcfcfc;
    transition: border-color 0.3s;
}
.cs-form-group .form-control:focus {
    border-color: var(--warna-biru);
    background-color: #fff;
    outline: none;
}

/* Grid untuk Telp & Email (Desktop: Sebelahan) */
.cs-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* 4. Buttons */
.cs-form-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    justify-content: flex-end; /* Tombol di kanan */
}

.btn-cs-submit {
    background-color: var(--warna-biru);
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
    flex: 1; /* Biar seimbang di HP */
}
.btn-cs-submit:hover {
    background-color: var(--warna-biru-gelap);
}

.btn-cs-wa {
    background-color: #25D366; /* Warna WA */
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
    flex: 1;
}
.btn-cs-wa:hover {
    background-color: #1ebc57;
}

/* 5. Responsive Styles (HP) */
@media (max-width: 768px) {
    /* Banner lebih pendek di HP */
    .cs-hero-banner {
        height: 200px; 
    }
    .cs-hero-overlay {
        padding: 15px 20px;
        width: 90%;
    }
    .cs-hero-overlay h1 { font-size: 22px; }
    .cs-hero-overlay p { font-size: 13px; }

    /* Form jadi 1 kolom */
    .cs-form-row {
        grid-template-columns: 1fr; 
        gap: 0;
    }
    
    /* Tombol jadi atas bawah */
    .cs-form-actions {
        flex-direction: column;
    }
    .cs-form-wrapper {
        width: 90%; /* Agar ada sisa jarak kanan kiri di layar HP */
        padding: 25px; /* Padding lebih kecil di HP */
        margin-top: -30px; /* Naik sedikit saja di HP */
    }
}
/* === TAMBAHAN BARU: Halaman Produk === */

/* (1) Filter Bar (Atas & Bawah) */
.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--warna-abu-border);
    margin-bottom: 30px;
    flex-wrap: wrap; /* Agar responsif di HP */
    gap: 20px;
}
.filter-left {
    display: flex;
    align-items: center;
    gap: 15px;
}
.filter-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.dropdown-sort, .btn-saring {
    padding: 10px 15px;
    border: 1px solid var(--warna-abu-border);
    border-radius: 8px;
    background-color: var(--warna-putih);
    font-size: 14px;
    cursor: pointer;
}
.btn-saring {
    color: var(--warna-teks);
}
.btn-saring i {
    margin-right: 5px;
}
.product-count {
    font-size: 14px;
    color: var(--warna-abu-teks);
}
.filter-bar.bottom-pagination {
    border-top: 1px solid var(--warna-abu-border);
    border-bottom: none;
    margin-top: 30px;
    margin-bottom: 0;
}

/* (2) Paginasi (Pointer) */
.pagination-container {
    display: flex;
    align-items: center;
    gap: 5px;
}
.pagination-container a,
.pagination-container span {
    display: inline-block;
    padding: 8px 12px;
    min-width: 38px;
    text-align: center;
    border: 1px solid var(--warna-abu-border);
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    color: var(--warna-teks);
    transition: all 0.2s ease;
}
.pagination-container a.page-nav { /* Tombol < dan > */
    font-weight: bold;
}
.pagination-container a:hover {
    background-color: var(--warna-abu-latar);
    border-color: #aaa;
}
.pagination-container a.active {
    background-color: var(--warna-teks);
    color: var(--warna-putih);
    border-color: var(--warna-teks);
    cursor: default;
}
.pagination-container span.page-dots {
    border: none;
    padding: 8px 0;
}

/* (3) Product Grid (4 Kolom) */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.product-card {
    background-color: var(--warna-putih);
    border: 1px solid var(--warna-abu-border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease-out;
    display: flex;
    flex-direction: column;
    position: relative;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.product-image-link {
    display: block;
    background-color: #f9f9f9;
    padding: 0;
}
.product-image-link img {
    width: 100%;
    aspect-ratio: 1 / 1;/* Samakan tinggi gambar */
    object-fit: cover; /* Agar gambar tidak gepeng */
    display: block;
    border-top-left-radius: 8px; /* Ikuti radius dari .product-card */
    border-top-right-radius: 8px;
}
.product-info {
    padding: 20px;
    flex-grow: 1; /* Dorong harga ke bawah */
    display: flex;
    flex-direction: column;
}
.badge-baru {
    font-size: 12px;
    font-weight: bold;
    color: red;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.product-name {
    font-size: 18px;
    font-weight: bold;
    color: var(--warna-teks);
    margin-bottom: 5px;
}
.product-desc {
    font-size: 14px;
    color: var(--warna-abu-teks);
    margin-bottom: 15px;
    flex-grow: 1; /* Dorong harga ke bawah */
}
.price-tag {
    background-color: #fff100; /* Warna kuning stabilo */
    color: #000;
    font-weight: bold;
    font-size: 16px;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block; /* Agar pas dengan teks */
    align-self: flex-start; /* Posisikan di kiri */
}
/* === TAMPILAN PROFESIONAL IKEA STYLE (MOBILE) + HARGA KOTAK KUNING === */
@media (max-width: 768px) {
    
    /* 1. Atur Container Halaman agar lebih lebar (Hampir Full Layar) */
    .page-container {
        padding: 0 10px; /* Padding kiri-kanan tipis saja (10px) */
    }

    /* 2. Grid Produk: Rapat dan Besar */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Tetap 2 Kolom */
        gap: 12px; /* Jarak antar kartu dirapatkan */
        row-gap: 25px; /* Jarak vertikal sedikit lebih lega */
    }

    /* 3. Kartu Produk: Bersih Tanpa Border */
    .product-card {
        border: none; /* HILANGKAN GARIS BATAS */
        border-radius: 0; /* Hilangkan radius kartu agar clean */
        box-shadow: none; /* Hilangkan bayangan kotak */
        background-color: transparent; /* Background menyatu dengan halaman */
        
        /* Relatif agar tombol cart bisa diposisikan absolut */
        position: relative; 
        display: flex;
        flex-direction: column;
        height: auto;
    }

    /* 4. Gambar Produk: Besar & Dominan */
    .product-image-link img {
        border-radius: 12px; /* Radius pada gambar saja, bukan kartunya */
        aspect-ratio: 1 / 1; /* Kotak Persegi Presisi */
        object-fit: cover;
        width: 100%;
        background-color: #f5f5f5; /* Placeholder warna abu muda */
    }

    /* 5. Info Produk: Padding Minimalis */
    .product-info {
        padding: 10px 0 0 0; /* Hanya padding atas, kiri kanan 0 */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* 6. Typography (Judul & Deskripsi) */
    .product-name {
        font-size: 15px; /* Sedikit lebih besar */
        font-weight: 700;
        margin-bottom: 4px;
        line-height: 1.3;
        color: #111; /* Warna hitam pekat */
        
        /* Batasi 2 baris agar rapi (IKEA style) */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal; /* Izinkan wrap */
        height: auto;
    }

    .product-desc {
        font-size: 12px;
        color: #767676; /* Abu-abu IKEA */
        margin-bottom: 8px;
        
        /* Batasi 1 baris */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 7. Harga: KEMBALI KE KOTAK KUNING */
    .price-tag {
        font-size: 14px; /* Sedikit disesuaikan untuk mobile */
        font-weight: 800;
        color: #000;

        /* STYLE KOTAK KUNING DIAKTIFKAN KEMBALI DI SINI */
        background-color: #fff100; /* Kuning Stabilo */
        padding: 4px 8px; /* Padding proporsional di HP */
        border-radius: 4px; /* Sudut sedikit rounded */
        display: inline-block; /* Agar kotak mengikuti panjang teks harga */
        align-self: flex-start; /* Pastikan rata kiri */
        margin-top: auto; /* Dorong ke bawah jika ada ruang sisa */
    }

    /* 8. Tombol Cart: Bulat Biru (Floating di atas gambar) */
    .product-card-cart-btn {
        position: absolute;
        /* Sesuaikan 'top' ini dengan tinggi rata-rata gambar di HP Anda agar pas di pojok */
        top: 155px; 
        right: 8px;
        
        width: 36px;
        height: 36px;
        border-radius: 50%; /* Bulat Sempurna */
        
        background-color: #0058a3; /* Biru IKEA */
        color: white;
        border: none;
        
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        z-index: 10;
        cursor: pointer;
    }
    /* === 10. RE-DESIGN FILTER BAR (MOBILE - COMPACT & PRO) === */
    
    /* Container Filter Bar Atas */
    .filter-bar {
        padding: 10px 0; /* Perkecil padding atas-bawah */
        margin-bottom: 15px; /* Kurangi jarak ke produk */
        border-bottom: 1px solid #eee; /* Garis lebih tipis */
        gap: 10px;
    }

    /* Sembunyikan "Jumlah Produk" di atas agar tidak semak */
    .filter-bar:not(.bottom-pagination) .filter-right {
        display: none; 
    }

    /* Atur Bagian Kiri (Sort & Filter) agar Full Width & Sejajar */
    .filter-left {
        width: 100%;
        display: flex;
        gap: 8px; /* Jarak antar tombol */
    }

    /* Form pembungkus Select (Urutkan) */
    #sort-form {
        flex: 1; /* Ambil sisa ruang yang ada (Auto Width) */
    }

    /* Dropdown "Urutkan" - Tampilan Modern Pill/Kotak */
    .dropdown-sort {
        width: 100%;
        height: 40px; /* Tinggi fix yang pas di jempol */
        font-size: 13px; /* Font tidak terlalu besar */
        padding: 0 10px;
        border: 1px solid #ddd;
        border-radius: 6px; /* Sudut halus */
        background-color: #fff;
        color: #333;
        appearance: none; /* Hilangkan panah bawaan browser jelek */
        /* Tambahkan icon panah custom via CSS (Opsional, simple background) */
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 10px;
    }

    /* Tombol "Saring" - Tampilan Modern */
    .btn-saring {
        height: 40px; /* Samakan tinggi dengan dropdown */
        padding: 0 15px;
        font-size: 13px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background-color: #f9f9f9;
        color: #333;
        white-space: nowrap; /* Teks tidak turun baris */
        display: flex;
        align-items: center;
        gap: 5px;
    }

    /* === 11. RE-DESIGN PAGINATION (POINTER) (MOBILE) === */
    
    /* Container Paginasi Bawah */
    .filter-bar.bottom-pagination {
        border-top: none; /* Hilangkan garis atas */
        margin-top: 20px;
        justify-content: center; /* Posisikan di tengah layar */
        padding-bottom: 30px; /* Jarak bawah agar tidak mepet footer HP */
    }

    /* Pastikan container kanan muncul di bawah (untuk paginasi) */
    .filter-bar.bottom-pagination .filter-right {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    /* Tombol Angka & Panah */
    .pagination-container {
        gap: 6px; /* Jarak antar kotak angka */
    }

    .pagination-container a, 
    .pagination-container span {
        min-width: 36px; /* Lebar kotak lebih kecil (sebelumnya 38px/auto) */
        height: 36px;    /* Tinggi kotak */
        padding: 0;      /* Reset padding */
        
        display: flex;   /* Gunakan Flexbox untuk menengahkan angka */
        align-items: center;
        justify-content: center;
        
        font-size: 14px;
        border-radius: 50%; /* Ubah jadi BULAT (Circle) agar lebih modern */
        border: 1px solid transparent; /* Hilangkan border default */
        background-color: #f5f5f5; /* Abu-abu sangat muda */
        color: #555;
    }

    /* Tombol Aktif */
    .pagination-container a.active {
        background-color: #000; /* Hitam (Professional/Minimalist) */
        color: #fff;
        font-weight: bold;
    }

    /* Tombol Panah (Next/Prev) */
    .pagination-container a.page-nav {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 6px; /* Panah tetap kotak rounded, bukan bulat */
        width: auto;
        padding: 0 12px;
        font-weight: normal;
    }
    
    /* Media query mini untuk layar HP yang sangat kecil (iPhone SE lama dll) */
    @media (max-width: 380px) {
        .product-card-cart-btn {
            top: 135px; /* Tombol cart naik sedikit menyesuaikan gambar yg mengecil */
        }
        .product-name { font-size: 14px; }
    }
    
    .product-card-cart-btn i {
        font-size: 16px;
    }

    /* 9. Badge Baru */
    .badge-baru {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 5;
        background-color: #cc0000; /* Merah */
        color: white;
        padding: 2px 6px;
        font-size: 10px;
        border-radius: 4px;
        font-weight: bold;
    }
}
/* =========================================
   1. EFEK HOVER GAMBAR PRODUK (SWAP IMAGE)
   ========================================= */
.product-image-link {
    position: relative;
    display: block;
    overflow: hidden;
}

/* Gambar Utama (Default) */
.product-image-link .img-main {
    transition: opacity 0.4s ease-in-out;
    opacity: 1;
    position: relative;
    z-index: 2;
}
.product-card:active {
    transform: scale(0.98); 
}

/* Gambar Hover (Awalnya Sembunyi) */
.product-image-link .img-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.4s ease-in-out;
    /* Pastikan radius sama dengan gambar utama */
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px;
}

/* =========================================
   FIX ANIMASI GAMBAR (Desktop & Mobile) - SUPPORT SLIDER SERUPA
   ========================================= */

/* Gambar Utama: Hilang saat hover */
.product-card:hover .product-image-link .img-main,
.serupa-card:hover .product-image-link .img-main, /* <--- TAMBAHAN UNTUK PRODUK SERUPA */
.product-card.mobile-active .product-image-link .img-main {
    opacity: 0; 
}

/* Gambar Kedua: Muncul saat hover */
.product-card:hover .product-image-link .img-hover,
.serupa-card:hover .product-image-link .img-hover, /* <--- TAMBAHAN UNTUK PRODUK SERUPA */
.product-card.mobile-active .product-image-link .img-hover {
    opacity: 1; 
    z-index: 3; 
}

/* 2. LOGIKA KHUSUS HP (MEDIA QUERY) */
@media (max-width: 768px) {
    /* A. RESET: Matikan efek :HOVER bawaan agar tidak kedip saat scroll */
    /* A. RESET: Matikan efek :HOVER bawaan agar tidak kedip saat scroll */
    .product-card:hover .product-image-link .img-main { 
        opacity: 1; 
    }
    .product-card:hover .product-image-link .img-hover { 
        opacity: 0; 
    }

    /* B. AKTIFKAN SAAT DISENTUH (:active): 
       Saat jari menempel di layar (klik), gambar langsung berubah 
       dan link tetap jalan (masuk detail) secara bersamaan. */
    
    .product-card:active .product-image-link .img-main { 
        opacity: 0 !important; 
        transition: none; /* Langsung ganti instan biar responsif */
    }
    
    .product-card:active .product-image-link .img-hover { 
        opacity: 1 !important;
        z-index: 3;
        transition: none;
    }
}


/* =========================================
   2. POPUP FILTER (SARING) RESPONSIF
   ========================================= */
.filter-modal-overlay {
    display: none; /* Default sembunyi */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Latar gelap transparan */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px); /* Efek blur kekinian */
}

.filter-modal-content {
    background-color: #fff;
    width: 400px;
    max-width: 90%;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: slideUp 0.3s ease;
    position: relative;
}

@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.filter-header h3 { margin: 0; font-size: 18px; }
.close-filter { font-size: 28px; cursor: pointer; color: #aaa; }
.close-filter:hover { color: #000; }

.filter-group { margin-bottom: 20px; }
.filter-group label { font-weight: bold; margin-bottom: 10px; display: block; font-size: 14px; }

/* Radio Button Custom */
.radio-container {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
}
.radio-container input { position: absolute; opacity: 0; cursor: pointer; }
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
}
.radio-container:hover input ~ .checkmark { background-color: #ccc; }
.radio-container input:checked ~ .checkmark { background-color: var(--warna-biru); } /* Sesuaikan warna tema */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.radio-container input:checked ~ .checkmark:after { display: block; }
.radio-container .checkmark:after {
    top: 6px; left: 6px; width: 8px; height: 8px; border-radius: 50%; background: white;
}

.btn-apply-filter {
    width: 100%;
    padding: 12px;
    background-color: var(--warna-biru); /* Sesuaikan warna tema */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
.btn-apply-filter:hover { opacity: 0.9; }

/* RESPONSIVE HP UNTUK POPUP */
@media (max-width: 576px) {
    .filter-modal-content {
        width: 100%;
        height: 100%; /* Full screen di HP */
        max-width: 100%;
        border-radius: 0;
        padding: 20px;
        overflow-y: auto; /* Bisa scroll jika konten panjang */
    }
    .filter-header h3 { font-size: 20px; }
    .btn-apply-filter {
        position: sticky;
        bottom: 20px; /* Tombol selalu di bawah */
    }
}
/* === TAMBAHAN BARU: Halaman Detail Produk === */
/* Styling untuk Label Stok Habis */
.out-of-stock-text {
    font-size: 18px;
    font-weight: bold;
    color: red; /* Warna merah */
    margin-bottom: 20px;
    padding: 5px 0;
}

/* 1. Wrapper untuk menahan Overlay */
.product-image-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    /* Ini penting untuk memastikan gambar selalu mengisi ruang 1:1 jika wrapper-nya 1:1 */
    aspect-ratio: 1 / 1; /* Tambahkan ini agar wrapper gambar selalu 1:1 */
    display: flex; /* Gunakan flexbox untuk menengahkan gambar */
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9; /* Fallback background */
}

.product-image-wrapper .main-product-image {
    width: 100%;
    height: 100%; /* Pastikan gambar mengisi wrapper 1:1 */
    object-fit: cover; /* Penting agar gambar tidak terdistorsi */
    border-radius: 8px; /* Agar sesuai dengan wrapper */
    transition: filter 0.3s ease, opacity 0.3s ease; /* Transisi untuk efek pudar */
}

/* 2. Gaya Overlay (Lingkaran Solid Abu-abu di Tengah) */
.product-image-wrapper.out-of-stock-overlay::before {
    content: "HABIS"; /* Teks opsional di overlay */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg); /* Sedikit diputar */
    z-index: 5;
    
    /* GAYA LINGKARAN SOLID ABU-ABU */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%; /* Ukuran lingkaran, relatif terhadap parent */
    aspect-ratio: 1 / 1; /* Pastikan overlay selalu 1:1 */
    
    background-color: #555; /* Warna abu-abu gelap solid */
    color: white;
    font-size: 20px;
    font-weight: bold;
    border-radius: 50%; /* Bentuk lingkaran */
    border: 3px solid rgba(255, 255, 255, 0.7); /* Garis putih opsional */
    text-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Sedikit bayangan teks */
}

/* EFEK PUDAR PADA GAMBAR UTAMA SAAT STOK HABIS */
.product-image-wrapper.out-of-stock-overlay .main-product-image {
    filter: blur(5px); /* Memberi efek blur */
    opacity: 0.5;    /* Membuat gambar lebih pudar */
}


/* === MODIFIKASI: Tombol Keranjang Saat Disabled === */
.btn-add-to-cart[disabled] {
    background-color: #bbb !important; /* Warna abu-abu total */
    cursor: not-allowed;
    transform: none !important;
}

/* === MODIFIKASI: Input dan Tombol Kuantitas Saat Disabled === */
.quantity-selector input[disabled],
.quantity-selector .quantity-btn[disabled] {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ... (CSS lainnya tetap sama seperti yang Anda berikan) ... */

.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 kolom */
    gap: 40px;
    margin-top: 30px;
}

.product-gallery .main-product-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    background-color: #f9f9f9;
    border: 1px solid var(--warna-abu-border);
}

/* Kolom kanan dibuat sticky */
.product-info-sticky {
    position: sticky;
    top: 130px; /* Jarak dari atas (Header + Nav) */
    align-self: start; /* Penting untuk sticky */
}

.product-detail-title {
    font-size: 32px;
    font-weight: bold;
    color: var(--warna-teks);
    line-height: 1.3;
    margin-bottom: 8px;
}

.product-detail-subtitle {
    font-size: 16px;
    color: var(--warna-abu-teks);
    margin-bottom: 20px;
}

.price-tag-detail {
    background-color: #fff100; /* Warna kuning stabilo */
    color: #000;
    font-weight: bold;
    font-size: 24px;
    padding: 10px 15px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 25px;
}

.product-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 25px;
}

.quantity-selector {
    display: flex;
    border: 1px solid var(--warna-abu-border);
    border-radius: 8px;
    overflow: hidden;
}
.quantity-selector input {
    width: 50px;
    text-align: center;
    border: none;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
}
.quantity-selector input:focus {
    outline: none;
}
.quantity-selector .quantity-btn {
    background-color: var(--warna-abu-latar);
    border: none;
    padding: 10px 15px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.quantity-selector .quantity-btn:hover {
    background-color: #ddd;
}

.btn-add-to-cart {
    flex-grow: 1; /* Ambil sisa ruang */
    background-color: var(--warna-biru);
    color: var(--warna-putih);
    border: none;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-add-to-cart:hover {
    background-color: var(--warna-biru-gelap);
    transform: scale(1.02);
}
.btn-favorite {
    background-color: var(--warna-putih);
    border: 1px solid var(--warna-abu-border);
    color: var(--warna-teks);
    font-size: 18px;
    padding: 0; /* Hapus padding lama */
    width: 50px; /* Lebar tetap untuk tampilan kotak */
    height: 50px; /* Tinggi tetap agar sejajar dengan tombol cart */
    
    /* Gunakan Flexbox untuk menengahkan ikon */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-favorite:hover {
    background-color: var(--warna-abu-latar);
    color: red;
}

/* (Rincian Produk Accordion) */
.product-accordion {
    border-top: 1px solid var(--warna-abu-border);
    border-bottom: 1px solid var(--warna-abu-border);
}
.accordion-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: 20px 0;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}
.accordion-toggle i {
    transition: transform 0.3s ease;
}
.accordion-toggle.active i {
    transform: rotate(180deg); /* Animasi panah */
}
.accordion-content {
    max-height: 0; /* Sembunyi by default */
    overflow: hidden;
    transition: max-height 0.4s ease-out; /* Animasi buka/tutup */
    font-size: 15px;
    line-height: 1.7;
    color: var(--warna-abu-teks);
}

/* (Produk Serupa Slider) */
.product-serupa-section {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--warna-abu-border);
}
.product-serupa-section h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}
.slider-container {
    position: relative;
}
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--warna-abu-border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}
.slider-arrow:hover {
    background-color: var(--warna-putih);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.slider-arrow.prev {
    left: -20px;
}
.slider-arrow.next {
    right: -20px;
}
.serupa-slider-track-container {
    overflow-x: scroll; /* Scroll horizontal */
    /* HAPUS 'scroll-behavior: smooth;' agar lompatan tidak terlihat */
    -ms-overflow-style: none;  /* Sembunyikan scrollbar (IE/Edge) */
    scrollbar-width: none;  /* Sembunyikan scrollbar (Firefox) */
    /* TAMBAHKAN: Logika 'Snap' agar berhenti pas di kartu */
}
/* Sembunyikan scrollbar (Chrome/Safari) */
.serupa-slider-track-container::-webkit-scrollbar {
    display: none;
}
.serupa-slider-track {
    display: flex;
    gap: 20px;
    padding-bottom: 20px 10px; /* Jarak untuk bayangan */
}
.serupa-card {
    flex: 0 0 240px; /* Lebar kartu (1/5 dari 1200px) */
    border: 1px solid var(--warna-abu-border);
    border-radius: 8px;
    overflow: hidden;
    /* TAMBAHKAN BARIS INI (Transisi Halus 0.3 detik) */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative; /* Agar z-index bekerja saat hover */
    background-color: #fff; /* Pastikan background putih agar tidak transparan saat membesar */
}
/* EFEK HOVER PROFESIONAL */
.serupa-card:hover {
    /* 1. Angkat sedikit ke atas (-5px) dan Perbesar sedikit (1.03x) */
    /* Jangan perbesar terlalu lebay agar tetap elegan */
    transform: translateY(-5px) scale(1.03);
    
    /* 2. Berikan bayangan lembut agar terlihat melayang (3D effect) */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    
    /* 3. Ubah warna border biar lebih tegas dikit */
    border-color: #ccc;
    
    /* 4. Pastikan kartu ini tampil di atas kartu lain (jika mepet) */
    z-index: 5;
}
.serupa-card img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Pastikan gambar memiliki rasio 1:1 */
    object-fit: cover;
    background-color: #f9f9f9;
}
.serupa-card h3 {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 15px 0 15px;
}
.serupa-card p {
    font-size: 13px;
    color: var(--warna-abu-teks);
    padding: 0 15px;
}
.serupa-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}
.serupa-price {
    font-weight: bold;
    font-size: 15px;
}
.serupa-actions {
    display: flex;
    gap: 5px;
}
.serupa-btn-fav, .serupa-btn-cart {
    background-color: var(--warna-abu-latar);
    border: 1px solid var(--warna-abu-border);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.serupa-btn-fav:hover, .serupa-btn-cart:hover {
    background-color: #ddd;
}
.serupa-btn-cart {
    background-color: #fff100; /* UBAH: Jadi kuning */
    color: #000; /* UBAH: Jadi hitam */
    border-color: #e0d100; /* UBAH: Jadi kuning gelap */
}
.serupa-btn-cart:hover {
    background-color: #e0d100; /* UBAH: Jadi kuning gelap */
}
/* === NAVIGASI TOMBOL KANAN KIRI === */
/* === NAVIGASI TOMBOL KANAN KIRI === */
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    
    /* FIX: Set lebar & tinggi fix agar bulat sempurna 1:1 */
    width: 40px; 
    height: 40px;
    padding: 0; /* Hapus padding agar centered by flex */
    
    /* FIX: Center icon secara presisi */
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 20px; /* Sesuaikan ukuran panah */
    cursor: pointer;
    z-index: 5;
    border-radius: 50%; /* Tombol bulat */
    transition: background-color 0.3s ease, opacity 0.3s ease;
    opacity: 0; 
}

/* Efek Hover Tombol */
.gallery-nav:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Jadi lebih gelap pas ditunjuk mouse */
}

/* Posisi Tombol */
.gallery-nav.prev { left: 10px; }
.gallery-nav.next { right: 10px; }

/* LOGIKA MUNCUL: Tampilkan tombol saat mouse masuk area gambar */
.main-media-view:hover .gallery-nav {
    opacity: 1;
}

/* === THUMBNAIL AKTIF (BORDER MERAH) === */
.thumb-box.active {
    border-color: red !important; /* Paksa warna merah */
    /* Tambahan efek bayangan merah dikit biar kece */
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
}
/* === SPESIFIKASI PRODUK YANG LEBIH RAPI === */

.spesifikasi-list {
    font-size: 14px;
    color: #555;
    margin-top: 15px;
}

.spec-row {
    display: flex; /* Gunakan Flexbox */
    justify-content: space-between; /* Pisahkan kiri dan kanan */
    align-items: flex-start; /* PENTING: Align ke atas jika teks panjang */
    padding: 10px 0; /* Beri napas atas bawah */
    border-bottom: 1px dashed #e0e0e0; /* Garis pemisah halus */
}

/* Hilangkan garis di item terakhir */
.spec-row:last-child {
    border-bottom: none;
}

/* Label (Kiri) */
.spec-label {
    font-weight: normal;
    color: #666;
    flex: 0 0 120px; /* Lebar tetap untuk label agar rapi */
    margin-right: 15px; /* Jarak dengan nilai */
}

/* Nilai (Kanan) */
.spec-value {
    font-weight: bold;
    color: #222;
    flex: 1; /* Isi sisa ruang */
    text-align: right; /* Default rata kanan */
    line-height: 1.5; /* Jarak antar baris biar enak dibaca */
}

/* Khusus Teks Panjang (Material/Deskripsi) */
.spec-value.text-long {
    text-align: left; /* Ubah jadi rata kiri agar mudah dibaca */
    /* text-align: justify; <-- Boleh pakai ini jika ingin rata kanan-kiri */
    word-break: break-word;
    max-width: 70%; /* Batasi lebar agar tidak terlalu mepet kiri */
    margin-left: auto; /* Trik agar blok teks tetap ada di sisi kanan */
}

/* Warna Stok */
.text-success { color: #28a745 !important; }
.text-danger { color: #dc3545 !important; }
/* === BADGE JUMLAH PEMBELI (SOCIAL PROOF) === */
    .sales-proof-badge {
    display: flex;
    align-items: center;
    gap: 12px; /* Jarak ikon dan teks */
    
    /* 1. BACKGROUND & WARNA (Professional Blue) */
    background-color: #e3f2fd; /* Biru sangat muda (tenang & terpercaya) */
    color: #0d47a1; /* Teks Biru Gelap (Kontras tinggi) */
    
    /* 2. BENTUK KOTAK (Sesuai Request) */
    border-radius: 0; /* NO ROUNDED (Kotak Siku) */
    border-left: 5px solid #1565c0; /* Aksen garis tebal di kiri biar elegan */
    border-right: 1px solid #bbdefb; /* Garis tipis kanan/atas/bawah */
    border-top: 1px solid #bbdefb;
    border-bottom: 1px solid #bbdefb;

    /* 3. JARAK (SPACING) - AGAR TIDAK MEPET */
    padding: 15px 20px; /* Ruang dalam lebih lega */
    margin-top: 20px; /* Jarak dari Harga (Atas) */
    margin-bottom: 35px; /* Jarak dari Tombol Cart (Bawah) */
    
    /* 4. EFEK MENGAMBANG (FLOATING) */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Bayangan halus */
    
    /* Lain-lain */
    font-size: 15px;
    width: 100%; /* Full width agar rapi mengisi kolom */
    max-width: 100%;
    box-sizing: border-box; /* Agar padding tidak melebarkan kotak */
    }
    
    .sales-proof-badge i {
    color: #1565c0; /* Warna Ikon Biru Sedang */
    font-size: 20px; /* Ikon sedikit diperbesar */
    }

/* Teks Angka */
    .sales-proof-badge strong {
    font-weight: 800; /* Lebih tebal */
    font-size: 16px;
    }
/* === RESPONSIF HP === */
@media (max-width: 480px) {
    .spec-label {
        flex: 0 0 100px; /* Perkecil label di HP */
        font-size: 13px;
    }
    .spec-value {
        font-size: 13px;
    }
}
/* === RESPONSIF HP (KONDISI KHUSUS) === */
@media (max-width: 768px) {
    
    /* 1. Sembunyikan Thumbnail di HP */
    .media-thumbnails {
        display: none !important;
    }

    /* 2. Tombol Navigasi SELALU MUNCUL di HP */
    .gallery-nav {
        opacity: 1 !important; /* Wajib muncul terus di HP */
        
        /* GAYA TOMBOL PUTIH */
        background-color: rgba(255, 255, 255, 0.9) !important; /* Latar Putih */
        color: #333 !important; /* Ikon Panah Gelap/Hitam */
        border: 1px solid #e0e0e0 !important; /* Garis tepi tipis */
        box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important; /* Efek bayangan timbul */
        
        /* UKURAN & POSISI */
        width: 35px !important;  /* Sedikit lebih kecil agar elegan */
        height: 35px !important;
        font-size: 16px !important; /* Ukuran panah disesuaikan */
        padding: 0 !important;
        
        /* Pastikan bulat & tengah */
        border-radius: 50% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
}


/* Responsif Halaman Detail */
@media (max-width: 992px) {
    .product-detail-layout {
        grid-template-columns: 1fr; /* 1 kolom di tablet */
    }
    .product-info-sticky {
        position: static; /* Matikan sticky di tablet */
    }
}
/* === KOREKSI DETAIL PRODUK (HP) === */
@media (max-width: 768px) {
    /* 1. CONTAINER UTAMA */
    .product-actions {
        display: flex !important;
        flex-wrap: nowrap !important; /* Wajib satu baris */
        align-items: stretch !important; /* Samakan tinggi semua elemen */
        width: 100% !important; /* Pastikan tidak melebar */
        gap: 8px !important; /* Jarak antar elemen diperkecil agar muat */
        box-sizing: border-box !important; /* Hitung padding dalam lebar */
    }

    /* 2. QUANTITY SELECTOR (KIRI - FIX) */
    .quantity-selector {
        /* Lebar fix yang cukup untuk -, angka, + */
        flex: 0 0 100px !important; 
        width: 100px !important; 
        height: 45px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .quantity-selector .quantity-btn {
        width: 30px !important;
        padding: 0 !important;
        height: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .quantity-selector input {
        width: calc(100% - 60px) !important; /* Sisa ruang di tengah */
        padding: 0 !important;
        height: 100% !important;
        text-align: center;
    }

    /* 3. TOMBOL KERANJANG (TENGAH - FLEKSIBEL) */
    .btn-add-to-cart {
        /* PENTING: Ambil sisa ruang, tapi jangan lebih dari minimal content */
        flex: 1 1 auto !important; 
        
        height: 45px !important;
        font-size: 13px !important; /* Kecilkan font agar teks panjang muat */
        padding: 0 5px !important; /* Padding tipis agar teks tidak kepotong */
        
        white-space: nowrap !important; /* Teks satu baris */
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* Titik tiga jika kepanjangan */
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Sembunyikan ikon keranjang jika layar sangat sempit (opsional, agar teks muat) */
    .btn-add-to-cart i {
        display: none; 
    }

    /* 4. TOMBOL FAVORIT (KANAN - FIX KOTAK) */
    .btn-favorite {
        flex: 0 0 45px !important; /* Fix kotak */
        width: 45px !important;
        height: 45px !important;
        padding: 0 !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
    }
    .sales-proof-badge {
        font-size: 13px;
        padding: 12px 15px;
        margin-bottom: 25px; /* Sesuaikan jarak di HP */
    }
}
/* === TAMBAHAN BARU: Favorit, Halaman Favorit, & Animasi === */

/* INI KODE YANG ANDA TANYAKAN (SUDAH BERSIH) */
.btn-favorite.favorited i,
.serupa-btn-fav.favorited i,
.cart-btn-fav.favorited i { /* <-- TAMBAHKAN BARIS INI */
    color: red;
}

/* Notifikasi Badge di Header */
.header-icon-link {
    position: relative; /* Agar badge posisinya relatif ke link */
    display: inline-block;
}
.badge.favorit-count {
    position: absolute;
    top: -5px; /* Sesuaikan posisi vertikal */
    right: -10px; /* Sesuaikan posisi horizontal */
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 3px 6px;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px; /* Pastikan lingkaran cukup besar untuk angka > 9 */
    text-align: center;
    line-height: 1;
    display: none; /* Sembunyikan jika 0, JS akan menampilkannya */
}
.badge.favorit-count.active {
    display: block; /* Tampilkan jika ada jumlah > 0 */
}

/* Animasi Terlempar (Fly-to-Cart/Fav) */
.fly-animation {
    position: fixed;
    background-color: red; /* Warna hati yang terbang */
    color: white;
    font-size: 18px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Agar tidak menghalangi klik di bawahnya */
    z-index: 10000;
    opacity: 0;
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in; /* Animasi ke tujuan */
}

/* (Logika Halaman Favorit) */
.favorit-actions-top {
    display: flex;
    justify-content: flex-end; /* Pindahkan ke kanan */
    gap: 15px;
    margin-bottom: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--warna-abu-border);
}
.btn-clear-all-fav, .btn-add-all-to-cart {
    background-color: var(--warna-putih);
    border: 1px solid var(--warna-abu-border);
    color: var(--warna-teks);
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}
.btn-clear-all-fav:hover, .btn-add-all-to-cart:hover {
    background-color: var(--warna-abu-latar);
}
.btn-add-all-to-cart {
    background-color: var(--warna-biru);
    color: var(--warna-putih);
    border-color: var(--warna-biru);
}
.btn-add-all-to-cart:hover {
    background-color: var(--warna-biru-gelap);
}

.favorit-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--warna-abu-border);
    padding-bottom: 15px;
    margin-bottom: 25px;
}
.favorit-item-count {
    font-weight: bold;
    font-size: 22px;
    color: var(--warna-teks);
}
.favorit-total-price {
    font-weight: bold;
    font-size: 24px;
    color: var(--warna-biru);
}

.favorit-item-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.favorit-item-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    border: 1px solid var(--warna-abu-border);
    border-radius: 10px;
    background-color: var(--warna-putih);
}
.favorit-item-image {
    flex-shrink: 0; 
    width: 100px;
    height: 100px;
    border: 1px solid var(--warna-abu-border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
}
.favorit-item-image img {
    max-width: 100%;
    aspect-ratio: 1 / 1; /* Pastikan gambar memiliki rasio 1:1 */
    object-fit: cover;
}
.favorit-item-info {
    flex-grow: 1;
}
.favorit-item-info h3 {
    font-size: 18px;
    margin-bottom: 5px;
}
.favorit-item-info h3 a {
    color: var(--warna-teks);
    text-decoration: none;
}
.favorit-item-info h3 a:hover {
    text-decoration: underline;
}
.favorit-item-desc {
    font-size: 13px;
    color: var(--warna-abu-teks);
    margin-bottom: 10px;
}

/* LOGIKA KUNING ANDA */
.favorit-item-price {
    background-color: #fff100; /* Warna kuning stabilo */
    color: #000; /* Font hitam */
    font-weight: bold;
    font-size: 16px;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block; 
}

.favorit-item-actions {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
}
.btn-remove-fav, .btn-add-to-cart-fav {
    background-color: var(--warna-abu-latar);
    border: 1px solid var(--warna-abu-border);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}
.btn-remove-fav:hover {
    background-color: #fdd; 
    color: red;
    border-color: red;
}

/* LOGIKA KUNING ANDA */
.btn-add-to-cart-fav {
    background-color: #fff100; 
    color: #000; 
    border-color: #e0d100; 
}
.btn-add-to-cart-fav:hover {
    background-color: #e0d100; 
}

.empty-favorit {
    text-align: center;
    padding: 50px 20px;
    border: 1px dashed var(--warna-abu-border);
    border-radius: 10px;
    background-color: #fdfdfd;
    margin-top: 40px;
}
.empty-favorit p {
    font-size: 18px;
    color: var(--warna-abu-teks);
    margin-bottom: 20px;
}
.empty-favorit .btn-primary {
    background-color: var(--warna-biru);
    color: var(--warna-putih);
    padding: 10px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease;
}
.empty-favorit .btn-primary:hover {
    background-color: var(--warna-biru-gelap);
}

/* Responsif untuk halaman Favorit */
/* Responsif untuk halaman Favorit */
@media (max-width: 768px) {
    /* 1. KOREKSI: Tombol Hapus Semua & Tambahkan Semua ke Keranjang */
    .favorit-actions-top {
        /* Kembalikan ke flex horizontal (seperti di PC) */
        flex-direction: row; 
        /* Justify content untuk menempatkan mereka di kanan dan sejajar */
        justify-content: flex-end; 
        gap: 10px;
        margin-bottom: 20px; /* Sedikit kurangi margin bawah */
    }
    .btn-clear-all-fav, .btn-add-all-to-cart {
        /* Kecilkan padding di HP */
        padding: 8px 10px; 
        font-size: 13px; /* Kecilkan font */
    }
    
    /* 2. KOREKSI: Header Total dan Jumlah */
    .favorit-list-header {
        /* Pastikan elemen ini tetap sejajar: Jumlah di kiri, Total di kanan */
        padding-bottom: 10px;
        margin-bottom: 15px;
        /* Opsional: pastikan tidak wrap */
        flex-wrap: nowrap;
    }

    /* === TAMBAHAN KODE YANG HILANG (KOREKSI FONT HEADER) === */
    .favorit-item-count {
        font-size: 14px; /* Turunkan dari 18px */
        white-space: nowrap; /* Cegah teks melompat baris */
        flex-shrink: 0; /* Pastikan tidak menyusut saat ruang sempit */
    }

    .favorit-total-price {
        font-size: 16px; /* Turunkan dari 20px */
        white-space: nowrap; /* Cegah teks melompat baris */
        flex-shrink: 0; /* Pastikan tidak menyusut saat ruang sempit */
    }
    /* ========================================================= */
    
    /* 3. KOREKSI: Card Produk (Dibuat lebih kompak, tanpa wrap) */
    .favorit-item-card {
        /* Hapus flex-wrap: wrap; yang menyebabkan penumpukan vertikal */
        flex-wrap: nowrap; /* Pastikan elemen tetap sejajar */
        gap: 10px; /* Kurangi gap */
        padding: 10px; /* Kurangi padding kartu */
    }

    /* 4. KOREKSI: Gambar */
    .favorit-item-image {
        width: 60px; /* Kecilkan ukuran gambar (misalnya 60x60px) */
        height: 60px;
        border-radius: 6px; /* Kurangi sedikit radius */
    }

    /* 5. KOREKSI: Info Produk */
    .favorit-item-info {
        flex-grow: 1;
        /* Hapus width: 100%; agar elemen lain bisa sejajar */
        width: auto; 
        text-align: left; /* Kembalikan teks ke kiri */
        /* Beri ruang agar tidak terlalu mepet ke kanan */
        padding-right: 5px; 
    }
    .favorit-item-info h3 {
        font-size: 15px; /* Kecilkan ukuran font judul */
        margin-bottom: 3px;
    }
    .favorit-item-desc {
        display: none; /* Sembunyikan deskripsi di HP agar lebih ringkas */
    }
    .favorit-item-price {
        font-size: 14px; /* Kecilkan ukuran harga */
        padding: 3px 8px; 
    }


    /* 6. KOREKSI: Tombol Aksi (Hapus & Keranjang) */
    .favorit-item-actions {
        /* Posisikan di paling kanan dan pastikan ukurannya pas */
        flex-shrink: 0;
        flex-direction: column; /* Ubah tombol aksi di dalam card menjadi tumpuk vertikal */
        justify-content: center;
        gap: 5px; /* Kurangi gap */
        margin-top: 0; /* Hapus margin top */
    }

    .btn-remove-fav, .btn-add-to-cart-fav {
        width: 35px; /* Kecilkan ukuran tombol */
        height: 35px;
        font-size: 14px;
        border-radius: 6px;
    }
}
/* === PROFIL PAGE (Desain Profesional & Responsif) === */

.profile-page-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    align-items: start;
    padding: 10px;
}

/* === SIDEBAR NAV === */
.profile-sidebar-nav {
    display: flex;
    flex-direction: column;
    background-color: var(--warna-putih);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    position: relative; 
    top: auto;
    height: fit-content;
}

.profile-sidebar-nav a {
    display: block;
    padding: 18px 22px;
    text-decoration: none;
    color: var(--warna-teks);
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid var(--warna-abu-latar);
    transition: all 0.25s ease;
}
.profile-sidebar-nav a:last-child {
    border-bottom: none;
}
.profile-sidebar-nav a:hover {
    background-color: var(--warna-abu-latar);
    color: var(--warna-biru);
    padding-left: 28px;
}
.profile-sidebar-nav a.active {
    background-color: var(--warna-biru);
    color: var(--warna-putih);
    padding-left: 28px;
}
.profile-sidebar-nav a.logout-link:hover {
    background-color: #ffe5e5;
    color: red;
}

/* === CONTENT AREA === */
.profile-content-area {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.profile-card {
    background-color: var(--warna-putih);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: 35px;
}
.profile-card h2 {
    font-size: 22px;
    margin-bottom: 25px;
    font-weight: 700;
    border-bottom: 1px solid var(--warna-abu-border);
    padding-bottom: 12px;
}

/* === FORM === */
.form-group {
    margin-bottom: 22px;
}
.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 15px;
}
.form-control {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid var(--warna-abu-border);
    border-radius: 8px;
    background-color: #fafafa;
    transition: all 0.25s ease;
}
.form-control:focus {
    outline: none;
    border-color: var(--warna-biru);
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(30,144,255,0.1);
}
.form-control:disabled {
    background-color: #f0f0f0;
    color: #777;
}

/* Placeholder yang terlihat */
.form-control::placeholder {
    color: #888;
    opacity: 1;
}
/* Placeholder hilang saat fokus */
textarea.form-control:focus::placeholder {
    color: transparent;
}

/* Textarea khusus */
textarea.form-control {
    min-height: 110px;
    resize: vertical;
    line-height: 1.5;
}

/* Small info */
.form-group small {
    font-size: 13px;
    color: var(--warna-abu-teks);
    margin-top: 5px;
    display: block;
}

/* === BUTTON === */
.btn-submit {
    background-color: var(--warna-biru);
    color: var(--warna-putih);
    border: none;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.btn-submit:hover {
    background-color: var(--warna-biru-gelap);
    transform: translateY(-1px);
}

/* === FOTO PROFIL === */
.form-group-foto {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.profile-pic-preview {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--warna-abu-border);
}
.file-input {
    display: none;
}
.btn-pilih-foto {
    background-color: var(--warna-abu-latar);
    border: 1px solid var(--warna-abu-border);
    color: var(--warna-teks);
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-pilih-foto:hover {
    background-color: #eaeaea;
}

/* === ALERT === */
.alert {
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 20px;
}
.alert-success {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}
.alert-error {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}
/* CSS KHUSUS TOMBOL AKSI PESANAN */
.pesanan-card-menunggu .actions {
    display: flex;
    flex-wrap: wrap; /* Agar turun ke bawah di HP layar kecil */
    gap: 10px;
    margin-top: 15px;
}

.btn-action {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.btn-bayar:hover {
    background: #0b5ed7 !important;
    border-color: #0a58ca !important;
}

.btn-cetak:hover {
    background: #f8f9fa !important;
    border-color: #bbb !important;
    color: #000 !important;
}

.btn-batal-pesanan:hover {
    background: #dc3545 !important;
    color: white !important;
}

@media (max-width: 576px) {
    
    /* 1. Container Tombol */
    .pesanan-card-menunggu .actions,
    .pesanan-card-status .actions {
        flex-direction: column; /* Susun vertikal */
        gap: 12px; /* Jarak antar tombol vertikal lebih lega */
        margin-top: 20px; /* Jarak dari konten atas */
        width: 100%; /* Pastikan container full width */
    }

    /* 2. Styling Tombol di HP */
    .btn-action {
        width: 100%; /* Tombol memenuhi lebar layar */
        padding: 12px !important; /* Padding lebih besar biar enak ditekan */
        font-size: 14px !important; /* Font sedikit lebih besar */
        justify-content: center; /* Teks & ikon rata tengah */
        border-radius: 8px !important; /* Sudut lebih membulat */
        box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Sedikit bayangan biar pop-up */
    }

    /* 3. Perbaikan Layout Card Utama di HP */
    .pesanan-body {
        flex-direction: column; /* Produk di atas, tombol di bawah */
        align-items: stretch !important; /* Elemen anak memenuhi lebar */
    }

    .order-items-list {
        padding-right: 0 !important; /* Hapus padding kanan karena sudah vertikal */
        margin-bottom: 15px; /* Jarak antara list produk dan tombol */
        border-bottom: 1px dashed #eee; /* Pemisah visual halus */
        padding-bottom: 15px;
    }

    /* 4. Timeline Status di HP (Agar garis tidak berantakan) */
    .timeline-container {
        margin-top: 15px !important;
        padding-top: 10px !important;
    }
    .tl-text {
        font-size: 10px !important; /* Perkecil teks status biar muat */
    }
}

/* === RESPONSIVE DESIGN === */

/* Tablet (<= 992px) */
@media (max-width: 992px) {
    .profile-page-layout {
        grid-template-columns: 1fr;
    }
    .profile-sidebar-nav {
        flex-direction: row;
        justify-content: space-around;
        background: var(--warna-putih);
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        overflow-x: auto;
    }
    .profile-sidebar-nav a {
        flex: 1;
        text-align: center;
        padding: 14px 10px;
        border-bottom: none;
        border-right: 1px solid var(--warna-abu-latar);
        font-size: 15px;
        font-weight: 600;
    }
    .profile-sidebar-nav a:last-child {
        border-right: none;
    }
    .profile-sidebar-nav a.active {
        background-color: var(--warna-biru);
        color: var(--warna-putih);
    }
}

/* HP (<= 768px) */
@media (max-width: 768px) {
    .profile-card {
        padding: 22px;
    }
    .profile-card h2 {
        font-size: 18px;
    }
    .btn-submit {
        width: 100%;
        text-align: center;
    }
    .form-group-foto {
        flex-direction: column;
        align-items: flex-start;
    }
    .profile-pic-preview {
        width: 90px;
        height: 90px;
    }
}

/* HP kecil (<= 480px) */
@media (max-width: 480px) {
    .profile-page-layout {
        gap: 20px;
    }
    .profile-card {
        border-radius: 10px;
        padding: 18px;
    }
    .form-control {
        font-size: 15px;
        padding: 10px 14px;
    }
    .profile-sidebar-nav a {
        font-size: 14px;
        padding: 12px 8px;
    }
}


.form-foto-profil {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.form-group-foto {
    position: relative; /* Penting untuk overlay */
    margin-bottom: 25px;
    display: inline-block; /* Agar wrapper membungkus gambar pas */
}

/* Gambar Profil Utama */
.profile-pic-preview {
    /* Ukuran Desktop */
    width: 140px; 
    height: 140px;
    
    /* PAKSA UKURAN MINIMUM (Solusi Anti-Gepeng) */
    min-width: 140px; 
    min-height: 140px;
    display: block; /* Pastikan dianggap kotak blok */
    
    /* Agar Bulat Sempurna */
    border-radius: 50%;
    object-fit: cover; 
    aspect-ratio: 1 / 1; 
    
    /* Style Border */
    border: 4px solid var(--warna-putih);
    box-shadow: 0 0 0 3px var(--warna-abu-border);
    background-color: #e0e0e0; /* Warna abu jika gambar gagal load */
    
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Efek Hover pada Gambar */
.form-group-foto:hover .profile-pic-preview {
    filter: brightness(0.8); /* Gelapkan sedikit saat hover */
}

/* Overlay Ikon Kamera (Muncul di tengah) */
.profile-pic-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--warna-putih);
    font-size: 24px;
    opacity: 0; /* Sembunyi default */
    pointer-events: none; /* Agar klik tembus ke gambar/link */
    transition: opacity 0.3s ease;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Tampilkan ikon kamera saat hover */
.form-group-foto:hover .profile-pic-overlay {
    opacity: 1;
}

/* Input File Sembunyi */
.file-input {
    display: none;
}

/* Container Tombol */
.form-group-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 350px;
}
/* (5) Samakan Ukuran Tombol (BARU) */
.btn-submit-style {
    flex: 1; /* Ambil ruang yang sama */
    text-align: center; /* Pusatkan teks */
    padding-top: 12px;
    padding-bottom: 12px;
}
.file-input {
    display: none; /* Sembunyikan input file asli */
}
.btn-pilih-foto {
    background-color: var(--warna-abu-latar);
    border: 1px solid var(--warna-abu-border);
    color: var(--warna-teks);
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease;
}
.btn-pilih-foto:hover {
    background-color: #ddd;
}

/* (4) Alert Sukses/Error */
.alert {
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: bold;
    margin-bottom: 20px;
}
.alert-success {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}
.alert-error {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}
/* ==============================================
   CUSTOM SELECT2 (Agar Desain Mirip Input Biasa)
   ============================================== */

/* 1. Samakan Tinggi dan Border Container */
.select2-container .select2-selection--single {
    height: 45px !important;            /* Sesuaikan tinggi dengan input form lainnya */
    padding: 6px 12px !important;       
    border: 1px solid #ccc !important;  
    border-radius: 5px !important;      
    display: flex !important;
    align-items: center !important;     
}

/* 2. Hilangkan border fokus bawaan yang kaku */
.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
}

/* 3. Atur Posisi Teks Pilihan */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: normal !important;     
    padding-left: 0 !important;
}

/* 4. Atur Posisi Panah (Arrow) */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;            
    top: 0 !important;
    right: 10px !important;             
    display: flex;
    align-items: center;
}

/* 5. Warna saat diklik (Focus State) - Biru Bootstrap */
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #80bdff !important;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* Responsif HP (Mobile) */
@media (max-width: 768px) {
    .profile-pic-preview {
        width: 110px;
        height: 110px;
        /* PAKSA UKURAN MINIMUM DI HP JUGA */
        min-width: 110px;
        min-height: 110px;
    }
   .form-group-buttons {
        max-width: 280px; /* Batasi lebar total area tombol agar tidak terlalu lebar */
        gap: 8px; /* Rapatkan jarak antar tombol */
        margin: 0 auto; /* Pastikan tetap di tengah */
    }

    /* Target kedua tombol (Pilih & Simpan) */
    .btn-pilih-foto,
    .btn-submit-style {
        padding: 6px 12px !important; /* PENTING: Kurangi padding atas-bawah biar tipis */
        font-size: 12px !important;   /* PENTING: Kecilkan ukuran huruf */
        border-radius: 6px !important; /* Radius sudut lebih kecil agar terlihat tajam/pro */
        font-weight: 600 !important;
        height: auto !important;       /* Pastikan tinggi mengikuti padding */
        line-height: normal !important;
    }
}
/* === Responsif Halaman Profil === */
@media (max-width: 992px) {
    .profile-page-layout {
        grid-template-columns: 1fr; /* 1 kolom di tablet/HP */
    }
    .profile-sidebar-nav {
        /* Ubah jadi horizontal */
        flex-direction: row;
        overflow-x: auto;
        box-shadow: none;
        background: none;
    }
    .profile-sidebar-nav a {
        border-bottom: 3px solid transparent;
        border-top: 3px solid transparent;
        flex-shrink: 0; /* Agar tidak 'wrap' */
        border-radius: 0;
    }
    .profile-sidebar-nav a.active {
        border-bottom-color: var(--warna-biru);
        background: none;
        color: var(--warna-biru);
        padding-left: 20px;
    }
}
/* === TAMBAHAN BARU: Logika Ikon Profil Responsif === */

/* (1) Sembunyikan ikon HP di PC */
.header-icon-mobile {
    display: none;
}

/* (2) Saat di HP (768px ke bawah) */
@media (max-width: 768px) {
    /* Sembunyikan ikon PC (yang buka popup) */
    .header-icon-pc {
        display: none;
    }
    /* Tampilkan ikon HP (yang buka halaman) */
    .header-icon-mobile {
        display: block;
        font-size: 20px; /* Samakan style dengan ikon lain di HP */
        color: var(--warna-putih);
        transition: all 0.2s ease;
    }
}
/* === TAMBAHAN BARU: Search Autocomplete === */

/* (1) Form Wrapper */
.header-search-form {
    flex-grow: 1; /* Ambil ruang yang sama seperti .header-search */
    max-width: 1000px;
    position: relative; /* Penting untuk popup */
}

/* (2) Saat search di-hover, JANGAN ubah background (agar popup terlihat) */
.header-search:hover {
   background-color: rgba(255, 255, 255, 0.2); /* Hapus efek jadi putih */
   box-shadow: none; /* Hapus efek glow */
}

/* (3) Ubah jadi putih HANYA saat FOKUS (diketik) */
.header-search:focus-within {
    background-color: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* (4) Ubah warna teks/placeholder saat FOKUS */
.header-search:focus-within i {
    color: var(--warna-teks); 
}
.header-search:focus-within input {
    color: var(--warna-teks); 
}
.header-search:focus-within input::placeholder {
    color: transparent; 
}
.header-search:focus-within .header-search-clear {
    color: var(--warna-abu-teks);
}
.header-search:focus-within .header-search-clear:hover {
    color: var(--warna-teks);
}

/* (5) Popup Hasil Search (Profesional) */
.search-autocomplete-popup {
    position: absolute;
    top: 110%; /* Muncul di bawah search bar */
    left: 0;
    width: 100%;
    background-color: var(--warna-putih);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 1001; /* Di atas header */
    max-height: 300px;
    overflow-y: auto;

    /* (6) Logika Animasi Slide Down/Up */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease-out;
}

/* (7) Status Aktif (Dipicu JS) */
.search-autocomplete-popup.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* (8) Item Hasil Search */
.autocomplete-item {
    display: block;
    padding: 12px 18px;
    font-size: 15px;
    color: var(--warna-teks);
    text-decoration: none;
    border-bottom: 1px solid var(--warna-abu-latar);
}
.autocomplete-item:last-child {
    border-bottom: none;
}
.autocomplete-item:hover {
    background-color: var(--warna-abu-latar);
}
.autocomplete-item strong {
    color: var(--warna-biru); /* Sorot teks yang cocok */
}
/* === TAMBAHAN BARU: Search Bar di Halaman Produk (Mobile Only) === */

/* (1) Kontainer Search Bar */
.mobile-product-search {
    display: none !important; /* Default: sembunyi di desktop */
    margin-bottom: 20px;
    position: relative; /* Penting untuk popup autocomplete */
    z-index: 100; /* Di atas konten lain */
    visibility: hidden;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* (2) Tampilkan HANYA di HP (≤768px) */
@media (max-width: 768px) {
    .mobile-product-search {
        display: block !important; /* Tampilkan di HP */
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        margin-bottom: 20px !important;
        padding: 0 !important;
    }
}

/* (3) Kita gunakan ulang style .header-search (desain PC) */
.mobile-product-search .header-search {
    max-width: 100%;
    position: relative;
    background-color: var(--warna-putih);
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border: 1px solid var(--warna-abu-border);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* (4) Input di dalam search bar mobile */
.mobile-product-search .header-search input {
    width: 100%;
    padding: 12px 30px 12px 0;
    border: none;
    background-color: transparent;
    color: var(--warna-teks);
    font-size: 16px;
}
.mobile-product-search .header-search input:focus {
    outline: none;
}
.mobile-product-search .header-search i {
    color: var(--warna-abu-teks);
    margin-right: 10px; 
}

/* (5) Tombol Clear (X) di search bar mobile */
.mobile-product-search .header-search-clear {
    display: none; 
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--warna-abu-teks);
    font-size: 16px;
    padding: 0;
}

/* (6) Popup Hasil Search (Profesional - Slide Down) */
.mobile-product-search .search-autocomplete-popup {
    position: absolute;
    top: 105%;
    left: 0;
    width: 100%;
    background-color: var(--warna-putih);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 1001;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--warna-abu-border);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease-out;
}
.mobile-product-search .search-autocomplete-popup.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* (7) Item Hasil Search */
.mobile-product-search .autocomplete-item {
    display: block;
    padding: 12px 18px;
    font-size: 15px;
    color: var(--warna-teks);
    text-decoration: none;
    border-bottom: 1px solid var(--warna-abu-latar);
}
.mobile-product-search .autocomplete-item:last-child {
    border-bottom: none;
}
.mobile-product-search .autocomplete-item:hover {
    background-color: var(--warna-abu-latar);
}
.mobile-product-search .autocomplete-item strong {
    color: var(--warna-biru);
}
/* === TAMBAHAN BARU: Tombol Keranjang di Card Produk === */

.product-card-cart-btn {
    /* (1) Logika Posisi */
    position: absolute;
    bottom: 20px; /* Jarak dari bawah */
    right: 20px; /* Jarak dari kanan */

    /* (2) Logika Desain (Biru & Putih) */
    background-color: var(--warna-biru); 
    color: var(--warna-putih); 
    border: none;
    border-radius: 50%; /* Lingkaran */
    width: 45px;
    height: 45px;
    font-size: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    cursor: pointer;

    /* (3) LOGIKA ANIMASI: Sembunyi by default */
    opacity: 0;
    transform: scale(0.8) translateY(10px);
    transition: all 0.2s ease-out;
    z-index: 5; /* Pastikan di atas info produk */
}

/* (4) LOGIKA MOUSE ENTER (PC) */
.product-card:hover .product-card-cart-btn {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* (5) LOGIKA RESPONSIVE (MOBILE) */
@media (max-width: 768px) {
    .product-card-cart-btn {
      /* UBAH: Sembunyikan tombol keranjang di HP */
      display: none;
     }
}
/* === TAMBAHAN BARU: Badge Keranjang & Halaman Keranjang === */

/* (1) Badge Notifikasi Keranjang (mirip favorit) */
.badge.cart-count {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: var(--warna-biru); /* Biru, beda dari favorit */
    color: white;
    border-radius: 50%;
    padding: 3px 6px;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px;
    text-align: center;
    line-height: 1;
    display: none; /* Sembunyi jika 0 */
}
.badge.cart-count.active {
    display: block; /* Tampil jika > 0 */
}

/* (2) Halaman Keranjang - Header */
.cart-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.cart-header-actions {
    font-size: 16px;
    color: var(--warna-abu-teks);
}

/* (3) Halaman Keranjang - Kontainer Utama */
.cart-container {
    margin-top: 30px;
    background-color: var(--warna-putih);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    overflow: hidden;
}
.cart-table-header {
    display: flex;
    justify-content: space-between;
    background-color: var(--warna-abu-latar);
    padding: 15px 25px;
    font-weight: bold;
    color: var(--warna-abu-teks);
    font-size: 14px;
}
.header-col-1 {
    flex-basis: 50%;
    display: flex;
    align-items: center;
    gap: 15px;
}
.header-col-2 {
    flex-basis: 20%;
    text-align: center;
}
.header-col-3 {
    flex-basis: 30%;
    text-align: right;
}

/* (4) Halaman Keranjang - Item */
.cart-item-list {
    display: flex;
    flex-direction: column;
}
.cart-item-card {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid var(--warna-abu-latar);
}
.cart-checkbox {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.cart-col-1 {
    flex-basis: 50%;
    display: flex;
    align-items: center;
    gap: 15px;
}
.cart-item-image {
    width: 80px;
    height: 80px;
    border: 1px solid var(--warna-abu-border);
    border-radius: 8px;
    flex-shrink: 0;
    padding: 2px;
}
.cart-item-image img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Pastikan gambar memiliki rasio 1:1 */
    object-fit: cover;
}
.cart-item-info h3 {
    font-size: 16px;
    margin-bottom: 5px;
}
.cart-item-info h3 a {
    color: var(--warna-teks);
}
.cart-item-info .cart-item-price {
    font-weight: bold;
    color: var(--warna-teks);
    margin-bottom: 5px;
}
.cart-item-info small {
    font-size: 12px;
    color: var(--warna-abu-teks);
}

.cart-col-2 {
    flex-basis: 20%;
    display: flex;
    justify-content: center;
}
.cart-col-2 .quantity-selector {
    padding: 5px; /* Buat lebih kecil dari di detail produk */
}
.cart-col-2 .quantity-btn {
    padding: 5px 10px;
    font-size: 16px;
}
.cart-col-2 .qty-input {
    width: 40px;
    font-size: 15px;
    padding: 0;
}

.cart-col-3 {
    flex-basis: 30%;
    text-align: right;
}
.cart-item-subtotal {
    font-size: 18px;
    font-weight: bold;
    color: var(--warna-teks);
    display: block;
    margin-bottom: 10px;
}
.cart-item-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.cart-btn-fav, .cart-btn-remove {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--warna-abu-teks);
    cursor: pointer;
    transition: color 0.2s ease;
}
.cart-btn-fav:hover, .cart-btn-remove:hover {
    color: red;
}

/* (5) Halaman Keranjang - Footer */
.cart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--warna-putih);
    padding: 20px 25px;
    border-top: 1px solid var(--warna-abu-border);
}
.cart-footer-select-all {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}
.cart-footer-total {
    font-size: 16px;
    color: var(--warna-abu-teks);
}
.cart-total-price {
    font-size: 24px;
    font-weight: bold;
    color: var(--warna-biru);
    margin-left: 10px;
}
.btn-checkout {
    background-color: var(--warna-biru);
    color: var(--warna-putih);
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-checkout:hover {
    background-color: var(--warna-biru-gelap);
    transform: scale(1.02);
}
.empty-cart {
    padding: 50px;
    text-align: center;
}

/* (6) Responsif Halaman Keranjang */
/* (6) Responsif Halaman Keranjang */
/* (6) Responsif Halaman Keranjang */
@media (max-width: 768px) {
    .cart-table-header {
        display: none;
    }
    .cart-item-card {
        flex-wrap: wrap; 
        align-items: flex-start;
        gap: 10px;
        padding: 15px 15px;
    }

    /* BARIS 1: Kontainer Utama (Gambar + Info) */
    .cart-col-1 {
        /* Sekarang Col-1 hanya berisi Checkbox, Gambar, dan Info */
        flex-basis: calc(100% - 70px); /* Beri ruang untuk Col-2 di samping */
        gap: 10px;
        align-items: flex-start;
        order: 1; /* Posisikan di baris 1 (kiri) */
        
        /* Tambahan: Pastikan Col-1 yang berisi gambar, checkbox, dan info sejajar */
        display: flex;
        align-items: flex-start;
    }
    .cart-checkbox {
        margin-top: 5px; 
    }
    .cart-item-image {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
    }
    .cart-item-info {
        flex-grow: 1; /* Ambil sisa ruang */
    }
    .cart-item-info h3 {
        font-size: 14px;
        margin-bottom: 2px;
    }
    .cart-item-info .cart-item-price,
    .cart-item-info small {
        font-size: 11px;
    }
    .cart-item-info .cart-item-price {
        /* Tambahkan margin bawah agar tidak terlalu dekat dengan kuantitas */
        margin-bottom: 5px; 
    }


    /* BARIS 1: Kontrol Kuantitas (- 1 +) */
    .cart-col-2 {
        flex-basis: 70px; /* Alokasikan lebar tetap untuk tombol kuantitas */
        justify-content: flex-end;
        align-items: center;
        display: flex;
        order: 2; /* Posisikan di baris 1 (kanan) */
        margin-top: 0;
    }
    .cart-col-2 .quantity-selector {
        padding: 0;
        border-radius: 6px;
    }
    .cart-col-2 .quantity-btn {
        padding: 5px 8px;
        font-size: 14px;
    }
    .cart-col-2 .qty-input {
        width: 30px; 
        font-size: 14px;
    }

    /* BARIS 2: Subtotal & Aksi (Pindah ke baris baru di bawah) */
    .cart-col-3 {
        flex-basis: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding-top: 10px;
        margin-top: 10px;
        border-top: 1px dashed var(--warna-abu-border);
        order: 3; /* Posisikan di baris 2 */
    }
    .cart-item-subtotal {
        font-size: 16px;
    }
    .cart-btn-fav, .cart-btn-remove {
        font-size: 16px;
    }

    /* KOREKSI FOOTER HARGA TOTAL */
    .cart-footer {
        flex-wrap: wrap;
        gap: 15px;
        padding: 15px 15px;
    }
    .cart-footer-total {
        /* Menggabungkan teks Total: dan Harga Biru */
        flex-basis: auto; /* Hilangkan 100% */
        display: flex;
        align-items: flex-end;
        text-align: right;
        order: 1; /* Pindah ke kiri atas bersama Pilih Semua */
    }
    .cart-footer-select-all {
        order: 2;
    }
    .btn-checkout {
        order: 3;
        width: 100%;
    }
    
    /* === PERBAIKAN FONT TOTAL HARGA === */
    .cart-total-price {
        font-size: 18px; /* Turunkan dari 24px ke 18px */
        font-weight: bold;
        color: var(--warna-biru);
        margin-left: 5px; /* Kurangi margin */
        display: inline; /* Agar sejajar dengan teks 'Total:' */
    }
    /* Kecilkan teks 'Total:' */
    .cart-footer-total {
        font-size: 14px; 
    }
    
    /* Penyesuaian akhir untuk memastikan tombol Checkout & Total sejajar di bagian bawah */
    .cart-footer {
        /* Ubah urutan agar Pilih Semua & Total di kiri, Checkout di Kanan/Bawah */
        /* Jika Anda ingin Total sejajar dengan "Pilih Semua", gunakan display: flex pada containernya */
        /* Kita akan menggunakan flex-grow di "Pilih Semua" dan "Total" */

        /* Kita ubah struktur footer agar lebih mudah dikontrol di HP */
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .cart-footer-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    /* Memastikan tata letak footer sesuai gambar yang Anda berikan (Total & Checkout di bawah) */
    .cart-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    .cart-footer-select-all {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* Tambahkan div baru di HTML untuk ini, jika tidak, kita tidak bisa mengontrolnya */
        /* Karena kita tidak bisa mengubah HTML, kita akan memaksa tata letak ini: */
    }
    
    /* Karena gambar menunjukkan Total di baris yang sama dengan Pilih Semua (di bawah item), kita kembalikan ke tata letak yang sesuai */
    .cart-footer-select-all {
        display: block; /* Kembalikan ke blok */
    }
    .cart-footer-total {
        display: inline; /* Agar teks 'Total:' dan harga sejajar */
        font-size: 16px; /* Font size Total: */
        font-weight: normal;
        margin-top: 10px;
    }
    .btn-checkout {
        width: 100%;
        margin-top: 15px;
    }
    /* Tombol Paling Kiri (-) harus memiliki radius 6px di sisi kiri */
    .cart-col-2 #qty-minus {
        border-top-left-radius: 6px !important; 
        border-bottom-left-radius: 6px !important;
        border-top-right-radius: 0 !important; /* Hapus radius di sisi kanan */
        border-bottom-right-radius: 0 !important;
    }

    /* Tombol Paling Kanan (+) harus memiliki radius 6px di sisi kanan */
    .cart-col-2 #qty-plus {
        border-top-right-radius: 6px !important; 
        border-bottom-right-radius: 6px !important;
        border-top-left-radius: 0 !important; /* Hapus radius di sisi kiri */
        border-bottom-left-radius: 0 !important;
    }
}
/* === TAMBAHAN BARU: Halaman Checkout === */

.checkout-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2 kolom, kiri lebih besar */
    gap: 30px;
    align-items: start;
}

.checkout-card {
    background-color: var(--warna-putih);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: 30px;
    margin-bottom: 20px;
}
.checkout-card h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--warna-abu-border);
    padding-bottom: 10px;
}

/* (Box Alamat) */
.address-box {
    border: 2px solid var(--warna-abu-latar);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease-out;
}
.address-box.selected {
    border-color: var(--warna-biru);
    background-color: #f8faff;
}
.address-box input[type="radio"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    vertical-align: top;
}
.address-box label {
    display: inline-block;
    width: calc(100% - 25px); /* Lebar sisa */
    cursor: pointer;
}
.address-box label strong {
    font-size: 16px;
    color: var(--warna-teks);
}
.address-box label small {
    display: block;
    font-size: 14px;
    color: var(--warna-abu-teks);
    margin-top: 4px;
}
.address-box label p {
    font-size: 15px;
    color: var(--warna-teks);
    line-height: 1.5;
    margin-top: 8px;
}
.checkout-form-baru {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--warna-abu-border);
}
.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-group-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
}
.form-group-checkbox label {
    font-size: 14px;
    font-weight: normal;
}

/* (Box Pembayaran) */
.payment-box {
    padding: 10px;
}
.payment-box label {
    font-weight: bold;
    font-size: 16px;
}
.payment-box p {
    font-size: 14px;
    color: var(--warna-abu-teks);
    margin-top: 5px;
    margin-left: 28px;
}


/* (Kolom Kanan - Ringkasan) */
.checkout-summary {
    position: sticky;
    top: 130px; /* Jarak dari atas (Header + Nav) */
    align-self: start;
}
.checkout-item-list {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 10px;
    margin-bottom: 20px;
}
.checkout-item-card {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--warna-abu-latar);
}
.checkout-item-card:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.checkout-item-card img {
    width: 50px;
    aspect-ratio: 1 / 1; /* Pastikan gambar memiliki rasio 1:1 */
    border-radius: 5px;
    border: 1px solid var(--warna-abu-border);
    object-fit: cover;
    flex-shrink: 0;
}
.checkout-item-info {
    flex-grow: 1;
}
.checkout-item-info h3 {
    font-size: 14px;
    font-weight: bold;
    color: var(--warna-teks);
}
.checkout-item-info small {
    font-size: 12px;
    color: var(--warna-abu-teks);
}
.checkout-item-price {
    font-size: 14px;
    font-weight: bold;
}
.checkout-total-details .total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--warna-teks);
}
.checkout-total-details .total-row span:last-child {
    font-weight: bold;
}
.checkout-total-details .total-row.grand-total {
    font-size: 18px;
    font-weight: bold;
    border-top: 1px solid var(--warna-abu-border);
    padding-top: 15px;
    margin-top: 10px;
}
.checkout-total-details .total-row.grand-total span:last-child {
    color: var(--warna-biru);
    font-size: 22px;
}
.checkout-summary .btn-checkout {
    width: 100%;
    margin-top: 15px;
}
/* === STYLE BARU CHECKOUT (SESUAI REQUEST) === */

/* 1. Tombol Midtrans (Virtual Account) */
.btn-midtrans {
    background-color: #0d6efd; /* Biru Bootstrap */
    color: white;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}
.btn-midtrans:hover {
    background-color: #0b5ed7;
}

/* 2. Tombol Transfer Bank (Tombol Pemicu) */
.btn-bank-transfer {
    background-color: #fff;
    color: #333;
    border: 2px solid #ccc;
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
}
.btn-bank-transfer:hover {
    border-color: #666;
    background-color: #f9f9f9;
}

/* 3. Kotak Detail Transfer (Yang muncul setelah klik) */
#bank-transfer-details {
    margin-top: 15px;
    animation: fadeIn 0.3s ease-in-out;
}
.bank-info-box {
    background-color: #f0f8ff; /* Biru muda sangat pudar */
    border: 1px solid #cce5ff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}
.bank-title {
    margin: 0;
    font-size: 14px;
    color: #555;
}
.rekening-number {
    font-size: 24px;
    font-weight: 800;
    color: #000;
    margin: 10px 0 5px 0;
    letter-spacing: 1px;
    font-family: monospace; /* Font monospace biar angka tegas */
}
.bank-name {
    margin: 0;
    font-weight: 600;
    color: #333;
    font-size: 16px;
    text-transform: uppercase;
}

/* Tombol WA di dalam kotak bank */
.btn-whatsapp {
    margin-top: 10px;
    background-color: #25D366;
    color: white;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
}
.btn-whatsapp:hover {
    background-color: #128C7E;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- ANIMASI ERROR --- */
@keyframes shakeError {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); border-color: #dc3545; }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); border-color: #dc3545; }
}

.shake-error .payment-card-content {
    animation: shakeError 0.4s ease-in-out;
    border-color: #dc3545 !important; /* Paksa border merah */
    color: #dc3545;
}
@keyframes shake {
        0% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        50% { transform: translateX(5px); }
        75% { transform: translateX(-5px); }
        100% { transform: translateX(0); }
    }
    
    .shake-error {
        border: 2px solid #dc3545 !important; /* Warna Merah */
        animation: shake 0.4s ease-in-out;
        box-shadow: 0 0 8px rgba(220, 53, 69, 0.4);
        background-color: #fff8f8;
    }

/* --- RESPONSIF HP (Mobile) --- */
@media (max-width: 480px) {
    .payment-grid-container {
        gap: 10px; /* Jarak lebih rapat */
    }
    
    .payment-card-content {
        padding: 15px 10px; /* Padding lebih kecil */
    }
    
    .payment-card-content i {
        font-size: 22px; /* Icon lebih kecil */
        margin-bottom: 6px;
    }
    
    .payment-card-content span {
        font-size: 12px; /* Font lebih kecil */
    }
}

/* (Responsif Halaman Checkout) */
@media (max-width: 992px) {
    .checkout-layout {
        grid-template-columns: 1fr; /* 1 kolom */
    }
    .checkout-summary {
        position: static; /* Matikan sticky */
        top: auto;
    }
}
@media (max-width: 768px) {
    .checkout-card {
        padding: 20px;
    }
}
/* === TOMBOL WHATSAPP & DIVIDER === */

/* Divider "ATAU" */
.checkout-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 15px 0;
    color: var(--warna-abu-teks);
}
.checkout-divider::before,
.checkout-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--warna-abu-border);
}
.checkout-divider span {
    padding: 0 10px;
    font-size: 13px;
    font-weight: 500;
}

/* Tombol WhatsApp */
.btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    background-color: #25D366; /* Warna Resmi WA */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(37, 211, 102, 0.2);
    text-decoration: none; /* Jaga-jaga jika pakai tag <a> */
}

.btn-whatsapp:hover {
    background-color: #128C7E; /* Warna WA Gelap saat hover */
    box-shadow: 0 6px 12px rgba(37, 211, 102, 0.3);
    transform: translateY(-2px);
}

.btn-whatsapp i {
    font-size: 20px; /* Ukuran Ikon */
}

/* Responsif untuk Mobile */
@media (max-width: 768px) {
    .btn-whatsapp {
        font-size: 15px;
        padding: 12px;
    }
}
/* === TAMBAHAN BARU: Halaman Status Pesanan === */

.status-page-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px;
    background-color: var(--warna-putih);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.status-header {
    text-align: center;
    border-bottom: 1px solid var(--warna-abu-border);
    padding-bottom: 20px;
    margin-bottom: 30px;
}
.status-header i {
    font-size: 50px;
    margin-bottom: 15px;
}
.status-header h1 {
    font-size: 28px;
    margin-bottom: 5px;
}
.status-header p {
    font-size: 16px;
    color: var(--warna-abu-teks);
}
/* Warna Status */
.status-menunggu i, .status-menunggu h1 { color: #f39c12; }
.status-berhasil i, .status-berhasil h1 { color: #2ecc71; }
.status-gagal i, .status-gagal h1 { color: #e74c3c; }

.order-details-summary {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}
.order-details-summary h3 {
    font-size: 18px;
    margin-bottom: 15px;
}
.order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Tambahan: agar rapi */
    font-size: 15px;
    margin-bottom: 10px;
}
.order-summary-row strong {
    font-weight: bold;
    color: var(--warna-teks);
}
.order-summary-row.total {
    font-size: 18px;
    font-weight: bold;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--warna-abu-border);
}

/* Menggunakan style dari checkout.css agar konsisten */
.order-items-list .checkout-item-card {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--warna-abu-latar);
    
    /* Ambil style dasar dari checkout.css (Asumsi) */
    display: flex;
    align-items: center;
    gap: 15px;
}
.order-items-list .checkout-item-card img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 5px;
    border: 1px solid var(--warna-abu-border);
    flex-shrink: 0;
}
.order-items-list .checkout-item-info {
    flex-grow: 1;
}
.order-items-list .checkout-item-info h3 {
    font-size: 14px;
    font-weight: bold;
}
.order-items-list .checkout-item-info small {
    font-size: 12px;
    color: var(--warna-abu-teks);
}
.order-items-list .checkout-item-price {
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}

.payment-actions {
    text-align: center;
}
.btn-bayar-lagi {
    background-color: var(--warna-biru);
    color: white;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}
.btn-bayar-lagi:hover {
    background-color: #0056b3;
}

/* CSS RESPONSIVE */

/* Untuk Tablet */
@media (max-width: 768px) {
    .status-page-container {
        margin: 20px auto;
        padding: 20px;
    }
    .status-header h1 {
        font-size: 24px; /* Kecilkan judul */
    }
    .status-header i {
        font-size: 45px; /* Kecilkan ikon */
    }
    
    .order-summary-row {
        flex-direction: column;
        align-items: flex-start; /* Rata kiri */
        gap: 5px; /* Jarak antara judul & nilai */
        margin-bottom: 15px;
    }
    
    .order-summary-row.total {
        flex-direction: row;
        align-items: center;
    }
}

/* Untuk Handphone */
@media (max-width: 480px) {
    .status-page-container {
        margin: 15px 10px; /* Beri jarak di samping */
        padding: 15px;
    }
    .status-header h1 {
        font-size: 22px;
    }
    .status-header i {
        font-size: 40px;
    }
    
    .order-items-list .checkout-item-card {
        flex-wrap: wrap; /* Izinkan item wrapping */
        gap: 10px;
    }
    .order-items-list .checkout-item-card img {
        width: 40px;
        height: 40px;
    }
    .order-items-list .checkout-item-info {
        flex-basis: calc(100% - 50px); 
        flex-grow: 1;
    }
    .order-items-list .checkout-item-price {
        flex-basis: 100%;
        text-align: right;
        margin-top: 5px;
    }
    
    .btn-bayar-lagi, .btn-primary {
        width: 100%;
    }
}
/* --- Navigasi Tab --- */
.profil-tabs-nav {
    display: flex;
    border-bottom: 2px solid var(--warna-abu-latar);
    margin-bottom: 25px;
}
.profil-tab-btn {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--warna-abu-teks);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px; /* Agar border bawah menimpa border nav */
}
.profil-tab-btn.active {
    color: var(--warna-biru);
    border-bottom-color: var(--warna-biru);
}

/* --- Konten Tab --- */
.profil-tab-content {
    display: none; /* Sembunyi by default */
}
.profil-tab-content.active {
    display: block; /* Tampil jika aktif */
}

/* --- Kartu Menunggu Pembayaran --- */
.pesanan-card-menunggu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--warna-abu-border);
    border-radius: 10px;
    margin-bottom: 15px;
}
.pesanan-card-menunggu .info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pesanan-card-menunggu .info strong {
    font-size: 18px;
}
.pesanan-card-menunggu .info small {
    color: var(--warna-abu-teks);
}
.pesanan-card-menunggu .actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.pesanan-card-menunggu .btn-bayar {
    background-color: var(--warna-biru);
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--warna-biru); /* Border agar konsisten */
    display: inline-block; /* Wajib untuk tag <a> agar padding terbaca */
    transition: all 0.2s ease; /* Efek hover */
}

/* Tambahkan juga efek hover-nya */
.pesanan-card-menunggu .btn-bayar:hover {
    background-color: #0056b3; /* Warna biru lebih gelap */
    border-color: #0056b3;
}
.pesanan-card-menunggu .btn-batal-pesanan {
    background-color: transparent;
    color: #e74c3c;
    border: 1px solid #e74c3c;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
}
.pesanan-card-menunggu .btn-batal-pesanan:hover {
    background-color: #fef0f0;
}

/* --- Kartu Status Pesanan (Timeline) --- */
.pesanan-card-status {
    padding: 20px;
    border: 1px solid var(--warna-abu-border);
    border-radius: 10px;
    margin-bottom: 20px;
}
.pesanan-card-status .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed var(--warna-abu-border);
    padding-bottom: 15px;
    margin-bottom: 25px;
}
.pesanan-card-status .info strong {
    font-size: 18px;
}

.timeline-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    color: var(--warna-abu-teks);
}
.timeline-step .dot {
    width: 20px;
    height: 20px;
    background-color: var(--warna-abu-latar);
    border: 3px solid var(--warna-abu-border);
    border-radius: 50%;
    transition: all 0.3s ease;
}
.timeline-step .label {
    font-size: 14px;
    font-weight: bold;
}
.timeline-line {
    flex-grow: 1;
    height: 4px;
    background-color: var(--warna-abu-latar);
    position: relative;
    bottom: 8px; /* Sejajarkan dengan tengah dot */
    transition: all 0.3s ease;
}

/* Style untuk status "Completed" */
.timeline-step.completed .dot {
    background-color: #2ecc71; /* Hijau */
    border-color: #27ae60;
}
.timeline-step.completed .label {
    color: var(--warna-teks);
}
.timeline-line.completed {
    background-color: #2ecc71; /* Hijau */
}

/* Style untuk status "Batal" */
.status-batal {
    font-size: 18px;
    font-weight: bold;
    color: #e74c3c;
    text-align: center;
}
.status-batal i {
    margin-right: 8px;
}

/* --- Responsif Halaman Pesanan --- */
@media (max-width: 576px) {
    .pesanan-card-menunggu {
        flex-direction: column;
        align-items: stretch;
    }
    .pesanan-card-menunggu .actions {
        flex-direction: column;
    }
    .pesanan-card-menunggu .btn-bayar,
    .pesanan-card-menunggu .btn-batal-pesanan {
        width: 100%;
        text-align: center;
    }
    .pesanan-card-status .info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .timeline-step .label {
        font-size: 12px; /* Kecilkan font di HP */
    }
}
/* FILE: style.css (Tambahan untuk Sidebar Profil) */

.profile-sidebar-nav a {
    display: flex;
    justify-content: space-between; /* Untuk mendorong badge ke kanan */
    align-items: center;
}

/* Mengatur badge di sidebar agar rapi di kanan */
.profile-sidebar-nav .waiting-badge {
    position: relative !important; /* Nonaktifkan absolute positioning dari header */
    top: auto !important;
    right: auto !important;
    margin-left: auto; /* Ini mendorong badge ke ujung kanan */
    flex-shrink: 0; /* Agar badge tidak menyusut */
}
/* =========================================
   STYLE KHUSUS HALAMAN MONTESSORI (REVISI)
   ========================================= */

/* Reset Container */
.montessori-page-container {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #fff;
    line-height: 0; /* TRIK JITU: Menghilangkan gap putih kecil di bawah gambar */
}

/* 1. BANNER STYLE */
.montessori-banner {
    width: 100%;
    /* Tinggi kita buat auto atau fix, tapi pastikan display block/flex */
    height: 350px; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; /* Pastikan margin 0 */
    border: none;
}

.montessori-banner .banner-overlay {
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    /* Reset line-height agar teks terbaca normal (karena container induk di-nol-kan) */
    line-height: 1.5; 
}

.montessori-banner h1 {
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin: 0;
}

.montessori-banner p {
    font-size: 1.2rem;
    margin-top: 5px;
    font-weight: 400;
}

/* 2. GRID 3 KOLOM (NO GAP & RATIO 3:4) */
.montessori-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto; /* JANGAN dipatok tinggi fix, biarkan mengikuti aspek rasio gambar */
    margin: 0;
    padding: 0;
    /* Menghilangkan celah antar elemen flex */
    gap: 0; 
}

.montessori-item {
    flex: 1; 
    min-width: 300px; 
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
    
    /* --- REVISI RATIO 3:4 --- */
    /* Ini membuat kotak selalu berbentuk 3:4 (Portrait) berapapun lebar layarnya */
    aspect-ratio: 3/4; 
    height: auto; /* Reset height agar mengikuti ratio */
    
    cursor: pointer;
    background-color: #f0f0f0; /* Warna dasar loading */
}

/* Link Wrapper */
.montessori-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

/* 3. GAMBAR & ANIMASI ZOOM */
.montessori-item .img-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.montessori-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block; /* Wajib block untuk hapus gap bawah */
    vertical-align: bottom; /* Memastikan tidak ada celah garis dasar */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Efek saat Mouse Entered (Zoom In) */
.montessori-item:hover img {
    transform: scale(1.15);
}

/* Overlay Judul (Desktop Only) */
.cat-title-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
    z-index: 2;
    text-align: center;
    width: 90%;
    opacity: 1;
    transition: opacity 0.3s;
    line-height: 1.2; /* Reset line height untuk teks */
}

/* Saat hover judul hilang biar fokus ke tombol */
.montessori-item:hover .cat-title-overlay {
    opacity: 0; 
}

/* Overlay Hitam Tipis saat Hover */
.montessori-item .hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
    transition: background 0.3s;
    z-index: 1;
}
.montessori-item:hover .hover-overlay {
    background: rgba(0,0,0,0.1);
}

/* 4. TOMBOL MENGAMBANG (JELAJAHI) */
.floating-btn {
    position: absolute;
    bottom: 40px; 
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFD700;
    color: #333;
    font-weight: bold;
    font-size: 16px;
    padding: 12px 30px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 3;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    white-space: nowrap;
    line-height: 1; /* Reset line height tombol */
}

.montessori-item:hover .floating-btn {
    background-color: #ffcc00;
    transform: translateX(-50%) translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

/* =========================================
   RESPONSIVE (HP / MOBILE)
   ========================================= */
@media (max-width: 768px) {
    .montessori-banner {
        height: 180px; /* Sesuaikan tinggi banner di HP */
    }
    .montessori-banner h1 { 
        font-size: 1.5rem; 
    }
    
    .montessori-grid {
        flex-direction: column; /* Tumpuk ke bawah */
    }
    
    .montessori-item {
        width: 100%;
        /* Ratio tetap 3:4, tapi karena width 100%, gambarnya akan memanjang ke bawah (Potret besar) */
        aspect-ratio: 3/4; 
        height: auto; 
    }

    /* --- PERMINTAAN 1: HILANGKAN NAMA DI HP --- */
    .cat-title-overlay {
        display: none !important; /* Paksa hilang */
    }

    /* Tombol tetap muncul */
    .floating-btn {
        bottom: 30px;
        padding: 10px 25px;
        font-size: 14px;
    }
}