/* styles.css */
body {
    font-family: 'Roboto', sans-serif;
    /*font-family: Arial, sans-serif;*/
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    position: fixed;
    /*position: relative;*/
    width: 100%; /* Agar header memenuhi lebar layar */
    z-index: 10; /* Pastikan lebih tinggi dari elemen lainnya */
    background-color: #FFFFFF;
    padding: 0;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25); /* Lebih tegas */
}

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

.row-wrapper {
    display: flex;
    align-items: center; /* Menjaga elemen sejajar secara vertikal */
}

.menu-icon {
    margin-left: 35px;
    margin-right: 50px; /* Jarak khusus antara Menu Icon dan Logo */
}

.logo {
    margin-right: 975px; /* Jarak khusus antara Logo dan Cart Icon */
}

.cart-icon {
    margin-right: 50px; /* Jarak khusus antara Cart Icon dan Service Icon */
}

.service-icon {
    margin-right: 0; /* Tidak ada jarak tambahan setelah Service Icon */
}

/*.menu-icon,
.service-icon {
    display: flex;
    align-items: center;
}*/

/*.menu-icon {
    margin-right: 0; /* Pastikan tidak ada margin di kanan */
/*}

.cart-icon {
    display: flex;
    align-items: center;
}*/

header img {
    width: 100px;
    height: auto;
}

.header-content img {
    margin: 0;
    padding: 0;
}

/*.service-text {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
}*/

/* Navigation Menu */
/*nav {
    background-color: #666;
    display: flex;
    justify-content: center;
    line-height: 1;
    padding: 0;
    margin-top: 0;
}

nav a {
    color: #fff;
    margin: 0 15px;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 0;
}

nav a:hover {
    background-color: #dedede;
    color: #444;
    text-decoration: none;
}*/

/* Menu Icon */
.menu-icon img {
    width: 30px; /* Sesuaikan ukuran ikon */
    height: auto;
    cursor: pointer;
}

.cart-icon img {
    width: 30px;
    height: auto;
    cursor: pointer;
}

/* Service Icon (Dots Vertical) */
.service-icon img {
    width: 30px; /* Sesuaikan ukuran ikon */
    height: auto;
    cursor: pointer;
}

/* Vertical Navigation Menu */
.vertical-menu {
    display: none; /* Disembunyikan secara default */
    flex-direction: column;
    position: absolute;
    top: 60px; /* Sesuaikan jarak dari header */
    right: 15px; /* Sesuaikan posisi */
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    overflow: hidden;
    z-index: 1000;
}

.vertical-menu a {
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    border-bottom: 1px solid #dedede;
}

.vertical-menu a:last-child {
    border-bottom: none;
}

.vertical-menu a:hover {
    background-color: #f4f4f4;
}

/* Secondary Menu Style */
.secondary-menu {
    display: none; /* Awalnya tersembunyi */
    position: absolute;
    top: 60px; /* Sesuaikan posisi dengan header */
    right: 20px; /* Sesuaikan dengan layout */
    background-color: #ffffff;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px 0;
    z-index: 1000;
}

.secondary-menu a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #333;
}

.secondary-menu a:hover {
    background-color: #f0f0f0;
}

/* Menu Icon Container */
/*.menu-icon {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 15px;
}*/

/* Cart Icon */
/*.cart-icon {
    display: flex;
    align-items: center;
    margin-left: 10px; /* Jarak dari logo */
/*}*/

/*#kirimfile {
    background-image: url('../assets/bg_img.png');
    background-size: cover;
    background-position: center;
    /*margin-top: 0;
    padding-top: 0;*/
    /*padding: 110px 15px 30px; /* Tambahkan padding samping */
    /*position: relative;
}*/

#kirimfile {
    background-image: url('../assets/bg_img.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 82%; /* Bisa diganti dengan nilai lain seperti top left, center top, 50% 20%, dll */
    /*margin-top: 0;
    padding-top: 0;*/
    padding: 110px 15px 30px; /* Tambahkan padding samping */
    position: relative;
}

#kirimfile .container {
    max-width: 1200px; /* Membatasi lebar maksimum container */
    width: 100%; /* Agar kontainer fleksibel mengikuti layar */
    margin: 0 auto; /* Tengah layar */
    background-color: #ffffff; /* Latar belakang putih */
    /*background-color: rgba(0, 0, 0, 0.6); /* Transparansi opsional */
    border-radius: 8px;
    /*padding-top: 0; /* Hilangkan padding di atas container khusus untuk bagian ini */
    padding: 10px 20px 25px;
    /*overflow: hidden; /* Mencegah margin collapse */
    box-sizing: border-box;
}

