/* V40.5.14 — LABKOM PUBLIC ANIMATED SVG ATMOSPHERE */
:root{
  --labkom-bg-base:#f4f8ff;
  --labkom-bg-surface:rgba(255,255,255,.68);
  --labkom-bg-surface-strong:rgba(255,255,255,.84);
  --labkom-bg-border:rgba(99,102,241,.12);
  --labkom-bg-shadow:0 18px 52px rgba(15,23,42,.09);
  --labkom-bg-texture-opacity:.74;
  --labkom-navbar-bg:linear-gradient(110deg,rgba(15,118,110,.91),rgba(30,64,175,.89) 52%,rgba(67,56,202,.87));
}
[data-bs-theme="dark"]{
  --labkom-bg-base:#07111f;
  --labkom-bg-surface:rgba(15,23,42,.70);
  --labkom-bg-surface-strong:rgba(15,23,42,.84);
  --labkom-bg-border:rgba(125,211,252,.12);
  --labkom-bg-shadow:0 20px 55px rgba(0,0,0,.25);
  --labkom-bg-texture-opacity:.53;
  --labkom-navbar-bg:linear-gradient(110deg,rgba(4,47,46,.92),rgba(30,58,138,.91) 52%,rgba(49,46,129,.90));
}

html{
  background:var(--labkom-bg-base);
}
body.labkom-public-atmosphere{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 8% 10%,rgba(56,189,248,.11),transparent 30rem),
    radial-gradient(circle at 90% 18%,rgba(99,102,241,.10),transparent 32rem),
    radial-gradient(circle at 52% 83%,rgba(20,184,166,.08),transparent 34rem),
    linear-gradient(180deg,#f7fbff 0%,#eef6ff 44%,#f8fbff 100%) !important;
}
[data-bs-theme="dark"] body.labkom-public-atmosphere{
  background:
    radial-gradient(circle at 7% 11%,rgba(14,165,233,.13),transparent 30rem),
    radial-gradient(circle at 91% 20%,rgba(99,102,241,.14),transparent 34rem),
    radial-gradient(circle at 52% 80%,rgba(20,184,166,.09),transparent 35rem),
    linear-gradient(180deg,#06101d 0%,#0b1729 46%,#07101e 100%) !important;
}

.labkom-public-motion-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  contain:layout paint;
}
.labkom-public-motion-bg::before,
.labkom-public-motion-bg::after{
  content:"";
  position:absolute;
  border-radius:999px;
  filter:blur(54px);
  opacity:.31;
  transform:translate3d(0,0,0);
}
.labkom-public-motion-bg::before{
  width:32rem;
  height:32rem;
  left:-10rem;
  top:18vh;
  background:radial-gradient(circle,rgba(14,165,233,.36),rgba(59,130,246,.07) 58%,transparent 72%);
  animation:labkomAuroraA 18s ease-in-out infinite alternate;
}
.labkom-public-motion-bg::after{
  width:38rem;
  height:38rem;
  right:-13rem;
  top:40vh;
  background:radial-gradient(circle,rgba(99,102,241,.30),rgba(20,184,166,.08) 60%,transparent 73%);
  animation:labkomAuroraB 24s ease-in-out infinite alternate;
}
.labkom-public-motion-svg{
  width:100%;
  height:100%;
  display:block;
  opacity:var(--labkom-bg-texture-opacity);
}
.labkom-public-motion-svg .lk-grid{
  opacity:.18;
}
.labkom-public-motion-svg .lk-circuit{
  opacity:.34;
  stroke-dasharray:8 18;
  animation:labkomCircuitFlow 26s linear infinite;
}
.labkom-public-motion-svg .lk-circuit.slow{
  animation-duration:39s;
  animation-direction:reverse;
  opacity:.24;
}
.labkom-public-motion-svg .lk-node{
  transform-box:fill-box;
  transform-origin:center;
  animation:labkomNodePulse 4.8s ease-in-out infinite;
}
.labkom-public-motion-svg .lk-node:nth-of-type(2n){animation-delay:-1.7s}
.labkom-public-motion-svg .lk-node:nth-of-type(3n){animation-delay:-3.2s}
.labkom-public-motion-svg .lk-orbit-a{
  transform-origin:780px 470px;
  animation:labkomOrbit 52s linear infinite;
}
.labkom-public-motion-svg .lk-orbit-b{
  transform-origin:1180px 245px;
  animation:labkomOrbitReverse 67s linear infinite;
}
.labkom-public-motion-svg .lk-wave-one{
  animation:labkomWaveOne 18s ease-in-out infinite alternate;
}
.labkom-public-motion-svg .lk-wave-two{
  animation:labkomWaveTwo 24s ease-in-out infinite alternate;
}
.labkom-public-motion-svg .lk-chip{
  transform-box:fill-box;
  transform-origin:center;
  animation:labkomChipFloat 9s ease-in-out infinite;
}
.labkom-public-motion-svg .lk-particle{
  transform-box:fill-box;
  transform-origin:center;
  animation:labkomParticle 7s ease-in-out infinite;
}
.labkom-public-motion-svg .lk-particle.p2{animation-delay:-2.2s}
.labkom-public-motion-svg .lk-particle.p3{animation-delay:-4.8s}

