/* ── fonts ── */
@font-face{font-family:Poppins;src:url("../../assets_login/fonts/poppins/Poppins-Regular.ttf")}
@font-face{font-family:Poppins;font-weight:600;src:url("../../assets_login/fonts/poppins/Poppins-SemiBold.ttf")}
@font-face{font-family:Montserrat;font-weight:700;src:url("../../assets_login/fonts/montserrat/Montserrat-Bold.ttf")}
@font-face{font-family:'Neue Montreal';font-weight:300;font-style:normal;font-display:swap;src:url("../../assets_font/NeueMontreal/NeueMontreal-Light.otf") format("opentype")}
@font-face{font-family:'Neue Montreal';font-weight:400;font-style:normal;font-display:swap;src:url("../../assets_font/NeueMontreal/NeueMontreal-Regular.otf") format("opentype")}
@font-face{font-family:'Neue Montreal';font-weight:500;font-style:normal;font-display:swap;src:url("../../assets_font/NeueMontreal/NeueMontreal-Medium.otf") format("opentype")}
@font-face{font-family:'Neue Montreal';font-weight:700;font-style:normal;font-display:swap;src:url("../../assets_font/NeueMontreal/NeueMontreal-Bold.otf") format("opentype")}
@font-face{font-family:'Neue Montreal';font-weight:300;font-style:italic;font-display:swap;src:url("../../assets_font/NeueMontreal/NeueMontreal-LightItalic.otf") format("opentype")}
@font-face{font-family:'Neue Montreal';font-weight:400;font-style:italic;font-display:swap;src:url("../../assets_font/NeueMontreal/NeueMontreal-Italic.otf") format("opentype")}
@font-face{font-family:'Neue Montreal';font-weight:500;font-style:italic;font-display:swap;src:url("../../assets_font/NeueMontreal/NeueMontreal-MediumItalic.otf") format("opentype")}
@font-face{font-family:'Neue Montreal';font-weight:700;font-style:italic;font-display:swap;src:url("../../assets_font/NeueMontreal/NeueMontreal-BoldItalic.otf") format("opentype")}

/* ════════════════════════════
   DESIGN TOKENS
════════════════════════════ */
:root{
  --green:        #1b7a56;
  --green-dark:   #145e42;
  --green-light:  #e8f7f0;
  --green-mid:    #2a9d6f;
  --gold:         #e8a800;
  --gold-dark:    #c98f00;
  --navy:         #0d1f35;
  --navy-mid:     #1a3350;
  --text:         #1e293b;
  --muted:        #64748b;
  --line:         #e2e8f0;
  --bg:           #f8fafc;
  --white:        #ffffff;
  --shadow-xs:    0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:    0 4px 6px rgba(0,0,0,.05),0 2px 4px rgba(0,0,0,.04);
  --shadow-md:    0 10px 25px rgba(0,0,0,.08),0 4px 10px rgba(0,0,0,.04);
  --shadow-lg:    0 20px 50px rgba(0,0,0,.12),0 8px 20px rgba(0,0,0,.06);
  --shadow-xl:    0 32px 70px rgba(0,0,0,.16);
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    22px;
  --radius-xl:    32px;
  --ease:         cubic-bezier(.4,0,.2,1);
  --ease-out:     cubic-bezier(0,0,.2,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
  --header-nav:   68px;
  --header-h:     68px;
}

/* ════════════════════════════
   RESET & BASE
════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:'Neue Montreal',system-ui,Arial,sans-serif;
  font-size:15px;line-height:1.7;
  color:var(--text);background:var(--white);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}
button{cursor:pointer;font-family:inherit}
.container{width:min(1160px,calc(100% - 48px));margin-inline:auto}

/* ════════════════════════════
   SCROLL REVEAL
════════════════════════════ */
.reveal{
  opacity:0;
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:var(--delay,0s);
}
.reveal.reveal-up   {transform:translateY(40px)}
.reveal.reveal-left {transform:translateX(-50px)}
.reveal.reveal-right{transform:translateX(50px)}
.reveal.visible{opacity:1;transform:none}

/* Pengunjung yang mematikan animasi di setelan sistemnya langsung melihat
   isi halaman, tanpa efek muncul dan tanpa scroll beranimasi. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ════════════════════════════
   UTILITY
════════════════════════════ */
.section-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);margin-bottom:12px;
}
.section-label::before{
  content:"";width:24px;height:2px;
  background:var(--green);border-radius:2px;
  display:inline-block;flex-shrink:0;
}
.section-label.light{color:rgba(255,255,255,.8)}
.section-label.light::before{background:rgba(255,255,255,.6)}

.section-heading{
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:clamp(24px,3.2vw,38px);
  font-weight:700;color:#111;
  line-height:1.18;letter-spacing:-.03em;
}
.section-heading.white{color:#fff}

.section-header{
  display:flex;align-items:flex-end;
  justify-content:space-between;gap:24px;
  margin-bottom:48px;
}
.section-header.center{
  flex-direction:column;align-items:center;text-align:center;
}

/* ════════════════════════════
   BUTTONS
════════════════════════════ */
.btn-primary,
.btn-outline-white,
.btn-outline-green,
.btn-gold{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;white-space:nowrap;
  border:none;outline:none;
  transition:all .25s var(--ease);
}
.btn-primary{
  padding:13px 30px;
  background:var(--green);color:#fff;
  border-radius:var(--radius-xs);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.btn-primary:hover{
  background:var(--green-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.btn-outline-white{
  padding:12px 28px;
  border:1.5px solid rgba(255,255,255,.55);
  color:#fff;border-radius:var(--radius-xs);
  backdrop-filter:blur(6px);
  background:rgba(255,255,255,.06);
}
.btn-outline-white:hover{background:rgba(255,255,255,.14);border-color:#fff}

.btn-outline-green{
  padding:11px 24px;
  border:1.5px solid var(--green);
  color:var(--green);border-radius:var(--radius-xs);
}
.btn-outline-green:hover{background:var(--green);color:#fff}

.btn-gold{
  padding:15px 38px;
  background:var(--gold);color:#111;
  border-radius:var(--radius-xs);
  font-size:14.5px;font-weight:700;
  box-shadow:0 6px 20px rgba(232,168,0,.3);
}
.btn-gold:hover{
  background:var(--gold-dark);
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(232,168,0,.4);
}

/* ════════════════════════════
   HEADER
════════════════════════════ */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:500;
  transition:transform .3s var(--ease);
}
.site-header.hide{transform:translateY(-100%)}

.header-main{
  background:transparent;
  height:var(--header-nav);
  transition:background .35s var(--ease),
             height .3s var(--ease),
             box-shadow .35s;
}
.site-header.scrolled .header-main{
  background:#fff;
  box-shadow:0 2px 20px rgba(0,0,0,.09);
}
.site-header.shrunk .header-main{
  height:58px;
  background:#fff;
  box-shadow:0 4px 24px rgba(0,0,0,.11);
}

.nav-wrap{
  display:flex;align-items:center;
  justify-content:space-between;height:100%;
}
.brand{display:flex;align-items:center;width:210px;flex-shrink:0}
.brand img{
  width:100%;height:auto;object-fit:contain;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.4));
  transition:transform .3s var(--ease),filter .3s;
}
.brand:hover img{transform:scale(1.03);filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}

.main-nav{display:flex;align-items:center;gap:1px}

/* nav links — always light (header is always dark bg) */
.nav-link{
  display:flex;align-items:center;gap:4px;
  padding:8px 12px;
  font-size:13px;font-weight:600;
  color:rgba(255,255,255,.85);
  border-radius:6px;
  white-space:nowrap;
  transition:color .2s,background .18s;
  position:relative;
}
.nav-link::after{
  content:"";position:absolute;
  left:12px;right:12px;bottom:2px;
  height:2px;background:var(--gold);
  border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.1)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link.active{color:#fff}
.nav-link.active::after{transform:scaleX(1)}

/* chevron */
.nav-chevron{
  width:10px;height:10px;flex-shrink:0;
  color:rgba(255,255,255,.5);
  transition:transform .22s var(--ease),color .2s;
}
/* rotate when dropdown open */
.nav-item.has-dropdown.open .nav-chevron{
  transform:rotate(180deg);
  color:var(--gold);
}

/* ── DROPDOWN (click-based, .open toggled by JS) ── */
.nav-item{position:relative}
.nav-dropdown{
  position:absolute;top:100%;
  left:50%;
  min-width:250px;
  display:flex;flex-direction:column;gap:2px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(4,30,36,.16),0 0 0 1px rgba(4,30,36,.05);
  padding:8px;
  opacity:0;pointer-events:none;
  transform:translateX(-50%) translateY(6px) scale(.98);
  transition:opacity .18s var(--ease),transform .18s var(--ease);
  z-index:100;
}
/* small arrow notch */
.nav-dropdown::before{
  content:'';
  position:absolute;top:-7px;left:50%;
  transform:translateX(-50%);
  border:7px solid transparent;
  border-bottom-color:#fff;
  border-top:0;
  filter:drop-shadow(0 -2px 2px rgba(0,0,0,.06));
}
.nav-item.has-dropdown.open .nav-dropdown{
  opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(10px) scale(1);
}
.nav-dropdown a{
  display:flex;align-items:center;gap:11px;
  padding:8px 10px;
  font-size:13.5px;font-weight:600;color:#1f2937;
  border-radius:11px;
  transition:background .15s var(--ease);
}
.nav-dropdown a .dropdown-icon{
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  width:34px;height:34px;
  border-radius:10px;
  background:var(--green-light);
  color:var(--green);
  transition:background .15s var(--ease),color .15s var(--ease);
}
.nav-dropdown a:hover{background:var(--green-light)}
.nav-dropdown a:hover .dropdown-icon{background:var(--green);color:#fff}

/* divider between nav & CTA */
.nav-divider{
  width:1px;height:18px;
  background:rgba(255,255,255,.18);
  margin:0 10px;flex-shrink:0;
}

/* CTA — gold pill */
.nav-cta{
  display:inline-flex;align-items:center;gap:7px;
  margin-left:4px;padding:9px 22px;
  background:var(--gold);
  border:none;
  color:#111;
  font-size:13px;font-weight:700;
  border-radius:999px;
  box-shadow:0 4px 16px rgba(232,168,0,.4);
  transition:background .2s,transform .2s,box-shadow .2s;
  white-space:nowrap;
}
.nav-cta:hover{
  background:#f5b800;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(232,168,0,.5);
}

/* hamburger */
.nav-toggle{
  display:none;flex-direction:column;
  justify-content:center;gap:5px;
  width:40px;height:40px;padding:8px;
  background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.3);
  border-radius:8px;
  transition:background .2s,border-color .2s;
}
.nav-toggle span{
  display:block;height:2px;
  background:#fff;border-radius:2px;
  transition:transform .28s var(--ease),opacity .18s;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ════════════════════════════
   HERO SLIDER
════════════════════════════ */
.hero{
  position:relative;
  height:100svh;
  min-height:560px;max-height:900px;
  margin-top:0;               /* header overlays hero */
  overflow:hidden;
}

.hero-slides,.hero-slide{position:absolute;inset:0}
.hero-slide{
  background-size:cover;background-position:center;
  opacity:0;
  transition:opacity 1.4s var(--ease-out);
}
.hero-slide.active{opacity:1}

/* Ken Burns subtle zoom on active slide */
.hero-slide.active::after{
  content:"";position:absolute;inset:0;
  background:inherit;background-size:cover;background-position:center;
  animation:kenburns 8s var(--ease-out) forwards;
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}

.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    105deg,
    rgba(8,18,32,.78) 0%,
    rgba(8,18,32,.48) 55%,
    rgba(8,18,32,.18) 100%
  );
}

/* arrows */
.hero-arrow{
  position:absolute;top:50%;z-index:10;
  transform:translateY(-50%);
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.3);
  color:#fff;border-radius:50%;
  backdrop-filter:blur(8px);
  transition:background .25s,transform .25s var(--ease-spring),border-color .25s;
}
.hero-arrow:hover{
  background:var(--green);
  border-color:var(--green);
  transform:translateY(-50%) scale(1.1);
}
.hero-prev{left:28px}
.hero-next{right:28px}

/* dots */
.hero-dots{
  position:absolute;bottom:32px;left:50%;z-index:10;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;
}
.hero-dot{
  width:8px;height:8px;border-radius:999px;
  background:rgba(255,255,255,.4);border:none;
  transition:background .3s,width .35s var(--ease-spring);
}
.hero-dot.active{background:#fff;width:28px}

/* content */
.hero-content{
  position:relative;z-index:5;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding-bottom:80px;max-width:720px;
}
.hero-badge-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
  color:#fff;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;margin-bottom:20px;margin-top:40px;
  width:fit-content;
  animation:fadeSlideDown .8s .2s var(--ease-out) both;
}
.hero-title{
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:clamp(38px,6.5vw,76px);
  font-weight:700;color:#fff;
  line-height:1.06;letter-spacing:-.04em;
  margin-bottom:18px;
  animation:fadeSlideDown .8s .35s var(--ease-out) both;
}
.hero-subtitle{
  color:rgba(255,255,255,.78);
  font-size:clamp(14px,1.6vw,17px);
  max-width:520px;margin-bottom:32px;line-height:1.65;
  animation:fadeSlideDown .8s .5s var(--ease-out) both;
}
.hero-actions{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  animation:fadeSlideDown .8s .65s var(--ease-out) both;
}
@keyframes fadeSlideDown{
  from{opacity:0;transform:translateY(-20px)}
  to{opacity:1;transform:none}
}

.hero-scroll-hint{
  position:absolute;bottom:30px;right:36px;z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:rgba(255,255,255,.55);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;
  animation:scrollBounce 2.2s ease-in-out infinite;
}
@keyframes scrollBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(7px)}
}

/* ════════════════════════════
   STATS BAR
════════════════════════════ */
.stats-bar{
  background:var(--green);
  position:relative;overflow:hidden;
}
.stats-bar::before{
  content:"";position:absolute;
  right:-80px;top:-80px;
  width:300px;height:300px;
  background:rgba(255,255,255,.05);
  border-radius:50%;
}
.stats-grid{
  display:flex;align-items:stretch;
  position:relative;z-index:1;
}
.stat-item{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:32px 20px;gap:4px;
}
.stat-number{
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:clamp(30px,4vw,46px);
  font-weight:700;color:#fff;line-height:1;
}
.stat-item sup{
  font-size:.5em;vertical-align:super;
  color:rgba(255,255,255,.8);
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-weight:700;
}
.stat-label{
  font-size:12px;font-weight:600;
  color:rgba(255,255,255,.72);letter-spacing:.04em;
}
.stat-divider{
  width:1px;background:rgba(255,255,255,.18);
  margin:18px 0;align-self:stretch;
}

/* ════════════════════════════
   ABOUT
════════════════════════════ */
.about-section{padding:100px 0;background:#fff}
.about-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;
}
.about-images{position:relative;min-height:490px}
.about-img-main{
  position:absolute;inset:0 70px 55px 0;
  border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:var(--shadow-xl);
}
.about-img-main img{width:100%;height:100%;object-fit:cover}
.about-img-small{
  position:absolute;bottom:0;right:0;
  width:190px;height:200px;
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-xl);
  border:5px solid #fff;
}
.about-img-small img{width:100%;height:100%;object-fit:cover}
.about-img-badge{
  position:absolute;top:24px;left:-16px;
  background:var(--green);color:#fff;
  padding:18px 20px;border-radius:var(--radius-md);
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 12px 32px rgba(0,0,0,.22);
  min-width:90px;
}
.badge-number{
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:30px;font-weight:700;line-height:1;
}
.badge-number sup{font-size:.5em;vertical-align:super}
.badge-text{
  font-size:9.5px;font-weight:600;
  opacity:.82;text-align:center;margin-top:4px;
  letter-spacing:.05em;
}
.about-tagline{
  font-size:14.5px;color:var(--green);
  margin-bottom:14px;font-style:italic;
}
.about-text{
  color:var(--muted);font-size:14.5px;
  line-height:1.78;margin-bottom:28px;
}
.about-features{
  display:grid;grid-template-columns:1fr 1fr;
  gap:12px 20px;margin-bottom:32px;
}
.about-feature{
  display:flex;align-items:center;gap:10px;
  font-size:13.5px;font-weight:600;color:var(--text);
}
.feature-icon{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--green-light);color:var(--green);
  flex-shrink:0;
}

