/* ============================================================
   Indonesia-only visual system
   Applied after app.css so all 10 home/detail layouts inherit a
   different Indonesian portal style without duplicating templates.
   ============================================================ */

body.indonesia-only {
    --id-red: #dc2626;
    --id-red-deep: #7f1d1d;
    --id-gold: #f59e0b;
    --id-ink: #1f2937;
    --id-cream: #fff7ed;
    --id-sand: #fef3c7;
    --id-green: #047857;
    font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(circle at 12% 8%, rgba(220, 38, 38, .10), transparent 28rem),
        radial-gradient(circle at 90% 4%, rgba(245, 158, 11, .16), transparent 22rem),
        linear-gradient(180deg, #fff7ed 0%, #fff 38%, #f8fafc 100%);
}

body.indonesia-only::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .42;
    background-image:
        linear-gradient(135deg, rgba(220, 38, 38, .06) 25%, transparent 25%),
        linear-gradient(225deg, rgba(245, 158, 11, .06) 25%, transparent 25%),
        linear-gradient(45deg, rgba(220, 38, 38, .05) 25%, transparent 25%),
        linear-gradient(315deg, rgba(245, 158, 11, .05) 25%, #fff7ed 25%);
    background-position: 18px 0, 18px 0, 0 0, 0 0;
    background-size: 36px 36px;
}

.indonesia-only .site-header {
    background: rgba(255, 255, 255, .88);
    border-bottom: 1px solid rgba(220, 38, 38, .10);
    box-shadow: 0 10px 30px -24px rgba(127, 29, 29, .45);
}

.indonesia-only .site-header.hv-2 .utility-bar,
.indonesia-only .site-header.hv-3 {
    background:
        linear-gradient(90deg, var(--id-red-deep), var(--id-red) 52%, #b91c1c);
}

.indonesia-only .brand .brand-mark {
    border-radius: 16px 16px 16px 6px;
    background:
        radial-gradient(circle at 28% 24%, rgba(255,255,255,.9), transparent 13px),
        linear-gradient(145deg, var(--id-red), var(--id-red-deep));
    box-shadow: 0 16px 34px -18px var(--id-red);
}

.indonesia-only .brand-meta .brand-sub,
.indonesia-only .utility-bar,
.indonesia-only .eyebrow {
    letter-spacing: .08em;
}

.indonesia-only .nav-menu a {
    border-radius: 14px;
    font-weight: 700;
}

.indonesia-only .nav-menu a:hover {
    background: rgba(220, 38, 38, .08);
    color: var(--id-red);
}

.indonesia-only .lang-switch {
    display: none;
}

.indonesia-only .btn-pill,
.indonesia-only .btn-primary {
    border-radius: 14px;
    background: linear-gradient(135deg, var(--id-red), var(--id-red-deep));
    box-shadow: 0 18px 38px -18px rgba(220, 38, 38, .85);
}

.indonesia-only .btn-ghost {
    border-radius: 14px;
    border-color: rgba(220, 38, 38, .22);
    color: var(--id-red-deep);
    background: rgba(255, 255, 255, .72);
}

.indonesia-only .hero {
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.34), transparent 16rem),
        radial-gradient(circle at 88% 8%, rgba(245,158,11,.35), transparent 20rem),
        linear-gradient(135deg, var(--id-red-deep) 0%, var(--id-red) 48%, #fb923c 115%);
    color: #fff;
    border-bottom-left-radius: clamp(34px, 6vw, 92px);
    border-bottom-right-radius: clamp(34px, 6vw, 92px);
}

.indonesia-only .hero::before {
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.13) 12.5%, transparent 12.5%, transparent 50%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.13) 62.5%, transparent 62.5%, transparent 100%);
    background-size: 28px 28px;
    opacity: .36;
    mask-image: none;
}

.indonesia-only .hero h1,
.indonesia-only .hero h2,
.indonesia-only .hero h3,
.indonesia-only .hero p,
.indonesia-only .hero .muted {
    color: #fff;
}

