/* =========================================================================
   NeoHair — WordPress & Elementor uyum katmanı
   main.css mevcut tasarımı taşır; bu dosya yalnızca WordPress'e özgü
   parçaları (blog, yorumlar, formlar, erişilebilirlik) ekler ve eski
   sitede satır içi <style> bloklarında dağınık duran kuralları toplar.
   ========================================================================= */

:root {
	--nh-blue: #1f3d9d;
	--nh-pink: #f22283;
	--nh-pink-dark: #db106f;
	--nh-green: #389633;
	--nh-text: #333333;
	--nh-muted: #7f7f7f;
	--nh-border: #e6e6e6;
	--nh-bg-soft: #fafafa;
	--nh-radius: 8px;
	--nh-shadow: 0 4px 24px rgba(31, 61, 157, .08);
	--nh-container: 1170px;
}

/* -------------------------------------------------------------------------
   Erişilebilirlik
   ------------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	clip-path: none;
	color: var(--nh-blue);
	display: block;
	font-size: 14px;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--nh-pink);
	outline-offset: 2px;
}

/* Eski sitede odak halkası hiç yoktu; klavye kullanıcıları menüde kayboluyordu. */

/* -------------------------------------------------------------------------
   Mobil menü — eski inc/header.php içindeki satır içi <style> buraya taşındı
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.header-middle .navbar__menu { margin-top: 10px !important; }
	.navbar__submenu { display: block !important; }
	.navbar__right { margin-top: 20px !important; }
}

/* -------------------------------------------------------------------------
   WhatsApp yüzen buton — eski inc/footer.php satır içi <style>'ından
   ------------------------------------------------------------------------- */

.wsk-float {
	position: fixed;
	bottom: 15px;
	left: 15px;
	z-index: 999999;
}

.wsk-float a,
.wsk-float a img { display: block; }

.pulse-button {
	position: relative;
	width: 70px;
	height: 70px;
	border: none;
	box-shadow: 0 0 0 0 rgba(41, 167, 26, .7);
	border-radius: 50%;
	background-color: #29a71a;
	background-image: url("../images/whatsapp.webp");
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	cursor: pointer;
	animation: nh-pulse 1.25s infinite cubic-bezier(.66, 0, 0, 1);
}

.pulse-button:hover { animation: none; }

@keyframes nh-pulse {
	to { box-shadow: 0 0 0 40px rgba(41, 167, 26, 0); }
}

/* Hareketi azaltma tercihine saygı göster. */
@media (prefers-reduced-motion: reduce) {
	.pulse-button { animation: none; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* -------------------------------------------------------------------------
   Formlar
   ------------------------------------------------------------------------- */

/* Bal küpü alanı — ekran okuyuculardan da gizli, botlara görünür. */
.neohair-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.neohair-consent {
	color: var(--nh-muted);
	font-size: 16px;
	padding: 10px 0;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	text-align: left;
}

.neohair-consent input[type="checkbox"] {
	margin-top: 4px;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	accent-color: var(--nh-pink);
}

.neohair-consent a {
	color: var(--nh-muted);
	text-decoration: underline;
}

.neohair-consent a:hover { color: var(--nh-pink); }

.neohair-form-notice {
	background: #fff4f7;
	border-left: 4px solid var(--nh-pink);
	color: var(--nh-pink-dark);
	padding: 14px 18px;
	margin: 0 auto 24px;
	max-width: var(--nh-container);
	border-radius: var(--nh-radius);
	font-size: 16px;
}

/* -------------------------------------------------------------------------
   Blog düzeni
   ------------------------------------------------------------------------- */

.neohair-blog-wrap {
	/* Üst boşluk küçük: başlığı artık header-bottom-4 banner'ı taşıyor. */
	padding: 48px 0 80px;
	background: #fff;
}

.neohair-blog-wrap .container {
	max-width: var(--nh-container);
	margin: 0 auto;
	padding: 0 15px;
}

.neohair-archive__header {
	text-align: center;
	margin-bottom: 48px;
}

.neohair-archive__header .section-title { margin-bottom: 12px; }

.neohair-archive__header .subtitle {
	color: var(--nh-muted);
	font-size: 18px;
	max-width: 720px;
	margin: 0 auto;
}

/* Yazı kartları */

/* Üçlü ızgara. auto-fill kullanılmıyor: kenar çubuğu kalkıp alan
   genişleyince satır başına dört-beş kart düşüyordu. */
.neohair-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

@media (max-width: 991px) {
	.neohair-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

@media (max-width: 575px) {
	.neohair-post-grid { grid-template-columns: minmax(0, 1fr); }
}

.neohair-card {
	background: #fff;
	border: 1px solid var(--nh-border);
	border-radius: var(--nh-radius);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
	height: 100%;
}

.neohair-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--nh-shadow);
}

.neohair-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.neohair-card__thumb {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--nh-bg-soft);
}

.neohair-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.neohair-card:hover .neohair-card__thumb img { transform: scale(1.04); }

.neohair-card__placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--nh-blue), var(--nh-pink));
	opacity: .12;
}

.neohair-card__body {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 10px;
}

