/* ====== THEME (Biru Navy - Putih) ====== */
:root {
  --primary-600: #0B1E63;   /* Navy utama */
  --primary-700: #081748;   /* Biru gelap hover */
  --primary-500: #243AA1;   /* Biru terang aksen */
  --ink: #0F172A;
  --ink-soft: #4B5563;
  --ink-muted: #9CA3AF;
  --surface: #F9FAFB;
}

body { color: var(--ink); }

/* ====== NAVBAR STATES ====== */
.site-header {
  background: transparent;
  color: #fff;
}
.site-header.is-solid {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(180%) blur(10px);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

/* Logo switching */
.site-header .logo-dark { display: none; }
.site-header.is-solid .logo-dark { display: block; }
.site-header.is-solid .logo-light { display: none; }

/* Links desktop */
.site-header .nav-link {
  color: inherit;
  opacity: 0.95;
  transition: opacity .2s ease, color .2s ease;
}
.site-header .nav-link:hover { opacity: 1; color: #e0e0e0; }
.site-header.is-solid .nav-link:hover { opacity: 1; color: #616161; }

/* ====== BUTTONS ====== */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .625rem 1rem; font-weight: 600; border-radius: .75rem;
  background: linear-gradient(to right, var(--primary-700), var(--primary-500));
  color: #fff;
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease;
  box-shadow: 0 8px 24px rgba(11,30,99,0.25);
}
.btn-primary:hover {
  background: var(--primary-700);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(36,58,161,0.35);
}

.btn-text {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .625rem 1rem; font-weight: 600; border-radius: .75rem;
  border: 1px solid currentColor; background: transparent; color: inherit;
  transition: background-color .2s ease, color .2s ease, transform .12s ease;
}
.btn-text:hover {
  background: #fff;
  color: var(--primary-700);
  transform: translateY(-1px);
}

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .625rem 1rem; font-weight: 600; border-radius: .75rem;
  border: 1px solid rgba(255, 255, 255, .6); color: #fff; background: transparent;
  transition: background-color .2s ease, transform .12s ease, border-color .2s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); border-color: #fff; }

/* ====== MOBILE MENU ====== */
#mobileToggle .icon-close { display: none; }
.mobile-menu { display: none; background: rgba(17,24,39,.92); color: #fff; }
.mobile-menu.is-open { display: block; }
.mobile-menu .mobile-link { display: block; padding: .75rem .75rem; border-radius: .75rem; color: inherit; }
.mobile-menu .mobile-link:hover { background: rgba(255,255,255,.08); }

/* Saat header solid, mobile menu ikut terang */
.site-header.is-solid + .mobile-menu,
.site-header.is-solid ~ .mobile-menu {
  background: rgba(255,255,255,0.98); color: var(--ink);
}
.site-header.is-solid ~ .mobile-menu .mobile-link:hover { background: rgba(15,23,42,.06); }

/* ====== CATEGORY CARD ====== */
.cat-card { position: relative; min-width: 260px; aspect-ratio: 16/10; overflow: hidden; background: #000; flex: 0 0 auto; }
.cat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.15), transparent); }
.cat-label {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem; color: #fff;
  font-weight: 700; font-size: clamp(1.125rem,2vw,1.5rem);
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

/* ====== FEATURE CARDS ====== */
.feature-card {
  background: #fff; border-radius: 1rem; border: 1px solid #e5e7eb; padding: 1.25rem;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(36,58,161,.35);
  box-shadow: 0 16px 36px rgba(36,58,161,.12);
}
.feature-icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: .75rem; background: rgba(36,58,161,.12); color: var(--primary-600);
  margin-bottom: .5rem; font-size: 1.1rem; font-weight: 700;
}
.feature-title { font-weight: 700; font-size: 1.125rem; margin-bottom: .25rem; }
.feature-desc { color: var(--ink-soft); }

/* ====== COURSE CARD ====== */
.course-card {
  display: block; background: #fff; border-radius: 1rem; overflow: hidden;
  border: 1px solid #e5e7eb; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.course-card:hover {
  transform: translateY(-4px);
  border-color: rgba(36,58,161,.35);
  box-shadow: 0 20px 44px rgba(36,58,161,.12);
}
.course-img { width: 100%; height: 180px; object-fit: cover; }
.course-badge {
  display: inline-block; font-size: .75rem; padding: .25rem .5rem; border-radius: .5rem;
  background: rgba(36,58,161,.12); color: var(--primary-600); font-weight: 700;
}
.course-title { font-weight: 600; line-height: 1.3; }
.course-meta { color: var(--ink-muted); font-size: 1.25rem; font-weight: 500; margin-top: .35rem; }

