/* ==========================================================================
   Dr. Mehmet Portakal — "DİLİM" katmanı   ·   2026-09-07
   Prototip: c:/tmp/portakal-proto/index.html · Gerekçe: .../DESIGN.md

   NE YAPAR: Marka adı bir meyve; mevcut tema turuncuyu "ışık" olarak zaten
   kullanıyordu ama bunu bir BİÇİME dönüştürmemişti. Portakal kesiti —
   merkezden açılan yaylar — tek bir geometrik karar olarak her yerde tekrar
   eder: kartlarda tek köşe geniş yarıçap, etiketlerde yaprak noktası,
   liste imlerinde aynı nokta.

   ⚠️ SINIF ADLARI PROTOTİPTEN DEĞİL CANLI TEMADAN.
   Prototip kendi adlarını (.ust-eylem, .ana-menu, .mobil-panel) kullanıyordu.
   Canlı temanın adları (.ust__*, .menu__*, .giris__*) portakal.js ile
   SÖZLEŞMEDİR — mobil menü, yapışkan başlık ve video modalı oraya bağlı.
   Bu yüzden görünüm değişir, adlar KORUNUR.

   ⚠️ BU DOSYA EN SON YÜKLENİR VE KATMANSIZDIR (@layer YOK).
   Temanın mevcut kuralları da katmansız; bir @layer bloğuna alınsaydı
   kaynak sırasına bakılmaksızın ezilir ve "yarısı yeni yarısı eski" sayfa
   çıkardı. Yükleme sırası functions.php'de portakal-sablonlar'a bağlıdır.

   ⚠️ ÜST TEMAYA (hekim-core) HİÇBİR ŞEY YAZILMAZ.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BELİRTEÇLER — eski adlar korunur, değerler DİLİM paletine çekilir
   -------------------------------------------------------------------------- */

:root {
	/* Kâğıt dünyası — prototipte ölçülen değerler. */
	--kagit:        #FAF6F0;
	--kagit-katman: #F2EBE0;
	--kagit-derin:  #EAE0D1;

	--murekkep:       #1C1712;   /* kâğıt üstünde 15.0:1 */
	--murekkep-soluk: #574E44;   /* kâğıt üstünde  7.6:1 */
	--kabuk:          #E3D9C9;
	--kabuk-koyu:     #D6C7B0;

	/* Koyu dünya — hero, kütüphane ve footer. Lacivert DEĞİL sıcak koyu:
	   "yaşam tarzı hekimi" konumlandırması klinik soğukluğu kaldırmaz, ve
	   diğer üç hekim sitesi soğuk paletlerde. */
	--gece:        #17120E;
	--gece-katman: #221A14;
	--gece-cizgi:  #3A2E24;
	--on-gece:       #F6EFE6;   /* gece üstünde 16.4:1 */
	--on-gece-soluk: #C9BBA9;   /* gece üstünde  9.9:1 */

	/* ⚠️ SİSTEM KURALI: turuncu = EYLEM, zeytin = BİLGİ.
	   --isik yalnız KOYU zeminde metin olabilir (gece üstü 6.0:1).
	   Kâğıt üstünde metin/rakam/bağlantı --eylem'dir (6.3:1).
	   Ölçüm bunu yakaladı: merdiven rakamları önce --isik idi ve kâğıt
	   üstünde 2.87:1 çıkıyordu (büyük metin eşiği 3:1). */
	--isik:       #E0762F;
	--eylem:      #9C3D0C;
	--eylem-koyu: #7E300A;
	--isik-sis:   rgba(224, 118, 47, .10);

	--zeytin:     #4F6147;   /* kâğıt üstünde 6.4:1 — bilgi/kütüphane etiketi */
	--zeytin-sis: rgba(79, 97, 71, .09);

	/* Çekirdek/temadaki eski adlar bu değerlere bağlanır ki sitenin geri
	   kalanı tek tek elden geçirilmeden yeni palete geçsin. */
	--kagit-isik:       var(--kagit-katman);
	--kagit-yaprak:     var(--zeytin-sis);
	--murekkep-yardimci: var(--murekkep-soluk);
	--isik-koyu:        var(--eylem);
	--isik-sicak:       var(--isik);
	--yaprak:           var(--zeytin);

	--renk-zemin:       var(--kagit);
	--renk-zemin-alt:   var(--kagit-katman);
	--renk-metin:       var(--murekkep);
	--renk-metin-soluk: var(--murekkep-soluk);
	--renk-vurgu:       var(--eylem);
	--renk-vurgu-koyu:  var(--eylem-koyu);
	--renk-ikincil:     var(--isik);
	--renk-cizgi:       var(--kabuk);

	/* Tipografi — display serif YALNIZ büyük ölçekte.
	   ⚠️ GERİ DÖNÜŞ: serif istenmezse tek satır → var(--font-sans). */
	--f-display: 'Newsreader', Georgia, 'Times New Roman', serif;

	/* İmza geometri: "dilim köşesi" — tek köşe geniş. */
	--dilim: 4px 4px 30px 4px;
	--kose:  4px;
	--hap:   999px;
}

