/* MESA Puzzle Oyunları — tema ile çakışmayacak şekilde .mpo- ön ekiyle kapsüllenmiştir */

.mpo-main,
.mpo-wrap,
.mpo-promo {
	--mpo-accent: #2563eb;
	--mpo-ink: #0f172a;
	--mpo-muted: #64748b;
	--mpo-line: #e2e8f0;
	--mpo-soft: #f8fafc;
	--mpo-radius: 18px;
}

.mpo-main {
	padding: 32px 0 64px;
	color: var(--mpo-ink);
}

.mpo-container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.mpo-main *,
.mpo-promo * {
	box-sizing: border-box;
}

/* --- Breadcrumb --- */
.mpo-breadcrumb {
	font-size: 13px;
	color: var(--mpo-muted);
	margin-bottom: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.mpo-breadcrumb a { color: var(--mpo-muted); text-decoration: none; }
.mpo-breadcrumb a:hover { color: var(--mpo-accent); text-decoration: underline; }

/* --- Hero --- */
.mpo-hero {
	text-align: center;
	padding: 34px 20px 30px;
	margin-bottom: 32px;
	border-radius: 24px;
	background: linear-gradient(140deg, #0f172a 0%, #1e293b 55%, #172554 100%);
	color: #f8fafc;
}
.mpo-hero__badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .3px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #e0f2fe;
	margin-bottom: 14px;
}
.mpo-hero__title {
	font-size: clamp(26px, 4.2vw, 40px);
	line-height: 1.2;
	margin: 0 0 12px;
	color: #fff;
	font-weight: 800;
}
.mpo-hero__sub {
	max-width: 720px;
	margin: 0 auto;
	color: #cbd5e1;
	font-size: 16px;
	line-height: 1.65;
}
.mpo-hero__stats {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.mpo-hero__stats li {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	padding: 12px 22px;
	min-width: 118px;
}
.mpo-hero__stats strong { display: block; font-size: 22px; color: #fff; font-weight: 800; }
.mpo-hero__stats span { font-size: 12px; color: #94a3b8; }

/* --- Araç çubuğu --- */
.mpo-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 22px;
}
.mpo-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.mpo-chip {
	border: 1px solid var(--mpo-line);
	background: #fff;
	color: #334155;
	border-radius: 999px;
	padding: 8px 15px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: .18s;
	line-height: 1.2;
}
.mpo-chip span {
	display: inline-block;
	margin-left: 5px;
	font-size: 11px;
	opacity: .6;
}
.mpo-chip:hover { border-color: var(--mpo-accent); color: var(--mpo-accent); }
.mpo-chip.is-active {
	background: var(--mpo-accent);
	border-color: var(--mpo-accent);
	color: #fff;
}
.mpo-chip.is-active span { opacity: .85; }
.mpo-search input {
	border: 1px solid var(--mpo-line);
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 14px;
	min-width: 250px;
	background: #fff;
	color: var(--mpo-ink);
}
.mpo-search input:focus { outline: 2px solid var(--mpo-accent); outline-offset: 1px; }

/* --- Kart ızgarası --- */
.mpo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
	gap: 20px;
}
.mpo-grid--2 { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.mpo-grid--3 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.mpo-grid--4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.mpo-card { display: block; }
.mpo-card[hidden] { display: none; }
.mpo-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--mpo-line);
	border-radius: var(--mpo-radius);
	padding: 22px;
	text-decoration: none;
	color: inherit;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mpo-card__link:hover,
.mpo-card__link:focus-visible {
	transform: translateY(-4px);
	border-color: var(--mpo-accent);
	box-shadow: 0 14px 32px rgba(15, 23, 42, .12);
	text-decoration: none;
}
.mpo-card__emoji { font-size: 30px; line-height: 1; margin-bottom: 12px; }
.mpo-card__tag {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	padding: 4px 10px;
	border-radius: 6px;
	background: #eef2ff;
	background: color-mix(in srgb, var(--mpo-accent) 12%, #fff);
	color: var(--mpo-accent);
	margin-bottom: 12px;
}
.mpo-card__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 8px;
	color: var(--mpo-ink);
}
.mpo-card__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--mpo-muted);
	margin: 0 0 16px;
	flex-grow: 1;
}
.mpo-card.is-compact .mpo-card__title { font-size: 16px; margin-bottom: 12px; flex-grow: 1; }
.mpo-card__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
}
.mpo-card__meta li {
	font-size: 11.5px;
	font-weight: 600;
	color: #475569;
	background: var(--mpo-soft);
	border: 1px solid var(--mpo-line);
	border-radius: 6px;
	padding: 3px 8px;
}
.mpo-card__meta li.is-cam { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.mpo-card__cta {
	margin-top: auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--mpo-accent);
}
.mpo-card__link:hover .mpo-card__cta span { margin-left: 4px; }

.mpo-empty,
.mpo-noresult {
	text-align: center;
	color: var(--mpo-muted);
	padding: 32px 0;
	font-size: 15px;
}

