/*
Theme Name: Erenler Yolu
Theme URI: https://www.erenleryolu.com/
Author: Erenler Yolu
Description: Sohbetlerle Erenler Yolu için hazırlanmış hafif tema. Bordo/krem kimliği korur, sohbetleri okunabilir metin olarak sunar, mobilde çalışır. Slider veya sayfa oluşturucu eklentisi gerektirmez.
Version: 5.215.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: erenleryolu
Tags: blog, one-column, custom-header, custom-menu, translation-ready
*/

/* ==========================================================================
   0. Yazı tipi dosyası — Raleway

   Sitenin tek indirilen yazı tipi. Öbür seçenekler ziyaretçinin cihazında
   zaten bulunan yazı tipleri; bu ise fonts/ klasöründen iniyor.

   Burada durması sayfayı ağırlaştırmıyor: tarayıcı bir @font-face
   dosyasını ancak o yazı tipiyle gerçekten bir şey çizecekse indiriyor.
   Özelleştir'den Raleway seçilmemişse dosyaya hiç dokunulmuyor.

   Değişken (variable) sürüm: 100'den 900'e bütün kalınlıklar tek dosyada.
   Ayrı ayrı kalınlık dosyaları indirilseydi yalnız iki kalınlık için
   iki ayrı istek gerekirdi.

   ttf'den woff2'ye çevrildi, sonra latin ve latin-ext olarak ikiye
   ayrıldı: Türkçe'nin kendine özgü harfleri (ğ, ş, İ, Ş, Ğ) ext
   dosyasında duruyor. unicode-range sayesinde tarayıcı her ziyaretçiye
   iki dosyayı birden indirmiyor — sayfada o aralıktan harf varsa
   ilgili dosya iniyor. ext yüzleri ÖNCE yazılı: aralıkların
   kesiştiği harflerde sondaki (latin) yüz kazanıyor.
   Lisans: SIL Open Font License — bkz. fonts/raleway-OFL.txt
   ========================================================================== */
