/*
 * Simbat Project Engine — Frontend (Bina Görünümü / Blok ve Kat listeleri).
 * Renk paleti ve font, proje dokümanındaki V1 tasarım kararlarına göre sabittir.
 */

:root {
	--spe-bg: #ffffff;
	--spe-text: #1f2937;
	--spe-muted: #6b7280;
	--spe-border: #e5e7eb;
	--spe-satista-bg: #dcfce7;
	--spe-satista-border: #86efac;
	--spe-satista-text: #166534;
	--spe-satista-dot: #22c55e;
	--spe-kapali-bg: #fee2e2;
	--spe-kapali-border: #fca5a5;
	--spe-kapali-text: #991b1b;
	--spe-kapali-dot: #ef4444;
	--spe-rezerve-bg: #f3f4f6;
	--spe-rezerve-border: #d1d5db;
	--spe-rezerve-text: #374151;
	--spe-rezerve-dot: #9ca3af;
	--spe-whatsapp: #25d366;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

body.spe-page {
	background: var( --spe-bg );
	color: var( --spe-text );
	font-family: 'Poppins', sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* --- Hata sayfaları (404 / 500) — bkz. Frontend_Router::render_hata_sayfasi() --- */

.spe-hata-ekrani {
	flex: 1;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	padding: 40px 20px 110px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.spe-hata-baslik {
	font-size: 1.6rem;
	font-weight: 700;
	margin: 0 0 12px;
}

.spe-hata-mesaj {
	color: var( --spe-muted );
	font-size: 0.95rem;
	margin: 0 0 24px;
}

.spe-hero {
	position: relative;
	width: 100%;
	min-height: 260px;
	max-height: 420px;
	overflow: hidden;
	background: #111827;
}

.spe-hero--placeholder {
	background: linear-gradient( 135deg, #1f2937, #374151 );
	min-height: 200px;
}

.spe-hero img {
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
	display: block;
}

.spe-hero-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 20px;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.65 ), rgba( 0, 0, 0, 0 ) );
	color: #ffffff;
}

.spe-hero-title {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 600;
}

.spe-hero-konum {
	margin: 4px 0 0;
	font-size: 0.95rem;
	opacity: 0.9;
}

.spe-sade-baslik-adi {
	margin: 0 0 4px;
	font-size: 1.6rem;
	font-weight: 600;
	color: var( --spe-text );
}

.spe-sade-baslik-konum {
	margin: 0 0 20px;
	font-size: 0.95rem;
	color: var( --spe-muted );
}

/* --- Proje Ana Ekranı: sol dar sütun (proje adı/konum/geri linki) + sağ
   geniş alan (bina görseli SVG veya kat/blok listesi fallback'i) --- */
.spe-proje-ana-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	width: 100%;
}

.spe-proje-ana-sol {
	flex: 0 0 240px;
	max-width: 240px;
}

.spe-proje-ana-sag {
	flex: 1 1 auto;
	min-width: 0;
	/* Mobilde (bkz. aşağıdaki @media 780px) .spe-proje-ana-layout column'a
	   dönüp align-items:stretch alıyor — bu durumda bu eleman bir flex
	   item'ın VARSAYILAN min-height:auto (içeriğe göre) davranışına tabi
	   olur; Safari'de bilinen bir bug, bu varsayılanın flex item içindeki
	   height:auto bir <img>'in (bkz. .spe-proje-bina-gorsel-statik) doğru
	   boyutlandırılmasını engelleyip görselin üstten/alttan kırpılmasına yol
	   açabiliyor. min-height:0 bu kısıtlamayı kaldırır. */
	min-height: 0;
}

/* İleride "Proje Bilgileri", "Konum" gibi sekmeler eklenebilecek boş alan —
   henüz implement edilmedi, sadece yapısal olarak yer ayrılıyor. */
.spe-proje-ana-sekmeler-yer-tutucu {
	margin-top: 24px;
}

@media ( max-width: 780px ) {
	.spe-proje-ana-layout {
		flex-direction: column;
		align-items: stretch;
	}

	.spe-proje-ana-sol {
		flex: none;
		max-width: 100%;
		width: 100%;
	}
}

.spe-content {
	flex: 1;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 28px 20px 110px;
}

.spe-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-bottom: 20px;
	font-size: 0.85rem;
	color: var( --spe-muted );
}

.spe-legend-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 6px;
}

.spe-legend-dot--satista {
	background: var( --spe-satista-dot );
}

.spe-legend-dot--kapali {
	background: var( --spe-kapali-dot );
}

.spe-legend-dot--rezerve {
	background: var( --spe-rezerve-dot );
}

.spe-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 130px, 1fr ) );
	gap: 14px;
}

.spe-item-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 18px 12px;
	border-radius: 12px;
	border: 2px solid var( --spe-border );
	background: #f9fafb;
	color: var( --spe-text );
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.spe-item-btn:hover {
	transform: translateY( -2px );
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.08 );
}

.spe-item-btn--blok {
	background: #f3f4f6;
	border-color: var( --spe-border );
}

.spe-item-btn--satista {
	background: var( --spe-satista-bg );
	border-color: var( --spe-satista-border );
	color: var( --spe-satista-text );
}

.spe-item-btn--kapali {
	background: var( --spe-kapali-bg );
	border-color: var( --spe-kapali-border );
	color: var( --spe-kapali-text );
}

.spe-item-btn--rezerve {
	background: var( --spe-rezerve-bg );
	border-color: var( --spe-rezerve-border );
	color: var( --spe-rezerve-text );
}

.spe-empty {
	color: var( --spe-muted );
	font-size: 0.95rem;
}

