@font-face{
  font-family:"Gobold";
  src: url("../fonts/Gobold-Regular.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Maison Neue";
  src: url("../fonts/MaisonNeue-Medium.ttf") format("truetype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Maison Neue Light";
  src: url("../fonts/MaisonNeue-Light.ttf") format("truetype");
  font-weight:300; font-style:normal; font-display:swap;
}

html, body { overflow-x: hidden; }

:root{
  --brand-yellow:#eded64; --brand-dark:#0b0c10; --fg:#111; --fg-inv:#fff;
  --accent-hero:#16a34a;
  --container:clamp(320px,92vw,1200px);
  --radius:1rem; --gap:clamp(.75rem,2vw,1.25rem); --space:clamp(1rem,3vw,2rem);
  --h1:clamp(1.8rem,4vw,3rem); --h2:clamp(1.2rem,3vw,1.6rem);
  --brand-yellow-ink:#2C2C2C;     
  --active-red:#E62129;           
  --container:clamp(320px,92vw,1200px);
  --brand-font-size: clamp(18px, 2.1vw, 26.04px);
  --menu-font-size:  clamp(13px, 1.15vw, 15px);
  --brand-logo-size: clamp(220px, 5vw, 220px);
  --hero-title-size: clamp(1.15rem, 5.2vw, 2.6rem);
  --hero-overlay-width: 60ch;
  --rail-w: 56px; 
  --latest-gap: clamp(14px, 2vw, 20px);
  --latest-bg: #f0f2f4; 
  --latest-lift: clamp(-84px, -9vh, -44px);
  --latest-pad: clamp(16px, 2vw, 24px);
  --latest-sep: clamp(32px, 4.2vw, 64px);
  --gutter: calc((100vw - var(--container)) / 2);
  --rail-offset: clamp(0px, calc(var(--gutter) - 8px), calc(var(--rail-w) + var(--latest-gap)));
  --rail-outset: 64px;
  --rail-gap: clamp(10px, 1.6vw, 16px);
  --news-title-lines: 2;
  --news-pattern-shift: -28px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font:400 1rem/1.6 system-ui,Segoe UI,Roboto,Arial;color:var(--fg);background:#f3f4f6}
.container{width:var(--container);margin-inline:auto}

/* Topbar */
.topbar{position:fixed; inset:0 0 auto 0; z-index:50; background:var(--brand-yellow);
  box-shadow:0 8px 24px rgba(0,0,0,.08);}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:var(--gap);
  padding: clamp(.6rem,1.5vw,1rem) var(--gap);}
.topbar-spacer{block-size: clamp(3.2rem, 8vh, 4.5rem);}
.topbar--floating{
  position:fixed; z-index:60;
  /* center & floating dengan rounded */
  left:50%; transform:translateX(-50%);
  top:clamp(12px, 2.5vh, 22px);
  width:min(92vw, 1200px);
  background:var(--brand-yellow);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}
.topbar__container{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: .6rem clamp(.9rem, 1.8vw, 1.25rem);
}
.brand{display:flex; align-items:center; gap:clamp(.5rem, 1.2vw, .9rem); text-decoration:none; color:var(--brand-yellow-ink); font-weight:800; letter-spacing:.02em}
.brand__logo{inline-size: var(--brand-logo-size); block-size:auto}
.brand__divider{
  inline-size: max(1px, 0.09rem);         
  block-size: clamp(22px, 6vh, 36px);     
  background: color-mix(in oklab, #000 32%, transparent);
  border-radius: 2px;                      
}
.brand__text{ white-space:nowrap; font-family:"Gobold", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight:400; font-size:var(--brand-font-size); line-height:1; letter-spacing:.2px; }
.menu{display:flex; align-items:center; gap:.8rem}
.menu__toggle{display:none; background:none; border:0; color:var(--brand-yellow-ink)}
.menu__links a, .menu__toggle, .menu__search{ font-family:"Maison Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight:700; font-size:var(--menu-font-size); }
.menu__links{display:flex; list-style:none; margin:0; padding:0; gap:clamp(.6rem,1.6vw,1rem)}
.menu__links a{
  color:var(--brand-yellow-ink); text-decoration:none; opacity:.9;
}
.menu__links a:hover{opacity:1}
.menu__links a.is-active{color:var(--active-red)}
/* caret untuk item yang punya submenu */
.menu__links .has-sub > a::after{
  content:"▾"; margin-left:.35rem; font-weight:800; opacity:.9;
}
.menu__search{
  inline-size:42px; block-size:42px; border-radius:999px;
  display:grid; place-items:center; border:0; cursor:pointer;
  background:#111;
  color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);
  margin-inline-start: clamp(0.6rem, 1.8vw, 1.1rem);  
  margin-inline-end:   clamp(0.35rem, 1.2vw, 0.9rem);
}
.menu__search:hover{background: #000; box-shadow:inset 0 0 0 2px rgba(255,255,255,.18); }
.menu__search img{
  inline-size: 18px;
  block-size: 18px;
  display: block;
}
@media (max-width: 980px){
  .menu__toggle{display:inline-grid; place-items:center}
  .menu__links{
    position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:70;
    background:var(--brand-yellow); border-radius:12px; padding: 0 var(--gap);
    max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-6px);
    transition:
      max-height .42s cubic-bezier(.2,.8,.2,1),
      opacity .28s ease-out,
      transform .42s cubic-bezier(.2,.8,.2,1),
      padding .28s ease-out;
    display:flex; flex-direction:column; gap:.5rem; box-shadow:0 14px 34px rgba(0,0,0,0);
  }
  .menu__links.open{
    padding: .75rem var(--gap);
    max-height: 70vh;     /* cukup besar; konten panjang akan scroll */
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
  }
  .menu__links > li{
    opacity: 0; transform: translateY(-4px);
    transition: opacity .28s ease-out, transform .42s cubic-bezier(.2,.8,.2,1);
  }
  .menu__links.open > li{ opacity:1; transform:none }
  .menu__links.open > li:nth-child(1){ transition-delay: .02s }
  .menu__links.open > li:nth-child(2){ transition-delay: .04s }
  .menu__links.open > li:nth-child(3){ transition-delay: .06s }
  .menu__links.open > li:nth-child(4){ transition-delay: .08s }
  .menu__links.open > li:nth-child(5){ transition-delay: .10s }
  .menu__links.open > li:nth-child(6){ transition-delay: .12s }
  .menu__links.open > li:nth-child(7){ transition-delay: .14s }
  .menu__links.open > li:nth-child(8){ transition-delay: .16s }
  .menu__links.open > li:nth-child(9){ transition-delay: .18s }
}

/* Hero slider */
.hero{position:relative; background:var(--brand-dark); color:var(--fg-inv)}
.hero__slider{position:relative; overflow:hidden; width: 100vw;}
.hero__track{display:grid; grid-auto-flow:column; grid-auto-columns:100%; transition:transform .5s ease}
.hero__slide{
  position:relative; 
  /* min-block-size: clamp(48vh, 70vh, 78vh); */
  height: clamp(320px, 56vw, 700px);
  min-height: 0;
  background: transparent;
  isolation: isolate;
}
.hero__slider > .hero__slide,
.hero__slides   > .hero__slide,
.hero__track    > .hero__slide{
  flex: 0 0 100vw;           /* 1 slide = 100% viewport width */
  width: 100vw;
}
@media (max-width: 768px){
  .hero__slide{ aspect-ratio: 4 / 3; }
}
@media (min-width: 1440px){
  .hero__slide{ aspect-ratio: 21 / 9; }
}
.hero__slide img{inline-size:100%; block-size:100%; object-fit:cover; object-position: center; display:block; filter:brightness(.9)}
.hero__overlay{position:absolute; inset:auto 0 12% 6%; display:grid; gap:clamp(.6rem,1.2vw,1rem); max-inline-size: var(--hero-overlay-width); }
.hero__meta{ 
  font-family: "Maison Neue Light", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 500; 
  display: inline-flex;
  align-items: center;
  gap: clamp(.4rem, .9vw, .6rem);
  border: 0 !important;
  padding-inline-start: 0 !important;
  font-size: clamp(.9rem, 1.6vw, 1.125rem);
  opacity: .9; 
}
.hero__meta::before{
  content: "";
  inline-size: clamp(1.1rem, 3vw, 2rem);
  block-size: .12rem;
  background: currentColor;
  border-radius: .12rem; 
}
.hero__title{
  font-family: "Maison Neue Light", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; 
  font-weight: 300;
  font-style:  normal;
  font-size:   var(--hero-title-size);
  line-height: 1.15;
  letter-spacing: 0.1px;
  margin: 0;
}
@media (max-width: 720px){
  .hero__overlay{ max-inline-size: 100%; }
}
.btn{display:inline-block; text-decoration:none; color:#fff; background:var(--accent-hero);
  padding:.7em 1.2em; border-radius:.8rem; transition:transform .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn--accent{background:var(--accent-hero)}
.btn--compact{
  display: inline-flex;
  align-items: center;
  gap: clamp(28px, 4.8vw, 72px);
  padding: .48em .82em;
  border-radius: .7rem;
  inline-size: auto; 
  min-inline-size: auto;
  max-inline-size: fit-content;
  align-self: start;
}
.btn--arrow::after{
  content: "▸" !important; 
  display: inline-block;
  margin-inline-start: .45em;
  transform-origin: 50% 50%;
  line-height: 1;
  font-size: 1em;  
  color: currentColor; 
}
.btn::before{ content: none !important; }

.slider__btn{position:absolute; top:50%; transform:translateY(-50%); border:0; color:#fff;
  background:rgba(0,0,0,.35); padding:.4rem .7rem; border-radius:.6rem; cursor:pointer}
.slider__btn:hover{background:rgba(0,0,0,.5)}
.slider__btn.prev{left:.6rem} .slider__btn.next{right:.6rem}
.slider__dots{position:absolute; inset:auto 0 1rem 0; display:flex; gap:.35rem; justify-content:center}
.slider__dots button{inline-size:.55rem; block-size:.55rem; border-radius:999px; border:0; background:rgba(255,255,255,.5)}
.slider__dots button[aria-current="true"]{background:#fff}

/* Informasi Terkini */
.latest__card::after{ content:none !important; }
.latest__card, .latest__card *{ position: static; }
.latest{
  margin-top: 0 !important;
  position: relative;
  overflow: visible;           /* izinkan box menumpuk ke hero */
  overflow-x: clip;
}
.latest .container{
  width: var(--container) !important;     /* kembali ke lebar container */
  max-width: var(--container) !important;
  margin-inline: auto !important;         /* center */
  padding: 0 !important;
  position: relative;
}
.latest__wrap{ position: relative; }
.latest__rail{
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(
    calc(-1 * min(var(--rail-outset), max(0px, var(--gutter) - 12px)))
  );
  margin-top: clamp(12px, 2vw, 18px);
  display: grid; gap: .6rem;
}
.rail-btn{ inline-size:var(--rail-w); display:grid; place-items:center; }
.rail-btn img{ max-width:100%; height:auto; display:block; }
.latest__card{
  position: relative;
  z-index: 2;                  /* di atas foto hero */
  transform: translateY(var(--latest-lift));
}
.latest__card{
  margin-left: var(--latest-gap);  /* space untuk rail kiri */
  margin-right: 0 !important;
  background-color:#ECECEC;
  border-radius:5px;
  border-bottom-left-radius: 22px;
  padding: clamp(16px,2.8vw,24px);
  box-shadow:0 10px 30px rgba(0,0,0,.08);

  /* pola di kanan -> background layer (di belakang konten, aman) */
  background-image: url("../images/patterns/news-right.png");
  background-repeat: no-repeat;
  background-position: calc(100% + var(--news-pattern-shift)) center;
  background-size: min(420px,36%);
}
.latest__card{
  width: calc(100% + var(--gutter)) !important;      /* kanan menempel viewport */
}
.latest::after{
  content:"";
  display:block;
  height: calc(var(--latest-lift) * -1); /* tambahkan ruang sebesar lift */
}
.latest__head{ margin-bottom: var(--latest-sep) !important; }
.latest__title{ margin:0 0 6px 0; font-weight:800; font-size:clamp(18px,2.2vw,22px); }
.latest__more{ display:inline-flex; align-items:center; gap:.4em; color:#0f172a; text-decoration:none; font-weight:600; opacity:.9; }
.latest__more:hover{ opacity:1; text-decoration:underline; }
@media (max-width: 720px){
  :root{ --rail-w: 44px; }
  .latest__rail{ transform: none; }       /* taruh tepat di tepi box */
}
@media (max-width:640px){
  :root{ --rail-w: 44px; }
  .latest__card{ width: calc(100vw - (var(--rail-w) + var(--latest-gap))); }
  .latest__card::after{ opacity:.18; width: 50%; }
}

.card-slider{ position:relative; overflow:hidden; margin-top: calc(var(--latest-sep) * 0.25); }
.card-slider__track{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:0; transition:transform .45s ease; }
.card-slide{
  display:grid; gap: var(--latest-gap);
  grid-template-columns: repeat(4, minmax(0,1fr)) 0.5fr;
  align-items: stretch;
}
@media (max-width:1100px){ .card-slide{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:760px){  .card-slide{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:520px){  .card-slide{ grid-template-columns: 1fr;} }

.news-card{
  height: 100%;
  display: grid;
  grid-template-rows: auto /* tanggal */ auto /* judul */ auto; /* gambar */
  gap: .5rem;
  min-width: 0;  /* cegah teks meluber */
}
.news-card__imgwrap{display:block; border-radius:.8rem; overflow:hidden}
.news-card__imgwrap img{inline-size:100%; block-size:auto; display:block; transform:scale(1); transition:transform .35s ease, filter .35s ease}
.hover-zoom:hover img{transform:scale(1.06); filter:brightness(1.05)}
.news-card__meta{font-size:.9rem; opacity:.65}
.news-card__date{
  order:1;
  white-space: nowrap;
  font-family:"Maison Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:500; font-size:.95rem; color:#6b7280;
}
.news-card__title{
  order:2;
  font-family:"Maison Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:#0f172a; font-weight:700; line-height:1.35; text-decoration:none;
  margin:0;
  overflow-wrap:anywhere;      /* aman untuk judul panjang */
}
.news-card__title{
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: var(--news-title-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* tinggi minimum = jumlah baris tetap */
  min-height: calc(1em * 1.35 * var(--news-title-lines));
  margin: 0;
}
.news-card__title:hover{ text-decoration:underline; }
.news-card__thumb{
  order:3;
  display:block; border-radius:.8rem; overflow:hidden;
  margin-top:.25rem;
}
.news-card__thumb img{
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.latest__nav{ display:flex; gap:clamp(10px,3vw,32px); justify-content:center; padding-top:clamp(10px,2vw,16px); }
.latest__nav .navdot{ inline-size:28px; block-size:28px; border-radius:999px; display:grid; place-items:center; border:0; cursor:pointer; background:#16a34a; color:#fff; box-shadow:0 2px 10px rgba(22,163,74,.35); font-size:16px; }
.latest .slider__btn{ display:none !important; } /* sembunyikan prev/next besar */
@media (max-width:640px){
  :root{ --rail-w:44px; }
  .latest__card{ width: calc(100vw - (var(--rail-w) + var(--latest-gap))); }
  .latest__card{ background-size: 50%; } /* pola kanan lebih lebar di hp */
}

@media (prefers-reduced-motion: reduce){
  .menu__links,
  .menu__links > li{
    transition: none !important;
  }
}

/* === Prev / Next: "<  ———  >"  === */
:root{
  --news-nav-color: #16a34a;           /* hijau */
  --news-nav-sep-w: clamp(56px, 8vw, 120px); /* panjang garis */
  --news-nav-sep-h: 2px;               /* tebal garis */
}

.latest__nav{
  display:flex; align-items:center; justify-content:center;
  gap: 0; padding-top: clamp(12px, 2vw, 18px);
}

.navarrow{
  all: unset;
  cursor: pointer;
  color: var(--news-nav-color);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1;
  padding: .1rem .2rem;
}
.navarrow:hover{ color: #108a3f; }
.navarrow:focus{ outline: 2px solid #16a34a33; outline-offset: 2px; }

/* garis horizontal di antara tombol */
.navsep{
  display:inline-block;
  width: var(--news-nav-sep-w);
  height: var(--news-nav-sep-h);
  margin: 0 clamp(10px, 2vw, 16px);
  background: linear-gradient(90deg,
              transparent 0 4%,
              color-mix(in oklab, var(--news-nav-color) 70%, white 0%) 4% 96%,
              transparent 96% 100%);
  border-radius: 2px;
}

/* jika masih ada style lama .navdot, matikan */
.latest__nav .navdot{ display: none !important; }

/* ===== Sambutan + Agenda (versi mirip desain) ===== */
:root{
  --greet-gap: clamp(20px, 3.6vw, 36px);
  --greet-photo-max: 440px;
  --greet-ellipse: #f0de5a;     /* kuning ellipse */
  --greet-dot: #d7dbe1;         /* titik abu */
}

.greetv2__grid{
  display:grid; gap: var(--greet-gap);
  /* grid-template-columns: minmax(280px, var(--greet-photo-max)) minmax(360px, 1fr) minmax(360px, 520px); */
  align-items: start;
}
@media (max-width: 1024px){ .greetv2__grid{ grid-template-columns: 1fr; }}

/* FOTO + dekor */
.greetv2__photo{
  position: relative; margin: 0; max-width: var(--greet-photo-max);
}
.greetv2__photo img{
  width: 100%; height: auto; display:block; border-radius: 14px;
  object-fit: cover;
}

/* badge hijau di foto */
.greetv2__badge{
  position:absolute; left: 10%; bottom: 6%;
  background:#16a34a; color:#fff;
  padding: .7rem 1.1rem; border-radius: 999px;
  display:grid; gap:.15rem;
  box-shadow: 0 10px 24px rgba(22,163,74,.28);
  font-family:"Maison Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.greetv2__badge strong{ font-weight:800; font-size: clamp(.92rem, 1.6vw, 1.05rem); line-height:1.05; }
.greetv2__badge small{ opacity:.95; font-weight:500; font-size: clamp(.76rem, 1.3vw, .86rem); }

/* teks tengah */
.greetv2__overline{
  font-family:"Maison Neue"; font-weight:500; 
  font-size: clamp(16px, 1.6vw, 22px); color:#6b7280; margin:.2rem 0 .2rem;
}
.greetv2__title{
  font-family:"Maison Neue"; font-weight:800;
  font-size: clamp(26px, 3.6vw, 42px); line-height:1.15; margin: .2rem 0 1rem;
}
.greetv2__text p{ margin:.65rem 0; color:#374151; }

/* ===== Header: judul kiri + "Lihat lainnya" kanan ===== */
.members { --gap: clamp(14px, 2vw, 18px); --card-w: clamp(200px, 28vw, 230px); }
.members__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 1rem;
  padding-bottom: clamp(8px, 1.6vw, 12px);
  margin-bottom: clamp(14px, 3.2vw, 22px);
  border-bottom: 1px solid rgba(0,0,0,.08);       /* garis halus memanjang */
}
.members__title{
  margin:0; font-family:"Maison Neue", system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:800; font-size:clamp(20px,2.6vw,24px); line-height:1.2; position:relative;
  padding-bottom: .55rem;
}
.members__title::after{
  content:""; position:absolute; left:0; bottom:-2px;      /* garis hijau pendek */
  inline-size: clamp(90px, 15vw, 140px); block-size:4px;
  background:#16a34a; border-radius:4px;
}
.members__more{
  color:#6b7280; text-decoration:none; font-weight:600;
  display:inline-flex; align-items:center; gap:.35rem;
}
.members__more:hover{ color:#111827; }

/* ===== Slider auto: viewport + track ===== */
.members__viewport{ overflow:hidden; }
.members__carousel{
  display:flex; gap: var(--gap);
  --cols: 5;
  animation: members-marquee var(--members-speed, 40s) linear infinite;
  will-change: transform;
}
@keyframes members-marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (max-width:1200px){ .members__carousel{ --cols:4 } }
@media (max-width:980px) { .members__carousel{ --cols:3 } }
@media (max-width:720px) { .members__carousel{ --cols:2 } }
@media (max-width:520px) { .members__carousel{ --cols:1 } }

.members__carousel .member-card{
  /* flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); */
  flex: 0 0 var(--card-w);
  min-width: 0;
}

/* Pause saat hover agar nyaman klik */
.members__carousel:hover,
.members__carousel:focus-within{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){ .members__carousel{ animation:none } }

/* ===== Kartu anggota (tetap seperti desain) ===== */
.member-card{ border-radius:12px; overflow:hidden; background:#0b1220; }
.member-card__link{ display:block; text-decoration:none; color:inherit; }
.member-card__media{ position:relative; overflow:hidden; }
.member-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.member-card__grad{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.55) 92%); }
.member-card__meta{
  position:absolute; left:clamp(10px,1.8vw,14px); right:clamp(10px,1.8vw,14px);
  bottom:clamp(10px,1.8vw,14px); color:#fff; display:grid; gap:.28rem;
  font-family:"Maison Neue", system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.member-card__name{ margin:0; font-weight:700; font-size:clamp(.88rem,1.6vw,.98rem); line-height:1.2; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.member-card__faksi{ display:inline-block; font-size:clamp(.72rem,1.4vw,.8rem); font-weight:600; color:#8ef0b2; }
.member-card:hover img{ transform:scale(1.03); }

/* === FIX: teks tertumpuk pada item duplikat untuk loop */
.members__carousel [aria-hidden="true"] .member-card__meta{ display:none !important; }
.members__carousel [aria-hidden="true"] .member-card__grad{ display:none !important; }
.members__carousel [aria-hidden="true"] a{ pointer-events:none; }

/* ===== Banner 2 kolom, ukuran konsisten ===== */
.members__banners{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: clamp(16px, 3.6vw, 26px);
}
@media (max-width:820px){ .members__banners{ grid-template-columns: 1fr; } }

@media (max-width: 1024px){
  .members{ --card-w: clamp(200px, 28vw, 230px); }
}
@media (max-width: 768px){
  .members{ --card-w: clamp(170px, 38vw, 210px); }
}
@media (max-width: 600px){
  .members{ --card-w: clamp(150px, 46vw, 190px); }
}
@media (max-width: 420px){   /* iPhone 12 Pro (390px) juga masuk sini */
  .members{ --card-w: clamp(135px, 52vw, 170px); }
}
@media (max-width: 360px){   /* Galaxy S8/S8+ */
  .members{ --card-w: clamp(120px, 54vw, 160px); }
}

.banner{
  display:block; border-radius:5px; overflow:hidden; background:#eef2f5;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}
.banner img{
  width:100%; height:auto; display:block;
}

/* ==== 1) FIX overlay meta menumpuk ==== */
.member-card{
  position: relative;            /* penting: kontainer utk absolute children */
  border-radius: 12px;
  overflow: hidden;
  background:#0b1220;
}
/* pastikan overlay set duplikasi tetap tidak muncul/klik */
.members__carousel [aria-hidden="true"] .member-card__meta{ display:none !important; }
.members__carousel [aria-hidden="true"] .member-card__grad{ display:none !important; }
.members__carousel [aria-hidden="true"] a{ pointer-events:none; }

/* ==== 2) Satukan garis hijau dengan garis panjang ==== */
.members__head{
  position: relative;
  padding-bottom: clamp(8px, 1.6vw, 12px);
  margin-bottom: clamp(14px, 3.2vw, 22px);
  border-bottom: 0 !important;   /* buang garis lama agar tak ada jeda */
}
/* garis panjang tipis */
.members__head::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 1px;                      /* tebal garis panjang */
  background: rgba(0,0,0,.10);
}
/* segmen hijau di kiri: duduk di baseline yang sama */
.members__title{ position: relative; }
.members__title::after{
  content:"";
  position:absolute; left:0; bottom:0;   /* <-- kunci: 0 agar menyatu */
  inline-size: clamp(90px, 15vw, 140px);
  block-size: 4px;                       /* tebal hijau (boleh ubah) */
  background:#16a34a;
  border-radius: 4px;
}

/* === 1) Garis hijau = selebar teks judul & menyatu dg garis abu-abu === */
.members__head{
  position: relative;
  padding-bottom: clamp(8px, 1.6vw, 12px);
  margin-bottom: clamp(14px, 3.2vw, 22px);
  border-bottom: 0;                 /* jangan pakai border, pakai ::after */
}

/* garis abu-abu panjang (baseline) */
.members__head::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 2px;                      /* samakan tebalnya dg hijau */
  background: #e5e7eb;              /* abu-abu tipis */
}

/* judul jadi inline-block agar width = panjang teks */
.members__title{
  display:inline-block;             /* <- penting */
  position:relative;
}

/* garis hijau tepat di baseline yang sama dan selebar teks */
.members__title::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width: 100%;                      /* selebar teks judul */
  height: 2px;                      /* sama dgn garis abu-abu */
  background:#16a34a;
  border-radius: 2px;
}

/* === 2) Tampilkan overlay nama & fraksi pada set duplikasi === */
/* sebelumnya disembunyikan; sekarang tampil visual tapi tetap aria-hidden utk screen reader */
.members__carousel [aria-hidden="true"] .member-card__meta{
  display: grid !important;
}
.members__carousel [aria-hidden="true"] .member-card__grad{
  display: block !important;
}
.members__carousel [aria-hidden="true"] a{
  pointer-events: auto;             /* bisa diklik */
}

/* === Header: satu garis, 2 warna === */
.members__head{
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding-bottom: 12px;              /* tinggi baseline */
  margin-bottom: clamp(16px, 3.5vw, 28px);
  border-bottom: 0 !important;       /* matikan garis lama */
}
.members__head::after{
  /* garis abu-abu (lanjutan) — baseline yang sama */
  content:""; position:absolute; left:0; right:0; bottom:0;
  height: 2px; background:#e5e7eb;
}
.members__title{
  display:inline-block; position:relative; z-index:1;
}
/* segmen hijau: selebar teks, duduk di baseline yang sama */
.members__title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2px; background:#16a34a; border-radius:2px;
}

/* jarak ekstra antara slider anggota dan banner */
.members {
  --members-spacer: clamp(56px, 8vw, 120px);
}
.members__viewport { margin-bottom: var(--members-spacer) !important; }
.members__banners  { margin-top: var(--members-spacer) !important; margin-bottom: var(--members-spacer) !important; }

/* Matikan garis lama agar tidak dobel */
.members__head::after,
.members__title::after{ content: none !important; }

/* Satu garis: hijau (sepanjang judul) + abu-abu (sisanya) */
.members__head{
  position: relative;
  padding-bottom: 12px;                 /* tinggi baseline */
  margin-bottom: clamp(16px, 3.5vw, 28px);
}
.members__head::before{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 2px;                           /* tebal garis */
  background: linear-gradient(
    to right,
    #16a34a 0 var(--title-w, 0px),
    #e5e7eb var(--title-w, 0px) 100%
  );
  border-radius: 2px;
}

/* sejajarkan persis judul & link "Lihat lainnya" */
.members{ --more-nudge: -1px; }  /* atur ke 0 atau -2px jika perlu finetune */

.members__head{
  display:flex;
  align-items: baseline;            /* kunci: baseline alignment */
  gap: clamp(8px, 1.8vw, 16px);
  padding-bottom: 12px;             /* tetap untuk garis baseline */
  margin-bottom: clamp(16px, 3.5vw, 28px);
  position: relative;
}

.members__title{
  display:inline-block;              /* agar width = panjang teks (untuk garis) */
  margin:0;
  line-height: 1.15;                 /* samakan dengan link */
}

.members__more{
  margin-left:auto;                  /* dorong ke kanan */
  display:inline-block;
  line-height: 1.15;                 /* baseline sama */
  translate: 0 var(--more-nudge);    /* micro-adjust kalau font metrics beda */
}

/* saat layar kecil, biarkan turun ke baris berikut tetap rapi */
@media (max-width: 640px){
  .members__head{ flex-wrap: wrap; align-items: flex-end; }
  .members__more{ width:100%; text-align:right; margin-top: 6px; translate: 0; }
}

/* === Kembalikan media: no frame, fit rapi === */
.member-card{ background: transparent !important; }

.member-card__media{
  padding: 0 !important;
  background: transparent !important;
  border-radius: 12px;
  overflow: hidden;
}
.member-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;             /* tidak ada bar hitam */
  transform: scale(1) !important;/* batalkan zoom-out yang tadi */
}

/* Hover tetap halus */
.member-card:hover .member-card__media img{ transform: scale(1.03); }

/* Shine effect */
.member-card::before {
  position: absolute;
  top: 0;
  left: -85%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none; /* biar nggak ganggu klik */
}

.member-card:hover::before {
  animation: shine .75s;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

/* === Perkecil teks overlay === */
.members{
  --member-name: clamp(.80rem, 1.15vw, .90rem);
  --member-faksi: clamp(.66rem, 0.95vw, .76rem);
}
.member-card__name{ font-size: var(--member-name) !important; }
.member-card__faksi{ font-size: var(--member-faksi) !important; }

/* aktifkan lagi animasi zoom saat hover */
.member-card__media img{
  transform: scale(1) !important;                 /* baseline */
  transition: transform .32s ease !important;     /* animasi */
  will-change: transform;
}
.member-card:hover .member-card__media img{
  transform: scale(1.035) !important;            /* zoom halus saat hover */
}

/* opsional: hormati preferensi reduce motion */
@media (prefers-reduced-motion: reduce){
  .member-card__media img{ transition: none !important; }
}

/* ===== Gallery Card ===== */
.gallery{ background: linear-gradient(135deg, #2a2f7c 0%, #2b4f95 100%); }
.gallery__card{
  display:grid; gap: clamp(18px, 3vw, 28px);
  grid-template-columns: 1fr 1fr;
  padding: clamp(16px, 3vw, 28px);
  border-radius: 18px;
  color:#fff;
}
@media (max-width: 960px){ .gallery__card{ grid-template-columns: 1fr; } }

.gallery__head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom: .6rem; margin-bottom: .8rem; position:relative;
}
.gallery__head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#ffffff26;
}
.gallery__title{
  margin:0; font-family:"Maison Neue"; font-weight:800; font-size: clamp(18px, 2.4vw, 22px);
  position:relative; display:inline-block;
}
.gallery__title::after{
  content:""; position:absolute; left:0; bottom:-2px; height:3px; width: 120px;
  background:#f6c90e; border-radius: 3px;
}
.gallery__more{ color:#fefefe; opacity:.8; text-decoration:none; font-weight:600; }
.gallery__more .arr{ color:#f6c90e; }

/* ===== Photo slider ===== */
.photo-slider{ position:relative; overflow:hidden; border-radius: 12px; }
.photo-slide{
  position:absolute; inset:0; opacity:0; transition: opacity .5s ease;
}
.photo-slide.is-active{ position:relative; opacity:1; }
.photo-slide img{
  width:100%; height:auto; display:block; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 12px;
}
.photo-grad{ position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 95%); border-radius:12px; }
.photo-caption{
  position:absolute; left: clamp(12px, 2vw, 18px); bottom: clamp(12px, 2vw, 18px);
  margin:0; font-weight:700; font-size: clamp(.9rem, 1.6vw, 1.05rem);
}

/* ===== Video list ===== */
.video-list{ list-style:none; padding:0; margin:0; display:grid; gap: clamp(12px, 1.8vw, 16px); }
.video-item{ display:block; }
.video-link{ display:grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 14px; text-decoration:none; color:#fff; align-items:center; }
@media (max-width: 520px){ .video-link{ grid-template-columns: 1fr; } }
.video-thumb{ position:relative; border-radius:10px; overflow:hidden; }
.video-thumb img{ width:100%; height:auto; display:block; aspect-ratio: 16 / 9; object-fit: cover; }
.play{
  position:absolute; inset:auto auto 50% 50%; transform: translate(-50%, 50%);
  width: 42px; height: 42px; border-radius: 999px; background: #0008; display:grid; place-items:center;
  box-shadow: 0 0 0 3px #fff9 inset;
}
.play::before{
  content:""; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  margin-left: 3px;
}
.video-title{
  margin:0; line-height:1.35; opacity:.95; font-weight:600;
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;
}

/* sedikit ruang atas untuk kolom kanan agar garis bawah header terlihat */
.gallery__col--video .gallery__head{ margin-bottom: .9rem; }

/* 1) Box full selebar container & tanpa radius */
.gallery .container{ padding-left:0; padding-right:0; }     /* hilangkan gutter kiri/kanan di dalam container */
.gallery__card{
  border-radius: 0 !important;
  padding-inline: clamp(12px, 2.2vw, 24px);                 /* tetap ada ruang dalam yang tipis */
}

/* 2) Garis judul: satu garis (kuning + abu) ala Profil Anggota */
.gallery__head::after,
.gallery__title::after{ content:none !important; }          /* matikan garis lama */
.gallery__head{
  position:relative;
  padding-bottom: 12px;
  margin-bottom: clamp(12px, 2vw, 18px);
}
/* satu baseline: segmen kiri kuning sepanjang teks, sisanya abu-abu tipis */
.gallery__head::before{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(
    to right,
    #f6c90e 0 var(--title-w, 0px),
    #ffffff33 var(--title-w, 0px) 100%
  );
  border-radius:2px;
}
.gallery__title{ display:inline-block; margin:0; }

/* 3) Kolom video diperkecil + sejajarkan tinggi dengan foto */
.gallery__card{ grid-template-columns: 1fr 0.9fr; }         /* kanan sedikit lebih sempit */
.video-link{
  grid-template-columns: minmax(120px, 180px) 1fr;          /* thumbnail lebih kecil */
  gap: 12px;
  align-items: start;                                       /* 4) teks di atas, bukan center */
}
.video-thumb img{ aspect-ratio: 16 / 9; object-fit: cover; }
.play{ width: 36px; height: 36px; }                         /* icon play sedikit lebih kecil */
.video-list{ gap: clamp(10px, 1.4vw, 14px); }

/* 4) Tipografi video lebih ringan & tidak center */
.video-title{
  margin:0;
  font-weight: 600;                                         /* lebih ringan dari sebelumnya */
  line-height: 1.35;
  text-align: left;
}

/* responsif small */
@media (max-width: 960px){
  .gallery .container{ padding-left: var(--container-pad, 16px); padding-right: var(--container-pad, 16px); }
  .gallery__card{ border-radius: 12px; }                    /* di mobile boleh rounded lagi kalau mau */
}

/* 1) "Lihat lainnya" warna kuning */
.gallery .gallery__more{ color:#f6c90e !important; opacity:1; font-weight:300; }
.gallery .gallery__more .arr{ color:#f6c90e; }

/* 2) Box galeri biru full-width (seperti hero), tanpa radius  */
.gallery__card{
  position: relative;
  left: 50%;
  width: 100vw;               /* full bleed ke tepi viewport */
  transform: translateX(-50%);
  border-radius: 0 !important;
  padding-inline: clamp(16px, 2.2vw, 28px); /* ruang dalam tipis */
}

/* 3) Foto di Galeri Foto: isi kolom penuh (lebar mentok kolom) */
.gallery__col--photo .photo-slider{ width:100%; }
.gallery__col--photo .photo-slide,
.gallery__col--photo .photo-slide img{
  width:100%; height:auto;
}

/* 4) Thumbnail video diperkecil ≈ selebar garis kuning judul kolom video
      (pakai --title-w yang sudah diset JS di .gallery__head) */
.gallery__col--video .video-link{
  /* kolom kiri = lebar garis kuning (dengan batas min/max agar aman) */
  grid-template-columns: clamp(110px, var(--title-w, 160px), 200px) 1fr;
  align-items: start;       /* teks tidak center */
}
.gallery__col--video .video-title{
  font-weight: 300;         /* lebih ringan */
  text-align: left;
}

/* responsif kecil: biar tetap rapi satu kolom */
@media (max-width: 960px){
  .gallery__card{ width: 100%; left: 0; transform:none; border-radius:12px; }
  .gallery__col--video .video-link{ grid-template-columns: 1fr; }
}

/* --- A. Foto galeri kiri harus mentok --- */
.gallery__col--photo .photo-slider,
.gallery__col--photo .photo-slide {
  margin: 0 !important;           /* hilangkan margin bawaan <figure> */
}
.gallery__col--photo .photo-slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- B. Hover animasi untuk semua image --- */

/* Galeri Foto: animasi di slide aktif */
.photo-grad { pointer-events: none; }  /* biar hover tembus ke gambar */
.photo-slide img {
  transition: transform .35s ease, filter .35s ease;
  will-change: transform;
}
.photo-slide.is-active:hover img {
  transform: scale(1.02);         /* zoom halus */
}

/* Galeri Video: animasi thumb + play */
.video-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transition: box-shadow .25s ease;
}
.video-thumb img {
  transition: transform .30s ease;
  will-change: transform;
}
.video-link:hover .video-thumb img { transform: scale(1.03); }
.video-link:hover .video-thumb { box-shadow: 0 10px 24px rgba(0,0,0,.25); }

.play { transition: transform .25s ease, opacity .25s ease; }
.video-link:hover .play { transform: translate(-50%, 50%) scale(1.06); opacity: .95; }

/* ===== Galeri Foto: hover animasi pasti aktif ===== */

/* skala saat hover (boleh ubah 1.02–1.05) */
.photo-slider{ --photo-hover-scale: 1.03; }

/* pastikan gambar siap dianimasi */
.photo-slide img{
  transition: transform .35s ease, filter .35s ease;
  will-change: transform;
  transform-origin: 50% 50%;
}

/* trigger hover dari SELURUH area slider atau figure aktif */
.photo-slider:hover .photo-slide.is-active img,
.photo-slide.is-active:hover img{
  transform: scale(var(--photo-hover-scale)) !important;
}

/* opsional: gelapkan grad dikit saat hover biar caption lebih kebaca */
.photo-grad{ pointer-events:none; transition: background .35s ease; }
.photo-slider:hover .photo-slide.is-active .photo-grad{
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.65) 100%);
}

/* ===== Photo caption: putih & sedikit lebih ke atas ===== */
.photo-slider{
  --caption-bottom: clamp(20px, 2.6vw, 28px); /* jarak dari bawah (lebih tinggi dari sebelumnya) */
}

.photo-caption{
  color: #fff !important;
  bottom: var(--caption-bottom) !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);     /* biar tetap kebaca di foto terang */
  line-height: 1.2;
}

/* pastikan figure jadi konteks positioning */
.photo-slide{ position: relative; }

/* caption di atas gradient: murni putih */
.photo-caption{
  position: absolute;            /* sudah absolute, tegaskan lagi */
  z-index: 2 !important;         /* di atas .photo-grad */
  color: #fff !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* gradient tetap di bawah caption */
.photo-grad{
  position: absolute;
  z-index: 1 !important;
  pointer-events: none;
}

/* ==== Mobile: Galeri Foto lalu Galeri Video (stack) ==== */
@media (max-width: 960px){
  .gallery__card{
    grid-template-columns: 1fr !important;  /* dari 2 kolom -> 1 kolom */
    gap: clamp(14px, 4vw, 22px);
    width: 100% !important;                 /* lepas full-bleed */
    left: 0 !important; transform: none !important;
    border-radius: 12px;                    /* opsional: rounded di mobile */
  }

  /* beri jarak antara kolom foto & kolom video saat sudah stack */
  .gallery__col--video{ margin-top: clamp(10px, 3vw, 18px); }

  /* list video: thumb di atas, teks di bawah */
  .gallery__col--video .video-link{
    grid-template-columns: 1fr !important;
    align-items: start;
  }
}

/* ===== Revert: Galeri Foto = FADE (bukan track) ===== */
.photo-slider{ position: relative; overflow: hidden; border-radius: 12px; }

/* kalau ada .photo-track dari patch sebelumnya, matikan layout-nya */
.photo-slider .photo-track{ display: contents !important; }

/* setiap slide ditumpuk, fade in/out via .is-active */
.photo-slide{
  position: absolute !important;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.photo-slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* gambar & overlay tetap */
.photo-slide img{
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px;
  transition: transform .35s ease, filter .35s ease;
  will-change: transform;
}
.photo-grad{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.photo-caption{
  position:absolute; z-index:2; left: clamp(12px,2vw,18px);
  bottom: clamp(20px,2.6vw,28px); color:#fff;
  font-weight:700; text-shadow:0 2px 6px rgba(0,0,0,.45);
}

/* hover zoom untuk slide aktif */
.photo-slider{ --photo-hover-scale: 1.03; }
.photo-slider:hover .photo-slide.is-active img,
.photo-slide.is-active:hover img{
  transform: scale(var(--photo-hover-scale));
}

/* Pastikan container punya tinggi (responsif) */
.photo-slider{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 16 / 9;                 /* tinggi otomatis dari lebar */
  background: transparent;
}

/* Slide ditumpuk + terlihat saat aktif (sudah OK) */
.photo-slide{
  position: absolute !important;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.photo-slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* Gambar wajib isi container, bukan height:auto */
.photo-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  transition: transform .35s ease, filter .35s ease;
  will-change: transform;
}

/* Overlay & caption tetap di atas */
.photo-grad{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.photo-caption{ position:absolute; z-index:2; }

/* Hover zoom (opsional) */
.photo-slider{ --photo-hover-scale: 1.03; }
.photo-slider:hover .photo-slide.is-active img,
.photo-slide.is-active:hover img{
  transform: scale(var(--photo-hover-scale));
}

/* ====== SECTION ASPIRASI ====== */
.aspirasi{ padding-block: clamp(28px, 7vw, 80px); background:#fff; }
.aspirasi .container{ max-width: var(--container-max, 1200px); margin-inline:auto; }

/* ------- Partai slider (marquee) ------- */
.partai-marquee{
  overflow:hidden;
  padding-block: clamp(12px, 3vw, 22px);
  margin-bottom: clamp(26px, 5vw, 46px);
}
.partai-track{
  display:flex; align-items:center; gap: clamp(18px, 4vw, 44px);
  animation: partai-marquee var(--marquee-duration, 20s) linear infinite;
}
.partai-marquee:hover .partai-track{ animation-play-state: paused; }
@keyframes partai-marquee{
  to { transform: translateX(calc(-50%)); } /* karena konten digandakan */
}
.partai-item{ flex:0 0 auto; display:grid; place-items:center; }
.partai-item img{
  height: clamp(36px, 6.2vw, 64px);
  width: auto;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
  transition: transform .25s ease;
}
.partai-item:hover img{ transform: scale(1.06); }

/* ------- CTA ------- */
.aspirasi-cta{ text-align:center; max-width: 920px; margin: 0 auto; }
.aspirasi-quote{
  font-size: clamp(40px, 9vw, 80px);
  line-height: .6;
  color:#d6d6d6;
  margin-bottom: clamp(8px, 2vw, 12px);
}
.aspirasi-title{
  margin:0;
  font-family:"Maison Neue", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800;
  font-size: clamp(18px, 3.2vw, 32px);
  line-height: 1.25;
  color:#1f2937;
}
.aspirasi-text{
  margin: clamp(12px, 2.6vw, 18px) auto 0;
  max-width: 780px;
  color:#4b5563;
  line-height: 1.55;
}
.aspirasi-name{
  margin-top: clamp(10px, 2vw, 14px);
  color:#374151;
  font-weight:700;
}
.btn-aspirasi{
  display:inline-flex; align-items:center; gap:10px;
  margin-top: clamp(22px, 4.5vw, 36px);
  padding: 12px 20px;
  background:#16a34a; color:#fff; text-decoration:none;
  border-radius: 9999px; font-weight:500;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-aspirasi .plus{
  display:inline-grid; place-items:center;
  width: 24px; height: 24px; border-radius: 9999px;
  background:#fff; color:#16a34a; font-weight:500; line-height:1;
}
.btn-aspirasi:hover{
  transform: translateY(-1px);
  background:#169447;
}

/* mobile spacing tweak */
@media (max-width: 640px){
  .aspirasi .container{ padding-inline: 16px; }
}

/* Hapus jarak di bawah section Galeri */
.gallery{
  padding-bottom: 0 !important;   /* hilangkan ruang dasar yang menampilkan pola abu-abu */
  margin-bottom: 0 !important;
}

/* Hapus jarak di atas section Aspirasi */
.aspirasi{
  padding-top: 0 !important;      /* langsung mulai dari logo partai */
}
.aspirasi .container{
  padding-top: 0 !important;
}

/* Pastikan komponen pertama di Aspirasi tidak punya gap */
.partai-marquee{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* jarak putih antara blok biru & deretan logo partai — lebih besar */
.aspirasi{
  /* naikkan gap; tinggal sesuaikan angka kalau mau lebih/kurang */
  padding-top: clamp(28px, 6.5vw, 72px) !important;
}

/* pastikan marquee tidak menambah gap lain */
.partai-marquee{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 2) Persempit lebar judul & deskripsi */
.aspirasi-cta{ max-width: 820px !important; }
.aspirasi-title{
  max-width: 820px;                   /* sempitkan judul */
  margin-inline: auto;
}
.aspirasi-text{
  max-width: 720px;                   /* deskripsi lebih sempit dari judul */
  margin-inline: auto;
}

/* 3) Tombol: + putih polos, tanpa bulatan */
.btn-aspirasi{
  gap: 10px;
}
.btn-aspirasi .plus{
  background: none !important;        /* hilangkan lingkaran */
  width: auto; height: auto;
  color: #fff !important;
  font-size: 1.25em;                  /* sedikit lebih besar dari teks */
  line-height: 1;
  transform: translateY(-1px);        /* rapikan optik baseline */
  border-radius: 0;
  padding: 0;
}

/* Ikon kutip dari file SVG-mu, bisa diwarnai via CSS */
.aspirasi-quote{
  /* ukuran responsif, silakan sesuaikan */
  width:  clamp(48px, 6.2vw, 86px);
  height: clamp(32px, 4.4vw, 56px);

  /* warna ikon */
  --quote-color: #dedede;
  color: var(--quote-color);

  /* jadikan SVG sebagai mask supaya bisa diwarnai */
  background: currentColor;
  -webkit-mask: url('../images/ui/quote-open.svg') center / contain no-repeat;
          mask: url('../images/ui/quote-open.svg') center / contain no-repeat;

  display: inline-block;
  margin: 0 auto clamp(16px, 2.6vw, 28px);
}

/* pastikan pseudo lama (kalau ada) tidak aktif */
.aspirasi-quote::before,
.aspirasi-quote::after { content: none !important; }

/* ===== Footer ===== */
.site-footer{
  background:#f3f4f6;  /* abu-abu muda */
  color:#111827;       /* teks gelap */
  border-top: 1px solid #e5e7eb;
}
.site-footer .container{
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 24px);
}
.footer-inner{
  display:grid;
  gap: clamp(16px, 3vw, 32px);
  padding-block: clamp(22px, 4.5vw, 38px);
}


/* brand */
.footer-logo{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.footer-logo img{ width:58px; height:auto; }
.footer-brandtext{ display:flex; flex-direction:column; font-size:22px; line-height:1.05; }
.footer-address{
  font-style:normal;
  color:#4b5563;
  margin:6px 0 12px;
}
.footer-social{ display:flex; gap:14px; }
.footer-social .ico{
  width:20px; height:20px; fill:currentColor; color:#111827;
  opacity:.9; transition:opacity .2s ease, transform .2s ease;
}
.footer-social a:hover .ico{ transform: translateY(-1px); opacity:1; }

/* columns */
.footer-col h4{
  font-weight:700; font-size:15px; margin:4px 0 10px; color:#111827;
}
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin:7px 0; }
.footer-col a{
  color:#374151; text-decoration:none;
}
.footer-col a:hover{ text-decoration:underline; color:#111827; }

/* legal strip */
.footer-legal{
  background:#ededed;
  border-top:1px solid #e5e7eb;
  font-size:13px;
  text-align:center;
  padding:12px 16px;
  color:#4b5563;
}

/* Floating WhatsApp */
.wa-float{
  position: fixed;
  right: clamp(14px, 2.4vw, 22px);
  bottom: clamp(16px, 3.2vw, 26px);
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 0; cursor: pointer;
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .35);
  display:grid; place-items:center;
  z-index: 60;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(37, 211, 102, .45);
}
.wa-float svg{ width:30px; height:30px; }

/* Sosmed pakai <img> */
.footer-social { display:flex; gap:14px; }
.footer-social .ico-img{
  width:20px; height:20px; display:block;
  transition: transform .2s ease, opacity .2s ease;
  opacity:.95;
}
.footer-social a:hover .ico-img{
  transform: translateY(-1px);
  opacity:1;
}

/* Floating WA pakai <img> dari file */
.wa-float{
  position: fixed;
  right: clamp(14px, 2.4vw, 22px);
  bottom: clamp(16px, 3.2vw, 26px);
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: #ffffff;                 /* latar belakang putih agar logo WA menonjol */
  box-shadow: 0 10px 26px rgba(0,0,0,.15);
  display:grid; place-items:center;
  z-index: 60;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.2);
}
.wa-float .wa-icon{
  width: 30px; height: 30px; display:block;
}

/* ====== FOOTER: layout lebih lega untuk brand kiri ====== */

/* Lebarkan brand kiri, persempit kolom menu */
.footer-inner{
  /* dari: 1.2fr repeat(4, 1fr) */
  grid-template-columns: 2.1fr repeat(4, .9fr);
  column-gap: clamp(16px, 2.2vw, 28px) !important;
}

/* Batas lebar kolom menu agar tidak melebar terlalu jauh */
.footer-col{
  max-width: 230px;      /* boleh 200–240px sesuai selera */
}

/* Sedikit rapikan tipografi agar serasi dgn desain */
.footer-col h4{
  font-size: 14px !important;
  margin: 2px 0 8px !important;
}
.footer-col li{ margin: 6px 0 !important; }
.footer-col a{ font-size: 15px; }

/* Lebarkan area brand (judul + alamat) */
.footer-logo img{ width: 64px !important; }             /* logo sedikit lebih besar */
.footer-brandtext{ font-size: 24px !important; }        /* judul DPRD Kota Cilegon lebih tegas */
.footer-address{ max-width: 420px; }                    /* biar wrapping rapi */

/* ====== FLOATING WHATSAPP: hanya ikon SVG, tanpa rounded ====== */

/* hilangkan circle, bayangan; gunakan ikon milikmu saja */
.wa-float{
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  right: clamp(14px, 2.4vw, 22px);
  bottom: clamp(16px, 3.2vw, 26px);
  display: grid; place-items: center;
}

/* besarkan ikon WA-nya */
.wa-float .wa-icon{
  width: clamp(56px, 5.5vw, 76px) !important;  /* atur besar- kecilnya di sini */
  height: auto !important;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));   /* agar tetap “pop” di atas konten */
  transition: transform .12s ease;
}
.wa-float:hover .wa-icon{ transform: translateY(-1px) scale(1.02); }

/* Responsif: saat tablet-ke-bawah, kolom tetap nyaman */

/* <=1200/1024: brand di atas full, menu 4 kolom */
@media (max-width: 1200px){
  .footer-inner{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}

/* <=900: menu 2 kolom */
@media (max-width: 900px){
  .footer-inner{
    grid-template-columns: 1fr 1fr;       /* 2 kolom */
    gap: clamp(12px, 2.4vw, 22px);
  }
  .footer-brand{
    grid-column: 1 / -1;                  /* brand full width di atas */
  }
}

/* <=560: menu 1 kolom */
@media (max-width: 560px){
  .footer-inner{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 399px){
  .footer-inner{
    grid-template-columns: 1fr;           /* 1 kolom */
    gap: 14px;
  }
}

/* ===== Brand kiri lebih besar ===== */
.footer-logo img{
  /* perbesar logo + tetap responsif */
  width: clamp(72px, 6.8vw, 96px) !important;
  height: auto !important;
}

.footer-brandtext{
  /* perbesar tulisan DPRD Kota Cilegon */
  font-size: clamp(26px, 2.6vw, 36px) !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
}

/* kalau ingin tiap baris makin tegas */
.footer-brandtext strong{ font-weight: 700 !important; }

/* opsional: beri ruang sedikit di bawah brand agar lega */
.footer-logo{ margin-bottom: 8px; }

/* ===== Copyright strip ===== */
.footer-legal{
  background: #DFDFDF !important;
  border-top: none !important;        /* hilangkan garis atas jika ada */
  color: #374151;                      /* warna teks nyaman dibaca */
}

/* ===== Footer brand: logo lebih besar + jarak ke judul ===== */
.footer-logo{
  display: flex;
  align-items: center;
  /* jarak antara logo & judul – silakan adjust jika perlu */
  gap: clamp(16px, 2.2vw, 28px) !important;
}

.footer-logo img{
  /* logo diperbesar lagi */
  width: clamp(88px, 7.6vw, 120px) !important;
  height: auto !important;
}

/* opsional: di layar kecil, tetap nyaman */
@media (max-width: 640px){
  .footer-logo{ gap: 16px !important; }
  .footer-logo img{ width: clamp(80px, 20vw, 96px) !important; }
}

/* ========================
   REVEAL ON SCROLL (ROS)
   ======================== */

:root{
  --ros-duration: 720ms;
  --ros-ease: cubic-bezier(.16,.84,.26,1); /* halus, ada sedikit "snap" */
}

/* keadaan awal (sebelum terlihat) */
.reveal{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    transform var(--ros-duration) var(--ros-ease),
    opacity   var(--ros-duration) var(--ros-ease);
  will-change: transform, opacity;
}

/* variasi arah */
.reveal[data-reveal="up"]     { transform: translate3d(0, 26px, 0); }
.reveal[data-reveal="down"]   { transform: translate3d(0,-26px, 0); }
.reveal[data-reveal="left"]   { transform: translate3d(-28px, 0, 0); }
.reveal[data-reveal="right"]  { transform: translate3d( 28px, 0, 0); }
.reveal[data-reveal="zoom"]   { transform: scale(.96); }

/* ketika terlihat */
.reveal.is-visible{
  opacity: 1;
  transform: none;
}

/* Stagger untuk grup */
[data-reveal-group] > .reveal{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

/* Jika user minta reduced motion, tampilkan instan */
@media (prefers-reduced-motion: reduce){
  .reveal,
  [data-reveal-group] > .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ====== Sedikit preset agar enak dilihat di bagianmu ====== */

/* Hero */
.hero-title, .hero-date, .hero-cta { /* jika class ini ada */
  /* tidak ada styling tambahan: JS akan menambahkan .reveal */
}

/* Kartu News / Latest */
.news-card, .latest-card, .latest__card, .latest__item {
  /* akan auto diberi .reveal via JS */
}

/* Anggota DPRD slider */
.member-card, .members__card, .members__item {}

/* Galeri Foto / Video */
.gallery-photo img, .gallery-photo .slide,
.gallery-video li, .gallery-video .video-item {}

/* Strip partai */
.party-strip img, .partai-strip img {}

/* Aspirasi */
.aspirasi-quote, .aspirasi-title, .aspirasi-desc, .btn-aspirasi {}

/* Footer */
.site-footer .footer-logo,
.site-footer .footer-col {}

/* (opsional) tambah sedikit hover “hidup” untuk elemen yang sudah muncul */
.reveal.is-visible[data-ros-hover]{
  transition:
    transform var(--ros-duration) var(--ros-ease),
    opacity   var(--ros-duration) var(--ros-ease),
    box-shadow 180ms ease;
}
.reveal.is-visible[data-ros-hover]:hover{
  transform: translateY(-2px);
}

/* =======================================================
   Reveal On Scroll (tambahan varian untuk image & blur)
   ======================================================= */
.reveal--img{
  filter: blur(6px);
  transform: scale(0.96) translate3d(0, 18px, 0);
}
.reveal--img.is-visible{
  filter: none;
  transform: none;
  transition:
    filter var(--ros-duration) var(--ros-ease),
    transform var(--ros-duration) var(--ros-ease),
    opacity var(--ros-duration) var(--ros-ease);
}

/* Alternating helper (kanan/kiri) untuk list/logo */
.reveal[data-alt="left"]  { transform: translate3d(-28px, 0, 0); }
.reveal[data-alt="right"] { transform: translate3d( 28px, 0, 0); }

/* Supaya stack animasi gak tabrakan sama hover transform */
.reveal.is-visible[data-ros-hover]:hover{
  transform: translateY(-2px);
}

/* === Banner: tampil penuh, tidak terpotong === */

/* Kontainer banner (dua kartu) */
.banners,
.members__banners{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
}

/* Kartu banner */
.banner-card,
.members__banners .banner{
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  overflow: hidden;                /* tetap rapih dengan radius */
  display: grid;
  place-items: center;
  /* biar tinggi fleksibel, TIDAK dipaksa fixed */
  height: auto !important;
  min-height: clamp(220px, 30vw, 340px);  /* tinggi minimum agar proporsional */
}

/* IMG di dalam banner → MUAT UTUH */
.banner-card img,
.members__banners .banner img{
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain !important;  /* tampil penuh, tidak dipotong */
  object-position: center center !important;
  display: block;
}

/* Jika banner memakai background-image, pakai ini */
.banner-card.has-bg,
.members__banners .banner.has-bg{
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;   /* penuh, tidak crop */
}

/* Responsif single column di layar kecil */
@media (max-width: 900px){
  .banners,
  .members__banners{ grid-template-columns: 1fr; }
}

/* ===============================
   BANNERS – no white bar, full cover
   =============================== */

/* Grid 2 kolom */
.banners,
.members__banners{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
}

/* Atur rasio kartu agar kedua banner sama tinggi.
   Ganti nilainya jika rasio desainmu berbeda. 16/9 umum.
   Coba 21/9 atau 3/1 kalau lebih panorama. */
:root{
  --banner-ratio: 16/9;  /* ubah sesuai gambarmu */
}

.banner-card,
.members__banners .banner{
  border-radius: 5px;
  overflow: hidden;                 /* supaya crop rapi */
  background: #f6f7f9;              /* fallback */
  padding: 0;                       /* pastikan tidak ada padding */
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}

/* IMG harus isi penuh (tanpa putih) */
.banner-card img,
.members__banners .banner img{
  width: 100%;
  height: 100%;
  object-fit: cover !important;     /* tutup penuh, tanpa letterbox */
  object-position: center center;   /* crop di tengah */
  display: block;                   /* hilangkan gap baseline img */
  background: transparent;
}

/* Jika bannermu pakai background-image pada elemen .banner,
   pakai .has-bg + aturan 'cover' ini */
.banner-card.has-bg,
.members__banners .banner.has-bg{
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;    /* no white bar */
}

/* Responsif: 1 kolom di layar kecil */
@media (max-width: 900px){
  .banners,
  .members__banners{ grid-template-columns: 1fr; }
}

/* ===============================
   BANNERS – sesuai desain (gambar utuh, tidak crop,
   tinggi menyesuaikan, dua kolom, radius + shadow)
   =============================== */

/* Grid 2 kolom */
.banners,
.members__banners{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
}

/* Kartu banner */
.banner-card,
.members__banners .banner{
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  overflow: hidden;           /* untuk radius rapi */
  padding: 0;                 /* pastikan tidak ada ruang ekstra */
  height: auto !important;    /* JANGAN dipaksa fixed/aspect-ratio */
  min-height: 0 !important;   /* pastikan tidak terkunci */
}

/* Gambar banner – tampil utuh (NO crop) */
.banner-card img,
.members__banners .banner img{
  display: block;     /* hilangkan gap baseline */
  width: 100%;
  height: auto !important;    /* kuncinya: biarkan natural */
  object-fit: contain !important;   /* gambar utuh, tidak terpotong */
  object-position: center center;
  background: transparent;
  /* Hapus semua aturan lain sebelumnya yang meng-set height fixed / aspect-ratio / cover */
}

/* Jika ada banner yang pakai background-image, gunakan 'contain' juga */
.banner-card.has-bg,
.members__banners .banner.has-bg{
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;  /* gambar utuh */
}

/* Responsif: satu kolom di layar kecil */
@media (max-width: 900px){
  .banners,
  .members__banners{ grid-template-columns: 1fr; }
}

/* ===== Latest nav (prev/next) ===== */
.latest__nav{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-block-start: clamp(16px, 2.6vw, 28px);
  padding: clamp(10px, 2.2vw, 16px) 0 clamp(6px, 1.6vw, 12px);
}

.latest__nav-btn{
  --nav-size: clamp(38px, 5.2vw, 46px);
  --icon-size: clamp(18px, 2.3vw, 22px);

  inline-size: var(--nav-size);
  block-size: var(--nav-size);
  display:grid;
  place-items:center;
  border:0;
  border-radius: 999px;                 /* bundar, sesuai desain */
  background: transparent;              /* kalau mau latar, ganti di sini */
  color: #10B981;                        /* hijau panah (sesuaikan) */
  cursor:pointer;
  transition: transform .15s ease, opacity .15s ease, background-color .15s ease;
}

.latest__nav-btn::before{
  content:"";
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  background: currentColor;
  -webkit-mask: url("../images/icons/arrow-prev.svg") center/contain no-repeat; 
          mask: url("../images/icons/arrow-prev.svg") center/contain no-repeat;
}

.latest__nav-btn.next::before{
  -webkit-mask-image: url("../images/icons/arrow-next.svg");
          mask-image: url("../images/icons/arrow-next.svg");
}

/* Hover/active */
.latest__nav-btn:hover{ transform: translateY(-1px) }
.latest__nav-btn:active{ transform: translateY(0) scale(.98) }

/* Disabled state (saat di ujung) */
.latest__nav-btn[disabled]{
  opacity:.35;
  pointer-events:none;
}

/* Garis separator di tengah */
.latest__nav-sep{
  inline-size: clamp(40px, 7vw, 80px);
  block-size: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,.08));
}

/* gambar di dalam tombol diberi animasi zoom */
.latest__rail .rail-btn img{
  display: block;
  max-inline-size: 100%;
  max-block-size: 100%;
  transform-origin: 50% 50%;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

/* Zoom saat hover / keyboard focus */
.latest__rail .rail-btn:hover img,
.latest__rail .rail-btn:focus-visible img{
  transform: scale(1.12);      /* bisa disesuaikan 1.08–1.16 */
}

/* Aksesibilitas untuk keyboard user */
.latest__rail .rail-btn:focus-visible{
  outline: 3px solid var(--accent-hero, #2aa34a);
  outline-offset: 3px;
  border-radius: 14px;
}

/* Matikan animasi bila user memilih reduce motion */
@media (prefers-reduced-motion: reduce){
  .latest__rail .rail-btn,
  .latest__rail .rail-btn img{
    transition: none !important;
  }
}

/* ============= Sambutan v2 – Layout 80/20 ============= */

.greetv2__grid{
  --gap: clamp(20px, 3.5vw, 48px);
  display:grid;
  grid-template-columns: 3fr 4fr 3fr;          /* 80% : 20%  */
  align-items: center;
  gap: var(--gap);
}

/* Foto + dekor */
.greetv2__photo{
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.greetv2__photo img{
  width: min(420px, 34vw);
  height: auto;
  display:block;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.15));
  position: relative;
  z-index: 2;
}

/* Badge nama di foto */
.greetv2__badge{
  position:absolute;
  left: clamp(8px, 1.2vw, 16px);
  bottom: clamp(10px, 1.6vw, 18px);
  background:#19A64A;
  color:#fff;
  border-radius: 999px;
  padding: .85em 1.2em;
  display:inline-flex;
  flex-direction: column;
  gap:.15em;
  z-index: 3;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.18));
}
.greetv2__badge strong{font-size: clamp(14px, 1.4vw, 20px); font-weight:700;}
.greetv2__badge small{font-size: clamp(12px, 1.1vw, 14px); opacity:.9}

/* Teks sambutan */
.greetv2__overline{color:#7B8794; font-weight:600; margin:0 0 .25em}
.greetv2__title{font-size: clamp(32px, 4.2vw, 64px); margin:.05em 0 .35em}
.greetv2__text p{line-height:1.75; color:#192430}

/* =========================
   Greet v2 – photo & badge
   ========================= */

/* 1) Foto lebih kecil (zoom-out) */
.greetv2__photo{
  /* atur angka ini jika mau lebih kecil/besar */
  --photo-w: min(340px, 30vw);         /* <— lebih kecil dari sebelumnya */
  --photo-shift: clamp(12px, 1.8vw, 36px);

  position: relative;
  transform: translateX(var(--photo-shift));
}

/* ukuran img mengikuti --photo-w */
.greetv2__photo img{
  width: var(--photo-w);
  height: auto;
  display: block;
  position: relative;
  z-index: 3;                           /* di atas blob & dots */
}

/* 3) Dots SVG – overlap di atas blob kiri-atas */
.greetv2__photo::after{
  content:"";
  position:absolute;
  width: clamp(180px, 14vw, 280px);
  height: clamp(100px, 9vw, 180px);
  background: url("../images/patterns/dots.svg") no-repeat center / contain; 
  /* ganti path sesuai file SVG dot milikmu */
  left: max(-22px, -1vw);
  top: 40px;
  opacity:.9;
  z-index: 999;                           /* di atas blob, di bawah foto */
  pointer-events:none;
}

/* 4) Badge nama + jabatan – diperkecil */
.greetv2__badge{
  position:absolute;
  left: 0;
  right: auto;
  bottom: clamp(10px, 1.2vw, 16px);
  background:#16A052;
  color:#fff;
  border-radius: 28px;
  padding: .65em 1.95em;
  box-shadow: 0 20px 40px rgba(22,160,82,.18);
  z-index: 4;
}

/* nama lebih kecil */
.greetv2__badge strong{
  display:block;
  font-weight: 700;
  font-size: clamp(13px, 1vw, 15px);   /* <-- kecil */
  line-height: 1.25;
}

/* jabatan warna kuning */
.greetv2__badge small{
  display:block;
  margin-top: .2em;
  font-weight: 600;
  font-size: clamp(10px, .95vw, 12px);   /* <-- kecil */
  line-height: 1.25;
  color: #FFE06A;                         /* kuning jabatan */
}

/* Responsif: tetap lebih kecil di layar kecil */
@media (max-width: 1024px){
  .greetv2__photo{ --photo-w: min(220px, 32vw); }
}
@media (max-width: 640px){
  .greetv2__photo{ --photo-w: min(200px, 60vw); }
  .greetv2__badge{ padding:.55em .85em; }
}

@media (max-width: 720px){
  .greetv2__photo{
    --photo-shift: 0;
    /* opsional: tengahin */
    margin-inline: auto;
  }
}

/* ====== GRID LAYOUT (foto | teks | kalender) ====== */
.greetv2__grid{
  display: grid;
  /* foto 34% | teks 46% | kalender 20%  -> total 100% */
  /* grid-template-columns:
    minmax(360px, 38%)
    minmax(500px, 40%)
    minmax(300px, 24%); */
  column-gap: clamp(18px, 2vw, 28px);  /* lebih dekat antara foto & teks */
  align-items: start;
}

/* Pastikan kolom teks bebas membesar */
.greetv2__text{
  max-width: none;
  width: 100%;
}

/* ====== HEADING SPACING ====== */
/* “Sambutan” */
.greetv2__overline{
  margin: 0 0 clamp(1px, .15vw, 3px);   /* rapat dengan h2 */
}

/* “Ketua DPRD” */
.greetv2__title{
  margin: 0 0 clamp(5px, .75vw, 11px); /* tanpa jarak atas, ada sedikit jarak bawah */
  line-height: 1.05;                    /* biar padat */
}

/* Paragraf agar nyaman dibaca di lebar baru */
.greetv2__text p{
  max-width: 72ch;                      /* bisa dilepas jika ingin full */
}

/* ====== RESPONSIVE (opsional agar tetap rapi di layar kecil) ====== */
@media (max-width: 1100px){
  .greetv2__grid{
    /* grid-template-columns:
      minmax(320px, 38%)
      minmax(440px, 40%)
      minmax(200px, 24%); */
    column-gap: clamp(12px, 1.8vw, 20px);
  }
}
@media (max-width: 820px){
  .greetv2__grid{
    grid-template-columns: 1fr;  /* stack di mobile */
    row-gap: clamp(16px, 3vw, 24px);
  }
  .greetv2__text p{ max-width: unset; }
}

/* ===== Bingkai galeri agar tidak melebar penuh ===== */
.gallery { --g-gap: clamp(16px, 2vw, 28px); }

/* Container biru biarkan full—yang kita batasi adalah isi card */
.gallery__card{
  /* tidak pernah lebih lebar dari 1240px, kalau viewport kecil pakai 92vw */
  width: min(1240px, 92vw);
  max-width: 1240px;
  margin-inline: auto;                    /* center di area biru */
  display: grid;
  gap: var(--g-gap);
  grid-template-columns: 1.35fr 1fr;      /* foto > video */
  align-items: start;
}

/* Anak grid WAJIB bisa menyusut supaya tidak memaksa melebar */
.gallery__col{ min-width: 0; }

/* ≤ 992px: tumpuk vertikal */
@media (max-width: 992px){
  .gallery__card{ grid-template-columns: 1fr; }
}

/* ===== Kolom foto: selalu proporsional, tidak “tinggi tetap” ===== */
.photo-slider{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;                      /* tinggi mengikuti lebar */
  border-radius: clamp(10px, 1vw, 16px);
  overflow: hidden;
}

.photo-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
}
.photo-slide.is-active{ opacity: 1; }

.photo-slide > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                        /* isi penuh tanpa hitam */
  object-position: center;
}

/* ===== Kolom video: juga pakai rasio agar konsisten ===== */
.gallery__col--video{
  display: grid;
  grid-template-rows: auto 1fr;
}

.video-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.2vw, 16px);
  align-content: start;
}

.video-thumb{
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: clamp(8px, .8vw, 12px);
  overflow: hidden;
  position: relative;
}

.video-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Safeguard: hapus tinggi/lebar paksa dari CSS lama ===== */
.gallery__card,
.photo-slider,
.video-list,
.video-thumb{
  height: auto !important;
  max-height: none !important;
}

.greet  { 
  --members-spacer: clamp(56px, 8vw, 120px);
  margin-top: var(--members-spacer) !important; 
  margin-bottom: var(--members-spacer) !important; 
}

/* dots responsif */
.greetv2__photo::after{
  /* variabel supaya mudah di-tweak di breakpoint */
  --dot-w:   clamp(110px, 34%, 240px);       /* lebar mengikuti lebar foto (34%) */
  --dot-left: clamp(12px, 2vw, 6px);;   /* offset kiri adaptif (negatif)   */
  --dot-top:  clamp(  8px,   7%,   40px);     /* offset atas adaptif             */

  content:"";
  position:absolute;
  inline-size: var(--dot-w);                  /* = width responsif               */
  aspect-ratio: 9 / 5;                        /* jaga rasio 180×100              */
  background: url("../images/patterns/dots.svg") no-repeat 50% / contain;
  inset-inline-start: var(--dot-left);         /* left                            */
  inset-block-start:  var(--dot-top);          /* top                             */
  opacity:.9;
  z-index: 999;                                  /* di atas blob, di bawah foto     */
  pointer-events:none;
}

/* penyesuaian di layar kecil (dots sedikit lebih besar & turun) */
@media (max-width: 640px){
  .greetv2__photo::after{
    --dot-w:   clamp(100px, 45%, 210px);
    --dot-left: clamp(-28px, 3.2vw, -12px);
    --dot-top:  clamp(  0px,   2%,   16px);
  }
}

/* penyesuaian di layar besar (dots sedikit mengecil & naik) */
@media (min-width: 1200px){
  .greetv2__photo::after{
    --dot-w:   clamp(110px, 34%, 240px);
    --dot-left: clamp(-1px, -1.6vw, -4px);
    --dot-top:  clamp( 16px,   6%,   48px);
  }
}

/* --- default (tablet/desktop) --- */
.greetv2__photo{
  /* kontrol posisi badge via variabel agar mudah di-atur per breakpoint */
  --badge-left: clamp(24px, 8vw, 52px);   /* jarak badge dari tepi kiri foto */
  --badge-bottom: clamp(8px, 2.2vw, 18px);
}

.greetv2__badge{
  position: absolute;
  left: var(--badge-left);
  bottom: var(--badge-bottom);
  max-width: clamp(220px, 70vw, 360px);  /* biar responsif & tidak melebar */
  /* sisa style badge kamu tetap */
}

/* --- mobile (≤ 640px): geser lebih ke kanan --- */
@media (max-width: 640px){
  .greetv2__photo{
    --badge-left: clamp(40px, 14vw, 72px); /* ↑ lebih ke kanan */
    --badge-bottom: clamp(10px, 3vw, 16px);
  }

  .greetv2__badge{
    max-width: clamp(210px, 78vw, 320px);
    /* supaya teks tidak kepotong */
    white-space: normal;
    word-break: break-word;
  }
}

/* --- layar besar (≥ 1200px): sedikit rapat ke kiri supaya proporsional --- */
@media (min-width: 1200px){
  .greetv2__photo{
    --badge-left: clamp(18px, 6vw, 48px);
  }
}

/* MOBILE: latest/news full-bleed & no overlap */
@media (max-width: 640px){
  .latest__card{
    /* hilangkan overlap */
    transform: none !important;

    /* full-bleed (keluar dari padding container) */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;

    /* sudut & padding sesuai selera */
    border-radius: 0 0 12px 12px;   /* bisa 0 jika mau kotak penuh */
    padding: clamp(14px, 3.8vw, 18px);
  }

  /* kalau ada rail/btn di sisi kiri, sembunyikan di mobile */
  .latest__rail{ display: none; }
}

/* Tablet (iPad / iPad Pro): latest news 2x2 */
@media (min-width: 900px) and (max-width: 1200px){
  /* pakai salah satu/dua class yang kamu pakai sebagai grid container */
  .card-slide,
  .latest__items{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 kolom */
    grid-auto-rows: 1fr;                                         /* baris rata */
    gap: clamp(14px, 2.2vw, 24px);
  }

  /* kalau setiap kartu punya min-width, matikan biar nurut grid */
  .card-slide > *{
    min-width: 0;
  }
}

/* ==== Tablet (iPad / iPad Pro) ==== */
/* kurangi overlap supaya tidak menutupi tombol di hero */
@media (min-width: 900px) and (max-width: 1200px){
  :root{
    /* kecilkan/nyaris nol, silakan geser sedikit sesuai selera */
    --latest-lift: -8px; 
  }
  /* kalau pernah ada transform hard-coded, paksa pakai var */
  .latest__card{
    transform: translateY(var(--latest-lift)) !important;
  }
}

/* Gutter global yang sama dengan navbar/header (silakan samakan nilainya) */
:root{
  /* sesuaikan dengan padding horizontal header/nav kamu */
  --container-x: clamp(20px, 4vw, 48px);
}

/* Desktop / layar lebar saja */
@media (min-width: 1600px){

  /* Hapus trik sebelumnya yang “menyundul” ke tepi kanan viewport */
  .latest__card{
    /* kiri tetap seperti sebelumnya (memperhitungkan rail) */
    margin-left: calc(var(--rail-w) + var(--latest-gap));

    /* kanan berhenti di gutter yang sama dengan navbar */
    margin-right: var(--container-x) !important;

    /* biar tidak dipaksa melebar sampai ujung kanan */
    width: auto !important;
    max-width: calc(
      100% - (var(--rail-w) + var(--latest-gap) + var(--container-x))
    );

    /* pattern mengikuti gutter kanan */
    background-position: calc(107% - var(--container-x)) center;
    background-size: clamp(260px, 30vw, 420px);
  }
}
/* === TOKO WARNA (selaras desain) === */
:root{
  --bg: #111417;               /* latar kartu */
  --bg-elev: #181c20;          /* elevasi */
  --ink: #ffffff;              /* teks utama */
  --muted: #9aa3ad;            /* teks second */
  --divider: #252b31;          /* garis halus */
  --accent: #ffd843;           /* kuning */
  --accent-600:#f3c92d;
  --accent-dot:#ffd843;
}

/* Kartu kalender */
.miniCal{
  background: var(--bg);
  color: var(--ink);
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 24px);
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  max-inline-size: 480px;             /* tetap kompak */
}

/* Head */
.miniCal__title{
  font-weight: 800;
  letter-spacing:.2px;
  color: var(--accent);
  font-size: clamp(18px, 1.4vw, 22px);
  margin: 0 0 .6rem 0;
}

.miniCal__navline{
  display:flex;
  align-items:center;
  gap:.6rem;
  background: var(--bg-elev);
  border-radius: 10px;
  padding: .35rem .6rem;
  inline-size: fit-content;
  border:1px solid var(--divider);
}

.miniCal__label{
  font-size: clamp(13px, 1.2vw, 14px);
  font-weight: 700;
}

.miniCal__btn{
  inline-size: 28px;
  block-size: 28px;
  border-radius: 8px;
  border:1px solid var(--divider);
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  display:grid; place-items:center;
  cursor:pointer;
}
.miniCal__btn:hover{ background: rgba(255,255,255,.06); }

/* Grid 7 kolom — tanpa kotak tanggal  */
.miniCal__days{
  margin-top: clamp(10px, 1.2vw, 14px);
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(6px, .8vw, 10px);
}

/* Sel tanggal minimalis */
.mc-day{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content: flex-start;
  padding: .35rem 0;
  border-radius: 10px;           /* hanya untuk hover/aktif halus */
  position: relative;
  min-block-size: clamp(48px, 6vw, 56px);
}

.mc-day.is-out{
  opacity:.42;                   /* hari di luar bulan aktif */
}

/* Nama hari pada setiap tanggal */
.mc-day .wday{
  font-size: clamp(9px, .9vw, 11px);
  color: var(--muted);
  letter-spacing: .2px;
  line-height:1;
  margin-block-end: .15rem;
}

/* Tanggal (text only, tanpa kotak) */
.mc-day .d{
  background: transparent;
  border: 0;
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(12px, 1.4vw, 16px);
  line-height:1;
  cursor:pointer;
}
.mc-day .d:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.mc-day:hover{
  background: rgba(255,255,255,.05);
}

/* Titik event */
.mc-day[data-has-events] .d::after{
  content:"";
  inline-size: .42rem;
  block-size: .42rem;
  border-radius: 50%;
  background: var(--accent-dot);
  display:block;
  margin: .3rem auto 0;
}

/* Tanggal aktif (ketika diklik) */
.mc-day.is-active{
  background: rgba(255,255,255,.07);
  border: 1px solid var(--divider);
}

/* Panel events */
.miniCal__events{
  margin-top: clamp(10px, 1.4vw, 16px);
  padding: clamp(10px, 1.2vw, 14px);
  border-radius: 12px;
  background: var(--bg-elev);
  border:1px solid var(--divider);
}
.miniCal__eventsEmpty{
  color: var(--muted);
  font-size: clamp(11px, 1.05vw, 13px);
}
.mc-event{
  display:grid;
  grid-template-columns: auto 1fr;
  gap:.6rem;
  align-items:start;
  padding:.4rem 0;
  border-top:1px dashed var(--divider);
}
.mc-event:first-child{ border-top:0; }
.mc-event .dot{
  inline-size:.55rem; block-size:.55rem; border-radius:50%; 
  background: var(--accent-dot); margin-top:.35rem;
}
.mc-event .ttl{
  font-weight:700; font-size: clamp(12px,1.2vw,14px);
}
.mc-event .meta{
  color: var(--muted); font-size: clamp(11px,1.05vw,12px);
}

/* Legend */
.miniCal__legend{
  display:flex; align-items:center; gap:.4rem;
  color: var(--muted);
  font-size: clamp(10px,.95vw,12px);
  margin-top: .6rem;
}
.miniCal__legend .dot{
  inline-size:.45rem; block-size:.45rem; border-radius:50%;
  background: var(--accent-dot);
}

/* ====== COMPRESS + NAV FULLWIDTH + COLOR RULES ====== */

/* kompakkan kartu sedikit */
.miniCal{
  padding: clamp(12px, 1.8vw, 18px);
  max-inline-size: 420px;
}

/* judul lebih kecil */
.miniCal__title{
  font-size: clamp(16px, 1.2vw, 18px);
}

/* Nav bulan full-width, tombol tanpa kotak */
.miniCal__navline{
  width: 100%;
  padding: 0;                      /* hilangkan padding */
  background: transparent;         /* tidak pakai kotak */
  border: 0;                       /* tidak pakai border */
  justify-content: space-between;  /* tombol kiri & kanan menempel pinggir */
}

.miniCal__label{
  flex: 1;
  text-align: center;
  font-size: clamp(12px, 1vw, 13px);
  font-weight: 800;
}

.miniCal__btn{
  inline-size: 28px;
  block-size: 28px;
  border: 0;                       /* tanpa kotak */
  background: none;                /* tanpa latar */
  color: var(--ink);
  opacity: .8;
}
.miniCal__btn:hover{ opacity: 1; transform: translateY(-1px); }

/* grid makin rapat */
.miniCal__days{
  gap: clamp(3px, .6vw, 7px);
  margin-top: clamp(6px, .8vw, 10px);
}

/* sel tanggal diperkecil */
.mc-day{
  min-block-size: clamp(38px, 4.8vw, 46px);
  border-radius: 8px;
  padding: .25rem 0;
}

/* nama hari lebih kecil */
.mc-day .wday{
  font-size: clamp(8px, .8vw, 10px);
  margin-block-end: .1rem;
}

/* angka tanggal lebih kecil */
.mc-day .d{
  font-size: clamp(11px, 1.05vw, 13px);
}

/* warna teks tanggal:
   - yang PUNYA event => putih (default var(--ink))
   - yang TIDAK ada event => abu-abu */
.mc-day:not([data-has-events]) .d{ color: var(--muted); }

/* hari di luar bulan aktif tetap lebih pudar */
.mc-day.is-out .d{ color: color-mix(in srgb, var(--muted) 80%, transparent); }

/* titik event tetap ada */
.mc-day[data-has-events] .d::after{
  inline-size: .38rem;
  block-size: .38rem;
  margin-top: .22rem;
}

/* panel events lebih rapat & kecil */
.miniCal__events{
  padding: clamp(8px, 1vw, 12px);
}
.miniCal__eventsEmpty{ font-size: clamp(10px, .95vw, 12px); }
.mc-event .ttl{ font-size: clamp(11px, 1vw, 13px); }
.mc-event .meta{ font-size: clamp(10px, .9vw, 11px); }

/* ====== ULTRA-COMPACT MINI CAL ====== */

/* kartu lebih kecil */
.miniCal{
  padding: clamp(8px, 1.2vw, 14px);
  max-inline-size: 380px; /* boleh turunkan lagi jika perlu */
}

/* judul + nav lebih mungil */
.miniCal__title{
  font-size: clamp(14px, 1vw, 16px);
  margin-bottom: .25rem;
}

.miniCal__navline{
  margin-top: .15rem;
  padding: 0;
}

.miniCal__label{
  font-size: clamp(11px, .9vw, 12px);
  letter-spacing: .02em;
}

.miniCal__btn{
  inline-size: 24px;
  block-size: 24px;
  font-size: 14px;   /* ikon/tanda panah lebih kecil */
}

/* grid makin rapat */
.miniCal__days{
  gap: clamp(2px, .4vw, 5px);
  margin-top: clamp(4px, .5vw, 8px);
}

/* sel tanggal dipendekkan */
.mc-day{
  min-block-size: clamp(30px, 4vw, 40px);
  border-radius: 6px;
  padding: .18rem 0;
}

/* nama hari & angka dikecilkan lagi */
.mc-day .wday{
  font-size: clamp(7px, .65vw, 9px);
  margin-block-end: .08rem;
  letter-spacing: .02em;
}

.mc-day .d{
  font-size: clamp(10px, .9vw, 12px);
}

/* titik event sedikit lebih kecil */
.mc-day[data-has-events] .d::after{
  inline-size: .32rem;
  block-size: .32rem;
  margin-top: .18rem;
}

/* panel event lebih rapat & kecil */
.miniCal__events{
  padding: clamp(6px, .8vw, 10px);
  gap: .35rem;
}

.miniCal__eventsEmpty{
  font-size: clamp(9px, .85vw, 11px);
}

.mc-event .ttl{
  font-size: clamp(10px, .9vw, 12px);
  line-height: 1.2;
}

.mc-event .meta{
  font-size: clamp(9px, .8vw, 10px);
}

:root{
  --container-max: clamp(320px,92vw,1200px); 
  --page-gutter: clamp(16px, 3vw, 32px);
}

/* default: tetap full-bleed (seperti sekarang) */
.hero { position: relative; }
.hero__slider,
.hero__limit { inline-size: 100%; }

/* ==== ketika layar sangat lebar, hero ikut “masuk ke grid” ==== */
@media (min-width: 1600px){
  /* batasi lebar hero dan taruh di tengah */
  .hero__limit{
    inline-size: min(100%, var(--container-max));
    margin-inline: auto;
    border-radius: 14px;       /* opsional: biar selaras dengan kartu */
    overflow: hidden;          /* potong foto di luar radius */
    box-shadow: 0 12px 40px rgba(0,0,0,.12); /* opsional */
  }

  /* kalau ada caption/teks overlay, beri padding agar sejajar container */
  .hero__caption,
  .hero__content{               /* pakai class overlay milikmu */
    padding-inline: var(--page-gutter);
  }

  /* gambar tetap cover, tapi mengikuti lebar limiter */
  .hero__slide img{
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

/* TIP opsional: bikin radius & bayangan juga muncul sedikit di layar 1440+ */
@media (min-width: 1440px) and (max-width: 1599.98px){
  .hero__limit{
    border-radius: 10px;
    overflow: hidden;
  }
}

/* Matikan animasi untuk user yang memilih reduce motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none !important; }
}

/* Base state: sebelum masuk viewport */
[data-reveal]{
  --reveal-duration: .72s;
  --reveal-ease: cubic-bezier(.22,.61,.36,1);
  --reveal-delay: 0ms;              /* akan dioverride dari data attribute */
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay),
    transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay),
    filter var(--reveal-duration) var(--reveal-ease) var(--reveal-delay);
  will-change: opacity, transform, filter;
}

/* Variants: posisi awal */
[data-reveal="fade-up"]    { transform: translateY(24px); }
[data-reveal="fade-right"] { transform: translateX(-24px); }
[data-reveal="fade-left"]  { transform: translateX(24px); }
[data-reveal="zoom-in"]    { transform: scale(.96); filter: blur(2px); }

/* Setelah masuk viewport */
[data-reveal].is-in{
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- Dropdown Submenu --- */
.menu__links .has-sub {
  position: relative;
}

.menu__links .has-sub ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  background: var(--brand-yellow);
  border-radius: 8px;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 
    opacity 0.3s ease, 
    transform 0.3s ease, 
    visibility 0.3s ease;
  z-index: 99;
}

/* Show submenu saat hover */
.menu__links .has-sub:hover ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Submenu items */
.menu__links .has-sub ul li {
  /* padding: 0.4rem 1rem; */
  padding: 0;
}

.menu__links .has-sub ul li a {
  display: block;
  padding: 0.4rem 1rem;
  color: var(--brand-yellow-ink);
  text-decoration: none;
  font-weight: 600;
  transition: background 0.25s, color 0.25s;
}

/* Hover submenu */
.menu__links .has-sub ul li a:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #E65100;
}

/* Hover utama (tetap kuning background, teks aktif berubah merah) */
.menu__links > li > a:hover,
.menu__links > li > a.is-active {
  color: var(--active-red);
}

.menu__links .has-sub > a {
  pointer-events: none;   /* tidak bisa diklik */
  cursor: default;        /* ubah kursor biar ga kayak link */
}

/**
 * Simple fade transition,
 */
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}

/* Wrapper banner */
.banner {
  position: relative;
  overflow: hidden; /* biar shine nggak keluar area */
  display: block;
}

.banner img {
  transition: transform 0.4s ease;
  display: block;
  width: 100%;
  height: auto;
}

/* Zoom in saat hover */
.banner:hover img {
  transform: scale(1.05);
}

/* Shine effect */
.banner::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none; /* biar bisa di-klik bannernya */
}

.banner:hover::before {
  animation: shine .9s;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

.news-card__thumb {
  position: relative;
  overflow: hidden; /* biar shine nggak keluar area */
  display: block;
}

.news-card__thumb img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

/* zoom sudah ada dari hover-zoom, jadi kita fokus shine */
.news-card__thumb::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
}

.news-card__thumb:hover::before {
  animation: shine .9s;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

.rail-btn {
  position: relative;
  display: inline-block;
   /* supaya shine nggak keluar */
}

.rail-btn img {
  display: block;
  transition: transform 0.4s ease; /* zoom effect */
  /* width & height tetap pakai setting kamu, tidak diubah */
}

/* Shine effect */
.rail-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none; /* biar gak ganggu klik */
  overflow: hidden;
}

.rail-btn:hover::before {
  animation: shine 0.9s;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

/* Wrapper link jadi container shine */
.photo-link {
  position: relative;
  display: inline-block;
  overflow: hidden; /* biar shine pas */
}

.photo-link img {
  display: block;
  transition: transform 0.4s ease;
}

/* Shine effect */
.photo-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.4) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 2;
}

/* Hover efek */
.photo-link:hover img {
  transform: scale(1.05); /* zoom in */
}

.photo-link:hover::before {
  animation: shine 0.9s forwards;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

/* Pastikan wrapper jadi container shine */
.video-thumb {
  position: relative;
  display: inline-block;
  overflow: hidden; /* biar shine nggak keluar */
}

.video-thumb img {
  display: block;
  transition: transform 0.4s ease;
}

/* Shine effect */
.video-thumb::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.4) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 3; /* di atas gambar, tapi tetap di bawah icon play */
}

/* Hover efek */
.video-thumb:hover img {
  transform: scale(1.05); /* zoom in */
}

.video-thumb:hover::before {
  animation: shine 0.9s forwards;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

/* Container tiap logo partai */
.partai-item {
  position: relative;
  display: inline-block;
  overflow: hidden; /* supaya shine tidak keluar area */
}

/* Zoom sudah ada, tapi kalau belum tambahkan */
.partai-item img {
  display: block;
  transition: transform 0.4s ease;
}

/* Shine effect */
.partai-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.4) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 2;
}

/* Hover */
.partai-item:hover img {
  transform: scale(1.05); /* zoom in */
}

.partai-item:hover::before {
  animation: shine 0.9s forwards;
}

/* Keyframes umum (bisa dipakai global) */
@keyframes shine {
  100% {
    left: 125%;
  }
}

/* Shine effect untuk btn-aspirasi */
.btn-aspirasi {
  position: relative;
  overflow: hidden; /* supaya shine tidak keluar */
}

.btn-aspirasi::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.35) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
}

.btn-aspirasi:hover::before {
  animation: shine 0.9s forwards;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

/* Container tetap tanpa overflow agar tidak muncul “kotak” */
.greetv2__photo{
  position: relative;
  display: inline-block;
}
.greetv2__photo .photo-wrapper{
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* IMG di bawah shine */
.greetv2__photo img{
  display:block;
  width:100%;
  height:auto;
  position:relative;   /* <— penting agar z-index bekerja */
  z-index:1;
  transition: transform .4s ease;
}
.greetv2__photo:hover img{ transform: scale(1.05); }

/* Lapisan yang akan dimask */
.greetv2__photo .shine{
  position:absolute;
  inset:0;
  z-index:2;           /* di atas img */
  pointer-events:none;
  /* mask diset via JS */
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;

  /* Fallback (opsional): jika mask tak didukung */
  /* mix-blend-mode: screen; */
}

/* Stripe kilau */
.greetv2__photo .shine::before{
  content:"";
  position:absolute;
  top:0;
  left:-40%;                 /* mulai tidak terlalu jauh */
  width:30%;
  height:100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.6) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg) translateX(0);
  will-change: transform;
}

/* Jalankan animasi saat hover */
.greetv2__photo:hover .shine::before{
  animation: greet-shine .9s ease forwards;
}

@keyframes greet-shine{
  to {
    transform: skewX(-35deg) translateX(720%);
  }
}

/* ============= Responsif ============= */

@media (max-width: 1200px){
  .greetv2__grid{ grid-template-columns: 1fr 1fr; }
  .greetv2__photo img{ width: min(380px, 42vw); }
  .greetv2__photo::before{ width: min(380px, 44vw); height: min(310px, 34vw); }
}

@media (max-width: 768px){
  .greetv2__grid{ grid-template-columns: 1fr; }
  .greetv2__photo img{ width: min(320px, 70vw); margin-inline:auto; }
  .greetv2__photo{ justify-self:center; }
  .greetv2__badge{ left: 50%; transform: translateX(-50%); }
}

@media (max-width: 640px){
  .greetv2__grid{ grid-template-columns: 1fr; }
  .greetv2__photo img{ width: min(320px, 70vw); margin-inline:auto; }
  .greetv2__photo{ justify-self:center; }
  .greetv2__badge{ left: 50%; transform: translateX(-50%); }
}

/* keep your existing button styles unchanged */

.btn--shine{
  position: relative;
  overflow: hidden;        /* follows button border-radius */
  isolation: isolate;      /* stable stacking on Safari/Chrome */
}

/* the moving “film” */
.btn--shine .btn__shine{
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -30%;
  width: 20%;
  transform: skewX(-22deg);
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%
  );
  pointer-events: none;
  z-index: 2;              /* sits above green, below the arrow */
  opacity: .95;
  will-change: left, transform;
}

/* run only on hover/focus */
.btn--shine:hover .btn__shine,
.btn--shine:focus-visible .btn__shine{
  animation: btnShineSweep .85s cubic-bezier(.2,.8,.2,1);
}

@keyframes btnShineSweep {
  to { left: 130%; }
}

/* keep the arrow steady and on top */
.btn--arrow::after{
  position: relative;
  z-index: 3;
}

/* =========================================================
   ENHANCED SLIDE FX (opt-in, aman ke styling existing)
   Aktif jika: .hero__slider[data-enhanced="true"]
   Pilih via: [data-effect="kenburns" | "cube" | "clip"]
   ========================================================= */

/* Samakan tinggi container saat mode efek (karena slide jadi absolute) */
.hero .hero__slider[data-enhanced="true"] {
  height: clamp(320px, 56vw, 700px);
}
@media (max-width: 768px){
  .hero .hero__slider[data-enhanced="true"] { aspect-ratio: 4 / 3; height: auto; }
}
@media (min-width: 1440px){
  .hero .hero__slider[data-enhanced="true"] { aspect-ratio: 21 / 9; height: auto; }
}

/* Pastikan tombol & dots bisa diklik di atas slide */
.hero .hero__slider[data-enhanced="true"] .slider__btn,
.hero .hero__slider[data-enhanced="true"] .slider__dots{
  position: absolute;  /* sudah absolute di CSS kamu, ini untuk scope & z-index */
  z-index: 10;
}

/* Base layering untuk mode efek */
.hero .hero__slider[data-enhanced="true"] {
  position: relative;
  overflow: hidden;
  --dur: 1800ms;
  --ease: cubic-bezier(.22,.61,.36,1);
}
.hero .hero__slider[data-enhanced="true"] .hero__track{
  position: relative;
  display: block;                 /* override grid horizontal hanya untuk mode efek */
  height: 100%;
  transform: none !important;     /* abaikan translateX klasik */
  transition: none !important;    /* biar tidak bentrok */
}
.hero .hero__slider[data-enhanced="true"] .hero__slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity, clip-path;
  backface-visibility: hidden;
}
.hero .hero__slider[data-enhanced="true"] .hero__slide.is-active{
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.hero .hero__slider[data-enhanced="true"] .hero__slide.is-entering{ z-index: 3; }
.hero .hero__slider[data-enhanced="true"] .hero__slide.is-exiting{ z-index: 2; }

/* Gambar tetap cover (ikut styling kamu) tapi absolute biar bisa dianimasi */
.hero .hero__slider[data-enhanced="true"] .hero__slide > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay teks: fade-up halus saat slide aktif */
.hero .hero__slider[data-enhanced="true"] .hero__slide .hero__overlay{
  transform: translateY(-150px);
  opacity: 0;
  transition: all 2500ms ease;
}
.hero .hero__slider[data-enhanced="true"] .hero__slide.is-active .hero__overlay{
  transform: translateY(0);
  opacity: 1;
}

/* =========================
   Effect 1: Ken Burns + Fade (FIXED)
   ========================= */
.hero .hero__slider[data-effect="kenburns"][data-enhanced="true"] .hero__slide.is-entering > img{
  /* FIX: gunakan calc(var(...) * .9), bukan var(calc(...)) */
  animation: kb-in calc(var(--autoplay, 4000ms) * .9) ease-in-out both;
}
.hero .hero__slider[data-effect="kenburns"][data-enhanced="true"] .hero__slide.is-exiting > img{
  animation: kb-out var(--dur) var(--ease) both;
}
@keyframes kb-in{
  from{ transform: scale(1.08) translate(-1.2%, -1.2%); opacity: .2; }
  to  { transform: scale(1)    translate(0, 0);           opacity: 1; }
}
@keyframes kb-out{
  from{ opacity: 1; }
  to  { opacity: 0; }
}

/* =========================
   Effect 2: 3D Cube (rotateY)
   ========================= */
.hero .hero__slider[data-effect="cube"][data-enhanced="true"]{ perspective: 1200px; }
.hero .hero__slider[data-effect="cube"][data-enhanced="true"] .hero__slide{ transform-origin: center center; }

/* Arah NEXT */
.hero .hero__slider[data-effect="cube"][data-direction="next"][data-enhanced="true"] .hero__slide.is-entering{
  transform-origin: right center;
  transform: rotateY(90deg);
  animation: cube-enter-next var(--dur) var(--ease) forwards;
}
.hero .hero__slider[data-effect="cube"][data-direction="next"][data-enhanced="true"] .hero__slide.is-exiting{
  transform-origin: left center;
  animation: cube-exit-next var(--dur) var(--ease) forwards;
}
/* Arah PREV */
.hero .hero__slider[data-effect="cube"][data-direction="prev"][data-enhanced="true"] .hero__slide.is-entering{
  transform-origin: left center;
  transform: rotateY(-90deg);
  animation: cube-enter-prev var(--dur) var(--ease) forwards;
}
.hero .hero__slider[data-effect="cube"][data-direction="prev"][data-enhanced="true"] .hero__slide.is-exiting{
  transform-origin: right center;
  animation: cube-exit-prev var(--dur) var(--ease) forwards;
}
@keyframes cube-enter-next{ to{ transform: rotateY(0deg); opacity: 1; } }
@keyframes cube-exit-next { from{ transform: rotateY(0deg); opacity: 1; } to{ transform: rotateY(-90deg); opacity: .6; } }
@keyframes cube-enter-prev{ to{ transform: rotateY(0deg); opacity: 1; } }
@keyframes cube-exit-prev { from{ transform: rotateY(0deg); opacity: 1; } to{ transform: rotateY(90deg);  opacity: .6; } }

/* =================================
   Effect 3: Diagonal Clip-Reveal
   ================================= */
.hero .hero__slider[data-effect="clip"][data-enhanced="true"] .hero__slide.is-entering{
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  animation: clip-reveal var(--dur) var(--ease) forwards;
}
.hero .hero__slider[data-effect="clip"][data-direction="prev"][data-enhanced="true"] .hero__slide.is-entering{
  /* buka dari kanan ketika prev */
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  animation-name: clip-reveal-rev;
}
@keyframes clip-reveal{
  to{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
}
@keyframes clip-reveal-rev{
  to{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
}

/* =========================
   Effect 4: Parallax Slide
   ========================= */
/* Gambar masuk dengan pergerakan lebih lambat (parallax) + crossfade */
.hero .hero__slider[data-effect="parallax"][data-enhanced="true"] .hero__slide.is-entering > img{
  /* arah NEXT: dari kanan sedikit, arah PREV: dari kiri sedikit */
  animation: px-img-in-next var(--dur) var(--ease) forwards;
}
.hero .hero__slider[data-effect="parallax"][data-direction="prev"][data-enhanced="true"] .hero__slide.is-entering > img{
  animation-name: px-img-in-prev;
}
.hero .hero__slider[data-effect="parallax"][data-enhanced="true"] .hero__slide.is-exiting > img{
  animation: px-img-out var(--dur) var(--ease) forwards;
}
/* overlay ikut parallax ringan */
.hero .hero__slider[data-effect="parallax"][data-enhanced="true"] .hero__slide.is-entering .hero__overlay{
  animation: px-ov-in var(--dur) var(--ease) forwards;
}
@keyframes px-img-in-next{
  from{ transform: translateX(6%) scale(1.04); opacity: 0; }
  to  { transform: translateX(0)  scale(1);    opacity: 1; }
}
@keyframes px-img-in-prev{
  from{ transform: translateX(-6%) scale(1.04); opacity: 0; }
  to  { transform: translateX(0)   scale(1);    opacity: 1; }
}
@keyframes px-img-out{
  from{ transform: translateX(0) scale(1); opacity: 1; }
  to  { transform: translateX(-4%) scale(1.02); opacity: 0; }
}
@keyframes px-ov-in{
  from{ transform: translateY(16px); opacity: 0; }
  to  { transform: translateY(0);    opacity: 1; }
}

/* =========================
   Effect 5: Tiles Split (grid stagger)
   ========================= */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide { overflow: hidden; }
/* wrapper tile di atas gambar, tapi di bawah overlay */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile-wrap{
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), 1fr);
  grid-template-rows: repeat(var(--rows, 5), 1fr);
  z-index: 3;
  pointer-events: none;
}
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile{
  opacity: 0;
  transform: scale(1.06) translateY(14px);
  /* penting: supaya potongan gambar pas per tile */
  background-repeat: no-repeat;
  background-size: calc(var(--cols, 8) * 100%) calc(var(--rows, 5) * 100%);
  will-change: transform, opacity;
}
/* Saat slide memasuki stage, tiles muncul bertahap */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide.is-entering .tile{
  animation: tile-in var(--dur) var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
/* gambar dasar tetap ada (di bawah tiles), tapi kita crossfade exit */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide.is-exiting > img{
  animation: kb-out var(--dur) var(--ease) both;
}
@keyframes tile-in{
  to { opacity: 1; transform: none; }
}

/* =========================
   Aksesibilitas & preferensi
   ========================= */
@media (prefers-reduced-motion: reduce){
  .hero .hero__slider[data-enhanced="true"] .hero__slide,
  .hero .hero__slider[data-enhanced="true"] .hero__overlay{
    transition: none !important;
    animation: none !important;
  }
}

/* Smooth merge at the end of TILES effect */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .tile-wrap{
  opacity: 1;
  transition: opacity var(--merge, 320ms) var(--ease);
}
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .tile-wrap.is-merged{
  opacity: 0;        /* fade out tile layer to reveal base image smoothly */
}

/* === TILES anti-stretch: sinkronkan base <img> dengan layer tiles === */
/* 1) Pastikan <img> bisa transisi transform dengan durasi merge */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide > img{
  transform: none;
  transition: transform var(--merge, 320ms) var(--ease);
  will-change: transform;
}

/* 2) Saat slide memasuki stage (tiles masih scale+translate), samakan base image */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide.is-entering > img{
  transform: scale(1.06) translateY(14px); /* match dengan .tile di awal */
}

/* 3) Begitu mulai merge (tile-wrap diberi .is-merged via JS), kembalikan ke normal
      → transisinya barengan dengan fade-out tiles, jadi tidak terlihat “stretch” */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide:has(.tile-wrap.is-merged) > img{
  transform: none;
}

/* (opsional) Sedikit damping di tile agar lebih lembut di akhir */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide.is-entering .tile{
  /* tambah easing lebih lembut */
  animation-timing-function: cubic-bezier(.25,.8,.25,1);
}

/* === Overlay timing: muncul hanya setelah transisi selesai === */

/* 1) Sembunyikan overlay saat slide SEDANG masuk (is-entering) */
.hero .hero__slider[data-enhanced="true"] .hero__slide.is-entering .hero__overlay{
  opacity: 0 !important;
  transform: translateY(10px) !important;
}

/* 2) Sembunyikan overlay milik slide yang keluar (is-exiting) */
.hero .hero__slider[data-enhanced="true"] .hero__slide.is-exiting .hero__overlay{
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition-delay: 0ms !important;
}

/* 3) Tampilkan overlay HANYA ketika slide sudah aktif dan TIDAK lagi entering */
.hero .hero__slider[data-enhanced="true"] .hero__slide.is-active:not(.is-entering) .hero__overlay{
  opacity: 1 !important;
  transform: translateY(0) !important;
  /* pakai delay default kamu (jika ada) via transition yg sudah ada */
}

/* 4) Khusus efek PARALLAX:
      - matikan animasi overlay saat entering,
      - jalankan animasi overlay setelah entering selesai */
.hero .hero__slider[data-effect="parallax"][data-enhanced="true"] .hero__slide.is-entering .hero__overlay{
  animation: none !important;
}
.hero .hero__slider[data-effect="parallax"][data-enhanced="true"] .hero__slide.is-active:not(.is-entering) .hero__overlay{
  animation: px-ov-in var(--dur) var(--ease) both;
}

/* 5) (opsional kecil) buat transisi overlay makin halus */
.hero .hero__slider[data-enhanced="true"] .hero__slide .hero__overlay{
  transition-delay: 0ms; /* kamu bisa ganti jika mau jeda tambahan */
}

/* === Percepat jeda akhir: overlay muncul berbarengan fase merge (tiles) === */
/* Saat tile-wrap mulai merge (punya .is-merged), tampilkan overlay meski slide masih .is-entering */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"]
  .hero__slide.is-entering:has(.tile-wrap.is-merged) .hero__overlay{
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0ms !important; /* langsung muncul saat merge mulai */
}

/* Sinkronkan juga image base: kembali ke normal pas fase merge mulai (biar nggak ada jeda visual) */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"]
  .hero__slide:has(.tile-wrap.is-merged) > img{
  transform: none !important;
}

/* === TILES: percepat ritme & merge, kompres delay antar tile === */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"]{
  /* durasi animasi per tile & durasi merge dipercepat */
  --dur: 3620ms;
  --merge: 200ms;
}

/* Kompres delay stagger dari tiap tile (mis. 50% dari nilai asal) */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"]
  .hero__slide.is-entering .tile{
  animation-delay: calc(var(--d, 0ms) * .5); /* ubah .5 ke .4 kalau mau lebih cepat */
}

/* Overlay muncul saat merge dimulai (tanpa nunggu selesai total) */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"]
  .hero__slide.is-entering:has(.tile-wrap.is-merged) .hero__overlay{
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0ms !important;
}

/* Pastikan base image balik ke normal saat merge mulai (anti-jeda) */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"]
  .hero__slide:has(.tile-wrap.is-merged) > img{
  transform: none !important;
}

/* ====== Pastikan section setelah HERO selalu di atas saat transisi ====== */
/* 1) Hero bikin stack sendiri tapi berada di level dasar */
.hero .hero__slider[data-enhanced="true"]{
  isolation: isolate;   /* batasi compositing di dalam hero */
  z-index: 0;           /* jangan di atas sibling berikutnya */
}

/* 2) Naikkan lapisan SIBLING yang langsung setelah .hero */
.hero + *{
  position: relative;   /* tidak mengubah layout */
  z-index: 2;           /* selalu di atas hero saat overlap */
}

/* 3) Jika "Informasi Terkini" bukan sibling langsung (ada wrapper),
   aktifkan opsi lebih luas ini (boleh pilih salah satu, atau keduanya) */
/* .hero ~ *{ position:relative; z-index:2; }  */

/* ==== TILES: buat grid lebih terlihat (edge highlight halus) ==== */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile{
  position: relative;
  /* Sedikit kontras biar potongan “terbaca” tapi tetap subtle */
  filter: saturate(1.02) contrast(1.03);
}

/* Garis tepi tipis di setiap tile (muncul saat animasi masuk saja) */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile::after{
  content:"";
  position:absolute; inset:0;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  mix-blend-mode: overlay;   /* aman & halus */
  opacity: 0; transition: opacity var(--dur, 800ms) var(--ease);
}
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide.is-entering .tile::after{
  opacity: 1;
}
/* Saat merge mulai, garis menghilang */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide:has(.tile-wrap.is-merged) .tile::after{
  opacity: 0;
}

/* ==== TILES: percepat ritme & akhir ==== */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"]{
  --dur: 3520ms;   /* durasi anim tiap tile */
  --merge: 160ms; /* fade-out layer tile saat merge */
}
/* kompres jeda antar tile (stagger) */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide.is-entering .tile{
  animation-delay: calc(var(--d, 0ms) * .35); /* turunkan lagi jika perlu: .3 / .25 */
}

/* =========================================================
   TILES: REVEAL OVERLAY (tanpa stretch, final = ukuran image fix)
   - Tile tidak lagi memuat background image; hanya jadi penutup
   - Gambar dasar tidak di-transform → selalu sama dari awal–akhir
   - Ritme & akhir dipercepat
   ========================================================= */

/* 0) Percepat ritme tiles */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"]{
  --dur: 3480ms;    /* durasi anim tiap tile */
  --merge: 140ms;  /* (tetap dipakai kalau ada .is-merged dari JS) */
}

/* 1) Kunci base image: jangan ikut scale/translate (hindari mismatch ukuran) */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide > img{
  transform: none !important;
  transition: opacity var(--merge,140ms) var(--ease), transform 0ms !important;
}

/* 2) Ubah tile jadi overlay (bukan background image per tile) */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile{
  /* matikan background-image dari JS, supaya tidak perlu mapping */
  background-image: none !important;
  background: rgba(0,0,0,.72);        /* warna penutup; bisa kamu kecilkan */
  opacity: 1;
  transform: scale(1.02) translateY(8px);
  will-change: opacity, transform;
}

/* 3) Animasi reveal: tile memudar + kembali ke posisi normal */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide.is-entering .tile{
  animation-name: tile-reveal !important;                 /* override anim lama */
  animation-duration: var(--dur, 480ms) !important;
  animation-timing-function: var(--ease) !important;
  animation-fill-mode: forwards !important;
  /* kompres stagger agar cepat (sesuaikan 0.25–0.4) */
  animation-delay: calc(var(--d, 0ms) * .48) !important;
}
@keyframes tile-reveal{
  to { opacity: 0; transform: none; }
}

/* 4) Highlight grid tipis supaya tiles “terasa” */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile::after{
  content:"";
  position:absolute; inset:0;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  mix-blend-mode: overlay;
  opacity: .9;
  transition: opacity var(--dur,480ms) var(--ease);
}
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide.is-entering .tile::after{ opacity: .9; }
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile{ position: relative; }
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide:has(.tile-wrap.is-merged) .tile::after{ opacity: 0; }

/* 5) Overlay teks: muncul cepat setelah sebagian besar tile hilang */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide.is-entering .hero__overlay{
  opacity: 0 !important;
  transform: translateY(10px) !important;
  animation: ov-pop 380ms var(--ease) forwards;
  /* tunda sedikit agar masih sinkron dengan tile fading */
  animation-delay: 360ms; /* sesuaikan: turunkan untuk lebih cepat */
}
@keyframes ov-pop{ to { opacity: 1; transform: translateY(0); } }

/* 6) (opsional) saat JS menandai merge, pastikan overlay sudah on & tile padam */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"]
  .hero__slide.is-entering:has(.tile-wrap.is-merged) .hero__overlay{
  opacity: 1 !important; transform: translateY(0) !important;
}
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile-wrap{
  opacity: 1; transition: opacity var(--merge,140ms) var(--ease);
}
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile-wrap.is-merged{ opacity: 0; }

/* ==== FIX first load: sembunyikan tiles sampai transisi benar-benar dimulai ==== */
/* default: tile layer tidak tampak */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile-wrap{
  opacity: 0;
  visibility: hidden;                 /* cegah grid muncul sekejap saat first paint */
}

/* saat slide MASUK (.is-entering) barulah tiles tampil */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide.is-entering .tile-wrap{
  opacity: 1;
  visibility: visible;
}

/* setelah fase merge (JS menambah .is-merged), pastikan layer padam lagi */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile-wrap.is-merged{
  opacity: 0;
  visibility: hidden;
}

/* tile & garis grid: tampil hanya ketika entering */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile{ opacity: 0; }
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide.is-entering .tile{ opacity: 1; }

.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile::after{ opacity: 0; }
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide.is-entering .tile::after{ opacity: .9; }

/* ===== TILES (image pieces, exact cover mapping, fast) ===== */

/* Ritme default yang lebih cepat */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"]{
  --dur: 3460ms;     /* durasi anim tiap tile */
  --merge: 140ms;   /* fade-out layer ketika merge (jika dipakai JS) */
}

/* Base image tetap ukuran final (tidak di-scale) */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide > img{
  transform: none !important;
}

/* Sembunyikan tiles saat first paint; tampil hanya ketika entering */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile-wrap{
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur,460ms) var(--ease);
}
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide.is-entering .tile-wrap{
  opacity: 1; visibility: visible;
}
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile-wrap.is-merged{
  opacity: 0; visibility: hidden;
}

/* Tiap tile berisi potongan gambar (NO stretch) — posisi/ukuran dari JS (bgw/bgh/bgx/bgy) */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile{
  opacity: 0;
  transform: scale(1.04) translateY(10px);
  background-repeat: no-repeat;
  background-size: var(--bgw, 100%) var(--bgh, 100%);
  background-position: var(--bgx, 0px) var(--bgy, 0px);
  will-change: transform, opacity, background-position, background-size;
}

/* Animasi masuk + stagger dipercepat */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide.is-entering .tile{
  animation: tile-in var(--dur) var(--ease) forwards;
  animation-delay: calc(var(--d, 0ms) * .28); /* percepat total (turunin lagi ke .22 kalau mau) */
}
@keyframes tile-in{ to { opacity: 1; transform: none; } }

/* Edge highlight tipis agar pola tiles terlihat, lalu hilang saat selesai */
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile{ position: relative; }
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide .tile::after{
  content:""; position:absolute; inset:0;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
  mix-blend-mode: overlay;
  opacity: 0; transition: opacity var(--dur,460ms) var(--ease);
}
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide.is-entering .tile::after{ opacity: .85; }
.hero .hero__slider[data-effect="tiles"][data-enhanced="true"] .hero__slide:has(.tile-wrap.is-merged) .tile::after{ opacity: 0; }

/* ===== kiri: 2 ikon disusun vertikal (atas-bawah) ===== */
.float-stack-left{
  position:fixed;
  left:max(clamp(14px,2.4vw,22px), env(safe-area-inset-left));
  bottom:clamp(16px,3.2vw,26px);            /* anchor di kiri-bawah; geser ke atas kalau mau */
  display:grid; gap: clamp(8px, 1vw, 12px);  /* jarak antar ikon */
  z-index:1000;
}
.float-stack-left .float-btn{
  width:auto; height:auto; display:grid; place-items:center;
}
.float-stack-left .float-icon{
  width: clamp(2rem, 3.5vw, 3rem); height:auto; display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));
  transition:transform .12s ease;
}
.float-stack-left .float-btn:hover .float-icon{
  transform:translateY(-1px) scale(1.02);
}

