/*
 * Tasarım token'ları.
 *
 * Gece/gündüz üç durumludur:
 *   1. :root                       → gündüz paleti (varsayılan)
 *   2. prefers-color-scheme: dark  → kullanıcı seçim yapmadıysa sistem takip edilir
 *   3. [data-tema="koyu"/"acik"]   → kullanıcının açık seçimi her ikisini de yener
 *
 * Hiçbir rengin TEK tanımı medya sorgusu içinde olmaz; aksi hâlde
 * tema değiştirme düğmesi yarım çalışır.
 */

:root {
	/* ---- Marka ---- */
	--ts-lacivert: #12294B;
	--ts-lacivert-koyu: #0B1B33;
	--ts-lacivert-acik: #1E3D6B;
	--ts-turuncu: #FF6A13;
	--ts-turuncu-koyu: #E25405;

	/* ---- Anlamsal yüzeyler (gündüz) ---- */
	--ts-zemin: #FFFFFF;
	--ts-zemin-alt: #F4F7FB;
	--ts-yuzey: #FFFFFF;
	--ts-yuzey-vurgu: #F0F4FA;
	--ts-kenar: #D9E1EC;
	--ts-kenar-guclu: #B9C6D8;

	/* ---- Metin (gündüz) ---- */
	--ts-metin: #12181F;
	--ts-metin-yumusak: #4A5768;
	--ts-metin-silik: #6E7C8F;
	--ts-metin-ters: #FFFFFF;

	/* ---- Aksiyon ---- */
	--ts-aksiyon: var(--ts-turuncu);
	--ts-aksiyon-uzeri: var(--ts-turuncu-koyu);
	/* Birincil düğme yazısı beyazken turuncu üzerinde 2,87:1 ölçüldü:
	   4,5:1 eşiğinin altında ("Yeni fiş", "Fişi kaydet" — uygulamanın
	   en çok basılan iki düğmesi, sitede de birincil çağrı düğmeleri).
	   WhatsApp yeşilinde uygulanan kuralın aynısı burada da geçerli:
	   marka turuncusu KORUNUR, yazı koyulaşır. #12181F / #FF6A13 =
	   6,23:1, basılı hâl #12181F / #E25405 = 4,68:1 (ikisi de ölçüldü).
	   Koyu tema zaten kendi --ts-aksiyon-metin'ini ayrı tanımlıyor
	   (#14100C, 7,52:1); özgüllük sebebiyle bu satır ona dokunmaz. */
	--ts-aksiyon-metin: #12181F;
	/* WhatsApp yeşili koyulaştırıldı: markanın kendi #1DA851 tonu beyaz
	   metinle 3,1:1 kontrast veriyor ve WCAG'ın 4,5:1 eşiğini geçmiyordu.
	   #12803D aynı yeşil ailede kalıp 5,0:1 veriyor. Düğme sitedeki iki
	   birincil eylemden biri; okunmaması doğrudan çağrı kaybı. */
	--ts-whatsapp: #12803D;
	--ts-whatsapp-uzeri: #0F7538;

	/* ---- Odak halkası (klavye erişilebilirliği) ---- */
	/* .girdi:focus'un halkası --ts-yuzey-vurgu ile beyaz üzerinde
	   1,10:1 ölçüldü — görünmez. Kenarın turuncuya dönmesi de
	   yetmiyor: 2,87:1 beyazda, 2,67:1 --ts-zemin-alt'ta, ikisi de
	   WCAG 1.4.11'in istediği 3:1'in altında. --ts-lacivert beyazda
	   14,54:1, zemin-altta 13,53:1 (ölçüldü) — odak rengi gündüzde
	   lacivert olur. */
	--ts-odak: var(--ts-lacivert);

	/* ---- Durum ---- */
	--ts-basari: #12805A;
	--ts-uyari: #B45309;
	--ts-tehlike: #C0261C;
	--ts-tehlike-zemin: #FDECEA;

	/* ---- LCD paneli: imza öğesi ---- */
	--ts-lcd-zemin: #0C1017;
	--ts-lcd-metin: #FF8A3D;
	--ts-lcd-silik: #6B4A32;
	--ts-lcd-parilti: rgba(255, 138, 61, 0.28);

	/* ---- Tipografi ---- */
	--ts-yazi: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ts-yazi-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

	/* Akışkan ölçek — mobilde sıkışır, masaüstünde açılır. */
	--ts-fs-xs: 0.75rem;
	--ts-fs-sm: 0.875rem;
	--ts-fs-md: 1rem;
	--ts-fs-lg: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
	--ts-fs-xl: clamp(1.375rem, 1.2vw + 1.05rem, 1.75rem);
	--ts-fs-2xl: clamp(1.75rem, 2.4vw + 1.15rem, 2.5rem);
	--ts-fs-3xl: clamp(2.125rem, 4vw + 1.1rem, 3.5rem);

	--ts-satir-siki: 1.15;
	--ts-satir: 1.6;
	--ts-aralik-siki: -0.02em;

	/* ---- Boşluk: 8px tabanı ---- */
	--ts-b1: 0.5rem;
	--ts-b2: 1rem;
	--ts-b3: 1.5rem;
	--ts-b4: 2rem;
	--ts-b5: 2.5rem;
	--ts-b6: 3rem;
	--ts-b8: 4rem;
	--ts-b10: 5rem;
	/* Bölüm ritmi. Ferah düzende boşluk, içerik kadar iş yapıyor: aynı
	   bölümler daha geniş nefesle ayrıldığında sayfa "az içerik" değil
	   "düzenli içerik" gibi okunuyor. Üst sınır 6rem'den 7.5rem'e çıktı. */
	--ts-bolum: clamp(3.5rem, 8vw, 7.5rem);

	/* ---- Biçim ---- */
	--ts-yaricap-sm: 6px;
	--ts-yaricap: 12px;
	--ts-yaricap-lg: 18px;
	--ts-golge-sm: 0 1px 2px rgba(18, 41, 75, 0.06);
	--ts-golge: 0 2px 4px rgba(18, 41, 75, 0.06), 0 8px 24px rgba(18, 41, 75, 0.09);
	--ts-golge-lg: 0 4px 8px rgba(18, 41, 75, 0.07), 0 16px 48px rgba(18, 41, 75, 0.14);

	/* ---- Hareket ---- */
	--ts-gecis: 180ms cubic-bezier(0.2, 0, 0.2, 1);
	--ts-gecis-yavas: 320ms cubic-bezier(0.2, 0, 0.2, 1);

	/* ---- Ölçü ---- */
	--ts-kapsayici: 1180px;
	--ts-okuma: 68ch;
	--ts-cubuk-yukseklik: 66px;

	color-scheme: light;
}

