body {
  font-family: 'Montserrat', sans-serif;
}

/*
h1, h2, h3, h4, h5 {
  font-family: 'Playfair Display', serif;
}
*/
/* ===== Global Hyperlink Style ===== */

/* Token link – bisa kamu override dari tema */
:root{
  --link-color:        var(--brand-primary);
  --link-color-hover:  color-mix(in srgb, var(--brand-primary) 92%, white);
  --link-color-active: color-mix(in srgb, var(--brand-primary) 80%, black);
  --link-underline:    color-mix(in srgb, var(--brand-primary) 55%, transparent);
}

/* Base: berlaku untuk semua <a> kecuali yang punya class .btn, .nav-link, .dropdown-item */
a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.navbar-brand):not(.badge){
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .5em;
  text-decoration-color: var(--link-underline);
  transition:
    color .18s ease,
    text-decoration-color .18s ease,
    text-underline-offset .18s ease;
}

/* Hover: warna sedikit lebih terang + underline makin “turun” */
a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.navbar-brand):not(.badge):hover{
  color: var(--link-color-hover);
  text-underline-offset: .28em;
  text-decoration-color: currentColor;
}

/* Active: lebih kontras saat diklik */
a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.navbar-brand):not(.badge):active{
  color: var(--link-color-active);
}

/* Visited: sedikit meredup (opsional, bisa dihapus jika tak diinginkan) */
a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.navbar-brand):not(.badge):visited{
  color: color-mix(in srgb, var(--brand-primary) 85%, gray);
}

/* Focus visible: ring yang jelas untuk keyboard user */
a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.navbar-brand):not(.badge):focus-visible{
  outline: none;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-primary) 25%, transparent);
  border-radius: .25rem;
}

/* Hormati preferensi pengguna yang tidak suka animasi */
@media (prefers-reduced-motion: reduce){
  a{ transition: none !important; }
}

/* ===== Varian opsional ===== */

/* 1) .link-fancy – underline animasi slide-in pakai background */
.link-fancy{
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color .2s ease, background-size .22s ease;
}
.link-fancy:hover{
  color: var(--link-color-hover);
  background-size: 100% 2px;
}

/* 2) .link-arrow – panah kecil muncul saat hover */
.link-arrow{
  position: relative;
  text-decoration-thickness: .08em;
}
.link-arrow::after{
  opacity: 0;
  transform: translateX(.15em);
  margin-left: .15rem;
  transition: opacity .18s ease, transform .18s ease;
}
.link-arrow:hover::after{
  opacity: 1;
  transform: translateX(0);
}

/* Non-underline untuk item navigasi (biar navbar tetap bersih) */
.navbar a, .dropdown-item{
  text-decoration: none !important;
}

.bg-primary      { background: var(--brand-primary)!important; color: var(--on-primary)!important; }
.bg-secondary  { background: var(--brand-secondary)!important; color: var(--on-secondary)!important; }
.bg-accent     { background: var(--brand-accent)!important; color: var(--on-accent)!important; }
.bg-darkbrand  { background: var(--brand-dark)!important; color: var(--on-dark)!important; }
.bg-light      { background: var(--brand-light)!important; color: var(--on-light)!important; }

.color-primary { color: var(--brand-primary) !important; }
.color-secondary { color: var(--brand-secondary) !important; }
.color-accent { color: var(--brand-accent) !important; }
.color-dark { color: var(--brand-dark) !important; }
.color-light { color: var(--brand-light) !important; }
.color-on-primary { color: var(--on-primary) !important; }
.color-on-secondary { color: var(--on-secondary) !important; }
.color-on-accent { color: var(--on-accent) !important; }
.color-on-dark { color: var(--on-dark) !important; }
.color-on-light { color: var(--on-light) !important; }


/* Dasar Navbar */

.navbar-brand img { height: 42px; }

/* =========================
   NAVBAR LINK STYLE (Bootstrap 5)
   ========================= */

/* Token warna navbar (ikuti tema) */
.navbar{
  --nav-link: var(--brand-dark);
  --nav-link-hover: var(--brand-primary);
  --nav-link-active: var(--brand-primary);
  --nav-underline: color-mix(in srgb, var(--brand-primary) 50%, transparent);
}

