@extends('layouts.app')
@section('title', 'AI Tools for Your Content & Business')
@section('content')
@include('partials.header')
<style>

/* =========================================================
   CREASY GLOBAL CONTENT WIDTH
   ========================================================= */

.container-main {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}


/* =========================================================
   MAIN CONTENT AFTER HEADER / HERO
   ========================================================= */

#home > section,
#home > main,
#home .creasy-video-section,
#home .creasy-why-section,
#home .creasy-final-cta {

    width: 100%;
}


/* =========================================================
   CREASY VIDEO CTA
========================================================= */

.creasy-video-section {

    width: 100%;

    padding:
        35px 24px 60px;

}


/* =========================================================
   VIDEO BANNER
========================================================= */

.creasy-video-banner {

    position: relative;

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

    min-height: 420px;

    margin-left: auto;
    margin-right: auto;

    overflow: hidden;

    border-radius: 24px;

    background:
        #020b11;

    border:
        1px solid rgba(34, 207, 228, 0.20);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);

}


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

.creasy-bg-video {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition:
        opacity 0.8s ease;

}

.creasy-bg-video.active {

    opacity: 1;

}


/* =========================================================
   OVERLAY
========================================================= */

.creasy-video-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(2, 11, 17, 0.94) 0%,
            rgba(2, 11, 17, 0.70) 38%,
            rgba(2, 11, 17, 0.25) 75%,
            rgba(2, 11, 17, 0.40) 100%
        );

}


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

.creasy-video-content {

    position: relative;

    z-index: 3;

    min-height: 420px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

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

    padding:
        50px;

}


.creasy-video-content .section-kicker {

    color:
        #20d9e8;

    margin-bottom:
        10px;

}


.creasy-video-content h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(2rem, 3vw, 3rem);

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -1.5px;

}


.creasy-video-content h2 span {

    background:
        linear-gradient(
            90deg,
            #22cfe4,
            #8ceff7
        );

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    background-clip:
        text;

}


.creasy-video-content p {

    margin:
        18px 0 25px;

    max-width:
        460px;

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

    font-size:
        1rem;

    line-height:
        1.6;

}


/* =========================================================
   CREATE BUTTON
========================================================= */

.creasy-create-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width:
        155px;

    padding:
        12px 23px;

    border-radius:
        12px;

    text-decoration:
        none;

    color:
        #001317 !important;

    background:
        linear-gradient(
            135deg,
            #2ce8ef,
            #11cfe2
        );

    font-size:
        0.95rem;

    font-weight:
        800;

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

    box-shadow:
        0 0 22px
        rgba(21, 220, 235, 0.28);

    transition:
        all 0.25s ease;

}


.creasy-create-btn:hover {

    color:
        #001317 !important;

    transform:
        translateY(-3px);

    box-shadow:
        0 0 32px
        rgba(21, 220, 235, 0.48);

}


.creasy-create-btn i {

    transition:
        transform 0.25s ease;

}


.creasy-create-btn:hover i {

    transform:
        translateX(4px);

}


/* =========================================================
   VIDEO DOTS
========================================================= */

.creasy-video-dots {

    position: absolute;

    z-index: 5;

    left: 50%;

    bottom: 20px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap:
        7px;

}


.video-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

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

    transition:
        all 0.3s ease;

}


.video-dot.active {

    width:
        24px;

    border-radius:
        10px;

    background:
        #20dce9;

    box-shadow:
        0 0 10px
        rgba(32,220,233,0.65);

}


/* =========================================================
   WHY CREASY
========================================================= */

.creasy-why-section {

    position: relative;

    width: 100%;

    padding:
        85px 24px 70px;

    overflow: hidden;

}


/* =========================================================
   WHY AMBIENT GLOW
========================================================= */

.creasy-why-section::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    left:
        -260px;

    top:
        40px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 220, 240, 0.10) 0%,
            rgba(0, 220, 240, 0.03) 35%,
            transparent 70%
        );

    pointer-events:
        none;

}


.creasy-why-section::after {

    content:
        "";

    position:
        absolute;

    width:
        450px;

    height:
        450px;

    right:
        -250px;

    bottom:
        -180px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(90, 80, 255, 0.08) 0%,
            transparent 70%
        );

    pointer-events:
        none;

}


/* =========================================================
   WHY INNER CONTENT
========================================================= */

.creasy-why-section > .container,
.creasy-why-section > .container-main {

    width:
        100%;

    max-width:
        1280px;

    margin-left:
        auto;

    margin-right:
        auto;

}


/* =========================================================
   WHY HEADING
========================================================= */

.creasy-why-heading {

    position:
        relative;

    z-index:
        2;

    max-width:
        760px;

    margin:
        0 auto 45px;

    text-align:
        center;

}


.creasy-why-heading .section-kicker {

    margin-bottom:
        10px;

}


