/* ==========================================================================
   AI for Everyone — Claude & Claude Code
   Design system: "Kedai Kopi"
   One stylesheet. Tokens first, then layout, then components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · Warna, taip, ruang  (tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Warna utama */
  --enamel:        #FBF6EA;  /* latar halaman */
  --tile:          #0E5C4A;  /* bingkai, kepala, kaki */
  --tile-pressed:  #0A4638;  /* WhatsApp ditekan */
  --brick:         #B94A2E;  /* butang daftar sahaja */
  --brick-hover:   #9C3B22;  /* bata ditekan */
  --brick-pressed: #8A3319;
  --mustard:       #E0A62E;  /* tempat tinggal, tanda */
  --ink:           #241C15;  /* semua teks utama */

  /* Warna sokongan */
  --card:          #FFFFFF;  /* kad */
  --panel:         #F3ECDC;  /* panel lembut */
  --line:          #E6DCC6;  /* garis halus */
  --text-2:        #6B5C46;  /* teks kedua */
  --text-body:     #3D3226;  /* badan panjang */
  --disabled:      #D6C7B0;  /* butang mati */
  --field-muted:   #A89880;  /* teks medan mati */
  --field-glow:    #CDE3DB;  /* cahaya fokus medan */

  /* Taip */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Barlow', 'Helvetica Neue', Arial, sans-serif;

  /* Skala ruang */
  --s-4:   4px;   /* jarak dalam label */
  --s-8:   8px;   /* teks dan tanda */
  --s-12:  12px;  /* item dalam senarai */
  --s-16:  16px;  /* padding dalaman kad kecil */
  --s-24:  24px;  /* padding halaman (telefon) */
  --s-32:  32px;  /* padding kad besar */
  --s-52:  52px;  /* jarak antara blok */
  --s-72:  72px;  /* jarak antara seksyen besar */

  /* Sudut dan bingkai */
  --radius-tag:  3px;    /* tanda dan tag sahaja */
  --radius-pill: 999px;  /* butang sahaja */
  --border:      2px;
  --shadow-card: 4px 4px 0 var(--tile);  /* kad pendaftaran sahaja */

  /* Gerakan — had penuh */
  --t-button: 120ms;
  --t-faq:    160ms;
  --t-reveal: 240ms;
}

/* --------------------------------------------------------------------------
   02 · Asas
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--enamel);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brick); text-decoration: none; }
a:hover { color: var(--brick-hover); text-decoration: underline; }

/* Fokus papan kekunci — sama di seluruh laman */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

h1, h2, h3, p { margin: 0; }

/* Peraturan taip: tiada huruf besar lebih lima patah perkataan,
   tiada berat di bawah 400, tiada teks badan di bawah 16px. */
.display-xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 8.5vw, 46px);
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: pretty;
}
.display-l {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 7.5vw, 42px);
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: pretty;
}
.heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 5.5vw, 28px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--tile);
}
.heading--ink { color: var(--ink); }
.subheading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
}
.label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.body-lg { font-size: 18px; line-height: 1.6; color: var(--text-body); max-width: 62ch; }
.body    { font-size: 16px; line-height: 1.55; }
.small   { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.muted   { color: var(--text-2); }

/* Butiran yang tuan rumah masih perlu sahkan — cari "todo" untuk jumpa. */
.todo { color: var(--brick); font-weight: 600; }

.stack-8  > * + * { margin-top: var(--s-8); }
.stack-12 > * + * { margin-top: var(--s-12); }

/* --------------------------------------------------------------------------
   03 · Susun atur
   -------------------------------------------------------------------------- */
.container {
  max-width: 920px;
  margin: 0 auto;
  padding-left: var(--s-24);
  padding-right: var(--s-24);
}

.section        { padding-top: var(--s-52); }
.section--first { padding-top: 36px; }
.section--tight { padding-top: 26px; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Satu pudar lembut di bahagian atas, 240ms, sekali sahaja. Itu had penuh. */
.reveal { animation: soft-reveal var(--t-reveal) ease-out both; }
@keyframes soft-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   04 · Kepala dan navigasi  (sama pada setiap halaman)
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--tile);
  color: var(--enamel);
}
.site-header__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 14px var(--s-24);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
}
.brand { color: var(--enamel); display: block; }
.brand:hover { color: var(--enamel); text-decoration: none; }
.brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.brand__sub {
  display: block;
  font-size: 13px;
  opacity: .8;
}

