/*!
 * Elaf Turizm — MARKA İMZASI
 *
 * Bu dosya temayı "genel bir tur teması" olmaktan çıkarıp Elaf'a ait yapan
 * altı hamleyi taşır. Hepsi ölçülmüş bir marka verisine ya da kurumsal
 * afişteki bir biçime dayanıyor; hiçbiri süs olsun diye konmadı.
 *
 * Bağımlılık: layout.css
 *
 *   1. 63/37 çift renkli çizgi   — logonun mürekkep oranı
 *   2. Kubbe maskesi              — tokens.css'teki --e-r-dome
 *   3. Lale deseni                — logodaki lalenin soyutlaması
 *   4. Kavisli şerit ayracı       — kurumsal afişin beyaz şeridi
 *   5. Meridyen arkları           — afişin "dünya" fikri
 *   6. Amblem filigranı           — yer tutucu görsellerde
 */

/* ==== 1. 63/37 ÇİFT RENKLİ ÇİZGİ ====================================== */

/* Logonun piksel dağılımı: mavi %5.34, kırmızı %3.14 -> 63/37.
   Bu durak noktası sitenin her yerinde AYNI; tekrar edildikçe ritim kuruyor
   ve markanın kendi mürekkep oranı arayüze kodlanmış oluyor.
   Kırmızı hiçbir zaman metin taşımadığı için 4.39 kontrast sorunu doğmuyor. */
.e-cizgi {
	display: block;
	width: 72px; height: 4px;
	margin-top: var(--e-s-4);
	border-radius: 2px;
	background: var(--e-grad-rule);
}
.e-bolum__bas--orta .e-cizgi { margin-inline: auto; }

/* ==== 2. KUBBE MASKESİ ================================================ */

/* Logodaki lalenin ve mihrap kemerinin ortak silueti: sivri-yuvarlak üst,
   düz alt. Saf `border-radius`, ek görsel dosyası yok, sıfır ağırlık.
   Tanımı tokens.css'te (--e-r-dome); burada kullanım biçimleri.            */
.e-kubbe { border-radius: var(--e-r-dome); overflow: hidden; }
.e-kubbe--cerceve { border: 1.5px solid var(--e-blue-200); background: var(--e-blue-50); }

/* Süreç adımı rozeti */
.e-adim__no {
	display: grid; place-items: center;
	width: 56px; height: 62px;
	border-radius: var(--e-r-dome);
	background: var(--e-blue-600);
	color: #fff;
	font-family: var(--e-font-baslik);
	font-size: 24px; font-weight: 800;
	box-shadow: var(--e-shadow-brand);
}

/* ==== 3. LALE DESENİ ================================================== */

/* ~340 bayt, satır içi data-URI: HTTP isteği yok, önbellek derdi yok.
   `#` karakteri data-URI içinde %23 olarak yazılmak ZORUNDA, yoksa tarayıcı
   onu parça (fragment) başlangıcı sayıp deseni hiç çizmiyor.                */
.e-desen { position: relative; }
.e-desen::before {
	content: '';
	position: absolute; inset: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='112' viewBox='0 0 96 112'%3E%3Cpath d='M48 12c9 16 18 25 18 41 0 12.5-8.2 21-18 21s-18-8.5-18-21c0-16 9-25 18-41Z' fill='none' stroke='%230F75BD' stroke-width='1.5'/%3E%3Cpath d='M48 50c3.4 5.6 6.4 9.4 6.4 14.4 0 4.2-2.9 7.2-6.4 7.2s-6.4-3-6.4-7.2c0-5 3-8.8 6.4-14.4Z' fill='none' stroke='%23ED1B24' stroke-width='1.2'/%3E%3C/svg%3E");
	background-size: 96px 112px;
	opacity: .07;
}
/* Koyu zeminde desen beyaza döner ve biraz daha görünür olur. */
.e-bolum--koyu.e-desen::before, .e-footer.e-desen::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='112' viewBox='0 0 96 112'%3E%3Cpath d='M48 12c9 16 18 25 18 41 0 12.5-8.2 21-18 21s-18-8.5-18-21c0-16 9-25 18-41Z' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3Cpath d='M48 50c3.4 5.6 6.4 9.4 6.4 14.4 0 4.2-2.9 7.2-6.4 7.2s-6.4-3-6.4-7.2c0-5 3-8.8 6.4-14.4Z' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E");
	opacity: .085;
}
/* Hero'da tek büyük filigran — döşeme değil. */
.e-desen--iri::before { background-size: 288px 336px; opacity: .10; }

/* ==== 4. KAVİSLİ ŞERİT AYRACI ========================================= */

/* Kurumsal afişin alt beyaz şeridi. Simetrik "wave divider" klişesi DEĞİL:
   tek yönlü, asimetrik bir süpürme.
   `preserveAspectRatio="none"` her genişlikte kenara yapıştırıyor;
   `margin-bottom:-1px` alt kenardaki yarım piksel yarığını kapatıyor.       */
.e-serit {
	display: block; width: 100%;
	height: clamp(44px, 5vw, 96px);
	margin-bottom: -1px;
	position: relative; z-index: 2;
}
.e-serit--ters { margin-bottom: 0; margin-top: -1px; }

/* ==== 5. MERİDYEN ARKLARI ============================================= */

/* Afişteki "dünya" fikrinin arka plan karşılığı: çok soluk boylam/enlem
   yayları. Saf CSS radial-gradient, sıfır varlık dosyası.                  */
.e-meridyen {
	position: absolute; inset: 0;
	pointer-events: none;
	opacity: .16;
	background:
		radial-gradient(ellipse 120% 140% at 50% 50%, transparent 47%, var(--e-blue-300) 47.4%, transparent 48%),
		radial-gradient(ellipse 66% 140% at 50% 50%, transparent 47%, var(--e-blue-300) 47.4%, transparent 48%),
		linear-gradient(var(--e-blue-300), var(--e-blue-300)) 0 32% / 100% 1px no-repeat,
		linear-gradient(var(--e-blue-300), var(--e-blue-300)) 0 68% / 100% 1px no-repeat;
}

/* ==== 6. AMBLEM FİLİGRANI ============================================= */

/* Fotoğrafı olmayan görsel yuvalarında. `.e-ph` kabı components.css'te. */
.e-ph::before {
	content: '';
	position: absolute; inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='112' viewBox='0 0 96 112'%3E%3Cpath d='M48 12c9 16 18 25 18 41 0 12.5-8.2 21-18 21s-18-8.5-18-21c0-16 9-25 18-41Z' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");
	background-size: 96px 112px;
	opacity: .16;
}
.e-ph::after {
	content: '';
	position: absolute; inset: 0;
	background: url('../img/amblem-mono.svg') center / 38% no-repeat;
	opacity: .13;
	/* amblem-mono currentColor kullanıyor; img olarak yüklenince siyah gelir,
	   beyaza çevirmek için filtre.                                          */
	filter: brightness(0) invert(1);
}