/*
 * NextGOV / PEMDI portal theme
 * Pairs with resources/views/backend (public) home.blade.php
 * Depends on: Bootstrap 5 CSS, Bootstrap Icons, Google Font "Onest"
 */

:root{
    --ng-bg: #F0F4FF;
    --ng-surface: #FFFFFF;
    --ng-ink: #1E1B4B;
    --ng-ink-soft: #4B4780;
    --ng-muted: #8C88AC;
    --ng-border: rgba(30, 27, 75, .08);
    --ng-grad-start: #14B8A6;
    --ng-grad-end: #6D28D9;
    --ng-accent: #FF7A1A;
    --ng-radius: 20px;
}

*{ font-family: 'Onest', 'Segoe UI', system-ui, sans-serif; }

html{ scroll-behavior: smooth; scroll-padding-top: 76px; }

body{
    background: var(--ng-bg);
    color: var(--ng-ink);
}

em{ font-style: normal; color: var(--ng-accent); }

a{ text-decoration: none; }

/* ---------- Preloader ---------- */
#preloader{
    position: fixed; inset: 0; z-index: 9999;
    background: var(--ng-bg);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .3s ease;
}
.jumper{ display: flex; gap: 8px; }
.jumper div{
    width: 14px; height: 14px; border-radius: 50%;
    background: linear-gradient(135deg, var(--ng-grad-start), var(--ng-grad-end));
    animation: ng-bounce 1s infinite ease-in-out;
}
.jumper div:nth-child(2){ animation-delay: .15s; }
.jumper div:nth-child(3){ animation-delay: .3s; }
@keyframes ng-bounce{ 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

/* ---------- Navbar ---------- */
.ng-nav{
    position: sticky; top: 0; z-index: 1000;
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ng-border);
}
.ng-nav .navbar-brand{ font-weight: 800; color: var(--ng-ink); display: flex; align-items: center; gap: .6rem; }
.ng-nav .nav-link{ color: var(--ng-ink); font-weight: 600; }
.ng-nav .nav-link:hover, .ng-nav .nav-link:focus{ color: var(--ng-grad-end); }
.ng-nav .dropdown-menu{ border-radius: 14px; border: 1px solid var(--ng-border); box-shadow: 0 16px 40px rgba(30, 27, 75, .12); padding: .5rem; }
.ng-nav .dropdown-item{ border-radius: 9px; font-weight: 600; font-size: .88rem; padding: .5rem .75rem; }
.ng-nav .dropdown-item:hover{ background: var(--ng-bg); color: var(--ng-grad-end); }

