/*
Theme Name: Zentavia
Theme URI: https://zentavia.org/
Author: Zentavia Katering Majlis
Author URI: https://zentavia.org/
Description: Tema WordPress untuk Zentavia, katering majlis perkahwinan di Johor Bahru. Kami datang ke dewan atau taman anda: tiga format khidmat, dua alat perancangan, dan jadual malam yang boleh dilihat sebelum majlis bermula.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zentavia
Tags: catering, business, dark, custom-menu, translation-ready
*/

/* =========================================================================
   1. Lettertypen, uit de map fonts van het thema zelf
   ========================================================================= */

@font-face {
	font-family: 'Josefin Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/josefin-sans-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Josefin Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/josefin-sans-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/nunito-sans-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/nunito-sans-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/nunito-sans-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/nunito-sans-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   2. Kleuren en maten
   ========================================================================= */

:root {
	--zamrud: #10241d;
	--daun: #183129;
	--garis: #26453a;
	--gading: #f2ece0;
	--tembaga: #d9a95a;
	--pudina: #86c4a8;
	--delima: #e08a7a;
	--kabus: #a8bcae;

	--tulis: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
	--papar: 'Josefin Sans', 'Segoe UI', system-ui, sans-serif;

	--khemah-tinggi: 78px;
	--jarak: 24px;
	--lebar: 1180px;
}

/* =========================================================================
   3. Grondslag
   ========================================================================= */

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

/* Een klasse die display zet is sterker dan de regel van de browser voor
   [hidden]. Zonder deze regel blijft een verborgen knop gewoon staan. */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
	/* Anders komt een ankerlink onder de vaste kop terecht. */
	scroll-padding-top: calc(var(--khemah-tinggi) + 18px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--zamrud);
	color: var(--gading);
	font-family: var(--tulis);
	font-size: 17px;
	line-height: 1.68;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
	font-family: var(--papar);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: 0.01em;
	margin: 0 0 0.5em;
}

h1 {
	font-size: clamp(34px, 4.6vw, 55px);
}

h2 {
	font-size: clamp(27px, 3.1vw, 38px);
}

h3 {
	font-size: clamp(21px, 2vw, 25px);
}

h4 {
	font-size: 19px;
}

p {
	margin: 0 0 1.05em;
}

a {
	color: var(--tembaga);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
	color: var(--pudina);
}

:focus-visible {
	outline: 3px solid var(--pudina);
	outline-offset: 3px;
}

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

ul,
ol {
	margin: 0 0 1.05em;
	padding-left: 1.25em;
}

li {
	margin-bottom: 0.4em;
}

strong,
b {
	font-weight: 600;
}

hr {
	border: 0;
	border-top: 1px solid var(--garis);
	margin: 2.4em 0;
}

/* Alleen voor schermlezers. */
.sepi {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lompat {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 90;
	background: var(--tembaga);
	color: var(--zamrud);
	padding: 14px 22px;
	font-weight: 600;
	border-radius: 0 0 8px 0;
}

.lompat:focus {
	left: 0;
	color: var(--zamrud);
}

/* =========================================================================
   4. Raamwerk
   ========================================================================= */

.dewan {
	width: 100%;
	max-width: var(--lebar);
	margin: 0 auto;
	padding: 0 var(--jarak);
}

.dewan--sempit {
	max-width: 780px;
}

/* Een smalle kolom binnen een dewan die zelf al ruimte aan de zijkant heeft. */
.dewan--tanpajarak {
	padding-left: 0;
	padding-right: 0;
}

.gerai {
	padding: 66px 0;
}

.gerai--dalam {
	padding: 96px 0;
}

.gerai--pendek {
	padding: 40px 0;
}

.gerai--panel {
	background: var(--daun);
	border-top: 1px solid var(--garis);
	border-bottom: 1px solid var(--garis);
}

.gerai__kepala {
	max-width: 780px;
	margin-bottom: 42px;
}

.gerai__kepala--tengah {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.gerai__kening {
	display: block;
	font-family: var(--papar);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pudina);
	margin-bottom: 12px;
}

.gerai__perihal {
	font-size: 19px;
	color: var(--kabus);
	margin-bottom: 0;
}

/* De weefband: rij messing ruiten tussen twee haarlijnen. */
.songket {
	position: relative;
	height: 22px;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--garis);
	border-bottom: 1px solid var(--garis);
	background: transparent;
}

.songket::after {
	content: '';
	position: absolute;
	inset: 5px 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M10 0.6l4 4.4-4 4.4-4-4.4z' fill='%23d9a95a'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center;
	opacity: 0.85;
}

