@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("assets/fonts/Poppins-Thin.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url("assets/fonts/Poppins-ThinItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("assets/fonts/Poppins-ExtraLight.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url("assets/fonts/Poppins-ExtraLightItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/Poppins-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/Poppins-LightItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/Poppins-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/Poppins-Italic.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/Poppins-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/Poppins-MediumItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/Poppins-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/Poppins-SemiBoldItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/Poppins-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/Poppins-BoldItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/Poppins-ExtraBold.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/Poppins-ExtraBoldItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/Poppins-Black.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/Poppins-BlackItalic.ttf") format("truetype");
}

:root,
[data-tema="peteng"] {
  --werno-dasar: #0C0C0C;
  --werno-dasar-2: #141414;
  --werno-dasar-3: #1A1A1A;
  --werno-tulisan: #F2F2F2;
  --werno-abu: #8F8F8F;
  --werno-garis: #262626;
  --werno-bledek: #C5DF62;
  --werno-ungu: #431D7A;
  --werno-jambon: #D758D3;
  --werno-kulup: #F2F2F2;
  --werno-ireng: #0C0C0C;
  --werno-judul: #C5DF62;
  --werno-tautan: #C5DF62;
  --werno-salah: #D758D3;
}

[data-tema="clereng"] {
  --werno-dasar: #F6F4FF;
  --werno-dasar-2: #F2F2F2;
  --werno-dasar-3: #F2F2F2;
  --werno-tulisan: #0C0C0C;
  --werno-abu: #262626;
  --werno-garis: #8F8F8F;
  --werno-judul: #431D7A;
  --werno-tautan: #431D7A;
  --werno-salah: #431D7A;
}

:root {
  --ukuran-siji: 10px;
  --ukuran-loro: 16px;
  --ukuran-telu: 26px;
  --ukuran-papat: 42px;
  --ukuran-lima: 68px;
  --ukuran-enem: 110px;
  --ukuran-pitu: 178px;
  --aksara-poppins: "Poppins", sans-serif;
  --jembar-papan: 1400px;
  --tepi-papan: 24px;
  --jrah-cilik: 16px;
  --jrah-sedheng: 26px;
  --jrah-gedhe: 68px;
  --alon-alon: 320ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

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

body {
  background: var(--werno-dasar);
  color: var(--werno-tulisan);
  font-family: var(--aksara-poppins);
  font-size: var(--ukuran-loro);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
  font-weight: inherit;
}

img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
}

button {
  cursor: pointer;
}

input,
textarea {
  display: block;
}

::placeholder {
  color: var(--werno-abu);
  opacity: 1;
}

section {
  padding-block: var(--jrah-gedhe);
}

.wates {
  width: min(100% - (var(--tepi-papan) * 2), var(--jembar-papan));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--jrah-cilik);
}

.njero-papan {
  background: var(--werno-dasar);
}

.tulisan-bledek {
  font-size: var(--ukuran-enem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  overflow-wrap: break-word;
  color: var(--werno-judul);
}

.judul-besar {
  font-size: var(--ukuran-lima);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.judul-cilik {
  font-size: var(--ukuran-papat);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.label-cilik {
  font-size: var(--ukuran-siji);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--werno-abu);
}

.lead-cekap {
  font-size: var(--ukuran-telu);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.tulisan-badan {
  font-size: var(--ukuran-loro);
  font-weight: 400;
  line-height: 1.65;
}

.catatan-cilik {
  font-size: var(--ukuran-loro);
  font-weight: 400;
  line-height: 1.65;
  color: var(--werno-abu);
  max-width: 52ch;
}

.baris-tutup {
  font-size: var(--ukuran-papat);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.pucuk-arep {
  display: flex;
  align-items: center;
  gap: var(--jrah-cilik);
  padding: var(--jrah-cilik) var(--tepi-papan);
  background: var(--werno-dasar);
  border-bottom: 1px solid var(--werno-garis);
}

.papan-pucuk {
  height: 0;
}

.pucuk-stiker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--alon-alon) ease, visibility 0s linear var(--alon-alon);
}

.pucuk-stiker.pucuk-mbandhung {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--alon-alon) ease, visibility 0s;
}

.tandha-cilik {
  display: block;
  flex: 0 0 auto;
  width: clamp(56px, 6vw, 64px);
  aspect-ratio: 1 / 1;
  border-radius: 100px;
  overflow: hidden;
  transition: opacity var(--alon-alon);
}

.tandha-cilik:hover {
  opacity: 0.72;
}

.tandha-cilik img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.3);
  transform-origin: 49.5% 48.5%;
}

.rute-mlaku {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jrah-sedheng);
  margin-left: auto;
}

.pil-menu {
  font-size: var(--ukuran-loro);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--werno-abu);
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: color var(--alon-alon), border-color var(--alon-alon);
}

.pil-menu:hover {
  color: var(--werno-tautan);
  border-bottom-color: var(--werno-tautan);
}

.pil-menu[aria-current="page"] {
  color: var(--werno-tulisan);
  border-bottom-color: var(--werno-tulisan);
}

/* Nav Menu Dropdown */
.menu-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.pil-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
  margin: 0;
}

