/* =========================================================
   AHLI MUDA K3 LINGKUNGAN
   PREMIUM LANDING PAGE
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    color: #102235;
    background: #ffffff;

    line-height: 1.7;

    overflow-x: hidden;
}

a {
    text-decoration: none;
}

button {
    font-family: inherit;
}

.ak3l-page {
    width: 100%;
    overflow: hidden;
}

.ak3l-container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}


/* =========================================================
   HERO
========================================================= */

.ak3l-hero {

    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            135deg,
            #03101f 0%,
            #062544 48%,
            #0874bd 100%
        );

    overflow: hidden;
}

.ak3l-hero::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -200px;
    top: -200px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(69,173,255,.30),
            transparent 68%
        );
}

.ak3l-hero::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -300px;
    bottom: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,105,190,.30),
            transparent 70%
        );
}

.ak3l-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3,16,31,.95),
            rgba(3,16,31,.55),
            rgba(3,16,31,.15)
        );
}

.ak3l-hero-content {

    position: relative;

    z-index: 2;

    padding: 100px 0;
}

.ak3l-badge {

    display: inline-flex;

    padding: 9px 16px;

    margin-bottom: 25px;

    border:
        1px solid rgba(255,255,255,.25);

    border-radius: 50px;

    color: #bde5ff;

    background:
        rgba(255,255,255,.08);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.ak3l-hero h1 {

    max-width: 850px;

    color: #ffffff;

    font-size:
        clamp(42px, 6vw, 76px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 800;
}

.ak3l-hero h1 span {

    display: block;

    color: #62baff;
}

.ak3l-hero-description {

    max-width: 760px;

    margin-top: 28px;

    color: #d7e8f5;

    font-size: 18px;

    line-height: 1.9;
}

.ak3l-certifications {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 35px;
}

.ak3l-cert-card {

    min-width: 185px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 17px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 13px;

    background:
        rgba(255,255,255,.07);

    backdrop-filter: blur(12px);
}

.ak3l-cert-icon {

    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: #ffffff;

    background: #0877c8;

    font-weight: 800;
}

.ak3l-cert-card strong {

    display: block;

    color: #ffffff;

    font-size: 14px;
}

.ak3l-cert-card small {

    display: block;

    color: #a9c6da;

    font-size: 10px;
}

.ak3l-hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 38px;
}

.ak3l-btn {

    min-height: 52px;

    padding: 0 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 700;

    transition: .25s ease;
}

.ak3l-btn span {

    font-size: 20px;
}

.ak3l-btn-primary {

    color: #ffffff;

    background: #0877c8;

    box-shadow:
        0 12px 30px rgba(8,119,200,.30);
}

.ak3l-btn-primary:hover {

    transform: translateY(-3px);

    background: #098be6;
}

.ak3l-btn-outline {

    color: #ffffff;

    border:
        1px solid rgba(255,255,255,.3);

    background:
        rgba(255,255,255,.06);
}

.ak3l-btn-outline:hover {

    background: #ffffff;

    color: #08213a;
}


/* =========================================================
   GENERAL SECTION
========================================================= */

.ak3l-intro,
.ak3l-background,
.ak3l-method,
.ak3l-requirements,
.ak3l-faq {

    padding: 110px 0;
}

.ak3l-section-label {

    margin-bottom: 14px;

    color: #0877c8;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}

.ak3l-intro h2,
.ak3l-background h2,
.ak3l-method h2,
.ak3l-requirements h2,
.ak3l-faq h2 {

    max-width: 800px;

    color: #0a2036;

    font-size:
        clamp(32px, 4vw, 50px);

    line-height: 1.15;

    letter-spacing: -1px;
}

.ak3l-intro h2 span,
.ak3l-background h2 span,
.ak3l-method h2 span,
.ak3l-requirements h2 span,
.ak3l-faq h2 span {

    color: #0877c8;
}

.ak3l-section-description {

    max-width: 700px;

    margin-top: 20px;

    color: #647789;

    font-size: 17px;
}


/* =========================================================
   INTRO
========================================================= */

.ak3l-intro {

    background: #ffffff;
}

.ak3l-intro-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(300px, .8fr);

    gap: 70px;

    margin-top: 55px;

    align-items: center;
}

.ak3l-intro-text p {

    margin-bottom: 20px;

    color: #526779;

    font-size: 17px;

    line-height: 1.9;
}

.ak3l-highlight {

    position: relative;

    padding: 42px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #071d34,
            #0b497b
        );

    overflow: hidden;

    box-shadow:
        0 25px 60px rgba(5,38,67,.18);
}

.ak3l-highlight::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -80px;
    bottom: -80px;

    border-radius: 50%;

    background:
        rgba(65,174,255,.12);
}