/* ════════════════════════════
   REGISTRATION CTA
════════════════════════════ */
.registration-cta{
  position:relative;padding:110px 0;
  overflow:hidden;text-align:center;
}
.cta-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
}
.cta-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    135deg,
    rgba(8,35,22,.9) 0%,
    rgba(10,28,48,.82) 100%
  );
}
.cta-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.cta-content h2{
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:clamp(26px,4.5vw,50px);
  font-weight:700;color:#fff;
  line-height:1.15;letter-spacing:-.03em;
  max-width:700px;
}
.cta-content p{
  color:rgba(255,255,255,.68);
  font-size:15px;max-width:480px;
}
.cta-content .btn-gold{margin-top:10px}

/* ════════════════════════════
   PROGRAMS
════════════════════════════ */
.programs-section{padding:100px 0;background:var(--bg)}
.programs-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.program-card{
  background:#fff;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
  border:1px solid var(--line);
  transition:transform .35s var(--ease-spring),
             box-shadow .35s var(--ease),
             border-color .35s;
}
.program-card:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:var(--shadow-xl);border-color:transparent;
}
.program-img{
  position:relative;aspect-ratio:4/3;overflow:hidden;
}
.program-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);
}
.program-card:hover .program-img img{transform:scale(1.08)}
.program-number{
  position:absolute;top:14px;left:14px;
  width:34px;height:34px;border-radius:50%;
  background:var(--green);color:#fff;
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.22);
}
.program-body{
  padding:22px 22px 26px;
  flex:1;display:flex;flex-direction:column;gap:10px;
}
.program-body h3{
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:17px;font-weight:700;
  color:#111;letter-spacing:-.02em;
}
.program-body p{
  color:var(--muted);font-size:13px;
  line-height:1.72;flex:1;
}
.program-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--green);
  margin-top:4px;transition:gap .25s var(--ease);
}
.program-link:hover{gap:12px}
.program-link svg{transition:transform .25s var(--ease)}
.program-link:hover svg{transform:translateX(4px)}

/* ════════════════════════════
   QUOTE STRIP
════════════════════════════ */
.quote-strip{
  padding:64px 0;background:var(--navy);
  position:relative;overflow:hidden;
}
.quote-strip::before,.quote-strip::after{
  content:"";position:absolute;border-radius:50%;
  background:rgba(255,255,255,.03);
}
.quote-strip::before{width:400px;height:400px;right:-120px;top:-180px}
.quote-strip::after{width:300px;height:300px;left:-80px;bottom:-130px}
.quote-strip p{
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:clamp(17px,2.8vw,28px);
  font-weight:700;color:#fff;
  letter-spacing:-.02em;
  text-align:center;opacity:.9;
  position:relative;z-index:1;
}

/* ════════════════════════════
   NEWS
════════════════════════════ */
.news-section{padding:100px 0;background:#fff}
.news-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.news-card{
  background:#fff;border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--line);
  box-shadow:var(--shadow-xs);
  transition:transform .35s var(--ease-spring),
             box-shadow .35s var(--ease),
             border-color .35s;
}
.news-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);border-color:transparent;
}
.news-img-wrap{
  display:block;position:relative;
  aspect-ratio:16/10;overflow:hidden;flex-shrink:0;
}
.news-img-wrap img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);
}
.news-card:hover .news-img-wrap img{transform:scale(1.06)}
.news-category{
  position:absolute;top:14px;left:14px;
  padding:4px 12px;background:var(--green);
  color:#fff;font-size:10px;font-weight:700;
  border-radius:999px;letter-spacing:.07em;text-transform:uppercase;
}
.news-body{
  padding:20px 22px 24px;flex:1;
  display:flex;flex-direction:column;gap:9px;
}
.news-date{
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--muted);
}
.news-title{
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:15.5px;font-weight:700;
  color:#111;line-height:1.38;
  letter-spacing:-.02em;
}
.news-title a{transition:color .2s}
.news-title a:hover{color:var(--green)}
.news-excerpt{
  font-size:13px;color:var(--muted);
  line-height:1.7;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;
}
.news-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:var(--green);
  margin-top:4px;transition:gap .25s var(--ease);
}
.news-link:hover{gap:10px}
.news-link svg{transition:transform .25s}
.news-link:hover svg{transform:translateX(3px)}
.news-empty{
  grid-column:1/-1;padding:60px;
  text-align:center;color:var(--muted);
  background:var(--bg);border-radius:var(--radius-lg);
}

/* ════════════════════════════
   FAQ
════════════════════════════ */
.faq-section{padding:100px 0;background:var(--bg)}
.faq-grid{
  display:grid;grid-template-columns:380px 1fr;
  gap:80px;align-items:start;
}
.faq-header .section-heading{margin-bottom:14px}
.faq-sub{
  font-size:14px;color:var(--muted);margin-top:12px;
}
.faq-sub a{
  color:var(--green);font-weight:600;
  border-bottom:1px solid var(--green);
  padding-bottom:1px;
}
.faq-list{display:flex;flex-direction:column;gap:0}
.faq-item{
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-question{
  width:100%;display:flex;align-items:center;
  justify-content:space-between;gap:16px;
  padding:20px 0;
  background:none;border:none;
  font-size:14.5px;font-weight:600;
  color:var(--text);text-align:left;
  transition:color .2s;
}
.faq-question:hover{color:var(--green)}
.faq-question[aria-expanded="true"]{color:var(--green)}
.faq-icon{
  flex-shrink:0;color:var(--muted);
  transition:transform .35s var(--ease-spring),color .2s;
}
.faq-question[aria-expanded="true"] .faq-icon{
  transform:rotate(180deg);color:var(--green);
}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height .4s var(--ease-out),padding .3s var(--ease);
}
.faq-answer.open{max-height:200px}
.faq-answer p{
  padding-bottom:20px;
  font-size:14px;color:var(--muted);line-height:1.75;
}

/* ════════════════════════════
   TESTIMONIALS
════════════════════════════ */
.testimonials-section{padding:100px 0;background:#fff}
.testimonials-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;align-items:start;
}
.testimonial-card{
  background:#fff;border-radius:var(--radius-lg);
  padding:34px 30px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-xs);
  display:flex;flex-direction:column;gap:16px;
  transition:transform .35s var(--ease-spring),
             box-shadow .35s var(--ease),
             border-color .35s;
}
.testimonial-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);border-color:transparent;
}
.testimonial-card.featured{
  background:var(--green);border-color:transparent;
  transform:translateY(-10px);
  box-shadow:var(--shadow-xl);
}
.testimonial-card.featured:hover{transform:translateY(-14px)}
.testimonial-quote-icon{
  font-family:'El Messiri',Georgia,serif;font-size:60px;
  line-height:.75;color:var(--green);opacity:.2;
}
.testimonial-card.featured .testimonial-quote-icon{color:#fff;opacity:.25}
.testimonial-text{
  font-size:13.5px;color:#4b5563;line-height:1.8;flex:1;
}
.testimonial-card.featured .testimonial-text{color:rgba(255,255,255,.88)}
.testimonial-author{
  display:flex;align-items:center;gap:14px;
  padding-top:18px;border-top:1px solid var(--line);
}
.testimonial-card.featured .testimonial-author{border-top-color:rgba(255,255,255,.18)}
.testimonial-photo{
  width:48px;height:48px;border-radius:50%;overflow:hidden;
  flex-shrink:0;border:2px solid var(--line);
}
.testimonial-card.featured .testimonial-photo{border-color:rgba(255,255,255,.3)}
.testimonial-photo img{width:100%;height:100%;object-fit:cover}
.testimonial-name{
  display:block;font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:13.5px;font-weight:700;color:#111;
}
.testimonial-card.featured .testimonial-name{color:#fff}
.testimonial-role{
  display:block;font-size:11.5px;
  color:var(--muted);margin-top:2px;
}
.testimonial-card.featured .testimonial-role{color:rgba(255,255,255,.65)}

/* ════════════════════════════
   FOOTER
════════════════════════════ */
.site-footer{background:var(--navy);color:#fff}

/* Instagram Strip */
.footer-ig-strip{
  background:linear-gradient(135deg,#833ab4 0%,#fd1d1d 50%,#fcb045 100%);
  padding:28px 0;
}
.footer-ig-inner{
  display:flex;align-items:center;gap:20px;
  flex-wrap:wrap;
}
.footer-ig-icon{
  flex-shrink:0;
  width:64px;height:64px;border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.footer-ig-text{
  flex:1;display:flex;flex-direction:column;gap:3px;min-width:160px;
}
.footer-ig-label{
  font-size:13px;color:rgba(255,255,255,.82);font-weight:500;
}
.footer-ig-handle{
  font-size:20px;font-weight:700;color:#fff;letter-spacing:-.3px;
}
.footer-ig-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 26px;border-radius:999px;
  background:#fff;color:#833ab4;
  font-size:14px;font-weight:700;
  text-decoration:none;white-space:nowrap;
  transition:transform .2s,box-shadow .2s;
  flex-shrink:0;
}
.footer-ig-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25);}

.footer-top{padding:72px 0 56px}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.3fr;
  gap:56px;align-items:start;
}
.footer-logo{
  width:200px;max-height:58px;
  object-fit:contain;object-position:left;
  opacity:.9;
  margin-bottom:18px;
  transition:opacity .2s;
}
.footer-logo:hover{opacity:1}
.footer-tagline{
  font-size:11.5px;font-weight:700;
  color:var(--gold);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:12px;
}
.footer-desc{
  font-size:13px;color:#7a9ab0;line-height:1.75;margin-bottom:22px;
}
.footer-socials{display:flex;gap:10px}
.footer-socials a{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  color:#7a9ab0;
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease-spring);
}
.footer-socials a:hover{
  background:var(--green);color:#fff;
  border-color:var(--green);transform:translateY(-3px);
}
.footer-col-title{
  font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:20px;
}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links li a{
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:#7a9ab0;
  transition:color .2s,padding-left .2s;
}
.footer-links li a::before{
  content:"";width:0;height:1.5px;
  background:var(--green);border-radius:2px;
  transition:width .25s var(--ease);
}
.footer-links li a:hover{color:#fff;padding-left:4px}
.footer-links li a:hover::before{width:14px}
.footer-contact{display:flex;flex-direction:column;gap:16px}
.footer-contact li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;color:#7a9ab0;line-height:1.62;
}
.footer-contact svg{flex-shrink:0;margin-top:3px;color:var(--green-mid)}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.07);padding:18px 0;
}
.footer-bottom-inner{
  display:flex;align-items:center;
  justify-content:space-between;gap:16px;
  font-size:12px;color:#4d6a7a;
}
.footer-bottom-inner a{color:rgba(255,255,255,.85);transition:color .2s}
.footer-bottom-inner a:hover{color:#fff}

/* ════════════════════════════
   BACK TO TOP
════════════════════════════ */
.back-to-top{
  position:fixed;bottom:90px;right:28px;z-index:400;
  width:46px;height:46px;border-radius:50%;
  background:var(--green);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  opacity:0;pointer-events:none;
  transform:translateY(12px) scale(.9);
  transition:opacity .3s,transform .3s var(--ease-spring);
}
.back-to-top.visible{
  opacity:1;pointer-events:auto;transform:none;
}
.back-to-top:hover{
  background:var(--green-dark);
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}

/* ════════════════════════════
   WHATSAPP FLOAT
════════════════════════════ */
.whatsapp-float{
  position:fixed;bottom:28px;right:28px;z-index:400;
  width:52px;height:52px;border-radius:50%;
  background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(37,211,102,.45);
  transition:transform .25s var(--ease-spring),box-shadow .25s;
}
.whatsapp-float:hover{
  transform:scale(1.12) translateY(-2px);
  box-shadow:0 12px 30px rgba(37,211,102,.55);
}

/* ════════════════════════════
   TAGLINE + 2 FOTO
════════════════════════════ */
.tagline-section{
  background:#fff;
  padding:72px 0 64px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.tagline-text{
  font-family:'El Messiri',Georgia,serif;
  font-size:clamp(21px,2.6vw,30px);
  color:#111;
  font-style:italic;
  font-weight:600;
  max-width:780px;
  margin:0 auto 44px;
  line-height:1.55;
  letter-spacing:-.01em;
}
.tagline-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  max-width:1100px;
  margin:0 auto;
}
.tagline-photo{
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:var(--shadow-md);
}
.tagline-photo img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.tagline-photo:hover img{transform:scale(1.04)}
.tagline-photo iframe{
  width:100%;height:100%;
  display:block;border:0;
}

/* ════════════════════════════
   NEWS SECTION HEADING (dots style)
════════════════════════════ */
.news-section-head{
  text-align:center;
  margin-bottom:40px;
}
.news-section-title{
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:clamp(22px,3vw,30px);
  font-weight:700;
  color:#111;
  letter-spacing:-.025em;
  margin-bottom:14px;
}
.news-dots{
  display:flex;align-items:center;
  justify-content:center;gap:6px;
}
.ndot{
  display:inline-block;
  height:5px;border-radius:3px;
}
.ndot-red   {width:28px;background:#d63031}
.ndot-yellow{width:20px;background:#f5c518}
.ndot-brown {width:14px;background:#8b5e3c}

/* news-selengkapnya plain link */
.news-selengkapnya{
  display:inline-block;
  margin-top:6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--green);
  border-bottom:1.5px solid transparent;
  padding-bottom:1px;
  transition:border-color .2s,color .2s;
}
.news-selengkapnya:hover{
  border-color:var(--green);
  color:var(--green-dark);
}

/* ════════════════════════════
   NEWS DETAIL PAGE
════════════════════════════ */
/* hero image fullwidth */
.article-hero-img{
  position:relative;
  width:100%;
  height:560px;
  margin-top:0;
  overflow:hidden;
}
.article-hero-img img{
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
}
.article-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.38) 0%,
    rgba(0,0,0,.22) 60%,
    rgba(0,0,0,.55) 100%
  );
}

/* article layout */
.article-section{
  background:var(--bg);
  padding:60px 0 80px;
}
.article-layout{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:48px;
  align-items:start;
}

/* main article */
.article-main{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:40px 44px;
  box-shadow:var(--shadow-sm);
}
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-bottom:22px;
  color:var(--green);font-size:12.5px;font-weight:600;
  transition:gap .2s;
}
.back-link:hover{gap:10px}
.article-meta-row{
  display:flex;align-items:center;
  flex-wrap:wrap;gap:12px;
  margin-bottom:16px;
}
.article-cat{
  display:inline-block;
  padding:3px 12px;
  background:var(--green);color:#fff;
  font-size:10px;font-weight:700;
  border-radius:999px;letter-spacing:.07em;text-transform:uppercase;
}
.article-date{
  font-size:12px;color:var(--muted);
  font-style:italic;
}
.article-views{
  display:flex;align-items:center;gap:4px;
  font-size:12px;color:var(--muted);
}
.article-title{
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:clamp(20px,2.8vw,30px);
  font-weight:700;color:#111;
  line-height:1.25;letter-spacing:-.025em;
  margin-bottom:14px;
}
.article-lead{
  font-size:15px;color:var(--muted);
  line-height:1.72;margin-bottom:24px;
}
.article-divider{
  height:1px;background:var(--line);margin-bottom:28px;
}
.article-content{
  font-size:15px;color:#334155;line-height:1.9;
}
.article-content p{margin-bottom:18px}

