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

:root {
  --bg: #0a0a0f;
  --surface: #111118;
  --surface2: #1a1a24;
  --surface3: #22222f;
  --border: rgba(255,255,255,0.07);
  --accent: #e8c96d;
  --accent-dim: rgba(232,201,109,0.12);
  --accent-glow: rgba(232,201,109,0.35);
  --text: #f0ede8;
  --muted: rgba(240,237,232,0.45);
  --muted2: rgba(240,237,232,0.65);
  --card-radius: 18px;
  --max-width: 1080px;
}

html { scroll-behavior: smooth; }

/* Sabit (sticky) navbar, anchor ile kaydırılan bölümlerin üstünü kapatmasın diye
   her bağlantı hedefine navbar yüksekliği kadar boşluk payı veriyoruz.
   #top için daha küçük bir pay bırakıyoruz ki tıklanınca sayfa, ilk yüklenmiş
   hâlinin birebir aynısına değil, biraz daha aşağıya, daha dinamik bir noktaya insin. */
#top {
  scroll-margin-top: 24px;
}
#tool, #how, #genres, #faq, #blog {
  scroll-margin-top: 90px;
}

body {
  background:
    radial-gradient(circle at 20% -10%, rgba(232,201,109,0.06), transparent 45%),
    radial-gradient(circle at 90% 10%, rgba(120,140,255,0.05), transparent 40%),
    var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  /* Alttaki reklam şeridi artık "fixed" (her zaman görünür/takip eder),
     bu yüzden akıştan çıkıyor ve normalde sayfanın en alt içeriğinin
     (footer) üzerine biner. JS'in ölçtüğü gerçek yüksekliğe göre alta
     boşluk bırakıyoruz ki footer hiçbir zaman gizlenmesin. Şerit
     gizliyse bu değer 0'a döner. */
  padding-bottom: var(--ad-bottom-h, 0px);
}

.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.6;
}

a { color: inherit; }

/* ================= NAVBAR ================= */
.navbar {
  position: sticky;
  /* "fixed" olan üst reklam şeridi artık belge akışında hiç yer
     kaplamıyor (fixed elemanlar akıştan çıkar) — bu yüzden navbar'ı
     hem başlangıçta (margin-top) hem kaydırılınca (sticky top) o
     şeridin YÜKSEKLİĞİ kadar aşağı itiyoruz, JS'in ölçtüğü gerçek
     yüksekliğe göre (--ad-top-h). Şerit gizliyse (reklam yok/kapatıldı)
     bu değer 0'a döner, navbar tam en üste oturur. */
  margin-top: var(--ad-top-h, 0px);
  top: var(--ad-top-h, 0px);
  z-index: 50;
  background: rgba(10,10,15,0.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}

.nav-logo span { color: var(--accent); }

.nav-links {
  display: flex;
  gap: 28px;
  flex: 1;
  justify-content: center;
}

.nav-links a {
  text-decoration: none;
  font-size: 14px;
  color: var(--muted2);
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--accent); }

.lang-switch {
  display: flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.lang-btn {
  border: none;
  background: transparent;
  color: var(--muted2);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.lang-btn.active { background: var(--accent); color: #0a0a0f; }
.lang-btn:not(.active):hover { color: var(--text); }

.nav-cta {
  text-decoration: none;
  background: var(--accent);
  color: #0a0a0f;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 8px;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.2s;
}

.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); }

/* ================= MOBİL MENÜ (hamburger) ================= */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: var(--surface2);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 780px) {
  .nav-inner { padding: 15px 16px; gap: 8px; flex-wrap: wrap; }
  .nav-toggle { display: flex; }

  /* Masaüstünde yatay bir menü olan .nav-links, mobilde navbar'ın hemen altına
     açılan tam genişlikte bir dropdown panele dönüşür. Öğeler DOM'dan
     kaldırılmaz (erişilebilirlik/SEO için), sadece açılana kadar gizlenir. */
  .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(10,10,15,0.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }

  .nav-links.open {
    max-height: 420px;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links a {
    padding: 16px 24px; /* 44px+ dokunma hedefi için yeterli satır yüksekliği */
    border-top: 1px solid var(--border);
    font-size: 15px;
  }

  /* Dil seçici ve CTA butonuna daha az yer harca, hamburger ile birlikte
     tek satıra sığsın */
  .lang-btn { padding: 12px 11px; font-size: 12px; }
  .nav-cta { padding: 10px 15px; font-size: 12.5px; }
}

@media (max-width: 420px) {
  /* En dar telefon ekranlarında (ör. iPhone SE) üst satırı daha da sıkıştır */
  .nav-logo { font-size: 18px; }
  /* nav-cta zaten logo ile aynı işlevi görüyor (ana sayfaya dönüş); en dar
     ekranlarda satırın taşmasını önlemek için gizliyoruz. */
  .nav-cta { display: none; }
  .lang-btn { padding: 10px 9px; font-size: 11px; }
}

/* ================= HERO ================= */
.hero {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 72px 20px 24px;
}

.hero-inner { max-width: 700px; margin: 0 auto; }

.eyebrow {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); font-weight: 500; margin-bottom: 14px;
}

