/* ==========================================================
   IMANI PUBLIC WEBSITE REDESIGN
   ========================================================== */

:root {
    --imani-primary: #3155d9;
    --imani-primary-dark: #2442b7;
    --imani-navy: #101828;
    --imani-text: #344054;
    --imani-muted: #667085;
    --imani-border: #e4e7ec;
    --imani-background: #f7f8fc;
    --imani-white: #ffffff;
    --imani-orange: #f59e42;

    --imani-radius-sm: 12px;
    --imani-radius-md: 20px;
    --imani-radius-lg: 32px;

    --imani-shadow:
        0 16px 40px rgba(16, 24, 40, 0.08);
}


/* =========================
   GLOBAL PUBLIC UI
========================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--imani-background);
    color: var(--imani-navy);
    font-family:
        "Plus Jakarta Sans",
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

.page-container {
    width: calc(100% - 48px);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

main {
    overflow: hidden;
}


/* =========================
   HEADER
========================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    padding: 0;

    background: rgba(255, 255, 255, 0.94);

    border-bottom: 1px solid rgba(228, 231, 236, 0.85);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.navbar-container {
    width: calc(100% - 48px);
    max-width: 1200px;

    min-height: 78px;

    margin: auto;

    display: flex;
    align-items: center;
}

.brand {
    display: flex;
    align-items: center;

    gap: 11px;

    color: var(--imani-navy);

    text-decoration: none;

    flex-shrink: 0;
}

.brand-logo {
    width: 45px;
    height: 45px;

    object-fit: contain;
}

.brand-name {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.6px;
}

.desktop-navigation {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 4px;
}

.desktop-navigation a {
    position: relative;

    margin: 0;

    padding: 12px 14px;

    color: var(--imani-text);

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    border-radius: 10px;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.desktop-navigation a:hover {
    color: var(--imani-primary);

    background: #f2f4ff;
}

.desktop-navigation a.active {
    color: var(--imani-primary);
}

.desktop-navigation a.active::after {
    content: "";

    position: absolute;

    left: 14px;
    right: 14px;
    bottom: 4px;

    height: 2px;

    background: var(--imani-primary);

    border-radius: 999px;
}

.navbar-cta {
    margin-left: 16px;

    padding: 11px 18px;

    color: var(--imani-white);

    background: var(--imani-primary);

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    border-radius: 999px;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.navbar-cta:hover {
    color: var(--imani-white);

    background: var(--imani-primary-dark);

    transform: translateY(-1px);
}

.mobile-menu-button,
.mobile-navigation {
    display: none;
}


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

.home-hero {
    position: relative;

    padding: 86px 0 118px;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(49, 85, 217, 0.13),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f8ff 48%,
            #eef2ff 100%
        );
}

.hero-container {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.94fr)
        minmax(400px, 0.86fr);

    gap: 72px;

    align-items: center;
}

.hero-copy {
    max-width: 660px;
}

.hero-eyebrow,
.section-eyebrow {
    display: inline-flex;

    align-items: center;

    color: var(--imani-primary);

    font-size: 12px;
    line-height: 1.4;

    font-weight: 800;

    letter-spacing: 1.4px;
}

.hero-eyebrow {
    padding: 8px 13px;

    background: rgba(49, 85, 217, 0.08);

    border: 1px solid rgba(49, 85, 217, 0.13);

    border-radius: 999px;
}

.hero-copy h1 {
    max-width: 700px;

    margin: 24px 0 24px;

    font-size: clamp(46px, 5vw, 72px);

    line-height: 1.06;

    letter-spacing: -3.7px;

    font-weight: 800;
}

.hero-copy h1 span {
    color: var(--imani-primary);
}

.hero-description {
    max-width: 620px;

    margin: 0;

    color: var(--imani-muted);

    font-size: 17px;

    line-height: 1.85;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 34px;
}

.button {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 0 23px;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

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

.button-primary {
    color: white;

    background: var(--imani-primary);

    box-shadow:
        0 12px 24px rgba(49, 85, 217, 0.2);
}

.button-primary:hover {
    color: white;

    background: var(--imani-primary-dark);

    box-shadow:
        0 16px 32px rgba(49, 85, 217, 0.25);
}

.button-secondary {
    color: var(--imani-navy);

    background: white;

    border: 1px solid var(--imani-border);
}

.button-secondary:hover {
    color: var(--imani-primary);

    background: white;
}

.hero-information {
    display: flex;
    align-items: center;

    gap: 20px;

    margin-top: 48px;
}

.hero-information-item {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.hero-information-item strong {
    font-size: 14px;
}

.hero-information-item span {
    color: var(--imani-muted);

    font-size: 11px;
}

.hero-information-divider {
    width: 1px;
    height: 35px;

    background: var(--imani-border);
}


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

.hero-visual {
    position: relative;
}

.hero-image-wrapper {
    position: relative;

    min-height: 510px;

    padding: 14px;

    background: white;

    border: 1px solid rgba(228, 231, 236, 0.9);

    border-radius: 38px;

    box-shadow:
        0 30px 70px rgba(16, 24, 40, 0.14);
}

.hero-image {
    width: 100%;
    height: 482px;

    display: block;

    object-fit: cover;

    border-radius: 27px;
}

.hero-image-badge {
    position: absolute;

    left: -32px;
    bottom: 35px;

    width: 270px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 16px;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(228, 231, 236, 0.8);

    border-radius: 18px;

    box-shadow: var(--imani-shadow);
}

.badge-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    color: white;

    background: var(--imani-primary);

    border-radius: 12px;
}

.hero-image-badge div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.hero-image-badge strong {
    font-size: 13px;
}

.hero-image-badge div span {
    color: var(--imani-muted);

    font-size: 10px;
    line-height: 1.5;
}

.hero-decoration {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.hero-decoration-one {
    width: 280px;
    height: 280px;

    top: -150px;
    right: -100px;

    border: 70px solid rgba(49, 85, 217, 0.035);
}

.hero-decoration-two {
    width: 170px;
    height: 170px;

    bottom: -80px;
    left: -70px;

    background: rgba(245, 158, 66, 0.05);
}


/* =========================
   QUICK ACCESS
========================= */

.quick-access-section {
    position: relative;

    z-index: 5;

    padding: 0;

    margin-top: -47px;
}

.quick-access-card {
    display: grid;

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

    padding: 11px;

    background: white;

    border: 1px solid var(--imani-border);

    border-radius: 26px;

    box-shadow: var(--imani-shadow);
}

.quick-access-item {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 13px;

    margin: 0;

    padding: 17px 16px;

    color: var(--imani-navy);

    text-decoration: none;

    border-radius: 18px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.quick-access-item:hover {
    color: var(--imani-navy);

    background: #f7f8ff;

    transform: translateY(-2px);
}

.quick-access-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

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

    color: var(--imani-primary);

    background: #eef1ff;

    border-radius: 13px;

    font-size: 11px;
    font-weight: 800;
}

.quick-access-item div:nth-child(2) {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.quick-access-item strong {
    font-size: 13px;
}

.quick-access-item div span {
    overflow: hidden;

    color: var(--imani-muted);

    font-size: 10px;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.quick-access-arrow {
    margin-left: auto;

    color: #98a2b3;

    font-size: 16px;
}


/* =========================
   SHARED SECTION
========================= */

.home-section {
    padding: 118px 0;
}

.section-title {
    max-width: 680px;

    margin: 15px 0 22px;

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

    line-height: 1.15;

    letter-spacing: -2.1px;
}

.section-description {
    color: var(--imani-muted);

    font-size: 15px;

    line-height: 1.9;
}

.text-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin: 0;

    color: var(--imani-primary);

    text-decoration: none;

    font-size: 13px;
    font-weight: 800;
}

.text-link:hover {
    color: var(--imani-primary-dark);
}


/* =========================
   ABOUT
========================= */

.about-section {
    background: white;
}

.about-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 0.85fr);

    gap: 90px;

    align-items: center;
}

.about-visual {
    position: relative;
}

.about-visual > img {
    width: 100%;
    height: 520px;

    display: block;

    object-fit: cover;

    border-radius: 32px;
}

.about-floating-card {
    position: absolute;

    right: -35px;
    bottom: 35px;

    max-width: 270px;

    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 18px 20px;

    background: white;

    border: 1px solid var(--imani-border);

    border-radius: 17px;

    box-shadow: var(--imani-shadow);
}

.about-floating-card strong {
    font-size: 12px;
}

.about-floating-card span {
    color: var(--imani-muted);

    font-size: 10px;
}

.about-content .section-description {
    max-width: 580px;
}

.about-content .text-link {
    margin-top: 12px;
}


/* =========================
   ACTIVITY BANNER
========================= */

.activity-section {
    padding: 90px 0;

    background: white;
}

.activity-banner {
    position: relative;

    overflow: hidden;

    min-height: 390px;

    display: flex;
    align-items: center;

    padding: 60px;

    color: white;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(255, 255, 255, 0.13),
            transparent 28%
        ),
        linear-gradient(
            125deg,
            #2442b7,
            #3155d9 55%,
            #5975e5
        );

    border-radius: 34px;
}

.activity-content {
    position: relative;

    z-index: 2;

    max-width: 660px;
}

.light-eyebrow {
    color: rgba(255, 255, 255, 0.75);
}

.activity-content h2 {
    margin: 15px 0 17px;

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

    line-height: 1.14;

    letter-spacing: -2px;
}

.activity-content p {
    max-width: 550px;

    margin-bottom: 28px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 14px;

    line-height: 1.8;
}

.button-light {
    color: var(--imani-primary);

    background: white;
}

.button-light:hover {
    color: var(--imani-primary-dark);

    background: white;
}

.activity-number {
    position: absolute;

    right: 25px;
    bottom: -37px;

    display: flex;
    flex-direction: column;

    color: rgba(255, 255, 255, 0.07);

    font-weight: 800;

    line-height: 0.75;

    text-align: right;
}

.activity-number span {
    font-size: 80px;
}

.activity-number strong {
    font-size: 150px;
}


/* =========================
   ARTICLE SECTION
========================= */

.article-section {
    background: var(--imani-background);
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 44px;
}

.section-heading .section-title {
    margin-bottom: 0;
}

.desktop-link {
    margin-bottom: 8px;
}

.home-article-grid {
    display: grid;

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

    gap: 24px;
}

.home-article-card {
    overflow: hidden;

    background: white;

    border: 1px solid var(--imani-border);

    border-radius: 23px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.home-article-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 40px rgba(16, 24, 40, 0.09);
}

.home-article-image {
    height: 230px;

    display: block;

    overflow: hidden;

    margin: 0;
}

.home-article-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.home-article-card:hover .home-article-image img {
    transform: scale(1.04);
}

.home-article-content {
    padding: 23px;
}

.article-date {
    color: var(--imani-primary);

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.8px;
}

.home-article-content h3 {
    margin: 12px 0 13px;

    font-size: 19px;

    line-height: 1.45;

    letter-spacing: -0.4px;
}

.home-article-content h3 a {
    margin: 0;

    color: var(--imani-navy);

    text-decoration: none;
}

.home-article-content p {
    min-height: 66px;

    margin: 0;

    color: var(--imani-muted);

    font-size: 12px;

    line-height: 1.8;
}

.article-read-more {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin: 20px 0 0;

    color: var(--imani-primary);

    font-size: 11px;

    font-weight: 800;

    text-decoration: none;
}

.mobile-section-link {
    display: none;
}


/* =========================
   DOCUMENTATION PROMO
========================= */

.documentation-promo-section {
    background: white;
}

.documentation-promo {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1fr);

    gap: 80px;

    align-items: center;
}

.documentation-promo-copy .button {
    margin-top: 15px;
}

