/* Site shell: token, header, bottom nav, footer. Dimuat di semua halaman publik. */
:root {
    --gm-blue: #0b6bcb;
    --gm-blue-600: #0958a8;
    --gm-blue-50: #eef5fd;
    --gm-ink: #0f172a;
    --gm-slate-700: #334155;
    --gm-slate-600: #475569;
    --gm-slate-200: #e2e8f0;
    --gm-slate-100: #f1f5f9;
    --gm-slate-50: #f8fafc;
    --gm-radius: 14px;
    --gm-radius-sm: 10px;
    --gm-shadow: 0 1px 2px rgb(15 23 42 / .06), 0 4px 12px rgb(15 23 42 / .06);
    --gm-bottom-nav-h: 64px;
    --gm-z-bottom-nav: 1040;
    --gm-z-floating: 1030;
}

body {
    font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--gm-slate-600);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--gm-ink);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

:focus-visible {
    outline: 3px solid rgb(11 107 203 / .45);
    outline-offset: 2px;
}

/* ---------- Header ---------- */
.site-header { background: transparent; }

#main-navbar.transparent.navbar-dark { background-color: rgb(15 23 42 / .55); }
#main-navbar.navbar-light,
.navbar-clone.navbar-light {
    background-color: rgb(255 255 255 / .97) !important;
    box-shadow: 0 1px 0 var(--gm-slate-200);
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.2;
    color: #fff;
}
.site-brand img { width: 36px; height: 36px; object-fit: contain; }
.navbar-light .site-brand,
.navbar-light .site-brand:hover { color: var(--gm-ink); }
.offcanvas-nav .site-brand { color: #fff; }

@media (max-width: 991.98px) {
    #main-navbar .container { min-height: 60px; }
    .navbar-dark .hamburger { color: #fff; }
}

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--gm-z-bottom-nav);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: calc(var(--gm-bottom-nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    border-top: 1px solid var(--gm-slate-200);
    box-shadow: 0 -4px 12px rgb(15 23 42 / .05);
}

.bottom-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 6px 2px;
    border: 0;
    background: none;
    color: var(--gm-slate-600);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item span {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(.62rem, 2.8vw, .72rem);
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Kapsul ikon; saat aktif terisi air bergelombang */
.bottom-nav-item i {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 52px;
    height: 30px;
    overflow: hidden;
    font-size: 1.35rem;
    line-height: 1;
    border-radius: 999px;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.bottom-nav-item i::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto;
    z-index: -1;
    height: 140%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4Q13 0 26 4T52 4V8H0Z' fill='%23bfdbfe'/%3E%3C/svg%3E") 0 0 / 52px 8px repeat-x,
        linear-gradient(#bfdbfe, #bfdbfe) 0 7px / 100% 100% no-repeat;
    transition: top .45s cubic-bezier(.3, 1.4, .5, 1);
}
/* Hover hanya di perangkat ber-mouse; di layar sentuh :hover "nyangkut" setelah tap */
@media (hover: hover) {
    .bottom-nav-item:hover { color: var(--gm-blue); }
}
.bottom-nav-item:active i { transform: scale(.92); }
.bottom-nav-item.is-active { color: var(--gm-blue-600); }
.bottom-nav-item.is-active i { background: var(--gm-blue-50); }
.bottom-nav-item.is-active i::after {
    top: 38%;
    animation: gm-wave-fill 2.4s linear infinite;
}
@keyframes gm-wave-fill { to { background-position-x: 52px, 0; } }

@media (prefers-reduced-motion: reduce) {
    .bottom-nav-item.is-active i::after { animation: none; }
    .bottom-nav-item i,
    .bottom-nav-item i::after { transition: none; }
}

@media (max-width: 991.98px) {
    body { padding-bottom: calc(var(--gm-bottom-nav-h) + env(safe-area-inset-bottom)); }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--gm-ink); }
.site-footer a { text-decoration: none; }

.footer-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}

.footer-contact li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: .9rem;
    color: rgb(255 255 255 / .75);
    font-size: .95rem;
}
.footer-contact i { color: #7cc0ff; font-size: 1.15rem; line-height: 1.4; }

.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgb(255 255 255 / .08);
    color: #fff;
    transition: background-color .2s ease;
}
.footer-social:hover { background: var(--gm-blue); color: #fff; }

.footer-certs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.footer-certs img {
    height: 52px;
    width: auto;
    padding: 6px;
    background: #fff;
    border-radius: 8px;
    object-fit: contain;
}

/* Utilitas lama, dipakai halaman lain */
.text-white-70 { color: rgb(255 255 255 / .75) !important; }
.bg-white-10 { background-color: rgb(255 255 255 / .1); }
.border-white-10 { border-color: rgb(255 255 255 / .1) !important; }
.hover-white:hover { color: #fff !important; text-decoration: none; }
.btn-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.btn-facebook { background: #3b5998; color: #fff !important; border: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}