:root{
  --brand-start: #1374d7;
  --brand-end:   #156cc9;
  --brand-blue:  #156cc9;
  --accent-teal: #38d9a9;
  --accent-yellow: #ffd43b;
  --surface: #ffffff;
  --surface-2: #f6f9fc;
  --text-strong: #0f172a;
  --text: #334155;
  --text-weak: #64748b;
  --line-hero: rgba(255,255,255,.08);
  --shadow-1: 0 10px 30px rgba(2,6,23,.08);
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  --data-overlap: 28px;
}
@media (min-width: 992px){
  :root{ --data-overlap: 36px; }
}

/* Base */
*{ box-sizing: border-box; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
}

/* TOPBAR */
.topbar{
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, var(--brand-start) 0%, var(--brand-end) 100%);
  border-bottom: 1px solid rgba(255,255,255,.6);
}
.topbar .nav-link{ color: rgba(255,255,255,.85); }
.topbar .nav-link:hover, .topbar .nav-link:focus{ color:#fff; text-decoration:none; }
.brand-logo{ width: 160px; height: 36px; object-fit: contain; display:block; }

@media (max-width: 991.98px){
  .topbar .nav{ display:none; }
}

/* HERO */

.hero{
  position: relative; color:#fff; overflow:hidden;
  background: linear-gradient(180deg, var(--brand-start) 0%, var(--brand-end) 100%);
  padding: 6rem 0 5rem; min-height: 90vh;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line-hero) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-hero) 1px, transparent 1px);
  background-size: 90px 90px;
}
.hero .lead{ color: rgba(255,255,255,.85); max-width: 60ch; }

