/* ==========================================================================
   Dr. Mehmet Portakal — MARKA KATMANI
   Kavram: "Sıcak Işık"   ·   v0.2 (rötuşlu)

   Portakal, meyve olarak değil IŞIK ve DAİRESEL FORM olarak yorumlanır.
   Sayfanın arkasında tek, geniş, yumuşak bir ışık kaynağı vardır; bölümler
   o ışığın farklı saatleri gibi ısınıp soğur. İmza biçim GÜNEŞ KUBBESİ —
   görselin üstü geniş, yumuşak ve hafif asimetrik bir kubbeyle biter.
   Klasik/sivri/dekoratif mimari kemer değil.

   "Şifa Olsun" bir slogan bandı değil imzadır: girişte bir kez, kapanışta
   bir kez. Arada geçmez.

   Bu dosya çekirdeğin (hekim-core) değişkenlerini ezer ve Portakal'a özgü
   ilkel bileşenleri ekler.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN'LAR
   -------------------------------------------------------------------------- */

:root {
	/* --- Renk -------------------------------------------------------------
	   Turuncu ana yüzey rengi DEĞİL. Zemin sıcak kâğıt, metin sıcak koyu;
	   turuncu yalnızca eylem ve küçük vurgu. */

	--kagit:            #fbf8f3;   /* ana zemin — sıcak kırık beyaz */
	--kagit-katman:     #f4efe6;   /* nötr sıcak katman */
	--kagit-isik:       #fbf2e8;   /* "öğle" — çok soluk sıcak ışık bölümü */
	--kagit-yaprak:     #f1f4ee;   /* "gölge" — çok soluk yaprak bölümü */
	--kagit-derin:      #ebe3d6;   /* nadir vurgu bloğu */

	--murekkep:         #1f1a15;   /* ana metin — 14.8:1 */
	--murekkep-soluk:   #5b5349;   /* ikincil metin — 6.9:1 */
	--murekkep-yardimci:#6f6559;   /* yardımcı/küçük metin — 5.3:1 (AA ✓)
	                                  ESKİ #8B8175 (3.6:1) kaldırıldı: kullanıcıya
	                                  gösterilen hiçbir metin AA altına düşmez. */

	--kabuk:            #e5dac9;   /* çizgi/kenarlık — sıcak kum */
	--kabuk-koyu:       #d3c4ad;

	--isik:             #c9581f;   /* DEKORATİF turuncu — grafik öğe, güneş işareti */
	--isik-koyu:        #a2400f;   /* ETKİLEŞİM turuncu — link, buton (6.0:1) */
	--isik-sicak:       #e2743a;   /* yalnız ışık/gradyan içinde, metinde ASLA */
	--isik-sis:         rgba(201, 88, 31, .075);

	--yaprak:           #5f6b54;   /* destek: doğal yeşil-gri (5.6:1) */

	/* Çekirdek değişkenlerini ez */
	--renk-zemin:       var(--kagit);
	--renk-zemin-alt:   var(--kagit-katman);
	--renk-metin:       var(--murekkep);
	--renk-metin-soluk: var(--murekkep-soluk);
	--renk-vurgu:       var(--isik-koyu);
	--renk-vurgu-koyu:  #82330b;
	--renk-vurgu-metin: #fff8f1;
	--renk-ikincil:     var(--isik);
	--renk-cizgi:       var(--kabuk);

	/* --- Tipografi (2026-07-28 yeniden kuruldu) ---------------------------
	   TEK AİLE: Manrope. Fraunces (serif başlık) + Karla (gövde) ikilisi
	   kaldırıldı — sitede fazla editoryal ve parçalı duruyordu.
	   Başlık/gövde ayrımı artık FONTLA değil, AĞIRLIK + ÖLÇEK + RENK ile
	   kuruluyor. Bu, hekim kimliğinde daha sakin ve güvenilir bir hiyerarşi
	   veriyor; hazır SaaS temalarının Inter/Poppins nötrlüğüne de düşmüyor. */
	--font-sans:   'Manrope', 'Segoe UI', Arial, sans-serif;
	--yazi-baslik: var(--font-sans);   /* geriye dönük uyum: eski adlar korundu */
	--yazi-govde:  var(--font-sans);

	/* Ağırlık ölçeği — 700/800 yalnız zorunlu yerde. */
	--ag-govde:  400;
	--ag-menu:   500;
	--ag-baslik: 600;
	--ag-dugme:  600;

	--olcek-govde: 1.0625rem;   /* 17px masaüstü */
	--satir-govde: 1.7;

	/* Başlık ölçeği. Eski --y-* adları korunuyor (tema geneli onları kullanıyor),
	   değerler yeni sisteme göre yeniden ayarlandı. */
	--y-dev:    clamp(2.4rem, 4vw, 3.5rem);      /* sayfa H1 */
	--y-buyuk:  clamp(2rem, 3vw, 2.8rem);        /* H2 */
	--y-orta:   clamp(1.3rem, 2vw, 1.75rem);     /* H3 */
	--y-kucuk:  1.125rem;                        /* H4 / kart başlığı */
	--y-etiket: .75rem;                          /* eyebrow — 12px */
	--y-menu:   .9375rem;                        /* menü — 15px */
	--y-hero:   clamp(2.6rem, 4.6vw, 4rem);      /* YALNIZ hero H1 */

	/* --- Ölçü ve ritim ---------------------------------------------------- */
	--kap-genis: 1160px;
	--kap-dar:   690px;
	--kap-tam:   1440px;
	--bosluk:    1.25rem;
	/* 2026-07-28: 3.25-6rem (52-96px) idi. Sekiz bölümde 96+96px sadece
	   boşluğa ~1.500px gidiyordu. Bölümler birbirine YAPIŞMADAN daraltıldı;
	   ekranlar arasında anlamsız boş alan kalmıyor. */
	--bolum-bosluk: clamp(2.75rem, 5.2vw, 4.5rem);

	/* --- Form dili --------------------------------------------------------
	   Arayüz keskin ve sakin; medya organik. İki ayrı yarıçap dili. */
	--kose:      6px;
	--kose-kart: 12px;

	/* GÜNEŞ KUBBESİ — markanın imza biçimi.
	   Yatay 57/43, dikey 44/37. Üç şeyi aynı anda yapar:
	     · GENİŞ  — dikey yarıçap %37–44, yarım daireye çıkmaz (kapı/niş olmaz),
	     · YUMUŞAK — sivrilik yok, tepe düz bir yay,
	     · ASİMETRİK — tepe noktası merkezden sola kayar; bu kayma formu
	       "mimari kemer"den çıkarıp ufuktan doğan güneşe yaklaştırır ve
	       oranı Portakal'a özgü kılar (simetrik kemer jeneriktir). */
	--kubbe: 57% 43% var(--kose-kart) var(--kose-kart) / 44% 37% 0 0;

	/* --- Gölge ------------------------------------------------------------
	   Editoryal dil: gölge neredeyse yok. Derinlik zemin tonu ve ince
	   çizgiyle kurulur; kartlarda yalnız hover'da çok hafif bir yükselme. */
	--golge-ince: 0 1px 2px rgba(90, 55, 20, .05);
	--golge:      0 1px 2px rgba(90, 55, 20, .05), 0 10px 24px -20px rgba(90, 55, 20, .28);

	/* --- Hareket ---------------------------------------------------------- */
	--gecis-hizli: 140ms cubic-bezier(.2, .6, .3, 1);
	--gecis:       260ms cubic-bezier(.2, .6, .3, 1);
	--gecis-yavas: 620ms cubic-bezier(.2, .6, .3, 1);
}

