/* ================= GLOBAL ================= */
html{
    scroll-behavior: smooth;
}

body{
    font-family: 'Segoe UI', sans-serif;
    background-color: #f5f7fb;
    margin: 0;
}

section{
    position: relative;
}

/* ================= CARD ================= */
.card{
    border: none;
    border-radius: 14px;

    box-shadow: 0 6px 16px rgba(0,0,0,0.06);

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

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

    box-shadow:
        0 25px 50px rgba(0,0,0,0.12) !important;
}

.card-header{
    background: transparent;
    font-weight: 600;
    border-bottom: 1px solid #eee;
}

/* ================= BUTTON ================= */
.btn{
    border-radius: 8px;
    padding: 6px 14px;

    transition: 0.3s ease;
}

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

.btn-main{
    width: 100%;
    padding: 14px;
    font-size: 16px;
}

/* ================= BADGE ================= */
.badge{
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
}

/* ================= STATUS ================= */
.status-badge{
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 13px;
}

/* ================= HERO ================= */
.hero-section{
    position: relative;

    min-height: 100vh;

    background:
        linear-gradient(rgba(0,0,0,0.68), rgba(0,0,0,0.68)),
        url('/assets/images/hero.webp')
        center/cover no-repeat;

    display: flex;
    align-items: center;

    color: #fff;

    padding: 140px 0 100px;
}

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

.hero-badge{
    background: rgba(255,255,255,0.15);

    padding: 10px 20px;

    border-radius: 50px;

    font-size: 14px;
    letter-spacing: 1px;

    display: inline-block;

    backdrop-filter: blur(10px);
}

.hero-title{
    font-size: 78px;
    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 25px;
}

.hero-description{
    font-size: 20px;

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

    line-height: 1.8;
    max-width: 620px;
}

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

    gap: 16px;

    margin-top: 40px;
}

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

    gap: 40px;

    margin-top: 50px;
}

/* ================= RACEPACK IMAGE ================= */
.racepack-image{
    overflow: hidden;
}

.racepack-image div{
    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}

.card:hover .racepack-image div{
    transform: scale(1.08);
    filter: brightness(1.05);
}


/* ================= E-TICKET (RINCIAN.PHP) ================= */
.ticket-card {
    border: none;
    border-radius: 24px;
    background: #ffffff;
    position: relative;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;
}

/* Mengunci efek melayang card global khusus untuk layout tiket */
.ticket-card:hover {
    transform: none !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;
}

/* Pembatas Gunting Tiket */
.ticket-divider {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}
.ticket-divider::before {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    border-bottom: 2px dashed #e9ecef;
}

/* Efek Lubang Setengah Lingkaran Kiri & Kanan */
.ticket-card::before, .ticket-card::after {
    content: ''; 
    position: absolute; 
    top: 145px; 
    width: 32px; 
    height: 32px;
    background: #f5f7fb; /* Menyesuaikan background body global kamu */
    border-radius: 50%; 
    z-index: 5;
}
.ticket-card::before { left: -16px; }
.ticket-card::after { right: -16px; }

.section-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #adb5bd;
    margin-bottom: 1.25rem;
}

.btn-whatsapp-premium {
    background-color: #25D366;
    color: white;
    font-weight: 600;
    border-radius: 8px;
    transition: 0.3s ease;
}
.btn-whatsapp-premium:hover {
    background-color: #1ebd54;
    color: white;
    transform: translateY(-2px);
}

/* Mode Cetak Browser ke PDF/Kertas */
@media print {
    body { background: #ffffff !important; }
    .no-print, header, footer, .btn, .alert, .mt-4 { display: none !important; }
    .container { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
    .ticket-card { border: 1px solid #e9ecef !important; box-shadow: none !important; }
    .ticket-card::before, .ticket-card::after { display: none !important; }
}


/* ================= MOBILE RESPONSIVE ================= */
@media(max-width: 768px){

    body{
        display: block;
    }

    /* TYPOGRAPHY */
    h2{
        font-size: 34px !important;
    }

    h3{
        font-size: 18px;
        margin-bottom: 15px;
    }

    /* CARD */
    .card{
        margin-bottom: 12px;
        border-radius: 12px;
    }

    .card-body{
        padding: 12px;
    }

    /* FORM */
    .form-control{
        font-size: 14px;
        padding: 10px;
    }

    /* BUTTON */
    .btn{
        font-size: 13px;
        padding: 6px 10px;
    }

    .btn-main{
        padding: 10px;
        font-size: 14px;
    }

    .btn-lg{
        width: 100%;
    }

    /* BADGE */
    .badge{
        font-size: 11px;
        padding: 4px 6px;
    }

    /* NAVBAR */
    .navbar-collapse{
        background: rgba(0,0,0,0.92);

        padding: 20px;

        border-radius: 20px;

        margin-top: 15px;
    }

    /* HERO */
    .hero-section{
        min-height: auto;

        padding:
            130px 20px 90px;

        text-align: center;
    }

    .hero-content{
        max-width: 420px;
        margin: auto;
    }

    .hero-badge{
        font-size: 12px;
        letter-spacing: 2px;
    }

    .hero-title{
        font-size: 56px;

        line-height: 1.05;

        margin:
            20px 0 24px;
    }

    .hero-description{
        font-size: 16px;
        max-width: 100%;
    }

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

    .hero-info{
        justify-content: center;
        gap: 24px;
    }

    /* PACKAGE */
    #package .card-body{
        padding: 28px !important;
    }

    #package h3{
        font-size: 30px !important;
    }

    /* INFO */
    #info .bg-white{
        padding: 30px 24px !important;
    }

    /* RACEPACK */
    .racepack-image div{
        height: 180px !important;
    }

    /* FOOTER */
    footer{
        text-align: center;
    }
}