/* ==========================================================================
   Q-TRACK ROYAL CYBER-HERITAGE 3D GATEWAY (v4.3.0)
   Inspirasi Visual: JawiXplore AR3D (Deep Space Royal Navy, Metallic Gold & Hologram Cyan)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Cinzel:wght@700;800;900&display=swap');

/* 1. OVERLAY WRAPPER & ROYAL DEEP COSMIC ATMOSPHERE */
.gateway-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  min-height: 100vh;
  width: 100vw;
  background-color: #020817;
  background-image: 
    /* Royal Gold Dome & Hologram Beams */
    radial-gradient(circle at 50% 12%, rgba(245, 158, 11, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 15% 25%, rgba(0, 210, 255, 0.24) 0%, transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(217, 119, 6, 0.2) 0%, transparent 45%),
    radial-gradient(circle at 50% 65%, rgba(14, 52, 107, 0.4) 0%, transparent 70%),
    /* Micro Starfields */
    radial-gradient(2px 2px at 30px 40px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 120px 180px, #fde68a, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 280px 90px, #67e8f9, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 350px 270px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 480px 210px, #fbbf24, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 640px 340px, #38bdf8, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 780px 140px, #fef08a, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 890px 300px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 990px 220px, #00d2ff, rgba(0,0,0,0)),
    /* Deep Royal Navy Space Gradient */
    linear-gradient(180deg, #020a1c 0%, #051430 45%, #020713 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%,
                   320px 320px, 420px 420px, 360px 360px, 460px 460px, 520px 520px, 560px 560px, 440px 440px, 490px 490px, 390px 390px,
                   100% 100%;
  overflow-y: auto;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 18px;
  box-sizing: border-box;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: #f8fafc;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.gateway-overlay::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.gateway-overlay.hidden {
  display: none !important;
}

/* Background Glowing Auroras (Royal Gold & Cyan Hologram) */
.gateway-bg-decorations {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.gateway-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.38;
  animation: royalCosmicDrift 14s ease-in-out infinite alternate;
}

.gateway-blob-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #00d2ff 0%, rgba(2, 132, 199, 0.4) 55%, transparent 80%);
  top: -140px;
  left: -120px;
}

.gateway-blob-2 {
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, #f59e0b 0%, rgba(180, 83, 9, 0.4) 55%, transparent 80%);
  bottom: -150px;
  right: -130px;
  animation-delay: -7s;
}

.gateway-blob-3 {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, #0284c7 0%, rgba(14, 52, 107, 0.35) 55%, transparent 80%);
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.25;
  animation-duration: 18s;
}

@keyframes royalCosmicDrift {
  0% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.16) translate(35px, -25px); }
  100% { transform: scale(0.96) translate(-25px, 35px); }
}

/* 2. CONTAINER & HUD LAYOUT */
.gateway-container {
  position: relative;
  z-index: 1;
  max-width: 980px;
  width: 100%;
  margin: auto;
  animation: royalWarpIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes royalWarpIn {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 3. ROYAL COMMAND TOPBAR (SEPERTI LENCANA ANUGERAH CANVA) */
.gateway-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
  padding: 14px 24px;
  background: rgba(4, 18, 42, 0.78);
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 
              0 0 30px rgba(0, 210, 255, 0.18),
              inset 0 1px 2px rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: relative;
}

.gateway-topbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fbbf24, #00d2ff, #fbbf24, transparent);
}

.gateway-brand {
  display: flex;
  align-items: center;
  gap: 15px;
}

.gateway-brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #78350f 100%);
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 22px;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.6), inset 0 2px 2px rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(253, 230, 138, 0.8);
  position: relative;
  overflow: hidden;
}

.gateway-brand-mark::after {
  content: '';
  position: absolute;
  inset: -50%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(45deg);
  animation: royalLaserSweep 4s infinite;
}

@keyframes royalLaserSweep {
  0% { transform: translateX(-150%) rotate(45deg); }
  35%, 100% { transform: translateX(150%) rotate(45deg); }
}

