/* ============================================================
   LANDING PAGE KAYONG BPHTB — Palet Emerald & Gold
   Tema diselaraskan dengan landing-kayong.css (kayong-pbb) agar
   nuansa visual identik, sementara konten & aset ilustrasi
   tetap milik BPHTB (Tugu Naga Kayong Utara + glass card).

   File ini KHUSUS untuk landing page (welcome.blade.php).
   ============================================================ */

:root {
    --lk-deep:        #032A20; /* hijau tua (bg hero) */
    --lk-green-1:     #064E3B; /* hijau tua-emerald */
    --lk-green-2:     #065F46;
    --lk-emerald:     #059669; /* primer */
    --lk-emerald-2:   #10B981;
    --lk-emerald-3:   #34D399; /* aksen terang */
    --lk-teal:        #14B8A6;
    --lk-dark:        #0F766E;
    --lk-latar:       #F6FDF9; /* bg terang section */
    --lk-latar-muda:  #ECFDF5; /* hijau muda sangat pucat */
    --lk-gold:        #D4AF37; /* aksen emas */
    --lk-gold-tua:    #A8841D;
    --lk-text:        #10362A; /* teks emerald gelap */
    --lk-text-2:      #4F635C;

    /* Override palet global BPHTB pada konteks landing saja */
    --bphtb-primary:  #059669;
    --bphtb-gold:     #D4AF37;
}

/* ---------- Override warna kustom BPHTB (cakup landing) ---------- */
.welcome-landing {
    background-color: var(--lk-latar);
    color: var(--lk-text-2);
}

.welcome-landing .text-color-primary {
    color: var(--lk-emerald) !important;
}

.welcome-landing .text-color-secondary {
    color: var(--lk-gold) !important;
}

.welcome-landing .text-color-info {
    color: var(--lk-text) !important;
}

.welcome-landing .bg-color-primary {
    background: linear-gradient(180deg, var(--lk-latar-muda) 0%, var(--lk-latar) 100%) !important;
}

.welcome-landing .bg-color-secondary {
    background: linear-gradient(135deg, #085322 0%, #0f7a30 50%, #297a0d 100%) !important;
}

.welcome-landing .text-color-warning {
    color: var(--lk-gold-tua) !important;
}

/* ---------- Umum: heading & teks (override header stylesheet) ---------- */
.welcome-landing #hero h3,
.welcome-landing #hero h2,
.welcome-landing #why h2,
.welcome-landing #why p,
.welcome-landing #about h2,
.welcome-landing #about h5,
.welcome-landing #about h3,
.welcome-landing #about p,
.welcome-landing #features h2,
.welcome-landing #features h4,
.welcome-landing .feature-card-new h4 {
    color: inherit;
}

.welcome-landing .text-cap {
    color: var(--lk-text-2) !important;
}

/* ---------- Navbar — putih translusen (glass ringan) ---------- */
#header.navbar,
.navbar.navbar-absolute-top,
.navbar-absolute-top {
    background: rgba(255, 255, 255, 0.88) !important;
    background-color: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 2px 16px rgba(3, 42, 32, 0.10);
    border-bottom: 1px solid rgba(3, 42, 32, 0.06);
}

#header.navbar .navbar-nav .nav-link,
#header .navbar-nav .nav-link {
    color: var(--lk-text) !important;
}

#header.navbar .navbar-nav .nav-link:hover,
#header .navbar-nav .nav-link:hover {
    color: var(--lk-emerald) !important;
}

#header .btn.btn-primary,
#header .btn-primary,
.navbar .btn.btn-primary {
    background: linear-gradient(135deg, var(--lk-emerald), var(--lk-emerald-2)) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 50px;
    padding: .55rem 1.4rem;
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.35);
    transition: all .3s ease;
}

#header .btn.btn-primary:hover,
#header .btn-primary:hover {
    background: linear-gradient(135deg, var(--lk-emerald-3), var(--lk-emerald-2)) !important;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.45);
}

/* Brand logo di navbar — pakai logo berwarna (bukan versi putih) */
.navbar-brand img {
    max-width: 200px;
}

/* Ikon toggler mobile — harus gelap karena navbar sekarang terang */
#header .navbar-toggler,
#header .navbar-toggler i,
.navbar-absolute-top .navbar-toggler,
.navbar-absolute-top .navbar-toggler i {
    color: var(--lk-text) !important;
    border-color: rgba(3, 42, 32, 0.20) !important;
}

