/* =========================================================
  EDULAW — Reset awal (Bootstrap-first)
========================================================= */
:root{
  --edulaw-navy:#0A1C3F;
  --edulaw-gold:#E8C547;

  --bg:#F6F7FB;
  --surface:#FFFFFF;
  --text:#0F172A;
  --muted:#64748B;
  --border:#E6EAF2;

  --shadow-sm: 0 10px 24px rgba(2, 6, 23, .06);
  --shadow-md: 0 18px 50px rgba(2, 6, 23, .10);

  --r-lg: 22px;
  --r-md: 16px;

  --section-pad: 56px; /* mobile-first */
}

body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a{ text-underline-offset: 2px; }
main{ overflow-x: hidden; }

/* Buttons */
.btn{ border-radius: 999px; }
.btn-primary{
  background: var(--edulaw-navy);
  border-color: var(--edulaw-navy);
  box-shadow: 0 10px 20px rgba(10, 28, 63, .18);
}
.btn-primary:hover{
  background: #061229;
  border-color: #061229;
}
.btn-outline-primary{
  color: var(--edulaw-navy);
  border-color: rgba(10,28,63,.35);
}
.btn-outline-primary:hover{
  background: rgba(10,28,63,.06);
  border-color: rgba(10,28,63,.55);
  color: var(--edulaw-navy);
}

/* Badge */
.badge-edulaw{
  background: #ffc107;
  color: var(--edulaw-navy);
  border: 1px solid rgba(232,197,71,.35);
  font-weight: 600;
  letter-spacing: .08em;
}

/* =========================================================
   NAVBAR — solid, terbaca, tidak “gantung”
========================================================= */
.edulaw-navbar{
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(2, 6, 23, .06);
  padding: .85rem 0;
}

@supports (backdrop-filter: blur(12px)){
  .edulaw-navbar{
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
  }
}

.edulaw-navbar.is-scrolled{
  box-shadow: 0 14px 40px rgba(2, 6, 23, .10);
}

.edulaw-navbar .navbar-nav{
  gap: .15rem;
}

.edulaw-navbar .nav-link{
  color: rgba(10, 28, 63, .82);
  font-weight: 600;
  padding: .5rem .5rem;
}
.edulaw-navbar .nav-link:hover,
.edulaw-navbar .nav-link.active{
  color: var(--edulaw-navy);
}

.edulaw-navbar .navbar-toggler{
  border: 1px solid rgba(10,28,63,.16);
  border-radius: 12px;
  padding: .45rem .55rem;
}
.edulaw-navbar .navbar-toggler:focus{
  box-shadow: 0 0 0 .2rem rgba(232,197,71,.28);
}
.edulaw-navbar .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(10, 28, 63, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* HERO full-screen */
.hero{
  position: relative;
  color: #fff;

  /* full height layar (pakai 3 supaya lintas device lebih stabil) */
  min-height: 91vh;
  min-height: 91svh;
  min-height: 91dvh;

  display: flex;
  align-items: center;

  /* jangan terlalu besar, karena tinggi sudah 100vh */
  padding: 96px 0 64px;

  background: linear-gradient(135deg, #163B9C 0%, #233DC8 55%, #1B2F7E 100%);
  border-radius: 0;
  overflow: hidden;
}

/* Mobile: biar konten nggak kepotong */
@media (max-width: 575.98px){
  .hero{
    padding: 84px 0 56px;
  }
}



/* media card */
.hero-media{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 50px rgba(2,6,23,.18);
  background: rgba(255,255,255,.06);
}

.hero-media img{
  display: block;
  width: 100%;
  height: auto;
}

/* Desktop “mewah” tetap aman */
@media (min-width: 992px){
  .hero{
    padding: 112px 0 92px;
  }
  .hero-media{
    border-radius: 26px;
    box-shadow: 0 26px 70px rgba(2,6,23,.22);
  }
  .hero-title{
    font-size: 3.6rem;
    line-height: 1.02;
  }
}
/* =========================
   SECTION HEAD (title + button)
========================= */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom: 18px;
}

/* =========================
   KELAS CARDS
========================= */
.section-kelas .section-title{ color: var(--edulaw-navy); }

.kelas-card{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.kelas-card:hover{
  transform: translateY(-7px);
  box-shadow: var(--shadow-md);
}

/* gradient layer */
.kelas-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, rgba(30,78,216,1), rgba(47,60,203,1));
}
.kelas-card--teal::before{
  background: linear-gradient(120deg, rgba(30,78,216,1), rgba(15,108,124,1));
}

/* readable overlay */
.kelas-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(rgba(10,28,63,.20), rgba(10,28,63,.42));
}

.kelas-card__body{
  position: relative;
  z-index: 1;
  padding: 22px;
  color: #fff;
}

.kelas-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 14px;
}

.kelas-card__title{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;
}

.kelas-card__h{
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 2px 0;
  font-size: 1.25rem;
  line-height: 1.25;
}

.kelas-card__sub{
  margin: 0;
  color: rgba(255,255,255,.80);
  font-size: .95rem;
}

