/**
 * NDE Eğitim — Yedek Panel Kabuğu (Fallback Panel Shell)
 *
 * @since 1.8.4
 *
 * Bu dosya YALNIZCA aktif tema panel şablonlarını sağlamadığında
 * (NDE_Panel_Templates::is_active() === true) yüklenir. "noropsikoloji-
 * egitim" teması aktifken hiç enqueue edilmez; dolayısıyla tema CSS'i
 * ile çakışmaz.
 *
 * İki iş yapar:
 *  1) Panel İÇERİĞİNİN bağımlı olduğu --nde-* CSS değişkenlerini tanımlar
 *     (tema yokken bu değişkenler tanımsız kalır ve içerik renksiz çıkar).
 *  2) Panel KABUĞUNU (.nde-fb-*) — başlık, sekme menüsü, giriş kartı —
 *     stilize eder.
 */

/* ════════════════════════════════════════════════
 * 1) CSS DEĞİŞKEN VARSAYILANLARI
 *    Yalnızca tema bunları tanımlamadığında devreye girer.
 * ════════════════════════════════════════════════ */
:root {
	--nde-primary:   #1b3a5c;  /* NDE lacivert */
	--nde-secondary: #2f5d8a;  /* orta mavi */
	--nde-accent:    #d4a438;  /* altın vurgu */

	--nde-gray-50:  #f8fafc;
	--nde-gray-100: #f1f5f9;
	--nde-gray-200: #e2e8f0;
	--nde-gray-300: #cbd5e1;
	--nde-gray-400: #94a3b8;
	--nde-gray-500: #64748b;
	--nde-gray-600: #475569;
	--nde-gray-700: #334155;
	--nde-gray-800: #1e293b;
	--nde-gray-900: #0f172a;

	/* Kabuğa özel */
	--nde-fb-radius: 14px;
	--nde-fb-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px rgba(15, 23, 42, .06);
}

/* ════════════════════════════════════════════════
 * 2) PANEL KABUĞU
 * ════════════════════════════════════════════════ */
.nde-fb-wrap {
	max-width: 1080px;
	margin: 2rem auto;
	padding: 0 1rem;
	box-sizing: border-box;
}
.nde-fb-wrap--narrow { max-width: 440px; }

.nde-fb-wrap *,
.nde-fb-wrap *::before,
.nde-fb-wrap *::after { box-sizing: border-box; }

.nde-fb-panel {
	background: #fff;
	border: 1px solid var(--nde-gray-200);
	border-radius: var(--nde-fb-radius);
	box-shadow: var(--nde-fb-shadow);
	overflow: hidden;
}

/* ── Başlık çubuğu ── */
.nde-fb-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1.1rem 1.5rem;
	background: linear-gradient(135deg, var(--nde-primary), var(--nde-secondary));
	color: #fff;
}
.nde-fb-header__main { min-width: 0; }
.nde-fb-brand {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .8;
}
.nde-fb-title {
	margin: .1rem 0 0;
	font-size: 1.32rem;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}
