/* ==========================================================================



   SMA NEGERI 1 NUSANTARA - MODERN DESIGN SYSTEM



   Clean, Responsive, Pure CSS (No Frameworks, Fast for GitHub Pages)



   ========================================================================== */







:root {



  /* Colors */



  --primary: #15803d;             /* Mockup Forest Green */



  --primary-dark: #14532d;        /* Deep Green */



  --primary-light: #22c55e;       /* Accent Green */



  --primary-mint: #ebf7f0;        /* Light Mint Tint */



  --primary-badge-bg: #d1fae5;    /* Badge Background */



  --primary-badge-text: #065f46;  /* Badge Text */







  --accent-cta: #15803d;



  --accent-cta-hover: #166534;







  --bg-page: #f8fafc;



  --bg-white: #ffffff;



  --bg-hero-wave: #ecfdf5;







  --text-primary: #0f172a;        /* High contrast slate */



  --text-secondary: #475569;      /* Medium slate */



  --text-muted: #94a3b8;          /* Light slate */







  --border-light: #e2e8f0;



  --border-green: #bbf7d0;







  /* Shadows */



  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);



  --shadow-md: 0 8px 24px -4px rgba(15, 23, 42, 0.06), 0 4px 8px -2px rgba(15, 23, 42, 0.03);



  --shadow-lg: 0 16px 36px -6px rgba(21, 128, 61, 0.12), 0 8px 16px -4px rgba(0, 0, 0, 0.04);



  --shadow-card: 0 10px 30px -5px rgba(22, 101, 52, 0.08);



  --shadow-glow: 0 0 35px rgba(34, 197, 94, 0.25);







  /* Radii */



  --radius-sm: 8px;



  --radius-md: 14px;



  --radius-lg: 20px;



  --radius-xl: 28px;



  --radius-full: 9999px;







  /* Typography */



  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;



  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);



  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);



}







/* Base Reset & Box Sizing */



*, *::before, *::after {



  box-sizing: border-box;



  margin: 0;



  padding: 0;



}







html {



  scroll-behavior: smooth;



  font-size: 16px;



  -webkit-text-size-adjust: 100%;



}







body {



  font-family: var(--font-family);



  color: var(--text-primary);



  background-color: #ffffff;



  line-height: 1.6;



  overflow-x: hidden;



  position: relative;



  -webkit-font-smoothing: antialiased;



  -moz-osx-font-smoothing: grayscale;



}







/* Background floating decorative leaves */



.ambient-decorations {



  position: absolute;



  top: 0;



  left: 0;



  right: 0;



  bottom: 0;



  pointer-events: none;



  overflow: hidden;



  z-index: 1;



}







.leaf-item {



  position: absolute;



  width: 90px;



  height: 90px;



  opacity: 0.65;



  filter: blur(0.5px);



  animation: floatLeaf 8s ease-in-out infinite alternate;



}







.leaf-1 {



  top: 40px;



  left: -20px;



  transform: rotate(25deg);



}







.leaf-2 {



  top: 680px;



  right: -25px;



  transform: rotate(-45deg);



  animation-duration: 10s;



  animation-delay: -3s;



}







.leaf-3 {



  top: 1350px;



  left: -35px;



  transform: rotate(60deg);



  animation-duration: 9s;



  animation-delay: -5s;



}







.leaf-4 {



  top: 1950px;



  right: -20px;



  transform: rotate(-15deg);



  animation-duration: 11s;



}







.leaf-5 {



  bottom: 120px;



  left: 10px;



  transform: rotate(40deg);



  animation-duration: 7s;



}







@keyframes floatLeaf {



  0% { transform: translateY(0px) rotate(0deg); }



  100% { transform: translateY(-16px) rotate(8deg); }



}







/* Layout Utilities */



.container {



  width: 100%;



  max-width: 1240px;



  margin-left: auto;



  margin-right: auto;



  padding-left: 24px;



  padding-right: 24px;



  position: relative;



  z-index: 2;



}







a {



  text-decoration: none;



  color: inherit;



  transition: color var(--transition-fast);



}







button {



  font-family: inherit;



  cursor: pointer;



  border: none;



  outline: none;



  background: none;



}







img {



  max-width: 100%;



  height: auto;



  display: block;



}







/* ==========================================================================



   FLOATING PILL NAVIGATION BAR (MATCHING MOCKUP)



   ========================================================================== */



.header-nav {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  padding: 0 20px;
  transition: all var(--transition-fast);
}

.header-nav.scrolled {
  top: 14px;
}







.navbar-wrapper {



  max-width: 1140px;



  margin: 0 auto;



  background: #ffffff;



  border-radius: var(--radius-full);



  display: flex;



  align-items: center;



  justify-content: space-between;



  height: 66px;



  padding: 8px 12px 8px 24px;



  box-shadow: 0 12px 36px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(21, 128, 61, 0.06);



  border: 1px solid rgba(255, 255, 255, 0.9);



  transition: all var(--transition-fast);



}







.header-nav.scrolled .navbar-wrapper {



  background: rgba(255, 255, 255, 0.98);



  box-shadow: 0 16px 40px -4px rgba(15, 23, 42, 0.16);



}







/* Logo */



.brand-logo {



  display: flex;



  align-items: center;



  gap: 12px;



}







.brand-icon-box {



  width: 44px;



  height: 44px;



  background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);



  border-radius: var(--radius-md);



  display: flex;



  align-items: center;



  justify-content: center;



  color: #ffffff;



  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.25);



  flex-shrink: 0;



  transition: transform var(--transition-fast);



}







.brand-logo:hover .brand-icon-box {



  transform: scale(1.05);



}







.brand-text {



  display: flex;



  flex-direction: column;



}







.brand-title {



  font-size: 1.05rem;



  font-weight: 800;



  color: var(--text-primary);



  line-height: 1.2;



  letter-spacing: -0.01em;



}







.brand-sub {



  font-size: 0.85rem;



  font-weight: 600;



  color: var(--primary);



  letter-spacing: 0.02em;



}







/* Nav Links */



.nav-menu {



  display: flex;



  align-items: center;



  gap: 32px;



  list-style: none;



}







.nav-link {



  font-size: 0.95rem;



  font-weight: 500;



  color: var(--text-secondary);



  position: relative;



  padding: 8px 2px;



  transition: color var(--transition-fast);



}







.nav-link:hover {



  color: var(--primary);



}







.nav-link.active {



  color: var(--primary);



  font-weight: 700;



}







.nav-link.active::after {



  content: '';



  position: absolute;



  bottom: 0;



  left: 0;



  right: 0;



  height: 2.5px;



  background-color: var(--primary);



  border-radius: var(--radius-full);



}







/* Header Action */



.nav-actions {



  display: flex;



  align-items: center;



  gap: 16px;



}







.btn-ppdb {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  background-color: var(--primary);



  color: #ffffff;



  font-size: 0.9rem;



  font-weight: 600;



  padding: 10px 22px;



  border-radius: var(--radius-full);



  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.28);



  transition: all var(--transition-fast);



}







.btn-ppdb:hover {



  background-color: var(--accent-cta-hover);



  transform: translateY(-2px);



  box-shadow: 0 6px 18px rgba(21, 128, 61, 0.35);



  color: #ffffff;



}







.btn-ppdb svg {



  transition: transform var(--transition-fast);



}







.btn-ppdb:hover svg {



  transform: translateX(3px);



}







/* Mobile Toggle */



.mobile-menu-btn {



  display: none;



  flex-direction: column;



  justify-content: center;



  align-items: center;



  width: 42px;



  height: 42px;



  border-radius: var(--radius-sm);



  background: var(--primary-mint);



  color: var(--primary);



}







.mobile-menu-btn span {



  display: block;



  width: 20px;



  height: 2px;



  background-color: var(--primary);



  border-radius: 2px;



  transition: all var(--transition-fast);



}







.mobile-menu-btn span:not(:last-child) {



  margin-bottom: 5px;



}







.mobile-menu-btn.open span:nth-child(1) {



  transform: translateY(7px) rotate(45deg);



}



.mobile-menu-btn.open span:nth-child(2) {



  opacity: 0;



}



.mobile-menu-btn.open span:nth-child(3) {



  transform: translateY(-7px) rotate(-45deg);



}







/* ==========================================================================



   HERO SECTION (FULL BACKGROUND PANORAMA & ORGANIC WAVES MATCHING MOCKUP)



   ========================================================================== */



.hero-section {



  position: relative;



  min-height: 740px;



  background-image: url('../images/hero-panorama.webp');



  background-size: cover;



  background-position: right top;



  background-repeat: no-repeat;



  padding-top: 145px;



  padding-bottom: 140px;



  overflow: hidden;



}







/* Gradient overlay for text contrast on left */



.hero-overlay-gradient {



  position: absolute;



  top: 0;



  left: 0;



  right: 0;



  bottom: 0;



  background: linear-gradient(90deg, 



    rgba(255, 255, 255, 0.98) 0%, 



    rgba(255, 255, 255, 0.94) 34%, 



    rgba(255, 255, 255, 0.65) 50%, 



    rgba(255, 255, 255, 0.12) 65%, 



    rgba(255, 255, 255, 0) 80%



  );



  pointer-events: none;



  z-index: 1;



}







.hero-layout {



  display: grid;



  grid-template-columns: 1.15fr 1fr;



  align-items: center;



  min-height: 480px;



  position: relative;



  z-index: 2;



}







/* Left Hero Content */



.hero-content {



  display: flex;



  flex-direction: column;



  align-items: flex-start;



  max-width: 540px;



}







.hero-spacer-right {



  display: block;



  min-height: 380px;



}







.badge-pill {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  background-color: var(--primary-badge-bg);



  color: var(--primary-badge-text);



  font-size: 0.82rem;



  font-weight: 700;



  letter-spacing: 0.02em;



  padding: 6px 16px;



  border-radius: var(--radius-full);



  margin-bottom: 20px;



  border: 1px solid rgba(187, 247, 208, 0.8);



  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.08);



}







.badge-pill svg {



  color: var(--primary);



}







.hero-title {



  font-size: 2.9rem;



  font-weight: 800;



  line-height: 1.18;



  color: var(--text-primary);



  letter-spacing: -0.025em;



  margin-bottom: 18px;



}







.hero-title .text-highlight {



  color: var(--primary);



  position: relative;



  display: inline-block;



}







.hero-description {



  font-size: 1.05rem;



  color: var(--text-secondary);



  line-height: 1.65;



  margin-bottom: 32px;



  max-width: 480px;



}







.hero-cta-group {



  display: flex;



  align-items: center;



  gap: 16px;



  margin-bottom: 36px;



  flex-wrap: wrap;



}







.btn-primary-pill {



  display: inline-flex;



  align-items: center;



  gap: 10px;



  background-color: var(--primary);



  color: #ffffff;



  font-size: 0.95rem;



  font-weight: 700;



  padding: 13px 26px;



  border-radius: var(--radius-full);



  box-shadow: 0 6px 18px rgba(21, 128, 61, 0.3);



  transition: all var(--transition-fast);



}







.btn-primary-pill:hover {



  background-color: var(--accent-cta-hover);



  transform: translateY(-2px);



  box-shadow: 0 10px 24px rgba(21, 128, 61, 0.38);



  color: #ffffff;



}







.btn-video-pill {



  display: inline-flex;



  align-items: center;



  gap: 10px;



  background-color: #ffffff;



  color: var(--primary);



  font-size: 0.95rem;



  font-weight: 700;



  padding: 12px 24px;



  border-radius: var(--radius-full);



  border: 1.5px solid var(--border-green);



  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);



  transition: all var(--transition-fast);



}







.btn-video-pill:hover {



  background-color: var(--primary-mint);



  border-color: var(--primary);



  transform: translateY(-2px);



  box-shadow: 0 6px 16px rgba(21, 128, 61, 0.15);



}







.play-circle {



  width: 28px;



  height: 28px;



  border-radius: 50%;



  background-color: var(--primary);



  color: #ffffff;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 0.75rem;



  padding-left: 2px;



}







/* Dots pagination indicator */



.slider-dots {



  display: flex;



  align-items: center;



  gap: 8px;



}







.dot {



  height: 6px;



  width: 6px;



  border-radius: var(--radius-full);



  background-color: #cbd5e1;



  transition: all var(--transition-smooth);



}







.dot.active {



  width: 24px;



  background-color: var(--primary);



}







/* Multi-layer Organic Green Waves at Bottom */



.hero-bottom-waves {



  position: absolute;



  bottom: -1px;



  left: 0;



  right: 0;



  width: 100%;



  height: 180px;



  pointer-events: none;



  z-index: 3;



}







.hero-bottom-waves svg {



  display: block;



  width: 100%;



  height: 100%;



}







/* ==========================================================================



   FLOATING FEATURE CARDS (4 ROW)



   ========================================================================== */



.features-section {



  position: relative;



  z-index: 10;



  margin-top: -55px;



  margin-bottom: 50px;



}







.features-grid {



  display: grid;



  grid-template-columns: repeat(4, 1fr);



  gap: 20px;



}







.feature-card {



  background: #ffffff;



  border-radius: 24px;



  padding: 22px 24px;



  display: flex;



  align-items: center;



  gap: 16px;



  box-shadow: 0 14px 34px -4px rgba(22, 101, 52, 0.08), 0 4px 12px rgba(0, 0, 0, 0.02);



  border: 1px solid rgba(226, 232, 240, 0.85);



  transition: all var(--transition-smooth);



}







.feature-card:hover {



  transform: translateY(-5px);



  box-shadow: 0 18px 36px -4px rgba(21, 128, 61, 0.18);



  border-color: var(--border-green);



}







.feature-icon-wrapper {



  width: 48px;



  height: 48px;



  border-radius: 50%;



  background: var(--primary-mint);



  display: flex;



  align-items: center;



  justify-content: center;



  color: var(--primary);



  flex-shrink: 0;



  transition: transform var(--transition-fast);



}







.feature-card:hover .feature-icon-wrapper {



  transform: scale(1.1) rotate(5deg);



  background-color: var(--primary);



  color: #ffffff;



}







.feature-title {



  font-size: 0.95rem;



  font-weight: 700;



  color: var(--text-primary);



  line-height: 1.35;



}







/* ==========================================================================



   TENTANG KAMI & VISI MISI (REDESAIN EXACT MATCH TO MOCKUP)



   ========================================================================== */



.about-section {



  padding-top: 50px;



  padding-bottom: 40px;



  position: relative;



  overflow: hidden;



}







/* Framing leaves in top-left */



.about-leaf-top-left {



  position: absolute;



  top: -20px;



  left: -20px;



  pointer-events: none;



  z-index: 1;



}







.about-grid {



  display: grid;



  grid-template-columns: 1.05fr 1fr;



  align-items: center;



  gap: 55px;



  position: relative;



  z-index: 2;



}







/* ==========================================================================



   ABOUT SECTION COMPOSITE PHOTO (EXACT MATCH TO MOCKUP)



   ========================================================================== */



.about-image-composition {



  position: relative;



  width: 100%;



  max-width: 530px;



  height: 385px;



  margin: 0 auto;



}







/* 2. Three Green Sparks / Rays at Top Right of Main Frame */



.about-sparks {



  position: absolute;



  top: -12px;



  right: 86px;



  z-index: 9;



  pointer-events: none;



  filter: drop-shadow(0 2px 6px rgba(34, 197, 94, 0.4));



}







/* 3. Layer 1: Deep Emerald Green Card Backdrop (Angled to the left) */



.about-backdrop-deep {



  position: absolute;



  top: 14px;



  left: -24px;



  width: 86%;



  height: 325px;



  background: linear-gradient(140deg, #15803d 0%, #16a34a 50%, #22c55e 100%);



  border-radius: 48px;



  transform: rotate(-4.2deg);



  z-index: 1;



  pointer-events: none;



  box-shadow: 0 16px 36px -6px rgba(21, 128, 61, 0.32);



}







/* 4. Layer 2: Soft Mint Green Card Backdrop */



.about-backdrop-mint {



  position: absolute;



  top: -8px;



  left: -10px;



  width: 90%;



  height: 335px;



  background: linear-gradient(135deg, rgba(167, 243, 208, 0.95) 0%, rgba(110, 231, 183, 0.9) 100%);



  border-radius: 46px;



  transform: rotate(-1.2deg);



  z-index: 2;



  pointer-events: none;



  box-shadow: 0 10px 25px -4px rgba(16, 185, 129, 0.18);



}







/* 5. Main Building Photo with Thick White Frame */



.about-main-img-wrap {



  position: relative;



  z-index: 3;



  width: 83%;



  height: 315px;



  border-radius: 34px;



  overflow: hidden;



  border: 9px solid #ffffff;



  background: #ffffff;



  transform: rotate(-1.5deg);



  box-shadow: 0 20px 42px -8px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);



  transition: transform 0.4s ease, box-shadow 0.4s ease;



}







.about-main-img-wrap img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  object-position: center 25%;



  display: block;



  transition: transform 0.5s ease;



}







.about-image-composition:hover .about-main-img-wrap img {



  transform: scale(1.03);



}







/* 6. Overlapping Modern Classroom Photo with Thick White Frame */



.about-sub-img-wrap {



  position: absolute;



  z-index: 5;



  bottom: 8px;



  right: -8px;



  width: 53%;



  height: 215px;



  border-radius: 28px;



  overflow: hidden;



  border: 9px solid #ffffff;



  background-color: #ffffff;



  transform: rotate(2.5deg);



  box-shadow: 0 24px 50px -10px rgba(15, 23, 42, 0.32), 0 6px 16px rgba(0, 0, 0, 0.1);



  transition: transform 0.4s ease, box-shadow 0.4s ease;



}







.about-sub-img-wrap img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  object-position: center 40%;



  display: block;



  transition: transform 0.5s ease;



}







.about-image-composition:hover .about-sub-img-wrap img {



  transform: scale(1.03);



}







/* 7. Graduation Cap Circular Crest Badge at Junction */



.about-crest-badge {



  position: absolute;



  bottom: -6px;



  left: 47%;



  transform: translateX(-50%);



  width: 72px;



  height: 72px;



  border-radius: 50%;



  background: radial-gradient(circle at 35% 30%, #4ade80 0%, #16a34a 60%, #15803d 100%);



  border: 5px solid #ffffff;



  color: #ffffff;



  display: flex;



  align-items: center;



  justify-content: center;



  box-shadow: 0 12px 28px rgba(21, 128, 61, 0.48), 0 4px 10px rgba(0, 0, 0, 0.16), inset 0 2px 4px rgba(255, 255, 255, 0.55);



  z-index: 7;



  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);



  overflow: hidden;



}







.crest-badge-gloss {



  position: absolute;



  top: 3px;



  left: 14px;



  right: 14px;



  height: 22px;



  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);



  border-radius: 50% 50% 40% 40%;



  pointer-events: none;



}







.about-image-composition:hover .about-crest-badge {



  transform: translateX(-50%) scale(1.1);



}



/* About Right Content */



.about-content {



  position: relative;



  z-index: 2;



}







.about-watermark-building {



  position: absolute;



  right: -25px;



  top: -15px;



  pointer-events: none;



  z-index: 0;



  opacity: 0.9;



}







.badge-about {



  display: inline-flex;



  align-items: center;



  gap: 7px;



  background: #e2f7ea;



  color: #065f46;



  border: 1px solid #bbf0cd;



  border-radius: var(--radius-full);



  padding: 6px 14px;



  font-size: 0.85rem;



  font-weight: 700;



  margin-bottom: 16px;



  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);



}







.badge-about svg {



  color: #16a34a;



}







.about-title {



  font-size: 2.35rem;



  font-weight: 800;



  color: #064e3b;



  line-height: 1.25;



  margin-bottom: 20px;



  letter-spacing: -0.02em;



}







.about-title-line {



  display: block;



}







.highlight-nusantara {



  position: relative;



  display: inline-block;



  color: #0b4d26;



}







.nusantara-swoosh {



  position: absolute;



  left: 0;



  bottom: -7px;



  width: 104%;



  height: 18px;



  pointer-events: none;



  filter: drop-shadow(0 2px 4px rgba(34, 197, 94, 0.25));



}







.about-desc {



  font-size: 1.02rem;



  color: #475569;



  line-height: 1.7;



  margin-bottom: 28px;



  max-width: 95%;



  position: relative;



  z-index: 1;



}