.documentation-collage {
    display: grid;

    grid-template-columns: 1.25fr 0.75fr;

    grid-template-rows: 230px 190px;

    gap: 14px;
}

.documentation-image {
    overflow: hidden;

    border-radius: 23px;
}

.documentation-image-large {
    grid-row: 1 / 3;
}

.documentation-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.documentation-color-card {
    display: flex;
    flex-direction: column;

    justify-content: flex-end;

    padding: 22px;

    color: white;

    background: var(--imani-primary);

    border-radius: 23px;
}

.documentation-color-card span {
    color: rgba(255, 255, 255, 0.7);

    font-size: 10px;
}

.documentation-color-card strong {
    margin-top: 5px;

    font-size: 27px;
}


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

.final-cta-section {
    padding: 0 0 110px;

    background: white;
}

.final-cta {
    padding: 76px 40px;

    color: white;

    background:
        radial-gradient(
            circle at 80% 0,
            rgba(245, 158, 66, 0.2),
            transparent 25%
        ),
        #101828;

    border-radius: 34px;

    text-align: center;
}

.final-cta-label {
    color: #aebeff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.final-cta h2 {
    max-width: 750px;

    margin: 16px auto 18px;

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.15;

    letter-spacing: -2px;
}

.final-cta p {
    max-width: 600px;

    margin: auto;

    color: #98a2b3;

    font-size: 14px;

    line-height: 1.8;
}

.final-cta-actions {
    display: flex;
    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}

.button-white {
    color: var(--imani-navy);

    background: white;
}

.button-white:hover {
    color: var(--imani-primary);

    background: white;
}

.button-outline-white {
    color: white;

    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.28);
}

.button-outline-white:hover {
    color: white;

    background: rgba(255, 255, 255, 0.07);
}


/* =========================
   FOOTER
========================= */

.footer {
    margin-top: 0;

    padding: 76px 0 24px;

    color: #98a2b3;

    background: #0b1220;
}

.footer-top {
    display: grid;

    grid-template-columns: 1.5fr 0.7fr 0.8fr 1fr;

    gap: 60px;
}

.footer-brand-link {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    color: white;

    text-decoration: none;
}

.footer-brand-link img {
    width: 45px;
    height: 45px;

    object-fit: contain;
}

.footer-brand-link span {
    font-size: 22px;
    font-weight: 800;
}

.footer-brand p {
    max-width: 380px;

    margin: 20px 0 22px;

    color: #98a2b3;

    font-size: 12px;

    line-height: 1.9;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.footer-social a {
    margin: 0;

    padding: 8px 11px;

    color: #c7cfda;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 9px;

    font-size: 10px;

    text-decoration: none;
}

.footer h3 {
    margin: 4px 0 20px;

    color: white;

    font-size: 13px;
}

.footer-column ul {
    margin: 0;

    padding: 0;

    list-style: none;
}

.footer-column li {
    margin-bottom: 12px;
}

.footer-column a,
.footer-contact a {
    margin: 0;

    color: #98a2b3;

    font-size: 11px;

    text-decoration: none;

    transition: color 0.2s ease;
}

.footer-column a:hover,
.footer-contact a:hover {
    color: white;
}

.footer-contact {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}

.footer-contact h3 {
    margin-bottom: 8px;
}

.footer-contact p {
    margin: 0;

    color: #98a2b3;

    font-size: 11px;

    line-height: 1.7;
}

.footer-bottom {
    margin-top: 65px;

    padding-top: 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    text-align: left;
}

.footer-bottom p,
.footer-bottom span {
    margin: 0;

    color: #667085;

    font-size: 10px;
}


/* =========================
   WHATSAPP
========================= */

.wa-float {
    width: 52px;
    height: 52px;

    right: 22px !important;
    bottom: 22px !important;

    background: #25d366;

    border: 4px solid white;

    box-shadow:
        0 10px 30px rgba(16, 24, 40, 0.2);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.wa-float:hover {
    transform: translateY(-3px) scale(1.03);

    box-shadow:
        0 14px 34px rgba(16, 24, 40, 0.25);
}

.wa-float img {
    width: 25px;
    height: 25px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1050px) {

    .desktop-navigation {
        gap: 0;
    }

    .desktop-navigation a {
        padding-left: 9px;
        padding-right: 9px;

        font-size: 12px;
    }

    .navbar-cta {
        margin-left: 10px;

        padding-left: 14px;
        padding-right: 14px;
    }

    .hero-container {
        gap: 45px;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, 0.8fr);
    }

    .hero-copy h1 {
        letter-spacing: -2.7px;
    }

    .quick-access-card {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-grid,
    .documentation-promo {
        gap: 55px;
    }

    .about-floating-card {
        right: -15px;
    }

    .footer-top {
        grid-template-columns: 1.4fr 0.7fr 0.8fr;

        gap: 45px;
    }

    .footer-contact {
        grid-column: 1 / -1;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 800px) {

    .page-container,
    .navbar-container {
        width: calc(100% - 32px);
    }

    .navbar-container {
        min-height: 70px;
    }

    .brand-logo {
        width: 40px;
        height: 40px;
    }

    .brand-name {
        font-size: 20px;
    }

    .desktop-navigation,
    .navbar-cta {
        display: none;
    }

    .mobile-menu-button {
        width: 42px;
        height: 42px;

        margin-left: auto;

        padding: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 5px;

        background: #f4f5f7;

        border: 0;

        border-radius: 11px;

        cursor: pointer;
    }

    .mobile-menu-button span {
        width: 18px;
        height: 2px;

        display: block;

        background: var(--imani-navy);

        border-radius: 99px;

        transition: 0.2s ease;
    }

    .mobile-menu-button.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-button.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-button.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .mobile-navigation {
        width: calc(100% - 32px);

        margin: 0 auto 14px;

        padding: 8px;

        display: none;

        background: white;

        border: 1px solid var(--imani-border);

        border-radius: 16px;

        box-shadow: var(--imani-shadow);
    }

    .mobile-navigation.active {
        display: flex;
        flex-direction: column;
    }

    .mobile-navigation a {
        margin: 0;

        padding: 13px 14px;

        color: var(--imani-text);

        font-size: 13px;

        font-weight: 600;

        text-decoration: none;

        border-radius: 10px;
    }

    .mobile-navigation a:hover {
        color: var(--imani-primary);

        background: #f7f8ff;
    }


    /* HERO */

    .home-hero {
        padding: 65px 0 100px;
    }

    .hero-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .hero-copy {
        max-width: none;
    }

    .hero-copy h1 {
        margin-top: 20px;

        font-size: clamp(42px, 12vw, 62px);

        letter-spacing: -2.7px;
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-information {
        gap: 13px;
    }

    .hero-information-divider {
        height: 30px;
    }

    .hero-image-wrapper {
        min-height: 450px;
    }

    .hero-image {
        height: 420px;
    }

    .hero-image-badge {
        left: 20px;
        bottom: 25px;
    }


    /* QUICK ACCESS */

    .quick-access-card {
        grid-template-columns: 1fr 1fr;
    }


    /* SECTIONS */

    .home-section {
        padding: 85px 0;
    }

    .about-grid,
    .documentation-promo {
        grid-template-columns: 1fr;
    }

    .about-grid {
        gap: 60px;
    }

    .about-visual > img {
        height: 450px;
    }

    .about-floating-card {
        right: 20px;
    }

    .activity-section {
        padding: 75px 0;
    }

    .activity-banner {
        min-height: 440px;

        padding: 45px 35px;
    }

    .activity-number {
        right: 10px;
    }

    .activity-number strong {
        font-size: 100px;
    }

    .section-heading {
        align-items: flex-start;
    }

    .home-article-grid {
        grid-template-columns: 1fr 1fr;
    }

    .home-article-card:last-child {
        display: none;
    }

    .documentation-promo {
        gap: 55px;
    }

    .final-cta-section {
        padding-bottom: 80px;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
    }

    .footer-contact {
        grid-column: auto;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 560px) {

    .page-container,
    .navbar-container {
        width: calc(100% - 28px);
    }

    .home-hero {
        padding-top: 48px;
    }

    .hero-eyebrow {
        font-size: 9px;

        letter-spacing: 1px;
    }

    .hero-copy h1 {
        font-size: 42px;

        letter-spacing: -2.2px;
    }

    .hero-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .button {
        width: 100%;
    }

    .hero-information {
        justify-content: space-between;

        gap: 8px;
    }

    .hero-information-item strong {
        font-size: 12px;
    }

    .hero-information-item span {
        font-size: 9px;
    }

    .hero-image-wrapper {
        min-height: 390px;

        padding: 10px;

        border-radius: 28px;
    }

    .hero-image {
        height: 370px;

        border-radius: 20px;
    }

    .hero-image-badge {
        width: calc(100% - 36px);

        left: 18px;
        bottom: 18px;
    }

    .quick-access-section {
        margin-top: -35px;
    }

    .quick-access-card {
        grid-template-columns: 1fr;

        border-radius: 22px;
    }

    .quick-access-item {
        padding: 14px;
    }

    .section-title {
        font-size: 34px;

        letter-spacing: -1.6px;
    }

    .about-visual > img {
        height: 370px;

        border-radius: 24px;
    }

    .about-floating-card {
        right: 15px;
        left: 15px;
        bottom: 15px;

        max-width: none;
    }

    .activity-banner {
        min-height: 470px;

        padding: 40px 25px;

        border-radius: 25px;
    }

    .activity-content h2 {
        font-size: 34px;

        letter-spacing: -1.5px;
    }

    .activity-number span {
        font-size: 55px;
    }

    .activity-number strong {
        font-size: 85px;
    }

    .section-heading {
        margin-bottom: 32px;
    }

    .desktop-link {
        display: none;
    }

    .home-article-grid {
        grid-template-columns: 1fr;
    }

    .home-article-card:last-child {
        display: block;
    }

    .mobile-section-link {
        display: inline-flex;

        margin-top: 28px;
    }

    .documentation-collage {
        grid-template-columns: 1fr 1fr;

        grid-template-rows: 270px 150px;
    }

    .documentation-image-large {
        grid-column: 1 / 3;
        grid-row: auto;
    }

    .final-cta {
        padding: 60px 22px;

        border-radius: 25px;
    }

    .final-cta h2 {
        font-size: 35px;

        letter-spacing: -1.5px;
    }

    .final-cta-actions {
        flex-direction: column;
    }

    .footer {
        padding-top: 60px;
    }

    .footer-top {
        grid-template-columns: 1fr;

        gap: 38px;
    }

    .footer-bottom {
        margin-top: 50px;

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }

    .wa-float {
        width: 48px;
        height: 48px;

        right: 15px !important;
        bottom: 15px !important;
    }

}

/* ==================================================
   FIX WHATSAPP FLOATING BUTTON
================================================== */

a.wa-float {
    position: fixed !important;

    right: 24px !important;
    bottom: 24px !important;

    left: auto !important;
    top: auto !important;

    width: 56px !important;
    height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #25D366 !important;

    border: 4px solid #ffffff !important;
    border-radius: 50% !important;

    box-shadow:
        0 10px 30px rgba(16, 24, 40, 0.22) !important;

    text-decoration: none !important;

    overflow: hidden !important;

    z-index: 999999 !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}


a.wa-float:hover {
    transform: translateY(-4px) scale(1.04);

    background: #25D366 !important;

    box-shadow:
        0 15px 35px rgba(16, 24, 40, 0.28) !important;
}


a.wa-float img {
    width: 28px !important;
    height: 28px !important;

    display: block !important;

    object-fit: contain !important;
}


@media (max-width: 560px) {

    a.wa-float {
        right: 16px !important;
        bottom: 16px !important;

        width: 52px !important;
        height: 52px !important;
    }

}

/* ==========================================================
   ABOUT PAGE REDESIGN
========================================================== */


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

.about-page-hero {
    position: relative;

    min-height: 590px;

    display: flex;
    align-items: flex-end;

    padding: 0 0 75px;

    color: white;

    background-image:
        linear-gradient(
            90deg,
            rgba(8, 15, 31, 0.9) 0%,
            rgba(8, 15, 31, 0.7) 45%,
            rgba(8, 15, 31, 0.25) 100%
        ),
        url("../img/Tentang.jpg");

    background-size: cover;
    background-position: center;
}

.about-page-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(8, 15, 31, 0.25)
        );
}

.about-page-hero-content {
    position: relative;
    z-index: 2;
}

.about-page-eyebrow {
    display: inline-flex;

    padding: 8px 13px;

    color: white;

    background: rgba(255, 255, 255, 0.13);

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.4px;

    backdrop-filter: blur(8px);
}

.about-page-hero h1 {
    max-width: 900px;

    margin: 22px 0 20px;

    font-size: clamp(48px, 6vw, 78px);

    line-height: 1.05;

    letter-spacing: -4px;
}

.about-page-hero p {
    max-width: 660px;

    margin: 0;

    color: rgba(255, 255, 255, 0.75);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================
   INTRODUCTION
========================= */

.about-introduction {
    padding: 120px 0;

    background: white;
}

.about-introduction-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 0.8fr);

    gap: 100px;

    align-items: start;
}

.about-introduction-heading {
    position: sticky;
    top: 130px;
}

.about-introduction-heading .section-title {
    max-width: 600px;

    margin-bottom: 0;
}

.about-introduction-content p {
    margin: 0 0 25px;

    color: var(--imani-muted);

    font-size: 16px;

    line-height: 2;
}

.about-introduction-content p:last-child {
    margin-bottom: 0;
}


/* =========================
   VERSE
========================= */

.about-verse-section {
    padding: 0 0 120px;

    background: white;
}

.about-verse-card {
    position: relative;

    overflow: hidden;

    min-height: 390px;

    display: grid;

    grid-template-columns: 0.55fr 1.45fr;

    align-items: center;

    padding: 55px 65px;

    color: white;

    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(245, 158, 66, 0.18),
            transparent 25%
        ),
        linear-gradient(
            130deg,
            #101828,
            #18233b
        );

    border-radius: 34px;
}

.about-verse-number {
    color: rgba(255, 255, 255, 0.07);

    font-size: clamp(95px, 12vw, 170px);

    line-height: 1;

    font-weight: 800;

    letter-spacing: -10px;
}

.about-verse-content {
    position: relative;
    z-index: 2;
}

.about-verse-label {
    color: #9fb0ff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;
}

.about-verse-content blockquote {
    max-width: 720px;

    margin: 20px 0;

    font-size: clamp(28px, 3.3vw, 46px);

    line-height: 1.35;

    font-weight: 700;

    letter-spacing: -1.5px;
}

.about-verse-content p {
    max-width: 580px;

    margin: 0;

    color: #98a2b3;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================
   VISION & MISSION
========================= */

.about-vision-section {
    padding: 120px 0;

    background: var(--imani-background);
}

.about-section-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 70px;

    margin-bottom: 55px;
}

.about-section-heading .section-title {
    margin-bottom: 0;
}

.about-section-heading > p {
    max-width: 420px;

    margin: 0 0 7px;

    color: var(--imani-muted);

    font-size: 13px;

    line-height: 1.8;
}

.about-vision-grid {
    display: grid;

    grid-template-columns: 1.25fr 0.75fr;

    gap: 24px;
}

.about-vision-card,
.about-mission-intro {
    min-height: 400px;

    padding: 38px;

    border-radius: 28px;
}

.about-vision-card {
    position: relative;

    overflow: hidden;

    color: white;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 255, 255, 0.15),
            transparent 28%
        ),
        var(--imani-primary);
}