.nde-fb-header__user {
	display: flex;
	align-items: center;
	gap: .85rem;
	flex-shrink: 0;
}
.nde-fb-user {
	font-size: .9rem;
	font-weight: 500;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nde-fb-logout {
	display: inline-block;
	padding: .4rem .9rem;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 999px;
	color: #fff;
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
.nde-fb-logout:hover,
.nde-fb-logout:focus {
	background: rgba(255, 255, 255, .16);
	border-color: #fff;
	color: #fff;
}

/* ── Sekme menüsü (pill) ── */
.nde-fb-nav {
	display: flex;
	gap: .4rem;
	padding: .7rem 1rem;
	background: var(--nde-gray-50);
	border-bottom: 1px solid var(--nde-gray-200);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.nde-fb-nav__item {
	flex-shrink: 0;
	padding: .5rem 1rem;
	border-radius: 999px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--nde-gray-600);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.nde-fb-nav__item:hover,
.nde-fb-nav__item:focus {
	background: var(--nde-gray-200);
	color: var(--nde-gray-900);
}
.nde-fb-nav__item.is-active {
	background: var(--nde-primary);
	color: #fff;
}
.nde-fb-nav__item.is-active:hover,
.nde-fb-nav__item.is-active:focus {
	background: var(--nde-primary);
	color: #fff;
}

/* ── İçerik alanı ── */
.nde-fb-content {
	display: block;
	padding: 1.6rem 1.5rem;
}

/* ── Bilgi / uyarı kartı ── */
.nde-fb-notice {
	padding: 1.1rem 1.25rem;
	background: var(--nde-gray-50);
	border: 1px solid var(--nde-gray-200);
	border-radius: 10px;
	color: var(--nde-gray-700);
	font-size: .92rem;
}
.nde-fb-notice strong { color: var(--nde-gray-900); }
.nde-fb-notice p { margin: .5rem 0 0; }
.nde-fb-notice--deny {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}
.nde-fb-notice--deny strong { color: #991b1b; }

.nde-fb-btn {
	display: inline-block;
	margin-top: .35rem;
	padding: .55rem 1.15rem;
	background: var(--nde-primary);
	border-radius: 8px;
	color: #fff;
	font-size: .86rem;
	font-weight: 600;
	text-decoration: none;
	transition: opacity .15s ease;
}
.nde-fb-btn:hover,
.nde-fb-btn:focus { opacity: .9; color: #fff; }

/* ════════════════════════════════════════════════
 * 3) GİRİŞ KARTI (/giris/ yedeği)
 * ════════════════════════════════════════════════ */
.nde-fb-login {
	background: #fff;
	border: 1px solid var(--nde-gray-200);
	border-radius: var(--nde-fb-radius);
	box-shadow: var(--nde-fb-shadow);
	padding: 1.75rem;
}
.nde-fb-login__head { text-align: center; margin-bottom: 1.25rem; }
.nde-fb-login__head .nde-fb-brand { color: var(--nde-accent); }
.nde-fb-login__head .nde-fb-title { color: var(--nde-primary); }
.nde-fb-login__sub {
	margin: .4rem 0 0;
	font-size: .88rem;
	color: var(--nde-gray-500);
}
.nde-fb-login .login-username,
.nde-fb-login .login-password { margin-bottom: .85rem; }
.nde-fb-login label {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	color: var(--nde-gray-700);
	margin-bottom: .3rem;
}
.nde-fb-login input[type="text"],
.nde-fb-login input[type="password"] {
	width: 100%;
	padding: .6rem .75rem;
	border: 1px solid var(--nde-gray-300);
	border-radius: 8px;
	font-size: .95rem;
	color: var(--nde-gray-900);
	background: #fff;
}
.nde-fb-login input[type="text"]:focus,
.nde-fb-login input[type="password"]:focus {
	outline: 2px solid var(--nde-secondary);
	outline-offset: 1px;
	border-color: var(--nde-secondary);
}
.nde-fb-login .login-remember {
	margin: .25rem 0 .9rem;
	font-size: .85rem;
}
.nde-fb-login .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 500;
	margin-bottom: 0;
}
.nde-fb-login .login-submit input[type="submit"],
.nde-fb-login .login-submit .button {
	width: 100%;
	padding: .68rem 1rem;
	background: var(--nde-primary);
	border: none;
	border-radius: 8px;
	color: #fff;
	font-size: .95rem;
	font-weight: 700;
	cursor: pointer;
	transition: opacity .15s ease;
}
.nde-fb-login .login-submit input[type="submit"]:hover,
.nde-fb-login .login-submit .button:hover { opacity: .9; }
.nde-fb-login__links {
	margin: 1rem 0 0;
	text-align: center;
	font-size: .85rem;
}
.nde-fb-login__links a { color: var(--nde-secondary); }

/* ════════════════════════════════════════════════
 * 4) DUYARLI (RESPONSIVE)
 * ════════════════════════════════════════════════ */
@media (max-width: 600px) {
	.nde-fb-wrap { margin: 1rem auto; }
	.nde-fb-header { padding: 1rem 1.1rem; }
	.nde-fb-title { font-size: 1.15rem; }
	.nde-fb-content { padding: 1.15rem 1.1rem; }
	.nde-fb-header__user { width: 100%; justify-content: space-between; }
	.nde-fb-user { max-width: none; }
	.nde-fb-login { padding: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
	.nde-fb-logout,
	.nde-fb-nav__item,
	.nde-fb-btn,
	.nde-fb-login .login-submit input[type="submit"] { transition: none; }
}

/* ════════════════════════════════════════════════
 * 5) PANEL BUTONLARI (#1.8.8)
 * Panel içeriği .nde-btn--* (BEM) sınıflarını kullanır; bunlar
 * normalde "noropsikoloji-egitim" temasının CSS'inde tanımlıdır.
 * Yedek şablon devredeyken tema CSS'i olmadığından butonlar stilsiz
 * kalırdı — burada minimal ama tutarlı bir stil sağlıyoruz.
 * ════════════════════════════════════════════════ */
.nde-fb-content .nde-btn,
.nde-fb-panel   .nde-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	padding: .5rem 1rem;
	border: 1px solid var(--nde-gray-300);
	border-radius: 8px;
	background: #fff;
	color: var(--nde-gray-700);
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.nde-fb-content .nde-btn:hover,
.nde-fb-panel   .nde-btn:hover {
	background: var(--nde-gray-100);
}
.nde-fb-content .nde-btn--primary,
.nde-fb-panel   .nde-btn--primary {
	background: var(--nde-primary);
	border-color: var(--nde-primary);
	color: #fff;
}
.nde-fb-content .nde-btn--primary:hover,
.nde-fb-panel   .nde-btn--primary:hover {
	background: var(--nde-primary);
	opacity: .9;
}
.nde-fb-content .nde-btn--outline,
.nde-fb-panel   .nde-btn--outline {
	background: #fff;
	border-color: var(--nde-primary);
	color: var(--nde-primary);
}
.nde-fb-content .nde-btn--outline:hover,
.nde-fb-panel   .nde-btn--outline:hover {
	background: var(--nde-gray-50);
}
.nde-fb-content .nde-btn--ghost,
.nde-fb-panel   .nde-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--nde-primary);
}
.nde-fb-content .nde-btn--ghost:hover,
.nde-fb-panel   .nde-btn--ghost:hover {
	background: var(--nde-gray-100);
}
.nde-fb-content .nde-btn--sm,
.nde-fb-panel   .nde-btn--sm {
	padding: .3rem .7rem;
	font-size: .78rem;
	border-radius: 6px;
}