/* list */
.kelas-card__body ul{
  margin: 0 0 16px 0;
  padding-left: 1.1rem;
  color: rgba(255,255,255,.82);
  line-height: 1.8;
}
.kelas-card__body ul li{ margin-bottom: 6px; }
.kelas-card__body ul li:last-child{ margin-bottom: 0; }

/* actions */
.kelas-card__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* mobile-first: lebih rapat */
@media (max-width: 575.98px){
  .kelas-card__body{ padding: 18px; }
  .kelas-card:hover{ transform: translateY(-4px); }
  .kelas-card__actions .btn{ width: 100%; }
}

/* desktop: “mewah” tapi tetap aman */
@media (min-width: 992px){
  .kelas-card__body{ padding: 28px; }
}
/* Jarak antar section (mobile-first) */
.section{
  padding: 56px 0;
}

/* Desktop lebih lega */
@media (min-width: 992px){
  .section{
    padding: 76px 0;
  }
}

.insight-card{
  border-radius: var(--r-lg);
}

.insight-thumb{
  display: block;
  overflow: hidden;
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
}

.insight-thumb img{
  transition: transform .25s ease;
}

.insight-card:hover .insight-thumb img{
  transform: scale(1.03);
}

.section-publications .stat-number{
  font-size: 1.35rem;
  color: var(--edulaw-navy);
}

.pub-thumb{
  display:block;
  overflow:hidden;
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
}
.pub-thumb img{
  transition: transform .25s ease;
}
.pub-card:hover .pub-thumb img{
  transform: scale(1.03);
}

/* Icon chip varian soft untuk stat */
.icon-chip--soft{
  background: rgba(10,28,63,.06);
  border-color: rgba(10,28,63,.10);
  box-shadow: none;
  color: var(--edulaw-navy);
}
.icon-chip--gold{
  background: rgba(232,197,71,.20);
  border-color: rgba(232,197,71,.35);
  box-shadow: none;
  color: var(--edulaw-navy);
}
.icon-chip--blue{
  background: rgba(30,78,216,.10);
  border-color: rgba(30,78,216,.20);
  box-shadow: none;
  color: var(--edulaw-navy);
}

.pub-count{
  color: var(--edulaw-navy);
}
.section-cta{ padding: var(--section-pad) 0; }

/* Kartu CTA: navy gradient, kontras aman */
.cta-card{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 28px;
  background: linear-gradient(135deg, #0A1C3F 0%, #163B9C 52%, #1B2F7E 100%);
  box-shadow: 0 24px 60px rgba(2,6,23,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
}

/* Aksen halus agar terlihat “mewah” di desktop tapi tidak ganggu readability */
.cta-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 260px at 18% 18%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(520px 220px at 88% 40%, rgba(232,197,71,.16), transparent 62%);
  pointer-events:none;
}
.cta-card > .row{ position: relative; z-index: 1; }

.cta-title{
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.cta-lead{
  color: rgba(255,255,255,.84);
  line-height: 1.7;
  max-width: 56rem;
  margin: 0;
}

.cta-points{
  margin: 12px 0 0;
  padding-left: 1.1rem;
  color: rgba(255,255,255,.78);
  line-height: 1.75;
}

/* Tombol: full-width di mobile, rapi di desktop */
.cta-actions{
  display: grid;
  gap: 10px;
}
.cta-btn{
  width: 100%;
  border-radius: 14px;   /* CTA button lebih “tegas” dari pill */
}

/* Note kecil */
.cta-note{
  font-size: .92rem;
  color: rgba(255,255,255,.75);
}

/* Mobile-first: padding aman */
@media (min-width: 576px){
  .cta-card{ padding: 34px; border-radius: 28px; }
}
@media (min-width: 992px){
  .cta-card{ padding: 44px; }
  .cta-actions{ gap: 12px; }
}


.site-footer-dark{
  background: #07152E;              /* navy pekat (mendekati hitam) */
  color: rgba(255,255,255,.88);
  padding: 56px 0 28px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.site-footer-dark .footer-brand{
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
}

.site-footer-dark .footer-pt{
  font-weight: 700;
  color: rgba(255,255,255,.82);
}

.site-footer-dark .footer-desc{
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  max-width: 36rem;
}

.site-footer-dark .footer-title{
  font-size: .95rem;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  margin-bottom: 12px;
}

.site-footer-dark .footer-list li{
  margin-bottom: 10px;
}

.site-footer-dark .footer-link{
  color: rgba(255,255,255,.74);
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease;
}

.site-footer-dark .footer-link:hover{
  color: #E8C547;                    /* gold brand */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer-dark .footer-meta-label{
  display: block;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  margin-bottom: 4px;
}

.footer-sep-dark{
  margin: 26px 0 18px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.10);
}

.footer-bottom-dark{
  font-size: .92rem;
  color: rgba(255,255,255,.60);
}
.site-footer-dark .footer-social{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.site-footer-dark .social-link{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.site-footer-dark .social-link:hover{
  transform: translateY(-2px);
  border-color: rgba(232,197,71,.40);
  background: rgba(232,197,71,.12);
  color: #E8C547;
}

.site-footer-dark .social-ic{
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: -.01em;
}