/*
 * Serka - temel katman.
 *
 * TEK KAYNAK: hicbir tasarim degeri burada TANIMLANMAZ. Ham degerler
 * theme.json -> settings.custom altindadir; bu dosya yalnizca
 *   (a) koyu/acik mod anahtarini,
 *   (b) parity lock'un kisa isimlerine alias'i,
 *   (c) atomlardan turetilmis bilesik olculeri
 * tasir.
 *
 * Katman: tum tema stilleri `@layer serka` icindedir. Elementor'un katmansiz
 * CSS'i bu katmani yener - hibrit temanin delegasyon semantigi tam olarak budur.
 *
 * RTL: `style-rtl.css` YOKTUR. Yalniz logical properties kullanilir.
 *
 * ------------------------------------------------------------------
 * TOKEN NOTLARI (22.07.2026'da theme.json'dan BURAYA tasindi - orada
 * `settings.custom.comment` ve `settings.custom.brandComment` anahtarlariydi
 * ve WP onlari HER SAYFAYA `--wp--custom--comment` / `--wp--custom--brand-comment`
 * CSS degiskeni olarak basiyordu: ~1,2 KB olu satir-ici yuk. theme.json'da
 * yorum sozdizimi yok; dogru yer bu dosyadir.)
 *
 * TASARIM TOKENLERININ TEK KAYNAGI theme.json -> settings.custom'dur.
 * Parity lock: serka-design-system.md 121-143 (olculdu 21.07.2026,
 * serka-cine/skin.css:5-11 == chrome.css:10-16). Degerler orada ATOMIKTIR;
 * bilesik CSS ifadeleri bu dosyada o atomlardan turetilir. Anahtarlar bilerek
 * RAKAMSIZ camelCase: WP'nin kebab cevrimi harf-rakam sinirinda belirsizdir,
 * goldSoft -> gold-soft ise kesindir.
 *
 * Marka renkleri: whatsapp/signal parity lock sozlesmesinden gelir
 * (serka-design-system.md:127). telegram degeri marka-renk derlemelerinden alindi;
 * telegram.org kendi basin kitinden DOGRULANMADI (dogrulanmali).
 * wechat degerinin kaynagi wechat.design (arama 21.07.2026). viber ve imo icin
 * resmi deger DOGRULANAMADI: token yazilmadi, o kanallar altin cerceveye duser.
 * Degerlerin kendisi theme.json -> settings.custom.brand altindadir; bu dosyada
 * ve hicbir CSS dosyasinda renk degeri YAZILMAZ.
 */

