/*!
 * Pusula Turizm — Tur Arama
 *
 * Tasarım: modern, ferah, cam etkili; vurgu rengi ESKİTİLMİŞ ALTIN.
 *
 * Tema Bootstrap 3 tabanlı olduğu ve iki ayrı :root bloğunda --main-color /
 * --link-color TERS tanımlandığı için (traveler/style.css vs traveler/v2/css/style.css,
 * ve UCSS bunları yeniden sıralayabiliyor) tema değişkenlerine HİÇ güvenilmez.
 * Tüm renkler --tta- önekli, literal yedekli kendi tokenlarımızdır.
 *
 * Mobile-first: taban kurallar mobil, media query'ler yukarı doğru ekler.
 */

.tta-box,
.tta-overlay {
	--tta-gold: #E8A672;
	--tta-gold-600: #B85416;
	--tta-gold-700: #8C3E10;
	--tta-gold-tint: rgba(232, 166, 114, 0.12);
	--tta-gold-ring: rgba(232, 166, 114, 0.3);
	--tta-ink: #1a1712;
	--tta-muted: #6b6259;
	--tta-line: #e8e2d9;
	--tta-surface: #fffdfa;
	--tta-ease: cubic-bezier(0.16, 1, 0.3, 1);

	-webkit-font-smoothing: antialiased;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.tta-box *,
.tta-box *::before,
.tta-box *::after,
.tta-overlay *,
.tta-overlay *::before,
.tta-overlay *::after {
	box-sizing: border-box;
}

.tta-overlay[hidden],
.tta-box [hidden],
.tta-overlay [hidden] {
	display: none !important;
}

/*
 * Tema/Bootstrap sıfırlamaları — yalnız kendi kapsamımızda.
 *
 * :where() ÖNEMLİ: özgüllüğü (specificity) SIFIRLAR. Düz yazılsaydı
 * `.tta-box button` (0,1,1) bileşen kurallarımızı — ör. `.tta-field__submit`
 * (0,1,0) — ezerdi ve altın buton zemini kaybolurdu. Sıfırlama her zaman
 * bileşenin ALTINDA kalmalı.
 */
:where(.tta-box, .tta-overlay) :where(button) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	text-transform: none;
	box-shadow: none;
	text-shadow: none;
}

:where(.tta-box, .tta-overlay) :where(input) {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	height: auto;
}

:where(.tta-box, .tta-overlay) :where(h3, h4, p) {
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
}

:where(.tta-box, .tta-overlay) :where(a) {
	text-decoration: none;
	color: inherit;
	box-shadow: none;
}

:where(.tta-box, .tta-overlay) :where(mark) {
	background: none;
	color: inherit;
}

.tta-box input::-webkit-search-cancel-button,
.tta-overlay input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

:where(.tta-box, .tta-overlay) :where(svg) {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	display: block;
}

/* ============================================================
   1. Arama kutusu (tetikleyici)
   ============================================================ */

.tta-box {
	position: relative;
	width: 100%;
	max-width: 100%;
	/* Mobilde hero fotoğrafının kenarına yapışmasın. */
	padding: 0 16px;
}

.tta-box.tta-box--editor {
	position: static !important;
	transform: none !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	opacity: 0.9;
}

.tta-field {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	/* Kutu yüksekliği kasıtlı olarak düşük (madde 3): fotoğrafın üstünde ince
	   bir şerit gibi dursun, blok gibi durmasın. */
	min-height: 48px;
	padding: 0 6px 0 18px;
	background: #fff;
	border: 1px solid var(--tta-line, #e8e2d9);
	border-radius: 999px;
	box-shadow: 0 8px 32px rgba(26, 23, 18, 0.18);
	transition: box-shadow 0.24s var(--tta-ease), transform 0.24s var(--tta-ease);
}

/*
 * Tetikleyici kutu: koyu CAM + altın kenarlık (madde 2).
 * Hero fotoğrafının üstünde yüzer; beyaz dolgu yerine yarı saydam koyu zemin.
 */
.tta-field--trigger {
	/* Dönen altın halka (::after) buna göre yerleşir. */
	position: relative;
	cursor: pointer;
	background: rgba(20, 16, 11, 0.34);
	-webkit-backdrop-filter: blur(10px) saturate(130%);
	backdrop-filter: blur(10px) saturate(130%);
	border-color: rgba(232, 166, 114, 0.75);
	box-shadow: 0 8px 28px rgba(12, 9, 6, 0.28);
}

/* Bulanıklık yoksa cam etkisi olmaz; okunabilirlik için zemin koyulaşır. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.tta-field--trigger {
		background: rgba(20, 16, 11, 0.62);
	}
}

/*
 * KENARDA DÖNEN ALTIN TON (madde 4) — hem masaüstü hem mobil.
 *
 * Kapsülün 1px altın kenarlığı sabit; onun üstünde yavaşça dönen bir parlaklık
 * geziyor. Dikkat çekmesi için yeterli, rahatsız etmemesi için 6 saniyede bir
 * tur ve düşük kontrast.
 *
 * Teknik: `conic-gradient` bir sözde eleman üzerine basılır ve `mask` ile yalnız
 * 1.5px'lik ÇERÇEVE bırakılır (içi oyulur). Böylece kutu içeriğinin üstüne
 * hiçbir katman binmez, metin okunurluğu değişmez.
 *
 * DÖNEN ŞEY ELEMAN DEĞİL, GRADYANIN AÇISI. `transform: rotate()` denendi ve
 * yanlıştı: kapsül kare değil (ör. 620x48), döndürülen dikdörtgen kutuyu artık
 * kaplamıyor ve kenar yerine KÖŞEGEN BOYUNCA UZANAN bir şerit olarak
 * görünüyordu. `@property` ile tanımlı bir açı değişkeni animasyonlanınca
 * gradyan kendi içinde döner, eleman yerinde kalır.
 */
@property --tta-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.tta-field--trigger::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 999px;
	/* 2px: 1.5px kenar, kapsulun kendi altin kenarligi uzerinde fark etmiyordu. */
	padding: 2px;
	background: conic-gradient(
		from var(--tta-angle, 0deg),
		transparent 0deg,
		transparent 205deg,
		rgba(232, 166, 114, 0.45) 250deg,
		rgba(255,172,130, 1) 285deg,
		rgba(232, 166, 114, 0.45) 320deg,
		transparent 360deg
	);
	/*
	 * ÇERÇEVEYİ OYMA. `mask` kısayolunda `content-box exclude` yazmak Chromium'da
	 * beklendiği gibi çalışmıyordu: iç kısım oyulmadığı için dönen gradient
	 * kutunun İÇİNDEN geçen çapraz bir çizgi olarak görünüyordu. Özellikler ayrı
	 * ayrı yazıldığında iki katman (content-box + border-box) doğru şekilde
	 * çıkarılıyor ve yalnız 1.5px'lik kenar kalıyor.
	 */
	-webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
	-webkit-mask-clip: content-box, border-box;
	-webkit-mask-composite: xor;
	mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
	mask-clip: content-box, border-box;
	mask-composite: exclude;
	pointer-events: none;
	animation: tta-ring 4.5s linear infinite;
}

