/*
Theme Name: Taraftarız
Theme URI: https://example.com/taraftariz
Author: Taraftarız
Author URI: https://example.com
Description: Futbol haberleri, quizler, oyunlaştırma ve topluluk özellikleri için modern WordPress teması.
Version: 0.2.0
License: GPL-2.0-or-later
Text Domain: taraftariz
*/

/* Renk Değişkenleri */
:root {
  --bg-900: #0f1216;
  --bg-850: #11161b;
  --bg-800: #141a20;
  --bg-700: #172027;
  --bg-600: #1a2830;
  --text-100: #f5f7fb;
  --text-200: #c8d0da;
  --muted: #9aa6b2;
  --accent: #3da5ff; /* mavi */
  --accent-contrast: #0b1020;
  --accent-2: #8ecaff;
  --card-border: #22303b;
  --success: #2ecc71;
  --danger: #ef5b5b;
  --warning: #f39c12;
}

/* Temel Tipografi ve Reset */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -200px, #1b2836 0%, var(--bg-900) 60%), var(--bg-900);
  color: var(--text-100);
  font-family: 'Poppins', 'Roboto', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { opacity: .9; }

.container { width: min(1200px, 92%); margin: 0 auto; }

.button,
button,
input[type="submit"],
input[type="button"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #031321;
  border: none;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .08s ease, opacity .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(61,165,255,.25);
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover { transform: translateY(-1px); }

.card {
  background: linear-gradient(180deg, var(--bg-800), var(--bg-850));
  border: 1px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;
}

/* NAVBAR */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(15,18,22,.75); backdrop-filter: saturate(120%) blur(8px); border-bottom: 1px solid var(--card-border); }
.navbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:.2px; }
.nav-actions { display:flex; align-items:center; gap:12px; }
.site-nav { flex: 1 1 auto; display:flex; justify-content:center; }
.site-nav a { color: var(--text-100); padding: 8px 12px; border-radius: 10px; display: inline-block; }
.site-nav a:hover, .current-menu-item > a { background: var(--bg-700); color: var(--text-100); }
.search-input { background:#0b1117; border:1px solid var(--card-border); border-radius: 12px; color:var(--text-100); padding:8px 12px; min-width: 200px; }

/* NAVBAR layout tweaks */
.navbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; }
.site-nav { flex: 1 1 auto; display:flex; justify-content:center; }

/* Linkleri kutusuz, küçük ve parlak beyaz yap */
.site-nav ul { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:18px; flex-wrap:nowrap; }
.site-nav ul > li > a {
  background: none;
  border: none;
  color: var(--text-100);
  padding: 6px 2px;
  border-radius: 0;
  font-weight: 600;
  font-size: 16px; /* artırıldı */
}
.site-nav ul > li > a:hover,
.site-nav ul > li.current-menu-item > a,
.site-nav ul > li.current-menu-ancestor > a {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(255,255,255,.35);
}

/* Eski stiller devre dışı bırakılıyor, uyumluluk için bırakıldı */
.primary-menu { list-style:none; display:flex; align-items:center; gap:18px; margin:0; padding:0; flex-wrap:nowrap; }
.primary-menu > li > a { background:none; border:none; color:var(--text-100); padding:6px 2px; border-radius:0; font-weight:600; font-size:16px; }
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-ancestor > a { color:#fff; text-shadow:0 0 18px rgba(255,255,255,.35); }

/* Arama alanını menüye yaklaştır */
.nav-actions { display:flex; align-items:center; gap:12px; }
.search-input { min-width: 200px; }

.site-footer { margin-top: 40px; padding: 32px 0; border-top: 1px solid var(--card-border); background: var(--bg-800); color: var(--text-200); }

/* HERO */
.hero { position: relative; border-radius: 18px; overflow: hidden; margin-block: 24px; min-height: 320px; display: grid; place-items: center; text-align: center; }
.hero::before { content:""; position:absolute; inset:0; background: radial-gradient(1000px 300px at 50% 0%, rgba(61,165,255,.25), transparent 60%); pointer-events:none; }
.hero .content { position:relative; z-index:2; padding: 48px 16px; }
.hero h1 { font-size: clamp(32px, 3.6vw, 52px); margin: 0 0 8px; text-shadow: 0 8px 24px rgba(0,0,0,.4); }
.hero p { color: var(--text-200); margin: 0 0 16px; }
.hero img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; opacity:.55; filter: saturate(105%) contrast(105%); }

.grid { display: grid; gap: 16px; }
.grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.post-meta { color: var(--muted); font-size: 14px; }

/* Mobil menü */
.menu-toggle { 
  display: none; 
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  color: white;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 12px;
  transition: all 0.3s ease;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(61,165,255,0.3);
}

.menu-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(61,165,255,0.4);
}

.menu-toggle svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 900px) {
  .menu-toggle { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
  }
  
  /* Mobil menü için ek düzeltmeler */
  .site-nav {
    display: none;
  }
  
  .site-nav.is-open {
    display: block;
  }
  
  .site-nav { 
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-800);
    border-top: 1px solid var(--card-border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    border-radius: 0 0 16px 16px;
    backdrop-filter: blur(10px);
  }
  
  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .site-nav ul { 
    display: block; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 0;
    padding: 24px;
    margin: 0;
  }
  
  .site-nav ul.is-open { 
    display: block; 
  }
  
  .site-nav ul li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--card-border);
    transition: all 0.2s ease;
  }
  
  .site-nav ul li:last-child {
    border-bottom: none;
  }
  
  .site-nav ul li:hover {
    background: var(--bg-700);
    border-radius: 8px;
    margin: 4px 0;
  }
  
  .site-nav ul li a {
    display: block;
    padding: 16px 20px;
    color: var(--text-100);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.2s ease;
    border-radius: 8px;
  }
  
  .site-nav ul li a:hover {
    color: var(--accent);
    background: var(--bg-700);
    transform: translateX(8px);
  }
  
  /* Menü butonu animasyonları */
  .menu-toggle .menu-icon,
  .menu-toggle .close-icon {
    transition: all 0.3s ease;
  }
  
  .menu-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(61,165,255,0.4);
  }
  
  .menu-toggle:active {
    transform: translateY(0);
  }
  
  /* Menü açıkken buton stilleri */
  .menu-toggle[aria-expanded="true"] {
    background: linear-gradient(135deg, var(--danger), #ff6b6b);
    box-shadow: 0 4px 16px rgba(239, 91, 91, 0.3);
  }
  
  .menu-toggle[aria-expanded="true"]:hover {
    box-shadow: 0 6px 20px rgba(239, 91, 91, 0.4);
  }
  
  .primary-menu { 
    display: none; 
  }
  
  .primary-menu.is-open { 
    display: block; 
  }
  
  .search-input { 
    display: none; 
  }
  
  .navbar {
    position: relative;
  }
}