/*
Theme Name: Putaranova
Theme URI: https://putaranova.org/
Author: Putaranova
Author URI: https://putaranova.org/
Description: Komuniti padang di Kuantan untuk sembilan slot, peran tolak, dan minit tahan Team Fortress 2. Laman peminat, tiada jualan.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: putaranova
Tags: gaming, community, light, one-column, custom-menu
*/

@font-face {
	font-family: 'Rowdies';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/rowdies-700-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: 'Rowdies';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/rowdies-700-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: 'Cabin';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/cabin-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: 'Cabin';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/cabin-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: 'Cabin';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/cabin-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: 'Cabin';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/cabin-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;
}

:root {
	--gips: #f0eee6;
	--paneel: #e2e0d4;
	--haarlijn: #ccc8b8;
	--rand: #6e6a5c;
	--dakwat: #1a1c18;
	--habuk: #4a4c44;
	--karat: #9a2c10;
	--biru: #1e4a78;
	--awas: #b02820;
	--huruf-kata: 'Rowdies', sans-serif;
	--huruf-angka: 'Cabin', sans-serif;
	--huruf-badan: 'Cabin', sans-serif;
	--lapis-pagar: 40;
	--lapis-jalur: 60;
	--kepala-tinggi: 4.6rem;
}

[hidden] {
	display: none !important;
}

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

html {
	scroll-behavior: auto;
	scroll-padding-top: var(--kepala-tinggi);
	background: var(--gips);
}

body {
	margin: 0;
	font-family: var(--huruf-badan);
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--dakwat);
	background: var(--gips);
}

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

a {
	color: var(--biru);
}

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

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

.angka,
.sesat__nombor,
.hasilalat .angka,
select,
.hariruang__sel:first-child {
	font-family: var(--huruf-angka);
	font-weight: 600;
	font-variant-numeric: lining-nums tabular-nums;
}

h1,
h2,
h3 {
	font-family: var(--huruf-kata);
	font-weight: 700;
	line-height: 1.2;
	color: var(--dakwat);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

.padang {
	width: min(72rem, calc(100% - 2rem));
	margin-inline: auto;
}

#isi,
#tiga-aturan,
#sembilan-peran,
#talon-tolak,
#orang-padang,
#catatan-laman,
#soalan-padang,
#ajakan-padang,
#sembilanslot,
#gerabaktahan,
#bakicas,
#tukarperan {
	scroll-margin-top: var(--kepala-tinggi);
}

.lompatisi {
	position: absolute;
	left: 0.8rem;
	top: 0.8rem;
	z-index: calc(var(--lapis-pagar) + 1);
	min-height: 2.75rem;
	padding: 0.5rem 0.9rem;
	background: var(--karat);
	color: var(--gips);
	text-decoration: none;
	transform: translateY(-8rem);
}

.lompatisi:focus {
	transform: none;
}

/* Langit — z-index hanya pada nenek ini */
.pagarpadang {
	position: sticky;
	top: 0;
	z-index: var(--lapis-pagar);
	background: var(--paneel);
	border-bottom: 1px solid var(--haarlijn);
}

.pagarpadang__baris {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	min-height: var(--kepala-tinggi);
	padding-block: 0.4rem;
}

.pagarpadang__merk,
.relkaki__merk {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
	color: var(--dakwat);
	min-height: 2.75rem;
}

.pagarpadang__jalur {
	display: block;
	width: 0.42rem;
	height: 1.7rem;
	background: var(--karat);
}

.pagarpadang__nama {
	font-family: var(--huruf-kata);
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: 0.02em;
}

.butangrel {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	min-width: 2.75rem;
	margin-left: auto;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--rand);
	background: var(--gips);
	color: var(--dakwat);
	font-family: var(--huruf-badan);
	font-size: 0.95rem;
}

.butangrel__jalur {
	display: block;
	width: 1.1rem;
	height: 2px;
	margin-block: 3px;
	background: var(--karat);
}

.pagarpadang__navigasi {
	flex: 1 1 100%;
}

.lorongpadang {
	display: none;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0 0 0.6rem;
}

.pagarpadang--buka .lorongpadang {
	display: flex;
}

.lorongpadang a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.4rem 0.6rem;
	text-decoration: none;
	color: var(--dakwat);
}

