/* ==========================================================================
   KUME PANELS — tam ekran bolumler
   Her kaydirmada bir bolum: giris / kutucuklar / kolaj / ayrilmis alan.
   kume.css'ten SONRA yuklenir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Snap kaydirma
   JS uygun kosullarda <html> uzerine .kume-snap ekler.
   -------------------------------------------------------------------------- */

html.kume-snap {
	scroll-snap-type: y mandatory;
}

html.kume-snap .kume-panel,
html.kume-snap #footer {
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* --------------------------------------------------------------------------
   2. Panelin kendisi
   -------------------------------------------------------------------------- */

.kume-panel {
	position: relative;
	/* svh'yi bilmeyen tarayicilar icin once vh */
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	margin: 0 !important;
	padding: clamp(96px, 12vh, 150px) clamp(24px, 7vw, 120px);
	box-sizing: border-box;
}

/* Blocksy icerik genisligini kirp — paneller tam kanamali olmali.
   (Blok editorunde "Tam genislik" secersen bu zaten gerekmez, yedek kural.) */
.entry-content > .kume-panel {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Icerik, arkadaki dev soluk kelimenin ustunde kalsin.
   DIKKAT: burada `.kume-panel > *` kullanilamaz — kapak blogunun
   `position:absolute` arka plan gorselini de ezer ve kapak akisa girip
   iki katina cikar. Sadece gercek icerik kapsayicilari sayilir. */
.kume-panel__head,
.kume-boxes,
.kume-collage,
.kume-collage__more,
.kume-collage__empty,
.kume-placeholder,
.kume-panel > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* Kahraman paneli: kume.css'teki yerlesim satir yonlu flex'e gore yazilmisti,
   panel onu sutuna cevirdigi icin hizalamayi burada tazeliyoruz. */
.kume-panel--hero.wp-block-cover {
	justify-content: flex-end;
	align-items: stretch;
	/* !important sart: Kapak blogu kendi dolgusunu SATIR ICI stil olarak
	   yaziyor (style="padding-bottom:0"). Satir ici stil normal kurallari
	   ezer; boylece baslik ekranin en dibine yapisiyordu. */
	padding: 0 0 13vh !important;
}

/* Panel zeminleri.
   NOT: `--maroon` sinif adi eski kaldi cunku WordPress'e yapistirilmis
   isaretlemede oyle geciyor; rengi artik aksan. `--accent` ayni isi yapar,
   yeni yapistirmalarda o kullanilabilir. */
.kume-panel--maroon,
.kume-panel--accent { background: var(--kume-accent-surface); color: #fff; }
.kume-panel--maroon h1, .kume-panel--maroon h2, .kume-panel--maroon h3,
.kume-panel--accent h1, .kume-panel--accent h2, .kume-panel--accent h3 { color: #fff; }

.kume-panel--paper  { background: var(--kume-bg); color: var(--kume-ink); }

.kume-panel--ink    { background: var(--kume-panel-ink); color: rgba(255, 255, 255, .62); }
.kume-panel--ink h1,
.kume-panel--ink h2,
.kume-panel--ink h3 { color: #fff; }

/* Arkadaki dev soluk kelime KALDIRILDI — Kume'nin imzasiydi.
   Eski isaretlemede hala geciyor olabilir, gizliyoruz. */
.kume-panel__ghost { display: none !important; }

/* --------------------------------------------------------------------------
   KOORDINAT BLOGU
   Ghost kelimenin yerine gecen ozgun imza. Dekoratif doku degil, VERI:
   her bolum bir yere baglanir. Teknik cizimlerin kose antetine benzer —
   ince cizgi, tabular rakam, sessiz ama okunur.
   Harita duzeninde oldugu gibi sol altta durur; olcek cubugu sag altta.
   -------------------------------------------------------------------------- */

/* Sehir koordinatlari KALDIRILDI.
   Mobilde panelin altinda igreti duruyordu ve tasidigi bilgi de yoktu.
   Kural duruyor cunku daha once yapistirilmis ana sayfa icerigi hala bu
   isaretlemeyi tasiyor olabilir; kullanicinin sayfayi yeniden yapistirmasi
   gerekmesin diye kalanlari gizliyoruz. */
.kume-panel__coord,
.kume-coord__place { display: none !important; }


/* Panel basligi: kucuk etiket + buyuk kelime */
.kume-panel__head {
	margin: 0 auto clamp(34px, 5vh, 66px);
	max-width: var(--kume-max);
	width: 100%;
}
.kume-panel__eyebrow {
	margin: 0 0 14px;
	font-size: 11px;
	letter-spacing: var(--kume-track-wide);
	text-transform: uppercase;
	opacity: .62;
}
.kume-panel__title {
	margin: 0;
	font-size: clamp(1.9rem, 4.6vw, 4rem);
	font-weight: 200;
	line-height: 1.1;
	letter-spacing: var(--kume-track);
	text-transform: uppercase;
}
/* Panel basliginda bordo cizgi istemiyoruz — zaten kendi ritmi var */
.kume-panel__title::before { display: none !important; }

/* --------------------------------------------------------------------------
   3. Panel 2 — kutucuklar
   -------------------------------------------------------------------------- */

.kume-boxes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Ayraclar 1px gap + arkadan sizan zemin ile yapiliyordu; 3 sutunda
	   alt piksel yuvarlamasi yuzunden cizgilerden biri kayboluyordu.
	   Kenarlik kullanmak her sutunda ayni cizgiyi garanti eder. */
	gap: 0;
	width: 100%;
	max-width: var(--kume-max);
	margin-inline: auto;
}
.kume-box + .kume-box { border-left: 1px solid rgba(255, 255, 255, .26); }

.kume-box {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: clamp(260px, 34vh, 380px);
	padding: clamp(26px, 3.2vw, 48px);
	/* Panelden belirgin ayrilsin diye daha koyu */
	background: var(--kume-accent-deep);
	color: #fff;
	text-decoration: none;
	transition: background-color .36s var(--kume-ease);
}
.kume-box:hover,
.kume-box:focus-visible { filter: brightness(.86); }

.kume-box__no {
	font-size: 11px;
	letter-spacing: var(--kume-track-wide);
	opacity: .72;
}
.kume-box__title {
	margin: 0;
	font-size: clamp(1.15rem, 1.9vw, 1.75rem);
	font-weight: 200;
	letter-spacing: var(--kume-track);
	text-transform: uppercase;
	color: #fff;
}
.kume-box__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.8;
	color: rgba(255, 255, 255, .9);
}
.kume-box__go {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 11px;
	letter-spacing: var(--kume-track);
	text-transform: uppercase;
}
.kume-box__go::after {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	transition: width .3s var(--kume-ease);
}
.kume-box:hover .kume-box__go::after { width: 52px; }

/* Kutu bir <a> olabilir, ya da icinde link tasiyan bir <div>. Ikisi de calisir. */
.kume-box a { color: inherit; text-decoration: none; }
.kume-box:has(a:hover) { filter: brightness(.86); }
.kume-box:has(a:hover) .kume-box__go::after { width: 52px; }

/* Panel icindeki baglantilar govde link stilini almasin */
.kume-panel a { background-image: none !important; }

/* --------------------------------------------------------------------------
   4. Panel 3 — kolaj
   -------------------------------------------------------------------------- */

.kume-collage {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(0, 1fr);
	gap: 2px;
	width: 100%;
	max-width: var(--kume-max);
	margin-inline: auto;

	/* Panelin kalan bosluguna otur — boylece bolum hicbir ekranda tasmaz
	   ve snap kaydirma acik kalabilir. */
	flex: 1 1 auto;
	min-height: clamp(280px, 38svh, 420px);
	max-height: 620px;
}

/* Asimetrik yerlesim: ilk parca buyuk */
.kume-collage__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.kume-collage__item:nth-child(4) { grid-column: span 2; }

.kume-collage__item {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	background: var(--kume-placeholder);
	min-height: 0;
}

/* One cikan gorseli olmayan yazi: duz bordo yer tutucu */
.kume-collage__item:not(:has(img)) { background: var(--kume-accent-surface); }
.kume-collage__item:not(:has(img))::after { opacity: .25; }

.kume-collage__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .84s var(--kume-ease);
}
.kume-collage__item:hover img,
.kume-collage__item:focus-visible img { transform: scale(1.07); }

.kume-collage__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(20, 8, 8, .82) 0%,
		rgba(20, 8, 8, .30) 46%,
		rgba(20, 8, 8, 0) 78%);
	transition: opacity .36s var(--kume-ease);
}
.kume-collage__item:hover::after { opacity: .82; }

