/* ==========================================================================
   Portal Islam — "Paperto" editorial theme (loaded after the Varient styles).
   Light by default; body.pt-dark follows the site's dark-mode switch.
   ========================================================================== */
:root {
	--pt-bg: #f3f4f6;
	--pt-surface: #ffffff;
	--pt-surface-2: #f8f9fb;
	--pt-ink: #0e1116;
	--pt-ink-2: #2e3440;
	--pt-muted: #6a7180;
	--pt-line: #e3e6eb;
	--pt-line-2: #eef0f3;
	--pt-accent: #c8102e;
	--pt-accent-ink: #9e0c24;
	--pt-green: #0f7b5c;
	--pt-band-ink: #10131a;
	--pt-serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--pt-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--pt-r: 14px;
	--pt-r-lg: 20px;
	--pt-gut: 16px;
	--pt-shadow: 0 1px 2px rgba(16, 19, 26, .04), 0 8px 24px -12px rgba(16, 19, 26, .12);
}
body.pt-dark {
	--pt-bg: #0c0e12;
	--pt-surface: #151820;
	--pt-surface-2: #1b1f29;
	--pt-ink: #f1f3f6;
	--pt-ink-2: #cfd4dc;
	--pt-muted: #9198a5;
	--pt-line: #262b36;
	--pt-line-2: #1f232d;
	--pt-accent: #ff4d5e;
	--pt-accent-ink: #ff7a86;
	--pt-green: #34c38f;
	--pt-band-ink: #07080b;
	--pt-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
}
@media (min-width: 768px) { :root { --pt-gut: 24px; } }
@media (min-width: 1200px) { :root { --pt-gut: 32px; } }

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body.pt {
	background: var(--pt-bg);
	color: var(--pt-ink);
	font-family: var(--pt-sans);
	font-size: 16px;
	line-height: 1.55;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
.pt *, .pt *::before, .pt *::after { box-sizing: border-box; }
.pt a { color: inherit; }
.pt a:hover, .pt a:focus { color: inherit; text-decoration: none; }
.pt img { max-width: 100%; }
.pt :focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 2px; border-radius: 4px; }
.pt-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding-left: var(--pt-gut); padding-right: var(--pt-gut); }
.pt-sr, .pt-skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pt-skip:focus { position: fixed; z-index: 9999; top: 8px; left: 8px; padding: 10px 14px; background: var(--pt-ink); color: var(--pt-surface); border-radius: 8px; }
.pt-serif { font-family: var(--pt-serif); font-weight: 400; letter-spacing: -.005em; }
.pt-hp { position: absolute; left: -9999px; }
.pt-only-desktop { display: none !important; }
@media (min-width: 1024px) {
	.pt-only-desktop { display: inline-flex !important; }
	.pt-only-mobile { display: none !important; }
}

/* ---------- Buttons, pills ---------- */
.pt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; font: 600 14px/1 var(--pt-sans); cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.pt-btn--dark { background: var(--pt-ink); color: var(--pt-surface) !important; }
.pt-btn--dark:hover { background: var(--pt-ink-2); }
.pt-btn--ghost { background: transparent; border-color: var(--pt-line); color: var(--pt-ink) !important; }
.pt-btn--ghost:hover { border-color: var(--pt-ink); }
.pt-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--pt-line); background: var(--pt-surface); color: var(--pt-ink); cursor: pointer; padding: 0; }
.pt-iconbtn:hover { border-color: var(--pt-ink); }
.pt-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--pt-line); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--pt-ink-2); white-space: nowrap; }
.pt-badge { font-size: 11px; color: var(--pt-muted); white-space: nowrap; }
.pt-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--pt-ink) !important; white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.pt-more:hover { color: var(--pt-accent) !important; }

/* ---------- Header ---------- */
.pt-header { position: relative; z-index: 40; background: var(--pt-surface); }
.pt-header-spacer { display: none; }
/* Fixed top on scroll: paperto.js adds .is-stuck once the header has scrolled away
   and keeps a spacer of the original height so the page never jumps. */
.pt-header.is-stuck { position: fixed; top: 0; left: 0; right: 0; z-index: 990; box-shadow: 0 6px 20px rgba(15, 23, 42, .08); animation: pt-stick-in .22s ease-out; }
.pt-header.is-stuck .pt-mobile-ad,
.pt-header.is-stuck .pt-ticker,
.pt-header.is-stuck .pt-date,
.pt-header.is-stuck .pt-tape,
.pt-header.is-stuck .tradingview-widget-container { display: none !important; }
.pt-header.is-stuck .pt-mast__in { min-height: 56px; }
.pt-header.is-stuck .pt-logo img { height: 34px; }
.pt-header.is-stuck .pt-nav { position: relative; }
.pt-header.is-stuck .pt-nav__in { min-height: 44px; }
@media (min-width: 1024px) {
	.pt-header.is-stuck .pt-mast__in { min-height: 64px; }
	.pt-header.is-stuck .pt-logo img { height: 40px; }
}
@keyframes pt-stick-in { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .pt-header.is-stuck { animation: none; } }
.pt-mobile-ad { display: block; }
.pt-mobile-ad img { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) { .pt-mobile-ad { display: none; } }
.pt-mast { border-bottom: 1px solid var(--pt-line); }
.pt-mast__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 64px; }
.pt-mast__left, .pt-mast__right { display: flex; align-items: center; gap: 10px; }
.pt-mast__right { justify-content: flex-end; }
.pt-logo { display: block; line-height: 0; }
.pt-logo img { height: 40px; width: auto; }
.pt-date { flex-direction: column; gap: 2px; padding-right: 20px; border-right: 1px solid var(--pt-line); }
.pt-date__day { font-size: 13px; font-weight: 600; }
.pt-date__hijri { font-size: 12px; color: var(--pt-muted); }
.pt-mast__right form { margin: 0; }
.pt-profile__btn { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 10px; }
.pt-profile__btn img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.pt-profile__btn span { display: flex; flex-direction: column; line-height: 1.2; }
.pt-profile__btn strong { font-size: 13px; }
.pt-profile__btn small { font-size: 11px; color: var(--pt-muted); }
.pt-profile .dropdown-menu { border-radius: 12px; border: 1px solid var(--pt-line); box-shadow: var(--pt-shadow); padding: 6px; min-width: 200px; }
.pt-profile .dropdown-menu > li > a { padding: 8px 12px; border-radius: 8px; font-size: 14px; }
@media (min-width: 1024px) {
	.pt-mast__in { min-height: 104px; }
	.pt-logo img { height: 60px; }
	.pt-mast__in { gap: 24px; }
	.pt-mast__left { gap: 20px; }
}

