:root{
  --bg:#0E0F12; --bg-2:#0A0B0E;
  --surface:#16181D; --surface-2:#1E2128; --surface-3:#252934;
  --line:#2A2E37; --line-soft:#21242C;
  --text:#F4F5F7; --text-2:#A4A9B5; --text-3:#71757F;
  --white:#FFFFFF;
  /* default accent = neutral metallic until a showroom is entered */
  --accent:#9AA2B1; --accent-glow:rgba(154,162,177,.0);
  /* showroom accents */
  --wd:#2E9BFF; --wd-glow:rgba(46,155,255,.35);
  --bayu:#13C27A; --bayu-glow:rgba(19,194,122,.35);
  --cahaya:#FFA42E; --cahaya-glow:rgba(255,164,46,.35);
  --radius:14px; --radius-lg:20px;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{font-family:'Saira','Inter',sans-serif;letter-spacing:-.01em;line-height:1.02}
.data{font-family:'Saira',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.hidden{display:none!important}

/* ---------- top nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(14,15,18,.72);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{display:flex;align-items:center;gap:24px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Saira';font-weight:800;font-size:21px;letter-spacing:-.02em;cursor:pointer}
.brand .mark{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--surface-3));
  box-shadow:0 0 0 1px var(--line),0 6px 18px var(--accent-glow);
  transition:.4s var(--ease);
}
.brand .mark svg{width:17px;height:17px}
.brand .oto{color:var(--white)} .brand .hub{color:var(--accent);transition:color .4s}
.nav-links{display:flex;gap:4px;margin-left:6px}
.nav-links button{
  padding:8px 14px;border-radius:9px;font-size:14px;font-weight:500;color:var(--text-2);
  transition:.2s;
}
.nav-links button:hover{color:var(--text);background:var(--surface)}
.nav-spacer{flex:1}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line);font-size:13.5px;font-weight:600;
  color:var(--text);transition:.2s;
}
.nav-cta:hover{border-color:var(--accent);color:var(--white)}
.nav-cta .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.nav-back{display:none}

/* ---------- hero ---------- */
.hero{position:relative;padding:74px 0 30px;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(900px 420px at 78% -8%,rgba(46,155,255,.10),transparent 60%),
    radial-gradient(760px 380px at 12% 4%,rgba(19,194,122,.08),transparent 60%),
    radial-gradient(680px 380px at 50% 120%,rgba(255,164,46,.07),transparent 60%);
}
.hero-grid{
  position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% -10%,#000 35%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% -10%,#000 35%,transparent 78%);
}
.hero-in{position:relative;z-index:1}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:22px;
  padding:7px 13px;border:1px solid var(--line);border-radius:100px;background:var(--surface);
}
.eyebrow b{color:var(--white)}
.eyebrow .live{width:7px;height:7px;border-radius:50%;background:#13C27A;box-shadow:0 0 10px #13C27A;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:clamp(40px,6.4vw,84px);font-weight:800;max-width:14ch}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--wd),var(--bayu) 52%,var(--cahaya));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.sub{margin-top:22px;max-width:52ch;font-size:18px;color:var(--text-2)}

/* global search */
.searchbar{
  margin-top:34px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px;
  max-width:840px;box-shadow:0 24px 60px -30px #000;
}
.searchbar .field{display:flex;align-items:center;gap:9px;flex:1;min-width:170px;padding:6px 12px;border-radius:11px}
.searchbar .field+.field{border-left:1px solid var(--line)}
.searchbar svg{width:17px;height:17px;color:var(--text-3);flex-shrink:0}
.searchbar input,.searchbar select{
  width:100%;background:none;border:none;color:var(--text);font-family:inherit;font-size:14.5px;
}
.searchbar select{cursor:pointer}
.searchbar select option{background:var(--surface-2)}
.searchbar input::placeholder{color:var(--text-3)}
.searchbar .go{
  background:linear-gradient(135deg,var(--wd),#1a7fd6);color:#fff;font-weight:700;font-size:14.5px;
  padding:13px 22px;border-radius:11px;display:flex;align-items:center;gap:8px;transition:.2s;white-space:nowrap;
}
.searchbar .go:hover{filter:brightness(1.1);transform:translateY(-1px)}
.hero-stats{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap}
.hero-stats .s{display:flex;flex-direction:column}
.hero-stats .n{font-family:'Saira';font-weight:700;font-size:27px;color:var(--white)}
.hero-stats .l{font-size:12.5px;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase;margin-top:2px}

/* ---------- section heading ---------- */
.sec{padding:64px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.sec-head .tag{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.sec-head h2{font-size:clamp(28px,3.6vw,42px);font-weight:700}
.sec-head p{color:var(--text-2);max-width:46ch;margin-top:8px;font-size:15.5px}

/* ---------- showroom bays ---------- */
.bays{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bay{
  --c:var(--accent);--cg:var(--accent-glow);
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;cursor:pointer;transition:.5s var(--ease);isolation:isolate;
}
.bay::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .5s;background:radial-gradient(120% 60% at 50% 0%,var(--cg),transparent 60%);pointer-events:none}
.bay:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 30px 70px -34px #000}
.bay:hover::before{opacity:1}
.bayphoto{position:relative;height:172px;overflow:hidden}
.bayphoto img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;filter:saturate(.95) contrast(1.02);transform:scale(1.02);transition:transform .7s var(--ease)}
.bay:hover .bayphoto img{transform:scale(1.08)}
.bayscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,.15) 0%,rgba(14,15,18,.1) 45%,var(--surface) 100%)}
.bayedge{position:absolute;left:0;top:0;height:4px;width:100%;z-index:3;background:var(--c);box-shadow:0 0 20px var(--cg);transform:scaleX(.34);transform-origin:left;transition:transform .55s var(--ease)}
.bay:hover .bayedge{transform:scaleX(1)}
.bay .num{position:absolute;top:12px;right:16px;z-index:3;font-family:'Saira';font-weight:800;font-size:46px;color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.18);line-height:1;transition:.5s}
.bay:hover .num{-webkit-text-stroke-color:color-mix(in srgb,var(--c) 80%,transparent)}
.bay .logo{position:absolute;top:14px;left:16px;z-index:3;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:rgba(10,11,14,.55);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--c) 35%,var(--line));color:var(--c);box-shadow:0 8px 24px -8px var(--cg);transition:.5s}
.bay:hover .logo{border-color:var(--c);box-shadow:0 12px 30px -8px var(--cg)}
.bay .logo svg{width:26px;height:26px}
.baybody{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.bay h3{font-size:24px;font-weight:700;margin-bottom:5px}
.bay .desc{font-size:13.5px;color:var(--text-2);max-width:32ch;margin-bottom:14px}
.bay .meta{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--text-3);margin-bottom:16px}
.bay .meta b{color:var(--c);font-family:'Saira';font-weight:700}
.bay .enter{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--c);margin-top:auto}
.bay .enter svg{width:16px;height:16px;transition:transform .3s}
.bay:hover .enter svg{transform:translateX(4px)}
.bay.wd{--c:var(--wd);--cg:var(--wd-glow)}
.bay.bayu{--c:var(--bayu);--cg:var(--bayu-glow)}
.bay.cahaya{--c:var(--cahaya);--cg:var(--cahaya-glow)}