.about-card-number {
    position: absolute;

    right: 25px;
    bottom: -35px;

    color: rgba(255, 255, 255, 0.09);

    font-size: 190px;

    font-weight: 800;

    line-height: 1;
}

.about-card-label {
    position: relative;
    z-index: 2;

    color: rgba(255, 255, 255, 0.72);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;
}

.about-vision-card h3 {
    position: relative;
    z-index: 2;

    max-width: 620px;

    margin: 90px 0 20px;

    font-size: clamp(30px, 3vw, 43px);

    line-height: 1.2;

    letter-spacing: -1.8px;
}

.about-vision-card p {
    position: relative;
    z-index: 2;

    max-width: 620px;

    margin: 0;

    color: rgba(255, 255, 255, 0.7);

    font-size: 13px;

    line-height: 1.9;
}

.about-mission-intro {
    position: relative;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: white;

    border: 1px solid var(--imani-border);
}

.about-mission-intro .about-card-label {
    color: var(--imani-primary);
}

.about-mission-intro h3 {
    max-width: 380px;

    margin: 18px 0 0;

    font-size: 30px;

    line-height: 1.3;

    letter-spacing: -1.3px;
}

.about-mission-big-number {
    align-self: flex-end;

    color: #eaecf0;

    font-size: 120px;

    line-height: 0.8;

    font-weight: 800;

    letter-spacing: -8px;
}


/* =========================
   MISSION CARDS
========================= */

.about-mission-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 24px;
}

.about-mission-card {
    min-height: 285px;

    padding: 28px;

    background: white;

    border: 1px solid var(--imani-border);

    border-radius: 23px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.about-mission-card:nth-child(1),
.about-mission-card:nth-child(2),
.about-mission-card:nth-child(3) {
    grid-column: span 2;
}

.about-mission-card:nth-child(4),
.about-mission-card:nth-child(5) {
    grid-column: span 3;
}

.about-mission-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 16px 36px rgba(16, 24, 40, 0.07);
}

.about-mission-card > span {
    width: 40px;
    height: 40px;

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

    color: var(--imani-primary);

    background: #eef1ff;

    border-radius: 11px;

    font-size: 10px;
    font-weight: 800;
}

.about-mission-card h3 {
    margin: 45px 0 13px;

    font-size: 18px;

    line-height: 1.4;
}

.about-mission-card p {
    margin: 0;

    color: var(--imani-muted);

    font-size: 12px;

    line-height: 1.8;
}


/* =========================
   VALUES
========================= */

.about-values-section {
    padding: 120px 0;

    background: white;
}

.about-values-heading {
    max-width: 700px;

    margin-bottom: 60px;
}

.about-values-grid {
    border-top: 1px solid var(--imani-border);
}

.about-value-item {
    display: grid;

    grid-template-columns: 110px 0.45fr 1fr;

    gap: 35px;

    align-items: start;

    padding: 35px 0;

    border-bottom: 1px solid var(--imani-border);
}

.about-value-number {
    color: var(--imani-primary);

    font-size: 11px;

    font-weight: 800;
}

.about-value-item div {
    display: contents;
}

.about-value-item h3 {
    margin: 0;

    font-size: 25px;

    letter-spacing: -0.8px;
}

.about-value-item p {
    max-width: 650px;

    margin: 0;

    color: var(--imani-muted);

    font-size: 13px;

    line-height: 1.9;
}


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

.about-cta-section {
    padding: 0 0 110px;

    background: white;
}

.about-cta-card {
    min-height: 310px;

    display: flex;

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

    gap: 60px;

    padding: 60px;

    color: white;

    background:
        radial-gradient(
            circle at 80% 0,
            rgba(245, 158, 66, 0.2),
            transparent 25%
        ),
        #101828;

    border-radius: 34px;
}

.about-cta-label {
    color: #9fb0ff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;
}

.about-cta-card h2 {
    max-width: 700px;

    margin: 16px 0 0;

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

    line-height: 1.15;

    letter-spacing: -2px;
}

.about-cta-actions {
    flex-shrink: 0;

    display: flex;

    gap: 12px;
}


/* ==========================================================
   ABOUT TABLET
========================================================== */

