/*! TazminGO Core · tarih seçici (datepicker.js · WAI-ARIA APG Date Picker Dialog)
    Tek bileşen, tek stil dosyası: ön yüz (site.css bu dosyaya bağımlı) ve yönetim aynı kuralları yükler.
    Kurallar site.css §5'ten değiştirilmeden taşındı; her seçici .tzg-dp / .tzg-dp__* kapsamında.
    Ön yüzde tema CSS'inden SONRA yüklenir (tema buton/tablo kurallarını sıfırlama bu sıraya dayanır).

    Renkler .tzg-dp ve .tzg-dp__toggle üzerindeki değişkenlerden gelir; varsayılanlar Impreza değişkenleri,
    tema yoksa (wp-admin) statik yedekleri. Başka bir bağlam yalnızca değişkenleri yeniden tanımlar:
      .tzg .tzg-dp, .tzg .tzg-dp__toggle { --tzg-dp-accent: #007D91; }
    ≤600 px (ya da yatay telefon) tam ekran; sorgu free-check.js ve datepicker.js'teki SHEET_Q ile aynı olmalı. */

.tzg-dp,
.tzg-dp__toggle {
	--tzg-dp-ink: var(--color-content-heading, #141323);
	--tzg-dp-accent: var(--color-content-link, #007D91);
	--tzg-dp-hover: var(--color-tg-ice, #EFFBFC);
	--tzg-dp-bg: var(--color-content-bg, #FFFFFF);
	--tzg-dp-line: var(--color-tg-line, #E4E8F0);
}

/* Yalnız tam ekranda görünenler. "Tarihi seç" .w-btn:not():not() (0,3,0) kuralını aşmak için 3 sınıflı. */
.tzg-dp__top,
.tzg-dp__value,
.tzg-dp .tzg-dp__foot .tzg-dp__confirm {
	display: none;
}

/* Kapat (X): iki ekranda da aynı ikon (liste kabuğunun kapat düğmesiyle aynı, site.css). Kabuk wizard diyaloğunun
   içine taşındığında (QA-WZ-015) .tzg-wz buton sıfırlaması (0,1,0) ezmesin diye (0,2,0). */
.tzg-dp .tzg-dp__x {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	margin: 0 -10px 0 0;
	padding: 0;
	color: var(--tzg-dp-ink);
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.tzg-dp .tzg-dp__x::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	margin: auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Tema buton kurallarını sıfırla (Impreza .w-btn stilli "Tarihi seç" hariç).
   :where() ile (0,1,0): bileşen kuralları (.tzg-dp .tzg-dp__act vb., 0,2,0) sıfırlamayı ezer. Önceki
   `.tzg-dp button:not(.w-btn)` (0,2,1) onların rengini, dolgusunu ve kalınlığını siliyordu (QA CORE-003).
   Tema: Impreza `[type=button]` (0,1,0) yalnız görünüm/imleç verir; bu dosya temadan sonra yüklendiği için sıfırlama kazanır. */
.tzg-dp__toggle,
.tzg-dp :where(button:not(.w-btn)) {
	margin: 0;
	padding: 0;
	font: inherit;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var(--tzg-dp-ink);
	background: none;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	cursor: pointer;
}

/* Soldaki takvim ikonu artık düğme (alanı değil diyaloğu açar). Konum widget alanına (.tzg-fc) göre;
   başka bir bağlam (yönetim) düğmeyi kendi alanına göre yerleştirir. */
.tzg-fc .tzg-dp__toggle {
	position: absolute;
	z-index: 2;
	top: 50%;
	inset-inline-start: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	color: var(--tzg-dp-accent);
}

@media (hover: hover) {
	.tzg-fc .tzg-dp__toggle:hover {
		background: var(--tzg-dp-hover);
	}
}

.tzg-dp__toggle .tzg-fc__icon {
	position: static;
	margin: 0;
}

.tzg-dp {
	position: absolute;
	z-index: 40;
	top: calc(100% + 4px);
	inset-inline-start: 0;
	width: 320px;
	max-width: calc(100vw - 32px);
	padding: 12px;
	background: var(--tzg-dp-bg);
	border: 1px solid var(--tzg-dp-line);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(20, 19, 35, .12);
	color: var(--tzg-dp-ink);
	font-size: 15px;
}

/* Tam ekranda diyalog .tzg-fc dışında (<body>): tema button{display} kuralı [hidden]'ı ezmesin. */
.tzg-dp[hidden],
.tzg-dp [hidden] {
	display: none !important;
}

.tzg-dp :focus-visible {
	outline-offset: 1px;
}

.tzg-dp__head {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 8px;
}

.tzg-dp .tzg-dp__nav {
	flex: 0 0 40px;
	height: 40px;
	font-size: 22px;
	color: var(--tzg-dp-accent);
}

.tzg-dp .tzg-dp__title {
	flex: 1 1 auto;
	height: 40px;
	font-weight: 700;
}

/* Yalnız gerçek imleçte: dokunmatikte dokunulan gün hover zeminiyle kalmasın (QA CORE-004). */
@media (hover: hover) {
	.tzg-dp .tzg-dp__nav:hover,
	.tzg-dp .tzg-dp__title:hover,
	.tzg-dp .tzg-dp__act:hover,
	.tzg-dp .tzg-dp__month:hover,
	.tzg-dp .tzg-dp__year:hover,
	.tzg-dp .tzg-dp__day:hover {
		background: var(--tzg-dp-hover);
	}
}

.tzg-dp .tzg-dp__nav[disabled] {
	opacity: .35;
	cursor: default;
	background: none;
}

/* Tema tablo kurallarını (kenarlık, dolgu, zebra) sıfırla. */
.tzg-dp__grid {
	width: 100%;
	margin: 0;
	table-layout: fixed;
	border-collapse: collapse;
	border: 0;
}

.tzg-dp__grid tr,
.tzg-dp__grid th,
.tzg-dp__grid td {
	padding: 1px;
	text-align: center;
	vertical-align: middle;
	background: none;
	border: 0;
}

/* Gün başlıkları teal (Figma M-Tarih), 4.9:1. */
.tzg-dp__grid th {
	padding-bottom: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--tzg-dp-accent);
}

.tzg-dp .tzg-dp__day {
	display: block;
	width: 100%;
	height: 40px;
	font-size: 15px;
}

.tzg-dp .tzg-dp__day[aria-current="date"] {
	box-shadow: inset 0 0 0 2px var(--tzg-dp-accent);
}

.tzg-dp .tzg-dp__day[aria-selected="true"] {
	font-weight: 700;
	color: #FFFFFF;
	background: var(--tzg-dp-accent);
}

.tzg-dp .tzg-dp__day[aria-selected="true"][aria-current="date"] {
	box-shadow: inset 0 0 0 2px var(--tzg-dp-accent), inset 0 0 0 4px #FFFFFF;
}

.tzg-dp .tzg-dp__day[aria-disabled="true"],
.tzg-dp .tzg-dp__month[aria-disabled="true"] {
	color: #98A2B3;
	background: none;
	cursor: not-allowed;
}

/* Hızlı ay/yıl geçişi */
.tzg-dp__years {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.tzg-dp .tzg-dp__year {
	min-width: 64px;
	height: 36px;
	padding: 0 10px;
	font-weight: 700;
	border: 1px solid var(--tzg-dp-line);
}

.tzg-dp .tzg-dp__year[aria-pressed="true"] {
	color: #FFFFFF;
	background: var(--tzg-dp-accent);
	border-color: var(--tzg-dp-accent);
}

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

.tzg-dp .tzg-dp__month {
	height: 44px;
}

.tzg-dp__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--tzg-dp-line);
}

/* CORE-003: metin düğmesi (teal, dolgulu, kalın). (0,3,0): buton sıfırlamaları ve aynı özgüllükte sonradan
   yüklenen bir kural (tema/eklenti özel CSS'i) bu düğmeleri düz metne çeviremesin. */
.tzg-dp .tzg-dp__foot .tzg-dp__act {
	min-height: 40px;
	padding: 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--tzg-dp-accent);
}

.tzg-dp .tzg-dp__foot .tzg-dp__close {
	margin-inline-start: auto;
}

/* Dar ekran ya da yatay telefon (QA CORE-002: 844 × 390'da açılır kutu header'ın altında kalıyordu).
   Sorgu free-check.js ve datepicker.js'teki SHEET_Q ile aynı olmalı (tests/css.test.mjs). Liste kabuğunun
   (.tzg-fc__sheet) aynı görünümü site.css'te. */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
	.tzg-dp {
		position: fixed;
		z-index: 10001;
		inset: 0;
		width: auto;
		max-width: none;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
		background: var(--tzg-dp-bg);
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.tzg-dp__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 24px;
	}

	.tzg-dp__name {
		margin: 0;
		font-size: 28px;
		line-height: 1.2;
		font-weight: 700;
		color: var(--tzg-dp-ink);
		cursor: default;
	}

	.tzg-dp__value-label {
		display: block;
		margin: 0 0 8px;
		font-size: 15px;
		line-height: 1.3;
		font-weight: 700;
		color: var(--tzg-dp-ink);
	}

	/* --- Tarih seçimi (M-Tarih) --- */
	.tzg-dp__value {
		display: block;
		margin-bottom: 24px;
	}

	.tzg-dp__value-box {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 52px;
		padding: 0 16px;
		font-size: 16px;
		border: 1px solid var(--tzg-dp-line);
		border-radius: 8px;
	}

	.tzg-dp__value-box::before {
		content: "";
		flex: 0 0 18px;
		height: 20px;
		background: var(--tzg-dp-accent);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.75 17.25' fill='none' stroke='%23000' stroke-width='1.42' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.04.71v5M10.71.71v5M.71 7.38h13.33M.71 3.21h13.33v13.33H.71z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.75 17.25' fill='none' stroke='%23000' stroke-width='1.42' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.04.71v5M10.71.71v5M.71 7.38h13.33M.71 3.21h13.33v13.33H.71z'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* Ay başlığı solda ve büyük; ‹ › sağda. */
	.tzg-dp__head {
		margin-bottom: 12px;
	}

	.tzg-dp .tzg-dp__title {
		order: -1;
		height: 44px;
		font-size: 24px;
		text-align: start;
	}

	.tzg-dp .tzg-dp__nav {
		flex-basis: 44px;
		height: 44px;
	}

	.tzg-dp .tzg-dp__day,
	.tzg-dp .tzg-dp__year {
		height: 44px;
	}

	.tzg-dp__foot {
		margin-top: 20px;
		padding-top: 0;
		border-top: 0;
	}

	.tzg-dp .tzg-dp__act {
		display: none;
	}

	/* "Tarihi seç →": widget'ın Impreza buton stili; stil yoksa teal yedek. */
	.tzg-dp .tzg-dp__foot .tzg-dp__confirm {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 52px;
	}

	.tzg-dp .tzg-dp__confirm:not(.w-btn) {
		padding: 0 20px;
		font-weight: 700;
		color: #FFFFFF;
		background: var(--tzg-dp-accent);
	}

	.tzg-dp__arrow {
		flex: 0 0 18px;
		height: 14px;
		margin-inline-start: 12px;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.75 11.42' fill='none' stroke='%23000' stroke-width='1.42' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M.71 5.71h13.33M9.04 10.71l5-5-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.75 11.42' fill='none' stroke='%23000' stroke-width='1.42' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M.71 5.71h13.33M9.04 10.71l5-5-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	}
}