.creasy-why-heading .section-title {

    margin-bottom:
        12px;

}


.creasy-why-heading .section-desc {

    max-width:
        620px;

    margin:
        0 auto;

}


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

.creasy-why-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    gap:
        16px;

    width:
        100%;

}


/* =========================================================
   WHY CARD
========================================================= */

.creasy-why-card {

    position:
        relative;

    min-height:
        235px;

    padding:
        26px 23px 24px;

    border-radius:
        18px;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            rgba(7, 48, 61, 0.78),
            rgba(3, 22, 30, 0.94)
        );

    border:
        1px solid rgba(34, 207, 228, 0.14);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.035),
        0 12px 35px rgba(0,0,0,0.18);

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

}


.creasy-why-card::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(40,235,242,0.55),
            transparent
        );

    opacity:
        0;

    transition:
        opacity .35s ease;

}


.creasy-why-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(34, 220, 235, 0.40);

    box-shadow:
        0 18px 45px rgba(0,0,0,0.28),
        0 0 28px rgba(0,220,240,0.08);

}


.creasy-why-card:hover::before {

    opacity:
        1;

}


/* =========================================================
   WHY ICON
========================================================= */

.creasy-why-icon {

    width:
        50px;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        22px;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            rgba(30,235,239,0.18),
            rgba(0,145,180,0.08)
        );

    border:
        1px solid rgba(40,230,240,0.22);

    color:
        #24e1eb;

    font-size:
        1.35rem;

    box-shadow:
        0 0 20px rgba(0,220,240,0.08);

}


.creasy-why-card h4 {

    margin:
        0 0 9px;

    color:
        #ffffff;

    font-size:
        1.08rem;

    font-weight:
        800;

    letter-spacing:
        -0.2px;

}


.creasy-why-card p {

    margin:
        0;

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

    font-size:
        0.84rem;

    line-height:
        1.65;

}


/* =========================================================
   NUMBER
========================================================= */

.creasy-why-number {

    position:
        absolute;

    right:
        18px;

    top:
        14px;

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

    font-size:
        4.5rem;

    line-height:
        1;

    font-weight:
        900;

    pointer-events:
        none;

}


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

.creasy-final-cta {

    position:
        relative;

    width:
        100%;

    padding:
        20px 24px 95px;

}


.creasy-final-cta-box {

    position:
        relative;

    overflow:
        hidden;

    width:
        100%;

    max-width:
        1280px;

    min-height:
        330px;

    margin-left:
        auto;

    margin-right:
        auto;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        55px 30px;

    border-radius:
        26px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(23,225,238,0.16),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(7,48,61,0.95),
            rgba(2,17,24,0.98)
        );

    border:
        1px solid rgba(34,207,228,0.25);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.38),
        0 0 45px rgba(0,220,240,0.06);

}


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

.creasy-final-cta-box::before {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    left:
        -120px;

    top:
        -150px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0,230,240,0.12),
            transparent 70%
        );

}


.creasy-final-cta-box::after {

    content:
        "";

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    right:
        -100px;

    bottom:
        -150px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(130,70,255,0.10),
            transparent 70%
        );

}


.creasy-final-cta-box > * {

    position:
        relative;

    z-index:
        2;

}


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

.creasy-final-cta-box .section-kicker {

    margin-bottom:
        12px;

}


.creasy-final-cta-box h2 {

    margin:
        0;

    max-width:
        760px;

    color:
        #ffffff;

    font-size:
        clamp(2rem, 3vw, 3.2rem);

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -1.8px;

}


.creasy-final-cta-box h2 span {

    display:
        inline-block;

    background:
        linear-gradient(
            90deg,
            #22cfe4,
            #8ceff7,
            #22cfe4
        );

    background-size:
        200% auto;

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    background-clip:
        text;

    animation:
        creasyGradientMove 4s linear infinite;

}


@keyframes creasyGradientMove {

    0% {
        background-position:
            0% center;
    }

    100% {
        background-position:
            200% center;
    }

}


.creasy-final-cta-box p {

    max-width:
        570px;

    margin:
        17px auto 26px;

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

    font-size:
        0.95rem;

    line-height:
        1.65;

}


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

.creasy-final-cta-box .creasy-create-btn {

    min-width:
        175px;

    padding:
        13px 26px;

    border-radius:
        13px;

    font-size:
        0.96rem;

}


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

.creasy-cta-note {

    margin-top:
        16px;

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

    font-size:
        0.72rem;

}


.creasy-cta-note i {

    color:
        #22dce8;

    margin-right:
        4px;

}


/* =========================================================
   CREASY HERO VIDEO
========================================================= */

.hero-video-stage {

    position:
        relative;

    width:
        100%;

    max-width:
        900px;

    height:
        480px;

    min-height:
        0;

    margin-left:
        auto;

    margin-right:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        #020b11;

    border:
        1px solid rgba(34,207,228,0.14);

    box-shadow:
        0 20px 60px rgba(0,0,0,0.22);

}


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

