/* Halaman Kemitraan - mengikuti gaya situs: Metropolis, biru #003da6, aksen emas #daa900 */
.km{
  --km-blue:#003da6; --km-navy:#032a6b; --km-deep:#021b49; --km-gold:#daa900; --km-gold-d:#b88f00;
  --km-ink:#222; --km-mute:#6d6e71; --km-line:#dbe4f2; --km-mist:#f7fbff;
  font-family:"Metropolis",sans-serif; color:var(--km-ink);
}
.km *,.km *::before,.km *::after{box-sizing:border-box}
.km h1,.km h2,.km h3{font-family:"Metropolis-Bold",sans-serif; font-weight:normal; margin:0}
:where(.km) p{margin:0 0 1em}
.km a:focus-visible,.km button:focus-visible,.km input:focus-visible,.km select:focus-visible,.km textarea:focus-visible{outline:3px solid var(--km-gold); outline-offset:2px}

.km-sec{padding:90px 0}
.km-sec--mist{background:var(--km-mist)}
.km-sec--navy{background:var(--km-navy); color:#fff}

.km-eyebrow{font-family:"Metropolis-Bold",sans-serif; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--km-blue); margin:0 0 12px}
.km-sec--navy .km-eyebrow,.km-hero .km-eyebrow{color:var(--km-gold)}
.km-h2{font-size:34px; line-height:44px; color:var(--km-blue); max-width:28ch; text-wrap:balance}
.km-sec--navy .km-h2{color:#fff}
.km-line{width:90px; height:2px; background:var(--km-gold); margin:18px 0 0}
.km-lead{font-size:17px; line-height:28px; color:var(--km-mute); max-width:64ch; margin-top:24px; text-wrap:pretty}
.km-sec--navy .km-lead{color:#c9d8f0}

/* tombol - bentuk pill seperti .fcbtn / .btncareer */
.km-btn{display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 32px; border-radius:26px; border:2px solid transparent; font-family:"Metropolis-Bold",sans-serif; font-size:15px; cursor:pointer; text-decoration:none; transition:background .25s,color .25s,border-color .25s}
.km-btn--gold{background:var(--km-gold); color:#111}
.km-btn--gold:hover{background:#fff}
.km-btn--blue{background:var(--km-blue); color:#fff}
.km-btn--blue:hover{background:#111}
.km-btn--ghost{border-color:rgba(255,255,255,.7); color:#fff}
.km-btn--ghost:hover{background:#fff; color:var(--km-blue)}
.km-btn--outline{border-color:var(--km-blue); color:var(--km-blue); background:transparent}
.km-btn--outline:hover{background:var(--km-blue); color:#fff}
.km-btn[disabled]{opacity:.6; cursor:wait}

/* hero */
.km-hero{position:relative; color:#fff; background:var(--km-deep) center/cover no-repeat; overflow:hidden}
.km-hero::before{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(2,27,73,.97) 0%,rgba(2,27,73,.9) 42%,rgba(2,27,73,.5) 70%,rgba(2,27,73,.22) 100%),
             linear-gradient(180deg,rgba(2,27,73,.55) 0%,rgba(2,27,73,0) 30%,rgba(2,27,73,.6) 100%)}
.km-hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--km-gold)}
.km-hero .container{position:relative; z-index:2; padding-top:190px; padding-bottom:120px}
.km-hero__in{max-width:680px}
.km-hero h1{font-size:46px; line-height:56px; text-shadow:0 2px 20px rgba(0,0,0,.45)}
.km-hero h1 em{font-style:normal; color:var(--km-gold)}
.km-hero__sub{font-size:18px; line-height:29px; color:#d4e0f4; max-width:52ch; margin:22px 0 32px}
.km-cta{display:flex; flex-wrap:wrap; gap:14px}

/* trust bar */
.km-trust{background:var(--km-deep)}
.km-trust .container{display:grid; grid-template-columns:repeat(6,1fr)}
.km-trust div{padding:26px 14px; text-align:center; border-right:1px solid rgba(255,255,255,.1)}
.km-trust div:last-child{border-right:0}
.km-trust b{display:block; font-family:"Metropolis-Bold",sans-serif; font-weight:normal; font-size:24px; color:#fff}
.km-trust small{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#8fa8cf}

/* cara kerja */
.km-model{display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:56px}
.km-model__item{border-top:3px solid var(--km-gold); padding-top:22px}
.km-model__item h3{font-size:20px; line-height:28px; color:var(--km-blue); margin-bottom:10px}
.km-model__item p{font-size:15px; line-height:24px; color:var(--km-mute); margin:0}

/* benefit */
.km-bens{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px}
.km-ben{background:#fff; border:1px solid var(--km-line); border-radius:20px; padding:32px 28px; transition:box-shadow .25s,transform .25s}
.km-ben:hover{box-shadow:0 10px 30px rgba(0,61,166,.12); transform:translateY(-3px)}
.km-ben svg{width:30px; height:30px; margin-bottom:16px; color:var(--km-gold)}
.km-ben h3{font-size:18px; line-height:26px; color:var(--km-blue); margin-bottom:8px}
.km-ben p{font-size:14.5px; line-height:23px; color:var(--km-mute); margin:0}

/* alur */
.km-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:48px; position:relative}
.km-steps::before{content:""; position:absolute; top:19px; left:5%; right:5%; height:1px; background:rgba(218,169,0,.5)}
.km-step{position:relative; padding-top:56px}
.km-step::before{content:attr(data-n); position:absolute; top:0; left:0; width:40px; height:40px; border-radius:50%; background:var(--km-gold); color:#111; font-family:"Metropolis-Bold",sans-serif; font-size:16px; display:flex; align-items:center; justify-content:center}
.km-step h3{font-size:18px; line-height:26px; margin-bottom:7px}
.km-step p{font-size:14.5px; line-height:23px; color:#b9cdee; margin:0}

/* formulir */
.km-formgrid{display:grid; grid-template-columns:1.35fr .65fr; gap:44px; margin-top:44px; align-items:start}
.km-card{background:#fff; border:1px solid var(--km-line); border-radius:20px; overflow:hidden; box-shadow:0 10px 36px rgba(0,61,166,.08)}
.km-card__kop{background:var(--km-blue); color:#fff; padding:18px 32px; font-family:"Metropolis-Bold",sans-serif; font-size:14px; letter-spacing:.12em; text-transform:uppercase; border-bottom:4px solid var(--km-gold)}
.km-card__body{padding:34px 32px 32px}
.km-fields{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.km-f{display:flex; flex-direction:column; gap:7px}
.km-f--full{grid-column:1/-1}
.km-f label{font-family:"Metropolis-Bold",sans-serif; font-size:14px; color:var(--km-blue)}
.km-f label i{font-style:normal; color:#d12;}
.km-f input:not([type=checkbox]),.km-f select,.km-f textarea{width:100%; font-family:"Metropolis",sans-serif; font-size:15px; color:var(--km-blue); background:var(--km-mist); border:1px solid var(--km-blue); border-radius:14px; padding:0 18px; height:54px}
.km-f textarea{height:auto; min-height:110px; padding:15px 18px; line-height:23px; resize:vertical}
.km-f select{appearance:auto}
.km-f input::placeholder,.km-f textarea::placeholder{color:#99a; opacity:1}
.km-f input:not([type=checkbox]):focus,.km-f select:focus,.km-f textarea:focus{background:#fff; border-color:var(--km-gold)}
.km-f.is-bad input:not([type=checkbox]),.km-f.is-bad select,.km-f.is-bad textarea{border-color:#d12; background:#fff6f6}
.km-hint{font-size:12.5px; color:var(--km-mute)}
.km-err{font-size:12.5px; color:#d12; min-height:0}
.km-f--key{grid-column:1/-1; background:#fff9e3; border:1px solid #efd77a; border-radius:16px; padding:20px 20px 22px}
.km-f label.km-consent{display:flex; gap:12px; align-items:flex-start; font-family:"Metropolis",sans-serif; font-size:14px; line-height:22px; color:var(--km-mute); margin:24px 0 0; cursor:pointer}
.km-f .km-consent input[type=checkbox]{-webkit-appearance:none; appearance:none; display:inline-block; position:relative; width:22px; height:22px; min-width:22px; flex:none; margin:0; padding:0; background:var(--km-mist); border:1.5px solid var(--km-blue); border-radius:6px; cursor:pointer; transition:background .15s}
.km-f .km-consent input[type=checkbox]:checked{background:var(--km-blue)}
.km-f .km-consent input[type=checkbox]:checked::after{content:""; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}
.km-f.is-bad .km-consent input[type=checkbox]{border-color:#d12}
.km-f.is-bad .km-consent{color:#d12}
.km-captcha{margin-top:18px}
.km-formfoot{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:20px}
.km-msg{display:none; margin-top:16px; padding:13px 16px; border-radius:12px; background:#fff0f0; border:1px solid #f3b3b3; color:#a10f1c; font-size:14px}
.km-ok{display:none; margin:0 32px 32px; padding:28px; border:1px solid var(--km-gold); background:#fff9e3; border-radius:16px}
.km-ok h3{font-size:22px; color:var(--km-blue); margin-bottom:8px}
.km-ok p{font-size:15px; line-height:24px; color:var(--km-mute)}
.km-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}

.km-aside{background:var(--km-navy); color:#fff; border-radius:20px; padding:32px 30px}
.km-aside h3{font-size:21px; line-height:29px; margin-bottom:12px}
.km-aside p{font-size:14.5px; line-height:23px; color:#c9d8f0}
.km-aside a{color:var(--km-gold)}
.km-aside ul{list-style:none; padding:0; margin:22px 0 0; font-size:14.5px; line-height:22px}
.km-aside li{padding:12px 0; border-top:1px solid rgba(255,255,255,.16); color:#e2ebf8; margin:0}
.km-aside li b{display:block; font-family:"Metropolis-Bold",sans-serif; font-weight:normal; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:#8fa8cf; margin-bottom:2px}

/* FAQ */
.km-faq{max-width:860px; margin:40px auto 0; border-top:1px solid var(--km-line)}
.km-faq details{border-bottom:1px solid var(--km-line)}
.km-faq summary{cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative; font-family:"Metropolis-Bold",sans-serif; font-size:18px; line-height:26px; color:var(--km-blue)}
.km-faq summary::-webkit-details-marker{display:none}
.km-faq summary::after{content:"+"; position:absolute; right:8px; top:18px; font-size:26px; color:var(--km-gold)}
.km-faq details[open] summary::after{content:"\2013"}
.km-faq details p{font-size:15px; line-height:24px; color:var(--km-mute); padding-bottom:22px; margin:0; max-width:70ch}

/* CTA penutup */
.km-final{text-align:center}
.km-final .km-h2{margin:0 auto; max-width:20ch}
.km-final .km-lead{margin:18px auto 30px}
.km-final .km-cta{justify-content:center}

@media(max-width:900px){
  .km-sec{padding:60px 0}
  .km-h2{font-size:28px; line-height:38px}
  .km-hero .container{padding-top:120px; padding-bottom:70px}
  .km-hero h1{font-size:32px; line-height:41px}
  .km-hero__sub{font-size:16.5px; line-height:26px}
  .km-hero::before{background:linear-gradient(90deg,rgba(2,27,73,.96),rgba(2,27,73,.82)),linear-gradient(180deg,rgba(2,27,73,.4),rgba(2,27,73,.7))}
  .km-trust .container{grid-template-columns:repeat(2,1fr)}
  .km-trust div{border-bottom:1px solid rgba(255,255,255,.1)}
  .km-model,.km-bens{grid-template-columns:1fr; gap:24px}
  .km-steps{grid-template-columns:1fr; gap:22px}
  .km-steps::before{display:none}
  .km-formgrid{grid-template-columns:1fr; gap:28px}
  .km-fields{grid-template-columns:1fr}
  .km-card__body{padding:24px 20px}
  .km-card__kop{padding:16px 20px}
  .km-ok{margin:0 20px 24px}
  .km-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){ .km-ben,.km-btn{transition:none} .km-ben:hover{transform:none} }