@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root{--ink:#171717;--muted:#77756f;--gold:#c8a96b;--paper:#f7f6f2;--line:#e4e0d7;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:15px;line-height:1.65}a{color:inherit;text-decoration:none}button,input{font:inherit}.site-header{height:82px;padding:0 6.5%;display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid #efede8}.brand{display:flex;align-items:center;gap:11px;min-width:max-content}.brand-mark{height:42px;width:42px;display:grid;place-items:center;background:var(--ink);color:var(--gold);font-family:'Playfair Display',serif;font-size:17px;border:1px solid var(--gold)}.brand-copy{display:flex;flex-direction:column;line-height:1.15;letter-spacing:2px}.brand-copy strong{font-size:14px}.brand-copy small{font-size:9px;letter-spacing:3.1px;margin-top:5px;color:#777}.nav{display:flex;align-items:center;gap:27px;font-size:12px}.nav>a:not(.nav-cta){color:#4e4d49}.nav>a:hover{color:#9a7736}.nav-cta{background:var(--ink);color:white;padding:12px 18px}.menu-toggle{display:none;background:none;border:0;font-size:25px}.hero{min-height:620px;position:relative;display:flex;align-items:center;padding:85px 9%;color:white;background:#171717 url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=2000&q=85') center 58%/cover no-repeat}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.91) 0%,rgba(10,10,10,.75) 43%,rgba(10,10,10,.15) 100%),linear-gradient(0deg,rgba(10,10,10,.5),transparent 30%)}.hero-content{position:relative;max-width:650px}.eyebrow,.section-kicker{font-size:10px;font-weight:700;letter-spacing:2.8px;color:var(--gold)}.eyebrow{display:flex;align-items:center;gap:10px}.eyebrow span{width:25px;height:1px;background:var(--gold)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(45px,6.4vw,79px);line-height:1.08;letter-spacing:-2.7px;margin:22px 0}h1 em,h2 em{font-family:'Playfair Display',serif;font-weight:500;color:var(--gold)}.hero-lead{max-width:480px;color:#ddd;font-size:15px;line-height:1.9}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:14px 20px;font-size:12px;font-weight:700;transition:.2s;border:1px solid transparent}.button:hover{transform:translateY(-2px)}.button-gold{background:var(--gold);color:#171717}.button-outline{border-color:#ffffff70;color:white}.button-dark{background:var(--ink);color:white;margin-top:15px}.hero-note{display:flex;align-items:center;gap:12px;margin-top:62px;color:#c9c7c2;font-size:9px;letter-spacing:2px}.note-line{width:35px;height:1px;background:var(--gold)}.hero-bottom{position:absolute;bottom:23px;left:9%;right:9%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.8px;color:#d0cec9}.section-wrap{padding:100px 9%}.intro{background:#fff}.intro-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;align-items:start;margin-top:18px}.intro h2,.section-heading h2,.about-copy h2,.contact-card h2{font-size:clamp(32px,4vw,48px);line-height:1.2;letter-spacing:-1.4px;margin:0}.intro h2 em,.section-heading h2 em,.about-copy h2 em,.contact-card h2 em{color:#b28e4b}.intro-copy{max-width:500px;color:#6e6b65;font-size:14px;line-height:1.9}.text-link{display:inline-flex;gap:22px;align-items:center;color:#171717;border-bottom:1px solid var(--gold);padding-bottom:7px;font-size:12px;font-weight:700;margin-top:8px}.feature-strip{margin-top:65px;padding-top:28px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.feature-strip>div{display:grid;grid-template-columns:36px 1fr;column-gap:8px}.feature-number{grid-row:span 2;color:#b28e4b;font-family:'Playfair Display',serif;font-size:19px}.feature-strip strong{font-size:13px}.feature-strip small{color:#8b8880;font-size:11px}.fleet-section{background:#f0eee8}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:38px}.section-heading h2{margin-top:12px}.section-heading>p{max-width:360px;margin:0;color:#77746d;font-size:13px;line-height:1.85}.fleet-tools{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px;flex-wrap:wrap}.search-box{display:flex;align-items:center;gap:9px;background:white;border:1px solid var(--line);padding:10px 14px;min-width:235px}.search-box span{font-size:23px;color:#a78a50}.search-box input{border:0;outline:0;width:100%;background:transparent;font-size:12px}.filter-buttons{display:flex;gap:6px;flex-wrap:wrap}.filter-btn{border:1px solid #d9d5cb;background:transparent;padding:9px 13px;font-size:10px;color:#67645e;cursor:pointer}.filter-btn.active,.filter-btn:hover{background:#1b1b1b;color:white;border-color:#1b1b1b}.fleet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.car-card{background:#fff;border:1px solid #e7e3db;min-width:0;transition:transform .2s,box-shadow .2s}.car-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px #0000000b}.car-image{height:175px;position:relative;background:linear-gradient(135deg,#e5e1d8,#f9f8f4);display:flex;align-items:center;justify-content:center;overflow:hidden}.car-image img{width:100%;height:100%;object-fit:cover;display:block}.car-image .car-initial{font-family:'Playfair Display',serif;font-size:42px;color:#b9b1a1;opacity:.8}.car-category{position:absolute;top:12px;left:12px;background:#ffffffed;padding:5px 9px;font-size:9px;letter-spacing:1px;text-transform:uppercase}.car-content{padding:19px}.car-content h3{font-size:17px;margin:0 0 9px;letter-spacing:-.3px}.car-meta{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 15px}.car-meta span{font-size:10px;color:#77746d;background:#f5f3ee;padding:4px 7px}.rate-label{font-size:9px;letter-spacing:1.4px;color:#9b7b3f;font-weight:700;margin-bottom:9px}.rate-list{display:grid;gap:7px;margin-bottom:17px}.rate-line{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#69665f}.rate-line span:last-child{color:#272622;font-weight:600;text-align:right}.rate-line .coming{color:#a07d3c!important}.car-button{display:flex;justify-content:center;align-items:center;width:100%;background:#171717;color:white;padding:11px 8px;font-size:11px;font-weight:600}.car-button:hover{background:#b28e4b;color:#171717}.empty-state{grid-column:1/-1;padding:35px;text-align:center;color:#777}.fleet-footnote{font-size:11px;color:#88847b;margin-top:22px}.services-section{background:#fff}.service-list{margin-top:40px;border-top:1px solid var(--line)}.service-row{display:grid;grid-template-columns:45px minmax(0,1fr) auto;gap:20px;align-items:center;padding:23px 0;border-bottom:1px solid var(--line)}.service-index{font-family:'Playfair Display',serif;color:#b28e4b;font-size:20px}.service-row h3{font-size:16px;margin:0 0 4px}.service-row p{font-size:12px;color:#817e76;margin:0}.service-price,.service-ask{font-size:11px;color:#9b7b3f;font-weight:700;white-space:nowrap}.service-ask{border-bottom:1px solid var(--gold);padding-bottom:4px}.about-section{display:grid;grid-template-columns:1fr 1fr;min-height:480px;background:#e9e5dc}.about-art{background:linear-gradient(135deg,#171717,#292821);color:var(--gold);display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:430px;position:relative;overflow:hidden}.about-art:before,.about-art:after{content:"";position:absolute;width:330px;height:330px;border:1px solid #c8a96b35;border-radius:50%}.about-art:after{width:430px;height:430px}.about-monogram{font-family:'Playfair Display',serif;font-size:110px;line-height:1;z-index:1;letter-spacing:-8px}.about-monogram span{font-style:italic;font-size:75px}.about-art-caption{z-index:1;font-size:9px;letter-spacing:4px;margin-top:25px}.about-copy{padding:75px 11%;align-self:center}.about-copy h2{margin:15px 0 24px}.about-copy p{font-size:13px;color:#6d6a62;line-height:1.9}.contact-section{display:grid;grid-template-columns:1.25fr .75fr;gap:8%;align-items:center}.contact-card{background:#1b1b19;color:white;padding:45px}.contact-card h2{margin:15px 0 18px}.contact-card p{font-size:13px;color:#c3c0b7;line-height:1.9;max-width:430px}.contact-card .button{margin-top:12px}.contact-details{display:grid;gap:25px}.contact-details>div{border-bottom:1px solid var(--line);padding-bottom:18px;display:grid;gap:4px}.contact-details span{font-size:9px;letter-spacing:2px;color:#9b7b3f}.contact-details strong{font-size:16px}.contact-details a,.contact-details small{font-size:11px;color:#77746d}.footer{padding:30px 9%;background:#111;color:#b7b4ad;display:flex;align-items:center;justify-content:space-between;gap:25px;flex-wrap:wrap}.footer-brand .brand-mark{background:transparent}.footer-brand .brand-copy strong{color:white}.footer p,.footer>span{font-size:10px;margin:0;color:#aaa79f}.whatsapp-float{position:fixed;z-index:40;bottom:22px;right:22px;display:flex;align-items:center;gap:9px;padding:12px 17px;background:#168b54;color:white;border-radius:50px;box-shadow:0 6px 25px #0003;font-size:11px;font-weight:700}.wa-icon{font-size:17px}
@media(max-width:1000px){.nav{gap:15px}.section-wrap{padding:80px 6%}.hero{padding-left:7%;padding-right:7%}.hero-bottom{left:7%;right:7%}.fleet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-copy{padding:60px 8%}.contact-section{gap:5%}}
@media(max-width:760px){.site-header{height:70px;padding:0 5%}.menu-toggle{display:block}.nav{display:none;position:absolute;left:0;right:0;top:70px;background:#fff;padding:18px 5% 25px;box-shadow:0 12px 20px #0001;align-items:stretch;gap:0;flex-direction:column}.nav.open{display:flex}.nav>a:not(.nav-cta){padding:12px 0;border-bottom:1px solid #eee}.nav-cta{text-align:center;margin-top:12px}.hero{min-height:590px;padding:70px 6%;background-position:60% center}.hero-shade{background:linear-gradient(90deg,#0b0b0bf0,#0b0b0ba8 70%,#0b0b0b66)}h1{letter-spacing:-1.8px}.hero-bottom{left:6%;right:6%;font-size:8px;gap:10px}.hero-bottom span:last-child{text-align:right}.intro-grid,.about-section,.contact-section{grid-template-columns:1fr}.intro-grid{gap:20px}.feature-strip{gap:15px}.feature-strip>div{grid-template-columns:25px 1fr}.feature-strip strong{font-size:11px}.feature-strip small{font-size:10px}.section-heading{align-items:start;flex-direction:column;gap:15px}.section-heading>p{max-width:520px}.fleet-tools{align-items:stretch;flex-direction:column}.search-box{width:100%}.filter-buttons{gap:5px}.filter-btn{flex:1;padding:9px 7px}.fleet-grid{gap:12px}.car-image{height:145px}.car-content{padding:14px}.car-content h3{font-size:15px}.car-meta span{font-size:9px}.rate-line{font-size:9px}.service-row{grid-template-columns:28px minmax(0,1fr);gap:12px}.service-price,.service-ask{grid-column:2;justify-self:start}.about-art{min-height:300px}.about-copy{padding:55px 7%}.contact-card{padding:32px 25px}.footer{padding:28px 6%;align-items:flex-start;flex-direction:column;gap:15px}.whatsapp-float{right:13px;bottom:13px;padding:12px 15px}}
@media(max-width:430px){.fleet-grid{grid-template-columns:1fr}.car-image{height:190px}.feature-strip{grid-template-columns:1fr;gap:18px}.feature-strip>div{grid-template-columns:36px 1fr}.hero-actions{align-items:stretch;flex-direction:column;max-width:290px}.button{width:100%}.hero-note{margin-top:42px}.filter-btn{font-size:9px}.contact-details{margin-top:15px}}


/* ===== RESPONSIVE MODERN UPDATE ===== */
:root{--gold:#c8a96b;--paper:#f7f7f5;--line:#e7e5df}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.site-header{padding-inline:clamp(16px,5vw,76px);box-shadow:0 4px 24px rgba(0,0,0,.035)}
.brand-mark{border-radius:10px}
.nav-cta,.button,.filter-btn,.car-button{border-radius:8px}
.button{min-height:46px}
.hero{isolation:isolate;background-position:center 58%;min-height:640px}
.hero-shade{z-index:-1;background:linear-gradient(90deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.72) 52%,rgba(8,8,8,.22) 100%)}
.hero-content{width:min(100%,680px)}
.hero-lead{font-size:clamp(14px,1.5vw,16px)}
.section-wrap{padding-block:clamp(56px,8vw,100px)}
.fleet-section{background:#f3f2ee}
.search-box{border-radius:10px;min-height:46px}
.filter-btn{border-radius:999px}
.fleet-grid{gap:clamp(14px,2vw,22px)}
.car-card{border-radius:14px;overflow:hidden;box-shadow:0 3px 16px rgba(22,20,16,.035)}
.car-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(22,20,16,.09)}
/* Foto kendaraan menggunakan rasio persegi 1:1 di semua ukuran layar. */
.car-image{height:auto;aspect-ratio:1/1;width:100%;background:linear-gradient(135deg,#e8e5dd,#f8f7f3)}
.car-image img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;object-position:center}
.car-image .car-initial{font-size:clamp(28px,4vw,46px);text-align:center;padding:14px}
.car-category{border-radius:999px;backdrop-filter:blur(8px)}
.car-content{padding:clamp(15px,2vw,22px)}
.car-content h3{font-size:clamp(16px,1.5vw,19px)}
.car-meta{gap:6px}
.car-meta span{border-radius:5px}
.rate-list{gap:0;border-top:1px solid #f0eee8;margin-bottom:17px}
.rate-line{padding:9px 0;border-bottom:1px solid #f0eee8;align-items:flex-start;line-height:1.45}
.rate-line span:first-child{max-width:68%}
.rate-line span:last-child{max-width:48%;overflow-wrap:anywhere}
.car-button{min-height:44px;text-align:center}
.service-row{gap:clamp(12px,2vw,22px)}
.service-index{width:30px;height:30px;display:grid;place-items:center;background:#f5f0e5;border-radius:50%;font-size:16px}
.contact-card{border-radius:16px}
.whatsapp-float{border-radius:999px;min-height:48px;box-shadow:0 8px 28px rgba(0,0,0,.2)}
.footer-brand .brand-mark{border-radius:10px}
:focus-visible{outline:3px solid #c8a96b;outline-offset:3px}
@media(max-width:760px){
  .site-header{height:68px;padding-inline:18px}
  .nav{top:68px;padding:14px 18px 20px;border-top:1px solid #f1efe9}
  .hero{min-height:590px;padding:64px 22px 82px;background-position:58% center}
  h1{font-size:clamp(42px,11vw,62px);letter-spacing:-1.7px}
  .hero-bottom{left:22px;right:22px;bottom:18px;letter-spacing:1px}
  .section-wrap{padding:58px 20px}
  .intro-grid{gap:22px}
  .feature-strip{margin-top:38px;padding-top:22px}
  .fleet-tools{gap:14px}
  .search-box{min-width:0}
  .filter-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .filter-btn{min-height:40px;padding:8px 6px}
  .fleet-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .car-content{padding:13px}
  .car-meta{gap:5px}
  .car-meta span{font-size:9px;padding:4px 5px}
  .rate-line{font-size:10px;gap:7px}
  .rate-line span:first-child{max-width:65%}
  .rate-line span:last-child{max-width:45%}
  .car-button{font-size:10px;padding:10px 7px}
  .contact-card{padding:30px 22px}
  .whatsapp-float{right:12px;bottom:12px;padding:11px 14px}
}
@media(max-width:420px){
  .fleet-grid{grid-template-columns:1fr}
  .car-card{display:grid;grid-template-columns:minmax(0, .92fr) minmax(0,1fr);align-items:stretch}
  .car-image{height:100%;min-height:100%;aspect-ratio:auto;align-self:stretch}
  .car-image img{position:absolute;inset:0}
  .car-category{top:8px;left:8px;font-size:8px;padding:4px 7px}
  .car-content{padding:13px 12px}
  .car-content h3{font-size:16px;line-height:1.3}
  .car-meta{display:grid;grid-template-columns:1fr 1fr}
  .car-meta span{font-size:9px}
  .rate-label{font-size:8px;letter-spacing:1px}
  .rate-line{font-size:9px;padding:7px 0}
  .car-button{font-size:9px;line-height:1.4}
}
@media(max-width:350px){
  .fleet-grid{grid-template-columns:1fr}
  .car-card{display:block}
  .car-image{aspect-ratio:1/1;height:auto}
  .car-image img{position:static}
  .car-content{padding:15px}
}


/* ===== BALAKOSA NAVY THEME + SQUARE PHOTO FIX ===== */
:root{--ink:#102a43;--muted:#627d98;--gold:#c8a96b;--paper:#f5f8fb;--line:#d9e2ec;--white:#fff}
body{background:var(--paper);color:#102a43}
.site-header{background:#fff;border-bottom-color:#d9e2ec}
.brand-copy strong{color:#102a43}
.brand-copy small{color:#627d98}
.nav>a:not(.nav-cta){color:#486581}
.nav>a:hover{color:#b28e4b}
.nav-cta,.button-dark,.car-button{background:#102a43;color:#fff}
.nav-cta:hover,.car-button:hover{background:#1d4e89;color:#fff}
.hero{background-color:#102a43}
.hero-shade{background:linear-gradient(90deg,rgba(8,27,45,.94) 0%,rgba(16,42,67,.79) 50%,rgba(16,42,67,.24) 100%),linear-gradient(0deg,rgba(8,27,45,.38),transparent 40%)}
.intro,.services-section{background:#fff}
.fleet-section{background:#edf3f8}
.fleet-tools .search-box{border-color:#d9e2ec}
.filter-btn{border-color:#cbd5e1;color:#486581}
.filter-btn.active,.filter-btn:hover{background:#102a43;border-color:#102a43;color:#fff}
.car-card{border-color:#dbe5ee}
.car-image{background:#edf2f7;aspect-ratio:1/1;height:auto}
.car-image img{width:100%;height:100%;aspect-ratio:1/1;object-fit:contain;object-position:center;display:block;padding:5px}
.car-image .car-initial{color:#627d98}
.car-meta span{background:#eef3f8;color:#486581}
.rate-line span:last-child{color:#102a43}
.about-section{background:#e8eff6}
.about-art{background:linear-gradient(135deg,#0b1f33,#163d5c)}
.about-art:before,.about-art:after{border-color:#c8a96b35}
.about-art-lines{width:46%;height:2px;background:#c8a96b;position:relative}
.about-art-lines:before,.about-art-lines:after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:72%;height:1px;background:#c8a96b55}
.about-art-lines:before{top:-22px}.about-art-lines:after{top:22px}
.contact-card{background:#102a43}
.service-index{color:#b28e4b}
.whatsapp-float{background:#168b54}
.footer{background:#0b1f33}
.footer-brand .brand-copy strong{color:#fff}
.footer-brand .brand-copy small{color:#b9c9d8}
.text-link{color:#102a43}
@media(max-width:760px){
  .car-image{height:auto;aspect-ratio:1/1;min-height:0}
  .car-image img{position:static;width:100%;height:100%;aspect-ratio:1/1;object-fit:contain;padding:5px}
}
@media(max-width:420px){
  .fleet-grid{grid-template-columns:1fr}
  .car-card{display:block}
  .car-image{height:auto;aspect-ratio:1/1;min-height:0}
  .car-image img{position:static;width:100%;height:100%;aspect-ratio:1/1;object-fit:contain;padding:5px}
  .car-content{padding:15px}
}


/* ===== TUGU JOGJA HERO IMAGE (LOCAL ASSET) ===== */
.hero{
  background-color:#082746;
  background-image:url('../images/tugu-jogja-hero.jpg');
  background-size:auto 100%;
  background-position:right center;
  background-repeat:no-repeat;
  min-height:620px;
}
.hero-shade{
  z-index:0;
  background:linear-gradient(90deg,rgba(5,31,57,.98) 0%,rgba(8,39,70,.91) 34%,rgba(8,39,70,.56) 57%,rgba(8,39,70,.06) 100%),
             linear-gradient(0deg,rgba(5,31,57,.40),transparent 36%);
}
.hero-content{z-index:1;max-width:700px}
.hero-bottom{z-index:1}
.eyebrow{font-size:clamp(10px,1.1vw,13px);letter-spacing:3px}
h1{font-size:clamp(44px,6.1vw,82px);line-height:1.03;letter-spacing:-2px}
h1 em{color:#e5bd69}
.button-gold{background:#e5bd69;color:#082746;border:1px solid #e5bd69}
.button-gold:hover{background:#f1d18b;color:#082746}
@media(max-width:760px){
  .hero{
    min-height:650px;
    padding:68px 22px 92px;
    background-size:auto 72%;
    background-position:right bottom;
  }
  .hero-shade{
    background:linear-gradient(180deg,rgba(5,31,57,.98) 0%,rgba(5,31,57,.94) 43%,rgba(5,31,57,.50) 72%,rgba(5,31,57,.25) 100%);
  }
  .hero-content{max-width:100%}
  h1{font-size:clamp(42px,10vw,62px);letter-spacing:-1.4px}
  .hero-lead{max-width:520px;color:#f1f5f9}
}