.gateway-brand-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.5px;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 35%, #fbbf24 75%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.4));
}

.gateway-brand-version {
  font-size: 10px;
  font-weight: 900;
  padding: 3px 9px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.4));
  border: 1px solid rgba(251, 191, 36, 0.7);
  border-radius: 8px;
  color: #fef08a;
  -webkit-text-fill-color: #fef08a;
  letter-spacing: 0.8px;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.35);
}

.gateway-brand-sub {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  color: #93c5fd;
  letter-spacing: 1.6px;
  margin-top: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.gateway-top-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gateway-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  background: rgba(0, 210, 255, 0.12);
  border: 1px solid rgba(0, 210, 255, 0.4);
  border-radius: 30px;
  color: #67e8f9;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(0, 210, 255, 0.2);
  letter-spacing: 0.4px;
}

.gateway-live-dot {
  width: 9px;
  height: 9px;
  background: #00d2ff;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 10px #00d2ff;
}

.gateway-live-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(0, 210, 255, 0.5);
  animation: royalPing 2s infinite cubic-bezier(0, 0, 0.2, 1);
}

@keyframes royalPing {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

.gateway-btn-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 16px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.gateway-btn-close:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.6);
  color: #fca5a5;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(239, 68, 68, 0.35);
}

/* 4. HERO SECTION PERSIS TAJUK JAWIEXPLORE */
.gateway-intro {
  text-align: center;
  margin: 14px auto 32px;
  max-width: 720px;
}

.gateway-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(0, 210, 255, 0.2));
  border: 1.5px solid rgba(251, 191, 36, 0.6);
  border-radius: 30px;
  color: #fef08a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(251, 191, 36, 0.35);
}

.gateway-eyebrow .sparkle {
  color: #fbbf24;
  animation: royalTwinkle 1.8s infinite alternate ease-in-out;
}

@keyframes royalTwinkle {
  0% { transform: scale(0.8) rotate(0deg); opacity: 0.6; }
  100% { transform: scale(1.35) rotate(90deg); opacity: 1; filter: drop-shadow(0 0 8px #fde68a); }
}

.gateway-intro h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.2;
  margin: 18px 0 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 30%, #fbbf24 65%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.6px;
  filter: drop-shadow(0 4px 18px rgba(245, 158, 11, 0.45));
}

.gateway-intro p {
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* 5. 3D ROYAL HOLOGRAPHIC PODS (PERSIS KAD GURU INOVATOR) */
.gateway-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 950px;
  margin: 0 auto;
  perspective: 1200px;
}

.gateway-role-card {
  position: relative;
  min-height: 450px;
  background: linear-gradient(165deg, rgba(6, 26, 56, 0.88) 0%, rgba(2, 12, 28, 0.96) 100%);
  border: 1.5px solid rgba(0, 210, 255, 0.38);
  border-radius: 32px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 
              0 0 35px rgba(0, 210, 255, 0.15),
              inset 0 1px 2px rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  cursor: pointer;
  outline: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: royalZeroGravity 7s ease-in-out infinite alternate;
}

.gateway-role-card.substitute {
  background: linear-gradient(165deg, rgba(38, 22, 6, 0.88) 0%, rgba(18, 9, 2, 0.96) 100%);
  border-color: rgba(251, 191, 36, 0.42);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 
              0 0 35px rgba(245, 158, 11, 0.18),
              inset 0 1px 2px rgba(255, 255, 255, 0.2);
  animation-delay: -3.5s;
}

@keyframes royalZeroGravity {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(0.4deg); }
  100% { transform: translateY(3px) rotate(-0.4deg); }
}

.gateway-role-card:hover,
.gateway-role-card:focus-visible {
  transform: translateY(-14px) scale(1.025);
  border-color: #00d2ff;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.75), 
              0 0 55px rgba(0, 210, 255, 0.45),
              inset 0 1px 3px rgba(255, 255, 255, 0.4);
}

.gateway-role-card.substitute:hover,
.gateway-role-card.substitute:focus-visible {
  border-color: #fbbf24;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.75), 
              0 0 55px rgba(245, 158, 11, 0.45),
              inset 0 1px 3px rgba(255, 255, 255, 0.4);
}