/* Category bar */
.pt-nav { position: sticky; top: 0; z-index: 45; background: var(--pt-surface); border-bottom: 1px solid var(--pt-line); }
.pt-nav__in { display: flex; align-items: stretch; min-height: 48px; }
.pt-topics { position: static; align-items: center; padding-right: 18px; margin-right: 10px; border-right: 1px solid var(--pt-line); }
.pt-topics__btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; height: 100%; }
.pt-topics__menu { left: var(--pt-gut); right: var(--pt-gut); top: 100%; margin-top: 0; padding: 24px; border: 1px solid var(--pt-line); border-radius: 0 0 var(--pt-r) var(--pt-r); box-shadow: var(--pt-shadow); background: var(--pt-surface); display: none; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px 24px; max-width: 1256px; margin-left: auto; margin-right: auto; }
.pt-topics.open .pt-topics__menu { display: grid; }
.pt-topics__col { display: flex; flex-direction: column; gap: 6px; }
.pt-topics__col a { font-size: 14px; color: var(--pt-muted); }
.pt-topics__col a:hover { color: var(--pt-ink); }
.pt-topics__col .pt-topics__head { font-family: var(--pt-serif); font-size: 21px; color: var(--pt-ink); margin-bottom: 2px; }
.pt-nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; flex: 1; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.pt-nav__list::-webkit-scrollbar { display: none; }
.pt-nav__list a { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 14px; color: var(--pt-ink-2); white-space: nowrap; transition: background .15s; }
.pt-nav__list a:hover { background: var(--pt-surface-2); color: var(--pt-ink); }
.pt-nav__list a.is-active { background: var(--pt-ink); color: var(--pt-surface); }
.pt-nav__quran { color: var(--pt-green) !important; font-weight: 600; }
@media (max-width: 1023px) {
	.pt-nav__list { padding-right: 24px; }
	.pt-nav__list li:first-child a { margin-left: -4px; }
}

/* Search panel */
.pt-search { border-bottom: 1px solid var(--pt-line); background: var(--pt-surface); padding: 14px 0; }
.pt-search[hidden] { display: none; }
.pt-search__form { display: flex; align-items: center; gap: 10px; padding: 0 6px 0 14px; border: 1px solid var(--pt-line); border-radius: 12px; background: var(--pt-surface-2); }
.pt-search__form svg { color: var(--pt-muted); flex: none; }
.pt-search__form input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; font-size: 16px; color: var(--pt-ink); outline: none; }

/* Breaking ticker */
.pt-ticker { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; height: 42px; padding: 0 0 0 12px; border-radius: 12px; background: var(--pt-surface-2); border: 1px solid var(--pt-line-2); overflow: hidden; }
.pt-ticker__label { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pt-accent); }
.pt-ticker__track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent); }
.pt-ticker__move { display: inline-flex; gap: 32px; white-space: nowrap; animation: pt-marquee var(--pt-tick, 60s) linear infinite; padding-left: 8px; }
.pt-ticker:hover .pt-ticker__move, .pt-ticker:focus-within .pt-ticker__move { animation-play-state: paused; }
.pt-ticker__move a { position: relative; font-size: 13px; color: var(--pt-ink-2); }
.pt-ticker__move a::before { content: ""; position: absolute; left: -18px; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: var(--pt-ink); opacity: .5; }
.pt-ticker__move a:hover { color: var(--pt-ink); text-decoration: underline; }
@keyframes pt-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.pt-ticker__move { animation: none; }
	.pt-ticker__track { overflow-x: auto; }
}

/* Stock tape */
.pt-tape { border-bottom: 1px solid var(--pt-line); }
.pt-tape__in { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 3px 0; }
.pt-tape__label { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(15, 123, 92, .1); color: var(--pt-green); font-size: 12px; font-weight: 700; }
.pt-tape__widget { flex: 1; min-width: 0; min-height: 46px; }
@media (max-width: 599px) { .pt-tape__label span { display: none; } }

/* Ads */
.pt-ad { margin-top: 20px; margin-bottom: 4px; text-align: center; overflow: hidden; }
.pt-ad:empty { display: none; }
.pt-ad > section, .pt-ad .row { margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; }
.pt-ad--header { margin-top: 16px; }

/* ---------- Section headings ---------- */
.pt-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pt-muted); }
.pt-eyebrow__ico { width: 14px; height: 10px; background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 70% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; }
.pt-sec-head { margin-bottom: 20px; }
.pt-sec-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pt-sec-title { margin: 0; font-family: var(--pt-serif); font-weight: 400; font-size: clamp(32px, 4.2vw, 48px); line-height: 1.02; letter-spacing: -.01em; color: var(--pt-ink); }
.pt-sec-title--xl { font-size: clamp(40px, 5.6vw, 64px); }
.pt-sec-sub { margin: 10px 0 0; color: var(--pt-muted); font-size: 15px; max-width: 60ch; }

/* ---------- Cards ---------- */
.pt-card { background: var(--pt-surface); border: 1px solid var(--pt-line); border-radius: var(--pt-r); padding: 18px; }
.pt-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pt-card__title { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--pt-sans); font-size: 16px; font-weight: 700; color: var(--pt-ink); }
.pt-card__title.pt-serif { font-family: var(--pt-serif); font-weight: 400; font-size: 26px; }

.pt-c { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pt-c__media { position: relative; display: block; overflow: hidden; border-radius: 12px; background: var(--pt-line-2); aspect-ratio: 16 / 10; }
.pt-c__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.pt-c:hover .pt-c__media img { transform: scale(1.04); }
.pt-c__play { position: absolute; left: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #0e1116; }
.pt-c__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pt-c__cat { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pt-accent) !important; }
.pt-c__title { margin: 0; font-family: var(--pt-serif); font-weight: 400; font-size: 23px; line-height: 1.15; letter-spacing: -.005em; color: var(--pt-ink); overflow-wrap: anywhere; }
.pt-c__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s; }
.pt-c__title a:hover { background-size: 100% 1px; }
.pt-c__ex { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--pt-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pt-c__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; font-size: 12px; color: var(--pt-muted); }
.pt-c__meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 10px 2px; border-radius: 50%; background: currentColor; opacity: .6; vertical-align: middle; }