.nav { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; }
.nav__tab {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: var(--s-8) var(--s-16);
  border-radius: var(--radius-pill);
  border: var(--border) solid rgba(251, 246, 234, .45);
  background: transparent;
  color: var(--enamel);
  transition: background var(--t-button), color var(--t-button), border-color var(--t-button);
}
.nav__tab:hover {
  color: var(--enamel);
  border-color: var(--enamel);
  text-decoration: none;
}
.nav__tab[aria-current="page"] {
  border-color: var(--enamel);
  background: var(--enamel);
  color: var(--tile);
}
.nav__tab[aria-current="page"]:hover { color: var(--tile); }

/* --------------------------------------------------------------------------
   05 · Butang, semua keadaan
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 12px var(--s-24);
  border: var(--border) solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: center;
  transition: background var(--t-button), color var(--t-button), border-color var(--t-button);
}
.btn:hover { text-decoration: none; }

/* Utama — pendaftaran. Bata sahaja untuk kerja pendaftaran. */
.btn--primary { background: var(--brick); color: var(--enamel); }
.btn--primary:hover  { background: var(--brick-hover); color: var(--enamel); }
.btn--primary:active { background: var(--brick-pressed); transform: translateY(1px); }

/* Kedua — bingkai jubin hijau, isi penuh bila hover. */
.btn--secondary { background: transparent; color: var(--tile); border-color: var(--tile); }
.btn--secondary:hover { background: var(--tile); color: var(--enamel); }

/* WhatsApp — hijau jubin. */
.btn--tile { background: var(--tile); color: var(--enamel); }
.btn--tile:hover  { background: var(--tile-pressed); color: var(--enamel); }
.btn--tile:active { background: var(--tile-pressed); transform: translateY(1px); }

/* WhatsApp di atas blok jubin hijau. */
.btn--enamel { background: var(--enamel); color: var(--tile); }
.btn--enamel:hover { background: var(--mustard); color: var(--ink); }

/* Mati — bila 30 tempat habis. */
.btn--disabled,
.btn[aria-disabled="true"] {
  background: var(--disabled);
  color: var(--enamel);
  pointer-events: none;
}

.btn--lg { font-size: 22px; padding: 13px 26px; }
.btn--sm { font-size: 18px; padding: 9px 20px; }

/* Pautan teks — garis pekat bila hover. */
.link-underline {
  color: var(--brick);
  font-weight: 600;
  font-size: 16px;
  border-bottom: var(--border) solid var(--line);
  padding-bottom: 2px;
  transition: border-color var(--t-button);
}
.link-underline:hover { border-bottom-color: var(--brick); text-decoration: none; }

/* --------------------------------------------------------------------------
   06 · Panel, kad, tanda
   -------------------------------------------------------------------------- */
/* Panel dan kad: sudut tajam, 0px, bingkai 2px. */
.card {
  background: var(--card);
  border: var(--border) solid var(--ink);
  padding: 18px;
}
.card--soft {
  background: var(--panel);
  border-color: var(--tile);
}
.card--pad { padding: var(--s-16); }

/* Bayang: satu sahaja — 4px 4px 0, hanya pada kad pendaftaran. */
.enrol-card {
  background: var(--card);
  border: var(--border) solid var(--ink);
  box-shadow: var(--shadow-card);
  padding: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-24);
  align-items: center;
}
.enrol-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 9vw, 44px);
  line-height: 1;
}
.enrol-card__price span {
  font-size: 17px;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-2);
}
.enrol-card__when { font-size: 16px; line-height: 1.65; margin-top: 6px; }
.enrol-card__main { flex: 1 1 300px; }
.enrol-card__cta  { flex: 0 1 300px; }
.enrol-card__note { font-size: 15px; color: var(--text-2); margin-top: 9px; line-height: 1.5; }

/* Tanda tempat — tiga keadaan. Tiada jam undur, tiada tanda seru. */
.seats {
  display: inline-block;
  background: var(--mustard);
  color: var(--ink);
  padding: 2px var(--s-8);
  border-radius: var(--radius-tag);
  font-weight: 600;
}
.seats--low  { background: var(--brick); color: var(--enamel); }  /* bawah 8 */
.seats--full { background: var(--line);  color: var(--text-2); }  /* penuh */

/* Tanda kunyit di kepala halaman. Kunyit tidak pernah membawa teks putih. */
.tag {
  display: inline-block;
  background: var(--mustard);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: var(--s-4) 10px;
  border-radius: var(--radius-tag);
}

/* --------------------------------------------------------------------------
   07 · Kepala halaman dengan gambar
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 26px;
  align-items: start;
}
.hero--about { grid-template-columns: 220px 1fr; }

.portrait {
  border: var(--border) solid var(--tile);
  background: var(--panel);
  width: 100%;
  height: 230px;
  object-fit: cover;
}
.hero--about .portrait { height: 260px; }

.hero__name { font-weight: 600; font-size: 17px; margin-top: 14px; }
.hero__role { font-size: 16px; color: var(--text-2); }

/* --------------------------------------------------------------------------
   08 · Senarai bernombor  (tujuh langkah)
   -------------------------------------------------------------------------- */
