:root {
  --blue: #0759ce;
  --red: #f21e2b;
  --yellow: #faea04;
  --cream: #f4efdf;
  --ink: #000000;
  --display: "Barlow Condensed", Impact, sans-serif;
  --body: "Inter", Arial, sans-serif;
  --mono: "Space Mono", monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 48px;
}

body {
  margin: 0;
  background: var(--ink);
  color: white;
  font-family: var(--body);
  overflow-x: clip;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { display: block; max-width: 100%; }

button:focus-visible, a:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8,9,11,.97);
  border-bottom: 1px solid #262626;
  backdrop-filter: blur(12px);
}

.topbar-inner {
  width: min(1120px, 90%);
  height: 44px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mini-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
}

.mini-brand img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.recording {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #eee;
  font: 12px var(--mono);
}

.rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  animation: blink 1.2s infinite;
}

#clock { color: #aaa; margin-left: 4px; }



.blue-section {
  background-color: #0759ce;
  background-image:
    repeating-linear-gradient(
      150deg,
      transparent 0 75px,
      rgba(255, 255, 255, 0.07) 76px 78px
    ),
    linear-gradient(
      120deg,
      #f21e2b 0%,
      #f21e2b 27%,
      #0759ce 27.1%,
      #0759ce 100%
    );
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: min(1120px, 90%);
  margin: auto;
  padding: 46px 0 24px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  column-gap: 34px;
  row-gap: 26px;
  align-items: center;
}

.hero-copy, .hero-visual { min-width: 0; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #e5efff;
  font: 10px var(--mono);
  letter-spacing: 1.5px;
}

.eyebrow span {
  width: 20px;
  height: 3px;
  background: var(--yellow);
}

.logo-type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  font: italic 900 clamp(49px, 6.2vw, 80px)/.88 var(--display);
  letter-spacing: -2px;
  transform: skew(-3deg);
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,.3));
}

.logo-type {
  transform: skewY(-7deg);
  transform-origin: left bottom;
}

/* SUPER: putih + garis hitam + bayangan hitam */
.logo-type .title-white {
  color: #ffffff;
  -webkit-text-stroke: 2px #000000;
  paint-order: stroke fill;
  text-shadow:
    2px 2px 0 #000000,
    4px 4px 0 #000000,
    6px 6px 0 #000000;
}

/* UNIPCS: oranye + garis hitam + bayangan hitam */
.logo-type .title-yellow {
  color: #fffb00;
  -webkit-text-stroke: 2px #000000;
  paint-order: stroke fill;
  text-shadow:
    2px 2px 0 #000000,
    4px 4px 0 #ec0808,
    6px 6px 0 #000000;
}


.hero-headline {
  margin: 23px 0 10px;
  font: italic 900 clamp(30px, 3.9vw, 49px)/.94 var(--display);
  text-shadow: 2px 3px 0 rgba(0,0,0,.2);
  
-webkit-text-stroke: 2px #000000;
paint-order: stroke fill;

}


.hero-headline span { color: var(--yellow); }

.hero-description {
  margin: 16px 0 0;
  color: #f2f6ff;
  font-size: 14px;
  line-height: 1.62;
}

.hero-buttons {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.action-button {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 10px 18px;
  border: 3px solid #08090b;
  box-shadow: 4px 5px 0 #08090b;
  color: #090909;
  cursor: pointer;
  font: italic 900 21px var(--display);
  transition: transform .15s, box-shadow .15s;
}

.action-button:hover {
  transform: translate(-2px,-2px);
  box-shadow: 6px 7px 0 #08090b;
}

.action-button:active {
  transform: translate(3px,3px);
  box-shadow: 1px 2px 0 #08090b;
}

.button-red { color: white; background: var(--red); }
.button-cream { background: var(--cream); }

.status-message {
  min-height: 16px;
  margin-top: 12px;
  color: var(--yellow);
  font: 10px var(--mono);
}

/* VIDEO: UKURAN FRAME TETAP SEBELUM DAN SESUDAH PLAY */
.hero-visual {
  width: 100%;
  min-width: 0;
}

.visual-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  background: #061328;
  border: 5px solid #08090b;
  box-shadow: 7px 8px 0 rgba(0,0,0,.2);
  transform: rotate(-1deg);
}

#suVideo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #061328;
}


/* Tombol selalu di atas video */
.frame-top {
  position: absolute;
  top: 13px;
  left: 15px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
}