/* ---------- Hero ---------- */
.welcome-landing #hero {
    position: relative;
    background-color: var(--lk-deep);
    background-image: url('../../image/background/hero-realistik-bg.png');
    background-image: -webkit-image-set(
        url('../../image/background/hero-realistik-bg.webp') 1x,
        url('../../image/background/hero-realistik-bg.png') 1x
    );
    background-image: image-set(
        url('../../image/background/hero-realistik-bg.webp') 1x,
        url('../../image/background/hero-realistik-bg.png') 1x
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 6rem 0 4rem;
}

.welcome-landing #hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(3, 42, 32, 0.88) 0%,
        rgba(3, 42, 32, 0.62) 32%,
        rgba(3, 42, 32, 0.18) 58%,
        rgba(3, 42, 32, 0.42) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Fade gelap vertikal di bagian bawah hero.
   Tujuannya: menghilangkan garis transisi keras antara hero dan #why,
   dengan mendorong tepi bawah hero menjadi solid var(--lk-deep),
   sehingga #why yang juga mulai dari var(--lk-deep) menyatu sempurna. */
.welcome-landing #hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(3, 42, 32, 0) 55%,
        rgba(3, 42, 32, 0.35) 80%,
        rgba(3, 42, 32, 0.88) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Bersihkan warisan dari #text di public/css/custom.css (legacy hero lama):
   text-shadow putih 4px bikin teks tampak "2 layer", top:35% bikin turun. */
.welcome-landing #hero #text {
    position: relative;
    top: auto;
    z-index: 5;
    text-shadow: none;
}

/* Panel teks hero (translusen, rata kiri) */
.welcome-landing .hero-panel {
    position: relative;
    z-index: 5;
    padding: 1.5rem 0;
}

.welcome-landing .hero-panel .hero-title {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff !important;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.welcome-landing .hero-panel .hero-title .accent {
    color: var(--lk-emerald-3);
}

.welcome-landing .hero-panel .hero-description {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.75rem;
    max-width: 32rem;
}

/* Trust badges di bawah CTA */
.welcome-landing .hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.welcome-landing .hero-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 600;
}

.welcome-landing .hero-trust-item i {
    color: var(--lk-gold);
    font-size: 1.1rem;
}

/* Scroll indicator */
.welcome-landing .hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity .3s ease;
}

.welcome-landing .hero-scroll:hover { opacity: 1; }

.welcome-landing .hero-scroll-mouse {
    width: 26px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.welcome-landing .hero-scroll-mouse span {
    width: 4px;
    height: 8px;
    border-radius: 2px;
    background: var(--lk-emerald-3);
    animation: kp-scroll-dot 1.6s ease-in-out infinite;
}

@keyframes kp-scroll-dot {
    0%, 100% { transform: translateY(0);    opacity: 1; }
    50%      { transform: translateY(10px); opacity: 0.3; }
}

.welcome-landing .hero-scroll-text {
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1199.98px) {
    .welcome-landing .hero-panel .hero-title { font-size: 2.75rem; }
}

@media (max-width: 991.98px) {
    .welcome-landing #hero { padding: 7rem 0 3rem; min-height: auto; }
    .welcome-landing .hero-scroll { display: none; }
}

@media (max-width: 767.98px) {
    .welcome-landing .hero-panel .hero-title { font-size: 2.25rem; }
    .welcome-landing .hero-panel .hero-description { font-size: 1rem; }
    .welcome-landing #hero::after {
        background: linear-gradient(180deg,
            rgba(3, 42, 32, 0.55) 0%,
            rgba(3, 42, 32, 0.35) 40%,
            rgba(3, 42, 32, 0.85) 100%);
    }
}

@media (max-width: 575.98px) {
    .welcome-landing #hero { padding-top: 6.5rem; padding-bottom: 1rem; }
    .welcome-landing .hero-panel .hero-title { font-size: 1.9rem; }
}

/* ---------- Eyebrow & tombol hero ---------- */
.welcome-landing .hero-eyebrow {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.18);
    color: var(--lk-gold) !important;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(212, 175, 55, 0.35);
}

.welcome-landing .btn-hero {
    background: linear-gradient(135deg, var(--lk-emerald), var(--lk-emerald-2)) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 50px;
    font-weight: 600;
    padding: 0.85rem 1.75rem;
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.45);
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.welcome-landing .btn-hero:hover {
    background: linear-gradient(135deg, var(--lk-emerald-3), var(--lk-emerald-2)) !important;
    box-shadow: 0 10px 26px rgba(16, 185, 129, 0.55);
    transform: translateY(-2px);
    color: #ffffff !important;
}

