/* ==========================================================
   SIPCOM
   FILE : assets/css/home.css
   HOME PAGE
========================================================== */

/* ==========================================================
   HOME VARIABLE
========================================================== */

.home-page {
    --home-primary: #0f766e;
    --home-primary-dark: #115e59;
    --home-primary-light: #ccfbf1;

    --home-blue: #2563eb;
    --home-blue-dark: #1d4ed8;

    --home-text: #102a43;
    --home-muted: #627d98;
    --home-border: rgba(15, 118, 110, 0.12);
    --home-white: #ffffff;

    position: relative;
    width: 100%;
    min-height: 100%;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(20, 184, 166, 0.14),
            transparent 27%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(37, 99, 235, 0.10),
            transparent 25%
        );
}

/* Dekorasi background */
.home-page::before,
.home-page::after {
    position: absolute;
    z-index: 0;

    width: 220px;
    height: 220px;

    content: "";
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.home-page::before {
    top: 18%;
    right: -100px;
    background: rgba(20, 184, 166, 0.08);
}

.home-page::after {
    bottom: 8%;
    left: -110px;
    background: rgba(37, 99, 235, 0.07);
}

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

.home-hero {
    position: relative;
    z-index: 1;

    width: min(100%, 1180px);
    min-height: calc(100vh - 220px);

    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    grid-template-areas:
        "content image"
        "badge image"
        "menu menu";

    align-items: center;
    column-gap: 80px;
    row-gap: 18px;

    margin: 0 auto;
    padding: 58px 28px 110px;
}

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

.home-hero-content {
    grid-area: content;
    align-self: end;

    width: 100%;
    max-width: 650px;
}

.home-heading {
    max-width: 650px;
}

.home-kicker {
    display: inline-flex;
    align-items: center;

    margin-bottom: 16px;

    color: var(--home-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.home-kicker::before {
    width: 28px;
    height: 3px;

    margin-right: 9px;

    content: "";
    background: var(--home-primary);
    border-radius: 20px;
}

.home-title {
    margin: 0;

    color: var(--home-text);

    font-size: clamp(54px, 7vw, 88px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -4px;
}

.home-title span {
    color: var(--home-primary);
}

.home-description {
    max-width: 610px;
    margin: 24px 0 0;

    color: var(--home-muted);

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

/* ==========================================================
   MASKOT
========================================================== */

.home-hero-image {
    position: relative;
    grid-area: image;

    min-height: 390px;

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

.home-mascot {
    position: relative;
    z-index: 2;

    width: min(100%, 360px);
    height: auto;

    display: block;

    object-fit: contain;
    filter:
        drop-shadow(0 22px 24px rgba(15, 23, 42, 0.18));

    animation: homeMascotFloat 4s ease-in-out infinite;
}

.home-image-glow {
    position: absolute;
    z-index: 1;

    width: 280px;
    height: 280px;

    background:
        radial-gradient(
            circle,
            rgba(20, 184, 166, 0.24) 0%,
            rgba(20, 184, 166, 0.08) 45%,
            transparent 72%
        );

    border-radius: 50%;
    filter: blur(4px);
}

/* ==========================================================
   BADGE
========================================================== */

.home-badge {
    grid-area: badge;
    align-self: start;

    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 10px 16px;

    color: var(--home-primary);
    background: rgba(204, 251, 241, 0.78);

    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.7px;
}

.home-badge-dot {
    width: 8px;
    height: 8px;

    display: inline-block;

    background: #14b8a6;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.13);

    animation: homeBadgePulse 2s ease-in-out infinite;
}

/* ==========================================================
   MENU SECTION
========================================================== */

.home-menu-section {
    grid-area: menu;

    width: 100%;
    max-width: 820px;

    margin-top: 18px;
}

.home-menu-heading {
    margin-bottom: 14px;
}

.home-menu-label {
    display: block;
    margin-bottom: 5px;

    color: var(--home-primary);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.home-menu-heading h2 {
    margin: 0;

    color: var(--home-text);

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

/* ==========================================================
   ACTION CARD
========================================================== */

.home-actions {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.home-action-card {
    min-height: 92px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 16px 18px;

    border: 1px solid transparent;
    border-radius: 20px;

    text-align: left;
    cursor: pointer;

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

.home-action-card:hover {
    transform: translateY(-4px);
}

.home-action-card:active {
    transform: translateY(-1px);
}

.home-action-primary {
    color: var(--home-white);
    background:
        linear-gradient(
            135deg,
            var(--home-primary),
            var(--home-primary-dark)
        );

    box-shadow:
        0 14px 28px rgba(15, 118, 110, 0.22);
}

.home-action-secondary {
    color: var(--home-text);
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(37, 99, 235, 0.13);

    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.08);
}

.home-action-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border-radius: 15px;

    font-size: 27px;
    line-height: 1;
}

.home-action-primary .home-action-icon {
    background: rgba(255, 255, 255, 0.15);
}

.home-action-secondary .home-action-icon {
    color: var(--home-blue);
    background: rgba(37, 99, 235, 0.10);
}

.home-action-content {
    min-width: 0;

    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
}

.home-action-content strong {
    font-size: 15px;
    font-weight: 800;
}

.home-action-content small {
    opacity: 0.78;

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

.home-action-arrow {
    flex: 0 0 auto;

    font-size: 28px;
    font-weight: 300;
    line-height: 1;
}

.home-action-primary .home-action-arrow {
    opacity: 0.8;
}

.home-action-secondary .home-action-arrow {
    color: var(--home-blue);
}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes homeMascotFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes homeBadgePulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.8);
    }
}

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

@media (max-width: 992px) {
    .home-hero {
        grid-template-columns: minmax(0, 1fr) 310px;
        column-gap: 40px;
        padding-right: 22px;
        padding-left: 22px;
    }

    .home-title {
        font-size: 64px;
    }

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

    .home-hero-image {
        min-height: 320px;
    }

    .home-mascot {
        width: min(100%, 290px);
    }

    .home-image-glow {
        width: 230px;
        height: 230px;
    }
}

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

@media (max-width: 768px) {
    .home-hero {
        min-height: auto;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;

        padding: 34px 18px 120px;

        text-align: center;
    }

    /* Urutan mobile:
       Judul dan deskripsi
       Maskot
       Badge
       Menu
    */

    .home-hero-content {
        order: 1;
        align-self: stretch;

        max-width: 100%;
    }

    .home-kicker {
        justify-content: center;
        margin-bottom: 14px;

        font-size: 10px;
        letter-spacing: 1.1px;
    }

    .home-kicker::before {
        width: 20px;
        height: 2px;
    }

    .home-title {
        font-size: clamp(52px, 16vw, 72px);
        letter-spacing: -3px;
    }

    .home-description {
        max-width: 440px;
        margin: 18px auto 0;

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

    .home-hero-image {
        order: 2;

        width: 100%;
        min-height: 0;

        margin: 28px 0 20px;
    }

    .home-mascot {
        width: min(62vw, 240px);
    }

    .home-image-glow {
        width: 190px;
        height: 190px;
    }

    .home-badge {
        order: 3;
        align-self: center;

        margin: 0 0 22px;
    }

    .home-menu-section {
        order: 4;

        max-width: 460px;
        margin: 0;
    }

    .home-menu-heading {
        margin-bottom: 13px;
        text-align: left;
    }

    .home-menu-heading h2 {
        font-size: 16px;
    }

    .home-actions {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .home-action-card {
        min-height: 78px;
        padding: 13px 15px;
        border-radius: 17px;
    }

    .home-action-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;

        border-radius: 13px;
        font-size: 23px;
    }

    .home-action-content strong {
        font-size: 14px;
    }

    .home-action-content small {
        font-size: 11px;
    }

    .home-action-arrow {
        font-size: 25px;
    }
}

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

@media (max-width: 420px) {
    .home-hero {
        padding-right: 14px;
        padding-left: 14px;
    }

    .home-title {
        font-size: 50px;
    }

    .home-description {
        font-size: 13px;
    }

    .home-hero-image {
        margin-top: 24px;
    }

    .home-mascot {
        width: min(65vw, 210px);
    }

    .home-badge {
        padding: 9px 13px;
        font-size: 10px;
    }

    .home-menu-heading h2 {
        font-size: 15px;
    }
}

/* ==========================================================
   AKSESIBILITAS
========================================================== */

.home-action-card:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.3);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .home-mascot,
    .home-badge-dot {
        animation: none;
    }

    .home-action-card {
        transition: none;
    }
}