/* Card Glow Ambience */
.gateway-card-glow {
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.18) 0%, transparent 65%);
  pointer-events: none;
  transition: opacity 0.4s ease;
  opacity: 0.55;
}

.gateway-role-card.substitute .gateway-card-glow {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, transparent 65%);
}

.gateway-role-card:hover .gateway-card-glow {
  opacity: 1;
}

/* Top Section of Card */
.gateway-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.gateway-role-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 7px 16px;
  border-radius: 30px;
  background: rgba(0, 210, 255, 0.18);
  border: 1.5px solid rgba(0, 210, 255, 0.5);
  color: #e0f2fe;
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.25);
}

.gateway-role-card.substitute .gateway-role-label {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(251, 191, 36, 0.55);
  color: #fef08a;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.25);
}

.gateway-role-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: rgba(0, 210, 255, 0.18);
  border: 1.5px solid rgba(0, 210, 255, 0.45);
  color: #38bdf8;
  display: grid;
  place-items: center;
  font-size: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease;
}

.gateway-role-card:hover .gateway-role-icon {
  transform: rotate(8deg) scale(1.1);
  color: #ffffff;
  border-color: #00d2ff;
}

.gateway-role-card.substitute .gateway-role-icon {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(251, 191, 36, 0.5);
  color: #fbbf24;
}

/* Hologram Art Center with 3D Orbital Rings (Persis Globe Hologram JawiXplore) */
.gateway-art {
  height: 135px;
  position: relative;
  display: grid;
  place-items: center;
  margin: 18px 0 12px;
  z-index: 2;
}

.gateway-art-halo {
  position: absolute;
  width: 115px;
  height: 115px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.5) 0%, rgba(2, 132, 199, 0.15) 65%, transparent 100%);
  animation: royalHaloPulse 4s ease-in-out infinite alternate;
}

.gateway-art-halo::before {
  content: '';
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 1.5px dashed rgba(251, 191, 36, 0.55);
  animation: royalOrbitSpin 12s linear infinite;
}

.gateway-role-card.substitute .gateway-art-halo {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.5) 0%, rgba(217, 119, 6, 0.15) 65%, transparent 100%);
}

.gateway-role-card.substitute .gateway-art-halo::before {
  border-color: rgba(0, 210, 255, 0.55);
  animation-duration: 15s;
  animation-direction: reverse;
}

@keyframes royalHaloPulse {
  0% { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1.16); opacity: 1; }
}

@keyframes royalOrbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.gateway-art-badge {
  width: 82px;
  height: 82px;
  border-radius: 26px;
  background: linear-gradient(135deg, #0284c7 0%, #03487c 50%, #08284d 100%);
  border: 2px solid rgba(251, 191, 36, 0.75);
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 34px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 
              0 0 30px rgba(0, 210, 255, 0.5),
              inset 0 2px 3px rgba(255, 255, 255, 0.5);
  position: relative;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gateway-role-card.substitute .gateway-art-badge {
  background: linear-gradient(135deg, #d97706 0%, #78350f 60%, #451a03 100%);
  border-color: rgba(253, 230, 138, 0.85);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 
              0 0 30px rgba(245, 158, 11, 0.5),
              inset 0 2px 3px rgba(255, 255, 255, 0.5);
}

.gateway-role-card:hover .gateway-art-badge {
  transform: scale(1.14) rotate(-4deg);
}

.gateway-role-card.substitute:hover .gateway-art-badge {
  transform: scale(1.14) rotate(4deg);
}

.gateway-spark {
  position: absolute;
  color: #fef08a;
  font-size: 17px;
  animation: royalSparkTwinkle 2.5s ease-in-out infinite;
}

.gateway-role-card.substitute .gateway-spark {
  color: #67e8f9;
}

.gateway-spark.s1 { top: 12px; left: 20%; animation-delay: 0s; }
.gateway-spark.s2 { bottom: 14px; right: 18%; animation-delay: 1.1s; }
.gateway-spark.s3 { top: 22px; right: 24%; animation-delay: 1.9s; }

@keyframes royalSparkTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.3) rotate(45deg); filter: drop-shadow(0 0 8px currentColor); }
}