/* --- Proje Ana Ekranı: bina görseli SVG ile kat seçimi (bkz.
   Frontend_Router::render_proje_bina_secimi()) — masaüstünde tıklanabilir
   SVG, mobilde AYNI görsel statik bir <img> olarak (dekoratif, tıklanamaz)
   ÜSTTE, altında mevcut fallback listesi (.spe-grid — "tek_bina"da kat
   butonları, "site"de blok kartları, bkz. render_proje_ana_ekrani()'nin
   "site" dalı) gösterilir — Kat Planı sidebar'ındaki "kapak görseli + kat
   listesi" deseniyle aynı. Renk SINIF isimleri (.spe-svg-path--*) Kat Planı
   ile aynıdır, ANCAK bu SVG gerçek bir fotoğraf/render olduğundan Kat
   Planı'ndaki kalıcı dolgu (bkz. .spe-svg-wrap kuralları) burada İSTENMEZ —
   aşağıda, sadece #simbat-pe-proje-bina-svg'ye özel, hover'da çok hafif bir
   dolgu uygulayan override kuralları tanımlanır. */
/* height:XXXpx + object-fit:cover KALDIRILDI (bkz. .spe-proje-kart-gorsel'deki
   AYNI gerekçe) — sabit yükseklik, dikey/uzun bina görsellerini kırpıyordu.
   Artık img'in kendi en-boy oranına göre (width:100%; height:auto;) orantılı
   sığdırılıyor, kutu yüksekliği görsele göre esnek — hiçbir zaman kırpılmıyor. */
.spe-proje-bina-gorsel-statik {
	display: none;
	width: 100%;
	height: auto;
	/* object-fit:contain — gerçek iPhone Safari'de bildirilen bir kırpılma
	   sorununa karşı ek güvenlik: width:100%; height:auto; oranı KORUR ama
	   Safari'nin flex item içinde height:auto <img> boyutlandırmasıyla
	   ilgili bilinen tutarsızlıklarına karşı contain, kırpma OLMADAN
	   sığdırmayı garanti eder (en kötü ihtimalle boşluk kalır, asla kırpma
	   olmaz) — cover'ın aksine. */
	object-fit: contain;
	border-radius: 12px;
	margin: 0 0 16px;
}

.spe-proje-bina-kat-listesi-yedek {
	display: none;
}

/* Fallback butonları (kat veya blok — bkz. yukarısı) — genel
   .spe-grid/.spe-item-btn'e göre belirgin şekilde küçük, kompakt bir
   versiyon: bu liste dar bir sütun/mobil genişlikte, çoğunlukla az sayıda
   öğe için gösterildiğinden varsayılan boyut orantısız büyük duruyordu. */
.spe-proje-bina-kat-listesi-yedek .spe-grid {
	grid-template-columns: repeat( auto-fill, minmax( 60px, 1fr ) );
	gap: 6px;
}

.spe-proje-bina-kat-listesi-yedek .spe-item-btn {
	padding: 6px 4px;
	border-width: 1px;
	border-radius: 6px;
	font-size: 0.7rem;
}

/* !important: hem yukarıdaki paylaşılan .spe-svg-wrap kalıcı-dolgu
   kuralını, hem de gerçek bina görseli SVG'sinin (tasarım aracından dışa
   aktarılırken path'lere gömülmüş olabilecek) inline fill/style
   değerlerini ezmek için gereklidir. opacity:1 ayrıca gereklidir çünkü
   Inkscape'ten dışa aktarılan bazı path'lerde (fill-opacity DEĞİL) genel
   "opacity" özniteliği yanlışlıkla 0'a düşürülmüş olabilir — bu, elementin
   tamamını (fill dahil) görünmez kılar ve fill/fill-opacity kuralları bu
   durumda hiç etkili olmaz. */
#simbat-pe-proje-bina-svg svg .spe-svg-path--satista,
#simbat-pe-proje-bina-svg svg .spe-svg-path--satildi,
#simbat-pe-proje-bina-svg svg .spe-svg-path--kapali {
	fill: transparent !important;
	opacity: 1 !important;
}

#simbat-pe-proje-bina-svg svg .spe-svg-path--satista:hover {
	fill: var( --spe-satista-dot ) !important;
	fill-opacity: 0.62 !important; /* eskiden 0.18 -- çok silik/soluk kalıyordu, daha belirgin bir yeşil tona çıkarıldı. */
	opacity: 1 !important;
}

#simbat-pe-proje-bina-svg svg .spe-svg-path--satildi:hover {
	fill: var( --spe-kapali-dot ) !important;
	fill-opacity: 0.18 !important;
	opacity: 1 !important;
}

#simbat-pe-proje-bina-svg svg .spe-svg-path--kapali:hover {
	fill: var( --spe-rezerve-dot ) !important;
	fill-opacity: 0.18 !important;
	opacity: 1 !important;
}

@media ( max-width: 780px ) {
	.spe-proje-bina-svg-wrap {
		display: none;
	}

	.spe-proje-bina-gorsel-statik {
		display: block;
	}

	.spe-proje-bina-kat-listesi-yedek {
		display: block;
	}
}

.spe-whatsapp-btn,
.spe-dev-logo {
	position: fixed;
	bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.25 );
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	z-index: 50;
}

.spe-whatsapp-btn:hover,
.spe-dev-logo:hover {
	transform: scale( 1.08 );
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.3 );
}

.spe-whatsapp-btn {
	left: 20px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var( --spe-whatsapp );
}

.spe-whatsapp-btn svg {
	width: 28px;
	height: 28px;
	fill: #ffffff;
}