/* Lijsten die als rooster of als tijdlijn dienen dragen geen bolletjes. */
ul.baris2,
ul.baris3,
ul.baris4,
ul.senaraimasa,
ul.soalan,
ul.tirai__fakta,
ul.kadpakej__senarai,
ul.duo__senarai,
ul.tapakmajlis__senarai,
ul.tapakmajlis__undang,
ul.aturcara__senarai,
ul.aturmajlis__senarai,
ul.aturmajlis__ukur,
ul.hukum,
ul.perinci {
	list-style: none;
	padding-left: 0;
}

/* Kleine afstanden, zodat er geen stijlattributen in de sjablonen staan. */
.selepas {
	margin-top: 26px;
}

.selepas--rapat {
	margin-top: 16px;
}

.selepas--lega {
	margin-top: 38px;
}

.tolak {
	margin-bottom: 0;
}

.tolakbawah {
	margin: auto 0 0;
}

.gambarlebar {
	width: 100%;
	border: 1px solid var(--garis);
	border-radius: 4px;
	margin-bottom: 34px;
}

.gambarjalur {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	border: 1px solid var(--garis);
	border-radius: 4px;
	margin-bottom: 34px;
}

/* =========================================================================
   5. Knoppen
   ========================================================================= */

.dulang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 24px;
	border: 1px solid var(--tembaga);
	border-radius: 3px;
	background: transparent;
	color: var(--tembaga);
	font-family: var(--tulis);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.dulang:hover,
.dulang:focus-visible {
	background: var(--tembaga);
	color: var(--zamrud);
}

.dulang--terima {
	background: var(--tembaga);
	color: var(--zamrud);
}

.dulang--terima:hover,
.dulang--terima:focus-visible {
	background: var(--pudina);
	border-color: var(--pudina);
	color: var(--zamrud);
}

.dulang--tenang {
	border-color: var(--garis);
	color: var(--gading);
}

.dulang--tenang:hover,
.dulang--tenang:focus-visible {
	background: var(--garis);
	border-color: var(--pudina);
	color: var(--gading);
}

.dulang--pendek {
	min-height: 40px;
	padding: 8px 16px;
	font-size: 15px;
}

/* De pijl in een kaart wordt naar de onderkant gedrukt. */
.anakpanah {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	margin-top: auto;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}

.anakpanah::after {
	content: '\2192';
	font-size: 18px;
}

.anakpanah:hover,
.anakpanah:focus-visible {
	text-decoration: underline;
}

/* =========================================================================
   6. Kop van de bladzijde
   ========================================================================= */

.khemah {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(16, 36, 29, 0.97);
	border-bottom: 1px solid var(--garis);
}

.khemah__dalam {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: var(--khemah-tinggi);
}

.khemah__merek {
	display: inline-flex;
	align-items: baseline;
	min-height: 44px;
	padding: 4px 0;
	font-family: var(--papar);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--gading);
}

.khemah__zen {
	color: var(--tembaga);
}

.khemah__via {
	color: var(--gading);
}

.khemah__merek:hover .khemah__via,
.khemah__merek:focus-visible .khemah__via {
	color: var(--pudina);
}

.khemah__ekor {
	font-size: 13px;
	line-height: 1.35;
	color: var(--kabus);
	margin: 0;
	max-width: 190px;
	border-left: 1px solid var(--garis);
	padding-left: 16px;
}

.aturcara {
	margin-left: auto;
}

.aturcara__senarai {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aturcara__baris {
	margin: 0;
}

.aturcara__pautan,
.aturcara__senarai a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 11px;
	border-radius: 3px;
	color: var(--gading);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.aturcara__pautan:hover,
.aturcara__senarai a:hover,
.aturcara__pautan:focus-visible,
.aturcara__senarai a:focus-visible {
	background: var(--daun);
	color: var(--tembaga);
}

.khemah__tempah {
	flex: 0 0 auto;
}

.butanggong {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--garis);
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
}

.butanggong__garis {
	display: block;
	position: relative;
	width: 22px;
	height: 2px;
	background: var(--gading);
}

.butanggong__garis::before,
.butanggong__garis::after {
	content: '';
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: var(--gading);
}

.butanggong__garis::before {
	top: -7px;
}

.butanggong__garis::after {
	top: 7px;
}

/* =========================================================================
   7. Kop van een binnenbladzijde, met de weefstof erachter
   ========================================================================= */

.kepalagerai {
	position: relative;
	padding: 74px 0 62px;
	background-color: var(--daun);
	background-image: linear-gradient(90deg, rgba(9, 21, 17, 0.9) 0%, rgba(9, 21, 17, 0.72) 62%, rgba(9, 21, 17, 0.55) 100%), url('images/tenunan-songket.jpg');
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--garis);
}