/* Card Copy & Features */
.gateway-copy {
  position: relative;
  z-index: 2;
  margin-bottom: 22px;
}

.gateway-copy h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 24px;
  margin: 0 0 8px;
  color: #ffffff;
  letter-spacing: -0.4px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.gateway-copy p {
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
  font-weight: 400;
}

.gateway-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.gateway-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
}

.gateway-features li i {
  color: #fbbf24;
  font-size: 14px;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
}

.gateway-role-card.substitute .gateway-features li i {
  color: #00d2ff;
  filter: drop-shadow(0 0 4px rgba(0, 210, 255, 0.6));
}

/* Card Action CTA Button (Persis Butang Cyber Blue & Gold JawiXplore) */
.gateway-cta-btn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #075985 100%);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #ffffff;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.5), 
              0 0 20px rgba(0, 210, 255, 0.35),
              inset 0 1px 2px rgba(255, 255, 255, 0.5);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  letter-spacing: 0.3px;
}

.gateway-role-card.substitute .gateway-cta-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  border-color: rgba(253, 230, 138, 0.6);
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.5), 
              0 0 20px rgba(245, 158, 11, 0.35),
              inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.gateway-cta-btn::after {
  content: '';
  position: absolute;
  inset: -100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: rotate(30deg);
  transition: transform 0.6s ease;
}

.gateway-role-card:hover .gateway-cta-btn::after {
  transform: translateX(200%) rotate(30deg);
}

.gateway-arrow-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  font-size: 13px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.gateway-role-card:hover .gateway-arrow-circle {
  transform: translateX(6px);
  background: #fbbf24;
  color: #020817;
}

.gateway-role-card.substitute:hover .gateway-arrow-circle {
  background: #00d2ff;
  color: #020817;
}

/* 6. ORBITAL HELPER FOOTER BANNER (PERSIS FOOTER KATEGORI CANVA) */
.gateway-helper {
  max-width: 950px;
  margin: 28px auto 0;
  padding: 15px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #cbd5e1;
  font-size: 13.5px;
  background: rgba(4, 18, 42, 0.75);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 20px;
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.gateway-helper-icon {
  color: #fbbf24;
  font-size: 22px;
  flex-shrink: 0;
  animation: royalBeacon 3s infinite alternate;
}

@keyframes royalBeacon {
  0% { transform: scale(1); filter: drop-shadow(0 0 3px #fbbf24); }
  100% { transform: scale(1.2); filter: drop-shadow(0 0 10px #fbbf24); }
}

/* 7. HOLOGRAPHIC SUB-DIALOG POPUP */
.gateway-notice {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(1, 8, 20, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: none;
  place-items: center;
  padding: 20px;
}

.gateway-notice.open {
  display: grid;
}

.gateway-dialog {
  width: min(510px, 100%);
  padding: 36px 32px;
  border: 1.5px solid rgba(251, 191, 36, 0.5) !important;
  border-radius: 32px !important;
  background: linear-gradient(165deg, rgba(6, 26, 56, 0.96) 0%, rgba(2, 12, 28, 0.98) 100%) !important;
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.85), 
              0 0 60px rgba(0, 210, 255, 0.25),
              inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
  text-align: center;
  animation: royalDialogPop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #f8fafc;
}

.gateway-dialog.sub {
  border-color: rgba(251, 191, 36, 0.6) !important;
  background: linear-gradient(165deg, rgba(40, 22, 6, 0.96) 0%, rgba(18, 9, 2, 0.98) 100%) !important;
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.85), 
              0 0 60px rgba(245, 158, 11, 0.3),
              inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
}

.gateway-dialog-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 24px;
  background: rgba(0, 210, 255, 0.2);
  border: 1.5px solid rgba(0, 210, 255, 0.55);
  color: #00d2ff;
  display: grid;
  place-items: center;
  font-size: 30px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 25px rgba(0, 210, 255, 0.35);
}

.gateway-dialog.sub .gateway-dialog-icon {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(251, 191, 36, 0.55);
  color: #fbbf24;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 25px rgba(245, 158, 11, 0.35);
}

.gateway-dialog h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 25px;
  margin: 0 0 10px;
  color: #ffffff;
  letter-spacing: -0.4px;
}

.gateway-dialog p {
  color: #cbd5e1;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 24px;
}

.gateway-dialog-select-box {
  text-align: left;
  margin-bottom: 26px;
}

.gateway-dialog-select-box label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 9px;
  color: #fef08a;
}

.gateway-dialog-select-box select {
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid rgba(0, 210, 255, 0.45) !important;
  border-radius: 18px !important;
  background: #03142e !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  color-scheme: dark !important;
  outline: none;
  transition: all 0.25s ease;
  cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45);
}

