/*
  KAI Alton, prototipe. Token di :root nanti dipetakan ke theme.json WordPress.
  Emas #9c7424 diambil dari logo: hanya untuk teks besar dan garis (3.78:1 di atas --bg).
  Teks kecil berwarna emas memakai --gold-text (5.45:1).
*/

:root {
  --bg: #f4f1ec;
  --surface: #fbf9f6;
  --ink: #23211d;
  --ink-soft: #5a554d;
  --line: #ddd6cb;
  --gold: #9c7424;
  --gold-text: #7d5c1c;
  --dark: #2b2c25;
  --dark-ink: #f1ede4;
  --dark-soft: #c4bdae;
  --gold-on-dark: #c9a45c;

  /* Cinzel menggemakan huruf inskripsi Romawi pada "KAIA"; Jost menggemakan sans geometris "ALTON INTERNATIONAL" */
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "Jost", "Century Gothic", system-ui, sans-serif;

  --container: 1440px;
  --gutter: clamp(16px, 4vw, 64px);
  --section-y: clamp(72px, 10vw, 140px);
  --radius: 2px;
  --header-h: 92px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, iframe { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; }
p { margin: 0 0 1.2em; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.18;
  margin: 0 0 0.6em;
}
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.5rem; margin-bottom: 0.4em; }
.accent { color: var(--gold); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--bg);
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-y) 0; }
.section-lead { color: var(--ink-soft); font-size: 1.08rem; }

.label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gold-text);
  margin-bottom: 1.4em;
}

/* Huruf kapital renggang hanya untuk eyebrow dan kategori brand, meniru baris "ALTON INTERNATIONAL" di logo */
.eyebrow,
.brand-cat {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 28px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s ease;
}
.btn:hover { background: var(--gold-text); }

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--bg);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { display: inline-flex; padding: 4px 0; }
.logo img { height: 62px; width: auto; }

.site-nav { display: flex; gap: clamp(20px, 3vw, 40px); }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--gold); }
/* Menu aktif: warna emas + garis bawah tetap, jadi tidak bergantung pada warna saja */
.site-nav a[aria-current="true"] {
  color: var(--gold-text);
  font-weight: 500;
  border-bottom-color: var(--gold-text);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px 0 12px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 500 0.95rem var(--font-body);
  cursor: pointer;
}
.nav-toggle-icon { position: relative; width: 22px; height: 12px; }
.nav-toggle-icon span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s ease;
}
.nav-toggle-icon span:first-child { top: 0; }
.nav-toggle-icon span:last-child { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:first-child { transform: translateY(5.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:last-child { transform: translateY(-5.25px) rotate(-45deg); }

/* Hero HP & tablet: foto portrait penuh layar, teks di bawah. Bagian atas (lampu kristal) dibiarkan
   lebih terang; mulai 30% tinggi scrim sudah 78% sehingga teks krem tetap 6.5:1. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--header-h);
  color: var(--dark-ink);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 33, 29, 0.2) 0%, rgba(35, 33, 29, 0.78) 30%, rgba(35, 33, 29, 0.86) 100%);
}
.hero-text {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px var(--gutter) 56px;
}
.hero-title { font-size: clamp(2.6rem, 6.4vw, 5.6rem); max-width: 11em; margin-bottom: 0.45em; }
.hero .eyebrow,
.hero .accent { color: #e3c992; }
.hero-lead { font-size: 1.12rem; max-width: 480px; margin-bottom: 2.2em; }
.hero .btn { background: var(--dark-ink); color: var(--ink); }
.hero .btn:hover { background: #fff; }

/* Desktop: foto dalam bingkai oval (bentuk dari logo KAIA) dengan garis emas tipis di luar foto.
   Lebar oval 34vw tapi dibatasi tinggi layar, jadi oval ikut membesar di layar lebar tanpa terpotong. */
@media (min-width: 961px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: clamp(32px, 4vw, 96px);
    padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    color: var(--ink);
    background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 50%, #e6d9c6 100%);
  }
  .hero-media::after { display: none; }
  .hero-text {
    max-width: none;
    margin: 0;
    padding: 48px 0 48px max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  }
  .hero .eyebrow { color: var(--gold-text); }
  .hero .accent { color: var(--gold); }
  .hero-lead { color: var(--ink-soft); }
  .hero .btn { background: var(--ink); color: var(--bg); }
  .hero .btn:hover { background: var(--gold-text); }
  .hero-media {
    position: relative;
    width: min(34vw, calc((100svh - var(--header-h) - 112px) * 2 / 3));
    aspect-ratio: 2 / 3;
    margin: 56px 14px;
  }
  .hero-media::before {
    content: "";
    position: absolute;
    inset: -14px;
    border: 1px solid var(--gold);
    border-radius: 999px;
  }
  .hero-media img { border-radius: 999px; object-position: center; }
}

/* Story */
.story-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}
.story-text > p:not(.label):not(.tagline) { color: var(--ink-soft); }
.tagline {
  margin: 2em 0 0;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.5;
}
.story-media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); }

/* Approach: kepala di kiri, prinsip sebagai daftar bergaris di kanan, bukan kartu */
.approach { background: var(--surface); }
.approach-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}
.approach-head { position: sticky; top: calc(var(--header-h) + 40px); }
.principles { list-style: none; margin: 0; padding: 0; }
.principle {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.principle:first-child { border-top: 0; padding-top: 0; }
/* Ikon garis tipis dalam lingkaran: target = tujuan, sosok = manusia, tunas = pertumbuhan */
.principle-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-text);
}
.principle-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.principle-icon .fill { fill: currentColor; }
/* Judul prinsip berwarna emas (5.84:1 di atas --surface) supaya beda dari paragraf */
.principle h3 { color: var(--gold-text); }
.principle p { color: var(--ink-soft); margin: 0; }

