:root{
  /* Soft Jabar Modern */
  --brand-primary: #1E5EFF;  /* soft royal blue */
  --brand-deep:    #0F1B3D;  /* navy ink */
  --brand-sky:     #6EB7FF;  /* sky mist */
  --brand-accent:  #FFC94A;  /* soft amber */
  --brand-success: #2DBE7E;  /* soft emerald */
  --brand-danger:  #FF5A6A;  /* soft coral */

  --brand-bg:      #F7F9FC;
  --brand-surface: #FFFFFF;
  --brand-text:    #0D1326;
  --brand-muted:   rgba(13,19,38,.65);
  --brand-border:  rgba(15,27,61,.10);

  --radius-xl: 1.25rem;
  --shadow-soft: 0 18px 60px rgba(15,27,61,.08);
  --shadow-hover: 0 24px 70px rgba(15,27,61,.12);

  /* Bootstrap mapping */
  --bs-body-bg: var(--brand-bg);
  --bs-body-color: var(--brand-text);

  --bs-primary: var(--brand-primary);
  --bs-secondary: var(--brand-sky);
  --bs-success: var(--brand-success);
  --bs-danger: var(--brand-danger);
  --bs-warning: var(--brand-accent);
  --bs-dark: var(--brand-deep);
  --bs-light: var(--brand-surface);

  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-deep);
}

html, body { height: 100%; }
body{
  background: var(--brand-bg);
  color: var(--brand-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: var(--brand-primary); text-decoration: none; }
a:hover{ color: var(--brand-deep); }

/* ===== Layout / Typography ===== */
.section-title{
  font-weight: 850;
  letter-spacing: -.02em;
}
.text-muted{ color: var(--brand-muted) !important; }

.pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border-radius: 999px;
  padding: .3rem .65rem;
  font-size: .85rem;
  font-weight: 750;
  background: rgba(30,94,255,.10);
  color: var(--brand-deep);
  border: 1px solid rgba(30,94,255,.14);
}

/* ===== Cards ===== */
.card-soft{
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}
.hover-lift{
  transition: transform .18s ease, box-shadow .18s ease;
}
.hover-lift:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.border-soft{ border: 1px solid var(--brand-border); }

/* ===== Buttons (lebih modern) ===== */
.btn{
  border-radius: 999px;
}
.btn-cta{
  background: var(--brand-accent);
  color: var(--brand-deep);
  border: none;
  font-weight: 850;
  box-shadow: 0 14px 30px rgba(255,201,74,.28);
}
.btn-cta:hover{
  filter: brightness(.98);
  color: var(--brand-deep);
}
.btn-primary{
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(30,94,255,.22);
}
.btn-outline-primary{
  font-weight: 800;
}

/* ===== Navbar modern: glass -> solid saat scroll ===== */
.navbar-school{
  background: linear-gradient(90deg, rgba(15,27,61,.92), rgba(30,94,255,.70));
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.navbar-glass{
  background: linear-gradient(90deg, rgba(15,27,61,.55), rgba(30,94,255,.35));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.navbar-solid{
  background: linear-gradient(90deg, rgba(15,27,61,.96), rgba(30,94,255,.78));
  box-shadow: 0 14px 40px rgba(15,27,61,.20);
}
.navbar-dark .nav-link{
  opacity: .9;
}
.navbar-dark .nav-link:hover{
  opacity: 1;
}

/* ===== HERO Slider ===== */
.hero-slider{
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--brand-border);
  box-shadow: 0 22px 70px rgba(15,27,61,.12);
  background: #fff;
}
.hero-slide{
  min-height: 560px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero-overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(110,183,255,.30), transparent 55%),
    radial-gradient(900px 520px at 80% 10%, rgba(255,201,74,.18), transparent 60%),
    linear-gradient(90deg, rgba(15,27,61,.70), rgba(30,94,255,.28));
}
.hero-content{
  position: relative;
  z-index: 2;
  color: #fff;
}
.hero-kicker{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.35rem .75rem;
  border-radius:999px;
  font-weight: 850;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
}
.glass{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-xl);
}

/* Carousel arrows lebih halus */
.carousel-control-prev, .carousel-control-next{ width: 10%; }
.carousel-control-prev-icon, .carousel-control-next-icon{
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}

/* ===== Quick Link cards ===== */
.quick-card{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.92);
  transition: transform .18s ease, box-shadow .18s ease;
}
.quick-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(15,27,61,.16);
}
.quick-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(30,94,255,.10);
  border: 1px solid rgba(30,94,255,.14);
  color: var(--brand-deep);
}

/* ===== Parallax ===== */
.parallax{
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--brand-border);
  box-shadow: var(--shadow-soft);
  min-height: 340px;
  background-image:
    linear-gradient(90deg, rgba(15,27,61,.72), rgba(30,94,255,.30)),
    url('/assets/img/parallax-1.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (max-width: 991px){
  .parallax{ background-attachment: scroll; }
}

/* ===== Footer ===== */
.footer{
  background: var(--brand-surface);
  border-top: 1px solid var(--brand-border);
}