/* Konten berada di atas ambience */
body.labkom-public-atmosphere > nav,
body.labkom-public-atmosphere > main,
body.labkom-public-atmosphere > footer{
  position:relative;
  z-index:2;
}

/* Navbar lebih elegan dan translucent */
body.labkom-public-atmosphere > nav.navbar{
  background:var(--labkom-navbar-bg) !important;
  border-bottom:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 32px rgba(15,23,42,.15) !important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
body.labkom-public-atmosphere > nav.navbar .nav-link{
  border-radius:.75rem;
  padding-left:.78rem;
  padding-right:.78rem;
  transition:background-color .2s ease,transform .2s ease;
}
body.labkom-public-atmosphere > nav.navbar .nav-link:hover,
body.labkom-public-atmosphere > nav.navbar .nav-link.active{
  background:rgba(255,255,255,.10);
  transform:translateY(-1px);
}

/* Transparansi section agar SVG tetap terasa */
body.labkom-public-atmosphere main{
  background:transparent;
}
body.labkom-public-atmosphere .public-section{
  position:relative;
  background:transparent;
}
body.labkom-public-atmosphere .public-section-soft{
  background:linear-gradient(180deg,rgba(239,246,255,.48),rgba(248,250,252,.28)) !important;
  border-top:1px solid rgba(148,163,184,.08);
  border-bottom:1px solid rgba(148,163,184,.08);
}
[data-bs-theme="dark"] body.labkom-public-atmosphere .public-section-soft{
  background:linear-gradient(180deg,rgba(15,23,42,.44),rgba(15,23,42,.20)) !important;
}

/* Glass cards */
body.labkom-public-atmosphere .public-card,
body.labkom-public-atmosphere .public-stat-card,
body.labkom-public-atmosphere .announcement-strip,
body.labkom-public-atmosphere .public-empty{
  background:var(--labkom-bg-surface) !important;
  border:1px solid var(--labkom-bg-border) !important;
  box-shadow:var(--labkom-bg-shadow);
  backdrop-filter:blur(14px) saturate(125%);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
}
body.labkom-public-atmosphere .public-card,
body.labkom-public-atmosphere .public-stat-card{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
body.labkom-public-atmosphere .public-card:hover,
body.labkom-public-atmosphere a.public-card:hover,
body.labkom-public-atmosphere .public-stat-card:hover{
  transform:translateY(-4px);
  border-color:rgba(56,189,248,.27) !important;
  box-shadow:0 22px 60px rgba(15,23,42,.13);
}
[data-bs-theme="dark"] body.labkom-public-atmosphere .public-card:hover,
[data-bs-theme="dark"] body.labkom-public-atmosphere a.public-card:hover,
[data-bs-theme="dark"] body.labkom-public-atmosphere .public-stat-card:hover{
  box-shadow:0 22px 58px rgba(0,0,0,.30);
}

/* Halaman yang memakai card/bootstrap biasa tetap menyatu */
body.labkom-public-atmosphere main > .container .card:not(.analytics-card),
body.labkom-public-atmosphere main > .container-fluid .card:not(.analytics-card){
  border-color:var(--labkom-bg-border);
}

/* Hero tetap kuat tetapi lebih menyatu */
body.labkom-public-atmosphere .public-hero{
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 -1px rgba(255,255,255,.08);
}
body.labkom-public-atmosphere .public-hero::after{
  content:"";
  position:absolute;
  inset:auto -8% -10rem 35%;
  height:18rem;
  border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.12),transparent 67%);
  filter:blur(6px);
  pointer-events:none;
}

