* {
    font-family: "Plus Jakarta Sans", sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 0; /* sesuaikan dengan tinggi navbar */
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

.navbar {
    background-color: #fff;
}

/* ===== Navbar: sembunyi saat scroll ke bawah ===== */
.navbar.fixed-top {
    transition: transform 0.3s ease;
}

.navbar--hidden {
    transform: translateY(-100%);
}

/* Tetap tampil kalau ada link navbar yang sedang difokus keyboard */
.navbar--hidden:focus-within {
    transform: none;
}

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

.navbar .nav-link {
    margin-right: 1.5rem;
    font-size: 16px;
}

@media (max-width: 767.98px) {
    .navbar .navbar-brand img {
        height: 44px;
    }
}

#hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#hero h1 {
    font-size: 72px;
    font-weight: Bold;
    color:#B6192A;
    text-align: center;
}

#hero p {
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 3rem;
}

#hero .btn-hero {
    font-size: 16px;
    font-weight: Bold;
    border-radius: 3rem;
    padding: 14px 20px;
    min-width: 15rem;
}

#hero .btn-primary {
    color: #B6192A;
    background-color: #FFCECC;
    border-color: #FFCECC;
    margin-right: 12px;
}

#hero .btn-secondary {
    color: #4B4B4B;
    background-color: #EEEEEE;
    border-color: #EEEEEE;
}

@media (max-width: 767.98px) {
    #hero h1 {
        font-size: 40px;
    }

    #hero p {
        font-size: 8px;
        padding: 12px 10px;
        min-width: 10rem;
        margin-bottom: 2rem;
    }

    #hero .btn-hero {
        font-size: 12px;
        min-width: 10rem;
        padding: 12px 10px;
    }
}

/* =========================================
   ANIMASI HERO (tambahan baru)
   ========================================= */

#hero .horas {
    display: inline-block;          /* supaya bisa di-transform (scale/translate) */
    position: relative;
    transform-origin: center center;
    will-change: transform;
}

#hero .hero-typed .char {
    position: relative;
}

/* --- State awal: semua disembunyikan, tapi tetap memakan tempat
       sehingga posisi asli "Horas" bisa diukur --- */
#hero.hero-animate .horas,
#hero.hero-animate .hero-typed {
    visibility: hidden;
}

/* huruf yang sudah "diketik" muncul satu per satu */
#hero .hero-typed .char.is-visible {
    visibility: visible;
}

#hero.hero-animate .hero-sub,
#hero.hero-animate .tombol {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s ease, transform .7s ease;
}

#hero.hero-animate .tombol {
    transition-delay: .25s;         /* tombol muncul sedikit setelah teks */
}

/* --- State akhir (ditambahkan oleh JS setelah mengetik selesai) --- */
#hero.hero-animate.is-done .hero-sub,
#hero.hero-animate.is-done .tombol {
    opacity: 1;
    transform: none;
}

/* --- Kursor ketik --- */
#hero .caret::after {
    content: "";
    position: absolute;
    top: 12%;
    bottom: 12%;
    right: -0.12em;
    width: max(2px, 0.05em);
    background: currentColor;
    animation: hero-caret .8s steps(1) infinite;
}

@keyframes hero-caret {
    50% { opacity: 0; }
}

/* ===== Section Testimoni (slider) ===== */
.testimoni {
    background-color: #fde4e4;
    padding: 80px 0 100px;
    overflow: hidden; /* foto miring & slide di luar layar tidak bikin scroll horizontal */
}

.testimoni__title {
    color: #b6192a;
    font-weight: 700;
}

.testimoni__subtitle {
    color: #4a4a4a;
    max-width: 480px;
    margin: 0 auto;
}

/* State awal: judul 2x lebih besar, subjudul tersembunyi */
.scroll-zoom {
    overflow: hidden; /* teks yang diperbesar tidak bikin scroll horizontal */
}

.scroll-zoom .scroll-zoom__title {
    opacity: 0;
    transform: scale(2);
    transform-origin: center center;
}

.scroll-zoom .scroll-zoom__text {
    opacity: 0;
}

.scroll-zoom .scroll-zoom__content {
    opacity: 0;
    transform: translateY(5rem);
}