.btn-tentang-selengkapnya {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  background: linear-gradient(135deg, #15803d, #16a34a);



  color: #ffffff;



  font-size: 0.95rem;



  font-weight: 700;



  padding: 12px 28px;



  border-radius: var(--radius-full);



  box-shadow: 0 6px 18px rgba(21, 128, 61, 0.32);



  transition: all var(--transition-fast);



  border: none;



  cursor: pointer;



  position: relative;



  z-index: 1;



}







.btn-tentang-selengkapnya:hover {



  background: linear-gradient(135deg, #166534, #15803d);



  transform: translateY(-2px);



  box-shadow: 0 10px 24px rgba(21, 128, 61, 0.4);



  color: #ffffff;



}







/* ==========================================================================



   VISI & MISI SECTION (EXACT MATCH TO MOCKUP)



   ========================================================================== */



.visi-misi-section-container {



  margin-top: 55px;



  position: relative;



  z-index: 2;



}







/* Centered Header with Laurel Wreath & Lines */



.visi-misi-divider-header {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 24px;



  margin-bottom: 28px;



}







.vm-divider-line {



  flex: 1;



  max-width: 280px;



  height: 1.8px;



}







.vm-divider-line.left {



  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.3), #22c55e);



}







.vm-divider-line.right {



  background: linear-gradient(90deg, #22c55e, rgba(74, 222, 128, 0.3), transparent);



}







.vm-title-wrap {



  display: flex;



  align-items: center;



  gap: 12px;



  flex-shrink: 0;



}







.vm-wreath-icon {



  display: flex;



  align-items: center;



  justify-content: center;



}







.vm-main-title {



  font-size: 2rem;



  font-weight: 800;



  color: #064e3b;



  letter-spacing: -0.5px;



  margin: 0;



}







/* 2 Side-by-Side White Cards */



.visi-misi-cards-container {



  display: grid;



  grid-template-columns: 1fr 1.25fr;



  gap: 28px;



  align-items: stretch;



}







.vm-card {



  background: #ffffff;



  border-radius: 26px;



  border: 1.5px solid rgba(187, 247, 208, 0.8);



  box-shadow: 0 10px 32px rgba(22, 163, 74, 0.06);



  padding: 32px 34px;



  position: relative;



  overflow: hidden;



  min-height: 255px;



  display: flex;



  flex-direction: column;



  transition: all var(--transition-smooth);



}







.vm-card:hover {



  transform: translateY(-4px);



  box-shadow: 0 16px 38px rgba(22, 163, 74, 0.12);



  border-color: #86efac;



}







.vm-card-header {



  display: flex;



  align-items: center;



  gap: 14px;



  margin-bottom: 18px;



}







.vm-squircle-icon {



  width: 44px;



  height: 44px;



  border-radius: 14px;



  background: #ebfbf0;



  border: 1px solid rgba(134, 239, 172, 0.7);



  display: flex;



  align-items: center;



  justify-content: center;



  flex-shrink: 0;



  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.08);



}







.vm-card-title {



  font-size: 1.35rem;



  font-weight: 800;



  color: #0f172a;



  margin: 0;



}







.vm-card-text {



  font-size: 0.98rem;



  color: #475569;



  line-height: 1.7;



  max-width: 82%;



  position: relative;



  z-index: 2;



}







/* Card Visi Decorative Art */



.vm-visi-bottom-wave {



  position: absolute;



  bottom: 0;



  left: 0;



  pointer-events: none;



  z-index: 1;



}







.vm-visi-bottom-art {



  position: absolute;



  bottom: 0;



  right: 0;



  pointer-events: none;



  z-index: 1;



  filter: drop-shadow(0 4px 8px rgba(21, 128, 61, 0.08));



}







/* Card Misi Decorative Ribbon */



.vm-misi-corner-decor {



  position: absolute;



  top: 0;



  right: 0;



  pointer-events: none;



  z-index: 1;



}







.vm-misi-list {



  list-style: none;



  display: flex;



  flex-direction: column;



  gap: 11px;



  position: relative;



  z-index: 2;



  margin: 0;



  padding: 0;



}







.vm-misi-item {



  display: flex;



  align-items: flex-start;



  gap: 12px;



  font-size: 0.94rem;



  color: #334155;



  line-height: 1.5;



}







.vm-check-circle {



  flex-shrink: 0;



  margin-top: 1px;



  display: flex;



  align-items: center;



  justify-content: center;



}







/* ==========================================================================



   STATISTICS BAR (CAPSULE BAR EXACT MATCH TO MOCKUP)



   ========================================================================== */



.stats-section {



  padding-top: 35px;



  padding-bottom: 50px;



  position: relative;



  overflow: hidden;



}







.stats-corner-leaves {



  position: absolute;



  bottom: -20px;



  right: -15px;



  pointer-events: none;



  z-index: 1;



}







.stats-capsule-bar {



  background: rgba(255, 255, 255, 0.94);



  backdrop-filter: blur(14px);



  -webkit-backdrop-filter: blur(14px);



  border-radius: var(--radius-full);



  border: 1.5px solid rgba(187, 247, 208, 0.95);



  box-shadow: 0 12px 36px rgba(16, 185, 129, 0.08);



  padding: 16px 40px;



  display: flex;



  align-items: center;



  justify-content: space-between;



  position: relative;



  z-index: 2;



  transition: all var(--transition-smooth);



}







.stats-capsule-bar:hover {



  box-shadow: 0 16px 42px rgba(16, 185, 129, 0.12);



  border-color: #86efac;



}







.stat-capsule-item {



  display: flex;



  align-items: center;



  gap: 16px;



  flex: 1;



  justify-content: center;



}







.stat-squircle-icon {



  width: 48px;



  height: 48px;



  border-radius: 16px;



  background: #ebfbf0;



  border: 1px solid rgba(134, 239, 172, 0.7);



  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.08);



  display: flex;



  align-items: center;



  justify-content: center;



  flex-shrink: 0;



  transition: transform var(--transition-fast);



}







.stat-capsule-item:hover .stat-squircle-icon {



  transform: scale(1.08);



}







.stat-v-divider {



  width: 1px;



  height: 38px;



  background: rgba(34, 197, 94, 0.22);



  flex-shrink: 0;



}







.stat-info {



  display: flex;



  flex-direction: column;



}







.stat-number {



  font-size: 1.6rem;



  font-weight: 800;



  color: #0f172a;



  line-height: 1.2;



}







.stat-label {



  font-size: 0.85rem;



  font-weight: 600;



  color: #475569;



}







/* ==========================================================================



   PROGRAM UNGGULAN KAMI (REDESAIN EXACT MATCH TO MOCKUP)



   ========================================================================== */



.programs-section {



  position: relative;



  padding-top: 55px;



  padding-bottom: 60px;



  overflow: hidden;



}







/* Background Decor: Dot Matrix on Left & Watermark on Right */



.program-bg-dots {



  position: absolute;



  top: 70px;



  left: 20px;



  pointer-events: none;



  z-index: 1;



  opacity: 0.85;



}







.program-bg-watermark {



  position: absolute;



  top: 15px;



  right: -20px;



  pointer-events: none;



  z-index: 1;



  opacity: 0.8;



}







/* Section Header (Center Aligned) */



.programs-header-center {



  text-align: center;



  max-width: 960px;



  margin: 0 auto 36px auto;



  position: relative;



  z-index: 2;



}







.prog-badge-wrapper {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 14px;



  margin-bottom: 12px;



}







.prog-badge-line {



  width: 36px;



  height: 1.5px;



  background: #22c55e;



  border-radius: 2px;



}







.badge-prog-top {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  background: #e2f7ea;



  color: #065f46;



  border: 1px solid #bbf0cd;



  border-radius: var(--radius-full);



  padding: 6px 14px;



  font-size: 0.85rem;



  font-weight: 700;



  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);



}







.badge-prog-top svg {



  color: #16a34a;



}







.prog-main-title {



  font-size: 2.45rem;



  font-weight: 800;



  color: #0f172a;



  letter-spacing: -0.025em;



  line-height: 1.2;



  margin-bottom: 14px;



}







.highlight-kami {



  position: relative;



  display: inline-block;



  color: #15803d;



  font-style: normal;



  font-weight: 800;



  padding-right: 4px;



}







.kami-brush-line {



  position: absolute;



  bottom: -9px;



  left: 0;



  width: 100%;



  height: 14px;



  pointer-events: none;



}







.prog-subtitle {



  font-size: 0.98rem;



  color: #475569;



  line-height: 1.65;



  max-width: 680px;



  margin: 0 auto 28px auto;



}







/* Filter Tabs */



.prog-filter-tabs {



  display: flex;



  align-items: center;



  justify-content: center;



  flex-wrap: wrap;



  gap: 12px;



  margin-bottom: 34px;



}







.prog-tab-btn {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  padding: 9px 18px;



  border-radius: var(--radius-full);



  font-size: 0.88rem;



  font-weight: 700;



  background: #ffffff;



  border: 1px solid rgba(203, 213, 225, 0.8);



  color: #334155;



  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);



  cursor: pointer;



  transition: all var(--transition-fast);



}







.prog-tab-btn:hover {



  border-color: #86efac;



  color: #15803d;



  transform: translateY(-1px);



}







.prog-tab-btn.active {



  background: linear-gradient(135deg, #15803d, #16a34a);



  color: #ffffff;



  border-color: #15803d;



  box-shadow: 0 6px 18px rgba(21, 128, 61, 0.28);



}







.prog-tab-btn svg {



  flex-shrink: 0;



  transition: transform var(--transition-fast);



}







.prog-tab-btn:hover svg {



  transform: scale(1.1);



}







/* Carousel Outer with Floating Arrows */



.programs-carousel-outer {



  position: relative;



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 16px;



  width: 100%;



  margin-bottom: 24px;



  z-index: 2;



}







.prog-arrow-btn {



  position: relative;



  flex: 0 0 44px;



  width: 44px;



  height: 44px;



  border-radius: 50%;



  background: #ffffff;



  border: 1.5px solid rgba(226, 232, 240, 0.95);



  color: #15803d;



  display: flex;



  align-items: center;



  justify-content: center;



  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);



  cursor: pointer;



  z-index: 10;



  transition: all var(--transition-fast);



}







.prog-arrow-btn:hover {



  background: #15803d;



  border-color: #15803d;



  color: #ffffff;



  transform: scale(1.08);



  box-shadow: 0 8px 22px rgba(21, 128, 61, 0.3);



}







.prog-arrow-btn:active {



  transform: scale(0.96);



}







.prog-arrow-btn.prog-prev,



.prog-arrow-btn.prog-next {



  position: relative;



  left: auto;



  right: auto;



  top: auto;



  transform: none;



}







.prog-arrow-btn.prog-prev:hover,



.prog-arrow-btn.prog-next:hover {



  transform: scale(1.08);



}







.prog-arrow-btn.prog-prev:active,



.prog-arrow-btn.prog-next:active {



  transform: scale(0.96);



}







.programs-slider-viewport {



  container-type: inline-size;



  container-name: progslider;



  flex: 1 1 0;



  min-width: 0;



  overflow-x: auto;



  overflow-y: hidden;



  scroll-behavior: smooth;



  scroll-snap-type: x mandatory;



  -webkit-overflow-scrolling: touch;



  scrollbar-width: none;



  padding: 10px 4px 26px 4px;



}







.programs-slider-viewport::-webkit-scrollbar {



  display: none;



}







.programs-cards-track {



  display: flex;



  gap: 24px;



  width: max-content;



  transition: all 0.35s ease;



}







/* 3 Cards per view on desktop */



.prog-card-rich {



  width: 345px;



  flex: 0 0 345px;



  width: calc((100cqw - 48px) / 3);



  flex: 0 0 calc((100cqw - 48px) / 3);



  scroll-snap-align: start;



}







@container progslider (max-width: 960px) {



  .programs-cards-track {



    gap: 20px;



  }



  .prog-card-rich {



    width: calc((100cqw - 20px) / 2);



    flex: 0 0 calc((100cqw - 20px) / 2);



  }



}







@container progslider (max-width: 580px) {



  .programs-cards-track {



    gap: 16px;



  }



  .prog-card-rich {



    width: min(320px, calc(100cqw - 36px));



    flex: 0 0 min(320px, calc(100cqw - 36px));



    scroll-snap-align: center;



  }



}







/* Rich Program Card */



.prog-card-rich {



  background: #ffffff;



  border-radius: 26px;



  border: 1.5px solid rgba(187, 247, 208, 0.75);



  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.07);



  overflow: hidden;



  display: flex;



  flex-direction: column;



  transition: all var(--transition-smooth);



}







.prog-card-rich:hover {



  transform: translateY(-6px);



  box-shadow: 0 18px 40px rgba(21, 128, 61, 0.16);



  border-color: #86efac;



}







/* Card Visual Box with Wave Mask */



.prog-card-visual {



  position: relative;



  width: 100%;



  height: 205px;



  overflow: hidden;



  background-color: #f1f5f9;



}







.prog-card-visual img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform var(--transition-smooth);



}







.prog-card-rich:hover .prog-card-visual img {



  transform: scale(1.06);



}







.prog-visual-tag {



  position: absolute;



  top: 14px;



  left: 14px;



  z-index: 3;



  display: inline-flex;



  align-items: center;



  gap: 6px;



  background: rgba(255, 255, 255, 0.94);



  backdrop-filter: blur(8px);



  -webkit-backdrop-filter: blur(8px);



  border: 1px solid rgba(187, 247, 208, 0.85);



  border-radius: var(--radius-full);



  padding: 5px 12px;



  font-size: 0.78rem;



  font-weight: 700;



  color: #15803d;



  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);



}







.prog-wave-mask {



  position: absolute;



  bottom: -1px;



  left: 0;



  right: 0;



  width: 100%;



  height: 34px;



  pointer-events: none;



  z-index: 2;



}







.prog-wave-mask svg {



  width: 100%;



  height: 100%;



  display: block;



}







/* Card Body */



.prog-card-body {



  padding: 20px 22px 24px 22px;



  display: flex;



  flex-direction: column;



  flex: 1;



}







.prog-title-row {



  display: flex;



  align-items: center;



  gap: 12px;



  margin-bottom: 12px;



}







.prog-squircle-icon {



  width: 44px;



  height: 44px;



  border-radius: 14px;



  background: #ebfbf0;



  border: 1px solid rgba(134, 239, 172, 0.65);



  display: flex;



  align-items: center;



  justify-content: center;



  flex-shrink: 0;



  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.08);



}







.prog-card-title {



  font-size: 1.25rem;



  font-weight: 800;



  color: #0f172a;



  margin: 0;



}







.prog-card-desc {



  font-size: 0.88rem;



  color: #475569;



  line-height: 1.6;



  margin-bottom: 16px;



  min-height: 46px;



}







.prog-check-list {



  list-style: none;



  padding: 0;



  margin: 0 0 18px 0;



  display: flex;



  flex-direction: column;



  gap: 8px;



}







.prog-check-list li {



  display: flex;



  align-items: center;



  gap: 9px;



  font-size: 0.84rem;



  color: #334155;



  font-weight: 500;



}







.prog-check-list li svg {



  flex-shrink: 0;



}







/* Mini Metrics Pill */



.prog-mini-metrics {



  background: #f0fdf4;



  border-radius: 14px;



  border: 1px solid #dcfce7;



  padding: 10px 14px;



  display: flex;



  align-items: center;



  justify-content: space-between;



  margin-bottom: 20px;



  margin-top: auto;



}







.prog-metric-item {



  display: flex;



  align-items: center;



  gap: 9px;



  flex: 1;



  justify-content: center;



}







.prog-metric-divider {



  width: 1px;



  height: 26px;



  background: rgba(34, 197, 94, 0.25);



  flex-shrink: 0;



}







.prog-metric-text {



  display: flex;



  flex-direction: column;



}







.prog-metric-num {



  font-size: 1.05rem;



  font-weight: 800;



  color: #0f172a;



  line-height: 1.15;



}







.prog-metric-lbl {



  font-size: 0.72rem;



  font-weight: 600;



  color: #64748b;



}







/* Detail Button */



.prog-detail-btn {



  width: 100%;



  background: linear-gradient(135deg, #15803d, #16a34a);



  color: #ffffff;



  border: none;



  border-radius: var(--radius-full);



  padding: 10px 18px;



  font-size: 0.88rem;



  font-weight: 700;



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 8px;



  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.25);



  cursor: pointer;



  transition: all var(--transition-fast);



}







.prog-detail-btn:hover {



  background: linear-gradient(135deg, #166534, #15803d);



  transform: translateY(-2px);



  box-shadow: 0 6px 18px rgba(21, 128, 61, 0.35);



}







/* Pagination Dots */



.programs-pagination-dots {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 8px;



  margin-bottom: 38px;



  z-index: 2;



  position: relative;



}







.prog-dot-btn {



  width: 8px;



  height: 8px;



  border-radius: 50%;



  background: #cbd5e1;



  border: none;



  cursor: pointer;



  transition: all var(--transition-fast);



  padding: 0;



}







.prog-dot-btn.active {



  width: 26px;



  border-radius: var(--radius-full);



  background: #15803d;



}







/* Bottom Features Capsule Bar */



.prog-features-capsule-bar {



  background: rgba(255, 255, 255, 0.94);



  backdrop-filter: blur(14px);



  -webkit-backdrop-filter: blur(14px);



  border-radius: var(--radius-full);



  border: 1.5px solid rgba(187, 247, 208, 0.95);



  box-shadow: 0 12px 36px rgba(16, 185, 129, 0.08);



  padding: 18px 40px;



  display: flex;



  align-items: center;



  justify-content: space-between;



  position: relative;



  z-index: 2;



  transition: all var(--transition-smooth);



}







.prog-features-capsule-bar:hover {



  box-shadow: 0 16px 42px rgba(16, 185, 129, 0.12);



  border-color: #86efac;



}







.prog-feature-col {



  display: flex;



  align-items: center;



  gap: 14px;



  flex: 1;



  justify-content: center;



}







.prog-feature-icon {



  width: 44px;



  height: 44px;



  border-radius: 50%;



  background: #ebfbf0;



  border: 1px solid rgba(134, 239, 172, 0.7);



  display: flex;



  align-items: center;



  justify-content: center;



  flex-shrink: 0;



  color: #15803d;



  box-shadow: 0 3px 10px rgba(34, 197, 94, 0.08);



  transition: transform var(--transition-fast);



}







.prog-feature-col:hover .prog-feature-icon {



  transform: scale(1.08);



}







.prog-feat-divider {



  width: 1px;



  height: 34px;



  background: rgba(34, 197, 94, 0.22);



  flex-shrink: 0;



}







.prog-feature-title {



  font-size: 0.94rem;



  font-weight: 800;



  color: #0f172a;



  margin: 0 0 2px 0;



}







.prog-feature-subtitle {



  font-size: 0.78rem;



  color: #64748b;



  margin: 0;



}







/* ==========================================================================



   CERITA ALUMNI KAMI (ALUMNI INSPIRATIF CAROUSEL MATCHING MOCKUP)



   ========================================================================== */



.alumni-section {



  position: relative;



  padding-top: 60px;



  padding-bottom: 70px;



  overflow: hidden;



  background: radial-gradient(circle at 85% 15%, rgba(220, 252, 231, 0.45) 0%, rgba(255, 255, 255, 0) 65%);



}







.alumni-bg-watermark {



  position: absolute;



  top: 10px;



  right: 0;



  width: 380px;



  height: 220px;



  background-image: url('../images/hero-building.webp');



  background-size: cover;



  background-position: top center;



  opacity: 0.12;



  mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 90%);



  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 90%);



  pointer-events: none;



  z-index: 1;



}







.alumni-header-center {



  text-align: center;



  max-width: 720px;



  margin: 0 auto 36px auto;



  position: relative;



  z-index: 2;



}







.badge-alumni {



  background: #dcfce7;



  color: #15803d;



  font-weight: 700;



  display: inline-flex;



  align-items: center;



  gap: 8px;



  padding: 6px 16px;



  border-radius: var(--radius-full);



  margin-bottom: 12px;



  border: 1px solid rgba(187, 247, 208, 0.9);



}







.alumni-title {



  font-size: 2.35rem;



  font-weight: 800;



  color: #0f172a;



  letter-spacing: -0.025em;



  line-height: 1.2;



}







.highlight-alumni {



  position: relative;



  display: inline-block;



  color: #0f172a;



}







.alumni-brush-line {



  position: absolute;



  bottom: -9px;



  left: 0;



  width: 100%;



  height: 14px;



  pointer-events: none;



}







.alumni-subtitle {



  font-size: 0.98rem;



  color: #64748b;



  line-height: 1.6;



  margin-top: 10px;



}







/* Alumni Showcase Wrapper */



.alumni-showcase-wrapper {



  position: relative;



  max-width: 1140px;



  margin: 0 auto;



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 16px;



  z-index: 2;



}







.alumni-cards-row {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 24px;



  width: 100%;



}







/* Side Compact Cards (Rafi & Salsa) */



.alumni-card-side {



  width: 220px;



  background: #ffffff;



  border-radius: 26px;



  padding: 14px;



  box-shadow: 0 10px 25px -4px rgba(22, 101, 52, 0.06);



  border: 1px solid rgba(226, 232, 240, 0.85);



  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);



  cursor: pointer;



  flex-shrink: 0;



  position: relative;



  overflow: hidden;



}







.alumni-card-side::after {



  content: '';



  position: absolute;



  bottom: 0;



  right: 0;



  width: 60px;



  height: 30px;



  background: radial-gradient(circle at bottom right, #dcfce7 0%, transparent 70%);



  pointer-events: none;



}







.alumni-card-side:hover {



  transform: translateY(-5px);



  box-shadow: 0 16px 34px -4px rgba(22, 101, 52, 0.14);



  border-color: var(--border-green);



}







.alumni-side-photo {



  width: 100%;



  height: 175px;



  border-radius: 20px;



  overflow: hidden;



  background: #f1f5f9;



}







.alumni-side-photo img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform var(--transition-smooth);



}







.alumni-card-side:hover .alumni-side-photo img {



  transform: scale(1.06);



}







.alumni-side-footer {



  padding: 12px 4px 4px 4px;



}







.alumni-side-name {



  font-size: 1.05rem;



  font-weight: 800;



  color: #0f172a;



  margin-bottom: 6px;



}







