/*
 * File CSS ini di-load langsung dari public/css/frontend.css (bukan lewat Vite).
 * Edit file ini, save, lalu reload browser -> perubahan langsung terlihat.
 * Tidak perlu npm run dev / npm run build.
 */

/*
 * Override warna "primary" Bootstrap (default biru #0d6efd) supaya
 * konsisten dengan warna brand logo Konexa (merah-oranye) di SELURUH
 * frontend -- badge TERPOPULER, badge kategori (bg-primary-subtle +
 * text-primary), tombol .btn-package-featured / .btn-primary, ikon,
 * dan elemen lain yang sudah pakai var(--bs-primary) di file ini.
 * Warna diambil langsung dari logo Konexa. Diletakkan di bawah ini,
 * SETELAH bootstrap.min.css di-load (lihat layouts/frontend.blade.php),
 * jadi menang di cascade tanpa perlu !important. (Permintaan user,
 * 2026-08-31 -- samakan dengan warna logo.)
 */
:root {
    --bs-primary: #DB5B4C;
    --bs-primary-rgb: 219, 91, 76;
    --bs-primary-bg-subtle: #FBE5E2;
    --bs-primary-border-subtle: #F2C6C0;
    --bs-primary-text-emphasis: #83372E;
}

/*
 * .btn-primary Bootstrap men-generate warnanya dari nilai literal saat
 * dikompilasi (bukan var(--bs-primary)), jadi tetap perlu di-override
 * manual di sini supaya tombol seperti di frontend/partials/hero.blade.php
 * ikut ganti warna, bukan cuma elemen custom yang sudah pakai
 * var(--bs-primary).
 */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #c95345;
    --bs-btn-hover-border-color: #c95345;
    --bs-btn-active-bg: #b74c3f;
    --bs-btn-active-border-color: #b74c3f;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* Font Comfortaa di-load dari Google Fonts, lihat layouts/frontend.blade.php */
html,
body,
h1, h2, h3, h4, h5, h6,
.navbar,
.btn,
.form-control,
.form-select,
.card,
.accordion-button {
    font-family: 'Comfortaa', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/*
 * Companion WAJIB untuk trik "100vw breakout" (dipakai running text,
 * lihat bagian Running text di bawah) — tanpa
 * ini, elemen lebar 100vw bisa memicu scroll horizontal tak diinginkan
 * di SELURUH halaman kalau browser punya scrollbar vertikal yang makan
 * sedikit lebar viewport (100vw menghitung lebar TERMASUK scrollbar).
 */
html,
body {
    overflow-x: hidden;
}

.navbar-brand img {
    max-height: 40px;
}

section {
    scroll-margin-top: 70px;
}

.card {
    transition: transform 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
}

/*
 * Topbar (frontend/partials/topbar.blade.php): logo (header.blade.php)
 * + menu (menu.blade.php) SATU <nav>/baris, logo kiri menu kanan.
 *
 * Default (halaman non-homepage, class "sticky-top"): background SOLID
 * dari awal seperti sebelumnya.
 */
.site-topbar {
    z-index: 1030;
    background-color: #ffffff;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.95rem;
    transition: background-color .25s ease, box-shadow .25s ease;
}

/*
 * Homepage saja (class "site-topbar--overlay", lihat topbar.blade.php):
 * position: fixed (BUKAN sticky) + transparan, supaya hero bisa
 * full-bleed di belakangnya dari y=0. public/js/frontend.js nambahin
 * class "topbar-scrolled" begitu halaman di-scroll — background jadi
 * SOLID putih + shadow, dan JS-nya juga nuker class navbar-dark jadi
 * navbar-light supaya warna teks menu ikut berubah dari putih ke gelap
 * (dua-duanya WAJIB jalan bareng, background solid tapi teks masih
 * putih = teks jadi tidak kelihatan, ini persis bug yang dilaporkan
 * sebelumnya).
 */
.site-topbar--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    box-shadow: none;
}

.site-topbar--overlay.topbar-scrolled {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

/*
 * FIX (2026-09-18) bug "patah-patah" pas buka/tutup menu mobile, TAPI
 * cuma kerasa setelah di-scroll (dilaporkan user) — beda dari fix
 * ".collapsing" di atas, ini penyebab KEDUA yang terpisah:
 *
 * .navbar-collapse ada di DALAM <nav id="siteTopbar"> yang sama (bukan
 * elemen terpisah) — begitu menu dibuka di mobile, dia numpuk ke bawah
 * lewat flex-wrap, jadi tinggi <nav>-nya sendiri IKUT membesar selama
 * animasi height berjalan. Kalau nav-nya lagi punya box-shadow (cuma
 * terjadi pas topbar-scrolled, lihat rule tepat di atas — pas belum
 * discroll box-shadow-nya "none" jadi tidak kerasa), browser HARUS
 * hitung ulang & gambar ulang bayangan itu di sepanjang tepi box yang
 * terus berubah ukuran, di SETIAP frame animasi — ini yang bikin
 * terasa patah/berat, khusus pas sudah di-scroll.
 *
 * Fix: sembunyikan sementara box-shadow itu SELAMA menu mobile lagi
 * animasi buka/tutup atau lagi kebuka (nav-nya lagi berubah ukuran),
 * balik normal begitu sudah selesai (tertutup penuh/kebuka penuh tanpa
 * animasi lagi). :has() didukung semua browser modern.
 */
.site-topbar--overlay.topbar-scrolled:has(.navbar-collapse.collapsing),
.site-topbar--overlay.topbar-scrolled:has(.navbar-collapse.show) {
    box-shadow: none;
}

/*
 * Kontras teks menu waktu topbar TRANSPARAN (belum di-scroll, overlay
 * langsung nimpa hero) — dilaporkan tidak kelihatan baik di desktop
 * maupun mobile. Root cause: Bootstrap "navbar-dark" bawaan bikin
 * .nav-link yang TIDAK aktif cuma rgba(255,255,255,.55) (55% putih) —
 * itu didesain buat background yang BENAR-BENAR gelap (foto/video
 * pekat), sementara background hero saat ini pola abu-abu medium
 * (bukan gelap pekat), jadi 55% putih kontrasnya kurang. Dinaikkan ke
 * .92 + ditambah text-shadow supaya tetap kebaca di atas background
 * APA PUN (foto terang, pola ramai, dst) tanpa perlu ganti warna manual
 * tiap kali background hero diganti dari Superadmin > Web > Headers.
 */
.site-topbar--overlay:not(.topbar-scrolled) .navbar-nav .nav-link {
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.site-topbar--overlay:not(.topbar-scrolled).navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .92);
}

.site-topbar--overlay:not(.topbar-scrolled).navbar-dark .navbar-nav .nav-link:hover,
.site-topbar--overlay:not(.topbar-scrolled).navbar-dark .navbar-nav .nav-link.active {
    color: #ffffff;
}

.site-topbar--overlay:not(.topbar-scrolled) .navbar-toggler {
    border-color: rgba(255, 255, 255, .75);
}

.site-topbar--overlay:not(.topbar-scrolled) .navbar-toggler-icon {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}

