/* ============================================================
   TEMPLATE BASE — gaya global halaman publik (Praxis High School).
   Berisi: CSS custom properties, reset, utility, layout, typography,
   header/navbar, hero, sambutan, cards, news slider, buttons, footer,
   tombol WhatsApp, slider dots, images, ikon, decoration blobs.
   Dimuat PALING AWAL untuk halaman publik.
   ============================================================ */

/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --primary:             #2563EB;
  --primary-dark:        #1D4ED8;
  --secondary:           #0059c7;
  --on-surface:          #121b2e;
  --on-surface-variant:  #000000;
  --text-secondary:      #000000;
  --border-ui:           #E4E7EC;
  --bg-body:             #f9f9ff;
  --bg-soft-blue:        #F5F8FF;
  --bg-surface:          #f9f9ff;
  --bg-surface-lowest:   #ffffff;
  --bg-surface-low:      #f1f3ff;
  --bg-surface-container: #e9edff;
  --bg-light-blue:       #EAF2FF;
  --bg-dark-blue:        #0B1F44;
  --success-accent:      #12B76A;
  --error:               #ba1a1a;
  --text-muted:          #000000;
  --border-light:        #E2E8F0;
}

/* ============================================================
   2. RESET & BASE STYLES
   ============================================================ */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  background-color: var(--bg-body);
  color: var(--on-surface);
  overflow-x: hidden;
}

/* ============================================================
   3. UTILITY CLASSES
   ============================================================ */
.bg-soft-blue       { background-color: var(--bg-soft-blue); }
.bg-dark-blue       { background-color: var(--bg-dark-blue); }
.bg-surface-lowest  { background-color: var(--bg-surface-lowest); }
.bg-surface-low     { background-color: var(--bg-surface-low); }
.bg-light-blue      { background-color: var(--bg-light-blue); }

.text-on-surface         { color: var(--on-surface); }
.text-on-surface-variant { color: var(--on-surface-variant); }
.text-text-secondary     { color: var(--text-secondary); }

.border-ui { border-color: var(--border-ui) !important; }

.text-primary-custom  { color: var(--primary) !important; }
.bg-primary-custom    { background-color: var(--primary) !important; }

.rounded-2xl { border-radius: 1rem; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.backdrop-blur-sm { backdrop-filter: blur(4px); }

.tracking-tight  { letter-spacing: -0.02em; }
.tracking-wider  { letter-spacing: 0.1em; }

.transition-all {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-scale:hover { transform: scale(1.1); }

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(20, 85, 217, 0.12);
}

.shadow-soft  { box-shadow: 0 10px 30px -5px rgba(20, 85, 217, 0.08); }
.shadow-hover { box-shadow: 0 20px 40px -10px rgba(20, 85, 217, 0.12); }

.z-1  { z-index: 1; }
.z-2  { z-index: 2; }
.z-20 { z-index: 20; }

/* ============================================================
   4. LAYOUT
   ============================================================ */
.container-max {
  max-width: 1200px;
  margin: 0 auto;
}

.main-padding {
  padding-top: 72px;
}

.container-max-padding {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* ============================================================
   5. TYPOGRAPHY
   ============================================================ */
.fs-section-title {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
}

.fs-section-title-mobile {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
}

.fs-card-title {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
}

.fs-subheading {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
}

.fs-hero {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
}

.fs-hero-mobile {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
}

@media (min-width: 768px) {
  .fs-section-title { font-size: 30px; }
  .fs-hero          { font-size: 40px; }
}

@media (min-width: 992px) {
  .fs-hero      { font-size: 40px; }
  .hero-title   { font-size: 52px; line-height: 1.1; }
  .hero-subtitle { font-size: 18px; }
  .hero-br      { display: none; }
}

.text-xs-custom    { font-size: 13px; }
.text-sm-custom    { font-size: 14px; }
.text-body-custom  { font-size: 15px; line-height: 1.7; }
.text-body-sambutan { font-size: 15px; line-height: 1.85; }
.text-label-caps   { font-size: 14px; letter-spacing: 0.1em; }
.text-icon-sm      { font-size: 20px; }
.text-icon-md      { font-size: 24px; }
.text-icon-lg      { font-size: 28px; }
.text-white-70     { color: rgba(255, 255, 255, 0.7); }
.text-white-50     { color: rgba(255, 255, 255, 0.5); }
.text-white-20     { color: rgba(255, 255, 255, 0.2); }

/* ============================================================
   6. HEADER / NAVBAR
   ============================================================ */
.header-blur {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
}

.logo-img {
  height: 40px;
  object-fit: contain;
}

.nav-link-custom {
  color: var(--on-surface-variant);
  font-weight: 500;
  font-size: 16px;
  transition: color 0.2s;
}

.nav-link-custom:hover {
  color: var(--primary);
}

/* Hilangkan outline/highlight pada trigger dropdown Program */
.dropdown > span:focus,
.dropdown > span:focus-visible,
.dropdown > span:active {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent;
}

.dropdown .dropdown-menu {
  top: 100%;
  margin-top: 0.5rem;
  border: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 0.5rem;
}

.dropdown-menu li:not(:last-child) { margin-bottom: 0.375rem; }

.dropdown-menu .dropdown-item {
  font-size: 16px;
  padding: 0.625rem 1.25rem;
  margin: 0;
  border-radius: 6px;
}

.mobile-dropdown-content a:not(:last-child) { margin-bottom: 0.25rem; }

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
  background-color: var(--bg-light-blue) !important;
  color: var(--primary) !important;
  outline: none !important;
}

/* Active nav state */
.nav-active          { color: var(--primary) !important; }
.nav-active-mobile   { color: var(--primary) !important; background-color: var(--bg-light-blue) !important; }
.nav-active-dropdown { color: var(--primary) !important; background-color: var(--bg-light-blue) !important; }

/* Mobile dropdown panel */
.mobile-dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}

