:root{--p:#0B57D0;--s:#1F2937;--n:#F8FAFC;--a:#FFB800;--a2:#FFC933;--d:#0842A0;--ok:#10B981;--b:#E2E8F0;--r:12px}
*{box-sizing:border-box}
body{margin:0;font:1rem/1.65 Lato,system-ui,sans-serif;color:var(--s);background:#fff}
img{max-width:100%;display:block}
a{color:var(--p);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--a);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.btn,.chip,.card,.stat,nav a,nav a::after,.klien,footer a,.logo img,input,.card img.flyer{transition:transform .2s,background-color .2s,border-color .2s,color .2s,box-shadow .2s}

/* header */
.top{background:var(--p);color:#fff;position:sticky;top:0;z-index:5}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.logo{background:#fff;border-radius:var(--r);padding:4px 10px;display:block}.logo img{height:40px;width:auto}
nav{display:flex;gap:2px}
nav a{position:relative;color:#fff;text-decoration:none;padding:8px 14px;border-radius:9999px;font-weight:700}
nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:3px;border-radius:3px;background:var(--a);transform:scaleX(0)}
nav a[aria-current]::after{transform:scaleX(1)}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:9999px;padding:8px 16px;font:inherit;font-weight:700;cursor:pointer}
@media(max-width:940px){.burger{display:block}nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--d);flex-direction:column;padding:8px 20px 16px}nav.open{display:flex}}

