/* ============================================================
   KSSMPOB — Sistem Tempahan Rumah Rehat
   Identiti visual "Pesisir": laut dalam, sawit, pasir hangat
   ============================================================ */
:root {
  --laut:        #0E5B53;   /* sea-teal / palm — warna utama */
  --laut-gelap:  #0A413B;
  --laut-cair:   #1B7A6F;
  --emas:        #E0922E;   /* amber sawit — aksen */
  --emas-lembut: #F4C77B;
  --pasir:       #FAF6EC;   /* latar hangat */
  --pasir-tua:   #EFE8D6;
  --kertas:      #FFFFFF;
  --dakwat:      #15302B;   /* teks */
  --dakwat-mlap: #5C6B66;
  --garis:       #E3DCCB;
  --hijau-ok:    #2E8B6F;
  --merah-bahaya:#C0492F;
  --kuning-tunggu:#B5872A;
  --radius:      18px;
  --radius-kcl:  11px;
  --bayang:      0 1px 2px rgba(20,48,43,.04), 0 8px 30px rgba(20,48,43,.07);
  --bayang-tinggi:0 18px 50px rgba(14,91,83,.18);
  --font-tajuk:  "DM Serif Display", Georgia, serif;
  --font-badan:  "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-badan);
  background: var(--pasir);
  color: var(--dakwat);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: inherit; }

