/* ===== base.css ===== */
/* Reset */
*:not(.carousel *) {
    margin: 0;

}

body {
    overflow-x: hidden; /* Hindari horizontal scroll */
}

html {
    overflow: visible; /* Pastikan sticky tetap berfungsi */
}


/* Styling dasar */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
	margin: 0;
    text-align: center;
}

img {
    max-width: 100%; /* Batasi elemen agar tidak melampaui layar */
    width: 100%; /* Pastikan elemen menyesuaikan lebar layar */
    overflow-x: hidden;
}

/* Title dan Sub Title */
.title {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.subtitle {
    font-size: 2em;
    color: #555;
}

.section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.section-title {
    text-align: center;
}

.section-title-link {
    text-decoration: none;
}

/* Atur elemen fleksibel */
.content {
    max-width: 100%;
}

/* Tambahkan ruang kosong di bawah konten */
.with-bottom-space::after {
    content: "";
    display: block;
    height: 150px;
}

img, table, .content {
    max-width: 100%; /* Batasi elemen agar tidak melampaui layar */
    width: 100%; /* Pastikan elemen menyesuaikan lebar layar */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 30px; /* Atur margin atas */
    margin-bottom: 20px; /* Atur margin bawah */
}

/* Styling untuk banner iklan */
.adsense-banner {
    text-align: center;
    margin-top: 20px; /* Jarak antara footer dan iklan */
  }

  
/* Styling untuk banner cookies */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 15px;
    text-align: center;
    z-index: 1000;
}
#cookie-banner button {
    margin-left: 10px;
    padding: 5px 10px;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#cookie-banner button:hover {
    background-color: #0056b3;
}

/* ===== buttons.css ===== */
/* Reset untuk semua tombol */
button, a.button {
    padding: 5px 10px; /* Tambahkan ruang di atas-bawah (10px) dan kiri-kanan (20px) */
    display: inline-block;
    font-size: 14px;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    color: white;
    border: none;
    border-radius: 50px; /* Membuat tombol bergaya kapsul */
    cursor: pointer;
    padding: 5px 10px; /* Tambahkan ruang di atas-bawah (10px) dan kiri-kanan (20px) */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan untuk efek 3D */
}

button .material-icons {
    vertical-align: middle; /* Ikon sejajar dengan teks */
    margin-right: 8px; /* Jarak antara ikon dan teks */
    font-size: 20px; /* Sesuaikan ukuran ikon */
}

/* Default warna tombol */
button.button, a.button {
    background-color: #4CAF50; /* Hijau default */
}

button.button:hover, a.button:hover {
    background-color: #3e8e41; /* Hijau gelap saat hover */
    transform: scale(1.05) translateY(-2px); /* Membesar sedikit + naik */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar saat hover */
}

button.button:active, a.button:active {
    transform: scale(1) translateY(2px); /* Efek ditekan */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Bayangan lebih kecil saat klik */
}

/* Variasi tombol */
.button-primary {
    padding: 5px 10px; /* Tambahkan ruang di atas-bawah (10px) dan kiri-kanan (20px) */
    background-color: #007bff; /* Biru */
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2); /* Tambahkan warna sesuai tombol */
}

.button-primary:hover {
    padding: 5px 10px; /* Tambahkan ruang di atas-bawah (10px) dan kiri-kanan (20px) */
    background-color: #0056b3; /* Biru gelap */
    transform: scale(1.05) translateY(-2px); /* Membesar sedikit + naik */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar saat hover */
    box-shadow: 0 6px 10px rgba(0, 86, 179, 0.3); /* Bayangan lebih gelap */
}

.button-secondary {
    padding: 5px 10px; /* Tambahkan ruang di atas-bawah (10px) dan kiri-kanan (20px) */
    background-color: #6c757d; /* Abu-abu */
    box-shadow: 0 4px 6px rgba(108, 117, 125, 0.2);
}

.button-secondary:hover {
    padding: 5px 10px; /* Tambahkan ruang di atas-bawah (10px) dan kiri-kanan (20px) */
    background-color: #5a6268; /* Abu-abu gelap */
    transform: scale(1.05) translateY(-2px); /* Membesar sedikit + naik */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar saat hover */
    box-shadow: 0 6px 10px rgba(90, 98, 104, 0.3);
}

.button-danger {
    padding: 5px 10px; /* Tambahkan ruang di atas-bawah (10px) dan kiri-kanan (20px) */
    background-color: #f44336; /* Merah */
    box-shadow: 0 4px 6px rgba(244, 67, 54, 0.2);
}

.button-danger:hover {
    padding: 5px 10px; /* Tambahkan ruang di atas-bawah (10px) dan kiri-kanan (20px) */
    background-color: #d32f2f; /* Merah gelap */
    transform: scale(1.05) translateY(-2px); /* Membesar sedikit + naik */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar saat hover */
    box-shadow: 0 6px 10px rgba(211, 47, 47, 0.3);
}

.button-warning {
    padding: 5px 10px; /* Tambahkan ruang di atas-bawah (10px) dan kiri-kanan (20px) */
    background-color: #ffc107; /* Kuning */
    box-shadow: 0 4px 6px rgba(255, 193, 7, 0.2);
}

.button-warning:hover {
    padding: 5px 10px; /* Tambahkan ruang di atas-bawah (10px) dan kiri-kanan (20px) */
    background-color: #e0a800; /* Kuning gelap */
    transform: scale(1.05) translateY(-2px); /* Membesar sedikit + naik */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar saat hover */
    box-shadow: 0 6px 10px rgba(224, 168, 0, 0.3);
}

/* Tombol tambahan */
.button-info {
    padding: 5px 10px; /* Tambahkan ruang di atas-bawah (10px) dan kiri-kanan (20px) */
    background-color: #17a2b8; /* Biru Muda */
    box-shadow: 0 4px 6px rgba(23, 162, 184, 0.2);
}

.button-info:hover {
    padding: 5px 10px; /* Tambahkan ruang di atas-bawah (10px) dan kiri-kanan (20px) */
    background-color: #138496; /* Biru Muda Gelap */
    transform: scale(1.05) translateY(-2px); /* Membesar sedikit + naik */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar saat hover */
    box-shadow: 0 6px 10px rgba(19, 132, 150, 0.3);
}

.button-cart {
    padding: 5px 10px; /* Tambahkan ruang di atas-bawah (10px) dan kiri-kanan (20px) */
    background-color: #1ee55d; /* Biru Muda */
    box-shadow: 0 4px 6px rgba(23, 162, 184, 0.2);
}

.button-cart:hover {
    background-color: #1bd036;
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 10px rgba(19, 132, 150, 0.3);
}

/* Grup tombol */
.button-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap; /* Memungkinkan tombol turun ke baris berikutnya jika tidak cukup ruang */
    margin-top: 15px;
}

