/* ==========================================================================
   Prof. Dr. Taylan Şenol — marka kimliği

   Yön: editoryal, akademik, sakin. Modern Avrupa kliniği hissi.
   Klişelerden kaçınılan: pembe, siyah-altın lüks, yuvarlak istatistik
   kutuları, her alana ikon, kart içine hapsedilmiş bölümler.

   Renk büyük bloklar hâlinde bağırmaz; açık ve sakin yüzeyler üzerinde
   kontrollü vurgu olarak çalışır.
   ========================================================================== */

:root {
	/* --- Yüzeyler: sıcak kırık beyaz → açık taş → kireç --------------- */
	--renk-zemin: #fbf8f4;
	--renk-zemin-alt: #f3eee6;
	--renk-zemin-koyu: #e8e0d4;

	/* --- Metin: koyu grafit ------------------------------------------- */
	--renk-metin: #24262a;
	--renk-metin-soluk: #6a655e;

	/* --- Vurgu: derin mürdüm (logo + marka ile birebir) --------------- */
	--renk-vurgu: #351f2b;
	--renk-vurgu-koyu: #22141c;
	--renk-vurgu-metin: #fbf8f4;

	/* --- İkincil: kontrollü sıcak bakır ------------------------------- */
	--renk-ikincil: #a9673f;

	/* --- Soluk gül kurusu: yalnızca çok ince aksanlarda --------------- */
	--renk-gul: #c2969a;

	--renk-cizgi: #ded5c8;
	--renk-cizgi-ince: #ebe4d9;

	/* --- Tipografi ----------------------------------------------------
	   Newsreader: editoryal serif, optik boyutlandırma destekli, sakin.
	   Instrument Sans: çağdaş, yüksek okunabilirlik.
	   İkisi de Latin Extended-A içerir — ı, ğ, ş, İ sorunsuz.        */
	/* Poppins: sitenin tek font ailesi (gövde + başlık). Geri dönüş için
	   eski serif/sans yığınları yedek olarak sonda tutuldu. */
	--yazi-govde: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--yazi-baslik: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--olcek-govde: 1.0625rem;
	--satir-govde: 1.7;

	/* --- Ölçü ve ritim: bol nefes ------------------------------------- */
	--kap-genis: 1240px;
	--kap-dar: 680px;
	/* §18: bölüm boşlukları ~%18 azaltıldı (premium nefes korunur, sıkışmaz). */
	--bolum-bosluk: clamp(3rem, 7vw, 6.5rem);

	/* Gereksiz yuvarlaklık yok; yalnızca form ve butonlarda çok az. */
	--kose: 2px;
	--golge: none;
}

/* --------------------------------------------------------------------------
   Tipografik karakter
   -------------------------------------------------------------------------- */

.baslik-1,
.baslik-2,
.ozgecmis__ad,
.giris__baslik,
.metin h2 {
	font-weight: 500; /* Poppins: başlıklar medium — sakin, gereksiz bold yok */
	letter-spacing: -.02em;
}

.baslik-1 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.18; }
.baslik-2 { font-size: clamp(1.5rem, 2.9vw, 2.05rem); line-height: 1.25; }

.metin { font-size: 1.06rem; }
.metin h2 { font-family: var(--yazi-baslik); font-weight: 500; letter-spacing: -.02em; }
.metin h3 { font-weight: 600; letter-spacing: -.01em; }

/* Bölüm etiketleri — küçük, harf aralıklı, bakır */
.bolum__etiket,
.cevap__etiket,
.kunye__etiket,
.iletisim__baslik,
.bakis__baslik,
.icindekiler__baslik,
.yan__kart-etiket,
.kopru__etiket,
.ozgecmis__unvan,
.uyelik-duzen__baslik {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--renk-ikincil);
}

.marka__ad { font-family: var(--yazi-baslik); font-size: 1.18rem; font-weight: 500; letter-spacing: -.01em; }
.marka__gorev { font-size: .74rem; letter-spacing: .04em; }

/* Header logosu: masaüstünde ~%15 daha geniş → daha güçlü, otoriter duruş.
   Sticky (kaydırılmış) başlıkta da BİREBİR aynı boyut — küçülme/oynama yok.
   height:auto oranı korur; bozulma olmaz. cekirdek.css kompaktlaştırması
   override edilir. Mobil parent değeriyle kalır (taşma/nav riski yok). */
.marka__logo,
.ust.kaydi .marka__logo { width: clamp(246px, 25.9vw, 313px); }
@media (max-width: 640px) {
	.marka__logo,
	.ust.kaydi .marka__logo { width: min(68vw, 256px); }
}