@font-face {
	font-family: "Raleway";
	src: url(fonts/raleway-ext.woff2) format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Raleway";
	src: url(fonts/raleway-ext-italic.woff2) format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Raleway";
	src: url(fonts/raleway.woff2) format("woff2");
	font-weight: 100 900;
	font-style: normal;
	/* swap: yazı, dosya inene kadar yedek yazı tipiyle görünür. Aksi
	   halde metin birkaç saniye görünmez kalıyor. */
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Raleway";
	src: url(fonts/raleway-italic.woff2) format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. Değişkenler
   ========================================================================== */
:root {
	/* Zemin ailesi. --zemin, #1A0E0C ile #210D10 arasının tam ortası;
	   diğer üçü ona olan eski farklarını koruyarak birlikte kaydırıldı,
	   böylece yüzeylerin zeminden ayrışma miktarı değişmedi. */
	--zemin:        #1E0E0E;
	--zemin-alt:    #190A0B;
	--yuzey:        #281514;
	--yuzey-ust:    #321B19;
	--bordo:        #6B1420;
	--bordo-koyu:   #4A0D16;
	--altin:        #C9A227;
	--altin-sonuk:  #8A6F1C;
	/* Koyu zemin üzerindeki bütün yazılar beyaz. */
	--krem:         #FFFFFF;
	--krem-orta:    #FFFFFF;
	--krem-sonuk:   #D5CEC6;
	--nar:          #C1442E;
	--nar-acik:     #DD6247;

	/* Yazı tipi: orijinal sitedeki Century Gothic görünümü. O yazı tipi
	   bulunmayan cihazlarda benzer geometrik seçeneklere düşer. */
	--serif:  "Century Gothic", Questrial, Futura, "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
	--metin:  "Century Gothic", Questrial, Futura, "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
	--sans:   "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

	--olcu:   1280px;
	--kabuk-pay: 2.5rem;
	/* Sohbet metni: orijinal sitedeki okuma genişliği (~900px, satır başına
	   yaklaşık 75 karakter). Kabuğun tamamına yayılmaz. */
	--yazi-olcu: 56rem;

	/* SOHBET PUNTOSU — büyütmek/küçültmek için yalnızca bu satır değişir.
	   1.45rem = 23.2px.  Bir tık büyük: 1.52rem  ·  bir tık küçük: 1.375rem */
	--sohbet-punto: 1.45rem;
	--sohbet-renk:  #F5E4C3;
	--sohbet-satir: 1.55;
	/* Harf ve kelime aralığı 0: yazı tipinin kendi ölçüsü. Paragraf
	   aralığı satır aralığından ayrı bir ayar — bkz. .govde */
	--sohbet-kalinlik: 700;
	--sohbet-harf:  0em;
	--sohbet-kelime: 0em;
	--sohbet-paragraf: 1.35rem;
	/* Izgaradaki sohbet kartlarının başlık puntosu. Görünüm > Özelleştir >
	   Erenler Yolu teması > Sohbet yazısı altından değiştirilebilir. */
	--kart-baslik: 1.55rem;
	--bosluk: clamp(2.5rem, 6vw, 5rem);
	/* Izgaradaki bir kartın en dar hâli; bir satıra kaç kart sığacağını
	   bu belirliyor. Ayar: Özelleştir > Erenler Yolu teması > Ölçüler */
	--kart-olcu:      255px;

	/* Sohbet kartının görünümü — Özelleştir > Sohbet kartları.
	   Kartlar sitenin genel renklerinden bağımsız: kart zeminini
	   değiştirmek öbür kutuları oynatmıyor. */
	--kart-zemin:      #281514;
	--kart-zemin-ustu: #321B19;
	--kart-kenar:      #3A2320;
	--kart-kenar-kalin: 1px;
	--kart-ust:        #6B1420;
	--kart-ust-ustu:   #C9A227;
	--kart-ust-kalin:  2px;
	--kart-yuvarlak:   0px;
	--kart-dolgu:      1.35rem;
	--kart-kalkis:     2px;
	--kart-ozet:       .93rem;
	--kart-renk:       #FFFFFF;
	--kart-ustu-renk:  #C9A227;
	--kart-kalin:      400;
	--kart-ozet-renk:  #FFFFFF;

	/* Tekil sohbetin başlığı — en büyük hâli. Dar ekranda kendiliğinden
	   küçülüyor; buradaki sayı yalnızca tavanı. */
	--yazi-baslik: 3rem;
	--govde-baslik: 1.75rem;
	--govde-h3: 1.45rem;
	--govde-h4: 1.2rem;
	--yazi-baslik-renk: #FFFFFF;
	--yazi-baslik-aile: var(--serif);
	--yazi-baslik-kalin: 400;

	/* Bütün sohbetler listesinin başlığı — Özelleştir > Bütün sohbetler başlığı. */
	--arsiv-aile: var(--serif);
	--arsiv-punto: 2.1rem;
	--arsiv-punto-mobil: 1.5rem;
	--arsiv-kalin: 400;
	--arsiv-renk: #FFFFFF;
	--arsiv-harf: 0em;
	--arsiv-satir: 1.2;
	--arsiv-stil: normal;
	--arsiv-donusum: uppercase;
	--arsiv-hiza: center;
	--arsiv-yazi-hiza: center;

	/* Afişin zemini ve altındaki çizgi. */
	--afis-zemin:      #4A0D16;
	/* Dar ekranda afişin yüksekliği. Görsel 7 kat geniş olduğu için
	   telefonda kendi oranıyla 60 piksellik bir şeride iniyor ve yazı
	   okunmaz oluyor; orada kırpılıp yükseltiliyor. */
	--afis-dar-boy:    120px;
	--afis-dar-hiza:   75%;
	--afis-kenar:      #8A6F1C;
	--afis-kenar-kalin: 3px;

	/* Alt bilgideki sütun alanı — en alttaki koyu şeritten ayrı.
	   O şeridin ayarları --ayak-* adlarıyla aşağıda. */
	/* Alt bilgi sütunları. Hepsinin asıl değeri Görünüm > Özelleştir >
	   Erenler Yolu teması > "Alt bilgi sütunları" altından geliyor;
	   buradakiler yalnızca yedek. */
	--sutun-zemin:     #F5E4C3;
	--sutun-yazi:      #4A0D16;
	--sutun-baslik:    #4A0D16;
	--sutun-baslik-punto: 1.32rem;
	--sutun-baslik-kalin: 600;
	--sutun-baslik-egik: italic;
	--sutun-baslik-alt:  .9rem;
	--sutun-cizgi:       #4A0D16;
	--sutun-cizgi-kalin: 2px;
	--sutun-bag:       #4A0D16;
	--sutun-bag-ustu:  #6B1420;
	--sutun-adet:      4;
	--sutun-en:        190px;
	--sutun-ara:       2.2rem;
	--sutun-bosluk:    5rem;
	--sutun-hiza:      left;
	--sutun-punto:     .95rem;
	--sutun-satir:     1.5;
	--sutun-bag-ara:   .5rem;
	--sutun-kitap-en:  300px;
	--gunun-bosluk:    .9rem;
	--hepsi-ust-bosluk: 2.2rem;
	--hepsi-alt-bosluk: 0rem;
	--manzara-bosluk:  1.2rem;
	--manzara-boy:     400px;
	--mobil-ses-boy:   80px;
	--gunun-hiza:      center;
	--gunun-oge:       center;
	--gunun-dugme-en:  14rem;
	--gunun-dugme-boy: .5rem;
	--gunun-punto:     1.15rem;
	--gunun-ad-punto:  1.75rem;
	--gunun-dolgu:     2.6rem;
	--gunun-dolgu-alt: 1.4rem;

	/* Fare üstüne gelince olup bitenlerin hızı. 0 yazılırsa hiçbir şey
	   yumuşamaz, her değişim anında olur. */
	--gecis: .16s;

	/* Menü çubuğunun tamamı kendi değişkenlerinden besleniyor; hiçbiri
	   sitenin öbür renklerine bağlı değil. Hepsi tek bölümde:
	   Görünüm > Özelleştir > Erenler Yolu teması > Menü çubuğu */
	--menu-zemin:      #F5E4C3;
	--menu-yazi:       #6B1420;
	--menu-yazi-ustu:  #C1442E;
	--menu-vurgu:      #C9A227;
	--menu-vurgu-kalin: 3px;
	--menu-kenar:      #CAAE98;
	--menu-kenar-kalin: 1px;
	--menu-aile:       var(--serif);
	--menu-punto:      1.12rem;
	--menu-kalinlik:   600;
	--menu-harf:       .02em;
	--menu-dolgu:      .95rem;
	--menu-bosluk:     clamp(.4rem, 2.4vw, 2rem);
	--menu-hiza:       center;
	/* Dar ekran (782px ve altı). Geniş ekrandaki punto clamp ile eziliyordu. */
	--menu-punto-mobil:    .72rem;
	--menu-kalinlik-mobil: 600;
	--menu-harf-mobil:     .02em;
	--menu-dolgu-mobil:    .95rem;
	--menu-bosluk-mobil:   .1rem;

	--izgara-basi-ara: .5rem;
	--izgara-ara: 1.1rem;

	--vurgu:  #FFF8E7;
	--cizgi:  rgba(201, 162, 39, .16);

	/* Sayfaya boydan boya uzanan üç şerit. Görünüşleri aynı ama üçü ayrı
	   ayrı ayarlanıyor; ortak değişken kullanılsaydı birini değiştirmek
	   üçünü birden götürürdü. Zeminleri bilerek tanımsız: seçilmedikçe
	   kuraldaki "transparent" yedeğine düşsünler.
	   Ayar: Özelleştir > Erenler Yolu teması > Şeritler */
	--basi-yazi:        #FFFFFF;
	--basi-punto:       1.2rem;
	--basi-kalin:       400;
	--basi-harf:        .14em;
	--basi-donusum:     uppercase;
	--basi-kenar:       #392612;
	--basi-ust:         #6B1420;
	--basi-ust-kalin:   2px;

	/* Bu düğmede vurgu altta: ızgara yukarıda başlık şeridinin çizgisiyle
	   açılıp burada kapanıyor. */
	--hepsi-yazi:       #FFFFFF;
	--hepsi-punto:      .92rem;
	--hepsi-kalin:      400;
	--hepsi-harf:       .14em;
	--hepsi-kenar:      #392612;
	--hepsi-alt:        #6B1420;
	--hepsi-alt-kalin:  2px;

	--iletisim-ust-bosluk: 4.5rem;
	--iletisim-alt-bosluk: 4.5rem;
	--iletisim-deger-punto: 1.05rem;

	--paylas-yazi:      #FFFFFF;
	--paylas-punto:     .92rem;
	--paylas-kalin:     700;
	--paylas-kenar:     #8A6F1C;
	--paylas-ust:       #8A6F1C;
	--paylas-ust-kalin: 1px;
	--paylas-cizgi-bosluk: 0.55rem;
	--paylas-alt-bosluk: 0.8rem;

	--liste-baslik-punto: 2.1rem;
	--liste-baslik-renk: #FFFFFF;
	--dugme-punto: .95rem;
	--dugme-kalin: 400;
	--sayfa-punto: .92rem;
	--arama-punto: .95rem;
	--ses-ad-punto: 1.15rem;
	--ses-sure-punto: .8rem;
	--oy-ad-punto: 1.05rem;
	--oy-zemin: #281514;
	--oy-kenar: #8A6F1C;
	--kose-yazi-punto: .84rem;
	--grup-geri-punto: .86rem;

	/* Ana sayfada dönen sohbetin yazısı. Görünüm > Özelleştir >
	   Erenler Yolu teması > Renkler altından değiştirilebilir. Kayan alanın
	   zemini de oradan; öbür renklerden bağımsız, kendi ayarı var. */
	/* Kayan alandaki iki okun merkezden uzaklığı; aralarını bu açıyor. */
	--kayan-ok-ara:    30rem;
	--kose-cicek:        #E31C23;
	--kose-cicek-kontur: #0C0605;
	--kose-cicek-zemin:  #281514;
	--kitap-dugme-zemin: #0A1C0A;
	--kitap-dugme-yazi:  #E39A45;
	--kitap-dugme-kenar: #0C0605;
	--kitap-svg:         #E39A45;
	--kitap-svg-zemin:   #0A1C0A;
	/* Kayan alanı kapatan çizgi. 0 = çizgi yok. */
	--kayan-alt-kalin: 0px;
	--kayan-zemin:     #351013;
	/* Kayan yazının çevresindeki kutu. Yapısı aşağıdaki şeritlerle aynı —
	   ince kenarlık, tepede vurgu çizgisi — ama rengi altın ailesinden:
	   şeritlerdeki bordo ve koyu kahve, bandın kendi koyu zemininde
	   seçilmiyordu. Ayar: Özelleştir > Erenler Yolu teması > Kayan alan */
	--kayan-kenar:       #8A6F1C;
	--kayan-kenar-kalin: 1px;
	--kayan-vurgu:       #C9A227;
	--kayan-vurgu-kalin: 2px;
	--kayan-yuvarlak:    32px;
	--kayan-dolgu:       2rem;
	/* Kutunun kendi ölçüleri — ikisi de yazıdan bağımsız. Yükseklik: metin
	   kısa olsa bile kutu bu boyun altına inmez, band gözle görülür bir alan
	   kaplar ve slayttan slayda boy değiştirmez. Genişlik: %100 aşağıdaki
	   "Sohbetler" şeridiyle aynı hiza, küçültünce kutu ortada daralır.
	   Metnin kendi genişliği ayrı (--kayan-genislik) ve harf sayısı cinsinden.
	   Ayar: Özelleştir > Kayan alan */
	--kayan-yukseklik:  16rem;
	--kayan-kutu-en:    100%;
	--kayan-yazi:      #fff1d1;
	--kayan-punto:     1.75rem;
	--kayan-satir:     1.4;
	--kayan-genislik:  46ch;
	--kayan-kalinlik:  700;
	/* Metin içinde tek tek cümlelere verilen biçimler. */
	--kayan-kucuk:        .75em;
	--kayan-buyuk:        1.35em;
	--kayan-isaret-ince:  300;
	--kayan-isaret-kalin: 800;
	/* Video listesi. Videolar: wp-admin > Ses ve Video; buradaki değerler
	   yalnızca yedek, asılları Özelleştir > Videolar altından geliyor. */
	--video-sutun:       16rem;
	--video-onizleme:    16 / 9;
	--video-hiza:        center;
	/* Açılan pencerede videonun kaplayabileceği en fazla yükseklik,
	   ekran boyunun yüzdesi olarak. */
	--video-boy:         85;
	--video-ara:         1.4rem;
	--video-zemin:       #2A1512;
	--video-kenar:       #4A2C22;
	--video-kenar-kalin: 1px;
	--video-ust:         #7A1F2B;
	--video-ust-kalin:   2px;
	--video-yuvarlak:    10px;
	--video-dolgu:       1rem;
	--video-punto:       1.15rem;
	--video-yazi:        #F5E4C3;
	--video-ad:          block;

	--wa-yesil:     #25D366;

	/* En alttaki şerit. --ayak-renk ve --ayak-zemin bilerek tanımsız:
	   seçilmedikçe .ayak-son kuralındaki yedeklere düşsünler. */
	--ayak-punto:     .95rem;
	--ayak-kalinlik:  700;
	--ayak-aralik:    .34em;
	--ayak-dolgu:     1.5rem;

	/* Ziyaretçinin A− / A+ ile seçtiği okuma ölçeği. Dokunulmamışsa 1. */
	--okuma-olcek: 1;
}

/* ==========================================================================
   2. Temel
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--zemin);
	color: var(--krem-orta);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--nar); text-decoration: none; }
a:hover, a:focus { color: var(--nar-acik); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--altin);
	outline-offset: 3px;
	border-radius: 2px;
}

img, video, iframe { max-width: 100%; height: auto; }
img { display: block; }

hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--altin-sonuk), transparent);
	margin: 2.5rem 0;
}

.kabuk {
	max-width: var(--olcu);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, var(--kabuk-pay, 2.5rem));
}

.gizli-baslik {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.atla {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--altin);
	color: var(--zemin);
	padding: .7rem 1.2rem;
	z-index: 100;
	font-weight: 700;
}
.atla:focus { left: 0; color: var(--zemin); }

/* ==========================================================================
   3. Başlık görseli ve menü
   ========================================================================== */
.site-basi { position: relative; }

.afis {
	position: relative; /* Köşe düğmeleri buraya göre konumlanır */
	background: var(--afis-zemin);
	border-bottom: var(--afis-kenar-kalin) solid var(--afis-kenar);
}
/* Afişin kendi bağlantısı blok; köşelerdeki düğmeler dışarıda tutuluyor,
   yoksa bu kural onların satır içi düzenini eziyor. */
.afis a:not(.kitap-dugme):not(.wa-dugme):not(.posta-dugme) { display: block; }
.afis img:not(.kitap-ikon) { width: 100%; height: auto; }

/*
 * Dar ekranda afiş kırpılıyor.
 *
 * Görsel 1600x230, yani yedi kat geniş: telefonda kendi oranıyla
 * altmış piksellik bir şeride iniyor, yazı da okunmaz hâle geliyor.
 * Burada yüksekliği sabitleyip görseli o kutuya "kırparak sığdırıyoruz";
 * görsel büyüyor, taşan kısım kesiliyor. Görselin hangi yerinden
 * bakılacağını --afis-dar-hiza belirliyor: %0 sol kenar, %100 sağ kenar.
 * Bu afişte yazı sağda ama sağında bir tutam boş desen var; %75'te yazı
 * sağ kenara yaslanıyor, kesilen yer soldaki boş desen oluyor.
 *
 * Sınır 820px: varsayılan yükseklikte (120px) afişin kendi oranıyla
 * zaten o kadar yer kapladığı genişlik. Daha genişte kırpmaya gerek yok.
 */
@media (max-width: 820px) {
	.afis img:not(.kitap-ikon) {
		height: var(--afis-dar-boy);
		object-fit: cover;
		object-position: var(--afis-dar-hiza) center;
	}
}

/* ---- Afişin köşelerindeki düğmeler ----
   Hepsi afişin içinde duruyor; yani sayfa kaydırılınca üstte kalırlar,
   ziyaretçiyle birlikte gelmezler. */
.afis-sol,
.posta-dugme,
.kitap-dugme,
.wa-dugme {
	position: absolute;
	z-index: 3;
}

/* Sol üst: hoparlör. */
.afis-sol {
	top: clamp(.35rem, 1.2vw, .85rem);
	left: clamp(.35rem, 1.2vw, .85rem);
}
.kose-ses { position: static; }

/* Sağ üst: zarf, iletişim sayfasına gider. */
.posta-dugme {
	top: clamp(.35rem, 1.2vw, .85rem);
	right: clamp(.35rem, 1.2vw, .85rem);
	width: calc(2.4rem - 1px);
	height: calc(2.4rem - 1px);
	padding: 0;
	margin: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 2px solid #0C0605;
	background: #f5eecb;
	color: var(--bordo-koyu);
	line-height: 1;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
	transition: transform var(--gecis) ease, background var(--gecis) ease, color var(--gecis) ease;
}
.posta-dugme:hover,
.posta-dugme:focus {
	color: var(--bordo-koyu);
	background: #efe4b8;
	transform: translateY(-2px);
}
.posta-ikon {
	display: block;
	width: 15px;
	height: 15px;
}

/* Ortak pil biçimi: afişteki logo siyah konturlu, düğme de öyle. */
.kitap-dugme,
.wa-dugme {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: calc(.42rem - 0.5px) calc(.9rem - 0.5px);

	font-family: var(--sans);
	font-size: var(--kose-yazi-punto);
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;

	border: 2px solid #0C0605;
	border-radius: 999px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
	transition: transform var(--gecis) ease, background var(--gecis) ease, color var(--gecis) ease;
}
.kitap-dugme:hover,
.kitap-dugme:focus,
.wa-dugme:hover,
.wa-dugme:focus { transform: translateY(-1px); }

/* Kitap: afişteki tezhibin altın tonu, sol alt köşe.
   Hoparlör sol üstte; düğme onun altına, afişin soluna alınıyor. */
.kitap-dugme {
	left: clamp(.35rem, 1.2vw, .85rem);
	bottom: clamp(.35rem, 1.2vw, .85rem);
	color: var(--kitap-dugme-yazi);
	background: var(--kitap-dugme-zemin);
	border: 2px solid var(--kitap-dugme-kenar);
}
.kitap-dugme:hover,
.kitap-dugme:focus {
	color: color-mix(in srgb, var(--kitap-dugme-yazi) 72%, #fff);
	background: color-mix(in srgb, var(--kitap-dugme-zemin) 82%, #fff);
}

/* WhatsApp: kitabın karşısı, sağ alt köşe. Yeşil ayardan geldiği için
   üzerine gelince rengi sabit bir hex'le değil, ayarın kendisini
   koyulaştırarak buluyoruz. */
.wa-dugme {
	right: clamp(.35rem, 1.2vw, .85rem);
	bottom: clamp(.35rem, 1.2vw, .85rem);
	color: #ffffff;
	background: var(--wa-yesil);
}
.wa-dugme:hover,
.wa-dugme:focus { color: #ffffff; background: color-mix(in srgb, var(--wa-yesil) 82%, #000); }
.kitap-ikon {
	flex: 0 0 auto;
	display: block;
	width: 1.05rem;
	height: 1.05rem;
	overflow: hidden;
	background: var(--kitap-svg-zemin);
	border-radius: 50%;
}
.kitap-ikon,
.kitap-ikon g,
.kitap-ikon path {
	fill: var(--kitap-svg);
	stroke: none;
}
.wa-ikon { flex: 0 0 auto; }

/* Afiş dar ekranda alçaldığı için düğmeler küçülür; yazı düşer,
   yuvarlak simge kalır. */
@media (max-width: 700px) {
	.kitap-dugme,
	.wa-dugme,
	.kose-ses-dugme,
	.posta-dugme {
		width: calc(2.3rem - 1px);
		height: calc(2.3rem - 1px);
		padding: 0;
		gap: 0;
		justify-content: center;
		border-radius: 50%;
	}
	.kitap-yazi,
	.wa-dugme .wa-yazi { display: none; }
	.posta-ikon,
	.wa-ikon {
		width: 14px;
		height: 14px;
	}
	.kitap-dugme {
		overflow: hidden;
		padding: 0;
	}
	.kitap-dugme .kitap-ikon {
		width: 15px;
		height: 15px;
	}
}

.site-adi {
	font-family: var(--serif);
	font-size: clamp(1.6rem, 5vw, 2.6rem);
	color: var(--krem);
	text-align: center;
	margin: 0;
	padding: 1.6rem 1rem;
}
.site-adi a { color: var(--krem); }

.menu-serit {
	background: var(--menu-zemin);
	border-bottom: var(--menu-kenar-kalin) solid var(--menu-kenar);
	/* Yapışkanlık kapatılabiliyor; kapalıyken bu satır Özelleştir'den gelen
	   kuralla geçersiz kılınıyor (bkz. inc/ozellestirici.php). */
	position: sticky;
	top: 0;
	z-index: 40;
}

/* Menü ortada kalsın. */
.menu-kabuk {
	display: flex;
	align-items: center;
	gap: .75rem;
}
.menu-kabuk .menu { flex: 1; }

/* Dar ekranda da aynı şerit: maddeler yan yana, sığmazsa kayar.
   "Menü" düğmesi yok. */

/* Not: kurallar .menu-serit ile sınırlandı. Alt bilgideki menü kutuları da
   <ul class="menu"> çıkarıyor; sınırlamazsak orada da üst menü boşlukları
   uygulanıyor ve sütunlar bozuluyor. */
.menu-serit .menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--menu-bosluk);
	justify-content: var(--menu-hiza);
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu-serit .menu > li { position: relative; flex: 0 0 auto; }

.menu-serit .menu a {
	display: block;
	padding: var(--menu-dolgu) .6rem;
	color: var(--menu-yazi);
	font-family: var(--menu-aile);
	font-size: var(--menu-punto);
	font-weight: var(--menu-kalinlik);
	letter-spacing: var(--menu-harf);
	white-space: nowrap;
	/* Çizgi her başlıkta duruyor ama saydam; açık olanda renk alıyor.
	   Böylece başlıklar renk değiştirirken aşağı yukarı oynamıyor. */
	border-bottom: var(--menu-vurgu-kalin) solid transparent;
}
.menu-serit .menu > li > a:hover,
.menu-serit .menu > li > a:focus,
.menu-serit .menu > li.current-menu-item > a { color: var(--menu-yazi-ustu); border-bottom-color: var(--menu-vurgu); }

/* Açılır menünün altındaki düğmeler (template-parts/menu-dugmeler.php):
   yalnızca dar ekranda ve menü açıkken görünürler; geniş ekranda çubuk
   kalabalıklaşmasın diye hiç basılmıyorlar. */
.menu-dugmeler { display: none; }

/* Not: menü çubuğunda artık açılır kutu yok. Üst başlığa tıklanınca alt
   listesi ana sayfadaki ızgarada açılıyor; fareyle üstüne gelmek hiçbir şey
   açmıyor. Bu yüzden .sub-menu kuralları kaldırıldı — çubukta öyle bir
   işaretleme hiç basılmıyor (header.php, depth => 1). */

/* ==========================================================================
   4. Öne çıkan alan
   ========================================================================== */
.one-cikan {
	position: relative;
	/* Zemin bilerek burada değil, içteki .donen kutusunda: renk yalnızca
	   o yuvarlak kutunun içinde görünüyor, dışında sayfanın kendi zemini
	   kalıyor. Kural buraya konsaydı bant baştan sona boyanırdı. */
	/* Kayan alanı kapatan şerit. Kalınlığı Özelleştir > Kayan alan >
	   "Alttaki çizginin kalınlığı" ile ayarlanıyor; 0 yazılınca çizgi
	   tamamen kalkıyor. Rengi menü çubuğunun zeminiyle aynı: ayrı bir
	   renk yazmak yerine o değişken kullanıldı, böylece menü rengini
	   değiştirdiğinizde bu çizgi de birlikte gidiyor. */
	border-bottom: var(--kayan-alt-kalin) solid var(--menu-zemin);
}
.one-cikan .icerik {
	position: relative;
	/* Üstte tam boşluk, altta hiç yok. Sebep: hemen aşağıdaki "Sohbetler"
	   bölümü (.bolum) zaten kendi --bosluk payını üstten veriyor. İkisi de
	   yazılsaydı bandın altındaki açıklık üstündekinin iki katı olurdu —
	   ekranda da öyle duruyordu. Böylece kutunun üstündeki ve altındaki
	   boşluk birebir aynı, kazanılan pay da kutunun kendisine kalıyor. */
	padding-block: var(--bosluk) 0;
	display: grid;
	gap: 1.6rem;
	justify-items: center;
	text-align: center;
}

/* Dönen sohbetler: hepsi HTML'de bulunur, tek hücrede üst üste durur,
   böylece yükseklik sabit kalır ve geçişte sayfa zıplamaz. */
/* Çerçeve .icerik'e değil buraya konuyor: .icerik kabuğun kendisi, kenarlığı
   oraya koyunca kutu yan dolgunun dışına taşıp aşağıdaki şeritlerden geniş
   duruyordu. Burada sol ve sağ kenarı "Sohbetler" şeridiyle ve kartlarla
   tam aynı çizgiye oturuyor. */
.donen {
	display: grid;
	/* Kutunun genişliği yazıya bağlı DEĞİL. Metnin sütun genişliği ayrı bir
	   ayar (--kayan-genislik, "ch" yani harf sayısı) ve yazı puntosuyla
	   birlikte değişiyor; buradaki ölçü kutunun kendisinin. %100 kutuyu
	   aşağıdaki "Sohbetler" şeridiyle aynı çizgiye oturtur, küçültünce kutu
	   ortada daralır, yazıya hiçbir şey olmaz.
	   Ayar: Özelleştir > Kayan alan > "Kutunun genişliği (%)" */
	width: var(--kayan-kutu-en);
	margin-inline: auto;
	padding: var(--kayan-dolgu);
	/* Kutu, içindeki en uzun metin kadar değil, en az bu kadar yüksek.
	   min() dar ekran için emniyet: telefonda 16rem'lik bir kutu ekranın
	   yarısını yiyebilirdi, orada ekranın %55'inde duruyor. */
	min-height: min(var(--kayan-yukseklik), 55vh);

	/* Kayan alanın rengi yalnızca bu kutunun içinde. Kutunun dışında
	   sayfanın zemini görünüyor — bant boydan boya boyanmıyor. */
	background: var(--kayan-zemin);
	border: var(--kayan-kenar-kalin) solid var(--kayan-kenar);
	border-top: var(--kayan-vurgu-kalin) solid var(--kayan-vurgu);
	border-radius: var(--kayan-yuvarlak);
	/* Maske: köşeler yuvarlatılınca içerik keskin köşelerden taşmasın. */
	overflow: hidden;
}
.donen-oge {
	grid-area: 1 / 1;
	display: grid;
	gap: 1.3rem;
	justify-items: center;
	/* Kutunun yüksekliğini en uzun metin belirliyor; kısa metinler o kutunun
	   tepesine yapışmasın diye dikeyde ortalanıyorlar. */
	align-content: center;

	opacity: 0;
	visibility: hidden;
	transform: translateY(1.1rem) scale(.985);
	/* visibility'nin gecikmesi çıkış solmasının yarıda kesilmemesi için. */
	transition:
		opacity .65s ease,
		transform .65s cubic-bezier(.22, .61, .36, 1),
		visibility 0s linear .65s;
}
.donen-oge.aktif {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity .65s ease,
		transform .65s cubic-bezier(.22, .61, .36, 1),
		visibility 0s;
}
/* İlk rastgele slayt seçilirken geçiş yok; sonraki dönüşler yumuşak kalır. */
.donen.kuruluyor .donen-oge { transition: none; }

/* Yanlardaki oklar. Bilerek sönük duruyorlar: sayfanın asıl konusu sohbetin
   kendisi, oklar yalnızca gerektiğinde göze çarpsın. Üzerine gelince tam
   görünür olurlar. Boşluk yüzdeyle verildiği için geniş ekranda metne
   yaklaşır, dar ekranda kenara çekilirler. */
.donen-ok {
	position: absolute;
	/* Oklar bölümün değil KUTUNUN ortasında dursun. Bölümün üstünde bir
	   --bosluk payı var, altında yok (bkz. .one-cikan .icerik); düz "50%"
	   yazılsaydı oklar kutunun ortasından o payın yarısı kadar yukarıda
	   kalırdı. Yarısını geri eklemek ikisini yeniden çakıştırıyor. */
	top: calc(50% + var(--bosluk) / 2);
	transform: translateY(-50%);
	z-index: 2;

	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;

	background: rgba(36, 21, 18, .3);
	border: 1px solid rgba(201, 162, 39, .3);
	border-radius: 50%;
	color: var(--altin);
	opacity: .45;
	cursor: pointer;
	transition: background var(--gecis) ease, border-color var(--gecis) ease, color var(--gecis) ease, opacity var(--gecis) ease;
}
.donen-ok:hover,
.donen-ok:focus-visible {
	background: var(--bordo);
	border-color: var(--altin);
	color: var(--vurgu);
	opacity: 1;
}
.donen-ok svg { width: 16px; height: 16px; }

/* Kenardan değil, ORTADAN ölçülüyor: oklar başlığın iki yanında hep aynı
   uzaklıkta durur, ekran genişledikçe kenara doğru savrulmazlar. Aradaki
   açıklık --kayan-ok-ara ile ayarlanıyor (Özelleştir > Kayan alan); sayı
   büyüdükçe oklar birbirinden uzaklaşıp kenara yaklaşıyor. Ekran
   daraldığında max() devreye girip okları kenara alır ve metnin üstüne
   binmelerini engeller. */
.donen-onceki  { left: max(.75rem, calc(50% - var(--kayan-ok-ara))); }
.donen-sonraki { right: max(.75rem, calc(50% - var(--kayan-ok-ara))); }

/* Dar ekranda metin sütunu genişlediği için oklar kenara çekilir. */
@media (max-width: 700px) {
	.donen-ok { width: 1.9rem; height: 1.9rem; }
	.donen-ok svg { width: 14px; height: 14px; }
	.donen-onceki  { left: clamp(.5rem, 4%, 1.5rem); }
	.donen-sonraki { right: clamp(.5rem, 4%, 1.5rem); }
}

/* Kayan alanda görünen tek şey açıklama metni. Başlık kaynakta duruyor ama
   .gizli-baslik ile görünmez; sohbete metnin kendisine tıklanarak gidilir.
   Sohbet gövdesiyle aynı yazı tipi ve kalınlıkta, ondan bir tık küçük. */
.one-cikan .ozet {
	margin: 0;
	/* Beşi de Görünüm > Özelleştir > Erenler Yolu teması > Kayan alan
	   altından ayarlanabilir; buradaki değerler yalnızca yedek. */
	max-width: var(--kayan-genislik, 46ch);
	font-family: var(--metin);
	font-size: clamp(1.2rem, 3.4vw, var(--kayan-punto, 1.75rem));
	font-weight: var(--kayan-kalinlik, 700);
	line-height: var(--kayan-satir, 1.4);
	color: var(--kayan-yazi);
	text-wrap: balance;
}
/* Metin içindeki biçim işaretleri. wp-admin > Erenler Yolu > Kayan alan
   sekmesinde bir cümleyi seçip Büyük/Küçük/Kalın/İnce düğmesine
   basınca metne konan işaretlerin karşılığı (bkz. ey_kayan_metni).

   Punto "em" cinsinden: slaydın kendi puntosunun katı. Böylece ana punto
   değiştiğinde vurgulu cümle de onunla birlikte büyüyüp küçülüyor, oran
   bozulmuyor. */
.kayan-kucuk { font-size: var(--kayan-kucuk); }
.kayan-buyuk { font-size: var(--kayan-buyuk); }
.kayan-ince  { font-weight: var(--kayan-isaret-ince); }
.kayan-kalin { font-weight: var(--kayan-isaret-kalin); }

.one-cikan .ozet a { color: inherit; }
.one-cikan:hover .ozet,
.one-cikan .ozet a:hover,
.one-cikan .ozet a:focus-visible { color: #fff; }

.etiket {
	font-family: var(--sans);
	font-size: .74rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--altin);
}

.dugme {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.4rem;
	font-family: var(--sans);
	font-size: var(--dugme-punto);
	font-weight: var(--dugme-kalin, 400);
	border: 1px solid var(--altin-sonuk);
	background: transparent;
	color: var(--krem);
	cursor: pointer;
	transition: background var(--gecis) ease, border-color var(--gecis) ease;
}
.dugme:hover { background: rgba(201, 162, 39, .14); border-color: var(--altin); color: var(--krem); }
.dugme.birincil { background: var(--bordo); border-color: var(--bordo); }
.dugme.birincil:hover { background: #7d1826; border-color: var(--altin); }

/* Izgaranın altındaki "Bütün sohbetler": kartların tamamı kadar geniş bir
   şerit. Kaçırılması güç, dokunma alanı bol. */
.hepsi-satir { margin: var(--hepsi-ust-bosluk) 0 var(--hepsi-alt-bosluk); }
.dugme-genis {
	display: flex;
	width: 100%;
	justify-content: center;
	padding-block: .95rem;
	font-size: var(--hepsi-punto);
	font-weight: var(--hepsi-kalin);
	letter-spacing: var(--hepsi-harf);
	text-transform: uppercase;

	/* Kendi renkleri var; başlık şeridinden ve paylaş düğmesinden bağımsız.
	   Ayar: Özelleştir > Erenler Yolu teması > Şeritler */
	color: var(--hepsi-yazi);
	background: var(--hepsi-zemin, transparent);
	border: 1px solid var(--hepsi-kenar);
	border-bottom: var(--hepsi-alt-kalin) solid var(--hepsi-alt);
}

/* Ana sayfa medya: yanlarda 9:16 görsel/video, ortada düğmeler yana uzar. */
.anasayfa-medya {
	display: grid;
	grid-template-columns: minmax(0, var(--video-sutun)) minmax(0, 1fr) minmax(0, var(--video-sutun));
	width: 100%;
	gap: var(--video-ara);
	align-items: stretch;
}
.anasayfa-yan {
	min-width: 0;
	min-height: 0;
}
.anasayfa-yan .rastgele-kart,
.anasayfa-yan .video-izgara {
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
}
.anasayfa-medya .video-izgara {
	display: flex;
}
.anasayfa-medya .video-kart {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
}
.anasayfa-medya .video-ad,
.anasayfa-medya .video-aciklama {
	display: none;
}
.anasayfa-medya .video-govde,
.anasayfa-medya .video-ac {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	height: 100%;
}
.anasayfa-medya .video-onizleme {
	flex: 1 1 auto;
	height: 100%;
	aspect-ratio: auto;
}
.anasayfa-medya .video-onizleme img,
.anasayfa-medya .video-onizleme video,
.anasayfa-medya .video-onizleme .video-bos {
	height: 100%;
	object-fit: cover;
}

.anasayfa-orta {
	display: flex;
	flex-direction: column;
	gap: var(--video-ara);
	min-width: 0;
	height: 100%;
}
/* Masaüstünde sarmalayıcı yok sayılır; ses düğmeleri orta sütunun
   flex çocukları olarak kalır (yükseklik payı bozulmasın). */
.anasayfa-sesler { display: contents; }
.anasayfa-ses,
.anasayfa-orta-ikili,
.anasayfa-orta .dugme-genis {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
	margin: 0;
}

/* Mesaj düğmesi satırın tamamını kaplıyor. */
.anasayfa-orta-ikili {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--video-ara);
}
/* Izgaranın gözleri satırı boydan boya doldursun; yüksekliği ses
   düğmeleriyle aynı kalsın diye flex yerine height veriliyor. */
.anasayfa-orta-ikili .dugme-genis { height: 100%; }
/* Mesaj düğmesi: varsayılan çerçeve beyaz; üzerine gelince içi dolar,
   yazı koyuya döner. WhatsApp'a karışmasın. */
.anasayfa-orta-ikili .dugme.dugme-genis:not(.dugme-wa) {
	border-color: #fff;
	border-bottom-color: #fff;
	transition: background var(--gecis) ease, border-color var(--gecis) ease, color var(--gecis) ease;
}
.anasayfa-orta-ikili .dugme.dugme-genis:not(.dugme-wa):hover,
.anasayfa-orta-ikili .dugme.dugme-genis:not(.dugme-wa):focus-visible {
	color: #0C0605;
	background: #fff;
	border-color: #fff;
	border-bottom-color: #fff;
}
.anasayfa-ses {
	padding: .7rem .9rem;
	background: var(--video-zemin);
	border: var(--video-kenar-kalin) solid var(--video-ust);
	color: var(--video-yazi);
	font-family: var(--serif);
	font-size: var(--video-punto);
	text-align: center;
	text-decoration: none;
}
.anasayfa-ses:hover,
.anasayfa-ses:focus-visible {
	color: var(--altin);
	border-color: var(--altin);
}
.anasayfa-orta-cizgi {
	flex: 0 0 auto;
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--altin-sonuk);
}
.anasayfa-orta .dugme-genis {
	padding-block: .7rem;
}

.rastgele-kart {
	display: flex;
	flex-direction: column;
	background: var(--video-zemin);
	border: var(--video-kenar-kalin) solid var(--video-kenar);
	border-top: var(--video-ust-kalin) solid var(--video-ust);
	border-radius: var(--video-yuvarlak);
	overflow: hidden;
}
.rastgele-ac {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: inherit;
}
.rastgele-ac img {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-height: 0;
	display: block;
	object-fit: cover;
	transition: transform var(--gecis) ease;
}
.rastgele-ac:hover img,
.rastgele-ac:focus-visible img { transform: scale(1.04); }

/* Yazı da kenarlıkla aynı yeşil; ikisi de --wa-yesil'e bağlı, yani
   Özelleştir'den renk değişince birlikte kayıyorlar.
   Ayar: Özelleştir > Erenler Yolu teması > Renkler > WhatsApp düğmesi */
.dugme-wa {
	color: var(--wa-yesil);
	background: transparent;
	border-color: var(--wa-yesil);
	border-bottom-color: var(--wa-yesil);
}
.dugme-wa:hover,
.dugme-wa:focus-visible {
	color: #fff;
	background: var(--wa-yesil);
	border-color: var(--wa-yesil);
}
.dugme-wa .wa-ikon { flex: 0 0 auto; }

/* İletişim sayfasındaki e-posta düğmesi: yazı beyaz. */

/* Sayfada yalnız düğme duruyor. Üst ve alt pay Özelleştir > İletişim. */
.iletisim-sayfasi.yazi {
	padding-block: 0;
	width: 100%;
	position: relative;
}
.iletisim-sayfasi .sohbet-ust {
	position: absolute;
	top: 1rem;
	left: 0;
	right: 0;
	z-index: 2;
	max-width: var(--olcu);
	width: 100%;
	margin: 0 auto;
	padding: 0 clamp(1rem, 4vw, 2.5rem);
	box-sizing: border-box;
}
.iletisim-dugme-sarici {
	max-width: var(--olcu);
	width: 100%;
	margin-inline: auto;
	padding: var(--iletisim-ust-bosluk) clamp(1rem, 4vw, 2.5rem) var(--iletisim-alt-bosluk);
	box-sizing: border-box;
}
.iletisim-sayfasi .dugme-genis {
	text-align: center;
	padding-block: 2.4rem;
	color: #fff;
}
.iletisim-sayfasi .dugme.dugme-genis:hover,
.iletisim-sayfasi .dugme.dugme-genis:focus-visible {
	color: #fff;
}

@media (max-width: 1100px) {
	.anasayfa-yan .rastgele-kart,
	.anasayfa-yan .video-izgara {
		aspect-ratio: 9 / 16;
		width: 100%;
		height: auto;
		margin-inline: auto;
	}
	.anasayfa-medya .rastgele-ac img {
		height: auto;
		aspect-ratio: 9 / 16;
	}
	.anasayfa-orta {
		height: auto;
		display: contents;
	}
	.anasayfa-medya .anasayfa-gorsel { grid-area: gorsel; }
	.anasayfa-medya .anasayfa-video { grid-area: video; }
	.anasayfa-medya {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"gorsel video"
			"ses ses";
	}
	.anasayfa-medya .anasayfa-sesler {
		display: flex;
		flex-direction: column;
		gap: var(--video-ara);
		grid-area: ses;
		width: 100%;
		min-width: 0;
		aspect-ratio: auto;
		height: auto;
	}
	.anasayfa-orta-cizgi { display: none; }
	.anasayfa-orta-ikili { order: 4; }
	.anasayfa-medya .anasayfa-ses,
	#ey-mobil-sesler a {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 100%;
		min-height: var(--mobil-ses-boy);
		height: auto;
		padding: 1.2rem 1rem;
		box-sizing: border-box;
		line-height: 1.35;
		text-align: center;
		text-decoration: none;
	}
	.anasayfa-orta-ikili,
	.anasayfa-orta .dugme-genis {
		flex: 0 0 auto;
		min-height: 3.4rem;
		padding-block: 1rem;
	}
	.anasayfa-orta-ikili { padding-block: 0; }
}

/* Dar telefonda iki düğme yan yana sığmıyor; yazılar sarmak yerine
   alt alta geçiyorlar. */
@media (max-width: 460px) {
	.anasayfa-orta-ikili { grid-template-columns: 1fr; }
}


/* ==========================================================================
   5. Bölüm başlıkları ve kart ızgarası
   ========================================================================== */
.bolum { padding-block: var(--bosluk); }

/* Izgaranın başlığı: kartların tamamı kadar uzanan ince bir şerit.
   Çerçevesi altındaki sohbet kartlarıyla aynı dilde — sönük altın kenarlık
   ve üstte bordo vurgu — böylece ızgaranın başlığı gibi değil, ızgaranın
   ilk parçası gibi duruyor. */
.bolum-basi {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	/* Alttaki "Bütün sohbetler" şeridiyle birebir aynı genişlik. İkisi de
	   aynı kutunun (#sohbet-alani) çocuğu ve yan boşlukları sıfır; yine de
	   açıkça yazılı ki ileride bir kural araya girse bile kaymasınlar. */
	width: 100%;
	/* Kartlarla arası Özelleştir > Ana sayfa > "Başlık şeridi ile kartlar
	   arası boşluk" ile ayarlanır. Eski 2.2rem şeridi kutulardan koparıyordu. */
	margin-bottom: var(--izgara-basi-ara);

	padding: .62rem 1.4rem;
	/* Zemin varsayılan olarak saydam: kartların dolu yüzeyini alsaydı ince
	   şerit ağırlaşır, ızgaranın kendisiyle yarışırdı. Özelleştir'den bir
	   renk seçilirse buradaki yedek devre dışı kalır. */
	background: var(--basi-zemin, transparent);
	border: 1px solid var(--basi-kenar);
	border-top: var(--basi-ust-kalin) solid var(--basi-ust);
}
.bolum-basi h2,
.arsiv-basi h1 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: var(--liste-baslik-punto);
	color: var(--liste-baslik-renk);
	margin: 0;
}
.blog .arsiv-basi {
	justify-content: var(--arsiv-hiza);
}
.blog .arsiv-basi h1 {
	font-family: var(--arsiv-aile);
	font-weight: var(--arsiv-kalin);
	font-size: var(--arsiv-punto);
	font-style: var(--arsiv-stil);
	letter-spacing: var(--arsiv-harf);
	line-height: var(--arsiv-satir);
	color: var(--arsiv-renk);
	text-transform: var(--arsiv-donusum);
	text-align: var(--arsiv-yazi-hiza);
	width: 100%;
}
@media (max-width: 700px) {
	.blog .arsiv-basi h1 {
		font-size: var(--arsiv-punto-mobil);
	}
}
/* Izgaranın başlığı, altındaki "Bütün sohbetler" ve sohbetin sonundaki
   "Paylaş" şeritleriyle aynı dilde: küçük, seyrek harfli, büyük harf.
   Büyük harfe çevirmeyi tarayıcı yapıyor; sayfa lang="tr" olduğu için
   "İtikad" → "İTİKAD" doğru çıkıyor, noktalı i kaybolmuyor.
   Arşiv sayfasının kendi başlığı sayfanın ana başlığı olduğu için
   oradaki serif görünüm korunuyor. */
