/*
Theme Name: Da Yapi Theme
Theme URI: https://dayapi.com
Author: Da Yapi
Description: Custom theme for Da Yapi, built from scratch.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: da-yapi-theme
*/

:root {
	--color-navy: #0F2E4B;
	--color-primary: #0F2E4B;
	--color-coral: #FE6661;
	--color-green: #228A31;
	--color-paper: #FFFFFF;
	--color-stone: #F4F5F7;
	--color-slate: #4A5A6A;

	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--text-caption: 12px;
	--text-body: 16px;
	--text-body-lg: 18px;
	--text-subheading: 22px;
	--text-heading: 32px;
	--text-display: 44px;

	/* Bir metin satırının yüksekliği: gövde yazı boyutu (16px) × satır aralığı (1.5).
	   Blog yazısı başlıklarının üstüne bu kadar EK boşluk konur
	   (2026-09-29 kullanıcı kararı: "her başlıktan önce bir satır yüksekliğinde boşluk"). */
	--line-height-body: 24px;

	--font-weight-regular: 400;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--spacing-4: 4px;
	--spacing-8: 8px;
	--spacing-12: 12px;
	--spacing-16: 16px;
	--spacing-24: 24px;
	--spacing-32: 32px;
	--spacing-48: 48px;
	--spacing-64: 64px;
	--spacing-96: 96px;

	--section-gap: 64px;
	--element-gap: 16px;
	--content-max-width: 1140px;

	--radius-buttons: 6px;
	--radius-cards: 8px;
	--radius-images: 4px;
	--radius-toggle: 999px;

	/* Anasayfa hizmet karuseli (iz düşüm yörünge) — 2026-10-09 kullanıcı kararı.
	   Ölçüleri değiştirmek için TEK yer burasıdır; genişlik kırılımları
	   aşağıda .hizmet-karusel üzerinde ezilir (bkz. hizmet karuseli bölümü).
	   Kullanıcı kararı: ön kart merkezinin merkeze (C) uzaklığı kart
	   yüksekliğinin YARISI; en arka nokta C'nin ÖBÜR tarafında (h/6).
	   Kartlar plandaki çemberde 360/adet = 40°'de durur; elips genişliğini
	   EKRAN belirler (--karusel-rx yalnızca üst sınırdır). */
	--karusel-kart: 400px;   /* kart genişliği; yükseklik 16:9'dan gelir */
	--karusel-rx: 700px;     /* yatay yarıçap ÜST SINIRI (gerçeği ekrandan) */
	--karusel-inis: 0.5;     /* C'nin altı = kart yüksekliği × 0.5 (h/2) */
	--karusel-cikis: 0.1667; /* C'nin üstü = kart yüksekliği × 1/6 (h/6) */
	--karusel-sahne: 420px;  /* sahne yüksekliği (YEDEK: JS içerikten hesaplar) */
	/* Kartın altındaki gölge `0 18px 40px` → gölgenin kartın altına taştığı
	   yükseklik. 2026-10-09 kullanıcı kararı: alttaki açıklama satırı kartın
	   "gölgesi kadar" altından başlar. */
	--karusel-golge-bosluk: 56px;

	/* Blog arşivi (blog sayfası) kartları — 2026-10-09 kullanıcı kararı:
	   tam genişlikte YATAY ince bantlar, yükseklik ≈ eski dikey kartın
	   üçte biri. Kart yüksekliğini değiştirmek için TEK yer burasıdır. */
	--yazi-gorsel-genislik: 200px;  /* soldaki öne çıkan görselin genişliği (16:9) */
	--yazi-dolgu: 14px;             /* kart iç boşluğu */
	--yazi-baslik: 18px;            /* kart başlığı */
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: 1.5;
	color: var(--color-navy);
	background: var(--color-paper);
	font-weight: var(--font-weight-regular);
}

h1, h2, h3, p {
	margin: 0 0 var(--spacing-16);
}

img {
	max-width: 100%;
	/* ⚠️ `height: auto` BURADA ŞART: WordPress her görsel etiketine
	   `width="768" height="403"` yazar ve bu öznitelikler CSS'te
	   yükseklik olarak uygulanır. Yalnızca genişlik veren bir kural
	   (örn. `width: 100%`) yüksekliği EZMEZSE görsel, öznitelikteki
	   yükseklikle (403px) render edilir → kutu 200x403 çıkar
	   (2026-10-12'de blog kartlarında yaşandı). */
	height: auto;
	display: block;
}

a {
	color: var(--color-coral);
	text-decoration: none;
}

.container {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-24);
}

@media (min-width: 768px) {
	.container {
		padding: 0 var(--spacing-64);
	}
}

.btn {
	display: inline-block;
	/* 2026-09-22 kullanıcı kararı: CTA butonları artık lacivert (eskiden mercandı).
	   Bu, DESIGN.md'deki "mercan tek CTA rengi" kuralını değiştirdi. */
	background: var(--color-navy);
	color: #FFFFFF;
	font-weight: var(--font-weight-semibold);
	padding: var(--spacing-12) var(--spacing-24);
	border-radius: var(--radius-buttons);
}

.btn:hover,
.btn:focus-visible {
	filter: brightness(1.2);
}

.site-header {
	background: var(--color-paper);
	border-bottom: 1px solid rgba(15, 46, 75, 0.12);
	position: sticky;
	top: 0;
	z-index: 100;
}

/* WordPress yönetim çubuğu (wp-admin'e girişliyken) sticky header'ı kapatmasın:
   çubuk sabit 32px ve daha yüksek z-index'te, header'ı altına kaydır. */
body.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
	flex-wrap: wrap;
	padding-top: var(--spacing-16);
	padding-bottom: var(--spacing-16);
}

.logo-img {
	height: 56px;
	width: auto;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: var(--spacing-24);
}

/* Telefonda menü 5 madde (2026-10-14: SSS eklendi) → ölçüm: 5 madde + 24px boşluk
   = 360px menü; 360px ekranda kullanılabilir alan 312px → 24px taşma. Bu yüzden
   ≤640px'te yalnızca menü boşluğu ve yazı boyutu bir kademe daralır (menü 296px);
   düzen (3 satır: logo / menü / TR-EN) değişmez, ≥641px aynen kalır.
   ⚠️ SIRA: daha DAR kırılım (≤340px) bu bloktan SONRA gelmeli — aksi hâlde
   aynı özgüllükte sonra gelen ≤640 kuralı kazanır (2026-10-14'te yaşandı). */
@media (max-width: 640px) {
	.site-nav {
		gap: var(--spacing-12);
	}

	.site-nav-link {
		font-size: 15px;
	}
}

/* Çok küçük ekranlar (≤340px): 5 madde 320px ekranda hâlâ taşıyordu → bir kademe
   daha daralır (menü 264px, sağ kenar 288px → 32px nefes payı). */
@media (max-width: 340px) {
	.site-nav {
		gap: var(--spacing-8);
	}

	.site-nav-link {
		font-size: 14px;
	}
}

.site-nav-link {
	color: var(--color-navy);
	font-weight: var(--font-weight-semibold);
	padding: var(--spacing-8) 0;
	border-bottom: 2px solid transparent;
}

.site-nav-link:hover,
.site-nav-link.is-current {
	color: var(--color-navy);
	border-bottom-color: var(--color-coral);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-16);
}

.header-phone {
	color: var(--color-coral);
	font-weight: var(--font-weight-semibold);
}

.lang-toggle {
	display: inline-flex;
	border: none;
	background: var(--color-stone);
	border-radius: var(--radius-toggle);
	padding: 4px;
	cursor: pointer;
}

.lang-toggle-option {
	padding: 4px 12px;
	border-radius: var(--radius-toggle);
	font-size: var(--text-caption);
	font-weight: var(--font-weight-semibold);
	color: var(--color-navy);
}

.lang-toggle-option.is-active {
	background: var(--color-coral);
	color: #FFFFFF;
}

.site-footer {
	background: var(--color-navy);
	color: #FFFFFF;
	padding-top: var(--spacing-48);
	padding-bottom: var(--spacing-24);
}

.footer-menus {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-32);
	padding-bottom: var(--spacing-32);
}

@media (min-width: 768px) {
	.footer-menus {
		grid-template-columns: repeat(3, 1fr);
	}
}

.footer-menu-title {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-stone);
	margin: 0 0 var(--spacing-16);
}

