/* TEMA LOTENG: hitam + hijau limau elektrik + kelabu konkrit, gaya brutalist, garis grid, teks mono, marquee */
:root {
  --brand: #c6f432; --brand-dark: #050505; --brand-light: #c6f432; --accent: #c6f432;
  --lime: #c6f432; --ash: #1a1a1a; --sunset: #c6f432; --gold: #c6f432; --sea: #c6f432; --palm: #c6f432;
  --cream: #111111; --cream-dark: #1a1a1a; --ink: #f1f1ee; --muted: #a4a49c; --line: #33332f; --white: #0b0b0b;
  --font-body: "Space Mono", ui-monospace, monospace; --font-script: "Space Grotesk", system-ui, sans-serif;
  --radius: 0; --shadow: none; --shadow-lg: none; --header-h: 72px;
}
body { background: #0b0b0b; color: var(--ink); font-size: .98rem; }
h1, h2, h3, h4 { font-family: var(--font-script); font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
a { color: inherit; }
.btn { border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--lime); }
.btn-primary { background: var(--lime); color: #0b0b0b; }
.btn-primary:hover { background: #0b0b0b; color: var(--lime); transform: none; box-shadow: none; }
.btn-outline { background: transparent; color: var(--lime); border-color: var(--lime); }
.btn-outline:hover { background: var(--lime); color: #0b0b0b; }
.btn-light { background: var(--lime); color: #0b0b0b; }
.btn-light:hover { background: #fff; }
.script { font-family: var(--font-body); font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; color: var(--lime); }

.site-header { background: #0b0b0b; backdrop-filter: none; border-bottom: 1px solid var(--line); }
.site-header::after { display: none; }
.logo { color: var(--lime); }
.logo-mark { width: 30px; height: 30px; }
.logo-name { font: 700 1.25rem var(--font-script); color: var(--ink); text-transform: uppercase; }
.logo-sub { color: var(--muted); letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; }
.nav a { color: var(--ink); text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; }
.nav a:not(.btn)::after { background: var(--lime); }
.nav a:not(.btn):hover, .nav a.active { color: var(--lime); }
.lang-switch { background: transparent; border: 1px solid var(--line); border-radius: 0; }
.lang-switch button { border-radius: 0; color: var(--ink); }
.nav-toggle { color: var(--lime); }

/* Hero: tajuk gergasi + dua gambar bersempadan */
.loteng-hero { border-bottom: 1px solid var(--line); }
.loteng-copy { padding: 28px clamp(16px, 3vw, 40px) 20px; }
.loteng-copy h1 { font-size: clamp(5rem, 24vw, 24rem); line-height: .78; letter-spacing: -.07em; color: var(--lime); text-transform: uppercase; margin: 0 0 .12em -.03em; }
.loteng-meta { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; align-items: start; border-top: 1px solid var(--line); padding-top: 16px; }
.loteng-sub { margin: 0; font-size: 1.05rem; color: var(--ink); max-width: 36em; }
.loteng-loc { margin: 0; color: var(--muted); text-transform: uppercase; }
.loteng-meta .house-price-line { margin: 0; color: var(--muted); }
.loteng-meta .house-price-line strong { color: var(--lime); font: 700 1.5rem var(--font-script); display: block; }
.loteng-imgs { display: grid; grid-template-columns: 2fr 1fr; border-top: 1px solid var(--line); height: clamp(260px, 42vw, 560px); }
.li { overflow: hidden; }
.li img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: filter .5s; }
.li:hover img { filter: none; }
.li2 { border-left: 1px solid var(--line); }

.marquee { overflow: hidden; background: var(--lime); color: #0b0b0b; font: 700 1.05rem var(--font-script); white-space: nowrap; }
.marquee-in { display: inline-flex; padding: 12px 0; }
.marquee span { padding: 0 26px; }
.marquee span::after { content: "/"; padding-left: 52px; }

.loteng-book { padding: 0; border-bottom: 1px solid var(--line); }
.booking-bar { margin: 0; width: 100%; background: #0b0b0b; box-shadow: none; border-radius: 0; padding: 14px clamp(16px, 3vw, 40px); color: var(--ink); }
.booking-field { border-right-color: var(--line); }
.booking-field .icon { color: var(--lime); }
.booking-field label { color: var(--muted); text-transform: uppercase; }
.booking-field .date-display, .booking-field select { color: var(--ink); background: transparent; }
.booking-field .date-display.empty { color: var(--muted); }
.booking-field select option { background: #0b0b0b; color: var(--ink); }
.booking-bar .btn { background: var(--lime); color: #0b0b0b; }

.section { padding: 80px 0; }
.section.g { background-image: linear-gradient(var(--ash) 1px, transparent 1px), linear-gradient(90deg, var(--ash) 1px, transparent 1px); background-size: 64px 64px; border-bottom: 1px solid var(--line); }
.section-title { color: var(--ink); font-size: clamp(2.4rem, 6.4vw, 5.4rem); line-height: .95; text-transform: uppercase; }
.lead { color: var(--ink); }
.ghead { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: end; margin-bottom: 34px; }
.section .container > .section-title { margin-bottom: 34px; }

/* Bilik: baris seperti jadual */
.rows { display: grid; border-top: 1px solid var(--lime); }
.rows .room-card { display: grid; grid-template-columns: 340px 1fr; background: #0b0b0b; border-bottom: 1px solid var(--lime); border-radius: 0; box-shadow: none; color: var(--ink); transition: background .2s, color .2s; }
.rows .room-card:hover { background: var(--lime); color: #0b0b0b; transform: none; box-shadow: none; }
.rows .room-card:hover h3, .rows .room-card:hover .link-arrow, .rows .room-card:hover .icon, .rows .room-card:hover p, .rows .room-card:hover .room-bed, .rows .room-card:hover .room-meta { color: #0b0b0b; }
.rows .room-img { aspect-ratio: 16 / 10; }
.rows .room-body { padding: 26px 30px; align-self: center; }
.rows .room-top h3 { font-size: clamp(1.6rem, 3vw, 2.6rem); text-transform: uppercase; }
.room-card { background: #0b0b0b; color: var(--ink); border: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.room-img img { filter: grayscale(.25); }
.room-bed, .room-meta, .room-body p { color: var(--muted); }
.room-bed .icon, .room-meta .icon, .link-arrow { color: var(--lime); }

.section.lime { background: var(--lime); color: #0b0b0b; padding: 0; border-bottom: 1px solid #0b0b0b; }
.lime .features { gap: 0; }
.lime .feature { display: block; padding: 34px 24px; border-right: 1px solid #0b0b0b; }
.lime .feature h3 { color: #0b0b0b; font-size: 1.3rem; margin: 12px 0 .3em; text-transform: uppercase; }
.lime .feature p { color: #0b0b0b; font-size: .9rem; }
.lime .feature-icon { color: #0b0b0b; }

.split-img img { border-radius: 0; box-shadow: none; border: 1px solid var(--lime); filter: grayscale(1); transition: filter .5s; }
.split-img:hover img { filter: none; }
.split-badge { background: var(--lime); color: #0b0b0b; border-radius: 0; }

/* Grid aktiviti bersempadan */
.gridx { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--lime); border-top: 1px solid var(--lime); }
.gridx .exp-card { background: #0b0b0b; border-right: 1px solid var(--lime); border-bottom: 1px solid var(--lime); border-radius: 0; box-shadow: none; color: var(--ink); }
.gridx .exp-card:hover { transform: none; background: var(--ash); }
.gridx .exp-img { aspect-ratio: 4 / 3; }
.gridx .exp-img img { filter: grayscale(1); transition: filter .4s; }
.gridx .exp-card:hover .exp-img img { filter: none; }
.gridx .exp-body { padding: 18px; }
.exp-body h3 { text-transform: uppercase; color: var(--lime); font-size: 1.2rem; }
.exp-body p { color: var(--muted); }
.exp-icon { display: none; }
.exp-card { background: #0b0b0b; color: var(--ink); border-radius: 0; box-shadow: none; }
.exp-card:hover { transform: none; }

.testimonial { background: #0b0b0b; color: var(--ink); border: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.testimonial blockquote { color: var(--ink); }
.testimonial figcaption span { color: var(--muted); }
.stars { color: var(--lime); }

.closing { background: var(--lime); color: #0b0b0b; padding: 80px clamp(16px, 3vw, 40px); }
.closing .container { width: 100%; max-width: none; }
.closing h2 { font-size: clamp(4rem, 19vw, 18rem); line-height: .82; letter-spacing: -.06em; text-transform: uppercase; color: #0b0b0b; margin: .1em 0 .2em; }
.closing-script { text-transform: uppercase; }
.closing .btn-primary { background: #0b0b0b; color: var(--lime); border-color: #0b0b0b; }
.closing .btn-primary:hover { background: var(--lime); color: #0b0b0b; }
.closing .btn-outline { color: #0b0b0b; border-color: #0b0b0b; }
.closing .btn-outline:hover { background: #0b0b0b; color: var(--lime); }

.page-header { background-image: none !important; background-color: #0b0b0b; color: var(--ink); padding: 60px 0 40px; text-align: left; border-bottom: 1px solid var(--lime); }
.page-header::before { display: none; }
.page-header h1 { font: 700 clamp(3.4rem, 13vw, 11rem)/.86 var(--font-script); letter-spacing: -.05em; color: var(--lime); text-transform: uppercase; }
.page-header p { margin-left: 0; color: var(--muted); opacity: 1; }
.crumbs, .crumbs a { color: var(--muted); }
.section-cream { background: #111; }
.section-head h2, .section-head p { color: var(--ink); }
.cta-band { background-image: none !important; background-color: var(--lime); color: #0b0b0b; }
.cta-band::before { display: none; }
.cta-band h2 { color: #0b0b0b; text-transform: uppercase; }
.cta-band .script { color: #0b0b0b; }
.cta-band .btn-light { background: #0b0b0b; color: var(--lime); border-color: #0b0b0b; }
.cta-band .btn-outline { color: #0b0b0b; border-color: #0b0b0b; }
.cta-band .btn-outline:hover { background: #0b0b0b; color: var(--lime); }
.house-card, .info-card, .form-card, .cal-inline, .map-box { background: #0b0b0b; color: var(--ink); border-radius: 0; box-shadow: none; border: 1px solid var(--lime); }
.house-card-price { background: var(--lime); color: #0b0b0b; }
.house-card-price > span, .house-card-price small { color: #0b0b0b; }
.house-card-price strong { font-family: var(--font-script); color: #0b0b0b; }
.room-detail-img img { border-radius: 0; box-shadow: none; border: 1px solid var(--lime); }
.room-detail-body h2 { text-transform: uppercase; color: var(--lime); }
.house-facts .icon, .amenities .icon, .check-list .icon, .contact-info .icon { color: var(--lime); }
.stat strong { font-family: var(--font-script); color: var(--lime); }
.stat span, .feature p, .info-card p { color: var(--muted); }
.field input, .field select, .field textarea, .field .field-date { background: #111; color: var(--ink); border-color: var(--line); border-radius: 0; }
.field label { color: var(--ink); }
.faq-item { background: #0b0b0b; color: var(--ink); border: 1px solid var(--line); border-radius: 0; }
.faq-item p { color: var(--muted); }
.cal-panel { background: #fff; color: #111; border-radius: 0; }
.site-footer { background: #050505; border-top: 1px solid var(--line); }
.site-footer .logo-name { color: var(--lime); }
.socials a { border-radius: 0; }

@media (prefers-reduced-motion: no-preference) {
  .marquee-in { animation: gkMarquee 26s linear infinite; }
  @keyframes gkMarquee { to { translate: -50% 0; } }
}
@media (max-width: 960px) {
  .nav { background: #0b0b0b; }
  .nav a:not(.btn) { border-bottom-color: var(--line); }
  .loteng-meta { grid-template-columns: 1fr 1fr; }
  .loteng-sub { grid-column: span 2; }
  .ghead { grid-template-columns: 1fr; gap: 14px; }
  .rows .room-card { grid-template-columns: 1fr; }
  .gridx { grid-template-columns: 1fr 1fr; }
  .lime .features { grid-template-columns: 1fr 1fr; }
  .lime .feature:nth-child(2n) { border-right: 0; }
  .lime .feature { border-bottom: 1px solid #0b0b0b; }
}
@media (max-width: 720px) { .booking-field { border-bottom-color: var(--line); } }
@media (max-width: 560px) {
  .gridx { grid-template-columns: 1fr; }
  .lime .features { grid-template-columns: 1fr; }
  .lime .feature { border-right: 0; }
  .loteng-imgs { grid-template-columns: 1fr; height: auto; }
  .li { height: 240px; }
  .li2 { border-left: 0; border-top: 1px solid var(--line); }
}

/* Teks mono panjang (e-mel, tajuk) jangan tolak skrin */
h1, h2, h3, p, a, li, span { overflow-wrap: anywhere; }
.site-footer *, .contact-grid > *, .split > * { min-width: 0; }
@media (max-width: 560px) {
  .section-title { font-size: 2.15rem; }
}

.btn-primary.is-current { background: var(--lime); color: #0b0b0b; box-shadow: none; }
.house-card-price .btn-light { background: #0b0b0b; color: var(--lime); border-color: #0b0b0b; }
.house-card-price .btn-light:hover { background: #fff; color: #0b0b0b; }
.house-card-price a, .house-wa { color: #0b0b0b; }
/* Kalendar kekal cerah supaya tarikh penuh mudah dibaca */
.cal-inline, .cal-panel { --ink: #111; --white: #fff; --cream: #f3f3ef; --cream-dark: #e6e6e0; --line: #d9d9d2; --muted: #666; --brand: #0b0b0b; --brand-dark: #000; background: #fff; color: #111; }
.cal-inline .btn-outline, .cal-panel .btn-outline { color: #0b0b0b; border-color: #0b0b0b; }
.cal-inline .btn-outline:hover, .cal-panel .btn-outline:hover { background: #0b0b0b; color: var(--lime); }
.cal-inline .btn-primary, .cal-panel .btn-primary { background: #0b0b0b; color: var(--lime); border-color: #0b0b0b; }