/* share */
.article-share{
  display:flex;align-items:center;gap:10px;
  margin-top:36px;padding-top:24px;
  border-top:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--muted);
}
.share-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  color:#fff;transition:transform .2s var(--ease-spring);
}
.share-btn:hover{transform:scale(1.15)}
.share-fb{background:#1877f2}
.share-tw{background:#000}
.share-wa{background:#25d366}

/* sidebar */
.article-sidebar{
  position:sticky;
  top:calc(var(--header-h) + 20px);
}
.sidebar-card{
  background:#fff;border-radius:var(--radius-lg);
  padding:28px 24px;box-shadow:var(--shadow-sm);
}
.sidebar-title{
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:16px;font-weight:700;color:#111;
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:2px solid var(--green);
}
.sidebar-news-card{
  display:flex;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--line);
  transition:opacity .2s;
}
.sidebar-news-card:last-child{border-bottom:none;padding-bottom:0}
.sidebar-news-card:hover{opacity:.75}
.sidebar-news-img{
  width:72px;height:60px;flex-shrink:0;
  border-radius:var(--radius-sm);overflow:hidden;
}
.sidebar-news-img img{
  width:100%;height:100%;object-fit:cover;
}
.sidebar-news-body{
  display:flex;flex-direction:column;gap:4px;flex:1;
}
.sidebar-news-date{
  font-size:10.5px;color:var(--muted);
}
.sidebar-news-title{
  font-size:13px;font-weight:600;
  color:#111;line-height:1.4;
}

/* related section */
.related-section{
  background:#fff;
  padding:64px 0 80px;
  border-top:1px solid var(--line);
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.related-news-card{
  display:flex;flex-direction:column;
  border-radius:var(--radius-md);overflow:hidden;
  background:var(--bg);border:1px solid var(--line);
  transition:transform .25s var(--ease-spring),box-shadow .25s,border-color .25s;
}
.related-news-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);border-color:transparent;
}
.related-news-img{
  aspect-ratio:16/10;overflow:hidden;
}
.related-news-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.related-news-card:hover .related-news-img img{transform:scale(1.06)}
.related-news-body{
  padding:16px;
  display:flex;flex-direction:column;gap:6px;
}
.related-news-cat{
  font-size:10px;font-weight:700;
  color:var(--green);letter-spacing:.08em;text-transform:uppercase;
}
.related-news-title{
  font-size:13px;font-weight:700;
  color:#111;line-height:1.4;
}
.related-news-date{
  font-size:11px;color:var(--muted);
  margin-top:2px;
}

/* old article-hero kept for back-compat */
.article-hero{
  padding:180px 0 80px;
  background:var(--navy);color:#fff;
  border-radius:0 0 40px 40px;
}
.article-meta{
  color:var(--gold);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}

/* ════════════════════════════
   ERROR PAGE
════════════════════════════ */
.error-body,.maintenance-body{min-height:100vh;background:var(--navy)}
.error-shell,.maintenance-shell{display:grid;min-height:100vh;place-items:center;padding:30px}
.error-card{
  width:min(560px,100%);padding:56px;
  border-radius:var(--radius-xl);background:#fff;
  text-align:center;box-shadow:var(--shadow-xl);
}
.error-code{
  display:block;color:var(--green);
  font-family:'El Messiri';font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
}
.error-card h1{
  margin:10px 0;font-family:'El Messiri';
  font-size:36px;letter-spacing:-.025em;color:#111;
}
.error-card p{margin:14px auto 24px;color:var(--muted)}

.eyebrow{
  display:inline-block;color:rgba(255,255,255,.8);
  font-family:'El Messiri';font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
}
.eyebrow.dark{color:var(--green)}
.maintenance-card{
  width:min(560px,100%);padding:56px;
  border-radius:var(--radius-xl);background:#fff;
  text-align:center;box-shadow:var(--shadow-xl);
}
.maintenance-visual{
  position:relative;width:130px;height:130px;
  margin:0 auto 28px;display:grid;place-items:center;
}
.maintenance-visual img{
  width:96px;height:96px;object-fit:contain;
  position:relative;z-index:1;
}
.maintenance-orbit{
  position:absolute;inset:0;
  border:3px dashed var(--green);
  border-radius:50%;opacity:.35;
  animation:maintenance-spin 14s linear infinite;
}
@keyframes maintenance-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.maintenance-card h1{
  margin:10px 0;font-family:'El Messiri';
  font-size:32px;letter-spacing:-.025em;color:#111;
}
.maintenance-card p{margin:14px auto 24px;color:var(--muted)}
.maintenance-login{
  display:inline-block;padding:13px 30px;
  background:var(--green);color:#fff!important;
  border-radius:var(--radius-xs);
  font-size:13.5px;font-weight:600;
  text-decoration:none;
  transition:all .25s var(--ease);
}
.maintenance-login:hover{background:var(--green-dark);transform:translateY(-2px)}

/* ════════════════════════════
   RESPONSIVE
════════════════════════════ */

/* ── Tablet landscape ── */
@media(max-width:1100px){
  .programs-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .footer-brand-col{grid-column:1/-1}
  .about-grid{gap:52px}
  .article-layout{grid-template-columns:1fr 280px;gap:32px}
  .related-grid{grid-template-columns:1fr 1fr}
}

/* ── Tablet portrait / large mobile ── */
@media(max-width:900px){
  :root{--header-nav:62px;--header-h:62px}

  /* === MOBILE NAV === */
  .main-nav{
    /* slide-in panel from right */
    display:flex;
    position:fixed;
    top:0;right:0;
    width:min(320px,85vw);
    height:100dvh;
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    overflow-y:auto;
    padding:80px 20px 40px;
    gap:2px;
    z-index:480;
    border-left:3px solid var(--green);
    box-shadow:-8px 0 40px rgba(0,0,0,.18);
    transform:translateX(100%);
    transition:transform .38s var(--ease);
    /* force dark text inside panel */
    --panel:1;
  }
  .main-nav.open{transform:translateX(0)}

  /* inside the panel every link is dark */
  .main-nav .nav-link{
    padding:13px 10px;
    font-size:15px;
    color:var(--text) !important;
    border-bottom:1px solid var(--line);
  }
  .main-nav .nav-link:hover{color:var(--green) !important}
  .main-nav .nav-link::after{display:none}
  .main-nav .nav-chevron{color:var(--muted) !important}
  .main-nav .nav-item{width:100%}

  /* inline accordion dropdown inside mobile panel */
  .main-nav .nav-dropdown{
    position:static;
    transform:none;
    opacity:1;
    pointer-events:auto;
    box-shadow:none;
    border-radius:8px;
    background:var(--green-light);
    margin:0 0 4px;
    padding:4px 0;
    /* hidden by default — revealed when parent has .mob-open */
    display:none;
  }
  .main-nav .nav-dropdown::before{display:none}
  .main-nav .nav-item.has-dropdown.mob-open .nav-dropdown{display:block}
  .main-nav .nav-item.has-dropdown.mob-open .nav-chevron{transform:rotate(180deg)}
  .main-nav .nav-dropdown a{
    padding:10px 14px;
    font-size:13.5px;
    color:var(--text);
  }
  .main-nav .nav-dropdown a:hover{
    background:rgba(0,0,0,.05);
    padding-left:18px;
  }

  /* divider + CTA */
  .main-nav .nav-divider{
    display:none;
  }
  .main-nav .nav-cta{
    margin:16px 0 0;
    width:100%;
    justify-content:center;
    padding:14px;
    border-radius:var(--radius-sm);
    background:var(--green) !important;
    border-color:var(--green) !important;
    color:#fff !important;
    backdrop-filter:none;
    border-radius:var(--radius-xs);
  }

  /* nav overlay backdrop */
  .nav-backdrop{
    display:none;
    position:fixed;inset:0;
    background:rgba(0,0,0,.45);
    z-index:470;
    backdrop-filter:blur(2px);
  }
  .nav-backdrop.visible{display:block}

  .nav-toggle{display:flex}

  /* hero — full height still but smaller min */
  .hero{height:100svh;min-height:420px}
  .hero-arrow{width:40px;height:40px}
  .hero-prev{left:12px}.hero-next{right:12px}
  .hero-scroll-hint{display:none}
  .hero-content{padding-bottom:60px}

  /* stats — 2×2 grid */
  .stats-grid{flex-wrap:wrap}
  .stat-item{flex:0 0 50%;border-right:none}
  .stat-divider{display:none}
  .stat-item:nth-child(1),
  .stat-item:nth-child(2){border-bottom:1px solid rgba(255,255,255,.15)}

  /* about */
  .about-section{padding:72px 0}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-images{min-height:340px}

  /* programs */
  .programs-section{padding:72px 0}
  .programs-grid{grid-template-columns:1fr 1fr}

  /* news */
  .news-section{padding:72px 0}
  .news-grid{grid-template-columns:1fr 1fr}

  /* faq */
  .faq-section{padding:72px 0}
  .faq-grid{grid-template-columns:1fr;gap:36px}

  /* testimonials */
  .testimonials-section{padding:72px 0}
  .testimonials-grid{grid-template-columns:1fr 1fr}
  .testimonial-card.featured{transform:none}
  .testimonial-card.featured:hover{transform:translateY(-4px)}

  /* registration cta */
  .registration-cta{padding:80px 0}

  /* footer */
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .section-header:not(.center){flex-direction:column;align-items:flex-start}

  /* tagline */
  .tagline-photos{grid-template-columns:1fr 1fr}

  /* article detail */
  .article-layout{grid-template-columns:1fr;gap:28px}
  .article-sidebar{position:static}
  .article-hero-img{height:380px}
  .article-main{padding:28px 24px}
  .related-grid{grid-template-columns:1fr 1fr}
  .related-section{padding:48px 0 60px}
}

/* ── Mobile ── */
@media(max-width:600px){
  .container{width:calc(100% - 28px)}

  /* instagram strip */
  .footer-ig-inner{flex-direction:column;text-align:center;gap:14px}
  .footer-ig-text{align-items:center}
  .footer-ig-handle{font-size:17px}
  .footer-ig-btn{width:100%;justify-content:center}

  /* hero */
  .hero{height:100svh;min-height:380px}
  .hero-content{padding-bottom:50px}
  .hero-title{font-size:clamp(30px,8vw,44px)}
  .hero-subtitle{font-size:14px}
  .hero-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
  .hero-actions .btn-primary,
  .hero-actions .btn-outline-white{width:auto;font-size:12.5px}
  .hero-actions .btn-primary{padding:11px 22px}
  .hero-actions .btn-outline-white{padding:10px 20px}
  .hero-badge-pill{font-size:11px;padding:5px 14px}
  .hero-arrow{display:none}

  /* stats — stacked */
  .stat-item{flex:0 0 100%;border-bottom:1px solid rgba(255,255,255,.12)}
  .stat-item:last-child{border-bottom:none}

  /* sections — tighter padding */
  .about-section,.programs-section,.news-section,
  .faq-section,.testimonials-section,.registration-cta,
  .quote-strip{padding:56px 0}

  /* about */
  .about-images{min-height:260px}
  .about-img-main{right:44px;bottom:40px}
  .about-img-small{width:130px;height:135px;border-width:4px}
  .about-img-badge{left:-6px;padding:12px 14px}
  .badge-number{font-size:24px}
  .about-features{grid-template-columns:1fr}

  /* programs */
  .programs-grid{grid-template-columns:1fr}

  /* news */
  .news-grid{grid-template-columns:1fr}
  .section-header{flex-direction:column;align-items:flex-start;gap:12px}

  /* faq */
  .faq-question{font-size:13.5px;padding:16px 0}

  /* testimonials */
  .testimonials-grid{grid-template-columns:1fr}
  .testimonial-card{padding:24px 20px}

  /* footer */
  .footer-grid{gap:28px}
  .footer-bottom-inner{flex-direction:column;text-align:center;gap:6px}
  .footer-top{padding:52px 0 40px}

  /* floats */
  .back-to-top{bottom:82px;right:16px}
  .whatsapp-float{bottom:22px;right:16px;width:46px;height:46px}

  /* tagline */
  .tagline-section{padding:48px 0}
  .tagline-photos{grid-template-columns:1fr;max-width:480px}
  .tagline-text{font-size:21px;margin-bottom:28px}

  /* article detail */
  .article-hero-img{height:280px}
  .article-main{padding:22px 18px}
  .article-title{font-size:20px}
  .related-grid{grid-template-columns:1fr 1fr}
}

/* Screenshot-inspired polish: softer school profile look, not boxy/template-like. */
:root{
  --navy:#062f36;
  --navy-dark:#041e24;
  --green:#00815f;
  --green-mid:#029b70;
  --blue:#2f72f6;
  --blue-deep:#1157e8;
  --gold:#f2c234;
  --cream:#fbfaf6;
  --bg:#ffffff;
  --text:#151515;
  --muted:#5d665f;
  --line:#eef0e8;
  --radius-sm:18px;
  --radius-md:28px;
  --radius-lg:38px;
  --radius-xl:54px;
  --shadow-xs:0 8px 18px rgba(4,30,36,.06);
  --shadow-md:0 18px 44px rgba(4,30,36,.10);
  --shadow-lg:0 24px 70px rgba(4,30,36,.14);
}

body{
  background:#fff;
  color:var(--text);
  font-family:'Neue Montreal',Arial,sans-serif;
}

.container{
  width:min(1120px,calc(100% - 56px));
}

.site-header{
  padding:26px 0;
  background:linear-gradient(180deg,rgba(4,30,36,.38),rgba(4,30,36,0));
}

.site-header.scrolled{
  padding:12px 0;
  background:rgba(6,47,54,.88);
  box-shadow:0 16px 42px rgba(4,30,36,.18);
  backdrop-filter:blur(18px);
}

.nav-wrap{
  gap:28px;
}

.brand{
  width:310px;
  max-width:34vw;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.22));
}

.main-nav{
  gap:34px;
  margin-left:auto;
  color:#fff;
  font-family:'El Messiri',Georgia,serif;
  font-size:13px;
  font-weight:600;
  text-shadow:0 2px 9px rgba(0,0,0,.35);
}

.main-nav>a:not(.nav-login)::after{
  height:2px;
  background:var(--gold);
}

.nav-login{
  padding:13px 16px;
  border:0;
  border-radius:4px;
  background:#fff;
  color:#111;
  font-family:'Neue Montreal',Arial,sans-serif;
  text-shadow:none;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.hero{
  height:720px;
  min-height:620px;
  border-radius:0;
  background:var(--navy);
}

.hero-slide{
  transform:scale(1.01);
  filter:saturate(1.03) contrast(1.02);
}

.hero-overlay{
  background:
    linear-gradient(180deg,rgba(4,30,36,.12) 0%,rgba(4,30,36,.03) 45%,rgba(4,30,36,.30) 100%),
    linear-gradient(90deg,rgba(4,30,36,.18) 0%,rgba(4,30,36,.03) 42%,rgba(4,30,36,.16) 100%);
}

.hero-content{
  justify-content:flex-start;
  align-items:flex-end;
  padding-bottom:150px;
}

.hero-text-wrap{
  max-width:460px;
  margin-left:58px;
}

.hero-badge-pill,
.hero-subtitle,
.hero-scroll-hint,
.hero-arrow,
.hero-dots{
  display:none!important;
}

.hero-title{
  max-width:360px;
  font-family:'El Messiri',Georgia,serif;
  font-size:clamp(34px,4.4vw,54px);
  line-height:.94;
  letter-spacing:-.035em;
  color:#fff;
  text-shadow:0 4px 16px rgba(0,0,0,.35);
}

.hero-actions{
  margin-top:18px;
}

.btn-primary,
.btn-gold,
.button-primary{
  border:0;
  border-radius:9px;
  background:var(--gold);
  color:#fff;
  box-shadow:0 12px 24px rgba(242,194,52,.32);
}

.btn-primary:hover,
.btn-gold:hover,
.button-primary:hover{
  background:#e7b722;
  transform:translateY(-3px);
}

.btn-outline-white{
  border-color:rgba(255,255,255,.6);
  border-radius:9px;
  color:#fff;
}

.stats-bar{
  display:none;
}

.about-section{
  padding:86px 0 70px;
  background:#fff;
}

.about-grid{
  grid-template-columns:1fr;
  gap:42px;
}

.about-content{
  max-width:860px;
  margin:0 auto;
  text-align:center;
}

.section-label{
  color:var(--green);
  letter-spacing:.15em;
}

.about-content .section-label,
.about-content .about-text,
.about-content .about-features,
.about-content .btn-primary{
  display:none;
}

.about-tagline{
  margin:0;
  color:#111;
  font-family:'El Messiri',Georgia,serif;
  font-size:clamp(22px,3vw,31px);
  font-weight:700;
  line-height:1.45;
}

.about-images{
  order:2;
  display:grid;
  min-height:auto;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  width:min(820px,100%);
  margin:0 auto;
}

.about-img-main,
.about-img-small{
  position:static;
  width:100%;
  height:240px;
  overflow:hidden;
  border-radius:42px;
  box-shadow:0 10px 0 rgba(4,30,36,.07),var(--shadow-md);
}

.about-img-main img,
.about-img-small img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.about-img-badge{
  display:none;
}

.registration-cta{
  margin:34px auto 90px;
  width:min(1080px,calc(100% - 56px));
  overflow:hidden;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
}

.registration-cta .cta-overlay{
  background:linear-gradient(90deg,rgba(6,47,54,.86),rgba(6,47,54,.28));
}

.programs-section{
  padding:92px 0;
  background:#fff;
}

.section-heading{
  font-family:'El Messiri',Georgia,serif;
  color:#111;
}

.programs-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:stretch;
}