/* --------------------------------------------------------------------------
   2. ZEMİN — kâğıt dokusu + ışık
   -------------------------------------------------------------------------- */

html { overflow-x: clip; }   /* dekoratif halkalar taşmasın (sticky bozulmaz) */

body {
	background-color: var(--kagit);
	background-image:
		radial-gradient(1100px 620px at 78% -12%, var(--isik-sis), transparent 62%),
		radial-gradient(760px 480px at 6% 4%, rgba(95, 107, 84, .045), transparent 60%);
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-feature-settings: 'kern' 1, 'liga' 1;
	text-rendering: optimizeLegibility;
}

/* Tanecik — dijital düzlüğü kırar. ÇOK HAFİF: %2 opaklık, ince frekans.
   Metnin üstünden geçer ama okunabilirliği ölçülebilir biçimde etkilemez. */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: .02;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
	body { background-attachment: scroll; }
}

/* --------------------------------------------------------------------------
   3. TİPOGRAFİ
   -------------------------------------------------------------------------- */

/* Başlıklar. Manrope'ta `opsz` ekseni YOKTUR — eski `font-variation-settings`
   kuralları kaldırıldı (tanımsız eksen sessizce yok sayılır ama kafa karıştırır).
   Hiyerarşi artık ağırlık + ölçek + satır yüksekliği ile kuruluyor. */