/* Footer tetap di atas ambient global; video footer internal tetap bekerja */
body.labkom-public-atmosphere .portal-footer{
  position:relative;
  z-index:2;
}

/* Scrollbar halus */
@supports selector(::-webkit-scrollbar){
  body.labkom-public-atmosphere::-webkit-scrollbar{width:11px}
  body.labkom-public-atmosphere::-webkit-scrollbar-track{background:rgba(148,163,184,.08)}
  body.labkom-public-atmosphere::-webkit-scrollbar-thumb{
    border-radius:999px;
    border:3px solid transparent;
    background:linear-gradient(#0ea5e9,#4f46e5) padding-box;
  }
}

@keyframes labkomCircuitFlow{
  to{stroke-dashoffset:-520}
}
@keyframes labkomNodePulse{
  0%,100%{opacity:.35;transform:scale(.76)}
  50%{opacity:.95;transform:scale(1.28)}
}
@keyframes labkomOrbit{
  to{transform:rotate(360deg)}
}
@keyframes labkomOrbitReverse{
  to{transform:rotate(-360deg)}
}
@keyframes labkomWaveOne{
  0%{transform:translate3d(-28px,8px,0)}
  100%{transform:translate3d(42px,-12px,0)}
}
@keyframes labkomWaveTwo{
  0%{transform:translate3d(36px,-8px,0)}
  100%{transform:translate3d(-35px,15px,0)}
}
@keyframes labkomChipFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}
  50%{transform:translate3d(0,-16px,0) rotate(2deg)}
}
@keyframes labkomParticle{
  0%,100%{opacity:.18;transform:translateY(0) scale(.7)}
  50%{opacity:.75;transform:translateY(-18px) scale(1.08)}
}
@keyframes labkomAuroraA{
  0%{transform:translate3d(-2vw,-2vh,0) scale(.92)}
  100%{transform:translate3d(12vw,9vh,0) scale(1.16)}
}
@keyframes labkomAuroraB{
  0%{transform:translate3d(3vw,5vh,0) scale(1.04)}
  100%{transform:translate3d(-13vw,-8vh,0) scale(.88)}
}

@media(max-width:767.98px){
  .labkom-public-motion-svg{opacity:.52}
  .labkom-public-motion-bg::before,
  .labkom-public-motion-bg::after{filter:blur(70px);opacity:.22}
  body.labkom-public-atmosphere .public-card:hover,
  body.labkom-public-atmosphere a.public-card:hover,
  body.labkom-public-atmosphere .public-stat-card:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .labkom-public-motion-bg::before,
  .labkom-public-motion-bg::after,
  .labkom-public-motion-svg *{
    animation:none !important;
  }
  body.labkom-public-atmosphere .public-card,
  body.labkom-public-atmosphere .public-stat-card,
  body.labkom-public-atmosphere > nav.navbar .nav-link{
    transition:none !important;
  }
}

/* =========================================================
   V40.5.17B1 - LOGIN MODAL STACKING FIX
   Pastikan modal Bootstrap berada di atas backdrop.
   ========================================================= */
body.labkom-public-atmosphere > .modal {
    z-index: 1055 !important;
}

body.labkom-public-atmosphere > .modal-backdrop {
    z-index: 1050 !important;
}

/* =========================================================
   V40.5.17B3 - PUBLIC THEME DROPDOWN STACK FIX

   Navbar publik harus memiliki stacking context
   lebih tinggi daripada hero/carousel.

   Modal Login tetap lebih tinggi:
   backdrop = 1050
   modal    = 1055
   ========================================================= */

body.labkom-public-atmosphere > nav.navbar.public-navbar-v4055 {
    z-index: 1040 !important;
    overflow: visible !important;
}

body.labkom-public-atmosphere
> nav.navbar.public-navbar-v4055
.theme-dropdown {
    position: relative;
}

body.labkom-public-atmosphere
> nav.navbar.public-navbar-v4055
.theme-dropdown
.dropdown-menu {
    z-index: 1085 !important;
}

