/* ==========================================================
   INCEPTION HOMEPAGE CLEAN V3.0
   INCEPTION HOMEPAGE COLOR NORMALIZATION V3.1
   ==========================================================

   Homepage presentation layer.

   NO:
   - 100vmax
   - clip-path canvas hacks
   - giant section shadows
   - stacked V2.x patches

   YES:
   - real full-width sections
   - semantic section IDs/classes
   - one color system
   - blue dominant
   - coral micro accents
   ========================================================== */


/* ==========================================================
   01. TOKENS
   ========================================================== */

body.inception-home-blue-v16 {
  --home-bg:
    #101d3d;

  --home-bg-deep:
    #0b1530;

  --home-bg-soft:
    #13254a;

  --home-section-blue:
    #172c57;

  --home-section-blue-2:
    #1a305b;

  --home-card:
    #1a2b52;

  --home-card-hover:
    #213763;

  --home-blue:
    #3d63bb;

  --home-blue-light:
    #8eadf2;

  --home-blue-soft:
    #b8caff;

  --home-coral:
    #f46f64;

  --home-coral-soft:
    #f7a097;

  --home-heading:
    #f7f2e8;

  --home-text:
    #d4ddef;

  --home-muted:
    #98a8c8;

  --home-border:
    rgba(153,184,255,.18);

  --home-border-strong:
    rgba(163,192,255,.30);

  --home-content:
    1180px;

  background:
    var(--home-bg-deep)
    !important;

  color:
    var(--home-text);

  overflow-x:
    hidden;
}


/* ==========================================================
   02. ROOT
   ========================================================== */

html
body.inception-home-blue-v16
#root {
  width:
    100%;

  min-height:
    100vh;

  overflow-x:
    hidden;

  background:
    var(--home-bg)
    !important;
}


/* ==========================================================
   03. SECTION ARCHITECTURE

   Section itself = full viewport width.
   Horizontal padding keeps content around 1180px.

   No fake 100vmax shadow.
   ========================================================== */

html
body.inception-home-blue-v16
.section,

html
body.inception-home-blue-v16
.history-section,

html
body.inception-home-blue-v16
section#riwayat {
  box-sizing:
    border-box
    !important;

  position:
    relative
    !important;

  width:
    100%
    !important;

  max-width:
    none
    !important;

  margin:
    0
    !important;

  padding-top:
    clamp(76px, 7vw, 108px)
    !important;

  padding-bottom:
    clamp(76px, 7vw, 108px)
    !important;

  padding-left:
    max(
      24px,
      calc((100vw - var(--home-content)) / 2)
    )
    !important;

  padding-right:
    max(
      24px,
      calc((100vw - var(--home-content)) / 2)
    )
    !important;

  overflow:
    hidden;

  clip-path:
    none;

  box-shadow:
    none
    !important;
}


/* ==========================================================
   04. RESET LEGACY SECTION PSEUDOS
   ========================================================== */

html
body.inception-home-blue-v16
.section::before,

html
body.inception-home-blue-v16
.section::after,

html
body.inception-home-blue-v16
.section:nth-of-type(odd)::before,

html
body.inception-home-blue-v16
.section:nth-of-type(odd)::after,

html
body.inception-home-blue-v16
.section:nth-of-type(even)::before,

html
body.inception-home-blue-v16
.section:nth-of-type(even)::after,

html
body.inception-home-blue-v16
.history-section::before,

html
body.inception-home-blue-v16
.history-section::after,

html
body.inception-home-blue-v16
section#riwayat::before,

html
body.inception-home-blue-v16
section#riwayat::after {
  content:
    none
    !important;

  display:
    none
    !important;
}


/* ==========================================================
   05. NAVBAR
   ========================================================== */

html
body.inception-home-blue-v16
.navbar {
  background:
    rgba(11,21,48,.98)
    !important;

  border-bottom:
    1px solid
    rgba(155,186,255,.14)
    !important;

  box-shadow:
    none
    !important;

  backdrop-filter:
    none;
}


