*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;color:#2b2525;background:#fff;line-height:1.65}.container{width:min(1160px,92%);margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid #eee}.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:#8b0000;text-decoration:none}.brand img{width:52px;height:58px;object-fit:contain}.brand strong{display:block;font-size:21px}.brand span{display:block;font-size:11px;color:#777}nav{display:flex;gap:22px}nav a{color:#333;text-decoration:none;font-weight:700;font-size:14px}.menu-toggle{display:none;border:0;background:none;font-size:27px}.hero{min-height:690px;display:flex;flex-direction:column;justify-content:center;text-align:center;color:#fff;background:radial-gradient(circle at 20% 20%,#bd2a36 0,#8b0000 35%,#430006 100%)}.hero-inner{padding:80px 0 45px}.hero-logo{width:128px}.eyebrow,.section-tag{text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:800;color:#b38624}.hero .eyebrow{color:#ebcc7a}.hero h1{font-size:clamp(38px,6vw,70px);line-height:1.08;margin:15px auto;max-width:950px}.hero h1 span{color:#ebcc7a}.lead{max-width:760px;margin:20px auto 30px;color:#f4dddd;font-size:18px}.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.btn{display:inline-block;padding:13px 23px;border-radius:999px;text-decoration:none;border:0;font-weight:800;cursor:pointer}.primary{background:#d6ad45;color:#422300}.ghost{border:1px solid #ffffff99;color:#fff}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.18);padding:22px 0 28px}.hero-stats b{display:block;color:#ebcc7a;font-size:28px}.hero-stats span{font-size:12px;color:#efdddd}.section{padding:85px 0}.section h2{font-size:clamp(30px,4vw,48px);margin:8px 0 24px}.split{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}.prose p{margin:0 0 15px}.prose ol{padding-left:22px}.values{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.values span{padding:9px 13px;background:#fff5f2;border-radius:999px}.logo-showcase{text-align:center;background:#fff7f4;padding:38px;border-radius:28px}.logo-showcase img{width:210px}.soft{background:#faf6f3}.dark{background:#191414;color:#fff}.gold{color:#e5c46e}.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:35px 0}.vision-grid article{background:#fff;padding:28px;border-radius:20px;border:1px solid #eee}.subhead{margin-top:38px}.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.timeline article{padding:18px;border-radius:18px;background:#fff;border:1px solid #eee}.timeline b{display:block;color:#8b0000}.timeline small{color:#777}.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.chip{border:1px solid #514646;background:#241f1f;color:#ddd;padding:8px 14px;border-radius:999px}.chip.active{background:#d6ad45;color:#382000}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.gallery-card{background:#241f1f;border:1px solid #3d3434;border-radius:18px;overflow:hidden}.gallery-card img{width:100%;height:220px;object-fit:cover;background:#302929}.gallery-card div{padding:17px}.gallery-card p{color:#bbb}.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.news-card{border:1px solid #eee;border-left:4px solid #8b0000;border-radius:16px;padding:25px}.membership{display:grid;grid-template-columns:1fr 1fr;gap:50px}.member-form{background:white;border:1px solid #eee;padding:28px;border-radius:22px}.member-form input,.member-form textarea{width:100%;padding:13px;margin:7px 0;border:1px solid #ddd;border-radius:11px}.member-form textarea{min-height:90px}.member-form .btn{width:100%;margin-top:9px}.form-note{font-size:12px;color:#777}.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.partner-grid a{height:100px;border:1px solid #eee;border-radius:16px;display:grid;place-items:center;text-decoration:none;color:#555;padding:14px}.partner-grid img{max-width:100%;max-height:70px}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.contact-grid article{border:1px solid #393131;padding:25px;border-radius:18px}.contact-grid a{color:#ebcc7a}.wa-float{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:white;text-decoration:none;font-size:25px;z-index:30}footer{background:#7e000b;color:#fff;padding:28px 0}.footer-grid{display:grid;grid-template-columns:1fr 1.5fr .6fr;align-items:center;gap:20px}.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand img{width:48px}.footer-brand span{display:block;font-size:11px;color:#efcaca}.footer-grid p{font-size:12px;color:#efcaca}.footer-grid a{color:#ebcc7a;text-align:right}.loading{opacity:.65}@media(max-width:850px){nav{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;padding:20px;flex-direction:column}nav.open{display:flex}.menu-toggle{display:block}.split,.membership,.vision-grid{grid-template-columns:1fr}.timeline{grid-template-columns:1fr 1fr}.gallery-grid,.news-grid,.contact-grid{grid-template-columns:1fr}.partner-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr;text-align:center}.footer-brand{justify-content:center}.footer-grid a{text-align:center}}

