/* ============================================= */
/* --- Variabel Global & Reset Dasar --- */
/* ============================================= */
html {
    scroll-behavior: smooth; /* Untuk membuat scroll halaman menjadi smooth */
}

:root { /* TEMA TERANG ("Overworld") */
    --body-bg: #F5F5F5; /* Warna latar belakang */
    --header-top-bg: #2D3748; /* Warna latar belakang header atas */
    --header-main-bg: #FFFFFF; /* Warna latar belakang header utama */
    --card-bg: #FFFFFF; /* Warna latar belakang kartu produk */
    --section-bg: #e0dede; /* Warna latar belakang section */
    --hero-bg: #1A202C; /* Warna latar belakang hero section */

    --heading-color: #222222; /* Warna teks judul */
    --text-color: #404040; /* Warna teks umum */
    --hero-text-color: #FFFFFF; /* Warna teks hero section */
    --light-text-color: #F5F5F5; /* Warna teks terang untuk kontras di atas latar belakang gelap */

    --accent-color: #3DCEC4;/* Aksen Diamond */
    --accent-text-color: #181A1B;/* Teks di atas aksen */
    --subtle-border-color: #EAEAEA; /* Warna border halus untuk elemen seperti dropdown, tombol, dll. */

    --font-heading: 'Press Start 2P', cursive; /* Font untuk heading */
    --font-body: 'Inter', sans-serif; /* Font untuk teks umum */
}

body.dark-mode { /* TEMA GELAP PREMIUM (Slate/Zinc) */
    --body-bg: #0f172a; /* Slate 900 */
    --header-top-bg: #020617; /* Slate 950 */
    --header-main-bg: #1e293b; /* Slate 800 */
    --card-bg: #1e293b; /* Slate 800 */
    --section-bg: #0f172a; /* Slate 900 */
    --hero-bg: #020617; /* Slate 950 */

    --heading-color: #f8fafc; /* Slate 50 */
    --text-color: #cbd5e1; /* Slate 300 */
    --hero-text-color: #f8fafc; /* Slate 50 */
    --light-text-color: #f1f5f9; /* Slate 100 */

    --accent-color: #38bdf8; /* Sky 400 */
    --accent-text-color: #020617; /* Slate 950 */
    --subtle-border-color: #334155; /* Slate 700 */
}



.empty-cart-img {
    filter: grayscale(1);
    opacity: 0.3;
}
body.dark-mode .empty-cart-img {
    filter: brightness(0) invert(1) grayscale(1);
    opacity: 0.5;
}

* {
    box-sizing: border-box; /* Mengatur box-sizing untuk semua elemen */
    margin: 0; /* Menghapus margin default */
    padding: 0; /* Menghapus padding default */
}

body {
    background-color: var(--body-bg);
    color: var(--text-color);
    font-family: var(--font-body);
    line-height: 1.6; 
    transition: background-color 0.3s, color 0.3s; /* Transisi halus saat tema berubah */
    display: flex; 
    flex-direction: column; /* Membuat elemen di dalamnya (header, main, footer) menumpuk ke bawah */
    min-height: 100vh; /* Mengatur tinggi minimal body adalah 100% tinggi layar */
}

a {
    transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
a:hover:not(.btn):not(.cta-button) {
    color: var(--accent-color);
}
.container {
    max-width: 1200px; /* Batas maksimal lebar konten */
    margin: 0 auto; /* Pusatkan konten ketengah */
    padding: 0 20px; 
}
main {
    flex-grow: 1; /* Membuat main mengambil sisa ruang yang tersedia (footer berpengaruh akan selalu kebawah) */
}

/* --- Utility & Button Global --- */
#logout-btn:hover {
    background-color: #c82333; /* Warna merah sedikit lebih gelap */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.cta-button,
.product-card-footer .buy-btn,
.auth-button,
.btn,
.faq-question,
.category-filters button,
.dropdown-content a,
.dropdown-content button,
.hamburger-btn span {
    font-family: var(--font-body);
}
.home-carousel-content .cta-button {
    font-family: var(--font-body);
}

/* ============================================= */
/* --- Header --- */
/* ============================================= */
/* --- Struktur Utama Header --- */
header {
    background: var(--header-main-bg); /* Warna latar belakang header utama (dinamis tergantung tema) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* Bayangan halus di bawah header */  
    position: sticky; /* Membuat header tetap di atas saat scroll */
    top: 0;
    z-index: 100; /* Pastikan header berada di atas elemen lain */
    transition: background-color 0.3s; /* Transisi halus saat tema berubah */
}
.header-top .container,
.header-main .container {
    display: flex; /* Mengaktifkan Flexbox: membuat elemen di dalamnya berjajar horizontal */
    justify-content: space-between; /* Mendorong elemen pertama ke kiri dan elemen terakhir ke kanan */
    align-items: center; /* Memastikan semua elemen sejajar secara vertikal di tengah */
}
.header-top {
    background-color: var(--header-top-bg); 
    color: var(--light-text-color); 
    padding: 0.3rem 0; 
    font-size: 0.85rem; 
    transition: background-color 0.3s; /* Transisi halus saat tema berubah */
}
.header-top-nav ul {
    list-style: none; /* Menghilangkan tanda titik (bullet) dari daftar */
    display: flex; /* Membuat item menu (<li>) berjajar horizontal */
    align-items: center; /* Memastikan semua item menu sejajar di tengah */
    gap: 20px; /* Memberi jarak antar setiap item menu */
}
.header-top-nav a {
    color: var(--light-text-color);
    text-decoration: none; /* Menghilangkan garis bawah dari link */
}
.a-header-top:hover {
    color: var(--accent-color); /* Mengubah warna link menjadi warna aksen saat kursor menyentuh */
}
.social-media {
    display: flex; /* Membuat ikon-ikon di dalamnya berjajar horizontal */
    align-items: center; /* Memastikan ikon sejajar di tengah secara vertikal */
    gap: 15px; /* Memberi jarak 15px antar setiap ikon */
}

/* styling logo */
.logo {
    display: flex;         /* Membuat gambar dan teks logo sejajar ke samping */
    align-items: center;   /* Menyejajarkan gambar dan teks secara vertikal di tengah */
    gap: 15px;             /* Memberi jarak antara gambar dan teks */
    text-decoration: none; /* Menghilangkan garis bawah dari link */
}
.logo img {
    height: 50px;
}
.logo span {
    font-family: var(--font-heading); /* Menggunakan font 'Press Start 2P' */
    font-size: 1.5rem;                /* Ukuran teks logo */
    color: var(--heading-color);      /* Warna teks logo, bisa berubah saat ganti tema */
}
.logo-ig {
    height: 20px; /* Mengatur tinggi masing-masing ikon */
    border-radius: 4px; /* Memberi sedikit lengkungan pada sudut ikon */
}
.logo-fb {
    height: 30px;
}
.logo-github {
    height: 21px;
    border-radius: 20px;
}
.logo-wa {
    height: 21px;
    border-radius: 6px;
}
.logo-wa,
.logo-github,
.logo-ig,
.logo-fb {
    transition: transform 0.3s ease-out; /* Animasi halus saat ikon membesar/terangkat */
}
.social-media a:hover .logo-github,
.social-media a:hover .logo-wa,
.social-media a:hover .logo-ig,
.social-media a:hover .logo-fb {
    transform: translateY(-1px) scale(1.1); /* Efek saat kursor menyentuh: ikon sedikit terangkat dan membesar */
}
.header-main {
    padding: 1rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}
.header-main-nav ul {
    list-style: none; /* Menghilangkan tanda titik (bullet) dari daftar */
    display: flex; /* Membuat semua <li> berjajar horizontal */
    align-items: center; /* Menyejajarkan semua item secara vertikal */
    gap: 40px; /* Memperlebar jarak antar item menu agar tidak padat */
    margin-bottom: 10px;
}
.header-main-nav a {
    text-decoration: none; /* Menghilangkan garis bawah dari link */
    color: var(--text-color);
    font-weight: 500;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s ease;
}
.header-main-nav a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--accent-color);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}
.header-main-nav a:hover::after,
.header-main-nav a.active::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.header-main-nav a.active, /* Gaya untuk link aktif */
.header-main-nav a:hover { /* Gaya saat link di-hover dengan kursor */
    color: var(--accent-color);
}
.header-main-icons {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 15px;
    order: 1; /* Posisikan ikon di paling kanan */
}
.icon-nav {
    height: 28px;
}
.mobile-only { /* Sembunyikan link khusus mobile di tampilan desktop */
    display: none;
}
/* Sembunyikan menu login/register jika sudah login, dan sebaliknya */
.mobile-only-logged-in,
.mobile-only-logged-out {
    display: none;
}

/* === Tombol Tema === */
.theme-button {
    transform: translateY(-2px); /* Naik 2 piksel */
    transition: transform 0.3s ease-in-out; /* Transisi untuk animasi halus */
}
.theme-button:hover {
    transform: translateY(-2px) rotate(30deg);
    /* Putar 360 derajat saat di-hover */
}
#theme-toggle-btn {
    background-color: transparent; /* Latar belakang transparan */
    border: none;
    color: var(--light-text-color); 
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
}