.program-card{
  overflow:hidden;
  border:0;
  border-radius:40px;
  box-shadow:var(--shadow-md);
}

.program-card:hover{
  transform:translateY(-7px);
}

.program-img{
  border-radius:0;
}

.program-img img{
  border-radius:0;
}

.program-body{
  background:linear-gradient(135deg,#5489ff,var(--blue-deep));
  color:#fff;
  padding:30px 34px;
}

.program-body h3,
.program-body p,
.program-link{
  color:#fff;
}

.program-body p{
  opacity:.88;
}

.program-number{
  background:var(--gold);
  color:#fff;
  box-shadow:0 8px 18px rgba(242,194,52,.36);
}

.quote-strip{
  padding:34px 0 10px;
  background:#fff;
}

.quote-strip p{
  max-width:820px;
  margin:0 auto;
  color:#111;
  font-family:'El Messiri',Georgia,serif;
  font-size:clamp(22px,3.2vw,34px);
  line-height:1.45;
}

.news-section{
  padding:80px 0 86px;
  background:#fff;
}

.news-section .section-header{
  justify-content:center;
  text-align:center;
}

.news-section .btn-outline-green{
  display:none;
}

.news-grid{
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.news-card{
  border:0;
  border-radius:0;
  box-shadow:none;
}

.news-card:hover{
  transform:translateY(-4px);
  box-shadow:none;
}

.news-img-wrap{
  overflow:hidden;
  border-radius:0 34px 0 0;
  aspect-ratio:1.1/1;
}

.news-img-wrap img{
  border-radius:0 34px 0 0;
}

.news-category{
  display:none;
}

.news-body{
  padding:24px 14px 0;
  gap:10px;
}

.news-date{
  color:#111;
  font-family:'El Messiri',Georgia,serif;
}

.news-title{
  font-family:'El Messiri',Georgia,serif;
  font-size:17px;
  line-height:1.45;
}

.news-excerpt{
  color:#111;
  font-family:'El Messiri',Georgia,serif;
  font-size:13px;
  line-height:1.62;
  -webkit-line-clamp:6;
}

.news-link{
  margin-top:16px;
  color:#111;
  font-family:'El Messiri',Georgia,serif;
  font-weight:400;
}

.faq-section{
  padding:88px 0;
  background:#fff;
}

.faq-grid{
  padding:42px;
  border-radius:var(--radius-xl);
  background:var(--cream);
}

.faq-item{
  border-color:#e4dfd3;
}

.testimonials-section{
  padding:82px 0 100px;
  background:#fff;
}

.testimonial-card{
  border:0;
  border-radius:0;
  box-shadow:14px 0 22px -22px rgba(0,0,0,.45);
  text-align:center;
}

.testimonial-card.featured{
  background:#fff;
  color:#111;
  box-shadow:14px 0 22px -22px rgba(0,0,0,.45);
  transform:none;
}

.testimonial-card.featured .testimonial-text,
.testimonial-card.featured .testimonial-name{
  color:#111;
}

.testimonial-card.featured .testimonial-role{
  color:var(--green);
}

.testimonial-photo{
  margin:0 auto;
  width:62px;
  height:62px;
}

.testimonial-author{
  justify-content:center;
  flex-direction:column;
  border-top:0;
}

.site-footer{
  overflow:hidden;
  background:#020202;
}

.footer-top{
  padding:0;
}

.footer-grid{
  grid-template-columns:1.2fr .9fr 1fr;
  gap:0;
}

.footer-brand-col,
.footer-col{
  padding:64px 56px;
}

.footer-col:nth-child(3){
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:280px;
  background:var(--green);
}

.footer-col:nth-child(3) .footer-col-title{
  color:#fff;
  font-family:'El Messiri',Georgia,serif;
  font-size:24px;
  line-height:1.45;
  letter-spacing:0;
  text-align:center;
}

.footer-logo{
  filter:none;
  width:260px;
  max-height:none;
}

.footer-tagline{
  color:#fff;
  font-family:'El Messiri',Georgia,serif;
  font-size:22px;
  letter-spacing:0;
  text-transform:none;
}

.footer-desc,
.footer-contact li,
.footer-links li a{
  color:#fff;
  font-family:'El Messiri',Georgia,serif;
}

.footer-socials,
.footer-links{
  display:none;
}

.footer-bottom{
  border-top:0;
  background:linear-gradient(90deg,#6ea0ff,#0068ff);
}

.footer-bottom-inner{
  justify-content:center;
  color:#fff;
  font-family:'El Messiri',Georgia,serif;
}

.back-to-top{
  background:#ff8500;
  box-shadow:0 8px 20px rgba(255,133,0,.38);
}

.whatsapp-float{
  display:none;
}

@media(max-width:900px){
  .container{width:calc(100% - 34px)}
  .brand{width:250px;max-width:72vw}
  .main-nav{
    top:74px;
    background:#fff;
    color:#111;
    text-shadow:none;
  }
  .hero{height:560px;min-height:500px}
  .hero-content{padding-bottom:90px}
  .hero-text-wrap{margin-left:0}
  .about-images,.programs-grid,.news-grid{grid-template-columns:1fr}
  .about-img-main,.about-img-small{height:230px}
  .registration-cta{width:calc(100% - 34px)}
  .footer-grid,.footer-grid.has-instagram,.footer-grid.has-instagram-embed{grid-template-columns:1fr}
  .footer-brand-col,.footer-col{padding:46px 30px}
}

@media(max-width:600px){
  .brand{width:210px}
  .site-header{padding:18px 0}
  .hero{height:470px;min-height:440px}
  .hero-title{font-size:37px}
  .hero-content{padding-bottom:70px}
  .about-section,.programs-section,.news-section,.faq-section,.testimonials-section{padding:64px 0}
  .faq-grid{padding:26px;border-radius:28px}
  .news-img-wrap{border-radius:0 28px 0 0}
  .news-img-wrap img{border-radius:0 28px 0 0}
}

/* Active header/footer markup refinements */
.header-topbar{
  display:none!important;
}

.header-main{
  height:auto!important;
  min-height:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.site-header.shrunk .header-main{
  height:auto!important;
  background:transparent!important;
}

.nav-wrap{
  min-height:64px;
}

.nav-link{
  color:#fff!important;
  font-family:'El Messiri',Georgia,serif;
  font-size:13px;
  font-weight:600;
  opacity:.96;
}

.nav-link:hover,
.nav-link.active{
  color:#fff!important;
}

.nav-chevron{
  display:none;
}

.nav-item.has-dropdown>.nav-link::after,
.main-nav>.nav-link:not(.active)::after{
  content:" +";
}

.nav-dropdown{
  border:0;
  border-radius:18px;
  box-shadow:0 18px 42px rgba(4,30,36,.18);
}

.nav-dropdown a{
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:15px;
  padding:10px 12px;
  text-shadow:none;
}

.nav-cta{
  min-width:48px;
  min-height:48px;
  padding:0!important;
  border-radius:3px!important;
  background:#fff!important;
  color:#111!important;
  font-size:0!important;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.nav-cta::before{
  content:"";
  display:block;
  width:17px;
  height:17px;
  margin:auto;
  border:3px solid #111;
  border-radius:50%;
  transform:translate(-2px,-1px);
}

.nav-cta::after{
  content:"";
  position:absolute;
  width:8px;
  height:3px;
  background:#111;
  transform:translate(27px,28px) rotate(45deg);
  border-radius:4px;
}

.footer-col:nth-child(3) .footer-contact{
  display:none;
}

.footer-col:nth-child(3) .footer-col-title{
  font-size:0;
}

.footer-col:nth-child(3) .footer-col-title::after{
  content:"INSTAGRAM\A SEKOLAH";
  white-space:pre;
  color:#fff;
  font-family:'El Messiri',Georgia,serif;
  font-size:24px;
  line-height:1.45;
  letter-spacing:0;
}

@media(max-width:900px){
  .nav-link{
    color:#111!important;
    text-shadow:none;
  }

  .nav-item.has-dropdown>.nav-link::after,
  .main-nav>.nav-link:not(.active)::after{
    content:"";
  }

  .nav-cta{
    width:100%;
    font-size:13px!important;
    color:#fff!important;
    background:var(--green)!important;
  }

  .nav-cta::before,
  .nav-cta::after{
    display:none;
  }
}

/* Restore the previous modern rounded landing style. */
.header-topbar{
  display:block!important;
}

.header-main{
  height:var(--header-nav)!important;
  min-height:var(--header-nav)!important;
  background:#fff!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:var(--shadow-sm)!important;
}

.site-header{
  padding:0!important;
  background:#fff!important;
  color:var(--text)!important;
}

.site-header.shrunk .header-main{
  height:58px!important;
  background:#fff!important;
}

.nav-wrap{
  min-height:0;
}

.brand{
  width:290px;
  max-width:32vw;
  filter:none;
}

.nav-link{
  color:var(--text)!important;
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:13px;
  font-weight:600;
  text-shadow:none;
}

.nav-link:hover,
.nav-link.active{
  color:var(--green)!important;
}

.nav-chevron{
  display:inline-block;
}

.nav-item.has-dropdown>.nav-link::after,
.main-nav>.nav-link:not(.active)::after{
  content:"";
}

.nav-cta{
  min-width:0;
  min-height:0;
  padding:10px 18px!important;
  border-radius:999px!important;
  background:var(--green)!important;
  color:#fff!important;
  font-size:12.5px!important;
  box-shadow:none;
}

.nav-cta::before,
.nav-cta::after{
  display:none;
}

.hero{
  height:620px;
  min-height:520px;
  border-radius:0 0 46px 46px;
  background:var(--navy);
}

/* Scrim tipis hanya di sisi kiri-bawah tempat teks berada; sisanya bening
   supaya foto latar terlihat jelas (tanpa gelap di pojok-pojok). */
.hero-overlay{
  background:linear-gradient(90deg,rgba(5,30,38,.42) 0%,rgba(5,30,38,.16) 34%,rgba(5,30,38,0) 58%);
}

.hero-arrow,
.hero-dots,
.hero-scroll-hint{
  display:flex!important;
}

.hero-badge-pill{
  display:inline-flex!important;
}

.hero-subtitle{
  display:block!important;
}

.hero-content{
  justify-content:flex-start;
  align-items:center;
  padding-bottom:0;
}

.hero-text-wrap{
  max-width:760px;
  margin-left:0;
}

.hero-title{
  max-width:760px;
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:clamp(38px,5vw,64px);
  line-height:1.06;
}

/* subtitle tetap sempit supaya kalimatnya rapi meski judul dilebarkan */
.hero-subtitle{
  max-width:480px;
}

.stats-bar{
  display:block;
}

.about-section{
  padding:100px 0;
  background:var(--bg);
}

.about-grid{
  grid-template-columns:1fr 1fr;
  gap:70px;
}

.about-content{
  max-width:none;
  margin:0;
  text-align:left;
}

.about-content .section-label{
  display:inline-flex;
}

.about-content .about-text{
  display:block;
}

.about-content .about-features{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.about-content .btn-primary{
  display:inline-flex;
}

.about-tagline{
  color:var(--muted);
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:16px;
  font-weight:400;
}

.about-images{
  order:initial;
  display:block;
  min-height:460px;
  width:auto;
  margin:0;
}

.about-img-main{
  position:absolute;
  inset:30px 0 0 80px;
  width:auto;
  height:auto;
  border-radius:var(--radius-xl);
}

.about-img-small{
  position:absolute;
  left:0;
  bottom:40px;
  width:210px;
  height:220px;
  border-radius:var(--radius-lg);
}

.about-img-badge{
  display:flex;
}

.registration-cta{
  width:auto;
  margin:0;
  border-radius:0;
}

.programs-section{
  padding:100px 0;
  background:var(--bg);
}

.programs-grid{
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.program-card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
}

.program-img,
.program-img img{
  border-radius:0;
}

.program-body{
  background:#fff;
  color:var(--text);
}

.program-body h3{
  color:#111;
}

.program-body p{
  color:var(--muted);
  opacity:1;
}

.program-link{
  color:var(--green);
}

.quote-strip{
  padding:64px 0;
  background:#000;
}

.quote-strip p{
  color:#fff;
  font-family:'El Messiri','Neue Montreal',sans-serif;
}

.news-section{
  padding:100px 0;
  background:#fff;
}

.news-section .section-header{
  justify-content:space-between;
  text-align:left;
}

.news-section .btn-outline-green{
  display:inline-flex;
}

.news-grid{
  grid-template-columns:repeat(3,1fr);
}

.news-card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
}

.news-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}

.news-img-wrap,
.news-img-wrap img{
  border-radius:0;
}

.news-category{
  display:block;
}

.news-body{
  padding:20px 22px 24px;
}

.news-date{
  color:var(--muted);
  font-family:'Neue Montreal',Arial,sans-serif;
}

.news-title{
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:15.5px;
}

.news-excerpt{
  color:var(--muted);
  font-family:'Neue Montreal',Arial,sans-serif;
  -webkit-line-clamp:3;
}

.news-link{
  color:var(--green);
  font-family:'Neue Montreal',Arial,sans-serif;
  font-weight:600;
}

.faq-section{
  padding:100px 0;
  background:var(--bg);
}

.faq-grid{
  padding:0;
  border-radius:0;
  background:transparent;
}

.testimonials-section{
  padding:100px 0;
  background:#fff;
}

.testimonial-card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
  text-align:left;
}

.testimonial-card.featured{
  background:var(--green);
  color:#fff;
  box-shadow:var(--shadow-xl);
  transform:translateY(-10px);
}

.testimonial-card.featured .testimonial-text{
  color:rgba(255,255,255,.88);
}

.testimonial-card.featured .testimonial-name{
  color:#fff;
}

.testimonial-card.featured .testimonial-role{
  color:rgba(255,255,255,.65);
}

.testimonial-photo{
  margin:0;
  width:48px;
  height:48px;
}

.testimonial-author{
  justify-content:flex-start;
  flex-direction:row;
  border-top:1px solid var(--line);
}

.site-footer{
  background:#020202;
}

.footer-top{
  padding:72px 0 56px;
}

.footer-grid{
  grid-template-columns:1.5fr 1fr 1.3fr;
  gap:56px;
}
.footer-grid.has-instagram{
  grid-template-columns:1.3fr .8fr .9fr 1fr;
}
.footer-grid.has-instagram-embed{
  grid-template-columns:1.1fr .7fr 1.3fr .9fr;
}

.footer-instagram-widget{
  width:180px;height:240px;
  overflow:hidden;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);
}
.footer-instagram-widget.is-embed{
  width:100%;max-width:340px;
  height:auto;
  overflow:visible;
  background:none;
  border-radius:0;
}
.footer-instagram-widget.is-embed .instagram-media{
  margin:0!important;
}
.footer-instagram-widget:not(.is-embed) iframe{
  width:100%!important;
  height:100%!important;
  border:0;
}
.footer-instagram-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  width:100%;height:100%;
}
.footer-instagram-grid a{
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:4px;
}
.footer-instagram-grid img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .3s var(--ease);
}
.footer-instagram-grid a:hover img{transform:scale(1.1)}