.mobile-dropdown-content.show { max-height: 200px; }

/* ============================================================
   7. HERO SLIDER
   ============================================================ */
.hero-minh     { min-height: 90vh; }
.hero-transition { transition-duration: 700ms; }
.hero-gradient { background: rgba(0, 0, 0, 0.5); }

.hero-nav-btn {
  width: 56px;
  height: 56px;
  background: transparent;
  backdrop-filter: none;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease;
}

.hero-nav-btn .material-symbols-outlined { font-size: 48px; }
.hero-nav-btn:hover { color: rgba(255, 255, 255, 0.7); }

.footer-brand-link,
.footer-brand-link:hover,
.footer-brand-link:focus { color: inherit; }

@media (max-width: 991px) {
  .hero-title    { font-size: 34px; line-height: 1.1; }
  .hero-br       { display: block; }
  .hero-subtitle { font-size: 15px; max-width: 576px; opacity: 0.85; line-height: 1.7; }
}

@media (max-width: 400px) {
  .hero-title              { font-size: 26px; line-height: 1.15; }
  .hero-subtitle           { font-size: 13px; }
  .fs-hero                 { font-size: 22px; }
  .fs-section-title-mobile { font-size: 20px; }
  .container-max-padding   { padding-left: 1rem; padding-right: 1rem; }
}

.hero-subtitle {
  max-width: 576px;
  opacity: 0.85;
  line-height: 1.7;
}