/* Brand */
.navbar .navbar-brand{
  font-weight: 700;
  color: var(--nav-link);
  transition: color .18s ease;
}
.navbar .navbar-brand:hover{ color: var(--nav-link-hover); }

/* Link utama */
.navbar .nav-link{
  position: relative;
  color: var(--nav-link);
  text-decoration: none !important;
  padding: .6rem .75rem;
  transition: color .18s ease;
}

/* Underline animasi */
.navbar .nav-link::after{
  content:"";
  position: absolute;
  left: .75rem; right: .75rem; bottom: .45rem;
  height: 2px; border-radius: 2px;
  background: var(--nav-underline);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease, background-color .18s ease;
}

/* Hover */
.navbar .nav-link:hover{
  color: var(--nav-link-hover);
}
.navbar .nav-link:hover::after{
  transform: scaleX(1);
  background: currentColor;
}

/* Active/current */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"]{
  color: var(--nav-link-active);
}
.navbar .nav-link.active::after,
.navbar .nav-link[aria-current="page"]::after{
  transform: scaleX(1);
  background: currentColor;
}

/* Focus (aksesibilitas keyboard) */
.navbar .nav-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-primary) 25%, transparent);
  border-radius: .375rem;
}

/* Dropdown */
.navbar .dropdown-menu{
  border: 0;
  padding: .4rem;
  border-radius: .75rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
}
.navbar .dropdown-item{
  border-radius: .5rem;
  padding: .55rem .75rem;
  transition: background-color .16s ease, color .16s ease;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  color: var(--brand-primary);
}
.navbar .dropdown-item.active{
  background: color-mix(in srgb, var(--brand-primary) 18%, transparent);
  color: var(--brand-primary);
}

/* Varian: navbar transparan di atas hero (tulisan putih), balik normal saat di-scroll */
.navbar-ghost{ background: transparent !important; }
.navbar-ghost,
.navbar-ghost .offcanvas{
  --nav-link: #fff;
  --nav-link-hover: #fff;
  --nav-link-active: #fff;
  --nav-underline: rgba(255,255,255,.72);
}
.navbar-sticky.scrolled.navbar-ghost{
  background: #fff !important;
  --nav-link: var(--brand-dark);
  --nav-link-hover: var(--brand-primary);
  --nav-link-active: var(--brand-primary);
  --nav-underline: color-mix(in srgb, var(--brand-primary) 50%, transparent);
}

/* Offcanvas/mobile */
.offcanvas .nav-link{ padding: .75rem 1rem; font-size: 1.05rem; }
.offcanvas .dropdown-menu{ box-shadow: none; border: 0; padding: 0; }

/* Hormati preferensi pengguna */
@media (prefers-reduced-motion: reduce){
  .navbar .nav-link,
  .navbar .nav-link::after,
  .navbar .dropdown-item{ transition: none !important; }
}


/* State saat discroll */
.navbar-sticky.scrolled{
  background: var(--brand-primary) !important;
  color: var(--on-primary);
  /* Sinkronkan warna komponen Bootstrap */
  --bs-navbar-color: var(--on-primary);
  --bs-navbar-hover-color: var(--on-primary);
  --bs-navbar-active-color: var(--on-primary);
  --bs-navbar-brand-color: var(--on-primary);
  --bs-navbar-toggler-border-color: color-mix(in srgb, var(--on-primary) 35%, transparent);
}

/* Link & brand mengikuti --on-primary */
.navbar-sticky.scrolled .navbar-brand,
.navbar-sticky.scrolled .nav-link{
  color: var(--on-primary) !important;
}

/* Hover underline tetap terlihat di atas primary */
.navbar-sticky.scrolled .nav-link::after{
  background: color-mix(in srgb, var(--on-primary) 55%, transparent);
}
.navbar-sticky.scrolled .nav-link:hover{
  color: color-mix(in srgb, var(--on-primary) 85%, transparent) !important;
}

/* Dropdown: biarkan tetap terang agar terbaca */
.navbar-sticky.scrolled .dropdown-menu{
  border: 0;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}

