/*
Theme Name: Arcade HTML5 Game Theme
Theme URI: https://siteadresi.com
Author: Fatih Kahraman
Description: Modern, Dark Mode HTML5 Game Theme
Version: 2.1
License: GNU General Public License v2 or later
Text Domain: arcade-theme
Tags: game, dark-mode, responsive, adsense
*/

/* --- 1. DEĞİŞKENLER VE SIFIRLAMA --- */
:root {
    --bg-body: #0f172a;       /* Ana Arka Plan (Koyu Lacivert) */
    --bg-card: #1e293b;       /* Kart/Kutu Arka Planı */
    --bg-nav: #162032;        /* Menü Arka Planı */
    --primary: #3b82f6;       /* Vurgu Rengi: Mavi */
    --accent: #f43f5e;        /* Vurgu Rengi: Neon Pembe */
    --text-main: #e2e8f0;     /* Ana Yazı Rengi (Beyazımsı) */
    --text-muted: #94a3b8;    /* Sönük Yazı Rengi (Gri) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    font-family: 'Rajdhani', sans-serif; /* Oyun Fontu */
    background-color: var(--bg-body); 
    color: var(--text-main);
    line-height: 1.6;
    font-size: 16px;
}

a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* --- 2. HEADER (ÜST KISIM) --- */
.site-header { 
    background: rgba(30, 41, 59, 0.9); /* Yarı saydam */
    backdrop-filter: blur(10px); /* Buzlu cam efekti */
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: sticky; top: 0; z-index: 999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.header-grid { 
    display: flex; align-items: center; justify-content: space-between; 
    padding: 15px 0; gap: 20px; 
}

.site-title a { 
    font-size: 32px; 
    font-weight: 800; 
    color: #fff; 
    text-transform: uppercase; 
    letter-spacing: 2px;
    text-shadow: 0 0 15px var(--accent); /* Neon Parlama */
}

/* Header Reklamı */
.header-ad { margin-left: auto; }
.ad-label { 
    font-size: 10px; color: var(--text-muted); 
    display: block; text-align: right; 
    margin-bottom: 3px; letter-spacing: 1px; text-transform: uppercase; 
}

/* --- YENİ HEADER DÜZENİ (LOGO MENÜ İÇİNDE) --- */

/* Menü Çubuğu Genel Ayarı */
.main-navigation {
    background: var(--bg-nav); /* Koyu Lacivert */
    border-bottom: 2px solid var(--primary); /* Mavi Çizgi */
    padding: 0; /* Boşlukları sıfırla */
    height: 70px; /* Sabit yükseklik verelim */
    display: flex;
    align-items: center;
}

/* Logo ve Menüyü Yan Yana Dizen Kapsayıcı */
.nav-flex-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Logo solda, Menü sağda */
    height: 100%;
    width: 100%;
}

/* Logo Ayarları */
.site-branding {
    margin-right: 30px;
    display: flex;
    align-items: center;
}

.site-title a {
    font-size: 28px; /* Yazı fontunu biraz küçülttük menüye sığsın diye */
    line-height: 1;
    margin: 0;
}

.custom-logo-link img {
    max-height: 50px; /* Logo resminin yüksekliğini sınırla */
    width: auto;
}

/* Menü Linkleri Ayarı */
.main-navigation ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.main-navigation ul li {
    height: 100%; /* Linkler çubuğun boyunu kaplasın */
    display: flex;
    align-items: center;
}

.main-navigation ul li a {
    display: flex;
    align-items: center;
    padding: 0 20px; /* Yanlardan boşluk */
    height: 100%;
    color: var(--text-main);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
}

.main-navigation ul li a:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); /* Buton Parlaması */
}

/* --- 3. ANA SAYFA & OYUN KARTLARI --- */
.site-content { padding-top: 40px; padding-bottom: 60px; }

.section-title { 
    font-size: 24px; 
    font-weight: 700;
    border-left: 5px solid var(--accent); 
    padding-left: 15px; 
    margin: 40px 0 25px; 
    color: #fff;
    text-transform: uppercase;
}

.game-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 25px; 
}

.game-card { 
    background: var(--bg-card); 
    border-radius: 12px; 
    overflow: hidden; 
    border: 1px solid rgba(255,255,255,0.05);
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.game-card:hover { 
    transform: translateY(-7px); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); 
    border-color: var(--primary); /* Hoverda çerçeve rengi değişir */
}

.game-thumbnail { 
    position: relative; 
    padding-bottom: 75%; /* 4:3 Oranı */ 
    overflow: hidden; 
    background: #000;
}

.game-thumbnail img { 
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%; 
    object-fit: cover; 
    transition: transform 0.5s ease;
}

