/* ==================================================
   GLOBAL
================================================== */
:root{
  --navH:56px;
  --space:16px;
  --accent:#024789;
}

body{
  font-family:'Poppins',sans-serif;
  background:#f8fbff;
  color:#1f2937;
  padding-top:var(--navH);
}

/* ==================================================
   NAVBAR
================================================== */
.navbar{background:var(--accent);}
.navbar-brand,.navbar-nav .nav-link{color:#fff!important;font-weight:500;}
.navbar-nav .nav-link:hover{color:#dbeafe!important;}
.mega-menu{width:100%;padding:20px;}
.dropdown-menu{
  border-radius:12px;border:none;
  box-shadow:0 10px 30px rgba(0,0,0,.1);
}

/* ==================================================
   BUTTON DETAIL
================================================== */
.btn-detail{
  width:38px;height:38px;border-radius:50%;
  background:#dc2626;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(220,38,38,.35);
  transition:all .3s ease;
}
.btn-detail:hover{
  background:#ef4444;transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(220,38,38,.45);
}

/* ==================================================
   FOOTER
================================================== */
footer{background:var(--accent);color:#fff;margin-top:0;}
footer a{color:#dbeafe;text-decoration:none;}
footer a:hover{text-decoration:underline;}

/* ==================================================
   PAGE HOME
================================================== */

/* === HERO CAROUSEL === */
.page-home .carousel-item{
  height:calc(100vh - var(--navH));
  min-height:400px;
  background-size:cover;
  background-position:center;
}
.page-home .carousel-caption{
  background:rgba(10,61,98,.6);
  border-radius:16px;
  padding:20px;
}

/* === HOME SECTION === */
.page-home .home-section{padding:60px 0;}
.section-title{font-weight:600;color:#0a3d62;}

/* === SERVICE / WHY CHOOSE US CARDS === */
.page-home .card{
  border:none;border-radius:20px;
  box-shadow:0 8px 25px rgba(0,0,0,.08);
  overflow:hidden;position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
}
.page-home .card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 30px rgba(0,0,0,.15);
}
.page-home .card-img-top{
  width:100%;height:220px;object-fit:cover;
  display:block;transition:transform .6s ease;
}
.page-home .card:hover .card-img-top{transform:scale(1.08);}
.page-home .card-body{background:var(--accent);color:#fff;}
.page-home .card-body .card-title{color:#fff;font-weight:600;}
.page-home .card-body .card-text{color:#fff;opacity:1;}

/* === SDM SECTION === */
.page-home .sdm-section{
  background:linear-gradient(180deg,#f0f7ff 0%,#ffffff 100%);
  padding:60px 0;
}
.page-home .sdm-card{
  border:none;border-radius:24px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);
  box-shadow:0 12px 30px rgba(10,61,98,.10);
  transition:transform .3s ease, box-shadow .3s ease;
  overflow:hidden;
}
.page-home .sdm-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(10,61,98,.18);
}

/*
.page-home .sdm-card img{
  width:100%;height:260px;object-fit:cover;display:block;
}
*/

.page-home .sdm-card img{
  height:425px;
  object-fit:cover;
  object-position:top center;  /* kepala nggak kepotong */
}

.page-home .sdm-card .card-body{
  background:transparent!important;
  color:#1f2937!important;
}
.page-home .sdm-card .card-title{color:#0a3d62!important;font-weight:600;}
.page-home .sdm-card .card-text{color:#475569!important;}

/* ==================================================
   PAGE NEWS / ARTICLE / VIDEO
================================================== */
.page-news section.pt-3{
  padding-top:var(--space)!important;
  padding-bottom:var(--space)!important;
}

/* === PAGE HEADER === */
.page-header{
  margin-bottom:var(--space);
  min-height:150px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  border-radius:0 0 28px 28px;
  position:relative;
  overflow:hidden;

  display:flex;              /* tambah */
  align-items:center;        /* tambah: tengah vertikal */
}

.page-header-overlay{
  position:absolute; inset:0;
  background: linear-gradient(
    90deg,
    rgba(10,61,98,.25),
    rgba(30,144,255,.20)
  );
  border-radius:0 0 28px 28px;
}

/* === ARTICLE CONTENT === */
.news-content{line-height:1.8;color:#4b5563;}
.news-content p{margin-bottom:1.25rem;}
.article-lead{font-size:1rem;line-height:1.6;color:#6b7280;}
.text-accent{color:var(--accent);}
.bg-accent{background:var(--accent)!important;}

/* === ARTICLE CARD === */
.page-news article.card{
  border:none;border-radius:24px;overflow:hidden;
  box-shadow:0 12px 28px rgba(10,61,98,.12);
  background:#fff;transition:.3s ease;
}

/* === CAROUSEL DALAM ARTICLE (ANTI-HILANG) === */
#articleSlider{
  width:100%;background:#000;min-height:360px;overflow:hidden;
}
#articleSlider .carousel-inner,
#articleSlider .carousel-item{min-height:360px;height:auto!important;}
#articleSlider .carousel-item img{
  width:100%;height:auto;min-height:360px;object-fit:cover;display:block;
}
#articleSlider .carousel-indicators button{
  width:10px;height:10px;border-radius:50%;
  background:#fff;opacity:.6;
}
#articleSlider .carousel-indicators .active{opacity:1;}
#articleSlider .carousel-control-prev-icon,
#articleSlider .carousel-control-next-icon{filter:invert(1);}

/* === NEWS CARD === */
.news-card{
  border:none;border-radius:22px;
  box-shadow:0 12px 30px rgba(10,61,98,.12);
  overflow:hidden;background:#fff;
  transition:transform .3s ease, box-shadow .3s ease;
}
.news-card img{
  width:100%;height:200px;object-fit:cover;display:block;
  transition:transform .6s ease;
}
.news-card:hover img{transform:scale(1.08);}
.news-card .card-body{
  background:#fff!important;color:#1f2937!important;
  padding:1.1rem 1.25rem;
}

/* === GALLERY CARD === */
.page-news .gallery-card{
  border:none;border-radius:18px;
  overflow:hidden;background:#fff;
  box-shadow:0 8px 22px rgba(2,71,137,.10);
  transition:transform .3s, box-shadow .3s;
}
.page-news .gallery-thumb{
  position:relative;width:100%;
  aspect-ratio:16 / 9;overflow:hidden;background:#000;
}
.page-news .gallery-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.page-news .gallery-card:hover img{transform:scale(1.08);}
.page-news .play-icon{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:48px;color:#fff;
  background:rgba(2,71,137,.45);
  transition:background .3s ease;
}
.page-news .gallery-card:hover .play-icon{background:rgba(2,71,137,.55);}
.page-news .gallery-card .card-body{padding:16px 18px 18px;background:#fff;}
.page-news .gallery-card h6{font-size:.95rem;line-height:1.45;color:#0a3d62;}
.page-news .gallery-card p{line-height:1.4;color:#475569;}

/* ==================================================
   CONTACT PAGE
================================================== */
.contact-card{
  background:linear-gradient(180deg,#ffffff,#f8fbff);
}
.contact-card .form-control{
  border-radius:14px;
  border:1px solid #e5e7eb;
  padding:14px 16px;
  font-size:14px;
}
.contact-card .form-control:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 .2rem rgba(59,130,246,.15);
}
.contact-info{
  background:linear-gradient(180deg,#024789,#0a3d62);
  color:#fff;
}
.contact-info .icon-box{
  width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
.logo-box{
  background:rgba(255,255,255,.12);
  padding:14px 18px;
  border-radius:16px;
  display:inline-block;
}

/* ==================================================
   INTERACTIVE HOVER & CLICK EFFECTS
================================================== */
.news-card,
.gallery-card,
.related-card,
.sdm-card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.news-card:hover,
.gallery-card:hover,
.related-card:hover,
.sdm-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(2,71,137,.18);
}
.news-card:active,
.gallery-card:active,
.related-card:active,
.sdm-card:active {
  transform: scale(.98) translateY(-2px);
  box-shadow: 0 10px 20px rgba(2,71,137,.25);
  transition: transform .1s ease;
}
.news-card:focus-within,
.gallery-card:focus-within,
.related-card:focus-within,
.sdm-card:focus-within {
  outline: none;
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(2,71,137,.25);
}

/* ==================================================
   RESPONSIVE
================================================== */
@media(max-width:992px){
  .page-news aside{order:2;}
  .page-news .col-lg-9{order:1;}
}
@media(max-width:768px){
  :root{--space:14px;}
  .page-home .carousel-item{height:50vh;}
  #articleSlider{min-height:300px;}
  .news-content{font-size:.95rem;}
  .news-card img{height:180px;}
}
@media(max-width:576px){
  .article-action{
    position:sticky;
    bottom:0;
    background:#fff;
    padding:12px;
    border-top:1px solid #e5e7eb;
    z-index:10;
  }
}

/* ================= HEADER MOBILE ================= */
@media(max-width:576px){
  .admin-header .container-fluid{
    flex-wrap:nowrap;
  }

  .brand-logo{
    height:40px;
  }

  .admin-header span{
    display:none;
  }

  .admin-header img.rounded-circle{
    width:32px;
    height:32px;
  }
}

/* ===== FIX LOGO NAVBAR ===== */
.navbar-brand{
  max-width:180px;
  overflow:hidden;
}

.brand-logo{
  height:40px;
  max-width:100%;
  width:auto;
  object-fit:contain;
  display:block;
}

@media(max-width:576px){
  .navbar-brand{
    max-width:120px;
  }

  .brand-logo{
    height:34px;
  }
}

/* ===== Footer Logo Fix ===== */
.footer-logo{
  height:48px;       /* atur sesuai selera: 36-56px */
  width:auto;
  max-width:180px;   /* biar nggak melebar banget */
  object-fit:contain;
  display:block;
}

/* versi mobile */
@media (max-width:576px){
  .footer-logo{
    height:38px;
    max-width:140px;
  }
}

/* ===== Anak Usaha (lebih kecil & rapih) ===== */
.footer-subsidiary{
  margin-top:12px;
}

.subsidiary-logos{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;          /* kalau banyak logo, turun baris tapi tetap rapih */
}

.footer-logo--mini{
  height:28px;             /* kecilin di sini */
  max-width:110px;
  width:auto;
  object-fit:contain;
  filter:brightness(0) invert(1); /* opsional: bikin logo gelap jadi putih, hapus kalau gak perlu */
  opacity:.95;
}

/* Mobile */
@media(max-width:576px){
  .footer-logo--mini{
    height:24px;
    max-width:90px;
  }
}

.subsidiary-logos img{
  background:rgba(255,255,255,.12);
  padding:8px 10px;
  border-radius:12px;
}

/* ===== Anak Usaha: paksa 1 baris horizontal ===== */
.subsidiary-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
}

.subsidiary-title{
  flex:0 0 auto;        /* judul jangan mengecil/hilang */
  white-space:nowrap;   /* judul jangan turun baris */
}

.subsidiary-logos{
  display:flex;
  align-items:center;
  gap:10px;

  flex:1 1 auto;
  justify-content:flex-end;

  flex-wrap:nowrap;     /* INI KUNCI: jangan turun ke bawah */
  overflow-x:auto;      /* kalau sempit: geser samping */
  overflow-y:hidden;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}

.footer-logo--mini{
  height:26px;
  width:auto;
  max-width:110px;
  object-fit:contain;
  display:block;
  flex:0 0 auto;        /* logo jangan “pecah” baris */
}

/* optional: sembunyikan scrollbar biar clean */
.subsidiary-logos::-webkit-scrollbar{height:6px;}
.subsidiary-logos::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:10px;}

.scroll-top{
  position:fixed;
  left:20px; bottom:20px;
  /* right:20px;  <-- hapus ini */
  width:46px;height:46px;border-radius:14px;
  background:linear-gradient(180deg,#3c87cc,#116fb3);
  color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 35px rgba(2,71,137,.28);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all .25s ease;
  z-index:9999;
}

.scroll-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.scroll-top__icon{width:20px;height:20px;fill:currentColor;}

.banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.profil-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.news-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}

/* Biar semua kartu news tinggi rata */
.page-news .news-card{
  height:100%;
  display:flex;
  flex-direction:column;
}

.page-news .news-card img{
  height:200px;          /* samakan tinggi gambar */
  width:100%;
  object-fit:cover;
  display:block;
}

.page-news .news-card .card-body{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Dorong baris tanggal + tombol ke bawah */
.page-news .news-card .card-body .news-footer{
  margin-top:auto;
}

/* Opsional: bikin teks deskripsi konsisten (2-3 baris) */
.page-news .news-card .card-body .news-desc{
  display:-webkit-box;
  -webkit-line-clamp:3;  /* ubah 2/3 sesuai selera */
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ===============================
   CORPORATE SIDEBAR (ELEGANT)
================================ */
:root{
  --brand:#024789;
  --brand-2:#0a3d62;
  --ink:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --line:rgba(15, 23, 42, .08);
  --soft:rgba(2, 71, 137, .08);
  --shadow:0 12px 28px rgba(2,71,137,.12);
  --shadowHover:0 18px 40px rgba(2,71,137,.18);
}

/* Card basic */
.sidebar-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.sidebar-card .card-body{
  padding:18px 18px 16px;
}

/* Title */
.sidebar-title{
  font-weight:700;
  color:var(--ink);
  margin-bottom:12px;
  letter-spacing:.2px;
}

/* Search */
.sidebar-search{
  position:relative;
}

/*
.sidebar-input{
  border-radius:14px;
  border:1px solid var(--line);
  padding:12px 42px 12px 14px;
  font-size:14px;
  color:var(--ink);
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
*/

.sidebar-input:focus{
  border-color:rgba(2,71,137,.35);
  box-shadow:0 0 0 .22rem rgba(2,71,137,.12);
}

.sidebar-search-icon{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:16px;
  pointer-events:none;
}

/* ===============================
   CATEGORY TREE
================================ */
.cat-tree{
  list-style:none;
  padding-left:0;
  margin:0;
}

.cat-group + .cat-group,
.cat-leaf + .cat-leaf{
  margin-top:8px;
}

/* Parent button */
.cat-parent{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  background:linear-gradient(180deg, rgba(2,71,137,.06), rgba(2,71,137,.03));
  color:var(--ink);
  cursor:default; /* ganti jadi pointer kalau nanti pakai toggle */
}

.cat-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 4px rgba(2,71,137,.10);
  flex:0 0 auto;
}

.cat-caret{
  margin-left:auto;
  color:var(--muted);
  font-size:12px;
}

/* Child wrapper (indent halus) */
.cat-children{
  margin-top:8px;
  padding-left:12px;
  border-left:2px solid rgba(2,71,137,.12);
}

/* Leaf link */
.cat-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  color:var(--ink);
  border:1px solid transparent;
  background:#fff;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.cat-link:hover{
  border-color:rgba(2,71,137,.14);
  background:rgba(2,71,137,.04);
  box-shadow:0 10px 24px rgba(2,71,137,.10);
  transform:translateY(-1px);
}

.cat-bullet{
  width:8px;height:8px;
  border-radius:3px;
  background:rgba(2,71,137,.28);
  flex:0 0 auto;
}

/* Active leaf */
.cat-link.is-active{
  background:linear-gradient(180deg, rgba(2,71,137,.10), rgba(2,71,137,.06));
  border-color:rgba(2,71,137,.22);
  box-shadow:0 14px 28px rgba(2,71,137,.14);
}

.cat-link.is-active .cat-bullet{
  background:var(--brand);
}

/* Levels (optional tweak spacing) */
.cat-tree.level-0 .cat-children{ padding-left:12px; }
.cat-tree.level-1 .cat-children{ padding-left:14px; }
.cat-tree.level-2 .cat-children{ padding-left:16px; }
.cat-tree.level-3 .cat-children{ padding-left:16px; }

/* Responsive polish */
@media (max-width: 992px){
  .sidebar-card{ border-radius:16px; }
  .sidebar-card .card-body{ padding:16px; }
}

/* ==== SIDEBAR SEARCH FIX (override killer) ==== */
.page-news aside .sidebar-card,
aside .sidebar-card{
  background:#fff !important;
  color:#0f172a !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:18px !important;
  box-shadow:0 12px 28px rgba(2,71,137,.12) !important;
  overflow:hidden;
}

.page-news aside .sidebar-card .card-body,
aside .sidebar-card .card-body{
  background:transparent !important;
  padding:18px !important;
}

.page-news aside .sidebar-title,
aside .sidebar-title{
  color:#0f172a !important;
  font-weight:700 !important;
  margin:0 0 12px !important;
}

/* Search wrapper */
.page-news aside .sidebar-search,
aside .sidebar-search{
  position:relative;
}

/* Input – paksa tinggi, padding, dan style corporate */
.page-news aside .sidebar-input,
aside .sidebar-input{
  height:44px !important;
  border-radius:14px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  padding:0 44px 0 14px !important;
  font-size:14px !important;
  background:#fff !important;
  color:#0f172a !important;
}

/* Focus lebih rapi */
.page-news aside .sidebar-input:focus,
aside .sidebar-input:focus{
  border-color:rgba(2,71,137,.35) !important;
  box-shadow:0 0 0 .22rem rgba(2,71,137,.12) !important;
}

/* Icon selalu center vertikal */
.page-news aside .sidebar-search-icon,
aside .sidebar-search-icon{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  line-height:1;
  font-size:16px;
  color:#64748b;
  pointer-events:none;
}

.sidebar-group{
  border-radius:14px;
  overflow:hidden;
}

.sidebar-addon{
  background:#fff !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-left:none !important;
  color:#64748b !important;
  padding:0 14px !important;
}

.sidebar-group .sidebar-input{
  height:44px !important;
  border-right:none !important;
}

/* =========================================
   SIDEBAR (ACCENT / DARK) - OVERRIDE FINAL
   tempel paling bawah CSS
========================================= */

/* Card sidebar: biru, teks putih */
.page-news aside .sidebar-card,
aside .sidebar-card{
  background:var(--accent) !important;
  color:#fff !important;
  border:none !important;
  border-radius:20px !important;
  box-shadow:0 10px 26px rgba(0,0,0,.14) !important;
}

/* Card body jangan ikut style card-body page-home */
.page-news aside .sidebar-card .card-body,
aside .sidebar-card .card-body{
  background:transparent !important;
  color:#fff !important;
  padding:18px !important;
}

/* Title putih */
.page-news aside .sidebar-title,
aside .sidebar-title{
  color:#fff !important;
  font-weight:700 !important;
  margin:0 0 12px !important;
  letter-spacing:.2px;
}

/* Search */
.page-news aside .sidebar-search,
aside .sidebar-search{ position:relative; }

.page-news aside .sidebar-input,
aside .sidebar-input{
  height:44px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  padding:0 44px 0 14px !important;
  background:rgba(255,255,255,.96) !important;
  color:#0f172a !important;
}

.page-news aside .sidebar-input::placeholder,
aside .sidebar-input::placeholder{
  color:#64748b !important;
}

.page-news aside .sidebar-input:focus,
aside .sidebar-input:focus{
  border-color:rgba(255,255,255,.40) !important;
  box-shadow:0 0 0 .22rem rgba(255,255,255,.16) !important;
}

.page-news aside .sidebar-search-icon,
aside .sidebar-search-icon{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  line-height:1;
  color:rgba(15,23,42,.55);
  pointer-events:none;
}

/* =========================================
   CATEGORY TREE (DARK)
========================================= */

/* Parent: lebih tebal & beda background */
.cat-parent{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;

  font-weight:800;
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}

/* Dot parent */
.cat-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.12);
  flex:0 0 auto;
}

/* Indent children: garis tipis (bukan underline link) */
.cat-children{
  margin-top:8px;
  padding-left:12px;
  border-left:2px solid rgba(255,255,255,.16);
}

/* Child link: default NO underline */
.cat-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;

  color:rgba(255,255,255,.92) !important;
  font-weight:500;
  text-decoration:none !important;

  background:transparent;
  border:1px solid transparent;

  transition:background .2s ease, transform .2s ease, box-shadow .2s ease, text-decoration-color .2s ease;
}

/* Bullet child */
.cat-bullet{
  width:8px;height:8px;
  border-radius:3px;
  background:rgba(255,255,255,.45);
  flex:0 0 auto;
}

/* Hover: baru underline + background halus */
.cat-link:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.16);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
  color:#fff !important;

  text-decoration:underline !important;
  text-underline-offset:3px;
}

/* Active child: lebih tegas */
.cat-link.is-active{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 14px 28px rgba(0,0,0,.18);
  color:#fff !important;
}

.cat-link.is-active .cat-bullet{
  background:#fff;
}

/* ===== Search input-group: benar-benar nyatu ===== */

/* Wrapper yang pegang border + radius */
aside .sidebar-group{
  border-radius:14px !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.96) !important;
}

/* Input & addon: hilangkan border & radius bawaan bootstrap */
aside .sidebar-group > .sidebar-input.form-control{
  border:0 !important;
  border-radius:0 !important;
  height:44px !important;
  padding:0 14px !important;
  background:transparent !important;
  box-shadow:none !important;
}

aside .sidebar-group > .sidebar-addon.input-group-text{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:rgba(15,23,42,.65) !important;
  padding:0 14px !important;
}

/* Fokus: tetap nyatu (wrapper yang glow) */
aside .sidebar-group:focus-within{
  border-color:rgba(255,255,255,.40) !important;
  box-shadow:0 0 0 .22rem rgba(255,255,255,.16) !important;
}

/* ===== Compact spacing untuk sidebar kategori ===== */

/* hilangkan padding/margin default ul */
.cat-tree{
  margin:0 !important;
  padding-left:0 !important;
}

/* kalau ada margin bawaan dari li */
.cat-tree li{
  margin:0 !important;
  padding:0 !important;
}

/* jarak antar item lebih rapat */
.cat-group + .cat-group,
.cat-leaf + .cat-leaf{
  margin-top:4px !important;  /* sebelumnya 8px (atau default) */
}

/* parent lebih compact */
.cat-parent{
  padding:7px 10px !important; /* sebelumnya 10px 12px */
  border-radius:12px !important;
  gap:8px !important;
  line-height:1.2;
}

/* child lebih compact */
.cat-link{
  padding:7px 10px !important; /* sebelumnya 10px 12px */
  border-radius:12px !important;
  gap:8px !important;
  line-height:1.2;
}

/* indent children lebih kecil + jarak atas lebih kecil */
.cat-children{
  margin-top:4px !important;    /* sebelumnya 8px */
  padding-left:10px !important; /* sebelumnya 12px */
}

/* dot/bullet sedikit diperkecil biar keliatan ringkas */
.cat-dot{
  width:7px !important;
  height:7px !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.12) !important;
}

.cat-bullet{
  width:7px !important;
  height:7px !important;
}

.cat-parent .cat-text{ font-size:14px; }
.cat-link .cat-text{ font-size:14px; }

/* ===== Corporate Empty / Error State ===== */
.state-card{
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  box-shadow:0 12px 28px rgba(2,71,137,.10);
  padding:18px;
}

.state-body{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.state-icon{
  width:44px;height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:20px;
}

.state-title{
  margin:0 0 4px;
  font-weight:700;
  color:#0f172a;
  letter-spacing:.2px;
}

.state-text{
  margin:0;
  color:#64748b;
  line-height:1.5;
}

.state-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.state-btn{
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(2,71,137,.18);
  background:rgba(2,71,137,.06);
  color:#024789;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.state-btn:hover{
  background:rgba(2,71,137,.10);
  border-color:rgba(2,71,137,.28);
  text-decoration:none;
}

.state-btn--ghost{
  background:#fff;
}

/* Variants */
.state-icon--empty{
  background:rgba(2,71,137,.10);
  color:#024789;
}

.state-icon--error{
  background:rgba(220,38,38,.10);
  color:#dc2626;
}

/* ===== Corporate Empty / Error State ===== */
.state-card{
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  box-shadow:0 12px 28px rgba(2,71,137,.10);
  padding:18px;
  overflow:hidden;
}

/* Penegasan via garis kiri */
.state-card--warn{ border-left:5px solid #ef4444; }   /* data kosong (tegas merah) */
.state-card--error{ border-left:5px solid #dc2626; }  /* error (lebih kuat) */

.state-body{display:flex;gap:14px;align-items:flex-start;}

.state-icon{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;font-size:20px;
}

.state-title{margin:0 0 4px;font-weight:700;color:#0f172a;letter-spacing:.2px;}
.state-text{margin:0;color:#64748b;line-height:1.5;}

.state-actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}

.state-btn{
  border-radius:12px;padding:10px 12px;
  border:1px solid rgba(2,71,137,.18);
  background:rgba(2,71,137,.06);
  color:#024789;font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
}
.state-btn:hover{background:rgba(2,71,137,.10);border-color:rgba(2,71,137,.28);text-decoration:none;}
.state-btn--ghost{background:#fff;}

/* Variants icon */
.state-icon--warn{background:rgba(239,68,68,.12);color:#ef4444;}
.state-icon--error{background:rgba(220,38,38,.14);color:#dc2626;}

/* Pastikan wrapper jadi acuan overlay */
#news-wrapper{
  position:relative;
  min-height:320px; /* biar overlay keliatan walau data kosong */
}

/* Overlay nutup semua isi wrapper */
#news-loading{
  inset:0;                /* top/right/bottom/left = 0 */
  z-index:10;
}

/* Background overlay + blur halus corporate */
#news-loading > div{
  background:rgba(255,255,255,.72) !important;
  backdrop-filter: blur(2px);
}

/* Opsional: kalau mau lebih tegas */
#news-loading .spinner-border{
  width:2.5rem;
  height:2.5rem;
}

/* Mobile: kecilkan jarak antara NewsList dan Sidebar (outer row g-4) */
@media (max-width: 991.98px){
  .page-news section.pt-3 .container > .row.g-4{
    --bs-gutter-y: .75rem;  /* default g-4 = 1.5rem, ini diperkecil */
  }
}

/* Kalau masih terasa jauh, kecilkan lagi di hp kecil */
@media (max-width: 575.98px){
  .page-news section.pt-3 .container > .row.g-4{
    --bs-gutter-y: .5rem;
  }
}

@media (max-width: 575.98px){
  .page-news aside .sidebar-card{ margin-bottom: .75rem !important; } /* dari mb-4 jadi lebih kecil */
}

.related-card{
  border:none;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 24px rgba(2,71,137,.10);
  transition:transform .3s ease, box-shadow .3s ease;
}
.related-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(2,71,137,.16);
}
.related-card img{display:block;}

.article-hero{
  width:100%;
  overflow:hidden;
  background:#000;
  border-radius:24px 24px 0 0;

  /* fallback kalau JS belum jalan */
  height:360px;

  /* rem: biar tidak kelewat tinggi di layar besar */
  max-height:520px;
  min-height:240px;
}

.article-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.article-hero__overlay{
  background:linear-gradient(transparent,rgba(0,0,0,.65));
}

/* Samain padding artikel dengan news-card */
.article-body{
  padding:1.1rem 1.25rem !important; /* sama seperti .news-card .card-body */
}

@media (min-width: 992px){
  .article-body{ padding:1.25rem 1.5rem !important; }
}

/* Samain style deskripsi artikel dengan news-card */
.page-news article.card .news-content {
  font-family: 'Poppins', sans-serif;   /* sama dengan global */
  font-size: 0.9375rem;                 /* kira-kira 15px, sama kayak .small di card */
  color: #6b7280;                       /* abu-abu halus seperti text-muted */
  line-height: 1.55;                    /* proporsional dengan news-desc */
  margin-bottom: 0;                     /* biar rapih */
}

/* Biar paragraf di dalamnya spacing-nya sama seperti news-desc */
.page-news article.card .news-content p {
  margin-bottom: 0.75rem;               /* lebih padat, biar mirip news-desc */
}

.page-news article.card .news-content h2,
.page-news article.card .news-content h3,
.page-news article.card .news-content h4,
.page-news article.card .news-content h5,
.page-news article.card .news-content h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #0a3d62;
  margin-top: 1rem;
  margin-bottom: .5rem;
}

/* Deskripsi artikel: samain dengan news-card + justify */
.page-news article.card .news-content{
  font-family: 'Poppins', sans-serif;
  font-size: 0.9375rem;      /* ~15px (mirip .small) */
  color: #6b7280;            /* text-muted */
  line-height: 1.55;
  text-align: justify;       /* JUSTIFY */
  text-justify: inter-word;  /* rapihin spasi antar kata */
  hyphens: auto;             /* bantu pemenggalan kata (kalau browser support) */
}

/* Spacing paragraf biar mirip feel news-desc */
.page-news article.card .news-content p{
  margin: 0 0 .75rem;
}

/* Kalau ada list di konten */
.page-news article.card .news-content ul,
.page-news article.card .news-content ol{
  margin: 0 0 .75rem 1.1rem;
}

/* Opsional: jangan justify untuk judul/quote biar tetap enak dibaca */
.page-news article.card .news-content blockquote{
  text-align: left;
}

/* =========================================================
   FIX FINAL: Portrait image FULL (no gap / gantung)
   Tempel PALING BAWAH CSS
========================================================= */

/* 1) Jangan biarkan rule global .news-card img ngerusak image portrait */
.page-news .news-card img:not(.news-img-ratio){
  height:200px;
  width:100%;
  object-fit:cover;
  display:block;
}

/* 2) Kolom gambar harus stretch setinggi card */
.page-news .news-card .news-thumb-col{
  display:flex;
  align-self:stretch;
}

/* 3) Wrapper portrait: ikut tinggi card (height:100%) + ada MIN tinggi biar portrait */
.page-news .news-card .news-thumb-ratio{
  width:100%;
  height:100%;                          /* ✅ ini kunci: ikut tinggi card */
  min-height: clamp(220px, 22vw, 360px);/* portrait tetap cakep */
  overflow:hidden;
  position:relative;
  background:#f3f4f6;                   /* opsional */
}

/* Mobile: biar gak kegedean */
@media (max-width: 767.98px){
  .page-news .news-card .news-thumb-ratio{
    height:auto;                        /* di mobile stack, tinggi ngikut min-height */
    min-height: clamp(200px, 60vw, 360px);
  }
}

/* 4) Image: paksa FULL nutup wrapper */
.page-news .news-card .news-img-ratio{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  object-position: top center;
  display:block;
}

/* (Optional) kalau hover zoom kamu ganggu, pakai ini khusus portrait */
.page-news .news-card:hover .news-img-ratio{
  transform: scale(1.04);
}

/* === PLAY ICON CENTER + WHITE (PASTE PALING BAWAH) === */

/* pastikan thumb jadi acuan overlay */
.page-news .news-card .news-thumb{
  position:relative;
}

/* overlay benar-benar center */
.page-news .news-card .play-overlay{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:10 !important;
  background:rgba(2,71,137,.45) !important; /* boleh diubah kalau mau */
  pointer-events:none !important;
}

/* circle (opsional kalau mau lebih “button”) */
.page-news .news-card .play-circle{
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(2px);
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}

/* SVG putih */
.page-news .news-card .play-icon{
  width:42px !important;
  height:42px !important;
  display:block !important;
}
.page-news .news-card .play-icon,
.page-news .news-card .play-icon path{
  fill:#fff !important;
}

/* ===== FIX: play icon benar2 center di dalam lingkaran ===== */

.page-news .news-card .play-circle{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* SVG-nya sering keliatan condong -> kasih offset halus */
.page-news .news-card .play-circle .play-icon{
  width:42px !important;
  height:42px !important;
  display:block !important;

  /* tweak posisi biar visual center */
  transform: translateX(2px);   /* adjust: 1-3px sesuai selera */
}

/* pastikan putih */
.page-news .news-card .play-icon,
.page-news .news-card .play-icon path{
  fill:#fff !important;
}

/* === PLAY: lingkaran putih solid + segitiga outline (transparan) === */

/* lingkaran putih jelas */
.page-news .news-card .play-circle{
  background:#fff !important;
  box-shadow:0 14px 32px rgba(0,0,0,.28) !important;
  border:2px solid rgba(255,255,255,.9) !important; /* biar makin tegas */
}

/* SVG: hilangkan fill, pakai stroke */
.page-news .news-card .play-icon,
.page-news .news-card .play-icon path{
  fill:transparent !important;           /* segitiga transparan */
  stroke:rgba(2,71,137,.85) !important;  /* warna garis segitiga (biru tua) */
  stroke-width:2.4 !important;           /* tebal garis */
  stroke-linejoin:round !important;
}

/* kalau mau segitiga tetap putih tapi transparan look, ganti stroke jadi putih semi */
 /* stroke:rgba(255,255,255,.75) !important; */

/* biar tetap keliatan center secara visual */
.page-news .news-card .play-circle .play-icon{
  transform: translateX(2px) !important; /* sesuaikan 1-3px */
}

/* ===== PLAY CUTOUT (lingkaran putih, segitiga bolong) ===== */

/* pastikan thumb jadi acuan overlay */
.page-news .news-card .news-thumb{
  position:relative !important;
}

/* overlay center */
.page-news .news-card .play-overlay{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:10 !important;
  background:rgba(2,71,137,.45) !important;
  pointer-events:none !important;
}

/* ukuran badge */
.page-news .news-card .play-circle{
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* SVG badge */
.page-news .news-card .play-cutout{
  width:64px;
  height:64px;
  display:block;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.25));
}

/* ===== NEWS THUMB = GALLERY THUMB STYLE ===== */

/* thumb 16:9 seperti gallery */
.page-news .news-card .news-thumb{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#000;
}

/* img full */
.page-news .news-card .news-thumb .news-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}

/* hover zoom */
.page-news .news-card:hover .news-thumb .news-img{
  transform:scale(1.08);
}

/* overlay play icon (sama persis kayak gallery) */
.page-news .news-card .play-icon{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
  color:#fff;
  background:rgba(2,71,137,.45);
  transition:background .3s ease;
  pointer-events:none;
}

.page-news .news-card:hover .play-icon{
  background:rgba(2,71,137,.55);
}

/* ===== NEWS THUMB: BALIK NORMAL (200px) + PLAY CENTER ===== */

.page-news .news-card .news-thumb{
  position:relative !important;
  width:100% !important;
  height:200px !important;          /* balik seperti sebelumnya */
  overflow:hidden !important;
  background:#000;
}

/* gambar full */
.page-news .news-card .news-thumb .news-img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  transition:transform .5s ease;
}

/* hover zoom */
.page-news .news-card:hover .news-thumb .news-img{
  transform:scale(1.08);
}

/* overlay play (khusus news, tidak bentrok gallery) */
.page-news .news-card .news-play-overlay{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(2,71,137,.45) !important;
  z-index:10 !important;
  pointer-events:none !important;
}

/* icon bener2 center */
.page-news .news-card .news-play-overlay > i{
  font-size:52px;
  color:#fff;
  line-height:1;           /* ini kunci biar gak “geser” */
  display:block;
}

/* hover overlay */
.page-news .news-card:hover .news-play-overlay{
  background:rgba(2,71,137,.55) !important;
}

/* responsive seperti dulu */
@media(max-width:768px){
  .page-news .news-card .news-thumb{ height:180px !important; }
}

/* ===== FORCE NEWS THUMB NORMAL (seperti sebelumnya) ===== */

.page-news .news-card .news-thumb{
  position:relative !important;
  width:100% !important;

  /* kunci: paksa tinggi normal */
  height:200px !important;
  min-height:200px !important;
  max-height:200px !important;

  overflow:hidden !important;
  background:#000 !important;

  /* biar gak “ketarik” flex / ratio */
  aspect-ratio:auto !important;
  flex:0 0 auto !important;
}

/* gambar harus ngisi thumb */
.page-news .news-card .news-thumb > img.news-img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* mobile ikut rule lama */
@media(max-width:768px){
  .page-news .news-card .news-thumb{
    height:180px !important;
    min-height:180px !important;
    max-height:180px !important;
  }
}

.page-news .news-card.news-clickable{ cursor:pointer; }
.page-news .news-card.news-clickable .btn-detail{ cursor:pointer; }
.page-news .news-play-overlay{ pointer-events:none !important; }

/* ===== ARTICLE VIDEO (TOP MEDIA) ===== */
.page-news .article-video__frame{
  background:#000;
  overflow:hidden;
  border-radius:24px 24px 0 0; /* nyambung sama card */
}

.page-news .article-video__thumb{
  object-fit:cover;
  display:block;
}

.page-news .article-video__frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(2,71,137,.18);
  pointer-events:none;
}