@layer serka {

	/* ---------------------------------------------------------------
	 * 1) Mod anahtari + alias
	 * ------------------------------------------------------------ */

	:root {
		--bg:      var(--wp--custom--dark--bg);
		--bg2:     var(--wp--custom--dark--bg-deep);
		--text:    var(--wp--custom--dark--text);
		--muted:   var(--wp--custom--dark--muted);
		--gold:    var(--wp--custom--dark--gold);
		--gold-2:  var(--wp--custom--dark--gold-soft);
		--gold-3:  var(--wp--custom--dark--gold-deep);
		--line:    var(--wp--custom--dark--line);
		--glass:   var(--wp--custom--dark--glass);
		--glass-2: var(--wp--custom--dark--glass-soft);

		--wa:  var(--wp--custom--brand--whatsapp);
		--sig: var(--wp--custom--brand--signal);
		--tg:  var(--wp--custom--brand--telegram);
		--wx:  var(--wp--custom--brand--wechat);

		/* Turetilmis olculer - atomlar theme.json'da */
		--wrap: min(
			var(--wp--custom--wrap--max),
			calc(100% - 2 * var(--wp--custom--wrap--gutter))
		);
		--measure: var(--wp--custom--wrap--measure);

		--chrome-top: var(--wp--custom--chrome--offset-top);
		--cta-h:      var(--wp--custom--chrome--ctabar);
		--cta-gap:    var(--wp--custom--chrome--ctabar-gap);
		--cta-max:    var(--wp--custom--chrome--ctabar-max);
		--cta-radius: var(--wp--custom--chrome--ctabar-radius);

		/* Fallback bilerek yazildi: cok degerli box-shadow dizesinin theme.json
		   uzerinden bozulmadan gectigi dogrulanmadi (dogrulanmali). */
		--cta-shadow: var(
			--wp--custom--dark--dock-shadow,
			0 18px 48px -26px rgba(0, 0, 0, .82), 0 1px 0 rgba(255, 255, 255, .05) inset
		);

		/* Fallback bilerek yazildi: theme.json string degerlerinde CSS fonksiyon
		   beyaz listesi dogrulanmadi (dogrulanmali). Fallback ile risk sifir. */
		--ease: var(--wp--custom--motion--easing, cubic-bezier(.22, 1, .36, 1));
		--dur-fast: var(--wp--custom--motion--fast, 180ms);
		--dur-base: var(--wp--custom--motion--base, 320ms);
		--dur-slow: var(--wp--custom--motion--slow, 620ms);

		/* Yazi tipi ve orgu tonlari - KAYNAK theme.json (23.07.2026: cine/*.css
		   bunlari kendi :root'unda TEKRAR tanimliyordu, tek kaynaga alindi). */
		--sans:     var(--wp--custom--font--sans);
		--serif:    var(--wp--custom--font--serif);
		--sec-veil: var(--wp--custom--dark--sec-veil);

		/* Marka gradyan tonlari - dock/buton gradyanlarinda kullanilir. */
		--wa-1: var(--wp--custom--brand--whatsapp-light);
		--wa-2: var(--wp--custom--brand--whatsapp-deep);
		--wa-ink: var(--wp--custom--brand--whatsapp-ink);
		--sig-1: var(--wp--custom--brand--signal-light);
		--sig-2: var(--wp--custom--brand--signal-deep);

		/* Tipografi olcegi - TEK KAYNAK theme.json settings.typography.fontSizes.
		   Akiskan (clamp): buyuk ekranda bile baslik tasmaz, kucukte okunur kalir.
		   CSS'te sabit px yazilmaz; bu alias'lar kullanilir. */
		--fs-xs:   var(--wp--preset--font-size--xs);
		--fs-sm:   var(--wp--preset--font-size--sm);
		--fs-base: var(--wp--preset--font-size--base);
		--fs-md:   var(--wp--preset--font-size--md);
		--fs-lg:   var(--wp--preset--font-size--lg);
		--fs-xl:   var(--wp--preset--font-size--xl);
		--fs-xxl:  var(--wp--preset--font-size--xxl);

		/* Bilesen puntolari - KAYNAK theme.json settings.custom.fs (23.07.2026).
		   Bunlar akiskan olcegin KADEMESI DEGILDIR: eski deri (cine/*) ve
		   bilesenlerin bugun kullandigi sabit puntolarin envanteridir. Olcege
		   kademe eklemek editordeki punto seciciyi kirletirdi; bu yuzden ayri
		   grupta duruyorlar. CSS'te sabit punto YAZILMAZ, bu alias'lar kullanilir;
		   tipografiyi degistirmek artik tek dosyada (theme.json) tek satirdir. */
		--fs-micro:      var(--wp--custom--fs--micro);
		--fs-micro-lg:   var(--wp--custom--fs--micro-lg);
		--fs-nano:       var(--wp--custom--fs--nano);
		--fs-nano-lg:    var(--wp--custom--fs--nano-lg);
		--fs-tiny:       var(--wp--custom--fs--tiny);
		--fs-tiny-lg:    var(--wp--custom--fs--tiny-lg);
		--fs-mini:       var(--wp--custom--fs--mini);
		--fs-small:      var(--wp--custom--fs--small);
		--fs-small-lg:   var(--wp--custom--fs--small-lg);
		--fs-small-x:    var(--wp--custom--fs--small-x);
		--fs-compact:    var(--wp--custom--fs--compact);
		--fs-compact-lg: var(--wp--custom--fs--compact-lg);
		--fs-control:    var(--wp--custom--fs--control);
		--fs-note:       var(--wp--custom--fs--note);
		--fs-note-lg:    var(--wp--custom--fs--note-lg);
		--fs-body-sm:    var(--wp--custom--fs--body-sm);
		--fs-body-lead:  var(--wp--custom--fs--body-lead);
		--fs-dock:       var(--wp--custom--fs--dock);
		--fs-card-title: var(--wp--custom--fs--card-title);
		--fs-text:       var(--wp--custom--fs--text);
		--fs-brand:      var(--wp--custom--fs--brand);
		--fs-drawer:     var(--wp--custom--fs--drawer);
		--fs-lead-lg:    var(--wp--custom--fs--lead-lg);
		--fs-prose:      var(--wp--custom--fs--prose);
		--fs-feature:    var(--wp--custom--fs--feature);
		--fs-section:    var(--wp--custom--fs--section);
		--fs-badge:      var(--wp--custom--fs--badge);
		--fs-stat:       var(--wp--custom--fs--stat);
		--fs-hero-sm:    var(--wp--custom--fs--hero-sm);
		--fs-num-tag-lg: var(--wp--custom--fs--num-tag-lg);
		--fs-num-tag:    var(--wp--custom--fs--num-tag);
		--fs-byline:     var(--wp--custom--fs--byline);
		--fs-rel-sm:     var(--wp--custom--fs--rel-sm);
		--fs-watermark:  var(--wp--custom--fs--watermark);
		--fs-foot-mark:  var(--wp--custom--fs--foot-mark);
		--fs-hero:       var(--wp--custom--fs--hero);
		--fs-section-fluid: var(--wp--custom--fs--section-fluid);
		--fs-page-title: var(--wp--custom--fs--page-title);
		--fs-canon:      var(--wp--custom--fs--canon);
		--fs-blog-title: var(--wp--custom--fs--blog-title);
		--fs-blog-lead:  var(--wp--custom--fs--blog-lead);
		--fs-blog-mark:  var(--wp--custom--fs--blog-mark);
		--fs-blog-head:  var(--wp--custom--fs--blog-head);

		/* Renk alias'lari - eski deride sabit yazilmis olan tonlar (23.07.2026). */
		--text-bright: var(--wp--custom--dark--text-bright);
		--gold-warm:   var(--wp--custom--dark--gold-warm);
		--gold-bright: var(--wp--custom--dark--gold-bright);
		--gold-pale:   var(--wp--custom--dark--gold-pale);
		--gold-mid:    var(--wp--custom--dark--gold-mid);
		--gold-ink:    var(--wp--custom--dark--gold-ink);
		--on-gold:     var(--wp--custom--light--on-gold);
		--text-deep:   var(--wp--custom--light--text-deep);
		--sig-ink:     var(--wp--custom--brand--signal-ink);
		--surface-map: var(--wp--custom--surface--map);

		/* ESKI AD KOPRUSU (23.07.2026). "Serka Article Template" adli Elementor
		   sablonu (post 29624, 34,6 KB ozel CSS) hala eski degisken adlarini
		   okuyor: var(--fg) 39, var(--card) 15, var(--gold-light) 9,
		   var(--gold-dim) 8 kez. Bu adlar hicbir yerde TANIMLI DEGILDI, o yuzden
		   sablon kendi sabit yedegine dusuyordu ve acik modda para
		   sayfalarinda metin gorunmez oluyordu: olculdu 149 metin ogesinin
		   110'unda kontrast 4.5 altinda, 94'u tek bir renkten. Adlar burada
		   TOKENA baglaniyor; deger uretilmiyor, mevcut token'a isaret ediliyor,
		   bu yuzden acik/koyu mod kendiliginden calisiyor.
		   Geri donus: bu blogu sil, sablon eski sabit yedegine doner. */
		--fg:         var(--text);
		--card:       var(--glass);
		--gold-light: var(--gold-2);
		--gold-dim:   color-mix(in srgb, var(--gold) 72%, var(--bg));

		/* Tipografik ince ayar - baslikta siki satir araligi ve hafif negatif izleme;
		   "sik" gorunumu buyuk punto degil BU ikisi kurar. */
		--lh-tight:     var(--wp--custom--type--lh-tight);
		--lh-lead:      var(--wp--custom--type--lh-lead);
		--lh-body:      var(--wp--custom--type--lh-body);
		--track-display:var(--wp--custom--type--track-display);
		--track-head:   var(--wp--custom--type--track-head);
		--track-wide:   var(--wp--custom--type--track-wide);
		--w-display:    var(--wp--custom--type--w-display);
		--w-head:       var(--wp--custom--type--w-head);
		--w-body:       var(--wp--custom--type--w-body);
		--w-strong:     var(--wp--custom--type--w-strong);

		--rtl-lh: 1;

		color-scheme: dark;
	}

	html.light {
		--bg:      var(--wp--custom--light--bg);
		--bg2:     var(--wp--custom--light--bg-deep);
		--text:    var(--wp--custom--light--text);
		--muted:   var(--wp--custom--light--muted);
		--gold:    var(--wp--custom--light--gold);
		--gold-2:  var(--wp--custom--light--gold-soft);
		--gold-3:  var(--wp--custom--light--gold-deep);
		--line:    var(--wp--custom--light--line);
		--glass:   var(--wp--custom--light--glass);
		--glass-2: var(--wp--custom--light--glass-soft);

		--cta-shadow: var(
			--wp--custom--light--dock-shadow,
			0 18px 44px -28px rgba(60, 44, 16, .5), 0 1px 0 rgba(255, 255, 255, .55) inset
		);

		color-scheme: light;
	}

	/* ---------------------------------------------------------------
	 * 2) Temel
	 * ------------------------------------------------------------ */

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

	/* `overflow-x: clip` (23.07.2026): sayfa govdesi YATAY KAYMAZ. Olculdu,
	   RTL (ar/fa/he) 390px: kapali yan menu fiziksel `right` ile park ettigi
	   icin RTL'de gorus alaninin disina tasiyor ve belge 8px yatay kayiyordu
	   (`scrollLeft` -8 olculdu). `hidden` degil `clip`: kaydirma kabi
	   uretmez, `position: sticky` calismaya devam eder; dikey eksen
	   `visible` kaldigi icin sayfa normal kayar. Kendi kabinda yatay kayan
	   bilesenler (`.serka-pf-tablewrap`) etkilenmez. */
	html {
		-webkit-text-size-adjust: 100%;
		scroll-behavior: smooth;
		overflow-x: clip;
	}

	body {
		margin: 0;
		background: var(--bg);
		color: var(--text);
		font-family: var(--wp--preset--font-family--serka-sans);
		font-size: var(--wp--preset--font-size--base);
		line-height: calc(1.6 * var(--rtl-lh));
		text-rendering: optimizeLegibility;
	}

	img,
	svg,
	video,
	canvas {
		max-inline-size: 100%;
		block-size: auto;
	}

	a {
		color: var(--gold-2);
		text-decoration-thickness: 1px;
		text-underline-offset: .18em;
	}

	a:hover,
	a:focus-visible {
		color: var(--gold);
	}

	:focus-visible {
		outline: 2px solid var(--gold-2);
		outline-offset: 2px;
	}

	h1, h2, h3, h4 {
		font-family: var(--wp--preset--font-family--serka-serif);
		line-height: 1.15;
		letter-spacing: -.01em;
		text-wrap: balance;
		margin-block: 0 .6em;
	}

	/* ---------------------------------------------------------------
	 * 3) Duzen
	 * ------------------------------------------------------------ */

	.serka-wrap {
		inline-size: var(--wrap);
		margin-inline: auto;
	}

	.serka-main {
		display: block;
		min-block-size: 40vh;
	}

	body.serka-has-fixed-chrome .serka-main {
		padding-block-start: var(--chrome-top);
	}

	/* `body.serka-has-cta-bar` govde boslugu BURADA DEGIL - olcu masaustunde
	   yuzen dock'un bosluguna bagli oldugu icin bilesenle birlikte
	   assets/css/ctabar.css icinde tanimlanir (tek kaynak). */

	.page-content {
		max-inline-size: var(--measure);
	}

	.page-content h2 {
		margin-block-start: 2.4rem;
	}

	.page-content h3 {
		margin-block-start: 1.6rem;
	}

	.serka-skip-link {
		position: absolute;
		inset-block-start: -100%;
		inset-inline-start: 0;
		z-index: 1000;
		padding: 12px 18px;
		background: var(--bg2);
		color: var(--gold-2);
	}

	.serka-skip-link:focus {
		inset-block-start: 0;
	}

	/* ---------------------------------------------------------------
	 * 4) Chrome - asgari, olculer theme.json'dan
	 * ------------------------------------------------------------ */

	.serka-chrome {
		position: fixed;
		inset-block-start: 0;
		inset-inline: 0;
		z-index: 100;
		background: var(--glass);
		border-block-end: 1px solid var(--line);
		backdrop-filter: blur(14px) saturate(140%);
	}

	.serka-chrome__topbar-inner,
	.serka-chrome__mainbar-inner {
		display: flex;
		align-items: center;
		gap: 20px;
		justify-content: space-between;
	}

	.serka-chrome__topbar-inner {
		min-block-size: var(--wp--custom--chrome--topbar);
	}

	.serka-chrome__mainbar-inner {
		min-block-size: var(--wp--custom--chrome--mainbar);
	}

	.serka-chrome__claim {
		margin: 0;
		font-size: var(--fs-small-lg);
		font-weight: 600;
		letter-spacing: var(--serka-ls-label, .04em);
		color: var(--muted);
	}

	.serka-chrome__brand-title {
		font-family: var(--wp--preset--font-family--serka-serif);
		font-size: var(--fs-brand);
		line-height: 1.05;
		letter-spacing: var(--serka-ls-brand, .08em);
		color: var(--text);
		text-decoration: none;
	}

	.serka-chrome__brand-link {
		text-decoration: none;
	}

	.serka-chrome__brand-sub {
		display: block;
		font-size: var(--fs-micro-lg);
		text-transform: uppercase;
		letter-spacing: var(--serka-ls-sub, .28em);
		color: var(--muted);
	}

	.serka-menu {
		display: flex;
		gap: 18px;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--fs-compact-lg);
		font-weight: 700;
	}

	.serka-menu a {
		color: var(--text);
		text-decoration: none;
	}

	.serka-menu a:hover,
	.serka-menu a:focus-visible {
		color: var(--gold-2);
	}

	.serka-theme-toggle {
		inline-size: 38px;
		block-size: 38px;
		border: 1px solid var(--line);
		border-radius: 11px;
		background: var(--glass-2);
		cursor: pointer;
	}

	.serka-theme-toggle__mark {
		display: block;
		inline-size: 12px;
		block-size: 12px;
		margin-inline: auto;
		border-radius: 50%;
		background: var(--gold);
	}

	.serka-langbar__list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.serka-langbar__link {
		display: inline-block;
		min-block-size: 24px;
		min-inline-size: 24px;
		padding: 3px 7px;
		border-radius: 8px;
		font-size: var(--fs-tiny-lg);
		font-weight: 700;
		text-decoration: none;
		color: var(--muted);
	}

	.serka-langbar__item.is-active .serka-langbar__link {
		color: var(--gold-2);
		background: var(--glass-2);
	}

	/* ---------------------------------------------------------------
	 * 5) Hero - canvas kutusu init'ten ONCE olculu (CLS 0.00)
	 * ------------------------------------------------------------ */

	.serka-hero {
		position: relative;
		display: grid;
		align-items: center;
		min-block-size: clamp(420px, 78vh, 780px);
		padding-block: clamp(64px, 12vh, 140px);
		overflow: clip;
	}

	.serka-hero__field {
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
	}

	/* Statik katman URUNUN KENDISIDIR: WebGL hic yuklenmezse gorunum eksiksiz. */
	.serka-hero__static {
		position: absolute;
		inset: 0;
		background:
			radial-gradient(120% 80% at 50% 0%, var(--glass-2), transparent 60%),
			linear-gradient(180deg, var(--bg2), var(--bg));
	}

	.serka-hero__canvas {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity var(--dur-slow) var(--ease);
	}

	.serka-hero__canvas.is-live {
		opacity: 1;
	}

	.serka-hero__canvas canvas {
		inline-size: 100%;
		block-size: 100%;
		display: block;
	}

	.serka-hero__inner {
		position: relative;
		z-index: 1;
	}

	.serka-hero__kicker {
		margin: 0 0 .8em;
		font-size: var(--fs-small-lg);
		text-transform: uppercase;
		letter-spacing: var(--serka-ls-kicker, .22em);
		color: var(--gold);
	}

	.serka-hero__title {
		font-size: var(--fs-hero);
		line-height: 1.1;
		margin-block-end: .5em;
	}

	.serka-hero__lead {
		max-inline-size: 62ch;
		font-size: var(--fs-body-lead);
		color: var(--muted);
	}

	.serka-hero__cta {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-block-start: 1.6em;
	}

	/* ---------------------------------------------------------------
	 * 6) Bilesenler
	 * ------------------------------------------------------------ */

	.serka-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-block-size: 42px;
		padding-inline: 18px;
		border: 1px solid var(--line);
		border-radius: 11px;
		background: var(--glass-2);
		color: var(--text);
		font-size: var(--fs-control);
		font-weight: 700;
		text-decoration: none;
		transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	}

	.serka-btn:hover,
	.serka-btn:focus-visible {
		border-color: var(--gold);
		color: var(--gold-2);
	}

	.serka-btn--whatsapp { border-color: color-mix(in srgb, var(--wa) 55%, transparent); }
	.serka-btn--signal   { border-color: color-mix(in srgb, var(--sig) 55%, transparent); }

	.serka-list {
		display: grid;
		gap: 28px;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		padding-block: 48px;
	}

	.serka-card {
		border: 1px solid var(--line);
		border-radius: 14px;
		background: var(--glass);
		overflow: clip;
	}

	.serka-card__media img {
		inline-size: 100%;
		aspect-ratio: 8 / 5;
		object-fit: cover;
	}

	.serka-card__body {
		padding: 18px;
	}

	.serka-card__title {
		font-size: var(--fs-card-title);
		margin-block-end: .4em;
	}

	.serka-card__title a {
		color: var(--text);
		text-decoration: none;
	}

	.serka-card__meta,
	.serka-card__excerpt {
		font-size: var(--fs-small-lg);
		color: var(--muted);
	}

	.serka-archive-head,
	.serka-single__head,
	.serka-page__head,
	.serka-404 {
		padding-block: 32px 8px;
	}

	.sg-h1 {
		font-size: var(--fs-page-title);
		line-height: 1.12;
	}

	/* Alt CTA cubugu (.serka-ctabar*) BU DOSYADA DEGIL: assets/css/ctabar.css.
	   Bilesenin tamami - dock geometrisi, kanal butonlari, popover paneli ve
	   govde boslugu - tek dosyada durur. */

	.serka-footer {
		border-block-start: 1px solid var(--line);
		background: var(--bg2);
		padding-block: 48px;
	}

	.serka-footer__cols {
		display: grid;
		gap: 32px;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}

	.serka-footer__menu,
	.serka-footer__legal-menu {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		margin: 24px 0 0;
		padding: 0;
		list-style: none;
		font-size: var(--fs-compact-lg);
	}

	.serka-footer__copy {
		margin-block-start: 24px;
		font-size: var(--fs-small-lg);
		color: var(--muted);
	}

	/* ---------------------------------------------------------------
	 * 7) RTL + dil kontrati
	 *    style-rtl.css YOK. Yon farki logical properties ile zaten tasiniyor;
	 *    burada YALNIZ tipografi duzeltmesi var.
	 * ------------------------------------------------------------ */

	html[lang|="ar"],
	html[lang|="fa"],
	html[lang|="ur"],
	html[lang|="he"] {
		/* Kursif baglanmayi kiran harf araligi RTL'de sifirlanir. */
		--serka-ls-brand: 0;
		--serka-ls-sub: 0;
		--serka-ls-kicker: 0;
		--serka-ls-label: 0;
		--rtl-lh: var(--wp--custom--rtl--line-height-boost, 1.15);
	}

	html[lang|="ar"] h1, html[lang|="ar"] h2, html[lang|="ar"] h3,
	html[lang|="fa"] h1, html[lang|="fa"] h2, html[lang|="fa"] h3,
	html[lang|="ur"] h1, html[lang|="ur"] h2, html[lang|="ur"] h3,
	html[lang|="he"] h1, html[lang|="he"] h2, html[lang|="he"] h3 {
		letter-spacing: 0;
		line-height: 1.35;
	}

	/* zh: ideografik/latin arasi bosluk. Chrome 140 / Firefox 145 / Safari 18.4.
	   Ilerlemeli iyilestirme - desteklenmeyen tarayicida hicbir sey degismez. */
	@supports (text-autospace: normal) {
		html[lang|="zh"] body,
		html[lang|="ja"] body {
			text-autospace: normal;
		}
	}

	/* ---------------------------------------------------------------
	 * 8) Motion sozlesmesi
	 * ------------------------------------------------------------ */

	.serka-reveal {
		opacity: 1;
	}

	html[data-motion="on"] .serka-reveal {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
	}

	html[data-motion="on"] .serka-reveal.is-in {
		opacity: 1;
		transform: none;
	}

	html[data-motion="off"] .serka-hero__canvas {
		display: none;
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		.serka-reveal,
		.serka-hero__canvas,
		.serka-btn {
			transition: none;
		}
	}

	/* ---------------------------------------------------------------
	 * 9) Kucuk ekran
	 * ------------------------------------------------------------ */

	@media (width < 1024px) {
		:root {
			--chrome-top: var(--wp--custom--chrome--offset-top-sm);
		}

		.serka-chrome__mainbar-inner {
			min-block-size: var(--wp--custom--chrome--mainbar-sm);
		}

		body {
			font-size: var(--fs-body-sm);
		}

		.serka-chrome__brand-title {
			font-size: var(--fs-body-sm);
			letter-spacing: var(--serka-ls-brand, .05em);
		}

		.serka-chrome__brand-sub {
			font-size: var(--fs-micro);
			letter-spacing: var(--serka-ls-sub, .18em);
		}

		.serka-hero__title {
			font-size: var(--fs-hero-sm);
		}

		.serka-btn {
			font-size: var(--fs-mini);
			min-block-size: 40px;
		}
	}
}