.footer-brand-col,
.footer-col{
  padding:0;
}

.footer-col:nth-child(3){
  display:block;
  min-height:0;
  background:transparent;
}

.footer-col:nth-child(3) .footer-contact{
  display:flex;
}

.footer-col:nth-child(3) .footer-col-title{
  color:#fff;
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:11.5px;
  line-height:1.2;
  letter-spacing:.14em;
  text-align:left;
}

.footer-col:nth-child(3) .footer-col-title::after{
  content:"";
}

.footer-logo{
  filter:none;
  width:200px;
  max-height:58px;
}

.footer-tagline{
  color:var(--gold);
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.footer-desc,
.footer-contact li,
.footer-links li a{
  color:#fff;
  font-family:'Neue Montreal',Arial,sans-serif;
}

.footer-contact svg{
  color:#fff;
}

.footer-socials a{
  color:#fff;
}

.footer-links li a::before{
  background:#fff;
}

.footer-socials,
.footer-links{
  display:flex;
}

.footer-bottom{
  border-top:0;
  background:linear-gradient(90deg,#6ea0ff,#0068ff);
}

.footer-bottom-inner{
  justify-content:space-between;
  color:#fff;
  font-family:'Neue Montreal',Arial,sans-serif;
}

.back-to-top{
  background:var(--green);
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}

.whatsapp-float{
  display:flex;
}

@media(max-width:1100px){
  .programs-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:900px){
  .header-topbar{display:none!important}
  .main-nav{
    top:60px;
    background:#fff;
    color:var(--text);
  }
  .nav-link{color:var(--text)!important}
  .nav-cta{
    width:auto;
    color:#fff!important;
    background:var(--green)!important;
  }
  .hero{height:480px;min-height:400px}
  .about-grid{grid-template-columns:1fr}
  .about-images{min-height:360px}
  .programs-grid,.news-grid{grid-template-columns:1fr 1fr}
  .footer-grid,.footer-grid.has-instagram,.footer-grid.has-instagram-embed{grid-template-columns:1fr}
}

@media(max-width:600px){
  .brand{width:205px}
  .site-header{padding:0!important}
  .hero{height:360px;min-height:320px}
  .hero-title{font-size:34px}
  .about-section,.programs-section,.news-section,.faq-section,.testimonials-section,.registration-cta{padding:70px 0}
  .about-images{min-height:280px}
  .about-img-main{right:50px;bottom:45px}
  .about-img-small{width:140px;height:145px}
  .programs-grid,.news-grid{grid-template-columns:1fr}
}

/* Transparent landing header over the hero. */
.site-header{
  background:linear-gradient(180deg,rgba(5,30,38,.42),rgba(5,30,38,0))!important;
  color:#fff!important;
  box-shadow:none!important;
}

.header-main{
  background:transparent!important;
  border-bottom:0!important;
  box-shadow:none!important;
}

.site-header .brand img{
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
}

.site-header .nav-link{
  color:#fff!important;
  text-shadow:0 2px 8px rgba(0,0,0,.32);
}

.site-header .nav-link:hover,
.site-header .nav-link.active{
  color:#fff!important;
}

.site-header .nav-link::after{
  background:var(--gold);
}

.site-header .nav-chevron{
  color:#fff;
}

.site-header .nav-cta{
  background:rgba(255,255,255,.92)!important;
  color:#111!important;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}

.site-header.shrunk{
  background:rgba(255,255,255,.88)!important;
  color:var(--text)!important;
  box-shadow:0 10px 32px rgba(0,0,0,.08)!important;
  backdrop-filter:blur(16px);
}

.site-header.shrunk .header-main{
  background:transparent!important;
  box-shadow:none!important;
}

.site-header.shrunk .brand img{
  filter:none;
}

.site-header.shrunk .nav-link{
  color:var(--text)!important;
  text-shadow:none;
}

.site-header.shrunk .nav-link:hover,
.site-header.shrunk .nav-link.active{
  color:var(--green)!important;
}

.site-header.shrunk .nav-chevron{
  color:currentColor;
}

.site-header.shrunk .nav-cta{
  background:var(--green)!important;
  color:#fff!important;
  box-shadow:none;
}

@media(max-width:900px){
  .site-header .main-nav{
    background:#fff!important;
  }

  .site-header .main-nav .nav-link{
    color:var(--text)!important;
    text-shadow:none;
  }
}

/* Better glass header: transparent but intentional, not washed out. */
.site-header{
  top:18px!important;
  width:100%!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none;
}

.site-header.hide{
  transform:translateY(-130%)!important;
}

.header-main{
  width:min(1380px,calc(100% - 64px));
  height:72px!important;
  min-height:72px!important;
  margin:0 auto;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:999px;
  background:rgba(5,30,38,.42)!important;
  box-shadow:0 18px 54px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(18px) saturate(1.15);
  pointer-events:auto;
}

.nav-wrap{
  height:72px;
  padding:0 22px;
}

.brand{
  width:270px;
  max-width:30vw;
}

.site-header .brand img{
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.42));
}

.main-nav{
  gap:6px;
}

.site-header .nav-link{
  padding:10px 15px;
  border-radius:999px;
  color:#fff!important;
  font-size:13px;
  font-weight:700;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}

.site-header .nav-link::after{
  display:none;
}

.site-header .nav-link:hover,
.site-header .nav-link.active{
  background:rgba(255,255,255,.13);
  color:#fff!important;
}

.site-header .nav-cta{
  margin-left:12px;
  padding:13px 24px!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#111!important;
  font-size:13px!important;
  font-weight:800;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.site-header .nav-cta:hover{
  transform:translateY(-2px);
}

.site-header.shrunk{
  top:10px!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none;
}

.site-header.shrunk .header-main{
  height:62px!important;
  min-height:62px!important;
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(255,255,255,.75)!important;
  box-shadow:0 14px 38px rgba(4,30,36,.12)!important;
}

.site-header.shrunk .nav-wrap{
  height:62px;
}

.site-header.shrunk .brand{
  width:235px;
}

.site-header.shrunk .brand img{
  filter:none;
}

.site-header.shrunk .nav-link{
  color:var(--text)!important;
  text-shadow:none;
}

.site-header.shrunk .nav-link:hover,
.site-header.shrunk .nav-link.active{
  background:var(--green-light);
  color:var(--green)!important;
}

.site-header.shrunk .nav-cta{
  background:var(--green)!important;
  color:#fff!important;
  box-shadow:none;
}

.hero{
  height:calc(100svh - 18px);
  min-height:660px;
}

/* Teks hero ditengahkan secara vertikal. Baris 2398 menyetel
   justify-content:flex-start sehingga isi menempel di atas — hanya turun
   sejauh padding-top pembebas header, menyisakan ruang kosong besar di bawah.
   padding atas & bawah dibuat sama besar agar titik tengah isi jatuh persis
   di tengah hero, bukan di tengah area sisa di bawah header.
   Mobile (<=768px) sudah ditengahkan lewat blok "4. Hero content" di bagian
   MOBILE FIX OVERRIDES, jadi sengaja tidak ikut diubah di sini. */
.hero-content{
  padding-top:84px;
}

@media(min-width:769px){
  .hero-content{
    justify-content:center;
    padding-top:84px;
    padding-bottom:84px;
  }
}

@media(max-width:1100px){
  .header-main{
    width:calc(100% - 32px);
  }

  .brand{
    width:230px;
    max-width:34vw;
  }

  .site-header .nav-link{
    padding:9px 10px;
    font-size:12px;
  }
}

@media(max-width:900px){
  .site-header{
    top:10px!important;
  }

  .header-main{
    height:62px!important;
    min-height:62px!important;
    border-radius:28px;
    background:rgba(5,30,38,.58)!important;
  }

  .nav-wrap{
    height:62px;
    padding:0 16px;
  }

  .brand{
    width:220px;
    max-width:72vw;
  }

  .nav-toggle span{
    background:#fff;
  }

  .site-header.shrunk .nav-toggle span{
    background:var(--text);
  }

  .site-header .main-nav{
    top:78px;
    left:16px;
    right:16px;
    border-radius:24px;
    background:#fff!important;
    box-shadow:0 20px 50px rgba(4,30,36,.18);
  }

  .site-header .main-nav .nav-link{
    color:var(--text)!important;
    text-shadow:none;
  }
}

@media(max-width:600px){
  .header-main{
    width:calc(100% - 20px);
  }

  .brand{
    width:190px;
  }

  .hero{
    min-height:560px;
  }
}

/* ════════════════════════════
   MOBILE FIX OVERRIDES (highest priority — must stay at end of file)
════════════════════════════ */

/* 1. Prevent horizontal overflow (white strip on right) */
html{overflow-x:hidden!important;max-width:100vw}
body{overflow-x:hidden!important;max-width:100vw;position:relative}
*{box-sizing:border-box}

/* hide mobile nav panel when closed — prevents it showing as scrollable overflow */
@media(max-width:900px){
  .main-nav:not(.open){
    visibility:hidden;
    pointer-events:none;
    transition:transform .38s var(--ease),visibility 0s .38s;
  }
  .main-nav.open{
    visibility:visible;
    transition:transform .38s var(--ease),visibility 0s 0s;
  }
}

/* 2. Hero full viewport height always */
.hero{height:100svh!important;min-height:100svh!important;border-radius:0!important}

/* 3. Hero arrow: visible on desktop, HIDDEN on mobile */
@media(min-width:769px){
  .hero-arrow{display:flex!important}
}
@media(max-width:768px){
  .hero-arrow{display:none!important}
  .hero-scroll-hint{display:none!important}
}

/* 4. Hero content — give text proper left padding so it doesn't clip into arrows */
@media(max-width:768px){
  .hero-content{
    padding-left:0!important;
    padding-right:0!important;
    padding-bottom:72px!important;
    justify-content:center!important;
  }
  /* width (bukan hanya max-width) supaya teks mengikuti lebar layar;
     tanpa ini, kolom hero yang flex membuat judul selebar isinya lalu meluber. */
  .hero-text-wrap{
    width:100%!important;max-width:100%!important;
    align-self:stretch!important;
    margin-left:0!important;
    padding:0!important;
  }
  /* batasi ke lebar kolom (bukan lebar isi judul desktop 760px) agar tidak meluber */
  .hero-title{
    max-width:100%!important;
    font-size:clamp(28px,8.5vw,44px)!important;
    letter-spacing:-.03em!important;
    overflow-wrap:break-word!important;
    word-break:break-word!important;
  }
  .hero-subtitle{max-width:100%!important}
  .hero-badge-pill{margin-top:0!important}
  /* tombol hero di mobile: ringkas mengikuti lebar teks, bukan selebar layar.
     flex-wrap dipakai supaya di layar sempit (<360px) turun sendiri ke baris
     kedua tanpa memaksa tombolnya jadi panjang. */
  .hero-actions{
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:10px!important;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline-white{
    width:auto!important;
    font-size:12.5px!important;
  }
  .hero-actions .btn-primary{padding:11px 22px!important}
  .hero-actions .btn-outline-white{padding:10px 20px!important}
}

/* 5. Fix registration-cta width overflow on mobile */
@media(max-width:900px){
  .registration-cta{
    width:100%!important;
    border-radius:0!important;
  }
}

/* 6. Header — transparent on hero, white when scrolled */
.site-header{
  background:transparent!important;
  padding:0!important;
  box-shadow:none!important;
}
.header-main{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:none!important;
  box-shadow:none!important;
  height:var(--header-nav)!important;
  min-height:0!important;
  width:100%!important;
}
.site-header.scrolled .header-main{
  background:#fff!important;
  backdrop-filter:none!important;
  box-shadow:0 2px 20px rgba(0,0,0,.09)!important;
}
.site-header.shrunk .header-main{
  height:58px!important;
  background:#fff!important;
  box-shadow:0 4px 24px rgba(0,0,0,.11)!important;
}
.header-topbar{display:none!important}

/* 6b. Desktop header — hug its content instead of stretching full width,
   so the pill/bar isn't left with a big empty gap between the logo and nav */
@media(min-width:901px){
  .header-main{
    width:fit-content!important;
    max-width:calc(100% - 48px)!important;
    margin:0 auto!important;
  }
  .header-main .nav-wrap{
    width:fit-content!important;
    justify-content:flex-start!important;
    gap:40px!important;
  }
}

/* 6c. Mobile — beri jarak kiri/kanan supaya pill header tidak menempel tepi
   layar. Blok 6 memakai width:100%!important, jadi override ini wajib ikut
   !important dan harus berada sesudahnya. Insetnya disamakan dengan panel
   .main-nav (left/right:16px) agar menu sejajar dengan pill. */
@media(max-width:900px){
  .header-main{
    width:calc(100% - 32px)!important;
    margin-inline:auto!important;
  }
  /* .nav-wrap juga ber-class .container yang menyisipkan jarak lagi di dalam
     pill; cukup pakai padding agar logo & hamburger tidak makin terdesak. */
  .header-main .nav-wrap{
    width:100%;
    padding:0 14px;
  }
}

/* 7. Nav links — white on transparent (hero), dark on white (scrolled) */
@media(min-width:901px){
  /* transparent state — white text */
  .site-header:not(.scrolled):not(.shrunk) .main-nav .nav-link{
    color:rgba(255,255,255,.92)!important;
    text-shadow:0 1px 4px rgba(0,0,0,.3)!important;
    font-family:'Neue Montreal',Arial,sans-serif!important;
    opacity:1!important;
  }
  .site-header:not(.scrolled):not(.shrunk) .main-nav .nav-link:hover,
  .site-header:not(.scrolled):not(.shrunk) .main-nav .nav-link.active{
    color:#fff!important;
  }
  .site-header:not(.scrolled):not(.shrunk) .main-nav .nav-chevron{
    color:rgba(255,255,255,.55)!important;
  }
  .site-header:not(.scrolled):not(.shrunk) .main-nav .nav-divider{
    background:rgba(255,255,255,.25)!important;
  }
  .site-header:not(.scrolled):not(.shrunk) .nav-cta{
    background:rgba(255,255,255,.15)!important;
    border:1.5px solid rgba(255,255,255,.5)!important;
    color:#fff!important;
    box-shadow:none!important;
  }
  .site-header:not(.scrolled):not(.shrunk) .nav-cta:hover{
    background:rgba(255,255,255,.28)!important;
  }

  /* scrolled state — dark text on white bg */
  .site-header.scrolled .main-nav .nav-link,
  .site-header.shrunk  .main-nav .nav-link{
    color:#1f2937!important;
    text-shadow:none!important;
    font-family:'Neue Montreal',Arial,sans-serif!important;
    opacity:1!important;
  }
  .site-header.scrolled .main-nav .nav-link:hover,
  .site-header.shrunk  .main-nav .nav-link:hover,
  .site-header.scrolled .main-nav .nav-link.active,
  .site-header.shrunk  .main-nav .nav-link.active{
    color:var(--green)!important;
  }
  .site-header.scrolled .main-nav .nav-chevron,
  .site-header.shrunk  .main-nav .nav-chevron{
    color:#9ca3af!important;
  }
  .site-header.scrolled .main-nav .nav-divider,
  .site-header.shrunk  .main-nav .nav-divider{
    background:#e5e7eb!important;
  }
  .site-header.scrolled .nav-cta,
  .site-header.shrunk  .nav-cta{
    background:var(--green)!important;
    border-color:var(--green)!important;
    color:#fff!important;
    box-shadow:0 4px 14px rgba(0,0,0,.20)!important;
  }
  .site-header.scrolled .nav-cta:hover,
  .site-header.shrunk  .nav-cta:hover{
    background:var(--green-dark)!important;
  }

  /* nav toggle always hidden on desktop */
  .nav-toggle{display:none!important}

  /* underline accent */
  .site-header .main-nav>.nav-link::after,
  .site-header .main-nav .nav-item.has-dropdown>.nav-link::after{content:""!important}
}

/* 8. Mobile nav drawer — dark text inside white panel */
@media(max-width:900px){
  .main-nav .nav-link{
    color:var(--text)!important;
    font-family:'Neue Montreal',Arial,sans-serif!important;
    text-shadow:none!important;
    opacity:1!important;
  }
  .main-nav .nav-link:hover,.main-nav .nav-link.active{color:var(--green)!important}
  .main-nav .nav-chevron{color:var(--muted)!important}
}

/* 9. Floating buttons — proper spacing */
.back-to-top{
  bottom:98px!important;right:24px!important;
  width:44px!important;height:44px!important;
}
.whatsapp-float{
  bottom:24px!important;right:24px!important;
  width:52px!important;height:52px!important;
}
@media(max-width:768px){
  .back-to-top{bottom:90px!important;right:16px!important}
  .whatsapp-float{bottom:16px!important;right:16px!important;width:46px!important;height:46px!important}
}

/* ════════════════════════════
   PROGRAM DETAIL PAGE
════════════════════════════ */
.program-banner{
  position:relative;
  padding:150px 0 70px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  text-align:center;
  overflow:hidden;
}
.program-banner-crumb{
  display:inline-flex;align-items:center;gap:6px;
  margin-bottom:14px;
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:13px;font-weight:600;
  color:rgba(255,255,255,.75);
}
.program-banner-crumb a{color:rgba(255,255,255,.75);transition:color .2s}
.program-banner-crumb a:hover{color:#fff}
.program-banner-title{
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:clamp(26px,4vw,38px);
  font-weight:800;
  color:#fff;
  letter-spacing:-.02em;
}

.program-about{
  padding:90px 0 30px;
  background:#fff;
  text-align:center;
}
.program-about .section-label{margin-inline:auto}
.program-about-title{
  max-width:620px;margin:14px auto 18px;
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:clamp(22px,3vw,30px);
  font-weight:800;
  color:var(--text);
}
.program-about-text{
  max-width:640px;margin:0 auto;
  color:var(--muted);
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:15.5px;line-height:1.8;
  text-align:justify;
}

.rich-content p{margin:0 0 18px}
.rich-content p:last-child{margin-bottom:0}
.rich-content h2,.rich-content h3{
  margin:32px 0 14px;
  font-family:'Neue Montreal',Arial,sans-serif;
  font-weight:800;color:var(--text);
  line-height:1.3;
}
.rich-content h2{font-size:24px}
.rich-content h3{font-size:19px}
.rich-content strong{color:var(--text);font-weight:700}
.rich-content ul,.rich-content ol{margin:0 0 18px;padding-left:22px}
.rich-content li{margin-bottom:8px}
.rich-content a{color:var(--green);text-decoration:underline}
.rich-content blockquote{
  margin:24px 0;padding:14px 20px;
  border-left:3px solid var(--green);
  background:var(--green-light);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text);font-style:italic;
}
.rich-content img{
  display:block;width:100%;height:auto;
  margin:24px 0;border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
/* video embed (YouTube/Vimeo) dari editor — abaikan width/height bawaan,
   ikuti lebar konten dengan rasio 16:9. Aturan .drive-embed di bawah lebih
   spesifik, jadi tetap memakai tinggi tetapnya sendiri. */
.rich-content iframe{
  display:block;width:100%;aspect-ratio:16/9;height:auto;
  margin:24px 0;border:0;border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
.rich-content .drive-embed{
  margin:24px 0;border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.rich-content .drive-embed iframe{
  display:block;width:100%;height:600px;border:0;
  touch-action:pan-y;-webkit-overflow-scrolling:touch;
}
.rich-content .drive-embed-fallback{
  display:block;padding:10px 16px;
  background:#f5f7fa;color:var(--green)!important;
  font-size:13px;font-weight:600;text-align:center;
  text-decoration:none!important;
}
@media(max-width:600px){
  .rich-content .drive-embed iframe{height:420px}
}

.program-sections{padding:20px 0 60px;background:#fff}
.program-block{
  max-width:900px;margin:0 auto;padding:46px 0;
  border-top:1px solid var(--line);
}
.program-block:first-child{border-top:0}
.program-block-title{
  margin-bottom:22px;
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:20px;font-weight:800;
  color:var(--text);
}
.program-block-images{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  margin-bottom:22px;
}
.program-block-images img{
  width:100%;height:260px;object-fit:cover;display:block;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}
.program-block-text{
  color:var(--muted);
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:15px;line-height:1.8;text-align:justify;
}

.program-news{padding:20px 0 100px;background:var(--bg)}
.program-news-grid{
  display:grid;grid-template-columns:1.3fr 1fr;gap:26px;
  align-items:stretch;
}
.program-news-featured{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  min-height:320px;color:#fff;
  box-shadow:var(--shadow-md);
}
.program-news-featured img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.program-news-featured::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,30,36,.9) 0%,rgba(4,30,36,.15) 55%,transparent 100%);
}
.program-news-featured-body{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:10px;
  height:100%;padding:26px;justify-content:flex-end;
}
.program-news-tag,
.program-news-item-tag{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;
  border-radius:999px;
  font-family:'Neue Montreal',Arial,sans-serif;
  font-weight:700;letter-spacing:.02em;
}
.program-news-tag::before,
.program-news-item-tag::before{content:'';border-radius:50%;flex-shrink:0}
.program-news-tag{
  padding:5px 12px;
  background:var(--green);
  font-size:11.5px;
}
.program-news-tag::before{width:6px;height:6px;background:#fff}
.program-news-featured-title{
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:19px;font-weight:700;line-height:1.35;
}
.program-news-featured-date{
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:12.5px;color:rgba(255,255,255,.75);
}

.program-news-list{display:flex;flex-direction:column;gap:14px}
.program-news-item{
  display:flex;gap:14px;align-items:flex-start;
  padding:12px;border-radius:var(--radius-md);
  background:#fff;box-shadow:var(--shadow-xs);
  transition:box-shadow .2s,transform .2s;
}
.program-news-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.program-news-item-img{
  flex-shrink:0;width:76px;height:76px;border-radius:var(--radius-sm);overflow:hidden;
}
.program-news-item-img img{width:100%;height:100%;object-fit:cover;display:block}
.program-news-item-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.program-news-item-tag{
  padding:3px 9px;
  background:var(--green-light);color:var(--green);
  font-size:10.5px;
}
.program-news-item-tag::before{width:5px;height:5px;background:var(--green)}
.program-news-item-title{
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:13.5px;font-weight:700;color:var(--text);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.program-news-item-date{
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:11.5px;color:var(--muted);
}

@media(max-width:800px){
  .program-news-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .program-block-images{grid-template-columns:1fr}
  .program-block-images img{height:220px}
}
@media(max-width:600px){
  .program-banner{padding:110px 0 50px}
  .program-about{padding:60px 0 20px}
}

/* ════════════════════════════
   GURU & KARYAWAN PAGE
════════════════════════════ */
.staff-section{padding:90px 0 100px;background:#fff;text-align:center}
.staff-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  margin-top:48px;text-align:left;
}
.staff-empty{
  grid-column:1/-1;
  padding:40px 0;
  text-align:center;
  color:var(--muted);
  font-family:'Neue Montreal',Arial,sans-serif;
}
.staff-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-xs);
  cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.staff-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(17,17,17,.28);
}
/* garis aksen tipis yang memanjang saat kartu disentuh */
.staff-card::after{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--green),var(--green-mid));
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
  z-index:2;
}
.staff-card:hover::after{transform:scaleX(1)}
.staff-photo{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--bg)}
.staff-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease);
}
.staff-card:hover .staff-photo img{transform:scale(1.06)}
.staff-body{padding:18px 20px 14px;flex:1}
.staff-name{
  display:block;
  font-family:'El Messiri',Arial,sans-serif;
  font-size:19px;font-weight:700;line-height:1.3;color:var(--text);
}
.staff-role{
  display:block;margin-top:4px;
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:13px;line-height:1.5;color:var(--muted);
}
.staff-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px 14px 20px;
  border-top:1px solid var(--line);
}
.staff-writer{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:12.5px;font-weight:700;color:var(--muted);
}
.staff-writer svg{flex:none}
/* yang sudah punya tulisan ditonjolkan dengan pill hijau */
.staff-card.has-news .staff-writer{
  padding:5px 12px;border-radius:999px;
  background:var(--green-light);color:var(--green-dark);
}
.staff-go{
  width:32px;height:32px;flex:none;
  display:inline-grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  color:var(--muted);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.staff-card:hover .staff-go{
  background:var(--green);border-color:var(--green);color:#fff;
  transform:translateX(3px);
}

.article-author-link{color:var(--green);font-weight:700;text-decoration:none}
.article-author-link:hover{text-decoration:underline}

/* ── halaman profil penulis ── */
.staff-profile{padding:60px 0 10px;background:#fff}
.staff-profile-card{
  display:flex;align-items:center;gap:32px;flex-wrap:wrap;
  padding:28px;
  background:linear-gradient(120deg,var(--green-light),var(--white) 55%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.staff-profile-photo{
  width:160px;height:160px;flex:none;
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bg);
  box-shadow:0 0 0 5px #fff,var(--shadow-md);
}
.staff-profile-photo img{width:100%;height:100%;object-fit:cover}
.staff-profile-info{flex:1 1 260px}
.staff-profile-name{
  display:block;
  font-family:'El Messiri',Arial,sans-serif;
  font-size:30px;font-weight:700;line-height:1.25;color:var(--text);
}
.staff-profile-role{
  display:block;margin-top:2px;
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:14px;color:var(--muted);
}
.staff-profile-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.staff-stat{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px;border-radius:999px;
  background:var(--white);border:1px solid var(--line);
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:13px;font-weight:700;color:var(--muted);
}
.staff-stat svg{color:var(--green)}
.staff-profile-back{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:13px;font-weight:700;color:var(--green);
  transition:gap .25s var(--ease);
}
.staff-profile-back:hover{gap:10px}
.staff-profile-heading{
  margin-bottom:28px;
  font-family:'El Messiri',Arial,sans-serif;
  font-size:24px;font-weight:700;color:var(--text);
}
.staff-news-empty{
  grid-column:1/-1;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:56px 24px;text-align:center;
  background:var(--cream);
  border:1px dashed var(--line);
  border-radius:var(--radius-md);
  color:var(--muted);
}
.staff-news-empty svg{color:var(--text);opacity:.35;margin-bottom:4px}
.staff-news-empty strong{
  font-family:'El Messiri',Arial,sans-serif;
  font-size:18px;color:var(--text);
}
.staff-news-empty span{font-size:14px}

@media(max-width:900px){
  .staff-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .staff-grid{grid-template-columns:1fr}
  .staff-section{padding:60px 0 70px}
  .staff-profile{padding:40px 0 0}
  .staff-profile-card{gap:18px}
  .staff-profile-photo{width:96px;height:96px}
  .staff-profile-name{font-size:22px}
}


/* ════════════════════════════
   INSTAGRAM FEED (kartu native, link manual)
════════════════════════════ */
.instagram-feed-section{
  padding:80px 0 100px;
  background:#fff;
}
.instagram-embed-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  justify-items:center;
}

@media(max-width:900px){
  .instagram-embed-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .instagram-embed-grid{grid-template-columns:1fr}
  .instagram-feed-section{padding:60px 0 70px}
}

/* ════════════════════════════
   PROGRAM UNGGULAN (kartu biru + foto, per baris)
════════════════════════════ */
.programs-list{
  display:flex;
  flex-direction:column;
  gap:28px;
}
.program-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:center;
}
.program-info-card{
  background:linear-gradient(135deg,#3a6df0,#1c3fc7);
  border-radius:var(--radius-lg);
  padding:40px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#fff;
  box-shadow:0 16px 40px -12px rgba(28,63,199,.45);
  align-self:stretch;
}
.program-info-card h3{
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:29px;font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:14px;
  color:#fff;
}
.program-info-card p{
  color:rgba(255,255,255,.88);
  font-size:16px;line-height:1.7;
  margin-bottom:24px;
}
.program-link-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  align-self:flex-start;
  padding:12px 26px;
  background:var(--gold);
  color:#111;
  font-weight:700;font-size:14.5px;
  border-radius:var(--radius-sm);
  box-shadow:0 8px 20px -6px rgba(232,168,0,.55);
  text-decoration:none;
  transition:all .25s var(--ease);
}
.program-link-btn svg{transition:transform .25s var(--ease)}
.program-link-btn:hover{
  background:var(--gold-dark);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -6px rgba(232,168,0,.6);
}
.program-link-btn:hover svg{transform:translateX(3px)}
.program-photo{
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:16/9;
  box-shadow:var(--shadow-md);
}
.program-photo img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .45s var(--ease);
}
.program-photo:hover img{transform:scale(1.06)}

