/* === 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%;
}
/* === Perbaikan Hero Slider === */

/* 1. Kontainer Utama Slider */
.hero-slider {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    /* Desktop: Tinggi tetap agar konsisten */
    height: 450px; 
    background-color: #eee;
}

/* 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;
    
    /* Gambar Background */
    background-size: cover;
    background-position: center center; /* Pastikan gambar di tengah */
    background-repeat: no-repeat;
}

.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, .kategori-unggulan {
    margin-top: 40px;
}
.promo-section h2, .kategori-unggulan h2 {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.promo-slider {
    display: flex;
    overflow-x: auto; /* Agar bisa di-scroll horizontal */
    scroll-snap-type: x mandatory; /* Efek magnet saat scroll */
    gap: 0; /* Rapat seperti slider hero */
    
    /* SAMAKAN DENGAN HERO DESKTOP */
    width: 100%;
    height: 450px; /* Tinggi fix hero */
    border-radius: 10px;
    background-color: #eee;
    
    /* Sembunyikan scrollbar agar rapi */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}
/* Sembunyikan scrollbar (Chrome/Safari) */
.promo-slider::-webkit-scrollbar {
    display: none;
}

.promo-item {
    /* Agar setiap item memenuhi lebar container */
    min-width: 100%; 
    height: 100%;
    scroll-snap-align: start; /* Titik berhenti scroll */
    position: relative;
}

.promo-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.promo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Gambar dipotong rapi agar memenuhi kotak */
    border-radius: 10px; /* Radius sama dengan container */
}

