/*
Theme Name: SewainBusJatim
Theme URI: https://sewainbusjatim.com
Author: Fokus Konversi
Description: Custom theme converted from HTML
Version: 1.0
*/

/* Paste your entire styles.css content below this line */
/* Sewain.Bus — Static styles */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root{
  --background:#fbfcfd;
  --foreground:#1a2347;
  --card:#ffffff;
  --muted:#f4f6f9;
  --muted-foreground:#6b7393;
  --border:#e3e7ee;
  --navy:#1a2347;
  --navy-soft:#2b3768;
  --gold:#d4a84a;
  --gold-2:#b88a2e;
  --gold-foreground:#1a2347;
  --pf:#f6f8fb; /* primary-foreground */
  --secondary:#eef2f8;
  --radius:.75rem;
  --shadow-card:0 8px 30px -12px rgba(26,35,71,.18);
  --shadow-elegant:0 20px 50px -20px rgba(26,35,71,.35);
  --gradient-hero:linear-gradient(135deg,#0d1530 0%,#162247 60%,#1d3a6b 100%);
  --gradient-gold:linear-gradient(135deg,#e3b95a,#c08f2a);
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-sans:"Plus Jakarta Sans",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;border-color:var(--border)}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;line-height:1.5}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.1}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
ul{list-style:none}

.container{max-width:80rem;margin:0 auto;padding:0 1.5rem}
.text-gold{color:var(--gold)}
.text-navy{color:var(--navy)}
.text-muted{color:var(--muted-foreground)}
.text-balance{text-wrap:balance}
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(251,252,253,.85);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:4rem}
/* Logo image — tampil apa adanya, tanpa frame */
.logo .logo-img {
        max-height: {$logo_h_desktop}px !important;
        width: auto !important;
        height: auto !important;
        display: block;
        border: none !important;
        box-shadow: none !important;
        background: none !important;
        border-radius: 0 !important;
        object-fit: contain;
    }
    .logo .logo-img-drawer {
        max-height: {$logo_h_mobile}px !important;
    }

.nav{display:none;gap:2rem;align-items:center}
.nav a{font-size:.875rem;font-weight:500;color:var(--muted-foreground);transition:color .2s}
.nav a:hover,.nav a.active{color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:9999px;font-weight:600;font-size:.875rem;transition:opacity .2s,background .2s,transform .2s;padding:.625rem 1.25rem}

.btn-navy{background:var(--navy);color:var(--pf)}
.btn-navy:hover{background:var(--navy-soft)}
.btn-outline{border:1px solid rgba(246,248,251,.2);background:rgba(246,248,251,.05);color:var(--pf);backdrop-filter:blur(8px)}
.btn-outline:hover{background:rgba(246,248,251,.1)}
.btn-lg{padding:.875rem 1.75rem}
.header .btn{display:none}
.menu-btn{display:inline-flex;color:var(--navy)}
.menu-btn svg{width:24px;height:24px}
.mobile-nav{display:none;border-top:1px solid var(--border);background:var(--background);padding:1rem 1.5rem;flex-direction:column;gap:.75rem}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:.5rem 0;font-weight:500;font-size:.875rem}
.mobile-nav .btn{margin-top:.5rem;padding:.75rem 1.25rem}

@media(min-width:768px){
  .nav{display:flex}
  .header .btn{display:inline-flex}
  .menu-btn{display:none}
}