/* --- Search Bar --- */
.search-bar {
    flex-grow: 1; /* Membuat search bar "mengambil" sisa ruang kosong di tengah header. */
    display: flex; /* Membuat jejer ke samping */
    border: 2px solid var(--subtle-border-color);
    border-radius: 8px;
    overflow: hidden; /* Memastikan sudut tumpul dari tombol tidak keluar dari border. */
    margin: 0 30px;
}
.search-bar input {
    border: none;
    padding: 12px 15px; /* Memberi ruang di dalam kolom input. */
    font-size: 1rem;
    flex-grow: 1;
    outline: none; /* Menghilangkan garis saat fokus. */
    background-color: var(--body-bg); /* Warna latar belakang input (sesuai tema) */
    color: var(--text-color);
}
.search-bar button {
    transition: filter 0.2s ease;
}
.search-bar button:hover {
    filter: brightness(90%); /* Efek hover untuk tombol search */
}
.search-bar button {
    background-color: var(--accent-color); 
    color: var(--accent-text-color); 
    border: none; 
    padding: 0 20px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-bar button img {
    height: 18px;
    width: 18px;
    object-fit: contain;
}
.search-toggle-btn { /* Tombol untuk toggle search di mobile */
    display: none; /* Sembunyikan di desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.search-toggle-btn img {
    height: 28px; /* Samakan dengan ikon lain */
}

/* --- Hamburger Button --- */
.hamburger-btn {
    display: none; /* Kunci: Menyembunyikan tombol ini secara default (di tampilan desktop). */
    flex-direction: column; /* Membuat 3 garis <span> di dalamnya tersusun vertikal (atas ke bawah). */
    justify-content: space-around; /* Memberi jarak yang sama di antara 3 garis tersebut. */
    width: 2rem; /* Mengatur lebar tombol. */
    height: 2rem; /* Mengatur tinggi tombol, membuatnya menjadi kotak. */
    background: transparent; /* Membuat latar belakang tombol transparan. */
    border: none; /* Menghilangkan border default dari tombol. */
    cursor: pointer; /* Mengubah kursor menjadi ikon tangan saat disentuh. */
    padding: 0; /* Menghilangkan padding default dari tombol. */
    z-index: 110; /* Memastikan tombol ini berada di lapisan atas, tidak tertutup elemen lain. */
}
.hamburger-btn span {
    width: 2rem; /* Mengatur lebar setiap garis agar sama dengan lebar tombol. */
    height: 0.25rem; /* Mengatur ketebalan setiap garis. */
    background: var(--heading-color); /* Memberi warna pada garis (bisa berubah sesuai tema). */
    border-radius: 10px; /* Membuat ujung setiap garis menjadi tumpul/bulat. */
    transition: all 0.3s linear; /* Memberi animasi halus selama 0.3 detik jika ada perubahan (misalnya saat diubah menjadi ikon 'X'). */
    position: relative; /* Diperlukan agar properti 'transform-origin' bisa berfungsi. */
    transform-origin: 1px; /* Mengatur titik poros rotasi untuk animasi menjadi 'X', yaitu di dekat ujung kiri garis. */
}

/* Responsive Header */
@media (max-width: 768px) {
    #toast-container {
        width: 90%;
        max-width: 350px;
        top: 10px;
        /* Posisikan lebih dekat ke atas */
        gap: 5px;
    }
    .toast {
        padding: 10px 15px;
        /* Kurangi padding */
        font-size: 0.9rem;
        /* Kecilkan ukuran font */
        text-align: center;
        /* Atur ulang animasi agar tidak terlalu jauh */
        animation: slideDown 0.4s ease-out, fadeUp 0.5s ease-in 2.5s forwards;
    }
    .header-main-nav ul {
        gap: 12px !important; /* Kurangi jarak antar item menu */
        margin-bottom: 10px;
    }
    #account-menu-desktop {
        display: none !important; /* Sembunyikan menu akun di desktop */
    }
    .logo {
        width: 100%;
        justify-content: center;
        margin-bottom: 15px;
    }
    .logo img {
        height: 40px;
    }
    .logo span {
        font-size: 1.2rem;
    }
    .header-top {
        display: none; /* Sembunyikan header atas di mobile */
    }
    /* Tampilkan link khusus mobile di dalam menu hamburger */
    .mobile-only {
        display: list-item;
        width: 100%; /*  mengambil lebar penuh */
    }
    .hamburger-btn { /* Tampilkan tombol hamburger di mobile */
        display: flex;
        order: 4; /* Posisikan di paling kanan */
    }
    .header-main .container {
        display: flex;
        justify-content: space-between; /* Mendorong logo ke kiri & hamburger ke kanan */
        align-items: center; /* MEMAKSA item sejajar di tengah secara vertikal */
        flex-wrap: wrap;
    }
    .header-main-left {
        display: flex;
        align-items: center;
        justify-content: space-between; /* Mendorong logo ke kiri & search bar ke kanan */ 
        width: 100%;
        margin-bottom: 15px;
    }
    .search-bar {
        width: 100%;
        margin: 0;
    }
    .header-main-nav { /* Atur style dasar & transisi untuk menu mobile */
        position: absolute;
        top: 100%; /* Posisi tepat di bawah header */
        left: 0;
        width: 100%;
        background: var(--header-main-bg);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

        /* Sembunyikan menu di awal & posisikan sedikit ke atas */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);

        /* Definisikan animasi transisi yang mulus */
        transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0.4s;
    }
    /* Style saat menu aktif (diberi class .is-active oleh JS) */
    .header-main-nav.is-active {
        /* Tampilkan menu dan kembalikan ke posisi normal */
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .header-main-nav ul {
        flex-direction: column; /* PAKSA item untuk menumpuk ke bawah */
        width: 100%;
        text-align: center;
        padding: 0.01rem 0;

        max-height: calc(100vh - 120px); /* Batasi tinggi menu agar tidak terlalu tinggi */
        overflow-y: auto; /* Tampilkan scrollbar jika menu lebih panjang dari max-height */
        /* Tampilkan scrollbar jika menu lebih panjang dari max-height */
    }
    .header-main-nav.is-active li {
        padding: 0.11rem 0;
        width: 100%;
        transition: background-color 0.s ease-in-out; 
    }
    /* link <a> sebagai target utama agar background tidak memanjang */
    .header-main-nav.is-active li a {
        display: inline-block; /* Membuat background hanya sebatas konten */
        padding: 8px 16px;  /* Memberi ruang di sekitar teks */
        border-radius: 8px; /* Membuat sudutnya membulat */
        transition: background-color 0.2s ease-out; /* Animasi halus saat ditekan/dilepas */
    }
    /*  Beri efek HANYA saat link ditekan  */
    .header-main-nav.is-active li a:active {
        background-color: var(--section-bg); /* Warna abu-abu (mengambil dari variabel tema) */
    }
    .header-main-nav.is-active li:first-child {
        border-top: none;
    }
    /* Tampilkan item yang sesuai saat menu mobile aktif (dikontrol JS) */
    .header-main-nav.is-active .mobile-only {
        display: list-item;
    }
    /* Gaya untuk tombol logout di menu mobile (disederhanakan) */
    .header-main-nav.is-active ul li a#logout-btn-mobile {
        color: #dc5545; /* Warna merah untuk aksi keluar */
         /* Hapus gaya berlebih agar konsisten dengan item menu lain */
        padding: 0;
        border-radius: 0;
        margin: 0;
        width: auto;
        display: inline-block;
    }
    .header-top-nav ul {
        flex-direction: column; /* PAKSA item untuk menumpuk ke bawah */
        align-items: center; /* Posisikan semua item di tengah */
        gap: 2px; /* Atur jarak vertikal antar item */
    }
    .header-main-nav.is-active .cart-icon-wrapper a {
        display: inline-block; /* Membuat area link pas dengan ikon */
        position: relative;
    }
    .header-main-nav.is-active .cart-counter {
        top: -5px;
        right: -8px;
    }
    /* Sembunyikan bilah pencarian utama secara default di mobile */
    .search-bar {
        flex-grow: 1;
    }
    /* Hapus tombol ikon search, karena search bar sudah terlihat */
    .search-toggle-btn {
        display: none;
    }
    .search-bar,
    .hamburger-btn {
        order: 0;
        /* Kembalikan urutan default */
    }

    /* === Gaya untuk bilah pencarian saat aktif === */
    .search-bar.is-active {
        display: flex;
        position: absolute;
        top: 100%; /* Muncul tepat di bawah header */
        left: 0;
        width: 100%;
        background: var(--header-main-bg);
        padding: 10px 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 99;
        margin: 0; /* Hapus margin agar pas */
    }
    body.light-theme .search-bar.is-active {
        background-color: #f9f9f9; /* Warna abu-abu sangat terang sebagai alternatif */
        border-top: 1px solid #ddd; /* Tambahkan garis pemisah tipis */
    }
    /* Sembunyikan kedua jenis menu mobile secara default */
    .mobile-only-logged-in,
    .mobile-only-logged-out {
        display: none;
    }
    /* Tampilkan menu logout JIKA menu aktif DAN body memiliki class .user-is-logged-out */
    body.user-is-logged-out .header-main-nav.is-active .mobile-only-logged-out {
        display: list-item;
    }
    /* Tampilkan menu akun JIKA menu aktif DAN body memiliki class .user-is-logged-in */
    body.user-is-logged-in .header-main-nav.is-active .mobile-only-logged-in {
        display: block;
    }
}

@media (min-width: 769px) {
    .header-main-nav .mobile-only,
    .header-main-nav #mobile-lang-switcher {
        display: none !important;
    }
}

/* ============================================= */
/* --- Dropdown Bahasa Kustom --- */
/* ============================================= */

/* Wrapper untuk menjaga posisi dropdown */
.language-selector-wrapper {
    position: relative; /* Membuat posisi relatif untuk dropdown */
    display: inline-block; /* Membuat elemen inline-block agar bisa diatur lebarnya */
}

/* Tombol utama yang terlihat */
.select-button {
    display: flex;
    align-items: center;
    justify-content: space-between; /*membuat teks dan panah terpisah*/
    background: transparent; /* Hapus background agar tidak terlihat */
    border: 1px solid var(--light-text-color); /* Border tipis untuk tombol */
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer; 
    width: 150px; /* lebar tetap agar rapi */
    text-align: left; /* Teks rata kiri */
}
#selected-lang-text {
    color: var(--text-color);
    font-size: 0.85rem;
}
.arrow-down { /* Ikon panah dropdown kustom */
    width: 0; 
    height: 0; /* Membuat segitiga */
    border-left: 5px solid transparent; /* Panah ke kiri */
    border-right: 5px solid transparent; /* Panah ke kanan */
    border-top: 5px solid var(--text-color); /* Warna panah */
}
.select-dropdown { /* Menu dropdown yang tersembunyi */
    display: block; /* Membuat dropdown sebagai blok */
    position: absolute; /* Membuat posisi absolute */
    top: calc(100% + 5px);/* Jarak dari tombol */
    left: 0;
    width: 100%;
    box-sizing: border-box; /* Menghitung lebar dengan border */

    list-style: none; /* Menghilangkan tanda daftar */
    background: var(--card-bg);
    border: 1px solid var(--subtle-border-color); /* Border tipis */
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10; /* Pastikan dropdown di atas elemen lain */
    padding: 5px 0;

    display: flex; /* Aktifkan flexbox */
    flex-direction: column; /* Paksa item untuk berbaris ke bawah (atas-bawah) */
    min-width: 100%; /* Lebar minimal sama dengan tombolnya */
    width: max-content; /* Lebar akan menyesuaikan dengan teks terpanjang */

    /* Sembunyikan dengan transisi halus */
    opacity: 0; /* Sembunyikan */
    visibility: hidden; /* Sembunyikan dari tampilan */
    transform: translateY(-10px); /* Posisikan sedikit ke atas */
    transition: all 0.2s ease-out; /* Transisi halus saat muncul */
}
.select-dropdown.show { /* Tampilkan dropdown saat ada kelas .show */
    opacity: 1; /* Mengubah opacity menjadi 1 untuk membuatnya terlihat */
    visibility: visible; /* Membuat elemen kembali bisa diklik dan berinteraksi. */
    transform: translateY(0); /* Kembalikan posisi ke normal */
}
.select-dropdown li { /* Setiap item di dalam dropdown */
    padding: 4px 14px;
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap; /* Mencegah teks panjang (seperti "Bahasa Indonesia") pindah ke baris baru */
}
.select-dropdown li:hover {
    background: var(--accent-color);
    color: var(--accent-text-color); /* Mengubah warna teks agar tetap terbaca */
    border-radius: 6px;
}

/* ============================================= */
/* --- Menu Dropdown Akun --- */
/* ============================================= */
#account-menu {
    position: relative;
    display: inline-block;
}
#account-menu.is-logged-out {
    display: flex;
    gap: 10px;
    align-items: center;
}
.dropdown-content { /* Styling untuk konten dropdown, awalnya disembunyikan */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);

    position: absolute;
    right: 0;
    background-color: var(--header-main-bg);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 101;
    border-radius: 8px;
    border: 1px solid var(--subtle-border-color);
    padding: 8px 0;
    margin-top: 10px;

    transition: all 0.4s ease-out;/* Animasi fade-in halus */
}
.dropdown-content.show { /* Tampilkan dropdown saat ada kelas .show */
    opacity: 1; /* Mengubah opacity menjadi 1 untuk membuatnya terlihat */
    visibility: visible;
    transform: translateY(0);
}
.dropdown-content a,
.dropdown-content button { /* Styling untuk link di dalam dropdown */
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s;
}
.dropdown-content a:hover, /* Efek hover pada item dropdown */
.dropdown-content button:hover {
    background-color: var(--section-bg);
    border-radius: 6px;
}
.dropdown-content button#logout-btn:hover { /* Efek hover khusus untuk tombol "Keluar" */
    background-color: #dc3545;
    color: white;
}

/* ATURAN UNTUK TEMA GELAP */
body.dark-mode .dropdown-content a:hover,
body.dark-mode .dropdown-content button:hover {
    /* warna yang lebih terang agar terlihat di mode gelap */
    background-color: var(--subtle-border-color);
}
/* Efek khusus untuk tombol "Keluar" di mode gelap */
body.dark-mode .dropdown-content button#logout-btn:hover {
    background-color: #e63946; /* Merah yang sedikit berbeda */
    color: white;
}
.btn { /* Style dasar untuk semua tombol di menu akun */
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    border: 2px solid transparent; /* Border transparan untuk menjaga ukuran tetap sama */
}
.btn-primary { /* Style untuk tombol Primary */
    background-color: var(--accent-color);
    color: var(--accent-text-color);
}
.btn-primary:hover {
    opacity: 0.85; /* Mengurangi opacity untuk efek hover */
    transform: translateY(-1px); /* Efek hover untuk feedback visual */
}
.btn-secondary { /* Style untuk tombol Secondary/Outline */
    background-color: transparent;
    color: var(--light-text-color);
    border: 2px solid var(--light-text-color);
}
.btn-secondary:hover {
    background-color: var(--light-text-color);
    color: var(--header-top-bg); /* Warna teks menjadi warna latar header atas */
}
.user-profile {
    display: flex;
    align-items: center;
    gap: 8px; /* Jarak antara ikon dan teks */
    cursor: pointer;

    /* Menghilangkan gaya seperti input/tombol */
    background: none;
    border: none;
    padding: 0;

    color: var(--light-text-color); /*  Mengatur warna dan font agar terlihat jelas */
    font-family: var(--font-body); /* Mengambil warna teks terang dari variabel root */
    font-size: 0.85rem; /* Menyamakan font */
    font-weight: 500; /* Menyamakan ukuran font di header atas */
}
.user-profile:hover { /* Efek hover sederhana untuk feedback visual */
    opacity: 0.8;
}
.profile-icon {
    height: 24px;
    width: 24px;
    border-radius: 50%; /* Membuat bingkai ikon bulat */
    object-fit: cover;
}

/* ============================================= */
/* --- Hero Carousel --- */
/* ============================================= */
.hidden {
    display: none;
}
.page-title {
    padding: 20px;
}
.home-carousel { /* Atur Ulang .home-carousel untuk menjadi Kontainer Carousel */
    /* Menjadikan .home-carousel sebagai acuan posisi untuk lapisan di dalamnya */
    position: relative;
    min-height: 70vh; /* Sesuaikan tinggi */
    color: var(--hero-text-color);
    /* Sembunyikan bagian gambar yang bergeser keluar dari area hero */
    overflow: hidden;
    /* Ganti background solid dengan warna fallback jika gambar gagal dimuat */
    background: #1A202C;
}
.carousel-container { /* Kontainer yang membungkus semua slide */
    display: flex; /* Membuat semua slide berjajar ke samping */
    height: 100%;

    /* Lebar total = 100% * jumlah gambar. 
       Ganti nilai ini jika Anda menggunakan jumlah gambar yang berbeda. */
    width: 300%;

    position: absolute;
    top: 0;
    left: 0;

    transition: transform 0.7s ease-in-out; /* membuat efek pergeseran menjadi halus */
}

.carousel-slide { /*  Masing-masing Slide di dalam Carousel */
    /* Setiap slide mengambil porsi yang sama dari kontainer.
       Untuk 3 gambar, masing-masing mendapat 1/3 dari 300% */
    width: 33.333%;
    height: 100%;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Membuat gambar mengisi area tanpa menjadi gepeng */
}
.carousel-container.slide-1 { /* Posisi slide 1 (default) */
    transform: translateX(0%);
}
.carousel-container.slide-2 { /* Posisi slide 2 */
    transform: translateX(-33.333%);
}
.carousel-container.slide-3 { /* Posisi slide 3 */
    transform: translateX(-66.666%);
}
.home-carousel-overlay { /* Lapisan Overlay Gelap (Agar Teks Terbaca) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 32, 44, 0.6);
    z-index: 1; /* Posisikan di atas gambar, tapi di bawah teks */
}
.home-carousel-content {
    /* Posisikan di atas lapisan overlay */
    position: relative;
    /* Gunakan relative agar bisa diberi z-index */
    z-index: 2;

    /* Kode untuk membuat konten tetap di tengah */
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
}

