/* ═══════════════════════════════════════════════════════
   BodrumTransferFiyatlari.net — Ana Stil Dosyası
   Aydınlık tema, mobil öncelikli, Inter font
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ─── Tasarım Değişkenleri ─────────────────────────────── */
:root {
  --renk-birincil: #2563eb;
  --renk-birincil-koyu: #1d4ed8;
  --renk-birincil-acik: #dbeafe;
  --renk-ikincil: #0ea5e9;
  --renk-whatsapp: #25d366;
  --renk-whatsapp-koyu: #128c7e;
  --renk-baslik: #0f172a;
  --renk-metin: #334155;
  --renk-metin-hafif: #64748b;
  --renk-sinir: #e2e8f0;
  --renk-arkaplan: #f8fafc;
  --renk-kart: #ffffff;
  --renk-basari: #16a34a;
  --renk-hata: #dc2626;
  --renk-uyari: #d97706;

  --golge-kucuk: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --golge-orta:  0 4px 16px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05);
  --golge-buyuk: 0 10px 40px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.06);

  --kose-yuvarlatma: .75rem;
  --kose-buyuk: 1.25rem;
  --gecis: .2s ease;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --baslik-yukseklik: 64px;
  --mobil-menu-yukseklik: 64px;
}

/* ─── Sıfırlama ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--renk-metin);
  background: var(--renk-arkaplan);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--renk-birincil); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ─── Kapsayıcı ────────────────────────────────────────── */
.kapsayici {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px)  { .kapsayici { padding: 0 1.5rem; } }
@media (min-width: 1200px) { .kapsayici { padding: 0 2rem;   } }

/* ─── Tipografi ────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { color: var(--renk-baslik); line-height: 1.3; font-weight: 700; }
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); }
p  { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ─── Header ───────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--baslik-yukseklik);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--renk-sinir);
  box-shadow: var(--golge-kucuk);
}
.header-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--renk-baslik);
  text-decoration: none;
}
.site-logo:hover { text-decoration: none; }
.logo-ikon {
  width: 38px; height: 38px;
  background: var(--renk-birincil);
  border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.logo-metin span { color: var(--renk-birincil); }

.masaustu-menu {
  display: none;
  align-items: center;
  gap: .25rem;
}
@media (min-width: 768px) { .masaustu-menu { display: flex; } }

.masaustu-menu a {
  padding: .45rem .85rem;
  border-radius: .5rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--renk-metin);
  transition: background var(--gecis), color var(--gecis);
  text-decoration: none;
}
.masaustu-menu a:hover,
.masaustu-menu a.aktif {
  background: var(--renk-birincil-acik);
  color: var(--renk-birincil);
}

.header-butonlar {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ─── Butonlar ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border-radius: .55rem;
  font-weight: 600;
  font-size: .875rem;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--gecis);
  text-decoration: none;
  border: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-birincil {
  background: var(--renk-birincil);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.btn-birincil:hover { background: var(--renk-birincil-koyu); box-shadow: 0 4px 16px rgba(37,99,235,.35); }

.btn-whatsapp {
  background: var(--renk-whatsapp);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,211,102,.3);
}
.btn-whatsapp:hover { background: var(--renk-whatsapp-koyu); box-shadow: 0 4px 16px rgba(37,211,102,.35); }

.btn-telefon {
  background: var(--renk-baslik);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15,23,42,.2);
}
.btn-telefon:hover { background: #1e293b; }

.btn-kucuk { padding: .4rem .75rem; font-size: .8rem; }
.btn-buyuk { padding: .8rem 1.75rem; font-size: 1rem; }
.btn-tam { width: 100%; justify-content: center; }

/* ─── Mobil Alt Menü ───────────────────────────────────── */
.mobil-alt-menu {
  display: flex;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: #fff;
  border-top: 1px solid var(--renk-sinir);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  height: var(--mobil-menu-yukseklik);
}
@media (min-width: 768px) { .mobil-alt-menu { display: none; } }

.mobil-menu-oge {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: .4rem .25rem;
  color: var(--renk-metin-hafif);
  font-size: .68rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--gecis);
  position: relative;
}
.mobil-menu-oge:hover, .mobil-menu-oge.aktif {
  color: var(--renk-birincil);
  text-decoration: none;
}
.mobil-menu-oge.aktif::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: var(--renk-birincil);
  border-radius: 0 0 2px 2px;
}
.mobil-menu-oge svg { width: 22px; height: 22px; stroke-width: 1.75; }

/* ─── İletişim Widget (Masaüstü) ──────────────────────── */
.iletisim-widget {
  display: none;
  position: fixed;
  bottom: 2rem;
  right: 1.5rem;
  z-index: 150;
  flex-direction: column;
  gap: .6rem;
}
@media (min-width: 768px) { .iletisim-widget { display: flex; } }