h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 10vw, 84px);
  line-height: 0.95;
  color: var(--text);
  letter-spacing: 0.02em;
}

h1 span { color: var(--accent); }

.subtitle {
  margin-top: 16px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}

/* ================= TOOL ================= */
main { position: relative; z-index: 1; }

.tool-section {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.controls {
  width: 100%;
  background: linear-gradient(180deg, var(--surface) 0%, #0d0d13 100%);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

.field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 600;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}

.segmented button {
  border: none;
  background: transparent;
  color: var(--muted2);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.segmented button.active {
  background: var(--accent);
  color: #0a0a0f;
  box-shadow: 0 6px 18px rgba(232,201,109,0.25);
}

.segmented button:not(.active):hover {
  color: var(--text);
  background: var(--surface3);
}

select {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  padding: 14px 18px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(240,237,232,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 42px;
}

select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
select option { background: #1a1a24; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 480px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.btn-main {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #f2dc94, var(--accent));
  color: #0a0a0f;
  border: none;
  border-radius: 12px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.btn-main:hover { transform: translateY(-2px); box-shadow: 0 10px 36px var(--accent-glow); }
.btn-main:active { transform: translateY(0); }
.btn-main:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-main .spinner {
  display: none;
  width: 20px; height: 20px;
  border: 2px solid rgba(0,0,0,0.3);
  border-top-color: #0a0a0f;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: auto;
}

.btn-main.loading .label { display: none; }
.btn-main.loading .spinner { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

.error {
  width: 100%;
  background: rgba(226, 75, 74, 0.1);
  border: 1px solid rgba(226, 75, 74, 0.3);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14px;
  color: #f09595;
  display: none;
  line-height: 1.5;
}

.result {
  width: 100%;
  display: none;
  animation: fadeUp 0.5s ease forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.film-card {
  background: linear-gradient(180deg, var(--surface) 0%, #0d0d13 100%);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 170px 1fr;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

.film-poster {
  width: 170px;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
  background: var(--surface2);
}

.film-poster-placeholder {
  width: 170px;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

.film-info {
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.film-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.badge {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 7px;
}

.badge-type { background: rgba(120,140,255,0.14); color: #9db0ff; border: 1px solid rgba(120,140,255,0.25); }
.badge-genre { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(232,201,109,0.2); }
.badge-year, .badge-lang, .badge-season { background: var(--surface2); color: var(--muted2); border: 1px solid var(--border); }

.film-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  letter-spacing: 0.03em;
  line-height: 1.05;
  color: var(--text);
}

.film-rating { display: flex; align-items: center; gap: 8px; }
.stars { display: flex; gap: 3px; }
.star { width: 14px; height: 14px; color: var(--accent); fill: var(--accent); }
.star.empty { fill: none; color: var(--border); }
.rating-text { font-size: 20px; font-weight: 500; color: var(--accent); line-height: 1; }
.rating-sub { font-size: 13px; color: var(--muted); }

.film-overview {
  font-size: 14px;
  color: var(--muted2);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.film-overview.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.overview-toggle {
  background: none;
  border: none;
  padding: 6px 0 0;
  margin: 0;
  color: var(--accent);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.overview-toggle:hover { text-decoration: underline; }

.overview-note {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  margin-top: -8px;
}

.providers {
  font-size: 13px;
  color: var(--muted2);
  line-height: 1.6;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}

.providers-label {
  color: var(--accent);
  font-weight: 600;
  margin-right: 4px;
}

.jw-attribution {
  font-size: 10px;
  color: var(--muted);
}

.tmdb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  margin-top: auto;
  transition: color 0.15s;
}

.tmdb-link:hover { color: var(--accent); }

.again-btn {
  width: 100%;
  padding: 14px;
  background: transparent;
  color: var(--muted2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  margin-top: 14px;
}

.again-btn:hover { border-color: rgba(255,255,255,0.2); color: var(--text); background: var(--surface2); }

.pool-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}

.trailer-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-top: 16px;
  background: #000;
}

.trailer-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.6);
}

.trailer-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  transition: background 0.2s;
}

.trailer-play:hover { background: rgba(0,0,0,0.15); }

.trailer-play svg {
  width: 60px;
  height: 60px;
  padding: 16px;
  background: var(--accent);
  color: #0a0a0f;
  border-radius: 50%;
  box-shadow: 0 8px 28px rgba(232,201,109,0.4);
  transition: transform 0.15s;
}

.trailer-play:hover svg { transform: scale(1.08); }

.trailer-play span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.trailer-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

@media (max-width: 500px) {
  .film-card { grid-template-columns: 1fr; }
  .film-poster { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top; }
  .film-poster-placeholder { width: 100%; height: 140px; }
}

/* ================= GENERIC SECTIONS ================= */
.section { padding: 80px 20px; }

.section.alt {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015) 15%, rgba(255,255,255,0.015) 85%, transparent);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-inner { max-width: var(--max-width); margin: 0 auto; text-align: center; }
.section-inner.narrow { max-width: 680px; }

.section-eyebrow {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 12px;
}

.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(32px, 5vw, 44px);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

.section-desc {
  color: var(--muted2);
  font-size: 15px;
  max-width: 520px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.steps {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}

@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
}

.step-icon { font-size: 30px; margin-bottom: 16px; }
.step h3 { font-size: 17px; margin-bottom: 8px; font-weight: 600; }
.step p { color: var(--muted); font-size: 14px; line-height: 1.6; }

.genre-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  text-align: left;
}

@media (max-width: 900px) { .genre-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .genre-grid { grid-template-columns: 1fr; } }

.genre-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  transition: transform 0.2s, border-color 0.2s;
}

.genre-card:hover { transform: translateY(-4px); border-color: rgba(232,201,109,0.3); }
.genre-emoji { font-size: 26px; display: block; margin-bottom: 10px; }
.genre-card h4 { font-size: 16px; margin-bottom: 6px; font-weight: 600; }
.genre-card p { color: var(--muted); font-size: 13px; line-height: 1.5; }

.features-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: left;
}

@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .features-grid { grid-template-columns: 1fr; } }

.feature { padding: 8px; }
.feature-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-dim);
  border: 1px solid rgba(232,201,109,0.2);
  border-radius: 12px;
  font-size: 20px;
  margin-bottom: 16px;
}
.feature h3 { font-size: 16px; margin-bottom: 8px; font-weight: 600; }
.feature p { color: var(--muted); font-size: 14px; line-height: 1.6; }

.faq-list { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; text-align: left; }

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.faq-q {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 20px 22px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.faq-q .plus { color: var(--accent); font-size: 20px; transition: transform 0.2s; flex-shrink: 0; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
  padding: 0 22px;
}

.faq-item.open .faq-a { max-height: 240px; padding: 0 22px 20px; }
.faq-a p { color: var(--muted2); font-size: 14px; line-height: 1.7; }

/* ================= BLOG ================= */
.blog-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 32px;
}

.blog-article {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 40px;
}

.blog-article h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
  margin: 28px 0 10px;
}