.footer-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.footer-menu-list a {
	color: #FFFFFF;
}

.footer-menu-list a:hover {
	color: var(--color-coral);
}

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: var(--spacing-16);
}

.footer-copy {
	font-size: var(--text-caption);
	color: var(--color-stone);
	margin: 0;
}

.hero {
	padding-top: var(--spacing-64);
	padding-bottom: var(--spacing-64);
	text-align: center;
}

@media (min-width: 768px) {
	.hero {
		text-align: left;
	}
}

.hero-title {
	font-size: var(--text-display);
	font-weight: var(--font-weight-bold);
	line-height: 1.15;
}

.hero-sub {
	font-size: var(--text-body-lg);
	color: var(--color-slate);
	margin-bottom: var(--spacing-24);
	/* Başlık mobilde ortalı kalır; başlığın ALTINDAKİ yazı her genişlikte sola
	   yaslıdır (2026-09-22 kullanıcı kararı: mobilde ortalanmış görünmesin) ve
	   metin bloğu sayfanın genel genişliğini kullanır (eskiden 640px'e kilitliydi). */
	text-align: left;
}

.services {
	background: var(--color-stone);
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap);
}

/* 2026-10-07 kullanıcı kararı: başlık artık bir CÜMLE — "Villanızın Kapsamlı
   Tadilat ve Yenilenmesini Uçtan Uca Yapıyoruz". Bu yüzden büyük-harf
   (uppercase) zorlaması ve büyük-harfe özel harf aralığı kaldırıldı; kelime
   başları içerikte büyük yazılır. */
.services-heading {
	margin: 0 0 var(--spacing-48);
	text-align: center;
	font-size: var(--text-heading);
	font-weight: var(--font-weight-bold);
	color: var(--color-navy);
	letter-spacing: normal;
}

.services-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-32) var(--spacing-24);
}

@media (min-width: 640px) {
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.services-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.service-card {
	background: transparent;
	border-radius: 0;
	padding: var(--spacing-16);
	text-align: center;
}

/* Bir hizmet sayfasına bağlı kartlar tıklanabilir; görünüm aynı kalır —
   tıklanabilirlik yalnızca üzerine gelince çıkan çizgiyle belli olur.
   Mercan yalnızca CTA rengi olduğu için burada kullanılmaz. */
a.service-card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.service-icon {
	width: 48px;
	height: 48px;
	margin: 0 auto var(--spacing-16);
	color: var(--color-navy);
}

/* İki parçalı (geniş) ikon: kendi geniş tuvalini getirir (34×24) → yükseklik
   diğer ikonlarla AYNI kalır, genişlik orandan gelir (48px'te ≈68px).
   2026-10-09 kullanıcı kararı: "Ek Yapılar" ikonu havuz merdiveni + çim biçme
   makinesi yan yana. */
.service-icon-genis {
	width: auto;
}

/* Başlıkta kalıcı alt çizgi YOK (2026-09-16 kullanıcı kararı — 2026-08-16'daki
   "altı çizili başlık" kararını geçersiz kılar). Fareyle üzerine gelince (veya
   klavyeyle odaklanınca) başlığın altında ortadan dışa doğru büyüyen kalın bir
   çizgi belirir.
   DİKKAT: başlık BLOK kalmalı (display: inline-block YAZMA) — ikon satır içi
   olduğu için başlık satır içi kutuya dönerse ikonun yanına kayar, "ikon üstte"
   düzeni bozulur. Kutu metin genişliğine ise width: fit-content ile daraltılır. */
.service-title {
	position: relative;
	width: fit-content;
	margin: 0 auto var(--spacing-16);
	padding-bottom: 6px;
	font-size: var(--text-subheading);
	font-weight: var(--font-weight-semibold);
	color: var(--color-navy);
}

.service-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 2px;
	background: currentColor;
	transform: translateX(-50%);
	transition: width 0.3s ease;
}

a.service-card:hover .service-title::after,
a.service-card:focus-visible .service-title::after {
	width: 100%;
}

.service-desc {
	font-size: var(--text-body);
	color: var(--color-slate);
	font-style: italic;
	margin: 0;
}

/* ------------------------------------------------------------------
   Hizmet kartları — İZ DÜŞÜM (PERSPEKTİF) YÖRÜNGELİ KARUSEL (2026-10-09)
   ------------------------------------------------------------------
   Dokuz hizmet kartı elips şeklinde bir yörüngede döner: en öndeki kart
   büyük ve ortada, kenara/arkaya gittikçe küçülüp yukarı kayar.
   Kullanıcı kararları:
     · kart oranı 16:9 · hafif gölgeli BEYAZ kart (derinlik için)
     · yavaş otomatik dönüş + fareyle üzerine gelince durur + sağ/sol oku
     · telefonda aynı elips, küçültülmüş hâli
     · GEOMETRİ (son tur): kartlar PLANDAKİ ÇEMBERDE 360/adet = 40°'de durur;
       ekrandaki elips o çemberin yassı İZ DÜŞÜMÜdür. Ön kart merkezi
       merkezin h/2 altında, en arka nokta h/6 üstünde; elipsin genişliğini
       EKRAN belirler (--karusel-rx üst sınırdır), hiçbir kart kenardan
       kesilmez. Kart ölçüsü perspektif profili 1/(2−cos φ) → en arka kart
       öndekinin ≈1/3'ü. Büyük kart her zaman küçüğün ÖNÜNDE görünür.
     · 2. TUR: italik açıklamalar kartın İÇİNDEN çıktı → karuselin ALTINDA
       tek satır (.karusel-aciklama), önde hangi kart varsa onun metnini
       gösterir (böylece açıklamalar uzatılabilir)
   JS YOKSA hiçbir şey bozulmaz: kartlar eski .services-grid ızgarasında
   kalır ve açıklamalar eski yerinde, kartın içinde görünür; yörünge düzeni
   yalnızca JS'in eklediği is-karusel sınıfıyla kurulur — sitenin
   "JS'siz de çalışır" ilkesi korunur.
   Ölçüleri değiştirmek için tek yer: :root'taki --karusel-* değişkenleri.
   ⚠️ --karusel-rx burada bir ÜST SINIRDIR: gerçek değeri JS ekrana sığacak
   şekilde küçültür. --karusel-inis / --karusel-cikis ise dikey ölçüyü kart
   yüksekliğinin katı olarak verir (h/2 ve h/6). */
.hizmet-karusel {
	position: relative;
}

/* Karusel kapsayıcının DIŞINDA durur → sahne ekranın tam genişliğini
   kullanabilir. JS yokken (ızgara hâli) kartlar okunabilir kalsın diye
   ızgarayı eski kapsayıcı genişliğine oturt. */
.hizmet-karusel:not(.is-karusel) .services-grid {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-24);
}

@media (min-width: 768px) {
	.hizmet-karusel:not(.is-karusel) .services-grid {
		padding: 0 var(--spacing-64);
	}
}

.karusel-sahne {
	position: relative;
	overflow: hidden;
}

/* Açıklama satırı ve oklar JS olmadan anlamsız → varsayılan olarak gizli
   (is-karusel ile açılır). */
.karusel-kontroller,
.karusel-aciklama {
	display: none;
}

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