.neohair-card__date {
	color: var(--nh-pink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.neohair-card__title {
	font-size: 20px;
	line-height: 1.35;
	color: var(--nh-blue);
	margin: 0;
	font-weight: 700;
}

.neohair-card__excerpt {
	color: var(--nh-muted);
	font-size: 15px;
	line-height: 1.65;
	margin: 0;
	flex: 1 1 auto;
}

.neohair-card__more {
	color: var(--nh-pink);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* -------------------------------------------------------------------------
   Tekil yazı
   ------------------------------------------------------------------------- */

.neohair-breadcrumbs {
	font-size: 14px;
	color: var(--nh-muted);
	margin-bottom: 18px;
}

.neohair-breadcrumbs a { color: var(--nh-blue); text-decoration: none; }
.neohair-breadcrumbs a:hover { color: var(--nh-pink); }
.neohair-breadcrumbs span { margin: 0 6px; }

.neohair-single__title {
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.22;
	color: var(--nh-blue);
	margin: 0 0 16px;
}

.neohair-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	color: var(--nh-muted);
	font-size: 14px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--nh-border);
	margin-bottom: 32px;
}

.neohair-single__meta i { color: var(--nh-pink); margin-right: 5px; }
.neohair-single__meta a { color: var(--nh-muted); }
.neohair-single__meta a:hover { color: var(--nh-pink); }

.neohair-single__thumb {
	margin: 0 0 36px;
	border-radius: var(--nh-radius);
	overflow: hidden;
}

.neohair-single__thumb img { width: 100%; height: auto; display: block; }

/* Yazı gövdesi — okunabilirlik için ölçülü satır uzunluğu ve ritim. */
.neohair-single__content {
	font-size: 17px;
	line-height: 1.8;
	color: var(--nh-text);
}

.neohair-single__content > * + * { margin-top: 1.15em; }

.neohair-single__content h2 {
	font-size: clamp(24px, 3vw, 32px);
	color: var(--nh-blue);
	margin-top: 2em;
	margin-bottom: .6em;
	line-height: 1.3;
}

.neohair-single__content h3 {
	font-size: clamp(20px, 2.4vw, 25px);
	color: var(--nh-blue);
	margin-top: 1.7em;
	margin-bottom: .5em;
	line-height: 1.35;
}

.neohair-single__content a {
	color: var(--nh-pink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.neohair-single__content a:hover { color: var(--nh-pink-dark); }

.neohair-single__content ul,
.neohair-single__content ol { padding-left: 1.4em; }

.neohair-single__content li + li { margin-top: .5em; }

.neohair-single__content ul li::marker { color: var(--nh-pink); }

.neohair-single__content blockquote {
	border-left: 4px solid var(--nh-pink);
	background: var(--nh-bg-soft);
	margin: 2em 0;
	padding: 20px 28px;
	font-style: italic;
	border-radius: 0 var(--nh-radius) var(--nh-radius) 0;
}

.neohair-single__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--nh-radius);
}

.neohair-single__content figure { margin: 2em 0; }

.neohair-single__content figcaption {
	font-size: 14px;
	color: var(--nh-muted);
	text-align: center;
	margin-top: 10px;
}

/* Blog yazılarındaki fiyat/karşılaştırma tabloları — mevcut yazıların
   çoğu tablo içeriyor ve mobilde taşıyordu. */
.neohair-single__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 2em 0;
	font-size: 15px;
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.neohair-single__content table { display: table; white-space: normal; }
}

.neohair-single__content th,
.neohair-single__content td {
	border: 1px solid var(--nh-border);
	padding: 12px 14px;
	text-align: left;
}

.neohair-single__content thead th {
	background: var(--nh-blue);
	color: #fff;
	font-weight: 700;
}

.neohair-single__content tbody tr:nth-child(even) { background: var(--nh-bg-soft); }

.neohair-single__tags {
	margin-top: 36px;
	font-size: 14px;
	color: var(--nh-muted);
}

.neohair-single__tags a {
	display: inline-block;
	background: var(--nh-bg-soft);
	border: 1px solid var(--nh-border);
	border-radius: 999px;
	padding: 5px 14px;
	margin: 0 6px 8px 0;
	color: var(--nh-blue);
	text-decoration: none;
}

