/*
 * Serka — alt CTA cubugu (cok kanalli yuzen dock).
 *
 * SORUN (SK, 21.07.2026): eski cubuk her iki kenara + alta sabitlendigi icin
 * ekrani boydan boya kapliyordu; mobilde dogru, masaustunde cirkin.
 * COZUM: sabit konumlandirma katmani seffaf kalir, GORUNEN yuzey ic dock'tur.
 *   - mobil  (< 1024px): dock tam genislik, kose yuvarlatmasi yok  -> BUGUNKU DAVRANIS AYNEN KORUNUR
 *   - masaustu (>= 1024px): dock ortalanmis, `--cta-max` ile sinirli, yuvarlak
 *     koseli, altin hatli, cam yuzeyli yuzen ada
 *
 * PARITY LOCK (serka-design-system.md:121-143):
 *   cam yuzey var(--glass) · altin hat var(--line) · blur(18px) saturate(160%)
 *   (canli olcum: serka-cine/chrome.css:189-196) · buton >=42px r11 12.8px,
 *   kucuk ekranda >=40px 10.8px · tek easing var(--ease) · reduced-motion destegi.
 *   Marka renkleri yalnizca 6px nokta + hover hattinda gorunur; dinlenme
 *   halinde her sey altindir (tek-vurgu disiplini).
 *
 * RTL: hicbir yerde left/right YOK. Yalnizca logical properties.
 * Katman: base.css ile ayni `@layer serka`.
 */

