/* ================================================================
   LAYANAN KAMI — PAGE CSS
   ERGE ASIA Design System
   Uses core.css variables: --teal-*, --gold, --gray-*, etc.
   ================================================================ */

/* ===== HERO ===== */
.lk-hero {
    position: relative;
    padding: 30px 0 0 0;
    background: linear-gradient(170deg, var(--teal-50) 0%, rgba(230,250,249,0.25) 50%, var(--white) 100%);
    overflow: hidden;
}
.lk-hero-grain {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 0;
}
.lk-hero-orb {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(44,197,189,0.06), transparent 70%);
    pointer-events: none; z-index: 0;
}
.lk-hero-orb-1 { width: 600px; height: 600px; top: -200px; right: -150px; }
.lk-hero-orb-2 { width: 400px; height: 400px; bottom: -100px; left: -100px; }

.lk-hero .container { position: relative; z-index: 2; }
.lk-hero-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 50px; align-items: center;
}

.lk-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px;
    background: linear-gradient(135deg, var(--teal-100), var(--teal-200));
    border: 1px solid rgba(44,197,189,0.15);
    border-radius: 100px; font-size: 13px; font-weight: 600;
    color: var(--teal-700); margin-bottom: 20px;
}
.lk-hero-badge i { font-size: 11px; color: var(--gold); }

.lk-hero h1 {
    font-size: 30px; font-weight: 800;
    line-height: 1.18; margin-bottom: 20px; color: var(--gray-900);
}
.lk-hero h1 span {
    background: linear-gradient(135deg, var(--teal-600), var(--teal-800));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.lk-hero-text {
    font-size: 15px; color: var(--gray-500);
    line-height: 1.75; margin-bottom: 32px; max-width: 480px;
}
.lk-hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Hero Visual — Floating Cards Around Globe */
.lk-hero-visual {
    display: flex; align-items: center; justify-content: center;
    min-height: 380px; position: relative;
}
.lk-hero-cards {
    position: relative; width: 340px; height: 340px;
}

/* Center globe */
.lk-hero-center {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 120px; height: 120px;
    display: flex; align-items: center; justify-content: center;
}
.lk-hero-ring {
    position: absolute; border-radius: 50%;
    border: 1.5px dashed rgba(44,197,189,0.15);
    top: 50%; left: 50%;
}
.lk-hero-ring-1 {
    width: 280px; height: 280px;
    margin: -140px 0 0 -140px;
    animation: lkRingSpin 30s linear infinite;
}
.lk-hero-ring-2 {
    width: 340px; height: 340px;
    margin: -170px 0 0 -170px;
    border-style: solid; border-color: rgba(44,197,189,0.06);
    animation: lkRingSpin 40s linear infinite reverse;
}
@keyframes lkRingSpin { to { transform: rotate(360deg); } }

.lk-hero-center-core {
    width: 90px; height: 90px; border-radius: 50%;
    background: linear-gradient(145deg, var(--teal-500), var(--teal-700));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 32px rgba(44,197,189,0.35), 0 0 0 8px rgba(44,197,189,0.08);
    animation: lkFloat 5s ease-in-out infinite;
    z-index: 2; position: relative;
}
.lk-hero-center-core i { font-size: 32px; color: white; }
@keyframes lkFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Floating service cards */
.lk-float-card {
    position: absolute; z-index: 3;
    background: var(--white);
    border-radius: 14px; padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid rgba(44,197,189,0.08);
    font-size: 13px; font-weight: 600; color: var(--gray-700);
    white-space: nowrap;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lk-float-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(44,197,189,0.15);
}
.lk-fc-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lk-fc-icon i { font-size: 14px; color: white; }
.lk-fc-icon-alt {
    background: linear-gradient(135deg, var(--teal-400), var(--teal-600));
}

.lk-fc-1 { top: 80px; left: -50px; animation: lkCardFloat1 4s ease-in-out infinite; }
.lk-fc-2 { top: 30px; right: 0px; animation: lkCardFloat2 4.5s ease-in-out infinite; }
.lk-fc-3 { bottom: 40px; left: 0px; animation: lkCardFloat3 5s ease-in-out infinite; }
.lk-fc-4 { bottom: 60px; right: -30px; animation: lkCardFloat4 4.2s ease-in-out infinite; }

@keyframes lkCardFloat1 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(6px, -8px); }
}
@keyframes lkCardFloat2 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-6px, -10px); }
}
@keyframes lkCardFloat3 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(8px, 6px); }
}
@keyframes lkCardFloat4 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-8px, 8px); }
}


/* ===== SECTION 2: LAYANAN UTAMA ===== */
.lk-layanan { background: var(--white); }

.lk-services {
    display: flex; flex-direction: column; gap: 56px;
}

.lk-svc {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 48px; align-items: center;
}
.lk-svc-reverse { direction: rtl; }
.lk-svc-reverse > * { direction: ltr; }

/* Image */
.lk-svc-img {
    position: relative; border-radius: var(--r-xl);
    overflow: hidden;
}
.lk-svc-img img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: var(--r-xl);
    transition: transform 0.5s ease;
}
.lk-svc:hover .lk-svc-img img { transform: scale(1.04); }
.lk-svc-img-badge {
    position: absolute; top: 16px; left: 16px;
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(44,197,189,0.3);
}
.lk-svc-reverse .lk-svc-img-badge { left: auto; right: 16px; }
.lk-svc-img-badge i { font-size: 18px; color: white; }