@media (max-width: 900px) {

    .about-introduction-grid {
        gap: 60px;
    }

    .about-introduction-heading {
        position: static;
    }

    .about-verse-card {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .about-verse-number {
        font-size: 100px;
    }

    .about-section-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

    .about-vision-grid {
        grid-template-columns: 1fr;
    }

    .about-mission-intro {
        min-height: 300px;
    }

    .about-mission-card:nth-child(n) {
        grid-column: span 3;
    }

    .about-mission-card:last-child {
        grid-column: 2 / span 4;
    }

    .about-cta-card {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* ==========================================================
   ABOUT MOBILE
========================================================== */

@media (max-width: 600px) {

    .about-page-hero {
        min-height: 560px;

        padding-bottom: 50px;

        background-position: 60% center;
    }

    .about-page-hero h1 {
        font-size: 46px;

        letter-spacing: -2.5px;
    }

    .about-page-hero p {
        font-size: 14px;
    }

    .about-introduction,
    .about-vision-section,
    .about-values-section {
        padding: 85px 0;
    }

    .about-introduction-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .about-introduction-content p {
        font-size: 14px;
    }

    .about-verse-section {
        padding-bottom: 85px;
    }

    .about-verse-card {
        min-height: auto;

        padding: 35px 25px;

        border-radius: 25px;
    }

    .about-verse-number {
        font-size: 75px;

        letter-spacing: -5px;
    }

    .about-verse-content blockquote {
        font-size: 27px;

        letter-spacing: -1px;
    }

    .about-vision-card,
    .about-mission-intro {
        min-height: 350px;

        padding: 28px;

        border-radius: 23px;
    }

    .about-vision-card h3 {
        margin-top: 65px;

        font-size: 31px;
    }

    .about-card-number {
        font-size: 135px;
    }

    .about-mission-grid {
        grid-template-columns: 1fr;
    }

    .about-mission-card:nth-child(n),
    .about-mission-card:last-child {
        grid-column: auto;
    }

    .about-mission-card {
        min-height: 245px;
    }

    .about-mission-card h3 {
        margin-top: 35px;
    }

    .about-values-heading {
        margin-bottom: 40px;
    }

    .about-value-item {
        grid-template-columns: 45px 1fr;

        gap: 20px;
    }

    .about-value-item div {
        display: block;
    }

    .about-value-item h3 {
        margin-bottom: 10px;
    }

    .about-cta-section {
        padding-bottom: 80px;
    }

    .about-cta-card {
        min-height: auto;

        padding: 45px 25px;

        border-radius: 25px;
    }

    .about-cta-card h2 {
        font-size: 35px;

        letter-spacing: -1.5px;
    }

    .about-cta-actions {
        width: 100%;

        flex-direction: column;
    }

}

/* ==========================================================
   PUBLIC ARTICLE PAGE - IMANI
   CSS SESUAI artikel_public_view.php
========================================================== */


/* ==========================================================
   1. PAGE
========================================================== */

.article-page{
    width:100%;
    overflow:hidden;
    background:#ffffff;
}

.article-page *,
.article-page *::before,
.article-page *::after{
    box-sizing:border-box;
}


/* ==========================================================
   2. CONTAINER
========================================================== */

.article-page .page-container{
    width:min(1380px, calc(100% - 48px));
    margin:0 auto;
}


/* ==========================================================
   3. GLOBAL ARTICLE TYPOGRAPHY
========================================================== */

.article-page .section-eyebrow{
    display:block;

    margin:0 0 28px;

    color:#3f51d8;

    font-size:14px;
    font-weight:700;
    line-height:1.2;

    letter-spacing:1.6px;
    text-transform:uppercase;
}


.article-page .section-title{
    margin:0;

    color:#111827;

    font-size:clamp(44px, 4.2vw, 64px);
    line-height:1;

    letter-spacing:-3.5px;
}


/* ==========================================================
   4. HERO
========================================================== */

.article-page-hero{
    padding:80px 0 60px;

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(63, 81, 216, 0.10),
            transparent 30%
        ),
        #f8f7fb;
}


.article-page-heading{
    display:grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(320px, 0.75fr);

    gap:80px;

    align-items:end;
}


.article-page-heading h1{
    max-width:850px;

    margin:0;

    color:#111827;

    font-size:clamp(56px, 5.5vw, 84px);
    font-weight:700;
    line-height:0.99;

    letter-spacing:-5px;
}


.article-page-heading p{
    max-width:440px;

    margin:0 0 12px;

    color:#6b7280;

    font-size:17px;
    line-height:1.8;
}


/* ==========================================================
   5. FEATURED SECTION
========================================================== */

.article-featured-section{
    padding:0 0 95px;

    background:#f8f7fb;
}


/* ==========================================================
   6. FEATURED CARD
========================================================== */

.article-featured-card{
    display:grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(390px, 0.85fr);

    width:100%;
    min-height:520px;

    overflow:hidden;

    background:#ffffff;

    border:1px solid #e5e7eb;
    border-radius:30px;

    color:inherit;
    text-decoration:none;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.article-featured-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 25px 60px rgba(15, 23, 42, 0.10);
}


/* ==========================================================
   7. FEATURED IMAGE
========================================================== */

.article-featured-image{
    position:relative;

    width:100%;
    min-width:0;
    min-height:520px;

    overflow:hidden;

    background:#e5e7eb;
}


.article-featured-image img{
    position:absolute;

    inset:0;

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;
}


/* ==========================================================
   8. FEATURED CONTENT
========================================================== */

.article-featured-content{
    display:flex;
    flex-direction:column;
    justify-content:space-between;

    min-width:0;

    padding:55px 50px;
}


.article-featured-content > div{
    min-width:0;
}


.article-featured-label{
    display:block;

    margin:0 0 34px;

    color:#3f51d8;

    font-size:12px;
    font-weight:700;
    line-height:1.2;

    letter-spacing:1.7px;
    text-transform:uppercase;
}


/* ==========================================================
   9. META
========================================================== */

.article-page .article-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:9px;

    margin:0 0 22px;

    color:#3f51d8;

    font-size:11px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:.2px;
    text-transform:uppercase;
}


.article-page .article-meta-divider{
    display:block;

    width:3px;
    height:3px;

    flex:0 0 3px;

    background:#c4c8d3;

    border-radius:50%;
}


/* ==========================================================
   10. FEATURED TITLE
========================================================== */

.article-featured-content h2{
    overflow-wrap:break-word;

    margin:0 0 24px;

    color:#111827;

    font-size:clamp(34px, 3.2vw, 50px);
    font-weight:700;
    line-height:1.08;

    letter-spacing:-2.5px;
}


/* ==========================================================
   11. FEATURED DESCRIPTION
========================================================== */

.article-featured-content p{
    max-width:520px;

    margin:0;

    color:#6b7280;

    font-size:16px;
    line-height:1.75;
}


/* ==========================================================
   12. FEATURED LINK
========================================================== */

.article-featured-link{
    display:inline-flex;
    align-items:center;

    width:max-content;

    gap:14px;

    margin-top:35px;

    color:#3f51d8;

    font-size:14px;
    font-weight:700;
    line-height:1.3;
}


.article-featured-link span{
    transition:transform .25s ease;
}


.article-featured-card:hover .article-featured-link span{
    transform:translateX(5px);
}


/* ==========================================================
   13. ARTICLE LIST SECTION
========================================================== */

.article-list-section{
    padding:85px 0 120px;

    background:#ffffff;
}


/* ==========================================================
   14. LIST HEADING
========================================================== */

.article-list-heading{
    display:grid;

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

    gap:60px;

    align-items:end;

    margin:0 0 55px;
}


.article-list-heading .section-eyebrow{
    margin-bottom:20px;
}


.article-list-heading p{
    max-width:450px;

    margin:0 0 5px;

    color:#6b7280;

    font-size:16px;
    line-height:1.75;
}


/* ==========================================================
   15. ARTICLE GRID
========================================================== */

.article-public-grid{
    display:grid;

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

    gap:24px;

    align-items:stretch;
}


/* ==========================================================
   16. ARTICLE CARD
========================================================== */

.article-public-card{
    display:flex;
    flex-direction:column;

    min-width:0;
    height:100%;

    overflow:hidden;

    background:#ffffff;

    border:1px solid #e5e7eb;
    border-radius:24px;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.article-public-card:hover{
    transform:translateY(-6px);

    border-color:#d4d8e5;

    box-shadow:
        0 20px 45px rgba(15, 23, 42, .09);
}


/* ==========================================================
   17. ARTICLE CARD IMAGE LINK
========================================================== */

.article-public-image{
    position:relative;

    display:block;

    width:100%;
    height:260px;

    flex:0 0 260px;

    overflow:hidden;

    background:#e5e7eb;
}


/* ==========================================================
   18. ARTICLE CARD IMAGE
========================================================== */

.article-public-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transition:transform .4s ease;
}


.article-public-card:hover .article-public-image img{
    transform:scale(1.035);
}


/* ==========================================================
   19. ARTICLE CARD CONTENT
========================================================== */

.article-public-content{
    display:flex;
    flex:1;
    flex-direction:column;

    min-width:0;

    padding:28px;
}


/* ==========================================================
   20. ARTICLE CARD TITLE
========================================================== */

.article-public-content h3{
    overflow-wrap:break-word;

    margin:0 0 17px;

    color:#111827;

    font-size:22px;
    font-weight:700;
    line-height:1.3;

    letter-spacing:-.8px;
}


.article-public-content h3 a{
    color:inherit;

    text-decoration:none;
}


.article-public-content h3 a:hover{
    color:#3f51d8;
}


/* ==========================================================
   21. ARTICLE CARD DESCRIPTION
========================================================== */

.article-public-content > p{
    margin:0 0 25px;

    color:#6b7280;

    font-size:14px;
    line-height:1.7;
}


/* ==========================================================
   22. READ MORE
========================================================== */

.article-read-link{
    display:inline-flex;
    align-items:center;

    width:max-content;

    gap:14px;

    margin-top:auto;
    padding-top:5px;

    color:#3f51d8;

    font-size:14px;
    font-weight:700;
    line-height:1.3;

    text-decoration:none;
}


.article-read-link span{
    transition:transform .25s ease;
}


.article-read-link:hover span{
    transform:translateX(5px);
}


/* ==========================================================
   23. EMPTY STATE
========================================================== */

.article-empty-section{
    padding:90px 0 120px;
}


.article-empty-state{
    padding:70px 30px;

    background:#f8f7fb;

    border:1px solid #e5e7eb;
    border-radius:24px;

    text-align:center;
}


.article-empty-state > span{
    display:block;

    margin:0 0 18px;

    color:#3f51d8;

    font-size:12px;
    font-weight:700;

    letter-spacing:1.5px;
    text-transform:uppercase;
}


.article-empty-state h2,
.article-empty-state h3{
    margin:0 0 12px;

    color:#111827;

    font-size:30px;
    line-height:1.2;
}


.article-empty-state p{
    max-width:560px;

    margin:0 auto 25px;

    color:#6b7280;

    line-height:1.7;
}


/* ==========================================================
   24. LARGE TABLET
========================================================== */

@media(max-width:1100px){

    .article-page-heading{
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(280px, .8fr);

        gap:50px;
    }


    .article-featured-card{
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(350px, .9fr);
    }


    .article-featured-content{
        padding:45px 38px;
    }


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

}


/* ==========================================================
   25. TABLET
========================================================== */

@media(max-width:850px){

    .article-page-hero{
        padding:65px 0 50px;
    }


    .article-page-heading{
        grid-template-columns:1fr;

        gap:28px;
    }


    .article-page-heading h1{
        max-width:720px;

        font-size:clamp(50px, 9vw, 72px);

        letter-spacing:-4px;
    }


    .article-page-heading p{
        max-width:600px;
    }


    .article-featured-card{
        grid-template-columns:1fr;

        min-height:0;
    }


    .article-featured-image{
        min-height:430px;
        height:430px;
    }


    .article-featured-content{
        min-height:420px;

        padding:45px 35px;
    }


    .article-list-heading{
        grid-template-columns:1fr;

        gap:25px;
    }


    .article-list-heading p{
        max-width:600px;
    }

}


/* ==========================================================
   26. MOBILE
========================================================== */

@media(max-width:650px){

    .article-page .page-container{
        width:calc(100% - 32px);
    }


    /* HERO */

    .article-page-hero{
        padding:55px 0 42px;
    }


    .article-page .section-eyebrow{
        margin-bottom:20px;

        font-size:12px;
    }


    .article-page-heading h1{
        font-size:44px;
        line-height:1.02;

        letter-spacing:-2.8px;
    }


    .article-page-heading h1 br{
        display:none;
    }


    .article-page-heading p{
        font-size:15px;
    }


    /* FEATURED */

    .article-featured-section{
        padding-bottom:70px;
    }


    .article-featured-card{
        border-radius:22px;
    }


    .article-featured-image{
        height:280px;
        min-height:280px;
    }


    .article-featured-content{
        min-height:0;

        padding:32px 24px;
    }


    .article-featured-label{
        margin-bottom:25px;
    }


    .article-featured-content h2{
        font-size:32px;

        letter-spacing:-1.8px;
    }


    .article-featured-content p{
        font-size:15px;
    }


    /* ARTICLE LIST */

    .article-list-section{
        padding:65px 0 90px;
    }


    .article-list-heading{
        margin-bottom:35px;
    }


    .article-page .section-title{
        font-size:42px;

        letter-spacing:-2.5px;
    }


    /* GRID */

    .article-public-grid{
        grid-template-columns:1fr;
    }


    .article-public-card{
        border-radius:20px;
    }


    .article-public-image{
        height:240px;

        flex-basis:240px;
    }


    .article-public-content{
        padding:24px;
    }


    .article-public-content h3{
        font-size:21px;
    }

}

/* ==========================================================
   HALAMAN PUBLIC JADWAL IMANI
   FULL FINAL CSS
========================================================== */


/* ==========================================================
   1. PAGE
========================================================== */

.schedule-page{
    overflow:hidden;
    background:#ffffff;
}


.schedule-container{
    width:min(1380px, calc(100% - 48px));
    margin:0 auto;
}


/* ==========================================================
   2. GLOBAL TYPOGRAPHY
========================================================== */

.schedule-eyebrow{
    display:block;

    color:#4655d8;

    font-size:13px;
    font-weight:700;

    letter-spacing:1.7px;

    text-transform:uppercase;
}


/* ==========================================================
   3. HERO
========================================================== */

.schedule-hero{
    padding:60px 0 38px;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(70,85,216,.10),
            transparent 30%
        ),
        #faf8fb;
}


.schedule-hero > .schedule-container > .schedule-eyebrow{
    margin-bottom:28px;
}


.schedule-hero-heading{
    display:grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(320px, .7fr);

    gap:60px;

    align-items:end;
}


.schedule-hero-heading h1{
    max-width:780px;

    margin:0;

    color:#111827;

    font-size:clamp(48px, 4.5vw, 70px);
    line-height:.1;

    letter-spacing:-3.5px;
}


.schedule-hero-heading p{
    max-width:440px;

    margin:0 0 10px;

    color:#6b7280;

    font-size:17px;
    line-height:1.8;
}


/* ==========================================================
   4. SEARCH
========================================================== */

.schedule-search{
    display:flex;

    width:min(700px, 100%);

    margin-top:32px;
}


