/* ===================================================
   Kocaeli Beyaz Eşya Servisi — Ana Stil Dosyası
   =================================================== */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       color: #1e293b; line-height: 1.6; background: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
address { font-style: normal; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ── DEĞİŞKENLER ── */
:root {
  --mavi: #1d4ed8;
  --mavi-k: #1e40af;
  --mavi-ac: #dbeafe;
  --turuncu: #f97316;
  --turuncu-k: #ea6a0a;
  --koyu: #1e293b;
  --gri: #475569;
  --acik-gri: #94a3b8;
  --bg: #f8fafc;
  --sinir: #e2e8f0;
  --beyaz: #ffffff;
  --golge: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --golge-b: 0 10px 25px -3px rgba(0,0,0,.12), 0 4px 6px -2px rgba(0,0,0,.07);
  --r: 8px;
  --r-b: 14px;
}

/* ── KAPSAYICI ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

/* ════════════════════════════════════
   HEADER
════════════════════════════════════ */
header { background: var(--beyaz); box-shadow: 0 1px 3px rgba(0,0,0,.08); position: sticky; top: 0; z-index: 200; }

.header-top {
  background: var(--mavi-k);
  color: var(--beyaz);
  padding: .45rem 0;
  font-size: .8rem;
}
.header-top .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.header-top a { color: var(--beyaz); transition: opacity .2s; }
.header-top a:hover { opacity: .8; }
.header-top-adres { display: flex; align-items: center; gap: .4rem; }
.header-top-phones { display: flex; align-items: center; gap: 1rem; }
.header-top-phones a { display: flex; align-items: center; gap: .35rem; font-weight: 600; }

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 0;
  gap: 1rem;
}

/* Logo */
.logo { display: flex; flex-direction: column; line-height: 1.1; }
.logo-main { font-size: 1.2rem; font-weight: 800; color: var(--mavi); letter-spacing: -.02em; }
.logo-sub { font-size: .7rem; font-weight: 600; color: var(--gri); text-transform: uppercase; letter-spacing: .06em; }

/* Nav */
nav ul { display: flex; gap: .15rem; align-items: center; flex-wrap: wrap; }
nav ul li a {
  display: block;
  padding: .45rem .7rem;
  border-radius: var(--r);
  font-size: .875rem;
  font-weight: 500;
  color: var(--koyu);
  transition: all .18s;
  white-space: nowrap;
}
nav ul li a:hover { background: var(--bg); color: var(--mavi); }
nav ul li a.aktif { background: var(--mavi-ac); color: var(--mavi); font-weight: 600; }
.btn-nav-cta {
  background: var(--turuncu) !important;
  color: var(--beyaz) !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
  padding: .45rem 1.1rem !important;
}
.btn-nav-cta:hover { background: var(--turuncu-k) !important; }