/*
 * Menu mobile (hamburger di-klik, .navbar-collapse.show) khusus di
 * homepage overlay: dikasih background solid gelap sendiri — TIDAK
 * mengandalkan transparansi ke background hero di baliknya, karena
 * panel menu yang terbuka bisa cukup tinggi dan background hero bisa
 * berubah-ubah (foto terang/gelap tergantung yang diupload di
 * Superadmin > Web > Headers). Background solid = kontras selalu
 * terjamin apa pun isi hero-nya.
 */
@media (max-width: 991.98px) {
    /*
     * FIX (2026-09-18) bug "patah-patah" pas buka/tutup menu mobile di
     * homepage: sebelumnya background-color/margin-top/padding di atas
     * cuma nempel di ".show" (state SETELAH animasi Bootstrap selesai).
     * Bootstrap collapse animasinya lewat class ".collapsing" (dipasang
     * dari detik pertama toggler diklik, baik pas buka maupun tutup),
     * .show baru ditambahkan/dilepas TEPAT DI AWAL/AKHIR proses itu —
     * jadi background gelap + margin + padding ini kemarin "muncul/
     * hilang" mendadak (snap) persis di titik itu, bukan ikut smooth
     * bareng animasi height-nya -> itu yang kelihatan seperti "patah".
     * Fix: style yang sama juga dipasang selama ".collapsing" supaya
     * konsisten dari awal sampai akhir buka/tutup, tidak ada lompatan.
     */
    .site-topbar--overlay .navbar-collapse.show,
    .site-topbar--overlay .navbar-collapse.collapsing {
        background-color: rgba(17, 17, 17, .92);
        margin-top: 0.75rem;
        padding: 0.5rem 1rem 1rem;
        border-radius: 12px;
    }

    /*
     * FIX (2026-09-18): warna teks link di sini SEBELUMNYA ikut warna
     * dari class "navbar-light"/"navbar-dark" yang di-toggle JS pas
     * scroll (lihat frontend.js) — pas topbar-scrolled aktif (navbar-
     * light), Bootstrap bikin teks nav-link jadi GELAP karena didesain
     * buat background topbar yang solid PUTIH. Padahal panel menu
     * mobile ini backgroundnya SELALU gelap (rgba(17,17,17,.92) di
     * atas), scrolled ataupun belum — jadi teks gelap di atas panel
     * gelap jadi nyaris tidak kelihatan begitu sudah di-scroll. Warna
     * teks di sini di-paksa selalu terang, TIDAK ikut navbar-light/dark.
     */
    .site-topbar--overlay .navbar-collapse.show .nav-link,
    .site-topbar--overlay .navbar-collapse.collapsing .nav-link {
        text-shadow: none; /* tidak perlu lagi, background di belakangnya sudah solid gelap */
        color: rgba(255, 255, 255, .92);
    }

    .site-topbar--overlay .navbar-collapse.show .nav-link:hover,
    .site-topbar--overlay .navbar-collapse.show .nav-link:focus,
    .site-topbar--overlay .navbar-collapse.show .nav-link.active,
    .site-topbar--overlay .navbar-collapse.collapsing .nav-link:hover,
    .site-topbar--overlay .navbar-collapse.collapsing .nav-link:focus,
    .site-topbar--overlay .navbar-collapse.collapsing .nav-link.active {
        color: #ffffff;
    }
}

/*
 * Jarak antar item menu — lewat padding .nav-link (bukan margin li)
 * supaya area klik-nya ikut lebar. font-weight 700 supaya teks menu
 * lebih tegas/bold (sebelumnya ikut default Bootstrap ~400).
 */
.site-topbar .navbar-nav .nav-link {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    font-weight: 700;
}

/*
 * Hero/header slider homepage (frontend/partials/hero.blade.php), datanya
 * diambil dari App\Models\WebHeader di backend Teleios.
 *
 * 100dvh (dynamic viewport height) dipakai SETELAH 100vh sebagai
 * progressive enhancement — browser lama pakai 100vh, browser modern
 * pakai 100dvh yang lebih akurat khususnya di mobile (100vh sering
 * "kepotong" address bar browser mobile, 100dvh tidak).
 *
 * isolation: isolate MEMBUAT .hero-slide jadi stacking context sendiri
 * (root cause fix untuk bug "tembus" sebelumnya): video/gambar/overlay
 * di dalamnya pakai z-index negatif (-1/-2) supaya berada di BELAKANG
 * teks & tombol, tapi tanpa isolation, elemen z-index negatif itu bisa
 * "bocor" dan malah tampil di belakang elemen lain di luar .hero-slide
 * (termasuk .site-topbar) tergantung urutan render browser.
 */
.hero-carousel .hero-slide,
.hero-carousel .carousel-item {
    min-height: 100vh;
    min-height: 100dvh;
    isolation: isolate;
}

.hero-slide {
    min-height: 100vh;
    min-height: 100dvh;
    isolation: isolate;
}

/*
 * Konten hero (headline + deskripsi + tombol CTA) SENGAJA rata kiri,
 * bukan center — lihat .hero-content di dalam .col-lg-6 pada
 * hero.blade.php. Deskripsinya pakai text-align: justify supaya rapi
 * kalau teksnya panjang/beberapa baris.
 */
.hero-content {
    text-align: left;
}

/*
 * Headline hero (h1.display-4.fw-bold di hero.blade.php) — sudah pakai
 * fw-bold (font-weight: 700, bobot MAKSIMAL yang tersedia di font
 * Comfortaa, lihat @import di layouts/frontend.blade.php: wght@300..700).
 * Karena Comfortaa desainnya rounded/goresan tipis, 700 saja kadang
 * masih kelihatan kurang "tegas" secara visual dibanding font lain di
 * bobot yang sama — makanya ditambah -webkit-text-stroke supaya
 * goresan hurufnya kelihatan lebih tebal tanpa perlu font-weight di
 * atas 700 (yang memang tidak tersedia di family ini).
 */
.hero-content h1 {
    -webkit-text-stroke: 0.6px currentColor;
}

.hero-description {
    text-align: justify;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    /* Justify kurang enak dibaca di kolom sempit (mobile) — balik ke rata kiri biasa */
    .hero-description {
        text-align: left;
    }
}

/*
 * Ilustrasi alur hero (frontend/partials/hero-flow.blade.php): dashboard ->
 * modul -> pengguna. Garis putus-putus "mengalir" (stroke-dashoffset),
 * kartu melayang pelan, titik kuning bergerak lewat <animateMotion>.
 * Di bawah lg ilustrasi turun ke bawah teks; di HP keterangan kecil
 * disembunyikan & judul kartu diperbesar supaya tetap terbaca.
 */
.hero-visual {
    animation: rise-in .8s ease .15s both;
}

