/*
 * Yumurtalık Haber: kenar alan widget'ları (Faz 2-E2). Her sayfada yüklenir (main.css'ten sonra).
 * Kaynak: Figma "Yan Alan · Masaüstü" 38:2, "Yan Alan · Mobil" 38:76, "Hava Durumu" 8:23 / 11:80. Yalnızca DESIGN.md tokenları.
 *
 * İçerik
 *  1. Arama               5. Reklam
 *  2. Köşe Yazarları      6. Hava kartı
 *  3. Son Haberler        7. Bülten kutusu
 *  4. Anket               8. Burç sekmeleri
 *                         9. Özel HTML ("İşte Yumurtalık")
 *
 * Not: main.css `.widget ul` kuralı (sütun, 14 px boşluk) özgüllüğü 0,1,1 olduğu için buradaki liste kuralları
 * `.widget`/sınıf çifti ile yazılır.
 *
 * Hareket: yalnızca main.css tokenları (--ease-out, --dur-1/2/3); `transition: all` yok; hover yalnızca
 * `(hover: hover) and (pointer: fine)` içinde; reduced-motion'da çubuk animasyonu yok, bülten durumu yalnızca opaklık.
 * Dokunma hedefleri: görünüm Figma'dakiyle aynı kalır; etkin alan "gerilmiş bağlantı" (::after) ya da şeffaf girdi ile büyür.
 */

/* ==========================================================================
   1. Arama (çekirdek `search`; işaretleme searchform.php: .search-pill)
   ========================================================================== */

.widget_search .search-pill,
.widget_search .search-pill:focus-within {
	width: 100%;
}

/* ==========================================================================
   2. Köşe Yazarları (`umh97_col_ticker`): Figma 38:3
   ========================================================================== */

.widget .col-ticker {
	gap: 14px;
}