/* ---- JS kurulunca (is-karusel) etkinleşen kısım ---- */
.hizmet-karusel.is-karusel .karusel-sahne {
	/* Yükseklik JS tarafından içerikten hesaplanır: kart + gölge boşluğu +
	   arkadaki kartların yükselmesi. `--karusel-sahne` yalnızca yedektir. */
	height: var(--karusel-sahne-hesap, var(--karusel-sahne));
	/* 2026-10-09 kullanıcı kararı: kartlar "tutulup sallanarak"
	   çevrilebilsin → sahne tutulabilir görünür, yatay sürükleme karusele
	   aittir (dikey kaydırma sayfada kalır). */
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.hizmet-karusel.is-karusel.karusel-surukleniyor .karusel-sahne {
	cursor: grabbing;
}

.hizmet-karusel.is-karusel .karusel-yorunge {
	display: block;
	position: relative;
	height: 100%;
}

/* Kart artık ızgara hücresi değil, sahnenin ortasından yörüngeye yerleşen
   bir kutu. Konum/ölçek/opaklık JS'in yazdığı transform ile gelir. */
.hizmet-karusel.is-karusel .service-card {
	position: absolute;
	left: 50%;
	/* Yörünge merkezi: JS, arkadaki kartların yükselmesine göre hesaplar
	   (açıklama satırı kartın hemen altında kalabilsin). */
	top: var(--karusel-merkez, 50%);
	width: var(--karusel-kart);
	aspect-ratio: 16 / 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-16) var(--spacing-24);
	background: var(--color-paper);
	border: 1px solid rgba(15, 46, 75, 0.12);
	border-radius: 10px;
	/* Derinlik hissi için hafif gölge — 2026-10-09 kullanıcı kararı.
	   Sitedeki "kartlara gölge yok" kuralının karusel için bilinçli istisnası;
	   istisna yalnızca .hizmet-karusel kapsamındadır. */
	box-shadow: 0 18px 40px rgba(15, 46, 75, 0.18);
	will-change: transform, opacity;
	/* Emniyet kemeri: en uzun hizmet adı/açıklaması bile 16:9 kutudan
	   taşmasın (yazı ölçüleri aşağıda kutuya göre ayarlandı). */
	overflow: hidden;
	/* Kartlar bağlantı olduğu için tarayıcının kendi bağlantı sürüklemesi
	   kapanır — sahne sürüklemesi (karusel çevirme) onunla çakışmasın. */
	-webkit-user-drag: none;
}

/* 2026-10-09 kullanıcı kararı: sağ/sol okların ALTINDAKİ boşluk 1/3
   azaltıldı. Yalnızca anasayfadaki hizmetler bölümünün ALT boşluğu
   değişir; üst boşluk ve diğer bölümler `--section-gap` ile aynen kalır. */
.services {
	padding-bottom: calc(var(--section-gap) * 2 / 3);
}

/* Açıklama artık kartın içinde değil, karuselin altında (2. tur kararı). */
.hizmet-karusel.is-karusel .service-card .service-desc {
	display: none;
}

.hizmet-karusel.is-karusel .service-icon {
	/* 2026-10-09 kullanıcı kararı: ikonlar 2 katına çıkarıldı (46 → 92px). */
	width: 92px;
	height: 92px;
	margin-bottom: var(--spacing-16);
}

/* Geniş (iki parçalı) ikon karuselde de yükseklikten ölçeklenir:
   92px yükseklikte genişlik ≈130px olur. */
.hizmet-karusel.is-karusel .service-icon-genis {
	width: auto;
}

/* Açıklama karttan çıktığı için başlık 16:9 kutuda rahatça büyüyebilir. */
.hizmet-karusel.is-karusel .service-title {
	margin-bottom: 0;
	font-size: 20px;
	line-height: 1.25;
}

/* Karuselin altındaki TEK açıklama satırı: öndeki kartın metni. Açıklamalar
   buradan uzatılabilir; metin kartın kendi .service-desc'inden gelir. */
.hizmet-karusel.is-karusel .karusel-aciklama {
	display: block;
	max-width: 760px;
	/* Boşluk sahnenin içinde bırakılır (--karusel-golge-bosluk) → yazı kartın
	   gölgesinin hemen altından başlar. */
	margin: 0 auto;
	padding: 0 var(--spacing-24);
	text-align: center;
	font-size: var(--text-body-lg);
	font-style: italic;
	line-height: 1.5;
	color: var(--color-slate);
	/* Metin uzunluğu değişince altındaki oklar/sayfa zıplamasın:
	   iki satırlık yer baştan ayrılır. */
	min-height: calc(2 * 1.5 * var(--text-body-lg));
}

.hizmet-karusel.is-karusel .karusel-kontroller {
	display: flex;
	justify-content: center;
	gap: var(--spacing-16);
	margin-top: var(--spacing-24);
}

.karusel-ok {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--color-paper);
	color: var(--color-navy);
	border: 1px solid rgba(15, 46, 75, 0.18);
	border-radius: var(--radius-toggle);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.karusel-ok svg {
	width: 22px;
	height: 22px;
}

.karusel-ok:hover,
.karusel-ok:focus-visible {
	background: var(--color-navy);
	color: var(--color-paper);
}

@media (max-width: 1023px) {
	.hizmet-karusel {
		--karusel-kart: 340px;
		--karusel-sahne: 340px;
	}
}

@media (max-width: 640px) {
	.hizmet-karusel {
		--karusel-kart: 230px;
		--karusel-sahne: 245px;
	}

	.hizmet-karusel.is-karusel .service-card {
		padding: var(--spacing-8) var(--spacing-12);
	}

	.hizmet-karusel.is-karusel .service-icon {
		/* 32 → 64px (kullanıcı kararı: ikonlar 2 katına). */
		width: 64px;
		height: 64px;
		margin-bottom: 6px;
	}

	.hizmet-karusel.is-karusel .service-title {
		font-size: 15px;
	}

	.hizmet-karusel.is-karusel .karusel-aciklama {
		font-size: var(--text-body);
		min-height: calc(3 * 1.5 * var(--text-body));
	}
}



/* İletişim sayfası (/iletisim/) — 2026-10-07 kullanıcı kararı:
   beyaz bandın yüksekliği eskisinin İKİ KATINA çıkarıldı (ölçülen ≈299px →
   600px) ve içerik bu boşluğun ORTASINDA duruyor → e-postanın altında beyaz
   boşluk kalır, footer aşağı iner. Ayarı değiştirmek için tek yer: min-height. */
.iletisim-sayfasi {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 600px;
	/* Bloğu biraz yukarı it (2026-10-07 kullanıcı kararı: "biraz daha yukarı
	   al" + e-posta altında daha fazla beyaz boşluk). Alt dolgu, içerik
	   kutusunu kısaltır → ortalanan içerik yukarı kayar. Ayar yeri burası. */
	padding-bottom: var(--spacing-96);
}

.iletisim-sayfasi > .container {
	width: 100%;
}

/* İletişim sayfasının kendi boşluk düzeni — 2026-10-08 kullanıcı kararı:
   başlığın üstü (48→96), başlığın altı (32→64; h1'in 12px kendi boşluğuyla
   toplam ~76px) ve kolonlar ile form kutusu arası (48→64) artırıldı.
   ⚠️ .sayfa-basi hizmet sayfalarında da kullanılıyor → kural İLETİŞİM
   SAYFASINA ÖZEL yazılır, genel .sayfa-basi'ye dokunulmaz. */
.iletisim-sayfasi .sayfa-basi {
	padding-top: var(--spacing-96);
	padding-bottom: var(--spacing-64);
}

/* İletişim sayfası: başlığın altındaki iki (görünmez) kolon —
   SOLDA açıklama metni, SAĞDA telefon + e-posta. 2026-10-08 kullanıcı kararı:
   "İletişim" başlığı hiçbir kolonun içinde değil, üstte tek başına kalır.
   Dar ekranda tek kolona iner. */
.iletisim-ust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--spacing-64);
	align-items: start;
}

@media (max-width: 720px) {
	.iletisim-ust {
		grid-template-columns: 1fr;
		gap: var(--spacing-32) 0;
	}
}

/* İletişim sayfası (/iletisim/) — telefon ve e-posta, tek sütun liste. */
.iletisim-liste {
	list-style: none;
	/* 2026-10-08: metinle yan yana durduğu için üst boşluk kaldırıldı
	   (eskiden açıklamanın altındaydı, aralarındaki boşluk buradan geliyordu). */
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
	max-width: 420px;
}

/* Satır: ikon solda, değer yanında (2026-10-07: yazı etiketi kaldırıldı). */
.iletisim-satir {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-12);
}

/* Satır başındaki ikon (telefon / e-posta) — site geneliyle aynı çizgi:
   24×24 viewBox, stroke=currentColor, dolgu yok. */
.iletisim-ikon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	color: var(--color-navy);
}

/* ---- İletişim formu (Contact Form 7) — 2026-10-07 kullanıcı kararı ----
   Yerleşim B: iletişim bilgilerinin ALTINDA, tam genişlik. Taş zeminli kutu,
   beyaz giriş alanları, lacivert "Gönder". Form HTML'ini CF7 üretir; burada
   yalnızca görünüm ayarlanır. Alan adları functions.php içindeki
   da_yapi_cf7_form_tanim() ile eşleşir (ad-soyad, telefon, eposta, konu,
   mesaj, tuzak). */