.panah-dropdown {
  display: inline-block;
  width: 9px;
  height: 6px;
  transition: transform var(--alon-alon) ease;
  pointer-events: none;
}

.menu-dropdown:hover .panah-dropdown,
.menu-dropdown:focus-within .panah-dropdown,
.menu-dropdown.terbuka .panah-dropdown {
  transform: rotate(180deg);
}

.dropdown-konten {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 175px;
  padding: 6px 0;
  background: var(--werno-dasar-2);
  border: 1px solid var(--werno-garis);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--alon-alon) ease, transform var(--alon-alon) ease, visibility var(--alon-alon);
  pointer-events: none;
}

.menu-dropdown:hover .dropdown-konten,
.menu-dropdown:focus-within .dropdown-konten,
.menu-dropdown.terbuka .dropdown-konten {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-item {
  display: block;
  padding: 8px 18px;
  font-size: var(--ukuran-siji, 13px);
  font-weight: 500;
  color: var(--werno-abu);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--alon-alon), color var(--alon-alon), padding-left var(--alon-alon);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--werno-dasar-3);
  color: var(--werno-tulisan);
  padding-left: 22px;
}

.dropdown-item[aria-current="page"] {
  color: var(--werno-bledek);
  font-weight: 600;
  background: rgba(197, 223, 98, 0.08);
}

/* FAQ Accordion Section */
.papan-faq {
  padding: var(--jrah-gedhe) 0;
  border-top: 1px solid var(--werno-garis);
}

.faq-daftar {
  display: flex;
  flex-direction: column;
  gap: var(--jrah-cilik);
  margin-top: var(--jrah-sedheng);
  max-width: 860px;
}

.faq-item {
  border: 1px solid var(--werno-garis);
  border-radius: 8px;
  background: var(--werno-dasar-2);
  transition: border-color var(--alon-alon), background-color var(--alon-alon);
  overflow: hidden;
}

.faq-item[open] {
  border-color: var(--werno-bledek);
  background: var(--werno-dasar-3);
}

.faq-pertanyaan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  font-size: var(--ukuran-loro);
  font-weight: 600;
  color: var(--werno-tulisan);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-pertanyaan::-webkit-details-marker {
  display: none;
}

.faq-panah {
  width: 14px;
  height: 14px;
  transition: transform var(--alon-alon) ease;
  color: var(--werno-abu);
  flex-shrink: 0;
  margin-left: 12px;
}

.faq-item[open] .faq-panah {
  transform: rotate(180deg);
  color: var(--werno-bledek);
}

.faq-jawaban {
  padding: 0 20px 18px 20px;
  color: var(--werno-abu);
  font-size: var(--ukuran-siji);
  line-height: 1.65;
}

.faq-jawaban a {
  color: var(--werno-bledek);
  text-decoration: underline;
}

/* Typography Specimen Section */
.spesimen-aksara {
  margin-top: var(--jrah-sedheng);
  padding: var(--jrah-sedheng);
  border: 1px solid var(--werno-garis);
  border-radius: 10px;
  background: var(--werno-dasar-2);
}

.baris-aksara {
  padding: 10px 0;
  border-bottom: 1px solid var(--werno-garis);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.baris-aksara:last-child {
  border-bottom: none;
}

.aksara-label {
  font-size: var(--ukuran-cilik, 11px);
  color: var(--werno-abu);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  min-width: 140px;
}

.aksara-teks {
  font-size: var(--ukuran-telu, 18px);
  color: var(--werno-tulisan);
}

.tombol-tema {
  flex: 0 0 auto;
  align-self: center;
  position: relative;
  width: 56px;
  height: 28px;
  border: 1px solid var(--werno-garis);
  border-radius: 100px;
  background: var(--werno-dasar-3);
  transition: border-color var(--alon-alon), background-color var(--alon-alon);
}

.tombol-tema:hover {
  border-color: var(--werno-tautan);
}

.gundhul-tema {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 100px;
  background: var(--werno-bledek);
  transition: transform var(--alon-alon) ease;
  z-index: 0;
}

[data-tema="clereng"] .gundhul-tema {
  transform: translateX(28px);
}

.wujud-srengenge,
.wujud-rembulan {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  color: var(--werno-abu);
  z-index: 1;
  transition: color var(--alon-alon);
}

.wujud-rembulan {
  left: 6px;
}

.wujud-srengenge {
  right: 6px;
}

[data-tema="peteng"] .wujud-rembulan {
  color: var(--werno-ireng);
}

[data-tema="clereng"] .wujud-srengenge {
  color: var(--werno-ireng);
}

.layar-mbungkus {
  position: relative;
  overflow: hidden;
  padding-block: 0;
  background: var(--werno-bledek);
}

.tandha-dhuwur {
  display: block;
  width: 100%;
  height: auto;
}

.klaim-gedhe {
  background: var(--werno-dasar-2);
}

.klaim-gedhe .lead-cekap {
  color: var(--werno-tulisan);
  max-width: 46ch;
}

.kothak-sikat {
  background: var(--werno-dasar-2);
}

.kepala-blok {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--jrah-cilik);
  margin-bottom: var(--jrah-cilik);
}

