/*
 * suleoktem.com özel stiller. Renkler sitenin kendi paletinden:
 * lacivert #0F2A47, turuncu #FF7F46. Kontrast oranları WCAG AA (≥4.5) sağlar:
 * beyaz/#0F2A47 = 14.6, beyaz/#1F7A43 = 5.4.
 */

/* ---- K3 / O9: telefonda sabit "Hemen Ara / WhatsApp" çubuğu ---- */
.so-mobil-cubuk { display: none; }

@media (max-width: 767px) {
	.so-mobil-cubuk {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
		display: flex;
		padding-bottom: env(safe-area-inset-bottom);
		background: #0F2A47;
		box-shadow: 0 -2px 10px rgba(15, 42, 71, .15);
	}
	.so-mobil-cubuk a {
		flex: 1;
		display: flex; align-items: center; justify-content: center; gap: 8px;
		min-height: 56px;
		font: 600 16px/1 Poppins, sans-serif;
		color: #fff; text-decoration: none;
	}
	.so-mobil-cubuk__ara { background: #0F2A47; }
	.so-mobil-cubuk__wa  { background: #1F7A43; }
	.so-mobil-cubuk a:focus-visible { outline: 3px solid #FF7F46; outline-offset: -3px; }
	.so-mobil-cubuk svg  { width: 20px; height: 20px; fill: currentColor; }

	/* Çubuk sayfa sonunu ve "yukarı çık" düğmesini örtmesin */
	body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
	.wpr-stt-btn { bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
}

/* ---- K3: iletişim formu (CF7 #997 Bootstrap sınıfları kullanıyor, tema Bootstrap yüklemiyor) ---- */
.wpcf7 #contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.wpcf7 #contact-form .col-12:not(.col-md-6) { grid-column: 1 / -1; }
.wpcf7 #contact-form label { display: block; margin-bottom: 6px; font-weight: 600; color: #0F2A47; }
.wpcf7 #contact-form input:not([type="submit"]),
.wpcf7 #contact-form textarea {
	width: 100%; padding: 12px 14px;
	border: 1px solid #CBD8E7; border-radius: 8px;
	font: inherit; color: #0F2A47; background: #fff;
}
.wpcf7 #contact-form textarea { height: 160px; resize: vertical; }
.wpcf7 #contact-form input[type="submit"] {
	padding: 14px 32px; border: 0; border-radius: 8px;
	background: #0F2A47; color: #fff; font-weight: 600; cursor: pointer;
}
/* CF7 otomatik <br>/<p> boşluklarını kaldır */
.wpcf7 #contact-form br { display: none; }
.wpcf7 #contact-form p { margin: 0; }

/* K3: iletişim kutularındaki linkli numara/e-posta kutunun rengini korusun */
.elementor-element-88a8f4f .elementor-icon-box-description a,
.elementor-element-14a1921 .elementor-icon-box-description a { color: inherit; font: inherit; text-decoration: none; }

@media (max-width: 767px) {
	.wpcf7 #contact-form { grid-template-columns: 1fr; }
}

/* ---- K5: SSS soru-cevapları ---- */
.wp-block-details {
	margin: 0 0 12px; padding: 16px 20px;
	border: 1px solid #CBD8E7; border-radius: 10px; background: #fff;
}
.wp-block-details summary { cursor: pointer; font-weight: 600; color: #0F2A47; }
.wp-block-details[open] summary { margin-bottom: 8px; }
.wp-block-details p { margin: 0; color: #4D5D6E; }

/* Özgüllük: Elementor kit'in `.elementor-kit-9 h1 { font-family: Helvetica }` kuralı sonradan yüklenir; h1.wp-block-heading ile üstüne çıkılır. Kit bağlantılara da Helvetica verir. */
/* WP, grup bloğunu .wp-block-group__inner-container ile sarabildiği için h1/p doğrudan çocuk seçilmez */
/* ---- K5: SSS sayfası, sitenin diğer sayfalarıyla aynı tipografi ve genişlik ---- */
.so-sss { max-width: 960px; margin: 0 auto; padding: 56px 40px 72px; font-family: Montserrat, sans-serif; font-size: 15px; line-height: 1.6; color: #4D5D6E; }
.so-sss h1.wp-block-heading { font-family: Poppins, sans-serif; font-weight: 800; font-size: 45px; line-height: 1.2; color: #0F2A47; margin: 0 0 16px; }
.so-sss > p,
.so-sss > .wp-block-group__inner-container > p { margin: 0 0 28px; }
/* K3: cevaptaki telefon linki; .so-sss.wp-block-group ile kit'in `.elementor-kit-9 a` kuralının üstüne çıkılır */
.so-sss.wp-block-group a { font-family: inherit; font-weight: 600; color: #0F2A47; text-decoration: underline; text-underline-offset: 2px; }
.so-sss.wp-block-group a:hover,
.so-sss.wp-block-group a:focus-visible { color: #FF7F46; }
.so-sss .wp-block-details summary { font-family: Poppins, sans-serif; font-size: 16px; }
.so-sss .wp-block-details p { font-size: 15px; line-height: 1.6; }
@media (max-width: 767px) {
	.so-sss { padding: 32px 20px 48px; }
	.so-sss h1.wp-block-heading { font-size: 32px; }
}

@media (max-width: 767px) {
	/* AS1: uzun H1 telefonda 3 satıra iniyor; satır aralığı açılır */
	.elementor .elementor-element.elementor-element-5b80d071.elementor-widget-heading .elementor-heading-title { font-size: 17px; line-height: 1.35; }
}

/*
 * ---- O9: ana sayfa giriş bölümü, telefon (dikey) ----
 * Danışman fotoğrafı, giriş bölümünün arka plan resminin sağ tarafında.
 * Telefonda resim üstte bir şerit olarak sağa yaslı gösterilir, yazılar
 * altında düz zeminde kalır. Elementor'un arka plan seçicisi
 * (:not(.elementor-motion-effects-element-type-background)) daha özgül
 * olduğu için !important gerekiyor. Yatay telefonda (740×360 gibi) şerit
 * ekranı kaplayacağı için Elementor'un kendi mobil düzeni kalır.
 */
@media (max-width: 767px) and (orientation: portrait) {
	.elementor-778 .elementor-element.elementor-element-27228eb20 {
		/* Şerit yüksekliği görünen ekranla küçülür: Safari'de araç çubukları ekranın
		   ~%20'sini alır (iPhone 13: 390×664), svh bunu hesaba katar; desteklemeyen
		   tarayıcıda vh satırı geçerli kalır. Geniş telefonlarda (>556px) resim
		   (2100×944, oran 2.22) tüm genişliği kaplasın diye 45vw'den az olmaz. */
		--so-serit: max(clamp(170px, 26vh, 240px), 45vw);
		--so-serit: max(clamp(170px, 26svh, 240px), 45vw);
		min-height: 0 !important;
		padding-top: var(--so-serit) !important;
		padding-bottom: 24px !important;
		background-color: #ECEEEF !important;
		background-size: auto var(--so-serit) !important;
		background-position: right top !important;
	}
	/* Öğeler arası boşluk 20px → 14px */
	.elementor-778 .elementor-element.elementor-element-18d022cf {
		row-gap: 14px !important;
	}
	.elementor-778 .elementor-element-60754524 .wpr-advanced-text,
	.elementor-778 .elementor-element-60754524 .wpr-advanced-text-preffix {
		font-size: min(30px, 7.5vw) !important;
		line-height: 1.2 !important;
	}
	/* Dönen satır ("Davranış Problemleri" en uzunu) dar ekranda tek satıra sığsın;
	   sığmazsa sayfa yana taşıyor ve yazı yazılırken düğme aşağı zıplıyor.
	   Yazılan harfler b içindeki i öğeleri; Elementor onlara ayrıca boyut veriyor. */
	.elementor-778 .elementor-element-60754524 .wpr-anim-text,
	.elementor-778 .elementor-element-60754524 .wpr-anim-text b,
	.elementor-778 .elementor-element-60754524 .wpr-anim-text b i {
		font-size: min(24px, 7vw) !important;
		line-height: 1.3 !important;
	}
	/* Uzun giriş metninin telefonda yalnızca ilk paragrafı gösterilir
	   (satır kırpma "…" ile cümleyi ortadan kesiyordu). */
	.elementor-778 .elementor-element-6612337 .elementor-widget-container > p:not(:first-child) {
		display: none;
	}
	.elementor-778 .elementor-element-6612337 .elementor-widget-container > p:first-child {
		margin-bottom: 0;
	}
}
/* Çok kısa ekranlarda (iPhone SE Safari ~375×553) fotoğraf ve "Hizmetlerim" birlikte
   sığmıyor; giriş paragrafı gizlenir, başlık ve düğme ilk ekranda kalır. */
@media (max-width: 767px) and (orientation: portrait) and (max-height: 600px) {
	.elementor-778 .elementor-element.elementor-element-6612337 {
		display: none;
	}
	.elementor-778 .elementor-element.elementor-element-18d022cf {
		row-gap: 8px !important;
	}
}

/*
 * O9: Royal varsayılanı #777 (kontrast 4.48) — gövde metniyle aynı tona alınır.
 * Yazı içeriği, yorum kartları, yazı listesi özetleri ve SSS (akordeon) yanıtları.
 * Elementor'un öğeye özel kuralları (.elementor-N .elementor-element.elementor-element-X ...)
 * sonradan yüklendiği için seçiciler bir sınıf daha özgül. Başlık ve bağlantıların kendi
 * renkleri olduğundan etkilenmez. Sitedeki tüm örnekler #777777 ya da zaten #4D5D6E.
 * Bu kurallar, bu bileşenler için Elementor düzenleyicisinde sonradan seçilen renklerin
 * de önüne geçer; renk değiştirilmek istenirse burası düzenlenmeli.
 */
.elementor .elementor-element.elementor-widget.elementor-widget-wpr-post-content .wpr-post-content,
.elementor .elementor-element.elementor-widget.elementor-widget-wpr-testimonial .wpr-testimonial-content,
.elementor .elementor-element.elementor-widget.elementor-widget-wpr-grid .wpr-grid-item-excerpt .inner-block,
.elementor .elementor-element.elementor-widget.elementor-widget-wpr-advanced-accordion .wpr-advanced-accordion .wpr-acc-panel .wpr-acc-panel-content {
	color: #4D5D6E;
}

/*
 * ---- TG: yazı / kategori / arama / blog arşivi başlık alanı ----
 * Arka plan seans fotoğrafı (pexels-cottonbro-4101143: danışman solda, danışan sağda);
 * örtü soldan sağa açık geçiş #F4F7FA %92 → %20 (Elementor ayarları — düzeltme adımı yazar).
 * Şablonlar: 1354 Post, 1265 Kategori, 1264 Arama, 1263 Blog arşivi.
 * Elementor CSS'i sonradan yüklendiği için seçiciler bir sınıf daha özgül;
 * kapsayıcı arka planında ve örtüsünde (::before) Elementor'un seçicisi daha özgül
 * ya da eş olduğundan !important.
 */
/* Tablet ve masaüstü: başlık ile bilgi satırı soldaki açık (örtülü) alanda kalır;
   uzun başlık ya da arama sözcüğü örtünün inceldiği sağ yarıya, danışanın koyu
   giysilerinin üstüne taşmaz. Ölçülen kontrast (yazının kutusundaki en koyu zemine karşı):
   başlık #333 ≥ 7.3, uzun başlıkla 768px'te 4.6; bilgi satırı #4D5D6E ≥ 5.0. */
@media (min-width: 768px) {
	.elementor-1354 .elementor-element.elementor-element-2f776e87.e-con,
	.elementor-1265 .elementor-element.elementor-element-9965c67.e-con,
	.elementor-1264 .elementor-element.elementor-element-bb4a82a.e-con,
	.elementor-1263 .elementor-element.elementor-element-a617362.e-con {
		max-width: 62%;
		margin-right: auto;
	}
}
/* Arşiv/arama/blog başlığının altındaki yol metni ("Anasayfa - Blog - …", Elementor'da #6E7781)
   örtülü fotoğrafın üstünde 3.0'a iniyordu; #3F4A55 ile en koyu zemine karşı ≥ 4.5. */
.elementor-1265 .elementor-element.elementor-element-54473a1.elementor-widget-heading .elementor-heading-title,
.elementor-1264 .elementor-element.elementor-element-71a09a6.elementor-widget-heading .elementor-heading-title,
.elementor-1263 .elementor-element.elementor-element-c76eb73.elementor-widget-heading .elementor-heading-title {
	color: #3F4A55;
}
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-1354 .elementor-element.elementor-element-7e8b9094.elementor-widget .wpr-post-title {
		font-size: 34px;
		line-height: 1.2;
	}
}
/* Telefon: metin tüm genişliği kaplıyor, fotoğrafın üstünde okunmuyordu. Ana sayfa
   girişindeki gibi fotoğraf üstte bir şerit olur (iki kişi ortada, baştan dizlere),
   başlık altında düz açık zeminde (#ECEEEF) kalır. Resim (oran 1.5) genişliğe oturur,
   üstten ~%10 kırpılır; şeridin altına taşan kısmını ve soldan sağa örtüyü ::before
   örter: şerit örtüsüz, altı düz zemin. Şerit 190–240px; yatay telefonda (740×360 gibi)
   ekran yüksekliğinin %32'sini geçmez, iki satırlık başlık da alttaki Ara/WhatsApp çubuğunun üstünde kalır. */
@media (max-width: 767px) {
	.elementor-1354 .elementor-element.elementor-element-65e22f57,
	.elementor-1265 .elementor-element.elementor-element-b4ecf71,
	.elementor-1264 .elementor-element.elementor-element-b0df64f,
	.elementor-1263 .elementor-element.elementor-element-9396b70 {
		--so-serit: min(clamp(190px, 50vw, 240px), 32vh);
		min-height: 0 !important;
		padding-top: var(--so-serit) !important;
		background-color: #ECEEEF !important;
		background-size: 100% auto !important;
		background-position: 50% calc(-100vw / 15) !important;
	}
	.elementor-1354 .elementor-element.elementor-element-65e22f57::before,
	.elementor-1265 .elementor-element.elementor-element-b4ecf71::before,
	.elementor-1264 .elementor-element.elementor-element-b0df64f::before,
	.elementor-1263 .elementor-element.elementor-element-9396b70::before {
		background-color: transparent !important;
		background-image: linear-gradient(to bottom, transparent var(--so-serit), #ECEEEF var(--so-serit)) !important;
		opacity: 1 !important;
	}
	.elementor-1354 .elementor-element.elementor-element-7e8b9094.elementor-widget .wpr-post-title {
		font-size: 28px;
		line-height: 1.25;
	}
}


/* ==== Masaüstü WhatsApp düğmesi (#so-wa) ====
   Yalnızca ≥768px (telefonda mobil çubuk var). "Yukarı çık" düğmesinin (.wpr-stt-btn:
   sağ 30, alt 30, 42×43) hemen üstünde, aynı dikey eksende. Etiket yalnızca üzerine
   gelince / klavyeyle odaklanınca görünür. Kit'in `a` kuralını ezmek için özgüllük yüksek. */
a.so-wa { display: none; }
@media (min-width: 768px) {
	body a.so-wa {
		display: block;
		position: fixed;
		right: 23px;
		bottom: 87px;
		width: 56px;
		height: 56px;
		z-index: 9990;
		text-decoration: none;
		outline: 0;
	}
	body a.so-wa .so-wa__daire {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: #1F7A43;
		color: #fff;
		box-shadow: 0 6px 18px rgba(15, 42, 71, .28);
		transition: transform .2s ease, box-shadow .2s ease;
	}
	body a.so-wa .so-wa__daire svg { width: 30px; height: 30px; fill: currentColor; }
	body a.so-wa .so-wa__etiket {
		position: absolute;
		right: 68px;
		top: 50%;
		margin: 0;
		padding: 8px 14px;
		border-radius: 8px;
		background: #fff;
		color: #0F2A47;
		font-family: 'Poppins', sans-serif;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		white-space: nowrap;
		box-shadow: 0 4px 14px rgba(15, 42, 71, .2);
		opacity: 0;
		transform: translate(8px, -50%);
		pointer-events: none;
		transition: opacity .2s ease, transform .2s ease;
	}
	body a.so-wa:hover .so-wa__etiket,
	body a.so-wa:focus-visible .so-wa__etiket {
		opacity: 1;
		transform: translateY(-50%);
	}
	body a.so-wa:hover .so-wa__daire { transform: scale(1.06); }
	body a.so-wa:focus-visible .so-wa__daire { outline: 3px solid #FF7F46; outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
	body a.so-wa .so-wa__daire,
	body a.so-wa .so-wa__etiket { transition: none; }
}
@media print {
	body a.so-wa { display: none !important; }
}