/* ================================
   NAVBAR .btn-brand (outline pill)
   ================================ */

/* Default (belum .scrolled) */
.navbar .btn-brand{
  --btn-border: var(--brand-primary);
  --btn-text:   var(--brand-primary);

  background: transparent !important;
  color: var(--btn-text) !important;
  border: 2px solid var(--btn-border) !important;
  border-radius: 999px;
  padding: .45rem .95rem;
  font-weight: 600;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  box-shadow: none;
  transition:
    color .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

/* Hover/active state (tetap transparan, hanya ada tint tipis) */
.navbar .btn-brand:hover{
  background: color-mix(in srgb, var(--btn-text) 12%, transparent) !important;
}
.navbar .btn-brand:active{
  background: color-mix(in srgb, var(--btn-text) 18%, transparent) !important;
}

/* Focus ring untuk aksesibilitas */
.navbar .btn-brand:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--btn-text) 28%, transparent);
}

/* Saat navbar sudah .scrolled → warna mengikuti --on-primary */
.navbar-sticky.scrolled .btn-brand{
  --btn-border: var(--on-primary);
  --btn-text:   var(--on-primary);
  background: transparent !important;
  color: var(--btn-text) !important;
  border-color: var(--btn-border) !important;
}
.navbar-sticky.scrolled .btn-brand:hover{
  background: color-mix(in srgb, var(--on-primary) 12%, transparent) !important;
}
.navbar-sticky.scrolled .btn-brand:active{
  background: color-mix(in srgb, var(--on-primary) 18%, transparent) !important;
}

/* Mobile/offcanvas: biar enak dipencet */
.offcanvas .btn-brand{
  width: 100%;
  justify-content: center;
  padding: .65rem 1rem;
}

/* Hormati preferensi tanpa animasi */
@media (prefers-reduced-motion: reduce){
  .navbar .btn-brand{ transition: none !important; }
}


/* ==========================
   Offcanvas (mobile menu)
   ========================== */

/* Saat navbar BELUM .scrolled → biarkan default (tidak perlu aturan khusus) */

/* Saat navbar SUDAH .scrolled */
.navbar-sticky.scrolled .offcanvas{
  /* Bootstrap var override */
  --bs-offcanvas-bg: var(--brand-primary);

  background: var(--brand-primary) !important;
  color: var(--on-primary);
  border: 0; /* bersihkan garis default */
}

/* Header: title & tombol close ikut --on-primary */
.navbar-sticky.scrolled .offcanvas .offcanvas-title{
  color: var(--on-primary);
}
.navbar-sticky.scrolled .offcanvas .btn-close{
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .9;
}
.navbar-sticky.scrolled .offcanvas .btn-close:hover{
  opacity: 1;
}

/* Link & item menu */
.navbar-sticky.scrolled .offcanvas .nav-link,
.navbar-sticky.scrolled .offcanvas .dropdown-item{
  color: var(--on-primary) !important;
  text-decoration: none;
  border-radius: .5rem;
  transition: background-color .16s ease, color .16s ease;
}

/* Hover/active state: sedikit tint agar tetap terbaca */
.navbar-sticky.scrolled .offcanvas .nav-link:hover,
.navbar-sticky.scrolled .offcanvas .dropdown-item:hover{
  background: color-mix(in srgb, var(--on-primary) 14%, transparent);
  color: var(--on-primary) !important;
}

/* Focus ring (aksesibilitas keyboard) */
.navbar-sticky.scrolled .offcanvas .nav-link:focus-visible,
.navbar-sticky.scrolled .offcanvas .dropdown-item:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--on-primary) 28%, transparent);
}

/* CTA di dalam offcanvas ikut on-primary (outline, transparan) */
.navbar-sticky.scrolled .offcanvas .btn-brand{
  --btn-border: var(--on-primary);
  --btn-text:   var(--on-primary);
  background: transparent !important;
  color: var(--btn-text) !important;
  border: 2px solid var(--btn-border) !important;
  border-radius: 999px;
  width: 100%;
  justify-content: center;
}