/* Tulisan "ONE-STOP SOLUTION" di background */
.background-text {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/* Container form */
#formContainer {
    /*background: rgba(255, 255, 255, 0.9); /* Transparan putih */
    border-radius: 10px;
    padding: 30px;
    /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);*/
    position: relative;
    z-index: 2;
}

/* Heading "KIRIM FILE" di dalam form */
.capkim {
    text-align: center;
    font-size: 36px; /* Ukuran lebih besar */
    font-weight: 800;
    margin-top: 0; /* Pastikan margin atas h2 benar-benar dihilangkan */
    padding-top: 0; /* Hilangkan padding atas jika ada */
    margin-bottom: 15px;
    color: #0a9374; /* Warna hijau */
}

/* Tombol Upload */
.btn.cusbtn {
    background-color: #0a9374; /* Mengikuti warna font di .capkim */
    color: #fff;
    font-weight: bold;
    font-size: 1.75rem; /* Ukuran font sama dengan #ticketNumber */
    border: none;
    height: 50px; /* Tinggi tombol sama dengan #ticketNumber */
    padding: 5px 10px; /* Padding agar teks terlihat seimbang */
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box; /* Pastikan padding tidak memengaruhi ukuran total */
    display: inline-block; /* Pastikan tombol tetap rapi */
    text-align: center; /* Pusatkan teks di tengah tombol */
    margin-top: 30px;
}

.btn.cusbtn:hover {
    background-color: #0cb18c; /* Warna hover yang lebih gelap dan harmonis */
}

.upload-form {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    margin: 0 auto;
}

.upload-area {
    background-color: #e5e5e5;
    border: 2px dashed #0cb18c;
    padding: 40px;
    margin-bottom: 15px;
    position: relative;
    height: 200px; /* Tinggi yang konsisten */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-weight: bold;
}

.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container {
    max-width: 1200px;
    margin: 0 auto; /* Hilangkan margin atas */
    background-color: #ffffff;
    padding: 20px; /* Pastikan padding sesuai */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

/* Atur line-height untuk label kode unik */
label[for="ticketNumber"] {
    font-weight: 800; /* Ketebalan font tetap */
    font-size: 1.15rem;
    line-height: 1; /* Pastikan tinggi baris sama dengan ukuran font */
    margin-bottom: 5px; /* Hilangkan jarak bawah bawaan */
    display: inline-block; /* Pastikan properti margin diterapkan */
}

#ticketNumber {
    background: linear-gradient(to bottom, #0056b3, #007bff); /* Gradien horizontal */
    color: #fff;
    height: 50px; /* Tinggi input */
    padding: 5px 10px; /* Padding agar teks terlihat seimbang */
    text-align: center;
    font-size: 1.75rem; /* Ukuran font */
    letter-spacing: 0.1rem; /* Jarak antar karakter */
    font-weight: bold;
    border: none;
    margin-top: 0;
    margin-bottom: 25px;
    box-sizing: border-box; /* Pastikan padding tidak memengaruhi total ukuran */
}

#nama {
    margin-top: 0; /* Hilangkan jarak atas jika ada */
}

#dropArea {
    border: 2px dashed #28a745; /* Garis tepi putus-putus dengan warna hijau */
    background-color: #E9E7E7; /* Latar belakang abu-abu terang */
    height: 250px; /* Tinggi area */
    display: flex; /* Menggunakan Flexbox */
    align-items: center; /* Pusatkan konten secara vertikal */
    justify-content: center; /* Pusatkan konten secara horizontal */
    position: relative; /* Relatif untuk posisi elemen di dalamnya */
    border-radius: 5px; /* Sudut melengkung */
    flex-direction: column; /* Elemen di dalamnya ditumpuk secara vertikal */
    margin-bottom: 10px;
}

#dropArea i {
    font-size: 40px; /* Ukuran ikon upload */
    color: #28a745; /* Warna hijau */
    margin-bottom: 10px; /* Jarak bawah ikon */
}