.carousel-btn { /* Tombol Navigasi Carousel (Panah Kiri & Kanan) */
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Trik untuk membuat tombol pas di tengah vertikal */
    z-index: 3; /* Posisikan di lapisan paling depan */

    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    cursor: pointer;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 20px;

    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s; /* Transisi halus saat hover */
}
.carousel-btn:hover {
    background-color: rgba(255, 255, 255, 0.25);
}
.carousel-btn.prev {
    left: 20px; /* Posisikan tombol kiri di kiri */
}
.carousel-btn.next {
    right: 20px; /* Posisikan tombol kanan di kanan */
}
.home-carousel-content h1 {
    font-family: var(--font-heading);
    color: var(--hero-text-color);
    font-size: 3rem;
    margin-bottom: 1rem;
    text-align: center; /* Rata tengah untuk teks judul */
}

.cta-button {
    text-decoration: none;
    background: var(--accent-color);
    color: var(--accent-text-color);
    border: none; /* Hapus border default */
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 580;
    cursor: pointer;
    transition: background 0.1s, transform 0.1s; /* Transisi untuk efek hover */
    margin-top: 1.5rem;
    text-align: center;
}
.cta-button,
.product-card-footer .buy-btn {
    transition: transform 0.4s ease, box-shadow 0.2s ease, filter 0.2s ease; /* Transisi untuk efek hover */
}
.cta-button:hover,
.buy-btn:hover {
    transform: translateY(1px) scale(1.05);/* Gabungkan efek angkat dengan zoom */
    filter: brightness(95%); /* Gelapkan warna tombol sebesar 5% */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* Bayangan  dipertahankan untuk efek kedalaman */
}

/* --- Featured Products --- */
#recommended {
    scroll-margin-top: 120px; /* Jarak scroll ke atas saat mengklik tautan */
}
.featured-products {
    padding: 1rem 0;
}
.featured-products h2 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    text-align: center;
    font-size: 2rem;
    margin: 3rem;
}
.product-grid { /* Aturan untuk Wadah Grid Utama */
    display: grid; /* Menggunakan grid untuk tata letak */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Membuat kolom otomatis dengan lebar minimal 250px */
    gap: 30px;
}
/* Animasi jeda untuk kartu produk */
.product-card-link:nth-child(1) { animation-delay: 0.1s; }
.product-card-link:nth-child(2) { animation-delay: 0.2s; }
.product-card-link:nth-child(3) { animation-delay: 0.3s; }
.product-card-link:nth-child(4) { animation-delay: 0.4s; }
.product-card-link:nth-child(5) { animation-delay: 0.5s; }
.product-card-link:nth-child(6) { animation-delay: 0.6s; }
.product-card-link:nth-child(7) { animation-delay: 0.7s; }
.product-card-link:nth-child(8) { animation-delay: 0.8s; }
a.product-card-link { /* Mengatur link pembungkus agar fleksibel */
    text-decoration: none; 
    color: inherit; /* Menghilangkan garis bawah dan mewarisi warna teks */
    display: flex; /* Membuat link ini menjadi flex container */
    opacity: 0; /* Mulai dengan opacity 0 untuk animasi masuk */
}
.related-products-section .product-card-link:nth-child(1) { animation-delay: 0.1s; }
.related-products-section .product-card-link:nth-child(2) { animation-delay: 0.2s; }
.related-products-section .product-card-link:nth-child(3) { animation-delay: 0.3s; }
.related-products-section .product-card-link:nth-child(4) { animation-delay: 0.4s; }
.related-products-section .product-card-link:nth-child(5) { animation-delay: 0.5s; }
.related-products-section .product-card-link:nth-child(6) { animation-delay: 0.6s; }
@keyframes card-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px); /* Mulai dari posisi 20px di bawah */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Kembali ke posisi normal */
    }
}
/* Aturan ini aktif saat JavaScript menambahkan class ".animate" pada link kartu produk */
.product-card-link.animate {
    animation-name: card-fade-in;         /* Menentukan nama @keyframes animasi yang akan digunakan, yaitu 'card-fade-in'. */
    animation-duration: 0.5s;             /* Mengatur durasi total animasi, yaitu selama 0.5 detik. */
    animation-timing-function: ease-out;  /* Mengatur kurva kecepatan animasi: cepat di awal, lalu melambat di akhir. */
    animation-fill-mode: forwards;        /* Memastikan elemen tetap berada di state akhir animasi (opacity: 1, transform: translateY(0)) setelah animasi selesai. */
}
.product-card { /* Aturan untuk Setiap Kartu Produk */
    background: var(--card-bg);
    border: 1px solid var(--subtle-border-color);
    border-radius: 8px;
    overflow: hidden;
    display: flex; /* Menjadikan kartu sebagai flex container */
    flex-direction: column; /* Mengatur item dari atas ke bawah */
    width: 100%; /* Memastikan kartu mengisi seluruh ruang grid */
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none !important;
}
.product-card:hover { /* --- Efek Hover untuk Kartu Produk --- */
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.07);
}
.product-image-link {
    display: block;
    width: 100%;
    height: 220px;
    overflow: hidden;
    text-decoration: none;
}
.product-image-link img { /* Aturan untuk GAMBAR di dalam Kartu */
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.product-image-link:hover img {
    transform: scale(1.05);
}
.product-card-body { /* Aturan untuk KONTEN di Dalam Kartu */
    padding: 15px;
    display: flex;
    flex-direction: column; /* Mengatur konten dari atas ke bawah */
    text-align: left;
    flex-grow: 1; /* Paksa bagian ini untuk mengisi semua ruang kosong */
}
.product-card-body h3 {
    font-size: 1rem;
    margin: 0 0 10px 0;
    white-space: nowrap; /* Mencegah teks pindah ke baris baru */
    overflow: hidden; /* Sembunyikan teks yang terlalu panjang */
    text-overflow: ellipsis; /* Tampilkan elipsis (...) untuk teks yang terpotong */
}
.product-title-link {
    color: var(--heading-color);
    text-decoration: none !important;
}
.product-title-link:visited {
    color: var(--heading-color);
}
.product-title-link:hover {
    color: var(--accent-color);
    text-decoration: none !important;
}
.product-card-body .description {
    font-size: 0.9rem;
    color: var(--text-color);
    margin: 0 0 15px 0;
    overflow: hidden; /* Sembunyikan teks yang terlalu panjang */
    display: -webkit-box; /* Membuat elemen menjadi kotak fleksibel */
    -webkit-box-orient: vertical; /* Mengatur orientasi kotak fleksibel ke vertikal */
    -webkit-line-clamp: 3;
    line-clamp: 3;
    height: 4.8em; /* Konsistensi tinggi 3 baris deskripsi (1.6 line-height * 3) */
    line-height: 1.6;
}
.product-card-footer { /* Aturan untuk FOOTER Kartu */
    display: flex;
    flex-wrap: wrap; /* Fleksibel untuk ukuran layar kecil */
    justify-content: space-between; /* Mendorong elemen ke kiri dan kanan */
    align-items: center;
    gap: 10px;
    padding: 15px;
    border-top: 1px solid var(--subtle-border-color);
    margin-top: auto; /* Mendorong footer ke bawah */
}
.product-card-footer .price {
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--accent-color);
    white-space: nowrap; /* Mencegah Rp dan nominal terpisah/pecah baris */
    flex: 1 1 auto;
}
.product-card-footer .buy-btn {
    padding: 8px 16px;
    background-color: var(--accent-color);
    color: var(--accent-text-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap; /* Mencegah teks pecah baris */
    text-align: center;
    flex: 1 1 auto;
    transition: opacity 0.2s;
}
.product-card-footer .buy-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.see-more-container {
    text-align: center;
    margin: 3rem; /* Jarak dari grid produk di atasnya */
}

/* --- Skeleton Loading --- */
.skeleton-card {
    background-color: var(--card-bg); /* Warna latar belakang kerangka */
    border: 1px solid var(--subtle-border-color);
}
.skeleton {
    background-color: var(--subtle-border-color); /* Warna abu-abu muda untuk kerangka */
    border-radius: 4px;
    position: relative; /* Diperlukan untuk efek animasi kilau */
    overflow: hidden; /* Agar animasi tidak keluar dari area kerangka */
}
skeleton::after {
    content: '';                                  /* Wajib ada untuk membuat elemen ::after muncul. */
    position: absolute;                           /* Membuat elemen ini "melayang" di atas balok .skeleton. */
    top: 0;                                       /* Posisikan di paling atas. */
    left: -150%;                                  /* Posisikan di luar layar, jauh di sebelah kiri. Ini adalah titik AWAL animasi. */
    width: 150%;                                  /* Lebar kilau dibuat lebih besar dari baloknya agar terlihat miring. */
    height: 100%;                                 /* Tinggi kilau sama dengan tinggi balok. */
    /* Membuat gradasi dari transparan, ke kilau putih tipis, lalu kembali transparan. Inilah yang menciptakan efek kilau. */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); 
    /* Menjalankan animasi bernama 'shimmer' selama 1.5 detik, dan mengulanginya terus-menerus (infinite). */
    animation: shimmer 1.5s infinite;
}
body.dark-mode .skeleton::after {
    /* Membuat efek kilau sedikit lebih redup saat mode gelap aktif agar tidak terlalu mencolok. */
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); 
}
@keyframes shimmer {
    0% {
        left: -150%; /* ...posisi kilau ada di paling kiri (di luar layar). */
    }
    100% {
        left: 150%; /* ...posisi kilau bergeser ke paling kanan (di luar layar). */
    }
}
.skeleton-img { /* Ukuran spesifik untuk setiap bagian kerangka */
    width: 100%;
    height: 160px; /* Samakan dengan tinggi gambar produk sejenis */
}
.skeleton-title {
    width: 70%; /* Lebar kerangka judul dibuat 70% agar tidak terlalu panjang. */
    height: 1rem;
    margin-bottom: 10px;
}
.skeleton-text {
    width: 100%;
    height: 0.8rem;
    margin-bottom: 8px;
}
.skeleton-text:last-child {
    width: 80%; /* Membuat baris terakhir kerangka teks sedikit lebih pendek, meniru paragraf asli. */
}

/* --- Cart Icon --- */
.cart-icon-wrapper {
    position: relative; /* Diperlukan agar counter bisa diposisikan */
}
.cart-counter {
    position: absolute;
    top: -5px; /* Sedikit ke atas dari ikon */
    right: -8px; /* Sedikit ke kanan dari ikon */

    background-color: #e63946; /* Warna merah yang kontras */
    color: white;
    border-radius: 50%; /* Membuatnya bulat */
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: bold;
    display: none; /* Sembunyikan jika angkanya 0 */
}
.cart-counter.visible { /* Kelas untuk menampilkan counter jika isinya lebih dari 0 */
    display: block;
}

/* --- Cart Preview Dropdown --- */
.cart-preview {
    position: absolute; /* Posisikan dropdown di atas elemen lain */
    top: 100%; /* Tepat di bawah ikon keranjang */
    right: 0; /* Posisikan ke kanan */
    width: 350px; /* Lebar tetap untuk dropdown */
    background-color: var(--card-bg);
    border: 1px solid var(--subtle-border-color);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
    padding: 15px;
    opacity: 0; 
    visibility: hidden; /* Sembunyikan secara default */
    transform: translateY(-10px); /* Posisikan sedikit ke atas untuk efek masuk */
    transition: all 0.3s ease-out; /* Transisi halus saat muncul */
}
.cart-icon-wrapper:hover .cart-preview {
    opacity: 1; /* Tampilkan dropdown saat hover pada ikon keranjang */
    visibility: visible; /* Membuat elemen bisa terlihat dan berinteraksi */
    transform: translateY(0); /* Kembalikan posisi ke normal dari yg sebelumnya diatas */
}
.cart-preview-header {
    display: flex;
    justify-content: space-between; /* Posisikan judul dan link di kiri-kanan */
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--subtle-border-color);
}
#cart-preview-title {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--heading-color);
    font-size: 1rem;
    margin: 0;
}
#cart-preview-view-link {
    text-decoration: none;
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.9rem;
}
#cart-preview-view-link:hover {
    text-decoration: underline; /* Tambahkan garis bawah saat hover */
}
#cart-preview-items {
    display: flex; 
    flex-direction: column; /* Tumpuk item secara vertikal */
    gap: 15px;
    max-height: 300px; /* Batasi tinggi dropdown */
    overflow-y: auto; /* Tampilkan scrollbar jika item melebihi tinggi */
}
.cart-preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s; /* Transisi halus saat hover */
}
.cart-preview-item:hover {
    background-color: var(--section-bg);
}
.cart-preview-item img {
    width: 50px;
    height: 50px;
    object-fit: cover; /* Pastikan gambar mengisi area tanpa menjadi gepeng */
    border-radius: 4px;
}
.cart-preview-item-info {
    flex-grow: 1;
    font-size: 0.9rem;
    overflow: hidden; /* Mencegah teks panjang merusak layout */
}
.cart-preview-item-info h5 {
    margin: 0 0 5px 0;
    font-size: 0.9rem;
    color: var(--heading-color);
    white-space: nowrap; /* Mencegah teks pindah ke baris baru */
    overflow: hidden; /* Sembunyikan teks yang terlalu panjang */
    text-overflow: ellipsis; /* Tampilkan elipsis (...) untuk teks yang terpotong */
}
.cart-preview-item-info .price {
    font-weight: 500;
}
/* Animasi untuk ikon keranjang bergoyang */
@keyframes cart-shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
.shake {
    animation: cart-shake 0.5s ease-in-out; /* Durasi animasi 0.5 detik */
}
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr); /* Ubah menjadi 2 kolom di mobile */
        gap: 20px;
    }
    .product-card img {
        height: 180px; /* Sesuaikan tinggi gambar di mobile */
    }
    .featured-products h2 {
        font-size: 1.4rem; /* Kecilkan font */
    }
    .home-carousel-content h1 {
        font-size: 1.7rem;
    }
    .home-carousel-content p {
        font-size: 0.8rem;
        text-align: center;
    }
    .product-card-body h3 {
        white-space: normal; /* Izinkan teks judul untuk wrap ke baris baru */
    }
}