.bolum-basi h2 {
	font-family: var(--sans);
	font-size: var(--basi-punto);
	font-weight: var(--basi-kalin);
	letter-spacing: var(--basi-harf);
	text-transform: var(--basi-donusum);
	/* Kendi rengi var; arşiv sayfasının başlığı yukarıdaki ortak kuralda
	   kalıyor, o sayfanın ana başlığı olduğu için. */
	color: var(--basi-yazi);
}
.bolum-basi .not { font-family: var(--sans); font-size: .88rem; color: var(--krem-sonuk); }

/* Yapışkan menü çubuğu, kaydırınca bölüm başlığını örtmesin. */
#sohbetler { scroll-margin-top: 4.5rem; }

/* Grup seçiliyken başlığın yanındaki "bütün sohbetler"e dönüş bağlantısı. */
.grup-sifirla {
	font-family: var(--sans);
	font-size: var(--grup-geri-punto);
	letter-spacing: .04em;
	color: var(--krem-sonuk);
	border-bottom: 1px solid transparent;
	white-space: nowrap;
}
.grup-sifirla:hover,
.grup-sifirla:focus { color: var(--altin); border-bottom-color: var(--altin); }

/* Başlık şeridin tam ortasında kalsın diye dönüş bağlantısı akıştan çıkıp
   sağ uca oturuyor. Dar ekranda yer kalmadığı için başlığın altına düşer. */