#dropArea .icon-shadow {
    position: absolute;
    width: 50px; /* Sama ukuran dengan ikon utama */
    height: 50px;
    top: 86px; /* Penyesuaian kecil ke bawah */
    left: 546px; /* Penyesuaian kecil ke kanan */
    z-index: 0; /* Di belakang ikon utama */
    filter: none; /* Menghapus efek blur */
    opacity: 1; /* Tidak ada transparansi */
}

#dropArea .icon-main {
    position: relative;
    width: 50px;
    /*height: 50px;*/
    z-index: 1; /* Di depan bayangan */
    margin-bottom: 20px;
}

/*#dropArea img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    filter: drop-shadow(-2px 2px 6px rgb(128, 128, 128)); /* Efek bayangan */
/*}*/

#dropText {
    font-size: 16px; /* Ukuran teks */
    font-weight: 800; /* Teks tebal */
    color: #000; /* Warna teks hitam */
    cursor: pointer; /* Tampilkan pointer saat hover */
}

#dropText span {
    color: #0a9374; /* Warna hijau untuk teks dalam <span> */
    font-weight: 800; /* Teks tebal */
}

.form-control {
    margin-bottom: 15px;
    border-radius: 5px;
    padding: 10px;
    border-color: #333;
    background-color: #f8f8f8;
    color: #333;
}

/*.cusbtn {
    font-size: 18px;
    font-weight: bold;
    padding: 10px 20px;
    background-color: #333;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    width: 100%;
    margin-top: 20px;
}

.cusbtn:hover {
    background-color: #555;
}*/

.cuslab {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 1px;
}

/* Sukses page */
    .success-section {
        padding: 50px 20px;
        background-color: #f3f3f3;
        border: 1px solid #28a745;
        border-radius: 5px;
        text-align: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }

    .success-section h4 {
        font-weight: bold;
        margin-bottom: 20px;
        color: #333;
    }

    .success-section p {
        font-size: 16px;
        color: #444;
    }

    .success-section .kode-unik {
        font-size: 28px;
        font-weight: bold;
        color: #e74c3c;
        margin-top: 5px;
    }

    .success-section .btn-primary {
        background-color: #333;
        border: none;
        margin-top: 20px;
        font-size: 16px;
        padding: 10px 15px;
    }

    .success-section .btn-primary:hover {
        background-color: #555;
    }

    .success-section .btn-primary:focus,
    .success-section .btn-primary:active {
        background-color: #333 !important;
        box-shadow: none !important;
    }
/* Finish Sukses page */

/*Feature Icons Section*/
.feature-icons {
    /* background-color: white; --> DIHAPUS agar gap tembus */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 2px;
    margin: 0;
    padding: 0;
    text-align: center;
}

.feature-item {
    padding: 10px;
    background-color: white; /* putih hanya pada item */
    /*border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);*/
}

.feature-item img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

.feature-item img:hover {
    transform: scale(1.1);
}

.feature-item p {
    font-size: 14px;
    color: #333;
    margin: 0;
    font-weight: 500;
}
/*Finish Feature Icons Section*/


/* Produk Kami Section */
.produk-kami {
    margin-top: 10px;
    text-align: left;
    padding: 0;
    margin-bottom: 0;
}

.produk-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    width: 100%;
    padding: 0;
    margin: 0;
    align-items: stretch; /* Pastikan item sejajar vertikal */
}

