/* Learning With Badri — hero beranda mode gelap: kadet luar angkasa interaktif.
   Bingkai 1440×810 menutupi layar; semua ukuran memakai satuan --u. */
.cd-hero {
  --u: max(100vw / 1440, 100dvh / 810);
  position: relative; height: 100vh; height: 100dvh; overflow: hidden;
  background: #02040D; color: #fff; font-family: 'Urbanist', 'Inter', sans-serif;
}
html[data-theme="light"] .cd-hero { display: none; }
.cd-frame {
  position: absolute; width: calc(1440 * var(--u)); height: calc(810 * var(--u));
  left: calc(50% - 720 * var(--u)); top: calc(50% - 405 * var(--u));
}
.cd-abs { position: absolute; }
.cd-plate { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.cd-head {
  left: calc(510 * var(--u)); top: calc(255 * var(--u)); width: calc(435 * var(--u)); height: calc(450 * var(--u));
  object-fit: fill; opacity: 0; transition: opacity .6s ease; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 46%, #000 72%, transparent 99%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 46%, #000 72%, transparent 99%);
}
.cd-head.is-ready { opacity: 1; }
.cd-helmet {
  left: calc(533 * var(--u)); top: calc(288 * var(--u)); width: calc(360 * var(--u)); height: calc(360 * var(--u));
  mix-blend-mode: screen; opacity: 0; pointer-events: none; transform: translateY(calc(-70 * var(--u)));
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 76%, transparent 92%);
}

/* Teks & tombol di atas bingkai: posisi dalam satuan bingkai lewat --fx/--fy */
.cd-ov { position: absolute; --fx: calc(50% - 720 * var(--u)); --fy: calc(50% - 405 * var(--u)); z-index: 3; }
.cd-copy { left: 0; right: 0; top: calc(var(--fy) + 122 * var(--u)); text-align: center; pointer-events: none; }
.cd-eyebrow { margin: 0; font-weight: 700; font-size: calc(18 * var(--u)); letter-spacing: .46em; color: #CDD2E6; padding-left: .46em; }
.cd-title {
  margin: 0; font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; font-stretch: 94%;
  font-variation-settings: 'wdth' 94; font-size: calc(100 * var(--u)); line-height: 1.12; letter-spacing: -.02em;
  text-shadow: 0 0 calc(14 * var(--u)) #fff, 0 0 calc(34 * var(--u)) #b9d4ff, 0 0 calc(70 * var(--u)) #3b82f6;
}
.cd-sub { margin: calc(9 * var(--u)) 0 0; font-weight: 600; font-size: calc(23 * var(--u)); color: #CDD2E6; }
.cd-cta { left: max(16px, calc(var(--fx) + 55 * var(--u))); top: calc(var(--fy) + 590 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); align-items: flex-start; }
.cd-cta p { margin: 0; max-width: calc(330 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.45; color: #CDD2E6; font-weight: 600; }
.cd-cta-row { display: flex; gap: calc(10 * var(--u)); flex-wrap: wrap; }
.cd-btn {
  display: inline-flex; align-items: center; gap: .4em; padding: calc(12 * var(--u)) calc(22 * var(--u)); border-radius: 999px;
  font: 700 calc(16 * var(--u)) 'Urbanist', sans-serif; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #f97316, #ea580c); box-shadow: 0 0 calc(24 * var(--u)) rgba(249, 115, 22, .45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cd-btn:hover { transform: translateY(-2px); box-shadow: 0 0 calc(36 * var(--u)) rgba(249, 115, 22, .7); }
.cd-btn--ghost { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .28); box-shadow: none; backdrop-filter: blur(6px); }
.cd-btn--ghost:hover { box-shadow: 0 0 calc(24 * var(--u)) rgba(125, 170, 255, .35); }
.cd-cap { font-weight: 700; font-size: calc(12.2 * var(--u)); color: #CDD2E6; letter-spacing: .04em; top: calc(var(--fy) + 745 * var(--u)); }
.cd-cap--l { left: max(16px, calc(var(--fx) + 55 * var(--u))); }
.cd-cap--r { right: max(16px, calc(var(--fx) + 55 * var(--u))); }
/* Tombol PUSH ME di dada */
.cd-push {
  left: calc(675 * var(--u)); top: calc(720 * var(--u)); width: calc(75 * var(--u)); height: calc(75 * var(--u));
  border-radius: 50%; border: 0; padding: 0; cursor: pointer; color: #fff;
  font: 700 calc(16.5 * var(--u))/1.02 'Urbanist', sans-serif;
  background: radial-gradient(circle at 38% 30%, #ff8a80 0%, #ef2b2b 38%, #b31212 78%, #7f0b0b 100%);
  box-shadow: 0 0 0 calc(4 * var(--u)) #1f2533, 0 0 0 calc(6 * var(--u)) rgba(255, 255, 255, .35), inset 0 calc(-4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .35);
  transition: box-shadow .3s ease;
}
.cd-push[aria-pressed="true"] { box-shadow: 0 0 0 calc(4 * var(--u)) #1f2533, 0 0 0 calc(6 * var(--u)) rgba(255, 255, 255, .35), 0 0 calc(40 * var(--u)) calc(6 * var(--u)) rgba(255, 50, 50, .75); }
.cd-push:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* Kursor cincin + titik (hanya pointer halus, hanya di hero) */
.cd-dot, .cd-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 60; border-radius: 50%; opacity: 0; transition: opacity .2s; }
.cd-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #fff; }
.cd-ring { width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1.5px solid #fff; }
@media (pointer: fine) {
  .cd-hero.has-cursor, .cd-hero.has-cursor * { cursor: none; }
  .cd-hero.has-cursor .cd-dot, .cd-hero.has-cursor .cd-ring { opacity: 1; }
}

/* HP: teks di atas, tombol & keterangan menempel di pojok layar */
@media (max-width: 820px), (max-aspect-ratio: 5/4) {
  .cd-copy { top: 84px; left: 16px; right: 16px; }
  .cd-eyebrow { font-size: 14px; }
  .cd-title { font-size: clamp(40px, 13vw, 64px); }
  .cd-sub { font-size: 16px; margin-top: 6px; }
  .cd-cta { left: 16px; right: 16px; top: auto; bottom: 46px; align-items: center; }
  .cd-cta p { display: none; }
  .cd-cta-row { justify-content: center; }
  .cd-btn { font-size: 14px; padding: 10px 18px; }
  .cd-cap { top: auto; bottom: 14px; font-size: 11px; }
  .cd-cap--l { left: 16px; } .cd-cap--r { right: 16px; }
}
/* Gerakan dikurangi */
@media (prefers-reduced-motion: reduce) { .cd-head { display: none; } }

/* ---------- Animasi masuk saat discroll (semua bagian beranda) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }