/* ============================================================
  BSITE PUBLIK SMKN 1 BANJAR MARGO
   Palet: Biru Royal #1B4FD8 · Oranye #F59E0B · Hijau #16A34A
   Tipografi: Plus Jakarta Sans (heading) + Inter (body)
   ============================================================ */

:root {
  --brand-blue: #1B4FD8;
  --brand-blue-dark: #12389B;
  --brand-blue-soft: #EAF0FE;
  --brand-orange: #F59E0B;
  --brand-orange-soft: #FFF4E0;
  --brand-green: #16A34A;
  --brand-green-soft: #EAF9F0;
  --ink: #1E293B;
  --ink-soft: #64748B;
  --surface: #F8FAFC;
  --radius: 14px;
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, .07);
  --shadow-hover: 0 18px 40px rgba(15, 23, 42, .13);
  --font-head: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

html                      { scroll-behavior: smooth; }
body                      { font-family: var(--font-body); color: var(--ink); background: #fff; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); font-weight: 800; letter-spacing: -.01em; }

/* ---------- utilitaires warna ---------- */
.text-brand        { color: var(--brand-blue) !important; }
.bg-brand          { background: var(--brand-blue) !important; }
.bg-brand-dark     { background: var(--brand-blue-dark) !important; }
.bg-brand-soft     { background: var(--brand-blue-soft) !important; }
.bg-surface        { background: var(--surface) !important; }
.rounded-14        { border-radius: var(--radius); }
.ink-soft          { color: var(--ink-soft); }

/* ---------- topbar & navbar ---------- */
.topbar {
  background: var(--brand-blue-dark);
  color: #cbd5e1; font-size: .8rem; padding: .45rem 0;
}
.topbar a { color: #e2e8f0; text-decoration: none; }
.topbar a:hover { color: #fff; }

.nav-main {
  background: #ffffffee;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(15,23,42,.06);
}
.navbar-brand-logo { height: 46px; width: 46px; object-fit: contain; }
.nav-main .nav-link {
  font-weight: 600; color: var(--ink); padding: .5rem 1rem !important;
  border-radius: 10px;
}
.nav-main .nav-link:hover { color: var(--brand-blue); background: var(--brand-blue-soft); }
.nav-main .nav-link.active { color: var(--brand-blue); background: var(--brand-blue-soft); }
.btn-cta {
  background: var(--brand-orange); color:#fff; font-weight:700;
  border-radius: 12px; padding: .55rem 1.15rem; border: none;
}
.btn-cta:hover { background: #d97706; color: #fff; }

/* ---------- hero slider ---------- */
.hero { position: relative; }
.hero-item {
  min-height: 68vh; display:flex; align-items:center;
  background-size: cover; background-position: center;
  position: relative;
}
.hero-item::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(9,20,58,.92) 0%, rgba(27,79,216,.55) 45%, rgba(27,79,216,.25) 100%);
}
.hero-caption { position: relative; z-index: 2; color:#fff; max-width: 640px; }
.hero-caption .badge-soft {
  background: rgba(245,158,11,.16); border: 1px solid rgba(245,158,11,.45);
  color: #fde68a; padding: .35rem .9rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing:.04em;
}
.hero-caption h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height:1.15; }
.hero-caption p  { font-size: 1.05rem; color: #e2e8f0; }

/* ---------- kartu pintasan ---------- */
.quick-card {
  background: #fff; border-radius: var(--radius);
  padding: 1.35rem 1.1rem; text-align:center; text-decoration:none;
  color: var(--ink); display:block;
  border: 1px solid #eef2f7; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease;
  height: 100%;
}
.quick-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  color: var(--brand-blue);
}
.quick-card .qc-icon {
  width: 58px; height: 58px; border-radius: 16px; margin: 0 auto .8rem;
  display:flex; align-items:center; justify-content:center; font-size: 1.55rem; color:#fff;
}
.quick-card h6 { font-weight: 800; margin-bottom: .25rem; }
.quick-card small { color: var(--ink-soft); }

/* ---------- section heading ---------- */
.section { padding: 4.2rem 0; }
.section-alt { background: var(--surface); }
.sec-head { max-width: 640px; margin-bottom: 2.4rem; }
.sec-head .kicker {
  color: var(--brand-blue); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; font-size: .78rem;
}
.sec-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }

/* ---------- kartu berita ---------- */
.news-card {
  background:#fff; border-radius: var(--radius); overflow:hidden;
  border: 1px solid #eef2f7; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease;
  text-decoration:none; color: var(--ink); height: 100%;
  display:flex; flex-direction: column;
}
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); color: var(--ink); }
.news-card .thumb {
  aspect-ratio: 16/9; background: var(--brand-blue-soft) center/cover no-repeat;
  background-color: var(--brand-blue-soft);
}
.news-card .body { padding: 1.1rem 1.2rem 1.3rem; flex: 1; }
.news-badge {
  font-size: .72rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px;
  background: var(--brand-orange-soft); color: #b45309;
}
.news-meta { font-size: .8rem; color: var(--ink-soft); }
.news-card h5 { font-size: 1.02rem; line-height: 1.35; }
.news-excerpt { font-size: .88rem; color: var(--ink-soft); }