@keyframes tta-ring {
	to {
		--tta-angle: 360deg;
	}
}

/*
 * `mask-composite` desteklenmiyorsa (eski WebKit) çerçeve oyulmaz ve dönen
 * katman kutunun TAMAMINI kaplar — metni bozar. O yüzden efekt yalnız desteğin
 * kesin olduğu yerde açılır.
 */
@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
	.tta-field--trigger::after {
		display: none;
	}
}

/* Hareket azaltma isteniyorsa dönme durur; kenarlık sabit altın kalır. */


/* Koyu zeminde açık metin. Yer tutucu yazılıp silindiği için (madde 4)
   asıl okunan metin budur. */
.tta-field--trigger .tta-field__input,
.tta-field--trigger .tta-field__input::placeholder {
	color: rgba(255, 255, 255, 0.82);
}

.tta-field--trigger .tta-field__icon {
	color: rgba(255, 255, 255, 0.7);
}

.tta-field--trigger:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 36px rgba(12, 9, 6, 0.34);
	border-color: var(--tta-gold, #E8A672);
}

.tta-field:focus-within {
	box-shadow: 0 8px 32px rgba(26, 23, 18, 0.18), 0 0 0 4px var(--tta-gold-ring, rgba(232, 166, 114, 0.3));
}

.tta-field__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--tta-muted, #6b6259);
}

.tta-field__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	/* 16px altına DÜŞMEMELİ: iOS Safari odaklanınca sayfayı yakınlaştırıyor. */
	font-size: 16px;
	font-weight: 400;
	color: var(--tta-ink, #1a1712);
	background: transparent;
	outline: none;
}

