@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
    --kk-teal:#27b1af;
    --kk-teal-deep:#138d95;
    --kk-sky:#69c3dd;
    --kk-sky-soft:#dff7ff;
    --kk-lime:#dbe800;
    --kk-orange:#e59a2b;
    --kk-orange-deep:#c97812;
    --kk-ink:#102a43;
    --kk-ink-soft:#486581;
    --kk-surface:#f7fcff;
    --kk-line:rgba(39, 177, 175, 0.16);
    --kk-shadow:0 24px 60px rgba(16, 42, 67, 0.14);
}

body.kemenkes-landing,
body.kemenkes-form,
body.kemenkes-status,
body.kemenkes-login{
    font-family:'Plus Jakarta Sans', 'Segoe UI', sans-serif !important;
    color:var(--kk-ink);
}

body.kemenkes-landing{
    background:
        radial-gradient(circle at top left, rgba(105, 195, 221, 0.18), transparent 28%),
        radial-gradient(circle at bottom right, rgba(219, 232, 0, 0.16), transparent 26%),
        linear-gradient(180deg, #f9feff 0%, #f4fbfb 100%);
}

body.kemenkes-landing .navbar{
    background:rgba(255,255,255,0.72) !important;
    border-bottom:1px solid rgba(105, 195, 221, 0.28);
    box-shadow:0 16px 34px rgba(16, 42, 67, 0.08);
}

body.kemenkes-landing .navbar-brand{
    font-family:'Outfit', 'Plus Jakarta Sans', sans-serif;
    font-size:1.15rem;
    color:var(--kk-teal-deep) !important;
}

body.kemenkes-landing .hero{
    background:
        radial-gradient(circle at 15% 18%, rgba(39, 177, 175, 0.20), transparent 23%),
        radial-gradient(circle at 82% 20%, rgba(105, 195, 221, 0.22), transparent 24%),
        radial-gradient(circle at 72% 82%, rgba(229, 154, 43, 0.14), transparent 18%),
        linear-gradient(135deg, #f8ffff 0%, #eefbfc 45%, #fdfdf3 100%) !important;
    position:relative;
}

body.kemenkes-landing .hero::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(19, 141, 149, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(19, 141, 149, 0.05) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,0.35), transparent 85%);
    pointer-events:none;
}

body.kemenkes-landing .hero-badge,
body.kemenkes-landing .section-title span{
    background:rgba(105, 195, 221, 0.14) !important;
    color:var(--kk-teal-deep) !important;
    border:1px solid rgba(39, 177, 175, 0.22) !important;
    box-shadow:0 10px 20px rgba(105, 195, 221, 0.10);
}

body.kemenkes-landing .hero h1,
body.kemenkes-landing .section-title h2{
    font-family:'Outfit', 'Plus Jakarta Sans', sans-serif;
    letter-spacing:-0.03em;
    color:var(--kk-ink) !important;
}

body.kemenkes-landing .hero p.lead,
body.kemenkes-landing .section-title p,
body.kemenkes-landing .feature-card p,
body.kemenkes-landing .step-card p,
body.kemenkes-landing .service-card p{
    color:var(--kk-ink-soft) !important;
}

body.kemenkes-landing .hero-card,
body.kemenkes-landing .feature-card,
body.kemenkes-landing .step-card,
body.kemenkes-landing .service-card,
body.kemenkes-landing .mini-card{
    background:rgba(255,255,255,0.78) !important;
    border:1px solid rgba(105, 195, 221, 0.22) !important;
    box-shadow:var(--kk-shadow) !important;
    backdrop-filter:blur(12px);
}

body.kemenkes-landing .feature-card:hover,
body.kemenkes-landing .step-card:hover,
body.kemenkes-landing .service-card:hover,
body.kemenkes-landing .hero-card:hover{
    transform:translateY(-6px);
    box-shadow:0 30px 60px rgba(19, 141, 149, 0.16) !important;
}

body.kemenkes-landing .hero-stat,
body.kemenkes-landing .step-number{
    background:linear-gradient(135deg, var(--kk-teal-deep), var(--kk-sky)) !important;
}

body.kemenkes-landing .icon-box{
    background:linear-gradient(135deg, rgba(39, 177, 175, 0.16), rgba(105, 195, 221, 0.20)) !important;
    color:var(--kk-teal-deep) !important;
    box-shadow:inset 0 0 0 1px rgba(39, 177, 175, 0.14);
}

body.kemenkes-landing .btn-primary,
body.kemenkes-form .btn-primary,
body.kemenkes-status .btn-primary,
body.kemenkes-login .btn-primary{
    border:none !important;
    background:linear-gradient(135deg, var(--kk-teal-deep), var(--kk-sky)) !important;
    box-shadow:0 16px 28px rgba(19, 141, 149, 0.22);
}

body.kemenkes-landing .btn-outline-primary,
body.kemenkes-form .btn-outline-secondary,
body.kemenkes-status .btn-outline-secondary,
body.kemenkes-login .btn-outline-secondary{
    border-color:rgba(39, 177, 175, 0.30) !important;
    color:var(--kk-teal-deep) !important;
}