/* ============================================= */
/* --- Filter Kategori & Sortir --- */
/* ============================================= */
.category-filters {
    display: flex;                  /* Mengaktifkan Flexbox, membuat tombol-tombol di dalamnya berjajar horizontal. */
    justify-content: center;        /* Memposisikan seluruh baris tombol tepat di tengah halaman. */
    flex-wrap: wrap;                /* KUNCI: Jika tombol tidak muat dalam satu baris (di layar sempit), izinkan untuk pindah ke baris baru. */
    gap: 15px;                      /* Memberi jarak 15px antar setiap tombol. */
    margin-bottom: 1rem;            /* Memberi jarak 1rem ke elemen di bawahnya (grid produk). */
}
.category-filters button {
    padding: 10px 20px;               /* Memberi ruang di dalam tombol (10px atas/bawah, 20px kiri/kanan). */
    font-size: 0.9rem;            
    font-weight: 500;             
    font-family: var(--font-body);    /* Menggunakan font 'Inter' dari variabel. */
    color: var(--text-color);         /* Warna teks tombol, bisa berubah sesuai tema. */
    background-color: var(--card-bg); /* Warna latar tombol, bisa berubah sesuai tema. */
    border: 2px solid var(--subtle-border-color); /* Garis tepi tombol yang tipis. */
    border-radius: 20px;              /* Membuat sudut tombol menjadi sangat tumpul (seperti kapsul). */
    cursor: pointer;                  /* Mengubah kursor menjadi ikon tangan saat disentuh. */
    transition: all 0.2s ease;        /* Memberi animasi halus selama 0.2 detik untuk SEMUA perubahan (warna, border, dll). */
}
.category-filters button:hover { /* Aturan saat kursor MENGARAH ke tombol. */
    background-color: var(--accent-color);
    color: var(--accent-text-color);
    border-color: var(--accent-color);
}
.category-filters button.active { /* Aturan saat tombol memiliki class ".active" (yang ditambahkan oleh JS). */
    background-color: var(--accent-color);
    color: var(--accent-text-color);
    border-color: var(--accent-color);
}
/* Styling untuk Dropdown Sortir */
.sorting-controls {
    display: flex; /* Membuat label "Urutkan:" dan dropdown berjajar horizontal. */
    justify-content: flex-end; /* Posisikan di kanan */
    align-items: center; /* Menyejajarkan label dan dropdown secara vertikal di tengah. */
    margin-bottom: 1.5rem; /* Jarak ke filter kategori */
    gap: 10px;
}
.sorting-controls label {
    font-weight: 500;
}
.sorting-controls select {
    padding: 8px 12px;
    border: 1px solid var(--subtle-border-color);
    border-radius: 6px;
    background-color: var(--card-bg); /* Warna latar dropdown, bisa berubah sesuai tema. */
    color: var(--text-color); /* Warna teks di dalam dropdown. */
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
}
@media (max-width: 768px) {
    .sorting-controls {
        flex-direction: column; /* Ubah menjadi kolom di mobile */
        align-items: flex-start; /* Pusatkan item */
        gap: 8px; /* Jarak antar tombol */
    }
    .sorting-controls select{
        width: 100%; /* Lebar penuh di mobile */
        margin-top: 10px; /* Jarak atas untuk pemisahan */
    }
}

/* ============================================= */
/* --- Halaman Login & Register --- */
/* ============================================= */
/* --- Layout & Box --- */
.auth-container {
    display: flex;
    justify-content: center;       /* Memposisikan item (form) di tengah secara horizontal. */
    align-items: center;           /* Memposisikan item (form) di tengah secara vertikal. */
    padding: 4rem 20px;
}
.auth-box {
    background-color: var(--light-color);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Memberi efek bayangan halus untuk ilusi kedalaman. */
    width: 100%;  /* Mengatur lebar form agar mengisi wadahnya. */
    max-width: 400px; /* Membatasi agar form tidak terlalu lebar di layar desktop. */
    text-align: center;
}
.auth-box h2 {
    font-family: var(--font-heading);
    margin-bottom: 30px;
    color: var(--dark-color);
    font-size: 2rem;
}

/* --- Form --- */
.auth-form {
    background-color: var(--card-bg);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 450px;
    border: 1px solid var(--subtle-border-color);
}
.auth-form h1 {
    font-family: var(--font-heading); /* Menggunakan font 'Press Start 2P'. */
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 2rem; /* Memberi jarak ke elemen di bawahnya. */
    color: var(--heading-color);
}
.form-group {
    position: relative; 
    margin-bottom: 20px;
    text-align: left; /* Memastikan label dan input rata kiri. */
    margin-bottom: 1.5rem;
}
.form-group label {
    display: block; /* Membuat label menempati satu baris penuh, mendorong input ke bawahnya. */
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dark-color);
}
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="file"],
.form-group select,
.form-group textarea,
.form-control {
    width: 100%; /* Membuat kolom input memenuhi seluruh lebar form. */
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box; /* Memastikan padding tidak menambah lebar total input. */
}
.auth-form input:focus {
    border-color: var(--primary-color); /* Mengubah warna border menjadi warna aksen saat kolom input sedang aktif/diklik. */
    outline: none; /* Menghilangkan garis outline biru default dari browser. */
}

/* --- Button & Switch --- */
.auth-button {
    background-color: var(--primary-color);
    color: var(--light-color);
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%;
}
.auth-button:hover {
    background-color: #2574A9;
    transform: translateY(-2px) scale(1.04);
}
.auth-form .cta-button {
    width: 100%;
    font-size: 1.1rem;
    text-align: center; /* Memastikan teks di dalam tombol berada di tengah. */
}
.auth-switch {
    text-align: center;
    margin-top: 1.5rem;
    position: relative;
    z-index: 2;
}
.auth-switch a {
    color: var(--accent-color);
    font-weight: 500;
    text-decoration: none;
}
.switch-auth {
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--dark-color);
}
.switch-auth a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}
.switch-auth a:hover {
    text-decoration: underline;
}

/* Styling untuk Radio Button Jenis Kelamin */
.radio-container {
    display: flex; /* Membuat pilihan "Pria" dan "Wanita" berjajar ke samping. */
    gap: 20px; /* Jarak antar grup (Pria dan Wanita) */
}
.radio-option {
    display: flex;
    align-items: center;
    gap: 5px; /* Jarak KECIL antara tombol radio dan labelnya */
}
.radio-option label {
    margin-bottom: 0;
}
.error-message {
    color: #e63946;
    font-size: 0.8rem; /* Ukuran teks pesan error lebih kecil. */
    font-weight: 500;
    margin-top: 5px; /* Jarak dari input di atasnya. */
    display: none; /* Sembunyikan secara default */
}
/* Aturan yang lebih fleksibel untuk menampilkan pesan error */
.is-invalid ~ .error-message {
    display: block;
}
input.is-invalid {/* Beri border merah pada input yang tidak valid */
    border-color: #e63946;
}
/* Styling untuk validasi error di radio button */
.radio-container.is-invalid {
    border: 1px solid #e63946; /* Beri border merah di sekeliling grup */
    border-radius: 5px;
    padding: 10px;
    margin-left: -10px; /* Sedikit offset agar rapi */
}

 /* Styling untuk Notifikasi Toast */
#toast-container {
    text-align: center;
    position: fixed;
    top: 20px; /* Jarak dari atas */
    left: 50%; /* Posisikan di tengah secara horizontal */
    transform: translateX(-50%); /* Trik untuk menengahkan elemen secara presisi */
    z-index: 1000;
    display: flex;
    flex-direction: column; /* sejajarkan ke samping */
    align-items: center; /* Sejajarkan di tengah */
    gap: 10px;
} 
.toast {
    padding: 15px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Ganti animasi agar muncul dari atas dan menghilang ke atas */
    animation: slideDown 0.4s ease-out, fadeUp 0.5s ease-in 2.5s forwards;
}
.toast.success {
    background-color: #28a745;
}
.toast.error {
    background-color: #dc3545;
}
.toast.warning {
    background-color: #f39c12;
}
@keyframes slideDown { /* Animasi Munculkan dari Atas */
    from { /* Mulai dari atas */
        transform: translateY(-100%);
        opacity: 0;
    }
    to { /* Akhir di posisi normal */
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fadeUp { /* Animasi Hilangkan ke Atas */
    from { /* Mulai dari posisi normal */
        opacity: 1;
        transform: translateY(0);
    }
    to { /* Akhir di atas */
        opacity: 0;
        transform: translateY(-100%);
    }
}

/* --- Responsif untuk Halaman Login/Register --- */
@media (max-width: 576px) {
    .auth-container {
        padding: 2rem 15px; /* Kurangi padding container utama */
    }
    .auth-form {
        padding: 30px 25px; /* Kurangi padding di dalam form */
    }
    .auth-form h1 {
        font-size: 1.5rem; /* Kecilkan judul form */
    }
}   
@media (max-width: 320px) {
    .auth-form {
        padding: 25px 20px;
    }
    .auth-form h1 {
        font-size: 1.3rem;
    }
}

/* ============================================= */
/* --- Halaman Akun --- */
/* ============================================= */
/* --- Layout & Box --- */
.account-details {
    background-color: var(--card-bg);             /* Mengatur warna latar belakang kotak, bisa berubah sesuai tema. */
    border: 1px solid var(--subtle-border-color); /* Memberi garis tepi tipis di sekeliling kotak. */
    border-radius: 8px;                           /* Membuat sudut-sudut kotak menjadi tumpul. */
    padding: 30px;                                /* Memberi jarak 30px di bagian DALAM kotak, antara konten dan garis tepi. */
    max-width: 600px;                             /* Membatasi lebar maksimum kotak agar tidak terlalu lebar di layar besar. */
    margin: 2rem auto;                            /* Menengahkan kotak di halaman: '2rem' untuk jarak atas/bawah, 'auto' untuk jarak kiri/kanan yang seimbang. */
}
.user-info-item {
    display: flex;                      /* Mengaktifkan Flexbox, membuat label dan nilainya berjajar ke samping. */
    justify-content: space-between;     /* Mendorong label ke kiri dan nilainya ke kanan. */
    padding: 15px 0;                    /* Memberi jarak vertikal 15px di atas dan bawah setiap baris. */
    border-bottom: 1px solid var(--subtle-border-color); /* Memberi garis pemisah horizontal di bawah setiap baris. */
}
.user-info-item:last-child { /* Aturan khusus untuk item TERAKHIR di dalam grup. */
    border-bottom: none;     /* Menghilangkan garis pemisah di item paling bawah agar terlihat rapi. */
}
.user-info-item strong { /* Menargetkan elemen <strong> (label seperti "Nama Pengguna:"). */
    color: var(--heading-color); 
}
#logout-btn {
    border-radius: 5px;
    width: 100%;
    margin-top: 20px;
    background-color: #e63946;
}
#cancel-edit-btn {
    background-color: #dc3545;
    margin-top: 10px;
}
#address-form {
    margin-top: 30px;
    display: none;
}

/* Media Queries untuk Halaman Akun */
@media (max-width: 768px) {
    .account-details {
        padding: 25px; /* Kurangi padding untuk layar lebih kecil */
        margin: 1.5rem auto;
        max-width: 95%; /* Maksimalkan lebar agar tidak terlalu kecil */
    }
    .account-details h2 {
        font-size: 1.3rem; /* Sesuaikan ukuran font judul */
        margin-bottom: 20px;
    }
    .user-info-item {
        flex-direction: column; /* Tumpuk label dan nilai */
        align-items: flex-start; /* Rata kiri */
        padding: 10px 0; /* Kurangi padding */
        gap: 5px; /* Jarak antar label dan nilai */
        overflow-wrap: break-all; /* Agar teks panjang tidak merusak layout */
    }
    .user-info-item strong {
        min-width: unset; /* Hapus min-width agar tidak memanjang di mobile */
        display: block; /* Buat strong menjadi blok agar di baris baru */
        margin-bottom: 5px; /* Sedikit jarak dengan nilai */
    }
    #address-form { /* Gaya untuk form edit alamat */
        padding: 25px; /* Kurangi padding form */
    }
    #address-form .form-group {
        margin-bottom: 1rem; /* Kurangi jarak antar grup form */
    }
    #address-form label {
        font-size: 0.95rem; /* Sesuaikan ukuran font label */
    }
    #address-form input {
        padding: 10px; /* Kurangi padding input */
        font-size: 0.9rem; /* Sesuaikan ukuran font input */
    }
    .cta-button { /* Tombol logout dan edit/save */
        padding: 10px 20px; /* Sesuaikan padding tombol */
        font-size: 0.95rem; /* Sesuaikan ukuran font tombol */
        justify-content: center;
    }
}
/* Media Query untuk layar yang lebih kecil lagi */
@media (max-width: 576px) {
    .account-details {
        padding: 15px; /* Lebih kecil lagi paddingnya */
        margin: 1rem auto; /* Margin juga lebih kecil */
    }
    .account-details h2 {
        font-size: 1.2rem;
    }
    #address-form {
        padding: 15px;
    }
    .cta-button {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
}