.gateway-dialog-select-box select option {
  background: #04142b !important;
  color: #ffffff !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.gateway-dialog.sub .gateway-dialog-select-box select {
  border-color: rgba(251, 191, 36, 0.5) !important;
  background: #251204 !important;
}

.gateway-dialog.sub .gateway-dialog-select-box select option {
  background: #201004 !important;
  color: #fef08a !important;
}

.gateway-dialog-select-box select:focus {
  border-color: #00d2ff !important;
  box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.3), 0 0 18px rgba(0, 210, 255, 0.25);
}

.gateway-dialog.sub .gateway-dialog-select-box select:focus {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.3), 0 0 18px rgba(251, 191, 36, 0.25);
}

.gateway-dialog-actions {
  display: flex;
  gap: 14px;
}

.gateway-dialog button {
  border: 0 !important;
  border-radius: 18px !important;
  padding: 15px 22px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  cursor: pointer;
  transition: all 0.25s ease !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gateway-dialog .btn-back {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  flex: 1;
}

.gateway-dialog .btn-back:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

.gateway-dialog .btn-continue {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #075985 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.6) !important;
  color: #ffffff !important;
  flex: 1.5;
  box-shadow: 0 12px 30px rgba(2, 132, 199, 0.5) !important;
}

.gateway-dialog .btn-continue:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 36px rgba(2, 132, 199, 0.65) !important;
}

.gateway-dialog.sub .btn-continue {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
  border: 1px solid rgba(253, 230, 138, 0.6) !important;
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.5) !important;
}

.gateway-dialog.sub .btn-continue:hover {
  box-shadow: 0 16px 36px rgba(245, 158, 11, 0.65) !important;
}