@media (max-width: 600px) {
    .button-group {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}

/* Navigasi anak panah */
.btn-arrow {
    background: transparent;
    border: transparent;
    color: #606060;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem;
}

.btn-arrow:hover {
    color: #404040;
    transform: scale(1.05) translateY(-2px); /* Membesar sedikit + naik */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar saat hover */
    text-decoration: none;
}

/* Dropdown terkendali */
.controlled-dropdown {
    display: none; /* Default: tersembunyi */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.controlled-dropdown.visible {
    display: block;
    opacity: 1;
}

.btn-arrow.prev {
    margin-right: 10px; /* Jarak tambahan di kanan */
}

.btn-arrow.next {
    margin-left: 10px; /* Jarak tambahan di kiri */
}

.button-icon {
    display: flex;
    flex-direction: column; /* Susun elemen secara vertikal */
    align-items: center; /* Pusatkan ikon dan teks */
    justify-content: center; /* Pusatkan konten tombol */
    background-color: #00ff48; /* Warna tombol */
    color: white; /* Warna teks dan ikon */
    border: none; /* Hilangkan border */
    border-radius: 5px; /* Membulatkan sudut */
    padding: 10px 15px; /* Tambahkan padding */
    cursor: pointer; /* Tampilkan kursor pointer */
    font-family: inherit; /* Gunakan font tombol sesuai dengan konteks */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.button-icon i {
    font-size: 24px; /* Ukuran ikon lebih besar */
    margin-bottom: 5px; /* Jarak antara ikon dan teks */
}

.button-icon .button-text {
    font-size: 12px; /* Ukuran teks kecil */
    line-height: 1.2; /* Tinggi baris yang lebih rapat */
    text-align: center; /* Teks rata tengah */
}

.button-icon:hover {
    background-color: #06b300; /* Warna saat hover */
    transform: scale(1.05); /* Efek sedikit membesar */
}

/* Kontrol Navigasi Artikel */
.article-navigation {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}


.search-button {
    background-color: #116466;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.search-button i {
    font-size: 1rem;
}

.search-button:hover {
    background-color: #0d4d4d;
}



/* ===== image.css ===== */
img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.rounded-image {
    border-radius: 8px;
}

.shadowed-image {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* ===== modern-buttons.css ===== */
/* Gaya umum untuk semua tombol */
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: #007bff; /* Bootstrap Primary Color */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); /* Efek 3D */
}

button:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1); /* Lebih kuat saat hover */
    transform: translateY(-2px); /* Efek melayang */
}

/* Efek klik (pressed) */
button:active {
    transform: translateY(2px); /* Efek ditekan */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Variasi warna berdasarkan kebutuhan */
.btn-detail, .btn-view-all-products, .btn-view-all-addons {
    background-color: #17a2b8;
}

.btn-add-to-cart, .btn-checkout, .btn-next-shipping {
    background-color: #28a745;
}

.btn-login, .btn-login-google {
    background-color: #ffc107;
}

.btn-edit {
    background-color: #6c757d;
}

.btn-delete {
    background-color: #dc3545;
}

.btn-back, .btn-back-to-product, .btn-back-to-addons {
    background-color: #6c757d;
}

/* Tombol khusus Google login */
.btn-login-google {
    display: flex;
    align-items: center;
    background-color: #db4437;
    color: white;
}

.btn-login-google:hover {
    background-color: #c23321;
}
/* Variasi warna tombol */
.btn-primary {
    background-color: #007bff;
}

.btn-success {
    background-color: #28a745;
}

.btn-danger {
    background-color: #dc3545;
}

.btn-warning {
    background-color: #ffc107;
}

/* Gradient tambahan (opsional untuk lebih menonjolkan efek 3D) */
button {
    background-image: linear-gradient(to bottom, #007bff, #0056b3); /* Gradient */
}

@media (max-width: 600px) {
    button {
        font-size: 14px;
        padding: 8px 16px;
        border-radius: 6px; /* Membuat tombol lebih kecil */
    }
    .btn-login-google {
        font-size: 12px;
        padding: 6px 12px;
    }
}



/* ===== responsive.css ===== */
/* Responsif untuk halaman konten seperti Privacy Policy dan Terms & Conditions */
@media (max-width: 768px) {
.content-container {
padding: 15px;
}

.content-content {
font-size: 0.9rem; /* Perkecil ukuran font */
line-height: 1.4;  /* Kurangi spasi antar baris */
}

.footer-content {
text-align: center; /* Atur footer agar rata tengah */
}
}

@media (max-width: 480px) {
.content-container {
padding: 10px;
}

.content-content {
font-size: 0.85rem; /* Sesuaikan lebih kecil untuk layar sangat kecil */
}

header h1 {
font-size: 1.5rem; /* Sesuaikan ukuran font header */
}

nav a {
font-size: 0.85rem; /* Perkecil font navigasi */
margin: 0 5px; /* Kurangi jarak antar tautan */
}

.adsense-banner {
    width: 100%;
  }
  
}


/* ===== carousel.css ===== */
/* Carousel styling */
.carousel-container {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
}

/* Membatasi lebar carousel */
#myCarousel {
    max-width: 800px; /* Sesuaikan dengan kebutuhan */
    margin: 0 auto; /* Pusatkan carousel */
}

.carousel{
	display: flex;
	transition: transform 0.5s ease;
			}

.carousel-item {
    min-width: 100%;
    text-align: center;
}

/* Gaya carousel item */
.carousel-item img {
    max-height: 400px;
    object-fit: cover; /* Memastikan gambar tetap proporsional */
}

.carousel-item h3, .carousel-item p, .carousel-item a {
    margin: 5px 0;
}

.carousel-caption {
    position: relative;
    background-color: #f8f9fa; /* Background konten */
    padding: 15px;
    text-align: center;
    border-radius: 0 0 10px 10px; /* Membulatkan sudut bawah */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.carousel-caption h3 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.carousel-caption p {
    margin: 5px 0;
    color: #555;
}

.carousel-caption .btn {
    margin-top: 10px;
}

/* Harga */
.product-price .original-price {
    text-decoration: line-through;
    color: #999;
}

.product-price .discount-price {
    color: #d9534f;
    font-weight: bold;
}

.product-price .final-price {
    color: #28a745;
    font-weight: bold;
}

.carousel-control-prev, .carousel-control-next {
    border: none; /* Hilangkan border */
    background: none; /* Hilangkan background */
    box-shadow: none; /* Hilangkan shadow */
    opacity: 0.8; /* Transparansi agar lebih lembut */
}

.carousel-control-prev:hover, .carousel-control-next:hover {
    opacity: 1; /* Kembalikan ke 100% saat hover */
    transform: scale(1.1); /* Sedikit membesar untuk efek hover */
    transition: all 0.2s ease;
}

.carousel-control-prev, .carousel-control-next {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 2rem; /* Atur ukuran ikon */
    height: 2rem;
    filter: invert(1); /* Ubah warna ikon (misalnya putih) */
}

.carousel-caption .button-primary {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    text-transform: uppercase;
}

.carousel-caption .button-primary:hover {
    background-color: #0056b3;
    color: #fff;
}


/* Responsif */
@media (max-width: 768px) {
    #myCarousel {
        max-width: 100%;
    }
    .carousel-item img {
        max-height: 250px;
    }
    .carousel-caption {
        padding: 10px;
    }
    .carousel-caption h3 {
        font-size: 1rem;
    }
    .carousel-caption .btn {
        font-size: 0.875rem;
        padding: 8px 12px;
    }
    .carousel-control-prev, .carousel-control-next {
        width: 30px;
        height: 30px;
    }
    .carousel-control-prev-icon, .carousel-control-next-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

}

/* ===== footer.css ===== */
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.content {
    flex: 1;
}
footer {
    background-color: #333;
    color: white;
    padding: 20px;
    box-sizing: border-box; /* Pastikan padding tidak menambah ukuran elemen */
}

.footer-content {
    display: flex;
    flex-wrap: wrap; /* Membungkus jika ruang tidak cukup */
    gap: 20px; /* Jarak antar kolom */
    max-width: 1200px;
    margin: 0 auto; /* Rata tengah */
    justify-content: space-between;
}

.footer-section {
    flex: 1 1 calc(25% - 20px); /* Kolom 25% dengan jarak */
    min-width: 200px; /* Pastikan kolom tidak terlalu kecil */
    text-align: left;
    padding: 10px;
    box-sizing: border-box; /* Padding tidak menambah lebar kolom */
}

.footer-section h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #fff;
}

.footer-section p, 
.footer-section li {
    margin: 5px 0;
    color: #ddd;
    font-size: 0.9rem;
}

.footer-section a {
    color: #ddd;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: #116466;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 5px;
}

/* Styling khusus untuk form */
.footer-form {
    display: flex;
    flex-direction: column;
}

.footer-form input {
    padding: 8px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
    font-size: 0.9rem;
    box-sizing: border-box;
    transform: scale(1.05) translateY(-2px); /* Membesar sedikit + naik */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar saat hover */
}

.footer-form button {
    padding: 10px;
    background-color: #116466;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.footer-form button:hover {
    background-color: #0d4d4d;
    transform: scale(1.05) translateY(-2px); /* Membesar sedikit + naik */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar saat hover */
}

/* Responsif untuk layar kecil */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* Ubah ke kolom vertikal */
        align-items: center; /* Pusatkan isi */
        gap: 20px;
    }

    .footer-section {
        flex: 1 1 100%; /* Kolom mengambil lebar penuh */
        text-align: center; /* Pusatkan teks */
    }
}

/* Tambahkan ruang ekstra di bagian bawah untuk layar kecil */
@media (max-width: 480px) {
    footer {
        padding-bottom: 40px; /* Tambahkan ruang ekstra jika ada floating button */
    }

    .footer-section h3 {
        font-size: 1rem; /* Sesuaikan ukuran heading */
    }

    .footer-section p, 
    .footer-section li {
        font-size: 0.8rem; /* Sesuaikan ukuran teks */
    }
}


/* ===== forms.css ===== */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    margin: 0;
    padding: 0;
}