h1, h2, h3, h4, h5, h6, .baslik {
	font-family: var(--font-sans);
	font-weight: var(--ag-baslik);
	line-height: 1.16;
	letter-spacing: -.018em;
	color: var(--murekkep);
	text-wrap: balance;
}

h1 { font-size: var(--y-dev);   line-height: 1.1;  letter-spacing: -.026em; }
h2 { font-size: var(--y-buyuk); line-height: 1.15; letter-spacing: -.022em; }
h3 { font-size: var(--y-orta);  line-height: 1.25; font-weight: 550; }
h4 { font-size: var(--y-kucuk); line-height: 1.35; font-weight: 550; letter-spacing: -.008em; }

p { text-wrap: pretty; }

.okuma { max-width: var(--kap-dar); }
.okuma p { font-size: 1.0625rem; }

/* Gövde mobilde 16px'e iner — 17px küçük ekranda satır sayısını şişiriyor. */
@media (max-width: 640px) {
	:root { --olcek-govde: 1rem; --satir-govde: 1.68; }
}

/* YEDEK tipografik wordmark.
   Gerçek logo 2026-07-28'de devreye girdi (marka.logo = assets/logo-marka.png),
   bu sınıf artık yalnız logo dosyası bulunamazsa görünür. */
.wordmark {
	font-family: var(--font-sans);
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -.014em;
	line-height: 1.1;
	color: var(--murekkep);
	text-decoration: none;
	display: inline-block;
}

.wordmark__alt {
	display: block;
	font-family: var(--yazi-govde);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--murekkep-yardimci);
	margin-block-start: .2rem;
}

/* Üst etiket — güneş işaretinin İZİNLİ olduğu iki yerden biri. */
.bolum-etiket {
	font-family: var(--yazi-govde);
	font-size: var(--y-etiket);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--murekkep-yardimci);
	display: flex;
	align-items: center;
	gap: .7rem;
}

.bolum-etiket::before {
	content: '';
	inline-size: .5rem;
	block-size: .5rem;
	border-radius: 50%;
	background: var(--isik);
	box-shadow: 0 0 0 3px rgba(201, 88, 31, .14);
	flex: none;
	align-self: flex-start;
	margin-block-start: .32em;
}

.spot {
	font-size: clamp(1.12rem, 1.9vw, 1.32rem);
	line-height: 1.62;
	color: var(--murekkep-soluk);
	max-width: 56ch;
}

/* --- Marka imzası ------------------------------------------------------
   "Şifa Olsun" dipnot gibi durmasın diye kendi satırında, önünde ince bir
   çizgi ve küçük bir güneş işaretiyle gelir. Büyütülmez, banda dönüşmez. */
.imza {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	font-family: var(--yazi-baslik);
	font-size: 1.06rem;
	font-style: italic;
	color: var(--isik-koyu);
	letter-spacing: .005em;
	line-height: 1;
}

.imza::before {
	content: '';
	inline-size: 2.1rem;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, var(--kabuk-koyu));
	flex: none;
}

.imza::after {
	content: '';
	inline-size: .34rem;
	block-size: .34rem;
	border-radius: 50%;
	background: var(--isik);
	flex: none;
}

/* --------------------------------------------------------------------------
   4. BAĞLANTILAR
   -------------------------------------------------------------------------- */

