/* GARANG Barber — konsep LimStudio (portofolio-12). Gelap mewah ala poster tinju / sampul majalah olahraga.
   Palet: arang (latar), tulang (teks), abu (teks kecil), bara (aksen: tombol, garis, angka). Huruf: Anton + Inter Tight. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/anton-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/inter-tight-normal-400_600.woff2') format('woff2'); }

:root {
  --arang: #0E0E0E;
  --arang-2: #171615;
  --tulang: #ECE5D8;
  --abu: #8A847A;
  --bara: #E2462B;
  --garis: rgba(236, 229, 216, .16);
  --tepi: clamp(1rem, 3.4vw, 3.25rem);
  --j1: .5rem; --j2: 1rem; --j3: 1.5rem; --j4: 2.5rem; --j5: 4rem; --j6: 6rem; --j7: 9rem;
  --bagian: clamp(5rem, 11vw, 11rem);
  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --badan: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --lentur: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

html { background: var(--arang); }
body {
  background: var(--arang); color: var(--tulang);
  font-family: var(--badan); font-size: 1.0625rem; line-height: 1.6; font-weight: 400;
}
::selection { background: var(--bara); color: var(--arang); }
a { text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lewati { background: var(--bara); color: var(--arang); font-weight: 600; }
:focus-visible { outline-color: var(--bara); }

/* butiran film: satu ubin SVG, diam (tanpa animasi) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* foto: perlakuan seragam hitam-putih kontras */
.pembuka__foto img, .bingkai img, .kartu img, .lokasi__foto img, .baris__foto img, .pengikut img {
  filter: grayscale(1) contrast(1.14) brightness(.92);
}

/* ---------- unsur bersama ---------- */
.label {
  display: flex; align-items: center; gap: .75rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--abu);
}
.label__no { color: var(--bara); font-variant-numeric: tabular-nums; }
.label__no::after { content: ""; display: inline-block; width: 1.75rem; height: 1px; background: var(--bara); margin-left: .75rem; vertical-align: middle; }

.judul-besar {
  font-family: var(--display); text-transform: uppercase; line-height: .9; letter-spacing: -.005em;
  font-size: clamp(3.1rem, 9vw, 9.5rem); margin-top: var(--j3);
}
.judul-besar em { font-style: normal; color: var(--bara); }

.tombol {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 1.4rem; background: var(--bara); color: var(--arang);
  font-weight: 600; font-size: .95rem; letter-spacing: .02em; border: 0; cursor: pointer;
  transition: background-color .3s, color .3s;
}
.tombol svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .4s var(--lentur); }
.tombol--kecil { padding: .55rem .9rem; font-size: .85rem; }
.tombol--besar { padding: 1.2rem 1.6rem; font-size: 1.05rem; }
.tombol--garis { background: none; color: var(--tulang); box-shadow: inset 0 0 0 1px var(--garis); }

/* ---------- kepala ---------- */
.kepala {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--j2);
  padding: .9rem var(--tepi);
  transition: transform .5s var(--lentur), background-color .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.kepala.padat { background: rgba(14, 14, 14, .94); border-bottom-color: var(--garis); }
.kepala.sembunyi { transform: translateY(-100%); }
.merek { display: flex; align-items: baseline; gap: .6rem; line-height: 1; }
.merek b { font-family: var(--display); font-weight: 400; font-size: 1.6rem; letter-spacing: .02em; }
.merek small { display: none; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--abu); font-weight: 600; }
@media (min-width: 560px) { .merek small { display: inline; } }
.kepala__nav { display: none; gap: var(--j4); }
.kepala__nav a { font-size: .85rem; font-weight: 600; letter-spacing: .04em; position: relative; }
.kepala__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.3rem; height: 1px; background: var(--bara); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--lentur); }
.kepala__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.kepala__kanan { display: flex; align-items: center; gap: .35rem; }
.bahasa-pilih button { color: var(--tulang); }
.bahasa-pilih button.aktif { text-decoration-color: var(--bara); }
.konsep-tombol {
  display: inline-flex; align-items: center; gap: .45rem; background: none; border: 0; cursor: pointer;
  padding: .4rem .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--tulang);
}
.konsep-tombol i { width: .5rem; height: .5rem; background: var(--bara); border-radius: 50%; }
.konsep-tombol[aria-expanded="true"] i { box-shadow: 0 0 0 3px rgba(226, 70, 43, .3); }
.konsep-kartu {
  position: absolute; top: calc(100% + .25rem); right: var(--tepi); width: min(23rem, calc(100% - 2 * var(--tepi)));
  background: var(--tulang); color: var(--arang); padding: 1.35rem 1.4rem 1.25rem; font-size: .92rem; line-height: 1.55;
}
.konsep-kartu__label { font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; line-height: 1; margin-bottom: .7rem; }
.konsep-kartu__aksi { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1rem; }
.konsep-kartu__aksi a { font-weight: 600; border-bottom: 1px solid var(--bara); padding-bottom: .1rem; }