.bekas { width: min(1140px, 92vw); margin-inline: auto; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,246,236,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--garis);
}
.nav-isi { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.jenama { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.jenama-lambang {
  width: 40px; height: 40px; border-radius: 11px;
  background: #fff; box-shadow: 0 0 0 1px var(--garis) inset;
  display: grid; place-items: center; color: var(--emas-lembut); flex-shrink: 0; padding: 4px;
}
.jenama-lambang img { width: 100%; height: 100%; object-fit: contain; }
.hero-lambang { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; margin-right: 2px; border-radius: 4px; background: #fff; padding: 2px; }
.jenama-teks b { font-size: 1.02rem; letter-spacing: -.02em; display: block; line-height: 1.1; }
.jenama-teks span { font-size: .72rem; color: var(--dakwat-mlap); letter-spacing: .04em; }
.nav-pautan { display: flex; align-items: center; gap: 8px; }
.nav-pautan a {
  text-decoration: none; font-size: .9rem; font-weight: 600; color: var(--dakwat);
  padding: 9px 15px; border-radius: 9px; transition: background .15s;
}
.nav-pautan a:hover { background: var(--pasir-tua); }
.nav-pautan a.utama {
  background: var(--laut); color: #fff;
}
.nav-pautan a.utama:hover { background: var(--laut-gelap); }

/* ---------- Butang ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; font-weight: 700; font-size: .94rem;
  padding: 13px 22px; border-radius: var(--radius-kcl);
  transition: transform .12s, box-shadow .15s, background .15s; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-utama { background: var(--emas); color: #3a2608; box-shadow: 0 6px 18px rgba(224,146,46,.32); }
.btn-utama:hover { background: #d2851f; }
.btn-laut { background: var(--laut); color: #fff; }
.btn-disabled { background: var(--garis); color: var(--kelabu); cursor: not-allowed; opacity: .75; }
.btn-disabled:hover { background: var(--garis); transform: none; box-shadow: none; }
.kad-badge-ad {
  position: absolute; top: 13px; right: 13px; z-index: 3;
  background: #f59e0b; color: #fff;
  font-size: .72rem; font-weight: 700; padding: 6px 12px; border-radius: 30px;
  letter-spacing: .03em; box-shadow: 0 2px 8px rgba(245,158,11,.4);
}
.kad-akan-datang { opacity: .88; }
.kad-akan-datang .kad-imej::after {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.18); z-index: 2; pointer-events: none;
}
.btn-laut:hover { background: var(--laut-gelap); }
.btn-garis { background: transparent; border: 1.5px solid var(--garis); color: var(--dakwat); }
.btn-garis:hover { border-color: var(--laut); color: var(--laut); }
.btn-blok { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(27,122,111,.55), transparent 55%),
    linear-gradient(160deg, var(--laut) 0%, var(--laut-gelap) 100%);
  color: #fff; padding: 64px 0 130px;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px;
  background: var(--pasir);
  clip-path: polygon(0 100%, 100% 100%, 100% 38%, 75% 58%, 50% 30%, 25% 55%, 0 35%);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--emas-lembut); background: rgba(255,255,255,.08);
  padding: 7px 15px; border-radius: 30px; border: 1px solid rgba(244,199,123,.25);
}
.hero h1 {
  font-family: var(--font-tajuk); font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.04; letter-spacing: -.015em;
  margin: 22px 0 16px; max-width: 16ch;
}
.hero h1 em { color: var(--emas-lembut); font-style: italic; }
.hero p { font-size: clamp(1rem, 1.6vw, 1.15rem); color: rgba(255,255,255,.82); max-width: 52ch; }
.hero-stat { display: flex; gap: 34px; margin-top: 30px; flex-wrap: wrap; }
.hero-stat div b { font-family: var(--font-tajuk); font-size: 1.7rem; color: var(--emas-lembut); }
.hero-stat div span { display: block; font-size: .82rem; color: rgba(255,255,255,.7); }

/* ---------- Seksyen ---------- */
.seksyen { padding: 0 0 70px; }
.seksyen-tajuk { text-align: center; max-width: 60ch; margin: 0 auto 38px; }
.seksyen-tajuk .kecil {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--emas);
}
.seksyen-tajuk h2 {
  font-family: var(--font-tajuk); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -.01em; margin: 8px 0; line-height: 1.1;
}
.seksyen-tajuk p { color: var(--dakwat-mlap); }

/* ---------- Kad unit ---------- */
.grid-unit {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 26px;
  margin-top: -90px; position: relative; z-index: 2;
}
.kad-unit {
  background: var(--kertas); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--bayang); border: 1px solid var(--garis);
  display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s;
}
.kad-unit:hover { transform: translateY(-5px); box-shadow: var(--bayang-tinggi); }
.kad-imej { height: 188px; position: relative; overflow: hidden; }
.kad-imej.sbr { background: linear-gradient(150deg, #2a9d8f 0%, #168a8a 45%, #e9c46a 100%); }
.kad-imej.mtw { background: linear-gradient(150deg, #1d3f73 0%, #2a6f97 50%, #61a5c2 100%); }
.kad-imej svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kad-imej img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.kad-galeri-btn {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  background: rgba(15,30,28,.55); color: #fff; border: none; border-radius: 30px;
  padding: 6px 13px; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.kad-galeri-btn:hover { background: rgba(15,30,28,.78); }

/* Galeri (lightbox) */
.modal-galeri { width: min(720px, 100%); }
.galeri-pap { position: relative; background: #0a1f1c; display: flex; align-items: center; justify-content: center; min-height: 280px; }
.galeri-pap img { max-width: 100%; max-height: 60vh; object-fit: contain; display: block; }
.galeri-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,.16);
  color: #fff; font-size: 1.4rem; cursor: pointer; display: grid; place-items: center; transition: background .15s;
}
.galeri-nav:hover { background: rgba(255,255,255,.32); }
.galeri-prev { left: 12px; } .galeri-next { right: 12px; }
.galeri-kecil { display: flex; gap: 8px; padding: 14px; overflow-x: auto; background: var(--kertas); }
.galeri-kecil img {
  width: 64px; height: 48px; object-fit: cover; border-radius: 6px; cursor: pointer;
  opacity: .55; border: 2px solid transparent; flex-shrink: 0; transition: opacity .15s, border-color .15s;
}
.galeri-kecil img.aktif { opacity: 1; border-color: var(--laut); }
.kad-tag {
  position: absolute; top: 13px; left: 13px; z-index: 2;
  background: rgba(255,255,255,.92); color: var(--laut);
  font-size: .72rem; font-weight: 700; padding: 6px 12px; border-radius: 30px;
  letter-spacing: .03em;
}
.kad-isi { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.kad-isi h3 { font-family: var(--font-tajuk); font-weight: 400; font-size: 1.5rem; letter-spacing: -.01em; }
.kad-lokasi { display: flex; align-items: center; gap: 6px; color: var(--dakwat-mlap); font-size: .88rem; margin: 4px 0 14px; }
.kad-spek { display: flex; gap: 16px; flex-wrap: wrap; font-size: .84rem; color: var(--dakwat-mlap); margin-bottom: 14px; }
.kad-spek span { display: inline-flex; align-items: center; gap: 5px; }
.kad-kemudahan { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.cip {
  font-size: .73rem; background: var(--pasir); border: 1px solid var(--garis);
  color: var(--dakwat-mlap); padding: 4px 10px; border-radius: 30px;
}
.kad-kaki { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.kad-harga b { font-family: var(--font-tajuk); font-size: 1.55rem; color: var(--laut); }
.kad-harga span { font-size: .8rem; color: var(--dakwat-mlap); }
.kad-harga small { display: block; font-size: .74rem; color: var(--dakwat-mlap); }

/* ---------- Borang / Modal ---------- */
.lapis {
  position: fixed; inset: 0; z-index: 100; background: rgba(10,48,43,.55);
  backdrop-filter: blur(3px); display: none; align-items: flex-start; justify-content: center;
  padding: 5vh 16px; overflow-y: auto;
}
.lapis.buka { display: flex; }
.modal {
  background: var(--pasir); border-radius: var(--radius); width: min(560px, 100%);
  box-shadow: var(--bayang-tinggi); animation: naik .25s ease; overflow: hidden;
}
@keyframes naik { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.modal-kepala {
  background: linear-gradient(135deg, var(--laut), var(--laut-gelap)); color: #fff;
  padding: 20px 24px; display: flex; justify-content: space-between; align-items: center;
}
.modal-kepala h3 { font-family: var(--font-tajuk); font-weight: 400; font-size: 1.4rem; }
.modal-kepala small { color: rgba(255,255,255,.7); font-size: .82rem; }
.modal-tutup { background: rgba(255,255,255,.14); border: none; color: #fff; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 1.2rem; }
.modal-tutup:hover { background: rgba(255,255,255,.25); }
.modal-isi { padding: 24px; }

.medan { margin-bottom: 16px; }
.medan label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 7px; color: var(--dakwat); }
.medan label .wajib { color: var(--merah-bahaya); }
.medan input, .medan select, .medan textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--garis); border-radius: var(--radius-kcl);
  background: var(--kertas); color: var(--dakwat); transition: border .15s, box-shadow .15s;
}
.medan input:focus, .medan select:focus, .medan textarea:focus {
  outline: none; border-color: var(--laut); box-shadow: 0 0 0 3px rgba(14,91,83,.12);
}
.medan textarea { resize: vertical; min-height: 70px; }
.medan-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pilih-jenis { display: flex; gap: 10px; }
.pilih-jenis label {
  flex: 1; border: 1.5px solid var(--garis); border-radius: var(--radius-kcl); padding: 12px;
  text-align: center; cursor: pointer; transition: all .15s; font-weight: 600; font-size: .9rem;
}
.pilih-jenis input { display: none; }
.pilih-jenis input:checked + span { color: var(--laut); }
.pilih-jenis label:has(input:checked) { border-color: var(--laut); background: rgba(14,91,83,.06); box-shadow: 0 0 0 3px rgba(14,91,83,.08); }

/* Kotak ringkasan harga */
.ringkasan {
  background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--radius-kcl);
  padding: 16px 18px; margin-bottom: 18px;
}
.ringkasan-baris { display: flex; justify-content: space-between; font-size: .9rem; padding: 4px 0; color: var(--dakwat-mlap); }
.ringkasan-jumlah {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px dashed var(--garis); margin-top: 8px; padding-top: 12px;
}
.ringkasan-jumlah b { font-family: var(--font-tajuk); font-size: 1.5rem; color: var(--laut); }

/* Status & amaran */
.amaran { padding: 12px 15px; border-radius: var(--radius-kcl); font-size: .88rem; font-weight: 600; margin-bottom: 16px; display: none; }
.amaran.lihat { display: block; }
.amaran.ok { background: rgba(46,139,111,.12); color: var(--hijau-ok); }
.amaran.bahaya { background: rgba(192,73,47,.1); color: var(--merah-bahaya); }
.amaran.info { background: rgba(181,135,42,.12); color: var(--kuning-tunggu); }

.lencana { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700; padding: 4px 11px; border-radius: 30px; }
.lencana.menunggu { background: rgba(181,135,42,.14); color: var(--kuning-tunggu); }
.lencana.disahkan { background: rgba(46,139,111,.14); color: var(--hijau-ok); }
.lencana.ditolak, .lencana.dibatalkan { background: rgba(192,73,47,.12); color: var(--merah-bahaya); }
.lencana.selesai { background: rgba(14,91,83,.12); color: var(--laut); }
.lencana.dibayar { background: rgba(46,139,111,.14); color: var(--hijau-ok); }
.lencana.belum { background: var(--pasir-tua); color: var(--dakwat-mlap); }

/* Langkah */
.langkah { display: flex; gap: 8px; margin-bottom: 22px; }
.langkah div { flex: 1; height: 4px; border-radius: 4px; background: var(--garis); }
.langkah div.aktif { background: var(--emas); }

/* Kejayaan tempahan */
.jaya { text-align: center; padding: 8px 0; }
.jaya-ikon { width: 64px; height: 64px; border-radius: 50%; background: rgba(46,139,111,.14); color: var(--hijau-ok); display: grid; place-items: center; margin: 0 auto 16px; }
.jaya-ruj { font-family: var(--font-tajuk); font-size: 1.7rem; color: var(--laut); letter-spacing: .03em; background: var(--kertas); border: 1.5px dashed var(--garis); border-radius: var(--radius-kcl); padding: 14px; margin: 14px 0; }

/* Cara guna / proses */
.proses { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 20px; }
.proses-kad { background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--radius); padding: 24px; }
.proses-no { font-family: var(--font-tajuk); font-size: 1.3rem; color: var(--emas); width: 44px; height: 44px; border-radius: 12px; background: var(--pasir); display: grid; place-items: center; margin-bottom: 14px; }
.proses-kad h4 { font-size: 1.05rem; margin-bottom: 6px; }
.proses-kad p { font-size: .9rem; color: var(--dakwat-mlap); }

/* Kaki */
.kaki { background: var(--laut-gelap); color: rgba(255,255,255,.75); padding: 44px 0 28px; margin-top: 40px; }
.kaki-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.kaki h5 { color: #fff; font-size: .95rem; margin-bottom: 10px; }
.kaki p, .kaki a { font-size: .87rem; line-height: 1.9; text-decoration: none; }
.kaki a:hover { color: var(--emas-lembut); }
.kaki-bawah { border-top: 1px solid rgba(255,255,255,.12); margin-top: 28px; padding-top: 18px; font-size: .82rem; text-align: center; }

.pintal { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: pusing .7s linear infinite; }
@keyframes pusing { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
  .medan-2 { grid-template-columns: 1fr; }
  .hero { padding: 44px 0 110px; }
  .nav-pautan a:not(.utama) { display: none; }
  .grid-unit { margin-top: -70px; }
}

/* ---- v2: pemilih 3 kategori + cara bayaran ---- */
.pilih-jenis-3 { gap: 8px; }
.pilih-jenis-3 label { padding: 11px 6px; font-size: .82rem; line-height: 1.3; }
.pilih-jenis-3 label small { color: var(--dakwat-mlap); font-weight: 600; font-size: .72rem; }
.pilih-jenis-3 label:has(input:checked) small { color: var(--laut); }
.nota-kecil { font-size: .8rem; color: var(--dakwat-mlap); margin: -4px 0 14px; }
.pilih-bayar { display: flex; flex-direction: column; gap: 8px; }
.pilih-bayar label {
  border: 1.5px solid var(--garis); border-radius: var(--radius-kcl); padding: 12px 14px;
  cursor: pointer; font-weight: 600; font-size: .9rem; transition: all .15s;
}
.pilih-bayar input { display: none; }
.pilih-bayar label:has(input:checked) { border-color: var(--laut); background: rgba(14,91,83,.06); box-shadow: 0 0 0 3px rgba(14,91,83,.08); color: var(--laut); }

/* ---- v3: kalendar ketersediaan interaktif ---- */
.kal-pilih { border: 1.5px solid var(--garis); border-radius: var(--radius-kcl); padding: 12px; background: var(--kertas); }
.kal-pilih-kepala { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kal-pilih-kepala b { font-size: .98rem; }
.kal-btn { width: 32px; height: 32px; border: 1.5px solid var(--garis); background: var(--pasir); border-radius: 8px; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--laut); }
.kal-btn:hover { border-color: var(--laut); }
.kal-pilih-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.kal-hari { text-align: center; font-size: .68rem; font-weight: 700; color: var(--dakwat-mlap); padding: 4px 0; text-transform: uppercase; }
.kal-sel {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 600; border-radius: 8px; cursor: pointer;
  background: var(--pasir); color: var(--dakwat); border: 1.5px solid transparent; transition: all .12s; user-select: none;
}
.kal-sel:hover:not(.lumpuh):not(.masuk):not(.keluar) { border-color: var(--laut); }
.kal-sel.premium { background: #FBEFD9; color: #9a6712; }
.kal-sel.lumpuh { background: repeating-linear-gradient(45deg, #f0ebe0, #f0ebe0 4px, #e7e0d0 4px, #e7e0d0 8px); color: #b9b1a0; cursor: not-allowed; text-decoration: line-through; }
.kal-sel.boleh-keluar { background: var(--pasir); color: var(--dakwat); outline: 1.5px dashed var(--emas); }
.kal-sel.masuk, .kal-sel.keluar { background: var(--laut); color: #fff; border-color: var(--laut); }
.kal-sel.dalam { background: rgba(14,91,83,.14); color: var(--laut); border-radius: 4px; }
.kal-pilih-petunjuk { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; font-size: .72rem; color: var(--dakwat-mlap); }
.kal-pilih-petunjuk span { display: inline-flex; align-items: center; gap: 5px; }
.kal-pilih-petunjuk i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.kal-pilih-petunjuk .d-kosong { background: var(--pasir); border: 1.5px solid var(--garis); }
.kal-pilih-petunjuk .d-premium { background: #FBEFD9; border: 1.5px solid #e7c98c; }
.kal-pilih-petunjuk .d-penuh { background: repeating-linear-gradient(45deg, #f0ebe0, #f0ebe0 3px, #e7e0d0 3px, #e7e0d0 6px); }
.kal-pilih-petunjuk .d-pilih { background: var(--laut); }
.pilih-tarikh-papar { font-size: .86rem; color: var(--dakwat-mlap); padding: 11px 14px; background: var(--pasir); border-radius: var(--radius-kcl); margin: 12px 0; }
.pilih-tarikh-papar.aktif { background: rgba(14,91,83,.07); color: var(--dakwat); }
.pilih-tarikh-papar .malam-tag { background: var(--laut); color: #fff; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 20px; margin-left: 6px; }

.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.hero-kanan { display: flex; justify-content: center; }
.kad-apung-balut { position: relative; width: 340px; height: 440px; }
.kad-apung { position: absolute; border-radius: 14px; overflow: hidden; border: 3px solid rgba(255,255,255,.25); }
.kad-apung img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kad-apung-tag { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 12px; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; font-size: 12px; font-weight: 600; }
.kad-samsuria { width: 320px; height: 220px; top: 0; left: 10px; transform: rotate(-1.5deg); z-index: 2; }
.kad-marina  { width: 320px; height: 220px; top: 205px; left: 0; transform: rotate(1.5deg); z-index: 1; }
@media (max-width: 768px) { .hero-grid { grid-template-columns: 1fr; } .hero-kanan { display: none; } }