.kume-collage__body {
	position: absolute;
	z-index: 2;
	left: 0; right: 0; bottom: 0;
	padding: clamp(16px, 1.7vw, 28px);
	display: flex;
	flex-direction: column;
	gap: 9px;
	align-items: flex-start;
	color: #fff;
}
.kume-collage__cat {
	font-size: 9.5px;
	letter-spacing: var(--kume-track);
	text-transform: uppercase;
	background: var(--kume-accent-surface);
	padding: 4px 9px;
}
.kume-collage__title {
	margin: 0;
	font-size: clamp(13px, 1.05vw, 16px);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .01em;
	color: #fff;
	text-transform: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kume-collage__item:nth-child(1) .kume-collage__title {
	font-size: clamp(16px, 1.6vw, 24px);
	font-weight: 300;
	-webkit-line-clamp: 4;
}
.kume-collage__date {
	font-size: 11px;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .66);
}

.kume-collage__more {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: clamp(24px, 3.4vh, 42px) auto 0;
	font-size: 11px;
	letter-spacing: var(--kume-track);
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;
}
.kume-collage__more::after {
	content: "";
	width: 34px;
	height: 1px;
	background: currentColor;
	transition: width .3s var(--kume-ease);
}
.kume-collage__more:hover::after { width: 62px; }

