/**
 * Eloria — Design tokens (spec §2)
 *
 * Renk ve tipografi tek kaynaktan gelir. Bölüm CSS'lerinde hardcoded hex
 * ya da font-family bulunmaz; yalnızca layout/spacing/positioning yazılır.
 */

:root {
	/* §2.1 — 8 global renk */
	--sl-ink: #191614;
	--sl-ash: #6e655b;
	--sl-text: #332e29;
	/* Aksan — proje kararı: spec §2.1'deki terracotta #C2653D yerine. */
	--sl-ember: #ec1166;
	/*
	 * Zemin ailesi — proje kararı: spec §2.1'deki sıcak ivory (#FAF8F4 /
	 * #EFE9E0 / #DDD5C9) yerine beyaz + nötr gri tonları.
	 */
	--sl-base: #ffffff;
	--sl-band: #f8f8f8;        /* alternatif bölüm bandı */
	--sl-band-deep: #f1f1f1;   /* aynı ailenin bir tık koyusu — footer, panel */
	--sl-line: #e6e6e6;        /* 1px ayraçlar, kart kenarı */
	--sl-ember-soft: #fde7f0;  /* %10 aksan tinti (#ec1166 üzerine beyaz) */

	/* §2.2 — tipografi aileleri (Display: spec'teki Fraunces yerine Playfair) */
	--sl-font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
	--sl-font-body: "Jost", "Avenir Next", system-ui, -apple-system, sans-serif;

	/* §2.3 — spacing ölçeği (6 adım) */
	--sl-space-1: 8px;
	--sl-space-2: 16px;
	--sl-space-3: 24px;
	--sl-space-4: 40px;
	--sl-space-5: 64px;
	--sl-space-6: 96px;
	--sl-space-7: 140px;

	/* §2.3 — konteynerler */
	--sl-container: 1240px;
	--sl-container-wide: 1440px;
	--sl-container-narrow: 720px;
	--sl-gap-card: 24px;
	--sl-gap-col: 40px;
	--sl-section-y: var(--sl-space-6);

	/* §2.4 — şekil dili */
	--sl-radius: 4px;
	--sl-arch: 50vw 50vw var(--sl-radius) var(--sl-radius);

	/* §2.5 — motion */
	--sl-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sl-reveal-duration: 800ms;
	--sl-image-duration: 600ms;
	--sl-link-duration: 300ms;
	/*
	 * Sayfa geçişi. Çıkış süresi main.js'teki FADE_MS ile aynı olmalı.
	 *
	 * Eğri, süreden daha belirleyici: sitenin genel `--sl-ease` değeri
	 * (0.22, 1, 0.36, 1) hızlı biten bir out-expo — sönmeye uygulanınca
	 * opaklık ilk çeyrekte %24'e iniyor, sayfa "kapanıyor" gibi duruyor.
	 * Buradaki eğriler ortadan yumuşak geçiyor: aynı anda %85 opaklık.
	 * Giriş çıkıştan uzun, çünkü belirme aceleci olduğunda göze çarpıyor.
	 */
	--sl-page-fade-out: 500ms;
	--sl-page-fade-in: 700ms;
	--sl-page-ease-leave: cubic-bezier(0.45, 0, 0.35, 1);
	--sl-page-ease-enter: cubic-bezier(0.25, 0.5, 0.3, 1);
}

@media (max-width: 782px) {
	:root {
		--sl-section-y: 56px;
	}
}