.searchbar{
  display:flex; align-items:center; gap:.5rem; max-width:680px;
  background:#fff; border:4px solid rgba(255,255,255,.45);
  border-radius:14px; padding:.35rem; box-shadow: var(--shadow-1);
}
.searchbar input{
  flex:1; border:0; outline:0; padding:.9rem 1rem;
  font-size:1rem; color:#0f172a;
}
.searchbar input::placeholder{ color:#94a3b8; }
.searchbar button{
  border:0; border-radius:10px; padding:.75rem 1.2rem; font-weight:600;
  background:var(--brand-blue); color:#fff;
}

/* Visual */
.hero-visual{ position:relative; width:min(520px,90%); aspect-ratio:1/1; margin-inline:auto; }
.hero-visual .ring{ position:absolute; border-radius:50%; border:1px dashed rgba(255,255,255,.35); }
.hero-visual .ring.big{ inset:6% 6% 6% 6%; }
.hero-visual .ring.small{ inset:22% 22% 22% 22%; }
.hero-visual .float{
  position:absolute; border-radius:16px; background: rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(13,110,253,.25);
}
.hero-visual .card-1{ width:150px; height:90px; left:5%; top:15%; transform: rotate(-6deg); }
.hero-visual .card-2{ width:160px; height:100px; right:4%; top:0; transform: rotate(8deg); }
.hero-visual .card-3{ width:180px; height:110px; right:12%; bottom:8%; transform: rotate(2deg); }
.hero-visual .float::after{
  content:""; position:absolute; left:14px; right:14px; bottom:14px; height:36px; opacity:.85;
  background:
    linear-gradient(to top, #37b24d 0 40%, transparent 40% 100%),
    linear-gradient(to top, #ffd43b 0 70%, transparent 70% 100%),
    linear-gradient(to top, #228be6 0 55%, transparent 55% 100%);
  background-repeat:no-repeat; background-size:18% 100%, 18% 100%, 18% 100%;
  background-position:left bottom, center bottom, right bottom;
}
.hero-visual .person{
  position:absolute; width:220px; height:300px; left:50%; top:30%; transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 0%, #2f9e44 0 55%, transparent 56%),
    linear-gradient(#0b7285, #0b7285) 0 55% / 100% 45% no-repeat;
  border-radius: 120px 120px 80px 80px;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.25));
}

/* Weather Card */
.weather-card{
  color:#fff;
  background: linear-gradient(180deg, rgba(12,14,22,.82), rgba(12,14,22,.74));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 22px 22px 18px;
  box-shadow: 0 30px 60px rgba(2,6,23,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.weather__head{ display:flex; justify-content:space-between; align-items:center; margin:2px 0 6px; }
.weather__today{ font-weight:800; font-size:1.15rem; letter-spacing:.2px; }
.weather__date{ font-weight:600; color:#e5e7eb; opacity:.9; }
.weather__main{ display:flex; align-items:center; justify-content:space-between; margin:.35rem 0 1rem; }
.weather__temp{ font-size:64px; line-height:.9; font-weight:800; letter-spacing:-.02em; }
.weather__temp .deg{ font-size:28px; margin-left:6px; color:#facc15; font-weight:700; }
.weather__icon.sun{
  width:78px; height:78px; border-radius:50%;
  background:#fde047; box-shadow: inset -12px -14px 0 rgba(0,0,0,.1);
}
.weather__desc{ font-weight:600; font-size:1.05rem; margin-bottom:4px; }
.weather__place{ display:flex; align-items:center; gap:.35rem; color:#e5e7eb; }
.weather__chips{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.8rem 0 0; }
.chip{
  display:flex; gap:.6rem; align-items:center;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
  padding:.55rem .7rem; border-radius:14px;
}
.chip__icon{
  display:grid; place-items:center; width:28px; height:28px; border-radius:999px;
  background: rgba(255,255,255,.12); color:#fff;
}
.chip__text small{ display:block; font-size:.78rem; color:#e5e7eb; opacity:.9; }
.chip__text strong{ font-weight:700; font-size:.95rem; color:#fff; }
.weather__cta{
  display:block; text-align:center; margin-top:.9rem;
  padding:.8rem 1rem; background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2); color:#fff; text-decoration:none;
  border-radius:12px; font-weight:700;
}
.weather__cta:hover{ background: rgba(255,255,255,.14); }

/* Weather placement */
@media (min-width: 992px){
  .hero .col-lg-5{ display:flex; justify-content:flex-end; }
  .hero .col-lg-5 .weather-card{
    width: clamp(300px, 32vw, 460px);
    padding: 18px 18px 14px;
    border-radius: 16px;
  }
  .weather__temp{ font-size: 52px; }
  .weather__temp .deg{ font-size: 22px; }
  .weather__icon.sun{
    width: 62px; height: 62px; box-shadow: inset -10px -12px 0 rgba(0,0,0,.10);
  }
  .weather__desc, .weather__place{ font-size:.95rem; }
  .weather__chips{ margin-top:.5rem; }
  .chip{ padding:.45rem .6rem; border-radius:12px; }
  .chip__icon{ width:24px; height:24px; }
  .chip__text small{ font-size:.72rem; }
  .chip__text strong{ font-size:.9rem; }
  .weather__cta{ padding:.65rem .9rem; font-size:.95rem; }
}
@media (max-width: 991.98px){
  .hero .weather-card{ max-width:100%; margin-top:10px; }
}

/* SLIDER */
.slider__wrap { position: relative; }
.slider__wrap input { position:absolute; opacity:0; pointer-events:none; }

.slider__viewport{ overflow:hidden; border-radius: var(--radius-xl); }
.slider__track{ display:flex; width:400%; transition: transform .6s ease; }
.slide{ flex:0 0 25%; padding:1rem; }

.slide__card{
  position:relative; aspect-ratio:auto !important;
  height: clamp(220px, 36vw, 440px) !important;
  padding: clamp(14px, 2vw, 24px) clamp(16px, 2.4vw, 28px);
  border-radius:20px; overflow:hidden; background:#0fb2cf; color:#fff; box-shadow: var(--shadow-1);
}
.slide__image{ position:absolute; inset:0; z-index:0; }
.slide__image img{ width:100%; height:100%; object-fit:cover; display:block; }
.slide__card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.25) 40%, rgba(0,0,0,.1) 70%, transparent);
  z-index:0;
}
.slide__content{ position:relative; z-index:1; max-width:560px; }
.slide__title{ font-size: clamp(24px, 3vw, 40px); line-height:1.05; font-weight:800; }
.slide__badge{
  position:absolute; right:1.5rem; top:1.25rem; background:#fff; border-radius:10px; padding:.35rem .6rem; z-index:1;
}
.slide__badge img{ height:22px; display:block; }

/* arrows */
.slider__arrows label{
  display:none; position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.35);
  color:#fff; font-size:22px; line-height:40px; text-align:center; cursor:pointer; z-index:2;
}
.slider__arrows .prev{ left:12px; }
.slider__arrows .next{ right:12px; }

/* dots */
.slider__dots{ display:flex; gap:10px; justify-content:center; margin-top:14px; }
.slider__dots .dot{ width:10px; height:10px; border-radius:50%; background:#cbd5e1; opacity:.5; cursor:pointer; }

/* manual by radio */
#s1:checked ~ .slider__viewport .slider__track { transform:translateX(0%); }
#s2:checked ~ .slider__viewport .slider__track { transform:translateX(-25%); }
#s3:checked ~ .slider__viewport .slider__track { transform:translateX(-50%); }
#s4:checked ~ .slider__viewport .slider__track { transform:translateX(-75%); }

/* show arrows per active slide */
#s1:checked ~ .slider__arrows .p1, #s1:checked ~ .slider__arrows .n1,
#s2:checked ~ .slider__arrows .p2, #s2:checked ~ .slider__arrows .n2,
#s3:checked ~ .slider__arrows .p3, #s3:checked ~ .slider__arrows .n3,
#s4:checked ~ .slider__arrows .p4, #s4:checked ~ .slider__arrows .n4{
  display:flex !important; align-items:center; justify-content:center;
}

/* active dot */
#s1:checked ~ .slider__dots .d1,
#s2:checked ~ .slider__dots .d2,
#s3:checked ~ .slider__dots .d3,
#s4:checked ~ .slider__dots .d4 { background: var(--brand-blue); opacity:1; }

/* autoplay optional */
.slider__wrap.auto .slider__track{ animation: carouselX 10s infinite; }
.slider__wrap.auto:hover .slider__track{ animation-play-state: paused; }
@keyframes carouselX{
  0%,20%{ transform: translateX(0%); }
  25%,45%{ transform: translateX(-25%); }
  50%,70%{ transform: translateX(-50%); }
  75%,95%{ transform: translateX(-75%); }
  100%{ transform: translateX(0%); }
}

/* SECTION PROGRAM */
.section-pad{ padding: 4rem 0; }
.section-title{ font-weight:700; color:#334155; margin-bottom:1.25rem; }

/* PROGRAM (radio tabs) */
.program{ background: var(--surface); }
.program__tab{ position:absolute; opacity:0; pointer-events:none; }

/* Cards grid */
.program .program__grid .card--program{
  display:flex !important; flex-direction:column !important;
  align-items:center; justify-content:center; gap:.6rem; text-align:center;
  cursor:pointer; padding:1rem .9rem 1.1rem; min-height:160px;
  background:#fff; border-radius:14px; box-shadow:0 10px 30px rgba(2,6,23,.08);
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease, color .2s ease;
}
.program .program__grid .card--program:hover{
  transform: translateY(-2px); box-shadow:0 12px 36px rgba(2,6,23,.12);
}
.program .card--program .card__logo{
  width:64px; height:64px; object-fit:contain; display:block; border-radius:12px; margin:0;
}
.program .card--program .card__title{
  margin:0; font-weight:700; letter-spacing:.02em; color:#374151;
}

/* Panels */
.program__panels{ position:relative; }
.program__panel{ display:none; }
.program__detail{ padding-top:2rem; }
.program__heading{ font-weight:700; color:#334155; margin-bottom:.5rem; }
.program__desc{ color:#4b5563; font-style: italic; }
.program__list{ list-style:none; padding-left:0; margin:1.25rem 0 1.5rem; }
.program__list li{ display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.6rem; }
.program__list i{ color:#0bb89d; margin-top:.15rem; }
.program__cta{ border-radius:12px; padding:.65rem 1rem; }
.program__figure{
  background:#f1f5f9; border-radius:18px; height:220px; box-shadow:var(--shadow-1); position:relative;
}
.program__figure::before{
  content:""; position:absolute; inset:16px;
  background: linear-gradient(135deg,#2cb67d 0 35%, transparent 35%),
              linear-gradient(135deg,#0ea5e9 0 40%, transparent 40%);
  border-radius:12px;
}

/* show panels by radio */
#tab-sitenor:checked   ~ .program__panels .panel--sitenor{ display:block; }
#tab-sikasepora:checked~ .program__panels .panel--sikasepora{ display:block; }
#tab-simaung:checked   ~ .program__panels .panel--simaung{ display:block; }
#tab-dahaga:checked    ~ .program__panels .panel--dahaga{ display:block; }
#tab-adipiscing:checked~ .program__panels .panel--adipiscing{ display:block; }
#tab-reprehit:checked  ~ .program__panels .panel--reprehit{ display:block; }

/* active card highlight */
#tab-sitenor:checked    ~ .program__grid label[for="tab-sitenor"],
#tab-sikasepora:checked ~ .program__grid label[for="tab-sikasepora"],
#tab-simaung:checked    ~ .program__grid label[for="tab-simaung"],
#tab-dahaga:checked     ~ .program__grid label[for="tab-dahaga"],
#tab-adipiscing:checked ~ .program__grid label[for="tab-adipiscing"],
#tab-reprehit:checked   ~ .program__grid label[for="tab-reprehit"]{
  background: linear-gradient(135deg, #0ea5a3 0%, #0987b1 100%);
  color:#fff; box-shadow: 0 16px 38px rgba(2,132,199,.25);
}
#tab-sitenor:checked    ~ .program__grid label[for="tab-sitenor"] .card__title,
#tab-sikasepora:checked ~ .program__grid label[for="tab-sikasepora"] .card__title,
#tab-simaung:checked    ~ .program__grid label[for="tab-simaung"] .card__title,
#tab-dahaga:checked     ~ .program__grid label[for="tab-dahaga"] .card__title,
#tab-adipiscing:checked ~ .program__grid label[for="tab-adipiscing"] .card__title,
#tab-reprehit:checked   ~ .program__grid label[for="tab-reprehit"] .card__title{ color:#fff; }

/* DATA  */
.data.section-pad{ padding-top:56px; padding-bottom:56px; }
.data header .lead{ font-size: clamp(.95rem, 1.6vw, 1.05rem); margin-top:.25rem; }
.data .feature{ position:relative; overflow:visible; padding-bottom:calc(var(--data-overlap) + 18px); border-radius:16px; }
.data .feature__img{
  display:block; width:100%; height:clamp(180px, 22vw, 260px); object-fit:cover;
  border-radius:16px; position:relative; z-index:1; transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.data .feature:hover .feature__img{ transform: scale(1.02); }

/* Panel outside image, small overlap */
.data .feature > .feature__panel{
  position:relative; z-index:2; width:min(92%, 560px);
  margin: calc(var(--data-overlap) * -1) auto 0;
  background:#fff; border-radius:14px; padding:1rem 1.25rem 1.25rem; text-align:center;
  box-shadow: 0 12px 36px rgba(2,6,23,.16);
}
.data .feature__title{
  font-weight:800; color:var(--text-strong); font-size:1.25rem; margin-bottom:.4rem;
}
.data .feature__desc{
  font-size:1rem; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* NEWS SECTION */
.news{ position: relative; margin-bottom: 28px; }
.news .container{ position: relative; padding-top:10px; }

/* content above the white shape */
.news .news__head,
.news .news__grid{ position: relative; z-index: 1; }

/* white background shape with soft shadow */
.news .container::before{
  content:""; position:absolute;
  top:-24px; left:-16px; right:-16px; bottom:-56px;
  background:#fff; border-radius:28px;
  box-shadow: 0 40px 80px rgba(15,23,42,.10), 0 8px 24px rgba(15,23,42,.06);
  z-index:0;
}
@media (max-width: 991.98px){
  .news .container::before{ left:-8px; right:-8px; bottom:-40px; border-radius:22px; }
}

.news .news__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:18px;
}
.news .news__all{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border:1px solid #16a34a; color:#16a34a;
  border-radius:12px; font-weight:700; text-decoration:none;
}
.news .news__all:hover{ background:#16a34a; color:#fff; }

.news .news__grid{ display:grid; gap:24px; grid-template-columns: 1fr; }
@media (min-width: 992px){
  .news .news__grid{ grid-template-columns: 320px 1fr 380px; align-items:start; }
}

/* left feed */
.news__feed, .news__feature, .news__list{
  background:#fff; border-radius:18px; box-shadow: 0 20px 50px rgba(2,6,23,.08);
  overflow:hidden;
}
.news__feed-head{
  background: linear-gradient(180deg, #1e3a8a, #0f3b74);
  color:#fff; padding:14px 16px; display:flex; flex-direction:column; gap:2px;
}
.news__feed-head .muted{ opacity:.85; font-size:.9rem; }
.news__feed-list{
  list-style:none; margin:0; padding:10px 8px; max-height:520px; overflow:auto;
}
.feed-item{
  display:flex; gap:10px; padding:10px; align-items:flex-start; border-bottom:1px dashed #e5e7eb;
}
.feed-item:last-child{ border-bottom:0; }
.feed-item__icon{
  width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
  background:#eef2ff; color:#1e293b; flex:0 0 34px;
}
.feed-item__tag{ font-size:.85rem; font-weight:700; color:#334155; }
.feed-item__title{ display:block; color:#0f172a; font-weight:600; text-decoration:none; margin:.1rem 0; }
.feed-item__title:hover{ text-decoration:underline; }
.feed-item__meta{ font-size:.85rem; color:#64748b; }

/* middle feature with dark bottom panel */
.news__feature{ position:relative; min-height: clamp(260px, 34vw, 420px); border-radius:20px; overflow:hidden; }
.news__feature .feature__image{ position:absolute; inset:0; background-size:cover; background-position:center; }
.news__feature .feature__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.08) 40%, transparent 70%);
}
.news__feature::after{
  content:""; position:absolute; left:12px; right:12px; bottom:12px;
  height: clamp(160px, 44%, 260px);
  background: rgba(15,23,42,.80);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border-radius:16px; box-shadow: 0 12px 30px rgba(2,6,23,.35); z-index:1;
}
.news__feature .feature__body{
  position:absolute; z-index:2; left:24px; right:24px; bottom:24px;
  padding:10px 10px 0; display:flex; flex-direction:column; gap:.55rem; color:#fff; background:transparent;
  max-height: calc( clamp(160px, 44%, 260px) - 12px ); overflow:hidden;
}
.news__feature .feature__tag{ font-weight:700; letter-spacing:.03em; text-transform:uppercase; font-size:.92rem; opacity:.95; }
.news__feature .feature__title{
  margin:0; font-size: clamp(20px, 2.1vw, 26px); line-height:1.22; max-width:48ch;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.news__feature .feature__meta{ display:flex; gap:.6rem; flex-wrap:wrap; opacity:.95; font-size:.95rem; }
.news__feature .feature__cta{
  align-self:flex-start; margin-top:.4rem; background:#fff; color:#111827; border:0; border-radius:12px;
  padding:.65rem .9rem; font-weight:700; text-decoration:none;
}
.news__feature .feature__cta:hover{ filter:brightness(1.05); }
.news__feature .feature__pager{ position:absolute; right:18px; bottom:12px; opacity:.9; font-weight:700; }

/* right list */
.news__list{ padding: 10px 12px 12px; background: transparent; box-shadow:none; }
.news__tabs{
  position: relative;
  display:flex; align-items:center; gap:28px;
  padding:0 0 10px 0; margin-bottom:14px;
  border-bottom:1px solid #e5e7eb;
}
.news__tabs input{ position:absolute; opacity:0; pointer-events:none; }
.news__tabs label{
  text-transform:uppercase; font-weight:800; letter-spacing:.02em;
  color:#0f172a; opacity:.75; cursor:pointer;
}
#t-terbaru:checked ~ label[for="t-terbaru"],
#t-terpopuler:checked ~ label[for="t-terpopuler"]{ opacity:1; }
.news__tabs-underline{
  position:absolute; left:0; bottom:-2px; height:4px; width:50%;
  background:#16a34a; border-radius:999px; transition: transform .25s ease;
}
#t-terbaru:checked ~ .news__tabs-underline{ transform: translateX(0%); }
#t-terpopuler:checked ~ .news__tabs-underline{ transform: translateX(100%); }

.news__panel{ background:transparent; box-shadow:none; padding:4px 0; }
.news__item{
  display:block; text-decoration:none; padding:14px 14px; border-radius:12px;
  border-bottom:1px dashed #e5e7eb; transition: background .15s ease;
}
.news__item:last-child{ border-bottom:0; }
.news__item:hover{ background:#f8fafc; }
.news__item-title{
  margin:0 0 6px; color:#0f172a; font-weight:700; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.news__item-meta{ color:#64748b; font-size:.92rem; }

/* first item highlight */
.news__panel .news__item:first-child{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-right: 12px !important;   /* kembali ke padding normal */
}
.news__panel .news__item:first-child .news__item-title{ color: #0f172a !important; }
.news__panel .news__item:first-child .news__item-meta{ color: #64748b !important; opacity: 1 !important; }
.news__panel .news__item:first-child::after{
  content: none !important;
  display: none !important;
}

/* RESPONSIVE TWEAKS */
@media (max-width: 991.98px){
  .hero{ padding-top:5rem; }
}

/* RIGHT LIST (Terbaru / Terpopuler) */
.news__panel{ padding: 2px 0; }

.news__item{
  padding: 10px 12px;          
  border-radius: 10px;         
}

.news__item-title{
  font-size: clamp(.95rem, .8rem + .6vw, 1.06rem);
  line-height: 1.22;          
  font-weight: 700;
}

.news__item-meta{ font-size: .85rem; }

.news__panel .news__item:first-child{
  padding: 10px 36px 10px 12px;  
  border-radius: 12px;           
}
.news__panel .news__item:first-child::after{
  right: 10px; top: 10px;
  width: 22px; height: 22px;     
  font-size: .85rem;
}

@media (max-width: 576px){
  .news__item{ padding: 9px 10px; }
  .news__item-title{ font-size: .95rem; line-height: 1.2; }
  .news__item-meta{ font-size: .82rem; }
}
/* === NEWS ROW=== */
@media (min-width: 992px){

  :root{ --news-row-h: clamp(260px, 34vw, 420px); }

  .news .news__grid{ align-items: stretch; }

  .news__feature{
    height: var(--news-row-h);
    min-height: 0;                
  }

  .news__feed,
  .news__list{
    height: var(--news-row-h);
    display: flex;
    flex-direction: column;
  }

  /* FEED kiri */
  .news__feed-head{ flex: 0 0 auto; }
  .news__feed-list{
    flex: 1 1 auto;
    max-height: none;             
    overflow: auto;
    padding-right: 6px;           
    overscroll-behavior: contain;
  }

  /* LIST kanan */
  .news__tabs{ flex: 0 0 auto; }
  .news__panel{
    flex: 1 1 auto;
    overflow: auto;
    padding-right: 6px;
    overscroll-behavior: contain;
  }
}

.news__feed-list::-webkit-scrollbar,
.news__panel::-webkit-scrollbar{ width: 6px; }
.news__feed-list::-webkit-scrollbar-thumb,
.news__panel::-webkit-scrollbar-thumb{
  background: #e5e7eb; border-radius: 999px;
}

.site-footer .footer-top{ align-items: flex-start; }
.footer-logo{ max-width: 220px; height: auto; display:block; filter: drop-shadow(0 4px 16px rgba(0,0,0,.2)); }

.info-title{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; letter-spacing:.02em; margin:0 0 .6rem; color:#f1f5f9;
}
.info-text{
  margin:0; color: var(--footer-muted); line-height:1.6;
}
.info-text a{ color: var(--footer-muted); text-decoration: none; }
.info-text a:hover{ color:#fff; text-decoration: underline; }


.ico{ width:18px; height:18px; display:inline-block; border-radius:4px; position:relative; background:transparent; }
.ico.pin::before{ content:""; position:absolute; inset:3px 6px 7px 6px; border-radius:10px 10px 10px 0; background: var(--footer-accent); transform: rotate(45deg); }
.ico.mail{ border:2px solid var(--footer-accent); border-radius:4px; }
.ico.mail::after{ content:""; position:absolute; left:2px; right:2px; top:6px; height:2px; background: var(--footer-accent); transform: skewY(-20deg); }
.ico.phone{ border-left:3px solid var(--footer-accent); border-right:3px solid var(--footer-accent); border-radius:3px; }
.ico.globe{ border:2px solid var(--footer-accent); border-radius:999px; }
.ico.globe::before{ content:""; position:absolute; inset:4px; border:2px solid var(--footer-accent); border-radius:999px; border-left:0; border-right:0; }

/* socials */
.socials{ display:flex; gap:.5rem; flex-wrap:wrap; }
.social-btn{
  width:36px; height:36px; border-radius:10px;
  display:inline-block; background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  position:relative; transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.social-btn::after{ content:""; position:absolute; inset:9px; background:#fff; mask-size:contain; mask-position:center; mask-repeat:no-repeat; opacity:.95; }
/* simple masks */
.social-btn.fb::after{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="black" d="M279.14 288l14.22-92.66h-88.91V127.66c0-25.35 12.42-50.06 52.24-50.06H295V6.26S268.91 0 244.43 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H56.89V288h66.46v224h100.2V288z"/></svg>'); }
.social-btn.ig::after{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="black" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9S160.5 370.8 224.1 370.8 339 319.5 339 255.9 287.7 141 224.1 141zm146.4-41c0 14.9-12 26.9-26.9 26.9s-26.9-12-26.9-26.9 12-26.9 26.9-26.9 26.9 12 26.9 26.9zM398.8 80C391 56.6 371.4 37 348 29.2 314.6 18.7 224 18.7 224 18.7s-90.6 0-124 10.5C76.6 37 57 56.6 49.2 80 38.7 113.4 38.7 204 38.7 204s0 90.6 10.5 124c7.8 23.4 27.4 43 50.8 50.8 33.4 10.5 124 10.5 124 10.5s90.6 0 124-10.5c23.4-7.8 43-27.4 50.8-50.8 10.5-33.4 10.5-124 10.5-124s0-90.6-10.5-124z"/></svg>'); }
.social-btn.x::after{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="black" d="M389.2 48H470L305.6 239.7 500 464H345.5L233.2 331.9 106.6 464H26.7L200.9 260.4 14 48h157.7l100.2 120.5L389.2 48z"/></svg>'); }
.social-btn.yt::after{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="black" d="M549.7 124.1c-6.3-23.7-24.9-42.3-48.6-48.6C458.8 64 288 64 288 64S117.2 64 74.9 75.5c-23.7 6.3-42.3 24.9-48.6 48.6C14.9 166.4 14.9 256 14.9 256s0 89.6 11.4 131.9c6.3 23.7 24.9 42.3 48.6 48.6C117.2 448 288 448 288 448s170.8 0 213.1-11.5c23.7-6.3 42.3-24.9 48.6-48.6C561.1 345.6 561.1 256 561.1 256s0-89.6-11.4-131.9zM232 338.5V173.5L361 256 232 338.5z"/></svg>'); }
.social-btn.tt::after{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="black" d="M448 209.9c-17.4 7.7-36.1 12.9-55.8 15.2 20.1-12.1 35.6-31.3 42.8-54.1-18.8 11.1-39.6 19.2-61.8 23.5-17.8-19-43.2-30.9-71.3-30.9-53.9 0-97.7 43.8-97.7 97.7 0 7.7 .9 15.1 2.6 22.2-81.2-4.1-153.2-43-201.4-102.2-8.4 14.3-13.3 31-13.3 48.8 0 33.7 17.2 63.5 43.4 81-16- .5-31-4.9-44.1-12.1v1.2c0 47.1 33.5 86.4 78 95.4-8.2 2.2-16.9 3.4-25.8 3.4-6.3 0-12.5-.6-18.5-1.8 12.5 39.1 48.9 67.5 92 68.4-33.7 26.4-76.1 42.1-122.3 42.1-8 0-15.9-.5-23.7-1.4 43.6 27.9 95.5 44.2 151.1 44.2 181.3 0 280.6-150.1 280.6-280.6 0-4.3-.1-8.5-.3-12.7 19.3-13.9 36-31.3 49.2-51.1z"/></svg>'); }
.social-btn:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }

/* divider + bottom */
.footer-divider{
  border:0; height:1px; background: rgba(255,255,255,.08);
  margin: 24px 0 12px;
}
.footer-bottom{ text-align:center; color: var(--footer-muted); font-size:.95rem; }

.site-footer::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:48px;
  background: var(--footer-bg-2);
}

/* Back to top (floating) */
.backtotop{
  position: fixed; right: 22px; bottom: 26px; z-index: 30;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:12px;
  background:#fff; color:#0f172a;
  border:1px solid #bfdbfe; box-shadow: 0 12px 28px rgba(2,6,23,.15);
  font-weight:700;
}
.backtotop .chev{
  width:18px; height:18px; border:2px solid #3b82f6; border-left:0; border-bottom:0;
  transform: rotate(-45deg); border-radius:2px;
}
.backtotop:hover{ background:#f8fbff; border-color:#93c5fd; }
@media (max-width: 575.98px){
  .footer-logo{ max-width: 180px; }
  .backtotop{ right: 14px; bottom: 18px; }
}

/* ===== FOOTER ===== */
.site-footer{

  --footer-text: rgba(255,255,255,.95);
  --footer-muted: rgba(255,255,255,.80);
  --footer-chip: rgba(255,255,255,.10);
  --footer-border: rgba(255,255,255,.16);

  background:
    radial-gradient(120% 80% at 20% -20%, rgba(255,255,255,.08) 0%, transparent 70%),
    linear-gradient(180deg, var(--brand-start) 0%, var(--brand-end) 100%);
  color: var(--footer-text);
  padding: 52px 0 22px;
  margin-top: 36px;

  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  box-shadow: 0 -10px 40px rgba(2,6,23,.12) inset;
}

.info-title{
  display:flex; align-items:center; gap:.55rem;
  color:#fff; font-weight:800; letter-spacing:.02em; margin:0 0 .6rem;
}
.info-text{ margin:0; color:var(--footer-muted); line-height:1.65; }
.info-text a{ color:var(--footer-muted); text-decoration:none; }
.info-text a:hover{ color:#fff; text-decoration:underline; }

.footer-divider{
  border:0; height:1px; background: var(--footer-border);
  margin: 26px 0 12px;
}

/* logo */
.footer-logo{ max-width: 220px; height:auto; display:block; filter: drop-shadow(0 4px 16px rgba(0,0,0,.2)); }

/* ikon judul  */
.ico{ width:18px; height:18px; position:relative; display:inline-block; }
.ico.pin::before{
  content:""; position:absolute; inset:3px 6px 7px 6px; border-radius:10px 10px 10px 0;
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  transform: rotate(45deg);
}
.ico.mail{ border:2px solid rgba(255,255,255,.7); border-radius:4px; }
.ico.mail::after{
  content:""; position:absolute; left:2px; right:2px; top:6px; height:2px;
  background: rgba(255,255,255,.7); transform: skewY(-20deg);
}
.ico.phone{ border-left:3px solid rgba(255,255,255,.7); border-right:3px solid rgba(255,255,255,.7); border-radius:3px; }
.ico.globe{ border:2px solid rgba(255,255,255,.7); border-radius:999px; }
.ico.globe::before{
  content:""; position:absolute; inset:4px; border:2px solid rgba(255,255,255,.7);
  border-radius:999px; border-left:0; border-right:0;
}

/* sosial */
.socials{ display:flex; gap:.55rem; flex-wrap:wrap; }
.social-btn{
  width:36px; height:36px; border-radius:12px; position:relative;
  background: var(--footer-chip);
  border:1px solid var(--footer-border);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  box-shadow: 0 6px 18px rgba(2,6,23,.15);
}
.social-btn::after{
  content:""; position:absolute; inset:9px; background:#fff;
  mask-size:contain; mask-position:center; mask-repeat:no-repeat; opacity:.95;
}
.social-btn:hover{
  background: linear-gradient(180deg, var(--brand-start), var(--brand-end));
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px) scale(1.02);
}

/* mask ikon */
.social-btn.fb::after{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91V127.66c0-25.35 12.42-50.06 52.24-50.06H295V6.26S268.91 0 244.43 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H56.89V288h66.46v224h100.2V288z"/></svg>'); }
.social-btn.ig::after{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9S160.5 370.8 224.1 370.8 339 319.5 339 255.9 287.7 141 224.1 141zm146.4-41c0 14.9-12 26.9-26.9 26.9s-26.9-12-26.9-26.9 12-26.9 26.9-26.9 26.9 12 26.9 26.9zM398.8 80C391 56.6 371.4 37 348 29.2 314.6 18.7 224 18.7 224 18.7s-90.6 0-124 10.5C76.6 37 57 56.6 49.2 80 38.7 113.4 38.7 204 38.7 204s0 90.6 10.5 124c7.8 23.4 27.4 43 50.8 50.8 33.4 10.5 124 10.5 124 10.5s170.8 0 213.1-11.5c23.4-6.3 43-24.9 48.6-48.6C561.1 345.6 561.1 256 561.1 256s0-89.6-11.4-131.9z"/></svg>'); }
.social-btn.x::after{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48H470L305.6 239.7 500 464H345.5L233.2 331.9 106.6 464H26.7L200.9 260.4 14 48h157.7l100.2 120.5L389.2 48z"/></svg>'); }
.social-btn.yt::after{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M549.7 124.1c-6.3-23.7-24.9-42.3-48.6-48.6C458.8 64 288 64 288 64S117.2 64 74.9 75.5c-23.7 6.3-42.3 24.9-48.6 48.6C14.9 166.4 14.9 256 14.9 256s0 89.6 11.4 131.9c6.3 23.7 24.9 42.3 48.6 48.6C117.2 448 288 448 288 448s170.8 0 213.1-11.5c23.7-6.3 42.3-24.9 48.6-48.6C561.1 345.6 561.1 256 561.1 256s0-89.6-11.4-131.9zM232 338.5V173.5L361 256 232 338.5z"/></svg>'); }
.social-btn.tt::after{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 209.9c-17.4 7.7-36.1 12.9-55.8 15.2 20.1-12.1 35.6-31.3 42.8-54.1-18.8 11.1-39.6 19.2-61.8 23.5-17.8-19-43.2-30.9-71.3-30.9-53.9 0-97.7 43.8-97.7 97.7 0 7.7 .9 15.1 2.6 22.2-81.2-4.1-153.2-43-201.4-102.2-8.4 14.3-13.3 31-13.3 48.8 0 33.7 17.2 63.5 43.4 81-16- .5-31-4.9-44.1-12.1v1.2c0 47.1 33.5 86.4 78 95.4-8.2 2.2-16.9 3.4-25.8 3.4-6.3 0-12.5-.6-18.5-1.8 12.5 39.1 48.9 67.5 92 68.4-33.7 26.4-76.1 42.1-122.3 42.1-8 0-15.9-.5-23.7-1.4 43.6 27.9 95.5 44.2 151.1 44.2 181.3 0 280.6-150.1 280.6-280.6 0-4.3-.1-8.5-.3-12.7 19.3-13.9 36-31.3 49.2-51.1z"/></svg>'); }

/* tombol back-to-top */
.backtotop{
  background:#fff; color:#0f172a; border:1px solid rgba(21,108,201,.25);
  box-shadow: 0 14px 28px rgba(2,6,23,.18);
}
.backtotop .chev{ border-color: var(--brand-blue); }

/* responsif kecil */
@media (max-width: 575.98px){
  .footer-logo{ max-width: 180px; }
}

/* === FOOTER */
.site-footer{
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  box-shadow: none !important;

  background: linear-gradient(180deg, var(--brand-start) 0%, var(--brand-end) 100%) !important;
}


.site-footer::after{
  content: none !important;
  display: none !important;
}
/* === FIXED TRANSPARENT TOPBAR === */
:root{
  --topbar-h: 64px;            
}
@media (min-width: 992px){
  :root{ --topbar-h: 72px; }
}

.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;


  background: rgba(12,14,22,.48) !important;     
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 8px 28px rgba(2,6,23,.18);


  border-radius: 0 !important;

  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}


.topbar.is-scrolled{
  background: rgba(12,14,22,.66) !important;
  border-bottom-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 34px rgba(2,6,23,.22);
}


.topbar .nav-link{ color: rgba(255,255,255,.92); }
.topbar .nav-link:hover, .topbar .nav-link:focus{ color:#fff; }


*/
body.with-topbar-space{ padding-top: var(--topbar-h); }


/* === HERO TWEAK === */
:root{
  --hero-extend: 120px; 
}

@media (min-width: 992px){
  .hero{
    padding-top: calc(6.2rem + var(--topbar-h, 72px)) !important;
    padding-bottom: calc(3.5rem + var(--hero-extend)) !important;
    min-height: calc(66vh + (var(--hero-extend) * .35)) !important;
  }
}

@media (max-width: 991.98px){
  .hero{
    padding-top: calc(5rem + var(--topbar-h, 64px)) !important;
    padding-bottom: 3rem !important;
  }
}


/* FACILITIES  */
.facilities{ background: var(--surface); }
.fac-carousel{ position:relative; }
.fac-viewport{ overflow:hidden; border-radius: var(--radius-xl); background:#fff; box-shadow: var(--shadow-1); }
.fac-track{ display:flex; transition: transform .5s ease; }
.fac-item{ flex:0 0 100%; padding: 8px; }

.fac-card{
  margin:0; display:grid; grid-template-columns: 1.25fr 1fr; gap:0;
  min-height: clamp(240px, 36vw, 420px);
  border-radius: 18px; overflow:hidden; background:#fff;
}
.fac-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.fac-card figcaption{
  padding: clamp(16px, 3vw, 28px);
  display:flex; flex-direction:column; justify-content:center; gap:.45rem;
}
.fac-card h3{ margin:0; font-weight:800; color:var(--text-strong); }
.fac-card p{ margin:0; color:var(--text-weak); }

@media (max-width: 991.98px){
  .fac-card{ grid-template-columns: 1fr; min-height: auto; }
  .fac-card img{ max-height: 320px; }
}

.fac-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; border:0;
  background: rgba(0,0,0,.45); color:#fff; font-size:22px; line-height:42px;
  display:grid; place-items:center; z-index:2; cursor:pointer;
}
.fac-arrow.prev{ left: 12px; }
.fac-arrow.next{ right: 12px; }
.fac-carousel:hover .fac-arrow{ background: rgba(0,0,0,.6); }
.fac-arrow:focus{ outline:3px solid rgba(21,108,201,.4); outline-offset:2px; }

.fac-dots{ display:flex; gap:10px; justify-content:center; margin-top:14px; }
.fac-dots button{
  width:10px; height:10px; border-radius:999px; border:0; background:#cbd5e1; opacity:.6; cursor:pointer;
}
.fac-dots button[aria-current="true"]{ background: var(--brand-blue); opacity:1; }

/* Lightbox */
.fac-lightbox[hidden]{ display:none; }
.fac-lightbox{
  position: fixed; inset:0; z-index: 1200; display:grid; place-items:center;
}
.fac-lightbox__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.78); }
.fac-lightbox__figure{
  position:relative; z-index:2;
  width:min(92vw, 980px); max-height: 86vh;
  display:flex; flex-direction:column; gap:.6rem; align-items:stretch;
}
.fac-lightbox__figure img{
  width:100%; max-height: calc(86vh - 64px); object-fit:contain; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(2,6,23,.5);
  background:#000;
}
.fac-lightbox__figure figcaption{ color:#fff; text-align:center; font-weight:700; }
.fac-lightbox__close{
  position:absolute; top:18px; right:18px; z-index:3;
  width:38px; height:38px; border-radius:10px; border:0;
  background: rgba(255,255,255,.9); color:#111827; font-size:22px; cursor:pointer;
}
.fac-lightbox__nav{
  position:absolute; top:50%; transform: translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:999px; border:0;
  background: rgba(255,255,255,.92); color:#111827; font-size:22px; cursor:pointer;
}
.fac-lightbox__nav.prev{ left:18px; }
.fac-lightbox__nav.next{ right:18px; }



/* === FACILITIES  === */
.fac-viewport{
  padding: clamp(10px, 1.4vw, 18px) !important;
  background: #fff !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-1) !important;
  overflow: hidden !important;
}
.fac-item{ padding: 0 !important; }

.fac-card{

  grid-template-columns: minmax(220px, 45%) 1fr !important;  
  min-height: clamp(220px, 28vw, 340px) !important;          
  border-radius: 16px !important;
  background: transparent !important;  
  overflow: hidden !important;
}

.fac-card img{
  aspect-ratio: 2 / 3 !important;  /* portrait */
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block;
}

.fac-card figcaption{ padding: clamp(14px, 2.2vw, 22px) !important; }
.fac-card h3{ font-size: clamp(20px, 2vw, 28px) !important; }
.fac-card p{ font-size: clamp(.95rem, .9rem + .2vw, 1rem) !important; }

.fac-arrow{ width: 38px; height: 38px; font-size: 18px; }
.fac-arrow.prev{ left: calc(clamp(10px, 1.4vw, 18px) / 2) !important; }
.fac-arrow.next{ right: calc(clamp(10px, 1.4vw, 18px) / 2) !important; }

/* responsive */
@media (max-width: 991.98px){
  .fac-viewport{ padding: 10px !important; }
  .fac-card{ grid-template-columns: 1fr !important; min-height: auto !important; }
  .fac-card img{ max-height: 320px; }
}


/* === FACILITIES — HEIGHT FIX (lock card height, remove img aspect-ratio) === */
.fac-card{
  height: clamp(220px, 28vw, 340px) !important;  /* fixed height instead of min-height */
  min-height: 0 !important;
}
.fac-card img{
  aspect-ratio: auto !important;   /* let height follow the card */
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* === Footer jadi hijau (tanpa ganggu hero) === */
.site-footer{
  background: #16a34a !important;
}