@media (max-width: 575.98px) {
    .welcome-landing .btn-hero { width: 100%; justify-content: center; }
}

/* ---------- Section Why (Kenapa BPHTB tepat waktu) ---------- */
.welcome-landing #why {
    position: relative;
    overflow: hidden;
    /* Gradasi vertikal gelap → terang.
       - 0%  var(--lk-deep)         : menyatu dengan tepi bawah hero
       - 78% var(--lk-green-2)      : masih gelap, melindungi area kartu
       - 100% var(--lk-latar-muda)  : menyatu dengan tepi atas #about
       Bottom padding ditambah 9rem agar area terang (di atas 80%) jatuh di
       ruang kosong, tidak menimpa kartu & heading. */
    padding: 5rem 0 9rem;
    background: linear-gradient(180deg,
        var(--lk-deep) 0%,
        #053627 22%,
        var(--lk-green-1) 45%,
        var(--lk-green-2) 70%,
        #16806B 84%,
        #6BBFA9 92%,
        #C7ECDE 97%,
        var(--lk-latar-muda) 100%) !important;
    color: #ffffff;
}

.welcome-landing #why h2,
.welcome-landing #why p,
.welcome-landing #why .lead {
    color: #ffffff !important;
}

.welcome-landing #why .text-cap {
    color: var(--lk-gold) !important;
    letter-spacing: 2px;
}

.welcome-landing .why-card {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(212, 175, 55, 0.30);
    border-radius: 18px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: 2rem 1.75rem;
    transition: transform 0.3s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    height: 100%;
}

.welcome-landing .why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.welcome-landing .why-card-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--lk-emerald), var(--lk-emerald-3)) !important;
    box-shadow: 0 6px 14px rgba(5, 150, 105, 0.45);
    transition: transform 0.3s ease;
}

.welcome-landing .why-card-icon i {
    font-size: 1.85rem;
    color: #ffffff !important;
}

.welcome-landing .why-card:hover .why-card-icon {
    transform: scale(1.08);
}

.welcome-landing .why-card .card-title {
    color: #ffffff !important;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.welcome-landing .why-card .card-text {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* --- Bento: kartu utama (besar) --- */
.welcome-landing .why-card-featured {
    padding: 2.25rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.13) !important;
    border: 1px solid rgba(212, 175, 55, 0.40);
    display: flex;
    flex-direction: column;
}

.welcome-landing .why-card-featured .why-card-icon-lg {
    width: 84px;
    height: 84px;
    margin: 0 0 1.5rem;
}

.welcome-landing .why-card-featured .why-card-icon-lg i {
    font-size: 2.25rem;
}

.welcome-landing .why-card-featured .card-text {
    font-size: 1rem;
}

.welcome-landing .why-card-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 1.25rem;
}

.welcome-landing .why-card-list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.92rem;
    margin-bottom: 0.6rem;
}

.welcome-landing .why-card-list li:last-child { margin-bottom: 0; }

.welcome-landing .why-card-list li i {
    color: var(--lk-gold);
    font-size: 1rem;
    flex-shrink: 0;
}

/* --- Bento: kartu kecil --- */
.welcome-landing .why-card-sm {
    padding: 1.5rem;
    text-align: left;
    display: flex;
    align-items: center;
}

.welcome-landing .why-card-icon-sm {
    width: 58px;
    height: 58px;
    margin: 0;
    flex-shrink: 0;
}

.welcome-landing .why-card-icon-sm i { font-size: 1.5rem; }

.welcome-landing .why-card-sm .card-title { margin-bottom: 0.35rem; }

/* ---------- Section About BPHTB ---------- */
.welcome-landing #about {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--lk-latar-muda) 0%, var(--lk-latar) 100%) !important;
    padding: 5rem 0;
}

.welcome-landing #about h2,
.welcome-landing #about h3,
.welcome-landing #about h5,
.welcome-landing #about p {
    color: var(--lk-text) !important;
}

.welcome-landing #about .text-cap {
    color: var(--lk-emerald) !important;
    letter-spacing: 1.5px;
}

