/* ═══════════════════════════════════════════════════
   PKBM INTAN — Portal Website Stylesheet
   Colors: --dark #0e2e4c | --gold #ffb508 | --blue #0593ba
   ═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  --dark:  #0e2e4c;
  --dark2: #0a2238;
  --gold:  #ffb508;
  --blue:  #0593ba;
  --light: #f5f7fa;
  --text:  #555;
}

*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Nunito', sans-serif; color: var(--text); margin: 0; overflow-x: hidden; }
img { max-width: 100%; }
a { text-decoration: none; }

/* ── Utility ── */
.bg-dark-main   { background: var(--dark) !important; }
.bg-gold        { background: var(--gold) !important; }
.text-gold      { color: var(--gold) !important; }
.text-dark-main { color: var(--dark) !important; }
.section-gap    { padding: 80px 0; }
.section-gap-sm { padding: 50px 0; }

.section-label {
  display: inline-block;
  background: rgba(255,181,8,.12);
  color: var(--gold);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: .3rem 1rem;
  border-radius: 2px;
  border-left: 3px solid var(--gold);
  margin-bottom: .75rem;
}
.section-label.light {
  background: rgba(255,181,8,.15);
}
.section-title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: 0;
}
.section-title.white { color: #fff; }
.section-desc { color: #777; font-size: .95rem; line-height: 1.8; margin-top: .75rem; }

/* ────────────────────────────────────────
   TOPBAR
──────────────────────────────────────── */
.topbar {
  background: var(--dark2);
  padding: .5rem 0;
  font-size: .8rem;
  border-bottom: 1px solid rgba(255,181,8,.2);
}
.topbar a, .topbar span { color: rgba(255,255,255,.7); }
.topbar a:hover { color: var(--gold); }
.topbar .topbar-icon { color: var(--gold); margin-right: .35rem; }

/* ────────────────────────────────────────
   NAVBAR
──────────────────────────────────────── */
.main-nav {
  background: var(--dark);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 3px 20px rgba(0,0,0,.3);
  transition: all .3s;
}
.main-nav .navbar-brand img { height: 48px; }
.main-nav .nav-link {
  color: rgba(255,255,255,.85) !important;
  font-weight: 700;
  padding: 1.4rem 1rem !important;
  font-size: .875rem;
  letter-spacing: .2px;
  transition: color .2s;
  position: relative;
}
.main-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 1rem; right: 1rem;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .25s;
}
.main-nav .nav-link:hover { color: var(--gold) !important; }
.main-nav .nav-link:hover::after,
.main-nav .nav-link.active-link::after { transform: scaleX(1); }
.main-nav .nav-link.active-link { color: var(--gold) !important; }

.main-nav .dropdown-menu {
  border: none;
  border-top: 3px solid var(--gold);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  min-width: 230px;
  padding: .5rem 0;
  animation: dropIn .2s ease;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.main-nav .dropdown-item {
  padding: .65rem 1.5rem;
  font-weight: 600;
  font-size: .85rem;
  color: var(--dark);
  border-left: 3px solid transparent;
  transition: all .2s;
}
.main-nav .dropdown-item:hover {
  background: var(--light);
  color: var(--dark);
  border-left-color: var(--gold);
  padding-left: 2rem;
}
.main-nav .btn-daftar {
  background: var(--gold) !important;
  color: var(--dark) !important;
  padding: .5rem 1.6rem !important;
  border-radius: 4px;
  font-weight: 800;
  margin-left: .75rem;
  align-self: center;
  transition: all .3s;
  font-size: .85rem;
  letter-spacing: .3px;
}
.main-nav .btn-daftar:hover { background: #e6a300 !important; transform: translateY(-1px); }
.main-nav .btn-daftar::after { display: none; }

/* ────────────────────────────────────────
   HERO SLIDER
──────────────────────────────────────── */
.hero-slider .slide-item {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}
.hero-slider .slide-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(14,46,76,.88) 0%, rgba(5,147,186,.4) 100%);
}
.hero-slider .slide-content {
  position: relative;
  z-index: 2;
  padding: 5rem 1rem;
}
.hero-slider .slide-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--dark);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: .4rem 1.2rem;
  border-radius: 2px;
  margin-bottom: 1.5rem;
}
.hero-slider h1 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 15px rgba(0,0,0,.3);
  margin-bottom: 1rem;
  line-height: 1.15;
}
.hero-slider .slide-sub {
  color: rgba(255,255,255,.8);
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  line-height: 1.6;
}
.hero-slider .slide-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-slider .btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--gold);
  color: var(--dark);
  font-weight: 800;
  padding: .9rem 2.5rem;
  border-radius: 4px;
  font-size: .95rem;
  transition: all .3s;
  border: 2px solid var(--gold);
}
.hero-slider .btn-hero-primary:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.hero-slider .btn-hero-outline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: #fff;
  font-weight: 700;
  padding: .9rem 2.5rem;
  border-radius: 4px;
  font-size: .95rem;
  border: 2px solid rgba(255,255,255,.6);
  transition: all .3s;
}
.hero-slider .btn-hero-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
}