.susun-wahana {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(110px, auto);
  grid-template-areas:
    "siji siji loro telu"
    "siji siji papat telu"
    "lima lima enam pitu"
    "wolu wolu enam pitu";
  gap: var(--jrah-cilik);
}

.susun-wahana .wahana-aktif:nth-child(1) {
  grid-area: siji;
}

.susun-wahana .wahana-aktif:nth-child(2) {
  grid-area: loro;
}

.susun-wahana .wahana-aktif:nth-child(3) {
  grid-area: telu;
}

.susun-wahana .wahana-aktif:nth-child(4) {
  grid-area: papat;
}

.susun-wahana .wahana-aktif:nth-child(5) {
  grid-area: lima;
}

.susun-wahana .wahana-aktif:nth-child(6) {
  grid-area: enam;
}

.susun-wahana .wahana-aktif:nth-child(7) {
  grid-area: pitu;
}

.susun-wahana .wahana-aktif:nth-child(8) {
  grid-area: wolu;
}

.wahana-aktif {
  background: var(--werno-dasar);
  border: 1px solid var(--werno-garis);
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 110px;
  padding: var(--jrah-cilik);
  position: relative;
  font: inherit;
  cursor: pointer;
  transition: transform var(--alon-alon) ease, background-color var(--alon-alon), border-color var(--alon-alon);
}

.wahana-aktif:hover {
  transform: scale(1.06);
  background: var(--werno-ungu);
  border-color: var(--werno-ungu);
  z-index: 2;
}

.wahana-aktif:hover .wahana-tulisan {
  color: var(--werno-bledek);
}

.wahana-aktif[aria-pressed="true"] {
  background: var(--werno-aksen);
  border-color: var(--werno-aksen);
}

.wahana-aktif[aria-pressed="true"] .wahana-tulisan {
  color: #0C0C0C;
}

[data-tema="clereng"] .wahana-aktif[aria-pressed="true"] .wahana-tulisan,
[data-tema="clereng"] .pil-kategori[aria-pressed="true"] {
  color: #F6F4FF;
}

.wahana-lengkung {
  border-radius: 100px;
  background: var(--werno-bledek);
  border-color: var(--werno-bledek);
}

.wahana-lengkung .wahana-tulisan {
  color: var(--werno-ireng);
}

.wahana-tulisan {
  font-size: var(--ukuran-telu);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-align: center;
  transition: color var(--alon-alon);
}

.jembar-katon {
  background: var(--werno-dasar);
}

.leren-geser {
  overflow: hidden;
}

.jeru-leren {
  display: flex;
  gap: var(--jrah-sedheng);
  position: relative;
  transition: transform 600ms ease;
}

.kothak-gawe {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  gap: var(--jrah-cilik);
}

.wadhah-gawe {
  overflow: hidden;
}

.foto-gawe {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--alon-alon) ease;
}

.kothak-gawe:hover .foto-gawe {
  transform: scale(1.05);
}

.kendali-leren {
  display: flex;
  gap: var(--jrah-cilik);
  margin-top: var(--jrah-cilik);
}

.tombol-leren {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--werno-garis);
  color: var(--werno-tulisan);
  transition: color var(--alon-alon), border-color var(--alon-alon), background-color var(--alon-alon);
}

.tombol-leren:hover {
  background: var(--werno-bledek);
  border-color: var(--werno-bledek);
  color: var(--werno-ireng);
}

.gelap-penak {
  background: var(--werno-dasar);
}

.gelap-penak .lead-cekap {
  color: var(--werno-abu);
}

.warung-kaos {
  background: var(--werno-ungu);
  color: var(--werno-kulup);
}

.warung-kaos .wates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--jrah-gedhe);
  align-items: center;
}

.warung-kaos .label-cilik {
  color: var(--werno-kulup);
}

.warung-teks {
  display: flex;
  flex-direction: column;
  gap: var(--jrah-cilik);
  align-items: flex-start;
}

.warung-aksen {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--werno-bledek);
}

.warung-aksen::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--werno-bledek);
}

.lapak-warna {
  overflow: hidden;
}

.lapak-warna img {
  display: block;
  width: 100%;
  transition: transform var(--alon-alon) ease;
}

.lapak-warna:hover img {
  transform: scale(1.04);
}

.tombol-sikat {
  width: fit-content;
  font-size: var(--ukuran-loro);
  font-weight: 700;
  letter-spacing: 0;
  padding: 18px 34px;
  border: 1px solid var(--werno-bledek);
  background: var(--werno-bledek);
  color: var(--werno-ireng);
  transition: background-color var(--alon-alon), color var(--alon-alon), border-color var(--alon-alon);
}

.tombol-sikat:hover {
  background: var(--werno-tulisan);
  border-color: var(--werno-tulisan);
  color: var(--werno-dasar);
}

.kabar-arep {
  background: var(--werno-dasar-3);
}

.jejeg-kabar {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--jrah-gedhe);
}

.catatan-kabar {
  display: flex;
  flex-direction: column;
  gap: var(--jrah-cilik);
}

.baris-kabar {
  font-size: var(--ukuran-loro);
  font-weight: 500;
  line-height: 1.65;
}