.alumni-prof-tag {



  display: flex;



  align-items: center;



  gap: 8px;



  font-size: 0.85rem;



  font-weight: 700;



  color: #15803d;



}







.alumni-prof-icon {



  width: 28px;



  height: 28px;



  border-radius: 50%;



  background: #f0fdf4;



  color: #15803d;



  display: flex;



  align-items: center;



  justify-content: center;



  border: 1px solid rgba(187, 247, 208, 0.8);



  flex-shrink: 0;



}







/* Center Featured Card (Nadia Putri) */



.alumni-card-featured {



  width: 580px;



  background: #ffffff;



  border-radius: 30px;



  box-shadow: 0 20px 48px -8px rgba(22, 101, 52, 0.14), 0 6px 16px rgba(0, 0, 0, 0.03);



  border: 1px solid rgba(226, 232, 240, 0.85);



  display: grid;



  grid-template-columns: 240px 1fr;



  overflow: hidden;



  z-index: 5;



  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);



  position: relative;



}







.alumni-card-featured::after {



  content: '';



  position: absolute;



  bottom: 0;



  right: 0;



  width: 110px;



  height: 55px;



  background: radial-gradient(circle at bottom right, #bbf7d0 0%, transparent 75%);



  pointer-events: none;



}







.alumni-feat-visual {



  position: relative;



  width: 100%;



  height: 100%;



  min-height: 290px;



  overflow: hidden;



  background: #f1f5f9;



}







.alumni-feat-visual img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: opacity 0.35s ease, transform var(--transition-smooth);



}







.alumni-card-featured:hover .alumni-feat-visual img {



  transform: scale(1.05);



}







.alumni-feat-wave-overlay {



  position: absolute;



  bottom: 0;



  left: 0;



  width: 110px;



  height: 85px;



  pointer-events: none;



  z-index: 2;



}







.alumni-feat-wave-overlay svg {



  width: 100%;



  height: 100%;



}







.alumni-wreath-emblem {



  position: absolute;



  bottom: 12px;



  left: 14px;



  width: 44px;



  height: 44px;



  border-radius: 50%;



  background: #15803d;



  display: flex;



  align-items: center;



  justify-content: center;



  color: #ffffff;



  box-shadow: 0 6px 16px rgba(21, 128, 61, 0.35);



  border: 2px solid #ffffff;



}







/* Featured Card Content */



.alumni-feat-content {



  padding: 24px 26px 24px 20px;



  display: flex;



  flex-direction: column;



  justify-content: center;



}







.alumni-feat-header {



  display: flex;



  align-items: center;



  justify-content: space-between;



  margin-bottom: 8px;



}







.alumni-feat-name {



  font-size: 1.45rem;



  font-weight: 800;



  color: #0f172a;



}







.alumni-year-pill {



  background: #dcfce7;



  color: #15803d;



  font-size: 0.78rem;



  font-weight: 700;



  padding: 4px 12px;



  border-radius: 9999px;



  display: flex;



  align-items: center;



  gap: 6px;



  border: 1px solid rgba(187, 247, 208, 0.8);



}







.alumni-feat-role {



  display: flex;



  align-items: center;



  gap: 10px;



  margin-bottom: 14px;



}







.alumni-role-icon {



  width: 32px;



  height: 32px;



  border-radius: 50%;



  background: #f0fdf4;



  color: #15803d;



  display: flex;



  align-items: center;



  justify-content: center;



  border: 1px solid rgba(187, 247, 208, 0.7);



  flex-shrink: 0;



}







.alumni-role-title {



  font-size: 1.05rem;



  font-weight: 800;



  color: #0f172a;



}







.alumni-feat-divider {



  height: 1px;



  background: rgba(226, 232, 240, 0.8);



  margin-bottom: 14px;



  width: 100%;



}







.alumni-quote-box {



  position: relative;



  display: flex;



  gap: 8px;



}







.alumni-quote-mark {



  color: #15803d;



  font-size: 1.8rem;



  line-height: 1;



  font-weight: 800;



  font-family: Georgia, serif;



  flex-shrink: 0;



  margin-top: -2px;



}







.alumni-quote-text {



  font-size: 0.88rem;



  color: #475569;



  font-style: italic;



  line-height: 1.6;



}







/* Navigation Buttons */



.alumni-nav-btn {



  width: 44px;



  height: 44px;



  border-radius: 50%;



  background: #ffffff;



  border: 1px solid rgba(226, 232, 240, 0.9);



  color: #15803d;



  display: flex;



  align-items: center;



  justify-content: center;



  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);



  cursor: pointer;



  transition: all var(--transition-fast);



  z-index: 10;



  flex-shrink: 0;



}







.alumni-nav-btn:hover {



  background: #15803d;



  border-color: #15803d;



  color: #ffffff;



  transform: scale(1.08);



  box-shadow: 0 8px 18px rgba(21, 128, 61, 0.28);



}







/* Dots bar */



.alumni-dots-bar {



  display: flex;



  justify-content: center;



  align-items: center;



  gap: 8px;



  margin-top: 28px;



  position: relative;



  z-index: 2;



}







.alumni-dot {



  width: 8px;



  height: 8px;



  border-radius: 50%;



  background: #bbf7d0;



  cursor: pointer;



  transition: all 0.3s ease;



}







.alumni-dot.active {



  width: 24px;



  border-radius: 9999px;



  background: #15803d;



}







/* ==========================================================================



   DUAL SECTION: GALERI KEGIATAN & BERITA TERBARU



   ========================================================================== */



.split-content-section {



  padding-top: 30px;



  padding-bottom: 50px;



}







.split-grid {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 36px;



}







/* Left: Galeri Kegiatan */



.gallery-column {



  display: flex;



  flex-direction: column;



}







.column-header {



  display: flex;



  align-items: center;



  justify-content: space-between;



  margin-bottom: 18px;



}







.column-title {



  font-size: 1.55rem;



  font-weight: 800;



  color: var(--text-primary);



}







.gallery-carousel-card {



  position: relative;



  border-radius: var(--radius-xl);



  overflow: hidden;



  box-shadow: var(--shadow-card);



  border: 1px solid rgba(226, 232, 240, 0.8);



  background: #ffffff;



}







.gallery-slides-wrapper {



  position: relative;



  width: 100%;



  height: 250px;



  overflow: hidden;



}







.gallery-slide {



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  opacity: 0;



  visibility: hidden;



  transition: opacity 0.45s ease, transform 0.45s ease;



  transform: scale(1.02);



}







.gallery-slide.active {



  opacity: 1;



  visibility: visible;



  transform: scale(1);



}







.gallery-slide img {



  width: 100%;



  height: 100%;



  object-fit: cover;



}







/* Carousel Overlay Navigation */



.gallery-nav-prev,



.gallery-nav-next {



  position: absolute;



  top: 50%;



  transform: translateY(-50%);



  width: 36px;



  height: 36px;



  border-radius: 50%;



  background: rgba(255, 255, 255, 0.85);



  backdrop-filter: blur(6px);



  color: var(--text-primary);



  display: flex;



  align-items: center;



  justify-content: center;



  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);



  z-index: 5;



  transition: all var(--transition-fast);



}







.gallery-nav-prev { left: 14px; }



.gallery-nav-next { right: 14px; }







.gallery-nav-prev:hover,



.gallery-nav-next:hover {



  background: #ffffff;



  color: var(--primary);



  transform: translateY(-50%) scale(1.08);



}







/* Dots below carousel */



.gallery-dots-bar {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 6px;



  margin-top: 14px;



}







/* Right: Berita Terbaru */



.news-column {



  display: flex;



  flex-direction: column;



}







.view-all-link {



  font-size: 0.85rem;



  font-weight: 700;



  color: var(--primary);



  display: inline-flex;



  align-items: center;



  gap: 4px;



}







.view-all-link:hover {



  color: var(--accent-cta-hover);



  text-decoration: underline;



}







.news-list {



  display: flex;



  flex-direction: column;



  gap: 16px;



}







.news-card-item {



  display: flex;



  align-items: center;



  gap: 16px;



  background: #ffffff;



  border-radius: var(--radius-lg);



  padding: 14px 18px;



  box-shadow: var(--shadow-sm);



  border: 1px solid rgba(226, 232, 240, 0.8);



  transition: all var(--transition-smooth);



  cursor: pointer;



}







.news-card-item:hover {



  transform: translateX(4px);



  box-shadow: var(--shadow-md);



  border-color: var(--border-green);



}







.news-thumb-box {



  width: 95px;



  height: 72px;



  border-radius: var(--radius-md);



  overflow: hidden;



  flex-shrink: 0;



  background-color: #f1f5f9;



}







.news-thumb-box img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform var(--transition-smooth);



}







.news-card-item:hover .news-thumb-box img {



  transform: scale(1.08);



}







.news-item-content {



  flex-grow: 1;



}







.news-item-title {



  font-size: 0.95rem;



  font-weight: 700;



  color: var(--text-primary);



  line-height: 1.35;



  margin-bottom: 6px;



  transition: color var(--transition-fast);



}







.news-card-item:hover .news-item-title {



  color: var(--primary);



}







.news-item-date {



  font-size: 0.78rem;



  color: var(--text-muted);



  display: flex;



  align-items: center;



  gap: 6px;



  font-weight: 500;



}







.news-item-arrow {



  color: #94a3b8;



  flex-shrink: 0;



  transition: all var(--transition-fast);



}







.news-card-item:hover .news-item-arrow {



  color: var(--primary);



  transform: translateX(3px);



}







/* ==========================================================================



   CALL TO ACTION (CTA) BANNER



   ========================================================================== */



.cta-section {



  padding-top: 30px;



  padding-bottom: 50px;



}







.cta-banner-wrapper {



  position: relative;



  background: linear-gradient(135deg, #15803d 0%, #166534 60%, #14532d 100%);



  border-radius: 28px;



  padding: 42px 48px;



  color: #ffffff;



  overflow: hidden;



  box-shadow: 0 16px 36px -6px rgba(21, 128, 61, 0.32);



  display: flex;



  align-items: center;



  justify-content: space-between;



}







.cta-banner-bg-watermark {



  position: absolute;



  top: 0;



  right: 0;



  bottom: 0;



  width: 50%;



  background-image: url('../images/hero-building.webp');



  background-size: cover;



  background-position: center;



  opacity: 0.12;



  mix-blend-mode: overlay;



  pointer-events: none;



}







.cta-banner-content {



  position: relative;



  z-index: 2;



  max-width: 580px;



}







.cta-heading {



  font-size: 1.95rem;



  font-weight: 800;



  line-height: 1.25;



  margin-bottom: 10px;



  letter-spacing: -0.02em;



}







.cta-subtext {



  font-size: 0.98rem;



  opacity: 0.9;



  line-height: 1.6;



}







.cta-btn-white {



  position: relative;



  z-index: 2;



  display: inline-flex;



  align-items: center;



  gap: 10px;



  background: #ffffff;



  color: var(--primary);



  font-size: 0.95rem;



  font-weight: 700;



  padding: 14px 28px;



  border-radius: var(--radius-full);



  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);



  flex-shrink: 0;



  transition: all var(--transition-fast);



}







.cta-btn-white:hover {



  background: #f0fdf4;



  color: var(--primary-dark);



  transform: translateY(-2px);



  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);



}







.cta-btn-white svg {



  transition: transform var(--transition-fast);



}







.cta-btn-white:hover svg {



  transform: translateX(4px);



}







/* ==========================================================================



   HUBUNGI KAMI (CONTACT SECTION MATCHING MOCKUP)



   ========================================================================== */



.contact-section {



  position: relative;



  overflow: hidden;



  padding: 80px 0 0;



  background: #ffffff;



  background: radial-gradient(ellipse 90% 45% at 50% 0%, rgba(220, 252, 231, 0.45) 0%, rgba(240, 253, 244, 0.15) 60%, transparent 100%);



}







.contact-bg-watermark {



  position: absolute;



  top: 0;



  right: 0;



  width: 440px;



  height: 280px;



  background: url('../images/hero-building.webp') no-repeat right top;



  background-size: cover;



  opacity: 0.16;



  mask-image: radial-gradient(circle at 85% 15%, black 25%, transparent 75%);



  -webkit-mask-image: radial-gradient(circle at 85% 15%, black 25%, transparent 75%);



  pointer-events: none;



  z-index: 1;



}







.leaf-decor {



  position: absolute;



  pointer-events: none;



  z-index: 2;



  opacity: 0.85;



}







.leaf-top-left {



  top: 0;



  left: 0;



}







.leaf-top-right {



  top: 0;



  right: 0;



}







.contact-header-center {



  text-align: center;



  margin-bottom: 40px;



  position: relative;



  z-index: 3;



}







.badge-contact {



  background: #dcfce7;



  color: #15803d;



  font-weight: 700;



  font-size: 0.85rem;



  padding: 6px 18px;



  border-radius: var(--radius-full);



  display: inline-flex;



  margin-bottom: 14px;



}







.contact-title .highlight-kami {



  color: #0f172a;



}







.contact-title {



  font-size: 2.25rem;



  font-weight: 800;



  color: #0f172a;



  letter-spacing: -0.025em;



  margin-bottom: 12px;



}







.contact-subtitle {



  font-size: 0.95rem;



  color: #64748b;



  line-height: 1.6;



  max-width: 680px;



  margin: 0 auto;



}







/* 2-Column Main Content Grid */



.contact-main-grid {



  display: grid;



  grid-template-columns: 1.15fr 1fr;



  gap: 24px;



  align-items: stretch;



  position: relative;



  z-index: 3;



  margin-bottom: 35px;



}







/* Left Contact Form Card */



.contact-form-card {



  background: #ffffff;



  border-radius: 26px;



  border: 1px solid rgba(22, 163, 74, 0.12);



  box-shadow: 0 12px 35px -8px rgba(16, 185, 129, 0.08), 0 4px 14px rgba(0, 0, 0, 0.03);



  display: grid;



  grid-template-columns: 210px 1fr;



  overflow: hidden;



}







.contact-card-visual {



  position: relative;



  height: 100%;



  overflow: hidden;



  background: #f1f5f9;



}







.contact-card-visual img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  object-position: center;



  display: block;



}







.contact-visual-wave {



  position: absolute;



  bottom: 0;



  left: 0;



  right: 0;



  height: 110px;



  pointer-events: none;



}







.contact-visual-wave svg {



  width: 100%;



  height: 100%;



  display: block;



}







.contact-wreath-emblem {



  position: absolute;



  bottom: 16px;



  left: 16px;



  width: 44px;



  height: 44px;



  border-radius: 50%;



  background: #15803d;



  border: 2px solid #86efac;



  display: flex;



  align-items: center;



  justify-content: center;



  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);



}







.contact-card-body {



  padding: 28px 26px;



  display: flex;



  flex-direction: column;



  justify-content: center;



}







.contact-form-title {



  font-size: 1.25rem;



  font-weight: 800;



  color: #0f172a;



  margin-bottom: 4px;



}







.contact-form-desc {



  font-size: 0.84rem;



  color: #64748b;



  margin-bottom: 18px;



  line-height: 1.45;



}







.contact-form-inner {



  display: flex;



  flex-direction: column;



  gap: 12px;



}







.form-row-dual {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 12px;



}







.input-icon-group {



  position: relative;



  width: 100%;



}







.input-icon-prefix {



  position: absolute;



  left: 14px;



  top: 50%;



  transform: translateY(-50%);



  color: #16a34a;



  display: flex;



  align-items: center;



  justify-content: center;



  pointer-events: none;



  z-index: 2;



}







.textarea-prefix {



  top: 18px;



  transform: none;



}







.contact-input-field {



  width: 100%;



  height: 44px;



  background: #ffffff;



  border: 1.5px solid #e2e8f0;



  border-radius: 12px;



  padding: 0 14px 0 42px;



  font-family: inherit;



  font-size: 0.88rem;



  color: #0f172a;



  transition: all 0.25s ease;



}







.contact-input-field:focus {



  border-color: #22c55e;



  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);



  outline: none;



}







.contact-input-field::placeholder {



  color: #94a3b8;



}







.select-field {



  appearance: none;



  cursor: pointer;



  padding-right: 34px;



}







.select-chevron-suffix {



  position: absolute;



  right: 14px;



  top: 50%;



  transform: translateY(-50%);



  color: #64748b;



  pointer-events: none;



  display: flex;



  align-items: center;



}







textarea.contact-input-field {



  height: 78px;



  padding: 12px 14px 12px 42px;



  resize: none;



}







.contact-submit-btn {



  width: 100%;



  height: 44px;



  background: linear-gradient(135deg, #15803d, #166534);



  color: #ffffff;



  border: none;



  border-radius: var(--radius-full);



  font-family: inherit;



  font-size: 0.94rem;



  font-weight: 700;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 8px;



  cursor: pointer;



  transition: all 0.25s ease;



  box-shadow: 0 6px 16px rgba(21, 128, 61, 0.25);



  margin-top: 4px;



}







.contact-submit-btn:hover {



  background: linear-gradient(135deg, #16a34a, #15803d);



  transform: translateY(-2px);



  box-shadow: 0 8px 20px rgba(21, 128, 61, 0.35);



}







/* Right Side Container */



.contact-info-side {



  display: flex;



  flex-direction: column;



  gap: 16px;



  justify-content: space-between;



}







.contact-cards-2x2 {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 14px;



}







.info-pill-card {



  background: #ffffff;



  border-radius: 18px;



  border: 1px solid rgba(22, 163, 74, 0.1);



  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);



  padding: 14px 16px;



  display: flex;



  align-items: center;



  gap: 12px;



  text-decoration: none;



  color: inherit;



  transition: all 0.25s ease;



}







.info-pill-card:hover {



  transform: translateY(-2px);



  box-shadow: 0 10px 25px rgba(22, 163, 74, 0.1);



  border-color: #86efac;



}







.info-pill-icon {



  width: 40px;



  height: 40px;



  border-radius: 50%;



  background: #f0fdf4;



  border: 1px solid #bbf7d0;



  color: #16a34a;



  display: flex;



  align-items: center;



  justify-content: center;



  flex-shrink: 0;



}







.info-pill-text {



  display: flex;



  flex-direction: column;



  gap: 2px;



  overflow: hidden;



}







.info-pill-label {



  font-size: 0.88rem;



  font-weight: 800;



  color: #0f172a;



}







.info-pill-val {



  font-size: 0.8rem;



  font-weight: 500;



  color: #475569;



  white-space: nowrap;



  overflow: hidden;



  text-overflow: ellipsis;



}







/* Lokasi Kami Map Card */



.contact-map-card {



  background: #ffffff;



  border-radius: 22px;



  border: 1px solid rgba(22, 163, 74, 0.1);



  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);



  display: grid;



  grid-template-columns: 1.15fr 1fr;



  overflow: hidden;



  align-items: stretch;



}







.map-vector-box {



  position: relative;



  height: 100%;



  min-height: 145px;



  background: #f8fafc;



  overflow: hidden;



  border-right: 1px solid #f1f5f9;



}







.map-vector-svg {



  width: 100%;



  height: 100%;



  display: block;



}







.map-card-info {



  padding: 18px 20px;



  display: flex;



  flex-direction: column;



  justify-content: center;



  gap: 6px;



}







.map-card-header {



  display: flex;



  align-items: center;



  gap: 6px;



}







.map-card-title {



  font-size: 0.98rem;



  font-weight: 800;



  color: #0f172a;



  margin: 0;



}







.map-card-address {



  font-size: 0.8rem;



  color: #475569;



  line-height: 1.45;



  margin: 0;



}







.map-link-btn {



  align-self: flex-start;



  margin-top: 4px;



  display: inline-flex;



  align-items: center;



  gap: 6px;



  background: #dcfce7;



  color: #15803d;



  font-size: 0.82rem;



  font-weight: 700;



  padding: 6px 16px;



  border-radius: var(--radius-full);



  text-decoration: none;



  transition: all 0.25s ease;



}







.map-link-btn:hover {



  background: #bbf7d0;



  color: #166534;



  transform: translateY(-1px);



}







/* Floating CTA Capsule Banner */



.floating-help-capsule {



  margin: 45px auto 20px;



  max-width: 820px;



  background: rgba(236, 253, 243, 0.92);



  backdrop-filter: blur(12px);



  -webkit-backdrop-filter: blur(12px);



  border: 1.5px solid #86efac;



  border-radius: var(--radius-full);



  padding: 8px 10px 8px 20px;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 16px;



  box-shadow: 0 10px 30px rgba(22, 163, 74, 0.08);



  position: relative;



  z-index: 3;



}







.help-capsule-left {



  display: flex;



  align-items: center;



  gap: 14px;



}







.help-avatar-icon {



  width: 36px;



  height: 36px;



  border-radius: 50%;



  background: #ffffff;



  border: 1px solid #bbf7d0;



  color: #16a34a;



  display: flex;



  align-items: center;



  justify-content: center;



  flex-shrink: 0;



}







.help-capsule-divider {



  color: #86efac;



  font-weight: 300;



  font-size: 1.1rem;



}







.help-capsule-text {



  font-size: 0.92rem;



  color: #334155;



}







.help-capsule-text strong {



  color: #0f172a;



  font-weight: 800;



}