/* ============================================================
   PERKABEM V2.1 UI FIX
   - Logo lebih proporsional
   - Form registrasi rapi & responsive
   - Footer hyperlink tetap putih
============================================================ */

.site-header .brand img{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  object-fit:contain !important;
}

.site-header .brand strong{
  font-size:18px !important;
  line-height:1.1;
}

.site-header .brand span{
  font-size:10px !important;
}

.hero-logo{
  width:88px !important;
  height:88px !important;
  max-width:88px !important;
  object-fit:contain !important;
  margin:0 auto 12px !important;
}

.logo-showcase img{
  width:140px !important;
  max-width:65% !important;
  height:auto !important;
}

.footer-brand img{
  width:38px !important;
  height:38px !important;
  object-fit:contain !important;
}

.membership{
  align-items:start !important;
}

.member-form{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  padding:30px !important;
  border-radius:22px !important;
  background:#fff !important;
  box-shadow:0 14px 36px rgba(0,0,0,.06) !important;
}

.member-form h3{
  grid-column:1 / -1 !important;
  margin:0 0 8px !important;
}

.member-form input,
.member-form textarea{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:14px !important;
  border:1px solid #d9d9d9 !important;
  border-radius:12px !important;
  background:#fff !important;
  font-size:15px !important;
  font-family:inherit !important;
}

.member-form textarea{
  grid-column:1 / -1 !important;
  min-height:110px !important;
  resize:vertical !important;
}

.member-form button{
  grid-column:1 / -1 !important;
  width:100% !important;
  margin:0 !important;
}

.member-form .form-note{
  grid-column:1 / -1 !important;
  margin:0 !important;
}

footer a,
footer a:link,
footer a:visited,
footer a:hover,
footer a:active,
.footer-grid a,
.footer-grid a:link,
.footer-grid a:visited,
.footer-grid a:hover,
.footer-grid a:active{
  color:#fff !important;
  text-decoration:none !important;
}

@media(max-width:700px){
  .nav-wrap{
    height:68px !important;
  }

  .site-header .brand img{
    width:34px !important;
    height:34px !important;
  }

  .site-header .brand strong{
    font-size:16px !important;
  }

  .hero-logo{
    width:70px !important;
    height:70px !important;
  }

  .member-form{
    grid-template-columns:1fr !important;
    padding:20px !important;
  }

  .member-form h3,
  .member-form textarea,
  .member-form button,
  .member-form .form-note{
    grid-column:auto !important;
  }
}


/* ============================================================
   V2.8 MOBILE-FIRST GALLERY + LEADERS
============================================================ */

.leader-card{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.leader-avatar-wrap{
  flex:0 0 auto;
}

.leader-avatar{
  width:54px;
  height:54px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #d6ad45;
  background:#f1e8e5;
  box-shadow:0 5px 14px rgba(0,0,0,.10);
}

.leader-placeholder{
  display:grid;
  place-items:center;
  font-size:22px;
}

.leader-copy{
  min-width:0;
}

.leader-copy b,
.leader-copy small{
  display:block;
}

.gallery-shell{
  position:relative;
}

.gallery-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:4px 2px 12px;
}

.gallery-track::-webkit-scrollbar{
  display:none;
}

.gallery-card{
  flex:0 0 calc((100% - 32px)/3);
  min-width:0;
  scroll-snap-align:start;
  background:#241f1f;
  border:1px solid #3d3434;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease;
}

.gallery-card:hover{
  transform:translateY(-3px);
  border-color:#6a5959;
}

.gallery-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  background:#302929;
  display:block;
}

.gallery-card div{
  padding:17px;
}

.gallery-card h3{
  margin:6px 0 8px;
}

.gallery-card p{
  color:#bbb;
  margin:0;
}

.gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(17,12,12,.88);
  color:#fff;
  font-size:30px;
  line-height:1;
  z-index:3;
  box-shadow:0 7px 18px rgba(0,0,0,.25);
}

.gallery-prev{left:-18px}
.gallery-next{right:-18px}

.gallery-hint{
  display:none;
  margin:10px 0 0;
  color:#a99c9c;
  font-size:12px;
}

.gallery-lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:100001;
  align-items:center;
  justify-content:center;
  padding:22px;
}

.gallery-lightbox.open{
  display:flex;
}

.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(5px);
}

.lightbox-card{
  position:relative;
  z-index:1;
  width:min(920px,96vw);
  max-height:88vh;
  margin:0;
  background:#171313;
  color:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}

.lightbox-card img{
  width:100%;
  max-height:68vh;
  object-fit:contain;
  display:block;
  background:#080707;
}

.lightbox-card figcaption{
  padding:18px 22px;
}

.lightbox-card small{
  color:#d6ad45;
  font-weight:800;
  letter-spacing:1px;
}

.lightbox-card h3{
  margin:6px 0;
}