.produk-grid h3 {
    background-color: #fff; /* Tambahan agar background putih */
    grid-column: 1 / -1;
    font-family: 'Montserrat', sans-serif;
    /*font-weight: 700;*/
    font-size: 20px;
    color: #222;
    margin: 0 0 0 0;
    padding: 10px 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.produk-item {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.produk-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.produk-item img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.produk-link {
    text-decoration: none;
    display: block;
    height: 100%;
}

.produk-link:visited,
.produk-link:active,
.produk-link:hover {
    text-decoration: none;
    color: inherit;
}

.produk-item img:hover {
    transform: scale(1.02);
}

.produk-item h4 {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    padding: 0 10px;
    line-height: 1.4;
}

.produk-item h4 a {
    color: #333; /* Sama dengan warna h4 normal */
    text-decoration: none; /* Hilangkan garis bawah */
    cursor: pointer; /* Tetap tunjuk tangan saat hover */
    transition: color 0.3s ease;
}

.produk-item h4 a:hover {
    color: #40E0D0; /* Bisa kasih efek warna saat hover, contoh pastel pink favorit */
    /* text-decoration: underline;  Kalau mau underline saat hover bisa aktifkan ini */
}

.produk-item p {
    font-size: 15px;
    color: #666;
    padding: 0 10px;
    line-height: 1.6;
}

.produk-harga {
    font-size: 15px;
    color: #000;
    font-weight: 500;
    padding: 5px 10px;
    padding-top: 0;
}

.produk-harga span {
    color: #FF5F78; /* pastel pink yang Anda sukai */
    font-weight: bold;
    font-size: 16px;
}
/*Finish Produk Kami*/

/* === Feedback Section === */
.feedback-section {
    background-color: #f8f8f8;
    padding: 0;
    margin-top: 10px;
}

.feedback-container {
    /*max-width: 1200px;*/
    width: 100%;
    margin: 0 auto;
    display: grid; /* Ubah dari block menjadi grid */
    gap: 2px; /* Jarak antar anak, termasuk h3 dan .feedback-item */
}

.feedback-container h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: #222;
    background-color: #fff;
    padding: 10px;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.feedback-item {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 0; /* Jarak antar item */
}

.feedback-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.feedback-grid {
    display: grid;
    grid-template-columns: 60px 1fr 80px;
    grid-template-rows: auto auto;
    gap: 2px;
}

.feedback-avatar {
    grid-column: 1;
    grid-row: 1 / span 2; /* Avatar tetap di kiri dan memanjang ke bawah */
}

.feedback-rating {
    grid-column: 3;
    grid-row: 1; /* Tetap di pojok kanan atas */
    display: flex;
    align-items: start;
    justify-content: center;
}

.feedback-content {
    grid-column: 2;
    grid-row: 1 / span 2; /* Ubah dari '2' agar sejajar atas */
    font-size: 14px;
    color: #444;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Pastikan konten sejajar atas */
}

.feedback-avatar img {
    grid-area: avatar;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.feedback-content .date {
    font-size: 12px;
    color: #888;
    margin-bottom: 3px;
    display: inline-block;
}

.feedback-content .product-name {
    font-weight: 600;
    font-size: 13px;
    color: #222;
    margin-bottom: 5px;
    display: block;
}

.feedback-item p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.feedback-product-images {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.feedback-product-images img {
    width: 100%;
    max-width: 120px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.feedback-rating .stars {
    color: #f5b301;
    font-size: 18px;
    font-weight: bold;
}
/*Finish feedback*/

footer {
    background-color: #e0e0e0;
    padding: 10px 5px;
    text-align: center;
    color: #333;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
}

footer p {
    margin: 0;
    padding: 5px 10px;
    word-break: break-word;
}

footer a {
    color: #333;
    margin: 0 10px;
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

footer a:hover {
    text-decoration: underline;
    color: #FF5F78; /* pastel pink yang kamu sukai */
}

/* Gaya khusus untuk kalimat di bawah form */
.additional-info {
    font-weight: 500;
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
}

.zip-rar-text {
    font-weight: bold;
    color: #008B45;
}

#uniqueCode .ellipsis {
    font-size: 30px;
    font-weight: bold;
    color: #e74c3c;
}

.dua-garis-hijau {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pastikan distribusi elemen */
    margin-top: 30px;
}

.dua-garis-hijau .garis {
    flex: 1;
    height: 2px;
    background-color: #0a9374;
}

.dua-garis-hijau .spasi {
    width: 60px;
    height: 2px; /* Tetap konsisten dengan tinggi */
}

/* Lebar input country code hanya sepanjang karakter "+62" */
.country-code {
    width: 8ch; /* Tetap sepanjang karakter "+62" */
    text-align: center; /* Teks di tengah */
    box-sizing: border-box; /* Padding termasuk dalam width */
}

/* Input WhatsApp agar lebarnya sejajar dengan input NAMA */
.whatsapp-number {
    width: 100%; /* Lebar penuh mengikuti elemen di form-row */
    box-sizing: border-box;
}

/* Menata .form-row agar input WhatsApp memanjang */
.form-row {
    display: flex;
    gap: 10px; /* Jarak antara country code dan input WhatsApp */
    align-items: flex-start; /* Menyelaraskan elemen di awal */
}

/* Menghapus jarak antara <small> dan <input> */
#whatsappInfo {
    margin-top: -0.5rem; /* Menghilangkan jarak default Bootstrap di atas elemen <small> */
    margin-bottom: 0; /* Pastikan tidak ada jarak di bawah */
    padding-top: 0; /* Pastikan tidak ada padding tambahan */
    padding-bottom: 0; /* Hilangkan padding jika ada */
    display: block; /* Pastikan <small> ditampilkan sebagai block untuk perataan */
    font-size: 0.875rem; /* Tetap gunakan ukuran kecil */
    line-height: 1.2; /* Jaga agar teks tidak terlalu tinggi */
}

/* RESPONSIF: Tampilan untuk layar kecil */
@media (max-width: 576px) {
    .header-content {
    padding: 15px;
}

    .menu-icon {
    margin-left: 10px;
    margin-right: 30px; /* Jarak khusus antara Menu Icon dan Logo */
}

.logo {
    margin-right: 195px; /* Jarak khusus antara Logo dan Cart Icon */
}

.cart-icon {
    margin-right: 30px; /* Jarak khusus antara Cart Icon dan Service Icon */
}
    
    .capkim {
    font-size: 32px; /* Ukuran lebih besar */
    margin-bottom: 10px;
}

#kirimfile {
    padding: 100px 15px 20px; /* Tambahkan padding samping */
    background-position: center center;
}

    #kirimfile .container {
        padding: 5px 20px 20px;
    }

.background-text {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 20px;
    z-index: 1;
}

#dropArea .icon-shadow {
    top: 86px; /* 86 Penyesuaian kecil ke bawah */
    left: 173px; /* 173 Penyesuaian kecil ke kanan */
}

#dropArea .icon-main {
    margin-bottom: 20px;
}

#dropText {
    font-size: 14px; /* Ukuran teks */
}

    .form-row {
        flex-direction: row; /* Tetap horizontal pada tampilan mobile */
        flex-wrap: wrap; /* Izinkan elemen membungkus ke bawah jika terlalu panjang */
        gap: 5px; /* Kurangi jarak antar elemen untuk layar kecil */
    }

    .country-code {
        width: 6ch; /* Tetap sepanjang karakter "+62" */
        text-align: center; /* Teks tetap di tengah */
    }

    .whatsapp-number {
        flex: 1; /* Input WhatsApp memanjang hingga sisa ruang */
    }
    
    footer {
    padding: 15px 0;
    font-size: 12px;
    }

    /* Elemen <small> tetap berada di bawah input WhatsApp */