.help-capsule-btn {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  background: linear-gradient(135deg, #15803d, #166534);



  color: #ffffff;



  font-size: 0.88rem;



  font-weight: 700;



  padding: 10px 22px;



  border-radius: var(--radius-full);



  text-decoration: none;



  flex-shrink: 0;



  transition: all 0.25s ease;



  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.25);



}







.help-capsule-btn:hover {



  background: linear-gradient(135deg, #16a34a, #15803d);



  transform: translateX(2px);



}







/* Organic Bottom Wave Transition to Footer */



.contact-bottom-wave-wrap {



  width: 100%;



  height: 75px;



  line-height: 0;



  margin-top: 15px;



  position: relative;



  z-index: 2;



}







.contact-bottom-wave {



  width: 100%;



  height: 100%;



  display: block;



}







/* ==========================================================================



   FOOTER (SMA CENDEKIA MATCHING MOCKUP)



   ========================================================================== */



.footer-cendekia {



  background: linear-gradient(180deg, #0b4d26 0%, #06381b 100%);



  color: #e2e8f0;



  position: relative;



  padding: 60px 0 28px;



  overflow: hidden;



}







.footer-leaf-left {



  position: absolute;



  bottom: 0;



  left: 0;



  pointer-events: none;



  opacity: 0.85;



  z-index: 1;



}







.footer-leaf-right {



  position: absolute;



  bottom: 0;



  right: 0;



  pointer-events: none;



  opacity: 0.85;



  z-index: 1;



}







.footer-cendekia-grid {



  display: grid;



  grid-template-columns: 1.4fr 1.6fr 1.5fr 1fr;



  gap: 32px;



  align-items: start;



  margin-bottom: 40px;



  position: relative;



  z-index: 2;



}







.f-brand-logo {



  display: flex;



  align-items: center;



  gap: 14px;



}







.f-wreath-logo {



  flex-shrink: 0;



}







.f-brand-name {



  font-size: 1.35rem;



  font-weight: 800;



  color: #ffffff;



  margin: 0;



  letter-spacing: -0.01em;



}







.f-brand-tagline {



  font-size: 0.82rem;



  font-weight: 600;



  color: #86efac;



  display: block;



  margin-top: 2px;



}







.f-section-title {



  font-size: 0.95rem;



  font-weight: 800;



  color: #ffffff;



  margin-bottom: 16px;



  letter-spacing: 0.02em;



}







.f-nav-matrix {



  display: grid;



  grid-template-columns: repeat(4, 1fr);



  gap: 10px 14px;



}







.f-nav-matrix a {



  color: #cbd5e1;



  font-size: 0.84rem;



  text-decoration: none;



  transition: color 0.2s ease;



}







.f-nav-matrix a:hover {



  color: #86efac;



}







.f-contact-items {



  list-style: none;



  padding: 0;



  margin: 0;



  display: flex;



  flex-direction: column;



  gap: 12px;



}







.f-contact-items li {



  display: flex;



  align-items: flex-start;



  gap: 10px;



  font-size: 0.84rem;



  color: #cbd5e1;



}







.f-contact-items svg {



  color: #86efac;



  flex-shrink: 0;



  margin-top: 2px;



}







.f-contact-items a {



  color: #cbd5e1;



  text-decoration: none;



  transition: color 0.2s ease;



}







.f-contact-items a:hover {



  color: #86efac;



}







.f-address-item span {



  line-height: 1.45;



}







.f-social-boxes {



  display: flex;



  align-items: center;



  gap: 10px;



}







.f-social-square {



  width: 36px;



  height: 36px;



  border-radius: 8px;



  background: rgba(0, 0, 0, 0.25);



  border: 1px solid rgba(255, 255, 255, 0.15);



  color: #ffffff;



  display: flex;



  align-items: center;



  justify-content: center;



  text-decoration: none;



  transition: all 0.25s ease;



}







.f-social-square:hover {



  background: #15803d;



  border-color: #86efac;



  transform: translateY(-2px);



}







.f-bottom-bar {



  border-top: 1px solid rgba(255, 255, 255, 0.12);



  padding-top: 22px;



  text-align: center;



  font-size: 0.82rem;



  color: #94a3b8;



  position: relative;



  z-index: 2;



}







/* Toast notification styling */



.toast-notice {



  position: fixed;



  bottom: 24px;



  right: 24px;



  background: #0f172a;



  color: #ffffff;



  padding: 12px 20px;



  border-radius: 12px;



  font-size: 0.88rem;



  font-weight: 600;



  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);



  z-index: 9999;



  display: flex;



  align-items: center;



  gap: 10px;



  transform: translateY(100px);



  opacity: 0;



  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);



  pointer-events: none;



}







.toast-notice.show {



  transform: translateY(0);



  opacity: 1;



  pointer-events: auto;



}







.toast-notice.success {



  background: #15803d;



  border: 1px solid #86efac;



}







.footer-bottom-bar {



  border-top: 1px solid rgba(255, 255, 255, 0.08);



  padding-top: 24px;



  display: flex;



  align-items: center;



  justify-content: space-between;



  font-size: 0.84rem;



  flex-wrap: wrap;



  gap: 12px;



}







/* ==========================================================================



   MODAL WINDOWS (PROFIL VIDEO & PPDB & NEWS)



   ========================================================================== */



.modal-overlay {



  position: fixed;



  top: 0;



  left: 0;



  right: 0;



  bottom: 0;



  background: rgba(15, 23, 42, 0.75);



  backdrop-filter: blur(8px);



  z-index: 1000;



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 20px;



  opacity: 0;



  visibility: hidden;



  transition: all 0.25s ease;



}







.modal-overlay.open {



  opacity: 1;



  visibility: visible;



}







.modal-box {



  background: #ffffff;



  border-radius: 24px;



  width: 100%;



  max-width: 680px;



  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);



  overflow: hidden;



  position: relative;



  transform: translateY(20px) scale(0.97);



  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);



}







.modal-overlay.open .modal-box {



  transform: translateY(0) scale(1);



}







.modal-close-btn {



  position: absolute;



  top: 18px;



  right: 18px;



  width: 38px;



  height: 38px;



  border-radius: 50%;



  background: #f1f5f9;



  color: #475569;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  z-index: 10;



  transition: all var(--transition-fast);



}







.modal-close-btn:hover {



  background: #fee2e2;



  color: #dc2626;



  transform: rotate(90deg);



}







.modal-video-container {



  position: relative;



  padding-bottom: 56.25%;



  height: 0;



  background: #000000;



}







.modal-video-container iframe,



.modal-video-container video {



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  border: none;



}







.modal-content-body {



  padding: 32px 36px;



}







.modal-form-group {



  margin-bottom: 18px;



}







.modal-form-group label {



  display: block;



  font-size: 0.88rem;



  font-weight: 700;



  color: var(--text-primary);



  margin-bottom: 6px;



}







.modal-form-control {



  width: 100%;



  padding: 12px 16px;



  border-radius: var(--radius-md);



  border: 1.5px solid var(--border-light);



  font-family: inherit;



  font-size: 0.92rem;



  color: var(--text-primary);



  transition: border-color var(--transition-fast);



}







.modal-form-control:focus {



  outline: none;



  border-color: var(--primary);



  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);



}







/* ==========================================================================



   RESPONSIVE DESIGN (MOBILE & TABLET OPTIMIZATIONS)



   ========================================================================== */







/* Tablets & Small Desktops (max-width: 1024px) */



@media (max-width: 1024px) {



  .hero-section {



    min-height: auto;



    padding-top: 110px;



    padding-bottom: 80px;



    background-position: 70% top;



  }







  .hero-layout {



    grid-template-columns: 1fr;



    min-height: auto;



  }







  .hero-spacer-right {



    display: none;



  }







  .hero-content {



    max-width: 100%;



  }







  .features-grid {



    grid-template-columns: repeat(2, 1fr);



  }







  .about-grid {



    grid-template-columns: 1fr;



    gap: 50px;



  }







  .about-content {



    text-align: center;



  }







  .about-content .badge-pill {



    margin: 0 auto 16px auto;



  }







  .programs-cards-track {



    display: flex;



    gap: 18px;



    width: max-content;



  }



  .prog-arrow-btn {



    display: flex;



    flex: 0 0 40px;



    width: 40px;



    height: 40px;



  }







  .alumni-card-featured {



    width: 520px;



    grid-template-columns: 210px 1fr;



  }







  .alumni-card-side {



    width: 190px;



  }







  .footer-grid {



    grid-template-columns: repeat(2, 1fr);



    gap: 32px;



  }



}







/* Mobile Devices (max-width: 768px) */



@media (max-width: 768px) {



  .container {



    padding-left: 18px;



    padding-right: 18px;



  }







    .header-nav {
    position: fixed;
    top: 10px;
    padding: 0 10px;
  }

  .header-nav.scrolled {
    top: 10px;
  }







  .navbar-wrapper {



    height: 58px;



    padding: 6px 14px;



  }







  .brand-logo {



    gap: 8px;



  }







  .brand-icon-box {



    width: 36px;



    height: 36px;



  }







  .brand-title {



    font-size: 0.92rem;



  }







  .brand-sub {



    font-size: 0.74rem;



  }







  /* Backdrop Blur Overlay for Mobile Menu */



  .mobile-menu-backdrop {



    position: fixed;



    top: 0;



    left: 0;



    right: 0;



    bottom: 0;



    background: rgba(15, 23, 42, 0.42);



    backdrop-filter: blur(5px);



    -webkit-backdrop-filter: blur(5px);



    opacity: 0;



    visibility: hidden;



    transition: opacity 0.3s ease, visibility 0.3s ease;



    z-index: 98;



  }



  .mobile-menu-backdrop.open {



    opacity: 1;



    visibility: visible;



  }







  .nav-menu {



    position: fixed;



    top: 74px;



    left: 14px;



    right: 14px;



    max-width: 420px;



    margin: 0 auto;



    background: rgba(255, 255, 255, 0.98);



    backdrop-filter: blur(20px);



    -webkit-backdrop-filter: blur(20px);



    flex-direction: column;



    align-items: stretch;



    text-align: left;



    padding: 14px 12px 18px 12px;



    border-radius: 26px;



    gap: 4px;



    box-shadow: 0 20px 48px -8px rgba(15, 23, 42, 0.22), 0 4px 16px rgba(21, 128, 61, 0.08);



    border: 1.5px solid rgba(187, 247, 208, 0.85);



    transform: translateY(-20px) scale(0.96);



    opacity: 0;



    visibility: hidden;



    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),



                transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),



                visibility 0.28s ease;



    z-index: 99;



  }







  .nav-menu.open {



    transform: translateY(0) scale(1);



    opacity: 1;



    visibility: visible;



  }







  .nav-menu li {



    width: 100%;



    list-style: none;



  }







  .nav-link {



    display: flex;



    align-items: center;



    justify-content: space-between;



    width: 100%;



    padding: 9px 16px;



    border-radius: 12px;



    font-size: 0.92rem;



    font-weight: 600;



    color: #334155;



    text-align: left;



    position: relative;



    transition: all 0.2s ease;



  }







  .nav-link::after {



    display: none !important;



  }







  .nav-link::before {



    content: '›';



    position: absolute;



    right: 14px;



    font-size: 1.25rem;



    line-height: 1;



    color: #94a3b8;



    transition: transform 0.2s ease, color 0.2s ease;



  }







  .nav-link:hover,



  .nav-link:focus {



    background: #f1fdf5;



    color: #15803d;



    transform: translateX(3px);



  }







  .nav-link:hover::before {



    color: #16a34a;



    transform: translateX(3px);



  }







  .nav-link.active {



    background: linear-gradient(135deg, rgba(240, 253, 244, 0.95), rgba(220, 252, 231, 0.85));



    color: #15803d;



    font-weight: 700;



    border: 1px solid rgba(134, 239, 172, 0.7);



    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.08);



  }







  .nav-link.active::before {



    color: #15803d;



    font-weight: 700;



  }







  .mobile-only-ppdb {



    display: block !important;



    margin-top: 8px;



    padding-top: 12px;



    border-top: 1px solid rgba(226, 232, 240, 0.9);



    width: 100%;



  }







  .mobile-only-ppdb .btn-ppdb {



    display: flex;



    align-items: center;



    justify-content: center;



    width: 100%;



    padding: 13px 20px;



    border-radius: 9999px;



    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);



    color: #ffffff;



    font-size: 0.92rem;



    font-weight: 700;



    box-shadow: 0 8px 22px rgba(21, 128, 61, 0.28);



    text-align: center;



    transition: all 0.25s ease;



  }







  .mobile-only-ppdb .btn-ppdb:hover {



    transform: translateY(-2px);



    box-shadow: 0 10px 26px rgba(21, 128, 61, 0.38);



    background: linear-gradient(135deg, #166534 0%, #15803d 100%);



  }







  .mobile-only-ppdb .btn-ppdb:active {



    transform: scale(0.98);



  }







  .nav-actions .btn-ppdb {



    display: none;



  }







  .mobile-menu-btn {



    display: flex;



    z-index: 101;



    border-radius: 12px;



    transition: all 0.25s ease;



  }







  .mobile-menu-btn.open {



    background: #fee2e2;



    border-color: #fca5a5;



  }







  .mobile-menu-btn.open span {



    background-color: #dc2626;



  }







  .hero-section {



    padding-top: 84px;



    padding-bottom: 50px;



    min-height: auto;



    background-position: 70% 30%;



  }







  .hero-overlay-gradient {



    background: linear-gradient(180deg, 



      rgba(255, 255, 255, 0.98) 0%, 



      rgba(255, 255, 255, 0.93) 45%, 



      rgba(255, 255, 255, 0.72) 75%, 



      rgba(255, 255, 255, 0.45) 100%



    );



  }







  .hero-layout {



    min-height: auto;



    grid-template-columns: 1fr;



  }







  .hero-content {



    align-items: flex-start;



    text-align: left;



    max-width: 100%;



  }







  .hero-spacer-right {



    display: none;



  }







  .hero-title {



    font-size: 1.85rem;



    font-weight: 800;



    line-height: 1.24;



    letter-spacing: -0.02em;



    text-align: left;



    margin-bottom: 12px;



  }







  .hero-title br {



    display: inline;



    content: ' ';



  }







  .hero-description {



    text-align: left;



    font-size: 0.9rem;



    line-height: 1.55;



    color: #475569;



    margin-bottom: 20px;



    max-width: 100%;



  }







  .hero-cta-group {



    display: flex;



    flex-direction: row;



    align-items: center;



    gap: 10px;



    width: 100%;



    margin-bottom: 18px;



  }







  .hero-cta-group .btn-primary-pill,



  .hero-cta-group .btn-video-pill {



    flex: 1 1 0;



    min-width: 0;



    padding: 11px 12px;



    font-size: 0.82rem;



    font-weight: 700;



    justify-content: center;



    white-space: nowrap;



    border-radius: 9999px;



  }







  .hero-cta-group .btn-video-pill {



    gap: 6px;



    padding: 10px 12px;



  }







  .slider-dots {



    margin-top: 10px;



    margin-bottom: 10px;



  }







  .hero-bottom-waves {



    height: 55px;



  }







  /* 4 Feature Cards in a clean 2x2 Grid on Mobile */



  .features-section {



    margin-top: -22px;



    margin-bottom: 28px;



    position: relative;



    z-index: 4;



  }







  .features-grid {



    display: grid;



    grid-template-columns: repeat(2, 1fr);



    gap: 10px;



  }







  .feature-card {



    padding: 12px 10px;



    display: flex;



    align-items: center;



    gap: 10px;



    border-radius: 16px;



    background: #ffffff;



    border: 1px solid rgba(226, 232, 240, 0.9);



    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);



  }







  .feature-icon-wrapper {



    flex: 0 0 38px;



    width: 38px;



    height: 38px;



    border-radius: 12px;



    margin-bottom: 0;



  }







  .feature-icon-wrapper svg {



    width: 20px;



    height: 20px;



  }







  .feature-title {



    font-size: 0.78rem;



    font-weight: 700;



    line-height: 1.25;



    color: #0f172a;



    text-align: left;



  }







  .feature-title br {



    display: inline;



    content: ' ';



  }







  .about-section {



    padding-top: 30px;



    padding-bottom: 30px;



  }







  .about-image-composition {



    max-width: 350px;



    height: 260px;



    margin: 0 auto 32px auto;



    position: relative;



  }







  .about-backdrop-deep {



    top: 10px;



    left: -10px;



    width: 86%;



    height: 215px;



    border-radius: 28px;



  }







  .about-backdrop-mint {



    top: -4px;



    left: -4px;



    width: 88%;



    height: 222px;



    border-radius: 26px;



  }







  .about-main-img-wrap {



    width: 82%;



    height: 215px;



    border-radius: 22px;



    border-width: 6px;



    transform: rotate(-1.5deg);



  }







  .about-sub-img-wrap {



    position: absolute;



    top: auto;



    bottom: 6px;



    right: 2px;



    width: 54%;



    height: 150px;



    border-radius: 18px;



    border-width: 6px;



    transform: rotate(2deg);



    z-index: 5;



    box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.28);



  }







  .about-crest-badge {



    width: 54px;



    height: 54px;



    border-width: 4px;



    bottom: 2px;



    left: 46%;



    z-index: 7;



  }







  .about-crest-badge svg {



    width: 24px;



    height: 24px;



  }







  .about-sparks {



    top: -12px;



    right: 48px;



    transform: scale(0.85);



  }







  .about-title {



    font-size: 1.8rem;



    word-break: break-word;



    text-align: left;



  }







  .about-content {



    text-align: left;



  }







  .about-content .badge-pill {



    margin-left: 0;



    margin-right: 0;



  }







  .about-desc {



    font-size: 0.95rem;



  }







  .visi-misi-section-container {



    margin-top: 40px;



  }



  .visi-misi-divider-header {



    gap: 16px;



    margin-bottom: 22px;



  }



  .vm-divider-line {



    height: 1px;



  }



  .vm-main-title {



    font-size: 1.55rem;



  }



  .visi-misi-cards-container {



    grid-template-columns: 1fr;



    gap: 20px;



  }



  .vm-card {



    padding: 24px 22px;



    min-height: auto;



  }



  .vm-card-text {



    max-width: 100%;



    margin-bottom: 30px;



  }



  .vm-visi-bottom-art {



    width: 120px;



    height: 80px;



  }



  .stats-section {



    padding-top: 20px;



    padding-bottom: 35px;



  }



  .stats-capsule-bar {



    display: grid;



    grid-template-columns: repeat(2, 1fr);



    gap: 16px 14px;



    border-radius: 24px;



    padding: 22px 18px;



    background: rgba(255, 255, 255, 0.95);



    border: 1.5px solid rgba(187, 247, 208, 0.85);



    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.08);



  }



  .stat-v-divider {



    display: none;



  }



  .stat-capsule-item {



    width: 100%;



    display: flex;



    align-items: center;



    gap: 12px;



    justify-content: flex-start;



  }



  .stat-squircle-icon {



    width: 44px;



    height: 44px;



    border-radius: 14px;



    flex-shrink: 0;



  }



  .stat-squircle-icon svg {



    width: 22px;



    height: 22px;



  }



  .stat-number {



    font-size: 1.35rem;



    font-weight: 800;



    color: #0f172a;



    line-height: 1.2;



    letter-spacing: -0.02em;



  }



  .stat-label {



    font-size: 0.78rem;



    font-weight: 600;



    color: #64748b;



    line-height: 1.25;



  }







  .stat-item:nth-child(2)::after {



    display: none;



  }







  .stat-item:nth-child(1)::after,



  .stat-item:nth-child(3)::after {



    top: 10%;



    height: 80%;



  }







  .stat-number {



    font-size: 1.3rem;



  }







  .stat-label {



    font-size: 0.75rem;



  }







  .programs-section {



    padding-top: 20px;



    padding-bottom: 30px;



  }







  .section-main-title {



    font-size: 1.65rem;



  }







  .programs-carousel-outer {



    display: block;



    position: relative;



    width: 100%;



    margin-bottom: 20px;



    gap: 0;



  }



    .prog-arrow-btn {



    display: none !important;



  }



  .programs-slider-viewport {



    width: 100%;



    overflow-x: auto;



    scroll-snap-type: x mandatory;



    -webkit-overflow-scrolling: touch;



    padding: 8px 16px 20px 16px;



    scroll-padding: 0 16px;



    scrollbar-width: none;



  }



  .programs-slider-viewport::-webkit-scrollbar {



    display: none;



  }



  .programs-cards-track {



    display: flex;



    gap: 16px;



    width: max-content;



  }



  .prog-card-rich {



    width: min(320px, calc(100vw - 64px));



    flex: 0 0 min(320px, calc(100vw - 64px));



    scroll-snap-align: center;



    border-radius: 24px;



  }



  .prog-card-visual {



    height: 180px;



  }



  .prog-card-body {



    padding: 20px 18px 22px 18px;



  }



  .prog-card-title {



    font-size: 1.15rem;



  }



  .prog-card-desc {



    font-size: 0.86rem;



    line-height: 1.5;



    margin-bottom: 14px;



  }



  .prog-check-list {



    gap: 8px;



    margin-bottom: 16px;



  }



  .prog-check-list li {



    font-size: 0.82rem;



    gap: 8px;



  }



  .prog-mini-metrics {



    padding: 9px 12px;



    margin-bottom: 16px;



    border-radius: 14px;



  }



  .prog-metric-num {



    font-size: 1.1rem;



  }



  .prog-metric-lbl {



    font-size: 0.72rem;



  }



  .prog-detail-btn {



    width: 100%;



    justify-content: center;



    padding: 11px 18px;



    font-size: 0.88rem;



  }



  .prog-filter-tabs {



    display: flex;



    align-items: center;



    justify-content: flex-start;



    flex-wrap: nowrap;



    overflow-x: auto;



    -webkit-overflow-scrolling: touch;



    scrollbar-width: none;



    gap: 8px;



    padding: 4px 16px 12px 16px;



    margin-left: -16px;



    margin-right: -16px;



    margin-bottom: 20px;



  }



  .prog-filter-tabs::-webkit-scrollbar {



    display: none;



  }



  .prog-tab-btn {



    flex-shrink: 0;



    white-space: nowrap;



    padding: 8px 16px;



    font-size: 0.82rem;



  }



  .prog-features-capsule-bar {



    flex-wrap: wrap;



    border-radius: 28px;



    padding: 22px 18px;



    gap: 16px;



  }



  .prog-feat-divider {



    display: none;



  }



  .prog-feature-col {



    width: calc(50% - 10px);



    flex: none;



    justify-content: flex-start;



  }







  /* Alumni Section on Mobile */



  .alumni-section {



    padding-top: 40px;



    padding-bottom: 45px;



  }







  .alumni-title {



    font-size: 1.85rem;



  }







  .alumni-cards-row {



    gap: 0;



  }







  .alumni-card-side {



    display: none;



  }







  .alumni-card-featured {



    width: 100%;



    grid-template-columns: 1fr;



    border-radius: 24px;



  }







  .alumni-feat-visual {



    height: 230px;



    min-height: auto;



  }







  .alumni-feat-content {



    padding: 20px 18px;



  }







  .alumni-feat-name {



    font-size: 1.25rem;



  }







  .alumni-showcase-wrapper {



    gap: 8px;



  }







  .alumni-nav-btn {



    width: 38px;



    height: 38px;



  }







  .prog-main-title {



    font-size: 1.75rem;



    line-height: 1.25;



  }



  .prog-badge-line {



    width: 20px;



  }



  .prog-card-rich {



    width: min(325px, calc(100vw - 64px));



    flex: 0 0 min(325px, calc(100vw - 64px));



  }



  .prog-feature-col {



    width: 100%;



  }







  .program-img-col {



    width: 90px;



    height: 80px;



  }







  .split-content-section {



    padding-top: 20px;



    padding-bottom: 30px;



  }







  .split-grid {



    grid-template-columns: 1fr;



    gap: 32px;



  }







  .gallery-slides-wrapper {



    height: 220px;



  }







  .news-card-item {



    padding: 12px 14px;



    gap: 12px;



  }







  .news-thumb-box {



    width: 80px;



    height: 64px;



  }







  .news-item-title {



    font-size: 0.88rem;



  }







  .contact-section {



    padding-top: 50px;



  }







  .contact-title {



    font-size: 1.85rem;



  }







  .contact-main-grid {



    grid-template-columns: 1fr;



    gap: 20px;



  }







  .contact-form-card {



    grid-template-columns: 1fr;



    border-radius: 22px;



  }







  .contact-card-visual {



    height: 180px;



  }







  .contact-visual-wave {



    height: 70px;



  }







  .contact-card-body {



    padding: 24px 20px;



  }







  .form-row-dual {



    grid-template-columns: 1fr;



    gap: 12px;



  }







  .contact-cards-2x2 {



    grid-template-columns: 1fr;



  }







  .contact-map-card {



    grid-template-columns: 1fr;



  }







  .map-vector-box {



    height: 140px;



    border-right: none;



    border-bottom: 1px solid #f1f5f9;



  }







  .floating-help-capsule {



    flex-direction: column;



    border-radius: 20px;



    padding: 18px 16px;



    text-align: center;



    gap: 12px;



  }







  .help-capsule-left {



    flex-direction: column;



    text-align: center;



    gap: 8px;



    width: 100%;



  }







  .help-capsule-text {



    font-size: 0.88rem;



    line-height: 1.45;



  }







  .help-capsule-divider {



    display: none;



  }







  .help-capsule-btn {



    width: 100%;



    justify-content: center;



  }







  .footer-cendekia-grid {



    grid-template-columns: 1fr;



    gap: 28px;



  }







  .f-nav-matrix {



    grid-template-columns: repeat(2, 1fr);



  }



}