/* ---------- 1. pembuka ---------- */
.pembuka { position: relative; height: 230svh; }
.pembuka__lekat {
  position: sticky; top: 0; height: 100svh; min-height: 34rem; overflow: hidden;
  container-type: inline-size;
  display: grid; grid-template-rows: auto 1fr auto; padding: 5.25rem var(--tepi) 0;
}
.pembuka__foto, .pembuka__gelap { position: absolute; inset: 0; }
.pembuka__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 30%; transform-origin: 58% 40%; will-change: transform; }
.pembuka__gelap { background: linear-gradient(180deg, rgba(14,14,14,.55) 0%, rgba(14,14,14,.12) 32%, rgba(14,14,14,.35) 62%, rgba(14,14,14,.94) 100%); }
.pembuka__atas, .pembuka__tengah, .pembuka__judul, .pembuka__gulir { position: relative; }
.pembuka__atas { display: flex; justify-content: space-between; gap: var(--j2); border-top: 1px solid var(--garis); padding-top: .9rem; }
.pembuka__atas .label { color: var(--tulang); }
.label--kanan { display: none; }
.pembuka__tengah { align-self: end; display: grid; gap: var(--j3); padding: var(--j3) 0; }
.slogan { font-family: var(--display); text-transform: uppercase; line-height: .92; font-size: clamp(2.9rem, 13.4cqw, 7.4rem); display: grid; }
.slogan__kata { display: block; will-change: transform; }
.slogan__kata--bara { color: var(--bara); }
.pembuka__sisi { display: grid; gap: var(--j3); max-width: 25rem; }
.pembuka__sisi p { font-size: 1rem; color: var(--tulang); opacity: .88; }
.pembuka__sisi .tombol { justify-self: start; }
.pembuka__judul { line-height: 1; }
.raksasa {
  display: flex; justify-content: space-between;
  font-family: var(--display); text-transform: uppercase; color: var(--tulang);
  font-size: min(calc((100cqw - 2 * var(--tepi)) / 2.93), 58svh);
  line-height: 1; margin: -.06em 0 -.045em;
  transform-origin: 50% 100%;
}
.raksasa span { display: block; }
.pembuka__gulir {
  position: absolute; right: var(--tepi); top: 50%; display: none; align-items: center; gap: .75rem;
  writing-mode: vertical-rl; font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--abu);
}
.pembuka__gulir i { width: 1px; height: 4.5rem; background: var(--garis); position: relative; overflow: hidden; }
.pembuka__gulir b { position: absolute; inset: 0; background: var(--bara); transform: scaleY(.18); transform-origin: top; }
/* jalur kemajuan pembuka */
.pembuka__lekat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bara); transform: scaleX(var(--maju, 0)); transform-origin: left; }

/* ---------- pita berjalan ---------- */
.pita { overflow: hidden; border-block: 1px solid var(--garis); padding: .95rem 0; white-space: nowrap; position: relative; }
.pita__jalur { display: inline-flex; align-items: center; will-change: transform; }
.pita__jalur span { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.35rem, 2.6vw, 2.4rem); line-height: 1; padding: 0 1.4rem; }
.pita__jalur i { width: .55rem; height: .55rem; background: var(--bara); transform: rotate(45deg); flex: none; }
.pita-bungkus { overflow: hidden; padding: var(--j4) 0 var(--j2); margin-top: var(--j3); }
.pita--bara { background: var(--bara); color: var(--arang); border: 0; transform: rotate(-1.6deg) scale(1.04); }
.pita--bara .pita__jalur i { background: var(--arang); }