/* --------------------------------------------------------------------------
   2. DİSPLAY TİPOGRAFİ
   Serif yalnız ≥1.7rem'de. Gövde metni, arayüz ve küçük başlıklar Manrope.
   -------------------------------------------------------------------------- */

.giris__baslik,
.bolum__basi h2,
.bolum h2,
.kart__baslik,
.bolum__alt-baslik,
.display {
	font-family: var(--f-display);
	font-weight: 400;
	letter-spacing: -0.005em;
}

.giris__baslik { font-weight: 300; line-height: 1.06; }
.bolum h2 { line-height: 1.15; }

/* ⚠️ Kart başlıkları küçük ölçekte serif OLMAZ: 1rem'in altında Newsreader
   okunurluğu düşüyor ve "dergi" hissi gövdeye sızıyor. */
.kart--kompakt .kart__baslik,
.kart--mini .kart__baslik { font-family: var(--font-sans); font-weight: 600; }

/* --------------------------------------------------------------------------
   3. DİLİM KÖŞESİ — imzanın kendisi
   Tek köşe geniş yarıçap. Dört köşesi eşit yuvarlatılmış kart "hazır tema"
   görünümü verir; asimetri biçimi markaya bağlar.
   -------------------------------------------------------------------------- */

.kart,
.izgara > .kart,
.alan-kart,
.odak-kart {
	border-radius: var(--dilim);
}

/* Yaprak/dilim noktası — bölüm etiketlerinin önünde madde imi yerine. */
.bolum-etiket {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--font-sans);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--eylem);
}

.bolum-etiket::before {
	content: "";
	inline-size: .5rem;
	block-size: .5rem;
	background: currentColor;
	border-radius: 50% 0 50% 0;   /* dilim noktası */
	flex: none;
}

/* Koyu zeminde etiket turuncusu --isik'e döner (gece üstü 6.0:1). */
.gece .bolum-etiket,
.giris .bolum-etiket,
.kutuphane .bolum-etiket { color: var(--isik); }

/* --------------------------------------------------------------------------
   4. HERO — sıcak koyu kapak + "Sizi arayalım" kartı
   Eskisi: kâğıt zemin, sağda video slider'ı, ilk ekranda numara bırakma
   yolu yoktu. Slider kütüphane bölümünde zaten video ızgarası olduğu için
   kaldırıldı (aynı içerik iki kez).
   -------------------------------------------------------------------------- */

.giris {
	position: relative;
	background: var(--gece);
	color: var(--on-gece);
	overflow: clip;   /* yay ailesi taşmasın; hidden DEĞİL — yapışkan öge kırılır */
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4.5rem, 8vw, 7rem);
}

/* Sıcak ışık halesi — tek, geniş, yumuşak kaynak. */
.giris::before {
	content: "";
	position: absolute;
	inset-block-start: -30%;
	inset-inline-end: -10%;
	inline-size: min(60rem, 90%);
	aspect-ratio: 1;
	background: radial-gradient(circle, var(--isik-sis) 0%, transparent 62%);
	pointer-events: none;
}

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

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

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