/* ============================================= */
/* --- Halaman Keranjang --- */
/* ============================================= */
/* --- Layout & Container --- */
.cart-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.cart-section .container {
    display: flex;           /* Mengaktifkan Flexbox, membuat elemen anak (daftar item & ringkasan) berjajar ke samping. */
    align-items: flex-start; /* Memastikan kedua kolom rata di bagian ATAS, bukan di tengah atau bawah. */
    gap: 30px;               /* Memberi jarak 30px antara kolom daftar item dan kolom ringkasan. */
}

/* --- Header & Summary --- */
.cart-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background-color: var(--card-bg);
    border: 1px solid var(--subtle-border-color);
    border-radius: 8px;
    margin-bottom: 15px;
    font-weight: 500;
}
.cart-summary { /* Pastikan ringkasan memiliki lebar tetap */
    width: 350px; /* Lebar kolom ringkasan */
    flex-shrink: 0;        /* Mencegah kotak ini "menyusut" jika lebar layar berkurang. */
    position: sticky;      /* Membuat kotak ini "menempel" saat di-scroll. */
    top: 150px; /* Sesuaikan dengan tinggi header Anda */
}
.cart-summary h2 { /* Styling untuk judul "Ringkasan Belanja" */
    margin: 0 0 15px 0;
    font-family: var(--font-heading);
    font-size: 1.2rem;
}
.cart-summary p {
    display: flex;                 /* Membuat teks (misal: "Subtotal") dan harganya berjajar ke samping. */
    justify-content: space-between;/* Mendorong teks ke kiri dan harga ke kanan. */
    margin-bottom: 10px;
}
.cart-summary .total { /* Styling khusus untuk baris Total */
    font-weight: bold;
    font-size: 1.2rem;
    border-top: 2px solid var(--subtle-border-color);
    padding-top: 10px;
    margin-top: 10px;
}

/* --- Cart Items --- */
#cart-items-container {
    flex-grow: 1; /* Mengambil ruang lebih banyak */
}
.cart-item-select input[type="checkbox"], 
#select-all-checkbox { /* Checkbox kustom agar lebih besar dan keren */
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.cart-item {
    display: flex;           /* Membuat semua bagian di dalam satu item (checkbox, gambar, info, aksi) berjajar ke samping. */
    gap: 20px;               /* Jarak antar bagian tersebut. */
    align-items: center;     /* Menyejajarkan semua bagian secara vertikal di tengah. */
    background-color: var(--card-bg);
    border: 1px solid var(--subtle-border-color);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}
.cart-item img {
    width: 100px;
    height: 100px;
    object-fit: cover; /* Memastikan gambar mengisi kotak tanpa menjadi gepeng. */
    border-radius: 6px;
}
.cart-item-info {
    flex-grow: 1;/* Membuat bagian info (judul & harga) mengambil semua sisa ruang di tengah. */
}
.cart-item-info h3 { /* Styling untuk judul produk */
    margin: 0 0 5px 0;
    font-size: 1rem;
    color: var(--heading-color);
}
.cart-item-info .price {
    font-weight: 500;
}
.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.quantity-controls button { /* Styling untuk tombol +/- */
    width: 30px;
    height: 30px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}
.quantity-controls button:hover { /* --- Efek Hover untuk Tombol Kuantitas & Hapus --- */
    transform: translateZ(1.5px) scale(1.35);
}
.remove-btn { /* Styling untuk tombol "Hapus" */
    background: #e63946;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
}
.remove-btn:hover {
    background-color: #c82333;
    transform: scale(1.05);
}
.cart-item-select { /*  style untuk checkbox di setiap item */
    display: flex;
    align-items: center;
    padding-right: 15px;
}
.cart-item-select input[type="checkbox"] { /* Membuat ukuran checkbox lebih besar dari default. */
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.cart-main {
    gap: 15px;
}

@media (max-width: 768px) { /* Responsif Halaman Keranjang */
    .cart-section .container {
        flex-direction: column; /* Tumpuk item dan ringkasan ke bawah */
        align-items: stretch; /* Regangkan ke lebar penuh */
        gap: 20px; /* Kurangi jarak antar bagian */
    }
    #cart-items-container {
        width: 100%; /* Pastikan mengambil lebar penuh */
    }
    .cart-item {
        flex-direction: column; /* Tumpuk konten dalam item keranjang */
        align-items: center; /* Pusatkan secara horizontal */
        text-align: center; /* Pusatkan teks */
        gap: 15px; /* Kurangi jarak antar elemen dalam item */
        padding: 15px; /* Sesuaikan padding */
    }
    .cart-item img {
        width: 120px; /* Sesuaikan ukuran gambar agar tidak terlalu besar */
        height: 120px;
    }
    .cart-item-info {
        width: 100%; /* Pastikan info mengambil lebar penuh */
    }
    .cart-item-info h3 {
        font-size: 1rem; /* Sesuaikan ukuran font judul */
        margin-bottom: 8px;
    }
    .cart-item-actions {
        flex-direction: column; /* Tumpuk kontrol kuantitas dan hapus */
        width: 100%; /* Ambil lebar penuh */
        gap: 15px; /* Jarak antar kontrol dan tombol hapus */
    }
    .quantity-controls {
        display: flex; /* Jadikan flexbox untuk tombol +/- dan angka */
        justify-content: center; /* Pusatkan kontrol kuantitas */
        align-items: center;
        width: 100%; /* Ambil lebar penuh */
        gap: 10px;
    }
    .remove-btn {
        width: 80%; /* Tombol hapus ambil sebagian besar lebar */
        max-width: 200px; /* Batasi lebar maksimum */
    }
    .cart-summary {
        width: 100%; /* Ringkasan ambil lebar penuh */
        position: static; /* Hapus sticky di mobile */
        margin-top: 0; /* hapus margin-top ekstra */
    }
    #courier-note-title,
    .checkout-section {
        padding-bottom: 2rem; /* Tambahkan padding bawah yang cukup */
        font-size: 0.9rem; /* Ukuran font lebih kecil */
    }
    .checkout-btn-full-width { /* Atau jika tombol checkout adalah cta-button */
        margin-bottom: 1.5rem; /* Beri margin bawah pada tombol agar ada jarak */
    }
    main {
        padding-bottom: 2rem; /*  padding bawah di main sebagai pengaman */
    }
}

/* Media Query untuk layar yang lebih kecil lagi */
@media (max-width: 576px) {
    .cart-section .container {
        padding: 0 15px; /* Kurangi padding horizontal di container */
    }
    .cart-item {
        padding: 10px; /* Kurangi padding item keranjang */
    }
    .cart-item-info h3 {
        font-size: 0.9rem; /* Ukuran font lebih kecil lagi */
    }
    .cart-summary h2 {
        font-size: 1.1rem; /* Ukuran font judul ringkasan lebih kecil */
    }
    .cart-summary .total {
        font-size: 1.1rem; /* Ukuran font total lebih kecil */
    }
}

/* ============================================= */
/* --- Halaman Detail Produk --- */
/* ============================================= */
/* --- Layout & Container --- */
.product-detail-layout { /*  Layout Utama (Gambar di kiri, Info di kanan) */
    display: flex;
    gap: 40px; /* Jarak antara kolom gambar dan kolom info */
    padding: 3rem 0;
}
.product-detail-images { /* Kolom utama untuk semua gambar */
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#product-images>img { /* Selector spesifik untuk gambar utama */
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--subtle-border-color);
}
.thumbnails { /* Selector spesifik untuk wadah thumbnail */
    display: flex;
    gap: 15px;
    align-items: center;
}
.thumbnails>img { /* Selector spesifik dan tegas untuk SEMUA thumbnail */
    width: 100px !important; /* Paksa lebar */
    height: 100px !important; /* Paksa tinggi */
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--subtle-border-color);
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
}
.thumbnails>img:hover,
.thumbnails>img.active { /* Gaya untuk hover dan active (tidak berubah) */
    opacity: 1;
    border-color: var(--accent-color);
    transform: scale(1.05);
}

/* --- Info Produk --- */
.product-detail-info {
    flex: 1; /* Kolom info mengambil 50% ruang */
}
.product-location-info { /* Gaya untuk kontainer informasi lokasi/penjual produk */
    margin-top: 20px; /* Jarak dari elemen di atasnya */
}
.product-location-info h3 {
    margin-bottom: 5px; /* Jarak dari label di bawahnya */
    font-family: var(--font-heading); /* Menggunakan font heading global */
    font-size: 1.1rem; /* Ukuran font judul */
    color: var(--heading-color); /* Warna heading global */
}
.product-location-info p {
    margin-bottom: 8px; /* Jarak antar baris info */
    line-height: 1.5; /* Spasi baris */
}
.product-location-info strong {
    color: var(--heading-color); /* Warna teks label */
    min-width: 90px; /* Agar label sejajar */
    display: inline-block; /* Agar min-width berfungsi */
}

.product-detail-info h1 { /*  Penataan Info Produk */
    font-family: var(--font-heading);
    color: var(--heading-color);
    margin-bottom: 10px;
}
.category-tag {
    display: inline-block; /* Membuat elemen ini berperilaku seperti teks (inline) tapi bisa diberi padding dan margin vertikal. */
    background-color: var(--subtle-border-color);
    color: var(--text-color);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
}
.price-detail {
    font-size: 2rem; /* Ukuran font yang besar untuk menonjolkan harga. */
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
}
#product-description {
    margin-bottom: 1.5rem;
}
#product-stock {
    font-weight: 500;
    margin-bottom: 2rem;
}

/* --- Detail Rekomendasi Produk --- */
.related-products-section {
    padding: 3rem 0;
    border-top: 1px solid var(--subtle-border-color); /* Memberi garis pemisah tipis di atas section. */
    background: transparent;
}
.related-products-section h2 {
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
}
.related-products-section .product-grid {
    /* Aturan grid fleksibel: buat kolom sebanyak mungkin dengan lebar minimal 200px. */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px; /* Samakan dengan gap produk utama agar konsisten */
}
.related-products-section .product-card img { 
    height: 160px; /* Membuat gambar di kartu rekomendasi lebih pendek dari kartu biasa. */
}
.related-products-section .product-card-body h3 {
    font-size: 0.9rem;
}
.related-products-section .product-card-body .description {
    font-size: 0.8rem;
    -webkit-line-clamp: 2; /* KUNCI: Batasi teks deskripsi agar HANYA menampilkan 2 baris. */
    display: -webkit-box;      /* Properti yang diperlukan agar line-clamp berfungsi. */
    -webkit-box-orient: vertical; /* Properti yang diperlukan agar line-clamp berfungsi. */
    overflow: hidden;          /* Sembunyikan sisa teks yang melebihi 2 baris. */
}
.related-products-section .product-card-footer {
    padding: 12px;
}
.related-products-section .product-card-footer .price {
    font-size: 0.8rem;
}
.related-products-section .product-card-footer .buy-btn {
    font-size: 0.8rem;
    padding: 4px 8px;
}

/* --- Tombol & Interaksi --- */
#add-to-cart-btn {
    background: var(--accent-color);
    color: var(--accent-text-color);
    border: none;
    border-radius: 6px;
    padding: 10px 0;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s; /* Animasi halus saat warna latar atau posisi berubah. */
    margin-top: 8px;                              /* Memberi jarak dari elemen di atasnya. */
    width: 100%;                                  /* Membuat tombol memenuhi seluruh lebar kolom info produk. */
}
#add-to-cart-btn:hover {
    background: #2bbeb0;                        /* Mengubah warna latar menjadi sedikit lebih gelap saat kursor menyentuh. */
    transform: translateY(1px) scale(1.04);     /* Memberi efek visual: tombol sedikit turun (1px) dan sedikit membesar (1.04x). */
}

