/* ==========================================================
    WARNA
========================================================== */

:root{

    /* Background */

    --bg:#0F1115;
    --section:#15191F;
    --card:#13161b;
    --footer:#0B0D10;

    /* Border */

    --border:#2D333B;

    /* Text */

    --white:#FFFFFF;

    --text:#F5F5F5;

    --text-light:#f1f1f1;

    --text-muted:#bbbbbb;

    /* Gold */

    --primary-gold:#e8f600;

    --secondary-gold:#DDBB6A;

    --light-gold:#242d08;

    /* Hover */

    --hover:#252B33;
    
    --btn-hover:#8d9500;

    /* Radius */

    --radius-sm:12px;

    --radius:18px;

    --radius-lg:26px;

    /* Shadow */

    --shadow-sm:
        0 8px 20px rgba(0,0,0,.20);

    --shadow:
        0 18px 50px rgba(0,0,0,.35);

    --shadow-lg:
        0 30px 80px rgba(0,0,0,.45);

    /* Gold Glow */

    --gold-shadow:
        0 12px 28px rgba(199,162,74,.20);

    --gold-shadow-lg:
        0 18px 40px rgba(199,162,74,.30);

    /* Transition */

    --transition:.35s ease;

}


*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

line-height:1.5;

-webkit-font-smoothing:antialiased;

text-rendering:optimizeLegibility;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

button{

border:none;

outline:none;

cursor:pointer;

font-family:inherit;

}


h1,
h2,
h3,
h4{

font-family:'Cormorant Garamond',serif;

color:var(--text);

line-height:1.2;

}

h1{

font-size:64px;

font-weight:700;

}

h2{

font-size:46px;

font-weight:700;

}

h3{

font-size:30px;

font-weight:600;

}

p{

color:var(--text-muted);

font-size:14px;

line-height:1.4;

}


.container{

width:100%;

max-width:var(--container);

margin:auto;

padding-left:24px;

padding-right:24px;

}

section{

padding:100px 0;

}


.section-header{

max-width:760px;

margin:0 auto 70px;

text-align:center;

}

.section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;

    background: rgba(18, 18, 18, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-header h2{

margin-top:22px;

margin-bottom:20px;

}

.section-header p{

max-width:620px;

margin:auto;

}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:15px 28px;

border-radius:14px;

font-weight:600;

transition:var(--transition);

}

.btn-primary{

background:var(--primary-gold);

color:var(--bg)!important;

box-shadow:var(--gold-shadow);

}


.btn-outline{
    
border:1px solid var(--border);

background:transparent;

color:var(--text);

}

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

background:var(--bg);

backdrop-filter:blur(18px);

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

transition:var(--transition);

}

.header.scrolled{

background:var(--bg);

box-shadow:var(--shadow);

}

.navbar{

display:flex;

align-items:center;

justify-content:space-between;

height:65px;

}

.logo{

display:flex;

align-items:center;

}

.logo img{

height:42px;

width:auto;

}

.nav-menu{

display:flex;

align-items:center;

gap:42px;

}

.nav-menu a{

position:relative;

font-size:15px;

font-weight:600;

color:var(--text-light);

transition:var(--transition);

}


.nav-menu a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary-gold);

transition:var(--transition);

}

.nav-menu a.active::after{
    width:100%;
}

.nav-menu a.active{

color:var(--primary-gold);

}

.nav-button{

display:flex;

align-items:center;

}

.nav-button .btn{

padding:8px 20px;

}


.mobile-toggle{

display:none;

width:48px;

height:40px;

border-radius:12px;

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

background:var(--bg);

align-items:center;

justify-content:center;

transition:var(--transition);

}


.mobile-toggle svg{

width:24px;

height:24px;

stroke:var(--primary-gold);

}
.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.25s ease;

    z-index:998;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

.mobile-nav{

    position:fixed;

    top:75px;

    left:50%;

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

    width:calc(100% - 32px);

    max-width:500px;

    background:#0B0D10;

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

    border-radius:20px;

    box-shadow:var(--shadow);

    padding:24px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.25s ease;

    z-index:999;

}
.mobile-nav.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translate(-50%,0);

}

.mobile-nav ul{

    display:flex;

    flex-direction:column;

    gap:12px;

    list-style:none;

    margin:0;

    padding:0;
    

}