@keyframes royalDialogPop {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 8. MOBILE & RESPONSIVE TWEAKS */
@media (max-width: 768px) {
  .gateway-overlay {
    padding: 16px 12px;
  }
  .gateway-topbar {
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 20px;
  }
  .gateway-brand-title {
    font-size: 17px;
  }
  .gateway-brand-sub {
    font-size: 8.5px;
  }
  .gateway-status-pill {
    display: none; /* Sembunyikan teks panjang status pada skrin kecil */
  }
  .gateway-intro h1 {
    font-size: 26px;
    margin: 14px 0 8px;
  }
  .gateway-intro p {
    font-size: 13px;
  }
  .gateway-cards {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 440px;
  }
  .gateway-role-card {
    min-height: auto;
    padding: 24px 20px;
    border-radius: 26px;
  }
  .gateway-art {
    height: 100px;
    margin: 12px 0 8px;
  }
  .gateway-art-badge {
    width: 68px;
    height: 68px;
    font-size: 28px;
    border-radius: 22px;
  }
  .gateway-copy h2 {
    font-size: 20px;
  }
  .gateway-copy p {
    font-size: 13px;
    margin-bottom: 14px;
  }
  .gateway-features li {
    font-size: 12px;
  }
  .gateway-helper {
    font-size: 12px;
    padding: 12px 18px;
    margin-top: 22px;
  }
}

/* 9. DEVICE SELECTION SPECIFIC STYLES (MOBILE vs LAPTOP/TABLET) */
.gateway-role-card.role-mobile {
  background: linear-gradient(165deg, rgba(4, 28, 58, 0.92) 0%, rgba(2, 14, 32, 0.98) 100%);
  border-color: rgba(0, 210, 255, 0.45);
}

.gateway-role-card.role-mobile:hover,
.gateway-role-card.role-mobile:focus-visible {
  border-color: #00d2ff;
  box-shadow: 0 35px 85px rgba(0, 0, 0, 0.8), 
              0 0 55px rgba(0, 210, 255, 0.5),
              inset 0 1px 3px rgba(255, 255, 255, 0.45);
}

.gateway-role-card.role-desktop {
  background: linear-gradient(165deg, rgba(32, 24, 6, 0.92) 0%, rgba(16, 12, 3, 0.98) 100%);
  border-color: rgba(251, 191, 36, 0.45);
}

.gateway-role-card.role-desktop:hover,
.gateway-role-card.role-desktop:focus-visible {
  border-color: #fbbf24;
  box-shadow: 0 35px 85px rgba(0, 0, 0, 0.8), 
              0 0 55px rgba(245, 158, 11, 0.5),
              inset 0 1px 3px rgba(255, 255, 255, 0.45);
}

.gateway-role-card.is-active-device {
  border-color: #10b981 !important;
  box-shadow: 0 0 45px rgba(16, 185, 129, 0.45), inset 0 0 20px rgba(16, 185, 129, 0.2) !important;
}

.gateway-role-card.is-active-device::before {
  content: 'SEDANG AKTIF';
  position: absolute;
  top: 14px;
  right: 18px;
  background: #10b981;
  color: #022c22;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 20px;
  box-shadow: 0 0 14px #10b981;
  z-index: 5;
}

.gateway-remember-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.gateway-remember-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid rgba(251, 191, 36, 0.6);
  background: rgba(2, 8, 23, 0.8);
  accent-color: #10b981;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.gateway-remember-checkbox:hover {
  transform: scale(1.1);
}

.animate-spin-slow {
  animation: spinSlow 8s linear infinite;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   3D ROYAL CYBER-HERITAGE LIVE CHAT DRAWER & BUBBLES
   ========================================================================== */
#drawer-tasmik-chat {
  background: linear-gradient(180deg, #030d22 0%, #061536 50%, #020919 100%) !important;
  border-left: 2px solid rgba(0, 210, 255, 0.45) !important;
  box-shadow: -12px 0 45px rgba(0, 0, 0, 0.8), 
              0 0 30px rgba(0, 210, 255, 0.2), 
              inset 1px 0 2px rgba(255, 255, 255, 0.2) !important;
  color: #f8fafc !important;
}

#drawer-tasmik-chat > div:first-child {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(6, 95, 70, 0.95) 100%) !important;
  border-bottom: 2px solid rgba(52, 211, 153, 0.4) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

/* Bar Identiti Guru */
#drawer-tasmik-chat > div:nth-child(2) {
  background: rgba(3, 16, 38, 0.95) !important;
  border-bottom: 1.5px solid rgba(0, 210, 255, 0.3) !important;
  color: #38bdf8 !important;
}

#chat-pilih-guru-nama {
  background: rgba(6, 25, 56, 0.95) !important;
  color: #fde68a !important;
  border: 1.5px solid rgba(245, 158, 11, 0.5) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  color-scheme: dark !important;
}

#chat-pilih-guru-nama option {
  background: #041228 !important;
  color: #ffffff !important;
}

/* Bar Reaksi Emoji */
#drawer-tasmik-chat > div:nth-child(3) {
  background: rgba(4, 18, 43, 0.9) !important;
  border-bottom: 1.5px solid rgba(251, 191, 36, 0.3) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

#drawer-tasmik-chat > div:nth-child(3) span {
  color: #fbbf24 !important;
}

#drawer-tasmik-chat > div:nth-child(3) button {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

#drawer-tasmik-chat > div:nth-child(3) button:hover {
  transform: scale(1.3) translateY(-2px);
}