/* Responsif untuk Halaman Detail Produk */
@media (max-width: 768px) {
    .product-detail-layout {
        flex-direction: column; /* Tumpuk gambar dan info ke bawah */
        gap: 27px; /* Jarak antar bagian */
        padding: 2rem 15px; /* Kurangi padding horizontal */
    }
    .product-detail-images {
        width: 100%; /* Gambar ambil lebar penuh */
    }
    #product-images>img {
        height: auto; /* Sesuaikan tinggi gambar utama secara otomatis */
        max-height: 400px; /* Batasi tinggi maksimum agar tidak terlalu panjang */
    }
    .thumbnails {
        flex-wrap: wrap; /* Izinkan thumbnail pindah ke baris baru */
        justify-content: center; /* Pusatkan thumbnail */
        gap: 10px; /* Kurangi jarak antar thumbnail */
    }
    .thumbnails>img {
        width: 80px !important; /* Sesuaikan ukuran thumbnail */
        height: 80px !important;
    }
    .product-detail-info {
        width: 100%; /* Info produk ambil lebar penuh */
        text-align: center; /* Pusatkan teks */
    }
    .product-detail-info h1 {
        text-align: center;
    }
    .product-detail-info p,
    .product-detail-info strong,
    .product-location-info {
        text-align: center; /* Pastikan semua teks rata tengah */
    }
    .product-location-info p {
        flex-direction: column; /* Tumpuk label dan nilai */
        align-items: center; /* Pusatkan item */
    }
    .product-location-info strong {
        min-width: unset; /* Hapus min-width agar tidak memanjang */
        display: block; /* Jadi elemen blok */
        margin-bottom: 5px;
    }
    .cta-button {
        width: 80%; /* Tombol ambil sebagian besar lebar */
        max-width: 300px; /* Batasi lebar maksimum */
        margin: 30px auto 0; /* Pusatkan tombol */
    }
    /* 1. Mengecilkan font deskripsi */
    .product-card-body .description {
        font-size: 0.7rem;
    }
    /* 2. Mengecilkan font harga */
    .product-card-footer .price {
        font-size: 0.7rem;
    }
    /* 3. Mengecilkan tombol "Add to Cart" */
    .product-card-footer .buy-btn {
        font-size: 0.7rem !important;
        padding: 5px 3px !important; /* Sesuaikan padding */
        flex-grow: 0;         /* Mencegah tombol meregang mengisi ruang kosong */
    }
    /* Penyesuaian untuk bagian Produk Sejenis */
    .related-products-section h2 {
        font-size: 1.4rem; /* Kecilkan judul di mobile */
    }

    .related-products-section .product-grid {
        grid-template-columns: repeat(2, 1fr); /* Ubah menjadi 2 kolom */
    }
    .related-products-section .product-card-footer .price {
        font-size: 0.9rem;
    }
    .related-products-section .product-card-footer .buy-btn {
        font-size: 0.8rem;
        padding: 8px 12px;
    }
    @media (max-width: 430px) {
        .related-products-section .product-card-footer .price {
            font-size: 0.6rem;
        }
    }
}

/* ============================================= */
/* --- Halaman Tentang Kami --- */
/* ============================================= */
/* --- Layout & Container --- */
.page-content {
    padding-top: 2rem;
    padding-bottom: 4rem;
}
.about-layout {
    display: grid;                   /* Mengaktifkan layout Grid CSS. */
    grid-template-columns: 1fr 1fr;  /* Membuat dua kolom dengan lebar yang sama persis. */
    gap: 40px;                       /* Memberi jarak 40px antara kedua kolom. */
    align-items: center;             /* Menyejajarkan konten di kedua kolom secara vertikal di tengah. */
}
.about-text h2,
.about-text h3 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    margin-bottom: 1rem;
}
.about-text p {
    margin-bottom: 1.5rem;
    line-height: 1.8;  /* Spasi baris yang lebih lega agar mudah dibaca. */
}
.about-image img {
    width: 100%;
    border-radius: 8px;
}
.about-image { /* Aturan untuk <figure> */
    margin: 0;                        /* Menghilangkan margin default dari tag <figure>. */
    text-align: center;               /* Memposisikan gambar dan caption di tengah. */
}
.about-image img {
    width: 100%;
    max-width: 450px; /* Batasi lebar maksimum gambar */
    border-radius: 8px;
    border: 1px solid var(--subtle-border-color);
}
.about-image figcaption { /* Aturan untuk <caption> */
    margin-top: 10px;                 /* Jarak dari gambar di atasnya. */
    font-size: 0.9rem;                /* Ukuran teks caption lebih kecil. */
    color: var(--text-color);
    font-style: italic;               /* Teks caption dibuat miring. */
}
.dev-tribute {
    display: flex;                  /* Membuat teks-teks di dalamnya berjajar ke samping. */
    justify-content: space-around;  /* Memberi jarak yang seimbang di antara dan di sekitar teks. */
    align-items: center;
    flex-wrap: wrap;                /* Izinkan teks pindah ke baris baru jika tidak muat. */
    margin-top: 4rem;               /* Jarak dari konten di atasnya. */
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--heading-color);
}
.dev-tribute p {
    margin: 10px;
}
.thank-you-note {
    text-align: center;             /* Teks di tengah. */
    margin-top: 2rem;
    padding: 1.5rem;                /* Ruang di dalam kotak. */
    border: 1px solid var(--subtle-border-color);
    border-radius: 8px;
    background-color: var(--card-bg);
}
.thank-you-note p {
    font-size: 1.1rem;
    font-family: var(--font-body);
    line-height: 1.6;
}

/* Styling untuk Video & Audio */
.about-text video {
    max-width: 100%;
    border-radius: 8px;
    margin-top: 1.5rem;
    border: 1px solid var(--subtle-border-color);
}
.about-text audio {
    width: 100%;
    margin-top: 1.5rem;
}

/* --- Contact Section --- */
.contact-section {
    padding: 4rem 0;
    background-color: var(--section-bg);
    border-top: 1px solid var(--subtle-border-color);
    text-align: center; /* Tambahkan ini untuk menengahkan grid */
}
.contact-section h2 {
    text-align: center;
    font-family: var(--font-heading);
    color: var(--heading-color);
    margin-bottom: 2.5rem;
    font-size: 1.5rem;
}
.contact-grid {
    display: inline-grid; /* <-- UBAH INI dari 'grid' */
    grid-template-columns: repeat(5, 1fr); /* Atur 5 kolom */
    gap: 20px;
    text-align: left; /* Kembalikan perataan teks untuk konten di dalam kartu */
}
.contact-item {
    background-color: var(--card-bg);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid var(--subtle-border-color);
    text-align: center;
    display: flex; /* Mengaktifkan Flexbox. */
    flex-direction: column; /* Membuat item di dalamnya (ikon, judul, teks) menumpuk ke bawah. */
    align-items: center;  /* Memposisikan semua item di tengah secara horizontal. */
    justify-content: center; /* Memposisikan semua item di tengah secara vertikal, membuat kartu terlihat seimbang. */
}
.contact-item img {
    height: 40px;
    margin-bottom: 1rem;
}
.contact-item h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--heading-color);
    margin-bottom: 0.5rem;
}
.contact-item p {
    font-size: 0.9rem;
    word-break: break-all; /* Memaksa teks yang sangat panjang (seperti email) untuk pindah baris agar tidak "tembus" keluar dari kartu. */
}
.contact-item a {
    color: var(--accent-color);
    text-decoration: none; /* Menghilangkan garis bawah default dari link. */
    font-weight: 500;
}
.contact-item a:hover {
    text-decoration: underline;
}

/* Responsivitas untuk halaman About */
@media (max-width: 768px) { 
    .dev-tribute p,
    .thank-you-note p {
        text-align: center;
        font-size: 0.9rem; /* Ukuran font lebih kecil di mobile */
    }
    .about-image-text h2{
        margin: 0;
        font-size: 1.6rem; /* Ukuran font lebih kecil di mobile */
    }
    .dev-tribute {
        flex-direction: column; /* Tumpuk item ke bawah di mobile */
        gap: 1rem; /* Beri jarak vertikal */
        font-size: 1rem; /* Kecilkan sedikit font di mobile */
    }
    .about-layout {
        grid-template-columns: 1fr; /* Satu kolom di mobile */
    }
    .page-title,
    .about-text h2,
    .about-text h3 {
        text-align: center; /* Ukuran font lebih kecil di mobile */
    }
    .contact-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolom untuk tablet kecil/hp besar */
    }
}
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Izinkan 3 atau 2 kolom */
    }
}
@media (max-width: 576px) {
    .contact-grid {
        grid-template-columns: 1fr; /* 1 kolom untuk hp */
    }
}

/* ============================================= */
/* --- Halaman Bantuan & FAQ --- */
/* ============================================= */
/* --- Layout & Container --- */
.faq-container {
    max-width: 800px;
    margin: 2rem auto;
}
.faq-item {
    border-bottom: 1px solid var(--subtle-border-color);
}
.faq-question {
    width: 100%; /* Membuat judul memenuhi seluruh lebar yang tersedia. */
    background: none;
    border: none;
    padding: 20px 0;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--heading-color);
    cursor: pointer;                      /* Mengubah kursor menjadi ikon tangan saat disentuh. */
    display: flex;                        /* Mengaktifkan Flexbox. */
    justify-content: space-between;     /* Mendorong teks pertanyaan ke kiri dan ikon '+' ke kanan. */
    align-items: center;                  /* Menyejajarkan teks dan ikon '+' secara vertikal di tengah. */
    list-style: none;                     /* KUNCI: Menyembunyikan ikon panah default dari tag <details>. */
}
.faq-question::-webkit-details-marker {
    display: none; /* Menyembunyikan panah/marker di Chrome/Safari */
}
.faq-question::after {
    content: '+';                         /* Membuat elemen semu yang berisi karakter '+'. Ini adalah ikon kustom Anda. */
    font-size: 1.5rem;                    /* Ukuran ikon '+'. */
    transition: transform 0.3s ease-out;  /* Animasi halus selama 0.3 detik saat ikon berputar. */
}
.faq-question:hover {
    color: var(--accent-color);
}
.faq-answer { /* KODE ANIMASI BUKA-TUTUP CONTAINER */
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.3s ease-out;
}
details[open] > .faq-answer {
    grid-template-rows: 1fr;         /* KUNCI: Saat <details> terbuka, ubah tinggi baris menjadi 1fr (satu fraksi), yang artinya tingginya akan menyesuaikan dengan konten di dalamnya. */
}
.faq-answer p { /* KODE ANIMASI UNTUK TEKS DI DALAMNYA */
    padding: 0 0 20px 0;
    line-height: 1.7;
    opacity: 0; /* Awalnya teks transparan */
    transition: opacity 0.2s ease-out 0.15s; /* Animasi fade-in dengan sedikit delay */
}
details[open] > .faq-answer p {
    opacity: 1; /* Saat terbuka, teks menjadi terlihat */
}
details[open] > .faq-question::after { /* Aturan saat <details> dalam keadaan TERBUKA. */
    content: '-';                         /* Mengubah ikon dari '+' menjadi '-'. */
    transform: rotate(180deg);            /* Memutar ikon 180 derajat untuk efek animasi. */
}
.faq-answer ol { /* Styling untuk daftar berurutan di dalam FAQ */
    padding-left: 25px; /* Memberi ruang di kiri untuk nomor urut */
    margin-bottom: 20px; /* Jarak bawah agar tidak terlalu mepet */
}
.faq-answer ol li {
    margin-bottom: 8px; /* Jarak antar poin di dalam daftar */
}
.audio-controls,
.video-controls{
    border-radius: 8px;
    max-width: 100%;
    width: 100%;
}
/* ============================================= */
/* --- Halaman Checkout --- */
/* ============================================= */
/* --- Layout & Container --- */
.checkout-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* Dua kolom: Ringkasan & Info Pengiriman lebih lebar, Metode Pembayaran lebih kecil */
    gap: 40px; /* Jarak antar kolom */
    padding: 4rem 20px; /* Padding di sekitar layout */
    align-items: start; /* Pastikan konten rata atas */
}
.checkout-section {
    background-color: var(--card-bg);
    border: 1px solid var(--subtle-border-color);
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.checkout-section h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--heading-color);
    margin-bottom: 25px;
}

@media (max-width: 992px) {
    .checkout-layout {
        grid-template-columns: 1fr;
        /* Ubah menjadi satu kolom di layar menengah */
        gap: 30px;
    }
}

/* Styling untuk Ringkasan Belanja */
#checkout-items-summary .checkout-item-card {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--subtle-border-color); /* Garis putus-putus */
}
#checkout-items-summary .checkout-item-card:last-child {
    border-bottom: none;
    /* Hapus border di item terakhir */
    margin-bottom: 0;
    padding-bottom: 0;
}
#checkout-items-summary .checkout-item-card img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--subtle-border-color);
}
.checkout-item-details {
    flex-grow: 1;
}
.checkout-item-details h4 {
    font-size: 0.95rem;
    color: var(--heading-color);
    margin: 0 0 5px 0;
    font-weight: 500;
}
.checkout-item-details p {
    font-size: 0.85rem;
    color: var(--text-color);
    margin: 0;
}
.checkout-item-price {
    font-weight: bold;
    color: var(--accent-color);
    white-space: nowrap; /* Pastikan harga tidak pecah baris */
}

/* Styling untuk Total Ringkasan */
#checkout-total-summary {
    border-top: 2px solid var(--subtle-border-color);
    padding-top: 20px;
    margin-top: 20px;
}
#checkout-total-summary p {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 1rem;
}
#checkout-total-summary .total-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent-color);
}


/* Styling untuk Informasi Pengiriman */
#shipping-address-display p {
    margin-bottom: 10px;
}
#shipping-address-display strong {
    color: var(--heading-color);
    min-width: 120px; /* Lebar minimum untuk label strong */
    display: inline-block; /* Agar bisa pakai min-width */
}
#change-address-btn {
    margin-top: 15px;
}

/* Styling untuk Metode Pembayaran */
.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}
.payment-methods .radio-option {
    display: flex;
    align-items: center;
    gap: 10px; /* Jarak antara radio dan label */
    border: 1px solid var(--subtle-border-color);
    border-radius: 6px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease; 
}
.payment-methods .radio-option:hover {
    background-color: var(--section-bg); /* Warna sedikit berbeda saat hover */
}
.payment-methods input[type="radio"] {
    appearance: none; /* Sembunyikan default radio button */
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-color); /* Warna border default */
    border-radius: 50%; /* Bentuk bulat */
    outline: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0; /* Jangan biarkan mengecil */
}
.payment-methods input[type="radio"]:checked {
    border-color: var(--accent-color); /* Warna border saat terpilih */
    background-color: var(--accent-color); /* Isi warna saat terpilih */
}
.payment-methods input[type="radio"]:checked::before {
    content: '';                                  /* Wajib ada untuk membuat elemen semu ::before muncul. */
    display: block;                               /* Membuatnya menjadi elemen blok. */
    width: 10px;
    height: 10px;
    background-color: var(--accent-text-color); /* Titik tengah */
    border-radius: 50%;
    position: absolute;                           /* Membuatnya "melayang" di dalam tombol radio. */
    top: 50%;                                     /* Posisikan di tengah secara vertikal. */
    left: 50%;                                    /* Posisikan di tengah secara horizontal. */
    transform: translate(-50%, -50%);             /* Trik CSS untuk memusatkan elemen secara presisi. */
}
.payment-methods label {
    cursor: pointer;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 0;
}
#courier-note-title {
    margin-top: 30px;
}
#place-order-btn {
    width: 100%;
    margin-top: 30px;
}

