* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: #17352f; background: #ffffff; line-height: 1.6; }
a { text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: 92%; max-width: 1200px; margin: auto; }

/* HEADER */
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background: rgba(255,255,255,0.96); backdrop-filter: blur(10px); border-bottom: 1px solid #e7efeb; transition: all .3s ease; }
.header.scrolled { box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.navbar { height: 76px; display: flex; align-items: center; justify-content: space-between; }

/* LOGO */
.logo { display: flex; align-items: center; gap: 11px; color: #075c45; }
.logo-icon { width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; border-radius: 13px; color: white; background: linear-gradient(135deg, #087f5b, #0ba56f); font-size: 22px; box-shadow: 0 8px 18px rgba(8,127,91,.25); }
.logo-text strong { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800; }
.logo-text span { display: block; color: #78918a; font-size: 10px; }

/* MENU */
.nav-menu { display: flex; align-items: center; gap: 27px; }
.nav-menu a { color: #48645d; font-size: 13px; font-weight: 600; transition: color .2s ease; }
.nav-menu a:hover { color: #07835d; }
.nav-button { padding: 11px 18px; color: white !important; border-radius: 10px; background: linear-gradient(135deg, #087f5b, #0aa66e); box-shadow: 0 8px 18px rgba(8,127,91,.20); }

/* HERO */
.hero { min-height: 600px; padding-top: 120px; padding-bottom: 60px; display: flex; align-items: center; background: linear-gradient(135deg, #effaf6 0%, #ffffff 55%, #eaf8f3 100%); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 30px; color: #087453; background: #dff6ed; font-size: 12px; font-weight: 700; margin-bottom: 20px; }
.hero h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(38px, 5vw, 64px); line-height: 1.12; color: #123e35; margin-bottom: 20px; }
.hero h1 span { color: #07865f; }
.hero p { max-width: 570px; color: #647b75; font-size: 16px; margin-bottom: 30px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 13px; }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 21px; border-radius: 11px; color: white; background: linear-gradient(135deg, #087f5b, #0baa70); font-size: 13px; font-weight: 700; box-shadow: 0 10px 24px rgba(8,127,91,.22); }
.btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 21px; border-radius: 11px; color: #086b50; border: 1px solid #cce8dd; background: white; font-size: 13px; font-weight: 700; }

/* QUICK INFO */
.quick-info { margin-top: -30px; position: relative; z-index: 5; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: white; border-radius: 18px; box-shadow: 0 18px 45px rgba(0,0,0,.08); }
.quick-item { padding: 23px; display: flex; align-items: center; gap: 13px; border-right: 1px solid #edf2f0; }
.quick-item:last-child { border-right: none; }
.quick-icon { width: 43px; height: 43px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: #087f5b; background: #e7f8f1; font-size: 19px; }
.quick-item strong { display: block; color: #21483f; font-size: 13px; }
.quick-item span { color: #82948f; font-size: 11px; }

/* SECTION GLOBAL */
.section { padding: 80px 0; }
.section-light { background: #f6faf8; }
.section-heading { max-width: 650px; margin: 0 auto 50px; text-align: center; }
.section-heading .label { color: #07865f; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 9px; }
.section-heading h2 { font-family: 'Plus Jakarta Sans', sans-serif; color: #183e35; font-size: clamp(27px, 4vw, 38px); margin-bottom: 12px; }

/* SERVICES */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.service-card { padding: 28px 22px; border: 1px solid #e5eee9; border-radius: 17px; background: white; transition: all .25s ease; }
.service-card:hover { transform: translateY(-7px); box-shadow: 0 18px 35px rgba(0,0,0,.08); border-color: #c8e8dc; }
.service-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; color: #07835d; background: #e5f7f0; font-size: 24px; margin-bottom: 19px; }
.service-card h3 { color: #21473e; font-size: 16px; margin-bottom: 7px; }
.service-card p { color: #84948f; font-size: 12px; }

/* DOCTOR */
.doctor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.doctor-card { overflow: hidden; border-radius: 18px; background: white; border: 1px solid #e5eee9; }
.doctor-photo { height: 200px; background: linear-gradient(135deg, #d9f4e9, #b4e4d1); display: flex; align-items: center; justify-content: center; color: #087f5b; font-size: 60px; }
.doctor-photo img { width: 100%; height: 100%; object-fit: cover; }
.doctor-info { padding: 19px; }
.doctor-info h3 { color: #21473e; font-size: 15px; }
.doctor-info p { color: #81938d; font-size: 11px; margin-top: 4px; }

/* DOKTER PIKET */
.duty-box { padding: 30px; border-radius: 20px; background: linear-gradient(135deg, #075f47, #0b8c66); color: white; margin-top: 40px; }
.duty-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.duty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.duty-item { padding: 18px; border-radius: 13px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.10); }

/* FACILITY */
.facility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.facility-card { padding: 25px; border-radius: 17px; background: linear-gradient(135deg, #0c7859, #23a078); color: white; }

/* FOOTER */
footer { padding: 50px 0 25px; background: #123e35; color: white; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.copyright { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.45); font-size: 11px; text-align: center; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .hero-grid { grid-template-columns: 1fr; }
    .quick-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
}

    /* =====================================================
       GLOBAL
    ====================================================== */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html {
        scroll-behavior: smooth;
    }
    body {
        font-family: 'Inter', sans-serif;
        color: #17352f;
        background: #ffffff;
        line-height: 1.6;
    }
    a {
        text-decoration: none;
    }
    img {
        max-width: 100%;
        display: block;
    }
    .container {
        width: 92%;
        max-width: 1200px;
        margin: auto;
    }
    /* =====================================================
       HEADER
    ====================================================== */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        background: rgba(255,255,255,0.96);
        backdrop-filter: blur(10px);
        border-bottom:
            1px solid #e7efeb;
        transition:
            all .3s ease;
    }
    .header.scrolled {
        box-shadow:
            0 8px 30px rgba(0,0,0,.08);
    }
    .navbar {
        height: 76px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* =====================================================
       LOGO
    ====================================================== */
    .logo {
        display: flex;
        align-items: center;
        gap: 11px;
        color: #075c45;
    }
    .logo-icon {
        width: 43px;
        height: 43px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        color: white;
        background:
            linear-gradient(
                135deg,
                #087f5b,
                #0ba56f
            );
        font-size: 22px;
        box-shadow:
            0 8px 18px
            rgba(8,127,91,.25);
    }
    .logo-text strong {
        display: block;
        font-family:
            'Plus Jakarta Sans',
            sans-serif;
        font-size: 16px;
        font-weight: 800;
    }
    .logo-text span {
        display: block;
        color: #78918a;
        font-size: 10px;
    }
    /* =====================================================
       MENU
    ====================================================== */
    .nav-menu {
        display: flex;
        align-items: center;
        gap: 27px;
    }
    .nav-menu a {
        color: #48645d;
        font-size: 13px;
        font-weight: 600;
        transition:
            color .2s ease;
    }
    .nav-menu a:hover {
        color: #07835d;
    }
    .nav-button {
        padding:
            11px 18px;
        color: white !important;
        border-radius: 10px;
        background:
            linear-gradient(
                135deg,
                #087f5b,
                #0aa66e
            );
        box-shadow:
            0 8px 18px
            rgba(8,127,91,.20);
    }
    /* =====================================================
       MOBILE BUTTON
    ====================================================== */
    .mobile-button {
        display: none;
        border: none;
        background: none;
        font-size: 27px;
        color: #075c45;
        cursor: pointer;
    }
    /* =====================================================
       HERO
    ====================================================== */
    .hero {
        min-height: 720px;
        padding-top: 76px;
        display: flex;
        align-items: center;
        background:
            linear-gradient(
                135deg,
                #effaf6 0%,
                #ffffff 55%,
                #eaf8f3 100%
            );
        overflow: hidden;
    }
    .hero-grid {
        display: grid;
        grid-template-columns:
            1.05fr .95fr;
        gap: 70px;
        align-items: center;
    }
    .hero-content {
        animation:
            fadeUp .8s ease;
    }
    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding:
            8px 14px;
        border-radius: 30px;
        color: #087453;
        background: #dff6ed;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    .hero h1 {
        font-family:
            'Plus Jakarta Sans',
            sans-serif;
        font-size:
            clamp(
                38px,
                5vw,
                64px
            );
        line-height: 1.12;
        color: #123e35;
        margin-bottom: 20px;
    }
    .hero h1 span {
        color: #07865f;
    }
    .hero p {
        max-width: 570px;
        color: #647b75;
        font-size: 16px;
        margin-bottom: 30px;
    }
    .hero-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 13px;
    }
    .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding:
            14px 21px;
        border-radius: 11px;
        color: white;
        background:
            linear-gradient(
                135deg,
                #087f5b,
                #0baa70
            );
        font-size: 13px;
        font-weight: 700;
        box-shadow:
            0 10px 24px
            rgba(8,127,91,.22);
        transition:
            transform .2s ease;
    }
    .btn-primary:hover {
        color: white;
        transform:
            translateY(-2px);
    }
    .btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding:
            14px 21px;
        border-radius: 11px;
        color: #086b50;
        border:
            1px solid #cce8dd;
        background: white;
        font-size: 13px;
        font-weight: 700;
    }
    /* =====================================================
       HERO IMAGE
    ====================================================== */
    .hero-image {
        position: relative;
    }
    .hero-image-main {
        height: 460px;
        border-radius: 35px;
        overflow: hidden;
        background:
            linear-gradient(
                135deg,
                #0b7d5c,
                #74d5ae
            );
        box-shadow:
            0 30px 60px
            rgba(18,72,58,.18);
    }
    .hero-image-main img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .hero-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: white;
        font-size: 60px;
    }
    .hero-placeholder span {
        margin-top: 15px;
        font-size: 15px;
        font-weight: 600;
    }
    .hero-card {
        position: absolute;
        left: -30px;
        bottom: 30px;
        padding:
            17px 20px;
        border-radius: 15px;
        background: white;
        box-shadow:
            0 18px 40px
            rgba(0,0,0,.12);
        display: flex;
        align-items: center;
        gap: 13px;
    }
    .hero-card-icon {
        width: 42px;
        height: 42px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #087f5b;
        background: #e4f7ef;
    }
    .hero-card strong {
        display: block;
        color: #163f35;
        font-size: 14px;
    }
    .hero-card small {
        color: #78918a;
        font-size: 11px;
    }
    /* =====================================================
       QUICK INFO
    ====================================================== */
    .quick-info {
        margin-top: -45px;
        position: relative;
        z-index: 5;
    }
    .quick-grid {
        display: grid;
        grid-template-columns:
            repeat(4, 1fr);
        background: white;
        border-radius: 18px;
        box-shadow:
            0 18px 45px
            rgba(0,0,0,.08);
        overflow: hidden;
    }
    .quick-item {
        padding: 23px;
        display: flex;
        align-items: center;
        gap: 13px;
        border-right:
            1px solid #edf2f0;
    }
    .quick-item:last-child {
        border-right: none;
    }
    .quick-icon {
        width: 43px;
        height: 43px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        color: #087f5b;
        background: #e7f8f1;
        font-size: 19px;
    }
    .quick-item strong {
        display: block;
        color: #21483f;
        font-size: 13px;
    }
    .quick-item span {
        color: #82948f;
        font-size: 11px;
    }
    /* =====================================================
       SECTION
    ====================================================== */
    .section {
        padding: 100px 0;
    }
    .section-light {
        background: #f6faf8;
    }
    .section-heading {
        max-width: 650px;
        margin:
            0 auto 50px;
        text-align: center;
    }
    .section-heading .label {
        color: #07865f;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-bottom: 9px;
    }
    .section-heading h2 {
        font-family:
            'Plus Jakarta Sans',
            sans-serif;
        color: #183e35;
        font-size:
            clamp(
                27px,
                4vw,
                38px
            );
        margin-bottom: 12px;
    }
    .section-heading p {
        color: #728680;
        font-size: 14px;
    }
    /* =====================================================
       ABOUT
    ====================================================== */
    .about-grid {
        display: grid;
        grid-template-columns:
            .9fr 1.1fr;
        gap: 70px;
        align-items: center;
    }
    .about-image {
        height: 420px;
        border-radius: 25px;
        overflow: hidden;
        background:
            linear-gradient(
                135deg,
                #0b7d5c,
                #8dd9ba
            );
    }
    .about-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 60px;
    }
    .about-content h2 {
        font-family:
            'Plus Jakarta Sans',
            sans-serif;
        font-size: 36px;
        color: #173f35;
        margin-bottom: 18px;
    }
    .about-content p {
        color: #70847f;
        font-size: 14px;
        margin-bottom: 18px;
    }
    .check-list {
        list-style: none;
        margin-top: 25px;
    }
    .check-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        color: #46645c;
        font-size: 13px;
    }
    .check-list i {
        color: #079064;
        font-size: 17px;
    }
    /* =====================================================
       SERVICES
    ====================================================== */
    .service-grid {
        display: grid;
        grid-template-columns:
            repeat(4, 1fr);
        gap: 18px;
    }
    .service-card {
        padding: 28px 22px;
        border:
            1px solid #e5eee9;
        border-radius: 17px;
        background: white;
        transition:
            all .25s ease;
    }
    .service-card:hover {
        transform:
            translateY(-7px);
        box-shadow:
            0 18px 35px
            rgba(0,0,0,.08);
        border-color:
            #c8e8dc;
    }
    .service-icon {
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #07835d;
        background: #e5f7f0;
        font-size: 24px;
        margin-bottom: 19px;
    }
    .service-card h3 {
        color: #21473e;
        font-size: 16px;
        margin-bottom: 7px;
    }
    .service-card p {
        color: #84948f;
        font-size: 12px;
    }
    /* =====================================================
       DOCTOR
    ====================================================== */
    .doctor-grid {
        display: grid;
        grid-template-columns:
            repeat(4, 1fr);
        gap: 20px;
    }
    .doctor-card {
        overflow: hidden;
        border-radius: 18px;
        background: white;
        border:
            1px solid #e5eee9;
        transition:
            all .25s ease;
    }
    .doctor-card:hover {
        transform:
            translateY(-5px);
        box-shadow:
            0 18px 35px
            rgba(0,0,0,.08);
    }
    .doctor-photo {
        height: 230px;
        background:
            linear-gradient(
                135deg,
                #d9f4e9,
                #b4e4d1
            );
        display: flex;
        align-items: center;
        justify-content: center;
        color: #087f5b;
        font-size: 70px;
    }
    .doctor-info {
        padding: 19px;
    }
    .doctor-info h3 {
        color: #21473e;
        font-size: 15px;
    }
    .doctor-info p {
        color: #81938d;
        font-size: 11px;
        margin-top: 4px;
    }
    .doctor-badge {
        display: inline-block;
        margin-top: 12px;
        padding:
            5px 9px;
        border-radius: 20px;
        color: #087453;
        background: #e5f7ef;
        font-size: 10px;
        font-weight: 700;
    }
    /* =====================================================
       DOKTER PIKET
    ====================================================== */
    .duty-box {
        padding: 30px;
        border-radius: 20px;
        background:
            linear-gradient(
                135deg,
                #075f47,
                #0b8c66
            );
        color: white;
        box-shadow:
            0 20px 40px
            rgba(6,96,71,.20);
    }
    .duty-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }
    .duty-header h3 {
        font-family:
            'Plus Jakarta Sans',
            sans-serif;
        font-size: 22px;
    }
    .online-badge {
        display: flex;
        align-items: center;
        gap: 6px;
        padding:
            6px 10px;
        border-radius: 20px;
        background:
            rgba(255,255,255,.13);
        font-size: 10px;
    }
    .online-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #66efb3;
    }
    .duty-grid {
        display: grid;
        grid-template-columns:
            repeat(3, 1fr);
        gap: 15px;
    }
    .duty-item {
        padding: 18px;
        border-radius: 13px;
        background:
            rgba(255,255,255,.10);
        border:
            1px solid
            rgba(255,255,255,.10);
    }
    .duty-item strong {
        display: block;
        font-size: 14px;
        margin-bottom: 4px;
    }
    .duty-item span {
        display: block;
        color:
            rgba(255,255,255,.72);
        font-size: 11px;
    }
    /* =====================================================
       FACILITY
    ====================================================== */
    .facility-grid {
        display: grid;
        grid-template-columns:
            repeat(4, 1fr);
        gap: 15px;
    }
    .facility-card {
        height: 210px;
        position: relative;
        overflow: hidden;
        border-radius: 17px;
        background:
            linear-gradient(
                135deg,
                #0c7859,
                #82d8b8
            );
    }
    .facility-content {
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 17px;
        color: white;
    }
    .facility-content h3 {
        font-size: 14px;
        margin-bottom: 2px;
    }
    .facility-content span {
        font-size: 10px;
        opacity: .85;
    }
    /* =====================================================
       BPJS
    ====================================================== */
    .bpjs-section {
        background:
            linear-gradient(
                135deg,
                #eef9f5,
                #f8fcfa
            );
    }
    .bpjs-box {
        display: grid;
        grid-template-columns:
            1fr 1fr;
        gap: 50px;
        align-items: center;
    }
    .bpjs-content h2 {
        font-family:
            'Plus Jakarta Sans',
            sans-serif;
        font-size: 35px;
        color: #173e35;
        margin-bottom: 15px;
    }
    .bpjs-content p {
        color: #728680;
        font-size: 14px;
        margin-bottom: 20px;
    }
    .bpjs-list {
        display: grid;
        grid-template-columns:
            1fr 1fr;
        gap: 10px;
        margin-bottom: 25px;
    }
    .bpjs-list div {
        padding: 12px;
        border-radius: 10px;
        background: white;
        color: #47635b;
        font-size: 11px;
    }
    .bpjs-card {
        min-height: 280px;
        padding: 30px;
        border-radius: 25px;
        color: white;
        background:
            linear-gradient(
                135deg,
                #087f5b,
                #12a978
            );
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        box-shadow:
            0 20px 40px
            rgba(8,127,91,.20);
    }
    .bpjs-card i {
        font-size: 65px;
        margin-bottom: 15px;
    }
    .bpjs-card h3 {
        font-size: 21px;
    }
    .bpjs-card p {
        color:
            rgba(255,255,255,.78);
        font-size: 12px;
    }
    /* =====================================================
       REGISTRATION
    ====================================================== */
    .registration {
        padding: 90px 0;
        background:
            linear-gradient(
                135deg,
                #075f47,
                #0b8f68
            );
    }
    .registration-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
    }
    .registration-box h2 {
        color: white;
        font-family:
            'Plus Jakarta Sans',
            sans-serif;
        font-size: 34px;
    }
    .registration-box p {
        color:
            rgba(255,255,255,.75);
        margin-top: 8px;
        font-size: 13px;
    }
    .registration-button {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding:
            15px 23px;
        border-radius: 11px;
        color: #086a50;
        background: white;
        font-size: 13px;
        font-weight: 800;
        white-space: nowrap;
    }
    /* =====================================================
       CONTACT
    ====================================================== */
    .contact-grid {
        display: grid;
        grid-template-columns:
            .8fr 1.2fr;
        gap: 30px;
    }
    .contact-card {
        padding: 30px;
        border-radius: 18px;
        background: #f6faf8;
        border:
            1px solid #e4eee9;
    }
    .contact-item {
        display: flex;
        gap: 13px;
        margin-bottom: 22px;
    }
    .contact-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #087f5b;
        background: #e2f5ed;
    }
    .contact-item strong {
        display: block;
        color: #21483e;
        font-size: 12px;
    }
    .contact-item span {
        color: #81928d;
        font-size: 11px;
    }
    .map {
        min-height: 360px;
        border-radius: 20px;
        overflow: hidden;
        background:
            linear-gradient(
                135deg,
                #dff1ea,
                #c4e5d8
            );
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #087f5b;
    }
    .map i {
        font-size: 55px;
        margin-bottom: 10px;
    }
    /* =====================================================
       FOOTER
    ====================================================== */
    footer {
        padding:
            50px 0 25px;
        background: #123e35;
        color: white;
    }
    .footer-grid {
        display: grid;
        grid-template-columns:
            1.4fr 1fr 1fr 1fr;
        gap: 40px;
        padding-bottom: 40px;
    }
    .footer-brand p {
        color:
            rgba(255,255,255,.62);
        font-size: 12px;
        margin-top: 13px;
        max-width: 320px;
    }
    footer h4 {
        font-size: 13px;
        margin-bottom: 15px;
    }
    footer ul {
        list-style: none;
    }
    footer li {
        margin-bottom: 8px;
    }
    footer li a {
        color:
            rgba(255,255,255,.62);
        font-size: 11px;
    }
    footer li a:hover {
        color: white;
    }
    .copyright {
        padding-top: 20px;
        border-top:
            1px solid
            rgba(255,255,255,.10);
        color:
            rgba(255,255,255,.45);
        font-size: 10px;
        text-align: center;
    }
    /* =====================================================
       FLOATING BUTTON
    ====================================================== */
    .floating-registration {
        position: fixed;
        right: 22px;
        bottom: 22px;
        z-index: 900;
        width: 55px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: white;
        background:
            linear-gradient(
                135deg,
                #087f5b,
                #0aa970
            );
        box-shadow:
            0 10px 25px
            rgba(0,0,0,.20);
        font-size: 22px;
        transition:
            transform .2s ease;
    }
    .floating-registration:hover {
        color: white;
        transform:
            scale(1.08);
    }
    /* =====================================================
       ANIMATION
    ====================================================== */
    .reveal {
        opacity: 0;
        transform:
            translateY(25px);
        transition:
            all .7s ease;
    }
    .reveal.show {
        opacity: 1;
        transform:
            translateY(0);
    }
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform:
                translateY(25px);
        }
        to {
            opacity: 1;
            transform:
                translateY(0);
        }
    }
    /* =====================================================
       TABLET
    ====================================================== */
    @media (
        max-width: 1000px
    ) {
        .nav-menu {
            gap: 15px;
        }
        .hero-grid {
            gap: 35px;
        }
        .service-grid,
        .doctor-grid {
            grid-template-columns:
                repeat(2, 1fr);
        }
        .facility-grid {
            grid-template-columns:
                repeat(2, 1fr);
        }
        .footer-grid {
            grid-template-columns:
                repeat(2, 1fr);
        }
    }
    /* =====================================================
       MOBILE
    ====================================================== */
    @media (
        max-width: 768px
    ) {
        .container {
            width: 90%;
        }
        .navbar {
            height: 68px;
        }
        .mobile-button {
            display: block;
        }
        .nav-menu {
            position: absolute;
            top: 68px;
            left: 0;
            width: 100%;
            display: none;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            padding: 10px 5% 18px;
            background: white;
            box-shadow:
                0 15px 25px
                rgba(0,0,0,.08);
        }
        .nav-menu.show {
            display: flex;
        }
        .nav-menu a {
            padding: 12px 5px;
        }
        .nav-button {
            text-align: center;
        }
        .hero {
            min-height: auto;
            padding-top: 120px;
            padding-bottom: 70px;
        }
        .hero-grid {
            grid-template-columns: 1fr;
            gap: 40px;
        }
        .hero h1 {
            font-size: 39px;
        }
        .hero-image-main {
            height: 330px;
            border-radius: 25px;
        }
        .hero-card {
            left: 15px;
            bottom: 20px;
        }
        .quick-info {
            margin-top: 0;
            padding:
                25px 0;
        }
        .quick-grid {
            grid-template-columns:
                1fr 1fr;
        }
        .quick-item {
            border-bottom:
                1px solid #edf2f0;
        }
        .quick-item:nth-child(2) {
            border-right: none;
        }
        .about-grid,
        .bpjs-box,
        .contact-grid {
            grid-template-columns: 1fr;
            gap: 35px;
        }
        .about-image {
            height: 300px;
        }
        .service-grid,
        .doctor-grid {
            grid-template-columns: 1fr;
        }
        .facility-grid {
            grid-template-columns:
                1fr 1fr;
        }
        .duty-grid {
            grid-template-columns: 1fr;
        }
        .registration-box {
            flex-direction: column;
            align-items: flex-start;
        }
        .registration-button {
            width: 100%;
            justify-content: center;
        }
        .footer-grid {
            grid-template-columns: 1fr;
        }
        .section {
            padding: 70px 0;
        }
    }
    /* =====================================================
       SMALL PHONE
    ====================================================== */
    @media (
        max-width: 480px
    ) {
        .quick-grid {
            grid-template-columns: 1fr;
        }
        .quick-item {
            border-right: none;
        }
        .facility-grid {
            grid-template-columns: 1fr;
        }
        .bpjs-list {
            grid-template-columns: 1fr;
        }
        .hero-buttons {
            flex-direction: column;
        }
        .btn-primary,
        .btn-secondary {
            justify-content: center;
        }
    }