/* ==========================================================
   INCEPTION LANDING BLUE V1.9

   HOME ONLY.
   Login/Register/Dashboard tidak terkena selector ini.
   ========================================================== */


/* ==========================================================
   ROOT
   ========================================================== */

body.inception-home-blue-v16 {
  --inc-blue-1: #213b9f;
  --inc-blue-2: #2857bb;
  --inc-blue-3: #3473c7;

  --inc-blue-deep-1: #193783;
  --inc-blue-deep-2: #204693;
  --inc-blue-deep-3: #244d9e;

  --inc-navy: #101932;
  --inc-navy-2: #151f3d;
  --inc-navy-3: #192649;

  --inc-coral: #ef7167;
  --inc-coral-soft: #f28a80;

  --inc-title: #fffaf2;
  --inc-text: #d9e2f5;
  --inc-muted: #bac8e5;

  margin: 0;

  background:
    #213b9f
    !important;
}


body.inception-home-blue-v16
#root {
  min-height: 100vh;

  background:
    #213b9f
    !important;
}


/* ==========================================================
   NAVBAR
   ========================================================== */

body.inception-home-blue-v16
header {
  position: relative;

  z-index: 50;

  background:
    rgba(15, 24, 52, .96)
    !important;

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

  box-shadow:
    none
    !important;
}


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

  position: absolute;

  left: 0;
  right: 0;
  bottom: -1px;

  height: 1px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(93, 130, 229, .65),
      rgba(239, 113, 103, .70),
      transparent
    );
}


/* ==========================================================
   MAIN
   ========================================================== */

body.inception-home-blue-v16
main {
  position: relative;

  overflow: hidden;

  background:
    var(--inc-blue-1)
    !important;
}


/* ==========================================================
   ALL TOP-LEVEL SECTIONS
   ========================================================== */

body.inception-home-blue-v16
main > section {
  position: relative;

  isolation: isolate;

  border-color:
    rgba(255, 255, 255, .10)
    !important;

  box-shadow:
    none
    !important;
}


/* ==========================================================
   HERO
   Biru sama keluarga dengan sisi kiri login
   ========================================================== */

body.inception-home-blue-v16
main > section:first-of-type {
  background:
    linear-gradient(
      135deg,
      #213b9f 0%,
      #2857bb 52%,
      #3473c7 100%
    )
    !important;
}


/* Subtle highlight hero */

body.inception-home-blue-v16
main > section:first-of-type::before {
  content: "";

  position: absolute;

  z-index: -1;

  width: 620px;
  height: 620px;

  left: -330px;
  top: -210px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, .12) 0%,
      rgba(255, 255, 255, .035) 43%,
      transparent 70%
    );
}


body.inception-home-blue-v16
main > section:first-of-type::after {
  content: "";

  position: absolute;

  z-index: -1;

  width: 520px;
  height: 520px;

  right: -260px;
  bottom: -280px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(239, 113, 103, .22) 0%,
      rgba(239, 113, 103, .07) 42%,
      transparent 72%
    );
}


/* ==========================================================
   SECTIONS BERIKUTNYA
   Tidak biru rata semua.
   ========================================================== */

body.inception-home-blue-v16
main > section:nth-of-type(2n) {
  background:
    linear-gradient(
      135deg,
      #193783 0%,
      #204693 55%,
      #244d9e 100%
    )
    !important;
}


body.inception-home-blue-v16
main > section:nth-of-type(2n + 3) {
  background:
    linear-gradient(
      135deg,
      #213f92 0%,
      #2857aa 56%,
      #2e63b4 100%
    )
    !important;
}


/* ==========================================================
   TEXT
   ========================================================== */

body.inception-home-blue-v16
main h1,

body.inception-home-blue-v16
main h2,

body.inception-home-blue-v16
main h3,

body.inception-home-blue-v16
main h4 {
  color:
    var(--inc-title)
    !important;
}


body.inception-home-blue-v16
main p {
  color:
    var(--inc-text)
    !important;
}


/* generic muted copy */

body.inception-home-blue-v16
main small,

body.inception-home-blue-v16
main [class*="subtitle"],

body.inception-home-blue-v16
main [class*="description"] {
  color:
    var(--inc-muted)
    !important;
}


/* ==========================================================
   SECTION LABELS
   ========================================================== */

body.inception-home-blue-v16
main [class*="eyebrow"],

body.inception-home-blue-v16
main [class*="kicker"],

body.inception-home-blue-v16
main [class*="label"] {
  color:
    #a9c5ff
    !important;
}


/* ==========================================================
   CARDS
   Tetap gelap supaya konten punya depth.
   ========================================================== */