@media (min-width: 700px) {
	.grup-sifirla {
		position: absolute;
		right: 1.4rem;
		top: 50%;
		transform: translateY(-50%);
	}
}

/* İçerik tazelenirken kısa bir sönme; yerine oturana kadar sayfa donmuş
   gibi görünmesin. */
#icerik,
#sohbet-alani { transition: opacity var(--gecis) ease; }
#icerik.yukleniyor,
#sohbet-alani.yukleniyor { opacity: .45; }

.izgara {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--kart-olcu), 1fr));
	gap: var(--izgara-ara, 1.1rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.kart {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	padding: var(--kart-dolgu);
	background: var(--kart-zemin);
	border: var(--kart-kenar-kalin) solid var(--kart-kenar);
	border-top: var(--kart-ust-kalin) solid var(--kart-ust);
	border-radius: var(--kart-yuvarlak);
	cursor: pointer;
	transition: border-color var(--gecis) ease, background var(--gecis) ease, transform var(--gecis) ease;
}
.kart:hover {
	background: var(--kart-zemin-ustu);
	border-top-color: var(--kart-ust-ustu);
	transform: translateY(calc(-1 * var(--kart-kalkis)));
}
.kart h3 {
	font-family: var(--serif);
	font-weight: var(--kart-kalin);
	font-size: var(--kart-baslik);
	line-height: 1.25;
	margin: 0;
	text-wrap: balance;
}
.kart h3 a { color: var(--kart-renk); }
.kart:hover h3 a,
.kart h3 a:hover { color: var(--kart-ustu-renk); }
.kart h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.kart .ozet { margin: 0; font-size: var(--kart-ozet); color: var(--kart-ozet-renk); }

/* ==========================================================================
   6. Tekil yazı
   ========================================================================== */
.yazi { padding-block: var(--bosluk); }
.single .yazi { padding-bottom: 0; }

.yazi-basi {
	max-width: var(--yazi-olcu);
	margin-inline: auto;
	margin-bottom: 2.2rem;
	text-align: center;
	display: grid;
	gap: .9rem;
	justify-items: center;
}
.yazi-basi h1 {
	font-family: var(--yazi-baslik-aile);
	font-weight: var(--yazi-baslik-kalin);
	font-size: clamp(min(2rem, var(--yazi-baslik)), 5vw, var(--yazi-baslik));
	line-height: 1.15;
	color: var(--yazi-baslik-renk);
	margin: 0;
	text-wrap: balance;
}

/* ---- Sohbet üst çubuğu: A− / A+ solda, çarpı sağda ----
   Telefonda aynı satırda karşılıklı durur; geniş ekranda metnin üst
   boşluğuna oturur, sayfayı aşağı itmez. */
.sohbet-ust {
	max-width: var(--yazi-olcu);
	margin: 0 auto 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	min-height: 2.2rem;
}
.sohbet-ust .punto-ayar {
	max-width: none;
	margin: 0;
}
.sohbet-ust .sohbet-cik-satir {
	max-width: none;
	margin: 0 0 0 auto;
}

/* ---- Yazı boyutu düğmeleri ----
   Dokunma alanları bilerek geniş (2.2rem). */
.punto-ayar {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: .35rem;
}
.punto-ayar[hidden] { display: none; }

/*
 * Geniş ekranda çubuk metin sütununun üst boşluğuna yerleşir.
 */
@media (min-width: 1200px) {
	.yazi { position: relative; }
	.single .yazi { padding-top: calc(var(--bosluk) + .55rem); }
	.single .sohbet-ust {
		position: absolute;
		top: calc(var(--bosluk) - 2.9rem);
		left: calc(50% - var(--yazi-olcu) / 2);
		right: calc(50% - var(--yazi-olcu) / 2);
		width: auto;
		max-width: none;
		margin: 0;
	}
}

.punto-dugme {
	min-width: 2.2rem;
	height: 2.2rem;
	padding: 0 .45rem;
	display: grid;
	place-items: center;

	font-family: var(--sans);
	font-size: .88rem;
	font-weight: 700;
	line-height: 1;

	color: var(--krem);
	background: var(--yuzey);
	border: 1px solid var(--altin-sonuk);
	cursor: pointer;
	transition: background var(--gecis) ease, border-color var(--gecis) ease, color var(--gecis) ease;
}
.punto-dugme:hover:not(:disabled) {
	background: var(--bordo);
	border-color: var(--altin);
	color: var(--vurgu);
}
.punto-dugme:disabled { opacity: .35; cursor: default; }

/* Sohbetin sağ üstündeki kare çarpı: ana sayfaya döner. */
.sohbet-cik-satir {
	max-width: var(--yazi-olcu);
	margin: 0 auto 1.4rem;
	display: flex;
	justify-content: flex-end;
}
.sohbet-cik {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border-radius: 0;
	border: 1px solid var(--altin-sonuk);
	background: var(--yuzey);
	color: var(--krem);
	transition: background var(--gecis) ease, border-color var(--gecis) ease, color var(--gecis) ease;
}
.sohbet-cik:hover,
.sohbet-cik:focus-visible {
	background: var(--bordo);
	border-color: var(--altin);
	color: var(--vurgu);
}

/* Sohbet metni: eski sayfadaki gibi iki yana yaslı ve kalın.
   Yaslama boşluk nehirleri açmasın diye Türkçe heceleme de açık. */
.govde {
	max-width: var(--yazi-olcu);
	margin-inline: auto;
	font-family: var(--metin);
	/*
	 * Punto üç şeyin bileşimi:
	 *   taban  — telefonda bile 1.25rem'in (20px) altına inmez. Okuyucuların
	 *            çoğu telefonda ve gözü yorgun; eski 1.05rem tabanı düşüktü.
	 *   ölçek  — ziyaretçinin A− / A+ ile seçtiği kademe (bkz. js/tema.js).
	 *            Dokunulmamışsa 1, yani hiçbir şey değişmez.
	 *   tavan  — Görünüm > Özelleştir'deki --sohbet-punto.
	 * Taban min() içinde: tavan bundan da küçüğe ayarlanırsa taban onu aşmasın.
	 */
	font-size: calc(
		clamp(min(1.25rem, var(--sohbet-punto)), 3.6vw, var(--sohbet-punto))
		* var(--okuma-olcek, 1)
	);
	font-weight: var(--sohbet-kalinlik);
	/* Paragrafın kendi içi sıkı, paragraflar arası geniş — orijinal
	   sitedeki ritim böyle. İkisini birden gevşetmek metni dağıtıyor.
	   Değer Görünüm > Özelleştir ekranından ayarlanabilir. */
	line-height: var(--sohbet-satir);
	/* Harf ve kelime aralığı da Özelleştir'den. İkisi de varsayılan 0,
	   yani yazı tipinin kendi ölçüsü — ayara dokunulmadıkça metin hiç
	   değişmiyor. */
	letter-spacing: var(--sohbet-harf);
	word-spacing: var(--sohbet-kelime);
	color: var(--sohbet-renk);
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}
/* Sıra önemli: önce hepsi sıfırlanır, sonra ardışık olanlara üst boşluk
   verilir. Tersi olursa `.govde p { margin: 0 }` daha özgül olduğu için
   paragraf aralığını siler ve metin sıkışık görünür. */
.govde > * { margin: 0; }
.govde > * + * { margin-top: var(--sohbet-paragraf); }
/* Yazarken konan kalın/eğik işaretler metni ayırmasın: sohbet tek düzen. */
.govde strong,
.govde b,
.govde em,
.govde i {
	font-weight: inherit;
	font-style: inherit;
	color: inherit;
}

/* Yazar bilerek ortalamış/sağa yaslamış satırlar (şiir, atıf) yaslanmasın. */
.govde [style*="text-align: center"],
.govde [style*="text-align:center"],
.govde [style*="text-align: right"],
.govde [style*="text-align:right"] { hyphens: none; }

/* İçerikteki ilk başlık h1'e yükseltiliyor; görünüm h2 ile birebir aynı
   kalsın diye ayrı tanımlanıyor (üst boşluk almaması gerekiyor). */
.govde h1 {
	font-family: var(--yazi-baslik-aile);
	font-weight: var(--yazi-baslik-kalin);
	font-size: var(--govde-baslik);
	line-height: 1.25;
	color: var(--yazi-baslik-renk);
	text-wrap: balance;
}

.govde h2, .govde h3, .govde h4 {
	font-family: var(--yazi-baslik-aile);
	font-weight: var(--yazi-baslik-kalin);
	color: var(--yazi-baslik-renk);
	line-height: 1.25;
	margin-top: 2.6rem;
	text-wrap: balance;
}
.govde h2 { font-size: var(--govde-baslik); }
.govde h3 { font-size: var(--govde-h3); }
.govde h4 { font-size: var(--govde-h4); }

.govde a { text-decoration: underline; text-underline-offset: .18em; }

.govde blockquote {
	margin: 2rem 0;
	padding: .3rem 0 .3rem 1.4rem;
	border-left: 2px solid var(--altin-sonuk);
	color: var(--sohbet-renk);
	font-style: italic;
}
.govde ul, .govde ol { padding-left: 1.4rem; }
.govde li + li { margin-top: .5rem; }
.govde img { margin-inline: auto; }

.govde [style*="text-align: center"],
.govde [style*="text-align:center"] { color: inherit; }

/* ==========================================================================
   6b. Tanıtım sayfası

   Üstte büyük fotoğraf; özgeçmiş / eserler / iletişim doldurulmuşsa
   altında, sohbet ızgarasıyla aynı dilde (.bolum-basi, .izgara, .kart).
   ========================================================================== */
/* Sayfanın tek öğesi büyük bir fotoğraf: ortada, olabildiğince geniş.
   Ad kaynakta duruyor ama görünmüyor (bkz. sablon-tanitim.php), o yüzden
   burada ada ayrılmış bir sütun yok — görsel bütün genişliği alıyor. */
.tanitim-basi {
	margin-bottom: 2.4rem;
	text-align: center;
}

.tanitim-foto {
	/* Kendi doğal boyundan büyütülmüyor: ölçüsünü aşan bir görsel
	   bulanıklaşır. Sınır, sohbet metninden geniş ama kabuğu taşmayan
	   bir ölçü. */
	width: min(100%, 52rem);
	margin-inline: auto;
}
/* Çerçevesiz: kart kenarlığı da köşe yuvarlaması da yok. Görselin
   kendi zemini sayfanınkiyle birleşsin, ortada duran tek şey resim
   olsun isteniyor. */
.tanitim-foto img {
	display: block;
	width: 100%;
	height: auto;
}

.tanitim-unvan {
	font-family: var(--sans);
	font-size: .92rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--altin);
	margin: .7rem 0 0;
}

/* Özgeçmiş, sohbet metniyle aynı okuma genişliği ve puntosunda: aynı
   sayfada iki ayrı okuma ölçüsü olmasın. */
.tanitim-metin {
	max-width: var(--yazi-olcu);
	margin-inline: auto;
	font-size: var(--sohbet-punto);
	line-height: var(--sohbet-satir);
	color: var(--krem-orta);
}
.tanitim-metin p { margin: 0; }
.tanitim-metin p + p { margin-top: var(--sohbet-paragraf); }

/* Eser kartındaki kapak, kartın dolgusunu taşarak tam genişlikte durur —
   kitap kapağı çerçeve içinde küçük bir pul gibi görünmesin. */
.eser-kart .eser-kapak {
	margin: calc(-1 * var(--kart-dolgu)) calc(-1 * var(--kart-dolgu)) 0;
}
.eser-kart .eser-kapak img {
	display: block;
	width: 100%;
	height: auto;
}

.tanitim-iletisim {
	max-width: var(--yazi-olcu);
	margin-inline: auto;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .8rem;
}
.iletisim-satir {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3rem 1rem;
	padding-bottom: .8rem;
	border-bottom: 1px solid var(--kart-kenar);
}
.iletisim-satir:last-child { border-bottom: 0; padding-bottom: 0; }

.iletisim-tur {
	flex: 0 0 9rem;
	font-family: var(--sans);
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--krem-sonuk);
}
.iletisim-deger { color: var(--krem); font-size: var(--iletisim-deger-punto, 1.05rem); }
a.iletisim-deger { border-bottom: 1px solid transparent; }
a.iletisim-deger:hover,
a.iletisim-deger:focus { color: var(--altin); border-bottom-color: var(--altin); }

/* Telefonda fotoğraf ve ad alt alta; yan yana dururken ikisi de sıkışıyor. */
@media (max-width: 640px) {
	/* Görselin dar ekranda küçültülecek bir yanı yok: zaten kabuğun
	   genişliğini alıyor, sayfanın tek öğesi o. */
	.iletisim-tur { flex-basis: 100%; }
}

/* ==========================================================================
   7. Ses arşivi

   Her kayıt bir satır düğmesi; tıklanınca alttaki tek oynatıcıya gider.
   JavaScript kapalıysa .ses-cal gizli kalır ve tarayıcının kendi oynatıcısı
   (.ses-yerli) görünür — o durumda da kayıtlar dinlenebilir.
   ========================================================================== */
.ses-kart {
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-left: 2px solid var(--bordo);
	margin-bottom: .7rem;
	transition: border-color var(--gecis) ease, background var(--gecis) ease;
}
.ses-kart:hover { border-left-color: var(--altin); background: var(--yuzey-ust); }
.ses-kart.secili { border-left-color: var(--altin); }
.ses-kart.caliyor { background: var(--yuzey-ust); }

.ses-cal {
	display: flex;
	align-items: center;
	gap: .9rem;
	width: 100%;
	padding: .95rem 1.2rem;
	text-align: left;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}
.ses-cal[hidden] { display: none; }

/* Duraklamışken üçgen, çalarken iki çubuk. */
.ses-cal-ikon {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-top: .42rem solid transparent;
	border-bottom: .42rem solid transparent;
	border-left: .66rem solid var(--altin);
	margin-left: .15rem;
}
.ses-kart.caliyor .ses-cal-ikon {
	width: .64rem;
	height: .78rem;
	border: 0;
	margin-left: 0;
	background: linear-gradient(
		to right,
		var(--altin) 0 .22rem,
		transparent .22rem .42rem,
		var(--altin) .42rem 100%
	);
}

.ses-kart .ses-ad {
	flex: 1;
	font-family: var(--serif);
	font-size: var(--ses-ad-punto);
	line-height: 1.3;
	color: var(--krem);
}
.ses-kart.caliyor .ses-ad { color: var(--vurgu); }