@layer serka {

	/* ---------------------------------------------------------------
	 * TIPOGRAFI SOZLESMESI - premium tier-1 (23.07.2026, SK onayina sunuldu)
	 * Sayfa basina farkli gorunum BITER: baslik/govde davranisi burada,
	 * degerler theme.json'da. Bilesen CSS'inde punto ve agirlik YAZILMAZ.
	 * ------------------------------------------------------------ */

	body {
		font-family: var(--sans);
		font-size: var(--fs-base);
		font-weight: var(--w-body);
		line-height: var(--lh-body);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
	}

	/* Serif basliklar: optik boyut acik, siki satir araligi, negatif izleme.
	   Koyu zeminde ince gorunmesin diye agirlik 600'de sabit. */
	h1, h2, h3, .htitle, .sec {
		font-family: var(--serif);
		font-weight: var(--w-head);
		line-height: var(--lh-tight);
		letter-spacing: var(--track-head);
		font-optical-sizing: auto;
		text-wrap: balance;
	}

	h1, .htitle { font-size: var(--fs-xxl); letter-spacing: var(--track-display); }
	h2, .sec    { font-size: var(--fs-xl); }
	h3          { font-size: var(--fs-lg); line-height: var(--lh-lead); }
	h4, h5, h6  { font-family: var(--sans); font-weight: var(--w-strong); font-size: var(--fs-md); line-height: var(--lh-lead); letter-spacing: 0; }

	/* Para ve kunye rakamlari hizali olsun - tablo ve tutarlarda kayma bitsin. */
	table, .serka-contact-card__addr, time, .sg-fact-value {
		font-variant-numeric: tabular-nums lining-nums;
	}

	/* Bolum etiketi (eyebrow): kucuk, genis izlemeli, altin. */
	.eyebrow, .kicker, .sg-eyebrow, .serka-ctabar__lead {
		font-family: var(--sans);
		font-size: var(--fs-xs);
		font-weight: var(--w-strong);
		letter-spacing: var(--track-wide);
		text-transform: uppercase;
	}

	/* Okuma olcusu: uzun hukuk metni satir basina 62-72 karakteri asmaz. */
	p, li { max-inline-size: 74ch; }
	.serka-contact-dock p, td p, th p, .sg-card p { max-inline-size: none; }
}