/* ---------- 2. cerita ---------- */
.cerita { padding: var(--bagian) var(--tepi); display: grid; gap: var(--j5); }
.cerita__isi { display: grid; gap: var(--j3); margin-top: var(--j4); max-width: 34rem; color: rgba(236, 229, 216, .86); }
.fakta { display: grid; gap: 0; margin: var(--j5) 0 0; border-top: 1px solid var(--garis); max-width: 34rem; }
.fakta div { display: grid; grid-template-columns: 4.5rem 1fr; align-items: baseline; gap: var(--j2); padding: 1rem 0; border-bottom: 1px solid var(--garis); }
.fakta dt { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--bara); }
.fakta dd { margin: 0; color: var(--abu); font-size: .95rem; }
.cerita__foto { position: relative; padding-bottom: 12%; }
.bingkai { margin: 0; position: relative; overflow: hidden; }
.bingkai img { width: 100%; height: 100%; object-fit: cover; }
.bingkai--besar { width: 80%; margin-left: auto; aspect-ratio: 4 / 5; }
.bingkai--kecil { position: absolute; left: 0; bottom: 0; width: 58%; aspect-ratio: 3 / 2; outline: .7rem solid var(--arang); overflow: visible; }
.bingkai--kecil picture { display: block; height: 100%; overflow: hidden; }
.bingkai--kecil figcaption { position: absolute; left: 0; top: calc(100% + 1.2rem); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--abu); font-weight: 600; }
/* tirai penyingkap foto (transform saja) */
[data-ungkap] { position: relative; }
[data-ungkap]::after { content: ""; position: absolute; inset: 0; background: var(--arang); transform-origin: top; transform: scaleY(var(--tirai, 0)); pointer-events: none; }
.bingkai--kecil[data-ungkap]::after { inset: 0 0 auto; height: 100%; }

/* ---------- 3. layanan ---------- */
.layanan { padding: 0 0 var(--bagian); }
.kepala-bagian { padding: 0 var(--tepi) var(--j5); display: grid; }
.kepala-bagian__catatan { margin-top: var(--j3); max-width: 30rem; color: var(--abu); font-size: .95rem; }
.kepala-bagian__catatan b { color: var(--tulang); font-weight: 600; }
.daftar { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--garis); }
.baris { border-bottom: 1px solid var(--garis); position: relative; }
.baris::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--bara); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--lentur); }
.baris__tautan {
  display: grid; grid-template-columns: 2rem 1fr 4.6rem; grid-template-areas: "no nama foto" "no info foto";
  align-items: center; column-gap: var(--j2); row-gap: .35rem; padding: 1.15rem var(--tepi);
}
.baris__no { grid-area: no; align-self: start; padding-top: .45rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--bara); font-variant-numeric: tabular-nums; }
.baris__nama { grid-area: nama; font-family: var(--display); text-transform: uppercase; font-size: clamp(2.15rem, 8.6vw, 8.6rem); line-height: .95; transition: transform .6s var(--lentur), color .3s; }
.baris__info { grid-area: info; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .88rem; color: var(--abu); font-variant-numeric: tabular-nums; }
.baris__harga { color: var(--tulang); font-weight: 600; }
.baris__foto { grid-area: foto; aspect-ratio: 4 / 5; overflow: hidden; }
.baris__foto img { width: 100%; height: 100%; object-fit: cover; }
.baris__tautan:focus-visible { outline-offset: -3px; }
.baris:hover::after, .baris:focus-within::after { transform: scaleX(1); }