/* De breedte staat op de kinderen en niet op het vak zelf: het vak is ook een
   dewan, en een kleinere max-width daarop zou het midden verschuiven, zodat de
   kop van de bladzijde niet meer op een lijn staat met de tekst eronder. */
.kepalagerai__dalam > * {
	max-width: 820px;
}

.kepalagerai__kening {
	display: block;
	font-family: var(--papar);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pudina);
	margin-bottom: 14px;
}

.kepalagerai h1 {
	margin-bottom: 16px;
}

.kepalagerai__perihal {
	font-size: 19px;
	color: var(--gading);
	margin-bottom: 0;
	max-width: 700px;
}

/* =========================================================================
   8. Voorpagina: de gordijnopening
   ========================================================================= */

.tirai {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
	border-bottom: 1px solid var(--garis);
}

.tirai__kata {
	background: var(--daun);
	padding: 74px 6vw 74px calc((100vw - var(--lebar)) / 2 + var(--jarak));
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tirai__kening {
	display: block;
	font-family: var(--papar);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pudina);
	margin-bottom: 16px;
}

.tirai__perihal {
	font-size: 20px;
	color: var(--gading);
	max-width: 30em;
}

.tirai__butang {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 12px;
}

.tirai__fakta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 30px;
	margin: 30px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--garis);
	list-style: none;
}

.tirai__fakta li {
	margin: 0;
	font-size: 15px;
	color: var(--kabus);
}

.tirai__fakta b {
	display: block;
	font-family: var(--papar);
	font-size: 23px;
	color: var(--tembaga);
}

.tirai__gambar {
	position: relative;
	min-height: 420px;
}

.tirai__gambar img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================================
   9. Roosters en kaarten
   ========================================================================= */

.baris3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

.baris2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

.baris4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.kadpakej {
	display: flex;
	flex-direction: column;
	background: var(--daun);
	border: 1px solid var(--garis);
	border-radius: 4px;
	overflow: hidden;
}

.gerai--panel .kadpakej {
	background: var(--zamrud);
}

.kadpakej__gambar {
	aspect-ratio: 3 / 2;
	width: 100%;
	object-fit: cover;
	border-bottom: 1px solid var(--garis);
}

.kadpakej__isi {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 24px 24px 26px;
}

.kadpakej__harga {
	font-family: var(--papar);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tembaga);
	margin-bottom: 10px;
}

.kadpakej__tajuk {
	margin-bottom: 8px;
}

.kadpakej__ringkas {
	color: var(--kabus);
	font-size: 15px;
	margin-bottom: 14px;
}

.kadpakej__senarai {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.kadpakej__senarai li {
	position: relative;
	padding-left: 20px;
	font-size: 15px;
	color: var(--gading);
}

.kadpakej__senarai li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 8px;
	background: var(--pudina);
	transform: rotate(45deg);
}

/* De grote sierletters staan in messing en niet in de kleur van de rand:
   op de rand zou het contrast ver onder 3:1 blijven. */
.angka__nombor {
	display: block;
	font-family: var(--papar);
	font-size: clamp(40px, 5vw, 58px);
	font-weight: 600;
	line-height: 1;
	color: var(--tembaga);
	margin-bottom: 8px;
}

.angka {
	padding: 26px 24px;
	background: var(--daun);
	border: 1px solid var(--garis);
	border-radius: 4px;
}

.angka__label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.angka__nota {
	display: block;
	font-size: 14px;
	color: var(--kabus);
	line-height: 1.5;
}

/* =========================================================================
   10. Twee kolommen met een foto ernaast
   ========================================================================= */

.duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 44px;
	align-items: center;
}

.duo--berbalik .duo__gambar {
	order: 2;
}

.duo__gambar img {
	width: 100%;
	border-radius: 4px;
	border: 1px solid var(--garis);
}

.duo__kata h2 {
	margin-bottom: 18px;
}

.duo__senarai {
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--garis);
}

.duo__senarai li {
	display: flex;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--garis);
	margin: 0;
	font-size: 15px;
}

.duo__senarai b {
	flex: 0 0 116px;
	color: var(--pudina);
}

/* =========================================================================
   11. De vier stappen
   ========================================================================= */

.langkah {
	position: relative;
	padding: 26px 24px 24px;
	background: var(--zamrud);
	border: 1px solid var(--garis);
	border-radius: 4px;
}

.gerai--panel .langkah {
	background: var(--daun);
}