.hero-flow {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.hero-flow-card {
    fill: #fff;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .25));
}

.hero-flow-card--hub {
    stroke: var(--bs-primary);
    stroke-width: 2.5;
}

.hero-flow-brand {
    font: 700 24px 'Comfortaa', sans-serif;
    fill: var(--bs-primary);
}

.hero-flow-title {
    font: 700 19px 'Comfortaa', sans-serif;
    fill: #2b1b17;
}

.hero-flow-sub {
    font: 500 13px 'Comfortaa', sans-serif;
    fill: #7a6a66;
}

.hero-flow-rail {
    fill: none;
    stroke: rgba(255, 255, 255, .18);
    stroke-width: 7;
    stroke-linecap: round;
}

.hero-flow-line {
    fill: none;
    stroke: #f6b8ae;
    stroke-width: 2.5;
    stroke-dasharray: 7 7;
    animation: hero-flow-dash 1.2s linear infinite;
}

.hero-flow-dot {
    fill: #ffc857;
    filter: drop-shadow(0 0 6px #ffc857);
}

.hero-flow-pulse {
    fill: var(--bs-primary);
    opacity: .35;
    transform-box: fill-box;
    transform-origin: center;
    animation: hero-flow-pulse 2.4s ease-out infinite;
}

.hero-flow-node {
    animation: float-soft 5s ease-in-out infinite;
}

@keyframes hero-flow-dash {
    to { stroke-dashoffset: -28; }
}

@keyframes hero-flow-pulse {
    0% { transform: scale(.9); opacity: .45; }
    100% { transform: scale(1.35); opacity: 0; }
}

@media (max-width: 991.98px) {
    .hero-visual {
        max-width: 560px;
        margin-inline: auto;
    }
}

@media (max-width: 575.98px) {
    .hero-flow-sub {
        display: none;
    }

    .hero-flow-title {
        font-size: 20px;
        transform: translateY(9px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-visual,
    .hero-flow-line,
    .hero-flow-pulse,
    .hero-flow-node {
        animation: none;
    }

    .hero-flow-dot {
        display: none;
    }
}

/*
 * Footer (frontend/partials/footer.blade.php) — kolom-kolom menu
 * (App\Models\WebFooter, dikelompokkan per group_name lewat
 * App\View\Composers\FooterComposer), box newsletter (tampilan saja,
 * lihat komentar di footer.blade.php), lalu baris bawah: logo + copyright
 * di kiri, ikon sosial di kanan, dipisah garis selebar container.
 */
.site-footer {
    background-color: #f4f3f1;
    color: #1a1a1a;
}

.footer-col-title {
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-link-list li {
    margin-bottom: 0.6rem;
}

.footer-link-list a {
    color: inherit;
    text-decoration: none;
}

.footer-link-list a:hover {
    text-decoration: underline;
}

.footer-newsletter-input::placeholder {
    color: #6c757d;
}

/* Garis pemisah selebar container (sejajar logo s/d ikon sosial terakhir),
   dengan jarak lega ke kolom menu di atas dan baris logo di bawah.
   opacity: 1 menimpa bawaan Bootstrap <hr> (0.25) yang membuat garis
   nyaris tak terlihat. */
.footer-divider {
    border-top: 1px solid rgba(0, 0, 0, .15);
    opacity: 1;
    margin: 3rem 0 2rem;
}

.footer-copyright {
    color: #6c757d;
}

.footer-social-icon {
    color: #1a1a1a;
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.footer-social-icon:hover {
    color: #000;
}

/* Ikon custom (upload gambar, App\Models\WebSetting::icon_instagram/icon_facebook/dst) — disamakan ukurannya dengan ikon font Bootstrap Icons di sebelahnya */
.footer-social-icon-img {
    width: 1.1rem;
    height: 1.1rem;
    object-fit: contain;
    display: block;
}

/*
 * Packages / pricing cards (frontend/partials/packages.blade.php) —
 * data paket dari App\Models\Package + App\Models\PackageLimit lewat
 * API Teleios. Kartu "unggulan" (badge TERPOPULER, packages.is_featured)
 * tampil gelap supaya menonjol. Tidak pakai class Bootstrap ".card" supaya
 * style di bawah (termasuk hover) tidak bentrok dengan aturan
 * ".card"/".card:hover" generik di atas.
 */
/* Latar beda dari section Fitur (krem polos): putih dengan cahaya lembut
   merah bizbos di kiri atas & kuning di kanan bawah, supaya dua section
   yang bersebelahan tetap terasa terpisah. */
.packages-section--tinted {
    background-color: #fff;
    background-image:
        radial-gradient(ellipse 55% 45% at 0% 0%, rgba(219, 91, 76, .2), transparent 70%),
        radial-gradient(ellipse 50% 45% at 100% 100%, rgba(255, 200, 87, .32), transparent 70%);
}

.package-card {
    position: relative;
    background-color: #ffffff;
    color: #1f1a17;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.package-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .09);
}

.package-card--featured {
    background-color: #2b1b17;
    border-color: #2b1b17;
    color: #fff;
    box-shadow: 0 20px 40px rgba(43, 27, 23, .25);
}

.package-card--featured .text-muted,
.package-card--featured .package-price-currency {
    color: rgba(255, 255, 255, .65) !important;
}

.package-card--featured .package-feature-list li {
    color: rgba(255, 255, 255, .9);
}

.package-card--featured .package-feature-list li i {
    color: #ffb4a8;
}

.package-duration-badge {
    background-color: rgba(219, 91, 76, .1);
    color: var(--bs-primary);
}

.package-card--featured .package-duration-badge {
    background-color: rgba(255, 255, 255, .12);
    color: #ffb4a8;
}

.package-save-badge {
    background-color: #d8f5e4;
    color: #1a8a53;
}

/* Tabel "Bandingkan semua fitur" -- tertutup default (<details>). */
.package-compare {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 20px;
    overflow: hidden;
}

.package-compare summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.25rem;
    font-weight: 700;
    font-size: .9rem;
    text-align: center;
}

.package-compare summary::-webkit-details-marker {
    display: none;
}

.package-compare summary .bi {
    display: inline-block;
    margin-left: .25rem;
    transition: transform .2s ease;
}

.package-compare[open] summary .bi {
    transform: rotate(180deg);
}

.package-compare-table {
    min-width: 520px;
    font-size: .875rem;
}

.package-compare-table th,
.package-compare-table td {
    padding: .8rem 1rem;
    text-align: center;
    vertical-align: middle;
    border-color: rgba(0, 0, 0, .06);
}

.package-compare-table th:first-child {
    text-align: left;
    font-weight: 600;
}

.package-compare-table thead th {
    background-color: #fdfaf8;
    font-weight: 700;
}

.package-compare-table thead th.is-featured {
    color: var(--bs-primary);
}

.package-compare-yes {
    color: #1a8a53;
    font-size: 1.1rem;
}

.package-compare-no {
    color: rgba(0, 0, 0, .25);
}

.package-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bs-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    white-space: nowrap;
}

.package-name {
    font-weight: 700;
    font-size: 1.15rem;
}

.package-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.package-price-currency {
    font-size: 1rem;
    font-weight: 600;
    color: #6c757d;
}

.package-price-amount {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.btn-package-outline {
    border: 1.5px solid #1a1a1a;
    color: #1a1a1a;
    background-color: transparent;
    font-weight: 600;
}

.btn-package-outline:hover {
    background-color: #1a1a1a;
    color: #fff;
}

.btn-package-featured {
    border: 1.5px solid var(--bs-primary);
    background-color: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}

/*
 * Eksplisit set background-color/border-color di sini (bukan cuma
 * filter: brightness() seperti sebelumnya) -- Bootstrap punya aturan
 * bawaan ".btn:hover" yang spesifisitasnya SAMA/lebih tinggi dari
 * class custom ini dan mencoba pakai CSS variable
 * (--bs-btn-hover-bg/--bs-btn-hover-color) yang TIDAK PERNAH diisi
 * untuk tombol custom seperti ini. Kalau tidak dinyatakan eksplisit di
 * sini, ".btn:hover" bawaan Bootstrap menang dan background-nya jatuh
 * ke transparent saat hover -- teks putihnya jadi tidak kelihatan sama
 * sekali di atas kartu putih. Warna gelap di bawah sama dengan shade
 * hover ".btn-primary" supaya konsisten satu sistem warna.
 */
.btn-package-featured:hover,
.btn-package-featured:focus,
.btn-package-featured:active {
    background-color: #c95345;
    border-color: #c95345;
    color: #fff;
}

.package-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #333;
}

.package-feature-list li i {
    color: var(--bs-primary);
    margin-top: 0.15rem;
}

/* Tab kelompok paket -- pill, bisa digeser di layar kecil. Latar tab aktif
   berupa indikator yang meluncur (dibuat public/js/frontend.js, class
   .has-indicator); tanpa JS tab aktif tetap berlatar biasa. */
.package-tabs {
    position: relative;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
}

.package-tabs::-webkit-scrollbar {
    display: none;
}

.package-tabs .nav-link {
    white-space: nowrap;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    color: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 1.1rem;
}

.package-tabs .nav-link.active {
    background-color: #2b1b17;
    border-color: #2b1b17;
    color: #fff;
}

.package-tabs.has-indicator .nav-link {
    position: relative;
    z-index: 1;
    background-color: #fff;
    transition: color .25s ease, border-color .25s ease;
}

/* Tab aktif di atas indikator: latarnya transparan supaya pil gelap terlihat. */
.package-tabs.has-indicator .nav-link.active {
    z-index: 3;
    background-color: transparent;
}

.package-tabs-indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    border-radius: 999px;
    background-color: #2b1b17;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.3, .7, .2, 1), width .35s cubic-bezier(.3, .7, .2, 1);
}


.package-swipe-hint {
    text-align: center;
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

@media (max-width: 767.98px) {
    .package-tabs {
        justify-content: flex-start;
        margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    }

    /* Kartu digeser ke samping, satu kartu per layar + intip kartu berikutnya. */
    .package-row {
        flex-wrap: nowrap;
        justify-content: flex-start !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-top: 1rem;
        padding-bottom: 0.5rem;
    }

    .package-row::-webkit-scrollbar {
        display: none;
    }

    .package-row > [class*="col-"] {
        flex: 0 0 85%;
        max-width: 85%;
        scroll-snap-align: center;
    }

    .package-card,
    .package-card:hover {
        transform: none;
    }

    .package-card {
        padding: 1.25rem !important;
    }

    .package-price-amount {
        font-size: 1.75rem;
    }
}

/*
 * Fitur Unggulan -- Bento Grid (frontend/partials/features.blade.php).
 * Ukuran kotak (big/wide/tall/small) dipilih di Blade dari pola 12 kotak
 * berulang; warna kotak di sini lewat :nth-child (pola 12 warna). Desktop
 * 4 kolom x baris 180px (12 fitur = 5 baris), tablet 3 kolom, HP 2 baris
 * digeser ke samping supaya tidak memanjang ke bawah. Gambar fitur tampil
 * utuh (contain) di pojok kanan bawah -- paling bagus PNG transparan atau
 * latar polos senada.
 */
.features-section--tinted {
    background-color: #fbf6f3;
}

.features-bento {
    --row: 180px;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: var(--row);
    grid-auto-flow: dense;
}

.feature-tile {
    --bg: #fff;
    --fg: #1f1a17;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(0, 0, 0, .06);
    background-color: var(--bg);
    color: var(--fg);
    transition: transform .25s ease, box-shadow .25s ease;
}

.feature-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .1);
}

/* Pola 12 warna (senada merah bizbos) */
.feature-tile:nth-child(12n + 1)  { --bg: var(--bs-primary); --fg: #fff; }
.feature-tile:nth-child(12n + 2)  { --bg: #ffe8a3; }
.feature-tile:nth-child(12n + 3)  { --bg: #fff; }
.feature-tile:nth-child(12n + 4)  { --bg: #cdefd9; }
.feature-tile:nth-child(12n + 5)  { --bg: #2b1b17; --fg: #fff; }
.feature-tile:nth-child(12n + 6)  { --bg: #e9ddff; }
.feature-tile:nth-child(12n + 7)  { --bg: #d6ecff; }
.feature-tile:nth-child(12n + 8)  { --bg: #ffd8c9; }
.feature-tile:nth-child(12n + 9)  { --bg: #fff; }
.feature-tile:nth-child(12n + 10) { --bg: #ffe8a3; }
.feature-tile:nth-child(12n + 11) { --bg: #2b1b17; --fg: #fff; }
.feature-tile:nth-child(12n + 12) { --bg: #cdefd9; }

.feature-tile--big  { grid-column: span 2; grid-row: span 2; }
.feature-tile--wide { grid-column: span 2; }
.feature-tile--tall { grid-row: span 2; }

.feature-tile-text {
    position: relative;
    z-index: 2;
    max-width: 75%;
    padding: 18px 20px;
}

.feature-tile--big .feature-tile-text  { max-width: 62%; padding: 26px 28px; }
.feature-tile--wide .feature-tile-text { max-width: 50%; }

.feature-tile-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}

.feature-tile--big .feature-tile-title { font-size: 1.75rem; }

.feature-tile-desc {
    margin: .5rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    opacity: .8;
}

.feature-tile--small .feature-tile-desc,
.feature-tile--tall .feature-tile-desc {
    display: none;
}

.feature-tile-art {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    transition: transform .4s ease;
}

.feature-tile-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
}

.feature-tile:hover .feature-tile-art { transform: scale(1.05) translate(-2%, -2%); }

.feature-tile--big .feature-tile-art   { width: 68%; height: 60%; }
.feature-tile--wide .feature-tile-art  { width: 48%; height: 100%; }
.feature-tile--tall .feature-tile-art  { width: 100%; height: 62%; }
.feature-tile--small .feature-tile-art { width: 62%; height: 62%; }

/* Deskripsi kotak kecil/tinggi muncul saat hover (desktop) */
.feature-tile-hover {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    margin: 0;
    padding: 16px 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .6));
    color: #fff;
    font-size: .8125rem;
    line-height: 1.5;
    transform: translateY(100%);
    transition: transform .3s ease;
}

.feature-tile:hover .feature-tile-hover { transform: translateY(0); }

.features-swipe-hint { display: none; }

@media (max-width: 991.98px) {
    .features-bento {
        --row: 170px;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* HP: 2 baris digeser ke samping -- tinggi tetap berapa pun jumlah fitur */
@media (max-width: 767.98px) {
    .features-bento {
        grid-template-columns: none;
        grid-template-rows: repeat(2, 176px);
        grid-auto-flow: column dense;
        grid-auto-columns: 40vw; /* kotak besar = 80vw, kotak berikutnya mengintip sebagai tanda bisa digeser */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -.5);
        padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5) 6px;
        scroll-padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5);
    }

    .features-bento::-webkit-scrollbar { display: none; }

    .feature-tile { scroll-snap-align: start; }
    .feature-tile:hover { transform: none; box-shadow: none; }
    .feature-tile:hover .feature-tile-art { transform: none; }
    .feature-tile-hover { display: none; }

    .feature-tile-text,
    .feature-tile--wide .feature-tile-text { max-width: 100%; padding: 14px 16px; }
    .feature-tile--big .feature-tile-text { max-width: 85%; padding: 20px; }
    .feature-tile-title { font-size: .95rem; }
    .feature-tile--big .feature-tile-title { font-size: 1.35rem; }

    /* Tanpa hover di HP: deskripsi singkat tampil di semua kotak */
    .feature-tile--small .feature-tile-desc,
    .feature-tile--tall .feature-tile-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .feature-tile--small .feature-tile-art { width: 48%; height: 48%; }

    .features-swipe-hint {
        display: block;
        margin-top: .875rem;
        text-align: center;
        font-size: .8125rem;
        opacity: .7;
    }
}

@media (prefers-reduced-motion: reduce) {
    .feature-tile,
    .feature-tile-art,
    .feature-tile-hover { transition: none; }
}

/*
 * Animasi -- halus & singkat, tanpa library. Section ber-[data-reveal]
 * diberi .is-visible oleh public/js/frontend.js saat pertama terlihat
 * (sekali saja), lalu isinya muncul bergiliran (--i = urutan). Kartu paket
 * ikut bergiliran lagi setiap ganti tab (pane baru jadi .active).
 * .reveal-ready hanya dipasang kalau JS jalan & pengunjung tidak memilih
 * "kurangi gerakan" -- tanpa itu semua konten langsung tampil.
 */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes float-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes shimmer {
    0%, 70% { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

.reveal-ready [data-reveal]:not(.is-visible) .feature-tile,
.reveal-ready [data-reveal]:not(.is-visible) .package-col {
    opacity: 0;
}

.reveal-ready [data-reveal].is-visible .feature-tile,
.reveal-ready [data-reveal].is-visible .tab-pane.active .package-col {
    animation: rise-in .55s cubic-bezier(.2, .7, .2, 1) backwards;
    animation-delay: calc(min(var(--i, 0), 11) * 60ms);
}

/* Ilustrasi kotak fitur besar mengambang pelan */
.feature-tile--big .feature-tile-art img {
    animation: float-soft 6s ease-in-out infinite;
}

/* Kilau tipis menyapu kartu TERPOPULER */
.package-card--featured::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .09) 50%, transparent 60%);
    background-size: 250% 100%;
    animation: shimmer 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .feature-tile--big .feature-tile-art img,
    .package-card--featured::after {
        animation: none;
    }

    .package-tabs-indicator {
        transition: none;
    }
}

/*
 * CTA (frontend/partials/sections/cta.blade.php, tipe "banner" di Teleios)
 * -- section merah bizbos (default, senada logo & tombol) dengan kotak
 * terang di tengah, jarak atas
 * bawah lega supaya tegas terpisah dari FAQ & footer. Kalau background
 * diatur di Teleios, background itu yang dipakai di section (kotak tetap
 * terang). Kata di judul yang diapit *bintang* diberi sorotan.
 */
.cta-section {
    padding: 6rem 0;
}

.cta-section--default {
    background-color: var(--bs-primary);
    background-image:
        radial-gradient(ellipse 45% 70% at 100% 0%, rgba(255, 200, 87, .35), transparent 70%),
        radial-gradient(ellipse 50% 70% at 0% 100%, rgba(255, 255, 255, .14), transparent 70%),
        radial-gradient(circle, rgba(255, 255, 255, .12) 1px, transparent 1.5px);
    background-size: auto, auto, 24px 24px;
}

.cta-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 28px;
    padding: 5rem 2rem;
    text-align: center;
    background-color: #fff;
    color: #1f1a17;
    box-shadow: 0 30px 60px rgba(120, 35, 25, .25);
}

/* Dekorasi lingkaran besar samar di dalam kotak */
.cta-ring {
    position: absolute;
    z-index: 0;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 60px solid rgba(219, 91, 76, .05);
    pointer-events: none;
}

.cta-ring--left {
    left: -140px;
    bottom: -220px;
}

.cta-ring--right {
    right: -120px;
    top: -240px;
    border-color: rgba(255, 200, 87, .12);
}

.cta-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

.cta-title {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin-bottom: 1rem;
}

/* Sorotan: sapuan warna di belakang kata, digambar saat section muncul */
.cta-highlight {
    position: relative;
    white-space: nowrap;
    color: var(--bs-primary);
}

.cta-highlight::after {
    content: '';
    position: absolute;
    left: -.1em;
    right: -.1em;
    bottom: .04em;
    height: .3em;
    z-index: -1;
    border-radius: 999px;
    background-color: rgba(255, 200, 87, .55);
    transform-origin: left center;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1) .3s;
}

.reveal-ready [data-reveal]:not(.is-visible) .cta-highlight::after {
    transform: scaleX(0);
}

.cta-subtitle {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #6c757d;
    margin: 0 auto 2.25rem;
    max-width: 560px;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.cta-btn-primary,
.cta-btn-primary:hover,
.cta-btn-primary:focus,
.cta-btn-primary:active {
    background-color: var(--bs-primary);
    border: 1px solid var(--bs-primary);
    color: #fff;
    border-radius: 999px;
    padding-inline: 1.75rem;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(219, 91, 76, .3);
}

.cta-btn-primary .bi {
    display: inline-block;
    margin-left: .35rem;
    transition: transform .2s ease;
}

.cta-btn-primary:hover .bi {
    transform: translateX(4px);
}

.cta-btn-secondary,
.cta-btn-secondary:focus,
.cta-btn-secondary:active {
    border: 1.5px solid #1f1a17;
    color: #1f1a17;
    background-color: transparent;
    border-radius: 999px;
    padding-inline: 1.75rem;
    font-weight: 700;
}

.cta-btn-secondary:hover {
    background-color: #1f1a17;
    border-color: #1f1a17;
    color: #fff;
}

.reveal-ready [data-reveal]:not(.is-visible) .cta-card {
    opacity: 0;
}

.reveal-ready [data-reveal].is-visible .cta-card {
    animation: rise-in .6s cubic-bezier(.2, .7, .2, 1) backwards;
}

@media (max-width: 767.98px) {
    .cta-section {
        padding: 3.5rem 0;
    }

    .cta-card {
        border-radius: 22px;
        padding: 3rem 1.25rem;
    }

    .cta-buttons .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-highlight::after,
    .cta-btn-primary .bi {
        transition: none;
    }
}

/*
 * Running text / marquee (frontend/partials/running-text.blade.php) —
 * teks WebSetting::running_text diulang & di-scroll otomatis tanpa
 * henti pakai animasi CSS murni. Wrapper-nya pakai trik "100vw
 * breakout" (width:100vw + left:50% + margin:-50vw, ditemani html/body
 * overflow-x:hidden di atas) supaya nempel rata dari ujung layar ke
 * ujung layar.
 */
.running-text-section {
    background-color: #f5efe2;
    overflow: hidden;
    padding: 1.5rem 0;
}

.running-text-wrap {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

/*
 * Track-nya berisi DUA copy identik dari .running-text-group
 * (lihat komentar di running-text.blade.php) berjejer dalam satu baris
 * (display:flex, width:max-content, tanpa wrap) lalu digeser
 * (translateX) sejauh -50% (= persis lebar satu copy) terus-menerus —
 * karena copy keduanya identik, pas "loncat" balik ke 0% matanya tidak
 * nangkep jeda/patahan sama sekali (ilusi scroll tanpa akhir/infinite).
 */
.running-text-track {
    display: flex;
    width: max-content;
    animation: running-text-scroll 22s linear infinite;
}

.running-text-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.running-text-item {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0 1.5rem;
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: #1a1a1a;
}

.running-text-dot {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 2px solid var(--bs-primary);
    border-radius: 4px;
    background-color: transparent;
    transform: rotate(45deg);
}

@keyframes running-text-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Hormati preferensi user yang minta animasi dikurangi di OS/browser-nya */
@media (prefers-reduced-motion: reduce) {
    .running-text-track {
        animation: none;
    }
}

@media (max-width: 767.98px) {
    .running-text-item {
        padding: 0 1rem;
    }
}

/*
 * FAQ (frontend/partials/faq.blade.php) — accordion "card list" ala
 * referensi desain terbaru user: judul besar "FAQs" di kiri disambung
 * garis dekoratif (bulatan di kedua ujung) ke deskripsi singkat di
 * kanan (.faq-header/.faq-heading-line/.faq-header-desc), tiap FAQ
 * jadi card bulat (rounded, background krem) TERPISAH satu sama lain
 * (bukan garis tipis nyambung kayak versi sebelumnya), ada bullet ikon
 * hexagon kecil di depan pertanyaan, dan ikon plus/minus custom
 * (dibuat dari 2 garis lewat ::before/::after, bukan chevron) di kanan
 * yang garis vertikalnya hilang pas dibuka (jadi minus).
 */
.faq-section {
    background-color: #ffffff;
}

/*
 * Wrapper lebar penuh (bukan .container Bootstrap yang mentok di
 * ~1320px) — max-width lebih besar biar "hampir fullscreen" di layar
 * lebar sesuai referensi, tapi padding kiri/kanan-nya pakai clamp()
 * supaya otomatis mengecil di layar sempit (tetap ada jarak aman ke
 * tepi di mobile, tidak edge-to-edge).
 */
.faq-container {
    width: 100%;
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 4vw, 4rem);
    padding-right: clamp(1rem, 4vw, 4rem);
}

.faq-header {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.faq-heading {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #1a1a1a;
}

.faq-heading-line {
    position: relative;
    flex: 1 1 auto;
    min-width: 80px;
    height: 2px;
    background-color: #1a1a1a;
    margin: 0 .75rem;
}

.faq-heading-line::before,
.faq-heading-line::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translateY(-50%);
}

.faq-heading-line::before {
    left: 0;
    background-color: #fff;
    border: 2px solid #1a1a1a;
}

.faq-heading-line::after {
    right: 0;
    background-color: #1a1a1a;
}

.faq-header-desc {
    max-width: 380px;
    line-height: 1.6;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background-color: #f5efe2;
    border-radius: 20px;
    overflow: hidden;
}

.faq-item-header {
    margin: 0;
    font-size: inherit;
}

.faq-item-button {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: none;
    border: none;
    padding: 1.5rem 1.75rem;
    text-align: left;
    cursor: pointer;
}

.faq-item-question-wrap {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.faq-item-bullet {
    flex-shrink: 0;
    margin-top: .25rem;
    font-size: 1rem;
    color: var(--bs-primary);
}

.faq-item-question {
    font-weight: 700;
    font-size: 1.05rem;
    color: #1a1a1a;
}

.faq-item-icon {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: .3rem;
}

.faq-item-icon::before,
.faq-item-icon::after {
    content: '';
    position: absolute;
    background-color: var(--bs-primary);
    border-radius: 2px;
}

.faq-item-icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

.faq-item-icon::after {
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Bootstrap otomatis TIDAK menaruh class "collapsed" di tombol pas section-nya lagi terbuka — jadi ":not(.collapsed)" berarti "lagi expanded", garis vertikal ikon disembunyikan supaya jadi minus */
.faq-item-button:not(.collapsed) .faq-item-icon::after {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
}

.faq-item-body {
    padding: 0 1.75rem 1.5rem 3.25rem;
    line-height: 1.7;
}

.faq-item-body a {
    color: inherit;
    text-decoration: underline;
}

/*
 * Halaman Kontak (resources/views/frontend/kontak.blade.php) — form +
 * info alamat/peta. Layout & gaya elemen terinspirasi dari referensi
 * desain yang dikirim user, TAPI sengaja "tanpa background" (tidak ada
 * ilustrasi dekoratif/pattern seperti di referensi aslinya) — polos di
 * atas background putih/off-white biasa.
 */
.contact-title {
    font-weight: 700;
}

.contact-subtitle {
    max-width: 640px;
}


.contact-input {
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}

.contact-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, .15);
}

.contact-textarea {
    resize: vertical;
    min-height: 140px;
}

.contact-submit-btn {
    background-color: var(--bs-primary);
    color: #fff;
    border-radius: 999px;
    padding: 0.75rem 2.5rem;
    font-weight: 700;
    border: none;
}

.contact-submit-btn:hover {
    filter: brightness(0.92);
    color: #fff;
}

.contact-form-card {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    padding: clamp(1.25rem, 3vw, 2.25rem);
}

.contact-channel {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;
    padding: 1.1rem 1.25rem;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

a.contact-channel:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .07);
    color: inherit;
}

.contact-channel-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.contact-channel-icon--wa {
    background: #e7f8ee;
    color: #25d366;
}

/* Honeypot form Kontak: disembunyikan dari manusia, tetap ada di DOM untuk bot. */
.contact-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*
 * Tombol floating "Chat WhatsApp" — fixed di pojok kanan-bawah viewport,
 * tampil di semua halaman frontend (lihat partials/footer.blade.php,
 * di-include di tiap halaman). Warna hijau khas WhatsApp (#25D366)
 * supaya langsung dikenali sebagai tombol chat WhatsApp.
 */
.whatsapp-float-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 1050;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.whatsapp-float-btn:hover,
.whatsapp-float-btn:focus {
    color: #fff;
    background-color: #1ebe5b;
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

@media (max-width: 575.98px) {
    .whatsapp-float-btn {
        right: 16px;
        bottom: 16px;
        width: 48px;
        height: 48px;
        font-size: 24px;
    }
}

/* ------------------------------------------------------------------
 * Section beranda dinamis (Teleios: Superadmin > Web > Susunan Beranda)
 * lihat resources/views/frontend/partials/sections/*
 * ------------------------------------------------------------------ */
.home-section-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.home-section-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 0;
}

.home-section--dark .home-icon-badge {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.home-icon-badge {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-size: 2rem;
    transition: transform .2s ease;
}

.home-icon-badge img {
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
}

.home-icon-item:hover .home-icon-badge {
    transform: translateY(-4px);
}

.home-card {
    border-radius: 16px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.home-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .09) !important;
}

.home-card-img {
    height: 200px;
    object-fit: cover;
}

.home-logo {
    height: 48px;
    max-width: 160px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .2s ease, opacity .2s ease;
}

.home-logo:hover {
    filter: none;
    opacity: 1;
}

.home-stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.home-text,
.article-body p {
    font-size: 1.05rem;
    line-height: 1.8;
}

/* ------------------------------------------------------------------
 * Halaman dinamis /page/{slug} (resources/views/frontend/page.blade.php)
 * ------------------------------------------------------------------ */
/* Header halaman (Dokumen, S&K, Landing) -- latar merah bizbos seperti
   section CTA, atau gambar hero kalau diatur di Teleios. */
.page-hero {
    padding: 6rem 0 4.5rem;
}

.page-hero--brand {
    background-color: var(--bs-primary);
    background-image:
        radial-gradient(ellipse 45% 80% at 100% 0%, rgba(255, 200, 87, .35), transparent 70%),
        radial-gradient(ellipse 50% 80% at 0% 100%, rgba(255, 255, 255, .14), transparent 70%),
        radial-gradient(circle, rgba(255, 255, 255, .12) 1px, transparent 1.5px);
    background-size: auto, auto, 24px 24px;
}

.page-hero-title {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -.01em;
}

.page-hero-subtitle {
    max-width: 720px;
    opacity: .85;
}

.page-hero-meta {
    margin-top: 1rem;
    opacity: .75;
}

.page-hero-breadcrumb {
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, .6);
    --bs-breadcrumb-item-active-color: rgba(255, 255, 255, .85);
    font-size: .875rem;
}

.page-hero-breadcrumb a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.page-hero-breadcrumb a:hover {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .page-hero {
        padding: 4rem 0 3rem;
    }
}

.doc-toc {
    position: sticky;
    top: 100px;
    border-left: 2px solid var(--bs-primary-bg-subtle);
    padding-left: 1rem;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* Sidebar dokumen: daftar dokumen satu grup + sub-bagian dokumen yang dibuka. */
.doc-nav-item {
    margin-bottom: .6rem;
    font-size: .95rem;
}

.doc-nav-item.is-active > a {
    color: var(--bs-primary);
    font-weight: 700;
}

.doc-nav-sections {
    margin: .5rem 0 .25rem;
    padding-left: .75rem;
    border-left: 1px solid var(--bs-border-color);
}

.doc-nav-sections li {
    margin-bottom: .4rem;
    font-size: .85rem;
    line-height: 1.4;
}

.doc-nav-sections a {
    opacity: .75;
}

.doc-nav-sections a.is-current {
    color: var(--bs-primary);
    font-weight: 600;
    opacity: 1;
}

.doc-toc a,
.doc-toc-mobile a {
    color: inherit;
    text-decoration: none;
}

.doc-toc a:hover,
.doc-toc-mobile a:hover {
    color: var(--bs-primary);
}

.doc-toc-mobile {
    background-color: #f4f3f1;
    border-radius: 12px;
    padding: .9rem 1.1rem;
}

.doc-body {
    font-size: 1.05rem;
    line-height: 1.85;
}

.doc-body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    scroll-margin-top: 100px;
}

.doc-body h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 1.75rem;
    margin-bottom: .75rem;
    scroll-margin-top: 100px;
}

.doc-body h2:first-child,
.doc-body h3:first-child {
    margin-top: 0;
}

.doc-body ul,
.doc-body ol {
    padding-left: 1.4rem;
}

.doc-body li {
    margin-bottom: .35rem;
}

.doc-body a {
    color: var(--bs-primary);
}

.doc-body table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.doc-body th,
.doc-body td {
    border: 1px solid rgba(0, 0, 0, .1);
    padding: .5rem .75rem;
}

.doc-body blockquote {
    border-left: 4px solid var(--bs-primary);
    background-color: #f8f7f5;
    padding: .75rem 1rem;
    margin: 1.25rem 0;
}

/* =====================================================================
 * Perbaikan responsif HP (2 Oktober 2026)
 * 1. Hero: topbar homepage position:fixed, jadi konten hero diberi
 *    jarak atas setinggi topbar + ruang napas -- logo tidak menempel /
 *    menimpa judul. Topbar di HP juga sedikit lebih tinggi.
 * 2. Fitur Unggulan di HP: 1 baris kartu yang digeser (bukan 2 baris
 *    padat). Tiap kartu tinggi sama, teks di atas & gambar di bawah
 *    (gambar tidak lagi absolute di belakang teks), jadi tidak menumpuk.
 * ===================================================================== */
.hero-slide .container.py-5 {
    padding-top: 7rem !important;
}

@media (max-width: 991.98px) {
    .site-topbar {
        padding-top: .75rem;
        padding-bottom: .75rem;
    }

    .hero-slide .container.py-5 {
        padding-top: 7.5rem !important;
        padding-bottom: 3rem !important;
    }
}

@media (max-width: 767.98px) {
    .features-bento {
        grid-template-rows: none;
        grid-auto-flow: column;
        grid-auto-columns: 80vw;
        grid-auto-rows: auto;
        gap: 12px;
    }

    .feature-tile,
    .feature-tile--big,
    .feature-tile--wide,
    .feature-tile--tall {
        grid-row: auto;
        grid-column: auto;
        height: 300px;
        display: flex;
        flex-direction: column;
    }

    .feature-tile .feature-tile-text {
        max-width: 100%;
        padding: 18px 18px 8px;
    }

    .feature-tile .feature-tile-title,
    .feature-tile--big .feature-tile-title {
        font-size: 1.1rem;
    }

    .feature-tile .feature-tile-desc {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .feature-tile .feature-tile-art {
        position: static;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        height: auto;
        padding: 4px 16px 16px;
    }

    .feature-tile .feature-tile-art img {
        object-position: center bottom;
    }
}

/* ===================== Menu Layanan (dropdown navbar) ===================== */
.nav-services .dropdown-toggle::after {
    border: 0;
    content: "\F282"; /* bi-chevron-down */
    font-family: "bootstrap-icons";
    font-size: .7em;
    vertical-align: .05em;
    margin-left: .35rem;
    transition: transform .2s ease;
}

.nav-services .dropdown-toggle.show::after { transform: rotate(180deg); }

.services-menu {
    min-width: 21rem;
    padding: .75rem;
    margin-top: .5rem !important;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(40, 20, 15, .16);
}

.services-menu-label {
    padding: .25rem .6rem .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #a39a96;
}

.service-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem .75rem;
    border-radius: 14px;
    color: #1f1a17;
    text-decoration: none;
    transition: background-color .2s ease;
}

.service-item:hover,
.service-item:focus-visible,
.service-item.is-active { background: #fff4ef; color: #1f1a17; }

.service-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.25rem;
    transition: transform .2s ease;
}

.service-icon--peach { background: #ffe3da; color: var(--bs-primary); }
.service-icon--sun { background: #fff0c7; color: #b7791f; }
.service-icon--mint { background: #dcf3e6; color: #23885a; }
.service-icon--sky { background: #e1edfb; color: #2f6fba; }

.service-item:hover .service-icon { transform: scale(1.06) rotate(-4deg); }

.service-text { flex: 1; min-width: 0; line-height: 1.35; }
.service-text strong { display: block; font-size: .95rem; }
.service-text small { display: block; color: #7a716d; white-space: normal; }

.service-arrow {
    color: var(--bs-primary);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .2s ease, transform .2s ease;
}

.service-item:hover .service-arrow,
.service-item.is-active .service-arrow { opacity: 1; transform: none; }

/* Desktop: panel muncul halus dan ikut terbuka saat kursor diarahkan. */
@media (min-width: 992px) {
    .services-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        left: 50%;
        transform: translate(-50%, 8px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }

    .services-menu.show,
    .nav-services:hover .services-menu { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
    .nav-services:hover .dropdown-toggle::after { transform: rotate(180deg); }
    .nav-services::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .75rem; } /* jembatan supaya hover tidak putus */
}

/* HP: menyatu di dalam menu hamburger. */
@media (max-width: 991.98px) {
    .services-menu { min-width: 0; box-shadow: none; background: #fff8f5; margin-top: .25rem !important; }
}

/* =====================================================================
 * Hero terang (frontend/partials/hero.blade.php), senada dengan halaman
 * produk (/tiket, /kursus, /invoice, /whatsapp): latar krem + pola titik, teks gelap, ilustrasi alur dengan "arus" kuning.
 * Topbar di atasnya tetap transparan tapi teks menunya gelap
 * (.site-topbar--on-light, lihat topbar.blade.php & frontend.js).
 * ===================================================================== */
.hero-light {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #1f1a17;
    background-color: #fff7f2;
    background-image:
        radial-gradient(ellipse 50% 60% at 100% 0%, rgba(255, 200, 87, .38), transparent 70%),
        radial-gradient(ellipse 45% 60% at 0% 100%, rgba(219, 91, 76, .16), transparent 70%),
        radial-gradient(circle, rgba(219, 91, 76, .1) 1px, transparent 1.5px);
    background-size: auto, auto, 22px 22px;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1.25rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    background: #fff;
    color: #6b6461;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(219, 91, 76, .12);
}

.hero-eyebrow .bi { color: var(--bs-primary); }

.hero-light .pd-rotate {
    display: inline-block;
    color: var(--bs-primary);
    transition: opacity .25s ease, transform .25s ease;
}

.hero-light .pd-rotate.is-out { opacity: 0; transform: translateY(6px); }

.hero-light .hero-content h1 {
    -webkit-text-stroke: 0;
    line-height: 1.1;
}

.hero-light .hero-description {
    color: #6b6461;
    font-weight: 500;
    line-height: 1.8;
    text-align: left;
}

.hero-btn { font-weight: 700; border-radius: 14px; padding: .8rem 1.5rem; }
.hero-btn-ghost { background: #fff; border: 1px solid rgba(219, 91, 76, .3); color: var(--bs-primary); }
.hero-btn-ghost:hover { background: #ffece6; color: var(--bs-primary); }

.hero-chips { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.5rem; color: #6b6461; }
.hero-chips .bi { color: #23885a; margin-right: .25rem; }

/* Ilustrasi alur di latar terang + efek mengikuti mouse. */
.hero-parallax { transition: transform .3s ease-out; }
.hero-light .hero-flow-rail { stroke: rgba(219, 91, 76, .12); }
.hero-light .hero-flow-line { stroke: #f0a093; }
.hero-light .hero-flow-dot { fill: #f59e0b; filter: drop-shadow(0 0 6px rgba(245, 158, 11, .9)); }
.hero-light .hero-flow-card { filter: drop-shadow(0 10px 24px rgba(60, 30, 20, .13)); }
.hero-flow-link { cursor: pointer; text-decoration: none; }
.hero-flow-link .hero-flow-card { transition: stroke .2s ease; }
.hero-flow-link:hover .hero-flow-card,
.hero-flow-link:focus-visible .hero-flow-card { stroke: var(--bs-primary); stroke-width: 2.5; }

.hero-light .carousel-indicators [data-bs-target] { background-color: var(--bs-primary); }

/* Topbar transparan di atas hero terang: teks menu gelap, tanpa bayangan teks. */
.site-topbar--on-light:not(.topbar-scrolled) .navbar-nav .nav-link { text-shadow: none; }
.site-topbar--on-light:not(.topbar-scrolled) .navbar-toggler { border-color: rgba(0, 0, 0, .15); }
.site-topbar--on-light .navbar-toggler-icon { filter: none; }



/* =====================================================================
 * Kontak modern (kontak.blade.php): latar terang dari .hero-light, panel
 * merah berisi kanal kontak (live chat selalu ada, WA/email/alamat bila
 * diisi di Pengaturan Web), form dengan topik berupa pilihan pil.
 * ===================================================================== */
.contact-page { padding: 4.5rem 0 5rem; }
.contact-title { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
.contact-highlight { color: var(--bs-primary); }

.contact-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: 24px;
    color: #fff;
    background-color: var(--bs-primary);
    background-image:
        radial-gradient(ellipse 60% 50% at 100% 0%, rgba(255, 200, 87, .45), transparent 70%),
        radial-gradient(circle, rgba(255, 255, 255, .14) 1px, transparent 1.5px);
    background-size: auto, 20px 20px;
    box-shadow: 0 24px 50px rgba(219, 91, 76, .28);
    display: flex;
    flex-direction: column;
}

.contact-art { display: flex; flex-direction: column; gap: .5rem; margin-top: auto; padding-top: 2rem; }
.contact-bubble { align-self: flex-start; max-width: 85%; margin: 0; padding: .6rem .9rem; border-radius: 4px 16px 16px 16px; background: rgba(255, 255, 255, .2); font-size: .9rem; animation: float-soft 6s ease-in-out infinite; }
.contact-bubble--out { align-self: flex-end; border-radius: 16px 4px 16px 16px; background: #fff; color: #1f1a17; animation-delay: -3s; }

.contact-panel-lead { color: rgba(255, 255, 255, .85); margin-bottom: 1.5rem; }

.contact-panel .contact-channel {
    width: 100%;
    border: 0;
    background: rgba(255, 255, 255, .96);
    color: #1f1a17;
    cursor: pointer;
}

.contact-panel div.contact-channel { cursor: default; }
.contact-panel .contact-channel .bi-arrow-right { color: var(--bs-primary); transition: transform .2s ease; }
.contact-panel .contact-channel:hover .bi-arrow-right { transform: translateX(4px); }
.contact-channel-hint { color: #7a716d; }
.contact-channel-icon--chat { background: #fff4d6; color: #b7791f; }

.contact-links { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px dashed rgba(255, 255, 255, .4); }
.contact-links a { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; color: #fff; text-decoration: none; font-weight: 600; }
.contact-links a:hover { text-decoration: underline; }

.contact-page .contact-form-card { border: 0; border-radius: 24px; box-shadow: 0 24px 50px rgba(60, 30, 20, .1); }

.contact-topics { display: flex; flex-wrap: wrap; gap: .5rem; }

.contact-topic {
    padding: .5rem 1rem;
    border: 1px solid rgba(219, 91, 76, .25);
    border-radius: 999px;
    background: #fff;
    color: #6b6461;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.contact-topic:hover { background: #fff4ef; }
.btn-check:checked + .contact-topic { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.btn-check:focus-visible + .contact-topic { box-shadow: 0 0 0 .2rem rgba(219, 91, 76, .25); }

.contact-field { position: relative; }
.contact-field > .bi { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #a39a96; pointer-events: none; }
.contact-field .contact-input { padding-left: 2.6rem; }
.contact-page .contact-input { background: #faf7f5; border-color: transparent; }
.contact-page .contact-input:focus { background: #fff; border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(219, 91, 76, .15); }