/* ==========================================================================
   HaberCMS Mini Oyunlar
   Tema değişkenleriyle uyumlu oyun stilleri.
   ========================================================================== */

/* ---------- Genel ---------- */
.game-header { text-align: center; margin-bottom: 2rem; }
.game-title { font-size: 1.6rem; color: var(--heading, #1b2a3d); }
.game-subtitle { display: block; font-size: .85rem; font-weight: 400; color: var(--muted, #616875); margin-top: .3rem; }
.game-content { min-height: 320px; }
.game-footer { text-align: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

/* ---------- Nav ---------- */
.game-nav { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-bottom: 1.2rem; }
.game-nav-link {
	display: inline-block; padding: .4rem .85rem; border-radius: 4px; font-size: .82rem;
	text-decoration: none; color: var(--text-muted, #616875); background: var(--surface-alt, #f5f7f9);
	border: 1px solid var(--border); transition: all .15s;
}
.game-nav-link:hover { color: var(--brand, #ed0d0d); border-color: var(--brand, #ed0d0d); }
.game-nav-link.is-active {
	color: #fff; background: var(--brand, #ed0d0d);
	border-color: var(--brand, #ed0d0d); font-weight: 600;
}

/* ---------- Ortak ---------- */
.game-btn {
	display: inline-block; padding: .55rem 1.4rem; margin: .6rem .3rem; border: none; border-radius: 5px;
	font-size: .88rem; font-weight: 600; cursor: pointer; transition: background .15s, transform .1s;
	color: #fff; background: var(--brand, #ed0d0d);
}
.game-btn:hover:not(:disabled) { background: var(--brand-dark, #db0d0d); transform: translateY(-1px); }
.game-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.game-restart { background: var(--blue, #0a58ca); }
.game-restart:hover:not(:disabled) { background: #0947a8; }
.game-hint { background: #ffc107; color: #000; }
.game-hint:hover:not(:disabled) { background: #e0a800; color: #000; }

.game-alert {
	padding: 1rem 1.5rem; margin: 1rem auto; max-width: 420px; text-align: center;
	border-radius: 6px; font-size: 1.05rem; font-weight: 600;
}
.game-win { color: #155724; background: #d4edda; border: 1px solid #c3e6cb; }
.game-win-text { color: #155724; font-weight: 700; }
.game-lose-text { color: var(--brand, #ed0d0d); font-weight: 700; }

/* ==========================================================================
   1. HAFIZA OYUNU
   ========================================================================== */
.memory-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; max-width: 420px; margin: 0 auto; }
.memory-card {
	width: 100%; aspect-ratio: 1; border: 2px solid var(--border); border-radius: 8px;
	background: var(--surface-alt, #f5f7f9); cursor: pointer; font-size: 1.8rem;
	display: flex; align-items: center; justify-content: center;
	transition: transform .3s, background .3s;
	color: transparent; user-select: none;
}
.memory-card:hover { border-color: var(--brand, #ed0d0d); }
.memory-card.is-flipped {
	background: var(--brand, #ed0d0d); color: #fff; border-color: var(--brand, #ed0d0d);
	animation: gp-bump .22s ease;
}
.memory-card.is-matched {
	background: #d4edda; color: #155724; border-color: #c3e6cb; cursor: default;
}
.memory-stats { text-align: center; margin-bottom: 1rem; font-size: .95rem; color: var(--muted, #616875); }
.memory-stats strong { color: var(--heading, #1b2a3d); }

/* ==========================================================================
   2. SUDOKU
   ========================================================================== */
.sudoku-board {
	display: grid; grid-template-columns: repeat(9, 1fr); gap: 0;
	max-width: 396px; margin: 0 auto 1rem; border: 2px solid var(--heading, #1b2a3d);
}
.sudoku-cell {
	width: 100%; aspect-ratio: 1; border: 1px solid var(--border);
	text-align: center; font-size: 1.05rem; font-weight: 500;
	background: #fff; color: var(--text, #222);
	outline: none; padding: 0; caret-color: var(--brand, #ed0d0d);
	transition: background .2s;
}
.sudoku-cell:focus { background: #fff8e1; z-index: 1; }
.sudoku-cell.highlight { background: #fff3cd; }
.sudoku-cell.is-given { background: var(--surface-alt, #f5f7f9); font-weight: 700; color: var(--heading, #1b2a3d); }
.sudoku-cell.is-error { background: #f8d7da; color: var(--brand, #ed0d0d); font-weight: 700; }
.sudoku-cell.is-hint-flash { background: #d4edda; font-weight: 700; color: #155724; }
.border-bottom-thick { border-bottom: 2px solid var(--heading, #1b2a3d) !important; }
.border-right-thick { border-right: 2px solid var(--heading, #1b2a3d) !important; }
.sudoku-stats { text-align: center; }
.sudoku-error-msg { color: var(--brand, #ed0d0d); font-weight: 600; }
.sudoku-msg-line { font-size: .88rem; color: var(--muted, #616875); margin-bottom: .4rem; }

/* ==========================================================================
   3. KELİME TAHMİNİ
   ========================================================================== */
.wg-board { text-align: center; max-width: 540px; margin: 0 auto; }
.wg-hangman { margin-bottom: .8rem; }
.wg-wrong-count { font-size: .85rem; color: var(--muted, #616875); margin-bottom: .8rem; }
.wg-word { display: flex; justify-content: center; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.wg-letter {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.2rem; height: 2.8rem; border-bottom: 2px solid var(--heading, #1b2a3d);
	font-size: 1.3rem; font-weight: 700; color: var(--text, #222);
}
.wg-letter.is-revealed { color: var(--brand, #ed0d0d); border-color: var(--brand, #ed0d0d); }
.wg-category {
	display: inline-block; padding: .2rem .8rem; border-radius: 3px; font-size: .82rem; font-weight: 600;
	background: var(--surface-alt, #f5f7f9); color: var(--muted, #616875); margin-bottom: 1rem;
}
.wg-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin-bottom: 1rem; }
.wg-key {
	width: 2.2rem; height: 2.2rem; border: 1px solid var(--border); border-radius: 4px;
	background: #fff; color: var(--text, #222); font-size: .85rem; font-weight: 600;
	cursor: pointer; transition: all .12s;
}
.wg-key:hover:not(.is-used) { border-color: var(--brand, #ed0d0d); color: var(--brand, #ed0d0d); background: #fff8f8; }
.wg-key.is-used { opacity: .3; cursor: default; pointer-events: none; }
.wg-msg { font-size: 1rem; font-weight: 600; min-height: 1.5em; margin-top: .6rem; }

/* ==========================================================================
   4. BİLGİ YARIŞMASI
   ========================================================================== */
.quiz-container { max-width: 540px; margin: 0 auto; }
.quiz-progress { text-align: center; font-size: .9rem; color: var(--muted, #616875); margin-bottom: 1rem; }
.quiz-question { font-size: 1.1rem; font-weight: 600; color: var(--heading, #1b2a3d); margin-bottom: 1rem; padding: .8rem 1rem; background: var(--surface-alt, #f5f7f9); border-radius: 6px; border-left: 4px solid var(--brand, #ed0d0d); }
.quiz-options { display: flex; flex-direction: column; gap: .5rem; }
.quiz-opt {
	display: block; width: 100%; text-align: left; padding: .7rem 1rem; border: 2px solid var(--border);
	border-radius: 6px; background: #fff; color: var(--text, #222); font-size: .92rem;
	cursor: pointer; transition: all .15s;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--blue, #0a58ca); background: #f0f7ff; }
.quiz-opt.is-correct { border-color: #28a745 !important; background: #d4edda !important; color: #155724 !important; font-weight: 700; }
.quiz-opt.is-wrong { border-color: var(--brand, #ed0d0d) !important; background: #f8d7da !important; color: #721c24 !important; }

/* ==========================================================================
   5. TAŞ KAĞIT MAKAS
   ========================================================================== */
.rps-score { text-align: center; margin-bottom: 1.2rem; font-size: .95rem; color: var(--text, #222); }
.rps-choices { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.rps-btn {
	display: flex; flex-direction: column; align-items: center; gap: .4rem;
	width: 7rem; padding: 1.2rem .8rem; border: 2px solid var(--border); border-radius: 12px;
	background: #fff; cursor: pointer; transition: all .2s;
}
.rps-btn:hover { border-color: var(--brand, #ed0d0d); transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.rps-icon { font-size: 2rem; }
.rps-name { font-size: .82rem; font-weight: 600; color: var(--text, #222); }
.rps-result { text-align: center; min-height: 5rem; font-size: 1.1rem; padding: .5rem; }
.rps-player-move, .rps-cpu-move { font-size: 2.5rem; display: inline-block; padding: .2rem; }
.rps-vs { font-size: .85rem; color: var(--muted, #616875); margin: 0 .5rem; }
.rps-verdict { font-weight: 700; font-size: 1rem; margin-top: .4rem; }
.rps-win { color: #155724; }
.rps-lose { color: var(--brand, #ed0d0d); }
.rps-draw { color: var(--muted, #616875); }

/* ==========================================================================
   6. XOX
   ========================================================================== */
.xox-board {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
	max-width: 320px;
	margin: 0 auto 1rem;
}
.xox-cell {
	aspect-ratio: 1;
	border: 2px solid var(--border);
	border-radius: 8px;
	background: var(--surface-alt, #f5f7f9);
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--heading, #1b2a3d);
	cursor: pointer;
	transition: background .15s, border-color .15s, transform .15s;
	display: flex; align-items: center; justify-content: center;
}
.xox-cell:hover:not(:disabled) { border-color: var(--brand, #ed0d0d); transform: scale(1.02); }
.xox-cell.is-x { color: var(--brand, #ed0d0d); }
.xox-cell.is-o { color: var(--blue, #0a58ca); }
.xox-cell.is-winner { background: #fff3cd !important; border-color: #ffc107 !important; animation: pulse 0.8s infinite alternate; }
.xox-cell:disabled { cursor: default; }
.xox-status {
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	color: var(--heading, #1b2a3d);
	min-height: 1.6em;
	margin-bottom: 1rem;
}
.xox-status.xox-win { color: #155724; }
.xox-status.xox-lose { color: var(--brand, #ed0d0d); }
.xox-status.xox-draw { color: var(--muted, #616875); }

@keyframes pulse {
	0% { transform: scale(1); }
	100% { transform: scale(1.05); }
}

/* ==========================================================================
   7. SAYI AVI
   ========================================================================== */
.guess-board { max-width: 420px; margin: 0 auto; text-align: center; }
.guess-status {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--heading, #1b2a3d);
	min-height: 1.6em;
	margin-bottom: 1.2rem;
}
.guess-status.guess-win { color: #155724; }
.guess-input-row { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1rem; }
.guess-input {
	width: 120px;
	padding: .6rem .8rem;
	border: 2px solid var(--border);
	border-radius: 6px;
	font-size: 1.1rem;
	font-weight: 700;
	text-align: center;
	background: #fff;
	color: var(--text, #222);
	outline: none;
}
.guess-input:focus { border-color: var(--brand, #ed0d0d); }
.guess-range {
	font-size: .95rem;
	font-weight: 700;
	color: var(--brand, #ed0d0d);
	min-height: 1.4em;
	margin-bottom: .6rem;
}
.guess-attempts { font-size: .9rem; color: var(--muted, #616875); }
.guess-btn { height: 100%; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 600px) {
	.game-nav { gap: .3rem; }
	.game-nav-link { padding: .35rem .6rem; font-size: .75rem; }
	.memory-board { max-width: 320px; gap: .4rem; }
	.memory-card { font-size: 1.4rem; }
	.sudoku-board { max-width: 315px; }
	.sudoku-cell { font-size: .85rem; }
	.wg-key { width: 1.8rem; height: 1.8rem; font-size: .72rem; }
	.rps-btn { width: 5.5rem; padding: .8rem .5rem; }
	.rps-icon { font-size: 1.6rem; }
	.quiz-question { font-size: .95rem; padding: .6rem .8rem; }
	.xox-cell { font-size: 2rem; }
	.xox-board { max-width: 280px; }
}

/* ==========================================================================
   OYUN PARKI v2 — Modern Hub + Zengin Oyun Deneyimi
   ========================================================================== */
.habercms-game-page,
.habercms-game-hub {
	--gp-radius: 16px;
	--gp-radius-sm: 10px;
	--gp-shadow: 0 10px 30px -12px rgba(15, 23, 42, .18);
	--gp-shadow-lg: 0 24px 50px -18px rgba(15, 23, 42, .30);
	--gp-grad: linear-gradient(135deg, var(--brand, #ed0d0d) 0%, var(--brand-dark, #b30000) 100%);
}

/* ---------- HUB HEADER ---------- */
.hub-hero { text-align: center; padding: 2.2rem 1rem 1.4rem; position: relative; }
.hub-icon-main {
	font-size: 3rem; line-height: 1;
	display: inline-block; margin-bottom: .6rem;
	animation: gp-float 3.5s ease-in-out infinite;
	filter: drop-shadow(0 8px 16px rgba(0,0,0,.15));
}
.hub-title {
	font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em;
	margin: 0 0 .4rem;
	background: var(--gp-grad); -webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: var(--brand, #ed0d0d);
}
.hub-subtitle { color: var(--muted, #616875); font-size: .95rem; margin: 0; }

.hub-stats-bar {
	display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap;
	margin: 1.4rem auto .6rem; max-width: 640px;
}
.hub-stat {
	flex: 1 1 130px; max-width: 190px;
	background: var(--surface, #fff); border: 1px solid var(--border, #e5e9ef);
	border-radius: var(--gp-radius); padding: 1rem .6rem; text-align: center;
	box-shadow: var(--gp-shadow); transition: transform .2s, box-shadow .2s;
}
.hub-stat:hover { transform: translateY(-3px); box-shadow: var(--gp-shadow-lg); }
.hub-stat-value { display: block; font-size: 1.7rem; font-weight: 800; color: var(--heading, #1b2a3d); line-height: 1.1; }
.hub-stat-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #616875); margin-top: .25rem; }

.hub-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.2rem 0 1.6rem; }
.hub-filter-btn {
	border: 1px solid var(--border, #e5e9ef); background: var(--surface, #fff);
	color: var(--text-muted, #616875); padding: .45rem 1rem; border-radius: 999px;
	font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .18s;
}
.hub-filter-btn:hover { border-color: var(--brand, #ed0d0d); color: var(--brand, #ed0d0d); transform: translateY(-1px); }
.hub-filter-btn.is-active { background: var(--gp-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -6px var(--brand, #ed0d0d); }

/* ---------- HUB GRID ---------- */
.hub-grid {
	display: grid; gap: 1.1rem;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	margin-bottom: 2rem;
}
.hub-card { opacity: 1; transition: opacity .25s, transform .25s; }
.hub-card.is-hidden { display: none; }
.hub-card-link {
	display: flex; flex-direction: column; height: 100%;
	background: var(--surface, #fff); border: 1px solid var(--border, #e5e9ef);
	border-radius: var(--gp-radius); padding: 1.2rem; text-decoration: none;
	color: inherit; box-shadow: var(--gp-shadow); position: relative; overflow: hidden;
	transition: transform .22s, box-shadow .22s, border-color .22s;
}
.hub-card-link::after {
	content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
	background: radial-gradient(400px 120px at var(--mx, 50%) 0%, rgba(237,13,13,.10), transparent 70%);
	transition: opacity .3s;
}
.hub-card-link:hover { transform: translateY(-4px); box-shadow: var(--gp-shadow-lg); border-color: var(--brand, #ed0d0d); }
.hub-card-link:hover::after { opacity: 1; }
.hub-card-icon {
	font-size: 2.1rem; width: 58px; height: 58px; border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	background: var(--surface-alt, #f5f7f9); margin-bottom: .8rem;
	transition: transform .25s;
}
.hub-card-link:hover .hub-card-icon { transform: scale(1.08) rotate(-3deg); }
.hub-card-title { font-size: 1.05rem; font-weight: 700; color: var(--heading, #1b2a3d); margin: 0 0 .3rem; }
.hub-card-desc { font-size: .84rem; color: var(--muted, #616875); margin: 0 0 .7rem; line-height: 1.45; flex: 1; }
.hub-card-meta { display: flex; gap: .4rem; flex-wrap: wrap; }
.game-tag { font-size: .68rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; letter-spacing: .02em; }
.game-tag-cat { background: rgba(237,13,13,.10); color: var(--brand, #ed0d0d); }
.game-tag-diff { background: var(--surface-alt, #f5f7f9); color: var(--text-muted, #616875); }
.hub-card-stats {
	display: flex; gap: 1rem; margin-top: .85rem; padding-top: .7rem;
	border-top: 1px dashed var(--border, #e5e9ef);
}
.game-stat-mini { display: inline-flex; align-items: center; gap: .32rem; font-size: .78rem; color: var(--muted, #616875); }
.game-stat-mini svg { color: var(--brand, #ed0d0d); opacity: .8; }

.hub-footer { text-align: center; color: var(--muted, #616875); font-size: .85rem; padding: 1rem 0 2rem; }

.game-hub-empty { text-align: center; padding: 4rem 1rem; }
.game-empty-icon { font-size: 3.5rem; margin-bottom: .6rem; }

/* ---------- GAME NAV HOME BUTTON ---------- */
.game-nav { align-items: center; }
.game-nav-home {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%; color: #fff;
	background: var(--gp-grad); box-shadow: 0 6px 14px -6px var(--brand, #ed0d0d);
	transition: transform .18s; flex: none;
}
.game-nav-home:hover { transform: scale(1.08) translateX(-2px); color: #fff; }
.game-title-icon { margin-right: .35rem; }

/* ---------- GAME SHELL (stats + hud) ---------- */
.gp-hud {
	display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap;
	max-width: 520px; margin: 0 auto 1.2rem;
}
.gp-hud-chip {
	background: var(--surface, #fff); border: 1px solid var(--border, #e5e9ef);
	border-radius: 999px; padding: .4rem .9rem; font-size: .8rem; font-weight: 600;
	color: var(--text, #222); box-shadow: var(--gp-shadow); display: inline-flex; align-items: center; gap: .35rem;
}
.gp-hud-chip strong { color: var(--brand, #ed0d0d); }
.gp-best-badge {
	display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 700;
	color: #b45309; background: #fef3c7; border-radius: 999px; padding: .3rem .7rem; margin: 0 auto .8rem;
	animation: gp-pop .4s ease;
}
.gp-toolbar { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 .4rem; }
.gp-icon-btn {
	width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border, #e5e9ef);
	background: var(--surface, #fff); cursor: pointer; font-size: 1.1rem; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center; transition: all .16s;
	color: var(--text, #222);
}
.gp-icon-btn:hover { transform: translateY(-2px); border-color: var(--brand, #ed0d0d); color: var(--brand, #ed0d0d); box-shadow: var(--gp-shadow); }
.gp-icon-btn.is-off { opacity: .45; }

/* Confetti canvas overlay */
.gp-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }

/* Generic modal */
.gp-modal {
	position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex;
	align-items: center; justify-content: center; z-index: 9998; padding: 1rem;
	opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.gp-modal.is-open { opacity: 1; visibility: visible; }
.gp-modal-card {
	background: var(--surface, #fff); border-radius: 20px; padding: 1.8rem;
	max-width: 380px; width: 100%; text-align: center; box-shadow: var(--gp-shadow-lg);
	transform: scale(.9); transition: transform .25s;
}
.gp-modal.is-open .gp-modal-card { transform: scale(1); }
.gp-modal-emoji { font-size: 3rem; }
.gp-modal-title { font-size: 1.3rem; font-weight: 800; margin: .4rem 0 .3rem; color: var(--heading, #1b2a3d); }
.gp-modal-text { font-size: .9rem; color: var(--muted, #616875); margin: 0 0 1.2rem; }
.gp-modal-actions { display: flex; gap: .6rem; justify-content: center; }

/* ==========================================================================
   FLAPPY KUŞ
   ========================================================================== */
.flappy-wrap { max-width: 420px; margin: 0 auto; position: relative; }
.flappy-canvas {
	display: block; width: 100%; border-radius: var(--gp-radius); cursor: pointer;
	background: linear-gradient(180deg, #7dd3fc 0%, #bae6fd 70%, #fde68a 100%);
	box-shadow: var(--gp-shadow-lg); touch-action: manipulation;
}
.flappy-overlay {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: .6rem; text-align: center;
	color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.35);
	background: rgba(15,23,42,.25); border-radius: var(--gp-radius);
}
.flappy-overlay h3 { margin: 0; font-size: 1.4rem; }
.flappy-overlay p { margin: 0; font-size: .85rem; }
.flappy-overlay.hidden { display: none; }

/* ==========================================================================
   2048
   ========================================================================== */
.g2048-wrap { max-width: 460px; margin: 0 auto; }
.g2048-board {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem;
	background: var(--surface-alt, #f0f2f5); border-radius: var(--gp-radius);
	padding: .55rem; box-shadow: var(--gp-shadow); touch-action: none; user-select: none;
}
.g2048-tile {
	aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center;
	font-size: 1.6rem; font-weight: 800; background: #cdd5e0; color: #5b6472;
	transition: transform .12s ease, background .15s; position: relative;
}
.g2048-tile.val-2    { background: #eee4da; color: #776e65; }
.g2048-tile.val-4    { background: #ede0c8; color: #776e65; }
.g2048-tile.val-8    { background: #f2b179; color: #fff; }
.g2048-tile.val-16   { background: #f59563; color: #fff; }
.g2048-tile.val-32   { background: #f67c5f; color: #fff; }
.g2048-tile.val-64   { background: #f65e3b; color: #fff; }
.g2048-tile.val-128  { background: #edcf72; color: #fff; font-size: 1.35rem; }
.g2048-tile.val-256  { background: #edcc61; color: #fff; font-size: 1.35rem; }
.g2048-tile.val-512  { background: #edc850; color: #fff; font-size: 1.35rem; }
.g2048-tile.val-1024 { background: #edc53f; color: #fff; font-size: 1.1rem; }
.g2048-tile.val-2048 { background: #edc22e; color: #fff; font-size: 1.1rem; box-shadow: 0 0 20px rgba(237,194,46,.7); }
.g2048-tile.new { animation: gp-pop .18s ease; }
.g2048-tile.merged { animation: gp-bump .18s ease; }

/* ==========================================================================
   REFLEKS TESTİ
   ========================================================================== */
.reaction-stage {
	max-width: 520px; margin: 0 auto; height: 300px; border-radius: var(--gp-radius);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: .6rem; text-align: center; cursor: pointer; user-select: none;
	background: var(--surface-alt, #f0f2f5); box-shadow: var(--gp-shadow);
	transition: background .12s; padding: 1rem;
}
.reaction-stage.phase-wait { background: #dc2626; color: #fff; }
.reaction-stage.phase-ready { background: #16a34a; color: #fff; }
.reaction-stage.phase-go { background: #16a34a; color: #fff; }
.reaction-stage.phase-result { background: var(--surface, #fff); }
.reaction-big { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.reaction-sub { font-size: .9rem; opacity: .9; }
.reaction-times { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
.reaction-time-chip {
	background: var(--surface, #fff); border: 1px solid var(--border, #e5e9ef);
	border-radius: 999px; padding: .35rem .8rem; font-size: .82rem; font-weight: 700;
	box-shadow: var(--gp-shadow);
}
.reaction-time-chip.best { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }

@keyframes gp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes gp-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes gp-bump { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ==========================================================================
   RENK SIRASI (SIMON)
   ========================================================================== */
.simon-board {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem;
	max-width: 320px; margin: 0 auto 1rem;
}
.simon-pad {
	aspect-ratio: 1; border-radius: 18px; border: none; cursor: pointer;
	background: var(--pad-color); opacity: .55; transition: opacity .12s, transform .12s, box-shadow .12s;
	box-shadow: inset 0 -6px 0 rgba(0,0,0,.18);
}
.simon-pad:hover { opacity: .75; }
.simon-pad.is-lit {
	opacity: 1; transform: scale(1.05);
	box-shadow: 0 0 26px var(--pad-color), inset 0 -6px 0 rgba(0,0,0,.18);
}

@media (max-width: 600px) {
	.hub-stat { flex: 1 1 90px; padding: .8rem .4rem; }
	.hub-stat-value { font-size: 1.3rem; }
	.g2048-tile { font-size: 1.2rem; }
	.g2048-tile.val-128, .g2048-tile.val-256, .g2048-tile.val-512 { font-size: 1rem; }
	.reaction-stage { height: 240px; }
}

/* ==========================================================================
   OYUN PARKI v3 — Günün Oyunu, Başarımlar, 3D kartlar, Başarım bildirimleri
   ========================================================================== */

/* ---------- Animated aurora arkaplan (hub) ---------- */
.habercms-game-hub { position: relative; overflow: hidden; }
.habercms-game-hub::before {
	content: ''; position: absolute; inset: -20% -10% auto -10%; height: 420px; z-index: 0;
	background:
		radial-gradient(closest-side, rgba(237,13,13,.16), transparent 70%) 20% 30% / 55% 80% no-repeat,
		radial-gradient(closest-side, rgba(168,85,247,.14), transparent 70%) 75% 20% / 55% 80% no-repeat,
		radial-gradient(closest-side, rgba(14,165,233,.14), transparent 70%) 50% 70% / 60% 80% no-repeat;
	filter: blur(6px); animation: gp-aurora 16s ease-in-out infinite alternate; pointer-events: none;
}
.habercms-game-hub > * { position: relative; z-index: 1; }
@keyframes gp-aurora {
	0%   { transform: translate3d(-3%, 0, 0) scale(1); }
	50%  { transform: translate3d(3%, 2%, 0) scale(1.08); }
	100% { transform: translate3d(-2%, -2%, 0) scale(1.03); }
}

/* ---------- Hub araç çubuğu ---------- */
.hub-toolbar { display: flex; justify-content: center; gap: .5rem; margin: .4rem auto 1rem; }
.hub-reset { font-size: 1.05rem; }

/* ---------- Günün Oyunu (featured) ---------- */
.hub-featured { grid-column: 1 / -1; }
.hub-featured-link {
	position: relative; display: flex; align-items: center; gap: 1.1rem; overflow: hidden;
	padding: 1.4rem 1.5rem; border-radius: var(--gp-radius); text-decoration: none; color: #fff;
	background: linear-gradient(120deg, #e00000 0%, #b30000 45%, #7c1d1d 100%);
	box-shadow: 0 20px 42px -18px rgba(179, 0, 0, .55);
	transition: transform .25s, box-shadow .25s;
}
.hub-featured-link::after {
	content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
	transform: skewX(-18deg); animation: gp-shine 4.5s ease-in-out infinite;
}
.hub-featured-link:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -18px rgba(179, 0, 0, .7); }
@keyframes gp-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.hub-featured-badge {
	position: absolute; top: .7rem; right: .8rem; font-size: .68rem; font-weight: 800; letter-spacing: .04em;
	background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35);
	padding: .22rem .6rem; border-radius: 999px; backdrop-filter: blur(4px);
}
.hub-featured-icon {
	font-size: 2.6rem; width: 76px; height: 76px; flex: none; border-radius: 18px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
	animation: gp-float 3.5s ease-in-out infinite;
}
.hub-featured-body { flex: 1; min-width: 0; }
.hub-featured-title { font-size: 1.35rem; font-weight: 800; margin: 0 0 .25rem; color: #fff; }
.hub-featured-desc { font-size: .9rem; margin: 0 0 .55rem; color: rgba(255,255,255,.85); }
.hub-featured-cta { text-align: center; flex: none; }
.hub-featured-play {
	display: inline-block; font-weight: 800; font-size: .95rem; padding: .6rem 1.2rem; border-radius: 999px;
	background: #fff; color: #b30000; box-shadow: 0 8px 18px -6px rgba(0,0,0,.4); transition: transform .18s;
}
.hub-featured-link:hover .hub-featured-play { transform: scale(1.06); }
.hub-featured-stats { display: block; font-size: .72rem; margin-top: .4rem; color: rgba(255,255,255,.8); }
.hub-featured .game-tag-cat { background: rgba(255,255,255,.24); color: #fff; }
.hub-featured .game-tag-diff { background: rgba(0,0,0,.18); color: rgba(255,255,255,.9); }

/* ---------- Kart giriş animasyonu + 3D eğim ---------- */
.hub-card { animation: gp-rise .5s both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes gp-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}
.hub-card-link {
	transform: perspective(760px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0));
	transform-style: preserve-3d;
}
.hub-card-link:hover {
	transform: perspective(760px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px);
}

/* ---------- Başarımlar ---------- */
.hub-achievements { margin: 1rem 0 2rem; }
.hub-section-title {
	display: flex; align-items: center; justify-content: center; gap: .5rem;
	font-size: 1.2rem; font-weight: 800; color: var(--heading, #1b2a3d); margin: 0 0 1rem;
}
.hub-achv-counter {
	font-size: .78rem; font-weight: 700; color: var(--brand, #ed0d0d);
	background: rgba(237,13,13,.10); padding: .2rem .6rem; border-radius: 999px;
}
.achv-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.achv-item {
	display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem;
	background: var(--surface, #fff); border: 1px solid var(--border, #e5e9ef);
	border-radius: var(--gp-radius-sm); box-shadow: var(--gp-shadow);
	opacity: .62; filter: grayscale(1); transition: opacity .2s, filter .2s, transform .2s, border-color .2s;
}
.achv-item.is-unlocked { opacity: 1; filter: none; border-color: rgba(237,13,13,.35); }
.achv-item.is-unlocked:hover { transform: translateY(-2px); }
.achv-icon { font-size: 1.7rem; flex: none; }
.achv-body { display: flex; flex-direction: column; min-width: 0; }
.achv-title { font-size: .9rem; font-weight: 700; color: var(--heading, #1b2a3d); }
.achv-desc { font-size: .75rem; color: var(--muted, #616875); }
.achv-check { margin-left: auto; color: #15803d; font-weight: 900; font-size: 1.1rem; }

/* ---------- Başarım bildirim yığını ---------- */
.gp-ach-stack {
	position: fixed; top: 1rem; right: 1rem; z-index: 10000;
	display: flex; flex-direction: column; gap: .6rem; pointer-events: none;
}
.gp-ach-toast {
	display: flex; align-items: center; gap: .7rem; max-width: 320px;
	background: var(--surface, #fff); border: 1px solid var(--border, #e5e9ef);
	border-left: 4px solid var(--brand, #ed0d0d); border-radius: 12px; padding: .7rem .9rem;
	box-shadow: var(--gp-shadow-lg); transform: translateX(120%); opacity: 0; transition: transform .4s cubic-bezier(.2,.9,.3,1), opacity .4s;
}
.gp-ach-toast.is-in { transform: translateX(0); opacity: 1; }
.gp-ach-toast-icon { font-size: 1.8rem; flex: none; animation: gp-float 2s ease-in-out infinite; }
.gp-ach-toast-body { display: flex; flex-direction: column; min-width: 0; }
.gp-ach-toast-kicker { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--brand, #ed0d0d); }
.gp-ach-toast-title { font-size: .92rem; font-weight: 800; color: var(--heading, #1b2a3d); }
.gp-ach-toast-desc { font-size: .74rem; color: var(--muted, #616875); }

@media (max-width: 600px) {
	.hub-featured-link { flex-direction: column; text-align: center; gap: .6rem; }
	.hub-featured-icon { width: 64px; height: 64px; font-size: 2.2rem; }
	.hub-featured-cta { width: 100%; }
	.achv-grid { grid-template-columns: 1fr; }
	.gp-ach-stack { left: .6rem; right: .6rem; }
	.gp-ach-toast { max-width: none; }
}

/* ---------- Koyu mod ---------- */
:root[data-theme="dark"] .hub-stat,
:root[data-theme="dark"] .hub-filter-btn,
:root[data-theme="dark"] .hub-card-link,
:root[data-theme="dark"] .gp-hud-chip,
:root[data-theme="dark"] .gp-icon-btn,
:root[data-theme="dark"] .gp-modal-card,
:root[data-theme="dark"] .achv-item,
:root[data-theme="dark"] .gp-ach-toast,
:root[data-theme="dark"] .g2048-board {
	background: var(--grey-100, #1d232b);
	border-color: var(--grey-300, #2a313b);
	color: var(--text, #e6e7e9);
}
:root[data-theme="dark"] .hub-card-title,
:root[data-theme="dark"] .hub-stat-value,
:root[data-theme="dark"] .hub-section-title,
:root[data-theme="dark"] .achv-title,
:root[data-theme="dark"] .gp-modal-title,
:root[data-theme="dark"] .gp-ach-toast-title {
	color: var(--heading, #e6e7e9);
}
:root[data-theme="dark"] .hub-card-desc,
:root[data-theme="dark"] .hub-stat-label,
:root[data-theme="dark"] .achv-desc,
:root[data-theme="dark"] .gp-modal-text,
:root[data-theme="dark"] .gp-ach-toast-desc {
	color: var(--text-muted, #959ba7);
}
:root[data-theme="dark"] .hub-card-icon { background: var(--grey-200, #232932); }
:root[data-theme="dark"] .game-tag-diff { background: var(--grey-200, #232932); color: var(--text-muted, #959ba7); }
:root[data-theme="dark"] .hub-card-stats { border-color: var(--grey-300, #2a313b); }
:root[data-theme="dark"] .g2048-tile { background: #2f3742; color: #aab2bd; }
:root[data-theme="dark"] .reaction-stage { background: var(--grey-100, #1d232b); color: var(--text, #e6e7e9); }
:root[data-theme="dark"] .reaction-stage.phase-result { background: var(--grey-100, #1d232b); }
:root[data-theme="dark"] .reaction-time-chip { background: var(--grey-100, #1d232b); border-color: var(--grey-300, #2a313b); color: var(--text, #e6e7e9); }
:root[data-theme="dark"] .simon-pad { box-shadow: inset 0 -6px 0 rgba(0,0,0,.35); }
:root[data-theme="dark"] .hub-achv-counter { color: #ff6b6b; background: rgba(237,13,13,.2); }
:root[data-theme="dark"] .achv-check { color: #4ade80; }

/* ==========================================================================
   HAREKET AZALTMA (prefers-reduced-motion) — animasyonları en aza indir.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.habercms-game-hub *,
	.habercms-game-hub *::before,
	.habercms-game-hub *::after,
	.gp-modal,
	.gp-modal-card,
	.gp-ach-toast,
	.game-card,
	.hub-featured,
	.achv-item {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.hub-featured { transform: none !important; }
}