.schedule-search input{
    flex:1;

    min-width:0;
    height:58px;

    padding:0 22px;

    background:#ffffff;

    border:1px solid #e1e3ea;
    border-right:0;

    border-radius:16px 0 0 16px;

    outline:none;

    color:#111827;

    font-family:inherit;
    font-size:15px;
}


.schedule-search input:focus{
    border-color:#4655d8;
}


.schedule-search button{
    height:58px;

    padding:0 28px;

    background:#4655d8;

    border:0;

    border-radius:0 16px 16px 0;

    color:#ffffff;

    cursor:pointer;

    font-family:inherit;
    font-size:14px;
    font-weight:700;

    transition:
        transform .25s ease,
        background .25s ease;
}


.schedule-search button:hover{
    background:#3846c8;
}


/* ==========================================================
   5. SUCCESS ALERT
========================================================== */

.schedule-alert-success{
    margin-bottom:25px;
    padding:15px 18px;

    background:#ecfdf3;

    border:1px solid #bbf7d0;
    border-radius:12px;

    color:#166534;

    font-size:14px;
}


/* ==========================================================
   6. FEATURED SECTION
========================================================== */

.schedule-featured-section{
    padding:55px 0 80px;

    background:#faf8fb;
}


.schedule-featured-heading{
    margin-bottom:32px;
}


.schedule-featured-heading .schedule-eyebrow{
    margin-bottom:20px;
}


.schedule-featured-heading h2{
    max-width:700px;

    margin:0;

    color:#111827;

    font-size:clamp(40px, 4vw, 58px);
    line-height:1.02;

    letter-spacing:-3.5px;
}


/* ==========================================================
   7. FEATURED GRID
========================================================== */

.schedule-featured-grid{
    display:grid;

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

    gap:22px;

    align-items:stretch;
}


/* ==========================================================
   8. FEATURED CARD
========================================================== */

.schedule-featured-card{
    display:grid;

    grid-template-columns:
        140px minmax(0, 1fr);

    min-height:390px;

    overflow:hidden;

    background:#ffffff;

    border:1px solid #e3e5ec;
    border-radius:24px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.schedule-featured-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 20px 45px rgba(15,23,42,.08);
}


/* ==========================================================
   9. FEATURED DATE
========================================================== */

.schedule-featured-date{
    display:flex;

    flex-direction:column;

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

    padding:28px 18px;

    background:#4655d8;

    color:#ffffff;

    text-align:center;
}


.schedule-date-day{
    font-size:74px;
    font-weight:700;

    line-height:.9;

    letter-spacing:-5px;
}


.schedule-date-month{
    margin-top:20px;

    font-size:16px;
    font-weight:700;

    letter-spacing:2px;
}


.schedule-date-year{
    margin-top:7px;

    font-size:14px;

    opacity:.75;
}


/* ==========================================================
   10. FEATURED CONTENT
========================================================== */

.schedule-featured-content{
    display:flex;

    flex-direction:column;

    min-width:0;

    padding:34px 30px;
}


.schedule-featured-top{
    display:flex;

    justify-content:space-between;
    align-items:flex-start;

    gap:16px;
}


.schedule-event-label{
    display:block;

    margin-bottom:12px;

    color:#4655d8;

    font-size:11px;
    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;
}


.schedule-featured-content h3{
    margin:0;

    color:#111827;

    font-size:clamp(27px, 2.2vw, 36px);
    line-height:1.08;

    letter-spacing:-1.7px;

    overflow-wrap:anywhere;
}


/* ==========================================================
   11. REGISTRATION BADGE
========================================================== */

.schedule-registration-badge{
    flex-shrink:0;

    padding:8px 10px;

    background:#eef0ff;

    border-radius:999px;

    color:#4655d8;

    font-size:9px;
    font-weight:700;

    white-space:nowrap;
}


.schedule-registration-free{
    background:#f5f5f7;

    color:#6b7280;
}


/* ==========================================================
   12. FEATURED EVENT INFO
========================================================== */

.schedule-event-info{
    display:grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap:20px;

    margin-top:28px;

    padding:20px 0;

    border-top:1px solid #e5e7eb;
    border-bottom:1px solid #e5e7eb;
}


.schedule-event-info div{
    min-width:0;
}


.schedule-event-info span{
    display:block;

    margin-bottom:8px;

    color:#9ca3af;

    font-size:10px;
    font-weight:700;

    letter-spacing:1.3px;
}


.schedule-event-info strong{
    display:block;

    color:#111827;

    font-size:14px;
    line-height:1.4;

    overflow-wrap:anywhere;
}


/* ==========================================================
   13. FEATURED DESCRIPTION
========================================================== */

.schedule-featured-description{
    margin:20px 0 0;

    color:#6b7280;

    font-size:14px;
    line-height:1.65;
}


/* ==========================================================
   14. FEATURED REGISTER BUTTON
========================================================== */

.schedule-register-button{
    display:inline-flex;

    align-items:center;

    align-self:flex-start;

    gap:12px;

    margin-top:auto;
    padding:14px 18px 0 0;

    background:none;

    border:0;

    color:#4655d8;

    cursor:pointer;

    font-family:inherit;
    font-size:13px;
    font-weight:700;
}


/* ==========================================================
   15. LIST SECTION
========================================================== */

.schedule-list-section{
    padding:75px 0 100px;

    background:#ffffff;
}


.schedule-list-heading{
    display:grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(300px, .7fr);

    gap:60px;

    align-items:end;

    margin-bottom:40px;
}


.schedule-list-heading .schedule-eyebrow{
    margin-bottom:18px;
}


.schedule-list-heading h2{
    max-width:610px;

    margin:0;

    color:#111827;

    font-size:clamp(40px, 4vw, 58px);
    line-height:1.02;

    letter-spacing:-3.5px;
}


.schedule-list-heading > p{
    max-width:460px;

    margin:0 0 6px;

    color:#6b7280;

    font-size:15px;
    line-height:1.75;
}


/* ==========================================================
   16. SCHEDULE GRID
========================================================== */

.schedule-grid{
    display:grid;

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

    gap:20px;

    align-items:stretch;
}


/* ==========================================================
   17. SCHEDULE CARD
========================================================== */

.schedule-card{
    display:grid;

    grid-template-columns:
        120px minmax(0, 1fr);

    min-height:300px;

    overflow:hidden;

    background:#ffffff;

    border:1px solid #e3e5ec;
    border-radius:22px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.schedule-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 18px 40px rgba(15,23,42,.07);
}


/* ==========================================================
   18. SCHEDULE CARD DATE
========================================================== */

.schedule-card-date{
    display:flex;

    flex-direction:column;

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

    padding:35px 14px;

    background:#f1efff;

    text-align:center;
}


.schedule-card-date > span{
    color:#4655d8;

    font-size:55px;
    font-weight:700;

    line-height:1;

    letter-spacing:-3px;
}


.schedule-card-date small{
    margin-top:14px;

    color:#4655d8;

    font-size:14px;
    font-weight:700;

    letter-spacing:1.5px;
}


.schedule-card-date em{
    margin-top:5px;

    color:#8b8fa8;

    font-size:13px;
    font-style:normal;
}


/* ==========================================================
   19. SCHEDULE CARD CONTENT
========================================================== */

.schedule-card-content{
    display:flex;

    flex-direction:column;

    min-width:0;

    padding:30px 27px;
}


.schedule-card-content h3{
    margin:0;

    color:#111827;

    font-size:23px;
    line-height:1.2;

    letter-spacing:-1px;

    overflow-wrap:anywhere;
}


/* ==========================================================
   20. CARD INFO
========================================================== */

.schedule-card-info{
    display:grid;

    grid-template-columns:
        .7fr 1.3fr;

    gap:18px;

    margin-top:24px;
    padding-top:20px;

    border-top:1px solid #e5e7eb;
}


.schedule-card-info div{
    min-width:0;
}


.schedule-card-info span{
    display:block;

    margin-bottom:7px;

    color:#9ca3af;

    font-size:10px;
    font-weight:700;

    letter-spacing:1.2px;
}


.schedule-card-info strong{
    display:block;

    color:#111827;

    font-size:13px;
    line-height:1.4;

    overflow-wrap:anywhere;
}


/* ==========================================================
   21. CARD DESCRIPTION
========================================================== */

.schedule-card-description{
    margin:20px 0 0;

    color:#6b7280;

    font-size:13px;
    line-height:1.65;
}


/* ==========================================================
   22. CARD FOOTER
========================================================== */

.schedule-card-footer{
    display:flex;

    align-items:flex-end;

    min-height:38px;

    margin-top:auto;
    padding-top:20px;
}


.schedule-card-register{
    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:0;

    background:none;

    border:0;

    color:#4655d8;

    cursor:pointer;

    font-family:inherit;
    font-size:13px;
    font-weight:700;
}


.schedule-card-no-register{
    color:#9ca3af;

    font-size:12px;
}


/* ==========================================================
   23. EMPTY STATE
========================================================== */

.schedule-empty-section{
    padding:80px 0 110px;
}


.schedule-empty-state{
    padding:60px 30px;

    background:#faf8fb;

    border:1px solid #e5e7eb;
    border-radius:22px;

    text-align:center;
}


.schedule-empty-state > span{
    color:#4655d8;

    font-size:12px;
    font-weight:700;

    letter-spacing:1.5px;
}


.schedule-empty-state h2,
.schedule-empty-state h3{
    margin:15px 0 10px;

    color:#111827;
}


.schedule-empty-state p{
    margin:0;

    color:#6b7280;

    line-height:1.7;
}


.schedule-empty-button{
    display:inline-flex;

    margin-top:25px;
    padding:13px 18px;

    background:#4655d8;

    border-radius:10px;

    color:#ffffff;

    text-decoration:none;

    font-size:13px;
    font-weight:700;
}


/* ==========================================================
   24. MODAL
========================================================== */