/* tumpuk slide + transisi */
.aspirasi-rotator{ position:relative; inline-size:100%; transition:height .28s ease; }
.aspirasi-item{
  position:absolute; inset:0; opacity:0; transform:translateY(.4rem);
  transition:opacity .3s ease, transform .3s ease;
  display:grid; gap:.4rem;
}
.aspirasi-item.is-active{ position:relative; opacity:1; transform:none; }

/* tombol prev/next (unik aspirasi) */
.asp-ctrl__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; color:#fff; background:rgba(0,0,0,.35);
  padding:.4rem .7rem; border-radius:.6rem; cursor:pointer;
}
.asp-ctrl__btn:hover{ background:rgba(0,0,0,.5); }
.asp-ctrl__btn--prev{ left:.6rem; }
.asp-ctrl__btn--next{ right:.6rem; }

/* dots (unik aspirasi) */
.asp-ctrl__dots{
  position:absolute; inset:auto 0 1rem 0;
  display:flex; gap:.35rem; justify-content:center;
}
.asp-ctrl__dots button{
  inline-size:.55rem; block-size:.55rem; border-radius:999px; border:0;
  background:rgba(47, 47, 47, 0.5); cursor:pointer;
}
.asp-ctrl__dots button[aria-current="true"]{ background:#000000; }

@media (prefers-reduced-motion: reduce){
  .aspirasi-rotator, .aspirasi-item{ transition:none; }
}

/* ==== PATCH: beri ruang untuk dots dan geser ke bawah ==== */
.aspirasi-rotator{
  /* ukuran & offset dots (bebas kamu atur) */
  --asp-dot-size: clamp(.5rem, 1.2vw, .625rem);   /* ~8–10px */
  --asp-dot-gap:  clamp(.35rem, .8vw, .5rem);
  --asp-dots-offset: clamp(.4rem, 1vw, .75rem);   /* jarak dari bawah (lebih kecil = lebih ke bawah) */

  /* ruang ekstra di bawah konten agar dots tidak menimpa name */
  padding-bottom: calc(var(--asp-dot-size) + var(--asp-dots-offset) + var(--asp-dot-gap));
}

/* posisikan dots pakai offset baru */
.asp-ctrl__dots{
  bottom: var(--asp-dots-offset);
}

/* (opsional) samakan ukuran tombol dot ke var di atas */
.asp-ctrl__dots button{
  inline-size: var(--asp-dot-size);
  block-size: var(--asp-dot-size);
}

/* dots makin ke bawah tapi masih di dalam area rotator */
.aspirasi-rotator{
  --asp-dot-size: clamp(.5rem, 1.1vw, .6rem);
  --asp-dot-gap:  clamp(.3rem, .7vw, .45rem);
  --asp-dots-offset: clamp(.1rem, .4vw, .25rem); /* kecilkan = makin ke bawah */
  padding-bottom: calc(var(--asp-dot-size) + var(--asp-dots-offset) + var(--asp-dot-gap));
}
.asp-ctrl__dots{ bottom: var(--asp-dots-offset); }

/* ==== DOTS DI LUAR BAWAH ROTATOR ==== */
.aspirasi-rotator{
  /* ukuran & jarak */
  --asp-dot-size: clamp(.5rem, 1.1vw, .6rem);
  --asp-dot-gap:  clamp(.3rem, .7vw, .45rem);
  --asp-dots-out: clamp(14px, 2.4vw, 28px);   /* makin besar = makin jauh ke bawah */

  overflow: visible;        /* biar dots boleh 'keluar' */
  padding-bottom: 0;        /* tidak perlu ruang di dalam */
  margin-bottom: calc(var(--asp-dots-out) + var(--asp-dot-size)); /* kasih ruang ke konten bawah */
}

/* pusatkan dots dan dorong keluar bawah */
.asp-ctrl__dots{
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 0;
  transform: translate(-50%, calc(100% + var(--asp-dots-out)));
}

/* (opsional) pakai var untuk ukuran dot */
.asp-ctrl__dots button{
  inline-size: var(--asp-dot-size);
  block-size: var(--asp-dot-size);
}

/* ==== PATCH HERO (anim overlay & zoom) ==== */

/* variabel kontrol */
.hero .hero__slider{
  --overlay-in-dist:  clamp(180px, 16vw, 420px); /* jarak masuk dari atas (jauh) */
  --overlay-out-dist: clamp(160px, 14vw, 380px); /* jarak keluar ke bawah (jauh) */
  --overlay-time: 2500ms;                        /* durasi anim overlay */
  --zoom-scale: 1.08;                            /* besaran zoom */
  --zoom-time: 4000ms;                           /* akan di-sync dari data-autoplay via JS */
}

/* tumpuk slide (tanpa ubah ukuran layout) */
.hero .hero__track{ position: relative; }

.hero .hero__slide.is-active{
  position: relative; opacity: 1; z-index: 1;
}

/* zoom-in pelan pada slide aktif */
@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(var(--zoom-scale)); }
}
.hero .hero__slide > img{
  display:block; width:100%; height:100%; object-fit:cover; transform-origin:center;
  will-change: transform;
}
.hero .hero__slide.is-active > img{
  animation: heroZoom var(--zoom-time) linear forwards;
}

