/* ============================================================================
   Mesleki Eğitim Merkezi — CHROME / HEADER
   Kaynak: dc-mem/Site Header.dc.html
   Tüm kurallar .mem-app / .mem-header altına scope'ludur; hiçbir global eleman
   seçicisi kullanılmaz (o katman core/base.css'in işidir).

   Kırılımlar (tasarım scripti):
     w >= 1180  → tam menü + Eğitim Paneli + Bilgi Al
     w <  1180  → hamburger (arama tetikleyicisi her zaman görünür)
     w <  768   → bar 76px sabit, logo 48px, scroll animasyonu yok
   ========================================================================== */

/* --- Elementor/tema hijyeni: gizli durumlar gerçekten gizlensin -------------
   `[hidden]` tek başına (0,1,0) ve inline/`display:flex` kurallarına yenilir.
   Panel durumları (idle/loading/results/empty/error) bu bayrakla anahtarlanır. */
.mem-header [hidden],
.mem-spanel [hidden],
.mem-drawer[hidden] { display: none !important; }

/* ------------------------------------------------------------------ 1. BAR */

.mem-header {
	position: relative;
	border-bottom: 1px solid var(--mem-border-soft, #EEF4F8);
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	backdrop-filter: saturate(150%) blur(14px);
}

.mem-header__row {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 40px);
	height: 96px;
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 28px);
}

.mem-app .mem-header__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/* (0,3,1) — Elementor `.elementor img{height:auto}` ve base.css'in
   `.mem-app .mem-logo img{height:var(--mem-logo-h)}` kuralını yener. */
.mem-app .mem-header__logo img {
	height: 62px;
	width: auto;
	display: block;
}

/* --- Scroll-driven küçülme (handoff §8) -------------------------------------
   JS scroll dinleyicisi YOKTUR. @supports ile kapılıdır: desteklemeyen
   tarayıcıda header 96px / logo 62px sabit kalır ve hiçbir şey bozulmaz
   (kapı olmadan `duration:0 + fill:both` bitiş karesine yapışırdı). */
@supports (animation-timeline: scroll(root)) {
	.mem-header {
		animation: memHdrSurface linear both;
		animation-timeline: scroll(root);
		animation-range: 0 120px;
	}

	.mem-header__row {
		animation: memHdrRow linear both;
		animation-timeline: scroll(root);
		animation-range: 0 120px;
	}

	.mem-app .mem-header__logo img {
		animation: memHdrLogo linear both;
		animation-timeline: scroll(root);
		animation-range: 0 120px;
	}

	@media (max-width: 767px) {
		.mem-header__row,
		.mem-app .mem-header__logo img { animation: none; }
	}
}

/* ------------------------------------------------------------------ 2. NAV */

.mem-nav {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.mem-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	/* v2: 7. sekme (İletişim) eklendiğinde bar taşmasın diye taban aralık
	   12px → 10px'e indi (tasarım: clamp(10px,1.2vw,18px)). */
	gap: clamp(10px, 1.2vw, 18px);
}

.mem-nav__list > li { margin: 0; }