.welcome-landing .about-image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.welcome-landing .about-image-bg-shape {
    position: absolute;
    width: 88%;
    height: 88%;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.30), rgba(212, 175, 55, 0.25));
    border-radius: 45% 55% 70% 30% / 30% 60% 40% 70%;
    transition: border-radius 0.5s ease;
}

.welcome-landing .about-image-container:hover .about-image-bg-shape {
    border-radius: 50%;
}

.welcome-landing .about-image {
    position: relative;
    z-index: 1;
    animation: kp-float 6s ease-in-out infinite;
}

@keyframes kp-float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

.welcome-landing .about-feature-card {
    display: flex;
    align-items: flex-start;
    background-color: #ffffff !important;
    border: 1px solid rgba(5, 150, 105, 0.18);
    padding: 1.25rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.welcome-landing .about-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(5, 150, 105, 0.16);
}

.welcome-landing .about-feature-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--lk-emerald), var(--lk-emerald-3)) !important;
    color: #ffffff !important;
    border-radius: 50%;
    font-size: 1.3rem;
    margin-right: 1.25rem;
    box-shadow: 0 4px 10px rgba(5, 150, 105, 0.35);
}

.welcome-landing .about-feature-text h5 {
    color: var(--lk-text) !important;
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.welcome-landing .about-feature-text p {
    color: var(--lk-text-2) !important;
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 0;
}

/* ---------- Section Features / Alur / Jumlah / Jenis ---------- */
.welcome-landing .features-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--lk-latar) 0%, var(--lk-latar-muda) 100%) !important;
    padding: 5rem 0;
}

.welcome-landing .features-section > .container {
    position: relative;
    z-index: 1;
}

.welcome-landing .feature-card-new {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(5, 150, 105, 0.20);
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.welcome-landing .feature-card-new:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 30px rgba(5, 150, 105, 0.18);
}

.welcome-landing .feature-icon-new {
    width: 70px;
    height: 70px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--lk-emerald), var(--lk-emerald-3)) !important;
    color: #ffffff !important;
    font-size: 1.85rem;
    box-shadow: 0 6px 14px rgba(5, 150, 105, 0.35);
    transition: transform 0.3s ease;
}

.welcome-landing .feature-card-new:hover .feature-icon-new {
    transform: rotate(-8deg) scale(1.06);
}

.welcome-landing .feature-card-new h4 {
    color: var(--lk-text) !important;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.welcome-landing .feature-card-new .text-muted-feature {
    color: var(--lk-text-2) !important;
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 0;
}

/* ---------- Timeline Alur Pendaftaran ---------- */
.welcome-landing .bphtb-timeline {
    position: relative;
    padding-top: 0.5rem;
}

/* Garis penghubung horizontal */
.welcome-landing .bphtb-timeline::before {
    content: "";
    position: absolute;
    top: 33px;
    left: 12%;
    right: 12%;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lk-emerald) 0%, var(--lk-gold) 100%);
    opacity: 0.35;
    z-index: 0;
}

.welcome-landing .tl-item {
    position: relative;
    margin-bottom: 1.5rem;
}

.welcome-landing .tl-node {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--lk-emerald), var(--lk-emerald-3));
    color: #ffffff;
    font-weight: 800;
    font-size: 1.15rem;
    border: 5px solid var(--lk-latar);
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.35);
    position: relative;
    z-index: 2;
    transition: transform .3s ease, box-shadow .3s ease;
}

.welcome-landing .tl-item:hover .tl-node {
    transform: scale(1.1);
    box-shadow: 0 10px 24px rgba(5, 150, 105, 0.5);
}

.welcome-landing .tl-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    height: 100%;
    border: 1px solid rgba(5, 150, 105, 0.12);
    box-shadow: 0 8px 22px rgba(5, 150, 105, 0.08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.welcome-landing .tl-item:hover .tl-card {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(5, 150, 105, 0.16);
}

.welcome-landing .tl-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.16);
}