/* pratinjau yang mengikuti kursor (dibuat utama.js, hanya hover:hover) */
.pengikut {
  position: fixed; left: 0; top: 0; z-index: 55; width: clamp(14rem, 17vw, 19rem); aspect-ratio: 4 / 5;
  pointer-events: none; overflow: hidden; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.6);
  transition: opacity .35s;
}
.pengikut.tampak { opacity: 1; }
.pengikut__lapis { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.pengikut__lapis.aktif { opacity: 1; }
.pengikut img { width: 100%; height: 100%; object-fit: cover; }
.pengikut__harga { position: absolute; left: 0; bottom: 0; background: var(--bara); color: var(--arang); font-weight: 600; font-size: .8rem; padding: .35rem .6rem; letter-spacing: .04em; }

/* ---------- 4. galeri ---------- */
.galeri { padding: 0 0 var(--bagian); }
.galeri__kepala { padding: 0 var(--tepi) var(--j4); display: grid; }
.galeri__catatan { margin-top: var(--j3); color: var(--abu); max-width: 28rem; font-size: .95rem; }
.galeri__hitung { display: none; font-family: var(--display); font-size: 1.4rem; color: var(--abu); margin-top: var(--j3); font-variant-numeric: tabular-nums; }
.galeri__hitung b { font-weight: 400; color: var(--bara); }
.galeri__geser { display: flex; align-items: center; gap: .5rem; margin-top: var(--j3); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tulang); }
.galeri__geser svg { width: 1rem; height: 1rem; fill: none; stroke: var(--bara); stroke-width: 1.8; }
.galeri__jendela { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.galeri__jendela::-webkit-scrollbar { display: none; }
.galeri__jalur { list-style: none; margin: 0; padding: 0 var(--tepi) var(--j2); display: flex; gap: 1rem; align-items: flex-start; width: max-content; }
.kartu { flex: none; scroll-snap-align: start; scroll-margin-left: var(--tepi); }
.kartu figure { margin: 0; }
.kartu picture { display: block; overflow: hidden; }
.kartu img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--lentur); }
.kartu figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; padding-top: .9rem; }
.kartu figcaption b { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: 1.6rem; line-height: 1; }
.kartu figcaption span:last-child { grid-column: 2; color: var(--abu); font-size: .88rem; margin-top: .35rem; }
.kartu__no { color: var(--bara); font-size: .75rem; font-weight: 600; letter-spacing: .1em; padding-top: .3rem; }
.kartu--a { width: 68vw; } .kartu--a picture { aspect-ratio: 2 / 3; }
.kartu--b { width: 84vw; margin-top: 3.5rem; } .kartu--b picture { aspect-ratio: 3 / 2; }
.kartu--c { width: 60vw; margin-top: 1.5rem; } .kartu--c picture { aspect-ratio: 3 / 4; }
.kartu--d { width: 70vw; margin-top: 5rem; } .kartu--d picture { aspect-ratio: 4 / 5; }

/* ---------- 5. cara booking ---------- */
.cara { padding: 0 0 var(--bagian); }
.langkah { list-style: none; margin: 0; padding: 0 var(--tepi); display: grid; border-top: 1px solid var(--garis); }
.langkah li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--j3); padding: var(--j4) 0; border-bottom: 1px solid var(--garis); }
.langkah__angka { grid-row: span 2; position: relative; font-family: var(--display); font-size: clamp(6rem, 22vw, 15rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(236, 229, 216, .55); transition: -webkit-text-stroke-color .6s .5s; }
.langkah li.masuk .langkah__angka, html.tenang .langkah__angka { -webkit-text-stroke-color: transparent; }
.langkah__isi { position: absolute; inset: 0; color: var(--bara); -webkit-text-stroke: 0; clip-path: inset(0 0 0 0); opacity: 0; transition: opacity 1.2s var(--lentur) .35s; }
.langkah li.masuk .langkah__isi, html.tenang .langkah__isi, html:not(.js) .langkah__isi { opacity: 1; }
.langkah h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; align-self: end; }
.langkah p { color: var(--abu); margin-top: .7rem; max-width: 22rem; font-size: .98rem; }