/* Kart Hover Efekti: Resim Büyür */
.game-card:hover .game-thumbnail img { 
    transform: scale(1.15); 
    filter: brightness(0.4); /* Resim kararır */
}

/* Play İkonu Katmanı */
.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s;
    z-index: 2;
}
.overlay i { 
    font-size: 48px; 
    color: #fff; 
    text-shadow: 0 0 20px var(--accent); /* İkon Parlaması */
    transform: scale(0.8); transition: transform 0.3s;
}
.game-card:hover .overlay { opacity: 1; }
.game-card:hover .overlay i { transform: scale(1); }

.game-info { padding: 15px; }
.game-title { 
    font-size: 16px; 
    font-weight: 700; 
    color: #fff; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
    margin-bottom: 5px;
}
.game-category { 
    font-size: 11px; 
    color: var(--primary); 
    text-transform: uppercase; 
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* --- SAYFALANDIRMA (PAGINATION) DÜZELTMESİ --- */
.pagination { 
    display: flex; 
    flex-direction: row; /* Yan yana zorla */
    justify-content: center; 
    align-items: center;
    gap: 10px; 
    margin-top: 30px;
    flex-wrap: wrap; /* Mobilde taşarsa aşağı geçsin */
}

/* Sayfa Numaraları ve Oklar */
.pagination .page-numbers {
    background: var(--bg-card);
    color: #fff;
    padding: 10px 16px; /* Kutuyu biraz genişlettik */
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px; /* Minimum genişlik */
    height: 40px;    /* Sabit yükseklik */
    transition: all 0.2s ease;
    text-decoration: none; /* Alt çizgiyi kaldır */
}

/* Aktif Sayfa ve Hover Durumu */
.pagination .current, 
.pagination .page-numbers:hover {
    background: var(--accent); /* Neon Pembe */
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-2px); /* Hafif yukarı kalksın */
    box-shadow: 0 4px 10px rgba(244, 63, 94, 0.4); /* Parlama */
}

/* --- 4. OYUN OYNAMA SAYFASI (SINGLE) --- */
.game-play-page { margin-top: 20px; }

.breadcrumb { 
    background: var(--bg-card); 
    padding: 12px 20px; 
    border-radius: 8px; 
    margin-bottom: 25px; 
    font-size: 14px; 
    color: var(--text-muted);
    border: 1px solid rgba(255,255,255,0.05);
}
.breadcrumb a { color: var(--primary); font-weight: 600; }
.breadcrumb i { margin-right: 5px; }
.breadcrumb span { color: #fff; font-weight: bold; margin-left: 5px; }

.single-title { color: #fff; font-size: 32px; margin-bottom: 20px; font-weight: 800; }

.game-layout-wrapper { display: flex; gap: 30px; margin-bottom: 40px; }
.game-main-col { flex: 2; min-width: 0; /* Flexbox taşma sorunu için */ }
.game-sidebar-col { flex: 0 0 340px; max-width: 340px; }

/* Oyun Ekranı Çerçevesi */
.game-screen-wrapper {
    background: #000;
    border: 4px solid #222;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0,0,0,0.5); /* Derin gölge */
}
.iframe-box {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.iframe-box iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;
}

/* Kontrol Çubuğu */
.game-controls-bar {
    background: #111;
    border: 4px solid #222; border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 12px 20px;
    display: flex; justify-content: flex-end;
}

#fullscreen-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 30px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px; font-weight: 700; text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(244, 63, 94, 0.4);
    display: flex; align-items: center; gap: 8px;
    transition: 0.3s;
}
#fullscreen-btn:hover { 
    background: #fff; color: var(--accent); 
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.6);
}

.game-description-content { 
    background: var(--bg-card); 
    padding: 30px; 
    border-radius: 12px; 
    margin-top: 30px; 
    border: 1px solid rgba(255,255,255,0.05);
    color: #ccc;
}
.game-description-content h3 { color: var(--primary); margin-bottom: 15px; font-size: 22px; display: flex; align-items: center; gap: 10px; }

/* --- 5. SIDEBAR (YAN MENÜ) --- */
.related-games-widget { 
    background: var(--bg-card); 
    padding: 20px; 
    border-radius: 12px; 
    border: 1px solid rgba(255,255,255,0.05);
}
.widget-title { 
    color: #fff; 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    padding-bottom: 12px; margin-bottom: 20px; 
    font-size: 18px; display: flex; align-items: center; gap: 10px;
}

.side-game-item { 
    display: flex; gap: 15px; margin-bottom: 15px; 
    padding: 10px; border-radius: 8px; transition: 0.2s; 
    background: rgba(255,255,255,0.02);
}
.side-game-item:hover { background: rgba(255,255,255,0.08); }