.spe-dev-logo {
	right: 20px;
	width: 130px;
	height: 40px;
	border-radius: 8px;
	background: #ffffff;
	border: 1px solid var( --spe-border );
	padding: 4px 10px;
}

.spe-dev-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

@media ( max-width: 640px ) {
	.spe-hero {
		min-height: 160px;
		max-height: 220px;
	}

	.spe-content {
		padding: 20px 16px 110px;
	}

	.spe-hero-title {
		font-size: 1.3rem;
	}
}

/* --- Kat Planı ekranı --- */

.spe-kat-plani-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 28px 20px 110px;
}

.spe-kat-plani-sidebar {
	flex: 0 0 220px;
	max-width: 220px;
	/* Mobilde (bkz. .spe-kat-plani-layout'un @media 780px override'ı)
	   column'a dönüp align-items:stretch alıyor — bkz. .spe-proje-ana-sag'daki
	   AYNI gerekçe (Safari'nin flex item min-height:auto varsayılanıyla ilgili
	   bilinen davranışı, height:auto bir <img>'in — bkz. .spe-sidebar-gorsel
	   img — kırpılmasına yol açabiliyor). Bu sınıf Kat Planı VE Daire Detay
	   arasında paylaşıldığından (bkz. class-frontend-router.php) düzeltme
	   ikisini de kapsar. */
	min-height: 0;
}

.spe-sidebar-gorsel {
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 16px;
}

/* height:XXXpx + object-fit:cover KALDIRILDI (bkz. .spe-proje-kart-gorsel'deki
   AYNI gerekçe) — sabit yükseklik, dikey/uzun bina görsellerini kırpıyordu.
   Artık img'in kendi en-boy oranına göre (width:100%; height:auto;) orantılı
   sığdırılıyor, kutu yüksekliği görsele göre esnek — hiçbir zaman kırpılmıyor.
   Bu kural Kat Planı VE Daire Detay sidebar'ları arasında paylaşılıyor. */
.spe-sidebar-gorsel img {
	width: 100%;
	height: auto;
	/* object-fit:contain — bkz. .spe-proje-bina-gorsel-statik'teki AYNI
	   gerekçe (gerçek iPhone Safari'de bildirilen kırpılma sorununa karşı
	   ek güvenlik). */
	object-fit: contain;
	display: block;
}

.spe-sidebar-baslik {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 14px;
}

.spe-geri-link {
	display: inline-block;
	margin: 0 0 16px;
	font-size: 0.85rem;
	color: var( --spe-muted );
	text-decoration: none;
}

.spe-geri-link:hover {
	color: var( --spe-text );
	text-decoration: underline;
}

/* Dikey grid yerine yatay, satır satır sarılan (wrap) küçük pill dizisi
   (referans tasarım) — display:grid'i EZER (bkz. paylaşılan .spe-grid). */
.spe-kat-plani-sidebar .spe-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Proje Ana Ekranı'nın mobil fallback kat listesiyle AYNI kompakt boyut
   deseni (bkz. .spe-proje-bina-kat-listesi-yedek .spe-item-btn) — dar
   sidebar'da varsayılan boyut orantısız büyük duruyordu. */
.spe-kat-plani-sidebar .spe-item-btn {
	padding: 6px 8px;
	font-size: 0.7rem;
}

/* Kat Planı sidebar'ında şu an görüntülenen kat — durum renginden (satista/
   satildi/rezerve) BAĞIMSIZ, "buradasınız" göstergesi olarak her zaman
   yeşil/vurgulu görünür. */
.spe-item-btn--aktif {
	background: var( --spe-satista-dot ) !important;
	border-color: var( --spe-satista-dot ) !important;
	color: #ffffff !important;
	font-weight: 700;
}

.spe-kat-plani-main {
	flex: 1 1 auto;
	min-width: 0;
}

/* BÖLÜM C: sağ bilgi paneli — Daire Detay'daki .spe-daire-detay-panel ile
   AYNI genişlik/desen, tutarlı görünüm için. */
.spe-kat-plani-panel {
	flex: 0 0 300px;
	max-width: 300px;
}

/* BÖLÜM C: sağ paneldeki bilgi tablosu — sade, ince çizgiyle ayrılmış
   satırlar (referans tasarım). "Kat Adı" satırı sabit, diğerleri JS ile
   hover'da güncellenir (bkz. assets/js/kat-plani.js). */