.langkah__nombor {
	display: block;
	font-family: var(--papar);
	font-size: 34px;
	font-weight: 600;
	line-height: 1;
	color: var(--tembaga);
	margin-bottom: 6px;
}

.langkah__bila {
	display: block;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pudina);
	margin-bottom: 12px;
}

.langkah__nama {
	font-size: 21px;
	margin-bottom: 10px;
}

.langkah__teks {
	font-size: 15px;
	color: var(--gading);
	margin-bottom: 0;
}

/* =========================================================================
   12. Laporan majlis: de regel uit het draaiboek
   ========================================================================= */

.senaraimasa {
	margin: 0;
	padding: 0 0 0 26px;
	list-style: none;
	border-left: 1px solid var(--garis);
}

.kadmasa {
	position: relative;
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 22px;
	padding: 24px 0;
	margin: 0;
	border-bottom: 1px solid var(--garis);
}

.kadmasa:last-child {
	border-bottom: 0;
}

.kadmasa::before {
	content: '';
	position: absolute;
	left: -31px;
	top: 34px;
	width: 10px;
	height: 10px;
	background: var(--tembaga);
	transform: rotate(45deg);
}

.kadmasa__jam {
	font-family: var(--papar);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--tembaga);
}

.kadmasa__teks {
	font-size: 17px;
	margin-bottom: 10px;
}

.kadmasa__perinci {
	display: block;
	font-size: 14px;
	color: var(--kabus);
}

.kadmasa__nama {
	color: var(--pudina);
	font-weight: 600;
}

/* =========================================================================
   13. Kru
   ========================================================================= */

.barisstaf {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	padding: 26px;
	background: var(--daun);
	border: 1px solid var(--garis);
	border-radius: 4px;
}

.gerai--panel .barisstaf {
	background: var(--zamrud);
}

.barisstaf__gambar {
	width: 100%;
	border-radius: 4px;
	border: 1px solid var(--garis);
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.barisstaf__peran {
	display: block;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pudina);
	margin-bottom: 10px;
}

.barisstaf__nama {
	margin-bottom: 12px;
}

.barisstaf__teks {
	margin-bottom: 0;
	font-size: 16px;
}

/* =========================================================================
   14. Catatan: kaart met twee helften
   ========================================================================= */

.dwiwarna {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--garis);
	border-radius: 4px;
	overflow: hidden;
}

.dwiwarna__atas {
	background: var(--daun);
	padding: 22px 24px 18px;
}

.dwiwarna__bawah {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	background: var(--zamrud);
	padding: 20px 24px 24px;
	border-top: 1px solid var(--garis);
}

.dwiwarna__tarikh {
	display: block;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pudina);
	margin-bottom: 10px;
}

.dwiwarna__tajuk {
	font-size: clamp(20px, 1.8vw, 23px);
	margin-bottom: 0;
}

.dwiwarna__tajuk a {
	display: inline-block;
	min-height: 38px;
	color: var(--gading);
	text-decoration: none;
}

.dwiwarna__tajuk a:hover,
.dwiwarna__tajuk a:focus-visible {
	color: var(--tembaga);
	text-decoration: underline;
}

.dwiwarna__kort {
	font-size: 15px;
	color: var(--kabus);
	margin-bottom: 16px;
}

.dwiwarna__gambar {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-bottom: 1px solid var(--garis);
}

/* De span staat op de li, want dat is het echte kind van het rooster. Op een
   article eronder zou de kaart nooit breed worden. */
.dwiwarna--lebar {
	grid-column: span 3;
}

.dwiwarna--lebar .dwiwarna__atas {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 0;
	align-items: stretch;
	padding: 0;
}

.dwiwarna--lebar .dwiwarna__gambar {
	height: 100%;
	min-height: 250px;
	aspect-ratio: auto;
	border-bottom: 0;
	border-right: 1px solid var(--garis);
}

.dwiwarna--lebar .dwiwarna__kepala {
	padding: 28px 28px 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Paren alineas: links wat de gast ziet, rechts wat de kru doet. */
.pasangan {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	margin: 0 0 4px;
	border-top: 1px solid var(--garis);
}

.pasangan__sisi {
	padding: 22px 26px 20px;
}

.pasangan__sisi--tetamu {
	background: var(--daun);
}

.pasangan__sisi--kru {
	background: var(--zamrud);
	border-left: 1px solid var(--garis);
}

.pasangan__label {
	display: block;
	font-family: var(--papar);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pudina);
	margin-bottom: 8px;
}

.pasangan__teks {
	margin-bottom: 0;
	font-size: 16px;
}

/* =========================================================================
   15. Tabellen
   ========================================================================= */