/* ---------- filter bar (inventory) ---------- */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.chip{
  padding:9px 15px;border-radius:100px;border:1px solid var(--line);background:var(--surface);
  font-size:13.5px;font-weight:500;color:var(--text-2);transition:.2s;display:inline-flex;align-items:center;gap:7px;
}
.chip:hover{color:var(--text);border-color:var(--text-3)}
.chip.active{background:var(--accent);color:#0b0b0d;border-color:var(--accent);font-weight:600}
.chip .swatch{width:9px;height:9px;border-radius:50%}
.filterbar .spacer{flex:1}
.filterbar select{
  background:var(--surface);border:1px solid var(--line);color:var(--text-2);font-family:inherit;
  font-size:13.5px;padding:9px 13px;border-radius:100px;cursor:pointer;
}
.count{font-size:13.5px;color:var(--text-3)}
.count b{color:var(--text);font-family:'Saira'}

/* ---------- vehicle grid + card ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card{
  --c:var(--accent);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:.3s var(--ease);position:relative;
}
.card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c) 45%,var(--line));box-shadow:0 22px 50px -28px #000}
.card .photo{
  position:relative;aspect-ratio:16/10;overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,var(--surface-3),var(--surface-2));
  display:grid;place-items:center;
}
.card .photo .glyph{width:46%;max-width:150px;opacity:.16;transition:.4s var(--ease)}
.card:hover .photo .glyph{transform:scale(1.07);opacity:.22}
.card .photo .sheen{position:absolute;inset:0;background:radial-gradient(70% 60% at 70% 12%,color-mix(in srgb,var(--c) 18%,transparent),transparent 60%)}
.card .badges{position:absolute;top:12px;left:12px;display:flex;gap:7px;flex-wrap:wrap;z-index:2}
.badge{
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:5px 10px;border-radius:7px;backdrop-filter:blur(6px);
}
.badge.ready{background:rgba(19,194,122,.16);color:#3ee29a;border:1px solid rgba(19,194,122,.3)}
.badge.best{background:rgba(255,164,46,.16);color:#ffbf6b;border:1px solid rgba(255,164,46,.3)}
.badge.sold{background:rgba(255,77,79,.15);color:#ff8385;border:1px solid rgba(255,77,79,.3)}
.card .srtag{
  position:absolute;top:12px;right:12px;z-index:2;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 9px;border-radius:7px;color:var(--c);
  background:rgba(10,11,14,.6);border:1px solid color-mix(in srgb,var(--c) 30%,transparent);backdrop-filter:blur(6px);
}
.card .cmp{
  position:absolute;bottom:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:9px;
  background:rgba(10,11,14,.65);border:1px solid var(--line);display:grid;place-items:center;color:var(--text-2);
  backdrop-filter:blur(6px);transition:.2s;
}
.card .cmp:hover{color:var(--text);border-color:var(--accent)}
.card .cmp.on{background:var(--accent);color:#0b0b0d;border-color:var(--accent)}
.card .cmp svg{width:16px;height:16px}
.card .body{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}
.card .title{font-size:17px;font-weight:600;line-height:1.2;cursor:pointer}
.card .title:hover{color:var(--c)}
.card .price{font-family:'Saira';font-weight:700;font-size:22px;color:var(--white)}
.card .price small{font-size:12px;color:var(--text-3);font-weight:500;font-family:'Inter'}
.card .specs{display:flex;gap:0;border-top:1px solid var(--line-soft);padding-top:12px;margin-top:auto}
.card .specs .sp{flex:1;display:flex;flex-direction:column;gap:2px}
.card .specs .sp+.sp{border-left:1px solid var(--line-soft);padding-left:12px}
.card .specs .sp .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3)}
.card .specs .sp .v{font-family:'Saira';font-weight:600;font-size:14px;color:var(--text)}
.card.sold{opacity:.62}
.card.sold .photo{filter:grayscale(.7)}

/* empty state */
.empty{text-align:center;padding:70px 20px;border:1px dashed var(--line);border-radius:var(--radius-lg);color:var(--text-2)}
.empty svg{width:44px;height:44px;color:var(--text-3);margin:0 auto 16px}
.empty h3{font-size:21px;color:var(--text);margin-bottom:6px}
.empty button{margin-top:18px;padding:10px 18px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);font-weight:600;font-size:14px;transition:.2s}
.empty button:hover{border-color:var(--accent);color:var(--white)}