html
body.inception-home-blue-v16
.navbar a {
  color:
    #eef3ff
    !important;
}


html
body.inception-home-blue-v16
.navbar a:hover {
  color:
    var(--home-blue-light)
    !important;
}


/* Login = intentional coral */

html
body.inception-home-blue-v16
.navbar
a[href="/login"],

html
body.inception-home-blue-v16
.navbar
a[href="/login/"] {
  background:
    var(--home-coral)
    !important;

  border-color:
    var(--home-coral)
    !important;

  color:
    #fff
    !important;

  box-shadow:
    none
    !important;
}


/* ==========================================================
   06. HERO
   ========================================================== */

html
body.inception-home-blue-v16
.hero {
  box-sizing:
    border-box;

  position:
    relative;

  isolation:
    isolate;

  width:
    100%
    !important;

  max-width:
    none
    !important;

  margin:
    0
    !important;

  padding-top:
    clamp(72px, 7vw, 108px);

  padding-bottom:
    clamp(72px, 7vw, 108px);

  padding-left:
    max(
      24px,
      calc((100vw - var(--home-content)) / 2)
    );

  padding-right:
    max(
      24px,
      calc((100vw - var(--home-content)) / 2)
    );

  overflow:
    hidden;

  background:
    linear-gradient(
      106deg,
      #101d3d 0%,
      #26468e 38%,
      #3d63bb 70%,
      #7898e2 100%
    )
    !important;

  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.hero::before {
  content:
    "";

  display:
    block;

  position:
    absolute;

  inset:
    0;

  z-index:
    -2;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle at 77% 44%,
      rgba(168,197,255,.17),
      transparent 32%
    );
}


html
body.inception-home-blue-v16
.hero::after {
  content:
    "";

  display:
    block;

  position:
    absolute;

  inset:
    0;

  z-index:
    -1;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      transparent 38%,
      rgba(4,9,23,.08)
    );
}


html
body.inception-home-blue-v16
.hero-inner {
  width:
    100%;

  max-width:
    var(--home-content);

  margin-inline:
    auto;
}