/* overlay: masuk dari ATAS, keluar ke BAWAH, durasi panjang */
.hero .hero__slide .hero__overlay{
  transform: translateY(calc(var(--overlay-in-dist) * -1)); /* start di ATAS */
  opacity: 0;
  transition:
    transform var(--overlay-time) ease,
    opacity   var(--overlay-time) ease;
  will-change: transform, opacity;
}
.hero .hero__slide.is-active .hero__overlay{
  transform: translateY(0);
  opacity: 1;
}
.hero .hero__slide:not(.is-active) .hero__overlay{
  transform: translateY(var(--overlay-out-dist)); /* keluar ke bawah */
  opacity: 0;
}

@media (prefers-reduced-motion: reduce){
  .hero .hero__slide,
  .hero .hero__slide .hero__overlay{
    transition:none !important; transform:none !important; opacity:1 !important;
  }
  .hero .hero__slide.is-active > img{ animation: none !important; }
}

/* === Layout dasar: menu kiri, actions (search+toggle) di kanan === */
.menu{ display:flex; align-items:center; }
.menu__links{ order:1; flex:1 1 auto; min-width:0; }
.menu__search{ order:2; flex:0 0 auto; }
.menu__toggle{ order:3; flex:0 0 auto; }

/* === Menu satu baris TANPA overflow yang mematikan submenu === */
.menu__links{
  display:flex; align-items:center;
  flex-wrap:nowrap;           /* kunci satu baris */
  white-space:nowrap;         /* teks tidak pecah */
  /* penting: biarkan overflow terlihat agar dropdown tidak terklip */
  overflow:visible;
}
.menu__links > li{ flex:0 0 auto; min-width:max-content; }
.menu__links a{ display:inline-block; white-space:nowrap; }