/* ---------- pengumuman list ---------- */
.ann-item {
  display:flex; gap: 1rem; padding: 1rem 0; text-decoration: none;
  border-bottom: 1px dashed #e2e8f0; color: var(--ink);
}
.ann-item:hover { color: var(--brand-blue); }
.ann-date {
  flex: 0 0 62px; text-align: center; background: var(--brand-blue-soft);
  border-radius: 12px; padding: .5rem 0; line-height: 1.15;
}
.ann-date .d { font-size: 1.35rem; font-weight: 800; color: var(--brand-blue); font-family: var(--font-head);}
.ann-date .m { font-size: .72rem; color: var(--ink-soft); font-weight: 600; }

/* ---------- stats band ---------- */
.stats-band {
  background: linear-gradient(105deg, var(--brand-blue-dark), var(--brand-blue));
  color:#fff; border-radius: 24px; padding: 3rem 1rem; overflow: hidden;
}
.stat-num { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; font-family: var(--font-head); }
.stat-label { opacity: .85; }

/* ---------- kartu jurusan ---------- */
.major-card {
  background:#fff; border-radius: var(--radius); padding: 1.5rem;
  border: 1px solid #eef2f7; box-shadow: var(--shadow-soft);
  height:100%; display:flex; flex-direction: column;
  transition: transform .22s, box-shadow .22s;
}
.major-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.major-card .mj-icon {
  width: 52px; height:52px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  font-size: 1.4rem; color:#fff; margin-bottom: 1rem;
}

/* ---------- agenda ---------- */
.agenda-item { padding: .95rem 0; border-bottom: 1px dashed #e2e8f0; }
.agenda-date { min-width: 74px; }

/* ---------- agenda: penyempurnaan visual ---------- */
/* chip tahun pada blok tanggal */
.ann-date .y { font-size: .66rem; color: #94A3B8; font-weight: 600; }

/* item entri berikutnya (satu terdekat) disorot */
.agenda-next {
  border: 1px solid rgba(27, 79, 216, .28) !important;
  border-bottom: 1.5px solid rgba(27, 79, 216, .28) !important;
  background: linear-gradient(90deg, var(--brand-blue-soft), #ffffff 70%);
  border-radius: 14px;
  padding: .8rem 1rem !important;
  margin-bottom: .6rem;
}
.agenda-next .next-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--brand-blue); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  border-radius: 99px; padding: .18rem .55rem; text-transform: uppercase;
}

/* deskripsi agenda */
.agenda-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .88rem; color: var(--ink-soft);
}