.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: #000; /* Warna teks hitam */

    /* Gaya Background Kuning (Stabilo) */
    background-color: #fff100; /* Warna kuning terang */
    padding: 5px 15px;
    border-radius: 5px;
    text-transform: uppercase;
    
    /* Atur z-index agar pasti di atas gambar */
    position: relative; 
    z-index: 2;
}
/* === 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 TAMPILAN MOBILE (ANDROID) === */
@media (max-width: 768px) {

    /* 1. Container Slider - Pastikan Rasio Terjaga */
    /* 1. Container Slider - Pastikan Rasio Terjaga & Sentuhan Aktif */
    .hero-slider {
        height: auto !important;
        min-height: 200px !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        position: relative !important;
        margin-bottom: 20px;
        
        /* === TAMBAHAN PENTING UNTUK SWIPE === */
        /* Ini agar browser tidak memblokir event touchstart JS kamu */
        touch-action: pan-y !important; 
        
        /* Mencegah gambar ikut ter-drag saat mau swipe */
        -webkit-user-drag: none !important;
        user-select: none !important;
    }
    

    /* 2. Slide Item - Gambar Full */
    .hero-slider .slide {
        height: 100% !important;
        width: 100% !important;
        border-radius: 10px !important;
    }

    /* 3. CAPTION KUNING (FIXED POJOK KIRI BAWAH) */
    .hero-slider .slide-caption {
        /* POSISI MUTLAK DI KIRI BAWAH */
        position: absolute !important;
        top: auto !important;    /* PENTING: Matikan tarikan ke atas */
        bottom: 15px !important; /* Jarak dari bawah */
        left: 15px !important;   /* Jarak dari kiri */
        right: auto !important;  /* Jangan stretch ke kanan */
        
        /* UKURAN: Ikuti isi konten (Shrink to fit) */
        width: auto !important;
        height: auto !important; /* PENTING: Jangan stretch vertikal */
        max-width: 65% !important; /* Batasi lebar agar tidak nabrak kanan */
        
        /* TAMPILAN: Kotak Rounded */
        background-color: #f7da46 !important;
        padding: 10px 15px !important;
        border-radius: 8px !important; /* Sudut sedikit melengkung (bukan oval) */
        box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
        
        /* ISI: Flexbox Rata Kiri */
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 5px !important;

        /* LAYER: Di bawah titik indikator */
        z-index: 5 !important;
        opacity: 1 !important;
        transform: none !important; /* Hapus efek centering jika ada */
    }

    /* 4. JUDUL (Font Pas) */
    .hero-slider .slide-caption h1 {
        font-size: 14px !important;
        margin: 0 !important;
        color: #000 !important;
        font-weight: bold !important;
        line-height: 1.2 !important;
        text-align: left !important;
        
        /* Mencegah teks terlalu panjang */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Sembunyikan Deskripsi */
    .hero-slider .slide-caption p {
        display: none !important;
    }

    /* 5. TOMBOL (Kecil) */
    .btn-slider {
        display: inline-block !important;
        background-color: var(--warna-biru) !important;
        color: #fff !important;
        font-size: 11px !important;
        padding: 5px 12px !important;
        border-radius: 5px !important;
        border: none !important;
        margin-top: 0 !important;
    }

    /* 6. INDIKATOR TITIK (Layer Paling Atas) */
    .slider-indicators {
        display: flex !important;
        bottom: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 20 !important; /* PENTING: Harus lebih besar dari caption (5) */
        gap: 5px !important;
    }

    .slider-indicators .dot {
        width: 8px !important;
        height: 8px !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; 
    }
    .promo-slider {
        height: auto !important; /* Reset tinggi desktop */
        min-height: auto !important;
        aspect-ratio: 16 / 9 !important; /* Rasio landscape HP */
        border-radius: 12px !important; /* Radius sudut */
        margin-bottom: 20px;
    }

    .promo-item {
        min-width: 100%; /* Tetap full width */
        height: 100%;
        border-radius: 12px !important;
    }

    .promo-item img {
        border-radius: 12px !important;
        /* Pastikan gambar mengisi penuh rasio 16:9 */
        object-fit: cover !important; 
    }
}
@media (max-width: 768px) {
    
    /* 1. Kontainer Slider: Kurangi padding agar lebih mepet layar */
    .berita-slider-wrapper {
        padding: 0 10px; /* Sebelumnya 15px, dikurangi jadi 10px */
    }

    .berita-slider {
        display: flex;       
        gap: 10px;           /* Jarak antar kartu diperkecil sedikit */
        overflow-x: auto !important; 
        scroll-snap-type: x mandatory; 
        scrollbar-width: none; 
        -ms-overflow-style: none;
        padding-bottom: 15px;
        
        /* Agar kartu pertama tidak nempel banget di kiri saat awal */
        padding-left: 5px; 
        padding-right: 5px;
    }
    .berita-slider::-webkit-scrollbar {
        display: none;
    }

    /* 2. Gaya Card Berita: LEBARKAN KARTU */
    .berita-slider .berita-card {
        /* INI KUNCINYA: Ubah 80% jadi 93% agar margin samping tipis */
        flex: 0 0 93%; 
        max-width: 93%;
        
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Bayangan sedikit diperhalus */
        scroll-snap-align: center; /* Tetap berhenti di tengah */
        border-radius: 8px; /* Pastikan sudut rounded rapi */
        background-color: #fff; /* Pastikan background putih */
    }
    
    /* 3. Judul Section */
    .berita-unggulan h2 {
        font-size: 18px; /* Ukuran font disesuaikan agar proporsional */
        margin-bottom: 12px;
        padding-left: 5px; /* Sejajar dengan kartu */
    }

    /* 4. Area Gambar */
    .berita-slider .berita-image-box {
         /* Opsional: Jika ingin gambar tidak terlalu tinggi, bisa atur aspect-ratio di sini */
         /* aspect-ratio: 16 / 9; */
    }

    /* 5. Area Konten */
    .berita-slider .berita-content {
        padding: 12px; /* Padding dalam sedikit dirapikan */
        min-height: auto; /* Biarkan tinggi menyesuaikan isi */
    }
    .berita-content .berita-title-link {
        font-size: 15px; /* Font judul sedikit dibesarkan agar terbaca */
        margin-bottom: 5px;
        line-height: 1.3;
        font-weight: 600;
        
        /* Batasi judul max 2 baris agar rapi */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .berita-content .berita-meta {
        flex-direction: row; /* Jejerkan tanggal dan 'baca' ke samping jika muat */
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
        gap: 10px;
    }
    .berita-meta small {
        font-size: 11px; 
        color: #888;
    }
    .berita-meta .read-more {
        font-size: 11px; 
        font-weight: bold;
        color: var(--warna-biru); /* Pastikan warna ini ada, atau ganti hex */
    }

    /* 6. Hilangkan Tombol Navigasi Panah di HP */
    .slider-berita-nav {
        display: none !important; 
    }
}


/* === Koreksi Responsif Kategori Unggulan === */
@media (max-width: 768px) {
    .kategori-unggulan h2 {
        font-size: 20px;
    }
    .kategori-container {
        /* Ubah menjadi 3 kolom agar tidak terlalu kecil */
        grid-template-columns: repeat(3, 1fr); 
        gap: 15px;
    }
    .kategori-box {
        aspect-ratio: 1 / 1;
        transform: none !important; /* Nonaktifkan efek hover transform di HP */
    }
    .kategori-box:hover {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Jaga efek shadow */
    }
    .kategori-box .kategori-image-bg {
        padding-bottom: 15px;
    }
    .kategori-box .kategori-label {
        font-size: 12px;
        padding: 3px 8px;
    }
}

@media (max-width: 576px) {
    .kategori-container {
        /* Tetap 2 kolom */
        grid-template-columns: repeat(2, 1fr); 
    }

    /* === TRIK AGAR KATEGORI TERAKHIR (GANJIL) DI TENGAH === */
    .kategori-container .kategori-box:last-child {
        /* Membuat elemen ini membentang sepanjang 2 kolom (full row) */
        grid-column: span 2; 
        
        /* Mengatur posisi elemen ke tengah container */
        justify-self: center;
        
        /* PENTING: Mengatur ulang lebar agar tidak gepeng/lebar sendiri. 
           Rumus: 50% lebar container dikurangi setengah dari gap (15px / 2 = 7.5px) */
        width: calc(50% - 7.5px); 
    }
}
/* === 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;
}

/* === 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 */
}

/* 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;
    }
}
/* === 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; /* (JS akan perbaiki ini) */
    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: 15px 5% 10px 5%;
    height: auto;
    max-height: 350px; /* <--- ini biar gak nutup setengah layar */
    overflow: hidden; /* biar gak melebar aneh */
    
    visibility: hidden;
    opacity: 0;
    transform: translateY(-20px); 
    transition: all 0.3s ease-out;
}

