/*
Theme Name: VIP Trans Fast
Theme URI: https://viptransbanyuwangi.com
Author: VIP Trans
Description: Homepage sewa mobil, rental Hiace & paket wisata Banyuwangi. Dibangun tanpa page builder untuk kecepatan maksimal — satu file CSS, tanpa font eksternal, gambar lazy-load.
Version: 1.0
Text Domain: viptrans-fast
*/

:root{
  --navy:#122622; --navy-deep:#0b1a17; --paper:#f7f4ec; --paper-soft:#eee7d6;
  --amber:#e08d3c; --amber-dark:#b96f27; --teal:#2f7d6b;
  --line: rgba(18,38,34,.13); --line-light: rgba(247,244,236,.18); --radius:8px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  /* System font stack: renders instantly, zero network requests. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--navy); background:var(--paper); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:800; line-height:1.18; color:var(--navy); letter-spacing:-.01em;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
section{padding:88px 0;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:8px; font-weight:600; font-size:15px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .2s ease, color .2s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--amber); color:var(--navy-deep);}
.btn-primary:hover{background:var(--amber-dark); color:#fff;}
.btn-outline{border-color:var(--navy); color:var(--navy);}
.btn-outline:hover{background:var(--navy); color:var(--paper);}
.btn-outline-light{border-color:var(--line-light); color:var(--paper);}
.btn-outline-light:hover{background:var(--paper); color:var(--navy-deep);}
.btn-wa{background:#25D366; color:#fff;}
.btn-wa:hover{background:#1ea952;}
.btn-sm{padding:10px 18px; font-size:13.5px;}

header{position:sticky; top:0; z-index:50; background:rgba(247,244,236,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.logo{font-size:21px; font-weight:800;}
.logo span{color:var(--amber);}
nav.main-nav ul{display:flex; gap:28px;}
nav.main-nav a{font-size:14.5px; font-weight:600; padding:6px 0; border-bottom:2px solid transparent; transition:border-color .2s ease, color .2s ease;}
nav.main-nav a:hover{border-color:var(--amber); color:var(--amber-dark);}
.nav-right{display:flex; align-items:center; gap:16px;}
.menu-toggle{display:none; background:none; border:none; cursor:pointer;}
.menu-toggle svg{width:26px; height:26px;}

.hero{padding:72px 0 68px; background:linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%);}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;}
.hero h1{font-size:clamp(32px, 4vw, 50px); max-width:16ch; margin-bottom:18px;}
.hero p{font-size:16px; color:#3d4d47; max-width:48ch; margin-bottom:28px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-art{border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:linear-gradient(135deg,#1e5c50,#0b1a17);}
.hero-art img{width:100%; height:100%; object-fit:cover;}
.hero-stats{display:flex; gap:32px; margin-top:44px; padding-top:26px; border-top:1px solid var(--line); flex-wrap:wrap;}
.hero-stats div strong{display:block; font-size:24px; font-weight:800;}
.hero-stats div span{font-size:12.5px; color:#5c6b65;}

.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:40px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(25px, 2.6vw, 34px);}
.section-head p{color:#4a5852; max-width:46ch; font-size:14.5px;}

.feature-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.feature-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; display:flex; flex-direction:column; gap:12px;}
.feature-card .icon{width:42px; height:42px; border-radius:50%; background:var(--paper-soft); display:flex; align-items:center; justify-content:center;}
.feature-card .icon svg{width:20px; height:20px; stroke:var(--teal);}
.feature-card h3{font-size:16.5px;}
.feature-card p{font-size:13.5px; color:#4a5852;}

.fleet-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
.fleet-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s ease, box-shadow .2s ease;}
.fleet-card:hover{border-color:var(--amber); box-shadow:0 12px 28px rgba(18,38,34,.07);}
.fleet-thumb{aspect-ratio:16/10; background:var(--paper-soft); display:flex; align-items:center; justify-content:center; padding:14px;}
.fleet-thumb img{max-height:100%; object-fit:contain;}
.fleet-body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.fleet-body h3{font-size:18px; text-transform:capitalize;}
.fleet-body ul{font-size:13px; color:#5c6b65;}
.fleet-body li{margin-bottom:2px;}
.fleet-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:8px;}
.fleet-foot .price{font-weight:700; color:var(--amber-dark); font-size:15px;}

.stats-band{background:var(--navy-deep); color:var(--paper);}
.stats-band .wrap{display:grid; grid-template-columns:1.1fr repeat(4, 1fr); gap:26px; align-items:center;}
.stats-band h2{color:var(--paper); font-size:24px; max-width:11ch;}
.stat-item strong{display:block; font-size:34px; font-weight:800; color:var(--amber);}
.stat-item span{font-size:12.5px; color:#b9c7c1;}

.tabs{display:flex; gap:10px; margin-bottom:32px; flex-wrap:wrap;}
.tab-btn{padding:10px 20px; border-radius:999px; border:1px solid var(--line); background:#fff; font-weight:600; font-size:14px; cursor:pointer;}
.tab-btn.active{background:var(--navy); color:var(--paper); border-color:var(--navy);}
.tab-panel{display:none;}
.tab-panel.active{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.tour-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;}
.tour-thumb{aspect-ratio:4/3; background:linear-gradient(135deg,#2f7d6b,#122622);}
.tour-thumb img{width:100%; height:100%; object-fit:cover;}
.tour-body{padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.tour-body .price{font-weight:800; color:var(--amber-dark); font-size:17px;}
.tour-body ul{font-size:13px; color:#4a5852;}
.tour-body li{margin-bottom:3px;}
.tour-body .note{font-size:11.5px; color:#8a978f; margin-top:4px;}

.testi-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:22px;}
.testi-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:14px;}
.testi-card p{font-size:14.5px; color:#354640; font-style:italic;}
.testi-who{display:flex; align-items:center; gap:12px;}
.testi-avatar{width:42px; height:42px; border-radius:50%; overflow:hidden; background:var(--paper-soft);}
.testi-avatar img{width:100%;height:100%;object-fit:cover;}
.testi-who strong{display:block; font-size:14px;}
.testi-who span{font-size:12.5px; color:#5c6b65;}

.contact-wrap{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:stretch;}
.contact-info{background:var(--navy); color:var(--paper); border-radius:16px; padding:40px; display:flex; flex-direction:column; gap:18px;}
.contact-info h2{color:var(--paper); font-size:26px;}
.contact-row{display:flex; gap:12px; font-size:14.5px; color:#d3e0da;}
.contact-row svg{width:18px; height:18px; stroke:var(--amber); flex-shrink:0; margin-top:2px;}
.contact-map{border-radius:16px; overflow:hidden; min-height:320px;}
.contact-map iframe{width:100%; height:100%; min-height:320px; border:0;}

footer{background:var(--navy-deep); color:#b9c7c1; padding:64px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px; padding-bottom:40px; border-bottom:1px solid var(--line-light);}
.footer-grid .logo{color:var(--paper); margin-bottom:12px;}
.footer-grid p{font-size:13.5px; max-width:32ch; margin-bottom:16px;}
.socials{display:flex; gap:12px;}
.socials a{width:36px; height:36px; border-radius:50%; border:1px solid var(--line-light); display:flex; align-items:center; justify-content:center;}
.socials a svg{width:16px; height:16px; stroke:var(--paper);}
.footer-col h4{color:var(--paper); font-size:13.5px; font-weight:700; margin-bottom:14px;}
.footer-col li{margin-bottom:9px; font-size:13.5px;}
.footer-bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:12.5px; flex-wrap:wrap; gap:12px;}

.float-btns{position:fixed; bottom:26px; right:26px; z-index:60; display:flex; flex-direction:column; gap:12px;}
.float-btns a{width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.22);}
.float-btns a svg{width:24px; height:24px;}
.fb-wa{background:#25D366;} .fb-wa svg{fill:#fff;}
.fb-tel{background:var(--navy);} .fb-tel svg{stroke:#fff; fill:none;}

@media (max-width: 980px){
  .hero .wrap{grid-template-columns:1fr;} .hero-art{order:-1;}
  .feature-grid, .fleet-grid{grid-template-columns:repeat(2,1fr);}
  .tab-panel.active{grid-template-columns:1fr 1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .stats-band .wrap{grid-template-columns:1fr 1fr; row-gap:24px;}
  .contact-wrap{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:30px;}
}
@media (max-width: 680px){
  nav.main-nav{display:none;} .menu-toggle{display:block;}
  section{padding:56px 0;}
  .feature-grid, .fleet-grid, .tab-panel.active, .footer-grid{grid-template-columns:1fr;}
  .stats-band .wrap{grid-template-columns:1fr;}
  .contact-info{padding:28px;}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .btn{transition:none;} }