@media(max-width:900px){
  .program-row{grid-template-columns:1fr}
  .program-photo{aspect-ratio:16/9;height:auto}
}
@media(max-width:560px){
  .program-info-card{padding:30px 26px}
}

/* ════════════════════════════
   HEADER SEARCH
════════════════════════════ */
.nav-search-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  border:none;background:transparent;
  color:inherit;cursor:pointer;
  border-radius:50%;
  transition:background .2s;
  flex-shrink:0;
}
.nav-search-toggle:hover,
.nav-search-toggle.active{background:rgba(255,255,255,.14)}

.nav-search-panel{
  position:absolute;top:100%;left:0;width:100%;
  background:#fff;
  box-shadow:0 16px 36px rgba(0,0,0,.14);
  max-height:0;overflow:hidden;
  opacity:0;
  transition:max-height .3s var(--ease),opacity .25s var(--ease);
  pointer-events:auto;
  border-radius:0 0 var(--radius-md) var(--radius-md);
}
.nav-search-panel.open{
  max-height:110px;
  opacity:1;
}
.nav-search-form{
  display:flex;align-items:center;gap:14px;
  padding:22px 26px;
  color:var(--muted);
}
.nav-search-form input{
  flex:1;border:none;outline:none;
  font-size:16px;font-family:inherit;
  background:transparent;color:var(--text);
}
.nav-search-form button[type=submit]{
  padding:10px 24px;
  background:var(--green);color:#fff;
  border:none;border-radius:var(--radius-xs);
  font-weight:600;font-size:13.5px;
  cursor:pointer;
  white-space:nowrap;
}
.nav-search-form button[type=submit]:hover{background:var(--green-dark)}
.nav-search-close{
  border:none;background:transparent;
  color:var(--muted);cursor:pointer;
  display:flex;align-items:center;
  flex-shrink:0;
}