.spe-kat-plani-daire-tablo {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.spe-kat-plani-daire-tablo td {
	padding: 8px 0;
	border-bottom: 1px solid var( --spe-border );
}

.spe-kat-plani-daire-tablo td:first-child {
	color: var( --spe-muted );
}

.spe-kat-plani-daire-tablo td:last-child {
	text-align: right;
	font-weight: 600;
	color: var( --spe-text );
}

/* SVG üzerinde hover'da beliren, path'in üstünde sabit konumlanan küçük
   yüzen etiket (bkz. assets/js/kat-plani.js) — "TİP - Satışa Uygun". */
.spe-kat-plani-daire-tooltip {
	position: absolute;
	transform: translate( -50%, calc( -100% - 8px ) );
	background: var( --spe-text );
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 6px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 5;
}

.spe-kat-plani-baslik {
	margin: 0 0 12px;
	font-size: 1.4rem;
	font-weight: 600;
}

.spe-kat-plani-uyari {
	background: var( --spe-kapali-bg );
	color: var( --spe-kapali-text );
	border: 1px solid var( --spe-kapali-border );
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 0.9rem;
	margin: 0 0 16px;
}

.spe-kat-plani-info {
	background: var( --spe-rezerve-bg );
	color: var( --spe-rezerve-text );
	border: 1px solid var( --spe-rezerve-border );
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 0.9rem;
	margin: 0 0 16px;
}

.spe-svg-wrap {
	position: relative;
	width: 100%;
	overflow: auto;
}

/* Kaynak SVG dosyasının kendi boyutu (viewBox/width/height) ne olursa olsun
   sayfayı bozmasın (Proje Ana Ekranı Bina Görseli VE Kat Planı ana SVG'si —
   ikisi de bu sınıfı paylaşır): genişlik zaten responsive (max-width),
   yükseklik için de bir üst sınır eklenir; width/height:auto ile SVG'nin
   kendi en-boy oranı korunarak orantılı küçültülür. */
.spe-svg-wrap svg {
	max-width: 100%;
	max-height: 600px;
	width: auto;
	height: auto;
	display: block;
}

.spe-svg-wrap svg .spe-svg-path {
	cursor: pointer;
	stroke: #6b7280;
	stroke-width: 1;
	transition: fill 0.15s ease, fill-opacity 0.15s ease;
	/* fill:none (veya transparent) olan bir şeklin İÇ ALANI, SVG'nin
	   varsayılan pointer-events davranışıyla (visiblePainted) tıklama/hover
	   kaydetmez — sadece stroke çizgisi tıklanabilir kalır. Sanitize edilmiş
	   SVG'lerdeki path'lerin fill değeri ne olursa olsun (bkz.
	   Svg_Security::sanitize_svg_markup() — fill:none'a çevrilmiş olabilir)
	   her zaman tıklanabilir/hover edilebilir kalması için pointer-events:all
	   zorunludur. */
	pointer-events: all;
}

.spe-svg-wrap svg .spe-svg-path--satista {
	/* Bina Görseli'ndeki AYNI sorun: Inkscape'ten dışa aktarılan bazı
	   path'lerde inline style="fill:...;opacity:0" gömülü olabilir — inline
	   stiller !important OLMAYAN CSS kurallarından her zaman önceliklidir,
	   bu yüzden hem fill hem opacity burada !important ile ezilir. */
	fill: var( --spe-satista-dot ) !important;
	fill-opacity: 0.45;
	opacity: 1 !important;
}

.spe-svg-wrap svg .spe-svg-path--satista:hover {
	fill-opacity: 0.75;
}

.spe-svg-wrap svg .spe-svg-path--satildi {
	fill: var( --spe-kapali-dot ) !important;
	fill-opacity: 0.45;
	cursor: not-allowed;
	opacity: 1 !important;
}

.spe-svg-wrap svg .spe-svg-path--satildi:hover {
	fill-opacity: 0.6;
}

.spe-svg-wrap svg .spe-svg-path--kapali {
	fill: var( --spe-rezerve-dot ) !important;
	fill-opacity: 0.4;
	cursor: not-allowed;
	opacity: 1 !important;
}

.spe-svg-wrap svg .spe-svg-path--kapali:hover {
	fill-opacity: 0.55;
}

@media ( max-width: 780px ) {
	.spe-kat-plani-layout {
		flex-direction: column;
		align-items: stretch;
	}

	.spe-kat-plani-sidebar {
		flex: none;
		max-width: 100%;
		width: 100%;
	}

	.spe-kat-plani-panel {
		flex: none;
		max-width: 100%;
		width: 100%;
	}
}

/* --- Daire Detay ekranı --- */

.spe-daire-detay-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 28px 20px 110px;
}

.spe-daire-detay-main {
	flex: 1 1 auto;
	min-width: 0;
}

.spe-daire-detay-panel {
	flex: 0 0 300px;
	max-width: 300px;
}

.spe-daire-detay-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.spe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.spe-btn:hover {
	transform: translateY( -2px );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.12 );
}

/* KVKK onay kutusu işaretlenmeden "Gönder" devre dışıdır (bkz.
   .spe-kvkk-onay-checkbox ve site-header.js/kat-plani.js/daire-detay.js/
   demo-sayfa.js'teki disable/enable mantığı) — disabled durumda hover
   efekti de (yukarısı) uygulanmasın diye ayrıca sıfırlanır. */
.spe-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.spe-btn:disabled:hover {
	transform: none;
	box-shadow: none;
}

.spe-btn--primary {
	background: var( --spe-text );
	color: #ffffff;
}

.spe-btn--secondary {
	background: #f3f4f6;
	color: var( --spe-text );
	border: 1px solid var( --spe-border );
}

.spe-kat-sekmeleri {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
}

