/*
 * Serka - profil ve program yüzeyi (`serka-pf`).
 *
 * NE İŞE YARAR: avukat profili, yatırımla vatandaşlık (CBI) anlatımı, karar
 * tablosu, çalışma alanı kartları ve görünür soru-cevap bloğu. Üç sitede de
 * aynı dosyadır; içerik ve dil sayfaya, görünüm buraya aittir.
 *
 * KAYNAK TASARIM: alt CTA dock'u + iletişim şeridi (`ctabar.css`,
 * `contact.css`). Aynı aile: cam yüzey var(--glass), altın hat var(--line),
 * blur(18px) saturate(160%), 11px köşe, 6px marka noktası, tek easing
 * var(--ease), dinlenme halinde her şey altın.
 *
 * BAĞLAYICI: hiçbir renk, yazı tipi ve punto burada TANIMLANMAZ - hepsi
 * theme.json atomlarının base.css'teki alias'larıdır (--bg, --text, --gold,
 * --line, --glass, --serif, --sans, --fs-*, --lh-*, --track-*, --ease).
 * Sabit hex ve sabit px punto sıfırdır; ölçek kademesi dışına çıkılmaz.
 *
 * RTL: hiçbir yerde left/right yok, yalnız mantıksal özellik.
 * Katman: base.css ile aynı `@layer serka`.
 */