.giris__baslik {
	font-size: clamp(2.5rem, 5.2vw, 4.4rem);
	color: var(--on-gece);
	margin-block: 1rem .9rem;
}

.giris .spot {
	max-inline-size: 46ch;
	color: var(--on-gece-soluk);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.giris__eylem { margin-block-start: 1.75rem; }

/* Koyu zeminde ikincil buton: kenarlığı sıcak, metni açık. */
.giris .dugme--ikincil {
	color: var(--on-gece);
	border-color: var(--gece-cizgi);
	background: transparent;
}

.giris .dugme--ikincil:hover { border-color: var(--isik); color: var(--isik); }

/* --- Geri arama kartı --------------------------------------------------
   ⚠️ Kart AÇIK, hero KOYU. Bu yüzden kartın içindeki her metin rengi
   AÇIKÇA yazılır: `.giris` altındaki `color: var(--on-gece)` miras yoluyla
   kartın h2'sini beyaz yapıp neredeyse görünmez hâle getiriyordu
   (prototipte ölçülen gerçek kusur).
   ----------------------------------------------------------------------- */

.geri-ara {
	min-inline-size: 0;
	padding: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
	background: var(--kagit);
	color: var(--murekkep);
	border-radius: var(--dilim);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

.geri-ara h2,
.geri-ara .geri-ara__baslik {
	font-family: var(--f-display);
	font-size: 1.45rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--murekkep);   /* ⚠️ .giris mirasını EZER — bkz. yukarıdaki not */
}

.geri-ara__giris {
	margin-block-start: .45rem;
	font-size: .9rem;
	color: var(--murekkep-soluk);
}

.geri-ara form { margin-block-start: 1.1rem; }

.geri-ara__alan { display: grid; gap: .35rem; min-inline-size: 0; }
.geri-ara__alan + .geri-ara__alan { margin-block-start: .7rem; }

.geri-ara__etiket {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--murekkep-soluk);
}

.geri-ara input,
.geri-ara select {
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: 2.75rem;
	padding: .55rem .8rem;
	font: inherit;
	font-size: .95rem;
	color: var(--murekkep);
	background: #fff;
	border: 1px solid var(--kabuk-koyu);
	border-radius: var(--kose);
}

.geri-ara input:focus-visible,
.geri-ara select:focus-visible {
	outline: 2px solid var(--eylem);
	outline-offset: 2px;
}

.geri-ara .dugme { inline-size: 100%; margin-block-start: 1rem; min-block-size: 2.75rem; }

.geri-ara__onay {
	display: flex;
	gap: .6rem;
	align-items: start;
	margin-block-start: .9rem;
	font-size: .78rem;
	line-height: 1.5;
	color: var(--murekkep-soluk);
}

.geri-ara__onay input {
	flex: none;
	inline-size: 1.15rem;
	block-size: 1.15rem;
	min-block-size: 0;
	margin-block-start: .1rem;
	accent-color: var(--eylem);
}

.geri-ara__onay a { color: var(--eylem); }

.geri-ara__not {
	margin-block-start: .6rem;
	font-size: .75rem;
	color: var(--murekkep-soluk);
}

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

.geri-ara__sonuc {
	padding: .9rem 1rem;
	font-size: .92rem;
	color: var(--murekkep);
	background: var(--zeytin-sis);
	border-inline-start: 3px solid var(--zeytin);
	border-radius: var(--kose);
}

.geri-ara__sonuc--hata {
	background: var(--isik-sis);
	border-inline-start-color: var(--eylem);
}

/* --------------------------------------------------------------------------
   5. GÜVEN ŞERİDİ — hero'nun üstüne binen kart
   Dört madde de DOĞRULANABİLİR. Yayın sayısı sitede verilmediği için sayı
   kullanılmadı; "%95 başarı" tarzı YMYL riski taşıyan hiçbir şey yok.
   -------------------------------------------------------------------------- */

.guven { position: relative; z-index: 2; margin-block-start: -3.25rem; }