.welcome-landing .tl-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.welcome-landing .tl-card h5 {
    color: var(--lk-emerald) !important;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.welcome-landing .tl-card p {
    color: var(--lk-text-2) !important;
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 0;
}

/* Timeline vertikal di tablet & mobile */
@media (max-width: 991.98px) {
    .welcome-landing .bphtb-timeline::before {
        top: 0;
        bottom: 0;
        left: 33px;
        right: auto;
        width: 3px;
        height: auto;
        background: linear-gradient(180deg, var(--lk-emerald) 0%, var(--lk-gold) 100%);
    }

    .welcome-landing .tl-item {
        padding-left: 5rem;
        margin-bottom: 1.75rem;
    }

    .welcome-landing .tl-node {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
    }

    .welcome-landing .tl-card { text-align: left; }
    .welcome-landing .tl-icon { margin-left: 0; }
}

/* ---------- Statistik (bento + count-up) ---------- */
.welcome-landing #stats { padding: 4rem 0 5rem; }

.welcome-landing .stat-hero-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 2.5rem 2rem;
    background: linear-gradient(135deg, var(--lk-green-1) 0%, var(--lk-deep) 100%);
    color: #ffffff;
    box-shadow: 0 14px 36px rgba(5, 150, 105, 0.28);
    display: flex;
    align-items: center;
}

.welcome-landing .stat-hero-body {
    position: relative;
    z-index: 1;
}

.welcome-landing .stat-hero-label {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lk-gold) !important;
    margin-bottom: 0.75rem;
}

.welcome-landing .stat-hero-value {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    margin-bottom: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.welcome-landing .stat-hero-note {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    margin-bottom: 0;
}

.welcome-landing .stat-hero-icon {
    position: absolute;
    right: -10px;
    bottom: -10px;
    font-size: 9rem;
    color: rgba(52, 211, 153, 0.13);
    z-index: 0;
    pointer-events: none;
}

.welcome-landing .stat-row-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 1.1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(5, 150, 105, 0.12);
    border-left: 4px solid var(--lk-gold);
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.welcome-landing .stat-row-card:hover {
    transform: translateX(4px);
    box-shadow: 0 10px 24px rgba(5, 150, 105, 0.14);
}

.welcome-landing .stat-row-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--lk-text-2);
    font-weight: 600;
    font-size: 0.95rem;
}

.welcome-landing .stat-row-label i { color: var(--lk-emerald); }

.welcome-landing .stat-row-value {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--lk-emerald);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
    .welcome-landing .stat-hero-value { font-size: 3.25rem; }
    .welcome-landing .stat-hero-card { padding: 2rem 1.5rem; }
}

/* ---------- Fitur unggulan: baris bergantian ---------- */
.welcome-landing .feature-row {
    padding: 2.5rem 0;
    border-bottom: 1px solid rgba(5, 150, 105, 0.10);
}

.welcome-landing .feature-row:last-child { border-bottom: none; }

.welcome-landing .feature-visual {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--lk-green-1) 0%, var(--lk-emerald) 100%);
    box-shadow: 0 16px 40px rgba(5, 150, 105, 0.25);
}

.feature-visual .batik-kawung-pattern { opacity: 0.9; }

.welcome-landing .feature-visual-icon {
    position: relative;
    z-index: 1;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.welcome-landing .feature-visual-icon i {
    font-size: 3.25rem;
    color: #ffffff;
}

.welcome-landing .feature-visual-index {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    z-index: 1;
    font-size: 4.5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.16);
    line-height: 1;
}

.welcome-landing .feature-text h3 {
    color: var(--lk-text) !important;
    font-weight: 800;
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.welcome-landing .feature-text > p {
    color: var(--lk-text-2) !important;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.welcome-landing .feature-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.welcome-landing .feature-checklist li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--lk-text);
    font-size: 0.95rem;
    font-weight: 600;
}

.welcome-landing .feature-checklist li i {
    color: var(--lk-emerald);
    font-size: 1.15rem;
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .welcome-landing .feature-visual { min-height: 240px; margin-bottom: 1.5rem; }
    .welcome-landing .feature-text { text-align: left; }
}

/* ---------- Jenis Pendaftaran: tab vertikal ---------- */
.welcome-landing .jenis-nav-wrap {
    background: #ffffff;
    border-radius: 16px;
    padding: 0.75rem;
    border: 1px solid rgba(5, 150, 105, 0.14);
    box-shadow: 0 8px 22px rgba(5, 150, 105, 0.08);
}

.welcome-landing .jenis-nav {
    gap: 0.35rem;
    max-height: 460px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.welcome-landing .jenis-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    color: var(--lk-text);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    transition: all .25s ease;
}

.welcome-landing .jenis-nav .nav-link:hover {
    background: rgba(5, 150, 105, 0.08);
    color: var(--lk-emerald);
}

.welcome-landing .jenis-nav .nav-link.active {
    background: linear-gradient(135deg, var(--lk-emerald), var(--lk-emerald-2));
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.3);
}

