/* Ikon Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Tipografi Global */
body { font-family: 'Plus Jakarta Sans', sans-serif; }
h1, h2, h3 { font-family: 'Noto Serif', serif; }

/* Efek Glassmorphism (Product & Navigasi Umum) */
.glass-nav {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Transisi Tonal (About Us) */
.tonal-shift-on-scroll { 
    transition: background-color 0.3s ease; 
}

/* Carousel (Home) */
.carousel-container {
    display: flex;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-slide {
    min-width: 100%;
}
input[name="carousel"]:nth-of-type(1):checked ~ .carousel-viewport .carousel-container { transform: translateX(0%); }
input[name="carousel"]:nth-of-type(2):checked ~ .carousel-viewport .carousel-container { transform: translateX(-100%); }
input[name="carousel"]:nth-of-type(3):checked ~ .carousel-viewport .carousel-container { transform: translateX(-200%); }

input[name="carousel"]:nth-of-type(1):checked ~ .carousel-nav label:nth-child(1) { background-color: white; transform: scale(1.3); }
input[name="carousel"]:nth-of-type(2):checked ~ .carousel-nav label:nth-child(2) { background-color: white; transform: scale(1.3); }
input[name="carousel"]:nth-of-type(3):checked ~ .carousel-nav label:nth-child(3) { background-color: white; transform: scale(1.3); }

/* Bagian Akun (Expandable & Toggles) */
.expand-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-out, margin-top 0.3s ease-out;
    opacity: 0;
}
.expand-trigger.active .expand-content, 
.active .expand-content {
    max-height: 1500px;
    opacity: 1;
    margin-top: 1.5rem;
}

.toggle-switch:checked + .toggle-bg { background-color: #516352; }
.toggle-switch:checked + .toggle-bg .toggle-dot { transform: translateX(1.25rem); }

/* Kustomisasi Scrollbar (Account) */
.custom-scrollbar::-webkit-scrollbar {
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #d3c3c0;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #827472;
}

/* Modal (Account) */
.modal-container { display: none; }
.modal-container:target { display: flex; }

/* Efek otomatis untuk elemen yang dideteksi script */
.auto-scroll-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Saat sudah di-scroll ke posisinya */
.auto-scroll-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}