.iletisim-form-kutu {
	/* 2026-10-08: kolonlarla form kutusu arası 48→64px. */
	margin-top: var(--spacing-64);
	background: var(--color-stone);
	border-radius: var(--radius-cards);
	padding: var(--spacing-32);
}

.iletisim-form-baslik {
	margin: 0 0 var(--spacing-24);
	font-size: var(--text-subheading);
	font-weight: var(--font-weight-bold);
	color: var(--color-navy);
}

/* Alan: etiket üstte, girdi altta. */
.da-form-alan {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	margin: 0 0 var(--spacing-16);
}

/* İki alanı yan yana koyan satır (dar ekranda tek kolona iner). */
.da-form-ikili {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--spacing-24);
}

.da-yapi-iletisim-formu .form-etiket {
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-slate);
}

.da-yapi-iletisim-formu .wpcf7-form-control-wrap {
	display: block;
}

/* CF7, her alanı <p> içine sarar (autop) → varsayılan dış boşluğu sıfırla;
   aralıkları .da-form-alan ve buton yönetir. */
.da-yapi-iletisim-formu p {
	margin: 0;
}

.da-yapi-iletisim-formu .form-girdi {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: var(--text-body);
	color: var(--color-navy);
	background: var(--color-paper);
	border: 1px solid rgba(15, 46, 75, 0.18);
	border-radius: var(--radius-buttons);
	padding: 12px 14px;
}

.da-yapi-iletisim-formu textarea.form-girdi {
	/* CF7 varsayılanı rows="10" → çok uzun duruyor; mockup'taki yükseklik. */
	height: 150px;
	min-height: 130px;
	resize: vertical;
}

.da-yapi-iletisim-formu .form-girdi::placeholder {
	color: var(--color-slate);
	opacity: 0.75;
}

.da-yapi-iletisim-formu .form-girdi:focus {
	outline: 2px solid var(--color-navy);
	outline-offset: 1px;
}

/* Gönder butonu: site geneli .btn ile aynı görünüm (lacivert). */
.da-yapi-iletisim-formu .form-gonder {
	display: inline-block;
	margin-top: var(--spacing-8);
	background: var(--color-navy);
	color: #FFFFFF;
	font: inherit;
	font-weight: var(--font-weight-semibold);
	padding: var(--spacing-12) var(--spacing-24);
	border: 0;
	border-radius: var(--radius-buttons);
	cursor: pointer;
}

.da-yapi-iletisim-formu .form-gonder:hover,
.da-yapi-iletisim-formu .form-gonder:focus-visible {
	filter: brightness(1.2);
}

/* Gönderim sonucu / hata mesajları. */
.da-yapi-iletisim-formu .wpcf7-response-output {
	margin: var(--spacing-16) 0 0;
	padding: var(--spacing-12) var(--spacing-16);
	border-radius: var(--radius-buttons);
	font-size: var(--text-body);
}

.da-yapi-iletisim-formu .wpcf7-not-valid-tip {
	font-size: var(--text-caption);
	color: var(--color-coral);
}

/* Spam tuzağı: insan görmez (ekran dışında), bot doldurur. */
.da-tuzak {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 720px) {
	.da-form-ikili {
		grid-template-columns: 1fr;
	}
}

.iletisim-deger {
	font-size: var(--text-subheading);
	font-weight: var(--font-weight-semibold);
	color: var(--color-navy);
	text-decoration: none;
}

.iletisim-deger:hover,
.iletisim-deger:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.why-us {
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap);
}

.why-us-inner {
	max-width: 640px;
	text-align: center;
}

.why-us-inner h2 {
	font-size: var(--text-heading);
}

.why-us-inner p {
	color: var(--color-slate);
	margin: 0;
	/* 2026-10-16 kullanıcı kararı: bölüm paragrafı şablona uyduruldu (18px) —
	   "Neden Da Yapı?" diğer bölüm/not paragraflarıyla aynı boyutta. */
	font-size: var(--text-body-lg);
}

.contact {
	background: var(--color-navy);
	color: #FFFFFF;
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap);
}

.contact-inner {
	text-align: center;
}

.contact-label {
	color: var(--color-stone);
	font-size: var(--text-body);
	margin-bottom: var(--spacing-16);
}

.contact-link {
	display: block;
	color: var(--color-coral);
	font-size: var(--text-heading);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--spacing-8);
}

/* ============================================================
   Blog — arşiv listesi (index.php)
   ============================================================ */

.blog-index {
	padding-top: var(--spacing-48);
	padding-bottom: var(--spacing-64);
}

.archive-head {
	margin-bottom: var(--spacing-32);
}

.archive-title {
	font-size: var(--text-heading);
	font-weight: var(--font-weight-bold);
	color: var(--color-navy);
	margin: 0 0 var(--spacing-8);
}

.archive-desc {
	color: var(--color-slate);
	margin: 0;
}

/* Blog arşivi kartları — TAM GENİŞLİKTE YATAY BANTLAR (2026-10-09 kullanıcı
   kararı: "hepsi tam genişte tek bir kart olsun, yüksekliği eski kartın
   yaklaşık üçte biri kadar olsun; yanlamasına geniş bantlar alt alta dizilsin").
   Eski 3/2/1 kolonlu ızgara (grid-template-columns) KALDIRILDI.
   Yazı seçimi/ölçüler: ölçüler :root → --yazi-* token'larında (tek yer). */
.post-grid {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-12);
}

.post-card {
	display: flex;
	align-items: center;
	gap: var(--yazi-dolgu);
	background: var(--color-stone);
	border-radius: var(--radius-cards);
	padding: var(--yazi-dolgu);
}

/* Soldaki öne çıkan görsel: kart yüksekliğini belirleyen öge.
   Görsel yoksa metin tüm genişliği kullanır (esnek düzen). */
.post-card-gorsel {
	flex: 0 0 var(--yazi-gorsel-genislik);
	display: block;
	border-radius: var(--radius-images);
	overflow: hidden;
}

.post-card-gorsel img {
	width: 100%;
	/* ⚠️ `height: auto` olmadan HTML'deki height özniteliği kazanır
	   (görsel 200x403 çıkar, kart 431px olur). */
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin: 0;
}

.post-card-govde {
	flex: 1 1 auto;
	min-width: 0;
}

.post-card-title {
	font-size: var(--yazi-baslik);
	font-weight: var(--font-weight-semibold);
	line-height: 1.25;
	margin: 0 0 var(--spacing-4);
}

.post-card-title a {
	color: var(--color-navy);
}

.post-card-title a:hover {
	color: var(--color-coral);
}

.post-card-meta {
	font-size: var(--text-caption);
	color: var(--color-slate);
	margin: 0 0 var(--spacing-4);
}

.post-card-cats a {
	color: var(--color-slate);
}

.post-card-cats a:hover {
	color: var(--color-coral);
}

.post-card-excerpt {
	color: var(--color-slate);
	font-size: var(--text-body);
	margin: 0 0 var(--spacing-4);
}

.post-card-more {
	display: inline-block;
	color: var(--color-coral);
	font-weight: var(--font-weight-semibold);
}

/* Telefonda (≤640px) kart belirgin biçimde KISA — 2026-10-14 kullanıcı kararı:
   "kartların yüksekliğini yarıya indir; başlık fotoğrafla aynı hizada iki kolonda
   dursun, alttaki açıklama fotoğrafın altına da geçsin, 2-3 satır görünsün, tam boy gitsin."
   Eski düzende metin ~190px'lik dar kolonda 6-8 satıra yayılıyordu (kart 358-447px).
   Yeni düzen: 1. satır [görsel | başlık (en çok 3 satır) + tarih (tek satır)] ·
   2. satır açıklama TAM GENİŞLİK (en çok 2 satır) · 3. satır "Yazının tamamı".
   Ölçüm (390px, ilk kart): 358 → 210 px (%59). Görseli olmayan yazıda başlık/tarih
   tam genişlikten başlar (WordPress `has-post-thumbnail` sınıfı). */