.mobile-nav a{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:16px;

    border-radius:14px;

    font-weight:600;

    color:var(--text-light);

    transition:.3s;

}


.mobile-nav .btn{

    width:100%;

    margin-top:20px;

}

.header.hide{

transform:translateY(-100%);

}


.hero{

    position:relative;

    padding-top:140px;

    padding-bottom:110px;

    background:var(--bg);

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-120px;

    width:650px;

    height:650px;

    pointer-events:none;

}

.hero::after{

    content:"";

    position:absolute;

    bottom:-220px;

    left:-150px;

    width:500px;

    height:500px;
    pointer-events:none;

}

.hero-wrapper{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:70px;

}

.hero-content{

    max-width:620px;

}

.hero-image img{

    filter:drop-shadow(0 35px 60px rgba(0,0,0,.45));

}

.hero h1{

    margin-bottom:28px;

    font-size:68px;
    
    color:var(--primary-gold);

}

.hero p{

    font-size:18px;

    line-height:2;

    color:var(--text-light);

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:42px;

}

.hero-stats{

    display:grid;

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

    gap:22px;

    margin-top:55px;

}

.hero-stat{

    padding:14px;

    background:#ffffff;

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

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.hero-stat h3{

    margin-bottom:10px;

    color:var(--text-light);

    font-size:34px;

}

.hero-stat p{

    font-size:14px;

    line-height:1.7;
    
    color:var(--text-muted);

}

.hero-image{

    position:relative;

}

.hero-image img{

    width:100%;

    height:auto;

    filter:drop-shadow(0 30px 50px rgba(0,0,0,.12));

    transition:var(--transition);

}


.card{

    background:var(--card);

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

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.advantages{

    background:var(--section);

}

.advantages-grid{

    display:grid;

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

    gap:30px;

}

.advantage-card{

    padding:38px 32px;

}

.advantage-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:26px;

    border-radius:18px;

    background:rgba(0,0,0,.45);
    
    color:var(--primary-gold);

}

.advantage-icon svg{

    width:34px;

    height:34px;

    stroke:var(--primary-gold);

}

.advantage-card h3{

    margin-bottom:18px;

    font-size:28px;

}

.advantage-card p{

    font-size:15px;

}



.fleet{

    background:var(--bg);

}

.fleet-grid{

    display:grid;

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

    gap:32px;

}

.fleet-card{
    
    background:var(--card);
    
    border:1px solid var(--border);
    
    box-shadow:var(--shadow-sm);

    display:flex;

    flex-direction:column;

    height:100%;

}


.fleet-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:4/3;

    background:var(--border);
    
    border-radius:20px 20px 0 0;

}

.fleet-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;
    
    

}

.fleet-content{

    display:flex;

    flex-direction:column;

    flex:1;

}

.fleet-content h3{
    
    margin-top:10px;

    margin-bottom:6px;

    text-align:center;

    font-size:26px;

}

.fleet-content p{

    text-align:center;

    margin-bottom:20px;
    
    padding:8px;

}

.fleet-content .btn{

    margin-top:24px;

}

.fleet-price{
    
    padding-left:20px;

    margin-top:auto;

}

.price-item{

    display:flex;

    align-items:center;

    padding:4px 12px;

}

.price-item span{
    
    width: 140px;
    
    flex-shrink: 0;

    color:var(--text-light);

    font-size:14px;

}

.price-item strong{

    color:var(--primary-gold);

    font-size:16px;

}

.fleet-card .btn{

    width:100%;

}


.terms{

    background:var(--section);

}

.terms-wrapper{

    display:grid;

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

    gap:32px;

}

.term-card{

    padding:38px;

}

.term-card h3{

    margin-bottom:24px;

}

.term-card ul{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.term-card li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    color:var(--text-light);

    line-height:1.8;

}

.term-card svg{

    width:20px;

    height:20px;

    flex-shrink:0;

    stroke:var(--primary-gold);

}



.about{

    background:var(--bg);

}

.about-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:start;

}

.about-card{

    padding:14px;

}

.about-item{

    padding:18px 0;

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

}

.about-item:last-child{

    border-bottom:none;

}

.about-item h4{

    margin-bottom:8px;

    font-size:21px;

    color:var(--text-muted);

}

.about-item p,

.about-item a{

    color:var(--text-light);

}