.spe-kat-sekme {
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid var( --spe-border );
	background: #f3f4f6;
	color: var( --spe-muted );
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.spe-kat-sekme:hover {
	color: var( --spe-text );
}

.spe-kat-sekme--aktif {
	background: var( --spe-text );
	border-color: var( --spe-text );
	color: #ffffff;
}

.spe-daire-svg-wrap {
	width: 100%;
	overflow: auto;
}

/* Aynı gerekçe (bkz. .spe-svg-wrap svg yukarısı) — Daire Detay'daki daire
   planı SVG'si için. */
.spe-daire-svg-wrap svg {
	max-width: 100%;
	max-height: 600px;
	width: auto;
	height: auto;
	display: block;
}

/* !important: Kat Planı/Bina Görseli'nde çözdüğümüz AYNI sorun — Inkscape'ten
   dışa aktarılan bazı path'lerde inline style="fill:...;opacity:0" gömülü
   olabilir, bu da fill/opacity kurallarını (fill-opacity DEĞİL) sessizce ezer. */
.spe-daire-svg-wrap svg .spe-svg-path {
	cursor: pointer;
	stroke: #6b7280;
	stroke-width: 1;
	fill: transparent !important;
	opacity: 1 !important;
	transition: fill 0.15s ease, fill-opacity 0.15s ease;
	/* fill:none/transparent olan bir şeklin İÇ ALANI, SVG'nin varsayılan
	   pointer-events davranışıyla (visiblePainted) tıklama/hover kaydetmez —
	   sadece stroke çizgisi tıklanabilir kalır. Bu kural zaten fill'i
	   transparent yaptığından (yukarısı), pointer-events:all OLMADAN bu
	   path'ler HİÇBİR ZAMAN hover/tıklama alamazdı. */
	pointer-events: all;
}

.spe-daire-svg-wrap svg .spe-svg-path:hover {
	fill: var( --spe-satista-dot ) !important;
	fill-opacity: 0.3 !important;
	opacity: 1 !important;
}

.spe-daire-svg-wrap svg .spe-svg-path--secili {
	fill: var( --spe-satista-dot ) !important;
	fill-opacity: 0.55 !important;
	opacity: 1 !important;
}

/* Oda listesindeki bir <li> üzerine hover yapıldığında JS ile eklenen vurgu
   — mevcut ":hover"/"--secili" kurallarından AYRI, ek bir sınıf (bkz.
   daire-detay.js'deki hover senkronizasyonu). */
.spe-daire-svg-wrap svg .spe-svg-path--hover-vurgu {
	fill: var( --spe-satista-dot ) !important;
	fill-opacity: 0.3 !important;
	opacity: 1 !important;
}

.spe-panel-baslik {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 10px;
}

.spe-daire-ozet-konum {
	margin: 0 0 10px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var( --spe-text );
}

.spe-ozet-ayrac {
	color: var( --spe-muted );
	font-weight: 400;
	margin: 0 2px;
}

.spe-daire-ozet-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
}

.spe-olcu-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 6px 12px;
	border-radius: 8px;
	background: #f3f4f6;
	border: 1px solid var( --spe-border );
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --spe-text );
}

.spe-olcu-etiket {
	font-weight: 400;
	font-size: 0.75rem;
	color: var( --spe-muted );
}

.spe-badge {
	display: inline-flex;
	padding: 2px 12px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
}

.spe-badge--satista {
	background: var( --spe-satista-bg );
	color: var( --spe-satista-text );
}

.spe-badge--satildi {
	background: var( --spe-kapali-bg );
	color: var( --spe-kapali-text );
}

.spe-badge--kapali {
	background: var( --spe-rezerve-bg );
	color: var( --spe-rezerve-text );
}

.spe-oda-listesi {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.spe-oda-listesi li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border: 1px solid var( --spe-border );
	border-radius: 10px;
	cursor: pointer;
	font-size: 0.9rem;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.spe-oda-listesi li:hover {
	border-color: var( --spe-satista-border );
}

.spe-oda-listesi li.spe-oda-secili {
	background: var( --spe-satista-bg );
	border-color: var( --spe-satista-border );
}

/* SVG'deki bir oda alanı üzerine hover yapıldığında JS ile eklenen vurgu —
   "--secili" (tıklama/seçim) durumundan daha hafif, ayrı bir sınıf. */
.spe-oda-listesi li.spe-oda-hover-vurgu {
	border-color: var( --spe-satista-border );
}

.spe-oda-m2 {
	color: var( --spe-muted );
}

@media ( max-width: 960px ) {
	.spe-daire-detay-layout {
		flex-direction: column;
	}

	.spe-daire-detay-panel {
		flex: none;
		max-width: 100%;
		width: 100%;
	}
}

/* --- Oda render galerisi: tam ekran lightbox/overlay --- */

body.spe-scroll-locked {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

/* z-index KRİTİK: 200 -> 220. .spe-teklif-overlay'in (İçerik/İletişim/Teklif
   kartları) z-index'i 210'dur — header'daki galeri lightbox'ı (bkz.
   #simbat-pe-icerik-galeri-lightbox), zaten AÇIK olan bilgi kartını
   (#simbat-pe-icerik-overlay) KAPATMADAN, onun ÜSTÜNDE açılabilmesi için bu
   sınıfın z-index'i .spe-teklif-overlay'den YÜKSEK olmalıdır — aksi halde
   lightbox, kartın backdrop'unun ARKASINDA kalır (görünmez/tıklanamaz).
   Daire Detayı'ndaki #simbat-pe-oda-lightbox da bu sınıfı paylaştığından
   (orada .spe-teklif-overlay ile aynı anda açık olmasa da) bu değişiklik
   zararsızdır. */
.spe-lightbox {
	position: fixed;
	inset: 0;
	z-index: 220;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}

.spe-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.spe-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.85 );
}

.spe-lightbox-content {
	position: relative;
	z-index: 1;
	max-width: min( 90vw, 900px );
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 20px;
}

.spe-lightbox-img {
	max-width: 100%;
	max-height: 70vh;
	border-radius: 8px;
	display: block;
	object-fit: contain;
	background: #111827;
}

.spe-lightbox-close,
.spe-lightbox-prev,
.spe-lightbox-next {
	position: fixed;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.15 );
	color: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
}

.spe-lightbox-close:hover,
.spe-lightbox-prev:hover,
.spe-lightbox-next:hover {
	background: rgba( 255, 255, 255, 0.3 );
}

.spe-lightbox-close {
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	font-size: 1.6rem;
	line-height: 1;
}

