/* Impor font kustom */
@font-face {
    font-family: 'Bangers';
    src: url('fonts/EduVICWANTHand-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* Gaya dasar untuk body */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #FDE2B3; /* Warna latar belakang krem/pink muda */
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Kontainer utama untuk mengatur layout */
.container {
    max-width: 800px;
    width: 100%;
}

/* Gaya untuk header dan logo */
header {
    margin-bottom: 25px;
}

.logo {
    width: 90%;       /* Agar fleksibel dan tidak melewati batas layar kecil */
    max-width: 350px; /* Ukuran maksimal logo */
    height: auto;     /* Menjaga rasio aspek logo */
}

/* Gaya untuk alamat di bawah logo */
.address {
    margin-top: 15px;
    margin-bottom: 50px;
    font-size: 1em;
    color: #555;
}

/* Gaya untuk keterangan jam buka */
.opening-hours {
    background-color: #6880c2; /* Warna biru dari tombol */
    color: white;
    padding: 10px 20px;
    border-radius: 20px; /* Membuat sudut membulat */
    display: inline-block; /* Agar background pas dengan konten */
    margin-top: -30px; /* Mengurangi jarak dengan alamat */
    margin-bottom: 40px;
}

/* Gaya untuk navigasi dan tombol */
nav {
    display: flex;
    flex-wrap: wrap; /* Agar tombol pindah ke baris baru di layar kecil */
    justify-content: center;
    gap: 15px; /* Jarak antar tombol */
}

.nav-button {
    color: white;
    border: none;
    padding: 14px 24px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: normal; /* Mengubah ketebalan font menjadi normal */
    border-radius: 25px; /* Membuat tombol lebih bulat */
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Memberi warna pada setiap tombol */
.nav-button:nth-child(1) { 
    background-color: #4d4c4a; /* Warna dipertahankan sesuai permintaan */
    padding-top: 20px;        /* Menambah tinggi tombol */
    padding-bottom: 20px;     /* Menambah tinggi tombol */
    font-weight: bold;        /* Membuat teks lebih tebal agar seimbang dengan ikon */
}
.nav-button:nth-child(2) { 
    background-color: #ee4d2d;
    padding-top: 20px;
    padding-bottom: 20px;} /* Oranye Shopee */

.nav-button:nth-child(3) { background-color: #f39c12; } /* Oranye untuk Request Produk */
.nav-button:nth-child(4) { background-color: #27ae60; } /* Hijau */
.nav-button:nth-child(5) { background-color: #000000; } /* Hitam */
.nav-button:nth-child(6) { background-color: #db2828; } /* Merah */
.nav-button:nth-child(7) { background-color: #8c4fa3; } /* Ungu */
.nav-button:nth-child(8) { background-color: #00a9e0; } /* Biru Muda */
.nav-button:nth-child(9) { background-color: #f75b9b; } /* Pink */
.nav-button:nth-child(10) { background-color: #27ae60; } /* Teal */

/* Efek hover untuk setiap tombol */
.nav-button:hover { transform: translateY(-2px); } /* Efek sedikit terangkat */

.nav-button:nth-child(1):hover { background-color: #363533; } /* Kuning Tua */
.nav-button:nth-child(2):hover { background-color: #d73110; } /* Oranye Shopee Tua */
.nav-button:nth-child(3):hover { background-color: #d68910; } /* Oranye Tua */
.nav-button:nth-child(4):hover { background-color: #1c8d4b; } /* Hijau Tua */
.nav-button:nth-child(5):hover { background-color: #1c1d1c; } /* Hitam */
.nav-button:nth-child(6):hover { background-color: #be2020; } /* Merah Tua */
.nav-button:nth-child(7):hover { background-color: #79448d; } /* Ungu Tua */
.nav-button:nth-child(8):hover { background-color: #0091c2; } /* Biru Muda Tua */
.nav-button:nth-child(9):hover { background-color: #e0528b; } /* Pink Tua */
.nav-button:nth-child(10):hover { background-color: #1c8d4b; } /* Teal Tua */

/* Gaya untuk tagline di bawah tombol */
.tagline {
    margin-top: 50px;
    font-size: 1.1em;
    font-style: italic;
    color: #5c5c5c;
    background-color: #fff0f5; /* Latar belakang pink lavender yang lembut */
    padding: 15px 25px;
    border-radius: 30px;
    display: inline-block; /* Agar background pas dengan konten */
    border: 2px dashed #f75b9b; /* Garis putus-putus dengan warna pink dari logo */
}

/* Gaya untuk bagian merek pakan kucing */
.brands-section {
    margin-top: 10px;
    width: 100%;
    max-width: 800px;
    padding-bottom: 70px; /* Menambahkan jarak di bagian bawah */
}

.brands-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5em;
    color: #555;
    margin-bottom: 25px;
}

/* Gaya untuk judul kategori produk */
.brand-category-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.3em;
    color: #fff;
    background-color: #555; /* Warna oranye yang ceria */
    padding: 8px 20px;
    border-radius: 0; /* Menghapus radius agar menjadi kotak */
    display: block; /* Mengubah menjadi block agar full-width */
    margin-top: 70px; /* Jarak dari kontainer sebelumnya */
    margin-bottom: 0; /* Dihilangkan agar menempel dengan kontainer di bawahnya */
}

/* Mengatur margin-top khusus untuk judul kategori pertama (MAKANAN) */
.brands-section > .brand-category-title:first-of-type {
    margin-top: 30px;
}

.brands-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Jarak antar lingkaran merek */
    background-color: #afa2a2; /* Latar belakang abu-abu muda untuk setiap kontainer */
    padding: 25px;
    border-radius: 0 0 15px 15px; /* Sudut membulat hanya di bagian bawah */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Bayangan lembut */
}

.brand-item {
    font-family: 'Bangers', cursive; /* Menggunakan font estetik */
    font-size: 1.4em;
    color: white;
    width: 110px;
    height: 110px;
    border-radius: 20px; /* Membuat sudut membulat */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
    line-height: 1.1;
}

.brand-item:hover {
    transform: scale(1.08); /* Efek sedikit membesar saat disentuh */
}

/* Memberi warna-warni pada setiap merek */
.brand-item:nth-child(12n+1) { background-color: #e74c3c; }  /* Merah */
.brand-item:nth-child(12n+2) { background-color: #f39c12; }  /* Oranye */
.brand-item:nth-child(12n+3) { background-color: #2ecc71; }  /* Hijau */
.brand-item:nth-child(12n+4) { background-color: #3498db; }  /* Biru */
.brand-item:nth-child(12n+5) { background-color: #9b59b6; }  /* Ungu */
.brand-item:nth-child(12n+6) { background-color: #34495e; }  /* Biru Tua */
.brand-item:nth-child(12n+7) { background-color: #1abc9c; }  /* Teal */
.brand-item:nth-child(12n+8) { background-color: #d35400; }  /* Oranye Tua */
.brand-item:nth-child(12n+9) { background-color: #c0392b; }  /* Merah Tua */
.brand-item:nth-child(12n+10) { background-color: #2980b9; } /* Biru Tua */
.brand-item:nth-child(12n+11) { background-color: #8e44ad; } /* Ungu Tua */
.brand-item:nth-child(12n+12) { background-color: #27ae60; } /* Hijau Tua */

/* Gaya untuk pemberitahuan "Dan masih banyak lagi" */
.more-brands-notice {
    margin-top: 35px; /* Jarak dari kotak merek di atasnya */
    height: 110px; /* Menyamakan tinggi dengan brand-item */
    font-size: 1.2em;
    font-weight: bold;
    color: #555;
    display: inline-flex; /* Menggunakan flex untuk menengahkan konten */
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: default; /* Memberi kesan bukan link, bisa diubah jika ini tombol */
}


/* Penyesuaian untuk Desktop (Layar di atas 600px) */
@media (min-width: 601px) {
    /* Membuat tombol pertama terpisah di atas pada tampilan desktop */
    nav {
        /* Menggunakan flex-basis untuk memaksa tombol pertama ke baris baru */
        /* tanpa membuatnya menjadi lebar penuh */
        flex-basis: 100%;
    }
}

/* Penyesuaian untuk Mobile (Layar di bawah 600px) */
@media (max-width: 600px) {
    nav {
        flex-direction: column; /* Susun tombol secara vertikal */
        align-items: center;    /* Pusatkan tombol di tengah */
        width: 100%;
    }
    .nav-button {
        width: 90%; /* Buat tombol lebih lebar agar mudah di-tap */
        text-align: center;
    }

    /* Menambahkan garis pemisah di bawah tombol pertama pada tampilan mobile */
    /* Membuat ruang di bawah tombol pertama dan memposisikan garis pemisah */
    .nav-button:nth-child(2) {
        position: relative; /* Diperlukan untuk memposisikan pseudo-element ::after */
        margin-bottom: 50px; /* Menambah jarak ekstra di bawah tombol pertama */
    }

    .nav-button:nth-child(2)::after {
        content: ''; /* Wajib ada untuk menampilkan pseudo-element */
        position: absolute;
        bottom: -35px; /* Memposisikan garis 20px di bawah tombol */
        left: 5%; /* Menyamakan dengan indentasi tombol (100% - 90%)/2 */
        width: 90%; /* Membuat garis selebar tombol */
        border-bottom: 2px dashed #adadad; /* Garis putus-putus abu-abu muda */
        padding-bottom: 30px; /* Memberi jarak antara tombol dan garis */
    }

    .brand-item {
        /* Mengatur lebar agar 2 item pas per baris (50% - setengah dari gap) */
        width: calc(50% - 25px); /* 50% lebar - (gap/2) - (padding item) */
        /* Mengatur height ke nilai tetap agar proporsional */
        height: 120px; 
        font-size: 1.2em;
    }
}