.google-map{

    overflow:hidden;

    border-radius:var(--radius);

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

    box-shadow:var(--shadow-sm);

}

.google-map iframe{

    display:block;

    width:100%;

    height:520px;

    border:0;

}



.footer{

    background:var(--footer);

    color:#ffffff;

    padding:70px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;

}

.footer h3{

    color:var(--text-light);

    margin-bottom:20px;

}

.footer p,

.footer li,

.footer a{

    color:var(--text-muted);

}


.footer ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-bottom{

    margin-top:50px;

    padding-top:30px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.footer-bottom p{

    color:#cbd5e1;

    font-size:14px;

}



.floating-wa{

    position:fixed;

    right:24px;

    bottom:24px;

    z-index:999;

    display:flex;

    align-items:center;

    gap:14px;

    padding:8px 8px;

    border-radius:999px;

    background:#25D366;

    color:#ffffff;

    box-shadow:var(--shadow-lg);

    transition:var(--transition);

}



.floating-wa-text{

    font-size:15px;

    font-weight:600;

    white-space:nowrap;

}

.floating-wa-icon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    border-radius:50%;

}

.floating-wa-icon svg{

    width:28px;

    height:28px;

    fill:#25D366;

}




@media (max-width:992px){

    h1{

        font-size:50px;

    }

    h2{

        font-size:40px;

    }

    section{

        padding:80px 0;

    }

    .hero-wrapper{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content{

        max-width:100%;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

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

    }

    .advantages-grid{

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

    }

    .fleet-grid{

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

    }

    .terms-wrapper{

        grid-template-columns:1fr;

    }

    .about-wrapper{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

    }

    .nav-menu,

    .nav-button{

        display:none;

    }

    .mobile-toggle{

        display:flex;

    }

}


@media (max-width:768px){

    .container{

        padding-left:18px;

        padding-right:18px;

    }

    h1{

        font-size:38px;

    }

    h2{

        font-size:32px;

    }
    
    h4{

        font-size:17px;

    }

    section{

        padding:65px 0;

    }

    .hero{

        padding-top:130px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-stats{

        grid-template-columns:1fr;

    }

    .advantages-grid{

        grid-template-columns:1fr;

    }

    .fleet-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .google-map iframe{

        height:380px;

    }
    .floating-wa{

        width:64px;

        height:64px;

        padding:0;

        justify-content:center;

        border-radius:50%;

    }

    .floating-wa-text{

        display:none;

    }

}

.google-map{
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background: var(--card);
}

.google-map iframe{
    display: block;
    width: 100%;
    height: 520px;
    border: 0;
}

.map-direction-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:10px;
    width: calc(100% - 24px);
    margin: 12px;
    padding: 16px;

    border-radius: 14px;

    background: var(--primary-gold);
    color: var(--bg);

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

    transition: .3s ease;
}

.map-direction-btn svg{
    width:20px;
    height:20px;
    transition:.3s ease;
}


html{
    scroll-behavior: smooth;
}

/* Firefox */
html{
    scrollbar-width: thin;
    scrollbar-color: var(--primary-gold) var(--bg);
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar{
    width: 5px;
}

::-webkit-scrollbar-track{
    background: var(--bg);
}

::-webkit-scrollbar-thumb{
    background: var(--primary-gold);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover{
    background: #f7ff35;
}

@media (hover: hover) and (pointer: fine){

    .btn-primary:hover{
        background:var(--btn-hover);
    }

    .btn-outline:hover{
        border-color:var(--primary-gold);
        color:var(--primary-gold);
    }

    .nav-menu a:hover{
        color:var(--primary-gold);
    }

    .nav-menu a:hover::after{
        width:100%;
    }

    .mobile-toggle:hover{
        border-color:var(--primary-gold);
    }

    .mobile-nav a:hover{
        background:var(--light-gold);
        color:var(--primary-gold);
    }

    .about-item a:hover{
        color:var(--primary-gold);
    }

    .footer a:hover{
        color:var(--secondary-gold);
    }

    .floating-wa:hover{
        box-shadow:0 22px 45px rgba(0,0,0,.22);
    }

    .map-direction-btn:hover{
        background:var(--btn-hover);
        transform:translateY(-2px);
    }
    
    .map-direction-btn:hover svg{
    transform:translateX(4px);
    }

}