/* Ukuran dasar H1 hero */
.banner-hilight {
    line-height: 1.08;
}

.banner-hilight.display-1 {
    font-size: clamp(28px, 8vw, 56px);
}

/* skala responsif */

/* Baris 1: title_1 (besar) */
.banner-hilight>span:nth-of-type(1) {
    display: block;
    font-size: clamp(22px, 6.2vw, 48px);
}

/* Baris 2: title_2 (pill teal) */
.banner-hilight>span:nth-of-type(2) {
    display: inline-block;
    white-space: nowrap;
    /* jangan pecah 2 baris */
    font-size: clamp(18px, 5.2vw, 40px);
    /* sedikit lebih kecil dari baris 1 */
    padding: .35rem .75rem !important;
    /* override px-5 bootstrap */
    border-radius: .75rem;
}

/* Baris 3: title_3 (lebih kecil & 1 baris) */
.banner-hilight>span:nth-of-type(3) {
    display: block;
    white-space: nowrap;
    /* paksa satu baris */
    font-size: clamp(16px, 4.6vw, 34px);
    /* PALING KECIL di antara 3 baris */
    letter-spacing: .2px;
    /* rapatkan sedikit */
}

/* Finetune ekstra untuk layar kecil */
@media (max-width: 576px) {
    .banner-hilight>span:nth-of-type(1) {
        font-size: clamp(20px, 8vw, 36px);
    }

    .banner-hilight>span:nth-of-type(2) {
        font-size: clamp(16px, 7vw, 30px);
    }

    .banner-hilight>span:nth-of-type(3) {
        font-size: clamp(14px, 6.2vw, 26px);
    }
}

/* Opsional: bikin pemenggalan baris (selain baris 2 & 3) lebih “cantik” */
@supports (text-wrap: balance) {
    .banner-hilight {
        text-wrap: balance;
    }
}

/* hilangkan efek <br> di dalam judul */
.banner-hilight br {
    display: none;
}

/* stack baris pakai block + kontrol jarak rapi */
.banner-hilight>span {
    display: block;
    margin: 0;
}

/* jarak antarbaris konsisten (sesuaikan kalau mau) */
.banner-hilight>span+span {
    margin-top: .35rem;
}

/* pastikan tidak ada margin atas bawaan h1 */
.banner-hilight {
    margin-top: 0;
}

/* --- RAPETKAN STACK 3 BARIS HERO --- */

/* hilangkan efek <br> + samakan perilaku semua span */
.banner-hilight br {
    display: none;
}

.banner-hilight>span {
    display: block;
    margin: 0;
}

/* jarak antarbaris default (rapat) */
.banner-hilight>span+span {
    margin-top: .18rem;
}

/* baris ke-2 (pill hijau): tipiskan padding agar tidak mendorong baris ke-3 */
.banner-hilight>span:nth-of-type(2) {
    padding: .18rem .70rem !important;
    /* semula .35rem */
    border-radius: .75rem;
}

/* baris ke-3: paksa satu baris & rapetin sedikit lagi */
.banner-hilight>span:nth-of-type(3) {
    white-space: nowrap;
    margin-top: .12rem;
    /* ekstra rapat dari baris ke-2 */
}

/* fine-tune khusus mobile */
@media (max-width:576px) {
    .banner-hilight.display-1 {
        line-height: 1.04;
    }

    /* sedikit lebih rapat */
    .banner-hilight>span:nth-of-type(2) {
        padding: .16rem .64rem !important;
    }

    .banner-hilight>span:nth-of-type(3) {
        margin-top: .10rem;
    }
}

/* opsional: beri jarak wajar ke subjudul */
.banner-subtitle {
    margin-top: .5rem;
}

/* --- angkat title_1 & atur jarak antarbaris --- */

/* angkat keseluruhan judul sedikit (khusus mobile) */
@media (max-width: 576px) {
    .banner-hilight {
        margin-top: -6px;
    }

    /* naikkan; boleh ubah ke -8/-10px jika perlu */
}

/* jarak dari baris 1 -> 2 (lebih rapat) */
.banner-hilight>span:nth-of-type(2) {
    margin-top: .10rem;
    /* sebelumnya .18rem */
}