@layer serka {

	/* ---------------------------------------------------------------
	 * 1) Kök ve ritim
	 * ------------------------------------------------------------ */

	.serka-pf {
		font-family: var(--sans);
		font-size: var(--fs-base);
		line-height: var(--lh-body);
		color: var(--text);
	}

	/* Baslik olcusu, agirligi ve izlemesi base.css'ten gelir (h1=--fs-xxl,
	   h2=--fs-xl, h3=--fs-lg). Bilesen yalniz bosluk sifirlar. */
	.serka-pf :is(h1, h2, h3) {
		text-wrap: balance;
		margin: 0;
	}

	.serka-pf p {
		margin: 0;
	}

	.serka-pf__wrap {
		inline-size: var(--wrap);
		max-inline-size: 62rem;
		margin-inline: auto;
	}

	/* ---------------------------------------------------------------
	 * 2) Üst şerit - dock'un yatay ikizi
	 * ------------------------------------------------------------ */

	.serka-pf__bar {
		position: sticky;
		inset-block-start: 0;
		z-index: 900;
		border-block-end: 1px solid var(--line);
		background: var(--glass);
		backdrop-filter: blur(18px) saturate(160%);
		-webkit-backdrop-filter: blur(18px) saturate(160%);
	}

	.serka-pf__bar-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		inline-size: var(--wrap);
		max-inline-size: 62rem;
		margin-inline: auto;
		min-block-size: 52px;
	}

	.serka-pf__brand {
		display: flex;
		align-items: center;
		gap: 10px;
		min-inline-size: 0;
		color: var(--text);
		text-decoration: none;
	}

	.serka-pf__brand img {
		inline-size: 32px;
		block-size: 32px;
		border-radius: 50%;
		border: 1px solid var(--line);
		object-fit: cover;
	}

	.serka-pf__brand-name {
		display: block;
		font-family: var(--serif);
		font-size: var(--fs-sm);
		font-weight: var(--w-strong);
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.serka-pf__brand-sub {
		display: block;
		font-size: var(--fs-xs);
		font-weight: var(--w-strong);
		letter-spacing: var(--track-wide);
		text-transform: uppercase;
		color: var(--muted);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.serka-pf__bar-right {
		display: flex;
		align-items: center;
		gap: 8px;
		flex: 0 0 auto;
	}

	.serka-pf__langs {
		display: flex;
		gap: 2px;
	}

	.serka-pf__lang {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-inline-size: 32px;
		min-block-size: 30px;
		padding-inline: 6px;
		border: 1px solid transparent;
		border-radius: 9px;
		font-size: var(--fs-xs);
		font-weight: var(--w-strong);
		letter-spacing: var(--track-wide);
		color: var(--muted);
		text-decoration: none;
		cursor: pointer;
		transition: color var(--dur-fast) var(--ease),
			border-color var(--dur-fast) var(--ease),
			background var(--dur-fast) var(--ease);
	}

	.serka-pf__lang:hover {
		color: var(--gold);
	}

	.serka-pf__lang.active {
		border-color: var(--line);
		background: var(--glass-2);
		color: var(--gold-2);
	}

	.serka-pf__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 34px;
		block-size: 34px;
		padding: 0;
		border: 1px solid var(--line);
		border-radius: 11px;
		background: var(--glass-2);
		color: var(--gold-2);
		cursor: pointer;
		transition: border-color var(--dur-fast) var(--ease),
			color var(--dur-fast) var(--ease);
	}

	.serka-pf__toggle:hover {
		border-color: var(--gold);
		color: var(--gold);
	}

	.serka-pf__toggle svg {
		inline-size: 16px;
		block-size: 16px;
	}

	.serka-pf__toggle .serka-pf__ico-sun {
		display: block;
	}

	.serka-pf__toggle .serka-pf__ico-moon {
		display: none;
	}

	html.light .serka-pf__toggle .serka-pf__ico-sun {
		display: none;
	}

	html.light .serka-pf__toggle .serka-pf__ico-moon {
		display: block;
	}

	/* ---------------------------------------------------------------
	 * 3) Hero - ilk ekran: program başlığı, kimlik, ölçülmüş rakamlar
	 * ------------------------------------------------------------ */

	.serka-pf__hero {
		position: relative;
		isolation: isolate;
		overflow: clip;
		padding-block: 44px 40px;
	}

	.serka-pf__hero-bg {
		position: absolute;
		inset: 0;
		z-index: -2;
	}

	.serka-pf__hero-bg img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	.serka-pf__hero-veil {
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			linear-gradient(to bottom, var(--bg) 0%, var(--sec-veil) 55%, var(--bg) 100%),
			linear-gradient(to right, var(--bg) 22%, transparent 100%);
	}

	html.light .serka-pf__hero-bg img {
		opacity: .42;
	}

	html.light .serka-pf__hero-veil {
		background:
			linear-gradient(to bottom, var(--bg) 0%, transparent 55%, var(--bg) 100%),
			linear-gradient(to right, var(--bg) 22%, transparent 100%);
	}

	.serka-pf__hero-grid {
		display: grid;
		grid-template-columns: 132px minmax(0, 1fr);
		gap: 24px;
		align-items: start;
	}

	.serka-pf__portrait {
		border: 1px solid var(--line);
		border-radius: 13px;
		overflow: hidden;
		box-shadow: var(--cta-shadow);
	}

	.serka-pf__portrait img {
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 2 / 3;
		object-fit: cover;
	}

	/* Program etiketi - sayfanın ilk okunan satırı. */
	.serka-pf__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 5px 11px;
		border: 1px solid var(--line);
		border-radius: 999px;
		background: var(--glass);
		font-size: var(--fs-xs);
		font-weight: var(--w-strong);
		letter-spacing: var(--track-wide);
		text-transform: uppercase;
		color: var(--gold-2);
	}

	.serka-pf__eyebrow::before {
		content: "";
		inline-size: 6px;
		block-size: 6px;
		border-radius: 50%;
		background: var(--gold);
		flex: 0 0 auto;
	}

	.serka-pf__title {
		margin-block-start: 14px;
	}

	.serka-pf__rule {
		inline-size: 84px;
		block-size: 1px;
		margin-block: 14px;
		background: linear-gradient(to right, var(--gold), transparent);
	}

	.serka-pf__role {
		font-size: var(--fs-md);
		color: var(--gold-2);
		font-weight: var(--w-body);
	}

	.serka-pf__lede {
		margin-block-start: 14px;
		max-inline-size: var(--measure);
		font-size: var(--fs-md);
		line-height: var(--lh-body);
	}

	.serka-pf__note {
		margin-block-start: 10px;
		max-inline-size: var(--measure);
		font-size: var(--fs-sm);
		color: var(--muted);
	}

	/* ---------------------------------------------------------------
	 * 4) Güven şeridi - ölçülmüş, doğrulanabilir künye
	 * ------------------------------------------------------------ */

	.serka-pf-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-block-start: 16px;
		padding: 0;
		list-style: none;
	}

	.serka-pf-chip {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		min-block-size: 30px;
		padding: 5px 11px;
		border: 1px solid var(--line);
		border-radius: 11px;
		background: var(--glass-2);
		font-size: var(--fs-xs);
		font-weight: var(--w-strong);
		letter-spacing: var(--track-wide);
		color: var(--text);
	}

	.serka-pf-chip::before {
		content: "";
		inline-size: 6px;
		block-size: 6px;
		border-radius: 50%;
		background: var(--gold);
		flex: 0 0 auto;
	}

	.serka-pf-chip b {
		font-weight: var(--w-strong);
		color: var(--gold-2);
	}

	/* ---------------------------------------------------------------
	 * 5) Ölçülmüş rakam kutuları
	 * ------------------------------------------------------------ */

	.serka-pf-figs {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
		gap: 10px;
		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);
		list-style: none;
	}

	.serka-pf-fig {
		display: flex;
		flex-direction: column;
		gap: 3px;
		min-block-size: 52px;
		padding: 9px 14px;
		border: 1px solid var(--line);
		border-radius: 11px;
		background: var(--glass-2);
	}

	.serka-pf-fig__v {
		font-family: var(--serif);
		font-size: var(--fs-lg);
		line-height: var(--lh-tight);
		letter-spacing: var(--track-head);
		color: var(--gold-2);
	}

	.serka-pf-fig__k {
		font-size: var(--fs-xs);
		font-weight: var(--w-strong);
		letter-spacing: var(--track-wide);
		color: var(--muted);
	}

	/* ---------------------------------------------------------------
	 * 6) Site geçişleri (kartvizitte tek yönlendirme yolu)
	 * ------------------------------------------------------------ */

	.serka-pf-sites {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-block-start: 18px;
		padding: 0;
		list-style: none;
	}

	.serka-pf-site {
		display: inline-flex;
		flex-direction: column;
		gap: 2px;
		min-block-size: 52px;
		padding: 9px 16px;
		border: 1px solid var(--line);
		border-radius: 11px;
		background: var(--glass-2);
		color: var(--text);
		text-decoration: none;
		transition: border-color var(--dur-base) var(--ease),
			transform var(--dur-base) var(--ease);
	}

	.serka-pf-site:hover {
		border-color: var(--gold);
		color: var(--text);
		transform: translateY(-1px);
	}

	.serka-pf-site b {
		font-size: var(--fs-sm);
		font-weight: var(--w-strong);
	}

	.serka-pf-site span {
		font-size: var(--fs-xs);
		color: var(--gold-2);
		letter-spacing: var(--track-wide);
	}

	/* ---------------------------------------------------------------
	 * 7) Bölüm
	 * ------------------------------------------------------------ */

	.serka-pf-sec {
		padding-block: 40px;
		border-block-start: 1px solid var(--line);
	}

	.serka-pf-sec:first-of-type {
		border-block-start: 0;
	}

	.serka-pf-sec__head {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-block-end: 12px;
	}

	.serka-pf-sec__head::before {
		content: "";
		inline-size: 6px;
		block-size: 6px;
		border-radius: 50%;
		background: var(--gold);
		flex: 0 0 auto;
	}

	.serka-pf-sec__intro {
		max-inline-size: var(--measure);
		font-size: var(--fs-base);
		line-height: var(--lh-body);
		color: var(--text);
	}

	.serka-pf-sec__intro + .serka-pf-sec__intro {
		margin-block-start: 10px;
	}

	.serka-pf-sec h3 {
		font-size: var(--fs-md);
	}

	/* ---------------------------------------------------------------
	 * 8) Karar tablosu - dar kapta KENDİ KABINDA yatay kayar
	 *
	 * ÖLÇÜLDÜ 23.07.2026 (canlı serkalaw anasayfası + tema CSS'i satır içi,
	 * Chrome, koyu ve açık mod, 1280 ve 390 px): hücrelerin
	 * `border-inline-start/end` genişliği 0'dı (sütun ayracı yok, çerçeve
	 * kopuk görünüyordu), `thead` arka planı `rgba(0,0,0,0)` idi (başlık
	 * satırı gövdeden ayrışmıyordu) ve dar kapta yatay kaydırıldığında ilk
	 * sütunun ilk harfi kırpılıyordu.
	 *
	 * Üçü de burada kapatıldı:
	 *   - tek çizgi: `separate` + `border-spacing: 0`, YALNIZ end kenarları
	 *     çizilir; start ve block-start kenarlarını kabın kendi çerçevesi
	 *     kapatır -> çift çizgi yok, eksik çizgi yok.
	 *   - başlık şeridi: cam yüzey + altın alt hat.
	 *   - yapışkan etiket sütunu: kaydırmada yerinde kalır, ilk harf
	 *     kırpılmaz. Yapışkan hücre saydam olamaz; opaklık `--bg2`
	 *     üzerine bindirilen `--glass-2` katmanıyla verilir (yeni değer
	 *     tanımlanmaz, ikisi de tokendir).
	 *
	 * Sayfa gövdesi yatay KAYMAZ: kaydırma yalnız `.serka-pf-tablewrap`
	 * içindedir. Rakamlar `tabular-nums` ile sütun sütun hizalanır.
	 * Geri dönüş: bu bloğu yedekten geri koy.
	 * ------------------------------------------------------------ */

	.serka-pf-tablewrap {
		margin-block-start: 18px;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		border: 1px solid var(--line);
		border-radius: var(--cta-radius);
		background: var(--glass);
	}

	.serka-pf-table {
		inline-size: 100%;
		min-inline-size: 34rem;
		border-collapse: separate;
		border-spacing: 0;
		font-size: var(--fs-sm);
		font-variant-numeric: tabular-nums;
	}

	.serka-pf-table :is(th, td) {
		padding-block: 12px;
		padding-inline: 16px;
		text-align: start;
		vertical-align: top;
		border-block-end: 1px solid var(--line);
		border-inline-end: 1px solid var(--line);
	}

	.serka-pf-table :is(th, td):last-child {
		border-inline-end: 0;
	}

	.serka-pf-table tbody tr:last-child :is(th, td) {
		border-block-end: 0;
	}

	.serka-pf-table thead th {
		background: var(--glass-2);
		font-size: var(--fs-xs);
		font-weight: var(--w-strong);
		letter-spacing: var(--track-wide);
		text-transform: uppercase;
		text-wrap: balance;
		color: var(--gold-2);
		border-block-end-color: var(--gold-3);
	}

	/* Etiket sütunu kaydırmada yerinde kalır (opak, altındaki içerik görünmez). */
	.serka-pf-table :is(th, td):first-child {
		position: sticky;
		inset-inline-start: 0;
		background: var(--bg2);
	}

	.serka-pf-table thead th:first-child {
		background:
			linear-gradient(var(--glass-2), var(--glass-2)),
			var(--bg2);
	}

	.serka-pf-table td b {
		font-weight: var(--w-strong);
		color: var(--gold-2);
		white-space: nowrap;
	}

	.serka-pf-table tbody tr :is(th, td) {
		transition: background var(--dur-fast) var(--ease);
	}

	.serka-pf-table tbody tr:hover :is(th, td) {
		background: var(--glass-2);
	}

	.serka-pf-table tbody tr:hover :is(th, td):first-child {
		background:
			linear-gradient(var(--glass-2), var(--glass-2)),
			var(--bg2);
	}

	/* Kaynak atfı - tablonun altında, tıklanabilir. */
	.serka-pf-src {
		margin-block-start: 10px;
		font-size: var(--fs-xs);
		line-height: 1.7;
		color: var(--muted);
	}

	.serka-pf-src a {
		color: var(--muted);
		text-decoration-color: var(--line);
	}

	.serka-pf-src a:hover {
		color: var(--gold);
	}

	/* ---------------------------------------------------------------
	 * 9) Kart ızgarası - çalışma alanları, bürolar
	 * ------------------------------------------------------------ */

	.serka-pf-cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		gap: 12px;
		margin-block-start: 18px;
		padding: 0;
		list-style: none;
	}

	.serka-pf-card {
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 15px 17px;
		border: 1px solid var(--line);
		border-radius: 11px;
		background: var(--glass);
		transition: border-color var(--dur-base) var(--ease),
			transform var(--dur-base) var(--ease);
	}

	.serka-pf-card:hover {
		border-color: var(--gold);
		transform: translateY(-1px);
	}

	.serka-pf-card h3 {
		font-size: var(--fs-md);
		line-height: var(--lh-lead);
		letter-spacing: var(--track-head);
	}

	.serka-pf-card p {
		font-size: var(--fs-sm);
		line-height: var(--lh-body);
		color: var(--muted);
	}

	.serka-pf-card a {
		align-self: flex-start;
		font-size: var(--fs-xs);
		font-weight: var(--w-strong);
		letter-spacing: var(--track-wide);
		text-transform: uppercase;
		color: var(--gold-2);
		text-decoration: none;
	}

	.serka-pf-card a:hover {
		color: var(--gold);
		text-decoration: underline;
	}

	/* ---------------------------------------------------------------
	 * 10) Künye listesi - doğrulanabilir kayıtlar
	 * ------------------------------------------------------------ */

	.serka-pf-defs {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		gap: 12px;
		margin-block-start: 18px;
		padding: 0;
		list-style: none;
	}

	.serka-pf-def {
		display: flex;
		flex-direction: column;
		gap: 3px;
		padding: 12px 15px;
		border-inline-start: 1px solid var(--line);
	}

	.serka-pf-def__k {
		font-size: var(--fs-xs);
		font-weight: var(--w-strong);
		letter-spacing: var(--track-wide);
		text-transform: uppercase;
		color: var(--gold-2);
	}

	.serka-pf-def__v {
		font-size: var(--fs-sm);
		line-height: var(--lh-body);
		color: var(--text);
	}

	/* ---------------------------------------------------------------
	 * 11) Soru-cevap - görünür metin esas
	 * ------------------------------------------------------------ */

	.serka-pf-faqs {
		max-inline-size: 46rem;
		margin-block-start: 18px;
	}

	/* `overflow: clip` (23.07.2026): 11px yuvarlak kosede metin disari
	   sizamaz. `hidden` degil `clip`, kutu kaydirma kabina donusmez. */
	.serka-pf-faq {
		border: 1px solid var(--line);
		border-radius: 11px;
		background: var(--glass);
		overflow: clip;
		transition: border-color var(--dur-base) var(--ease);
	}

	/* 8px -> 12px (SK · 23.07.2026: "kapali sorular arasinda nefes yok,
	   satirlar ust uste binmis gibi duruyor"). Olculdu: 46px yuksekligindeki
	   satirlar arasi 8px, iki cerceve arasi optik olarak 1px'e dusuyordu. */
	.serka-pf-faq + .serka-pf-faq {
		margin-block-start: 12px;
	}

	.serka-pf-faq:hover,
	.serka-pf-faq[open] {
		border-color: var(--gold);
	}

	/* `align-items: start` + `--lh-lead` (23.07.2026): soru iki satira
	   sardiginda `center` madde isaretini iki satirin ARASINA koyuyordu
	   (olculdu 390px'te 12 sorunun 9'u sariyor), `--lh-tight` (1.14) da
	   satirlari birbirine giydiriyordu. */
	.serka-pf-faq > summary {
		display: flex;
		align-items: start;
		gap: 10px;
		padding-block: 13px;
		padding-inline: 16px;
		font-family: var(--serif);
		font-size: var(--fs-base);
		font-weight: var(--w-strong);
		line-height: var(--lh-lead);
		color: var(--text);
		cursor: pointer;
		list-style: none;
	}

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

	/* Nokta ilk satirin optik ortasina oturur: (satir yuksekligi - nokta) / 2.
	   `lh` birimi desteklenmezse bildirim duser ve nokta satir basina hizalanir:
	   bozulma degil, kademeli iyilestirme. */
	.serka-pf-faq > summary::before {
		content: "";
		inline-size: 6px;
		block-size: 6px;
		border-radius: 50%;
		background: var(--gold);
		flex: 0 0 auto;
		margin-block-start: calc((1lh - 6px) / 2);
	}

	/* MANTIKSAL YON (23.07.2026): eski bildirim fiziksel dort degerli
	   `padding` kisayoluydu; RTL'de (ar/fa/he) 32px'lik girinti BITIS
	   tarafina dusuyor, cevap metni kutunun kenarina yapisiyordu (olculdu
	   /ar/: cevap ic baslangici 1px). 32px = 16px kap + 6px nokta + 10px bosluk.
	   Punto --fs-sm -> --fs-base: cevap artik govde tipografisiyle ayni. */
	.serka-pf-faq > :not(summary) {
		padding-block: 0 14px;
		padding-inline: 32px 16px;
		font-size: var(--fs-base);
		line-height: var(--lh-body);
		color: var(--muted);
		overflow-wrap: anywhere;
	}

	.serka-pf-faq > :not(summary) + :not(summary) {
		padding-block-start: 8px;
	}

	/* ---------------------------------------------------------------
	 * 12) Alt künye
	 * ------------------------------------------------------------ */

	.serka-pf-foot {
		padding-block: 26px 34px;
		border-block-start: 1px solid var(--line);
	}

	.serka-pf-foot p {
		max-inline-size: var(--measure);
		font-size: var(--fs-xs);
		line-height: 1.75;
		color: var(--muted);
	}

	.serka-pf-foot__meta {
		margin-block-start: 12px;
		font-size: var(--fs-xs);
		letter-spacing: var(--track-wide);
		color: var(--muted);
	}

	/* ---------------------------------------------------------------
	 * 13) Dar kap
	 * ------------------------------------------------------------ */

	@media (max-width: 47.9375rem) {

		.serka-pf__hero-grid {
			grid-template-columns: 96px minmax(0, 1fr);
			gap: 16px;
		}

		.serka-pf__hero {
			padding-block: 30px 32px;
		}

		.serka-pf-sec {
			padding-block: 30px;
		}

		.serka-pf__brand-sub {
			display: none;
		}
	}

	@media (prefers-reduced-motion: reduce) {

		.serka-pf-card,
		.serka-pf-site {
			transition-duration: .001ms;
		}

		.serka-pf-card:hover,
		.serka-pf-site:hover {
			transform: none;
		}
	}
}