body.kemenkes-landing .cta{
    background:
        radial-gradient(circle at top right, rgba(219, 232, 0, 0.18), transparent 25%),
        linear-gradient(135deg, var(--kk-teal-deep), #1f9ca9 55%, var(--kk-orange)) !important;
    box-shadow:0 26px 50px rgba(19, 141, 149, 0.26) !important;
}

body.kemenkes-landing .footer{
    background:
        linear-gradient(135deg, #0b3340 0%, #10485a 55%, #176678 100%) !important;
}

body.kemenkes-form,
body.kemenkes-status{
    background:
        radial-gradient(circle at top left, rgba(105, 195, 221, 0.16), transparent 28%),
        radial-gradient(circle at bottom right, rgba(229, 154, 43, 0.12), transparent 22%),
        linear-gradient(180deg, #f5fdff 0%, #eef8fa 100%) !important;
}

body.kemenkes-form .header-box,
body.kemenkes-status .header-box{
    background:
        radial-gradient(circle at top right, rgba(219, 232, 0, 0.18), transparent 24%),
        linear-gradient(135deg, #118e98 0%, #3eb7c0 56%, #70c6db 100%) !important;
    border:1px solid rgba(255,255,255,0.24);
    box-shadow:0 28px 60px rgba(19, 141, 149, 0.20) !important;
    position:relative;
    overflow:hidden;
}

body.kemenkes-form .header-box::after,
body.kemenkes-status .header-box::after{
    content:"";
    position:absolute;
    inset:auto -40px -50px auto;
    width:180px;
    height:180px;
    background:radial-gradient(circle, rgba(229, 154, 43, 0.28), transparent 68%);
    pointer-events:none;
}

body.kemenkes-form .card-form,
body.kemenkes-status .card-box,
body.kemenkes-status .search-box{
    background:rgba(255,255,255,0.84) !important;
    border:1px solid var(--kk-line) !important;
    box-shadow:var(--kk-shadow) !important;
    backdrop-filter:blur(12px);
}

body.kemenkes-form .section-title,
body.kemenkes-status .section-title{
    color:var(--kk-teal-deep) !important;
    border-bottom-color:rgba(105, 195, 221, 0.30) !important;
}

body.kemenkes-form .form-control,
body.kemenkes-form .form-select,
body.kemenkes-status .form-control,
body.kemenkes-status .form-select,
body.kemenkes-login .form-control{
    border-radius:16px;
    border:1px solid rgba(105, 195, 221, 0.34);
    padding:0.85rem 1rem;
    box-shadow:none;
}

body.kemenkes-form .form-control:focus,
body.kemenkes-form .form-select:focus,
body.kemenkes-status .form-control:focus,
body.kemenkes-status .form-select:focus,
body.kemenkes-login .form-control:focus{
    border-color:var(--kk-teal);
    box-shadow:0 0 0 0.28rem rgba(39, 177, 175, 0.12);
}

body.kemenkes-form .captcha-box,
body.kemenkes-login .captcha-box{
    background:linear-gradient(135deg, rgba(105, 195, 221, 0.08), rgba(219, 232, 0, 0.08)) !important;
    border:1px dashed rgba(19, 141, 149, 0.44) !important;
}

body.kemenkes-form .captcha-question,
body.kemenkes-login .captcha-question{
    color:var(--kk-teal-deep) !important;
}

body.kemenkes-form .ticket-box,
body.kemenkes-status .status-banner{
    background:linear-gradient(135deg, rgba(219, 232, 0, 0.16), rgba(229, 154, 43, 0.10)) !important;
    border:1px solid rgba(229, 154, 43, 0.24);
    color:var(--kk-ink);
}

body.kemenkes-status .info-chip{
    background:rgba(39, 177, 175, 0.12) !important;
    color:var(--kk-teal-deep) !important;
}

body.kemenkes-status .table th,
body.kemenkes-form .table th{
    background:#f4fcff !important;
}

body.kemenkes-login{
    background:
        radial-gradient(circle at top left, rgba(105, 195, 221, 0.24), transparent 26%),
        radial-gradient(circle at bottom right, rgba(229, 154, 43, 0.16), transparent 24%),
        linear-gradient(135deg, #082f3c 0%, #0e5160 55%, #13707b 100%) !important;
}

body.kemenkes-login .login-card{
    background:rgba(255,255,255,0.18);
    border:1px solid rgba(255,255,255,0.22);
    box-shadow:0 30px 60px rgba(0,0,0,0.22) !important;
    backdrop-filter:blur(20px);
}

body.kemenkes-login .login-header,
body.kemenkes-login .login-body{
    background:rgba(255,255,255,0.88) !important;
}

body.kemenkes-login .login-header h2{
    font-family:'Outfit', 'Plus Jakarta Sans', sans-serif;
    color:var(--kk-teal-deep) !important;
}

body.kemenkes-login .brand-badge{
    background:rgba(105, 195, 221, 0.16) !important;
    color:var(--kk-teal-deep) !important;
    border:1px solid rgba(39, 177, 175, 0.24);
}

body.kemenkes-login .btn-home{
    border-color:rgba(39, 177, 175, 0.28) !important;
    color:var(--kk-teal-deep) !important;
}

@media (max-width:768px){
    body.kemenkes-landing .hero h1{
        font-size:2.4rem !important;
    }
}