.lorongpadang a:hover,
.lorongpadang a:focus-visible {
	color: var(--karat);
}

.ufukpadang {
	position: relative;
	background: var(--paneel);
}

.ufukpadang img {
	width: 100%;
	max-height: 28rem;
	object-fit: cover;
}

.ufukpadang__peti {
	padding: 1.2rem 0 1.6rem;
}

.cippadang {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border: 1px solid var(--rand);
	background: var(--paneel);
	font-size: 0.82rem;
	color: var(--habuk);
}

.tolak {
	padding: 2rem 0;
}

.tolak--paneel {
	background: var(--paneel);
}

.bariscangkuk {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.1rem;
}

.cangkuk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.45rem 0.95rem;
	border: 1px solid var(--karat);
	background: var(--karat);
	color: var(--gips);
	text-decoration: none;
	font-family: var(--huruf-badan);
	font-weight: 600;
	cursor: pointer;
}

.cangkuk:hover,
.cangkuk:focus-visible {
	color: var(--gips);
	background: var(--awas);
	border-color: var(--awas);
}

.cangkuk--senyap {
	background: var(--gips);
	color: var(--dakwat);
	border-color: var(--rand);
}

.cangkuk--senyap:hover,
.cangkuk--senyap:focus-visible {
	color: var(--dakwat);
	background: var(--paneel);
	border-color: var(--karat);
}

.tigaaturan,
.sembilanperan,
.empattalon,
.soalanpadang,
.empatkad,
.acara-jadual,
.dwibahasa,
.alatbaris,
.sembilanbaris,
.duaorang,
.relkaki__jalur,
.borangdua {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.kotakalat {
	background: var(--gips);
	border: 1px solid var(--haarlijn);
	padding: 1rem;
}

.tolak--paneel .kotakalat,
.alatslot,
.alatgerabak,
.alatcas,
.alattukar {
	background: var(--gips);
	border: 1px solid var(--haarlijn);
	padding: 1rem;
}

.kotakalat__kerja {
	margin: 0 0 0.4rem;
	color: var(--habuk);
	font-size: 0.9rem;
}

.karatjalur {
	display: flex;
	justify-content: center;
	padding: 0.4rem 0;
}

.karatjalur__lukis {
	display: block;
	width: min(36rem, 100%);
	height: 12px;
}

.js .muncul {
	opacity: 0;
}

.js .muncul.muncul--nampak {
	opacity: 1;
}

.alatslot img,
.alatgerabak img {
	width: 100%;
	margin-bottom: 0.8rem;
}

.sembilanbaris label,
.alatbaris label,
.borangpadang label {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	margin-bottom: 0.15rem;
	font-weight: 600;
}

select,
input[type='text'],
input[type='email'],
textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--rand);
	background: var(--gips);
	color: var(--dakwat);
	font-family: var(--huruf-badan);
	font-size: 1rem;
}

textarea {
	min-height: 8rem;
}

.hasilalat {
	margin-top: 0.8rem;
	padding: 0.8rem;
	background: var(--paneel);
	border: 1px solid var(--haarlijn);
}

.orangkad img {
	width: 100%;
}

.hariruang {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.4rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--haarlijn);
}

.hariruang h2,
.hariruang h3 {
	margin: 0;
}

.hariruang a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.ajakan {
	background-color: var(--paneel);
	background-image: url('images/jalur-halaman.jpg');
	background-size: cover;
	background-position: center;
}

.ajakan .padang {
	background: var(--gips);
	border: 1px solid var(--rand);
	padding: 1.2rem;
}

.kepaladalam {
	padding: 1.6rem 0 0.4rem;
	background-color: var(--paneel);
	background-image: url('images/tekstur-karat.jpg');
	background-size: cover;
	background-blend-mode: multiply;
}

.kepaladalam .padang {
	background: var(--gips);
	border: 1px solid var(--rand);
	padding: 1.1rem 1rem;
}

.duojejak,
.duoterbalik {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: center;
}