.schedule-modal{
    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

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

    padding:24px;

    background:rgba(15,23,42,.55);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.schedule-modal.is-open{
    opacity:1;

    visibility:visible;
}


.schedule-modal-dialog{
    position:relative;

    width:min(560px, 100%);

    max-height:calc(100vh - 48px);

    overflow-y:auto;

    padding:38px;

    background:#ffffff;

    border-radius:22px;

    box-shadow:
        0 30px 80px rgba(15,23,42,.2);
}


.schedule-modal-close{
    position:absolute;

    top:18px;
    right:20px;

    width:36px;
    height:36px;

    background:#f3f4f6;

    border:0;
    border-radius:50%;

    color:#111827;

    cursor:pointer;

    font-size:23px;
}


.schedule-modal-dialog > .schedule-eyebrow{
    margin-bottom:15px;
}


.schedule-modal-dialog h2{
    margin:0;

    color:#111827;

    font-size:32px;
    line-height:1.15;

    letter-spacing:-1.5px;
}


.schedule-modal-subtitle{
    margin:12px 0 28px;

    color:#6b7280;

    font-size:14px;
}


/* ==========================================================
   25. FORM MODAL
========================================================== */

.schedule-registration-form{
    display:grid;

    gap:18px;
}


.schedule-form-group{
    display:grid;

    gap:8px;
}


.schedule-form-group label{
    color:#111827;

    font-size:13px;
    font-weight:700;
}


.schedule-form-group input,
.schedule-form-group select{
    width:100%;
    height:48px;

    box-sizing:border-box;

    padding:0 14px;

    background:#ffffff;

    border:1px solid #dfe2e8;
    border-radius:10px;

    outline:none;

    color:#111827;

    font-family:inherit;
    font-size:14px;
}


.schedule-form-group input:focus,
.schedule-form-group select:focus{
    border-color:#4655d8;
}


.schedule-form-submit{
    height:50px;

    margin-top:5px;

    background:#4655d8;

    border:0;
    border-radius:11px;

    color:#ffffff;

    cursor:pointer;

    font-family:inherit;
    font-size:14px;
    font-weight:700;
}


/* ==========================================================
   26. RESPONSIVE TABLET
========================================================== */

@media(max-width:1100px){

    .schedule-hero-heading{
        grid-template-columns:
            1.2fr .8fr;

        gap:45px;
    }


    .schedule-featured-grid{
        grid-template-columns:1fr;
    }


    .schedule-featured-card{
        min-height:340px;
    }

}


/* ==========================================================
   27. RESPONSIVE TABLET KECIL
========================================================== */

@media(max-width:850px){

    .schedule-hero-heading{
        grid-template-columns:1fr;

        gap:25px;
    }


    .schedule-hero-heading p{
        max-width:600px;
    }


    .schedule-list-heading{
        grid-template-columns:1fr;

        gap:22px;
    }


    .schedule-grid{
        grid-template-columns:1fr;
    }

}


/* ==========================================================
   28. RESPONSIVE MOBILE
========================================================== */

@media(max-width:650px){

    .schedule-container{
        width:calc(100% - 32px);
    }


    .schedule-hero{
        padding:55px 0 40px;
    }


.schedule-hero-heading h1{
    display:block;

    width:100%;
    max-width:760px;
    height:auto;

    margin:0;

    position:static;

    color:#111827;

    font-size:64px;
    line-height:1.05;

    letter-spacing:-3px;

    white-space:normal;
}


    .schedule-search{
        margin-top:35px;
    }


    .schedule-search input{
        height:54px;

        padding:0 16px;
    }


    .schedule-search button{
        height:54px;

        padding:0 17px;

        font-size:12px;
    }


    .schedule-featured-section{
        padding:42px 0 65px;
    }


    .schedule-featured-heading h2,
    .schedule-list-heading h2{
        font-size:40px;

        letter-spacing:-2.5px;
    }


    .schedule-featured-card{
        grid-template-columns:1fr;

        min-height:0;
    }


    .schedule-featured-date{
        flex-direction:row;

        justify-content:flex-start;

        gap:14px;

        padding:22px 24px;
    }


    .schedule-date-day{
        font-size:55px;
    }


    .schedule-date-month,
    .schedule-date-year{
        margin:0;
    }


    .schedule-featured-content{
        padding:28px 24px;
    }


    .schedule-featured-top{
        flex-direction:column;
    }


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


    .schedule-list-section{
        padding:60px 0 80px;
    }


    .schedule-card{
        grid-template-columns:95px minmax(0, 1fr);

        min-height:280px;
    }


    .schedule-card-date{
        padding:28px 10px;
    }


    .schedule-card-date > span{
        font-size:45px;
    }


    .schedule-card-content{
        padding:25px 20px;
    }


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


    .schedule-modal-dialog{
        padding:32px 22px;
    }

}

/* FIX HEADING JADWAL */

.schedule-hero-heading h1::before,
.schedule-hero-heading h1::after{
    content:none !important;
    display:none !important;
}

.schedule-hero-heading h1{
    display:block !important;
    position:static !important;

    width:auto !important;
    max-width:780px !important;
    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

    font-size:64px !important;
    line-height:1.05 !important;
    letter-spacing:-3px !important;

    white-space:normal !important;
    overflow:visible !important;
}

/* ==========================================================
   PUBLIC DOCUMENTATION PAGE — COMPACT FINAL
========================================================== */

.documentation-page{
    overflow:hidden;
    background:#fff;
}

.documentation-page .page-container{
    width:min(1360px, calc(100% - 48px));
    margin:0 auto;
}


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

.documentation-hero{
    padding:58px 0 52px;

    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(63,81,216,.09),
            transparent 29%
        ),
        #f8f7fb;
}

.documentation-eyebrow{
    display:block;

    margin-bottom:20px;

    color:#3f51d8;

    font-size:13px;
    line-height:1;
    font-weight:700;

    letter-spacing:1.6px;
    text-transform:uppercase;
}

.documentation-hero-heading{
    display:grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(320px,.75fr);

    gap:60px;

    align-items:end;
}

.documentation-hero-heading h1{
    max-width:700px;

    margin:0;

    color:#111827;

    font-size:clamp(46px,4.2vw,64px);
    line-height:1.01;

    letter-spacing:-3.5px;
}

.documentation-hero-heading p{
    max-width:420px;

    margin:0 0 7px;

    color:#6b7280;

    font-size:16px;
    line-height:1.7;
}


/* ==========================================================
   FILTER
========================================================== */

.documentation-filter{
    display:grid;

    grid-template-columns:
        minmax(280px,1fr)
        200px
        170px
        110px
        90px;

    width:min(100%, 1030px);

    margin-top:36px;

    overflow:hidden;

    background:#fff;

    border:1px solid #e2e4eb;
    border-radius:16px;
}

.documentation-filter input,
.documentation-filter select,
.documentation-filter button,
.documentation-reset{
    min-width:0;
    height:56px;

    margin:0;
    padding:0 18px;

    border:0;
    border-right:1px solid #e5e7eb;
    border-radius:0;

    background:#fff;

    color:#4b5563;

    font-family:inherit;
    font-size:14px;

    outline:none;
}

.documentation-filter input,
.documentation-filter select{
    width:100%;
}

.documentation-filter select{
    cursor:pointer;
}

.documentation-filter button{
    border-right:0;

    background:#4956d8;
    color:#fff;

    font-weight:700;

    cursor:pointer;
}

.documentation-reset{
    display:flex;

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

    border-right:0;

    color:#4956d8;

    font-weight:700;

    text-decoration:none;
}


/* ==========================================================
   SECTION HEADING
========================================================== */

.documentation-section-heading{
    display:grid;

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

    gap:50px;

    align-items:end;

    margin-bottom:34px;
}

.documentation-section-heading h2{
    max-width:620px;

    margin:0;

    color:#111827;

    font-size:clamp(38px,3.5vw,52px);
    line-height:1.03;

    letter-spacing:-2.8px;
}

.documentation-section-heading p{
    max-width:420px;

    margin:0 0 4px;

    color:#6b7280;

    font-size:15px;
    line-height:1.7;
}


/* ==========================================================
   FEATURED SECTION
========================================================== */

.documentation-featured-section{
    padding:58px 0 70px;

    background:#f8f7fb;
}


/* ==========================================================
   FEATURED CARD
========================================================== */

.documentation-featured-card{
    display:grid;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(330px,.65fr);

    min-height:390px;

    overflow:hidden;

    background:#fff;

    border:1px solid #e2e4eb;
    border-radius:24px;

    color:inherit;
    text-decoration:none;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.documentation-featured-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 20px 45px rgba(15,23,42,.08);
}


/* ==========================================================
   FEATURED IMAGE
========================================================== */

.documentation-featured-image{
    min-width:0;

    height:390px;
    min-height:390px;

    overflow:hidden;
}

.documentation-featured-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .5s ease;
}

.documentation-featured-card:hover
.documentation-featured-image img{
    transform:scale(1.025);
}


/* ==========================================================
   FEATURED CONTENT
========================================================== */

.documentation-featured-content{
    display:flex;

    flex-direction:column;
    justify-content:center;

    min-width:0;

    padding:38px 38px;
}

.documentation-card-label{
    display:block;

    margin-bottom:20px;

    color:#4956d8;

    font-size:11px;
    font-weight:700;

    letter-spacing:1.5px;
    text-transform:uppercase;
}


/* ==========================================================
   META
========================================================== */

.documentation-meta{
    display:flex;

    align-items:center;
    flex-wrap:wrap;

    gap:8px;

    margin-bottom:15px;

    color:#4956d8;

    font-size:10px;
    font-weight:700;

    letter-spacing:.3px;
    text-transform:uppercase;
}

.documentation-meta-divider{
    width:3px;
    height:3px;

    flex:0 0 3px;

    background:#c4c8d3;

    border-radius:50%;
}


/* ==========================================================
   FEATURED TITLE
========================================================== */

.documentation-featured-content h3{
    margin:0 0 16px;

    color:#111827;

    font-size:clamp(30px,2.7vw,42px);
    line-height:1.08;

    letter-spacing:-1.8px;
}

.documentation-featured-content p{
    margin:0;

    color:#6b7280;

    font-size:14px;
    line-height:1.7;
}


/* ==========================================================
   VIEW LINK
========================================================== */

.documentation-view-link{
    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:24px;

    color:#4956d8;

    font-size:13px;
    font-weight:700;

    text-decoration:none;
}

.documentation-view-link span{
    transition:transform .25s ease;
}

.documentation-featured-card:hover
.documentation-view-link span,
.documentation-card:hover
.documentation-view-link span{
    transform:translateX(4px);
}


/* ==========================================================
   DOCUMENTATION LIST SECTION
========================================================== */

.documentation-list-section{
    padding:64px 0 90px;

    background:#fff;
}


/* ==========================================================
   GRID
========================================================== */

.documentation-grid{
    display:grid;

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

    gap:22px;

    align-items:stretch;
}


/* ==========================================================
   DOCUMENTATION CARD
========================================================== */

.documentation-card{
    display:flex;

    flex-direction:column;

    min-width:0;
    height:100%;

    overflow:hidden;

    background:#fff;

    border:1px solid #e2e4eb;
    border-radius:20px;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.documentation-card:hover{
    transform:translateY(-4px);

    border-color:#d2d6e2;

    box-shadow:
        0 16px 36px rgba(15,23,42,.08);
}


/* ==========================================================
   CARD IMAGE
========================================================== */

.documentation-card-image{
    display:block;

    width:100%;
    height:220px;

    overflow:hidden;

    background:#f1f1f6;
}

.documentation-card-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .5s ease;
}

.documentation-card:hover
.documentation-card-image img{
    transform:scale(1.035);
}


/* ==========================================================
   CARD CONTENT
========================================================== */

.documentation-card-content{
    display:flex;

    flex:1;
    flex-direction:column;

    min-width:0;

    padding:22px 24px 24px;
}

.documentation-card-content h3{
    margin:0 0 11px;

    color:#111827;

    font-size:20px;
    line-height:1.25;

    letter-spacing:-.7px;
}

.documentation-card-content h3 a{
    color:inherit;

    text-decoration:none;
}

.documentation-card-content p{
    margin:0 0 7px;

    color:#6b7280;

    font-size:13px;
    line-height:1.65;
}

.documentation-card-content .documentation-view-link{
    margin-top:auto;

    padding-top:16px;
}


/* ==========================================================
   EMPTY IMAGE
========================================================== */

.documentation-image-empty{
    display:flex;

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

    width:100%;
    height:100%;

    min-height:220px;

    background:#eef0ff;

    color:#4956d8;

    font-size:25px;
    font-weight:700;

    letter-spacing:2px;
}


/* ==========================================================
   EMPTY STATE
========================================================== */

.documentation-empty-section{
    padding:70px 0 90px;

    background:#f8f7fb;
}

.documentation-empty-state{
    padding:55px 30px;

    background:#fff;

    border:1px solid #e2e4eb;
    border-radius:22px;

    text-align:center;
}

.documentation-empty-state > span{
    display:block;

    margin-bottom:16px;

    color:#4956d8;

    font-size:11px;
    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;
}

.documentation-empty-state h2,
.documentation-empty-state h3{
    margin:0 0 12px;

    color:#111827;

    font-size:30px;
    line-height:1.15;

    letter-spacing:-1.3px;
}

.documentation-empty-state p{
    max-width:540px;

    margin:0 auto;

    color:#6b7280;

    line-height:1.7;
}