.lightbox-card p{
  margin:0;
  color:#cfc3c3;
}

.lightbox-close{
  position:fixed;
  right:18px;
  top:16px;
  z-index:100002;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#70000a;
  font-size:28px;
  line-height:1;
}

/* Mobile first priority */
@media(max-width:700px){
  .section{
    padding:58px 0;
  }

  .timeline{
    grid-template-columns:1fr;
    gap:10px;
  }

  .timeline article{
    padding:14px;
  }

  .leader-avatar{
    width:52px;
    height:52px;
  }

  .gallery-track{
    gap:12px;
    padding-right:8vw;
  }

  .gallery-card{
    flex-basis:84vw;
  }

  .gallery-card img{
    height:230px;
  }

  .gallery-arrow{
    display:none;
  }

  .gallery-hint{
    display:block;
  }

  .filter-row{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
    scrollbar-width:none;
  }

  .filter-row::-webkit-scrollbar{
    display:none;
  }

  .chip{
    white-space:nowrap;
    flex:0 0 auto;
  }

  .gallery-lightbox{
    padding:10px;
  }

  .lightbox-card{
    width:100%;
    max-height:92vh;
    border-radius:16px;
  }

  .lightbox-card img{
    max-height:62vh;
  }

  .lightbox-card figcaption{
    padding:14px 16px 18px;
  }

  .lightbox-close{
    right:12px;
    top:10px;
  }
}

@media(min-width:701px) and (max-width:1050px){
  .gallery-card{
    flex-basis:calc((100% - 16px)/2);
  }

  .timeline{
    grid-template-columns:repeat(2,1fr);
  }
}


/* ============================================================
   V2.8.2 iOS MOBILE MENU + LEADER PHOTO FIX
============================================================ */
@media(max-width:850px){
  .site-header{
    position:sticky !important;
    top:0 !important;
    z-index:100000 !important;
    overflow:visible !important;
    background:#fff !important;
  }

  .nav-wrap{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    position:relative !important;
    min-height:68px !important;
    overflow:visible !important;
  }

  .brand{
    min-width:0 !important;
    flex:1 1 auto !important;
  }

  #mobileMenuButton,
  .menu-toggle{
    display:flex !important;
    flex:0 0 46px !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    align-items:center !important;
    justify-content:center !important;
    margin-left:10px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:12px !important;
    background:#8b0000 !important;
    color:#fff !important;
    font-size:28px !important;
    line-height:1 !important;
    opacity:1 !important;
    visibility:visible !important;
    position:relative !important;
    z-index:100002 !important;
    -webkit-appearance:none !important;
    appearance:none !important;
  }

  #mainNav{
    display:none !important;
    position:fixed !important;
    top:68px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-height:calc(100dvh - 68px) !important;
    overflow-y:auto !important;
    background:#5d0008 !important;
    padding:8px 18px 22px !important;
    flex-direction:column !important;
    gap:0 !important;
    z-index:100001 !important;
    box-shadow:0 18px 34px rgba(0,0,0,.28) !important;
  }

  #mainNav.open{
    display:flex !important;
  }

  #mainNav a{
    display:block !important;
    width:100% !important;
    padding:15px 6px !important;
    color:#fff !important;
    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    text-decoration:none !important;
    border-bottom:1px solid rgba(255,255,255,.16) !important;
  }

  body.mobile-menu-open{
    overflow:hidden !important;
  }

  .leader-avatar{
    display:block;
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    background:#f2e9e6 !important;
  }
}


/* Pengumuman photo patch */
.announcement-card{
  overflow:hidden;
}
.announcement-photo{
  display:block;
  width:100%;
  height:240px;
  object-fit:cover;
  background:#f3f3f3;
}
.announcement-card-body{
  padding:0;
}
@media(max-width:700px){
  .announcement-photo{
    height:220px;
  }
}


/* Pengumuman photo popup */
.announcement-photo{
  cursor:zoom-in;
}

.announcement-photo-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.86);
  z-index:99999;
}

.announcement-photo-modal.show{
  display:flex;
}

.announcement-photo-dialog{
  max-width:min(94vw,1000px);
  max-height:90vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.announcement-photo-dialog img{
  max-width:100%;
  max-height:82vh;
  object-fit:contain;
  border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  background:#111;
}

.announcement-photo-caption{
  color:#fff;
  font-weight:700;
  text-align:center;
}

.announcement-photo-close{
  position:fixed;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:0;
  background:#fff;
  color:#111;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  z-index:100000;
}

@media(max-width:700px){
  .announcement-photo-modal{
    padding:12px;
  }

  .announcement-photo-dialog{
    max-width:96vw;
  }

  .announcement-photo-dialog img{
    max-height:78vh;
  }
}