/* --- Butonlar --- */
.mpo-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	cursor: pointer;
	background: var(--mpo-accent);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	padding: 9px 16px;
	border-radius: 10px;
	text-decoration: none;
	transition: opacity .18s;
	line-height: 1.2;
}
.mpo-btn:hover { opacity: .88; color: #fff; text-decoration: none; }
.mpo-btn--ghost {
	background: transparent;
	color: #475569;
	border: 1px solid var(--mpo-line);
}
.mpo-btn--ghost:hover { border-color: var(--mpo-accent); color: var(--mpo-accent); opacity: 1; }
.mpo-btn--lg { padding: 14px 26px; font-size: 15px; border-radius: 12px; white-space: nowrap; }

/* --- Oynatıcı --- */
.mpo-single__head { margin-bottom: 22px; }
.mpo-single__head h1 { font-size: clamp(24px, 3.4vw, 34px); margin: 10px 0 10px; line-height: 1.25; }
.mpo-single__lead { color: var(--mpo-muted); font-size: 16px; line-height: 1.65; max-width: 760px; margin: 0 0 18px; }
.mpo-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.mpo-facts li {
	background: var(--mpo-soft);
	border: 1px solid var(--mpo-line);
	border-radius: 12px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #334155;
}
.mpo-facts li strong {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--mpo-muted);
	font-weight: 700;
	margin-bottom: 2px;
}

.mpo-player {
	border: 1px solid var(--mpo-line);
	border-radius: var(--mpo-radius);
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
	margin-bottom: 32px;
}
.mpo-player__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--mpo-soft);
	border-bottom: 1px solid var(--mpo-line);
}
.mpo-player__title { font-weight: 700; font-size: 15px; color: var(--mpo-ink); }
.mpo-player__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mpo-notice {
	margin: 0;
	padding: 11px 16px;
	background: #fffbeb;
	border-bottom: 1px solid #fde68a;
	color: #92400e;
	font-size: 13.5px;
	line-height: 1.5;
}
.mpo-player__frame {
	position: relative;
	width: 100%;
	height: var(--mpo-h, 760px);
	max-height: calc(100vh - 140px);
	min-height: 480px;
	background: #0f172a;
}
.mpo-player__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.mpo-player.is-fullscreen .mpo-player__frame,
.mpo-player:fullscreen .mpo-player__frame {
	height: 100vh;
	max-height: none;
}
.mpo-player:fullscreen { border-radius: 0; background: #0f172a; }
.mpo-player__hint {
	margin: 0;
	padding: 10px 16px;
	font-size: 12.5px;
	color: var(--mpo-muted);
	border-top: 1px solid var(--mpo-line);
	background: #fff;
}
.mpo-player__hint a { color: var(--mpo-accent); }

/* --- İçerik bölümleri --- */
.mpo-about,
.mpo-related,
.mpo-info,
.mpo-index { margin: 40px 0; }
.mpo-about h2,
.mpo-related h2,
.mpo-info h2,
.mpo-index h2 {
	font-size: 22px;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--mpo-line);
	color: var(--mpo-ink);
}
.mpo-about p { color: #334155; line-height: 1.75; font-size: 15.5px; }
.mpo-goals { margin: 0; padding-left: 20px; color: #334155; line-height: 1.9; font-size: 15.5px; }

.mpo-info__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
}
.mpo-info__grid > div {
	background: var(--mpo-soft);
	border: 1px solid var(--mpo-line);
	border-radius: var(--mpo-radius);
	padding: 20px;
}
.mpo-info__grid h3 { margin: 0 0 8px; font-size: 16px; color: var(--mpo-ink); }
.mpo-info__grid p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--mpo-muted); }