.ng-btn-pill{
    display: inline-flex; align-items: center; gap: .4rem;
    border-radius: 999px; font-weight: 700; padding: .5rem 1.4rem; font-size: .9rem;
    background: linear-gradient(135deg, var(--ng-grad-start), var(--ng-grad-end));
    color: #fff !important; border: none;
}
.ng-btn-pill:hover{ opacity: .92; color: #fff; }
.ng-btn-pill-outline{
    display: inline-flex; align-items: center; gap: .4rem;
    border-radius: 999px; font-weight: 700; padding: .5rem 1.4rem; font-size: .9rem;
    background: transparent; color: var(--ng-ink); border: 2px solid var(--ng-grad-end);
}
.ng-btn-pill-outline:hover{ background: var(--ng-grad-end); color: #fff; }

/* ---------- Hero ---------- */
.ng-hero{
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, var(--ng-grad-start), var(--ng-grad-end));
    padding: 5rem 0 7rem;
}
.ng-hero::before, .ng-hero::after{
    content: ""; position: absolute; border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}
.ng-hero::before{ width: 320px; height: 320px; top: -120px; left: -100px; }
.ng-hero::after{ width: 260px; height: 260px; bottom: -140px; right: -60px; background: rgba(255, 255, 255, .1); }

.ng-badge-pill{
    display: inline-block; background: rgba(255, 255, 255, .18);
    color: #fff; font-weight: 700; font-size: .85rem;
    padding: .45rem 1rem; border-radius: 999px; margin-bottom: 1.25rem;
    border: 1px solid rgba(255, 255, 255, .3);
}
.ng-hero h1{ color: #fff; font-weight: 900; font-size: clamp(2rem, 4vw, 2.9rem); }
.ng-hero h1 em{ color: #FFE29A; }
.ng-hero p.lead{ color: rgba(255, 255, 255, .9); max-width: 640px; }

.ng-stats{ display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 2rem; }
.ng-stat-chip{
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
    color: #fff; border-radius: 999px; padding: .5rem 1rem; font-weight: 700; font-size: .9rem;
    display: inline-flex; align-items: center; gap: .5rem;
}

.ng-search-wrap{
    background: #fff; border-radius: 999px; padding: .5rem .5rem .5rem 1.25rem;
    display: flex; align-items: center; gap: .5rem; box-shadow: 0 20px 40px rgba(30, 27, 75, .18);
    max-width: 560px;
}
.ng-search-wrap input{ border: none; outline: none; flex: 1; font-size: .95rem; min-width: 0; }
.ng-search-wrap button{
    border: none; border-radius: 999px; padding: .55rem 1.1rem; font-weight: 700;
    background: var(--ng-ink); color: #fff; flex: none;
}
.ng-search-hint{ color: rgba(255, 255, 255, .75); font-size: .8rem; margin-top: .6rem; }

/* ---------- Section headings ---------- */
.ng-section{ padding: 4.5rem 0; }
.ng-section.alt{ background: var(--ng-surface); }
.center-heading{ max-width: 620px; }
.center-heading.mx-auto{ text-align: center; }
.center-heading h2{ font-weight: 800; color: var(--ng-ink); font-size: clamp(1.5rem, 3vw, 2rem); }
.center-heading p{ color: var(--ng-ink-soft); margin-top: .5rem; }

/* ---------- Cards ---------- */
.ng-card{
    background: #fff; border-radius: var(--ng-radius); padding: 1.75rem 1.5rem;
    box-shadow: 0 10px 30px rgba(30, 27, 75, .06); height: 100%;
    border: 1px solid rgba(30, 27, 75, .04);
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex; flex-direction: column;
}
.ng-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 34px rgba(30, 27, 75, .12); }
.ng-card-num{
    width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ng-grad-start), var(--ng-grad-end));
    color: #fff; font-weight: 800; margin-bottom: 1rem; flex: none;
}
.ng-card h4{ font-weight: 700; color: var(--ng-ink); font-size: 1.05rem; }
.ng-card p{ color: var(--ng-ink-soft); font-size: .9rem; }
.ng-card-services{ list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-direction: column; gap: .3rem; }
.ng-card-services li{ font-size: .83rem; color: var(--ng-ink-soft); display: flex; align-items: center; gap: .45rem; }
.ng-card-services li::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ng-grad-end); flex: none; }
.ng-card-count{
    font-size: .74rem; font-weight: 700; color: var(--ng-grad-end); background: rgba(109, 40, 217, .08);
    border-radius: 999px; padding: .2rem .6rem; align-self: flex-start; margin-top: .75rem;
}
.ng-card-link{
    display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .88rem;
    border-radius: 999px; padding: .4rem 1rem; margin-top: auto; padding-top: .75rem;
    color: var(--ng-grad-end);
}
.ng-card-link{ margin-top: .9rem; background: rgba(109, 40, 217, .08); padding: .4rem 1rem; }
.ng-card-link:hover{ background: var(--ng-grad-end); color: #fff; }

/* Siklus Hidup Layanan — life-journey timeline */
.siklus-track{ position: relative; }
.siklus-track::before{
    content: ""; position: absolute; top: 21px; left: 0; right: 0; height: 2px;
    background: repeating-linear-gradient(to right, var(--ng-border) 0 8px, transparent 8px 14px);
    display: none;
}
@media (min-width: 992px){ .siklus-track.has-line::before{ display: block; } }

/* Layanan Khusus — icon variant */
.ng-card-num.icon{ font-size: 1.1rem; }

/* ---------- Tentang / feature grid ---------- */
.feature-item{ display: flex; gap: 1rem; }
.feature-icon{
    width: 46px; height: 46px; border-radius: 14px; flex: none;
    background: rgba(109, 40, 217, .08); color: var(--ng-grad-end);
    display: flex; align-items: center; justify-content: center;
}
.feature-item h4{ font-weight: 700; font-size: 1rem; color: var(--ng-ink); margin-bottom: .25rem; }
.feature-item p{ font-size: .87rem; color: var(--ng-ink-soft); margin: 0; }

/* ---------- Empty state ---------- */
.ng-empty{ color: var(--ng-ink-soft); text-align: center; padding: 2rem 0; width: 100%; }

/* ---------- Footer ---------- */
.ng-footer{
    background: var(--ng-ink); color: rgba(255, 255, 255, .75);
    border-radius: 32px 32px 0 0; padding: 3.5rem 0 1.5rem; margin-top: 2rem;
}
.ng-footer h2{ color: #fff; font-weight: 800; }
.ng-footer h2 em{ color: #FFE29A; }
.ng-footer h5{ color: #fff; font-weight: 700; font-size: .92rem; margin-bottom: 1rem; }
.ng-footer p{ font-size: .88rem; }
.ng-footer .social{ list-style: none; display: flex; gap: .75rem; padding: 0; margin-top: 1rem; }
.ng-footer .social a{
    width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08);
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.ng-footer .social a:hover{ background: linear-gradient(135deg, var(--ng-grad-start), var(--ng-grad-end)); }
.ng-footer .footer-menu{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.ng-footer .footer-menu a{ color: rgba(255, 255, 255, .75); font-size: .87rem; }
.ng-footer .footer-menu a:hover{ color: #fff; }
.ng-footer .contact-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; font-size: .87rem; }
.ng-footer .contact-list li{ display: flex; gap: .6rem; align-items: flex-start; }
.ng-footer .contact-list i{ margin-top: .2rem; color: #FFE29A; }

.visitor-stats{ display: flex; gap: 1.5rem; }
.visitor-stats .stat{ background: rgba(255, 255, 255, .06); border-radius: 14px; padding: .75rem 1.1rem; }
.visitor-stats .stat .num{ font-weight: 800; font-size: 1.3rem; color: #fff; display: block; }
.visitor-stats .stat .lbl{ font-size: .74rem; color: rgba(255, 255, 255, .6); }

.ng-sub-footer{ border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2.5rem; padding-top: 1.25rem; font-size: .82rem; }

/* ---------- Floating action buttons ---------- */
.fab-stack{
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900;
    display: flex; flex-direction: column; gap: .65rem; align-items: flex-end;
}
.fab-btn{
    display: inline-flex; align-items: center; gap: .5rem;
    border: none; border-radius: 999px; padding: .7rem 1rem; font-weight: 700; font-size: .85rem;
    color: #fff; box-shadow: 0 14px 30px rgba(30, 27, 75, .25); cursor: pointer;
}
.fab-btn.fab-a11y{ background: var(--ng-ink); }
.fab-btn.fab-whatsapp{ background: #25D366; }
.fab-btn svg{ width: 18px; height: 18px; flex: none; }

/* Accessibility mode: larger base type, applied to <html> via JS */
html.ng-a11y-large{ font-size: 18px; }
html.ng-a11y-large .ng-hero h1{ font-size: clamp(2.1rem, 4.4vw, 3.2rem); }

/* ---------- Responsive ---------- */
@media (max-width: 767px){
    .ng-hero{ padding: 3.5rem 0 4.5rem; }
    .ng-section{ padding: 3rem 0; }
    .fab-stack{ right: .85rem; bottom: .85rem; }
    .fab-btn span{ display: none; }
    .fab-btn{ padding: .75rem; }
}