.tautan-surel {
  color: var(--werno-tautan);
  border-bottom: 1px solid transparent;
  transition: border-color var(--alon-alon);
}

.tautan-surel:hover {
  border-bottom-color: var(--werno-tautan);
}

.ulem-kirim,
.ulem-daftar {
  display: flex;
  flex-direction: column;
  gap: var(--jrah-cilik);
}

.ulem-kirim {
  max-width: 640px;
}

.ulem-daftar {
  max-width: 640px;
}

.lubang-tulisan {
  width: 100%;
  background: var(--werno-dasar);
  border: 1px solid var(--werno-garis);
  color: var(--werno-tulisan);
  font-size: var(--ukuran-loro);
  font-weight: 400;
  line-height: 1.65;
  padding: 16px 18px;
  transition: border-color var(--alon-alon);
}

.lubang-tulisan:focus {
  outline: none;
  border-color: var(--werno-tautan);
}

.lubang-kliru {
  border-color: var(--werno-jambon);
  border-style: dashed;
}

.pemberitahuan {
  font-size: var(--ukuran-loro);
  font-weight: 500;
  line-height: 1.65;
  color: var(--werno-abu);
  min-height: var(--ukuran-telu);
}

.pemberitahuan-kliru {
  color: var(--werno-salah);
}

.pungkasan-mlaku {
  background: var(--werno-dasar);
  border-top: 1px solid var(--werno-garis);
  padding: var(--jrah-gedhe) var(--tepi-papan);
}

.pungkasan-mlaku .wates {
  gap: var(--jrah-sedheng);
}

.jeneng-besar {
  font-size: var(--ukuran-enem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.055em;
  overflow-wrap: break-word;
}

.jejeg-pungkasan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--jrah-sedheng);
}

.baris-pungkasan {
  font-size: var(--ukuran-loro);
  font-weight: 400;
  line-height: 1.65;
  color: var(--werno-abu);
}

.jejer-foto {
  background: var(--werno-dasar);
}

.jejeg-foto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--jrah-sedheng);
  align-items: start;
}

.kothak-foto {
  display: flex;
  flex-direction: column;
  gap: var(--jrah-cilik);
}

.bingkai-putih {
  background: var(--werno-kulup);
  padding: var(--jrah-cilik);
  border: 1px solid var(--werno-garis);
}

.bingkai-putih .label-cilik {
  color: var(--werno-ireng);
}

.foto-karya {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--alon-alon) ease;
}

.kothak-foto:hover .foto-karya {
  transform: scale(1.04);
}

.jejer-foto .kothak-foto:nth-child(3n+2) .foto-karya {
  aspect-ratio: 4 / 3;
}

.jejer-foto .kothak-foto:nth-child(4n) .foto-karya {
  aspect-ratio: 1 / 1;
}

.kepala-karya {
  background: var(--werno-dasar-2);
}

.kepala-karya .tulisan-bledek {
  max-width: 16ch;
}

.blok-tutup {
  background: var(--werno-dasar-3);
}

.blok-tutup .baris-tutup {
  max-width: 30ch;
}

.jejer-kaos {
  background: var(--werno-ungu);
  color: var(--werno-kulup);
}

.jejer-kaos .label-cilik {
  color: var(--werno-kulup);
}

.jejer-kaos .catatan-cilik {
  color: var(--werno-kulup);
}

.jejer-kaos .tulisan-bledek {
  color: var(--werno-bledek);
}

.jejeg-kaos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--jrah-sedheng);
  margin-top: var(--jrah-cilik);
}

.kothak-kaos {
  background: var(--werno-dasar);
  border: 1px solid var(--werno-garis);
  color: var(--werno-tulisan);
  padding: var(--jrah-cilik);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--jrah-cilik);
  transition: transform var(--alon-alon) ease, border-color var(--alon-alon);
}

.kothak-kaos:hover {
  transform: translateY(-8px);
  border-color: var(--werno-tautan);
}

.wadhah-kaos {
  overflow: hidden;
}

.foto-kaos {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--werno-dasar-3);
  transition: transform var(--alon-alon) ease;
}

.kothak-kaos:hover .foto-kaos {
  transform: scale(1.06);
}

.jeneng-produk {
  font-size: var(--ukuran-loro);
  font-weight: 700;
  line-height: 1.4;
}

.jejer-kaos .harga-produk {
  color: var(--werno-tautan);
}

.jejer-kaos .lapak-warna {
  grid-column: span 2;
  position: relative;
  min-width: 0;
}

.jejer-kaos .lapak-warna img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.catatan-pitas {
  background: var(--werno-dasar-2);
}

.catatan-pitas .judul-besar {
  color: var(--werno-judul);
}

.spanduk-teaser {
  background: var(--werno-dasar);
}

.wadhah-spanduk {
  overflow: hidden;
}

.foto-spanduk {
  width: 100%;
  transition: transform var(--alon-alon) ease;
}

.wadhah-spanduk:hover .foto-spanduk {
  transform: scale(1.04);
}

.jejeg-teaser {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--jrah-cilik);
  align-items: center;
}

.daftar-baru {
  background: var(--werno-dasar-2);
}

