/**
 * Atelier Nusa — brand polish (anti “AI template”)
 * Hangat, tenang, arsitektur-studio. Aksen emas dari logo, bukan pelangi neon.
 * Load terakhir.
 */

:root {
    --atn-ink: #0c1222;
    --atn-surface: #121a2b;
    --atn-panel: rgba(18, 26, 43, 0.88);
    --atn-line: rgba(212, 175, 120, 0.18);
    --atn-gold: #c9a227;
    --atn-gold-soft: #d4af78;
    --atn-gold-dim: rgba(201, 162, 39, 0.14);
    --atn-text: #eef2f7;
    --atn-muted: #9aa8bc;
    --atn-accent: #8b9cf7; /* soft, not electric */
}

/* Latar: gelap hangat, tanpa “purple SaaS glow” berlebihan */
body.studio-bg,
.studio-bg {
    background:
        radial-gradient(900px 480px at 12% -5%, rgba(201, 162, 39, 0.09), transparent 55%),
        radial-gradient(700px 400px at 95% 10%, rgba(99, 110, 160, 0.12), transparent 50%),
        linear-gradient(180deg, #0a0f1a 0%, #0c1222 45%, #0a101c 100%) !important;
    color: var(--atn-text) !important;
}

/* Panel: glass lebih tenang, bingkai emas soft */
.studio-bg .glass,
.studio-bg .glass-strong {
    background: var(--atn-panel) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 12px 32px -20px rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}

/* Kurangi highlight “liquid” yang berlebihan */
.studio-bg .glass::before,
.studio-bg .glass-strong::before {
    opacity: 0.35 !important;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 30%
    ) !important;
}

.studio-bg .glass::after,
.studio-bg .glass-strong::after {
    opacity: 0.35 !important;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.08), transparent 70%) !important;
}

/* KPI: netral + aksen kiri emas — bukan 4 gradien pelangi */
.studio-bg .kpi {
    background: linear-gradient(145deg, #1a2336 0%, #121a2b 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    border-left: 3px solid var(--atn-gold) !important;
    border-radius: 1rem !important;
}

.studio-bg .kpi::after {
    opacity: 0.15 !important;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 40%) !important;
}

.studio-bg .kpi:hover {
    transform: none !important;
    filter: none !important;
    border-color: rgba(212, 175, 120, 0.35) !important;
}

.studio-bg .kpi-label {
    color: var(--atn-muted) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    font-size: 0.875rem !important;
}

.studio-bg .kpi-value {
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* Tombol: lebih tenang, kurang “ALL CAPS SaaS” */
.studio-bg .btn-primary {
    background: linear-gradient(180deg, #c9a227 0%, #a8841c 100%) !important;
    color: #1a1408 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 8px 20px -10px rgba(201, 162, 39, 0.45) !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    font-weight: 700 !important;
}

.studio-bg .btn-primary:hover {
    filter: brightness(1.05);
    background: linear-gradient(180deg, #d4af78 0%, #c9a227 100%) !important;
}

.studio-bg .btn-secondary {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--atn-text) !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    font-weight: 600 !important;
}

.studio-bg .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(212, 175, 120, 0.35) !important;
}

.studio-bg .btn-ghost {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Nav active: emas soft, bukan ungu neon */
.studio-bg .nav-link-active {
    background: var(--atn-gold-dim) !important;
    color: #f5e6c8 !important;
    box-shadow: inset 3px 0 0 var(--atn-gold) !important;
}

.studio-bg .nav-link:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Sidebar / header */
.studio-bg aside {
    background: rgba(10, 14, 24, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(16px) !important;
}

.studio-bg header.sticky {
    background: rgba(10, 14, 24, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Label form: sentence case feel */
.studio-bg .form-label {
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    font-weight: 600 !important;
    color: var(--atn-muted) !important;
}

.studio-bg .form-input:focus,
.studio-bg input:focus,
.studio-bg textarea:focus,
.studio-bg select:focus {
    border-color: rgba(201, 162, 39, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15) !important;
}

/* Tabel header lebih soft */
.studio-bg .table-dark thead {
    background: rgba(255, 255, 255, 0.03) !important;
}

.studio-bg .table-dark th {
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    font-weight: 600 !important;
    color: var(--atn-muted) !important;
}

.studio-bg .table-dark tbody tr:hover {
    background: rgba(201, 162, 39, 0.04) !important;
}

/* Link aksen */
.studio-bg a {
    color: var(--atn-gold-soft);
}
.studio-bg a:hover {
    color: #e8d5a3;
}

.studio-bg .glass-strong a,
.studio-bg .glass a {
    color: var(--atn-gold-soft) !important;
}

/* Chip Yes: hijau tenang */
.studio-bg .chip-yes {
    background: rgba(34, 120, 90, 0.25) !important;
    color: #9fd9b8 !important;
    box-shadow: inset 0 0 0 1px rgba(100, 180, 140, 0.3) !important;
}

/* Person card: no glare sweep when we want polish (keep subtle border) */
.studio-bg .person-card {
    background: linear-gradient(160deg, #1a2336, #121a2b) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.studio-bg .person-card::before {
    opacity: 0.35;
}

/* Flash messages: plain */
.studio-bg .flash-ok {
    border-color: rgba(100, 180, 140, 0.35) !important;
    background: rgba(20, 60, 45, 0.45) !important;
}

.studio-bg .flash-err {
    border-color: rgba(200, 100, 100, 0.35) !important;
    background: rgba(80, 30, 35, 0.4) !important;
}

/* Hero sections: override pelangi → slate + gold edge */
.studio-bg .atn-hero {
    background: linear-gradient(145deg, #161e30 0%, #0f1524 60%, #121820 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--atn-gold);
    border-radius: 1.25rem;
    box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.6);
}

.studio-bg .atn-hero h1,
.studio-bg .atn-hero .atn-hero-title {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.studio-bg .atn-hero p {
    color: var(--atn-muted) !important;
}

.studio-bg .atn-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--atn-gold-soft);
    letter-spacing: 0.04em;
    text-transform: none;
}

/* Section titles consistent */
.studio-bg .atn-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.studio-bg .atn-section-sub {
    font-size: 0.9rem;
    color: var(--atn-muted);
    margin-top: 0.2rem;
}

/* Step numbers: solid gold, not rainbow */
.studio-bg .atn-step {
    background: var(--atn-gold-dim) !important;
    color: var(--atn-gold-soft) !important;
    border: 1px solid rgba(201, 162, 39, 0.35);
    font-weight: 700;
}

/* Kurangi animasi stagger di polish mode default — tetap hormati motion toggle */
html:not(.atn-motion-off) .studio-bg main > .space-y-6 > *:nth-child(n),
html:not(.atn-motion-off) .studio-bg main > .space-y-5 > *:nth-child(n) {
    animation: none !important;
}

/* Matikan hover lift berlebih di glass links */
.studio-bg a.glass-strong:hover,
.studio-bg a.glass:hover {
    transform: none !important;
}

/* Chart cards stay quiet */
.studio-bg canvas {
    max-height: 100%;
}