/* carousel controls */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(255,181,8,.85);
  border-radius: 50%;
  width: 3.2rem; height: 3.2rem;
  background-size: 50%;
}
.carousel-indicators [data-bs-slide-to] {
  width: 30px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.5);
  border: none;
  transition: .3s;
}
.carousel-indicators .active { background: var(--gold); width: 50px; }

/* ────────────────────────────────────────
   STATS COUNTER BAR
──────────────────────────────────────── */
.stats-bar {
  background: var(--dark);
  padding: 0;
  border-bottom: 3px solid var(--gold);
}
.stat-item {
  text-align: center;
  padding: 2rem 1rem;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: background .3s;
}
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: rgba(255,181,8,.07); }
.stat-item .stat-num {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  display: block;
}
.stat-item .stat-label {
  color: rgba(255,255,255,.7);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .5px;
  margin-top: .4rem;
  display: block;
  text-transform: uppercase;
}

/* ────────────────────────────────────────
   ABOUT SECTION
──────────────────────────────────────── */
.about-section {
  background: #fff;
  padding: 90px 0;
}
.about-img-block {
  position: relative;
}
.about-img-block .main-img {
  border-radius: 10px;
  width: 100%;
  object-fit: cover;
  box-shadow: 0 25px 60px rgba(14,46,76,.18);
  display: block;
}
.about-img-block .badge-box {
  position: absolute;
  bottom: -24px;
  right: -24px;
  background: var(--dark);
  color: #fff;
  padding: 1.25rem 1.75rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 10px 35px rgba(14,46,76,.35);
  min-width: 140px;
  border-bottom: 3px solid var(--gold);
}
.about-img-block .badge-box .b-val {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  display: block;
}
.about-img-block .badge-box .b-lbl {
  font-size: .75rem;
  opacity: .7;
  display: block;
  margin-top: .3rem;
}
.about-img-block .acc-badge {
  position: absolute;
  top: 20px; left: -20px;
  background: var(--gold);
  color: var(--dark);
  padding: .75rem 1.2rem;
  border-radius: 6px;
  font-weight: 800;
  font-size: .85rem;
  box-shadow: 0 6px 20px rgba(255,181,8,.4);
  display: flex; align-items: center; gap: .5rem;
}
.about-checklist { list-style: none; padding: 0; margin: 1.5rem 0; }
.about-checklist li {
  display: flex; align-items: flex-start; gap: .75rem;
  margin-bottom: .85rem; font-size: .9rem; color: #555;
}
.about-checklist li i { color: var(--gold); margin-top: 3px; flex-shrink: 0; font-size: 1rem; }
.about-checklist li strong { color: var(--dark); }
.btn-wa-main {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #25d366;
  color: #fff;
  padding: .85rem 2.5rem;
  font-weight: 800;
  border-radius: 4px;
  margin-top: .5rem;
  font-size: .95rem;
  transition: all .3s;
}
.btn-wa-main:hover { background: #1da851; color: #fff; transform: translateY(-2px); }
.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: transparent;
  color: var(--dark);
  padding: .85rem 2rem;
  font-weight: 700;
  border-radius: 4px;
  margin-top: .5rem;
  font-size: .95rem;
  border: 2px solid var(--dark);
  transition: all .3s;
}
.btn-outline-dark:hover { background: var(--dark); color: #fff; }

/* ────────────────────────────────────────
   PROGRAM CARDS
──────────────────────────────────────── */
.programs-section { background: var(--light); padding: 80px 0; }
.program-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 30px rgba(0,0,0,.09);
  transition: transform .3s, box-shadow .3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.program-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,.14); }