/* overlay + lead */
.pt-c--overlay, .pt-c--lead { display: block; overflow: hidden; border-radius: var(--pt-r-lg); background: #1b1f27; color: #fff; isolation: isolate; }
.pt-c--overlay .pt-c__media, .pt-c--lead .pt-c__media { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.pt-c--overlay .pt-c__media::after, .pt-c--lead .pt-c__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 14, 0) 30%, rgba(8, 10, 14, .55) 62%, rgba(8, 10, 14, .9) 100%); }
.pt-c--overlay .pt-c__body, .pt-c--lead .pt-c__body { position: relative; z-index: 1; justify-content: flex-end; height: 100%; padding: 18px; pointer-events: none; }
.pt-c--overlay .pt-c__body a, .pt-c--lead .pt-c__body a { pointer-events: auto; }
.pt-c--overlay .pt-c__title, .pt-c--lead .pt-c__title { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.pt-c--overlay .pt-c__title a::after, .pt-c--lead .pt-c__title a::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.pt-c--overlay .pt-c__meta, .pt-c--lead .pt-c__meta, .pt-c--lead .pt-c__ex { color: rgba(255, 255, 255, .82); }
.pt-c--overlay .pt-c__cat, .pt-c--lead .pt-c__cat { color: #fff !important; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); }
.pt-c--overlay { min-height: 240px; }
.pt-c--overlay .pt-c__title { font-size: 21px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pt-c--lead { min-height: 440px; }
.pt-c--lead .pt-c__body { padding: 22px; gap: 12px; }
.pt-c--lead .pt-c__cat { position: absolute; top: 20px; left: 20px; }
.pt-c--lead .pt-c__title { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.04; max-width: 22ch; }
.pt-c--lead .pt-c__ex { font-size: 15px; max-width: 62ch; -webkit-line-clamp: 2; }
.pt-c--noimg.pt-c--overlay, .pt-c--noimg.pt-c--lead { background: linear-gradient(135deg, #1b1f27, #343a46); }
@media (min-width: 1024px) {
	.pt-c--lead { min-height: 520px; }
	.pt-c--lead .pt-c__body { padding: 32px; }
	.pt-c--lead .pt-c__cat { top: 28px; left: 28px; }
}

/* row */
.pt-c--row { flex-direction: row; align-items: flex-start; gap: 14px; }
.pt-c--row .pt-c__media { flex: none; width: 112px; aspect-ratio: 1 / 1; border-radius: 10px; }
.pt-c--row .pt-c__title { font-size: 19px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pt-c--row .pt-c__ex { -webkit-line-clamp: 2; font-size: 14px; }
@media (min-width: 768px) {
	.pt-c--row .pt-c__media { width: 168px; aspect-ratio: 4 / 3; }
	.pt-c--row .pt-c__title { font-size: 21px; }
}
/* text */
.pt-c--text .pt-c__title { font-size: 24px; }
.pt-c--text .pt-c__ex { -webkit-line-clamp: 3; }
/* mini */
.pt-c--mini { flex-direction: row; gap: 12px; }
.pt-c--mini .pt-c__media { width: 76px; flex: none; aspect-ratio: 1; }
.pt-c--mini .pt-c__title { font-size: 17px; }

/* ---------- Hero ---------- */
.pt-hero { display: grid; gap: 20px; margin-top: 20px; }
.pt-hero__main { display: grid; gap: 16px; min-width: 0; }
.pt-hero__trio { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--pt-gut) * -1); padding: 0 var(--pt-gut); scroll-padding: 0 var(--pt-gut); }
.pt-hero__trio::-webkit-scrollbar { display: none; }
.pt-hero__trio > * { scroll-snap-align: start; }
.pt-hero__side { display: grid; gap: 20px; align-content: start; min-width: 0; }
.pt-hero__texts { display: grid; gap: 18px; }
.pt-hero__texts .pt-c + .pt-c { padding-top: 18px; border-top: 1px solid var(--pt-line); }
.pt-mostread__list { margin: 0; padding: 0; list-style: none; }
.pt-mostread__list li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid var(--pt-line-2); }
.pt-mostread__list li:first-child { border-top: 0; padding-top: 4px; }
.pt-mostread__n { position: relative; font-family: var(--pt-serif); font-style: italic; font-size: 30px; line-height: 1; color: var(--pt-ink); }
.pt-mostread__n::after { content: ""; position: absolute; left: 0; top: 40px; width: 18px; height: 1px; background: var(--pt-muted); }
.pt-mostread__t { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--pt-ink); }
.pt-mostread__t:hover { text-decoration: underline !important; }
@media (min-width: 768px) {
	.pt-hero__trio { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
	.pt-hero__trio .pt-c--overlay { min-height: 280px; }
}
@media (min-width: 1024px) {
	.pt-hero { grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: 24px; margin-top: 24px; }
}

/* ---------- Bands ---------- */
.pt-band { margin-top: 48px; padding: 44px 0; }
.pt-band--sport { background: var(--pt-surface); border-top: 1px solid var(--pt-line); border-bottom: 1px solid var(--pt-line); }
.pt-band--ink { background: var(--pt-band-ink); color: #f1f3f6; }
.pt-band--ink .pt-sec-title, .pt-band--ink .pt-c__title, .pt-band--ink .pt-more { color: #fff !important; }
.pt-band--ink .pt-eyebrow, .pt-band--ink .pt-c__meta, .pt-band--ink .pt-c__ex { color: rgba(241, 243, 246, .66); }
.pt-band--ink .pt-c__media { background: #1d212b; }
@media (min-width: 1024px) { .pt-band { margin-top: 64px; padding: 64px 0; } }

/* ---------- Football zone ---------- */
.pt-sport { display: grid; gap: 20px; }
@media (min-width: 1024px) { .pt-sport { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px; align-items: start; } }
.pt-band--sport .pt-card { background: var(--pt-surface-2); border-color: var(--pt-line-2); }
.pt-livedot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--pt-accent); flex: none; }
.pt-livedot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--pt-accent); opacity: 0; animation: pt-ping 1.8s ease-out infinite; }
@keyframes pt-ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pt-livedot::after { animation: none; } }

.pt-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--pt-line-2); }
.pt-seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: 600 13px/1 var(--pt-sans); color: var(--pt-muted); cursor: pointer; }
.pt-seg button.is-on { background: var(--pt-surface); color: var(--pt-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pt-chips { display: flex; gap: 6px; margin: 0 -18px 14px; padding: 0 18px 2px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.pt-chips::-webkit-scrollbar { display: none; }
.pt-chip { flex: none; height: 34px; padding: 0 14px; border: 1px solid var(--pt-line); border-radius: 999px; background: var(--pt-surface); font: 500 13px/1 var(--pt-sans); color: var(--pt-ink-2); cursor: pointer; scroll-snap-align: start; white-space: nowrap; }
.pt-chip:hover { border-color: var(--pt-ink); }
.pt-chip.is-on { background: var(--pt-ink); border-color: var(--pt-ink); color: var(--pt-surface); }
.pt-fb__body { min-height: 180px; }
.pt-fb__group { margin: 4px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pt-muted); }
.pt-fb__group--live { color: var(--pt-accent); }
.pt-fb__list { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
@media (min-width: 768px) { .pt-fb:not(.pt-fb--compact) .pt-fb__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pt-match { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--pt-surface); border: 1px solid var(--pt-line-2); }
.pt-match__st { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding-right: 10px; border-right: 1px solid var(--pt-line-2); text-align: center; font-size: 12px; font-weight: 700; color: var(--pt-ink-2); line-height: 1.2; }
.pt-match__st small { font-size: 10.5px; font-weight: 500; color: var(--pt-muted); }
.pt-match--in .pt-match__st { color: var(--pt-accent); }
.pt-match__teams { display: grid; gap: 6px; min-width: 0; }
.pt-team { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 14px; }
.pt-team img { width: 22px; height: 22px; object-fit: contain; }
.pt-team__ph { width: 22px; height: 22px; border-radius: 50%; background: var(--pt-line); }
.pt-team__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pt-ink-2); }
.pt-team__s { min-width: 18px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pt-ink); }
.pt-team.is-win .pt-team__n { font-weight: 700; color: var(--pt-ink); }
.pt-match--post .pt-team:not(.is-win) .pt-team__s { color: var(--pt-muted); font-weight: 600; }
.pt-fb__empty { padding: 28px 8px; text-align: center; color: var(--pt-muted); font-size: 14px; }
.pt-fb__foot { margin: 6px 0 0; font-size: 11.5px; color: var(--pt-muted); }
.pt-fb__skel { display: grid; gap: 8px; }
.pt-fb__skel span, .pt-trend__skel { display: block; height: 64px; border-radius: 12px; background: linear-gradient(90deg, var(--pt-line-2), var(--pt-surface-2), var(--pt-line-2)); background-size: 200% 100%; animation: pt-shimmer 1.4s linear infinite; }
@keyframes pt-shimmer { to { background-position: -200% 0; } }
.pt-table-wrap { overflow-x: auto; margin: 0 -4px; }
.pt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pt-table th { padding: 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pt-muted); text-align: center; border-bottom: 1px solid var(--pt-line); }
.pt-table td { padding: 9px 6px; text-align: center; border-bottom: 1px solid var(--pt-line-2); color: var(--pt-ink-2); }
.pt-table th:nth-child(2), .pt-table td:nth-child(2) { text-align: left; }
.pt-table td:first-child { width: 28px; color: var(--pt-muted); font-weight: 600; }
.pt-table td:last-child { font-weight: 700; color: var(--pt-ink); }
.pt-table__team { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 220px; }
.pt-table__team img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.pt-table__team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-table tr.is-top td:first-child { color: var(--pt-green); }
.pt-fb--compact .pt-table .pt-hide-c { display: none; }
@media (max-width: 599px) { .pt-table .pt-hide-m { display: none; } }

