/*
Theme Name: Javline
Description: Tema majalah terang untuk katalog film JAV dan film semi berbahasa Indonesia. Unggulan lanskap besar di atas, grid poster potret di bawahnya, kode film ditonjolkan sebagai lencana. Diketik dari nol.
Version: 1.0.0
Author: Javline
Text Domain: javline
*/

[hidden]{display:none!important}

/* ==========================================================================
   Token desain — tema TERANG (pembeda dari tema saudara yang gelap)
   ========================================================================== */
:root{
	--jvl-bg:#f4f5f7;
	--jvl-kartu:#ffffff;
	--jvl-teks:#1f2430;
	--jvl-redup:#69707d;
	--jvl-aksen:#e8446b;
	--jvl-aksen-tua:#c22e54;
	--jvl-garis:#e2e5ea;
	--jvl-bayang:0 1px 2px rgba(31,36,48,.06);
	--jvl-bayang-naik:0 6px 18px rgba(31,36,48,.12);
	--jvl-radius:10px;
}

/* ==========================================================================
   Dasar
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

.jvl-badan{
	margin:0;
	background:var(--jvl-bg);
	color:var(--jvl-teks);
	font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
	font-size:16px;
	line-height:1.55;
	-webkit-text-size-adjust:100%;
}

.jvl-badan a{color:var(--jvl-aksen-tua);text-decoration:none}
.jvl-badan a:hover{color:var(--jvl-aksen)}
.jvl-badan img{max-width:100%;height:auto}

.jvl-wadah{
	max-width:1240px;
	margin:0 auto;
	padding-left:16px;
	padding-right:16px;
}

.jvl-utama{
	display:block;
	padding-top:22px;
	padding-bottom:48px; /* jarak di elemen tema, BUKAN padding body */
}