.indonesia-only .hero .search-card,
.indonesia-only .hero .hero-card,
.indonesia-only .hero .score-card,
.indonesia-only .hero .report-card {
    border: 1px solid rgba(255,255,255,.38);
    background: rgba(255,255,255,.92);
    color: var(--id-ink);
    box-shadow: 0 32px 90px -28px rgba(127, 29, 29, .65);
}

.indonesia-only .hero .search-card h2,
.indonesia-only .hero .hero-card h2,
.indonesia-only .hero .report-card h2,
.indonesia-only .hero .search-card p,
.indonesia-only .hero .hero-card p,
.indonesia-only .hero .report-card p,
.indonesia-only .hero .muted {
    color: var(--id-ink);
}

.indonesia-only .card,
.indonesia-only .feature-card,
.indonesia-only .metric-card,
.indonesia-only .detail-card,
.indonesia-only .panel,
.indonesia-only .popular-card,
.indonesia-only .trust-card,
.indonesia-only .article-card {
    border: 1px solid rgba(127, 29, 29, .10);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90)),
        radial-gradient(circle at top right, rgba(245, 158, 11, .09), transparent 12rem);
    box-shadow: 0 24px 70px -38px rgba(127, 29, 29, .42);
}

.indonesia-only .feature-card:hover,
.indonesia-only .popular-card:hover,
.indonesia-only .detail-card:hover {
    border-color: rgba(220, 38, 38, .24);
    transform: translateY(-2px);
}

.indonesia-only .section-kicker,
.indonesia-only .eyebrow,
.indonesia-only .badge,
.indonesia-only .chip {
    color: var(--id-red);
    background: rgba(220, 38, 38, .08);
    border-color: rgba(220, 38, 38, .18);
}

.indonesia-only h1,
.indonesia-only h2,
.indonesia-only h3 {
    font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}

.indonesia-only h2::after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin-top: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--id-red), var(--id-gold));
}

.indonesia-only .text-center h2::after,
.indonesia-only .hero h2::after,
.indonesia-only .site-footer h2::after {
    margin-left: auto;
    margin-right: auto;
}

.indonesia-only .stats,
.indonesia-only .metric-grid,
.indonesia-only .summary-grid {
    gap: 18px;
}

.indonesia-only .metric-card,
.indonesia-only .stat-card {
    border-top: 4px solid var(--id-red);
}

.indonesia-only .og-preview,
.indonesia-only .og-card,
.indonesia-only img[src*="/og/"] {
    border-radius: 24px;
    border: 10px solid #fff;
    box-shadow: 0 28px 70px -28px rgba(127, 29, 29, .55);
}

.indonesia-only .article-content h2,
.indonesia-only .report-body h2 {
    padding-top: 8px;
}

.indonesia-only .article-content p,
.indonesia-only .report-body p {
    font-size: 1.02rem;
    line-height: 1.82;
}

.indonesia-only table,
.indonesia-only .tech-table {
    border-radius: 18px;
    overflow: hidden;
}

.indonesia-only .site-footer {
    background:
        radial-gradient(circle at 10% 10%, rgba(245,158,11,.18), transparent 18rem),
        linear-gradient(135deg, #111827, #7f1d1d);
    color: rgba(255,255,255,.86);
    border-top: 0;
}

.indonesia-only .site-footer a,
.indonesia-only .site-footer h2,
.indonesia-only .site-footer h3,
.indonesia-only .site-footer .brand {
    color: #fff;
}

.indonesia-only .site-footer .muted {
    color: rgba(255,255,255,.68);
}

@media (max-width: 760px) {
    body.indonesia-only {
        background: linear-gradient(180deg, #fff7ed 0%, #fff 55%, #f8fafc 100%);
    }

    .indonesia-only .hero {
        border-bottom-left-radius: 34px;
        border-bottom-right-radius: 34px;
    }

    .indonesia-only .nav-menu {
        display: none;
    }

    .indonesia-only .card,
    .indonesia-only .feature-card,
    .indonesia-only .detail-card,
    .indonesia-only .popular-card {
        border-radius: 20px;
    }
}