/* === Submenu muncul normal === */
.topbar, .topbar__container, .menu{ overflow:visible; }
.has-sub{ position:relative; }
.has-sub > .submenu{
  position:absolute; left:0; top:100%; z-index: 9999;
  visibility:hidden; opacity:0; transform:translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  pointer-events:none; min-width:max-content;
}
.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu{
  visibility:visible; opacity:1; transform:none; pointer-events:auto; transition-delay:0s;
}

/* === Anti-wrap saat viewport 'mengecil' karena zoom: rapatkan spacing & sedikit scale font menu saja === */
/* Step 1: layar/agresif zoom sedang */
@media (max-width: 1280px){
  .menu__links{ gap: clamp(.45rem, .9vw, .7rem); }
  .menu__links a{ font-size: clamp(.92rem, .98vw, 1rem); }
}
/* Step 2: lebih sempit */
@media (max-width: 1120px){
  .menu__links{ gap: clamp(.35rem, .8vw, .55rem); }
  .menu__links a{ font-size: clamp(.88rem, .94vw, .98rem); }
}
/* Step 3: sangat sempit (sebelum kamu beralih ke menu toggle penuh) */
@media (max-width: 980px){
  .menu__links{ gap: clamp(.28rem, .7vw, .45rem); }
  .menu__links a{ font-size: clamp(.84rem, .92vw, .96rem); }
}