/* Tipografi ölçeği — §2.2 */
.sl-h1,
h1 {
	font-family: var(--sl-font-display);
	font-size: clamp(2.6rem, 5vw, 5rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.sl-h2,
h2 {
	font-family: var(--sl-font-display);
	font-size: clamp(2rem, 3.4vw, 3.2rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

h3 {
	font-family: var(--sl-font-display);
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.2;
}

h4 {
	font-family: var(--sl-font-display);
	font-size: 1.25rem;
	font-weight: 400;
}

h5 {
	font-family: var(--sl-font-display);
	font-size: 1rem;
	font-weight: 500;
}

h6 {
	font-family: var(--sl-font-body);
	font-size: 0.8rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

/* §2.2 — imza hamlesi: başlık içinde italik serif vurgu */
.sl-h1 em,
.sl-h2 em,
h1 em,
h2 em,
h3 em {
	font-style: italic;
	/* Playfair Display 300 taşımıyor — sentetik incelme olmasın diye 400. */
	font-weight: 400;
	color: var(--sl-ember);
}

/* Eyebrow ve meta — §2.2 */
.sl-eyebrow {
	font-family: var(--sl-font-body);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.28em;
	color: var(--sl-ash);
	margin: 0 0 var(--sl-space-2);
	display: block;
}

.sl-meta {
	font-family: var(--sl-font-body);
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--sl-ash);
}

/* §2.4 — kategori etiketi: kutu değil, üstte 2px aksan çizgisi */
.sl-cat {
	font-family: var(--sl-font-body);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--sl-ember);
	border-top: 2px solid currentColor;
	padding-top: 6px;
	display: inline-block;
	text-decoration: none;
}

.sl-cat:hover,
.sl-cat:focus {
	color: var(--sl-ink);
}

/* Ortak yardımcılar */
.sl-container {
	width: 100%;
	max-width: var(--sl-container);
	margin-inline: auto;
	padding-inline: var(--sl-space-3);
}

.sl-container--wide {
	max-width: var(--sl-container-wide);
}

.sl-container--narrow {
	max-width: var(--sl-container-narrow);
}

.sl-section {
	padding-block: var(--sl-section-y);
}

.sl-section--band {
	background-color: var(--sl-band);
}

.sl-section--band-deep {
	background-color: var(--sl-band-deep);
}

.sl-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sl-gap-col);
	margin-bottom: var(--sl-space-4);
	padding-bottom: var(--sl-space-3);
	border-bottom: 1px solid var(--sl-line);
}

.sl-section__title {
	margin: 0;
}

.sl-section__link {
	font-family: var(--sl-font-body);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--sl-ink);
	white-space: nowrap;
	text-decoration: none;
}

@media (max-width: 600px) {
	.sl-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sl-space-2);
	}
}

/* §2.5 — link hover: alt çizgi soldan çizilir */
.sl-underline {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--sl-link-duration) var(--sl-ease);
	text-decoration: none;
}

.sl-underline:hover,
.sl-underline:focus-visible {
	background-size: 100% 1px;
}

/* §2.4 — görsel kapsayıcı + hover zoom */
.sl-media {
	display: block;
	overflow: hidden;
	border-radius: var(--sl-radius);
	/* Gri bantların üstünde de görünsün diye bir ton koyu. */
	background-color: var(--sl-band-deep);
}

/*
 * Elementor'un kendi `.elementor img { height: auto; }` sıfırlaması aynı
 * özgüllükte (.elementor img) — o zaman kazanır ve kutuyu doldurmaz.
 * `.elementor .sl-media img` ekleyerek widget bağlamında özgüllüğü artırırız.
 */
.sl-media img,
.elementor .sl-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sl-image-duration) ease-out;
}

.sl-media--arch {
	border-radius: var(--sl-arch);
}

.sl-media--arch img {
	border-radius: inherit;
}

a:hover .sl-media img,
.sl-media:hover img,
.sl-zoom:hover .sl-media img {
	transform: scale(1.04);
}

.sl-ratio-16-9 { aspect-ratio: 16 / 9; }
.sl-ratio-4-3  { aspect-ratio: 4 / 3; }
.sl-ratio-1-1  { aspect-ratio: 1 / 1; }
.sl-ratio-3-4  { aspect-ratio: 3 / 4; }

/* Butonlar — §2.4: gölge ve gradient yok */
.sl-btn {
	display: inline-block;
	font-family: var(--sl-font-body);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	padding: 14px 28px;
	border: 1px solid var(--sl-ink);
	border-radius: var(--sl-radius);
	background-color: var(--sl-ink);
	color: var(--sl-base);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--sl-link-duration) ease,
		color var(--sl-link-duration) ease,
		border-color var(--sl-link-duration) ease;
}

.sl-btn:hover,
.sl-btn:focus-visible {
	background-color: var(--sl-ember);
	border-color: var(--sl-ember);
	color: var(--sl-base);
}

.sl-btn--outline {
	background-color: transparent;
	color: var(--sl-ink);
}