.play-label {
  font: 900 15px var(--display);
  text-shadow: 1px 2px 4px #000;
}

.play-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  cursor: pointer;
  transition: background .2s, transform .2s;
}

.play-button:hover {
  background: var(--red);
  transform: scale(1.08);
}

.play-triangle {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid white;
}

.visual-caption {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 17px;
  font: 9px var(--mono);
}

.visual-caption span:first-child {
  color: var(--yellow);
}

.visual-caption span:last-child {
  color: #b6ff7a;
}



.hero-decoration {
  position: absolute;
  z-index: 1;
  width: 170px;
  height: 230px;
  background: var(--red);
  transform: skewY(-34deg);
  pointer-events: none;
}

.decoration-one { left: -120px; top: -130px; }
.decoration-two { right: -125px; bottom: -160px; }

.contract-bar {
  display: flex;
  align-items: stretch;
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.8);
  background: rgba(4,9,17,.85);
}

.contract-top { grid-column: 1 / -1; }

.ca-label {
  display: grid;
  place-items: center;
  flex: 0 0 47px;
  background: var(--red);
  border-right: 1px solid #08090b;
  font: 900 15px var(--display);
}

.ca-value {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 8px 14px;
  overflow: hidden;
  color: #f4f4f4;
  font: 10px var(--mono);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ca-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.6);
  background: transparent;
  color: white;
  cursor: pointer;
}