@layer serka {

	/* ---------------------------------------------------------------
	 * 1) Govde boslugu — cubuk icerigin ustune binmez
	 * ------------------------------------------------------------ */

	body.serka-has-cta-bar {
		padding-block-end: calc(var(--cta-h) + env(safe-area-inset-bottom, 0px));
	}

	/* ---------------------------------------------------------------
	 * 2) Konumlandirma katmani — SEFFAF, tiklamayi yutmaz
	 * ------------------------------------------------------------ */

	.serka-ctabar {
		position: fixed;
		inset-block-end: 0;
		inset-inline: 0;
		z-index: 90;

		/* Masaustunde dock ekranin ortasinda YUZDUGU icin katmanin kalan
		   alani saydamdir; pointer-events kapatilmazsa altindaki metin
		   secilemez ve linkler tiklanamaz. */
		pointer-events: none;
		padding-block-end: env(safe-area-inset-bottom, 0px);
	}

	/* ---------------------------------------------------------------
	 * 3) Dock — gorunen yuzey
	 * ------------------------------------------------------------ */

	.serka-ctabar__dock {
		pointer-events: auto;

		/* Butonlar dock'un genisligine gore daralir, viewport'a gore DEGIL:
		   ayni bilesen Elementor sablonunda dar bir kolona da girebilir. */
		container-type: inline-size;
		container-name: serka-ctabar;

		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		min-block-size: var(--cta-h);
		padding-inline: 12px;

		background: var(--glass);
		border-block-start: 1px solid var(--line);
		backdrop-filter: blur(18px) saturate(160%);
		-webkit-backdrop-filter: blur(18px) saturate(160%);
	}

	.serka-ctabar__lead {
		display: none;
		margin: 0;
		font-size: var(--fs-small-lg);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: var(--serka-ls-kicker, .22em);
		color: var(--gold);
		white-space: nowrap;
	}

	.serka-ctabar__list {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* ---------------------------------------------------------------
	 * 4) Kanal butonu — parity: >=42px, r11, 12.8px/700
	 * ------------------------------------------------------------ */

	.serka-ctabar__btn,
	.serka-ctabar__more {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;

		/* WCAG 2.2 AA 2.5.8: hedef 24x24 tabanin cok uzerinde. */
		min-block-size: 42px;
		min-inline-size: 44px;
		padding-inline: 16px;

		border: 1px solid var(--line);
		border-radius: 11px;
		background: var(--glass-2);
		color: var(--text);
		font-family: inherit;
		font-size: var(--fs-control);
		font-weight: 700;
		line-height: 1;
		white-space: nowrap;
		text-decoration: none;
		cursor: pointer;
		transition:
			border-color var(--dur-fast) var(--ease),
			color var(--dur-fast) var(--ease),
			background-color var(--dur-fast) var(--ease);
	}

	.serka-ctabar__btn:hover,
	.serka-ctabar__btn:focus-visible,
	.serka-ctabar__more:hover,
	.serka-ctabar__more:focus-visible {
		border-color: var(--serka-ch, var(--gold));
		background: var(--glass);
		color: var(--gold-2);
	}

	/* Odak halkasi dock'un cam yuzeyinde kaybolmasin. */
	.serka-ctabar__btn:focus-visible,
	.serka-ctabar__more:focus-visible {
		outline: 2px solid var(--gold-2);
		outline-offset: 2px;
	}

	.serka-ctabar__dot {
		flex: none;
		inline-size: 6px;
		block-size: 6px;
		border-radius: 50%;
		background: var(--serka-ch, var(--gold-3));
	}

	/* Marka aksani — yalnizca hex'i DOGRULANMIS kanallarda tanimlidir.
	   Tanimsiz kanal `--serka-ch` fallback'i ile altina duser; uydurma
	   marka rengi yazilmaz. */
	.serka-ctabar__btn--whatsapp { --serka-ch: var(--wa); }
	.serka-ctabar__btn--signal   { --serka-ch: var(--sig); }
	.serka-ctabar__btn--telegram { --serka-ch: var(--tg); }
	.serka-ctabar__btn--wechat   { --serka-ch: var(--wx); }

	/* ---------------------------------------------------------------
	 * 4b) Kopyalanabilir numara — baglantisi OLMAYAN kanal (imo, WeChat)
	 *     Olcum 22.07.2026 (KOL R): bu iki kanalin numaradan uretilebilen
	 *     resmi baglantisi yok. Olu tiklama basmak yerine numara
	 *     `user-select: all` ile tek dokunusta secilebilir halde verilir.
	 *     <details> kullanilir: JS yok, Popover destegine de bagli degil.
	 * ------------------------------------------------------------ */

	.serka-ctabar__copy {
		position: relative;
		display: flex;
		min-inline-size: 0;
	}

	.serka-ctabar__copy > summary {
		list-style: none;
		cursor: pointer;
	}

	.serka-ctabar__copy > summary::-webkit-details-marker {
		display: none;
	}

	.serka-ctabar__copy > summary::marker {
		content: "";
	}

	.serka-ctabar__copybox {
		position: absolute;
		inset-block-end: calc(100% + 10px);
		inset-inline-start: 0;
		z-index: 1;

		inline-size: max-content;
		max-inline-size: min(320px, calc(100vw - 2 * var(--wp--custom--wrap--gutter)));
		padding: 12px 14px;

		border: 1px solid var(--line);
		border-radius: 14px;
		background: var(--glass);
		backdrop-filter: blur(18px) saturate(160%);
		-webkit-backdrop-filter: blur(18px) saturate(160%);
		box-shadow: var(--cta-shadow);
		text-align: center;
	}

	.serka-ctabar__num {
		display: block;
		font-size: var(--fs-dock);
		font-weight: 800;
		line-height: 1.3;
		letter-spacing: .02em;
		white-space: nowrap;
		color: var(--text);
		-webkit-user-select: all;
		user-select: all;
	}

	/* Panel icinde (tasma listesi) kutu satirin ustune degil altina acilir:
	   panel zaten cubugun ustundedir, yukari acilan kutu ekrandan tasabilir. */
	.serka-ctabar__list--panel .serka-ctabar__copy > .serka-ctabar__copybox {
		position: static;
		inline-size: auto;
		max-inline-size: none;
		margin-block-start: 8px;
	}

	.serka-ctabar__list--panel .serka-ctabar__copy {
		flex-direction: column;
		align-items: stretch;
	}

	/* ---------------------------------------------------------------
	 * 5) Tasma — oncelikli kanallar cubukta, kalani popover'da
	 *    Popover API: ust katman + ESC + disari tiklayinca kapanma
	 *    tarayicidan gelir; JS YOK.
	 * ------------------------------------------------------------ */

	.serka-ctabar__panel {
		/* [popover] UA stili `inset:0;margin:auto` kurar — once sifirla. */
		inset: auto;
		position: fixed;
		inset-block-end: calc(var(--cta-h) + var(--cta-gap));
		inset-inline: 0;
		margin: 0;
		margin-inline: auto;

		inline-size: min(320px, calc(100% - 2 * var(--wp--custom--wrap--gutter)));
		padding: 12px;

		border: 1px solid var(--line);
		border-radius: 14px;
		background: var(--glass);
		backdrop-filter: blur(18px) saturate(160%);
		-webkit-backdrop-filter: blur(18px) saturate(160%);
		box-shadow: var(--cta-shadow);
		color: var(--text);
		overflow: visible;
	}

	.serka-ctabar__list--panel {
		flex-direction: column;
		align-items: stretch;
	}

	.serka-ctabar__list--panel .serka-ctabar__btn {
		justify-content: flex-start;
		inline-size: 100%;
	}

	/* Popover desteklenmiyorsa kanallar ERISILEBILIR KALIR: panel dock icinde
	   sade bir satir olarak akar, acma dugmesi gizlenir. */
	@supports not selector(:popover-open) {
		.serka-ctabar__more {
			display: none;
		}

		.serka-ctabar__panel {
			position: static;
			inline-size: auto;
			padding: 0;
			border: 0;
			border-radius: 0;
			background: none;
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
			box-shadow: none;
		}

		.serka-ctabar__list--panel {
			flex-direction: row;
			flex-wrap: wrap;
		}

		.serka-ctabar__list--panel .serka-ctabar__btn {
			inline-size: auto;
		}
	}

	/* ---------------------------------------------------------------
	 * 6) Dar dock — parity: 10.8px / >=40px
	 * ------------------------------------------------------------ */

	@container serka-ctabar (width < 26rem) {
		.serka-ctabar__dock {
			gap: 6px;
			padding-inline: 8px;
		}

		.serka-ctabar__btn,
		.serka-ctabar__more {
			min-block-size: 40px;
			padding-inline: 11px;
			font-size: var(--fs-mini);
			gap: 6px;
		}
	}

	/* ---------------------------------------------------------------
	 * 7) Masaustu — yuzen ada. Sayfa duzeyi kabuk olcusu oldugu icin
	 *    container degil MEDIA sorgusu (bilesen viewport'a sabitli).
	 * ------------------------------------------------------------ */

	@media (width >= 1024px) {
		body.serka-has-cta-bar {
			padding-block-end: calc(var(--cta-h) + 2 * var(--cta-gap) + env(safe-area-inset-bottom, 0px));
		}

		.serka-ctabar {
			padding-block-end: calc(var(--cta-gap) + env(safe-area-inset-bottom, 0px));
		}

		.serka-ctabar__dock {
			max-inline-size: min(var(--cta-max), calc(100% - 2 * var(--wp--custom--wrap--gutter)));
			margin-inline: auto;
			padding-inline: 14px;
			border: 1px solid var(--line);
			border-radius: var(--cta-radius);
			box-shadow: var(--cta-shadow);
		}

		.serka-ctabar__lead {
			display: block;
			margin-inline-end: 4px;
		}

		.serka-ctabar__panel {
			inset-block-end: calc(var(--cta-h) + 2 * var(--cta-gap));
			inline-size: min(320px, calc(100% - 2 * var(--wp--custom--wrap--gutter)));
		}
	}

	/* ---------------------------------------------------------------
	 * 8) Motion + baski
	 * ------------------------------------------------------------ */

	@media (prefers-reduced-motion: reduce) {
		.serka-ctabar__btn,
		.serka-ctabar__more {
			transition: none;
		}
	}

	@media print {
		.serka-ctabar {
			display: none;
		}
	}
}