/* ===== Hero (home) ===== */
.hero{position:relative;overflow:hidden;background:var(--gradient-hero);color:var(--pf)}
.hero-bg{position:absolute;inset:0;opacity:.3}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(to top,var(--navy),rgba(26,35,71,.7),transparent)}
.hero-inner{position:relative;padding:5rem 0 7rem}
.badge{display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;border:1px solid rgba(212,168,74,.3);background:rgba(212,168,74,.1);padding:.375rem 1rem;font-size:.75rem;font-weight:500;color:var(--gold)}
.badge svg{width:14px;height:14px}
.hero h1{margin-top:1.5rem;font-size:2.5rem;font-weight:700;max-width:48rem;line-height:1.05}
.hero p.lead{margin-top:1.5rem;color:rgba(246,248,251,.8);max-width:36rem;font-size:1rem}
.hero-ctas{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero-stats{margin-top:3.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:40rem}
.stat-v{font-family:var(--font-display);font-weight:700;color:var(--gold);font-size:1.5rem}
.stat-l{font-size:.75rem;color:rgba(246,248,251,.6);margin-top:.25rem}
@media(min-width:768px){
  .hero-inner{padding:7rem 0 10rem}
  .hero h1{font-size:3.75rem}
  .hero p.lead{font-size:1.125rem}
  .stat-v{font-size:1.875rem}
  .stat-l{font-size:.875rem}
}

/* ===== Generic page hero (subpages) ===== */
.page-hero{background:var(--gradient-hero);color:var(--pf)}
.page-hero-inner{padding:5rem 0}
.page-hero h1{margin-top:.75rem;font-size:2.25rem;font-weight:700;max-width:48rem}
.page-hero p{margin-top:1rem;color:rgba(246,248,251,.75);max-width:36rem}
@media(min-width:768px){
  .page-hero-inner{padding:7rem 0}
  .page-hero h1{font-size:3rem}
}

/* ===== Sections ===== */
.section{padding:5rem 0}
.section-lg{padding:5rem 0}
@media(min-width:768px){.section-lg{padding:7rem 0}}
.section-secondary{background:var(--secondary)}
.section-navy{background:var(--navy);color:var(--pf)}
.section-header{max-width:36rem}
.section-header h2{margin-top:.75rem;font-size:1.875rem;font-weight:700;color:var(--navy)}
.section-header p{margin-top:1rem;color:var(--muted-foreground)}
.section-navy .section-header h2{color:var(--pf)}
@media(min-width:768px){.section-header h2{font-size:2.25rem}}

/* ===== Cards ===== */
.grid-3{display:grid;gap:1.5rem;grid-template-columns:1fr}
.grid-2{display:grid;gap:1.5rem;grid-template-columns:1fr}
.grid-4{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
.grid-6{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .grid-6{grid-template-columns:repeat(3,1fr)}
}

.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1.75rem;box-shadow:var(--shadow-card);transition:box-shadow .2s,border-color .2s}
.card:hover{box-shadow:var(--shadow-elegant)}
.card-icon{height:3rem;width:3rem;border-radius:.75rem;background:var(--navy);color:var(--pf);display:grid;place-items:center}
.card-icon svg{width:24px;height:24px}
.card-icon.gold{background:var(--gradient-gold);color:var(--gold-foreground)}
.card h3{margin-top:1.25rem;font-size:1.125rem;font-weight:600;color:var(--navy)}
.card p{margin-top:.5rem;font-size:.875rem;color:var(--muted-foreground)}
.card:hover{border-color:var(--gold)}

/* Fleet preview cards (home) */
.fleet-card{background:var(--card);border-radius:1rem;overflow:hidden;box-shadow:var(--shadow-card);transition:box-shadow .2s}
.fleet-card:hover{box-shadow:var(--shadow-elegant)}
.fleet-card .img{aspect-ratio:4/3;overflow:hidden;background:var(--muted)}
.fleet-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.fleet-card:hover .img img{transform:scale(1.05)}
.fleet-card .body{padding:1.5rem}
.fleet-card h3{font-size:1.125rem;font-weight:600;color:var(--navy)}
.fleet-card .seats{font-size:.875rem;color:var(--muted-foreground)}
.fleet-card .price{margin-top:.75rem;font-size:.875rem;font-weight:600;color:var(--gold)}

/* Destinations */
.dest{border:1px solid var(--border);background:var(--card);border-radius:.75rem;padding:1.25rem;display:flex;align-items:center;gap:.75rem;transition:border-color .2s;font-weight:500;color:var(--navy)}
.dest:hover{border-color:var(--gold)}
.dest svg{width:20px;height:20px;color:var(--gold)}

/* Testimonials */
.tstm{border-radius:1rem;background:rgba(246,248,251,.05);backdrop-filter:blur(6px);border:1px solid rgba(246,248,251,.1);padding:1.75rem}
.stars{display:flex;gap:2px;color:var(--gold)}
.stars svg{width:16px;height:16px;fill:currentColor}
.tstm .q{margin-top:1rem;color:rgba(246,248,251,.85)}
.tstm .name{margin-top:1.5rem;font-weight:600}
.tstm .role{font-size:.75rem;color:rgba(246,248,251,.6)}

/* CTA */
.cta{border-radius:1.5rem;background:var(--gradient-gold);padding:2.5rem;color:var(--gold-foreground);display:flex;flex-direction:column;gap:2rem;justify-content:space-between;box-shadow:var(--shadow-elegant)}
.cta h2{font-size:1.875rem;font-weight:700;max-width:36rem}
.cta p{margin-top:.75rem;opacity:.8;max-width:36rem}
@media(min-width:768px){
  .cta{flex-direction:row;align-items:center;padding:4rem}
  .cta h2{font-size:2.25rem}
}

/* ===== Footer ===== */
.footer{background:var(--navy);color:var(--pf);margin-top:6rem}
.footer-inner{padding:4rem 0;display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:768px){.footer-inner{grid-template-columns:2fr 1fr 1fr}}
.footer-brand p{margin-top:1rem;font-size:.875rem;color:rgba(246,248,251,.7);max-width:24rem}
.footer h4{font-size:.875rem;font-weight:600;margin-bottom:1rem}
.footer ul li{font-size:.875rem;color:rgba(246,248,251,.7);margin-bottom:.5rem;display:flex;align-items:flex-start;gap:.5rem}
.footer ul li svg{width:16px;height:16px;color:var(--gold);margin-top:2px;flex-shrink:0}
.footer-bottom{border-top:1px solid rgba(246,248,251,.1)}
.footer-bottom-inner{padding:1.5rem 0;display:flex;justify-content:space-between;font-size:.75rem;color:rgba(246,248,251,.5)}

/* Footer Navigasi - 2 kolom x 4 baris */
@media (min-width: 768px) {
  .footer-nav {
    padding-right: 4rem; /* jarak tambahan ke kolom Kontak */
  }
  .footer-nav ul {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    column-gap: 2rem;
  }
}

/* ===== Armada page ===== */
.fleet-row{display:grid;gap:2rem;align-items:center;grid-template-columns:1fr;margin-bottom:2.5rem}
@media(min-width:768px){.fleet-row{grid-template-columns:1fr 1fr}}
.fleet-row.reverse .fleet-row-img{order:0}
@media(min-width:768px){.fleet-row.reverse .fleet-row-img{order:2}}
.fleet-row-img{border-radius:1.5rem;overflow:hidden;background:var(--secondary);aspect-ratio:4/3;box-shadow:var(--shadow-card)}
.fleet-row-img img{width:100%;height:100%;object-fit:cover}
.fleet-row h2{margin-top:.5rem;font-size:1.875rem;font-weight:700;color:var(--navy)}
.fleet-row .desc{margin-top:.75rem;color:var(--muted-foreground)}
.fleet-row .price{margin-top:1.25rem;font-size:1.125rem;font-weight:600;color:var(--navy)}
.fleet-row .btn{margin-top:1.5rem}

.facility{border:1px solid var(--border);background:var(--card);border-radius:.75rem;padding:1.25rem;display:flex;align-items:center;gap:.75rem}
.facility-icon{height:2.5rem;width:2.5rem;border-radius:.5rem;background:var(--navy);color:var(--pf);display:grid;place-items:center}
.facility-icon svg{width:20px;height:20px}
.facility span{font-weight:500;color:var(--navy)}

/* ===== Layanan steps ===== */
.step{border:1px solid var(--border);background:var(--card);border-radius:1rem;padding:1.5rem}
.step-n{font-family:var(--font-display);font-weight:700;color:var(--gold);font-size:1.875rem}
.step-t{margin-top:.75rem;font-weight:600;color:var(--navy)}
.step-d{font-size:.875rem;color:var(--muted-foreground);margin-top:.25rem}

/* ===== Tentang ===== */
.about-grid{display:grid;gap:3rem;grid-template-columns:1fr}
@media(min-width:768px){.about-grid{grid-template-columns:1fr 1fr}}
.about-grid h2{font-size:1.875rem;font-weight:700;color:var(--navy)}
.about-grid p{margin-top:1rem;color:var(--muted-foreground);line-height:1.7}
.about-grid strong{color:var(--navy)}
.about-stats{border-radius:1.5rem;background:var(--gradient-hero);color:var(--pf);padding:2.5rem;box-shadow:var(--shadow-elegant)}
.about-stats .label{font-size:.75rem;color:var(--gold);font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.about-stats .nums{margin-top:1.5rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.about-stats .num{font-family:var(--font-display);font-weight:700;color:var(--gold);font-size:1.875rem}
.about-stats .nlbl{font-size:.75rem;color:rgba(246,248,251,.7);margin-top:.25rem}

/* ===== Kontak ===== */
.contact-grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:768px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-list{display:flex;flex-direction:column;gap:1rem}
.contact-item{border:1px solid var(--border);background:var(--card);border-radius:1rem;padding:1.5rem;display:flex;align-items:center;gap:1rem;transition:border-color .2s}
.contact-item:hover{border-color:var(--gold)}
.contact-item.hl{background:var(--gradient-gold);border-color:transparent;color:var(--gold-foreground);box-shadow:var(--shadow-elegant)}
.contact-ic{height:3rem;width:3rem;border-radius:.75rem;display:grid;place-items:center;background:var(--secondary);color:var(--navy);flex-shrink:0}
.contact-ic svg{width:20px;height:20px}
.contact-item.hl .contact-ic{background:var(--navy);color:var(--pf)}
.contact-item .label{font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-foreground)}
.contact-item.hl .label{color:rgba(26,35,71,.7)}
.contact-item .val{margin-top:2px;font-weight:600;color:var(--navy)}
.contact-item.hl .val{color:var(--gold-foreground)}

.form{border-radius:1.5rem;background:var(--card);border:1px solid var(--border);padding:2rem;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:1rem}
.form h2{font-size:1.5rem;font-weight:700;color:var(--navy)}
.form .sub{font-size:.875rem;color:var(--muted-foreground)}
.form label{font-size:.75rem;font-weight:600;color:var(--navy);display:block}
.form input,.form select{margin-top:.25rem;width:100%;border:1px solid var(--border);background:var(--background);border-radius:.5rem;padding:.75rem 1rem;font-size:.875rem;font-family:inherit;color:var(--foreground)}
.form input:focus,.form select:focus{outline:0;box-shadow:0 0 0 2px var(--gold)}
.form button{margin-top:.5rem;width:100%;background:var(--gradient-gold);color:var(--gold-foreground);padding:.875rem;border-radius:9999px;font-weight:600;box-shadow:var(--shadow-card);transition:opacity .2s}
.form button:hover{opacity:.92}

/* utilities */
.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}
[data-lucide]{width:16px;height:16px}

/* ── Full width fix untuk Elementor ── */
.elementor-section.elementor-section-stretched {
    left: 0 !important;
    width: 100% !important;
}

/* Hapus padding default WordPress pada content area */
.site-main,
#main-content,
main {
    padding: 0 !important;
    margin: 0 !important;
}

/* Hapus margin body bawaan browser */
body {
    margin: 0;
    padding: 0;
}

/* Pastikan Elementor page wrapper tidak ada padding */
.elementor-page .elementor {
    padding: 0 !important;
}