.tta-field__input::placeholder {
	color: var(--tta-muted, #6b6259);
	opacity: 1;
}

.tta-field--trigger .tta-field__input {
	cursor: pointer;
}

.tta-field__submit {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 24px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	/* Altın ZEMİN + koyu metin/ikon. Altın üstüne beyaz metin AA'yı geçmez. */
	color: var(--tta-ink, #1a1712);
	background: linear-gradient(180deg, #E8A672, var(--tta-gold, #E8A672));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
	transition: background 0.2s var(--tta-ease), box-shadow 0.2s var(--tta-ease),
		transform 0.2s var(--tta-ease);
}

/*
 * Yazısız hâl: SADECE İKON, zemin yok (madde 8).
 *
 * Eskiden altın yuvarlak bir pil vardı; koyu cam kapsülün içinde ikinci bir
 * "buton" gibi durup dikkati kutunun kendisinden alıyordu. Artık yalnız beyaz
 * büyüteç var — kapsülün tamamı zaten tıklanabilir olduğu için etkin dokunma
 * hedefi de küçülmüyor (44px genişlik korunuyor).
 */
.tta-field__submit--icon {
	width: 44px;
	padding: 0;
	color: #fff;
	background: none;
	box-shadow: none;
}

.tta-field__submit--icon:hover {
	background: none;
	/* Geri bildirim renkten: altına kaçan beyaz. */
	color: var(--tta-gold, #E8A672);
}

.tta-field__submit--icon svg {
	width: 21px;
	height: 21px;
}

.tta-field__submit svg {
	width: 19px;
	height: 19px;
	stroke-width: 2.2;
}

.tta-field__submit:hover {
	background: linear-gradient(180deg, var(--tta-gold, #E8A672), var(--tta-gold-600, #B85416));
}

.tta-field__submit:active {
	transform: scale(0.96);
}

.tta-field__submit:focus-visible {
	outline: 3px solid var(--tta-gold-ring, rgba(232, 166, 114, 0.3));
	outline-offset: 2px;
}

/* ============================================================
   2. Bulanık katman
   ============================================================ */

.tta-overlay {
	position: fixed;
	inset: 0;
	/*
	 * EN ÜSTTE DURUR — mümkün olan en yüksek z-index.
	 *
	 * Eskiden 999990'dı ve sitedeki promosyon pop-up'ı (panelden yönetilen
	 * Pop-Up eklentisi) 999999 kullandığı için ARAMA MODALININ ÜZERİNE
	 * BİNİYORDU — aradaki fark yalnız 9. Sayı yarışına girmemek için değer
	 * doğrudan tavana çekildi: `2147483647` 32 bit işaretli tam sayının en
	 * büyüğü, yani bir CSS z-index'i bunun üstüne çıkamaz.
	 *
	 * Arama katmanı bir modaldir: açıkken sitedeki hiçbir yüzen pencerenin
	 * (promosyon pop-up'ı, canlı destek balonu, çerez şeridi) önüne geçmemesi
	 * gerekir. Navbar'ın görünür kalması bu değerden ETKİLENMEZ; katman
	 * navbar'ın ALTINDAN başlıyor (bkz. tta.js `topInset`), üstünü örtmüyor.
	 *
	 * Bu kural satır içi kritik CSS bloğunda da TEKRARLANIR
	 * (class-tta-plugin.php): LiteSpeed UCSS bu dosyadaki kuralı atarsa
	 * katman `z-index: auto` ile kalır ve DOM'da ondan sonra gelen her
	 * konumlandırılmış öge üzerine biner.
	 */
	z-index: 2147483647;
	display: flex;
	flex-direction: column;
	/* Mobilde de ORTALANMIŞ pop-up (madde 5) — tam ekran sheet değil. */
	align-items: center;
	padding: 4vh 12px 12px;
	/* dvh: mobil adres çubuğu yüzünden 100vh viewport'tan taşıyor. */
	height: 100vh;
	height: 100dvh;
	color: var(--tta-ink, #1a1712);
}

.tta-overlay__scrim {
	position: absolute;
	inset: 0;
	/*
	 * Karartma AZALTILDI, bulanıklık ARTIRILDI (madde 6): arka plan canlı kalsın
	 * ama okunurluk için netliği kaybetsin.
	 */
	background: rgba(20, 16, 11, 0.28);
	-webkit-backdrop-filter: blur(30px) saturate(150%);
	backdrop-filter: blur(30px) saturate(150%);
	opacity: 0;
	transition: opacity 0.22s var(--tta-ease);
}

/* backdrop-filter yoksa bulanıklık yerine daha koyu bir perde. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.tta-overlay__scrim {
		/* Bulanıklık yoksa okunurluk yalnız karartmadan gelir. */
		background: rgba(20, 16, 11, 0.72);
	}
}

.tta-overlay.is-open .tta-overlay__scrim {
	opacity: 1;
}

.tta-panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	/*
	 * Mobilde de yuvarlatılmış, ortalanmış pop-up (madde 5). Sürüm 1'de burada
	 * `height: 100%` vardı ve panel tam ekran bir sheet olarak açılıyordu.
	 * Yükseklik içeriğe göre; taşan kısım panel İÇİNDE kaydırılır, böylece
	 * sanal klavye açıldığında da panel ekranda kalır.
	 */
	max-width: calc(100vw - 24px);
	height: auto;
	max-height: 88vh;
	max-height: 88dvh;
	border-radius: 20px;
	background: var(--tta-surface, #fffdfa);
	box-shadow: 0 20px 56px -12px rgba(26, 23, 18, 0.42);
	border-top: 1px solid rgba(232, 166, 114, 0.35);
	overflow: hidden;
	/*
	 * BAĞLANTILI AÇILIŞ (madde 4): panel, kendisini açan arama kutusundan büyür.
	 * `transform-origin` JS tarafından kutunun ekrandaki merkezine ayarlanır
	 * (bkz. anchorPanel), bu yüzden burada bir başlangıç değeri verilmez.
	 * Küçülme oranı belirgin (0.9) — bağ hissedilsin ama sıçrama olmasın.
	 */
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.24s var(--tta-ease), transform 0.32s var(--tta-ease);
	/* iPhone çentiği ve alt gösterge alanı. */
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/*
 * BAĞLANTILI AÇILIŞ (madde 9): panel, tıklanan arama kutusunun YERİNDE ve
 * KUTU BOYUTUNDA başlar, oradan kendi yerine açılır. Başlangıç karesi ile
 * geçiş JS tarafında satır içi yazılır (bkz. anchorPanel) — çünkü kutunun
 * ekrandaki konumu ancak çalışma anında ölçülebilir. Bu sınıf yalnız
 * tarayıcıya katman hazırlığı bildirir.
 */
.tta-panel.is-flip {
	will-change: transform;
}

.tta-overlay.is-open .tta-panel {
	opacity: 1;
	transform: scale(1);
}

.tta-panel__head {
	flex: 0 0 auto;
	padding: 12px 16px;
	border-bottom: 1px solid var(--tta-line, #e8e2d9);
	background: var(--tta-surface, #fffdfa);
}

.tta-field--panel {
	box-shadow: none;
	border-color: var(--tta-line, #e8e2d9);
	min-height: 52px;
	padding-right: 4px;
}

.tta-field--panel:hover {
	transform: none;
}

/* --- Aramayı paylaş: bağlantıyı kopyala --- */

.tta-panel__share {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	/* Dokunma hedefi >= 44px yüksekliğinde. */
	height: 36px;
	padding: 0 12px;
	margin-right: 2px;
	border: 1px solid var(--tta-line, #e8e2d9);
	border-radius: 999px;
	background: #fff;
	color: var(--tta-gold-700, #925232);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.18s var(--tta-ease), border-color 0.18s var(--tta-ease),
		color 0.18s var(--tta-ease);
}

.tta-panel__share[hidden] {
	display: none;
}

.tta-panel__share svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* Onay işareti yalnız kopyalandıktan sonra görünür. */
.tta-panel__share-ok {
	display: none;
}

.tta-panel__share:hover {
	background: var(--tta-gold-tint, rgba(232, 166, 114, 0.12));
	border-color: var(--tta-gold-ring, rgba(232, 166, 114, 0.3));
}

.tta-panel__share.is-copied {
	background: var(--tta-gold-tint, rgba(232, 166, 114, 0.12));
	border-color: var(--tta-gold, #E8A672);
}

.tta-panel__share.is-copied .tta-panel__share-ico {
	display: none;
}

.tta-panel__share.is-copied .tta-panel__share-ok {
	display: block;
}

.tta-panel__share.is-failed {
	color: var(--tta-muted, #6b6259);
	border-color: var(--tta-line, #e8e2d9);
	background: #fff;
}

/* --- Program görünümü (?tta_p=1) --- */

/*
 * SADE LİSTE. Yalnız grup başlıkları ("UMRE TURLARI" / "KÜLTÜR TURLARI") ve tur
 * kartları kalır. Gizlenenler:
 *   .tta-badges  -> hızlı filtre çipleri ("Önerilen turlar", "5 Yıldız", tur tipleri)
 *   .tta-months  -> "Kalkış ayları" başlığı + ay çipleri + takvim pop-up'ı
 *   .tta-all     -> "Tüm Umre Turları" ve "Tüm Kültür Turları" şeritleri
 *
 * Gizleme CSS ile yapılır, JS ile tek tek DEĞİL: gruplar her aramada yeniden
 * çiziliyor, tek tek gizlemek her çizimde tekrarlanmak zorunda kalırdı.
 *
 * Filtre gizlense de ÇALIŞMAYA devam eder: adresteki `tta_f` yine uygulanır,
 * yalnız çip satırı görünmez.
 */
.tta-overlay--program .tta-badges,
.tta-overlay--program .tta-months,
.tta-overlay--program .tta-all {
	display: none !important;
}

/* Şeritler kalkınca grubun altındaki boşluk fazla kalıyor; dengelenir. */
.tta-overlay--program .tta-group {
	padding-bottom: 4px;
}

.tta-panel__close {
	flex: 0 0 auto;
	/* Dokunma hedefi >= 44px. */
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: var(--tta-muted, #6b6259);
	transition: background 0.18s var(--tta-ease), color 0.18s var(--tta-ease);
}

.tta-panel__close svg {
	width: 18px;
	height: 18px;
}

.tta-panel__close:hover {
	background: var(--tta-gold-tint, rgba(232, 166, 114, 0.12));
	color: var(--tta-ink, #1a1712);
}

.tta-panel__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 20px 16px 28px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* Panel içi kaydırma sayfaya sızmasın. */
	overscroll-behavior: contain;
	/* Kaydırma çubuğu markanın yumuşak kahvesinde (madde 8) — Firefox. */
	scrollbar-width: thin;
	scrollbar-color: rgba(146,82,50, 0.45) transparent;
}

/* WebKit/Blink: scrollbar-color desteklenmiyor, ayrı sözde eleman gerekiyor. */
.tta-panel__body::-webkit-scrollbar {
	width: 10px;
}

.tta-panel__body::-webkit-scrollbar-track {
	background: transparent;
}

.tta-panel__body::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: rgba(146,82,50, 0.38);
	/* İçe boşluk: çubuk kenara yapışmasın. */
	border: 3px solid transparent;
	background-clip: content-box;
}

.tta-panel__body::-webkit-scrollbar-thumb:hover {
	background: rgba(146,82,50, 0.62);
	background-clip: content-box;
}

/* ============================================================
   3. Sonuç grupları
   ============================================================ */

.tta-group + .tta-group {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--tta-line, #e8e2d9);
}

.tta-group__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
}

.tta-group__title {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tta-muted, #6b6259);
	white-space: nowrap;
}

/* Başlık yanındaki ince altın çizgi. */
.tta-group__rule {
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, var(--tta-gold-ring, rgba(232, 166, 114, 0.3)), transparent);
}

.tta-group__count {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 500;
	color: var(--tta-muted, #6b6259);
	font-variant-numeric: tabular-nums;
}

/* --- Kartlar --- */

.tta-cards {
	display: grid;
	/* Mobil: tek sütun, yatay satır kartlar. */
	grid-template-columns: 1fr;
	gap: 8px;
}

/*
 * Kart bir <div>; içindeki bağlantı tüm yüzeyi kaplar, kalp butonu bağlantının
 * KARDEŞİ olarak üstte durur. (<button> bir <a> içinde geçersiz olurdu.)
 */
/*
 * MODERN KART (madde 9): saydam bir satır değil, kendi yüzeyi olan bir kart.
 * İnce kenarlık + yumuşak gölge kartı zeminden ayırır; hover'da gölge derinleşip
 * kart bir tık yükselir. Kapak ile gövde arasında nefes payı var.
 */
.tta-card {
	position: relative;
	border-radius: 18px;
	background: #fff;
	border: 1px solid var(--tta-line, #e8e2d9);
	box-shadow: 0 1px 2px rgba(26, 23, 18, 0.04);
	overflow: hidden;
	transition: transform 0.2s var(--tta-ease), box-shadow 0.2s var(--tta-ease),
		border-color 0.2s var(--tta-ease);
}

.tta-card__link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px;
	border-radius: inherit;
	color: inherit;
}

.tta-card:hover,
.tta-card.is-active {
	transform: translateY(-3px);
	border-color: var(--tta-gold-ring, rgba(232, 166, 114, 0.3));
	box-shadow: 0 14px 30px -12px rgba(26, 23, 18, 0.28);
}

.tta-card__link:focus-visible {
	outline: 3px solid var(--tta-gold-ring, rgba(232, 166, 114, 0.3));
	outline-offset: 2px;
}

.tta-card__media {
	flex: 0 0 auto;
	width: 88px;
	height: 64px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--tta-line, #e8e2d9);
}

.tta-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-width: none;
}

.tta-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.tta-card__title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--tta-ink, #1a1712);
	/* 2 satırda kırp. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Eşleşen metin: sarı <mark> değil, altın tonu. */
.tta-card__title mark,
.tta-mark {
	background: var(--tta-gold-tint, rgba(232, 166, 114, 0.12));
	color: var(--tta-gold-700, #925232);
	padding: 0 2px;
	border-radius: 3px;
	font-weight: 700;
}

/* Meta satırı: tarih · süre · destinasyon. Verisi olmayan parça hiç basılmaz. */
.tta-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 3px 10px;
	font-size: 12.5px;
	color: var(--tta-muted, #6b6259);
	font-variant-numeric: tabular-nums;
}

.tta-card__bit {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

/*
 * OTEL SATIRLARI TAM SATIR KAPLAR.
 *
 * Meta satırı `flex-wrap` ile akıyor; tarih ve süre yan yana durur, ama Mekke ve
 * Medine otelleri KENDİ SATIRLARINDA olmalı. `flex-basis: 100%` bunu sağlar:
 * her otel bir sonraki satıra geçer ve ikon her zaman adın solunda hizalı kalır.
 *
 * `align-items: flex-start`: otel adı iki satıra sardığında ikon metnin ortasına
 * değil ilk satırın hizasına oturur.
 */
.tta-card__bit--otel {
	flex: 0 0 100%;
	align-items: flex-start;
	gap: 6px;
}

/*
 * Otel ikonları bir tık BÜYÜK ve daha belirgin: 13px'te Kâbe ile kubbeyi
 * birbirinden ayırt etmek zordu. `margin-top` ile ad iki satıra sardığında ikon
 * ilk satırın hizasında kalır.
 */
.tta-card__bit--otel svg {
	width: 14.5px;
	height: 14.5px;
	margin-top: 1px;
	opacity: 0.95;
}

/* İlk otel satırı, üstündeki tarih/süre satırından bir tık ayrılsın. */
.tta-card__bit--otel:first-of-type {
	margin-top: 2px;
}

.tta-card__meta svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	opacity: 0.8;
}

/*
 * Sefere özel açıklama (Umre WEB_ACIKLAMA).
 *
 * Metin OLDUĞU GİBİ basılır. Veritabanında çoğu satır tamamı büyük harf
 * ("TEYMULLAH HOCA İLE UMRE") ama `text-transform` ile küçültmek "VIP" veya
 * "THY" gibi kısaltmaları bozardı. Bunun yerine punto küçültülüp ağırlık
 * düşürülerek başlıkla yarışması engellenir.
 */
.tta-card__note {
	margin-top: 5px;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--tta-gold-700, #925232);
	/* İki satırda kırp: uzun açıklama kartı bozmasın. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * Kalan müsaitlik: "Son 25 Kişi". Büyük harfe çevrilmez ve harf aralığı
 * verilmez (madde 4) — cümle gibi okunsun, etiket gibi bağırmasın.
 */
.tta-card__seats {
	display: block;
	margin-top: 7px;
	font-size: 13px;
	font-weight: 600;
	/* Altın yerine daha yumuşak, sıcak gri-kahve. */
	color: #8f8478;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ============================================================
   3b. Hızlı filtre badge'leri (kartların üstünde)
   ============================================================ */

.tta-badges {
	display: flex;
	gap: 8px;
	margin: 0 0 12px;
	overflow-x: auto;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.tta-badges::-webkit-scrollbar {
	display: none;
}

.tta-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--tta-line, #e8e2d9);
	border-radius: 999px;
	background: #fff;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--tta-ink, #1a1712);
	white-space: nowrap;
	transition: border-color 0.18s var(--tta-ease), background 0.18s var(--tta-ease),
		color 0.18s var(--tta-ease);
}

a.tta-badge:hover,
a.tta-badge:focus-visible {
	border-color: var(--tta-gold, #E8A672);
	background: var(--tta-gold-tint, rgba(232, 166, 114, 0.12));
	color: var(--tta-gold-700, #925232);
	outline: none;
}

/* Varsayılan görünümün adı: "Önerilen turlar". Adres taşımaz. */
.tta-badge.is-active {
	border-color: var(--tta-gold, #E8A672);
	background: var(--tta-gold-tint, rgba(232, 166, 114, 0.12));
	color: var(--tta-gold-700, #925232);
	font-weight: 600;
	cursor: default;
}

/* ============================================================
   3c. Kalkış takvimi (ay çiplerinin üstünde)
   ============================================================ */

/* "Kalkış ayları" düz bir etiket; takvimi AY ÇİPLERİ açar (madde 11). */
.tta-months {
	position: relative;
}

.tta-months__label {
	display: flex;
	align-items: center;
	gap: 6px;
}

.tta-months__label svg {
	width: 14px;
	height: 14px;
	opacity: 0.7;
}

/* Takvimi açan ay çipi: seçiliyken altın. */
.tta-chip--month.is-active {
	border-color: var(--tta-gold, #E8A672);
	background: var(--tta-gold-tint, rgba(232, 166, 114, 0.12));
	color: var(--tta-gold-700, #925232);
	font-weight: 600;
}

/*
 * BAĞLANTILI AÇILIŞ (madde 12): takvim basılan ay çipinden büyüyerek açılır.
 * `transform-origin` JS tarafından çipin yatay ortasına ayarlanır, böylece
 * pop-up ile onu açan çip arasında görsel bağ kurulur.
 */
/*
 * Takvim: basılan ay çipinin altında yüzen pop-up.
 *
 * `absolute` — panel içeriğini aşağı İTMEZ; genişlik sınırlı, yoksa 7 sütunlu
 * ızgara panelin tamamına yayılıp hücreler devasa oluyor. Yatay konum ve
 * transform-origin JS tarafından çipe göre ayarlanır (madde 12).
 */
.tta-cal {
	position: absolute;
	top: 100%;
	left: 0;
	bottom: auto;
	z-index: 5;
	width: 360px;
	max-width: 100%;
	margin-top: 8px;
	padding: 12px;
	border: 1px solid var(--tta-line, #e8e2d9);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 16px 40px -10px rgba(26, 23, 18, 0.34);

	opacity: 0;
	transform: scale(0.94) translateY(-6px);
	transition: opacity 0.18s var(--tta-ease), transform 0.22s var(--tta-ease);
}

.tta-cal.is-shown {
	opacity: 1;
	transform: none;
}

.tta-cal.is-up {
	transform: scale(0.94) translateY(6px);
}

.tta-cal.is-up.is-shown {
	transform: none;
}

/* Çipe bağlanan küçük gösterge üçgeni. */
.tta-cal::before {
	content: "";
	position: absolute;
	top: -5px;
	left: var(--tta-cal-arrow, 24px);
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	background: #fff;
	border-left: 1px solid var(--tta-line, #e8e2d9);
	border-top: 1px solid var(--tta-line, #e8e2d9);
}

.tta-cal.is-up::before {
	top: auto;
	bottom: -5px;
	border-left: 0;
	border-top: 0;
	border-right: 1px solid var(--tta-line, #e8e2d9);
	border-bottom: 1px solid var(--tta-line, #e8e2d9);
}


/*
 * Panelin alt kenarına denk gelen takvim yukarı açılır (JS ölçüp karar verir).
 * Aksi hâlde pop-up kırpılmış görünüyordu.
 */
.tta-cal.is-up {
	top: auto;
	bottom: 100%;
	margin-top: 0;
	margin-bottom: 4px;
}

.tta-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.tta-cal__title {
	font-size: 13px;
	font-weight: 600;
	color: var(--tta-ink, #1a1712);
}

.tta-cal__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	font-size: 18px;
	line-height: 1;
	color: var(--tta-gold-700, #925232);
	transition: background 0.18s var(--tta-ease), opacity 0.18s var(--tta-ease);
}

.tta-cal__nav:hover:not(:disabled) {
	background: var(--tta-gold-tint, rgba(232, 166, 114, 0.12));
}

.tta-cal__nav:disabled {
	opacity: 0.28;
	cursor: default;
}

.tta-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.tta-cal__dow {
	padding: 2px 0;
	text-align: center;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tta-muted, #6b6259);
}

.tta-cal__pad {
	display: block;
	height: 34px;
}

/*
 * Yükseklik SABİT (aspect-ratio değil): oranla bağlanırsa hücre yüksekliği
 * sütun genişliğini takip eder ve geniş panelde satırlar aşırı uzar.
 */
.tta-cal__day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	border-radius: 9px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	/* Kalkışı olmayan gün: soluk ve tıklanamaz. */
	color: rgba(107, 98, 89, 0.42);
}

/* Kalkış olan gün: altın zemin, koyu metin, tıklanabilir. */
.tta-cal__day.is-on {
	background: var(--tta-gold-tint, rgba(232, 166, 114, 0.12));
	border: 1px solid var(--tta-gold-ring, rgba(232, 166, 114, 0.3));
	color: var(--tta-ink, #1a1712);
	font-weight: 600;
}

.tta-cal__day.is-on:hover,
.tta-cal__day.is-on:focus-visible {
	background: var(--tta-gold, #E8A672);
	border-color: var(--tta-gold-600, #B85416);
	outline: none;
}

.tta-cal__dot {
	position: absolute;
	bottom: 3px;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: var(--tta-gold-700, #925232);
}

/* ============================================================
   3c-2. "Müşteri temsilcisiyle görüş" bloğu (sonuç bulunamadı)
   ============================================================ */

.tta-help {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 20px;
	padding: 18px;
	overflow: hidden;
	border: 1px solid var(--tta-gold-ring, rgba(232, 166, 114, 0.3));
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(232, 166, 114, 0.14), rgba(232, 166, 114, 0.05));
}

/* Kulaklık madalyonu: kesikli halka içinde altın ikon. */
.tta-help__badge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 999px;
	border: 1px dashed var(--tta-gold-ring, rgba(232, 166, 114, 0.3));
	background: rgba(255, 255, 255, 0.7);
	color: var(--tta-gold-700, #925232);
}

.tta-help__badge svg {
	width: 30px;
	height: 30px;
	stroke-width: 1.6;
}

.tta-help__body {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-width: 0;
}

.tta-help__text {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--tta-ink, #1a1712);
}

.tta-help__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	/* Altın ZEMİN + koyu metin: altın üstüne beyaz AA'yı geçmez. */
	color: var(--tta-ink, #1a1712);
	background: linear-gradient(180deg, #E8A672, var(--tta-gold, #E8A672));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
	font-size: 14px;
	font-weight: 700;
	transition: background 0.18s var(--tta-ease);
}

.tta-help__cta:hover {
	background: linear-gradient(180deg, var(--tta-gold, #E8A672), var(--tta-gold-600, #B85416));
}

.tta-help__cta:focus-visible {
	outline: 3px solid var(--tta-gold-ring, rgba(232, 166, 114, 0.3));
	outline-offset: 2px;
}

.tta-help__cta svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}

/* Süsleme: soluk cami silueti, metnin altına girmez. */
.tta-help__art {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 190px;
	height: 100%;
	opacity: 0.16;
	pointer-events: none;
	stroke-width: 1.2;
	color: var(--tta-gold-700, #925232);
}

/* ============================================================
   3d. Yönlendirme kartı (Hac / Cruise)
   ============================================================ */

.tta-redirect {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 72px;
	padding: 14px 16px;
	border: 1px solid var(--tta-gold-ring, rgba(232, 166, 114, 0.3));
	border-radius: 16px;
	background: var(--tta-gold-tint, rgba(232, 166, 114, 0.12));
	transition: background 0.18s var(--tta-ease), border-color 0.18s var(--tta-ease);
}

.tta-redirect:hover {
	background: rgba(232, 166, 114, 0.2);
	border-color: var(--tta-gold, #E8A672);
}

.tta-redirect__icon {
	flex: 0 0 auto;
	display: flex;
	color: var(--tta-gold-700, #925232);
}

.tta-redirect__icon svg {
	width: 24px;
	height: 24px;
}

.tta-redirect__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tta-redirect__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--tta-ink, #1a1712);
}

.tta-redirect__note {
	font-size: 13px;
	color: var(--tta-muted, #6b6259);
}

.tta-redirect > svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--tta-gold-700, #925232);
}

/* --- Ay çipleri --- */

.tta-months {
	margin-top: 14px;
}

.tta-months__label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--tta-muted, #6b6259);
}

.tta-months__list {
	display: flex;
	gap: 8px;
	/* Mobilde yatay kaydırılabilir şerit. */
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Kenarlarda kesilmeyi belli eden yumuşak maske. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

.tta-months__list::-webkit-scrollbar {
	display: none;
}

.tta-chip {
	flex: 0 0 auto;
	scroll-snap-align: start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--tta-line, #e8e2d9);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 500;
	color: var(--tta-ink, #1a1712);
	white-space: nowrap;
	transition: border-color 0.18s var(--tta-ease), background 0.18s var(--tta-ease),
		color 0.18s var(--tta-ease);
}

.tta-chip:hover,
.tta-chip:focus-visible {
	border-color: var(--tta-gold, #E8A672);
	background: var(--tta-gold-tint, rgba(232, 166, 114, 0.12));
	color: var(--tta-gold-700, #925232);
	outline: none;
}

.tta-chip__count {
	display: inline-block;
	min-width: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--tta-gold-tint, rgba(232, 166, 114, 0.12));
	color: var(--tta-gold-700, #925232);
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* --- "Tümünü gör" --- */

/*
 * "Tümünü gör" şeridi (madde 10): yumuşak altın zemin, solda pusula, sağ kenarda
 * soluk çizgisel manzara. Sürüm 1'de hover'da `border-bottom` ile altın bir ALT
 * ÇİZGİ çiziliyordu; madde 14 gereği kaldırıldı — vurgu artık zemin ve kenarlıkta.
 */
.tta-all {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	min-height: 56px;
	padding: 0 16px;
	overflow: hidden;
	border: 1px solid var(--tta-gold-ring, rgba(232, 166, 114, 0.3));
	border-radius: 16px;
	background: var(--tta-gold-tint, rgba(232, 166, 114, 0.12));
	font-size: 14px;
	font-weight: 600;
	color: var(--tta-gold-700, #925232);
	transition: background 0.18s var(--tta-ease), border-color 0.18s var(--tta-ease);
}

.tta-all:hover {
	background: rgba(232, 166, 114, 0.2);
	border-color: var(--tta-gold, #E8A672);
}

.tta-all:focus-visible {
	outline: 3px solid var(--tta-gold-ring, rgba(232, 166, 114, 0.3));
	outline-offset: 2px;
}

/*
 * İkinci bağlantı (madde 13): "Tüm Kültür Turları". Asıl bağlantıdan ayrı bir
 * tasarım — zeminsiz, ince, daha alçak. Hangisinin dar (destinasyon) hangisinin
 * geniş (tüm katalog) kapsam olduğu bakışta anlaşılsın.
 */
.tta-all--soft {
	min-height: 44px;
	margin-top: 8px;
	padding: 0 14px;
	border-style: dashed;
	background: transparent;
	font-weight: 500;
	color: var(--tta-muted, #6b6259);
}

.tta-all--soft:hover {
	background: transparent;
	border-color: var(--tta-gold, #E8A672);
	color: var(--tta-gold-700, #925232);
}

.tta-all__icon {
	flex: 0 0 auto;
	display: flex;
}

.tta-all__text {
	flex: 1 1 auto;
	min-width: 0;
}

.tta-all svg {
	width: 16px;
	height: 16px;
}

/* Süsleme: metnin altına girmesin, tıklamayı da yemesin. */
.tta-all__art {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 150px;
	height: 100%;
	opacity: 0.18;
	pointer-events: none;
	stroke-width: 1.2;
}

.tta-all__art.tta-all__art {
	/* Genel `.tta-all svg` boyut kuralını ez (o 16px veriyor). */
	width: 150px;
	height: 100%;
}

/*
 * Tema `a:hover { text-decoration: underline }` yazıyor ve yukarıdaki
 * :where(...) sıfırlaması ÖZGÜLLÜĞÜ SIFIR olduğu için onu ezemiyor (madde 14).
 * Bu yüzden alt çizgi burada, gerçek özgüllükle kapatılır.
 */
.tta-overlay a,
.tta-overlay a:hover,
.tta-overlay a:focus,
.tta-box a,
.tta-box a:hover,
.tta-box a:focus {
	text-decoration: none;
	box-shadow: none;
}

/* ============================================================
   4. Durumlar
   ============================================================ */

.tta-state__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	color: var(--tta-ink, #1a1712);
}

.tta-state__label {
	/* Madde 2: "POPÜLER ARAMALAR" bloğu daha derli toplu (10px -> 8px). */
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tta-muted, #6b6259);
}

.tta-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * İlk açılıştaki tur kartları, çiplerin altında biraz nefes alsın.
 *
 * Madde 2: ÇİZGİ KALDIRILDI ve boşluk düşürüldü (22+20 -> 16). Çip satırı ile
 * ilk grup başlığı arasında hem ayırıcı çizgi hem 42px boşluk vardı; ikisi bir
 * arada panelin üstünü şişiriyordu. Grup başlıklarının kendi ayırıcı çizgisi
 * (.tta-group__rule) zaten bölümleri ayırıyor.
 */
.tta-results--intro:not(:empty) {
	margin-top: 16px;
}

/* İskelet (shimmer) */
/*
 * Shimmer: SICAK ve SAKİN. Griler markanın sıcak paletine çekildi (mavi-gri
 * yerine kum tonu) ve süre 1.4s -> 1.7s yapıldı; hızlı parlama "yükleniyor"
 * yerine "bir şey bozuk" hissi veriyordu.
 */
.tta-skel {
	display: block;
	border-radius: 8px;
	background: linear-gradient(90deg, #efe9e0 25%, #faf7f2 37%, #efe9e0 63%);
	background-size: 400% 100%;
	animation: tta-shimmer 1.7s ease-in-out infinite;
}

.tta-skel--label {
	width: 120px;
	height: 12px;
}

.tta-skel--img {
	width: 88px;
	height: 64px;
	border-radius: 12px;
	flex: 0 0 auto;
}

.tta-skel--line {
	height: 12px;
	margin-bottom: 8px;
	border-radius: 6px;
}

.tta-skel--short {
	width: 40%;
	margin-bottom: 0;
}

.tta-card--skel {
	pointer-events: none;
}

.tta-card--skel .tta-skel--line {
	width: 80%;
}

/* ============================================================
   3c. Açılış yükleniyor — iskeletten kartlara yumuşak geçiş
   ============================================================ */

/*
 * Panel açıldığında kartlar hazır değilse (indeks soğuk, sunucu kart basamamış)
 * bu iskelet görünür. Amaç boş beyaz alan yerine gelecek düzenin habercisini
 * göstermek: panel yüksekliği baştan doğru oturur, kartlar gelince zıplama
 * olmaz. İskelet JS tarafından basılır (bkz. paintIntroSkeleton).
 */
.tta-results.is-loading {
	/* Sahte içeriğin gerçekten ayırt edilebilmesi için hafifçe geri çekilir. */
	opacity: 0.85;
}

.tta-results.is-loading .tta-group--skel {
	animation: tta-skel-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* İkinci grup biraz gecikmeli girer: tek blok halinde "patlamaz". */
.tta-results.is-loading .tta-group--skel:nth-child(2) {
	animation-delay: 0.07s;
}

@keyframes tta-skel-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * Gerçek kartlar geldiğinde KADEMELİ belirir (stagger). İskeletten kartlara
 * sert takas yerine kısa bir yerleşme hissi; "soft" istenen şey bu.
 *
 * `both` doldurma kipi şart: animasyon başlamadan önce de opacity 0 kalsın,
 * yoksa ilk karede kart tam görünür belirip sonra animasyona giriyor.
 */
.tta-results.is-fresh .tta-group {
	animation: tta-card-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.tta-results.is-fresh .tta-group:nth-child(2) {
	animation-delay: 0.08s;
}

.tta-results.is-fresh .tta-card {
	animation: tta-card-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.tta-results.is-fresh .tta-card:nth-child(2) {
	animation-delay: 0.05s;
}

.tta-results.is-fresh .tta-card:nth-child(3) {
	animation-delay: 0.1s;
}

@keyframes tta-card-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes tta-shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: 0 0;
	}
}

/* Yazım düzeltmesi bildirimi ("Şunu aradınız: Balkanlar"). */
.tta-fixed {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--tta-muted, #6b6259);
}

.tta-fixed strong {
	color: var(--tta-gold-700, #925232);
	font-weight: 700;
}

/* Yalnız ?tta_debug=1 ile görünür: hata ayrıntısı. */
.tta-debug {
	margin-top: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(179, 45, 46, 0.08);
	color: #8a2b2c;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	word-break: break-all;
}

/* ============================================================
   4b. Mobil (< 768px) — kırılıma özel kurallar
   ============================================================ */

@media (max-width: 767px) {
	/*
	 * MOBİLDE TAM EKRAN (madde 9). Bu, iki tur önceki "mobilde de ortalanmış
	 * pop-up olsun" kararını TERSİNE çevirir — son istek bu yönde.
	 * Dar ekranda yuvarlatılmış kutu, kullanılabilir alanın bir kısmını
	 * kenar boşluğuna harcıyordu.
	 */
	.tta-overlay {
		padding: 0;
		align-items: stretch;
	}

	.tta-panel {
		max-width: none;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		border-top: 0;
		box-shadow: none;
		/* Tam ekranda çentik alanı panelin kendi işi. */
		padding-top: env(safe-area-inset-top, 0px);
	}

	/*
	 * Madde 2: popüler arama çipleri tek SATIR. Sarmak yerine yatay kaydırılır;
	 * dört-beş çip iki satıra taşınca panelin üstü şişiyordu.
	 */
	.tta-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Kenarda kesilmeyi belli eden yumuşak maske. */
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
		mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
	}

	.tta-chips::-webkit-scrollbar {
		display: none;
	}

	/* Takvim pop-up'ı dar ekranda panel kenarına yapışmasın. */
	.tta-cal {
		left: 0;
		right: 0;
		max-width: none;
	}

	/* İletişim bloğu dikey: 68px madalyon + metin yan yana sığmıyor. */
	.tta-help {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.tta-help__art {
		width: 130px;
	}

	/*
	 * Madde 7: pop-up içindeki arama alanı DAHA İNCE (52px -> 46px).
	 * Dar ekranda panelin üst şeridi, altındaki listeden alan çalıyordu.
	 */
	.tta-field--panel {
		min-height: 46px;
		padding-left: 14px;
	}

	.tta-field--panel .tta-field__input {
		height: 36px;
	}

	.tta-panel__close {
		width: 38px;
		height: 38px;
	}

	/*
	 * Mobilde kopyala düğmesi YALNIZ İKON. Yazı da kalsa arama alanı 360px'lik
	 * ekranda yazılan kelimeyi gösteremeyecek kadar daralıyordu. Erişilebilir ad
	 * `aria-label`'da durduğu için ekran okuyucu için bir kayıp yok.
	 */
	.tta-panel__share {
		width: 36px;
		height: 36px;
		padding: 0;
		justify-content: center;
	}

	.tta-panel__share-txt {
		/* Görsel olarak gizle, erişilebilirlik ağacında bırak. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.tta-panel__head {
		padding: 8px 12px;
	}

	.tta-panel__body {
		padding: 14px 14px 24px;
	}

	/*
	 * Madde 6: KAPAK GÖRSELİ KARTIN TAM YÜKSEKLİĞİNİ KAPLAR.
	 *
	 * Kapak 88x64 sabitti ve `align-items: center` yüzünden kartın dikey
	 * ortasında küçük bir kare gibi duruyordu; altında ve üstünde boşluk
	 * kalıyordu. `stretch` ile kapak, metin bloğu ne kadar yüksekse o kadar
	 * uzar — üç satır meta olan kartta belirgin biçimde büyür.
	 */
	.tta-card__link {
		align-items: stretch;
		gap: 12px;
	}

	.tta-card__media {
		width: 104px;
		height: auto;
		/* Tek satırlık kartta da fotoğraf gibi dursun. */
		min-height: 88px;
		border-radius: 12px;
	}

	.tta-skel--img {
		width: 104px;
		min-height: 88px;
	}

	/*
	 * Madde 5: İLK AÇILIŞTA GRUP BAŞINA 2 KART.
	 *
	 * Arama YAPILMAMIŞ hâlde (intro) Umre ve Kültür ikişer kart gösterir; dar
	 * ekranda 3+7 kart panelin altını görünmez kılıyordu. Arama sonuçları
	 * [data-tta-state="results"] içinde olduğu için bu kuraldan ETKİLENMEZ —
	 * orada yine 3 kart görünür.
	 *
	 * CSS ile yapılıyor, JS ile değil: sunucunun bastığı kartlar da aynı kurala
	 * uyar, yani JS hiç çalışmasa bile mobil görünüm doğru kalır.
	 */
	.tta-results--intro .tta-cards .tta-card:nth-child(n + 3) {
		display: none;
	}
}

/* ============================================================
   5. Tablet (>= 768px)
   ============================================================ */

@media (min-width: 768px) {
	.tta-box {
		padding: 0;
		margin-left: auto;
		margin-right: auto;
	}

	.tta-overlay {
		padding: 6vh 24px 24px;
	}

	.tta-panel {
		width: 100%;
		max-width: 92vw;
		max-height: 86vh;
		max-height: 86dvh;
		margin: 0 auto;
		border-radius: 24px;
		box-shadow: 0 24px 64px -12px rgba(26, 23, 18, 0.38);
	}

	.tta-panel__head {
		padding: 14px 20px;
	}

	.tta-panel__body {
		padding: 22px 20px 26px;
	}

	/* 2 sütun grid, kapak üstte. */
	.tta-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	/* Kapak üstte, gövde altta. */
	.tta-card__link {
		display: block;
		padding: 8px 8px 0;
	}

	/*
	 * Kapak masaüstünde daha BASIK (madde 9): 1.36 yerine 1.6.
	 * Bu, cover ile dikeyde bir miktar kırpma demek — ama kart oranı modern
	 * duruyor ve kırpma tamamen kenarlardan, konudan değil (görseller manzara).
	 */
	.tta-card__media {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		border-radius: 14px;
	}

	.tta-card__body {
		padding: 12px 12px 14px;
	}

	/* İskelet kapağı da gerçek kapakla aynı orana geçsin. */
	.tta-skel--img {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		border-radius: 14px;
	}

	.tta-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 28px -10px rgba(26, 23, 18, 0.3);
	}

	/* Grid içinde şerit maskesi gerekmiyor. */
	.tta-months__list {
		flex-wrap: wrap;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* Aspect-ratio desteklemeyen tarayıcılar için yedek yükseklik. */
@supports not (aspect-ratio: 16 / 10) {
	@media (min-width: 768px) {
		.tta-card__media {
			height: 158px;
		}
	}
}

/* ============================================================
   6. Masaüstü (>= 992px)
   ============================================================ */

@media (min-width: 992px) {
	/* Masaüstünde de düşük kutu (madde 3): 64px yerine 52px. */
	.tta-field {
		min-height: 52px;
		padding-left: 26px;
	}

	.tta-field__input {
		height: 44px;
		font-size: 16px;
	}

	.tta-field__submit {
		height: 44px;
		padding: 0 28px;
	}

	.tta-field__submit--icon {
		width: 44px;
		padding: 0;
	}

	.tta-field__submit svg {
		width: 20px;
		height: 20px;
	}

	.tta-overlay {
		padding-top: 8vh;
	}

	.tta-panel {
		max-width: 880px;
		max-height: 82vh;
		max-height: 82dvh;
	}

	.tta-panel__head {
		padding: 16px 24px;
	}

	.tta-panel__body {
		padding: 24px;
	}

	.tta-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.tta-card__title {
		font-size: 15px;
	}
}

@media (min-width: 1400px) {
	.tta-panel {
		max-width: 960px;
	}
}

/* Yatay telefon: dikey alan çok kısıtlı. */
@media (max-height: 520px) and (min-width: 768px) {
	.tta-overlay {
		padding-top: 3vh;
	}

	.tta-panel {
		max-height: 94vh;
		max-height: 94dvh;
	}

}

/* ============================================================
   7. Konteyner sorgusu — panel genişliğine tepki verir, viewport'a değil.
   Kutu dar bir kolona konduğunda da doğru davranması için.
   ============================================================ */

@supports (container-type: inline-size) {
	.tta-panel__body {
		container-type: inline-size;
		container-name: tta-panel;
	}

	@container tta-panel (min-width: 520px) {
		.tta-cards {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		/*
		 * Izgara iki sütuna geçtiğinde kart düzeni de dikeye geçmeli. Yalnız
		 * viewport'a bakan 768px media query'si yetmiyor: panel geniş ama viewport
		 * dar olduğunda (ör. 600px'te panel ~520px) sütunlar ikiye çıkıyor ama
		 * kart yatay satır kalıyordu.
		 */
		.tta-card__link {
			display: block;
			padding: 8px 8px 0;
		}

		.tta-card__media {
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 10;
			border-radius: 14px;
		}

		.tta-card__body {
			padding: 12px 12px 14px;
		}
	}

	@container tta-panel (min-width: 760px) {
		.tta-cards {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
}


@media (prefers-contrast: more) {
	.tta-field,
	.tta-chip {
		border-color: var(--tta-ink, #1a1712);
	}

	.tta-card__meta,
	.tta-state__label,
	.tta-group__title {
		color: #4a433b;
	}

	.tta-overlay__scrim {
		background: rgba(20, 16, 11, 0.9);
	}
}

/* Katman açıkken sayfa kaydırması kilitli. */
html.tta-locked,
html.tta-locked body {
	overflow: hidden !important;
}