.mem-app .mem-nav__link {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--mem-navy, #092E4D);
	/* v2 dikey padding 12/14 (v1: 10/12) → öğe yüksekliği 43px. */
	padding: 12px 2px 14px;
	/* Tasarımda nav linkinde line-height YOK (=normal). base.css'ten miras alınan
	   1.65 öğeyi 43px yerine 47px yapıyor ve hover alt çizgisini 4px aşağı
	   kaydırıyordu (ölçüldü: tasarım 67x43, canlı 67x47). */
	line-height: normal;
	white-space: nowrap;
	text-decoration: none;
	background-image: linear-gradient(var(--mem-cyan, #019EE3), var(--mem-cyan, #019EE3));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	transition: color .22s cubic-bezier(.2, .8, .2, 1), background-size .26s cubic-bezier(.2, .8, .2, 1);
}

.mem-app .mem-nav__link:hover,
.mem-app .mem-nav__link:focus-visible,
.mem-app .mem-nav__link.is-active {
	color: var(--mem-blue, #03568A);
	text-decoration: none;
	background-size: 100% 2px;
}

/* -------------------------------------------------------------- 3. AKSİYON */

.mem-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

/* İkon butonu — hem <a> (arama) hem <button> (burger, drawer kapat) için. */
.mem-app .mem-hdr-icon {
	width: 46px;
	height: 46px;
	padding: 0;
	flex: 0 0 auto;
	border-radius: 999px;
	border: 1px solid var(--mem-border, #DCE8F0);
	background: #ffffff;
	color: var(--mem-blue, #03568A);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}

.mem-app .mem-hdr-icon:hover,
.mem-app .mem-hdr-icon:focus-visible {
	background: var(--mem-tint, #EAF6FC);
	border-color: var(--mem-cyan, #019EE3);
	color: var(--mem-blue, #03568A);
}

.mem-app .mem-burger { color: var(--mem-navy, #092E4D); }
.mem-app .mem-burger:hover,
.mem-app .mem-burger:focus-visible { color: var(--mem-navy, #092E4D); }

.mem-app .mem-hdr-btn {
	height: 46px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s, transform .2s, color .2s;
}

.mem-app .mem-hdr-btn--outline {
	padding: 0 18px;
	border: 1px solid var(--mem-blue, #03568A);
	color: var(--mem-blue, #03568A);
	background: transparent;
}

.mem-app .mem-hdr-btn--outline:hover,
.mem-app .mem-hdr-btn--outline:focus-visible {
	background: var(--mem-tint, #EAF6FC);
	color: var(--mem-blue, #03568A);
	text-decoration: none;
}

.mem-app .mem-hdr-btn--solid {
	padding: 0 22px;
	border: 0;
	background: var(--mem-blue, #03568A);
	color: #ffffff;
}

.mem-app .mem-hdr-btn--solid:hover,
.mem-app .mem-hdr-btn--solid:focus-visible {
	background: var(--mem-blue-dark, #02466F);
	color: #ffffff;
	transform: translateY(-1px);
	text-decoration: none;
}

/* ---------------------------------------------------------- 4. KIRILIMLAR */

@media (min-width: 1180px) {
	.mem-app .mem-burger { display: none !important; }
}

@media (max-width: 1179px) {
	.mem-nav { display: none; }
	.mem-app .mem-hdr-btn { display: none; }
	.mem-header__actions { margin-left: auto; gap: 10px; }
	/* Tasarımda dar ekranda arama ikonu 19 → 20px büyür; burger 22px KALIR
	   (kural burger'ı da kapsayınca hamburger 20px'e düşüyordu). */
	.mem-app .mem-hdr-icon:not(.mem-burger) svg { width: 20px; height: 20px; }
}

@media (max-width: 767px) {
	.mem-header__row { height: 76px; animation: none; }
	.mem-app .mem-header__logo img { height: 48px; animation: none; }
}

/* ------------------------------------------------------- 5. ARAMA PANELİ */

.mem-spanel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	border-top: 1px solid var(--mem-border-soft, #EEF4F8);
	background: #ffffff;
	box-shadow: var(--mem-shadow-pop, 0 18px 40px rgba(3, 86, 138, .12));
	max-height: calc(100dvh - 76px);
	overflow: auto;
	overscroll-behavior: contain;
}

/* Giriş animasyonu görünür hâle gelince oynasın (sayfa yüklenirken değil). */
.mem-spanel:not([hidden]) {
	animation: memHdrIn .2s cubic-bezier(.2, .8, .2, 1) both;
}

.mem-spanel__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px clamp(20px, 4vw, 40px) 26px;
}

.mem-spanel__form { margin: 0; }

.mem-spanel__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--mem-text-muted, #566B7F);
	margin-bottom: 8px;
}

.mem-sfield {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	border: 1px solid var(--mem-border, #DCE8F0);
	border-radius: var(--mem-r-input, 14px);
	padding: 0 16px;
	background: var(--mem-surface-alt, #F5FAFD);
	transition: border-color .2s;
}

.mem-sfield.is-error { border-color: #E7B4A8; }

.mem-sfield > svg { flex: 0 0 auto; }

/* (0,2,0) — base.css'in `:is(input,…)` alan zırhını yener. */
.mem-app .mem-sfield__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 16px;
	/* Tasarımda alan ağırlığı belirtilmez (=400); base.css'in alan zırhı da
	   ağırlık vermez — 500 canlıda kalmış bir sapmaydı. */
	font-weight: 400;
	color: var(--mem-navy, #092E4D);
	outline: none;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
}

.mem-app .mem-sfield__input:focus {
	border: 0;
	background: transparent;
	outline: none;
}

.mem-sfield__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.mem-sfield__spin {
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	border: 2px solid var(--mem-border, #DCE8F0);
	border-top-color: var(--mem-blue, #03568A);
	animation: memHdrSpin .7s linear infinite;
}

.mem-app .mem-sfield__esc {
	border: 0;
	background: transparent;
	color: var(--mem-text-muted, #566B7F);
	cursor: pointer;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	padding: 8px;
	flex: 0 0 auto;
}

.mem-app .mem-sfield__esc:hover,
.mem-app .mem-sfield__esc:focus-visible { color: var(--mem-blue, #03568A); }

/* --- 5a. idle (sık aranan öneriler) --- */

.mem-sidle { display: block; margin-top: 16px; }

.mem-sidle__title {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--mem-text-muted, #566B7F);
}

.mem-sidle__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.mem-app .mem-schip {
	height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--mem-border, #DCE8F0);
	background: #ffffff;
	color: var(--mem-blue, #03568A);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s, border-color .18s;
}

.mem-app .mem-schip:hover,
.mem-app .mem-schip:focus-visible {
	background: var(--mem-tint, #EAF6FC);
	border-color: var(--mem-cyan, #019EE3);
	color: var(--mem-blue, #03568A);
}

/* --- 5b. loading (skeleton) --- */

.mem-sskel {
	list-style: none;
	margin: 14px 0 0;
	padding: 6px;
	border: 1px solid var(--mem-border, #DCE8F0);
	border-radius: 16px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mem-sskel__row { display: flex; align-items: center; gap: 14px; padding: 12px; }

.mem-sskel__thumb,
.mem-sskel__line {
	background: linear-gradient(90deg, #F1F7FB 25%, #E4EFF6 37%, #F1F7FB 63%);
	background-size: 520px 100%;
	animation: memHdrShimmer 1.1s linear infinite;
}

.mem-sskel__thumb { flex: 0 0 auto; width: 64px; height: 44px; border-radius: 10px; }
.mem-sskel__line { flex: 1; height: 14px; border-radius: 7px; }

/* --- 5c. results --- */

.mem-sres {
	margin: 14px 0 0;
	padding: 6px;
	border: 1px solid var(--mem-border, #DCE8F0);
	border-radius: 16px;
	background: #ffffff;
}

.mem-sres__list { list-style: none; margin: 0; padding: 0; }
.mem-sres__list > li { margin: 0; }

.mem-app .mem-sres__link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 12px;
	border-radius: 12px;
	text-decoration: none;
	color: var(--mem-navy, #092E4D);
	background: transparent;
	transition: background .15s;
}

.mem-app .mem-sres__link:hover,
.mem-sres__list > li.is-active > .mem-sres__link {
	background: var(--mem-surface-alt, #F5FAFD);
	color: var(--mem-navy, #092E4D);
	text-decoration: none;
}

.mem-sres__thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 44px;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--mem-tint, #EAF6FC) 0%, var(--mem-surface-alt, #F5FAFD) 100%);
	border: 1px solid #E3EEF5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mem-app .mem-sres__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mem-sres__body { min-width: 0; flex: 1; }

.mem-sres__title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.mem-sres__cat {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--mem-text-muted, #566B7F);
	margin-top: 3px;
}

.mem-sres__arrow { flex: 0 0 auto; }

.mem-app .mem-sres__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--mem-blue, #03568A);
	text-decoration: none;
}

.mem-app .mem-sres__all:hover,
.mem-app .mem-sres__all:focus-visible {
	color: var(--mem-blue, #03568A);
	text-decoration: underline;
}

/* --- 5d. empty --- */

.mem-sempty {
	display: block;
	margin-top: 14px;
	border: 1px solid var(--mem-border, #DCE8F0);
	border-radius: 16px;
	background: #ffffff;
	padding: 20px;
}

.mem-sempty__title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--mem-navy, #092E4D);
}

.mem-sempty__text {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--mem-text-muted, #566B7F);
}

.mem-sempty__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.mem-app .mem-sbtn {
	height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s;
}

.mem-app .mem-sbtn--outline {
	border: 1px solid var(--mem-border, #DCE8F0);
	color: var(--mem-blue, #03568A);
	background: transparent;
}

.mem-app .mem-sbtn--outline:hover,
.mem-app .mem-sbtn--outline:focus-visible {
	background: var(--mem-tint, #EAF6FC);
	color: var(--mem-blue, #03568A);
	text-decoration: none;
}

.mem-app .mem-sbtn--solid {
	border: 0;
	background: var(--mem-blue, #03568A);
	color: #ffffff;
}

.mem-app .mem-sbtn--solid:hover,
.mem-app .mem-sbtn--solid:focus-visible {
	background: var(--mem-blue-dark, #02466F);
	color: #ffffff;
	text-decoration: none;
}

/* --- 5e. error --- */

.mem-serr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 14px;
	border: 1px solid #F3C9C0;
	border-radius: 16px;
	background: #FEF6F4;
	padding: 18px 20px;
}

.mem-serr__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--mem-navy, #092E4D);
}

.mem-app .mem-serr__retry {
	height: 42px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid var(--mem-accent, #C2452F);
	background: #ffffff;
	color: var(--mem-accent, #C2452F);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s;
}

.mem-app .mem-serr__retry:hover,
.mem-app .mem-serr__retry:focus-visible {
	background: #FDECE7;
	border-color: var(--mem-accent, #C2452F);
	color: var(--mem-accent, #C2452F);
}

/* ------------------------------------------------------------- 6. DRAWER */

/*
 * Drawer kabı ŞEFFAF olmalı: perde (`.mem-drawer__scrim`) yarı saydam lacivert
 * olduğu için arkadaki sayfa görünür kalır. Bu blok tasarım-sistemi kapsamı
 * için `.mem-app` sınıfını da taşır ve ondan `background: var(--mem-bg)`
 * (#FBFCFE) miras alıyordu → tüm viewport opak beyazımsı bir katmanla
 * kapanıyor, perdenin altında sayfa hiç görünmüyordu (ölçüm:
 * `getComputedStyle('.mem-app.mem-drawer').backgroundColor` = rgb(251,252,254)).
 * Aynı kök neden sabit iletişim bloğunda da vardı — bkz. chrome/floating.css.
 */
.mem-drawer { position: fixed; inset: 0; z-index: 80; }
.mem-app.mem-drawer { background: none; }

.mem-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(9, 46, 77, .45);
}

.mem-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: min(360px, 92vw);
	height: 100%;
	background: #ffffff;
	padding: 22px 22px 32px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mem-drawer:not([hidden]) .mem-drawer__panel {
	animation: memHdrIn .2s cubic-bezier(.2, .8, .2, 1) both;
}

.mem-drawer__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.mem-app .mem-drawer__logo img { height: 48px; width: auto; display: block; }

.mem-mnav {
	flex: 0 0 auto;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.mem-mnav > li { margin: 0; }

.mem-app .mem-mnav__link {
	display: block;
	padding: 15px 4px;
	font-size: 17px;
	font-weight: 700;
	color: var(--mem-navy, #092E4D);
	border-bottom: 1px solid var(--mem-border-soft, #EEF4F8);
	text-decoration: none;
	transition: color .2s, padding-left .2s;
}

.mem-app .mem-mnav__link:hover,
.mem-app .mem-mnav__link:focus-visible,
.mem-app .mem-mnav__link.is-active {
	color: var(--mem-blue, #03568A);
	padding-left: 8px;
	text-decoration: none;
}

.mem-app .mem-drawer__btn {
	flex: 0 0 auto;
	height: 52px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
}

.mem-app .mem-drawer__btn--outline {
	margin-top: 18px;
	border: 1px solid var(--mem-blue, #03568A);
	color: var(--mem-blue, #03568A);
	background: transparent;
}

.mem-app .mem-drawer__btn--outline:hover,
.mem-app .mem-drawer__btn--outline:focus-visible {
	background: var(--mem-tint, #EAF6FC);
	color: var(--mem-blue, #03568A);
	text-decoration: none;
}

.mem-app .mem-drawer__btn--solid {
	border: 0;
	background: var(--mem-blue, #03568A);
	color: #ffffff;
}

/*
 * Menü ile buton grubu arasındaki boşluğu normalde "Eğitim Paneli" (outline)
 * butonunun margin-top'u taşır. Panel adresi tanımlı değilken o buton hiç
 * basılmaz (1.1.1); "Bilgi Al" menüye yapışmasın diye aynı boşluğu o devralır.
 */
.mem-app .mem-mnav + .mem-drawer__btn--solid { margin-top: 18px; }

.mem-app .mem-drawer__btn--solid:hover,
.mem-app .mem-drawer__btn--solid:focus-visible {
	background: var(--mem-blue-dark, #02466F);
	color: #ffffff;
	text-decoration: none;
}

.mem-drawer__foot {
	flex: 0 0 auto;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--mem-border-soft, #EEF4F8);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mem-app .mem-drawer__contact {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 700;
	color: var(--mem-navy, #092E4D);
	text-decoration: none;
}

.mem-app .mem-drawer__contact:hover,
.mem-app .mem-drawer__contact:focus-visible {
	color: var(--mem-blue, #03568A);
	text-decoration: none;
}

/* Drawer açıkken sayfa kaymasın (JS `.mem-drawer-open` sınıfını <html>'e ekler). */
.mem-drawer-open { overflow: hidden !important; }

/* Kısa ekranda (ör. 375×640) alt CTA ve telefon görünür kalsın — kompaktlaştır. */
@media (max-height: 720px) {
	.mem-drawer__panel { padding: 16px 18px 22px; }
	.mem-drawer__head { margin-bottom: 8px; }
	.mem-app .mem-drawer__logo img { height: 40px; }
	.mem-app .mem-mnav__link { padding: 11px 4px; font-size: 16px; }
	.mem-app .mem-drawer__btn { height: 46px; }
	.mem-app .mem-drawer__btn--outline,
	.mem-app .mem-mnav + .mem-drawer__btn--solid { margin-top: 12px; }
	.mem-drawer__foot { margin-top: 14px; padding-top: 12px; gap: 6px; }
	.mem-app .mem-drawer__contact { font-size: 14px; }
}

/* -------------------------------------------------------- 7. KEYFRAMES */

@keyframes memHdrSurface {
	from { box-shadow: 0 0 0 rgba(3, 86, 138, 0); background-color: rgba(255, 255, 255, 1); }
	to   { box-shadow: 0 10px 30px rgba(3, 86, 138, .13); background-color: rgba(255, 255, 255, .82); }
}

@keyframes memHdrRow {
	from { height: 96px; }
	to   { height: 78px; }
}

@keyframes memHdrLogo {
	from { height: 62px; }
	to   { height: 50px; }
}

@keyframes memHdrIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@keyframes memHdrShimmer {
	from { background-position: -260px 0; }
	to   { background-position: 260px 0; }
}

@keyframes memHdrSpin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.mem-header,
	.mem-header__row,
	.mem-app .mem-header__logo img,
	.mem-spanel,
	.mem-drawer__panel,
	.mem-sskel__thumb,
	.mem-sskel__line,
	.mem-sfield__spin { animation: none !important; }

	.mem-header *,
	.mem-spanel *,
	.mem-drawer * { transition: none !important; }
}