.welcome-landing .jenis-nav-num {
    font-size: 0.8rem;
    font-weight: 800;
    opacity: 0.6;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.welcome-landing .jenis-nav-label { flex: 1 1 auto; }

.welcome-landing .jenis-nav-arrow {
    font-size: 0.8rem;
    opacity: 0.5;
    flex-shrink: 0;
    transition: transform .25s ease, opacity .25s ease;
}

.welcome-landing .jenis-nav .nav-link.active .jenis-nav-arrow {
    opacity: 1;
    transform: translateX(3px);
}

.welcome-landing .jenis-panel {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem 2.25rem;
    border: 1px solid rgba(5, 150, 105, 0.14);
    box-shadow: 0 8px 22px rgba(5, 150, 105, 0.08);
    height: 100%;
}

.welcome-landing .jenis-panel-title {
    color: var(--lk-emerald) !important;
    font-weight: 800;
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
}

.welcome-landing .jenis-panel-desc {
    color: var(--lk-text-2) !important;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.welcome-landing .jenis-panel-divider {
    height: 1px;
    background: rgba(5, 150, 105, 0.14);
    margin: 1.25rem 0;
}

.welcome-landing .jenis-panel-subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lk-text) !important;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.welcome-landing .jenis-panel-subtitle i { color: var(--lk-gold); }

.welcome-landing .jenis-berkas-list {
    padding-left: 1.25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.welcome-landing .jenis-berkas-list li {
    color: var(--lk-text-2);
    font-size: 0.95rem;
    line-height: 1.5;
    padding-left: 0.25rem;
}

.welcome-landing .jenis-berkas-list li::marker {
    color: var(--lk-emerald);
    font-weight: 700;
}

.welcome-landing .jenis-berkas-nama { margin-right: 0.5rem; }

.welcome-landing .badge-wajib {
    background: var(--lk-emerald);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
}

.welcome-landing .badge-opsional {
    background: rgba(212, 175, 55, 0.20);
    color: var(--lk-gold-tua);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
}

@media (max-width: 991.98px) {
    .welcome-landing .jenis-nav { max-height: 260px; }
    .welcome-landing .jenis-panel { padding: 1.5rem; }
}

/* ---------- Marquee kanal pembayaran ---------- */
.welcome-landing .payment-marquee {
    overflow: hidden;
    position: relative;
    padding: 1.5rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.welcome-landing .marquee-track {
    display: flex;
    width: max-content;
    animation: kp-marquee 30s linear infinite;
}

.welcome-landing .payment-marquee:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes kp-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .welcome-landing .marquee-track { animation: none; }
}

.welcome-landing .marquee-item {
    flex: 0 0 auto;
    padding: 0 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome-landing .marquee-item img {
    height: 52px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}

.welcome-landing .marquee-item:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.08);
}

/* ---------- CTA band ---------- */
.welcome-landing .cta-band {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--lk-deep) 0%, var(--lk-green-1) 55%, var(--lk-dark) 100%) !important;
    color: #ffffff;
    text-align: center;
}

.cta-band .batik-parang-pattern { opacity: 0.5; }

.welcome-landing .cta-band h2 { color: #ffffff !important; }

.welcome-landing .cta-band .lead { color: rgba(255, 255, 255, 0.8) !important; }

.welcome-landing .btn-hero-ghost {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: none !important;
}

.welcome-landing .btn-hero-ghost:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}

/* ---------- Section FAQ ---------- */
.welcome-landing #faq {
    position: relative;
    overflow: hidden;
    padding: 5rem 0;
    background: linear-gradient(180deg, #ffffff 0%, var(--lk-latar-muda) 100%) !important;
}

.welcome-landing #faq h2 {
    color: var(--lk-text) !important;
    font-weight: 800;
}

.welcome-landing #faq .accordion-item {
    border: 1px solid rgba(5, 150, 105, 0.18);
    border-radius: 12px !important;
    margin-bottom: 0.85rem;
    overflow: hidden;
    background: #ffffff;
}

.welcome-landing #faq .accordion-button {
    font-weight: 600;
    color: var(--lk-text);
    background: #ffffff;
    border: none;
    box-shadow: none !important;
}

.welcome-landing #faq .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.10), rgba(212, 175, 55, 0.08));
    color: var(--lk-emerald);
}