/* Trending football */
.pt-trend__list { margin: 0; padding: 0; list-style: none; counter-reset: trend; }
.pt-trend__list li { counter-increment: trend; display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--pt-line-2); }
.pt-trend__list li:first-child { border-top: 0; padding-top: 0; }
.pt-trend__list li::before { content: counter(trend, decimal-leading-zero); font-family: var(--pt-serif); font-style: italic; font-size: 24px; line-height: 1; color: var(--pt-accent); }
.pt-trend__list li.pt-trend__skel { display: block; height: 56px; margin-bottom: 8px; border: 0; padding: 0; }
.pt-trend__list li.pt-trend__skel::before { content: none; }
.pt-trend__t { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--pt-ink); }
.pt-trend__t:hover { text-decoration: underline !important; }
.pt-trend__m { margin: 4px 0 0; font-size: 12px; color: var(--pt-muted); }

/* ---------- Browse by topic ---------- */
.pt-topic { display: grid; gap: 24px; margin-top: 56px; }
.pt-topic__nav { min-width: 0; }
.pt-topic__list { display: flex; gap: 8px; margin-top: 20px; overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--pt-gut) * -1); margin-right: calc(var(--pt-gut) * -1); padding: 0 var(--pt-gut); }
.pt-topic__list::-webkit-scrollbar { display: none; }
.pt-topic__list button { flex: none; height: 38px; padding: 0 16px; border: 1px solid var(--pt-line); border-radius: 999px; background: var(--pt-surface); font: 500 14px/1 var(--pt-sans); color: var(--pt-ink-2); cursor: pointer; white-space: nowrap; }
.pt-topic__list button.is-on { background: var(--pt-ink); border-color: var(--pt-ink); color: var(--pt-surface); }
.pt-topic__panels { min-width: 0; }
.pt-topic__panel[hidden] { display: none; }
.pt-topic__grid { display: grid; gap: 20px; }
.pt-topic__all { margin-top: 24px; }
@media (min-width: 768px) {
	.pt-topic__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
	.pt-topic__grid > .pt-c--card { grid-column: span 3; }
	.pt-topic__grid > .pt-c--row { grid-column: span 2; flex-direction: column; }
	.pt-topic__grid > .pt-c--row .pt-c__media { width: 100%; aspect-ratio: 16 / 10; }
}
@media (min-width: 1024px) {
	.pt-topic { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 48px; margin-top: 80px; }
	.pt-topic__nav { position: sticky; top: calc(var(--pt-stick-h, 0px) + 24px); align-self: start; }
	.pt-topic__list { flex-direction: column; gap: 0; overflow: visible; margin: 36px 0 0; padding: 0; }
	.pt-topic__list button { height: auto; padding: 14px 0; border: 0; border-bottom: 1px solid var(--pt-line); border-radius: 0; background: none !important; font-family: var(--pt-serif); font-size: 28px; line-height: 1.1; text-align: left; color: var(--pt-muted); transition: color .15s, padding .2s; }
	.pt-topic__list button:hover { color: var(--pt-ink); }
	.pt-topic__list button.is-on { color: var(--pt-ink); padding-left: 4px; }
	.pt-topic__list button.is-on::before { content: "// "; }
	.pt-topic__grid > .pt-c--card .pt-c__title { font-size: 28px; }
}

