#site-header { transition: background-color .25s, color .25s, box-shadow .25s; }
#site-header.is-transparent { background: transparent; color: #fff; }
#site-header.is-solid { background: #fff; color: #0B0B0B; box-shadow: 0 1px 0 #f4f4f5; }
.dealer-num { background: rgba(255, 255, 255, .9); color: #0B0B0B; transition: background-color .2s, color .2s; }
.dealer-item[aria-current="true"] { border-color: #0B0B0B; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .25); }
.dealer-item[aria-current="true"] .dealer-num { background: #B5121B; color: #fff; }

.lang-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 9999px;
  box-shadow: inset 0 0 0 1px rgba(161, 161, 170, .45); font-size: 12px; font-weight: 700; line-height: 1;
}
.lang-switch > * { padding: 6px 9px; border-radius: 9999px; letter-spacing: .04em; }
.lang-switch a { opacity: .6; transition: opacity .2s; }
.lang-switch a:hover { opacity: 1; }
.lang-switch [aria-current] { background: #0B0B0B; color: #fff; }
#site-header.is-transparent .lang-switch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
#site-header.is-transparent .lang-switch [aria-current] { background: #fff; color: #0B0B0B; }
#site-header.is-transparent .btn-ghost { border-color: rgba(255, 255, 255, .45); }
#site-header.is-solid .btn-ghost { border-color: #d4d4d8; }

.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -24px; height: 2px;
  background: #B5121B; transform: scaleX(0); transition: transform .2s;
}
.nav-link:hover::after, .nav-link[aria-expanded="true"]::after, .nav-link.is-active::after { transform: scaleX(1); }

#mega { transition: opacity .2s, transform .2s, visibility .2s; }
#mega[data-open="false"] { opacity: 0; visibility: hidden; transform: translateY(-8px); }
#mega[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
#mega-backdrop { transition: opacity .2s, visibility .2s; }
#mega-backdrop[data-open="false"] { opacity: 0; visibility: hidden; }
.cat-tab { color: #a1a1aa; transition: color .2s; }
.cat-tab:hover, .cat-tab[aria-selected="true"] { color: #0B0B0B; }
.cat-tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: #B5121B; transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.cat-tab[aria-selected="true"]::after { transform: scaleX(1); }
.mega-panel[hidden] { display: none; }

#drawer { transition: transform .3s, visibility .3s; }
#drawer[data-open="false"] { transform: translateX(100%); visibility: hidden; }

.site main .btn { border-radius: 9999px; }
.site main .btn-brand { background-color: #AC9378; color: #fff; }
.site main .btn-brand:hover { background-color: #957C62; }

[hidden] { display: none !important; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
details[open] .chev { transform: rotate(180deg); }
details > summary::-webkit-details-marker { display: none; }
[x-cloak] { display: none !important; }

.hero-slide { transition: opacity .7s ease; }
.hero-slide[aria-hidden="true"] { opacity: 0; pointer-events: none; }

@keyframes lineup-in-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes lineup-in-left { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.lineup-slide:not([hidden]) { animation: lineup-in-right .45s ease; }
.lineup-slide.from-left:not([hidden]) { animation-name: lineup-in-left; }

.cf-stage { perspective: 1600px; perspective-origin: 50% 50%; }
.cf-slide {
  transition: transform .6s cubic-bezier(.22, .7, .2, 1), opacity .6s ease;
  transform-style: preserve-3d; backface-visibility: hidden; will-change: transform;
}
.cf-slide .cf-dim { transition: opacity .6s ease; }
.cf-slide[data-pos="0"] .cf-dim { opacity: 0; }
.cf-slide:not([data-pos="0"]) .cf-desc { display: none; }
.cf-slide[data-pos="0"] { cursor: default; }

#lightbox[data-open="false"] { display: none; }

[id] { scroll-margin-top: 130px; }

/* Peta jaringan MAS Group */
.network-card { background: radial-gradient(120% 120% at 30% 70%, #1c1a17 0%, #0b0b0b 60%); }
.nm-arc { fill: none; stroke: rgba(172, 147, 120, .35); stroke-width: 1.1; transition: stroke .2s; }
.nm-pulse { fill: none; stroke: #f5e9db; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 100; animation: nm-travel 3.2s linear infinite; }
.nm-point { fill: #AC9378; stroke: #0b0b0b; stroke-width: 1.2; transition: fill .2s; }
.nm-hq { fill: #fff; stroke: #AC9378; stroke-width: 2; }
.nm-ring { fill: none; stroke: #AC9378; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: nm-ping 2.6s ease-out infinite; }
.nm-ring-hq { stroke: #fff; }
.nm-label { fill: #d4d4d8; font: 600 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: .02em; paint-order: stroke; stroke: #0b0b0b; stroke-width: 3px; }
.nm-hq-kicker { fill: #8a7560; font: 700 7.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: .14em; }
.nm-hq-city { fill: #0b0b0b; font: 700 11px 'Plus Jakarta Sans', sans-serif; }
[data-net].is-active .nm-arc, [data-net-city].is-active .nm-arc { stroke: rgba(245, 233, 219, .85); }
[data-net].is-active .nm-point, [data-net-city].is-active .nm-point { fill: #fff; }
.nm-item.is-active, .nm-item:hover { background: rgba(255, 255, 255, .06); }
.nm-item.is-active .nm-item-dot { background: #fff; }
@keyframes nm-travel { to { stroke-dashoffset: 0; } }
@keyframes nm-ping { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.8); } }
@media (prefers-reduced-motion: reduce) { .nm-pulse, .nm-ring { animation: none; } .nm-pulse { stroke-dasharray: none; stroke: rgba(245, 233, 219, .25); } }
.nm-label-sm { font-size: 10px; font-weight: 500; fill: #a1a1aa; }
.nm-label-hq { fill: #fff; font-weight: 700; }
.nm-label-sea { fill: #52525b; font-style: italic; letter-spacing: .08em; }
.nm-region { fill: rgba(255, 255, 255, .02); }
.nm-region-hq { fill: rgba(172, 147, 120, .1); }
.nm-region-border { fill: none; stroke: rgba(172, 147, 120, .55); stroke-width: .9; stroke-linejoin: round; }
.nm-region-label { fill: #71717a; font: 600 7.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase; paint-order: stroke; stroke: #0b0b0b; stroke-width: 2.5px; }

/* Admin */
.admin-sidebar { background: radial-gradient(120% 60% at 0% 0%, rgba(172, 147, 120, .16), transparent 60%), #0b0b0b; }
.admin-nav.is-active { background: rgba(255, 255, 255, .06); }
.admin-nav.is-active::before { content: ''; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #AC9378; }
.admin-nav:not(.is-active):hover { background: rgba(255, 255, 255, .03); }
body.admin .border-zinc-200 { border-color: #e7e4df; }
.kpi-card { position: relative; overflow: hidden; }
.kpi-card::after { content: ''; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 9999px; background: currentColor; opacity: .06; }