.guven__ic {
	display: grid;
	gap: 1px;
	grid-template-columns: minmax(0, 1fr);
	background: var(--kabuk);
	border-radius: var(--dilim);
	overflow: hidden;
	box-shadow: 0 14px 40px rgba(28, 23, 18, .10);
}

@media (min-width: 40rem) { .guven__ic { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .guven__ic { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.guven__oge {
	padding: 1.15rem 1.25rem;
	background: var(--kagit);
	min-inline-size: 0;
}

.guven__deger {
	font-family: var(--f-display);
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1.15;
	color: var(--murekkep);
}

.guven__metin {
	margin-block-start: .3rem;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--murekkep-soluk);
}

/* --------------------------------------------------------------------------
   6. YAKLAŞIM → MERDİVEN
   Eskisi üç eşit karttı. "Üç eşit ikon kartı" jenerik AI sayfası imzası;
   kayan satır hem okuma sırasını dayatır hem kavis imzasının yönünü tekrar eder.
   -------------------------------------------------------------------------- */

.merdiven { display: grid; gap: 0; }

.merdiven__oge {
	display: grid;
	gap: .35rem 1.25rem;
	grid-template-columns: auto minmax(0, 1fr);
	padding-block: 1.5rem;
	border-block-start: 1px solid var(--kabuk);
	min-inline-size: 0;
}

.merdiven__oge:first-child { border-block-start: 0; }

@media (min-width: 60rem) {
	/* Her satır bir öncekinden içeri kayar — merdiven. */
	.merdiven__oge:nth-child(2) { margin-inline-start: 2.5rem; }
	.merdiven__oge:nth-child(3) { margin-inline-start: 5rem; }
	.merdiven__oge:nth-child(4) { margin-inline-start: 7.5rem; }
}

.merdiven__no {
	grid-row: span 2;
	font-family: var(--f-display);
	font-size: 2rem;
	font-weight: 300;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	/* ⚠️ --isik DEĞİL: kâğıt üstünde 2.87:1 veriyordu (ölçüldü). */
	color: var(--eylem);
}

.merdiven__baslik {
	font-family: var(--f-display);
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--murekkep);
}

.merdiven__metin {
	grid-column: 2;
	max-inline-size: 62ch;
	color: var(--murekkep-soluk);
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   7. TEDAVİ ALANLARI — asimetrik ızgara
   Eşit ızgara hiyerarşi kurmaz; en çok aranan alan görsel olarak da birinci
   olur. Etiket ZEYTİN (bilgi), "İncele" TURUNCU (eylem) — sistem kuralı.
   -------------------------------------------------------------------------- */

@media (min-width: 60rem) {
	.izgara--alanlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.izgara--alanlar > :first-child { grid-column: span 2; }
}

.kart--isaretli .kart__ust,
.kart--rehber .kart__ust {
	font-family: var(--font-sans);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--zeytin);
}

/* --------------------------------------------------------------------------
   8. TEDAVİ YÖNTEMLERİ → DİZİN
   Kutu yok. Bu bölüm bir katalog; dizin satırı hem daha çok bilgi sığdırır
   hem "arkada büyük bir arşiv var" hissini kurar.
   -------------------------------------------------------------------------- */

.yontem-liste { display: grid; border-block-start: 1px solid var(--kabuk); list-style: none; margin: 0; padding: 0; }

.yontem-liste__oge { min-inline-size: 0; }

.yontem-liste__bag {
	display: grid;
	gap: .3rem 1.5rem;
	grid-template-columns: minmax(0, 1fr);
	align-items: baseline;
	padding: 1.1rem .75rem;
	border-block-end: 1px solid var(--kabuk);
	text-decoration: none;
	color: inherit;
	min-inline-size: 0;
	transition: background .18s ease;
}

@media (min-width: 52rem) {
	.yontem-liste__bag { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.yontem-liste__bag:hover { background: var(--isik-sis); }

.yontem-liste__ad {
	font-family: var(--f-display);
	font-size: 1.18rem;
	font-weight: 400;
	color: var(--murekkep);
	min-inline-size: 0;
}

.yontem-liste__ornek {
	font-size: .9rem;
	line-height: 1.55;
	color: var(--murekkep-soluk);
	min-inline-size: 0;
}

/* --------------------------------------------------------------------------
   9. KÜTÜPHANE — Sağlık Rehberi koyu zemine alındı
   Brief'in açık isteği: "rehber içeriğinin çokluğu ana sayfada değer olarak
   görünsün". Koyu zemin bu bölümü hero'nun eşi yapar; site iki kapaklı olur.
   ⚠️ Sayaçlarda YAZI SAYISI YOK: canlı sitede toplam yazı sayısı hiçbir
   yerde yazmıyor, uydurulmadı.
   -------------------------------------------------------------------------- */

.kutuphane {
	background: var(--gece);
	color: var(--on-gece);
}

.kutuphane h2,
.kutuphane .bolum__alt-baslik { color: var(--on-gece); }
.kutuphane .spot { color: var(--on-gece-soluk); }

.kutuphane .dugme--ikincil {
	color: var(--on-gece);
	border-color: var(--gece-cizgi);
	background: transparent;
}

.kutuphane .dugme--ikincil:hover { border-color: var(--isik); color: var(--isik); }

.kutuphane__sayac {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	margin-block: 2rem;
	padding-block-end: 2rem;
	border-block-end: 1px solid var(--gece-cizgi);
	list-style: none;
}

.kutuphane__sayac li { display: grid; gap: .2rem; }

.kutuphane__deger {
	font-family: var(--f-display);
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
	font-weight: 300;
	line-height: 1;
	color: var(--isik);
}

.kutuphane__etiket { font-size: .8rem; color: var(--on-gece-soluk); }

.kume-haplar {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-block-end: 2.25rem;
	list-style: none;
}

.kume-haplar a {
	display: inline-flex;
	align-items: center;
	min-block-size: 2rem;
	padding: .4rem .85rem;
	font-size: .85rem;
	color: var(--on-gece);
	text-decoration: none;
	background: var(--gece-katman);
	border: 1px solid var(--gece-cizgi);
	border-radius: var(--hap);
	transition: border-color .18s ease, color .18s ease;
}

.kume-haplar a:hover { border-color: var(--isik); color: var(--isik); }

/* Koyu zeminde yazı kartı. */
.kutuphane .kart {
	background: var(--gece-katman);
	border-color: var(--gece-cizgi);
	color: var(--on-gece);
}

.kutuphane .kart__baslik { color: var(--on-gece); }
.kutuphane .kart__ozet { color: var(--on-gece-soluk); }
.kutuphane .kart__ust { color: var(--isik); }
.kutuphane .kart:hover { border-color: var(--isik); }

.kutuphane .bolum__alt-bag { color: var(--isik); }

/* --------------------------------------------------------------------------
   10. DOKUNMA HEDEFLERİ
   Ölçüm: footer gezinti bağlantıları 19px yüksekliğindeydi. WCAG 2.5.8 en az
   24×24 CSS px ister. Satır yüksekliği büyütülmüyor — bağlantı inline-flex
   kutuya alınıp taban yükseklik veriliyor; footer'ın sıklığı aynı kalıyor.
   -------------------------------------------------------------------------- */

.alt__menu a,
.alt__sosyal a,
.alt-menu a,
.alt-sosyal a,
.yontem-liste__bag,
.kume-haplar a {
	min-block-size: 1.75rem;
}

.alt__menu a,
.alt-menu a {
	display: inline-flex;
	align-items: center;
	inline-size: fit-content;
}

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

@media (prefers-reduced-motion: reduce) {
	.yontem-liste__bag,
	.kume-haplar a,
	.kutuphane .kart { transition: none; }
}

/* --------------------------------------------------------------------------
   12. ÖLÇÜMDEN GELEN DÜZELTMELER (2026-09-07, canlıda ölçüldü)
   -------------------------------------------------------------------------- */

/* ⚠️ `min-block-size` SATIR İÇİ ögede HİÇBİR ŞEY YAPMAZ.
   İlk yazımda `.alt__sosyal a` yalnız `min-block-size` alıyordu ve hedef
   21px kalmıştı; kutu modeli buna izin vermiyor. Yükseklik verilecek ögeye
   önce bir kutu (inline-flex) verilmesi gerekiyor. Aynı ders bugün ikinci
   kez çıktı (video kartında oran KAPAKTA değil BUTONDAYDI): kuralı yazmadan
   önce hesaplanan değeri tarayıcıda ÖLÇ. */
.alt__sosyal a,
.alt__yasal a,
.alt__konumlar a {
	display: inline-flex;
	align-items: center;
	inline-size: fit-content;
	min-block-size: 1.75rem;
}

/* "İçeriğe geç" bağlantısı — üst temada `left: -9999px` ile gizleniyor.
   ⚠️ ÜST TEMA (hekim-core) Tepeler 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 ve otomatik taşma kapısı onu
   ihlal sayı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(--kagit);
	background: var(--gece);
}

/* ==========================================================================
   13. HERO — ProHIFU düzeni (2026-09-07 ikinci tur, Abdullah'ın isteği)
   Solda etiket + başlık + özet + iki buton + ✓ güven satırı,
   sağda hekimin KESME portresi, altında tam genişlik beyaz geri arama kartı.

   Bu blok 4. ve 12. bölümlerdeki hero/geri-arama kurallarını EZER; dosyanın
   sonunda ve katmansız olduğu için kaynak sırasıyla kazanır.
   ========================================================================== */

/* Alt boşluk, üste binen karta yer açacak kadar. */
.giris {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(6rem, 10vw, 9rem);
}

@media (min-width: 62rem) {
	.giris__kap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
}

/* --- ✓ güven satırı ------------------------------------------------------
   Üç KISA madde. Açıklama cümleleri değil değerler basılıyor: hero'da üç
   kısa madde okunur, üç uzun cümle okunmaz.
   ----------------------------------------------------------------------- */

.giris__guven {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.75rem;
	margin-block-start: 1.75rem;
	list-style: none;
	padding: 0;
}

.giris__guven li {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .9rem;
	color: var(--on-gece-soluk);
}

/* Onay işareti — ikon dosyası yok, saf CSS. Dilim noktası yerine burada
   gerçek bir "tik" doğru: madde doğrulanmış bir bilgi. */
.giris__guven li::before {
	content: "";
	flex: none;
	inline-size: .5rem;
	block-size: .85rem;
	margin-block-start: -.2rem;
	border: solid var(--isik);
	border-width: 0 2px 2px 0;
	rotate: 45deg;
}

/* --- Kesme portre --------------------------------------------------------
   ⚠️ Portre arka planı ŞEFFAF. Yuvarlatılmış bir foto KARTINA konmuyor —
   kartın içi de koyu zemin olurdu, çerçeve anlamsız kalırdı. Portre doğrudan
   zeminde duruyor; arkasına sıcak ışık halesi konuyor.
   ----------------------------------------------------------------------- */

.giris__portre {
	position: relative;
	min-inline-size: 0;
	display: grid;
	place-items: end center;
}

.giris__portre img {
	position: relative;
	z-index: 1;
	display: block;
	inline-size: 100%;
	max-inline-size: 30rem;
	block-size: auto;

	/* ⚠️ Kesme portre gövdenin ORTASINDA bitiyor: maskesiz bırakılınca koyu
	   zeminde sert bir yatay kesik oluşuyor (2026-09-07'de piksel piksel
	   ölçüldü — y=784'te gömlek parlak, y=786'da düz zemin). Alt kenar
	   zemine eritiliyor. `mask` her yerde desteklenmezse görüntü aynen
	   kalır, yalnız erime olmaz — kırılma yok. */
	mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
	-webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
}

/* Hale: portrenin arkasında tek, geniş, yumuşak ışık. */
.giris__hale {
	position: absolute;
	inset-block-start: 6%;
	inset-inline-start: 50%;
	translate: -50% 0;
	inline-size: min(28rem, 100%);
	aspect-ratio: 1;
	background: radial-gradient(circle, rgb(224 118 47 / 22%) 0%, transparent 65%);
	border-radius: 50%;
	pointer-events: none;
}

@media (max-width: 61.99rem) {
	/* Mobilde portre metinden SONRA ve daha küçük; hero'yu ekran boyu uzatmasın. */
	.giris__portre img { max-inline-size: 18rem; margin-inline: auto; }
	.giris__hale { inline-size: 17rem; }
}

/* --- Geri arama kartı: hero'nun ALTINDA, üstüne binen tam genişlik kart --- */

.geri-ara-bolum {
	position: relative;
	z-index: 2;
	/* Koyu hero'nun üstüne biner. */
	margin-block-start: clamp(-5.5rem, -7vw, -3.5rem);
	margin-block-end: clamp(2.5rem, 5vw, 4rem);
}

/* ⚠️ 4. bölümdeki `.hero .geri-ara` kuralı artık geçersiz (kart hero'nun
   içinde değil). Kartın kendi kuralları burada. */
.geri-ara-bolum .geri-ara {
	margin-block-start: 0;
	padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
	background: var(--r-yuzey, #fff);
	color: var(--murekkep);
	border: 1px solid color-mix(in srgb, var(--kabuk) 70%, transparent);
	border-radius: var(--dilim);
	box-shadow: 0 18px 50px rgb(28 23 18 / 14%);
}

.geri-ara__ust { margin-block-end: var(--b5, 1rem); }

.geri-ara__baslik {
	font-family: var(--f-display);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--murekkep);
}

.geri-ara__giris {
	margin-block-start: .35rem;
	font-size: .95rem;
	color: var(--murekkep-soluk);
}

.geri-ara form { margin-block-start: 1.25rem; }

/* Alanlar tek satırda. minmax(0,…) şart: select kendi iç genişliğiyle
   sütunu şişirip mobilde belgeyi görünümden geniş yapıyor. */
.geri-ara__satir {
	display: grid;
	gap: .75rem;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
}

@media (min-width: 48rem) {
	.geri-ara__satir {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) auto;
	}
}

.geri-ara__alan { display: grid; gap: .3rem; min-inline-size: 0; }
.geri-ara__alan + .geri-ara__alan { margin-block-start: 0; }

.geri-ara__etiket {
	font-size: .78rem;
	font-weight: 600;
	color: var(--murekkep-soluk);
}

.geri-ara input[type="text"],
.geri-ara input[type="tel"],
.geri-ara select {
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: 2.75rem;
	padding: .55rem .8rem;
	font: inherit;
	font-size: .95rem;
	color: var(--murekkep);
	background: var(--kagit);
	border: 1px solid var(--kabuk-koyu);
	border-radius: var(--kose);
}

.geri-ara input:focus-visible,
.geri-ara select:focus-visible {
	outline: 2px solid var(--eylem);
	outline-offset: 2px;
}

.geri-ara__gonder .dugme {
	inline-size: 100%;
	min-block-size: 2.75rem;
	margin-block-start: 0;
}

.geri-ara__onay { margin-block-start: 1rem; }

/* ==========================================================================
   14. HERO — video karuseli + aydınlatılmış zemin (2026-10-16, Abdullah:
   "fotoğrafı kaldır, YouTube videoları carousel olsun, otomatik oynamasın,
   giriş çok karanlık biraz aydınlat")

   Portre sütunu → video vitrini. Pist CSS scroll-snap (JS'siz de parmakla
   kayar); oklar + sayaç portakal.js §6. Bu blok 4. ve 13. bölümleri EZER.
   ========================================================================== */

/* --- Zemin: #17120E gece → bir-iki ton açık sıcak kahve -----------------
   Kontrast ölçüldü: on-gece 13:1+, on-gece-soluk ≥6:1 (en açık uçta).
   Etiket turuncusu bu zeminde --isik ile 4.4:1'e düşüyordu → hero'ya özel
   daha açık ton (#F4A66E, ≥6:1). */
.giris {
	background:
		radial-gradient(ellipse 70% 90% at 85% 10%, rgb(244 166 110 / 20%) 0%, transparent 60%),
		radial-gradient(ellipse 60% 70% at 0% 100%, rgb(224 118 47 / 10%) 0%, transparent 65%),
		linear-gradient(160deg, #4A3526 0%, #3E2C20 55%, #352619 100%);
}

.giris::before { display: none; }   /* eski tek hale yerine yukarıdaki iki kaynak */

.giris .bolum-etiket { color: #F4A66E; }

.giris .dugme--ikincil { border-color: rgb(246 239 230 / 38%); }

.giris__guven li::before { border-color: #F4A66E; }

@media (min-width: 62rem) {
	/* Video 16:9 — sütun biraz genişledi ki kapak okunur boyda olsun. */
	.giris__kap { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); }
}

/* --- Vitrin ---------------------------------------------------------------- */

.giris__vitrin {
	position: relative;
	min-inline-size: 0;
}

.giris__vitrin .giris__hale {
	inset-block-start: 50%;
	translate: -50% -50%;
	inline-size: min(34rem, 120%);
	background: radial-gradient(circle, rgb(244 166 110 / 22%) 0%, transparent 62%);
}

.giris__pist {
	position: relative;
	z-index: 1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--dilim);
}

.giris__pist::-webkit-scrollbar { display: none; }

.giris__pist:focus-visible { outline: 2px solid #F4A66E; outline-offset: 4px; }

.giris__slayt {
	min-inline-size: 0;
	scroll-snap-align: start;
}

.giris__video {
	border-radius: var(--dilim);
	/* ⚠️ Dış gölge YOK: pist overflow-x ile gölgeyi kırpıp köşede iz bırakıyordu.
	   Yalnız iç çizgi. */
	box-shadow: inset 0 0 0 1px rgb(246 239 230 / 14%);
	background: #2A1E15;
}

/* Kapaklar zaten başlık yazılı; çekirdeğin .78 karartmasına gerek yok. */
.giris__video .video__kapak { opacity: 1; transition: transform .5s ease; }

.giris__video .video__dugme { background: linear-gradient(to top, rgb(0 0 0 / 28%), transparent 45%); }

.giris__video .video__ikon {
	inline-size: 4.25rem;
	block-size: 4.25rem;
	background: var(--isik);
	box-shadow: 0 8px 24px rgb(0 0 0 / 30%);
}

.giris__video .video__dugme:hover .video__ikon,
.giris__video .video__dugme:focus-visible .video__ikon { transform: scale(1.08); }

.giris__video:hover .video__kapak { transform: scale(1.03); }

.giris__video .video__dugme:focus-visible { outline: 2px solid #F4A66E; outline-offset: -4px; }

.giris__slayt-baslik {
	margin-block-start: .85rem;
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--on-gece);
}

/* --- Alt satır: ok · sayaç · ok · tüm videolar --------------------------- */

.giris__vitrin-alt {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-block-start: .9rem;
}

.giris__vitrin .giris__ok {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	background: rgb(246 239 230 / 8%);
	border: 1px solid rgb(246 239 230 / 30%);
}

.giris__vitrin .giris__ok:hover { background: rgb(246 239 230 / 16%); border-color: #F4A66E; }
.giris__vitrin .giris__ok:focus-visible { outline: 2px solid #F4A66E; outline-offset: 2px; }
.giris__vitrin .giris__ok span { border-color: var(--on-gece); }

.giris__sayac {
	margin: 0;
	min-inline-size: 3.2rem;
	text-align: center;
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
	color: var(--on-gece-soluk);
}

.giris__tum-video {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	font-size: .92rem;
	font-weight: 600;
	color: var(--on-gece);
	text-decoration: underline;
	text-decoration-color: rgb(244 166 110 / 60%);
	text-underline-offset: .3em;
}

.giris__tum-video:hover { color: #F4A66E; }

@media (max-width: 61.99rem) {
	/* Mobil: metin → CTA → vitrin. Sonraki kapak kenardan görünsün ki
	   kaydırılabildiği anlaşılsın. */
	.giris__pist { grid-auto-columns: 88%; gap: .75rem; border-radius: 0; }
	.giris__vitrin .giris__hale { inline-size: 20rem; }
}

@media (prefers-reduced-motion: reduce) {
	.giris__video .video__kapak { transition: none; }
	.giris__video:hover .video__kapak { transform: none; }
}