.foto-buka {
  padding-block: 0;
  background: var(--werno-dasar);
}

.foto-gedhe {
  width: 100%;
  height: min(78vh, 780px);
  object-fit: cover;
}

.tulisan-tentang {
  background: var(--werno-dasar-2);
}

.tulisan-tentang .tulisan-badan {
  max-width: 68ch;
}

.foto-lorone {
  background: var(--werno-dasar);
}

.foto-cendhak {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 42%;
}

.tombol-sambung {
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid currentColor;
  color: var(--werno-kulup);
  text-decoration: none;
  transition: background var(--alon-alon) ease, color var(--alon-alon) ease, border-color var(--alon-alon) ease;
}

.tombol-sambung:hover {
  background: var(--werno-aksen);
  border-color: var(--werno-aksen);
  color: #0C0C0C;
}

[data-tema="clereng"] .tombol-sambung {
  color: #262626;
}

.lembar-masuk,
.lembar-tambah {
  display: flex;
  flex-direction: column;
  gap: var(--jrah-cilik);
}

.panel-admin {
  display: flex;
  flex-direction: column;
  gap: var(--jrah-sedheng);
}

.panel-admin[hidden] {
  display: none;
}

.centang-putih {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--ukuran-loro);
  font-weight: 500;
  color: var(--werno-tulisan);
  cursor: pointer;
}

.centang-putih input {
  width: 20px;
  height: 20px;
  accent-color: var(--werno-bledek);
}

.dhaf-tambah {
  display: flex;
  flex-direction: column;
  gap: var(--jrah-cilik);
}

.dhaf-tambah:empty::after {
  content: "Nothing added yet.";
  font-size: var(--ukuran-loro);
  color: var(--werno-abu);
}

.butir-tambah {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--jrah-cilik);
  align-items: center;
  padding: var(--jrah-cilik);
  border: 1px solid var(--werno-garis);
  background: var(--werno-dasar);
}

.gambar-butir {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

.teks-butir {
  min-width: 0;
}

.jeneng-butir {
  font-size: var(--ukuran-loro);
  font-weight: 600;
  color: var(--werno-tulisan);
  overflow-wrap: anywhere;
}

.catatan-butir {
  font-size: var(--ukuran-siji);
  color: var(--werno-abu);
  overflow-wrap: anywhere;
}

.hapus-butir {
  font-size: var(--ukuran-siji);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--werno-abu);
  padding: 10px 12px;
  border: 1px solid var(--werno-garis);
  transition: color var(--alon-alon), border-color var(--alon-alon);
}

.hapus-butir:hover {
  color: var(--werno-salah);
  border-color: var(--werno-salah);
}

.tombol-keluar {
  width: fit-content;
  font-size: var(--ukuran-loro);
  font-weight: 700;
  padding: 14px 26px;
  border: 1px solid var(--werno-garis);
  color: var(--werno-tulisan);
  transition: color var(--alon-alon), border-color var(--alon-alon);
}

.tombol-keluar:hover {
  color: var(--werno-salah);
  border-color: var(--werno-salah);
}

.sambutan-lisa {
  background: var(--werno-dasar-3);
}

.bakat-awak {
  background: var(--werno-dasar-2);
}

.bakat-awak .susun-dof {
  grid-template-columns: repeat(3, 1fr);
}

.jak-ngrumpi {
  background: var(--werno-ungu);
  color: var(--werno-kulup);
}

.jak-ngrumpi .label-cilik,
.jak-ngrumpi .lead-cekap,
.jak-ngrumpi .catatan-cilik {
  color: var(--werno-kulup);
}

.jejer-jak {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jrah-cilik);
}

.wadhah-lirik {
  position: relative;
  overflow: hidden;
}

.wadhah-lirik::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(12, 12, 12, 0.3), rgba(12, 12, 12, 0.9));
}

.teks-lirik {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding-block: var(--jrah-gedhe);
  color: var(--werno-kulup);
}

.teks-lirik .label-cilik {
  color: var(--werno-bledek);
}

.teks-lirik .judul-besar {
  color: var(--werno-bledek);
}

.teks-lirik .tulisan-badan {
  max-width: 60ch;
}

html.duwe-js [data-obah] {
  opacity: 0;
  transform: translateX(-56px);
  transition: opacity 600ms ease, transform 600ms ease;
}

html.duwe-js [data-obah].tampil {
  opacity: 1;
  transform: none;
}

@media (min-width: 1400px) {
  .jeneng-besar {
    font-size: var(--ukuran-pitu);
  }
}