/* ---------- Khutbah (quad) ---------- */
.pt-quad { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--pt-gut) * -1); padding: 0 var(--pt-gut); scroll-padding: 0 var(--pt-gut); }
.pt-quad::-webkit-scrollbar { display: none; }
.pt-quad > * { scroll-snap-align: start; }
@media (min-width: 768px) { .pt-quad { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 24px; } }
@media (min-width: 1024px) { .pt-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Economy ---------- */
.pt-econ { display: grid; gap: 24px; margin-top: 56px; }
.pt-econ__grid { display: grid; gap: 18px; }
.pt-econ__grid > .pt-c--row + .pt-c--row { padding-top: 18px; border-top: 1px solid var(--pt-line); }
.pt-market__widget { min-height: 440px; }
@media (min-width: 768px) {
	.pt-econ__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
	.pt-econ__grid > .pt-c--card { grid-row: span 3; }
	.pt-econ__grid > .pt-c--row .pt-c__media { width: 120px; aspect-ratio: 1; }
	.pt-econ__grid > .pt-c--row .pt-c__title { font-size: 19px; }
}
@media (min-width: 1024px) { .pt-econ { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 32px; margin-top: 80px; } }

/* ---------- Latest + sidebar ---------- */
.pt-latest { display: grid; gap: 32px; margin-top: 56px; margin-bottom: 64px; }
.pt-feed { display: grid; gap: 0; }
.pt-feed > .pt-c { padding: 18px 0; border-top: 1px solid var(--pt-line); }
.pt-feed > .pt-c:first-of-type { border-top: 0; padding-top: 0; }
.pt-feed > .pt-c .pt-c__title { font-size: 22px; }
.pt-spinner { display: none; }
.pt-loadmore { width: 100%; margin-top: 12px; min-height: 48px; }
@media (min-width: 1024px) {
	.pt-latest { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; margin-top: 80px; }
	.pt-feed > .pt-c--row .pt-c__media { width: 220px; aspect-ratio: 16 / 10; }
	.pt-feed > .pt-c .pt-c__title { font-size: 26px; }
	.pt-latest__side { position: relative; }
}
.pt-side-widget { margin-bottom: 20px; }
.pt-side-widget .pt-fb .pt-chips { margin-left: -18px; margin-right: -18px; }

/* Legacy sidebar widgets, restyled */
.pt #sidebar .row { margin: 0; }
.pt #sidebar .col-sm-12 { padding: 0; float: none; width: auto; }
.pt #sidebar .sidebar-widget { margin-bottom: 20px; padding: 18px; background: var(--pt-surface); border: 1px solid var(--pt-line); border-radius: var(--pt-r); }
.pt #sidebar .widget-head { margin: 0 0 12px; padding: 0; background: none; border: 0; height: auto; }
.pt #sidebar .widget-head .title { margin: 0; padding: 0; background: none !important; color: var(--pt-ink); font-family: var(--pt-serif); font-size: 24px; font-weight: 400; text-transform: none; line-height: 1.1; height: auto; float: none; }
.pt #sidebar .widget-head::after, .pt #sidebar .widget-head .title::after { display: none; }
.pt #sidebar .nav-tabs { border: 0; margin-bottom: 10px; display: flex; gap: 4px; padding: 3px; background: var(--pt-line-2); border-radius: 10px; }
.pt #sidebar .nav-tabs > li { float: none; flex: 1; margin: 0; }
.pt #sidebar .nav-tabs > li > a { margin: 0; padding: 7px 4px; border: 0 !important; border-radius: 8px; font-size: 12.5px; font-weight: 600; text-align: center; color: var(--pt-muted); background: none; cursor: pointer; }
.pt #sidebar .nav-tabs > li.active > a { background: var(--pt-surface) !important; color: var(--pt-ink); }
.pt #sidebar .popular-posts, .pt #sidebar .recommended-posts { margin: 0; padding: 0; list-style: none; }
.pt #sidebar .popular-posts li { padding: 12px 0; border-top: 1px solid var(--pt-line-2); margin: 0; }
.pt #sidebar .popular-posts li:first-child { border-top: 0; }
.pt #sidebar .post-item-small .title, .pt #sidebar .post-item-small .title a { font-family: var(--pt-serif); font-size: 18px; font-weight: 400; line-height: 1.2; color: var(--pt-ink); }
.pt #sidebar .post-item-small .post-meta, .pt #sidebar .small-post-meta { font-size: 12px; color: var(--pt-muted); }
.pt #sidebar .post-item-small .left img, .pt #sidebar img.img-cover { border-radius: 8px; }
.pt #sidebar .bn-lg-sidebar { padding: 0 0 20px !important; }
.pt .widget-follow { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.pt .widget-follow li { width: calc(50% - 4px); margin: 0; }
.pt .widget-follow li a { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; color: #fff !important; font-size: 13px; }

/* ---------- Listing pages (category, tag, search, all posts) ---------- */
.pt #wrapper { padding: 24px 0 56px; background: transparent; min-height: 0; }
.pt #wrapper > .container { width: 100%; max-width: 1320px; padding-left: var(--pt-gut); padding-right: var(--pt-gut); }
.pt #wrapper > .container > .row { display: grid; gap: 32px; margin: 0; }
.pt #wrapper > .container > .row::before, .pt #wrapper > .container > .row::after { display: none; }
.pt #wrapper > .container > .row > [class*="col-"] { float: none; width: auto; padding: 0; min-width: 0; }
@media (min-width: 1024px) {
	.pt #wrapper > .container > .row { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 48px; row-gap: 0; }
	.pt #wrapper > .container > .row > .page-breadcrumb, .pt #wrapper > .container > .row > .col-sm-12:not(#content):not(#sidebar) { grid-column: 1 / -1; }
	.pt #wrapper > .container > .row > #content.col-sm-12 { grid-column: 1 / -1; }
}
.pt .page-breadcrumb { margin-bottom: 8px; }
.pt .breadcrumb { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; background: none; font-size: 13px; }
.pt .breadcrumb > li { color: var(--pt-muted); }
.pt .breadcrumb > li a { color: var(--pt-ink-2); }
.pt .breadcrumb > li + li::before { content: "/"; padding: 0 8px; color: var(--pt-line); }
.pt .breadcrumb > .active { color: var(--pt-muted); overflow: hidden; text-overflow: ellipsis; max-width: 60ch; }
.pt .page-title { margin: 6px 0 24px; padding: 0; font-family: var(--pt-serif); font-weight: 400; font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -.01em; color: var(--pt-ink); border: 0; }
.pt .page-title span { color: var(--pt-muted); }
.pt .page-title strong { font-weight: 400; }
.pt #content > .row { display: grid; gap: 28px 24px; margin: 0; }
.pt #content > .row::before, .pt #content > .row::after { display: none; }
.pt #content > .row > * { float: none; width: auto; padding: 0; margin: 0; min-width: 0; }
.pt #content > .row > .col-sm-12:empty, .pt #content > .row > .col-sm-12:not(:has(*)) { display: none; }
@media (min-width: 600px) {
	.pt #content > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pt #content > .row > :not(.pt-c) { grid-column: 1 / -1; }
}
.pt .pt-cat-intro { margin: -12px 0 24px; max-width: 70ch; color: var(--pt-muted); font-size: 16px; }
.pt .pt-subcats { display: flex; gap: 8px; margin: 0 0 28px; overflow-x: auto; scrollbar-width: none; }
.pt .pt-subcats::-webkit-scrollbar { display: none; }
.pt .pt-subcats a { flex: none; height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--pt-line); background: var(--pt-surface); font-size: 13.5px; color: var(--pt-ink-2); }
.pt .pt-subcats a:hover { border-color: var(--pt-ink); color: var(--pt-ink); }
.pt .pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.pt .pagination > li { display: block; }
.pt .pagination > li > a, .pt .pagination > li > span { float: none; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; margin: 0; border: 1px solid var(--pt-line) !important; border-radius: 10px !important; background: var(--pt-surface); color: var(--pt-ink); font-size: 14px; }
.pt .pagination > .active > a, .pt .pagination > .active > span { background: var(--pt-ink) !important; border-color: var(--pt-ink) !important; color: var(--pt-surface) !important; }
.pt .custom-checkbox { font-size: 14px; color: var(--pt-muted); }

/* ---------- Article page ---------- */
.pt .post-content { padding: 0; background: none; }
.pt .post-content .category-label { display: inline-block; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--pt-accent) !important; color: #fff; }
.pt .post-content > .title { margin: 0 0 16px; font-family: var(--pt-serif); font-weight: 400; font-size: clamp(36px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -.01em; color: var(--pt-ink); }
.pt .post-summary { margin: 0 0 20px; }
.pt .post-summary p { margin: 0; font-size: 19px; line-height: 1.55; color: var(--pt-ink-2); }
.pt .post-content .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px 0; margin: 0 0 18px; border-top: 1px solid var(--pt-line); border-bottom: 1px solid var(--pt-line); font-size: 13px; color: var(--pt-muted); }
.pt .post-content .post-meta > * { float: none !important; margin: 0 !important; }
.pt .post-content .post-meta span, .pt .post-content .post-meta a { color: var(--pt-muted); }
.pt .post-author-meta a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--pt-ink) !important; }
.pt .post-author-meta img { width: 36px; height: 36px; border-radius: 50%; }
.pt .post-details-meta-date { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pt .post-comment-pageviews { margin-left: auto !important; display: flex; gap: 14px; }
.pt .post-share { margin: 0 0 22px; }
.pt .post-image, .pt .post-image-inner, .pt .post-content .show-on-page-load { border-radius: var(--pt-r-lg); overflow: hidden; }
.pt .post-image img { width: 100%; height: auto; }
.pt .post-text { font-size: 18px; line-height: 1.8; color: var(--pt-ink-2); overflow-wrap: break-word; }
.pt .post-text p { margin: 0 0 1.15em; }
.pt .post-text h2, .pt .post-text h3, .pt .post-text h4 { margin: 1.6em 0 .5em; font-family: var(--pt-serif); font-weight: 400; line-height: 1.15; color: var(--pt-ink); }
.pt .post-text h2 { font-size: 34px; }
.pt .post-text h3 { font-size: 28px; }
.pt .post-text h4 { font-size: 23px; }
.pt .post-text a { color: var(--pt-accent); text-decoration: underline; text-underline-offset: 2px; }
.pt .post-text img, .pt .post-text iframe, .pt .post-text video { max-width: 100% !important; height: auto; border-radius: 12px; }
.pt .post-text iframe { aspect-ratio: 16 / 9; width: 100%; }
.pt .post-text table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.pt .post-text pre { max-width: 100%; overflow-x: auto; }
.pt .post-text blockquote { margin: 1.6em 0; padding: 22px 24px; border: 0; border-left: 3px solid var(--pt-accent); border-radius: 0 14px 14px 0; background: var(--pt-surface); font-family: var(--pt-serif); font-size: 24px; line-height: 1.35; color: var(--pt-ink); }
.pt .post-text [dir="rtl"], .pt .post-text .arab, .pt .post-text .arabic { font-family: "Amiri", "Scheherazade New", "Traditional Arabic", serif; font-size: 1.45em; line-height: 2; }
.pt .post-content .post-tags, .pt .post-tags { float: none; clear: both; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--pt-line); }
.pt .post-content .tags-title, .pt .tags-title { float: none; margin: 0; line-height: 32px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pt-muted); }
.pt .post-content .post-tags .tag-list, .pt .post-tags .tag-list { display: contents; }
.pt .tag-list { float: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.pt .post-content .post-tags .tag-list li, .pt .tag-list li { float: none; display: block; margin: 0; }
.pt .post-content .post-tags .tag-list li a, .pt .tag-list li a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--pt-line); background: var(--pt-surface); color: var(--pt-ink-2); font-size: 13px; line-height: 1; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.pt .post-content .post-tags .tag-list li a:hover, .pt .tag-list li a:hover { border-color: var(--pt-accent); color: var(--pt-accent) !important; background: var(--pt-surface); }
.pt .post-tags:empty { display: none; }
.pt .post-next-prev { margin: 32px 0 0; padding: 20px 0; border-top: 1px solid var(--pt-line); border-bottom: 1px solid var(--pt-line); }
.pt .post-next-prev .row { margin: 0; display: grid; gap: 16px; }
@media (min-width: 600px) { .pt .post-next-prev .row { grid-template-columns: 1fr 1fr; } }
.pt .post-next-prev .left, .pt .post-next-prev .right { float: none; width: auto; padding: 0; }
.pt .post-next-prev .right { text-align: right; }
.pt .post-next-prev p { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--pt-muted); }
.pt .post-next-prev p.title { margin-top: 6px; font-family: var(--pt-serif); font-size: 21px; line-height: 1.2; text-transform: none; letter-spacing: 0; color: var(--pt-ink); }
.pt .related-posts .title, .pt .section .section-head .title, .pt .comment-section .title { font-family: var(--pt-serif); font-weight: 400; font-size: 30px; text-transform: none; background: none !important; color: var(--pt-ink); padding: 0; }
.pt .section .section-head { border: 0; margin-bottom: 14px; }
.pt .section .section-head::after { display: none; }
.pt .about-author { border-radius: var(--pt-r); border: 1px solid var(--pt-line); background: var(--pt-surface); }
@media (max-width: 767px) { .pt .post-text { font-size: 17px; } .pt .post-comment-pageviews { margin-left: 0 !important; } }

