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

/* --- SIDEBAR & OVERLAY (TIDAK BERUBAH) --- */
.sidebar { 
    position: fixed; 
    left: -280px; 
    top: 0; 
    width: 280px; 
    height: 100%; 
    background: #fff; 
    z-index: 1000; 
    transition: 0.3s; 
    box-shadow: 2px 0 10px rgba(0,0,0,0.1); 
    display: flex; 
    flex-direction: column; 
}
.sidebar.open { left: 0; }
.sidebar-header { 
    padding: 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid #eee; 
}
.logo { 
    font-weight: 700; 
    color: #2ecc71; 
    font-size: 1.2rem; 
}
.close-btn { 
    font-size: 2rem; 
    border: none; 
    background: none; 
    cursor: pointer; 
    color: #ccc; 
}
.sidebar-menu { 
    padding: 20px; 
    flex-grow: 1; 
}
.menu-item { 
    display: block; 
    padding: 12px 15px; 
    text-decoration: none; 
    color: #555; 
    border-radius: 8px; 
    margin-bottom: 5px; 
    font-weight: 500; 
    border: none; 
    background: none; 
    width: 100%; 
    text-align: left; 
    cursor: pointer; 
    font-size: 0.9rem;
    font-family: inherit;
}
.menu-item:hover, .menu-item.active { 
    background: #e8f5e9; 
    color: #2e7d32; 
}
.dropdown-container { 
    display: none; 
    padding-left: 20px; 
    background: #fafafa; 
}
.dropdown-container.show { display: block; }
.dropdown-container a { 
    display: block; 
    padding: 10px; 
    text-decoration: none; 
    color: #777; 
    font-size: 0.9rem; 
}
.dropdown-container a:hover {
    background: #e8f5e9; 
    color: #2e7d32; 
}
.dropdown-btn { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.arrow { 
    float: none; 
    font-size: 0.9rem; 
}
.sidebar-footer { 
    padding: 20px; 
    border-top: 1px solid #eee; 
}
.logout { color: #e74c3c !important; }
.overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.3); 
    display: none; 
    z-index: 900; }
.overlay.show { display: block; }

/* --- SECTION 1: HERO (FULL BACKGROUND) --- */
.section-hero {
    height: 400px;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
                url('img/welcome-banner.png') center /cover;
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
}

.top-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
}
.hamburger { 
    background: none; 
    border: none; 
    cursor: pointer; 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
}
.hamburger span { 
    width: 18px; 
    height: 1.5px; 
    background: #fff; 
    border-radius: 2px; 
}

.user-info-top { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    color: #fff; 
}
.avatar-top { 
    width: 35px; 
    height: 35px; 
    background: #eee; 
    border-radius: 50%; 
    border: 2px solid #fff; 
}
.hero-content { 
    flex-grow: 1; 
    display: flex; 
    align-items: flex-start; 
    justify-content: left; 
    padding-top: 60px;
    color: #fff; 
    text-shadow: 0 4px 10px rgba(0,0,0,0.3); 
}
.hero-content h1 { 
    font-size: 2.5rem; 
    font-weight: 700; 
}

/* --- ELEMEN LINGKARAN PEMBAGI --- */
.split-circle {
    width: 130px;
    height: 130px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 0; /* Sesuai tinggi hero section */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    padding: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border: 7px solid #584c33;
}
.split-circle img { 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    object-fit: cover; 
}

/* --- SECTION 2: VISUALISASI DATA (TAB PUTIH) --- */
.section-data { 
    margin-top: -80px; /* Menarik seluruh section ke atas menimpa foto hero */
    position: relative; 
    z-index: 10; /* Memastikan tab putih berada di atas lapisan foto */
    background: transparent; 
    /* padding-bottom: 50px; */
}
.tab-content {
    background: #f1e8d7;
    margin: 0 auto;
    /* max-width: 1000px;
    min-height: 500px; */
    border-radius: 40px 40px 0 0; /* Tab style */
    padding: 100px 40px 40px; /* Padding top besar untuk ruang lingkaran */
    box-shadow: 0 -10px 30px rgba(0,0,0,0.05);
    position: relative;
}
.status-display { 
    text-align: center; 
    margin-bottom: 40px; 
}
.status-display .label { 
    color: #584c33; 
    font-size: 1.2rem; 
    font-weight: 600; 
}
.status-display h1 { 
    font-size: 3rem; 
    margin: 10px 0; 
    color: #2c3e50; 
}
.score-badge { 
    display: inline-block; 
    padding: 5px 15px; 
    color: #584c33; 
}
.status-display .desc { 
    color: #7f8c8d; 
    margin-top: 10px; 
}

/* Parameter Cards Grid */
.params-row { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
    margin-bottom: 40px; 
}
.p-card { 
    padding: 25px; 
    border-radius: 20px; 
    color: #fff; 
    text-align: center; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.p-card h2 { 
    font-size: 2.5rem; 
    margin-top: 5px; 
}
.ph { background: #ca4e0c; }
.ec { background: #939c1f; }
.water { background: #7ab6c9; }

/* /* Graph Area */
.graph-container { 
    /* height: fit-content;
    width: fit-content; */
    background-color: white;
    border-radius: 20px;
    padding: 25px;
    /* border-top: 1px solid #000;  */
    /* padding-top: 30px; */
}
.graph-container h3 { 
    margin-bottom: 20px; 
    color: #2c3e50; 
}
.canvas-wrapper { 
    height: 300px; 
    width: 100%; 
}
.footer-note { 
    text-align: left; 
    color: #584c33; 
    font-size: 0.6rem; 
    margin-top: 10px; 
}
.footer-foot { 
    display: flex; 
    gap: 20px;
    justify-content: center;
    align-items: center; 
    color: #fff;
    text-align: center; 
    height: 50px; 
    width: 100%;
    background-color: #584c33; 
    font-size: 0.6rem;
    padding: 18px;
    text-decoration: none;
}
.footer-foot a {
    text-decoration: none;
    color: #ccc;
}

/* --- PENGATURAN RESPONSIVE SMARTPHONE --- */
@media screen and (max-width: 765px) {
    .params-row {
        grid-template-columns: 1fr; /* Memaksa grid menjadi 1 kolom menyamping penuh */
    }
    
    /* Opsional: Merapikan padding tab putih agar tidak terlalu sempit di HP */
    .tab-content {
        padding: 100px 20px 30px; 
    }
}