/* ==========================================================
   PILIH1 — CAREER TRACK SELECTOR
   V3 — Elegant / Compact / Standalone Navbar
========================================================== */

:root{
  --p1-navy:#202957;
  --p1-navy-deep:#181d49;
  --p1-blue:#336aa4;
  --p1-blue-soft:#eaf1f8;
  --p1-text:#202957;
  --p1-muted:#718097;
  --p1-border:#e3e8ef;
  --p1-bg:#f7f9fb;
  --p1-white:#fff;
}

*{box-sizing:border-box}

.pilih1-page-body{
  margin:0;
  background:#fff;
  color:var(--p1-text);
}


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

.pilih1-navbar{
  position:fixed !important;
  inset:0 0 auto 0 !important;
  z-index:9999 !important;
  height:72px !important;

  background:rgba(24,29,73,.98) !important;
  border-bottom:1px solid rgba(255,255,255,.09);

  box-shadow:0 8px 28px rgba(18,25,58,.12);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.pilih1-navbar .mpi-navbar-inner{
  height:72px !important;
}

.pilih1-navbar .mpi-brand{
  text-decoration:none !important;
}

.pilih1-navbar .mpi-brand-logo img{
  width:42px !important;
  height:42px !important;
  object-fit:contain !important;

  /* Logo putih, tanpa mengubah file logo asli */
  filter:brightness(0) invert(1) !important;
  opacity:.96;
}

.pilih1-navbar .mpi-brand-text strong,
.pilih1-navbar .mpi-brand-text small{
  color:#fff !important;
}

.pilih1-navbar .mpi-nav-link{
  color:rgba(255,255,255,.72) !important;
  text-decoration:none !important;
  transition:color .25s ease;
}

.pilih1-navbar .mpi-nav-link:hover{
  color:#fff !important;
}

/* Hanya Career yang aktif pada halaman pilih1 */
.pilih1-navbar .mpi-nav-link.active,
.pilih1-navbar .mpi-nav-link.pilih1-career-active{
  color:#fff !important;
}

.pilih1-navbar .mpi-nav-link.active:after,
.pilih1-navbar .mpi-nav-link.pilih1-career-active:after{
  width:22px !important;
}

.pilih1-navbar .mpi-nav-link:not(.active):not(.pilih1-career-active):after{
  width:0 !important;
}

.pilih1-navbar .mpi-nav-career,
.pilih1-navbar .mpi-nav-admin,
.pilih1-navbar .mpi-language-toggle{
  border-color:rgba(255,255,255,.34) !important;
}

.pilih1-navbar .mpi-language-menu{
  z-index:10001 !important;
}

.pilih1-mobile-active{
  color:#9fc9e8 !important;
  font-weight:800 !important;
}


/* ==========================================================
   PAGE BACKGROUND
========================================================== */

.pilih1-page{
  min-height:calc(100vh - 72px);

  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(51,106,164,.07),
      transparent 26%
    ),
    radial-gradient(
      circle at 8% 80%,
      rgba(32,41,87,.035),
      transparent 25%
    ),
    linear-gradient(180deg,#f7f9fb 0%,#fff 62%);
}

.pilih1-section{
  padding:132px 24px 76px;
}

.pilih1-container{
  width:100%;
  max-width:1080px;
  margin:0 auto;
}


/* ==========================================================
   HEADER
========================================================== */

.pilih1-header{
  max-width:820px;
  margin-bottom:30px;
}

.pilih1-heading-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
}

.pilih1-eyebrow{
  display:inline-flex;
  align-items:center;
  margin-bottom:14px;

  color:var(--p1-blue);

  font-family:"Manrope",sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:3px;
}

.pilih1-eyebrow:before{
  content:"";
  width:35px;
  height:1px;
  margin-right:12px;
  background:var(--p1-blue);
}

.pilih1-header h1{
  margin:0;

  color:var(--p1-navy);

  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:clamp(42px,5vw,56px);
  font-weight:800;
  line-height:.98;
  letter-spacing:-2.8px;
}

