:root {
    --kaf-bg: #f9fafb;
    --kaf-surface: #ffffff;
    --kaf-dark: #052011;
    --kaf-dark-soft: #0a2b19;
    --kaf-muted: #4b5563;
    --kaf-accent: #f59e0b;
    --kaf-line: rgba(5, 32, 17, 0.1);
    --kaf-container: 1280px;
    --kaf-header-h: 86px;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--kaf-bg);
    scroll-behavior: auto;
}

body {
    margin: 0;
    color: var(--kaf-dark);
    background: var(--kaf-bg);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    overflow-x: hidden;
}

body.kaf-modal-open,
body.kaf-menu-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

.kaf-container {
    width: min(var(--kaf-container), calc(100% - 48px));
    margin-inline: auto;
}

.kaf-main {
    min-height: 100svh;
}

.kaf-page-transition {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    background: var(--kaf-dark);
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
}

.kaf-cursor {
    position: fixed;
    z-index: 999;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(5, 32, 17, 0.38);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.kaf-cursor.is-active {
    width: 42px;
    height: 42px;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.55);
}

/* BUTTON */
.kaf-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease;
}

.kaf-btn:hover {
    transform: translateY(-1px);
}

.kaf-btn--accent {
    color: #fff;
    background: var(--kaf-accent);
    box-shadow: 0 18px 38px rgba(245, 158, 11, 0.26);
}

.kaf-btn--light {
    color: var(--kaf-dark);
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.kaf-btn--hero {
    min-width: 244px;
    min-height: 62px;
    justify-content: space-between;
    padding-inline: 28px;
    border-radius: 24px;
    font-size: 16px;
}

.kaf-btn__arrow {
    font-size: 22px;
}

/* HEADER */
.kaf-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 90;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(5, 32, 17, 0.08);
    box-shadow: 0 18px 50px rgba(5, 32, 17, 0.08);
    transition:
        background 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

.kaf-header.is-transparent {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

.kaf-header__inner {
    height: var(--kaf-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.kaf-brand {
    min-width: 176px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.kaf-brand__logo {
    width: auto;
    max-width: 158px;
    height: 38px;
    object-fit: contain;
}

.kaf-brand__logo--white {
    display: none;
}

.kaf-header.is-transparent .kaf-brand__logo--dark {
    display: none;
}

.kaf-header.is-transparent .kaf-brand__logo--white {
    display: block;
}

.kaf-header:not(.is-transparent) .kaf-brand__logo--dark {
    display: block;
}

.kaf-header:not(.is-transparent) .kaf-brand__logo--white {
    display: none;
}

.kaf-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-inline: auto;
}

.kaf-nav > a,
.kaf-nav__trigger {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--kaf-dark);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    cursor: pointer;
    appearance: none;
}

.kaf-header.is-transparent .kaf-nav > a,
.kaf-header.is-transparent .kaf-nav__trigger {
    color: #fff;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

.kaf-nav > a:hover,
.kaf-nav__trigger:hover {
    opacity: 0.72;
}

.kaf-nav__item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.kaf-nav__caret {
    margin-left: 5px;
    font-size: 10px;
}

.kaf-nav__dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: -18px;
    min-width: 230px;
    padding: 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(5, 32, 17, 0.08);
    box-shadow: 0 22px 70px rgba(5, 32, 17, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0.22s ease;
}

.kaf-nav__item--dropdown:hover .kaf-nav__dropdown,
.kaf-nav__item--dropdown:focus-within .kaf-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kaf-nav__dropdown a {
    display: block;
    padding: 12px 13px;
    border-radius: 13px;
    color: var(--kaf-dark);
    font-size: 13px;
    font-weight: 800;
    text-shadow: none;
}

.kaf-nav__dropdown a:hover {
    background: rgba(5, 32, 17, 0.06);
}

.kaf-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.kaf-header__actions .kaf-btn {
    min-height: 48px;
    padding-inline: 24px;
    font-size: 10.5px;
}

.kaf-menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(5, 32, 17, 0.12);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
}

.kaf-menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px auto;
    border-radius: 999px;
    background: var(--kaf-dark);
}

.kaf-mobile-menu {
    display: none;
}

/* HERO */
.kaf-home-snap-section {
    position: relative;
}

.kaf-home-hero--final {
    height: 100svh;
    min-height: 100svh;
    padding-top: var(--kaf-header-h);
    overflow: hidden;
    background: #061f13;
}

.kaf-home-hero__slides {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #061f13;
}

.kaf-home-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.018);
    transition:
        opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 5200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-home-hero__slide.is-active {
    opacity: 1;
    transform: scale(1.005);
}

.kaf-home-hero__top-gradient {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 1;
    height: 190px;
    background: linear-gradient(
        180deg,
        rgba(5, 32, 17, 0.78) 0%,
        rgba(5, 32, 17, 0.48) 40%,
        rgba(5, 32, 17, 0.14) 78%,
        rgba(5, 32, 17, 0) 100%
    );
    pointer-events: none;
}

.kaf-home-hero__left-gradient {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: 54vw;
    background: linear-gradient(
        90deg,
        rgba(5, 32, 17, 0.9) 0%,
        rgba(5, 32, 17, 0.76) 21%,
        rgba(5, 32, 17, 0.48) 48%,
        rgba(5, 32, 17, 0.18) 74%,
        rgba(5, 32, 17, 0) 100%
    );
    pointer-events: none;
}

.kaf-home-hero__stage {
    position: relative;
    z-index: 2;
    height: calc(100svh - var(--kaf-header-h));
    min-height: calc(100svh - var(--kaf-header-h));
}

.kaf-home-hero__copy {
    position: absolute;
    left: 0;
    top: 50%;
    width: min(700px, 57vw);
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.5s ease;
}

.kaf-home-hero__copy.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.kaf-home-hero__copy h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(46px, 4.7vw, 72px);
    line-height: 0.99;
    letter-spacing: -0.052em;
    font-weight: 800;
    text-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.kaf-home-hero__copy p {
    max-width: 600px;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(16px, 1.22vw, 20px);
    line-height: 1.4;
    font-weight: 560;
    text-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.kaf-home-hero__copy .kaf-btn {
    margin-top: 38px;
}

.kaf-home-hero__bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 58px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.kaf-home-hero__slider-ui {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

.kaf-slider-nav {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: rgba(75, 75, 75, 0.78);
    color: #fff;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.kaf-home-hero__dots {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.kaf-home-hero__dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition:
        width 0.24s ease,
        background 0.24s ease;
}

.kaf-home-hero__dots button.is-active {
    width: 28px;
    background: #fff;
}

.kaf-home-hero__explore {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 999px;
    background: rgba(75, 75, 75, 0.76);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    backdrop-filter: blur(12px);
}

.kaf-home-hero__explore-icon {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
}

/* SECTION 2 */
.kaf-section2 {
    height: calc(100svh - var(--kaf-header-h));
    min-height: calc(100svh - var(--kaf-header-h));
    display: grid;
    grid-template-rows: 220px minmax(0, 1fr);
    padding: 0;
    background: var(--kaf-bg);
    overflow: hidden;
}

.kaf-s2__intro {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
}

.kaf-s2__intro h2 {
    margin: 0;
    max-width: 620px;
    color: var(--kaf-dark);
    font-size: clamp(42px, 3.55vw, 60px);
    line-height: 0.96;
    letter-spacing: -0.065em;
    font-weight: 800;
}

.kaf-s2__intro p {
    max-width: 490px;
    margin: 0;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 700;
}

.kaf-s2__gradient {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    padding: 30px 0 36px;
    border-radius: 78px 78px 0 0;
    background:
        radial-gradient(
            circle at 14% 6%,
            rgba(255, 255, 255, 0.08),
            transparent 23rem
        ),
        radial-gradient(
            circle at 86% 16%,
            rgba(255, 255, 255, 0.06),
            transparent 22rem
        ),
        linear-gradient(90deg, #135b31 0%, #6d642d 49%, #df7a2f 100%);
    overflow: hidden;
}

.kaf-s2__inner {
    width: min(var(--kaf-container), calc(100% - 56px));
    height: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kaf-s2__network {
    width: min(100%, 1040px);
    margin: 0 auto 28px;
    text-align: center;
}

.kaf-s2__logo {
    display: grid;
    place-items: center;
    gap: 3px;
    margin-bottom: 10px;
}

.kaf-s2__logo img {
    width: auto;
    height: 30px;
    max-width: 150px;
    object-fit: contain;
}

.kaf-s2__logo span {
    color: rgba(255, 255, 255, 0.88);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.kaf-s2__network h3 {
    max-width: 820px;
    margin: 0 auto 22px;
    color: #fff;
    text-align: center;
    font-size: clamp(30px, 2.75vw, 44px);
    line-height: 1.03;
    letter-spacing: -0.055em;
    font-weight: 800;
}

.kaf-s2__pills {
    width: min(100%, 980px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 auto;
}

.kaf-s2__pill {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    text-align: left;
}

.kaf-s2__pill i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 21px;
    font-style: normal;
    font-weight: 900;
    flex-shrink: 0;
}

.kaf-s2__pill strong {
    display: block;
    color: #fff;
    font-size: 15px;
    line-height: 1.18;
    font-weight: 800;
}

.kaf-s2__pill small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 11.5px;
    line-height: 1.2;
    font-weight: 500;
}

.kaf-s2__content {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 44px;
}

.kaf-s2__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
    padding: 6px 2px;
}

.kaf-s2__stat {
    color: #fff;
    text-align: center;
}

.kaf-s2__stat strong {
    display: block;
    color: #fff;
    font-size: clamp(48px, 4vw, 70px);
    line-height: 0.95;
    letter-spacing: -0.045em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.kaf-s2__stat span {
    display: block;
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12.5px;
    line-height: 1.3;
    font-weight: 500;
}

.kaf-s2__card {
    width: min(100%, 650px);
    max-width: 650px;
    justify-self: end;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px;
    box-shadow:
        0 24px 70px rgba(5, 32, 17, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    overflow: hidden;
}

.kaf-s2__tabs {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: #f4f6f8;
    border-bottom: 1px solid rgba(5, 32, 17, 0.06);
}

.kaf-s2__tabs button {
    flex: 1 1 0;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #667085;
    font-size: 11.5px;
    font-weight: 760;
    cursor: pointer;
}

.kaf-s2__tabs button.is-active {
    color: var(--kaf-dark);
    background: #fff;
    box-shadow: 0 8px 20px rgba(5, 32, 17, 0.08);
}

.kaf-s2__panel {
    display: none;
    padding: 30px 30px 30px;
}

.kaf-s2__panel.is-active {
    display: block;
    animation: kafS2PanelIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes kafS2PanelIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kaf-s2__panel h3 {
    margin: 0 auto 8px;
    max-width: 440px;
    color: #0f172a;
    text-align: center;
    font-size: 26px;
    line-height: 1.06;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.kaf-s2__panel p {
    margin: 0 auto 20px;
    max-width: 480px;
    color: #667085;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 500;
}

.kaf-s2__select {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    margin-bottom: 14px;
    border: 1px solid #d8dee8;
    border-radius: 15px;
    background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
    color: #98a2b3;
    font-size: 13.5px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.kaf-s2__select em {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #f3f5f7;
    color: #667085;
    font-size: 18px;
    font-style: normal;
}

.kaf-s2__submit,
.kaf-s2__cta a {
    min-height: 50px;
    border: 0;
    border-radius: 14px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}

.kaf-s2__submit {
    width: 100%;
    background: linear-gradient(135deg, var(--kaf-dark), #0b3d22);
    color: #fff;
    box-shadow: 0 12px 26px rgba(5, 32, 17, 0.16);
}

.kaf-s2__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.kaf-s2__cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kaf-s2__cta a:first-child {
    background: linear-gradient(135deg, var(--kaf-dark), #0b3d22);
    color: #fff;
}

.kaf-s2__cta a:last-child {
    background: linear-gradient(135deg, #f59e0b, #ea7a16);
    color: #fff;
}

.kaf-section2 [data-kaf-s2-reveal],
.kaf-section2 [data-kaf-s2-form] {
    opacity: 0;
    transform: translateY(30px);
}

.kaf-section2.is-section2-visible [data-kaf-s2-reveal] {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.46s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-section2.is-section2-visible .kaf-s2__network {
    transition-delay: 0.02s;
}

.kaf-section2.is-section2-visible .kaf-s2__stats {
    transition-delay: 0.13s;
}

.kaf-section2.is-section2-visible [data-kaf-s2-form] {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.18s;
}

/* MODAL */
.kaf-s2-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.kaf-s2-modal.is-open {
    display: flex;
}

.kaf-s2-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.58);
    backdrop-filter: blur(5px);
}

.kaf-s2-modal__dialog {
    position: relative;
    width: min(620px, 100%);
    height: min(510px, calc(100svh - 48px));
    padding: 20px 22px 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.24);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kaf-s2-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex: 0 0 auto;
}

.kaf-s2-modal__head h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1;
    font-weight: 900;
}

.kaf-s2-modal__head button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: #f1f3f6;
    color: #667085;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.kaf-s2-modal__search {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    margin-bottom: 10px;
    border: 1px solid #d4dbe7;
    border-radius: 13px;
    flex: 0 0 auto;
}

.kaf-s2-modal__search span {
    color: #667085;
    font-size: 21px;
}

.kaf-s2-modal__search input {
    width: 100%;
    border: 0;
    outline: none;
    color: #111827;
    font-size: 14.5px;
}

.kaf-s2-modal__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: thin;
}

.kaf-s2-modal__list::-webkit-scrollbar {
    width: 8px;
}

.kaf-s2-modal__list::-webkit-scrollbar-thumb {
    background: #d0d7e2;
    border-radius: 999px;
}

.kaf-s2-modal__list button {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: 30px 1fr 17px;
    align-items: center;
    gap: 9px;
    border: 0;
    border-bottom: 1px solid #eceff3;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.kaf-s2-modal__list i {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #7b8798;
    color: #fff;
    font-size: 7px;
    font-style: normal;
}

.kaf-s2-modal__list strong {
    display: block;
    color: #0b0b0c;
    font-size: 14.5px;
    font-weight: 900;
}

.kaf-s2-modal__list em {
    display: block;
    margin-top: 2px;
    color: #111827;
    font-size: 12.8px;
    font-style: normal;
    font-weight: 500;
}

.kaf-s2-modal__list b {
    color: #667085;
    font-size: 23px;
    font-weight: 400;
}

/* FOOTER BASIC */
.kaf-footer {
    padding: 70px 0 28px;
    background: var(--kaf-dark);
    color: #fff;
}

.kaf-footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 34px;
    margin-bottom: 56px;
    border-radius: 34px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.04)
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.kaf-footer-cta h2 {
    max-width: 700px;
    margin: 10px 0;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -0.06em;
}

.kaf-footer-cta p,
.kaf-footer p {
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.7;
}

.kaf-footer__grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr 0.7fr 0.8fr;
    gap: 42px;
}

.kaf-footer h3 {
    margin: 0 0 16px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.58);
}

.kaf-footer a {
    display: block;
    margin: 10px 0;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 700;
}

.kaf-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 28px;
    margin-top: 44px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}

/* RESPONSIVE */
@media (max-height: 840px) and (min-width: 981px) {
    :root {
        --kaf-header-h: 80px;
    }

    .kaf-section2 {
        grid-template-rows: 190px minmax(0, 1fr);
    }

    .kaf-s2__intro h2 {
        font-size: clamp(36px, 3vw, 50px);
    }

    .kaf-s2__gradient {
        padding-top: 24px;
        padding-bottom: 28px;
    }

    .kaf-s2__network {
        margin-bottom: 22px;
    }

    .kaf-s2__network h3 {
        font-size: clamp(27px, 2.35vw, 38px);
        margin-bottom: 18px;
    }

    .kaf-s2__stat strong {
        font-size: clamp(42px, 3.4vw, 60px);
    }

    .kaf-s2__panel {
        padding: 22px;
    }
}

@media (max-width: 1120px) {
    .kaf-nav,
    .kaf-header__actions > .kaf-btn {
        display: none;
    }

    .kaf-menu-toggle {
        display: inline-block;
    }

    .kaf-mobile-menu {
        position: fixed;
        inset: calc(var(--kaf-header-h) - 8px) 20px auto 20px;
        z-index: 89;
        display: block;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition:
            opacity 0.25s ease,
            transform 0.25s ease;
    }

    .kaf-mobile-menu.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .kaf-mobile-menu__panel {
        display: grid;
        gap: 8px;
        padding: 18px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(5, 32, 17, 0.08);
        box-shadow: 0 24px 80px rgba(5, 32, 17, 0.1);
        backdrop-filter: blur(18px);
    }

    .kaf-mobile-menu__panel > a:not(.kaf-btn),
    .kaf-mobile-menu__group a {
        padding: 13px 14px;
        border-radius: 14px;
        color: var(--kaf-dark);
        font-weight: 800;
    }

    .kaf-mobile-menu__group {
        margin: 6px 0 4px;
        padding: 10px 12px;
        border-radius: 16px;
        background: #f7f9f8;
    }

    .kaf-mobile-menu__label {
        padding: 4px 2px 10px;
        color: var(--kaf-muted);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.12em;
    }
}

@media (max-width: 980px) {
    :root {
        --kaf-header-h: 76px;
    }

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

    .kaf-brand {
        min-width: 132px;
    }

    .kaf-brand__logo {
        max-width: 124px;
        height: 32px;
    }

    .kaf-home-hero--final {
        height: 92svh;
        min-height: 92svh;
    }

    .kaf-home-hero__stage {
        height: calc(92svh - var(--kaf-header-h));
        min-height: calc(92svh - var(--kaf-header-h));
    }

    .kaf-home-hero__left-gradient {
        width: 100%;
        background: linear-gradient(
            180deg,
            rgba(5, 32, 17, 0.32) 0%,
            rgba(5, 32, 17, 0.08) 34%,
            rgba(5, 32, 17, 0.78) 100%
        );
    }

    .kaf-home-hero__copy {
        top: auto;
        bottom: 165px;
        width: 100%;
        transform: none;
    }

    .kaf-home-hero__copy h1 {
        font-size: clamp(32px, 9.4vw, 42px);
        line-height: 1.04;
    }

    .kaf-home-hero__copy p {
        font-size: 14.5px;
        line-height: 1.45;
    }

    .kaf-home-hero__copy .kaf-btn {
        width: 100%;
        min-width: 0;
        min-height: 56px;
        margin-top: 24px;
        font-size: 13.5px;
    }

    .kaf-home-hero__bottom {
        bottom: 22px;
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .kaf-section2 {
        height: auto;
        min-height: calc(100svh - var(--kaf-header-h));
        grid-template-rows: auto auto;
        overflow: visible;
    }

    .kaf-s2__intro {
        display: block;
        padding: 78px 0 30px;
    }

    .kaf-s2__intro h2 {
        font-size: 34px;
    }

    .kaf-s2__intro p {
        margin-top: 12px;
    }

    .kaf-s2__gradient {
        min-height: auto;
        padding: 30px 0 50px;
        border-radius: 42px 42px 0 0;
    }

    .kaf-s2__inner {
        height: auto;
    }

    .kaf-s2__pills,
    .kaf-s2__content {
        grid-template-columns: 1fr;
    }

    .kaf-s2__card {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .kaf-footer__grid,
    .kaf-footer-cta {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }
}

/* =========================================================
   SECTION 3 TRUE FINAL — KAFNET WHY CHOOSE
   Layout referensi, typography KAFNET, hard-fullscreen composition
   ========================================================= */

:root {
    --kaf-header-h: 76px;
    --kaf-font:
        "Plus Jakarta Sans", "Jakarta Sans", "Inter", system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
    --kaf-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

/* topbar tetap compact */
.kaf-header__inner {
    height: var(--kaf-header-h) !important;
}

.kaf-brand__logo {
    height: 34px !important;
    max-width: 146px !important;
}

.kaf-nav {
    gap: 20px !important;
}

.kaf-nav > a,
.kaf-nav__trigger {
    font-size: 12.5px !important;
    font-weight: 760 !important;
}

.kaf-header__actions .kaf-btn {
    min-height: 44px !important;
    padding-inline: 22px !important;
    font-size: 10px !important;
}

/* SECTION 3 */
.kaf-section3,
.kaf-section3 * {
    font-family: var(--kaf-font) !important;
}

.kaf-section3 {
    position: relative !important;
    height: calc(100svh - var(--kaf-header-h)) !important;
    min-height: calc(100svh - var(--kaf-header-h)) !important;
    background: var(--kaf-bg) !important;
    overflow: hidden !important;
}

.kaf-s3__top-bg {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 72% !important;
    z-index: 0 !important;
    background:
        radial-gradient(
            circle at 14% 8%,
            rgba(255, 255, 255, 0.08),
            transparent 23rem
        ),
        radial-gradient(
            circle at 86% 18%,
            rgba(255, 255, 255, 0.07),
            transparent 24rem
        ),
        linear-gradient(90deg, #135b31 0%, #6d642d 49%, #df7a2f 100%) !important;
    border-bottom-left-radius: 76px !important;
    border-bottom-right-radius: 76px !important;
}

.kaf-s3__inner {
    position: relative !important;
    z-index: 1 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: 270px minmax(0, 1fr) !important;
    padding-top: 54px !important;
    padding-bottom: 0 !important;
}

/* heading sengaja diturunkan dari header */
.kaf-s3__head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 52px !important;
    margin: 0 !important;
}

.kaf-s3__head h2 {
    max-width: 690px !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(44px, 3.75vw, 64px) !important;
    line-height: 1.01 !important;
    letter-spacing: -0.052em !important;
    font-weight: 760 !important;
}

.kaf-s3__head p {
    max-width: 520px !important;
    margin: 26px 0 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.01em !important;
    font-weight: 500 !important;
    text-align: right !important;
}

.kaf-s3__stage {
    position: relative !important;
    min-height: 0 !important;
}

.kaf-s3__step {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr) !important;
    align-items: end !important;
    gap: 16px !important;
    opacity: 0 !important;
    transform: translateY(24px) scale(0.985) !important;
    pointer-events: none !important;
    transition:
        opacity 0.86s var(--kaf-ease-premium),
        transform 0.86s var(--kaf-ease-premium) !important;
}

.kaf-s3__step.is-active {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.kaf-s3__step--reverse {
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr) !important;
}

.kaf-s3__step--reverse .kaf-s3__card-col {
    order: 2 !important;
}

.kaf-s3__step--reverse .kaf-s3__visual-col {
    order: 1 !important;
}

.kaf-s3__card-col,
.kaf-s3__visual-col {
    display: flex !important;
    align-items: end !important;
    min-height: 0 !important;
}

.kaf-s3__card {
    position: relative !important;
    width: 100% !important;
    max-width: 805px !important;
    min-height: 548px !important;
    padding: 42px 40px 36px !important;
    border-radius: 34px !important;
    background: #f4f4f4 !important;
    box-shadow: 0 26px 78px rgba(5, 32, 17, 0.12) !important;
    overflow: hidden !important;
}

.kaf-s3__number {
    position: absolute !important;
    top: 18px !important;
    right: 28px !important;
    color: rgba(17, 24, 39, 0.28) !important;
    font-size: clamp(104px, 7.6vw, 138px) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.075em !important;
    font-weight: 760 !important;
    user-select: none !important;
}

.kaf-s3__card h3 {
    position: relative !important;
    z-index: 1 !important;
    max-width: 560px !important;
    margin: 100px 0 28px !important;
    color: var(--kaf-dark) !important;
    font-size: clamp(42px, 3.25vw, 58px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.048em !important;
    font-weight: 760 !important;
}

.kaf-s3__card p {
    position: relative !important;
    z-index: 1 !important;
    max-width: 590px !important;
    margin: 0 0 24px !important;
    color: #1f2937 !important;
    font-size: 16.5px !important;
    line-height: 1.62 !important;
    letter-spacing: -0.006em !important;
    font-weight: 420 !important;
}

.kaf-s3__arrow {
    position: absolute !important;
    right: 34px !important;
    bottom: 22px !important;
    color: #111 !important;
    font-size: 82px !important;
    line-height: 0.8 !important;
    font-weight: 760 !important;
}

.kaf-s3__visual {
    width: 100% !important;
    min-height: 610px !important;
    display: flex !important;
    align-items: end !important;
    justify-content: center !important;
    overflow: visible !important;
}

.kaf-s3__visual img {
    width: auto !important;
    max-width: 132% !important;
    max-height: 730px !important;
    object-fit: contain !important;
    transform-origin: center bottom !important;
    transform: translateX(-8px) translateY(24px) scale(1.2) !important;
    filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.08)) !important;
}

/* reverse visual tetap besar */
.kaf-s3__step--reverse .kaf-s3__visual img {
    transform: translateX(8px) translateY(24px) scale(1.18) !important;
}

/* Animasi beda antara card dan gambar */
.kaf-section3.is-section3-visible .kaf-s3__head h2 {
    animation: kafS3HeadIn 0.72s var(--kaf-ease-premium) both !important;
}

.kaf-section3.is-section3-visible .kaf-s3__head p {
    animation: kafS3HeadIn 0.72s var(--kaf-ease-premium) both !important;
    animation-delay: 0.08s !important;
}

.kaf-section3.is-section3-visible .kaf-s3__step.is-active .kaf-s3__card {
    animation: kafS3CardIn 0.88s var(--kaf-ease-premium) both !important;
}

.kaf-section3.is-section3-visible .kaf-s3__step.is-active .kaf-s3__visual img {
    animation: kafS3VisualRightIn 0.98s var(--kaf-ease-premium) both !important;
}

.kaf-section3.is-section3-visible
    .kaf-s3__step--reverse.is-active
    .kaf-s3__visual
    img {
    animation: kafS3VisualLeftIn 0.98s var(--kaf-ease-premium) both !important;
}

@keyframes kafS3HeadIn {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes kafS3CardIn {
    from {
        opacity: 0;
        transform: translateY(36px) scale(0.965);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes kafS3VisualRightIn {
    from {
        opacity: 0;
        transform: translateX(58px) translateY(42px) scale(1.08);
    }
    to {
        opacity: 1;
        transform: translateX(-8px) translateY(24px) scale(1.2);
    }
}

@keyframes kafS3VisualLeftIn {
    from {
        opacity: 0;
        transform: translateX(-58px) translateY(42px) scale(1.06);
    }
    to {
        opacity: 1;
        transform: translateX(8px) translateY(24px) scale(1.18);
    }
}

/* layar pendek */
@media (max-height: 860px) and (min-width: 981px) {
    .kaf-s3__inner {
        grid-template-rows: 230px minmax(0, 1fr) !important;
        padding-top: 44px !important;
    }

    .kaf-s3__head h2 {
        font-size: clamp(40px, 3.3vw, 56px) !important;
    }

    .kaf-s3__head p {
        margin-top: 18px !important;
        font-size: 13.5px !important;
    }

    .kaf-s3__card {
        max-width: 760px !important;
        min-height: 492px !important;
        padding: 36px 36px 30px !important;
    }

    .kaf-s3__card h3 {
        margin-top: 84px !important;
        font-size: clamp(38px, 2.95vw, 52px) !important;
    }

    .kaf-s3__card p {
        font-size: 15.8px !important;
        line-height: 1.56 !important;
    }

    .kaf-s3__visual {
        min-height: 545px !important;
    }

    .kaf-s3__visual img {
        max-height: 630px !important;
        transform: translateX(-8px) translateY(20px) scale(1.17) !important;
    }

    .kaf-s3__step--reverse .kaf-s3__visual img {
        transform: translateX(8px) translateY(20px) scale(1.15) !important;
    }

    @keyframes kafS3VisualRightIn {
        from {
            opacity: 0;
            transform: translateX(52px) translateY(40px) scale(1.04);
        }
        to {
            opacity: 1;
            transform: translateX(-8px) translateY(20px) scale(1.17);
        }
    }

    @keyframes kafS3VisualLeftIn {
        from {
            opacity: 0;
            transform: translateX(-52px) translateY(40px) scale(1.04);
        }
        to {
            opacity: 1;
            transform: translateX(8px) translateY(20px) scale(1.15);
        }
    }
}

/* mobile normal */
@media (max-width: 980px) {
    .kaf-section3 {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .kaf-s3__top-bg {
        height: 390px !important;
        border-bottom-left-radius: 34px !important;
        border-bottom-right-radius: 34px !important;
    }

    .kaf-s3__inner {
        display: block !important;
        height: auto !important;
        padding-top: 48px !important;
        padding-bottom: 44px !important;
    }

    .kaf-s3__head {
        display: block !important;
        margin-bottom: 24px !important;
    }

    .kaf-s3__head h2 {
        max-width: none !important;
        font-size: 36px !important;
        line-height: 1.06 !important;
    }

    .kaf-s3__head p {
        max-width: none !important;
        margin-top: 12px !important;
        text-align: left !important;
        font-size: 13px !important;
    }

    .kaf-s3__stage {
        min-height: 850px !important;
    }

    .kaf-s3__step,
    .kaf-s3__step--reverse {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .kaf-s3__step--reverse .kaf-s3__card-col,
    .kaf-s3__step--reverse .kaf-s3__visual-col {
        order: initial !important;
    }

    .kaf-s3__card {
        max-width: none !important;
        min-height: 430px !important;
        padding: 30px 24px 28px !important;
    }

    .kaf-s3__number {
        font-size: 86px !important;
    }

    .kaf-s3__card h3 {
        margin-top: 74px !important;
        font-size: 32px !important;
    }

    .kaf-s3__card p {
        font-size: 15px !important;
    }

    .kaf-s3__visual {
        min-height: 360px !important;
    }

    .kaf-s3__visual img,
    .kaf-s3__step--reverse .kaf-s3__visual img {
        max-width: 100% !important;
        max-height: 410px !important;
        transform: none !important;
    }
}

/* =========================================================
   SECTION 3 FIX — CARD NOT CLIPPED + STRONGER SHADOW
   ========================================================= */

.kaf-section3 {
    overflow: hidden !important;
}

/* header tetap turun, tapi stage dikasih ruang lebih */
.kaf-s3__inner {
    grid-template-rows: 245px minmax(0, 1fr) !important;
    padding-top: 48px !important;
    padding-bottom: 34px !important;
}

/* konten bawah dinaikkan sedikit agar card tidak kepotong */
.kaf-s3__step {
    align-items: center !important;
    padding-bottom: 18px !important;
}

.kaf-s3__card-col,
.kaf-s3__visual-col {
    align-items: center !important;
}

/* card tetap besar, tapi tidak melewati section */
.kaf-s3__card {
    max-width: 790px !important;
    min-height: 500px !important;
    padding: 38px 40px 34px !important;
    border-radius: 34px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.045) !important;
    box-shadow:
        0 34px 95px rgba(5, 32, 17, 0.18),
        0 14px 34px rgba(5, 32, 17, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.92) inset !important;
}

/* isi card dipadatkan sedikit biar tetap lega tapi aman */
.kaf-s3__number {
    top: 16px !important;
    right: 28px !important;
    font-size: clamp(96px, 7vw, 126px) !important;
}

.kaf-s3__card h3 {
    margin-top: 88px !important;
    margin-bottom: 24px !important;
    font-size: clamp(40px, 3.05vw, 54px) !important;
}

.kaf-s3__card p {
    font-size: 16px !important;
    line-height: 1.58 !important;
    margin-bottom: 21px !important;
}

.kaf-s3__arrow {
    bottom: 20px !important;
    right: 32px !important;
}

/* gambar tetap gede tapi tidak ikut bikin area section kepotong */
.kaf-s3__visual {
    min-height: 560px !important;
    align-items: center !important;
}

.kaf-s3__visual img {
    max-height: 660px !important;
    transform: translateX(-8px) translateY(8px) scale(1.16) !important;
}

.kaf-s3__step--reverse .kaf-s3__visual img {
    transform: translateX(8px) translateY(8px) scale(1.14) !important;
}

/* animasi gambar disesuaikan dengan posisi baru */
@keyframes kafS3VisualRightIn {
    from {
        opacity: 0;
        transform: translateX(58px) translateY(28px) scale(1.04);
    }
    to {
        opacity: 1;
        transform: translateX(-8px) translateY(8px) scale(1.16);
    }
}

@keyframes kafS3VisualLeftIn {
    from {
        opacity: 0;
        transform: translateX(-58px) translateY(28px) scale(1.04);
    }
    to {
        opacity: 1;
        transform: translateX(8px) translateY(8px) scale(1.14);
    }
}

/* layar pendek: lebih aman lagi */
@media (max-height: 860px) and (min-width: 981px) {
    .kaf-s3__inner {
        grid-template-rows: 210px minmax(0, 1fr) !important;
        padding-top: 38px !important;
        padding-bottom: 28px !important;
    }

    .kaf-s3__card {
        min-height: 450px !important;
        max-width: 740px !important;
        padding: 34px 36px 30px !important;
    }

    .kaf-s3__card h3 {
        margin-top: 72px !important;
        margin-bottom: 20px !important;
        font-size: clamp(36px, 2.85vw, 48px) !important;
    }

    .kaf-s3__card p {
        font-size: 15.2px !important;
        line-height: 1.52 !important;
        margin-bottom: 18px !important;
    }

    .kaf-s3__visual {
        min-height: 500px !important;
    }

    .kaf-s3__visual img {
        max-height: 590px !important;
        transform: translateX(-8px) translateY(6px) scale(1.12) !important;
    }

    .kaf-s3__step--reverse .kaf-s3__visual img {
        transform: translateX(8px) translateY(6px) scale(1.1) !important;
    }
}

/* =========================================================
   SECTION 3 FINAL MICRO FIX
   Judul turun, stage tetap aman, gambar naik sejajar card
   ========================================================= */

/* Judul diturunkan, tapi awal area card tetap dijaga agar card tidak kepotong */
.kaf-s3__inner {
    grid-template-rows: 217px minmax(0, 1fr) !important;
    padding-top: 76px !important;
    padding-bottom: 34px !important;
}

.kaf-s3__head h2 {
    margin-top: 0 !important;
}

.kaf-s3__head p {
    margin-top: 28px !important;
}

/* Gambar dinaikkan, ukuran tetap sama */
.kaf-s3__visual img {
    max-height: 660px !important;
    transform: translateX(-8px) translateY(-18px) scale(1.16) !important;
}

.kaf-s3__step--reverse .kaf-s3__visual img {
    transform: translateX(8px) translateY(-18px) scale(1.14) !important;
}

/* Animasi disesuaikan supaya posisi akhirnya sama dengan gambar yang dinaikkan */
@keyframes kafS3VisualRightIn {
    from {
        opacity: 0;
        transform: translateX(58px) translateY(18px) scale(1.04);
    }
    to {
        opacity: 1;
        transform: translateX(-8px) translateY(-18px) scale(1.16);
    }
}

@keyframes kafS3VisualLeftIn {
    from {
        opacity: 0;
        transform: translateX(-58px) translateY(18px) scale(1.04);
    }
    to {
        opacity: 1;
        transform: translateX(8px) translateY(-18px) scale(1.14);
    }
}

/* Layar pendek: judul tetap turun, gambar naik sedikit */
@media (max-height: 860px) and (min-width: 981px) {
    .kaf-s3__inner {
        grid-template-rows: 186px minmax(0, 1fr) !important;
        padding-top: 62px !important;
        padding-bottom: 28px !important;
    }

    .kaf-s3__head p {
        margin-top: 22px !important;
    }

    .kaf-s3__visual img {
        max-height: 590px !important;
        transform: translateX(-8px) translateY(-14px) scale(1.12) !important;
    }

    .kaf-s3__step--reverse .kaf-s3__visual img {
        transform: translateX(8px) translateY(-14px) scale(1.1) !important;
    }

    @keyframes kafS3VisualRightIn {
        from {
            opacity: 0;
            transform: translateX(52px) translateY(14px) scale(1.04);
        }
        to {
            opacity: 1;
            transform: translateX(-8px) translateY(-14px) scale(1.12);
        }
    }

    @keyframes kafS3VisualLeftIn {
        from {
            opacity: 0;
            transform: translateX(-52px) translateY(14px) scale(1.04);
        }
        to {
            opacity: 1;
            transform: translateX(8px) translateY(-14px) scale(1.1);
        }
    }
}

/* =========================================================
   SECTION 3 — STARTUP CARD REDESIGN
   Compact, clean, readable
   ========================================================= */

.kaf-s3__card.kaf-s3__card--startup {
    max-width: 690px !important;
    min-height: 455px !important;
    padding: 34px 34px 30px !important;
    border-radius: 30px !important;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(248, 250, 252, 0.96) 100%
    ) !important;
    border: 1px solid rgba(15, 23, 42, 0.065) !important;
    box-shadow:
        0 34px 90px rgba(5, 32, 17, 0.18),
        0 12px 28px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

.kaf-s3__card--startup .kaf-s3__number {
    top: 22px !important;
    right: 28px !important;
    font-size: clamp(76px, 5.7vw, 104px) !important;
    color: rgba(15, 23, 42, 0.18) !important;
    letter-spacing: -0.075em !important;
    font-weight: 800 !important;
}

.kaf-s3__eyebrow {
    position: relative !important;
    z-index: 2 !important;
    width: fit-content !important;
    max-width: 390px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: rgba(5, 32, 17, 0.055) !important;
    border: 1px solid rgba(5, 32, 17, 0.08) !important;
}

.kaf-s3__eyebrow span {
    display: inline-flex !important;
    align-items: center !important;
    height: 22px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: var(--kaf-dark) !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    font-weight: 800 !important;
}

.kaf-s3__eyebrow em {
    color: #475467 !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    font-style: normal !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.kaf-s3__card--startup h3 {
    max-width: 500px !important;
    margin: 34px 0 14px !important;
    color: var(--kaf-dark) !important;
    font-size: clamp(34px, 2.55vw, 46px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.048em !important;
    font-weight: 780 !important;
}

.kaf-s3__card--startup .kaf-s3__lead {
    max-width: 520px !important;
    margin: 0 0 22px !important;
    color: #344054 !important;
    font-size: 14.8px !important;
    line-height: 1.58 !important;
    letter-spacing: -0.008em !important;
    font-weight: 500 !important;
}

.kaf-s3__list {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    list-style: none !important;
    max-width: 500px !important;
}

.kaf-s3__list li {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 34px !important;
    padding: 8px 12px 8px 38px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.74) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    color: #1f2937 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 650 !important;
}

.kaf-s3__list li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(5, 32, 17, 0.1) !important;
    color: var(--kaf-dark) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.kaf-s3__meta {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 4px !important;
}

.kaf-s3__meta span {
    color: #667085 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
}

.kaf-s3__meta b {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(245, 158, 11, 0.14) !important;
    color: #92400e !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
}

.kaf-s3__card--startup .kaf-s3__arrow {
    right: 28px !important;
    bottom: 18px !important;
    font-size: 64px !important;
    color: rgba(17, 24, 39, 0.92) !important;
}

/* card compact tapi tetap sejajar dengan visual */
.kaf-s3__step {
    gap: 30px !important;
}

@media (max-height: 860px) and (min-width: 981px) {
    .kaf-s3__card.kaf-s3__card--startup {
        max-width: 650px !important;
        min-height: 415px !important;
        padding: 28px 30px 26px !important;
    }

    .kaf-s3__card--startup h3 {
        margin-top: 26px !important;
        font-size: clamp(30px, 2.35vw, 40px) !important;
    }

    .kaf-s3__card--startup .kaf-s3__lead {
        font-size: 13.8px !important;
        margin-bottom: 16px !important;
    }

    .kaf-s3__list {
        gap: 7px !important;
        margin-bottom: 16px !important;
    }

    .kaf-s3__list li {
        min-height: 30px !important;
        font-size: 12.5px !important;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }
}

@media (max-width: 980px) {
    .kaf-s3__card.kaf-s3__card--startup {
        min-height: auto !important;
        padding: 26px 22px 24px !important;
    }

    .kaf-s3__eyebrow {
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    .kaf-s3__eyebrow em {
        white-space: normal !important;
    }

    .kaf-s3__card--startup h3 {
        margin-top: 28px !important;
        font-size: 30px !important;
    }

    .kaf-s3__card--startup .kaf-s3__lead {
        font-size: 14px !important;
    }
}

/* =========================================================
   SECTION 3 INTRO REDESIGN
   Title kiri + glass intro kanan, lebih modern dan turun
   ========================================================= */

.kaf-s3__head.kaf-s3__head--redesign {
    align-items: center !important;
    gap: 42px !important;
    transform: translateY(34px) !important;
}

.kaf-s3__title {
    min-width: 0 !important;
}

.kaf-s3__badge {
    width: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 13px !important;
    margin-bottom: 16px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    font-weight: 800 !important;
}

.kaf-s3__head--redesign h2 {
    max-width: 720px !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(44px, 3.65vw, 62px) !important;
    line-height: 1.01 !important;
    letter-spacing: -0.055em !important;
    font-weight: 760 !important;
}

.kaf-s3__head--redesign h2 span {
    position: relative !important;
    display: inline-block !important;
    color: #fff7ed !important;
}

.kaf-s3__head--redesign h2 span::after {
    content: "" !important;
    position: absolute !important;
    left: 3px !important;
    right: 8px !important;
    bottom: 4px !important;
    height: 9px !important;
    z-index: -1 !important;
    border-radius: 999px !important;
    background: rgba(245, 158, 11, 0.38) !important;
}

.kaf-s3__intro-card {
    width: min(100%, 500px) !important;
    margin-top: 8px !important;
    padding: 18px 18px 16px !important;
    border-radius: 24px !important;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.16),
        rgba(255, 255, 255, 0.09)
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow:
        0 18px 48px rgba(5, 32, 17, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.kaf-s3__intro-card p {
    max-width: none !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.93) !important;
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    letter-spacing: -0.01em !important;
    font-weight: 500 !important;
}

.kaf-s3__intro-points {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 14px !important;
}

.kaf-s3__intro-points span {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 30px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
}

.kaf-s3__intro-points span::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: #f59e0b !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16) !important;
}

/* layar pendek: intro tetap turun tapi tidak makan area card */
@media (max-height: 860px) and (min-width: 981px) {
    .kaf-s3__head.kaf-s3__head--redesign {
        transform: translateY(26px) !important;
    }

    .kaf-s3__badge {
        margin-bottom: 12px !important;
    }

    .kaf-s3__head--redesign h2 {
        font-size: clamp(40px, 3.25vw, 56px) !important;
    }

    .kaf-s3__intro-card {
        width: min(100%, 470px) !important;
        padding: 15px 16px 14px !important;
    }

    .kaf-s3__intro-card p {
        font-size: 13.4px !important;
        line-height: 1.48 !important;
    }

    .kaf-s3__intro-points {
        margin-top: 11px !important;
    }
}

@media (max-width: 980px) {
    .kaf-s3__head.kaf-s3__head--redesign {
        display: block !important;
        transform: none !important;
    }

    .kaf-s3__badge {
        margin-bottom: 12px !important;
    }

    .kaf-s3__head--redesign h2 {
        font-size: 36px !important;
        line-height: 1.06 !important;
    }

    .kaf-s3__intro-card {
        width: 100% !important;
        margin-top: 18px !important;
        padding: 16px !important;
    }

    .kaf-s3__intro-card p {
        font-size: 13px !important;
    }
}

/* =========================================================
   SECTION 3 INTRO REDESIGN
   Title kiri + glass intro kanan, lebih modern dan turun
   ========================================================= */

.kaf-s3__head.kaf-s3__head--redesign {
    align-items: center !important;
    gap: 42px !important;
    transform: translateY(34px) !important;
}

.kaf-s3__title {
    min-width: 0 !important;
}

.kaf-s3__badge {
    width: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 13px !important;
    margin-bottom: 16px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    font-weight: 800 !important;
}

.kaf-s3__head--redesign h2 {
    max-width: 720px !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(44px, 3.65vw, 62px) !important;
    line-height: 1.01 !important;
    letter-spacing: -0.055em !important;
    font-weight: 760 !important;
}

.kaf-s3__head--redesign h2 span {
    position: relative !important;
    display: inline-block !important;
    color: #fff7ed !important;
}

.kaf-s3__head--redesign h2 span::after {
    content: "" !important;
    position: absolute !important;
    left: 3px !important;
    right: 8px !important;
    bottom: 4px !important;
    height: 9px !important;
    z-index: -1 !important;
    border-radius: 999px !important;
    background: rgba(245, 158, 11, 0.38) !important;
}

.kaf-s3__intro-card {
    width: min(100%, 500px) !important;
    margin-top: 8px !important;
    padding: 18px 18px 16px !important;
    border-radius: 24px !important;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.16),
        rgba(255, 255, 255, 0.09)
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow:
        0 18px 48px rgba(5, 32, 17, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.kaf-s3__intro-card p {
    max-width: none !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.93) !important;
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    letter-spacing: -0.01em !important;
    font-weight: 500 !important;
}

.kaf-s3__intro-points {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 14px !important;
}

.kaf-s3__intro-points span {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 30px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
}

.kaf-s3__intro-points span::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: #f59e0b !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16) !important;
}

/* layar pendek: intro tetap turun tapi tidak makan area card */
@media (max-height: 860px) and (min-width: 981px) {
    .kaf-s3__head.kaf-s3__head--redesign {
        transform: translateY(26px) !important;
    }

    .kaf-s3__badge {
        margin-bottom: 12px !important;
    }

    .kaf-s3__head--redesign h2 {
        font-size: clamp(40px, 3.25vw, 56px) !important;
    }

    .kaf-s3__intro-card {
        width: min(100%, 470px) !important;
        padding: 15px 16px 14px !important;
    }

    .kaf-s3__intro-card p {
        font-size: 13.4px !important;
        line-height: 1.48 !important;
    }

    .kaf-s3__intro-points {
        margin-top: 11px !important;
    }
}

@media (max-width: 980px) {
    .kaf-s3__head.kaf-s3__head--redesign {
        display: block !important;
        transform: none !important;
    }

    .kaf-s3__badge {
        margin-bottom: 12px !important;
    }

    .kaf-s3__head--redesign h2 {
        font-size: 36px !important;
        line-height: 1.06 !important;
    }

    .kaf-s3__intro-card {
        width: 100% !important;
        margin-top: 18px !important;
        padding: 16px !important;
    }

    .kaf-s3__intro-card p {
        font-size: 13px !important;
    }
}

/* =========================================================
   SECTION 4 — PAKET INTERNET FINAL RESET
   Closer to reference, tighter side gap, readable cards
   ========================================================= */

.kaf-section4 {
    position: relative;
    height: calc(100svh - var(--kaf-header-h));
    min-height: calc(100svh - var(--kaf-header-h));
    background: var(--kaf-bg);
    overflow: hidden;
}

.kaf-s4__inner {
    height: 100%;
    display: grid;
    grid-template-rows: 170px minmax(0, 1fr);
    padding-top: 48px;
    padding-bottom: 40px;
}

.kaf-s4__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 54px;
}

.kaf-s4__badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 13px;
    margin-bottom: 13px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.16);
    color: #991b1b;
    font-size: 11px;
    font-weight: 850;
}

.kaf-s4__head h2 {
    margin: 0;
    color: #126734;
    font-size: clamp(42px, 3.45vw, 58px);
    line-height: 1.01;
    letter-spacing: -0.055em;
    font-weight: 780;
}

.kaf-s4__head p {
    max-width: 540px;
    margin: 38px 0 0;
    color: #111827;
    font-size: 14.5px;
    line-height: 1.52;
    font-weight: 500;
}

.kaf-s4__showcase {
    position: relative;
    min-height: 0;
    border-radius: 34px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(245, 158, 11, 0.22),
            transparent 20rem
        ),
        radial-gradient(
            circle at 82% 18%,
            rgba(255, 255, 255, 0.14),
            transparent 18rem
        ),
        linear-gradient(135deg, #076666 0%, #0b7b59 48%, #f59e0b 100%);
    box-shadow:
        0 30px 90px rgba(5, 32, 17, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.kaf-s4__showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background:
        radial-gradient(
                circle at 86% 60%,
                rgba(255, 255, 255, 0.54) 0 1.8px,
                transparent 2px
            )
            0 0 / 17px 17px,
        linear-gradient(
            135deg,
            transparent 0 42%,
            rgba(255, 255, 255, 0.15) 42% 55%,
            transparent 55% 100%
        );
    pointer-events: none;
}

.kaf-s4__cards {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 26px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 96px;
    scroll-behavior: smooth;
    padding: 42px 96px 88px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.kaf-s4__cards::-webkit-scrollbar {
    display: none;
}

.kaf-s4__card {
    position: relative;
    flex: 0 0 304px;
    scroll-snap-align: center;
    min-height: 430px;
    padding: 20px 18px 18px;
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 96% 100%,
            rgba(245, 158, 11, 0.17),
            transparent 12rem
        ),
        linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.99),
            rgba(255, 247, 239, 0.97)
        );
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow:
        0 24px 58px rgba(5, 32, 17, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
}

.kaf-s4__deal {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 11px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.34);
    color: #7c2d12;
    font-size: 10.5px;
    font-weight: 900;
}

.kaf-s4__deal::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16);
}

.kaf-s4__card h3 {
    min-height: 38px;
    margin: 0 0 13px;
    color: #052011;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: -0.025em;
    font-weight: 850;
}

.kaf-s4__speed {
    width: fit-content;
    margin: 0 0 12px;
    padding: 7px 11px;
    border-radius: 14px;
    background: rgba(7, 102, 102, 0.08);
    border: 1px solid rgba(7, 102, 102, 0.12);
    color: #052011;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 790;
}

.kaf-s4__price-note {
    margin: 0 0 4px;
    color: #667085;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 650;
}

.kaf-s4__price-note span {
    color: #98a2b3;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.kaf-s4__price {
    position: relative;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 7px 0 15px;
    padding: 11px 13px;
    border-radius: 17px;
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(245, 158, 11, 0.18),
            transparent 7rem
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96),
            rgba(255, 250, 244, 0.88)
        );
    border: 1px solid rgba(153, 27, 27, 0.1);
    color: #991b1b;
    font-size: 23px;
    line-height: 1;
    letter-spacing: -0.045em;
    font-weight: 920;
    box-shadow:
        0 12px 26px rgba(153, 27, 27, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.kaf-s4__price::before {
    content: "Promo";
    position: absolute;
    top: -10px;
    right: 12px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #991b1b;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
}

.kaf-s4__price small {
    color: #667085;
    font-size: 11.5px;
    font-weight: 600;
}

.kaf-s4__choose {
    height: 40px;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
    color: #fff;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 850;
    box-shadow: 0 16px 32px rgba(153, 27, 27, 0.2);
}

.kaf-s4__features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-height: 96px;
    padding: 14px 10px;
    margin-bottom: 12px;
    border-radius: 17px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.045);
}

.kaf-s4__features div {
    text-align: center;
}

.kaf-s4__features i {
    display: block;
    color: #08214a;
    font-size: 16px;
    line-height: 1;
    font-style: normal;
    font-weight: 900;
    margin-bottom: 7px;
}

.kaf-s4__features strong {
    display: block;
    color: #111827;
    font-size: 11.2px;
    line-height: 1.18;
    font-weight: 900;
}

.kaf-s4__features span {
    display: block;
    margin-top: 5px;
    color: #1f2937;
    font-size: 9.8px;
    line-height: 1.25;
    font-weight: 500;
}

.kaf-s4__benefit-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    margin-bottom: 9px;
    border-radius: 15px;
    background: rgba(7, 102, 102, 0.07);
    border: 1px solid rgba(7, 102, 102, 0.1);
}

.kaf-s4__benefit-head b {
    display: inline-flex;
    align-items: center;
    height: 23px;
    padding: 0 10px;
    border-radius: 999px;
    background: #076666;
    color: #fff;
    font-size: 9.5px;
    font-weight: 900;
}

.kaf-s4__benefit-head span {
    color: #052011;
    font-size: 11.2px;
    font-weight: 850;
}

.kaf-s4__benefit-head em {
    margin-left: auto;
    color: rgba(5, 32, 17, 0.7);
    font-size: 14px;
    font-style: normal;
}

.kaf-s4__benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.kaf-s4__benefits span {
    position: relative;
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 8px 9px 8px 31px;
    border-radius: 12px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.96),
        rgba(255, 255, 255, 0.78)
    );
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: #052011;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 800;
}

.kaf-s4__benefits span::before {
    content: "✓";
    position: absolute;
    left: 9px;
    top: 50%;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.12);
    color: #076666;
    font-size: 9px;
    font-weight: 900;
    transform: translateY(-50%);
}

.kaf-s4__nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    font-size: 36px;
    line-height: 1;
    font-weight: 650;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow:
        0 18px 38px rgba(5, 32, 17, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.kaf-s4__nav--prev {
    left: 46px;
}

.kaf-s4__nav--next {
    right: 46px;
}

.kaf-s4__dots {
    position: absolute;
    left: 50%;
    bottom: 92px;
    z-index: 4;
    display: flex;
    gap: 6px;
    transform: translateX(-50%);
}

.kaf-s4__dots span {
    width: 9px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
}

.kaf-s4__dots span:first-child {
    width: 25px;
    background: rgba(255, 255, 255, 0.88);
}

.kaf-s4__more {
    position: absolute;
    left: 50%;
    bottom: 32px;
    z-index: 4;
    min-width: 190px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.36);
    color: #fff;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 900;
    transform: translateX(-50%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.kaf-s4__more i {
    font-style: normal;
    font-size: 20px;
    line-height: 1;
}

/* =========================================================
   SECTION 5 — BALANCED FINAL
   Ukuran tengah: tidak terlalu tinggi, tidak terlalu kecil
   ========================================================= */

#layanan-tambahan.kaf-section5 {
    position: relative;
    height: calc(100svh - var(--kaf-header-h));
    min-height: calc(100svh - var(--kaf-header-h));
    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(245, 158, 11, 0.08),
            transparent 18rem
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(7, 102, 102, 0.08),
            transparent 22rem
        ),
        #f9fafb;
    overflow: hidden;
}

#layanan-tambahan .kaf-s5 {
    height: 100%;
    display: grid;
    grid-template-rows: 118px minmax(0, 1fr) 172px;
    gap: 24px;
    padding-top: 36px;
    padding-bottom: 32px;
}

/* HEADER */
#layanan-tambahan .kaf-s5__head {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

#layanan-tambahan .kaf-s5__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 13px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.08);
    color: #076666;
    font-size: 10.8px;
    line-height: 1;
    font-weight: 850;
}

#layanan-tambahan .kaf-s5__head h2 {
    max-width: 680px;
    margin: 0 auto 8px;
    color: #111827;
    font-size: clamp(31px, 2.55vw, 42px);
    line-height: 1.04;
    letter-spacing: -0.05em;
    font-weight: 800;
}

#layanan-tambahan .kaf-s5__head p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.42;
    font-weight: 500;
}

/* ADDON CARDS */
#layanan-tambahan .kaf-s5__addons {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

#layanan-tambahan .kaf-addon-card {
    position: relative;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(180deg, #076666 0%, #052011 100%);
    box-shadow:
        0 22px 48px rgba(5, 32, 17, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#layanan-tambahan .kaf-addon-card:nth-child(1) {
    background: linear-gradient(180deg, #7c3aed 0%, #1e003e 100%);
}

#layanan-tambahan .kaf-addon-card:nth-child(2) {
    background: linear-gradient(180deg, #991b1b 0%, #4a0008 100%);
}

#layanan-tambahan .kaf-addon-card:nth-child(3) {
    background: linear-gradient(180deg, #0f62d6 0%, #052a5e 100%);
}

#layanan-tambahan .kaf-addon-card:nth-child(4) {
    background: linear-gradient(180deg, #d97706 0%, #7c2d12 100%);
}

#layanan-tambahan .kaf-addon-card.is-soon {
    background: linear-gradient(180deg, #9ca3af 0%, #374151 100%) !important;
}

#layanan-tambahan .kaf-addon-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#layanan-tambahan .kaf-addon-card.is-soon .kaf-addon-card__bg {
    filter: grayscale(1);
}

#layanan-tambahan .kaf-addon-card__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.03) 0%,
            rgba(0, 0, 0, 0.1) 34%,
            rgba(0, 0, 0, 0.8) 100%
        ),
        radial-gradient(
            circle at 50% 10%,
            rgba(255, 255, 255, 0.12),
            transparent 12rem
        );
}

#layanan-tambahan .kaf-addon-card.is-soon .kaf-addon-card__overlay {
    background: linear-gradient(
        180deg,
        rgba(75, 85, 99, 0.12) 0%,
        rgba(55, 65, 81, 0.28) 42%,
        rgba(31, 41, 55, 0.84) 100%
    );
}

#layanan-tambahan .kaf-addon-card__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding: 24px 24px 27px;
}

#layanan-tambahan .kaf-addon-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 20px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 14px;
    line-height: 1;
    font-weight: 850;
}

#layanan-tambahan .kaf-addon-card h3 {
    max-width: 92%;
    margin: 0;
    color: #fff;
    font-size: clamp(21px, 1.62vw, 28px);
    line-height: 1.22;
    letter-spacing: -0.035em;
    font-weight: 760;
}

#layanan-tambahan .kaf-addon-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    font-weight: 650;
}

/* SHORTCUTS */
#layanan-tambahan .kaf-s5__shortcuts {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

#layanan-tambahan .kaf-shortcut-card {
    position: relative;
    min-height: 0;
    height: 100%;
    padding: 24px 26px 0;
    overflow: hidden;
    border-radius: 26px;
    background:
        radial-gradient(
            circle at 10% 100%,
            rgba(153, 27, 27, 0.07),
            transparent 14rem
        ),
        #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 16px 36px rgba(5, 32, 17, 0.075);
}

#layanan-tambahan .kaf-shortcut-card.is-accent {
    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(245, 158, 11, 0.32),
            transparent 14rem
        ),
        linear-gradient(135deg, #991b1b 0%, #f59e0b 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.14);
}

#layanan-tambahan .kaf-shortcut-card__arrow {
    position: absolute;
    top: 20px;
    right: 22px;
    z-index: 4;
    color: inherit;
    text-decoration: none;
    font-size: 34px;
    line-height: 1;
    font-weight: 650;
}

#layanan-tambahan .kaf-shortcut-card__text {
    position: relative;
    z-index: 2;
    max-width: 72%;
}

#layanan-tambahan .kaf-shortcut-card__text h3 {
    margin: 0 0 7px;
    color: #111827;
    font-size: clamp(22px, 1.75vw, 32px);
    line-height: 1.06;
    letter-spacing: -0.045em;
    font-weight: 760;
}

#layanan-tambahan .kaf-shortcut-card.is-accent .kaf-shortcut-card__text h3 {
    color: #fff;
}

#layanan-tambahan .kaf-shortcut-card__text p {
    max-width: 280px;
    margin: 0;
    color: #1f2937;
    font-size: 13.5px;
    line-height: 1.34;
    font-weight: 500;
}

#layanan-tambahan .kaf-shortcut-card.is-accent .kaf-shortcut-card__text p {
    color: rgba(255, 255, 255, 0.92);
}

#layanan-tambahan .kaf-shortcut-card__visual {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 54%;
    height: 70%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

#layanan-tambahan .kaf-shortcut-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
}

#layanan-tambahan .kaf-shortcut-card__visual span {
    position: absolute;
    right: 18px;
    bottom: 16px;
    display: inline-flex;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.1);
    color: #076666;
    font-size: 10px;
    font-weight: 900;
}

#layanan-tambahan .kaf-shortcut-card.is-accent .kaf-shortcut-card__visual span {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* Untuk layar desktop pendek: jangan sekecil patch sebelumnya */
@media (max-height: 860px) and (min-width: 981px) {
    #layanan-tambahan .kaf-s5 {
        grid-template-rows: 98px minmax(0, 1fr) 156px !important;
        gap: 18px !important;
        padding-top: 28px !important;
        padding-bottom: 24px !important;
    }

    #layanan-tambahan .kaf-s5__eyebrow {
        min-height: 26px !important;
        margin-bottom: 9px !important;
        font-size: 10px !important;
    }

    #layanan-tambahan .kaf-s5__head h2 {
        font-size: clamp(27px, 2.2vw, 36px) !important;
        margin-bottom: 6px !important;
    }

    #layanan-tambahan .kaf-s5__head p {
        font-size: 12.8px !important;
    }

    #layanan-tambahan .kaf-addon-card__badge {
        min-height: 38px !important;
        padding: 0 18px !important;
        margin-bottom: 14px !important;
        font-size: 13px !important;
    }

    #layanan-tambahan .kaf-addon-card h3 {
        font-size: clamp(19px, 1.48vw, 24px) !important;
        line-height: 1.2 !important;
    }

    #layanan-tambahan .kaf-addon-card a {
        margin-top: 15px !important;
        font-size: 13px !important;
    }

    #layanan-tambahan .kaf-shortcut-card {
        padding: 21px 23px 0 !important;
        border-radius: 24px !important;
    }

    #layanan-tambahan .kaf-shortcut-card__text h3 {
        font-size: clamp(20px, 1.6vw, 28px) !important;
    }

    #layanan-tambahan .kaf-shortcut-card__text p {
        font-size: 12.5px !important;
        line-height: 1.3 !important;
    }

    #layanan-tambahan .kaf-shortcut-card__arrow {
        top: 18px !important;
        right: 20px !important;
        font-size: 31px !important;
    }
}

/* Mobile */
@media (max-width: 980px) {
    #layanan-tambahan.kaf-section5 {
        height: auto;
        min-height: auto;
        overflow: visible;
    }

    #layanan-tambahan .kaf-s5 {
        height: auto;
        display: block;
        padding-top: 46px;
        padding-bottom: 46px;
    }

    #layanan-tambahan .kaf-s5__head {
        margin-bottom: 24px;
    }

    #layanan-tambahan .kaf-s5__addons,
    #layanan-tambahan .kaf-s5__shortcuts {
        grid-template-columns: 1fr;
    }

    #layanan-tambahan .kaf-s5__addons {
        display: grid;
        gap: 14px;
    }

    #layanan-tambahan .kaf-addon-card {
        min-height: 440px;
    }

    #layanan-tambahan .kaf-s5__shortcuts {
        display: grid;
        gap: 14px;
        margin-top: 20px;
    }

    #layanan-tambahan .kaf-shortcut-card {
        min-height: 230px;
    }
}

/* =========================================================
   SECTION 5 — badge layanan + soon corner + font lebih pas
   ========================================================= */

#layanan-tambahan .kaf-addon-card {
    position: relative;
}

#layanan-tambahan .kaf-addon-card__soon {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#layanan-tambahan .kaf-addon-card.is-soon .kaf-addon-card__soon {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

#layanan-tambahan .kaf-addon-card__badge {
    min-height: 38px !important;
    padding: 0 18px !important;
    margin-bottom: 14px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

#layanan-tambahan .kaf-addon-card h3 {
    max-width: 88% !important;
    font-size: clamp(17px, 1.4vw, 23px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em !important;
    font-weight: 760 !important;
}

#layanan-tambahan .kaf-addon-card a {
    margin-top: 14px !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
}

#layanan-tambahan .kaf-addon-card__content {
    padding: 22px 22px 24px !important;
}

@media (max-height: 860px) and (min-width: 981px) {
    #layanan-tambahan .kaf-addon-card__badge {
        min-height: 34px !important;
        padding: 0 16px !important;
        margin-bottom: 12px !important;
        font-size: 12px !important;
    }

    #layanan-tambahan .kaf-addon-card h3 {
        font-size: clamp(16px, 1.28vw, 21px) !important;
        line-height: 1.16 !important;
    }

    #layanan-tambahan .kaf-addon-card a {
        margin-top: 12px !important;
        font-size: 12px !important;
    }

    #layanan-tambahan .kaf-addon-card__soon {
        top: 14px;
        right: 14px;
        min-height: 26px;
        padding: 0 10px;
        font-size: 10px;
    }
}

/* =========================================================
   SECTION 5 — SOON BADGE + FONT MICRO FIX
   Badge tengah = nama layanan, status soon di pojok kanan
   ========================================================= */

#layanan-tambahan .kaf-addon-card__soon {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 6 !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
}

#layanan-tambahan .kaf-addon-card__badge {
    min-height: 38px !important;
    padding: 0 18px !important;
    margin-bottom: 13px !important;
    font-size: 12.5px !important;
    font-weight: 850 !important;
}

#layanan-tambahan .kaf-addon-card h3 {
    max-width: 88% !important;
    font-size: clamp(17px, 1.35vw, 23px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em !important;
    font-weight: 760 !important;
}

#layanan-tambahan .kaf-addon-card a {
    margin-top: 13px !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
}

#layanan-tambahan .kaf-addon-card__content {
    padding-bottom: 24px !important;
}

@media (max-height: 860px) and (min-width: 981px) {
    #layanan-tambahan .kaf-addon-card__soon {
        top: 14px !important;
        right: 14px !important;
        min-height: 25px !important;
        padding: 0 10px !important;
        font-size: 9.6px !important;
    }

    #layanan-tambahan .kaf-addon-card__badge {
        min-height: 34px !important;
        padding: 0 16px !important;
        margin-bottom: 11px !important;
        font-size: 11.6px !important;
    }

    #layanan-tambahan .kaf-addon-card h3 {
        font-size: clamp(15.5px, 1.22vw, 20.5px) !important;
        line-height: 1.16 !important;
    }

    #layanan-tambahan .kaf-addon-card a {
        margin-top: 11px !important;
        font-size: 11.8px !important;
    }
}

/* =========================================================
   SECTION 5 — FIX HEADER TEXT KETUTUP CARD
   Naikkan ruang header agar subtitle tidak ketabrak card
   ========================================================= */

#layanan-tambahan .kaf-s5 {
    grid-template-rows: 158px minmax(0, 1fr) 166px !important;
    gap: 22px !important;
    padding-top: 32px !important;
    padding-bottom: 30px !important;
}

#layanan-tambahan .kaf-s5__head {
    position: relative !important;
    z-index: 3 !important;
}

#layanan-tambahan .kaf-s5__addons {
    position: relative !important;
    z-index: 1 !important;
}

/* title tetap besar, cuma dirapikan line-height */
#layanan-tambahan .kaf-s5__head h2 {
    margin-bottom: 10px !important;
    line-height: 1.03 !important;
}

#layanan-tambahan .kaf-s5__head p {
    position: relative !important;
    z-index: 3 !important;
    font-size: 13.8px !important;
    line-height: 1.42 !important;
}

/* card turun sedikit agar tidak nabrak header */
#layanan-tambahan .kaf-addon-card {
    border-radius: 28px !important;
}

/* desktop pendek tetap aman */
@media (max-height: 860px) and (min-width: 981px) {
    #layanan-tambahan .kaf-s5 {
        grid-template-rows: 126px minmax(0, 1fr) 148px !important;
        gap: 16px !important;
        padding-top: 24px !important;
        padding-bottom: 22px !important;
    }

    #layanan-tambahan .kaf-s5__head h2 {
        font-size: clamp(25px, 2.05vw, 34px) !important;
        margin-bottom: 6px !important;
    }

    #layanan-tambahan .kaf-s5__head p {
        font-size: 12.6px !important;
        line-height: 1.32 !important;
    }
}

/* =========================================================
   SECTION 5 — ADDON PHOTO GRADIENT OVERLAY
   Per card punya tint warna + dark bottom gradient agar teks putih jelas
   ========================================================= */

/* Foto tetap full, tapi dibuat sedikit lebih soft agar overlay bekerja */
#layanan-tambahan .kaf-addon-card__bg {
    opacity: 0.94 !important;
    transform: scale(1.03) !important;
}

/* Base overlay: atas tetap foto terlihat, bawah gelap untuk teks */
#layanan-tambahan .kaf-addon-card__overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.12) 34%,
        rgba(0, 0, 0, 0.4) 64%,
        rgba(0, 0, 0, 0.88) 100%
    ) !important;
}

/* Card 1 — Internet / purple */
#layanan-tambahan .kaf-addon-card:nth-child(1) .kaf-addon-card__overlay {
    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(168, 85, 247, 0.38),
            transparent 18rem
        ),
        linear-gradient(
            180deg,
            rgba(109, 40, 217, 0.18) 0%,
            rgba(88, 28, 135, 0.32) 42%,
            rgba(31, 0, 62, 0.9) 100%
        ) !important;
}

/* Card 2 — Minipack TV / red KAF */
#layanan-tambahan .kaf-addon-card:nth-child(2) .kaf-addon-card__overlay {
    background:
        radial-gradient(
            circle at 52% 18%,
            rgba(245, 158, 11, 0.2),
            transparent 16rem
        ),
        linear-gradient(
            180deg,
            rgba(153, 27, 27, 0.18) 0%,
            rgba(153, 27, 27, 0.36) 42%,
            rgba(50, 0, 6, 0.92) 100%
        ) !important;
}

/* Card 3 — Streaming / blue */
#layanan-tambahan .kaf-addon-card:nth-child(3) .kaf-addon-card__overlay {
    background:
        radial-gradient(
            circle at 52% 18%,
            rgba(96, 165, 250, 0.28),
            transparent 17rem
        ),
        linear-gradient(
            180deg,
            rgba(37, 99, 235, 0.16) 0%,
            rgba(14, 76, 151, 0.34) 42%,
            rgba(3, 24, 54, 0.92) 100%
        ) !important;
}

/* Card 4 — Smart Home soon / grey */
#layanan-tambahan .kaf-addon-card:nth-child(4) .kaf-addon-card__overlay,
#layanan-tambahan .kaf-addon-card.is-soon .kaf-addon-card__overlay {
    background:
        radial-gradient(
            circle at 52% 16%,
            rgba(255, 255, 255, 0.14),
            transparent 16rem
        ),
        linear-gradient(
            180deg,
            rgba(156, 163, 175, 0.18) 0%,
            rgba(75, 85, 99, 0.42) 42%,
            rgba(31, 41, 55, 0.92) 100%
        ) !important;
}

/* Pastikan konten selalu di atas overlay */
#layanan-tambahan .kaf-addon-card__content,
#layanan-tambahan .kaf-addon-card__soon {
    position: relative !important;
    z-index: 3 !important;
}

/* Tambah shadow halus untuk teks putih */
#layanan-tambahan .kaf-addon-card h3,
#layanan-tambahan .kaf-addon-card a,
#layanan-tambahan .kaf-addon-card__badge {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28) !important;
}

/* Badge tetap glass tapi lebih kontras di atas foto */
#layanan-tambahan .kaf-addon-card__badge {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 10px 22px rgba(0, 0, 0, 0.12) !important;
}

#layanan-tambahan .kaf-addon-card__soon {
    text-shadow: none !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 10px 22px rgba(0, 0, 0, 0.14) !important;
}

/* =========================================================
   SECTION 5 — ADDON PHOTO GRADIENT OVERLAY
   Per card punya tint warna + dark bottom gradient agar teks putih jelas
   ========================================================= */

/* Foto tetap full, tapi dibuat sedikit lebih soft agar overlay bekerja */
#layanan-tambahan .kaf-addon-card__bg {
    opacity: 0.94 !important;
    transform: scale(1.03) !important;
}

/* Base overlay: atas tetap foto terlihat, bawah gelap untuk teks */
#layanan-tambahan .kaf-addon-card__overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.12) 34%,
        rgba(0, 0, 0, 0.4) 64%,
        rgba(0, 0, 0, 0.88) 100%
    ) !important;
}

/* Card 1 — Internet / purple */
#layanan-tambahan .kaf-addon-card:nth-child(1) .kaf-addon-card__overlay {
    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(168, 85, 247, 0.38),
            transparent 18rem
        ),
        linear-gradient(
            180deg,
            rgba(109, 40, 217, 0.18) 0%,
            rgba(88, 28, 135, 0.32) 42%,
            rgba(31, 0, 62, 0.9) 100%
        ) !important;
}

/* Card 2 — Minipack TV / red KAF */
#layanan-tambahan .kaf-addon-card:nth-child(2) .kaf-addon-card__overlay {
    background:
        radial-gradient(
            circle at 52% 18%,
            rgba(245, 158, 11, 0.2),
            transparent 16rem
        ),
        linear-gradient(
            180deg,
            rgba(153, 27, 27, 0.18) 0%,
            rgba(153, 27, 27, 0.36) 42%,
            rgba(50, 0, 6, 0.92) 100%
        ) !important;
}

/* Card 3 — Streaming / blue */
#layanan-tambahan .kaf-addon-card:nth-child(3) .kaf-addon-card__overlay {
    background:
        radial-gradient(
            circle at 52% 18%,
            rgba(96, 165, 250, 0.28),
            transparent 17rem
        ),
        linear-gradient(
            180deg,
            rgba(37, 99, 235, 0.16) 0%,
            rgba(14, 76, 151, 0.34) 42%,
            rgba(3, 24, 54, 0.92) 100%
        ) !important;
}

/* Card 4 — Smart Home soon / grey */
#layanan-tambahan .kaf-addon-card:nth-child(4) .kaf-addon-card__overlay,
#layanan-tambahan .kaf-addon-card.is-soon .kaf-addon-card__overlay {
    background:
        radial-gradient(
            circle at 52% 16%,
            rgba(255, 255, 255, 0.14),
            transparent 16rem
        ),
        linear-gradient(
            180deg,
            rgba(156, 163, 175, 0.18) 0%,
            rgba(75, 85, 99, 0.42) 42%,
            rgba(31, 41, 55, 0.92) 100%
        ) !important;
}

/* Pastikan konten selalu di atas overlay */
#layanan-tambahan .kaf-addon-card__content,
#layanan-tambahan .kaf-addon-card__soon {
    position: relative !important;
    z-index: 3 !important;
}

/* Tambah shadow halus untuk teks putih */
#layanan-tambahan .kaf-addon-card h3,
#layanan-tambahan .kaf-addon-card a,
#layanan-tambahan .kaf-addon-card__badge {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28) !important;
}

/* Badge tetap glass tapi lebih kontras di atas foto */
#layanan-tambahan .kaf-addon-card__badge {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 10px 22px rgba(0, 0, 0, 0.12) !important;
}

#layanan-tambahan .kaf-addon-card__soon {
    text-shadow: none !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 10px 22px rgba(0, 0, 0, 0.14) !important;
}

/* =========================================================
   SECTION 5 — SOON BADGE FIX + CLICK/HOVER FEEDBACK
   ========================================================= */

/* Kunci card supaya layer tidak saling tabrak */
#layanan-tambahan .kaf-addon-card,
#layanan-tambahan .kaf-shortcut-card {
    isolation: isolate !important;
    will-change: transform !important;
}

/* Fix badge Segera Hadir agar tidak rusak/kepotong */
#layanan-tambahan .kaf-addon-card__soon {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 8 !important;
    transform: none !important;
    width: auto !important;
    max-width: calc(100% - 36px) !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    color: #ffffff !important;
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    text-shadow: none !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

/* Pastikan content tetap di bawah badge soon, tidak nabrak */
#layanan-tambahan .kaf-addon-card__content {
    position: relative !important;
    z-index: 4 !important;
}

#layanan-tambahan .kaf-addon-card.is-soon .kaf-addon-card__content {
    padding-top: 56px !important;
}

/* Rapihin tatanan text card layanan */
#layanan-tambahan .kaf-addon-card__badge {
    position: relative !important;
    z-index: 5 !important;
    min-height: 38px !important;
    padding: 0 18px !important;
    margin-bottom: 13px !important;
    font-size: 12.5px !important;
    font-weight: 850 !important;
}

#layanan-tambahan .kaf-addon-card h3 {
    max-width: 88% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(17px, 1.34vw, 22px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em !important;
    font-weight: 760 !important;
}

#layanan-tambahan .kaf-addon-card a {
    position: relative !important;
    z-index: 5 !important;
    margin-top: 13px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

/* Hover agar user paham card bisa diklik */
#layanan-tambahan .kaf-addon-card:not(.is-soon),
#layanan-tambahan .kaf-shortcut-card {
    cursor: pointer !important;
    transition:
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.38s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#layanan-tambahan .kaf-addon-card:not(.is-soon):hover {
    transform: translateY(-8px) scale(1.012) !important;
    box-shadow:
        0 32px 70px rgba(5, 32, 17, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

#layanan-tambahan .kaf-addon-card.is-soon {
    cursor: default !important;
}

#layanan-tambahan .kaf-addon-card.is-soon:hover {
    transform: translateY(-3px) !important;
}

/* Foto ikut zoom halus saat hover */
#layanan-tambahan .kaf-addon-card__bg {
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#layanan-tambahan .kaf-addon-card:not(.is-soon):hover .kaf-addon-card__bg {
    transform: scale(1.07) !important;
}

/* Link Selengkapnya dikasih tanda interaktif */
#layanan-tambahan .kaf-addon-card a span:last-child {
    display: inline-block !important;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#layanan-tambahan .kaf-addon-card:hover a span:last-child {
    transform: translateX(4px) !important;
}

/* Shortcut hover */
#layanan-tambahan .kaf-shortcut-card:hover {
    transform: translateY(-6px) !important;
    box-shadow:
        0 26px 56px rgba(5, 32, 17, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

#layanan-tambahan .kaf-shortcut-card__visual img {
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#layanan-tambahan .kaf-shortcut-card:hover .kaf-shortcut-card__visual img {
    transform: translateY(-4px) scale(1.045) !important;
}

#layanan-tambahan .kaf-shortcut-card__arrow {
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#layanan-tambahan .kaf-shortcut-card:hover .kaf-shortcut-card__arrow {
    transform: translate(4px, -4px) !important;
    opacity: 0.9 !important;
}

/* Glow halus di card aktif saat hover */
#layanan-tambahan .kaf-addon-card:not(.is-soon)::after,
#layanan-tambahan .kaf-shortcut-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.18),
        transparent 38%,
        rgba(245, 158, 11, 0.14)
    ) !important;
    transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#layanan-tambahan .kaf-addon-card:not(.is-soon):hover::after,
#layanan-tambahan .kaf-shortcut-card:hover::after {
    opacity: 1 !important;
}

/* Focus keyboard juga jelas */
#layanan-tambahan .kaf-addon-card a:focus-visible,
#layanan-tambahan .kaf-shortcut-card a:focus-visible {
    outline: 3px solid rgba(245, 158, 11, 0.55) !important;
    outline-offset: 4px !important;
    border-radius: 999px !important;
}

@media (max-height: 860px) and (min-width: 981px) {
    #layanan-tambahan .kaf-addon-card__soon {
        top: 14px !important;
        right: 14px !important;
        min-height: 28px !important;
        padding: 0 11px !important;
        font-size: 9.8px !important;
    }

    #layanan-tambahan .kaf-addon-card.is-soon .kaf-addon-card__content {
        padding-top: 46px !important;
    }

    #layanan-tambahan .kaf-addon-card h3 {
        font-size: clamp(15.5px, 1.22vw, 20.5px) !important;
    }
}

/* =========================================================
   SECTION 5 — SHORTCUT IMAGE SEDIKIT DIBESARKAN
   ========================================================= */

#layanan-tambahan .kaf-shortcut-card__visual {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    width: 170px !important;
    min-width: 170px !important;
    height: 148px !important;
    overflow: visible !important;
}

#layanan-tambahan .kaf-shortcut-card__visual img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 146px !important;
    object-fit: contain !important;
    object-position: bottom right !important;
    transform: scale(1.12) !important;
    transform-origin: bottom right !important;
}

/* Card tengah yang oranye, boleh sedikit lebih besar biar balance */
#layanan-tambahan .kaf-shortcut-card.is-accent .kaf-shortcut-card__visual {
    width: 178px !important;
    min-width: 178px !important;
    height: 152px !important;
}

#layanan-tambahan .kaf-shortcut-card.is-accent .kaf-shortcut-card__visual img {
    max-height: 150px !important;
    transform: scale(1.14) !important;
}

/* Biar teks tetap punya ruang */
#layanan-tambahan .kaf-shortcut-card__text {
    position: relative !important;
    z-index: 2 !important;
    padding-right: 10px !important;
}

@media (max-height: 860px) and (min-width: 981px) {
    #layanan-tambahan .kaf-shortcut-card__visual {
        width: 156px !important;
        min-width: 156px !important;
        height: 136px !important;
    }

    #layanan-tambahan .kaf-shortcut-card__visual img {
        max-height: 134px !important;
        transform: scale(1.08) !important;
    }

    #layanan-tambahan .kaf-shortcut-card.is-accent .kaf-shortcut-card__visual {
        width: 164px !important;
        min-width: 164px !important;
        height: 140px !important;
    }

    #layanan-tambahan
        .kaf-shortcut-card.is-accent
        .kaf-shortcut-card__visual
        img {
        max-height: 138px !important;
        transform: scale(1.1) !important;
    }
}

/* =========================================================
   SECTION 6 — FINAL CLEAN DOWNLOAD KAFYA
   Pas 1 layar, phone turun, gradient rapi, copy lebih clean
   ========================================================= */

.kaf-section6 {
    position: relative;
    height: calc(100svh - var(--kaf-header-h, 88px));
    min-height: calc(100svh - var(--kaf-header-h, 88px));
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(245, 158, 11, 0.06),
            transparent 22rem
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(7, 102, 102, 0.08),
            transparent 24rem
        ),
        #f9fafb;
    overflow: hidden;
}

.kaf-s6final {
    position: relative;
    height: 100%;
}

/* Headline kiri atas */
.kaf-s6final__headline {
    position: absolute;
    left: clamp(28px, 5vw, 72px);
    top: clamp(46px, 7vh, 72px);
    z-index: 5;
    width: min(48vw, 610px);
}

.kaf-s6final__headline span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 14px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: #076666;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
}

.kaf-s6final__headline h2 {
    margin: 0;
    color: #126734;
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.055em;
    font-weight: 820;
    max-width: 610px;
}

.kaf-s6final__headline p {
    max-width: 560px;
    margin: 18px 0 0;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.62;
    font-weight: 500;
}

/* Panel gradient bawah */
.kaf-s6final__gradient {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 2;
    width: 100vw;
    height: 50%;
    transform: translateX(-50%);
    border-top-left-radius: 36px;
    border-top-right-radius: 36px;
    background:
        radial-gradient(
            circle at 16% 36%,
            rgba(255, 255, 255, 0.1),
            transparent 18rem
        ),
        radial-gradient(
            circle at 82% 50%,
            rgba(255, 255, 255, 0.16),
            transparent 20rem
        ),
        linear-gradient(100deg, #145d2f 0%, #61702f 50%, #de8225 100%);
    box-shadow: 0 -20px 54px rgba(5, 32, 17, 0.08);
    overflow: hidden;
}

.kaf-s6final__gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 42%),
        radial-gradient(
            circle at 86% 66%,
            rgba(255, 255, 255, 0.18),
            transparent 12rem
        );
    pointer-events: none;
}

/* HP/phone: lebih besar dan turun ke area gradient */
.kaf-s6final__phone {
    position: absolute;
    right: clamp(24px, 6vw, 86px);
    bottom: clamp(54px, 8.4vh, 92px);
    z-index: 7;
    width: min(48vw, 640px);
    pointer-events: none;
}

.kaf-s6final__phone img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 30px 48px rgba(5, 32, 17, 0.2))
        drop-shadow(0 12px 24px rgba(245, 158, 11, 0.1));
}

.kaf-s6final__phone-placeholder {
    min-height: 360px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    background: rgba(7, 102, 102, 0.07);
    border: 1px dashed rgba(7, 102, 102, 0.28);
    color: #076666;
    font-size: 13px;
    font-weight: 850;
}

/* Copy download kiri bawah */
.kaf-s6final__download {
    position: relative;
    z-index: 4;
    width: min(44vw, 560px);
    padding-top: clamp(58px, 8vh, 86px);
    margin-left: calc(
        (100vw - min(1180px, calc(100vw - 48px))) / 2 + clamp(28px, 5vw, 72px)
    );
}

.kaf-s6final__download span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 13px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.kaf-s6final__download h3 {
    max-width: 520px;
    margin: 0 0 22px;
    color: #fff;
    font-size: clamp(27px, 2.6vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-weight: 820;
}

.kaf-s6final__stores {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.kaf-s6final__store {
    height: 42px;
    min-width: 132px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 9px;
    background: #111;
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15);
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-s6final__store:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 36px rgba(0, 0, 0, 0.2);
}

.kaf-s6final__store img {
    display: block;
    height: 42px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

.kaf-s6final__store b {
    color: #fff;
    font-size: 13px;
    font-weight: 850;
}

/* Desktop pendek */
@media (max-height: 860px) and (min-width: 981px) {
    .kaf-s6final__headline {
        top: 40px;
        width: min(46vw, 560px);
    }

    .kaf-s6final__headline span {
        min-height: 26px;
        margin-bottom: 12px;
        font-size: 10px;
    }

    .kaf-s6final__headline h2 {
        font-size: clamp(34px, 3.55vw, 50px);
        line-height: 1.01;
    }

    .kaf-s6final__headline p {
        max-width: 510px;
        margin-top: 14px;
        font-size: 13.5px;
        line-height: 1.5;
    }

    .kaf-s6final__gradient {
        height: 49%;
        border-top-left-radius: 32px;
        border-top-right-radius: 32px;
    }

    .kaf-s6final__phone {
        width: min(47vw, 590px);
        bottom: 46px;
        right: clamp(20px, 5vw, 72px);
    }

    .kaf-s6final__download {
        width: min(43vw, 520px);
        padding-top: 52px;
    }

    .kaf-s6final__download span {
        min-height: 26px;
        margin-bottom: 12px;
        font-size: 9.6px;
    }

    .kaf-s6final__download h3 {
        max-width: 480px;
        margin-bottom: 18px;
        font-size: clamp(24px, 2.25vw, 34px);
        line-height: 1.1;
    }

    .kaf-s6final__store,
    .kaf-s6final__store img {
        height: 38px;
    }

    .kaf-s6final__store {
        min-width: 120px;
    }
}

/* Mobile */
@media (max-width: 980px) {
    .kaf-section6 {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding: 46px 0 0;
    }

    .kaf-s6final {
        height: auto;
    }

    .kaf-s6final__headline,
    .kaf-s6final__phone,
    .kaf-s6final__gradient {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: auto;
        transform: none;
    }

    .kaf-s6final__headline {
        max-width: none;
    }

    .kaf-s6final__headline h2 {
        font-size: clamp(34px, 8vw, 48px);
    }

    .kaf-s6final__phone {
        width: min(100%, 500px);
        margin: 26px auto -34px;
    }

    .kaf-s6final__gradient {
        width: auto;
        height: auto;
        margin: 0 -24px;
        border-radius: 28px 28px 0 0;
        padding: 46px 24px 34px;
    }

    .kaf-s6final__download {
        width: auto;
        margin-left: 0;
        padding-top: 0;
    }

    .kaf-s6final__download h3 {
        max-width: none;
        font-size: clamp(25px, 6.8vw, 36px);
    }
}

/* =========================================================
   SECTION 6 — FINAL TUNE
   - phone lebih kanan
   - phone lebih besar
   - teks bawah sejajar dengan teks atas
   ========================================================= */

.kaf-section6 {
    --kaf-s6-left: clamp(28px, 5vw, 72px);
}

/* Samakan anchor kiri headline atas dan blok bawah */
.kaf-s6final__headline {
    left: var(--kaf-s6-left);
}

.kaf-s6final__download {
    margin-left: calc(
        (100vw - min(1180px, calc(100vw - 48px))) / 2 + var(--kaf-s6-left)
    );
}

/* Phone: geser sedikit ke kanan + sedikit dibesarkan */
.kaf-s6final__phone {
    right: clamp(-58px, -1vw, -18px) !important;
    width: min(54vw, 740px);
}

/* Rapikan area text atas */
.kaf-s6final__headline {
    width: min(47vw, 620px);
}

.kaf-s6final__headline h2 {
    max-width: 620px;
}

.kaf-s6final__headline p {
    max-width: 560px;
}

/* Rapikan area text bawah agar terasa satu garis */
.kaf-s6final__download {
    width: min(46vw, 590px);
}

.kaf-s6final__download h3 {
    max-width: 540px;
}

/* Penyesuaian layar desktop pendek */
@media (max-height: 860px) and (min-width: 981px) {
    .kaf-s6final__phone {
        right: clamp(10px, 2.8vw, 28px);
        width: min(50vw, 640px);
    }

    .kaf-s6final__download {
        width: min(44vw, 540px);
    }
}

/* Mobile tetap aman */
@media (max-width: 980px) {
    .kaf-section6 {
        --kaf-s6-left: 0px;
    }

    .kaf-s6final__download {
        margin-left: 0;
        width: auto;
    }

    .kaf-s6final__phone {
        right: auto;
        width: min(100%, 520px);
    }
}

/* =========================================================
   SECTION 6 — BOTTOM COPY ALIGN FINAL
   Blok bawah diluruskan dengan headline atas
   ========================================================= */

.kaf-section6 {
    --kaf-s6-left-x: clamp(28px, 5vw, 72px);
    --kaf-s6-frame: min(1180px, calc(100vw - 48px));
    --kaf-s6-bottom-shift: -64px;
}

/* kunci posisi headline atas */
.kaf-s6final__headline {
    left: var(--kaf-s6-left-x) !important;
    width: min(48vw, 620px) !important;
}

.kaf-s6final__headline h2 {
    max-width: 620px !important;
}

.kaf-s6final__headline p {
    max-width: 560px !important;
}

/* ini yang penting: blok bawah ditarik kiri agar satu garis dengan headline atas */
.kaf-s6final__download {
    width: min(48vw, 610px) !important;
    margin-left: calc(
        (100vw - var(--kaf-s6-frame)) / 2 + var(--kaf-s6-left-x) +
            var(--kaf-s6-bottom-shift)
    ) !important;
    padding-top: clamp(58px, 8vh, 82px) !important;
}

/* badge bawah lebih kalem dan tidak terlalu dominan */
.kaf-s6final__download span {
    min-height: 28px !important;
    padding: 0 12px !important;
    margin-bottom: 14px !important;
    font-size: 10px !important;
    letter-spacing: 0.035em !important;
}

/* copy bawah dibuat melebar dan rapi, tidak terlihat patah-patah */
.kaf-s6final__download h3 {
    max-width: 590px !important;
    margin: 0 0 20px !important;
    font-size: clamp(26px, 2.45vw, 38px) !important;
    line-height: 1.13 !important;
    letter-spacing: -0.04em !important;
    font-weight: 820 !important;
}

/* store buttons ikut garis kiri */
.kaf-s6final__stores {
    justify-content: flex-start !important;
    gap: 10px !important;
}

.kaf-s6final__store {
    height: 42px !important;
    min-width: 132px !important;
}

/* desktop pendek */
@media (max-height: 860px) and (min-width: 981px) {
    .kaf-section6 {
        --kaf-s6-bottom-shift: -56px;
    }

    .kaf-s6final__download {
        width: min(46vw, 560px) !important;
        padding-top: 50px !important;
    }

    .kaf-s6final__download h3 {
        max-width: 540px !important;
        font-size: clamp(23px, 2.15vw, 32px) !important;
        line-height: 1.1 !important;
        margin-bottom: 17px !important;
    }
}

/* mobile tetap normal */
@media (max-width: 980px) {
    .kaf-section6 {
        --kaf-s6-bottom-shift: 0px;
    }

    .kaf-s6final__headline {
        left: auto !important;
        width: auto !important;
    }

    .kaf-s6final__download {
        margin-left: 0 !important;
        width: auto !important;
        padding-top: 0 !important;
    }

    .kaf-s6final__download h3 {
        max-width: none !important;
    }
}

/* =========================================================
   SECTION 6 — PHONE MORE RIGHT
   Geser foto HP lebih ke kanan tanpa ubah komponen lain
   ========================================================= */

.kaf-s6final__phone {
    right: clamp(-34px, 0.8vw, 10px) !important;
    width: min(52vw, 705px) !important;
}

/* layar desktop pendek */
@media (max-height: 860px) and (min-width: 981px) {
    .kaf-s6final__phone {
        right: clamp(-28px, 0.6vw, 8px) !important;
        width: min(50vw, 650px) !important;
    }
}

/* mobile tetap aman */
@media (max-width: 980px) {
    .kaf-s6final__phone {
        right: auto !important;
        width: min(100%, 520px) !important;
    }
}

/* =========================================================
   SECTION 6 — STORE BADGE NO BLACK BACKGROUND
   Kalau pakai image badge, jangan paksa bg hitam
   ========================================================= */

.kaf-s6final__store:has(img) {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    min-width: auto !important;
    height: auto !important;
    padding: 0 !important;
}

.kaf-s6final__store:has(img) img {
    display: block !important;
    height: 42px !important;
    width: auto !important;
    max-width: 150px !important;
    object-fit: contain !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* fallback kalau image belum ada tetap pakai tombol hitam */
.kaf-s6final__store:not(:has(img)) {
    background: #111 !important;
    border-radius: 9px !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15) !important;
}

@media (max-height: 860px) and (min-width: 981px) {
    .kaf-s6final__store:has(img) img {
        height: 38px !important;
        max-width: 142px !important;
    }
}

/* =========================================================
   SECTION 6 — STORE BADGE EQUAL SIZE
   App Store & Google Play dibuat satu ukuran visual
   ========================================================= */

.kaf-s6final__stores {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.kaf-s6final__store:has(img) {
    width: 142px !important;
    height: 42px !important;
    min-width: 142px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.kaf-s6final__store:has(img) img {
    width: 100% !important;
    height: 100% !important;
    max-width: 142px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    background: transparent !important;
}

/* fallback kalau image belum kebaca tetap tombol hitam */
.kaf-s6final__store:not(:has(img)) {
    width: 142px !important;
    height: 42px !important;
    min-width: 142px !important;
    min-height: 42px !important;
    background: #111 !important;
    border-radius: 9px !important;
}

/* layar pendek */
@media (max-height: 860px) and (min-width: 981px) {
    .kaf-s6final__store:has(img),
    .kaf-s6final__store:not(:has(img)) {
        width: 132px !important;
        height: 38px !important;
        min-width: 132px !important;
        min-height: 38px !important;
    }

    .kaf-s6final__store:has(img) img {
        max-width: 132px !important;
        max-height: 38px !important;
    }
}

/* =========================================================
   FINAL SECTION — FAQ + CTA CLEAN FIX
   Native/open section, footer bisa lanjut normal
   ========================================================= */

.kaf-final {
    position: relative;
    min-height: calc(100svh - var(--kaf-header-h, 88px));
    background:
        radial-gradient(
            circle at 14% 8%,
            rgba(245, 158, 11, 0.07),
            transparent 22rem
        ),
        radial-gradient(
            circle at 88% 12%,
            rgba(7, 102, 102, 0.08),
            transparent 24rem
        ),
        #f9fafb;
    padding: 46px 0 54px;
    overflow: visible;
}

.kaf-final__inner {
    display: grid;
    grid-template-rows: auto auto;
    gap: 28px;
}

.kaf-final__faq {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 34px;
    align-items: stretch;
}

.kaf-final__faq-copy {
    align-self: center;
}

.kaf-final__badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 13px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: #076666;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
}

.kaf-final__faq-copy h2 {
    max-width: 330px;
    margin: 0;
    color: #052011;
    font-size: clamp(34px, 3.35vw, 48px);
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 830;
}

.kaf-final__faq-copy p {
    max-width: 330px;
    margin: 15px 0 20px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
}

.kaf-final__search {
    position: relative;
    display: block;
    max-width: 330px;
}

.kaf-final__search span {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 16px;
    z-index: 2;
}

.kaf-final__search input {
    width: 100%;
    height: 46px;
    padding: 0 18px 0 42px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.92);
    color: #111827;
    font-size: 13.5px;
    outline: none;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.kaf-final__search input:focus {
    border-color: rgba(7, 102, 102, 0.35);
    box-shadow:
        0 0 0 4px rgba(7, 102, 102, 0.1),
        0 16px 36px rgba(15, 23, 42, 0.06);
}

.kaf-final__faq-card {
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.1);
    overflow: hidden;
}

.kaf-final__faq-head {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 26px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.78);
}

.kaf-final__faq-head strong {
    color: #052011;
    font-size: 15px;
    font-weight: 850;
}

.kaf-final__faq-head small {
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
}

.kaf-final__faq-list {
    padding: 0 26px 12px;
}

.kaf-final-faq {
    border-bottom: 1px dashed rgba(100, 116, 139, 0.3);
}

.kaf-final-faq:last-child {
    border-bottom: 0;
}

.kaf-final-faq__trigger {
    width: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

.kaf-final-faq__trigger span {
    color: #111827;
    font-size: 15px;
    line-height: 1.42;
    font-weight: 850;
}

.kaf-final-faq__trigger i {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.08);
    color: #076666;
    font-size: 18px;
    line-height: 1;
    font-style: normal;
    font-weight: 800;
}

.kaf-final-faq__body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.24s ease;
}

.kaf-final-faq.is-open .kaf-final-faq__body {
    max-height: 180px;
    opacity: 1;
}

.kaf-final-faq__body p {
    max-width: 880px;
    margin: 0;
    padding: 0 48px 18px 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.62;
    font-weight: 500;
}

.kaf-final__cta {
    position: relative;
    min-height: 270px;
    border-radius: 34px;
    overflow: hidden;
    background: #052011;
    box-shadow: 0 24px 70px rgba(5, 32, 17, 0.16);
}

.kaf-final__cta-bg,
.kaf-final__cta-layer {
    position: absolute;
    inset: 0;
}

.kaf-final__cta-bg {
    z-index: 0;
}

.kaf-final__cta-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(3px) saturate(1.05);
    transform: scale(1.025);
    opacity: 0.82;
}

.kaf-final__cta-layer {
    z-index: 1;
    background:
        radial-gradient(
            circle at 82% 28%,
            rgba(245, 158, 11, 0.28),
            transparent 24rem
        ),
        linear-gradient(
            115deg,
            rgba(5, 32, 17, 0.9) 0%,
            rgba(7, 102, 102, 0.72) 48%,
            rgba(245, 158, 11, 0.62) 100%
        );
}

.kaf-final__cta-card {
    position: relative;
    z-index: 3;
    min-height: 270px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 34px 40px;
    color: #fff;
}

.kaf-final__cta-copy {
    max-width: 690px;
}

.kaf-final__cta-copy span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    margin-bottom: 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-final__cta-copy h3 {
    max-width: 650px;
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 3.45vw, 50px);
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 840;
}

.kaf-final__cta-copy p {
    max-width: 590px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    line-height: 1.58;
    font-weight: 500;
}

.kaf-final__cta-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.kaf-final__btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-final__btn:hover {
    transform: translateY(-2px);
}

.kaf-final__btn--dark {
    min-width: 134px;
    background: #052011;
    color: #fff;
    box-shadow: 0 16px 32px rgba(5, 32, 17, 0.22);
}

.kaf-final__btn--accent {
    min-width: 190px;
    background: #f59e0b;
    color: #fff;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.28);
}

@media (max-height: 860px) and (min-width: 981px) {
    .kaf-final {
        padding-top: 34px;
        padding-bottom: 38px;
    }

    .kaf-final__inner {
        gap: 20px;
    }

    .kaf-final__faq {
        grid-template-columns: 310px minmax(0, 1fr);
        gap: 28px;
    }

    .kaf-final__faq-copy h2 {
        font-size: clamp(30px, 3vw, 42px);
    }

    .kaf-final__faq-copy p {
        margin: 12px 0 16px;
        font-size: 13px;
    }

    .kaf-final__faq-head {
        min-height: 58px;
    }

    .kaf-final-faq__trigger {
        min-height: 54px;
    }

    .kaf-final-faq__body p {
        font-size: 13px;
        padding-bottom: 14px;
    }

    .kaf-final__cta {
        min-height: 230px;
    }

    .kaf-final__cta-card {
        min-height: 230px;
        padding: 26px 34px;
    }

    .kaf-final__cta-copy h3 {
        font-size: clamp(27px, 3vw, 42px);
    }

    .kaf-final__cta-copy p {
        font-size: 13px;
    }
}

@media (max-width: 980px) {
    .kaf-final {
        padding: 46px 0;
    }

    .kaf-final__faq {
        display: block;
    }

    .kaf-final__faq-copy {
        margin-bottom: 24px;
    }

    .kaf-final__faq-copy h2,
    .kaf-final__faq-copy p,
    .kaf-final__search {
        max-width: none;
    }

    .kaf-final__cta {
        margin-top: 24px;
        min-height: auto;
    }

    .kaf-final__cta-card {
        min-height: auto;
        display: block;
        padding: 28px 22px;
    }

    .kaf-final__cta-actions {
        margin-top: 22px;
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .kaf-final__faq-copy h2 {
        font-size: 34px;
        line-height: 1.02;
    }

    .kaf-final__faq-card {
        border-radius: 24px;
    }

    .kaf-final__faq-head {
        display: block;
        padding: 18px 20px;
    }

    .kaf-final__faq-head small {
        display: block;
        margin-top: 6px;
    }

    .kaf-final__faq-list {
        padding: 0 20px 10px;
    }

    .kaf-final-faq__body p {
        padding-right: 0;
    }

    .kaf-final__cta {
        border-radius: 26px;
    }

    .kaf-final__cta-copy h3 {
        font-size: 32px;
        line-height: 1.02;
    }

    .kaf-final__cta-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .kaf-final__btn {
        width: 100%;
    }
}

/* =========================================================
   FINAL SECTION — OPEN FOOTER SCROLL FIX
   FAQ bukan snap lock, jadi bisa lanjut footer
   ========================================================= */

#faq-cta.kaf-final {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    overflow: visible !important;
}

#faq-cta.kaf-final + footer,
#faq-cta.kaf-final + .kaf-footer,
#faq-cta.kaf-final + .site-footer {
    scroll-snap-align: none !important;
}

/* =========================================================
   FINAL FAQ + FOOTER SCROLL FIX
   FAQ bukan snap lock, jawaban accordion rapi
   ========================================================= */

#faq-cta.kaf-final {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    overflow: visible !important;
}

/* Pastikan footer setelah FAQ bisa discroll normal */
#faq-cta.kaf-final + footer,
#faq-cta.kaf-final + .kaf-footer,
#faq-cta.kaf-final + .site-footer,
#faq-cta.kaf-final ~ footer,
#faq-cta.kaf-final ~ .kaf-footer,
#faq-cta.kaf-final ~ .site-footer {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}

/* FAQ accordion clean */
#faq-cta .kaf-final-faq__body {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition:
        max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.24s ease !important;
}

#faq-cta .kaf-final-faq.is-open .kaf-final-faq__body {
    max-height: 180px !important;
    opacity: 1 !important;
}

#faq-cta .kaf-final-faq__body p {
    margin: 0 !important;
    padding: 0 48px 18px 0 !important;
}

#faq-cta .kaf-final-faq:not(.is-open) .kaf-final-faq__body p {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Card FAQ biar tidak kosong terlalu tinggi */
#faq-cta .kaf-final__faq-card {
    min-height: auto !important;
}

#faq-cta .kaf-final__faq-list {
    padding-bottom: 12px !important;
}

/* =========================================================
   CORPORATE FOOTER — KAFNET NO CTA
   Footer profesional, tanpa CTA ulang
   ========================================================= */

.kaf-footer {
    position: relative;
    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(245, 158, 11, 0.12),
            transparent 22rem
        ),
        radial-gradient(
            circle at 88% 12%,
            rgba(7, 102, 102, 0.16),
            transparent 26rem
        ),
        linear-gradient(180deg, #071b14 0%, #04110d 100%);
    color: #ffffff;
    padding: 58px 0 26px;
    overflow: hidden;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}

.kaf-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 36%),
        radial-gradient(
            circle at 80% 100%,
            rgba(245, 158, 11, 0.08),
            transparent 20rem
        );
    pointer-events: none;
}

.kaf-footer > .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-footer__top {
    display: grid;
    grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
    padding-bottom: 38px;
}

.kaf-footer__logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 22px;
    text-decoration: none;
}

.kaf-footer__logo img {
    display: block;
    height: 42px;
    width: auto;
    object-fit: contain;
}

.kaf-footer__logo strong {
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.045em;
}

.kaf-footer__brand p {
    max-width: 390px;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.72;
    font-weight: 500;
}

.kaf-footer__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.kaf-footer__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    line-height: 1;
    font-weight: 750;
}

.kaf-footer__menus {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px;
}

.kaf-footer__menu h3 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 12.5px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: uppercase;
}

.kaf-footer__menu a {
    display: block;
    width: fit-content;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
    transition:
        color 0.22s ease,
        transform 0.22s ease;
}

.kaf-footer__menu a:hover {
    color: #f59e0b;
    transform: translateX(2px);
}

.kaf-footer__contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.095);
    border-bottom: 1px solid rgba(255, 255, 255, 0.095);
}

.kaf-footer__contact-row div {
    display: grid;
    gap: 5px;
}

.kaf-footer__contact-row strong {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 850;
}

.kaf-footer__contact-row span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
}

.kaf-footer__contact-row a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.11);
    color: #fde68a;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    transition:
        transform 0.22s ease,
        background 0.22s ease,
        color 0.22s ease;
}

.kaf-footer__contact-row a:hover {
    transform: translateY(-2px);
    background: rgba(245, 158, 11, 0.14);
    color: #ffffff;
}

.kaf-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 24px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    line-height: 1.5;
    font-weight: 600;
}

.kaf-footer__bottom-links {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.kaf-footer__bottom-links a {
    color: rgba(255, 255, 255, 0.52);
    text-decoration: none;
    transition: color 0.2s ease;
}

.kaf-footer__bottom-links a:hover {
    color: #f59e0b;
}

@media (max-width: 1180px) {
    .kaf-footer__top {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .kaf-footer__menus {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .kaf-footer {
        padding: 42px 0 22px;
    }

    .kaf-footer__menus {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .kaf-footer__contact-row {
        display: block;
    }

    .kaf-footer__contact-row a {
        margin-top: 16px;
    }

    .kaf-footer__bottom {
        display: block;
    }

    .kaf-footer__bottom-links {
        margin-top: 12px;
    }
}

/* =========================================================
   FOOTER SOCIAL ICONS
   ========================================================= */

.kaf-footer__socials {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.kaf-footer__socials a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition:
        transform 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease;
}

.kaf-footer__socials a:hover {
    transform: translateY(-2px);
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.32);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.kaf-footer__socials svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

@media (max-width: 720px) {
    .kaf-footer__socials {
        margin-top: 18px;
    }

    .kaf-footer__socials a {
        width: 36px;
        height: 36px;
    }

    .kaf-footer__socials svg {
        width: 17px;
        height: 17px;
    }
}

/* =========================================================
   FINAL CTA — FULLSCREEN BEFORE FOOTER
   CTA dibuat 1 layar penuh dan nyambung langsung ke footer
   ========================================================= */

/* Section FAQ + CTA tetap native scroll, bukan snap lock */
#faq-cta.kaf-final {
    min-height: auto !important;
    height: auto !important;
    padding: 56px 0 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background:
        radial-gradient(
            circle at 14% 8%,
            rgba(245, 158, 11, 0.07),
            transparent 22rem
        ),
        radial-gradient(
            circle at 88% 12%,
            rgba(7, 102, 102, 0.08),
            transparent 24rem
        ),
        #f9fafb !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}

/* Supaya FAQ dan CTA tidak dipaksa grid satu layar */
#faq-cta .kaf-final__inner {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* FAQ tetap rapi dan punya jarak sebelum CTA */
#faq-cta .kaf-final__faq {
    margin-bottom: 56px !important;
}

/* CTA dibuat full viewport dan full width */
#faq-cta .kaf-final__cta {
    width: 100vw !important;
    min-height: calc(100svh - var(--kaf-header-h, 88px)) !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 0 !important;
    border-radius: 40px 40px 0 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: #052011 !important;
}

/* Background image + gradient layer lebih premium */
#faq-cta .kaf-final__cta-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: blur(3px) saturate(1.06) brightness(0.86) !important;
    transform: scale(1.035) !important;
    opacity: 0.9 !important;
}

#faq-cta .kaf-final__cta-layer {
    background:
        radial-gradient(
            circle at 78% 28%,
            rgba(245, 158, 11, 0.34),
            transparent 26rem
        ),
        radial-gradient(
            circle at 18% 82%,
            rgba(7, 102, 102, 0.28),
            transparent 28rem
        ),
        linear-gradient(
            115deg,
            rgba(5, 32, 17, 0.92) 0%,
            rgba(7, 102, 102, 0.76) 46%,
            rgba(245, 158, 11, 0.66) 100%
        ) !important;
}

/* Isi CTA dibuat berada di container dan center vertikal */
#faq-cta .kaf-final__cta-card {
    width: min(1180px, calc(100vw - 48px)) !important;
    min-height: calc(100svh - var(--kaf-header-h, 88px)) !important;
    margin: 0 auto !important;
    padding: 70px 0 76px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 48px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    color: #fff !important;
}

/* Copy CTA lebih clean */
#faq-cta .kaf-final__cta-copy {
    max-width: 720px !important;
}

#faq-cta .kaf-final__cta-copy span {
    min-height: 30px !important;
    padding: 0 13px !important;
    margin-bottom: 18px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

#faq-cta .kaf-final__cta-copy h3 {
    max-width: 720px !important;
    font-size: clamp(42px, 5.2vw, 78px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.065em !important;
    color: #fff !important;
    text-shadow: 0 18px 42px rgba(0, 0, 0, 0.22) !important;
}

#faq-cta .kaf-final__cta-copy p {
    max-width: 620px !important;
    margin-top: 20px !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 15.5px !important;
    line-height: 1.68 !important;
}

/* Tombol CTA lebih kelihatan */
#faq-cta .kaf-final__cta-actions {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-width: 230px !important;
}

#faq-cta .kaf-final__btn {
    min-height: 54px !important;
    width: 100% !important;
    padding: 0 24px !important;
    justify-content: center !important;
}

#faq-cta .kaf-final__btn--dark {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

#faq-cta .kaf-final__btn--accent {
    background: #f59e0b !important;
    color: #fff !important;
    box-shadow: 0 18px 38px rgba(245, 158, 11, 0.3) !important;
}

/* Footer langsung nempel ke CTA tanpa gap putih */
#faq-cta + .kaf-footer,
#faq-cta ~ .kaf-footer,
#faq-cta + footer,
#faq-cta ~ footer {
    margin-top: 0 !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}

/* Desktop pendek */
@media (max-height: 860px) and (min-width: 981px) {
    #faq-cta.kaf-final {
        padding-top: 42px !important;
    }

    #faq-cta .kaf-final__faq {
        margin-bottom: 42px !important;
    }

    #faq-cta .kaf-final__cta-card {
        padding: 54px 0 58px !important;
    }

    #faq-cta .kaf-final__cta-copy h3 {
        font-size: clamp(36px, 4.4vw, 62px) !important;
    }

    #faq-cta .kaf-final__cta-copy p {
        font-size: 14px !important;
    }
}

/* Tablet/mobile */
@media (max-width: 980px) {
    #faq-cta.kaf-final {
        padding-top: 46px !important;
    }

    #faq-cta .kaf-final__faq {
        margin-bottom: 32px !important;
    }

    #faq-cta .kaf-final__cta {
        min-height: auto !important;
        border-radius: 30px 30px 0 0 !important;
    }

    #faq-cta .kaf-final__cta-card {
        width: min(100%, calc(100vw - 32px)) !important;
        min-height: auto !important;
        display: block !important;
        padding: 56px 0 62px !important;
    }

    #faq-cta .kaf-final__cta-copy h3 {
        font-size: clamp(36px, 9vw, 54px) !important;
        line-height: 0.98 !important;
    }

    #faq-cta .kaf-final__cta-actions {
        min-width: 0 !important;
        margin-top: 28px !important;
    }
}

/* =========================================================
   FINAL CTA — FULL WIDTH COMPACT
   Lebar full screen, tinggi secukupnya konten
   ========================================================= */

#faq-cta .kaf-final__cta {
    width: 100vw !important;
    min-height: 360px !important;
    height: auto !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 0 !important;
    border-radius: 34px 34px 0 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: #052011 !important;
}

#faq-cta .kaf-final__cta-card {
    width: min(1180px, calc(100vw - 48px)) !important;
    min-height: 360px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 54px 0 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 42px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#faq-cta .kaf-final__cta-copy {
    max-width: 650px !important;
}

#faq-cta .kaf-final__cta-copy span {
    margin-bottom: 14px !important;
}

#faq-cta .kaf-final__cta-copy h3 {
    max-width: 650px !important;
    font-size: clamp(34px, 4vw, 56px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;
}

#faq-cta .kaf-final__cta-copy p {
    max-width: 560px !important;
    margin-top: 14px !important;
    font-size: 14.5px !important;
    line-height: 1.62 !important;
}

#faq-cta .kaf-final__cta-actions {
    min-width: 220px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

#faq-cta .kaf-final__btn {
    min-height: 50px !important;
    padding: 0 22px !important;
}

/* Footer tetap nempel, tidak ada gap putih */
#faq-cta + .kaf-footer,
#faq-cta ~ .kaf-footer,
#faq-cta + footer,
#faq-cta ~ footer {
    margin-top: 0 !important;
}

/* Desktop pendek */
@media (max-height: 860px) and (min-width: 981px) {
    #faq-cta .kaf-final__cta {
        min-height: 320px !important;
    }

    #faq-cta .kaf-final__cta-card {
        min-height: 320px !important;
        padding: 42px 0 46px !important;
    }

    #faq-cta .kaf-final__cta-copy h3 {
        font-size: clamp(30px, 3.4vw, 46px) !important;
    }
}

/* Mobile */
@media (max-width: 980px) {
    #faq-cta .kaf-final__cta {
        min-height: auto !important;
        border-radius: 28px 28px 0 0 !important;
    }

    #faq-cta .kaf-final__cta-card {
        width: min(100%, calc(100vw - 32px)) !important;
        min-height: auto !important;
        display: block !important;
        padding: 44px 0 50px !important;
    }

    #faq-cta .kaf-final__cta-copy h3 {
        font-size: clamp(32px, 8vw, 46px) !important;
    }

    #faq-cta .kaf-final__cta-actions {
        min-width: 0 !important;
        margin-top: 24px !important;
    }
}

/* =========================================================
   SECTION 6 — PHONE ELEGANT MOTION
   Floating halus agar section KAFYA lebih interaktif
   ========================================================= */

#unduh-kafya .kaf-s6final__phone {
    transform-origin: center bottom !important;
    animation: kafPhoneFloat 6.8s ease-in-out infinite !important;
    will-change: transform, filter !important;
}

#unduh-kafya .kaf-s6final__phone img {
    transform-origin: center bottom !important;
    filter: drop-shadow(0 26px 42px rgba(5, 32, 17, 0.22)) !important;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* efek glow tipis di belakang phone */
#unduh-kafya .kaf-s6final__phone::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7%;
    width: 64%;
    height: 28%;
    transform: translateX(-50%);
    border-radius: 999px;
    background: radial-gradient(
        circle,
        rgba(245, 158, 11, 0.24),
        rgba(7, 102, 102, 0.1) 42%,
        transparent 72%
    );
    filter: blur(18px);
    opacity: 0.72;
    pointer-events: none;
    z-index: -1;
    animation: kafPhoneGlow 6.8s ease-in-out infinite !important;
}

#unduh-kafya .kaf-s6final__phone:hover {
    animation-play-state: paused !important;
    transform: translate3d(0, -10px, 0) rotate(-1.2deg) scale(1.015) !important;
}

#unduh-kafya .kaf-s6final__phone:hover img {
    filter: drop-shadow(0 34px 56px rgba(5, 32, 17, 0.28)) !important;
}

@keyframes kafPhoneFloat {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    28% {
        transform: translate3d(0, -10px, 0) rotate(-0.75deg);
    }
    56% {
        transform: translate3d(0, -4px, 0) rotate(0.55deg);
    }
    78% {
        transform: translate3d(0, -13px, 0) rotate(-0.35deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

@keyframes kafPhoneGlow {
    0%,
    100% {
        opacity: 0.52;
        transform: translateX(-50%) scale(0.96);
    }
    50% {
        opacity: 0.82;
        transform: translateX(-50%) scale(1.06);
    }
}

/* Aksesibilitas: kalau user/browser minta reduce motion, animasi dimatikan */
@media (prefers-reduced-motion: reduce) {
    #unduh-kafya .kaf-s6final__phone,
    #unduh-kafya .kaf-s6final__phone::before {
        animation: none !important;
    }
}

/* Mobile dibuat lebih kalem */
@media (max-width: 768px) {
    #unduh-kafya .kaf-s6final__phone {
        animation-duration: 7.8s !important;
    }

    #unduh-kafya .kaf-s6final__phone:hover {
        transform: none !important;
    }
}

/* =========================================================
   ABOUT PAGE — KAFNET
   ========================================================= */

.kaf-about {
    background: #f8fafb;
    color: #052011;
    overflow: hidden;
}

.kaf-about__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: #076666;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.kaf-about__btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.kaf-about__btn:hover {
    transform: translateY(-2px);
}

.kaf-about__btn--accent {
    background: #f59e0b;
    color: #fff;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24);
}

.kaf-about__btn--light {
    background: #fff;
    color: #052011;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

/* Hero */
.kaf-about-hero {
    position: relative;
    padding: 138px 0 72px;
    background:
        radial-gradient(
            circle at 14% 22%,
            rgba(245, 158, 11, 0.12),
            transparent 25rem
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(7, 102, 102, 0.13),
            transparent 28rem
        ),
        linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
}

.kaf-about-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
    gap: 56px;
    align-items: center;
}

.kaf-about-hero__copy h1 {
    max-width: 760px;
    margin: 18px 0 20px;
    color: #052011;
    font-size: clamp(46px, 6vw, 86px);
    line-height: 0.92;
    letter-spacing: -0.07em;
    font-weight: 860;
}

.kaf-about-hero__copy p {
    max-width: 620px;
    margin: 0;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.72;
    font-weight: 500;
}

.kaf-about-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.kaf-about-hero__visual {
    position: relative;
    min-height: 520px;
    border-radius: 42px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(7, 102, 102, 0.92), rgba(5, 32, 17, 0.92)),
        radial-gradient(
            circle at 72% 20%,
            rgba(245, 158, 11, 0.32),
            transparent 18rem
        );
    box-shadow: 0 30px 90px rgba(5, 32, 17, 0.16);
}

.kaf-about-hero__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 38%),
        radial-gradient(
            circle at 20% 80%,
            rgba(245, 158, 11, 0.2),
            transparent 20rem
        );
    z-index: 1;
}

.kaf-about-hero__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.76;
    filter: saturate(1.04) contrast(1.02);
}

.kaf-about-hero__glass {
    position: absolute;
    left: 28px;
    bottom: 28px;
    z-index: 3;
    width: min(330px, calc(100% - 56px));
    padding: 22px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.kaf-about-hero__glass span {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-about-hero__glass strong {
    display: block;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.kaf-about-hero__mini {
    position: absolute;
    z-index: 4;
    min-width: 174px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 20px 50px rgba(5, 32, 17, 0.15);
}

.kaf-about-hero__mini b {
    display: block;
    color: #052011;
    font-size: 15px;
    line-height: 1;
    margin-bottom: 6px;
}

.kaf-about-hero__mini small {
    display: block;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.kaf-about-hero__mini--one {
    top: 34px;
    right: 34px;
}

.kaf-about-hero__mini--two {
    top: 128px;
    left: 30px;
}

/* Stats */
.kaf-about-stats {
    padding: 0 0 72px;
}

.kaf-about-stats__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.kaf-about-stat {
    padding: 24px 26px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.kaf-about-stat strong {
    display: block;
    color: #076666;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.045em;
    margin-bottom: 8px;
}

.kaf-about-stat span {
    display: block;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
}

/* Story */
.kaf-about-story {
    padding: 20px 0 86px;
}

.kaf-about-story__grid {
    display: grid;
    grid-template-columns: minmax(380px, 0.88fr) minmax(0, 1.12fr);
    gap: 56px;
    align-items: center;
}

.kaf-about-story__media {
    min-height: 470px;
    border-radius: 38px;
    overflow: hidden;
    background: linear-gradient(135deg, #076666, #052011);
    box-shadow: 0 30px 80px rgba(5, 32, 17, 0.12);
}

.kaf-about-story__media img {
    width: 100%;
    height: 100%;
    min-height: 470px;
    object-fit: cover;
}

.kaf-about-story__fallback {
    min-height: 470px;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(
            circle at 70% 22%,
            rgba(245, 158, 11, 0.28),
            transparent 16rem
        ),
        linear-gradient(135deg, #076666, #052011);
}

.kaf-about-story__fallback span {
    font-size: 13px;
    font-weight: 850;
    opacity: 0.75;
}

.kaf-about-story__fallback strong {
    margin-top: 8px;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.055em;
}

.kaf-about-story__copy h2,
.kaf-about-section-head h2,
.kaf-about-ops__copy h2,
.kaf-about-cta__box h2 {
    margin: 16px 0 18px;
    color: #052011;
    font-size: clamp(34px, 4.2vw, 62px);
    line-height: 0.98;
    letter-spacing: -0.06em;
    font-weight: 850;
}

.kaf-about-story__copy p,
.kaf-about-section-head p,
.kaf-about-ops__copy p,
.kaf-about-cta__box p {
    color: #4b5563;
    font-size: 15px;
    line-height: 1.75;
    font-weight: 500;
}

.kaf-about-story__copy p {
    max-width: 680px;
    margin: 0 0 14px;
}

/* Vision */
.kaf-about-vision {
    padding: 86px 0;
    background: #ffffff;
}

.kaf-about-section-head {
    max-width: 880px;
    margin-bottom: 34px;
}

.kaf-about-section-head--split {
    max-width: none;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
}

.kaf-about-section-head--split > div {
    max-width: 620px;
}

.kaf-about-section-head--split p {
    max-width: 420px;
    margin: 0 0 20px;
}

.kaf-about-vision__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 18px;
}

.kaf-about-vision__grid article {
    padding: 34px;
    border-radius: 32px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(245, 158, 11, 0.1),
            transparent 16rem
        ),
        #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-about-vision__grid article span {
    display: inline-flex;
    margin-bottom: 16px;
    color: #076666;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-about-vision__grid h3 {
    margin: 0;
    color: #052011;
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.08;
    letter-spacing: -0.045em;
    font-weight: 840;
}

.kaf-about-vision__grid ul {
    margin: 0;
    padding-left: 18px;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.78;
    font-weight: 550;
}

/* Values */
.kaf-about-values {
    padding: 88px 0;
}

.kaf-about-values__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.kaf-about-value {
    min-height: 210px;
    padding: 26px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}

.kaf-about-value strong {
    display: block;
    margin-bottom: 14px;
    color: #052011;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.kaf-about-value p {
    margin: 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.65;
    font-weight: 500;
}

/* Operations */
.kaf-about-ops {
    padding: 0 0 88px;
}

.kaf-about-ops__panel {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 44px;
    padding: 46px;
    border-radius: 40px;
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(245, 158, 11, 0.2),
            transparent 24rem
        ),
        linear-gradient(135deg, #072a1c, #076666);
    color: #fff;
    overflow: hidden;
}

.kaf-about-ops__copy h2,
.kaf-about-ops__copy p {
    color: #fff;
}

.kaf-about-ops__copy p {
    color: rgba(255, 255, 255, 0.78);
    max-width: 520px;
}

.kaf-about-ops__steps {
    display: grid;
    gap: 12px;
}

.kaf-about-ops__steps article {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.kaf-about-ops__steps article > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fde68a;
    font-size: 12px;
    font-weight: 900;
}

.kaf-about-ops__steps h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 16px;
    font-weight: 850;
}

.kaf-about-ops__steps p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 13px;
    line-height: 1.55;
}

/* CTA */
.kaf-about-cta {
    padding: 0 0 90px;
}

.kaf-about-cta__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 34px 38px;
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.kaf-about-cta__box h2 {
    max-width: 720px;
    font-size: clamp(30px, 3.2vw, 48px);
}

.kaf-about-cta__box p {
    max-width: 560px;
    margin: 0;
}

/* Responsive */
@media (max-width: 1080px) {
    .kaf-about-hero__grid,
    .kaf-about-story__grid,
    .kaf-about-vision__grid,
    .kaf-about-ops__panel {
        grid-template-columns: 1fr;
    }

    .kaf-about-hero__visual {
        min-height: 440px;
    }

    .kaf-about-values__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kaf-about-section-head--split {
        display: block;
    }

    .kaf-about-section-head--split p {
        max-width: 680px;
        margin-top: 0;
    }

    .kaf-about-cta__box {
        display: block;
    }

    .kaf-about-cta__box .kaf-about__btn {
        margin-top: 24px;
    }
}

@media (max-width: 720px) {
    .kaf-about-hero {
        padding: 112px 0 52px;
    }

    .kaf-about-hero__grid {
        gap: 34px;
    }

    .kaf-about-hero__copy h1 {
        font-size: 42px;
        line-height: 0.98;
    }

    .kaf-about-hero__visual {
        min-height: 360px;
        border-radius: 30px;
    }

    .kaf-about-hero__mini {
        display: none;
    }

    .kaf-about-hero__glass {
        left: 18px;
        bottom: 18px;
        width: calc(100% - 36px);
    }

    .kaf-about-stats__grid,
    .kaf-about-values__grid {
        grid-template-columns: 1fr;
    }

    .kaf-about-story__media,
    .kaf-about-story__media img,
    .kaf-about-story__fallback {
        min-height: 340px;
    }

    .kaf-about-vision,
    .kaf-about-values {
        padding: 62px 0;
    }

    .kaf-about-ops__panel {
        padding: 28px 20px;
        border-radius: 28px;
    }

    .kaf-about-cta__box {
        padding: 26px 20px;
        border-radius: 26px;
    }
}

/* =========================================================
   ABOUT PAGE V2 — KAFNET MODERN CORPORATE
   ========================================================= */

.kaf-aboutv2 {
    --about-green: #052011;
    --about-teal: #076666;
    --about-orange: #f59e0b;
    --about-muted: #4b5563;
    background: #f8fafb;
    color: var(--about-green);
    overflow: hidden;
}

.kaf-aboutv2-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--about-teal);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-aboutv2-eyebrow--dark {
    background: rgba(255, 255, 255, 0.12);
    color: #fde68a;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.kaf-aboutv2-btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    font-weight: 820;
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.24s ease;
}

.kaf-aboutv2-btn:hover {
    transform: translateY(-2px);
}

.kaf-aboutv2-btn--accent {
    background: var(--about-orange);
    color: #fff;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24);
}

.kaf-aboutv2-btn--glass {
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Reveal animation */
[data-kaf-about-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-kaf-about-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero */
.kaf-aboutv2-hero {
    position: relative;
    min-height: 440px;
    padding: 156px 0 92px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.86) 0%,
            rgba(7, 102, 102, 0.66) 48%,
            rgba(245, 158, 11, 0.24) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--aboutHeroBg) center center / cover no-repeat;
    border-radius: 0 0 42px 42px;
    isolation: isolate;
}

.kaf-aboutv2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.18));
    pointer-events: none;
}

.kaf-aboutv2-hero .kaf-container {
    position: relative;
    z-index: 1;
}

.kaf-aboutv2-hero__content {
    max-width: 840px;
}

.kaf-aboutv2-crumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 34px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.96);
    color: #fff;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.24);
}

.kaf-aboutv2-crumb a,
.kaf-aboutv2-crumb span {
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 650;
}

.kaf-aboutv2-hero h1 {
    max-width: 820px;
    margin: 18px 0 18px;
    color: #fff;
    font-size: clamp(42px, 5.7vw, 78px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-weight: 760;
    text-wrap: balance;
}

.kaf-aboutv2-hero p {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(16px, 1.5vw, 21px);
    line-height: 1.68;
    font-weight: 470;
}

.kaf-aboutv2-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* Stats */
.kaf-aboutv2-stats {
    padding: 34px 0 72px;
}

.kaf-aboutv2-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.kaf-aboutv2-stat {
    padding: 24px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}

.kaf-aboutv2-stat strong {
    display: block;
    margin-bottom: 9px;
    color: var(--about-teal);
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.035em;
    font-weight: 780;
}

.kaf-aboutv2-stat span {
    display: block;
    color: var(--about-muted);
    font-size: 13px;
    line-height: 1.48;
    font-weight: 570;
}

/* Story */
.kaf-aboutv2-story {
    padding: 16px 0 92px;
}

.kaf-aboutv2-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
    gap: 58px;
    align-items: center;
}

.kaf-aboutv2-story__copy h2,
.kaf-aboutv2-section-head h2,
.kaf-aboutv2-network__copy h2,
.kaf-aboutv2-cta__box h2 {
    margin: 16px 0 18px;
    color: var(--about-green);
    font-size: clamp(34px, 4vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.052em;
    font-weight: 760;
    text-wrap: balance;
}

.kaf-aboutv2-story__copy p,
.kaf-aboutv2-section-head p,
.kaf-aboutv2-network__copy p,
.kaf-aboutv2-cta__box p {
    color: var(--about-muted);
    font-size: 15px;
    line-height: 1.78;
    font-weight: 470;
}

.kaf-aboutv2-story__copy p {
    max-width: 680px;
    margin: 0 0 14px;
}

.kaf-aboutv2-story__visual {
    position: relative;
    min-height: 500px;
    border-radius: 40px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(245, 158, 11, 0.24),
            transparent 18rem
        ),
        linear-gradient(135deg, var(--about-teal), var(--about-green));
    box-shadow: 0 30px 80px rgba(5, 32, 17, 0.13);
}

.kaf-aboutv2-story__visual img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    opacity: 0.86;
}

.kaf-aboutv2-story__fallback {
    min-height: 500px;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
}

.kaf-aboutv2-story__fallback span {
    font-size: 13px;
    font-weight: 800;
    opacity: 0.76;
}

.kaf-aboutv2-story__fallback strong {
    margin-top: 8px;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.055em;
}

.kaf-aboutv2-floating-card {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: min(330px, calc(100% - 48px));
    padding: 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 18px 44px rgba(5, 32, 17, 0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.kaf-aboutv2-floating-card b {
    display: block;
    margin-bottom: 7px;
    color: var(--about-green);
    font-size: 15px;
}

.kaf-aboutv2-floating-card span {
    display: block;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
}

/* Vision */
.kaf-aboutv2-vision {
    padding: 92px 0;
    background: #fff;
}

.kaf-aboutv2-section-head {
    max-width: 900px;
    margin-bottom: 36px;
}

.kaf-aboutv2-section-head--split {
    max-width: none;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 42px;
}

.kaf-aboutv2-section-head--split > div {
    max-width: 640px;
}

.kaf-aboutv2-section-head--split p {
    max-width: 420px;
    margin: 0 0 20px;
}

.kaf-aboutv2-vision__grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 18px;
}

.kaf-aboutv2-vision__grid article {
    padding: 34px;
    border-radius: 32px;
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(245, 158, 11, 0.1),
            transparent 16rem
        ),
        #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-aboutv2-vision__grid article span {
    display: inline-flex;
    margin-bottom: 16px;
    color: var(--about-teal);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-aboutv2-vision__grid h3 {
    margin: 0;
    color: var(--about-green);
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.042em;
    font-weight: 760;
}

.kaf-aboutv2-vision__grid ul {
    margin: 0;
    padding-left: 18px;
    color: var(--about-muted);
    font-size: 15px;
    line-height: 1.82;
    font-weight: 500;
}

/* Values */
.kaf-aboutv2-values {
    padding: 92px 0;
}

.kaf-aboutv2-values__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.kaf-aboutv2-value {
    min-height: 230px;
    padding: 26px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-aboutv2-value:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.09);
}

.kaf-aboutv2-value > span {
    display: block;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    border-radius: 16px;
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(245, 158, 11, 0.5),
            transparent 60%
        ),
        linear-gradient(135deg, var(--about-teal), var(--about-green));
}

.kaf-aboutv2-value strong {
    display: block;
    margin-bottom: 12px;
    color: var(--about-green);
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 770;
}

.kaf-aboutv2-value p {
    margin: 0;
    color: var(--about-muted);
    font-size: 14px;
    line-height: 1.66;
    font-weight: 470;
}

/* Network */
.kaf-aboutv2-network {
    padding: 0 0 92px;
}

.kaf-aboutv2-network__panel {
    display: grid;
    grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.12fr);
    gap: 44px;
    align-items: center;
    padding: 42px;
    border-radius: 42px;
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(245, 158, 11, 0.24),
            transparent 24rem
        ),
        linear-gradient(135deg, #072a1c, var(--about-teal));
    overflow: hidden;
    color: #fff;
}

.kaf-aboutv2-network__media {
    min-height: 390px;
    border-radius: 30px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.kaf-aboutv2-network__media img {
    width: 100%;
    height: 100%;
    min-height: 390px;
    object-fit: cover;
}

.kaf-aboutv2-network__fallback {
    min-height: 390px;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.kaf-aboutv2-network__fallback span {
    font-size: 13px;
    font-weight: 800;
    opacity: 0.72;
}

.kaf-aboutv2-network__fallback strong {
    margin-top: 8px;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.kaf-aboutv2-network__copy h2 {
    color: #fff;
}

.kaf-aboutv2-network__copy p {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.78);
}

/* Steps */
.kaf-aboutv2-steps {
    padding: 0 0 92px;
}

.kaf-aboutv2-steps__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.kaf-aboutv2-step {
    position: relative;
    min-height: 260px;
    padding: 26px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
    overflow: hidden;
}

.kaf-aboutv2-step::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -36px;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.1);
}

.kaf-aboutv2-step > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 30px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--about-teal);
    font-size: 12px;
    font-weight: 850;
}

.kaf-aboutv2-step h3 {
    margin: 0 0 12px;
    color: var(--about-green);
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 770;
}

.kaf-aboutv2-step p {
    margin: 0;
    color: var(--about-muted);
    font-size: 14px;
    line-height: 1.66;
}

/* CTA */
.kaf-aboutv2-cta {
    padding: 0 0 96px;
}

.kaf-aboutv2-cta__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 34px 38px;
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.kaf-aboutv2-cta__box h2 {
    max-width: 720px;
    font-size: clamp(30px, 3vw, 48px);
}

.kaf-aboutv2-cta__box p {
    max-width: 560px;
    margin: 0;
}

/* Responsive */
@media (max-width: 1120px) {
    .kaf-aboutv2-stats__grid,
    .kaf-aboutv2-values__grid,
    .kaf-aboutv2-steps__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kaf-aboutv2-story__grid,
    .kaf-aboutv2-vision__grid,
    .kaf-aboutv2-network__panel {
        grid-template-columns: 1fr;
    }

    .kaf-aboutv2-section-head--split {
        display: block;
    }

    .kaf-aboutv2-section-head--split p {
        max-width: 680px;
        margin-top: 0;
    }
}

@media (max-width: 720px) {
    .kaf-aboutv2-hero {
        min-height: 360px;
        padding: 126px 0 64px;
        border-radius: 0 0 30px 30px;
    }

    .kaf-aboutv2-hero h1 {
        font-size: 38px;
        line-height: 1.06;
    }

    .kaf-aboutv2-hero p {
        font-size: 15px;
        line-height: 1.68;
    }

    .kaf-aboutv2-crumb {
        margin-bottom: 24px;
        padding: 9px 14px;
    }

    .kaf-aboutv2-stats {
        padding: 28px 0 56px;
    }

    .kaf-aboutv2-stats__grid,
    .kaf-aboutv2-values__grid,
    .kaf-aboutv2-steps__grid {
        grid-template-columns: 1fr;
    }

    .kaf-aboutv2-story,
    .kaf-aboutv2-vision,
    .kaf-aboutv2-values,
    .kaf-aboutv2-steps {
        padding-bottom: 64px;
    }

    .kaf-aboutv2-story__visual,
    .kaf-aboutv2-story__visual img,
    .kaf-aboutv2-story__fallback {
        min-height: 360px;
    }

    .kaf-aboutv2-story__copy h2,
    .kaf-aboutv2-section-head h2,
    .kaf-aboutv2-network__copy h2,
    .kaf-aboutv2-cta__box h2 {
        font-size: 32px;
        line-height: 1.06;
    }

    .kaf-aboutv2-network__panel {
        padding: 24px;
        border-radius: 30px;
    }

    .kaf-aboutv2-network__media,
    .kaf-aboutv2-network__media img,
    .kaf-aboutv2-network__fallback {
        min-height: 300px;
    }

    .kaf-aboutv2-cta {
        padding-bottom: 64px;
    }

    .kaf-aboutv2-cta__box {
        display: block;
        padding: 26px 20px;
        border-radius: 26px;
    }

    .kaf-aboutv2-cta__box .kaf-aboutv2-btn {
        width: 100%;
        margin-top: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-kaf-about-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   ABOUT PAGE V2 — KAFNET MODERN CORPORATE
   ========================================================= */

.kaf-aboutv2 {
    --about-green: #052011;
    --about-teal: #076666;
    --about-orange: #f59e0b;
    --about-muted: #4b5563;
    background: #f8fafb;
    color: var(--about-green);
    overflow: hidden;
}

.kaf-aboutv2-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--about-teal);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-aboutv2-eyebrow--dark {
    background: rgba(255, 255, 255, 0.12);
    color: #fde68a;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.kaf-aboutv2-btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    font-weight: 820;
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.24s ease;
}

.kaf-aboutv2-btn:hover {
    transform: translateY(-2px);
}

.kaf-aboutv2-btn--accent {
    background: var(--about-orange);
    color: #fff;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24);
}

.kaf-aboutv2-btn--glass {
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Reveal animation */
[data-kaf-about-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-kaf-about-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero */
.kaf-aboutv2-hero {
    position: relative;
    min-height: 440px;
    padding: 156px 0 92px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.86) 0%,
            rgba(7, 102, 102, 0.66) 48%,
            rgba(245, 158, 11, 0.24) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--aboutHeroBg) center center / cover no-repeat;
    border-radius: 0 0 42px 42px;
    isolation: isolate;
}

.kaf-aboutv2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.18));
    pointer-events: none;
}

.kaf-aboutv2-hero .kaf-container {
    position: relative;
    z-index: 1;
}

.kaf-aboutv2-hero__content {
    max-width: 840px;
}

.kaf-aboutv2-crumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 34px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.96);
    color: #fff;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.24);
}

.kaf-aboutv2-crumb a,
.kaf-aboutv2-crumb span {
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 650;
}

.kaf-aboutv2-hero h1 {
    max-width: 820px;
    margin: 18px 0 18px;
    color: #fff;
    font-size: clamp(42px, 5.7vw, 78px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-weight: 760;
    text-wrap: balance;
}

.kaf-aboutv2-hero p {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(16px, 1.5vw, 21px);
    line-height: 1.68;
    font-weight: 470;
}

.kaf-aboutv2-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* Stats */
.kaf-aboutv2-stats {
    padding: 34px 0 72px;
}

.kaf-aboutv2-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.kaf-aboutv2-stat {
    padding: 24px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}

.kaf-aboutv2-stat strong {
    display: block;
    margin-bottom: 9px;
    color: var(--about-teal);
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.035em;
    font-weight: 780;
}

.kaf-aboutv2-stat span {
    display: block;
    color: var(--about-muted);
    font-size: 13px;
    line-height: 1.48;
    font-weight: 570;
}

/* Story */
.kaf-aboutv2-story {
    padding: 16px 0 92px;
}

.kaf-aboutv2-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
    gap: 58px;
    align-items: center;
}

.kaf-aboutv2-story__copy h2,
.kaf-aboutv2-section-head h2,
.kaf-aboutv2-network__copy h2,
.kaf-aboutv2-cta__box h2 {
    margin: 16px 0 18px;
    color: var(--about-green);
    font-size: clamp(34px, 4vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.052em;
    font-weight: 760;
    text-wrap: balance;
}

.kaf-aboutv2-story__copy p,
.kaf-aboutv2-section-head p,
.kaf-aboutv2-network__copy p,
.kaf-aboutv2-cta__box p {
    color: var(--about-muted);
    font-size: 15px;
    line-height: 1.78;
    font-weight: 470;
}

.kaf-aboutv2-story__copy p {
    max-width: 680px;
    margin: 0 0 14px;
}

.kaf-aboutv2-story__visual {
    position: relative;
    min-height: 500px;
    border-radius: 40px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(245, 158, 11, 0.24),
            transparent 18rem
        ),
        linear-gradient(135deg, var(--about-teal), var(--about-green));
    box-shadow: 0 30px 80px rgba(5, 32, 17, 0.13);
}

.kaf-aboutv2-story__visual img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    opacity: 0.86;
}

.kaf-aboutv2-story__fallback {
    min-height: 500px;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
}

.kaf-aboutv2-story__fallback span {
    font-size: 13px;
    font-weight: 800;
    opacity: 0.76;
}

.kaf-aboutv2-story__fallback strong {
    margin-top: 8px;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.055em;
}

.kaf-aboutv2-floating-card {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: min(330px, calc(100% - 48px));
    padding: 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 18px 44px rgba(5, 32, 17, 0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.kaf-aboutv2-floating-card b {
    display: block;
    margin-bottom: 7px;
    color: var(--about-green);
    font-size: 15px;
}

.kaf-aboutv2-floating-card span {
    display: block;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
}

/* Vision */
.kaf-aboutv2-vision {
    padding: 92px 0;
    background: #fff;
}

.kaf-aboutv2-section-head {
    max-width: 900px;
    margin-bottom: 36px;
}

.kaf-aboutv2-section-head--split {
    max-width: none;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 42px;
}

.kaf-aboutv2-section-head--split > div {
    max-width: 640px;
}

.kaf-aboutv2-section-head--split p {
    max-width: 420px;
    margin: 0 0 20px;
}

.kaf-aboutv2-vision__grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 18px;
}

.kaf-aboutv2-vision__grid article {
    padding: 34px;
    border-radius: 32px;
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(245, 158, 11, 0.1),
            transparent 16rem
        ),
        #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-aboutv2-vision__grid article span {
    display: inline-flex;
    margin-bottom: 16px;
    color: var(--about-teal);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-aboutv2-vision__grid h3 {
    margin: 0;
    color: var(--about-green);
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.042em;
    font-weight: 760;
}

.kaf-aboutv2-vision__grid ul {
    margin: 0;
    padding-left: 18px;
    color: var(--about-muted);
    font-size: 15px;
    line-height: 1.82;
    font-weight: 500;
}

/* Values */
.kaf-aboutv2-values {
    padding: 92px 0;
}

.kaf-aboutv2-values__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.kaf-aboutv2-value {
    min-height: 230px;
    padding: 26px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-aboutv2-value:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.09);
}

.kaf-aboutv2-value > span {
    display: block;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    border-radius: 16px;
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(245, 158, 11, 0.5),
            transparent 60%
        ),
        linear-gradient(135deg, var(--about-teal), var(--about-green));
}

.kaf-aboutv2-value strong {
    display: block;
    margin-bottom: 12px;
    color: var(--about-green);
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 770;
}

.kaf-aboutv2-value p {
    margin: 0;
    color: var(--about-muted);
    font-size: 14px;
    line-height: 1.66;
    font-weight: 470;
}

/* Network */
.kaf-aboutv2-network {
    padding: 0 0 92px;
}

.kaf-aboutv2-network__panel {
    display: grid;
    grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.12fr);
    gap: 44px;
    align-items: center;
    padding: 42px;
    border-radius: 42px;
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(245, 158, 11, 0.24),
            transparent 24rem
        ),
        linear-gradient(135deg, #072a1c, var(--about-teal));
    overflow: hidden;
    color: #fff;
}

.kaf-aboutv2-network__media {
    min-height: 390px;
    border-radius: 30px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.kaf-aboutv2-network__media img {
    width: 100%;
    height: 100%;
    min-height: 390px;
    object-fit: cover;
}

.kaf-aboutv2-network__fallback {
    min-height: 390px;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.kaf-aboutv2-network__fallback span {
    font-size: 13px;
    font-weight: 800;
    opacity: 0.72;
}

.kaf-aboutv2-network__fallback strong {
    margin-top: 8px;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.kaf-aboutv2-network__copy h2 {
    color: #fff;
}

.kaf-aboutv2-network__copy p {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.78);
}

/* Steps */
.kaf-aboutv2-steps {
    padding: 0 0 92px;
}

.kaf-aboutv2-steps__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.kaf-aboutv2-step {
    position: relative;
    min-height: 260px;
    padding: 26px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
    overflow: hidden;
}

.kaf-aboutv2-step::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -36px;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.1);
}

.kaf-aboutv2-step > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 30px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--about-teal);
    font-size: 12px;
    font-weight: 850;
}

.kaf-aboutv2-step h3 {
    margin: 0 0 12px;
    color: var(--about-green);
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 770;
}

.kaf-aboutv2-step p {
    margin: 0;
    color: var(--about-muted);
    font-size: 14px;
    line-height: 1.66;
}

/* CTA */
.kaf-aboutv2-cta {
    padding: 0 0 96px;
}

.kaf-aboutv2-cta__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 34px 38px;
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.kaf-aboutv2-cta__box h2 {
    max-width: 720px;
    font-size: clamp(30px, 3vw, 48px);
}

.kaf-aboutv2-cta__box p {
    max-width: 560px;
    margin: 0;
}

/* Responsive */
@media (max-width: 1120px) {
    .kaf-aboutv2-stats__grid,
    .kaf-aboutv2-values__grid,
    .kaf-aboutv2-steps__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kaf-aboutv2-story__grid,
    .kaf-aboutv2-vision__grid,
    .kaf-aboutv2-network__panel {
        grid-template-columns: 1fr;
    }

    .kaf-aboutv2-section-head--split {
        display: block;
    }

    .kaf-aboutv2-section-head--split p {
        max-width: 680px;
        margin-top: 0;
    }
}

@media (max-width: 720px) {
    .kaf-aboutv2-hero {
        min-height: 360px;
        padding: 126px 0 64px;
        border-radius: 0 0 30px 30px;
    }

    .kaf-aboutv2-hero h1 {
        font-size: 38px;
        line-height: 1.06;
    }

    .kaf-aboutv2-hero p {
        font-size: 15px;
        line-height: 1.68;
    }

    .kaf-aboutv2-crumb {
        margin-bottom: 24px;
        padding: 9px 14px;
    }

    .kaf-aboutv2-stats {
        padding: 28px 0 56px;
    }

    .kaf-aboutv2-stats__grid,
    .kaf-aboutv2-values__grid,
    .kaf-aboutv2-steps__grid {
        grid-template-columns: 1fr;
    }

    .kaf-aboutv2-story,
    .kaf-aboutv2-vision,
    .kaf-aboutv2-values,
    .kaf-aboutv2-steps {
        padding-bottom: 64px;
    }

    .kaf-aboutv2-story__visual,
    .kaf-aboutv2-story__visual img,
    .kaf-aboutv2-story__fallback {
        min-height: 360px;
    }

    .kaf-aboutv2-story__copy h2,
    .kaf-aboutv2-section-head h2,
    .kaf-aboutv2-network__copy h2,
    .kaf-aboutv2-cta__box h2 {
        font-size: 32px;
        line-height: 1.06;
    }

    .kaf-aboutv2-network__panel {
        padding: 24px;
        border-radius: 30px;
    }

    .kaf-aboutv2-network__media,
    .kaf-aboutv2-network__media img,
    .kaf-aboutv2-network__fallback {
        min-height: 300px;
    }

    .kaf-aboutv2-cta {
        padding-bottom: 64px;
    }

    .kaf-aboutv2-cta__box {
        display: block;
        padding: 26px 20px;
        border-radius: 26px;
    }

    .kaf-aboutv2-cta__box .kaf-aboutv2-btn {
        width: 100%;
        margin-top: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-kaf-about-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   ABOUT PAGE FRESH — IMAGE BASED REDESIGN
   ========================================================= */

.kaf-aboutfresh {
    --af-green: #052011;
    --af-teal: #076666;
    --af-orange: #f59e0b;
    --af-muted: #4b5563;
    background: #f8fafb;
    color: var(--af-green);
    overflow: hidden;
}

.kaf-aboutfresh-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--af-teal);
    font-size: 11px;
    line-height: 1;
    font-weight: 780;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-aboutfresh-eyebrow--light {
    background: rgba(255, 255, 255, 0.13);
    color: #fde68a;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.kaf-aboutfresh-btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    font-weight: 820;
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-aboutfresh-btn:hover {
    transform: translateY(-2px);
}

.kaf-aboutfresh-btn--accent {
    background: var(--af-orange);
    color: #fff;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24);
}

.kaf-aboutfresh-btn--glass {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Hero */
.kaf-aboutfresh-hero {
    position: relative;
    min-height: 450px;
    padding: 164px 0 92px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.86) 0%,
            rgba(7, 102, 102, 0.64) 48%,
            rgba(245, 158, 11, 0.24) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--aboutHeroBg) center center / cover no-repeat;
    border-radius: 0 0 42px 42px;
}

.kaf-aboutfresh-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.16));
}

.kaf-aboutfresh-hero .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-aboutfresh-hero__content {
    max-width: 850px;
}

.kaf-aboutfresh-crumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 34px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.96);
    color: #fff;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.24);
}

.kaf-aboutfresh-crumb a,
.kaf-aboutfresh-crumb span {
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 650;
}

.kaf-aboutfresh-hero h1 {
    max-width: 820px;
    margin: 18px 0 18px;
    color: #fff;
    font-size: clamp(42px, 5.5vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-weight: 760;
    text-wrap: balance;
}

.kaf-aboutfresh-hero p {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.68;
    font-weight: 470;
}

.kaf-aboutfresh-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* Stats */
.kaf-aboutfresh-stats {
    padding: 34px 0 72px;
}

.kaf-aboutfresh-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.kaf-aboutfresh-stat {
    padding: 24px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}

.kaf-aboutfresh-stat strong {
    display: block;
    margin-bottom: 9px;
    color: var(--af-teal);
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.035em;
    font-weight: 760;
}

.kaf-aboutfresh-stat span {
    display: block;
    color: var(--af-muted);
    font-size: 13px;
    line-height: 1.48;
    font-weight: 570;
}

/* Story */
.kaf-aboutfresh-story {
    padding: 18px 0 92px;
}

.kaf-aboutfresh-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.92fr);
    gap: 58px;
    align-items: center;
}

.kaf-aboutfresh-story__copy h2,
.kaf-aboutfresh-section-head h2,
.kaf-aboutfresh-network__copy h2,
.kaf-aboutfresh-cta__box h2 {
    margin: 16px 0 18px;
    color: var(--af-green);
    font-size: clamp(34px, 4vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.052em;
    font-weight: 760;
    text-wrap: balance;
}

.kaf-aboutfresh-story__copy p,
.kaf-aboutfresh-section-head p,
.kaf-aboutfresh-network__copy p,
.kaf-aboutfresh-cta__box p {
    color: var(--af-muted);
    font-size: 15px;
    line-height: 1.78;
    font-weight: 470;
}

.kaf-aboutfresh-story__copy p {
    max-width: 680px;
    margin: 0 0 14px;
}

.kaf-aboutfresh-collage {
    position: relative;
    min-height: 520px;
}

.kaf-aboutfresh-collage__main {
    position: absolute;
    inset: 0 42px 0 0;
    border-radius: 42px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(245, 158, 11, 0.28),
            transparent 18rem
        ),
        linear-gradient(135deg, var(--af-teal), var(--af-green));
    box-shadow: 0 30px 80px rgba(5, 32, 17, 0.14);
}

.kaf-aboutfresh-collage__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.88;
}

.kaf-aboutfresh-collage__main span {
    height: 100%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 760;
}

.kaf-aboutfresh-collage__note {
    position: absolute;
    left: -18px;
    bottom: 28px;
    width: min(340px, 80%);
    padding: 22px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 22px 50px rgba(5, 32, 17, 0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.kaf-aboutfresh-collage__note small {
    display: block;
    margin-bottom: 8px;
    color: var(--af-teal);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-aboutfresh-collage__note strong {
    display: block;
    color: var(--af-green);
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.kaf-aboutfresh-collage__mini {
    position: absolute;
    right: 0;
    top: 44px;
    width: 190px;
    padding: 18px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(5, 32, 17, 0.14);
}

.kaf-aboutfresh-collage__mini b {
    display: block;
    margin-bottom: 7px;
    color: var(--af-green);
    font-size: 16px;
}

.kaf-aboutfresh-collage__mini span {
    display: block;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
}

/* Section head */
.kaf-aboutfresh-section-head {
    max-width: 900px;
    margin-bottom: 36px;
}

.kaf-aboutfresh-section-head--split {
    max-width: none;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 42px;
}

.kaf-aboutfresh-section-head--split > div {
    max-width: 640px;
}

.kaf-aboutfresh-section-head--split p {
    max-width: 430px;
    margin: 0 0 20px;
}

/* Values image cards */
.kaf-aboutfresh-values {
    padding: 92px 0;
    background: #fff;
}

.kaf-aboutfresh-values__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.kaf-aboutfresh-value {
    border-radius: 32px;
    background: #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-aboutfresh-value:hover {
    transform: translateY(-7px);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.1);
}

.kaf-aboutfresh-value__media {
    height: 180px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 72% 18%,
            rgba(245, 158, 11, 0.34),
            transparent 12rem
        ),
        linear-gradient(135deg, var(--af-teal), var(--af-green));
}

.kaf-aboutfresh-value__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-aboutfresh-value:hover .kaf-aboutfresh-value__media img {
    transform: scale(1.06);
}

.kaf-aboutfresh-value__media span {
    height: 100%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 760;
}

.kaf-aboutfresh-value__body {
    padding: 24px;
}

.kaf-aboutfresh-value__body strong {
    display: block;
    margin-bottom: 11px;
    color: var(--af-green);
    font-size: 23px;
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 770;
}

.kaf-aboutfresh-value__body p {
    margin: 0;
    color: var(--af-muted);
    font-size: 14px;
    line-height: 1.66;
    font-weight: 470;
}

/* Network panel */
.kaf-aboutfresh-network {
    padding: 92px 0;
}

.kaf-aboutfresh-network__panel {
    display: grid;
    grid-template-columns: minmax(380px, 0.9fr) minmax(0, 1.1fr);
    gap: 44px;
    align-items: center;
    padding: 42px;
    border-radius: 42px;
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(245, 158, 11, 0.24),
            transparent 24rem
        ),
        linear-gradient(135deg, #072a1c, var(--af-teal));
    overflow: hidden;
    color: #fff;
}

.kaf-aboutfresh-network__visual {
    min-height: 390px;
    border-radius: 30px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.kaf-aboutfresh-network__visual img {
    width: 100%;
    height: 100%;
    min-height: 390px;
    object-fit: cover;
}

.kaf-aboutfresh-network__visual > div {
    min-height: 390px;
    display: grid;
    place-content: center;
    padding: 32px;
    text-align: center;
    color: #fff;
}

.kaf-aboutfresh-network__visual span {
    font-size: 13px;
    font-weight: 800;
    opacity: 0.76;
}

.kaf-aboutfresh-network__visual strong {
    display: block;
    max-width: 360px;
    margin-top: 9px;
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -0.045em;
}

.kaf-aboutfresh-network__copy h2 {
    color: #fff;
}

.kaf-aboutfresh-network__copy p {
    max-width: 610px;
    color: rgba(255, 255, 255, 0.78);
}

/* Journey image steps */
.kaf-aboutfresh-journey {
    padding: 0 0 92px;
}

.kaf-aboutfresh-journey__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.kaf-aboutfresh-step {
    border-radius: 32px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}

.kaf-aboutfresh-step__media {
    position: relative;
    height: 150px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 72% 18%,
            rgba(245, 158, 11, 0.3),
            transparent 12rem
        ),
        linear-gradient(135deg, var(--af-teal), var(--af-green));
}

.kaf-aboutfresh-step__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kaf-aboutfresh-step__media span {
    position: absolute;
    left: 18px;
    bottom: 16px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 13px;
    font-weight: 850;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.kaf-aboutfresh-step__body {
    padding: 22px;
}

.kaf-aboutfresh-step__body small {
    display: inline-flex;
    margin-bottom: 12px;
    color: var(--af-teal);
    font-size: 12px;
    font-weight: 850;
}

.kaf-aboutfresh-step__body h3 {
    margin: 0 0 10px;
    color: var(--af-green);
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 770;
}

.kaf-aboutfresh-step__body p {
    margin: 0;
    color: var(--af-muted);
    font-size: 14px;
    line-height: 1.62;
}

/* CTA */
.kaf-aboutfresh-cta {
    padding: 0 0 96px;
}

.kaf-aboutfresh-cta__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 34px 38px;
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.kaf-aboutfresh-cta__box h2 {
    max-width: 720px;
    font-size: clamp(30px, 3vw, 48px);
}

.kaf-aboutfresh-cta__box p {
    max-width: 560px;
    margin: 0;
}

/* Reveal */
[data-kaf-about-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-kaf-about-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 1120px) {
    .kaf-aboutfresh-stats__grid,
    .kaf-aboutfresh-values__grid,
    .kaf-aboutfresh-journey__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kaf-aboutfresh-story__grid,
    .kaf-aboutfresh-network__panel {
        grid-template-columns: 1fr;
    }

    .kaf-aboutfresh-section-head--split {
        display: block;
    }

    .kaf-aboutfresh-section-head--split p {
        max-width: 680px;
        margin-top: 0;
    }
}

@media (max-width: 720px) {
    .kaf-aboutfresh-hero {
        min-height: 360px;
        padding: 126px 0 64px;
        border-radius: 0 0 30px 30px;
    }

    .kaf-aboutfresh-hero h1 {
        font-size: 38px;
        line-height: 1.06;
    }

    .kaf-aboutfresh-hero p {
        font-size: 15px;
        line-height: 1.68;
    }

    .kaf-aboutfresh-crumb {
        margin-bottom: 24px;
        padding: 9px 14px;
    }

    .kaf-aboutfresh-stats__grid,
    .kaf-aboutfresh-values__grid,
    .kaf-aboutfresh-journey__grid {
        grid-template-columns: 1fr;
    }

    .kaf-aboutfresh-story,
    .kaf-aboutfresh-values,
    .kaf-aboutfresh-network,
    .kaf-aboutfresh-journey {
        padding-bottom: 64px;
    }

    .kaf-aboutfresh-collage {
        min-height: 390px;
    }

    .kaf-aboutfresh-collage__main {
        inset: 0;
        border-radius: 30px;
    }

    .kaf-aboutfresh-collage__mini {
        display: none;
    }

    .kaf-aboutfresh-collage__note {
        left: 18px;
        bottom: 18px;
        width: calc(100% - 36px);
    }

    .kaf-aboutfresh-story__copy h2,
    .kaf-aboutfresh-section-head h2,
    .kaf-aboutfresh-network__copy h2,
    .kaf-aboutfresh-cta__box h2 {
        font-size: 32px;
        line-height: 1.06;
    }

    .kaf-aboutfresh-network__panel {
        padding: 24px;
        border-radius: 30px;
    }

    .kaf-aboutfresh-network__visual,
    .kaf-aboutfresh-network__visual img,
    .kaf-aboutfresh-network__visual > div {
        min-height: 300px;
    }

    .kaf-aboutfresh-cta {
        padding-bottom: 64px;
    }

    .kaf-aboutfresh-cta__box {
        display: block;
        padding: 26px 20px;
        border-radius: 26px;
    }

    .kaf-aboutfresh-cta__box .kaf-aboutfresh-btn {
        width: 100%;
        margin-top: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-kaf-about-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   ABOUT FRESH — HERO BADGE SPACING FIX
   Badge KAFNET Nusantara tidak nabrak breadcrumb/judul
   ========================================================= */

.kaf-aboutfresh-hero__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.kaf-aboutfresh-hero .kaf-aboutfresh-crumb {
    margin-bottom: 22px !important;
}

.kaf-aboutfresh-hero .kaf-aboutfresh-eyebrow {
    position: relative !important;
    z-index: 3 !important;
    margin: 0 0 18px !important;
    flex: 0 0 auto !important;
}

.kaf-aboutfresh-hero h1 {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    clear: both !important;
}

.kaf-aboutfresh-hero p {
    clear: both !important;
}

/* Desktop: hero tetap lega dari menu */
.kaf-aboutfresh-hero {
    padding-top: 172px !important;
}

/* Mobile/tablet */
@media (max-width: 720px) {
    .kaf-aboutfresh-hero {
        padding-top: 132px !important;
    }

    .kaf-aboutfresh-hero .kaf-aboutfresh-crumb {
        margin-bottom: 18px !important;
    }

    .kaf-aboutfresh-hero .kaf-aboutfresh-eyebrow {
        margin-bottom: 14px !important;
    }

    .kaf-aboutfresh-hero h1 {
        margin-bottom: 14px !important;
    }
}

/* =========================================================
   ABOUT FRESH — HERO BADGE COLOR FIX
   Badge KAFNET Nusantara dibuat glass agar tidak tabrakan warna
   ========================================================= */

.kaf-aboutfresh-hero .kaf-aboutfresh-eyebrow {
    background: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.kaf-aboutfresh-hero .kaf-aboutfresh-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}

/* Kalau masih ada class about versi sebelumnya */
.kaf-aboutv2-hero .kaf-aboutv2-eyebrow {
    background: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.kaf-aboutv2-hero .kaf-aboutv2-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}

/* =========================================================
   PACKAGES LISTING V2 — KAFNET
   ========================================================= */

.kaf-packagesv2 {
    --pkg-green: #052011;
    --pkg-teal: #076666;
    --pkg-orange: #f59e0b;
    --pkg-muted: #4b5563;
    background: #f8fafb;
    color: var(--pkg-green);
    overflow: hidden;
}

.kaf-packagesv2-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--pkg-teal);
    font-size: 11px;
    line-height: 1;
    font-weight: 780;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-packagesv2-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    font-weight: 820;
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.24s ease;
}

.kaf-packagesv2-btn:hover {
    transform: translateY(-2px);
}

.kaf-packagesv2-btn--accent {
    background: var(--pkg-orange);
    color: #fff;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24);
}

.kaf-packagesv2-btn--glass {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-packagesv2-btn--light {
    background: #fff;
    color: var(--pkg-green);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

/* Hero */
.kaf-packagesv2-hero {
    position: relative;
    min-height: 440px;
    padding: 164px 0 88px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.86) 0%,
            rgba(7, 102, 102, 0.64) 48%,
            rgba(245, 158, 11, 0.24) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--packageHeroBg) center center / cover no-repeat;
    border-radius: 0 0 42px 42px;
}

.kaf-packagesv2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.16));
}

.kaf-packagesv2-hero .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-packagesv2-hero__content {
    max-width: 860px;
}

.kaf-packagesv2-crumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 34px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.96);
    color: #fff;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.24);
}

.kaf-packagesv2-crumb a,
.kaf-packagesv2-crumb span {
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 650;
}

.kaf-packagesv2-hero .kaf-packagesv2-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-packagesv2-hero .kaf-packagesv2-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--pkg-orange);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}

.kaf-packagesv2-hero h1 {
    max-width: 850px;
    margin: 18px 0 18px;
    color: #fff;
    font-size: clamp(42px, 5.4vw, 74px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-weight: 760;
    text-wrap: balance;
}

.kaf-packagesv2-hero p {
    max-width: 670px;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.68;
    font-weight: 470;
}

.kaf-packagesv2-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* Toolbar */
.kaf-packagesv2-toolbar {
    padding: 48px 0 24px;
}

.kaf-packagesv2-toolbar__inner {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}

.kaf-packagesv2-toolbar h2 {
    margin: 14px 0 0;
    color: var(--pkg-green);
    font-size: clamp(30px, 3.4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-weight: 760;
}

.kaf-packagesv2-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 7px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}

.kaf-packagesv2-filters button {
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.kaf-packagesv2-filters button.is-active {
    background: var(--pkg-green);
    color: #fff;
}

/* Listing */
.kaf-packagesv2-list {
    padding: 0 0 74px;
}

.kaf-packagesv2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.kaf-package-card {
    position: relative;
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.065);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.28s ease;
}

.kaf-package-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 80px rgba(15, 23, 42, 0.11);
}

.kaf-package-card.is-highlight {
    border-color: rgba(245, 158, 11, 0.38);
    box-shadow: 0 26px 70px rgba(245, 158, 11, 0.12);
}

.kaf-package-card.is-hidden {
    display: none;
}

.kaf-package-card__media {
    position: relative;
    height: 190px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(245, 158, 11, 0.35),
            transparent 13rem
        ),
        linear-gradient(135deg, var(--pkg-teal), var(--pkg-green));
}

.kaf-package-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-package-card:hover .kaf-package-card__media img {
    transform: scale(1.06);
}

.kaf-package-card__fallback {
    height: 100%;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
}

.kaf-package-card__fallback span {
    display: block;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 800;
}

.kaf-package-card__fallback strong {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kaf-package-card__badge {
    position: absolute;
    left: 18px;
    top: 18px;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--pkg-green);
    font-size: 11px;
    font-weight: 850;
    box-shadow: 0 12px 26px rgba(5, 32, 17, 0.12);
}

.kaf-package-card__body {
    padding: 24px;
}

.kaf-package-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.kaf-package-card__category {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--pkg-teal);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-package-card h3 {
    margin: 0;
    color: var(--pkg-green);
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 780;
}

.kaf-package-card__head > strong {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--pkg-teal);
    font-size: 13px;
    font-weight: 850;
}

.kaf-package-card__body > p {
    min-height: 70px;
    margin: 0 0 18px;
    color: var(--pkg-muted);
    font-size: 14px;
    line-height: 1.62;
    font-weight: 470;
}

.kaf-package-card__price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 18px;
}

.kaf-package-card__price b {
    color: var(--pkg-green);
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 800;
}

.kaf-package-card__price span {
    color: #64748b;
    font-size: 13px;
    font-weight: 650;
}

.kaf-package-card ul {
    display: grid;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.kaf-package-card li {
    position: relative;
    padding-left: 22px;
    color: #334155;
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 600;
}

.kaf-package-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--pkg-orange);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}

.kaf-package-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.kaf-package-card__actions .kaf-packagesv2-btn {
    width: 100%;
    padding: 0 14px;
}

/* Help CTA */
.kaf-packagesv2-help {
    padding: 0 0 92px;
}

.kaf-packagesv2-help__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 34px 38px;
    border-radius: 34px;
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(245, 158, 11, 0.14),
            transparent 18rem
        ),
        #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.kaf-packagesv2-help__box h2 {
    max-width: 720px;
    margin: 14px 0 12px;
    color: var(--pkg-green);
    font-size: clamp(30px, 3vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-weight: 760;
}

.kaf-packagesv2-help__box p {
    max-width: 600px;
    margin: 0;
    color: var(--pkg-muted);
    font-size: 15px;
    line-height: 1.68;
}

/* Reveal */
[data-kaf-package-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-kaf-package-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 1120px) {
    .kaf-packagesv2-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kaf-packagesv2-toolbar__inner,
    .kaf-packagesv2-help__box {
        display: block;
    }

    .kaf-packagesv2-filters {
        width: fit-content;
        margin-top: 20px;
    }

    .kaf-packagesv2-help__box .kaf-packagesv2-btn {
        margin-top: 24px;
    }
}

@media (max-width: 720px) {
    .kaf-packagesv2-hero {
        min-height: 360px;
        padding: 126px 0 64px;
        border-radius: 0 0 30px 30px;
    }

    .kaf-packagesv2-hero h1 {
        font-size: 38px;
        line-height: 1.06;
    }

    .kaf-packagesv2-hero p {
        font-size: 15px;
        line-height: 1.68;
    }

    .kaf-packagesv2-crumb {
        margin-bottom: 24px;
        padding: 9px 14px;
    }

    .kaf-packagesv2-grid {
        grid-template-columns: 1fr;
    }

    .kaf-packagesv2-filters {
        border-radius: 24px;
    }

    .kaf-packagesv2-filters button {
        height: 36px;
        padding: 0 13px;
    }

    .kaf-package-card__body > p {
        min-height: auto;
    }

    .kaf-package-card__actions {
        grid-template-columns: 1fr;
    }

    .kaf-packagesv2-help {
        padding-bottom: 64px;
    }

    .kaf-packagesv2-help__box {
        padding: 26px 20px;
        border-radius: 26px;
    }

    .kaf-packagesv2-help__box .kaf-packagesv2-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-kaf-package-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PACKAGE PAGE — BRIDGE + ADDONS FLOW
   Setelah daftar paket, jeda dulu baru layanan tambahan
   ========================================================= */

.kaf-packagesv2-bridge {
    padding: 0 0 34px;
    background: #f8fafb;
}

.kaf-packagesv2-bridge__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 34px 38px;
    border-radius: 34px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(245, 158, 11, 0.15),
            transparent 18rem
        ),
        linear-gradient(135deg, #052011 0%, #076666 100%);
    color: #fff;
    overflow: hidden;
}

.kaf-packagesv2-bridge__box .kaf-packagesv2-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: #fde68a;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.kaf-packagesv2-bridge__box h2 {
    max-width: 720px;
    margin: 14px 0 12px;
    color: #fff;
    font-size: clamp(30px, 3.2vw, 48px);
    line-height: 1.04;
    letter-spacing: -0.045em;
    font-weight: 760;
}

.kaf-packagesv2-bridge__box p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 1.7;
}

.kaf-packagesv2-bridge__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 320px;
}

.kaf-packagesv2-bridge__chips span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    font-weight: 760;
}

.kaf-packagesv2-addons {
    padding: 46px 0 84px;
    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(245, 158, 11, 0.08),
            transparent 22rem
        ),
        radial-gradient(
            circle at 90% 8%,
            rgba(7, 102, 102, 0.08),
            transparent 24rem
        ),
        #ffffff;
}

.kaf-packagesv2-section-head {
    max-width: 820px;
    margin-bottom: 30px;
}

.kaf-packagesv2-section-head h2 {
    margin: 14px 0 12px;
    color: var(--pkg-green, #052011);
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.052em;
    font-weight: 760;
}

.kaf-packagesv2-section-head p {
    max-width: 680px;
    margin: 0;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.72;
}

.kaf-packagesv2-addons__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.kaf-packagesv2-addon {
    border-radius: 34px;
    background: #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-packagesv2-addon:hover {
    transform: translateY(-7px);
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.11);
}

.kaf-packagesv2-addon__media {
    position: relative;
    height: 210px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 76% 18%,
            rgba(245, 158, 11, 0.34),
            transparent 13rem
        ),
        linear-gradient(135deg, #076666, #052011);
}

.kaf-packagesv2-addon__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-packagesv2-addon:hover .kaf-packagesv2-addon__media img {
    transform: scale(1.06);
}

.kaf-packagesv2-addon__media > span {
    height: 100%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.045em;
    font-weight: 760;
}

.kaf-packagesv2-addon__media b {
    position: absolute;
    left: 18px;
    top: 18px;
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #052011;
    font-size: 11px;
    font-weight: 850;
    box-shadow: 0 12px 26px rgba(5, 32, 17, 0.12);
}

.kaf-packagesv2-addon__body {
    padding: 24px;
}

.kaf-packagesv2-addon__body h3 {
    margin: 0 0 10px;
    color: #052011;
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 760;
}

.kaf-packagesv2-addon__body p {
    min-height: 72px;
    margin: 0 0 18px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.62;
}

.kaf-packagesv2-addon__body a {
    color: #076666;
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
}

.kaf-packagesv2-addon__body a:hover {
    color: #f59e0b;
}

@media (max-width: 980px) {
    .kaf-packagesv2-bridge__box {
        grid-template-columns: 1fr;
        padding: 28px 24px;
    }

    .kaf-packagesv2-bridge__chips {
        justify-content: flex-start;
        max-width: none;
    }

    .kaf-packagesv2-addons__grid {
        grid-template-columns: 1fr;
    }

    .kaf-packagesv2-addon__body p {
        min-height: auto;
    }
}

/* =========================================================
   PACKAGE PAGE — BRIDGE + ADDONS FLOW
   Setelah daftar paket, jeda dulu baru layanan tambahan
   ========================================================= */

.kaf-packagesv2-bridge {
    padding: 0 0 34px;
    background: #f8fafb;
}

.kaf-packagesv2-bridge__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 34px 38px;
    border-radius: 34px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(245, 158, 11, 0.15),
            transparent 18rem
        ),
        linear-gradient(135deg, #052011 0%, #076666 100%);
    color: #fff;
    overflow: hidden;
}

.kaf-packagesv2-bridge__box .kaf-packagesv2-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: #fde68a;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.kaf-packagesv2-bridge__box h2 {
    max-width: 720px;
    margin: 14px 0 12px;
    color: #fff;
    font-size: clamp(30px, 3.2vw, 48px);
    line-height: 1.04;
    letter-spacing: -0.045em;
    font-weight: 760;
}

.kaf-packagesv2-bridge__box p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 1.7;
}

.kaf-packagesv2-bridge__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 320px;
}

.kaf-packagesv2-bridge__chips span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    font-weight: 760;
}

.kaf-packagesv2-addons {
    padding: 46px 0 84px;
    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(245, 158, 11, 0.08),
            transparent 22rem
        ),
        radial-gradient(
            circle at 90% 8%,
            rgba(7, 102, 102, 0.08),
            transparent 24rem
        ),
        #ffffff;
}

.kaf-packagesv2-section-head {
    max-width: 820px;
    margin-bottom: 30px;
}

.kaf-packagesv2-section-head h2 {
    margin: 14px 0 12px;
    color: var(--pkg-green, #052011);
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.052em;
    font-weight: 760;
}

.kaf-packagesv2-section-head p {
    max-width: 680px;
    margin: 0;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.72;
}

.kaf-packagesv2-addons__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.kaf-packagesv2-addon {
    border-radius: 34px;
    background: #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-packagesv2-addon:hover {
    transform: translateY(-7px);
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.11);
}

.kaf-packagesv2-addon__media {
    position: relative;
    height: 210px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 76% 18%,
            rgba(245, 158, 11, 0.34),
            transparent 13rem
        ),
        linear-gradient(135deg, #076666, #052011);
}

.kaf-packagesv2-addon__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-packagesv2-addon:hover .kaf-packagesv2-addon__media img {
    transform: scale(1.06);
}

.kaf-packagesv2-addon__media > span {
    height: 100%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.045em;
    font-weight: 760;
}

.kaf-packagesv2-addon__media b {
    position: absolute;
    left: 18px;
    top: 18px;
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #052011;
    font-size: 11px;
    font-weight: 850;
    box-shadow: 0 12px 26px rgba(5, 32, 17, 0.12);
}

.kaf-packagesv2-addon__body {
    padding: 24px;
}

.kaf-packagesv2-addon__body h3 {
    margin: 0 0 10px;
    color: #052011;
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 760;
}

.kaf-packagesv2-addon__body p {
    min-height: 72px;
    margin: 0 0 18px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.62;
}

.kaf-packagesv2-addon__body a {
    color: #076666;
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
}

.kaf-packagesv2-addon__body a:hover {
    color: #f59e0b;
}

@media (max-width: 980px) {
    .kaf-packagesv2-bridge__box {
        grid-template-columns: 1fr;
        padding: 28px 24px;
    }

    .kaf-packagesv2-bridge__chips {
        justify-content: flex-start;
        max-width: none;
    }

    .kaf-packagesv2-addons__grid {
        grid-template-columns: 1fr;
    }

    .kaf-packagesv2-addon__body p {
        min-height: auto;
    }
}

/* =========================================================
   PACKAGE PAGE — CTA LIKE HOME
   Konsisten dengan CTA Home: full-width, image, gradient, compact
   ========================================================= */

.kaf-packagesv2-homecta {
    position: relative;
    width: 100%;
    min-height: 360px;
    margin: 0;
    overflow: hidden;
    background: #052011;
}

.kaf-packagesv2-homecta__bg,
.kaf-packagesv2-homecta__layer {
    position: absolute;
    inset: 0;
}

.kaf-packagesv2-homecta__bg {
    z-index: 0;
}

.kaf-packagesv2-homecta__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(3px) saturate(1.06) brightness(0.86);
    transform: scale(1.035);
    opacity: 0.9;
}

.kaf-packagesv2-homecta__layer {
    z-index: 1;
    background:
        radial-gradient(
            circle at 78% 28%,
            rgba(245, 158, 11, 0.34),
            transparent 26rem
        ),
        radial-gradient(
            circle at 18% 82%,
            rgba(7, 102, 102, 0.28),
            transparent 28rem
        ),
        linear-gradient(
            115deg,
            rgba(5, 32, 17, 0.92) 0%,
            rgba(7, 102, 102, 0.76) 46%,
            rgba(245, 158, 11, 0.66) 100%
        );
}

.kaf-packagesv2-homecta .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-packagesv2-homecta__card {
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 42px;
    padding: 54px 0 58px;
    color: #fff;
}

.kaf-packagesv2-homecta__copy {
    max-width: 680px;
}

.kaf-packagesv2-homecta__copy span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 13px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.kaf-packagesv2-homecta__copy h2 {
    max-width: 680px;
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-weight: 760;
    text-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.kaf-packagesv2-homecta__copy p {
    max-width: 590px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14.5px;
    line-height: 1.62;
    font-weight: 470;
}

.kaf-packagesv2-homecta__actions {
    min-width: 220px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    flex: 0 0 auto;
}

.kaf-packagesv2-homecta__btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    white-space: nowrap;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.25s ease;
}

.kaf-packagesv2-homecta__btn:hover {
    transform: translateY(-2px);
}

.kaf-packagesv2-homecta__btn--glass {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-packagesv2-homecta__btn--accent {
    background: #f59e0b;
    color: #fff;
    box-shadow: 0 18px 38px rgba(245, 158, 11, 0.3);
}

/* Hilangkan style CTA lama kalau masih ada */
.kaf-packagesv2-help {
    display: none !important;
}

/* Footer langsung nempel setelah CTA */
.kaf-packagesv2-homecta + .kaf-footer,
.kaf-packagesv2-homecta ~ .kaf-footer,
.kaf-packagesv2-homecta + footer,
.kaf-packagesv2-homecta ~ footer {
    margin-top: 0 !important;
}

@media (max-height: 860px) and (min-width: 981px) {
    .kaf-packagesv2-homecta {
        min-height: 320px;
    }

    .kaf-packagesv2-homecta__card {
        min-height: 320px;
        padding: 42px 0 46px;
    }

    .kaf-packagesv2-homecta__copy h2 {
        font-size: clamp(30px, 3.4vw, 46px);
    }
}

@media (max-width: 980px) {
    .kaf-packagesv2-homecta {
        min-height: auto;
    }

    .kaf-packagesv2-homecta__card {
        min-height: auto;
        display: block;
        padding: 44px 0 50px;
    }

    .kaf-packagesv2-homecta__copy h2 {
        font-size: clamp(32px, 8vw, 46px);
        line-height: 1;
    }

    .kaf-packagesv2-homecta__actions {
        min-width: 0;
        margin-top: 24px;
    }
}

/* =========================================================
   PACKAGE CTA — ROUNDED WIDTH FIX
   Samakan rasa CTA dengan Home: full width tapi tetap rounded
   ========================================================= */

.kaf-packagesv2-homecta {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 38px 38px 0 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

.kaf-packagesv2-homecta__bg,
.kaf-packagesv2-homecta__layer {
    border-radius: inherit !important;
}

.kaf-packagesv2-homecta__card {
    border-radius: 0 !important;
}

/* Supaya tidak ada jarak putih sebelum footer */
.kaf-packagesv2-homecta {
    margin-bottom: 0 !important;
}

.kaf-packagesv2-homecta + footer,
.kaf-packagesv2-homecta + .kaf-footer {
    margin-top: 0 !important;
}

/* Mobile rounded lebih kecil */
@media (max-width: 720px) {
    .kaf-packagesv2-homecta {
        border-radius: 28px 28px 0 0 !important;
    }
}

/* =========================================================
   PROMO PAGE V2 — KAFNET
   ========================================================= */

.kaf-promov2 {
    --promo-green: #052011;
    --promo-teal: #076666;
    --promo-orange: #f59e0b;
    --promo-muted: #4b5563;
    background: #f8fafb;
    color: var(--promo-green);
    overflow: hidden;
}

.kaf-promov2-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--promo-teal);
    font-size: 11px;
    line-height: 1;
    font-weight: 780;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-promov2-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    font-weight: 820;
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-promov2-btn:hover {
    transform: translateY(-2px);
}

.kaf-promov2-btn--accent {
    background: var(--promo-orange);
    color: #fff;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24);
}

.kaf-promov2-btn--glass {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-promov2-btn--light {
    background: #fff;
    color: var(--promo-green);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

/* Hero */
.kaf-promov2-hero {
    position: relative;
    min-height: 430px;
    padding: 164px 0 86px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.86) 0%,
            rgba(7, 102, 102, 0.64) 48%,
            rgba(245, 158, 11, 0.24) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--promoHeroBg) center center / cover no-repeat;
    border-radius: 0 0 42px 42px;
}

.kaf-promov2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.16));
}

.kaf-promov2-hero .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-promov2-hero__content {
    max-width: 860px;
}

.kaf-promov2-crumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 34px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.96);
    color: #fff;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.24);
}

.kaf-promov2-crumb a,
.kaf-promov2-crumb span {
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 650;
}

.kaf-promov2-hero .kaf-promov2-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-promov2-hero .kaf-promov2-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--promo-orange);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}

.kaf-promov2-hero h1 {
    max-width: 850px;
    margin: 18px 0 18px;
    color: #fff;
    font-size: clamp(42px, 5.4vw, 74px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-weight: 760;
    text-wrap: balance;
}

.kaf-promov2-hero p {
    max-width: 670px;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.68;
    font-weight: 470;
}

.kaf-promov2-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* Featured */
.kaf-promov2-featured {
    padding: 48px 0 28px;
}

.kaf-promov2-featured__box {
    display: grid;
    grid-template-columns: minmax(380px, 0.9fr) minmax(0, 1.1fr);
    gap: 36px;
    align-items: center;
    padding: 24px;
    border-radius: 38px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.kaf-promov2-featured__media {
    min-height: 360px;
    border-radius: 30px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 76% 18%,
            rgba(245, 158, 11, 0.34),
            transparent 13rem
        ),
        linear-gradient(135deg, var(--promo-teal), var(--promo-green));
}

.kaf-promov2-featured__media img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

.kaf-promov2-featured__fallback {
    min-height: 360px;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
}

.kaf-promov2-featured__fallback span {
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

.kaf-promov2-featured__fallback strong {
    margin-top: 8px;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.05em;
}

.kaf-promov2-featured__copy {
    padding: 12px 18px 12px 0;
}

.kaf-promov2-featured__copy h2,
.kaf-promov2-toolbar h2,
.kaf-promov2-section-head h2 {
    margin: 14px 0 12px;
    color: var(--promo-green);
    font-size: clamp(32px, 3.8vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.052em;
    font-weight: 760;
}

.kaf-promov2-featured__copy p,
.kaf-promov2-section-head p {
    max-width: 640px;
    margin: 0;
    color: var(--promo-muted);
    font-size: 15px;
    line-height: 1.72;
}

.kaf-promov2-featured__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0;
}

.kaf-promov2-featured__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.08);
    color: var(--promo-teal);
    font-size: 12px;
    font-weight: 820;
}

.kaf-promov2-featured__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Toolbar */
.kaf-promov2-toolbar {
    padding: 32px 0 24px;
}

.kaf-promov2-toolbar__inner {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}

.kaf-promov2-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 7px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}

.kaf-promov2-filters button {
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.kaf-promov2-filters button.is-active {
    background: var(--promo-green);
    color: #fff;
}

/* Cards */
.kaf-promov2-list {
    padding: 0 0 76px;
}

.kaf-promov2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.kaf-promo-card {
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.065);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-promo-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 80px rgba(15, 23, 42, 0.11);
}

.kaf-promo-card.is-highlight {
    border-color: rgba(245, 158, 11, 0.38);
}

.kaf-promo-card.is-hidden {
    display: none;
}

.kaf-promo-card__media {
    position: relative;
    height: 200px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(245, 158, 11, 0.35),
            transparent 13rem
        ),
        linear-gradient(135deg, var(--promo-teal), var(--promo-green));
}

.kaf-promo-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-promo-card:hover .kaf-promo-card__media img {
    transform: scale(1.06);
}

.kaf-promo-card__fallback {
    height: 100%;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
}

.kaf-promo-card__fallback span {
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 780;
}

.kaf-promo-card__fallback strong {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kaf-promo-card__media b {
    position: absolute;
    left: 18px;
    top: 18px;
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--promo-green);
    font-size: 11px;
    font-weight: 850;
    box-shadow: 0 12px 26px rgba(5, 32, 17, 0.12);
}

.kaf-promo-card__body {
    padding: 24px;
}

.kaf-promo-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}

.kaf-promo-card__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.08);
    color: var(--promo-teal);
    font-size: 11px;
    line-height: 1;
    font-weight: 820;
}

.kaf-promo-card h3 {
    margin: 0 0 10px;
    color: var(--promo-green);
    font-size: 25px;
    line-height: 1.06;
    letter-spacing: -0.04em;
    font-weight: 780;
}

.kaf-promo-card__body > p {
    min-height: 72px;
    margin: 0 0 18px;
    color: var(--promo-muted);
    font-size: 14px;
    line-height: 1.62;
    font-weight: 470;
}

.kaf-promo-card ul {
    display: grid;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.kaf-promo-card li {
    position: relative;
    padding-left: 22px;
    color: #334155;
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 600;
}

.kaf-promo-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--promo-orange);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}

.kaf-promo-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Claim */
.kaf-promov2-claim {
    padding: 76px 0 92px;
    background: #fff;
}

.kaf-promov2-section-head {
    max-width: 820px;
    margin-bottom: 30px;
}

.kaf-promov2-claim__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.kaf-promov2-claim__grid article {
    min-height: 220px;
    padding: 28px;
    border-radius: 30px;
    background: #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-promov2-claim__grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 28px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--promo-teal);
    font-size: 12px;
    font-weight: 850;
}

.kaf-promov2-claim__grid h3 {
    margin: 0 0 10px;
    color: var(--promo-green);
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 770;
}

.kaf-promov2-claim__grid p {
    margin: 0;
    color: var(--promo-muted);
    font-size: 14px;
    line-height: 1.62;
}

/* Unified CTA — dipakai untuk CTA semua page berikutnya */
.kaf-unified-cta {
    position: relative;
    width: 100vw;
    min-height: 360px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 0;
    overflow: hidden;
    isolation: isolate;
    border-radius: 38px 38px 0 0;
    background: #052011;
}

.kaf-unified-cta__bg,
.kaf-unified-cta__layer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.kaf-unified-cta__bg {
    z-index: 0;
}

.kaf-unified-cta__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(3px) saturate(1.06) brightness(0.86);
    transform: scale(1.035);
    opacity: 0.9;
}

.kaf-unified-cta__layer {
    z-index: 1;
    background:
        radial-gradient(
            circle at 78% 28%,
            rgba(245, 158, 11, 0.34),
            transparent 26rem
        ),
        radial-gradient(
            circle at 18% 82%,
            rgba(7, 102, 102, 0.28),
            transparent 28rem
        ),
        linear-gradient(
            115deg,
            rgba(5, 32, 17, 0.92) 0%,
            rgba(7, 102, 102, 0.76) 46%,
            rgba(245, 158, 11, 0.66) 100%
        );
}

.kaf-unified-cta .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-unified-cta__card {
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 42px;
    padding: 54px 0 58px;
    color: #fff;
}

.kaf-unified-cta__copy {
    max-width: 680px;
}

.kaf-unified-cta__copy span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 13px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.kaf-unified-cta__copy h2 {
    max-width: 680px;
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-weight: 760;
    text-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.kaf-unified-cta__copy p {
    max-width: 590px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14.5px;
    line-height: 1.62;
    font-weight: 470;
}

.kaf-unified-cta__actions {
    min-width: 220px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    flex: 0 0 auto;
}

.kaf-unified-cta__btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    white-space: nowrap;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-unified-cta__btn:hover {
    transform: translateY(-2px);
}

.kaf-unified-cta__btn--glass {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-unified-cta__btn--accent {
    background: #f59e0b;
    color: #fff;
    box-shadow: 0 18px 38px rgba(245, 158, 11, 0.3);
}

/* Reveal */
[data-kaf-promo-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-kaf-promo-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 1120px) {
    .kaf-promov2-featured__box,
    .kaf-promov2-toolbar__inner {
        grid-template-columns: 1fr;
        display: block;
    }

    .kaf-promov2-featured__copy {
        padding: 24px 6px 8px;
    }

    .kaf-promov2-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kaf-promov2-filters {
        width: fit-content;
        margin-top: 20px;
    }
}

@media (max-width: 980px) {
    .kaf-promov2-claim__grid {
        grid-template-columns: 1fr;
    }

    .kaf-unified-cta {
        min-height: auto;
    }

    .kaf-unified-cta__card {
        min-height: auto;
        display: block;
        padding: 44px 0 50px;
    }

    .kaf-unified-cta__actions {
        min-width: 0;
        margin-top: 24px;
    }
}

@media (max-width: 720px) {
    .kaf-promov2-hero {
        min-height: 360px;
        padding: 126px 0 64px;
        border-radius: 0 0 30px 30px;
    }

    .kaf-promov2-hero h1 {
        font-size: 38px;
        line-height: 1.06;
    }

    .kaf-promov2-hero p {
        font-size: 15px;
        line-height: 1.68;
    }

    .kaf-promov2-grid {
        grid-template-columns: 1fr;
    }

    .kaf-promo-card__body > p {
        min-height: auto;
    }

    .kaf-promo-card__actions {
        grid-template-columns: 1fr;
    }

    .kaf-promov2-featured__media,
    .kaf-promov2-featured__media img,
    .kaf-promov2-featured__fallback {
        min-height: 280px;
    }

    .kaf-unified-cta {
        border-radius: 28px 28px 0 0;
    }

    .kaf-unified-cta__copy h2 {
        font-size: clamp(32px, 8vw, 46px);
        line-height: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-kaf-promo-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PACKAGE DETAIL PAGE — KAFNET
   ========================================================= */

.kaf-packagedetail {
    --pd-green: #052011;
    --pd-teal: #076666;
    --pd-orange: #f59e0b;
    --pd-muted: #4b5563;
    background: #f8fafb;
    color: var(--pd-green);
    overflow: hidden;
}

.kaf-packagedetail-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--pd-teal);
    font-size: 11px;
    line-height: 1;
    font-weight: 780;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-packagedetail-btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-packagedetail-btn:hover {
    transform: translateY(-2px);
}

.kaf-packagedetail-btn--accent {
    background: var(--pd-orange);
    color: #fff;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24);
}

.kaf-packagedetail-btn--glass {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-packagedetail-hero {
    position: relative;
    padding: 154px 0 76px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.88) 0%,
            rgba(7, 102, 102, 0.68) 48%,
            rgba(245, 158, 11, 0.24) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--detailHeroBg) center center / cover no-repeat;
    border-radius: 0 0 42px 42px;
}

.kaf-packagedetail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
}

.kaf-packagedetail-hero .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-packagedetail-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    gap: 42px;
    align-items: end;
}

.kaf-packagedetail-hero__copy {
    max-width: 820px;
}

.kaf-packagedetail-crumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.96);
    color: #fff;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.24);
}

.kaf-packagedetail-crumb a,
.kaf-packagedetail-crumb span {
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 650;
}

.kaf-packagedetail-hero .kaf-packagedetail-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-packagedetail-hero .kaf-packagedetail-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--pd-orange);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}

.kaf-packagedetail-hero h1 {
    margin: 18px 0 18px;
    color: #fff;
    font-size: clamp(48px, 6vw, 86px);
    line-height: 0.96;
    letter-spacing: -0.055em;
    font-weight: 760;
}

.kaf-packagedetail-hero p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.68;
    font-weight: 470;
}

.kaf-packagedetail-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.kaf-packagedetail-summary {
    border-radius: 34px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.kaf-packagedetail-summary__media {
    height: 210px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(245, 158, 11, 0.35),
            transparent 13rem
        ),
        linear-gradient(135deg, var(--pd-teal), var(--pd-green));
}

.kaf-packagedetail-summary__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kaf-packagedetail-summary__fallback {
    height: 100%;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
}

.kaf-packagedetail-summary__fallback span {
    font-size: 44px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.kaf-packagedetail-summary__fallback strong {
    margin-top: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.82;
}

.kaf-packagedetail-summary__body {
    padding: 24px;
}

.kaf-packagedetail-summary__body > span {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--pd-teal);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-packagedetail-summary__body h2 {
    margin: 0 0 14px;
    color: var(--pd-green);
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 800;
}

.kaf-packagedetail-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 18px;
}

.kaf-packagedetail-price strong {
    color: var(--pd-green);
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 800;
}

.kaf-packagedetail-price small {
    color: #64748b;
    font-size: 13px;
    font-weight: 650;
}

.kaf-packagedetail-summary ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kaf-packagedetail-summary li {
    padding: 14px;
    border-radius: 18px;
    background: rgba(7, 102, 102, 0.07);
}

.kaf-packagedetail-summary li b,
.kaf-packagedetail-summary li span {
    display: block;
}

.kaf-packagedetail-summary li b {
    margin-bottom: 5px;
    color: var(--pd-green);
    font-size: 12px;
    font-weight: 850;
}

.kaf-packagedetail-summary li span {
    color: #4b5563;
    font-size: 13px;
    line-height: 1.45;
}

.kaf-packagedetail-overview {
    padding: 74px 0 86px;
}

.kaf-packagedetail-overview__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 44px;
    align-items: start;
}

.kaf-packagedetail-section-head h2,
.kaf-packagedetail-fit__box h2,
.kaf-packagedetail-included__copy h2 {
    margin: 14px 0 14px;
    color: var(--pd-green);
    font-size: clamp(34px, 4vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.052em;
    font-weight: 760;
}

.kaf-packagedetail-section-head p {
    max-width: 660px;
    margin: 0;
    color: var(--pd-muted);
    font-size: 15px;
    line-height: 1.72;
}

.kaf-packagedetail-featuregrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.kaf-packagedetail-featuregrid article {
    min-height: 150px;
    padding: 24px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}

.kaf-packagedetail-featuregrid article span {
    display: block;
    width: 44px;
    height: 44px;
    margin-bottom: 24px;
    border-radius: 16px;
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(245, 158, 11, 0.5),
            transparent 60%
        ),
        linear-gradient(135deg, var(--pd-teal), var(--pd-green));
}

.kaf-packagedetail-featuregrid article strong {
    display: block;
    color: var(--pd-green);
    font-size: 20px;
    line-height: 1.16;
    letter-spacing: -0.035em;
    font-weight: 760;
}

.kaf-packagedetail-fit {
    padding: 0 0 86px;
}

.kaf-packagedetail-fit__box {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 32px;
    align-items: center;
    padding: 36px 38px;
    border-radius: 36px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(245, 158, 11, 0.15),
            transparent 18rem
        ),
        #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.kaf-packagedetail-fit__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kaf-packagedetail-fit__chips span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.08);
    color: var(--pd-teal);
    font-size: 13px;
    font-weight: 800;
}

.kaf-packagedetail-included {
    padding: 86px 0;
    background: #fff;
}

.kaf-packagedetail-included__grid {
    display: grid;
    grid-template-columns: minmax(380px, 0.9fr) minmax(0, 1.1fr);
    gap: 52px;
    align-items: center;
}

.kaf-packagedetail-included__visual {
    min-height: 430px;
    border-radius: 40px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(245, 158, 11, 0.35),
            transparent 13rem
        ),
        linear-gradient(135deg, var(--pd-teal), var(--pd-green));
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.1);
}

.kaf-packagedetail-included__visual img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
}

.kaf-packagedetail-included__visual > div {
    min-height: 430px;
    display: grid;
    place-content: center;
    padding: 30px;
    text-align: center;
    color: #fff;
}

.kaf-packagedetail-included__visual span {
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.82;
}

.kaf-packagedetail-included__visual strong {
    margin-top: 8px;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.05em;
}

.kaf-packagedetail-included__list {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.kaf-packagedetail-included__list div {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: start;
    padding: 16px;
    border-radius: 20px;
    background: #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-packagedetail-included__list span {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--pd-orange);
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.14);
}

.kaf-packagedetail-included__list p {
    margin: 0;
    color: var(--pd-muted);
    font-size: 14px;
    line-height: 1.58;
    font-weight: 560;
}

.kaf-packagedetail-steps {
    padding: 86px 0;
}

.kaf-packagedetail-steps__grid,
.kaf-packagedetail-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.kaf-packagedetail-steps__grid article,
.kaf-packagedetail-related__grid article {
    padding: 28px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}

.kaf-packagedetail-steps__grid article > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 28px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--pd-teal);
    font-size: 12px;
    font-weight: 850;
}

.kaf-packagedetail-steps__grid h3,
.kaf-packagedetail-related__grid h3 {
    margin: 0 0 10px;
    color: var(--pd-green);
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 770;
}

.kaf-packagedetail-steps__grid p,
.kaf-packagedetail-related__grid p {
    margin: 0;
    color: var(--pd-muted);
    font-size: 14px;
    line-height: 1.62;
}

.kaf-packagedetail-related {
    padding: 0 0 90px;
}

.kaf-packagedetail-related__grid article > span {
    display: inline-flex;
    margin-bottom: 12px;
    color: var(--pd-teal);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-packagedetail-related__grid strong {
    display: inline-flex;
    margin-bottom: 14px;
    color: var(--pd-green);
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 800;
}

.kaf-packagedetail-related__grid a {
    display: inline-flex;
    margin-top: 18px;
    color: var(--pd-teal);
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
}

[data-kaf-package-detail-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-kaf-package-detail-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1120px) {
    .kaf-packagedetail-hero__grid,
    .kaf-packagedetail-overview__grid,
    .kaf-packagedetail-fit__box,
    .kaf-packagedetail-included__grid {
        grid-template-columns: 1fr;
    }

    .kaf-packagedetail-summary {
        max-width: 520px;
    }

    .kaf-packagedetail-steps__grid,
    .kaf-packagedetail-related__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .kaf-packagedetail-hero {
        padding: 126px 0 56px;
        border-radius: 0 0 30px 30px;
    }

    .kaf-packagedetail-hero h1 {
        font-size: 46px;
        line-height: 0.98;
    }

    .kaf-packagedetail-hero p {
        font-size: 15px;
        line-height: 1.68;
    }

    .kaf-packagedetail-crumb {
        margin-bottom: 24px;
        padding: 9px 14px;
    }

    .kaf-packagedetail-featuregrid {
        grid-template-columns: 1fr;
    }

    .kaf-packagedetail-overview,
    .kaf-packagedetail-fit,
    .kaf-packagedetail-included,
    .kaf-packagedetail-steps,
    .kaf-packagedetail-related {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .kaf-packagedetail-fit__box {
        padding: 26px 20px;
        border-radius: 28px;
    }

    .kaf-packagedetail-section-head h2,
    .kaf-packagedetail-fit__box h2,
    .kaf-packagedetail-included__copy h2 {
        font-size: 32px;
        line-height: 1.06;
    }

    .kaf-packagedetail-included__visual,
    .kaf-packagedetail-included__visual img,
    .kaf-packagedetail-included__visual > div {
        min-height: 300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-kaf-package-detail-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PROMO DETAIL PAGE — KAFNET
   ========================================================= */

.kaf-promodetail {
    --pr-green: #052011;
    --pr-teal: #076666;
    --pr-orange: #f59e0b;
    --pr-muted: #4b5563;
    background: #f8fafb;
    color: var(--pr-green);
    overflow: hidden;
}

.kaf-promodetail-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--pr-teal);
    font-size: 11px;
    line-height: 1;
    font-weight: 780;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-promodetail-btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-promodetail-btn:hover {
    transform: translateY(-2px);
}

.kaf-promodetail-btn--accent {
    background: var(--pr-orange);
    color: #fff;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24);
}

.kaf-promodetail-btn--glass {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-promodetail-hero {
    position: relative;
    padding: 154px 0 76px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.88) 0%,
            rgba(7, 102, 102, 0.68) 48%,
            rgba(245, 158, 11, 0.24) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--promoDetailHeroBg) center center / cover no-repeat;
    border-radius: 0 0 42px 42px;
}

.kaf-promodetail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
}

.kaf-promodetail-hero .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-promodetail-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    gap: 42px;
    align-items: end;
}

.kaf-promodetail-hero__copy {
    max-width: 820px;
}

.kaf-promodetail-crumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.96);
    color: #fff;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.24);
}

.kaf-promodetail-crumb a,
.kaf-promodetail-crumb span {
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 650;
}

.kaf-promodetail-hero .kaf-promodetail-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-promodetail-hero .kaf-promodetail-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--pr-orange);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}

.kaf-promodetail-hero h1 {
    margin: 18px 0 18px;
    color: #fff;
    font-size: clamp(46px, 5.8vw, 82px);
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-weight: 760;
}

.kaf-promodetail-hero p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.68;
    font-weight: 470;
}

.kaf-promodetail-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.kaf-promodetail-summary {
    border-radius: 34px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.kaf-promodetail-summary__media {
    height: 220px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(245, 158, 11, 0.35),
            transparent 13rem
        ),
        linear-gradient(135deg, var(--pr-teal), var(--pr-green));
}

.kaf-promodetail-summary__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kaf-promodetail-summary__fallback {
    height: 100%;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
}

.kaf-promodetail-summary__fallback span {
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 780;
}

.kaf-promodetail-summary__fallback strong {
    margin-top: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.82;
}

.kaf-promodetail-summary__body {
    padding: 24px;
}

.kaf-promodetail-summary__body > span {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--pr-teal);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-promodetail-summary__body h2 {
    margin: 0 0 12px;
    color: var(--pr-green);
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 780;
}

.kaf-promodetail-summary__body p {
    margin: 0;
    color: var(--pr-muted);
    font-size: 14px;
    line-height: 1.65;
}

.kaf-promodetail-overview {
    padding: 74px 0 86px;
}

.kaf-promodetail-overview__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 44px;
    align-items: start;
}

.kaf-promodetail-section-head h2,
.kaf-promodetail-fit__box h2,
.kaf-promodetail-terms__copy h2 {
    margin: 14px 0 14px;
    color: var(--pr-green);
    font-size: clamp(34px, 4vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.052em;
    font-weight: 760;
}

.kaf-promodetail-section-head p {
    max-width: 660px;
    margin: 0;
    color: var(--pr-muted);
    font-size: 15px;
    line-height: 1.72;
}

.kaf-promodetail-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.kaf-promodetail-benefits article {
    min-height: 150px;
    padding: 24px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}

.kaf-promodetail-benefits article span {
    display: block;
    width: 44px;
    height: 44px;
    margin-bottom: 24px;
    border-radius: 16px;
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(245, 158, 11, 0.5),
            transparent 60%
        ),
        linear-gradient(135deg, var(--pr-teal), var(--pr-green));
}

.kaf-promodetail-benefits article strong {
    display: block;
    color: var(--pr-green);
    font-size: 20px;
    line-height: 1.16;
    letter-spacing: -0.035em;
    font-weight: 760;
}

.kaf-promodetail-fit {
    padding: 0 0 86px;
}

.kaf-promodetail-fit__box {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 32px;
    align-items: center;
    padding: 36px 38px;
    border-radius: 36px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(245, 158, 11, 0.15),
            transparent 18rem
        ),
        #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.kaf-promodetail-fit__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kaf-promodetail-fit__chips span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.08);
    color: var(--pr-teal);
    font-size: 13px;
    font-weight: 800;
}

.kaf-promodetail-claim {
    padding: 86px 0;
    background: #fff;
}

.kaf-promodetail-claim__grid,
.kaf-promodetail-related__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.kaf-promodetail-claim__grid article,
.kaf-promodetail-related__grid article {
    padding: 28px;
    border-radius: 30px;
    background: #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-promodetail-claim__grid article > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 28px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--pr-teal);
    font-size: 12px;
    font-weight: 850;
}

.kaf-promodetail-claim__grid h3,
.kaf-promodetail-related__grid h3 {
    margin: 0 0 10px;
    color: var(--pr-green);
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 770;
}

.kaf-promodetail-claim__grid p,
.kaf-promodetail-related__grid p {
    margin: 0;
    color: var(--pr-muted);
    font-size: 14px;
    line-height: 1.62;
}

.kaf-promodetail-terms {
    padding: 86px 0;
}

.kaf-promodetail-terms__grid {
    display: grid;
    grid-template-columns: minmax(380px, 0.9fr) minmax(0, 1.1fr);
    gap: 52px;
    align-items: center;
}

.kaf-promodetail-terms__visual {
    min-height: 430px;
    border-radius: 40px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(245, 158, 11, 0.35),
            transparent 13rem
        ),
        linear-gradient(135deg, var(--pr-teal), var(--pr-green));
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.1);
}

.kaf-promodetail-terms__visual img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
}

.kaf-promodetail-terms__visual > div {
    min-height: 430px;
    display: grid;
    place-content: center;
    padding: 30px;
    text-align: center;
    color: #fff;
}

.kaf-promodetail-terms__visual span {
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.82;
}

.kaf-promodetail-terms__visual strong {
    margin-top: 8px;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.05em;
}

.kaf-promodetail-terms__list {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.kaf-promodetail-terms__list div {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: start;
    padding: 16px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-promodetail-terms__list span {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--pr-orange);
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.14);
}

.kaf-promodetail-terms__list p {
    margin: 0;
    color: var(--pr-muted);
    font-size: 14px;
    line-height: 1.58;
    font-weight: 560;
}

.kaf-promodetail-related {
    padding: 0 0 90px;
}

.kaf-promodetail-related__grid {
    grid-template-columns: repeat(3, 1fr);
}

.kaf-promodetail-related__grid article {
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}

.kaf-promodetail-related__grid article > span {
    display: inline-flex;
    margin-bottom: 12px;
    color: var(--pr-teal);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-promodetail-related__grid a {
    display: inline-flex;
    margin-top: 18px;
    color: var(--pr-teal);
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
}

[data-kaf-promo-detail-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-kaf-promo-detail-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1120px) {
    .kaf-promodetail-hero__grid,
    .kaf-promodetail-overview__grid,
    .kaf-promodetail-fit__box,
    .kaf-promodetail-terms__grid {
        grid-template-columns: 1fr;
    }

    .kaf-promodetail-summary {
        max-width: 520px;
    }

    .kaf-promodetail-claim__grid,
    .kaf-promodetail-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .kaf-promodetail-hero {
        padding: 126px 0 56px;
        border-radius: 0 0 30px 30px;
    }

    .kaf-promodetail-hero h1 {
        font-size: 42px;
        line-height: 1;
    }

    .kaf-promodetail-hero p {
        font-size: 15px;
        line-height: 1.68;
    }

    .kaf-promodetail-crumb {
        margin-bottom: 24px;
        padding: 9px 14px;
    }

    .kaf-promodetail-benefits,
    .kaf-promodetail-claim__grid,
    .kaf-promodetail-related__grid {
        grid-template-columns: 1fr;
    }

    .kaf-promodetail-overview,
    .kaf-promodetail-fit,
    .kaf-promodetail-claim,
    .kaf-promodetail-terms,
    .kaf-promodetail-related {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .kaf-promodetail-fit__box {
        padding: 26px 20px;
        border-radius: 28px;
    }

    .kaf-promodetail-section-head h2,
    .kaf-promodetail-fit__box h2,
    .kaf-promodetail-terms__copy h2 {
        font-size: 32px;
        line-height: 1.06;
    }

    .kaf-promodetail-terms__visual,
    .kaf-promodetail-terms__visual img,
    .kaf-promodetail-terms__visual > div {
        min-height: 300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-kaf-promo-detail-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   ARTICLES LISTING V2 — KAFNET
   ========================================================= */

.kaf-articlesv2 {
    --art-green: #052011;
    --art-teal: #076666;
    --art-orange: #f59e0b;
    --art-muted: #4b5563;
    background: #f8fafb;
    color: var(--art-green);
    overflow: hidden;
}

.kaf-articlesv2-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--art-teal);
    font-size: 11px;
    line-height: 1;
    font-weight: 780;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-articlesv2-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    font-weight: 820;
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-articlesv2-btn:hover {
    transform: translateY(-2px);
}

.kaf-articlesv2-btn--accent {
    background: var(--art-orange);
    color: #fff;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24);
}

.kaf-articlesv2-btn--glass {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Hero */
.kaf-articlesv2-hero {
    position: relative;
    min-height: 430px;
    padding: 164px 0 86px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.86) 0%,
            rgba(7, 102, 102, 0.64) 48%,
            rgba(245, 158, 11, 0.24) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--articleHeroBg) center center / cover no-repeat;
    border-radius: 0 0 42px 42px;
}

.kaf-articlesv2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.16));
}

.kaf-articlesv2-hero .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-articlesv2-hero__content {
    max-width: 870px;
}

.kaf-articlesv2-crumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 34px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.96);
    color: #fff;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.24);
}

.kaf-articlesv2-crumb a,
.kaf-articlesv2-crumb span {
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 650;
}

.kaf-articlesv2-hero .kaf-articlesv2-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-articlesv2-hero .kaf-articlesv2-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--art-orange);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}

.kaf-articlesv2-hero h1 {
    max-width: 880px;
    margin: 18px 0 18px;
    color: #fff;
    font-size: clamp(42px, 5.4vw, 74px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-weight: 760;
    text-wrap: balance;
}

.kaf-articlesv2-hero p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.68;
    font-weight: 470;
}

.kaf-articlesv2-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* Featured */
.kaf-articlesv2-featured {
    padding: 48px 0 28px;
}

.kaf-articlesv2-featured__box {
    display: grid;
    grid-template-columns: minmax(380px, 0.92fr) minmax(0, 1.08fr);
    gap: 36px;
    align-items: center;
    padding: 24px;
    border-radius: 38px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.kaf-articlesv2-featured__media {
    min-height: 360px;
    border-radius: 30px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 76% 18%,
            rgba(245, 158, 11, 0.34),
            transparent 13rem
        ),
        linear-gradient(135deg, var(--art-teal), var(--art-green));
}

.kaf-articlesv2-featured__media img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

.kaf-articlesv2-featured__fallback {
    min-height: 360px;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
}

.kaf-articlesv2-featured__fallback span {
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.82;
}

.kaf-articlesv2-featured__fallback strong {
    margin-top: 8px;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.05em;
}

.kaf-articlesv2-featured__copy {
    padding: 12px 18px 12px 0;
}

.kaf-articlesv2-featured__copy h2,
.kaf-articlesv2-toolbar h2,
.kaf-articlesv2-guide__box h2 {
    margin: 14px 0 12px;
    color: var(--art-green);
    font-size: clamp(32px, 3.8vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.052em;
    font-weight: 760;
}

.kaf-articlesv2-featured__copy p,
.kaf-articlesv2-guide__box p {
    max-width: 640px;
    margin: 0;
    color: var(--art-muted);
    font-size: 15px;
    line-height: 1.72;
}

.kaf-articlesv2-featured__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0;
}

.kaf-articlesv2-featured__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.08);
    color: var(--art-teal);
    font-size: 12px;
    font-weight: 820;
}

/* Toolbar */
.kaf-articlesv2-toolbar {
    padding: 32px 0 24px;
}

.kaf-articlesv2-toolbar__inner {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}

.kaf-articlesv2-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 7px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}

.kaf-articlesv2-filters button {
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.kaf-articlesv2-filters button.is-active {
    background: var(--art-green);
    color: #fff;
}

/* Cards */
.kaf-articlesv2-list {
    padding: 0 0 76px;
}

.kaf-articlesv2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.kaf-article-card {
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.065);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 80px rgba(15, 23, 42, 0.11);
}

.kaf-article-card.is-highlight {
    border-color: rgba(245, 158, 11, 0.38);
}

.kaf-article-card.is-hidden {
    display: none;
}

.kaf-article-card__media {
    position: relative;
    height: 210px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(245, 158, 11, 0.35),
            transparent 13rem
        ),
        linear-gradient(135deg, var(--art-teal), var(--art-green));
}

.kaf-article-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-article-card:hover .kaf-article-card__media img {
    transform: scale(1.06);
}

.kaf-article-card__fallback {
    height: 100%;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
}

.kaf-article-card__fallback span {
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 780;
}

.kaf-article-card__fallback strong {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kaf-article-card__media b {
    position: absolute;
    left: 18px;
    top: 18px;
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--art-green);
    font-size: 11px;
    font-weight: 850;
    box-shadow: 0 12px 26px rgba(5, 32, 17, 0.12);
}

.kaf-article-card__body {
    padding: 24px;
}

.kaf-article-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}

.kaf-article-card__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.08);
    color: var(--art-teal);
    font-size: 11px;
    line-height: 1;
    font-weight: 820;
}

.kaf-article-card h3 {
    margin: 0 0 10px;
    color: var(--art-green);
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 780;
}

.kaf-article-card__body > p {
    min-height: 74px;
    margin: 0 0 18px;
    color: var(--art-muted);
    font-size: 14px;
    line-height: 1.62;
    font-weight: 470;
}

.kaf-article-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
}

.kaf-article-card__tags span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f8fafb;
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
}

.kaf-article-card__body > a {
    color: var(--art-teal);
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
}

.kaf-article-card__body > a:hover {
    color: var(--art-orange);
}

/* Guide */
.kaf-articlesv2-guide {
    padding: 76px 0 92px;
    background: #fff;
}

.kaf-articlesv2-guide__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    padding: 36px 38px;
    border-radius: 36px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(245, 158, 11, 0.15),
            transparent 18rem
        ),
        #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.kaf-articlesv2-guide__steps {
    display: grid;
    gap: 10px;
    min-width: 220px;
}

.kaf-articlesv2-guide__steps span {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--art-green);
    font-size: 13px;
    font-weight: 850;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

/* Reveal */
[data-kaf-article-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-kaf-article-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1120px) {
    .kaf-articlesv2-featured__box,
    .kaf-articlesv2-toolbar__inner,
    .kaf-articlesv2-guide__box {
        display: block;
    }

    .kaf-articlesv2-featured__copy {
        padding: 24px 6px 8px;
    }

    .kaf-articlesv2-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kaf-articlesv2-filters,
    .kaf-articlesv2-guide__steps {
        width: fit-content;
        margin-top: 20px;
    }
}

@media (max-width: 720px) {
    .kaf-articlesv2-hero {
        min-height: 360px;
        padding: 126px 0 64px;
        border-radius: 0 0 30px 30px;
    }

    .kaf-articlesv2-hero h1 {
        font-size: 38px;
        line-height: 1.06;
    }

    .kaf-articlesv2-hero p {
        font-size: 15px;
        line-height: 1.68;
    }

    .kaf-articlesv2-grid {
        grid-template-columns: 1fr;
    }

    .kaf-article-card__body > p {
        min-height: auto;
    }

    .kaf-articlesv2-featured__media,
    .kaf-articlesv2-featured__media img,
    .kaf-articlesv2-featured__fallback {
        min-height: 280px;
    }

    .kaf-articlesv2-guide {
        padding: 58px 0 64px;
    }

    .kaf-articlesv2-guide__box {
        padding: 26px 20px;
        border-radius: 28px;
    }

    .kaf-articlesv2-filters {
        border-radius: 24px;
    }

    .kaf-articlesv2-filters button {
        height: 36px;
        padding: 0 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-kaf-article-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   ARTICLES — PAGINATION ADDON
   ========================================================= */

.kaf-articlesv2-toolbar__note {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.kaf-article-card.is-page-hidden,
.kaf-article-card.is-hidden {
    display: none !important;
}

.kaf-articlesv2-empty {
    display: none;
    margin-top: 22px;
    padding: 28px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
    text-align: center;
}

.kaf-articlesv2-empty.is-visible {
    display: block;
}

.kaf-articlesv2-empty strong,
.kaf-articlesv2-empty span {
    display: block;
}

.kaf-articlesv2-empty strong {
    color: #052011;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.kaf-articlesv2-empty span {
    margin-top: 8px;
    color: #64748b;
    font-size: 14px;
}

.kaf-articlesv2-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 34px;
}

.kaf-articlesv2-pagination.is-hidden {
    display: none;
}

.kaf-articlesv2-pagination button {
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
    transition:
        transform 0.22s ease,
        background 0.22s ease,
        color 0.22s ease;
}

.kaf-articlesv2-pagination button:hover:not(:disabled) {
    transform: translateY(-2px);
}

.kaf-articlesv2-pagination button.is-active {
    background: #052011;
    color: #fff;
    border-color: #052011;
}

.kaf-articlesv2-pagination button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

/* =========================================================
   ARTICLE DETAIL — PROFESSIONAL READING PAGE
   ========================================================= */

.kaf-articledetail {
    --ad-green: #052011;
    --ad-teal: #076666;
    --ad-orange: #f59e0b;
    --ad-muted: #4b5563;
    background: #f8fafb;
    color: var(--ad-green);
    overflow: hidden;
}

.kaf-articledetail-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--ad-teal);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-articledetail-hero {
    position: relative;
    padding: 154px 0 86px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.88) 0%,
            rgba(7, 102, 102, 0.68) 48%,
            rgba(245, 158, 11, 0.24) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--articleDetailHeroBg) center center / cover no-repeat;
    border-radius: 0 0 42px 42px;
}

.kaf-articledetail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
}

.kaf-articledetail-hero .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-articledetail-hero__content {
    max-width: 940px;
}

.kaf-articledetail-crumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.96);
    color: #fff;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.24);
}

.kaf-articledetail-crumb a,
.kaf-articledetail-crumb span {
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 650;
}

.kaf-articledetail-hero .kaf-articledetail-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-articledetail-hero .kaf-articledetail-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--ad-orange);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}

.kaf-articledetail-hero h1 {
    max-width: 930px;
    margin: 18px 0 18px;
    color: #fff;
    font-size: clamp(42px, 5.3vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.05em;
    font-weight: 760;
    text-wrap: balance;
}

.kaf-articledetail-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.68;
    font-weight: 470;
}

.kaf-articledetail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}

.kaf-articledetail-meta span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    font-weight: 760;
}

.kaf-articledetail-main {
    padding: 72px 0 90px;
}

.kaf-articledetail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 34px;
    align-items: start;
}

.kaf-articledetail-article {
    overflow: hidden;
    border-radius: 38px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.kaf-articledetail-cover {
    min-height: 430px;
    background:
        radial-gradient(
            circle at 76% 18%,
            rgba(245, 158, 11, 0.34),
            transparent 13rem
        ),
        linear-gradient(135deg, var(--ad-teal), var(--ad-green));
    overflow: hidden;
}

.kaf-articledetail-cover img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
}

.kaf-articledetail-cover__fallback {
    min-height: 430px;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
}

.kaf-articledetail-cover__fallback span {
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.82;
}

.kaf-articledetail-cover__fallback strong {
    margin-top: 8px;
    font-size: 46px;
    line-height: 1;
    letter-spacing: -0.055em;
}

.kaf-articledetail-body {
    max-width: 780px;
    margin: 0 auto;
    padding: 48px 34px 56px;
}

.kaf-articledetail-lead {
    margin: 0 0 28px;
    color: #243447;
    font-size: 21px;
    line-height: 1.7;
    letter-spacing: -0.015em;
    font-weight: 520;
}

.kaf-articledetail-summarybox {
    margin: 0 0 38px;
    padding: 24px;
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(245, 158, 11, 0.16),
            transparent 18rem
        ),
        #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-articledetail-summarybox span {
    display: inline-flex;
    margin-bottom: 14px;
    color: var(--ad-teal);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-articledetail-summarybox ul,
.kaf-articledetail-contentblock ul {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kaf-articledetail-summarybox li,
.kaf-articledetail-contentblock li {
    position: relative;
    padding-left: 24px;
    color: #334155;
    font-size: 15px;
    line-height: 1.62;
    font-weight: 560;
}

.kaf-articledetail-summarybox li::before,
.kaf-articledetail-contentblock li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--ad-orange);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}

.kaf-articledetail-contentblock {
    margin-top: 40px;
}

.kaf-articledetail-contentblock h2 {
    margin: 0 0 14px;
    color: var(--ad-green);
    font-size: clamp(29px, 3vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.045em;
    font-weight: 760;
}

.kaf-articledetail-contentblock p {
    margin: 0;
    color: #334155;
    font-size: 17px;
    line-height: 1.85;
    font-weight: 470;
}

.kaf-articledetail-contentblock ul {
    margin-top: 18px;
}

.kaf-articledetail-callout {
    margin-top: 46px;
    padding: 28px;
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 88% 0%,
            rgba(245, 158, 11, 0.24),
            transparent 16rem
        ),
        linear-gradient(135deg, #052011, #076666);
    color: #fff;
}

.kaf-articledetail-callout span {
    display: inline-flex;
    margin-bottom: 12px;
    color: #fde68a;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-articledetail-callout p {
    max-width: 620px;
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 15px;
    line-height: 1.72;
}

.kaf-articledetail-callout a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--ad-orange);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
}

.kaf-articledetail-sidebar {
    position: sticky;
    top: 104px;
    display: grid;
    gap: 16px;
}

.kaf-articledetail-sidecard {
    padding: 24px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}

.kaf-articledetail-sidecard h3 {
    margin: 14px 0 14px;
    color: var(--ad-green);
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.04em;
    font-weight: 760;
}

.kaf-articledetail-sidecard p {
    margin: 0 0 16px;
    color: var(--ad-muted);
    font-size: 14px;
    line-height: 1.65;
}

.kaf-articledetail-sidecard ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kaf-articledetail-sidecard li {
    padding: 14px;
    border-radius: 18px;
    background: #f8fafb;
}

.kaf-articledetail-sidecard li b,
.kaf-articledetail-sidecard li span {
    display: block;
}

.kaf-articledetail-sidecard li b {
    margin-bottom: 5px;
    color: var(--ad-green);
    font-size: 12px;
    font-weight: 850;
}

.kaf-articledetail-sidecard li span {
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.kaf-articledetail-sidecard a {
    color: var(--ad-teal);
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
}

.kaf-articledetail-related {
    padding: 0 0 92px;
}

.kaf-articledetail-section-head {
    max-width: 760px;
    margin-bottom: 30px;
}

.kaf-articledetail-section-head h2 {
    margin: 14px 0 0;
    color: var(--ad-green);
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.052em;
    font-weight: 760;
}

.kaf-articledetail-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.kaf-articledetail-related__grid article {
    overflow: hidden;
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.06);
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-articledetail-related__grid article:hover {
    transform: translateY(-7px);
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.11);
}

.kaf-articledetail-related__media {
    height: 180px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(245, 158, 11, 0.35),
            transparent 13rem
        ),
        linear-gradient(135deg, var(--ad-teal), var(--ad-green));
}

.kaf-articledetail-related__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kaf-articledetail-related__media span {
    height: 100%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 760;
}

.kaf-articledetail-related__body {
    padding: 24px;
}

.kaf-articledetail-related__body > span {
    display: inline-flex;
    margin-bottom: 12px;
    color: var(--ad-teal);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-articledetail-related__body h3 {
    margin: 0 0 10px;
    color: var(--ad-green);
    font-size: 22px;
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-weight: 760;
}

.kaf-articledetail-related__body p {
    margin: 0 0 18px;
    color: var(--ad-muted);
    font-size: 14px;
    line-height: 1.62;
}

.kaf-articledetail-related__body a {
    color: var(--ad-teal);
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
}

[data-kaf-article-detail-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-kaf-article-detail-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1120px) {
    .kaf-articledetail-layout {
        grid-template-columns: 1fr;
    }

    .kaf-articledetail-sidebar {
        position: static;
        grid-template-columns: repeat(2, 1fr);
    }

    .kaf-articledetail-related__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .kaf-articledetail-hero {
        padding: 126px 0 58px;
        border-radius: 0 0 30px 30px;
    }

    .kaf-articledetail-hero h1 {
        font-size: 38px;
        line-height: 1.06;
    }

    .kaf-articledetail-hero p {
        font-size: 15px;
        line-height: 1.68;
    }

    .kaf-articledetail-main {
        padding: 56px 0 64px;
    }

    .kaf-articledetail-cover,
    .kaf-articledetail-cover img,
    .kaf-articledetail-cover__fallback {
        min-height: 280px;
    }

    .kaf-articledetail-body {
        padding: 34px 20px 40px;
    }

    .kaf-articledetail-lead {
        font-size: 18px;
    }

    .kaf-articledetail-contentblock h2 {
        font-size: 28px;
    }

    .kaf-articledetail-contentblock p {
        font-size: 16px;
        line-height: 1.78;
    }

    .kaf-articledetail-sidebar {
        grid-template-columns: 1fr;
    }

    .kaf-articledetail-related {
        padding-bottom: 64px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-kaf-article-detail-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   ARTICLE DETAIL ENTERPRISE — READING EXPERIENCE
   ========================================================= */

.kaf-articledetail-pro .kaf-articledetail-main {
    padding-top: 82px;
}

.kaf-reading-topbar {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--kaf-header-h, 86px);
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 8px max(18px, calc((100vw - 1180px) / 2));
    background: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translateY(-120%);
    opacity: 0;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-reading-topbar.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.kaf-reading-topbar__track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.1);
}

.kaf-reading-topbar__track span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #076666 0%, #f59e0b 100%);
    box-shadow: 0 0 28px rgba(245, 158, 11, 0.22);
    transition: width 0.18s linear;
}

.kaf-reading-topbar__meta {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.kaf-reading-topbar__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: #fff;
    color: #052011;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.kaf-articledetail-reading-intro {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 30px;
}

.kaf-articledetail-reading-intro div {
    padding: 16px;
    border-radius: 22px;
    background: #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-articledetail-reading-intro span,
.kaf-articledetail-reading-intro strong {
    display: block;
}

.kaf-articledetail-reading-intro span {
    margin-bottom: 7px;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-articledetail-reading-intro strong {
    color: #052011;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.035em;
    font-weight: 820;
}

.kaf-articledetail-reader {
    padding: 24px;
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(245, 158, 11, 0.16),
            transparent 16rem
        ),
        #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.075);
}

.kaf-articledetail-reader__ring {
    position: relative;
    width: 124px;
    height: 124px;
    margin: 0 auto 18px;
}

.kaf-articledetail-reader__ring svg {
    width: 124px;
    height: 124px;
    transform: rotate(-90deg);
}

.kaf-articledetail-reader__ring circle {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}

.kaf-articledetail-reader__ring circle:first-child {
    stroke: rgba(7, 102, 102, 0.1);
}

.kaf-articledetail-reader__ring circle:last-child {
    stroke: #f59e0b;
    stroke-dasharray: 327;
    stroke-dashoffset: 327;
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.25));
    transition: stroke-dashoffset 0.18s linear;
}

.kaf-articledetail-reader__ring strong {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #052011;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 850;
}

.kaf-articledetail-reader__copy {
    text-align: center;
}

.kaf-articledetail-reader__copy span {
    display: block;
    color: #052011;
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 800;
}

.kaf-articledetail-reader__copy p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
}

.kaf-articledetail-reader__slider {
    height: 9px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.1);
}

.kaf-articledetail-reader__slider span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #076666 0%, #f59e0b 100%);
    transition: width 0.18s linear;
}

.kaf-articledetail-toc nav {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.kaf-articledetail-toc a {
    position: relative;
    display: block;
    padding: 12px 12px 12px 18px;
    border-radius: 16px;
    background: #f8fafb;
    color: #475569;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.38;
    font-weight: 730;
    transition:
        background 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease;
}

.kaf-articledetail-toc a::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 13px;
    bottom: 13px;
    width: 4px;
    border-radius: 999px;
    background: transparent;
}

.kaf-articledetail-toc a.is-active {
    background: rgba(7, 102, 102, 0.09);
    color: #052011;
    transform: translateX(2px);
}

.kaf-articledetail-toc a.is-active::before {
    background: #f59e0b;
}

.kaf-articledetail-contentblock {
    position: relative;
    scroll-margin-top: 130px;
    padding-top: 6px;
}

.kaf-articledetail-contentblock small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: #076666;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
}

.kaf-articledetail-contentblock h2 {
    max-width: 720px;
}

.kaf-articledetail-contentblock p {
    max-width: 720px;
}

.kaf-articledetail-complete {
    margin-top: 50px;
    padding: 28px;
    border-radius: 34px;
    background:
        radial-gradient(
            circle at 88% 0%,
            rgba(245, 158, 11, 0.24),
            transparent 18rem
        ),
        linear-gradient(135deg, #052011 0%, #076666 100%);
    color: #fff;
    overflow: hidden;
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-articledetail-complete.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.kaf-articledetail-complete__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.kaf-articledetail-complete__head span {
    display: inline-flex;
    margin-bottom: 12px;
    color: #fde68a;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-articledetail-complete__head h2 {
    max-width: 560px;
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.02;
    letter-spacing: -0.052em;
    font-weight: 760;
}

.kaf-articledetail-complete__head p {
    max-width: 540px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.62;
}

.kaf-articledetail-complete__controls {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.kaf-articledetail-complete__controls button {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        transform 0.22s ease,
        background 0.22s ease;
}

.kaf-articledetail-complete__controls button:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.18);
}

.kaf-articledetail-complete__slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 280px);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: thin;
}

.kaf-articledetail-complete__item {
    scroll-snap-align: start;
    display: block;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.25s ease;
}

.kaf-articledetail-complete__item:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.17);
}

.kaf-articledetail-complete__item > div {
    height: 126px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.kaf-articledetail-complete__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kaf-articledetail-complete__item > div span {
    height: 100%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 22px;
    font-weight: 760;
    letter-spacing: -0.04em;
}

.kaf-articledetail-complete__item b,
.kaf-articledetail-complete__item strong {
    display: block;
    padding-left: 16px;
    padding-right: 16px;
}

.kaf-articledetail-complete__item b {
    padding-top: 16px;
    color: #fde68a;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-articledetail-complete__item strong {
    padding-top: 8px;
    padding-bottom: 18px;
    color: #fff;
    font-size: 17px;
    line-height: 1.22;
    letter-spacing: -0.035em;
}

@media (max-width: 1120px) {
    .kaf-articledetail-pro .kaf-articledetail-sidebar {
        grid-template-columns: 1fr;
    }

    .kaf-articledetail-reader {
        display: grid;
        grid-template-columns: 124px 1fr;
        gap: 18px;
        align-items: center;
    }

    .kaf-articledetail-reader__ring {
        margin: 0;
    }

    .kaf-articledetail-reader__copy {
        text-align: left;
    }

    .kaf-articledetail-reader__slider {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .kaf-reading-topbar {
        top: var(--kaf-header-h, 74px);
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 7px 16px;
    }

    .kaf-reading-topbar__meta {
        justify-content: space-between;
    }

    .kaf-reading-topbar__meta span {
        min-height: 26px;
        font-size: 10.5px;
    }

    .kaf-articledetail-reading-intro {
        grid-template-columns: 1fr;
    }

    .kaf-articledetail-reader {
        display: block;
    }

    .kaf-articledetail-reader__ring {
        margin: 0 auto 18px;
    }

    .kaf-articledetail-reader__copy {
        text-align: center;
    }

    .kaf-articledetail-complete {
        padding: 22px;
        border-radius: 28px;
    }

    .kaf-articledetail-complete__head {
        display: block;
    }

    .kaf-articledetail-complete__controls {
        margin-top: 18px;
    }

    .kaf-articledetail-complete__slider {
        grid-auto-columns: minmax(210px, 78vw);
    }
}

/* =========================================================
   SAFE FIX — ARTICLE READING BAR
   Jangan utak-atik header/menu. Progress bar tidak boleh menangkap klik.
   ========================================================= */

.kaf-reading-topbar {
    pointer-events: none !important;
    z-index: 60 !important;
}

.kaf-reading-topbar * {
    pointer-events: none !important;
}

/* =========================================================
   CHECK AREA PAGE V2 — KAFNET ENTERPRISE
   ========================================================= */

.kaf-areav2 {
    --area-green: #052011;
    --area-teal: #076666;
    --area-orange: #f59e0b;
    --area-muted: #4b5563;
    background: #f8fafb;
    color: var(--area-green);
    overflow: hidden;
}

.kaf-areav2-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--area-teal);
    font-size: 11px;
    line-height: 1;
    font-weight: 820;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-areav2-btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 999px;
    border: 0;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.24s ease;
}

.kaf-areav2-btn:hover {
    transform: translateY(-2px);
}

.kaf-areav2-btn--accent {
    background: var(--area-orange);
    color: #fff;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24);
}

.kaf-areav2-btn--glass {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-areav2-btn--dark {
    background: var(--area-green);
    color: #fff;
    box-shadow: 0 16px 34px rgba(5, 32, 17, 0.16);
}

/* Hero */
.kaf-areav2-hero {
    position: relative;
    padding: 156px 0 84px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.88) 0%,
            rgba(7, 102, 102, 0.66) 48%,
            rgba(245, 158, 11, 0.24) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--areaHeroBg) center center / cover no-repeat;
    border-radius: 0 0 42px 42px;
}

.kaf-areav2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
}

.kaf-areav2-hero .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-areav2-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 420px);
    gap: 46px;
    align-items: center;
}

.kaf-areav2-hero__copy {
    max-width: 880px;
}

.kaf-areav2-crumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.96);
    color: #fff;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.24);
}

.kaf-areav2-crumb a,
.kaf-areav2-crumb span {
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 650;
}

.kaf-areav2-hero .kaf-areav2-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-areav2-hero .kaf-areav2-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--area-orange);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}

.kaf-areav2-hero h1 {
    max-width: 880px;
    margin: 18px 0 18px;
    color: #fff;
    font-size: clamp(44px, 5.6vw, 78px);
    line-height: 1.01;
    letter-spacing: -0.052em;
    font-weight: 760;
    text-wrap: balance;
}

.kaf-areav2-hero p {
    max-width: 700px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.68;
    font-weight: 470;
}

.kaf-areav2-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.kaf-areav2-mapcard {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border-radius: 38px;
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(245, 158, 11, 0.32),
            transparent 8rem
        ),
        radial-gradient(
            circle at 50% 48%,
            rgba(255, 255, 255, 0.18),
            transparent 13rem
        ),
        rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.kaf-areav2-mapcard__pulse {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--area-orange);
    box-shadow:
        0 0 0 12px rgba(245, 158, 11, 0.18),
        0 0 42px rgba(245, 158, 11, 0.44);
    transform: translate(-50%, -50%);
    z-index: 2;
}

.kaf-areav2-mapcard__rings span {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 110px;
    height: 110px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    transform: translate(-50%, -50%);
    animation: kafAreaRing 3.6s ease-in-out infinite;
}

.kaf-areav2-mapcard__rings span:nth-child(2) {
    width: 190px;
    height: 190px;
    animation-delay: 0.45s;
}

.kaf-areav2-mapcard__rings span:nth-child(3) {
    width: 285px;
    height: 285px;
    animation-delay: 0.9s;
}

@keyframes kafAreaRing {
    0%,
    100% {
        opacity: 0.52;
        transform: translate(-50%, -50%) scale(0.96);
    }
    50% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(1.04);
    }
}

.kaf-areav2-mapcard__content {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 26px;
    padding: 22px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-areav2-mapcard__content span {
    display: inline-flex;
    margin-bottom: 9px;
    color: #fde68a;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-areav2-mapcard__content strong {
    display: block;
    color: #fff;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 820;
}

.kaf-areav2-mapcard__content p {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.55;
}

/* Search */
.kaf-areav2-search {
    padding: 54px 0 26px;
}

.kaf-areav2-search__box {
    padding: 30px;
    border-radius: 38px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.kaf-areav2-search__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.kaf-areav2-search__head h2,
.kaf-areav2-section-head h2,
.kaf-areav2-request__copy h2 {
    margin: 14px 0 10px;
    color: var(--area-green);
    font-size: clamp(32px, 3.8vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.052em;
    font-weight: 760;
}

.kaf-areav2-search__head p,
.kaf-areav2-section-head p,
.kaf-areav2-request__copy p {
    max-width: 680px;
    margin: 0;
    color: var(--area-muted);
    font-size: 15px;
    line-height: 1.72;
}

.kaf-areav2-search__status {
    min-width: 150px;
    padding: 18px;
    border-radius: 24px;
    background: #f8fafb;
    text-align: center;
}

.kaf-areav2-search__status strong,
.kaf-areav2-search__status span {
    display: block;
}

.kaf-areav2-search__status strong {
    color: var(--area-green);
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 820;
}

.kaf-areav2-search__status span {
    margin-top: 7px;
    color: #64748b;
    font-size: 12px;
    font-weight: 760;
}

.kaf-areav2-search__control {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 8px;
    border-radius: 999px;
    background: #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-areav2-search__control input {
    width: 100%;
    height: 54px;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0 18px;
    color: var(--area-green);
    font-size: 15px;
    font-weight: 650;
}

.kaf-areav2-search__control input::placeholder {
    color: #94a3b8;
}

.kaf-areav2-search__control button {
    min-width: 104px;
    border: 0;
    border-radius: 999px;
    background: var(--area-green);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.kaf-areav2-popular {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.kaf-areav2-popular span {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}

.kaf-areav2-popular button {
    min-height: 34px;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.08);
    color: var(--area-teal);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.kaf-areav2-resultline {
    margin-top: 16px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 650;
}

/* Area cards */
.kaf-areav2-list {
    padding: 20px 0 72px;
}

.kaf-areav2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.kaf-area-card {
    display: flex;
    flex-direction: column;
    min-height: 390px;
    padding: 24px;
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.065);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.06);
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-area-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 80px rgba(15, 23, 42, 0.11);
}

.kaf-area-card.is-hidden {
    display: none;
}

.kaf-area-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 26px;
}

.kaf-area-card__top span,
.kaf-area-card__top b {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
}

.kaf-area-card__top span {
    background: rgba(7, 102, 102, 0.09);
    color: var(--area-teal);
}

.kaf-area-card__top b {
    background: rgba(245, 158, 11, 0.13);
    color: #b45309;
}

.kaf-area-card h3 {
    margin: 0 0 8px;
    color: var(--area-green);
    font-size: 31px;
    line-height: 1.04;
    letter-spacing: -0.05em;
    font-weight: 790;
}

.kaf-area-card > p {
    margin: 0 0 18px;
    color: var(--area-muted);
    font-size: 14px;
    line-height: 1.55;
}

.kaf-area-card__villages {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 20px;
}

.kaf-area-card__villages span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #f8fafb;
    color: #64748b;
    font-size: 11px;
    font-weight: 760;
}

.kaf-area-card__meta {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.kaf-area-card__meta div {
    padding: 14px;
    border-radius: 18px;
    background: #f8fafb;
}

.kaf-area-card__meta small,
.kaf-area-card__meta strong {
    display: block;
}

.kaf-area-card__meta small {
    margin-bottom: 5px;
    color: #64748b;
    font-size: 11px;
    font-weight: 820;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.kaf-area-card__meta strong {
    color: var(--area-green);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 730;
}

.kaf-area-card > a {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    border-radius: 999px;
    background: var(--area-green);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
}

/* Empty */
.kaf-areav2-empty {
    display: none;
    margin-top: 24px;
    padding: 34px;
    border-radius: 38px;
    background:
        radial-gradient(
            circle at 88% 0%,
            rgba(245, 158, 11, 0.16),
            transparent 18rem
        ),
        #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.kaf-areav2-empty.is-visible {
    display: grid;
    grid-template-columns: 82px 1fr auto;
    gap: 24px;
    align-items: center;
}

.kaf-areav2-empty__icon {
    width: 82px;
    height: 82px;
    border-radius: 26px;
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(245, 158, 11, 0.55),
            transparent 60%
        ),
        linear-gradient(135deg, var(--area-teal), var(--area-green));
    display: grid;
    place-items: center;
}

.kaf-areav2-empty__icon span {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.18);
}

.kaf-areav2-empty__copy span {
    display: inline-flex;
    margin-bottom: 9px;
    color: var(--area-teal);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-areav2-empty__copy h2 {
    margin: 0 0 10px;
    color: var(--area-green);
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.04;
    letter-spacing: -0.05em;
    font-weight: 760;
}

.kaf-areav2-empty__copy p {
    max-width: 680px;
    margin: 0;
    color: var(--area-muted);
    font-size: 14px;
    line-height: 1.65;
}

.kaf-areav2-empty__actions {
    display: grid;
    gap: 10px;
    min-width: 210px;
}

/* Request */
.kaf-areav2-request {
    display: none;
    padding: 0 0 86px;
}

.kaf-areav2-request.is-visible {
    display: block;
}

.kaf-areav2-request__box {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    gap: 34px;
    align-items: start;
    padding: 36px;
    border-radius: 40px;
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(245, 158, 11, 0.14),
            transparent 18rem
        ),
        #052011;
    color: #fff;
    overflow: hidden;
}

.kaf-areav2-request__copy .kaf-areav2-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: #fde68a;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.kaf-areav2-request__copy h2 {
    color: #fff;
}

.kaf-areav2-request__copy p {
    color: rgba(255, 255, 255, 0.78);
}

.kaf-areav2-request__flow {
    display: grid;
    gap: 10px;
    max-width: 320px;
    margin-top: 26px;
}

.kaf-areav2-request__flow span {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    font-weight: 800;
}

.kaf-areav2-form {
    display: grid;
    gap: 13px;
    padding: 22px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-areav2-form label {
    display: grid;
    gap: 8px;
}

.kaf-areav2-form label span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 820;
}

.kaf-areav2-form input,
.kaf-areav2-form textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--area-green);
    outline: 0;
    padding: 14px 15px;
    font-size: 14px;
    font-weight: 650;
}

.kaf-areav2-form textarea {
    resize: vertical;
}

.kaf-areav2-form button {
    min-height: 50px;
    border: 0;
    border-radius: 999px;
    background: var(--area-orange);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 18px 38px rgba(245, 158, 11, 0.26);
}

.kaf-areav2-form p {
    margin: 2px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    line-height: 1.55;
}

/* Process */
.kaf-areav2-process {
    padding: 80px 0 92px;
    background: #fff;
}

.kaf-areav2-section-head {
    max-width: 820px;
    margin-bottom: 30px;
}

.kaf-areav2-process__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.kaf-areav2-process__grid article {
    min-height: 230px;
    padding: 28px;
    border-radius: 30px;
    background: #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-areav2-process__grid article > span {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--area-teal);
    font-size: 12px;
    font-weight: 850;
}

.kaf-areav2-process__grid h3 {
    margin: 0 0 10px;
    color: var(--area-green);
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 780;
}

.kaf-areav2-process__grid p {
    margin: 0;
    color: var(--area-muted);
    font-size: 14px;
    line-height: 1.62;
}

/* Reveal */
[data-kaf-area-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-kaf-area-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1120px) {
    .kaf-areav2-hero__grid,
    .kaf-areav2-request__box {
        grid-template-columns: 1fr;
    }

    .kaf-areav2-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kaf-areav2-empty.is-visible {
        grid-template-columns: 1fr;
    }

    .kaf-areav2-empty__actions {
        min-width: 0;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .kaf-areav2-hero {
        padding: 126px 0 62px;
        border-radius: 0 0 30px 30px;
    }

    .kaf-areav2-hero h1 {
        font-size: 38px;
        line-height: 1.06;
    }

    .kaf-areav2-hero p {
        font-size: 15px;
        line-height: 1.68;
    }

    .kaf-areav2-mapcard {
        min-height: 320px;
        border-radius: 30px;
    }

    .kaf-areav2-search__box,
    .kaf-areav2-empty,
    .kaf-areav2-request__box {
        padding: 24px 20px;
        border-radius: 30px;
    }

    .kaf-areav2-search__head {
        display: block;
    }

    .kaf-areav2-search__status {
        margin-top: 18px;
        text-align: left;
    }

    .kaf-areav2-search__control {
        grid-template-columns: 1fr;
        border-radius: 26px;
    }

    .kaf-areav2-search__control button {
        height: 46px;
    }

    .kaf-areav2-grid,
    .kaf-areav2-process__grid,
    .kaf-areav2-empty__actions {
        grid-template-columns: 1fr;
    }

    .kaf-area-card {
        min-height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-kaf-area-reveal],
    .kaf-areav2-mapcard__rings span {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   HELP PAGE — ANISA FAQ CHAT
   ========================================================= */

.kaf-helpai {
    --help-green: #052011;
    --help-teal: #076666;
    --help-orange: #f59e0b;
    --help-muted: #4b5563;
    background: #f8fafb;
    color: var(--help-green);
    overflow: hidden;
}

.kaf-helpai-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--help-teal);
    font-size: 11px;
    line-height: 1;
    font-weight: 820;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-helpai-btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 999px;
    text-decoration: none;
    border: 0;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-helpai-btn:hover {
    transform: translateY(-2px);
}

.kaf-helpai-btn--accent {
    background: var(--help-orange);
    color: #fff;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24);
}

.kaf-helpai-btn--glass {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Hero */
.kaf-helpai-hero {
    position: relative;
    padding: 156px 0 84px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.88) 0%,
            rgba(7, 102, 102, 0.66) 48%,
            rgba(245, 158, 11, 0.24) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--helpHeroBg) center center / cover no-repeat;
    border-radius: 0 0 42px 42px;
}

.kaf-helpai-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
}

.kaf-helpai-hero .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-helpai-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 440px);
    gap: 46px;
    align-items: center;
}

.kaf-helpai-hero__copy {
    max-width: 880px;
}

.kaf-helpai-crumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.96);
    color: #fff;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.24);
}

.kaf-helpai-crumb a,
.kaf-helpai-crumb span {
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 650;
}

.kaf-helpai-hero .kaf-helpai-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-helpai-hero .kaf-helpai-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--help-orange);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}

.kaf-helpai-hero h1 {
    max-width: 820px;
    margin: 18px 0 18px;
    color: #fff;
    font-size: clamp(46px, 5.8vw, 82px);
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-weight: 760;
    text-wrap: balance;
}

.kaf-helpai-hero p {
    max-width: 710px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.68;
    font-weight: 470;
}

.kaf-helpai-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* Bot Card */
.kaf-helpai-botcard {
    position: relative;
    min-height: 440px;
    padding: 26px;
    border-radius: 40px;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(245, 158, 11, 0.32),
            transparent 10rem
        ),
        rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

.kaf-helpai-botcard__avatar {
    width: 148px;
    height: 148px;
    margin: 24px auto 24px;
    border-radius: 42px;
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(245, 158, 11, 0.55),
            transparent 60%
        ),
        linear-gradient(135deg, var(--help-teal), var(--help-green));
    display: grid;
    place-items: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
    animation: kafAnisaFloat 4s ease-in-out infinite;
    overflow: hidden;
}

.kaf-helpai-botcard__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kaf-helpai-botcard__avatar span {
    color: #fff;
    font-size: 68px;
    line-height: 1;
    font-weight: 820;
}

@keyframes kafAnisaFloat {
    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }
    50% {
        transform: translateY(-10px) rotate(1.5deg);
    }
}

.kaf-helpai-botcard__bubble {
    padding: 22px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-helpai-botcard__bubble span {
    display: inline-flex;
    margin-bottom: 8px;
    color: #fde68a;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-helpai-botcard__bubble strong {
    display: block;
    color: #fff;
    font-size: 26px;
    line-height: 1.08;
    letter-spacing: -0.045em;
    font-weight: 760;
}

.kaf-helpai-botcard__bubble p {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 14px;
    line-height: 1.58;
}

.kaf-helpai-botcard__signal {
    position: absolute;
    left: 26px;
    top: 26px;
    display: flex;
    gap: 6px;
}

.kaf-helpai-botcard__signal span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #fff;
    opacity: 0.4;
    animation: kafAnisaSignal 1.5s ease-in-out infinite;
}

.kaf-helpai-botcard__signal span:nth-child(2) {
    animation-delay: 0.16s;
}

.kaf-helpai-botcard__signal span:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes kafAnisaSignal {
    0%,
    100% {
        opacity: 0.32;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* Chat Layout */
.kaf-helpai-chatsection {
    padding: 62px 0 84px;
}

.kaf-helpai-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 24px;
    align-items: start;
}

.kaf-helpai-chat {
    overflow: hidden;
    border-radius: 40px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.kaf-helpai-chat__head {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 18px;
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(245, 158, 11, 0.15),
            transparent 18rem
        ),
        #052011;
    color: #fff;
}

.kaf-helpai-chat__avatar,
.kaf-helpai-message__avatar {
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(245, 158, 11, 0.55),
            transparent 60%
        ),
        linear-gradient(135deg, var(--help-teal), var(--help-green));
    display: grid;
    place-items: center;
    overflow: hidden;
}

.kaf-helpai-chat__avatar {
    width: 54px;
    height: 54px;
}

.kaf-helpai-chat__avatar img,
.kaf-helpai-message__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kaf-helpai-chat__avatar span,
.kaf-helpai-message__avatar span {
    color: #fff;
    font-weight: 850;
}

.kaf-helpai-chat__head strong,
.kaf-helpai-chat__head span {
    display: block;
}

.kaf-helpai-chat__head strong {
    font-size: 18px;
    line-height: 1;
    font-weight: 820;
}

.kaf-helpai-chat__head span {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 650;
}

.kaf-helpai-chat__head b {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fde68a;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
}

.kaf-helpai-chat__body {
    height: min(620px, 68vh);
    overflow-y: auto;
    padding: 22px;
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(7, 102, 102, 0.06),
            transparent 20rem
        ),
        #f8fafb;
}

.kaf-helpai-message {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.kaf-helpai-message--bot {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    max-width: 92%;
}

.kaf-helpai-message--user {
    display: flex;
    justify-content: flex-end;
}

.kaf-helpai-message__avatar {
    width: 38px;
    height: 38px;
    border-radius: 14px;
}

.kaf-helpai-message__bubble {
    padding: 15px 16px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}

.kaf-helpai-message--user .kaf-helpai-message__bubble {
    max-width: 82%;
    background: var(--help-green);
    color: #fff;
    border-color: var(--help-green);
}

.kaf-helpai-message__bubble p {
    margin: 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.65;
}

.kaf-helpai-message--user .kaf-helpai-message__bubble p {
    color: rgba(255, 255, 255, 0.92);
}

.kaf-helpai-answer {
    margin-top: 12px;
    padding: 16px;
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(245, 158, 11, 0.14),
            transparent 14rem
        ),
        #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-helpai-answer > span {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--help-teal);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-helpai-answer h3 {
    margin: 0 0 8px;
    color: var(--help-green);
    font-size: 20px;
    line-height: 1.12;
    letter-spacing: -0.035em;
    font-weight: 780;
}

.kaf-helpai-answer p {
    margin: 0 0 12px;
    color: #475569;
    font-size: 13.5px;
    line-height: 1.62;
}

.kaf-helpai-answer ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
}

.kaf-helpai-answer li {
    color: #334155;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 560;
}

.kaf-helpai-answer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.kaf-helpai-answer__actions a,
.kaf-helpai-answer__actions button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    border: 0;
    text-decoration: none;
    background: var(--help-green);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    cursor: pointer;
}

.kaf-helpai-answer__actions a:last-child {
    background: var(--help-orange);
}

.kaf-helpai-resolution {
    margin-top: 14px;
    padding: 16px;
    border-radius: 22px;
    background: #052011;
    color: #fff;
}

.kaf-helpai-resolution strong {
    display: block;
    margin-bottom: 10px;
    color: #fff;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 820;
}

.kaf-helpai-resolution__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kaf-helpai-resolution button,
.kaf-helpai-resolution a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    cursor: pointer;
}

.kaf-helpai-resolution a {
    background: var(--help-orange);
    border-color: var(--help-orange);
}

.kaf-helpai-typing {
    display: inline-flex;
    gap: 4px;
}

.kaf-helpai-typing span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #94a3b8;
    animation: kafHelpTyping 1s ease-in-out infinite;
}

.kaf-helpai-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.kaf-helpai-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes kafHelpTyping {
    0%,
    100% {
        opacity: 0.35;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.kaf-helpai-quick {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: #fff;
}

.kaf-helpai-quick span {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}

.kaf-helpai-quick button {
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.08);
    color: var(--help-teal);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.kaf-helpai-input {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 16px;
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-helpai-input input {
    width: 100%;
    height: 52px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    outline: 0;
    padding: 0 18px;
    background: #f8fafb;
    color: var(--help-green);
    font-size: 14px;
    font-weight: 650;
}

.kaf-helpai-input button {
    min-width: 104px;
    border: 0;
    border-radius: 999px;
    background: var(--help-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

/* Side */
.kaf-helpai-side {
    position: sticky;
    top: 104px;
    display: grid;
    gap: 16px;
}

.kaf-helpai-sidecard {
    padding: 24px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}

.kaf-helpai-sidecard h2 {
    margin: 14px 0 14px;
    color: var(--help-green);
    font-size: 28px;
    line-height: 1.06;
    letter-spacing: -0.045em;
    font-weight: 760;
}

.kaf-helpai-sidecard p {
    margin: 0 0 16px;
    color: var(--help-muted);
    font-size: 14px;
    line-height: 1.65;
}

.kaf-helpai-sidecard > a {
    color: var(--help-teal);
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
}

.kaf-helpai-topiclist {
    display: grid;
    gap: 9px;
}

.kaf-helpai-topiclist button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    border: 0;
    border-radius: 18px;
    background: #f8fafb;
    padding: 0 14px;
    cursor: pointer;
}

.kaf-helpai-topiclist span {
    color: #334155;
    font-size: 13px;
    font-weight: 780;
}

.kaf-helpai-topiclist b {
    min-width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    font-size: 11px;
    font-weight: 850;
}

/* FAQ */
.kaf-helpai-faq {
    padding: 82px 0 94px;
    background: #fff;
}

.kaf-helpai-section-head {
    max-width: 820px;
    margin-bottom: 30px;
}

.kaf-helpai-section-head h2 {
    margin: 14px 0 12px;
    color: var(--help-green);
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.052em;
    font-weight: 760;
}

.kaf-helpai-section-head p {
    max-width: 660px;
    margin: 0;
    color: var(--help-muted);
    font-size: 15px;
    line-height: 1.72;
}

.kaf-helpai-faq__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.kaf-helpai-faq__grid article {
    min-height: 245px;
    padding: 24px;
    border-radius: 30px;
    background: #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-helpai-faq__grid article > span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.08);
    color: var(--help-teal);
    font-size: 11px;
    font-weight: 850;
}

.kaf-helpai-faq__grid h3 {
    margin: 0 0 10px;
    color: var(--help-green);
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 770;
}

.kaf-helpai-faq__grid p {
    margin: 0 0 18px;
    color: var(--help-muted);
    font-size: 14px;
    line-height: 1.62;
}

.kaf-helpai-faq__grid button {
    border: 0;
    background: transparent;
    color: var(--help-teal);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    padding: 0;
}

/* Reveal */
[data-kaf-help-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-kaf-help-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1120px) {
    .kaf-helpai-hero__grid,
    .kaf-helpai-layout {
        grid-template-columns: 1fr;
    }

    .kaf-helpai-side {
        position: static;
        grid-template-columns: repeat(2, 1fr);
    }

    .kaf-helpai-faq__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .kaf-helpai-hero {
        padding: 126px 0 62px;
        border-radius: 0 0 30px 30px;
    }

    .kaf-helpai-hero h1 {
        font-size: 40px;
        line-height: 1.04;
    }

    .kaf-helpai-hero p {
        font-size: 15px;
        line-height: 1.68;
    }

    .kaf-helpai-botcard {
        min-height: auto;
        padding: 22px;
        border-radius: 30px;
    }

    .kaf-helpai-chatsection {
        padding: 46px 0 64px;
    }

    .kaf-helpai-chat {
        border-radius: 30px;
    }

    .kaf-helpai-chat__body {
        height: 560px;
        padding: 16px;
    }

    .kaf-helpai-message--bot {
        max-width: 100%;
    }

    .kaf-helpai-message--user .kaf-helpai-message__bubble {
        max-width: 92%;
    }

    .kaf-helpai-input {
        grid-template-columns: 1fr;
    }

    .kaf-helpai-input button {
        height: 48px;
    }

    .kaf-helpai-side,
    .kaf-helpai-faq__grid {
        grid-template-columns: 1fr;
    }

    .kaf-helpai-faq {
        padding: 60px 0 70px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-kaf-help-reveal],
    .kaf-helpai-botcard__avatar,
    .kaf-helpai-botcard__signal span,
    .kaf-helpai-typing span {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   HELP ANISA — COMPACT ENTERPRISE OVERRIDE
   Biar tidak terlalu besar, lebih clean dan rapi
   ========================================================= */

.kaf-helpai-hero {
    padding: 138px 0 64px !important;
    border-radius: 0 0 34px 34px !important;
}

.kaf-helpai-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 370px) !important;
    gap: 34px !important;
}

.kaf-helpai-hero h1 {
    max-width: 760px !important;
    font-size: clamp(36px, 4.4vw, 58px) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.045em !important;
}

.kaf-helpai-hero p {
    max-width: 640px !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
}

.kaf-helpai-crumb {
    margin-bottom: 22px !important;
    padding: 8px 14px !important;
}

.kaf-helpai-crumb a,
.kaf-helpai-crumb span {
    font-size: 12px !important;
}

.kaf-helpai-eyebrow {
    min-height: 28px !important;
    padding: 0 11px !important;
    font-size: 10px !important;
}

.kaf-helpai-btn {
    min-height: 44px !important;
    padding: 0 18px !important;
    font-size: 11px !important;
}

.kaf-helpai-hero__actions {
    margin-top: 24px !important;
    gap: 10px !important;
}

/* Bot card kanan hero dibuat lebih compact */
.kaf-helpai-botcard {
    min-height: 340px !important;
    padding: 20px !important;
    border-radius: 30px !important;
}

.kaf-helpai-botcard__avatar {
    width: 112px !important;
    height: 112px !important;
    margin: 14px auto 18px !important;
    border-radius: 32px !important;
}

.kaf-helpai-botcard__avatar span {
    font-size: 48px !important;
}

.kaf-helpai-botcard__bubble {
    padding: 17px !important;
    border-radius: 22px !important;
}

.kaf-helpai-botcard__bubble strong {
    font-size: 20px !important;
    line-height: 1.12 !important;
}

.kaf-helpai-botcard__bubble p {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
}

/* Layout chat lebih enterprise compact */
.kaf-helpai-chatsection {
    padding: 46px 0 68px !important;
}

.kaf-helpai-layout {
    grid-template-columns: minmax(0, 1fr) 310px !important;
    gap: 18px !important;
}

.kaf-helpai-chat {
    border-radius: 30px !important;
}

.kaf-helpai-chat__head {
    grid-template-columns: 46px 1fr auto !important;
    gap: 12px !important;
    padding: 14px 15px !important;
}

.kaf-helpai-chat__avatar {
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
}

.kaf-helpai-chat__head strong {
    font-size: 15px !important;
}

.kaf-helpai-chat__head span {
    font-size: 11px !important;
}

.kaf-helpai-chat__head b {
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
}

.kaf-helpai-chat__body {
    height: min(520px, 62vh) !important;
    padding: 16px !important;
}

/* Bubble chat dikecilkan */
.kaf-helpai-message {
    margin-bottom: 12px !important;
    gap: 8px !important;
}

.kaf-helpai-message--bot {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    max-width: 88% !important;
}

.kaf-helpai-message__avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 12px !important;
}

.kaf-helpai-message__bubble {
    padding: 12px 13px !important;
    border-radius: 18px !important;
}

.kaf-helpai-message__bubble p {
    font-size: 12.5px !important;
    line-height: 1.58 !important;
}

.kaf-helpai-message--user .kaf-helpai-message__bubble {
    max-width: 74% !important;
}

/* Card jawaban Anisa dibuat compact */
.kaf-helpai-answer {
    margin-top: 10px !important;
    padding: 13px !important;
    border-radius: 18px !important;
}

.kaf-helpai-answer > span {
    margin-bottom: 7px !important;
    font-size: 9.5px !important;
}

.kaf-helpai-answer h3 {
    margin-bottom: 7px !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
}

.kaf-helpai-answer p {
    margin-bottom: 9px !important;
    font-size: 12.3px !important;
    line-height: 1.56 !important;
}

.kaf-helpai-answer ol {
    gap: 6px !important;
    padding-left: 16px !important;
}

.kaf-helpai-answer li {
    font-size: 12.2px !important;
    line-height: 1.48 !important;
}

.kaf-helpai-answer__actions {
    gap: 7px !important;
    margin-top: 11px !important;
}

.kaf-helpai-answer__actions a,
.kaf-helpai-answer__actions button {
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 10.5px !important;
}

/* Pertanyaan apakah selesai dibuat lebih kecil */
.kaf-helpai-resolution {
    margin-top: 11px !important;
    padding: 13px !important;
    border-radius: 18px !important;
}

.kaf-helpai-resolution strong {
    margin-bottom: 8px !important;
    font-size: 13px !important;
}

.kaf-helpai-resolution button,
.kaf-helpai-resolution a {
    min-height: 33px !important;
    padding: 0 12px !important;
    font-size: 10.5px !important;
}

/* Quick question lebih slim */
.kaf-helpai-quick {
    padding: 12px 14px !important;
    gap: 7px !important;
}

.kaf-helpai-quick span {
    font-size: 11px !important;
}

.kaf-helpai-quick button {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 10.5px !important;
}

/* Input lebih compact */
.kaf-helpai-input {
    padding: 13px !important;
    gap: 8px !important;
}

.kaf-helpai-input input {
    height: 46px !important;
    padding: 0 15px !important;
    font-size: 13px !important;
}

.kaf-helpai-input button {
    min-width: 92px !important;
    font-size: 11px !important;
}

/* Sidebar compact */
.kaf-helpai-side {
    top: 96px !important;
    gap: 13px !important;
}

.kaf-helpai-sidecard {
    padding: 18px !important;
    border-radius: 24px !important;
}

.kaf-helpai-sidecard h2 {
    margin: 11px 0 11px !important;
    font-size: 22px !important;
    line-height: 1.08 !important;
}

.kaf-helpai-sidecard p {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
}

.kaf-helpai-sidecard > a {
    font-size: 12px !important;
}

.kaf-helpai-topiclist {
    gap: 7px !important;
}

.kaf-helpai-topiclist button {
    min-height: 38px !important;
    border-radius: 15px !important;
    padding: 0 12px !important;
}

.kaf-helpai-topiclist span {
    font-size: 12px !important;
}

.kaf-helpai-topiclist b {
    min-width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
}

/* FAQ bawah juga jangan terlalu besar */
.kaf-helpai-faq {
    padding: 64px 0 78px !important;
}

.kaf-helpai-section-head {
    margin-bottom: 24px !important;
}

.kaf-helpai-section-head h2 {
    font-size: clamp(30px, 3.2vw, 46px) !important;
    line-height: 1.04 !important;
}

.kaf-helpai-section-head p {
    font-size: 14px !important;
    line-height: 1.62 !important;
}

.kaf-helpai-faq__grid {
    gap: 14px !important;
}

.kaf-helpai-faq__grid article {
    min-height: 205px !important;
    padding: 19px !important;
    border-radius: 24px !important;
}

.kaf-helpai-faq__grid article > span {
    min-height: 27px !important;
    margin-bottom: 14px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
}

.kaf-helpai-faq__grid h3 {
    font-size: 18px !important;
    line-height: 1.13 !important;
}

.kaf-helpai-faq__grid p {
    margin-bottom: 14px !important;
    font-size: 12.8px !important;
    line-height: 1.55 !important;
}

.kaf-helpai-faq__grid button {
    font-size: 12px !important;
}

/* Mobile tetap rapi */
@media (max-width: 1120px) {
    .kaf-helpai-layout {
        grid-template-columns: 1fr !important;
    }

    .kaf-helpai-side {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 720px) {
    .kaf-helpai-hero {
        padding: 116px 0 50px !important;
    }

    .kaf-helpai-hero h1 {
        font-size: 32px !important;
        line-height: 1.06 !important;
    }

    .kaf-helpai-hero p {
        font-size: 13.5px !important;
    }

    .kaf-helpai-chat__body {
        height: 500px !important;
        padding: 13px !important;
    }

    .kaf-helpai-message--bot {
        max-width: 100% !important;
    }

    .kaf-helpai-message--user .kaf-helpai-message__bubble {
        max-width: 90% !important;
    }

    .kaf-helpai-side {
        grid-template-columns: 1fr !important;
    }

    .kaf-helpai-faq__grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   HELP ANISA — COLLAPSED ANSWER + SMALL CHAT OVERRIDE
   ========================================================= */

/* Kolom chat diperkecil, tidak terlalu dominan */
.kaf-helpai-chatsection {
    padding: 38px 0 58px !important;
}

.kaf-helpai-layout {
    grid-template-columns: minmax(0, 760px) 280px !important;
    justify-content: center !important;
    gap: 16px !important;
}

.kaf-helpai-chat {
    max-width: 760px !important;
    width: 100% !important;
    border-radius: 26px !important;
}

.kaf-helpai-chat__body {
    height: min(430px, 56vh) !important;
    padding: 13px !important;
}

.kaf-helpai-chat__head {
    padding: 12px 13px !important;
}

.kaf-helpai-chat__avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
}

.kaf-helpai-chat__head {
    grid-template-columns: 40px 1fr auto !important;
}

.kaf-helpai-chat__head strong {
    font-size: 14px !important;
}

.kaf-helpai-chat__head span {
    font-size: 10.5px !important;
}

.kaf-helpai-chat__head b {
    min-height: 25px !important;
    font-size: 9.5px !important;
}

/* Bubble lebih kecil */
.kaf-helpai-message {
    margin-bottom: 10px !important;
}

.kaf-helpai-message--bot {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    max-width: 86% !important;
}

.kaf-helpai-message__avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
}

.kaf-helpai-message__bubble {
    padding: 10px 11px !important;
    border-radius: 16px !important;
}

.kaf-helpai-message__bubble p {
    font-size: 11.8px !important;
    line-height: 1.52 !important;
}

.kaf-helpai-message--user .kaf-helpai-message__bubble {
    max-width: 68% !important;
}

/* Jawaban Anisa default kecil dulu */
.kaf-helpai-answer {
    position: relative;
    margin-top: 8px !important;
    padding: 10px 11px !important;
    border-radius: 15px !important;
    cursor: pointer;
    transition:
        background 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.kaf-helpai-answer:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.kaf-helpai-answer > span {
    margin-bottom: 5px !important;
    font-size: 9px !important;
}

.kaf-helpai-answer h3 {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em !important;
}

.kaf-helpai-answer__preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-helpai-answer__preview small {
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.35;
    font-weight: 650;
}

.kaf-helpai-answer__toggle {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: #052011;
    color: #fff;
    font-size: 9.5px;
    line-height: 1;
    font-weight: 850;
    cursor: pointer;
}

.kaf-helpai-answer__detail {
    display: none;
    margin-top: 10px;
}

.kaf-helpai-answer.is-expanded .kaf-helpai-answer__detail {
    display: block;
}

.kaf-helpai-answer.is-expanded .kaf-helpai-answer__toggle {
    background: #f59e0b;
}

.kaf-helpai-answer.is-expanded {
    cursor: default;
}

/* Isi detail tetap compact */
.kaf-helpai-answer__detail p {
    margin-bottom: 8px !important;
    font-size: 11.5px !important;
    line-height: 1.52 !important;
}

.kaf-helpai-answer__detail ol {
    gap: 5px !important;
    padding-left: 15px !important;
}

.kaf-helpai-answer__detail li {
    font-size: 11.4px !important;
    line-height: 1.44 !important;
}

.kaf-helpai-answer__detail .kaf-helpai-answer__actions {
    gap: 6px !important;
    margin-top: 10px !important;
}

.kaf-helpai-answer__detail .kaf-helpai-answer__actions a,
.kaf-helpai-answer__detail .kaf-helpai-answer__actions button {
    min-height: 31px !important;
    padding: 0 10px !important;
    font-size: 9.8px !important;
}

/* Resolusi jangan terlalu besar */
.kaf-helpai-resolution {
    margin-top: 9px !important;
    padding: 11px !important;
    border-radius: 15px !important;
}

.kaf-helpai-resolution strong {
    font-size: 12px !important;
}

.kaf-helpai-resolution button,
.kaf-helpai-resolution a {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 9.8px !important;
}

/* Quick chips + input lebih kecil */
.kaf-helpai-quick {
    padding: 10px 12px !important;
}

.kaf-helpai-quick button {
    min-height: 27px !important;
    padding: 0 9px !important;
    font-size: 9.8px !important;
}

.kaf-helpai-input {
    padding: 11px !important;
}

.kaf-helpai-input input {
    height: 41px !important;
    font-size: 12px !important;
}

.kaf-helpai-input button {
    min-width: 82px !important;
    font-size: 10.5px !important;
}

/* Sidebar ikut compact */
.kaf-helpai-sidecard {
    padding: 16px !important;
    border-radius: 22px !important;
}

.kaf-helpai-sidecard h2 {
    font-size: 19px !important;
}

.kaf-helpai-topiclist button {
    min-height: 35px !important;
}

@media (max-width: 1120px) {
    .kaf-helpai-layout {
        grid-template-columns: 1fr !important;
    }

    .kaf-helpai-chat {
        max-width: 100% !important;
    }

    .kaf-helpai-side {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 720px) {
    .kaf-helpai-chat__body {
        height: 430px !important;
    }

    .kaf-helpai-message--bot,
    .kaf-helpai-message--user .kaf-helpai-message__bubble {
        max-width: 94% !important;
    }

    .kaf-helpai-side {
        grid-template-columns: 1fr !important;
    }

    .kaf-helpai-answer__preview {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   HELP ANISA — HORIZONTAL ANSWER OPTIONS
   Jawaban dibuat kecil dulu, detail muncul setelah dipilih
   ========================================================= */

.kaf-helpai-suggest {
    margin-top: 10px;
}

.kaf-helpai-suggest__head {
    margin-bottom: 8px;
}

.kaf-helpai-suggest__head span {
    display: inline-flex;
    margin-bottom: 5px;
    color: #076666;
    font-size: 9px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-helpai-suggest__head p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 11.2px !important;
    line-height: 1.45 !important;
    font-weight: 600;
}

.kaf-helpai-suggest__strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(145px, 175px);
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.kaf-helpai-suggest__card {
    scroll-snap-align: start;
    min-height: 82px;
    padding: 10px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 16px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.kaf-helpai-suggest__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.kaf-helpai-suggest__card.is-active {
    border-color: rgba(245, 158, 11, 0.55);
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(245, 158, 11, 0.13),
            transparent 7rem
        ),
        #fff;
}

.kaf-helpai-suggest__card span {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    margin-bottom: 7px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.08);
    color: #076666;
    font-size: 8.5px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.kaf-helpai-suggest__card strong {
    display: block;
    color: #052011;
    font-size: 11.4px;
    line-height: 1.22;
    letter-spacing: -0.018em;
    font-weight: 800;
}

.kaf-helpai-suggest__card small {
    display: block;
    margin-top: 7px;
    color: #64748b;
    font-size: 9.5px;
    line-height: 1.32;
    font-weight: 650;
}

.kaf-helpai-suggest__detail {
    display: none;
    margin-top: 10px;
}

.kaf-helpai-suggest__detail.is-visible {
    display: block;
}

.kaf-helpai-detailanswer {
    padding: 12px;
    border-radius: 17px;
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(245, 158, 11, 0.13),
            transparent 10rem
        ),
        #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-helpai-detailanswer > span {
    display: inline-flex;
    margin-bottom: 7px;
    color: #076666;
    font-size: 9px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-helpai-detailanswer h3 {
    margin: 0 0 8px;
    color: #052011;
    font-size: 15px;
    line-height: 1.18;
    letter-spacing: -0.025em;
    font-weight: 820;
}

.kaf-helpai-detailanswer p {
    margin: 0 0 8px !important;
    color: #334155 !important;
    font-size: 11.7px !important;
    line-height: 1.55 !important;
}

.kaf-helpai-detailanswer ol {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 15px;
}

.kaf-helpai-detailanswer li {
    color: #334155;
    font-size: 11.5px;
    line-height: 1.45;
    font-weight: 560;
}

.kaf-helpai-detailanswer .kaf-helpai-answer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.kaf-helpai-detailanswer .kaf-helpai-answer__actions a,
.kaf-helpai-detailanswer .kaf-helpai-answer__actions button {
    min-height: 31px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px !important;
    border: 0;
    border-radius: 999px;
    background: #052011;
    color: #fff;
    text-decoration: none;
    font-size: 9.8px !important;
    line-height: 1;
    font-weight: 850;
    cursor: pointer;
}

.kaf-helpai-detailanswer .kaf-helpai-answer__actions a:last-child {
    background: #f59e0b;
}

/* Resolusi baru muncul setelah detail dipilih */
.kaf-helpai-suggest__detail .kaf-helpai-resolution {
    margin-top: 9px !important;
    padding: 11px !important;
    border-radius: 15px !important;
}

.kaf-helpai-suggest__detail .kaf-helpai-resolution strong {
    font-size: 12px !important;
}

.kaf-helpai-suggest__detail .kaf-helpai-resolution button,
.kaf-helpai-suggest__detail .kaf-helpai-resolution a {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 9.8px !important;
}

/* Sembunyikan format jawaban lama setelah diubah jadi pilihan horizontal */
.kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
    > .kaf-helpai-answer,
.kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
    > .kaf-helpai-resolution {
    display: none !important;
}

@media (max-width: 720px) {
    .kaf-helpai-suggest__strip {
        grid-auto-columns: minmax(145px, 68vw);
    }
}

/* =========================================================
   PATCH — Help Anisa horizontal answer spacing
   Biar blok jawaban lebih sejajar dengan pinggir bubble/chat
   ========================================================= */

.kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"] {
    padding: 16px 18px 16px !important;
}

.kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
    .kaf-helpai-suggest {
    margin-top: 10px !important;
    margin-left: -4px !important;
    margin-right: -4px !important;
}

.kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
    .kaf-helpai-suggest__head {
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-bottom: 10px !important;
}

.kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
    .kaf-helpai-suggest__head
    p {
    max-width: none !important;
}

.kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
    .kaf-helpai-suggest__strip {
    padding: 2px 4px 10px !important;
    gap: 10px !important;
    grid-auto-columns: minmax(185px, 210px) !important;
}

.kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
    .kaf-helpai-suggest__detail {
    margin-top: 10px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
    .kaf-helpai-detailanswer {
    border-radius: 18px !important;
    padding: 14px 15px !important;
}

.kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
    .kaf-helpai-suggest__card {
    min-height: 90px !important;
    padding: 11px 12px !important;
    border-radius: 16px !important;
}

.kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
    .kaf-helpai-suggest__card
    strong {
    font-size: 11.8px !important;
    line-height: 1.24 !important;
}

.kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
    .kaf-helpai-suggest__card
    small {
    margin-top: 8px !important;
    font-size: 9.4px !important;
}

/* Supaya area jawaban utama tidak terasa terlalu sempit */
.kaf-helpai-message__content .kaf-helpai-message__bubble {
    max-width: 100% !important;
}

@media (max-width: 1024px) {
    .kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
        .kaf-helpai-suggest {
        margin-left: -2px !important;
        margin-right: -2px !important;
    }

    .kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
        .kaf-helpai-suggest__strip {
        grid-auto-columns: minmax(170px, 200px) !important;
        gap: 8px !important;
        padding: 2px 2px 10px !important;
    }

    .kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
        .kaf-helpai-suggest__head,
    .kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
        .kaf-helpai-suggest__detail {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
}

@media (max-width: 640px) {
    .kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"] {
        padding: 14px 14px 14px !important;
    }

    .kaf-helpai-message__bubble[data-kaf-horizontal-answer-ready="1"]
        .kaf-helpai-suggest__strip {
        grid-auto-columns: minmax(160px, 72vw) !important;
    }
}

/* =========================================================
   FORCE FIX — ANISA ANSWER OPTIONS FULL WIDTH
   Ini override final agar pilihan jawaban rata kiri-kanan bubble
   ========================================================= */

.kaf-helpai-chat .kaf-helpai-message.kaf-helpai-message--bot.is-suggest-answer {
    max-width: 100% !important;
    width: 100% !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
}

.kaf-helpai-chat
    .kaf-helpai-message.kaf-helpai-message--bot.is-suggest-answer
    .kaf-helpai-message__bubble {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
}

.kaf-helpai-chat
    .kaf-helpai-message.kaf-helpai-message--bot.is-suggest-answer
    .kaf-helpai-suggest {
    width: 100% !important;
    margin: 10px 0 0 !important;
}

.kaf-helpai-chat
    .kaf-helpai-message.kaf-helpai-message--bot.is-suggest-answer
    .kaf-helpai-suggest__head {
    padding: 0 !important;
    margin: 0 0 10px !important;
}

.kaf-helpai-chat
    .kaf-helpai-message.kaf-helpai-message--bot.is-suggest-answer
    .kaf-helpai-suggest__strip {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: initial !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 0 !important;
}

.kaf-helpai-chat
    .kaf-helpai-message.kaf-helpai-message--bot.is-suggest-answer
    .kaf-helpai-suggest__card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 88px !important;
    padding: 11px 12px !important;
    border-radius: 16px !important;
}

.kaf-helpai-chat
    .kaf-helpai-message.kaf-helpai-message--bot.is-suggest-answer
    .kaf-helpai-suggest__detail {
    width: 100% !important;
    margin-top: 12px !important;
    padding: 0 !important;
}

.kaf-helpai-chat
    .kaf-helpai-message.kaf-helpai-message--bot.is-suggest-answer
    .kaf-helpai-detailanswer {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 15px !important;
    border-radius: 18px !important;
}

@media (max-width: 720px) {
    .kaf-helpai-chat
        .kaf-helpai-message.kaf-helpai-message--bot.is-suggest-answer {
        grid-template-columns: 28px minmax(0, 1fr) !important;
    }

    .kaf-helpai-chat
        .kaf-helpai-message.kaf-helpai-message--bot.is-suggest-answer
        .kaf-helpai-suggest__strip {
        display: flex !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
        scroll-snap-type: x mandatory;
    }

    .kaf-helpai-chat
        .kaf-helpai-message.kaf-helpai-message--bot.is-suggest-answer
        .kaf-helpai-suggest__card {
        flex: 0 0 72vw !important;
        scroll-snap-align: start;
    }
}

/* =========================================================
   FIX — HELP ANISA MAIN LAYOUT FULL CONTAINER
   Yang dilebarkan: layout chat + sidebar FAQ, bukan jawaban Anisa.
   ========================================================= */

/* Section tetap compact, tapi isi melebar sesuai container */
.kaf-helpai-chatsection {
    padding: 44px 0 68px !important;
}

/* Hapus efek layout ngumpul ke tengah dari patch sebelumnya */
.kaf-helpai-layout {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 330px !important;
    justify-content: stretch !important;
    align-items: start !important;
    gap: 24px !important;
}

/* Chat box ikut melebar penuh di kolom kiri */
.kaf-helpai-chat {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    border-radius: 30px !important;
}

/* Sidebar kategori FAQ tetap nempel ke kolom kanan, tidak menyempit */
.kaf-helpai-side {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    top: 96px !important;
}

/* Card sidebar dibuat full lebar kolom */
.kaf-helpai-sidecard {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Chat body tetap nyaman, tidak terlalu tinggi */
.kaf-helpai-chat__body {
    height: min(500px, 62vh) !important;
}

/* Input bawah mengikuti lebar chat */
.kaf-helpai-input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Quick question mengikuti lebar chat */
.kaf-helpai-quick {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* FAQ kategori kanan dibuat lebih enterprise dan rapi */
.kaf-helpai-topiclist button {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ukuran sidebar jangan terlalu mungil */
.kaf-helpai-sidecard h2 {
    font-size: 22px !important;
}

.kaf-helpai-topiclist span {
    font-size: 12.5px !important;
}

/* Tablet: chat dan sidebar turun, tapi tetap full */
@media (max-width: 1120px) {
    .kaf-helpai-layout {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .kaf-helpai-side {
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

/* Mobile: semuanya single column */
@media (max-width: 720px) {
    .kaf-helpai-chatsection {
        padding: 36px 0 56px !important;
    }

    .kaf-helpai-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .kaf-helpai-side {
        grid-template-columns: 1fr !important;
    }

    .kaf-helpai-chat {
        border-radius: 26px !important;
    }

    .kaf-helpai-chat__body {
        height: 460px !important;
    }
}

/* =========================================================
   DOWNLOAD CENTER V2 — KAFNET
   ========================================================= */

.kaf-downloadv2 {
    --dl-green: #052011;
    --dl-teal: #076666;
    --dl-orange: #f59e0b;
    --dl-muted: #4b5563;
    background: #f8fafb;
    color: var(--dl-green);
    overflow: hidden;
}

.kaf-downloadv2-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--dl-teal);
    font-size: 10.5px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.kaf-downloadv2-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-downloadv2-btn:hover {
    transform: translateY(-2px);
}

.kaf-downloadv2-btn--accent {
    background: var(--dl-orange);
    color: #fff;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24);
}

.kaf-downloadv2-btn--glass {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-downloadv2-hero {
    position: relative;
    padding: 150px 0 78px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.88) 0%,
            rgba(7, 102, 102, 0.66) 48%,
            rgba(245, 158, 11, 0.24) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--downloadHeroBg) center center / cover no-repeat;
    border-radius: 0 0 42px 42px;
}

.kaf-downloadv2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
}

.kaf-downloadv2-hero .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-downloadv2-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 42px;
    align-items: center;
}

.kaf-downloadv2-crumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.96);
    color: #fff;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.24);
}

.kaf-downloadv2-crumb a,
.kaf-downloadv2-crumb span {
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

.kaf-downloadv2-hero .kaf-downloadv2-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-downloadv2-hero .kaf-downloadv2-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--dl-orange);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}

.kaf-downloadv2-hero h1 {
    max-width: 760px;
    margin: 18px 0 16px;
    color: #fff;
    font-size: clamp(40px, 5.2vw, 72px);
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 760;
}

.kaf-downloadv2-hero p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.68;
    font-weight: 470;
}

.kaf-downloadv2-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 28px;
}

/* Hero stack */
.kaf-downloadv2-stack {
    position: relative;
    min-height: 400px;
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

.kaf-downloadv2-stack__doc {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 210px;
    height: 270px;
    border-radius: 24px;
    transform: translate(-50%, -50%);
    background: #fff;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.18);
}

.kaf-downloadv2-stack__doc.is-main {
    z-index: 3;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    color: var(--dl-green);
}

.kaf-downloadv2-stack__doc.is-main span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    font-size: 12px;
    font-weight: 900;
}

.kaf-downloadv2-stack__doc.is-main strong {
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 850;
}

.kaf-downloadv2-stack__doc.is-main p {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 750;
}

.kaf-downloadv2-stack__doc.is-back {
    z-index: 2;
    transform: translate(-38%, -54%) rotate(9deg);
    background: rgba(255, 255, 255, 0.78);
}

.kaf-downloadv2-stack__doc.is-last {
    z-index: 1;
    transform: translate(-62%, -42%) rotate(-10deg);
    background: rgba(255, 255, 255, 0.5);
}

.kaf-downloadv2-stack__meta {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 4;
}

.kaf-downloadv2-stack__meta span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--dl-orange);
    color: #fff;
    font-size: 24px;
    font-weight: 850;
}

.kaf-downloadv2-stack__meta p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    line-height: 1.45;
}

/* Sections */
.kaf-downloadv2-featured {
    padding: 54px 0 24px;
}

.kaf-downloadv2-section-head {
    max-width: 740px;
    margin-bottom: 24px;
}

.kaf-downloadv2-section-head h2,
.kaf-downloadv2-toolbar__box h2,
.kaf-downloadv2-request__box h2 {
    margin: 13px 0 10px;
    color: var(--dl-green);
    font-size: clamp(31px, 3.6vw, 52px);
    line-height: 1.03;
    letter-spacing: -0.052em;
    font-weight: 760;
}

.kaf-downloadv2-featured__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.kaf-downloadv2-featured__grid article {
    min-height: 240px;
    padding: 24px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.065);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.06);
}

.kaf-downloadv2-featured__grid article > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.kaf-downloadv2-featured__grid span,
.kaf-downloadv2-featured__grid b {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 850;
}

.kaf-downloadv2-featured__grid span {
    background: rgba(7, 102, 102, 0.09);
    color: var(--dl-teal);
}

.kaf-downloadv2-featured__grid b {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.kaf-downloadv2-featured__grid h3 {
    margin: 0 0 10px;
    color: var(--dl-green);
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.04em;
    font-weight: 780;
}

.kaf-downloadv2-featured__grid p {
    margin: 0 0 18px;
    color: var(--dl-muted);
    font-size: 14px;
    line-height: 1.6;
}

.kaf-downloadv2-featured__grid a {
    color: var(--dl-teal);
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
}

/* Toolbar */
.kaf-downloadv2-toolbar {
    padding: 34px 0 22px;
}

.kaf-downloadv2-toolbar__box {
    padding: 28px;
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.06);
}

.kaf-downloadv2-toolbar__box p {
    margin: 0;
    color: var(--dl-muted);
    font-size: 14px;
    line-height: 1.6;
}

.kaf-downloadv2-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 20px;
    padding: 7px;
    border-radius: 999px;
    background: #f8fafb;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-downloadv2-search input {
    width: 100%;
    height: 48px;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0 16px;
    color: var(--dl-green);
    font-size: 14px;
    font-weight: 650;
}

.kaf-downloadv2-search button {
    min-width: 96px;
    border: 0;
    border-radius: 999px;
    background: var(--dl-green);
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.kaf-downloadv2-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.kaf-downloadv2-filters button {
    min-height: 34px;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.08);
    color: var(--dl-teal);
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
}

.kaf-downloadv2-filters button.is-active {
    background: var(--dl-green);
    color: #fff;
}

.kaf-downloadv2-result {
    margin-top: 14px !important;
    color: #64748b !important;
    font-size: 12.5px !important;
    font-weight: 650;
}

/* Cards */
.kaf-downloadv2-list {
    padding: 20px 0 72px;
}

.kaf-downloadv2-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.kaf-download-card {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 18px;
    padding: 20px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.065);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.kaf-download-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.1);
}

.kaf-download-card.is-hidden {
    display: none;
}

.kaf-download-card__icon {
    width: 82px;
    height: 104px;
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(245, 158, 11, 0.48),
            transparent 60%
        ),
        linear-gradient(135deg, var(--dl-teal), var(--dl-green));
    display: grid;
    place-items: center;
    color: #fff;
}

.kaf-download-card__icon span {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.kaf-download-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.kaf-download-card__top span,
.kaf-download-card__top b {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
    font-weight: 850;
}

.kaf-download-card__top span {
    background: rgba(7, 102, 102, 0.08);
    color: var(--dl-teal);
}

.kaf-download-card__top b.is-ready {
    background: rgba(22, 163, 74, 0.11);
    color: #15803d;
}

.kaf-download-card__top b.is-missing {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.kaf-download-card h3 {
    margin: 0 0 8px;
    color: var(--dl-green);
    font-size: 21px;
    line-height: 1.12;
    letter-spacing: -0.035em;
    font-weight: 780;
}

.kaf-download-card p {
    margin: 0;
    color: var(--dl-muted);
    font-size: 13.5px;
    line-height: 1.58;
}

.kaf-download-card__meta,
.kaf-download-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}

.kaf-download-card__meta span,
.kaf-download-card__tags span {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #f8fafb;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 760;
}

.kaf-download-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.kaf-download-card__actions a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--dl-green);
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 850;
}

.kaf-download-card__actions a:nth-child(2) {
    background: rgba(7, 102, 102, 0.08);
    color: var(--dl-teal);
}

/* Empty */
.kaf-downloadv2-empty {
    display: none;
    margin-top: 22px;
    padding: 28px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
    text-align: center;
}

.kaf-downloadv2-empty.is-visible {
    display: block;
}

.kaf-downloadv2-empty strong,
.kaf-downloadv2-empty span {
    display: block;
}

.kaf-downloadv2-empty strong {
    color: var(--dl-green);
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.kaf-downloadv2-empty span {
    margin-top: 8px;
    color: #64748b;
    font-size: 14px;
}

.kaf-downloadv2-empty a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--dl-orange);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
}

/* Request */
.kaf-downloadv2-request {
    padding: 0 0 88px;
}

.kaf-downloadv2-request__box {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    gap: 34px;
    align-items: start;
    padding: 34px;
    border-radius: 38px;
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(245, 158, 11, 0.14),
            transparent 18rem
        ),
        #052011;
    color: #fff;
}

.kaf-downloadv2-request__box .kaf-downloadv2-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: #fde68a;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.kaf-downloadv2-request__box h2 {
    color: #fff;
}

.kaf-downloadv2-request__box p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.65;
}

.kaf-downloadv2-form {
    display: grid;
    gap: 12px;
    padding: 20px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-downloadv2-form label {
    display: grid;
    gap: 7px;
}

.kaf-downloadv2-form label span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 11.5px;
    font-weight: 820;
}

.kaf-downloadv2-form input,
.kaf-downloadv2-form textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--dl-green);
    outline: 0;
    padding: 13px 14px;
    font-size: 13px;
    font-weight: 650;
}

.kaf-downloadv2-form button {
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--dl-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

/* Reveal */
[data-kaf-download-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-kaf-download-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1120px) {
    .kaf-downloadv2-hero__grid,
    .kaf-downloadv2-request__box {
        grid-template-columns: 1fr;
    }

    .kaf-downloadv2-featured__grid {
        grid-template-columns: 1fr;
    }

    .kaf-downloadv2-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .kaf-downloadv2-hero {
        padding: 124px 0 58px;
        border-radius: 0 0 30px 30px;
    }

    .kaf-downloadv2-hero h1 {
        font-size: 36px;
        line-height: 1.05;
    }

    .kaf-downloadv2-hero p {
        font-size: 14.5px;
    }

    .kaf-downloadv2-stack {
        min-height: 320px;
    }

    .kaf-downloadv2-toolbar__box,
    .kaf-downloadv2-request__box {
        padding: 22px;
        border-radius: 28px;
    }

    .kaf-downloadv2-search {
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    .kaf-downloadv2-search button {
        height: 42px;
    }

    .kaf-download-card {
        grid-template-columns: 1fr;
    }

    .kaf-download-card__icon {
        width: 72px;
        height: 88px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-kaf-download-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   CAREERS PUBLIC — KAFNET
   ========================================================= */
.kaf-careerv2,
.kaf-careerdetail {
    --cr-green: #052011;
    --cr-teal: #076666;
    --cr-orange: #f59e0b;
    --cr-muted: #4b5563;
    background: #f8fafb;
    color: var(--cr-green);
    overflow: hidden;
}
.kaf-careerv2-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--cr-teal);
    font-size: 10.5px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}
.kaf-careerv2-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
    transition: 0.24s;
}
.kaf-careerv2-btn:hover {
    transform: translateY(-2px);
}
.kaf-careerv2-btn--accent {
    background: var(--cr-orange);
    color: #fff;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24);
}
.kaf-careerv2-btn--glass {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
}
.kaf-careerv2-hero,
.kaf-careerdetail-hero {
    position: relative;
    padding: 150px 0 78px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.88),
            rgba(7, 102, 102, 0.66),
            rgba(245, 158, 11, 0.24)
        ),
        var(--careerHeroBg, var(--careerDetailHeroBg)) center/cover no-repeat;
    border-radius: 0 0 42px 42px;
}
.kaf-careerdetail-hero {
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.9),
            rgba(7, 102, 102, 0.7),
            rgba(245, 158, 11, 0.25)
        ),
        var(--careerDetailHeroBg) center/cover no-repeat;
}
.kaf-careerv2-hero .kaf-container,
.kaf-careerdetail-hero .kaf-container {
    position: relative;
    z-index: 2;
}
.kaf-careerv2-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 410px);
    gap: 42px;
    align-items: center;
}
.kaf-careerv2-crumb {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 28px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.96);
    color: #fff;
}
.kaf-careerv2-crumb a,
.kaf-careerv2-crumb span {
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}
.kaf-careerv2-hero h1,
.kaf-careerdetail-hero h1 {
    max-width: 790px;
    margin: 18px 0 16px;
    color: #fff;
    font-size: clamp(40px, 5.2vw, 72px);
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 760;
}
.kaf-careerv2-hero p,
.kaf-careerdetail-hero p {
    max-width: 670px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.68;
}
.kaf-careerv2-hero__actions {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
    margin-top: 28px;
}
.kaf-careerv2-peoplecard {
    min-height: 330px;
    padding: 28px;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    display: grid;
    align-content: end;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
}
.kaf-careerv2-peoplecard span {
    color: #fde68a;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}
.kaf-careerv2-peoplecard strong {
    margin-top: 10px;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.055em;
}
.kaf-careerv2-peoplecard p {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.55;
}
.kaf-careerv2-culture,
.kaf-careerv2-jobs,
.kaf-careerv2-process,
.kaf-careerv2-faq,
.kaf-careerdetail-main,
.kaf-careerdetail-related {
    padding: 70px 0;
}
.kaf-careerv2-section-head {
    max-width: 760px;
    margin-bottom: 26px;
}
.kaf-careerv2-section-head h2,
.kaf-careerv2-toolbar h2,
.kaf-careerdetail-content h2 {
    margin: 13px 0 10px;
    color: var(--cr-green);
    font-size: clamp(30px, 3.5vw, 52px);
    line-height: 1.03;
    letter-spacing: -0.052em;
    font-weight: 760;
}
.kaf-careerv2-culture__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.kaf-careerv2-culture__grid article {
    padding: 18px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}
.kaf-careerv2-culture__grid article div {
    height: 150px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cr-teal), var(--cr-green));
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 42px;
    font-weight: 850;
}
.kaf-careerv2-culture__grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kaf-careerv2-culture__grid h3,
.kaf-career-card h3 {
    margin: 16px 0 8px;
    color: var(--cr-green);
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: -0.035em;
}
.kaf-careerv2-culture__grid p,
.kaf-career-card p,
.kaf-careerv2-toolbar p {
    margin: 0;
    color: var(--cr-muted);
    font-size: 13.5px;
    line-height: 1.6;
}
.kaf-careerv2-stats {
    padding: 0 0 30px;
}
.kaf-careerv2-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 24px;
    border-radius: 32px;
    background: #052011;
    color: #fff;
}
.kaf-careerv2-stats__grid div {
    padding: 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.1);
}
.kaf-careerv2-stats__grid strong {
    display: block;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.05em;
}
.kaf-careerv2-stats__grid span {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 800;
}
.kaf-careerv2-toolbar {
    padding: 28px;
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.06);
    margin-bottom: 22px;
}
.kaf-careerv2-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 18px;
    padding: 7px;
    border-radius: 999px;
    background: #f8fafb;
}
.kaf-careerv2-search input {
    height: 46px;
    border: 0;
    background: transparent;
    outline: 0;
    padding: 0 16px;
    font-size: 14px;
}
.kaf-careerv2-search button {
    min-width: 90px;
    border: 0;
    border-radius: 999px;
    background: #052011;
    color: #fff;
    font-size: 11px;
    font-weight: 850;
}
.kaf-careerv2-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.kaf-careerv2-filters button {
    min-height: 34px;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.08);
    color: var(--cr-teal);
    font-size: 11.5px;
    font-weight: 800;
}
.kaf-careerv2-filters button.is-active {
    background: #052011;
    color: #fff;
}
.kaf-careerv2-jobgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.kaf-career-card {
    overflow: hidden;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
    transition: 0.24s;
}
.kaf-career-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.1);
}
.kaf-career-card.is-hidden,
.kaf-career-card.is-page-hidden {
    display: none;
}
.kaf-career-card__media {
    height: 170px;
    background: linear-gradient(135deg, var(--cr-teal), var(--cr-green));
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 850;
}
.kaf-career-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kaf-career-card__body {
    padding: 20px;
}
.kaf-career-card__body > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.kaf-career-card__body span,
.kaf-career-card__body b {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    background: rgba(7, 102, 102, 0.08);
    color: var(--cr-teal);
}
.kaf-career-card__body b {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}
.kaf-career-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0 16px;
    padding: 0;
    list-style: none;
}
.kaf-career-card li {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #f8fafb;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 760;
}
.kaf-career-card a {
    color: var(--cr-teal);
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
}
.kaf-careerv2-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}
.kaf-careerv2-pagination button {
    min-width: 40px;
    height: 40px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 850;
}
.kaf-careerv2-pagination button.is-active {
    background: #052011;
    color: #fff;
}
.kaf-careerv2-empty {
    display: none;
    text-align: center;
    margin-top: 22px;
    padding: 26px;
    border-radius: 28px;
    background: #fff;
}
.kaf-careerv2-empty.is-visible {
    display: block;
}
.kaf-careerv2-process {
    background: #fff;
}
.kaf-careerv2-process__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.kaf-careerv2-process__grid article {
    padding: 22px;
    border-radius: 26px;
    background: #f8fafb;
}
.kaf-careerv2-process__grid span {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.09);
    color: var(--cr-teal);
    font-size: 12px;
    font-weight: 850;
}
.kaf-careerv2-process__grid h3 {
    font-size: 17px;
    line-height: 1.12;
    margin: 20px 0 0;
}
.kaf-careerv2-faq__list {
    display: grid;
    gap: 10px;
    max-width: 820px;
}
.kaf-careerv2-faq details {
    padding: 18px 20px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
}
.kaf-careerv2-faq summary {
    cursor: pointer;
    font-weight: 850;
    color: #052011;
}
.kaf-careerv2-faq p {
    margin: 12px 0 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.6;
}
.kaf-careerdetail-hero__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 24px 0;
}
.kaf-careerdetail-hero__meta span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}
.kaf-careerdetail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 26px;
    align-items: start;
}
.kaf-careerdetail-content {
    padding: 30px;
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.06);
}
.kaf-careerdetail-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 34px;
}
.kaf-careerdetail-summary div {
    padding: 16px;
    border-radius: 20px;
    background: #f8fafb;
}
.kaf-careerdetail-summary span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}
.kaf-careerdetail-summary strong {
    display: block;
    margin-top: 6px;
    color: #052011;
    font-size: 14px;
    line-height: 1.4;
}
.kaf-careerdetail-content section {
    margin-top: 38px;
}
.kaf-careerdetail-content p {
    color: #334155;
    font-size: 16px;
    line-height: 1.78;
}
.kaf-careerdetail-content ul {
    display: grid;
    gap: 10px;
    padding: 0;
    list-style: none;
}
.kaf-careerdetail-content li {
    position: relative;
    padding-left: 24px;
    color: #334155;
    font-size: 14.5px;
    line-height: 1.6;
}
.kaf-careerdetail-content li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #f59e0b;
}
.kaf-careerdetail-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.kaf-careerdetail-benefits span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(7, 102, 102, 0.08);
    color: var(--cr-teal);
    font-size: 12px;
    font-weight: 850;
}
.kaf-careerdetail-apply {
    position: sticky;
    top: 104px;
    padding: 24px;
    border-radius: 30px;
    background: #052011;
    color: #fff;
}
.kaf-careerdetail-apply h3 {
    margin: 0 0 10px;
    font-size: 25px;
    line-height: 1.05;
}
.kaf-careerdetail-apply p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.6;
}
.kaf-careerdetail-apply > a {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
}
.kaf-careerdetail-apply div {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.kaf-careerdetail-apply span {
    font-size: 11px;
    color: #fde68a;
    font-weight: 850;
    text-transform: uppercase;
}
.kaf-careerdetail-apply li {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    margin-top: 8px;
}
[data-kaf-career-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-kaf-career-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 1120px) {
    .kaf-careerv2-hero__grid,
    .kaf-careerdetail-layout {
        grid-template-columns: 1fr;
    }
    .kaf-careerv2-culture__grid,
    .kaf-careerv2-jobgrid {
        grid-template-columns: repeat(2, 1fr);
    }
    .kaf-careerv2-process__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .kaf-careerdetail-apply {
        position: static;
    }
}
@media (max-width: 720px) {
    .kaf-careerv2-hero,
    .kaf-careerdetail-hero {
        padding: 124px 0 58px;
        border-radius: 0 0 30px 30px;
    }
    .kaf-careerv2-hero h1,
    .kaf-careerdetail-hero h1 {
        font-size: 36px;
    }
    .kaf-careerv2-culture__grid,
    .kaf-careerv2-jobgrid,
    .kaf-careerv2-process__grid,
    .kaf-careerv2-stats__grid,
    .kaf-careerdetail-summary {
        grid-template-columns: 1fr;
    }
    .kaf-careerv2-search {
        grid-template-columns: 1fr;
        border-radius: 24px;
    }
    .kaf-careerv2-search button {
        height: 42px;
    }
    .kaf-careerdetail-content {
        padding: 22px;
        border-radius: 28px;
    }
}

/* =========================================================
   PATCH — CAREER CARD ROLE ICON / BADGE
   Mirip identitas file di Pusat Unduhan, tapi disesuaikan untuk Karier
   ========================================================= */

.kaf-career-card {
    position: relative !important;
}

.kaf-career-card::after {
    content: "JOB";
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    min-width: 44px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #052011;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.045em;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.13);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.kaf-career-card[data-category="teknis"]::after {
    content: "NET";
    background: rgba(7, 102, 102, 0.94);
    color: #fff;
}

.kaf-career-card[data-category="cs"]::after {
    content: "CS";
    background: rgba(245, 158, 11, 0.96);
    color: #fff;
}

.kaf-career-card[data-category="sales"]::after {
    content: "SLS";
    background: #052011;
    color: #fff;
}

.kaf-career-card[data-category="operasional"]::after {
    content: "OPS";
    background: rgba(255, 255, 255, 0.94);
    color: #076666;
}

/* Biar badge atas kanan tidak tabrakan dengan badge kategori di body */
.kaf-career-card__media {
    position: relative !important;
}

.kaf-career-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(5, 32, 17, 0.1) 0%,
        rgba(5, 32, 17, 0.16) 100%
    );
    pointer-events: none;
}

.kaf-career-card__media img,
.kaf-career-card__media span {
    position: relative;
    z-index: 0;
}

/* Card related di detail yang tidak punya data-category tetap dapat badge default */
.kaf-careerdetail-related .kaf-career-card::after {
    content: "JOB";
    background: rgba(255, 255, 255, 0.94);
    color: #052011;
}

@media (max-width: 720px) {
    .kaf-career-card::after {
        top: 13px;
        right: 13px;
        height: 31px;
        min-width: 40px;
        font-size: 9px;
    }
}

/* =========================================================
   PATCH — CAREER HERO HIRING STACK
   Visual kanan hero Karier dibuat seperti Pusat Unduhan,
   tapi konteksnya Career / Hiring.
   ========================================================= */

.kaf-careerv2-hiringstack {
    position: relative;
    min-height: 400px;
    border-radius: 38px;
    background:
        radial-gradient(
            circle at 52% 34%,
            rgba(245, 158, 11, 0.24),
            transparent 12rem
        ),
        rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

.kaf-careerv2-hiringstack__doc {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 210px;
    height: 270px;
    border-radius: 24px;
    transform: translate(-50%, -50%);
    background: #fff;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.18);
}

.kaf-careerv2-hiringstack__doc.is-main {
    z-index: 3;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    color: #052011;
}

.kaf-careerv2-hiringstack__doc.is-main span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.035em;
}

.kaf-careerv2-hiringstack__doc.is-main strong {
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 850;
}

.kaf-careerv2-hiringstack__doc.is-main p {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 750;
}

.kaf-careerv2-hiringstack__doc.is-main::before {
    content: "";
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(245, 158, 11, 0.62),
            transparent 58%
        ),
        linear-gradient(135deg, #076666, #052011);
    box-shadow: 0 16px 34px rgba(5, 32, 17, 0.18);
}

.kaf-careerv2-hiringstack__doc.is-back {
    z-index: 2;
    transform: translate(-38%, -54%) rotate(9deg);
    background: rgba(255, 255, 255, 0.78);
}

.kaf-careerv2-hiringstack__doc.is-last {
    z-index: 1;
    transform: translate(-62%, -42%) rotate(-10deg);
    background: rgba(255, 255, 255, 0.5);
}

.kaf-careerv2-hiringstack__meta {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 4;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-careerv2-hiringstack__meta span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #f59e0b;
    color: #fff;
    font-size: 24px;
    font-weight: 850;
    line-height: 1;
}

.kaf-careerv2-hiringstack__meta p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    line-height: 1.45;
}

/* Matikan peoplecard lama kalau masih kebaca dari cache/duplikat */
.kaf-careerv2-peoplecard {
    display: none !important;
}

@media (max-width: 720px) {
    .kaf-careerv2-hiringstack {
        min-height: 320px;
        border-radius: 30px;
    }

    .kaf-careerv2-hiringstack__doc {
        width: 176px;
        height: 226px;
    }

    .kaf-careerv2-hiringstack__doc.is-main strong {
        font-size: 31px;
    }
}

/* =========================================================
   CAREER HERO — FOLLOW DOWNLOAD HERO PAKEM
   Struktur kanan hero disamakan dengan pola Pusat Unduhan:
   stack visual utama + layer belakang + meta card bawah.
   ========================================================= */

.kaf-careerv2-stack {
    position: relative;
    min-height: 400px;
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

.kaf-careerv2-stack__visual {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 210px;
    height: 270px;
    border-radius: 24px;
    transform: translate(-50%, -50%);
    background: #fff;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.18);
}

.kaf-careerv2-stack__visual.is-main {
    z-index: 3;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    color: #052011;
}

.kaf-careerv2-stack__visual.is-main::before {
    content: "";
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(245, 158, 11, 0.6),
            transparent 60%
        ),
        linear-gradient(135deg, #076666, #052011);
    box-shadow: 0 16px 34px rgba(5, 32, 17, 0.18);
}

.kaf-careerv2-stack__visual.is-main span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.035em;
}

.kaf-careerv2-stack__visual.is-main strong {
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 850;
}

.kaf-careerv2-stack__visual.is-main p {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 750;
}

.kaf-careerv2-stack__visual.is-back {
    z-index: 2;
    transform: translate(-38%, -54%) rotate(9deg);
    background: rgba(255, 255, 255, 0.78);
}

.kaf-careerv2-stack__visual.is-last {
    z-index: 1;
    transform: translate(-62%, -42%) rotate(-10deg);
    background: rgba(255, 255, 255, 0.5);
}

.kaf-careerv2-stack__meta {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 4;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-careerv2-stack__meta span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #f59e0b;
    color: #fff;
    font-size: 24px;
    font-weight: 850;
}

.kaf-careerv2-stack__meta p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    line-height: 1.45;
}

/* Sembunyikan versi hero kanan lama */
.kaf-careerv2-hiringstack,
.kaf-careerv2-peoplecard {
    display: none !important;
}

@media (max-width: 720px) {
    .kaf-careerv2-stack {
        min-height: 320px;
        border-radius: 30px;
    }

    .kaf-careerv2-stack__visual {
        width: 176px;
        height: 226px;
    }

    .kaf-careerv2-stack__visual.is-main strong {
        font-size: 31px;
    }
}

/* =========================================================
   CAREER HERO — TALENT PANEL
   Visual kanan hero yang lebih relevan untuk halaman Karier
   ========================================================= */

.kaf-careerv2-talentpanel {
    position: relative;
    min-height: 400px;
    padding: 24px;
    border-radius: 38px;
    background:
        radial-gradient(
            circle at 80% 12%,
            rgba(245, 158, 11, 0.28),
            transparent 14rem
        ),
        radial-gradient(
            circle at 18% 72%,
            rgba(7, 102, 102, 0.24),
            transparent 16rem
        ),
        rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
    color: #fff;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

.kaf-careerv2-talentpanel__top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.kaf-careerv2-talentpanel__top span {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.95);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kaf-careerv2-talentpanel__top strong {
    color: #fff;
    font-size: 34px;
    line-height: 0.95;
    letter-spacing: -0.055em;
    text-align: right;
}

.kaf-careerv2-talentpanel__avatars {
    display: flex;
    align-items: center;
    margin-top: 42px;
    padding-left: 10px;
}

.kaf-careerv2-talentpanel__avatars div {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-left: -10px;
    border-radius: 20px;
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(245, 158, 11, 0.55),
            transparent 60%
        ),
        linear-gradient(135deg, #076666, #052011);
    border: 2px solid rgba(255, 255, 255, 0.72);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.kaf-careerv2-talentpanel__avatars div:nth-child(2) {
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(255, 255, 255, 0.24),
            transparent 60%
        ),
        linear-gradient(135deg, #f59e0b, #b45309);
}

.kaf-careerv2-talentpanel__avatars div:nth-child(3) {
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(245, 158, 11, 0.32),
            transparent 60%
        ),
        linear-gradient(135deg, #0f766e, #052011);
}

.kaf-careerv2-talentpanel__avatars div:nth-child(4) {
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.kaf-careerv2-talentpanel__role {
    margin-top: 14px;
    padding: 17px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-careerv2-talentpanel__role.is-primary {
    margin-top: 32px;
    background: rgba(255, 255, 255, 0.18);
}

.kaf-careerv2-talentpanel__role span {
    display: inline-flex;
    margin-bottom: 8px;
    color: #fde68a;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kaf-careerv2-talentpanel__role strong {
    display: block;
    color: #fff;
    font-size: 22px;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.kaf-careerv2-talentpanel__role p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12.5px;
    line-height: 1.45;
}

.kaf-careerv2-talentpanel__progress {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-careerv2-talentpanel__progress > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}

.kaf-careerv2-talentpanel__progress span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 800;
}

.kaf-careerv2-talentpanel__progress b {
    color: #fde68a;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.kaf-careerv2-talentpanel__progress i {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.kaf-careerv2-talentpanel__progress em {
    display: block;
    width: 72%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b, #fde68a);
}

/* Sembunyikan visual hero kanan lama */
.kaf-careerv2-stack,
.kaf-careerv2-hiringstack,
.kaf-careerv2-peoplecard {
    display: none !important;
}

@media (max-width: 720px) {
    .kaf-careerv2-talentpanel {
        min-height: 370px;
        padding: 20px;
        border-radius: 30px;
    }

    .kaf-careerv2-talentpanel__top strong {
        font-size: 28px;
    }

    .kaf-careerv2-talentpanel__avatars div {
        width: 50px;
        height: 50px;
        border-radius: 17px;
    }

    .kaf-careerv2-talentpanel__progress {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }
}

/* =========================================================
   CAREER DETAIL HERO PRO PATCH
   Detail karier mengikuti pakem Career v2, hero lebih compact
   ========================================================= */

.kaf-careerdetail,
.kaf-careerdetail * {
    font-family: var(
        --kaf-font,
        "Plus Jakarta Sans",
        "Jakarta Sans",
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif
    );
}

.kaf-careerdetail {
    background: var(--kaf-bg, #f9fafb);
    color: var(--kaf-dark, #052011);
    overflow: hidden;
}

.kaf-careerdetail-hero {
    position: relative;
    min-height: 76svh;
    display: flex;
    align-items: center;
    padding: calc(var(--kaf-header-h, 76px) + 58px) 0 74px;
    background: #052011;
    overflow: hidden;
}

.kaf-careerdetail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--careerDetailHeroBg);
    background-size: cover;
    background-position: center;
    opacity: 0.42;
    transform: scale(1.03);
}

.kaf-careerdetail-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(245, 158, 11, 0.28),
            transparent 24rem
        ),
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.95) 0%,
            rgba(5, 32, 17, 0.82) 45%,
            rgba(5, 32, 17, 0.42) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 32, 17, 0.42) 0%,
            rgba(5, 32, 17, 0.88) 100%
        );
}

.kaf-careerdetail-hero .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-careerdetail-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.56fr);
    align-items: center;
    gap: 54px;
}

.kaf-careerdetail-hero__content {
    max-width: 760px;
}

.kaf-careerdetail-hero .kaf-careerv2-crumb {
    margin-bottom: 22px;
}

.kaf-careerdetail-hero .kaf-careerv2-crumb,
.kaf-careerdetail-hero .kaf-careerv2-crumb a {
    color: rgba(255, 255, 255, 0.76);
}

.kaf-careerdetail-hero .kaf-careerv2-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: #fff7ed;
    border-color: rgba(255, 255, 255, 0.18);
}

.kaf-careerdetail-hero h1 {
    max-width: 720px;
    margin: 18px 0 16px;
    color: #fff;
    font-size: clamp(36px, 4.1vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.055em;
    font-weight: 800;
    text-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.kaf-careerdetail-hero p {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(14px, 1.08vw, 17px);
    line-height: 1.58;
    font-weight: 500;
}

.kaf-careerdetail-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.kaf-careerdetail-hero__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
}

.kaf-careerdetail-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.kaf-careerdetail-hero__actions .kaf-careerv2-btn {
    min-height: 48px;
    padding-inline: 22px;
}

.kaf-careerdetail-hero__panel {
    min-width: 0;
}

.kaf-careerdetail-jobcard {
    position: relative;
    padding: 24px;
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 90% 4%,
            rgba(245, 158, 11, 0.22),
            transparent 12rem
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.09)
        );
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        0 28px 76px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.kaf-careerdetail-jobcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
}

.kaf-careerdetail-jobcard__top span,
.kaf-careerdetail-jobcard__top b {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
}

.kaf-careerdetail-jobcard__top span {
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.9);
}

.kaf-careerdetail-jobcard__top b {
    background: #f59e0b;
    color: #fff;
}

.kaf-careerdetail-jobcard h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(25px, 2vw, 34px);
    line-height: 1.04;
    letter-spacing: -0.045em;
    font-weight: 800;
}

.kaf-careerdetail-jobcard > p {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
}

.kaf-careerdetail-jobcard__info {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.kaf-careerdetail-jobcard__info div {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.kaf-careerdetail-jobcard__info span,
.kaf-careerdetail-jobcard__steps > span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 850;
}

.kaf-careerdetail-jobcard__info strong {
    display: block;
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
}

.kaf-careerdetail-jobcard__steps {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.kaf-careerdetail-jobcard__steps ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.kaf-careerdetail-jobcard__steps li {
    min-height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.13);
    color: rgba(255, 255, 255, 0.9);
    font-size: 10.5px;
    line-height: 1;
    font-weight: 800;
}

.kaf-careerdetail-main {
    padding: 86px 0 66px;
}

.kaf-careerdetail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 28px;
}

.kaf-careerdetail-content {
    padding: 28px;
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 22px 58px rgba(5, 32, 17, 0.08);
}

.kaf-careerdetail-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 34px;
}

.kaf-careerdetail-summary div {
    min-height: 96px;
    padding: 15px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.055);
}

.kaf-careerdetail-summary span {
    display: block;
    margin-bottom: 9px;
    color: #667085;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
}

.kaf-careerdetail-summary strong {
    display: block;
    color: #052011;
    font-size: 13px;
    line-height: 1.34;
    font-weight: 850;
}

.kaf-careerdetail-block {
    padding: 34px 0;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.kaf-careerdetail-block:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.kaf-careerdetail-block h2 {
    max-width: 680px;
    margin: 14px 0 12px;
    color: #052011;
    font-size: clamp(25px, 2.1vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.045em;
    font-weight: 800;
}

.kaf-careerdetail-block p {
    max-width: 760px;
    margin: 0;
    color: #475467;
    font-size: 15px;
    line-height: 1.68;
    font-weight: 500;
}

.kaf-careerdetail-block ul {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.kaf-careerdetail-block li {
    position: relative;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 12px 16px 12px 48px;
    border-radius: 17px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.055);
    color: #1f2937;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 650;
}

.kaf-careerdetail-block li::before {
    content: "✓";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(5, 32, 17, 0.1);
    color: #052011;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    transform: translateY(-50%);
}

.kaf-careerdetail-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.kaf-careerdetail-benefits span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.18);
    color: #92400e;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
}

.kaf-careerdetail-apply {
    position: sticky;
    top: calc(var(--kaf-header-h, 76px) + 22px);
    padding: 24px;
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(245, 158, 11, 0.2),
            transparent 12rem
        ),
        #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(5, 32, 17, 0.1);
}

.kaf-careerdetail-apply h3 {
    margin: 14px 0 10px;
    color: #052011;
    font-size: 28px;
    line-height: 1.08;
    letter-spacing: -0.045em;
    font-weight: 800;
}

.kaf-careerdetail-apply p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 500;
}

.kaf-careerdetail-apply > a {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #052011, #0b3d22);
    color: #fff;
    font-size: 12.5px;
    font-weight: 850;
    box-shadow: 0 16px 34px rgba(5, 32, 17, 0.18);
}

.kaf-careerdetail-apply__process {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.kaf-careerdetail-apply__process > span {
    display: block;
    margin-bottom: 12px;
    color: #667085;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 850;
}

.kaf-careerdetail-apply ol {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: careerApplyStep;
}

.kaf-careerdetail-apply li {
    counter-increment: careerApplyStep;
    position: relative;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 10px 12px 10px 42px;
    border-radius: 15px;
    background: #f8fafc;
    color: #1f2937;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 750;
}

.kaf-careerdetail-apply li::before {
    content: counter(careerApplyStep);
    position: absolute;
    left: 12px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
}

.kaf-careerdetail-related {
    padding: 30px 0 84px;
}

.kaf-careerdetail-related .kaf-careerv2-jobgrid {
    margin-top: 28px;
}

.kaf-careerdetail-cta {
    margin-top: 0;
}

@media (max-width: 1120px) {
    .kaf-careerdetail-hero__grid,
    .kaf-careerdetail-layout {
        grid-template-columns: 1fr;
    }

    .kaf-careerdetail-hero__panel {
        max-width: 560px;
    }

    .kaf-careerdetail-apply {
        position: static;
    }

    .kaf-careerdetail-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .kaf-careerdetail-hero {
        min-height: auto;
        padding: calc(var(--kaf-header-h, 76px) + 38px) 0 48px;
    }

    .kaf-careerdetail-hero__grid {
        gap: 28px;
    }

    .kaf-careerdetail-hero h1 {
        font-size: 34px;
        line-height: 1.07;
    }

    .kaf-careerdetail-hero__actions .kaf-careerv2-btn {
        width: 100%;
    }

    .kaf-careerdetail-jobcard {
        padding: 20px;
        border-radius: 24px;
    }

    .kaf-careerdetail-jobcard__steps ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kaf-careerdetail-main {
        padding: 52px 0 46px;
    }

    .kaf-careerdetail-content,
    .kaf-careerdetail-apply {
        padding: 20px;
        border-radius: 24px;
    }

    .kaf-careerdetail-summary {
        grid-template-columns: 1fr;
        margin-bottom: 22px;
    }

    .kaf-careerdetail-summary div {
        min-height: auto;
    }

    .kaf-careerdetail-block {
        padding: 28px 0;
    }

    .kaf-careerdetail-block h2 {
        font-size: 26px;
    }

    .kaf-careerdetail-block li {
        align-items: flex-start;
    }
}

/* =========================================================
   CAREER INDEX HERO BG PATCH
   Hero Karier pakai background image + gradient seperti pakem v2
   ========================================================= */

.kaf-careerv2-hero {
    position: relative !important;
    min-height: 82svh !important;
    display: flex !important;
    align-items: center !important;
    padding: calc(var(--kaf-header-h, 76px) + 58px) 0 78px !important;
    background: #052011 !important;
    overflow: hidden !important;
}

.kaf-careerv2-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background-image: var(--careerHeroBg) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 0.46 !important;
    transform: scale(1.035) !important;
}

.kaf-careerv2-hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(245, 158, 11, 0.34),
            transparent 25rem
        ),
        radial-gradient(
            circle at 16% 84%,
            rgba(19, 91, 49, 0.42),
            transparent 24rem
        ),
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.96) 0%,
            rgba(5, 32, 17, 0.82) 42%,
            rgba(5, 32, 17, 0.38) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 32, 17, 0.36) 0%,
            rgba(5, 32, 17, 0.88) 100%
        ) !important;
    pointer-events: none !important;
}

.kaf-careerv2-hero .kaf-container {
    position: relative !important;
    z-index: 2 !important;
}

.kaf-careerv2-hero__grid {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.03fr) minmax(330px, 0.58fr) !important;
    align-items: center !important;
    gap: 56px !important;
}

.kaf-careerv2-hero__copy {
    max-width: 760px !important;
}

.kaf-careerv2-hero .kaf-careerv2-crumb {
    margin-bottom: 22px !important;
}

.kaf-careerv2-hero .kaf-careerv2-crumb,
.kaf-careerv2-hero .kaf-careerv2-crumb a {
    color: rgba(255, 255, 255, 0.76) !important;
}

.kaf-careerv2-hero .kaf-careerv2-eyebrow {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff7ed !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.kaf-careerv2-hero__copy h1 {
    max-width: 720px !important;
    margin: 18px 0 16px !important;
    color: #fff !important;
    font-size: clamp(38px, 4.25vw, 62px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
    font-weight: 800 !important;
    text-shadow: 0 18px 44px rgba(0, 0, 0, 0.24) !important;
}

.kaf-careerv2-hero__copy p {
    max-width: 650px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: clamp(14px, 1.08vw, 17px) !important;
    line-height: 1.58 !important;
    font-weight: 500 !important;
}

.kaf-careerv2-hero__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 32px !important;
}

.kaf-careerv2-hero__actions .kaf-careerv2-btn {
    min-height: 48px !important;
    padding-inline: 22px !important;
}

.kaf-careerv2-hero__panel {
    min-width: 0 !important;
}

.kaf-careerv2-talentpanel {
    position: relative !important;
    padding: 24px !important;
    border-radius: 30px !important;
    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(245, 158, 11, 0.22),
            transparent 12rem
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.09)
        ) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow:
        0 28px 76px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

.kaf-careerv2-talentpanel__top span,
.kaf-careerv2-talentpanel__top strong,
.kaf-careerv2-talentpanel__role span,
.kaf-careerv2-talentpanel__role strong,
.kaf-careerv2-talentpanel__role p,
.kaf-careerv2-talentpanel__progress span,
.kaf-careerv2-talentpanel__progress b {
    color: #fff !important;
}

.kaf-careerv2-talentpanel__role,
.kaf-careerv2-talentpanel__progress {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.kaf-careerv2-talentpanel__role.is-primary {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: rgba(245, 158, 11, 0.28) !important;
}

.kaf-careerv2-talentpanel__avatars div {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

@media (max-width: 980px) {
    .kaf-careerv2-hero {
        min-height: auto !important;
        padding: calc(var(--kaf-header-h, 76px) + 40px) 0 54px !important;
    }

    .kaf-careerv2-hero__grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .kaf-careerv2-hero__copy h1 {
        font-size: 36px !important;
        line-height: 1.06 !important;
    }

    .kaf-careerv2-hero__actions .kaf-careerv2-btn {
        width: 100% !important;
    }

    .kaf-careerv2-talentpanel {
        border-radius: 24px !important;
        padding: 20px !important;
    }
}

/* =========================================================
   CAREER HERO EXACT DOWNLOAD CENTER PATCH
   Karier index hero disamakan dengan hero Download Center
   ========================================================= */

.kaf-careerv2 {
    --career-orange: #f59e0b;
    --career-green: #052011;
    --career-teal: #076666;
}

.kaf-careerv2-hero {
    position: relative !important;
    min-height: 0 !important;
    display: block !important;
    align-items: initial !important;
    padding: 150px 0 78px !important;
    overflow: hidden !important;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.88) 0%,
            rgba(7, 102, 102, 0.66) 48%,
            rgba(245, 158, 11, 0.24) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--careerHeroBg) center center / cover no-repeat !important;
    border-radius: 0 0 42px 42px !important;
}

.kaf-careerv2-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18)) !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none !important;
}

.kaf-careerv2-hero::after {
    content: none !important;
    display: none !important;
}

.kaf-careerv2-hero .kaf-container {
    position: relative !important;
    z-index: 2 !important;
}

.kaf-careerv2-hero__grid {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
    gap: 42px !important;
    align-items: center !important;
}

.kaf-careerv2-hero__copy {
    max-width: none !important;
}

.kaf-careerv2-hero .kaf-careerv2-crumb {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 28px !important;
    padding: 9px 16px !important;
    border-radius: 999px !important;
    background: rgba(245, 158, 11, 0.96) !important;
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.24) !important;
    border: 0 !important;
}

.kaf-careerv2-hero .kaf-careerv2-crumb a,
.kaf-careerv2-hero .kaf-careerv2-crumb span {
    color: inherit !important;
    text-decoration: none !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

.kaf-careerv2-hero .kaf-careerv2-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.kaf-careerv2-hero .kaf-careerv2-eyebrow::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    margin-right: 8px !important;
    border-radius: 999px !important;
    background: var(--career-orange) !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18) !important;
}

.kaf-careerv2-hero__copy h1 {
    max-width: 760px !important;
    margin: 18px 0 16px !important;
    color: #fff !important;
    font-size: clamp(40px, 5.2vw, 72px) !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
    font-weight: 760 !important;
    text-shadow: none !important;
}

.kaf-careerv2-hero__copy p {
    max-width: 680px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 16px !important;
    line-height: 1.68 !important;
    font-weight: 470 !important;
    text-shadow: none !important;
}

.kaf-careerv2-hero__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 11px !important;
    margin-top: 28px !important;
}

.kaf-careerv2-hero__actions .kaf-careerv2-btn {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
}

.kaf-careerv2-btn--accent {
    background: var(--career-orange) !important;
    color: #fff !important;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24) !important;
}

.kaf-careerv2-btn--glass {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.kaf-careerv2-talentpanel {
    position: relative !important;
    min-height: 400px !important;
    padding: 24px !important;
    border-radius: 38px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    overflow: hidden !important;
}

.kaf-careerv2-talentpanel__top,
.kaf-careerv2-talentpanel__role,
.kaf-careerv2-talentpanel__progress {
    position: relative !important;
    z-index: 2 !important;
}

.kaf-careerv2-talentpanel__top span,
.kaf-careerv2-talentpanel__top strong,
.kaf-careerv2-talentpanel__role span,
.kaf-careerv2-talentpanel__role strong,
.kaf-careerv2-talentpanel__role p,
.kaf-careerv2-talentpanel__progress span,
.kaf-careerv2-talentpanel__progress b {
    color: #fff !important;
}

.kaf-careerv2-talentpanel__role,
.kaf-careerv2-talentpanel__progress {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.kaf-careerv2-talentpanel__role.is-primary {
    background: rgba(245, 158, 11, 0.18) !important;
    border: 1px solid rgba(245, 158, 11, 0.28) !important;
}

.kaf-careerv2-talentpanel__avatars div {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

@media (max-width: 1120px) {
    .kaf-careerv2-hero__grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    .kaf-careerv2-hero {
        padding: 124px 0 58px !important;
        border-radius: 0 0 30px 30px !important;
    }

    .kaf-careerv2-hero__copy h1 {
        font-size: 36px !important;
        line-height: 1.05 !important;
    }

    .kaf-careerv2-hero__copy p {
        font-size: 14.5px !important;
    }

    .kaf-careerv2-hero__actions .kaf-careerv2-btn {
        width: 100% !important;
    }

    .kaf-careerv2-talentpanel {
        min-height: 320px !important;
    }
}

/* =========================================================
   CAREER TOTAL REDESIGN V3
   Index hero compact + detail career redesign
   ========================================================= */

.kaf-careerv2-hero {
    position: relative !important;
    padding: 150px 0 80px !important;
    overflow: hidden !important;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.88) 0%,
            rgba(7, 102, 102, 0.66) 48%,
            rgba(245, 158, 11, 0.24) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--careerHeroBg) center center / cover no-repeat !important;
    border-radius: 0 0 42px 42px !important;
}

.kaf-careerv2-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18)) !important;
}

.kaf-careerv2-hero::after {
    content: none !important;
}

.kaf-careerv2-hero .kaf-container {
    position: relative !important;
    z-index: 2 !important;
}

.kaf-careerv2-hero__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 410px) !important;
    align-items: center !important;
    gap: 42px !important;
}

.kaf-careerv2-hero .kaf-careerv2-crumb {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
    padding: 9px 16px !important;
    border-radius: 999px !important;
    background: #f59e0b !important;
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(245, 158, 11, 0.24) !important;
}

.kaf-careerv2-hero .kaf-careerv2-crumb a,
.kaf-careerv2-hero .kaf-careerv2-crumb span {
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.kaf-careerv2-hero .kaf-careerv2-eyebrow {
    background: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.kaf-careerv2-hero__copy h1 {
    max-width: 760px !important;
    margin: 18px 0 14px !important;
    color: #fff !important;
    font-size: clamp(40px, 5vw, 68px) !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
    font-weight: 780 !important;
}

.kaf-careerv2-hero__copy p {
    max-width: 670px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 15.5px !important;
    line-height: 1.66 !important;
    font-weight: 500 !important;
}

.kaf-careerv2-hero__actions {
    gap: 12px !important;
    margin-top: 28px !important;
}

.kaf-careerv2-hero__actions .kaf-careerv2-btn {
    min-height: 48px !important;
    padding-inline: 22px !important;
}

.kaf-careerv2-talentpanel--compact {
    min-height: auto !important;
    padding: 22px !important;
    border-radius: 34px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

.kaf-careerv2-talentpanel__head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
}

.kaf-careerv2-talentpanel__badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: #f59e0b !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.kaf-careerv2-talentpanel__stats {
    text-align: right !important;
}

.kaf-careerv2-talentpanel__stats strong {
    display: block !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

.kaf-careerv2-talentpanel__stats small {
    display: block !important;
    margin-top: 5px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.kaf-careerv2-talentpanel__avatars {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
}

.kaf-careerv2-talentpanel__avatars div {
    width: 54px !important;
    height: 54px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.kaf-careerv2-talentpanel__roles {
    display: grid !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.kaf-careerv2-talentpanel__role {
    padding: 16px 16px 15px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.kaf-careerv2-talentpanel__role.is-primary {
    background: rgba(245, 158, 11, 0.18) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.kaf-careerv2-talentpanel__role span {
    display: block !important;
    margin-bottom: 8px !important;
    color: rgba(255, 255, 255, 0.76) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 850 !important;
}

.kaf-careerv2-talentpanel__role strong {
    display: block !important;
    color: #fff !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
}

.kaf-careerv2-talentpanel__role p {
    margin: 6px 0 0 !important;
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

.kaf-careerv2-talentpanel__progress {
    padding: 14px 16px !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.kaf-careerv2-talentpanel__progress-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.kaf-careerv2-talentpanel__progress-head span,
.kaf-careerv2-talentpanel__progress-head b {
    color: #fff !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
}

.kaf-careerv2-talentpanel__progress i {
    display: block !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    overflow: hidden !important;
    font-style: normal !important;
}

.kaf-careerv2-talentpanel__progress i em {
    display: block !important;
    width: 74% !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #f59e0b 0%, #f6d365 100%) !important;
}

/* DETAIL CAREER V3 */

.kaf-careerdetailv3 {
    background: #f9fafb;
    color: #052011;
}

.kaf-careerdetailv3-hero {
    position: relative;
    padding: 146px 0 64px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.88) 0%,
            rgba(7, 102, 102, 0.66) 48%,
            rgba(245, 158, 11, 0.22) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--careerDetailHeroBg) center center / cover no-repeat;
    border-radius: 0 0 42px 42px;
}

.kaf-careerdetailv3-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
}

.kaf-careerdetailv3-hero .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-careerdetailv3-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    gap: 36px;
    align-items: start;
}

.kaf-careerdetailv3-hero .kaf-careerv2-crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    box-shadow: 0 14px 30px rgba(245, 158, 11, 0.24);
}

.kaf-careerdetailv3-hero .kaf-careerv2-crumb a,
.kaf-careerdetailv3-hero .kaf-careerv2-crumb span {
    color: inherit;
    font-size: 12px;
    font-weight: 700;
}

.kaf-careerdetailv3-hero .kaf-careerv2-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-careerdetailv3-hero__copy h1 {
    margin: 18px 0 14px;
    color: #fff;
    font-size: clamp(34px, 4.1vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.05em;
    font-weight: 800;
}

.kaf-careerdetailv3-hero__copy p {
    max-width: 650px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15.5px;
    line-height: 1.66;
    font-weight: 500;
}

.kaf-careerdetailv3-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.kaf-careerdetailv3-hero__chips span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-weight: 800;
}

.kaf-careerdetailv3-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.kaf-careerdetailv3-hero__actions .kaf-careerv2-btn {
    min-height: 48px;
    padding-inline: 22px;
}

.kaf-careerdetailv3-quickcard {
    padding: 22px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.kaf-careerdetailv3-quickcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.kaf-careerdetailv3-quickcard__top span,
.kaf-careerdetailv3-quickcard__top b {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
}

.kaf-careerdetailv3-quickcard__top span {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
}

.kaf-careerdetailv3-quickcard__top b {
    background: #f59e0b;
    color: #fff;
}

.kaf-careerdetailv3-quickcard__facts {
    display: grid;
    gap: 10px;
}

.kaf-careerdetailv3-quickcard__facts div {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.kaf-careerdetailv3-quickcard__facts span,
.kaf-careerdetailv3-quickcard__process > span {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 850;
}

.kaf-careerdetailv3-quickcard__facts strong {
    display: block;
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
}

.kaf-careerdetailv3-quickcard__process {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.kaf-careerdetailv3-quickcard__process ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.kaf-careerdetailv3-quickcard__process li {
    min-height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    font-size: 10.5px;
    font-weight: 800;
}

.kaf-careerdetailv3-main {
    padding: 58px 0 34px;
}

.kaf-careerdetailv3-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 24px;
}

.kaf-careerdetailv3-content {
    padding: 28px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 48px rgba(5, 32, 17, 0.08);
}

.kaf-careerdetailv3-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 28px;
}

.kaf-careerdetailv3-summary div {
    padding: 14px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.055);
}

.kaf-careerdetailv3-summary span {
    display: block;
    margin-bottom: 8px;
    color: #667085;
    font-size: 11px;
    font-weight: 800;
}

.kaf-careerdetailv3-summary strong {
    display: block;
    color: #052011;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 850;
}

.kaf-careerdetailv3-block + .kaf-careerdetailv3-block {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.kaf-careerdetailv3-block__head h2 {
    margin: 14px 0 12px;
    color: #052011;
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.kaf-careerdetailv3-block p {
    margin: 0;
    color: #475467;
    font-size: 15px;
    line-height: 1.68;
    font-weight: 500;
}

.kaf-careerdetailv3-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kaf-careerdetailv3-list li {
    position: relative;
    padding: 14px 16px 14px 46px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.055);
    color: #1f2937;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 650;
}

.kaf-careerdetailv3-list li::before {
    content: "✓";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(5, 32, 17, 0.1);
    color: #052011;
    font-size: 12px;
    font-weight: 900;
    transform: translateY(-50%);
}

.kaf-careerdetailv3-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kaf-careerdetailv3-benefits span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.18);
    color: #92400e;
    font-size: 12px;
    font-weight: 850;
}

.kaf-careerdetailv3-sidebar {
    position: sticky;
    top: calc(var(--kaf-header-h, 76px) + 18px);
}

.kaf-careerdetailv3-applycard {
    padding: 22px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 48px rgba(5, 32, 17, 0.08);
}

.kaf-careerdetailv3-applycard h3 {
    margin: 14px 0 10px;
    color: #052011;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.kaf-careerdetailv3-applycard p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.58;
    font-weight: 500;
}

.kaf-careerdetailv3-applycard > a {
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #052011, #0b3d22);
    color: #fff;
    font-size: 12.5px;
    font-weight: 850;
    box-shadow: 0 14px 30px rgba(5, 32, 17, 0.18);
}

.kaf-careerdetailv3-applycard__mini {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.kaf-careerdetailv3-applycard__mini div {
    padding: 13px 14px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.055);
}

.kaf-careerdetailv3-applycard__mini span {
    display: block;
    margin-bottom: 6px;
    color: #667085;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 850;
}

.kaf-careerdetailv3-applycard__mini strong {
    display: block;
    color: #052011;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
}

.kaf-careerdetailv3-related {
    padding: 16px 0 84px;
}

@media (max-width: 1120px) {
    .kaf-careerv2-hero__grid,
    .kaf-careerdetailv3-hero__grid,
    .kaf-careerdetailv3-layout {
        grid-template-columns: 1fr !important;
    }

    .kaf-careerdetailv3-sidebar {
        position: static;
    }

    .kaf-careerdetailv3-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .kaf-careerv2-hero,
    .kaf-careerdetailv3-hero {
        padding: 124px 0 56px !important;
        border-radius: 0 0 30px 30px !important;
    }

    .kaf-careerv2-hero__copy h1,
    .kaf-careerdetailv3-hero__copy h1 {
        font-size: 34px !important;
        line-height: 1.05 !important;
    }

    .kaf-careerv2-hero__copy p,
    .kaf-careerdetailv3-hero__copy p {
        font-size: 14.5px !important;
    }

    .kaf-careerv2-hero__actions .kaf-careerv2-btn,
    .kaf-careerdetailv3-hero__actions .kaf-careerv2-btn {
        width: 100% !important;
    }

    .kaf-careerdetailv3-main {
        padding: 42px 0 28px;
    }

    .kaf-careerdetailv3-content,
    .kaf-careerdetailv3-applycard,
    .kaf-careerdetailv3-quickcard {
        padding: 20px;
        border-radius: 24px;
    }

    .kaf-careerdetailv3-summary {
        grid-template-columns: 1fr;
    }

    .kaf-careerdetailv3-block__head h2 {
        font-size: 25px;
    }
}

/* =========================================================
   CAREER OPENPANEL COMPACT FIX
   Panel kanan hero Karier dibuat lebih clean dan compact
   ========================================================= */

.kaf-careerv2-openpanel {
    position: relative !important;
    width: 100% !important;
    max-width: 410px !important;
    margin-left: auto !important;
    padding: 22px !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, 0.13) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

.kaf-careerv2-openpanel__top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 92px !important;
    align-items: start !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
}

.kaf-careerv2-openpanel__top span {
    width: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 13px !important;
    margin-bottom: 10px !important;
    border-radius: 999px !important;
    background: #f59e0b !important;
    color: #fff !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

.kaf-careerv2-openpanel__top strong {
    display: block !important;
    max-width: 220px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
    font-weight: 650 !important;
}

.kaf-careerv2-openpanel__count {
    min-height: 76px !important;
    display: grid !important;
    place-items: center !important;
    padding: 12px 10px !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    text-align: center !important;
}

.kaf-careerv2-openpanel__count b {
    display: block !important;
    color: #fff !important;
    font-size: 30px !important;
    line-height: 0.95 !important;
    letter-spacing: -0.04em !important;
    font-weight: 900 !important;
}

.kaf-careerv2-openpanel__count small {
    display: block !important;
    margin-top: 6px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
}

.kaf-careerv2-openpanel__chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

.kaf-careerv2-openpanel__chips span {
    width: 44px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.13) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

.kaf-careerv2-openpanel__list {
    display: grid !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.kaf-careerv2-openpanel__list article {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 78px !important;
    padding: 14px 15px !important;
    border-radius: 21px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.kaf-careerv2-openpanel__list article.is-priority {
    background: rgba(245, 158, 11, 0.17) !important;
    border-color: rgba(245, 158, 11, 0.28) !important;
}

.kaf-careerv2-openpanel__list article span {
    display: block !important;
    margin-bottom: 6px !important;
    color: rgba(255, 255, 255, 0.68) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 850 !important;
}

.kaf-careerv2-openpanel__list article strong {
    display: block !important;
    color: #fff !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
    font-weight: 850 !important;
}

.kaf-careerv2-openpanel__list article b {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

.kaf-careerv2-openpanel__progress {
    padding: 14px 15px !important;
    border-radius: 21px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.kaf-careerv2-openpanel__progress div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.kaf-careerv2-openpanel__progress span,
.kaf-careerv2-openpanel__progress b {
    color: #fff !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
}

.kaf-careerv2-openpanel__progress b {
    color: #fff7ed !important;
}

.kaf-careerv2-openpanel__progress i {
    display: block !important;
    width: 100% !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    overflow: hidden !important;
    font-style: normal !important;
}

.kaf-careerv2-openpanel__progress i em {
    display: block !important;
    width: 72% !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #f59e0b 0%, #f6d365 100%) !important;
}

@media (max-width: 1120px) {
    .kaf-careerv2-openpanel {
        max-width: 520px !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 640px) {
    .kaf-careerv2-openpanel {
        padding: 18px !important;
        border-radius: 24px !important;
    }

    .kaf-careerv2-openpanel__top {
        grid-template-columns: 1fr !important;
    }

    .kaf-careerv2-openpanel__count {
        min-height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
    }

    .kaf-careerv2-openpanel__list article {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .kaf-careerv2-openpanel__list article b {
        width: fit-content !important;
    }
}

/* =========================================================
   CONTACT V2 ENTERPRISE PATCH
   Halaman Kontak profesional, enterprise, dan sesuai pakem KAFNET
   ========================================================= */

.kaf-contactv2,
.kaf-contactv2 * {
    font-family: var(
        --kaf-font,
        "Plus Jakarta Sans",
        "Jakarta Sans",
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif
    );
}

.kaf-contactv2 {
    background: var(--kaf-bg, #f9fafb);
    color: var(--kaf-dark, #052011);
    overflow: hidden;
}

.kaf-contactv2-hero {
    position: relative;
    padding: 150px 0 82px;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.88) 0%,
            rgba(7, 102, 102, 0.66) 48%,
            rgba(245, 158, 11, 0.24) 100%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(255, 255, 255, 0.18),
            transparent 24rem
        ),
        var(--contactHeroBg) center center / cover no-repeat;
    border-radius: 0 0 42px 42px;
}

.kaf-contactv2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255, 255, 255, 0.1),
            transparent 22rem
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
    pointer-events: none;
}

.kaf-contactv2-hero .kaf-container {
    position: relative;
    z-index: 2;
}

.kaf-contactv2-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
    gap: 46px;
    align-items: center;
}

.kaf-contactv2-hero__copy {
    max-width: 780px;
}

.kaf-contactv2-crumb {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    box-shadow: 0 14px 30px rgba(245, 158, 11, 0.24);
}

.kaf-contactv2-crumb a,
.kaf-contactv2-crumb span {
    color: inherit;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

.kaf-contactv2-eyebrow {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(5, 32, 17, 0.07);
    border: 1px solid rgba(5, 32, 17, 0.08);
    color: #076666;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.02em;
    font-weight: 850;
}

.kaf-contactv2-hero .kaf-contactv2-eyebrow {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
    border-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-contactv2-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16);
}

.kaf-contactv2-hero__copy h1 {
    max-width: 790px;
    margin: 18px 0 16px;
    color: #fff;
    font-size: clamp(40px, 5vw, 70px);
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 780;
}

.kaf-contactv2-hero__copy p {
    max-width: 690px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15.8px;
    line-height: 1.68;
    font-weight: 500;
}

.kaf-contactv2-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.kaf-contactv2-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
}

.kaf-contactv2-btn--accent {
    background: #f59e0b;
    color: #fff;
    box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24);
}

.kaf-contactv2-btn--glass {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kaf-contactv2-command {
    padding: 22px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.kaf-contactv2-command__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.kaf-contactv2-command__top span,
.kaf-contactv2-command__top b {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
}

.kaf-contactv2-command__top span {
    background: #f59e0b;
    color: #fff;
}

.kaf-contactv2-command__top b {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.kaf-contactv2-command h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 26px;
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.kaf-contactv2-command__items {
    display: grid;
    gap: 10px;
}

.kaf-contactv2-command__items a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.kaf-contactv2-command__items i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.2);
    color: #fff7ed;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.kaf-contactv2-command__items strong {
    display: block;
    color: #fff;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 850;
}

.kaf-contactv2-command__items span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 550;
}

.kaf-contactv2-section-head {
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
}

.kaf-contactv2-section-head h2 {
    margin: 14px auto 10px;
    color: #052011;
    font-size: clamp(32px, 3vw, 48px);
    line-height: 1.04;
    letter-spacing: -0.052em;
    font-weight: 800;
}

.kaf-contactv2-section-head p {
    max-width: 620px;
    margin: 0 auto;
    color: #667085;
    font-size: 14.5px;
    line-height: 1.6;
    font-weight: 500;
}

.kaf-contactv2-channels {
    padding: 76px 0 34px;
}

.kaf-contactv2-channelgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.kaf-contactv2-channelgrid article {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 46px rgba(5, 32, 17, 0.07);
}

.kaf-contactv2-channelgrid article > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.kaf-contactv2-channelgrid article span,
.kaf-contactv2-channelgrid article b {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 850;
}

.kaf-contactv2-channelgrid article span {
    background: rgba(7, 102, 102, 0.08);
    color: #076666;
}

.kaf-contactv2-channelgrid article b {
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
}

.kaf-contactv2-channelgrid h3 {
    margin: 0 0 10px;
    color: #052011;
    font-size: 22px;
    line-height: 1.12;
    letter-spacing: -0.035em;
    font-weight: 800;
}

.kaf-contactv2-channelgrid p {
    margin: 0;
    color: #667085;
    font-size: 13.8px;
    line-height: 1.55;
    font-weight: 500;
}

.kaf-contactv2-channelgrid a {
    width: fit-content;
    margin-top: auto;
    padding-top: 22px;
    color: #052011;
    font-size: 13px;
    font-weight: 850;
}

.kaf-contactv2-main {
    padding: 42px 0 36px;
}

.kaf-contactv2-main__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
    gap: 22px;
    align-items: stretch;
}

.kaf-contactv2-formbox,
.kaf-contactv2-office,
.kaf-contactv2-mapbox {
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 48px rgba(5, 32, 17, 0.075);
}

.kaf-contactv2-formbox {
    padding: 28px;
}

.kaf-contactv2-formbox h2 {
    max-width: 620px;
    margin: 14px 0 10px;
    color: #052011;
    font-size: clamp(28px, 2.5vw, 42px);
    line-height: 1.06;
    letter-spacing: -0.048em;
    font-weight: 800;
}

.kaf-contactv2-formbox p {
    max-width: 650px;
    margin: 0 0 22px;
    color: #667085;
    font-size: 14.5px;
    line-height: 1.62;
    font-weight: 500;
}

.kaf-contactv2-form {
    display: grid;
    gap: 14px;
}

.kaf-contactv2-form label {
    display: grid;
    gap: 8px;
}

.kaf-contactv2-form label span {
    color: #344054;
    font-size: 12px;
    font-weight: 850;
}

.kaf-contactv2-form input,
.kaf-contactv2-form select,
.kaf-contactv2-form textarea {
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.11);
    outline: none;
    border-radius: 16px;
    background: #f8fafc;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
}

.kaf-contactv2-form input,
.kaf-contactv2-form select {
    height: 50px;
    padding: 0 14px;
}

.kaf-contactv2-form textarea {
    resize: vertical;
    min-height: 118px;
    padding: 14px;
}

.kaf-contactv2-form button {
    min-height: 50px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #052011, #0b3d22);
    color: #fff;
    font-size: 12.5px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(5, 32, 17, 0.16);
}

.kaf-contactv2-office {
    overflow: hidden;
}

.kaf-contactv2-office__media {
    position: relative;
    height: 230px;
    background: linear-gradient(135deg, #052011, #076666);
}

.kaf-contactv2-office__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kaf-contactv2-office__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(5, 32, 17, 0.08),
        rgba(5, 32, 17, 0.72)
    );
}

.kaf-contactv2-office__media span {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 2;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.kaf-contactv2-office__body {
    padding: 24px;
}

.kaf-contactv2-office__body h3 {
    margin: 0 0 18px;
    color: #052011;
    font-size: 26px;
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.kaf-contactv2-info {
    display: grid;
    gap: 10px;
}

.kaf-contactv2-info div {
    padding: 14px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.055);
}

.kaf-contactv2-info span {
    display: block;
    margin-bottom: 7px;
    color: #667085;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 850;
}

.kaf-contactv2-info a,
.kaf-contactv2-info p {
    margin: 0;
    color: #052011;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 780;
}

.kaf-contactv2-mapbox {
    margin-top: 22px;
    padding: 22px;
}

.kaf-contactv2-mapbox__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.kaf-contactv2-mapbox__head h2 {
    margin: 12px 0 0;
    color: #052011;
    font-size: clamp(26px, 2.4vw, 38px);
    line-height: 1.06;
    letter-spacing: -0.045em;
    font-weight: 800;
}

.kaf-contactv2-mapbox__head > a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.kaf-contactv2-map {
    height: 430px;
    overflow: hidden;
    border-radius: 24px;
    background: #eef2f7;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.kaf-contactv2-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.kaf-contactv2-process {
    padding: 44px 0 84px;
}

.kaf-contactv2-process__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.kaf-contactv2-process__grid article {
    padding: 24px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 44px rgba(5, 32, 17, 0.06);
}

.kaf-contactv2-process__grid article > span {
    display: block;
    margin-bottom: 30px;
    color: rgba(5, 32, 17, 0.18);
    font-size: 54px;
    line-height: 0.8;
    letter-spacing: -0.06em;
    font-weight: 900;
}

.kaf-contactv2-process__grid h3 {
    margin: 0 0 9px;
    color: #052011;
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 800;
}

.kaf-contactv2-process__grid p {
    margin: 0;
    color: #667085;
    font-size: 13.8px;
    line-height: 1.55;
    font-weight: 500;
}

.kaf-contactv2 [data-kaf-contact-reveal] {
    opacity: 0;
    transform: translateY(24px);
}

.kaf-contactv2 [data-kaf-contact-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1120px) {
    .kaf-contactv2-hero__grid,
    .kaf-contactv2-main__grid {
        grid-template-columns: 1fr;
    }

    .kaf-contactv2-channelgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kaf-contactv2-command {
        max-width: 620px;
    }
}

@media (max-width: 720px) {
    .kaf-contactv2-hero {
        padding: 124px 0 56px;
        border-radius: 0 0 30px 30px;
    }

    .kaf-contactv2-hero__copy h1 {
        font-size: 34px;
        line-height: 1.05;
    }

    .kaf-contactv2-hero__copy p {
        font-size: 14.5px;
    }

    .kaf-contactv2-hero__actions .kaf-contactv2-btn {
        width: 100%;
    }

    .kaf-contactv2-channelgrid,
    .kaf-contactv2-process__grid {
        grid-template-columns: 1fr;
    }

    .kaf-contactv2-channels {
        padding-top: 52px;
    }

    .kaf-contactv2-formbox,
    .kaf-contactv2-office__body,
    .kaf-contactv2-mapbox {
        padding: 20px;
        border-radius: 24px;
    }

    .kaf-contactv2-mapbox__head {
        display: block;
    }

    .kaf-contactv2-mapbox__head > a {
        margin-top: 16px;
    }

    .kaf-contactv2-map {
        height: 320px;
        border-radius: 20px;
    }
}

/* =========================================================
   Website Add-ons / Layanan Tambahan Page
   ========================================================= */

.kaf-addons-list {
    padding: clamp(58px, 7vw, 104px) 0;
    background: linear-gradient(180deg, #f8fffc 0%, #ffffff 100%);
}

.kaf-addons-list__grid {
    min-height: 0 !important;
}

.kaf-addons-page #layanan-tambahan .kaf-s5__addons,
.kaf-addon-detail-page #layanan-tambahan .kaf-s5__addons {
    min-height: 0;
}

.kaf-addons-page #layanan-tambahan .kaf-addon-card,
.kaf-addon-detail-page #layanan-tambahan .kaf-addon-card {
    min-height: 360px;
}

#layanan-tambahan .kaf-addon-card__desc {
    max-width: 86%;
    margin: 12px auto 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    line-height: 1.5;
}

.kaf-addons-toolbar .kaf-packagesv2-toolbar__inner {
    align-items: center;
}

.kaf-packagesv2-bridge__chips a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: #0f766e;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.kaf-addon-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.kaf-addon-detail-card,
.kaf-addon-detail-side__box {
    border: 1px solid rgba(15, 118, 110, 0.12);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.07);
}

.kaf-addon-detail-card {
    padding: clamp(26px, 4vw, 44px);
}

.kaf-addon-detail-card h2 {
    max-width: 780px;
    margin: 10px 0 14px;
    color: #062f2f;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.03;
    letter-spacing: -0.055em;
    font-weight: 780;
}

.kaf-addon-detail-card p {
    max-width: 760px;
    color: #5b6b69;
    font-size: 16px;
    line-height: 1.75;
}

.kaf-addon-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.kaf-addon-detail-meta > div {
    padding: 16px;
    border-radius: 20px;
    background: #effaf7;
}

.kaf-addon-detail-meta span {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.kaf-addon-detail-meta strong {
    color: #064e3b;
    font-size: 16px;
}

.kaf-addon-detail-side__box {
    position: sticky;
    top: 96px;
    padding: 26px;
    background: linear-gradient(180deg, #ffffff 0%, #effaf7 100%);
}

.kaf-addon-detail-side__box h3 {
    margin: 0 0 10px;
    color: #062f2f;
    font-size: 24px;
    line-height: 1.14;
    letter-spacing: -0.035em;
}

.kaf-addon-detail-side__box p {
    color: #64748b;
    line-height: 1.62;
}

@media (max-width: 980px) {
    .kaf-addon-detail-grid,
    .kaf-addon-detail-meta {
        grid-template-columns: 1fr;
    }

    .kaf-addon-detail-side__box {
        position: static;
    }

    .kaf-addons-page #layanan-tambahan .kaf-addon-card,
    .kaf-addon-detail-page #layanan-tambahan .kaf-addon-card {
        min-height: 310px;
    }
}

/* Package Detail Enterprise Lite */
.kaf-packagedetailx {
    background: #f9fafb;
    color: #052011;
    overflow: hidden;
}

.kaf-packagedetailx-hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: 140px 0 78px;
    background-image: var(--pkgDetailHero);
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

.kaf-packagedetailx-hero__layer {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(
            circle at 82% 26%,
            rgba(245, 158, 11, 0.28),
            transparent 34%
        ),
        linear-gradient(
            90deg,
            rgba(5, 32, 17, 0.96),
            rgba(5, 32, 17, 0.78),
            rgba(5, 32, 17, 0.38)
        );
}

.kaf-packagedetailx-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 30px;
    align-items: end;
}

.kaf-packagedetailx-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 800;
}

.kaf-packagedetailx-crumb a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.kaf-packagedetailx-eyebrow {
    display: inline-flex;
    width: max-content;
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kaf-packagedetailx-hero__copy h1 {
    max-width: 820px;
    margin: 0;
    color: #fff;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 0.96;
    letter-spacing: -0.055em;
}

.kaf-packagedetailx-hero__copy p {
    max-width: 700px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    font-weight: 620;
    line-height: 1.7;
}

.kaf-packagedetailx-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.kaf-packagedetailx-btn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.kaf-packagedetailx-btn--accent {
    background: #f59e0b;
    color: #fff;
}

.kaf-packagedetailx-btn--glass {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.kaf-packagedetailx-summary {
    padding: 22px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
}

.kaf-packagedetailx-summary__top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(5, 32, 17, 0.1);
}

.kaf-packagedetailx-summary__top span,
.kaf-packagedetailx-summary__price span,
.kaf-packagedetailx-summary__price em,
.kaf-packagedetailx-summary__meta span {
    color: #6b7280;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.kaf-packagedetailx-summary__top strong {
    color: #052011;
    font-size: 26px;
    font-weight: 950;
}

.kaf-packagedetailx-summary__price {
    padding: 18px 0;
}

.kaf-packagedetailx-summary__price b {
    display: block;
    margin: 5px 0;
    color: #052011;
    font-size: 32px;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.kaf-packagedetailx-summary__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.kaf-packagedetailx-summary__meta div {
    min-width: 0;
    padding: 13px;
    border-radius: 16px;
    background: #f8fafc;
}

.kaf-packagedetailx-summary__meta strong {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #052011;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kaf-packagedetailx-summary p {
    margin: 15px 0 0;
    color: #4b5563;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.6;
}

.kaf-packagedetailx-strip {
    margin-top: -30px;
    position: relative;
    z-index: 2;
}

.kaf-packagedetailx-strip__grid {
    display: grid;
    grid-template-columns: 0.7fr 0.7fr 1.2fr;
    gap: 12px;
    padding: 14px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(5, 32, 17, 0.1);
}

.kaf-packagedetailx-strip article {
    padding: 20px;
    border-radius: 20px;
    background: #f9fafb;
}

.kaf-packagedetailx-strip span {
    display: block;
    color: #6b7280;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kaf-packagedetailx-strip strong {
    display: block;
    margin-top: 8px;
    color: #052011;
    font-size: 16px;
    font-weight: 950;
    line-height: 1.3;
}

.kaf-packagedetailx-overview,
.kaf-packagedetailx-fit,
.kaf-packagedetailx-includes,
.kaf-packagedetailx-steps,
.kaf-packagedetailx-related {
    padding: 78px 0;
}

.kaf-packagedetailx-section-head {
    max-width: 760px;
    margin-bottom: 28px;
}

.kaf-packagedetailx-section-head .kaf-packagedetailx-eyebrow,
.kaf-packagedetailx-includes__copy .kaf-packagedetailx-eyebrow,
.kaf-packagedetailx-fit .kaf-packagedetailx-eyebrow {
    background: #fff7ed;
    color: #c2410c;
}

.kaf-packagedetailx-section-head h2,
.kaf-packagedetailx-fit h2,
.kaf-packagedetailx-includes__copy h2 {
    margin: 0;
    color: #052011;
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1;
    letter-spacing: -0.045em;
}

.kaf-packagedetailx-section-head p {
    max-width: 660px;
    margin: 14px 0 0;
    color: #4b5563;
    font-size: 15px;
    font-weight: 620;
    line-height: 1.7;
}

.kaf-packagedetailx-feature-grid,
.kaf-packagedetailx-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.kaf-packagedetailx-feature-grid article,
.kaf-packagedetailx-steps__grid article,
.kaf-packagedetailx-related__grid article {
    padding: 22px;
    border: 1px solid rgba(5, 32, 17, 0.08);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 14px 42px rgba(5, 32, 17, 0.055);
}

.kaf-packagedetailx-feature-grid article > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 28px;
    border-radius: 15px;
    background: #052011;
    color: #fff;
    font-weight: 950;
}

.kaf-packagedetailx-feature-grid h3,
.kaf-packagedetailx-includes__list h3,
.kaf-packagedetailx-steps__grid h3,
.kaf-packagedetailx-related__grid h3 {
    margin: 0;
    color: #052011;
    font-weight: 950;
    letter-spacing: -0.025em;
}

.kaf-packagedetailx-feature-grid p,
.kaf-packagedetailx-includes__list p,
.kaf-packagedetailx-steps__grid p,
.kaf-packagedetailx-related__grid p {
    margin: 9px 0 0;
    color: #4b5563;
    font-size: 12.5px;
    font-weight: 620;
    line-height: 1.6;
}

.kaf-packagedetailx-fit {
    padding-top: 0;
}

.kaf-packagedetailx-fit__box {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 22px;
    align-items: center;
    padding: 30px;
    border-radius: 32px;
    background: linear-gradient(135deg, #052011, #0f3b22);
}

.kaf-packagedetailx-fit__box h2 {
    color: #fff;
}

.kaf-packagedetailx-fit__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.kaf-packagedetailx-fit__chips span {
    padding: 11px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
}

.kaf-packagedetailx-includes {
    background: #fff;
}

.kaf-packagedetailx-includes__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: center;
}

.kaf-packagedetailx-includes__visual {
    min-height: 480px;
    overflow: hidden;
    border-radius: 32px;
    background: #052011;
}

.kaf-packagedetailx-includes__visual img {
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
}

.kaf-packagedetailx-includes__list {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.kaf-packagedetailx-includes__list article {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    background: #f9fafb;
}

.kaf-packagedetailx-includes__list article > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #fff;
    color: #f59e0b;
    font-size: 13px;
    font-weight: 950;
}

.kaf-packagedetailx-steps__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.kaf-packagedetailx-steps__grid article > span {
    color: #f59e0b;
    font-size: 13px;
    font-weight: 950;
}

.kaf-packagedetailx-steps__grid h3 {
    margin-top: 42px;
}

.kaf-packagedetailx-related {
    padding-top: 0;
}

.kaf-packagedetailx-related__grid span {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 8px 11px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 11px;
    font-weight: 900;
}

.kaf-packagedetailx-related__grid strong {
    display: block;
    margin-top: 16px;
    color: #052011;
    font-size: 18px;
    font-weight: 950;
}

.kaf-packagedetailx-related__grid a {
    display: inline-flex;
    margin-top: 14px;
    color: #c2410c;
    font-size: 13px;
    font-weight: 950;
    text-decoration: none;
}

@media (max-width: 1020px) {
    .kaf-packagedetailx-hero__grid,
    .kaf-packagedetailx-includes__grid,
    .kaf-packagedetailx-fit__box {
        grid-template-columns: 1fr;
    }

    .kaf-packagedetailx-summary {
        max-width: 520px;
    }

    .kaf-packagedetailx-strip__grid,
    .kaf-packagedetailx-feature-grid,
    .kaf-packagedetailx-steps__grid,
    .kaf-packagedetailx-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kaf-packagedetailx-fit__chips {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .kaf-packagedetailx-hero {
        min-height: auto;
        padding: 124px 0 56px;
    }

    .kaf-packagedetailx-hero__copy h1 {
        font-size: 40px;
    }

    .kaf-packagedetailx-strip {
        margin-top: 0;
        padding-top: 16px;
    }

    .kaf-packagedetailx-strip__grid,
    .kaf-packagedetailx-feature-grid,
    .kaf-packagedetailx-steps__grid,
    .kaf-packagedetailx-related__grid {
        grid-template-columns: 1fr;
    }

    .kaf-packagedetailx-overview,
    .kaf-packagedetailx-fit,
    .kaf-packagedetailx-includes,
    .kaf-packagedetailx-steps,
    .kaf-packagedetailx-related {
        padding: 56px 0;
    }

    .kaf-packagedetailx-includes__visual,
    .kaf-packagedetailx-includes__visual img {
        min-height: 330px;
    }

    .kaf-packagedetailx-includes__list article {
        grid-template-columns: 1fr;
    }
}

/* Addons Public */
.kaf-addons-list {
    padding: 72px 0;
    background: #f9fafb;
}

.kaf-addons-list__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kaf-addon-card__desc {
    margin: 8px 0 0;
    color: rgba(255,255,255,.78);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.55;
}

.kaf-addon-detail-main,
.kaf-addon-detail-benefits,
.kaf-addon-detail-includes {
    padding: 80px 0;
    background: #f9fafb;
}

.kaf-addon-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.kaf-addon-detail-card,
.kaf-addon-detail-side__box,
.kaf-addon-detail-benefitgrid article,
.kaf-addon-detail-includelist div {
    border: 1px solid rgba(5,32,17,.08);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 54px rgba(5,32,17,.06);
}

.kaf-addon-detail-card {
    padding: 30px;
}

.kaf-addon-detail-card h2 {
    margin: 0;
    color: #052011;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1;
    letter-spacing: -.045em;
}

.kaf-addon-detail-card p {
    margin: 16px 0 0;
    color: #4b5563;
    font-size: 15px;
    font-weight: 620;
    line-height: 1.75;
}

.kaf-addon-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin-top: 26px;
}

.kaf-addon-detail-meta div {
    padding: 16px;
    border-radius: 18px;
    background: #f8fafc;
}

.kaf-addon-detail-meta span {
    display: block;
    color: #6b7280;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.kaf-addon-detail-meta strong {
    display: block;
    margin-top: 6px;
    color: #052011;
    font-size: 14px;
    font-weight: 950;
}

.kaf-addon-detail-side img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 28px;
    margin-bottom: 14px;
}

.kaf-addon-detail-side__box {
    padding: 22px;
}

.kaf-addon-detail-side__box h3 {
    margin: 0;
    color: #052011;
    font-size: 22px;
    font-weight: 950;
}

.kaf-addon-detail-side__box p {
    margin: 10px 0 18px;
    color: #4b5563;
    font-size: 13px;
    font-weight: 620;
    line-height: 1.65;
}

.kaf-addon-detail-benefitgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
}

.kaf-addon-detail-benefitgrid article {
    padding: 24px;
}

.kaf-addon-detail-benefitgrid span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    border-radius: 16px;
    background: #052011;
    color: #fff;
    font-weight: 950;
}

.kaf-addon-detail-benefitgrid h3 {
    margin: 0;
    color: #052011;
    font-size: 18px;
    font-weight: 950;
}

.kaf-addon-detail-benefitgrid p {
    margin: 8px 0 0;
    color: #4b5563;
    font-size: 13px;
    font-weight: 620;
    line-height: 1.6;
}

.kaf-addon-detail-includelist {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}

.kaf-addon-detail-includelist div {
    padding: 20px;
}

.kaf-addon-detail-includelist span {
    color: #f59e0b;
    font-size: 13px;
    font-weight: 950;
}

.kaf-addon-detail-includelist p {
    margin: 34px 0 0;
    color: #052011;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
}

@media (max-width: 1080px) {
    .kaf-addons-list__grid,
    .kaf-addon-detail-benefitgrid,
    .kaf-addon-detail-includelist {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .kaf-addon-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .kaf-addons-list__grid,
    .kaf-addon-detail-benefitgrid,
    .kaf-addon-detail-includelist,
    .kaf-addon-detail-meta {
        grid-template-columns: 1fr;
    }
}

/* Addons Public */
.kaf-addons-list {
    padding: 72px 0;
    background: #f9fafb;
}

.kaf-addons-list__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kaf-addon-card__desc {
    margin: 8px 0 0;
    color: rgba(255,255,255,.78);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.55;
}

.kaf-addon-detail-main,
.kaf-addon-detail-benefits,
.kaf-addon-detail-includes {
    padding: 80px 0;
    background: #f9fafb;
}

.kaf-addon-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.kaf-addon-detail-card,
.kaf-addon-detail-side__box,
.kaf-addon-detail-benefitgrid article,
.kaf-addon-detail-includelist div {
    border: 1px solid rgba(5,32,17,.08);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 54px rgba(5,32,17,.06);
}

.kaf-addon-detail-card {
    padding: 30px;
}

.kaf-addon-detail-card h2 {
    margin: 0;
    color: #052011;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1;
    letter-spacing: -.045em;
}

.kaf-addon-detail-card p {
    margin: 16px 0 0;
    color: #4b5563;
    font-size: 15px;
    font-weight: 620;
    line-height: 1.75;
}

.kaf-addon-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin-top: 26px;
}

.kaf-addon-detail-meta div {
    padding: 16px;
    border-radius: 18px;
    background: #f8fafc;
}

.kaf-addon-detail-meta span {
    display: block;
    color: #6b7280;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.kaf-addon-detail-meta strong {
    display: block;
    margin-top: 6px;
    color: #052011;
    font-size: 14px;
    font-weight: 950;
}

.kaf-addon-detail-side img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 28px;
    margin-bottom: 14px;
}

.kaf-addon-detail-side__box {
    padding: 22px;
}

.kaf-addon-detail-side__box h3 {
    margin: 0;
    color: #052011;
    font-size: 22px;
    font-weight: 950;
}

.kaf-addon-detail-side__box p {
    margin: 10px 0 18px;
    color: #4b5563;
    font-size: 13px;
    font-weight: 620;
    line-height: 1.65;
}

.kaf-addon-detail-benefitgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
}

.kaf-addon-detail-benefitgrid article {
    padding: 24px;
}

.kaf-addon-detail-benefitgrid span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    border-radius: 16px;
    background: #052011;
    color: #fff;
    font-weight: 950;
}

.kaf-addon-detail-benefitgrid h3 {
    margin: 0;
    color: #052011;
    font-size: 18px;
    font-weight: 950;
}

.kaf-addon-detail-benefitgrid p {
    margin: 8px 0 0;
    color: #4b5563;
    font-size: 13px;
    font-weight: 620;
    line-height: 1.6;
}

.kaf-addon-detail-includelist {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}

.kaf-addon-detail-includelist div {
    padding: 20px;
}

.kaf-addon-detail-includelist span {
    color: #f59e0b;
    font-size: 13px;
    font-weight: 950;
}

.kaf-addon-detail-includelist p {
    margin: 34px 0 0;
    color: #052011;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
}

@media (max-width: 1080px) {
    .kaf-addons-list__grid,
    .kaf-addon-detail-benefitgrid,
    .kaf-addon-detail-includelist {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .kaf-addon-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .kaf-addons-list__grid,
    .kaf-addon-detail-benefitgrid,
    .kaf-addon-detail-includelist,
    .kaf-addon-detail-meta {
        grid-template-columns: 1fr;
    }
}

/* Addons footer readability fix */
.kaf-addons-page,
.kaf-addon-detail-page {
    background: #f9fafb;
}

.kaf-addons-cta,
.kaf-addon-detail-cta {
    position: relative;
    z-index: 2;
    margin-top: 0;
    margin-bottom: 0;
}

.kaf-addons-page + footer,
.kaf-addon-detail-page + footer,
.kaf-addons-page + .kaf-footer,
.kaf-addon-detail-page + .kaf-footer,
.kaf-addons-page + .site-footer,
.kaf-addon-detail-page + .site-footer {
    position: relative;
    z-index: 3;
    clear: both;
}

/* Addons CTA/footer readability fix */
.kaf-addons-cta,
.kaf-addon-detail-cta {
    padding: 72px 0;
    min-height: auto !important;
    background: #f9fafb;
}

.kaf-addons-cta .kaf-unified-cta__card,
.kaf-addon-detail-cta .kaf-unified-cta__card {
    min-height: 320px;
    align-items: center;
}

.kaf-addons-cta .kaf-unified-cta__copy h2,
.kaf-addon-detail-cta .kaf-unified-cta__copy h2 {
    display: block;
    margin: 12px 0 0;
    color: #fff;
}

.kaf-addons-cta .kaf-unified-cta__copy p,
.kaf-addon-detail-cta .kaf-unified-cta__copy p {
    display: block;
    margin-top: 14px;
    color: rgba(255,255,255,.76);
}

.kaf-footer {
    position: relative;
    z-index: 5;
    clear: both;
}

/* Force Addons CTA content visible */
.kaf-addons-cta {
    padding: 64px 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    background: #f9fafb !important;
}

.kaf-addons-cta .kaf-unified-cta__card {
    min-height: 360px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 28px !important;
    padding: clamp(28px, 4vw, 56px) !important;
}

.kaf-addons-cta .kaf-unified-cta__copy {
    display: block !important;
    max-width: 760px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.kaf-addons-cta .kaf-unified-cta__copy span,
.kaf-addons-cta .kaf-unified-cta__copy h2,
.kaf-addons-cta .kaf-unified-cta__copy p {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.kaf-addons-cta .kaf-unified-cta__copy h2 {
    margin: 12px 0 0 !important;
    color: #ffffff !important;
    font-size: clamp(30px, 4vw, 54px) !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
}

.kaf-addons-cta .kaf-unified-cta__copy p {
    max-width: 640px !important;
    margin-top: 14px !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.7 !important;
}

.kaf-addons-cta .kaf-unified-cta__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: flex-end !important;
}

@media (max-width: 820px) {
    .kaf-addons-cta .kaf-unified-cta__card {
        grid-template-columns: 1fr !important;
        min-height: 320px !important;
    }

    .kaf-addons-cta .kaf-unified-cta__actions {
        justify-content: flex-start !important;
    }
}

/* Addon Detail Compact Enterprise */
.kaf-addon-detail-page {
    background: #f9fafb;
}

.kaf-addon-detail-hero {
    min-height: 560px;
}

.kaf-addon-detail-compact {
    padding: 58px 0 34px;
    background: #f9fafb;
}

.kaf-addon-detail-compact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

.kaf-addon-detail-compact__main,
.kaf-addon-detail-compact__side,
.kaf-addon-detail-panel {
    border: 1px solid rgba(5, 32, 17, .08);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 54px rgba(5, 32, 17, .06);
}

.kaf-addon-detail-compact__main {
    padding: clamp(22px, 3vw, 34px);
}

.kaf-addon-detail-compact__head {
    max-width: 840px;
}

.kaf-addon-detail-compact__head h2,
.kaf-addon-detail-panel h2 {
    margin: 0;
    color: #052011;
    font-size: clamp(28px, 3.7vw, 48px);
    line-height: 1;
    letter-spacing: -.045em;
}

.kaf-addon-detail-compact__head p {
    max-width: 760px;
    margin: 14px 0 0;
    color: #4b5563;
    font-size: 14px;
    font-weight: 620;
    line-height: 1.7;
}

.kaf-addon-detail-meta.is-compact {
    margin-top: 22px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kaf-addon-detail-mini {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(5, 32, 17, .08);
}

.kaf-addon-detail-mini__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.kaf-addon-detail-mini__head span {
    color: #052011;
    font-size: 13px;
    font-weight: 950;
}

.kaf-addon-detail-mini__head strong {
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 11px;
    font-weight: 950;
}

.kaf-addon-detail-mini__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.kaf-addon-detail-mini__grid > div {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    background: #f8fafc;
}

.kaf-addon-detail-mini__grid > div > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #052011;
    color: #fff;
    font-size: 12px;
    font-weight: 950;
}

.kaf-addon-detail-mini__grid strong {
    display: block;
    color: #052011;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.35;
}

.kaf-addon-detail-mini__grid p {
    margin: 4px 0 0;
    color: #4b5563;
    font-size: 11.5px;
    font-weight: 620;
    line-height: 1.5;
}

.kaf-addon-detail-compact__side {
    overflow: hidden;
}

.kaf-addon-detail-compact__side img {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
}

.kaf-addon-detail-compact__fallback {
    min-height: 260px;
    display: grid;
    place-items: center;
    padding: 22px;
    background: #052011;
    color: #fff;
    text-align: center;
}

.kaf-addon-detail-compact__fallback span,
.kaf-addon-detail-compact__fallback strong {
    display: block;
}

.kaf-addon-detail-compact__fallback span {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.kaf-addon-detail-compact__fallback strong {
    margin-top: 8px;
    font-size: 26px;
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.kaf-addon-detail-side__box.is-compact {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.kaf-addon-detail-panels {
    padding: 24px 0 36px;
    background: #f9fafb;
}

.kaf-addon-detail-panels__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.kaf-addon-detail-panel {
    padding: clamp(20px, 2.6vw, 30px);
}

.kaf-addon-detail-chiplist,
.kaf-addon-detail-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.kaf-addon-detail-chiplist span {
    display: inline-flex;
    padding: 10px 12px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 12px;
    font-weight: 850;
}

.kaf-addon-detail-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kaf-addon-detail-checklist div {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    background: #f8fafc;
}

.kaf-addon-detail-checklist span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff;
    color: #f59e0b;
    font-size: 11px;
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(5, 32, 17, .06);
}

.kaf-addon-detail-checklist p {
    margin: 0;
    color: #052011;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}

.kaf-addon-detail-related {
    padding: 40px 0 64px;
}

.kaf-packagesv2-section-head.is-compact {
    margin-bottom: 18px;
}

.kaf-addon-detail-homecta {
    margin-top: 0;
}

@media (max-width: 1020px) {
    .kaf-addon-detail-compact__grid,
    .kaf-addon-detail-panels__grid {
        grid-template-columns: 1fr;
    }

    .kaf-addon-detail-compact__side {
        max-width: 620px;
    }
}

@media (max-width: 680px) {
    .kaf-addon-detail-hero {
        min-height: auto;
    }

    .kaf-addon-detail-compact {
        padding: 38px 0 22px;
    }

    .kaf-addon-detail-mini__grid,
    .kaf-addon-detail-meta.is-compact,
    .kaf-addon-detail-checklist {
        grid-template-columns: 1fr;
    }

    .kaf-addon-detail-panels {
        padding: 18px 0 28px;
    }
}

/* =========================================================
   FINAL FIX - Addon Detail Compact Enterprise
   Paksa layout layanan tambahan rapi dan tidak ketiban CSS lama.
   ========================================================= */

.kaf-addon-detail-page {
    background: #f9fafb !important;
    overflow-x: hidden !important;
}

.kaf-addon-detail-page .kaf-addon-detail-hero {
    min-height: 560px !important;
}

.kaf-addon-detail-page .kaf-addon-detail-compact {
    padding: 48px 0 22px !important;
    margin: 0 !important;
    background: #f9fafb !important;
}

.kaf-addon-detail-page .kaf-addon-detail-compact__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 18px !important;
    align-items: stretch !important;
}

.kaf-addon-detail-page .kaf-addon-detail-compact__main,
.kaf-addon-detail-page .kaf-addon-detail-compact__side,
.kaf-addon-detail-page .kaf-addon-detail-panel {
    border: 1px solid rgba(5, 32, 17, .08) !important;
    border-radius: 26px !important;
    background: #fff !important;
    box-shadow: 0 18px 48px rgba(5, 32, 17, .06) !important;
}

.kaf-addon-detail-page .kaf-addon-detail-compact__main {
    padding: 26px !important;
}

.kaf-addon-detail-page .kaf-addon-detail-compact__head h2,
.kaf-addon-detail-page .kaf-addon-detail-panel h2 {
    margin: 0 !important;
    color: #052011 !important;
    font-size: clamp(26px, 3vw, 42px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
}

.kaf-addon-detail-page .kaf-addon-detail-compact__head p {
    max-width: 780px !important;
    margin: 12px 0 0 !important;
    color: #4b5563 !important;
    font-size: 14px !important;
    font-weight: 620 !important;
    line-height: 1.65 !important;
}

.kaf-addon-detail-page .kaf-addon-detail-meta.is-compact {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

.kaf-addon-detail-page .kaf-addon-detail-meta.is-compact div {
    min-width: 0 !important;
    padding: 13px 14px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
}

.kaf-addon-detail-page .kaf-addon-detail-meta.is-compact span {
    display: block !important;
    color: #6b7280 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.kaf-addon-detail-page .kaf-addon-detail-meta.is-compact strong {
    display: block !important;
    margin-top: 5px !important;
    overflow: hidden !important;
    color: #052011 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.kaf-addon-detail-page .kaf-addon-detail-mini {
    margin-top: 18px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(5, 32, 17, .08) !important;
}

.kaf-addon-detail-page .kaf-addon-detail-mini__head {
    margin-bottom: 10px !important;
}

.kaf-addon-detail-page .kaf-addon-detail-mini__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

.kaf-addon-detail-page .kaf-addon-detail-mini__grid > div {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 11px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
}

.kaf-addon-detail-page .kaf-addon-detail-mini__grid > div > span {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #052011 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}

.kaf-addon-detail-page .kaf-addon-detail-mini__grid strong {
    display: block !important;
    color: #052011 !important;
    font-size: 12.5px !important;
    font-weight: 950 !important;
    line-height: 1.35 !important;
}

.kaf-addon-detail-page .kaf-addon-detail-mini__grid p {
    margin: 3px 0 0 !important;
    color: #4b5563 !important;
    font-size: 11.5px !important;
    font-weight: 620 !important;
    line-height: 1.45 !important;
}

.kaf-addon-detail-page .kaf-addon-detail-compact__side {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.kaf-addon-detail-page .kaf-addon-detail-compact__side img {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.kaf-addon-detail-page .kaf-addon-detail-side__box.is-compact {
    padding: 18px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.kaf-addon-detail-page .kaf-addon-detail-side__box.is-compact h3 {
    margin: 0 !important;
    color: #052011 !important;
    font-size: 19px !important;
    font-weight: 950 !important;
}

.kaf-addon-detail-page .kaf-addon-detail-side__box.is-compact p {
    margin: 8px 0 14px !important;
    color: #4b5563 !important;
    font-size: 12.5px !important;
    font-weight: 620 !important;
    line-height: 1.55 !important;
}

.kaf-addon-detail-page .kaf-addon-detail-panels {
    padding: 18px 0 34px !important;
    background: #f9fafb !important;
}

.kaf-addon-detail-page .kaf-addon-detail-panels__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.kaf-addon-detail-page .kaf-addon-detail-panel {
    padding: 22px !important;
}

.kaf-addon-detail-page .kaf-addon-detail-chiplist,
.kaf-addon-detail-page .kaf-addon-detail-checklist {
    margin-top: 14px !important;
}

.kaf-addon-detail-page .kaf-addon-detail-chiplist {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.kaf-addon-detail-page .kaf-addon-detail-chiplist span {
    display: inline-flex !important;
    padding: 9px 11px !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.kaf-addon-detail-page .kaf-addon-detail-checklist {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

.kaf-addon-detail-page .kaf-addon-detail-checklist div {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: center !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
}

.kaf-addon-detail-page .kaf-addon-detail-checklist span {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #f59e0b !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    box-shadow: 0 10px 24px rgba(5, 32, 17, .06) !important;
}

.kaf-addon-detail-page .kaf-addon-detail-checklist p {
    margin: 0 !important;
    color: #052011 !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.kaf-addon-detail-page .kaf-addon-detail-related {
    padding: 32px 0 56px !important;
    background: #f9fafb !important;
}

.kaf-addon-detail-page .kaf-packagesv2-section-head.is-compact {
    margin-bottom: 16px !important;
}

.kaf-addon-detail-page .kaf-packagesv2-section-head.is-compact h2 {
    font-size: clamp(26px, 3vw, 42px) !important;
}

.kaf-addon-detail-page .kaf-packagesv2-homecta {
    margin-top: 0 !important;
}

@media (max-width: 1020px) {
    .kaf-addon-detail-page .kaf-addon-detail-compact__grid,
    .kaf-addon-detail-page .kaf-addon-detail-panels__grid {
        grid-template-columns: 1fr !important;
    }

    .kaf-addon-detail-page .kaf-addon-detail-compact__side {
        max-width: 620px !important;
    }
}

@media (max-width: 680px) {
    .kaf-addon-detail-page .kaf-addon-detail-hero {
        min-height: auto !important;
    }

    .kaf-addon-detail-page .kaf-addon-detail-compact {
        padding: 32px 0 18px !important;
    }

    .kaf-addon-detail-page .kaf-addon-detail-meta.is-compact,
    .kaf-addon-detail-page .kaf-addon-detail-mini__grid,
    .kaf-addon-detail-page .kaf-addon-detail-checklist {
        grid-template-columns: 1fr !important;
    }

    .kaf-addon-detail-page .kaf-addon-detail-panels {
        padding: 14px 0 26px !important;
    }
}

/* ADDON DETAIL CLEAN FINAL START */
.kaf-addonclean-page {
    background: #f9fafb;
    overflow-x: hidden;
}

.kaf-addonclean-hero {
    min-height: 560px;
}

.kaf-addonclean-overview {
    position: relative;
    z-index: 3;
    padding: 0 0 28px;
    margin-top: -52px;
    background: #f9fafb;
}

.kaf-addonclean-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: stretch;
}

.kaf-addonclean-summary,
.kaf-addonclean-visual,
.kaf-addonclean-panel {
    border: 1px solid rgba(5, 32, 17, .08);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 54px rgba(5, 32, 17, .07);
}

.kaf-addonclean-summary {
    padding: clamp(22px, 3vw, 34px);
}

.kaf-addonclean-pill {
    display: inline-flex;
    width: max-content;
    margin: 0 0 13px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
}

.kaf-addonclean-summary h2,
.kaf-addonclean-panel h2 {
    margin: 0;
    color: #052011;
    font-size: clamp(26px, 3.2vw, 44px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.kaf-addonclean-summary > p {
    max-width: 760px;
    margin: 12px 0 0;
    color: #4b5563;
    font-size: 14px;
    font-weight: 620;
    line-height: 1.68;
}

.kaf-addonclean-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.kaf-addonclean-meta div {
    min-width: 0;
    padding: 13px 14px;
    border-radius: 16px;
    background: #f8fafc;
}

.kaf-addonclean-meta span {
    display: block;
    color: #6b7280;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
}

.kaf-addonclean-meta strong {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: #052011;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kaf-addonclean-highlight {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(5, 32, 17, .08);
}

.kaf-addonclean-highlight__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.kaf-addonclean-highlight__head span {
    color: #052011;
    font-size: 13px;
    font-weight: 950;
}

.kaf-addonclean-highlight__head strong {
    padding: 7px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 11px;
    font-weight: 950;
}

.kaf-addonclean-highlight__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.kaf-addonclean-highlight__list > div,
.kaf-addonclean-list > div,
.kaf-addonclean-steps > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 11px;
    border-radius: 16px;
    background: #f8fafc;
}

.kaf-addonclean-highlight__list > div > span,
.kaf-addonclean-list > div > span,
.kaf-addonclean-steps > div > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #052011;
    color: #fff;
    font-size: 11px;
    font-weight: 950;
}

.kaf-addonclean-highlight__list strong,
.kaf-addonclean-list strong {
    display: block;
    color: #052011;
    font-size: 12.5px;
    font-weight: 950;
    line-height: 1.35;
}

.kaf-addonclean-highlight__list p {
    margin: 4px 0 0;
    color: #4b5563;
    font-size: 11.5px;
    font-weight: 620;
    line-height: 1.45;
}

.kaf-addonclean-visual {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.kaf-addonclean-image img,
.kaf-addonclean-fallback {
    width: 100%;
    aspect-ratio: 4 / 3;
}

.kaf-addonclean-image img {
    display: block;
    object-fit: cover;
}

.kaf-addonclean-fallback {
    display: grid;
    place-items: center;
    padding: 22px;
    background: #052011;
    color: #fff;
    text-align: center;
}

.kaf-addonclean-fallback span,
.kaf-addonclean-fallback strong {
    display: block;
}

.kaf-addonclean-fallback strong {
    max-width: 260px;
    margin-top: 8px;
    font-size: 26px;
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.kaf-addonclean-side {
    padding: 18px;
}

.kaf-addonclean-side h3 {
    margin: 0;
    color: #052011;
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -.025em;
}

.kaf-addonclean-side p {
    margin: 8px 0 16px;
    color: #4b5563;
    font-size: 12.5px;
    font-weight: 620;
    line-height: 1.58;
}

.kaf-addonclean-info {
    padding: 24px 0 44px;
    background: #f9fafb;
}

.kaf-addonclean-info__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.kaf-addonclean-panel {
    padding: 22px;
}

.kaf-addonclean-panel--wide {
    grid-column: 1 / -1;
}

.kaf-addonclean-panel__head {
    max-width: 680px;
}

.kaf-addonclean-list,
.kaf-addonclean-steps {
    display: grid;
    gap: 9px;
    margin-top: 16px;
}

.kaf-addonclean-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kaf-addonclean-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.kaf-addonclean-chips span {
    display: inline-flex;
    padding: 9px 11px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 12px;
    font-weight: 850;
}

.kaf-addonclean-steps p {
    margin: 0;
    color: #052011;
    font-size: 12.5px;
    font-weight: 900;
    line-height: 1.35;
}

.kaf-addonclean-related {
    padding: 38px 0 62px;
    background: #f9fafb;
}

.kaf-addonclean-page .kaf-packagesv2-homecta {
    margin-top: 0;
}

@media (max-width: 1020px) {
    .kaf-addonclean-grid,
    .kaf-addonclean-info__grid {
        grid-template-columns: 1fr;
    }

    .kaf-addonclean-visual {
        max-width: 620px;
    }
}

@media (max-width: 680px) {
    .kaf-addonclean-hero {
        min-height: auto;
    }

    .kaf-addonclean-overview {
        margin-top: 0;
        padding: 28px 0 18px;
    }

    .kaf-addonclean-meta,
    .kaf-addonclean-highlight__list,
    .kaf-addonclean-list {
        grid-template-columns: 1fr;
    }

    .kaf-addonclean-summary,
    .kaf-addonclean-panel {
        padding: 20px;
        border-radius: 24px;
    }
}
/* ADDON DETAIL CLEAN FINAL END */

/* Public Service Area */
.kaf-servicearea {
    background: #f9fafb;
    overflow-x: hidden;
}

.kaf-servicearea-hero {
    min-height: 640px;
    display: flex;
    align-items: center;
    padding: calc(var(--kaf-header-h, 86px) + 70px) 0 74px;
    background:
        radial-gradient(circle at 82% 18%, rgba(245,158,11,.22), transparent 24rem),
        radial-gradient(circle at 18% 70%, rgba(7,102,102,.22), transparent 28rem),
        linear-gradient(135deg, #052011 0%, #0b3d22 56%, #145d2f 100%);
    color: #fff;
}

.kaf-servicearea-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 56px;
    align-items: center;
}

.kaf-servicearea-eyebrow {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 13px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: rgba(245,158,11,.16);
    color: #fbbf24;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.kaf-servicearea-hero h1 {
    max-width: 780px;
    margin: 0;
    color: #fff;
    font-size: clamp(44px, 5vw, 76px);
    line-height: .96;
    letter-spacing: -.065em;
    font-weight: 850;
}

.kaf-servicearea-hero p {
    max-width: 660px;
    margin: 20px 0 0;
    color: rgba(255,255,255,.78);
    font-size: 16px;
    line-height: 1.68;
    font-weight: 520;
}

.kaf-servicearea-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.kaf-servicearea-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.kaf-servicearea-hero__stats article {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px;
    border-radius: 26px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
}

.kaf-servicearea-hero__stats strong {
    color: #fff;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1;
    letter-spacing: -.045em;
}

.kaf-servicearea-hero__stats span {
    margin-top: 8px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    font-weight: 750;
}

.kaf-servicearea-list {
    padding: 64px 0 78px;
}

.kaf-servicearea-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
    margin-bottom: 24px;
}

.kaf-servicearea-head h2 {
    max-width: 680px;
    margin: 0;
    color: #052011;
    font-size: clamp(34px, 3.6vw, 56px);
    line-height: 1;
    letter-spacing: -.055em;
}

.kaf-servicearea-tools {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 190px;
    gap: 10px;
}

.kaf-servicearea-tools input,
.kaf-servicearea-tools select {
    height: 46px;
    border: 1px solid rgba(5,32,17,.1);
    border-radius: 999px;
    padding: 0 16px;
    background: #fff;
    color: #052011;
    outline: none;
    box-shadow: 0 12px 30px rgba(5,32,17,.05);
}

.kaf-servicearea-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.kaf-servicearea-card {
    display: flex;
    flex-direction: column;
    min-height: 420px;
    padding: 22px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(5,32,17,.08);
    box-shadow: 0 18px 54px rgba(5,32,17,.06);
}

.kaf-servicearea-card__top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.kaf-servicearea-card__top span,
.kaf-servicearea-card__top b {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 900;
}

.kaf-servicearea-card__top span {
    background: #ecfdf5;
    color: #047857;
}

.kaf-servicearea-card__top b {
    background: #fff7ed;
    color: #c2410c;
}

.kaf-servicearea-card h3 {
    margin: 20px 0 8px;
    color: #052011;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -.045em;
    font-weight: 900;
}

.kaf-servicearea-card p {
    min-height: 46px;
    margin: 0;
    color: #4b5563;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 560;
}

.kaf-servicearea-card__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 18px;
}

.kaf-servicearea-card__metrics div {
    padding: 12px;
    border-radius: 16px;
    background: #f8fafc;
}

.kaf-servicearea-card__metrics strong {
    display: block;
    color: #052011;
    font-size: 19px;
    line-height: 1;
    font-weight: 950;
}

.kaf-servicearea-card__metrics span {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 850;
}

.kaf-servicearea-card__block {
    margin-top: 16px;
}

.kaf-servicearea-card__block strong {
    display: block;
    margin-bottom: 8px;
    color: #052011;
    font-size: 12px;
    font-weight: 900;
}

.kaf-servicearea-card__block div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.kaf-servicearea-card__block span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 750;
}

.kaf-servicearea-card > a {
    margin-top: auto;
    padding-top: 18px;
    color: #047857;
    font-size: 13px;
    font-weight: 900;
}

.kaf-servicearea-empty {
    grid-column: 1 / -1;
    padding: 32px;
    border-radius: 24px;
    background: #fff;
    color: #64748b;
    text-align: center;
    font-weight: 850;
}

@media (max-width: 1080px) {
    .kaf-servicearea-hero__grid,
    .kaf-servicearea-head {
        display: block;
    }

    .kaf-servicearea-hero__stats,
    .kaf-servicearea-tools {
        margin-top: 24px;
    }

    .kaf-servicearea-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .kaf-servicearea-hero {
        min-height: auto;
        padding: calc(var(--kaf-header-h, 76px) + 42px) 0 52px;
    }

    .kaf-servicearea-hero__stats,
    .kaf-servicearea-tools,
    .kaf-servicearea-grid {
        grid-template-columns: 1fr;
    }

    .kaf-servicearea-card {
        min-height: auto;
    }
}