/* Styling untuk Catatan Kurir */
#courier-note {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--subtle-border-color);
    border-radius: 6px;
    font-size: 1rem;
    background-color: var(--body-bg);
    color: var(--text-color);
    outline: none;                                /* Menghilangkan garis outline biru default dari browser saat diklik. */
    resize: vertical;                             /* KUNCI: Hanya mengizinkan pengguna untuk mengubah ukuran area teks secara vertikal (ke bawah), bukan horizontal. */
    min-height: 80px;                             /* Menetapkan tinggi minimal untuk area teks. */
}
#courier-note::placeholder {  /* Aturan khusus untuk teks placeholder. */
    color: var(--text-color);                     /* Warna teks placeholder. */
    opacity: 0.7;                                 /* Membuat teks placeholder sedikit lebih transparan. */
}

/* Responsif untuk Layar Sangat Kecil (Mobile) */
@media (max-width: 576px) {
    .checkout-section {
        padding: 20px; /* Kurangi padding */
    }
    .checkout-section h2 {
        font-size: 1.3rem; /* Kecilkan ukuran font judul */
        margin-bottom: 20px;
    }
    #checkout-total-summary .total-price {
        font-size: 1.3rem;
    }

    #shipping-address-display strong {
        min-width: 90px; /* Sesuaikan lebar minimum label */
    }
}

@media (max-width: 992px) {
    .checkout-layout {
        grid-template-columns: 1fr; /* Ubah menjadi satu kolom di layar menengah */
        gap: 30px;
    }
    /* Penyesuaian untuk setiap bagian checkout saat menjadi satu kolom */
    .checkout-section {
        padding: 25px; /* Sedikit kurangi padding */
    }
    .checkout-section h2 {
        font-size: 1.4rem; /* Ukuran font judul sedikit lebih kecil */
        margin-bottom: 20px;
    }
    /* Penyesuaian untuk ringkasan item di mobile */
    #checkout-items-summary .checkout-item-card {
        flex-wrap: wrap; /* Izinkan item wrap ke baris baru */
        text-align: left; /* Biarkan teks rata kiri */
        align-items: flex-start; /* Rata atas */
        gap: 10px; /* Kurangi jarak */
    }
    #checkout-items-summary .checkout-item-card img {
        width: 80px; /* Sesuaikan ukuran gambar */
        height: 80px;
        flex-shrink: 0; /* Jangan biarkan gambar mengecil */
    }
    .checkout-item-details {
        flex-grow: 1; /* Biarkan detail mengambil ruang yang tersedia */
    }
    .checkout-item-price {
        width: 100%; /* Harga ambil lebar penuh */
        text-align: right; /* Rata kanan */
        margin-top: 5px; /* Jarak dari detail */
        font-size: 1.1rem;
    }
    /* Penyesuaian untuk total ringkasan */
    #checkout-total-summary p {
        font-size: 0.95rem;
    }
    #checkout-total-summary .total-price {
        font-size: 1.4rem;
    }
    /* Penyesuaian untuk info pengiriman */
    #shipping-address-display strong {
        min-width: 100px; /* Sesuaikan lebar minimum label */
    }
}

@media (max-width: 576px) {
    .checkout-layout {
        padding: 20px 15px; /* Padding keseluruhan lebih kecil */
    }
    .checkout-section {
        padding: 20px;
    }
    .checkout-section h2 {
        font-size: 1.2rem;
    }
    #checkout-items-summary .checkout-item-card img {
        width: 50px;
        height: 50px;
    }
    #checkout-items-summary .checkout-item-details h4 {
        font-size: 0.85rem;
    }
    #checkout-items-summary .checkout-item-details p {
        font-size: 0.8rem;
    }
    #checkout-item-price {
        font-size: 1rem;
    }
    #checkout-total-summary .total-price {
        font-size: 1.2rem;
    }
    .payment-methods .radio-option {
        padding: 8px 10px; /* Kurangi padding metode pembayaran */
    }
    .payment-methods input[type="radio"] {
        width: 18px;
        height: 18px;
    }
    .payment-methods input[type="radio"]:checked::before {
        width: 8px;
        height: 8px;
    }
    .payment-methods label {
        font-size: 0.9rem;
    }
    #courier-note {
        font-size: 0.9rem;
        padding: 10px;
    }
    .cta-button {
        font-size: 0.95rem;
        padding: 12px 15px;
    }
}