.col-ticker__item {
	position: relative; /* gerilmiş bağlantının kapsayıcısı */
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.col-ticker__item + .col-ticker__item {
	padding-top: 14px;
	border-top: 1px solid var(--c-border);
}

.col-ticker__avatar {
	position: relative;
	z-index: 1; /* gerilmiş yazı bağlantısının üstünde: yazar sayfasına gider */
	display: flex; /* satır kutusu taban çizgisi boşluğu bırakmasın: tam 50×50 */
	flex: none;
	border-radius: 50%;
}

.col-ticker__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.col-ticker__who {
	color: var(--c-muted);
	font: 600 11px/13px var(--f-sans);
}

.col-ticker__post {
	color: var(--c-text);
	font: 700 15px/21px var(--f-serif);
}

.col-ticker__post a {
	padding-block: 2px; /* satır içi: yerleşimi etkilemez, ölçülen hedef ≥ 24 px */
	transition: color var(--dur-1) ease;
}

/* Gerilmiş bağlantı: tüm satır (≥ 50 px) yazıya gider; avatar ayrı hedeftir. */
.col-ticker__post a::after {
	content: "";
	position: absolute;
	inset: -6px 0;
}

@media (hover: hover) and (pointer: fine) {
	.col-ticker__post a:hover {
		color: var(--c-brand);
	}
}

/* ==========================================================================
   3. Son Haberler (`recent-posts` → YH_Widget_Recent_Posts; satır = card-small compact 84×64)
   ========================================================================== */

.widget .news-list {
	gap: 14px;
}

.news-list__item {
	min-width: 0;
}

/*
 * Dokunma hedefleri (card-small compact, Faz 1 işaretlemesi): başlık bağlantısı kart gövdesini kaplar (gerilmiş bağlantı,
 * ::after kapsayıcısı .card__body; h3'ün satır sınırı kırpması etkilemez). Kategori etiketi bağlantısı üstte kalır ve
 * üstten 11 px uzar (yerleşim aynı: negatif margin). Satır içi dolgular ölçülen hedefi ≥ 24 px yapar, yerleşimi değiştirmez.
 */
.news-list .card__body {
	position: relative;
}

.news-list .card__title a {
	padding-block: 3px;
}

.news-list .card__title a::after {
	content: "";
	position: absolute;
	inset: 0 0 -3px; /* alt 3 px + sonraki kartın etiketi üst 11 px = 14 px kart arası boşluk: çakışma yok */
}

.news-list .cat-label {
	position: relative;
	z-index: 1;
	margin-top: -11px;
	padding-top: 11px; /* ölçülen hedef 24 px; yerleşim aynı */
}

/* ==========================================================================
   4. Anket (`umh97_poll`): Figma 38:52. Kutu kendi zeminini çizer; başlık satırı yok, mavi küçük etiket var.
   ========================================================================== */

.widget_umh97_poll {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	background: var(--c-surface);
}

.poll__eyebrow {
	color: var(--c-brand);
	font: 600 11px/13px var(--f-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.poll {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.poll__set {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.poll__question {
	display: block;
	width: 100%;
	margin-bottom: 14px;
	padding: 0;
	color: var(--c-text);
	font: 700 19px/26px var(--f-serif);
	overflow-wrap: anywhere;
}

.poll__options {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.poll__option {
	position: relative;
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 10px;
	padding: 11px 14px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-box);
	background: var(--c-card);
	color: var(--c-text);
	font: 500 14px/17px var(--f-sans);
	cursor: pointer;
	transition: border-color var(--dur-1) ease;
}

@media (hover: hover) and (pointer: fine) {
	.poll__option:hover {
		border-color: var(--c-border-strong);
	}
}

.poll__option:has(.poll__radio:checked),
.poll__option:has(.poll__radio:focus-visible) {
	border-color: var(--c-brand);
}

/*
 * Radyo: gerçek girdi şeffaf ve satırı kaplar (etkin alan ≥ 44 px: satır 41 + 2 + 2); halkayı komşu .poll__dot çizer.
 * Seçenekler arası 14 px boşluk olduğundan taşan 2 px komşuyla çakışmaz.
 */
.poll__radio {
	position: absolute;
	top: -3px; /* 1 px kenar + 2 px */
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 6px);
	margin: 0;
	opacity: 0;
	appearance: none;
	cursor: pointer;
}

.poll__dot {
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--c-radio);
	border-radius: 50%;
	transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}

.poll__radio:checked + .poll__dot {
	border-color: var(--c-brand-fill);
	background: var(--c-brand-fill);
	box-shadow: inset 0 0 0 3px var(--c-card);
}

.poll__radio:focus-visible + .poll__dot {
	outline: 2px solid var(--c-brand);
	outline-offset: 2px;
}

.poll__text {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Sonuç çubukları: oy verme durumunda gizli; form data-state="results" olunca görünür (forms.js durumu değiştirir). */
.poll__pct,
.poll__bar {
	display: none;
}

.poll[data-state="results"] .poll__option {
	grid-template-columns: minmax(0, 1fr) auto;
	row-gap: 8px;
	cursor: default;
}

.poll[data-state="results"] .poll__radio,
.poll[data-state="results"] .poll__dot {
	display: none;
}

.poll[data-state="results"] .poll__pct {
	display: block;
	color: var(--c-text);
	font-weight: 600;
}

.poll[data-state="results"] .poll__bar {
	position: relative;
	display: block;
	grid-column: 1 / -1;
	height: 6px;
	overflow: hidden;
	border-radius: var(--radius-pill);
	background: var(--c-border);
}

/*
 * Çubuk dolgusu genişlik değil transform ile büyür (--poll-pct-frac: 0–1). Sonuç durumuna geçişte (forms.js data-state="results"
 * verir) soldan açılır, seçenekler 40 ms arayla (--poll-i); sayılar sonradan değişirse transition devreye girer.
 */
.poll__bar::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-brand-fill);
	opacity: .5;
	transform: scaleX(var(--poll-pct-frac, 0));
	transform-origin: left;
	transition: transform var(--dur-3) var(--ease-out);
}

.poll[data-state="results"] .poll__bar::before {
	animation: poll-bar-in var(--dur-3) var(--ease-out) calc(var(--poll-i, 0) * 40ms) backwards;
}

@keyframes poll-bar-in {
	from {
		transform: scaleX(0);
	}
}

.poll[data-state="results"] .poll__option--lead .poll__bar::before {
	opacity: 1;
}

/* Oy verilen seçenek ("oyunuz"): kenar mavi, metnin sonunda ✓; ekran okuyucu için gizli "(Oyunuz)" metni forms.js'te. */
.poll[data-state="results"] .poll__option--voted {
	border-color: var(--c-brand);
}

.poll[data-state="results"] .poll__option--voted .poll__text::after {
	content: " \2713";
	color: var(--c-brand);
	font-weight: 700;
}

.poll[data-state="results"] .poll__submit {
	display: none;
}

.poll__status {
	margin: 0;
	color: var(--c-text-2);
	font: 500 13px/18px var(--f-sans);
	transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.poll__status[data-state="error"] {
	color: var(--c-warn-text);
}

.poll__status:empty {
	display: none;
}

/* Durum iletisi girişi: görünürken opaklık + 4 px aşağı iniş (forms.js metni yazınca). */
@starting-style {
	.poll__status,
	.nl-form__status {
		opacity: 0;
		transform: translateY(-4px);
	}
}

.poll__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.poll__total {
	color: var(--c-muted);
	font: 400 12px/15px var(--f-sans);
}

/*
 * "Oy Ver": görünür hap 36 px (Figma), etkin alan 44 px. Hap ::before ile çizilir, düğme 4 px dolgulu ve -4 px margin'li
 * olduğundan yerleşim değişmez. Basma geri bildirimi (:active scale .97) ve geçişler main.css `.btn`'den gelir.
 */
.poll__submit {
	position: relative;
	isolation: isolate;
	margin-block: -4px;
	padding: 14px 20px;
	background: transparent;
}

.poll__submit::before {
	content: "";
	position: absolute;
	inset: 4px 0;
	z-index: -1;
	border-radius: var(--radius-pill);
	background: var(--c-ink);
}

.poll__submit[aria-busy="true"] {
	cursor: progress;
	pointer-events: none;
	opacity: .7;
}


/* ==========================================================================
   5. Reklam (`umh97_ad` ve do_action('yh_ad_slot'))
   ========================================================================== */

.ad + .ad {
	margin-top: 16px;
}

.ad__label {
	display: block;
	margin-bottom: 6px;
	color: var(--c-muted);
	font: 600 11px/13px var(--f-sans);
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
}

.ad__inner {
	display: flex;
	justify-content: center;
	max-width: 100%;
}

.ad__link {
	display: block;
	max-width: 100%;
}

.ad__img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ad__inner--code {
	overflow-x: auto;
}

/* Üst banner: logo alanı ile menü arasında, .container genişliğinde. */
.ad-slot--header_banner {
	max-width: 1240px;
	margin-inline: auto;
	padding: 0 20px 16px;
}

@media (max-width: 767px) {
	.ad--hide-mobile {
		display: none !important;
	}

	/* Mobilde sığdırma kapalıysa görsel doğal boyutunda kalır, taşarsa kaydırılır. */
	.ad:not(.ad--fit-mobile) .ad__inner {
		justify-content: flex-start;
		overflow-x: auto;
	}

	.ad:not(.ad--fit-mobile) .ad__img {
		max-width: none;
	}
}

/* ==========================================================================
   6. Hava kartı (`umh97_weather` + do_action('yh_home_weather')): Figma 8:23 (masaüstü), 11:80 (mobil)
   ========================================================================== */

.weather {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	background: var(--c-navy);
	color: var(--c-on-navy);
}

html[data-theme="dark"] .weather {
	padding: 23px;
	border: 1px solid var(--c-border);
}

.weather__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.weather__eyebrow {
	color: var(--c-on-navy-link);
	font: 600 11px/13px var(--f-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.weather__city {
	color: var(--c-on-navy);
	font: 600 13px/16px var(--f-sans);
}

.weather__now {
	display: flex;
	align-items: center;
	gap: 14px;
}

.weather__icon {
	display: inline-flex;
	flex: none;
	color: var(--c-on-navy-2);
}

.weather__icon--clear {
	color: var(--c-sun);
}

.weather__svg {
	display: block;
	width: 48px;
	height: 48px;
}

.weather__temp {
	flex: none;
	color: var(--c-on-navy);
	font: 700 52px/56px var(--f-serif);
}

.weather__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.weather__desc {
	color: var(--c-on-navy);
	font: 600 14px/17px var(--f-sans);
}

.weather__feels {
	color: var(--c-on-navy-5);
	font-weight: 400;
}

.weather__city-inline {
	display: none;
}

.weather__detail {
	color: var(--c-on-navy-5);
	font: 400 12px/15px var(--f-sans);
}

.weather .weather__days {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--c-navy-line);
}

.weather__day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.weather__day-label {
	color: var(--c-on-navy-5);
	font: 400 11px/13px var(--f-sans);
}

.weather__day-temp {
	color: var(--c-on-navy);
	font: 600 14px/17px var(--f-sans);
}

@media (max-width: 767px) {
	.weather {
		padding: 20px;
	}

	html[data-theme="dark"] .weather {
		padding: 19px;
	}

	/* Mobil kartta üst satır yok (Figma 11:80): etiket yalnızca ekran okuyucuya, şehir durum satırında. */
	.weather__top {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.weather__now {
		gap: 12px;
	}

	.weather__svg {
		width: 40px;
		height: 40px;
	}

	.weather__temp {
		font-size: 44px;
		line-height: 48px;
	}

	.weather__city-inline {
		display: inline;
	}

	.weather__desc {
		font-size: 13px;
		line-height: 16px;
	}

	.weather__feels {
		display: none;
	}

	.weather__detail {
		font-size: 11px;
		line-height: 13px;
	}

	.weather .weather__days {
		padding-top: 12px;
	}

	.weather__day {
		gap: 3px;
	}

	.weather__day-label {
		font-size: 10px;
		line-height: 12px;
	}

	.weather__day-temp {
		font-size: 13px;
		line-height: 16px;
	}
}

/* Ana sayfa (do_action('yh_home_weather')): kabuk (navy zemin, iç boşluk) home.css `.home-weather`'tadır; kart yalnızca içeriktir. */
.weather--home,
html[data-theme="dark"] .weather--home {
	padding: 0;
	border: 0;
	background: transparent;
}

/* ==========================================================================
   7. Bülten kutusu (`umh97_newsletter`): footer bülten dilinin küçük hâli
   ========================================================================== */

.widget_umh97_newsletter {
	padding: 22px;
	background: var(--c-brand-tint);
}

.nl-box__title {
	color: var(--c-text);
	font: 700 19px/26px var(--f-serif);
}

.nl-box__desc {
	margin-top: 6px;
	color: var(--c-text-2);
	font: 400 13px/20px var(--f-sans);
}

.nl-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
}

.nl-form__input {
	padding: 13px 18px; /* 45 px: dokunma hedefi */
	border-radius: var(--radius-pill);
	font-size: 14px;
	line-height: 17px;
}

.nl-form__submit {
	display: grid;
	place-items: center;
	padding: 14px 18px; /* 44 px */
}

/* Yüklenirken ("Gönderiliyor…"): iki metin aynı hücrede üst üste durur, düğme genişliği/yüksekliği değişmez. */
.nl-form__label,
.nl-form__busy {
	grid-area: 1 / 1;
}

.nl-form__busy {
	visibility: hidden;
}

.nl-form[data-state="loading"] .nl-form__label,
.nl-form__submit[aria-busy="true"] .nl-form__label {
	visibility: hidden;
}

.nl-form[data-state="loading"] .nl-form__busy,
.nl-form__submit[aria-busy="true"] .nl-form__busy {
	visibility: visible;
}

.nl-form[data-state="loading"] .nl-form__submit,
.nl-form__submit[aria-busy="true"] {
	cursor: progress;
	pointer-events: none;
}

/* Bal küpü: görünmez ve odaklanamaz; yalnızca botlar doldurur (girdi 0×0, hedef sayılmaz). */
.nl-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nl-form__hp input {
	width: 0;
	height: 0;
	padding: 0;
	border: 0;
}

.nl-form__status {
	margin: 0;
	color: var(--c-text);
	font: 500 13px/18px var(--f-sans);
	transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.nl-form__status[data-state="error"] {
	color: var(--c-warn-text);
}

.nl-form__status:empty {
	display: none;
}

.nl-box__note {
	margin-top: 10px;
	color: var(--c-text-2);
	font: 400 11px/13px var(--f-sans);
}

/* ==========================================================================
   8. Burç sekmeleri (`umh97_astro`)
   ========================================================================== */

.astro__tabs {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 6px;
}

.astro__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 0;
	padding: 8px 2px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-box);
	background: var(--c-card);
	color: var(--c-text-2);
	font: 500 11px/13px var(--f-sans);
	cursor: pointer;
	transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease, color var(--dur-1) ease;
}

@media (hover: hover) and (pointer: fine) {
	.astro__tab:hover {
		border-color: var(--c-border-strong);
	}
}

.astro__tab[aria-selected="true"] {
	border-color: var(--c-brand);
	background: var(--c-brand-tint-2);
	color: var(--c-brand);
}

.astro__symbol,
.astro__head-name > span {
	font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", var(--f-sans);
	font-variant-emoji: text;
}

.astro__symbol {
	font-size: 18px;
	line-height: 20px;
}

.astro__name {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.astro__panel {
	margin-top: 12px;
	padding: 16px;
	background: var(--c-surface);
}

.astro__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.astro__head-name {
	color: var(--c-text);
	font: 700 19px/26px var(--f-serif);
}

.astro__date {
	color: var(--c-muted);
	font: 400 12px/15px var(--f-sans);
	white-space: nowrap;
}

.astro__text {
	color: var(--c-text-body);
	font: 400 14px/23px var(--f-sans);
}

/* ==========================================================================
   9. Özel HTML (`custom_html`, "İşte Yumurtalık"): başlık + tam genişlik içerik; iframe 16:9 duyarlı
   ========================================================================== */

.widget_custom_html .textwidget {
	min-width: 0;
}

.widget_custom_html .textwidget iframe,
.widget_custom_html .textwidget video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

.widget_custom_html .textwidget img {
	display: block;
	width: 100%;
	height: auto;
}

.widget_custom_html .textwidget > :last-child {
	margin-bottom: 0;
}

/* Tablet: kenar alan iki sütunlu ızgaraya iner (main.css); zeminli kutular hücreyi doldurup uzamasın. */
@media (min-width: 768px) and (max-width: 1023px) {
	.widget_umh97_poll,
	.widget_umh97_newsletter {
		align-self: start;
	}
}

/* ==========================================================================
   Azaltılmış hareket: çubuk animasyonu yok; durum iletileri yalnızca opaklıkla belirir, kayma yok.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.poll__bar::before,
	.poll[data-state="results"] .poll__bar::before {
		animation: none;
		transition: none;
	}

	.poll__status,
	.nl-form__status {
		transition: opacity var(--dur-2) ease;
	}

	@starting-style {
		.poll__status,
		.nl-form__status {
			opacity: 0;
			transform: none;
		}
	}
}