/* ============================================================
   LANDING PAGE KAYONG PBB — Palet Emerald & Gold
   Diadaptasi dari landing.blade.php kayong-sso.
   File ini KHUSUS untuk landing page (welcome.blade.php).
   ============================================================ */

:root {
    --lk-deep:     #032A20;   /* hijau tua (bg landing sso) */
    --lk-green-1:  #064E3B;   /* hijau tua-emerald */
    --lk-green-2:  #065F46;
    --lk-emerald:  #059669;   /* primer */
    --lk-emerald2: #10B981;
    --lk-emerald3: #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 (kx-ink) */
    --lk-text-2:   #4F635C;
}

/* ---------- Umum: teks & heading ---------- */
#hero .glass-card .hero-title,
#about h2, #about h5, #about h3,
#features h2, #features h4,
#about .lead,
.feature-card-new h4 {
    color: var(--lk-text) !important;
}

.text-cap,
.about-feature-text p,
.contact-info-content .text-cap {
    color: var(--lk-text-2) !important;
}

/* ---------- Hero ---------- */
#hero {
    background: radial-gradient(1200px 600px at 70% -10%, var(--lk-emerald) 0%, transparent 60%),
                radial-gradient(900px 500px at 10% 110%, var(--lk-green-2) 0%, transparent 55%),
                linear-gradient(135deg, var(--lk-deep) 0%, var(--lk-green-1) 55%, var(--lk-dark) 100%) !important;
}

/* ---------- Navbar (samakan dengan landing kayong-sso) ---------- */
#header.navbar,
.navbar.navbar-absolute-top,
.navbar-absolute-top {
    background: rgba(3, 42, 32, 0.72) !important;
    background-color: rgba(3, 42, 32, 0.72) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(3, 42, 32, 0.35);
}

#header.navbar.is-fixed,
#header.navbar-nav-wrap,
#header .navbar-nav-wrap {
    /* pastikan konten wrap tidak menimpa latar */
    background: transparent !important;
}

#header.navbar .navbar-nav .nav-link,
#header .navbar-nav .nav-link {
    color: #ffffff !important;
}
#header.navbar .navbar-nav .nav-link:hover,
#header .navbar-nav .nav-link:hover {
    color: #34d399 !important;
}

/* Tombol Masuk / Dashboard -> hijau emerald */
#header .btn.btn-primary,
#header .btn-primary,
.navbar .btn.btn-primary {
    background: linear-gradient(135deg, var(--lk-emerald), var(--lk-emerald2)) !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-emerald3), var(--lk-emerald2)) !important;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.45);
}

/* ---------- Kartu hero (samakan dengan kartu sso-gate) ---------- */
.glass-card {
    background: rgba(2, 48, 40, 0.55) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4) !important;
    padding: 2rem !important;
    text-align: center;
    color: #ffffff;
}

.glass-card .hero-title,
.glass-card h3,
.glass-card h2 {
    color: #ffffff !important;
}

.glass-card .hero-description {
    color: rgba(255, 255, 255, 0.75) !important;
}

#hero .btn-hero {
    background: linear-gradient(135deg, var(--lk-emerald), var(--lk-emerald2)) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.35);
}

.glass-card::before {
    background: none !important;
    box-shadow: none !important;
}

/* ---------- Section Why ---------- */
.why-section-bg {
    background: linear-gradient(180deg, var(--lk-emerald3) 0%, var(--lk-green-1) 45%, var(--lk-deep) 100%) !important;
}

.why-section-bg h2,
.why-section-bg .lead {
    color: #ffffff !important;
}

.why-card {
    background: rgba(16, 185, 129, 0.10) !important;
    border: 1px solid rgba(212, 175, 55, 0.25);
}

.why-card::before {
    background: radial-gradient(circle at 50% 0, rgba(52, 211, 153, 0.35), transparent 70%);
}

.why-card-icon,
.about-feature-icon,
.feature-icon-new {
    background: linear-gradient(145deg, var(--lk-emerald), var(--lk-emerald3)) !important;
    box-shadow: 0 6px 14px rgba(5, 150, 105, 0.35);
}