.jadualbekas {
	overflow-x: auto;
	margin-bottom: 8px;
}

.jadual {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.jadual caption {
	text-align: left;
	font-size: 14px;
	color: var(--kabus);
	padding-bottom: 12px;
}

.jadual th,
.jadual td {
	padding: 13px 14px;
	border-bottom: 1px solid var(--garis);
	text-align: left;
	vertical-align: top;
}

.jadual thead th {
	font-family: var(--papar);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pudina);
	border-bottom: 1px solid var(--tembaga);
}

.jadual tbody th {
	font-weight: 600;
	color: var(--gading);
}

.jadual__angka {
	font-family: var(--papar);
	font-size: 19px;
	color: var(--tembaga);
	white-space: nowrap;
}

/* =========================================================================
   16. Alat pertama: Atur Majlis
   ========================================================================= */

/* Beide panelen even hoog: de lijst met blokken is veel langer dan de
   tekening, en met align-items op start staat er een gat naast de tekening. */
.aturmajlis {
	display: grid;
	grid-template-columns: minmax(0, 350px) minmax(0, 1fr);
	gap: 32px;
	align-items: stretch;
}

.aturmajlis__kiri,
.aturmajlis__kanan {
	background: var(--daun);
	border: 1px solid var(--garis);
	border-radius: 4px;
	padding: 22px;
}

.gerai--panel .aturmajlis__kiri,
.gerai--panel .aturmajlis__kanan {
	background: var(--zamrud);
}

.aturmajlis__ketua {
	font-family: var(--papar);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pudina);
	margin-bottom: 16px;
}

.aturmajlis__senarai {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.blokmajlis {
	padding: 14px 0;
	margin: 0;
	border-bottom: 1px solid var(--garis);
}

.blokmajlis__nama {
	display: block;
	font-weight: 600;
	font-size: 16px;
}

.blokmajlis__kira {
	display: block;
	font-size: 13px;
	color: var(--kabus);
	margin-bottom: 8px;
}

.blokmajlis__label {
	display: inline-block;
	font-size: 13px;
	color: var(--pudina);
	margin-right: 8px;
}

.blokmajlis__nota {
	font-size: 13px;
	color: var(--kabus);
	margin: 8px 0 0;
}

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

.garismasa {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 18px;
}

/* Op een breed scherm is de tip om de tekening te slepen overbodig. */
.garismasa__petua {
	display: none;
}

.garismasa__paksi {
	stroke: var(--garis);
	stroke-width: 1;
}

.garismasa__jam {
	fill: var(--kabus);
	font-family: 'Nunito Sans', sans-serif;
	font-size: 13px;
}

.garismasa__lorong {
	fill: rgba(38, 69, 58, 0.4);
}

.garismasa__kotak {
	fill: var(--pudina);
	stroke: var(--zamrud);
	stroke-width: 1;
}

.garismasa__kotak--tindih {
	fill: var(--delima);
}

.garismasa__tulis {
	fill: #10241d;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
}

.garismasa__puncak {
	fill: rgba(217, 169, 90, 0.2);
	stroke: var(--tembaga);
	stroke-width: 1;
	stroke-dasharray: 4 3;
}

.garismasa__blok {
	cursor: pointer;
}

.aturmajlis__ukur {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin: 0 0 16px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--garis);
	list-style: none;
}

.aturmajlis__ukur li {
	margin: 0;
	font-size: 14px;
	color: var(--kabus);
}

.aturmajlis__ukur b {
	display: block;
	font-family: var(--papar);
	font-size: 24px;
	color: var(--tembaga);
}

.hukum {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hukum li {
	position: relative;
	padding: 10px 0 10px 26px;
	margin: 0;
	font-size: 15px;
	border-bottom: 1px solid var(--garis);
}

.hukum li:last-child {
	border-bottom: 0;
}

.hukum li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.05em;
	width: 9px;
	height: 9px;
	transform: rotate(45deg);
	background: var(--pudina);
}

.hukum__awas::before {
	background: var(--tembaga);
}

.hukum__buruk::before {
	background: var(--delima);
}

.hukum__buruk {
	color: var(--delima);
}

/* =========================================================================
   17. Alat kedua: Banding Pakej
   ========================================================================= */

.bandingpakej {
	background: var(--daun);
	border: 1px solid var(--garis);
	border-radius: 4px;
	padding: 26px;
}

.gerai--panel .bandingpakej {
	background: var(--zamrud);
}

.bandingpakej__kawal {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	padding-bottom: 22px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--garis);
}

.medan {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.medan__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--pudina);
}