.ses-kart .sure {
	flex: 0 0 auto;
	font-family: var(--sans);
	font-size: var(--ses-sure-punto, .8rem);
	letter-spacing: .08em;
	color: var(--altin);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ses-yerli { padding: 1rem 1.2rem; }
.ses-yerli[hidden] { display: none; }

.ses-kart audio,
.govde audio { width: 100%; display: block; }

/* ==========================================================================
   7a. Günün sohbeti

   Sohbet ızgarasıyla videoların arasındaki bölüm. Bilerek karta
   benzemiyor: iki kart ızgarasının arasında üçüncü bir ızgara daha olsa
   sayfa tekdüze olurdu. Burası tek parça, ferah, metnin kendisini öne
   çıkaran bir alan — kayan alanın sakin bir akrabası.

   İçerik her gün kendiliğinden değişiyor (bkz. ey_gunun_sohbetleri).
   Ayarlar: Özelleştir > Ana sayfa
   ========================================================================== */
/* Kutu iki bölümün ARASINA yerleşiyor, kendi başına bir bölüm gibi
   durmuyor: kendi payı da, komşularının bu yana bakan payları da
   kısılıyor. Üç kural birlikte çalışmazsa sohbetlerin alt payı ya da
   videoların üst payı olduğu gibi kalıp arada yine geniş bir açıklık
   bırakıyor.

   :has() desteklemeyen eski bir tarayıcıda yalnızca üstteki açıklık
   büyük kalır — sayfa yine düzgün görünür.

   Ayar: Özelleştir > Ana sayfa > "Kutunun üstündeki ve altındaki boşluk" */
#gunun { padding-block: var(--gunun-bosluk); }
#sohbetler:has(+ #gunun) { padding-bottom: var(--gunun-bosluk); }
#gunun + #videolar { padding-top: var(--gunun-bosluk); }
/* Başlık şeridi: yalnızca üst çizgi altın, öbür kenarlar sitedeki gibi. */
#gunun .bolum-basi {
	border: 1px solid var(--basi-kenar);
	border-top: 1px solid var(--altin);
}

/* Alta inince zemin, gizlenen sütun alanının rengi. */
#videolar.anasayfa-medya-alt {
	position: relative;
	isolation: isolate;
}
#videolar.anasayfa-medya-alt::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background: var(--sutun-zemin);
	z-index: -1;
	pointer-events: none;
}
#videolar.anasayfa-medya-alt .bolum-basi h2 {
	color: var(--sutun-yazi);
}

/* İnce manzara şeridi: şeridi doldurur, görsel üstten/alttan kırpılır. */
.manzara-serit {
	position: relative;
	isolation: isolate;
	padding: 0;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-top: var(--manzara-bosluk);
	background: none;
}
.single .manzara-serit {
	margin-top: 0;
}
body:has(.manzara-serit) #videolar { padding-bottom: 0; }
.rastgele-ac.manzara-ac {
	display: block;
	flex: none;
	width: 100%;
	height: clamp(160px, 36vw, var(--manzara-boy));
	padding: 0;
	border: 1px solid var(--video-kenar);
	border-radius: 0;
	background: #111;
	background-repeat: no-repeat;
	cursor: pointer;
	overflow: hidden;
}
.rastgele-ac.manzara-ac img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
	flex: none;
}
.rastgele-ac.manzara-ac:hover img,
.rastgele-ac.manzara-ac:focus-visible img { transform: none; }
.rastgele-ac.manzara-ac:focus-visible {
	outline: 2px solid var(--altin);
	outline-offset: -2px;
}

/* Altta dört eşit 9:16 kutu: görsel, sohbet, ilahi, video. */
.anasayfa-dort {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	width: 100%;
	gap: var(--video-ara);
	align-items: stretch;
}
.anasayfa-dort .anasayfa-yan { min-width: 0; min-height: 0; }
.anasayfa-dort .rastgele-kart,
.anasayfa-dort .video-izgara,
.anasayfa-dort .ses-ekran {
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
}
.anasayfa-dort .video-izgara { display: flex; }
.anasayfa-dort .video-kart {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
}
.anasayfa-dort .video-ad,
.anasayfa-dort .video-aciklama { display: none; }
.anasayfa-dort .video-govde,
.anasayfa-dort .video-ac {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	height: 100%;
}
.anasayfa-dort .video-onizleme {
	flex: 1 1 auto;
	height: 100%;
	aspect-ratio: auto;
}
.anasayfa-dort .video-onizleme img,
.anasayfa-dort .video-onizleme video,
.anasayfa-dort .video-onizleme .video-bos,
.anasayfa-dort .rastgele-ac img {
	height: 100%;
	object-fit: cover;
}

.ses-ekran {
	display: flex;
	flex-direction: column;
	background: var(--video-zemin);
	border: var(--video-kenar-kalin) solid var(--video-kenar);
	border-top: var(--video-ust-kalin) solid var(--video-ust);
	border-radius: var(--video-yuvarlak);
	overflow: hidden;
}
.ses-ekran-ac {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	background: #000;
	color: inherit;
	text-decoration: none;
}
.ses-ekran-ac .video-onizleme {
	flex: 1 1 auto;
	height: 100%;
	aspect-ratio: auto;
}
.ses-ekran-ac .video-onizleme img,
.ses-ekran-ac .video-onizleme .video-bos {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ses-ekran-ad {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: .7rem .8rem 1rem;
	font-family: var(--serif);
	font-size: var(--video-punto);
	color: var(--krem);
	background: linear-gradient(transparent, rgba(12, 6, 5, .78));
	text-align: center;
}
.anasayfa-dort-mesaj { margin-top: var(--video-ara); }

#ey-mobil-sesler { display: none; }

@media (max-width: 1100px) {
	.anasayfa-dort {
		grid-template-columns: 1fr 1fr;
	}
	.anasayfa-ses-sohbet,
	.anasayfa-ses-ilahi { display: none; }
	#ey-mobil-sesler {
		display: flex;
		flex-direction: column;
		gap: var(--video-ara);
		width: 100%;
		margin-top: var(--video-ara);
	}
	#ey-mobil-sesler a {
		background: var(--video-zemin);
		border: var(--video-kenar-kalin) solid var(--video-ust);
		color: var(--video-yazi);
		font-family: var(--serif);
		font-size: var(--video-punto);
	}
	#ey-mobil-sesler a:hover,
	#ey-mobil-sesler a:focus-visible {
		color: var(--altin);
		border-color: var(--altin);
	}
}

.gunun-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
	gap: 1.4rem;
}

.gunun-kart {
	display: grid;
	/* Yan yana iki kart varsa ızgara ikisini de uzun olanın boyuna
	   çekiyor; kısa olanın içeriği "start" ile tepeye yapışıp altta
	   boşluk bırakıyordu. Ortalanınca boşluk alta değil, iki yana eşit
	   dağılıyor. */
	align-content: center;
	/* Hizalama iki ayarla veriliyor: text-align satırların kendisini,
	   justify-items ise düğme gibi blok öğeleri hizalıyor. Yalnız biri
	   yazılsaydı yazı ortalanır, düğme solda kalırdı. */
	justify-items: var(--gunun-oge);
	text-align: var(--gunun-hiza);
	gap: .9rem;
	/* Alt pay ayrı: kutunun altında düğme var, üstünde başlık. Dört yanı
	   eşit verilince alt taraf göze fazla açık geliyordu — düğme zaten
	   kendi içinde bir yastık taşıyor. clamp'ler dar ekran için: girilen
	   sayı geniş ekranın üst sınırı, telefonda kendiliğinden kısalıyor.
	   Ayar: Özelleştir > Ana sayfa > "Kutunun iç boşluğu" / "…alttaki" */
	padding: clamp(1rem, 4vw, var(--gunun-dolgu))
	         clamp(1rem, 4vw, var(--gunun-dolgu))
	         clamp(.6rem, 3vw, var(--gunun-dolgu-alt));
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	/* Vurgu üstte: yazı ortalıyken sol kenardaki kalın çizgi kartı bir
	   yana çekiyordu. Üstteki çizgi hem simetrik, hem de kayan alan ve
	   video kartlarıyla aynı dilde. */
	border-top: 1px solid var(--altin-sonuk);
	position: relative;
}

/* Tepedeki tırnak süsü. Ayrı bir görsel değil, yazının kendisi: metnin
   alıntı olduğunu söyleyen sessiz bir işaret. Sönük ve tıklanamaz —
   başlığın arkasında filigran gibi duruyor. */
.gunun-kart::before {
	content: "❝";
	position: absolute;
	top: .15rem;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--serif);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--altin-sonuk);
	opacity: .3;
	pointer-events: none;
}

.gunun-ad {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(min(1.3rem, var(--gunun-ad-punto)), 3vw, var(--gunun-ad-punto));
	line-height: 1.3;
	color: var(--krem);
	text-wrap: balance;
}
.gunun-ad a { color: inherit; }
.gunun-ad a:hover,
.gunun-ad a:focus-visible { color: var(--altin); }

/* Sohbet metninin kendisiyle aynı görünüm: aynı yazı tipi, aynı kalınlık,
   aynı satır aralığı, aynı renk. Önceden eğik, ince ve sönüktü — alıntı
   gibi dursun diye; ama sohbetin bir parçası olduğu için asıl metne
   benzemesi daha doğru. Tek fark punto: kart içinde durduğu için bir
   tık küçük, o da ayrıca ayarlanabiliyor. */
.gunun-ozet {
	margin: 0;
	font-family: var(--metin);
	font-size: var(--gunun-punto);
	font-weight: var(--sohbet-kalinlik);
	line-height: var(--sohbet-satir);
	color: var(--krem);
}

/* display:grid bilerek: düğme inline-flex ve satır üstünde duruyor,
   sarmalayan paragraf da onun altında harflerin kuyruğu için yer
   ayırıyordu. Kutunun dibinde görülen o birkaç piksellik fazlalık
   buradan geliyordu; ızgara satır kavramını ortadan kaldırınca kalmıyor. */
.gunun-dip {
	display: grid;
	justify-items: var(--gunun-oge);
	margin: .2rem 0 0;
}

/* Düğme, olağan düğmelerden bir tutam daha uzun ve bir tutam daha ince:
   kartın ortasında tek başına durduğu için dar kalınca cılız, kalın
   kalınca hantal görünüyordu. justify-content olmadan uzatılan düğmede
   yazı sola yapışıyordu. */
.gunun-dip .dugme {
	min-width: var(--gunun-dugme-en);
	padding-block: var(--gunun-dugme-boy);
	justify-content: center;
}

/* ==========================================================================
   7b. Video arşivi

   Sayfa açılırken hiçbir oynatıcı yüklenmiyor: kutuda yalnızca kapak
   görseli ve bir oynat düğmesi var. Tıklanınca YouTube/Vimeo çerçevesi o
   kutunun içine kuruluyor (bkz. js/tema.js). On videolu bir sayfa böylece
   on ayrı oynatıcı indirmiyor — sitenin geri kalanındaki yükleme
   sadeleştirmesiyle aynı mantık.

   Videolar: wp-admin > Ses ve Video. Görünüm: Özelleştir > Videolar.
   ========================================================================== */
.video-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--video-sutun), 1fr));
	gap: var(--video-ara);
}

.video-kart {
	display: flex;
	flex-direction: column;
	background: var(--video-zemin);
	border: var(--video-kenar-kalin) solid var(--video-kenar);
	border-top: var(--video-ust-kalin) solid var(--video-ust);
	border-radius: var(--video-yuvarlak);
	/* Köşeler yuvarlatılınca kapak görseli keskin köşeden taşmasın. */
	overflow: hidden;
}
/* Kapak + ad aynı gövdede: isim kapanınca kapak o yeri de doldurur. */
.video-govde {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* Önizleme kutusu. Oranı her kartta AYNI — videonun kendi oranı burada
   kullanılmıyor; dikey bir video sütunun iki katı boyunda olunca ızgara
   dağılıyordu. Kartlar sohbet kutuları gibi düzgün bir tabloda duruyor,
   videonun gerçek oranı ise açılan pencerede geçerli.
   Ayar: Özelleştir > Videolar > "Önizleme kutusunun oranı" */
.video-ac {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	background: #000;
	border: 0;
	cursor: pointer;
}
.video-onizleme {
	display: block;
	aspect-ratio: var(--video-onizleme);
	overflow: hidden;
}
.video-onizleme img,
.video-onizleme video {
	width: 100%;
	height: 100%;
	display: block;
	/* Önizlemede kırpmak doğru: kutular aynı boyda kalsın, dikey videonun
	   ortası görünsün. Kırpılmayan tam görüntü pencerede zaten var. */
	object-fit: cover;
	transition: transform var(--gecis) ease;
}
.video-ac:hover .video-onizleme img,
.video-ac:hover .video-onizleme video { transform: scale(1.04); }

/* Kapak da YouTube küçük resmi de yoksa (Vimeo) düz koyu kutu. */
.video-bos {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--yuzey-ust);
}

/* Ortadaki oynat üçgeni. Ayrı bir görsel değil, iki CSS şekli: kapağın
   üstünde her renkte okunsun diye koyu daire + krem üçgen. */
.video-ok {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 3.6rem;
	height: 3.6rem;
	border: 2px solid var(--altin);
	border-radius: 50%;
	background: rgba(36, 21, 18, .55);
	backdrop-filter: blur(2px);
	transition: background var(--gecis) ease, transform var(--gecis) ease;
}
.video-ok::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: .55rem 0 .55rem .95rem;
	border-color: transparent transparent transparent var(--krem);
}
.video-ac:hover .video-ok,
.video-ac:focus-visible .video-ok {
	background: var(--bordo);
	transform: translate(-50%, -50%) scale(1.08);
}

.video-ad {
	display: var(--video-ad, block);
	margin: 0;
	padding: var(--video-dolgu);
	font-family: var(--serif);
	font-size: var(--video-punto);
	font-weight: 400;
	line-height: 1.35;
	color: var(--video-yazi);
	/* Ad ve açıklamanın hizası. Ayar: Özelleştir > Videolar */
	text-align: var(--video-hiza);
}
.video-aciklama {
	margin: 0;
	padding: 0 var(--video-dolgu) var(--video-dolgu);
	font-family: var(--sans);
	font-size: .9rem;
	line-height: 1.5;
	color: var(--krem-sonuk);
	text-align: var(--video-hiza);
}

/* --- Açılan video penceresi ---------------------------------------------
   Videonun gerçek oranı burada geçerli. Kutunun ölçüsünü JavaScript
   veriyor (bkz. js/tema.js): oranı bilip ekrana sığan en büyük boyu
   hesaplıyor, böylece dikey video da yatay video da kırpılmadan ve
   ekrandan taşmadan duruyor. */
.video-pencere {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: rgba(20, 10, 8, .9);
	backdrop-filter: blur(6px);
}
.video-pencere[hidden] { display: none; }

.video-pencere-ic {
	position: relative;
	display: grid;
	gap: .7rem;
	justify-items: center;
	max-width: 100%;
}
.video-oynatici {
	position: relative;
	background: #000;
	border: 1px solid var(--kayan-kenar);
	border-radius: 8px;
	overflow: hidden;
	max-width: 100%;
}
.video-oynatici video,
.video-oynatici iframe,
.gorsel-oynatici img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	/* Pencerede kırpma yok: görüntü ne şekildeyse öyle görünüyor. */
	object-fit: contain;
}
.video-pencere-ad {
	margin: 0;
	font-family: var(--serif);
	font-size: 1.05rem;
	color: var(--krem);
	text-align: center;
}
a.video-pencere-ad { color: var(--krem); }
a.video-pencere-ad:hover,
a.video-pencere-ad:focus-visible { color: var(--altin); }
.video-kapat {
	position: absolute;
	top: .7rem;
	right: .7rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	background: var(--bordo);
	border: 1px solid var(--altin);
	border-radius: 50%;
	color: var(--krem);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
	transition: background var(--gecis) ease, border-color var(--gecis) ease, color var(--gecis) ease;
}
.video-kapat:hover,
.video-kapat:focus-visible {
	background: var(--altin);
	border-color: var(--altin);
	color: var(--zemin);
}

@media (max-width: 600px) {
	.video-kapat { top: .5rem; right: .5rem; }
}

/* Pencere açıkken arkadaki sayfa kaymasın. */
body.video-acik { overflow: hidden; }

/* ==========================================================================
   8. Arama kutusu
   ========================================================================== */