@media (max-width: 899px) {
  :root {
    --tepi-papan: 16px;
    --jrah-gedhe: 42px;
  }

  section {
    padding-block: var(--jrah-gedhe);
  }

  .tulisan-bledek {
    font-size: var(--ukuran-lima);
    letter-spacing: -0.035em;
  }

  .judul-besar {
    font-size: var(--ukuran-papat);
    letter-spacing: -0.025em;
  }

  .judul-cilik {
    font-size: var(--ukuran-telu);
    letter-spacing: -0.015em;
  }

  .lead-cekap {
    font-size: var(--ukuran-loro);
  }

  .baris-tutup {
    font-size: var(--ukuran-telu);
  }

  .jeneng-besar {
    font-size: var(--ukuran-lima);
    letter-spacing: -0.035em;
  }

  .wahana-tulisan {
    font-size: var(--ukuran-loro);
  }

  .susun-wahana {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: none;
    grid-auto-rows: minmax(96px, auto);
  }

  .susun-wahana .wahana-aktif:nth-child(1),
  .susun-wahana .wahana-aktif:nth-child(2),
  .susun-wahana .wahana-aktif:nth-child(3),
  .susun-wahana .wahana-aktif:nth-child(4),
  .susun-wahana .wahana-aktif:nth-child(5),
  .susun-wahana .wahana-aktif:nth-child(6),
  .susun-wahana .wahana-aktif:nth-child(7),
  .susun-wahana .wahana-aktif:nth-child(8) {
    grid-area: auto;
  }

  .susun-wahana .wahana-aktif:nth-child(1) {
    grid-column: span 2;
  }

  .wahana-aktif {
    min-height: 96px;
  }

  .kothak-gawe {
    flex: 0 0 100%;
  }

  .warung-kaos .wates {
    grid-template-columns: 1fr;
    gap: var(--jrah-sedheng);
  }

  .jejeg-kabar {
    grid-template-columns: 1fr;
    gap: var(--jrah-sedheng);
  }

  .jejeg-foto {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--jrah-cilik);
  }

  .jejeg-kaos {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--jrah-cilik);
  }

  .jejer-kaos .lapak-warna {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }

  .jejeg-pungkasan {
    grid-template-columns: 1fr;
    gap: var(--jrah-cilik);
  }

  .jejeg-teaser {
    grid-template-columns: 1fr;
  }

  .foto-gedhe {
    height: 56vh;
  }

  .teks-lirik {
    padding-block: var(--jrah-sedheng);
  }
}

@media (max-width: 599px) {
  .pucuk-arep {
    gap: 10px;
  }

  .rute-mlaku {
    gap: 12px;
  }

  .pil-menu {
    font-size: var(--ukuran-siji);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  .dropdown-konten {
    left: auto;
    right: -20px;
    min-width: 165px;
  }

  .tombol-tema {
    width: 62px;
    height: 31px;
  }

  .gundhul-tema {
    width: 25px;
    height: 25px;
    top: 2px;
  }

  [data-tema="clereng"] .gundhul-tema {
    transform: translateX(31px);
  }

  .wujud-srengenge,
  .wujud-rembulan {
    width: 15px;
    height: 15px;
    margin-top: -7.5px;
  }

  .wujud-rembulan {
    left: 7.5px;
  }

  .wujud-srengenge {
    right: 7.5px;
  }

  .tombol-leren {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gundhul-tema {
    transition: none;
  }
  html.duwe-js [data-obah] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .jeru-leren {
    transition: none;
  }

  .kothak-perangko,
  .kothak-perangko img,
  .kothak-galeri img,
  .kothak-dof,
  .kothak-acak,
  .tombol-video,
  .cakram-video {
    transition: none;
  }
}

[hidden] {
  display: none !important;
}

:root {
  --werno-aksen: #C5DF62;
  --werno-ban: #E8EDE0;
  --werno-ban-2: #DDE4D2;
}

[data-tema="clereng"] {
  --werno-aksen: #5C6B18;
  --werno-ban: #E8EDE0;
  --werno-ban-2: #DDE4D2;
}

[data-accent="perangko"] {
  --werno-aksen: #F2BB55;
  --werno-ban: #FBE7C4;
  --werno-ban-2: #F7DCAC;
}

[data-accent="wpap"] {
  --werno-aksen: #FEBB24;
  --werno-ban: #FFF0C2;
  --werno-ban-2: #FFE7A0;
}

[data-accent="bangunan"] {
  --werno-aksen: #0BABAB;
  --werno-ban: #CFEDEC;
  --werno-ban-2: #BCE3E2;
}

[data-accent="logo"] {
  --werno-aksen: #94D6D7;
  --werno-ban: #D9F0F0;
  --werno-ban-2: #C7E7E7;
}

[data-accent="metal"] {
  --werno-aksen: #DB9359;
  --werno-ban: #EADCDB;
  --werno-ban-2: #E1CDC9;
}

[data-accent="rendah"] {
  --werno-aksen: #E83A9D;
  --werno-ban: #FAD6EA;
  --werno-ban-2: #F5C2DE;
}

[data-accent="ilustrasi"] {
  --werno-aksen: #F7CA3A;
  --werno-ban: #FCEBB8;
  --werno-ban-2: #F7E19E;
}

[data-accent="foto"] {
  --werno-aksen: #8FB4D9;
  --werno-ban: #DCE8F2;
  --werno-ban-2: #CBDDF0;
}

[data-accent="video"] {
  --werno-aksen: #A98BF0;
  --werno-ban: #E6DEFA;
  --werno-ban-2: #D9CCF6;
}

[data-tema="clereng"] [data-accent="perangko"],
[data-tema="clereng"][data-accent="perangko"] {
  --werno-aksen: #8A5A0F;
}

[data-tema="clereng"] [data-accent="wpap"],
[data-tema="clereng"][data-accent="wpap"] {
  --werno-aksen: #7A5200;
}

[data-tema="clereng"] [data-accent="bangunan"],
[data-tema="clereng"][data-accent="bangunan"] {
  --werno-aksen: #066360;
}

[data-tema="clereng"] [data-accent="logo"],
[data-tema="clereng"][data-accent="logo"] {
  --werno-aksen: #1F6B6C;
}

[data-tema="clereng"] [data-accent="metal"],
[data-tema="clereng"][data-accent="metal"] {
  --werno-aksen: #7A4413;
}

[data-tema="clereng"] [data-accent="rendah"],
[data-tema="clereng"][data-accent="rendah"] {
  --werno-aksen: #9B0F62;
}

[data-tema="clereng"] [data-accent="ilustrasi"],
[data-tema="clereng"][data-accent="ilustrasi"] {
  --werno-aksen: #7A5A00;
}

[data-tema="clereng"] [data-accent="foto"],
[data-tema="clereng"][data-accent="foto"] {
  --werno-aksen: #2A5374;
}

[data-tema="clereng"] [data-accent="video"],
[data-tema="clereng"][data-accent="video"] {
  --werno-aksen: #4A2E9E;
}

[data-tema="clereng"] main > .jejer-foto:nth-of-type(odd) {
  background: var(--werno-ban);
}

[data-tema="clereng"] main > .jejer-foto:nth-of-type(even) {
  background: var(--werno-ban-2);
}

[data-tema="clereng"] .pilah-acak {
  background: var(--werno-ban);
}

[data-tema="clereng"] .tepat-metal {
  background: #241E17;
}

.label-aksen {
  color: var(--werno-aksen);
}

.bledek-aksen {
  color: var(--werno-aksen);
}

.garis-aksen {
  border-top: 3px solid var(--werno-aksen);
}

.susun-dof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--jrah-cilik);
}

