/* ===========================================
   GLOBAL STYLE - Frontend
   Theme : Green Soft + Glass UI
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root {
    --green-1:#48b36d;
    --green-2:#2f8d50;
    --green-soft:#e8f9ef;

    --glass-bg:rgba(255,255,255,0.55);
    --glass-border:rgba(255,255,255,0.35);
    --text-dark:#1a2b21;
    --text-muted:#556960;

    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:9px;

    --shadow-soft:0 8px 28px rgba(0,0,0,0.10);
    --shadow-hover:0 12px 40px rgba(0,0,0,0.18);

    --transition:all .25s ease;
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body {
    font-family:'Poppins', sans-serif;
    background: var(--green-soft);
    color: var(--text-dark);
    line-height:1.6;
}

/* ===========================================
   NAVBAR / HEADER
   =========================================== */

header {
    background: linear-gradient(90deg, var(--green-1), var(--green-2));
    color:white;
    padding:14px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:1000;
}

header .logo-area {
    display:flex;
    align-items:center;
    gap:12px;
}

header img {
    height:44px;
    border-radius:10px;
}

.nav-menu {
    display:flex;
    gap:20px;
}

.nav-menu a {
    color:white;
    font-weight:500;
    padding:8px 14px;
    border-radius:10px;
    text-decoration:none;
    transition:var(--transition);
}

/* FIX 1 — Hilangkan efek visited, active bawaan browser */
.nav-menu a:visited,
.nav-menu a:focus,
.nav-menu a:active {
    background:none !important;
    color:white !important;
}

/* Hover */
.nav-menu a:hover {
    background:rgba(255,255,255,0.22);
}

/* FIX 2 — Active yang sebenarnya */
.nav-menu a.active {
    background:rgba(255,255,255,0.50) !important;
    font-weight:600 !important;
    color:white !important;
}

/* Priority — pastikan active MENANG dari hover */
.nav-menu a.active:hover {
    background:rgba(255,255,255,0.50) !important;
}

/* MOBILE MENU */
.menu-toggle {
    display:none;
    color:white;
    font-size:30px;
    cursor:pointer;
}

@media(max-width:780px){
    .nav-menu {
        display:none;
        flex-direction:column;
        background:rgba(0,0,0,0.25);
        backdrop-filter:blur(10px);
        padding:20px;
        border-radius:var(--radius-md);
        position:absolute;
        right:20px;
        top:70px;
        width:180px;
    }
    .nav-menu.show { display:flex; }
    .menu-toggle { display:block; }
}

/* ===========================================
   CONTAINER
   =========================================== */

.container {
    max-width:1000px;
    margin:30px auto;
    padding:20px;
}

/* ===========================================
   GLASS CARD / CONTENT BOX
   =========================================== */

.glass-box {
    background:var(--glass-bg);
    backdrop-filter:blur(12px);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-lg);
    padding:25px;
    box-shadow:var(--shadow-soft);
    margin-bottom:28px;
}

.section-title {
    text-align:center;
    font-size:22px;
    font-weight:700;
    color:var(--green-2);
    margin:20px 0 10px;
}

/* ===========================================
   GRID & CARDS
   =========================================== */

.grid {
    display:grid;
    gap:20px;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}

.card {
    background:white;
    padding:20px;
    text-align:center;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-soft);
    transition:var(--transition);
}

.card:hover {
    transform:translateY(-6px);
    box-shadow:var(--shadow-hover);
}

.card .material-icons {
    font-size:38px;
    color:var(--green-2);
    margin-bottom:8px;
}

/* ===========================================
   GALLERY
   =========================================== */

.gallery {
    display:flex;
    overflow-x:auto;
    gap:14px;
    padding:8px 0;
}

.gallery img {
    height:210px;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-soft);
}

/* ===========================================
   TABLE STYLE
   =========================================== */

.table-wrapper {
    overflow-x:auto;
}

table {
    width:100%;
    border-collapse:collapse;
    background:white;
    border-radius:var(--radius-md);
    overflow:hidden;
    font-size:14px;
}

th {
    background:var(--green-1);
    color:white;
    padding:12px;
    text-align:left;
}

td {
    padding:12px;
    border-bottom:1px solid #eee;
}

tr:nth-child(even){
    background:#f8fdf9;
}

/* ===========================================
   BUTTON
   =========================================== */

.btn {
    display:inline-block;
    padding:10px 20px;
    border-radius:var(--radius-sm);
    background:var(--green-2);
    color:white;
    font-weight:600;
    text-decoration:none;
    transition:var(--transition);
}

.btn:hover {
    background:var(--green-1);
}

/* ===========================================
   FOOTER
   =========================================== */

footer {
    text-align:center;
    padding:25px 10px;
    font-size:13px;
    color:#666;
}