.ca-icon:hover { background: var(--yellow); color: #08090b; }

.ca-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hazard-divider {
  height: 12px;
  background: repeating-linear-gradient(135deg, #fc0505 0 12px, #ffe22c 12px 20px);
  border-top: 2px solid #08090b;
  border-bottom: 2px solid #08090b;
}

.mission {
  position: relative;
  overflow: hidden;
}

.mission-one {
  color: #101010;
  background-color: var(--cream);
  background-image: radial-gradient(rgba(0,0,0,.05) .7px, transparent .7px);
  background-size: 5px 5px;
}

.mission-inner {
  position: relative;
  width: min(1120px, 90%);
  margin: auto;
  padding: 42px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.mission-copy { min-width: 0; }

.mission-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 9px;
  background: rgba(0,0,0,.07);
  color: #111;
  font: 10px var(--mono);
  transform: rotate(-2deg);
}

.section-title {
  margin: 0;
  font: italic 900 clamp(43px, 5.5vw, 70px)/.88 var(--display);
  letter-spacing: -1px;
}

.mission-subtitle {
  margin: 19px 0 14px;
  font: italic 900 clamp(14px, 1.7vw, 19px)/1.15 var(--display);
}

.mission-copy > p {
  max-width: 480px;
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.65;
}

.polaroid {
  min-width: 0;
  margin: 0;
  padding: 11px 11px 0;
  background: white;
  box-shadow: 6px 8px 0 rgba(0,0,0,.22);
  color: #101010;
}

.polaroid-one { transform: rotate(-4deg); }
.polaroid-two { transform: rotate(4deg); }

.photo-wrap {
  width: 100%;
  aspect-ratio: 1.38;
  overflow: hidden;
  background: #0a1b35;
}

.photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}

.polaroid:hover .photo-wrap img { transform: scale(1.04); }

.polaroid figcaption {
  min-height: 37px;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 9px var(--mono);
}

.figure-number {
  padding: 5px 7px;
  background: var(--red);
  color: white;
  white-space: nowrap;
}

.mission-two { color: white; }

.mission-two .mission-inner {
  padding-top: 44px;
  padding-bottom: 74px;
}

.mission-tag-light { background: var(--cream); }

.section-logo { font-size: clamp(53px, 6.2vw, 78px); }
.light-subtitle { margin-top: 20px; }

.mission-two .mission-copy > p {
  font-size: 13px;
  line-height: 1.55;
}

.big-statement {
  position: absolute;
  left: 0;
  bottom: 22px;
  margin: 0;
  font: italic 900 clamp(17px, 2.2vw, 27px)/1 var(--display);
}



.footer {
  background: #f4efdf;
  color: #08090b;
  border-top: 1px solid #f21e2b;
}


.footer-inner {
  width: min(1120px, 90%);
  margin: auto;
  padding: 26px 0 22px;
}

.end-tape {
  margin: 0 0 18px;
  font: italic 900 13px var(--display);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.footer-logo {
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 3px solid #343434;
  border-radius: 50%;
}

.footer-brand-copy h2 {
  margin: 0;
  font: 900 clamp(30px, 4vw, 48px)/1 var(--display);
}

.footer-brand-copy p {
  margin: 8px 0 0;
  color: #e5e5e5;
  font: 13px var(--mono);
}

.footer-brand-copy p span { margin: 0 8px; color: var(--yellow); }
.contract-bottom { margin-top: 8px; }

.twitter-link {
  display: inline-flex;
  width: 27px;
  height: 27px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  color: #08090b;
}

.twitter-link:hover { color: var(--yellow); }
.twitter-link svg { width: 24px; height: 24px; fill: currentColor; }

.copyright {
  margin: 16px 0 0;
  color: #777;
  font: 9px var(--mono);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 25px;
  z-index: 100;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  background: #111;
  border: 1px solid var(--yellow);
  color: white;
  font: 12px var(--mono);
  box-shadow: 4px 4px 0 rgba(0,0,0,.2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .2s, transform .2s;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

@media (max-width: 760px) {
  .topbar-inner { width: 90%; height: 42px; }
  .mini-brand { gap: 8px; font-size: 12px; }
  .mini-brand img { width: 30px; height: 30px; }
  .recording { gap: 5px; font-size: 10px; }

  .hero-inner {
    width: 88%;
    padding: 32px 0 22px;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .eyebrow { font-size: 9px; }
  .logo-type { font-size: clamp(56px, 13vw, 79px); }
  .hero-headline { font-size: clamp(34px, 8.5vw, 47px); }
  .hero-description { font-size: 13px; }

  .action-button { min-height: 46px; font-size: 20px; }

  .hero-visual { margin: 2px 3px 0; }
  .visual-frame {   aspect-ratio: 16 / 9; border-width: 4px; }
  .frame-top { top: 10px; left: 11px; }
  .play-label { font-size: 14px; }
  .play-button { width: 32px; height: 32px; }

  .visual-caption { font-size: 8px; margin-top: 13px; }

  .contract-bar { min-height: 39px; }
  .ca-label { flex-basis: 43px; }
  .ca-value { padding: 7px 8px; font-size: 9px; }
  .ca-icon { flex-basis: 38px; }
  .ca-icon svg { width: 18px; height: 18px; }

  .mission-inner {
    width: 86%;
    padding: 33px 0;
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .section-title { font-size: clamp(48px, 12vw, 65px); }
  .mission-subtitle { font-size: 17px; }
  .mission-copy > p { font-size: 13px; }

  .polaroid {
    width: 91%;
    margin: 6px auto 10px;
    padding: 8px 8px 0;
  }

  .polaroid-one { transform: rotate(-2deg); }
  .polaroid-two { transform: rotate(2deg); }

  .mission-two .mission-inner {
    padding-top: 34px;
    padding-bottom: 75px;
    gap: 22px;
  }

  .section-logo { font-size: clamp(57px, 13vw, 76px); }
  .mission-two .mission-copy > p { font-size: 12px; }

  .big-statement {
    bottom: 25px;
    font-size: clamp(17px, 4.4vw, 24px);
  }

  .footer-inner { width: 88%; padding: 24px 0 20px; }
  .footer-brand { gap: 12px; }
  .footer-logo { flex-basis: 74px; width: 74px; height: 74px; }
  .footer-brand-copy h2 { font-size: clamp(26px, 6.8vw, 39px); }
  .footer-brand-copy p { font-size: 10px; line-height: 1.5; }
  .footer-brand-copy p span { margin: 0 3px; }
}

@media (max-width: 360px) {
  .mini-brand { font-size: 10px; }
  .recording { font-size: 9px; }
  .ca-value { font-size: 8px; padding: 6px; }
  .ca-icon { flex-basis: 33px; }
  .footer-logo { flex-basis: 60px; width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* Force footer text and X icon to black */
.footer,
.footer p,
.footer a,
.footer a:visited,
.footer a:hover,
.footer-arrow,
.twitter-link {
  color: #000000 !important;
}




/* Cream footer with subtle grain texture */
.footer {
  background-color: #f4efdf !important;
  background-image: radial-gradient(
    rgba(175, 174, 174, 0.103) 0.7px,
    transparent 0.8px
  ) !important;
  background-size: 6px 6px !important;
  background-blend-mode: multiply;
}