.ak3l-highlight-number {

    position: relative;

    z-index: 2;

    color: #55b6ff;

    font-size: 60px;

    font-weight: 900;

    line-height: 1;
}

.ak3l-highlight h3 {

    position: relative;

    z-index: 2;

    margin-top: 22px;

    color: #ffffff;

    font-size: 24px;
}

.ak3l-highlight p {

    position: relative;

    z-index: 2;

    margin-top: 15px;

    color: #bdd3e2;

    font-size: 15px;
}


/* =========================================================
   BACKGROUND
========================================================= */

.ak3l-background {

    background:
        #f4f8fb;
}

.ak3l-background-card {

    display: grid;

    grid-template-columns: 90px 1fr;

    gap: 30px;

    margin-top: 50px;

    padding: 40px;

    border:
        1px solid #dce8f0;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 15px 45px rgba(18,57,85,.06);
}

.ak3l-background-icon {

    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 18px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #0877c8,
            #06436f
        );

    font-size: 18px;

    font-weight: 800;
}

.ak3l-background-card p {

    margin-bottom: 17px;

    color: #526779;

    font-size: 16px;

    line-height: 1.85;
}

.ak3l-info-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

    margin-top: 25px;
}

.ak3l-info-card {

    padding: 30px;

    border-radius: 18px;

    background: #ffffff;

    border:
        1px solid #dce8f0;
}

.ak3l-info-card span {

    color: #0877c8;

    font-size: 12px;

    font-weight: 800;
}

.ak3l-info-card h3 {

    margin-top: 14px;

    color: #102b42;

    font-size: 22px;
}

.ak3l-info-card p {

    margin-top: 10px;

    color: #6a7c8c;

    font-size: 14px;
}


/* =========================================================
   METHOD
========================================================= */

.ak3l-method {

    background: #ffffff;
}

.ak3l-method-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 25px;

    margin-top: 50px;
}

.ak3l-method-card {

    padding: 40px;

    border:
        1px solid #dbe7ef;

    border-radius: 22px;

    background: #ffffff;

    transition: .3s ease;
}

.ak3l-method-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 20px 50px rgba(15,55,85,.09);
}

.ak3l-method-card.active {

    color: #ffffff;

    border: 0;

    background:
        linear-gradient(
            145deg,
            #071c32,
            #0a548b
        );
}

.ak3l-method-number {

    color: #0877c8;

    font-size: 13px;

    font-weight: 800;
}

.ak3l-method-card.active
.ak3l-method-number {

    color: #63bdff;
}

.ak3l-method-card h3 {

    margin-top: 18px;

    color: #102b42;

    font-size: 27px;
}

.ak3l-method-card.active h3 {

    color: #ffffff;
}

.ak3l-method-card p {

    margin-top: 12px;

    color: #667b8d;

    font-size: 16px;

    line-height: 1.8;
}

.ak3l-method-card.active p {

    color: #c2d7e6;
}


/* =========================================================
   REQUIREMENTS
========================================================= */

.ak3l-requirements {

    background: #f5f8fb;
}

.ak3l-requirement-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 25px;

    margin-top: 50px;
}

.ak3l-requirement-card {

    padding: 35px;

    border:
        1px solid #dce7ee;

    border-radius: 22px;

    background: #ffffff;
}

.ak3l-requirement-top {

    display: flex;

    align-items: center;

    gap: 17px;

    padding-bottom: 20px;

    border-bottom:
        1px solid #e8eef3;
}

.ak3l-requirement-icon {

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 12px;

    color: #ffffff;

    background: #0877c8;

    font-size: 12px;

    font-weight: 800;
}

.ak3l-requirement-top h3 {

    color: #102b42;

    font-size: 22px;
}

.ak3l-requirement-list {

    padding-top: 22px;
}

.ak3l-requirement-list > div {

    display: grid;

    grid-template-columns: 25px 1fr;

    gap: 10px;

    margin-bottom: 17px;
}

.ak3l-requirement-list span {

    color: #0877c8;

    font-weight: 900;
}

.ak3l-requirement-list p {

    color: #617586;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   REGULATION
========================================================= */

.ak3l-regulation {

    padding: 90px 0;

    background:
        #ffffff;
}

.ak3l-regulation-box {

    display: grid;

    grid-template-columns: 120px 1fr;

    gap: 40px;

    align-items: center;

    padding: 55px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #06182b,
            #0b4775
        );

    box-shadow:
        0 25px 60px rgba(7,47,79,.16);
}

.ak3l-regulation-number {

    width: 100px;
    height: 100px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 25px;

    color: #ffffff;

    background:
        rgba(255,255,255,.1);

    border:
        1px solid rgba(255,255,255,.15);

    font-size: 42px;

    font-weight: 900;
}

.ak3l-regulation-content
.ak3l-section-label {

    color: #69bdff;
}