.neohair-single__tags a:hover { background: var(--nh-pink); color: #fff; border-color: var(--nh-pink); }

/* Yazı sonu dönüşüm bloğu */
.neohair-single__cta {
	margin-top: 48px;
	padding: 36px 32px;
	background: linear-gradient(135deg, var(--nh-blue) 0%, #2b52c4 100%);
	border-radius: var(--nh-radius);
	color: #fff;
	text-align: center;
}

.neohair-single__cta .section-title { color: #fff; margin-bottom: 10px; }
.neohair-single__cta p { color: rgba(255, 255, 255, .88); margin-bottom: 24px; }

.neohair-single__cta-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Yazılar arası gezinme */
.neohair-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 48px;
}

@media (max-width: 600px) {
	.neohair-post-nav { grid-template-columns: 1fr; }
}

.neohair-post-nav a {
	border: 1px solid var(--nh-border);
	border-radius: var(--nh-radius);
	padding: 18px 22px;
	text-decoration: none;
	display: block;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.neohair-post-nav a:hover { border-color: var(--nh-pink); box-shadow: var(--nh-shadow); }
.neohair-post-nav span { display: block; font-size: 13px; color: var(--nh-pink); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.neohair-post-nav strong { color: var(--nh-blue); font-size: 16px; line-height: 1.4; font-weight: 700; }
.neohair-post-nav__next { text-align: right; }

.neohair-related { margin-top: 64px; }

.neohair-related__title {
	font-size: 26px;
	color: var(--nh-blue);
	margin-bottom: 28px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--nh-pink);
	display: inline-block;
}

/* -------------------------------------------------------------------------
   Arama kutusu
   ------------------------------------------------------------------------- */

.neohair-searchform {
	display: flex;
	gap: 0;
	max-width: 520px;
	margin: 0 auto;
}

.neohair-searchform input[type="search"] {
	flex: 1 1 auto;
	border: 1px solid var(--nh-border);
	border-right: 0;
	border-radius: var(--nh-radius) 0 0 var(--nh-radius);
	padding: 13px 18px;
	font-size: 16px;
	min-width: 0;
}

.neohair-searchform button {
	background: var(--nh-pink);
	border: 0;
	color: #fff;
	padding: 0 22px;
	border-radius: 0 var(--nh-radius) var(--nh-radius) 0;
	cursor: pointer;
}

.neohair-searchform button svg { fill: #fff; width: 20px; height: 20px; }
.neohair-searchform button:hover { background: var(--nh-pink-dark); }

/* -------------------------------------------------------------------------
   Sayfalama
   ------------------------------------------------------------------------- */

.pagination,
.navigation.pagination { margin-top: 48px; }

.nav-links {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--nh-border);
	border-radius: var(--nh-radius);
	color: var(--nh-blue);
	text-decoration: none;
	font-weight: 700;
}

.page-numbers:hover,
.page-numbers.current {
	background: var(--nh-pink);
	border-color: var(--nh-pink);
	color: #fff;
}

/* -------------------------------------------------------------------------
   Yorumlar
   ------------------------------------------------------------------------- */

.neohair-comments { margin-top: 64px; }

.neohair-comments__title {
	font-size: 24px;
	color: var(--nh-blue);
	margin-bottom: 28px;
}

.neohair-comments__list { list-style: none; margin: 0 0 40px; padding: 0; }
.neohair-comments__list .children { list-style: none; padding-left: 32px; }

.neohair-comments__list .comment-body {
	border: 1px solid var(--nh-border);
	border-radius: var(--nh-radius);
	padding: 20px 24px;
	margin-bottom: 18px;
}

.neohair-comments .comment-form input[type="text"],
.neohair-comments .comment-form input[type="email"],
.neohair-comments .comment-form input[type="url"],
.neohair-comments .comment-form textarea {
	width: 100%;
	border: 1px solid var(--nh-border);
	border-radius: var(--nh-radius);
	padding: 12px 16px;
	font-size: 16px;
	font-family: inherit;
}

.neohair-comments .comment-form p { margin-bottom: 16px; }

/* -------------------------------------------------------------------------
   404
   ------------------------------------------------------------------------- */

.neohair-404 {
	padding: 90px 0;
	text-align: center;
}

.neohair-404 .container { max-width: var(--nh-container); margin: 0 auto; padding: 0 15px; }
.neohair-404 .subtitle { color: var(--nh-muted); font-size: 18px; margin-bottom: 32px; }
.neohair-404 .neohair-searchform { margin-bottom: 32px; }

.neohair-404__links {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 64px;
}

.neohair-404__recent h2 {
	font-size: 24px;
	color: var(--nh-blue);
	margin-bottom: 28px;
}

/* -------------------------------------------------------------------------
   Sayfa şablonu (Elementor kullanılmayan sayfalar için)
   ------------------------------------------------------------------------- */

.neohair-page { padding: 60px 0 80px; }
.neohair-page .container { max-width: var(--nh-container); margin: 0 auto; padding: 0 15px; }
.neohair-page__header { text-align: center; margin-bottom: 40px; }
.neohair-page__content { font-size: 17px; line-height: 1.8; color: var(--nh-text); }
.neohair-page__content > * + * { margin-top: 1.15em; }

.neohair-empty {
	text-align: center;
	color: var(--nh-muted);
	font-size: 18px;
	padding: 60px 0;
}

/* -------------------------------------------------------------------------
   Elementor uyumu
   ------------------------------------------------------------------------- */

/* Elementor bölümleri tema kapsayıcısının içinde de tam genişlik olabilsin. */
.elementor-section.elementor-section-full_width > .elementor-container { max-width: 100%; }

/* Tema tipografisi Elementor içeriğine de uygulansın; birebir aynı görünüm. */
.elementor-widget-text-editor,
.elementor-widget-theme-post-content { line-height: 1.8; }

/* Elementor düzenleyicide gizli alanların görünür kalması gerekir. */
.elementor-editor-active .neohair-hp {
	position: static !important;
	left: auto !important;
	width: auto;
	height: auto;
}

/* Sabit menü konumu — site.js artık satır içi "top" yazmıyor, .nh-fixed ekliyor.
   Böylece yönetici çubuğu açıkken menü altında kalmıyor. */
.header-middle.nh-fixed { top: 0; }
.admin-bar .header-middle.nh-fixed { top: 32px; }

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

/* Görseller hiçbir düzende taşmasın. */
img { max-width: 100%; height: auto; }

/* -------------------------------------------------------------------------
   body_class() çakışma koruması
   -------------------------------------------------------------------------
   WordPress <body> etiketine "page", "blog", "search", "single" gibi genel
   sınıflar ekler. Eski tasarımın CSS'i de aynı adları kullanıyor: main.css'te
   `.page { opacity: 0 }` kuralı vardı ve WordPress'e taşındığında <body>'yi
   de yakalayıp bütün siteyi görünmez yapıyordu.

   main.css'teki kural `div.page` olarak daraltıldı. Aşağıdaki kural, ileride
   benzer bir kural eklenirse sitenin tümüyle kaybolmasını engelleyen ikinci
   savunma hattıdır. */
body.page,
body.blog,
body.search,
body.single {
	opacity: 1;
	overflow: visible;
}

/* =========================================================================
   NeoHair Elementor widget'ları
   ========================================================================= */

/* --- SSS akordiyonu --------------------------------------------------- */

.neohair-faq__list {
	max-width: 900px;
	margin: 0 auto;
}

.neohair-faq__item {
	border: 1px solid var(--nh-border);
	border-radius: var(--nh-radius);
	margin-bottom: 14px;
	overflow: hidden;
	background: #fff;
}

.neohair-faq__item.is-open { border-color: var(--nh-pink); box-shadow: var(--nh-shadow); }

.neohair-faq__question { margin: 0; font-size: inherit; }

.neohair-faq__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: none;
	border: 0;
	padding: 20px 24px;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	color: var(--nh-blue);
	text-align: left;
	cursor: pointer;
	line-height: 1.45;
}

.neohair-faq__trigger:hover { color: var(--nh-pink); }

.neohair-faq__trigger i {
	flex: 0 0 auto;
	color: var(--nh-pink);
	font-size: 22px;
	transition: transform .25s ease;
}

.neohair-faq__trigger[aria-expanded="true"] i { transform: rotate(180deg); }

.neohair-faq__answer {
	padding: 0 24px 22px;
	color: var(--nh-text);
	font-size: 16px;
	line-height: 1.75;
}

.neohair-faq__answer > *:first-child { margin-top: 0; }
.neohair-faq__answer > *:last-child { margin-bottom: 0; }

/* --- Öncesi / Sonrası ------------------------------------------------- */

.neohair-ba__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

@media (max-width: 991px) { .neohair-ba__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 575px) { .neohair-ba__grid { grid-template-columns: minmax(0, 1fr) !important; } }

.neohair-ba__item { margin: 0; }

.neohair-ba__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	border-radius: var(--nh-radius);
	overflow: hidden;
	background: var(--nh-border);
}

.neohair-ba__side { position: relative; }

.neohair-ba__side img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}

