/* SuaraThic: tampilan aplikasi penuh */
html, body.sth-app-body { margin: 0; padding: 0; }
body.sth-app-body { background: #0e0e11; min-height: 100vh; }
body.sth-app-body, body.sth-app-body .sth-player, body.sth-app-body .sth-player button {
	font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.sth-app-body.sth-app-light { background: #ffffff; }
body.sth-app-body.sth-has-player { padding-bottom: 0; }

.sth-app {
	--sth-bg: #0e0e11;
	--sth-surface: #18181c;
	--sth-surface-2: #26262c;
	--sth-line: rgba(255,255,255,.09);
	--sth-side-w: 272px;
	--sth-vip: #f6c343;
	--sth-top-offset: 0px;
	display: grid;
	grid-template-columns: var(--sth-side-w) minmax(0, 1fr);
	min-height: 100vh;
	background: var(--sth-bg);
	font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	letter-spacing: .005em;
}
.sth-app.sth--light { --sth-bg: #ffffff; --sth-surface: #f3f3f6; --sth-surface-2: #e7e7ec; --sth-line: rgba(0,0,0,.08); --sth-vip: #f2b705; }
body.admin-bar .sth-app { --sth-top-offset: 32px; }
@media (max-width: 782px) { body.admin-bar .sth-app { --sth-top-offset: 46px; } }

.sth-app h1, .sth-app h2, .sth-app h3 { font-family: inherit; letter-spacing: -.01em; }
.sth-app .sth:not(.sth-player) { background: none; padding: 0; margin: 0; border-radius: 0; }

/* ---------- Sidebar ---------- */
.sth-side {
	position: sticky; top: var(--sth-top-offset); height: calc(100vh - var(--sth-top-offset));
	overflow-y: auto; padding: 22px 18px 120px; border-right: 1px solid var(--sth-line);
	scrollbar-width: none;
}
.sth-side::-webkit-scrollbar { display: none; }
.sth-side__brand { padding: 2px 10px 20px; border-bottom: 1px solid var(--sth-line); margin-bottom: 18px; }
.sth-brandmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--sth-text) !important; }
.sth-brandmark img { height: 34px; width: auto; max-width: 150px; border-radius: 8px; }
.sth-brandmark__dot { width: 34px; height: 34px; border-radius: 50%; background: var(--sth-text); color: var(--sth-bg); display: inline-flex; align-items: center; justify-content: center; }
.sth-brandmark__dot svg { width: 20px; height: 20px; }
.sth-side__sep { height: 1px; background: var(--sth-line); margin: 18px 4px; }
.sth-side__label { font-weight: 700; font-size: 16px; padding: 4px 14px 10px; }
.sth-nav { display: flex; flex-direction: column; gap: 4px; }
.sth-nav__a {
	display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 10px;
	font-weight: 600; font-size: 16px; color: var(--sth-text) !important; transition: background .15s;
}
.sth-nav__a:hover { background: var(--sth-surface); }
.sth-nav__a.is-active { background: var(--sth-surface-2); }
.sth-nav__i { width: 24px; height: 24px; flex: none; }
.sth-nav--ext .sth-nav__a { font-weight: 500; font-size: 15px; }
.sth-acc { padding: 6px 4px; }
.sth-acc__txt { margin: 0 0 12px; color: var(--sth-muted); font-size: 13.5px; padding: 0 10px; }
.sth-acc__btn { width: 100%; }
.sth-acc__who { display: flex; align-items: center; gap: 10px; padding: 6px 10px 12px; min-width: 0; }
.sth-acc__who img { border-radius: 50%; flex: none; }
.sth-acc__who span { display: flex; flex-direction: column; min-width: 0; }
.sth-acc__who strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sth-acc__who small { font-size: 12px; color: var(--sth-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Top bar ---------- */
.sth-app__body { min-width: 0; }
.sth-top {
	position: sticky; top: var(--sth-top-offset); z-index: 30; display: flex; align-items: center; gap: 24px;
	padding: 18px 32px 0; background: var(--sth-bg);
}
.sth-top__brand { display: none; }
.sth-tabs { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.sth-tabs::-webkit-scrollbar { display: none; }
.sth-tab {
	flex: none; padding: 6px 0 12px; font-weight: 700; font-size: 17px; color: var(--sth-muted) !important;
	border-bottom: 3px solid transparent; transition: color .15s;
}
.sth-tab:hover { color: var(--sth-text) !important; }
.sth-tab.is-active { color: var(--sth-text) !important; border-bottom-color: var(--sth-brand); }
.sth-search {
	display: flex; align-items: center; gap: 8px; background: var(--sth-surface); border: 1px solid var(--sth-line);
	border-radius: 999px; padding: 0 14px; height: 40px; width: min(320px, 32vw); margin-bottom: 10px; color: var(--sth-muted);
}
.sth-search .sth-nav__i { width: 18px; height: 18px; }
.sth-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--sth-text); font: inherit; font-size: 14px; padding: 0; height: 100%; box-shadow: none; }
.sth-search input::placeholder { color: var(--sth-muted); }
.sth-search:focus-within { border-color: var(--sth-brand); }
.sth-search--big { width: 100%; max-width: 640px; height: 52px; margin: 8px 0 0; }
.sth-search--big input { font-size: 16px; }

/* ---------- Main ---------- */
.sth-app__main { padding: 10px 32px 150px; min-height: 60vh; }
.sth-view__title { font-size: clamp(26px, 3vw, 34px); font-weight: 800; margin: 14px 0 18px; color: var(--sth-text); }
.sth-app .sth-back { margin-top: 12px; }
.sth-view--show .sth-show { margin-top: 12px; }

.sth-sec { margin: 22px 0 34px; }
.sth-sec__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sth-sec__title { font-size: 24px; font-weight: 800; margin: 0; color: var(--sth-text); }
.sth-sec__nav { display: flex; gap: 6px; }
.sth-sec__nav button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; font-size: 28px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: var(--sth-text); padding: 0 0 3px; }
.sth-sec__nav button:hover { background: var(--sth-surface-2); }
.sth-sec--grid .sth-sec__nav { display: none; }

/* Rail kartu */
.sth-rail2 {
	display: grid; grid-auto-flow: column; grid-auto-columns: 176px; gap: 18px;
	overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none;
}
.sth-rail2::-webkit-scrollbar, .sth-app .sth-rail::-webkit-scrollbar { display: none; }
.sth-app .sth-rail { scrollbar-width: none; scroll-behavior: smooth; }

/* Kartu episode */
.sth-ecard, .sth-scard { display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; }
.sth-ecard__cover, .sth-scard__cover { border: 0; padding: 0; margin-bottom: 12px; border-radius: 8px; cursor: pointer; width: 100%; }
.sth-ecard__cover img, .sth-scard__cover img, .sth-titem__cover img { transition: transform .35s ease, filter .2s; }
.sth-ecard:hover .sth-ecard__cover img, .sth-scard:hover .sth-scard__cover img, .sth-titem:hover .sth-titem__cover img { transform: scale(1.04); filter: brightness(.85); }
.sth-ecard__play {
	position: absolute; right: 8px; bottom: 8px; width: 42px; height: 42px; border-radius: 50%;
	background: var(--sth-brand); color: #111; display: flex; align-items: center; justify-content: center; font-size: 20px;
	opacity: 0; transform: translateY(6px); transition: all .2s; box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.sth-ecard__play .sth-i--pause { display: none; }
.sth-ecard:hover .sth-ecard__play, .sth-titem:hover .sth-ecard__play, .sth-hist__item:hover .sth-ecard__play,
[data-sth-play].is-playing .sth-ecard__play, [data-sth-play]:focus-visible .sth-ecard__play { opacity: 1; transform: none; }
[data-sth-play].is-playing .sth-ecard__play .sth-i--play { display: none; }
[data-sth-play].is-playing .sth-ecard__play .sth-i--pause { display: block; }
[data-sth-play].is-loading .sth-ecard__play { opacity: 1; animation: sth-pulse 1s infinite; }
.sth-titem__cover .sth-ecard__play { width: 34px; height: 34px; font-size: 16px; right: 6px; bottom: 6px; }

.sth-ecard__title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15.5px; color: var(--sth-text) !important; min-width: 0; }
.sth-ecard__title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sth-i--mic { width: 16px; height: 16px; flex: none; opacity: .9; }
.sth-ecard__show { margin-top: 4px; font-size: 14px; color: var(--sth-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sth-ecard__dur { font-size: 13.5px; color: var(--sth-muted); }
.sth-ecard__show:hover, .sth-titem__show:hover { color: var(--sth-text) !important; }

/* Badge VIP */
.sth-vip {
	position: absolute; left: 8px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px;
	padding: 2px 8px; border-radius: 6px; background: var(--sth-vip); color: #1f1600; font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
}
.sth-vip .sth-i--crown { width: 12px; height: 12px; }
.sth-badge .sth-i--crown { width: 11px; height: 11px; margin-right: 1px; }

/* Kartu acara */
.sth-scard__title { font-weight: 700; font-size: 15.5px; line-height: 1.3; color: var(--sth-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sth-scard__meta { margin-top: 3px; font-size: 13.5px; color: var(--sth-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sth-scard .sth-owned { top: 8px; right: 8px; }
.sth-sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 26px 18px; }

/* Top Episode */
.sth-topgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px 26px; }
.sth-titem { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.sth-titem__cover { width: 118px; flex: none; border: 0; padding: 0; cursor: pointer; border-radius: 8px; }
.sth-titem__cover .sth-vip { font-size: 10.5px; padding: 1px 6px; left: 6px; bottom: 6px; }
.sth-titem__txt, .sth-hist__txt { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; flex: 1; }
.sth-titem__title { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; font-size: 16.5px; line-height: 1.4; color: var(--sth-text) !important; }
.sth-titem__title .sth-i--mic { margin-top: 3px; }
.sth-titem__title span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sth-titem__show { font-size: 14.5px; color: var(--sth-muted) !important; }

/* Genre */
.sth-genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.sth-genre {
	position: relative; overflow: hidden; height: 118px; border-radius: 12px; padding: 16px;
	display: flex; flex-direction: column; justify-content: space-between; color: #fff !important;
	background: linear-gradient(135deg, hsl(var(--h) 70% 45%), hsl(calc(var(--h) + 40) 65% 28%));
	transition: transform .15s;
}
.sth-genre:hover { transform: translateY(-2px); }
.sth-genre__name { font-weight: 800; font-size: 19px; position: relative; z-index: 1; }
.sth-genre__count { font-size: 13px; opacity: .85; position: relative; z-index: 1; }
.sth-genre__img { position: absolute; right: -14px; bottom: -8px; width: 84px; height: 84px; object-fit: cover; border-radius: 8px; transform: rotate(22deg); box-shadow: 0 6px 18px rgba(0,0,0,.35); }

/* Riwayat */
.sth-hist { display: flex; flex-direction: column; }
.sth-hist__item { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--sth-line); align-items: flex-start; }
.sth-hist__item:first-child { border-top: 0; }
.sth-hist__item .sth-titem__cover { width: 88px; }
.sth-hist__item .sth-bar { max-width: 280px; margin-top: 2px; }
.sth-hist__item.is-current .sth-titem__title { color: var(--sth-brand) !important; }

.sth-empty--login { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sth-empty--login p { margin: 0; max-width: 46ch; }
.sth-empty a:not(.sth-btn) { color: var(--sth-brand) !important; font-weight: 700; }

/* Tombol suka */
.sth-like {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sth-line); background: transparent;
	display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: var(--sth-muted); transition: all .15s;
}
.sth-like:hover { color: var(--sth-text); background: var(--sth-surface); }
.sth-like.is-liked { color: #ff4d6d; border-color: rgba(255,77,109,.4); }
.sth-like.is-pop { animation: sth-pop .35s; }
@keyframes sth-pop { 50% { transform: scale(1.25); } }

/* Bottom nav (mobile) */
.sth-bnav { display: none; }

/* ---------- Player bar ala Noice (desktop) ---------- */
.sth-player .sth-app-only { display: none !important; }
@media (min-width: 901px) {
	.sth-player--app { left: 0; right: 0; }
	.sth-player--app .sth-app-only { display: inline-flex !important; }
	.sth-player--app .sth-o1, .sth-player--app .sth-o2, .sth-player--app .sth-o3, .sth-player--app .sth-o4, .sth-player--app .sth-o5 { order: 0; }
	.sth-player--app .sth-mini {
		max-width: none; width: 100%; margin: 0; border-radius: 0; border: 0; border-top: 1px solid var(--sth-line);
		height: 80px; padding: 0 28px; gap: 14px; box-shadow: 0 -8px 30px rgba(0,0,0,.25);
		background: color-mix(in srgb, var(--sth-surface) 96%, transparent);
		display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.2fr) minmax(200px, 1fr); align-items: center;
	}
	.sth-player--app .sth-mini__bar { top: -1px; bottom: auto; height: 3px; background: var(--sth-surface-2); }
	.sth-player--app .sth-mini__ctrl { display: flex !important; align-items: center; gap: 8px; }
	.sth-player--app .sth-mini__open { justify-content: center; }
	.sth-player--app .sth-mini__cover { width: 50px; }
	.sth-player--app .sth-mini__txt { max-width: 360px; }
	.sth-player--app .sth-mini__right { display: flex !important; align-items: center; justify-content: flex-end; gap: 10px; }
	.sth-player--app .sth-mini__time { font-size: 13px; color: var(--sth-muted); font-variant-numeric: tabular-nums; margin-left: 8px; white-space: nowrap; }
	.sth-player--app .sth-mini__pp { width: 46px; height: 46px; }
	.sth-player--app .sth-mini__close { order: 9; }
	.sth-player--app .sth-toast { bottom: calc(100% + 12px); }
	.sth-mini__vol { align-items: center; gap: 8px; color: var(--sth-muted); }
	.sth-mini__vol svg { width: 22px; height: 22px; }
	.sth-mini__vol input { -webkit-appearance: none; appearance: none; width: 130px; height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--sth-text) var(--v, 80%), var(--sth-surface-2) var(--v, 80%)); outline: none; }
	.sth-mini__vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sth-text); border: 0; }
	.sth-mini__vol input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--sth-text); border: 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
	.sth-app { grid-template-columns: minmax(0, 1fr); }
	.sth-side { display: none; }
	.sth-top { flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px 0; background: var(--sth-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--sth-line); }
	.sth-top__brand { display: block; width: 100%; }
	.sth-top__brand .sth-brandmark { font-size: 19px; }
	.sth-top__brand .sth-brandmark img, .sth-top__brand .sth-brandmark__dot { height: 28px; width: auto; min-width: 28px; }
	.sth-top .sth-search { display: none; }
	.sth-tab { font-size: 15px; padding-bottom: 10px; }
	.sth-tabs { gap: 18px; }
	.sth-app__main { padding: 4px 16px 170px; }
	.sth-sec { margin: 16px 0 26px; }
	.sth-sec__title { font-size: 20px; }
	.sth-sec__nav { display: none; }
	.sth-rail2 { grid-auto-columns: 140px; gap: 14px; }
	.sth-ecard__title, .sth-scard__title { font-size: 14.5px; }
	.sth-topgrid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.sth-titem__cover { width: 88px; }
	.sth-titem__title { font-size: 15px; }
	.sth-genres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.sth-genre { height: 96px; padding: 12px; }
	.sth-genre__name { font-size: 16px; }
	.sth-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }

	.sth-bnav {
		display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 99980;
		background: color-mix(in srgb, var(--sth-bg) 96%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
		border-top: 1px solid var(--sth-line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
	}
	.sth-bnav .sth-nav__a { flex-direction: column; gap: 3px; padding: 6px 2px; font-size: 11.5px; font-weight: 600; color: var(--sth-muted) !important; border-radius: 8px; background: none !important; }
	.sth-bnav .sth-nav__a.is-active { color: var(--sth-text) !important; }
	.sth-bnav .sth-nav__i { width: 24px; height: 24px; }
	body.sth-app-body .sth-player { bottom: calc(64px + env(safe-area-inset-bottom)); }
	body.sth-app-body .sth-player .sth-mini { margin-bottom: 8px; }
}