/* jarak dari baris 2 -> 3 (tetap rapat) */
.banner-hilight>span:nth-of-type(3) {
    margin-top: .08rem;
    /* sesuaikan kalau mau lebih rapat/longgar */
}

/* ===== MOBILE SIDEBAR (offcanvas) ===== */
:root {
    --sidebar-bg: #0f1620;
    /* hitam kebiruan */
    --sidebar-fg: #fff;
    --sidebar-accent: var(--bs-primary, #57b7b0);
    /* teal brand */
}

.offcanvas,
.offcanvas-start {
    background: var(--sidebar-bg) !important;
    color: var(--sidebar-fg) !important;
}

/* link/menu item */
.offcanvas a,
.offcanvas .nav-link,
.offcanvas .list-group-item {
    color: var(--sidebar-fg) !important;
    background: transparent !important;
    border: 0 !important;
    padding: .7rem 1rem;
    border-radius: .6rem;
    transition: background .15s ease, color .15s ease;
}

/* hover / focus */
.offcanvas a:hover,
.offcanvas .nav-link:hover,
.offcanvas a:focus,
.offcanvas .nav-link:focus {
    background: color-mix(in srgb, var(--sidebar-accent) 18%, transparent) !important;
    color: #fff !important;
}

/* state aktif: HILANGKAN UNGU, pakai teal lembut + garis aksen kiri */
.offcanvas .active,
.offcanvas .nav-link.active,
.offcanvas .list-group-item.active {
    color: #fff !important;
    background: color-mix(in srgb, var(--sidebar-accent) 26%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--sidebar-accent);
    border-radius: .6rem;
}

/* ikon ikut warna teks/teal */
.offcanvas i,
.offcanvas svg {
    color: currentColor !important;
}

/* pemisah & tombol close */
.offcanvas hr {
    border-color: rgba(255, 255, 255, .12) !important;
}

.offcanvas .btn-close {
    filter: invert(1) opacity(.85);
}

/* kalau template ada kelas khusus ungu, paksa matikan */
.offcanvas .bg-purple,
.offcanvas .bg-violet {
    background: transparent !important;
}

/* ========== FRONTEND NAVBAR (DESKTOP) – balikin teks gelap ========== */
@media (min-width: 992px) {

    /* semua link navbar frontend (bukan backend) */
    body:not(.backend) .navbar.navbar-light .navbar-nav .nav-link,
    body:not(.backend) .navbar .nav-link {
        color: #0f1620 !important;
        /* teks gelap */
        background: transparent !important;
    }

    /* hover/focus pakai teal lembut */
    body:not(.backend) .navbar .nav-link:hover,
    body:not(.backend) .navbar .nav-link:focus {
        color: #0f1620 !important;
        background: rgba(87, 183, 176, .14) !important;
        /* teal 14% */
        border-radius: .5rem;
    }

    /* state aktif (menu yang “Home” itu) */
    body:not(.backend) .navbar .nav-link.active,
    body:not(.backend) .navbar .nav-link.show {
        color: #0f1620 !important;
        background: rgba(87, 183, 176, .18) !important;
        /* sedikit lebih tebal */
        border-radius: .5rem;
        box-shadow: inset 0 -2px 0 rgba(87, 183, 176, .45);
    }

    /* caret/ikon ikut warna teks */
    body:not(.backend) .navbar .nav-link i,
    body:not(.backend) .navbar .nav-link svg {
        color: currentColor !important;
    }
}

/* FRONTEND navbar (MOBILE) – biarkan seperti semula (teks gelap di bg putih) */
@media (max-width: 991.98px) {
    body:not(.backend) .navbar .nav-link {
        color: #0f1620 !important;
    }
}

/* kalau ada kelas text-bg-dark nyasar di frontend navbar, netralkan */
body:not(.backend) .navbar .text-bg-dark {
    background-color: transparent !important;
    color: #0f1620 !important;
}

/* ===== FRONTEND: perbaiki offcanvas (mobile navbar) ===== */
@media (max-width: 991.98px) {

    /* pastikan panel offcanvas-nya putih (bukan transparan) */
    body:not(.backend) .navbar .offcanvas,
    body:not(.backend) .navbar .offcanvas.text-bg-dark {
        background: #fff !important;
        color: #0f1620 !important;
    }

    /* link dalam offcanvas: teks gelap + hover/active teal lembut */
    body:not(.backend) .navbar .offcanvas .nav-link {
        color: #0f1620 !important;
        background: transparent !important;
    }

    body:not(.backend) .navbar .offcanvas .nav-link:hover,
    body:not(.backend) .navbar .offcanvas .nav-link:focus,
    body:not(.backend) .navbar .offcanvas .nav-link.active {
        background: rgba(87, 183, 176, .14) !important;
        /* teal 14% */
        color: #0f1620 !important;
        border-radius: .5rem;
    }

    /* tombol close jangan putih invert penuh (biar terlihat) */
    body:not(.backend) .navbar .offcanvas .btn-close {
        filter: invert(0) opacity(.65);
    }
}

/* jangan jadikan semua .text-bg-dark di navbar transparan – kecuali bukan offcanvas */
body:not(.backend) .navbar>.text-bg-dark {
    background-color: transparent !important;
    color: #0f1620 !important;
}

/* ================== FRONTEND OFFCANVAS (MOBILE) ================== */
/* Pilih SALAH SATU tema: A (teal solid, teks putih) atau B (teal muda, teks gelap) */

@media (max-width: 991.98px) {

    /* ===== Tema A: TEAL solid + teks putih ===== */
    body:not(.backend) .navbar .offcanvas {
        background: #57b7b0 !important;
        /* brand teal */
        color: #fff !important;
    }

    body:not(.backend) .navbar .offcanvas .nav-link {
        color: #fff !important;
        background: transparent !important;
        border-radius: .6rem;
    }

    body:not(.backend) .navbar .offcanvas .nav-link:hover,
    body:not(.backend) .navbar .offcanvas .nav-link:focus,
    body:not(.backend) .navbar .offcanvas .nav-link.active {
        background: rgba(255, 255, 255, .18) !important;
        /* highlight lembut */
        color: #fff !important;
    }

    /* brand & tombol close ikut putih */
    body:not(.backend) .navbar .offcanvas .navbar-brand,
    body:not(.backend) .navbar .offcanvas .navbar-brand *,
    body:not(.backend) .navbar .offcanvas .btn-close {
        filter: invert(1) brightness(1.1);
    }

    /* ===== Tema B: TEAL MUDA + teks gelap ===== */
    /* >>> kalau pilih Tema B, KOMENTARI blok Tema A di atas, lalu UNKOMENT baris di bawah <<< */
    
  body:not(.backend) .navbar .offcanvas {
    background: #eaf6f5 !important;  
    color: #0f1620 !important;
  }
  body:not(.backend) .navbar .offcanvas .nav-link{
    color: #0f1620 !important;
    background: transparent !important;
    border-radius: .6rem;
  }
  body:not(.backend) .navbar .offcanvas .nav-link:hover,
  body:not(.backend) .navbar .offcanvas .nav-link:focus,
  body:not(.backend) .navbar .offcanvas .nav-link.active{
    background: rgba(87,183,176,.18) !important;
    color: #0f1620 !important;
  }
  body:not(.backend) .navbar .offcanvas .btn-close{
    filter: invert(0) opacity(.65);
  }
 
}

/* ===== FRONTEND – OFFCANVAS (MOBILE) DARK THEME ===== */
@media (max-width: 991.98px) {

    /* Panel offcanvas & warna dasar */
    body:not(.backend) .navbar .offcanvas {
        background: #0f1620 !important;
        /* hitam kebiruan */
        color: #fff !important;
    }

    /* Teks/link di dalam offcanvas */
    body:not(.backend) .navbar .offcanvas .nav-link,
    body:not(.backend) .navbar .offcanvas a,
    body:not(.backend) .navbar .offcanvas p,
    body:not(.backend) .navbar .offcanvas li {
        color: #fff !important;
        background: transparent !important;
    }

    /* Hover / Active: teal lembut, tetap teks putih */
    body:not(.backend) .navbar .offcanvas .nav-link:hover,
    body:not(.backend) .navbar .offcanvas .nav-link:focus,
    body:not(.backend) .navbar .offcanvas .nav-link.active {
        background: rgba(87, 183, 176, .22) !important;
        /* teal 22% */
        color: #fff !important;
        border-radius: .6rem;
        box-shadow: inset 3px 0 0 var(--bs-primary, #57b7b0);
    }

    /* Ikon/caret ikut warna teks */
    body:not(.backend) .navbar .offcanvas .nav-link i,
    body:not(.backend) .navbar .offcanvas .nav-link svg {
        color: currentColor !important;
    }

    /* Brand & tombol close kontras di dark */
    body:not(.backend) .navbar .offcanvas .navbar-brand,
    body:not(.backend) .navbar .offcanvas .navbar-brand * {
        color: #fff !important;
    }

    body:not(.backend) .navbar .offcanvas .btn-close {
        filter: invert(1) brightness(1.1);
    }

    /* Dropdown bahasa (kalau ada) ikut dark */
    body:not(.backend) .navbar .offcanvas .dropdown-menu {
        background: #121923 !important;
        border-color: rgba(255, 255, 255, .12) !important;
    }

    body:not(.backend) .navbar .offcanvas .dropdown-item {
        color: #eaf5f4 !important;
    }

    body:not(.backend) .navbar .offcanvas .dropdown-item:hover,
    body:not(.backend) .navbar .offcanvas .dropdown-item:focus {
        background: rgba(87, 183, 176, .22) !important;
        color: #fff !important;
    }
}

/* ===== FRONTEND MOBILE OFFCANVAS -> DARK (hitam + teks putih) ===== */
@media (max-width: 991.98px) {

    /* Paksa panel & bagian dalamnya gelap */
    body:not(.backend) .navbar-collapse.offcanvas,
    body:not(.backend) .offcanvas.offcanvas-start,
    body:not(.backend) .offcanvas.offcanvas-end,
    body:not(.backend) .offcanvas.offcanvas-top,
    body:not(.backend) .offcanvas.offcanvas-bottom,
    body:not(.backend) .offcanvas.offcanvas-nav,
    body:not(.backend) .offcanvas.text-bg-dark {
        background-color: #0f1620 !important;
        color: #fff !important;
    }

    body:not(.backend) .offcanvas .offcanvas-header,
    body:not(.backend) .offcanvas .offcanvas-body {
        background-color: transparent !important;
        /* tetap gelap, transparan dari container */
        color: inherit !important;
    }

    /* Teks/link di menu */
    body:not(.backend) .offcanvas .nav-link,
    body:not(.backend) .offcanvas a,
    body:not(.backend) .offcanvas p,
    body:not(.backend) .offcanvas li {
        color: #fff !important;
        background: transparent !important;
    }

    /* Hover/active highlight teal */
    body:not(.backend) .offcanvas .nav-link:hover,
    body:not(.backend) .offcanvas .nav-link:focus,
    body:not(.backend) .offcanvas .nav-link.active {
        background: rgba(87, 183, 176, .22) !important;
        /* teal 22% */
        color: #fff !important;
        border-radius: .6rem;
        box-shadow: inset 3px 0 0 var(--bs-primary, #57b7b0);
    }

    /* Ikon & tombol close kontras di dark */
    body:not(.backend) .offcanvas .nav-link i,
    body:not(.backend) .offcanvas .nav-link svg {
        color: currentColor !important;
    }

    body:not(.backend) .offcanvas .btn-close {
        filter: invert(1) brightness(1.1);
    }

    /* Dropdown (jika ada) ikut dark */
    body:not(.backend) .offcanvas .dropdown-menu {
        background: #121923 !important;
        border-color: rgba(255, 255, 255, .12) !important;
    }

    body:not(.backend) .offcanvas .dropdown-item {
        color: #eaf5f4 !important;
    }

    body:not(.backend) .offcanvas .dropdown-item:hover,
    body:not(.backend) .offcanvas .dropdown-item:focus {
        background: rgba(87, 183, 176, .22) !important;
        color: #fff !important;
    }
}

/* ===== FRONTEND – MOBILE OFFCANVAS: HITAM + TEKS PUTIH ===== */
@media (max-width: 991.98px) {

    /* paksa var bootstrap untuk offcanvas */
    body:not(.backend) .navbar .offcanvas,
    body:not(.backend) .offcanvas {
        --bs-offcanvas-bg: #0f1620 !important;
        /* <-- ini kuncinya */
        --bs-offcanvas-color: #fff !important;
        --bs-offcanvas-border-color: rgba(255, 255, 255, .12) !important;

        background-color: var(--bs-offcanvas-bg) !important;
        color: var(--bs-offcanvas-color) !important;
    }

    /* link/menu di dalam offcanvas */
    body:not(.backend) .offcanvas .nav-link,
    body:not(.backend) .offcanvas a,
    body:not(.backend) .offcanvas p,
    body:not(.backend) .offcanvas li {
        color: var(--bs-offcanvas-color) !important;
        background: transparent !important;
    }

    /* hover/active: highlight teal */
    body:not(.backend) .offcanvas .nav-link:hover,
    body:not(.backend) .offcanvas .nav-link:focus,
    body:not(.backend) .offcanvas .nav-link.active {
        background: rgba(87, 183, 176, .22) !important;
        color: #fff !important;
        border-radius: .6rem;
        box-shadow: inset 3px 0 0 var(--bs-primary, #57b7b0);
    }

    /* tombol close & ikon */
    body:not(.backend) .offcanvas .btn-close {
        filter: invert(1) brightness(1.1);
    }

    body:not(.backend) .offcanvas .nav-link i,
    body:not(.backend) .offcanvas .nav-link svg {
        color: currentColor !important;
    }
}

/* FRONTEND – mobile offcanvas dark (bg hitam, teks putih) */
@media (max-width: 991.98px) {
    .front-offcanvas {
        --bs-offcanvas-bg: #0f1620 !important;
        --bs-offcanvas-color: #fff !important;
        --bs-offcanvas-border-color: rgba(255, 255, 255, .12) !important;
        background-color: #0f1620 !important;
        color: #fff !important;
    }

    .front-offcanvas .offcanvas-header,
    .front-offcanvas .offcanvas-body {
        background: transparent !important;
        color: inherit !important;
    }

    .front-offcanvas .nav-link,
    .front-offcanvas a,
    .front-offcanvas p,
    .front-offcanvas li {
        color: #fff !important;
        background: transparent !important;
    }

    .front-offcanvas .nav-link:hover,
    .front-offcanvas .nav-link:focus,
    .front-offcanvas .nav-link.active {
        background: rgba(87, 183, 176, .22) !important;
        /* teal */
        color: #fff !important;
        border-radius: .6rem;
        box-shadow: inset 3px 0 0 var(--bs-primary, #57b7b0);
    }

    .front-offcanvas .btn-close {
        filter: invert(1) brightness(1.1);
    }

    .front-offcanvas .dropdown-menu {
        background: #121923 !important;
        border-color: rgba(255, 255, 255, .12) !important;
    }

    .front-offcanvas .dropdown-item {
        color: #eaf5f4 !important;
    }

    .front-offcanvas .dropdown-item:hover,
    .front-offcanvas .dropdown-item:focus {
        background: rgba(87, 183, 176, .22) !important;
        color: #fff !important;
    }
}

/* === FRONTEND (Mobile) — Paksa Offcanvas Gelap === */
@media (max-width: 991.98px) {

    /* KALAHKAN ".navbar .offcanvas" yg memutihkan */
    body:not(.backend) .navbar .offcanvas.front-offcanvas,
    body:not(.backend) .navbar .offcanvas.front-offcanvas.text-bg-dark {
        --bs-offcanvas-bg: #0f1620 !important;
        --bs-offcanvas-color: #fff !important;
        --bs-offcanvas-border-color: rgba(255, 255, 255, .12) !important;

        background-color: #0f1620 !important;
        color: #fff !important;
    }

    .front-offcanvas .offcanvas-header,
    .front-offcanvas .offcanvas-body {
        background: transparent !important;
        color: inherit !important;
    }

    .front-offcanvas .nav-link,
    .front-offcanvas a,
    .front-offcanvas p,
    .front-offcanvas li {
        color: #fff !important;
        background: transparent !important;
    }

    .front-offcanvas .nav-link:hover,
    .front-offcanvas .nav-link:focus,
    .front-offcanvas .nav-link.active {
        background: rgba(87, 183, 176, .22) !important;
        color: #fff !important;
        border-radius: .6rem;
        box-shadow: inset 3px 0 0 var(--bs-primary, #57b7b0);
    }

    .front-offcanvas .btn-close {
        filter: invert(1) brightness(1.1);
    }
}