/* --------------------------------------------------------------------------
   Kart hapsinden çıkış — brief: "her bölümü kartlara hapsetme"
   Kartlar kenarlıklı kutu değil, ince çizgiyle ayrılmış editoryal bloklar.
   -------------------------------------------------------------------------- */

.kart {
	border: 0;
	border-top: 1px solid var(--renk-cizgi);
	border-radius: 0;
	background: none;
}
.kart:hover {
	border-color: var(--renk-vurgu);
	transform: none;
	box-shadow: none;
}
.kart__gorsel { aspect-ratio: 3 / 2; }
.kart__govde { padding: 1.1rem 0 1.6rem; }
.kart__baslik { font-family: var(--yazi-baslik); font-weight: 400; font-size: 1.22rem; letter-spacing: -.01em; }
.kart__devam { color: var(--renk-ikincil); font-weight: 500; }

.etiket { border-radius: 2px; background: none; }

/* --------------------------------------------------------------------------
   Ana sayfa — giriş
   -------------------------------------------------------------------------- */

.giris {
	background: var(--renk-zemin);
	border-bottom: 1px solid var(--renk-cizgi-ince);
	padding-block: clamp(3rem, 8vw, 6.5rem);
}
.giris__ic { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }

@media (min-width: 960px) {
	.giris__ic { grid-template-columns: 1.08fr .92fr; }
}