.medan__nota {
	font-size: 13px;
	color: var(--kabus);
}

select,
input[type='text'],
input[type='email'],
input[type='date'],
input[type='number'],
textarea {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--garis);
	border-radius: 3px;
	background: var(--zamrud);
	color: var(--gading);
	font-family: var(--tulis);
	font-size: 16px;
}

.gerai--panel select,
.gerai--panel input[type='text'],
.gerai--panel input[type='email'],
.gerai--panel input[type='date'],
.gerai--panel input[type='number'],
.gerai--panel textarea {
	background: var(--daun);
}

textarea {
	min-height: 132px;
	line-height: 1.6;
	resize: vertical;
}

/* Zonder eigen kleur kiest de browser een grijs dat op dit donkere veld te
   flauw is; opacity terug op 1, want Firefox dempt de tekst nog eens extra. */
::placeholder {
	color: var(--kabus);
	opacity: 1;
}

input[type='range'] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 3px;
	background: var(--garis);
}

input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	margin-top: -10px;
	border: 0;
	border-radius: 50%;
	background: var(--tembaga);
}

input[type='range']::-moz-range-track {
	height: 6px;
	border-radius: 3px;
	background: var(--garis);
}

input[type='range']::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 50%;
	background: var(--tembaga);
}

.bandingpakej__tetamu {
	font-family: var(--papar);
	font-size: 22px;
	color: var(--tembaga);
}

.bandingpakej__jadual td:nth-child(2),
.bandingpakej__jadual td:nth-child(3),
.bandingpakej__jadual td:nth-child(4) {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bandingpakej__baris--sama {
	color: var(--kabus);
}

.bandingpakej__baris--sama th {
	color: var(--kabus);
	font-weight: 400;
}

.bandingpakej__baris--beza th {
	color: var(--gading);
}

.bandingpakej__beza {
	font-weight: 600;
	color: var(--tembaga);
}

.bandingpakej__sama {
	color: var(--kabus);
}

.bandingpakej__ringkas {
	margin: 20px 0 6px;
	padding: 16px 18px;
	border-left: 3px solid var(--tembaga);
	background: rgba(217, 169, 90, 0.08);
	font-size: 17px;
}

.bandingpakej__kira {
	margin: 0;
	font-size: 14px;
	color: var(--kabus);
}

/* =========================================================================
   18. Formulieren
   ========================================================================= */

.borang {
	display: grid;
	gap: 18px;
	background: var(--daun);
	border: 1px solid var(--garis);
	border-radius: 4px;
	padding: 26px;
}

.gerai--panel .borang {
	background: var(--zamrud);
}

.borang__pasang {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

/* Het veld dat mensen niet zien en robots wel invullen. */
.lubang {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.notis {
	margin: 0 0 26px;
	padding: 15px 18px;
	border-left: 3px solid var(--pudina);
	background: rgba(134, 196, 168, 0.1);
	font-size: 16px;
}

.notis--buruk {
	border-left-color: var(--delima);
	background: rgba(224, 138, 122, 0.1);
	color: var(--delima);
}

/* =========================================================================
   19. Vragen
   ========================================================================= */

.soalan {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--garis);
}

.soalan li {
	margin: 0;
	padding: 24px 0;
	border-bottom: 1px solid var(--garis);
}

.soalan__tanya {
	font-size: 20px;
	margin-bottom: 10px;
}

.soalan__jawab {
	margin-bottom: 0;
	color: var(--gading);
}

/* =========================================================================
   20. Aanroep met de foto erachter
   ========================================================================= */

.seruan {
	position: relative;
	background-color: var(--zamrud);
	background-image: url('images/khemah-biru.jpg');
	background-size: cover;
	background-position: right center;
	border-top: 1px solid var(--garis);
	border-bottom: 1px solid var(--garis);
}

.seruan::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8, 18, 14, 0.94) 0%, rgba(8, 18, 14, 0.86) 44%, rgba(8, 18, 14, 0.2) 100%);
}

.seruan__dalam {
	position: relative;
	padding: 84px 0;
	max-width: 620px;
}

.seruan__kening {
	display: block;
	font-family: var(--papar);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pudina);
	margin-bottom: 14px;
}

.seruan__teks {
	font-size: 19px;
	color: var(--gading);
	margin-bottom: 26px;
}

/* =========================================================================
   21. Voet van de bladzijde
   ========================================================================= */

.tapakmajlis {
	background: var(--daun);
	border-top: 1px solid var(--garis);
	padding: 58px 0 0;
}

.tapakmajlis__dalam {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	gap: 36px;
	padding-bottom: 44px;
}