html
body.inception-home-blue-v16
.hero-title {
  color:
    var(--home-heading)
    !important;

  text-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.hero-desc {
  color:
    rgba(241,245,255,.87)
    !important;
}


/* ==========================================================
   07. HERO LOGO / ORBIT
   ========================================================== */

html
body.inception-home-blue-v16
.hero-ring {
  border-color:
    rgba(184,207,255,.23)
    !important;
}


html
body.inception-home-blue-v16
.hero-rings-wrap
img {
  filter:
    brightness(1.12)
    saturate(1.05)
    !important;
}


html
body.inception-home-blue-v16
.hero-ai-chip {
  background:
    rgba(19,37,79,.55)
    !important;

  border:
    1px solid
    rgba(169,197,255,.24)
    !important;

  color:
    #dce7ff
    !important;

  box-shadow:
    none
    !important;
}


/* ==========================================================
   08. HERO BUTTONS
   ========================================================== */

html
body.inception-home-blue-v16
.hero
.btn-primary {
  background:
    var(--home-blue-light)
    !important;

  border-color:
    var(--home-blue-light)
    !important;

  color:
    #102043
    !important;

  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.hero
.btn-secondary {
  background:
    rgba(16,30,65,.73)
    !important;

  border-color:
    rgba(180,203,255,.23)
    !important;

  color:
    #f4f7ff
    !important;

  box-shadow:
    none
    !important;
}


/* ==========================================================
   09. HERO CARDS
   ========================================================== */

html
body.inception-home-blue-v16
.info-card {
  background:
    linear-gradient(
      145deg,
      #1b2c56,
      #172445
    )
    !important;

  border:
    1px solid
    rgba(176,201,255,.22)
    !important;

  border-left:
    3px solid
    var(--home-blue-light)
    !important;

  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.info-card:nth-child(2) {
  border-left-color:
    var(--home-coral)
    !important;
}


html
body.inception-home-blue-v16
.info-card-label {
  color:
    var(--home-blue-light)
    !important;
}


html
body.inception-home-blue-v16
.info-card:nth-child(2)
.info-card-label {
  color:
    var(--home-coral-soft)
    !important;
}


/* ==========================================================
   10. COUNTDOWN
   ========================================================== */

html
body.inception-home-blue-v16
.hero-countdown {
  background:
    rgba(11,22,48,.48)
    !important;

  border:
    1px solid
    rgba(158,187,255,.12)
    !important;

  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.hero-countdown-value {
  color:
    var(--home-blue-light)
    !important;
}


/* ==========================================================
   11. TYPOGRAPHY
   ========================================================== */

html
body.inception-home-blue-v16
.section-title,

html
body.inception-home-blue-v16
.about-title,

html
body.inception-home-blue-v16
.location-title,

html
body.inception-home-blue-v16
.history-section h2 {
  color:
    var(--home-heading)
    !important;

  text-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.section-subtitle,

html
body.inception-home-blue-v16
.about-text,

html
body.inception-home-blue-v16
.history-description {
  color:
    var(--home-muted)
    !important;
}


html
body.inception-home-blue-v16
.section-kicker,

html
body.inception-home-blue-v16
.history-year,

html
body.inception-home-blue-v16
.location-contact-eyebrow {
  color:
    var(--home-blue-light)
    !important;
}


/* ==========================================================
   12. TENTANG
   ========================================================== */

html
body.inception-home-blue-v16
#tentang {
  background:
    linear-gradient(
      180deg,
      #101d3d,
      #13254a
    )
    !important;
}


html
body.inception-home-blue-v16
.fact-card {
  background:
    linear-gradient(
      145deg,
      #1d2e56,
      var(--home-card)
    )
    !important;

  border:
    1px solid
    var(--home-border)
    !important;

  border-left:
    3px solid
    var(--home-blue-light)
    !important;

  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.fact-card:nth-child(2),

html
body.inception-home-blue-v16
.fact-card:nth-child(4) {
  border-left-color:
    var(--home-coral)
    !important;
}


html
body.inception-home-blue-v16
.fact-card::before,

html
body.inception-home-blue-v16
.fact-card::after {
  content:
    none
    !important;

  display:
    none
    !important;
}


/* ==========================================================
   13. RANGKAIAN / STAGES
   ========================================================== */

html
body.inception-home-blue-v16
#rangkaian.section-stages {
  background:
    linear-gradient(
      180deg,
      #13254a,
      #172c57
    )
    !important;
}


html
body.inception-home-blue-v16
.stage-item {
  background:
    var(--home-card)
    !important;

  border:
    1px solid
    var(--home-border)
    !important;

  border-left:
    3px solid
    var(--home-blue-light)
    !important;

  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.stage-step {
  color:
    var(--home-coral)
    !important;
}


/* ==========================================================
   14. TIMELINE
   ========================================================== */

html
body.inception-home-blue-v16
#timeline.section-timeline {
  background:
    linear-gradient(
      180deg,
      #172c57,
      #1a305b
    )
    !important;
}


html
body.inception-home-blue-v16
.timeline-list {
  max-width:
    1040px;

  margin-inline:
    auto;
}


html
body.inception-home-blue-v16
.timeline-list::before {
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(155,186,255,.48) 8%,
      rgba(155,186,255,.48) 92%,
      transparent
    )
    !important;

  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.timeline-item {
  background:
    var(--home-card)
    !important;

  border:
    1px solid
    var(--home-border)
    !important;

  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.timeline-item::before,

html
body.inception-home-blue-v16
.timeline-item::after {
  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.timeline-dot {
  background:
    var(--home-blue-light)
    !important;

  border-color:
    #dce7ff
    !important;

  color:
    #102043
    !important;

  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.timeline-item:last-child
.timeline-dot {
  background:
    var(--home-coral)
    !important;

  border-color:
    var(--home-coral-soft)
    !important;

  color:
    #fff
    !important;
}


html
body.inception-home-blue-v16
.timeline-date {
  color:
    var(--home-blue-soft)
    !important;
}


/* ==========================================================
   15. RIWAYAT
   ========================================================== */

html
body.inception-home-blue-v16
.history-section,

html
body.inception-home-blue-v16
section#riwayat {
  background:
    linear-gradient(
      180deg,
      #13254a,
      #101d3d
    )
    !important;
}


html
body.inception-home-blue-v16
.history-feature {
  background:
    linear-gradient(
      145deg,
      #182746,
      #14203c
    )
    !important;

  border:
    1px solid
    var(--home-border)
    !important;

  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.history-main-media,

html
body.inception-home-blue-v16
.riwayat-feature-media {
  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(91,124,214,.10),
      transparent 43%
    ),
    #10192f
    !important;

  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.riwayat-news-card {
  background:
    linear-gradient(
      145deg,
      #192746,
      #141f3a
    )
    !important;

  border:
    1px solid
    rgba(244,111,100,.17)
    !important;

  box-shadow:
    none
    !important;
}


/* ==========================================================
   16. HADIAH
   ========================================================== */

html
body.inception-home-blue-v16
#hadiah {
  background:
    linear-gradient(
      180deg,
      #172c57,
      #1a305b
    )
    !important;
}


html
body.inception-home-blue-v16
.prize-card,

html
body.inception-home-blue-v16
.other-prize-card {
  background:
    linear-gradient(
      145deg,
      #1d2e56,
      #19284c
    )
    !important;

  border:
    1px solid
    var(--home-border-strong)
    !important;

  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.prize-card::after {
  content:
    none
    !important;

  display:
    none
    !important;
}


html
body.inception-home-blue-v16
.prize-card:first-child {
  border:
    1px solid
    rgba(244,111,100,.65)
    !important;

  border-top:
    2px solid
    var(--home-coral)
    !important;
}


html
body.inception-home-blue-v16
.prize-place {
  color:
    var(--home-blue-light)
    !important;
}


html
body.inception-home-blue-v16
.prize-card:first-child
.prize-place {
  color:
    var(--home-coral-soft)
    !important;
}


html
body.inception-home-blue-v16
.prize-amount,

html
body.inception-home-blue-v16
.other-prize-amount {
  color:
    var(--home-heading)
    !important;
}


/* ==========================================================
   17. LOKASI
   ========================================================== */

html
body.inception-home-blue-v16
#lokasi {
  background:
    linear-gradient(
      180deg,
      #13254a,
      #101d3d
    )
    !important;
}


html
body.inception-home-blue-v16
.location-card,

html
body.inception-home-blue-v16
.location-contact-card {
  background:
    linear-gradient(
      145deg,
      #19294f,
      #162342
    )
    !important;

  border:
    1px solid
    var(--home-border)
    !important;

  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.location-label,

html
body.inception-home-blue-v16
.location-contact-label {
  color:
    var(--home-blue-light)
    !important;
}


html
body.inception-home-blue-v16
.location-map {
  overflow:
    hidden;

  border:
    1px solid
    var(--home-border)
    !important;

  border-radius:
    18px;

  box-shadow:
    none
    !important;
}


/* ==========================================================
   18. CONTACT MICRO ACCENT
   ========================================================== */

html
body.inception-home-blue-v16
.location-contact::before {
  content:
    "";

  display:
    block;

  width:
    46px;

  height:
    2px;

  margin-bottom:
    18px;

  background:
    linear-gradient(
      90deg,
      var(--home-blue-light) 0 65%,
      var(--home-coral) 65% 100%
    )
    !important;
}


/* ==========================================================
   19. CLOSING CTA
   ========================================================== */

html
body.inception-home-blue-v16
.final-cta,

html
body.inception-home-blue-v16
.cta-section,

html
body.inception-home-blue-v16
.closing-section,

html
body.inception-home-blue-v16
.home-cta {
  box-sizing:
    border-box;

  width:
    100%
    !important;

  max-width:
    none
    !important;

  margin:
    0
    !important;

  padding:
    clamp(86px, 9vw, 130px)
    max(
      24px,
      calc((100vw - var(--home-content)) / 2)
    );

  background:
    radial-gradient(
      circle at 72% 70%,
      rgba(244,111,100,.06),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #101d3d,
      #0b1530
    )
    !important;

  clip-path:
    none;

  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.final-cta::before,

html
body.inception-home-blue-v16
.final-cta::after,

html
body.inception-home-blue-v16
.cta-section::before,

html
body.inception-home-blue-v16
.cta-section::after {
  box-shadow:
    none
    !important;
}


html
body.inception-home-blue-v16
.final-cta h2,

html
body.inception-home-blue-v16
.cta-section h2,

html
body.inception-home-blue-v16
.closing-section h2,

html
body.inception-home-blue-v16
.home-cta h2 {
  color:
    var(--home-heading)
    !important;

  text-shadow:
    none
    !important;
}


/* ==========================================================
   20. FOOTER
   ========================================================== */

html
body.inception-home-blue-v16
footer {
  background:
    #081023
    !important;

  border-top:
    1px solid
    rgba(155,186,255,.11)
    !important;

  box-shadow:
    none
    !important;
}


/* ==========================================================
   21. GLOBAL CARD SHADOW RESET
   ========================================================== */

html
body.inception-home-blue-v16
.info-card,

html
body.inception-home-blue-v16
.fact-card,

html
body.inception-home-blue-v16
.stage-item,

html
body.inception-home-blue-v16
.timeline-item,

html
body.inception-home-blue-v16
.history-feature,

html
body.inception-home-blue-v16
.riwayat-news-card,

html
body.inception-home-blue-v16
.prize-card,

html
body.inception-home-blue-v16
.other-prize-card,

html
body.inception-home-blue-v16
.location-card,

html
body.inception-home-blue-v16
.location-contact-card {
  box-shadow:
    none
    !important;
}


/* ==========================================================
   22. HOVER
   ========================================================== */

html
body.inception-home-blue-v16
.info-card,

html
body.inception-home-blue-v16
.fact-card,

html
body.inception-home-blue-v16
.stage-item,

html
body.inception-home-blue-v16
.timeline-item,

html
body.inception-home-blue-v16
.prize-card,

html
body.inception-home-blue-v16
.other-prize-card,

html
body.inception-home-blue-v16
.location-card,

html
body.inception-home-blue-v16
.location-contact-card {
  transition:
    transform .17s ease,
    border-color .17s ease,
    background .17s ease;
}


html
body.inception-home-blue-v16
.info-card:hover,

html
body.inception-home-blue-v16
.fact-card:hover,

html
body.inception-home-blue-v16
.stage-item:hover,

html
body.inception-home-blue-v16
.timeline-item:hover,

html
body.inception-home-blue-v16
.prize-card:hover,

html
body.inception-home-blue-v16
.other-prize-card:hover,

html
body.inception-home-blue-v16
.location-card:hover,

html
body.inception-home-blue-v16
.location-contact-card:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(170,197,255,.38)
    !important;
}


/* ==========================================================
   23. MOBILE
   ========================================================== */

@media (max-width: 900px) {

  html
  body.inception-home-blue-v16
  .section,

  html
  body.inception-home-blue-v16
  .history-section,

  html
  body.inception-home-blue-v16
  section#riwayat {
    padding-left:
      24px
      !important;

    padding-right:
      24px
      !important;
  }


  html
  body.inception-home-blue-v16
  .hero {
    padding-left:
      24px;

    padding-right:
      24px;
  }

}


@media (max-width: 640px) {

  html
  body.inception-home-blue-v16
  .section,

  html
  body.inception-home-blue-v16
  .history-section,

  html
  body.inception-home-blue-v16
  section#riwayat {
    padding:
      62px 18px
      !important;
  }


  html
  body.inception-home-blue-v16
  .hero {
    padding:
      66px 18px;

    background:
      linear-gradient(
        145deg,
        #101d3d,
        #2f55a5 62%,
        #6789da
      )
      !important;
  }

}


/* ==========================================================
   END CLEAN V3.0
   ========================================================== */