/* Tautan loncat aksesibilitas */
.jvl-loncat{
	position:absolute;
	left:-9999px;
	top:0;
	z-index:100;
	background:var(--jvl-aksen);
	color:#fff;
	padding:12px 18px;
	border-radius:0 0 8px 0;
}
.jvl-loncat:focus{left:0;color:#fff}

/* ==========================================================================
   Bilah atas
   ========================================================================== */
.jvl-topbar{
	background:var(--jvl-kartu);
	border-bottom:1px solid var(--jvl-garis);
	box-shadow:var(--jvl-bayang);
}

.jvl-topbar-dalam{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:10px 18px;
	padding-top:12px;
	padding-bottom:12px;
}

.jvl-logo a{
	display:inline-flex;
	align-items:center;
	gap:8px;
	min-height:44px;
	color:var(--jvl-teks);
}
.jvl-logo-tanda{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	border-radius:9px;
	background:var(--jvl-aksen);
	color:#fff;
	font-weight:800;
	font-size:14px;
	letter-spacing:.5px;
}
.jvl-logo-teks{
	font-size:22px;
	font-weight:800;
	letter-spacing:-.3px;
}

.jvl-nav{
	display:flex;
	align-items:center;
	gap:2px;
}
.jvl-nav-tautan{
	display:inline-flex;
	align-items:center;
	min-height:44px;
	padding:0 14px;
	border-radius:8px;
	color:var(--jvl-teks);
	font-weight:600;
	font-size:15px;
}
.jvl-nav-tautan:hover{
	background:var(--jvl-bg);
	color:var(--jvl-aksen-tua);
}
.jvl-nav-tautan[aria-current="page"]{
	color:var(--jvl-aksen-tua);
	box-shadow:inset 0 -3px 0 var(--jvl-aksen);
	border-radius:8px 8px 0 0;
}

/* Kotak cari: flex aman — flex:1 1 0 + min-width:0 */
.jvl-cari{
	display:flex;
	flex:1 1 0;
	min-width:220px;
	gap:8px;
}
.jvl-cari-label{
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
}
.jvl-cari-input{
	flex:1 1 0;
	min-width:0;
	min-height:44px;
	padding:0 14px;
	border:1px solid var(--jvl-garis);
	border-radius:9px;
	background:var(--jvl-bg);
	color:var(--jvl-teks);
	font-size:15px;
}
.jvl-cari-input:focus{
	outline:2px solid var(--jvl-aksen);
	outline-offset:1px;
	background:var(--jvl-kartu);
}
.jvl-cari-tombol{
	min-height:44px;
	min-width:44px;
	padding:0 18px;
	border:0;
	border-radius:9px;
	background:var(--jvl-aksen);
	color:#fff;
	font-weight:700;
	font-size:15px;
	cursor:pointer;
}
.jvl-cari-tombol:hover{background:var(--jvl-aksen-tua)}

@media (max-width:719px){
	.jvl-cari{flex-basis:100%;order:9}
}

/* ==========================================================================
   Kepala halaman (H1 + intro)
   ========================================================================== */
.jvl-h1-blok{margin:0 0 20px}
.jvl-h1{
	margin:0 0 6px;
	font-size:26px;
	line-height:1.25;
	font-weight:800;
	letter-spacing:-.4px;
}
.jvl-intro{
	margin:0;
	max-width:760px;
	color:var(--jvl-redup);
	font-size:15px;
}
@media (min-width:900px){
	.jvl-h1{font-size:32px}
}

/* ==========================================================================
   Blok unggulan (majalah): lanskap besar + badan teks
   ========================================================================== */
.jvl-hero{
	margin:0 0 30px;
	background:var(--jvl-kartu);
	border:1px solid var(--jvl-garis);
	border-radius:var(--jvl-radius);
	box-shadow:var(--jvl-bayang);
	overflow:hidden;
}
.jvl-hero-tautan{
	display:grid;
	grid-template-columns:1fr;
	color:var(--jvl-teks);
}
.jvl-hero-media{
	position:relative;
	background:#dfe2e8;
	aspect-ratio:16/9;
}
.jvl-hero-gambar{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.jvl-hero-badan{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:8px;
	padding:18px;
}
.jvl-hero-label{
	color:var(--jvl-aksen-tua);
	font-size:12px;
	font-weight:800;
	letter-spacing:1.5px;
	text-transform:uppercase;
}
.jvl-hero-judul{
	margin:0;
	font-size:21px;
	line-height:1.3;
	font-weight:800;
}
.jvl-hero-tautan:hover .jvl-hero-judul{color:var(--jvl-aksen-tua)}
.jvl-hero-meta{
	color:var(--jvl-redup);
	font-size:14px;
	font-weight:600;
}
.jvl-hero-cast{
	color:var(--jvl-redup);
	font-size:14px;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
@media (min-width:820px){
	.jvl-hero-tautan{grid-template-columns:3fr 2fr;align-items:stretch}
	.jvl-hero-media{aspect-ratio:auto;min-height:320px}
	.jvl-hero-badan{justify-content:center;padding:26px}
	.jvl-hero-judul{font-size:25px}
}

/* Tombol umum */
.jvl-tombol{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:44px;
	padding:0 22px;
	margin-top:6px;
	border-radius:9px;
	background:var(--jvl-aksen);
	color:#fff;
	font-weight:700;
	font-size:15px;
}
.jvl-tombol:hover{background:var(--jvl-aksen-tua);color:#fff}
a.jvl-tombol{color:#fff}

/* ==========================================================================
   Seksi
   ========================================================================== */
.jvl-seksi{margin:0 0 34px}
.jvl-seksi-kepala{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:12px;
	margin:0 0 14px;
	padding-bottom:8px;
	border-bottom:2px solid var(--jvl-garis);
}
.jvl-seksi-judul{
	margin:0;
	font-size:19px;
	font-weight:800;
	letter-spacing:-.2px;
	box-shadow:inset 0 -2px 0 var(--jvl-aksen);
	padding-bottom:8px;
	margin-bottom:-10px;
}
.jvl-seksi-semua{
	display:inline-flex;
	align-items:center;
	min-height:44px;
	font-size:14px;
	font-weight:700;
	white-space:nowrap;
}

/* ==========================================================================
   Grid kartu potret: 2 / 3 / 4 / 5 kolom
   ========================================================================== */
.jvl-grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:16px;
}
@media (min-width:620px){
	.jvl-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
	.jvl-grid{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1200px){
	.jvl-grid{grid-template-columns:repeat(5,1fr)}
}

.jvl-kartu{
	background:var(--jvl-kartu);
	border:1px solid var(--jvl-garis);
	border-radius:var(--jvl-radius);
	box-shadow:var(--jvl-bayang);
	overflow:hidden;
	transition:box-shadow .15s ease,transform .15s ease;
}
.jvl-kartu:hover{
	box-shadow:var(--jvl-bayang-naik);
	transform:translateY(-2px);
}
.jvl-kartu-tautan{
	display:block;
	color:var(--jvl-teks);
}
.jvl-kartu-media{
	position:relative;
	aspect-ratio:2/3;
	background:#dfe2e8;
}
.jvl-kartu-gambar{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.jvl-kartu-polos{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	color:var(--jvl-redup);
	font-weight:800;
	font-size:15px;
	letter-spacing:1px;
}
.jvl-kartu-badan{padding:10px 12px 12px}
.jvl-kartu-judul{
	font-size:14px;
	font-weight:700;
	line-height:1.35;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.jvl-kartu-tautan:hover .jvl-kartu-judul{color:var(--jvl-aksen-tua)}
.jvl-kartu-meta{
	margin-top:4px;
	color:var(--jvl-redup);
	font-size:12.5px;
	font-weight:600;
}

/* Lencana di sudut thumbnail: kode film (kiri-atas) + tipe (kanan-atas) */
.jvl-lencana-kode{
	position:absolute;
	top:8px;
	left:8px;
	z-index:2;
	padding:3px 8px;
	border-radius:6px;
	background:var(--jvl-aksen);
	color:#fff;
	font-size:11.5px;
	font-weight:800;
	letter-spacing:.5px;
	line-height:1.4;
}
.jvl-lencana-tipe{
	position:absolute;
	top:8px;
	right:8px;
	z-index:2;
	padding:3px 8px;
	border-radius:6px;
	background:rgba(31,36,48,.78);
	color:#fff;
	font-size:11px;
	font-weight:700;
	letter-spacing:.5px;
	line-height:1.4;
}

/* ==========================================================================
   Chip aktris / studio / genre
   ========================================================================== */
.jvl-chipbar{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:14px;
}
.jvl-chip{
	display:inline-flex;
	align-items:center;
	min-height:44px;
	padding:0 16px;
	border:1px solid var(--jvl-garis);
	border-radius:999px;
	background:var(--jvl-kartu);
	color:var(--jvl-teks);
	font-size:14px;
	font-weight:600;
}
a.jvl-chip:hover{
	border-color:var(--jvl-aksen);
	color:var(--jvl-aksen-tua);
	background:#fdeef2;
}

/* ==========================================================================
   Tanya Jawab (beranda)
   ========================================================================== */
.jvl-faq{max-width:860px}
.jvl-faq-item{
	margin:0 0 10px;
	background:var(--jvl-kartu);
	border:1px solid var(--jvl-garis);
	border-radius:var(--jvl-radius);
	box-shadow:var(--jvl-bayang);
}
.jvl-faq-tanya{
	display:flex;
	align-items:center;
	min-height:44px;
	padding:10px 16px;
	cursor:pointer;
	font-weight:700;
	font-size:15px;
	list-style-position:inside;
}
.jvl-faq-tanya::marker{color:var(--jvl-aksen)}
.jvl-faq-item[open] .jvl-faq-tanya{border-bottom:1px solid var(--jvl-garis)}
.jvl-faq-jawab{
	margin:0;
	padding:12px 16px 16px;
	color:var(--jvl-redup);
	font-size:14.5px;
}

/* ==========================================================================
   Paginasi (markup bawaan paginate_links)
   ========================================================================== */
.jvl-paginasi{margin:26px 0 6px}
.jvl-paginasi .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:44px;
	min-height:44px;
	padding:0 12px;
	border:1px solid var(--jvl-garis);
	border-radius:9px;
	background:var(--jvl-kartu);
	color:var(--jvl-teks);
	font-weight:700;
	font-size:14px;
}
.jvl-paginasi a.page-numbers:hover{
	border-color:var(--jvl-aksen);
	color:var(--jvl-aksen-tua);
}
.jvl-paginasi .page-numbers.current{
	background:var(--jvl-aksen);
	border-color:var(--jvl-aksen);
	color:#fff;
}
.jvl-paginasi .page-numbers.dots{
	border:0;
	background:transparent;
	color:var(--jvl-redup);
}
.jvl-paginasi ul{
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0;
	padding:0;
}
.jvl-paginasi li{margin:0}

/* ==========================================================================
   Halaman single: pemutar, info, isi
   ========================================================================== */
.jvl-single{display:block}
.jvl-single-kepala{margin:0 0 16px}
.jvl-single-meta{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	margin-top:10px;
}
/* Di baris meta single, lencana tidak menempel di sudut gambar */
.jvl-single-meta .jvl-lencana-kode,
.jvl-single-meta .jvl-lencana-tipe{
	position:static;
	display:inline-flex;
	align-items:center;
	min-height:28px;
}
a.jvl-lencana-tipe:hover{background:var(--jvl-aksen-tua);color:#fff}
.jvl-single-tahun{
	color:var(--jvl-redup);
	font-weight:700;
	font-size:14px;
}

.jvl-pemutar{
	position:relative;
	margin:0 0 24px;
	background:#10131a;
	border-radius:var(--jvl-radius);
	overflow:hidden;
	aspect-ratio:16/9;
	box-shadow:var(--jvl-bayang-naik);
}
.jvl-pemutar iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
}
.jvl-pemutar-kosong{
	margin:0 0 24px;
	padding:18px;
	background:var(--jvl-kartu);
	border:1px dashed var(--jvl-garis);
	border-radius:var(--jvl-radius);
	color:var(--jvl-redup);
}

.jvl-isi{
	max-width:860px;
	margin:0 0 26px;
	background:var(--jvl-kartu);
	border:1px solid var(--jvl-garis);
	border-radius:var(--jvl-radius);
	padding:16px 18px;
	font-size:15px;
}
.jvl-isi p{margin:0 0 12px}
.jvl-isi p:last-child{margin-bottom:0}

.jvl-info{margin:0 0 34px}
.jvl-tabel-info{
	width:100%;
	max-width:860px;
	border-collapse:collapse;
	background:var(--jvl-kartu);
	border:1px solid var(--jvl-garis);
	border-radius:var(--jvl-radius);
	overflow:hidden;
	font-size:14.5px;
}
.jvl-tabel-info th,
.jvl-tabel-info td{
	padding:11px 14px;
	border-bottom:1px solid var(--jvl-garis);
	text-align:left;
	vertical-align:top;
}
.jvl-tabel-info tr:last-child th,
.jvl-tabel-info tr:last-child td{border-bottom:0}
.jvl-tabel-info th{
	width:132px;
	color:var(--jvl-redup);
	font-weight:700;
	white-space:nowrap;
}

.jvl-terkait{margin-top:6px}

/* ==========================================================================
   Hasil kosong & 404
   ========================================================================== */
.jvl-hasil-kosong{
	margin:0 0 30px;
	padding:20px;
	background:var(--jvl-kartu);
	border:1px dashed var(--jvl-garis);
	border-radius:var(--jvl-radius);
	color:var(--jvl-redup);
}
.jvl-404{
	margin:0 0 36px;
	padding:28px 22px;
	background:var(--jvl-kartu);
	border:1px solid var(--jvl-garis);
	border-radius:var(--jvl-radius);
	text-align:center;
}
.jvl-404 .jvl-intro{margin:8px auto 18px}

/* ==========================================================================
   Kaki halaman
   ========================================================================== */
.jvl-kaki{
	background:var(--jvl-kartu);
	border-top:1px solid var(--jvl-garis);
	margin-top:20px;
}
.jvl-kaki-dalam{
	padding-top:28px;
	padding-bottom:28px;
}
.jvl-kaki-merek{
	font-size:19px;
	font-weight:800;
	letter-spacing:-.3px;
	margin-bottom:8px;
}
.jvl-kaki-teks{
	margin:0 0 12px;
	max-width:720px;
	color:var(--jvl-redup);
	font-size:14px;
}
.jvl-kaki-nav{
	display:flex;
	flex-wrap:wrap;
	gap:4px 8px;
	margin-bottom:10px;
}
.jvl-kaki-tautan{
	display:inline-flex;
	align-items:center;
	min-height:44px;
	padding:0 10px;
	margin-left:-10px;
	color:var(--jvl-teks);
	font-weight:600;
	font-size:14px;
}
.jvl-kaki-tautan:hover{color:var(--jvl-aksen-tua)}
.jvl-kaki-bawah{
	color:var(--jvl-redup);
	font-size:13px;
	border-top:1px solid var(--jvl-garis);
	padding-top:14px;
}