/* State akhir: saat section masuk layar
   (transition ditaruh di sini supaya hanya berjalan saat animasi dimulai) */
.scroll-zoom.is-visible .scroll-zoom__title {
    opacity: 1;
    transform: none;
    transition:
        opacity .3s ease,
        transform .9s cubic-bezier(.22, 1, .36, 1) .2s; /* muncul besar dulu, lalu mengecil */
}

.scroll-zoom.is-visible .scroll-zoom__text {
    opacity: 1;
    transition: opacity .7s ease 1.1s;
}

.scroll-zoom.is-visible .scroll-zoom__content {
    opacity: 1;
    transform: translateY(0);
    transition: .7s ease 1.5s;
}

/* Slider: biarkan foto miring & bayangan kartu terlihat utuh */
.testimoni .testimoni-swiper {
    overflow: visible;
    padding-bottom: 60px; /* ruang untuk item yang posisinya turun */
    --swiper-wrapper-transition-timing-function: linear;
}

.testimoni-swiper .swiper-slide {
    width: 300px;
}

/* Satu item = foto + kartu kutipan.
   Posisi, kemiringan, dan letak kartu diatur JS sesuai slot di layar. */
.testi {
    position: relative;
    width: 300px;
    height: 310px;
}

.testi,
.testi__photo,
.testi__card {
    transition-property: transform;
    transition-timing-function: linear;
}

.testi__photo {
    display: block;
    width: 200px;
    aspect-ratio: 4 / 5;
    background-color: #ebbfbf; /* placeholder, tertutup kalau ada foto */
    border-radius: 12px;
    object-fit: cover;
}

.testi__card {
    position: absolute;
    top: 0;
    left: 0;
    width: 190px;
    background: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    font-size: 0.8rem;
    line-height: 1.4;
}

.testi__quote { color: #4a4a4a; margin-bottom: 6px; }
.testi__name  { color: #2b2b2b; margin-bottom: 0; }

/* --- HP: posisi seragam, kartu di tengah bawah foto (JS tidak dipakai) --- */
@media (max-width: 767.98px) {
    .testimoni { padding: 56px 0 40px; }
    .testimoni-swiper { padding-bottom: 0; }
    .testimoni-swiper .swiper-slide { width: 260px; }

    .testi { width: 260px; }

    .testi__photo { margin: 0 auto; }

    .testi__card {
        top: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ===== Section Keunggulan (slider) ===== */
.keunggulan {
    padding: 80px 0 100px;
    overflow: hidden; /* kartu terpotong di kiri-kanan tidak bikin scroll horizontal */
}

.keunggulan__eyebrow {
    color: #b6192a;
    font-size: 1rem;
    margin-bottom: 4px;
}

.keunggulan__title {
    color: #b6192a;
    font-weight: 700;
    margin-bottom: 40px;
}

.keunggulan-swiper {
    overflow: visible;
}

/* Lebar tiap slide diatur di sini, bukan di JS (slidesPerView: 'auto') */
.keunggulan-swiper .swiper-slide {
    width: 270px;
    height: auto;
}

/* --- Kartu (satu gambar utuh) --- */
.fitur-card {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 18px;
    overflow: hidden; /* sudut gambar ikut membulat */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fitur-card img {
    display: block;
    width: 100%;
    height: auto;
}

.fitur-card:hover,
.fitur-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15);
}

/* --- Modal --- */
.fitur-modal .modal-content {
    position: relative;
    padding: 56px 48px;
    border: 0;
    border-radius: 20px;
    background-color: rgba(182, 25, 42, 0.88);
    color: #fff;
    text-align: center;
    backdrop-filter: blur(6px);
}

.fitur-modal .btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
}

.fitur-modal__title {
    font-weight: 700;
    margin-bottom: 20px;
}

.fitur-modal__body {
    margin-bottom: 0;
    line-height: 1.6;
}

/* Fase 51e: isi modal = HTML detail dari DB (disanitasi) — paragraf/daftar di dalam wadah <div> */
.fitur-modal__body > :last-child { margin-bottom: 0; }
.fitur-modal__body ul,
.fitur-modal__body ol { display: inline-block; text-align: left; }

/* Fase 51e: placeholder kartu Keunggulan saat file gambar tidak ada (rasio sama dengan gambar kartu 540×789) */
.fitur-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 540 / 789;
    background-color: #eeeeee;
}

/* Latar di belakang modal ikut blur (berlaku untuk semua modal Bootstrap) */
.modal-backdrop.show {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
}

@media (max-width: 575.98px) {
    .keunggulan { padding: 56px 0; }
    .keunggulan-swiper .swiper-slide { width: 240px; }
    .fitur-modal .modal-content { padding: 48px 24px 32px; }
}

/* ===== Section Fitur Keamanan ===== */
.keamanan {
    background-color: #191919;
    padding: 80px 0 100px;
    overflow: hidden;
}

.keamanan .text {
    max-width: 70%; /* bikin "Fitur Keamanan" jadi 2 baris */
}

.keamanan .keamanan__title {
    color: #f6a9a3;
    font-size: clamp(40px, 27.27px + 3.39vw, 68px);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 12px;
}

.keamanan .keamanan__subtitle {
    color: #f6a9a3;
    margin-bottom: 0;
    font-size: clamp(18px, 13.45px + 1.21vw, 28px);
    opacity: 0;
    transform: translateY(5rem);
    transition: 0.7s ease;
    transition-delay: 0.2s;
}

.keamanan.is-visible .keamanan__subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* --- Kartu --- */
.keamanan .safety-card {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 5 / 7;
    padding: 32px;
    overflow: hidden;
    background-color: #d32a2f; /* warna yang terlihat saat hover */
    color: #fff;
    text-decoration: none;
    transition: 0.35s ease;
    opacity: 0;
    transform: translateX(5rem);
}

.keamanan.is-visible .safety-card {
    opacity: 1;
    transform: translateX(0);
    transition-delay: calc(min(var(--i, 0), 8) * 0.2s);
}

/* Gambar menutupi seluruh kartu */
.safety-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.35s ease;
    transform: translate(0, 0), scale(1);
}

