/* ==================================================
   TABLET & MOBILE
================================================== */
@media (max-width: 768px) {

    #main {
        width: 100%;
    }

    .menu-toggle {
        display: block;
        text-align: center;
    }

    .menu {
        display: none;
        flex-direction: column;
        background: #f9f9f9;
        border-radius: 6px;
    }

    .menu.active {
        display: flex;
        animation: slideDown 0.25s ease;
    }

    .menu li a {
        padding: 14px;
        border-bottom: 1px solid #eee;
    }

    #konten {
        flex-direction: column;
        padding: 15px;
    }

    .tengah { order: 1; }
    .kiri   { order: 2; margin-top: 20px; }
    .kanan  { display: none; }

    /* PRODUK GRID MOBILE */
    .box_produk {
        width: calc(50% - 8px);
    }

    .box_produk .thumb {
        height: 150px;
    }

    /* LOGO MOBILE */
    .logo a {
        flex-direction: column;
    }

    .logo img.logo-img {
        height: 42px;
    }

    .logo-text {
        display: block;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1px;
        margin-top: 4px;
        color: #222;
    }
}

/* ==================================================
   HP KECIL
================================================== */
@media (max-width: 480px) {

    .box_produk {
        width: 100%;
    }

    .box_produk .thumb {
        height: 140px;
    }
}

/* ==================================================
   ANIMASI PREMIUM
================================================== */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .gambar-utama-box {
        aspect-ratio: 1 / 1;
    }

    .thumb-item {
        width: 56px;
        height: 56px;
    }
}

/* ===== SIDEBAR MOBILE CENTER FIX ===== */
@media (max-width: 768px) {

    aside.kiri {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center; /* CENTER SEMUA BOX */
    }

    /* Box umum di sidebar */
    aside.kiri > * {
        width: 100%;
        max-width: 420px;     /* biar elegan, ga kepanjangan */
        margin-left: auto;
        margin-right: auto;
    }

    /* Judul box (BRANDS, JAM, REKENING) */
    .background_pjg {
        text-align: center;
        letter-spacing: 1px;
    }

    /* LIST BRAND */
    .menu-sidebar {
        text-align: center;
    }

    .menu-sidebar li a {
        padding: 10px 0;
        font-size: 14px;
    }

    /* JAM OPERASIONAL */
    .sidebar-jam {
        text-align: center;
        font-size: 14px;
        line-height: 1.7;
    }

    /* REKENING */
    .rekening-box {
        text-align: center;
    }
}

@media (max-width: 768px) {

    .kotak_detail {
        padding: 16px;
    }

    .produk-judul {
        font-size: 18px;
        text-align: center;
    }

    .detail-harga {
        text-align: center;
        font-size: 20px;
    }

    .info-status {
        text-align: center;
    }

    .btn-wa {
        font-size: 15px;
        padding: 15px;
    }
}

@media (max-width: 768px) {

    .detail-grid {
        flex-direction: column;
    }

    .kotak_detail {
        padding: 18px;
    }

    .produk-judul {
        text-align: center;
        font-size: 18px;
    }

    .detail-harga {
        text-align: center;
        font-size: 20px;
    }

    .info-status {
        text-align: center;
    }

    .btn-wa {
        font-size: 16px;
        padding: 16px;
    }
}

/* ================= SIDEBAR DROPDOWN MOBILE ================= */
.brands-header {
    display: none;
}

/* MOBILE */
@media (max-width: 768px) {

    .sidebar-box {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.06);
        margin-bottom: 18px;
        overflow: hidden;
    }

    /* BRANDS HEADER */
    .brands-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        background: linear-gradient(135deg, #fafafa, #f1f1f1);
    }

    .brands-header .arrow {
        font-size: 14px;
        transition: transform 0.3s ease;
    }

    /* BRANDS LIST */
    .brands-list {
        max-height: 0;
        overflow: hidden;
        padding: 0 16px;
        transition: max-height 0.35s ease, padding 0.3s ease;
    }

    .brands-list.active {
        max-height: 500px;
        padding: 10px 16px 14px;
    }

    .brands-list li a {
        display: block;
        padding: 8px 0;
        font-size: 14px;
        color: #333;
        border-bottom: 1px dashed #eaeaea;
    }

    .brands-list li:last-child a {
        border-bottom: none;
    }

    .brands-box.open .arrow {
        transform: rotate(180deg);
    }

    /* JAM & PEMBAYARAN CENTER */
    .sidebar-jam,
    .pembayaran-box {
        text-align: center;
    }
}

/* ================= BRAND HEADER BACKGROUND (MOBILE) ================= */
@media (max-width: 768px) {

    /* STATE DEFAULT (SEBELUM DI KLIK) */
    .brands-header {
        background: linear-gradient(135deg, #ffffff, #f2f2f2);
        border: 1px solid #e6e6e6;
        border-radius: 14px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
    }

    /* HOVER / TAP FEEDBACK */
    .brands-header:active {
        transform: scale(0.98);
        background: linear-gradient(135deg, #f7f7f7, #ededed);
    }

    /* STATE SAAT DIBUKA */
    .brands-box.open .brands-header {
        background: linear-gradient(135deg, #c30, #ff5a5a);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 6px 16px rgba(195,48,0,0.25);
    }

    .brands-box.open .brands-header span {
        color: #fff;
    }

    .brands-box.open .arrow {
        color: #fff;
    }
}

/* ================= MOBILE ONLY ================= */
@media (max-width: 768px) {

    /* Judul lama disembunyikan di mobile */
    .menu-sidebar + .background_pjg,
    .background_pjg {
        display: none;
    }

}

@media (max-width: 768px) {

    /* Desktop title disembunyikan di mobile */
    .brands-title-desktop {
        display: none;
    }

    /* Dropdown aktif */
    .brands-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-weight: 700;
        padding: 10px 12px;
        border-radius: 6px;
        background: #f5f5f5;
        margin-bottom: 8px;
    }

    .brands-list {
        display: none;
    }

    .brands-list.active {
        display: block;
        animation: fadeSlide 0.25s ease;
    }
}

/* animasi premium */
@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}