.blog-article h3:first-child { margin-top: 0; }

.blog-article p {
  font-size: 14.5px;
  color: var(--muted2);
  line-height: 1.8;
  margin-bottom: 4px;
}

@media (max-width: 600px) {
  .blog-article { padding: 24px 22px; }
}

/* ================= FOOTER ================= */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding: 56px 20px 0;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 40px;
}

.footer-tagline { color: var(--muted); font-size: 13px; margin-top: 10px; max-width: 260px; line-height: 1.6; }
.footer-links { display: flex; gap: 60px; }

.footer-col h5 {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px; font-weight: 600;
}

.footer-col a {
  display: block;
  color: var(--muted2);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 12px;
  transition: color 0.15s;
}

.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 22px 20px 32px;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 600px) {
  .footer-inner { flex-direction: column; }
  .footer-links { gap: 40px; }
}

/* ==========================================================
   REKLAM (ADS) ALTYAPISI — AdSense sticky/rail yerleşimi
   ==========================================================
   GİZLİ HAZIRLIK MODU: Aşağıdaki .ad-container kuralı reklam
   alanlarını sıfır piksel yer kaplayacak şekilde tamamen gizler
   (display:none => layout'ta hiç yer tutmaz, kaymaya sebep olmaz).

   >>> REKLAMLARI CANLIYA ALMAK İÇİN: bu kuraldaki "display: none;"
       satırını silin ya da yorum satırı yapın. Kod, JS döngüleri ve
       DOM yerleşimi zaten hazır; tek değişiklik bu satırdır. <<<
*/
/* GİZLİ HAZIRLIK MODU KAPATILDI (reklamlar artık canlı/görünür):
.ad-container {
  display: none !important;
}
*/

