:root {
  /* palet abu-abu & putih (nama variabel lama dipertahankan) */
  --hitam: #1f1f1f;     /* latar: abu-abu arang */
  --arang: #2a2a2a;     /* permukaan */
  --arang-2: #333333;
  --krem: #f4f4f4;      /* teks utama: putih */
  --krem-redup: #a3a3a3;/* teks redup: abu-abu */
  --emas: #c9c9c9;      /* aksen: abu-abu muda */
  --garis: rgba(255, 255, 255, .13);
  --serif: 'Big Shoulders Display', 'Arial Narrow', sans-serif; /* judul */
  --sempit: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --isi: 'Archivo', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --lontara: 'Noto Sans Buginese', serif;
  --tepi: clamp(16px, 4.5vw, 64px);
  --lambat: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--hitam); color: var(--krem); font: 16px/1.65 var(--isi); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2 { font-family: var(--serif); font-weight: 800; margin: 0; line-height: .92; letter-spacing: .005em; text-transform: uppercase; }
em { font-style: normal; font-weight: 300; color: var(--emas); }
.lontara { font-family: var(--lontara); letter-spacing: .4em; }
.label { margin: 0 0 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--krem-redup); }
.label.emas { color: var(--emas); }

/* ikon SVG (sprite di index.html) */
.ik { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: none; }
.tombol .ikon .ik { width: 12px; height: 12px; }
.tombol .ikon .ik use[href="#i-play"], .tombol .ikon { }
.mulai-video span .ik { width: 12px; height: 12px; margin-left: 2px; }
.short-putar .ik { width: 13px; height: 13px; margin-left: 2px; }
.lihat-geser .ik { width: 20px; height: 20px; }
.tutup .ik { width: 14px; height: 14px; vertical-align: -.15em; }
.gulir-ajak .ik { width: 12px; height: 12px; }

/* butiran film di atas segalanya */
.butir {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: butir 1s steps(4) infinite;
}
@keyframes butir { 25% { transform: translate(-4%, 3%); } 50% { transform: translate(3%, -5%); } 75% { transform: translate(-2%, -2%); } }

.tombol {
  display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--garis); background: transparent;
  padding: 13px 22px; border-radius: 999px; font-weight: 500; font-size: 15px; letter-spacing: .02em;
  transition: background .4s var(--lambat), color .4s, border-color .4s;
}
.tombol .ikon { font-size: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--emas); color: var(--hitam); transition: transform .4s var(--lambat); }
.tombol:hover { background: var(--krem); color: var(--hitam); border-color: var(--krem); }
.tombol:hover .ikon { transform: scale(1.12); }
.tombol.terang { background: var(--krem); color: var(--hitam); border-color: var(--krem); }
.tombol.terang:hover { background: var(--emas); border-color: var(--emas); }

