/**
 * FB Ders Kapağı — "Aurora"
 * Görseli olmayan ders kartının kapağı. Tamamı CSS; yeniden ölçeklenen bir GIF
 * yok, her boyutta ve her ekran yoğunluğunda net.
 *
 * NOT: .fblc-cover > span kuralının özgüllüğü (0,1,1) tek sınıflı kurallardan
 * yüksektir. Yığın içindeki her öğe bu yüzden iki sınıfla yazılır — aksi hâlde
 * display:flex sessizce display:block'a yeniliyor ve kompozisyon dağılıyor.
 */

.fbl-thumb .fblc-cover{
	position:absolute;
	inset:0;
	display:block;
	overflow:hidden;
	z-index:0;
	background:#0A0C12;
	container-type:inline-size;
	border-radius:inherit;
}

/* Kartın kendi rozetleri her zaman kapağın üstünde kalsın. */
.fbl-thumb .fbl-badge,
.fbl-thumb .fbt-duration{ z-index:3; }

/* Devralma: FB Ders Yayın Planı'nın kapağı ve altındaki işe yaramaz gri YouTube
   karesi gizlenir — silinmez, böylece o eklentinin kendi betiği kırılmaz.
   :has() desteklemeyen tarayıcıda betiğimiz aynı işi elle yapar. */
.fbl-thumb:has(.fblc-cover) .fbls-ov,
.fbl-thumb:has(.fblc-cover) .fbt-poster,
.fbl-thumb .fblc-cover ~ .fbls-ov,
.fblc-hide{ display:none !important; }

.fblc-cover > span{ display:block; position:absolute; }

/* ---------- 1 · Aurora zemin ---------- */
.fblc-cover > .fblc-bg{
	inset:-25%;
	filter:blur(clamp(16px,6cqw,46px));
	opacity:.9;
	z-index:1;
}
.fblc-bg > span{
	display:block;
	position:absolute;
	width:52%;
	aspect-ratio:1;
	border-radius:50%;
}
.fblc-b1{
	background:radial-gradient(circle,rgba(108,92,231,.95),transparent 68%);
	left:6%; top:8%;
	animation:fblc-drift1 17s ease-in-out infinite;
}
.fblc-b2{
	background:radial-gradient(circle,rgba(214,48,214,.85),transparent 68%);
	right:2%; top:22%;
	animation:fblc-drift2 21s ease-in-out infinite;
}
.fblc-b3{
	background:radial-gradient(circle,rgba(255,45,117,.72),transparent 68%);
	left:32%; bottom:2%;
	animation:fblc-drift3 25s ease-in-out infinite;
}
@keyframes fblc-drift1{0%,100%{transform:translate(0,0) scale(1)}   50%{transform:translate(22%,14%) scale(1.18)}}
@keyframes fblc-drift2{0%,100%{transform:translate(0,0) scale(1.1)} 50%{transform:translate(-18%,10%) scale(.92)}}
@keyframes fblc-drift3{0%,100%{transform:translate(0,0) scale(.95)} 50%{transform:translate(14%,-16%) scale(1.15)}}

.fblc-cover > .fblc-veil{
	inset:0; z-index:2;
	background:radial-gradient(120% 90% at 50% 45%,transparent 26%,rgba(10,12,18,.74) 100%);
}
.fblc-cover > .fblc-halo{
	left:50%; top:50%; z-index:3;
	width:46%; aspect-ratio:1; border-radius:50%;
	transform:translate(-50%,-50%);
	background:radial-gradient(circle,rgba(255,255,255,.14),transparent 62%);
	animation:fblc-breathe 6s ease-in-out infinite;
}
@keyframes fblc-breathe{
	0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.94)}
	50%    {opacity:1; transform:translate(-50%,-50%) scale(1.06)}
}

/* Altta ince marka çizgisi */
.fblc-cover > .fblc-line{
	left:0; right:0; bottom:0; height:2px; z-index:5;
	background:linear-gradient(90deg,rgba(108,92,231,.9),rgba(214,48,214,.9) 52%,rgba(255,45,117,.9));
}

/* ---------- 2 · Ortalanmış yığın: logo, tarih, sayaç ---------- */
.fblc-cover > .fblc-stack{
	inset:0; z-index:4;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:clamp(5px,2cqw,11px);
	padding:0 6%;
	text-align:center;
}

