/* PATCH 2.2 - Spinlik refine
   Goals: closer to spinlik look: cleaner typography, softer glass cards, tighter navbar, consistent spacing.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --spin-bg-0: #050B18;
    --spin-bg-1: #07142A;
    --spin-bg-2: #0B1F3F;
    --spin-accent: #2F7CFF;
    --spin-accent-2: #1B5BFF;
    --spin-text: #EAF0FF;
    --spin-muted: rgba(234, 240, 255, .72);
    --spin-card: rgba(255, 255, 255, .06);
    --spin-card-2: rgba(255, 255, 255, .08);
    --spin-border: rgba(255, 255, 255, .12);
    --spin-shadow: 0 18px 50px rgba(0, 0, 0, .38);
    --spin-radius: 18px;
    --spin-radius-sm: 14px;
}

html,
body {
    height: 100%;
}

body {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--spin-text);
    background:
        radial-gradient(900px 520px at 18% 18%, rgba(47, 124, 255, .22), transparent 55%),
        radial-gradient(700px 420px at 82% 22%, rgba(147, 51, 234, .16), transparent 58%),
        radial-gradient(800px 520px at 40% 82%, rgba(16, 185, 129, .10), transparent 60%),
        linear-gradient(180deg, var(--spin-bg-0), var(--spin-bg-1) 44%, var(--spin-bg-0));
    background-attachment: fixed;
}

a {
    color: rgba(143, 189, 255, .95);
    text-decoration: none;
}

a:hover {
    color: #BBD8FF;
    text-decoration: none;
}

.container {
    max-width: 1120px;
}

/* NAVBAR */
.navbar {
    padding: 14px 0;
    background: rgba(6, 14, 32, .72) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
}

.navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.navbar .navbar-brand small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--spin-muted);
    margin-top: -2px;
}

.brand-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
}

.nav-link {
    color: rgba(234, 240, 255, .78) !important;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 14px !important;
    border-radius: 12px;
    transition: all .15s ease;
}

.nav-link:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, .06);
}

.nav-link.active {
    color: #FFFFFF !important;
    background: rgba(47, 124, 255, .14);
    border: 1px solid rgba(47, 124, 255, .25);
}

.btn-spin {
    background: linear-gradient(180deg, var(--spin-accent), var(--spin-accent-2));
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-weight: 700;
    border-radius: 14px;
    padding: 10px 16px;
    box-shadow: 0 16px 34px rgba(47, 124, 255, .20);
}

.btn-spin:hover {
    filter: brightness(1.06);
    color: #fff;
}

.btn-spin-outline {
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .92);
    font-weight: 700;
    border-radius: 14px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .02);
}

.btn-spin-outline:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

/* HERO */
.hero {
    padding: 72px 0 34px 0;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .04);
    color: rgba(234, 240, 255, .86);
    font-weight: 600;
    font-size: 12px;
}

.hero h1 {
    font-size: 46px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.6px;
    margin-top: 14px;
    margin-bottom: 12px;
}

.hero p.lead {
    color: var(--spin-muted);
    font-size: 16px;
    line-height: 1.65;
    max-width: 62ch;
}

/* GLASS CARD */
.glass {
    background: var(--spin-card);
    border: 1px solid var(--spin-border);
    border-radius: var(--spin-radius);
    box-shadow: var(--spin-shadow);
    backdrop-filter: blur(14px);
}

.glass.soft {
    background: var(--spin-card-2);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
}

.glass .card-title {
    font-weight: 800;
}

.card {
    background: transparent;
    border: 0;
}

.metric {
    padding: 16px 18px;
    border-radius: var(--spin-radius-sm);
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
}

.metric .num {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.3px;
}

.metric .lbl {
    color: var(--spin-muted);
    font-weight: 600;
    font-size: 12px;
    margin-top: 2px;
}

/* SECTION */
.section-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.section-sub {
    color: var(--spin-muted);
    font-size: 14px;
    margin-top: 6px;
}