@media (max-width: 640px) {
	.post-card {
		--yazi-gorsel-genislik: 110px;
		display: grid;
		grid-template-columns: var(--yazi-gorsel-genislik) 1fr;
		gap: var(--spacing-8) var(--yazi-dolgu);
		align-items: start;
	}

	.post-card-gorsel { grid-column: 1; grid-row: 1; }

	/* Gövde kutusu ortadan kalkar: başlık/tarih/açıklama doğrudan kart ızgarasına
	   yerleşir — böylece açıklama görselin ALTINA geçebilir (yalnızca CSS ile). */
	.post-card-govde { display: contents; }

	.post-card-title {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
	}

	.post-card-meta {
		grid-column: 2;
		grid-row: 2;
		margin: 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		overflow: hidden;
	}

	.post-card:not(.has-post-thumbnail) .post-card-title,
	.post-card:not(.has-post-thumbnail) .post-card-meta { grid-column: 1 / -1; }

	.post-card-excerpt {
		grid-column: 1 / -1;
		grid-row: 3;
		margin: 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}

	.post-card-more { grid-column: 1 / -1; grid-row: 4; }
}

.archive-empty {
	color: var(--color-slate);
}

/* Sayfalama */
.pagination {
	margin-top: var(--spacing-32);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-8);
}

.pagination .page-numbers {
	padding: var(--spacing-8) var(--spacing-12);
	border-radius: var(--radius-buttons);
	color: var(--color-navy);
	font-weight: var(--font-weight-semibold);
}

.pagination .page-numbers.current {
	background: var(--color-navy);
	color: var(--color-paper);
}

.pagination .page-numbers:hover {
	color: var(--color-coral);
}

/* ============================================================
   Blog — tek yazı (single.php)
   ============================================================ */

/* Okuma kolonu TÜM sayfalarla aynı varsayılan genişliği kullanır
   (2026-09-29 kullanıcı kararı: "bütün sayfalar aynı genişlikten okusun").
   Genişliği değiştirmek için tek yer: :root → --content-max-width.
   Etkilenen yerler: blog yazıları (single.php), hizmet sayfalarının SSS bloğu
   ve içerik boşken kullanılan blok (page-hizmet-detay.php). */
.container-narrow {
	max-width: var(--content-max-width);
}

.single-post-main {
	padding-top: var(--spacing-48);
	padding-bottom: var(--spacing-64);
}

.single-head {
	margin-bottom: var(--spacing-24);
}

.single-title {
	font-size: var(--text-heading);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	color: var(--color-navy);
	margin: 0 0 var(--spacing-12);
}

.single-thumb {
	margin: 0 0 var(--spacing-24);
}

.single-thumb img {
	border-radius: var(--radius-images);
	height: auto;
}

.entry-content {
	color: var(--color-navy);
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content h2 {
	font-size: var(--text-subheading);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	/* Üst boşluk = normal aralık + BİR SATIR YÜKSEKLİĞİ (2026-09-29 kullanıcı kararı) */
	margin: calc(var(--spacing-32) + var(--line-height-body)) 0 var(--spacing-12);
}

.entry-content h3 {
	font-size: var(--text-body-lg);
	font-weight: var(--font-weight-semibold);
	/* h2 ile aynı kural: başlıktan önce bir satır yüksekliği ek boşluk */
	margin: calc(var(--spacing-24) + var(--line-height-body)) 0 var(--spacing-8);
}

.entry-content h4 {
	font-weight: var(--font-weight-semibold);
	margin: calc(var(--spacing-16) + var(--line-height-body)) 0 var(--spacing-8);
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote {
	margin: 0 0 var(--spacing-16);
}

.entry-content ul,
.entry-content ol {
	padding-left: var(--spacing-24);
}

.entry-content li {
	margin-bottom: var(--spacing-8);
}

.entry-content a {
	color: var(--color-coral);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content img {
	border-radius: var(--radius-images);
	height: auto;
}

.entry-content blockquote {
	padding-left: var(--spacing-16);
	border-left: 3px solid var(--color-coral);
	color: var(--color-slate);
	font-style: italic;
}

.entry-content figure {
	margin: 0 0 var(--spacing-16);
}

.entry-content figcaption {
	font-size: var(--text-caption);
	color: var(--color-slate);
	margin-top: var(--spacing-8);
}

.single-tags {
	font-size: var(--text-caption);
	color: var(--color-slate);
	margin-top: var(--spacing-24);
}

.single-tags a {
	color: var(--color-slate);
}

.single-tags a:hover {
	color: var(--color-coral);
}

.post-nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-16);
	margin-top: var(--spacing-48);
	padding-top: var(--spacing-24);
	border-top: 1px solid var(--color-stone);
}

@media (min-width: 640px) {
	.post-nav {
		grid-template-columns: repeat(2, 1fr);
	}
}

.post-nav-link {
	color: var(--color-navy);
	font-weight: var(--font-weight-semibold);
}

.post-nav-link:hover {
	color: var(--color-coral);
}

.post-nav-label {
	display: block;
	font-size: var(--text-caption);
	font-weight: var(--font-weight-regular);
	color: var(--color-slate);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--spacing-8);
}

.post-nav-next {
	text-align: right;
}

.back-to-blog {
	margin-top: var(--spacing-32);
	font-weight: var(--font-weight-semibold);
}

/* ============================================================
   Hizmet sayfaları (page-hizmetler.php · page-hizmet-detay.php)
   ============================================================ */

.sayfa-basi {
	padding-top: var(--spacing-48);
	padding-bottom: var(--spacing-32);
}

.sayfa-baslik {
	font-size: var(--text-heading);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	color: var(--color-navy);
	margin: 0 0 var(--spacing-12);
}

.sayfa-aciklama {
	color: var(--color-slate);
	font-size: var(--text-body-lg);
	max-width: 720px;
	margin: 0;
}

/* --- Hizmetler şemsiye sayfası ---
   Not: <main class="site-main hizmetler-sayfasi"> için alt dolgu YOK —
   iletişim bloğu bu main'in son elemanı; dolgu verilirse lacivert bloğun
   altında beyaz şerit kalır. Boşluk, ızgaranın alt boşluğundan gelir. */

.hizmet-izgara {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	/* Son hizmet kartının altında nefes payı (iletişim bloğuna yapışmasın). */
	margin-bottom: var(--spacing-64);
}

/* Hizmet kartı: tek sütun, tam genişlikte gri şerit.
   Sol kolon (ikon + başlık) SABİT genişlikte — böylece bütün açıklamalar
   aynı hizadan başlar (başlık uzunluğuna göre kaymaz).
   1024px altında dikey yığına döner. */
.hizmet-kart {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	background: var(--color-stone);
	border-radius: var(--radius-cards);
	padding: var(--spacing-24) var(--spacing-32);
}

.hizmet-kart-ust {
	display: flex;
	align-items: center;
	gap: var(--spacing-16);
}

@media (min-width: 1024px) {
	.hizmet-kart {
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-32);
	}

	.hizmet-kart-ust {
		flex: none;
		width: 380px;
	}

	.hizmet-kisa {
		flex: 1;
	}
}

.hizmet-ikon {
	width: 32px;
	height: 32px;
	flex: none;
	color: var(--color-navy);
}

.hizmet-ikon-buyuk {
	width: 56px;
	height: 56px;
	margin-bottom: var(--spacing-16);
}

.hizmet-ad {
	font-size: var(--text-subheading);
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
	color: var(--color-navy);
	margin: 0;
}

.hizmet-kart:hover .hizmet-ad {
	color: var(--color-coral);
}

.hizmet-kisa {
	color: var(--color-slate);
	margin: 0;
}

.hizmet-baglanti {
	color: var(--color-coral);
	font-weight: var(--font-weight-semibold);
}

/* --- Hizmet detay sayfası --- */

.kirinti {
	font-size: var(--text-caption);
	color: var(--color-slate);
	padding-top: var(--spacing-24);
}

.kirinti a {
	color: var(--color-slate);
}

.kirinti a:hover {
	color: var(--color-coral);
}

.kirinti-ayrac {
	margin: 0 var(--spacing-8);
}

.kirinti-son {
	color: var(--color-navy);
}

.hizmet-basi {
	padding-top: var(--spacing-24);
}

.hizmet-cta {
	margin: var(--spacing-24) 0 0;
}

.hizmet-bolum {
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap);
}

.hizmet-bolum-gri {
	background: var(--color-stone);
}

.bolum-baslik {
	font-size: var(--text-heading);
	font-weight: var(--font-weight-bold);
	color: var(--color-navy);
	margin: 0 0 var(--spacing-24);
}