.hero {

    width: 100%;

    padding-top:
        25px;

    padding-bottom:
        55px;

}


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

.hero .container-main {

    width: 100%;

    max-width: 1440px;

    margin-left: auto;
    margin-right: auto;

}


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

.hero .row {

    align-items: center;

}


/* =========================================================
   HERO TEXT AREA
========================================================= */

.hero .col-lg-5 {

    display: flex;

    flex-direction: column;

    justify-content: center;

}


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

.hero h1 {

    margin:
        0 0 22px;

    color:
        #ffffff;

    font-size:
        clamp(2.8rem, 4.2vw, 4.8rem);

    line-height:
        1.02;

    font-weight:
        850;

    letter-spacing:
        -2.5px;

}


/* =========================================================
   HERO GRADIENT TEXT
========================================================= */

.hero h1 .gradient-text {

    display:
        inline-block;

    background:
        linear-gradient(
            90deg,
            #22cfe4,
            #8ceff7,
            #22cfe4
        );

    background-size:
        200% auto;

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    background-clip:
        text;

    animation:
        heroGradientMove 4s linear infinite;

}


@keyframes heroGradientMove {

    0% {
        background-position:
            0% center;
    }

    100% {
        background-position:
            200% center;
    }

}


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

.hero > .container p {

    max-width:
        560px;

}


/* lebih spesifik supaya tidak bentrok
   dengan style p lain */

.hero .col-lg-5 > p {

    margin:
        0 0 23px;

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

    font-size:
        clamp(1rem, 1.25vw, 1.25rem);

    line-height:
        1.65;

}


/* =========================================================
   FEATURE LIST
========================================================= */

.hero .feature-list {

    margin:
        0 0 28px;

    padding:
        0;

    list-style:
        none;

}


.hero .feature-list li {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        11px;

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

    font-size:
        clamp(0.9rem, 1.05vw, 1.08rem);

    line-height:
        1.5;

}


.hero .feature-list li:last-child {

    margin-bottom:
        0;

}


.hero .feature-list i {

    flex:
        0 0 auto;

    color:
        #22dce8;

    font-size:
        1rem;

}


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

.hero .btn-glow {

    min-width:
        165px;

    padding:
        13px 24px;

    border-radius:
        12px;

    font-size:
        0.95rem;

}


/* =========================================================
   HERO VIDEO AREA
========================================================= */

.hero .hero-video-stage {

    width:
        100%;

    max-width:
        900px;

    height:
        480px;

    min-height:
        0;

    margin-left:
        auto;

    margin-right:
        auto;

}


/* =========================================================
   LARGE DESKTOP / TV
========================================================= */

@media (min-width: 1600px) {

    .hero .container-main {

        max-width:
            1440px;

    }


    .hero h1 {

        font-size:
            4.8rem;

        letter-spacing:
            -3px;

    }


    .hero .col-lg-5 > p {

        font-size:
            1.22rem;

    }


    .hero .feature-list li {

        font-size:
            1.05rem;

    }


    .hero .hero-video-stage {

        max-width:
            920px;

        height:
            500px;

    }

}


/* =========================================================
   VERY LARGE SCREEN / 4K TV
========================================================= */

@media (min-width: 2200px) {

    .hero .container-main {

        max-width:
            1500px;

    }


    .hero h1 {

        font-size:
            5.2rem;

    }


    .hero .col-lg-5 > p {

        font-size:
            1.3rem;

    }


    .hero .feature-list li {

        font-size:
            1.12rem;

    }


    .hero .hero-video-stage {

        max-width:
            960px;

        height:
            520px;

    }

}


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

@media (max-width: 991px) {

    .hero {

        padding-top:
            20px;

        padding-bottom:
            45px;

    }


    .hero h1 {

        font-size:
            clamp(2.6rem, 7vw, 3.8rem);

        letter-spacing:
            -2px;

    }


    .hero .hero-video-stage {

        max-width:
            100%;

        height:
            420px;

        margin-top:
            10px;

    }

}


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

@media (max-width: 575px) {

    .hero {

        padding-top:
            10px;

        padding-bottom:
            35px;

    }


    .hero h1 {

        font-size:
            2.65rem;

        line-height:
            1.04;

        letter-spacing:
            -1.5px;

        margin-bottom:
            18px;

    }


    .hero .col-lg-5 > p {

        font-size:
            0.95rem;

        line-height:
            1.6;

        margin-bottom:
            20px;

    }


    .hero .feature-list {

        margin-bottom:
            24px;

    }


    .hero .feature-list li {

        font-size:
            0.88rem;

        gap:
            8px;

        margin-bottom:
            9px;

    }


    .hero .hero-video-stage {

        height:
            330px;

        margin-top:
            5px;

    }

}