.neohair-ba__label {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .08em;
	padding: 4px 10px;
	border-radius: 999px;
	color: #fff;
}

.neohair-ba__label--before { background: rgba(51, 51, 51, .82); }
.neohair-ba__label--after { background: var(--nh-pink); }

.neohair-ba__caption {
	text-align: center;
	margin-top: 14px;
	font-size: 15px;
	color: var(--nh-muted);
}

/* --- Müşteri yorumları ------------------------------------------------ */

.neohair-testimonial {
	background: #fff;
	border: 1px solid var(--nh-border);
	border-radius: var(--nh-radius);
	padding: 30px 28px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 10px;
}

.neohair-testimonial__stars { color: #ffcb05; font-size: 16px; letter-spacing: 2px; }

.neohair-testimonial__text {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.75;
	color: var(--nh-text);
	flex: 1 1 auto;
	font-style: normal;
}

.neohair-testimonial__author {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--nh-border);
}

.neohair-testimonial__author img {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
}

.neohair-testimonial__author cite {
	font-style: normal;
	font-weight: 700;
	color: var(--nh-blue);
}

/* --- Özellik kartları -------------------------------------------------- */

.neohair-features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}

.neohair-feature {
	background: #fff;
	border: 1px solid var(--nh-border);
	border-radius: var(--nh-radius);
	padding: 32px 26px;
	text-align: center;
	text-decoration: none;
	color: inherit;
	display: block;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

a.neohair-feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--nh-shadow);
	border-color: var(--nh-pink);
}

.neohair-feature__icon { font-size: 44px; line-height: 1; margin-bottom: 18px; }
.neohair-feature__icon img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto; }
.neohair-feature__icon svg { width: 44px; height: 44px; }

.neohair-feature__title {
	font-size: 19px;
	margin: 0 0 10px;
	line-height: 1.35;
	font-weight: 700;
}

.neohair-feature__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--nh-muted);
}

/* --- Instagram --------------------------------------------------------- */

.neohair-instagram__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.neohair-instagram__heading i {
	font-size: 46px;
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.neohair-instagram__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 4px;
	margin-top: 32px;
}

.neohair-instagram__item {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
}

.neohair-instagram__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.neohair-instagram__item:hover img { transform: scale(1.06); }

.neohair-instagram__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(31, 61, 157, .55);
	color: #fff;
	font-size: 30px;
	opacity: 0;
	transition: opacity .25s ease;
}

.neohair-instagram__item:hover .neohair-instagram__overlay { opacity: 1; }

.neohair-instagram__embeds {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 32px;
}

.neohair-instagram__follow { text-align: center; margin-top: 32px; }

/* --- Form bloğu -------------------------------------------------------- */

.neohair-form-block .subtitle {
	color: var(--nh-muted);
	font-size: 17px;
	margin-bottom: 26px;
}