.hizmet-neden {
	max-width: 720px;
}

.hizmet-neden-metin {
	color: var(--color-slate);
	font-size: var(--text-body-lg);
	margin: 0;
}

/* --- Villa ana sayfası (Adım 5, 2026-10-15) ---
   Üç küme (kabuk / iç mekân / tesisat) tek sütun; masaüstünde üç kolon.
   Küme başlıkları h3 ama görsel ağırlığı bölüm başlığından (h2) küçüktür. */

.kume-izgara {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-32);
}

.kume-baslik {
	font-size: var(--text-body-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-navy);
	margin: 0 0 var(--spacing-16);
}

/* Küme/süreç altı bağlam notu (villa, apartman, anasayfa süreç bölümü).
   2026-10-16 kullanıcı kararı: not tam kapsayıcı genişliğinde akar —
   ikinci satıra düşmeden sayfa genişliği bitirilir (720px sınırı YOK). */
.kume-not {
	color: var(--color-slate);
	font-size: var(--text-body-lg);
	margin: var(--spacing-24) 0 0;
}

/* Buton satırı (Projeler · Öncesi & Sonrası · Bize Ulaşın …) — villa, anasayfa */
.baglanti-satiri {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-16);
	margin: var(--spacing-24) 0 0;
}

@media (min-width: 1024px) {
	.kume-izgara {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--spacing-48);
	}
}

/* Madde listesi (işaretli) */
.madde-listesi {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-12);
}

.madde {
	position: relative;
	padding-left: var(--spacing-24);
	color: var(--color-navy);
}

.madde::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-coral);
}

/* Numaralı süreç */
.surec-listesi {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-24);
}

@media (min-width: 640px) {
	.surec-listesi {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.surec-listesi {
		grid-template-columns: repeat(5, 1fr);
	}
}

.surec-no {
	display: block;
	font-size: var(--text-subheading);
	font-weight: var(--font-weight-bold);
	color: var(--color-coral);
	margin-bottom: var(--spacing-8);
}

.surec-baslik {
	font-size: var(--text-body-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-navy);
	margin: 0 0 var(--spacing-8);
}

.surec-aciklama {
	font-size: var(--text-body);
	color: var(--color-slate);
	margin: 0;
}

/* SSS */
.sss-listesi {
	margin: 0;
}

.sss-madde {
	padding: var(--spacing-16) 0;
	border-top: 1px solid var(--color-stone);
}

.sss-madde:first-child {
	border-top: none;
	padding-top: 0;
}

.sss-soru {
	font-size: var(--text-body-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-navy);
	margin: 0 0 var(--spacing-8);
}

.sss-cevap {
	color: var(--color-slate);
	margin: 0;
}

/* /sss/ sayfası — hizmet bazlı soru grupları (2026-10-14, mimari Adım 4).
   Sorular hizmet verisinden üretilir (inc/hizmetler.php → faq); gruplar ince
   çizgiyle ayrılır, grup başlığı ilgili hizmet sayfasına bağlanır. */
.sss-grup + .sss-grup {
	margin-top: var(--spacing-48);
	padding-top: var(--spacing-48);
	border-top: 1px solid var(--color-stone);
}

.sss-grup-baslik {
	margin-bottom: var(--spacing-8);
}

.sss-grup-baslik a {
	color: var(--color-navy);
}

.sss-grup-baslik a:hover,
.sss-grup-link a:hover {
	color: var(--color-coral);
}

.sss-grup-link {
	margin: var(--spacing-16) 0 0;
	font-weight: var(--font-weight-semibold);
}

.sss-grup-link a {
	color: var(--color-coral);
}

.sss-cta-metin {
	color: var(--color-slate);
	margin: 0 0 var(--spacing-24);
}

/* İlgili yazılar LİSTESİ — 2026-10-12 kullanıcı kararı: her bağlantı 51px
   yüksekliğinde bir satır, SOLDA yazının öne çıkan görseli (70x39).
   Satır yüksekliğini değiştirmek için TEK yer: .ilgili-yazi-baglanti height.
   (Yukarıdaki 51px = 6px üst boşluk + 39px görsel + 6px alt boşluk.) */
.ilgili-yazi-listesi {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.ilgili-yazi-baglanti {
	display: flex;
	align-items: center;
	gap: var(--spacing-12);
	height: 51px;
	padding: 6px 8px;
	background: var(--color-paper);
	border-radius: var(--radius-cards);
	text-decoration: none;
}

/* ⚠️ Görselde genişlik VE yükseklik BİRLİKTE verilir: WordPress <img>'e
   width/height özniteliği yazar ve tek başına width verilirse yükseklik
   öznitelikteki değerde kalır (2026-10-12 dersi). */
.ilgili-yazi-gorsel {
	width: 70px;
	height: 39px;
	object-fit: cover;
	border-radius: 6px;
	flex: none;
	margin: 0;
}

.ilgili-yazi-ad {
	font-weight: var(--font-weight-semibold);
	color: var(--color-navy);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ilgili-yazi-baglanti:hover .ilgili-yazi-ad {
	color: var(--color-coral);
}

.ilgili-yazi-tarih {
	margin-left: auto;
	flex: none;
	font-size: var(--text-caption);
	color: var(--color-slate);
}

/* Telefonda: tarih gizlenir, başlık en fazla 2 satır (satır yine ~51px). */
@media (max-width: 640px) {
	.ilgili-yazi-baglanti {
		height: auto;
		min-height: 51px;
	}

	.ilgili-yazi-tarih {
		display: none;
	}

	.ilgili-yazi-ad {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

/* ============================================================
   Hizmet sayfası — "İlgili yazılar" bandı (2026-10-09 kullanıcı kararı)
   "Çalışma süreci" ile "Sık sorulan sorular" arasında DAR, lacivert bir
   bant; soldan sağa kayar ve aynı anda TEK yazı görünür (başlık + kısa
   özet + bağlantı). Yazı yoksa bant hiç basılmaz (şablonda koşul).
   JS YOKSA: yazılar alt alta sıralanır, oklar/sayaç gizli kalır.
   ============================================================ */
.ilgili-bant {
	background: var(--color-navy);
	color: var(--color-paper);
	padding-top: var(--spacing-48);
	padding-bottom: var(--spacing-48);
}

.ilgili-bant-baslik {
	font-size: var(--text-subheading);
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
	color: var(--color-paper);
	margin: 0 0 var(--spacing-8);
	max-width: 820px;
}

.ilgili-bant-baslik a {
	color: var(--color-paper);
}

.ilgili-bant-baslik a:hover {
	color: var(--color-coral);
}

.ilgili-bant-ozet {
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 var(--spacing-12);
	max-width: 820px;
}

.ilgili-bant-alt {
	margin: 0;
}

.ilgili-bant-link {
	color: var(--color-coral);
	font-weight: var(--font-weight-semibold);
}

/* JS yokken: yazılar alt alta, aralarında boşluk. */
.ilgili-bant:not(.is-bant) .ilgili-bant-kart + .ilgili-bant-kart {
	margin-top: var(--spacing-32);
}

/* Oklar ve sayaç yalnızca JS çalışırken anlamlıdır → varsayılan gizli. */
.ilgili-bant-kontroller {
	display: none;
	align-items: center;
	gap: var(--spacing-16);
	margin-top: var(--spacing-24);
}

.ilgili-bant-ok {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: transparent;
	color: var(--color-paper);
	cursor: pointer;
	padding: 0;
}

.ilgili-bant-ok:hover,
.ilgili-bant-ok:focus-visible {
	border-color: var(--color-coral);
	color: var(--color-coral);
}

.ilgili-bant-ok svg {
	width: 20px;
	height: 20px;
}

.ilgili-bant-sayac {
	margin: 0;
	font-size: var(--text-caption);
	color: rgba(255, 255, 255, 0.7);
	font-variant-numeric: tabular-nums;
	min-width: 3.5em;
	text-align: center;
}

/* Kanıtlanan (JS'li) durum: tek kartlık sürgü penceresi. */
.ilgili-bant.is-bant .ilgili-bant-pencere {
	overflow: hidden;
}

.ilgili-bant.is-bant .ilgili-bant-yorunge {
	display: flex;
	align-items: stretch;
	transition: transform 0.45s ease;
}

.ilgili-bant.is-bant .ilgili-bant-kart {
	flex: 0 0 100%;
	min-width: 100%;
}

/* Görünmeyen kart `visibility: hidden` ile gizlenir → içindeki bağlantılar
   TAB sırasından ve ekran okuyucudan çıkar (yanlış yazıya gitmek olmaz). */
.ilgili-bant.is-bant .ilgili-bant-kart[aria-hidden="true"] {
	visibility: hidden;
}

.ilgili-bant.is-bant .ilgili-bant-kontroller {
	display: flex;
	justify-content: flex-end;
}

@media (prefers-reduced-motion: reduce) {
	.ilgili-bant.is-bant .ilgili-bant-yorunge {
		transition: none;
	}
}

/* ============================================================
   Projeler — galeri (page-projeler.php) + detay (single-proje.php)
   Gölge yok, mercan yalnızca bağlantı/CTA vurgusu (DESIGN.md).
   ============================================================ */

.projeler-sayfasi,
.proje-tek {
	padding-bottom: var(--spacing-64);
}

/* Süzgeç çubuğu: JS yok — her süzgeç bir bağlantı (/projeler/?tur=villa). */
.suzgec {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-12);
	margin-bottom: var(--spacing-32);
}

.suzgec-satir {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--spacing-8) var(--spacing-16);
}

.suzgec-baslik {
	font-size: var(--text-caption);
	font-weight: var(--font-weight-semibold);
	color: var(--color-slate);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.suzgec-linkler {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8);
}

.suzgec-link {
	padding: var(--spacing-8) var(--spacing-12);
	border-radius: var(--radius-toggle);
	background: var(--color-stone);
	color: var(--color-navy);
}

.suzgec-link:hover {
	color: var(--color-coral);
}

.suzgec-link.is-active {
	background: var(--color-navy);
	color: var(--color-paper);
}

.proje-izgara {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-24);
}

@media (min-width: 768px) {
	.proje-izgara {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.proje-izgara {
		grid-template-columns: repeat(3, 1fr);
	}
}

.proje-kart {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

/* Kapak kutusu: fotoğraf gelmeden de aynı yükseklikte kalır (ızgara kaymaz). */
.proje-kapak {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-cards);
	background: var(--color-stone);
}

.proje-kapak img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.proje-kapak-yok {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--color-slate);
	font-size: var(--text-caption);
}

.proje-kart-baslik {
	font-size: var(--text-subheading);
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
	margin: 0;
}

.proje-kart-baslik a {
	color: var(--color-navy);
}

.proje-kart-baslik a:hover {
	color: var(--color-coral);
}

.proje-kart-meta {
	font-size: var(--text-caption);
	color: var(--color-slate);
	margin: 0;
}

.proje-kart-ozet {
	color: var(--color-slate);
	margin: 0;
}

/* --- Proje detayı --- */

.proje-meta {
	color: var(--color-slate);
	font-size: var(--text-body-lg);
	margin: 0;
}

.proje-kapak-figure {
	margin: 0 0 var(--spacing-32);
}

.proje-kapak-figure img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-images);
}

