/*
 * Melsa Çatı — proje bileşen stilleri.
 *
 * Talim token'larına (var(--color-…)) bağlanır; Tailwind derlemesi yoktur.
 * Bölümler: marka kabuğu → ana sayfa → içerik sayfası → tipografi/görsel
 * → sabit iletişim. Sınıflar yalnızca bu projenin şablonlarında kullanılır.
 */

/* ==========================================================================
   1. Marka kabuğu: logo, başlık, footer
   ========================================================================== */

.custom-logo-link {
	display: block;
	line-height: 0;
}

.custom-logo {
	display: block;
	height: 2rem;
	width: auto;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 80;
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 32px));
}

.melsa-header-phone {
	align-items: center;
	border: 0;
	border-radius: 999px;
	color: var(--color-ink);
	display: inline-flex;
	font-weight: 700;
	gap: 0.5rem;
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.5rem;
	text-decoration: none;
	white-space: nowrap;
}

.melsa-header-phone:hover,
.melsa-header-phone:focus {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Mobilde başlıktaki telefon gizlenir: logo + telefon + menü butonu 390 px
   satıra sığmıyor ve eylemler ekran dışına taşıyordu. Arama eylemi zaten
   ekranın altındaki sabit çubukta duruyor, bilgi kaybı yok. */
@media (max-width: 47.99em) {
	.melsa-header-phone {
		display: none;
	}

	/* Mobil başlık düzeni açıkça kurulur: dar ekranda logo satırı taşırıp
	   menü butonunu görünür alanın dışına itiyordu. Marka küçülebilir
	   (min-width:0 olmadan flex öğesi içeriğinden küçülmez), eylemler ise
	   sabit genişlikte ve her koşulda sağa yaslı kalır. */
	.site-header .container-site {
		align-items: center;
		display: flex;
		flex-wrap: nowrap;
		gap: 0.75rem;
		justify-content: space-between;
		max-width: 100%;
	}

	.site-branding {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
	}

	.custom-logo {
		height: 1.875rem;
		max-width: 100%;
	}

	.header-actions {
		flex: 0 0 auto;
		margin-inline-start: auto;
	}

	.nav-toggle {
		display: inline-flex;
	}
}

/* 1024px altında başlıkta numara yazılmaz; ikon buton olarak durur.
   tel: bağlantısı ve ekran okuyucu metni yerinde kalır. */
.melsa-header-phone__number {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* Masaüstü başlık düzeni.
   Parent'ın DOM sırası: marka → eylemler (telefon) → menü. Bu sırayla
   space-between uygulanınca telefon ortada asılı kalıyordu. Görsel sıra
   flex order ile kurulur: solda logo, sağda menü ve onun devamında birincil
   eylem olarak telefon. Şablon kopyalanmaz. */
@media (min-width: 48em) {
	.site-header .container-site {
		gap: 1.25rem;
		padding-block: 0.75rem;
	}

	.site-branding {
		margin-inline-end: auto;
		order: 1;
	}

	.site-nav {
		order: 2;
	}

	.header-actions {
		order: 3;
	}

	.custom-logo {
		height: 2.125rem;
	}

	.melsa-header-phone {
		display: inline-flex;
	}

	.menu {
		gap: 0.125rem;
	}

	.menu > li > a {
		font-size: 0.9375rem;
		font-weight: 600;
	}

	/* Bulunulan sayfa menüde belli olsun. */
	.menu .current-menu-item > a,
	.menu .current_page_item > a,
	.menu .current-menu-ancestor > a,
	.menu .current_page_ancestor > a {
		color: var(--color-primary);
	}

	/* Tablette numara sığmıyor; ikon başıboş bir glif gibi durmasın diye
	   dolu daire butona dönüşür. */
	.melsa-header-phone {
		background: var(--color-primary);
		border-radius: 999px;
		color: #fff;
		height: 2.5rem;
		width: 2.5rem;
	}

	.melsa-header-phone:hover,
	.melsa-header-phone:focus {
		background: var(--color-primary-hover);
		color: #fff;
	}
}

@media (min-width: 64em) {
	.site-header .container-site {
		gap: 2rem;
		padding-block: 0.875rem;
	}

	.custom-logo {
		height: 2.375rem;
	}

	.menu > li > a {
		font-size: 1rem;
	}

	/* Telefon, başlığın birincil eylemi: numaralı dolu buton olarak durur. */
	.melsa-header-phone {
		background: var(--color-primary);
		border: 1px solid var(--color-primary);
		border-radius: 999px;
		color: #fff;
		height: auto;
		padding: 0.5625rem 1.125rem;
		width: auto;
	}

	.melsa-header-phone:hover,
	.melsa-header-phone:focus {
		background: var(--color-primary-hover);
		border-color: var(--color-primary-hover);
		color: #fff;
	}

	.melsa-header-phone__number {
		clip: auto;
		clip-path: none;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		width: auto;
	}
}

/* Footer içeriği tek sütun akışı: kolonlar, telif satırı, en altta kredi. */
.site-footer .container-site {
	display: flex;
	flex-direction: column;
}

.melsa-footer-cols {
	order: 1;
	border-bottom: 1px solid var(--color-line);
	display: grid;
	gap: 2rem;
	margin-bottom: 2rem;
	padding-bottom: 2.5rem;
}

@media (min-width: 48em) {
	.melsa-footer-cols {
		grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
	}
}

.melsa-footer-brand {
	font-size: 1.25rem;
	font-weight: 700;
}

.melsa-footer-heading {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.melsa-footer-text {
	color: var(--color-muted);
	font-size: 0.9375rem;
	margin-top: 0.75rem;
}

.melsa-footer-list {
	display: grid;
	gap: 0.5rem;
	list-style: none;
	margin: 0.875rem 0 0;
	padding: 0;
}

.melsa-footer-list a {
	color: var(--color-muted);
	text-decoration: none;
}

.melsa-footer-list a:hover,
.melsa-footer-list a:focus {
	color: var(--color-primary);
	text-decoration: underline;
}

.melsa-footer-phone {
	font-size: 1.375rem;
	font-weight: 700;
	margin-top: 0.75rem;
}

.melsa-footer-phone a {
	color: var(--color-primary);
	text-decoration: none;
}

.melsa-footer-phone a:hover,
.melsa-footer-phone a:focus {
	text-decoration: underline;
}

.site-footer .footer-alt {
	order: 2;
}

.melsa-footer-credit {
	color: var(--color-muted);
	font-size: 0.8125rem;
	margin-top: 1rem;
	order: 3;
	text-align: center;
}

.melsa-footer-credit a {
	color: var(--color-muted);
	text-decoration: underline;
}

.melsa-footer-credit a:hover,
.melsa-footer-credit a:focus {
	color: var(--color-primary);
}

/* ==========================================================================
   2. Ana sayfa
   ========================================================================== */

.melsa-hero__grid {
	align-items: center;
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 64em) {
	.melsa-hero__grid {
		grid-template-columns: 1.05fr 0.95fr;
		gap: 4rem;
	}
}

.melsa-hero__media {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	box-shadow: 0 24px 48px -24px rgba(31, 38, 43, 0.35);
	overflow: hidden;
	padding: 0.5rem;
	background: var(--color-surface);
}

.melsa-hero__media img {
	aspect-ratio: 16 / 9;
	border-radius: calc(var(--radius-card) - 0.125rem);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.melsa-hero__bullets {
	display: grid;
	gap: 0.625rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.melsa-hero__bullets li {
	align-items: center;
	color: var(--color-muted);
	display: flex;
	font-size: 0.9375rem;
	font-weight: 500;
	gap: 0.625rem;
}

.melsa-hero__bullets li::before {
	background: var(--color-primary);
	border-radius: 999px;
	color: #fff;
	content: "✓";
	flex: 0 0 auto;
	font-size: 0.6875rem;
	font-weight: 800;
	height: 1.125rem;
	line-height: 1.125rem;
	text-align: center;
	width: 1.125rem;
}

.melsa-service-card {
	color: inherit;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.melsa-service-card:hover,
.melsa-service-card:focus {
	border-color: var(--color-primary);
	box-shadow: 0 16px 32px -20px rgba(31, 38, 43, 0.35);
	transform: translateY(-2px);
}

.melsa-service-card__media {
	border-bottom: 1px solid var(--color-line);
	display: block;
	overflow: hidden;
}

.melsa-service-card__media img {
	aspect-ratio: 8 / 5;
	display: block;
	height: auto;
	object-fit: cover;
	transition: transform 240ms ease;
	width: 100%;
}

.melsa-service-card:hover .melsa-service-card__media img {
	transform: scale(1.03);
}

.melsa-service-card__body {
	display: block;
	padding: 1.25rem 1.5rem 1.5rem;
}

.melsa-service-card h3 {
	font-size: 1.125rem;
	font-weight: 600;
}

.melsa-service-card p {
	color: var(--color-muted);
	font-size: 0.9375rem;
	margin-top: 0.5rem;
}

.melsa-service-card .melsa-service-more {
	color: var(--color-primary);
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-top: 0.75rem;
}

.melsa-about__grid {
	align-items: center;
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 64em) {
	.melsa-about__grid {
		grid-template-columns: 0.95fr 1.05fr;
		gap: 4rem;
	}
}

.melsa-about__media {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	overflow: hidden;
	padding: 0.5rem;
}

.melsa-about__media img {
	border-radius: calc(var(--radius-card) - 0.125rem);
	display: block;
	height: auto;
	width: 100%;
}

.melsa-gallery {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, 1fr);
	margin-top: 2.5rem;
}

@media (min-width: 48em) {
	.melsa-gallery {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.25rem;
	}
}

.melsa-gallery__item {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	margin: 0;
	overflow: hidden;
}

.melsa-gallery__item img {
	aspect-ratio: 8 / 5;
	display: block;
	height: auto;
	object-fit: cover;
	transition: transform 220ms ease;
	width: 100%;
}

.melsa-gallery__item:hover img {
	transform: scale(1.04);
}

/* ==========================================================================
   3. İçerik sayfası: başlık bandı, iki kolon, yan sütun
   ========================================================================== */

.melsa-page-head {
	background: var(--color-surface-alt);
	border-bottom: 1px solid var(--color-line);
	padding-block: 2rem 2.25rem;
}

.melsa-page-head .breadcrumbs {
	margin-bottom: 1rem;
}

.melsa-page-title {
	font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.melsa-page-lede {
	color: var(--color-muted);
	font-size: 1.0625rem;
	margin-top: 0.875rem;
	max-width: 46rem;
}

.melsa-trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.melsa-trust-row li {
	align-items: center;
	color: var(--color-ink);
	display: flex;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 0.5rem;
}

.melsa-trust-row li::before {
	background: var(--color-primary);
	border-radius: 999px;
	color: #fff;
	content: "✓";
	flex: 0 0 auto;
	font-size: 0.625rem;
	font-weight: 800;
	height: 1rem;
	line-height: 1rem;
	text-align: center;
	width: 1rem;
}

.melsa-page-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.melsa-page-single {
	margin-inline: auto;
	max-width: 48rem;
}

.melsa-page-grid {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 64em) {
	/* align-items: start DEĞİL: yan sütun satır yüksekliğine yayılmazsa
	   içindeki yapışkan kartın yolculuğu sütunun kendi boyuyla sınırlı kalır
	   ve kart sayfanın ortasında durur. Sütun esnetilince kart, içerik
	   bitene kadar aşağı eşlik eder. */
	.melsa-page-grid {
		align-items: stretch;
		grid-template-columns: minmax(0, 1fr) 21rem;
		gap: 3rem;
	}
}

.melsa-aside {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 64em) {
	/* Yan sütunun tamamı görünür alandan uzun; tümü yapışkan olduğunda alt
	   kısmındaki hizmet bağlantıları hiç ekrana gelmiyordu. Sütun akışta
	   kalır ve satır boyunca uzar; yalnızca teklif kartı yapışır ve içerik
	   bitene kadar kullanıcıya eşlik eder. */
	.melsa-aside {
		display: block;
		position: static;
	}

	.melsa-aside > * + * {
		margin-top: 1.25rem;
	}

	.melsa-quote-card {
		position: sticky;
		top: 6rem;
	}

	.admin-bar .melsa-quote-card {
		top: calc(6rem + var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 32px)));
	}
}

.melsa-quote-card {
	background: var(--color-ink);
	border-radius: var(--radius-card);
	color: #fff;
	padding: 1.5rem;
}

.melsa-quote-card__eyebrow {
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	opacity: 0.75;
	text-transform: uppercase;
}

.melsa-quote-card__title {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.35;
	margin-top: 0.5rem;
}

.melsa-quote-card__text {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.9375rem;
	margin-top: 0.75rem;
}

.melsa-quote-card__phone,
.melsa-quote-card__wa {
	align-items: center;
	border-radius: 0.5rem;
	display: flex;
	font-weight: 700;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 1rem;
	min-height: 3rem;
	text-decoration: none;
}

.melsa-quote-card__phone {
	background: var(--color-primary);
	color: #fff;
	font-size: 1.125rem;
}

.melsa-quote-card__phone:hover,
.melsa-quote-card__phone:focus {
	background: var(--color-primary-hover);
	color: #fff;
}

.melsa-quote-card__wa {
	background: #0f7a41;
	color: #fff;
	font-size: 0.9375rem;
	margin-top: 0.625rem;
}

.melsa-quote-card__wa:hover,
.melsa-quote-card__wa:focus {
	background: #0c6636;
	color: #fff;
}

.melsa-quote-card__note {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.8125rem;
	margin-top: 1rem;
	text-align: center;
}

.melsa-aside-box {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	padding: 1.25rem 1.5rem 1.5rem;
}

.melsa-aside-box__title {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.melsa-aside-list {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.melsa-aside-list li + li {
	border-top: 1px solid var(--color-line);
}

.melsa-aside-list a {
	color: var(--color-ink);
	display: block;
	font-size: 0.9375rem;
	padding: 0.625rem 0;
	text-decoration: none;
}

.melsa-aside-list a:hover,
.melsa-aside-list a:focus {
	color: var(--color-primary);
}

.melsa-aside-box__more {
	margin-top: 1rem;
}

.melsa-aside-box__more a {
	color: var(--color-primary);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

/* Çalışma düzeni şeridi */

.melsa-process {
	background: var(--color-surface-alt);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	margin-top: 3rem;
	padding: 1.75rem;
}

.melsa-process__title {
	font-size: 1.25rem;
	font-weight: 700;
}

.melsa-process__list {
	counter-reset: melsa-step;
	display: grid;
	gap: 1.25rem;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

@media (min-width: 48em) {
	.melsa-process__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem 2rem;
	}
}

.melsa-process__item {
	display: flex;
	gap: 0.875rem;
}

.melsa-process__num {
	background: var(--color-primary);
	border-radius: 999px;
	color: #fff;
	flex: 0 0 auto;
	font-size: 0.875rem;
	font-weight: 800;
	height: 1.75rem;
	line-height: 1.75rem;
	text-align: center;
	width: 1.75rem;
}

.melsa-process__body {
	display: block;
}

.melsa-process__step-title {
	display: block;
	font-weight: 700;
}

.melsa-process__text {
	color: var(--color-muted);
	display: block;
	font-size: 0.9375rem;
	margin-top: 0.25rem;
}

/* İlgili hizmetler */

.melsa-related {
	margin-top: 3rem;
}

.melsa-related__title {
	font-size: 1.25rem;
	font-weight: 700;
}

.melsa-related__grid {
	display: grid;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

@media (min-width: 40em) {
	.melsa-related__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.melsa-related__card {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	color: inherit;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.melsa-related__card:hover,
.melsa-related__card:focus {
	border-color: var(--color-primary);
	box-shadow: 0 14px 28px -20px rgba(31, 38, 43, 0.4);
}

.melsa-related__media {
	border-bottom: 1px solid var(--color-line);
	display: block;
	overflow: hidden;
}

.melsa-related__media img {
	aspect-ratio: 8 / 5;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.melsa-related__body {
	display: block;
	padding: 0.875rem 1.125rem 1.125rem;
}

.melsa-related__name {
	display: block;
	font-weight: 600;
	line-height: 1.35;
}

.melsa-related__more {
	color: var(--color-primary);
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-top: 0.375rem;
}

/* Yazı sonu teklif kartı */

.melsa-post-cta {
	background: var(--color-surface-alt);
	border: 1px solid var(--color-line);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--radius-card);
	margin-top: 2.5rem;
	padding: 1.75rem;
}

.melsa-post-cta__title {
	font-size: 1.25rem;
	font-weight: 700;
}

.melsa-post-cta__text {
	color: var(--color-muted);
	margin-top: 0.75rem;
}

.melsa-post-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

/* ==========================================================================
   4. İçerik tipografisi ve görsel çerçeveleri
   ========================================================================== */

.melsa-article__hero {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	margin: 0 0 2rem;
	overflow: hidden;
	padding: 0.5rem;
}

.melsa-article__hero img {
	aspect-ratio: 16 / 9;
	border-radius: calc(var(--radius-card) - 0.125rem);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Dikey kadrajlı hero: 16:9'a zorlanmaz, kendi oranında ortalanır. */
.melsa-article__hero--portrait img {
	aspect-ratio: 3 / 4;
	margin-inline: auto;
	max-height: 34rem;
	object-fit: cover;
	width: auto;
}

/* İçerik içi görseller: çerçeveli, yumuşak gölgeli, altyazılı */
.entry-content .wp-block-image {
	margin-block: 2rem;
}

.entry-content .wp-block-image img,
.entry-content figure img {
	aspect-ratio: 16 / 9;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	box-shadow: 0 18px 36px -28px rgba(31, 38, 43, 0.55);
	display: block;
	height: auto;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

/* Kaçış yolu: dikey kadrajın gerçekten gerektiği görseller. Editörde
   blok > Gelişmiş > "Ek CSS sınıf(lar)ı" alanına melsa-figure--portrait. */
.entry-content .melsa-figure--portrait img {
	aspect-ratio: 3 / 4;
	margin-inline: auto;
	max-height: 32rem;
	width: auto;
}

.entry-content figcaption {
	border-left: 3px solid var(--color-primary);
	color: var(--color-muted);
	font-size: 0.875rem;
	margin-top: 0.75rem;
	padding-left: 0.75rem;
	text-align: left;
}

/* Başlıklar: kırmızı aksan çizgisi */
.entry-content h2 {
	border-top: 1px solid var(--color-line);
	padding-top: 1.75rem;
	position: relative;
}

.entry-content h2::before {
	background: var(--color-line);
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	top: -1px;
	width: 2.5rem;
}

/* SSS soruları: gövde metninden ayrışan hafif blok. */
.entry-content h3 {
	background: var(--color-surface-alt);
	border-left: 3px solid var(--color-primary);
	border-radius: var(--radius-card);
	color: var(--color-ink);
	font-size: 1.0625rem;
	margin-top: 1.5em;
	padding: 0.625rem 0.875rem;
}

/* Listeler: kırmızı işaretli, nefes alan satırlar */
.entry-content ul {
	list-style: none;
	padding-left: 0;
}

.entry-content ul li {
	padding-left: 1.75rem;
	position: relative;
}

.entry-content ul li::before {
	border: 2px solid var(--color-muted);
	border-radius: 999px;
	content: "";
	height: 0.5rem;
	left: 0.375rem;
	position: absolute;
	top: 0.625rem;
	width: 0.5rem;
}

.entry-content ul li + li {
	margin-top: 0.625em;
}

.entry-content ol {
	padding-left: 1.25rem;
}

.entry-content ol li::marker {
	color: var(--color-primary);
	font-weight: 700;
}

.entry-content h3 + p {
	color: var(--color-muted);
}

.entry-content a {
	color: var(--color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.entry-content a:hover,
.entry-content a:focus {
	color: var(--color-primary-hover);
}

.entry-content table {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.entry-content th {
	background: var(--color-surface-alt);
}

/* Hizmet rehberi: grup listeleri kart ızgarası olarak */

.melsa-hub .melsa-page-single {
	max-width: 68rem;
}

.melsa-hub .entry-content ul {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.melsa-hub .entry-content ul li {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: 0.5rem;
	margin: 0;
	padding: 0.75rem 1rem 0.75rem 2rem;
	transition: border-color 140ms ease;
}

.melsa-hub .entry-content ul li:hover {
	border-color: var(--color-primary);
}

.melsa-hub .entry-content ul li::before {
	left: 0.875rem;
	top: 1.125rem;
}

.melsa-hub .entry-content ul li + li {
	margin-top: 0;
}

.melsa-hub .entry-content ul li a {
	color: var(--color-ink);
	font-weight: 500;
	text-decoration: none;
}

.melsa-hub .entry-content ul li a:hover,
.melsa-hub .entry-content ul li a:focus {
	color: var(--color-primary);
}

/* Keşif talep formu (iletişim sayfası) */

.melsa-form-section {
	background: var(--color-surface-alt);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	margin-top: 3rem;
	padding: 1.75rem;
}

.melsa-form-section__title {
	font-size: 1.375rem;
	font-weight: 700;
}

.melsa-form-section__lede {
	color: var(--color-muted);
	margin-top: 0.625rem;
}

/* JS yoksa form gizli kalır; telefon satırı görünür. */
.melsa-form {
	display: none;
	margin-top: 1.5rem;
}

.melsa-form.is-ready {
	display: block;
}

.melsa-form__row {
	display: grid;
	gap: 1rem;
}

@media (min-width: 40em) {
	.melsa-form__row {
		grid-template-columns: repeat(2, 1fr);
	}

	.melsa-form__row .form-field + .form-field {
		margin-top: 0;
	}
}

.melsa-form__submit {
	margin-top: 1.25rem;
}

/* Hata metni kum rengi zemin üzerinde duruyor; parent'ın --color-danger
   tonu orada 4.4:1 kalıyor (AA eşiği 4.5). Marka kırmızısı aynı zeminde
   5.89:1 verdiği için hata rengi olarak o kullanılır. */
.melsa-form__status:not(:empty) {
	color: var(--color-primary-hover);
	font-size: 0.875rem;
	font-weight: 600;
	margin-top: 0.75rem;
}

.melsa-form__note {
	color: var(--color-muted);
	font-size: 0.8125rem;
	margin-top: 0.75rem;
}

.melsa-form-section__phone {
	border-top: 1px solid var(--color-line);
	margin-top: 1.5rem;
	padding-top: 1.25rem;
}

.melsa-form-section__phone a {
	color: var(--color-primary);
	font-size: 1.25rem;
	font-weight: 700;
	text-decoration: none;
}

.melsa-form-section__phone a:hover,
.melsa-form-section__phone a:focus {
	text-decoration: underline;
}

/* Projeler sayfası saha galerisi */

.melsa-showcase {
	margin-top: 3rem;
}

.melsa-showcase__title {
	font-size: 1.375rem;
	font-weight: 700;
}

.melsa-showcase__lede {
	color: var(--color-muted);
	margin-top: 0.625rem;
}

.melsa-showcase__grid {
	display: grid;
	gap: 0.875rem;
	grid-template-columns: repeat(2, 1fr);
	margin-top: 1.5rem;
}

@media (min-width: 40em) {
	.melsa-showcase__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}
}

.melsa-showcase__item {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	margin: 0;
	overflow: hidden;
}

.melsa-showcase__item img {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	transition: transform 220ms ease;
	width: 100%;
}

.melsa-showcase__item:hover img {
	transform: scale(1.04);
}

/* ==========================================================================
   5. Sabit iletişim: mobilde alt bar, masaüstünde WhatsApp balonu
   ========================================================================== */

/* Varsayılan (mobil): ekranın altına yapışık iki butonlu çubuk. */
.melsa-contact {
	bottom: 0;
	box-shadow: 0 -2px 16px rgba(31, 38, 43, 0.18);
	display: flex;
	left: 0;
	position: fixed;
	right: 0;
	z-index: 90;
}

/* Çubuk footer içeriğinin üstüne binmesin: nefes payı arka planı olan
   .site-footer'ın İÇİNDE kalır, beyaz şerit oluşmaz. */
.site-footer {
	padding-block-end: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

.melsa-contact__btn {
	align-items: center;
	color: #fff;
	display: inline-flex;
	flex: 1 1 50%;
	font-size: 0.9375rem;
	font-weight: 700;
	gap: 0.5rem;
	justify-content: center;
	min-height: 3.25rem;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	text-decoration: none;
}

.melsa-contact__btn--call {
	background: var(--color-primary);
}

.melsa-contact__btn--call:hover,
.melsa-contact__btn--call:focus {
	background: var(--color-primary-hover);
	color: #fff;
}

.melsa-contact__btn--wa {
	background: #0f7a41;
}

.melsa-contact__btn--wa:hover,
.melsa-contact__btn--wa:focus {
	background: #0c6636;
	color: #fff;
}

/* Masaüstü düzenin açıldığı sınırda (64em) balona dön. */
@media (min-width: 64em) {
	.melsa-contact {
		bottom: 1.5rem;
		box-shadow: none;
		left: auto;
		right: 1.5rem;
	}

	.melsa-contact__btn {
		flex: 0 0 auto;
		min-height: 0;
		padding-bottom: 0;
	}

	.melsa-contact__btn--call {
		display: none;
	}

	.melsa-contact__btn--wa {
		border-radius: 999px;
		box-shadow: 0 6px 20px rgba(31, 38, 43, 0.25);
		padding: 0.75rem 1.125rem;
	}

	.site-footer {
		padding-block-end: 4rem;
	}
}

/* ==========================================================================
   6. Erişilebilirlik, ritim ve tasarım dili düzeltmeleri (tasarım denetimi)
   ========================================================================== */

/* Yapışkan başlık ve mobil iletişim çubuğu, çapa hedefini örtmesin. */
html {
	scroll-padding-block: 5rem 5rem;
}

.admin-bar {
	scroll-padding-block-start: calc(5rem + var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 32px)));
}

@media (min-width: 64em) {
	html {
		scroll-padding-block: 5rem 1.5rem;
	}
}

/* Odak halkası: koyu ve kırmızı zeminlerde görünür kalsın (WCAG 2.4.7). */
.section-cta-band a:focus-visible,
.section-cta-band button:focus-visible,
.section-cta-band .btn:focus-visible,
.melsa-quote-card a:focus-visible,
.melsa-quote-card button:focus-visible,
.melsa-quote-card .btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* Arayüz sınırı kontrastı (WCAG 1.4.11): ikincil buton kenarlığı ve koyu
   karttaki buton sınırları zeminden ayrışsın. --color-line dekoratif
   çizgiler için olduğu gibi kalır. */
.btn-outline {
	border-color: var(--color-muted);
}

.melsa-quote-card__phone,
.melsa-quote-card__wa,
.melsa-quote-card__phone:hover,
.melsa-quote-card__phone:focus,
.melsa-quote-card__wa:hover,
.melsa-quote-card__wa:focus {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* Dokunma hedefi: en az 44 px (2.75rem). */
.melsa-footer-list {
	gap: 0;
}

.melsa-footer-list a {
	display: inline-block;
	padding-block: 0.6875rem;
}

.melsa-aside-list a {
	padding: 0.75rem 0;
}

.btn {
	min-height: 2.75rem;
}

/* Kart yarıçapı tek dil: her kart --radius-card kullanır. */
.melsa-service-card.rounded-xl,
.section-feature-grid .rounded-xl {
	border-radius: var(--radius-card);
}

/* Son bölüm (Blog'dan) ritmi diğer bölümlerle aynı ölçekte. */
.section-latest-posts h2 {
	font-size: 1.875rem;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

@media (min-width: 48em) {
	.section-latest-posts > .container-site {
		padding-block: 5rem;
	}
}

/* Kart bağlantılarındaki ok, ekran okuyucuya okunmayan süs olarak eklenir. */
.melsa-service-card .melsa-service-more::after,
.melsa-related__more::after {
	content: " \2192";
}

/* Yazı sonundaki üçüncü buton (hizmet çıkışı) bilinçli olarak daha soluk:
   birincil eylem telefon, ikincil WhatsApp, üçüncü ilgili hizmet. */
.melsa-post-cta__actions .melsa-post-cta__service {
	border-color: var(--color-line);
	color: var(--color-muted);
}

/* Ana sayfa sık sorulan sorular */

.melsa-faq__list {
	margin-top: 2rem;
	max-width: 52rem;
}

.melsa-faq__item {
	border-bottom: 1px solid var(--color-line);
}

.melsa-faq__item:first-child {
	border-top: 1px solid var(--color-line);
}

.melsa-faq__q {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	font-size: 1.0625rem;
	font-weight: 600;
	gap: 0.75rem;
	list-style: none;
	padding: 1.125rem 0;
}

.melsa-faq__q::-webkit-details-marker {
	display: none;
}

.melsa-faq__q::before {
	color: var(--color-primary);
	content: "+";
	flex: 0 0 auto;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	width: 1rem;
}

.melsa-faq__item[open] .melsa-faq__q::before {
	content: "−";
}

.melsa-faq__q:hover {
	color: var(--color-primary);
}

.melsa-faq__a {
	color: var(--color-muted);
	margin: 0 0 1.25rem 1.75rem;
	max-width: 46rem;
}

/* ==========================================================================
   6b. Liste sayfaları (blog, kategori, arama, 404)
   ========================================================================== */

/* Başlık bloğu, iç sayfalardaki bantla aynı dili konuşsun. */
.blog .page-header,
.archive .page-header,
.search .page-header {
	border-bottom: 1px solid var(--color-line);
	margin-bottom: 2.5rem;
	padding-bottom: 1.5rem;
}

.blog .page-title,
.archive .page-title,
.search .page-title,
.error404 .page-title {
	font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.archive .archive-description {
	max-width: 46rem;
}

/* Kart ızgarası: geniş ekranda üç kolon (ana sayfadaki hizmet kartlarıyla
   aynı ritim). Parent iki kolonda bırakıyor. */
@media (min-width: 64em) {
	.blog .site-main > .grid,
	.archive .site-main > .grid,
	.search .site-main > .grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Yazı kartları: görsel çerçevesi ve hover davranışı site geneliyle aynı. */
.entry-card {
	overflow: hidden;
	padding: 0;
}

.entry-card:hover {
	transform: translateY(-2px);
}

.entry-card .post-thumbnail {
	display: block;
	margin: 0;
}

.entry-card img {
	aspect-ratio: 8 / 5;
	border-bottom: 1px solid var(--color-line);
	border-radius: 0;
	display: block;
	object-fit: cover;
	transition: transform 240ms ease;
}

.entry-card:hover img {
	transform: scale(1.03);
}

.entry-card .entry-title {
	font-size: 1.125rem;
}

.entry-card .entry-summary {
	color: var(--color-muted);
	font-size: 0.9375rem;
}

/* 404: mesajı ortala, arama kutusuna nefes ver. */
.error404 .site-main {
	margin-inline: auto;
	max-width: 40rem;
	padding-block: 2rem 1rem;
	text-align: center;
}

.error404 .search-form {
	margin-top: 1.5rem;
}

/* ==========================================================================
   7. Tekil yazı (single-post): sayfa tasarım diline hizalama
   ========================================================================== */

.single-post .post-thumbnail {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	margin: 0 0 2rem;
	overflow: hidden;
	padding: 0.5rem;
}

.single-post .post-thumbnail img {
	aspect-ratio: 16 / 9;
	border-radius: calc(var(--radius-card) - 0.125rem);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.single-post h1.entry-title {
	font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-bottom: 0.75rem;
}

.single-post .container-site.py-10:has(> .site-main) {
	padding-block: 3rem;
}

@media (min-width: 48em) {
	.single-post .container-site.py-10:has(> .site-main) {
		padding-block: 4rem;
	}
}

/* Tarih/yazar satırı kaynağında susturuldu (inc/entry-meta.php); geriye
   kalan boş sarmalayıcı boşluk bırakmasın. */
.entry-meta:empty {
	display: none;
}