/* =========================================================
   HERO EDGE GLOW
========================================================= */

.hero-video-stage::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    border-radius:
        inherit;

    border:
        1px solid rgba(34,207,228,0.10);

}


/* =========================================================
   HERO SOUND BUTTON
========================================================= */

.hero-video-sound-btn {

    position:
        absolute;

    right:
        18px;

    bottom:
        18px;

    z-index:
        10;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        9px 13px;

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

    border-radius:
        999px;

    background:
        rgba(3,12,17,0.72);

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

    font-size:
        0.72rem;

    font-weight:
        500;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    cursor:
        pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;

}


.hero-video-sound-btn i {

    font-size:
        0.95rem;

    color:
        #4de4e9;

}


.hero-video-sound-btn:hover {

    background:
        rgba(3,18,24,0.9);

    border-color:
        rgba(34,207,228,0.35);

    transform:
        translateY(-2px);

}


.hero-video-sound-btn.is-unmuted {

    border-color:
        rgba(34,207,228,0.35);

}


/* =========================================================
   DESKTOP LARGE SCREEN
========================================================= */

@media (min-width: 1200px) {

    .container-main {

        max-width:
            1280px;

    }

    .hero-video-stage {

        max-width:
            900px;

        height:
            480px;

        transform:
            translateY(-5px);

    }

    .hero-main-video {

        height:
            480px;

    }

}


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

@media (max-width: 1199px) {

    .container-main {

        max-width:
            100%;

        padding-left:
            20px;

        padding-right:
            20px;

    }

    .creasy-video-section {

        padding-left:
            20px;

        padding-right:
            20px;

    }

    .creasy-why-section {

        padding-left:
            20px;

        padding-right:
            20px;

    }

    .creasy-final-cta {

        padding-left:
            20px;

        padding-right:
            20px;

    }

    .hero-video-stage {

        max-width:
            100%;

        height:
            460px;

    }

    .hero-main-video {

        height:
            460px;

    }

}


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

@media (max-width: 991px) {

    .creasy-why-grid {

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

    }

    .hero-video-stage {

        height:
            420px;

        margin-top:
            25px;

    }

    .hero-main-video {

        height:
            420px;

    }

}


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

@media (max-width: 767px) {

    .container-main {

        padding-left:
            15px;

        padding-right:
            15px;

    }

    .creasy-video-section {

        padding:
            25px 15px 45px;

    }

    .creasy-video-banner {

        min-height:
            430px;

        border-radius:
            18px;

    }

    .creasy-video-content {

        min-height:
            430px;

        padding:
            35px 25px;

        justify-content:
            flex-end;

        padding-bottom:
            55px;

    }

    .creasy-video-content h2 {

        font-size:
            2rem;

    }

    .creasy-video-content p {

        font-size:
            0.9rem;

    }

    .creasy-video-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(2,11,17,0.15) 0%,
                rgba(2,11,17,0.30) 35%,
                rgba(2,11,17,0.94) 100%
            );

    }

    .creasy-why-section {

        padding:
            65px 15px 45px;

    }

    .creasy-final-cta {

        padding:
            15px 15px 65px;

    }

    .hero-video-stage {

        height:
            390px;

        min-height:
            0;

    }

    .hero-main-video {

        height:
            390px;

        min-height:
            0;

    }

}


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

@media (max-width: 575px) {

    .creasy-why-grid {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }

    .creasy-why-card {

        min-height:
            auto;

        padding:
            23px 21px;

    }

    .creasy-why-icon {

        margin-bottom:
            17px;

    }

    .creasy-why-heading {

        margin-bottom:
            32px;

    }

    .creasy-final-cta-box {

        min-height:
            370px;

        padding:
            45px 22px;

        border-radius:
            20px;

    }

    .creasy-final-cta-box h2 {

        font-size:
            2.15rem;

    }

    .creasy-final-cta-box p {

        font-size:
            0.88rem;

    }

    .hero-video-stage {

        height:
            330px;

        min-height:
            0;

        margin-top:
            20px;

        border-radius:
            20px;

    }

    .hero-main-video {

        height:
            330px;

        min-height:
            0;

        border-radius:
            20px;

    }

    .hero-video-sound-btn {

        right:
            12px;

        bottom:
            12px;

        padding:
            8px 10px;

    }

    .hero-video-sound-btn span {

        display:
            none;

    }

    .hero-video-sound-btn i {

        font-size:
            1rem;

    }
    
    

}

/* =========================================================
   CREASY SHOWCASE - CLEAN VERSION
   ========================================================= */

.creasy-showcase {
    width: 100%;
    max-width: 1180px;

    margin: 70px auto;

    padding: 0 20px;
}


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

.showcase-grid {
    display: grid;

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

    gap: 22px;

    width: 100%;
}


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