.fblc-stack .fblc-mark{
	display:block;
	width:clamp(44px,20cqw,116px);
	aspect-ratio:1;
	flex:none;
	background-image:var(--fblc-mark);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	filter:drop-shadow(0 10px 30px rgba(12,4,20,.55));
	animation:fblc-float 7s ease-in-out infinite;
}
@keyframes fblc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4%)}}

.fblc-stack .fblc-cd{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:clamp(5px,2cqw,11px);
}

.fblc-stack .fblc-when,
.fblc-stack .fblc-word{
	display:block;
	font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
	line-height:1;
	white-space:nowrap;
	text-transform:uppercase;
}
.fblc-stack .fblc-when{
	font-size:clamp(7.5px,2.6cqw,13px);
	letter-spacing:.22em;
	text-indent:.22em;               /* harf aralığının sağda bıraktığı boşluğu geri alır */
	color:rgba(255,255,255,.82);
}
.fblc-stack .fblc-word{
	font-size:clamp(7px,2.6cqw,13px);
	letter-spacing:.30em;
	text-indent:.30em;
	color:rgba(255,255,255,.66);
}

/* Sayaç: JavaScript çalışana kadar gizli, altındaki tarih satırı yeter. */
.fblc-stack .fblc-clock{ display:none; }
.fblc-stack .fblc-cd.is-live .fblc-clock{
	display:flex;
	align-items:flex-end;
	justify-content:center;
	gap:clamp(5px,2.2cqw,13px);
	background:rgba(9,7,16,.34);
	border:1px solid rgba(255,255,255,.16);
	padding:clamp(5px,1.8cqw,10px) clamp(9px,3.4cqw,19px);
	border-radius:11px;
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
}
.fblc-clock .fblc-u{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:2px;
	line-height:1;
}
.fblc-clock .fblc-n{
	display:block;
	font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
	font-weight:600;
	font-size:clamp(13px,5.2cqw,27px);
	color:#fff;
	font-variant-numeric:tabular-nums;
	letter-spacing:.02em;
}
.fblc-clock .fblc-l{
	display:block;
	font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
	font-size:clamp(6px,1.9cqw,10px);
	letter-spacing:.14em;
	text-transform:uppercase;
	color:rgba(255,255,255,.58);
}
.fblc-clock .fblc-sep{
	display:block;
	font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
	font-size:clamp(11px,3.8cqw,21px);
	color:rgba(255,255,255,.3);
	padding-bottom:clamp(8px,3cqw,15px);
}

/* Süre dolduğunda sayacın yerini alan satır. */
.fblc-stack .fblc-over{
	display:none;
	font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
	font-size:clamp(9px,3.4cqw,17px);
	font-weight:600;
	letter-spacing:.14em;
	text-indent:.14em;
	text-transform:uppercase;
	line-height:1;
	white-space:nowrap;
	color:#fff;
	background:rgba(9,7,16,.34);
	border:1px solid rgba(255,255,255,.16);
	padding:clamp(6px,2cqw,11px) clamp(10px,3.6cqw,20px);
	border-radius:11px;
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
}
/* Bu iki kural sıraya bağlıdır: aynı özgüllükte, sonraki kazanır. */
.fblc-stack .fblc-cd.is-over .fblc-clock{ display:none; }
.fblc-stack .fblc-cd.is-over .fblc-over{ display:block; }

/* "Yakında" etiketi — kartın kendi rozetinin karşısına */
.fblc-cover > .fblc-pill{
	right:10px; top:10px; z-index:6;
	width:max-content;
	font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
	font-size:10px;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:#fff;
	background:rgba(255,255,255,.14);
	border:1px solid rgba(255,255,255,.32);
	padding:3px 9px;
	border-radius:999px;
	-webkit-backdrop-filter:blur(3px);
	backdrop-filter:blur(3px);
}

/* Hareket istemeyen ziyaretçi: kompozisyon durur, sayaç işlemeye devam eder. */
@media (prefers-reduced-motion:reduce){
	.fblc-b1,.fblc-b2,.fblc-b3,
	.fblc-cover > .fblc-halo,
	.fblc-stack .fblc-mark{ animation:none; }
}