/* ---------- Footer ---------- */
.pt-footer { margin-top: 0; padding: 56px 0 24px; background: var(--pt-band-ink); color: rgba(241, 243, 246, .72); }
.pt-footer a { color: rgba(241, 243, 246, .85); }
.pt-footer a:hover { color: #fff; }
.pt-footer__top { display: grid; gap: 36px; }
.pt-footer__brand img { height: 56px; width: auto; }
.pt-footer__lead { margin: 18px 0 10px; font-family: var(--pt-serif); font-size: 28px; line-height: 1.15; color: #fff; max-width: 22ch; }
.pt-footer__about { font-size: 14px; max-width: 48ch; }
.pt-footer__h { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(241, 243, 246, .5); }
.pt-footer__h--sp { margin-top: 28px; }
.pt-footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14.5px; }
.pt-footer__reads { margin: 0; padding: 0; list-style: none; counter-reset: fr; display: grid; gap: 14px; }
.pt-footer__reads li { counter-increment: fr; display: grid; grid-template-columns: 30px 1fr; gap: 8px; font-family: var(--pt-serif); font-size: 19px; line-height: 1.25; }
.pt-footer__reads li::before { content: counter(fr, decimal-leading-zero); font-style: italic; color: rgba(241, 243, 246, .4); }
.pt-footer__note { font-size: 14px; margin: 0 0 10px; }
.pt-news { position: relative; display: flex; gap: 6px; padding: 5px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.pt-news input[type=email] { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; padding: 0 10px; color: #fff; font-size: 14px; outline: none; }
.pt-news button { height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: #fff; color: #0e1116; font: 600 13px/1 var(--pt-sans); cursor: pointer; }
.pt-news #form_newsletter_response { position: absolute; left: 0; top: 100%; margin-top: 6px; font-size: 13px; }
.pt-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.pt-social li { margin: 0; }
.pt-social li a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff !important; font-size: 15px; }
.pt-social li a:hover { background: rgba(255, 255, 255, .16); }
.pt-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }
.pt-footer__bottom p { margin: 0; }
.pt-footer__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.pt-histats { width: 100%; }
.pt-histats:not(:has(img, canvas, a)) { display: none; }
@media (min-width: 768px) { .pt-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pt-footer { padding-top: 72px; } .pt-footer__top { grid-template-columns: 1.4fr .8fr 1.3fr 1fr; gap: 48px; } }

/* ---------- Legacy bits ---------- */
.pt .scrollup { border-radius: 12px; background: var(--pt-ink); }
.pt .cookies-warning { border-radius: 14px; border: 1px solid var(--pt-line); box-shadow: var(--pt-shadow); background: var(--pt-surface); color: var(--pt-ink-2); max-width: min(420px, calc(100vw - 32px)); left: 16px; bottom: 16px; }
.pt .nav-mobile { z-index: 1100; }
.pt .overlay-bg { z-index: 1090; }
.pt-dark .pt-c--overlay .pt-c__cat, .pt-dark .pt-c--lead .pt-c__cat { background: rgba(0, 0, 0, .35); }
.pt-dark .pt-logo img { filter: none; }
.pt-dark .pt-iconbtn, .pt-dark .pt-chip, .pt-dark .pt-topic__list button, .pt-dark .pt-subcats a { background: var(--pt-surface-2); }
.pt-dark .pt-chip.is-on, .pt-dark .pt-topic__list button.is-on { background: var(--pt-ink); }

/* Grid children never grow to their content's min-width (slick sliders, wide tables, long URLs). */
.pt-hero > *, .pt-sport > *, .pt-topic > *, .pt-econ > *, .pt-latest > *, .pt-econ__grid > *, .pt-topic__grid > *, .pt-quad > *, .pt-footer__top > * { min-width: 0; }
.pt #sidebar, .pt-latest__side { min-width: 0; max-width: 100%; }
.pt #sidebar .sidebar-widget { overflow: hidden; }

/* ---------- Title font: Newsreader (wider and sturdier than a display serif) ---------- */
.pt-serif, .pt-sec-title, .pt-c__title, .pt-card__title.pt-serif, .pt-mostread__n, .pt-trend__list li::before, .pt-topics__col .pt-topics__head,
.pt .page-title, .pt .post-content > .title, .pt .post-text h2, .pt .post-text h3, .pt .post-text h4, .pt .post-text blockquote,
.pt .post-next-prev p.title, .pt #sidebar .widget-head .title, .pt #sidebar .post-item-small .title, .pt #sidebar .post-item-small .title a,
.pt .related-posts .title, .pt .section .section-head .title, .pt .comment-section .title, .pt-footer__lead, .pt-footer__reads li, .pt-topic__list button {
	font-weight: 500;
	font-optical-sizing: auto;
	letter-spacing: -.012em;
}
.pt-sec-title { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; }
.pt-sec-title--xl { font-size: clamp(34px, 4.6vw, 54px); }
.pt-c__title { font-size: 21px; line-height: 1.22; }
.pt-c--lead .pt-c__title { font-size: clamp(28px, 3.8vw, 42px); line-height: 1.1; font-weight: 600; max-width: 24ch; letter-spacing: -.02em; }
.pt-c--overlay .pt-c__title { font-size: 19px; }
.pt-c--row .pt-c__title { font-size: 18px; }
.pt-c--text .pt-c__title { font-size: 22px; }
.pt-c--mini .pt-c__title { font-size: 16px; }
.pt-card__title.pt-serif { font-size: 23px; }
.pt-mostread__n { font-size: 27px; font-style: italic; }
.pt-trend__list li::before { font-size: 21px; }
.pt-feed > .pt-c .pt-c__title { font-size: 20px; }
@media (min-width: 768px) { .pt-c--row .pt-c__title { font-size: 19px; } }
@media (min-width: 1024px) {
	.pt-topic__list button { font-size: 24px; }
	.pt-topic__grid > .pt-c--card .pt-c__title { font-size: 25px; }
	.pt-feed > .pt-c .pt-c__title { font-size: 23px; }
}
.pt .page-title { font-size: clamp(36px, 5vw, 60px); font-weight: 600; letter-spacing: -.02em; }
.pt .post-content > .title { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.pt .post-text h2 { font-size: 30px; }
.pt .post-text h3 { font-size: 25px; }
.pt .post-text h4 { font-size: 21px; }
.pt .post-text blockquote { font-size: 21px; font-style: italic; }
.pt #sidebar .widget-head .title { font-size: 22px; }
.pt #sidebar .post-item-small .title, .pt #sidebar .post-item-small .title a { font-size: 16.5px; }
.pt-footer__lead { font-size: 26px; }
.pt-footer__reads li { font-size: 17px; }
.pt-topics__col .pt-topics__head { font-size: 19px; }

/* Article body in Plus Jakarta Sans: slightly smaller size and roomier line height than a grotesk needs. */
.pt .post-text { font-family: var(--pt-sans); font-size: 17.5px; line-height: 1.85; letter-spacing: -.003em; }
.pt .post-summary p { font-family: var(--pt-sans); font-size: 18px; }
.pt .post-text strong, .pt .post-text b { font-weight: 700; color: var(--pt-ink); }
@media (max-width: 767px) { .pt .post-text { font-size: 16.5px; line-height: 1.8; } }
.pt .post-content .category-label { line-height: 1.4; vertical-align: middle; }
.pt .post-content > p.m-0 { line-height: 1.6; overflow: visible; }
.pt .post-text { letter-spacing: 0; word-spacing: .02em; }

/* Article category label: the legacy rule fixes height at 1.8em; let padding set the size. */
.pt .post-content .category-label { display: inline-flex; align-items: center; height: auto; min-height: 0; margin: 0 0 16px; padding: 7px 12px 6px; border-radius: 999px; font: 700 11px/1 var(--pt-sans); letter-spacing: .1em; text-transform: uppercase; vertical-align: top; max-width: 100%; }
.pt .post-content > p.m-0 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; line-height: 1; }
.pt .post-content > p.m-0 .btn-edit-post { margin: 0 0 16px; float: none !important; }

/* Numbered lists in articles */
.pt .post-text ol, .pt .post-text ul { margin: 0 0 1.2em; padding-left: 1.6em; }
.pt .post-text li { margin: .35em 0; padding-left: .25em; }
.pt .post-text ol > li::marker { font-family: var(--pt-serif); font-weight: 600; color: var(--pt-accent); }
.pt .post-text ul > li::marker { color: var(--pt-accent); }
.pt .post-text li > h2:first-child, .pt .post-text li > h3:first-child, .pt .post-text li > h4:first-child { margin-top: 1.2em; }

/* Sidebar tabs (Postingan Populer): no underline, no extra bottom padding; only the active pill. */
.pt #sidebar .nav-tabs { border-bottom: 0 !important; padding: 3px !important; margin: 0 0 12px !important; height: auto; }
.pt #sidebar .nav-tabs > li { margin-bottom: 0 !important; padding: 0 !important; border: 0 !important; }
.pt #sidebar .nav-tabs > li > a, .pt #sidebar .nav-tabs > li > a:hover, .pt #sidebar .nav-tabs > li > a:focus { padding: 8px 4px !important; margin: 0 !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; line-height: 1.2; }
.pt #sidebar .nav-tabs > li > a::after, .pt #sidebar .nav-tabs > li > a::before, .pt #sidebar .nav-tabs > li::after, .pt #sidebar .nav-tabs::after { display: none !important; content: none !important; }
.pt #sidebar .nav-tabs > li.active > a { box-shadow: 0 1px 2px rgba(0, 0, 0, .08) !important; }
.pt #sidebar .widget-popular-posts .tab-content { padding: 0; margin: 0; }
.pt #sidebar .widget-popular-posts .nav-tabs { float: none; display: flex; width: 100%; }
.pt #sidebar .widget-popular-posts .nav-tabs > li { width: auto; }
.pt #sidebar .widget-popular-posts .nav-tabs > li > a { color: var(--pt-muted); background-color: transparent !important; }
.pt #sidebar .widget-popular-posts .nav-tabs > li.active > a { color: var(--pt-ink); background-color: var(--pt-surface) !important; }
.pt #sidebar .widget-popular-posts .tab-content { float: none; width: 100%; }

/* Related posts */
.pt .section-related-posts { margin-top: 36px; }
.pt .section-related-posts .section-head { margin: 0 0 18px; padding: 0; height: auto; }
.pt .section-related-posts .section-content { float: none; width: auto; }
.pt-related { display: grid; gap: 24px; }
.pt-related > * { min-width: 0; }
.pt-related .pt-c__title { font-size: 19px; }
@media (min-width: 600px) { .pt-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pt-related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Popular tabs: keep labels on one line */
.pt #sidebar .widget-popular-posts .nav-tabs > li > a { white-space: nowrap; font-size: 12px; padding: 8px 6px !important; overflow: hidden; text-overflow: ellipsis; }

/* Previous / next article: two equal cards, labels on one line, titles clamped */
.pt-pn { display: grid; gap: 12px; margin: 32px 0 0; }
.pt-pn__item { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 18px; border: 1px solid var(--pt-line); border-radius: var(--pt-r); background: var(--pt-surface); color: var(--pt-ink) !important; transition: border-color .15s; }
.pt-pn__item:hover { border-color: var(--pt-ink); }
.pt-pn__item--empty { display: none; }
.pt-pn__lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-muted); }
.pt-pn__t { font-family: var(--pt-serif); font-weight: 500; font-size: 17px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 600px) {
	.pt-pn { grid-template-columns: 1fr 1fr; align-items: stretch; }
	.pt-pn__item--empty { display: block; border: 0; background: none; padding: 0; }
	.pt-pn__item--next { text-align: right; align-items: flex-end; }
}

/* Article column: legacy floats would squeeze the new blocks beside them. */
.pt #content .post-content, .pt #content > .section, .pt #content > section, .pt-pn { float: none !important; width: 100% !important; clear: both; }
.pt #content > .section .section-content, .pt #content > .section .section-head { float: none; width: 100%; }
.pt #content::after { content: ""; display: table; clear: both; }
.pt .section-related-posts, .pt .section-related-posts .section-head, .pt .section-related-posts .section-content { float: none !important; width: 100% !important; clear: both; }
.pt .section-related-posts .section-head .title { float: none !important; display: block; margin: 0; }
.pt-pn { margin-bottom: 8px; }

/* About the author: even padding, round avatar, text column beside it */
.pt #content .about-author { display: flex; align-items: flex-start; gap: 18px; width: 100%; margin: 32px 0 0; padding: 22px; border: 1px solid var(--pt-line); border-radius: var(--pt-r); background: var(--pt-surface); }
.pt #content .about-author + * { clear: both; }
.pt #content .about-author-left { display: block; flex: none; width: auto; }
.pt #content .about-author-left .img-author { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--pt-line); background: #fff; }
.pt #content .about-author-right { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.pt #content .about-author-row { float: none; width: auto; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--pt-ink-2); }
.pt #content .about-author-row p { margin: 0; }
.pt #content .about-author-right .author-link { float: none; font-size: 16px; color: var(--pt-ink); }
.pt #content .about-author .profile-buttons { margin-top: 10px; }
.pt #content .about-author .profile-buttons ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pt #content .about-author .profile-buttons li { margin: 0; float: none; }
.pt #content .about-author .profile-buttons li a { display: grid; place-items: center; width: 34px; height: 34px; margin: 0; border-radius: 9px; border: 1px solid var(--pt-line); background: var(--pt-surface-2); color: var(--pt-ink-2); font-size: 13px; }
.pt #content .about-author .profile-buttons li a:hover { border-color: var(--pt-ink); color: var(--pt-ink); }
.pt #content > .col-sm-12 > .row { margin: 0; }
@media (max-width: 479px) {
	.pt #content .about-author { padding: 18px; gap: 14px; }
	.pt #content .about-author-left .img-author { width: 56px; height: 56px; }
}
.pt #content > .col-sm-12, .pt #content > .col-xs-12 { float: none; width: 100%; padding-left: 0; padding-right: 0; }
.pt #content .about-author { margin-bottom: 8px; }
.pt .section-related-posts { margin-top: 40px; }

/* Category bar arrows */
.pt-nav__list { position: relative; scroll-behavior: smooth; }
.pt-nav__list.is-end { -webkit-mask-image: none; mask-image: none; }
.pt-nav__list:not(.is-start).is-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%); mask-image: linear-gradient(90deg, transparent, #000 6%); }
.pt-nav__list:not(.is-start):not(.is-end) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 92%, transparent); }
.pt-nav__arrows { display: flex; align-items: center; gap: 6px; flex: none; padding-left: 10px; margin-left: 4px; border-left: 1px solid var(--pt-line); }
.pt-nav__arrows[hidden] { display: none; }
.pt-nav__arrow { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--pt-line); border-radius: 50%; background: var(--pt-surface); color: var(--pt-ink); cursor: pointer; transition: border-color .15s, opacity .15s; }
.pt-nav__arrow:hover:not(:disabled) { border-color: var(--pt-ink); }
.pt-nav__arrow:disabled { opacity: .35; cursor: default; }
@media (max-width: 1023px) {
	.pt-nav__arrows { padding-left: 8px; gap: 4px; }
	.pt-nav__arrow { width: 30px; height: 30px; }
	.pt-nav__arrow[data-dir="-1"] { display: none; }
	.pt-nav__list { padding-right: 8px; }
}

/* ---------- Rendering cost: skip layout/paint of sections below the first screen ---------- */
.pt-latest, .pt-econ, .pt-band, .pt-footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }