:root{

--primary:#6750A4;
--onPrimary:#FFFFFF;

--background:#F7F2FA;
--surface:#FFFFFF;

--text:#1C1B1F;
--subText:#49454F;

--radius:24px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

background:var(--background);
color:var(--text);

}

.topbar{

height:64px;

display:flex;
align-items:center;

padding:0 20px;

font-size:22px;
font-weight:600;

background:var(--surface);

box-shadow:0 2px 12px rgba(0,0,0,.08);

position:sticky;
top:0;

z-index:99;

}

.page{

padding:18px;

}

.card{

background:var(--surface);

border-radius:var(--radius);

padding:18px;

margin-bottom:18px;

box-shadow:0 6px 18px rgba(0,0,0,.08);

transition:.25s;

}

.card:active{

transform:scale(.98);

}

.title{

font-size:22px;
font-weight:600;

}

.subtitle{

margin-top:8px;

color:var(--subText);

line-height:1.6;

}

.button{

margin-top:18px;

width:100%;

padding:16px;

border:none;

border-radius:50px;

background:var(--primary);

color:white;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.25s;

}

.button:active{

transform:scale(.97);

}

.list{

background:white;

border-radius:20px;

overflow:hidden;

}

.item{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px;

border-bottom:1px solid #ECECEC;

}

.item:last-child{

border:none;

}

/* --- NAVIGASI BAWAH (Standar Baru) --- */
.bottom-nav {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0;
    background: white; 
    display: flex; 
    justify-content: space-around;
    padding: 12px 0; 
    box-shadow: 0 -3px 10px rgba(0,0,0,0.1); 
    z-index: 99999; /* Pastikan ini paling atas[span_4](start_span)[span_4](end_span) */
    pointer-events: auto; /* Memastikan elemen bisa diklik[span_5](start_span)[span_5](end_span) */
}

.nav-item { 
    font-size: 12px; text-align: center; color: #666; cursor: pointer; 
    flex: 1; transition: color 0.3s;
}

/* Dark Mode Support */
body.dark-mode .bottom-nav {
    background-color: #1e1e1e !important;
    border-top: 1px solid #333 !important;
}
body.dark-mode .nav-item { color: #9e9e9e !important; }
/* Pastikan overlay tidak menghalangi klik saat tidak digunakan */
.overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    pointer-events: none; /* KUNCI: Membuat overlay bisa ditembus klik */
}

.overlay.show {
    display: block;
    pointer-events: auto; /* Aktif hanya saat drawer dibuka */
}

/* Pastikan navigasi selalu di atas */
.bottom-nav {
    position: fixed; 
    bottom: 0; left: 0; right: 0;
    z-index: 10000; /* Lebih tinggi dari overlay */
    background: white;
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
}
/* Menambahkan transisi halus saat ganti tema */
body, .card, .bottom-nav {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .card {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}
.carousel {
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    margin: 15px 0;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-inner img {
    width: 100%;
    flex-shrink: 0;
}
/* Container pembungkus utama halaman */
.main-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory; /* Mengaktifkan fitur snap */
}

/* Setiap bagian/section di halaman Anda */
section {
    scroll-snap-align: start; /* Mengunci posisi saat bagian ini sampai di atas */
    min-height: 100vh;
}

/* Khusus untuk area foto banner agar tidak tertutup navi */
.carousel {
    scroll-snap-align: start;
    padding-top: 20px; /* Jarak agar tidak menempel ke atas layar */
    margin-bottom: 80px; /* Memberi ruang agar bagian bawah foto terlihat sebelum kena navi */
}
.carousel{

    overflow:hidden;

    border-radius:20px;

}

.carousel-inner{

    display:flex;

    transition:transform .35s ease;

}

.carousel-inner img{

    min-width:100%;

    user-select:none;

    -webkit-user-drag:none;

}
.carousel-inner img {
    width: 100%;
    /* Mengatur kelengkungan sudut agar terlihat mulus */
    border-radius: 20px; 
    
    /* Tambahan agar gambar tidak terdistorsi saat melengkung */
    object-fit: cover;
    overflow: hidden;