.spe-lightbox-prev,
.spe-lightbox-next {
	top: 50%;
	transform: translateY( -50% );
	width: 48px;
	height: 48px;
	font-size: 2rem;
	line-height: 1;
}

.spe-lightbox-prev {
	left: 16px;
}

.spe-lightbox-next {
	right: 16px;
}

.spe-lightbox-info {
	margin-top: 14px;
	color: #ffffff;
	text-align: center;
}

.spe-lightbox-oda-adi {
	font-weight: 600;
	font-size: 1.05rem;
	margin-right: 8px;
}

.spe-lightbox-oda-m2 {
	opacity: 0.75;
	font-size: 0.9rem;
}

.spe-lightbox-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.spe-lightbox-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.4 );
	cursor: pointer;
}

.spe-lightbox-dot.is-active {
	background: #ffffff;
}

.spe-toast {
	position: fixed;
	left: 50%;
	bottom: 90px;
	transform: translate( -50%, 20px );
	background: rgba( 17, 24, 39, 0.92 );
	color: #ffffff;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 0.85rem;
	max-width: 80vw;
	text-align: center;
	z-index: 300;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.spe-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate( -50%, 0 );
}

@media ( max-width: 640px ) {
	.spe-lightbox-prev,
	.spe-lightbox-next {
		width: 40px;
		height: 40px;
		font-size: 1.6rem;
	}

	.spe-lightbox-prev {
		left: 6px;
	}

	.spe-lightbox-next {
		right: 6px;
	}

	.spe-lightbox-close {
		top: 10px;
		right: 10px;
	}
}

/* --- Proje Seçimi ekranı (ana subdomain) --- */

.spe-proje-secimi-baslik {
	margin: 0 0 24px;
	font-size: 1.5rem;
	font-weight: 600;
}

.spe-proje-kart-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 20px;
}

@media ( max-width: 780px ) {
	.spe-proje-kart-grid {
		grid-template-columns: 1fr;
	}
}

.spe-proje-kart {
	display: block;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var( --spe-border );
	text-decoration: none;
	color: var( --spe-text );
	background: #ffffff;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.spe-proje-kart:hover {
	transform: translateY( -3px );
	box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.1 );
}

/* aspect-ratio + object-fit:cover KALDIRILDI — Bina Görseli SVG'leri dikey/
   uzun binalar için 16:10 oranı görseli kırpıyordu. Artık img'in kendi
   en-boy oranına göre (width:100%; height:auto;) orantılı sığdırılıyor,
   kart yüksekliği görsele göre esnek — hiçbir zaman kırpılmıyor. min-height,
   sadece placeholder (görselsiz) durumda kartın çökmesini önler. */
.spe-proje-kart-gorsel {
	width: 100%;
	min-height: 160px;
	background: #111827;
	overflow: hidden;
}

.spe-proje-kart-gorsel--placeholder {
	background: linear-gradient( 135deg, #1f2937, #374151 );
}

.spe-proje-kart-gorsel img {
	width: 100%;
	height: auto;
	display: block;
}

.spe-proje-kart-bilgi {
	padding: 16px;
}

.spe-proje-kart-adi {
	margin: 0 0 4px;
	font-size: 1.1rem;
	font-weight: 600;
}

.spe-proje-kart-konum {
	margin: 0;
	font-size: 0.85rem;
	color: var( --spe-muted );
}

/* --- "Teklif Al" formu (overlay) --- */

.spe-teklif-overlay {
	position: fixed;
	inset: 0;
	z-index: 210;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}

.spe-teklif-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.spe-teklif-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.6 );
}

.spe-teklif-content {
	position: relative;
	z-index: 1;
	width: min( 92vw, 420px );
	max-height: 90vh;
	overflow-y: auto;
	background: #ffffff;
	border-radius: 14px;
	padding: 28px 24px;
	box-shadow: 0 20px 50px rgba( 0, 0, 0, 0.3 );
}

.spe-teklif-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: #f3f4f6;
	color: var( --spe-text );
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
}

.spe-teklif-close:hover {
	background: #e5e7eb;
}

.spe-teklif-baslik {
	margin: 0 0 16px;
	font-size: 1.2rem;
	font-weight: 600;
}

.spe-teklif-notice {
	font-size: 0.85rem;
}

.spe-teklif-notice:not( :empty ) {
	margin: 0 0 12px;
}

.spe-teklif-notice--error {
	color: var( --spe-kapali-text );
}

#simbat-pe-teklif-form p,
#simbat-pe-header-iletisim-form p {
	margin: 0 0 14px;
}

#simbat-pe-teklif-form label,
#simbat-pe-header-iletisim-form label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --spe-text );
}

#simbat-pe-teklif-form input[type="text"],
#simbat-pe-teklif-form textarea,
#simbat-pe-header-iletisim-form input[type="text"],
#simbat-pe-header-iletisim-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var( --spe-border );
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.9rem;
	color: var( --spe-text );
}

#simbat-pe-teklif-form textarea,
#simbat-pe-header-iletisim-form textarea {
	resize: vertical;
}