.kume-collage__empty {
	margin: 0;
	text-align: center;
	opacity: .6;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   5. Panel 4 — simdilik ayrilmis alan
   -------------------------------------------------------------------------- */

.kume-placeholder {
	width: 100%;
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(40px, 7vh, 90px) clamp(28px, 5vw, 70px);
	border: 1px dashed rgba(255, 255, 255, .22);
	text-align: center;
}
/* Gomulu icerik (qgis2web haritasi gibi) panelin kalan bosluguna otursun */
.kume-embed {
	display: block;
	width: 100%;
	max-width: var(--kume-max);
	margin-inline: auto;
	border: 0;
	flex: 1 1 auto;
	min-height: clamp(280px, 40svh, 460px);
	max-height: 660px;
	background: #111;
}

.kume-placeholder p {
	margin: 0;
	font-size: 12px;
	letter-spacing: var(--kume-track);
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

/* --------------------------------------------------------------------------
   6. OLCEK CUBUGU
   Nokta navigasyonunun ve "SCROLL" yazisinin yerine gecti. Haritanin olcek
   cubugu gibi gorunur: cerceveli, bolmeli, soldan dolan. Bolme sayisi panel
   sayisi kadardir; dolan kisim sayfadaki ilerlemedir. Ayni zamanda
   navigasyondur — bolmeye tiklayinca o bolume gider.

   mix-blend-mode: difference sayesinde hangi zeminin uzerinde olursa olsun
   okunur kalir; her panel icin ayri renk kurali gerekmez.
   -------------------------------------------------------------------------- */

#kume-scale {
	position: fixed;
	right: clamp(16px, 2.4vw, 38px);
	bottom: clamp(16px, 3vh, 34px);
	z-index: 118;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 7px;
	color: #fff;
	mix-blend-mode: difference;
	opacity: 0;
	transition: opacity .4s var(--kume-ease);
}
#kume-scale.is-visible { opacity: .9; }

.kume-scale__track {
	position: relative;
	display: flex;
	width: clamp(94px, 11vw, 150px);
	height: 9px;
	border: 1px solid currentColor;
}

.kume-scale__track button {
	all: unset;
	flex: 1 1 0;
	height: 100%;
	cursor: pointer;
}
.kume-scale__track button + button { border-left: 1px solid currentColor; }
.kume-scale__track button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* Ilerleme dolgusu — tiklamayi engellemesin */
.kume-scale__fill {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: calc(var(--kume-progress, 0) * 100%);
	background: currentColor;
	pointer-events: none;
	/* Dilim dilim ilerliyor: sure daha uzun ve yumusak, cunku artik
	   surekli degil basamakli bir deger. */
	transition: width .42s var(--kume-ease-soft, cubic-bezier(.22,1,.36,1));
}

.kume-scale__meta {
	display: flex;
	gap: 5px;
	font-size: 9.5px;
	letter-spacing: var(--kume-track);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
	#kume-scale { display: none; }
}

/* --------------------------------------------------------------------------
   7. Mobil / kisa ekran
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.kume-boxes { grid-template-columns: 1fr; }
	.kume-box { min-height: 0; gap: 12px; }

	.kume-collage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		height: clamp(380px, 62svh, 620px);
	}
	.kume-collage__item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
	.kume-collage__item:nth-child(4) { grid-column: span 1; }
	.kume-collage__item:nth-child(n + 6) { display: none; }

}

/* Panel icerigi sigmiyorsa panel uzasin, kirpilmasin */
@media (max-height: 620px) {
	.kume-panel { min-height: 0; padding-block: clamp(70px, 14vh, 110px); }
	html.kume-snap { scroll-snap-type: none; }
}

/* --------------------------------------------------------------------------
   8. Hareket azaltma
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html.kume-snap { scroll-snap-type: none; }
	.kume-collage__item img,
	.kume-box__go::after,
	.kume-collage__more::after { transition: none; }
}

/* ==========================================================================
   HARITA PANELI (4. bolum)
   Panel tam ekran ve kaydirma durakli; harita basligin altinda KALAN
   yuksekligi doldurmali, sabit bir yukseklik verilirse ya tasar ya bosluk
   birakir.
   ========================================================================== */

.kume-panel--harita {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 2.4vh, 26px);
}

.kume-panel--harita .kume-panel__head { flex: none; }

/* SECICI NEDEN IKI SINIFLI:
   pages.css, panels.css'ten SONRA yukleniyor. Oradaki ".kume-harita__cerceve"
   kurali (height:68vh; min-height:320px) tek sinifli bir panel kuralini ezip
   cerceveyi esnemez yapiyordu; panel ekrandan tasiyor ve panels.js butun
   sayfanin snap kaydirmasini kapatiyordu. */
.kume-panel--harita .kume-harita__cerceve {
	flex: 1 1 auto;
	min-height: 0;          /* flex ogesi kucultulebilsin */
	height: auto;
	position: relative;
}
.kume-panel--harita .kume-harita__cerceve iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: transparent;
}

.kume-panel__harita-not {
	flex: none;
	margin: 0;
	font-size: 11px;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .55);
}

@media (max-width: 640px) {
	.kume-panel--harita { gap: 12px; }
}