/* Small Screens (max-width: 480px) */



@media (max-width: 480px) {



  .hero-title {



    font-size: 1.85rem;



  }







  .hero-cta-group {



    flex-direction: column;



    width: 100%;



  }







  .btn-primary-pill,



  .btn-video-pill {



    width: 100%;



    justify-content: center;



  }







  .vm-main-title {



    font-size: 1.35rem;



  }



  .vm-wreath-icon svg {



    width: 34px;



    height: 34px;



  }



  .stats-capsule-bar {



    display: grid;



    grid-template-columns: repeat(2, 1fr);



    gap: 16px 10px;



    padding: 18px 14px;



    border-radius: 22px;



  }



  .stat-capsule-item {



    width: 100%;



    display: flex;



    align-items: center;



    gap: 10px;



    justify-content: flex-start;



  }



  .stat-squircle-icon {



    width: 40px;



    height: 40px;



    border-radius: 12px;



    flex-shrink: 0;



  }



  .stat-squircle-icon svg {



    width: 20px;



    height: 20px;



  }



  .stat-number {



    font-size: 1.25rem;



    font-weight: 800;



    line-height: 1.2;



  }



  .stat-label {



    font-size: 0.74rem;



    font-weight: 600;



    color: #64748b;



    line-height: 1.25;



  }







  .stat-item::after {



    display: none !important;



  }







  .stat-item {



    justify-content: flex-start;



  }



}







@keyframes spin {



  from { transform: rotate(0deg); }



  to { transform: rotate(360deg); }



}







.spin-icon {



  animation: spin 0.8s linear infinite;



}











/* ==========================================================================



   DERETAN PRESTASI MEMBANGGAKAN KAMI (EXACT MATCH TO MOCKUP)



   ========================================================================== */



.prestasi-section {



  position: relative;



  padding: 95px 0 85px 0;



  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 18%, #ffffff 82%, #f0fdf4 100%);



  overflow: hidden;



}







.prestasi-hero-grid {



  display: grid;



  grid-template-columns: 1.15fr 0.85fr;



  gap: 48px;



  align-items: center;



  margin-bottom: 45px;



}







.badge-prestasi {



  background: #ebfbf0;



  color: #15803d;



  border: 1px solid rgba(134, 239, 172, 0.7);



  display: inline-flex;



  align-items: center;



  gap: 8px;



  font-weight: 700;



  font-size: 0.82rem;



  padding: 6px 16px;



  border-radius: var(--radius-full);



  margin-bottom: 16px;



  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.08);



}







.prestasi-main-title {



  font-size: 2.35rem;



  font-weight: 800;



  color: #0f172a;



  line-height: 1.25;



  margin: 0 0 16px 0;



  letter-spacing: -0.02em;



}







.prestasi-main-title .highlight-kami {



  color: #15803d;



  font-family: var(--font-serif);



  font-style: italic;



  font-weight: 700;



  position: relative;



  display: inline-block;



}







.prestasi-main-title .sparkle-rays {



  position: absolute;



  top: -14px;



  right: -28px;



  width: 28px;



  height: 28px;



  pointer-events: none;



}







.prestasi-main-title .prestasi-brush-line {



  position: absolute;



  bottom: -8px;



  left: 0;



  width: 100%;



  height: 12px;



  pointer-events: none;



}







.prestasi-hero-desc {



  font-size: 1.02rem;



  color: #475569;



  line-height: 1.65;



  max-width: 530px;



  margin-bottom: 24px;



}







/* 4-Item Stats Capsule Bar */



.prestasi-stats-capsule {



  background: #ffffff;



  border: 1.5px solid rgba(187, 247, 208, 0.75);



  border-radius: 20px;



  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.06);



  padding: 14px 22px;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 14px;



  max-width: 550px;



  margin-bottom: 28px;



}







.p-stat-item {



  display: flex;



  align-items: center;



  gap: 10px;



}







.p-stat-icon {



  width: 38px;



  height: 38px;



  border-radius: 11px;



  background: #ebfbf0;



  border: 1px solid rgba(134, 239, 172, 0.6);



  display: flex;



  align-items: center;



  justify-content: center;



  flex-shrink: 0;



}







.p-stat-info {



  display: flex;



  flex-direction: column;



}







.p-stat-number {



  font-size: 1.15rem;



  font-weight: 800;



  color: #0f172a;



  line-height: 1.1;



}







.p-stat-label {



  font-size: 0.72rem;



  color: #64748b;



  font-weight: 600;



  white-space: nowrap;



}







.p-stat-v-sep {



  width: 1px;



  height: 32px;



  background: rgba(203, 213, 225, 0.7);



}







.btn-semua-prestasi {



  display: inline-flex;



  align-items: center;



  gap: 10px;



  background: linear-gradient(135deg, #15803d, #16a34a);



  color: #ffffff;



  font-weight: 700;



  font-size: 0.95rem;



  padding: 13px 28px;



  border-radius: var(--radius-full);



  box-shadow: 0 8px 20px rgba(21, 128, 61, 0.25);



  transition: all 0.25s ease;



}







.btn-semua-prestasi:hover {



  transform: translateY(-2px);



  box-shadow: 0 12px 28px rgba(21, 128, 61, 0.35);



  background: linear-gradient(135deg, #166534, #15803d);



  color: #ffffff;



}







/* Right Column Visual Showcase */



.prestasi-hero-visual {



  display: flex;



  justify-content: center;



  align-items: center;



}







.prestasi-visual-outer {



  position: relative;



  border-radius: 28px;



  overflow: visible;



  display: inline-block;



}







.prestasi-showcase-img {



  width: 100%;



  max-width: 530px;



  height: auto;



  display: block;



  filter: drop-shadow(0 16px 35px rgba(21, 128, 61, 0.16)) drop-shadow(0 6px 15px rgba(0, 0, 0, 0.08));



  transition: transform 0.35s ease;



}







.prestasi-showcase-img:hover {



  transform: translateY(-4px) scale(1.02);



}







/* Section Divider Header ("Prestasi Terbaru") */



.prestasi-divider-header {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 20px;



  margin: 40px 0 32px 0;



}







.prestasi-divider-header .p-divider-line {



  flex: 1;



  height: 1.5px;



  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.5), transparent);



}







.prestasi-divider-header .p-title-wrap {



  display: flex;



  align-items: center;



  gap: 12px;



}







.prestasi-divider-header .p-divider-title {



  font-size: 1.6rem;



  font-weight: 800;



  color: #0f172a;



  margin: 0;



}







.prestasi-divider-header .highlight-terbaru {



  color: #15803d;



  font-family: var(--font-serif);



  font-style: italic;



}







/* Prestasi Carousel Track & Outer */



.prestasi-carousel-outer {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 16px;



  width: 100%;



  margin-bottom: 24px;



  position: relative;



}







.prestasi-arrow-btn {



  position: relative;



  flex: 0 0 44px;



  width: 44px;



  height: 44px;



  border-radius: 50%;



  background: #ffffff;



  border: 1.5px solid rgba(226, 232, 240, 0.95);



  color: #15803d;



  display: flex;



  align-items: center;



  justify-content: center;



  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);



  cursor: pointer;



  transition: all 0.25s ease;



  z-index: 10;



}







.prestasi-arrow-btn:hover {



  background: #15803d;



  border-color: #15803d;



  color: #ffffff;



  transform: scale(1.08);



  box-shadow: 0 8px 22px rgba(21, 128, 61, 0.3);



}







.prestasi-arrow-btn:active {



  transform: scale(0.96);



}







.prestasi-slider-viewport {



  flex: 1 1 0;



  min-width: 0;



  overflow-x: auto;



  overflow-y: hidden;



  scroll-behavior: smooth;



  scroll-snap-type: x mandatory;



  -webkit-overflow-scrolling: touch;



  scrollbar-width: none;



  padding: 12px 6px 26px 6px;



}







.prestasi-slider-viewport::-webkit-scrollbar {



  display: none;



}







.prestasi-cards-track {



  display: flex;



  gap: 18px;



  width: max-content;



  transition: all 0.35s ease;



}







/* Individual Prestasi Card */



.prestasi-card-item {



  width: 255px;



  flex: 0 0 255px;



  scroll-snap-align: start;



  background: #ffffff;



  border-radius: 20px;



  border: 1.5px solid rgba(187, 247, 208, 0.75);



  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.06);



  padding: 12px 14px;



  display: flex;



  align-items: center;



  gap: 12px;



  transition: all 0.3s ease;



  cursor: pointer;



}







.prestasi-card-item:hover {



  transform: translateY(-4px);



  box-shadow: 0 14px 30px rgba(21, 128, 61, 0.14);



  border-color: #86efac;



}







.prestasi-thumb-box {



  position: relative;



  flex: 0 0 78px;



  width: 78px;



  height: 78px;



  border-radius: 14px;



  overflow: visible;



}







.prestasi-thumb-box img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  border-radius: 14px;



  display: block;



}







/* Medal Ribbon Badge (1, 2, 3) */



.prestasi-medal-ribbon {



  position: absolute;



  bottom: -6px;



  left: -6px;



  width: 28px;



  height: 28px;



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  font-weight: 800;



  font-size: 0.78rem;



  color: #ffffff;



  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);



  border: 2px solid #ffffff;



  z-index: 3;



}







.prestasi-medal-ribbon.medal-gold {



  background: linear-gradient(135deg, #f59e0b, #d97706);



}







.prestasi-medal-ribbon.medal-silver {



  background: linear-gradient(135deg, #94a3b8, #64748b);



}







.prestasi-medal-ribbon.medal-bronze {



  background: linear-gradient(135deg, #d97706, #b45309);



}







.prestasi-medal-ribbon .ribbon-tails {



  position: absolute;



  bottom: -8px;



  left: 50%;



  transform: translateX(-50%);



  width: 18px;



  height: 10px;



  display: flex;



  justify-content: space-between;



  z-index: -1;



  pointer-events: none;



}







.prestasi-medal-ribbon .tail {



  width: 7px;



  height: 10px;



  background: #dc2626;



  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%);



}







.prestasi-medal-ribbon .tail.left {



  transform: rotate(-15deg);



}







.prestasi-medal-ribbon .tail.right {



  transform: rotate(15deg);



}







.prestasi-card-content {



  flex: 1;



  min-width: 0;



  display: flex;



  flex-direction: column;



}







.prestasi-cat-tag {



  display: inline-flex;



  align-items: center;



  gap: 5px;



  background: #f0fdf4;



  color: #15803d;



  border-radius: 6px;



  padding: 2px 8px;



  font-size: 0.7rem;



  font-weight: 700;



  width: fit-content;



  margin-bottom: 6px;



}







.prestasi-card-title {



  font-size: 0.88rem;



  font-weight: 800;



  color: #0f172a;



  line-height: 1.35;



  margin: 0 0 8px 0;



  overflow: hidden;



  display: -webkit-box;



  -webkit-line-clamp: 2;



  -webkit-box-orient: vertical;



}







.prestasi-meta-row {



  display: flex;



  flex-direction: column;



  gap: 4px;



}







.prestasi-level-pill {



  display: inline-flex;



  align-items: center;



  gap: 4px;



  background: #dcfce7;



  color: #15803d;



  border-radius: var(--radius-full);



  padding: 2px 7px;



  font-size: 0.68rem;



  font-weight: 700;



  width: fit-content;



}







.prestasi-date {



  display: inline-flex;



  align-items: center;



  gap: 4px;



  color: #64748b;



  font-size: 0.68rem;



  font-weight: 500;



}







/* Pagination Dots */



.prestasi-pagination-dots {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 8px;



  margin-top: 10px;



}







.prestasi-dot-btn {



  width: 9px;



  height: 9px;



  border-radius: var(--radius-full);



  background: #cbd5e1;



  border: none;



  cursor: pointer;



  transition: all 0.3s ease;



}







.prestasi-dot-btn.active {



  width: 26px;



  background: #15803d;



}







/* Responsive Media Queries for Prestasi */



@media (max-width: 1024px) {



  .prestasi-hero-grid {



    grid-template-columns: 1fr;



    gap: 36px;



    text-align: center;



  }



  .badge-prestasi {



    margin: 0 auto 16px auto;



  }



  .prestasi-hero-desc {



    margin: 0 auto 24px auto;



  }



  .prestasi-stats-capsule {



    margin: 0 auto 28px auto;



  }



  .btn-semua-prestasi {



    margin: 0 auto;



  }



  .prestasi-cards-track {



    gap: 16px;



  }



  .prestasi-arrow-btn {



    flex: 0 0 40px;



    width: 40px;



    height: 40px;



  }



}







@media (max-width: 768px) {



  .prestasi-section {



    padding: 70px 0 60px 0;



  }



  .prestasi-main-title {



    font-size: 1.85rem;



  }



  .prestasi-stats-capsule {



    flex-wrap: wrap;



    justify-content: center;



    gap: 12px 18px;



    padding: 14px 16px;



  }



  .p-stat-v-sep {



    display: none;



  }



  .p-stat-item {



    width: calc(50% - 10px);



    justify-content: flex-start;



  }



  .prestasi-card-item {



    width: 245px;



    flex: 0 0 245px;



  }



}







@media (max-width: 640px) {



  .prestasi-carousel-outer {



    gap: 0;



  }



  .prestasi-arrow-btn {



    display: none;



  }



  .prestasi-card-item {



    width: 265px;



    flex: 0 0 265px;



  }



}











/* ==========================================================================



   MODAL DETAIL ENHANCED (WITH IMAGE BANNER & BADGES)



   ========================================================================== */



.modal-detail-box {



  max-width: 620px;



  border-radius: 26px;



  overflow: hidden;



  background: #ffffff;



  border: 1.5px solid rgba(187, 247, 208, 0.7);



  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35);



}







.modal-detail-banner {



  position: relative;



  width: 100%;



  height: 350px;



  background: #09121a;



  display: flex;



  align-items: center;



  justify-content: center;



  overflow: hidden;



}







.modal-detail-ambient-bg {



  position: absolute;



  top: -30px;



  left: -30px;



  right: -30px;



  bottom: -30px;



  background-size: cover;



  background-position: center;



  filter: blur(24px) brightness(0.6);



  opacity: 0.8;



  transform: scale(1.15);



  pointer-events: none;



  transition: background-image 0.3s ease;



}







.modal-detail-banner img {



  position: relative;



  z-index: 2;



  max-width: 100%;



  max-height: 100%;



  width: auto;



  height: auto;



  object-fit: contain;



  display: block;



  border-radius: 8px;



  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);



  transition: transform 0.4s ease;



}







@media (max-width: 640px) {



  .modal-detail-banner {



    height: 250px;



  }



}







.modal-detail-banner-overlay {



  position: absolute;



  top: 0;



  left: 0;



  right: 0;



  bottom: 0;



  background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, 0.5) 100%);



  pointer-events: none;



}







.modal-detail-medal-float {



  position: absolute;



  bottom: 16px;



  left: 20px;



  z-index: 3;



  display: inline-flex;



  align-items: center;



  gap: 8px;



  background: rgba(255, 255, 255, 0.95);



  backdrop-filter: blur(8px);



  padding: 6px 14px;



  border-radius: var(--radius-full);



  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);



  font-size: 0.82rem;



  font-weight: 800;



  color: #0f172a;



  border: 1px solid rgba(255, 255, 255, 0.8);



}







.modal-detail-body {



  padding: 24px 28px 28px 28px;



}







.modal-meta-row {



  display: flex;



  align-items: center;



  gap: 8px;



  flex-wrap: wrap;



  margin-bottom: 14px;



}







.modal-tag-pill {



  display: inline-flex;



  align-items: center;



  gap: 5px;



  background: #f0fdf4;



  color: #15803d;



  font-weight: 700;



  font-size: 0.76rem;



  padding: 4px 10px;



  border-radius: 8px;



  border: 1px solid rgba(187, 247, 208, 0.9);



}







.modal-level-pill {



  display: inline-flex;



  align-items: center;



  gap: 5px;



  background: #dcfce7;



  color: #15803d;



  font-weight: 700;



  font-size: 0.76rem;



  padding: 4px 10px;



  border-radius: var(--radius-full);



}







.modal-date-pill {



  display: inline-flex;



  align-items: center;



  gap: 5px;



  color: #64748b;



  font-weight: 600;



  font-size: 0.76rem;



  margin-left: auto;



}







.modal-detail-title {



  font-size: 1.35rem;



  font-weight: 800;



  color: #0f172a;



  line-height: 1.35;



  margin: 0 0 14px 0;



}







.modal-detail-desc {



  font-size: 0.96rem;



  color: #475569;



  line-height: 1.75;



}







.modal-detail-box .modal-close-btn {



  background: rgba(255, 255, 255, 0.9);



  backdrop-filter: blur(8px);



  -webkit-backdrop-filter: blur(8px);



  color: #0f172a;



  border: 1px solid rgba(255, 255, 255, 0.8);



  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);



  top: 16px;



  right: 16px;



}



.modal-detail-box .modal-close-btn:hover {



  background: #fee2e2;



  color: #dc2626;



}











