/* ===================================================================
 * Cozy RO - komponen visual Game Guide (.cozy-guide) & "Server at a
 * Glance" di beranda (.cozy-glance). Dibuat 2026-09-29 atas masukan
 * pemilik: guide "kurang menarik", Glance "kurang gimmick gambar/NPC".
 *
 * Semua aturan guide dicakup .cozy-guide supaya halaman FluxCP lain tidak
 * ikut berubah. Sprite ada di images/ro/ (lihat lib/Cozy/Sprite.php).
 * =================================================================== */

:root {
	--cg-ink: #2b2140;
	--cg-purple: #46305e;
	--cg-purple-2: #7a4fb0;
	--cg-lav: #f6f2fb;
	--cg-line: #e6def0;
	--cg-gold: #ffd678;
	--cg-gold-d: #8a5f16;
	--cg-cream-1: #fdf6e6;
	--cg-cream-2: #f1e3c2;
	--cg-text: #3d3650;
	--cg-muted: #625a73;
	--cg-green: #16703a;
	--cg-red: #a42a1f;
}

/* ---------- sprite & ikon (dipakai guide dan beranda) ---------- */
.cg-icon { image-rendering: pixelated; image-rendering: crisp-edges; }
/* Sprite ditampilkan pada ukuran asli; bila diperkecil (max-height) jangan
   pixelated - skala bukan kelipatan bulat membuang baris piksel. */
.cg-mob, .cg-sprite { image-rendering: auto; }
.cg-icon { width: 24px; height: 24px; vertical-align: -6px; }
.cg-mob, .cg-sprite { display: inline-block; max-width: 100%; height: auto; vertical-align: bottom; }
.cg-mob-dim { opacity: .45; filter: grayscale(.6); }

/* ===================================================================
 * GAME GUIDE
 * =================================================================== */
.cozy-guide {
	text-align: left;
	color: var(--cg-text);
	font-size: 1.55rem;
	line-height: 1.65;
	padding: 6px 8px 24px;
}
.cozy-guide p, .cozy-guide li { color: var(--cg-text); }
.cozy-guide a { color: #6a3fa0; text-decoration: underline; text-underline-offset: 2px; }
.cozy-guide a:hover, .cozy-guide a:focus { color: var(--cg-ink); }
.cozy-guide strong { color: var(--cg-ink); }
.cozy-guide p { margin: 0 0 1.2rem; max-width: 78ch; }
.cozy-guide h4 {
	margin: 2.8rem 0 1rem;
	font-family: "montserrat-bold", sans-serif;
	font-size: 1.8rem;
	line-height: 1.35;
	color: var(--cg-ink);
	text-transform: none;
	letter-spacing: 0;
}
.cozy-guide h5 {
	margin: 2rem 0 .8rem;
	font-family: "montserrat-semibold", sans-serif;
	font-size: 1.5rem;
	color: var(--cg-purple);
	text-transform: none;
	letter-spacing: 0;
}
.cozy-guide code {
	background: #efe9f7;
	color: var(--cg-purple);
	border-radius: 5px;
	padding: 1px 6px;
	font-size: .92em;
}
.cozy-guide ul, .cozy-guide ol { margin: 0 0 1.4rem 2.2rem; }
.cozy-guide ul li { list-style: disc; margin-bottom: .4rem; }
.cozy-guide ol li { list-style: decimal; margin-bottom: .4rem; }
/* Daftar berbentuk chip/pil tidak memakai bullet & indentasi daftar biasa
   (.cozy-guide ul li di atas lebih spesifik daripada .cg-facts li). */
.cozy-guide ul.cg-facts, .cozy-guide ul.cg-chips { margin-left: 0; }
.cozy-guide ul.cg-facts > li, .cozy-guide ul.cg-chips > li { list-style: none; margin-bottom: 0; }
/* catatan lama (.note) di dalam guide: jangan miring/abu-abu lagi */
.cozy-guide .note { font-style: normal; color: var(--cg-text); }

/* ---------- hero ---------- */
.cg-hero {
	position: relative;
	margin: 0 0 1.6rem;
	padding: 2.6rem 2.8rem 2.2rem;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--cg-cream-1) 0%, var(--cg-cream-2) 100%);
	border: 1px solid #e8d4a2;
	overflow: hidden;
}
.cg-hero h2 {
	margin: 0 0 .4rem;
	font-family: "montserrat-extrabold", sans-serif;
	font-size: 3.4rem;
	line-height: 1.15;
	color: var(--cg-purple);
	text-transform: none;
	letter-spacing: 0;
}
.cg-hero .cg-lead { font-size: 1.7rem; color: #5b4a2e; margin: 0 0 1.4rem; max-width: 60ch; }
.cg-parade {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	flex-wrap: wrap;
	margin: 0 0 1.6rem;
	min-height: 64px;
}
.cg-parade img { max-height: 96px; width: auto; }
.cg-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.cg-facts li {
	list-style: none;
	margin: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .75);
	border: 1px solid #e3cf98;
	font-size: 1.35rem;
	color: #4a3a1c;
	white-space: nowrap;
}
.cg-facts li b { color: var(--cg-ink); }