/* Hormati preferensi tanpa animasi */
@media (prefers-reduced-motion: reduce){
  .navbar-sticky.scrolled .offcanvas .nav-link,
  .navbar-sticky.scrolled .offcanvas .dropdown-item{ transition: none !important; }
}

/* ===== Hover glow untuk .btn-brand ===== */

/* 1) DEFAULT (belum .scrolled) → glow pakai brand-primary */
.navbar .btn-brand:hover{
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent) !important;
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--brand-primary) 28%, transparent);
}
.navbar .btn-brand:active{
  background: color-mix(in srgb, var(--brand-primary) 18%, transparent) !important;
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--brand-primary) 34%, transparent);
}

/* Offcanvas (mobile) – sebelum .scrolled tetap ikut brand-primary */
.offcanvas .btn-brand:hover{
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent) !important;
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--brand-primary) 28%, transparent);
}
.offcanvas .btn-brand:active{
  background: color-mix(in srgb, var(--brand-primary) 18%, transparent) !important;
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--brand-primary) 34%, transparent);
}

/* 2) SAAT .scrolled → override glow jadi putih redup */
.navbar-sticky.scrolled .btn-brand:hover{
  background: rgba(255,255,255,.12) !important;
  box-shadow: 0 0 0 .18rem rgba(255,255,255,.22);
}
.navbar-sticky.scrolled .btn-brand:active{
  background: rgba(255,255,255,.18) !important;
  box-shadow: 0 0 0 .22rem rgba(255,255,255,.26);
}

/* Offcanvas saat .scrolled */
.navbar-sticky.scrolled .offcanvas .btn-brand:hover{
  background: rgba(255,255,255,.12) !important;
  box-shadow: 0 0 0 .18rem rgba(255,255,255,.22);
}
.navbar-sticky.scrolled .offcanvas .btn-brand:active{
  background: rgba(255,255,255,.18) !important;
  box-shadow: 0 0 0 .22rem rgba(255,255,255,.26);
}

/* Hormati preferensi tanpa animasi */
@media (prefers-reduced-motion: reduce){
  .navbar .btn-brand,
  .offcanvas .btn-brand{ transition: none !important; }
}


.hero {
  background: linear-gradient(rgba(10,77,162,.55), rgba(10,77,162,.55));
}
/* ==========================
   Badge
   ========================== */