/* berita terkini di sidebar agenda: ikon status */
.agenda-side-list .ann-item { border-bottom: 1px dashed #e2e8f0; }
.agenda-side-list .ann-item:last-child { border-bottom: none; }

/* ---------- PTK (Pendidik & Tenaga Kependidikan) ---------- */
.shadow-soft-card { box-shadow: var(--shadow-soft); }

/* band ringkasan di bawah hero */
.ptk-banner {
  background: linear-gradient(105deg, var(--brand-blue-dark), var(--brand-blue));
  border-radius: 14px;
  color: #fff;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 14px 30px rgba(27, 79, 216, .25);
}
.ptk-banner .ptk-statb {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  flex-direction: column;
}
.ptk-banner .ptk-statb .num {
  font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; line-height: 1;
}
.ptk-banner .ptk-statb .lbl { font-size: .78rem; opacity: .85; }
.ptk-banner .ptk-sep {
  width: 1px; height: 42px; background: rgba(255, 255, 255, .25); margin: 0 auto;
}
@media (max-width: 575.98px) { .ptk-banner .ptk-sep { display: none; } }

/* seksi */
.ptk-section {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 1.2rem;
  margin-top: 1.25rem;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 992px) { .ptk-section { padding: 1.75rem; } }
.ptk-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: .5rem; }
.ptk-sec-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.ptk-sec-title { font-family: var(--font-head); font-weight: 800; margin: 0; }
.ptk-sec-cap { font-size: .85rem; color: var(--ink-soft); margin: 0; }
.ptk-sec-count {
  margin-left: auto;
  background: var(--brand-blue-soft); color: #12389B;
  font-size: .74rem; font-weight: 700;
  border-radius: 99px; padding: .28rem .75rem;
}