.pilih1-header h1 em{
  color:var(--p1-blue);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-style:italic;
  letter-spacing:-2px;
}

.pilih1-header p{
  max-width:690px;
  margin:17px 0 0;

  color:var(--p1-muted);

  font-family:"Manrope",sans-serif;
  font-size:13.5px;
  font-weight:500;
  line-height:1.75;
}

.pilih1-header-mark{
  width:84px;
  height:84px;
  flex:0 0 84px;

  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:space-between;

  padding:12px;

  border:1px solid rgba(51,106,164,.16);
  background:rgba(255,255,255,.56);

  color:var(--p1-blue);
}

.pilih1-header-mark span{
  font-family:"Manrope",sans-serif;
  font-size:9px;
  font-weight:800;
  letter-spacing:2px;
}

.pilih1-header-mark i{
  font-size:12px;
}


/* ==========================================================
   SECTION META
========================================================== */

.pilih1-section-meta{
  display:flex;
  align-items:center;
  gap:13px;

  margin:0 0 12px;

  color:#9aa6b7;

  font-family:"Manrope",sans-serif;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.8px;
}

.pilih1-meta-line{
  width:100%;
  height:1px;
  background:#e8ecf1;
}

.pilih1-meta-count{
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}

.pilih1-meta-count strong{
  color:var(--p1-navy);
  font-size:10px;
}


/* ==========================================================
   CARDS
========================================================== */

.pilih1-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.pilih1-card{
  position:relative;

  display:flex;
  flex-direction:column;

  min-height:316px;
  padding:27px 28px 23px;

  overflow:hidden;

  border:1px solid var(--p1-border);
  background:rgba(255,255,255,.96);

  color:inherit;
  text-decoration:none;

  box-shadow:0 12px 32px rgba(29,45,78,.045);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.pilih1-card:after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:2px;

  background:var(--p1-blue);

  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}

.pilih1-card-operator:after{
  background:var(--p1-navy);
}

.pilih1-card:hover{
  transform:translateY(-4px);
  border-color:#d2dae5;
  box-shadow:0 20px 42px rgba(29,45,78,.09);
}

.pilih1-card:hover:after{
  transform:scaleX(1);
}

.pilih1-card-glow{
  position:absolute;
  top:-85px;
  right:-85px;

  width:190px;
  height:190px;

  border-radius:50%;

  background:rgba(51,106,164,.055);
  pointer-events:none;
}

.pilih1-card-operator .pilih1-card-glow{
  background:rgba(32,41,87,.045);
}

.pilih1-card-top{
  position:relative;
  z-index:1;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  margin-bottom:34px;
}

.pilih1-number{
  color:#9aa7b8;

  font-family:"Manrope",sans-serif;
  font-size:9px;
  font-weight:800;
  letter-spacing:2px;
}

.pilih1-icon{
  width:46px;
  height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--p1-blue-soft);
  color:var(--p1-blue);

  font-size:15px;
}

.pilih1-card-operator .pilih1-icon{
  background:#eef0f5;
  color:var(--p1-navy);
}

.pilih1-card-body{
  position:relative;
  z-index:1;
  flex:1;
}

.pilih1-label{
  display:block;
  margin-bottom:8px;

  color:var(--p1-blue);

  font-family:"Manrope",sans-serif;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:1.8px;
}

.pilih1-card-operator .pilih1-label{
  color:var(--p1-navy);
}

.pilih1-card h2{
  margin:0 0 9px;

  color:var(--p1-navy);

  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:27px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.9px;
}

.pilih1-card p{
  max-width:475px;
  margin:0;

  color:var(--p1-muted);

  font-family:"Manrope",sans-serif;
  font-size:12.5px;
  font-weight:500;
  line-height:1.72;
}