/* ---------- showroom header ---------- */
.shead{position:relative;padding:54px 0 30px;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.shead::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(800px 360px at 18% -20%,var(--accent-glow),transparent 60%)}
.shead-in{position:relative;z-index:1;display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.shead .avatar{
  width:96px;height:96px;border-radius:22px;display:grid;place-items:center;flex-shrink:0;
  background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));color:var(--accent);
  box-shadow:0 16px 40px -14px var(--accent-glow);
}
.shead .avatar svg{width:48px;height:48px}
.shead .meta{flex:1;min-width:260px}
.shead .crumb{font-size:13px;color:var(--text-3);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.shead .crumb a:hover{color:var(--text)}
.shead h1{font-size:clamp(30px,4.4vw,48px);font-weight:800}
.shead .accent-name{color:var(--accent)}
.shead .sdesc{color:var(--text-2);max-width:60ch;margin-top:12px;font-size:15.5px}
.shead .badges-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.shead .badges-row .item{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-2)}
.shead .badges-row .item svg{width:16px;height:16px;color:var(--accent)}
.shead .badges-row .item b{color:var(--text);font-family:'Saira';font-weight:600}
.shead .wa{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:12px 20px;border-radius:12px;
  background:#1FAE54;color:#fff;font-weight:700;font-size:14.5px;transition:.2s;
}
.shead .wa:hover{filter:brightness(1.08);transform:translateY(-1px)}
.shead .wa svg{width:19px;height:19px}

/* ---------- compare drawer ---------- */
.cmp-bar{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(140%);z-index:80;
  background:var(--surface-2);border:1px solid var(--line);border-radius:16px;
  display:flex;align-items:center;gap:16px;padding:12px 14px 12px 18px;
  box-shadow:0 30px 70px -24px #000;transition:transform .4s var(--ease);max-width:calc(100vw - 32px);
}
.cmp-bar.show{transform:translateX(-50%) translateY(0)}
.cmp-bar .lbl{font-size:13.5px;color:var(--text-2)}
.cmp-bar .lbl b{color:var(--white);font-family:'Saira'}
.cmp-bar .slots{display:flex;gap:8px}
.cmp-bar .slot{width:46px;height:34px;border-radius:8px;border:1px dashed var(--line);background:var(--surface);display:grid;place-items:center;color:var(--text-3);font-size:11px;position:relative}
.cmp-bar .slot.filled{border-style:solid;border-color:var(--accent);color:var(--accent)}
.cmp-bar .slot .x{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:var(--surface-3);border:1px solid var(--line);font-size:11px;display:grid;place-items:center;color:var(--text-2)}
.cmp-bar .btn{padding:11px 18px;border-radius:11px;background:var(--accent);color:#0b0b0d;font-weight:700;font-size:14px;transition:.2s}
.cmp-bar .btn:disabled{opacity:.4;cursor:not-allowed}
.cmp-bar .btn:not(:disabled):hover{filter:brightness(1.1)}
.cmp-bar .clear{font-size:13px;color:var(--text-3)}
.cmp-bar .clear:hover{color:var(--text)}

/* ---------- modal ---------- */
.modal-bg{
  position:fixed;inset:0;z-index:90;background:rgba(6,7,9,.75);backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;padding:34px 18px;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .25s;
}
.modal-bg.open{opacity:1;pointer-events:auto}
.modal{
  width:100%;max-width:980px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;transform:translateY(16px) scale(.98);transition:transform .3s var(--ease);
}
.modal-bg.open .modal{transform:none}
.modal .close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:10px;background:rgba(10,11,14,.6);border:1px solid var(--line);display:grid;place-items:center;color:var(--text-2);z-index:5;transition:.2s}
.modal .close:hover{color:var(--text);border-color:var(--accent)}
.modal .close svg{width:18px;height:18px}