/* hero */
.hero{background:var(--p);color:#fff;padding:64px 0;border-bottom:6px solid var(--a)}
.hero.small{padding:44px 0}
.split{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.2fr .8fr}}
h1{font-size:clamp(2.2rem,4vw,3.2rem);line-height:1.15;font-weight:900;margin:14px 0}
.hero.small h1{font-size:2.25rem}
h2{font-size:1.5rem;line-height:1.3;margin:12px 0}
h3{margin:8px 0 4px;font-size:1.15rem}
.hero mark{background:none;color:var(--a)}
.sec mark{background:none;color:inherit;box-shadow:inset 0 -.4em var(--a)}
.lead{font-size:1.1rem;max-width:58ch}
.pill{display:inline-block;border-radius:9999px;padding:4px 14px;font-size:.8rem;font-weight:700;letter-spacing:.04em;background:rgba(255,255,255,.16);color:#fff;text-transform:uppercase}
.sec .pill,.card .pill{background:#DCE8FB;color:var(--d)}
.stats{display:grid;gap:12px}
.stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:var(--r);padding:14px 18px}
.stat b{font-size:2rem;line-height:1;display:block;color:var(--a)}

/* tombol */
.btn{display:inline-block;border-radius:9999px;padding:10px 22px;font:inherit;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn[disabled]{opacity:.6;cursor:wait}
.btn-gold{background:var(--a);color:var(--s)}
.btn-wa{background:var(--p);color:#fff}
.btn-out{background:#fff;border-color:var(--p);color:var(--p)}
.hero .btn-out{background:none;border-color:#fff;color:#fff}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.fab{position:fixed;right:16px;bottom:16px;z-index:6;background:var(--a);color:var(--s)}

/* seksi & kartu */
.sec{padding:52px 0}.sec.alt{background:var(--n)}
.zig{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.zig{grid-template-columns:1fr 1fr}.zig.rev>:first-child{order:2}}
.card{position:relative;background:#fff;border:1px solid var(--b);border-radius:var(--r);box-shadow:0 4px 12px rgba(0,0,0,.04);overflow:hidden}
.card.blue{background:var(--d);border-color:var(--d);color:#fff;padding:26px}
.card.blue .pill{background:rgba(255,255,255,.16);color:#fff}
.body{padding:18px}
a.cardlink{color:inherit;text-decoration:none}a.cardlink::after{content:"";position:absolute;inset:0}
dl{margin:0;padding:10px 20px 18px}
dt{font-weight:900;margin-top:14px;padding-left:12px;border-left:4px solid var(--a)}
dd{margin:2px 0 0;padding-left:16px;color:#475569}
.langkah{list-style:none;counter-reset:l;padding:0}
.langkah li{counter-increment:l;position:relative;padding:6px 0 10px 52px;min-height:44px}
.langkah li::before{content:counter(l);position:absolute;left:0;top:4px;width:36px;height:36px;border-radius:50%;background:var(--a);color:var(--s);font-weight:900;display:grid;place-items:center}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card img.flyer{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--n)}
.meta{color:#475569;margin:2px 0}.harga{font-weight:900;color:var(--d);margin:4px 0}
.desk{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.aksi{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.kutip{margin:0;padding:20px}.kutip::before{content:"\201C";display:block;height:1.8rem;font:900 3.2rem/1 Lato,serif;color:var(--a)}
.kutip p:first-of-type{margin-top:0;font-size:1.05rem}
.logos{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.logos img{height:48px;width:auto;filter:grayscale(1);opacity:.8}
.klien{border:1px solid var(--b);border-radius:var(--r);padding:10px 18px;font-weight:700;background:#fff}
.kgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:20px}

/* detail program */
.cols{display:grid;gap:28px}@media(min-width:900px){.cols{grid-template-columns:1.5fr 1fr}.side{position:sticky;top:88px;align-self:start}}
.blok{margin-bottom:28px}.blok h2{margin-top:0}
ul.cek{list-style:none;padding:0;margin:0}ul.cek li{position:relative;padding:4px 0 4px 30px}
ul.cek li::before{content:"";position:absolute;left:8px;top:.55em;width:.4em;height:.8em;border:solid var(--ok);border-width:0 3px 3px 0;transform:rotate(45deg)}

/* filter, galeri, verifikasi */
.tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}
input{font:inherit;border:1px solid #94A3B8;border-radius:9999px;padding:10px 18px;min-width:0;background:#fff}
.tools input{flex:1 1 220px;max-width:340px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;border:1px solid var(--p);background:#fff;color:var(--p);border-radius:9999px;padding:6px 14px;font-weight:700;cursor:pointer}
.chip[aria-pressed=true]{background:var(--p);color:#fff}
#status{text-align:center;color:#475569;margin:24px 0}
.more{display:block;margin:24px auto}
.cover{border:0;padding:0;text-align:left;font:inherit;cursor:pointer;width:100%;background:#fff}
dialog{border:0;border-radius:var(--r);max-width:min(900px,94vw);width:100%;padding:20px}
dialog::backdrop{background:rgba(15,23,42,.6)}
.dh{display:flex;justify-content:space-between;align-items:center;gap:12px}
.fgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:12px}
.fgrid figure{margin:0}.fgrid img{width:100%;border-radius:8px;border:1px solid var(--b)}
.form{padding:24px;max-width:520px;display:grid;gap:10px}.form label{font-weight:900}
.hasil{display:grid;gap:16px;grid-template-columns:140px 1fr;padding:18px;margin-top:16px;max-width:620px}
.hasil h2{margin:0}
.pasfoto{width:140px;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:1px solid var(--b)}
@media(max-width:480px){.hasil{grid-template-columns:1fr}}
.st{display:inline-flex;align-items:center;gap:8px;font-weight:900;margin:6px 0}
.st.ok::before,.aman::before{content:"";width:.4em;height:.8em;border:solid var(--ok);border-width:0 3px 3px 0;transform:rotate(45deg) translateY(-2px)}
.st.ok{color:#047857}.st.no{color:#B91C1C}
.aman{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:6px 16px;border-radius:9999px;border:1px solid var(--b);background:#fff;font-weight:700}
.err{color:#B91C1C;font-weight:700}

/* footer */
footer{background:var(--s);color:#E2E8F0;padding:36px 0;border-top:5px solid var(--a)}
footer a{color:#fff}footer h3{color:#fff;margin-top:0}
footer .logo{display:inline-block;margin-bottom:12px}footer .logo img{height:56px}
footer .logo+p{font-weight:900;color:#fff}footer p{margin:4px 0}.small{font-size:.85rem;color:#94A3B8}
.fcols{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
footer a {
  color: #fff;
  text-decoration: none; /* Menghilangkan garis bawah */
}


/* Media sosial footer */

/* Media sosial footer */
footer .social-title {
  margin-top: 22px;
  margin-bottom: 12px;
}

footer .social-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

footer .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

footer .social-links a:hover {
  color: var(--a);
  transform: translateY(-2px);
}


/* efek hover: hanya pada perangkat yang punya kursor; fokus keyboard mendapat efek setara */
@media(hover:hover){
  a:hover{text-decoration-thickness:2px}
  nav a:hover{background:rgba(255,255,255,.14)}nav a:hover::after{transform:scaleX(1)}
  .logo:hover img{transform:scale(1.04)}
  .btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(8,66,160,.22)}
  .btn-gold:hover,.fab:hover{background:var(--a2)}
  .btn-wa:hover{background:var(--d)}
  .btn-out:hover{background:var(--p);color:#fff}
  .hero .btn-out:hover{background:#fff;color:var(--d)}
  .stat:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
  .card:not(.form):not(.hasil):hover{transform:translateY(-3px);border-color:var(--p);box-shadow:0 10px 24px rgba(11,87,208,.10)}
  .card.blue:hover{border-color:var(--a)}
  .card:hover img.flyer{transform:scale(1.05)}
  .chip:hover{background:#DCE8FB}.chip[aria-pressed=true]:hover{background:var(--d)}
  .klien:hover{border-color:var(--p);color:var(--p)}
  .logos img:hover{filter:none;opacity:1}
  input:hover{border-color:var(--p)}
  footer a:hover{color:var(--a)}
}
.card:focus-within{border-color:var(--p)}
input:focus{border-color:var(--p)}
@media(prefers-reduced-motion:reduce){*,*::after{transition:none!important}.btn:hover,.card:hover,.stat:hover{transform:none!important}}



/* ========================================
   HALAMAN TENTANG - KEUNGGULAN IMTC
======================================== */

/* Jarak antar kartu keunggulan */
.sec .kgrid {
  gap: 20px;
}

/* Kartu keunggulan */
.sec .kgrid > .card.body {
  height: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Efek hover yang halus */
.sec .kgrid > .card.body:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(15, 61, 99, 0.10);
}

/* Judul kartu */
.sec .kgrid > .card.body h3 {
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 10px;
}

/* Deskripsi kartu */
.sec .kgrid > .card.body .meta {
  line-height: 1.7;
  margin-bottom: 0;
}

/* Statistik IMTC */
.stats-imtc {
  margin-top: 28px;
}

.stats-imtc .card.body {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
}

.stats-imtc .card.body h3 {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  line-height: 1.2;
  color: var(--a);
  margin: 0 0 8px;
}

.stats-imtc .card.body .meta {
  font-size: 0.95rem;
}

/* Tablet: dua kolom untuk keunggulan */
@media (max-width: 900px) {
  .sec .kgrid[style*="repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* HP: satu kolom keunggulan, statistik tetap berjajar */
@media (max-width: 560px) {
  .sec .kgrid[style*="repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  .sec .stats-imtc {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .stats-imtc .card.body {
    padding: 18px 6px;
  }

  .stats-imtc .card.body h3 {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
  }

  .stats-imtc .card.body .meta {
    font-size: 0.78rem;
  }
}

/* ========================================
   FAQ - HALAMAN TENTANG IMTC
======================================== */

.faq-section .lead {
  margin-bottom: 28px;
}

.faq-list {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.faq-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover,
.faq-item[open] {
  border-color: var(--a);
  box-shadow: 0 5px 18px rgba(15, 61, 99, 0.07);
}

.faq-item summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 20px 52px 20px 22px;
  color: var(--s);
  font-weight: 600;
  line-height: 1.6;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--a);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-answer {
  padding: 0 22px 20px;
  color: #475569;
  line-height: 1.8;
}

.faq-answer p {
  margin: 0;
}

@media (max-width: 560px) {
  .faq-list {
    gap: 10px;
  }

  .faq-item summary {
    padding: 16px 44px 16px 16px;
    font-size: 0.95rem;
  }

  .faq-item summary::after {
    right: 16px;
  }

  .faq-answer {
    padding: 0 16px 16px;
    font-size: 0.92rem;
  }
}


/* =====================================
   NAVBAR DESKTOP - PUTIH
   ===================================== */

.top {
  background: #ffffff !important;
  background-image: none !important;
  color: #334155;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.top .bar > a.logo {
  background: transparent !important;
  box-shadow: none;
  border-radius: 0;
}

/* Menu desktop */
.top nav a {
  color: #334155;
  font-size: 15px;
  font-weight: 700;
}

.top nav a:hover {
  color: #1058c9;
  background: rgba(16,88,201,.08);
}

/* =====================================
   NAVBAR MOBILE - HAMBURGER
   ===================================== */

@media (max-width: 940px) {

  /* Tombol hamburger */
  .top .burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #F8FAFC;
    color: #0B57D0;
    font-size: 0;
    cursor: pointer;
  }

  /* Ikon hamburger */
  .top .burger::before {
    content: "\2630";
    font-size: 25px;
    line-height: 1;
    font-weight: 400;
  }

  /* Ikon X saat menu terbuka */
  .top .burger[aria-expanded="true"]::before {
    content: "\00D7";
    font-size: 30px;
  }

  /* Dropdown menu */
  .top nav {
    background: #0842A0;
    padding: 12px 20px 18px;
    gap: 4px;
    box-shadow: 0 10px 20px rgba(0,0,0,.12);
  }

  /* Teks menu mobile */
  .top nav a {
    display: block;
    color: #FFFFFF !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    padding: 12px 16px;
    border-radius: 8px;
    text-decoration: none;
  }

  /* Hover dan fokus */
  .top nav a:hover,
  .top nav a:focus-visible {
    color: #FFFFFF !important;
    background: rgba(255,255,255,.14);
  }

  /* Menu aktif */
  .top nav a[aria-current] {
    background: rgba(255,255,255,.12);
    color: #FFFFFF !important;
  }

  /* Garis kuning hanya menu aktif */
  .top nav a::after {
    display: none;
  }

  .top nav a[aria-current]::after {
    display: block;
    left: 16px;
    right: auto;
    bottom: 5px;
    width: 32px;
    height: 3px;
    transform: scaleX(1);
  }
}


/* =====================================
   HERO SECTION - KATALOG PELATIHAN
   ===================================== */

/* Background hero tetap biru */
.hero {
  background: #0B57D0;
}

/* Judul hero */
.hero h1 {
  color: #FFFFFF;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

/* Teks yang diberi highlight kuning */
.hero h1 mark,
.hero mark {
  background: transparent;
  color: #FFB800;
}

/* Deskripsi hero */
.hero .lead,
.hero p {
  color: #FFFFFF;
  opacity: 1;
  line-height: 1.75;
}

/* Responsif untuk mobile */
@media (max-width: 560px) {
  .hero {
    padding: 44px 0;
  }

  .hero h1 {
    font-size: 2rem;
    line-height: 1.25;
  }

  .hero .lead {
    font-size: 1rem;
    line-height: 1.7;
  }
}


/* =====================================
   CONTACT FORM - SEND US A MESSAGE
   ===================================== */

.contact-message {
  padding: 36px !important;
}

.contact-message h2 {
  color: #FFFFFF;
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 900;
  margin: 0 0 12px;
}

.contact-message > p {
  color: #EAF2FF;
  margin: 0 0 28px;
  line-height: 1.7;
}

/* Susunan formulir */
.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-field-full {
  grid-column: 1 / -1;
}

/* Label */
.contact-field label {
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 700;
}

/* Input dan textarea */
.contact-field input,
.contact-field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 13px 16px;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  background: #FFFFFF;
  color: #1F2937;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.contact-field textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #64748B;
}

/* Fokus input */
.contact-field input:focus,
.contact-field textarea:focus {
  border-color: #FFB800;
  box-shadow: 0 0 0 3px rgba(255,184,0,.25);
}

/* Tombol kirim */
.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  font-weight: 900;
  border: 0;
}

.contact-submit:disabled {
  opacity: .65;
  cursor: wait;
}

/* Status pengiriman */
#contactStatus {
  margin: 14px 0 0;
  font-size: .95rem;
  font-weight: 700;
}

#contactStatus:empty {
  display: none;
}

#contactStatus.success {
  color: #BBF7D0;
}

#contactStatus.error {
  color: #FECACA;
}

/* Responsif HP */
@media (max-width: 600px) {
  .contact-message {
    padding: 24px 18px !important;
  }

  .contact-message h2 {
    font-size: 1.6rem;
  }

  .contact-message > p {
    font-size: .95rem;
    margin-bottom: 24px;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-field-full {
    grid-column: auto;
  }

  .contact-submit {
    width: 100%;
  }
}

/* Jangan animasikan kartu saat formulir digunakan */
@media (hover: hover) {
  .card.contact-message:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.04);
  }
}
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}