/* HAIRA AI splash screen — hitam, biru, kuning */
.haira-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: #000;
  opacity: 1;
  visibility: visible;
  transition: opacity .65s ease, visibility .65s ease;
}

html.haira-splash-skip .haira-splash {
  display: none !important;
}

.haira-splash.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.haira-splash::before,
.haira-splash::after {
  content: "";
  position: absolute;
  width: 55vw;
  height: 55vw;
  min-width: 320px;
  min-height: 320px;
  border-radius: 50%;
  filter: blur(95px);
  opacity: .16;
}

.haira-splash::before {
  top: -26%;
  left: -24%;
  background: #0798ff;
  animation: hairaSplashBlue 4.3s ease-in-out infinite alternate;
}

.haira-splash::after {
  right: -26%;
  bottom: -28%;
  background: #ffd900;
  animation: hairaSplashYellow 5s ease-in-out infinite alternate;
}

.haira-splash-grid {
  position: absolute;
  inset: -35%;
  opacity: .17;
  background-image:
    linear-gradient(rgba(7,152,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,152,255,.12) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(820px) rotateX(68deg) translateY(34%);
  animation: hairaSplashGrid 5s linear infinite;
}

.haira-splash-ring {
  position: absolute;
  width: 350px;
  height: 350px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
  animation: hairaSplashRotate 7s linear infinite;
}

.haira-splash-ring::after {
  content: "";
  position: absolute;
  top: -5px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #42bdff;
  box-shadow: 0 0 24px #0798ff;
}

.haira-splash-ring.second {
  width: 255px;
  height: 255px;
  border-color: rgba(255,217,0,.09);
  animation: hairaSplashRotateReverse 5.2s linear infinite;
}

.haira-splash-ring.second::after {
  background: #ffd900;
  box-shadow: 0 0 24px #ffd900;
}

.haira-splash-content {
  position: relative;
  z-index: 3;
  width: min(390px, calc(100% - 52px));
  text-align: center;
}

.haira-splash-logo {
  position: relative;
  width: 82px;
  height: 82px;
  margin: 0 auto 23px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 26px;
  color: #050505;
  background: linear-gradient(145deg, #ffe86b, #ffd900);
  box-shadow:
    0 0 0 9px rgba(255,217,0,.04),
    0 0 75px rgba(255,217,0,.22);
  font-size: 38px;
  font-weight: 950;
  animation: hairaSplashFloat 2.35s ease-in-out infinite;
}

.haira-splash-logo::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%);
  transform: translateX(-80%) rotate(12deg);
  animation: hairaSplashShine 1.75s ease-in-out infinite;
}

.haira-splash-logo span {
  position: relative;
  z-index: 2;
}

.haira-splash-logo i {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 25px;
  height: 25px;
  border: 5px solid #000;
  border-radius: 50%;
  background: #0798ff;
  box-shadow: 0 0 25px #0798ff;
}

.haira-splash-title {
  margin: 0;
  font-size: clamp(35px, 9vw, 52px);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 950;
}

.haira-splash-title strong {
  color: #42bdff;
}

.haira-splash-subtitle {
  margin: 14px 0 29px;
  color: #858e9d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.haira-splash-progress {
  width: min(300px, 86%);
  height: 3px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.haira-splash-progress span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0798ff, #ffd900);
  box-shadow: 0 0 18px rgba(7,152,255,.7);
  animation: hairaSplashProgress 1.5s ease-in-out infinite;
}

.haira-splash-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}

.haira-splash-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4b5360;
  animation: hairaSplashDots 1.15s ease-in-out infinite;
}

.haira-splash-dots i:nth-child(2) { animation-delay: .15s; }
.haira-splash-dots i:nth-child(3) { animation-delay: .30s; }

body.haira-splash-lock {
  overflow: hidden !important;
}

@keyframes hairaSplashGrid {
  to { transform: perspective(820px) rotateX(68deg) translateY(calc(34% + 54px)); }
}

@keyframes hairaSplashRotate { to { transform: rotate(360deg); } }
@keyframes hairaSplashRotateReverse { to { transform: rotate(-360deg); } }
@keyframes hairaSplashBlue { to { transform: translate(24%, 20%) scale(1.12); } }
@keyframes hairaSplashYellow { to { transform: translate(-22%, -18%) scale(1.1); } }
@keyframes hairaSplashFloat { 50% { transform: translateY(-8px) scale(1.02); } }

@keyframes hairaSplashShine {
  0%, 32% { transform: translateX(-90%) rotate(12deg); }
  82%, 100% { transform: translateX(90%) rotate(12deg); }
}

@keyframes hairaSplashProgress {
  0% { transform: translateX(-115%); }
  100% { transform: translateX(370%); }
}

@keyframes hairaSplashDots {
  50% { transform: translateY(-5px); background: #ffd900; }
}

@media (max-width: 430px) {
  .haira-splash-ring { width: 310px; height: 310px; }
  .haira-splash-ring.second { width: 225px; height: 225px; }
}

@media (prefers-reduced-motion: reduce) {
  .haira-splash * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}