.pilih1-card-bottom{
  position:relative;
  z-index:1;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding-top:15px;
  margin-top:18px;

  border-top:1px solid #e7ebf0;

  color:var(--p1-blue);

  font-family:"Manrope",sans-serif;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.pilih1-card-operator .pilih1-card-bottom{
  color:var(--p1-navy);
}

.pilih1-arrow{
  width:33px;
  height:33px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid currentColor;

  font-size:10px;

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease;
}

.pilih1-card:hover .pilih1-arrow{
  transform:translateX(3px);
}


/* ==========================================================
   NOTE
========================================================== */

.pilih1-note{
  display:flex;
  align-items:center;
  gap:13px;

  margin-top:15px;
  padding:14px 17px;

  border:1px solid #e6eaf0;
  background:rgba(250,251,253,.82);
}

.pilih1-note-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  background:#edf3fa;
  color:var(--p1-blue);

  font-size:10px;
}

.pilih1-note strong{
  display:block;
  margin-bottom:2px;

  color:var(--p1-navy);

  font-family:"Manrope",sans-serif;
  font-size:10.5px;
  font-weight:800;
}

.pilih1-note p{
  margin:0;

  color:#7d899c;

  font-family:"Manrope",sans-serif;
  font-size:10.5px;
  font-weight:500;
  line-height:1.6;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px){

  .pilih1-section{
    padding-top:116px;
  }

  .pilih1-header-mark{
    width:70px;
    height:70px;
    flex-basis:70px;
  }

  .pilih1-options{
    grid-template-columns:1fr;
  }

  .pilih1-card{
    min-height:290px;
  }
}

@media(max-width:768px){

  .pilih1-navbar,
  .pilih1-navbar .mpi-navbar-inner{
    height:68px !important;
  }

  .pilih1-navbar .mpi-brand-logo img{
    width:38px !important;
    height:38px !important;
  }

  .pilih1-section{
    padding:102px 18px 58px;
  }

  .pilih1-heading-row{
    align-items:flex-start;
  }

  .pilih1-header-mark{
    display:none;
  }

  .pilih1-header h1{
    font-size:40px;
    letter-spacing:-1.9px;
  }

  .pilih1-header p{
    font-size:12.5px;
  }

  .pilih1-section-meta{
    margin-top:25px;
  }

  .pilih1-card{
    padding:23px;
  }
}

@media(max-width:480px){

  .pilih1-eyebrow{
    font-size:8.5px;
    letter-spacing:1.8px;
  }

  .pilih1-eyebrow:before{
    width:25px;
    margin-right:9px;
  }

  .pilih1-header h1{
    font-size:35px;
  }

  .pilih1-header p{
    line-height:1.7;
  }

  .pilih1-section-meta{
    font-size:8px;
    letter-spacing:1.3px;
  }

  .pilih1-card{
    min-height:0;
    padding:21px;
  }

  .pilih1-card-top{
    margin-bottom:27px;
  }

  .pilih1-card h2{
    font-size:24px;
  }

  .pilih1-card p{
    font-size:12px;
  }

  .pilih1-note{
    align-items:flex-start;
  }
}


/* ==========================================================
   V4 — LANGUAGE DROPDOWN FIX
   Memastikan dropdown dapat dibuka meskipun ada override
   dari stylesheet Home.
========================================================== */
.pilih1-navbar .mpi-language{
  position:relative !important;
  z-index:10020 !important;
  overflow:visible !important;
}

.pilih1-navbar .mpi-language-toggle{
  position:relative !important;
  z-index:10021 !important;
  pointer-events:auto !important;
}

.pilih1-navbar .mpi-language-menu{
  position:absolute !important;
  top:calc(100% + 10px) !important;
  right:0 !important;
  z-index:10022 !important;
  display:block !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(-6px) !important;
}

.pilih1-navbar .mpi-language.open .mpi-language-menu{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}

.pilih1-navbar .mpi-language-menu button{
  position:relative !important;
  z-index:10023 !important;
  pointer-events:auto !important;
}