/*
 * Serka — iletişim kanalları şeridi (anasayfa iletişim bölümü + /contact/).
 *
 * KAYNAK TASARIM: ctabar-preview.html. Alt CTA dock'uyla AYNI dil, aynı
 * ölçüler: cam yüzey var(--glass), altın hat var(--line),
 * blur(18px) saturate(160%), düğme >=42px / r11 / 12.8px-700, marka rengi
 * yalnız 6px noktada, dinlenme halinde her şey altın (tek-vurgu disiplini).
 *
 * SK düzeltmesi (23.07.2026): önceki sürüm "üç büyük boş kart + öksüz çip
 * satırı" üretiyordu ve kaynak tasarımla akraba görünmüyordu. Şerit YOĞUN
 * kuruldu: tek cam yüzey, içinde tek sıra sarmalayan düğme; birincil ve taşan
 * kanal arasında görsel kopukluk yok, yalnız genişlik önceliği farkı var.
 *
 * Hiçbir tasarım değeri burada TANIMLANMAZ; hepsi theme.json atomlarının
 * base.css'teki alias'larıdır.
 *
 * RTL: hiçbir yerde left/right YOK, yalnız logical properties — `style-rtl.css`
 * üretilmez.
 *
 * Katman: base.css + ctabar.css ile aynı `@layer serka`.
 */

@layer serka {

	/* ---------------------------------------------------------------
	 * 1) Şerit — akış içinde yüzen cam ada (dock'un birebir yüzeyi)
	 * ------------------------------------------------------------ */

	.serka-contact-dock {
		container-type: inline-size;
		container-name: serka-contact-dock;

		/* Kap `.wrap` = min(1200px, 100% - 40px); cevresindeki `.csub` paragrafi
		   ise 64ch ile sinirli. Serit olcusuz birakilinca 1200px'e yayilip metin
		   sutunundan tasiyor ve tek satirda alti dugme sikisiyordu (SK, 23.07.2026).
		   Olcu metinle AYNI: serit paragrafla hizali baslar ve biter. */
		max-inline-size: 64ch;

		margin-block-start: 20px;
		padding: 12px;

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

	/* Izgara, flex DEGIL: etiket uzunlugu dile gore degisiyor (AR/RU uzun,
	   ZH kisa) ve flex'te satir dolulugu dilden dile kayiyordu. Izgara ile
	   her dilde ayni ritim: 64ch kapta satir basina 3 kanal, alti kanal iki
	   satir. Kolon sayisi kaba gore kendiliginden cozulur. */
	.serka-contact-dock__list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
		align-items: stretch;
		gap: 10px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.serka-contact-dock__item {
		display: flex;
		min-inline-size: 0;
	}

	/* ---------------------------------------------------------------
	 * 2) Kanal düğmesi — dock butonunun ölçüleri, iki satır içerik
	 * ------------------------------------------------------------ */

	.serka-contact-card {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		inline-size: 100%;
		min-inline-size: 0;

		/* Parity: dock butonu >=42px; iki satır içerik için 52px. */
		min-block-size: 52px;
		padding: 9px 14px;

		border: 1px solid var(--line);
		border-radius: 11px;
		background: var(--glass-2);
		color: var(--text);
		text-decoration: none;
		transition:
			border-color var(--dur-fast) var(--ease),
			background-color var(--dur-fast) var(--ease),
			color var(--dur-fast) var(--ease);
	}

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

	a.serka-contact-card:focus-visible {
		outline: 2px solid var(--gold-2);
		outline-offset: 2px;
	}

	.serka-contact-card__head {
		display: flex;
		align-items: center;
		gap: 8px;
		min-inline-size: 0;
	}

	/* Marka aksanı yalnız burada görünür. */
	.serka-contact-card__dot {
		flex: none;
		inline-size: 6px;
		block-size: 6px;
		border-radius: 50%;
		background: var(--serka-ch, var(--gold-3));
	}

	/* Parity lock: dock butonuyla AYNI tipografi — serif DEĞİL. */
	.serka-contact-card__name {
		font-size: var(--fs-control);
		font-weight: 700;
		line-height: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.serka-contact-card__addr {
		font-size: var(--fs-small-x);
		font-weight: 500;
		line-height: 1.25;
		color: var(--muted);
		font-variant-numeric: tabular-nums;
		letter-spacing: .01em;
		overflow-wrap: anywhere;

		/* Nokta genişliği + boşluk kadar iç girinti: adres, adın altında
		   noktayla değil ADLA hizalanır. */
		padding-inline-start: 14px;
	}

	/* Bağlantısı olmayan kanal (imo, WeChat): tek dokunuşta seçilebilir numara. */
	.serka-contact-card--copy .serka-contact-card__addr {
		-webkit-user-select: all;
		user-select: all;
	}

	/* Marka renkleri — yalnız hex'i DOĞRULANMIŞ kanallarda tanımlı.
	   Tanımsız kanal `--serka-ch` fallback'i ile altına düşer. */
	.serka-contact-card--whatsapp { --serka-ch: var(--wa); }
	.serka-contact-card--signal   { --serka-ch: var(--sig); }
	.serka-contact-card--telegram { --serka-ch: var(--tg); }
	.serka-contact-card--wechat   { --serka-ch: var(--wx); }

	/* ---------------------------------------------------------------
	 * 3) Dar kap — parity: 10.8px / >=40px
	 * ------------------------------------------------------------ */

	@container serka-contact-dock (width < 30rem) {
		.serka-contact-dock {
			padding: 10px;
		}

		.serka-contact-dock__list {
			gap: 8px;
		}

		.serka-contact-dock__list {
			grid-template-columns: 1fr;
		}

		.serka-contact-card {
			min-block-size: 48px;
			padding: 8px 12px;
		}

		.serka-contact-card__name { font-size: var(--fs-compact); }
		.serka-contact-card__addr { font-size: var(--fs-small); padding-inline-start: 14px; }
	}

	@media (prefers-reduced-motion: reduce) {
		.serka-contact-card {
			transition: none;
		}
	}

	@media print {
		.serka-contact-dock {
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
			box-shadow: none;
		}
	}
}