.documentation-reset-button{
    display:inline-flex;

    margin-top:22px;

    padding:13px 20px;

    background:#4956d8;
    color:#fff;

    border-radius:11px;

    font-weight:700;

    text-decoration:none;
}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1100px){

    .documentation-hero-heading,
    .documentation-section-heading{
        grid-template-columns:
            minmax(0,1.15fr)
            minmax(280px,.85fr);

        gap:40px;
    }

    .documentation-filter{
        grid-template-columns:
            minmax(240px,1fr)
            175px
            145px
            100px
            80px;
    }

    .documentation-featured-card{
        grid-template-columns:
            minmax(0,1.2fr)
            minmax(320px,.8fr);
    }

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


/* ==========================================================
   SMALL TABLET
========================================================== */

@media(max-width:850px){

    .documentation-hero{
        padding:50px 0 46px;
    }

    .documentation-hero-heading,
    .documentation-section-heading{
        grid-template-columns:1fr;

        gap:22px;
    }

    .documentation-hero-heading h1{
        font-size:clamp(44px,8vw,60px);
    }

    .documentation-filter{
        grid-template-columns:1fr 1fr;

        gap:10px;

        overflow:visible;

        background:transparent;

        border:0;
        border-radius:0;
    }

    .documentation-filter input,
    .documentation-filter select,
    .documentation-filter button,
    .documentation-reset{
        width:100%;
        height:54px;

        border:1px solid #e2e4eb;
        border-radius:11px;
    }

    .documentation-featured-card{
        grid-template-columns:1fr;
    }

    .documentation-featured-image{
        height:350px;
        min-height:350px;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:650px){

    .documentation-page .page-container{
        width:min(100% - 32px,1360px);
    }

    .documentation-hero{
        padding:45px 0 42px;
    }

    .documentation-eyebrow{
        margin-bottom:17px;

        font-size:11px;
    }

    .documentation-hero-heading h1{
        font-size:40px;
        line-height:1.03;

        letter-spacing:-2.3px;
    }

    .documentation-hero-heading p{
        font-size:14px;
    }

    .documentation-filter{
        grid-template-columns:1fr;

        margin-top:30px;
    }

    .documentation-featured-section{
        padding:50px 0 60px;
    }

    .documentation-section-heading{
        margin-bottom:28px;
    }

    .documentation-section-heading h2{
        font-size:36px;

        letter-spacing:-1.8px;
    }

    .documentation-featured-card{
        border-radius:19px;
    }

    .documentation-featured-image{
        height:260px;
        min-height:260px;
    }

    .documentation-featured-content{
        padding:27px 22px;
    }

    .documentation-featured-content h3{
        font-size:29px;
    }

    .documentation-list-section{
        padding:52px 0 75px;
    }

    .documentation-grid{
        grid-template-columns:1fr;
    }

    .documentation-card-image{
        height:225px;
    }

    .documentation-card-content{
        padding:21px;
    }
}

/* ==========================================================
   DOCUMENTATION DETAIL PAGE
========================================================== */

.documentation-detail-page{
    overflow:hidden;
    background:#fff;
}

.documentation-detail-page .page-container{
    width:min(1360px, calc(100% - 48px));
    margin:0 auto;
}


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

.documentation-detail-hero{
    padding:48px 0 58px;

    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(63,81,216,.09),
            transparent 30%
        ),
        #f8f7fb;
}


/* ==========================================================
   BACK LINK
========================================================== */

.documentation-detail-back{
    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:42px;

    color:#4956d8;

    font-size:13px;
    font-weight:700;

    text-decoration:none;
}

.documentation-detail-back span{
    font-size:18px;

    transition:transform .25s ease;
}

.documentation-detail-back:hover span{
    transform:translateX(-4px);
}


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

.documentation-detail-heading{
    display:grid;

    grid-template-columns:
        minmax(0,1.3fr)
        minmax(300px,.7fr);

    gap:60px;

    align-items:end;
}

.documentation-detail-eyebrow{
    display:block;

    margin-bottom:18px;

    color:#4956d8;

    font-size:12px;
    line-height:1;

    font-weight:700;

    letter-spacing:1.6px;

    text-transform:uppercase;
}


/* ==========================================================
   TITLE
========================================================== */

.documentation-detail-title h1{
    max-width:760px;

    margin:0;

    color:#111827;

    font-size:clamp(48px,4.7vw,70px);
    line-height:1;

    letter-spacing:-4px;
}


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

.documentation-detail-info{
    max-width:430px;

    padding-bottom:5px;
}

.documentation-detail-theme{
    margin:0 0 20px;

    color:#6b7280;

    font-size:17px;
    line-height:1.65;
}


/* ==========================================================
   META
========================================================== */

.documentation-detail-meta{
    display:flex;

    align-items:center;
    flex-wrap:wrap;

    gap:9px;

    color:#4956d8;

    font-size:11px;
    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;
}

.documentation-detail-meta-divider{
    width:3px;
    height:3px;

    flex:0 0 3px;

    background:#c4c8d3;

    border-radius:50%;
}


/* ==========================================================
   GALLERY SECTION
========================================================== */

.documentation-gallery-section{
    padding:64px 0 95px;

    background:#fff;
}


/* ==========================================================
   GALLERY HEADING
========================================================== */

.documentation-gallery-heading{
    display:grid;

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

    gap:50px;

    align-items:end;

    margin-bottom:36px;
}

.documentation-gallery-heading h2{
    max-width:650px;

    margin:0;

    color:#111827;

    font-size:clamp(38px,3.5vw,52px);
    line-height:1.03;

    letter-spacing:-2.8px;
}

.documentation-gallery-heading p{
    max-width:430px;

    margin:0 0 4px;

    color:#6b7280;

    font-size:15px;
    line-height:1.7;
}


/* ==========================================================
   GALLERY GRID
========================================================== */

.documentation-gallery-grid{
    display:grid;

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

    grid-auto-flow:dense;

    gap:16px;
}


/* ==========================================================
   GALLERY ITEM
========================================================== */

.documentation-gallery-item{
    position:relative;

    display:block;

    min-width:0;

    height:300px;

    overflow:hidden;

    background:#f1f1f6;

    border-radius:18px;

    text-decoration:none;
}

.documentation-gallery-item-featured{
    grid-column:span 2;

    grid-row:span 2;

    height:616px;
}

.documentation-gallery-item img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .55s ease,
        filter .4s ease;
}

.documentation-gallery-item:hover img{
    transform:scale(1.035);

    filter:brightness(.82);
}


/* ==========================================================
   IMAGE OVERLAY
========================================================== */

.documentation-gallery-overlay{
    position:absolute;

    right:0;
    bottom:0;
    left:0;

    display:flex;

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

    gap:20px;

    padding:45px 20px 18px;

    background:
        linear-gradient(
            to top,
            rgba(15,23,42,.7),
            transparent
        );

    color:#fff;

    font-size:13px;
    font-weight:700;

    opacity:0;

    transform:translateY(8px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.documentation-gallery-item:hover
.documentation-gallery-overlay{
    opacity:1;

    transform:translateY(0);
}

.documentation-gallery-arrow{
    font-size:18px;
}


/* ==========================================================
   EMPTY STATE
========================================================== */

.documentation-gallery-empty{
    padding:60px 30px;

    background:#f8f7fb;

    border:1px solid #e2e4eb;
    border-radius:22px;

    text-align:center;
}

.documentation-gallery-empty > span{
    display:block;

    margin-bottom:16px;

    color:#4956d8;

    font-size:11px;
    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;
}

.documentation-gallery-empty h1,
.documentation-gallery-empty h3{
    margin:0 0 12px;

    color:#111827;

    font-size:30px;
    line-height:1.15;

    letter-spacing:-1.3px;
}

.documentation-gallery-empty p{
    max-width:530px;

    margin:0 auto;

    color:#6b7280;

    font-size:14px;
    line-height:1.7;
}

.documentation-gallery-back-button{
    display:inline-flex;

    margin-top:22px;

    padding:13px 20px;

    background:#4956d8;
    color:#fff;

    border-radius:11px;

    font-size:13px;
    font-weight:700;

    text-decoration:none;
}


/* ==========================================================
   NOT FOUND
========================================================== */

.documentation-detail-not-found{
    padding:70px 0 95px;

    background:#f8f7fb;
}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1000px){

    .documentation-detail-heading,
    .documentation-gallery-heading{
        grid-template-columns:
            minmax(0,1.15fr)
            minmax(280px,.85fr);

        gap:40px;
    }

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

    .documentation-gallery-item-featured{
        height:616px;
    }
}


/* ==========================================================
   SMALL TABLET
========================================================== */

@media(max-width:800px){

    .documentation-detail-heading,
    .documentation-gallery-heading{
        grid-template-columns:1fr;

        gap:22px;
    }

    .documentation-detail-title h1{
        font-size:clamp(44px,8vw,60px);

        letter-spacing:-3px;
    }

    .documentation-detail-info{
        max-width:600px;
    }

    .documentation-gallery-item-featured{
        grid-column:1 / -1;

        grid-row:auto;

        height:430px;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:650px){

    .documentation-detail-page .page-container{
        width:min(100% - 32px,1360px);
    }

    .documentation-detail-hero{
        padding:38px 0 45px;
    }

    .documentation-detail-back{
        margin-bottom:32px;
    }

    .documentation-detail-title h1{
        font-size:40px;
        line-height:1.03;

        letter-spacing:-2.3px;
    }

    .documentation-detail-theme{
        font-size:15px;
    }

    .documentation-gallery-section{
        padding:50px 0 75px;
    }

    .documentation-gallery-heading{
        margin-bottom:28px;
    }

    .documentation-gallery-heading h2{
        font-size:36px;

        letter-spacing:-1.8px;
    }

    .documentation-gallery-grid{
        grid-template-columns:1fr;

        gap:12px;
    }

    .documentation-gallery-item,
    .documentation-gallery-item-featured{
        grid-column:auto;

        grid-row:auto;

        height:280px;

        border-radius:15px;
    }

    .documentation-gallery-overlay{
        opacity:1;

        transform:none;
    }
}

/* ==========================================================
   DOCUMENTATION DETAIL - GALLERY GRID FINAL
========================================================== */

.documentation-gallery-grid{
    display:grid;

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

    gap:16px;
}


/* SEMUA FOTO */

.documentation-gallery-item,
.documentation-gallery-item-featured{
    position:relative;

    display:block;

    grid-column:auto;
    grid-row:auto;

    width:100%;
    height:320px;

    overflow:hidden;

    background:#f1f1f6;

    border-radius:18px;

    text-decoration:none;
}


/* IMAGE */

.documentation-gallery-item img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .55s ease,
        filter .4s ease;
}


/* HOVER */

.documentation-gallery-item:hover img{
    transform:scale(1.035);

    filter:brightness(.82);
}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1000px){

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

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:650px){

    .documentation-gallery-grid{
        grid-template-columns:1fr;

        gap:12px;
    }


    .documentation-gallery-item,
    .documentation-gallery-item-featured{
        height:280px;

        border-radius:15px;
    }

}

/* ==========================================================
   DOCUMENTATION DETAIL - BACK BUTTON
========================================================== */

.documentation-back-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;

    width:max-content;

    padding:10px 16px;

    color:#4054d8;
    background:rgba(255,255,255,.65);

    border:1px solid rgba(64,84,216,.18);
    border-radius:999px;

    font-size:14px;
    font-weight:600;
    line-height:1;

    text-decoration:none;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.documentation-back-arrow{
    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;

    transition:transform .25s ease;
}


.documentation-back-btn:hover{
    background:#fff;
    border-color:rgba(64,84,216,.35);

    transform:translateY(-1px);
}


.documentation-back-btn:hover
.documentation-back-arrow{
    transform:translateX(-3px);
}

/* ==========================================================
   DOCUMENTATION DETAIL - BACK LINK
========================================================== */