.kothak-dof {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: filter var(--alon-alon) ease, opacity var(--alon-alon) ease, transform var(--alon-alon) ease;
}

.pilah-acak {
  background: var(--werno-dasar-3);
}

@media (hover: hover) and (pointer: fine) {
  .susun-dof:hover .kothak-dof {
    filter: blur(5px) saturate(0.72);
    opacity: 0.45;
  }

  .susun-dof .kothak-dof:hover,
  .susun-dof .kothak-dof:focus-within {
    filter: none;
    opacity: 1;
    transform: scale(1.03);
    z-index: 2;
  }
}

.kotak-kaca {
  padding: var(--jrah-cilik);
  background: rgba(242, 242, 242, 0.06);
  border: 1px solid rgba(242, 242, 242, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

[data-tema="clereng"] .kotak-kaca {
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(12, 12, 12, 0.12);
}

.susun-galeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--jrah-cilik);
}

.kothak-galeri {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wadhah-galeri {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.wadhah-galeri img,
.wadhah-galeri video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--alon-alon) ease;
}

.kothak-galeri:hover .wadhah-galeri img,
.kothak-dof:hover .wadhah-galeri img,
.kothak-dof:hover .wadhah-galeri video {
  transform: scale(1.06);
}

.wadhah-plat {
  background: var(--werno-dasar-3);
}

.wadhah-plat img {
  object-fit: contain;
}

.kothak-galeri:hover .wadhah-plat img {
  transform: none;
}

.susun-perangko {
  columns: 4;
  column-gap: 26px;
}

.kothak-perangko {
  display: inline-block;
  width: 100%;
  margin: 0 0 26px;
  break-inside: avoid;
  position: relative;
  padding: 11px;
  background: #F2F2F2;
  transition: transform var(--alon-alon) ease, box-shadow var(--alon-alon) ease;
}

.kothak-perangko::before,
.kothak-perangko::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: none;
  background-image: radial-gradient(circle at 6px 6px, var(--werno-dasar) 5px, rgba(0, 0, 0, 0) 5.5px);
  background-size: 14px 12px;
  background-repeat: repeat-x;
}

.kothak-perangko::before {
  top: -6px;
}

.kothak-perangko::after {
  bottom: -6px;
}

.dodolan-perangko {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dodolan-perangko::before,
.dodolan-perangko::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  background-image: radial-gradient(circle at 6px 6px, var(--werno-dasar) 5px, rgba(0, 0, 0, 0) 5.5px);
  background-size: 12px 14px;
  background-repeat: repeat-y;
}

.dodolan-perangko::before {
  left: -6px;
}

.dodolan-perangko::after {
  right: -6px;
}

.kothak-perangko img {
  display: block;
  width: 100%;
  transition: transform var(--alon-alon) ease;
}

.kothak-perangko .label-cilik {
  color: #262626;
}

.kothak-perangko:hover {
  transform: rotate(-1.5deg) scale(1.03);
  box-shadow: 0 18px 40px rgba(12, 12, 12, 0.42);
}

.kothak-perangko:hover img {
  transform: scale(1.02);
}

.wadhah-video {
  position: relative;
  overflow: hidden;
  background: #0C0C0C;
}

.wadhah-video video {
  display: block;
  width: 100%;
  height: auto;
}