.welcome-landing #faq .accordion-button .color-primary {
    color: var(--lk-gold) !important;
}

.welcome-landing #faq .accordion-body {
    color: var(--lk-text-2);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ---------- Section Kanal Pembayaran ---------- */
.welcome-landing #payment-gateway {
    background: #ffffff;
    padding: 4rem 0;
}

.welcome-landing #payment-gateway h1 {
    color: var(--lk-emerald) !important;
    font-weight: 800;
    font-size: 1.85rem;
    margin-bottom: 1rem;
}

.welcome-landing #payment-gateway p {
    color: var(--lk-text-2) !important;
    line-height: 1.6;
}

.welcome-landing #payment-gateway .btn.btn-primary {
    background: linear-gradient(135deg, var(--lk-emerald), var(--lk-emerald-2)) !important;
    border: none;
    color: #ffffff;
    font-weight: 600;
    border-radius: 50px;
    padding: 0.6rem 1.4rem;
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.35);
}

.welcome-landing #payment-gateway .btn.btn-primary:hover {
    background: linear-gradient(135deg, var(--lk-emerald-3), var(--lk-emerald-2)) !important;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.45);
}

.welcome-landing #payment-gateway .avatar {
    filter: grayscale(0.1);
    transition: transform 0.3s ease, filter 0.3s ease;
}

.welcome-landing #payment-gateway .avatar:hover {
    transform: scale(1.06);
    filter: grayscale(0);
}

/* ---------- Section Contact (Kontak & Peta) ---------- */
.welcome-landing #contact {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--lk-dark) 0%, var(--lk-deep) 100%) !important;
    padding: 5rem 0;
    color: #ffffff;
}

.welcome-landing #contact h2,
.welcome-landing #contact h6,
.welcome-landing #contact p {
    color: #ffffff;
}

.welcome-landing #contact .text-cap {
    color: var(--lk-gold) !important;
    letter-spacing: 1.5px;
}

.welcome-landing .contact-unified-card {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.92), rgba(3, 42, 32, 0.96)) !important;
    border: 1px solid rgba(212, 175, 55, 0.30);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.30);
    z-index: 2;
    position: relative;
}

.welcome-landing .contact-details-list {
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0 0;
}

.welcome-landing .contact-details-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
}

.welcome-landing .contact-details-list i {
    font-size: 1.15rem;
    color: var(--lk-gold);
    margin-right: 1.25rem;
    margin-top: 4px;
    width: 22px;
}

.welcome-landing .contact-details-list h6 {
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--lk-gold) !important;
}

.welcome-landing .contact-details-list a {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.3s ease;
}

.welcome-landing .contact-details-list a:hover {
    color: #ffffff;
}

.welcome-landing .contact-unified-card #map {
    width: 100%;
    height: 100%;
    min-height: 460px;
    border-radius: 0 1.5rem 1.5rem 0;
}

@media (max-width: 991.98px) {
    .welcome-landing .contact-unified-card #map {
        border-radius: 0 0 1.5rem 1.5rem;
        min-height: 320px;
    }
}

/* ---------- Section badge "HUBUNGI KAMI" ala PBB ---------- */
.welcome-landing .section-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.18);
    color: var(--lk-gold) !important;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid rgba(212, 175, 55, 0.35);
}

/* ---------- Footer (gaya PBB 4 kolom) ---------- */
.footer-section {
    background: linear-gradient(180deg, var(--lk-deep) 0%, #021f18 100%) !important;
    color: #ffffff;
    padding: 4rem 0 1.5rem;
}

.footer-widget h5.widget-title {
    color: var(--lk-gold) !important;
    font-weight: 700;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.footer-logo {
    max-width: 200px;
    padding: 8px;
    border-radius: 8px;
}

.footer-links {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

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

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: #ffffff;
    padding-left: 5px;
}

.social-icons {
    display: flex;
    gap: 0.6rem;
}

.social-icons .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: all 0.3s ease;
}

.social-icons .social-link:hover {
    background: linear-gradient(145deg, var(--lk-emerald), var(--lk-emerald-2)) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.footer-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 2rem;
    margin-bottom: 1.25rem;
}

.copyright-text {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

/* ============================================================
   POLA BATIK — diselaraskan dengan landing kayong-pbb.
   Layer dekoratif absolute, alpha emerald sangat rendah,
   pointer-events none agar tidak mengganggu interaksi.
   ============================================================ */
.batik-kawung-pattern,
.batik-parang-pattern,
.batik-ceplok-pattern,
.batik-nitik-pattern,
.batik-sekar-pattern,
.batik-tambal-pattern {
    pointer-events: none;
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.welcome-landing #why > .container,
.welcome-landing #about > .container,
.welcome-landing #features > .container,
.welcome-landing #contact > .container {
    position: relative;
    z-index: 1;
}

/* --- Kawung (lingkaran 4 sudut) --- */
.batik-kawung-pattern {
    background-image:
        radial-gradient(circle at 25% 25%, rgba(16, 185, 129, 0.07) 0% 8px, transparent 8px),
        radial-gradient(circle at 75% 25%, rgba(16, 185, 129, 0.06) 0% 8px, transparent 8px),
        radial-gradient(circle at 25% 75%, rgba(16, 185, 129, 0.06) 0% 8px, transparent 8px),
        radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.07) 0% 8px, transparent 8px),
        radial-gradient(circle, rgba(16, 185, 129, 0.05) 0% 12px, transparent 12px);
    background-size: 80px 80px;
}

