:root{
  --ukip-blue:#062b63;
  --ukip-gold:#f5b21b;
  --soft:#f6f8fb;
  --dark:#102033
}

/* NAVBAR */
.main-navbar{
  background:linear-gradient(90deg,var(--ukip-blue),#0b4ea2)
}

.logo-circle{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--ukip-gold);
  color:#08234e;
  font-weight:800
}

.navbar-brand small{
  font-size:.72rem;
  color:#dbeafe
}

/* HERO */
.hero{
  background:linear-gradient(110deg,rgba(6,43,99,.92),rgba(6,43,99,.58)),url('../img/campus-hero.jpg') center/cover;
  min-height:520px;
  color:white;
  display:flex;
  align-items:center
}

.hero h1{
  font-size:clamp(2rem,5vw,4rem);
  font-weight:800
}

/* SECTION */
.section-title{
  font-weight:800;
  color:var(--ukip-blue)
}

/* CARD */
.feature-card,
.news-card,
.faculty-card{
  border:0;
  border-radius:22px;
  box-shadow:0 12px 35px rgba(15,23,42,.08);
  transition:.2s;
  background:white
}

.feature-card:hover,
.news-card:hover,
.faculty-card:hover{
  transform:translateY(-4px)
}

/* ICON */
.icon-box{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:#eaf2ff;
  color:var(--ukip-blue);
  font-size:1.4rem
}

/* BUTTON */
.btn-gold{
  background:var(--ukip-gold);
  border:0;
  color:#102033;
  font-weight:700
}

.btn-gold:hover{
  background:#d99a12
}

/* BG */
.bg-soft{
  background:var(--soft)
}

/* FOOTER */
.footer{
  background:#071d3f;
  color:#dbeafe
}

.footer a{
  display:block;
  color:#dbeafe;
  text-decoration:none;
  margin:.35rem 0
}

/* PAGE */
.page-header{
  background:linear-gradient(90deg,#062b63,#0b4ea2);
  color:white;
  padding:70px 0
}

.content-box{
  background:white;
  border-radius:24px;
  box-shadow:0 12px 35px rgba(15,23,42,.08);
  padding:32px
}

/* NEWS */
.news-img{
  height:210px;
  object-fit:cover;
  border-radius:22px 22px 0 0
}

/* =========================
   POPUP IKLAN (DITAMBAHKAN)
   ========================= */

.popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:999999;
}

.popup-content{
  position:relative;
  width:90%;
  max-width:520px;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:popupFade .4s ease;
}

.popup-content img{
  width:100%;
  display:block;
}

.popup-close{
  position:absolute;
  top:8px;
  right:8px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#dc3545;
  color:#fff;
  font-size:24px;
  line-height:32px;
  text-align:center;
  cursor:pointer;
  z-index:2;
}

.popup-check{
  display:none;
}

.popup-check:checked ~ .popup-content{
  display:none;
}

.popup-overlay.hide{
  display:none;
}

/* animasi */
@keyframes popupFade{
  from{
    transform:scale(.8);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}