/* ── search results page ── */
.search-results-section{padding:60px 0 100px;background:#fff}
.search-page-form{
  display:flex;align-items:center;gap:12px;
  max-width:640px;margin:0 auto 40px;
  padding:8px 8px 8px 22px;
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:var(--shadow-xs);
}
.search-page-form input{
  flex:1;border:none;outline:none;
  font-size:15px;font-family:inherit;color:var(--text);
}
.search-page-form button{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex-shrink:0;
  background:var(--green);color:#fff;
  border:none;border-radius:50%;cursor:pointer;
}
.search-hint,.search-count{
  text-align:center;color:var(--muted);
  font-size:14.5px;margin-bottom:32px;
}
.search-results-list{
  display:flex;flex-direction:column;gap:18px;
  max-width:820px;margin:0 auto;
}
.search-result-card{
  display:flex;gap:20px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.search-result-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.search-result-img{
  width:110px;height:90px;flex-shrink:0;
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.search-result-img img{width:100%;height:100%;object-fit:cover}
.search-result-img.no-image{
  background:var(--green-light);
  display:flex;align-items:center;justify-content:center;
}
.search-result-img.no-image img{width:60%;height:60%;object-fit:contain}
.search-result-body h3{
  font-family:'El Messiri','Neue Montreal',sans-serif;
  font-size:17px;font-weight:700;color:#111;
  margin:8px 0 6px;
}
.search-result-body p{
  color:var(--muted);font-size:13.5px;line-height:1.6;
}

@media(max-width:600px){
  .search-result-card{flex-direction:column}
  .search-result-img{width:100%;height:160px}
}

/* ── perbaikan jarak "Tentang Kami" (heading/tagline sempat ke-margin:0 oleh rule lama) ── */
.about-content .section-label{margin-bottom:16px}
.about-content .section-heading{margin-bottom:16px}
.about-content .about-tagline{margin-bottom:18px;display:block}

/* ════════════════════════════
   MENU MOBILE — FULLSCREEN
   Menimpa panel 320px di baris 1381 & top:74px di baris 2127.
════════════════════════════ */
@media(max-width:900px){
  .main-nav{
    top:0;
    right:0;
    left:0;
    width:100%;
    height:100dvh;
    /* .main-nav global (baris 1656) membocorkan gap:34px ke mobile */
    gap:4px;
    padding:calc(var(--header-nav) + 22px) 22px 40px;
    border-left:0;
    box-shadow:none;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  /* panel menutupi layar penuh, jadi backdrop tidak berguna lagi */
  .nav-backdrop,
  .nav-backdrop.visible{
    display:none;
  }

  /* panel fullscreen berada di dalam .site-header, jadi logo + hamburger
     harus diangkat agar tidak ikut tertutup */
  .nav-toggle,
  .brand{
    position:relative;
    z-index:490;
  }

  .main-nav .nav-link{
    padding:16px 4px;
    font-size:17px;
  }

  .main-nav .nav-dropdown a{
    font-size:15px;
    padding:12px 14px;
  }

  .main-nav .nav-cta{
    margin-top:24px;
    padding:16px;
    font-size:15px!important;
  }

  /* tombol cari sejajar kiri seperti item menu lain, bukan ikon mengambang */
  .main-nav .nav-search-toggle{
    align-self:flex-start;
    margin:6px 0 0;
    padding:12px 4px;
    color:var(--text);
  }
}

/* ════════════════════════════
   HEADER — EFEK KACA (LIQUID GLASS)
   Menghidupkan lagi backdrop-filter yang dimatikan baris 3203/3213,
   dan mengganti background:#fff!important saat scrolled.
════════════════════════════ */

/* di atas hero — kaca gelap, teks nav putih */
.header-main{
  background:rgba(255,255,255,.10)!important;
  backdrop-filter:blur(20px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(180%)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:
    0 8px 32px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.35)!important;
}

/* setelah discroll — kaca terang, teks nav gelap (baris 3270).
   Opasitas .60 dipilih agar teks gelap tetap terbaca di atas foto hero. */
.site-header.scrolled .header-main,
.site-header.shrunk .header-main{
  background:rgba(255,255,255,.60)!important;
  backdrop-filter:blur(24px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(180%)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  box-shadow:
    0 8px 32px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.7)!important;
}

/* Safari lama / browser tanpa backdrop-filter: jangan sampai teks gelap
   jatuh di atas kaca nyaris transparan — pakai putih solid sebagai cadangan. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header.scrolled .header-main,
  .site-header.shrunk .header-main{
    background:rgba(255,255,255,.92)!important;
  }
}

/* ════════════════════════════
   TEKS BODY DIBESARKAN (~+1,5–2px)
   Hanya paragraf/teks isi. Judul, label, dan tombol tidak diubah.
   Berlaku desktop & mobile (blok mobile tidak mengecilkan class ini).
════════════════════════════ */

/* tentang kami */
.about-tagline{font-size:16px}
.about-text{font-size:16px;line-height:1.8}
.about-feature{font-size:15px}

/* program */
.program-body p{font-size:15px;line-height:1.75}
.program-link{font-size:14px}

/* berita */
.news-excerpt{font-size:15px}

/* faq */
.faq-sub{font-size:15.5px}
.faq-question{font-size:16px}
.faq-answer p{font-size:15.5px}

/* testimoni */
.testimonial-text{font-size:15px}
.testimonial-name{font-size:15px}

/* footer */
.footer-desc{font-size:15px}
.footer-links li a{font-size:15px}
.footer-contact li{font-size:15px}
.footer-ig-label{font-size:14.5px}

/* artikel & hasil pencarian */
.article-share{font-size:14px}
.sidebar-news-title{font-size:14.5px}
.related-news-title{font-size:14.5px}
.search-result-body p{font-size:15px}

/* .faq-answer.open dibatasi max-height:200px (baris 795); teks yang lebih
   besar butuh ruang lebih agar jawaban panjang tidak terpotong. */
.faq-answer.open{max-height:420px}

/* ════════════════════════════
   HIJAU → HITAM / PUTIH
   Hampir semua hijau lewat variable ini (didefinisikan baris 18-21 & 1606-1607),
   jadi cukup ditimpa di sini. Elemen yang tadinya hijau dengan teks putih
   (pill, tombol, stats bar) otomatis jadi hitam dengan teks putih.
   Catatan: tombol WhatsApp (#25d366) sengaja DIBIARKAN hijau — itu warna
   brand WhatsApp, bukan warna sekolah.
════════════════════════════ */
:root{
  --green:      #111111;  /* isian & teks yang tadinya hijau */
  --green-dark: #000000;  /* state hover */
  --green-mid:  #333333;
  --green-light:#f1f1f1;  /* latar pucat, dulu hijau muda */
}

/* ════════════════════════════
   PRESTASI SISWA
════════════════════════════ */

/* ringkasan angka — kartu terpisah dengan ikon, bukan strip datar */
.achievement-stats{padding:10px 0 44px;background:#fff}
.achievement-stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.achievement-stat{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:10px;padding:24px 22px;text-align:left;
  background:linear-gradient(160deg,var(--cream),#fff 62%);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.achievement-stat:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:rgba(17,17,17,.24);
}
.achievement-stat-icon{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:16px;
  /* ikut palet hitam-putih situs (lihat override --green di baris 4080) */
  background:var(--green);color:#fff;
}
.achievement-stat-number{
  font-family:'El Messiri',Georgia,serif;
  font-size:40px;font-weight:700;
  color:#111;line-height:1;
}
.achievement-stat-label{
  font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);line-height:1.5;
}

.achievement-section{
  padding:10px 0 90px;
  background:#fff;
}

/* rekap dikelompokkan per siswa */
.student-recap{
  display:flex;flex-direction:column;gap:20px;
}
.student-block{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;background:#fff;
  box-shadow:var(--shadow-xs);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease);
}
.student-block:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
  border-color:rgba(17,17,17,.2);
}
.student-head{
  display:flex;align-items:center;gap:16px;
  padding:22px 24px;
  background:linear-gradient(120deg,var(--green-light),var(--cream) 70%);
  border-bottom:1px solid var(--line);
}
.student-avatar{
  flex-shrink:0;width:64px;height:64px;
  border-radius:50%;overflow:hidden;
  background:linear-gradient(140deg,var(--green),var(--green-mid));
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'El Messiri',Georgia,serif;
  font-size:24px;font-weight:700;
  box-shadow:0 0 0 4px #fff,var(--shadow-xs);
}
/* wajah biasanya di bagian atas foto, jadi crop digeser ke atas */
.student-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.student-headinfo{flex:1;min-width:0}
.student-name{
  font-family:'El Messiri',Georgia,serif;
  font-size:21px;font-weight:700;
  color:#111;line-height:1.2;
}
.student-sub{
  font-size:13px;color:var(--muted);
}
.student-count{
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:999px;
  background:#fff;color:var(--green);
  border:1px solid rgba(17,17,17,.18);
  box-shadow:var(--shadow-xs);
  font-size:12.5px;font-weight:800;
  white-space:nowrap;
}
.student-ach-list{
  display:flex;flex-direction:column;
}
.student-ach-row{
  position:relative;
  display:flex;align-items:center;gap:18px;
  padding:18px 24px;
  border-bottom:1px solid var(--line);
  transition:background .25s var(--ease),padding-left .25s var(--ease);
}
/* garis aksen kiri yang muncul saat baris disentuh */
.student-ach-row::before{
  content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--green);
  transform:scaleY(0);transition:transform .25s var(--ease);
}
.student-ach-list li:last-child .student-ach-row{border-bottom:0}
.student-ach-row:hover{background:var(--green-light);padding-left:30px}
.student-ach-row:hover::before{transform:scaleY(1)}
.student-ach-rank{
  flex-shrink:0;min-width:88px;
  padding:7px 14px;border-radius:999px;
  background:linear-gradient(135deg,var(--gold),#e2ab1f);
  color:#3d2f00;
  font-size:11.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;
  text-align:center;
  box-shadow:0 6px 14px rgba(242,194,52,.35);
}
.student-ach-main{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;
}
.student-ach-title{
  font-size:16px;font-weight:700;color:#111;line-height:1.35;
}
.student-ach-meta{
  font-size:12.5px;color:var(--muted);
}
.student-ach-go{
  flex-shrink:0;width:32px;height:32px;
  display:inline-grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  background:#fff;color:var(--muted);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.student-ach-row:hover .student-ach-go{
  background:var(--green);border-color:var(--green);color:#fff;
  transform:translateX(3px);
}
@media(max-width:600px){
  .student-head{padding:16px;gap:12px}
  .student-avatar{width:48px;height:48px;font-size:20px}
  .student-name{font-size:17px}
  .student-count{padding:6px 12px;font-size:11.5px}
  .student-ach-row{padding:14px 16px;gap:12px}
  .student-ach-row:hover{padding-left:20px}
  .student-ach-rank{min-width:0;padding:5px 11px;font-size:11px}
  .student-ach-title{font-size:14.5px}
}

/* filter tahun */
.achievement-filter{
  display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;margin-bottom:32px;
}
.achievement-filter-label{
  font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
/* segmented control: satu wadah pill, tombol aktif hijau bergradien */
.achievement-filter-list{
  display:inline-flex;gap:6px;flex-wrap:wrap;
  padding:6px;border-radius:999px;
  background:var(--cream);border:1px solid var(--line);
}
.achievement-chip{
  padding:9px 20px;border-radius:999px;
  border:1px solid transparent;
  background:transparent;color:var(--muted);
  font-size:14px;font-weight:700;
  transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
}
.achievement-chip:hover{background:#fff;color:var(--green)}
.achievement-chip.active{
  background:linear-gradient(135deg,var(--green),var(--green-mid));
  color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.achievement-chip.active:hover{color:#fff}

/* grid kartu */
.achievement-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:22px;
}
.achievement-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;background:#fff;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;
}
.achievement-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.achievement-media{
  position:relative;
  aspect-ratio:4/3;
  background:var(--green-light);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.achievement-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);
}
.achievement-card:hover .achievement-media img{transform:scale(1.06)}
.achievement-initials{
  font-family:'El Messiri',Georgia,serif;
  font-size:52px;font-weight:700;
  color:var(--green);opacity:.35;
}
.achievement-rank{
  position:absolute;top:12px;left:12px;
  padding:5px 13px;border-radius:999px;
  background:var(--gold);color:#111;
  font-size:11.5px;font-weight:700;
  letter-spacing:.03em;
}
.achievement-body{
  padding:18px 18px 22px;
  display:flex;flex-direction:column;gap:6px;
}
.achievement-meta{
  font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.achievement-competition{
  font-family:'El Messiri',Georgia,serif;
  font-size:17px;font-weight:700;
  color:#111;line-height:1.35;
}
.achievement-student{
  font-size:14px;color:var(--muted);
}
.achievement-empty{
  padding:56px 24px;text-align:center;
  color:var(--muted);font-size:15px;
  background:var(--cream);
  border:1px dashed var(--line);
  border-radius:var(--radius-md);
}

/* halaman detail */
.achievement-detail{padding:70px 0 20px;background:#fff}
.achievement-detail-grid{
  display:grid;grid-template-columns:1fr 320px;
  gap:48px;align-items:start;
}
/* foto utama dikunci rasionya supaya tidak menggantung di kotak kosong */
.achievement-detail-photo{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/9;
  border-radius:var(--radius-md);overflow:hidden;
  margin-bottom:24px;box-shadow:var(--shadow-md);
  background:var(--cream);
}
/* latar blur dari foto yang sama: foto potret pun tidak terpotong */
.achievement-detail-photo::before{
  content:'';position:absolute;inset:0;
  background-image:var(--photo);
  background-size:cover;background-position:center;
  filter:blur(26px) brightness(.72);
  transform:scale(1.2);
}
/* min-height menjaga foto beresolusi kecil tidak tampil sebesar perangko,
   max-height menjaga foto besar tetap muat tanpa terpotong */
.achievement-detail-photo img{
  position:relative;
  width:auto;height:auto;
  max-width:100%;max-height:100%;min-height:62%;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 12px 30px rgba(4,30,36,.28);
}
.achievement-detail-photo.is-empty{
  display:grid;place-items:center;
  border:1px dashed var(--line);box-shadow:none;
  color:var(--text);opacity:.9;
}
.achievement-detail-photo.is-empty svg{opacity:.28}
.achievement-detail-rank{
  position:absolute;top:16px;left:16px;
  padding:9px 18px;border-radius:999px;
  background:linear-gradient(135deg,var(--gold),#e2ab1f);
  color:#3d2f00;
  font-size:12px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 8px 20px rgba(242,194,52,.42);
}
.achievement-detail-chips{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;
}
.achievement-detail-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px;border-radius:999px;
  background:var(--cream);border:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--muted);
}
.achievement-detail-chip svg{flex:none;color:var(--text);opacity:.65}
.achievement-detail-title{
  font-family:'El Messiri',Georgia,serif;
  font-size:clamp(26px,3.2vw,38px);
  font-weight:700;color:#111;
  line-height:1.2;margin-bottom:16px;
}
.achievement-detail-lead{
  font-size:16px;color:var(--muted);line-height:1.8;
}

/* kartu pemilik prestasi */
.achievement-owner{
  display:flex;align-items:center;gap:16px;
  margin-top:32px;padding:18px 20px;
  border:1px solid var(--line);border-radius:var(--radius-md);
  background:linear-gradient(120deg,var(--green-light),var(--cream) 70%);
}
.achievement-owner-avatar{
  flex:none;width:58px;height:58px;
  border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  background:var(--green);color:#fff;
  font-family:'El Messiri',Georgia,serif;
  font-size:24px;font-weight:700;
  box-shadow:0 0 0 4px #fff,var(--shadow-xs);
}
.achievement-owner-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.achievement-owner-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.achievement-owner-label{
  font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.achievement-owner-name{
  font-family:'El Messiri',Georgia,serif;
  font-size:20px;font-weight:700;color:#111;line-height:1.25;
}
.achievement-owner-sub{font-size:13px;color:var(--muted)}

/* panel rincian: ikut menggulir bersama isi artikel */
.achievement-detail-side{position:sticky;top:96px}
.achievement-facts{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:24px 24px 10px;background:var(--cream);
  box-shadow:var(--shadow-xs);
}
.achievement-facts-title{
  font-family:'El Messiri',Georgia,serif;
  font-size:18px;font-weight:700;
  color:#111;margin-bottom:6px;
}
.achievement-fact-list{display:flex;flex-direction:column}
.achievement-fact{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.achievement-fact:last-child{border-bottom:0}
.achievement-fact dt{
  flex:none;
  font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:0;
}
.achievement-fact dd{
  font-size:15px;color:var(--text);font-weight:700;
  text-align:right;min-width:0;word-break:break-word;
}
.achievement-back{
  display:inline-flex;justify-content:center;
  width:100%;margin-top:18px;
}
@media(max-width:900px){
  .achievement-detail-side{position:static}
  .achievement-detail-photo{aspect-ratio:4/3}
}
.achievement-related{padding-top:40px}

@media(max-width:900px){
  .achievement-detail-grid{grid-template-columns:1fr;gap:32px}
  .achievement-detail{padding-top:48px}
}
@media(max-width:900px){
  .achievement-stats-grid{grid-template-columns:1fr 1fr;gap:14px}
}
@media(max-width:600px){
  .achievement-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .achievement-section{padding-bottom:64px}
  .achievement-competition{font-size:15px}
  .achievement-body{padding:14px 14px 18px}
  .achievement-stat{padding:20px 10px}
  .achievement-stat-number{font-size:28px}
  .achievement-stat-label{font-size:10px}
}

/* ── Section pendaftaran: hitam solid, tanpa foto gedung ──
   .cta-bg di-display:none agar foto tidak ikut diunduh browser.
   Overlay teal (baris 1837) diganti hitam pekat. */
.registration-cta{
  background:#000;
}
.registration-cta .cta-bg{
  display:none;
}
.registration-cta .cta-overlay{
  background:#000;
}

/* ════════════════════════════
   MODERNISASI LANDING PAGE
   Tata letak tidak diubah — hanya kartu, kontras, dan interaksi yang
   diselaraskan dengan halaman Guru & Karyawan dan Prestasi Siswa.
════════════════════════════ */

/* ── aksen judul "Berita Terbaru": ikut palet hitam-emas ── */
.ndot-red   {width:30px;background:var(--text)}
.ndot-yellow{width:18px;background:var(--gold)}
.ndot-brown {width:10px;background:var(--line)}

/* ── kartu berita ── */
.news-card{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.news-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(17,17,17,.28);
}
.news-img-wrap{
  display:block;position:relative;
  aspect-ratio:16/10;overflow:hidden;
  background:var(--cream);
}
.news-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.news-card:hover .news-img-wrap img{transform:scale(1.06)}
.news-body{
  display:flex;flex-direction:column;
  flex:1;padding:18px 22px 0;
}
.news-title{margin-top:2px}
.news-excerpt{margin-bottom:16px}
/* baris "Selengkapnya" dipindah ke kaki kartu, sejajar tombol panah bulat */
.news-selengkapnya{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:auto -22px 0;padding:14px 22px;
  border-top:1px solid var(--line);border-bottom:0;
  font-size:12.5px;font-weight:800;
  letter-spacing:.02em;color:var(--text);
}
.news-selengkapnya:hover{color:var(--text);border-color:var(--line)}
.news-go{
  width:30px;height:30px;flex:none;
  display:inline-grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  color:var(--muted);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.news-card:hover .news-go{
  background:var(--green);border-color:var(--green);color:#fff;
  transform:translateX(3px);
}

/* ── FAQ: tiap pertanyaan jadi kartu, bukan baris bergaris ── */
.faq-item{
  background:#fff;
  border:1px solid var(--line);border-top:1px solid var(--line);
  border-radius:var(--radius-sm);
  transition:background .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-item + .faq-item{margin-top:10px}
.faq-item:hover{border-color:rgba(17,17,17,.22);box-shadow:var(--shadow-xs)}
.faq-item:has(.faq-question[aria-expanded="true"]){
  background:var(--cream);
  box-shadow:inset 3px 0 0 var(--green);
}
.faq-question{
  gap:18px;padding:20px 20px;
  font-weight:700;
}
.faq-icon{
  flex:none;width:32px;height:32px;padding:6px;
  border:1px solid var(--line);border-radius:50%;
  background:#fff;color:var(--text);
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.faq-question:hover .faq-icon{border-color:var(--text)}
.faq-question[aria-expanded="true"] .faq-icon{
  transform:rotate(180deg);
  background:var(--green);border-color:var(--green);color:#fff;
}
.faq-answer p{padding:0 20px 20px}

/* ── testimoni ── */
.testimonial-card{
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.testimonial-card:hover{border-color:rgba(17,17,17,.28)}
.testimonial-quote-icon{font-size:44px;line-height:1;opacity:.16}
.testimonial-photo{
  border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 3px #fff,var(--shadow-xs);
}
.testimonial-card.featured .testimonial-photo{box-shadow:0 0 0 3px rgba(255,255,255,.22)}

/* ── tombol garis: pill, isian penuh saat disentuh ── */
.btn-outline-green{
  border-radius:999px;
  font-weight:700;
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease);
}
.btn-outline-green:hover{transform:translateY(-2px)}

/* ── kartu Instagram di footer ──
   Embed resmi Instagram selalu berlatar putih dan membawa bar suka/komentar.
   Di footer hitam itu terlihat menempel, jadi dibingkai kartu dan bagian
   bawahnya dipudarkan; postingannya tetap bisa diklik seperti biasa. */
.footer-ig-card{
  width:100%;max-width:330px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
}
.footer-ig-card-head{
  display:flex;align-items:center;gap:9px;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-ig-card-icon{
  width:26px;height:26px;flex:none;
  display:grid;place-items:center;border-radius:9px;color:#fff;
  background:linear-gradient(135deg,#833ab4,#e1306c 55%,#f9a825);
}
.footer-ig-card-title{
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.footer-ig-card .footer-instagram-widget{
  width:100%;height:auto;
  border-radius:0;background:none;
}
/* jendela embed: tinggi dikunci supaya bar suka & kolom komentar terpotong */
.footer-ig-card .footer-instagram-widget.is-embed{
  position:relative;
  max-width:none;height:352px;overflow:hidden;
}
/* baris profil putih bawaan embed digeser ke atas: yang tersisa fotonya saja,
   identitas akun sudah ada di header kartu dan di strip Instagram atas footer */
.footer-ig-card .footer-instagram-widget.is-embed .instagram-media{
  margin-top:-56px!important;
}
.footer-ig-card .footer-instagram-widget.is-embed::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(180deg,rgba(2,2,2,0),rgba(2,2,2,.92));
  pointer-events:none;
}
.footer-ig-card .instagram-media{
  min-width:0!important;width:100%!important;
  margin:0!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;
}
.footer-ig-card .footer-instagram-grid{
  gap:2px;padding:2px;
}
.footer-ig-card .footer-instagram-grid a{border-radius:0}
.footer-ig-card-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;
  border-top:1px solid rgba(255,255,255,.1);
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:13px;font-weight:800;color:#fff;
  transition:background .25s var(--ease),gap .25s var(--ease);
}
.footer-ig-card-link:hover{background:rgba(255,255,255,.07);gap:14px}
@media(max-width:900px){
  .footer-ig-card{max-width:100%}
}


/* text-wrap:balance hanya untuk layar besar — pada layar kecil ia membuat
   judul menyusut ke lebar isinya lalu meluber, jadi dibatasi di sini saja. */
@media(min-width:769px){.hero-title{text-wrap:balance}}

/* ── filter kategori berita (dropdown) ── */
.news-filterbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:34px;
}
.news-filter-label{
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.news-filter-select{position:relative;display:inline-flex}
.news-filter-select select{
  appearance:none;-webkit-appearance:none;
  padding:12px 46px 12px 20px;
  border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--text);
  font-family:'Neue Montreal',Arial,sans-serif;
  font-size:14.5px;font-weight:700;
  cursor:pointer;min-width:220px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.news-filter-select select:hover{border-color:rgba(17,17,17,.35)}
.news-filter-select select:focus{
  outline:none;border-color:var(--text);
  box-shadow:0 0 0 3px rgba(17,17,17,.08);
}
.news-filter-chevron{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--muted);
}
@media(max-width:560px){
  .news-filter-select,.news-filter-select select{width:100%}
}

/* ════════════════════════════
   SEMUA TOMBOL BERBENTUK PIL
   Bentuk tombol sebelumnya tercecer: 9px (.btn-primary/.btn-gold/
   .btn-outline-white, baris 1749 & 1764), var(--radius-sm) (.program-link-btn),
   var(--radius-xs) (tombol cari di header). Disamakan jadi kapsul di sini —
   ditaruh di akhir berkas supaya menang urutan atas semua aturan di atasnya.
   .btn-outline-green sudah pil sejak baris 4682, ikut didaftarkan agar
   satu tempat saja yang perlu diubah bila bentuknya diganti lagi nanti.

   Tombol khusus ikon SENGAJA DILEWATI karena bentuknya sudah bulat penuh atau
   memang kotak ikon: .hero-arrow, .share-btn, .news-go, .back-to-top,
   .whatsapp-float, .search-page-form button, .nav-toggle.
════════════════════════════ */
.btn-primary,
.btn-gold,
.btn-outline-white,
.btn-outline-green,
.button-primary,
.program-link-btn,
.nav-search-form button[type=submit],
.maintenance-login{
  border-radius:999px;
}

/* ════════════════════════════
   PERGANTIAN TEKS HERO
   Isi .hero-text-wrap ditukar oleh site.js tiap slide berganti. Tanpa jeda
   ini teksnya akan berkedip berganti begitu saja; kelas .is-swapping membuat
   teks lama meredup dulu, baru diisi kalimat slide berikutnya.
   Durasinya harus sama dengan SWAP_MS di site.js.
════════════════════════════ */
.hero-text-wrap{
  transition:opacity .26s var(--ease),transform .26s var(--ease);
}
.hero-text-wrap.is-swapping{
  opacity:0;
  transform:translateY(10px);
}

/* ════════════════════════════
   HALAMAN DETAIL BERITA — JUDUL DULU, BARU GAMBAR
   Gambar sampul dulu dipasang melebar penuh di paling atas halaman
   (.article-hero-img, baris 1108) sehingga judul baru terbaca setelah
   menggulir. Sekarang gambar dipindah ke dalam artikel di bawah judul,
   jadi bagian atas halaman tidak lagi gelap dan header otomatis memakai
   gaya terang — site.js memilih itu sendiri karena .article-hero-img
   sudah tidak ada di halaman.
════════════════════════════ */

/* Tanpa gambar besar di atas, isi halaman perlu ruang sendiri agar tidak
   tertutup header yang posisinya fixed. Latarnya juga dibuat krem lembut —
   sebelumnya ikut --bg yang bernilai putih, sehingga kartu putih di atasnya
   nyaris tak terlihat sebagai kartu, hanya mengambang tanpa batas jelas. */
.article-section{
  padding-top:126px;
  background:var(--cream);
}

.article-main,
.sidebar-card{
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 1px 2px rgba(17,17,17,.04),0 12px 32px -18px rgba(17,17,17,.18);
}
.article-main{
  padding:44px 48px;
}

/* Tombol kembali harus memakai satu baris penuh. .back-link bersifat
   inline-flex dan pil kategori inline-block, jadi tanpa ini keduanya
   berdempetan dalam satu baris. width:fit-content menjaga area kliknya
   tetap seukuran teks, tidak selebar kartu. */
.article-main>.back-link{
  display:flex;
  width:fit-content;
  margin-bottom:26px;
  font-size:13px;
  color:var(--muted);
}
.article-main>.back-link:hover{
  color:var(--text);
}

/* Pil kategori berdiri sendiri di atas judul, bukan lagi bagian dari baris
   keterangan yang memakai flex. Selektornya dibatasi ke .article-main karena
   .article-cat juga dipakai di kartu berita (partials/news-card.blade.php)
   dan hasil pencarian — di sana pil itu satu baris flex dengan tanggal,
   sehingga margin bawah akan merusak perataannya. */
.article-main>.article-cat{
  display:inline-block;
  margin-bottom:16px;
  padding:5px 15px;
  font-size:10.5px;
}

/* judul jadi elemen pertama yang dilihat, jadi ukurannya dinaikkan */
.article-title{
  font-size:clamp(25px,3.2vw,38px);
  line-height:1.18;
  letter-spacing:-.03em;
  margin-bottom:18px;
}

/* keterangan penulis & tanggal ditutup garis tipis, memberi jeda yang rapi
   antara kepala artikel dan gambarnya */
.article-meta-row{
  gap:18px;
  margin-bottom:0;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.article-date,
.article-views{
  font-size:12.5px;
}

.article-cover{
  margin:26px 0 30px;
  border-radius:18px;
  overflow:hidden;
  background:var(--green-light);
}
.article-cover img{
  display:block;
  width:100%;height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}

/* ringkasan berita dibedakan dari isi: lebih besar dan lebih gelap, seperti
   paragraf pembuka di portal berita */
.article-lead{
  font-size:17px;
  line-height:1.7;
  color:var(--text);
  font-weight:500;
  margin-bottom:26px;
}
.article-lead:empty{display:none}

.article-divider{
  margin-bottom:30px;
}
.article-content{
  font-size:16px;
}

@media(max-width:900px){
  .article-section{padding-top:104px}
  .article-main{padding:32px 28px}
}
@media(max-width:600px){
  .article-section{padding-top:92px}
  .article-main{padding:26px 20px;border-radius:20px}
  .article-cover{margin:22px 0;border-radius:14px}
  .article-lead{font-size:15.5px}
  .article-content{font-size:15.5px}
}

/* ════════════════════════════
   LOGO HEADER — VARIAN TERANG & GELAP
   Tulisan pada logo-landscape.png berwarna putih, jadi ikut lenyap begitu
   header memakai latar putih (kelas .scrolled/.shrunk). Itu terjadi di semua
   halaman tanpa gambar gelap di atas — berita, pencarian, program, dan kini
   detail berita. Karena itu disiapkan logo-landscape-dark.png yang tulisannya
   gelap; lambangnya sama persis, hanya warna hurufnya yang berbeda.
════════════════════════════ */
/* ════════════════════════════
   TESTIMONI
   Di landing page kartunya kini berupa <a> menuju halaman testimonial.index,
   jadi perlu penanda bahwa ia bisa diklik. Aturan .testimonial-card yang ada
   (baris 816 dst.) sudah memakai display:flex sehingga bentuknya tidak
   berubah saat elemennya bukan lagi <div>.
════════════════════════════ */
a.testimonial-card{
  cursor:pointer;
  color:inherit;
}

/* tombol "Lihat Semua Testimoni" di bawah grid landing page */
.testimonials-more{
  display:flex;
  justify-content:center;
  margin-top:42px;
}
.testimonials-more .btn-outline-green{
  display:inline-flex;
  align-items:center;
  gap:9px;
}

/* halaman berisi seluruh testimoni — banner sudah memberi jarak dari header,
   jadi ruang atasnya tidak perlu selebar bagian testimoni di landing page */
.testimonial-page{
  padding-top:70px;
  background:var(--cream);
}
.testimonial-empty{
  padding:60px 20px;
  text-align:center;
  color:var(--muted);
}

@media(max-width:900px){
  .testimonial-page{padding-top:52px}
  .testimonials-more{margin-top:32px}
}

/* ════════════════════════════
   KOTAK MEDIA BAGIAN PROGRAM
   Kotaknya bisa berisi gambar atau video YouTube, jadi <iframe> disamakan
   bentuknya dengan <img> di baris 3512 agar keduanya bisa bersanding rapi
   dalam satu baris tanpa beda tinggi.
════════════════════════════ */
.program-block-images iframe{
  width:100%;height:260px;display:block;
  border:0;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  background:#000;
}
@media(max-width:900px){
  .program-block-images iframe{height:220px}
}

.brand-logo-dark{display:none}

.site-header.scrolled .brand-logo-light,
.site-header.shrunk .brand-logo-light{display:none}

.site-header.scrolled .brand-logo-dark,
.site-header.shrunk .brand-logo-dark{display:block}

/* bayangan gelap di baris 203 dibuat untuk logo putih di atas foto; pada logo
   gelap di latar terang ia hanya terlihat seperti noda, jadi dimatikan */
.site-header.scrolled .brand,
.site-header.shrunk .brand{filter:none}
.site-header.scrolled .brand img,
.site-header.shrunk .brand img,
.site-header.scrolled .brand:hover img,
.site-header.shrunk .brand:hover img{filter:none}