:root {
    --hijau: #227a3b;
    --emas: #ffe359;
    --abu: #f6fafd;
    --biru: #0e374d;
}

body {
    margin: 0;
    font-family: 'Roboto', Arial, sans-serif;
    background: var(--abu);
    color: #172933;
}
a { color: inherit; text-decoration: none; }
.container {max-width:1150px;margin:0 auto;padding:0 20px;}

.kajari-header {
    background: var(--biru);
    color: #fff;
    box-shadow: 0 2px 8px #227a3b13;
}
.kajari-header-flex {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 18px 0 9px 0;
}
.kajari-logo {
    width: 68px; min-width:48px; background:#fff; border-radius:9px; padding:6px;
    border:1.4px solid #eaeaea;
}
.kajari-header h1 {margin:0;font-size:1.32em;font-weight:700;}
.kajari-header h2 {margin:0 0 6px 0;font-size:1em;font-weight:400;opacity:.97;}
.kajari-alamat {font-size:.99em; opacity:.81; font-style: italic;}

.kajari-nav {background:var(--emas);}
.kajari-nav ul {
    display:flex; list-style:none; margin:0; padding:0 0 0 2px;
    gap:28px; font-size:1.07em; font-weight:500; justify-content:center;
}
.kajari-nav li a {
    display:block; padding:13px 11px; border-radius:5px; color:var(--biru); transition:background 0.13s;
}
.kajari-nav li a.active, .kajari-nav li a:hover {
    color: var(--hijau);
    background: #fffbe9;
}

.kajari-hero {
    background: linear-gradient(96deg, #eaf9d5 0%, #227a3b 98%);
    min-height: 320px;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 22px #227a3b13;
}
.kajari-hero-flex {
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 31px 0;
}
.kajari-hero-text {
    flex: 1 1 330px; min-width: 210px;
}
.kajari-hero-text h2 {
    font-size: 2em; margin-top: 0; color:#0e374d;
}
.kajari-hero-text p {
    font-size: 1.09em; margin-bottom: 18px; color:#1c5723; line-height:1.5;
}
.kajari-btn {
    background: var(--emas);
    color: #227a3b;
    font-weight: 700;
    padding: 12px 31px;
    border-radius: 21px;
    font-size: 1.06em;
    border: none;
    box-shadow: 0 2px 6px #0001;
    text-decoration: none;
    transition: background 0.15s;
}
.kajari-btn:hover { background: #fff3af; }

.kajari-hero-img img {
    width: 320px;
    max-width: 94vw;
    border-radius: 13px;
    box-shadow: 0 4px 20px #227a3b15;
    background: #fff;
    margin-top: 8px;
}

/* FITUR GRID */
.kajari-fitur-section {
    background: #fff;
    margin-top: 36px;
    padding: 38px 0 25px 0;
    border-radius: 20px;
    box-shadow: 0 4px 24px #227a3b16;
}
.kajari-section-title {
    text-align: center;
    color: #227a3b;
    margin-bottom: 33px;
    font-size: 1.45em;
    letter-spacing: .7px;
    margin-top: 0;
}
.kajari-fitur-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(170px,1fr));
    gap: 28px;
}
.kajari-fitur-item {
    background: #f6fafd;
    border-radius: 16px;
    box-shadow: 0 2px 10px #227a3b0b;
    text-align: center;
    padding: 32px 10px 18px 10px;
    transition: box-shadow 0.13s, background 0.11s, transform 0.12s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 140px;
    border: 1.5px solid #e7f2df;
}
.kajari-fitur-item img {
    width: 54px;
    margin-bottom: 14px;
}
.kajari-fitur-item span {
    font-size: 1.05em;
    font-weight: 600;
    color: #227a3b;
    letter-spacing: .4px;
    margin-top: 5px;
}
.kajari-fitur-item:hover {
    box-shadow: 0 8px 26px #227a3b20;
    background: #eaf9d5;
    transform: translateY(-2px) scale(1.03);
}

/* FOOTER */
.kajari-footer {
    background: #0e374d;
    color: #fff;
    text-align: center;
    padding: 21px 0 11px 0;
    font-size: 1em;
    margin-top: 48px;
    border-top: 5px solid var(--emas);
}
.kajari-footer a { color: #ffe359; text-decoration: underline; }

/* RESPONSIVE */
@media (max-width: 1000px) {
    .kajari-header-flex, .kajari-hero-flex {
        flex-direction: column;
        text-align: center;
        gap: 18px;
    }
    .kajari-hero-img img {
        margin-bottom: 12px;
        margin-top: 0;
    }
}
@media (max-width: 750px) {
    .kajari-fitur-section{padding:16px 0 10px 0;}
    .kajari-fitur-grid {gap: 12px;}
    .kajari-fitur-item {padding:13px 6px 6px 6px;}
    .kajari-footer {padding: 10px 0 4px 0;}
}
@media (max-width: 600px) {
    .kajari-header-flex, .container {padding: 0 7px;}
    .kajari-nav ul {
        flex-direction: column;
        padding: 0;
        gap: 0;
    }
    .kajari-nav li a {
        padding: 11px 7px;
        border-radius: 0;
    }
    .kajari-hero {
        padding: 1px 0;
    }
    .kajari-section-title {font-size:1.07em;}
}
@media (max-width: 400px) {
    .kajari-fitur-item{min-height:unset;}
    .kajari-hero-text h2 {font-size:1.1em;}
}