/* detail layout */
.detail{display:grid;grid-template-columns:1.15fr 1fr}
.detail .gallery{position:relative;background:var(--bg-2)}
.detail .gallery .main{aspect-ratio:4/3;position:relative;display:grid;place-items:center;background:linear-gradient(135deg,var(--surface-3),var(--surface));overflow:hidden}
.detail .gallery .main .glyph{width:55%;opacity:.2}
.detail .gallery .main .sheen{position:absolute;inset:0;background:radial-gradient(70% 60% at 65% 18%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 62%)}
.detail .gallery .vidbadge{position:absolute;bottom:14px;left:14px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:7px 12px;border-radius:8px;background:rgba(10,11,14,.7);border:1px solid var(--line);backdrop-filter:blur(6px)}
.detail .gallery .vidbadge svg{width:14px;height:14px;color:var(--accent)}
.detail .gallery .thumbs{display:flex;gap:8px;padding:12px}
.detail .gallery .thumbs .t{flex:1;aspect-ratio:4/3;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--text-3)}
.detail .gallery .thumbs .t.active{border-color:var(--accent)}
.detail .gallery .thumbs .t svg{width:22px;height:22px}
.detail .info{padding:30px 28px;display:flex;flex-direction:column}
.detail .info .srtag{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);padding:5px 11px;border-radius:7px;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);margin-bottom:14px}
.detail .info h2{font-size:27px;font-weight:700;line-height:1.1}
.detail .info .price{font-family:'Saira';font-weight:800;font-size:34px;color:var(--white);margin-top:12px}
.detail .info .price small{font-size:14px;color:var(--text-3);font-weight:500;font-family:'Inter'}
.detail .spectable{margin-top:22px;border:1px solid var(--line-soft);border-radius:12px;overflow:hidden}
.detail .spectable .row{display:flex;justify-content:space-between;padding:12px 15px;font-size:14px}
.detail .spectable .row:nth-child(odd){background:var(--surface-2)}
.detail .spectable .row .k{color:var(--text-3)}
.detail .spectable .row .v{font-family:'Saira';font-weight:600;color:var(--text)}
.detail .note{margin-top:18px;font-size:14px;color:var(--text-2);line-height:1.6;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:12px;padding:15px}
.detail .note .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:6px}
.detail .info .wa{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px;
  background:#1FAE54;color:#fff;font-weight:700;font-size:15.5px;padding:15px;border-radius:13px;transition:.2s;margin-top:22px;
}
.detail .info .wa:hover{filter:brightness(1.08);transform:translateY(-1px)}
.detail .info .wa svg{width:21px;height:21px}

/* recommendations inside modal */
.recos{padding:24px 28px 30px;border-top:1px solid var(--line)}
.recos h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin-bottom:16px}
.recos .rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.reco{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:.25s}
.reco:hover{transform:translateY(-3px);border-color:var(--rc,var(--accent))}
.reco .ph{aspect-ratio:16/10;background:linear-gradient(135deg,var(--surface-3),var(--surface));display:grid;place-items:center}
.reco .ph svg{width:34%;opacity:.18}
.reco .rb{padding:11px 12px}
.reco .rb .rt{font-size:13.5px;font-weight:600;line-height:1.25}
.reco .rb .rsr{font-size:11px;font-weight:600;color:var(--rc,var(--accent));text-transform:uppercase;letter-spacing:.04em;margin-top:5px}
.reco .rb .rp{font-family:'Saira';font-weight:700;font-size:15px;margin-top:4px}