.ak3l-regulation-content h2 {

    color: #ffffff;

    font-size:
        clamp(28px, 4vw, 45px);
}

.ak3l-regulation-content p {

    max-width: 780px;

    margin-top: 15px;

    color: #bfd3e1;

    font-size: 16px;
}


/* =========================================================
   CTA
========================================================= */

.ak3l-cta {

    position: relative;

    padding: 110px 0;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #021323,
            #06416d,
            #087acb
        );

    overflow: hidden;
}

.ak3l-cta-glow {

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    top: -250px;

    border-radius: 50%;

    background:
        rgba(80,185,255,.13);
}

.ak3l-cta-content {

    position: relative;

    z-index: 2;

    max-width: 850px;
}

.ak3l-cta .ak3l-section-label {

    color: #65bdff;
}

.ak3l-cta h2 {

    color: #ffffff;

    font-size:
        clamp(35px, 5vw, 58px);

    line-height: 1.1;
}

.ak3l-cta p {

    max-width: 760px;

    margin-top: 20px;

    color: #c9ddeb;

    font-size: 17px;
}

.ak3l-contact-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

    margin-top: 35px;
}

.ak3l-contact-grid > div {

    padding: 20px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 14px;

    background:
        rgba(255,255,255,.06);
}

.ak3l-contact-grid small {

    display: block;

    color: #8fc6e8;

    font-size: 9px;

    letter-spacing: 1px;

    font-weight: 800;
}

.ak3l-contact-grid strong {

    display: block;

    margin-top: 6px;

    color: #ffffff;

    font-size: 13px;

    word-break: break-word;
}

.ak3l-btn-white {

    margin-top: 35px;

    color: #06213a;

    background: #ffffff;
}

.ak3l-btn-white:hover {

    transform: translateY(-3px);

    background: #e8f5ff;
}


/* =========================================================
   FAQ
========================================================= */

.ak3l-faq {

    background: #f6f9fb;
}

.ak3l-faq-list {

    max-width: 900px;

    margin-top: 45px;
}

.ak3l-faq-item {

    margin-bottom: 12px;

    border:
        1px solid #dce7ee;

    border-radius: 14px;

    background: #ffffff;

    overflow: hidden;
}

.ak3l-faq-question {

    width: 100%;

    padding: 22px 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border: 0;

    color: #102b42;

    background: #ffffff;

    text-align: left;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;
}

.ak3l-faq-question b {

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: #0877c8;

    background: #edf7ff;

    font-size: 20px;

    transition: .25s ease;
}

.ak3l-faq-item.active
.ak3l-faq-question b {

    transform: rotate(45deg);

    color: #ffffff;

    background: #0877c8;
}

.ak3l-faq-answer {

    max-height: 0;

    overflow: hidden;

    transition:
        max-height .35s ease;
}

.ak3l-faq-answer p {

    padding:
        0 25px 25px;

    color: #617586;

    font-size: 15px;

    line-height: 1.8;
}


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

@media (max-width: 900px) {

    .ak3l-hero {
        min-height: auto;
    }

    .ak3l-hero-content {
        padding: 90px 0;
    }

    .ak3l-intro-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .ak3l-info-grid {
        grid-template-columns: 1fr;
    }

    .ak3l-method-grid {
        grid-template-columns: 1fr;
    }

    .ak3l-requirement-grid {
        grid-template-columns: 1fr;
    }

    .ak3l-contact-grid {
        grid-template-columns: 1fr;
    }

    .ak3l-regulation-box {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}


@media (max-width: 600px) {

    .ak3l-container {
        width:
            min(100% - 28px, 1180px);
    }

    .ak3l-hero h1 {
        font-size: 43px;
        letter-spacing: -1.5px;
    }

    .ak3l-hero-description {
        font-size: 16px;
    }

    .ak3l-certifications {
        flex-direction: column;
    }

    .ak3l-cert-card {
        width: 100%;
    }

    .ak3l-hero-buttons {
        flex-direction: column;
    }

    .ak3l-btn {
        width: 100%;
    }

    .ak3l-intro,
    .ak3l-background,
    .ak3l-method,
    .ak3l-requirements,
    .ak3l-faq {
        padding: 75px 0;
    }

    .ak3l-background-card {
        grid-template-columns: 1fr;
        padding: 28px;
    }

    .ak3l-regulation {
        padding: 65px 0;
    }

    .ak3l-regulation-box {
        padding: 30px;
    }

    .ak3l-regulation-number {
        width: 75px;
        height: 75px;
        font-size: 30px;
    }

    .ak3l-requirement-card {
        padding: 27px;
    }

    .ak3l-cta {
        padding: 75px 0;
    }

    .ak3l-faq-question {
        padding: 18px;
        font-size: 14px;
    }

    .ak3l-faq-answer p {
        padding:
            0 18px 20px;
        font-size: 14px;
    }
}