.spe-teklif-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* KVKK onay satırı ("Gönder"in hemen üstünde) — header İletişim, Teklif Al
   ve Demo Talep formlarının ÜÇÜ de kullanır (bkz. Frontend_Router::
   render_kvkk_onay_satiri(), Demo_Sayfa_Router'daki AYNI adlı kopyası). */
.spe-kvkk-onay-satiri {
	margin: 0 0 14px !important;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var( --spe-muted );
}

.spe-kvkk-onay-satiri label {
	display: flex !important;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400 !important;
	cursor: pointer;
}

.spe-kvkk-onay-checkbox {
	margin-top: 3px;
	flex-shrink: 0;
}

.spe-kvkk-oku-link {
	color: var( --spe-text );
	text-decoration: underline;
}

/* KVKK Aydınlatma Metni penceresi — ZATEN AÇIK olan form overlay'inin
   (.spe-teklif-overlay, z-index:210) ÜSTÜNDE görünebilmesi için
   .spe-lightbox'ın (220) bile üstünde bir z-index (230) taşır; DOM sırasına
   bağlı kalınmadan her zaman en üstte kalması garanti edilir. */
.spe-kvkk-overlay {
	z-index: 230;
}

.spe-kvkk-metin-content {
	width: min( 92vw, 640px );
	max-height: 85vh;
}

.spe-kvkk-metin {
	white-space: pre-line;
	font-size: 0.88rem;
	line-height: 1.7;
	color: var( --spe-text );
}

.spe-teklif-basarili {
	font-size: 0.95rem;
	color: var( --spe-satista-text );
	background: var( --spe-satista-bg );
	border: 1px solid var( --spe-satista-border );
	border-radius: 10px;
	padding: 14px 16px;
}

/* --- Üst site header (Proje Ana Ekranı / Kat Planı / Daire Detayı) --- */

.spe-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #eef0f2;
	border-bottom: 1px solid #d1d5db;
}

.spe-site-header-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.spe-site-header-logo {
	display: flex;
	align-items: center;
	height: 36px;
	text-decoration: none;
}

.spe-site-header-logo img {
	max-height: 36px;
	width: auto;
	display: block;
}

.spe-site-header-logo-text {
	font-weight: 700;
	font-size: 1.05rem;
	color: var( --spe-text );
}

/* Mobilde (bkz. 780px media query aşağıda) yatay menü yerine gösterilen
   hamburger ikonu — masaüstünde her zaman gizli. */
.spe-hamburger-button {
	display: none;
	appearance: none;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	padding: 4px 8px;
	color: var( --spe-text );
	cursor: pointer;
}

.spe-site-header-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.spe-site-header-nav a,
.spe-site-header-menu-item {
	appearance: none;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	color: var( --spe-text );
	text-decoration: none;
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.spe-site-header-nav a:hover,
.spe-site-header-menu-item:hover {
	background: #f3f4f6;
}

@media ( max-width: 640px ) {
	.spe-site-header-inner {
		flex-wrap: wrap;
	}

	.spe-site-header-nav {
		width: 100%;
		justify-content: flex-start;
	}
}

/* Mobilde (780px altı) yatay menü tamamen gizlenir, yerine hamburger ikonu
   (bkz. yukarısı, .spe-hamburger-button) gösterilir. İkona tıklanınca
   .spe-site-header-nav'a "is-open" sınıfı eklenir (bkz. site-header.js) ve
   basit bir dropdown olarak header'ın hemen altında açılır. */
@media ( max-width: 780px ) {
	.spe-hamburger-button {
		display: block;
	}

	.spe-site-header-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: #ffffff;
		border-bottom: 1px solid var( --spe-border );
		padding: 8px 20px 12px;
		box-shadow: 0 8px 16px rgba( 0, 0, 0, 0.1 );
	}

	.spe-site-header-nav.is-open {
		display: flex;
	}

	.spe-site-header-nav a,
	.spe-site-header-nav .spe-site-header-menu-item {
		width: 100%;
		text-align: left;
		padding: 12px 4px;
	}
}

/* --- Header içerik overlay'i (Proje Hakkında / Konum / Sosyal Yaşam) --- */

.spe-icerik-content {
	width: min( 92vw, 560px );
}

.spe-icerik-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.spe-icerik-tab {
	appearance: none;
	background: #f3f4f6;
	border: 1px solid var( --spe-border );
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.85rem;
	font-family: inherit;
	cursor: pointer;
	color: var( --spe-text );
}

.spe-icerik-tab.is-active {
	background: var( --spe-satista-bg );
	border-color: var( --spe-satista-border );
	color: var( --spe-satista-text );
	font-weight: 600;
}

.spe-icerik-baslik {
	margin: 0 0 12px;
	font-size: 1.2rem;
	font-weight: 600;
}

/* .spe-icerik-gorsel: kaydın tekli 'gorsel' alanından (item.gorselUrl) BÜYÜK,
   tam genişlik bir <img> gösterir (eskiden olduğu gibi) — height:auto ile
   kendi en-boy oranına göre, ASLA kırpılmadan (bkz. .spe-proje-kart-gorsel'deki
   AYNI "asla kırpma" kuralı). Kaydın galerisinde (item.galeri) ayrıca en az 1
   görsel varsa, büyük görselin ALTINDA küçük, ikincil bir "Fotoğrafları Gör"
   bağlantısı gösterilir — tıklanınca TÜM galeri paylaşılan lightbox'ta (bkz.
   #simbat-pe-icerik-galeri-lightbox) açılır (bkz. site-header.js'deki
   renderIcerikGorsel()). */
.spe-icerik-gorsel {
	margin-bottom: 14px;
}

.spe-icerik-gorsel img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}

.spe-icerik-galeri-link {
	display: inline-block;
	margin-top: 8px;
	padding: 0;
	border: none;
	background: none;
	appearance: none;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --spe-satista-text );
	cursor: pointer;
	text-decoration: underline;
}

.spe-icerik-galeri-link:hover {
	color: var( --spe-text );
}

.spe-icerik-video video {
	width: 100%;
	border-radius: 10px;
	margin-bottom: 14px;
	display: block;
}

