/* === DAFTAR CUSTOM FONT === */
@font-face {
    font-family: 'Helvetica Now Display';
    /* Sesuaikan 'url' dengan lokasi dan nama file font Regular Anda */
    src: url('assets/helvetica-now-text-regular.ttf') format('truetype');
    font-weight: normal; 
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Now Display';
    /* Sesuaikan 'url' dengan lokasi dan nama file font Bold Anda */
    src: url('assets/helvetica-now-text-bold.ttf') format('truetype');
    font-weight: 800; /* Angka 800 ini agar cocok dengan font-weight tombol kita */
    font-style: normal;
}


/* === PENGATURAN TEMA LIGHT (ALL WHITE) === */
body {
    background-color: #f0f0f0; /* Abu-abu muda untuk mengisi sisa layar di PC */
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Now Display',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

/* === KONTAINER UTAMA === */
.container {
    width: 100%;
    max-width: 480px;
    background-color: #ffffff; /* Latar belakang HP putih bersih */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 20px 0px 20px;
    box-sizing: border-box;
}

/* === BAGIAN HEADER (DUA LOGO & GARIS) === */
.header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.logo-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; 
    margin-bottom: 0px;
}

.logo-text {
    height: 100px; /* Bisa dibesarkan/dikecilkan sesuai selera */
    width: auto;
}

.logo-symbol {
    height: 100px;
    width: auto;
}

.divider {
    width: 100%;
    height: 1px;
    background-color: #dcdcdc; /* Garis horizontal hitam */
}

/* === BAGIAN KATALOG KOLEKSI === */
.carousel-section {
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100vw; 
    overflow: hidden; 
}

.carousel-title {
    color: #000000;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0px;
    margin-bottom: 1px;
}

.carousel-container {
    width: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
    align-items: center;
    padding: 20px 0; 
    position: relative;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

.carousel-container::-webkit-scrollbar {
    display: none; 
}

.carousel-container::before,
.carousel-container::after {
    content: "";
    flex: 0 0 calc(50% - 45px); 
}

.carousel-item {
    flex: 0 0 90px; 
    margin: 0 10px; 
    scroll-snap-align: center;
    transition: transform 0.4s ease, opacity 0.4s ease;
    
    /* Gambar pinggir meredup dan mengecil */
    opacity: 1;
    transform: scale(0.75);
    
    /* BINGKAI DAN BAYANGAN DIHAPUS AGAR CLEAN SEPERTI REFERENSI */
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: transform; 
    backface-visibility: hidden;
}

.carousel-item.active {
    opacity: 1;
    transform: scale(1.4); /* Membesar saat di tengah */
    z-index: 2;
    will-change: transform;
}

.carousel-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* === TAMBAHAN PANAH & TITIK KATALOG === */
.carousel-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.2rem;
    font-weight: 800;
    color: #000000;
    cursor: pointer;
    z-index: 10;
    padding: 10px;
    font-family: monospace; /* Agar bentuk panahnya tajam dan rapi */
}

.left-arrow {
    left: 0px; 
}

.right-arrow {
    right: 0px; 
}

/* Menyembunyikan panah di layar HP yang terlalu kecil jika mengganggu */
@media (max-width: 360px) {
    .carousel-arrow { display: none; }
}

.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    
    /* UBAH INI: Batasi lebar jendela titik agar cuma tampil 5-7 saja */
    width: 200px; 
    overflow: hidden; 
    margin: 15px auto;
}

.dot {
    width: 6px;
    height: 6px;
    background-color: #dcdcdc;
    border-radius: 50%;
    
    /* UBAH INI: Biarkan titik menyusut jika perlu */
    flex-shrink: 0; 
    
    transition: all 0.3s ease;
}

.dot.active {
    background-color: #000000;
    transform: scale(1.5);
}

/* === BAGIAN TOMBOL (LINKS) === */
.links-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.link-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    
    background-color: #ffffff; /* Tombol putih */
    color: #000000; /* Teks hitam */
    text-decoration: none;
    padding: 24px 40px; 
    
    border: 1px solid #dcdcdc; /* Garis kotak hitam */
    border-radius: 0px; /* Sudut Siku-siku (Kotak) */
    
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase; /* Memaksa huruf KAPITAL SEMUA */
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.link-btn:hover {
    background-color: #000000;
    color: #ffffff;
}

.link-btn .icon {
    display: none; /* Titik 3 disembunyikan sesuai referensi */
}


/* === BAGIAN FOOTER BARU === */
.footer {
    width: 100%;
    margin-top: 20px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 40px; 
}

/* 1. Ikon Sosial Media (Diperbesar) */
.social-icons {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.social-icons a {
    color: #000000; 
    font-size: 2.2rem; /* Ukuran ikon diperbesar menyesuaikan referensi */
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.social-icons a:hover {
    opacity: 0.5;
}

/* 2. Peta Dunia */
.footer-map {
    width: 100%;
    max-width: 400px; /* Menjaga agar peta tidak terlalu melebar */
    height: auto;
    margin-bottom: 25px;
    object-fit: contain;
}

/* 3. Teks Statistik */
.footer-stats {
    color: #000000;
    font-size: 0.65rem;
    font-weight: 500; /* Ditebalkan */
    text-align: center;
    line-height: 1.4;
    margin: 0;
    margin-bottom: 20px;
    padding: 0 10px;
    letter-spacing: -0.2px; /* Dibuat sedikit merapat agar padat */
}

/* 4. Garis Pemisah (Divider) */
.footer-divider {
    width: 100%;
    height: 1px;
    background-color: #000000;
    margin-bottom: 15px;
}

/* 5. Teks Copyright */
.footer-copyright {
    color: #000000;
    font-size: 0.65rem;
    font-weight: 500;
    text-align: center;
    margin: 0;
    letter-spacing: -0.2px;
}