/* Body */
.lk-svc-body { padding: 8px 0; }
.lk-svc-num {
    font-size: 48px; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, var(--teal-200), var(--teal-100));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin-bottom: 8px; letter-spacing: -2px;
}
.lk-svc-body h3 {
    font-size: 22px; font-weight: 800; color: var(--gray-900);
    margin-bottom: 12px; line-height: 1.3;
}
.lk-svc-body p {
    font-size: 14px; color: var(--gray-500); line-height: 1.75;
    margin-bottom: 16px;
}

.lk-svc-tags {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.lk-svc-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 20px;
    background: var(--teal-50); color: var(--teal-700);
    font-size: 12px; font-weight: 600;
    border: 1px solid rgba(44,197,189,0.12);
}
.lk-svc-tag i { font-size: 9px; color: var(--teal-500); }

.lk-svc-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--teal-600) !important;
    transition: var(--ease);
}
.lk-svc-link:hover { gap: 14px; color: var(--teal-700) !important; }
.lk-svc-link i { font-size: 12px; transition: transform 0.3s ease; }
.lk-svc-link:hover i { transform: translateX(4px); }




/* ===== SECTION 3: FITUR PLATFORM ===== */
.lk-fitur { position: relative; overflow: hidden; }
.lk-fitur-bg {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 40%, var(--gray-50) 100%);
    z-index: 0;
}
.lk-fitur-bg::before {
    content: ''; position: absolute;
    top: -100px; right: -100px;
    width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, rgba(44,197,189,0.04), transparent 70%);
}
.lk-fitur .container { position: relative; z-index: 1; }

/* Bento Grid */
.lk-fitur-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 18px;
}
/* First 2 cards span more */
.lk-ft-card-0 { grid-column: span 2; }

.lk-ft-card {
    background: var(--white);
    border-radius: var(--r-lg); padding: 28px 24px;
    border: 1.5px solid rgba(0,0,0,0.04);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02), 0 4px 16px rgba(0,0,0,0.03);
    transition: var(--ease);
    position: relative; overflow: hidden;
}
.lk-ft-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal-500), var(--teal-300));
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s ease;
}
.lk-ft-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04), 0 16px 48px rgba(0,0,0,0.07);
    border-color: rgba(44,197,189,0.12);
}
.lk-ft-card:hover::after { transform: scaleX(1); }

.lk-ft-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(44,197,189,0.2);
}
.lk-ft-icon i { font-size: 19px; color: white; }

.lk-ft-card h4 {
    font-size: 15px; font-weight: 700; color: var(--gray-900);
    margin-bottom: 8px;
}
.lk-ft-card p {
    font-size: 13px; color: var(--gray-500); line-height: 1.65;
    margin-bottom: 14px;
}

.lk-ft-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-ft-tags span {
    padding: 3px 10px; border-radius: 20px;
    background: var(--teal-50); color: var(--teal-700);
    font-size: 11px; font-weight: 600;
    border: 1px solid rgba(44,197,189,0.1);
}

.lk-fitur-swiper { display: none; }

/* .reveal → already in core.css */


/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Tablet */
@media (max-width: 991.98px) {
    .lk-hero-inner { grid-template-columns: 1fr; gap: 30px; text-align: center; }
    .lk-hero-text { margin: 0 auto 28px; }
    .lk-hero-actions { justify-content: center; }
    .lk-hero-visual { min-height: 300px; }
    .lk-hero-cards { width: 300px; height: 300px; }
    .lk-hero-center-core { width: 76px; height: 76px; }
    .lk-hero-center-core i { font-size: 26px; }
    .lk-hero-ring-1 { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
    .lk-hero-ring-2 { width: 300px; height: 300px; margin: -150px 0 0 -150px; }

    .lk-svc { grid-template-columns: 1fr; gap: 24px; }
    .lk-svc-reverse { direction: ltr; }
    .lk-svc-reverse .lk-svc-img-badge { left: 16px; right: auto; }

    .lk-fitur-bento { grid-template-columns: repeat(2, 1fr); }
    .lk-ft-card-0, .lk-ft-card-1 { grid-column: span 1; }

}

/* Mobile */
@media (max-width: 575.98px) {
    .lk-hero { padding: 24px 0 50px; }
    .lk-hero h1 { font-size: 26px; }
    .lk-hero-text { font-size: 14px; }
    .lk-hero-visual { min-height: 260px; }
    .lk-hero-cards { width: 260px; height: 260px; }
    .lk-float-card { padding: 8px 12px; font-size: 11px; border-radius: 10px; }
    .lk-fc-icon { width: 30px; height: 30px; border-radius: 8px; }
    .lk-fc-icon i { font-size: 12px; }
    .lk-hero-center-core { width: 64px; height: 64px; }
    .lk-hero-center-core i { font-size: 22px; }
    .lk-hero-ring-1 { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
    .lk-hero-ring-2 { width: 260px; height: 260px; margin: -130px 0 0 -130px; }

    .section { padding: 50px 0; }

    /* Services: single column stack */
    .lk-services { gap: 36px; }
    .lk-svc-num { font-size: 36px; }
    .lk-svc-body h3 { font-size: 18px; }

    /* Features: hide grid, show swiper */
    .lk-fitur-bento { display: none; }
    .lk-fitur-swiper { display: block; }
    
    
    .lk-fc-1 { top: 40px; left: -20px; animation: lkCardFloat1 4s ease-in-out infinite; }
    .lk-fc-2 { top: 20px; right: 0px; animation: lkCardFloat2 4.5s ease-in-out infinite; }
    .lk-fc-3 { bottom: 20px; left: 0px; animation: lkCardFloat3 5s ease-in-out infinite; }
    .lk-fc-4 { bottom: 40px; right: -20px; animation: lkCardFloat4 4.2s ease-in-out infinite; }
}