/* Mesej Container */
#chat-messages-container {
  background: radial-gradient(circle at 50% 20%, rgba(2, 28, 66, 0.4) 0%, transparent 60%),
              linear-gradient(180deg, #020919 0%, #04122e 100%) !important;
}

/* Gelembung Mesej Saya (3D Emerald Glow) */
#chat-messages-container .bg-emerald-600 {
  background: linear-gradient(135deg, #059669 0%, #047857 50%, #064e3b 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.6) !important;
  box-shadow: 0 6px 18px rgba(4, 120, 87, 0.45), 
              0 2px 4px rgba(0, 0, 0, 0.4), 
              inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

/* Gelembung Mesej Orang Lain (3D Dark Glass Crystal) */
#chat-messages-container .bg-white {
  background: linear-gradient(145deg, rgba(12, 38, 77, 0.92) 0%, rgba(5, 20, 46, 0.96) 100%) !important;
  border: 1.5px solid rgba(0, 210, 255, 0.4) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 
              0 0 12px rgba(0, 210, 255, 0.15), 
              inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  color: #f1f5f9 !important;
}

/* Gelembung Mesej Admin (3D Royal Gold) */
#chat-messages-container .bg-amber-50\/90,
#chat-messages-container .bg-gradient-to-r.from-amber-500 {
  background: linear-gradient(135deg, #d97706 0%, #b45309 60%, #78350f 100%) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.7) !important;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.5), 
              0 0 16px rgba(245, 158, 11, 0.3), 
              inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
  color: #fef3c7 !important;
}

/* Bar Pantas */
#drawer-tasmik-chat > div:nth-last-child(2) {
  background: rgba(3, 14, 34, 0.95) !important;
  border-top: 1.5px solid rgba(0, 210, 255, 0.25) !important;
}

#drawer-tasmik-chat > div:nth-last-child(2) button {
  background: rgba(7, 30, 64, 0.85) !important;
  border: 1px solid rgba(0, 210, 255, 0.35) !important;
  color: #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease !important;
}

#drawer-tasmik-chat > div:nth-last-child(2) button:hover {
  background: rgba(14, 52, 107, 0.95) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.4) !important;
}

/* Input Bar Bahagian Bawah */
#drawer-tasmik-chat > div:last-child {
  background: rgba(2, 9, 23, 0.98) !important;
  border-top: 1.5px solid rgba(0, 210, 255, 0.3) !important;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.6) !important;
}

#chat-input-teks {
  background: rgba(4, 20, 48, 0.95) !important;
  border: 1.5px solid rgba(0, 210, 255, 0.4) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

#chat-input-teks::placeholder {
  color: #64748b !important;
}

#chat-input-teks:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

#drawer-tasmik-chat button[onclick="hantarMesejSesi()"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.6) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

#drawer-tasmik-chat button[onclick="hantarMesejSesi()"]:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.6), 0 0 15px rgba(52, 211, 153, 0.4) !important;
}

/* ==========================================================================
   3D DIALOG MODAL EDIT MURID, GURU & REKOD (ROYAL CRYSTAL DIALOGS)
   ========================================================================== */
#modal-edit-std .glass-card,
#modal-edit-guru .glass-card,
#modal-edit .glass-card {
  background: linear-gradient(165deg, rgba(7, 28, 58, 0.96) 0%, rgba(2, 14, 32, 0.98) 100%) !important;
  border: 1.8px solid rgba(0, 210, 255, 0.5) !important;
  border-radius: 26px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 
              0 0 35px rgba(0, 210, 255, 0.25),
              inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
  color: #f8fafc !important;
}

#modal-edit-std h2,
#modal-edit-guru h2,
#modal-edit h2 {
  color: #38bdf8 !important;
  border-bottom: 1.5px solid rgba(0, 210, 255, 0.3) !important;
  font-weight: 900 !important;
  text-shadow: 0 0 12px rgba(0, 210, 255, 0.4);
}

#modal-edit-std label,
#modal-edit-guru label,
#modal-edit label {
  color: #fde68a !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
}

