:root {
    --biru: #2595cb;
    --emas: #ffe070;
    --abu: #f7fafd;
    --ungu: #3d2974;
}

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

.dukcapil-header {
    background: var(--biru);
    color: #fff;
    box-shadow: 0 2px 8px #2595cb28;
}
.dukcapil-header-flex {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 18px 0 15px 0;
}
.dukcapil-logo {
    width: 68px; min-width:48px; background:#fff; border-radius:8px; padding:4px;
    border:1.4px solid #eaeaea;
}
.dukcapil-header h1 {margin:0;font-size:1.43em;font-weight:700;letter-spacing:.1px;}
.dukcapil-header h2 {margin:0 0 5px 0;font-size:1em;font-weight:400;opacity:.95;}
.dukcapil-alamat {font-size:.98em;opacity:.81;font-style: italic;}

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

.dukcapil-hero {
    background: linear-gradient(96deg, #e3f4fc 0%, #2595cb 98%);
    min-height: 320px;
    display: flex;
    align-items: center;
    color: #233d58;
    box-shadow: 0 8px 22px #2595cb10;
}
.dukcapil-hero-flex {
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 32px 0;
}
.dukcapil-hero-text {
    flex: 1 1 320px; min-width: 220px;
}
.dukcapil-hero-text h2 {
    font-size: 2em; margin-top: 0; margin-bottom:11px;color:#2595cb;
}
.dukcapil-hero-text p {
    font-size: 1.13em; margin-bottom: 18px; color:#39396d; line-height:1.5;
}
.dukcapil-btn {
    background: var(--emas);
    color: #21314d;
    font-weight: 700;
    padding: 12px 32px;
    border-radius: 22px;
    font-size: 1.09em;
    border: none;
    box-shadow: 0 2px 9px #0001;
    text-decoration: none;
    transition: background 0.15s;
}
.dukcapil-btn:hover { background: #fffbe6; }

.dukcapil-hero-img img {
    width: 310px;
    max-width: 92vw;
    border-radius: 11px;
    box-shadow: 0 4px 20px #2595cb11;
    background: #fff;
    margin-top: 10px;
}

/* FITUR GRID */
.dukcapil-fitur-section {
    background: #fff;
    margin-top: 36px;
    padding: 38px 0 25px 0;
    border-radius: 20px;
    box-shadow: 0 4px 22px #2595cb14;
}
.dukcapil-section-title {
    text-align: center;
    color: #2595cb;
    margin-bottom: 33px;
    font-size: 1.43em;
    letter-spacing: .7px;
    margin-top: 0;
}
.dukcapil-fitur-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(170px,1fr));
    gap: 30px;
}
.dukcapil-fitur-item {
    background: #f3f7fd;
    border-radius: 16px;
    box-shadow: 0 2px 8px #2595cb10;
    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 #d8e6ff;
}
.dukcapil-fitur-item img {
    width: 54px;
    margin-bottom: 12px;
}
.dukcapil-fitur-item span {
    font-size: 1.09em;
    font-weight: 600;
    color: #2595cb;
    letter-spacing: .4px;
    margin-top: 5px;
}
.dukcapil-fitur-item:hover {
    box-shadow: 0 8px 24px #2595cb20;
    background: #e3f4fc;
    transform: translateY(-3px) scale(1.03);
}

/* FOOTER */
.dukcapil-footer {
    background: #2595cb;
    color: #fff;
    text-align: center;
    padding: 18px 0 11px 0;
    font-size: 1em;
    margin-top: 36px;
    border-top: 5px solid var(--emas);
}
.dukcapil-footer a { color: #ffe070; text-decoration: underline; }

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