/* ---------- kepala ---------- */
.kepala {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px var(--tepi);
  background: linear-gradient(rgba(20,20,20,.85), rgba(20,20,20,0));
  transition: opacity .4s;
}
.merek { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.merek img { border-radius: 6px; }
.kepala nav { display: flex; gap: clamp(14px, 2.4vw, 32px); }
.kepala nav a { text-decoration: none; font-size: 14px; color: #bdbdbd; transition: color .3s; }
.kepala nav a:hover { color: var(--krem); }
.kepala nav { align-items: center; }
.kepala nav a { white-space: nowrap; }
#ytAtas { display: inline-flex; align-items: center; gap: 7px; }
.ik-yt-nav { width: 18px; height: 18px; color: #ff3b30; }
.merek span { white-space: nowrap; }
.kepala nav a.nav-kerjasama { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: var(--krem); }
.kepala nav a.nav-kerjasama:hover { background: var(--krem); color: var(--hitam); border-color: var(--krem); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* video YouTube sebagai latar (tanpa kontrol, bisu, berulang) */
.yt-latar { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.yt-latar iframe {
  position: absolute; left: 50%; top: 50%; border: 0;
  width: max(100%, 177.78vh); height: max(100%, 56.25vw);
  transform: translate(-50%, -50%) scale(1.22);
  opacity: 0; transition: opacity 1.2s;
}
.yt-latar iframe.siap { opacity: 1; transition-duration: .7s; }

/* ---------- 1. intro ---------- */
.intro { position: relative; height: 240vh; background: #000; }
.intro-lekat { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.rekaman { position: absolute; inset: 0; }
.rekaman { transition: opacity .3s; }
/* huruf UPUJI selalu jadi "jendela" tembus pandang ke video (tanpa layar huruf putih) */
.mulai-video {
  position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 999px;
  border: 0; background: var(--krem); color: var(--hitam); font: 600 16px var(--isi);
  opacity: 0; pointer-events: none; transition: opacity .5s;
}
.mulai-video.tampak { opacity: 1; pointer-events: auto; }
.mulai-video span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--hitam); color: var(--krem); }
.topeng {
  position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .5); mix-blend-mode: multiply;
  display: grid; place-items: center; transform-origin: 50% 50%;
}
.kata {
  font-family: var(--serif); font-weight: 900; color: #fff; line-height: .8; letter-spacing: .01em;
  font-size: min(42vw, 78vh); white-space: nowrap; padding-top: .06em;
}
.kata span { display: inline-block; }
.intro-teks {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 9vh; text-align: center; pointer-events: none;
}
.intro-teks .lontara { color: var(--krem-redup); margin: 0 0 8px; font-size: 14px; }
.intro-sub { margin: 0; font-family: var(--serif); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(18px, 2.2vw, 28px); }
.intro-sub em { color: var(--emas); }
.intro-akhir {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; opacity: 0; pointer-events: none;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px;
  padding: 26px var(--tepi) 30px; background: var(--hitam);
  transform: translateY(100%);
}
.intro-akhir .label { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.ik-yt { width: 18px; height: 18px; color: #ff3b30; }
.kanal-angka { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; font-size: 15px; color: var(--krem-redup); }
.kanal-angka b { color: var(--krem); font-weight: 600; }
.kanal-tombol { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 14px; }
.kanal-tombol .tombol.terang .ikon { background: #ff3b30; color: #fff; }
.kanal-tombol .tombol .ik { width: 13px; height: 13px; }
.tautan-kecil { flex-basis: 100%; border: 0; background: none; padding: 4px 0 0; display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; font: 500 14px var(--isi); color: var(--krem-redup); }
.tautan-kecil:hover { color: var(--krem); }
.tautan-kecil .ik { width: 11px; height: 11px; }
.intro-akhir.tampak { opacity: 1; transform: none; pointer-events: auto; transition: opacity .8s, transform .8s var(--lambat); }
.intro-judul { margin: 0; font-family: var(--serif); font-weight: 800; text-transform: uppercase; font-size: clamp(52px, 7.5vw, 112px); line-height: .9; }
.intro-judul em { color: var(--emas); }
.gulir-ajak {
  position: absolute; z-index: 3; right: var(--tepi); bottom: 4vh; margin: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--krem-redup);
}
.gulir-ajak span { display: inline-block; animation: turun 1.6s ease-in-out infinite; }
@keyframes turun { 50% { transform: translateY(5px); } }

/* ---------- 2. papan split-flap ---------- */
.papan-angka { padding: clamp(80px, 10vw, 130px) var(--tepi); max-width: 1320px; margin: 0 auto; }
.papan-baris { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(30px, 5vw, 70px); }
.flap-baris { display: grid; grid-template-columns: minmax(96px, 140px) 1fr; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--garis); color: inherit; text-decoration: none; }
a.flap-baris:hover > span { color: var(--krem); }
.flap-teks { font: 500 clamp(15px, 1.5vw, 20px) var(--mono); letter-spacing: .04em; }
a.flap-baris:hover .flap-teks { text-decoration: underline; text-underline-offset: 4px; }
.flap-baris > span { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--krem-redup); }
.flap { display: flex; flex-wrap: wrap; gap: 3px; }
.flap i {
  position: relative; display: grid; place-items: center; font-style: normal;
  width: clamp(20px, 2.2vw, 34px); height: clamp(30px, 3.2vw, 48px);
  font: 500 clamp(16px, 1.9vw, 28px)/1 var(--mono); color: #f4f4f4;
  background: linear-gradient(#343434 50%, #2c2c2c 50%); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 0 #121212;
}
.flap i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #141414; }
.flap i.kosong { background: transparent; box-shadow: none; }
.flap i.kosong::after { display: none; }
.flap i.balik { animation: balik .08s linear; }
@keyframes balik { 50% { transform: scaleY(.6); filter: brightness(.7); } }
.flap i.emas { color: var(--emas); }
.papan-catatan { margin: 40px 0 0; max-width: 52ch; color: var(--krem-redup); font-size: 17px; }

/* ---------- 3. episode menyamping ---------- */
.episode { position: relative; background: var(--hitam); }
.episode-lekat { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 4vh; }
.episode-kepala { padding: 0 var(--tepi); }
.episode-kepala h2 { font-size: clamp(48px, 7vw, 104px); }
.episode-kepala h2 em { color: var(--emas); }
.petunjuk { margin: 10px 0 0; color: var(--krem-redup); font-size: 14px; }
.rel { display: flex; gap: clamp(18px, 2.4vw, 34px); padding: clamp(30px, 5vw, 60px) var(--tepi) 0; width: max-content; will-change: transform; }
.ep { position: relative; flex: none; width: clamp(290px, 40vw, 600px); border: 0; background: none; padding: 0; text-align: left; }
.ep-nomor {
  position: absolute; z-index: 2; right: 14px; top: -0.48em; font-family: var(--serif); font-weight: 900; font-size: clamp(70px, 9vw, 132px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.4); pointer-events: none; transition: color .4s, -webkit-text-stroke-color .4s;
}
.ep:hover .ep-nomor, .ep:focus-visible .ep-nomor { color: var(--emas); -webkit-text-stroke-color: var(--emas); }
.ep-gbr { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--arang); }
.ep-gbr img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.88); transition: transform 1.2s var(--lambat), filter .6s; }
.ep:hover .ep-gbr img, .ep:focus-visible .ep-gbr img { transform: scale(1.04); filter: brightness(1); }
.ep-gbr .putar {
  position: absolute; left: 16px; bottom: 14px; display: flex; align-items: center; gap: 8px; z-index: 2;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--lambat);
}
.ep-gbr .putar-bulat { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--krem); color: var(--hitam); }
.ep-gbr .putar-bulat .ik { width: 11px; height: 11px; margin-left: 2px; }
.ep:hover .putar, .ep:focus-visible .putar { opacity: 1; transform: none; }
.ep-info { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; }
.ep-judul { font-family: var(--serif); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.05; }
.ep-meta { font-size: 13px; color: var(--krem-redup); white-space: nowrap; }
.garis-waktu { position: relative; margin: 0 var(--tepi); height: 1px; background: var(--garis); }
.garis-waktu span { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--krem); }
.garis-waktu b { position: absolute; right: 0; top: 10px; font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--krem-redup); }