.tapakmajlis__merek {
	display: inline-flex;
	align-items: baseline;
	min-height: 44px;
	font-family: var(--papar);
	font-size: 27px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--gading);
	margin-bottom: 10px;
}

.tapakmajlis__zen {
	color: var(--tembaga);
}

.tapakmajlis__via {
	color: var(--gading);
}

.tapakmajlis__ketua {
	font-family: var(--papar);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pudina);
	margin-bottom: 14px;
}

.tapakmajlis__senarai {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tapakmajlis__senarai li {
	margin: 0;
}

.tapakmajlis__senarai a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	font-size: 15px;
	color: var(--gading);
	text-decoration: none;
}

.tapakmajlis__senarai a:hover,
.tapakmajlis__senarai a:focus-visible {
	color: var(--tembaga);
	text-decoration: underline;
}

.tapakmajlis__perinci {
	margin: 0;
	font-size: 15px;
}

.tapakmajlis__perinci dt {
	color: var(--pudina);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: 12px;
}

.tapakmajlis__perinci dd {
	margin: 2px 0 0;
	color: var(--gading);
}

.tapakmajlis__perinci dd a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	color: var(--tembaga);
	text-decoration: none;
}

.tapakmajlis__perinci dd a:hover,
.tapakmajlis__perinci dd a:focus-visible {
	text-decoration: underline;
}

.tapakmajlis__teks {
	font-size: 15px;
	color: var(--kabus);
}

.tapakmajlis__bawah {
	border-top: 1px solid var(--garis);
	padding: 20px 0 26px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	color: var(--kabus);
}

.tapakmajlis__undang {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tapakmajlis__undang a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	font-size: 14px;
	color: var(--kabus);
}

.tapakmajlis__undang a:hover,
.tapakmajlis__undang a:focus-visible {
	color: var(--tembaga);
}

.tapakmajlis__hak {
	margin: 0;
}

/* =========================================================================
   22. Balk over de opslag op het toestel
   ========================================================================= */

.barkuki {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: var(--daun);
	border-top: 2px solid var(--tembaga);
	padding: 16px 0;
}

.barkuki__dalam {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
	align-items: center;
	justify-content: space-between;
}

.barkuki__teks {
	margin: 0;
	flex: 1 1 320px;
	font-size: 15px;
}