/* kartu */
.ptk-col { opacity: 0; transform: translateY(10px); }
.ptk-col.in-view {
  animation: ptkRise .45s cubic-bezier(.22, .8, .36, 1) forwards;
}
@keyframes ptkRise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ptk-col { opacity: 1; transform: none; animation: none; }
  .ptk-card, .ptk-photo img { transition: none !important; }
}
.ptk-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: .8rem .8rem .95rem;
  text-align: center;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ptk-card:hover {
  transform: translateY(-4px);
  border-color: rgba(27, 79, 216, .28);
  box-shadow: 0 14px 30px rgba(27, 79, 216, .12);
}
.ptk-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: #EFF4FF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .7rem;
  position: relative;
}
.ptk-photo::after {  /* garis aksen bawah bingkai */
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-blue), #F59E0B);
  opacity: 0; transition: opacity .25s ease;
}
.ptk-card:hover .ptk-photo::after { opacity: 1; }
.ptk-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.ptk-card:hover .ptk-photo img { transform: scale(1.05); }
.ptk-initial {
  width: 64px; height: 64px;
  border-radius: 38% 62% 55% 45% / 55% 45% 62% 38%;  /* bentuk beranimasi ringan */
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.5rem; font-weight: 800;
  transition: border-radius .5s ease, transform .25s ease;
}
.ptk-card:hover .ptk-initial { border-radius: 50%; transform: scale(1.06); }
/* palet avatar bervariasi, dipilih dari seed nama */
.ptk-av0 { background: linear-gradient(135deg, #1B4FD8, #4F79E8); }
.ptk-av1 { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
.ptk-av2 { background: linear-gradient(135deg, #0E9488, #2DD4BF); }
.ptk-av3 { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
.ptk-av4 { background: linear-gradient(135deg, #E11D48, #FB7185); }
.ptk-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  line-height: 1.3;
  min-height: 2.4em;
  display: flex; align-items: center; justify-content: center;
}
.ptk-nip { font-size: .72rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-top: .15rem; }
.ptk-badge {
  display: inline-block;
  margin-top: .45rem;
  background: var(--brand-blue-soft);
  color: #12389B;
  font-size: .68rem;
  font-weight: 700;
  border-radius: 99px;
  padding: .2rem .6rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- galeri ---------- */
.gal-card {
  border-radius: var(--radius); overflow:hidden; position:relative;
  text-decoration:none; display:block; height: 100%;
}
.gal-card img { width:100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .35s ease; }
.gal-card:hover img { transform: scale(1.06); }
.gal-overlay {
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(9,20,58,.82), transparent 55%);
  color:#fff; padding: 1rem; display:flex; align-items:flex-end;
}
.gallery-photo img { border-radius: 10px; cursor: zoom-in; transition: transform .25s; }
.gallery-photo img:hover { transform: scale(1.02); }

/* ---------- article / page body ---------- */
.article-body { font-size: 1.02rem; line-height: 1.85; color:#334155; }
.article-body img { max-width:100%; border-radius: 12px; }
.article-body h2,h3 { margin-top: 1.6rem; }

/* ---------- CTA ppdb ---------- */
.cta-ppdb {
  background: linear-gradient(105deg, var(--brand-green), #0e7a38);
  color:#fff; border-radius: 20px; padding: 2.2rem;
}

/* ---------- footer ---------- */
.site-footer { background: #0F172A; color: #94a3b8; }
.site-footer h6 { color:#fff; font-weight:700; margin-bottom:1rem; }
.site-footer a { color: #cbd5e1; text-decoration:none; }
.site-footer a:hover { color:#fff; }
.footer-bottom { border-top: 1px solid #1e293b; font-size:.82rem; }

/* ---------- breadcrumb page header ---------- */
.page-hero {
  background: linear-gradient(105deg, var(--brand-blue-dark), var(--brand-blue));
  color:#fff; padding: 3.2rem 0 2.6rem;
}
.page-hero .breadcrumb { --bs-breadcrumb-divider-color: #93b4ff; }
.page-hero .breadcrumb a { color:#cfe0ff; text-decoration:none; }

/* ---------- kontak ---------- */
.contact-icon {
  width:46px; height:46px; border-radius: 12px; background: var(--brand-blue-soft);
  color: var(--brand-blue); display:flex; align-items:center; justify-content:center; font-size:1.15rem;
}

/* ---------- animasi reveal ---------- */
.reveal { opacity:0; transform: translateY(26px); transition: all .6s ease; }
.reveal.in { opacity:1; transform: none; }

/* ============================================================
   EKSPERIENSI INTERAKTIF (motion & micro-interactions)
   ============================================================ */

/* ---------- preloader ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 3000;
  background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue));
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
#preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.pre-logo {
  width: 74px; height: 74px; border-radius: 20px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  animation: prePulse 1.15s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(255,255,255,.45);
}
.pre-logo img { width: 54px; height: 54px; object-fit: contain; }
.pre-bar {
  position: absolute; bottom: 0; left: 0; height: 4px; width: 40%;
  background: var(--brand-orange); border-radius: 0 4px 4px 0;
  animation: preBar 1.2s ease-in-out infinite;
}
@keyframes prePulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.35); }
  50%     { transform: scale(1.06); box-shadow: 0 0 0 18px rgba(255,255,255,0); }
}
@keyframes preBar {
  0%   { transform: translateX(-100%); width: 45%; }
  55%  { transform: translateX(60vw);  width: 35%; }
  100% { transform: translateX(100%);  width: 45%; }
}

/* ---------- scroll progress bar ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 2500;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-orange));
  border-radius: 0 3px 3px 0;
  transition: width .08s linear;
  pointer-events: none;
}

/* ---------- back to top ---------- */
#toTop {
  position: fixed; right: 22px; bottom: 22px; z-index: 2400;
  width: 46px; height: 46px; border: none; border-radius: 14px;
  background: var(--brand-blue); color: #fff; font-size: 1.15rem;
  box-shadow: 0 10px 24px rgba(27,79,216,.38);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: all .3s ease; display: flex; align-items: center; justify-content: center;
}
#toTop.show { opacity: 1; visibility: visible; transform: none; }
#toTop:hover { background: var(--brand-blue-dark); transform: translateY(-3px); }

/* ---------- navbar state saat scroll ---------- */
.nav-main { transition: box-shadow .3s ease, background .3s ease; }
.nav-main.scrolled { box-shadow: 0 8px 26px rgba(15,23,42,.14); background: #ffffffff; }

/* ---------- ticker pengumuman berjalan ---------- */
.ticker-band {
  background: var(--brand-blue-dark); color: #fff;
  display: flex; align-items: stretch; overflow: hidden;
  border-bottom: 3px solid var(--brand-orange);
}
.ticker-label {
  flex: 0 0 auto; display: flex; align-items: center; gap: .5rem;
  background: var(--brand-orange); color: #fff; font-weight: 700;
  padding: .55rem 1rem; font-size: .82rem; letter-spacing: .04em;
  position: relative; z-index: 2;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.ticker-label i { animation: bellSwing 1.6s ease-in-out infinite; transform-origin: top center; }
@keyframes bellSwing {
  0%,100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-10deg); }
}
.ticker-view { overflow: hidden; display: flex; align-items: center; flex: 1; min-width: 0; }
.ticker-track {
  display: flex; align-items: center; gap: 3.5rem; white-space: nowrap;
  will-change: transform;
  animation: tick 28s linear infinite;
}
.ticker-view:hover .ticker-track { animation-play-state: paused; }
.ticker-track a {
  color: #e2e8f0; text-decoration: none; font-size: .88rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: .55rem; transition: color .2s;
}
.ticker-track a:hover { color: #fff; }
.ticker-track a .ti-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand-orange);
  flex: 0 0 8px; display: inline-block;
}
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- animasi masuk teks hero (stagger) ---------- */
.carousel-item .hero-caption > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity .65s ease, transform .65s ease;
}
.carousel-item.active .hero-caption > * { opacity: 1; transform: none; }
.carousel-item.active .hero-caption > *:nth-child(1) { transition-delay: .18s; }
.carousel-item.active .hero-caption > *:nth-child(2) { transition-delay: .34s; }
.carousel-item.active .hero-caption > *:nth-child(3) { transition-delay: .5s; }
.carousel-item.active .hero-caption > *:nth-child(4) { transition-delay: .66s; }

/* indikator hero slide custom */
#heroSlider .carousel-indicators { gap: .4rem; margin-bottom: 1.1rem; }
#heroSlider .carousel-indicators [data-bs-target] {
  width: 26px; height: 5px; border: none; border-radius: 99px;
  background: rgba(255,255,255,.35); transition: all .3s ease;
}
#heroSlider .carousel-indicators .active { width: 44px; background: var(--brand-orange); }

/* ---------- micro-interaction kartu ---------- */
.quick-card, .news-card, .major-card { will-change: transform; }
.quick-card .qc-icon, .major-card .mj-icon { transition: transform .3s ease, border-radius .3s ease; }
.quick-card:hover .qc-icon, .major-card:hover .mj-icon {
  transform: rotate(-8deg) scale(1.12);
  border-radius: 50% 14px 14px 14px;
}
.quick-card:hover h6, .major-card:hover h6 { color: var(--brand-blue); }
.quick-card:hover small, .major-card:hover small { color: var(--ink-soft); }

.news-card .thumb { transition: transform .45s ease; }
.news-card:hover .thumb { transform: scale(1.04); }
.news-card h5 { transition: color .25s ease; }
.news-card:hover h5 { color: var(--brand-blue); }
.news-card .news-badge { transition: background .25s ease; }
.news-card:hover .news-badge { background: #ffe3ad; }

.gal-card::after {
  content: '\F14A'; font-family: 'bootstrap-icons'; /* bi-arrows-angle-expand */
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.92); color: var(--brand-blue);
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
  opacity: 0; transform: scale(.6); transition: all .28s ease;
}
.gal-card:hover::after { opacity: 1; transform: none; }

/* tilt 3D (dari JS) */
.tilt { transform-style: preserve-3d; transition: transform .18s ease-out, box-shadow .22s ease; }
.tilt-inner { transition: transform .18s ease-out; }

/* ripple tombol */
.btn { position: relative; overflow: hidden; }
.ripple-el {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.5); transform: scale(0);
  animation: rippleGo .55s ease-out forwards;
}
@keyframes rippleGo { to { transform: scale(2.6); opacity: 0; } }

/* --- hover baris ajaib pada pengumuman & agenda --- */
.ann-item, .agenda-item { transition: padding .22s ease; }
.ann-item:hover, .agenda-item:hover { padding-left: .55rem; }
.ann-item { transition: padding .22s ease, color .2s ease; }

/* ---------- dropdown nav animasi ---------- */
@media (min-width: 992px) {
  .nav-main .dropdown-menu {
    display: block; opacity: 0; visibility: hidden;
    transform: translateY(10px); transition: all .22s ease;
    margin-top: 0 !important; pointer-events: none;
  }
  .nav-main .dropdown-menu.show,
  .nav-main .dropdown:hover > .dropdown-menu {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  }
}
.dropdown-item { border-radius: 10px; padding: .45rem .9rem; font-size: .9rem; }
.dropdown-item:hover { background: var(--brand-blue-soft); color: var(--brand-blue); }

/* ---------- reveal varian & stagger ---------- */
.reveal-left  { opacity: 0; transform: translateX(-30px); transition: all .6s ease; }
.reveal-right { opacity: 0; transform: translateX(30px);  transition: all .6s ease; }
.reveal-left.in, .reveal-right.in { opacity: 1; transform: none; }
.reveal[data-delay="1"], .reveal-left[data-delay="1"], .reveal-right[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"], .reveal-left[data-delay="2"], .reveal-right[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"], .reveal-left[data-delay="3"], .reveal-right[data-delay="3"] { transition-delay: .36s; }

/* ikon statistik berdenyut saat hover bagian */
.stats-band .bi { transition: transform .3s ease; }
.stats-band .col-6:hover .bi { transform: translateY(-4px) scale(1.15); }
.stats-band .col-6 { transition: transform .25s ease; }
.stats-band .col-6:hover { transform: translateY(-3px); }

/* --- latar berkilau lembut pada CTA ppdb --- */
.cta-ppdb { position: relative; overflow: hidden; }
.cta-ppdb::before {
  content: ''; position: absolute; top: -60%; left: -30%;
  width: 40%; height: 220%; transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  animation: sheen 4.5s ease-in-out infinite;
}
@keyframes sheen { 0%, 55% { left: -40%; } 100% { left: 130%; } }

/* ---------- lightbox halus ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 2600;
  background: rgba(9,20,58,.92); display: flex; align-items: center; justify-content: center;
  cursor: zoom-out; padding: 24px; animation: lbFade .25s ease;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.lightbox .lb-close {
  position: absolute; top: 18px; right: 18px; width: 42px; height: 42px;
  border: none; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s;
}
.lightbox .lb-close:hover { background: rgba(255,255,255,.3); }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- hormati preferensi pengguna ---------- */
@media (prefers-reduced-motion: reduce) {
  .ticker-track, .pre-logo, .pre-bar, .cta-ppdb::before, .ticker-label i { animation: none !important; }
  .reveal, .reveal-left, .reveal-right, .carousel-item .hero-caption > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .nav-main .navbar-collapse { padding: .75rem 0; }
  .hero-item { min-height: 56vh; }
}
@media (max-width: 575px) {
  .ticker-label { padding: .45rem .8rem; font-size: .74rem; }
  .ticker-track a { font-size: .8rem; }
  .section { padding: 3rem 0; }
}

@media (min-width:992px){.col-lg-2-5{flex:0 0 20%;max-width:20%}}