/* ============================================= */
/* --- Pop-up Customer Service --- */
/* ============================================= */
.cs-popup {
    position: fixed;                              /* KUNCI: Membuat pop-up "menempel" di layar, tidak ikut ter-scroll bersama halaman. */
    bottom: 20px;                                 /* Jarak 20px dari bawah layar. */
    right: 20px;                                  /* Jarak 20px dari kanan layar. */
    width: 300px;                                 /* Lebar tetap untuk pop-up. */
    background-color: var(--card-bg);
    border: 1px solid var(--subtle-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);    /* Efek bayangan agar terlihat "melayang". */
    z-index: 100;                                 /* Memastikan pop-up berada di lapisan atas. */
    transform-origin: bottom right;               /* Mengatur titik poros animasi ke pojok kanan bawah. */

    /* KUNCI ANIMASI (Keadaan Awal): */
    transform: scale(0.8);                        /* Awalnya, perkecil ukurannya menjadi 80%. */
    opacity: 0;                                   /* Buat sepenuhnya transparan. */
    visibility: hidden;                           /* Sembunyikan dan buat tidak bisa diklik. */
    transition: all 0.3s ease-in-out;             /* Animasikan semua perubahan selama 0.3 detik. */
}
.cs-popup.is-active { /* Aturan saat JavaScript menambahkan class ".is-active" */
    transform: scale(1);                          /* Kembalikan ukuran ke 100%. */
    opacity: 1;                                   /* Buat terlihat sepenuhnya. */
    visibility: visible;                          /* Buat bisa berinteraksi. */
}
.cs-popup-header {
    display: flex;
    justify-content: space-between;             /* Mendorong judul ke kiri dan tombol 'x' ke kanan. */
    align-items: center;
    padding: 12px 15px;
    background-color: var(--accent-color);
    border-bottom: 1px solid var(--subtle-border-color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.cs-popup-header h3 {
    font-size: 1rem;
    font-family: var(--font-body);
    color: var(--accent-text-color);
    margin: 0;
}
.cs-popup-header .close-btn {
    background: none;
    border: none;
    color: var(--accent-text-color);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}
.cs-popup-header .close-btn:hover {
    color: #e63946;
}
.cs-popup-body {
    padding: 15px;
    text-align: left;
}
.cs-popup-body p {
    margin-bottom: 15px;
    font-size: 0.9rem;
}
.cs-cta {
    width: 100%;
}
@media (max-width: 420px) {
    .cs-popup {
        width: 95%; /* Buat lebar pop-up 95% dari layar */
        right: 2.5%; /* Pusatkan di mobile */
        bottom: 15px; /* Turunkan sedikit */
    }
    .cs-popup-header h3 {
        font-size: 0.9rem;
    }
    .cs-popup-body p {
        font-size: 0.85rem;
    }
}

/* ============================================= */
/* --- Footer --- */
/* ============================================= */
footer {
    background: var(--header-top-bg);
    color: var(--light-text-color);
    text-align: center;
    padding: 1.5rem 0;
}
@media (max-width: 768px) {
    footer {
        padding: 1rem 0; /* Kurangi padding vertikal di mobile */
        font-size: 0.8rem; /* Kurangi ukuran font */
    }
}

/* ============================================= */
/* --- Style Untuk Javascript --- */
/* ============================================= */
.checkout-btn-full-width { /* Untuk tombol checkout di summary */
    width: 100%;
    margin-top: 15px;
}
.warning-message { /* Untuk pesan peringatan */
    color: orange;
}
.hidden-element { /* Untuk elemen yang disembunyikan */
    display: none !important;
}
.visible-flex { /* Untuk elemen yang harus ditampilkan sebagai flex */
    display: flex !important;
}
.visible-block { 
    display: block !important;
}

/* ============================================= */
/* --- RESPONSIVE (MEDIA QUERIES) --- */
/* ============================================= */
@media (max-width: 320px) {
    /* Pastikan Produk Sejenis menjadi 1 kolom */
    .related-products-section .product-grid {
        grid-template-columns: 1fr;
    }
    .product-detail-info{
        font-size: 0.4rem;
    }
    .related-products-section .product-card img {
        height: 80px; /* Ukuran gambar lebih kecil */
    }
}
@media (max-width: 280px) {
    html {
        font-size: 9px;
    }
    body {
        overflow-x: hidden; /* KUNCI: Memaksa untuk menyembunyikan scrollbar horizontal, mencegah konten "tembus" ke samping. */
    }
    .container,
    .header-top .container,
    .header-main .container,
    .featured-products .container {
        padding: 4px;           /* Mengurangi ruang kosong di dalam container menjadi sangat kecil (hanya 4px). */
        width: 100%;            /* Memastikan container memenuhi seluruh lebar layar yang tersedia. */
        box-sizing: border-box; /* Memastikan padding tidak akan menambah lebar total container. */
    }
    .logo img {
        width: 24px;            /* Mengecilkan lebar gambar logo secara drastis. */
    }
    .logo span {
        font-size: 0.75rem;     /* Mengecilkan ukuran teks "MineCart" di samping logo. */
    }
    .search-bar {
        flex-direction: column; /* Mengubah susunan search bar dari horizontal (input di samping tombol) menjadi vertikal (input di atas tombol). */
        gap: 4px;               /* Memberi jarak vertikal 4px antara input dan tombol cari. */
    }
    .search-bar input {
        width: 100%;
        font-size: 0.7rem;
        padding: 4px;
    }
    .search-bar button {
        width: 100%;
    }
    .home-carousel-content h1 {
        font-size: 1rem;
        text-align: center;
    }
    .home-carousel-content p {
        font-size: 0.75rem;
        text-align: center;
    }
    .cta-button {
        font-size: 0.7rem;
        padding: 4px 6px;
        display: block;
        width: 100%;
        text-align: center;
    }
    .carousel-slide img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .product-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .product-card {
        font-size: 0.7rem;
        padding: 4px;
    }
    footer p {
        font-size: 0.6rem;
        text-align: center;
    }
    nav ul li {
        font-size: 0.7rem;
    }
    .hamburger-btn {
        transform: scale(0.8);      /* Mengecilkan ukuran tombol hamburger menjadi 80% dari ukuran aslinya. */
    }
    .cart-icon-wrapper img,
    #theme-toggle-btn img {
        width: 20px;
    }
    .cart-counter {
        font-size: 0.65rem;
        padding: 1px 4px;
    }
    .header-top,
    .header-main,
    nav,
    footer {
        overflow-x: hidden;         /* KUNCI: Mencegah elemen-elemen besar ini menciptakan scroll horizontal jika ada konten yang "tembus". */
    }
    button,
    .cta-button,
    .search-bar button {
        min-height: 32px;           /* Menetapkan tinggi MINIMAL untuk semua tombol agar tetap mudah diklik (standar aksesibilitas). */
        min-width: 44px;            /* Menetapkan lebar MINIMAL untuk semua tombol. */
        font-size: 0.75rem;         /* Ukuran font yang sangat kecil. */
        padding: 6px 8px;           /* Padding yang diperkecil. */
        border-radius: 6px;         /* Sudut tumpul. */
        line-height: 1;             /* Mengatur tinggi baris agar teks pas di tengah secara vertikal. */
        box-sizing: border-box;     /* Memastikan padding tidak menambah ukuran total tombol. */
    }
    .search-bar button img,
    #theme-toggle-btn img,
    .cart-icon-wrapper img {
        max-height: 20px;
        width: auto;
    }
    h1 {
        font-size: 1rem;
    }
    .contact-social-links img {
        height: 25px; /* Kecilkan ikon sosial */
    }
}
@media (max-width: 120px) {
    .container, /* Reset PADDING yang memakan tempat */
    .header-main .container {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .search-bar, /* embunyikan elemen yang tidak krusial */
    .header-main-nav,
    .header-top,
    .logo span, /* Sembunyikan teks "MineCart" */
    .social-media {
        display: none !important;
    }
    .header-main .container { /* Atur ulang header agar hanya logo & hamburger yang tampil */
        display: flex;
        justify-content: space-between; /* Logo di kiri, hamburger di kanan */
        align-items: center;
        flex-wrap: nowrap; /* Jangan biarkan turun baris */
        width: 100%;
    }
    .logo {
        padding: 0;
        margin: 0;
        flex-shrink: 1; /* Izinkan logo untuk ikut menyusut */
    }
    img { /* Semua gambar tidak menyebabkan overflow */
        max-width: 100%;
        height: auto;
    }
    .featured-products h2 {
        font-size: 0.01rem;        /* Kecilkan ukuran font secara drastis */
        word-break: break-all;    /* Paksa teks untuk patah jika tidak muat */
        line-height: 1.4;         /* Beri sedikit jarak antar baris jika teksnya patah */
    }
    .product-card-footer {
        flex-direction: column;   /* Tumpuk harga dan tombol ke bawah */
        align-items: flex-start;  /* Ratakan keduanya ke kiri */
        gap: 8px;                 /* Beri sedikit jarak vertikal antara harga dan tombol */
    }
    /* Letakkan di dalam @media (max-width: 120px) */
    .product-card {
        /* Kurangi padding di dalam kartu itu sendiri */
        padding: 5px;
    }
    .product-card-body, .product-card-footer {
        /* Kurangi padding di bagian body dan footer kartu */
        padding: 5px;
    }
    .product-card-body h3,
    .product-card-body h2 {
        font-size: 0.9rem; /* Ukuran judul lebih kecil lagi */
    }
    /* Opsi: Sembunyikan deskripsi di layar sangat kecil agar tidak ramai */
    .product-card-body .description {
        display: none;
    }
    .product-card-footer .price {
        font-size: 0.9rem; /* HARUS sangat kecil agar angka harga tidak overflow */
        margin-bottom: 5px; /* Beri jarak ke tombol di bawahnya */
    }
    .product-card-footer .buy-btn {
        font-size: 0.8rem;
        padding: 4px 8px; /* Padding minimal agar tombol tetap bisa diklik */
        width: 100%; /* Buat tombol memenuhi lebar footer */
    }
    /* Penyesuaian untuk bagian kontak */
    .contact-section {
        padding: 1rem 0;
    }
    .contact-grid {
        gap: 10px;
    }
    .contact-item {
        padding: 10px;
    }
    .contact-section h2 {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    .contact-item img {
        height: 25px; /* Ikon utama lebih kecil */
        margin-bottom: 0.5rem;
    }
    .contact-item h3 {
        font-size: 0.9rem;
    }
    .contact-item p {
        font-size: 0.8rem;
    }
    .contact-social-links img {
        height: 20px; /* Ikon sosial lebih kecil */
    }
    /* Penyesuaian untuk form login/register */
    .auth-container {
        padding: 1rem 10px;
    }
    .auth-form {
        padding: 15px;
    }
    /* judul di halaman Login & Register */
    .auth-form h1 {
        font-size: 1rem; /* Kecilkan font secara drastis */
        word-break: break-all; /* Paksa teks untuk pindah baris */
        line-height: 1.3; /* Atur jarak baris jika teksnya jadi 2 baris atau lebih */
    }
    /* teks di halaman Akun */
    .user-info-item {
        word-break: break-all; /* Pastikan aturan ini tetap aktif dan kuat */
    }
    .form-group {
        margin-bottom: 0.8rem;
    }
    .auth-form input, .auth-form .cta-button {
        padding: 8px;
        font-size: 0.8rem;
    }
    /* Memastikan label form bisa pindah baris jika namanya panjang */
    .form-group label {
        white-space: normal;
    }
    /* Membuat radio button jenis kelamin menumpuk ke bawah */
    .radio-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 60px) {
    html,
    body {
        width: 100%;
        overflow-x: hidden !important;
    }
    * {
        box-sizing: border-box;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    header,
    nav,
    .header-top,
    .header-main,
    .search-bar,
    .product-grid,
    .home-carousel,
    .home-carousel-content,
    .container,
    .logo,
    .logo img {
        max-width: 100% !important;
        overflow-x: hidden !important;
        white-space: normal !important;
    }
    .container { /* Hapus padding horizontal besar */
        padding-left: 2px;
        padding-right: 2px;
    }
    .search-bar input,
    .search-bar button,
    .cta-button,
    .product-card,
    .product-card img {
        width: 100% !important;
    }
    .header-top-nav,
    .language-selector-wrapper,
    .social-media {
        display: none !important;
    }
    .featured-products h2 {
        font-size: 0.2rem;        /* Kecilkan ukuran font secara drastis */
        word-break: break-all;    /* Paksa teks untuk patah jika tidak muat */
        line-height: 1.4;         /* Beri sedikit jarak antar baris jika teksnya patah */
    }
    /* Penyesuaian ekstrem untuk form login/register */
    .auth-container {
        padding: 1rem 5px; /* Kurangi padding container */
    }
    .auth-form {
        padding: 10px; /* Kurangi padding form */
    }
    .auth-form h1 {
        font-size: 0.8rem; /* Perkecil lagi judul */
        margin-bottom: 0.8rem;
    }
    .form-group {
        margin-bottom: 0.5rem; /* Kurangi jarak antar field */
    }
    .auth-form input,
    .auth-form .cta-button {
        padding: 4px; /* Perkecil padding input dan tombol */
        font-size: 0.7rem;
    }
    .auth-switch {
        font-size: 0.7rem;
        margin-top: 1rem;
    }
    /* Membuat tombol Login & Register di header menumpuk ke bawah */
    #account-menu.is-logged-out {
        flex-direction: column;
        align-items: stretch; /* Agar tombolnya sama lebar */
        gap: 5px; /* Jarak vertikal antar tombol */
    }

    #account-menu.is-logged-out .btn {
        width: 100%; /* Buat tombol memenuhi lebar yang tersedia */
        text-align: center;
    }
}

@media (max-width: 50px) {
    html {
        font-size: 6px; /* Super kecil, tapi masih bisa baca teks pendek */
    }
    body {
        overflow-x: hidden;
        margin: 0;
    }
    header,
    .header-top,
    .header-main,
    footer,
    nav,
    .container {
        padding: 0;                  /* Menghapus SEMUA padding dari elemen-elemen layout utama. */
        margin: 0;                   /* Menghapus SEMUA margin dari elemen-elemen layout utama. */
        width: 100%;                 /* Memaksa lebar elemen agar pas dengan lebar layar. */
        overflow-x: hidden;          /* Menyembunyikan scroll horizontal jika ada konten yang "tembus". */
    }
    .logo img {
        width: 16px;                 /* Mengecilkan gambar logo menjadi sangat kecil. */
        height: auto;                /* Membiarkan tinggi gambar menyesuaikan secara otomatis. */
    }
    .logo span {
        font-size: 0.5rem;
        display: none; /* Sembunyikan teks jika tidak muat */
    }
    .search-bar {
        flex-direction: column;      /* Mengubah susunan search bar menjadi vertikal (input di atas tombol). */
        gap: 2px;                    /* Memberi jarak vertikal yang sangat kecil antara input dan tombol. */
    }
    .search-bar input {
        width: 100%;                 /* Input memenuhi lebar. */
        font-size: 0.5rem;           /* Ukuran font di dalam input sangat kecil. */
        padding: 2px;                /* Padding di dalam input sangat kecil. */
    }
    .search-bar button {
        min-height: 24px;
        font-size: 0.5rem;
        padding: 2px 4px;
    }
    .home-carousel-content h1,
    .home-carousel-content p {
        font-size: 0.5rem;
        text-align: center;
    }
    .cta-button {
        font-size: 0.5rem;
        padding: 2px 4px;
        width: 100%;
    }
    .carousel-slide img {
        width: 100%;                 /* Gambar carousel tetap memenuhi lebar layar. */
        height: auto;
        object-fit: cover;
    }
    .product-grid {
        grid-template-columns: 1fr;  /* Memaksa grid produk menjadi satu kolom. */
        gap: 4px;                    /* Jarak vertikal antar produk sangat kecil. */
    }
    .product-card {
        font-size: 0.5rem;
        padding: 2px;
    }
    nav ul li {
        font-size: 0.5rem;
    }
    .hamburger-btn {
        transform: scale(0.6);       /* Mengecilkan tombol hamburger menjadi 60% dari ukuran aslinya. */
        margin: 0;                   /* Menghapus margin agar tidak memakan ruang. */
    }
    #theme-toggle-btn img,
    .cart-icon-wrapper img {
        width: 16px;
        height: auto;
    }
    .cart-counter {
        font-size: 0.4rem;
        padding: 1px 3px;
    }
    footer p {
        font-size: 0.5rem;
        text-align: center;
    }
    .mobile-only {
        display: block !important;
    }
    .header-top-nav, /* Sembunyikan elemen non-penting di layar ekstrem kecil */
    .language-selector-wrapper,
    .social-media,
    .search-toggle-btn {
        display: none !important;
    }
    .featured-products h2 {
        font-size: 0.2rem;        /* Kecilkan ukuran font secara drastis */
        word-break: break-all;    /* Paksa teks untuk patah jika tidak muat */
        line-height: 1.4;         /* Beri sedikit jarak antar baris jika teksnya patah */
    }
}

/* --- MineCart Laravel Sprint 1 Adjustments --- */
.cart-text-mobile {
    display: none;
}

@media (max-width: 768px) {
    .cart-text-mobile {
        display: inline;
        margin-left: 8px;
        font-weight: 500;
        vertical-align: middle;
    }
}

@media (max-width: 1200px) and (min-width: 769px) {
    .header-main-nav ul {
        gap: 12px !important;
    }
    .search-bar {
        margin: 0 15px !important;
    }
    .logo span {
        font-size: 1.2rem !important;
    }
}

/* ========================================= */
/* E-COMMERCE NATIONAL STYLE REFACTOR        */
/* ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
}

.header-top {
    background: var(--body-bg);
    border-bottom: 1px solid var(--subtle-border-color);
    padding: 6px 0;
    font-size: 0.85rem;
    color: var(--text-color);
}

.social-media {
    display: flex;
    gap: 15px;
    align-items: center;
}

.social-media img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.social-media span {
    color: var(--text-color);
}

.a-header-top {
    text-decoration: none;
    color: var(--text-color) !important;
}
.a-header-top:hover {
    color: var(--accent-color) !important;
}

.header-main {
    padding: 15px 0;
    box-shadow: none;
    border-bottom: 1px solid var(--subtle-border-color);
    background: var(--card-bg);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
}
.logo span {
    font-size: 1.5rem !important;
    font-weight: 700;
    color: var(--text-color);
}

.ecom-cart {
    display: flex;
    align-items: center;
    margin-left: 20px; /* Jauhkan sedikit dari search bar */
}
.ecom-cart > a {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.ecom-cart .icon-nav {
    width: 26px;
    height: 26px;
    object-fit: contain;
}
.ecom-cart .cart-counter {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #e63946;
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: bold;
    line-height: 1;
    border: 2px solid var(--card-bg);
}

.ecom-search {
    display: flex;
    width: 100%;
    border: 1.5px solid var(--accent-color);
    border-radius: 8px;
    overflow: hidden;
    height: 42px;
    transition: box-shadow 0.3s ease;
}

.ecom-search:focus-within {
    box-shadow: 0 0 0 3px rgba(32, 178, 170, 0.2);
}

.ecom-search input {
    flex-grow: 1;
    border: none;
    padding: 0 15px;
    outline: none;
    background: transparent;
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
}

.ecom-search button {
    background: var(--accent-color);
    border: none;
    padding: 0 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.ecom-search button:hover {
    background: #1b9b94;
}

.ecom-search button img {
    width: 18px;
    filter: brightness(0) invert(1);
}

.v-divider {
    width: 1px;
    height: 24px;
    background: var(--subtle-border-color);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--subtle-border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    color: var(--text-color);
}

.account-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
}

.account-dropdown-container {
    position: relative;
    display: inline-block;
}

.account-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    /* margin-top: 10px; dihapus agar tidak ada celah saat di-hover */
    background: var(--card-bg);
    min-width: 160px;
    border: 1px solid var(--subtle-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 100;
    padding: 8px 0;
    flex-direction: column;
}

.account-dropdown-container:hover .account-dropdown-menu {
    display: flex !important;
}

.account-dropdown-menu a, .account-dropdown-menu button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 15px;
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.account-dropdown-menu button.logout-btn {
    color: #e63946;
}

.account-dropdown-menu a:hover, .account-dropdown-menu button:hover {
    background: var(--body-bg);
}

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

.header-top-nav ul {
    display: flex;
    gap: 20px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-bottom-nav ul, .header-main-nav ul {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.btn-outline {
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    background: transparent;
}
.btn-outline:hover {
    background: rgba(32, 178, 170, 0.1);
}

.header-bottom {
    background: var(--card-bg);
    padding: 10px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.desktop-only {
    display: flex !important;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    .header-main .header-container {
        flex-wrap: wrap;
        gap: 15px;
    }
    .header-search-container {
        order: 3;
        width: 100%;
        max-width: 100%;
    }
    .header-bottom {
        /* display: none; */
        background: transparent;
        padding: 0;
        box-shadow: none;
        position: static;
    }
}



/* Global Cursor Pointer Fixes */
button, a, .btn, .cta-button, input[type="submit"], input[type="button"], label { cursor: pointer; }

button, a, .cart-icon-wrapper, .theme-button, input[type='submit'], input[type='button'], .account-dropdown-toggle { cursor: pointer; }

/* Pagination Styling */
.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 30px;
    gap: 5px;
}

.page-item .page-link {
    position: relative;
    display: block;
    color: var(--text-color);
    text-decoration: none;
    background-color: var(--card-bg);
    border: 1px solid var(--subtle-border-color);
    padding: 8px 14px;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
    font-weight: 500;
}

.page-item .page-link:hover {
    z-index: 2;
    background-color: var(--body-bg);
    border-color: var(--subtle-border-color);
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.page-item.disabled .page-link {
    color: var(--text-color);
    pointer-events: none;
    background-color: var(--body-bg);
    border-color: var(--subtle-border-color);
    opacity: 0.5;
}