/* ---------- 4. season 2 ---------- */
.season2 {
  position: relative; overflow: hidden; isolation: isolate; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 50px;
  padding: clamp(110px, 16vw, 220px) var(--tepi) clamp(50px, 6vw, 80px);
}
.s2-latar { position: absolute; inset: 0; z-index: -1; background: #2a2a2a; }
body.video-latar .s2-latar > img { display: none; }
.s2-latar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 30%; transition: opacity 1.4s; animation: dorong-pelan 9s ease-out both; }
@keyframes dorong-pelan { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.s2-latar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31,31,31,.92) 0%, rgba(31,31,31,.55) 45%, rgba(31,31,31,.08) 75%), linear-gradient(0deg, #1f1f1f 0%, rgba(31,31,31,0) 40%, rgba(31,31,31,0) 82%, rgba(31,31,31,.7) 100%); }
.season2 h2 { font-size: clamp(76px, 12vw, 180px); line-height: .85; margin-bottom: 26px; }
.s2-teks { max-width: 40ch; color: #d2d2d2; font-size: 17px; margin: 0 0 30px; }
.billing {
  text-align: center; padding-top: 34px; border-top: 1px solid var(--garis);
  font-family: var(--sempit); text-transform: uppercase; color: #d6d6d6; line-height: 1.35;
}
.billing .baris { font-size: clamp(13px, 1.4vw, 17px); letter-spacing: .06em; }
.billing .baris small { font-size: .62em; font-weight: 300; letter-spacing: .1em; margin: 0 .4em 0 1.1em; color: var(--krem-redup); }
.billing .baris small:first-child { margin-left: 0; }
.billing .pemain { font-size: clamp(12px, 1.2vw, 15px); letter-spacing: .1em; color: var(--krem-redup); margin-top: 6px; }
.billing .rumah { margin-top: 14px; font-weight: 700; letter-spacing: .3em; font-size: 13px; color: var(--krem); }

/* ---------- kerjasama ---------- */
.kerjasama {
  display: grid; grid-template-columns: 1fr minmax(320px, 520px); gap: 60px clamp(40px, 8vw, 120px); align-items: center;
  padding: clamp(100px, 14vw, 170px) var(--tepi); max-width: 1320px; margin: 0 auto;
}
.kerjasama h2 { font-size: clamp(42px, 5.4vw, 74px); line-height: 1.02; max-width: 13ch; }
.kerjasama h2 em { color: var(--emas); }
.tawaran { list-style: none; counter-reset: t; margin: 40px 0 34px; padding: 0; border-top: 1px solid var(--garis); }
.tawaran li { counter-increment: t; display: grid; grid-template-columns: 46px 1fr; padding: 16px 0; border-bottom: 1px solid var(--garis); }
.tawaran li::before { content: counter(t, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--emas); padding-top: 4px; }
.tawaran b { display: block; font-weight: 600; font-size: 17px; }
.tawaran span { color: var(--krem-redup); font-size: 15px; }
.kontak { color: var(--krem-redup); font-size: 15px; margin: 0; line-height: 1.9; }
.kontak a { color: var(--krem); text-underline-offset: 4px; text-decoration-color: var(--garis); }
.kontak a:hover { text-decoration-color: var(--emas); }

.slate { position: relative; }
.clapper { position: relative; height: 112px; }
.clapper i { position: absolute; left: 0; right: 0; height: 34px; border: 2px solid #111; border-radius: 3px; }
.clapper i:first-child {
  bottom: 36px; transform-origin: 2px 100%; transform: rotate(-9deg);
  background: repeating-linear-gradient(55deg, #111 0 26px, #f4f4f4 26px 52px);
  transition: transform .16s ease-in;
}
.clapper i:last-child { bottom: 0; background: repeating-linear-gradient(-55deg, #111 0 26px, #f4f4f4 26px 52px); }
.clapper.tepuk i:first-child { transform: rotate(0); }
.papan {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: #161616; border: 2px solid #3a3a3a; border-top: 6px solid #0c0c0c;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.sel { display: block; padding: 10px 14px 12px; border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
.sel:nth-child(3n) { border-right: 0; }
.sel.lebar { grid-column: 1 / -1; border-right: 0; }
.sel.dua { grid-column: span 2; border-right: 0; }
.sel span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #8f8f8f; }
.sel b { display: block; font-family: var(--sempit); font-weight: 500; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.sel input, .sel select, .sel textarea {
  width: 100%; border: 0; background: transparent; color: #f4f4f4; padding: 4px 0 0; margin: 0; border-radius: 0;
  font: 500 20px/1.3 var(--sempit); letter-spacing: .03em;
}
.sel select option { background: #161616; }
.sel textarea { resize: vertical; font-size: 18px; }
.sel input::placeholder, .sel textarea::placeholder { color: #626262; }
.sel:focus-within { background: rgba(255,255,255,.05); }
.sel input:focus, .sel select:focus, .sel textarea:focus { outline: none; }
.galat { min-height: 1.4em; margin: 10px 0 6px; font-size: 14px; color: var(--emas); }
.tombol.aksi { width: 100%; justify-content: center; background: var(--krem); color: var(--hitam); border-color: var(--krem); font-weight: 600; }
.tombol.aksi:hover { background: #c9c9c9; border-color: #c9c9c9; }

/* ---------- kredit penutup ---------- */
.kredit-penutup { border-top: 1px solid var(--garis); padding: 70px var(--tepi) 40px; text-align: center; }
.gulungan {
  height: 420px; overflow: hidden; position: relative;
  -webkit-mask: linear-gradient(transparent, #000 22%, #000 78%, transparent);
          mask: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.gulungan-isi { animation: gulung 48s linear infinite; padding-top: 420px; }
.gulungan:hover .gulungan-isi { animation-play-state: paused; }
@keyframes gulung { to { transform: translateY(-100%); } }
.gulungan h3 { font-family: var(--serif); font-weight: 800; text-transform: uppercase; font-size: 40px; margin: 0 0 40px; }
.kr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; max-width: 560px; margin: 0 auto 6px; font-family: var(--sempit); text-transform: uppercase; letter-spacing: .1em; }
.kr dt { text-align: right; color: var(--krem-redup); font-weight: 300; font-size: 14px; padding-top: 3px; }
.kr dd { text-align: left; margin: 0; font-size: 17px; }
.kr-jeda { height: 36px; }
.kr-judul { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; color: var(--emas); margin: 0 0 14px; text-transform: uppercase; }
.kr-nama { font-family: var(--sempit); text-transform: uppercase; letter-spacing: .1em; font-size: 17px; line-height: 1.9; margin: 0; }
.akhir { margin-top: 30px; }
.akhir img { margin: 0 auto 22px; border-radius: 10px; }
.sosmed { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px; }
.sosmed a { text-decoration: none; font-size: 15px; }
.sosmed a small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--krem-redup); }
.sosmed a:hover { color: var(--emas); }
.kecil { font-size: 13px; color: #8a8a8a; margin: 0; }

/* ---------- pemutar ---------- */
.pemutar { position: fixed; inset: 0; z-index: 80; background: #111; display: grid; place-items: center; padding: 60px 16px; animation: muncul .5s var(--lambat); }
.pemutar[hidden] { display: none; }
.pemutar-isi { width: min(1200px, 100%); }
.pemutar-video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.pemutar-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pemutar-judul { margin: 16px 0 0; text-align: center; font-family: var(--serif); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 26px; }
.tutup { position: fixed; top: 18px; right: 22px; border: 1px solid var(--garis); background: none; border-radius: 999px; padding: 8px 16px; font-size: 14px; }
.tutup:hover { background: var(--krem); color: var(--hitam); }

/* ---------- muncul saat digulir ---------- */
.mengapung { opacity: 0; translate: 0 30px; }
.mengapung.tampak { opacity: 1; translate: 0 0; transition: opacity 1.1s var(--lambat), translate 1.1s var(--lambat); transition-delay: var(--tunda, 0s); }

/* ---------- kepala seksi umum ---------- */
.seksi-kepala { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 0 var(--tepi); margin-bottom: 34px; }
.seksi-kepala h2, .kamus-kepala h2, .tentang-kiri h2 { font-size: clamp(44px, 6.4vw, 92px); }
.label a { color: inherit; text-underline-offset: 3px; }
.chip { border: 1px solid var(--garis); background: none; color: var(--krem-redup); font: 500 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; transition: background .3s, color .3s; }
.chip:hover { color: var(--krem); }
.chip.aktif { background: var(--krem); color: var(--hitam); border-color: var(--krem); }
.shorts-pilih { display: flex; gap: 8px; }

/* ---------- 4. shorts ---------- */
.shorts { padding: clamp(90px, 11vw, 150px) 0 clamp(70px, 9vw, 120px); }
.shorts-rel {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(158px, 17vw, 236px); gap: clamp(12px, 1.6vw, 20px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--tepi); padding: 0 var(--tepi) 14px;
  scrollbar-width: thin; scrollbar-color: #555 transparent; outline: none;
}
.short { scroll-snap-align: start; border: 0; background: none; padding: 0; text-align: left; }
.short-gbr { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 10px; background: var(--arang); }
.short-gbr img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--lambat), filter .5s; filter: brightness(.9); }
.short:hover .short-gbr img, .short:focus-visible .short-gbr img { transform: scale(1.05); filter: brightness(1); }
.short-gbr::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.short-putar {
  position: absolute; z-index: 1; left: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--krem); color: var(--hitam);
  transition: transform .3s var(--lambat);
}
.short:hover .short-putar { transform: scale(1.12); }
.short-judul { display: block; margin-top: 10px; font-family: var(--serif); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 19px; line-height: 1.1; }
.short-meta { display: block; margin-top: 3px; font-size: 12.5px; color: var(--krem-redup); }
.shorts-kaki { padding: 0 var(--tepi); margin: 20px 0 0; font-size: 14px; color: var(--krem-redup); }
.shorts-kaki a { color: var(--krem); text-underline-offset: 4px; text-decoration-color: var(--garis); }

/* ---------- 5b. hitung mundur season 2 ---------- */
.hitung-mundur { margin: 0 0 26px; }
.hm-angka { display: flex; gap: 10px; margin-bottom: 10px; }
.hm-angka div { min-width: 74px; padding: 10px 8px 8px; text-align: center; background: rgba(20,20,20,.65); border: 1px solid var(--garis); border-radius: 6px; }
.hm-angka b { display: block; font: 500 34px/1 var(--mono); }
.hm-angka span { font: 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--krem-redup); }
.hm-catatan { margin: 0; max-width: 42ch; font-size: 14px; color: #bdbdbd; }
.hm-catatan b { color: var(--krem); font-weight: 600; }
.s2-tombol { display: flex; flex-wrap: wrap; gap: 12px; }
a.tombol { text-decoration: none; }

/* ---------- 6. pemain ---------- */
.pemain-seksi { padding: clamp(100px, 13vw, 170px) var(--tepi) clamp(60px, 8vw, 100px); max-width: 1400px; margin: 0 auto; }
.dinding-nama { font-family: var(--serif); text-transform: uppercase; line-height: .95; letter-spacing: .01em; }
.dinding-nama .nama { display: inline-block; white-space: nowrap; transition: color .3s; }
.dinding-nama .nama:hover { color: var(--krem); }
.dinding-nama .b0 { font-size: clamp(46px, 7vw, 108px); font-weight: 800; }
.dinding-nama .b1 { font-size: clamp(38px, 5.4vw, 84px); font-weight: 300; color: var(--emas); }
.dinding-nama .b2 { font-size: clamp(42px, 6.2vw, 96px); font-weight: 700; color: #8f8f8f; }
.dinding-nama .b3 { font-size: clamp(38px, 5.4vw, 84px); font-weight: 600; }
.titik-nama { font-family: var(--serif); font-size: clamp(30px, 4vw, 60px); color: #555; margin: 0 .25em; vertical-align: .15em; }
.akun-lain { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--garis); }
.akun-lain .label { margin: 0 14px 0 0; flex-basis: 100%; margin-bottom: 4px; }
.akun-lain a { text-decoration: none; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border: 1px solid var(--garis); border-radius: 12px; transition: border-color .3s, background .3s; }
.akun-lain a:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); }
.akun-lain a > .ik { width: 22px; height: 22px; }
.akun-lain .media-youtube > .ik { color: #ff3b30; }
.akun-lain a b { font-weight: 600; font-size: 16px; }
.akun-lain a small { display: block; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--krem-redup); }


/* ---------- 7. galeri di balik layar ---------- */
.galeri-seksi { padding: clamp(60px, 8vw, 110px) 0; }
.galeri { columns: 4 230px; column-gap: 14px; padding: 0 var(--tepi); }
.foto-bts { position: relative; display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; background: var(--arang); break-inside: avoid; border-radius: 6px; overflow: hidden; }
.foto-bts img { width: 100%; height: auto; transition: transform 1s var(--lambat), filter .5s; filter: grayscale(.35) brightness(.88); }
.foto-bts:hover img, .foto-bts:focus-visible img { transform: scale(1.04); filter: none; }
.foto-bts span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; text-align: left;
  font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); opacity: 0; transition: opacity .4s;
}
.foto-bts:hover span, .foto-bts:focus-visible span { opacity: 1; }
.lihat { position: fixed; inset: 0; z-index: 85; background: rgba(12,12,12,.96); display: grid; place-items: center; padding: 60px 70px; }
.lihat[hidden] { display: none; }
.lihat figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lihat img { max-width: min(640px, 100%); max-height: calc(100vh - 160px); object-fit: contain; border-radius: 4px; }
.lihat figcaption { font-size: 14px; color: var(--krem-redup); text-align: center; }
.lihat figcaption a { color: var(--krem); margin-left: 10px; }
.lihat-geser { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--garis); background: rgba(31,31,31,.8); font-size: 18px; }
.lihat-geser.kiri { left: 14px; }
.lihat-geser.kanan { right: 14px; }
.lihat-geser:hover { background: var(--krem); color: var(--hitam); }

/* ---------- 8. kamus bugis ---------- */
.kamus-seksi { display: grid; grid-template-columns: minmax(280px, .8fr) 1.4fr; gap: 40px clamp(40px, 7vw, 110px); padding: clamp(90px, 12vw, 160px) var(--tepi); max-width: 1400px; margin: 0 auto; align-items: start; }
.kamus-kepala { position: sticky; top: 90px; }
.kamus-kepala .lontara { letter-spacing: .3em; }
.kamus-kepala > p:not(.label) { color: var(--krem-redup); max-width: 36ch; }
.kamus-cari input {
  width: 100%; margin-top: 14px; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--garis);
  background: var(--arang); color: var(--krem); font: 15px var(--isi);
}
.kamus-cari input:focus { outline: none; border-color: var(--emas); }
.kamus { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
.entri { padding: 18px 0 20px; border-top: 1px solid var(--garis); }
.entri dt { font-family: var(--serif); font-weight: 800; text-transform: uppercase; font-size: 34px; line-height: 1; letter-spacing: .01em; }
.entri dd { margin: 8px 0 0; color: #cfcfcf; font-size: 15.5px; }
.entri-eps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--krem-redup); }
.entri-eps button { border: 1px solid var(--garis); background: none; padding: 4px 9px; border-radius: 999px; font: inherit; color: var(--krem); }
.entri-eps button:hover { background: var(--krem); color: var(--hitam); }
.kamus-kosong { grid-column: 1 / -1; color: var(--krem-redup); padding-top: 18px; border-top: 1px solid var(--garis); }

/* ---------- 9. tentang upuji ---------- */
.tentang-seksi { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(40px, 7vw, 110px); padding: clamp(80px, 11vw, 150px) var(--tepi); max-width: 1400px; margin: 0 auto; border-top: 1px solid var(--garis); }
.tentang-kanan > div > p { margin: 0 0 18px; font-size: 18px; color: #d4d4d4; max-width: 56ch; }
.fakta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin: 34px 0 0; padding-top: 24px; border-top: 1px solid var(--garis); }
.fakta dt { font: 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--krem-redup); }
.fakta dd { margin: 4px 0 0; font-family: var(--serif); font-weight: 700; text-transform: uppercase; font-size: 24px; letter-spacing: .02em; }
.pendukung { margin: 30px 0 0; font-size: 15px; color: #cfcfcf; }
.pendukung .label { margin: 0 10px 0 0; }

/* ---------- 10b. media kit ---------- */
.mediakit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: -6px 0 30px; }
.tautan { color: var(--krem); font-size: 14px; text-underline-offset: 4px; }

/* ---------- pemutar shorts (tegak) & episode baru ---------- */
.pemutar.tegak .pemutar-isi { width: min(400px, 100%, calc((100vh - 170px) * 9 / 16)); }
.pemutar.tegak .pemutar-video { aspect-ratio: 9 / 16; }
.ep-baru { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: var(--krem); color: var(--hitam); font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 900px) {
  .kamus-seksi, .tentang-seksi { grid-template-columns: 1fr; }
  .kamus-kepala { position: static; }
}
@media (max-width: 560px) {
  .kamus { grid-template-columns: 1fr; }
  .galeri { columns: 2; column-gap: 10px; }
  .foto-bts { margin-bottom: 10px; }
  .foto-bts span { opacity: 1; padding-top: 24px; font-size: 10px; }
  .hm-angka div { min-width: 0; flex: 1; }
  .hm-angka b { font-size: 26px; }
  .fakta { grid-template-columns: 1fr; }
  .lihat { padding: 60px 12px; }
  .lihat-geser { top: auto; bottom: 14px; transform: none; }
}

/* tanpa video latar (HP / gerak dikurangi): poster trailer tampil sebagai blok gambar */
body:not(.video-latar) .season2 { min-height: 0; padding-top: 90px; gap: 28px; }
body:not(.video-latar) .s2-latar { position: relative; inset: auto; z-index: 0; order: -1; background: none; max-width: 980px; }
body:not(.video-latar) .s2-latar > img { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; animation: none; }
body:not(.video-latar) .s2-latar::after { display: none; }

/* ---------- responsif ---------- */
@media (max-width: 900px) {
  .kepala nav a:not(#ytAtas):not(.nav-kerjasama) { display: none; }
  .kepala nav { gap: 12px; }
  .yt-teks { display: none; }
  .ik-yt-nav { width: 26px; height: 26px; }
  .merek { gap: 9px; font-size: 11px; letter-spacing: .14em; }
  .kepala nav a.nav-kerjasama { padding: 6px 12px; font-size: 13px; }
  .kerjasama { grid-template-columns: 1fr; }
  .kata { font-size: min(43vw, 62vh); }

  .papan-baris { grid-template-columns: 1fr; }
  .flap-baris { grid-template-columns: 92px 1fr; gap: 10px; padding: 10px 0; }
}
@media (max-width: 560px) {
  .ep { width: 82vw; }
  .ep-info { flex-direction: column; gap: 2px; }
  .flap i { width: 5.6vw; height: 8vw; font-size: 4.6vw; border-radius: 3px; }
  .flap { gap: 2px; }
  .papan { grid-template-columns: repeat(3, 1fr); }
  .sel b { font-size: 18px; }
  .gulungan { height: 360px; }
  .gulungan-isi { padding-top: 360px; }
  .kr dd { font-size: 15px; }
  .intro { height: 200vh; }
  .intro-akhir { flex-direction: column; justify-content: flex-end; align-items: flex-start; flex-wrap: nowrap; padding-top: 140px; background: linear-gradient(rgba(31,31,31,0), var(--hitam) 55%); transform: translateY(24px); }
  .intro-akhir .label { margin: 0 0 8px; }
  .kanal-angka { font-size: 14px; gap: 4px 16px; }
  .tautan-kecil { justify-content: flex-start; }
  .kanal-tombol { justify-content: flex-start; }
  .akun-lain a { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mengapung { opacity: 1; translate: none; }
  .gulungan { height: auto; -webkit-mask: none; mask: none; }
  .gulungan-isi { padding-top: 0; }
}