/* ---------- 6. booking ---------- */
.booking { padding: 0 var(--tepi) var(--bagian); display: grid; gap: var(--j5); }
.booking__catatan { margin-top: var(--j3); color: var(--abu); max-width: 26rem; font-size: .95rem; }
.formulir { display: grid; gap: var(--j4); }
.formulir__grup { border: 0; margin: 0; padding: 0; min-width: 0; }
.formulir legend, .formulir__isian label { display: flex; align-items: center; gap: .7rem; padding: 0; margin-bottom: .9rem; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--abu); }
.formulir__no { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid var(--bara); color: var(--bara); font-size: .68rem; letter-spacing: 0; }
.pilihan { display: flex; flex-wrap: wrap; gap: .5rem; }
.pilihan label { position: relative; cursor: pointer; }
.pilihan input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pilihan label > span {
  display: grid; gap: .15rem; padding: .7rem 1rem; box-shadow: inset 0 0 0 1px var(--garis);
  font-size: .92rem; transition: background-color .25s, color .25s, box-shadow .25s; min-height: 2.75rem; align-content: center;
}
.pilihan b { font-weight: 600; }
.pilihan small { font-size: .78rem; color: var(--abu); font-variant-numeric: tabular-nums; transition: color .25s; }
.pilihan input:checked + span { background: var(--tulang); color: var(--arang); box-shadow: none; }
.pilihan input:checked + span small { color: #4d4943; }
.pilihan input:focus-visible + span { outline: 2px solid var(--bara); outline-offset: 2px; }
.pilihan--layanan { display: grid; grid-template-columns: 1fr 1fr; }
.pilihan--jam label > span { min-width: 4.6rem; text-align: center; font-variant-numeric: tabular-nums; }
.pilihan--jam input:disabled + span { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.formulir__isian input {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--garis); color: var(--tulang);
  font: inherit; font-size: 1.25rem; padding: .5rem 0 .7rem; border-radius: 0; transition: border-color .3s;
}
.formulir__isian input::placeholder { color: rgba(138, 132, 122, .7); }
.formulir__isian input:focus { outline: none; border-bottom-color: var(--bara); }
.formulir__bawah { display: grid; gap: var(--j2); padding-top: var(--j3); border-top: 1px solid var(--garis); }
.ringkasan { font-size: .95rem; color: var(--tulang); }
.ringkasan b { color: var(--bara); font-weight: 600; }
.formulir__galat { color: var(--bara); font-size: .9rem; font-weight: 600; min-height: 1.4em; }
.formulir .tombol { justify-self: start; }

/* ---------- 7. lokasi ---------- */
.lokasi { display: grid; border-top: 1px solid var(--garis); }
.lokasi__foto { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.lokasi__foto img { width: 100%; height: 100%; object-fit: cover; }
.lokasi__teks { padding: var(--j5) var(--tepi) var(--j4); display: grid; align-content: start; gap: var(--j3); }
.alamat { font-style: normal; display: grid; gap: .3rem; }
.alamat__jalan { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.3rem, 4.6vw, 4.6rem); line-height: .95; }
.alamat__kota { font-size: 1.05rem; }
.alamat small { color: var(--abu); font-size: .8rem; }
.status { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .95rem; min-height: 1.5em; }
.status i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--abu); flex: none; }
.status.buka i { background: var(--bara); box-shadow: 0 0 0 4px rgba(226, 70, 43, .22); }
.jam { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--garis); max-width: 28rem; }
.jam li { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--garis); font-size: .95rem; color: var(--abu); font-variant-numeric: tabular-nums; position: relative; }
.jam li.hari-ini { color: var(--tulang); font-weight: 600; }
.jam li.hari-ini::before { content: ""; position: absolute; left: calc(-1 * var(--tepi)); top: 0; bottom: 0; width: 3px; background: var(--bara); }
.lokasi .tombol { justify-self: start; margin-top: var(--j2); }