.sl-btn--accent {
	background-color: var(--sl-ember);
	border-color: var(--sl-ember);
}

.sl-btn--accent:hover,
.sl-btn--accent:focus-visible {
	background-color: var(--sl-ink);
	border-color: var(--sl-ink);
}

/* §2.5 — scroll reveal */
.sl-reveal {
	opacity: 0;
	transform: translateY(24px);
}

.sl-reveal.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity var(--sl-reveal-duration) var(--sl-ease),
		transform var(--sl-reveal-duration) var(--sl-ease);
}

/* JS yoksa içerik gizli kalmasın */
.no-js .sl-reveal,
/* Elementor editöründe de gizli kalmasın — orada efekt tamamen kapalı. */
.sl-no-reveal .sl-reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.sl-reveal {
		opacity: 1;
		transform: none;
	}
}

/*
 * Form bal küpü — gerçek ziyaretçi görmez, bot doldurur
 * (includes/newsletter/handler.php).
 */
.sl-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------ Koyu bölüm */

/*
 * `.sl-dark` bir bölümü koyu zemine çevirir. Tek tek kural ezmek yerine
 * token'ları o kapsam içinde yeniden tanımlar: bütün bileşenler renklerini
 * zaten bu değişkenlerden okuduğu için footer, kapanış bandı ya da herhangi
 * bir Elementor bölümü sınıfı alır almaz doğru renklere geçer.
 *
 * Aksan (--sl-ember) değişmez; koyu zeminde de okunur. --sl-base koyulaşır
 * çünkü "zemin rengi" anlamını taşır: beyaz/aksan butonların üstündeki metin
 * ondan gelir ve koyu kalmalıdır.
 */
.sl-dark {
	--sl-ink: #ffffff;
	--sl-text: rgba(255, 255, 255, 0.82);
	--sl-ash: rgba(255, 255, 255, 0.58);
	--sl-line: rgba(255, 255, 255, 0.16);
	--sl-base: #0f0d0c;
	--sl-band: #171413;
	--sl-band-deep: #1f1b19;
	/*
	 * Aksan bir tık açılır: #ec1166 siyah zeminde 4.47:1 veriyor, 11px'lik
	 * kolon başlıkları için AA sınırının (4.5) hemen altında. Açık ton aynı
	 * hue'da kalıp 5.8:1'e çıkıyor.
	 */
	--sl-ember: #ff3d85;
	--sl-ember-soft: rgba(255, 61, 133, 0.18);

	/*
	 * Elementor, widget kontrollerinin global varsayılanlarından kendi renk
	 * kurallarını basıyor (ör. `.elementor-widget-sl-link-list .sl-links__list a
	 * { color: var(--e-global-color-primary) }`) ve o seçici bizimkinden daha
	 * özgül. Kuralları ezmek yerine dayandıkları değişkenleri bu kapsamda
	 * yeniden tanımlıyoruz — Kit'in kendisi değişmiyor, yalnızca koyu bölümün
	 * içinde başka değer okuyor. Aksan (accent) sabit: koyu zeminde de okunur.
	 */
	--e-global-color-primary: #ffffff;
	--e-global-color-secondary: rgba(255, 255, 255, 0.58);
	--e-global-color-text: rgba(255, 255, 255, 0.82);
	--e-global-color-accent: #ff3d85;

	color: var(--sl-text);
}

/* Başlıklar ve bağlantılar mürekkep token'ından geldiği için beyaza döner. */
.sl-dark h1,
.sl-dark h2,
.sl-dark h3,
.sl-dark h4,
.sl-dark h5,
.sl-dark h6,
.sl-dark a {
	color: var(--sl-ink);
}

.sl-dark a:hover,
.sl-dark a:focus-visible {
	color: var(--sl-ember);
}

/* Form denetimleri: tarayıcının açık tema varsayımını kırar. */
.sl-dark input,
.sl-dark textarea,
.sl-dark select {
	color: var(--sl-ink);
	color-scheme: dark;
}

.sl-dark input[type="checkbox"],
.sl-dark input[type="radio"] {
	accent-color: var(--sl-ember);
}

/* Ayraçlar koyu zeminde ince kalmalı; token yeter ama opaklık kontrolü burada. */
.sl-dark hr {
	border-color: var(--sl-line);
}