/* Brands: tiga card sebaris dengan bobot sama, karena ketiganya brand setara di bawah holding */
.brands-head { max-width: 640px; margin-bottom: clamp(40px, 6vw, 72px); }
.brand-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
.brand {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.brand-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.brand-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 28px 28px 32px;
}
.brand-name { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
/* Nama brand adalah link-nya; garis bawah emas + panah ↗ menandai link keluar ke website/Instagram */
.brand-name a {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}
.brand-name a:hover { color: var(--gold-text); }
.brand-arrow { font-family: var(--font-body); font-size: 0.6em; color: var(--gold-text); }
.brand-body p:not(.brand-cat) { color: var(--ink-soft); margin: 0; }
.brand-cat { margin-bottom: 0.8em; }

/* Partners: cermin dari Story (foto kiri, teks kanan) supaya ritme halaman bergantian */
.partners-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}
.partners-media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 5%; border-radius: var(--radius); }
.partners-text > p:not(.label) { color: var(--ink-soft); }
.partners-text .btn { margin-top: 0.8em; }

/* Closing: tanpa foto, logo KAIA jadi titik fokus. Gradient gelap dengan cahaya hangat di belakang logo
   (titik paling terang #3b3729: paragraf 6.37:1) lalu makin pekat ke tepi. Logo diterangkan 125%. */
.closing {
  position: relative;
  overflow: hidden;
  color: var(--dark-ink);
  text-align: center;
  padding: clamp(96px, 12vw, 180px) 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 32%, #3b3729 0%, rgba(59, 55, 41, 0) 70%),
    linear-gradient(180deg, #2b2c25 0%, #1f2019 60%, #16170f 100%);
}
.closing-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.closing-logo {
  width: clamp(200px, 22vw, 300px);
  height: auto;
  margin-bottom: clamp(32px, 4vw, 56px);
  filter: brightness(1.25);
}
.closing-title { font-size: clamp(2rem, 4.6vw, 3.8rem); max-width: 900px; }
.closing p { color: var(--dark-soft); font-size: 1.12rem; max-width: 600px; margin: 0; }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: stretch;
}
.contact h2 { max-width: 520px; }
.contact-list { margin: 2.4rem 0 0; }
.contact-list > div { padding: 16px 0; border-top: 1px solid var(--line); }
.contact-list > div:last-child { border-bottom: 1px solid var(--line); }
.contact-list dt { font-size: 0.9rem; font-weight: 500; color: var(--gold-text); }
.contact-list dd { margin: 4px 0 0; }
.contact-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.2rem;
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-list a:hover { color: var(--gold-text); }
.contact-list address { font-style: normal; }
/* Alamat tetap ukuran teks biasa; garis bawah emas menandai bahwa alamat bisa diklik ke Google Maps */
.contact-list .address-link {
  display: inline;
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 5px;
  line-height: 1.9;
}
.contact-list .address-link:hover { color: var(--ink); }
.map iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  border-radius: var(--radius);
}

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 40px;
}
.footer-logo { height: 56px; width: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer-nav a:hover { color: var(--gold-text); }
.footer-copy { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

/* Hanya judul bagian dan foto yang muncul pelan saat masuk layar, sebagai penanda pergantian bagian */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Tablet & laptop kecil */
@media (max-width: 960px) {

  .story-grid,
  .approach-grid,
  .partners-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .approach-head { position: static; }
  /* Tablet: card terlalu sempit kalau bertiga, jadi berubah jadi baris foto kiri + teks kanan */
  .brand-list { grid-template-columns: 1fr; }
  .brand { display: grid; grid-template-columns: 5fr 6fr; }
  /* Foto absolut supaya tinggi baris ditentukan teks, bukan rasio foto (KAIGRO potret) */
  .brand-media { position: relative; min-height: 260px; }
  .brand-media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .brand-body { align-self: center; padding: clamp(28px, 4vw, 44px); }
  /* Foto portrait dipotong ke 4:3 di tablet; titik fokus digeser supaya poster/logo tetap terlihat */
  .story-media img { aspect-ratio: 4 / 3; object-position: 50% 45%; }
  .partners-media img { aspect-ratio: 4 / 3; object-position: 50% 8%; }
  .partners-media { order: 2; }
  .map iframe { min-height: 360px; }
}

/* HP */
@media (max-width: 760px) {
  :root { --header-h: 72px; }
  body { font-size: 16px; }
  .logo img { height: 48px; }

  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 16px var(--gutter);
    background: var(--bg);
    border-top: 1px solid var(--line);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    min-height: 64px;
    font-family: var(--font-display);
    font-size: 1.5rem;
    border-bottom: 1px solid var(--line);
  }
  .site-nav a[aria-current="true"] {
    border-bottom-color: var(--line);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 8px;
  }

  .principle { grid-template-columns: 48px 1fr; padding: 28px 0; }
  .principle-icon { width: 48px; height: 48px; }
  .principle-icon svg { width: 22px; height: 22px; }
  .tagline { font-size: 1.05rem; }
}

@media (max-width: 600px) {
  .brand { display: flex; }
  .brand-media { min-height: 0; }
  .brand-media img { position: static; aspect-ratio: 16 / 10; height: auto; }
  .story-media img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
  .partners-media img { aspect-ratio: 4 / 5; object-position: 50% 5%; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}