.steps { display: flex; flex-direction: column; gap: 10px; font-size: 17px; line-height: 1.55; }
.steps__row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.steps__row:last-child { border-bottom: 0; padding-bottom: 0; }
.steps__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--brick);
}

/* Kad silibus */
.syllabus { display: flex; flex-direction: column; gap: 14px; }
.syllabus__card {
  background: var(--card);
  border: var(--border) solid var(--ink);
  padding: 18px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
}
.syllabus__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: var(--brick);
}
.syllabus__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
}
.syllabus__body { font-size: 17px; line-height: 1.7; margin-top: var(--s-8); }

/* --------------------------------------------------------------------------
   09 · FAQ — tutup dan buka. 160ms, tinggi sahaja. Tiada slaid, tiada pudar.
   -------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; }
.faq__item { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq__q {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: var(--s-12);
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  transition: color var(--t-button);
}
.faq__q[aria-expanded="true"] { color: var(--brick); }
.faq__sign { font-family: var(--font-display); }
.faq__panel { overflow: hidden; }
.faq__panel-inner {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
  padding-top: var(--s-8);
  max-width: 66ch;
}
.faq__panel.is-animating { transition: height var(--t-faq) ease; }

/* Tanpa JavaScript, semua jawapan kekal terbuka. */
html.no-js .faq__panel[hidden] { display: block; }
html.no-js .faq__sign { display: none; }

/* --------------------------------------------------------------------------
   10 · Medan borang — empat keadaan
   -------------------------------------------------------------------------- */
.form { max-width: 520px; }
.form__fields { display: flex; flex-direction: column; gap: 14px; }

.field__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--s-4);
}
.field__input {
  width: 100%;
  border: var(--border) solid var(--ink);
  border-radius: 0;
  padding: 10px var(--s-12);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--card);
}
.field__input::placeholder { color: var(--text-2); opacity: 1; }

/* Fokus — bingkai jubin hijau dengan cahaya lembut. */
.field__input:focus,
.field__input:focus-visible {
  border-color: var(--tile);
  outline: 3px solid var(--field-glow);
  outline-offset: 0;
}

/* Salah */
.field__input[aria-invalid="true"] { border-color: var(--brick); }
.field__error { font-size: 14px; color: var(--brick); margin-top: var(--s-4); }

/* Mati */
.field__input:disabled {
  border-color: var(--line);
  background: var(--panel);
  color: var(--field-muted);
}
/* Label medan mati — letak .field--disabled pada pembungkus .field. */
.field--disabled .field__label { color: var(--text-2); }

.form__submit { margin-top: var(--s-16); }

/* --------------------------------------------------------------------------
   11 · Blok WhatsApp
   -------------------------------------------------------------------------- */
.whatsapp-band {
  background: var(--tile);
  color: var(--enamel);
  padding: var(--s-24);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}
.whatsapp-band__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 5.5vw, 28px);
  line-height: 1.1;
  text-transform: uppercase;
}
.whatsapp-band__note { font-size: 16px; opacity: .85; margin-top: 2px; }

/* --------------------------------------------------------------------------
   12 · Kaki  (sama pada setiap halaman)
   -------------------------------------------------------------------------- */
.footer-wrap { padding-top: var(--s-52); }

.enrol-bar {
  position: sticky;
  bottom: 0;
  background: var(--ink);
  color: var(--enamel);
  padding: var(--s-12) var(--s-24);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
.enrol-bar__text { font-size: 16px; }

.site-footer {
  border-top: var(--border) solid var(--ink);
  padding: 20px 0 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
}
.site-footer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}
.site-footer__notes { color: var(--text-2); }

/* --------------------------------------------------------------------------
   13 · Telefon dan tablet
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hero,
  .hero--about { grid-template-columns: 1fr; gap: 18px; }
  .portrait,
  .hero--about .portrait { max-width: 220px; height: 250px; }
  .enrol-card__cta { flex: 1 1 100%; }
  .enrol-card__cta .btn,
  .whatsapp-band .btn { width: 100%; }
  .whatsapp-band { justify-content: flex-start; }
  .enrol-bar { justify-content: space-between; }
  .site-footer { gap: var(--s-24); }
}

@media (max-width: 420px) {
  .nav__tab { font-size: 15px; padding: 6px var(--s-12); }
  .brand__name { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   14 · Kurangkan gerakan
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .faq__panel.is-animating { transition: none; }
}