body.inception-home-blue-v16
main article,

body.inception-home-blue-v16
main [class*="card"] {
  border-color:
    rgba(239, 113, 103, .48)
    !important;

  background:
    rgba(16, 25, 50, .87)
    !important;

  color:
    #f4f7ff;
}


body.inception-home-blue-v16
main article h3,

body.inception-home-blue-v16
main article h4,

body.inception-home-blue-v16
main [class*="card"] h3,

body.inception-home-blue-v16
main [class*="card"] h4 {
  color:
    #fffaf2
    !important;
}


body.inception-home-blue-v16
main article p,

body.inception-home-blue-v16
main [class*="card"] p {
  color:
    #cbd7ef
    !important;
}


/* ==========================================================
   CORAL ACCENT EDGE
   ========================================================== */

body.inception-home-blue-v16
main article,

body.inception-home-blue-v16
main [class*="card"] {
  box-shadow:
    inset 2px 0 0
    rgba(239, 113, 103, .75)
    !important;
}


/* ==========================================================
   LINKS
   ========================================================== */

body.inception-home-blue-v16
main a {
  color:
    #f4f7ff;
}


body.inception-home-blue-v16
main a:hover {
  color:
    #ffffff;
}


/* ==========================================================
   PRIMARY CTA
   Daftar tetap terang agar kontras.
   ========================================================== */

body.inception-home-blue-v16
main a[href="/register"],

body.inception-home-blue-v16
main a[href="/register/"] {
  border-color:
    transparent
    !important;

  background:
    #f2f6ff
    !important;

  color:
    #24469f
    !important;

  box-shadow:
    0 8px 22px
    rgba(16, 29, 75, .16)
    !important;
}


body.inception-home-blue-v16
main a[href="/register"]:hover,

body.inception-home-blue-v16
main a[href="/register/"]:hover {
  background:
    #ffffff
    !important;

  color:
    #1e3b8c
    !important;
}


/* ==========================================================
   GUIDEBOOK BUTTON
   ========================================================== */

body.inception-home-blue-v16
main a[href*="guidebook"] {
  border-color:
    rgba(255, 255, 255, .25)
    !important;

  background:
    rgba(14, 25, 61, .42)
    !important;

  color:
    #ffffff
    !important;

  box-shadow:
    none
    !important;
}


body.inception-home-blue-v16
main a[href*="guidebook"]:hover {
  background:
    rgba(14, 25, 61, .66)
    !important;
}


/* ==========================================================
   TIMELINE / DIVIDERS
   ========================================================== */

body.inception-home-blue-v16
main hr {
  border-color:
    rgba(255, 255, 255, .12)
    !important;
}


/* ==========================================================
   INPUT / CONTACT AREA
   Kalau homepage punya field.
   ========================================================== */

body.inception-home-blue-v16
main input,

body.inception-home-blue-v16
main textarea,

body.inception-home-blue-v16
main select {
  border-color:
    rgba(255, 255, 255, .16)
    !important;

  background:
    rgba(16, 25, 50, .82)
    !important;

  color:
    #ffffff
    !important;
}


/* ==========================================================
   FOOTER
   ========================================================== */

body.inception-home-blue-v16
footer {
  border-top:
    1px solid
    rgba(255, 255, 255, .09)
    !important;

  background:
    #0e1835
    !important;

  color:
    #c7d2ea
    !important;
}


/* ==========================================================
   CHATBOT
   Jangan ubah panel chat.
   Hanya trigger mengikuti halaman.
   ========================================================== */

body.inception-home-blue-v16
[class*="chatbot-trigger"],

body.inception-home-blue-v16
button[class*="chatbot"] {
  border-color:
    rgba(255, 255, 255, .18);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

  body.inception-home-blue-v16
  main > section:first-of-type {
    background:
      linear-gradient(
        160deg,
        #213b9f 0%,
        #2857bb 55%,
        #3473c7 100%
      )
      !important;
  }


  body.inception-home-blue-v16
  main > section:nth-of-type(2n) {
    background:
      linear-gradient(
        160deg,
        #193783,
        #204693
      )
      !important;
  }


  body.inception-home-blue-v16
  main > section:nth-of-type(2n + 3) {
    background:
      linear-gradient(
        160deg,
        #214494,
        #2859a9
      )
      !important;
  }


  body.inception-home-blue-v16
  main > section:first-of-type::before,

  body.inception-home-blue-v16
  main > section:first-of-type::after {
    opacity:
      .65;
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  body.inception-home-blue-v16 *,
  body.inception-home-blue-v16 *::before,
  body.inception-home-blue-v16 *::after {
    scroll-behavior:
      auto
      !important;
  }

}