.giris__etiket {
	display: block;
	margin-bottom: 1.6rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--renk-ikincil);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .17em;
	text-transform: uppercase;
}
.giris__baslik {
	font-family: var(--yazi-baslik);
	font-size: clamp(2.2rem, 5.2vw, 3.7rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.022em;
	margin: 0 0 1.5rem;
	max-width: 18ch;
	text-wrap: balance;
}
.giris__ozet {
	font-size: 1.12rem;
	line-height: 1.7;
	color: var(--renk-metin-soluk);
	max-width: 52ch;
	margin: 0 0 2.25rem;
}
.giris__eylem { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Portre çerçevesi — profesyonel çekim gelene kadar yer tutucu.
   Klişe kollarını bağlamış portre yerine dikey sinematik oran. */
.giris__gorsel {
	margin: 0;
	position: relative;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
}
.giris__gorsel img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

/* --------------------------------------------------------------------------
   Güven şeridi — akademik güven katmanı (satış sayacı değil)
   -------------------------------------------------------------------------- */
.guven-serit {
	background: var(--renk-zemin-alt);
	border-bottom: 1px solid var(--renk-cizgi-ince);
}
.guven-serit__ic {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.4rem 2rem;
	padding-block: clamp(1.6rem, 3.4vw, 2.4rem);
}
@media (min-width: 800px) {
	.guven-serit__ic { grid-template-columns: repeat(3, 1fr); }
	.guven-serit__oge:not(:first-child) { position: relative; padding-left: 2rem; }
	.guven-serit__oge:not(:first-child)::before {
		content: "";
		position: absolute;
		left: 0;
		top: .15em;
		bottom: .15em;
		width: 1px;
		background: var(--renk-cizgi);
	}
}
.guven-serit__oge { display: flex; flex-direction: column; gap: .35rem; }
.guven-serit__ust {
	font-size: .68rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--renk-ikincil);
	font-weight: 600;
}
.guven-serit__ana {
	font-family: var(--yazi-baslik);
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.25;
	color: var(--renk-metin);
}

/* --------------------------------------------------------------------------
   Footer — logo + sosyal
   -------------------------------------------------------------------------- */
.alt__logo { display: inline-block; }
.alt__logo img { display: block; width: 208px; max-width: 100%; height: auto; }
.alt__blok--marka .alt__aciklama { max-width: 34ch; margin-top: 1rem; }
.alt__sosyal {
	display: flex;
	gap: 1.25rem;
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
}
.alt__sosyal a {
	font-size: .85rem;
	color: var(--renk-metin-soluk);
	text-decoration: none;
	letter-spacing: .01em;
}
.alt__sosyal a:hover { color: var(--renk-vurgu); }

/* --------------------------------------------------------------------------
   Bölüm ritmi
   -------------------------------------------------------------------------- */

.bolum { padding-block: var(--bolum-bosluk); }
.bolum--alt { background: var(--renk-zemin-alt); }
.bolum + .bolum:not(.bolum--alt) { border-top: 1px solid var(--renk-cizgi-ince); padding-top: var(--bolum-bosluk); }
.bolum__ust { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.bolum__etiket { margin: 0 0 .9rem; }
.bolum__aciklama { color: var(--renk-metin-soluk); margin: .9rem 0 0; font-size: 1.03rem; }
.bolum__daha { margin-top: 2.5rem; }

/* --------------------------------------------------------------------------
   Süreç adımları — numaralar bordo daire değil, ince çizgili sıra
   -------------------------------------------------------------------------- */

.surec__no {
	background: none;
	color: var(--renk-ikincil);
	border: 1px solid var(--renk-cizgi);
	border-radius: 0;
	font-family: var(--yazi-baslik);
	font-size: 1.05rem;
	font-weight: 500;
}
.surec__ad { font-family: var(--yazi-baslik); font-weight: 500; }

@media (min-width: 900px) {
	.surec-bolum .surec__liste { grid-template-columns: repeat(5, 1fr); gap: 1.75rem; }
	.surec-bolum .surec__adim { grid-template-columns: 1fr; gap: 1rem; padding-bottom: 0; }
	.surec-bolum .surec__adim:not(:last-child)::before {
		left: 44px; top: 21px; bottom: auto; right: -1.75rem;
		width: auto; height: 1px;
	}
	.surec-bolum .surec__ad { margin-top: 0; font-size: 1.02rem; }
	.surec-bolum .surec__metin p { font-size: .92rem; }
}

/* --------------------------------------------------------------------------
   2 — Yaklaşım bloğu
   -------------------------------------------------------------------------- */

.yaklasim-blok__ic { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

@media (min-width: 880px) {
	.yaklasim-blok__ic { grid-template-columns: 1.05fr .95fr; }
}

.yaklasim-blok__ozet {
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--renk-metin-soluk);
	max-width: 46ch;
	margin: 0 0 1.75rem;
}
.yaklasim-blok__ilke { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.yaklasim-blok__ilke li {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 1.25rem;
	align-items: start;
	padding: 1.4rem 0;
	border-top: 1px solid var(--renk-cizgi);
	font-family: var(--yazi-baslik);
	font-size: 1.22rem;
	line-height: 1.4;
	text-wrap: balance;
}
.yaklasim-blok__ilke li:last-child { border-bottom: 1px solid var(--renk-cizgi); }
.yaklasim-blok__no {
	font-family: var(--yazi-baslik);
	font-size: 1rem;
	color: var(--renk-ikincil);
	font-variant-numeric: tabular-nums;
	padding-top: .35rem;
}

/* --------------------------------------------------------------------------
   3 — Uzmanlık dünyaları (numaralı editoryal liste)
   -------------------------------------------------------------------------- */

.dunyalar { list-style: none; margin: 0; padding: 0; }
.dunyalar__oge { border-top: 1px solid var(--renk-cizgi); }
.dunyalar__oge:last-child { border-bottom: 1px solid var(--renk-cizgi); }
.dunyalar__bag {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: center;
	padding: clamp(1.5rem, 3vw, 2.25rem) 0;
	text-decoration: none;
	transition: padding-left .2s ease;
}
.dunyalar__bag:hover { padding-left: .75rem; }
.dunyalar__no {
	font-family: var(--yazi-baslik);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--renk-gul);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.dunyalar__ad {
	display: block;
	font-family: var(--yazi-baslik);
	font-size: clamp(1.3rem, 2.6vw, 1.85rem);
	line-height: 1.2;
	margin-bottom: .3rem;
}
.dunyalar__ozet { display: block; color: var(--renk-metin-soluk); font-size: .98rem; max-width: 60ch; }
.dunyalar__ok { color: var(--renk-ikincil); font-size: 1.3rem; transition: transform .2s ease; }
.dunyalar__bag:hover .dunyalar__ok { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   4 & 5 — Anlatı blokları (onkoloji / ileri cerrahi)
   -------------------------------------------------------------------------- */

.anlati { padding-block: var(--bolum-bosluk); }
.anlati + .anlati { padding-top: 0; }
.anlati__ic { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

@media (min-width: 880px) {
	.anlati__ic { grid-template-columns: 1fr 1fr; }
	.anlati--ters .anlati__metin { order: 2; }
}

.anlati__ozet {
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--renk-metin-soluk);
	max-width: 48ch;
	margin: 0 0 1.5rem;
}
.anlati__bag {
	text-decoration: none;
	color: var(--renk-ikincil);
	font-weight: 500;
	font-size: 1rem;
}
.anlati__bag:hover { color: var(--renk-vurgu); }
.anlati__gorsel { align-self: stretch; }
.anlati__gorsel .gorsel-yeri__cerceve { height: 100%; }

/* --------------------------------------------------------------------------
   6 — Hekimin hikâyesi
   -------------------------------------------------------------------------- */

.hikaye__ic { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

@media (min-width: 900px) {
	.hikaye__ic { grid-template-columns: .8fr 1.2fr; }
	.hikaye__yan { position: sticky; top: 96px; }
}

.hikaye__metin { max-width: 62ch; }
.hikaye__metin p { margin: 0 0 1.3em; font-size: 1.09rem; line-height: 1.8; }
.hikaye__metin p:first-child {
	font-family: var(--yazi-baslik);
	font-size: 1.35rem;
	line-height: 1.5;
	color: var(--renk-metin);
}
.hikaye__metin p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   10 — Sakin davet
   -------------------------------------------------------------------------- */

.davet { background: var(--renk-vurgu); color: var(--renk-vurgu-metin); }
.davet__ic {
	display: grid;
	gap: 2rem;
	align-items: center;
	padding-block: clamp(3.5rem, 8vw, 6rem);
}

@media (min-width: 820px) {
	.davet__ic { grid-template-columns: 1fr auto; }
}

.davet__baslik {
	font-family: var(--yazi-baslik);
	font-weight: 400;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: 0 0 .75rem;
	max-width: 18ch;
	text-wrap: balance;
}
.davet__ozet { margin: 0; opacity: .82; max-width: 46ch; line-height: 1.65; }
.davet__eylem { display: flex; flex-wrap: wrap; gap: .75rem; }
.davet .dugme--birincil { background: var(--renk-vurgu-metin); color: var(--renk-vurgu); }
.davet .dugme--birincil:hover { background: var(--renk-zemin-alt); }
.davet .dugme--ikincil { border-color: color-mix(in srgb, var(--renk-vurgu-metin) 35%, transparent); color: var(--renk-vurgu-metin); }
.davet .dugme--ikincil:hover { border-color: var(--renk-vurgu-metin); color: var(--renk-vurgu-metin); }

/* Ana sayfada koyu davet bloğu doğrudan footer'a otursun — aradaki ivory
   boşluk fazlaydı. Footer kendi iç boşluğuyla nefes alıyor. */
.home .alt { margin-top: 0; }

/* --------------------------------------------------------------------------
   Özgeçmiş / hakkında
   -------------------------------------------------------------------------- */

.hakkinda__ic { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

@media (min-width: 880px) {
	.hakkinda__ic { grid-template-columns: .75fr 1.25fr; }
}

.hakkinda__gorsel { margin: 0; border-radius: 0; overflow: hidden; }
.hakkinda__liste { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0; }
.hakkinda__liste li {
	padding: .8rem 0;
	border-top: 1px solid var(--renk-cizgi-ince);
	color: var(--renk-metin-soluk);
	font-size: .96rem;
}
.hakkinda__liste li::before { content: none; }

.ozgecmis__portre::before { background: none; border: 1px solid var(--renk-gul); }
.ozgecmis__portre img,
.ozgecmis__portre--bos { border-radius: 0; }

.rakamlar__sayi { font-weight: 400; font-variation-settings: "opsz" 40; }
.cizelge__yil { font-weight: 500; }
.cizelge__baslik { font-family: var(--yazi-baslik); font-weight: 500; }

.alinti::before { color: var(--renk-gul); opacity: .6; }
.alinti__metin { font-weight: 400; font-variation-settings: "opsz" 44; }

/* --------------------------------------------------------------------------
   SSS + konum
   -------------------------------------------------------------------------- */

.sss-konum { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }

@media (min-width: 940px) {
	.sss-konum { grid-template-columns: 1.3fr .7fr; }
}

.sss-konum .sss { margin-top: 1.75rem; }
.sss__soru { font-family: var(--yazi-baslik); font-size: 1.08rem; font-weight: 500; }
.konum__adres { font-style: normal; margin: 1.75rem 0 1.25rem; color: var(--renk-metin-soluk); }
.konum__eylem { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   Dönüşüm bloğu — soğuk form değil, sakin davet
   -------------------------------------------------------------------------- */

.cta { background: var(--renk-vurgu); }
.cta .baslik-2 { font-family: var(--yazi-baslik); font-weight: 400; max-width: 20ch; }
.cta__ic { padding-block: clamp(3rem, 7vw, 5rem); }

/* --------------------------------------------------------------------------
   Video ve Instagram
   -------------------------------------------------------------------------- */

.video { border-radius: 0; }
.youtube__baslik { font-family: var(--yazi-baslik); font-weight: 500; font-size: 1.02rem; }
.instagram__bag { border-radius: 0; }
.eylem-kart__ikon { border-radius: 0; }

/* ==========================================================================
   SAYFA katmanı — Prof. Dr. Taylan Şenol   ·   2026-09-07
   Prototip: c:/tmp/taylan-proto/index.html · Gerekçe: .../DESIGN.md

   FİKİR: "kenar notu düzeni". Mevcut dil zaten doğru yerdeydi — sıcak kâğıt,
   koyu erik vurgu, GÖLGESİZ, 2px köşe, tek font. Palet ve font KORUNDU;
   değişen DÜZEN. Her bölüm iki sütun: solda bölüm numarası ve adı, sağda
   içerik. Kutu ve gölge yok; hiyerarşi ölçek, boşluk ve kılcal çizgiyle
   kuruluyor — Poppins'te 600 üstü ağırlık olmadığı için zaten doğru yol bu.

   NEDEN: site bir kütüphane (40 tedavi sayfası + ~285 yazı). Kenar notu,
   dergi/tez düzeninin "neredeyim" bilgisini verir ve kart ızgarasının
   tekdüzeliğinden kurtarır.

   ⚠️ BU BLOK DOSYANIN SONUNDA VE KATMANSIZ (@layer YOK).
   tema.css üst temanın çekirdeğinden SONRA yükleniyor (hekim-core
   inc/varliklar.php), bu yüzden burada kazanan kaynak sırasıdır. Bir @layer
   bloğuna alınsaydı katmansız eski kurallar bunu ezerdi.

   ⚠️ ÜST TEMAYA (hekim-core) HİÇBİR ŞEY YAZILMAZ — Portakal ile paylaşılıyor.
   ========================================================================== */

:root {
	/* ⚠️ EKLENEN İKİ KONTRAST KURALI (prototipte ölçüldü):
	   1) Terrakota (--renk-ikincil #a9673f) kâğıt üstünde 4.2:1 — METİN
	      RENGİ OLAMAZ. Metin gereken yerde --terrakota-metin kullanılır.
	   2) Pudra gül (--renk-gul) yalnız ERİK zemin üstünde metin olabilir;
	      kâğıtta yalnız grafik ögedir. */
	--terrakota-metin: #8e5330;   /* kâğıt üstünde 5.7:1 */

	/* Kenar notu sütunu — imzanın taşıyıcısı. */
	--kenar: 220px;
}

/* --------------------------------------------------------------------------
   1. KENAR NOTU DÜZENİ
   `.bolum > .kap` iki sütuna açılıyor. Bölüm başlığı (etiket + h2) sol
   sütuna, geri kalan içerik sağ sütuna geçiyor.
   -------------------------------------------------------------------------- */

@media (min-width: 62rem) {
	.bolum > .kap {
		display: grid;
		grid-template-columns: var(--kenar) minmax(0, 1fr);
		column-gap: clamp(2rem, 4vw, 4rem);
		align-items: start;
	}

	/* Bölüm başlığı kenar sütununda; yapışkan DEĞİL — uzun bölümlerde
	   yapışkan başlık alttaki içeriğin üstüne biniyor (başka bir sitede
	   ölçüldü, aynı hataya düşülmedi). */
	.bolum > .kap > .bolum__ust {
		grid-column: 1;
		grid-row: 1;
		text-align: start;
	}

	/* Başlıktan sonraki HER ŞEY sağ sütunda, alt alta. */
	.bolum > .kap > :not(.bolum__ust) {
		grid-column: 2;
	}

	.bolum > .kap > .bolum__ust ~ * {
		grid-row: auto;
	}

	/* Hikaye bolumunun kendi izgarasi YOK: `.kap` oldugu icin yukaridaki
	   kenar notu izgarasi `.hikaye__ic`in `.8fr 1.2fr` kuralini eziyor ve
	   `:not(.bolum__ust)` kurali yan blogu da metinle AYNI sutuna atiyordu.
	   Yapiskan yan blok boylece metnin ustune biniyordu (ekran goruntusu,
	   2026-09-10). Yan blok kenar sutununa alindi ve yapiskanligi kaldirildi
	   — `.bolum__ust` ile ayni gerekce. */
	.bolum > .kap > .hikaye__yan {
		grid-column: 1;
		grid-row: 1;
		position: static;
	}

	.bolum > .kap > .hikaye__metin {
		grid-column: 2;
		grid-row: 1;
	}

	.hikaye__yan .baslik-2 {
		font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
		font-weight: 500;
		line-height: 1.3;
		color: var(--renk-metin);
	}
}

/* Kenar notundaki etiket: numara + ad. Numara PHP'den gelmiyorsa da düzen
   bozulmaz — sayaç CSS'ten üretiliyor. */
.bolum { counter-increment: taylan-bolum; }

.bolum__etiket {
	display: block;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	/* ⚠️ terrakota DEĞİL: kâğıt üstünde 4.2:1 verir. */
	color: var(--terrakota-metin);
}

.bolum__etiket::before {
	content: counter(taylan-bolum, decimal-leading-zero) " — ";
	color: var(--renk-metin-soluk);
	letter-spacing: .06em;
}

/* Hero ve panel etiketlerinde numara BASILMAZ (bölüm değiller). */
.giris .bolum__etiket::before,
.hero-panel__etiket::before,
.arama__yan .bolum__etiket::before { content: none; }

@media (min-width: 62rem) {
	.bolum__ust .baslik-2 {
		font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
		font-weight: 500;
		line-height: 1.3;
		color: var(--renk-metin);
	}
}

/* --------------------------------------------------------------------------
   2. HERO — portre + geri arama paneli
   -------------------------------------------------------------------------- */

.giris__ic {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

@media (min-width: 62rem) {
	.giris__ic { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

.giris__metin { min-inline-size: 0; }

.giris__gorsel {
	position: relative;
	min-inline-size: 0;
	display: grid;
}

.giris__portre {
	display: block;
	inline-size: 100%;
	block-size: auto;
	/* Mercek çerçevesi dikey oran ister (Tepeler'de 3:4); 972×900 kaynak
	   neredeyse kare olduğu için burada kırpma DAHA DİK ayarlanıyor —
	   dosya değişmiyor, yalnız görünen kadraj. object-position üstte
	   tutuluyor ki çene kesilmesin. */
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: 50% 15%;
	border-radius: var(--kose);
}

/* --- Geri arama paneli — tam genişlik bant (Tepeler'deki .geri-ara deseni) --- */

.hero-panel {
	min-inline-size: 0;
	padding: clamp(1.15rem, 1rem + 1vw, 1.75rem);
	background: var(--renk-zemin);
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--kose);
	box-shadow: none;
}

/* Bant: .giris__ic'in ÜÇÜNCÜ çocuğu, iki sütunu birden kaplar. */
.hero-panel--bant {
	grid-column: 1 / -1;
	margin-block-start: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.hero-panel__ust {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3rem 1rem;
	margin-block-end: 1rem;
}

.hero-panel__etiket {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--terrakota-metin);
}

.hero-panel__baslik {
	margin: 0;
	font-family: var(--yazi-baslik);
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--renk-vurgu);
}

.hero-panel__giris {
	margin: 0;
	font-size: .9rem;
	line-height: 1.55;
	color: var(--renk-metin-soluk);
	max-inline-size: 56ch;
}

/* Alan satırı: dar ekranda alt alta, geniş ekranda ad · telefon · buton
   tek satırda (Tepeler'in .geri-ara__satir deseni). */
.hero-panel__satir {
	display: grid;
	gap: .9rem;
	grid-template-columns: minmax(0, 1fr);
}

.hero-panel__satir .hero-panel__alan { margin-block-start: 0; }

@media (min-width: 48rem) {
	.hero-panel__satir {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: end;
	}
}

@media (min-width: 62rem) {
	.hero-panel__satir {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	}
}

.hero-panel__alan { display: grid; gap: .3rem; min-inline-size: 0; }

.hero-panel__etiket-alan {
	font-size: .78rem;
	font-weight: 600;
	color: var(--renk-metin-soluk);
}

.hero-panel input[type="text"],
.hero-panel input[type="tel"] {
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: 2.75rem;
	padding: .55rem .75rem;
	font: inherit;
	font-size: .95rem;
	color: var(--renk-metin);
	background: #fff;
	border: 1px solid var(--renk-cizgi);
	border-radius: var(--kose);
}

.hero-panel input:focus-visible {
	outline: 2px solid var(--renk-vurgu);
	outline-offset: 2px;
}

.hero-panel__gonder .dugme {
	inline-size: 100%;
	min-block-size: 2.75rem;
	white-space: nowrap;
}

@media (min-width: 62rem) {
	.hero-panel__gonder .dugme { inline-size: auto; padding-inline: 1.5rem; }
}

/* Bal küpü: ekranda da ekran okuyucuda da yok. */
.hero-panel__bal {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.hero-panel__onay {
	display: flex;
	gap: .55rem;
	align-items: start;
	margin-block-start: .8rem;
	font-size: .78rem;
	line-height: 1.5;
	color: var(--renk-metin-soluk);
}

/* Varsayılan 13px kutu tek başına dokunma hedefi olarak küçük. */
.hero-panel__onay input {
	flex: none;
	inline-size: 1.15rem;
	block-size: 1.15rem;
	margin-block-start: .1rem;
	accent-color: var(--renk-vurgu);
}

.hero-panel__onay a { color: var(--terrakota-metin); }

.hero-panel__not {
	margin-block-start: .55rem;
	font-size: .74rem;
	line-height: 1.5;
	color: var(--renk-metin-soluk);
}

.hero-panel__sonuc {
	padding: .85rem 1rem;
	font-size: .92rem;
	color: var(--renk-metin);
	background: var(--renk-zemin-alt);
	border-inline-start: 3px solid var(--renk-vurgu);
	border-radius: var(--kose);
}

.hero-panel__sonuc--hata { border-inline-start-color: var(--terrakota-metin); }

/* --------------------------------------------------------------------------
   2b. HERO — koyu zemin (Tepeler'deki editoryal gece hissi, kendi kimliğiyle)

   Marka rengi kobalt/yeşil DEĞİL: mürdüm + bakır (logo ve site kimliğiyle
   birebir). Yapı ödünç alınıyor (koyu zemin, ışık havuzu, ölçüm çizgili
   portre çerçevesi, hızlı telefon/WhatsApp satırı) — palet Taylan'ın kendisi.
   -------------------------------------------------------------------------- */

.giris {
	--gece: var(--renk-vurgu-koyu);
	--gece-metin: #f7f1ee;
	--gece-metin-ikincil: #cbb9c2;
	--gece-metin-soluk: #a8929d;
	--gece-cizgi: #4a2f3d;

	position: relative;
	overflow: hidden;
	background: var(--gece);
	border-bottom: 0;
	color: var(--gece-metin);
}

/* Optik alan: kontrollü ışık havuzu, bakır tonunda. */
.giris::before {
	content: "";
	position: absolute;
	inset-block-start: -30%;
	inset-inline-end: -10%;
	inline-size: min(52rem, 90%);
	aspect-ratio: 1;
	background: radial-gradient(circle at center, rgb(169 103 63 / 22%) 0%, transparent 62%);
	pointer-events: none;
}

.giris__ic { position: relative; }

.giris__etiket { color: var(--renk-gul); }

.giris__baslik { color: var(--gece-metin); }

.giris__ozet { color: var(--gece-metin-ikincil); }

/* Butonlar: sitenin ".cta" bölümünde zaten kurulu koyu-zemin deseni. */
.giris .dugme--birincil { background: var(--renk-vurgu-metin); color: var(--renk-vurgu); }
.giris .dugme--birincil:hover { background: var(--renk-zemin-alt); }
.giris .dugme--ikincil { border-color: rgb(255 255 255 / 28%); color: var(--renk-vurgu-metin); }
.giris .dugme--ikincil:hover { border-color: var(--renk-vurgu-metin); color: var(--renk-vurgu-metin); }

/* Hızlı erişim: buton yığını değil, ince satır (Tepeler hero'suyla aynı dil). */
.giris__hizli {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.75rem;
	margin-block-start: 1.75rem;
	padding-block-start: 1.1rem;
	border-block-start: 1px solid var(--gece-cizgi);
}

.giris__hizli a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .88rem;
	color: var(--gece-metin-ikincil);
	text-decoration: none;
}

.giris__hizli a:hover,
.giris__hizli a:focus-visible { color: var(--renk-gul); }
.giris__hizli svg { inline-size: 1rem; block-size: 1rem; }

/* Portre: DÜZ kadraj (2026-09-10 kararı).
   Önceki "mercek" imzası — üstü tam daire kadraj + arkasında dolgu halkası ve
   kayık bakır halka — kaldırıldı. Kalan tek biçim kuralı sitenin standart
   köşe yarıçapı; dekoratif katman YOK, bu yüzden ::before / ::after de yok. */
.giris {
	overflow: clip;
}

.giris__cerceve {
	position: relative;
	isolation: isolate;
}

.giris__cerceve .giris__portre {
	border-radius: var(--kose);
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   3. GOOGLE DEĞERLENDİRMELERİ — sade
   Yorum metinleri alt tema parçasında zaten basılmıyor (uyum kararı).
   Burada yalnız kalan rozetin ölçüsü ve YILDIZ KONTRASTI düzeltiliyor.
   -------------------------------------------------------------------------- */

/* ⚠️ Yıldızlar terrakota ile 3.87:1 çıkıyordu (ölçüldü). Yıldız dekor değil,
   görünür BİLGİ taşıyor — metin tonuna çevrildi. */
.deger-yildiz__dolu { color: var(--terrakota-metin); }
.deger-yildiz__bos { color: var(--renk-metin-soluk); }

.degerler--sade .degerler__ozet {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .85rem;
	align-items: baseline;
	margin-block-start: 1rem;
}

.degerler--sade .degerler__puan {
	font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
	font-weight: 500;
	line-height: 1;
	color: var(--renk-vurgu);
}

.degerler--sade .degerler__sayi,
.degerler--sade .degerler__aciklama {
	font-size: .9rem;
	color: var(--renk-metin-soluk);
}

.degerler--sade .degerler__aciklama { margin-block-start: .75rem; max-inline-size: 56ch; }
.degerler--sade .degerler__eylem { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: 1.5rem; }

/* --------------------------------------------------------------------------
   4. DOKUNMA HEDEFLERİ
   Ölçüm: ekmek kırıntısı bağlantıları 19px, kaynak listesi bağlantıları 20px,
   footer gezinti bağlantıları küçüktü. WCAG 2.5.8 en az 24×24 CSS px ister.

   ⚠️ `min-block-size` SATIR İÇİ ögede hiçbir şey yapmaz — bağlantıya önce
   bir kutu (inline-flex) verilmeli. Bu ders bugün başka bir sitede iki kez
   ısırdı; burada baştan doğru yazılıyor.
   -------------------------------------------------------------------------- */

.izyolu a,
.kaynaklar a,
.alt__menu a,
.alt__yasal a,
.alt__sosyal a {
	display: inline-flex;
	align-items: center;
	inline-size: fit-content;
	min-block-size: 1.75rem;
}

/* --------------------------------------------------------------------------
   5. HAREKET TERCİHİ
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.giris__portre,
	.hero-panel { transition: none; }
}

/* --------------------------------------------------------------------------
   6. CANLIDA ÖLÇÜLEN DÜZELTMELER (2026-09-07)
   -------------------------------------------------------------------------- */

/* 🔴 GERÇEK KONTRAST KUSURU — footer iletişim bağlantısı.
   `.alt__iletisim-bag` terrakota (#a9673f) ile çiziliyordu ve footer'ın
   #f3eee6 zemini üzerinde **3.87:1** ölçüldü (AA eşiği 4.5). Bu tam olarak
   token yorumunda yazan kuralın ihlali: terrakota kâğıt üstünde METİN
   OLAMAZ. Metin karşılığına çevriliyor (5.7:1). */
.alt__iletisim-bag,
a.alt__iletisim-bag { color: var(--terrakota-metin); }

/* Aynı kuralın taranmasında çıkan diğer terrakota metin kullanımları. */
.anlati__bag,
.bolum__daha a { color: var(--terrakota-metin); }

/* Dokunma hedefleri — menü bağlantıları 20px yükseklikteydi.
   ⚠️ Buradaki bağlantılar `li` içinde SATIR İÇİ; `min-block-size` satır içi
   ögede hiçbir şey yapmaz. `display:block` veriliyor (zaten blok bir `li`
   içindeler, yerleşim bozulmuyor) ve dikey dolgu ile 24px eşiği aşılıyor. */
.ust__gezinme ul.menu > li > a,
.mega__liste li > a,
.alt__menu li > a,
.alt__yasal li > a {
	display: block;
	padding-block: .3rem;
	min-block-size: 1.75rem;
}

/* "İçeriğe geç" bağlantısı — üst temada `left: -9999px` ile gizleniyor.
   ⚠️ ÜST TEMA (hekim-core) Portakal ile paylaşılıyor, oraya dokunulmuyor;
   kural buradan eziliyor. -9999px LTR'de yatay kaydırma üretmez (belge
   genişliği ölçüldü: görünümle aynı) ama düzende gerçek bir artık bırakıyor.
   `clip-path` modern karşılığı: öge 0×0 kutuda kalır, ekran okuyucuda
   erişilebilir olmaya devam eder, odaklanınca geri gelir. */
.atla {
	position: absolute;
	inset-inline-start: 0;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.atla:focus,
.atla:focus-visible {
	inline-size: auto;
	block-size: auto;
	overflow: visible;
	clip-path: none;
	z-index: 100;
	padding: .75rem 1.25rem;
	color: var(--renk-vurgu-metin);
	background: var(--renk-vurgu);
}


/* --------------------------------------------------------------------------
   HERO — SEDIR DUZELTMELERI (2026-09-09)

   1) GONDER DUGMESI GORUNMEZDI.
      `.giris .dugme--birincil` hero'nun KOYU zemini icin butonu ters cevirir
      (krem dolgu + murdum yazi). "Sizi arayalim" paneli ise .giris'in
      ICINDE ama ACIK krem bir yuzeydir; ters kural oraya da sizinca dugme
      krem uzerine krem kaliyordu. Olculdu: bg #FBF8F4, panel zemini #FBF8F4.
      Panel gunduz dunyasina aittir; ters cevirme burada geri alinir.

   -------------------------------------------------------------------------- */

.giris .hero-panel .dugme--birincil {
	background: var(--renk-vurgu);
	color: var(--renk-vurgu-metin);
}

.giris .hero-panel .dugme--birincil:hover,
.giris .hero-panel .dugme--birincil:focus-visible {
	background: var(--renk-vurgu-koyu);
	color: var(--renk-vurgu-metin);
}