/* --- Ceplok (silang + titik sudut) --- */
.batik-ceplok-pattern {
    background-image:
        conic-gradient(from 45deg, transparent 0deg 89deg, rgba(16, 185, 129, 0.06) 90deg 91deg, transparent 92deg 180deg, transparent 269deg, rgba(16, 185, 129, 0.06) 270deg 271deg, transparent 272deg),
        radial-gradient(circle at 0 0, rgba(16, 185, 129, 0.08) 0% 3px, transparent 3px),
        radial-gradient(circle at 100% 0, rgba(16, 185, 129, 0.08) 0% 3px, transparent 3px),
        radial-gradient(circle at 0 100%, rgba(16, 185, 129, 0.08) 0% 3px, transparent 3px),
        radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.08) 0% 3px, transparent 3px);
    background-size: 60px 60px;
}

/* --- Nitik (grid + titik) --- */
.batik-nitik-pattern {
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(16, 185, 129, 0.05) 10px 11px, transparent 11px 20px),
        repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(16, 185, 129, 0.05) 10px 11px, transparent 11px 20px),
        radial-gradient(circle, rgba(16, 185, 129, 0.07) 0% 2px, transparent 2px);
    background-size: 20px 20px, 20px 20px, 10px 10px;
}

/* --- Sekar (bunga via data-URI SVG) --- */
.batik-sekar-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 5 C55 15 65 20 75 15 C70 25 75 35 85 40 C75 45 70 55 75 65 C65 60 55 65 50 75 C45 65 35 60 25 65 C30 55 25 45 15 40 C25 35 30 25 25 15 C35 20 45 15 50 5Z' fill='rgba(16,185,129,0.05)'/%3E%3Ccircle cx='50' cy='40' r='3' fill='rgba(16,185,129,0.08)'/%3E%3C/svg%3E");
    background-size: 120px 120px;
}

/* --- Tambal (kotak berlapis) --- */
.batik-tambal-pattern {
    background-image:
        conic-gradient(from 45deg, transparent 0deg 89deg, rgba(16, 185, 129, 0.04) 90deg 91deg, transparent 92deg 180deg, transparent 269deg, rgba(16, 185, 129, 0.04) 270deg 271deg, transparent 272deg),
        conic-gradient(from 45deg, transparent 0deg 89deg, rgba(13, 148, 88, 0.03) 90deg 91deg, transparent 92deg 180deg, transparent 269deg, rgba(13, 148, 88, 0.03) 270deg 271deg, transparent 272deg);
    background-position: 0 0, 20px 20px;
    background-size: 80px 80px, 40px 40px;
}

/* --- Parang (garis miring) --- */
.batik-parang-pattern {
    background:
        repeating-linear-gradient(-55deg, transparent, transparent 12px, rgba(13, 148, 88, 0.05) 12px 13px, transparent 13px 25px),
        repeating-linear-gradient(55deg, transparent, transparent 12px, rgba(16, 185, 129, 0.04) 12px 13px, transparent 13px 25px);
}

/* --- Divider horizontal bergaris --- */
.batik-divider {
    background-image: repeating-linear-gradient(90deg, transparent, transparent 15px, var(--lk-emerald) 15px, var(--lk-emerald) 16px, transparent 16px, transparent 30px);
    opacity: 0.18;
    width: 100%;
    height: 20px;
    display: block;
}