/* ---------- 8. kaki ---------- */
.kaki { padding: var(--j6) var(--tepi) var(--j3); overflow: hidden; }
.kaki__atas { display: grid; gap: var(--j4); }
.kaki__kolom { display: grid; gap: .4rem; align-content: start; font-size: .95rem; }
.kaki__kolom a { justify-self: start; }
.kaki__kolom a:hover { color: var(--bara); }
.kaki__kolom p:not(.kaki__judul) { color: var(--abu); }
.kaki__judul { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bara); margin-bottom: .4rem; }
.kaki__kolom--konsep a { border-bottom: 1px solid var(--bara); margin-top: .3rem; }
.kaki__raksasa {
  font-family: var(--display); text-transform: uppercase; line-height: .78; text-align: center;
  font-size: calc((100vw - 2 * var(--tepi)) / 2.95); margin: var(--j5) 0 var(--j3);
  color: transparent; -webkit-text-stroke: 1px rgba(236, 229, 216, .32); user-select: none;
}
.kaki__bawah { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--j2); padding-top: var(--j3); border-top: 1px solid var(--garis); font-size: .82rem; color: var(--abu); }
.kaki__naik { display: inline-flex; align-items: center; gap: .4rem; color: var(--tulang); font-weight: 600; }
.kaki__naik svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------- 404 ---------- */
.hilang { min-height: 100svh; display: grid; align-content: center; gap: var(--j3); padding: 6rem var(--tepi) var(--j5); position: relative; overflow: hidden; }
.hilang .hilang__angka { font-family: var(--display); line-height: .78; font-size: min(calc((100vw - 2 * var(--tepi)) / 1.5), 62svh); color: transparent; -webkit-text-stroke: 1px rgba(236, 229, 216, .45); }
.hilang__angka b { font-weight: 400; color: var(--bara); -webkit-text-stroke: 0; }
.hilang h1 { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.6rem, 7vw, 6rem); line-height: .92; }
.hilang p { color: var(--abu); max-width: 30rem; }
.hilang .tombol { justify-self: start; }