.documentation-back-link{
    display:inline-flex;
    align-items:center;
    gap:12px;

    width:max-content;

    color:#4054d8;

    font-size:14px;
    font-weight:600;

    text-decoration:none;
}


/* BULATAN PANAH */

.documentation-back-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    flex-shrink:0;

    border:1px solid rgba(64,84,216,.25);
    border-radius:50%;

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

    color:#4054d8;

    font-size:18px;
    line-height:1;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


/* TEXT */

.documentation-back-text{
    transition:transform .25s ease;
}


/* HOVER */

.documentation-back-link:hover
.documentation-back-icon{
    background:#4054d8;
    color:#fff;

    border-color:#4054d8;

    transform:translateX(-3px);
}


.documentation-back-link:hover
.documentation-back-text{
    transform:translateX(2px);
}

/* =========================================================
   ARTICLE DETAIL PAGE
========================================================= */


/* =========================================================
   GENERAL CONTAINER
========================================================= */

.article-detail-container {
    width: min(1360px, calc(100% - 80px));
    margin: 0 auto;
}


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

.article-detail-hero {
    padding: 54px 0 64px;
    background:
        radial-gradient(
            circle at 84% 10%,
            rgba(79, 70, 229, 0.08),
            transparent 30%
        ),
        #fbf8fb;
}


.article-detail-back {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 48px;

    color: #4054d8;

    font-size: 16px;
    font-weight: 600;

    text-decoration: none;
}


.article-detail-back-icon {
    width: 36px;
    height: 36px;

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

    flex-shrink: 0;

    border: 1px solid rgba(64, 84, 216, 0.25);
    border-radius: 50%;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.article-detail-back:hover
.article-detail-back-icon {
    background: #4054d8;

    color: #ffffff;

    transform: translateX(-3px);
}


.article-detail-label {
    margin-bottom: 24px;

    color: #4054d8;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 2px;
}


.article-detail-title {
    max-width: 1120px;

    margin: 0 0 28px;

    color: #111827;

    font-size: clamp(46px, 5vw, 76px);
    line-height: 1.02;

    letter-spacing: -3.5px;
}


.article-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    color: #4054d8;

    font-size: 14px;
    font-weight: 600;
}


.article-detail-meta strong {
    color: #111827;
}


.article-detail-dot {
    color: #c9cbd5;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.article-detail-main {
    padding: 58px 0 100px;

    background: #ffffff;
}


/* =========================================================
   COVER IMAGE
========================================================= */

.article-detail-cover {
    width: 100%;

    height: clamp(380px, 47vw, 620px);

    margin-bottom: 72px;

    overflow: hidden;

    border-radius: 24px;

    background: #eeeeee;
}


.article-detail-cover img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   TWO COLUMN LAYOUT
========================================================= */

.article-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        390px;

    gap: 90px;

    align-items: start;

    max-width: 1160px;

    margin: 0 auto;
}


/* =========================================================
   ARTICLE CONTENT
========================================================= */

.article-detail-content {
    min-width: 0;

    color: #252936;

    font-size: 18px;
    line-height: 1.95;
}


.article-detail-content br {
    content: "";

    display: block;

    margin-bottom: 22px;
}


/* =========================================================
   SIDEBAR
========================================================= */

.article-detail-sidebar {
    min-width: 0;
}


.article-recommendation-heading {
    margin-bottom: 26px;
}


.article-recommendation-label {
    display: block;

    margin-bottom: 10px;

    color: #4054d8;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1.7px;
}


.article-recommendation-heading h2 {
    margin: 0;

    color: #111827;

    font-size: 34px;
    line-height: 1.1;

    letter-spacing: -1.5px;
}


/* =========================================================
   RECOMMENDATION LIST
========================================================= */

.article-recommendation-list {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* =========================================================
   RECOMMENDATION CARD
========================================================= */

.article-recommendation-card {
    display: grid;

    grid-template-columns: 126px minmax(0, 1fr);

    min-height: 150px;

    overflow: hidden;

    color: inherit;

    text-decoration: none;

    background: #ffffff;

    border: 1px solid #e7e7ed;
    border-radius: 18px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.article-recommendation-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(64, 84, 216, 0.35);

    box-shadow:
        0 14px 34px
        rgba(17, 24, 39, 0.08);
}


/* =========================================================
   RECOMMENDATION IMAGE
========================================================= */

.article-recommendation-image {
    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #eeeeee;
}


.article-recommendation-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.35s ease;
}


.article-recommendation-card:hover
.article-recommendation-image img {
    transform: scale(1.04);
}


/* =========================================================
   RECOMMENDATION INFORMATION
========================================================= */

.article-recommendation-info {
    min-width: 0;

    padding: 18px 18px 16px;

    display: flex;
    flex-direction: column;
}


.article-recommendation-date {
    margin-bottom: 9px;

    color: #4054d8;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.7px;
}


.article-recommendation-info h3 {
    display: -webkit-box;

    margin: 0 0 16px;

    overflow: hidden;

    color: #111827;

    font-size: 18px;
    line-height: 1.3;

    letter-spacing: -0.5px;

    display: -webkit-box;
-webkit-box-orient: vertical;

line-clamp: 2;
-webkit-line-clamp: 2;

overflow: hidden;
    -webkit-box-orient: vertical;
}


.article-recommendation-link {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: auto;

    color: #4054d8;

    font-size: 13px;
    font-weight: 600;
}


.article-recommendation-card:hover
.article-recommendation-link span {
    transform: translateX(3px);
}


.article-recommendation-link span {
    transition: transform 0.25s ease;
}


.article-recommendation-empty {
    color: #777b87;

    font-size: 15px;
}


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

@media (max-width: 1050px) {

    .article-detail-layout {
        grid-template-columns: 1fr;

        gap: 70px;

        max-width: 820px;
    }


    .article-detail-sidebar {
        width: 100%;
    }


    .article-recommendation-list {
        display: grid;

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


    .article-recommendation-card {
        display: flex;
        flex-direction: column;

        min-height: 100%;
    }


    .article-recommendation-image {
        height: 180px;
    }

}


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

@media (max-width: 700px) {

    .article-detail-container {
        width:
            min(
                100% - 36px,
                1360px
            );
    }


    .article-detail-hero {
        padding: 36px 0 48px;
    }


    .article-detail-back {
        margin-bottom: 36px;

        font-size: 14px;
    }


    .article-detail-label {
        margin-bottom: 18px;

        font-size: 12px;
    }


    .article-detail-title {
        font-size:
            clamp(
                38px,
                12vw,
                56px
            );

        letter-spacing: -2.5px;
    }


    .article-detail-main {
        padding: 36px 0 72px;
    }


    .article-detail-cover {
        height: 300px;

        margin-bottom: 50px;

        border-radius: 18px;
    }


    .article-detail-layout {
        gap: 60px;
    }


    .article-detail-content {
        font-size: 17px;

        line-height: 1.85;
    }


    .article-recommendation-heading h2 {
        font-size: 30px;
    }


    .article-recommendation-list {
        grid-template-columns: 1fr;
    }


    .article-recommendation-card {
        display: grid;

        grid-template-columns:
            120px
            minmax(0, 1fr);
    }


    .article-recommendation-image {
        height: 100%;
    }

}

/* ==========================================================
   REGISTRATION SUCCESS POPUP
========================================================== */


.registration-success-overlay{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    box-sizing:border-box;

    background:rgba(17, 24, 39, .42);

    backdrop-filter:blur(5px);

    -webkit-backdrop-filter:blur(5px);

    animation:
        registrationSuccessOverlayIn
        .25s
        ease;

}



.registration-success-modal{

    position:relative;

    width:100%;

    max-width:470px;

    box-sizing:border-box;

    padding:48px 42px 40px;

    overflow:hidden;

    border:1px solid #eceaf0;

    border-radius:24px;

    background:#ffffff;

    box-shadow:
        0 30px 80px
        rgba(17, 24, 39, .20);

    text-align:center;

    animation:
        registrationSuccessModalIn
        .3s
        ease;

}



.registration-success-modal::before{

    content:"";

    position:absolute;

    top:-75px;

    right:-75px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:#f1f2ff;

    pointer-events:none;

}



.registration-success-close{

    position:absolute;

    top:17px;

    right:17px;

    z-index:2;

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:1px solid #e5e4e9;

    border-radius:50%;

    background:#ffffff;

    color:#85838d;

    font-family:inherit;

    font-size:22px;

    line-height:1;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;

}



.registration-success-close:hover{

    transform:rotate(5deg);

    background:#f4f3f6;

    color:#111827;

}



.registration-success-icon{

    position:relative;

    z-index:1;

    width:76px;

    height:76px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    border-radius:50%;

    background:#eef9f0;

    color:#45a45c;

}



.registration-success-icon span{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid #67b97b;

    border-radius:50%;

    font-size:25px;

    font-weight:700;

}



.registration-success-eyebrow{

    position:relative;

    z-index:1;

    display:block;

    margin-bottom:10px;

    color:#4a57da;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.6px;

}



.registration-success-modal h2{

    position:relative;

    z-index:1;

    margin:0 0 14px;

    color:#111827;

    font-size:32px;

    font-weight:700;

    line-height:1.15;

    letter-spacing:-1.2px;

}



.registration-success-modal p{

    position:relative;

    z-index:1;

    max-width:370px;

    margin:0 auto 30px;

    color:#777582;

    font-size:14px;

    line-height:1.75;

}



.registration-success-button{

    position:relative;

    z-index:1;

    width:100%;

    min-height:50px;

    padding:12px 20px;

    border:1px solid #4b57d9;

    border-radius:11px;

    background:#4b57d9;

    color:#ffffff;

    font-family:inherit;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}



.registration-success-button:hover{

    transform:translateY(-1px);

    background:#3f4bc7;

    box-shadow:
        0 10px 24px
        rgba(75, 87, 217, .18);

}



.registration-success-overlay.registration-success-hide{

    opacity:0;

    pointer-events:none;

    transition:
        opacity .25s ease;

}



.registration-success-overlay.registration-success-hide
.registration-success-modal{

    opacity:0;

    transform:
        translateY(14px)
        scale(.97);

    transition:
        opacity .25s ease,
        transform .25s ease;

}



@keyframes registrationSuccessOverlayIn{

    from{

        opacity:0;

    }


    to{

        opacity:1;

    }

}



@keyframes registrationSuccessModalIn{

    from{

        opacity:0;

        transform:
            translateY(18px)
            scale(.96);

    }


    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}



@media(max-width:520px){


    .registration-success-overlay{

        padding:18px;

    }


    .registration-success-modal{

        padding:
            46px
            24px
            28px;

        border-radius:20px;

    }


    .registration-success-icon{

        width:68px;

        height:68px;

        margin-bottom:22px;

    }


    .registration-success-modal h2{

        font-size:27px;

    }


    .registration-success-modal p{

        font-size:13px;

    }


}

/* ==========================================================
   DYNAMIC DOCUMENTATION IMAGES
========================================================== */


.documentation-dynamic-image{

    position:relative;

    overflow:hidden;

    background:#f1f1f4;

}



.documentation-dynamic-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    opacity:1;

    transform:scale(1);

    transition:
        opacity .45s ease,
        transform 4s ease;

}



/*
|--------------------------------------------------------------------------
| EFEK SAAT FOTO BERGANTI
|--------------------------------------------------------------------------
*/


.documentation-dynamic-image
img.documentation-image-changing{

    opacity:0;

    transform:scale(1.03);

}



/*
|--------------------------------------------------------------------------
| SEDIKIT ZOOM HALUS
|--------------------------------------------------------------------------
*/


.documentation-dynamic-image:hover img{

    transform:scale(1.025);

}