/* ==========================================================================



   GALERI KEGIATAN SEKOLAH (EXACT MATCH TO MOCKUP)



   ========================================================================== */



.gallery-section {



  position: relative;



  padding: 85px 0 65px 0;



  background: linear-gradient(180deg, #f6fcf8 0%, #ffffff 42%, #f2faf4 100%);



  overflow: hidden;



}







/* Background Organic Shapes */



.galeri-bg-shape.top-left {



  position: absolute;



  top: 0;



  left: 0;



  width: 440px;



  height: 360px;



  background: radial-gradient(circle at 12% 18%, rgba(134, 239, 172, 0.3) 0%, rgba(240, 253, 244, 0.05) 70%, transparent 100%);



  pointer-events: none;



  z-index: 1;



}







.galeri-bg-shape.top-right {



  position: absolute;



  top: 0;



  right: 0;



  width: 460px;



  height: 380px;



  background: radial-gradient(circle at 88% 18%, rgba(134, 239, 172, 0.28) 0%, rgba(240, 253, 244, 0.05) 70%, transparent 100%);



  pointer-events: none;



  z-index: 1;



}







.galeri-bg-bottom-curve {



  position: absolute;



  bottom: 0;



  left: 0;



  width: 100%;



  height: 120px;



  background: radial-gradient(ellipse at 5% 100%, rgba(34, 197, 94, 0.22) 0%, transparent 45%),



              radial-gradient(ellipse at 95% 100%, rgba(34, 197, 94, 0.25) 0%, transparent 48%);



  pointer-events: none;



  z-index: 1;



}







.gallery-section .container {



  position: relative;



  z-index: 2;



}







/* 1. Header Centered with Badge & Curved Brush */



.galeri-header-center {



  text-align: center;



  display: flex;



  flex-direction: column;



  align-items: center;



  margin-bottom: 34px;



}







.galeri-badge-wrapper {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 16px;



  margin-bottom: 12px;



  width: 100%;



  max-width: 420px;



}







.galeri-badge-line {



  flex: 1;



  height: 1.5px;



  background: linear-gradient(90deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.6));



}







.galeri-badge-wrapper .galeri-badge-line:last-child {



  background: linear-gradient(90deg, rgba(34, 197, 94, 0.6), rgba(34, 197, 94, 0.1));



}







.badge-galeri-top {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  padding: 6px 18px;



  background: #eaf8ef;



  border: 1.5px solid #bbf7d0;



  border-radius: 9999px;



  color: #15803d;



  font-size: 0.88rem;



  font-weight: 700;



  letter-spacing: 0.2px;



}







.galeri-main-title {



  font-size: clamp(2rem, 3.8vw, 2.85rem);



  font-weight: 800;



  color: #0f291e;



  line-height: 1.25;



  margin: 0 0 12px 0;



  letter-spacing: -0.02em;



}







.highlight-sekolah {



  position: relative;



  display: inline-block;



  color: #16a34a;



  font-family: "Playfair Display", Georgia, serif;



  font-style: italic;



  font-weight: 700;



  margin-left: 4px;



}







.galeri-brush-line {



  position: absolute;



  bottom: -7px;



  left: 0;



  width: 100%;



  height: 12px;



  pointer-events: none;



}







.galeri-subtitle {



  font-size: 1.02rem;



  color: #4b6356;



  max-width: 640px;



  margin: 0 auto 26px auto;



  line-height: 1.6;



}







/* Filter Navigation Tabs Bar */



.galeri-filter-tabs {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 10px;



  flex-wrap: wrap;



}







.galeri-tab-btn {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  padding: 9px 20px;



  border-radius: 9999px;



  font-size: 0.92rem;



  font-weight: 600;



  border: 1px solid #d1fae5;



  background: #ffffff;



  color: #1e3a2f;



  cursor: pointer;



  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);



  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);



}







.galeri-tab-btn:hover {



  background: #f0fdf4;



  border-color: #86efac;



  color: #15803d;



  transform: translateY(-2px);



}







.galeri-tab-btn.active {



  background: #16a34a;



  border-color: #16a34a;



  color: #ffffff;



  font-weight: 700;



  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);



  transform: translateY(-1px);



}







/* 2. Bento Grid Layout */



.galeri-bento-grid {



  display: grid;



  grid-template-columns: 1.05fr 1.35fr;



  gap: 16px;



  align-items: stretch;



  margin-bottom: 28px;



}







/* Left: Big Featured Card */



.galeri-featured-card {



  position: relative;



  border-radius: 22px;



  overflow: hidden;



  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);



  background: #0f172a;



  min-height: 400px;



  display: flex;



}







.galeri-featured-viewport {



  position: relative;



  width: 100%;



  height: 100%;



  min-height: 400px;



  overflow: hidden;



}







.galeri-featured-slide {



  position: absolute;



  inset: 0;



  opacity: 0;



  visibility: hidden;



  transition: opacity 0.45s ease, transform 0.45s ease;



  transform: scale(1.02);



}







.galeri-featured-slide.active {



  opacity: 1;



  visibility: visible;



  transform: scale(1);



}







.galeri-featured-slide img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



}







.galeri-featured-overlay {



  position: absolute;



  bottom: 0;



  left: 0;



  right: 0;



  padding: 16px 20px;



  background: linear-gradient(180deg, transparent 0%, rgba(10, 25, 18, 0.45) 30%, rgba(10, 25, 18, 0.9) 100%);



  backdrop-filter: blur(4px);



  -webkit-backdrop-filter: blur(4px);



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 16px;



  border-bottom-left-radius: 22px;



  border-bottom-right-radius: 22px;



}







.galeri-overlay-left {



  display: flex;



  align-items: center;



  gap: 14px;



}







.galeri-squircle-icon {



  width: 44px;



  height: 44px;



  border-radius: 12px;



  background: #22c55e;



  display: flex;



  align-items: center;



  justify-content: center;



  flex-shrink: 0;



  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);



}







.galeri-overlay-title {



  font-size: 1.02rem;



  font-weight: 700;



  color: #ffffff;



  margin: 0 0 3px 0;



  line-height: 1.25;



}







.galeri-overlay-sub {



  font-size: 0.84rem;



  color: #e2e8f0;



  margin: 0;



}







.galeri-featured-nav {



  display: flex;



  align-items: center;



  gap: 8px;



  flex-shrink: 0;



}







.galeri-arrow-btn {



  width: 36px;



  height: 36px;



  border-radius: 50%;



  background: #ffffff;



  color: #0f172a;



  border: 1px solid rgba(255, 255, 255, 0.9);



  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);



}







.galeri-arrow-btn:hover {



  background: #16a34a;



  color: #ffffff;



  border-color: #16a34a;



  transform: scale(1.08);



}







/* Right: 3x2 Subgrid */



.galeri-subgrid {



  display: grid;



  grid-template-columns: repeat(3, 1fr);



  grid-template-rows: repeat(2, 1fr);



  gap: 14px;



  height: 100%;



}







.galeri-card-item {



  position: relative;



  border-radius: 18px;



  overflow: hidden;



  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);



  cursor: pointer;



  background: #ffffff;



  border: 1px solid rgba(226, 232, 240, 0.8);



  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);



}







.galeri-card-item:hover {



  transform: translateY(-4px) scale(1.02);



  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.22);



  border-color: #86efac;



}







.galeri-card-item.fade-dim {



  opacity: 0.25;



  transform: scale(0.96);



  filter: grayscale(80%);



}







.galeri-thumb-wrapper {



  position: relative;



  width: 100%;



  height: 100%;



  min-height: 190px;



  overflow: hidden;



}







.galeri-thumb-wrapper img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform 0.45s ease;



}







.galeri-card-item:hover .galeri-thumb-wrapper img {



  transform: scale(1.08);



}







.galeri-hover-overlay {



  position: absolute;



  inset: 0;



  background: rgba(15, 23, 42, 0.35);



  opacity: 0;



  transition: opacity 0.3s ease;



  display: flex;



  align-items: center;



  justify-content: center;



}







.galeri-card-item:hover .galeri-hover-overlay {



  opacity: 1;



}







.galeri-zoom-badge {



  width: 40px;



  height: 40px;



  border-radius: 50%;



  background: rgba(255, 255, 255, 0.92);



  color: #16a34a;



  display: flex;



  align-items: center;



  justify-content: center;



  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);



  transform: scale(0.85);



  transition: transform 0.3s ease;



}







.galeri-card-item:hover .galeri-zoom-badge {



  transform: scale(1);



}







/* 3. Bottom Controls, Pagination, and Corner Decors matching Mockup */



.galeri-bottom-area {



  display: flex;



  align-items: flex-end;



  justify-content: space-between;



  position: relative;



  margin-top: 20px;



  min-height: 110px;



}







.galeri-decor-left {



  position: relative;



  z-index: 2;



  width: 175px;



  pointer-events: none;



}







.galeri-decor-left img {



  width: 100%;



  height: auto;



  transform: rotate(-3deg);



  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.12));



}







.galeri-center-controls {



  display: flex;



  flex-direction: column;



  align-items: center;



  gap: 14px;



  z-index: 3;



  margin: 0 auto;



}







.galeri-pagination-dots {



  display: flex;



  align-items: center;



  gap: 8px;



}







.galeri-dot-btn {



  width: 8px;



  height: 8px;



  border-radius: 9999px;



  background: #cbd5e1;



  border: none;



  padding: 0;



  cursor: pointer;



  transition: all 0.3s ease;



}







.galeri-dot-btn.active {



  width: 26px;



  background: #16a34a;



  border-radius: 9999px;



}







.btn-semua-galeri {



  padding: 12px 28px;



  font-size: 0.95rem;



  font-weight: 700;



  gap: 10px;



  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);



  cursor: pointer;



}







.galeri-decor-right {



  position: relative;



  z-index: 2;



  width: 195px;



  pointer-events: none;



}







.galeri-decor-right img {



  width: 100%;



  height: auto;



  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.15));



}







/* ==========================================================================



   BERITA & INFORMASI TERBARU (STANDALONE SECTION)



   ========================================================================== */



.news-standalone-section {



  position: relative;



  padding: 75px 0 85px 0;



  background: #ffffff;



  border-top: 1px solid rgba(226, 232, 240, 0.7);



}







.news-header-row {



  display: flex;



  align-items: flex-end;



  justify-content: space-between;



  gap: 24px;



  margin-bottom: 36px;



  flex-wrap: wrap;



}







.news-header-left {



  max-width: 640px;



}







.badge-news-top {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  padding: 6px 16px;



  background: #eaf8ef;



  border: 1.5px solid #bbf7d0;



  border-radius: 9999px;



  color: #15803d;



  font-size: 0.86rem;



  font-weight: 700;



  margin-bottom: 10px;



}







.news-main-title {



  font-size: clamp(1.8rem, 3.2vw, 2.4rem);



  font-weight: 800;



  color: #0f291e;



  line-height: 1.25;



  margin: 0 0 10px 0;



}







.highlight-berita {



  position: relative;



  display: inline-block;



  color: #16a34a;



}







.news-brush-line {



  position: absolute;



  bottom: -6px;



  left: 0;



  width: 100%;



  height: 10px;



  pointer-events: none;



}







.news-main-subtitle {



  font-size: 0.98rem;



  color: #4b6356;



  margin: 0;



  line-height: 1.6;



}







.news-cards-grid {



  display: grid;



  grid-template-columns: repeat(3, 1fr);



  gap: 24px;



}







.news-card-box {



  background: #ffffff;



  border-radius: 20px;



  overflow: hidden;



  border: 1px solid rgba(226, 232, 240, 0.85);



  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);



  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);



  display: flex;



  flex-direction: column;



}







.news-card-box:hover {



  transform: translateY(-6px);



  box-shadow: 0 16px 32px rgba(22, 163, 74, 0.16);



  border-color: #86efac;



}







.news-thumb-wrapper {



  position: relative;



  width: 100%;



  height: 200px;



  overflow: hidden;



  background: #f1f5f9;



}







.news-thumb-wrapper img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform 0.45s ease;



}







.news-card-box:hover .news-thumb-wrapper img {



  transform: scale(1.06);



}







.news-category-badge {



  position: absolute;



  top: 14px;



  left: 14px;



  padding: 5px 12px;



  background: rgba(22, 163, 74, 0.9);



  color: #ffffff;



  font-size: 0.76rem;



  font-weight: 700;



  border-radius: 9999px;



  backdrop-filter: blur(4px);



  letter-spacing: 0.3px;



}







.news-card-inner {



  padding: 22px;



  display: flex;



  flex-direction: column;



  flex: 1;



}







.news-meta-info {



  display: flex;



  align-items: center;



  gap: 6px;



  font-size: 0.82rem;



  color: #64748b;



  margin-bottom: 10px;



  font-weight: 500;



}







.news-item-heading {



  font-size: 1.12rem;



  font-weight: 700;



  color: #0f172a;



  line-height: 1.4;



  margin: 0 0 10px 0;



  transition: color 0.2s ease;



}







.news-card-box:hover .news-item-heading {



  color: #16a34a;



}







.news-item-snippet {



  font-size: 0.9rem;



  color: #475569;



  line-height: 1.6;



  margin: 0 0 18px 0;



  flex: 1;



}







.news-detail-btn {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  background: none;



  border: none;



  padding: 0;



  color: #16a34a;



  font-size: 0.9rem;



  font-weight: 700;



  cursor: pointer;



  transition: gap 0.2s ease;



}







.news-detail-btn:hover {



  gap: 10px;



  color: #15803d;



}







/* ==========================================================================



   RESPONSIVE DESIGN FOR GALLERY & NEWS



   ========================================================================== */



@media (max-width: 992px) {



  .galeri-bento-grid {



    grid-template-columns: 1fr;



    gap: 18px;



  }







  .galeri-featured-card {



    min-height: 340px;



    height: 360px;



  }







  .galeri-subgrid {



    grid-template-columns: repeat(3, 1fr);



  }







  .news-cards-grid {



    grid-template-columns: repeat(2, 1fr);



  }



}







@media (max-width: 768px) {



  .gallery-section {



    padding: 60px 0 50px 0;



  }







  .galeri-subgrid {



    grid-template-columns: repeat(2, 1fr);



  }







  .galeri-thumb-wrapper {



    min-height: 160px;



  }







  .galeri-bottom-area {



    margin-top: 18px;



  }







  .galeri-decor-left,



  .galeri-decor-right {



    width: 120px;



  }







  .news-cards-grid {



    grid-template-columns: 1fr;



  }



}







@media (max-width: 540px) {



  .galeri-filter-tabs {



    justify-content: flex-start;



    overflow-x: auto;



    flex-wrap: nowrap;



    padding-bottom: 10px;



    width: 100%;



    -webkit-overflow-scrolling: touch;



    scrollbar-width: none;



  }



  .galeri-filter-tabs::-webkit-scrollbar {



    display: none;



  }







  .galeri-tab-btn {



    white-space: nowrap;



    flex-shrink: 0;



    padding: 8px 16px;



    font-size: 0.85rem;



  }







  .galeri-featured-card {



    min-height: 280px;



    height: 300px;



  }







  .galeri-featured-overlay {



    padding: 12px 14px;



  }







  .galeri-overlay-title {



    font-size: 0.92rem;



  }







  .galeri-overlay-sub {



    font-size: 0.78rem;



  }







  .galeri-decor-left,



  .galeri-decor-right {



    display: none;



  }







  .galeri-center-controls {



    width: 100%;



  }







  .btn-semua-galeri {



    width: 100%;



    justify-content: center;



  }



}







/* Leaf decor and bottom corner waves for gallery section */



.galeri-leaf-decor {



  position: absolute;



  pointer-events: none;



  z-index: 1;



}







.galeri-leaf-decor.leaf-top-left {



  top: 0;



  left: 0;



}







.galeri-leaf-decor.leaf-top-right {



  top: 0;



  right: 0;



}







.galeri-bottom-wave-left {



  position: absolute;



  bottom: 0;



  left: 0;



  pointer-events: none;



  z-index: 1;



}







.galeri-bottom-wave-right {



  position: absolute;



  bottom: 0;



  right: 0;



  pointer-events: none;



  z-index: 1;



}







@media (max-width: 768px) {



  .galeri-leaf-decor,



  .galeri-bottom-wave-left,



  .galeri-bottom-wave-right {



    opacity: 0.5;



  }



}











/* ==========================================================================



   ARTIKEL TERBARU DARI SEKOLAH KAMI (EXACT MATCH TO MOCKUP)



   ========================================================================== */



.artikel-section {



  position: relative;



  padding: 85px 0 70px 0;



  background: linear-gradient(180deg, #ffffff 0%, #f7fcf8 50%, #ffffff 100%);



  overflow: hidden;



  border-top: 1px solid rgba(226, 232, 240, 0.7);



}







.artikel-bg-shape.top-left {



  position: absolute;



  top: 0;



  left: 0;



  width: 420px;



  height: 350px;



  background: radial-gradient(circle at 10% 20%, rgba(134, 239, 172, 0.22) 0%, transparent 70%);



  pointer-events: none;



  z-index: 1;



}







.artikel-bg-shape.top-right {



  position: absolute;



  top: 0;



  right: 0;



  width: 440px;



  height: 360px;



  background: radial-gradient(circle at 90% 20%, rgba(134, 239, 172, 0.2) 0%, transparent 70%);



  pointer-events: none;



  z-index: 1;



}







.artikel-section .container {



  position: relative;



  z-index: 2;



}







/* 1. Header Row (Left: Badge, Title, Subtitle; Right: Filter Tabs) */



.artikel-header-row {



  display: flex;



  align-items: flex-end;



  justify-content: space-between;



  gap: 24px;



  margin-bottom: 34px;



  flex-wrap: wrap;



}







.artikel-header-left {



  max-width: 820px;



}







.badge-artikel-top {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  padding: 6px 16px;



  background: #eaf8ef;



  border: 1.5px solid #bbf7d0;



  border-radius: 9999px;



  color: #15803d;



  font-size: 0.88rem;



  font-weight: 700;



  margin-bottom: 12px;



}







.artikel-main-title {



  font-size: clamp(1.75rem, 2.5vw, 2.3rem);



  font-weight: 800;



  color: #0f291e;



  line-height: 1.25;



  margin: 0 0 12px 0;



  letter-spacing: -0.02em;



  white-space: nowrap;



}







@media (max-width: 768px) {



  .artikel-main-title {



    white-space: normal;



    font-size: clamp(1.4rem, 4.5vw, 1.85rem);



  }



}







.artikel-main-title .highlight-kami {



  position: relative;



  display: inline-block;



  color: #16a34a;



  font-family: "Playfair Display", Georgia, serif;



  font-style: italic;



  font-weight: 700;



  margin-left: 4px;



}







.artikel-main-title .sparkle-rays {



  position: absolute;



  top: -14px;



  right: -20px;



  width: 26px;



  height: 26px;



  pointer-events: none;



}







.artikel-brush-line {



  position: absolute;



  bottom: -7px;



  left: 0;



  width: 100%;



  height: 14px;



  pointer-events: none;



}







.artikel-subtitle {



  font-size: 1rem;



  color: #4b6356;



  line-height: 1.6;



  margin: 0;



}







/* Right Filter Tabs Bar */



.artikel-filter-tabs {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  flex-wrap: wrap;



  justify-content: flex-end;



}







.artikel-tab-btn {



  display: inline-flex;



  align-items: center;



  gap: 7px;



  padding: 8px 18px;



  border-radius: 9999px;



  font-size: 0.88rem;



  font-weight: 600;



  border: 1px solid #d1fae5;



  background: #ffffff;



  color: #1e3a2f;



  cursor: pointer;



  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);



  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);



}







.artikel-tab-btn:hover {



  background: #f0fdf4;



  border-color: #86efac;



  color: #15803d;



  transform: translateY(-2px);



}







.artikel-tab-btn.active {



  background: #16a34a;



  border-color: #16a34a;



  color: #ffffff;



  font-weight: 700;



  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);



  transform: translateY(-1px);



}







/* 2. Main Bento Grid Layout */



.artikel-main-grid {



  display: grid;



  grid-template-columns: 1fr 1.05fr;



  gap: 24px;



  align-items: stretch;



  margin-bottom: 34px;



}







/* Left: Big Featured Card ("Artikel Pilihan") */



.artikel-featured-card {



  background: #ffffff;



  border-radius: 24px;



  overflow: hidden;



  border: 1px solid rgba(226, 232, 240, 0.9);



  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);



  display: flex;



  flex-direction: column;



  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);



  cursor: pointer;



}







.artikel-featured-card:hover {



  transform: translateY(-4px);



  box-shadow: 0 16px 36px rgba(22, 163, 74, 0.16);



  border-color: #86efac;



}







.artikel-feat-visual {



  position: relative;



  width: 100%;



  height: 270px;



  overflow: hidden;



  background: #f1f5f9;



}







.artikel-feat-visual img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform 0.45s ease;



}







.artikel-featured-card:hover .artikel-feat-visual img {



  transform: scale(1.05);



}







.artikel-featured-badge {



  position: absolute;



  top: 16px;



  left: 16px;



  display: inline-flex;



  align-items: center;



  gap: 6px;



  padding: 6px 14px;



  background: rgba(22, 163, 74, 0.92);



  backdrop-filter: blur(4px);



  -webkit-backdrop-filter: blur(4px);



  color: #ffffff;



  font-size: 0.8rem;



  font-weight: 700;



  border-radius: 9999px;



  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);



  z-index: 2;



}