.why-card-icon i,
.about-feature-icon,
.feature-icon-new {
    color: #ffffff !important;
}

/* ---------- Section About ---------- */
#about {
    background: linear-gradient(180deg, var(--lk-latar-muda) 0%, var(--lk-latar) 100%) !important;
}

.about-image-bg-shape {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.35), rgba(212, 175, 55, 0.25));
}

.about-feature-card {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(5, 150, 105, 0.20);
}

/* ---------- Section Features ---------- */
.features-section {
    background: linear-gradient(180deg, var(--lk-latar) 0%, var(--lk-latar-muda) 100%) !important;
    position: relative;
}

.feature-card-new {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(5, 150, 105, 0.18);
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.08);
}

.text-muted-feature {
    color: var(--lk-text-2) !important;
}

/* ---------- Section Contact ---------- */
.contact-section-gradient {
    background: linear-gradient(180deg, var(--lk-dark) 0%, var(--lk-deep) 100%) !important;
    position: relative;
}

.contact-unified-card {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.9), rgba(3, 42, 32, 0.95)) !important;
    border: 1px solid rgba(212, 175, 55, 0.30);
}

.contact-info-content .text-cap {
    color: var(--lk-gold) !important;
}

.contact-details-list i {
    color: var(--lk-gold) !important;
}

#contact .btn.btn-primary {
    background: linear-gradient(135deg, var(--lk-emerald), var(--lk-emerald2));
    border: none;
}

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

.footer-widget h5.widget-title {
    color: var(--lk-gold) !important;
}

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

/* ---------- Tombol umum ---------- */
.btn-brown {
    background: linear-gradient(135deg, var(--lk-emerald), var(--lk-emerald2)) !important;
    border-color: transparent;
    color: #ffffff;
}

.btn-brown:hover {
    background: linear-gradient(135deg, var(--lk-emerald3), var(--lk-emerald2)) !important;
    border-color: transparent;
    color: #ffffff;
}

/* ============================================================
   POLA BATIK — diadaptasi dari landing kayong-sso.
   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;
}

/* Bangun agar konten selalu di atas layer pola */
#why > .container,
#about > .container,
#features > .container,
#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.06) 0% 8px, transparent 8px),
        radial-gradient(circle at 75% 25%, rgba(16, 185, 129, 0.05) 0% 8px, transparent 8px),
        radial-gradient(circle at 25% 75%, rgba(16, 185, 129, 0.05) 0% 8px, transparent 8px),
        radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.06) 0% 8px, transparent 8px),
        radial-gradient(circle, rgba(16, 185, 129, 0.04) 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.05) 90deg 91deg, transparent 92deg 180deg, transparent 269deg, rgba(16, 185, 129, 0.05) 270deg 271deg, transparent 272deg),
        radial-gradient(circle at 0 0, rgba(16, 185, 129, 0.07) 0% 3px, transparent 3px),
        radial-gradient(circle at 100% 0, rgba(16, 185, 129, 0.07) 0% 3px, transparent 3px),
        radial-gradient(circle at 0 100%, rgba(16, 185, 129, 0.07) 0% 3px, transparent 3px),
        radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.07) 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.04) 10px 11px, transparent 11px 20px),
        repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(16, 185, 129, 0.04) 10px 11px, transparent 11px 20px),
        radial-gradient(circle, rgba(16, 185, 129, 0.06) 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.04)'/%3E%3Ccircle cx='50' cy='40' r='3' fill='rgba(16,185,129,0.06)'/%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.03) 90deg 91deg, transparent 92deg 180deg, transparent 269deg, rgba(16, 185, 129, 0.03) 270deg 271deg, transparent 272deg),
        conic-gradient(from 45deg, transparent 0deg 89deg, rgba(13, 148, 88, 0.02) 90deg 91deg, transparent 92deg 180deg, transparent 269deg, rgba(13, 148, 88, 0.02) 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.04) 12px 13px, transparent 13px 25px),
        repeating-linear-gradient(55deg, transparent, transparent 12px, rgba(16, 185, 129, 0.03) 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.15;
    width: 100%;
    height: 20px;
    display: block;
}