/* =========================================================
   THEME: Hijau Kementerian Agama - E-Learning KKA
   ========================================================= */
:root{
    --primary: #00693E;       /* hijau kemenag utama */
    --primary-dark: #004E2E;
    --primary-light: #2E8B57;
    --accent: #D4AF37;        /* aksen emas/kuning kemenag */
    --bg-soft: #F0F7F2;
    --text-dark: #1C2B24;
    --text-muted: #6B7C74;
    --white: #ffffff;
    --danger: #DC2626;
    --warning: #D97706;
    --info: #2563EB;
    --radius: 14px;
    --shadow: 0 8px 24px rgba(0,105,62,0.10);
    --shadow-lg: 0 16px 40px rgba(0,105,62,0.16);
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family:'Segoe UI', Roboto, Arial, sans-serif;
    background:var(--bg-soft);
    color:var(--text-dark);
    -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
ul{list-style:none;margin:0;padding:0}
img{max-width:100%;display:block}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ===== NAVBAR PUBLIK ===== */
.navbar{
    background:linear-gradient(135deg,var(--primary) 0%, var(--primary-dark) 100%);
    color:var(--white);
    position:sticky; top:0; z-index:100;
    box-shadow:var(--shadow);
}
.navbar .container{display:flex;align-items:center;justify-content:space-between;height:72px}
.navbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.navbar .brand img{height:42px;width:42px;border-radius:50%;background:#fff;padding:3px}
.navbar-menu{display:flex;gap:6px;align-items:center}
.navbar-menu a{
    padding:10px 16px;border-radius:10px;font-size:14.5px;font-weight:500;
    transition:.2s;
}
.navbar-menu a:hover, .navbar-menu a.active{background:rgba(255,255,255,.15)}
.btn-login{
    background:var(--accent);color:var(--primary-dark)!important;
    padding:10px 20px!important;border-radius:10px;font-weight:700!important;
}
.navbar-toggle{display:none;background:none;border:none;color:#fff;font-size:26px;cursor:pointer}

@media (max-width:900px){
    .navbar-menu{
        position:fixed;top:72px;left:0;right:0;background:var(--primary-dark);
        flex-direction:column;align-items:stretch;padding:10px;
        transform:translateY(-150%);transition:.3s;
    }
    .navbar-menu.open{transform:translateY(0)}
    .navbar-toggle{display:block}
}

/* ===== HERO / SLIDER ===== */
.slider{position:relative;overflow:hidden;height:440px;background:#eee}
.slider-track{display:flex;height:100%;transition:transform .6s ease}
.slide{min-width:100%;height:100%;position:relative}
.slide img{width:100%;height:100%;object-fit:cover}
.slide-caption{
    position:absolute;left:0;bottom:0;right:0;padding:36px 8%;
    background:linear-gradient(to top, rgba(0,78,46,0.85), transparent);
    color:#fff;
}
.slide-caption h2{margin:0 0 6px;font-size:28px}
.slider-dots{position:absolute;bottom:14px;right:24px;display:flex;gap:8px}
.slider-dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}
.slider-dots span.active{background:var(--accent)}
.slider-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    background:rgba(0,0,0,.35);color:#fff;border:none;width:44px;height:44px;
    border-radius:50%;font-size:20px;cursor:pointer;z-index:5;
}
.slider-arrow.left{left:16px}
.slider-arrow.right{right:16px}
@media (max-width:768px){ .slider{height:260px} .slide-caption h2{font-size:20px} }

/* ===== SECTION UMUM ===== */
.section{padding:56px 0}
.section-title{text-align:center;margin-bottom:36px}
.section-title h2{color:var(--primary-dark);font-size:26px;margin-bottom:8px}
.section-title p{color:var(--text-muted);font-size:15px}

/* ===== CARDS ===== */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-3,.grid-4{grid-template-columns:1fr}}

.card{
    background:var(--white);border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow);transition:.25s;border:1px solid #e7f0ea;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card img{height:170px;object-fit:cover;width:100%}
.card-body{padding:18px}
.card-body h3{margin:0 0 8px;font-size:17px;color:var(--primary-dark)}
.card-body p{margin:0;color:var(--text-muted);font-size:14px;line-height:1.5}
.card-tag{
    display:inline-block;background:var(--bg-soft);color:var(--primary);
    font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;margin-bottom:10px;
}

/* ===== BAB / MATERI GRID ===== */
.bab-card{
    background:linear-gradient(145deg,var(--primary) 0%, var(--primary-light) 100%);
    color:#fff;border-radius:var(--radius);padding:26px;text-align:center;
    box-shadow:var(--shadow);transition:.25s;
}
.bab-card:hover{transform:translateY(-6px) scale(1.02)}
.bab-card .num{font-size:34px;font-weight:800;color:var(--accent)}
.bab-card h4{margin:6px 0 0;font-size:16px}

/* ===== BUTTONS ===== */
.btn{
    display:inline-block;padding:11px 22px;border-radius:10px;font-weight:600;
    font-size:14px;cursor:pointer;border:none;transition:.2s;
}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-accent{background:var(--accent);color:var(--primary-dark)}
.btn-sm{padding:6px 14px;font-size:13px}
.btn-danger{background:var(--danger);color:#fff}

/* ===== FOOTER ===== */
.footer{background:var(--primary-dark);color:#e6f2ec;padding:40px 0 18px;margin-top:40px}
.footer h4{color:#fff;margin-bottom:14px}
.footer a{color:#cfe7db}
.footer .bottom{text-align:center;padding-top:20px;margin-top:20px;border-top:1px solid rgba(255,255,255,.15);font-size:13px;color:#9fc6b1}

/* ===== AUTH PAGE ===== */
.auth-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary) 0%, var(--primary-dark) 100%);padding:20px}
.auth-box{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:380px;padding:36px}
.auth-box h2{color:var(--primary-dark);margin:0 0 6px}
.auth-box p.sub{color:var(--text-muted);margin-bottom:24px;font-size:14px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13.5px;margin-bottom:6px;font-weight:600;color:var(--text-dark)}
.form-group input, .form-group select, .form-group textarea{
    width:100%;padding:11px 13px;border:1.5px solid #dbe8e1;border-radius:10px;font-size:14px;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:none;border-color:var(--primary)}
.alert{padding:12px 14px;border-radius:10px;font-size:13.5px;margin-bottom:16px}
.alert-error{background:#fde2e2;color:var(--danger)}
.alert-success{background:#d9f2e3;color:var(--primary-dark)}

/* ===== DASHBOARD LAYOUT ===== */
.dash-wrapper{display:flex;min-height:100vh}
.sidebar{
    width:250px;background:var(--primary-dark);color:#e6f2ec;flex-shrink:0;
    position:sticky;top:0;height:100vh;overflow-y:auto;transition:.25s;
}
.sidebar .brand{padding:22px 20px;font-weight:700;font-size:16px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;gap:10px;align-items:center}
.sidebar-menu{padding:14px 10px}
.sidebar-menu .group-title{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#8fb9a3;padding:14px 12px 6px}
.sidebar-menu a{
    display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;
    font-size:14px;color:#dcefe4;margin-bottom:3px;
}
.sidebar-menu a:hover, .sidebar-menu a.active{background:var(--primary);color:#fff}
.main-content{flex:1;min-width:0}
.topbar{
    background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.04);padding:14px 26px;
    display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10;
}
.topbar .user-chip{display:flex;align-items:center;gap:10px;font-size:14px}
.topbar .user-chip img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--bg-soft)}
.content-area{padding:26px}

.sidebar-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--primary-dark)}
@media (max-width:900px){
    .sidebar{position:fixed;left:-260px;z-index:200;box-shadow:var(--shadow-lg)}
    .sidebar.open{left:0}
    .sidebar-toggle{display:block}
}

/* ===== STAT CARDS (dashboard) ===== */
.stat-card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px}
.stat-card .icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;background:var(--primary)}
.stat-card .value{font-size:24px;font-weight:800;color:var(--primary-dark)}
.stat-card .label{font-size:13px;color:var(--text-muted)}

/* ===== TABLE ===== */
.table-wrap{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto;padding:6px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:var(--bg-soft);color:var(--primary-dark);text-align:left;padding:12px 14px;font-weight:700}
td{padding:12px 14px;border-top:1px solid #eef3f0}
tr:hover td{background:#fafdfb}

.badge{padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700}
.badge-hadir{background:#d9f2e3;color:#00693E}
.badge-sakit{background:#fef3c7;color:#b45309}
.badge-izin{background:#dbeafe;color:#1d4ed8}
.badge-alpa{background:#fde2e2;color:#b91c1c}