/* ── Dropdown Menü ─────────────────────────────────────── */
.dd-parent { position: relative; }
.dd-ok { font-size: .6rem; opacity: .7; transition: transform .2s; display: inline-block; margin-left: .15rem; }
.dd-parent:hover .dd-ok { transform: rotate(180deg); }
.dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--beyaz);
  border: 1px solid var(--sinir);
  border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  min-width: 210px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s, visibility .18s, transform .18s;
  z-index: 200;
  padding: .4rem 0;
  list-style: none;
}
.dd-parent:hover .dd-menu,
.dd-parent:focus-within .dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dd-menu li { display: block; }
.dd-menu li a {
  display: block;
  padding: .55rem 1.15rem;
  font-size: .845rem;
  font-weight: 500;
  color: var(--koyu);
  white-space: nowrap;
  border-radius: 0;
  transition: background .15s, color .15s;
}
.dd-menu li a:hover { background: var(--mavi-ac); color: var(--mavi); }
.dd-menu li a.dd-yetkili { color: #c2410c; font-weight: 600; }
.dd-menu li a.dd-yetkili::after { content: ' ★'; font-size: .7rem; }
.dd-ayrac { height: 1px; background: var(--sinir); margin: .35rem .75rem; }
.dd-mega {
  left: 0;
  right: auto;
  transform: translateY(6px);
  min-width: 520px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0;
}
.dd-parent:hover .dd-mega,
.dd-parent:focus-within .dd-mega { transform: translateY(0); }
.dd-mega-kolon { padding: .75rem 0; }
.dd-mega-kolon:not(:last-child) { border-right: 1px solid var(--sinir); }
.dd-mega-baslik {
  font-size: .7rem;
  font-weight: 700;
  color: var(--acik-gri);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .3rem 1.1rem .6rem;
  display: block;
}
/* 4 kolonlu mega menü (Bölge+Hizmet / Bölge+Marka) */
.dd-4kol {
  min-width: 680px;
  max-width: min(720px, calc(100vw - 1rem));
  grid-template-columns: repeat(4, 1fr);
}
/* Mobil grup başlığı */
.mobil-grup-baslik {
  font-size: .7rem;
  font-weight: 700;
  color: var(--gri);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .6rem 1rem .2rem;
  list-style: none;
}
@media (max-width: 1200px) {
  .dd-4kol { min-width: 500px; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .dd-mega { min-width: 300px; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .dd-menu, .dd-mega { display: none !important; }
}

/* ── İç Link Ağı Kutusu ─────────────────────────────────── */
.ic-link-ag {
  background: var(--bg);
  border: 1px solid var(--sinir);
  border-radius: var(--r-b);
  padding: 1.5rem;
  margin: 2rem 0;
}
.ic-link-ag h3 { font-size: .875rem; font-weight: 700; color: var(--koyu); margin-bottom: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.ic-link-ag-lar { display: flex; flex-wrap: wrap; gap: .4rem; }
.ic-link-pill {
  display: inline-block;
  background: var(--beyaz);
  border: 1px solid var(--sinir);
  border-radius: 100px;
  padding: .3rem .85rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--mavi);
  transition: all .18s;
}
.ic-link-pill:hover { background: var(--mavi); color: var(--beyaz); border-color: var(--mavi); }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: .5rem; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--koyu); border-radius: 2px; transition: all .3s; }
.hamburger.acik span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.acik span:nth-child(2) { opacity: 0; }
.hamburger.acik span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu { display: none; border-top: 1px solid var(--sinir); background: var(--beyaz); }
.mobile-menu.acik { display: block; }
.mobile-menu ul { padding: .75rem 1.25rem; display: flex; flex-direction: column; gap: .2rem; }
.mobile-menu ul li a {
  display: block;
  padding: .65rem .75rem;
  border-radius: var(--r);
  font-size: .9rem;
  font-weight: 500;
  color: var(--koyu);
  transition: background .18s;
}
.mobile-menu ul li a:hover { background: var(--bg); color: var(--mavi); }
.mobile-menu .cta-link { background: var(--turuncu); color: var(--beyaz) !important; text-align: center; font-weight: 700 !important; border-radius: 100px !important; margin-top: .5rem; }

/* ════════════════════════════════════
   BÖLÜMLER
════════════════════════════════════ */
.bolum { padding: 4.5rem 0; }
.bolum-alt { background: var(--bg); }
.bolum-sinir { border-top: 1px solid var(--sinir); }

.bolum-baslik { text-align: center; margin-bottom: 3rem; }
.etiket {
  display: inline-block;
  background: var(--mavi-ac);
  color: var(--mavi);
  font-size: .75rem;
  font-weight: 700;
  padding: .28rem .85rem;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .75rem;
}
.etiket-turuncu { background: #fed7aa; color: #c2410c; }
.etiket-yesil { background: #d1fae5; color: #065f46; }
.bolum-baslik h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: var(--koyu); margin-bottom: .65rem; line-height: 1.25; }
.bolum-baslik p { color: var(--gri); max-width: 580px; margin: 0 auto; font-size: .975rem; }

/* ════════════════════════════════════
   BUTONLAR
════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: all .2s;
  border: 2px solid transparent;
  line-height: 1;
}
.btn-turuncu { background: var(--turuncu); color: var(--beyaz); border-color: var(--turuncu); }
.btn-turuncu:hover { background: var(--turuncu-k); border-color: var(--turuncu-k); transform: translateY(-1px); box-shadow: var(--golge-b); }
.btn-mavi { background: var(--mavi); color: var(--beyaz); border-color: var(--mavi); }
.btn-mavi:hover { background: var(--mavi-k); border-color: var(--mavi-k); transform: translateY(-1px); box-shadow: var(--golge-b); }
.btn-beyaz { background: var(--beyaz); color: var(--mavi); border-color: var(--beyaz); }
.btn-beyaz:hover { background: var(--mavi-ac); }
.btn-cizgi { background: transparent; color: var(--beyaz); border-color: rgba(255,255,255,.5); }
.btn-cizgi:hover { background: rgba(255,255,255,.12); border-color: var(--beyaz); }
.btn-cizgi-mavi { background: transparent; color: var(--mavi); border-color: var(--mavi); }
.btn-cizgi-mavi:hover { background: var(--mavi-ac); }
.btn-sm { padding: .5rem 1.1rem; font-size: .82rem; }

/* ════════════════════════════════════
   HERO
════════════════════════════════════ */
.hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%);
  color: var(--beyaz);
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -8%;
  width: 700px;
  height: 700px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -5%;
  width: 450px;
  height: 450px;
  background: rgba(255,255,255,.03);
  border-radius: 50%;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-ic { max-width: 720px; }
.hero-rozet {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px;
  padding: .35rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.hero h1 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1.1rem;
  letter-spacing: -.02em;
}
.hero h1 span { color: #fbbf24; }
.hero > .container > .hero-ic > p { font-size: 1.05rem; opacity: .88; margin-bottom: 2rem; max-width: 600px; line-height: 1.7; }
.hero-aksiyonlar { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-istatistikler { display: flex; gap: 2.5rem; flex-wrap: wrap; padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.15); }
.stat-item { text-align: center; }
.stat-sayi { font-size: 2rem; font-weight: 900; color: #fbbf24; display: block; line-height: 1; }
.stat-etiket { font-size: .78rem; opacity: .75; margin-top: .3rem; }

/* ════════════════════════════════════
   KARTLAR
════════════════════════════════════ */
.kart-izgara-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.kart-izgara-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.kart-izgara-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1.5rem; }

.kart {
  background: var(--beyaz);
  border: 1px solid var(--sinir);
  border-radius: var(--r-b);
  padding: 1.75rem;
  transition: all .22s;
}
.kart:hover { box-shadow: var(--golge-b); transform: translateY(-3px); border-color: #bfdbfe; }
.kart-ikon {
  width: 52px; height: 52px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.1rem;
  flex-shrink: 0;
}
.ikon-mavi { background: var(--mavi-ac); }
.ikon-turuncu { background: #fed7aa; }
.ikon-yesil { background: #d1fae5; }
.ikon-mor { background: #ede9fe; }
.kart h3 { font-size: 1.05rem; font-weight: 700; color: var(--koyu); margin-bottom: .5rem; }
.kart p { color: var(--gri); font-size: .875rem; line-height: 1.65; }

/* ════════════════════════════════════
   MARKA PİLLERİ
════════════════════════════════════ */
.marka-kumeleri { display: flex; flex-wrap: wrap; gap: .6rem; }
.marka-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--beyaz);
  border: 2px solid var(--sinir);
  border-radius: 100px;
  padding: .45rem 1.1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--koyu);
  transition: all .2s;
}
.marka-pill:hover { border-color: var(--mavi); color: var(--mavi); background: var(--mavi-ac); transform: translateY(-1px); }
.marka-pill.yetkili { border-color: var(--turuncu); color: #9a3412; background: #fff7ed; }
.marka-pill.yetkili:hover { background: #fed7aa; }
.yetkili-rozet { font-size: .65rem; background: var(--turuncu); color: var(--beyaz); border-radius: 100px; padding: .1rem .4rem; }

/* ════════════════════════════════════
   BÖLGE KARTLARI
════════════════════════════════════ */
.bolge-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.bolge-kart {
  background: var(--beyaz);
  border: 2px solid var(--sinir);
  border-radius: var(--r-b);
  padding: 1.5rem;
  text-align: center;
  transition: all .22s;
  display: block;
}
.bolge-kart:hover { box-shadow: var(--golge-b); border-color: var(--mavi); transform: translateY(-3px); }
.bolge-kart .emoji { font-size: 2.25rem; margin-bottom: .75rem; display: block; }
.bolge-kart h3 { font-size: 1rem; font-weight: 700; color: var(--koyu); margin-bottom: .35rem; }
.bolge-kart p { font-size: .8rem; color: var(--gri); }
.bolge-kart .ok { display: inline-flex; align-items: center; gap: .3rem; color: var(--mavi); font-size: .8rem; font-weight: 600; margin-top: .6rem; }

/* ════════════════════════════════════
   ADIMLAR
════════════════════════════════════ */
.adim-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.adim { text-align: center; padding: 1.5rem 1rem; }
.adim-no {
  width: 50px; height: 50px;
  background: var(--mavi);
  color: var(--beyaz);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
  margin: 0 auto 1.1rem;
  box-shadow: 0 4px 12px rgba(29,78,216,.35);
}
.adim h3 { font-size: .975rem; font-weight: 700; color: var(--koyu); margin-bottom: .4rem; }
.adim p { font-size: .85rem; color: var(--gri); }

/* ════════════════════════════════════
   CTA BANNER
════════════════════════════════════ */
.cta-bolum {
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
  color: var(--beyaz);
  padding: 4.5rem 0;
  text-align: center;
}
.cta-bolum h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: .85rem; }
.cta-bolum p { opacity: .88; margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; }
.cta-aksiyonlar { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════ */
.yorum-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.25rem; }
.yorum-kart {
  background: var(--beyaz);
  border: 1px solid var(--sinir);
  border-radius: var(--r-b);
  padding: 1.5rem;
}
.yorum-yildiz { color: #f59e0b; font-size: .95rem; margin-bottom: .75rem; letter-spacing: .05em; }
.yorum-metin { color: var(--gri); font-size: .875rem; line-height: 1.7; margin-bottom: 1rem; font-style: italic; }
.yorum-kisi { display: flex; align-items: center; gap: .75rem; }
.yorum-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mavi), #60a5fa);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--beyaz);
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}
.yorum-ad { font-weight: 700; font-size: .875rem; color: var(--koyu); }
.yorum-yer { font-size: .78rem; color: var(--acik-gri); }

/* ════════════════════════════════════
   FAQ
════════════════════════════════════ */
.faq-liste { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: .65rem; }
.faq-item { border: 1px solid var(--sinir); border-radius: var(--r); overflow: hidden; }
.faq-soru {
  padding: 1.1rem 1.4rem;
  font-weight: 600;
  font-size: .925rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: var(--beyaz);
  transition: background .18s;
  user-select: none;
}
.faq-soru:hover { background: var(--bg); }
.faq-soru.acik { background: var(--mavi-ac); color: var(--mavi); }
.faq-ikon { font-size: 1.4rem; font-weight: 300; line-height: 1; min-width: 18px; text-align: center; transition: transform .3s; }
.faq-soru.acik .faq-ikon { transform: rotate(45deg); }
.faq-cevap { display: none; padding: 0 1.4rem 1.1rem; color: var(--gri); font-size: .875rem; line-height: 1.75; }
.faq-cevap.acik { display: block; }

/* ════════════════════════════════════
   BREADCRUMB
════════════════════════════════════ */
.breadcrumb-bar { padding: .85rem 0; border-bottom: 1px solid var(--sinir); background: var(--bg); }
.breadcrumb-bar ol { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .82rem; }
.breadcrumb-bar ol li { color: var(--acik-gri); }
.breadcrumb-bar ol li a { color: var(--mavi); transition: color .18s; }
.breadcrumb-bar ol li a:hover { color: var(--mavi-k); }
.breadcrumb-bar ol li:not(:last-child)::after { content: '›'; margin-left: .4rem; color: var(--sinir); }

/* ════════════════════════════════════
   SAYFA BAŞLIĞI
════════════════════════════════════ */
.sayfa-baslik {
  background: linear-gradient(135deg, var(--koyu) 0%, #334155 100%);
  color: var(--beyaz);
  padding: 3rem 0;
}
.sayfa-baslik .rozet-kucuk {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px;
  padding: .25rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  margin-bottom: .85rem;
}
.sayfa-baslik h1 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin-bottom: .65rem; line-height: 1.25; }
.sayfa-baslik p { opacity: .83; max-width: 600px; font-size: .95rem; }

/* ════════════════════════════════════
   İÇERİK SAYFASI (makale düzeni)
════════════════════════════════════ */
.icerik-duzen { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start; }
.icerik-govde h2 { font-size: 1.35rem; font-weight: 700; color: var(--koyu); margin: 2rem 0 .65rem; }
.icerik-govde h3 { font-size: 1.05rem; font-weight: 700; color: var(--koyu); margin: 1.5rem 0 .5rem; }
.icerik-govde p { color: var(--gri); margin-bottom: .9rem; line-height: 1.8; font-size: .95rem; }
.icerik-govde ul { color: var(--gri); margin: .5rem 0 1rem 1.25rem; line-height: 1.8; font-size: .95rem; list-style: disc; }
.icerik-govde ul li { margin-bottom: .35rem; }
.icerik-govde strong { color: var(--koyu); }

/* Kenar çubuğu */
.kenar-cubugu { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1.1rem; }
.kenar-kart {
  background: var(--beyaz);
  border: 1px solid var(--sinir);
  border-radius: var(--r-b);
  padding: 1.35rem;
}
.kenar-kart h4 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--koyu);
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--mavi);
}
.kenar-linkler li { border-bottom: 1px solid var(--sinir); }
.kenar-linkler li:last-child { border-bottom: none; }
.kenar-linkler li a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 0;
  font-size: .85rem;
  color: var(--gri);
  transition: color .18s;
}
.kenar-linkler li a:hover { color: var(--mavi); }
.kenar-telefon { display: flex; flex-direction: column; gap: .6rem; }
.kenar-telefon a {
  display: flex;
  align-items: center;
  gap: .65rem;
  background: var(--mavi);
  color: var(--beyaz);
  border-radius: var(--r);
  padding: .7rem 1rem;
  font-weight: 700;
  font-size: .875rem;
  transition: all .2s;
}
.kenar-telefon a:hover { background: var(--mavi-k); transform: translateY(-1px); }
.kenar-telefon a.tur { background: #16a34a; }
.kenar-telefon a.tur:hover { background: #15803d; }

/* ════════════════════════════════════
   İLETİŞİM SAYFASI
════════════════════════════════════ */
.iletisim-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.iletisim-bilgi h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.iletisim-kalem { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.ik-ikon {
  width: 46px; height: 46px;
  background: var(--mavi-ac);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.ik-metin strong { display: block; font-size: .75rem; color: var(--acik-gri); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; }
.ik-metin span, .ik-metin a { font-weight: 600; color: var(--koyu); font-size: .95rem; }
.ik-metin a:hover { color: var(--mavi); }

/* Form */
.iletisim-form { background: var(--bg); border-radius: var(--r-b); padding: 2rem; }
.form-grup { margin-bottom: 1.1rem; }
.form-grup label { display: block; font-size: .82rem; font-weight: 600; color: var(--koyu); margin-bottom: .4rem; }
.form-grup input,
.form-grup select,
.form-grup textarea {
  width: 100%;
  padding: .65rem .95rem;
  border: 1.5px solid var(--sinir);
  border-radius: var(--r);
  font-size: .9rem;
  font-family: inherit;
  color: var(--koyu);
  background: var(--beyaz);
  transition: border-color .18s, box-shadow .18s;
}
.form-grup input:focus,
.form-grup select:focus,
.form-grup textarea:focus {
  outline: none;
  border-color: var(--mavi);
  box-shadow: 0 0 0 3px rgba(29,78,216,.1);
}
.form-grup textarea { height: 120px; resize: vertical; }
.form-grup select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.5rem; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.harita-wrapper { border-radius: var(--r-b); overflow: hidden; height: 350px; margin-top: 2rem; }
.harita-wrapper iframe { width: 100%; height: 100%; border: none; }

/* ════════════════════════════════════
   RANDEVU SAYFASI
════════════════════════════════════ */
.randevu-form { background: var(--beyaz); border: 1px solid var(--sinir); border-radius: var(--r-b); padding: 2.5rem; max-width: 700px; margin: 0 auto; }
.form-adim-baslik { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.75rem; }
.form-adim-no { width: 32px; height: 32px; background: var(--mavi); color: var(--beyaz); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; }
.form-adim-baslik h3 { font-size: 1rem; font-weight: 700; }
.form-ayrac { border: none; border-top: 1px solid var(--sinir); margin: 1.5rem 0; }

/* ════════════════════════════════════
   BLOG
════════════════════════════════════ */
.blog-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
.blog-kart {
  background: var(--beyaz);
  border: 1px solid var(--sinir);
  border-radius: var(--r-b);
  overflow: hidden;
  transition: all .22s;
  display: flex;
  flex-direction: column;
}
.blog-kart:hover { box-shadow: var(--golge-b); transform: translateY(-3px); border-color: #bfdbfe; }
.blog-resim { background: linear-gradient(135deg, var(--mavi-ac), #e0f2fe); height: 180px; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.blog-icerik { padding: 1.4rem; flex: 1; display: flex; flex-direction: column; }
.blog-meta { display: flex; align-items: center; gap: .75rem; font-size: .78rem; color: var(--acik-gri); margin-bottom: .65rem; }
.blog-kategori { background: var(--mavi-ac); color: var(--mavi); border-radius: 100px; padding: .15rem .6rem; font-weight: 600; }
.blog-kart h3 { font-size: 1rem; font-weight: 700; color: var(--koyu); margin-bottom: .5rem; line-height: 1.4; }
.blog-kart p { font-size: .85rem; color: var(--gri); line-height: 1.65; flex: 1; }
.blog-devam { display: inline-flex; align-items: center; gap: .35rem; color: var(--mavi); font-size: .82rem; font-weight: 600; margin-top: .85rem; transition: gap .18s; }
.blog-kart:hover .blog-devam { gap: .6rem; }

/* ════════════════════════════════════
   ÖZELLIK LİSTESİ
════════════════════════════════════ */
.ozellik-liste { display: flex; flex-direction: column; gap: .8rem; }
.ozellik-kalem { display: flex; align-items: flex-start; gap: .75rem; }
.ozellik-onay { color: #10b981; font-size: 1rem; margin-top: .1rem; flex-shrink: 0; }
.ozellik-metin strong { display: block; font-size: .925rem; color: var(--koyu); margin-bottom: .15rem; }
.ozellik-metin span { font-size: .85rem; color: var(--gri); }

/* ════════════════════════════════════
   UYARI BANNER
════════════════════════════════════ */
.uyari-banner {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  border-radius: var(--r);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .875rem;
  color: #92400e;
}
.bilgi-banner {
  background: var(--mavi-ac);
  border-left: 4px solid var(--mavi);
  border-radius: var(--r);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: .875rem;
  color: #1e40af;
}
.basari-banner {
  background: #d1fae5;
  border-left: 4px solid #10b981;
  border-radius: var(--r);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: .875rem;
  color: #065f46;
}

/* ════════════════════════════════════
   YETKİLİ SERVİS ROZET
════════════════════════════════════ */
.yetkili-banner {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 2px solid #fed7aa;
  border-radius: var(--r-b);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
}
.yetkili-banner .ikon { font-size: 2.5rem; }
.yetkili-banner h4 { font-size: 1rem; font-weight: 700; color: #9a3412; margin-bottom: .25rem; }
.yetkili-banner p { font-size: .85rem; color: #c2410c; }

/* ════════════════════════════════════
   FOOTER
════════════════════════════════════ */
footer {
  background: #0f172a;
  color: #94a3b8;
  padding: 3.5rem 0 0;
}
.footer-izgara {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.footer-logo-alan { margin-bottom: 1rem; }
.footer-logo-metin { font-size: 1.1rem; font-weight: 800; color: #fff; }
.footer-logo-altyazi { font-size: .72rem; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
.footer-marka p { font-size: .85rem; line-height: 1.7; margin-bottom: 1.1rem; }
.footer-rozetler { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer-rozet {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(249,115,22,.12);
  border: 1px solid rgba(249,115,22,.25);
  color: #fb923c;
  border-radius: 100px;
  padding: .22rem .65rem;
  font-size: .72rem;
  font-weight: 700;
}
.footer-col h4 {
  color: #e2e8f0;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .4rem; }
.footer-col ul li a { font-size: .84rem; transition: color .18s; color: #94a3b8; }
.footer-col ul li a:hover { color: #fff; }
.footer-iletisim-kalem { display: flex; align-items: flex-start; gap: .6rem; font-size: .84rem; margin-bottom: .6rem; }
.footer-iletisim-kalem a { color: #94a3b8; transition: color .18s; }
.footer-iletisim-kalem a:hover { color: #fff; }
.footer-saat { font-size: .82rem; margin-top: .85rem; padding-top: .85rem; border-top: 1px solid #1e293b; }
.footer-saat strong { color: #e2e8f0; display: block; margin-bottom: .3rem; }
.footer-alt {
  border-top: 1px solid #1e293b;
  padding: 1.25rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  font-size: .8rem;
}
.footer-alt-linkler { display: flex; gap: 1.25rem; }
.footer-alt-linkler a { color: #94a3b8; transition: color .18s; }
.footer-alt-linkler a:hover { color: #fff; }

/* ════════════════════════════════════
   SABİT TELEFON BUTONU
════════════════════════════════════ */
.sabit-telefon {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--mavi);
  color: var(--beyaz);
  border-radius: 100px;
  padding: .75rem 1.3rem;
  font-weight: 700;
  font-size: .875rem;
  box-shadow: var(--golge-b);
  z-index: 999;
  transition: all .22s;
}
.sabit-telefon:hover { background: var(--mavi-k); transform: translateY(-2px); box-shadow: 0 15px 35px rgba(29,78,216,.4); }
.sabit-telefon svg { flex-shrink: 0; }

/* ════════════════════════════════════
   KVKK & YASAL SAYFALAR
════════════════════════════════════ */
.yasal-icerik { max-width: 820px; margin: 0 auto; }
.yasal-icerik h2 { font-size: 1.3rem; font-weight: 700; color: var(--koyu); margin: 2rem 0 .65rem; }
.yasal-icerik h3 { font-size: 1.05rem; font-weight: 700; color: var(--koyu); margin: 1.5rem 0 .5rem; }
.yasal-icerik p { color: var(--gri); margin-bottom: .9rem; line-height: 1.8; font-size: .95rem; }
.yasal-icerik ul { color: var(--gri); margin: .5rem 0 1rem 1.5rem; line-height: 1.8; font-size: .95rem; list-style: disc; }
.yasal-icerik ul li { margin-bottom: .35rem; }
.yasal-guncelleme { background: var(--bg); border-radius: var(--r); padding: .75rem 1rem; font-size: .82rem; color: var(--acik-gri); margin-bottom: 1.5rem; }

/* ════════════════════════════════════
   RESPONSİVE
════════════════════════════════════ */
@media (max-width: 1024px) {
  .footer-izgara { grid-template-columns: 1fr 1fr; }
  .footer-marka { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  nav { display: none; }
  .hamburger { display: flex; }
  .kart-izgara-2 { grid-template-columns: 1fr; }
  .icerik-duzen { grid-template-columns: 1fr; }
  .kenar-cubugu { position: static; }
  .iletisim-izgara { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .bolum { padding: 3rem 0; }
  .hero { padding: 3.5rem 0 3rem; }
  .hero-istatistikler { gap: 1.5rem; }
  .cta-bolum { padding: 3rem 0; }
}

@media (max-width: 600px) {
  .footer-izgara { grid-template-columns: 1fr; }
  .footer-marka { grid-column: auto; }
  .hero h1 { font-size: 1.75rem; }
  .hero-aksiyonlar { flex-direction: column; align-items: flex-start; }
  .cta-aksiyonlar { flex-direction: column; align-items: center; }
  .sabit-telefon .telefon-metin { display: none; }
  .sabit-telefon { padding: .85rem; border-radius: 50%; width: 52px; height: 52px; justify-content: center; }
}

/* ════════════════════════════════════
   YARDIMCI SINIFLAR
════════════════════════════════════ */
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.text-center { text-align: center; }
.text-mavi { color: var(--mavi); }
.text-turuncu { color: var(--turuncu); }
.text-gri { color: var(--gri); }
.font-bold { font-weight: 700; }
.w-full { width: 100%; }
.d-flex { display: flex; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.p-ic { padding: 2rem 0; }

/* SVG ikon renkleri */
.svg-mavi { color: var(--mavi); }
.svg-turuncu { color: var(--turuncu); }
.svg-yesil { color: #10b981; }

/* ════════════════════════════════════
   HERO İKİ KOLON DÜZENİ
════════════════════════════════════ */
.hero-iki-kolon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
}
.hero-gorsel {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-gorsel img, .hero-gorsel svg {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: var(--r-b);
  filter: drop-shadow(0 20px 40px rgba(29,78,216,.18));
  animation: yuzHover 4s ease-in-out infinite;
}
@keyframes yuzHover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (max-width: 900px) {
  .hero-iki-kolon { grid-template-columns: 1fr; }
  .hero-gorsel { display: none; }
}

/* ════════════════════════════════════
   HİZMET KARTLARI (GELİŞMİŞ)
════════════════════════════════════ */
.hizmet-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.hizmet-kart {
  background: var(--beyaz);
  border: 1px solid var(--sinir);
  border-radius: var(--r-b);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.hizmet-kart::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  opacity: 0;
  transition: opacity .25s;
}
.hizmet-kart:hover { box-shadow: var(--golge-b); transform: translateY(-4px); border-color: #bfdbfe; }
.hizmet-kart:hover::before { opacity: 1; }
.hizmet-kart > * { position: relative; }
.hizmet-ikon-kutu {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, var(--mavi-ac), #dbeafe);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 2rem;
}
.hizmet-kart h3 { font-size: 1.05rem; font-weight: 700; color: var(--koyu); margin-bottom: .5rem; }
.hizmet-kart p { font-size: .875rem; color: var(--gri); line-height: 1.65; }
@media (max-width: 768px) { .hizmet-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .hizmet-izgara { grid-template-columns: 1fr; } }

/* ════════════════════════════════════
   İSTATİSTİK KARTLARI
════════════════════════════════════ */
.istat-izgara {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.istat-kart {
  background: var(--beyaz);
  border: 1px solid var(--sinir);
  border-radius: var(--r-b);
  padding: 1.75rem 1.25rem;
  text-align: center;
  box-shadow: var(--golge);
}
.istat-sayi {
  font-size: 2.75rem;
  font-weight: 900;
  color: var(--mavi);
  line-height: 1;
  margin-bottom: .35rem;
}
.istat-etiket { font-size: .875rem; color: var(--gri); font-weight: 600; }
@media (max-width: 768px) { .istat-izgara { grid-template-columns: repeat(2, 1fr); } }

/* ════════════════════════════════════
   NEDEN BİZ KARTLARI
════════════════════════════════════ */
.neden-izgara {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.neden-kart {
  background: var(--beyaz);
  border: 1px solid var(--sinir);
  border-radius: var(--r-b);
  padding: 1.75rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  transition: box-shadow .22s, transform .22s;
}
.neden-kart:hover { box-shadow: var(--golge-b); transform: translateY(-3px); }
.neden-ikon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--mavi), #2563eb);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.neden-kart h3 { font-size: 1rem; font-weight: 700; color: var(--koyu); margin-bottom: .4rem; }
.neden-kart p { font-size: .875rem; color: var(--gri); line-height: 1.65; }
@media (max-width: 600px) { .neden-izgara { grid-template-columns: 1fr; } }

/* ════════════════════════════════════
   MARKA KARNE KARTLARI
════════════════════════════════════ */
.marka-karne-izgara {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.marka-karne-kart {
  background: var(--beyaz);
  border: 1px solid var(--sinir);
  border-radius: var(--r);
  padding: 1.25rem;
  text-align: center;
  transition: all .22s;
}
.marka-karne-kart:hover { border-color: #93c5fd; box-shadow: var(--golge); transform: translateY(-2px); }
.marka-karne-kart .karne-ikon { font-size: 2rem; margin-bottom: .5rem; }
.marka-karne-kart .karne-isim { font-size: .9rem; font-weight: 700; color: var(--koyu); margin-bottom: .25rem; }
.marka-karne-kart .karne-tip { font-size: .75rem; color: var(--gri); }
.karne-yetkili { border-color: #fed7aa; background: #fff7ed; }
.karne-yetkili .karne-isim { color: #c2410c; }
@media (max-width: 768px) { .marka-karne-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .marka-karne-izgara { grid-template-columns: repeat(2, 1fr); } }

/* ════════════════════════════════════
   GARANTİ KUTUSU
════════════════════════════════════ */
.garanti-kutu {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 2px solid #86efac;
  border-radius: var(--r-b);
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem 0;
}
.garanti-ikon { font-size: 3rem; flex-shrink: 0; }
.garanti-icerik h3 { font-size: 1.1rem; font-weight: 700; color: #166534; margin-bottom: .4rem; }
.garanti-icerik p { font-size: .875rem; color: #15803d; line-height: 1.65; }
@media (max-width: 600px) { .garanti-kutu { flex-direction: column; text-align: center; } }

/* ════════════════════════════════════
   İÇERİK GÖRSEL
════════════════════════════════════ */
.icerik-gorsel-alani {
  border-radius: var(--r-b);
  overflow: hidden;
  margin: 1.5rem 0;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.icerik-gorsel-alani img, .icerik-gorsel-alani svg {
  width: 100%;
  height: auto;
  border-radius: var(--r);
}

/* ════════════════════════════════════
   PUAN GÖSTERGESİ
════════════════════════════════════ */
.puan-gosterge {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--koyu);
}
.puan-yildizlar { color: #f59e0b; letter-spacing: .1em; }
.puan-sayi { color: var(--gri); font-weight: 400; font-size: .8rem; }