.spe-icerik-aciklama {
	margin: 0 0 10px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var( --spe-text );
	white-space: pre-line;
}

.spe-icerik-adres {
	margin: 0 0 14px;
	font-size: 0.85rem;
	color: var( --spe-muted );
}

.spe-icerik-pdf-link {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 8px;
	background: #f3f4f6;
	color: var( --spe-text );
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
}

/* --- demo.simbatdigital.com tanıtım sayfası (bkz. Demo_Sayfa_Router) ---
   BİLEREK ".spe-hero" (proje kapak görseli banner'ı) İLE KARIŞTIRILMASIN
   diye ayrı, ".spe-demo-*" önekli bir isim alanı kullanılıyor — bu, ayrı bir
   sayfa türüdür (marketing/tanıtım), mevcut proje/kat/daire ekranlarının bir
   parçası değildir. Renk paleti/font AYNI (:root'taki paylaşılan
   değişkenler, Poppins) — sadece yeni bir görsel DÜZEN. */

.spe-demo-header {
	width: 100%;
	padding: 20px 24px;
	display: flex;
	align-items: center;
}

.spe-demo-header-logo img {
	height: 32px;
	width: auto;
	display: block;
}

.spe-demo-hero {
	flex: 1;
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
	padding: 24px 20px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.spe-demo-hero-baslik {
	margin: 0 0 10px;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.2;
	color: var( --spe-text );
}

.spe-demo-hero-alt-baslik {
	margin: 0 0 20px;
	font-size: 1.1rem;
	line-height: 1.6;
	color: var( --spe-muted );
	max-width: 620px;
}

.spe-demo-hero-gorsel {
	position: relative;
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 20px;
	box-shadow: 0 20px 50px rgba( 0, 0, 0, 0.15 );
	display: flex;
	justify-content: center;
}

.spe-demo-hero-gorsel img {
	width: 100%;
	height: auto;
	display: block;
}

/* Video, sayfa ilk açıldığında başlık/alt başlık/CTA butonunun TAMAMININ
   scroll olmadan ekrana sığması için bilerek bir max-height ile
   sınırlandırılmıştır (viewport yüksekliğinin ~yarısı) — görsel gibi tam
   genişlik/otomatik yükseklik DEĞİL, tam tersine yüksekliği sınırlayıp
   genişliği orana göre daraltıyoruz (bkz. .spe-demo-hero-gorsel'in ortalamak
   için display:flex;justify-content:center olması).
*/
.spe-demo-hero-gorsel video {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 45vh;
}

.spe-demo-cta-buton {
	padding: 16px 36px;
	font-size: 1.05rem;
	background: var( --spe-satista-dot );
}

/* Video'nun sağ alt köşesindeki tam ekran VE ses butonları (bkz.
   demo-sayfa.js'teki videoElement.requestFullscreen() ve video.muted toggle
   çağrıları) — Oda galerisi lightbox'ındaki (.spe-lightbox-close vb.) AYNI
   yarı saydam/dairesel tasarım dili, farkı: hover'da hafif büyüme (scale)
   efekti eklendi. Ses butonu tam ekran butonunun HEMEN SOLUNDA (bkz.
   .spe-demo-video-ses'in "right" değeri — buton genişliği + boşluk). */
.spe-demo-video-tam-ekran,
.spe-demo-video-ses {
	position: absolute;
	bottom: 12px;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.45 );
	color: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.spe-demo-video-tam-ekran:hover,
.spe-demo-video-ses:hover {
	background: rgba( 0, 0, 0, 0.65 );
	transform: scale( 1.1 );
}

.spe-demo-video-tam-ekran {
	right: 12px;
}

.spe-demo-video-ses {
	right: 54px; /* 34px (buton genişliği) + 8px (boşluk) + 12px (tam ekran butonunun kendi "right"i). */
}

/* Ses butonunun içinde İKİ SVG ikonu birlikte render edilir (bkz.
   Demo_Sayfa_Router::render_demo_hero()) — hangisinin görüneceği
   demo-sayfa.js'in butona eklediği/kaldırdığı "is-sesli" sınıfına göre
   belirlenir; video varsayılan olarak "muted" başladığından (tarayıcı
   otomatik oynatma kısıtlaması) başlangıç durumu "sessiz" ikonudur. */
.spe-demo-video-ses .spe-demo-ses-acik-icon {
	display: none;
}

.spe-demo-video-ses.is-sesli .spe-demo-ses-kapali-icon {
	display: none;
}

.spe-demo-video-ses.is-sesli .spe-demo-ses-acik-icon {
	display: block;
}

/* Süresi dolmuş/geçersiz demo token'ıyla /demo/{token}'a gelindiğinde,
   ana tanıtım sayfasının ÜSTÜNDE gösterilen uyarı şeridi (bkz.
   Demo_Sayfa_Router::render_demo_uyari()) — ayrı bir hata sayfası DEĞİLDİR,
   bu yüzden mevcut "kapalı" (kırmızı) renk paletini ödünç alıyor. */
.spe-demo-uyari {
	width: 100%;
	max-width: 780px;
	margin: 16px auto 0;
	padding: 14px 20px;
	background: var( --spe-kapali-bg );
	border: 1px solid var( --spe-kapali-border );
	color: var( --spe-kapali-text );
	border-radius: 10px;
	text-align: center;
	font-size: 0.95rem;
}

@media ( max-width: 640px ) {
	.spe-demo-hero-baslik {
		font-size: 1.8rem;
	}

	.spe-demo-hero-alt-baslik {
		font-size: 1rem;
	}
}