/* tema + animasi Homestay — mod manual siang/malam, reveal lembut */
:root[data-tema="gelap"] {
  --paper:#0C1616; --card:#122020; --card-2:#162828;
  --line:#22403D; --line-2:#2C4F4B;
  --ink:#EAF2F0; --ink-soft:#A8C0BC; --ink-mute:#7E9793;
  --brand-100:#143030; --accent-ink:#2A3300;
  --red-100:#3A2120; --sun-100:#33280F;
  --sh-1:0 1px 3px rgba(0,0,0,.5);
  --sh-2:0 10px 30px -12px rgba(0,0,0,.7);
  --sh-3:0 24px 60px -20px rgba(0,0,0,.85);
}
:root[data-tema="terang"] {
  --paper:#F7F6F2; --card:#FFFFFF; --card-2:#FCFBF8;
  --line:#E7E3DA; --line-2:#D8D3C7;
  --ink:#14201F; --ink-soft:#41615D; --ink-mute:#7B8C88;
  --brand-100:#E4F1EE; --accent-ink:#2A3300;
  --red-100:#FBEAE8; --sun-100:#FDF1DE;
  --sh-1:0 1px 2px rgba(16,32,30,.06), 0 1px 3px rgba(16,32,30,.04);
  --sh-2:0 4px 10px rgba(16,32,30,.06), 0 12px 28px -12px rgba(16,32,30,.18);
  --sh-3:0 18px 50px -18px rgba(16,32,30,.32), 0 6px 16px rgba(16,32,30,.06);
}
:root { color-scheme: light; }
:root[data-tema="gelap"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) { color-scheme: dark; } }

/* teks contoh (placeholder) mesti jelas dalam kedua-dua mod */
input::placeholder, textarea::placeholder { color:var(--ink-mute); opacity:1; }
:root[data-tema="gelap"] input::placeholder,
:root[data-tema="gelap"] textarea::placeholder { color:var(--ink-soft); opacity:1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) input::placeholder,
  :root:not([data-tema="terang"]) textarea::placeholder { color:var(--ink-soft); opacity:1; }
}

/* ---- butang tukar mod ---- */
.tema-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--card); color:var(--ink);
  font-size:1.05rem; line-height:1; padding:0;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.tema-btn:hover { transform:translateY(-1px) rotate(-8deg); background:var(--card-2); }
.tema-btn:active { transform:scale(.94); }
/* ikon menunjukkan mod yang akan dituju: matahari bila sedang gelap, bulan bila sedang terang */
.tema-btn .ikon-siang { display:none; }
:root[data-tema="gelap"] .tema-btn .ikon-siang { display:inline; }
:root[data-tema="gelap"] .tema-btn .ikon-malam { display:none; }
:root[data-tema="terang"] .tema-btn .ikon-siang { display:none; }
@media (prefers-color-scheme:dark) {
  :root:not([data-tema="terang"]) .tema-btn .ikon-siang { display:inline; }
  :root:not([data-tema="terang"]) .tema-btn .ikon-malam { display:none; }
}
@media (prefers-color-scheme:light) {
  :root:not([data-tema]) .tema-btn .ikon-siang { display:none; }
  :root:not([data-tema]) .tema-btn .ikon-malam { display:inline; }
}

/* ---- reveal lembut ketika skrol ---- */
html.js-anim .naik { opacity:0; transform:translateY(16px); }
html.js-anim .naik.tunjuk {
  opacity:1; transform:none;
  transition:opacity .62s var(--ease) var(--lewat,0s), transform .62s var(--ease) var(--lewat,0s);
}
html.js-anim .galeri figure, html.js-anim .jarak li, html.js-anim .chip { will-change:transform,opacity; }