.jadualacara {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.jadualacara th,
.jadualacara td {
	border: 1px solid var(--haarlijn);
	padding: 0.7rem 0.6rem;
	text-align: left;
	min-height: 2.75rem;
	word-break: break-word;
}

.jadualacara code {
	word-break: break-all;
	font-size: 0.88em;
}

.jadualacara th {
	background: var(--paneel);
}

.cipbaris {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.logtiga {
	padding-left: 1.1rem;
	color: var(--habuk);
}

.khabar {
	padding: 0.8rem 1rem;
	border: 1px solid var(--biru);
	background: var(--paneel);
}

.khabar--salah {
	border-color: var(--awas);
	color: var(--awas);
}

.umpanpadang {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.bisu {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.sesat {
	padding: 3rem 0 4rem;
}

.sesat__nombor {
	margin: 0;
	font-size: 4.5rem;
	line-height: 1;
	color: var(--karat);
}

.kukisenarai {
	font-family: var(--huruf-angka);
	font-weight: 600;
}

.relkaki {
	background-color: var(--paneel);
	background-image: url('images/tekstur-gips.jpg');
	background-size: cover;
	background-blend-mode: multiply;
	padding: 2rem 0 7rem;
	border-top: 1px solid var(--rand);
}

.relkaki .padang {
	background: var(--gips);
	border: 1px solid var(--rand);
	padding: 1.2rem 1rem;
}

.relkaki h2 {
	font-size: 1.05rem;
}

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

.relkaki__paut {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	text-decoration: none;
}

.relkaki__data {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.2rem;
	list-style: none;
	margin: 1.2rem 0;
	padding: 0;
}

.penafiantf {
	font-size: 0.92rem;
	color: var(--habuk);
}

.relkaki__tutup {
	border-top: 1px solid var(--haarlijn);
	padding-top: 0.6rem;
}

/* Jalur kuki — z-index hanya pada nenek ini */
.jalurkuki {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--lapis-jalur);
	background: var(--paneel);
	border-top: 1px solid var(--rand);
	padding: 0.6rem 0;
}

.jalurkuki__baris {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	flex-wrap: wrap;
}

.jalurkuki__teks {
	flex: 1 1 16rem;
	margin: 0;
	font-size: 0.9rem;
	color: var(--dakwat);
}

.jalurkuki__teks span {
	display: block;
	color: var(--habuk);
	font-size: 0.82rem;
}

.jalurkuki__butang {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.jalurkuki .cangkuk {
	min-height: 2.75rem;
}

.jalurdalam {
	width: 100%;
	max-height: 14rem;
	object-fit: cover;
}

.nota-isi p:first-of-type {
	font-weight: 600;
}

@media (min-width: 62em) {
	.butangrel {
		display: none;
	}

	.pagarpadang__navigasi {
		flex: 1 1 auto;
	}

	.lorongpadang,
	.pagarpadang--buka .lorongpadang {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0;
		justify-content: flex-end;
		gap: 0.2rem;
	}

	.lorongpadang a {
		padding: 0.3rem 0.7rem;
	}

	.ufukpadang__peti {
		position: absolute;
		left: 1rem;
		bottom: 1.2rem;
		max-width: 36rem;
		background: var(--gips);
		border: 1px solid var(--rand);
		padding: 1rem 1.1rem;
	}

	.tigaaturan,
	.soalanpadang,
	.empattalon {
		grid-template-columns: 1fr 1fr;
	}

	.sembilanperan {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.sembilanbaris {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.alatbaris,
	.duaorang,
	.duojejak,
	.duoterbalik,
	.dwibahasa,
	.borangdua {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	.relkaki__jalur {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}

	.hariruang {
		grid-template-columns: 10rem 12rem 1fr;
		align-items: center;
	}

	.empatkad {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 72em) {
	.tigaaturan {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.empattalon,
	.soalanpadang {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

@media (max-width: 61.99em) {
	.hariruang {
		grid-template-columns: 1fr;
	}

	.jalurkuki {
		padding-bottom: 0.4rem;
		max-height: 42vh;
		overflow-y: auto;
	}

	.relkaki {
		padding-bottom: 9rem;
	}

	.sesat__nombor {
		font-size: 3.2rem;
	}

	.jadualacara,
	.jadualacara thead,
	.jadualacara tbody,
	.jadualacara tr,
	.jadualacara th,
	.jadualacara td {
		display: block;
		width: 100%;
	}

	.jadualacara thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.jadualacara tr {
		margin-bottom: 0.8rem;
		border: 1px solid var(--haarlijn);
	}
}