.tombol-video {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: rgba(12, 12, 12, 0.42);
  cursor: pointer;
  transition: background var(--alon-alon) ease;
}

.tombol-video:hover {
  background: rgba(12, 12, 12, 0.22);
}

.cakram-video {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 100px;
  background: var(--werno-aksen);
  color: #0C0C0C;
  transition: transform var(--alon-alon) ease;
}

[data-tema="clereng"] .cakram-video {
  color: #F6F4FF;
}

.tepat-metal .cakram-video {
  color: #0C0C0C;
}

.tombol-video:hover .cakram-video {
  transform: scale(1.08);
}

.susun-menempel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.susun-menempel img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.tepat-metal {
  background: #0A0A0A;
  --werno-aksen: #DB9359;
  --werno-judul: #DB9359;
}

.tepat-metal .judul-besar {
  color: #DB9359;
}

.tepat-metal .tulisan-badan,
.tepat-metal .lead-cekap,
.tepat-metal .catatan-cilik,
.tepat-metal .label-cilik {
  color: #9C9484;
}

.saring-kategori {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pil-kategori {
  padding: 10px 16px;
  font-size: var(--ukuran-loro);
  font-weight: 600;
  color: var(--werno-abu);
  background: transparent;
  border: 1px solid var(--werno-garis);
  cursor: pointer;
  transition: color var(--alon-alon) ease, border-color var(--alon-alon) ease, background var(--alon-alon) ease;
}

[data-tema="clereng"] .pil-kategori {
  color: #4A4A4A;
}

.pil-kategori:hover {
  color: var(--werno-tautan);
  border-color: var(--werno-tautan);
}

.pil-kategori[aria-pressed="true"] {
  background: var(--werno-aksen);
  border-color: var(--werno-aksen);
  color: #0C0C0C;
}

.susun-acak {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--jrah-cilik);
}

.kothak-acak {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 1;
  transition: opacity var(--alon-alon) ease;
}

.kothak-acak.redup {
  opacity: 0;
}

.baris-kaca {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jrah-cilik);
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 899px) {
  .susun-dof,
  .susun-acak,
  .susun-galeri {
    grid-template-columns: repeat(2, 1fr);
  }

  .susun-perangko {
    columns: 3;
  }

  .cakram-video {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 599px) {
  .susun-dof,
  .susun-acak,
  .susun-galeri {
    grid-template-columns: 1fr;
  }

  .susun-perangko {
    columns: 1;
  }

  .cakram-video {
    width: 56px;
    height: 56px;
  }
}

.leren-mlaku {
  background: var(--werno-dasar-2);
}

.leren-video {
  position: relative;
  overflow: hidden;
}

.jeru-video {
  display: flex;
  transition: transform var(--alon-alon) ease;
}

.kothak-video {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--jrah-cilik);
}

.leren-video .tombol-leren {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
}

.leren-video .tombol-leren[data-video-buri] {
  left: var(--jrah-cilik);
}

.leren-video .tombol-leren[data-video-macul] {
  right: var(--jrah-cilik);
}

.baris-titik {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.titik-video {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: var(--werno-garis);
  cursor: pointer;
  transition: background var(--alon-alon) ease, width var(--alon-alon) ease;
}

.titik-video[aria-pressed="true"] {
  width: 34px;
  background: var(--werno-aksen);
}

.kothak-galeri:not([data-jenis]) img,
.kothak-perangko img,
.kothak-foto img,
.kothak-dof img,
.kothak-acak img {
  cursor: zoom-in;
}

.kothak-galeri:focus-within,
.kothak-perangko:focus-within,
.kothak-foto:focus-within,
.kothak-dof:focus-within,
.kothak-acak:focus-within {
  outline: 3px solid var(--werno-aksen);
  outline-offset: 4px;
}

.wadhah-besar {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--jrah-cilik);
  background: rgba(12, 12, 12, 0.94);
  opacity: 0;
  transition: opacity var(--alon-alon) ease;
}

.wadhah-besar[data-mbukak] {
  opacity: 1;
}

[data-tema="clereng"] .wadhah-besar {
  background: var(--werno-ban);
}

.cakram-besar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--jrah-cilik);
  align-items: center;
  max-width: min(100%, 1120px);
}

.cakram-besar img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tombol-tutup {
  position: absolute;
  top: var(--jrah-cilik);
  right: var(--jrah-cilik);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--werno-kulup);
  cursor: pointer;
  transition: background var(--alon-alon) ease, color var(--alon-alon) ease, border-color var(--alon-alon) ease;
}

.tombol-tutup:hover {
  background: var(--werno-aksen);
  border-color: var(--werno-aksen);
  color: #0C0C0C;
}

[data-tema="clereng"] .tombol-tutup {
  color: #262626;
}

body.besar-mbukak header,
body.besar-mbukak main,
body.besar-mbukak footer {
  filter: blur(10px);
}

header,
main,
footer {
  transition: filter 420ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .wadhah-besar,
  .jeru-video,
  .titik-video,
  .tombol-tutup,
  header,
  main,
  footer {
    transition: none;
  }

  body.besar-mbukak header,
  body.besar-mbukak main,
  body.besar-mbukak footer {
    filter: none;
  }
}