.hero-content {
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

.hero-dots {
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}

/* ============================================================
   8. SAMBUTAN
   ============================================================ */
.sambutan-img {
  width: 100%;
  max-width: 460px;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.sambutan-text { max-width: 560px; }

.sambutan-desc {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.85;
}

@media (min-width: 768px) {
  .sambutan-img-offset { position: relative; top: -24px; }
}

/* ============================================================
   9. CARDS
   ============================================================ */
.card-icon    { width: 56px; height: 56px; background: #BFDBFE; }
.card-icon-sm { width: 48px; height: 48px; background: #BFDBFE; }
.icon-blue      { color: #1D4ED8; }
.icon-blue-dark { color: #1D4ED8; }

/* ============================================================
   10. NEWS SLIDER / BERITA
   ============================================================ */
.berita-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border-ui);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.berita-nav-btn:hover { background: #f9fafb; }

.berita-nav-prev {
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 10;
}

.berita-nav-next {
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(50%);
  z-index: 10;
}

.berita-track-margin { margin-left: 0; margin-right: 0; }

@media (min-width: 576px) {
  .berita-track-margin { margin-left: 2rem; margin-right: 2rem; }
}

.slide-berita { flex-shrink: 0; padding: 0.5rem; }

.berita-card-body { padding: 14px; }

@media (min-width: 768px) {
  .berita-card-body { padding: 20px; }
}

.berita-img {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--bg-surface-low);
}

.berita-date  { font-size: 13px; color: var(--text-secondary); }
.berita-title { font-size: 15px; color: var(--on-surface); }
.berita-desc  { font-size: 13px; color: var(--text-secondary); }
.berita-link  { color: var(--primary); font-size: 13px; }
.berita-link-icon { font-size: 13px; }
.berita-slide-transition { transition-duration: 500ms; }

/* ============================================================
   11. BUTTONS
   ============================================================ */
.btn-hero-primary {
  background-color: var(--primary);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.625rem 1.5rem;
  font-weight: 600;
  font-size: 13px;
}

.btn-hero-primary:hover {
  background-color: var(--primary-dark);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
}

.btn-hero-outline {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.625rem 1.5rem;
  font-weight: 600;
  font-size: 13px;
}

.btn-hero-outline:hover { background: rgba(255, 255, 255, 0.2); }

/* ============================================================
   12. FOOTER
   ============================================================ */
.footer-link {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  transition: color 0.2s;
}

.footer-link:hover { color: #93C5FD; }

.footer-link.is-static { cursor: default; }

.footer-link.is-static:hover { color: rgba(255, 255, 255, 0.7); }

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: all 0.2s;
}

.social-icon:hover {
  color: #93C5FD;
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.footer-heading { font-size: 16px; letter-spacing: 0.1em; }

.footer-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 320px;
  line-height: 1.7;
}

.footer-border  { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.copyright-text { font-size: 14px; color: rgba(255, 255, 255, 0.5); }
.icon-location  { font-size: 18px; margin-top: 2px; }

/* ============================================================
   13. WHATSAPP FLOATING BUTTON
   ============================================================ */
.wa-fab {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 50;
  text-decoration: none;
  transition: all 0.2s;
}

@media (min-width: 576px) {
  .wa-fab { bottom: 1.5rem; right: 1.5rem; }
}

.wa-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  color: #fff;
}

/* ============================================================
   14. SLIDER DOTS
   ============================================================ */
.dot-hero {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  transition: all 0.3s;
  padding: 0;
  cursor: pointer;
}

.dot-hero.active {
  background: #ffffff;
  width: 18px;
  border-radius: 3px;
}

.dot-berita {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d1d5db;
  border: none;
  transition: all 0.3s;
}

.dot-berita.active {
  background: var(--primary);
  width: 18px;
  border-radius: 3px;
}

/* ============================================================
   15. IMAGES
   ============================================================ */
.img-cover     { object-fit: cover; }
.img-cover-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   16. UTILITY TAMBAHAN (dipakai halaman Tentang & lainnya)
   ============================================================ */
.bg-surface-container { background-color: var(--bg-surface-container); }

.container-px {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.object-cover  { object-fit: cover; }
.aspect-4-3    { aspect-ratio: 4 / 3; }

.max-w-320 { max-width: 320px; }
.max-w-672 { max-width: 672px; }
.max-w-768 { max-width: 768px; }

.fs-1rem { font-size: 1rem; }
.fs-13   { font-size: 13px; }
.fs-15   { font-size: 15px; }
.lh-17   { line-height: 1.7; }
.mt-2px  { margin-top: 2px; }

.border-white-top      { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.transition-transform  { transition: transform 0.2s; }

/* ============================================================
   17. ICON SIZES & CIRCLE
   ============================================================ */
.icon-16 { font-size: 16px; }
.icon-18 { font-size: 18px; }
.icon-20 { font-size: 20px; }
.icon-24 { font-size: 24px; }
.icon-28 { font-size: 28px; }
.icon-32 { font-size: 32px; }

.icon-circle-48 {
  width: 48px;
  height: 48px;
  background: #BFDBFE;
  color: #1D4ED8;
}

.icon-circle-64 {
  width: 64px;
  height: 64px;
  background: #BFDBFE;
  color: #1D4ED8;
}

/* ============================================================
   18. DECORATION BLOBS
   ============================================================ */
.decor-blur-sm {
  width: 96px;
  height: 96px;
  background: var(--bg-light-blue);
  bottom: -24px;
  left: -24px;
  z-index: -1;
  filter: blur(24px);
}

.decor-blur-lg {
  width: 128px;
  height: 128px;
  background: var(--primary);
  opacity: 0.15;
  top: -24px;
  right: -24px;
  z-index: -1;
  filter: blur(40px);
}


/* === Utility tambahan (shared lintas halaman publik) === */
.fs-card-title-sm {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
}

.z-0 { z-index: 0; }

/* === Utility shared: dipakai lintas halaman (Tentang/Kontak/Pendaftaran) === */
.max-w-640 { max-width: 640px; }
.border-none { border: 0; }