/* Sistem koyu tercih ediyorsa ve kullanıcı açıkça "açık" demediyse. */
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="acik"]) {
		--ts-zemin: #0B1220;
		--ts-zemin-alt: #0F1829;
		--ts-yuzey: #141F33;
		--ts-yuzey-vurgu: #1B2942;
		--ts-kenar: #24344F;
		--ts-kenar-guclu: #35496A;

		--ts-metin: #EEF3FA;
		--ts-metin-yumusak: #AFBECF;
		--ts-metin-silik: #8595AA;
		--ts-metin-ters: #0B1220;

		/* Koyu zeminde saf turuncu parlar; hafif yumuşatılır. */
		--ts-turuncu: #FF7F33;
		--ts-turuncu-koyu: #FF6A13;
		--ts-aksiyon-metin: #14100C;

		/* Koyuda lacivert zeminle neredeyse aynı tona düşer; odak
		   turuncuya döner: --ts-zemin üzerinde 7,44:1, --ts-yuzey
		   üzerinde 6,55:1, --ts-zemin-alt üzerinde 7,05:1 (ölçüldü). */
		--ts-odak: var(--ts-turuncu);

		--ts-basari: #34C48A;
		--ts-uyari: #E0A23C;
		--ts-tehlike: #FF6B5E;
		--ts-tehlike-zemin: #2A1512;

		--ts-golge-sm: 0 1px 2px rgba(4, 9, 18, 0.46);
		--ts-golge: 0 2px 4px rgba(4, 9, 18, 0.4), 0 8px 24px rgba(4, 9, 18, 0.5);
		--ts-golge-lg: 0 4px 8px rgba(4, 9, 18, 0.46), 0 16px 48px rgba(4, 9, 18, 0.6);

		color-scheme: dark;
	}
}

/* Kullanıcının açık seçimi her şeyi yener. */
:root[data-tema="koyu"] {
	--ts-zemin: #0B1220;
	--ts-zemin-alt: #0F1829;
	--ts-yuzey: #141F33;
	--ts-yuzey-vurgu: #1B2942;
	--ts-kenar: #24344F;
	--ts-kenar-guclu: #35496A;

	--ts-metin: #EEF3FA;
	--ts-metin-yumusak: #AFBECF;
	--ts-metin-silik: #8595AA;
	--ts-metin-ters: #0B1220;

	--ts-turuncu: #FF7F33;
	--ts-turuncu-koyu: #FF6A13;
	--ts-aksiyon-metin: #14100C;

	/* Koyuda lacivert zeminle neredeyse aynı tona düşer; odak
	   turuncuya döner: --ts-zemin üzerinde 7,44:1, --ts-yuzey
	   üzerinde 6,55:1, --ts-zemin-alt üzerinde 7,05:1 (ölçüldü). */
	--ts-odak: var(--ts-turuncu);

	--ts-basari: #34C48A;
	--ts-uyari: #E0A23C;
	--ts-tehlike: #FF6B5E;
	--ts-tehlike-zemin: #2A1512;

	--ts-golge-sm: 0 1px 2px rgba(4, 9, 18, 0.46);
	--ts-golge: 0 2px 4px rgba(4, 9, 18, 0.4), 0 8px 24px rgba(4, 9, 18, 0.5);
	--ts-golge-lg: 0 4px 8px rgba(4, 9, 18, 0.46), 0 16px 48px rgba(4, 9, 18, 0.6);

	color-scheme: dark;
}

:root[data-tema="acik"] {
	color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ts-gecis: 1ms;
		--ts-gecis-yavas: 1ms;
	}
}