/* (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: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 10px; 
    max-width: 1600px; 
    margin: 0 auto;
    padding-right: 40px; 
}

.mega-menu-col h3 {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase; 
    margin-bottom: 12px; 
    padding-bottom: 8px; 
    border-bottom: 1px solid #ddd; 
    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 {
    /* Hapus properti Grid lama (grid-column, align-self, dll) */
    
    position: absolute;   /* Membuat elemen mengambang bebas dari Grid */
    bottom: 25px;         /* Mengatur jarak dari bawah (Semakin besar angka, semakin naik ke atas) */
    right: 50px;          /* Jarak dari kanan (sesuaikan agar rapi) */
    opacity: 0.5;
    z-index: 1;           /* Pastikan tidak tertutup background */
    pointer-events: none; /* PENTING: Agar logo tidak menghalangi jika ada link yang tertutup di area itu */
}

.mega-menu-logo img {
    height: 45px; 
    width: auto;
    filter: none;
    display: block; /* Pastikan tidak ada extra space di bawah gambar */
}

/* (7) Responsif Mega Menu */
@media (max-width: 992px) {
    .mega-menu-popup {
        display: none;
    }
}
/* === TAMBAHAN BARU: Halaman Kontak === */

/* Ini adalah card abu-abu pembungkusnya */
.contact-card {
    background-color: var(--warna-putih); /* Latar abu-abu gelap dari putih */
    border-radius: 12px;
    padding: 50px; /* Padding besar agar tidak mepet */
    max-width: 900px; /* Batasi lebar card */
    margin: 20px auto 40px auto; /* Posisikan di tengah */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.contact-title {
    font-size: 24px;
    font-weight: bold;
    color: var(--warna-teks);
    margin-bottom: 25px;
    text-transform: uppercase;
    text-align: left; /* Rata Kiri */
}

.contact-content {
    text-align: left; /* Rata Kiri */
    font-size: 16px;
    line-height: 1.8;
    color: var(--warna-abu-teks); /* Teks abu-abu */
}

.contact-content p {
    margin-bottom: 10px; /* Jarak antar baris */
}

.contact-content strong {
    color: var(--warna-teks); /* Teks tebal jadi hitam */
    font-weight: bold;
}

.map-link {
    color: var(--warna-biru);
    text-decoration: underline;
    font-weight: bold;
    word-break: break-all; /* TAMBAHKAN INI (Agar link bisa patah) */
}
.map-link:hover {
    color: var(--warna-biru-gelap);
}

/* Responsif untuk Halaman Kontak */
@media (max-width: 768px) {
    .contact-card {
        padding: 25px; /* Padding lebih kecil di HP */
    }
    .contact-title {
        font-size: 22px;
    }
    .contact-content {
        font-size: 15px;
    }
}
/* === 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;
    }
    
    /* Efek sentuh di HP */
    .product-card:active {
        transform: scale(0.98); /* Efek pencet sedikit */
    }

    /* 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;
    }
}

/* === 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 */
    scroll-snap-type: x mandatory;
}
/* Sembunyikan scrollbar (Chrome/Safari) */
.serupa-slider-track-container::-webkit-scrollbar {
    display: none;
}
.serupa-slider-track {
    display: flex;
    gap: 20px;
    padding-bottom: 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;
    scroll-snap-align: start; /* TAMBAHKAN INI */
}
.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 */
}