/* ---------- navigasi bab (chip) ---------- */
.cg-nav {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding: 10px 2px;
	margin: 0 0 1rem;
	background: #fff;
	border-bottom: 1px solid var(--cg-line);
}
.cg-nav a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 8px;
	border-radius: 999px;
	background: var(--cg-lav);
	border: 1px solid var(--cg-line);
	color: var(--cg-purple);
	font-family: "montserrat-semibold", sans-serif;
	font-size: 1.3rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}
.cg-nav a:hover, .cg-nav a:focus-visible, .cg-nav a.is-active { background: var(--cg-gold); border-color: #e6bd55; color: var(--cg-ink); }
.cg-nav a:focus-visible { outline: 2px solid var(--cg-purple); outline-offset: 2px; }
.cg-nav img { width: 24px; height: 24px; }
/* HP/tablet: satu baris yang digeser ke samping, tanpa batang gulir. */
.cg-nav { scrollbar-width: none; }
.cg-nav::-webkit-scrollbar { display: none; }
/* Desktop: SEMUA chip terlihat (dilipat 2 baris) dan menempel di bawah header.
   Menempel hanya >= 1024px - di tablet tiga baris menempel memakan layar. */
@media only screen and (min-width: 1024px) {
	.cg-nav {
		position: sticky;
		top: 72px;
		z-index: 30;
		flex-wrap: wrap;
		row-gap: 6px;
		overflow: visible;
	}
	.cg-nav a { font-size: 12.5px; padding: 4px 10px 4px 6px; }
	/* sticky mati di dalam leluhur ber-overflow:hidden (section#home halaman
	   dalam). Hanya halaman guide yang dilepas; browser tanpa :has() cukup
	   mendapat menu biasa yang tidak menempel. */
	section#home:has(.cozy-guide) { overflow: visible; }
}

/* ---------- bab ---------- */
.cg-sec { margin: 4.4rem 0 0; }
/* Semua target anchor di guide (bab, sub-bab h4, hero) mendarat di bawah
   header fixed (72px) + menu yang menempel (~90px di desktop). */
.cozy-guide [id] { scroll-margin-top: 90px; }
@media only screen and (min-width: 1024px) {
	/* --cg-nav-h diisi script guide dari tinggi menu SEBENARNYA (2 baris di
	   1366, 3 baris di 1024); 180px hanya cadangan tanpa JS. */
	.cozy-guide [id] { scroll-margin-top: 180px; scroll-margin-top: calc(86px + var(--cg-nav-h, 94px)); }
	.cozy-guide #guide-top { scroll-margin-top: 90px; }
}
.cg-sec-head {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	margin: 0 0 1.8rem;
	padding: 0 0 10px;
	border-bottom: 3px solid var(--cg-gold);
}
.cg-sec-head .cg-sec-art {
	flex: 0 0 76px;
	min-height: 72px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	line-height: 0;
}
.cg-sec-head .cg-sec-art img { max-height: 72px; width: auto; }
.cg-sec-head h3 {
	margin: 0;
	font-family: "montserrat-bold", sans-serif;
	font-size: 2.5rem;
	line-height: 1.2;
	color: var(--cg-purple);
	text-transform: none;
	letter-spacing: 0;
	text-align: left;
}
.cg-sec-head .cg-sec-sub { margin: .3rem 0 0; font-size: 1.45rem; color: var(--cg-muted); }
.cg-top { margin: 1.6rem 0 0; font-size: 1.3rem; }
.cg-top a { color: var(--cg-muted); }

/* ---------- callout ---------- */
.cg-callout {
	margin: 1.6rem 0;
	padding: 1.2rem 1.6rem;
	border-radius: 10px;
	border-left: 5px solid;
	max-width: none;
}
.cozy-guide p.cg-callout { max-width: none; }
.cg-callout > :last-child { margin-bottom: 0; }
.cg-tip  { background: #fff8e6; border-color: #d4a73a; }
.cg-warn { background: #fdeeec; border-color: #c0392b; }
.cg-info { background: #f3eefa; border-color: var(--cg-purple-2); }
.cg-label {
	display: inline-block;
	margin-right: 8px;
	padding: 2px 8px;
	border-radius: 4px;
	font-family: "montserrat-bold", sans-serif;
	font-size: 1.15rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: 1px;
}
.cg-tip .cg-label  { background: #f5d77e; color: #4a3500; }
.cg-warn .cg-label { background: #c0392b; color: #fff; }
.cg-info .cg-label { background: var(--cg-purple); color: #fff; }

/* ---------- kartu & grid ---------- */
.cg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 14px;
	margin: 1.4rem 0 1.8rem;
}
.cg-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
@media only screen and (max-width: 400px) {
	.cg-grid, .cg-grid-2 { grid-template-columns: 1fr; }
}
.cg-card {
	position: relative;
	min-width: 0;
	padding: 1.4rem 1.6rem;
	background: #fff;
	border: 1px solid var(--cg-line);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(43, 33, 64, .06);
}
.cg-card > :last-child { margin-bottom: 0; }
.cg-card h4 { margin: 0 0 .6rem; font-size: 1.6rem; }
.cg-card p { font-size: 1.45rem; max-width: none; }
.cg-card-art { float: right; margin: 0 0 6px 10px; line-height: 0; }
.cg-card-art img { max-height: 64px; width: auto; }
.cg-card-hl { border-color: #e3c56f; background: linear-gradient(180deg, #fffdf6 0%, #fff 60%); }
.cg-card-vip { border-top: 4px solid var(--cg-purple); }
.cg-card-vipp { border-top: 4px solid #d4a73a; }
.cg-card .cg-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 .8rem; }

/* ---------- lencana akses, koordinat, chip ---------- */
.cg-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	font-family: "montserrat-bold", sans-serif;
	font-size: 1.15rem;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: 2px;
}
.cg-all  { background: #e3f3e8; color: var(--cg-green); }
.cg-vip  { background: var(--cg-purple); color: #fff; }
.cg-vipp { background: var(--cg-gold); color: #3a2800; }
.cg-rare { background: #e2ecf7; color: #1d4f86; }
.cg-epic { background: #efe3fb; color: #5b2c91; }
.cg-leg  { background: #fff0c9; color: #6b4600; }
.cg-card .cg-coord { white-space: normal; }
.cg-coord {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 6px;
	background: #efe9f7;
	color: var(--cg-purple);
	font-family: Consolas, "Courier New", monospace;
	font-size: .9em;
	white-space: nowrap;
}
.cg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: .8rem 0 1.4rem; padding: 0; }
.cg-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px 4px 6px;
	border-radius: 999px;
	background: var(--cg-lav);
	border: 1px solid var(--cg-line);
	font-size: 1.35rem;
	line-height: 1.3;
	color: var(--cg-text);
}
.cg-chips > li { list-style: none; margin: 0; }
.cg-on  { color: var(--cg-green); font-weight: 700; }
.cg-off { color: #6f6f6f; font-weight: 700; }

/* ---------- langkah bernomor ---------- */
.cg-steps {
	counter-reset: cgstep;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
	margin: 1.4rem 0 1.8rem !important;
	padding: 0;
}
.cg-steps > li {
	counter-increment: cgstep;
	position: relative;
	list-style: none !important;
	margin: 0 !important;
	padding: 1.4rem 1.4rem 1.4rem 5.8rem;
	background: #fdf9ef;
	border: 1px solid #eedfb6;
	border-radius: 12px;
	font-size: 1.45rem;
}
.cg-steps > li::before {
	content: counter(cgstep);
	position: absolute;
	left: 1.4rem;
	top: 1.3rem;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background: var(--cg-gold);
	color: var(--cg-ink);
	font-family: "montserrat-bold", sans-serif;
	font-size: 1.6rem;
	line-height: 3.2rem;
	text-align: center;
}
.cg-steps > li > strong:first-child { display: block; margin-bottom: .3rem; font-size: 1.55rem; }

/* ---------- tabel ---------- */
.cg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.2rem 0 1.8rem; }
.cozy-guide table.cg-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 1.45rem;
	line-height: 1.5;
	color: var(--cg-text);
	background: #fff;
}
.cozy-guide .cg-scroll > table.cg-table { min-width: 480px; }
.cozy-guide table.cg-table th,
.cozy-guide table.cg-table td {
	padding: 9px 12px;
	border: 0;
	border-bottom: 1px solid #eee8f3;
	text-align: left;
	vertical-align: top;
	font-size: inherit;
	color: inherit;
}
.cozy-guide table.cg-table th {
	background: var(--cg-lav);
	color: var(--cg-purple);
	font-family: "montserrat-semibold", sans-serif;
	font-size: 1.3rem;
	letter-spacing: .02em;
	white-space: nowrap;
}
.cozy-guide table.cg-table tr:hover td { background: #fcfaff; }

/* ---------- lipatan (details) ---------- */
.cg-more {
	margin: 1.2rem 0;
	border: 1px solid var(--cg-line);
	border-radius: 10px;
	background: #fff;
}
.cg-more > summary {
	cursor: pointer;
	list-style: none;
	padding: 1.1rem 1.6rem 1.1rem 4rem;
	position: relative;
	font-family: "montserrat-semibold", sans-serif;
	font-size: 1.45rem;
	color: var(--cg-purple);
}
.cg-more > summary::-webkit-details-marker { display: none; }
.cg-more > summary::before {
	content: "";
	position: absolute;
	left: 1.6rem;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .15s ease;
}
.cg-more[open] > summary::before { transform: rotate(45deg); }
.cg-more > summary:focus-visible { outline: 2px solid var(--cg-purple); outline-offset: 2px; border-radius: 10px; }
.cg-more > .cg-more-body { padding: 0 1.6rem 1.4rem; }
.cg-more > .cg-more-body > :last-child { margin-bottom: 0; }

/* ---------- tangga risiko refine ---------- */
.cg-ladder {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 1.4rem 0 1.8rem;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--cg-line);
}
.cg-ladder > div { padding: 1.2rem 1.4rem; font-size: 1.4rem; }
.cg-ladder > div > b { display: block; margin-bottom: .3rem; font-family: "montserrat-bold", sans-serif; }
.cg-ladder .cg-safe { background: #e9f6ee; }
.cg-ladder .cg-mid  { background: #fff5dc; }
.cg-ladder .cg-risk { background: #fdecea; }
@media only screen and (max-width: 600px) {
	.cg-ladder { grid-template-columns: 1fr; }
}

/* ---------- evolusi & pasangan A -> B ---------- */
.cg-evo { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: .4rem 0 .8rem; min-height: 56px; }
.cg-evo img { max-height: 72px; width: auto; }
.cg-evo .cg-arrow { align-self: center; color: var(--cg-gold-d); font-size: 2rem; line-height: 1; }

/* ---------- tambahan atas permintaan penulis bab ---------- */
.cg-foot { font-size: 1.3rem; color: var(--cg-muted); }
.cg-card-hl .cg-card-art img { max-height: 96px; }
.cg-strip { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: .6rem 0 0; }
.cg-strip img { max-height: 64px; width: auto; }
@media only screen and (max-width: 480px) {
	.cg-facts li { white-space: normal; }
	.cg-card-hl .cg-card-art img { max-height: 64px; }
}

/* ---------- ponsel ---------- */
@media only screen and (max-width: 768px) {
	.cozy-guide { font-size: 1.5rem; padding: 2px 0 16px; }
	.cg-hero { padding: 2rem 1.6rem 1.8rem; border-radius: 12px; }
	.cg-hero h2 { font-size: 2.8rem; }
	.cg-parade { gap: 12px; }
	.cg-parade img { max-height: 72px; }
	.cg-parade .cg-hide-sm { display: none; }
	.cg-sec-head h3 { font-size: 2.1rem; }
	.cg-sec-head .cg-sec-art { flex-basis: 58px; min-height: 56px; }
	.cg-sec-head .cg-sec-art img { max-height: 56px; }
	.cg-card-art img { max-height: 52px; }
	/* main.css mengecilkan root font jadi 9.375px di HP; teks guide dikunci
	   dalam px supaya tetap nyaman dibaca. */
	.cozy-guide { font-size: 15.5px; }
	.cg-card p, .cg-steps > li, .cozy-guide table.cg-table, .cg-callout { font-size: 15px; }
	.cg-badge, .cg-label { font-size: 11px; }
	.cg-nav a { font-size: 13px; }
	.cg-facts li { font-size: 13px; }
	.cg-chip { font-size: 13.5px; }
}
/* HP kecil: tabel tidak dipaksa 480px (kolom terakhir terpotong), fakta hero
   dua kolom supaya layar pertama tidak habis oleh hero. */
@media only screen and (max-width: 480px) {
	.cozy-guide .cg-scroll > table.cg-table { min-width: 0; }
	.cozy-guide table.cg-table th, .cozy-guide table.cg-table td { padding: 8px; }
	.cozy-guide table.cg-table th { white-space: normal; }
	.cozy-guide table.cg-table td { overflow-wrap: anywhere; hyphens: auto; }
	.cg-more-body .cg-scroll table.cg-table th, .cg-more-body .cg-scroll table.cg-table td { padding: 6px; font-size: 14px; }
	.cg-facts { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; gap: 6px; }
	.cg-facts li { border-radius: 10px; padding: 4px 8px; white-space: normal; }
	.cg-facts li:nth-child(4), .cg-facts li:nth-child(8) { grid-column: 1 / -1; }
}

/* ---------- beranda: counter pemain online di baris fakta hero ---------- */
.cozy-online { display: block; margin: .6rem 0 0; white-space: nowrap; }
.cozy-online-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin: 0 7px 1px 0;
	border-radius: 50%;
	background: #3ddc84;
	box-shadow: 0 0 0 3px rgba(61, 220, 132, .25);
	vertical-align: middle;
}
.cozy-online-dot.is-off { background: #b9b3c4; box-shadow: none; }

/* ===================================================================
 * BERANDA - SERVER AT A GLANCE
 * =================================================================== */
.cozy-glance-top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.4rem;
	margin: 0 auto 1rem;
	max-width: 980px;
}
.cozy-glance-top .cozy-glance-intro { flex: 1 1 auto; }
.cozy-glance-mascot { flex: 0 0 auto; line-height: 0; }
.cozy-glance-mascot img { width: 190px; height: auto; }
@media only screen and (max-width: 768px) {
	.cozy-glance-top { flex-direction: column; gap: 0; }
	.cozy-glance-mascot img { width: 130px; }
}
.cozy-glance-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 2.4rem 0 1rem;
}
@media only screen and (max-width: 1000px) {
	.cozy-glance-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 640px) {
	.cozy-glance-cards { grid-template-columns: 1fr; }
}
.cozy-glance-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 1.8rem 2rem 2rem;
	background: #fff;
	border: 1px solid #eadff2;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(43, 33, 64, .07);
	text-align: left;
}
.cozy-glance-card .cozy-glance-art {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 112px;
	margin: -.4rem 0 1rem;
	border-radius: 10px;
	background: radial-gradient(ellipse at 50% 100%, #efe6f8 0%, rgba(239, 230, 248, 0) 70%);
}
.cozy-glance-card .cozy-glance-art img { max-height: 106px; width: auto; }
.cozy-glance .cozy-glance-card h3 {
	margin: 0 0 1rem;
	font-family: "montserrat-bold", sans-serif;
	font-size: 1.75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #46305e;
	text-align: center;
}
.cozy-glance-card p, .cozy-glance-card li { font-size: 1.5rem; line-height: 1.6; color: #4a4258; }
.cozy-glance-card ul { margin: 0; padding: 0; }
.cozy-glance-card ul li { list-style: none; position: relative; padding-left: 1.8rem; margin: 0 0 .7rem; }
.cozy-glance-card ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .75em;
	width: 7px;
	height: 7px;
	background: #c9a24a;
	transform: rotate(45deg);
}
.cozy-glance-card table.cozy-facts { margin: 0; width: 100%; }
.cozy-glance-card .cozy-glance-foot { margin-top: auto; padding-top: .8rem; font-size: 1.4rem; }
.cozy-glance-card .cozy-protect { margin: 0 0 1rem; }

/* parade monster: Poring & kawan-kawan berjalan di bawah kartu */
.cozy-parade {
	position: relative;
	height: 64px;
	margin: 1.4rem 0 0;
	overflow: hidden;
	border-bottom: 2px dashed rgba(201, 162, 74, .45);
	container-type: inline-size;
}
/* Sprite FluxCP menghadap kiri -> berjalan dari kanan ke kiri, sambil
   melompat kecil (animasi kedua memakai 'bottom', bukan transform, supaya
   tidak bertabrakan dengan geser horizontal). */
.cozy-parade img {
	position: absolute;
	bottom: 2px;
	left: 100%;
	animation: cozy-jalan 38s linear infinite, cozy-lompat .9s ease-in-out infinite alternate;
}
.cozy-parade img:nth-child(2) { animation-delay: -7s, -.3s;  animation-duration: 42s, 1s; }
.cozy-parade img:nth-child(3) { animation-delay: -15s, -.6s; animation-duration: 36s, .8s; }
.cozy-parade img:nth-child(4) { animation-delay: -22s, -.2s; animation-duration: 44s, 1.1s; }
.cozy-parade img:nth-child(5) { animation-delay: -29s, -.5s; animation-duration: 40s, .95s; }
.cozy-parade img:nth-child(6) { animation-delay: -34s, -.7s; animation-duration: 46s, 1.05s; }
/* Jarak tempuh = lebar kotak parade (cqw); vw hanya cadangan browser lama. */
@keyframes cozy-jalan {
	from { transform: translateX(0); }
	to   { transform: translateX(-100vw); transform: translateX(calc(-100cqw - 120px)); }
}
@keyframes cozy-lompat {
	from { bottom: 2px; }
	to   { bottom: 9px; }
}
@media (prefers-reduced-motion: reduce) {
	.cozy-parade img { animation: none; position: static; margin: 0 10px; }
	.cozy-parade { display: flex; align-items: flex-end; justify-content: center; }
}
.cozy-glance-cta { text-align: center; margin: 2.4rem 0 0; }
/* HP: enam kartu bertumpuk - panggung sprite dipendekkan (#information
   sempat ~3000px). */
@media only screen and (max-width: 640px) {
	.cozy-glance-card { padding: 1.6rem 1.6rem 1.8rem; }
	.cozy-glance-card .cozy-glance-art { height: 84px; margin-bottom: .6rem; }
	.cozy-glance-card .cozy-glance-art img { max-height: 80px; }
}
/* main.css memberi .button.stroke abu-abu (!important) - tombol ini ungu. */
.cozy-glance .cozy-glance-cta a.button.stroke.cozy-glance-btn {
	display: inline-block;
	border: .3rem solid #46305e;
	color: #46305e !important;
	background: transparent !important;
	padding: 0 2.6rem;
}
.cozy-glance .cozy-glance-cta a.button.stroke.cozy-glance-btn:hover,
.cozy-glance .cozy-glance-cta a.button.stroke.cozy-glance-btn:focus {
	background: #46305e !important;
	color: #ffffff !important;
}
.cozy-glance-card .cozy-facts th { width: 50%; font-size: 1.4rem; }
.cozy-glance-card .cozy-facts td { font-size: 1.45rem; }
.cozy-glance-card .cozy-facts th .cg-icon { margin-right: 4px; }

/* ===================================================================
 * COZY MUSIC - pemutar musik latar opt-in (#cozy-music, footer.php).
 * Dipulihkan 2026-09-30. Kiri-bawah karena #go-top di kanan-bawah
 * (desktop 60px @30px, HP 44px @12px). z-index 500 = di bawah #header
 * (501, termasuk menu HP) dan lity (9990): menu & trailer selalu
 * menutupinya. Di beranda JS memberi .cm-yield selama widget bertumpuk
 * dengan tombol hero (Register / Watch Trailer / tautan di bawahnya).
 * =================================================================== */
.cm {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 500;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	transition: opacity .2s ease, visibility .2s;
}
.cm[hidden] { display: none; } /* .cm{display:flex} mengalahkan [hidden] bawaan browser */
.cm.cm-yield { opacity: 0; visibility: hidden; }

/* Netralkan gaya global button di main.css (tinggi 5.4rem, padding 3rem, abu-abu, outline 0). */
.cm .cm-toggle,
.cm .cm-next {
	position: relative;
	display: block;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: #fff;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}
.cm .cm-toggle:focus-visible,
.cm .cm-next:focus-visible,
.cm .cm-vol:focus-visible {
	outline: 3px solid var(--cg-gold);
	outline-offset: 2px;
}

/* Desktop: sprite berdiri di atas "panggung" elips berbingkai emas. */
.cm .cm-toggle { width: 68px; height: 108px; border-radius: 12px; }
.cm .cm-toggle:hover,
.cm .cm-toggle:focus { background-color: transparent; }
.cm-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; }
.cm-stage::before {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 0;
	height: 22px;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 40%, #4a3568, #1b1526 70%);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 214, 120, .6);
	transition: box-shadow .3s ease;
}
.cm-sprite {
	position: absolute;
	left: 50%;
	bottom: 8px;
	transform: translateX(-50%);
	max-width: none; /* img{max-width:100%} di base.css */
	image-rendering: pixelated;
	pointer-events: none;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}
/* Lencana play/pause: ikon SVG, bukan glyph (iOS mengubah U+25B6 jadi emoji). */
.cm .cm-toggle::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cg-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1.5v7l5.5-3.5z' fill='%232b2140'/%3E%3C/svg%3E") center / 10px no-repeat;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.cm.is-playing .cm-toggle::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 1.5h2v7h-2zM5.5 1.5h2v7h-2z' fill='%232b2140'/%3E%3C/svg%3E");
}
.cm.is-playing .cm-stage::before {
	box-shadow: 0 0 18px rgba(255, 214, 120, .55), inset 0 0 0 2px rgba(255, 214, 120, .9);
}
/* Pemain menyalakan musik tapi browser menahan play(): ajak tekan lagi. */
.cm.is-blocked .cm-toggle::after { animation: cm-pulse 1.4s ease-in-out infinite; }
@keyframes cm-pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 214, 120, .35); } }
.cm.is-error .cm-toggle { opacity: .55; }

/* Panel judul / Next / volume: hanya saat main, tertahan, galat, atau disorot. */
.cm-panel {
	display: none;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	padding: 6px 10px 6px 14px;
	border-radius: 999px;
	background: rgba(27, 21, 38, .92);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 214, 120, .25);
	color: #f3ecff;
	font: 1.3rem/1.2 "montserrat-semibold", sans-serif;
	white-space: nowrap;
}
.cm.is-playing .cm-panel,
.cm.is-blocked .cm-panel,
.cm.is-error .cm-panel,
.cm:hover .cm-panel,
.cm:focus-within .cm-panel { display: flex; }
.cm-title { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; }
.cm-title::before { content: "\266A"; margin-right: 6px; color: var(--cg-gold); }
.cm .cm-next {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	background: rgba(255, 255, 255, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 10'%3E%3Cpath d='M1 1.5v7L5 5zM5 1.5v7L9 5zM9 1.5h1.3v7H9z' fill='%23fff'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.cm .cm-next:hover,
.cm .cm-next:focus { background-color: rgba(255, 214, 120, .3); }
.cm .cm-vol {
	width: 76px;
	height: 16px;
	margin: 0;
	padding: 0;
	accent-color: var(--cg-gold);
	cursor: pointer;
}

/* HP: tombol bulat 48px berisi potret sprite (kepala & badan, ukuran asli =
   piksel tetap tajam). Judul & volume disembunyikan; Next hanya saat main. */
@media only screen and (max-width: 768px) {
	.cm { left: 12px; bottom: 12px; align-items: center; gap: 6px; }
	.cm .cm-toggle { width: 48px; height: 48px; border-radius: 50%; }
	.cm-stage {
		overflow: hidden;
		border-radius: 50%;
		background: radial-gradient(circle at 50% 35%, #4a3568, #1b1526 75%);
		box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 214, 120, .6);
	}
	.cm-stage::before { display: none; }
	.cm-sprite { top: 4px; bottom: auto; }
	.cm .cm-toggle::after { width: 18px; height: 18px; right: -3px; bottom: -3px; background-size: 8px; }
	.cm .cm-panel,
	.cm:hover .cm-panel,
	.cm:focus-within .cm-panel,
	.cm.is-blocked .cm-panel,
	.cm.is-error .cm-panel { display: none; }
	.cm.is-playing .cm-panel { display: flex; margin: 0; padding: 0; background: none; box-shadow: none; }
	.cm-title,
	.cm .cm-vol { display: none; }
	.cm .cm-next {
		width: 40px;
		height: 40px;
		background-color: rgba(27, 21, 38, .88);
		box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
	}
	/* Baris terakhir footer tidak tertutup widget (kiri) & #go-top (kanan). */
	footer { padding-bottom: 8rem; }
}
/* Layar sentuh: iOS mengabaikan audio.volume, jadi slider tidak berguna. */
@media (hover: none) {
	.cm .cm-vol { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.cm,
	.cm-stage::before { transition: none; }
	.cm.is-blocked .cm-toggle::after { animation: none; box-shadow: 0 0 0 4px rgba(255, 214, 120, .45); }
}

/* ===================================================================
 * BANNER HALAMAN BERSAMA (main/pagehead.php, 2026-09-30)
 * =================================================================== */
.cg-pagehead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
	margin: 0 0 1.8rem;
	padding: 1.8rem 2.4rem;
	border-radius: 14px;
	background: linear-gradient(135deg, #fdf6e6 0%, #f1e3c2 100%);
	border: 1px solid #e8d4a2;
	text-align: left;
}
.cg-pagehead h2 {
	margin: 0;
	font-family: "montserrat-extrabold", sans-serif;
	font-size: 2.8rem;
	line-height: 1.2;
	color: #46305e;
	text-transform: none;
	letter-spacing: 0;
}
.cg-pagehead p { margin: .4rem 0 0; font-size: 1.55rem; color: #5b4a2e; }
.cg-pagehead-art {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-width: 96px;
	min-height: 64px;
	line-height: 0;
	background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 70%);
}
.cg-pagehead-art img { max-height: 80px; width: auto; }
/* judul bawaan template yang digantikan banner */
.cg-pagehead.cg-ph-hide ~ h2:first-of-type { display: none; }
@media only screen and (max-width: 768px) {
	.cg-pagehead { padding: 1.4rem 1.6rem; gap: 1rem; }
	.cg-pagehead h2 { font-size: 22px; }
	.cg-pagehead p { font-size: 14px; }
	.cg-pagehead-art { min-width: 64px; }
	.cg-pagehead-art img { max-height: 60px; }
}
/* parade kecil di atas form login/daftar/reset (dekorasi saja) */
.cozy-parade.cozy-parade-sm { height: 52px; margin: 0 0 1rem; }

/* --- perbaikan QA 2026-09-30 --- */
/* Akar #cozy-music melebar saat panel tampil; hanya tombol & panel yang
   menerima klik, sisanya tembus ke konten di belakangnya. */
.cm { pointer-events: none; }
.cm .cm-toggle, .cm .cm-panel { pointer-events: auto; }
/* main.css memusatkan '#home' di <=900px - di halaman dalam itu ikut
   memusatkan paragraf panjang (ToS, form daftar). Teks rata kiri. */
@media only screen and (max-width: 900px) {
	#home > .container.cozy-cp { text-align: left; }
}
/* Subjudul bawaan template (h3) di bawah banner: gaya kalimat, bukan kapital. */
.cg-pagehead.cg-ph-hide ~ h3:first-of-type {
	margin: 0 0 1.4rem;
	font-family: "muli-regular", sans-serif;
	font-size: 1.6rem;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: #625a73;
}