/* -------------------------------------------------------------------------
   Hero slider — Elementor kapsayıcı sıfırlaması
   -------------------------------------------------------------------------
   Slider kenardan kenara uzanır; Elementor'un bölüm/sütun iç boşlukları ve
   genişlik sınırı bu bölümde devre dışı bırakılır. Aksi halde slider
   ortalanmış dar bir kutuya sıkışır. */

.neohair-hero-section,
.neohair-hero-section > .elementor-container,
.neohair-hero-section .elementor-column,
.neohair-hero-section .elementor-widget-wrap,
.neohair-hero-section .elementor-widget {
	max-width: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

.neohair-hero-section .elementor-widget-container { margin: 0; }

.neohair-hero,
.neohair-hero .header-bottom__banner { margin: 0; }

/* Slider ile menü arasında boşluk kalmasın — eski sitede header-bottom
   doğrudan menünün altındaydı. */
.neohair-hero-section { margin-top: 0 !important; }

/* -------------------------------------------------------------------------
   Hero slider — <picture> uyumu
   -------------------------------------------------------------------------
   Eski CSS `.slide-item > img` doğrudan-çocuk seçicisini kullanıyor. Widget,
   masaüstü ve mobil için ayrı kırpımlar sunabilmek adına görseli <picture>
   içine alıyor; bu da <img>'i doğrudan çocuk olmaktan çıkarıp kuralı
   devre dışı bırakıyordu. Sonuç: görsel akışta normal boyutta basılıyor,
   slaytın üstünde 310px'lik boşluk kalıyordu.

   Aşağıdaki kurallar aynı yerleşimi <picture> için tekrarlar. */

.header-bottom__banner .slide-item > picture,
.header-bottom__banner-2 .slide-item > picture,
.header-bottom-2__banner .slide-item > picture {
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.header-bottom__banner .slide-item > picture > img,
.header-bottom__banner-2 .slide-item > picture > img,
.header-bottom-2__banner .slide-item > picture > img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	transform: scale(1);
}

/* Etkin slaytın yavaş yakınlaşma animasyonu da <picture> üzerinden. */
.header-bottom__banner .owl-item.active .slide-item > picture > img {
	animation: 8s ease-in-out 1s bannerScale;
}

.header-bottom__banner-2 .owl-item.active .slide-item > picture > img,
.header-bottom-2__banner .owl-item.active .slide-item > picture > img {
	animation: 5s linear 1s bannerScale;
}

@media (prefers-reduced-motion: reduce) {
	.header-bottom__banner .owl-item.active .slide-item > picture > img,
	.header-bottom__banner-2 .owl-item.active .slide-item > picture > img {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
   Elementor kapsayıcı kenar boşlukları
   -------------------------------------------------------------------------
   Eski tasarımda içerik Bootstrap'in `.container` sınıfındaydı ve solda
   sağda 15px boşluk alıyordu. Elementor'un `.elementor-container` öğesinin
   yatay iç boşluğu yoktur; göç eden içerik bu yüzden dar ekranlarda
   kenardan kenara yapışıyor ve metin ekran dışına taşıyordu.

   Aynı boşluk burada geri veriliyor. Hero gibi bilerek tam genişlik olan
   bölümler bunun dışında tutulur. */

/* Boşluk kapsayıcıya değil sütuna verilir; bkz. "Çift kapsayıcı düzeltmesi".
   Kapsayıcıya verilirse Elementor'un sütunlara uyguladığı varsayılan 10px
   üzerine binip içeriği header'a göre 25px kaydırıyor. */
.elementor-section-boxed > .elementor-container {
	padding-left: 0;
	padding-right: 0;
}

/* Yatay kaydırma her koşulda engellensin: göç eden içerikte sabit
   genişlikli tablolar ve geniş görseller var. */
body { overflow-x: hidden; }

.elementor-widget-text-editor table,
.elementor-widget-text-editor pre {
	max-width: 100%;
	overflow-x: auto;
	display: block;
}

@media (max-width: 767px) {
	/* Eski sayfalarda satır içi stille verilmiş sabit genişlikler var. */
	.elementor-widget-text-editor [style*="width:"],
	.elementor-widget-text-editor [style*="width "] {
		max-width: 100% !important;
	}

	.elementor-widget-text-editor img { height: auto; }
}

/* -------------------------------------------------------------------------
   Çift kapsayıcı düzeltmesi
   -------------------------------------------------------------------------
   Göç eden içerik hâlâ eski `.container` sarmalayıcılarını taşıyor. Elementor
   bölümü de kendi `.elementor-container`'ını ekliyor. İkisi birlikte
   çalışınca genişlik sınırı ve 15px boşluk iki kez uygulanıyor: içerik
   header/footer'a göre 25px içeri kayıyor ve 50px daralıyordu.

   Ölçüm (1440px görünüm):
     orijinal .container      → sol 143, genişlik 1140
     göç sonrası (düzeltmesiz) → sol 168, genişlik 1090

   Çözüm: dış sınırı Elementor kapsayıcısı belirler, içeride kalan eski
   kapsayıcı saydamlaşır. Bootstrap'in `.row { margin: 0 -15px }` /
   `.col { padding: 0 15px }` dengesi bozulmaz, çünkü boşluğu artık
   Elementor kapsayıcısı sağlıyor. */

/* Kural: yan boşluğu yalnızca TEK bir katman versin.
 *
 * Göç eden içeriğin çoğu hâlâ kendi `.container` sarmalayıcısını taşıyor ve
 * genişlik sınırı ile 15px boşluğu zaten o veriyor. Elementor'un sütunu da
 * varsayılan 10px ekleyince içerik header'a göre kayıyordu.
 *
 * Ölçüm (1440px görünüm, /protez-sac):
 *   orijinal  .container 163/1100 → içerik 178/1070
 *   düzeltmesiz            → içerik 163/1100  (15px kayma)
 *   düzeltmeli             → içerik 178/1070  (birebir)
 *
 * `.container` taşımayan bölümlerde boşluk kalmayacağı için sütuna 15px
 * verilir; `:has()` destekleyen tarayıcılarda `.container` varsa bu boşluk
 * geri alınır. Desteklemeyen tarayıcıda yalnızca 15px'lik zararsız bir
 * iç girinti kalır, düzen bozulmaz. */

.elementor-section-boxed > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding-left: 15px;
	padding-right: 15px;
}

.elementor-section-boxed > .elementor-container > .elementor-column > .elementor-widget-wrap:has(.container) {
	padding-left: 0;
	padding-right: 0;
}

/* Tam genişlik bölümlerde (hero) içerideki .container kendi boşluğunu
   korumalı — orada Elementor kapsayıcısının boşluğu sıfırlanmıştır. */
.neohair-hero-section .container {
	max-width: 1140px;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------------
   Üst bar aksiyonları
   -------------------------------------------------------------------------
   Üst bar artık bilgi göstermiyor, üç doğrudan aksiyon sunuyor:
   Hemen Ara / Yol Tarifi Al / WhatsApp Rezervasyon.

   Özgün yapıda her blok iki satırdı (küçük etiket + kalın değer). Tek
   satıra düşünce dikey hizayı ve tıklama alanını burada topluyoruz. */

.header-top__call-item .header-top__action {
	display: inline-flex;
	align-items: center;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	transition: color .2s linear;
}

.header-top__call-item .header-top__action:hover,
.header-top__call-item .header-top__action:focus-visible {
	color: var(--nh-pink);
}

/* Tek satırlık içerik ikonla dikey ortalansın. */
.header-top__call-item {
	align-items: center;
}

/* Tıklama alanı ikonu da kapsasın — mobilde parmakla isabet için. */
.header-top__call-item svg {
	flex: 0 0 auto;
}

@media (max-width: 991px) {
	.header-top__call-item .header-top__action { font-size: 15px; }
}

/* -------------------------------------------------------------------------
   Sabit butonların yerleri
   -------------------------------------------------------------------------
   WhatsApp sağ alta, yukarı-çık butonu sol alta alındı.

   Özgün tasarımda tersiydi (.wsk-float sol, .to-top sağ). Değişiklik
   burada yapılıyor çünkü main.css'e dokunmak istemiyoruz — o dosya eski
   tasarımın kaynağı ve yeniden üretilebilir olmalı. */

/* Seçici bilerek "body" ile ve sınıf iki kez yazılarak kuruluyor.
   pages.css'teki kurallar sayfa gövde sınıfına kapsamlı:
       body.neohair-page-tesekkur .wsk-float   → (0,2,1)
   Tek sınıflı kural (0,1,0) ve çift sınıflı kural (0,2,0) bunu yenemiyor;
   "body" eleman seçicisi de özgüllüğe ekleniyor. Aşağıdaki yazım (0,2,1)
   ile eşitler, theme.css sonra yüklendiği için kazanır. */

body .wsk-float.wsk-float {
	left: auto;
	right: 15px;
}

body .to-top.to-top,
body #scrollUp {
	right: auto;
	left: 80px;
}

@media (max-width: 767px) {
	body .to-top.to-top,
	body #scrollUp {
		right: auto;
		left: 10px;
	}

	body .wsk-float.wsk-float { left: auto; right: 10px; }
}

/* -------------------------------------------------------------------------
   Tek satır header
   -------------------------------------------------------------------------
   Lacivert üst bilgi barı kaldırıldı, logo beyaz satıra alındı.
   Özgün tasarımda .navbar-logo yalnızca mobilde görünüyordu
   (`display: none` masaüstünde); artık her ölçüde görünür ve menü ile
   aynı satırı paylaşır.

   ÖNEMLİ — aşağıdaki yerleşim kuralları yalnızca masaüstünde geçerli:
   main.css zaten 1199px altında eksiksiz bir mobil menü tanımlıyor
   (tam genişlikte beyaz panel, yukarıdan aşağı kayarak açılıyor).
   Bu kurallar medya sorgusuna alınmadığında o panele de uygulanıyor,
   ölçülen sonuç: panel 375px yerine 222px, menü sayfanın ortasına
   itiliyor (y=474, olması gereken 170) ve bağlantılar 26px yerine
   14px'e düşüyordu. Eşik 1200px, main.css'in mobil eşiğiyle aynı. */

/* "header-middle_white-transparent" sınıfı bilerek kullanılmıyor:
   site.js o sınıfa satır içi rgba(255,255,255,.6) yazıyor ve hiçbir CSS
   kuralı satır içi stili yenemiyor — header saydam kalıyordu. Arka plan
   ve gölge bu yüzden her ölçüde buradan geliyor. */
.neohair-header-single {
	background-color: #fff;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}

/* Bağlantı renkleri her ölçüde geçerli olmalı: özgün renk kuralı
   ".header-middle_white-transparent .navbar__menu-link" seçicisine
   bağlıydı, o sınıf kalkınca mobil menüde de renk kayboluyordu. */
.neohair-header-single .navbar__menu-link { color: #333; }

.neohair-header-single .navbar__menu-link:hover,
.neohair-header-single .navbar__menu-link.active { color: var(--nh-pink); }

.neohair-header-single .navbar__submenu-link { color: #333; }
.neohair-header-single .navbar__submenu-link:hover { color: var(--nh-pink); }

/* --- Masaüstü tek satır yerleşimi ------------------------------------- */

@media (min-width: 1200px) {

	.neohair-header-single {
		height: auto;
		min-height: 84px;
	}

	/* Header kapsayıcısı içerik kapsayıcısından geniş.
	   Logo (160px) + dokuz menü öğesi + randevu butonu 1140px'e sığmıyor;
	   sıkıştırınca logo sıfır genişliğe eziliyor ve buton ekran dışına
	   taşıyordu. Header'ın içerikten biraz geniş olması yaygın ve zararsız. */
	.neohair-header-single > .container,
	.neohair-header-single > .elementor-container {
		max-width: 1400px;
		/* Sarma kapalı: taşarsa logo ile menü alt alta düşüyordu. */
		flex-wrap: nowrap;
	}

	/* Seçici bağlamıyla yazılıyor: main.css'te
	       .header-middle .navbar-logo { display: none }   → (0,2,0)
	   kuralı var (logo özgün tasarımda yalnızca mobilde görünüyordu).
	   "body .navbar-logo--visible" (0,1,1) bunu yenemiyordu. */
	body .header-middle .navbar-logo--visible {
		display: flex;
		min-width: 160px;
		align-items: center;
		justify-content: flex-start;
		flex: 0 0 auto;
		padding-top: 0;
		margin-right: 40px;
	}

	.header-middle .navbar-logo--visible img,
	.header-middle .navbar-logo--visible .custom-logo {
		max-width: 160px;
		width: 160px;
		height: auto;
		display: block;
	}

	/* Menü, kalan alanı doldurup sağa yaslanır; menü ile buton
	   aynı satırda kalsın diye sarma kapalı. */
	.neohair-header-single .navbar {
		flex: 1 1 auto;
		width: auto;
		justify-content: flex-end;
		gap: 28px;
		flex-wrap: nowrap;
	}

	.neohair-header-single .navbar__menu {
		margin-bottom: 0;
		flex: 0 1 auto;
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	/* Dokuz menü öğesi tek satıra sığsın. */
	.neohair-header-single .navbar__menu-item { flex: 0 0 auto; }

	.neohair-header-single .navbar__menu-link {
		padding-left: 8px;
		padding-right: 8px;
		font-size: 13.5px;
		font-weight: 700;
	}

	.neohair-header-single .navbar__right {
		flex: 0 0 auto;
	}
}

/* Dar masaüstü: 1200-1439px.
   Menüye "Ana Sayfa" ve "Blog" eklenince içerik 1374px genişliğe çıkıyor;
   1200px'de kapsayıcı 1155px olduğundan RANDEVU AL butonu kırpılıyordu
   (div.page overflow:hidden olduğu için sessizce kesiliyor, yatay kaydırma
   çubuğu bile çıkmıyordu). Boşluklar ve logo bu aralıkta daraltılıyor. */
@media (min-width: 1200px) and (max-width: 1439px) {

	body .header-middle .navbar-logo--visible {
		min-width: 140px;
		margin-right: 16px;
	}

	.header-middle .navbar-logo--visible img,
	.header-middle .navbar-logo--visible .custom-logo {
		max-width: 140px;
		width: 140px;
	}

	.neohair-header-single .navbar { gap: 12px; }

	.neohair-header-single .navbar__menu-item { margin-right: 6px; }

	.neohair-header-single .navbar__menu-link {
		padding-left: 5px;
		padding-right: 5px;
	}
}

/* -------------------------------------------------------------------------
   Mobil menü paneli
   ------------------------------------------------------------------------- */

/* Açılışta menünün bir an açık görünüp kapanmasını engeller.
   main.css'te ".header-middle .navbar { top: 0 }" var; "hide" sınıfını ise
   site.js DOM hazır olduğunda ekliyor. Arada kalan karelerde panel ekranın
   üstünde duruyordu. Önce preloader bunu örtüyordu, o kalkınca göründü.
   ":not(.show)" özgüllüğü (0,3,0) taban kuralı (0,2,0) yener. */
@media (max-width: 1199px) {
	.header-middle .navbar:not(.show) { top: -200%; }
}

/* Panelin üst şeridi: solda logo, sağda kapatma tuşu. */
.navbar__mobile-head { display: none; }

@media (max-width: 1199px) {

	/* Logo şeridin ortasında; kapatma tuşu sağ kenara mutlak konumlanıyor
	   ki logoyu merkezden kaydırmasın. */
	.navbar__mobile-head {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 70px;
		padding: 0 60px;
		order: 0;
		flex: 0 0 auto;
		/* Tam opak: panelin geri kalanı %95 saydam ve altındaki header'ın
		   logosu bu şeritten sızıp ortadaki logoyla üst üste biniyordu. */
		background-color: #fff;
		border-bottom: 1px solid rgba(0, 0, 0, .08);
	}

	.navbar__mobile-logo img,
	.navbar__mobile-logo .custom-logo {
		display: block;
		width: 140px;
		height: auto;
	}

	.navbar__close {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		width: 34px;
		height: 34px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.navbar__close span {
		position: absolute;
		left: 4px;
		top: 50%;
		width: 26px;
		height: 3px;
		border-radius: 3px;
		background-color: #333;
	}

	.navbar__close span:first-child { transform: rotate(45deg); }
	.navbar__close span:last-child  { transform: rotate(-45deg); }
	.navbar__close:hover span { background-color: var(--nh-pink); }

	/* Sıra: başlık şeridi → menü → RANDEVU AL.
	   main.css butonu order:1 ile en üste alıyordu. */
	.header-middle .navbar__menu  { order: 1; margin-top: 30px; }
	.header-middle .navbar__right { order: 2; margin-top: 10px; }

	/* Panel ekranın en üstünden başlar (main.css'te top: 70px idi).
	   70px'den başlayınca header panelin üstünde görünmeye devam ediyor
	   ve logo iki kez çıkıyordu. Panelin kendi 70px'lik şeridi tam
	   header'ın yerine oturuyor: logo yerinde kalıyor, hamburger X oluyor. */
	.header-middle .navbar.show { top: 0; }

	/* Ölçü header'daki logoyla aynı; yalnızca konumu ortalanıyor. */
	.navbar__mobile-logo img,
	.navbar__mobile-logo .custom-logo { width: 175px; }
}

/* Kenar çubuğu kaldırılınca yazı gövdesinin satır uzunluğu 1140px'e çıktı;
   bu genişlikte satır sonundan başına dönmek zorlaşıyor. Metin blokları
   okunabilir genişlikte ortalanıyor, ilgili yazılar tam genişlikte kalıyor. */
.neohair-single__header,
.neohair-single__thumb,
.neohair-single__content,
.neohair-single__tags,
.neohair-single__cta {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

/* =========================================================================
   Erişilebilirlik düzeltmeleri
   =========================================================================
   Lighthouse denetiminde çıkan sorunlar. Başlangıç: Erişilebilirlik 81.
   ------------------------------------------------------------------------- */

/* --- Başlık etiketi değişiklikleri (bkz. inc/a11y.php) ------------------
   Etiketler sıraya sokuldu ama main.css stilleri etiket adına bağlıydı;
   yeni etiketler aynı görünsün diye kurallar burada eşleniyor. */

.about__text > h3 {
	padding-left: 1px;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: 6.5px;
	color: #333;
}

.about__text > h2.section-title { margin-left: -4px; margin-top: 48px; }

.why-choose-us > .container > h3.why-choose-us__eyebrow {
	font-weight: 500;
	font-size: 19px;
}

.about-3 > .container > .content > h2 { margin-top: 20px; }

@media (max-width: 767px) {
	.about__text > h3 { font-size: 14px; letter-spacing: 4px; }
	.why-choose-us .container > h3.why-choose-us__eyebrow { font-size: 17px; }
}

/* --- Renk kontrastı ----------------------------------------------------
   WCAG AA normal metin için 4.5:1 istiyor. Ölçülen değerler:
     #7f7f7f beyaz üstünde → 4.00:1   (onay metinleri, KVKK bağlantısı)
     #f22283 beyaz üstünde → 3.94:1   (SSS madde numaraları)

   Marka pembesi genel olarak DEĞİŞTİRİLMEDİ. Yalnızca beyaz zeminde küçük
   metin olarak kullanıldığı iki yerde koyulaştırıldı; butonlarda ve büyük
   başlıklarda özgün renk duruyor. */

.neohair-consent,
.neohair-consent label { color: #6b6b6b; }
/* Bağlantı yalnızca renkle ayrışıyordu; çevresindeki metinle kontrastı
   1.24:1 çıkıyor. Renk körlüğü olan kullanıcı bağlantıyı hiç fark etmez.
   Altını çizmek renkten bağımsız bir işaret veriyor. */
/* Seçici bilerek uzun tutuldu.
   Elementor'un frontend.min.css dosyasında ".elementor a { text-decoration:
   none }" var — özgüllüğü bununla eşit (0,1,1) ama tema CSS'inden SONRA
   yüklendiği için beraberliği o kazanıyordu. Renk uygulanıyor, altı çizgi
   uygulanmıyordu; ölçmeden bakınca kural çalışıyor sanılıyor. */
.neohair-form .neohair-consent a,
.neohair-consent label a {
	color: #b3125c;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.neohair-form .neohair-consent a:hover,
.neohair-consent label a:hover { text-decoration-thickness: 2px; }

/* Özgüllük main.css'teki kuralla eşleniyor:
   ".faq__content .accardion__item-title span" → (0,2,1).
   Daha zayıf bir seçici (0,1,1) yazınca kural uygulanmıyordu. */
.faq__content .accardion__item-title span,
.section-faq .accardion__item-title span { color: #d1146b; }

/* --- Dokunma hedefi boyutu ---------------------------------------------
   Owl Carousel'in nokta göstergeleri 10x10px; parmakla isabet ettirmek zor.
   WCAG 2.5.8 en az 24x24px istiyor. Görünen nokta aynı boyutta kalıyor,
   tıklanabilir alan görünmez dolguyla büyütülüyor. */

.owl-dots .owl-dot {
	min-width: 24px;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.owl-dots .owl-dot span { pointer-events: none; }