/* =========================================================================
   TRIGON KREATİF — TASARIM TOKEN'LARI (TEK KAYNAK)
   CLAUDE.md §0/§1: palet child temada CSS değişkeni olarak, tek yerden.
   Renk kodu hiçbir bileşen dosyasına ELLE yazılmaz — daima var(--tk-*).
   Kaynak: Claude Design · "Trigon Kreatif.dc.html"
   ========================================================================= */

:root {
	/* --- Marka paleti (eski Elementor kit'inden, SABİT) --- */
	--tk-primary:        #FCBA04;  /* amber — CTA, vurgu, ikon zemini */
	--tk-ink:            #161615;  /* siyaha yakın — ana metin, koyu bölüm */
	--tk-gray:           #444444;  /* nötr gri — ikincil metin */

	/* --- Paletten türeyen yüzeyler --- */
	--tk-white:          #ffffff;
	--tk-surface:        #f6f5f3;  /* açık bölüm zemini */
	--tk-line:           #ececec;  /* kart kenarlığı */
	--tk-line-strong:    #e2e2e0;  /* form alanı kenarlığı */
	--tk-dim:            #888888;  /* footer telif, üstü-metin */
	--tk-dim-soft:       #999999;

	/* Koyu zemin üzeri */
	--tk-on-dark:        #ffffff;
	--tk-on-dark-muted:  #a8a8a5;
	--tk-on-dark-soft:   #cfcecb;
	--tk-on-dark-line:   rgba(255, 255, 255, .12);
	--tk-on-dark-fill:   rgba(255, 255, 255, .10);

	/* Amber şeffaflıkları */
	--tk-primary-wash:   rgba(252, 186, 4, .12);
	--tk-primary-edge:   rgba(252, 186, 4, .35);
	--tk-primary-glow:   rgba(252, 186, 4, .40);

	/* --- Tipografi --- */
	--tk-font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--tk-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Akışkan ölçek: mobilde küçülür, 1180px'te tasarımdaki değere oturur.
	   Tasarım referansı ikinci değerdir (74 / 60 / 46 / 36 px …). */
	--tk-fs-hero:    clamp(2.5rem, 1.30rem + 5.20vw, 4.625rem); /* 40 → 74 */
	--tk-fs-h1:      clamp(2.25rem, 1.45rem + 3.45vw, 3.75rem); /* 36 → 60 */
	--tk-fs-h2:      clamp(1.875rem, 1.35rem + 2.30vw, 2.875rem); /* 30 → 46 */
	--tk-fs-h2-sm:   clamp(1.625rem, 1.30rem + 1.44vw, 2.25rem); /* 26 → 36 */
	--tk-fs-h3:      1.375rem;  /* 22 */
	--tk-fs-h4:      1.25rem;   /* 20 */
	--tk-fs-lead:    1.1875rem; /* 19 */
	--tk-fs-body:    1.0625rem; /* 17 */
	--tk-fs-sm:      .9375rem;  /* 15 */
	--tk-fs-xs:      .875rem;   /* 14 */
	--tk-fs-eyebrow: .8125rem;  /* 13 */
	--tk-fs-label:   .75rem;    /* 12 */

	--tk-lh-tight:  1.05;
	--tk-lh-head:   1.1;
	--tk-lh-body:   1.6;
	--tk-lh-relax:  1.75;

	--tk-ls-hero:  -2px;
	--tk-ls-h1:    -1.6px;
	--tk-ls-h2:    -1.2px;
	--tk-ls-h3:    -.6px;
	--tk-ls-wide:   2.5px;  /* eyebrow */
	--tk-ls-label:  1.5px;

	/* --- Düzen --- */
	--tk-container:   1180px;
	--tk-gutter:      clamp(1.25rem, .55rem + 2.9vw, 2.5rem); /* 20 → 40 */
	--tk-section-y:   clamp(3.5rem, 2.2rem + 5.6vw, 6rem);    /* 56 → 96 */
	--tk-section-y-sm: clamp(3rem, 2.1rem + 3.9vw, 5rem);     /* 48 → 80 */

	/* --- Köşe yarıçapı --- */
	--tk-r-sm:   10px;  /* form alanı, buton */
	--tk-r-md:   12px;  /* ikon kutusu */
	--tk-r-lg:   16px;  /* kart */
	--tk-r-xl:   20px;  /* görsel çerçeve */
	--tk-r-2xl:  24px;  /* CTA bandı */
	--tk-r-pill: 999px;

	/* --- Gölge --- */
	--tk-shadow-card:  0 20px 44px rgba(0, 0, 0, .10);
	--tk-shadow-drop:  0 24px 50px rgba(0, 0, 0, .12);
	--tk-shadow-cta:   0 10px 24px var(--tk-primary-glow);

	/* --- Hareket --- */
	--tk-t-fast: .15s ease;
	--tk-t-med:  .2s ease;
	--tk-t-slow: .5s ease;

	--tk-header-h: 78px;
}

/* Hareket azaltma tercihi — erişilebilirlik. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--tk-t-fast: 0s;
		--tk-t-med:  0s;
		--tk-t-slow: 0s;
	}
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}