/* ---- Masaüstü: sol/sağ sticky rail (skyscraper) ---- */
/* .page-layout, <main>'i sol/sağ rail'lerle aynı grid satırına alır.
   Rail'lerin "position: sticky" ile içerik bittiğinde durması için,
   grid hücresi <main> ile aynı yüksekliğe otomatik olarak esner. */
.page-layout {
  display: block; /* rail'ler görünmüyorken (mobil/gizli mod) normal akış */
}

@media (min-width: 1200px) {
  .page-layout {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 160px;
    gap: 24px;
    align-items: start;
  }
}

.ad-rail {
  position: sticky;
  top: calc(var(--ad-top-h, 0px) + 96px); /* navbar + üst reklam şeridi + boşluk */
  width: 160px;
  min-height: 600px; /* CLS önleme: reklam yüklenmeden önce de alan ayrılmış olur (görünür haldeyken) */
}
.ad-rail-left { justify-self: start; grid-column: 1; }
.ad-rail-right { justify-self: end; grid-column: 3; }

/* KRİTİK: Rail'ler gizliyken (.ad-container display:none) grid'den
   otomatik çıkarılıyor. Eğer <main>'e sabit bir sütun atanmazsa, tarayıcı
   onu sırayla 1. (dar, 160px) sütuna yerleştirir ve TÜM site içeriği o dar
   sütuna sıkışır. Bunu önlemek için <main>'i her zaman 2. (orta, geniş)
   sütuna sabitliyoruz — rail'ler görünür ya da gizli fark etmez. */
.page-layout > main { grid-column: 2; }

/* 1200px altında rail'ler her zaman gizli — o genişliklerde mobil
   şerit reklamlar devreye giriyor (aşağıya bakın). !important, ana
   .ad-container gizleme kuralından bağımsız çalışsın diye. */
@media (max-width: 1199px) {
  .ad-rail { display: none !important; }
}