/* =========================
   DESKTOP ( > 1120px )
   ========================= */
@media (min-width: 1121px){
  .menu{ display:flex; align-items:center; }
  .menu__links{ display:flex; flex-wrap:nowrap; white-space:nowrap; } /* seperti semula */
  .menu__toggle{ display:none; }        /* toggle disembunyikan di desktop */
}

/* =========================
   MOBILE/TABLET ( ≤ 1120px )
   ========================= */
@media (max-width: 1120px){
  .menu{ position:relative; display:flex; align-items:center; }
  .menu__links{
    display:none;                        /* default: tersembunyi */
  }
  .menu.is-open .menu__links{
    /* tampil vertikal di bawah bar, tanpa mengubah gaya desktop */
    display:grid;
    position:absolute;
    top:100%; left:0; right:0;
    z-index: 9999;
    /* biarkan warna/padding mengikuti styling kamu yang lama */
  }

  /* Toggle & search tetap di sisi kanan */
  .menu__links{ order:1; flex:1 1 auto; min-width:0; }
  .menu__search{ order:2; flex:0 0 auto; }
  .menu__toggle{ order:3; flex:0 0 auto; display:inline-grid; }

  /* Submenu saat mobile: biar bisa dibuka di dalam daftar (tanpa hover) */
  .has-sub{ position:relative; }
  .menu.is-open .has-sub > .submenu{
    position:static;                     /* biar ikut alur vertikal */
    display:none;
  }
  .menu.is-open .has-sub.is-open > .submenu{
    display:block;
  }
}