/* PlayF2P: referans tasarımı tamamlayan tema-özel eklemeler.
   Palet: mavi #0065a0, turuncu #ee6900. */

/* Metin logo (görsel logo yoksa) — sade, modern wordmark:
 * işaretsiz, hover'da alt çizgisiz, düz beyaz; tek marka aksanı sözcük
 * sonundaki sarı nokta ("Game Test·" tarzı). */
.playf2p-logo-text{
	display:inline-block; /* inline-block: üst linkin alt çizgisi metne inmez */
	font-family:'Dosis','Poppins',Arial,sans-serif;
	font-weight:800;
	font-size:26px;
	color:#0065a0;
	letter-spacing:-.5px;
	text-decoration:none;
	white-space:nowrap;
}
/* Marka aksanı: sözcük sonunda sarı nokta */
.playf2p-logo-text::after{ content:"."; color:#ffd600; }
/* Logoyu saran linkte hover alt çizgisi olmasın */
.wdg_header_logo, .wdg_header_logo:hover,
a:has(> .playf2p-logo-text), a:has(> .playf2p-logo-text):hover{ text-decoration:none !important; }
.wdg_header .playf2p-logo-text{ color:#fff; }
.wdg_footer .playf2p-logo-text,
.footer .playf2p-logo-text{color:#fff}
/* Masaüstünde logo içerik kartının kenarına yapışmasın */
@media (min-width:1025px){
	#wdg_header_logo{ padding-left:18px !important; }
}

/* Bölüm başlığı — referans: başlık SOLDA, bölüm genişliğince ince alt çizgi.
 * NOT: styles.css'in clearfix ::before/::after pseudo'ları flex öğesi olur;
 * space-between kullanılırsa başlık ortalanır — flex-start şart. */
.box-header{
	display:flex;align-items:center;justify-content:flex-start;
	border-bottom:1px solid #ccc;
	padding-bottom:5px;margin-bottom:8px;
}
.box-header .box-more{ margin-left:auto; }
.box-more{font-size:12px;font-weight:700;color:#0065a0;text-decoration:none;text-transform:uppercase;letter-spacing:.4px}
.box-more:hover{color:#ee6900}

/* Görsel olmayan karo */
.tile-noimg{display:block;width:100%;padding-top:60%;background:#e0e0e0;border-radius:5px 5px 0 0}

/* ───── Tile hover: görsel üzerine koyu katman + ortada "PLAY" butonu ─────
 * Referans (gamesgames.com): .tile-overlay → ortalanmış mavi "PLAY" pili.
 * İki tile yapısı var:
 *  1) Ana sayfa (playf2p_render_tile): a.tile > .tile-thumbnail > img + .tile-title
 *     → overlay .tile-thumbnail'ı (yalnız görseli) kaplar.
 *  2) Kategori/liste (a.tile > img + span): sarmalayıcı yok; alttaki ~36px
 *     başlık hariç görsel bölgesine konumlanır. */
.tile-thumbnail{ position:relative; }
.tile-thumbnail::before,
.tile-thumbnail::after,
.category-layout .tile::before,
.category-layout .tile::after{
	opacity:0;
	transition:opacity .18s ease;
	pointer-events:none;
}
/* Koyu katman */
.tile-thumbnail::before{
	content:""; position:absolute; inset:0;
	background:rgba(0,0,0,.2); border-radius:inherit; z-index:1;
}
.category-layout .tile::before{
	content:""; position:absolute; top:0; left:0; right:0; bottom:36px;
	background:rgba(0,0,0,.2); border-radius:5px 5px 0 0; z-index:1;
}
/* "PLAY" pili */
.tile-thumbnail::after,
.category-layout .tile::after{
	content:"PLAY";
	position:absolute; left:50%; transform:translate(-50%,-50%);
	padding:4px 15px;
	background:#438afe; color:#fff;
	font-family:'Dosis',Arial,sans-serif;
	font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
	border-radius:6.4px; white-space:nowrap; z-index:2;
}
.tile-thumbnail::after{ top:50%; }
/* Yapı 2'de pil, başlık (36px) hariç görsel bölgesinde dikey ortalanır */
.category-layout .tile::after{ top:calc(50% - 18px); }
/* Hover'da görünür */
.tile:hover .tile-thumbnail::before,
.tile:hover .tile-thumbnail::after,
.category-layout .tile:hover::before,
.category-layout .tile:hover::after{ opacity:1; }
@media (prefers-reduced-motion: reduce){
	.tile-thumbnail::before, .tile-thumbnail::after,
	.category-layout .tile::before, .category-layout .tile::after{ transition:none; }
}

/* Editor's Picks — referans: mega_slider (tek büyük görsel, ‹ › okları) */
.featured-slider{
	position:relative;border-radius:5px;overflow:hidden;
	aspect-ratio:456/247;background:#0c486c;
}
.featured-slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity .35s ease;pointer-events:none}
.featured-slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.featured-slide img{width:100%;height:100%;object-fit:cover;display:block}
.featured-hero-title{
	position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
	background:linear-gradient(transparent,rgba(0,0,0,.75));
	color:#fff;font-family:'Dosis',sans-serif;font-weight:700;font-size:18px;
}
.fs-nav{
	position:absolute;top:50%;transform:translateY(-50%);z-index:2;
	width:32px;height:46px;border:0;cursor:pointer;
	background:rgba(0,0,0,.35);color:#fff;font-size:26px;line-height:1;
	display:flex;align-items:center;justify-content:center;
	transition:background .15s;
}
.fs-nav:hover{background:rgba(0,0,0,.6)}
.fs-prev{left:0;border-radius:0 4px 4px 0}
.fs-next{right:0;border-radius:4px 0 0 4px}
.featured-strip{margin:8px 0 0}
@media (prefers-reduced-motion: reduce){
	.featured-slide{transition:none}
}

/* Oynatıcıya enjekte edilen iframe */
.player iframe{display:block;width:100%;height:100%;border:0}
.playf2p-play-btn{cursor:pointer}

/* Arama ikonu — referans (gamesgames.com) tek bir spil-icons font glyph (\ea12)
   kullanıyor: font-size 16px, line-height 24px. styles.css ise büyüteci CSS
   şekliyle çiziyor (::before = lens dairesi, ::after = sap) ve gerçek glyph'i
   color:transparent + font-size:0 ile gizliyor. Burada şekil yaklaşımını tamamen
   kapatıp (::after kaldır, ::before'un border/box özelliklerini sıfırla) referansla
   aynı tek glyph'i gösteriyoruz. Renk korunuyor: agame-mavisi #0065a0. */
.wdg_search_bar #goto_details{cursor:pointer}
.wdg_search_bar #goto_details .sp-i__search,
.wdg_search_bar .sp-i__search{
	position:static !important;
	width:auto !important;
	height:auto !important;
	color:#0065a0 !important;
	font-size:16px !important;
	line-height:24px !important;
}
.wdg_search_bar #goto_details .sp-i__search::before,
.wdg_search_bar .sp-i__search::before{
	position:static !important;
	width:auto !important;
	height:auto !important;
	border:0 !important;
	border-radius:0 !important;
	background:none !important;
	transform:none !important;
	font-family:'spil-icons' !important;
	content:"\ea12" !important;
	color:#0065a0 !important;
	font-size:16px !important;
	line-height:24px !important;
	font-style:normal;
	font-weight:normal;
}
/* styles.css'in çizdiği büyüteç sapını (::after) kaldır — çift büyüteç olmasın */
.wdg_search_bar #goto_details .sp-i__search::after,
.wdg_search_bar .sp-i__search::after{
	content:none !important;
}

/* Mobil header'daki arama AÇ ikonu (#showSearch) — #wdg_search_bar'ın DIŞINDA
 * olduğundan yukarıdaki düzeltme onu kapsamıyor; styles.css onu da ince CSS
 * şekliyle (10px daire + sap) çiziyor. Referans (gamesgames.com mobil): dolgun
 * spil-icons glyph'i, 16px, beyaz, 48px satır yüksekliğinde dikey ortalı.
 * (Masaüstünde display:none !important olduğundan bu kurallar yalnız mobilde etkir.) */
#showSearch.sp-i__search{
	width:auto !important;
	height:48px !important;
	color:#fff !important;
	font-size:16px !important;
	line-height:48px !important;
}
#showSearch.sp-i__search::before{
	position:static !important;
	width:auto !important;
	height:auto !important;
	border:0 !important;
	border-radius:0 !important;
	background:none !important;
	transform:none !important;
	font-family:'spil-icons' !important;
	content:"\ea12" !important;
	color:#fff !important;
	font-size:16px !important;
	line-height:48px !important;
	font-style:normal;
	font-weight:normal;
}
#showSearch.sp-i__search::after{ content:none !important; }

/* Footer sosyal medya ikonları */
.wdg_footer--misc--soc-links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.wdg_footer--soc{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; transition:background .15s, transform .15s; }
.wdg_footer--soc:hover{ background:rgba(255,255,255,.18); transform:translateY(-2px); }
.wdg_footer--soc svg{ width:18px; height:18px; }
.wdg_footer--misc--desc{ color:rgba(255,255,255,.62); font-size:13px; line-height:1.6; margin:8px 0 0; max-width:320px; }

/* Oyun sayfası — akıllı sağ sütun: "sidebar" reklam slotu boşken sütun
   render edilmez, grid tek sütuna düşer ve oyun alanı tam genişler.
   (main+class seçicisi, sonra yüklenen single-game.css'i specificity ile ezer.) */
main.game-layout--full{ grid-template-columns:minmax(0,1fr); }
/* Slot doluyken reklam sütunda yapışkan ve ortalanmış durur */
.right-blank .playf2p-ad{ position:sticky; top:12px; display:flex; flex-direction:column; align-items:center; padding:12px 0; }

/* ---- Reklam konteynerleri (responsive · CLS-güvenli · "Advertisement" etiketli) ---- */
.playf2p-ad{ margin:18px auto; text-align:center; max-width:100%; overflow:hidden; }
.playf2p-ad ins, .playf2p-ad iframe, .playf2p-ad img{ max-width:100%; height:auto; }
/* Yatay leaderboard slotlarında en az leaderboard yüksekliği rezerve → düzen kayması (CLS) yok */
.playf2p-ad--homepage_top, .playf2p-ad--category_top, .playf2p-ad--game_below{ min-height:90px; }
.playf2p-ad-label{
	display:block; font-size:10px; line-height:1; letter-spacing:.6px; text-transform:uppercase;
	color:#9aa3af; margin-bottom:4px; text-align:center;
}

/* ---- Yapışkan alt şerit (anchor) — kapatılabilir ---- */
.playf2p-anchor{
	position:fixed; left:0; right:0; bottom:0; z-index:1000;
	display:flex; flex-direction:column; align-items:center;
	padding:6px 8px 8px; background:rgba(17,21,28,.94);
	box-shadow:0 -2px 14px rgba(0,0,0,.28);
}
.playf2p-anchor .playf2p-ad-label{ color:#cbd2dc; margin-bottom:2px; }
.playf2p-anchor-slot{ max-width:100%; overflow:hidden; }
.playf2p-anchor-slot ins, .playf2p-anchor-slot iframe, .playf2p-anchor-slot img{ max-width:100%; height:auto; }
.playf2p-anchor-close{
	position:absolute; top:-13px; right:12px; width:28px; height:28px; border-radius:50%;
	border:0; background:#11151c; color:#fff; font-size:18px; line-height:26px; cursor:pointer;
	box-shadow:0 2px 8px rgba(0,0,0,.35);
}
body.playf2p-anchor-closed .playf2p-anchor{ display:none; }

/* "Popular Games" kategori kutuları (referans: wdg_label_overview) —
 * 3 sütun, her kutuda h3 kategori başlığı + 3x3 karo. */
/* Ana başlık bandı = h2.box-title'ın kendisi (gamesgames.com referansı):
 * tam genişlikte gri zemin, hafif yuvarlak köşe, ortalanmış mavi+altı çizili link.
 * styles.css zaten h2'ye gri zemini veriyor; header'ın flex oluşu başlığı içeriğe
 * göre daraltıp küçük kutu yapıyordu — header'ı block yapıp başlığı tam genişlete. */
.wdg_label_overview > .box-header{
	display:block;
	background:transparent;
	border-bottom:0 !important;
	padding:0;
	margin:0;
}
.wdg_label_overview h2.box-title{
	display:block;
	background:#e0e0e0;
	border-radius:0.4rem;
	margin:12px 0;
	line-height:2;
	text-align:center;
	font-size:24px;
}
.wdg_label_overview > .box-header .box-title a{ color:#438afe; text-decoration:underline; }

/* Kategori kutusu başlıkları: çizgisiz, altı çizili mavi link (styles.css resetini ez) */
.label-overview-cell > .box-header{
	border-bottom:0 !important;
	padding-bottom:0;
	margin-bottom:8px;
}
.label-overview-cell{ margin-bottom:14px; }
.label-overview-cell .box-title{ font-size:19px; }
.label-overview-cell .box-title a{ color:#438afe; text-decoration:underline; }

/* Başlık hover ok animasyonu (referans: gamesgames.com .animated-fw-arrows).
 * Try Now / New Games / Popular Games kategori başlıklarında, başlık linki hover
 * edilince metnin yanında soldan sağa kademeli beliren üç ">" chevron'u akar.
 * Yapı: tek wrapper span (display:none → hover'da inline-block), içindeki span +
 * ::before + ::after üç chevron'u oluşturur; renkleri 1sn sonsuz döngüde saydamdan
 * temaya (#3775cc) geçer, kademeli gecikme (kf-1/2/3) ile "akış" hissi verir. */
.box-title a{ position:relative; }
/* Başlık .ellipsis ile overflow:hidden + nowrap; bu, metin dışına taşan mutlak
 * konumlu chevron'ları kırpıyor. Ok içeren başlıklarda taşmaya izin ver. */
.box-title:has(.animated-fw-arrows){ overflow:visible; }
.box-title:hover .animated-fw-arrows{ display:inline-block; }
.animated-fw-arrows{
	display:none;
	position:absolute;
	margin-left:0.35em;
	font-size:1em;
}
.animated-fw-arrows span,
.animated-fw-arrows span::before,
.animated-fw-arrows span::after{
	display:inline-block;
	width:0.4em;
	height:0.4em;
	border-right:2px solid rgba(55,117,204,0);
	border-bottom:2px solid rgba(55,117,204,0);
	position:absolute;
}
.animated-fw-arrows span{
	transform-origin:top left;
	transform:rotate(-45deg);
	top:0.75em;
	animation:playf2p-fw-arrows-1 1s infinite;
}
.animated-fw-arrows span::before{
	content:"";
	left:0.25em;
	top:0.25em;
	animation:playf2p-fw-arrows-2 1s infinite;
}
.animated-fw-arrows span::after{
	content:"";
	left:0.5em;
	top:0.5em;
	animation:playf2p-fw-arrows-3 1s infinite;
}
@keyframes playf2p-fw-arrows-1{
	0%{ border-right-color:rgba(55,117,204,0); border-bottom-color:rgba(55,117,204,0); }
	100%{ border-right-color:#3775cc; border-bottom-color:#3775cc; }
}
@keyframes playf2p-fw-arrows-2{
	0%,25%{ border-right-color:rgba(55,117,204,0); border-bottom-color:rgba(55,117,204,0); }
	100%{ border-right-color:#3775cc; border-bottom-color:#3775cc; }
}
@keyframes playf2p-fw-arrows-3{
	0%,50%{ border-right-color:rgba(55,117,204,0); border-bottom-color:rgba(55,117,204,0); }
	100%{ border-right-color:#3775cc; border-bottom-color:#3775cc; }
}
@media (prefers-reduced-motion: reduce){
	.animated-fw-arrows span,
	.animated-fw-arrows span::before,
	.animated-fw-arrows span::after{ animation:none; border-right-color:#3775cc; border-bottom-color:#3775cc; }
}

/* "Popular Games" metin-link kolonları (referans alt bölümü) */
.wdg_popular_links .pop-cols{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:8px 24px;
	padding:6px 0 10px;
}
@media (max-width:1000px){ .wdg_popular_links .pop-cols{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .wdg_popular_links .pop-cols{ grid-template-columns:1fr; } }
.pop-col h3{ margin:10px 0 0; }
.pop-col h3 a{
	font-family:'Dosis',Arial,sans-serif;font-weight:700;font-size:17px;
	color:#438afe;text-decoration:none;text-transform:uppercase;
}
.pop-col h3 a:hover{ text-decoration:underline; }
.pop-col ul{ list-style:none;margin:8px 0 0;padding:0; }
.pop-col li a{ display:block;padding:3px 0;color:#434343;font-size:14px;text-decoration:none; }
.pop-col li a:hover{ color:#438afe;text-decoration:underline; }
.pop-col .pop-all{ display:inline-block;margin-top:6px;font-weight:700;font-size:13px;color:#438afe;text-decoration:none; }
.pop-col .pop-all:hover{ text-decoration:underline; }

/* Ana sayfa SEO açıklama bloğu */
.home-seo{ margin:18px 0 6px;border-radius:5px;overflow:hidden;background:#fffdf2;border:1px solid #efe7c8; }
.home-seo-title{
	margin:0;padding:10px 16px;background:#d50000;color:#fff;
	font-family:'Dosis',Arial,sans-serif;font-weight:700;font-size:18px;text-transform:uppercase;
}
.home-seo-text{ padding:12px 16px;color:#555;font-size:13px;line-height:1.7; }
.home-seo-text a{ color:#438afe; }

/* ───────────────── MOBİL (≤1024px) — referans: gamesgames.com mobil ─────────────────
 * Header: hamburger sol (agame absolute), logo ORTADA, arama ikonu sağda.
 * Off-canvas menü zaten agame CSS + theme.js ile çalışıyor; burada konum/dokunma
 * rötuşları yapılıyor (logo ortalama, menü başlığı X/logo çakışması, chevron
 * dokunma alanı, gövde scroll kilidi). Masaüstü (≥1025px) etkilenmez. */
@media (max-width:1024px){
	/* Logo'yu header'da yatay ortala; burger ve arama için yan boşluk bırak */
	#wdg_header .header-home-container{
		display:flex;
		align-items:center;
		justify-content:center;
		height:48px;
		padding:0 48px;
	}
	#wdg_header .header-home{ margin:0 auto; }
	/* Metin logo: styles.css'in görsel logoya göre ayarlanmış ofsetlerini
	 * (padding:10px, float, negatif margin) sıfırla; 48px bantta tam dikey
	 * ortala ve wordmark gibi büyüt (referans logosu ~42px yüksek görsel). */
	#wdg_header_logo{
		display:flex !important;
		align-items:center;
		height:48px;
		margin:0 auto;
		padding:0 !important;
		float:none;
	}
	#wdg_header_logo .playf2p-logo-text{
		display:inline-block;
		font-size:28px;
		line-height:1;
	}

	/* Arama bölgesi header'ın sağ-üstünde, 48px header içinde dikey ortalı.
	 * (Menü paneli içeride position:fixed olduğundan bundan etkilenmez.)
	 * #showSearch agame'de position:relative !important olduğu için onunla
	 * savaşmak yerine kapsayıcısını konumlandırıyoruz. */
	#wdg_header .header-menu-container{
		position:absolute; top:0; right:0;
		height:48px;
		display:flex; align-items:center;
		margin:0; padding:0;
		/* yatay boşluğu ikonun kendi margin-right:15px'i verir (referansla aynı) */
	}
	#wdg_header #showSearch{ cursor:pointer; z-index:2; }

	/* Off-canvas menü başlığı: X solda, logo X'in sağında (üst üste binmesin) */
	.menu-container .menu-header{
		display:flex;
		align-items:center;
		background:transparent;
	}
	.menu-container .menu-header .logo{
		display:inline-block;
		margin:0;
		padding-left:52px;
		color:#fff;
		line-height:48px;
		font-family:'Dosis',Arial,sans-serif;
		font-weight:700;
	}
	.menu-container-closebutton{ z-index:1; }

	/* Kategori chevron'u dokunulabilir + geniş (48px) dokunma alanı */
	#wdg_menu .menu-item .menu-item-button-container{ position:relative; }
	#wdg_menu .menu-item .arrow{ pointer-events:auto; }
	#wdg_menu .menu-item .arrow::before{
		content:"";
		position:absolute;
		top:0; right:0;
		width:56px; height:48px;
	}

	/* Menü açıkken arka plan kaydırması kilitli */
	body.menu-open{ overflow:hidden; }

	/* Mobil arama: büyütece dokununca tam genişlik arama çubuğu açılır
	 * (.search-open agame'de mobilde zaten position:fixed; tam genişlik). */
	body.pf-search-open #wdg_search_bar{ visibility:visible; }
	body.pf-search-open #wdg_search_bar .search-open{ z-index:1001; }
	body.pf-search-open .search-open__left-arrow{ display:inline-block !important; }
	/* admin bar açıkken arama çubuğu admin bar'ın altından başlasın */
	body.admin-bar.pf-search-open #wdg_search_bar .search-open{ top:46px; }
}

/* ───────── WordPress admin bar düzeltmesi (login olunca header kaybolması) ─────────
 * Mobilde (≤782px) WP admin bar'ı `position:absolute` yapıyor ve `html{margin-top:46px}`
 * ekliyor; absolute bar o 46px boşluğa değil içerik alanına (y:46) oturup site
 * header'ının (y:46) ÜSTÜNE biniyordu. Bar'ı fixed'e zorlayınca üst 46px'i kaplar,
 * html margin'i header'ı tam altına iter — masaüstündeki davranışın aynısı. */
#wpadminbar{ position:fixed !important; }
/* Off-canvas menü paneli (position:fixed; top:0) admin bar'ın altından başlasın ki
 * kapat (X) butonu admin bar altında kalmasın. */
body.admin-bar .menu-container{ top:46px; height:calc(100% - 46px); }
@media screen and (min-width:783px){
	body.admin-bar .menu-container{ top:32px; height:calc(100% - 32px); }
}