/* ====== TESTIMONIALS ====== */
.testi-inner {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: 20px; align-items: stretch; will-change: transform;
}
.testi-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem;
  padding: 1.25rem; max-width: 720px; margin-inline: auto;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
.testi-card blockquote { font-size: clamp(1.05rem,1.5vw,1.25rem); color: #111827; }
.testi-card figcaption { margin-top: .75rem; color: var(--ink-muted); }

/* ====== PRICING ====== */
.price-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.25rem; }
.price-featured { border-color: var(--primary-600); box-shadow: 0 18px 44px rgba(36,58,161,.18); }
.price-ribbon {
  display: inline-block; font-size: .75rem; font-weight: 700; color: #fff;
  background: var(--primary-600); padding: .35rem .6rem; border-radius: .5rem; margin-bottom: .5rem;
}
.price-title { font-weight: 600; font-size: 1.25rem; }
.price-desc { color: var(--ink-soft); margin-bottom: .25rem; }
.price-value { font-weight: 650; font-size: 1.5rem; margin: .35rem 0 .5rem; }
.price-list { color: #111827; }

/* ====== FAQ ====== */
.faq-item {
  background: transparent; border-bottom: 1px solid #e5e7eb; padding: .75rem 1rem;
  transition: all 300ms ease-in-out;
}
.faq-item > summary {
  cursor: pointer; list-style: none; font-weight: 600; position: relative;
  transition: all 300ms ease-in-out;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '+'; position: absolute; right: 0; top: 0; color: var(--primary-600);
}
.faq-item[open] > summary::after { content: '-'; transition: all 300ms ease-in-out; }
.faq-item > div { color: var(--ink-soft); margin-top: .5rem; }

/* ====== FOOTER ====== */
footer { background: #0b0b0b; }
.footer-title { color:#f2f2f2; font-weight:800; margin-bottom:.5rem; }
.footer-list li { margin:.4rem 0; }
.footer-list a { color:#b3b3b3; }
.footer-list a:hover { color: var(--primary-500); }

/* ====== ACCESSIBILITY ====== */
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }
button[data-accordion-target][aria-expanded="true"] {
  background-color:#f9fafb !important;
  color:#111827 !important;
}
button[data-accordion-target]:hover { background-color:#f3f4f6; }

/* ====== BRAND BACKGROUNDS ====== */
.feature-card.bg-elementary {
  background: url('../pix/background/2561-1441-max.webp') right / cover no-repeat;
}
.feature-card.bg-highschool {
  background: url('../pix/background/2561-1441-max.webp') right / cover no-repeat;
}
.feature-card.bg-junior {
  background: url('../pix/background/2561-1441-max.webp') right / cover no-repeat;
}
.bg-header {
  background: url('../pix/background/2561-1441-max.webp') center / cover no-repeat;
}
.bg-login {
  background: url('../pix/background/3439371_61768.jpg') center / cover no-repeat;
}

/* ====== UTILITY ====== */
.focus-ring:focus-visible {
  outline: 3px solid rgba(36,58,161,.65);
  outline-offset: 2px;
}
.badge {
  display:inline-flex; align-items:center; gap:.375rem; font-weight:700;
  font-size:.75rem; padding:.25rem .6rem; border-radius:.5rem;
}
.badge-soft { background:rgba(36,58,161,.12); color:var(--primary-600); }
.chip {
  display:inline-flex; align-items:center; gap:.375rem; font-size:.8125rem;
  padding:.4rem .7rem; border-radius:999px; border:1px solid #e5e7eb; background:#fff;
}
.chip[aria-pressed="true"] {
  border-color:rgba(36,58,161,.45);
  background:rgba(36,58,161,.06);
  color:var(--ink);
}
.sidebar-card { background:#fff; border:1px solid #e5e7eb; border-radius:1rem; }
.result-toolbar { z-index:30; border-bottom:1px solid #e5e7eb; }
@media (min-width:1024px){ .result-toolbar{ top:5.5rem; } }
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }
.focus-ring:focus-visible { outline:3px solid rgba(36,58,161,.65); outline-offset:2px; }

/* ====== OPTIONAL BADGE VARIATION ====== */
/* contoh penggunaan: <span class="badge badge-soft">Investigasi</span> */