.arama { display: flex; gap: .5rem; max-width: 26rem; }
.arama input[type="search"] {
	flex: 1;
	padding: .6rem .8rem;
	background: var(--yuzey);
	border: 1px solid rgba(201, 162, 39, .3);
	color: var(--krem);
	font-family: var(--sans);
	font-size: var(--arama-punto);
}
.arama input[type="search"]::placeholder { color: var(--krem-sonuk); }
.arama button {
	padding: .6rem 1.1rem;
	background: var(--bordo);
	border: 1px solid var(--bordo);
	color: var(--krem);
	font-family: var(--sans);
	font-size: var(--arama-punto);
	cursor: pointer;
}
.arama button:hover { background: #7d1826; border-color: var(--altin); }

/* ==========================================================================
   9. Sayfalama
   ========================================================================== */
.sayfalama {
	margin-top: 2.5rem;
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
	justify-content: center;
}
.sayfalama .page-numbers {
	display: inline-block;
	padding: .5rem .9rem;
	border: 1px solid rgba(201, 162, 39, .28);
	color: var(--krem-orta);
	font-family: var(--sans);
	font-size: var(--sayfa-punto);
	font-variant-numeric: tabular-nums;
}
.sayfalama .page-numbers:hover { border-color: var(--altin); color: var(--krem); }
.sayfalama .page-numbers.current {
	background: var(--bordo);
	border-color: var(--bordo);
	color: var(--krem);
}
.sayfalama .page-numbers.disabled {
	opacity: .35;
	pointer-events: none;
}
.izgara-sayfalama {
	flex-wrap: nowrap;
}
.izgara-sayfalama .dots {
	border-color: transparent;
	padding-inline: .35rem;
}
.izgara-sayfalama .sayfa-cik {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	padding: 0;
	aspect-ratio: 1;
	box-sizing: border-box;
}
.izgara-sayfalama .sayfa-cik:hover {
	background: var(--bordo);
	border-color: var(--bordo);
	color: var(--krem);
}

/* ==========================================================================
   10. Alt bilgi
   ========================================================================== */
.ayak {
	background: var(--sutun-zemin);
	color: var(--sutun-yazi);
	/* Ayarlanan sayı geniş ekranın üst sınırı; telefonda clamp kendiliğinden
	   kısaltıyor, yoksa 5rem'lik bir pay dar ekranda sayfayı uzatıyordu. */
	padding-block: clamp(1.5rem, 6vw, var(--sutun-bosluk));
	text-align: var(--sutun-hiza);
}
.ayak-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--sutun-en), 1fr));
	gap: var(--sutun-ara);
	align-items: start;
}

/* Kitap görseli en sonda kalsın: kutucuklar dynamic_sidebar ile tek
   seferde çıktığı için HTML sırası yetmiyor, yeri burada düzeltiliyor. */
.ayak-izgara > .widget { order: 1; }
.ayak-izgara > .widget_custom_html { order: 2; }
.ayak .widget-title,
.ayak h4 {
	font-family: var(--serif);
	font-style: var(--sutun-baslik-egik);
	font-weight: var(--sutun-baslik-kalin);
	font-size: var(--sutun-baslik-punto);
	letter-spacing: .03em;
	color: var(--sutun-baslik);
	margin: 0 0 var(--sutun-baslik-alt);
	padding-bottom: .5rem;
	/* Çizgi başlığı taşımadan ayırsın; rengin sönük karışımı listeyle
	   aynı tonda erimesin. Kalınlık 0 yazılınca tamamen kalkıyor. */
	border-bottom: var(--sutun-cizgi-kalin) solid color-mix(in srgb, var(--sutun-cizgi) 55%, transparent);
}
/* Alt bilgideki bütün kutular aynı ritmi kullansın: "Yeni" düz bir liste,
   "Çok Okunanlar" ve "İtikadî" ise menü kutusu; ikisi de burada eşitlenir. */
.ayak ul,
.ayak .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sutun-bag-ara);
}
.ayak li { margin: 0; }
.ayak li a,
.ayak .menu a {
	display: block;
	padding: 0;
	color: var(--sutun-bag);
	font-family: var(--sans);
	font-size: var(--sutun-punto);
	line-height: var(--sutun-satir);
	letter-spacing: normal;
	white-space: normal;
	border: 0;
}
.ayak li a:hover { color: var(--sutun-bag-ustu); text-decoration: underline; }
.ayak img { margin-inline: auto; }
.ayak .widget { margin: 0; }

/* Kitap görseli — kutunun içeriği eski temadan gelen .ch-grid işaretlemesini
   kullanıyor; burada sade bir bağlantıya indirgeniyor. */