.icerik a:not(.dugme):not(.kart) {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--kabuk-koyu);
	text-decoration-thickness: 1.5px;
	text-underline-offset: .22em;
	transition: color var(--gecis-hizli), text-decoration-color var(--gecis-hizli);
}

.icerik a:not(.dugme):not(.kart):hover {
	color: var(--isik-koyu);
	text-decoration-color: var(--isik);
}

/* --------------------------------------------------------------------------
   5. DÜĞMELER
   Editoryal dil: gölge yok denecek kadar az, hover sakin (renk kayması),
   yükselme/zıplama yok.
   -------------------------------------------------------------------------- */

.dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .82rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--kose);
	font-family: var(--font-sans);
	font-size: .9375rem;
	font-weight: var(--ag-dugme);
	letter-spacing: -.004em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--gecis-hizli), border-color var(--gecis-hizli),
		color var(--gecis-hizli);
}

.dugme--birincil {
	background: var(--isik-koyu);
	color: var(--renk-vurgu-metin);
	box-shadow: var(--golge-ince);
}

.dugme--birincil:hover { background: #8d360a; }

.dugme--ikincil {
	background: transparent;
	color: var(--murekkep);
	border-color: var(--kabuk-koyu);
}

.dugme--ikincil:hover { border-color: var(--murekkep); background: rgba(255, 255, 255, .55); }

.dugme--sade {
	padding-inline: 0;
	background: none;
	color: var(--isik-koyu);
	border: 0;
	border-bottom: 1.5px solid var(--kabuk-koyu);
	border-radius: 0;
}

.dugme--sade:hover { border-bottom-color: var(--isik); }

/* --------------------------------------------------------------------------
   6. GÜNEŞ KUBBESİ — imza biçim
   -------------------------------------------------------------------------- */

.kubbe {
	position: relative;
	border-radius: var(--kubbe);
	overflow: hidden;
	background: var(--kagit-katman);
	isolation: isolate;
}

.kubbe > img,
.kubbe > video { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Görselin ardındaki sıcak ışık — dekoratif, ekran okuyucuya görünmez.

   YATAY TAŞMA DÜZELTMESİ (2026-07-28): `inline-size: min(118%, 640px)`
   kapsayıcısından geniş olduğu için 1024–1100px arası ekranlarda sayfayı
   ~12px yatay kaydırılabilir yapıyordu (1024'te ölçüldü: sağ kenar 1033px).
   Öğe dekoratif; kapsayıcıyı aşması gerekmiyor. Genişlik %100'e çekildi ve
   taşma ihtimaline karşı üst kapsayıcı `clip` ile kesiliyor. */
.giris__medya { overflow: clip; }

.isik-halkasi {
	position: absolute;
	z-index: -1;
	inset-block-start: -8%;
	inset-inline-start: 50%;
	translate: -50% 0;
	inline-size: min(100%, 640px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 46% 44%,
		rgba(226, 116, 58, .30) 0%,
		rgba(226, 116, 58, .13) 38%,
		rgba(226, 116, 58, 0) 68%);
	pointer-events: none;
}

@media (max-width: 780px) {
	.isik-halkasi { inline-size: 104%; inset-block-start: -4%; }
}

/* --------------------------------------------------------------------------
   7. HAREKET SİSTEMİ
   Sistemde SADECE İKİ hareket vardır. Üçüncüsü eklenmez.
     H1 · Giriş sahnesi  — hero öğeleri 90 ms aralıkla belirir, bir kez.
     H2 · Işık nefesi    — halo 22 sn'de bir çok yavaş ölçek/opaklık döngüsü.
   Bunların dışında yalnız hover/focus geçişleri vardır (renk, kenarlık).
   prefers-reduced-motion: reduce → H1 ve H2 TAMAMEN durur.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	/* H1 — giriş sahnesi */
	.sahne > * { animation: belir var(--gecis-yavas) both; }
	.sahne > :nth-child(1) { animation-delay: .05s; }
	.sahne > :nth-child(2) { animation-delay: .14s; }
	.sahne > :nth-child(3) { animation-delay: .23s; }
	.sahne > :nth-child(4) { animation-delay: .32s; }
	.sahne > :nth-child(5) { animation-delay: .41s; }

	@keyframes belir {
		from { opacity: 0; transform: translateY(14px); }
		to   { opacity: 1; transform: none; }
	}

	/* H2 — ışık nefesi */
	.isik-halkasi { animation: nefes 22s ease-in-out infinite; }

	@keyframes nefes {
		0%, 100% { transform: scale(1);    opacity: 1; }
		50%      { transform: scale(1.06); opacity: .84; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.sahne > *,
	.isik-halkasi { animation: none !important; }
	.sahne > * { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. KART
   Beyaz kart + gölge yığını YOK. Kâğıdın üstünde ince çizgi.
   -------------------------------------------------------------------------- */

.kart {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: 1.55rem;
	background: rgba(255, 255, 255, .5);
	border: 1px solid var(--kabuk);
	border-radius: var(--kose-kart);
	text-decoration: none;
	color: inherit;
	transition: background var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}

a.kart:hover {
	background: #fff;
	border-color: var(--kabuk-koyu);
	box-shadow: var(--golge);
}

.kart__ust {
	font-size: var(--y-etiket);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--isik-koyu);
}

.kart__baslik {
	font-family: var(--yazi-baslik);
	font-size: var(--y-kucuk);
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
}

.kart__ozet { font-size: .95rem; color: var(--murekkep-soluk); margin: 0; }

/* --- İçerik türü işareti ------------------------------------------------
   Kartı jenerik olmaktan çıkaran tek detay: kartın üst kenarında, SOL
   TARAFA yaslı, kısa ve ASİMETRİK bir çizgi. Uzunluğu ve rengi içerik
   türüne göre değişir; ikon yok, dekoratif kalabalık yok.
   Güneş noktası burada TEKRARLANMAZ (o yalnız bölüm etiketi ve önemli
   ayraçlara ait). */

.kart--isaretli { --isaret: 30%; --isaret-renk: var(--isik); }
.kart--isaretli::before {
	content: '';
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: -1px;
	inline-size: var(--isaret);
	block-size: 2px;
	background: var(--isaret-renk);
	border-start-start-radius: var(--kose-kart);
	transition: inline-size var(--gecis);
}

a.kart--isaretli:hover::before { inline-size: calc(var(--isaret) + 14%); }

.kart--odak    { --isaret: 34%; --isaret-renk: var(--isik); }
.kart--rehber  { --isaret: 20%; --isaret-renk: var(--kabuk-koyu); }
.kart--video   { --isaret: 26%; --isaret-renk: var(--yaprak); }

/* --- Süreç adımı --------------------------------------------------------
   Masaüstü: dört sütun, rakam kartın üstünde.
   Mobil: mekanik kutu dizisi DEĞİL — kenarlıklar kalkar, rakam sol oluğa
   geçer ve adımları ince dikey bir çizgi birbirine bağlar. */

.adimlar { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(4, 1fr); }

.adimlar__oge { position: relative; }

.adimlar__no {
	display: block;
	font-family: var(--yazi-baslik);
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--isik-koyu);
	margin-block-end: .55rem;
}

@media (max-width: 1024px) { .adimlar { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 780px) {
	.adimlar {
		grid-template-columns: 2.1rem 1fr;
		gap: 0 1rem;
		align-items: start;
	}
	.adimlar__oge {
		display: contents;               /* rakam sol oluğa, metin sağ sütuna */
	}
	.adimlar__oge > .adimlar__no {
		grid-column: 1;
		margin: 0;
		padding-block-start: .12rem;
		text-align: end;
		position: relative;
	}
	/* Adımları bağlayan ince dikey çizgi */
	.adimlar__oge > .adimlar__no::after {
		content: '';
		position: absolute;
		inset-block-start: 1.65rem;
		inset-inline-end: .28rem;
		inline-size: 1px;
		block-size: calc(100% + 1.35rem);
		background: var(--kabuk);
	}
	.adimlar__oge:last-child > .adimlar__no::after { display: none; }
	.adimlar__oge > .adimlar__govde {
		grid-column: 2;
		padding-block-end: 1.45rem;
		border: 0;
		background: none;
		padding-inline: 0;
	}
	.adimlar__oge > .adimlar__govde .kart__baslik { margin-block-end: .3rem; }
}

/* --------------------------------------------------------------------------
   9. BÖLÜM RİTMİ — "ışığın farklı saatleri"
   Uzun sayfada her bölüm aynı bej'e karışmasın diye üç kontrollü zemin var.
   Geçişler SERT DEĞİL: tonlu bölümler üst/alt kenarlarında kâğıda erir.
   -------------------------------------------------------------------------- */

.bolum { padding-block: var(--bolum-bosluk); position: relative; }

.bolum__kap { inline-size: min(100% - 2.5rem, var(--kap-genis)); margin-inline: auto; }

.bolum__basi {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	margin-block-end: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* Tonlu bölümler — kenarları yumuşak */
.bolum--isik,
.bolum--yaprak,
.bolum--katman { background-repeat: no-repeat; background-size: 100% 100%; }

.bolum--isik {
	background-image: linear-gradient(180deg,
		rgba(251, 242, 232, 0) 0%, var(--kagit-isik) 7%,
		var(--kagit-isik) 93%, rgba(251, 242, 232, 0) 100%);
}

.bolum--yaprak {
	background-image: linear-gradient(180deg,
		rgba(241, 244, 238, 0) 0%, var(--kagit-yaprak) 7%,
		var(--kagit-yaprak) 93%, rgba(241, 244, 238, 0) 100%);
}

.bolum--katman {
	background-image: linear-gradient(180deg,
		rgba(244, 239, 230, 0) 0%, var(--kagit-katman) 7%,
		var(--kagit-katman) 93%, rgba(244, 239, 230, 0) 100%);
}

/* Ayraç — sade çizgi. Güneş işareti YALNIZCA .ayrac--isaretli'de. */
.ayrac {
	inline-size: min(100% - 2.5rem, var(--kap-genis));
	margin-inline: auto;
	block-size: 1px;
	background: var(--kabuk);
	position: relative;
	border: 0;
}

.ayrac--isaretli::after {
	content: '';
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	inline-size: .45rem;
	block-size: .45rem;
	border-radius: 50%;
	background: var(--isik);
	box-shadow: 0 0 0 5px var(--kagit);
}

/* --------------------------------------------------------------------------
   10. IZGARA
   -------------------------------------------------------------------------- */

.izgara { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.izgara--2 { grid-template-columns: repeat(2, 1fr); }
.izgara--3 { grid-template-columns: repeat(3, 1fr); }
.izgara--4 { grid-template-columns: repeat(4, 1fr); }

/* Asimetrik ikili — hero ve anlatı blokları. Taylan'ın 50/50'sinden farklı. */
.izgara--anlati {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(1.5rem, 5vw, 4rem);
	align-items: center;
}

@media (max-width: 1024px) { .izgara--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 780px) {
	.izgara--2, .izgara--3, .izgara--4, .izgara--anlati { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   11. FORM
   -------------------------------------------------------------------------- */

input[type='text'], input[type='email'], input[type='tel'], textarea, select {
	inline-size: 100%;
	padding: .8rem .9rem;
	background: #fff;
	border: 1px solid var(--kabuk-koyu);
	border-radius: var(--kose);
	font-family: var(--yazi-govde);
	font-size: 1rem;
	color: var(--murekkep);
	transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
}

input:focus, textarea:focus, select:focus {
	border-color: var(--isik-koyu);
	box-shadow: 0 0 0 3px rgba(201, 88, 31, .16);
	outline: none;
}

label {
	display: block;
	margin-block-end: .35rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--murekkep-soluk);
}

/* --------------------------------------------------------------------------
   12. ERİŞİLEBİLİRLİK
   -------------------------------------------------------------------------- */

:focus-visible {
	outline: 3px solid var(--isik-koyu);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection { background: rgba(201, 88, 31, .18); color: var(--murekkep); }

/* Küçük/yardımcı metin sınıfı — kullanıcıya gösterilen her yerde AA (5.3:1). */
.yardimci { font-size: .88rem; color: var(--murekkep-yardimci); }