/* FEATURE CARD */
.feature {
    padding: 20px 18px;
    border-radius: var(--spin-radius);
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
    height: 100%;
}

.feature .ft-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(47, 124, 255, .14);
    border: 1px solid rgba(47, 124, 255, .24);
    margin-bottom: 12px;
}

.feature h6 {
    font-weight: 800;
    margin-bottom: 6px;
}

.feature p {
    color: var(--spin-muted);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ACCORDION */
.accordion .accordion-item {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 10px;
}

.accordion-button {
    background: transparent !important;
    color: #fff !important;
    font-weight: 700;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-body {
    color: var(--spin-muted);
}

/* FOOTER */
.footer {
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(6, 14, 32, .50);
    backdrop-filter: blur(10px);
    padding: 26px 0;
    margin-top: 56px;
}

.footer small {
    color: var(--spin-muted);
}

/* Responsive */
@media (max-width: 992px) {
    .hero {
        padding-top: 44px;
    }

    .hero h1 {
        font-size: 34px;
    }
}

/* =========================
   SPINLIK LIGHT OVERRIDE
   Tempel di paling bawah CSS aktif
   ========================= */

/* Base */
html,
body {
    background: #f7f9fc !important;
}

body {
    color: #0f172a !important;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Jika masih ada wrapper yang memaksa gelap */
main,
.app,
.wrapper,
.page,
.landing,
.public-page {
    background: transparent !important;
}

/* Header / navbar (pill putih seperti Spinlik) */
.navbar,
.topbar,
header {
    background: transparent !important;
}

.navbar .container,
header .container {
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 999px !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .10) !important;
    backdrop-filter: blur(14px) !important;
    padding: 12px 18px !important;
}

/* Link navbar */
.navbar a,
header a {
    color: rgba(15, 23, 42, .75) !important;
    font-weight: 600 !important;
}

.navbar a:hover,
header a:hover {
    color: #2563eb !important;
}

/* Hero: dari gelap → putih + gradient lembut */
.hero,
.hero-section,
.landing-hero,
.masthead,
.hero-wrap {
    background: radial-gradient(1200px 600px at 80% 0%, rgba(99, 102, 241, .18), transparent 60%),
        radial-gradient(1200px 600px at 0% 20%, rgba(37, 99, 235, .16), transparent 55%),
        #f7f9fc !important;
    color: #0f172a !important;
    padding-top: 110px !important;
    padding-bottom: 56px !important;
}

.hero h1,
.hero-section h1,
.landing-hero h1 {
    color: #0f172a !important;
}

.hero p,
.hero-section p,
.landing-hero p {
    color: rgba(15, 23, 42, .70) !important;
}

/* Card: putih, radius besar, shadow halus */
.card,
.glass,
.panel,
.feature-card,
.stat-card,
.box {
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .10) !important;
    color: #0f172a !important;
}

/* Button gaya Spinlik */
.btn,
button,
.btn-primary {
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.btn-primary,
.btn.btn-primary {
    background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
    border: 0 !important;
}

.btn-outline-light,
.btn-outline-secondary {
    border-radius: 999px !important;
    border: 1px solid rgba(15, 23, 42, .16) !important;
    color: rgba(15, 23, 42, .80) !important;
    background: rgba(255, 255, 255, .75) !important;
}

/* Section putih default */
section {
    background: transparent !important;
}

.section,
.content-section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}

/* Jika ada section khusus yang memang mau gelap (mis. Prosedur), beri class .band-dark */
.band-dark {
    background: radial-gradient(1200px 600px at 80% 0%, rgba(79, 70, 229, .35), transparent 60%),
        linear-gradient(180deg, #0b1b3a, #08142c) !important;
    color: #fff !important;
}

.band-dark h2,
.band-dark h3,
.band-dark p {
    color: #fff !important;
}

.btn-secondary[disabled] {
    opacity: .6;
    cursor: not-allowed;
}

.hero-slide {
    min-height: 900px;
    display: flex;
    align-items: center;
}

.hero-slide h1 {
    font-size: 48px;
}

.hero-slide p {
    max-width: 500px;
}