/* Menghapus jarak antara <small> dan <input> */
#whatsappInfo {
    margin-top: -0.5rem; /* Menghilangkan jarak default Bootstrap di atas elemen <small> */
    margin-bottom: 0; /* Pastikan tidak ada jarak di bawah */
    padding-top: 0; /* Pastikan tidak ada padding tambahan */
    padding-bottom: 0; /* Hilangkan padding jika ada */
    display: block; /* Pastikan <small> ditampilkan sebagai block untuk perataan */
    font-size: 0.600rem; /* 0.875 Tetap gunakan ukuran kecil */
    line-height: 1.2; /* Jaga agar teks tidak terlalu tinggi */
}

/* Tombol Upload */
.btn.cusbtn {
    height: 40px; /* Tinggi tombol sama dengan #ticketNumber */
    font-size: 1.5rem; /* Ukuran font sama dengan #ticketNumber */
    margin-top: 20px;
    padding-top: 0; /* Pastikan tidak ada padding tambahan */
    padding-bottom: 0; /* Hilangkan padding jika ada */
}

.dua-garis-hijau {
    margin-top: 20px;
}

.feature-item {
    padding: 10px 5px;
}

.feature-item img {
    margin-bottom: 5px;
}

.feature-item p {
    font-size: 12px;
}

.produk-grid h3 {
    font-size: 18px;
}

.produk-item h4 {
    font-size: 15px;
}

.produk-item p {
    font-size: 13px;
}

.produk-harga {
    font-size: 13px;
}

.produk-harga span {
    font-size: 14px;
}

.feedback-container h3 {
    font-size: 18px;
}

.feedback-content {
    font-size: 12px;
}

.feedback-content .date {
    font-size: 10px;
}

.feedback-content .product-name {
    font-size: 11px;
}

.feedback-item p {
    font-size: 13px;
}

.feedback-rating .stars {
    font-size: 16px;
}

/* Media Query untuk Mobile */
/*@media (max-width: 768px) {
    #kirimfile {
        padding: 30px 30px; /* Kurangi padding kanan/kiri pada mobile */
    /*}
}*/

}