.mpo-index__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 22px;
}
.mpo-index__col h3 { font-size: 15px; margin: 0 0 10px; color: var(--mpo-ink); }
.mpo-index__col ul { list-style: none; margin: 0; padding: 0; }
.mpo-index__col li { padding: 5px 0; font-size: 14px; border-bottom: 1px dashed var(--mpo-line); }
.mpo-index__col a { color: #334155; text-decoration: none; }
.mpo-index__col a:hover { color: var(--mpo-accent); text-decoration: underline; }
.mpo-index__col em { color: var(--mpo-muted); font-size: 11.5px; font-style: normal; }

.mpo-backlink { margin-top: 30px; }
.mpo-backlink a { color: var(--mpo-accent); font-weight: 600; text-decoration: none; }

/* --- Ana sayfa tanıtım bloğu --- */
.mpo-promo {
	margin: 48px auto;
	padding: 34px;
	max-width: 1180px;
	border-radius: 24px;
	background: var(--mpo-soft);
	border: 1px solid var(--mpo-line);
}
.mpo-promo__head {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 26px;
}
.mpo-promo__head .mpo-hero__badge {
	background: #eef2ff;
	background: color-mix(in srgb, var(--mpo-accent) 12%, #fff);
	border-color: #c7d2fe;
	border-color: color-mix(in srgb, var(--mpo-accent) 28%, #fff);
	color: var(--mpo-accent);
}
.mpo-promo__head h2 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 30px); color: var(--mpo-ink); }
.mpo-promo__head p { margin: 0; color: var(--mpo-muted); font-size: 15px; line-height: 1.6; max-width: 620px; }

/* --- Mobil --- */
@media (max-width: 782px) {
	.mpo-hero { padding: 26px 16px; border-radius: 18px; }
	.mpo-hero__stats li { padding: 10px 16px; min-width: 96px; }
	.mpo-search input { min-width: 100%; }
	.mpo-search { width: 100%; }
	.mpo-player__frame { height: 72vh; min-height: 420px; }
	.mpo-promo { padding: 24px 18px; border-radius: 18px; }
	.mpo-grid { grid-template-columns: 1fr; }
}

/* --- Koyu tema kullanan temalar için --- */
@media (prefers-color-scheme: dark) {
	body.mesa-puzzle .mpo-card__link,
	body.mesa-puzzle .mpo-player,
	body.mesa-puzzle .mpo-chip,
	body.mesa-puzzle .mpo-search input { background: #111827; border-color: #1f2937; color: #e5e7eb; }
	body.mesa-puzzle .mpo-card__title,
	body.mesa-puzzle .mpo-about h2,
	body.mesa-puzzle .mpo-related h2 { color: #f3f4f6; }
	body.mesa-puzzle .mpo-card__meta li,
	body.mesa-puzzle .mpo-facts li,
	body.mesa-puzzle .mpo-info__grid > div,
	body.mesa-puzzle .mpo-player__bar,
	body.mesa-puzzle .mpo-player__hint { background: #0b1220; border-color: #1f2937; color: #cbd5e1; }
}

/* ==========================================================================
   Tema uyumluluk yamaları
   Woodmart / Flatsome / Astra gibi temalar sayfanın üstüne kendi başlık
   bandını basar. Bizim kendi hero + breadcrumb'ımız olduğu için sadece
   oyun sayfalarında gizliyoruz.
   ========================================================================== */
body.mesa-puzzle .page-title,
body.mesa-puzzle .wd-page-title,
body.mesa-puzzle .page-header,
body.mesa-puzzle .entry-header,
body.mesa-puzzle .title-wrapper,
body.mesa-puzzle .woodmart-title-container { display: none !important; }

body.mesa-puzzle .main-page-wrapper,
body.mesa-puzzle .site-content,
body.mesa-puzzle .content-area { padding-top: 0 !important; }

/* Bazı temalar main'i dar bir container'a sokar; kendi container'ımız var. */
body.mesa-puzzle .mpo-main { width: 100%; }

/* ==========================================================================
   WooCommerce çapraz bağlantı
   ========================================================================== */
.mpo-woo {
	margin: 48px 0;
	padding: 30px;
	border-radius: var(--mpo-radius, 18px);
	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
	border: 1px solid #fde68a;
}
.mpo-woo__badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .4px;
	padding: 5px 13px;
	border-radius: 999px;
	background: #92400e;
	color: #fffbeb;
	margin-bottom: 12px;
}
.mpo-woo__head h2 {
	margin: 0 0 8px;
	font-size: clamp(20px, 3vw, 27px);
	color: #78350f;
	border: 0;
	padding: 0;
}
.mpo-woo__head p {
	margin: 0 0 22px;
	color: #92400e;
	font-size: 15px;
	line-height: 1.7;
	max-width: 760px;
}
/* WooCommerce ürün ızgarasının tema stilini bozmuyoruz, sadece nefes veriyoruz */
.mpo-woo__products { margin-bottom: -20px; }
.mpo-woo__products .woocommerce ul.products,
.mpo-woo__products ul.products { margin-bottom: 0 !important; }

/* Ürün sayfasındaki "ücretsiz dijital oyunu dene" kutusu */
.mpo-productbox {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 20px 0;
	padding: 16px 18px;
	border-radius: 14px;
	background: #f0f9ff;
	border: 1px solid #bae6fd;
}
.mpo-productbox__icon { font-size: 30px; line-height: 1; }
.mpo-productbox__text { flex: 1 1 220px; line-height: 1.5; }
.mpo-productbox__text strong { display: block; font-size: 14.5px; color: #075985; margin-bottom: 2px; }
.mpo-productbox__text span { font-size: 13.5px; color: #0369a1; }
.mpo-productbox__text em { font-style: normal; font-weight: 700; }
.mpo-productbox .mpo-btn { background: #0284c7; white-space: nowrap; }

@media (max-width: 600px) {
	.mpo-woo { padding: 22px 18px; }
	.mpo-productbox { padding: 14px; }
	.mpo-productbox .mpo-btn { width: 100%; justify-content: center; }
}

.mpo-shopcta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin: 40px 0 0;
	padding: 22px 26px;
	border-radius: var(--mpo-radius, 18px);
	background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
	color: #fffbeb;
}
.mpo-shopcta strong { display: block; font-size: 17px; margin-bottom: 4px; }
.mpo-shopcta span { font-size: 14px; color: #fde68a; line-height: 1.6; }
.mpo-shopcta .mpo-btn { background: #fffbeb; color: #78350f; }
.mpo-shopcta .mpo-btn:hover { color: #78350f; }
@media (max-width: 600px) { .mpo-shopcta { padding: 20px 18px; } .mpo-shopcta .mpo-btn { width: 100%; justify-content: center; } }