/*
 * F31 — Yerel servis sayfaları ve Son Depremler kutusu.
 *
 * Tema-bağımsız: renkler yazı renginden (currentColor) ve temanın vurgu
 * renginden (theme.json `accent`; Akış'ta `signal`) türetilir. Böylece açık ve
 * koyu temalarda (Thema koyu, Prime/Apex açık+koyu, Akış) ayrıca kural gerekmez.
 * Deprem büyüklük renkleri anlamsaldır (tema vurgusundan bağımsız).
 */
.pgsp {
	/* Core özel sayfa kabuğunda (SitePages) temanın --pgc-accent jetonu önce gelir. */
	--pgsp-accent: var(--pgc-accent, var(--wp--preset--color--accent, var(--wp--preset--color--signal, #c62828)));
	--pgsp-radius: var(--pgc-radius, 14px);
	--pgsp-line: rgba(127, 127, 127, 0.24);
	--pgsp-soft: rgba(127, 127, 127, 0.07);
	--pgsp-muted: inherit;
	--pgsp-accent-soft: rgba(127, 127, 127, 0.1);
	--pgsp-accent-text: var(--pgsp-accent);
	margin: 0 0 2em;
	font-variant-numeric: tabular-nums;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.pgsp {
		--pgsp-line: color-mix(in srgb, currentColor 14%, transparent);
		--pgsp-soft: color-mix(in srgb, currentColor 5%, transparent);
		--pgsp-muted: color-mix(in srgb, currentColor 64%, transparent);
		--pgsp-accent-soft: color-mix(in srgb, var(--pgsp-accent) 11%, transparent);
		/* Vurgulu küçük metin, vurgunun açık tonu üstünde: metin rengine %25 yaklaşır
		   (0.154 taraması: yalın vurgu 4,0–4,35:1 idi; şimdi iki kipte ≥ 5:1). */
		--pgsp-accent-text: color-mix(in srgb, var(--pgsp-accent) 75%, currentColor);
	}
}

.pgsp p {
	margin: 0;
}

.pgsp__eyebrow {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pgsp-muted);
	margin-bottom: 0.9em !important;
}

.pgsp__meta,
.pgsp__note,
.pgsp__stale {
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--pgsp-muted);
	margin-top: 1em !important;
}

.pgsp__note {
	padding: 1em 1.2em;
	border: 1px dashed var(--pgsp-line);
	border-radius: var(--pgsp-radius);
	background: var(--pgsp-soft);
	color: inherit;
}

.pgsp__stale {
	padding: 0.7em 1em;
	border-radius: 10px;
	background: var(--pgsp-accent-soft);
	color: inherit;
}

/*
 * Tema içerik alanı listelere ve başlıklara girinti/boşluk verir
 * (`.entry-content ol { padding-left }` vb.); kutuların kendi ızgarası var.
 */
.pgsp .pgsp-times,
.pgsp .pgsp-quakes {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.pgsp .pgsp-times > li,
.pgsp .pgsp-quakes > li {
	margin: 0 !important;
}

.pgsp .pgsp-quakes > li {
	padding: 0.75em 1em !important;
}

.pgsp .pgsp-quakes__title {
	margin: 0 !important;
	line-height: 1.2;
}

/* ---------------------------------------------------------------- namaz */
/*
 * Namaz Vakitleri (bento düzeni, 0.169). Üst kart günün saatine göre renk değiştirir
 * (gökyüzü: gece, şafak, sabah, öğle, ikindi altını, alacakaranlık); diğer kutular nötr
 * (currentColor türevi). Zemin renkleri `--pgsp-sky-*` ile temadan değiştirilebilir; üst
 * kartın yazısı her zeminde beyazdır. Kırılımlar pencereye değil kutunun genişliğine bakar
 * (tema içerik kolonu pencereden dardır). JS yoksa sunucunun bastığı ilk durum kalır.
 */
.pgsp-pr {
	--pr-radius: 22px;
	--pr-box-bg: var(--pgsp-soft);
	--pr-box-line: var(--pgsp-line);
	--pr-sun: var(--pgsp-sky-sun, #e39b0f);
	display: grid;
	gap: 24px;
	container: pgpr / inline-size;
}

.pgsp-pr > * {
	min-width: 0;
}

.pgsp-pr [hidden] {
	display: none !important;
}

.pgsp-pr__lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

/* ── Üst kart ── */
.pgsp-hero {
	--sky-a: var(--pgsp-sky-night-a, #0b1030);
	--sky-b: var(--pgsp-sky-night-b, #1a2660);
	--sky-c: var(--pgsp-sky-night-c, #2d3b86);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	/* Simge yerleşimi sayfaya değil kartın kendi genişliğine bakar. */
	container: pghero / inline-size;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: clamp(18px, 4cqw, 26px) clamp(18px, 4cqw, 28px);
	border-radius: var(--pr-radius);
	color: #fff;
	background: linear-gradient(160deg, var(--sky-a) 0%, var(--sky-b) 58%, var(--sky-c) 100%);
	/* Kabartma: üstte ışık, altta koyu kenar, altında kalınlık + yere düşen gölge. */
	box-shadow:
		inset 0 1.5px 0 rgba(255, 255, 255, 0.38),
		inset 0 -5px 0 rgba(0, 0, 0, 0.22),
		inset 0 0 0 1px rgba(255, 255, 255, 0.08),
		0 5px 0 var(--sky-a),
		0 20px 28px -14px rgba(10, 18, 60, 0.6);
	margin-bottom: 5px;
}

/* Kabartmalı vakit simgesi (cam küre) */
.pgsp-hero__badge {
	position: absolute;
	top: 50%;
	right: clamp(18px, 5cqw, 36px);
	display: grid;
	place-items: center;
	width: clamp(84px, 16cqw, 116px);
	aspect-ratio: 1;
	border-radius: 50%;
	transform: translateY(-50%);
	background:
		radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.16) 42%, rgba(255, 255, 255, 0.04) 68%),
		linear-gradient(160deg, rgba(255, 255, 255, 0.26), rgba(0, 0, 0, 0.22));
	box-shadow:
		inset 0 2px 1px rgba(255, 255, 255, 0.65),
		inset 0 -8px 14px rgba(0, 0, 0, 0.3),
		0 5px 0 rgba(0, 0, 0, 0.22),
		0 16px 22px -6px rgba(0, 0, 0, 0.5);
}

.pgsp-hero__badge svg {
	width: 52%;
	height: 52%;
	color: #fff;
	stroke-width: 1.8;
	filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.45));
}

/* Geniş kartta ilerleme çubuğu simgenin altına girmez. */
@container pghero (min-width: 560px) {
	.pgsp-hero .pgsp-pr__bar {
		margin-right: calc(clamp(84px, 16cqw, 116px) + 28px);
	}
}

@container pghero (max-width: 559px) {
	.pgsp-hero__badge {
		top: 16px;
		right: 16px;
		width: 64px;
		transform: none;
	}
}

.pgsp-hero[data-sky="dawn"] {
	--sky-a: var(--pgsp-sky-dawn-a, #2a2a6b);
	--sky-b: var(--pgsp-sky-dawn-b, #6f3d86);
	--sky-c: var(--pgsp-sky-dawn-c, #a74f38);
}

.pgsp-hero[data-sky="morning"] {
	--sky-a: var(--pgsp-sky-morning-a, #17408a);
	--sky-b: var(--pgsp-sky-morning-b, #1f62b5);
	--sky-c: var(--pgsp-sky-morning-c, #2b72c2);
}

.pgsp-hero[data-sky="noon"] {
	--sky-a: var(--pgsp-sky-noon-a, #0d4a8c);
	--sky-b: var(--pgsp-sky-noon-b, #1566b3);
	--sky-c: var(--pgsp-sky-noon-c, #2073bf);
}

.pgsp-hero[data-sky="golden"] {
	--sky-a: var(--pgsp-sky-golden-a, #5e330c);
	--sky-b: var(--pgsp-sky-golden-b, #9a5412);
	--sky-c: var(--pgsp-sky-golden-c, #ab5f15);
}

.pgsp-hero[data-sky="dusk"] {
	--sky-a: var(--pgsp-sky-dusk-a, #2b1850);
	--sky-b: var(--pgsp-sky-dusk-b, #66306c);
	--sky-c: var(--pgsp-sky-dusk-c, #a8483b);
}

.pgsp-hero::before,
.pgsp-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.pgsp-hero::before {
	width: 340px;
	height: 340px;
	right: -90px;
	top: -150px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 68%);
}

.pgsp-hero::after {
	width: 260px;
	height: 260px;
	left: -80px;
	bottom: -130px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 70%);
}

.pgsp-hero__label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
}

.pgsp-hero__main {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1em 0.5em;
	line-height: 1;
}

.pgsp-hero__name {
	font-size: clamp(1.6rem, 6cqw, 2.25rem);
	font-weight: 600;
}

.pgsp-hero__time {
	font-size: clamp(3.2rem, 11cqw, 4.8rem);
	font-weight: 300;
	letter-spacing: -0.04em;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18), 0 2px 0 rgba(0, 0, 0, 0.14), 0 3px 0 rgba(0, 0, 0, 0.1), 0 10px 22px rgba(0, 0, 0, 0.35);
}

.pgsp-hero__countdown {
	font-size: 1.05rem;
	font-weight: 600;
	min-height: 1.5em;
}

.pgsp-hero__countdown:empty {
	display: none;
}

.pgsp-pr__bar {
	display: block;
	height: 8px;
	border-radius: 99px;
	background: rgba(0, 0, 0, 0.22);
	box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2);
	overflow: hidden;
}

.pgsp-pr__bar > i {
	display: block;
	height: 100%;
	width: calc(var(--p, 0) * 100%);
	border-radius: inherit;
	background: linear-gradient(#fff, #d5dcec);
	box-shadow: inset 0 1px 0 #fff, 0 0 8px rgba(255, 255, 255, 0.55);
	transition: width 0.6s ease;
}

.pgsp-hero__date {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.88);
}

/* ── Kutular ── */
.pgsp-pr__box,
.pgsp-times {
	border: 1px solid var(--pr-box-line);
	border-radius: var(--pr-radius);
	background: var(--pr-box-bg);
}

.pgsp-pr__box {
	padding: 20px 22px;
}

.pgsp .pgsp-pr__cap {
	margin: 0 0 14px !important;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pgsp-muted);
}

/* Gün yayı */
.pgsp-pr__box--arc {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), var(--pr-box-bg);
	box-shadow:
		inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
		inset 0 -5px 0 rgba(0, 0, 0, 0.06),
		0 5px 0 var(--pr-box-line),
		0 20px 26px -16px rgba(20, 24, 40, 0.38);
	margin-bottom: 5px;
}

.pgsp-pr__arc {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin: 0 auto;
	overflow: visible;
}

.pgsp-pr__horizon {
	stroke: var(--pr-box-line);
	stroke-width: 1.5;
}

.pgsp-pr__track,
.pgsp-pr__done {
	fill: none;
	stroke-linecap: round;
	stroke-width: 5;
}

.pgsp-pr__track {
	stroke: var(--pr-box-line);
	stroke-dasharray: 2 8;
}

.pgsp-pr__done {
	stroke: var(--pr-sun);
	filter: drop-shadow(0 3px 2px rgba(120, 70, 0, 0.35));
}

/* Güneş: ışığı sol üstten alan küre + yere düşen gölge. */
.pgsp-pr__sun {
	filter: drop-shadow(0 4px 4px rgba(120, 70, 0, 0.45));
}

.pgsp-pr__sun .pgsp-pr__halo {
	fill: var(--pr-sun);
	opacity: 0.25;
}

.pgsp-pr__sun-hi {
	stop-color: #fff6d6;
}

.pgsp-pr__sun-mid {
	stop-color: var(--pr-sun);
}

.pgsp-pr__sun-lo {
	stop-color: #b26a00;
}

/* Yay altı simgeleri: kabartmalı küçük düğmeler */
.pgsp-pr__ends .pgsp-time__icon {
	display: block;
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	margin: 0 auto 6px;
	padding: 8px;
	border-radius: 50%;
	color: #8a5200;
	background: radial-gradient(circle at 32% 26%, #fff, #ffe9b8 55%, #f6c35a);
	box-shadow: inset 0 1px 0 #fff, inset 0 -3px 4px rgba(150, 90, 0, 0.25), 0 3px 0 #d9a23a, 0 8px 10px -4px rgba(120, 70, 0, 0.45);
}

.pgsp-pr__ends {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: space-between;
	gap: 8px;
	margin-top: 4px !important;
	text-align: center;
}

.pgsp-pr__ends small,
.pgsp-pr__tm small {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--pgsp-muted);
}

.pgsp-pr__ends strong {
	font-size: 1.05rem;
	font-weight: 800;
	white-space: nowrap;
}

/*
 * Altı vakit: tek kutu, ince çizgiyle bölünmüş altı hücre (altı ayrı kart sayfayı
 * kalabalıklaştırıyordu).
 */
.pgsp-times {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	overflow: hidden;
}

.pgsp .pgsp-times > li {
	border-left: 1px solid var(--pr-box-line);
}

.pgsp .pgsp-times > li:nth-child(3n + 1) {
	border-left: 0;
}

.pgsp .pgsp-times > li:nth-child(n + 4) {
	border-top: 1px solid var(--pr-box-line);
}

@container pgpr (min-width: 760px) {
	.pgsp-times {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.pgsp .pgsp-times > li:nth-child(n + 2) {
		border-top: 0;
		border-left: 1px solid var(--pr-box-line);
	}

	.pgsp-pr__lead:not(.is-solo) {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	}
}

/* Dar kutu (telefon): altı vakit üst kartın hemen altına gelir, gün yayı onlardan sonra. */
@container pgpr (max-width: 759px) {
	.pgsp-pr__lead {
		display: contents;
	}

	.pgsp-pr > * {
		order: 2;
	}

	.pgsp-pr > .pgsp-times {
		order: 0;
	}

	.pgsp-pr__box--arc {
		order: 1;
	}
}

.pgsp-time {
	position: relative;
	display: grid;
	gap: 0.3em;
	justify-items: center;
	margin: 0;
	padding: 18px 8px;
	text-align: center;
}

.pgsp-time__icon {
	width: 22px;
	height: 22px;
	color: var(--pgsp-muted);
}

.pgsp-time__name {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--pgsp-muted);
}

.pgsp-time__hm {
	font-size: clamp(1.35rem, 5cqw, 1.6rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

/* Sıradaki vakit zemin ve renkle belli olur; ayrı etiket basılmaz (ekran okuyucuda kalır). */
.pgsp-time__tag {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.pgsp-time:not(.is-next) .pgsp-time__tag {
	display: none;
}

.pgsp-time.is-past > * {
	opacity: 0.55;
}

.pgsp-time.is-next {
	background: var(--pgsp-accent-soft);
	box-shadow: inset 0 -3px 0 var(--pgsp-accent);
}

.pgsp-time.is-next .pgsp-time__icon,
.pgsp-time.is-next .pgsp-time__name {
	color: var(--pgsp-accent-text);
}

/* Özet cümle */
.pgsp-pr__sum {
	padding: 0 4px;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--pgsp-muted);
	text-wrap: pretty;
}

/* Alt bölüm: yarın, paylaş, ilgili sayfalar */
.pgsp-pr__lower {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	align-items: stretch;
}

/* Orta genişlik: iki sütun; üçüncü kutu tek başına kalmasın, satırı doldurur. */
@container pgpr (min-width: 560px) {
	.pgsp-pr__lower {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pgsp-pr__lower > :nth-child(odd):last-child {
		grid-column: 1 / -1;
	}
}

@container pgpr (min-width: 900px) {
	.pgsp-pr__lower {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}

	.pgsp-pr__lower > :nth-child(odd):last-child {
		grid-column: auto;
	}
}

.pgsp .pgsp-pr__tm,
.pgsp .pgsp-pr__box--related ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.pgsp-pr__tm {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 12px;
}

.pgsp .pgsp-pr__tm > li {
	display: grid;
	gap: 1px;
	margin: 0 !important;
}

.pgsp-pr__tm span {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--pgsp-muted);
}

.pgsp-pr__tm strong {
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.pgsp-pr__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pgsp-pr__chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--pr-box-line);
	border-radius: 99px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pgsp-pr__chip:hover,
.pgsp-pr__chip:focus-visible {
	border-color: var(--pgsp-accent);
	background: var(--pgsp-accent-soft);
}

.pgsp-pr__chip--story {
	border-color: var(--pgsp-accent);
	color: var(--pgsp-accent-text);
}

.pgsp .pgsp-pr__box--related li {
	margin: 0 !important;
}

.pgsp-pr__box--related li + li {
	border-top: 1px solid var(--pr-box-line);
}

.pgsp-pr__box--related a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 0;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.pgsp-pr__box--related a::after {
	content: "→";
	color: var(--pgsp-accent-text);
}

.pgsp-pr__box--related a:hover {
	color: var(--pgsp-accent-text);
}

/* Sık sorulanlar */
.pgsp-pr__faq {
	padding: 2px 4px;
}

.pgsp-pr__faq details {
	border-top: 1px solid var(--pr-box-line);
}

.pgsp-pr__faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.pgsp-pr__faq summary::-webkit-details-marker {
	display: none;
}

.pgsp-pr__faq summary::after {
	content: "+";
	flex: none;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--pgsp-accent-text);
}

.pgsp-pr__faq details[open] summary::after {
	content: "−";
}

.pgsp .pgsp-pr__faq details p {
	padding: 0 0 14px;
	color: var(--pgsp-muted);
	line-height: 1.55;
}

/* Aylık takvim */
.pgsp-pr__calsec {
	display: grid;
	gap: 14px;
	margin-top: 8px;
}

.pgsp-pr__calhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
}

.pgsp .pgsp-pr__caltitle {
	margin: 0 !important;
	padding: 0 !important;
	font-size: clamp(1.05rem, 3.6cqw, 1.3rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.pgsp-pr__calnav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pgsp-pr__calwrap {
	overflow-x: auto;
	border: 1px solid var(--pr-box-line);
	border-radius: var(--pr-radius);
	background: var(--pr-box-bg);
}

.pgsp-pr__cal {
	width: 100%;
	margin: 0 !important;
	border-collapse: collapse;
	border: 0 !important;
	font-size: 0.92rem;
	font-variant-numeric: tabular-nums;
}

.pgsp-pr__cal th,
.pgsp-pr__cal td {
	padding: 9px 10px;
	border: 0 !important;
	border-top: 1px solid var(--pr-box-line) !important;
	background: transparent !important;
	text-align: center;
	white-space: nowrap;
}

.pgsp-pr__cal thead th {
	border-top: 0 !important;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pgsp-muted);
}

.pgsp-pr__cal tbody th {
	text-align: left;
	font-weight: 600;
}

.pgsp-pr__cal thead th:first-child {
	text-align: left;
}

.pgsp-pr__day {
	display: inline-block;
	min-width: 1.6em;
	font-weight: 800;
}

.pgsp-pr__wd {
	font-weight: 500;
	color: var(--pgsp-muted);
}

.pgsp-pr__cal .pgsp-pr__hijri {
	text-align: left;
	color: var(--pgsp-muted);
}

.pgsp-pr__cal tr.is-past > * {
	opacity: 0.6;
}

.pgsp-pr__cal tbody tr:not(.is-today):hover > * {
	background: var(--pgsp-accent-soft) !important;
	opacity: 1;
}

.pgsp-pr__cal tr.is-today td,
.pgsp-pr__cal tr.is-today th {
	background: var(--pgsp-accent-soft) !important;
	font-weight: 800;
	box-shadow: inset 0 1px 0 var(--pgsp-accent), inset 0 -1px 0 var(--pgsp-accent);
}

.pgsp-pr__cal tr.is-today th:first-child {
	box-shadow: inset 1px 1px 0 var(--pgsp-accent), inset 0 -1px 0 var(--pgsp-accent);
}

.pgsp-pr__cal tr.is-today td:last-child {
	box-shadow: inset -1px 1px 0 var(--pgsp-accent), inset 0 -1px 0 var(--pgsp-accent);
}

.pgsp-pr__wd--s {
	display: none;
}

.pgsp-pr__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Dar kutu: hicri sütunu gizlenir, hücreler sıklaşır. */
@container pgpr (max-width: 640px) {
	.pgsp-pr__cal .pgsp-pr__hijri {
		display: none;
	}

	.pgsp-pr__cal {
		font-size: 0.85rem;
	}

	.pgsp-pr__cal th,
	.pgsp-pr__cal td {
		padding: 8px 3px;
	}

	.pgsp-pr__cal thead th {
		letter-spacing: 0;
		text-transform: none;
	}

	/* Gün adı üç harfe iner (tam ad ekran okuyucuda kalır): tablo kutuya sığar, yatay kaydırma çıkmaz. */
	.pgsp-pr__wd:not(.pgsp-pr__wd--s) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.pgsp-pr__wd--s {
		display: block;
		font-size: 0.72rem;
		line-height: 1.2;
	}

	.pgsp-pr__cal tbody th {
		padding-right: 2px;
	}
}

/* ------------------------------------------------------------ akaryakıt */
/*
 * Akaryakıt Fiyatları (bento düzeni, Namaz Vakitleri kalıbı; kök `.pgsp-pr` kutu, çip, SSS ve
 * ilgili sayfalar stillerini paylaşır). Her yakıt türü kendi renginde kabartmalı kart: benzin
 * yeşil, motorin koyu amber, LPG mavi; renkler `--pgsp-fuel-*` ile temadan değiştirilebilir,
 * kart yazısı her zeminde beyazdır (≥ 4,5:1). Diğer kutular nötr (currentColor türevi).
 * Kırılımlar kutunun genişliğine bakar (`container: pgpr`).
 */
.pgsp .pgsp-fu__eyebrow {
	margin: 0 0 -8px !important;
}

.pgsp .pgsp-fu__tiles,
.pgsp .pgsp-fu__costs {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.pgsp-fu__tiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

.pgsp .pgsp-fu__tile {
	--fu-a: var(--pgsp-fuel-benzin-a, #0a4d2c);
	--fu-b: var(--pgsp-fuel-benzin-b, #0f6a3d);
	--fu-c: var(--pgsp-fuel-benzin-c, #14774a);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	container: pgfut / inline-size;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px 16px;
	margin: 0 0 5px !important;
	padding: 20px 22px;
	border-radius: var(--pr-radius);
	color: #fff;
	background: linear-gradient(160deg, var(--fu-a) 0%, var(--fu-b) 58%, var(--fu-c) 100%);
	box-shadow:
		inset 0 1.5px 0 rgba(255, 255, 255, 0.38),
		inset 0 -5px 0 rgba(0, 0, 0, 0.22),
		inset 0 0 0 1px rgba(255, 255, 255, 0.08),
		0 5px 0 var(--fu-a),
		0 20px 28px -14px rgba(10, 18, 40, 0.55);
}

.pgsp .pgsp-fu__tile--motorin {
	--fu-a: var(--pgsp-fuel-motorin-a, #5a3208);
	--fu-b: var(--pgsp-fuel-motorin-b, #8a4b10);
	--fu-c: var(--pgsp-fuel-motorin-c, #9a5412);
}

.pgsp .pgsp-fu__tile--lpg {
	--fu-a: var(--pgsp-fuel-lpg-a, #0d3f7a);
	--fu-b: var(--pgsp-fuel-lpg-b, #145aa3);
	--fu-c: var(--pgsp-fuel-lpg-c, #1b68b3);
}

.pgsp-fu__tile::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 260px;
	height: 260px;
	right: -80px;
	top: -140px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 68%);
	pointer-events: none;
}

/* Rozet namaz kartındaki cam küredir; burada akışta durur (mutlak konum yok). */
.pgsp-fu__tile .pgsp-fu__badge {
	position: static;
	grid-column: 2;
	grid-row: 1 / span 3;
	width: 64px;
	transform: none;
}

.pgsp-fu__name,
.pgsp-fu__price,
.pgsp-fu__sub {
	grid-column: 1;
}

.pgsp-fu__name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	line-height: 1.2;
}

.pgsp-fu__name strong {
	font-size: 1.15rem;
	font-weight: 700;
}

.pgsp-fu__name span {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
}

.pgsp-fu__price {
	line-height: 1;
	white-space: nowrap;
}

.pgsp-fu__num {
	font-size: clamp(2.6rem, 15cqw, 3.5rem);
	font-weight: 300;
	letter-spacing: -0.04em;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18), 0 2px 0 rgba(0, 0, 0, 0.14), 0 3px 0 rgba(0, 0, 0, 0.1), 0 10px 22px rgba(0, 0, 0, 0.35);
}

.pgsp-fu__price.is-range .pgsp-fu__num {
	font-size: clamp(1.5rem, 8.5cqw, 2.1rem);
	font-weight: 500;
	letter-spacing: -0.02em;
}

.pgsp-fu__price small {
	font-size: 1rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
}

.pgsp-fu__sub {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92);
}

.pgsp-fu__sub span {
	font-weight: 500;
}

@container pgpr (min-width: 760px) {
	.pgsp-fu__tiles {
		grid-template-columns: repeat(var(--fu-n, 3), minmax(0, 1fr));
	}
}

/* Depo hesabı */
.pgsp-fu__tank {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-weight: 600;
}

.pgsp-fu__tank span {
	color: var(--pgsp-muted);
}

.pgsp-fu__tank strong {
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.pgsp-fu__ctl {
	display: grid;
	gap: 12px;
	margin-top: 10px;
}

.pgsp-fu__ctl input[type="range"] {
	width: 100%;
	margin: 0;
	accent-color: var(--pgsp-accent);
}

.pgsp-fu__ctl .pgsp-pr__chip {
	min-height: 36px;
	padding: 0 12px;
	font-size: 0.85rem;
}

.pgsp-fu__ctl .pgsp-pr__chip.is-on {
	border-color: var(--pgsp-accent);
	background: var(--pgsp-accent-soft);
	color: var(--pgsp-accent-text);
}

.pgsp-fu__costs {
	display: grid;
	margin-top: 14px !important;
}

.pgsp .pgsp-fu__cost {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 !important;
	padding: 11px 0 11px 14px;
	border-top: 1px solid var(--pr-box-line);
	box-shadow: inset 4px 0 0 var(--pgsp-fuel-benzin-b, #0f6a3d);
	font-weight: 600;
}

.pgsp .pgsp-fu__cost--motorin {
	box-shadow: inset 4px 0 0 var(--pgsp-fuel-motorin-b, #8a4b10);
}

.pgsp .pgsp-fu__cost--lpg {
	box-shadow: inset 4px 0 0 var(--pgsp-fuel-lpg-b, #145aa3);
}

.pgsp-fu__cost strong {
	font-size: 1.3rem;
	font-weight: 800;
	white-space: nowrap;
}

.pgsp .pgsp-fu__hint,
.pgsp .pgsp-fu__more {
	margin-top: 12px;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--pgsp-muted);
}

.pgsp-fu__more a {
	color: var(--pgsp-accent-text);
	font-weight: 600;
	text-decoration: none;
}

.pgsp-fu__more a::after {
	content: " →";
}

.pgsp-fu__more a:hover {
	text-decoration: underline;
}

/* Gövde: solda hesap + paylaş + ilgili sayfalar, sağda dağıtıcı tablosu */
.pgsp-fu__body,
.pgsp-fu__side {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	align-content: start;
}

@container pgpr (min-width: 900px) {
	.pgsp-fu__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
		align-items: stretch;
	}

	/* Tablo kartı soldaki sütunla aynı hizada biter: satırlar üstte, düğme ve not kartın dibinde. */
	.pgsp-fu__body > .pgsp-fu__dealers {
		display: flex;
		flex-direction: column;
	}

	.pgsp-fu__dealers .pgsp-fu__scroll {
		flex: 1 1 auto;
	}
}

/* Dar kutu: hesap, sonra tablo, sonra paylaş ve ilgili sayfalar. */
@container pgpr (max-width: 899px) {
	.pgsp-fu__side {
		display: contents;
	}

	.pgsp-fu__body > *,
	.pgsp-fu__side > * {
		order: 2;
	}

	.pgsp-fu__side > .pgsp-fu__calc {
		order: 0;
	}

	.pgsp-fu__body > .pgsp-fu__dealers {
		order: 1;
	}
}

/* Dağıtıcı tablosu */
.pgsp-fu__dealers {
	min-width: 0;
}

.pgsp-fu__scroll {
	overflow-x: auto;
	margin: 0 -6px;
}

.pgsp-fu__table {
	width: 100%;
	margin: 0 !important;
	border-collapse: collapse;
	border: 0 !important;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
}

.pgsp-fu__table th,
.pgsp-fu__table td {
	padding: 10px 6px;
	border: 0 !important;
	border-top: 1px solid var(--pr-box-line) !important;
	background: transparent !important;
	text-align: right;
	white-space: nowrap;
}

.pgsp-fu__table thead th {
	border-top: 0 !important;
	padding-top: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pgsp-muted);
}

.pgsp-fu__table thead small {
	font-size: 1em;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.pgsp-fu__table th:first-child {
	text-align: left;
}

.pgsp-fu__table tbody th {
	font-weight: 600;
	white-space: normal;
}

.pgsp-fu__table td.is-none {
	color: var(--pgsp-muted);
}

.pgsp-fu__table td.is-min {
	font-weight: 800;
	color: var(--pgsp-accent-text);
}

.pgsp-fu__table tbody tr:hover > * {
	background: var(--pgsp-accent-soft) !important;
}

.pgsp-fu__table.is-collapsed tr.is-more {
	display: none;
}

.pgsp .pgsp-fu__toggle {
	margin-top: 12px;
}

@container pgpr (max-width: 480px) {
	.pgsp-fu__table {
		font-size: 0.88rem;
	}

	.pgsp-fu__table th,
	.pgsp-fu__table td {
		padding: 9px 4px;
	}

	.pgsp-fu__table thead small {
		display: none;
	}
}

/* ------------------------------------------------------- son depremler */

.pgsp-quakes__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	margin-bottom: 0.6em;
}

.pgsp-quakes__title {
	margin: 0;
	font-size: 1.25rem;
}

.pgsp-badge {
	flex: 0 0 auto;
	padding: 0.25em 0.65em;
	border: 1px solid var(--pgsp-line);
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--pgsp-muted);
}

.pgsp-quakes {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--pgsp-line);
	border-radius: var(--pgsp-radius);
	overflow: hidden;
}

.pgsp-quake {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.85em;
	margin: 0;
	padding: 0.75em 1em;
}

.pgsp-quake + .pgsp-quake {
	border-top: 1px solid var(--pgsp-line);
}

.pgsp-quake.is-local {
	background: var(--pgsp-accent-soft);
}

.pgsp-quake__mag {
	display: grid;
	place-items: center;
	width: 2.75em;
	height: 2.75em;
	border-radius: 10px;
	font-weight: 800;
	font-size: 0.95rem;
	background: var(--pgsp-soft);
	border: 1px solid var(--pgsp-line);
}

.pgsp-quake--m3 .pgsp-quake__mag {
	background: #f6c343;
	border-color: #f6c343;
	color: #1f1a0a;
}

.pgsp-quake--m4 .pgsp-quake__mag {
	background: #ef7d1a;
	border-color: #ef7d1a;
	color: #fff;
}

.pgsp-quake--m5 .pgsp-quake__mag {
	background: #d32f2f;
	border-color: #d32f2f;
	color: #fff;
}

.pgsp-quake__body {
	display: grid;
	gap: 0.15em;
	min-width: 0;
}

.pgsp-quake__loc {
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.pgsp-quake__sub {
	font-size: 0.8rem;
	color: var(--pgsp-muted);
}

.pgsp-quake.is-local .pgsp-quake__sub {
	color: var(--pgsp-accent);
	font-weight: 600;
}

.pgsp-quake__time {
	font-size: 0.8rem;
	white-space: nowrap;
	color: var(--pgsp-muted);
}

/* Dar kenar çubuğunda saat alta iner. */
@container (max-width: 320px) {
	.pgsp-quake {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.pgsp-quake__time {
		grid-column: 2;
	}
}

.pgsp--quakes {
	container-type: inline-size;
}

@media (prefers-reduced-motion: reduce) {
	.pgsp-time,
	.pgsp-pr__bar > i,
	.pgsp-pr__chip {
		transition: none;
	}
}

/* ── Hava durumu (bento düzeni, 0.167) ───────────────────────────────────
 * Üst kart gökyüzü renginde tek vurgudur; diğer kutular tema rengine uyar
 * (currentColor'dan türeyen nötr yüzey). JS yok, görsel dosyası yok.
 * Gökyüzü renkleri anlamsaldır (gündüz/gece/yağış/kapalı), tema `--pgsp-sky-*`
 * ile değiştirebilir; üst kartın yazısı her zeminde beyazdır (≥ 4,5:1).
 */
.pgsp-wx {
	--wx-day-a: var(--pgsp-sky-day-a, #17408a);
	--wx-day-b: var(--pgsp-sky-day-b, #246bc0);
	--wx-day-c: var(--pgsp-sky-day-c, #3f8ad9);
	--wx-night-a: var(--pgsp-sky-night-a, #0b1030);
	--wx-night-b: var(--pgsp-sky-night-b, #1a2660);
	--wx-night-c: var(--pgsp-sky-night-c, #2d3b86);
	--wx-rain-a: var(--pgsp-sky-rain-a, #1f2c43);
	--wx-rain-b: var(--pgsp-sky-rain-b, #36506f);
	--wx-rain-c: var(--pgsp-sky-rain-c, #4d6d8f);
	--wx-over-a: var(--pgsp-sky-over-a, #2f3a4a);
	--wx-over-b: var(--pgsp-sky-over-b, #4a5a70);
	--wx-over-c: var(--pgsp-sky-over-c, #6a7d96);
	--wx-radius: 22px;
	--wx-box-bg: var(--pgsp-soft);
	--wx-box-line: var(--pgsp-line);
	display: grid;
	gap: 14px;
	/* Kırılımlar tarayıcı penceresine değil kutunun kendi genişliğine bakar
	   (temaların içerik kolonu pencereden çok daha dardır). Desteklemeyen
	   tarayıcıda dar (telefon) düzen kalır. */
	container: pgwx / inline-size;
}

.pgsp-wx p {
	margin: 0;
}

.pgsp-wx__lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

/* ── Üst kart ── */
.pgsp-wx__hero {
	--sky-a: var(--wx-day-a);
	--sky-b: var(--wx-day-b);
	--sky-c: var(--wx-day-c);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 16px 20px 14px;
	border-radius: var(--wx-radius);
	color: #fff;
	background: linear-gradient(160deg, var(--sky-a) 0%, var(--sky-b) 58%, var(--sky-c) 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 18px 40px -14px rgba(10, 30, 70, 0.55), 0 4px 10px rgba(10, 30, 70, 0.12);
}

.pgsp-wx__sky--night {
	--sky-a: var(--wx-night-a);
	--sky-b: var(--wx-night-b);
	--sky-c: var(--wx-night-c);
}

.pgsp-wx__sky--rain {
	--sky-a: var(--wx-rain-a);
	--sky-b: var(--wx-rain-b);
	--sky-c: var(--wx-rain-c);
}

.pgsp-wx__sky--overcast {
	--sky-a: var(--wx-over-a);
	--sky-b: var(--wx-over-b);
	--sky-c: var(--wx-over-c);
}

.pgsp-wx__hero::before,
.pgsp-wx__hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.pgsp-wx__hero::before {
	width: 340px;
	height: 340px;
	right: -90px;
	top: -150px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 68%);
}

.pgsp-wx__hero::after {
	width: 260px;
	height: 260px;
	left: -80px;
	bottom: -130px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%);
}

.pgsp-wx__hero {
	container: pgwxh / inline-size;
}

/* Üst satır: dar kartta [sıcaklık | ikon] + altta özet; geniş kartta [sıcaklık | özet | ikon]
   (özet, sıcaklık ile ikon arasındaki boşluğu doldurur). */
.pgsp-wx__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "now icon";
	align-items: center;
	gap: 8px 16px;
}

.pgsp-wx__top.has-sum {
	grid-template-areas: "now icon" "sum sum";
}

.pgsp-wx__now {
	grid-area: now;
}

.pgsp-wx__label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.92);
}

.pgsp-wx__temp {
	margin-top: 2px !important;
	font-size: clamp(3.2rem, 8.5vw, 4.1rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
	text-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.pgsp-wx__deg {
	margin-left: 2px;
	font-size: 0.5em;
	font-weight: 400;
	vertical-align: 0.62em;
}

.pgsp-wx__desc {
	margin-top: 2px !important;
	font-size: 1.12rem;
	font-weight: 600;
}

.pgsp-wx__big {
	grid-area: icon;
	flex: none;
	width: clamp(92px, 19vw, 120px);
	height: auto;
	filter: drop-shadow(0 14px 18px rgba(5, 20, 60, 0.35));
	animation: pgsp-wx-float 6s ease-in-out infinite;
}

@keyframes pgsp-wx-float {
	50% {
		transform: translateY(-7px);
	}
}

.pgsp-wx__summary {
	grid-area: sum;
	margin-top: 4px !important;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.24);
	font-size: 0.98rem;
	line-height: 1.45;
}

.pgsp-wx .pgsp-wx__meta {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.88);
}

@container pgwxh (min-width: 560px) {
	.pgsp-wx__top.has-sum {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "now sum icon";
		column-gap: 22px;
	}

	.pgsp-wx__top.has-sum .pgsp-wx__summary {
		align-self: center;
		margin-top: 0 !important;
		padding: 2px 0 2px 22px;
		border-top: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.28);
		font-size: 1rem;
	}
}

/* ── Ölçü kutuları ── */
.pgsp-wx__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.pgsp-wx__tiles > :last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.pgsp-wx__tile,
.pgsp-wx__box {
	border: 1px solid var(--wx-box-line);
	border-radius: var(--wx-radius);
	background: var(--wx-box-bg);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.pgsp-wx__tile,
	.pgsp-wx__box {
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 18px 32px -24px color-mix(in srgb, currentColor 45%, transparent);
	}
}

.pgsp-wx__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 96px;
	padding: 10px 14px;
}

.pgsp-wx__tic {
	position: absolute;
	top: 12px;
	right: 14px;
	line-height: 0;
}

.pgsp-wx__gauge {
	display: block;
	width: 48px;
	height: 48px;
}

.pgsp-wx__gauge--arc {
	height: 38px;
}

.pgsp-wx__water {
	fill: #3a86d4;
	opacity: 0.85;
}

.pgsp-wx__tile small {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--pgsp-muted);
}

.pgsp-wx__tile strong {
	font-size: clamp(1.05rem, 5.4cqw, 1.55rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.pgsp-wx__tile em {
	font-size: 0.75rem;
	font-style: normal;
	color: var(--pgsp-muted);
}

/* ── Kutular (saatlik, günlük) ── */
.pgsp-wx__box {
	padding: 18px;
}

.pgsp-wx__h {
	margin: 0 0 12px !important;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.pgsp-wx__i {
	display: block;
	filter: drop-shadow(0 0 1px rgba(40, 44, 52, 0.65)) drop-shadow(0 4px 5px rgba(20, 22, 26, 0.22));
}

/* Saatlik eğri (geniş kutuda; dar kutuda ızgara) */
.pgsp-wx__curve {
	display: none;
}

.pgsp-wx__ics,
.pgsp-wx__tm {
	display: grid;
	grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr));
}

.pgsp-wx__ics span {
	display: grid;
	place-items: center;
}

.pgsp-wx__ics .pgsp-wx__i {
	width: 100%;
	max-width: 40px;
	height: 34px;
}

.pgsp-wx__plot {
	position: relative;
	height: 120px;
	margin: 4px 0;
}

.pgsp-wx__plot svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.pgsp-wx__area {
	fill: currentColor;
	opacity: 0.08;
}

.pgsp-wx__line {
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
}

.pgsp-wx__pt {
	position: absolute;
	width: 0;
	height: 0;
}

.pgsp-wx__pt::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 10px;
	height: 10px;
	box-sizing: border-box;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 3px solid currentColor;
	background: var(--pgc-bg, #fff);
}

.pgsp-wx__pt b {
	position: absolute;
	left: 0;
	bottom: 10px;
	transform: translateX(-50%);
	font-size: 0.875rem;
}

.pgsp-wx__tm span {
	text-align: center;
}

.pgsp-wx__tm time,
.pgsp-wx__hgrid time {
	display: block;
	font-size: 0.72rem;
	color: var(--pgsp-muted);
}

.pgsp-wx__tm i,
.pgsp-wx__hgrid i {
	display: inline-block;
	min-height: 17px;
	font-size: 0.69rem;
	font-style: normal;
	font-weight: 600;
	white-space: nowrap;
}

.pgsp-wx__tm i:not(:empty),
.pgsp-wx__hgrid i:not(:empty) {
	padding: 1px 6px;
	border-radius: 99px;
	background: var(--pgsp-line);
}

/* Telefon ızgarası (eğri yerine; kaydırma yok) */
.pgsp-wx__hgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.pgsp-wx__hgrid li {
	margin: 0 !important;
	padding: 8px 2px;
	border-radius: 14px;
	background: var(--pgsp-soft);
	text-align: center;
}

.pgsp-wx__hgrid li:nth-child(n + 9) {
	display: none;
}

.pgsp-wx__hgrid .pgsp-wx__i {
	width: 40px;
	height: 35px;
	margin: 4px auto;
}

.pgsp-wx__hgrid b {
	display: block;
	font-size: 1rem;
}

/* Günlük liste (temel: dar düzen; kutu kendi genişliğine göre geniş satıra geçer) */
.pgsp-wx__days {
	container: pgwxd / inline-size;
}

.pgsp-wx__dh {
	display: none;
	padding-bottom: 6px;
	font-size: 0.72rem;
	white-space: nowrap;
	color: var(--pgsp-muted);
}

.pgsp-wx__dh span:nth-child(n + 4) {
	text-align: right;
}

.pgsp .pgsp-wx__dl {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.pgsp-wx__d {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto auto;
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;
	margin: 0 !important;
	padding: 10px 0;
	border-top: 1px solid var(--wx-box-line);
}

.pgsp-wx__d > :nth-child(2) {
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: center;
}

.pgsp-wx__dn {
	grid-column: 2;
	grid-row: 1;
}

.pgsp-wx__dt {
	grid-column: 2;
	grid-row: 2;
}

.pgsp-wx__hi {
	grid-column: 3;
	grid-row: 1;
}

.pgsp-wx__lo {
	grid-column: 4;
	grid-row: 1;
}

.pgsp-wx__rn {
	grid-column: 3 / 5;
	grid-row: 2;
}

.pgsp-wx__dn {
	font-weight: 700;
}

.pgsp-wx__dn small,
.pgsp-wx__dt small {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--pgsp-muted);
}

.pgsp-wx__d .pgsp-wx__i {
	width: 46px;
	height: 42px;
}

.pgsp-wx__dt {
	min-width: 0;
	font-size: 0.875rem;
}

.pgsp-wx__rn {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	justify-self: end;
	padding: 3px 10px;
	border-radius: 99px;
	background: var(--pgsp-line);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

.pgsp-wx__rn:empty,
.pgsp-wx__rn.is-dry {
	background: transparent;
	padding-right: 0;
}

.pgsp-wx__rn.is-dry {
	font-weight: 400;
	color: var(--pgsp-muted);
}

.pgsp-wx__dr {
	width: 13px;
	height: 13px;
	color: #3a86d4;
}

.pgsp-wx__rn.is-dry .pgsp-wx__dr {
	opacity: 0.3;
}

.pgsp-wx__hi,
.pgsp-wx__lo {
	text-align: right;
	font-size: 1.06rem;
}

.pgsp-wx__hi {
	font-weight: 700;
}

.pgsp-wx__lo {
	color: var(--pgsp-muted);
}

/* ── Genişlik kırılımları (kutu genişliğine göre) ── */
@container pgwx (min-width: 560px) {
	.pgsp-wx__tiles {
		grid-template-columns: repeat(var(--tn, 4), minmax(0, 1fr));
	}

	.pgsp-wx__tiles > :last-child:nth-child(odd) {
		grid-column: auto;
	}

	.pgsp-wx__tile {
		min-height: 100px;
	}

	.pgsp-wx__tile strong {
		font-size: clamp(1.05rem, 3.4cqw, 1.55rem);
	}

	.pgsp-wx__tm i,
	.pgsp-wx__tm i:not(:empty) {
		padding: 0;
		background: none;
		font-size: 0.64rem;
	}

	.pgsp-wx__curve {
		display: block;
	}

	.pgsp-wx__hgrid {
		display: none;
	}
}

@container pgwx (min-width: 760px) {
	.pgsp-wx__lead:not(.is-solo):not(.is-stack) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.pgsp-wx__lead:not(.is-stack) .pgsp-wx__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pgsp-wx__lead:not(.is-stack) .pgsp-wx__tiles > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.pgsp-wx__lead:not(.is-stack) .pgsp-wx__tile {
		min-height: 84px;
	}

	.pgsp-wx__tile strong {
		font-size: clamp(1.05rem, 3.4cqw, 1.55rem);
	}

	.pgsp-wx__tm i:not(:empty) {
		padding: 1px 6px;
		background: var(--pgsp-line);
		font-size: 0.69rem;
	}
}

@container pgwxd (min-width: 480px) {
	.pgsp-wx__dh,
	.pgsp-wx__d {
		display: grid;
		grid-template-columns: minmax(5.5em, 7em) 46px minmax(0, 1fr) 80px 56px 56px;
		align-items: center;
		column-gap: 8px;
		row-gap: 0;
	}

	.no-rain .pgsp-wx__dh,
	.no-rain .pgsp-wx__d {
		grid-template-columns: minmax(5.5em, 7em) 46px minmax(0, 1fr) 56px 56px;
	}

	.pgsp-wx__d > :nth-child(2),
	.pgsp-wx__dn,
	.pgsp-wx__dt,
	.pgsp-wx__hi,
	.pgsp-wx__lo,
	.pgsp-wx__rn {
		grid-column: auto;
		grid-row: auto;
	}
}

/* Tek ölçü kutusu: her genişlikte yatay, alçak şerit. */
.pgsp-wx__tiles.is-one > .pgsp-wx__tile {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "ic label" "ic value" "ic sub";
	align-content: center;
	align-items: center;
	column-gap: 18px;
	min-height: 0;
	padding: 14px 18px;
}

.pgsp-wx__tiles.is-one .pgsp-wx__tic {
	position: static;
	grid-area: ic;
}

.pgsp-wx__tiles.is-one small {
	grid-area: label;
	align-self: end;
}

.pgsp-wx__tiles.is-one strong {
	grid-area: value;
}

.pgsp-wx__tiles.is-one em {
	grid-area: sub;
}

/* Tek başına kalan (tam genişliğe yayılan) ölçü kutusu: yatay, alçak düzen. Yayılma yalnız dar
   (< 560) ve geniş (≥ 760) kutuda olur; arada kutular tek sırada kalır. */
@container pgwx (max-width: 559px) {
	.pgsp-wx__tiles > :last-child:nth-child(odd) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "ic label" "ic value" "ic sub";
		align-content: center;
		align-items: center;
		column-gap: 18px;
		min-height: 0;
		padding: 14px 18px;
	}
}

@container pgwx (min-width: 760px) {
	.pgsp-wx__lead:not(.is-stack) .pgsp-wx__tiles > :last-child:nth-child(odd) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "ic label" "ic value" "ic sub";
		align-content: center;
		align-items: center;
		column-gap: 18px;
		min-height: 0;
		padding: 14px 18px;
	}
}

@container pgwx (max-width: 559px), (min-width: 760px) {
	.pgsp-wx__tiles > :last-child:nth-child(odd) .pgsp-wx__tic {
		position: static;
		grid-area: ic;
	}

	.pgsp-wx__tiles > :last-child:nth-child(odd) small {
		grid-area: label;
		align-self: end;
	}

	.pgsp-wx__tiles > :last-child:nth-child(odd) strong {
		grid-area: value;
	}

	.pgsp-wx__tiles > :last-child:nth-child(odd) em {
		grid-area: sub;
	}
}

/* ── MGM uyarı bandı ──
 * Anlam renkleri düz ve doygun: sarı/turuncu üzerinde siyah yazı (≥ 10:1), kırmızı üzerinde beyaz (≥ 5,9:1).
 * Sol rozet ve çipler uyarının TÜRÜNÜ ikonla gösterir (MGM hadise sözlüğü). Tema `--pgsp-alert-*` ile
 * değiştirebilir; yazı rengi seviyeyle birlikte verilmelidir. */
.pgsp-wx__alert {
	--al-bg: var(--pgsp-alert-yellow-bg, #ffd43b);
	--al-bg2: var(--pgsp-alert-yellow-bg2, #ffc41f);
	--al-line: var(--pgsp-alert-yellow-line, #1a1a1a);
	--al-ink: var(--pgsp-alert-yellow-ink, #111);
	--al-tint: rgba(255, 255, 255, 0.5);
	--al-dark: rgba(0, 0, 0, 0.14);
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 16px 18px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-left: 6px solid var(--al-line);
	border-radius: 18px;
	background: linear-gradient(135deg, var(--al-bg), var(--al-bg2));
	color: var(--al-ink);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 14px 24px -18px rgba(0, 0, 0, 0.5);
}

.pgsp-wx__alert.is-orange {
	--al-bg: var(--pgsp-alert-orange-bg, #ffa94d);
	--al-bg2: var(--pgsp-alert-orange-bg2, #ff922b);
	--al-ink: var(--pgsp-alert-orange-ink, #111);
}

.pgsp-wx__alert.is-red {
	--al-bg: var(--pgsp-alert-red-bg, #e03131);
	--al-bg2: var(--pgsp-alert-red-bg2, #c92a2a);
	--al-line: var(--pgsp-alert-red-line, #5f0d0d);
	--al-ink: var(--pgsp-alert-red-ink, #fff);
	--al-tint: rgba(255, 255, 255, 0.18);
	--al-dark: rgba(0, 0, 0, 0.22);
}

.pgsp-wx__ab {
	flex: none;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 16px;
	background: var(--al-dark);
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.16);
}

.pgsp-wx__abi {
	width: 36px;
	height: 36px;
}

.pgsp-wx__ac {
	flex: 1;
	min-width: 0;
}

.pgsp-wx__ah {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 8px;
}

.pgsp-wx__ah b {
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.2;
}

.pgsp-wx__am {
	padding: 2px 10px;
	border-radius: 99px;
	background: var(--al-dark);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.pgsp .pgsp-wx__ach {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px !important;
	padding: 0 !important;
	list-style: none !important;
}

.pgsp-wx__ach li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 5px 12px 5px 8px;
	border-radius: 99px;
	background: var(--al-tint);
	font-size: 0.88rem;
	font-weight: 800;
}

.pgsp-wx__chi {
	flex: none;
	width: 20px;
	height: 20px;
}

.pgsp-wx__alert p {
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.5;
}

.pgsp-wx__alert .pgsp-wx__ar {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.92rem;
}

.pgsp-wx__ri {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
}

.pgsp-wx__alert .pgsp-wx__alertq {
	margin-top: 10px !important;
	padding: 10px 12px;
	border-radius: 12px;
	border-left: 3px solid rgba(0, 0, 0, 0.35);
	background: var(--al-tint);
	font-style: italic;
}

.pgsp-wx__alert .pgsp-wx__alertsrc {
	margin-top: 8px !important;
	font-size: 0.78rem;
}

.pgsp-wx__alert a {
	color: inherit;
	text-decoration: underline;
}

@container pgwx (max-width: 559px) {
	.pgsp-wx__alert {
		gap: 12px;
		padding: 14px;
	}

	.pgsp-wx__ab {
		width: 46px;
		height: 46px;
		border-radius: 13px;
	}

	.pgsp-wx__abi {
		width: 28px;
		height: 28px;
	}
}

/* ── Alt bölüm: günlük liste + haberler ── */
.pgsp-wx__lower {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

.pgsp .pgsp-wx__nl {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.pgsp-wx__nl li {
	margin: 0 !important;
}

.pgsp-wx__nl li + li {
	border-top: 1px solid var(--wx-box-line);
}

.pgsp-wx__nl a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	color: inherit;
	text-decoration: none;
}

.pgsp-wx__th {
	flex: none;
	display: grid;
	place-items: center;
	width: 64px;
	height: 56px;
	overflow: hidden;
	border-radius: 12px;
	background: linear-gradient(160deg, #2b2f36, #4b515b);
}

.pgsp-wx__th img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pgsp-wx__th .pgsp-wx__i {
	width: 44px;
	height: 38px;
}

.pgsp-wx__nt b {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.pgsp-wx__nt small {
	display: block;
	margin-top: 2px;
	font-size: 0.75rem;
	color: var(--pgsp-muted);
}

.pgsp-wx__nl a:hover b,
.pgsp-wx__nl a:focus-visible b {
	text-decoration: underline;
}

@container pgwx (min-width: 900px) {
	.pgsp-wx__lower.has-pair {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pgsp-wx__big {
		animation: none;
	}
}