/* ==========================================================
   CAPITAL MARKET RUN 2026 — VISUAL SYSTEM REVISION
   Background berdasarkan key visual yang diberikan.
   ========================================================== */
:root{
  --cmr-blue:#0879c9;
  --cmr-blue-dark:#063d79;
  --cmr-navy:#061d45;
  --cmr-gold:#ffd11a;
  --cmr-white:#fff;
  --cmr-red:#ef233c;
  --cmr-glass:rgba(4,25,65,.72);
  --cmr-border:rgba(255,255,255,.18);
}

html,body{min-height:100%}

body{
  background:
    linear-gradient(180deg,rgba(2,35,82,.22),rgba(3,29,67,.72)),
    url("capital-market-run-bg.png") center top / cover fixed no-repeat,
    #063f7c !important;
}

/* Lapisan kaca agar teks tetap terbaca di atas artwork. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,32,72,.05) 0%,rgba(2,24,58,.22) 48%,rgba(2,20,48,.58) 100%);
}

.navbar{
  background:rgba(3,25,59,.82) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}

.hero{
  min-height:780px !important;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(2,42,91,.08),rgba(2,30,70,.45)),
    url("capital-market-run-bg.png") center top / cover no-repeat !important;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 48%,rgba(3,28,65,.48) 100%);
  pointer-events:none;
}

.hero-chart{opacity:.14 !important}
.hero-inner{position:relative;z-index:2}

.hero-title{
  text-shadow:0 8px 30px rgba(0,0,0,.28);
}

.hero-desc{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}

.hero-info{
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
}

.hero-chip,
.ticket-card,
.card,
.benefit-card,
.cta-banner,
.video-wrapper{
  background:rgba(4,29,70,.78) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.20) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.hero-chip{
  border-radius:18px !important;
}

.page-head{
  background:
    linear-gradient(180deg,rgba(3,42,88,.52),rgba(3,29,67,.72)),
    url("capital-market-run-bg.png") center 18% / cover no-repeat !important;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.section,
.video-section{
  position:relative;
}

.section-alt{
  background:rgba(1,25,58,.30) !important;
}

.section-head,
.page-head .container{
  position:relative;
  z-index:1;
}

.video-section{
  background:rgba(2,27,63,.18) !important;
}

.video-wrapper{
  border-radius:24px !important;
  overflow:hidden;
}

.footer{
  background:rgba(2,19,45,.88) !important;
  border-top:1px solid rgba(255,255,255,.12);
}

.status-badge{
  box-shadow:0 8px 25px rgba(0,0,0,.18);
}

.btn-gold{
  box-shadow:0 12px 30px rgba(255,209,26,.22);
}

.ticket-grid{
  align-items:stretch;
}

.ticket-card{
  border-radius:22px !important;
  overflow:hidden;
}

.ticket-card:hover{
  transform:translateY(-5px);
}

.page-title,
.section-title{
  text-shadow:0 6px 24px rgba(0,0,0,.24);
}

/* QRIS */
.qris-countdown{
  margin:0 auto 20px;
  max-width:420px;
  padding:16px 20px;
  border:1px solid rgba(239,35,60,.38);
  border-radius:18px;
  background:rgba(80,7,17,.35);
  text-align:center;
  box-shadow:0 14px 36px rgba(0,0,0,.18);
}

.qris-countdown-label{
  display:block;
  color:#ffe4e7;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:3px;
}

#qrisCountdown{
  display:block;
  color:#ff334b !important;
  font-size:clamp(2rem,7vw,3rem);
  line-height:1.05;
  font-weight:950;
  letter-spacing:3px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 22px rgba(239,35,60,.28);
}

.qris-countdown.expired{
  background:rgba(70,8,14,.58);
  border-color:rgba(255,51,75,.75);
}

.qris-countdown.expired #qrisCountdown{
  color:#ff6b78 !important;
}

.qris-expired-note{
  margin-top:7px;
  color:#ffd4d8;
  font-size:.78rem;
  font-weight:700;
}

.qris-frame{
  max-width:430px;
  margin-left:auto;
  margin-right:auto;
  background:#fff !important;
  border-radius:22px !important;
  padding:18px !important;
  box-shadow:0 20px 55px rgba(0,0,0,.35) !important;
}

.qris-image{
  width:100%;
  max-height:430px;
  object-fit:contain;
}

.qris-error{
  color:#7a1f1f !important;
}

@media (max-width:760px){
  body{
    background-attachment:scroll;
    background-position:center top;
  }
  .hero{
    min-height:720px !important;
    background-position:center top !important;
  }
  .hero-info{
    grid-template-columns:1fr !important;
  }
  .qris-countdown{
    margin-bottom:16px;
  }
}


/* ============================================================
   CAPITAL MARKET RUN 2026 — PROFESSIONAL RESPONSIVE LAYER
   Android • iPhone/iPad • Desktop
   ============================================================ */

:root{
  --cmr-bg:#062e67;
  --cmr-bg-deep:#031d46;
  --cmr-panel:rgba(3,28,68,.78);
  --cmr-panel-solid:#082d67;
  --cmr-line:rgba(255,255,255,.14);
  --cmr-gold:#ffd21a;
  --cmr-red:#ef233c;
  --cmr-text:#fff;
  --cmr-muted:#c8d6ef;
  --cmr-max:1180px;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
}

body{
  min-width:320px;
  overflow-x:hidden;
  background:
    linear-gradient(180deg,rgba(2,38,85,.16),rgba(2,24,58,.72)),
    #062e67 !important;
  color:var(--cmr-text);
}

/* Tidak memakai fixed background: lebih stabil di iOS Safari dan Android Chrome. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,54,110,.08),rgba(2,25,60,.55)),
    url("capital-market-run-bg.png") center top / cover no-repeat;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,26,62,.03) 0%,rgba(0,20,50,.16) 55%,rgba(0,15,39,.52) 100%);
}

.container{
  width:min(100% - 32px,var(--cmr-max));
  padding:0;
}

/* NAVBAR: sederhana, bersih, tanpa logo institusi di bagian paling atas. */
.navbar{
  position:sticky !important;
  top:0;
  z-index:1000;
  background:rgba(2,18,45,.88) !important;
  border-bottom:1px solid var(--cmr-line) !important;
  box-shadow:0 8px 30px rgba(0,0,0,.18) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  padding-top:env(safe-area-inset-top);
}

.nav-inner{
  min-height:66px;
  padding:10px 0 !important;
}

.brand{
  min-width:0;
  gap:10px;
}

.brand-badge{
  width:38px !important;
  height:38px !important;
  border-radius:12px !important;
  box-shadow:0 5px 18px rgba(255,197,41,.22) !important;
}

.brand-text{
  font-size:.9rem !important;
  white-space:nowrap;
}

.nav-menu{
  gap:4px !important;
}

.nav-link{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.nav-cta{
  border-radius:11px !important;
}

.hero{
  min-height:clamp(650px,88svh,860px) !important;
  padding:76px 0 92px !important;
  display:flex;
  align-items:center;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(4,50,102,.08),rgba(2,28,67,.50)),
    url("capital-market-run-bg.png") center top / cover no-repeat !important;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(0,27,64,0) 35%,rgba(0,22,53,.52) 100%);
}

.hero-chart{
  display:none !important; /* grafik sudah menjadi bagian key visual background */
}

.hero-inner{
  width:min(100% - 32px,900px);
}

.status-badge{
  border-color:rgba(255,210,26,.72) !important;
  background:rgba(2,25,59,.55) !important;
  box-shadow:0 8px 25px rgba(0,0,0,.14);
}

.hero-title{
  font-size:clamp(2.05rem,7vw,4.9rem) !important;
  line-height:1.02 !important;
  letter-spacing:-1.8px !important;
  text-wrap:balance;
}

.hero-desc{
  max-width:720px !important;
  color:#eef4ff !important;
  font-size:clamp(.98rem,2.2vw,1.16rem) !important;
  text-shadow:0 4px 20px rgba(0,0,0,.3);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px !important;
}

.hero-actions .btn{
  min-height:50px;
}

.cmr-announcement{
  margin-top:20px !important;
}

.hero-info{
  margin-top:18px !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
}

.hero-chip{
  min-height:74px;
  border-radius:16px !important;
  background:rgba(3,27,65,.74) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  box-shadow:0 12px 35px rgba(0,0,0,.16) !important;
}

.section{
  position:relative;
  padding:78px 0 !important;
}

.section-alt{
  background:rgba(1,24,56,.40) !important;
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}

.section-head{
  margin-bottom:38px !important;
}

.ticket-grid,
.benefit-grid{
  align-items:stretch;
}

.ticket-card,
.benefit-card,
.card,
.cta-banner,
.video-wrapper{
  border-radius:22px !important;
  border:1px solid var(--cmr-line) !important;
  background:rgba(3,27,65,.78) !important;
  box-shadow:0 18px 55px rgba(0,0,0,.18) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.ticket-card,
.benefit-card{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.ticket-card:hover,
.benefit-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,210,26,.32) !important;
}

.btn{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  min-height:46px;
}

input,select,textarea{
  width:100%;
  min-height:46px;
  font-size:16px !important; /* cegah auto-zoom iOS */
}

button,
a{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

video{
  width:100%;
  height:auto;
  border-radius:inherit;
}

.page-head{
  min-height:300px;
  display:flex;
  align-items:center;
  background:
    linear-gradient(180deg,rgba(2,36,80,.20),rgba(2,24,58,.72)),
    url("capital-market-run-bg.png") center 24% / cover no-repeat !important;
}

.footer{
  padding-bottom:calc(28px + env(safe-area-inset-bottom)) !important;
}

/* QRIS */
.qris-countdown{
  width:min(100%,430px);
  margin-inline:auto !important;
  border-radius:20px !important;
}

#qrisCountdown{
  color:#ff334b !important;
  font-variant-numeric:tabular-nums;
}

.qris-frame{
  width:min(100%,440px);
  margin-inline:auto;
}

@media (min-width:821px){
  .navbar .nav-inner{
    max-width:var(--cmr-max);
  }
}

@media (max-width:820px){
  .container{
    width:min(100% - 28px,var(--cmr-max));
  }

  .nav-inner{
    min-height:62px;
  }

  .hamburger{
    display:flex !important;
    flex:0 0 44px;
  }

  .nav-menu{
    top:100% !important;
    max-height:calc(100svh - 62px);
    overflow:auto;
    padding:12px 14px calc(14px + env(safe-area-inset-bottom)) !important;
    background:rgba(2,15,40,.97) !important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  .nav-link{
    width:100%;
    padding:11px 14px !important;
  }

  .hero{
    min-height:720px !important;
    padding:62px 0 74px !important;
    background-position:center top !important;
  }

  .hero-info{
    grid-template-columns:1fr !important;
  }

  .hero-chip{
    min-height:62px;
  }
}

@media (max-width:600px){
  .brand-text{
    font-size:.78rem !important;
  }

  .brand-text small{
    letter-spacing:3px !important;
  }

  .brand-badge{
    width:36px !important;
    height:36px !important;
  }

  .hero{
    min-height:680px !important;
  }

  .hero-title{
    font-size:clamp(1.9rem,10vw,3rem) !important;
  }

  .hero-actions{
    width:100%;
    flex-direction:column;
  }

  .hero-actions .btn{
    width:100%;
  }

  .section{
    padding:58px 0 !important;
  }

  .ticket-grid{
    grid-template-columns:1fr !important;
  }

  .benefit-grid{
    grid-template-columns:1fr !important;
  }

  .qris-frame{
    padding:12px !important;
    border-radius:18px !important;
  }
}

@media (max-width:380px){
  .container{
    width:calc(100% - 22px);
  }

  .brand-text{
    font-size:.7rem !important;
  }

  .brand-text small{
    font-size:.5rem !important;
    letter-spacing:2px !important;
  }
}

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

@media (pointer:coarse){
  .btn,
  .nav-link,
  .hamburger{
    min-height:46px;
  }
}

@supports (height:100dvh){
  .hero{min-height:clamp(650px,88dvh,860px) !important}
}


/* ==========================================================
   FINAL POLISH — IMAGE BRANDING + POSTER
   ========================================================== */
.brand{min-width:0;display:flex;align-items:center;gap:0}
.brand-logo{display:block;width:min(245px,32vw);height:auto;max-height:54px;object-fit:contain;object-position:left center}
.nav-inner{min-height:70px}
.hero{padding-top:48px !important;padding-bottom:72px !important}
.hero-poster{width:min(520px,88vw);margin:0 auto 26px;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.22);box-shadow:0 24px 70px rgba(0,0,0,.42);background:rgba(4,25,65,.5)}
.hero-poster img{width:100%;height:auto;display:block;object-fit:contain}
.hero .status-badge{margin-bottom:20px}
.hero-actions{margin-top:4px}
@media (max-width:820px){
  .brand-logo{width:min(220px,62vw);max-height:48px}
  .nav-inner{min-height:64px;padding-top:9px;padding-bottom:9px}
  .hero{padding-top:34px !important;padding-bottom:58px !important}
  .hero-poster{width:min(470px,92vw);border-radius:18px;margin-bottom:20px}
}
@media (max-width:480px){
  .brand-logo{width:min(190px,58vw);max-height:42px}
  .hero-poster{width:94vw;border-radius:16px}
  .status-badge{font-size:.72rem !important;letter-spacing:2px !important;padding:8px 16px !important}
}