/*
Theme Name:   Eikra Child
Theme URI:    https://localhost/Haramidere
Description:  Eikra alt teması — üst çubuk sloganı, WhatsApp satırı ve logo görünümü özelleştirmeleri.
Author:       Haramidere
Template:     eikra
Version:      1.2.1
Text Domain:  eikra-child
*/

/*
 * Üst çubuk ortası: tema logosu + slogan yalnızca ::after (metni şablonda tekrarlama).
 * Ek CSS’te .topbar-logo::after veya aynı metin varsa sil — çift yazı oluşur.
 */
.topbar-style-3 #tophead .topbar-logo {
	position: relative;
	display: inline-block;
	text-align: center;
}

.topbar-style-3 #tophead .topbar-logo::after {
	content: ' "Bir Öğretmen Kuruluşudur" ';
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 6px;
	white-space: nowrap;
	font-size: 11px;
	line-height: 1.3;
}

/* Orta sütunu dikeyde üst çubukla hizala */
.topbar-style-3 #tophead .row > .col-sm-2 {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
}

/*
 * Üst çubuk iletişim ikonları — FA5: fa-envelope-o yok; tema sadece i[class^="fa"] boyuyor.
 */
.topbar-style-3 #tophead .tophead-contact ul i.fas,
.topbar-style-3 #tophead .tophead-contact ul i.far {
	color: #002147;
	padding-right: 10px;
	font-style: normal;
}

.topbar-style-3 #tophead .tophead-contact ul i.far {
	font-family: "Font Awesome 5 Free" !important;
	font-weight: 400 !important;
}

.topbar-style-3 #tophead .tophead-contact ul i.fas {
	font-family: "Font Awesome 5 Free" !important;
	font-weight: 900 !important;
}

/*
 * Güncelleme sonrası ana menü satırında çıkan logo: üst çubukta zaten logo var (#tophead).
 * #meanmenu (mobil bar) ve içindeki .mobile-logo dahil DEĞİL — yapısı dışında bırakıldı gibi;
 * gerekiyorsa aşağıdaki bloktan sonra mobil için ayrı kural yazılabilir.
 */
#masthead .site-branding,
#masthead .site-logo-section,
#sticky-header-wrapper .site-branding,
#sticky-header-wrapper .site-logo-section {
	display: none !important;
}

/* Tipik iki satır header: sol logo sütununu tamamen kaldır (boş Bootstrap kolonunu bırakma) */
@media (min-width: 768px) {
	#masthead .masthead-container .header-firstrow > div[class*="col-"]:first-child:has(> .site-branding),
	#sticky-header-wrapper .masthead-container .header-firstrow > div[class*="col-"]:first-child:has(
			> .site-branding
		) {
		display: none !important;
		width: 0 !important;
		max-width: 0 !important;
		flex: 0 0 0 !important;
		min-height: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow: hidden !important;
		margin: 0 !important;
		border: none !important;
	}

	/*
	 * Logo kolonunu gizleyince yan kolon hâlâ col-sm-10 vb. kalıyor — menü satırı sıkışıyor / İletişim alta düşebiliyor.
	 */
	#masthead
		.masthead-container
		.header-firstrow
		> div[class*="col-"]:first-child:has(> .site-branding)
		+ div[class*="col-"],
	#sticky-header-wrapper
		.masthead-container
		.header-firstrow
		> div[class*="col-"]:first-child:has(> .site-branding)
		+ div[class*="col-"] {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}
}

/*
 * Child header-3: üst çubuk + compact masthead (.masthead-container--compact). Ayırıcı boşluk sıkı.
 */
@media (min-width: 768px) {
	body.has-topbar.header-style-3 #masthead .masthead-container.masthead-container--compact > hr.menu-sep:first-of-type,
	body.has-topbar.header-style-3 #sticky-header-wrapper .masthead-container.masthead-container--compact > hr.menu-sep:first-of-type {
		margin-top: 6px !important;
		margin-bottom: 14px !important;
	}
}