.program-card .prog-thumb {
  position: relative;
  overflow: hidden;
  height: 210px;
}
.program-card .prog-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s;
}
.program-card:hover .prog-thumb img { transform: scale(1.06); }
.program-card .prog-badge {
  position: absolute;
  top: 1rem; left: 0;
  background: var(--gold);
  color: var(--dark);
  padding: .4rem 1rem .4rem .75rem;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .5px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
  padding-right: 1.4rem;
}
.program-card .prog-body { padding: 1.5rem 1.75rem; flex: 1; }
.program-card .prog-body h4 {
  color: var(--dark); font-weight: 800;
  font-size: 1.1rem; margin-bottom: .6rem;
}
.program-card .prog-body p { font-size: .875rem; color: #666; line-height: 1.75; }
.program-card .prog-checks { list-style: none; padding: 0; margin: 1rem 0 0; }
.program-card .prog-checks li {
  font-size: .82rem; color: #555;
  display: flex; align-items: flex-start; gap: .5rem;
  margin-bottom: .4rem;
}
.program-card .prog-checks li i { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.program-card .prog-footer {
  padding: 1rem 1.75rem 1.5rem;
  display: flex; gap: .75rem;
}
.program-card .prog-footer a {
  flex: 1; text-align: center;
  padding: .65rem .5rem;
  font-weight: 700; font-size: .82rem;
  border-radius: 4px; transition: .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
.prog-btn-detail { background: var(--light); color: var(--dark); border: 1px solid #e0e0e0; }
.prog-btn-detail:hover { background: var(--dark); color: #fff; }
.prog-btn-daftar { background: var(--gold); color: var(--dark); }
.prog-btn-daftar:hover { background: #e6a300; color: var(--dark); }

/* ────────────────────────────────────────
   FEATURE BOXES (Kenapa PKBM)
──────────────────────────────────────── */
.features-section { padding: 80px 0; background: #fff; }
.feature-box {
  border-radius: 10px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.feature-box::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
}
.feature-box:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.15); }
.feature-box .icon {
  font-size: 2.6rem;
  margin-bottom: 1rem;
  display: block;
}
.feature-box h5 { font-weight: 800; margin-bottom: .5rem; font-size: .95rem; }
.feature-box p { font-size: .82rem; margin: 0; line-height: 1.7; }

.feature-box.c1 { background: linear-gradient(135deg,#fff8e1,#ffe082); color: var(--dark); }
.feature-box.c1 .icon { color: #f09800; }
.feature-box.c2 { background: linear-gradient(135deg,#e3f4fc,#b3e0f7); color: var(--dark); }
.feature-box.c2 .icon { color: #0277bd; }
.feature-box.c3 { background: linear-gradient(135deg,#e8f5e9,#a5d6a7); color: var(--dark); }
.feature-box.c3 .icon { color: #2e7d32; }
.feature-box.c4 { background: linear-gradient(135deg,#fce4e4,#ef9a9a); color: var(--dark); }
.feature-box.c4 .icon { color: #c62828; }
.feature-box.c5 { background: linear-gradient(135deg,#f3e5f5,#ce93d8); color: var(--dark); }
.feature-box.c5 .icon { color: #6a1b9a; }
.feature-box.c6 { background: linear-gradient(135deg,#e0f7fa,#80deea); color: var(--dark); }
.feature-box.c6 .icon { color: #00838f; }
.feature-box.c7 { background: linear-gradient(135deg,#fff3e0,#ffcc80); color: var(--dark); }
.feature-box.c7 .icon { color: #e65100; }
.feature-box.c8 { background: linear-gradient(135deg,#e8eaf6,#9fa8da); color: var(--dark); }
.feature-box.c8 .icon { color: #283593; }

/* ────────────────────────────────────────
   VIDEO SECTION
──────────────────────────────────────── */
.video-section { background: var(--dark); padding: 80px 0; }
.main-video-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  cursor: pointer;
}
.main-video-wrap img { width: 100%; display: block; transition: transform .4s; }
.main-video-wrap:hover img { transform: scale(1.03); }
.play-btn-circle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 90px; height: 90px;
  background: var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: var(--dark);
  box-shadow: 0 0 0 16px rgba(255,181,8,.2), 0 0 0 32px rgba(255,181,8,.08);
  transition: .35s;
  z-index: 2;
}
.main-video-wrap:hover .play-btn-circle {
  transform: translate(-50%,-50%) scale(1.12);
}
.video-thumb-item {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  margin-bottom: 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.video-thumb-item img { width: 100%; height: 130px; object-fit: cover; display: block; transition: .3s; }
.video-thumb-item:hover img { transform: scale(1.05); }
.video-thumb-item .mini-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 42px; height: 42px;
  background: rgba(255,181,8,.9);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--dark); font-size: 1rem;
}
.video-thumb-item .vid-title {
  padding: .6rem .75rem;
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  background: rgba(14,46,76,.6);
}

/* ────────────────────────────────────────
   TESTIMONIALS
──────────────────────────────────────── */
.testi-section { background: var(--light); padding: 80px 0; }
.testi-card {
  background: #fff;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 5px 25px rgba(0,0,0,.07);
  height: 100%;
  position: relative;
  border-top: 4px solid transparent;
  transition: border-color .3s, transform .3s;
}
.testi-card:hover { border-top-color: var(--gold); transform: translateY(-4px); }
.testi-card .quote-icon {
  font-size: 3.5rem;
  color: var(--gold);
  opacity: .25;
  line-height: 1;
  margin-bottom: -.5rem;
  display: block;
}
.testi-card .stars { color: var(--gold); margin-bottom: 1rem; font-size: .9rem; }
.testi-card .testi-text {
  font-size: .9rem; color: #555;
  line-height: 1.8; font-style: italic;
}
.testi-card .testi-author {
  margin-top: 1.5rem;
  display: flex; align-items: center; gap: .85rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}
.testi-card .avatar-circle {
  width: 50px; height: 50px;
  background: var(--dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1.2rem; font-weight: 800;
  flex-shrink: 0;
}
.testi-card .author-name { font-weight: 800; color: var(--dark); font-size: .9rem; }
.testi-card .author-role { font-size: .78rem; color: var(--blue); }

/* ────────────────────────────────────────
   CARA DAFTAR / STEPS
──────────────────────────────────────── */
.steps-section { background: var(--dark); padding: 80px 0; }
.step-item {
  text-align: center;
  padding: 1.5rem 1rem;
  position: relative;
}
.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 2.6rem; left: calc(50% + 38px);
  width: calc(100% - 76px);
  height: 2px;
  background: rgba(255,181,8,.3);
}
.step-num {
  width: 64px; height: 64px;
  background: var(--gold);
  color: var(--dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 900;
  margin: 0 auto 1.25rem;
  box-shadow: 0 8px 25px rgba(255,181,8,.35);
}
.step-item h6 { color: #fff; font-weight: 700; margin-bottom: .5rem; }
.step-item p { color: rgba(255,255,255,.6); font-size: .82rem; line-height: 1.6; margin: 0; }

/* ────────────────────────────────────────
   GALLERY GRID
──────────────────────────────────────── */
.gallery-grid .gal-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 1;
  box-shadow: 0 4px 15px rgba(0,0,0,.1);
}
.gallery-grid .gal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.gallery-grid .gal-item:hover img { transform: scale(1.1); }
.gallery-grid .gal-item .gal-overlay {
  position: absolute; inset: 0;
  background: rgba(14,46,76,.75);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .5rem;
  opacity: 0; transition: .35s;
  color: var(--gold); font-size: 1.8rem;
}
.gallery-grid .gal-item:hover .gal-overlay { opacity: 1; }
.gallery-grid .gal-item .gal-overlay span { font-size: .8rem; color: #fff; font-weight: 600; }

/* ────────────────────────────────────────
   BLOG CARDS
──────────────────────────────────────── */
.blog-section { background: #fff; padding: 80px 0; }
.blog-card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 25px rgba(0,0,0,.08);
  background: #fff;
  transition: transform .3s, box-shadow .3s;
  height: 100%;
  display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 16px 45px rgba(0,0,0,.12); }
.blog-card .thumb {
  position: relative;
  overflow: hidden;
}
.blog-card .thumb img {
  width: 100%; height: 210px;
  object-fit: cover; display: block;
  transition: transform .4s;
}
.blog-card:hover .thumb img { transform: scale(1.05); }
.blog-card .date-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  background: var(--gold);
  color: var(--dark);
  padding: .4rem .65rem;
  border-radius: 4px;
  font-weight: 800; line-height: 1.2;
  text-align: center;
}
.blog-card .date-badge .day { font-size: 1.35rem; display: block; }
.blog-card .date-badge .month { font-size: .62rem; text-transform: uppercase; }
.blog-card .thumb-placeholder {
  height: 210px;
  background: linear-gradient(135deg,#e3f0ff,#c9e3ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--blue); opacity: .4;
}
.blog-card .content { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.blog-card .content .cat-label {
  display: inline-block;
  font-size: .72rem; font-weight: 700;
  color: var(--blue); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: .5rem;
}
.blog-card .content h5 {
  font-size: .95rem; font-weight: 800;
  color: var(--dark); margin-bottom: .75rem;
  line-height: 1.45; flex: 1;
}
.blog-card .content h5 a { color: inherit; }
.blog-card .content h5 a:hover { color: var(--gold); }
.blog-card .readmore {
  color: var(--dark); font-weight: 700; font-size: .82rem;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: gap .2s, color .2s;
  margin-top: .75rem;
}
.blog-card .readmore:hover { gap: .7rem; color: var(--gold); }

/* ────────────────────────────────────────
   CTA BANNERS
──────────────────────────────────────── */
.cta-gold { background: var(--gold); padding: 3rem 0; }
.cta-gold .cta-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cta-gold h2 { font-size: clamp(1.4rem,3vw,2rem); font-weight: 900; color: var(--dark); margin: 0; }
.cta-gold p { color: rgba(14,46,76,.7); margin: .3rem 0 0; font-size: .9rem; }
.btn-cta-dark {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--dark); color: #fff;
  padding: .9rem 2.5rem; font-weight: 800; border-radius: 4px;
  font-size: .95rem; transition: all .3s; white-space: nowrap;
}
.btn-cta-dark:hover { background: #0a2238; color: #fff; transform: translateY(-2px); }

.cta-dark { background: var(--dark); padding: 3rem 0; }
.cta-dark .cta-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cta-dark h2 { font-size: clamp(1.4rem,3vw,2rem); font-weight: 900; color: #fff; margin: 0; }
.cta-dark p { color: rgba(255,255,255,.6); margin: .3rem 0 0; font-size: .9rem; }
.btn-cta-gold {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--gold); color: var(--dark);
  padding: .9rem 2.5rem; font-weight: 800; border-radius: 4px;
  font-size: .95rem; transition: all .3s; white-space: nowrap;
}
.btn-cta-gold:hover { background: #e6a300; color: var(--dark); transform: translateY(-2px); }

/* ────────────────────────────────────────
   FAQ
──────────────────────────────────────── */
.faq-section { background: var(--light); padding: 80px 0; }
.faq-section .accordion-button {
  font-weight: 700; color: var(--dark);
  background: #fff; font-size: .9rem;
  border: none; box-shadow: none;
}
.faq-section .accordion-button:not(.collapsed) {
  background: var(--dark); color: #fff; box-shadow: none;
}
.faq-section .accordion-button:not(.collapsed)::after { filter: brightness(10); }
.faq-section .accordion-item {
  border: 1px solid #e8e8e8;
  border-radius: 6px !important;
  overflow: hidden;
  margin-bottom: .6rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.faq-section .accordion-body { font-size: .875rem; color: #555; line-height: 1.8; }
.quick-form .form-control {
  border: 1.5px solid #e5e5e5; border-radius: 6px;
  padding: .75rem 1rem; font-size: .9rem; font-family: 'Nunito', sans-serif;
}
.quick-form .form-control:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,181,8,.15);
}
.quick-form label { font-weight: 700; font-size: .875rem; color: var(--dark); }
.quick-form .btn-submit {
  background: var(--dark); color: #fff; border: none;
  padding: .85rem 2rem; width: 100%; font-weight: 800;
  border-radius: 6px; font-size: .95rem; cursor: pointer;
  transition: .3s; font-family: 'Nunito', sans-serif;
}
.quick-form .btn-submit:hover { background: var(--gold); color: var(--dark); }

/* ────────────────────────────────────────
   PAGE HEADER (inner pages)
──────────────────────────────────────── */
.page-header {
  background: linear-gradient(120deg, var(--dark) 0%, #1a5c8a 100%);
  padding: 4rem 0 3.5rem;
  position: relative;
}
.page-header::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px; background: var(--gold);
}
.page-header h1 { color: #fff; font-weight: 900; margin-bottom: .5rem; }
.page-header .breadcrumb { margin: 0; }
.page-header .breadcrumb-item { color: rgba(255,255,255,.55); font-size: .875rem; }
.page-header .breadcrumb-item a { color: rgba(255,255,255,.8); }
.page-header .breadcrumb-item a:hover { color: var(--gold); }
.page-header .breadcrumb-item.active { color: var(--gold); }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.35); }

/* ────────────────────────────────────────
   CONTACT PAGE
──────────────────────────────────────── */
.contact-info-icon {
  width: 54px; height: 54px;
  background: var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--dark); flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(255,181,8,.3);
}

/* ────────────────────────────────────────
   ARTICLE CONTENT
──────────────────────────────────────── */
.article-content { line-height: 1.85; color: #555; }
.article-content img { border-radius: 8px; margin: 1.25rem 0; }
.article-content h2, .article-content h3 { color: var(--dark); font-weight: 800; }
.article-content a { color: var(--blue); }
.article-content blockquote {
  border-left: 4px solid var(--gold);
  padding: 1rem 1.5rem; background: #fffbf0;
  border-radius: 0 6px 6px 0; font-style: italic; margin: 1.5rem 0;
}

/* ────────────────────────────────────────
   PAGINATION
──────────────────────────────────────── */
.page-link { color: var(--dark); border-color: #dee2e6; font-weight: 600; }
.page-link:hover { color: var(--gold); border-color: var(--gold); }
.page-item.active .page-link { background: var(--dark); border-color: var(--dark); }

/* ────────────────────────────────────────
   FOOTER
──────────────────────────────────────── */
.site-footer { background: #081d30; color: rgba(255,255,255,.72); border-top: 4px solid var(--gold); }
.site-footer .footer-top { padding: 75px 0 55px; }
.site-footer .widget-title {
  color: #fff; font-weight: 800;
  margin-bottom: 1.5rem; font-size: 1rem;
  position: relative; padding-bottom: .75rem;
}
.site-footer .widget-title::after {
  content: ''; position: absolute;
  bottom: 0; left: 0;
  width: 36px; height: 3px; background: var(--gold); border-radius: 2px;
}
.site-footer .footer-logo { max-height: 64px; }
.site-footer p { font-size: .875rem; line-height: 1.75; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: .65rem; font-size: .875rem; }
.site-footer ul li a { color: rgba(255,255,255,.65); transition: .2s; display: inline-block; }
.site-footer ul li a:hover { color: var(--gold); padding-left: 6px; }
.site-footer ul li a i { color: var(--gold); margin-right: .4rem; width: 14px; }
.site-footer .contact-list li { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; }
.site-footer .contact-list .ci { color: var(--gold); margin-top: 3px; flex-shrink: 0; }
.site-footer .social-links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.7);
  border-radius: 50%; margin-right: .35rem; font-size: .9rem; transition: .3s;
}
.site-footer .social-links a:hover { background: var(--gold); color: var(--dark); transform: translateY(-2px); }
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 1.25rem 0; font-size: .8rem;
  color: rgba(255,255,255,.4);
}
.site-footer .footer-bottom a { color: rgba(255,255,255,.4); }
.site-footer .footer-bottom a:hover { color: var(--gold); }

/* ────────────────────────────────────────
   WHATSAPP FLOAT
──────────────────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 30px; right: 30px;
  width: 62px; height: 62px;
  background: #25d366; color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  box-shadow: 0 6px 25px rgba(37,211,102,.5);
  z-index: 9999; transition: all .3s;
}
.wa-float:hover {
  color: #fff;
  transform: scale(1.15) rotate(-8deg);
  box-shadow: 0 10px 35px rgba(37,211,102,.6);
}

/* ────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────── */
@media (max-width:991px) {
  .main-nav .nav-link { padding: .7rem 1rem !important; }
  .main-nav .nav-link::after { display: none; }
  .main-nav .btn-daftar { margin: .5rem 0; }
  .about-img-block { margin-bottom: 3rem; }
  .about-img-block .badge-box { right: 0; bottom: -16px; }
  .about-img-block .acc-badge { left: 0; top: 10px; }
  .step-item::after { display: none; }
}
@media (max-width:767px) {
  .hero-slider .slide-item { min-height: 480px; }
  .hero-slider h1 { font-size: 1.85rem; }
  .hero-slider .slide-btns { flex-direction: column; align-items: flex-start; }
  .cta-gold .cta-row, .cta-dark .cta-row { justify-content: center; text-align: center; }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
}