/* 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. GAMBAR (Paksakan 1x1 penuh tanpa gap) */
    .product-gallery {
        /* Tambahkan aspect-ratio ke container gambar */
        aspect-ratio: 1 / 1; 
        overflow: hidden; 
    }
    .product-gallery .main-product-image {
        /* Pastikan gambar menutupi seluruh container 1x1 */
        height: 100%; 
        object-fit: cover; 
    }

    /* 2. FONT & JUDUL */
    .product-detail-title {
        font-size: 24px; /* Turunkan dari 32px */
        line-height: 1.2;
    }
    .product-detail-subtitle {
        font-size: 14px; /* Turunkan dari 16px */
        margin-bottom: 15px;
    }

    /* 3. HARGA */
    .price-tag-detail {
        font-size: 20px; /* Turunkan dari 24px */
        padding: 8px 12px; /* Kurangi padding */
        margin-bottom: 20px;
    }
    
    /* 4. TOMBOL & AKSI */
    .product-actions {
        flex-wrap: wrap; 
        margin-bottom: 15px;
        gap: 10px; /* Kurangi jarak antar tombol */
    }
    
    .quantity-selector input {
        width: 40px; /* Kecilkan input */
        padding: 8px 0;
    }
    .quantity-selector .quantity-btn {
        padding: 8px 10px; /* Kecilkan padding +/- */
        font-size: 16px;
    }
    
    .btn-add-to-cart {
        padding: 10px 15px; /* Kecilkan tombol keranjang */
        font-size: 14px;
    }
    
    .btn-favorite {
        padding: 10px 12px; /* Sesuaikan tombol favorit */
        font-size: 16px;
    }

    /* 5. PERBAIKAN ACCORDION */
    .accordion-toggle {
        font-size: 16px;
        padding: 15px 0;
    }
    /* KOREKSI: CONTAINER ACTIONS */
    .product-actions {
        gap: 10px; /* Kurangi jarak horizontal dari 15px */
    }
    
    /* KOREKSI: FAVORITE BUTTON (Dibuat lebih ringkas) */
    .btn-favorite {
        /* Kita kecilkan ukurannya agar sisa ruang cukup */
        width: 40px; 
        height: 40px;
        padding: 0; /* Pastikan tidak ada padding berlebih yang membuat melebar */
        flex-shrink: 0; /* Pastikan tombol tidak menyusut sampai hilang */
        font-size: 16px; /* Kecilkan ukuran ikon */
    }

    /* KOREKSI: QUANTITY SELECTOR */
    .quantity-selector {
        /* Tentukan lebar yang ringkas dan tidak menyusut */
        width: 90px; 
        flex-shrink: 0;
    }
    .quantity-selector input {
        width: 30px; /* Kecilkan input angka */
    }

    /* KOREKSI: TOMBOL CART */
    .btn-add-to-cart {
        /* Tidak perlu diubah, biarkan flex-grow: 1 tetap mengambil sisa ruang */
        padding: 10px 15px; /* Pastikan paddingnya ringkas */
        font-size: 15px;
    }
}
/* === 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;
}

/* === 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;
}
/* 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;
}

/* (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 */
}