.widget-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.1rem;
  border-radius: 3rem;
  font-weight: 600;
  font-size: .875rem;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--golge-buyuk);
  transition: all .25s;
  white-space: nowrap;
}
.widget-btn:hover { transform: translateX(-4px) scale(1.02); text-decoration: none; }
.widget-btn svg   { width: 20px; height: 20px; flex-shrink: 0; }
.widget-whatsapp  { background: var(--renk-whatsapp); }
.widget-whatsapp:hover { background: var(--renk-whatsapp-koyu); }
.widget-telefon   { background: var(--renk-baslik); }
.widget-telefon:hover  { background: #1e293b; }

/* ─── Mobil İletişim Bandı ─────────────────────────────── */
.mobil-iletisim-bandi {
  display: flex;
  position: fixed;
  bottom: var(--mobil-menu-yukseklik);
  left: 0; right: 0;
  z-index: 190;
  background: #fff;
  border-top: 1px solid var(--renk-sinir);
  padding: .5rem 1rem;
  gap: .5rem;
  box-shadow: 0 -2px 10px rgba(0,0,0,.06);
}
@media (min-width: 768px) { .mobil-iletisim-bandi { display: none; } }
.mobil-iletisim-bandi .btn { flex: 1; justify-content: center; font-size: .8rem; padding: .55rem .5rem; }

/* ─── Ana İçerik Alanı ─────────────────────────────────── */
.ana-icerik {
  padding-bottom: calc(var(--mobil-menu-yukseklik) + 56px + 1rem);
}
@media (min-width: 768px) { .ana-icerik { padding-bottom: 0; } }

/* ─── Kart ─────────────────────────────────────────────── */
.kart {
  background: var(--renk-kart);
  border-radius: var(--kose-yuvarlatma);
  box-shadow: var(--golge-kucuk);
  border: 1px solid var(--renk-sinir);
  overflow: hidden;
  transition: box-shadow var(--gecis), transform var(--gecis);
}
.kart:hover { box-shadow: var(--golge-orta); }
.kart-govde { padding: 1.25rem; }

/* ─── Blog Listesi Kartı ───────────────────────────────── */
.blog-liste { display: flex; flex-direction: column; gap: 1rem; }

.blog-kart {
  display: flex;
  flex-direction: column;
  background: var(--renk-kart);
  border-radius: var(--kose-yuvarlatma);
  border: 1px solid var(--renk-sinir);
  padding: 1.25rem;
  transition: box-shadow var(--gecis), transform var(--gecis);
  text-decoration: none;
  color: inherit;
}
.blog-kart:hover {
  box-shadow: var(--golge-orta);
  transform: translateY(-2px);
  text-decoration: none;
}

.blog-kart-ust  { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; }
.blog-kart-baslik { font-size: 1.05rem; font-weight: 700; color: var(--renk-baslik); margin-bottom: .5rem; }
.blog-kart-ozet   { font-size: .875rem; color: var(--renk-metin-hafif); margin-bottom: .75rem; }
.blog-kart-alt    { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .78rem; color: var(--renk-metin-hafif); }
.blog-kart-alt span { display: flex; align-items: center; gap: .25rem; }

.etiket {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  background: var(--renk-birincil-acik);
  color: var(--renk-birincil);
  border-radius: 2rem;
  font-size: .72rem;
  font-weight: 600;
  text-decoration: none;
}
.etiket:hover { background: var(--renk-birincil); color: #fff; }

/* ─── Breadcrumb ───────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--renk-metin-hafif);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--renk-metin-hafif); text-decoration: none; }
.breadcrumb a:hover { color: var(--renk-birincil); }
.breadcrumb-ayrac { opacity: .4; }

/* ─── Bölüm Başlıkları ─────────────────────────────────── */
.bolum { padding: 3rem 0; }
.bolum-baslik { text-align: center; margin-bottom: 2rem; }
.bolum-baslik h2 { margin-bottom: .5rem; }
.bolum-baslik p  { color: var(--renk-metin-hafif); max-width: 560px; margin: 0 auto; }

/* ─── Hero ─────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #e0f2fe 100%);
  padding: 4rem 0 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(37,99,235,.08) 0%, transparent 70%);
}
.hero .kapsayici { position: relative; }
.hero h1 { margin-bottom: 1rem; }
.hero p   { font-size: 1.1rem; color: var(--renk-metin-hafif); max-width: 600px; margin: 0 auto 2rem; }
.hero-butonlar { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ─── Grid ─────────────────────────────────────────────── */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Footer ───────────────────────────────────────────── */
.site-footer {
  background: var(--renk-baslik);
  color: #cbd5e1;
  padding: 3rem 0 2rem;
  margin-bottom: 0;
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 2rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

.footer-baslik { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .75rem; }
.footer-menu   { display: flex; flex-direction: column; gap: .4rem; }
.footer-menu a { color: #94a3b8; font-size: .875rem; text-decoration: none; transition: color var(--gecis); }
.footer-menu a:hover { color: #fff; }
.footer-alt {
  border-top: 1px solid #1e293b;
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .8rem;
  color: #64748b;
}

/* ─── Sayfalama ────────────────────────────────────────── */
.sayfalama { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.sayfa-btn {
  padding: .5rem .875rem;
  border-radius: .5rem;
  font-weight: 600;
  font-size: .875rem;
  color: var(--renk-metin);
  background: var(--renk-kart);
  border: 1px solid var(--renk-sinir);
  transition: all var(--gecis);
  text-decoration: none;
}
.sayfa-btn:hover, .sayfa-btn.aktif {
  background: var(--renk-birincil);
  color: #fff;
  border-color: var(--renk-birincil);
}


/* ─── İçerik Alanı (Blog Detay) ───────────────────────── */
.makale-icerik h2 { margin: 2rem 0 .75rem; }
.makale-icerik h3 { margin: 1.5rem 0 .6rem; font-size: 1.1rem; }
.makale-icerik p  { margin-bottom: 1rem; line-height: 1.75; }
.makale-icerik ul, .makale-icerik ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.makale-icerik li { margin-bottom: .35rem; }
.makale-icerik a  { color: var(--renk-birincil); text-decoration: underline; }
.ic-link { color: var(--renk-birincil); text-decoration: underline dotted; }
.ic-link:hover { text-decoration: underline; }

/* ─── İçindekiler ──────────────────────────────────────── */
.icindekiler {
  background: var(--renk-arkaplan);
  border: 1px solid var(--renk-sinir);
  border-radius: var(--kose-yuvarlatma);
  padding: 1.25rem;
  margin-bottom: 2rem;
}
.icindekiler h4 { font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--renk-metin-hafif); margin-bottom: .75rem; }
.icindekiler ol { padding-left: 1.25rem; counter-reset: item; list-style: none; }
.icindekiler li { margin-bottom: .4rem; counter-increment: item; }
.icindekiler li::before { content: counter(item) ". "; color: var(--renk-birincil); font-weight: 600; font-size: .85rem; }
.icindekiler a  { font-size: .88rem; color: var(--renk-metin); text-decoration: none; }
.icindekiler a:hover { color: var(--renk-birincil); }

/* ─── SSS ──────────────────────────────────────────────── */
.sss { margin-top: 2.5rem; }
.sss-baslik { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.sss-oge {
  border: 1px solid var(--renk-sinir);
  border-radius: var(--kose-yuvarlatma);
  margin-bottom: .6rem;
  overflow: hidden;
}
.sss-soru {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: none;
  font-size: .925rem;
  font-weight: 600;
  color: var(--renk-baslik);
  cursor: pointer;
  text-align: left;
  gap: .5rem;
}
.sss-soru svg { flex-shrink: 0; transition: transform .2s; }
.sss-oge.acik .sss-soru svg { transform: rotate(180deg); }
.sss-cevap {
  display: none;
  padding: 0 1.25rem 1rem;
  font-size: .9rem;
  color: var(--renk-metin);
  line-height: 1.7;
}
.sss-oge.acik .sss-cevap { display: block; }

/* ─── Yardımcı Sınıflar ────────────────────────────────── */
.metin-merkez  { text-align: center; }
.metin-hafif   { color: var(--renk-metin-hafif); }
.kucuk-metin   { font-size: .82rem; }
.bosluk-ust    { margin-top: 1.5rem; }
.bosluk-alt    { margin-bottom: 1.5rem; }
.gizli         { display: none !important; }
.gorsel-gizli  { display: none; }
@media (min-width: 768px) { .gorsel-gizli { display: block; } }

/* ─── Blog Detay — Responsive 2 Kolon Grid ─────────────── */
.blog-detay-grid {
  display: grid;
  grid-template-columns: 1fr min(300px, 30%);
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .blog-detay-grid {
    grid-template-columns: 1fr;
  }
  .blog-detay-grid aside {
    display: none; /* yan panel mobilde gizle */
  }
}

/* ─── Tablo Scroll ─────────────────────────────────────── */
.tablo-sarici {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── Header Mobil ─────────────────────────────────────── */
@media (max-width: 480px) {
  .logo-metin span { display: none; }
  .site-logo { font-size: 1rem; }
  .btn-kucuk { padding: .35rem .6rem; font-size: .78rem; }
}

/* ─── Hero Mobil ───────────────────────────────────────── */
@media (max-width: 640px) {
  .hero { padding: 2.5rem 0 2rem; }
  .hero h1 { font-size: 1.5rem; }
  .hero p  { font-size: 1rem; }
  .hero-butonlar { flex-direction: column; align-items: center; }
  .hero-butonlar .btn { width: 100%; max-width: 300px; justify-content: center; }
}

/* ─── Footer Mobil ─────────────────────────────────────── */
@media (max-width: 640px) {
  .site-footer { padding: 2rem 0 1.5rem; }
  .footer-alt { flex-direction: column; text-align: center; gap: .5rem; }
}

/* ─── Genel Kart Grid Mobil ────────────────────────────── */
@media (max-width: 480px) {
  .kart-govde { padding: 1rem; }
  .bolum { padding: 2rem 0; }
  .bolum-baslik { margin-bottom: 1.25rem; }
}