/*
 * Compact header-3: araç ikonları sağda absolute → menü tüm sırayı kullanır.
 * Üst düzeme flex + nowrap + sıkı padding (İLETİŞİM satır kayması).
 */
@media (min-width: 992px) {
	body.header-style-3 #masthead .masthead-container--compact .masthead-menu-strip,
	body.header-style-3 #sticky-header-wrapper .masthead-container--compact .masthead-menu-strip {
		position: relative;
		display: block;
		width: 100%;
		min-height: 44px;
		box-sizing: border-box;
	}

	body.header-style-3 #masthead .masthead-container--compact .masthead-menu-strip .header-icon-area,
	body.header-style-3 #sticky-header-wrapper .masthead-container--compact .masthead-menu-strip .header-icon-area {
		position: absolute !important;
		right: 0;
		top: 0;
		bottom: 0;
		left: auto;
		display: flex !important;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
		gap: 6px;
		float: none !important;
		padding-left: 0 !important;
		padding-right: 4px !important;
		margin: 0 !important;
		z-index: 15;
		width: auto;
		max-width: min(300px, 42vw);
	}

	body.header-style-3 #masthead .masthead-container--compact .masthead-menu-strip .header-icon-area .clear,
	body.header-style-3 #sticky-header-wrapper .masthead-container--compact .masthead-menu-strip .header-icon-area .clear {
		display: none !important;
	}

	body.header-style-3 #masthead .masthead-container--compact .masthead-menu-strip #site-navigation.main-navigation,
	body.header-style-3 #sticky-header-wrapper .masthead-container--compact .masthead-menu-strip #site-navigation.main-navigation {
		width: 100% !important;
		max-width: 100%;
		float: none !important;
		padding-right: min(290px, 44vw);
		box-sizing: border-box;
	}

	body.header-style-3 #masthead .masthead-container--compact #site-navigation.main-navigation > nav > ul,
	body.header-style-3 #sticky-header-wrapper .masthead-container--compact #site-navigation.main-navigation > nav > ul {
		display: flex !important;
		flex-flow: row nowrap !important;
		flex-wrap: nowrap !important;
		align-items: center;
		justify-content: flex-start;
		width: 100% !important;
		max-width: 100%;
		float: none !important;
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	body.header-style-3 #masthead .masthead-container--compact #site-navigation.main-navigation > nav > ul::-webkit-scrollbar,
	body.header-style-3 #sticky-header-wrapper .masthead-container--compact #site-navigation.main-navigation > nav > ul::-webkit-scrollbar {
		height: 0;
		width: 0;
	}

	body.header-style-3 #masthead .masthead-container--compact #site-navigation.main-navigation > nav > ul > li,
	body.header-style-3 #sticky-header-wrapper .masthead-container--compact #site-navigation.main-navigation > nav > ul > li {
		flex: 0 0 auto !important;
		display: block !important;
		float: none !important;
		white-space: nowrap !important;
	}

	body.header-style-3 #masthead .masthead-container--compact #site-navigation.main-navigation > nav > ul > li > a,
	body.header-style-3 #sticky-header-wrapper .masthead-container--compact #site-navigation.main-navigation > nav > ul > li > a {
		padding: 6px 5px 14px !important;
		font-size: 11px !important;
		line-height: 1.2 !important;
		letter-spacing: 0 !important;
	}

	body.header-style-3 #masthead .masthead-container--compact #site-navigation.main-navigation > nav > ul > li.menu-item-has-children > a,
	body.header-style-3 #sticky-header-wrapper .masthead-container--compact #site-navigation.main-navigation > nav > ul > li.menu-item-has-children > a {
		padding-right: 8px !important;
	}

	@media (min-width: 1200px) {
		body.header-style-3 #masthead .masthead-container--compact #site-navigation.main-navigation > nav > ul > li > a,
		body.header-style-3 #sticky-header-wrapper .masthead-container--compact #site-navigation.main-navigation > nav > ul > li > a {
			font-size: 12px !important;
			padding: 6px 7px 16px !important;
		}
	}

	@media (min-width: 1400px) {
		body.header-style-3 #masthead .masthead-container--compact #site-navigation.main-navigation > nav > ul > li > a,
		body.header-style-3 #sticky-header-wrapper .masthead-container--compact #site-navigation.main-navigation > nav > ul > li > a {
			font-size: 13px !important;
			padding: 6px 9px 16px !important;
		}
	}
}

