:root {
  --brand: #2e7d32; /* green */
  --brand-dark: #1b5e20; /* deep green for navbar */
  --brand-light: #c8e6c9; /* light green accents */
}
html, body { height: 100%; }
body {
  background-color: #f3faf5;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
/* Background halaman khusus untuk page login */
/* (revert) hapus background halaman khusus login; gunakan background hero per halaman */
main { flex: 1 0 auto; }
.hero {
  background: linear-gradient(135deg, var(--brand) 0%, #43a047 50%, var(--brand-dark) 100%);
  color: #fff;
  border-radius: 12px;
}
.bg-primary { background-color: var(--brand) !important; }
.navbar.bg-primary { background-color: var(--brand-dark) !important; }
.navbar.fixed-top { z-index: 1030; }
.navbar.fixed-top + main,
.navbar.fixed-top ~ main { margin-top: 3.75rem; }
@media (min-width: 992px) {
  .navbar.fixed-top + main,
  .navbar.fixed-top ~ main { margin-top: 4.25rem; }
}
.text-primary { color: var(--brand) !important; }
.btn-primary { background-color: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background-color: #256b2b; border-color: #256b2b; }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.btn-login {
  /* Kontras tinggi, gradasi menarik dengan pergeseran halus saat hover */
  background: linear-gradient(135deg, #6366f1 0%, #06b6d4 50%, #22c55e 100%);
  background-size: 200% 200%;
  color: #fff;
  border: 0;
  font-weight: 700;
  letter-spacing: .2px;
  padding: .55rem 1.05rem;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, background-position .4s ease;
}
.btn-login:hover { filter: brightness(.95); transform: translateY(-1px); background-position: 100% 0%; }
.navbar .btn-login { border-radius: 999px; }
.btn-login:focus, .btn-login:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(245, 158, 11, .45);
}
.dropdown .btn-login.dropdown-toggle::after { margin-left: .5rem; }
@media (prefers-reduced-motion: reduce) {
  .btn-login { transition: none; background-size: auto; }
}
.nav-pills { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: .5rem; }
.nav-pills::-webkit-scrollbar { display: none; }
.hero-image { max-width: 320px; width: 100%; height: auto; }
@media (max-width: 576px) {
  .hero { padding: 2rem !important; }
  .hero .display-6 { font-size: 1.6rem; }
  .hero .lead { font-size: 1rem; }
}
@media (min-width: 992px) {
  .hero { padding-left: 3rem !important; padding-right: 3rem !important; }
  .hero-copy { padding-left: 1rem; padding-right: 1rem; max-width: 760px; }
}
.card-step {
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-step:hover { transform: translateY(-3px); box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15); }
.btn-rounded { border-radius: 50px; }

/* Homepage feature styling */
.feature-icon { font-size: 2rem; color: var(--brand); }
.cta-banner {
  background: linear-gradient(135deg, rgba(46,125,50,.08), rgba(76,110,245,.08));
  border: 1px solid rgba(0,0,0,0.06);
}

/* Info grid (SPMB-style) */
.info-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .75rem;
  align-items: stretch;
}
.info-item-card {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.info-item-card:hover { transform: translateY(-2px); box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,.12); }
.info-item-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  border-radius: 12px 0 0 12px;
}
.info-item-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.06);
  color: var(--brand);
  font-size: 1.5rem;
}
.info-item-title { font-weight: 700; color: #1f2937; }
.info-item-text { color: #4b5563; }

/* Info themes */
.info-online::before { background: linear-gradient(135deg, #43A047, #2E7D32); }
.info-datetime::before { background: linear-gradient(135deg, #1976D2, #0D47A1); }
.info-location::before { background: linear-gradient(135deg, #5C6BC0, #3949AB); }
.info-reqs::before { background: linear-gradient(135deg, #F57C00, #E65100); }
.info-docs::before { background: linear-gradient(135deg, #26A69A, #00796B); }
.info-output::before { background: linear-gradient(135deg, #8E24AA, #6A1B9A); }
.info-notes::before { background: linear-gradient(135deg, #7CB342, #558B2F); }

@media (max-width: 576px) {
  .info-section { grid-template-columns: 1fr; gap: .5rem; }
  .info-item-icon { font-size: 1.35rem; width: 36px; height: 36px; }
}

/* Login page enhancements */
.login-hero {
  color: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 7rem);
  display: flex;
  align-items: center;
}
.login-hero.bg-cover { background-size: cover; background-position: center; background-repeat: no-repeat; }
.login-hero::after {
  content: none;
}
.login-hero .hero-content { position: relative; z-index: 1; }
.login-bg-student { background-image: url('/assets/img/image2.JFIF'); }
.login-bg-admin { background-image: url('/assets/img/image1.jfif'); }
.login-bg-school { background-image: url('/assets/img/image2.JFIF'); }
.login-card {
  border: none;
  box-shadow: 0 12px 28px rgba(31,41,55,.12);
  border-radius: 16px;
  position: relative;
  z-index: 1; /* pastikan form tampil paling depan */
}
.login-illustration {
  max-width: 380px;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(31,41,55,.18);
}
.animate-in { animation: fadeSlideUp .45s ease-out both; }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: translateY(0);} }

/* School list cards */
.school-card { border: none; box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.08); transition: transform .15s ease, box-shadow .15s ease; }
.school-card:hover { transform: translateY(-4px); box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,.15); }
.school-card .card-header { background: var(--brand); color: #fff; border-bottom: none; }
.school-card .card-footer { border-top: none; }
.avatar-circle { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-light); color: var(--brand-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.level-madrasah { background: linear-gradient(135deg, #2e7d32, #1b5e20) !important; }
.level-mts { background: linear-gradient(135deg, #388e3c, #2e7d32) !important; }
.level-ma { background: linear-gradient(135deg, #43a047, #2e7d32) !important; }

@media (max-width: 576px) {
  .school-card .card-header { padding: .75rem 1rem; }
  .school-card .h6 { font-size: .95rem; }
}

/* Modern UI additions for student dashboard */
:root {
  --accent: #4c6ef5; /* indigo */
  --accent-2: #22c55e; /* emerald */
  --surface: #ffffff;
  --surface-muted: #f7faf9;
}
.page-dashboard {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(76,110,245,.08), transparent 60%),
              radial-gradient(1000px 500px at 90% -20%, rgba(34,197,94,.08), transparent 60%);
}
.center-wrap {
  min-height: calc(100vh - 6rem);
  display: flex;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .center-wrap { align-items: center; }
}
.glass-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(31, 41, 55, 0.08);
}
.animate-in { animation: fadeSlideUp .45s ease-out both; }
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.modern-pills .nav-link {
  border-radius: 999px;
  background: var(--surface-muted);
  color: #1f2937;
  transition: all .2s ease;
}
.modern-pills .nav-link:hover { transform: translateY(-1px); }
.modern-pills .nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  box-shadow: 0 6px 16px rgba(46,125,50, .18);
}
.form-control, .form-select { border-radius: 10px; }
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem rgba(46,125,50,.15);
}
.btn { border-radius: 10px; transition: transform .1s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(31,41,55,.12); }
.list-group-item { border-radius: 10px; }

/* Step transition animations */
.slide-next-leave { animation: slideOutLeft .45s ease both; }
.slide-prev-leave { animation: slideOutRight .45s ease both; }
.slide-next-enter { animation: slideInRight .45s ease both; }
.slide-prev-enter { animation: slideInLeft .45s ease both; }
@keyframes slideOutLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-24px); } }
@keyframes slideOutRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
.shake { animation: shake .35s ease; }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* Login hero background cover and overlay */
.login-hero.bg-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.login-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.75), rgba(67, 160, 71, 0.55), rgba(27, 94, 32, 0.75));
  z-index: 1;
  animation: overlayPulse 12s ease-in-out infinite alternate;
}
.hero-content {
  position: relative;
  z-index: 2;
}
.login-bg-student,
.login-bg-admin,
.login-bg-school {
  /* Gunakan path relatif agar bekerja pada subdirektori */
  background-image: url('/assets/img/gedung.jpg');
}
@keyframes overlayPulse {
  0% { background: linear-gradient(135deg, rgba(46, 125, 50, 0.75), rgba(67, 160, 71, 0.55), rgba(27, 94, 32, 0.75)); }
  100% { background: linear-gradient(135deg, rgba(46, 125, 50, 0.65), rgba(67, 160, 71, 0.45), rgba(27, 94, 32, 0.65)); }
}
@media (min-width: 992px) {
  .login-hero.bg-cover { background-attachment: fixed; }
}

/* Menu Utama themed cards and animations */
.menu-card {
  border: 0;
  color: #fff;
  border-radius: .75rem;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.menu-card .card-body { padding: 1.25rem; }
.menu-card .fw-bold { color: #fff; }
.menu-card .menu-icon {
  font-size: 2.25rem;
  line-height: 1;
  margin-bottom: .35rem;
}
.menu-card:hover { transform: translateY(-3px); box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,.15); }

/* Themes */
.theme-register { background: linear-gradient(135deg, #43A047, #2E7D32); }
.theme-login-student { background: linear-gradient(135deg, #1976D2, #0D47A1); }
.theme-login-admin { background: linear-gradient(135deg, #F57C00, #E65100); }
.theme-login-school { background: linear-gradient(135deg, #8E24AA, #6A1B9A); }
.theme-status { background: linear-gradient(135deg, #00897B, #00695C); }
.theme-announcements { background: linear-gradient(135deg, #5C6BC0, #3949AB); }
.theme-guide { background: linear-gradient(135deg, #7CB342, #558B2F); }
.theme-faq { background: linear-gradient(135deg, #26A69A, #00796B); }

/* Icon animations */
@keyframes bounceY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes pulseGlow {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(255,255,255,.35)); }
}
@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(2deg); }
  75% { transform: rotate(-2deg); }
}
.anim-bounce { animation: bounceY 1.6s ease-in-out infinite; }
.anim-pulse { animation: pulseGlow 1.8s ease-in-out infinite; }
.anim-float { animation: floatY 2.2s ease-in-out infinite; }
.anim-wobble { animation: wobble 1.4s ease-in-out infinite; }

/* Ensure anchor takes full height and remains accessible */
.menu-link { display: block; height: 100%; }

/* Responsive tweaks for small screens */
@media (max-width: 576px) {
  .menu-card .menu-icon { font-size: 2rem; }
}

/* Guide flow components */
.flow-guide { margin-top: .5rem; }
.flow-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.flow-item {
  --accent: var(--brand);
  flex: 1 1 260px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 .35rem 1rem rgba(0,0,0,.08);
  padding: 1rem 1.25rem;
  position: relative;
  border-top: 4px solid var(--accent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.flow-item:hover { transform: translateY(-2px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.12); }
.flow-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.06);
  color: var(--accent);
  font-size: 1.4rem;
}
.flow-title { font-weight: 700; color: #1f2937; }
.flow-text { color: #4b5563; }
.flow-arrow {
  flex: 0 0 auto;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.flow-arrow::before {
  content: "";
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, rgba(156,163,175,.5), rgba(31,41,55,.25));
  border-radius: 2px;
}
.flow-arrow .bi {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  font-size: 1.1rem;
  color: #6b7280;
}

/* Flow themes (accent colors) */
.flow-theme-register { --accent: #22c55e; }
.flow-theme-login { --accent: #3b82f6; }
.flow-theme-biodata { --accent: #0ea5e9; }
.flow-theme-upload { --accent: #f59e0b; }
.flow-theme-schools { --accent: #8b5cf6; }
.flow-theme-submit { --accent: #10b981; }
.flow-theme-status { --accent: #06b6d4; }
.flow-theme-announce { --accent: #ef4444; }
.flow-theme-enroll { --accent: #374151; }

@media (max-width: 768px) {
  .flow-grid { display: grid; grid-template-columns: 1fr; gap: .5rem; }
}

/* Desktop refinements for Guide flow */
@media (min-width: 992px) {
  .flow-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  .flow-item { min-width: 0; }
  .flow-arrow { display: flex; }
}

/* Announcements styling */
.announce-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 .35rem 1rem rgba(0,0,0,.08);
  padding: 1rem 1.25rem;
}
.announce-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.announce-icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.06); color: var(--brand); font-size: 1.2rem; }
.announce-title { font-weight: 700; color: #1f2937; }
.announce-meta { color: #6b7280; font-size: .875rem; }
.announce-content { color: #374151; }