.showcase-card {
    position: relative;

    width: 100%;

    aspect-ratio: 3 / 4;

    overflow: hidden;

    border-radius: 22px;

    background: #07131b;

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

    box-shadow:
        0 15px 45px rgba(0,0,0,.30);
}


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

.showcase-image {
    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


/* =========================================================
   VIDEO
   ========================================================= */

.showcase-video video {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   POSTER
   ========================================================= */

.showcase-poster {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.showcase-overlay {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(2,11,17,.05) 15%,
            rgba(2,11,17,.20) 45%,
            rgba(2,11,17,.94) 100%
        );
}


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

.showcase-content {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 22px;

    pointer-events: none;
}


/* =========================================================
   TYPE
   ========================================================= */

.showcase-type {
    align-self: flex-start;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    border-radius: 999px;

    background: rgba(2,11,17,.65);

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

    color: rgba(255,255,255,.92);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


.showcase-type i {
    font-size: 13px;
}


/* =========================================================
   INFO
   ========================================================= */

.showcase-info h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 24px;

    font-weight: 700;
}


.showcase-info p {
    margin: 0;

    max-width: 270px;

    color: rgba(255,255,255,.70);

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   PLAY BUTTON
   ========================================================= */

.showcase-play {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 68px;
    height: 68px;

    display: flex;

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

    padding: 0;

    border-radius: 50%;

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

    background: rgba(2,11,17,.60);

    color: #fff;

    font-size: 30px;

    cursor: pointer;

    z-index: 20;
}


.showcase-play i {
    margin-left: 3px;
}


/* =========================================================
   MUSIC
   ========================================================= */

.showcase-music {
    background-size: cover;

    background-position: center;
}


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

@media (max-width: 850px) {

    .showcase-grid {
        gap: 14px;
    }

    .showcase-card {
        border-radius: 18px;
    }

    .showcase-content {
        padding: 17px;
    }

    .showcase-info h3 {
        font-size: 20px;
    }

    .showcase-info p {
        font-size: 12px;
    }

    .showcase-play {
        width: 58px;
        height: 58px;

        font-size: 26px;
    }
}


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

@media (max-width: 600px) {

    .creasy-showcase {
        padding: 0 14px;
    }

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

        gap: 8px;
    }

    .showcase-card {
        border-radius: 14px;
    }

    .showcase-content {
        padding: 10px;
    }

    .showcase-type {
        padding: 5px 7px;

        font-size: 7px;

        letter-spacing: .7px;
    }

    .showcase-type i {
        font-size: 9px;
    }

    .showcase-info h3 {
        font-size: 15px;

        margin-bottom: 3px;
    }

    .showcase-info p {
        display: none;
    }

    .showcase-play {
        width: 45px;
        height: 45px;

        font-size: 21px;
    }
}

</style>




<!-- =====================================================
     GLOBAL JS
====================================================== -->





<main id="home">

 <section class="hero pt-4">

    <div class="container container-main">

        <div class="row align-items-center g-4">

            <div class="col-lg-5">

                <h1>
                   Dari Idea<br>
                    <span class="gradient-text">
                        Jadi sebuah Karya.
                    </span>
                </h1>

                <p>
                    Bikin konten profesional dalam hitungan menit.<br>
                    Tanpa ribet, tanpa skill khusus.
                </p>

                <ul class="feature-list">

                    <li>
                        <i class="bi bi-check-circle-fill"></i>
                        Multimedia dalam satu platform
                    </li>

                    <li>
                        <i class="bi bi-check-circle-fill"></i>
                        Hasil berkualitas tinggi
                    </li>

                    <li>
                        <i class="bi bi-check-circle-fill"></i>
                        Cocok untuk bisnis, kreator, dan personal
                    </li>

                </ul>

                <div class="d-flex gap-3 flex-wrap">

                    <a href="{{ route('login') }}">

                        <button class="btn-glow">

                            Beli Sekarang

                            <i class="bi bi-arrow-right ms-2"></i>

                        </button>

                    </a>


                   
                </div>

            </div>


            <div class="col-lg-7">

                <div class="hero-video-stage">

                   <video
                    id="heroMainVideo"
                    class="hero-main-video"
                    autoplay
                    muted
                    loop
                    playsinline
                    preload="auto"
                >

                        <source
                            src="{{ asset('bgv-3.mp4') }}"
                            type="video/mp4"
                        >

                        Browser kamu tidak mendukung video HTML5.

                    </video>
                    <button type="button" id="heroVideoSoundBtn" class="hero-video-sound-btn">
                        <i class="bi bi-volume-mute-fill"></i>
                        <span>Sound Off</span>
                    </button>

                </div>

            </div>

        </div>

    </div>

</section>

  

  <section class="creasy-showcase">

    <div class="showcase-grid">

        {{-- =====================================================
             IMAGE
        ====================================================== --}}
        <div class="showcase-card showcase-image"
             style="background-image:url('{{ $showcaseImage ?? asset('konten/creasy-218.webp') }}');">

            <div class="showcase-overlay"></div>

            <div class="showcase-content">
                <span class="showcase-type">
                    <i class="bi bi-image"></i>
                    IMAGE
                </span>

                <div class="showcase-info">
                    <h3>AI Image</h3>
                    <p>Turn your ideas into stunning visuals.</p>
                </div>
            </div>

        </div>


        {{-- =====================================================
             VIDEO
        ====================================================== --}}
        <div class="showcase-card showcase-video">

    <video
        src="{{ asset('generated/videos/creasy-220.mp4') }}"
       autoplay
        muted
        loop
        playsinline
        preload="auto">
    </video>

    <div class="showcase-overlay"></div>

    <div class="showcase-content">

        <div class="showcase-type">
            <i class="bi bi-camera-video"></i>
            AI VIDEO
        </div>

        <div class="showcase-info">
            <h3>AI Video</h3>
            <p>
                Create cinematic videos from your imagination.
            </p>
        </div>

    </div>

</div>


        {{-- =====================================================
             MUSIC
        ====================================================== --}}
        <div class="showcase-card showcase-music"
             data-audio="{{ $showcaseMusic ?? '' }}">

            <img
                class="showcase-poster"
                src="{{ $showcaseMusicCover ?? asset('konten/creasy-222.webp') }}"
                alt="AI Music"
            >

            <div class="showcase-overlay"></div>

           

            <div class="showcase-content">
                <span class="showcase-type">
                    <i class="bi bi-music-note-beamed"></i>
                    MUSIC
                </span>

                <div class="showcase-info">
                    <h3>AI Music</h3>
                    <p>Create original music from your imagination.</p>
                </div>
            </div>

        </div>

    </div>

</section>

  
  
   <!-- =========================================================
     CREASY VIDEO CTA
========================================================= -->

 <section class="hero pt-4">
    <div class="container container-main">
      <div class="row align-items-center">
        <div class="col-lg-5">
          
          <div class="section-kicker">
                    KREASI TANPA BATAS
                </div>

                <h2>
                    Ubah Ide<br>
                    <span>Menjadi Visual Menakjubkan.</span>
                </h2>
                
                <p>
                    Buat gambar, video, dan musik dengan AI
                    dalam satu platform untuk kebutuhan konten,
                    bisnis, dan kreativitasmu.
                </p>

             

          <div class="rating d-flex align-items-center mt-3">
            
            <div>
              
             
            </div>
          </div>
        </div>

        <div class="col-lg-6">
          <div class="visual-stage">
            <!-- Semua URL gambar di bawah dapat diganti -->
            <div class="creative-card c1">
              <img src="konten/img-9.png">
              <span class="label">Foto Produk</span>
            </div>
            <div class="creative-card c2">
              <img src="konten/img-8.png" alt="Foto Makanan">
              <span class="label">Foto Makanan</span>
            </div>
            <div class="creative-card c3">
              <img src="konten/img-7.jpeg" alt="Foto Orang Jualan">
              <span class="label">Foto Orang Jualan</span>
            </div>
            <div class="creative-card c4">
              <img src="konten/img-10.png" alt="Avatar AI">
              <span class="label">Avatar AI</span>
            </div>
            <div class="creative-card c5">
              <img src="konten/img-11.png" alt="Video Musik">
              <span class="label">Video & Musik</span>
            </div>
           
          </div>
        </div>
        <div class='col-lg-2'> <div class="hand-note">Satu ide.<br>Banyak kemungkinan.</div></div>
      </div>
    </div>
  </section>




<section id="portfolio">
    <div class="container container-main">
      <div class="d-flex justify-content-between align-items-end">
        <div>
          <div class="section-kicker">CONTOH HASIL KARYA</div>
          <h2 class="section-title">Dari berbagai ide, jadi karya nyata.</h2>
          <p class="section-desc">Lihat bagaimana Creasy membantu mewujudkan ide jadi visual yang memukau.</p>
        </div>
        <a href="#" class="view-all">Lihat lebih banyak <i class="bi bi-arrow-right"></i></a>
      </div>

      <div class="horizontal-slider gallery-slider mt-2">
        <div class="slider-fade-left"></div>
        <div class="horizontal-track">
          <!-- URL gambar dapat diganti -->
          <div class="gallery-slide"><div class="gallery-item"><img src="konten/img-1.png" alt="Produk"></div></div>
      
          <div class="gallery-slide"><div class="gallery-item"><img src="konten/img-3.png" alt="Bisnis"></div></div>
           <div class="gallery-slide"><div class="gallery-item"><img src="konten/img-12.png" alt="Music"></div></div>
          <div class="gallery-slide"><div class="gallery-item"><img src="konten/img-2.png" alt="Poster"></div></div>
          <div class="gallery-slide"><div class="gallery-item"><img src="konten/img-5.png" alt="Avatar"></div></div>
           <div class="gallery-slide"><div class="gallery-item"><img src="konten/img-4.png" alt="Produk"></div></div>
        </div>
        <div class="slider-fade-right"></div>
      </div>
    </div>
  </section>

<!-- =========================================================
     price
========================================================= -->

 
<div id="autoPricing"></div>
 
 
 <!-- =========================================================
     WHY CREASY
========================================================= -->

<section class="creasy-why-section">

    <div class="container container-main">

        <div class="creasy-why-heading">

            <div class="section-kicker">
                KENAPA CREASY?
            </div>

            <h2 class="section-title">
                Satu platform.
                <br>
                Semua kebutuhan kreatif.
            </h2>

            <p class="section-desc">
                Bukan sekadar membuat konten.
                Creasy membantu kamu mengubah ide menjadi sesuatu
                yang siap dilihat, dibagikan, dan digunakan.
            </p>

        </div>


        <div class="creasy-why-grid">

            <!-- 01 -->

            <div class="creasy-why-card">

                <span class="creasy-why-number">
                    01
                </span>

                <div class="creasy-why-icon">

                    <i class="bi bi-lightning-charge-fill"></i>

                </div>

                <h4>
                    Cepat dari Ide
                </h4>

                <p>
                    Tidak perlu mulai dari halaman kosong.
                    Tulis idemu, pilih kebutuhanmu,
                    dan biarkan AI membantu mewujudkannya.
                </p>

            </div>


            <!-- 02 -->

            <div class="creasy-why-card">

                <span class="creasy-why-number">
                    02
                </span>

                <div class="creasy-why-icon">

                    <i class="bi bi-stars"></i>

                </div>

                <h4>
                    Semua dalam Satu
                </h4>

                <p>
                    Gambar, video, musik, avatar,
                    sampai kebutuhan konten bisnis
                    bisa dibuat dari satu platform.
                </p>

            </div>


            <!-- 03 -->

            <div class="creasy-why-card">

                <span class="creasy-why-number">
                    03
                </span>

                <div class="creasy-why-icon">

                    <i class="bi bi-briefcase-fill"></i>

                </div>

                <h4>
                    Siap untuk Bisnis
                </h4>

                <p>
                    Bangun visual produk, materi promosi,
                    konten sosial media, hingga kebutuhan
                    brand dengan lebih praktis.
                </p>

            </div>


            <!-- 04 -->

            <div class="creasy-why-card">

                <span class="creasy-why-number">
                    04
                </span>

                <div class="creasy-why-icon">

                    <i class="bi bi-credit-card-2-front-fill"></i>

                </div>

                <h4>
                    Credits Transparan
                </h4>

                <p>
                    Gunakan Creative Credits sesuai kebutuhan.
                    Jelas, fleksibel, dan kamu tetap punya
                    kendali atas penggunaanmu.
                </p>

            </div>

        </div>

    </div>

</section>


<!-- =========================================================
     FINAL CTA
========================================================= -->

<section class="creasy-final-cta">

    <div class="container container-main">

        <div class="creasy-final-cta-box">

            <div class="section-kicker">
                READY TO CREATE?
            </div>

            <h2>
                Punya ide?
                <br>
                <span>Wujudkan sekarang.</span>
            </h2>

            <p>
                Tidak perlu jago desain.
                Tidak perlu bingung mulai dari mana.
                Cukup bawa idemu — Creasy membantu mengubahnya
                menjadi karya.
            </p>

            <a
                href="{{ route('login') }}"
                class="creasy-create-btn"
            >
               Daftar 
                <i class="bi bi-arrow-right"></i>
            </a>

            <div class="creasy-cta-note">

                <i class="bi bi-stars"></i>

                Your idea is the starting point.

            </div>

        </div>

    </div>

</section>



@section('scripts')

<script>
   

document.addEventListener('DOMContentLoaded', function () {

    const video1 = document.getElementById('creasyBgVideo1');
    const video2 = document.getElementById('creasyBgVideo2');

    const dot1 = document.querySelector(
        '.video-dot[data-video="1"]'
    );

    const dot2 = document.querySelector(
        '.video-dot[data-video="2"]'
    );

    if (!video1 || !video2) {
        return;
    }


    let currentVideo = 1;


    /* =====================================================
       PLAY VIDEO
    ====================================================== */

    function playVideo(video) {

        const promise = video.play();

        if (promise !== undefined) {

            promise.catch(function () {

                /*
                 * Browser mungkin memblokir autoplay.
                 * Karena video muted, biasanya tetap diizinkan.
                 */

            });

        }

    }


    /* =====================================================
       SWITCH VIDEO
    ====================================================== */

    function switchVideo(nextVideo) {

        if (nextVideo === currentVideo) {
            return;
        }


        const current =
            currentVideo === 1
                ? video1
                : video2;

        const next =
            nextVideo === 1
                ? video1
                : video2;


        current.classList.remove('active');

        next.classList.add('active');


        next.currentTime = 0;

        playVideo(next);


        current.pause();


        currentVideo =
            nextVideo;


        /* DOT */

        document
            .querySelectorAll('.video-dot')
            .forEach(function (dot) {

                dot.classList.remove('active');

            });


        const activeDot =
            document.querySelector(
                '.video-dot[data-video="' +
                nextVideo +
                '"]'
            );


        if (activeDot) {
            activeDot.classList.add('active');
        }

    }


    /* =====================================================
       VIDEO 1 SELESAI
    ====================================================== */

    video1.addEventListener(
        'ended',
        function () {

            switchVideo(2);

        }
    );


    /* =====================================================
       VIDEO 2 SELESAI
    ====================================================== */

    video2.addEventListener(
        'ended',
        function () {

            switchVideo(1);

        }
    );


    /* =====================================================
       DOT CLICK
    ====================================================== */

    if (dot1) {

        dot1.addEventListener(
            'click',
            function () {

                switchVideo(1);

            }
        );

    }


    if (dot2) {

        dot2.addEventListener(
            'click',
            function () {

                switchVideo(2);

            }
        );

    }


    /* =====================================================
       START
    ====================================================== */

    video1.classList.add('active');

    video2.classList.remove('active');

    playVideo(video1);

});


</script>


<script>
$(document).ready(function () {

    const pricingContainer = $('#autoPricing');

    if (!pricingContainer.length) {
        return;
    }

    pricingContainer.load('{{ route('ajax.pricing') }}', function (response, status, xhr) {

        if (status === 'error') {

            console.error('Gagal memuat pricing:', xhr.status, xhr.statusText);

            pricingContainer.html(`
                <div class="text-center py-5">
                    <div class="text-muted">
                        Gagal memuat paket harga.
                    </div>
                </div>
            `);

        } else {

            console.log('Pricing berhasil dimuat.');

        }

    });

});
</script>
<script>
$(document).ready(function () {

    const heroVideo = document.getElementById('heroMainVideo');
    const soundBtn = document.getElementById('heroVideoSoundBtn');

    if (!heroVideo || !soundBtn) return;

    soundBtn.addEventListener('click', function () {

        heroVideo.muted = !heroVideo.muted;

        const icon = soundBtn.querySelector('i');
        const text = soundBtn.querySelector('span');

        if (heroVideo.muted) {

            icon.className = 'bi bi-volume-mute-fill';
            text.textContent = 'Sound Off';

            soundBtn.classList.remove('is-unmuted');

        } else {

            icon.className = 'bi bi-volume-up-fill';
            text.textContent = 'Sound On';

            soundBtn.classList.add('is-unmuted');

        }

    });

});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    /* =====================================================
       VIDEO
       ===================================================== */

    const videoCard = document.querySelector('.showcase-video');

    if (videoCard) {

        const playButton =
            videoCard.querySelector('.showcase-play');

        const videoUrl =
            videoCard.dataset.video;

        if (playButton && videoUrl) {

            playButton.addEventListener('click', function (event) {

                event.preventDefault();
                event.stopPropagation();

                let video =
                    videoCard.querySelector('video');

                /* -----------------------------------------
                   BUAT VIDEO HANYA SAAT DIKLIK
                   ----------------------------------------- */

                if (!video) {

                    video =
                        document.createElement('video');

                    video.src = videoUrl;

                    video.controls = true;

                    video.playsInline = true;

                    video.preload = 'metadata';

                    videoCard.appendChild(video);

                    videoCard.classList.add('is-playing');

                    video.play().catch(function (error) {

                        console.log(
                            'Video gagal diputar:',
                            error
                        );

                    });

                }

            });

        }

    }


    /* =====================================================
       MUSIC
       ===================================================== */

    const musicCard = document.querySelector('.showcase-music');

    if (musicCard) {

        const playButton =
            musicCard.querySelector('.showcase-play');

        const audioUrl =
            musicCard.dataset.audio;

        if (playButton && audioUrl) {

            playButton.addEventListener('click', function (event) {

                event.preventDefault();
                event.stopPropagation();

                let audio =
                    musicCard.querySelector('audio');

                /* -----------------------------------------
                   BUAT AUDIO HANYA SAAT DIKLIK
                   ----------------------------------------- */

                if (!audio) {

                    audio =
                        document.createElement('audio');

                    audio.src = audioUrl;

                    audio.preload = 'metadata';

                    musicCard.appendChild(audio);

                    musicCard.classList.add('is-playing');

                    audio.play().catch(function (error) {

                        console.log(
                            'Audio gagal diputar:',
                            error
                        );

                    });

                }

            });

        }

    }

});
</script>
@endsection

@include('partials.footer')