/* Küçük masaüstü: ikon rezervini azaltıp daha fazla menü sığdır */
@media (min-width: 992px) and (max-width: 1199px) {
	body.header-style-3 #masthead .masthead-container--compact .masthead-menu-strip #site-navigation.main-navigation,
	body.header-style-3 #sticky-header-wrapper .masthead-container--compact .masthead-menu-strip #site-navigation.main-navigation {
		padding-right: min(220px, 40vw) !important;
	}
	body.header-style-3 #masthead .masthead-container--compact .masthead-menu-strip .header-icon-area,
	body.header-style-3 #sticky-header-wrapper .masthead-container--compact .masthead-menu-strip .header-icon-area {
		max-width: min(220px, 40vw) !important;
	}
}

/* --- Eski “Ek CSS” / site özelleştirmeleri (Tema Özelleştir’den taşındı) --- */

span.wpcf7-list-item {
	display: block;
}

span.vc_tta-title-text {
	font-size: 14px;
}

.vc_tta-panels-container {
	padding-top: 15px;
}

img.abcfslImgCenter.abcfslImgCenter {
	width: 20%;
	height: auto;
}

.wpb_text_column.wpb_content_element {
	padding: 8px;
}

.topbar-style-3 #tophead .tophead-contact {
	position: relative;
}

.topbar-style-3 #tophead .tophead-contact ul {
	position: relative;
	padding-left: 90px;
	z-index: 2;
}

/* Görseller: wp-content/uploads (canlı domain yerine göreli yol — localhost ve canlıda çalışır) */
.topbar-style-3 #tophead .tophead-contact::before {
	position: absolute;
	top: -6px;
	left: 0;
	content: "";
	width: 80px;
	height: 80px;
	display: inline-block;
	background: url("../../uploads/2018/10/ataturk-img.png") no-repeat top left;
	background-size: contain;
}

/*
 * Mobil offscreen çubuğu — temada logo sütunu .mobile-logo (eski meanmenu .logo-small yoktu).
 */
.mobile-offscreen-menu .mean-bar {
	position: relative;
}

.mobile-offscreen-menu .mean-bar::before {
	position: absolute;
	top: 2px;
	left: 12px;
	content: "";
	width: 44px;
	height: 50px;
	display: block;
	pointer-events: none;
	z-index: 1;
	background: url("../../uploads/2018/10/ataturk-img.png") no-repeat top left;
	background-size: contain;
}

.mobile-offscreen-menu .mean-bar .mobile-logo {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	min-width: 0;
	margin-left: 58px;
	margin-right: 8px;
	display: flex;
	align-items: center;
}

.mobile-offscreen-menu .mean-bar .mobile-logo .site-branding,
.mobile-offscreen-menu .mean-bar .mobile-logo a.dark-logo {
	display: inline-block;
	max-width: 100%;
}

.mobile-offscreen-menu .mean-bar .mobile-logo img {
	max-width: min(260px, calc(100vw - 148px));
	width: auto;
	height: auto;
}

@media (min-width: 380px) {
	.mobile-offscreen-menu .mean-bar::before {
		width: 50px;
		height: 54px;
		left: 10px;
	}
	.mobile-offscreen-menu .mean-bar .mobile-logo {
		margin-left: 64px;
	}
}

@media (min-width: 480px) {
	.mobile-offscreen-menu .mean-bar::before {
		width: 54px;
		height: 58px;
	}
	.mobile-offscreen-menu .mean-bar .mobile-logo {
		margin-left: 70px;
	}
}

@media (min-width: 768px) {
	.mobile-offscreen-menu .mean-bar .mobile-logo {
		margin-left: 74px;
	}
}

