/* HERO BESAR  */

:root{
    --materi-main: <?= $materi_main ?>;
    --materi-soft: <?= $materi_light ?>;

    --bg-soft: #fafbfc;
    --card-bg: #ffffff;
    --muted: #6d6d6d;

    --accent: #ffbf00;
    --accent-dark: #e0a700;
}

/* GLOBAL BASE*/

*{ box-sizing:border-box; }

html, body { height:100%; }

body{
    margin:0;
    padding:0;
    background:var(--bg-soft);
    font-family:"Inter",sans-serif;
    color:#222;
}

/* HERO / HEADER BESAR*/

.materi-header{
    position:relative;
    overflow:hidden;
    background: linear-gradient(135deg, var(--materi-soft), var(--materi-main));
    padding: 170px 0 140px;
    text-align:center;
    margin-top:0;
}

.materi-header .container{
    position:relative;
    z-index:3;
}

.materi-title{
    margin:0 auto 10px;
    font-size: clamp(32px, 4vw, 48px);
    font-weight:800;
    color:#fff;
    text-shadow:0 4px 22px rgba(0,0,0,0.25);
}

.materi-sub{
    margin-top:6px;
    font-size: clamp(14px, 1.3vw, 20px);
    color:rgba(255,255,255,0.95);
}

/*WAVE SVG */

.wave{
    position:absolute;
    bottom:-45px;
    left:0;
    width:100%;
    height:180px;
    line-height:0;
    z-index:2;
}

.wave svg{
    width:100%;
    height:100%;
    display:block;
}

/*CONTENT SECTION*/

.section-content{
    position:relative;
    z-index:1;
    background:var(--bg-soft);
    padding-top:40px;
}

/* ================================================= */
/* =============== SUB GRID + CARDS ================= */
/* ================================================= */

.sub-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:24px;
    margin:40px 36px 64px;
}

.sub-card{
    display:flex;
    gap:18px;
    align-items:flex-start;
    background:var(--card-bg);
    padding:22px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,0.04);
    box-shadow:0 8px 22px rgba(15,15,15,0.04);
    transition:transform .16s ease, box-shadow .16s ease;
}

.sub-card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 36px rgba(15,15,15,0.08);
}

.icon-wrap{
    width:64px;
    height:64px;
    border-radius:12px;
    background:var(--materi-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-weight:700;
    font-size:1.2rem;
    color:var(--materi-main);
}

/* ================= LANDSCAPE GRID ================= */
/* Tablet landscape & desktop → card landscape dalam grid */

@media (min-width: 992px){
    .sub-grid{
        grid-template-columns: repeat(2, minmax(420px, 1fr));
        max-width:1200px;
        margin:40px auto 64px;
        gap:28px;
    }

    .sub-card{
        align-items:center;
        padding:24px 26px;
        min-height:150px;
    }

    .sub-desc{
        max-width:100%;
    }

    .btn-open{
        white-space:nowrap;
    }
}

/* Desktop lebar → 3 kolom (mirip Fitur Unggulan) */
@media (min-width: 1280px){
    .sub-grid{
        grid-template-columns: repeat(3, minmax(360px, 1fr));
    }
}

/* ================= Card text ================= */

.sub-title{
    font-weight:700;
    font-size:1.05rem;
    margin:0;
}

.sub-desc{
    margin-top:8px;
    color:var(--muted);
    font-size:0.95rem;
    line-height:1.45;
}

.pill{
    display:inline-block;
    padding:6px 12px;
    background:rgba(0,0,0,0.04);
    color:#666;
    border-radius:999px;
    font-size:0.82rem;
    margin-right:8px;
}

/* Buttons */
.btn-open{
    margin-left:auto;
    background:linear-gradient(180deg,#ffd046,#ffbb00);
    padding:10px 18px;
    border-radius:10px;
    border:none;
    font-weight:700;
    color:#222;
    box-shadow:0 6px 14px rgba(255,180,0,0.18);
}

/*RESPONSIVE FIX*/

@media(max-width:990px){
    .sub-grid{
        margin:30px 18px 48px;
        gap:18px;
    }
}

@media(max-width:576px){
    .materi-header{
        padding: 120px 0 100px;
    }
    .materi-title{ font-size:1.8rem; }
    .sub-grid{
        margin:20px 14px 34px;
        grid-template-columns:1fr;
    }
    .icon-wrap{
        width:48px;
        height:48px;
    }
}

/*DARK MODE*/

body.dark-mode{
    background:#0d0e10;
    color:#e6e6e6;
}

body.dark-mode .materi-header{
    background:linear-gradient(135deg,#0f172a,#243245)!important;
}

body.dark-mode .wave svg path{
    fill:#0d0e10!important;
}

body.dark-mode .sub-card{
    background:#141416!important;
    border-color:rgba(255,255,255,0.06)!important;
    box-shadow:0 8px 26px rgba(0,0,0,0.55)!important;
}

body.dark-mode .sub-title{ color:#fff!important; }
body.dark-mode .sub-desc{ color:#cfcfcf!important; }

body.dark-mode .pill{
    background:rgba(255,255,255,0.06);
    color:#e6e6e6;
}

body.dark-mode .btn-open{
    background:var(--accent);
    color:#000;
    box-shadow:0 8px 18px rgba(255,200,0,0.18)!important;
}

/*z-index section content*/
.section-content {
    position: relative;
    z-index: auto !important;
}

/*z-index pada hero*/
.materi-header,
.materi-header * {
    z-index: auto !important;
}

/* Wave paling bawah */
.wave {
    z-index: 0 !important;
}

/* Modal*/
.modal {
    z-index: 99999 !important;
}
.modal-dialog {
    z-index: 100000 !important;
}
.modal-backdrop.show {
    z-index: 99990 !important;
}