/* Abang Recond: tema gelap + emas. Muatkan SELEPAS ar-theme.css, hanya di index.html. Fon dimuat melalui <link> di <head>.
   Tiada logik atau struktur diubah, hanya warna, fon dan rupa. */

:root{
  color-scheme:dark;
  --gold:#D4AF37; --gold-l:#F3E5AB; --gold-d:#AA7C11;
  --sans:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --serif:'Cinzel','Times New Roman',serif;
  /* pembolehubah sedia ada dipetakan semula */
  --steel:#F5F5F7;          /* teks utama (sebelum ini hitam) */
  --paper:#0A0A0C;          /* latar halaman */
  --card:#141419;           /* kad dan panel */
  --cargo:#D4AF37;          /* aksen (sebelum ini merah) */
  --cargo-soft:#E6C65A;
  --customs:#148A42;        /* hijau: available, butang WhatsApp */
  --hold:#B45309;           /* booked */
  --ink-soft:#A1A1A6;
  --line:rgba(255,255,255,.1);
  --shadow:0 16px 40px rgba(0,0,0,.5);
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --radius:16px; --radius-sm:12px;
  --dark:#050507; --dark-card:#141419;
}
::selection{background:var(--gold);color:#0A0A0C}
body{background:var(--paper);color:var(--steel)}
select,input,textarea{color-scheme:dark}
input::placeholder{color:#76767c}

/* ===== fon ===== */
body,body *:not(svg):not(svg *){font-family:var(--sans)!important}
body :is(h1,h2,.brand,.brand-mark,.footer-brand,.process-no){font-family:var(--serif)!important}
h1,h2,.hero h1,.section-head h2,.proof-head h2,.conversion-box h2{letter-spacing:.01em!important}
.section-head h2,.proof-head h2{color:var(--gold)}

/* ===== stock di paling atas ===== */
main > #stock:first-child{padding-top:40px}

/* ===== header ===== */
header{background:rgba(10,10,12,.92);border-bottom:1px solid rgba(212,175,55,.2);box-shadow:none}
.brand{color:var(--gold);letter-spacing:1px}
.brand-mark{background:transparent;border:1.5px solid var(--gold);color:var(--gold)}
.quicklinks a:hover{color:#0A0A0C}
.staff-toggle.open{background:var(--gold);color:#0A0A0C;border-color:var(--gold)}

/* ===== butang ===== */
.btn,.tagcut.btn,.stock-actions .btn,.calc-lock-btn{border-radius:999px}
.btn-primary,.hero .btn-primary,.hero .btn-green{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-d) 100%);color:#0A0A0C;box-shadow:0 4px 20px rgba(212,175,55,.28)}
.btn-primary:hover,.hero .btn-primary:hover,.hero .btn-green:hover{background:linear-gradient(135deg,#E6C65A 0%,#C79A1E 100%);color:#0A0A0C;box-shadow:0 6px 26px rgba(212,175,55,.45);opacity:1}
.btn-green{background:var(--customs);color:#fff}
.hero .btn-outline,.hero .btn-light{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.hero .btn-outline:hover,.hero .btn-light:hover{background:rgba(212,175,55,.1);border-color:var(--gold-l);color:var(--gold-l)}
.btn-light,.btn-outline{color:var(--steel)}
.btn-outline:hover{border-color:var(--gold)}

/* ===== hero ===== */
.hero{background:radial-gradient(ellipse at 50% 0%,rgba(212,175,55,.16) 0%,transparent 62%),linear-gradient(180deg,#0A0A0C 0%,#0E0E12 100%)}
.hero h1{color:#fff}
.hero h1 span{background:linear-gradient(135deg,var(--gold-l) 0%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding:0;border-radius:0}
.hero-popular a{color:var(--gold)}
.hero-popular a:hover{color:var(--gold-l)}
.hero-note{border-top-color:rgba(212,175,55,.2)}

/* ===== jalur kepercayaan, proses, band ===== */
.trust-strip{background:var(--card);border-color:var(--line)}
.process-no,.process-node:nth-child(odd) .process-no{background:transparent;border:1.5px solid var(--gold);color:var(--gold)}
.process-node:nth-child(odd) .process-no{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#0A0A0C}
.conversion-band{background:linear-gradient(135deg,rgba(212,175,55,.14) 0%,#0A0A0C 100%),var(--card);border-top:1px solid rgba(212,175,55,.3);border-bottom:1px solid rgba(212,175,55,.3)}
.conversion-actions .btn-light{border-color:var(--gold);color:var(--gold)}
.motor-warranty-note{background:rgba(212,175,55,.08);color:var(--steel)}
.motor-warranty-note span{color:var(--ink-soft)}
.feature:hover,.stock-card:hover{border-top-color:rgba(212,175,55,.4);border-right-color:rgba(212,175,55,.4);border-bottom-color:rgba(212,175,55,.4)}

/* ===== borang dan carian ===== */
.readonly-calc{background:rgba(255,255,255,.05)!important;color:var(--ink-soft)!important}
.field select:focus,.field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.18)}

/* ===== kad stock ===== */
.price,.big-price{color:var(--gold)}
.incoming{color:#0A0A0C}
.motor-cap{color:#F59E0B}
.stock-cover{background:var(--card)}
.detail-photo .photo-link img{background:var(--card)}
a.photo-cta:hover{background:rgba(255,255,255,.06)}
.photo-link:hover .photo-link-label{color:#0A0A0C}
.modal{background:rgba(0,0,0,.72)}
.modal-box{border:1px solid rgba(212,175,55,.25)}
a[aria-label="Share to WhatsApp"]{background:var(--customs)!important}
a[aria-label="Share to Facebook"]{background:#1877F2!important}
#liveDiagnostic b{color:var(--ink-soft)!important}

/* ===== bar WhatsApp melekat, toast ===== */
.sticky-wa{background:rgba(20,20,25,.96);border:1px solid rgba(212,175,55,.3)}
.sticky-wa.highlight{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-d) 100%);box-shadow:0 16px 38px rgba(212,175,55,.35)}
.sticky-wa.highlight .sticky-wa-text b,.sticky-wa.highlight .sticky-wa-text span,.sticky-wa.highlight .sticky-wa-arrow{color:#0A0A0C}
.toast{background:var(--gold);color:#0A0A0C;font-weight:700}

/* ===== kalkulator OTR dan booking ===== */
.booking-box{background:linear-gradient(135deg,rgba(212,175,55,.14) 0%,#0A0A0C 100%);border:1px solid rgba(212,175,55,.35);color:var(--steel)}
.booking-box p{color:var(--ink-soft)}
.booking-point span{color:var(--gold)}
.motor-loan-row .monthly,.motor-selected-finance .selected-monthly{color:var(--gold)}

/* ===== footer ===== */
footer{background:#050507;color:var(--ink-soft)}
.footer-brand{color:var(--gold)}

/* ===== AI Assistant ===== */
#arAiLauncher{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-d) 100%);color:#0A0A0C;box-shadow:0 12px 30px rgba(212,175,55,.3)}
#arAiLauncher .ar-ai-dot{background:#148A42;box-shadow:0 0 0 4px rgba(20,138,66,.25)}
#arAiChat{background:var(--card);border:1px solid rgba(212,175,55,.3);box-shadow:0 24px 70px rgba(0,0,0,.65)}
.ar-ai-head{background:linear-gradient(135deg,rgba(212,175,55,.2) 0%,#0E0E12 100%);color:#fff;border-bottom:1px solid rgba(212,175,55,.2)}
.ar-ai-avatar{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#0A0A0C}
.ar-ai-msg.bot{background:var(--card);border-color:var(--line);color:var(--steel)}
.ar-ai-msg.user{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#0A0A0C}
.ar-ai-suggestions,.ar-ai-form,.ar-ai-note{background:var(--card);border-top-color:var(--line)}
.ar-ai-note{color:#76767c}
.ar-ai-suggestion{background:transparent;border-color:rgba(212,175,55,.4);color:var(--gold-l)}
.ar-ai-input{background:#0E0E12;color:#fff;border-color:rgba(255,255,255,.14)}
.ar-ai-input:focus{border-color:var(--gold)}
.ar-ai-send{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#0A0A0C}
.ar-ai-price{color:var(--gold)}
.ar-ai-calc{background:#0E0E12;border-color:var(--line)}
.ar-ai-calc-row.total{border-top-color:var(--line)}


/* =====================================================================
   RESPONSIF: Android, iPhone, iPad, foldable (280px hingga 1100px+)
   ===================================================================== */

/* asas: elak lari ke kanan, elak zum teks automatik, kemaskan sentuhan */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden;-webkit-tap-highlight-color:rgba(212,175,55,.18);
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);
  padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
@supports (overflow:clip){html,body{overflow-x:clip}}
button,a,summary,.btn{touch-action:manipulation}
img,video,iframe{max-width:100%}
.stock-card,.stock-body,.modal-box,.calculator-wrap,.calc-card,.detail-info,.detail-grid>*{min-width:0}
h1,h2,h3,h4,.stock-body h3,.detail-info h2,.footer-small,.owner-text{overflow-wrap:break-word}
.spec,.stock-spec,.detail-list div,.source-spec p,.ar-ai-msg{overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

section[id]{scroll-margin-top:calc(140px + env(safe-area-inset-top,0px))}

/* kawasan selamat (notch, Dynamic Island, bar rumah iPhone, status bar PWA) */
header{padding-top:env(safe-area-inset-top,0px);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.sticky-wa{left:calc(16px + env(safe-area-inset-left,0px));right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))}
#arAiLauncher{right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(86px + env(safe-area-inset-bottom,0px))}
#arAiChat{right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(145px + env(safe-area-inset-bottom,0px));
  height:min(620px,calc(100vh - 175px - env(safe-area-inset-bottom,0px)))}
.toast{right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.modal{padding:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}

.modal-box{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@supports (height:100dvh){
  #arAiChat{height:min(620px,calc(100dvh - 175px - env(safe-area-inset-bottom,0px)))}
  .modal-box{max-height:90dvh}
}

/* iOS Safari zum masuk bila fon input < 16px; ini punca halaman "lari" ke kanan */
@media (pointer:coarse){
  input,select,textarea,.field input,.field select,.ar-ai-input{font-size:16px!important}
  .close,.staff-toggle,.ar-ai-close{min-width:44px;min-height:44px}
}

/* katalog: kolum ikut lebar sebenar (fold dibuka, iPad, desktop) */
.stock-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
.stock-card{border-radius:20px;overflow:hidden}
.stock-cover img{transition:transform .5s ease}
.stock-card:hover .stock-cover img{transform:scale(1.05)}
.price{font-size:24px}

/* penapis stock: 7 medan + butang. Padatkan di telefon supaya kad stock cepat nampak */
@media (max-width:950px){.searchbox>.btn{grid-column:1/-1}}
@media (max-width:620px){
  .searchbox{grid-template-columns:1fr 1fr;gap:10px;padding:16px}
  .searchbox .field label{font-size:11px;margin-bottom:4px}
  .searchbox .field select,.searchbox .field input{height:44px;padding:0 10px}
}
@media (max-width:340px){.searchbox{grid-template-columns:1fr}}

/* embed TikTok mempunyai min-width 325px sebagai inline style, punca skrol ke kanan pada skrin sempit */
.tiktok-grid blockquote.tiktok-embed,.tiktok-grid iframe,.tiktok-grid section{min-width:0!important;max-width:100%!important}
.proof-section,.video-section{overflow-x:hidden}

/* skrin sempit: Galaxy Fold (cover), iPhone SE, telefon 320-360px */
@media (max-width:480px){
  .nav{gap:10px}
  .brand{font-size:17px;gap:8px}
  .brand-mark{width:34px;height:34px;font-size:12px}
  .nav .btn{padding:10px 14px;font-size:13px;white-space:nowrap}
  .hero h1{overflow-wrap:break-word}
  .calculator-wrap,.modal-box{padding:18px}
  .motor-loan-row{grid-template-columns:minmax(0,1fr) auto auto;gap:6px;font-size:11.5px}
  .stock-actions{flex-wrap:wrap}
  .stock-actions .btn{min-width:0}
}
@media (max-width:420px){
  .trust-items{grid-template-columns:1fr}
  .trust-item{border-left:0;border-top:1px solid var(--line);padding:16px 14px}
  .trust-item:first-child{border-top:0}
}
@media (max-width:340px){
  .brand{font-size:0;gap:0}
  .brand-mark{font-size:12px}
  .nav .btn{padding:9px 12px;font-size:12px}
  .detail-list{grid-template-columns:1fr}
  .container{width:94%}
}

/* kekalkan jarak asal untuk skrin kecil, ditambah kawasan selamat */
@media (max-width:620px){
  .sticky-wa{left:calc(10px + env(safe-area-inset-left,0px));right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:600px){
  #arAiLauncher{right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  #arAiChat{right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(128px + env(safe-area-inset-bottom,0px));width:calc(100vw - 24px);height:min(640px,calc(100vh - 150px - env(safe-area-inset-bottom,0px)))}
}
@supports (height:100dvh){@media (max-width:600px){#arAiChat{height:min(640px,calc(100dvh - 150px - env(safe-area-inset-bottom,0px)))}}}

/* telefon landscape / skrin rendah */
@media (max-height:520px){
  #arAiLauncher{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  #arAiChat{bottom:calc(12px + env(safe-area-inset-bottom,0px));height:calc(100vh - 24px)}
  .sticky-wa{padding:8px 14px}
  .sticky-wa-text span{display:none}
}
@supports (height:100dvh){@media (max-height:520px){#arAiChat{height:calc(100dvh - 24px)}}}

/* peranti sentuh: elak kesan hover tersangkut selepas ditekan */
@media (hover:none){
  .stock-card:hover,.btn:hover,.feature:hover{transform:none}
  .stock-card:hover .stock-cover img{transform:none}
}

/* dual-screen (Surface Duo dan sejenisnya): kandungan kekal dalam skrin kiri, tak terpotong engsel */
@media (horizontal-viewport-segments:2){
  .container{width:calc(env(viewport-segment-width 0 0, 100%) - 32px);margin-left:16px;margin-right:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* butang "Pasang App" dan panduan iOS */
.ar-pwa-pill{border-color:var(--gold)!important;color:var(--gold)!important;background:rgba(212,175,55,.08)!important}
.ar-pwa-sheet{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.72);display:flex;align-items:flex-end;justify-content:center;
  padding:16px max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.ar-pwa-box{width:min(440px,100%);background:var(--card);border:1px solid rgba(212,175,55,.3);border-radius:20px;padding:22px}
.ar-pwa-box h3{margin:0 0 12px;color:var(--gold);font-size:18px}
.ar-pwa-box ol{margin:0 0 18px;padding-left:20px;color:var(--steel);line-height:1.6}
.ar-pwa-box li{margin-bottom:8px}
.ar-pwa-box button{width:100%;min-height:48px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#0A0A0C;font-weight:700;font-size:16px;cursor:pointer}


/* =====================================================================
   AR WHATSAPP BRAND GREEN • 2026-10-09
   Keep all other primary actions black/gold. WhatsApp is iconic green.
   ===================================================================== */
:root{--wa-green:#25D366;--wa-green-hover:#47E27F;--wa-green-ink:#052A16}
/* WhatsApp CTAs only; hero .btn-green still uses gold as a stock-action. */
.btn-green:not(.hero .btn-green),#unitCalcWa,#motorCalcWa{
  background:var(--wa-green);color:var(--wa-green-ink);border-color:var(--wa-green);box-shadow:0 6px 22px rgba(37,211,102,.16)
}
.btn-green:not(.hero .btn-green):hover,#unitCalcWa:hover,#motorCalcWa:hover{
  background:var(--wa-green-hover);color:var(--wa-green-ink);opacity:1
}
a[aria-label="Share to WhatsApp"]{background:var(--wa-green)!important}
.sticky-wa,.sticky-wa.highlight{background:var(--wa-green);border:1px solid #25D366;box-shadow:0 7px 25px rgba(37,211,102,.28)}
.sticky-wa .sticky-wa-text b,.sticky-wa .sticky-wa-text span,.sticky-wa .sticky-wa-arrow,
.sticky-wa.highlight .sticky-wa-text b,.sticky-wa.highlight .sticky-wa-text span,.sticky-wa.highlight .sticky-wa-arrow{
  color:var(--wa-green-ink)
}
.sticky-wa:hover,.sticky-wa.highlight:hover{background:var(--wa-green-hover)}