.hdr-whatsapp a {
	display: inline-block;
	color: #2baf3f !important;
	font-size: 16px;
	font-weight: 600;
	margin-top: 8px;
}

.hdr-whatsapp a .fa {
	margin-right: 8px;
	font-size: 19px;
}

/*
 * Topbar 3: tema display:table + hdr-whatsapp absolute akışı bozuyordu; flex ile sırala:
 * sosyaller üst/satır içi — WhatsApp sağ alta hizalı.
 */
.topbar-style-3 #tophead .tophead-right {
	position: relative;
	display: flex !important;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	flex-wrap: nowrap;
	float: none !important;
	min-height: 40px;
	height: auto;
	width: 100%;
	text-align: right;
	gap: 2px;
}

.topbar-style-3 #tophead .tophead-right ul.tophead-social {
	display: block !important;
	flex: 0 0 auto;
	line-height: 1;
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 0;
}

@media all and (min-width: 768px) {
	.topbar-style-3 #tophead .tophead-right {
		align-items: flex-end;
	}
}

@media all and (max-width: 767px) {
	.topbar-style-3 #tophead .tophead-right {
		align-items: center;
		text-align: center;
	}
}

.topbar-style-3 #tophead .hdr-whatsapp {
	position: relative;
	right: auto;
	bottom: auto;
	align-self: flex-end;
	margin-top: 0;
	z-index: 1;
	flex: 0 0 auto;
}

/*
 * Font Awesome 5: ekstra `.fa` + `.fab`/`.fas` birlikte font-weight yüzünden ikon görünmez olabiliyor.
 */
.topbar-style-3 #tophead .tophead-social a i.fab {
	font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free" !important;
	font-weight: 400 !important;
	font-style: normal;
}

.topbar-style-3 #tophead .tophead-social a i.fas {
	font-family: "Font Awesome 5 Free" !important;
	font-weight: 900 !important;
	font-style: normal;
}

.topbar-style-3 #tophead .hdr-whatsapp a .fab.fa-whatsapp {
	font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free" !important;
	font-weight: 400 !important;
}

/*
 * Smash Balloon / Eikra: tema #sb_instagram .sbi_photo { height:70px } tüm sayfalarda uygulanıyordu.
 * Ana sayfa ve içerikteki akışın kesilmemesi için geneli auto; yalnızca footer sıkışık şerit kalır (tema tasarımı).
 */
@media (min-width: 1200px) {
	#sb_instagram .sbi_photo {
		height: auto !important;
	}

	.site-footer-wrap #sb_instagram .sbi_photo {
		height: 70px !important;
	}
}

/*
 * Footer dışında (#content): Instagram 4:5 portre (Smash Balloon ayarıyla uyumlu).
 * Eski 1:1 kuralı plugin oranını bozuyordu. contain = afiş metinleri üst/alt kırpılmasın (ince boşluk olabilir).
 */
#content.site-content #sb_instagram #sbi_images .sbi_item .sbi_photo_wrap {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: #f8f8f8;
}

#content.site-content #sb_instagram #sbi_images .sbi_item .sbi_photo_wrap .sbi_photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: block;
}

#content.site-content #sb_instagram #sbi_images .sbi_item .sbi_photo_wrap .sbi_photo img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain;
	object-position: center;
	display: block;
}

/*
 * Eikra style.css mobilde (.sbi_item { width: 33.33% }) CSS Grid ile çakışır: tek sütunda kutu %33 kalır,
 * görseller dar sütunda sola yapışır. İçerikte grid hücresini doldursun.
 */
@media (max-width: 640px) {
	#content.site-content #sb_instagram,
	#content.site-content #sb_instagram #sbi_images {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	#content.site-content #sb_instagram #sbi_images .sbi_item {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
}

.wp-video {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 50em;
	height: 50em;
}
body.page-id-11116 #primary.content-area {
	padding-top: 0 !important;
	padding-bottom: 40px !important;
}