/* Teks selalu di atas gambar */
.safety-card__title,
.safety-card__desc,
.safety-card__more {
    position: relative;
    z-index: 1;
}

.safety-card__title {
    font-size: clamp(18px, 13.45px + 1.21vw, 28px);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0;
    transition: color 0.35s ease;
    max-width: 80%;
}

/* Deskripsi & "Pelajari" tersembunyi dulu */
.safety-card__desc,
.safety-card__more {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.safety-card__desc {
    margin: auto 0 0;  /* dorong ke bawah, di atas "Pelajari" */
    font-size: 0.9rem;
    line-height: 1.4;
}

.safety-card__more {
    margin-top: 16px;
    align-self: flex-end;
    font-size: 0.8rem;
}

/* --- Saat hover / fokus keyboard --- */
.safety-card:hover,
.safety-card:focus-visible {
    transform: scale(1.03);
    z-index: 2;
    color: #fff;
}

.safety-card:hover .safety-card__img,
.safety-card:focus-visible .safety-card__img {
    opacity: 0;
    filter: blur(8px);
    transform: translate(10rem, 10rem) scale(2);
}

.safety-card:hover .safety-card__desc,
.safety-card:hover .safety-card__more,
.safety-card:focus-visible .safety-card__desc,
.safety-card:focus-visible .safety-card__more {
    opacity: 1;
    transform: translateY(0);
}

/* Kartu bergambar terang (mis. Unmatch): judul gelap, jadi putih saat hover */
.safety-card--light .safety-card__title { color: #1c1c1c; }
.safety-card--light:hover .safety-card__title,
.safety-card--light:focus-visible .safety-card__title { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .safety-card,
    .safety-card * {
        transition: none !important;
    }
}

@media (max-width: 575.98px) {
    .keamanan { padding: 56px 0; }
    .safety-card { padding: 12px; }
    .safety-card__desc { font-size: 0.8rem; }
}

/* ===== Section Pilihan Paket ===== */
.paket {
    padding: 80px 0;
    overflow: hidden;
}

.paket .paket__title {
    color: #4a4a4a;
    font-size: clamp(28px, 22.55px + 1.45vw, 40px);
    font-weight: 700;
    margin-bottom: 48px;
    opacity: 0;
    transform: translateY(5rem);
}

.paket.is-visible .paket__title {
    opacity: 1;
    transform: translateY(0);
    transition: 0.7s ease;
}

/* --- Kartu --- */
.paket .paket-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 420px;
    padding: 28px 24px 24px;
    border-radius: 12px;
    background-color: var(--paket-bg);
    color: var(--paket-text);
    opacity: 0;
    transition: 0.7s ease;
    transition-delay: 0.5s;
}

.paket .col-md-6:nth-child(odd) .paket-card {
    transform: translateX(5rem);
}

.paket .col-md-6:nth-child(even) .paket-card {
    transform: translateX(-5rem);
}

.paket.is-visible .col-md-6 .paket-card {
    opacity: 1;
    transform: translateX(0);
}

.paket-card__name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 28px;
}