.ayak .ch-grid {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Kitap görselinin boyu — büyütüp küçültmek için tek yer burası.
   Dar ekranda sütuna sığsın diye üst sınır esnek. */
.ayak .ch-grid li { width: min(var(--sutun-kitap-en), 100%); }
.ayak .ch-item { width: 100%; }
.ayak .ch-info-front {
	display: block;
	aspect-ratio: 1 / 1;
	background-image: url(images/kitap.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: drop-shadow(0 8px 18px rgba(74, 13, 22, .4));
	transition: transform var(--gecis) ease;
}
.ayak .ch-item a:hover .ch-info-front { transform: translateY(-3px); }
.ayak .ch-info-back { display: none; }

/* Geniş ekranda düzen: dört yazı sütunu + sağ uçta kitap.
   Kitap kendi sütununda ve sağa yaslı; yoksa diğerleriyle eşit paya
   sıkışıp küçülüyordu. */
@media (min-width: 1000px) {
	.ayak-izgara {
		grid-template-columns:
			repeat(var(--sutun-adet), minmax(0, 1fr))
			minmax(min(220px, var(--sutun-kitap-en)), var(--sutun-kitap-en));
	}
	.ayak-izgara > .widget_custom_html { justify-self: end; width: 100%; }
	.ayak-izgara > .widget_custom_html .ch-grid { justify-content: flex-end; }

	/* Kitap kapatılınca sağ uçtaki dar sütun da kalksın; yoksa yanda
	   sebepsiz bir boşluk kalıyordu (bkz. inc/ozellestirici.php). */
	.ayak-izgara:not(:has(> .widget_custom_html)) {
		grid-template-columns: repeat(var(--sutun-adet), minmax(0, 1fr));
	}
}

/* Dar ekranda sütunlar alt alta düşüyor; orada ortalanmış duruyorlar. */
@media (max-width: 700px) {
	.ayak-izgara { text-align: center; }
	.ayak .widget-title,
	.ayak h4 { text-align: center; }
	.ayak .ch-grid { justify-content: center; }
}

/* Şeridin her yanı ayarlanabilir: Görünüm > Özelleştir > Erenler Yolu
   teması > Alt bilgi. Renk ve zemin bilerek "boş bırakılabilir" — seçim
   yapılmadıkça buradaki var() yedeklerine, yani sitenin ana renklerine
   düşerler (bkz. inc/ozellestirici.php — ey_ozel_stil). */
.ayak-son {
	background: var(--ayak-zemin, var(--zemin-alt));
	text-align: center;
	padding: var(--ayak-dolgu) 1rem;
}
.ayak-son a {
	display: inline-block;
	font-family: var(--sans);
	font-weight: var(--ayak-kalinlik);
	font-size: var(--ayak-punto);
	letter-spacing: var(--ayak-aralik);
	color: var(--ayak-renk, var(--nar));
}
.ayak-son a:hover { color: var(--altin); }

/* Telefonda harf aralığı yazıyı iki satıra bölüyor; punto aynı kalsın,
   sığması için sadece aralık biraz kısalsın. */
@media (max-width: 700px) {
	.ayak-son { padding-inline: .5rem; }
	.ayak-son a {
		white-space: nowrap;
		letter-spacing: min(var(--ayak-aralik), .2em);
	}
}

/* ==========================================================================
   10b. Sohbetin altındaki paylaş düğmesi

   Tek düğme: telefonda cihazın kendi paylaşma penceresini açar, masaüstünde
   bağlantıyı kopyalar. Altı ayrı ağ düğmesi hem kalabalıktı hem de her biri
   ayrı bir karar demekti.
   ========================================================================== */
.paylas {
	max-width: var(--yazi-olcu);
	margin: 2rem auto var(--paylas-alt-bosluk);
	padding-bottom: var(--paylas-cizgi-bosluk);
	border-bottom: 1px solid var(--cizgi);
	display: flex;
	justify-content: flex-end;
}

.paylas-dugme {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1.3rem;

	font-family: var(--sans);
	font-size: var(--paylas-punto);
	font-weight: var(--paylas-kalin);
	line-height: 1.4;

	/* Kendi renkleri var; öbür iki şeritten bağımsız.
	   Ayar: Özelleştir > Erenler Yolu teması > Şeritler */
	color: var(--paylas-yazi);
	background: var(--paylas-zemin, transparent);
	border: 1px solid var(--paylas-kenar);
	border-top: var(--paylas-ust-kalin) solid var(--paylas-ust);
	cursor: pointer;
	transition: background var(--gecis) ease, border-color var(--gecis) ease, color var(--gecis) ease;
}
.paylas-dugme[hidden] { display: none; }
.paylas-dugme:hover,
.paylas-dugme:focus-visible {
	color: var(--vurgu);
	background: var(--bordo);
	border-color: var(--altin);
}
.paylas-dugme.tamam { border-color: var(--altin); background: rgba(201, 162, 39, .2); }

/* Geniş hâli: düğme okuma sütununun tamamı kadar uzar — ana sayfadaki
   "Bütün sohbetler" şeridiyle aynı dil, sohbetin sonu da aynı biçimde
   kapanmış olur. Ayar: Görünüm > Özelleştir > Erenler Yolu teması >
   Sohbet yazısı > "Paylaş düğmesi metin boyunca uzasın" */
.paylas.genis .paylas-dugme {
	flex: 1;
	justify-content: center;
	/* Ana sayfadaki şeritten bilerek ince: orası sayfanın asıl yönlendirmesi,
	   burası sohbeti okuyup bitirene sunulan ikincil bir davet. */
	padding-block: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ==========================================================================
   10d. Alttaki ses oynatıcısı

   Sayfanın en altına yapışık ince bir şerit. Bir kayıt seçilene kadar
   hidden; seçildikten sonra sayfalar arası gezinirken hiç yıkılmıyor,
   dolayısıyla ses de kesilmiyor (bkz. js/oynatici.js).
   ========================================================================== */
.oynatici {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;

	background: var(--oy-zemin, var(--yuzey));
	border-top: 2px solid var(--oy-kenar, var(--altin-sonuk));
	box-shadow: 0 -6px 24px rgba(0, 0, 0, .5);
}
.oynatici[hidden] { display: none; }

.oynatici-ic {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: .7rem;
}

/* Çal/duraklat: en büyük ve en kolay bulunan düğme. */
.oy-dugme {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--altin-sonuk);
	background: var(--bordo);
	color: var(--vurgu);
	cursor: pointer;
	transition: background var(--gecis) ease, border-color var(--gecis) ease;
}
.oy-dugme:hover { background: #7d1826; border-color: var(--altin); }
.oy-kucuk {
	width: 2.3rem;
	height: 2.3rem;
	background: transparent;
	color: var(--altin);
	border-color: var(--cizgi);
}
.oy-kucuk:hover { background: rgba(201, 162, 39, .14); border-color: var(--altin); }
.oy-kapat {
	width: 3rem;
	height: 3rem;
	background: var(--bordo);
	color: var(--krem);
	border-color: var(--altin-sonuk);
}
.oy-kapat:hover {
	background: #7d1826;
	border-color: var(--altin);
	color: var(--krem);
}

/* Duraklamışken oynat üçgeni, çalarken iki çubuk — köşe düğmesiyle aynı dil. */
.oy-cal-ikon {
	width: 0;
	height: 0;
	border-top: .5rem solid transparent;
	border-bottom: .5rem solid transparent;
	border-left: .8rem solid currentColor;
	margin-left: .18rem;
}
.oynatici.caliyor .oy-cal-ikon {
	width: .78rem;
	height: .92rem;
	border: 0;
	margin-left: 0;
	background: linear-gradient(
		to right,
		currentColor 0 .26rem,
		transparent .26rem .52rem,
		currentColor .52rem 100%
	);
}

.oy-orta { flex: 1; min-width: 0; }
.oy-ust {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-top: .35rem;
}
.oy-ad {
	font-family: var(--serif);
	font-size: var(--oy-ad-punto);
	color: var(--krem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.oy-sure {
	flex: 0 0 auto;
	font-family: var(--sans);
	font-size: .8rem;
	color: var(--krem-sonuk);
	font-variant-numeric: tabular-nums;
}

/* İlerleme çubuğu — tarayıcıların kendi görünümü yerine sitenin dili. */
.oy-ilerleme {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 1.1rem;
	margin: 0;
	background: transparent;
	cursor: pointer;
}
.oy-ilerleme::-webkit-slider-runnable-track {
	height: .32rem;
	border-radius: 999px;
	background: rgba(201, 162, 39, .22);
}
.oy-ilerleme::-moz-range-track {
	height: .32rem;
	border-radius: 999px;
	background: rgba(201, 162, 39, .22);
}
.oy-ilerleme::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: .95rem;
	height: .95rem;
	margin-top: -.32rem;
	border: 0;
	border-radius: 50%;
	background: var(--altin);
}
.oy-ilerleme::-moz-range-thumb {
	width: .95rem;
	height: .95rem;
	border: 0;
	border-radius: 50%;
	background: var(--altin);
}

.oy-yan { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }

/* Listede tek başına duran bir kayıtta ileri/geri anlamsız.
   Özelleştir'den kapatılınca da basılmaz. */
.oynatici.tek-parca .oy-onceki,
.oynatici.tek-parca .oy-sonraki,
.oynatici.oy-atsiz .oy-onceki,
.oynatici.oy-atsiz .oy-sonraki { display: none; }

/* Yazısız şerit: yalnızca düğmeler ve ilerleme çubuğu.
   display:none değil — ad ve süre kaynakta kalıyor, çünkü oynatıcı kaldığı
   yeri hatırlarken kaydın adını o kutudan okuyor (js/oynatici.js — sakla)
   ve ekran okuyucular da oradan öğreniyor.
   Ayar: Görünüm > Özelleştir > Erenler Yolu teması > Ses oynatıcı */
.oynatici.oy-yazisiz .oy-ust {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Şerit sayfanın sonunu örtmesin. Sınıfı JavaScript koyuyor; :has() ile de
   yazılabilirdi ama eski tarayıcılarda sessizce çalışmazdı. */
body.oynatici-acik .site-ayagi { padding-bottom: 5.5rem; }

@media (max-width: 700px) {
	.oynatici-ic { gap: .6rem; }
	.oy-dugme { width: 2.6rem; height: 2.6rem; }
	.oy-kucuk { width: 2.1rem; height: 2.1rem; }
	.oy-kapat { width: 2.6rem; height: 2.6rem; }
	/* Dar ekranda çal, ad, çubuk ve kapat kalır. */
	.oy-ad { font-size: var(--oy-ad-punto); }
}

/* ==========================================================================
   10c. Ses düğmesinin görünümü

   Konumu yukarıda, afiş bölümünde tanımlı (sol üst köşe).
   ========================================================================== */
/* Çap, afişteki kitap/WhatsApp daireleriyle aynı (mobilde onlar da
   .5rem dolgulu 17px simge + 2px kenar ≈ 2.4rem). */
.kose-ses-dugme {
	width: calc(2.3rem - 1px);
	height: calc(2.3rem - 1px);
	padding: 0;
	margin: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 2px solid #0C0605;
	background: var(--kose-cicek-zemin);
	color: var(--altin);
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
	line-height: 1;
	transition: border-color var(--gecis) ease, background var(--gecis) ease, transform var(--gecis) ease;
}
.kose-ses-dugme:hover {
	border-color: var(--altin);
	background: color-mix(in srgb, var(--kose-cicek-zemin) 86%, #fff);
	transform: translateY(-2px);
}

/* Köşe simgesi: gorseller/kose-ses.svg. Renk Özelleştir'den. */
.kose-ses-ikon {
	display: block;
	width: 16px;
	height: 16px;
	overflow: visible;
	fill: var(--kose-cicek);
}
.kose-ses-ikon path {
	fill: var(--kose-cicek);
}

@media (max-width: 700px) {
	.kose-ses-dugme {
		width: calc(2.3rem - 1px);
		height: calc(2.3rem - 1px);
	}
	.kose-ses-ikon {
		width: 15px;
		height: 15px;
	}
}

/* ==========================================================================
   11. Dar ekran
   ========================================================================== */
@media (max-width: 782px) {
	/* Sohbette paylaş çizgisi ile manzara yapışık dursun; ana sayfadaki
	   şerit üst boşluğuna dokunulmuyor. */
	.paylas { margin-bottom: .35rem; }
	body:has(.paylas) .manzara-serit { margin-top: 0; }

	.menu-kabuk { flex-wrap: nowrap; }
	.menu-serit .menu {
		display: flex;
		flex: 1 1 auto;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		justify-content: safe center;
		gap: var(--menu-bosluk-mobil);
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: 0;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.menu-serit .menu::-webkit-scrollbar { display: none; }
	.menu-serit .menu > li { width: auto; flex: 0 0 auto; }
	.menu-serit .menu a {
		font-size: var(--menu-punto-mobil);
		font-weight: var(--menu-kalinlik-mobil);
		letter-spacing: var(--menu-harf-mobil);
		padding: var(--menu-dolgu-mobil) .45rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	.kart:hover { transform: none; }
	/* Geçiş kapalıyken kaydırma yapılmasın; sohbetler yerinde değişsin.
	   Dönmenin kendisi sürüyor — kayan alan süs değil, içeriğin sunuluş
	   biçimi (bkz. js/tema.js). */
	.donen-oge { transform: none; }
}

/* Yazdırma */
/* ==========================================================================
   12. Kitap okuyucu

   Sayfa görselleri uploads klasöründe numaralı duruyor; buradaki kurallar
   yalnızca onların dizilişiyle ilgileniyor.
   Ayar: Özelleştir > Erenler Yolu teması > Kitap okuyucu
   ========================================================================== */
.kitap-sayfasi { padding-block: var(--bosluk); }

.kitap {
	margin-top: 1.5rem;
	background: var(--kitap-zemin);
	border-block: 1px solid var(--kitap-kenar);
	padding-block: 1.2rem;
}

/* ---- Üstteki çubuk ---- */
.kitap-cubuk {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	flex-wrap: wrap;
	margin-bottom: 1.2rem;
}

.kitap-dugmesi {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 2.4rem;
	padding: 0 .75rem;

	font-family: var(--sans);
	font-size: .85rem;
	font-weight: 700;
	line-height: 1;

	color: var(--krem);
	background: transparent;
	border: var(--kitap-cubuk-kenar, 2px) solid var(--kitap-kenar);
	cursor: pointer;
	transition: background var(--gecis) ease, border-color var(--gecis) ease, color var(--gecis) ease;
}
.kitap-dugmesi:hover:not(:disabled) { background: var(--bordo); border-color: var(--altin); }
.kitap-dugmesi:disabled { opacity: .3; cursor: default; }
/* hidden özniteliği tarayıcının kendi stilinde display:none; yazar stili
   (inline-flex) onu ezer, düğme gizlendiği hâlde yer kaplardı. */
.kitap-dugmesi[hidden] { display: none !important; }

.kitap-konum {
	display: inline-flex;
	align-items: baseline;
	gap: .3rem;
	font-family: var(--sans);
	font-size: .9rem;
	color: var(--krem-sonuk);
}
.kitap-numara {
	width: 4rem;
	padding: .35rem .4rem;
	text-align: center;
	font-family: var(--sans);
	font-size: .9rem;
	color: var(--krem);
	background: transparent;
	border: var(--kitap-cubuk-kenar, 2px) solid var(--kitap-kenar);
}
.kitap-araclar { display: flex; gap: .5rem; margin-left: .5rem; }

/* ---- "Kaldığınız yere dönün" ----
   Yalnızca uzağa atlandığında beliriyor (bkz. js/kitap.js). Belirdiği an
   göze çarpması gerektiği için öbür düğmelerden ayrı: altın zemin, koyu
   yazı. Ziyaretçi yanlışlıkla sona atladığını çoğu zaman ancak bu
   düğmeyi görünce anlıyor. Üstündeki sayı, dönülecek sayfa. */
.kitap-donus {
	color: var(--kitap-zemin);
	background: var(--altin);
	border-color: var(--altin);
}
.kitap-donus:hover:not(:disabled),
.kitap-donus:focus-visible {
	color: var(--krem);
	background: var(--bordo);
	border-color: var(--altin);
}
.kitap-tam .kitap-cubuk .kitap-donus {
	background: var(--altin);
	color: var(--kitap-zemin);
}
.kitap-tam .kitap-cubuk .kitap-donus:hover:not(:disabled) {
	background: var(--bordo);
	color: var(--krem);
}
.kitap-donus:not([hidden]) {
	animation: kitap-donus-belir 1.4s ease;
}
@keyframes kitap-donus-belir {
	0%, 35% { box-shadow: 0 0 0 3px var(--altin); }
	100% { box-shadow: none; }
}
.kitap-donus-yazi {
	font-family: var(--sans);
	font-size: calc(.82rem * var(--kitap-cubuk, 1));
	font-weight: 700;
	/* Sayı değişirken düğmenin eni oynamasın. */
	font-variant-numeric: tabular-nums;
}

/* ---- Sayfaların durduğu yer ----
   perspective, çevrilen yaprağın düz değil derinlemesine dönmesini
   sağlıyor; onsuz sayfa yalnızca yatay olarak eziliyor. */
.kitap-sahne {
	/* Yanlardaki okların konumu buna göre hesaplanıyor. */
	position: relative;
	perspective: 2400px;
	padding-inline: clamp(.5rem, 3vw, 2rem);
	/* Yayılımın sığacağı yükseklik — kitabın ekranda ne kadar yer
	   kaplayacağını belirleyen ölçü. Özelleştiriciden ayarlanıyor;
	   buradaki değer yalnızca oradan bir şey gelmezse geçerli. */
	--kitap-yukseklik: var(--kitap-boy, min(94vh, 72rem));
}

/*
 * Kutunun ölçüsü oranla kuruluyor, görsellerin kendi boyutuyla değil.
 * Sebebi çevrilen yaprak: o, yayılımın yarısı kadar genişlikte mutlak
 * konumlanıyor. Yayılım görsellerden geniş olsaydı "yarısı" sayfanın
 * kenarına denk gelmez, dönen yaprak sayfadan kayardı.
 * Oranları JavaScript yazıyor (bkz. js/kitap.js), çünkü sayfa ölçüsü
 * kitaba göre değişebiliyor.
 */
.kitap-yayilim {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 0;

	aspect-ratio: var(--kitap-oran-cift, 1.143);
	width: min(100%, calc(var(--kitap-yukseklik) * var(--kitap-oran-cift, 1.143)));
	margin-inline: auto;
	transform-style: preserve-3d;
}
/* Kıvrımlı motor devreye girince düz çizim gizleniyor. Ayrı kural gerekti:
   tarayıcının [hidden] kuralı, yukarıdaki display:flex'i yenemiyor. */
.kitap-yayilim[hidden] { display: none; }

.kitap-yayilim.tekli {
	aspect-ratio: var(--kitap-oran-tek, .571);
	width: min(100%, calc(var(--kitap-yukseklik) * var(--kitap-oran-tek, .571)));
}

.kitap-yaprak { width: 50%; height: 100%; }
.kitap-yayilim.tekli .kitap-yaprak { width: 100%; }
.kitap-yaprak img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	box-shadow: 0 6px 26px rgba(0, 0, 0, .55);
}
/* Cilt payı: iki sayfanın birleştiği yerde ince bir gölge. */
.kitap-yaprak.sol img { box-shadow: inset -14px 0 22px -14px rgba(0, 0, 0, .75), 0 6px 26px rgba(0, 0, 0, .55); }
.kitap-yaprak.sag img { box-shadow: inset 14px 0 22px -14px rgba(0, 0, 0, .75), 0 6px 26px rgba(0, 0, 0, .55); }

/* ---- Yumuşak geçiş ----
   Yaprak çevirmenin olamadığı yerde (dar ekran, yalnız duran kapak,
   uzağa atlama) sayfa aniden değişmesin diye: duran sayfa gidiş yönüne
   hafifçe kayıp sönüyor, yenisi karşı yandan gelip açılıyor.
   Kayma payı küçük tutuldu — kitapta sayfa savrulmaz. */
.kitap-yayilim.cikiyor { animation: ey-sayfa-cik var(--cik, 260ms) cubic-bezier(.4, 0, 1, 1) forwards; }
.kitap-yayilim.giriyor { animation: ey-sayfa-gir var(--gir, 340ms) cubic-bezier(0, 0, .3, 1) both; }

.kitap-yayilim.cikiyor.ileri { --kay: -3.5%; }
.kitap-yayilim.cikiyor.geri  { --kay: 3.5%; }
.kitap-yayilim.giriyor.ileri { --kay: 3.5%; }
.kitap-yayilim.giriyor.geri  { --kay: -3.5%; }

@keyframes ey-sayfa-cik {
	from { opacity: 1; transform: translateX(0) scale(1); }
	to   { opacity: 0; transform: translateX(var(--kay, 0)) scale(.985); }
}
@keyframes ey-sayfa-gir {
	from { opacity: 0; transform: translateX(var(--kay, 0)) scale(.985); }
	to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ---- Çevrilen yaprak ----
   Duran yayılımın üstünde, menteşesinden dönen ayrı bir kutu. İki yüzü
   var; backface-visibility sayesinde yarıyı geçince arka yüz görünüyor. */
.kitap-cevrilen {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	transform-style: preserve-3d;
	/* Başlangıç durumu açıkça yazılı: "none"dan başlayan geçişi bazı
	   tarayıcılar atlayıp doğrudan sona sıçrıyordu.
	   translateZ(2px): duran yayılımla aynı düzlemde kalmasın, kenarları
	   son karede titremesin. */
	transform: translateZ(2px) rotateY(0deg);
	/* Dönen yaprak tıklamayı yutmasın; çevirme zaten kilitli. */
	pointer-events: none;
	will-change: transform;
	z-index: 5;

	/* Yaprak dönerken ne kadar kalkacak — ciltten kopup havalanma hissi. */
	--kitap-kalkis: 26px;
}
.kitap-cevrilen.ileri  { left: 50%; transform-origin: left center; }
.kitap-cevrilen.geri   { left: 0;   transform-origin: right center; }

/*
 * Dönüş geçişle değil kare listesiyle yazılı: ortada yaprağı öne doğru
 * kaldırabilmek için ara durum gerekiyor, geçişte ara durum olmuyor.
 * Yüzlerdeki gölgeler de aynı süreyle sürüldüğü için ışık, dönüşle
 * birebir uyuşuyor.
 */
.kitap-cevrilen.ileri.donuyor {
	animation: ey-yaprak-ileri var(--sure, 700ms) cubic-bezier(.42, .04, .28, 1) forwards;
}
.kitap-cevrilen.geri.donuyor {
	animation: ey-yaprak-geri var(--sure, 700ms) cubic-bezier(.42, .04, .28, 1) forwards;
}
@keyframes ey-yaprak-ileri {
	0%   { transform: translateZ(2px) rotateY(0deg); }
	50%  { transform: translateZ(var(--kitap-kalkis)) rotateY(-90deg); }
	100% { transform: translateZ(2px) rotateY(-180deg); }
}
@keyframes ey-yaprak-geri {
	0%   { transform: translateZ(2px) rotateY(0deg); }
	50%  { transform: translateZ(var(--kitap-kalkis)) rotateY(90deg); }
	100% { transform: translateZ(2px) rotateY(180deg); }
}

.kitap-yuz {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.kitap-yuz.arka { transform: rotateY(180deg); }
.kitap-yuz img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	box-shadow: 0 6px 26px rgba(0, 0, 0, .55);
}

/* ---- Dönen yaprağın ışığı ----
   Kâğıt döndükçe menteşe tarafı ışıktan kaçıyor: ön yüz kalkarken
   koyulaşıyor, arka yüz koyu çıkıp yere inerken açılıyor. Koyuluk
   menteşeden başlıyor, dış kenara doğru dağılıyor. */
.kitap-isik {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}
.kitap-cevrilen.ileri .kitap-yuz.on   .kitap-isik { background: linear-gradient(to left,  rgba(0, 0, 0, .04), rgba(0, 0, 0, .68)); }
.kitap-cevrilen.ileri .kitap-yuz.arka .kitap-isik { background: linear-gradient(to right, rgba(0, 0, 0, .04), rgba(0, 0, 0, .68)); }
.kitap-cevrilen.geri  .kitap-yuz.on   .kitap-isik { background: linear-gradient(to right, rgba(0, 0, 0, .04), rgba(0, 0, 0, .68)); }
.kitap-cevrilen.geri  .kitap-yuz.arka .kitap-isik { background: linear-gradient(to left,  rgba(0, 0, 0, .04), rgba(0, 0, 0, .68)); }

.kitap-cevrilen.donuyor .kitap-yuz.on   .kitap-isik { animation: ey-yuz-on   var(--sure, 700ms) linear forwards; }
.kitap-cevrilen.donuyor .kitap-yuz.arka .kitap-isik { animation: ey-yuz-arka var(--sure, 700ms) linear forwards; }
@keyframes ey-yuz-on   { 0% { opacity: 0; }  100% { opacity: .95; } }
@keyframes ey-yuz-arka { 0% { opacity: 1; }  55% { opacity: .6; }  100% { opacity: 0; } }

/* ---- Kalkan yaprağın açılan sayfaya düşürdüğü gölge ----
   Cilt dibinden başlayıp yaprak kalktıkça çekiliyor. */
.kitap-golge {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	opacity: 0;
	pointer-events: none;
	z-index: 4;
}
.kitap-golge.sag { left: 50%; background: linear-gradient(to right, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 58%); }
.kitap-golge.sol { left: 0;   background: linear-gradient(to left,  rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 58%); }
.kitap-golge.donuyor { animation: ey-yaprak-golge var(--sure, 700ms) ease-out forwards; }
@keyframes ey-yaprak-golge {
	0%   { opacity: 1; }
	55%  { opacity: .4; }
	100% { opacity: 0; }
}

/* ==========================================================================
   12b. Tam ekran okuyucu

   Kitap sayfası açıldığında okuyucu ekranın tamamına yayılıyor: afiş,
   menü ve alt bilgi çekiliyor, geriye yalnızca kitap kalıyor. Siteye
   dönüş sağ üstteki düğmeden.

   Alttaki çubuk ve çıkış düğmesi hâlâ ekranın kenarında yüzüyor ama
   sahne onlara pay bırakıyor: sayfa görsellerinin üstüne binmiyorlar.
   Pay her zaman duruyor; çubuk gizlenince kitap zıplamıyor, kıvrımlı
   okuyucu da kendini baştan kurmak zorunda kalmıyor.

   Sınıf gövdeye değil okuyucunun kendisine konduğu için site içi
   gezinmeden sonra da çalışıyor; yukarıdaki kutulara :has() ile
   ulaşılıyor. :has() tanımayan eski tarayıcılarda sayfa bozulmaz,
   yalnızca tam ekran olmaz.
   ========================================================================== */
body:has(.kitap-tam) .afis,
body:has(.kitap-tam) .menu-serit,
body:has(.kitap-tam) .ayak,
body:has(.kitap-tam) .ayak-son,
body:has(.kitap-tam) .manzara-serit { display: none; }

body:has(.kitap-tam) .kitap-sayfasi { padding-block: 0; }

.kitap-tam {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100dvh;
	margin-top: 0;
	padding-block: 0;
	border-block: 0;
	overflow: hidden;
}

/* Sahne bütün alanı alıyor. min-height:0 olmadan flex çocuğu
   içeriğinden küçülemiyor ve kitap alttan taşıyor. */
.kitap-tam .kitap-sahne {
	flex: 1;
	min-height: 0;
	display: grid;
	place-items: center;
	/* Üstte çıkış, altta çubuk — sayfa bu payın içinde kalıyor. */
	padding-top: calc(var(--cik-yuk, 3.2rem) + .35rem);
	padding-bottom: calc(var(--cubuk-yuk, 3.2rem) + .2rem);
	padding-inline: .4rem;
}

/* Kitabın boyu burada yazılı değil: tam ekranda sahnenin gerçek
   yüksekliğini JavaScript ölçüp --kitap-yukseklik değişkenine yazıyor
   (bkz. js/kitap.js). Yüzdeyle uğraşmak yerine ölçmek, hem düz hem
   kıvrımlı okuyucunun aynı sayıyı kullanmasını sağlıyor. */
/* Kitap hiçbir durumda sahnenin dışına taşmasın. Taşarsa yana kayıp
   kırpılıyor; hesap bir piksel şaşsa bile burada yakalanıyor. */
.kitap-tam .kitap-sahne > * { max-width: 100%; }
.kitap-tam .kitap-sahne { overflow: hidden; }
.kitap-tam .kitap-kivrim-alan { margin-inline: auto; }

/* ---- Sağ üstteki çıkış: sahnenin üst payında duruyor ---- */
.kitap-tam .kitap-cik {
	position: absolute;
	z-index: 6;
	transition: opacity var(--gecis) ease, transform var(--gecis) ease;
}

/* ---- Alttaki çubuk ----
   Ekranın en altında yüzüyor; sahnenin alt payı onu sayfanın dışında
   tutuyor. Birkaç saniye sonra kendiliğinden çekiliyor (bkz. .sakli);
   geri gelmesi için ekrana dokunmak ya da fareyi kımıldatmak yetiyor.

   Çubuğun kendi zemini yok. Görünen şey yalnızca düğmeler — her biri
   kendi koyu kutusunu taşıyor, yoksa açık renkli sayfanın üstünde krem
   yazı kaybolur. İki uçtaki oklar margin ile kenara itiliyor; aradaki
   boşlukta kitabın kendisi duruyor, şerit yok.

   Düğmeler çubuğun İÇİNDE, akışın içinde kalıyor: dışarı taşıma
   denendi, olmuyor. Çubuğun transform'u onu konumlandırılmış çocukları
   için çıpa hâline getiriyor. */
.kitap-tam .kitap-cubuk {
	position: absolute;
	z-index: 7;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	max-width: none;
	margin: 0;
	display: flex;
	align-items: center;
	/* Sarmıyor: sarınca çubuk iki katına çıkıp kitabı eziyordu. Dar bir
	   ekrana sığmazsa yana kayıyor. "safe center" ortalamayı taşma
	   anında bırakıyor, yoksa baştaki düğme görünmez oluyor. */
	flex-wrap: nowrap;
	overflow-x: auto;
	justify-content: center;
	justify-content: safe center;
	scrollbar-width: none;
	gap: calc(.4rem * var(--kitap-cubuk, 1));
	padding: calc(.5rem * var(--kitap-cubuk, 1)) clamp(.5rem, 2vw, 1.4rem);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: opacity var(--gecis) ease, transform var(--gecis) ease;
}
.kitap-tam .kitap-cubuk::-webkit-scrollbar { display: none; }

/* İleri/geri çubuğun iki ucunda; aradaki her şey ortada kalıyor.
   Otomatik pay, sabit bir konumdan daha sağlam: düğme sayısı değişse
   de uçlarda kalıyorlar. */
.kitap-tam .kitap-onceki  { margin-right: auto; }
.kitap-tam .kitap-sonraki { margin-left: auto; }
.kitap-tam .kitap-cubuk .kitap-dugmesi {
	height: calc(2.1rem * var(--kitap-cubuk, 1));
	min-height: calc(2.1rem * var(--kitap-cubuk, 1));
	padding: 0 calc(.7rem * var(--kitap-cubuk, 1));
	font-size: calc(.82rem * var(--kitap-cubuk, 1));
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	border: var(--kitap-cubuk-kenar, 2px) solid var(--kitap-kenar);
}
.kitap-tam .kitap-cubuk .kitap-dugmesi svg {
	width: calc(18px * var(--kitap-cubuk, 1));
	height: calc(18px * var(--kitap-cubuk, 1));
}
.kitap-tam .kitap-cubuk .kitap-dugmesi:hover:not(:disabled) {
	background: var(--bordo);
}
/* Sayfa numarası. Bandın kendi zemini olmadığı ve altında kitabın açık
   renkli sayfası geçtiği için kutu koyu zeminde duruyor; yoksa krem
   yazı sayfanın üstünde kayboluyor. */
.kitap-tam .kitap-konum {
	align-items: center;
	height: calc(2.1rem * var(--kitap-cubuk, 1));
	min-height: calc(2.1rem * var(--kitap-cubuk, 1));
	padding: 0 calc(.45rem * var(--kitap-cubuk, 1));
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	border: var(--kitap-cubuk-kenar, 2px) solid var(--kitap-kenar);
}
.kitap-tam .kitap-numara {
	width: calc(2.6rem * var(--kitap-cubuk, 1));
	height: 100%;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--krem);
	background: transparent;
	font-size: calc(.82rem * var(--kitap-cubuk, 1));
	line-height: 1;
	-moz-appearance: textfield;
	appearance: textfield;
}
.kitap-tam .kitap-numara::-webkit-outer-spin-button,
.kitap-tam .kitap-numara::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.kitap-tam .kitap-araclar { margin-left: .2rem; gap: calc(.3rem * var(--kitap-cubuk, 1)); }


/* ---- Sayfa çevirme okları ----
   Çubuğun ilk ve son çocuğu; konumlandırılmış değiller, sıradan esnek
   öğeler. Her ekranda bandın iki ucuna itiliyorlar — aynı kaynak, aynı
   sıra. */
.kitap-onceki,
.kitap-sonraki {
	flex: 0 0 auto;
	width: 2.6rem;
	height: 2.6rem;
	min-height: 0;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
	transition: opacity var(--gecis) ease, background var(--gecis) ease,
		border-color var(--gecis) ease, color var(--gecis) ease;
}
.kitap-tam .kitap-onceki,
.kitap-tam .kitap-sonraki {
	width: calc(2.6rem * var(--kitap-cubuk, 1));
	height: calc(2.6rem * var(--kitap-cubuk, 1));
}
/* Kitabın başında ve sonunda ilgili ok tamamen çekiliyor; sayfanın
   üstünde işlevsiz bir düğme durmasın. */
.kitap-onceki:disabled,
.kitap-sonraki:disabled { opacity: 0; pointer-events: none; }

/* ---- Sağ üstteki çıkış ---- */
.kitap-tam .kitap-cik {
	top: clamp(.4rem, 1.5vw, .9rem);
	right: clamp(.3rem, 1.5vw, 1rem);
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 2.1rem;
	width: 2.1rem;
	padding: 0;
	justify-content: center;
	color: var(--krem);
	border: var(--kitap-cubuk-kenar, 2px) solid var(--kitap-kenar);
	border-radius: 50%;
	background: color-mix(in srgb, var(--kitap-zemin) 86%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.kitap-tam .kitap-cik svg {
	width: 14px;
	height: 14px;
}
.kitap-tam .kitap-cik .kitap-yazi {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.kitap-tam .kitap-cik:hover,
.kitap-tam .kitap-cik:focus-visible {
	color: var(--krem);
	background: var(--bordo);
	border-color: var(--altin);
}

/* ---- Takım çekildiğinde ----
   Çubuk, oklar ve çıkış düğmesi birkaç saniye hareketsizlikten sonra
   çekiliyor. Görünmezken tıklamayı da yutmuyorlar. */
.kitap-tam.sakli .kitap-cik {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-140%);
}
.kitap-tam.sakli .kitap-cubuk {
	opacity: 0;
	pointer-events: none;
	transform: translateY(100%);
}

/* ---- Arama ve ızgara ----
   Tam ekranda akışta yer kaplayamazlar; kitabın üstüne panel olarak
   açılıp çubuğun hemen üstünde bitiyorlar. */
.kitap-tam .kitap-arama,
.kitap-tam .kitap-izgara {
	position: absolute;
	left: 0;
	right: 0;
	/* Çubuğun hemen üstünde bitiyor; ölçüsünü JavaScript yazıyor. */
	bottom: var(--cubuk-yuk, 3rem);
	z-index: 8;
	max-height: min(70%, 34rem);
	margin: 0;
	padding: 1rem clamp(.6rem, 3vw, 2rem);
	overflow-y: auto;
	background: var(--kitap-zemin);
	border-block: 1px solid var(--kitap-kenar);
	box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
}

@media (min-width: 641px) {
	.kitap-tam .kitap-cubuk {
		gap: calc(.45rem * var(--kitap-cubuk, 1));
		padding: calc(.5rem * var(--kitap-cubuk, 1)) clamp(.6rem, 2.5vw, 1.6rem);
	}
}

@media (max-width: 640px) {
	/* Telefonda çubuk daralıyor. Düzen aynı — oklar yine iki uçta,
	   araçlar ortada — yalnız ölçüler kısılıyor: "Ara" ve "Sayfalar"
	   yazılarıyla birlikte hiçbir dar ekrana sığmıyorlardı. */
	.kitap-tam .kitap-cubuk {
		gap: calc(.2rem * var(--kitap-cubuk, 1));
		padding: calc(.3rem * var(--kitap-cubuk, 1)) .35rem;
	}

	/* Yazılar gizleniyor ama SİLİNMİYOR. Bu düğmelerin adı yazının
	   kendisinden geliyor; display:none olsaydı ekran okuyucu onları
	   adsız düğme diye okurdu. Görünmez ama okunur duruyorlar. */
	.kitap-tam .kitap-cubuk .kitap-yazi {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* Parmakla ıskalanmasın diye 1.85rem taban: ayar küçülse bile
	   telefonda düğme o ölçünün altına inmiyor. */
	.kitap-tam .kitap-cubuk .kitap-dugmesi {
		height: max(1.85rem, calc(2rem * var(--kitap-cubuk, 1)));
		min-height: max(1.85rem, calc(2rem * var(--kitap-cubuk, 1)));
		padding: 0 calc(.4rem * var(--kitap-cubuk, 1));
		gap: 0;
	}
	.kitap-tam .kitap-cubuk .kitap-dugmesi svg {
		width: max(15px, calc(16px * var(--kitap-cubuk, 1)));
		height: max(15px, calc(16px * var(--kitap-cubuk, 1)));
	}

	.kitap-tam .kitap-onceki,
	.kitap-tam .kitap-sonraki {
		width: max(1.85rem, calc(2.2rem * var(--kitap-cubuk, 1)));
		height: max(1.85rem, calc(2.2rem * var(--kitap-cubuk, 1)));
	}

	.kitap-tam .kitap-araclar { gap: calc(.15rem * var(--kitap-cubuk, 1)); margin-left: .15rem; }

	.kitap-tam .kitap-konum {
		height: max(1.85rem, calc(2rem * var(--kitap-cubuk, 1)));
		min-height: max(1.85rem, calc(2rem * var(--kitap-cubuk, 1)));
		padding: 0 calc(.3rem * var(--kitap-cubuk, 1));
	}
	.kitap-tam .kitap-numara {
		width: max(2.2rem, calc(2.2rem * var(--kitap-cubuk, 1)));
		font-size: calc(.8rem * var(--kitap-cubuk, 1));
	}

	/* Dar ekranda çıkış düğmesi yalnızca çarpı işareti. */
	.kitap-tam .kitap-cik { padding: 0; width: 2.1rem; min-height: 2.1rem; justify-content: center; border-radius: 50%; }
}

/* ---- Kıvrımlı çevirme ----
   Sayfayı kıvırarak çeviren kütüphane (StPageFlip, MIT) buraya kuruluyor;
   bkz. js/vendor/README.md. Dıştaki alanın genişliğini JavaScript veriyor,
   içerisi kütüphanenin elinde. */
.kitap-kivrim-alan {
	margin-inline: auto;
	max-width: 100%;
}
.kitap-kivrim-sayfa {
	overflow: hidden;
	background: #F3EADB;   /* görsel inene kadar kâğıt boşluğu */
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.kitap-kivrim-sayfa img {
	display: block;
	width: 100%;
	height: 100%;
	/* Kutu zaten sayfanın oranında; "fill" ile kenarda pay kalmıyor. */
	object-fit: fill;
	user-select: none;
	-webkit-user-drag: none;
}

/*
 * Kütüphanenin kendi taban biçimleri. Ayrı bir stil dosyası indirilmesin
 * diye buraya kopyalandı; elle değiştirilmedi. Tek fark: kaynağındaki
 * ".sft__wrapper" yazım hatası burada doğru yazılı.
 */
.stf__parent {
	position: relative;
	display: block;
	box-sizing: border-box;
	transform: translateZ(0);
	-ms-touch-action: pan-y;
	touch-action: pan-y;
}
.stf__wrapper {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}
.stf__parent canvas { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.stf__block {
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	perspective: 2000px;
}
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow,
.stf__innerShadow,
.stf__hardShadow,
.stf__hardInnerShadow { position: absolute; left: 0; top: 0; }

/* ---- Arama ---- */
.kitap-arama { margin-bottom: 1.2rem; }
.kitap-arama-kutu {
	width: 100%;
	max-width: var(--yazi-olcu);
	margin-inline: auto;
	display: block;
	padding: .7rem 1rem;
	font-family: var(--sans);
	font-size: 1rem;
	color: var(--krem);
	background: var(--zemin);
	border: var(--kitap-cubuk-kenar, 2px) solid var(--kitap-kenar);
}
.kitap-arama-durum {
	max-width: var(--yazi-olcu);
	margin: .6rem auto 0;
	font-family: var(--sans);
	font-size: .85rem;
	color: var(--krem-sonuk);
}
.kitap-sonuclar {
	max-width: var(--yazi-olcu);
	margin: .4rem auto 0;
	padding: 0;
	list-style: none;
	max-height: 18rem;
	overflow-y: auto;
}
.kitap-sonuc {
	display: block;
	width: 100%;
	text-align: start;
	padding: .6rem .8rem;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--cizgi);
	color: var(--krem-sonuk);
	font-family: var(--sans);
	font-size: .88rem;
	line-height: 1.5;
	cursor: pointer;
}
.kitap-sonuc:hover { background: var(--yuzey-ust); color: var(--krem); }
.kitap-sonuc-no {
	display: block;
	font-weight: 700;
	color: var(--altin);
	margin-bottom: .15rem;
}

/* ---- Sayfa ızgarası ---- */
.kitap-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: .7rem;
	margin-top: 1.2rem;
	max-height: 26rem;
	overflow-y: auto;
}

/*
 * Kapalıyken gerçekten kapalı olsunlar.
 *
 * Tarayıcının kendi "hidden" kuralı, buradaki display: grid'i yenemiyor;
 * ayrıca yazmak gerekiyor. Panellerin zemini ve çerçevesi olduğu için
 * boş hâlleri kitabın üstünde koyu bir şerit olarak duruyordu.
 */
.kitap-izgara[hidden],
.kitap-arama[hidden] { display: none; }
.kitap-kucuk {
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
	font-family: var(--sans);
	font-size: .72rem;
	color: var(--krem-sonuk);
}
.kitap-kucuk:hover { border-color: var(--altin); color: var(--krem); }
.kitap-kucuk img { width: 100%; height: auto; }

/* ---- JavaScript kapalıyken ---- */
.kitap-duz { display: grid; gap: 1.5rem; justify-items: center; }
.kitap-duz img { max-width: min(100%, 34rem); }

/* Tam ekranda okuyucu sayfanın tamamını kaplasın. */
.kitap:fullscreen {
	background: var(--kitap-zemin);
	padding: 1.5rem 0;
	overflow-y: auto;
}

@media (max-width: 860px) {
	.kitap-yaprak { max-width: min(100%, 26rem); }
	.kitap-araclar { margin-left: 0; }
	/* Yalnızca okuyucunun çubuk yazıları: afişteki kitap düğmesinin
	   yazısı 700px'e kadar kendi kuralıyla duruyor (yukarıdaki
	   .kitap-dugme bloğu); kapsanmasa 701-860px arasında da düşüyordu. */
	.kitap .kitap-yazi { display: none; }
}

@media print {
	.menu-serit, .afis, .ayak, .ayak-son, .kose-ses, .paylas, .kitap-dugme, .wa-dugme, .posta-dugme, .sohbet-ust, .sohbet-cik-satir, .manzara-serit { display: none; }
	body { background: #fff; color: #000; }
	.govde, .yazi-basi h1 { color: #000; max-width: none; }
}