/* compare modal */
.cmptable{padding:26px 28px}
.cmptable h2{font-size:24px;font-weight:700;margin-bottom:4px}
.cmptable .csub{color:var(--text-2);font-size:14px;margin-bottom:22px}
.cmpcols{display:grid;gap:14px}
.cmprow{display:grid;align-items:center;gap:14px}
.cmprow.head .col{padding-bottom:8px}
.cmprow .rk{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3)}
.cmprow .col{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:10px;padding:12px}
.cmprow.head .col{background:none;border:none;padding:0}
.cmpcard .ph{aspect-ratio:16/10;border-radius:10px;background:linear-gradient(135deg,var(--surface-3),var(--surface));display:grid;place-items:center;margin-bottom:10px;position:relative;overflow:hidden}
.cmpcard .ph svg{width:38%;opacity:.18}
.cmpcard .ct{font-size:15px;font-weight:600;line-height:1.2}
.cmpcard .csr{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--cc,var(--accent));margin-top:5px}
.cmprow .v{font-family:'Saira';font-weight:600;font-size:15px}
.cmprow .v.price{font-size:19px;color:var(--white)}
.cmprow .v.best{color:#3ee29a}

/* footer */
.footer{border-top:1px solid var(--line-soft);padding:50px 0 40px;margin-top:30px}
.footer-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.footer .brand{font-size:24px;margin-bottom:12px}
.footer p{color:var(--text-3);font-size:13.5px;max-width:40ch}
.footer .cols{display:flex;gap:54px;flex-wrap:wrap}
.footer .col h5{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:14px}
.footer .col a,.footer .col span{display:block;font-size:14px;color:var(--text-2);margin-bottom:9px;cursor:pointer}
.footer .col a:hover{color:var(--text)}
.footer .legal{margin-top:38px;padding-top:22px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3)}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (max-width:920px){
  .bays{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr}
  .recos .rgrid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .hero{padding:48px 0 20px}
  .searchbar .field+.field{border-left:none;border-top:1px solid var(--line)}
  .recos .rgrid{grid-template-columns:1fr}
  .hero-stats{gap:22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ===== images ===== */
.carimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%;z-index:0;transform:scale(1.01);transition:transform .8s var(--ease)}
.card:hover .photo .carimg{transform:scale(1.08)}
.card .photo .sheen{z-index:1;mix-blend-mode:soft-light;opacity:.7}
.card .badges,.card .srtag,.card .cmp{z-index:3}
.detail .gallery .main .mainimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.detail .gallery .main .sheen{z-index:1;mix-blend-mode:soft-light}
.detail .gallery .thumbs .t{overflow:hidden;padding:0}
.detail .gallery .thumbs .t .thumbimg{width:100%;height:100%;object-fit:cover}
.reco .ph{overflow:hidden;position:relative}
.reco .ph .carimg{object-position:50% 52%}
.reco:hover .ph .carimg{transform:scale(1.09)}
.cmpcard .ph{overflow:hidden;position:relative}
.cmpcard .ph .carimg{object-position:50% 52%}

/* ===== hero two-column + media ===== */
.hero-cols{display:grid;grid-template-columns:1.04fr .96fr;gap:46px;align-items:center}
.hero-copy{min-width:0}
.hero-media{position:relative;z-index:1}
.hero-frame{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 50px 100px -46px #000,0 0 0 1px rgba(255,255,255,.02)}
.hero-frame img{width:100%;display:block;aspect-ratio:16/10.2;object-fit:cover;object-position:50% 44%;transform:scale(1.03);transition:transform .9s var(--ease)}
.hero-frame:hover img{transform:scale(1.06)}
.hero-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(10,11,14,.5));pointer-events:none}
.hero-ring{position:absolute;inset:0;z-index:1;background:radial-gradient(58% 36% at 50% 7%,rgba(255,201,120,.20),transparent 62%);mix-blend-mode:screen;pointer-events:none;animation:ringPulse 5.5s ease-in-out infinite}
@keyframes ringPulse{0%,100%{opacity:.65}50%{opacity:1}}
.hero-plate{position:absolute;left:14px;bottom:14px;z-index:2;font-family:'Saira';font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#ecca8c;padding:7px 13px;border-radius:9px;background:rgba(10,11,14,.5);border:1px solid rgba(236,202,140,.28);backdrop-filter:blur(6px)}
.hero-glow{position:absolute;right:-4%;top:-12%;width:62%;height:130%;z-index:0;background:radial-gradient(closest-side,rgba(255,184,96,.10),transparent 72%);pointer-events:none;animation:floatGlow 9s ease-in-out infinite}
@keyframes floatGlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* ===== cinematic intro ===== */
.hero-copy .eyebrow{opacity:0;animation:upIn .7s var(--ease) .05s both}
.hero-copy h1{opacity:0;animation:upIn .85s var(--ease) .14s both}
.hero-copy .sub{opacity:0;animation:upIn .85s var(--ease) .26s both}
.hero-copy .searchbar{opacity:0;animation:upIn .85s var(--ease) .38s both}
.hero-copy .hero-stats{opacity:0;animation:upIn .85s var(--ease) .5s both}
.hero-media{opacity:0;animation:mediaIn 1.05s var(--ease) .3s both}
@keyframes upIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes mediaIn{from{opacity:0;transform:translateY(28px) scale(.965)}to{opacity:1;transform:none}}
.hero h1 .grad{background-size:200% auto;animation:gradShift 7s ease infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ===== card + bay stagger ===== */
.grid .card{animation:cardIn .6s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}
.bayrise{animation:cardIn .72s var(--ease) both}
.card .photo::after{content:"";position:absolute;top:0;left:-65%;width:55%;height:100%;z-index:2;background:linear-gradient(105deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-18deg);opacity:0;pointer-events:none}
.card:hover .photo::after{animation:sweep .95s ease}
@keyframes sweep{0%{left:-65%;opacity:0}28%{opacity:1}100%{left:125%;opacity:0}}

/* section heading reveal accent */
.sec-head .tag{position:relative;display:inline-block}
.sec-head .tag::after{content:"";position:absolute;left:0;bottom:-7px;height:2px;width:0;background:linear-gradient(90deg,var(--accent),transparent);transition:width .9s var(--ease) .1s}
.reveal.in .sec-head .tag::after,.sec.reveal.in .tag::after{width:46px}

@media (max-width:920px){
  .hero-cols{grid-template-columns:1fr;gap:30px}
  .hero-media{order:-1}
}
@media (prefers-reduced-motion:reduce){
  .hero-copy>*,.hero-media,.grid .card,.bayrise{animation:none!important;opacity:1!important;transform:none!important}
  .hero-glow,.hero-ring,.hero h1 .grad{animation:none!important}
}

.hero-copy .searchbar{max-width:none}
.hero-copy .searchbar .field{min-width:132px}
.hero-copy .searchbar .go{padding:13px 18px}

h1,.sec-head h2,.bay h3,.shead h1,.detail .info h2,.cmptable h2,.hero h1{font-family:'Fraunces','Saira',serif;letter-spacing:-0.01em;font-weight:600}
.brand,.data,.price,.n.data,.card .price,.detail .info .price{font-family:'Saira','Inter',sans-serif !important}
.hero{position:relative;padding:0;min-height:660px;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform:scale(1.06);animation:kenburns 26s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{0%{transform:scale(1.06) translate(0,0)}100%{transform:scale(1.15) translate(-2.4%,-1.6%)}}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,10,13,.97) 0%,rgba(9,10,13,.9) 30%,rgba(9,10,13,.55) 58%,rgba(9,10,13,.18) 100%),linear-gradient(0deg,rgba(9,10,13,.75),transparent 42%)}
.hero-ringglow{position:absolute;right:7%;top:-8%;width:48%;height:72%;z-index:1;background:radial-gradient(closest-side,rgba(255,201,120,.18),transparent 70%);pointer-events:none;animation:ringPulse 6s ease-in-out infinite}
.hero .hero-grid{opacity:.16;z-index:1;-webkit-mask-image:radial-gradient(120% 100% at 0% 0%,#000 30%,transparent 75%);mask-image:radial-gradient(120% 100% at 0% 0%,#000 30%,transparent 75%)}
.hero-in{position:relative;z-index:2;width:100%;padding-top:44px;padding-bottom:44px}
.hero-copy{max-width:680px;min-width:0}
.hero h1{font-size:clamp(42px,6vw,80px);line-height:1.0;max-width:15ch}
.hero p.sub{color:#cdd1da}
.hero .eyebrow{background:rgba(20,17,10,.5);border-color:rgba(236,202,140,.32);color:#e7e2d6}
.hero .eyebrow .live{background:#ecca8c;box-shadow:0 0 10px #ecca8c}
.hero .eyebrow b{color:#fff}
.hero h1 .grad{background:linear-gradient(100deg,#f7d88c 0%,#e7b057 55%,#d79a3c 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 7s ease infinite;font-style:italic}
.hero .searchbar{background:rgba(18,19,24,.72);backdrop-filter:blur(16px);border-color:rgba(255,255,255,.08)}
.hero .searchbar .go{background:linear-gradient(135deg,#f4d488,#cf9a3a);color:#1c1407}
.hero .searchbar .go:hover{filter:brightness(1.06)}
.hero-stats .n{color:#fff}
.hero-copy .eyebrow{opacity:0;animation:upIn .7s var(--ease) .15s both}
.hero-copy h1{opacity:0;animation:upIn .9s var(--ease) .26s both}
.hero-copy .sub{opacity:0;animation:upIn .9s var(--ease) .4s both}
.hero-copy .searchbar{opacity:0;animation:upIn .9s var(--ease) .54s both}
.hero-copy .hero-stats{opacity:0;animation:upIn .9s var(--ease) .68s both}
.hero-bg{opacity:0;animation:bgIn 1.4s var(--ease) both}
@keyframes bgIn{from{opacity:0}to{opacity:1}}
.sec{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.sec.in{opacity:1;transform:none}
.shead-in>*{opacity:0;animation:upIn .7s var(--ease) both}
.shead-in .avatar{animation-delay:.05s}.shead-in .meta{animation-delay:.16s}
.footer{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.footer.in{opacity:1;transform:none}
@media (max-width:560px){.hero{min-height:560px}.hero-scrim{background:linear-gradient(0deg,rgba(9,10,13,.97) 30%,rgba(9,10,13,.6) 75%,rgba(9,10,13,.3))}}
@media (prefers-reduced-motion:reduce){.hero-bg img{animation:none}.sec,.footer{opacity:1;transform:none}.shead-in>*{animation:none;opacity:1}}


/* ===== FULL-BLEED HERO ===== */
.hero{position:relative;padding:0;min-height:668px;display:flex;align-items:center;overflow:hidden}
.hero::before{display:none}
.hero-grid{display:none}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;transition:transform .35s ease-out;will-change:transform}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;transform:scale(1.07);animation:kenburns 28s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{0%{transform:scale(1.07) translate(0,0)}100%{transform:scale(1.15) translate(-2%,-1.6%)}}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--bg) 6%,rgba(14,15,18,.94) 24%,rgba(14,15,18,.6) 45%,rgba(14,15,18,.16) 66%,transparent 84%)}
.hero-vignette{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,15,18,.55) 0%,transparent 20%,transparent 58%,var(--bg) 100%)}
.hero-ringglow{position:absolute;z-index:1;top:-8%;right:13%;width:44%;height:64%;background:radial-gradient(closest-side,rgba(255,198,112,.24),transparent 70%);mix-blend-mode:screen;pointer-events:none;animation:ringPulse 5s ease-in-out infinite}
@keyframes ringPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.hero-sweep{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent 32%,rgba(255,215,150,.12) 48%,transparent 64%);animation:heroSweep 2.6s ease-out .35s 1 both}
@keyframes heroSweep{0%{transform:translateX(-65%);opacity:0}22%{opacity:1}100%{transform:translateX(125%);opacity:0}}
.hero-in{position:relative;z-index:3;width:100%;padding-top:44px;padding-bottom:44px}
.hero-copy{max-width:768px}
.hero-frame,.hero-media,.hero-glow{display:none!important}
.hero h1 .grad{background-image:linear-gradient(100deg,#ffe2a8,#ebb964 44%,#c9842b)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;background-size:200% auto;animation:gradShift 7s ease infinite}
.hero .searchbar .go{background:linear-gradient(135deg,#ecc06a,#c8882f);color:#1c1206}
.hero .searchbar .go:hover{filter:brightness(1.07)}
.hero .eyebrow .live{background:#f0c46a;box-shadow:0 0 10px #f0c46a}
.hero .eyebrow b{color:#f4d690}
@media(max-width:760px){
  .hero{min-height:600px}
  .hero-bg img{object-position:62% 50%}
  .hero-scrim{background:linear-gradient(180deg,rgba(14,15,18,.5),rgba(14,15,18,.84) 52%,var(--bg))}
  .hero-copy{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg img{animation:none}.hero-ringglow{animation:none}.hero-sweep{display:none}
}


.hero h1 .grad{padding-right:.14em;margin-right:-.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ===== HERO SEARCH PANEL — wider, legible, gold, centered ===== */
.hero .searchbar{
  max-width:726px;width:100%;margin-top:32px;
  gap:6px;padding:12px;border-radius:18px;position:relative;flex-wrap:nowrap;
  background:rgba(12,13,16,.60);backdrop-filter:blur(16px);
  border:none;
  box-shadow:0 26px 64px -24px rgba(0,0,0,.85),0 0 50px -14px rgba(240,196,110,.32);
}
.hero .searchbar::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(120deg,#f7dd9a,#caa14e 38%,#c8882f 66%,#f5d78c);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.85;
}
.hero .searchbar .field{flex:1 1 0;min-width:0;justify-content:center;gap:8px;padding:10px 14px}
.hero .searchbar .field:first-child{flex:1.5 1 0}
.hero .searchbar .field+.field{border-left:1px solid rgba(236,196,120,.20)}
.hero .searchbar .field svg{color:#ecca8c;flex:0 0 auto}
.hero .searchbar input,.hero .searchbar select{
  font-size:15px;color:var(--text);text-align:center;text-align-last:center;width:100%;
}
.hero .searchbar input::placeholder{color:rgba(244,245,247,.6)}
.hero .searchbar select option{text-align:left}
.hero .searchbar .go{
  flex:0 0 auto;padding:14px 28px;font-size:15px;font-weight:700;border-radius:13px;
  background:linear-gradient(135deg,#f3d486,#d49a3c);color:#1c1206;
  box-shadow:0 10px 26px -10px rgba(240,196,110,.55);
}
.hero .searchbar .go:hover{filter:brightness(1.06);transform:translateY(-1px)}
@media(max-width:640px){
  .hero .searchbar{flex-direction:column;gap:4px}
  .hero .searchbar .field{justify-content:flex-start;width:100%}
  .hero .searchbar .field+.field{border-left:none;border-top:1px solid rgba(236,196,120,.18)}
  .hero .searchbar input,.hero .searchbar select{text-align:left;text-align-last:left}
  .hero .searchbar .go{width:100%;justify-content:center;margin-top:4px}
}

/* widen dropdowns so labels fit fully */
.hero .searchbar{max-width:768px}
.hero .searchbar .field:first-child{flex:1.7 1 0}
.hero .searchbar .field:nth-child(2),.hero .searchbar .field:nth-child(3){flex:1.18 1 0}
.hero .searchbar .field:nth-child(2) svg,.hero .searchbar .field:nth-child(3) svg{display:none}
.hero .searchbar .field{padding:10px 12px}
.hero .searchbar select{padding-right:2px}
@media(max-width:640px){
  .hero .searchbar .field:nth-child(2) svg,.hero .searchbar .field:nth-child(3) svg{display:inline}
}

/* ===== Penyesuaian untuk versi dinamis (Blade) ===== */

/* .card{display:flex} lebih spesifik daripada [hidden] bawaan browser,
   sehingga kartu tidak ikut tersembunyi saat difilter. Paksa di sini. */
[hidden]{display:none!important}

/* Lapisan link menutupi foto; tombol banding berada di atasnya. */
.card .photo{position:relative}
.card .photo .photo-link{position:absolute;inset:0;z-index:2;display:block}
.card .photo .badges{z-index:3}
.card .photo .srtag{z-index:3}
.card .photo .cmp{position:absolute;bottom:12px;right:12px;z-index:4}
.card .title{display:block}

/* Slot banding memuat <img>, bukan glyph SVG. */
.cmp-bar .slot{overflow:visible}
.cmp-bar .slot.filled img{border-radius:7px}

/* Avatar showroom kini berisi foto gedung. */
.shead .avatar{overflow:hidden;padding:0}

/* Halaman detail memakai .modal sebagai kartu statis, bukan dialog. */
.sec .modal{transform:none!important;opacity:1}

/* ============================================================
   BRAND cekgarasi.com
   Nilai di bawah DI-SAMPLING langsung dari piksel logo,
   bukan hasil kira-kira.
     emas sorot   #EACA8A   (p95 piksel emas)
     emas terang  #C9A35E   (p75)
     emas inti    #AB8546   (median)
     emas dalam   #715424   (p05, bayangan)
     ink          #2E2E2D   (median piksel gelap)
   ============================================================ */
:root{
  --brand-gold-hi:#EACA8A;
  --brand-gold:#C9A35E;
  --brand-gold-core:#AB8546;
  --brand-gold-deep:#715424;
  --brand-ink:#2E2E2D;
}

/* --- Logo di navbar --- */
.brand{padding:2px 0}
.brand img{height:34px;width:auto;display:block}
.brand .mark,.brand .oto,.brand .hub{display:none}
@media(max-width:520px){ .brand img{height:28px} }

/* --- Logo di footer --- */
.footer-logo{height:40px;width:auto;margin-bottom:14px}

/* --- Selaraskan emas situs dengan emas logo --- */
.hero h1 .grad{
  background-image:linear-gradient(100deg,var(--brand-gold-hi),var(--brand-gold) 44%,var(--brand-gold-deep))!important;
}
.hero .searchbar::before{
  background:linear-gradient(120deg,var(--brand-gold-hi),var(--brand-gold) 38%,var(--brand-gold-deep) 66%,var(--brand-gold-hi));
}
.hero .searchbar .go{
  background:linear-gradient(135deg,var(--brand-gold-hi),var(--brand-gold-core));
  box-shadow:0 10px 26px -10px rgba(201,163,94,.55);
}
.hero .eyebrow .live{background:var(--brand-gold);box-shadow:0 0 10px var(--brand-gold)}
.hero .eyebrow b{color:var(--brand-gold-hi)}
.hero-ringglow{background:radial-gradient(closest-side,rgba(234,202,138,.24),transparent 70%)}
.hero-sweep{background:linear-gradient(100deg,transparent 32%,rgba(234,202,138,.12) 48%,transparent 64%)}
.hero .searchbar{box-shadow:0 26px 64px -24px rgba(0,0,0,.85),0 0 50px -14px rgba(201,163,94,.32)}