/* Register Form */
.register-container {
    margin: 40px auto; /* Tambahkan margin atas sebesar 20px */
    padding: 20px;
    max-width: 400px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Kontainer Form */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.checkout-container {
    max-width: 800px;
    margin: 50px auto;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.shipping-container {
    max-width: 600px;
    margin: 50px auto;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.payment-container {
    max-width: 600px;
    margin: 10px auto;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
    text-align: center;
    margin-bottom: 10px;
}

.payment-summary {
    max-width: 600px;
    margin: 10px auto;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
    color: #333;
}

.payment-summary .summary-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eaeaea;
    font-size: 16px;
}

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

.payment-summary .summary-item.total-amount {
    font-weight: bold;
    font-size: 18px;
    color: #FF5722;
    padding-top: 10px;
}

.payment-summary span:first-child {
    font-weight: 500;
}

.payment-summary span:last-child {
    font-weight: 600;
}

.payment-summary .summary-item.total-amount span:last-child {
    font-size: 20px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.total-amount {
    font-weight: bold;
    font-size: 18px;
    color: #000;
}

.checkout-header {
    text-align: center;
    margin-bottom: 20px;
}

.address-section {
    margin-bottom: 20px;
}

.address-section h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.address-info {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #ddd;
    line-height: 1.6;
}

/* Judul Form */
.container h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
    font-size: 1.5rem;
}

/* Layout Dua Kolom */
.form-group {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Kolom kiri 1 bagian, kanan 2 bagian */
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
}

/* Label */
label {
    font-weight: bold;
    color: #555;
    margin-bottom: 0;
    text-align: right; /* Rata kanan */
    padding-right: 10px;
}

/* Input, Select, Textarea */
input[type="text"],
input[type="number"],
input[type="file"],
textarea,
select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: #4CAF50;
    outline: none;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

/* Pesan Sukses dan Error */
.message {
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
}
.message.success {
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
}
.message.error {
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
}

/* Tombol Submit */
button[type="submit"] {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    color: #fff;
    background-color: #4CAF50;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
    background-color: #45a049;
}

input.uppercase {
    text-transform: uppercase !important;
}

input.lowercase {
    text-transform: lowercase !important;
}

input.capitalize {
    text-transform: capitalize !important;
}

.auth-container {
    width: 400px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    text-align: center;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.auth-form input,
.auth-form select {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.auth-form button {
    padding: 12px;
    font-size: 16px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.auth-form button:hover {
    background-color: #45a049;
}

.error-message {
    color: red;
    font-size: 14px;
    margin-top: 10px;
}


.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.form-row label {
    width: 150px; /* Lebar label */
    font-weight: bold;
}

.form-row input,
.form-row select {
    flex: 1; /* Input akan mengambil sisa ruang */
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    margin: 20px 0;
    overflow: hidden;
    margin-top: 40px;
    margin-bottom: 40px;
}

.card-header {
    background-color: #f5f5f5;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
}

.card-body {
    padding: 20px;
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
}

.card-bodyshipping {
    padding: 20px;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
}

.card-body p {
    margin: 10px 0;
}

.card-bodyshipping p {
    margin: 10px 0;
}


.shipping-option {
    margin-bottom: 20px;
}
.shipping-option label {
    font-weight: bold;
}
.shipping-option p {
    margin: 5px 0;
}

/* Responsif */
@media (max-width: 768px) {
    .form-group {
grid-template-columns: 1fr; /* Satu kolom pada layar kecil */
    }
    label {
text-align: left; /* Ubah jadi rata kiri */
padding-right: 0;
    }
}


/* ===== modal.css ===== */
.modal-content {
    margin: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
    max-width: 800px;
    max-height: 90vh;
    overflow: hidden;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);  /* Gelap di luar modal */
}

.modal img {
    max-width: 100%;
    max-height: 500px;  /* Batasi tinggi gambar */
    object-fit: contain;  /* Jaga proporsi gambar */
    display: block;
    margin: auto;
}

.modal .close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    color: #767575;
    cursor: pointer;
    z-index: 1010;  /* Pastikan di atas semua elemen */
    background: transparent;
    padding: 5px 10px;
    border-radius: 50%;  /* Buat bentuk bulat */
    transition: background-color 0.3s ease;
}

.modal .close:hover {
    color: #2b2b2b;
    background-color: transparent;
    transform: scale(1.05) translateY(-2px); /* Membesar sedikit + naik */
}

.modal .prev, .modal .next {
    position: absolute;
    top: 50%; 
    transform: translateY(-50%);
    font-size: 30px;
    color: #767575;
    cursor: pointer;
    user-select: none;
    transition: 0.3s ease;
    background: transparent;
    padding: 10px;
    border-radius: 5px;
}

.modal .prev {
    left: 10px;
}

.modal .next {
    right: 10px;
}

.modal .prev:hover, .modal .next:hover {
    color: #131313;
    background-color: transparent;
}

@media (max-width: 768px) {
    .modal-content {
        max-width: 90%;  /* Modal lebih kecil di mobile */
        margin: 50px auto;
    }

    .modal img {
        max-height: 300px;
    }

    .modal .prev, .modal .next {
        font-size: 25px;
        padding: 10px;
    }
}


/* ===== runningtext.css ===== */
.running-text {
    width: 100%; 
    max-width: 100%; 
    overflow: hidden; 
    position: relative;
    padding: 10px;
    background-color: #f4f4f4; 
    font-weight: bold;
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
}

.running-text-inner {
    display: inline-block; 
    white-space: nowrap; 
    position: relative;
    animation: marquee 70s linear infinite; 
}

/* Keyframes Animasi */
@keyframes marquee {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

@media (max-width: 768px) {
    .running-text {
        font-size: 12px; /* Ukuran teks lebih kecil pada layar kecil */
        padding: 5px; /* Kurangi padding untuk menghemat ruang */
    }
}


/* ===== testimonials.css ===== */

.admin-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.testimonials-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.testimonials-table th, .testimonials-table td {
    text-align: left;
    padding: 10px;
    border: 1px solid #ddd;
}

.testimonials-table th {
    background-color: #007bff;
    color: #fff;
}

.testimonials-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.testimonials-table tr:hover {
    background-color: #e9ecef;
}

.no-data-message {
    text-align: center;
    color: #6c757d;
}

/* Testimonials styling */
.testimonials-container {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
}

.testimonials-slider {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

.testimonial {
    min-width: 100%;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
    background-color: #f9f9f9;
    margin: 10px 0;
    border-radius: 8px;
}

.testimonial p, .testimonial strong {
    margin: 5px 0;
}

.testimonials-slider-container {
    overflow: hidden;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.testimonial {
    flex: 0 0 100%;
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
}

.testimonials-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.auth-container {
    width: 90%;
    max-width: 500px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    text-align: center;
}
/* Form styling */
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

textarea, select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
}

textarea {
    height: 100px;
}

/* Error message styling */
.error-message {
    color: red;
    font-size: 14px;
    margin-top: 10px;
}

@keyframes slide {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}


/* ===== addons.css ===== */
.addons-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.addons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Responsif */
    gap: 20px;
}

.addon-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.addon-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.addon-card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.addon-name {
    font-size: 0.85rem; /* Perkecil ukuran judul */
    font-weight: bold;
    margin: 5px 0;
}

.addon-price {
    font-size: 0.75rem; /* Perkecil ukuran harga */
    color: #007bff;
    margin-bottom: 8px;
}

.addon-card h3 {
    font-size: 1rem;
    margin: 5px 0;
}

.addon-card p {
    font-size: 0.9rem;
    margin: 5px 0;
}

.addons-description {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa; /* Latar belakang abu-abu terang */
    border: 1px solid #ddd; /* Garis batas */
    border-radius: 5px;
    text-align: justify;
}

.addons-description h2 {
    font-size: 1.5rem;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #333;
}

.addons-description h3 {
    font-size: 1.25rem;
    margin-top: 15px;
    margin-bottom: 8px;
    color: #555;
}

.addons-description ul {
    margin: 10px 0 10px 20px;
    padding: 0;
    list-style-type: disc;
}

.addons-description a.faq-link {
    color: #007bff;
    text-decoration: underline;
}

.addons-description a.faq-link:hover {
    color: #0056b3;
    text-decoration: none;
}

/* Tambahan untuk responsif */
@media (max-width: 768px) {
    .addon-detail-button,
    .add-to-cart,
    .view-addons-button {
        font-size: 0.8rem; /* Ukuran font lebih kecil */
        padding: 8px 12px; /* Spasi disesuaikan */
    }
}

/* Untuk tampilan layar kecil (maksimal 768px) */
@media screen and (max-width: 768px) {
    .addons-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolom di layar kecil */
        gap: 10px; /* Jarak antar card lebih kecil */
    }


    .addon-card {
        padding: 6px; /* Kurangi padding */
        font-size: 0.75rem; /* Perkecil font */
    }

    .addon-card img {
        max-width: 100%; /* Sesuaikan gambar dengan lebar card */
        margin-bottom: 5px;
    }

    .addon-name {
        font-size: 0.8rem; /* Sesuaikan ukuran judul */
        margin: 4px 0;
    }

    .addon-price {
        font-size: 0.7rem; /* Perkecil ukuran harga */
        margin-bottom: 5px;
    }

    .addon-detail-button,
    .add-to-cart {
        font-size: 0.7rem; /* Perkecil font pada tombol */
        padding: 5px 8px; /* Kurangi padding tombol */
    }

    .view-addons-button {
        padding: 6px 12px; /* Kurangi padding tombol utama */
        font-size: 0.8rem; /* Perkecil font */
    }
}


/* ===== addons_detail.css ===== */
/* Kontainer utama */
.addon-detail-container {
    max-width: 800px; /* Lebar maksimum untuk konsistensi */
    margin: 0 auto; /* Rata tengah */
    padding: 20px; /* Spasi di sekitar konten */
    box-sizing: border-box; /* Pastikan padding dihitung dalam lebar */
}

.detail-container {
    max-width: 400px; /* Lebar maksimum untuk konsistensi */
    margin: 0 auto; /* Rata tengah */
    padding: 20px; /* Spasi di sekitar konten */
    box-sizing: border-box; /* Pastikan padding dihitung dalam lebar */
}

.addon-container p {
    text-align: left; /* Pastikan elemen ini juga rata kiri */
    line-height: 1.6; /* Menambahkan spasi antar baris untuk keterbacaan */
    margin-bottom: 15px; /* Tambahkan jarak antar paragraf */
}

.addon-container h2 {
    text-align: center; /* Judul tetap rata tengah untuk estetika */
    margin-bottom: 20px; /* Tambahkan sedikit jarak di bawah judul */
}

.addon-gallery {
    display: flex;
    flex-wrap: nowrap; /* Hindari gambar turun ke baris berikutnya */
    overflow-x: auto; /* Tambahkan scroll horizontal jika gambar melebihi lebar */
    gap: 10px; /* Jarak antar gambar */
    padding: 10px;
    justify-content: center; /* Pusatkan gambar */
}

.addon-gallery img {
    height: 150px; /* Atur tinggi gambar sesuai kebutuhan */
    object-fit: cover; /* Memastikan gambar tetap proporsional */
    border-radius: 4px; /* Efek sudut melengkung */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan */
    transition: transform 0.3s ease;
    cursor: pointer;
}

.addon-gallery img:hover {
    transform: scale(1.1); /* Efek zoom saat hover */
}

.addon-thumbnail {
    width: 100px; /* Lebar gambar */
    height: 100px; /* Tinggi gambar */
    object-fit: cover; /* Pastikan gambar tidak terdistorsi */
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.addon-thumbnail:hover {
    transform: scale(1.1); /* Perbesar gambar saat hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Aturan untuk kontainer tombol kembali */
.back-to-addon-container {
    display: flex; /* Agar tombol berada di tengah */
    justify-content: center; /* Pusatkan tombol secara horizontal */
    margin-top: 20px; /* Jarak standar dari elemen sebelumnya */
    margin-bottom: 20px; /* Opsional: jarak ke elemen di bawah */
}

/* Aturan untuk menambahkan jarak lebih fleksibel */
.margin-top-section {
    margin-top: 20px; /* Tambahkan jarak di atas */
}

/* Responsif untuk layar kecil */
@media (max-width: 768px) {
    .addon-gallery {
        flex-wrap: wrap; /* Izinkan gambar turun ke baris berikutnya */
        justify-content: center; /* Pusatkan gambar pada layar kecil */
    }

    .addon-thumbnail {
        width: 80px; /* Kurangi ukuran gambar */
        height: 80px;
    }
}

/* Responsif */
@media (max-width: 768px) {
    .back-to-addon-container {
        margin-top: 15px; /* Jarak lebih kecil untuk layar kecil */
        margin-bottom: 15px; /* Opsional */
    }
}

/* ===== article.css ===== */
.article_detail-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.article-detail-meta {
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
}

.article-meta {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 15px;
}

.article-text {
    text-align: justify; /* Atur teks rata kiri-kanan */
    line-height: 1.6; /* Menambah jarak antar baris untuk keterbacaan */
    margin-top: 20px;
    font-size: 1rem; /* Atur ukuran font */
    font-family: 'Arial', sans-serif; /* Atur jenis font khusus */
}

.admin-actions {
    margin-top: 20px;
    text-align: center;
}
.admin-actions .button {
    margin: 0 10px;
}

/* Article styling */
.articles-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
        
.articles-carousel {
	display: flex;
	transition: transform 0.5s ease;
			}

.article-item {
    display: flex;
    align-items: flex-start;
    max-width: 800px; /* Sesuaikan lebar maksimal */
    margin: 20px auto;
    gap: 15px; /* Jarak antara gambar dan teks */
}

.article-item img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
	padding: 10px;
}

.article-image {
    flex: 1;
    max-width: 40%; /* Gambar mengambil maksimal 40% */
}

.article_detail-image {
    float: left; /* Posisi gambar di kiri */
    margin-right: 15px; /* Beri jarak antara gambar dan teks */
    margin-bottom: 10px; /* Jarak bawah gambar */
    max-width: 200px; /* Batasi lebar gambar */
}

.article-detail-image img {
    width: 100%; /* Pastikan gambar proporsional */
    border-radius: 8px; /* Tambahkan efek rounded */
}

.article-list-image {
    float: left; /* Posisi gambar di kiri */
    margin-right: 15px; /* Beri jarak antara gambar dan teks */
    margin-bottom: 10px; /* Jarak bawah gambar */
    max-width: 75px; /* Batasi lebar gambar */
}

.article-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

.article-content {
    flex: 2;
    max-width: 60%; /* Konten mengambil maksimal 60% */
}

.article-detail-content {
    flex: 1; /* Pastikan konten memenuhi sisa ruang */
    text-align: left; /* Pastikan teks rata kiri */
}

.article-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #333;
}

.article-item p, .article-item a {
    margin: 5px 0;
}

/* Articles Page Styling */
.articles-container {
    width: 90%;
    max-width: 800px;
    margin: 20px auto;
    text-align: center;
    padding: 20px;
}

.article-snippet {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #555;
}

.article-snippet h2 {
    font-size: 1.5em;
    color: #333;
}

.article-snippet p {
    margin: 10px 0;
    color: #555;
}

.article-snippet img {
    width: 100%;
    max-width: 300px;
    margin: 15px 0;
    border-radius: 8px;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.article-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    padding: 15px;
    background: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.article-card h3 {
    margin: 0 0 10px;
}

/* Artikel untuk home*/
.articles-home-container {
    margin: 20px auto;
    max-width: 800px; /* Sesuaikan lebar maksimal */
    padding: 0 15px;
}

.article-home-item {
    margin-bottom: 30px;
    text-align: left; /* Pastikan teks rata kiri */
}

.article-home-title {
    font-size: 1.8rem;
    margin-bottom: 15px;
    text-align: center; /* Judul full width dengan posisi tengah */
}

.article-home-content {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.article-homedetail-image {
    float: left; /* Posisi gambar di kiri */
    margin-right: 15px; /* Beri jarak antara gambar dan teks */
    margin-bottom: 10px; /* Jarak bawah gambar */
    max-width: 150px; /* Batasi lebar gambar */
}

.article-homedetail-image img {
    max-width: 150px; /* Ukuran maksimal gambar */
    height: auto;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Tambahkan efek bayangan */
}

.article-home-snippet {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    text-align: justify;
}

.article-home-actions {
    margin-top: 10px;
    text-align: center; /* Tombol Read More rata kanan */
}

.articles-footer .button {
    margin: 5px;
    display: inline-block;
    padding: 10px 15px;
    font-size: 1rem;
    background-color: #28a745;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.articles-footer .button:hover {
    background-color: #1e7e34;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.form-container {
    width: 90%;
    max-width: 600px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    text-align: left;
}

.form-container h1 {
    text-align: center;
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}

.form-container label {
    font-weight: bold;
    margin-top: 10px;
}

.form-container input, .form-container textarea, .form-container button {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

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

.message {
    text-align: center;
    font-size: 14px;
    margin-top: 10px;
}

.message.success {
    color: green;
    background-color: #e6ffe6;
    padding: 10px;
    border: 1px solid green;
    border-radius: 5px;
}

.message.error {
    color: red;
    background-color: #ffe6e6;
    padding: 10px;
    border: 1px solid red;
    border-radius: 5px;
}

/* Container Styling */
.content-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.content-container h2 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 15px;
}
.content-termprovacy {
    text-align: justify;
    line-height: 1.6;
    font-size: 1rem;
    color: #333;
}

h2 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #333;
}

h3 {
    font-size: 1.4rem;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
    color: #555;
}

.intro-container {
    max-width: 800px; /* Lebar maksimal pembungkus */
    margin: 5px auto; /* Tengah di layar dengan jarak atas-bawah */
    padding: 20px;
    border-radius: 8px; /* Sudut melengkung */
    text-align: justify; /* Rata kiri-kanan */
    color: #333; /* Warna teks */
    font-size: 1rem; /* Ukuran font */
    font-family: 'Arial', sans-serif; /* Jenis font */
}

.intro-container p {
    margin: 0; /* Hilangkan margin default */
}

 /* Style untuk dropdown mengambang */
 .floating-dropdown {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
    .floating-dropdown {
        position: static;
        margin-bottom: 20px;
        box-shadow: none;
    }
}

canvas {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

@keyframes slide {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Media Query untuk layar kecil (HP) */
@media screen and (max-width: 768px) {
    .article-detail-container,
    .articles-container {
        padding: 15px; /* Sesuaikan padding untuk layar kecil */
        margin: 10px auto;
        max-width: 100%; /* Gunakan lebar penuh layar */
    }

    .article-item {
        flex-direction: column; /* Susun vertikal */
        text-align: center; /* Pusatkan teks */
        gap: 10px; /* Atur jarak antar elemen */
    }

    .article-image,
    .article-content {
        max-width: 100%; /* Ambil seluruh lebar */
        margin: 0 auto; /* Pusatkan elemen */
    }

    .article-image img {
        max-width: 100%; /* Gambar penuh lebar layar */
        height: auto; /* Pertahankan proporsi gambar */
        margin-bottom: 10px; /* Tambahkan jarak bawah */
    }

    .article-title {
        font-size: 1.2rem; /* Perkecil ukuran judul */
        margin: 10px 0;
    }

    .article-snippet {
        font-size: 0.9rem; /* Perkecil font teks */
        line-height: 1.4; /* Sesuaikan jarak antar baris */
    }

    .article-home-title {
        font-size: 1.4rem; /* Sesuaikan ukuran judul di halaman utama */
    }

    .article-detail-meta {
        font-size: 12px; /* Perkecil teks metadata */
    }

    .article-homedetail-image img {
        max-width: 100%; /* Gambar memenuhi layar pada HP */
        margin: 0 auto 10px; /* Jarak bawah dan tengahkan */
    }

    .form-container {
        padding: 15px; /* Sesuaikan padding */
    }

    .form-container h1 {
        font-size: 20px; /* Ukuran lebih kecil untuk layar kecil */
    }

    .articles-grid {
        grid-template-columns: 1fr; /* Kolom tunggal di layar kecil */
    }

    .article-card {
        padding: 10px; /* Kurangi padding */
        font-size: 0.9rem; /* Perkecil font */
    }

    .intro-container {
        padding: 10px; /* Kurangi padding */
        font-size: 0.9rem; /* Perkecil ukuran font */
    }

    .articles-footer .button {
        padding: 8px 10px; /* Sesuaikan tombol */
        font-size: 0.9rem;
    }
}

/* ===== cart.css ===== */
/* Style untuk kontainer keranjang */
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 90vh;
}

.cart-container {
    max-width: 800px;
    margin: 0 auto; /* Pusatkan konten */
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-sizing: border-box; /* Pastikan padding tidak merusak lebar */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    min-height: 30vh; 
}

.cart-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: #333;
}

.cart-container h2,
.cart-container h3 {
    margin: 0 0 10px 0; /* Reset margin atas */
    padding: 0; /* Hilangkan padding */
    text-align: left; /* Ratakan ke kiri */
}
/* Reset Paragraph dan Teks Lain */
.cart-container p {
    margin: 0 0 10px 0; /* Margin bawah konsisten */
    color: #333;
}
/* Tambahan untuk Menghindari Margin Tambahan dari Body */
body .cart-container {
    margin-top: 20px; /* Beri jarak dari header jika diperlukan */
}

.cart-item {
    display: flex; /* Menggunakan flexbox untuk struktur rata kiri */
    align-items: flex-start; /* Item dimulai dari atas */
    justify-content: flex-start; /* Konten disusun dari kiri */
    gap: 15px; /* Jarak antar elemen dalam cart item */
    padding: 10px;
    border-bottom: 1px solid #ccc; /* Garis pemisah antar item */
}
.cart-item h2 {
    font-size: 18px;
    margin: 0;
    color: #333;
}
.cart-item-details {
    flex: 1; /* Kontainer detail akan memenuhi ruang yang tersedia */
    display: flex;
    flex-direction: column; /* Susun elemen dalam kolom */
    align-items: flex-start; /* Rata kiri */
}

.cart-item-details h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #555;
    text-align: left; /* Rata kiri */
}

.quantity-controls {
    display: flex;
    align-items: center;
}
.quantity-form {
    display: inline-block;
    margin: 0 5px;
}

.quantity-button {
    padding: 5px 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f1f1f1;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.quantity-button:hover {
    background-color: #ddd;
}
.quantity-controls button {
    background-color: #4CAF50;
    color: #fff;
    font-size: 16px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quantity-controls span {
    font-size: 16px;
    margin: 0 5px;
}
.cart-item p {
    font-size: 16px;
    color: #333;
    margin: 5px 0; /* Tambahkan sedikit jarak antar paragraf */
    text-align: left; /* Rata kiri */
}

/* Style untuk ringkasan keranjang */
.cart-summary {
    text-align: right;
    margin-top: 15px;
    font-size: 1.2rem;
    color: #333;
}

.cart-total {
    font-weight: bold;
    color: #007bff;
}

.cart-actions {
    text-align: right;
    margin-top: 20px;
}
.checkout-button {
    background-color: #FF6347;
    color: #fff;
    padding: 5px 10px; /* Tambahkan ruang di atas-bawah (10px) dan kiri-kanan (20px) */
    font-size: 16px;
    border-radius: 50px; /* Membuat tombol bergaya kapsul */
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2); /* Tambahkan warna sesuai tombol */
}

.checkout-button:hover {
    padding: 5px 10px; /* Tambahkan ruang di atas-bawah (10px) dan kiri-kanan (20px) */
    background-color: #e5533d;
    transform: scale(1.05) translateY(-2px); /* Membesar sedikit + naik */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar saat hover */
    box-shadow: 0 6px 10px rgba(0, 86, 179, 0.3); /* Bayangan lebih gelap */
}
.empty-message {
    text-align: center;
    font-size: 1.1rem;
    color: #777;
}
.item-quantity {
    font-size: 1.1rem;
    margin: 0 10px;
    color: #333;
}

.empty-cart-actions {
    text-align: center;
    margin-top: 30px;
}

.browse-products {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.browse-products:hover {
    background-color: #0056b3;
}


/* Responsif */
@media screen and (max-width: 600px) {
    .cart-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 0;
    }

    .cart-item-details,
    .quantity-controls {
        margin-bottom: 10px;
    }

    .cart-summary,
    .cart-actions {
        text-align: center;
    }
    
}

/* ===== categories.css ===== */

/* Styling for category list */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.add-category {
    display: inline-block;
    padding: 10px 15px;
    color: #fff;
    background-color: #4CAF50;
    text-decoration: none;
    border-radius: 4px;
    margin-bottom: 15px;
}

.add-category:hover {
    background-color: #45a049;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

table, th, td {
    border: 1px solid #ccc;
}

th, td {
    padding: 12px;
    text-align: left;
}

th {
    background-color: #f4f4f4;
    color: #333;
}

.action-links a {
    margin-right: 10px;
    color: #4CAF50;
    text-decoration: none;
}

.action-links a:hover {
    color: #007bb5;
}

.action-links a.delete {
    color: #f44336;
}

.action-links a.delete:hover {
    color: #d32f2f;
}

/* ===== notification.css ===== */
/* Styling untuk notifikasi sukses */
.success-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #4CAF50; /* Warna latar belakang hijau */
    color: #fff; /* Warna teks putih */
    padding: 15px 20px; /* Padding lebih besar untuk tampilan lebih nyaman */
    border-radius: 8px; /* Sudut lebih bulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Bayangan lebih gelap */
    z-index: 9999;
    font-size: 16px; /* Ukuran font lebih besar */
    font-family: Arial, sans-serif; /* Font yang jelas */
    display: flex;
    align-items: center;
    gap: 10px; /* Jarak antara ikon dan teks */
    animation: fadeInOut 4s forwards; /* Efek animasi */
}

/* Ikon untuk notifikasi */
.success-notification .icon {
    font-size: 20px; /* Ukuran ikon */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gaya tambahan saat hover (opsional) */
.success-notification:hover {
    background-color: #45a049; /* Warna hijau lebih gelap saat hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Bayangan lebih besar */
}

.error-message {
    color: red;
    font-size: 12px;
    margin-top: 5px;
}


/* Animasi untuk notifikasi */
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(-20px); }
    10% { opacity: 1; transform: translateY(0); }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-20px); }
}

@media (max-width: 600px) {
    .success-notification {
        width: 90%; /* Lebar menyesuaikan layar */
        right: 5%; /* Margin kanan */
        left: 5%; /* Margin kiri */
        font-size: 14px; /* Ukuran font lebih kecil */
        padding: 10px 15px; /* Padding lebih kecil */
    }
}

/* Kontainer Notifikasi */
#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

/* Gaya Umum untuk Notifikasi */
.notification {
    background-color: #28a745; /* Warna hijau untuk sukses */
    color: white;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    animation: fadeIn 0.5s, fadeOut 0.5s 3.5s forwards; /* Animasi muncul & hilang */
}

/* Gaya Ikon */
.notification .icon {
    font-size: 16px;
    font-weight: bold;
}

/* Animasi Fade */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateY(-20px); }
}