/* ---- Mobil: üst ve alt yatay sticky şerit reklamlar ---- */
.ad-bar-mobile {
  /* "sticky" yerine "fixed" kullanıyoruz — Safari'de sticky'nin bilinen
     tuhaflıklarından (aktifleşme eşiği hesaplama farklılıkları) kaçınmak
     için daha basit/öngörülebilir bir mekanizma. "fixed", reklamın
     kaydırma sırasında HER ZAMAN görünür kalmasını (takip etmesini)
     sağlar — bu ödün verilmiyor, para kazanmak için gerekli. */
  position: fixed;
  z-index: 60; /* navbar'ın (50) üstünde: üst şerit navbar'ın üstüne yapışır, navbar onun altına oturur */
  left: 0; right: 0;
  width: 100%;
  min-height: 50px; /* CLS önleme: reklam yüklenmeden önce de alan ayrılmış olur (görünür haldeyken) */
  max-height: 100px; /* GÜVENLİK: normalde <ins> zaten 50px sabit, bu sadece beklenmedik bir durumda üst sınır görevi görür. */
  overflow: hidden;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-bar-mobile-top { top: 0; border-bottom: 1px solid var(--border); }
.ad-bar-mobile-bottom {
  bottom: 0;
  border-top: 1px solid var(--border);
  /* iPhone'larda ev tuşu şeridinin altında "asılı" görünmesin diye,
     o alanı da kendi iç boşluğuna dahil ediyoruz. Bu tuş şeridi
     olmayan telefonlarda (Android vb.) 0 değer döner, hiçbir fark
     yaratmaz. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* GÜVENLİK (basit, iOS Safari uyumlu yedek): <ins>'in kendisini asla
   "fixed" konuma geçemeyecek şekilde kilitliyoruz — ama bunu ata
   elemanda "transform/contain" gibi iOS Safari'de bilinen render
   sorunlarına yol açabilecek numaralarla değil, doğrudan elementin
   kendi "position" değerini zorlayarak yapıyoruz. Daha basit, daha
   güvenilir. Asıl asıl koruma zaten JS tarafında artık <ins>'e baştan
   sabit/küçük bir boyut veriyor olmamız (bkz. ads.js).*/
.ad-bar-mobile ins.adsbygoogle {
  position: relative !important;
}

/* Reklam şeridini kapatma butonu — kullanıcı isterse şeridi tamamen
   kapatabilir, bu hem daha iyi bir kullanıcı deneyimi sağlar hem de
   Google'ın "anchor ad" (sabit şerit reklam) kurallarıyla uyumludur. */
.ad-bar-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary, #999);
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 61; /* şerit içeriğinin üstünde */
  padding: 0;
}
.ad-bar-close:hover { background: rgba(255, 255, 255, 0.2); }

/* Rail'ler dikey/dar olduğu için kapat butonunu üst-orta noktaya alıyoruz
   (yatay şeritlerdeki gibi sağ-orta değil, rail'de sağ taraf zaten çok dar). */
.ad-rail-close {
  top: 8px;
  right: 8px;
  transform: none;
}

/* 1200px ve üzerinde mobil şeritler gizli — o genişliklerde masaüstü
   rail'ler devreye giriyor. */
@media (min-width: 1200px) {
  .ad-bar-mobile { display: none !important; }
}

.ad-slot-inner {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================
   MOBİL: KENAR BOŞLUKLARINI DARALTMA
   ==========================================================
   Mobilde içerik alanı çok fazla sol/sağ boşluk bırakıyordu (ör. .controls
   kartı 30px iç boşluğuyla, geniş ekranlar için uygun ama dar telefon
   ekranında yeri boşa harcıyordu). Aşağıdaki kurallar sadece dar ekranlarda
   bu boşlukları daraltarak içeriğin ekranı daha iyi doldurmasını sağlar.
   Masaüstü görünümü bu kurallardan etkilenmez. */
@media (max-width: 600px) {
  .hero { padding: 56px 16px 20px; }
  .tool-section { padding: 20px 16px 32px; }
  .controls { padding: 20px; }
  .section { padding: 56px 16px; }
}

/* ==========================================================
   ERİŞİLEBİLİRLİK: İÇERİĞE GEÇ (SKIP LINK)
   ==========================================================
   Klavye veya ekran okuyucu kullanan ziyaretçilerin, her sayfada
   tekrar eden menüyü atlayıp doğrudan asıl içeriğe geçebilmesi için.
   Fare kullanan ziyaretçiler bunu hiç görmez (odaklanana kadar ekran
   dışında gizli durur); Tab tuşuna basılınca görünür hale gelir. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  background: var(--accent);
  color: #0a0a0f;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  z-index: 1000;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 8px;
}