/* Base */
.badge{
  --_bg: var(--brand-primary);
  --_text: var(--on-primary, #fff);
  --_bd: color-mix(in srgb, var(--_bg) 78%, transparent);

  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .66rem;
  border-radius: 0 !important;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  background: var(--_bg);
  color: var(--_text);
  border: 1px solid var(--_bd);
  vertical-align: middle;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Variants (solid) */
.badge-primary  { --_bg: var(--brand-primary);  --_text: var(--on-primary, #fff); }
.badge-secondary{ --_bg: var(--brand-secondary);--_text: var(--on-secondary, #0b132b); }
.badge-accent   { --_bg: var(--brand-accent);   --_text: var(--on-accent, #fff); }
.badge-dark     { --_bg: var(--brand-dark);     --_text: var(--on-dark, #fff); }
.badge-light    { --_bg: var(--brand-light);    --_text: var(--on-light, #0b132b); }

/* Border halus utk light supaya tidak "lenyap" di latar putih */
.badge-light{ border-color: color-mix(in srgb, var(--brand-dark) 6%, var(--brand-light)); }

/* Interaksi (kalau badge dijadikan link <a class="badge ...">) */
a.badge {
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
a.badge:hover{
  transform: translateY(-2px); /* <-- Tambahkan baris ini */
  filter: brightness(.98);
  /* box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--_text) 22%, transparent); */
  text-decoration: none;
}
a.badge:active{
  filter: brightness(.96);
  /* box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--_text) 28%, transparent); */
}
a.badge:focus-visible{
  outline: none;
  /* box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--_text) 32%, transparent); */
}

/* Ikon kecil di dalam badge (opsional) */
.badge .bi,
.badge [class*="fa-"]{ font-size: .9em; line-height: 1; }

/* ==========================
   Badge Shape Variants
   Default: square (no radius)
   ========================== */

/* Default: kotak */
.badge{
  border-radius: 0 !important; /* override style sebelumnya */
}

/* Varian: rounded (sedang) */
.badge.rounded{
  border-radius: .5rem !important; /* ≈8px */
}

/* Varian: rounded-pill (oval/pill) */
.badge.rounded-pill{
  border-radius: 999px !important;
  padding-left: .75rem;   /* sedikit ekstra biar proporsional */
  padding-right: .75rem;
}

/* (Opsional) kalau ada utilitas global yg nempel radius,
   pastikan .badge tetap ikut varian yang dipilih */
.badge.rounded[class*="rounded-"]{ border-radius: .5rem !important; }
.badge.rounded-pill[class*="rounded-"]{ border-radius: 999px !important; }


/* ==========================
   KONTEN General
   ========================== */
.eyebrow { color: var(--brand-secondary); font-weight: 600; text-transform: uppercase;}
.values .icon .bi {
  color: var(--brand-secondary);
}

.btn-brand  { background: transparent; }
.btn-sub-brand { background-color: var(--brand-primary); color: var(--on-primary); border: none; }
.btn-sub-brand:hover {  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--brand-primary) 88%, transparent); color: var(--brand-primary); }
.btn-ghost { border: 2px solid var(--on-dark); color: var(--on-dark); background: transparent; }
.btn-ghost:hover{ background: rgba(255,255,255,0.12); color: var(--on-dark); }

.btn-secondary-brand { background-color: var(--brand-secondary); color: var(--on-secondary); border: none; }
.btn-secondary-brand:hover {  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--brand-secondary) 88%, transparent); color: var(--brand-secondary); }

.btn:hover .bi.bi-heart {
  color:red !important;
}

.btn:hover .bi.bi-heart-fill {
  color:red !important;
}


/* ==========================
   Testimoni
   ========================== */

#testimoni .blockquote, #testimoni .blockquote-footer {
  color: var(--on-secondary);
}


/* ==========================
   Footer
   ========================== */

.footer a {
  color: var(--on-dark) !important;
  text-decoration-color: var(--on-dark) !important;
}


/* ===== Testimoni (avatar) ===== */
    .testimonial-figure { max-width: 760px; }
    .testimonial-quote { font-size: clamp(1.05rem, .7vw + 1rem, 1.35rem); line-height: 1.6; }
    .testimonial-avatar { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; }

/* Hero 404 */
.hero-404{
  position:relative; min-height:72vh; display:grid; place-items:center; color:#fff; text-align:center;
  background: linear-gradient(rgb(214 3 3 / 75%), rgba(10, 77, 162, .75));
}
.hero-404 .eyebrow{ color:var(--brand-secondary); text-transform:uppercase; font-weight:700; letter-spacing:.12em; font-size:.85rem;}
.hero-404 .headline{ font-size: clamp(2.8rem, 6vw + 1rem, 6rem); font-weight:800; line-height:1; letter-spacing:.5px;}
.hero-404 .subhead{ font-size: clamp(1rem, 1.2vw + .6rem, 1.25rem); opacity:.95; }
.code-badge{
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .75rem; border-radius:999px;
  background:rgba(255,255,255,.14); backdrop-filter:saturate(180%) blur(6px);
  font-weight:700;
}



/* ===== NEWS ===== */
.breadcumb  {
  padding-bottom: 10px ;
  margin-top:10px;
}

.card-post{border:none; border-radius:1rem; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.06); transition:transform .15s ease, box-shadow .15s ease}
.card-post:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.09)}
.card-post .meta{font-size:.85rem}
.card-post .category{background:var(--brand-light); color:var(--on-light)}

.pagination .page-link{color:var(--brand-primary)}
.pagination .page-item.active .page-link{background:var(--brand-primary); border-color:var(--brand-primary); color:var(--on-primary)}

/* HERO dengan cover image */
.hero-post{position:relative; min-height:46vh; display:flex; align-items:end; color:var(--on-primary);}
.hero-post .media{position:absolute; inset:0; background-size:cover; background-position:center;}
.hero-post .overlay{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.45));}
.hero-post .content{position:relative; padding:3.5rem 0;}