/* ================= layar lebih lebar ================= */
@media (min-width: 640px) {
  .pilihan--layanan { grid-template-columns: repeat(3, 1fr); }
  .kartu--a { width: 46vw; } .kartu--b { width: 62vw; } .kartu--c { width: 40vw; } .kartu--d { width: 48vw; }
  .kaki__atas { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .label--kanan { display: flex; }
  .pembuka__lekat { padding-top: 5.75rem; }
  .pembuka__tengah { grid-template-columns: 1fr auto; align-items: end; align-self: center; }
  .slogan { font-size: clamp(3.4rem, 7.2cqw, 8.4rem); }
  .pembuka__sisi { padding-bottom: .6rem; }
  .pembuka__gulir { display: flex; transform: translateY(-50%); }

  .cerita { grid-template-columns: repeat(12, 1fr); column-gap: var(--j3); align-items: start; }
  .cerita__teks { grid-column: 1 / span 6; position: relative; z-index: 1; }
  .cerita .judul-besar { font-size: clamp(4rem, 7.4vw, 9rem); }
  .cerita__foto { grid-column: 7 / span 6; padding-bottom: 9%; margin-top: 4rem; }
  .bingkai--besar { width: 78%; }
  .bingkai--kecil { width: 56%; left: -14%; }

  .kepala-bagian { grid-template-columns: repeat(12, 1fr); column-gap: var(--j3); align-items: end; }
  .kepala-bagian .label, .kepala-bagian .judul-besar { grid-column: 1 / span 8; }
  .kepala-bagian__catatan { grid-column: 9 / span 4; grid-row: 2; justify-self: end; }

  .baris__tautan { grid-template-columns: 4rem 1fr auto; grid-template-areas: "no nama info"; padding: 1.1rem var(--tepi); }
  .baris__no { align-self: center; padding-top: 0; }
  .baris__info { flex-direction: column; align-items: flex-end; text-align: right; font-size: .92rem; }
  .baris__harga { font-size: 1.05rem; }

  .galeri--pin .galeri__geser, .galeri:not(.galeri--pin) .galeri__hitung { display: none; }
  .galeri--pin .galeri__lekat { padding-top: 4.5rem; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .galeri--pin { padding-bottom: 0; }
  .galeri__kepala { grid-template-columns: 1fr auto; column-gap: var(--j4); align-items: end; }
  .galeri__kepala .label, .galeri__kepala .judul-besar, .galeri__catatan { grid-column: 1; }
  .galeri__hitung { display: block; grid-column: 2; grid-row: 3; }
  .galeri .judul-besar { font-size: clamp(3.4rem, 6vw, 7rem); }
  .galeri__jalur { gap: 2.5vw; padding-right: 12vw; }
  .kartu--a { width: 20vw; } .kartu--b { width: 30vw; margin-top: 8vh; } .kartu--c { width: 17vw; margin-top: 3vh; } .kartu--d { width: 22vw; margin-top: 14vh; }
  .galeri--pin .kartu--a { width: auto; } .galeri--pin .kartu--a picture { height: 46svh; }
  .galeri--pin .kartu--b { width: auto; } .galeri--pin .kartu--b picture { height: 31svh; }
  .galeri--pin .kartu--c { width: auto; } .galeri--pin .kartu--c picture { height: 37svh; }
  .galeri--pin .kartu--d { width: auto; } .galeri--pin .kartu--d picture { height: 40svh; }
  .galeri--pin .kartu picture { aspect-ratio: auto; }
  .galeri--pin .kartu--a picture { width: 30.7svh; } .galeri--pin .kartu--b picture { width: 46.5svh; }
  .galeri--pin .kartu--c picture { width: 27.75svh; } .galeri--pin .kartu--d picture { width: 32svh; }
  .galeri--pin .galeri__jendela { overflow: visible; scroll-snap-type: none; }

  .langkah { grid-template-columns: repeat(3, 1fr); column-gap: var(--j4); border-top: 0; }
  .langkah li { grid-template-columns: 1fr; border-bottom: 0; border-top: 1px solid var(--garis); padding-top: var(--j3); }
  .langkah__angka { grid-row: auto; margin-bottom: var(--j3); }
  .langkah h3 { align-self: start; }

  .booking { grid-template-columns: repeat(12, 1fr); column-gap: var(--j3); align-items: start; }
  .booking__kiri { grid-column: 1 / span 5; position: sticky; top: 7rem; }
  .booking .judul-besar { font-size: clamp(4rem, 7vw, 8rem); }
  .formulir { grid-column: 7 / span 6; }

  .lokasi { grid-template-columns: 1fr 1fr; }
  .lokasi__foto { aspect-ratio: auto; min-height: 100%; }
  .lokasi__teks { padding: var(--j6) var(--tepi); }
  .jam li.hari-ini::before { left: -1rem; }
}
@media (min-width: 900px) and (max-height: 840px) {
  .pembuka__lekat { padding-top: 5rem; }
  .raksasa { font-size: min(calc((100cqw - 2 * var(--tepi)) / 2.93), 46svh); }
  .slogan { font-size: clamp(2.6rem, 10.5svh, 6rem); }
  .pembuka__tengah { padding: var(--j2) 0; }
}
@media (min-width: 1100px) {
  .kepala__nav { display: flex; }
  .kepala__kanan { gap: .6rem; }
}
@media (min-width: 1400px) {
  body { font-size: 1.125rem; }
}

/* kursor halus: hanya perangkat yang benar-benar punya kursor */
@media (hover: hover) and (pointer: fine) {
  .baris__foto { display: none; }
  .baris__tautan { grid-template-columns: 4rem 1fr auto; }
  .daftar:hover .baris:not(:hover) .baris__nama { color: rgba(236, 229, 216, .3); }
  .baris:hover .baris__nama { transform: translateX(1.5rem); }
  .kartu:hover img { transform: scale(1.04); }
  .tombol:hover { background: var(--tulang); }
  .tombol:hover svg { transform: translateX(.25rem); }
  .tombol--garis:hover { background: var(--bara); color: var(--arang); box-shadow: none; }
  .pilihan label:hover > span { box-shadow: inset 0 0 0 1px var(--tulang); }
  html.tenang .baris__foto { display: block; }
  html.tenang .baris__tautan { grid-template-columns: 4rem 1fr auto 5rem; grid-template-areas: "no nama info foto"; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 899px) {
  .baris__tautan { grid-template-columns: 2rem 1fr; grid-template-areas: "no nama" "no info"; }
}

/* kurangi gerak: semuanya diam & langsung tampil */
html.tenang .pembuka { height: auto; }
html.tenang .pembuka__lekat { position: relative; }
html.tenang [data-ungkap]::after { display: none; }
html.tenang .pita__jalur { transform: none !important; }