/* tombol play */
.page-news .article-video__play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:72px;
  height:72px;
  border-radius:999px;
  border:0;
  background:#fff;
  box-shadow:0 14px 32px rgba(0,0,0,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
}

.page-news .article-video__play > i{
  font-size:44px;
  line-height:1;
  color:var(--accent);
  transform:translateX(2px);
}

/* iframe fullscreen */
.page-news .article-video__iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  z-index:4;
}

.news-thumb{position:relative; overflow:hidden;}
.news-file-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(2,71,137,.35);
  color:#fff;
  font-size:42px;
  pointer-events:none;
}

/* === FIX: Logo fallback jangan kepotong === */
.news-thumb{
  overflow: hidden; /* biar radius card rapi */
}

/* default gambar konten tetap cover */
.news-thumb img.news-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* ✅ khusus fallback logo: paksa contain + padding */
.news-thumb img.news-img.is-fallback-logo{
  object-fit: contain !important;
  object-position: center !important;
  padding: 20px !important;
  background: #fff !important;
}

/* =========================================
   NAVBAR AUTO HIDE ON SCROLL
   tempel PALING BAWAH CSS
========================================= */
.navbar-auto-hide{
  transform: translateY(0);
  transition: transform .26s ease, box-shadow .26s ease, background-color .26s ease;
  will-change: transform;
}

/* saat scroll turun -> hide */
.navbar-auto-hide.navbar--hidden{
  transform: translateY(-110%);
  box-shadow: none !important;
}

/* saat muncul -> kasih shadow biar tegas */
.navbar-auto-hide.navbar--shown{
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

/* optional: kalau kamu mau navbar sedikit transparan saat scroll
.navbar-auto-hide.navbar--shown{
  background: rgba(2,71,137,.96) !important;
  backdrop-filter: blur(6px);
}
*/