/*
Theme Name:     SEO Affiliate Theme
Theme URI:      https://example.com/
Author:         Siz
Description:    SEO odaklı tek sayfa affiliate teması.
Version:        1.1
Text Domain:    seo-affiliate-theme
Tags:           affiliate, single-page, seo
*/

/* ─ Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f5f5f5;
}
a {
  color: #0073aa;
  text-decoration: none;
}
a:hover {
  color: #005177;
}

/* ─ Container ──────────────────────────────────────────────────────────── */
.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem 0;
}

/* ─ Header & Nav Layout ─────────────────────────────────────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
}
.site-title a {
  color: #005177;
  font-size: 1.75rem;
  font-weight: bold;
  text-decoration: none;
}

/* Nav wrapper (menüyü ortalamak için) */
.nav-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─ Desktop Nav (hover dropdown) ────────────────────────────────────────── */
.desktop-nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.desktop-nav ul li {
  position: relative;
}
.desktop-nav ul li a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0;
  font-weight: 500;
  color: #333 !important;
}
.desktop-nav ul li a:hover,
.desktop-nav ul li a:focus {
  color: #005177 !important;
}

/* Dropdown oku */
.desktop-nav ul li.menu-item-has-children > a::after {
  content: "▾";
  display: inline-block;
  vertical-align: middle;
  margin-left: .25em;
  font-size: .8em;
}

/* Sub-menu panel */
.desktop-nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.5rem 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index: 10;
}
.desktop-nav li:hover > ul,
.desktop-nav li:focus-within > ul {
  display: block;
}
.desktop-nav li ul li a {
  display: block;
  padding: 0.5rem 1rem;
  color: #333 !important;
  white-space: nowrap;
}
.desktop-nav li ul li a:hover,
.desktop-nav li ul li a:focus {
  background: #f9f9f9;
}

/* ─ Login Button (sağda) ────────────────────────────────────────────────── */
.login-button {
  background: #005177;
  color: #fff !important;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: bold;
  white-space: nowrap;
  text-decoration: none;
  transition: background .3s;
}
.login-button:hover,
.login-button:focus {
  background: #003a5a;
}

/* ─ Mobile Nav (details/summary) ───────────────────────────────────────── */
.mobile-nav {
  display: none;
  position: relative;
}
.mobile-nav summary {
  background: #005177;
  color: #fff;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
  user-select: none;
  outline: none;
}
.mobile-nav summary:hover,
.mobile-nav summary:focus {
  background: #003a5a;
}
.mobile-nav[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.mobile-nav ul {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin: 0;
  padding: 0;
  z-index: 1000;
}
.mobile-nav li a {
  display: block;
  padding: 0.75rem 1rem;
  color: #333 !important;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}
.mobile-nav li:last-child a {
  border-bottom: none;
}

/* ─ Hero ───────────────────────────────────────────────────────────────── */
/* Hero bölümü daha sade ve küçük */
.hero {
  background: #20597b;
  padding: 24px 0 20px 0 !important;
  margin: 0;
  border-radius: 0 !important;
  width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-height: unset !important;
}

.hero .container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.hero h1 {
  font-size: 2.0rem !important;  /* daha küçük başlık */
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}

.hero p {
  font-size: 1.1rem !important;
  margin: 0;
  color: #e2eaf1;
}


/* ─ Post Meta & Last Updated ───────────────────────────────────────────── */
#post-meta,
#last-updated {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  max-width: 900px;
  margin: 1rem auto !important;
  padding: 1rem 1.5rem !important;
  font-size: .9rem;
  color: #555;
}
#last-updated {
  text-align: right;
}

/* ─ Content Blocks ─────────────────────────────────────────────────────── */
#intro,
#detail,
#affiliate,
#faq,
#related,
#previous {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  max-width: 900px;
  margin: 2rem auto !important;
  padding: 1.5rem;
}

/* ─ Affiliate Cards Grid ───────────────────────────────────────────────── */
#affiliate .affiliate-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
#affiliate .card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 1 1 calc(30% - 1rem);
  max-width: calc(30% - 1rem);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
  /* eski padding: .5rem; yerine: */
  padding: 0.5rem 0.5rem 0; 
}
#affiliate .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}
#affiliate .card img {
  width: 100%;
  height: auto;        /* yükseklik otomatik */
  object-fit: contain; /* kırpma yok, bütün resim sığdırılır */
  margin-bottom: 0;    /* alt boşluğu kaldır */
  border-bottom: 1px solid #eee; /* isterseniz hafif bir ayırıcı */
}

/* ─ Section Titles ──────────────────────────────────────────────────────── */
#affiliate h2,
#detail h2,
#faq h2,
#related h2,
#previous h2 {
  color: #005177;
  margin-bottom: 1rem;
}

/* ─ Detail Images ───────────────────────────────────────────────────────── */
#detail img {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin: 1rem 0;
}

/* ─ FAQ ────────────────────────────────────────────────────────────────── */
.faq-item h3 {
  font-size: 1rem;
  color: #005177;
}
.faq-item p {
  font-size: .9rem;
  color: #555;
}

/* ─ Collapsible Details ────────────────────────────────────────────────── */
details {
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
}
summary {
  cursor: pointer;
  font-weight: bold;
}

/* ─ Responsive Toggles ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Header iki satır yap */
  header .container {
    flex-wrap: wrap;
  }
  .site-title {
    order: 1;
    width: auto;
  }
  .login-button {
    order: 2;
    margin-left: auto;
  }
  .nav-wrapper {
    order: 3;
    width: 100%;
    justify-content: center;
    margin: 0.5rem 0;
  }

  .desktop-nav { display: none; }
  .mobile-nav  { display: block; }

  /* Kartlar mobilde tek sütun */
  #affiliate .card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
@media (min-width: 769px) {
  .mobile-nav  { display: none; }
  .desktop-nav { display: flex; }
}