/* ---- sentuhan hidup pada kad, gambar dan cip ---- */
.galeri figure { transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease); }
.galeri img { transition:transform .55s var(--ease), filter .35s var(--ease); }
@media (hover:hover) and (pointer:fine) {
  .galeri figure:hover { transform:translateY(-4px) scale(1.015); box-shadow:var(--sh-2); border-color:var(--brand-600); }
  .galeri figure:hover img { transform:scale(1.055); }
  .chip { transition:transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
  .chip:hover { transform:translateY(-2px) scale(1.035); border-color:var(--brand-600); }
  .jarak li { transition:transform .2s var(--ease), border-color .2s var(--ease); }
  .jarak li:hover { transform:translateX(4px); border-color:var(--brand-600); }
  .card { transition:box-shadow .25s var(--ease), transform .25s var(--ease); }
}
/* ---- denyutan halus pada butang chat ---- */
@keyframes denyutHalus { 0%,100% { box-shadow:0 0 0 0 rgba(198,219,46,.40); } 55% { box-shadow:0 0 0 14px rgba(198,219,46,0); } }
.bot-btn { animation:denyutHalus 2.8s var(--ease) infinite; }
/* ---- pemisah naik ketika dimuat ---- */
@keyframes naikMuat { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) {
  html.js-anim .naik { opacity:1 !important; transform:none !important; }
}

/* ---- butang bahasa BM/EN ---- */
.lang-btn {
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px;
  padding:0 10px; border-radius:999px; border:1px solid var(--line-2); background:var(--card);
  color:var(--ink); font-weight:800; font-size:.82rem; letter-spacing:.02em; text-decoration:none;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.lang-btn:hover { transform:translateY(-1px); background:var(--card-2); border-color:var(--brand-600); text-decoration:none; }
.nav { display:flex; align-items:center; gap:8px; }

/* ---- butang hero ---- */
.hero-aksi { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 16px; }
.hero-aksi .btn { flex:1 1 auto; min-width:190px; text-align:center; }
.btn-wa { background:#25D366; color:#062e14; border-color:#1eb257; font-weight:700; }
.btn-wa:hover { background:#1fbe5b; }

/* ---- maklumat tetamu ---- */
.info-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin-top:6px; }
.info-kotak { background:var(--card-2); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.info-kotak h3 { font-size:1rem; margin:0 0 8px; color:var(--ink); }
.info-senarai { margin:0; padding-left:18px; }
.info-senarai li { margin:0 0 6px; color:var(--ink-soft); font-size:.94rem; line-height:1.5; }
.info-senarai b { color:var(--ink); }

/* ---- ringkasan boleh lipat pada telefon ---- */
@media (max-width: 720px) {
  .ringkasan-kepala { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .ringkasan-toggle { background:var(--card-2); border:1px solid var(--line); color:var(--ink);
    border-radius:999px; padding:6px 14px; font-size:.85rem; font-weight:600; cursor:pointer; }
}
@media (min-width: 721px) { .ringkasan-toggle { display:none; } }

/* ---- aliran status tempahan ---- */
.aliran { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 6px; padding:0; list-style:none; counter-reset:langkah; }
.aliran li { flex:1 1 150px; position:relative; padding:12px 14px 12px 44px; border-radius:12px;
  background:var(--card-2); border:1px solid var(--line); color:var(--ink-soft); font-size:.88rem; font-weight:600; }
.aliran li::before { counter-increment:langkah; content:counter(langkah); position:absolute; left:14px; top:50%;
  transform:translateY(-50%); width:22px; height:22px; border-radius:50%; background:var(--line); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:.78rem; }
.aliran li.selesai { border-color:#2f9e63; color:var(--ink); }
.aliran li.selesai::before { background:#2f9e63; color:#fff; content:"✓"; }
.aliran li.kini { border-color:var(--brand-600); color:var(--ink); box-shadow:0 0 0 2px rgba(0,0,0,.04) inset; }

html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

/* ---- hero poster: penuh, tiada potong ---- */
.hero { display:grid; gap:var(--gap); align-items:center; }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(280px, 42%) 1fr; } }
.hero-media { max-height:none !important; padding:10px; background:var(--card-2);
  border:1px solid var(--line); border-radius:var(--r-md); }
.hero-media img { width:100%; height:auto; max-height:none; object-fit:contain; display:block;
  border-radius:calc(var(--r-md) - 4px); margin:0 auto; }
@media (max-width: 899px) { .hero-media { padding:8px; } }

/* ---- pagar ketersediaan ---- */
.terkunci { display:none; }
.hero-aksi .btn { min-height:52px; display:inline-flex; align-items:center; justify-content:center; }