.side-game-img { 
    width: 90px; height: 65px; 
    border-radius: 6px; overflow: hidden; 
    flex-shrink: 0;
}
.side-game-img img { width: 100%; height: 100%; object-fit: cover; }

.side-game-txt h4 { color: #eee; font-size: 14px; margin: 0 0 5px; line-height: 1.3; }
.play-small { 
    color: var(--accent); font-weight: bold; font-size: 11px; 
    text-transform: uppercase; display: flex; align-items: center; gap: 5px;
}

/* --- 6. REKLAM KUTULARI (GENEL) --- */
.ad-zone { margin: 25px 0; text-align: center; clear: both; }
.ad-placeholder { 
    /* PHP'den gelen stilin üzerine yazar gerekirse */
    border-radius: 4px; 
}

/* --- 7. FOOTER --- */
.site-footer { 
    background: #0b1120; 
    border-top: 1px solid #1e293b; 
    padding: 40px 0; margin-top: 60px; 
    color: var(--text-muted);
    font-size: 14px;
}

/* --- 8. MOBİL UYUM (RESPONSIVE) --- */
@media (max-width: 900px) {
    .game-layout-wrapper { flex-direction: column; }
    .game-sidebar-col { max-width: 100%; flex: auto; }
    
    /* Mobilde sidebar oyunları yan yana 2'li olsun */
    .sidebar-games-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .side-game-item { flex-direction: column; text-align: center; }
    .side-game-img { width: 100%; height: 100px; }
    .side-game-item { align-items: center; justify-content: center; }
}

@media (max-width: 768px) {
    .header-grid { flex-direction: column; text-align: center; gap: 15px; }
    .header-ad { width: 100%; margin: 0; display: flex; justify-content: center; }
    
    .game-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    
    .single-title { font-size: 24px; text-align: center; }
    .game-controls-bar { justify-content: center; }
    
    /* Mobilde sidebar eski haline dönsün */
    .sidebar-games-list { display: block; }
    .side-game-item { flex-direction: row; text-align: left; }
    .side-game-img { width: 90px; height: 65px; }
    .side-game-item { align-items: flex-start; justify-content: flex-start; }
    
    /* MOBİL HEADER DÜZENLEME */
    .main-navigation {
        height: auto; /* Mobilde yükseklik serbest olsun */
        padding: 10px 0;
    }
    .nav-flex-wrapper {
        flex-direction: column; /* Alt alta dizilsinler */
        gap: 10px;
    }
    .site-branding {
        margin-right: 0;
        margin-bottom: 5px;
    }
    .main-navigation ul {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* --- MOBİL TAM EKRAN DÜZELTMESİ --- */

/* Tam Ekran Aktif Olduğunda Devreye Girecek Sınıf */
.mobile-force-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important; /* Ekran genişliği */
    height: 100vh !important; /* Ekran yüksekliği */
    z-index: 999999 !important; /* Her şeyin üstünde */
    background: #000;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Tam ekranken iframe ayarları */
.mobile-force-fullscreen .iframe-box {
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important; /* Aspect ratio'yu iptal et */
}

/* Tam Ekrandan Çık Butonu (Mobilde Görünür) */
#mobile-exit-btn {
    display: none; /* Normalde gizli */
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000000;
    background: rgba(255, 0, 0, 0.7);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

/* Sadece sınıf eklendiğinde butonu göster */
.mobile-force-fullscreen #mobile-exit-btn {
    display: block;
}
/* --- RTL (İBRANİCE) DÜZELTMELERİ --- */
body {
    direction: rtl;
    text-align: right;
}

/* Header Ters Çevirme */
.header-ad { margin-left: 0; margin-right: auto; }
.ad-label { text-align: left; }
.site-branding { margin-right: 0; margin-left: 30px; }

/* Başlık Çizgisini Sağa Alma */
.section-title {
    border-left: none;
    border-right: 5px solid var(--accent);
    padding-left: 0;
    padding-right: 15px;
}

/* Breadcrumb Ok Yönleri */
.breadcrumb i { margin-right: 0; margin-left: 5px; }
.breadcrumb span { margin-left: 0; margin-right: 5px; }

/* Sidebar (Yan Menü) Hizalamaları */
.side-game-txt h4 { text-align: right; }
.play-small { justify-content: flex-start; }

/* Oyun İçi Kontroller */
.game-controls-bar { justify-content: flex-start; } /* Buton sola geçer */
#fullscreen-btn { flex-direction: row-reverse; } /* İkonu metnin sağına alır */

/* Footer */
.footer-info { direction: rtl; }