.paket-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.paket-card__features li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    line-height: 1.3;
    padding: 4px 0;
}

/* Fitur yang tidak termasuk: dipudarkan */
.paket-card__features li.is-excluded {
    opacity: 0.45;
}

.paket-card__features .bi {
    flex-shrink: 0;
    font-size: 14px;
}

.paket-card__desc {
    margin: auto 0 0; /* dorong ke paling bawah kartu */
    font-size: 13px;
    line-height: 1.4;
}

/* Warna tiap paket */
.paket-card--basic  { --paket-bg: #eeeeee; --paket-text: #4a4a4a; }
.paket-card--mula   { --paket-bg: #ffcccb; --paket-text: #4a4a4a; }
.paket-card--dongan { --paket-bg: #4a4a4a; --paket-text: #ffffff; }
.paket-card--nauli  { --paket-bg: #a50a1a; --paket-text: #ffffff; }

@media (max-width: 575.98px) {
    .paket { padding: 56px 0; }
    .paket-card { min-height: 0; }
}

/* ===== Section Counter ===== */
.counter-section {
    padding: 100px 0;
    overflow: hidden;
}

.counter-section__title {
    color: #b6192a;
    font-size: clamp(36px, 26.91px + 2.42vw, 56px);
    font-weight: 800;
    line-height: 1.05;
    max-width: 9em; /* "Mereka sudah / daftar duluan" jadi 2 baris */
    margin-bottom: 12px;
}

.counter-section__subtitle {
    color: #4a4a4a;
    font-size: clamp(18px, 15.27px + 0.73vw, 24px);
    margin-bottom: 24px;
}

.btn-daftar {
    display: inline-block;
    padding: 10px 36px;
    border-radius: 999px;
    background-color: #ffcccb;
    color: #b6192a;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.btn-daftar:hover,
.btn-daftar:focus-visible {
    background-color: #ffb3b1;
    color: #b6192a;
}

/* --- Kotak angka (pil putih) --- */
.counter {
    position: relative;
    font-size: clamp(72px, 54.73px + 4.61vw, 110px); /* ukuran angka; ukuran pil ikut */
    width: 2.6em;
    height: 1.45em;
    margin: 0 auto;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
}

.counter__reel {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit; /* angka atas & bawah terpotong mengikuti bentuk pil */
}

.counter__num {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    color: #2b2b2b;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums; /* lebar semua digit sama, angka tidak goyang */
    will-change: transform;
}

@media (max-width: 991.98px) {
    .counter-section { padding: 64px 0; }
    .counter { margin-top: 48px; }
}

/* ===== Section Artikel ===== */
.artikel {
    padding: 80px 0;
    overflow: hidden;
}

.artikel .artikel__title {
    color: #4a4a4a;
    font-size: clamp(28px, 22.55px + 1.45vw, 40px);
    font-weight: 700;
    margin-bottom: 48px;
    opacity: 0;
    transform: translateX(100%) scale(3);
    transition: 0.7s ease;
}

.artikel.is-visible .artikel__title {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* --- Kartu --- */
.artikel .artikel-card {
    position: relative;
    opacity: 0;
    transition: 0.7s ease;
    transition-delay: 0.5s;
}

.artikel .col-md-6:nth-child(odd) .artikel-card {
    transform: translateY(5rem);
}

.artikel .col-md-6:nth-child(even) .artikel-card {
    transform: translateY(-5rem);
}

.artikel.is-visible .col-md-6 .artikel-card {
    opacity: 1;
    transform: translateY(0);
}

/* Berlaku untuk <div> placeholder maupun <img> asli */
.artikel-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    background-color: #eeeeee;
    margin-bottom: 16px;
}

.artikel-card__headline {
    color: #4a4a4a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 2px;
    transition: color 0.2s ease;
}

.artikel-card__link {
    color: #4a4a4a;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Hover di mana pun pada kartu: judul jadi merah */
.artikel-card:hover .artikel-card__headline,
.artikel-card:focus-within .artikel-card__headline {
    color: #b6192a;
}

@media (max-width: 575.98px) {
    .artikel { padding: 56px 0; }
}

/* ===== Section FAQ ===== */
.faq {
    background-color: #fde4e4;
    padding: 80px 0;
}

.faq__title {
    color: #b6192a;
    font-size: clamp(28px, 22.55px + 1.45vw, 40px);
    font-weight: 700;
    margin-bottom: 24px;
}

/* --- Kartu kategori (tombol tab) --- */
.faq-cat {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px 18px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #fff;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-cat__name {
    display: block;
    color: #2b2b2b;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
}

.faq-cat__more {
    color: #b6192a;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq-cat:hover {
    box-shadow: 0 8px 20px rgba(182, 25, 42, 0.08);
}

/* Kategori yang sedang dipilih */
.faq-cat.active {
    border-color: #b6192a;
}

/* --- Isi kategori --- */
.faq-content {
    margin-top: 48px;
}

.faq-content__title {
    color: #b6192a;
    font-size: clamp(24px, 20.36px + 0.97vw, 32px);
    font-weight: 700;
    margin-bottom: 16px;
}

/* --- Accordion: tiap pertanyaan jadi kotak putih terpisah --- */
.faq-accordion {
    --bs-accordion-border-width: 0;
    --bs-accordion-bg: #fff;
    --bs-accordion-active-bg: #fff;
    --bs-accordion-active-color: #b6192a;
    --bs-accordion-btn-color: #2b2b2b;
    --bs-accordion-btn-padding-x: 16px;
    --bs-accordion-btn-padding-y: 14px;
    --bs-accordion-body-padding-x: 16px;
    --bs-accordion-body-padding-y: 0;
    --bs-accordion-btn-icon-width: 12px;
    --bs-accordion-btn-icon-transform: rotate(90deg); /* panah kanan → bawah saat dibuka */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232b2b2b'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b6192a'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}

.faq-accordion .accordion-item {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.faq-accordion .accordion-button {
    font-size: 14px;
    font-weight: 500;
}

/* Garis fokus hanya untuk pengguna keyboard, dan di dalam kotak (tidak terpotong) */
.faq-accordion .accordion-button:focus {
    box-shadow: none;
}

.faq-accordion .accordion-button:focus-visible {
    box-shadow: inset 0 0 0 2px #b6192a;
}

.faq-accordion .accordion-body {
    padding-bottom: 16px;
    color: #4a4a4a;
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 575.98px) {
    .faq { padding: 56px 0; }
    .faq-content { margin-top: 32px; }
}

/* ===== Section Masukan ===== */
.masukan {
    background-color: #930010;
    padding: 100px 0 40px;
}

.masukan-card {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    padding: 56px 24px 24px;
    border-radius: 16px;
    background: #fff;
    text-align: center;
}

/* Lingkaran logo yang "menempel" di tepi atas kartu */
.masukan-card__badge {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #d42a30;
}

.masukan-card__badge img {
    height: 30px;
    width: auto;
}

.masukan-card__title {
    color: #4a4a4a;
    font-size: clamp(18px, 15.27px + 0.73vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

.masukan-form {
    display: flex;
    gap: 8px;
}

.masukan-form__input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: 8px;
    background-color: #eeeeee;
    font-size: 14px;
}

.masukan-form__input:focus {
    outline: 2px solid #b6192a;
    outline-offset: 0;
}

.masukan-form__btn {
    padding: 12px 24px;
    border: 0;
    border-radius: 8px;
    background-color: #4a4a4a;
    color: #fff;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.masukan-form__btn:hover,
.masukan-form__btn:focus-visible {
    background-color: #2b2b2b;
}

.masukan-card__notice {
    margin: 12px 0 0;
    font-size: 14px;
}

.masukan-card__notice--ok    { color: #2e7d32; }
.masukan-card__notice--error { color: #b6192a; }

/* ===== Footer ===== */
.site-footer {
    background-color: #930010;
    color: #fff;
    padding: 80px 0 40px;
}

.site-footer__logo {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin-bottom: 40px;
}

.site-footer__download {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

/* Kotak QR code (placeholder) — bisa diganti <img> */
.site-footer__qr {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 12px;
    background: #fff;
    object-fit: cover;
}

.site-footer__download-text {
    color: #ffb3b1;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
}

.site-footer__heading {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

.site-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer__links li {
    margin-bottom: 6px;
}

.site-footer__links a {
    color: #fff;
    font-size: 12px;
    text-decoration: none;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
    text-decoration: underline;
}

.site-footer__copy {
    font-size: 12px;
    font-weight: 700;
    margin: 0;
}

@media (max-width: 575.98px) {
    .masukan { padding: 80px 0 24px; }
    .masukan-form { flex-direction: column; }
    .site-footer { padding: 56px 0 32px; }
}
/* =========================================
   HALAMAN DETAIL FITUR KEAMANAN (Fase 52a) — /fitur-keamanan/{slug}
   Warna dari desain pemilik project (persis): latar #1e1e1e, SEMUA teks putih, pink #FFAFAC untuk eyebrow + item aktif daftar + hover.
   Kontras: putih di #1e1e1e ± 16,7:1; #FFAFAC di #1e1e1e ± 9,5:1. Font clamp() px (rumus §8, 375 → 1200px).
   Desktop (≥ 992px): grid isi 7/12 + daftar 3/12 (celah 2/12), daftar rata atas dengan eyebrow.
   HP (< 992px): eyebrow → daftar (satu baris geser horizontal) → isi; teks rata kiri.
   52a-perbaikan: section setinggi layar (100vh lalu 100dvh), kelompok isi di tengah vertikal pada area di bawah navbar (footer baru terlihat
   setelah scroll; isi lebih tinggi dari layar → section memanjang); navbar varian gelap (.navbar--gelap, hanya halaman ini).
   ========================================= */
.fk-detail {
    --fk-latar: #1e1e1e;
    --fk-teks: #ffffff;
    --fk-pink: #FFAFAC;
    background-color: var(--fk-latar);
    /* Tinggi navbar fixed-top = logo 48px + padding brand 2×5px + padding navbar 2×8px (HP: logo 44px → 70px). Ubah tinggi logo
       navbar (.navbar .navbar-brand img) ⇒ ubah angka ini. */
    --fk-navbar-tinggi: 74px;
}

/* Section setinggi layar: dimulai di y=0 di BELAKANG navbar fixed-top, padding-top = tinggi navbar → area isi = layar − navbar; kelompok isi
   (eyebrow + daftar + isi) di tengah vertikal area itu (align-items pada flex). min-height, BUKAN height: isi lebih tinggi → memanjang. */
.fk-detail__main {
    color: var(--fk-teks);
    min-height: 100vh;
    min-height: 100dvh;              /* sesudah 100vh: browser tanpa dvh memakai baris di atas; HP = tinggi tampak (bilah alamat) */
    box-sizing: border-box;
    padding-top: var(--fk-navbar-tinggi);
    display: flex;
    align-items: center;
}

.fk-detail__main > .container {
    width: 100%;
    padding-top: clamp(40px, 30.91px + 2.42vw, 60px);
    padding-bottom: clamp(40px, 30.91px + 2.42vw, 60px);
}

@media (max-width: 767.98px) {
    .fk-detail {
        --fk-navbar-tinggi: 70px;
    }
}

/* Navbar varian gelap — HANYA halaman detail (partials/navbar, $tema 'gelap'). .navbar.navbar--gelap (2 kelas) supaya menang atas
   .navbar[data-bs-theme=dark] Bootstrap dan latar putih .navbar beranda; data-bs-theme="dark" = ikon hamburger terang. */
.navbar.navbar--gelap {
    background-color: var(--fk-latar);
    --bs-navbar-color: var(--fk-teks);
    --bs-navbar-hover-color: var(--fk-pink);
    --bs-navbar-active-color: var(--fk-pink);
}

.navbar.navbar--gelap .nav-link {
    color: var(--fk-teks);
}

.navbar.navbar--gelap .nav-link:hover,
.navbar.navbar--gelap .nav-link:focus-visible {
    color: var(--fk-pink);
}

.navbar.navbar--gelap .nav-link:focus-visible,
.navbar.navbar--gelap .navbar-toggler:focus-visible {
    outline: 2px solid var(--fk-pink);
    outline-offset: 2px;
    box-shadow: none;
}

.fk-detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "eyebrow"
        "nav"
        "isi";
}

.fk-detail__eyebrow {
    grid-area: eyebrow;
    color: var(--fk-pink);
    font-size: clamp(14px, 13.09px + 0.24vw, 16px);
    font-weight: 600;
    margin: 0 0 12px;
}

.fk-detail__nav {
    grid-area: nav;
    min-width: 0;
    margin-bottom: 28px;
}

.fk-detail__daftar {
    list-style: none;
    margin: 0;
    padding: 2px 0 6px;
    display: flex;
    gap: 24px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;           /* tanpa scrollbar tebal (Firefox) */
    -webkit-overflow-scrolling: touch;
}

.fk-detail__daftar::-webkit-scrollbar {
    display: none;                   /* idem (Chrome/Safari) */
}

.fk-detail__link {
    color: var(--fk-teks);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
}

.fk-detail__link:hover,
.fk-detail__link:focus-visible,
.fk-detail__link[aria-current="page"] {
    color: var(--fk-pink);
}

.fk-detail__isi {
    grid-area: isi;
    min-width: 0;
    transition: opacity .18s ease;
}

/* fitur-keamanan.js: dipasang sesaat setelah isi diganti lalu dilepas → isi memudar masuk */
.fk-detail__isi--masuk {
    opacity: 0;
    transition: none;
}

.fk-detail__judul {
    color: var(--fk-teks);
    font-size: clamp(36px, 28.73px + 1.94vw, 52px);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 clamp(20px, 15.45px + 1.21vw, 32px);
    overflow-wrap: anywhere;
}

/* h1 tabindex="-1" hanya target fokus program (pembaca layar), bukan kontrol */
.fk-detail__judul:focus {
    outline: none;
}

.fk-detail__teks {
    font-size: clamp(15px, 14.55px + 0.12vw, 16px);
    line-height: 1.8;
    text-align: left;
}

.fk-detail__teks > :last-child {
    margin-bottom: 0;
}

.fk-detail__teks p,
.fk-detail__teks ul,
.fk-detail__teks ol {
    margin: 0 0 1.1em;
}

.fk-detail__teks h2,
.fk-detail__teks h3 {
    color: var(--fk-teks);
    font-weight: 700;
    line-height: 1.3;
    margin: 1.4em 0 .6em;
}

.fk-detail__teks h2 { font-size: 1.4em; }
.fk-detail__teks h3 { font-size: 1.2em; }

.fk-detail__teks a {
    color: var(--fk-pink);
}

.fk-detail__pager {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: clamp(40px, 34.18px + 1.55vw, 56px);
    font-size: 14px;
    line-height: 1.5;
}

.fk-detail__pager-link {
    color: var(--fk-teks);
    text-decoration: none;
}

.fk-detail__pager-link:hover,
.fk-detail__pager-link:focus-visible {
    color: var(--fk-pink);
}

@media (min-width: 992px) {
    .fk-detail__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
        grid-template-rows: auto 1fr;
        column-gap: calc(100% * 2 / 12);
        grid-template-areas:
            "eyebrow nav"
            "isi     nav";
    }

    .fk-detail__nav {
        align-self: start;
        margin-bottom: 0;
    }

    .fk-detail__daftar {
        flex-direction: column;
        gap: 18px;
        overflow-x: visible;
        white-space: normal;
        padding: 0;
    }

    .fk-detail__teks {
        text-align: justify;
    }

    .fk-detail__pager {
        flex-direction: row;
        justify-content: space-between;
        gap: 32px;
    }

    .fk-detail__pager-link--next {
        margin-left: auto;
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fk-detail__isi { transition: none; }
}