/* ===== orders.css ===== */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 20px;
}

.admin-container {
    max-width: 1200px;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.search-filter-container {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-filter-container input[type="text"],
.search-filter-container select {
    padding: 8px;
    font-size: 1em;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table th, table td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
}

table th {
    background-color: #f2f2f2;
}

.action-buttons form {
    display: inline-block;
}

.update-button, .delete-button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    font-size: 0.9em;
}

.update-button {
    background-color: #4CAF50;
}

.update-button:hover {
    background-color: #45a049;
}

.delete-button {
    background-color: #f44336;
    margin-left: 10px;
}

.delete-button:hover {
    background-color: #d32f2f;
}

.status-select {
    padding: 8px;
    font-size: 1em;
}

/* ===== productdetail.css ===== */
/* Kontainer utama */
.product-detail-container {
    max-width: 800px; /* Lebar maksimum untuk konsistensi */
    margin: 0 auto; /* Rata tengah */
    padding: 20px; /* Spasi di sekitar konten */
    box-sizing: border-box; /* Pastikan padding dihitung dalam lebar */
}

.detail-container {
    max-width: 400px; /* Lebar maksimum untuk konsistensi */
    margin: 0 auto; /* Rata tengah */
    padding: 20px; /* Spasi di sekitar konten */
    box-sizing: border-box; /* Pastikan padding dihitung dalam lebar */
}

.product-container p {
    text-align: left; /* Pastikan elemen ini juga rata kiri */
    line-height: 1.6; /* Menambahkan spasi antar baris untuk keterbacaan */
    margin-bottom: 15px; /* Tambahkan jarak antar paragraf */
}

.product-container h2 {
    text-align: center; /* Judul tetap rata tengah untuk estetika */
    margin-bottom: 20px; /* Tambahkan sedikit jarak di bawah judul */
}

.product-gallery {
    display: flex;
    flex-wrap: nowrap; /* Hindari gambar turun ke baris berikutnya */
    overflow-x: auto; /* Tambahkan scroll horizontal jika gambar melebihi lebar */
    gap: 10px; /* Jarak antar gambar */
    padding: 10px;
    justify-content: center; /* Pusatkan gambar */
}

.product-gallery img {
    height: 150px; /* Atur tinggi gambar sesuai kebutuhan */
    object-fit: cover; /* Memastikan gambar tetap proporsional */
    border-radius: 4px; /* Efek sudut melengkung */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan */
    transition: transform 0.3s ease;
    cursor: pointer;
}

.product-gallery img:hover {
    transform: scale(1.1); /* Efek zoom saat hover */
}

.product-thumbnail {
    width: 100px; /* Lebar gambar */
    height: 100px; /* Tinggi gambar */
    object-fit: cover; /* Pastikan gambar tidak terdistorsi */
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.product-thumbnail:hover {
    transform: scale(1.1); /* Perbesar gambar saat hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Aturan untuk kontainer tombol kembali */
.back-to-products-container {
    display: flex; /* Agar tombol berada di tengah */
    justify-content: center; /* Pusatkan tombol secara horizontal */
    margin-top: 20px; /* Jarak standar dari elemen sebelumnya */
    margin-bottom: 20px; /* Opsional: jarak ke elemen di bawah */
}

/* Aturan untuk menambahkan jarak lebih fleksibel */
.margin-top-section {
    margin-top: 20px; /* Tambahkan jarak di atas */
}

/* Responsif untuk layar kecil */
@media (max-width: 768px) {
    .product-gallery {
        flex-wrap: wrap; /* Izinkan gambar turun ke baris berikutnya */
        justify-content: center; /* Pusatkan gambar pada layar kecil */
    }

    .product-thumbnail {
        width: 80px; /* Kurangi ukuran gambar */
        height: 80px;
    }
}

/* Responsif */
@media (max-width: 768px) {
    .back-to-products-container {
        margin-top: 15px; /* Jarak lebih kecil untuk layar kecil */
        margin-bottom: 15px; /* Opsional */
    }
}

/* ===== products.css ===== */
/* Container Produk */
.products-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.produk-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsif otomatis */
    gap: 20px; /* Jarak antar item */
    padding: 20px; /* Tambahkan padding */
    justify-content: center; /* Pusatkan item */
    max-width: 1200px; /* Lebar maksimum grid */
    margin: 0 auto; /* Rata tengah */
}

/* Kartu Produk */
.product {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.product:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Gambar Produk */
.product img {
    max-width: 100%;
    height: auto; /* Sesuaikan tinggi secara proporsional */
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Judul Produk */
.product h3 {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
}

/* Harga Produk */
.product .price {
    font-size: 14px;
    margin-bottom: 10px;
}

.product .price .original-price {
    text-decoration: line-through;
    color: #888;
    margin-right: 10px;
}

.product .price .discount-price {
    color: #E53935;
    font-size: 14px;
}

/* Ulasan Produk */
.product .reviews {
    font-size: 12px;
    color: #555;
    margin-bottom: 10px;
}

/* Gaya untuk deskripsi produk */
.products-description {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa; /* Latar belakang abu-abu terang */
    border: 1px solid #ddd; /* Garis batas */
    border-radius: 5px;
    text-align: justify;
}

.products-description p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

/* Gaya untuk tombol shortcut FAQ */
.button.faq-shortcut {
    display: inline-block;
    background-color: #007bff; /* Warna biru */
    color: white;
    padding: 10px 20px;
    font-size: 14px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
}

.button.faq-shortcut:hover {
    background-color: #0056b3; /* Warna biru gelap saat hover */
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.faq-link {
    color: #007bff; /* Warna biru */
    text-decoration: underline;
    font-weight: bold;
}

.faq-link:hover {
    color: #0056b3; /* Warna biru gelap saat hover */
    text-decoration: none;
}

.products-description h2 {
    font-size: 1.5rem;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #333;
}

.products-description h3 {
    font-size: 1.25rem;
    margin-top: 15px;
    margin-bottom: 8px;
    color: #555;
}

.products-description p {
    margin: 0 0 10px;
    line-height: 1.6;
}

/* Responsif untuk layar kecil */
@media (max-width: 768px) {
    .produk-list {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Ukuran lebih kecil */
    }

    .product h3 {
        font-size: 14px;
    }

    .product .price {
        font-size: 12px;
    }

    .product .reviews {
        font-size: 10px;
    }
}


/* ===== users.css ===== */
.admin-container {
    max-width: 1200px;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table th, table td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
}

table th {
    background-color: #f2f2f2;
}

.action-buttons form {
    display: inline-block;
}

.edit-button, .delete-button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    font-size: 0.9em;
}

.edit-button {
    background-color: #4CAF50;
}

.edit-button:hover {
    background-color: #45a049;
}

.delete-button {
    background-color: #f44336;
    margin-left: 10px;
}

.delete-button:hover {
    background-color: #d32f2f;
}

h2 {
    text-align: center;
    color: #333;
    font-size: 1.5em;
    margin-bottom: 20px;
}

form label {
    display: block;
    font-weight: bold;
    margin-top: 10px;
    color: #333;
}

form input[type="text"],
form input[type="email"],
form textarea,
form select {
    width: 100%;
    padding: 8px;
    font-size: 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 5px;
}

form textarea {
    height: 100px;
    resize: vertical;
}

form button {
    background-color: #4CAF50;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
    margin-top: 15px;
    display: block;
    width: 100%;
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: #45a049;
}

.error-message {
    color: red;
    font-size: 0.9em;
    margin-top: 10px;
    text-align: center;
}


/* ===== about.css ===== */
/* Global Styling */
body {
    font-family: 'Arial', sans-serif;
    background: #f9f9f9;
    color: #333;
    margin: 0;
    padding: 0;
}

/* Section Styling */
section {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

section h2 {
    color: #4CAF50;
    margin-bottom: 15px;
}

section p {
    line-height: 1.6;
    color: #555;
}

/* Portfolio Cards */
.portfolio-cards {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.portfolio-cards .card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-cards .card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.portfolio-cards .card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.portfolio-cards .card h3 {
    margin: 10px 0;
    color: #333;
}

.portfolio-cards .card p {
    padding: 0 10px 10px;
    font-size: 14px;
    color: #666;
}

/* Team Cards */
.team-cards {
    display: flex;
    flex-direction: column; /* Ubah orientasi menjadi kolom */
    gap: 20px; /* Jarak antar card */
    align-items: center; /* Pusatkan card */
}

.team-cards .card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    width: 200px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-cards .card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.team-cards .card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-bottom: 3px solid #4CAF50;
}

.team-cards .card h3 {
    margin: 10px 0;
    color: #333;
}

.team-cards .card p {
    padding: 0 10px 10px;
    font-size: 14px;
    color: #666;
}

/* Kontainer Carousel */
.portfolio-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* Track untuk slide */
.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* Gaya untuk setiap item */
.portfolio-item {
    min-width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.portfolio-item img {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto 10px;
    border-radius: 8px;
    object-fit: cover;
}

.portfolio-item h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
}

.portfolio-item p {
    font-size: 16px;
    color: #555;
    line-height: 1.5;
}

/* Tombol navigasi */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.carousel-button.left {
    left: 10px;
}

.carousel-button.right {
    right: 10px;
}

.carousel-button:hover {
    background: rgba(0, 0, 0, 0.7);
}

.content-container {
    max-width: 1200px; /* Atur lebar maksimal */
    margin: 0 auto; /* Tengah-tengah halaman */
    padding: 20px; /* Tambahkan padding */
    box-sizing: border-box; /* Pastikan ukuran termasuk padding */
}

.row {
    margin: 0; /* Hilangkan margin tambahan */
}

.list-group {
    max-height: 400px; /* Atur tinggi maksimal untuk daftar PDF */
    overflow-y: auto; /* Tambahkan scroll jika tinggi melebihi batas */
}

.intro {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa; /* Latar belakang abu-abu terang */
    border: 1px solid #ddd; /* Garis batas */
    border-radius: 5px;
    text-align: justify;
}

canvas {
    max-width: 100%; /* Pastikan canvas responsif */
}

/* Responsive Design */
@media (max-width: 768px) {
    .portfolio-cards,
    .team-cards {
        flex-direction: column;
        align-items: center;
    }
}


/* ===== admin-dashboard.css ===== */
.admin-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* Mengatur elemen dalam satu baris ke kiri */
    align-items: flex-start; /* Mengatur elemen untuk diratakan di bagian atas (kiri-atas) */
}

.admin-sidebar-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 30%; /* Alokasikan 30% untuk kedua sidebar */
    text-align: left;
}

.admin-sidebar {
    flex: 1;
    padding: 10px;
    background-color: #f5f5f5;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.admin-sidebar h3 {
    margin-bottom: 10px;
    font-size: 18px;
    color: #333;
}

.admin-sidebar ul {
    list-style: none;
    padding: 0;
}

.admin-sidebar ul li {
    margin-bottom: 5px;
}

.admin-sidebar ul li a {
    text-decoration: none;
    color: #007bff;
}

.admin-sidebar ul li a:hover {
    text-decoration: underline;
}

.content {
    flex: 2;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.admin-sidebar nav ul {
    list-style: none;
    padding: 0;
}

.admin-sidebar nav ul li {
    margin-bottom: 10px;
}

.admin-sidebar nav ul li a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 8px;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.admin-sidebar nav ul li a:hover {
    background: #ddd;
}

/* Penanda kategori */
.admin-sidebar nav ul li.menu-group {
    background: #e0e0e0; /* Warna lebih gelap untuk kategori */
    font-weight: bold;
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 4px;
}

/* Penyesuaian untuk item dalam kategori */
.admin-sidebar nav ul li.menu-group > ul {
    margin-left: 15px; /* Tambahkan margin kiri */
    margin-top: 5px;
    padding-left: 10px;
    border-left: 2px solid #ccc; /* Garis vertikal sebagai pemisah */
}

.admin-sidebar nav ul li.menu-group > ul li {
    margin-bottom: 5px;
}

.admin-sidebar nav ul li.menu-group > ul li a {
    font-size: 0.9rem; /* Ukuran font lebih kecil untuk item */
    color: #555;
}

.admin-sidebar nav ul li.menu-group > ul li a:hover {
    background: #f0f0f0; /* Warna hover untuk item */
    color: #333;
}

.admin-content {
    flex: 1;
    padding: 20px;
}

.dashboard-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

.dashboard-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Dashboard Card */
/* Card Besar */
.dashboard-card {
    flex: 1 1 calc(25% - 1rem);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    background-color: #f9f9f9;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Heading di Dalam Card */
.dashboard-card h2, .dashboard-card h3 {
    margin-bottom: 15px;
    font-size: 1.5em;
    color: #333;
}

.dashboard-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

/* Statistik Angka */
.dashboard-card p {
    font-size: 2rem;
    margin: 0.5rem 0;
    color: #007BFF;
}

/* Daftar Tindakan */
.dashboard-actions {
    list-style: none;
    padding: 0;
}

.dashboard-actions li {
    margin: 0.5rem 0;
}

.dashboard-actions a {
    text-decoration: none;
    color: #007BFF;
}

.dashboard-actions li a {
    display: block;
    padding: 8px 10px;
    background: #f8f9fa;
    color: #007bff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    transition: background 0.3s ease, color 0.3s ease;
}

.dashboard-actions li a:hover {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table th, table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

table th {
    background-color: #f4f4f9;
}

table a.order-link {
    color: #4CAF50;
    text-decoration: none;
}

table a.order-link:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-overview {
        grid-template-columns: 1fr; /* Single column on smaller screens */
    }
}

/* ===== contact.css ===== */
.contact-info {
    padding: 20px;
    max-width: 600px;
    margin: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.contact-card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: left;
}

.contact-card p {
    margin: 5px 0;
}

.contact-info h2, .contact-info h3 {
    text-align: center;
}

.contact-info p {
    margin: 10px 0;
}

.contact-info a {
    color: #007BFF;
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

.contact-form-container {
    max-width: 600px;
    margin: 0 auto;
}

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

.contact-form .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.contact-form .form-group input,
.contact-form .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

form {
    margin-top: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input, textarea, button {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Adjust textarea height */
#message {
    height: 120px;
    resize: vertical;
}


/* ===== dashboard.css ===== */
.dashboard {
    max-width: 800px; /* Lebar maksimum untuk konsistensi */
    align-items: center;
    margin: 20px auto;
    padding: 20px;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.stat-card {
    background: #007bff;
    color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

.stat-card h2 {
    margin: 0;
    font-size: 2rem;
}

.stat-card p {
    margin: 5px 0 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
}

table, th, td {
    border: 1px solid #ddd;
    text-align: center;
}

th, td {
    padding: 12px;
}

table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.feedback-message {
    margin: 10px 0;
    padding: 10px;
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
    border-radius: 4px;
}
button {
    padding: 5px 10px;
    margin: 2px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}

button:hover {
    background-color: #0056b3;
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.user-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.user-card {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
}

.user-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.username, .role {
    font-weight: bold;
}

.more-btn {
    background-color: #E07B5C; /* Oranye lembut */
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.user-details {
    margin-top: 10px;
    text-align: right;
}

.form-group {
    display: block; /* Memastikan setiap grup ada di baris baru */
    margin-bottom: 12px; /* Memberikan jarak antar grup */
}

.form-actions {
    display: flex;
    justify-content: center; /* Memastikan tombol berada di tengah */
    gap: 12px; /* Memberikan jarak antar tombol */
    margin: 0 auto; /* Memastikan elemen .form-actions sendiri berada di tengah */
}

@media screen and (max-width: 600px) {
    .user-card {
        width: 100%; /* Card full width on small screens */
    }

    .user-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .more-btn {
        margin-top: 10px;
    }
}


/* ===== login.css ===== */
/* Styling for the login container */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
}
.google-login {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #4285F4;
    color: white;
    border-radius: 5px;
    margin-top: 15px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}
.google-login img {
    margin-right: 10px;
    width: 20px;
    height: 20px;
}
.ad-section {
    margin-top: 30px;
    text-align: center;
    font-size: 14px;
    color: gray;
}
.auth-container {
    width: 350px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    text-align: center;
}

h1 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-form input {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.auth-form button {
    padding: 10px;
    font-size: 16px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.auth-form button:hover {
    background-color: #45a049;
}

.toggle-text {
    margin-top: 20px;
    font-size: 14px;
    color: #666;
}

.toggle-text a {
    color: #4CAF50;
    text-decoration: none;
    font-weight: bold;
}

.error-message {
    color: red;
    font-size: 14px;
    margin-top: 10px;
}

.auth-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.google-login {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #33353886;
    color: white;
    border-radius: 5px;
    margin-top: 15px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

.google-login img {
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

.ad-section {
    margin-top: 30px;
    text-align: center;
    font-size: 14px;
    color: gray;
}

.powered-by {
    margin-top: 30px;
    text-align: center;
    font-size: 14px;
    color: gray;
}

.powered-by img {
    width: 50px;
    margin-top: 5px;
}


/* ===== maintenance.css ===== */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #f4f4f9, #e0e0e0);
    color: #333;
}

.container {
    text-align: center;
    padding: 20px;
    max-width: 600px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

h1 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #4CAF50;
}

p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #555;
}

.countdown {
    font-size: 18px;
    color: #ff6347;
    margin-bottom: 20px;
}

.social-links a {
    margin: 0 10px;
    font-size: 20px;
    color: #4CAF50;
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #45a049;
}


/* ===== search.css ===== */
/* Styling untuk kontainer pencarian */
.search-container {
    margin: 40px 0;
    display: flex;
    justify-content: center; /* Pusatkan elemen */
}

/* Form pencarian */
.search-container .search-form {
    display: flex;
    flex-wrap: nowrap; /* Pastikan elemen tetap dalam satu baris */
    justify-content: center; /* Pusatkan elemen */
    gap: 10px; /* Jarak antar elemen */
    width: 100%; /* Maksimalkan lebar form */
    max-width: 800px; /* Batasi lebar maksimum form */
}

/* Input pencarian */
.search-container input[type="text"] {
    padding: 8px 12px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    flex-grow: 1; /* Isi ruang yang tersedia */
    min-width: 200px; /* Lebar minimum */
    max-width: 400px; /* Batasi lebar maksimum */
}

/* Dropdown kategori */
.search-container select {
    padding: 8px 12px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    flex-grow: 0; /* Jangan mengambil ruang tambahan */
    flex-shrink: 1; /* Mengecil jika ruang terbatas */
    min-width: 150px; /* Lebar minimum */
    max-width: 200px; /* Batasi lebar maksimum */
}

/* Tombol pencarian */
.search-container .search-button {
    background-color: #116466; /* Warna tombol */
    color: white;
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    flex-grow: 0; /* Jangan mengambil ruang tambahan */
    flex-shrink: 1; /* Mengecil jika ruang terbatas */
    min-width: 100px; /* Lebar minimum */
    max-width: 150px; /* Batasi lebar maksimum */
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-container .search-button i {
    font-size: 1rem;
}

.search-container .search-button:hover {
    background-color: #0d4d4d; /* Warna saat hover */
}

/* Styling responsif untuk layar kecil */
@media screen and (max-width: 768px) {
    /* Kontainer pencarian */
    .search-container {
        flex-wrap: wrap; /* Izinkan elemen membungkus */
        gap: 15px; /* Tambahkan jarak antar elemen */
    }

    /* Form pencarian */
    .search-container .search-form {
        flex-direction: column; /* Atur elemen dalam kolom untuk layar kecil */
        gap: 15px; /* Tambahkan jarak antar elemen */
        width: 100%; /* Ambil seluruh lebar layar */
        max-width: none; /* Hilangkan batas maksimum */
    }

    /* Input pencarian */
    .search-container input[type="text"] {
        flex-grow: 0; /* Jangan isi ruang tambahan */
        width: 100%; /* Penuhi lebar layar */
        min-width: auto; /* Hilangkan lebar minimum */
    }

    /* Dropdown kategori */
    .search-container select {
        flex-grow: 0; /* Jangan isi ruang tambahan */
        width: 100%; /* Penuhi lebar layar */
        min-width: auto; /* Hilangkan lebar minimum */
    }

    /* Tombol pencarian */
    .search-container .search-button {
        width: 100%; /* Penuhi lebar layar */
        flex-grow: 0; /* Jangan isi ruang tambahan */
        min-width: auto; /* Hilangkan lebar minimum */
    }
}


/* ===== thankyou.css ===== */
  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Arial', sans-serif;
    background-color: #f3f4f6;
    color: #333;
}

.container {
    text-align: center;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
}


h1 {
    color: #FF6347;
    font-size: 2rem;
    margin-bottom: 10px;
}

p {
    font-size: 1rem;
    margin: 10px 0;
    line-height: 1.5;
}

.thank-you-rotator {
    font-size: 1.5rem;
    font-weight: bold;
    color: #007BFF;
    margin: 20px 0;
    transition: opacity 0.5s ease;
}

/* Button Styles */
.redirect-button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    display: inline-block;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.redirect-button:hover {
    background-color: #0056b3;
}

.button {
    display: inline-block;
    margin: 10px 0;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}
.button:hover {
    background-color: #45a049;
}

/* ===== superadmin-theme.css ===== */
body {
    background-color: #f0e6f6; /* Latar belakang ungu muda */
    color: #6f42c1; /* Teks ungu gelap */
    font-family: 'Arial', sans-serif;
}

h1, h2, h3, h4 {
    color: #6f42c1; /* Heading ungu gelap */
}

a {
    color: #6610f2; /* Link ungu */
    text-decoration: none;
}

a:hover {
    color: #520dc2; /* Link ungu lebih gelap saat hover */
    text-decoration: underline;
}

button {
    background-color: #6610f2; /* Tombol ungu */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 14px;
}

button:hover {
    background-color: #520dc2; /* Hover lebih gelap */
}

.header {
    background-color: #6f42c1; /* Header ungu gelap */
    color: #ffffff;
}

.header a {
    color: #ffffff;
}

.header a:hover {
    color: #e2d9f3; /* Ungu muda */
}


/* ===== supplier-theme.css ===== */
body {
    background-color: #e3f2e9; /* Latar belakang hijau muda */
    color: #116466; /* Teks hijau gelap */
    font-family: 'Arial', sans-serif;
}

h1, h2, h3, h4 {
    color: #116466; /* Heading hijau gelap */
}

a {
    color: #28a745; /* Link hijau */
    text-decoration: none;
}

a:hover {
    color: #1e7e34; /* Link hijau lebih gelap saat hover */
    text-decoration: underline;
}

button {
    background-color: #28a745; /* Tombol hijau */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 14px;
}

button:hover {
    background-color: #1e7e34; /* Hover lebih gelap */
}

.header {
    background-color: #116466; /* Header hijau gelap */
    color: #ffffff;
}

.header a {
    color: #ffffff;
}

.header a:hover {
    color: #d4edda; /* Hijau muda */
}


/* ===== user-theme.css ===== */
body {
    background-color: #f4f4f9; /* Warna latar default */
    color: #333; /* Warna teks utama */
    font-family: Arial, sans-serif;
}

h1, h2, h3, h4 {
    color: #116466; /* Warna heading */
}

a {
    color: #007bff; /* Warna link */
    text-decoration: none;
}

a:hover {
    color: #0056b3; /* Warna hover link */
    text-decoration: underline;
}

button {
    font-family: Arial, sans-serif;
    border-radius: 5px;
}


/* ===== admin-header.module.css ===== */
.admin-header {
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
}

.admin-header h1 {
    margin: 0;
    font-size: 2em;
}

.admin-header nav a {
    color: #4CAF50;
    margin: 0 10px;
    text-decoration: none;
}

.admin-header nav a:hover {
    color: #ddd;
}

/* ===== base.module.css ===== */
/* Reset */
* {
    max-width: 100%;
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    text-align: center;
}

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

/* ===== buttons.module.css ===== */
.button {
    display: inline-block;
    padding: 10px 15px;
    font-size: 16px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-primary {
    background-color: #4CAF50;
}

.button-primary:hover {
    background-color: #3e8e41;
}

.button-secondary {
    background-color: #008CBA;
}

.button-secondary:hover {
    background-color: #005f8d;
}

.button-danger {
    background-color: #f44336;
}

.button-danger:hover {
    background-color: #d32f2f;
}

/* ===== footer.module.css ===== */
footer {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
}

.footer-section {
    flex: 1 1 30%;
    text-align: center;
}

.footer-section a {
    color: #ddd;
    text-decoration: none;
}

.footer-section a:hover {
    color: #ffeb3b;
}

/* ===== forms.module.css ===== */
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 600px;
    margin: 0 auto;
}

input, textarea, select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    padding: 12px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #45a049;
}

/* ===== header.module.css ===== */
header{
    position:sticky;
    top:0;
    z-index:1000;
    width:100%;
    background:#333;
}

/* FULL WIDTH */
.header-container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:10px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-sizing:border-box;
    overflow:visible;
}

/* Dropdown */
.dropdown{ position:relative; }

.dropdown-menu{
    display:none;
    position:absolute;
    right:0;
    top:100%;
    background:#fff;
    min-width:180px;
    border-radius:6px;
    box-shadow:0 4px 6px rgba(0,0,0,.2);
    z-index:2000;
}

/* TAMPILKAN MENU */
.dropdown:hover .dropdown-menu{
    display:block;
}


/* ===== modal.module.css ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.modal img {
    max-width: 90%;
    max-height: 80%;
    margin: 50px auto;
    display: block;
}

.modal .close {
    position: absolute;
    top: 15px;
    right: 20px;
    color: white;
    font-size: 30px;
    cursor: pointer;
}

.modal .prev, .modal .next {
    position: absolute;
    top: 50%;
    font-size: 30px;
    color: white;
    cursor: pointer;
    padding: 15px;
    transform: translateY(-50%);
}

.modal .prev {
    left: 10px;
}

.modal .next {
    right: 10px;
}

/* ===== products.module.css ===== */
/* Kontainer Produk */
.product-container {
    width: 90%;
    max-width: 800px;
    background-color: #fff;
    padding: 20px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.product {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    width: 250px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.product:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.product img {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 10px;
}

.product h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

/* Harga */
.product .price {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.product .price .original-price {
    text-decoration: line-through;
    color: #888;
    margin-right: 10px;
}

.product .price .discount-price {
    color: #E53935;
    font-size: 16px;
}

/* ===== responsive.module.css ===== */
@media (max-width: 768px) {
    .product-container {
        padding: 15px;
    }

    .product-gallery .product-image {
        width: 45%;
    }

    .footer-content {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .product-gallery .product-image {
        width: 100%;
    }
}