#modal-edit-std input[type="text"],
#modal-edit-guru input[type="text"],
#modal-edit input[type="text"],
#modal-edit select,
#modal-edit textarea {
  background: rgba(3, 16, 40, 0.95) !important;
  border: 1.5px solid rgba(0, 210, 255, 0.4) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6) !important;
  font-weight: 700 !important;
}

#modal-edit-std input[type="text"]:focus,
#modal-edit-guru input[type="text"]:focus,
#modal-edit input[type="text"]:focus,
#modal-edit select:focus,
#modal-edit textarea:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 15px rgba(0, 210, 255, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

#modal-edit-std button[onclick*="simpan"],
#modal-edit-guru button[onclick*="simpan"],
#modal-edit button[type="submit"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 60%, #047857 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.6) !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#modal-edit-std button[onclick*="simpan"]:hover,
#modal-edit-guru button[onclick*="simpan"]:hover,
#modal-edit button[type="submit"]:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 10px 24px rgba(16, 185, 129, 0.6), 0 0 15px rgba(52, 211, 153, 0.4) !important;
}

#modal-edit-std button[onclick*="closeModal"],
#modal-edit-guru button[onclick*="closeModal"],
#modal-edit button[onclick*="closeModal"] {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.3) !important;
  color: #cbd5e1 !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
}

#modal-edit-std button[onclick*="closeModal"]:hover,
#modal-edit-guru button[onclick*="closeModal"]:hover,
#modal-edit button[onclick*="closeModal"]:hover {
  background: rgba(30, 41, 59, 0.9) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   3D TAB ANALISIS & GRAF TREND LAPORAN
   ========================================================================== */
#section-analisis .card-analisis-deck-3d {
  background: linear-gradient(165deg, rgba(5, 20, 45, 0.95) 0%, rgba(2, 10, 24, 0.98) 100%) !important;
  border: 1.8px solid rgba(0, 210, 255, 0.4) !important;
  border-radius: 26px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 
              0 0 30px rgba(0, 210, 255, 0.15),
              inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
  color: #f8fafc !important;
}

#section-analisis h2 {
  color: #38bdf8 !important;
  font-weight: 900 !important;
  text-shadow: 0 0 12px rgba(0, 210, 255, 0.35);
}

/* Butang Tindakan Analisis (Juz, Excel, PPD) */
.btn-analisis-act-3d {
  border-radius: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-analisis-act-3d:hover {
  transform: translateY(-2px) scale(1.03) !important;
}

.btn-analisis-juz {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.6) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45) !important;
}

.btn-analisis-excel {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.6) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45) !important;
}

.btn-analisis-ppd {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.6) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.45) !important;
}

/* Kad-kad KPI Metrik 3D */
.kpi-stat-3d {
  border-radius: 18px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 
              inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.kpi-stat-3d:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55) !important;
}

/* Kad Kristal Graf Analisis */
.card-analisis-crystal-3d,
.card-trend-deck-3d {
  background: linear-gradient(155deg, rgba(7, 24, 52, 0.9) 0%, rgba(2, 12, 28, 0.95) 100%) !important;
  border: 1.5px solid rgba(0, 210, 255, 0.3) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 
              0 0 18px rgba(0, 210, 255, 0.1),
              inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
  color: #f1f5f9 !important;
}

.card-analisis-crystal-3d h3,
.card-trend-deck-3d h3 {
  color: #38bdf8 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
}

/* Kawalan Penapis Graf Dinamik dalam Analisis */
#section-analisis .bg-indigo-50\/70,
#section-analisis .bg-gray-100 {
  background: rgba(3, 16, 38, 0.85) !important;
  border: 1.5px solid rgba(0, 210, 255, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

#section-analisis select,
#section-analisis input {
  background: rgba(6, 25, 56, 0.95) !important;
  border: 1.5px solid rgba(0, 210, 255, 0.4) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
  color-scheme: dark !important;
}

#section-analisis select option {
  background: #041228 !important;
  color: #ffffff !important;
}