/**
 * Haber Fenerbahçe oyunları — sarı-lacivert
 */
.hfb-games, .hfb-game { --g-navy: #00205b; --g-navy2: #0a2f78; --g-yel: #ffcd00; --g-ok: #16a34a; --g-bad: #dc2626; }

/* ---------- Oyunlar sayfası ---------- */
.hfb-games { margin: 0 0 2em; }
.hfb-games__head { margin: 0 0 20px; text-align: center; }
.hfb-games__title { margin: 0 0 6px; }
.hfb-games__lead { margin: 0 auto; max-width: 640px; color: var(--es-muted); }
.hfb-games__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.es-content .hfb-games__grid > li { margin: 0; }
.hfb-gcard {
	display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 16px; color: #fff !important; text-decoration: none !important;
	background: linear-gradient(160deg, var(--g-navy2), var(--g-navy) 65%, #00153d); box-shadow: 0 12px 30px rgba(0, 21, 64, .25); transition: transform .2s, box-shadow .2s;
}
a.hfb-gcard:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(0, 21, 64, .32); }
a.hfb-gcard:focus-visible { outline: 3px solid var(--g-yel); outline-offset: 3px; }
.hfb-gcard__art { display: grid; place-items: center; aspect-ratio: 16 / 10; background: radial-gradient(70% 90% at 50% 30%, rgba(255, 205, 0, .25), transparent 70%); border-bottom: 4px solid var(--g-yel); }
.hfb-gcard__art svg { width: 46%; height: auto; }
.hfb-gcard__art img { width: 100%; height: 100%; object-fit: cover; }
.hfb-gcard--penalty .hfb-gcard__art { background: linear-gradient(#2f8a3a, #1f6b2a); }
.hfb-gcard__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.hfb-gcard__title { font-family: var(--es-font-heading); font-size: 1.2rem; font-weight: 900; }
.hfb-gcard__text { font-size: .88rem; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.hfb-gcard__btn { align-self: flex-start; margin-top: auto; padding: 9px 20px; border-radius: 999px; background: var(--g-yel); color: var(--g-navy); font-weight: 800; font-size: .88rem; }
.hfb-gcard.is-soon { opacity: .75; }
.hfb-gcard.is-soon .hfb-gcard__btn { background: rgba(255, 255, 255, .2); color: #fff; }
@media (max-width: 900px) { .hfb-games__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hfb-games__grid { grid-template-columns: 1fr; } }

/* ---------- Oyun kabı ---------- */
.hfb-game { position: relative; margin: 0 0 2em; padding: 24px; border-radius: 20px; color: #fff; background: radial-gradient(120% 120% at 0% 0%, rgba(255, 205, 0, .18), transparent 55%), linear-gradient(160deg, var(--g-navy2), var(--g-navy) 60%, #00153d); box-shadow: 0 14px 34px rgba(0, 21, 64, .28); overflow: hidden; }
.hfb-game, .hfb-game * { box-sizing: border-box; }
.hfb-game__loading { margin: 0; text-align: center; opacity: .8; }
.hfb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border: 0; border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; transition: filter .15s, transform .1s; }
.hfb-btn:active { transform: scale(.98); }
.hfb-btn--primary { background: var(--g-yel); color: var(--g-navy); }
.hfb-btn--primary:hover { filter: brightness(1.06); }
.hfb-btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .25); min-height: 40px; font-size: .85rem; }
.hfb-btn--ghost:disabled { opacity: .45; cursor: default; }
.hfb-btn--lg { min-height: 54px; padding: 0 40px; font-size: 1.1rem; }
.hfb-start, .hfb-end { padding: 26px 8px; text-align: center; }
.hfb-start__title, .hfb-end__title { margin: 0 0 8px; color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.hfb-start__text { max-width: 520px; margin: 0 auto 20px; color: rgba(255, 255, 255, .85); }
.hfb-end__trophy { font-size: 3rem; line-height: 1; margin-bottom: 8px; }
.hfb-end__score { margin: 0; font-size: 1.4rem; }
.hfb-end__score strong { font-size: 3rem; color: var(--g-yel); font-family: var(--es-font-heading); }
.hfb-end__msg { margin: 6px 0; font-weight: 600; }
.hfb-end__best { margin: 0 0 18px; color: rgba(255, 255, 255, .8); }
.hfb-share { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 18px; font-size: .85rem; }
.hfb-share__btn { padding: 8px 14px; border-radius: 999px; color: #fff !important; text-decoration: none !important; font-weight: 700; }
.hfb-share__btn--wa { background: #25d366; }
.hfb-share__btn--x { background: #111; }
.hfb-share__btn--fb { background: #1877f2; }

.hfb-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: .85rem; }
.hfb-progress__bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.hfb-progress__bar i { display: block; height: 100%; background: var(--g-yel); transition: width .3s; }
.hfb-progress strong { color: var(--g-yel); }

/* ---------- Soru / şıklar ---------- */
.hfb-q__text { margin: 0 0 14px; color: #fff; font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem); line-height: 1.35; }
.hfb-q__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hfb-opt {
	min-height: 54px; padding: 10px 14px; border: 2px solid rgba(255, 255, 255, .18); border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff;
	font: inherit; font-weight: 700; text-align: left; cursor: pointer; transition: background .15s, border-color .15s;
}
.hfb-opt:hover:not(:disabled) { border-color: var(--g-yel); background: rgba(255, 205, 0, .12); }
.hfb-opt:disabled { cursor: default; }
.hfb-opt.is-right { border-color: var(--g-ok); background: var(--g-ok); }
.hfb-opt.is-wrong { border-color: var(--g-bad); background: var(--g-bad); }
.hfb-q__next { margin-top: 16px; width: 100%; }
.hfb-timer { position: relative; height: 30px; margin: 0 0 14px; border-radius: 8px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.hfb-timer i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, var(--g-yel), #ffb000); transition: width 1s linear; }
.hfb-timer span { position: relative; display: block; text-align: center; line-height: 30px; font-weight: 800; color: var(--g-navy); }
.hfb-timer.is-out i { background: var(--g-bad); }

/* ---------- Oyuncuyu tahmin et ---------- */
.hfb-guess { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 22px; align-items: start; }
.hfb-guess__photo { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #0d3a8f, #00153d); border: 3px solid var(--g-yel); }
.hfb-guess__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: filter .5s; }
.hfb-guess__photo.is-blur img { filter: blur(9px) grayscale(.5); transform: scale(1.06); }
.hfb-guess__photo.is-blur.is-blur-2 img { filter: blur(6px) grayscale(.3); }
.hfb-guess__photo.is-blur.is-blur-3 img { filter: blur(3.5px) grayscale(.1); }
.hfb-guess__photo.is-blur.is-blur-4 img, .hfb-guess__photo.is-blur.is-blur-5 img { filter: blur(1.5px); }
.hfb-guess__sil { position: absolute; inset: 18% 22% 0; border-radius: 50% 50% 0 0; background: rgba(255, 205, 0, .35); }
.hfb-guess__q { margin: 0 0 10px; font-family: var(--es-font-heading); font-size: 1.25rem; font-weight: 900; }
.hfb-guess__hints { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.hfb-guess__hints li { display: flex; flex-direction: column; padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .1); }
.hfb-guess__hints span { font-size: .68rem; opacity: .7; text-transform: uppercase; letter-spacing: .05em; }
.hfb-guess__hints strong { color: var(--g-yel); }
.hfb-guess__side .hfb-q__opts { margin-top: 14px; }
@media (max-width: 640px) {
	.hfb-guess { grid-template-columns: 1fr; gap: 14px; }
	.hfb-guess__photo { width: 100%; max-width: 220px; margin: 0 auto; }
}

/* ---------- Penaltı ---------- */
.hfb-pen__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hfb-pen__dots { display: flex; gap: 6px; }
.hfb-pen__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); }
.hfb-pen__dot.is-goal { background: var(--g-ok); border-color: var(--g-ok); }
.hfb-pen__dot.is-save, .hfb-pen__dot.is-miss { background: var(--g-bad); border-color: var(--g-bad); }
.hfb-pen__msg { margin: 0; font-weight: 800; color: var(--g-yel); }
.hfb-pen {
	position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
	background: linear-gradient(#0b1f4d 0 60%, #2f8a3a 60% 100%);
	background-image: linear-gradient(#0b1f4d 0 60%, transparent 60%), repeating-linear-gradient(90deg, #2f8a3a 0 10%, #2a7d34 10% 20%);
}
.hfb-pen__goal { position: absolute; left: 14%; right: 14%; top: 12%; height: 48%; border: 6px solid #fff; border-bottom: 0; border-radius: 4px 4px 0 0; }
.hfb-pen__net { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .22) 1px, transparent 1px); background-size: 14px 14px; }
.hfb-pen.is-goal .hfb-pen__net { animation: hfb-net .5s ease-out; }
@keyframes hfb-net { 40% { transform: scale(1.03, 1.06); } }
.hfb-pen__zone {
	position: absolute; z-index: 3; width: 22%; height: 34%; transform: translate(-50%, -50%); border: 2px dashed rgba(255, 205, 0, .7); border-radius: 10px;
	background: rgba(255, 205, 0, .1); cursor: crosshair; transition: background .15s;
}
.hfb-pen__zone:hover, .hfb-pen__zone:focus-visible { background: rgba(255, 205, 0, .35); outline: none; }
.hfb-pen.is-goal .hfb-pen__zone, .hfb-pen.is-save .hfb-pen__zone, .hfb-pen.is-miss .hfb-pen__zone { opacity: 0; pointer-events: none; }
.hfb-pen__keeper { position: absolute; z-index: 2; left: 50%; bottom: 0; width: 15%; height: 70%; margin-left: -7.5%; transform-origin: 50% 90%; transition: transform .55s cubic-bezier(.2, .8, .3, 1); }
.hfb-pen__k-head { position: absolute; top: 0; left: 50%; width: 34%; aspect-ratio: 1; margin-left: -17%; border-radius: 50%; background: #f1c27d; }
.hfb-pen__k-body { position: absolute; top: 22%; bottom: 0; left: 8%; right: 8%; border-radius: 30% 30% 10% 10%; background: linear-gradient(90deg, #ffcd00 0 50%, #00205b 50% 100%); box-shadow: inset 0 -12px 0 rgba(0, 0, 0, .25); }
.hfb-pen__k-body::before, .hfb-pen__k-body::after { content: ""; position: absolute; top: 4%; width: 38%; height: 12%; border-radius: 6px; background: #1b1b1b; }
.hfb-pen__k-body::before { left: -30%; }
.hfb-pen__k-body::after { right: -30%; }
.hfb-pen__spot { position: absolute; left: 50%; bottom: 12%; width: 10px; height: 6px; margin-left: -5px; border-radius: 50%; background: #fff; opacity: .8; }
.hfb-pen__ball {
	position: absolute; z-index: 4; left: 50%; bottom: 10%; width: 7%; aspect-ratio: 1; margin-left: -3.5%; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff 0 45%, #d9d9d9 70%), #fff; box-shadow: 0 6px 8px rgba(0, 0, 0, .35);
}
.hfb-pen__ball::after { content: ""; position: absolute; inset: 30%; background: #222; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.hfb-pen__ball.is-fly { transition: transform .6s cubic-bezier(.15, .75, .3, 1); }
@media (prefers-reduced-motion: reduce) {
	.hfb-pen__ball.is-fly, .hfb-pen__keeper { transition-duration: .01s; }
	.hfb-pen.is-goal .hfb-pen__net { animation: none; }
}

@media (max-width: 640px) {
	.hfb-game { padding: 16px; border-radius: 16px; }
	.hfb-q__opts { grid-template-columns: 1fr; }
	.hfb-opt { min-height: 48px; }
	.hfb-pen { aspect-ratio: 4 / 3; }
	.hfb-pen__goal { left: 8%; right: 8%; }
	.hfb-pen__zone { width: 26%; }
}

/* ---------- Penaltı atışı (sahne) ---------- */
.hfb-pick { padding: 10px 0; text-align: center; }
.hfb-pick__fb { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; }
.hfb-pick__group { margin: 18px 0 10px; color: var(--g-yel); font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }
.hfb-pick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.hfb-pick__team { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: .85rem; font-weight: 700; text-align: left; cursor: pointer; }
.hfb-pick__team:hover, .hfb-pick__team:focus-visible { border-color: var(--g-yel); background: rgba(255, 205, 0, .15); outline: none; }
.hfb-pick__logo { flex: none; width: 28px; height: 28px; object-fit: contain; }
.hfb-pick__logo--txt, .hfb-sb__logo--txt { display: grid; place-items: center; border-radius: 50%; background: #111; color: #fff; font-size: .65rem; font-weight: 800; }
.hfb-sb { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; background: rgba(0, 0, 0, .3); }
.hfb-sb__team { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.hfb-sb__team--r { justify-content: flex-end; text-align: right; }
.hfb-sb__logo { width: 30px; height: 30px; object-fit: contain; flex: none; }
.hfb-sb__name { font-weight: 800; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.hfb-sb__dots { display: flex; gap: 4px; width: 100%; }
.hfb-sb__team--r .hfb-sb__dots { justify-content: flex-end; }
.hfb-sb__dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); }
.hfb-sb__dots i.is-goal { background: var(--g-ok); border-color: var(--g-ok); }
.hfb-sb__dots i.is-miss { background: var(--g-bad); border-color: var(--g-bad); }
.hfb-sb__score { display: flex; gap: 6px; align-items: center; font-family: var(--es-font-heading); font-size: 1.8rem; font-weight: 900; }
.hfb-sb__score b { min-width: 30px; text-align: center; color: var(--g-yel); }
.hfb-pen2__msg { min-height: 1.5em; margin: 0 0 8px; font-weight: 800; color: var(--g-yel); text-align: center; }
.hfb-pen2 { position: relative; border-radius: 14px; overflow: hidden; touch-action: manipulation; }
.hfb-pen2__svg { display: block; width: 100%; height: auto; cursor: pointer; user-select: none; -webkit-user-select: none; }
.hfb-pen2.is-fx::after { content: attr(data-fx); position: absolute; left: 50%; top: 58%; transform: translateX(-50%); color: var(--g-yel); font-family: var(--es-font-heading); font-weight: 900; font-size: clamp(2rem, 6vw, 4rem); text-shadow: 0 4px 0 #00205b, 0 8px 20px rgba(0, 0, 0, .5); animation: hfb-pop .6s ease-out; pointer-events: none; }
@keyframes hfb-pop { from { transform: translateX(-50%) scale(.4); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.hfb-pen2__ctr { display: flex; justify-content: center; margin-top: 12px; }
.hfb-pen2__go { min-width: 220px; }
.hfb-pen2__keep { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 520px; }
.hfb-pen2__keep .hfb-btn { min-height: 52px; font-size: .95rem; }
.hfb-pen2__keep .hfb-btn.is-on { background: #16a34a; border-color: #16a34a; color: #fff; }
.hfb-end__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .hfb-pen2.is-fx::after { animation: none; } }
@media (max-width: 640px) {
	.hfb-sb__score { font-size: 1.4rem; }
	.hfb-sb__name { font-size: .78rem; }
	.hfb-pen2__go { width: 100%; }
	.hfb-pen2__keep .hfb-btn { font-size: .82rem; padding: 0 8px; }
}

/* Oyuncu kartı: herkes Fenerbahçe formasıyla */
.hfb-kitcard { background: radial-gradient(90% 70% at 50% 20%, #1e4fae, #00205b 60%, #00153d); }
.hfb-kitcard__shirt { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; }
.hfb-kitcard__face { position: absolute; left: 50%; top: 8%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; overflow: hidden; border: 4px solid #ffcd00; background: #0d3a8f; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); z-index: 1; }
.hfb-kitcard__face img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.hfb-kitcard .hfb-guess__sil { inset: 18% 22% 0; }

/* Penaltı: mobilde oyun alanı ekran genişliğinde */
@media (max-width: 640px) {
	.hfb-game--penalty.is-playing { margin-inline: -16px; padding: 10px 8px 14px; border-radius: 0; }
	.hfb-game--penalty .hfb-pen2 { border-radius: 10px; }
	.hfb-pen2__keep { gap: 6px; }
	.hfb-pen2__keep .hfb-btn { min-height: 58px; font-size: 1.05rem; }
	.hfb-pen2__msg { font-size: .9rem; }
}
.hfb-pen2__svg { touch-action: none; }

/* ---------- Kariyerden Bul ---------- */
.hfb-career__path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: c; }
.hfb-career__club { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font-weight: 700; font-size: .92rem; }
.hfb-career__club + .hfb-career__club::before { content: "→"; position: absolute; left: -12px; color: var(--g-yel); font-weight: 900; transform: translateX(-50%); }
.hfb-career__path { column-gap: 22px; }
.hfb-career__n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: .72rem; }
.hfb-career__club.is-fb { background: linear-gradient(90deg, #ffcd00 0 50%, #00205b 50% 100%); border-color: #ffcd00; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.hfb-career__club.is-fb .hfb-career__n { background: #00205b; color: #ffcd00; text-shadow: none; }
.hfb-career__reveal { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px; border-radius: 12px; background: rgba(255, 205, 0, .12); }
.hfb-career__reveal[hidden] { display: none; }
.hfb-career__reveal img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 18%; border: 3px solid var(--g-yel); }
.hfb-career__reveal strong { font-size: 1.15rem; color: var(--g-yel); }
@media (max-width: 640px) {
	.hfb-career__club { font-size: .82rem; padding: 6px 10px 6px 6px; }
	.hfb-career__path { column-gap: 18px; }
}
.hfb-gcard--career .hfb-gcard__art { background: radial-gradient(70% 90% at 50% 30%, rgba(255, 205, 0, .3), transparent 70%); }