.artikel-wave-mask {



  position: absolute;



  bottom: -1px;



  left: 0;



  width: 100%;



  height: 32px;



  z-index: 2;



  pointer-events: none;



}







.artikel-feat-body {



  padding: 24px 26px 26px 26px;



  display: flex;



  flex-direction: column;



  flex: 1;



  position: relative;



}







.artikel-meta-row {



  display: flex;



  align-items: center;



  gap: 8px;



  font-size: 0.82rem;



  color: #64748b;



  margin-bottom: 12px;



}







.artikel-meta-date {



  display: inline-flex;



  align-items: center;



  gap: 5px;



  font-weight: 500;



}







.artikel-meta-vsep {



  color: #cbd5e1;



  font-weight: 300;



}







.artikel-cat-tag {



  display: inline-flex;



  align-items: center;



  gap: 5px;



  padding: 3px 10px;



  border-radius: 9999px;



  font-size: 0.76rem;



  font-weight: 700;



  background: #eaf8ef;



  color: #15803d;



  border: 1px solid #bbf7d0;



}







.artikel-cat-tag.tag-edukasi {



  background: #eff6ff;



  color: #2563eb;



  border-color: #bfdbfe;



}







.artikel-cat-tag.tag-lingkungan {



  background: #ecfdf5;



  color: #059669;



  border-color: #a7f3d0;



}







.artikel-feat-title {



  font-size: 1.25rem;



  font-weight: 800;



  color: #0f291e;



  line-height: 1.38;



  margin: 0 0 10px 0;



  transition: color 0.2s ease;



}







.artikel-featured-card:hover .artikel-feat-title {



  color: #16a34a;



}







.artikel-feat-excerpt {



  font-size: 0.9rem;



  color: #4b6356;



  line-height: 1.6;



  margin: 0 0 22px 0;



  flex: 1;



}







.artikel-feat-footer {



  display: flex;



  align-items: center;



  justify-content: space-between;



  position: relative;



  margin-top: auto;



}







.btn-artikel-read {



  padding: 10px 22px;



  font-size: 0.88rem;



  font-weight: 700;



  gap: 8px;



  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.3);



  cursor: pointer;



}







.artikel-feat-watermark {



  position: absolute;



  right: -4px;



  bottom: -10px;



  opacity: 0.38;



  pointer-events: none;



  transition: opacity 0.3s ease, transform 0.3s ease;



}







.artikel-featured-card:hover .artikel-feat-watermark {



  opacity: 0.65;



  transform: scale(1.08) rotate(2deg);



}







/* Right: 3 Horizontal List Cards */



.artikel-list-column {



  display: flex;



  flex-direction: column;



  gap: 16px;



  justify-content: space-between;



}







.artikel-list-item {



  background: #ffffff;



  border-radius: 20px;



  overflow: hidden;



  border: 1px solid rgba(226, 232, 240, 0.9);



  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);



  padding: 14px 18px 14px 14px;



  display: flex;



  align-items: center;



  gap: 16px;



  cursor: pointer;



  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);



}







.artikel-list-item:hover {



  transform: translateY(-3px);



  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.15);



  border-color: #86efac;



}







.artikel-list-item.fade-dim {



  opacity: 0.25;



  transform: scale(0.97);



  filter: grayscale(70%);



}







.artikel-item-thumb {



  width: 145px;



  height: 108px;



  border-radius: 14px;



  overflow: hidden;



  flex-shrink: 0;



  background: #f1f5f9;



}







.artikel-item-thumb img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform 0.4s ease;



}







.artikel-list-item:hover .artikel-item-thumb img {



  transform: scale(1.06);



}







.artikel-item-content {



  flex: 1;



  min-width: 0;



}







.artikel-item-title {



  font-size: 0.98rem;



  font-weight: 700;



  color: #0f291e;



  line-height: 1.35;



  margin: 0 0 5px 0;



  transition: color 0.2s ease;



  display: -webkit-box;



  -webkit-line-clamp: 2;



  -webkit-box-orient: vertical;



  overflow: hidden;



}







.artikel-list-item:hover .artikel-item-title {



  color: #16a34a;



}







.artikel-item-excerpt {



  font-size: 0.83rem;



  color: #64748b;



  line-height: 1.5;



  margin: 0;



  display: -webkit-box;



  -webkit-line-clamp: 2;



  -webkit-box-orient: vertical;



  overflow: hidden;



}







.artikel-item-action {



  flex-shrink: 0;



  display: flex;



  align-items: center;



  justify-content: center;



}







.artikel-circle-arrow {



  width: 36px;



  height: 36px;



  border-radius: 50%;



  background: #eaf8ef;



  color: #16a34a;



  border: 1px solid #bbf7d0;



  display: flex;



  align-items: center;



  justify-content: center;



  transition: all 0.25s ease;



}







.artikel-list-item:hover .artikel-circle-arrow {



  background: #16a34a;



  color: #ffffff;



  border-color: #16a34a;



  transform: translateX(3px);



}







/* 3. Bottom Centered Action with Flanking Horizontal Lines */



.artikel-bottom-action-wrapper {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 20px;



  width: 100%;



  margin-top: 14px;



}







.artikel-action-line {



  flex: 1;



  height: 1.5px;



  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.45));



}







.artikel-action-line.right {



  background: linear-gradient(90deg, rgba(34, 197, 94, 0.45), transparent);



}







.btn-semua-artikel {



  padding: 12px 28px;



  font-size: 0.94rem;



  font-weight: 700;



  gap: 10px;



  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.35);



  flex-shrink: 0;



  cursor: pointer;



}







/* Responsive Design for Artikel */



@media (max-width: 992px) {



  .artikel-header-row {



    flex-direction: column;



    align-items: flex-start;



    gap: 18px;



    width: 100%;



  }







  .artikel-header-left {



    width: 100%;



    max-width: 100%;



  }







  .artikel-header-right {



    width: 100%;



    max-width: 100%;



    min-width: 0;



  }







  .artikel-filter-tabs {



    display: flex;



    justify-content: flex-start;



    flex-wrap: nowrap;



    overflow-x: auto;



    -webkit-overflow-scrolling: touch;



    width: 100%;



    max-width: 100%;



    padding: 4px 0 10px 0;



    scrollbar-width: none;



  }



  .artikel-filter-tabs::-webkit-scrollbar {



    display: none;



  }







  .artikel-main-grid {



    grid-template-columns: 1fr;



    gap: 22px;



  }







  .artikel-feat-visual {



    height: 250px;



  }



}







@media (max-width: 600px) {



  .artikel-header-right {



    width: 100%;



    max-width: 100%;



    min-width: 0;



  }



  .artikel-filter-tabs {



    flex-wrap: nowrap;



    overflow-x: auto;



    width: 100%;



    max-width: 100%;



    padding-bottom: 8px;



    -webkit-overflow-scrolling: touch;



    scrollbar-width: none;



  }



  .artikel-filter-tabs::-webkit-scrollbar {



    display: none;



  }







  .artikel-tab-btn {



    white-space: nowrap;



    flex-shrink: 0;



    padding: 7px 15px;



    font-size: 0.84rem;



  }







  .artikel-list-item {



    flex-direction: column;



    align-items: flex-start;



    gap: 12px;



  }







  .artikel-item-thumb {



    width: 100%;



    height: 180px;



  }







  .artikel-item-action {



    align-self: flex-end;



    margin-top: -30px;



    position: relative;



    z-index: 2;



  }







  .artikel-bottom-action-wrapper {



    flex-direction: column;



    gap: 0;



  }







  .artikel-action-line {



    display: none;



  }







  .btn-semua-artikel {



    width: 100%;



    justify-content: center;



  }



}



















/* ==========================================================================



   PPDB 2026 FULL-PAGE LAYOUT & SECTIONS (EXACT MATCH TO MOCKUP)



   ========================================================================== */



.ppdb-page-body {



  background-color: #ffffff;



  color: var(--text-primary);



  overflow-x: hidden;



}







/* PPDB Navbar styles synchronized */







/* 1. Hero Section */



.ppdb-hero-section {



  padding-top: 110px;



  padding-bottom: 20px;



  position: relative;



  overflow: hidden;



  background: #ffffff;



}







.ppdb-hero-container {



  max-width: 1140px;



  margin: 0 auto;



  padding: 0 24px;



}







.ppdb-hero-layout {



  display: grid;



  grid-template-columns: 1fr 1.05fr;



  align-items: center;



  gap: 36px;



  margin-bottom: 28px;



}







.ppdb-hero-content {



  display: flex;



  flex-direction: column;



  align-items: flex-start;



  z-index: 2;



}







.badge-ppdb-pill {



  display: inline-flex;



  align-items: center;



  gap: 7px;



  padding: 5px 14px;



  background: #eafaf1;



  border: 1.5px solid #bbf7d0;



  color: #16a34a;



  font-size: 0.8rem;



  font-weight: 700;



  border-radius: 9999px;



  margin-bottom: 14px;



}







.ppdb-page-title {



  font-size: 2.75rem;



  font-weight: 800;



  line-height: 1.15;



  color: #0f172a;



  margin: 0 0 12px 0;



  letter-spacing: -0.025em;



}







.ppdb-page-title .highlight-green-text {



  color: #16a34a;



}







.ppdb-page-subtitle {



  font-size: 1.65rem;



  font-weight: 700;



  color: #1e293b;



  display: block;



  letter-spacing: -0.01em;



}







.ppdb-page-description {



  font-size: 1.02rem;



  line-height: 1.6;



  color: #64748b;



  margin: 0 0 24px 0;



  max-width: 480px;



}







.ppdb-hero-btn-group {



  display: flex;



  align-items: center;



  gap: 14px;



  flex-wrap: wrap;



}







.btn-ppdb-daftar-trigger {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  padding: 12px 26px;



  background: linear-gradient(135deg, #22c55e, #16a34a);



  color: #ffffff;



  font-size: 0.95rem;



  font-weight: 700;



  border-radius: 9999px;



  border: none;



  cursor: pointer;



  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);



  text-decoration: none;



  transition: all 0.25s ease;



}







.btn-ppdb-daftar-trigger:hover {



  transform: translateY(-2px);



  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.45);



  color: #ffffff;



}







.btn-ppdb-download-trigger {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  padding: 11px 22px;



  background: #ffffff;



  color: #334155;



  font-size: 0.95rem;



  font-weight: 600;



  border-radius: 9999px;



  border: 1.5px solid #e2e8f0;



  cursor: pointer;



  transition: all 0.25s ease;



}







.btn-ppdb-download-trigger:hover {



  background: #f8fafc;



  border-color: #cbd5e1;



  color: #0f172a;



}







/* Right Hero Visual with Organic Waves */



.ppdb-hero-visual {



  position: relative;



  z-index: 1;



  display: flex;



  justify-content: flex-end;



}







.ppdb-hero-banner-frame {



  position: relative;



  width: 100%;



  max-width: 600px;



  height: 330px;



  border-radius: 26px;



  overflow: hidden;



  box-shadow: 0 15px 35px -8px rgba(0, 0, 0, 0.08);



}







.ppdb-banner-img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  object-position: center 25%;



  display: block;



}







.ppdb-banner-waves {



  position: absolute;



  bottom: 0;



  right: 0;



  left: 0;



  height: 100px;



  pointer-events: none;



}







.ppdb-banner-waves svg {



  width: 100%;



  height: 100%;



  display: block;



}







/* 2. Floating Metrics Strip */



.ppdb-metrics-strip {



  display: grid;



  grid-template-columns: repeat(4, 1fr);



  gap: 16px;



  background: #ffffff;



  border: 1.5px solid #edf2f7;



  border-radius: 9999px;



  padding: 14px 28px;



  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.04);



}







.ppdb-metric-item {



  display: flex;



  align-items: center;



  gap: 12px;



}







.ppdb-metric-icon {



  width: 44px;



  height: 44px;



  flex-shrink: 0;



  background: #eafaf1;



  border-radius: 12px;



  display: flex;



  align-items: center;



  justify-content: center;



}







.ppdb-metric-data {



  display: flex;



  flex-direction: column;



}







.ppdb-metric-val {



  font-size: 1.08rem;



  font-weight: 800;



  color: #0f172a;



  line-height: 1.2;



}







.ppdb-metric-lbl {



  font-size: 0.75rem;



  font-weight: 500;



  color: #64748b;



  line-height: 1.3;



}







/* 3. PPDB Main Panels Content Section */



.ppdb-main-section {



  position: relative;



  padding: 24px 0 0 0;



  overflow: hidden;



  background: #ffffff;



}







.ppdb-panels-container {



  display: flex;



  flex-direction: column;



  gap: 20px;



  max-width: 1140px;



  margin: 0 auto;



  padding: 0 24px;



  position: relative;



  z-index: 2;



}







.ppdb-dual-grid {



  display: grid;



  grid-template-columns: 1.85fr 1fr;



  gap: 20px;



  align-items: stretch;



}







.ppdb-dual-grid.grid-50-50 {



  grid-template-columns: 1fr 1fr;



}







.ppdb-dual-grid.grid-60-40 {



  grid-template-columns: 1.6fr 1fr;



}







.ppdb-panel-card {



  background: #ffffff;



  border: 1.5px solid #edf2f7;



  border-radius: 22px;



  padding: 22px 26px;



  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);



  display: flex;



  flex-direction: column;



}







.ppdb-panel-hdr {



  display: flex;



  align-items: center;



  gap: 8px;



  margin-bottom: 16px;



}







.ppdb-panel-hdr h3 {



  font-size: 1.05rem;



  font-weight: 800;



  color: #0f172a;



  margin: 0;



}







/* Gelombang Pendaftaran Cards */



.ppdb-gelombang-grid {



  display: grid;



  grid-template-columns: repeat(3, 1fr);



  gap: 12px;



  flex: 1;



}







.ppdb-wave-card {



  position: relative;



  background: #ffffff;



  border: 1.5px solid #edf2f7;



  border-radius: 16px;



  padding: 16px 14px;



  display: flex;



  flex-direction: column;



  justify-content: space-between;



  transition: all 0.25s ease;



}







.ppdb-wave-card.active {



  background: #f0fdf4;



  border-color: #86efac;



  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.12);



}







.ppdb-wave-badge-float {



  position: absolute;



  top: -10px;



  left: 50%;



  transform: translateX(-50%);



  background: #16a34a;



  color: #ffffff;



  font-size: 0.65rem;



  font-weight: 700;



  padding: 2px 9px;



  border-radius: 9999px;



  white-space: nowrap;



  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);



  letter-spacing: 0.02em;



}







.ppdb-wave-top {



  display: flex;



  align-items: center;



  gap: 6px;



  margin-bottom: 6px;



}







.ppdb-wave-icon {



  color: #64748b;



  display: flex;



}







.ppdb-wave-icon.active {



  color: #16a34a;



}







.ppdb-wave-title {



  font-size: 0.92rem;



  font-weight: 800;



  color: #0f172a;



  margin: 0;



}







.ppdb-wave-date {



  font-size: 0.72rem;



  color: #64748b;



  display: flex;



  align-items: center;



  gap: 4px;



  margin: 0 0 14px 0;



}







.ppdb-wave-footer {



  display: flex;



  align-items: center;



  justify-content: space-between;



  margin-top: auto;



}







.ppdb-wave-quota-info {



  display: flex;



  flex-direction: column;



}







.quota-label {



  font-size: 0.68rem;



  color: #64748b;



}







.quota-count {



  font-size: 0.78rem;



  color: #334155;



}







.quota-count strong {



  font-size: 0.9rem;



  color: #0f172a;



  font-weight: 800;



}







/* Donut Meters */



.ppdb-donut-meter {



  width: 44px;



  height: 44px;



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 0.72rem;



  font-weight: 800;



  color: #0f172a;



  position: relative;



}







.meter-69 {



  background: radial-gradient(closest-side, white 68%, transparent 69% 100%),



              conic-gradient(#16a34a 69%, #e2e8f0 0);



  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);



}







.meter-100 {



  background: radial-gradient(closest-side, white 68%, transparent 69% 100%),



              conic-gradient(#16a34a 100%, #e2e8f0 0);



  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);



}







/* Kuota Summary Panel */



.ppdb-kuota-summary-card .ppdb-big-number {



  margin-bottom: 16px;



  display: flex;



  align-items: baseline;



  gap: 6px;



}







.big-num-val {



  font-size: 2.2rem;



  font-weight: 800;



  color: #16a34a;



  line-height: 1;



  letter-spacing: -0.02em;



}







.big-num-unit {



  font-size: 1.15rem;



  font-weight: 700;



  color: #0f172a;



}







.ppdb-peminatan-list {



  display: flex;



  flex-direction: column;



  gap: 12px;



}







.ppdb-peminatan-row {



  display: flex;



  align-items: center;



  justify-content: space-between;



  font-size: 0.86rem;



  padding-bottom: 8px;



  border-bottom: 1px dashed #f1f5f9;



}







.ppdb-peminatan-row:last-child {



  border-bottom: none;



  padding-bottom: 0;



}







.pem-left {



  display: flex;



  align-items: center;



  gap: 8px;



  color: #334155;



  font-weight: 600;



}







.pem-icon-wrap {



  color: #16a34a;



  display: flex;



}







.pem-count {



  font-weight: 800;



  color: #0f172a;



}







/* 4. Timeline Track (Jadwal Penting) */



.ppdb-timeline-track {



  display: flex;



  flex-direction: column;



  gap: 8px;



}







.timeline-row {



  display: flex;



  align-items: center;



  padding: 8px 12px;



  border-radius: 12px;



  font-size: 0.82rem;



  gap: 12px;



  color: #475569;



  transition: all 0.2s ease;



}







.timeline-row.active {



  background: #f0fdf4;



  border: 1.5px solid #86efac;



  color: #0f172a;



  font-weight: 700;



}







.timeline-node {



  width: 18px;



  height: 18px;



  border-radius: 50%;



  border: 2px solid #cbd5e1;



  background: #ffffff;



  display: flex;



  align-items: center;



  justify-content: center;



  flex-shrink: 0;



}







.timeline-node.active {



  background: #16a34a;



  border-color: #16a34a;



}







.timeline-date {



  min-width: 125px;



  font-weight: 700;



  color: inherit;



}







.timeline-desc {



  font-weight: 600;



  color: inherit;



  flex: 1;



}







/* 5. Persyaratan Pendaftaran (Refined & Neatly Aligned) */



.ppdb-req-body {



  display: flex;



  align-items: flex-start;



  justify-content: space-between;



  gap: 14px;



  margin-top: 2px;



}







ul.ppdb-req-list {



  list-style: none;



  padding: 0;



  margin: 0;



  display: flex;



  flex-direction: column;



  gap: 13px;



  flex: 1;



  min-width: 0;



}







ul.ppdb-req-list li {



  display: flex;



  align-items: center;



  gap: 10px;



  font-size: 0.82rem;



  color: #334155;



  line-height: 1.35;



  white-space: nowrap;



}







.req-check-badge {



  width: 18px;



  height: 18px;



  border-radius: 50%;



  background: #dcfce7;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  flex-shrink: 0;



}







.req-check-badge svg {



  color: #16a34a;



}







.req-item-text {



  flex: 1;



  color: #334155;



}







.req-item-text strong {



  color: #0f172a;



  font-weight: 700;



}







.ppdb-req-graphic {



  width: 165px;



  flex-shrink: 0;



  display: flex;



  align-items: center;



  justify-content: center;



  position: relative;



  margin-top: -6px;



}







.folder-leaf-accent {



  position: absolute;



  top: -8px;



  right: -6px;



  z-index: 0;



  pointer-events: none;



  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06));



}







.ppdb-req-graphic img {



  width: 100%;



  height: auto;



  max-height: 155px;



  object-fit: contain;



  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.09));



  position: relative;



  z-index: 1;



}







/* 6. Alur Pendaftaran */



.ppdb-steps-row {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 6px;



  padding: 10px 4px;



}







.ppdb-step-item {



  display: flex;



  flex-direction: column;



  align-items: center;



  text-align: center;



  gap: 8px;



  flex: 1;



}







.ppdb-step-item .step-icon-circle {



  width: 48px;



  height: 48px;



  border-radius: 50%;



  background: #ffffff;



  border: 2px solid #86efac;



  display: flex;



  align-items: center;



  justify-content: center;



  color: #16a34a;



  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.12);



  transition: transform 0.2s ease;



}







.ppdb-step-item .step-icon-circle:hover {



  transform: translateY(-2px);



}







.step-lbl {



  font-size: 0.74rem;



  font-weight: 700;



  color: #1e293b;



  max-width: 85px;



  line-height: 1.3;



}







.step-arrow {



  color: #94a3b8;



  font-size: 1.1rem;



  display: flex;



  align-items: center;



  justify-content: center;



  margin-bottom: 22px;



  flex-shrink: 0;



}







/* 7. Unduh Informasi */



.ppdb-download-list {



  display: flex;



  flex-direction: column;



  gap: 10px;



}







.download-item-card {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 12px;



  padding: 10px 14px;



  background: #f8fafc;



  border: 1.5px solid #edf2f7;



  border-radius: 14px;



  transition: border-color 0.2s ease;



}







.download-item-card:hover {



  border-color: #cbd5e1;



}