/* Okuma genişliği TÜM sayfalarla aynı varsayılan (2026-09-29 kararı).
   Genişliği değiştirmek için tek yer: :root → --content-max-width. */
.proje-icerik {
	max-width: var(--content-max-width);
	margin-bottom: var(--spacing-48);
}

.proje-galeri {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-16);
	margin-bottom: var(--spacing-48);
}

@media (min-width: 640px) {
	.proje-galeri {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.proje-galeri {
		grid-template-columns: repeat(3, 1fr);
	}
}

.proje-galeri-oge {
	margin: 0;
}

.proje-galeri-oge img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-images);
}

.geri-baglanti {
	margin-top: var(--spacing-32);
	font-weight: var(--font-weight-semibold);
}

/* --- Blog yazısı: SSS akordiyonu (details/summary, JS'siz) --- */
.entry-content details.sss-kapali {
	border-top: 1px solid var(--color-stone);
	padding: var(--spacing-16) 0;
}

.entry-content details.sss-kapali:first-of-type {
	border-top: none;
	padding-top: 0;
}

.entry-content details.sss-kapali summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--spacing-12);
	font-size: var(--text-body-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-navy);
}

.entry-content details.sss-kapali summary::-webkit-details-marker {
	display: none;
}

.entry-content details.sss-kapali summary::after {
	content: "+";
	flex: 0 0 auto;
	font-weight: var(--font-weight-bold);
	color: var(--color-navy);
	line-height: 1.2;
}

.entry-content details.sss-kapali[open] summary::after {
	content: "\2212";
}

.entry-content details.sss-kapali summary:hover,
.entry-content details.sss-kapali summary:hover::after {
	color: var(--color-coral);
}

.entry-content details.sss-kapali[open] summary {
	margin-bottom: var(--spacing-8);
}

/* --- Blog yazısı: tablolar (2026-09-29 kararı: tablo serbest) --- */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--spacing-16);
	font-size: var(--text-body);
}

.entry-content th,
.entry-content td {
	text-align: left;
	padding: var(--spacing-8) var(--spacing-12);
	border-bottom: 1px solid rgba(15, 46, 75, 0.12);
	color: var(--color-navy);
}

.entry-content th {
	font-weight: var(--font-weight-semibold);
	background: var(--color-stone);
}

@media (max-width: 600px) {
	.entry-content table {
		display: block;
		overflow-x: auto;
	}
}

/* --- İçerik kartları: poster görsellerinin metin (taranabilir) hâli --- */

.icerik-kartlar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-16);
	margin: var(--spacing-24) 0;
}

.icerik-kartlar-6 {
	grid-template-columns: repeat(6, 1fr);
}

.icerik-kart {
	background: var(--color-stone);
	border: 1px solid rgba(15, 46, 75, 0.12);
	border-radius: 12px;
	padding: var(--spacing-16) 18px;
}

.icerik-kart-baslik {
	font-weight: var(--font-weight-bold);
	color: var(--color-navy);
	font-size: 16px;
}

.icerik-kart-alt {
	color: var(--color-slate);
	font-size: 13px;
	font-weight: var(--font-weight-semibold);
	margin-top: 2px;
}

.icerik-kart ul {
	margin: var(--spacing-12) 0 0;
	padding: 0;
	list-style: none;
}

.icerik-kart li {
	position: relative;
	padding-left: 16px;
	margin: 8px 0;
	font-size: 14px;
	line-height: 1.45;
}

.icerik-kart li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 7px;
	height: 7px;
	background: var(--color-coral);
}

.icerik-kart li.icerik-kart-tipik {
	padding-left: 0;
	margin-top: var(--spacing-12);
	font-style: italic;
	color: var(--color-slate);
}

.icerik-kart li.icerik-kart-tipik::before {
	display: none;
}

@media (max-width: 900px) {
	.icerik-kartlar,
	.icerik-kartlar-6 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.icerik-kartlar,
	.icerik-kartlar-6 {
		grid-template-columns: 1fr;
	}
}

/* --- Yazı içindekiler: "Bu sayfada" kutusu (sağ kolon) ---
   2026-10-14 kullanıcı kararı (Piri Red blog yazısındaki "On this page" örneği):
   kutu YALNIZCA blog yazılarında; liste H2 + H3'ten kurulur (JS doldurur);
   kaydırdıkça mercan gösterge aktif başlığın yanına kayar ve liste kendi
   içinde kayar. Metin kolonu genişliği DEĞİŞMEZ (normal sayfada 1140px
   kapsayıcı − 48px iç boşluk = 1092px metin; burada 1424px kapsayıcı − 48px
   boşluk − 236px kutu − 48px ara boşluk = yine 1092px).
   Gizleme kararı (mobil): düz CSS, JS'e bağlı değil.
   İlgili JS: assets/js/icerik-haritasi.js (functions.php yalnızca is_single'da yükler). */
.single-post-main .container-narrow {
	max-width: calc(var(--content-max-width) + 284px);
}

.yazi-duzeni {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 236px;
	gap: 0 var(--spacing-48);
	align-items: start;
}

.yazi-ana {
	min-width: 0;
}

.icerik-haritasi {
	position: sticky;
	/* sticky header (88px) + 24px boşluk; header yüksekliği değişirse burası güncellenir. */
	top: 112px;
	max-height: calc(100vh - 136px);
	color: var(--color-navy);
}

.icerik-haritasi[hidden] {
	display: none;
}