.barkuki__butang {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* =========================================================================
   23. Bladzijde die niet bestaat
   ========================================================================= */

.hilang {
	text-align: center;
	padding: 104px 0;
}

/* Zonder :not() zou .hilang p de maat van deze regel overnemen. */
.hilang__nombor:not(p) {
	display: block;
	font-family: var(--papar);
	font-size: clamp(76px, 14vw, 150px);
	font-weight: 600;
	line-height: 1;
	color: var(--tembaga);
	margin-bottom: 10px;
}

.hilang__butang {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 28px;
}

/* =========================================================================
   24. Blokken die opdoemen
   -------------------------------------------------------------------------
   De doorzichtigheid hangt aan de klasse js, die een scriptje in de kop zet.
   Staat javascript uit, dan bestaat die klasse niet en blijft alles zichtbaar.
   ========================================================================= */

.js .timbul {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .timbul--naik {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.js .timbul {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =========================================================================
   25. Smallere schermen
   ========================================================================= */

@media (max-width: 1240px) {
	.tirai__kata {
		padding-left: var(--jarak);
		padding-right: 4vw;
	}
}

/* Het regeltje naast het merk kost tweehonderd punten breedte. Blijft het
   staan tot 1040px, dan valt het menu op 1280px in twee regels uiteen. */
@media (max-width: 1340px) {
	.khemah__ekor {
		display: none;
	}

	.aturcara__pautan,
	.aturcara__senarai a {
		padding: 8px 9px;
		font-size: 14px;
	}
}

@media (max-width: 1040px) {
	.tapakmajlis__dalam {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aturmajlis {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.aturcara {
		display: none;
		margin-left: 0;
	}

	.aturcara--buka {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--daun);
		border-bottom: 1px solid var(--garis);
		padding: 12px var(--jarak) 18px;
		box-shadow: 0 18px 30px rgba(0, 0, 0, 0.34);
	}

	.aturcara--buka .aturcara__senarai {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	/* Flex in plaats van inline-flex: anders loopt de scheidingslijn maar tot
	   waar de tekst eindigt en ziet de lijst er rafelig uit. */
	.aturcara--buka .aturcara__pautan,
	.aturcara--buka .aturcara__senarai a {
		display: flex;
		min-height: 46px;
		font-size: 16px;
		padding: 10px 12px;
		border-bottom: 1px solid var(--garis);
	}

	.butanggong {
		display: inline-flex;
	}

	/* De ruimte gaat vóór de knop met de opdracht en niet vóór het
	   hamburgertje: anders schuift de knop tegen de rand van het toestel. */
	.khemah__tempah {
		margin-left: auto;
	}

	.baris3,
	.baris4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tirai {
		grid-template-columns: minmax(0, 1fr);
	}

	.tirai__gambar {
		min-height: 280px;
		order: -1;
	}

	.tirai__kata {
		padding: 46px var(--jarak);
	}

	.duo,
	.baris2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.duo--berbalik .duo__gambar {
		order: 0;
	}

	.bandingpakej__kawal {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Op 390px zou de tekening met de tijdlijn tot een derde krimpen en zijn de
	   namen van de banen niet meer te lezen. Daarom houdt zij haar maat en
	   schuift het paneel eronder mee. */
	.aturmajlis__kanan {
		overflow-x: auto;
	}

	.garismasa {
		min-width: 820px;
	}

	.garismasa__petua {
		display: block;
		margin: -6px 0 16px;
		font-size: 13px;
		color: var(--kabus);
	}

	.dwiwarna--lebar {
		grid-column: span 1;
	}

	.dwiwarna--lebar .dwiwarna__atas {
		grid-template-columns: minmax(0, 1fr);
	}

	.dwiwarna--lebar .dwiwarna__gambar {
		min-height: 0;
		aspect-ratio: 3 / 2;
		border-right: 0;
		border-bottom: 1px solid var(--garis);
	}

	.pasangan {
		grid-template-columns: minmax(0, 1fr);
	}

	.pasangan__sisi--kru {
		border-left: 0;
		border-top: 1px solid var(--garis);
	}
}

@media (max-width: 660px) {
	.gerai {
		padding: 46px 0;
	}

	.gerai--dalam {
		padding: 58px 0;
	}

	.kepalagerai {
		padding: 48px 0 40px;
	}

	.seruan__dalam {
		padding: 54px 0;
	}

	.baris3,
	.baris4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.barisstaf {
		grid-template-columns: minmax(0, 1fr);
	}

	.barisstaf__gambar {
		max-width: 220px;
	}

	.bandingpakej__kawal {
		grid-template-columns: minmax(0, 1fr);
	}

	.bandingpakej {
		padding: 20px 16px;
	}

	.borang,
	.aturmajlis__kiri,
	.aturmajlis__kanan {
		padding: 18px 16px;
	}

	.borang__pasang {
		grid-template-columns: minmax(0, 1fr);
	}

	.kadmasa {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.senaraimasa {
		padding-left: 20px;
	}

	.kadmasa::before {
		left: -25px;
		top: 30px;
	}

	.tapakmajlis__dalam {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* Een brede tabel duwt de bladzijde uit het toestel, ook binnen een
	   omhulsel met overflow. Daarom hier een stapel met de kolomnaam ervoor. */
	.jadualbekas {
		overflow-x: visible;
	}

	.jadual {
		display: block;
	}

	.jadual thead {
		display: none;
	}

	.jadual tbody,
	.jadual tr,
	.jadual th,
	.jadual td {
		display: block;
		width: auto;
		white-space: normal;
	}

	.jadual tr {
		border: 1px solid var(--garis);
		border-radius: 4px;
		margin-bottom: 14px;
		padding: 6px 14px 10px;
	}

	.jadual th,
	.jadual td {
		border-bottom: 0;
		padding: 7px 0;
	}

	.jadual tbody th {
		font-family: var(--papar);
		font-size: 18px;
		border-bottom: 1px solid var(--garis);
		padding-bottom: 10px;
		margin-bottom: 4px;
	}

	.jadual td::before {
		content: attr(data-lajur);
		display: block;
		font-size: 12px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--pudina);
		margin-bottom: 2px;
	}

	.bandingpakej__jadual td:nth-child(2),
	.bandingpakej__jadual td:nth-child(3),
	.bandingpakej__jadual td:nth-child(4) {
		white-space: normal;
	}

	.barkuki__dalam {
		gap: 10px;
	}

	.barkuki__butang {
		width: 100%;
	}

	.barkuki__butang .dulang {
		flex: 1 1 auto;
	}
}

@media (max-width: 420px) {
	body {
		font-size: 16px;
	}

	.khemah__merek {
		font-size: 25px;
	}

	.khemah__tempah {
		padding: 10px 13px;
		font-size: 14px;
	}

	.tirai__butang .dulang,
	.hilang__butang .dulang,
	.seruan .dulang {
		width: 100%;
	}
}