.pdf-tag-icon {



  background: #fee2e2;



  color: #ef4444;



  font-size: 0.68rem;



  font-weight: 800;



  border-radius: 6px;



  padding: 4px 6px;



}







.download-meta {



  display: flex;



  flex-direction: column;



  flex: 1;



}







.dl-title {



  font-size: 0.82rem;



  font-weight: 700;



  color: #0f172a;



}







.dl-size {



  font-size: 0.7rem;



  color: #64748b;



}







.btn-dl-action {



  display: inline-flex;



  align-items: center;



  gap: 5px;



  padding: 6px 14px;



  background: #ffffff;



  border: 1.5px solid #86efac;



  color: #16a34a;



  font-size: 0.75rem;



  font-weight: 700;



  border-radius: 9999px;



  cursor: pointer;



  transition: all 0.2s ease;



}







.btn-dl-action:hover {



  background: #16a34a;



  color: #ffffff;



}







/* 8. Bottom CTA Button & Flowing Waves */



.ppdb-bottom-cta-wrap {



  display: flex;



  align-items: center;



  justify-content: center;



  position: relative;



  padding: 32px 0 16px 0;



}







.btn-ppdb-bottom-cta {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 10px;



  padding: 14px 44px;



  background: linear-gradient(135deg, #22c55e, #16a34a);



  color: #ffffff;



  font-size: 1.05rem;



  font-weight: 800;



  border-radius: 9999px;



  border: none;



  cursor: pointer;



  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.4);



  text-decoration: none;



  transition: all 0.25s ease;



  position: relative;



  z-index: 2;



}







.btn-ppdb-bottom-cta:hover {



  transform: translateY(-2px);



  box-shadow: 0 12px 30px rgba(22, 163, 74, 0.5);



  color: #ffffff;



}







.cta-click-cursor {



  position: absolute;



  margin-left: 235px;



  margin-top: 14px;



  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));



  transform: rotate(-15deg);



  pointer-events: none;



  z-index: 3;



}







.ppdb-page-bottom-waves {



  width: 100%;



  height: 130px;



  overflow: hidden;



  pointer-events: none;



  margin-top: 10px;



  margin-bottom: 0;



  line-height: 0;



  display: block;



}







.ppdb-page-bottom-waves svg {



  width: 100%;



  height: 100%;



  display: block;



  vertical-align: bottom;



}







@media (max-width: 768px) {



  .ppdb-page-bottom-waves {



    height: 90px;



    margin-top: 5px;



  }



}







/* 9. Registration Form Section */



.ppdb-form-section {



  padding: 50px 0 70px 0;



  background-color: #f8fafc;



  scroll-margin-top: 95px;



  border-top: 1px solid #edf2f7;



}







.ppdb-form-panel {



  max-width: 1140px;



  margin: 0 auto;



  background: #ffffff;



  border: 1.5px solid #edf2f7;



  border-radius: 28px;



  padding: 38px 42px;



  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);



}







.ppdb-form-header {



  margin-bottom: 24px;



}







.form-section-title {



  font-size: 1.65rem;



  font-weight: 800;



  color: #0f172a;



  margin: 10px 0 6px 0;



  letter-spacing: -0.02em;



}







.form-section-desc {



  font-size: 0.94rem;



  color: #64748b;



  line-height: 1.55;



  margin: 0;



}







.form-grid-2 {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 16px;



}







/* ==========================================================================



   RESPONSIVE DESIGN FOR PPDB FULL PAGE



   ========================================================================== */



@media (max-width: 992px) {



  ul.ppdb-req-list li {



    white-space: normal;



    align-items: flex-start;



  }



  .req-check-badge {



    margin-top: 2px;



  }



  .ppdb-hero-layout {



    grid-template-columns: 1fr;



    gap: 28px;



  }







  .ppdb-hero-visual {



    justify-content: center;



  }







  .ppdb-hero-banner-frame {



    max-width: 100%;



    height: 260px;



  }







  .ppdb-metrics-strip {



    grid-template-columns: repeat(2, 1fr);



    border-radius: 22px;



    padding: 16px 20px;



  }







  .ppdb-dual-grid,



  .ppdb-dual-grid.grid-50-50,



  .ppdb-dual-grid.grid-60-40 {



    grid-template-columns: 1fr;



  }







  .ppdb-gelombang-grid {



    grid-template-columns: 1fr;



  }







  .ppdb-wave-badge-float {



    top: -8px;



    left: auto;



    right: 14px;



    transform: none;



  }







  .ppdb-steps-row {



    display: flex;



    flex-direction: column;



    align-items: stretch;



    gap: 0;



    padding: 6px 4px 10px 4px;



    width: 100%;



    position: relative;



    overflow: visible;



  }







  /* Vertical Connecting Line */



  .ppdb-steps-row::before {



    content: '';



    position: absolute;



    top: 24px;



    bottom: 24px;



    left: 21px;



    width: 2px;



    background: linear-gradient(180deg, #22c55e 0%, #86efac 100%);



    z-index: 1;



  }







  .ppdb-step-item {



    display: flex;



    flex-direction: row;



    align-items: center;



    text-align: left;



    gap: 14px;



    position: relative;



    z-index: 2;



    padding: 8px 0;



    width: 100%;



    min-width: 0;



  }







  .ppdb-step-item .step-icon-circle {



    width: 42px;



    height: 42px;



    border-radius: 50%;



    background: #ffffff;



    border: 2px solid #22c55e;



    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.16);



    display: flex;



    align-items: center;



    justify-content: center;



    flex-shrink: 0;



  }







  .step-lbl {



    font-size: 0.86rem;



    font-weight: 700;



    color: #0f172a;



    max-width: none;



    line-height: 1.35;



    flex: 1;



  }







  .step-arrow {



    display: none !important;



  }







  /* Unduh Informasi Mobile Polish */



  .download-item-card {



    padding: 10px 12px;



    gap: 10px;



  }







  .btn-dl-action {



    padding: 6px 10px;



    font-size: 0.72rem;



    flex-shrink: 0;



  }







  .form-grid-2 {



    grid-template-columns: 1fr;



  }







  .cta-click-cursor {



    display: none;



  }



}







@media (max-width: 600px) {



  .ppdb-page-title {



    font-size: 2.1rem;



  }







  .ppdb-page-subtitle {



    font-size: 1.35rem;



  }







  .ppdb-metrics-strip {



    grid-template-columns: 1fr;



  }







  .ppdb-req-body {



    flex-direction: column-reverse;



    align-items: center;



  }







  .ppdb-req-graphic {



    width: 110px;



  }







  .ppdb-form-panel {



    padding: 24px 20px;



  }



}











/* ==========================================================================



   PPDB REGISTRATION MODAL STYLES



   ========================================================================== */



.modal-ppdb-form-box {



  max-width: 680px;



  max-height: 90vh;



  position: relative;



  overflow: hidden;



  border-radius: 26px;



  background: #ffffff;



  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35);



  display: flex;



  flex-direction: column;



}







.modal-ppdb-form-box .modal-close-btn {



  position: absolute;



  top: 18px;



  right: 18px;



  z-index: 30;



  background: #f1f5f9;



  border: 1px solid #e2e8f0;



}







.modal-ppdb-scroll-wrap {



  overflow-y: auto;



  max-height: 90vh;



  scrollbar-width: thin;



  scrollbar-color: #cbd5e1 transparent;



  -webkit-overflow-scrolling: touch;



}







.modal-ppdb-scroll-wrap::-webkit-scrollbar {



  width: 6px;



}







.modal-ppdb-scroll-wrap::-webkit-scrollbar-track {



  background: transparent;



  margin: 16px 0;



}







.modal-ppdb-scroll-wrap::-webkit-scrollbar-thumb {



  background: #cbd5e1;



  border-radius: 10px;



}







.modal-ppdb-scroll-wrap::-webkit-scrollbar-thumb:hover {



  background: #94a3b8;



}







.modal-ppdb-body {



  padding: 36px 40px 36px;



}







.modal-ppdb-header {



  margin-bottom: 22px;



  text-align: left;



  padding-right: 40px; /* Space for close X button */



}







.modal-ppdb-header .badge-ppdb-pill {



  margin-bottom: 12px;



  display: inline-flex;



}







.modal-ppdb-header .form-section-title {



  font-size: 1.45rem;



  font-weight: 800;



  color: var(--color-gray-900);



  margin-bottom: 8px;



  line-height: 1.3;



}







.modal-ppdb-header .form-section-desc {



  font-size: 0.925rem;



  color: var(--color-gray-500);



  line-height: 1.5;



  margin: 0;



}







.modal-ppdb-actions {



  margin-top: 24px;



  display: flex;



  justify-content: flex-end;



  gap: 12px;



  align-items: center;



}







.btn-submit-ppdb {



  min-width: 230px;



  justify-content: center;



}







@media (max-width: 640px) {



  .modal-ppdb-body {



    padding: 28px 20px 24px;



  }



  .modal-ppdb-header {



    padding-right: 32px;



  }



  .modal-ppdb-actions {



    flex-direction: column-reverse;



    width: 100%;



  }



  .modal-ppdb-actions button {



    width: 100%;



  }



  .btn-submit-ppdb {



    min-width: 100%;



  }



}







/* ==========================================================================



   BACK TO TOP FLOATING BUTTON



   ========================================================================== */



.back-to-top-btn {



  position: fixed;



  bottom: 28px;



  right: 28px;



  width: 48px;



  height: 48px;



  border-radius: 50%;



  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);



  color: #ffffff;



  border: 2px solid rgba(255, 255, 255, 0.95);



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  z-index: 990;



  box-shadow: 0 8px 24px rgba(21, 128, 61, 0.35), 0 2px 6px rgba(0, 0, 0, 0.08);



  opacity: 0;



  visibility: hidden;



  transform: translateY(16px) scale(0.9);



  pointer-events: none;



  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),



              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),



              background 0.25s ease,



              box-shadow 0.25s ease,



              visibility 0.3s;



}







.back-to-top-btn.visible {



  opacity: 1;



  visibility: visible;



  transform: translateY(0) scale(1);



  pointer-events: auto;



}







.back-to-top-btn:hover {



  background: linear-gradient(135deg, #166534 0%, #15803d 100%);



  transform: translateY(-4px) scale(1.06);



  box-shadow: 0 12px 28px rgba(21, 128, 61, 0.45);



}







.back-to-top-btn:active {



  transform: scale(0.94);



}







.back-to-top-btn svg {



  transition: transform 0.2s ease;



}







.back-to-top-btn:hover svg {



  transform: translateY(-2px);



}







@media (max-width: 768px) {



  .back-to-top-btn {



    bottom: 22px;



    right: 20px;



    width: 44px;



    height: 44px;



    box-shadow: 0 6px 20px rgba(21, 128, 61, 0.32);



  }



}











/* ==========================================================================



   MITRA & KERJASAMA (PARTNERS & INDUSTRIAL COLLABORATION)



   ========================================================================== */



.mitra-section {



  position: relative;



  overflow: hidden;



  padding: 100px 0 110px 0;



  background: linear-gradient(180deg, #f6fef8 0%, #ffffff 45%, #f8fafc 100%);



}







/* Background Side Blurred Building Silhouettes */



.mitra-bg-side {



  position: absolute;



  top: 0;



  bottom: 0;



  width: 280px;



  pointer-events: none;



  z-index: 1;



  opacity: 0.12;



}







.mitra-bg-left {



  left: -40px;



  background: url('../images/school-exterior-about.webp') no-repeat left center / cover;



  filter: blur(5px);



  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);



  mask-image: linear-gradient(to right, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);



}







.mitra-bg-right {



  right: -40px;



  background: url('../images/hero-building.webp') no-repeat right center / cover;



  filter: blur(5px);



  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);



  mask-image: linear-gradient(to left, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);



}







/* Top-Left and Bottom-Right Organic Green Waves */



.mitra-wave-top-left {



  position: absolute;



  top: 0;



  left: 0;



  width: 320px;



  height: 220px;



  z-index: 2;



  pointer-events: none;



}







.mitra-wave-top-left svg {



  width: 100%;



  height: 100%;



  display: block;



}







.mitra-wave-bottom-right {



  position: absolute;



  bottom: 0;



  right: 0;



  width: 320px;



  height: 220px;



  z-index: 2;



  pointer-events: none;



}







.mitra-wave-bottom-right svg {



  width: 100%;



  height: 100%;



  display: block;



}







.mitra-container {



  position: relative;



  z-index: 5;



}







/* Header Area */



.mitra-header-wrapper {



  position: relative;



  display: flex;



  align-items: center;



  justify-content: center;



  margin-bottom: 52px;



}







.mitra-header-content {



  max-width: 680px;



  text-align: center;



  margin: 0 auto;



}







.mitra-badge-pill {



  margin-bottom: 14px;



}







.mitra-title {



  margin-bottom: 16px;



  font-size: 2.15rem;



  line-height: 1.25;



}







.mitra-subtitle {



  font-size: 1.02rem;



  color: #475569;



  line-height: 1.6;



  max-width: 620px;



  margin: 0 auto;



}







/* Divider with Center Graduation Cap */



.mitra-divider-row {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 16px;



  margin-top: 24px;



}







.mitra-divider-line {



  width: 70px;



  height: 2px;



  background: linear-gradient(90deg, rgba(134, 239, 172, 0.2), rgba(134, 239, 172, 0.95));



  border-radius: 2px;



}







.mitra-divider-row .mitra-divider-line:last-child {



  background: linear-gradient(90deg, rgba(134, 239, 172, 0.95), rgba(134, 239, 172, 0.2));



}







.mitra-cap-emblem {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  width: 38px;



  height: 38px;



  border-radius: 50%;



  background: #ffffff;



  color: #15803d;



  box-shadow: 0 4px 14px rgba(22, 101, 52, 0.12);



  border: 1.5px solid rgba(187, 247, 208, 0.9);



}







/* Floating 3D Handshake Illustration */



.mitra-title .mitra-title-with-desktop {
  display: inline;
}

.mitra-title .mitra-title-br {
  display: inline;
}

.mitra-title .mitra-title-with-mobile {
  display: none;
}

.mitra-title .highlight-green-text {



  color: #16a34a !important;



}







.mitra-illustration-wrap {



  position: absolute;



  right: 35px;



  top: 36%;



  transform: translateY(-50%);



  width: 240px;



  z-index: 6;



  pointer-events: none;



}







.mitra-3d-img {



  width: 100%;



  height: auto;



  object-fit: contain;



  filter: drop-shadow(0 16px 28px rgba(22, 101, 52, 0.14));



  animation: floatMitra3d 4.5s ease-in-out infinite alternate;



}







@keyframes floatMitra3d {



  0% {



    transform: translateY(0px) rotate(0deg);



  }



  100% {



    transform: translateY(-10px) rotate(1.5deg);



  }



}







/* Carousel Section */



.mitra-carousel-wrapper {



  position: relative;



  display: flex;



  align-items: center;



  gap: 16px;



  max-width: 1220px;



  margin: 0 auto;



}







.mitra-nav-btn {



  flex-shrink: 0;



  width: 44px;



  height: 44px;



  border-radius: 50%;



  background: #ffffff;



  border: 1.2px solid rgba(226, 232, 240, 0.9);



  box-shadow: 0 8px 20px -4px rgba(22, 101, 52, 0.12), 0 2px 6px rgba(0, 0, 0, 0.02);



  color: #15803d;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);



  z-index: 7;



}







.mitra-nav-btn:hover {



  background: #15803d;



  color: #ffffff;



  border-color: #15803d;



  transform: scale(1.08);



  box-shadow: 0 12px 24px -4px rgba(21, 128, 61, 0.32);



}







.mitra-nav-btn:active {



  transform: scale(0.94);



}







.mitra-carousel-viewport {



  flex: 1;



  overflow-x: auto;



  scrollbar-width: none;



  -ms-overflow-style: none;



  scroll-behavior: smooth;



  padding: 12px 4px;



}







.mitra-carousel-viewport::-webkit-scrollbar {



  display: none;



}







.mitra-carousel-track {



  display: flex;



  align-items: center;



  justify-content: flex-start;



  gap: 16px;



  width: max-content;



}







/* Card Styling */



.mitra-card {



  flex: 0 0 160px;



  min-width: 155px;



  height: 84px;



  background: #ffffff;



  border-radius: 20px;



  border: 1.2px solid rgba(226, 232, 240, 0.85);



  box-shadow: 0 8px 24px -4px rgba(22, 101, 52, 0.07), 0 2px 6px rgba(0, 0, 0, 0.02);



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 12px 18px;



  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);



  user-select: none;



}







.mitra-card:hover {



  transform: translateY(-5px);



  border-color: rgba(134, 239, 172, 0.95);



  box-shadow: 0 16px 32px -4px rgba(21, 128, 61, 0.16), 0 4px 10px rgba(0, 0, 0, 0.03);



}







.mitra-logo-img {



  max-width: 110px;



  max-height: 40px;



  width: auto;



  height: auto;



  object-fit: contain;



  transition: transform 0.25s ease, filter 0.25s ease;



}







.mitra-card:hover .mitra-logo-img {



  transform: scale(1.04);



}







/* Dots Pagination */



.mitra-dots-bar {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 8px;



  margin-top: 36px;



}







.mitra-dot {



  width: 8px;



  height: 8px;



  border-radius: 9999px;



  background: #cbd5e1;



  cursor: pointer;



  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);



}







.mitra-dot.active {



  width: 26px;



  background: #15803d;



  box-shadow: 0 2px 8px rgba(21, 128, 61, 0.3);



}







/* Responsive Rules for Mitra Section */

@media (max-width: 1200px) {
  .mitra-illustration-wrap {
    width: 180px;
    right: 0;
  }
  .mitra-title {
    font-size: 1.95rem;
  }
}

@media (max-width: 992px) {
  .mitra-section {
    padding: 55px 0 65px 0;
  }
  .mitra-header-wrapper {
    flex-direction: column;
    margin-bottom: 24px;
  }
  .mitra-illustration-wrap {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 140px;
    margin: 8px auto 16px auto;
  }
  .mitra-carousel-track {
    justify-content: flex-start;
  }
  .mitra-card {
    flex: 0 0 160px;
    min-width: 150px;
  }
  .mitra-nav-btn {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .mitra-section {
    padding: 32px 0 38px 0 !important;
  }

  .mitra-header-wrapper {
    margin-bottom: 10px !important;
  }

  .mitra-title .mitra-title-with-desktop {
    display: none !important;
  }

  .mitra-title .mitra-title-br {
    display: none !important;
  }

  .mitra-title .mitra-title-with-mobile {
    display: inline !important;
    color: #0f172a !important;
    font-weight: 700 !important;
  }

  .mitra-badge-pill {
    padding: 5px 12px !important;
    font-size: 0.8rem !important;
    margin-bottom: 8px !important;
  }

  .mitra-title {
    font-size: 1.32rem !important;
    line-height: 1.32 !important;
    margin-bottom: 8px !important;
    text-wrap: balance !important;
  }

  .mitra-subtitle {
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    max-width: 330px !important;
    margin: 0 auto !important;
    color: #64748b !important;
    padding: 0 10px !important;
  }

  .mitra-divider-row {
    margin-top: 12px !important;
    gap: 10px !important;
  }

  .mitra-divider-line {
    width: 32px !important;
  }

  .mitra-cap-emblem {
    width: 30px !important;
    height: 30px !important;
  }

  .mitra-cap-emblem svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Compact 3D Collaboration Art with Soft Radial Ambient Glow */
  .mitra-illustration-wrap {
    position: relative !important;
    width: 100px !important;
    height: auto !important;
    margin: 4px auto 10px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mitra-illustration-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(187, 247, 208, 0.65) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: -1;
    pointer-events: none;
  }

  .mitra-3d-img {
    width: 100% !important;
    max-height: 100px !important;
    filter: drop-shadow(0 8px 18px rgba(22, 101, 52, 0.16)) !important;
  }

  /* 2-Row Dual Grid: 14 logos in 2 rows x 7 cols */
  .mitra-carousel-viewport {
    padding: 8px 4px !important;
    -webkit-overflow-scrolling: touch;
  }

  .mitra-carousel-track {
    display: grid !important;
    grid-template-rows: repeat(2, 66px) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 135px !important;
    gap: 10px !important;
    width: max-content !important;
  }

  .mitra-card {
    flex: none !important;
    width: 135px !important;
    min-width: 135px !important;
    height: 66px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(22, 101, 52, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  }

  .mitra-logo-img {
    max-width: 90px !important;
    max-height: 30px !important;
  }

  .mitra-nav-btn {
    display: none !important;
  }

  /* Compact Dots Bar on Mobile: exactly 7 dots for 7 columns */
  .mitra-dots-bar {
    margin-top: 16px !important;
    gap: 6px !important;
  }

  .mitra-dot {
    width: 6px !important;
    height: 6px !important;
  }

  .mitra-dot.active {
    width: 20px !important;
  }

  .mitra-dot:nth-child(n+8) {
    display: none !important;
  }

  .mitra-wave-top-left,
  .mitra-wave-bottom-right {
    width: 160px !important;
    height: 120px !important;
    opacity: 0.7 !important;
  }
}

@media (max-width: 480px) {
  .mitra-title {
    font-size: 1.25rem !important;
  }
  .mitra-carousel-track {
    grid-auto-columns: 130px !important;
  }
  .mitra-card {
    width: 130px !important;
    min-width: 130px !important;
  }
}