/* WordPress yönetim çubuğu açıkken header 32px aşağı kayar (782px altında 46px) */
body.admin-bar .icerik-haritasi {
	top: 144px;
}

@media screen and (max-width: 781px) {
	body.admin-bar .icerik-haritasi {
		top: 158px;
	}
}

.icerik-haritasi__baslik {
	font-size: var(--text-caption);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-slate);
	margin: 0 0 var(--spacing-12);
}

/* Panel: liste uzun olduğunda kutunun kendisi kayar, sayfa aşağı taşmaz. */
.icerik-haritasi__panel {
	position: relative;
	max-height: calc(100vh - 200px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.icerik-haritasi__liste {
	list-style: none;
	margin: 0;
	padding: 0 0 0 15px;
	border-left: 1px solid rgba(15, 46, 75, 0.14);
}

.icerik-haritasi__oge {
	margin: 0;
}

.icerik-haritasi__baglanti {
	display: block;
	padding: 6px 0;
	font-size: 13px;
	line-height: 1.35;
	color: rgba(15, 46, 75, 0.72);
	text-decoration: none;
	transition: color 0.18s ease;
}

.icerik-haritasi__oge--h3 .icerik-haritasi__baglanti {
	padding-left: 12px;
	font-size: 12px;
}

.icerik-haritasi__baglanti:hover {
	color: var(--color-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.icerik-haritasi__baglanti.is-active {
	color: var(--color-navy);
	font-weight: var(--font-weight-bold);
}

/* Aktif başlığın yanındaki gösterge: transform + height geçişiyle kayar. */
.icerik-haritasi__gosterge {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 3px;
	height: 24px;
	border-radius: 99px;
	background: var(--color-coral);
	transform: translateY(0);
	transition: transform 0.22s ease, height 0.22s ease;
	pointer-events: none;
}

/* Dar ekran: kutu gizlenir, metin tek kolona ve eski genişliğine döner.
   (2026-10-14 kullanıcı kararı: "şimdilik gizlensin") */
@media screen and (max-width: 1099px) {
	.single-post-main .container-narrow {
		max-width: var(--content-max-width);
	}

	.yazi-duzeni {
		display: block;
	}

	.icerik-haritasi {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.icerik-haritasi__gosterge,
	.icerik-haritasi__baglanti {
		transition: none;
	}
}

/* ---------------------------------------------------------------
   Hukuki sayfalar — /kvkk/ ve /gizlilik/ (mimari Adım 4, 2026-10-15)
   Uzun okuma metni: satır uzunluğu sınırlanır, başlık araları açılır.
   --------------------------------------------------------------- */
.hukuki-icerik,
.hukuki-sayfasi .sayfa-basi {
	max-width: 900px;
}

.hukuki-icerik p {
	margin: 0 0 var(--spacing-16);
	line-height: 1.7;
}

.hukuki-icerik ul {
	margin: 0 0 var(--spacing-16);
	padding-left: var(--spacing-24);
}

.hukuki-icerik li {
	margin-bottom: var(--spacing-8);
	line-height: 1.7;
}

.hukuki-icerik .bolum-baslik {
	margin-top: var(--spacing-32);
}

.hukuki-tarih {
	color: var(--color-slate);
	font-size: var(--text-caption);
	margin-top: var(--spacing-32);
}

.footer-hukuki {
	display: flex;
	gap: var(--spacing-16);
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--text-caption);
}

.footer-hukuki a {
	color: var(--color-stone);
}

/* 2026-10-15 (kullanıcı kararı): footer'ın "Hizmetler" sütunu 10 hizmet
   bağlantısı yerine ÜÇ girişe indi — Villa Tadilatı · Apartman Bakımı ·
   Villa, Apartman, Tadilat Hizmetlerimiz (→ /hizmetler/). Bu not aynı zamanda
   önbellek tetikleyicisidir: bu dosyanın zaman damgası değişince
   functions.php → da_yapi_maybe_purge_page_cache() LiteSpeed sayfa önbelleğini
   bir kez temizler; yoksa ziyaretçi eski footer'lı HTML görür. */

/* --- Mimari Adım 6 (2026-10-15): header CTA butonu + anasayfa SSS akordeonu --- */

/* Header'daki sabit "Ücretsiz Keşif" butonu (bütün sayfalarda görünür). */
.header-cta {
	display: inline-block;
	background: var(--color-navy);
	color: #FFFFFF;
	font-size: var(--text-body);
	font-weight: var(--font-weight-semibold);
	line-height: 1.2;
	padding: var(--spacing-8) var(--spacing-16);
	border-radius: var(--radius-buttons);
	white-space: nowrap;
}

.header-cta:hover {
	filter: brightness(1.2);
}

/* Anasayfa SSS akordeonu — blog yazısındaki .entry-content sürümüyle aynı dil
   (JS yok, <details>/<summary>). Blog kuralı .entry-content'e bağlı olduğu için
   burada ayrıca tanımlanır; birini değiştirirken diğerine de bak. */
.anasayfa-sss details.sss-kapali {
	border-top: 1px solid var(--color-stone);
	padding: var(--spacing-16) 0;
	max-width: 900px;
}

.anasayfa-sss details.sss-kapali:first-of-type {
	border-top: none;
	padding-top: 0;
}

.anasayfa-sss details.sss-kapali summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--spacing-12);
	font-size: var(--text-body-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-navy);
}

.anasayfa-sss details.sss-kapali summary::-webkit-details-marker {
	display: none;
}

.anasayfa-sss details.sss-kapali summary::after {
	content: "+";
	flex: 0 0 auto;
	font-weight: var(--font-weight-bold);
	color: var(--color-navy);
	line-height: 1.2;
}

.anasayfa-sss details.sss-kapali[open] summary::after {
	content: "\2212";
}

.anasayfa-sss details.sss-kapali summary:hover,
.anasayfa-sss details.sss-kapali summary:hover::after {
	color: var(--color-coral);
}

.anasayfa-sss details.sss-kapali[open] summary {
	margin-bottom: var(--spacing-8);
}

.anasayfa-sss-cevap {
	color: var(--color-slate);
	margin: 0;
	max-width: 720px;
}

@media (max-width: 640px) {
	.header-cta {
		font-size: 15px;
		padding: var(--spacing-8) var(--spacing-12);
	}
}

/* --- 404 sayfası (2026-10-15): arama kutusu + sık kullanılan sayfalar --- */

.arama-formu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-12);
	margin: var(--spacing-24) 0 var(--spacing-48);
	max-width: 640px;
}

.arama-alani {
	flex: 1 1 240px;
	font-family: inherit;
	font-size: var(--text-body);
	color: var(--color-navy);
	background: #FFFFFF;
	border: 1px solid rgba(15, 46, 75, 0.2);
	border-radius: var(--radius-buttons);
	padding: var(--spacing-12) var(--spacing-16);
}

.arama-alani:focus {
	outline: 2px solid var(--color-coral);
	outline-offset: 1px;
}

.sayfa-404 .arama-formu + .bolum-baslik {
	margin-top: 0;
}

/* İletişim satırı, listenin hemen altına yapışmasın (2026-10-15 önizlemede görüldü). */
.sayfa-404 .sss-cta-metin {
	margin-top: var(--spacing-32);
}

/* --- Blog yazısı: ayraç (hr) ve kod bloğu (pre/code) — 2026-10-15 ---
   Bu ikisi 2026-10-15'e kadar biçimsizdi (blog-yaz akışında "kullanma" notu
   vardı). Artık yazılarda serbestçe kullanılabilir. */

.entry-content hr {
	border: 0;
	border-top: 1px solid var(--color-stone);
	margin: calc(var(--line-height-body) * 1.5) 0;
}

.entry-content pre {
	background: var(--color-stone);
	color: var(--color-navy);
	border-radius: var(--radius-images);
	padding: var(--spacing-16);
	margin: var(--line-height-body) 0;
	overflow-x: auto;
	font-size: 15px;
	line-height: 1.5;
}

.entry-content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95em;
	background: var(--color-stone);
	color: var(--color-navy);
	padding: 2px 6px;
	border-radius: var(--radius-images);
}

/* Kod bloğunun içindeki kod satır içi görünmesin (çift zemin olmasın). */
.entry-content pre code {
	background: none;
	padding: 0;
	font-size: inherit;
}