body { font-family: 'Inter', sans-serif; background-color: #fafafa; }

  /* Slider görsel yüksekliği */
  @media (min-width:768px) {
    #slider img { height: 350px; object-fit: cover; }
  }

  /* =====================================================
     ANCHOR OFFSET (sticky header için)
     - Tailwind scroll-mt kullanıyorsan buna gerek yok.
     - Ama kullanacaksan tek yerden yönet.
  ====================================================== */
  :root { --anchor-offset: 110px; }
  .anchor-offset { scroll-margin-top: var(--anchor-offset); }

  /* İstersen tüm id hedefleri için (çok pratik):
     #fiyatlar, #paketler, #rezervasyonFormu gibi anchor'ların hepsini düzeltir.
  */
  [id] { scroll-margin-top: var(--anchor-offset); }

  /* =====================================================
     TAB BUTONLARI
  ====================================================== */
  .tab-btn {
    flex: 1;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
    color: #334155;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .tab-btn:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
  }

  .tab-btn.active {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.10);
    font-weight: 700;
    transform: none;
  }

  /* Özel aksiyon tabları (istersen class vererek kullan) */
  .tab-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 6px 16px rgba(16,185,129,.35);
  }
  .tab-primary:hover {
    background: linear-gradient(135deg, #0ea371, #047857);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(16,185,129,.45);
  }

  .tab-accent {
    background: #4f46e5;
    color: #fff;
    box-shadow: 0 6px 16px rgba(79,70,229,.35);
  }
  .tab-accent:hover {
    background: #4338ca;
    transform: translateY(-1px);
  }

  /* =====================================================
     TAB İÇERİĞİ
  ====================================================== */
  .tab-content { display: none; }
  .tab-content.active { display: block; }

  /* Alt tab / mini buton */
  .sub-tab {
    flex: 1;
    padding: 10px;
    background: #fff;
    border-radius: 999px;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    transition: background-color .2s ease, transform .2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .sub-tab:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
  }


@media (max-width: 640px) {
  .tab-btn,
  .sub-tab {
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.08),
      0 10px 22px rgba(15, 23, 42, 0.10);
  }
}

/* Kutuları belirginleştir (tab + sub-tab) */
.tab-btn,
.sub-tab {
  border: 1px solid rgba(55, 27, 66, 0.18);  /* marka tonunda ince çerçeve */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 18px rgba(15, 23, 42, 0.08);       /* daha dolu gölge */
  background: linear-gradient(180deg, #ffffff, #fbfbfd);
}

/* Hover’da biraz daha net */
.tab-btn:hover,
.sub-tab:hover {
  border-color: rgba(55, 27, 66, 0.32);
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.10),
    0 16px 28px rgba(15, 23, 42, 0.12);
}

/* Aktif olan daha premium dursun */
.tab-btn.active {
  border-color: rgba(55, 27, 66, 0.55);
  box-shadow:
    0 3px 10px rgba(15, 23, 42, 0.12),
    0 22px 40px rgba(15, 23, 42, 0.14);
}


/* Kutuları belirginleştir (tab + sub-tab) */
.tab-btn,
.sub-tab {
  border: 1px solid rgba(55, 27, 66, 0.18);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 18px rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, #ffffff, #fbfbfd);
}

/* Hover’da biraz daha net */
.tab-btn:hover,
.sub-tab:hover {
  border-color: rgba(55, 27, 66, 0.32);
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.10),
    0 16px 28px rgba(15, 23, 42, 0.12);
}

/* Aktif olan daha premium dursun */
.tab-btn.active {
  border-color: rgba(55, 27, 66, 0.55);
  box-shadow:
    0 3px 10px rgba(15, 23, 42, 0.12),
    0 22px 40px rgba(15, 23, 42, 0.14);
}

/* Aksiyon tabları kendi stilini korusun */
.tab-btn.tab-primary,
.tab-btn.tab-accent {
  background: unset; /* aşağıda kendileri zaten set ediyor */
  border-color: transparent;
}

/* Mobilde biraz daha güçlü gölge (EN SONA) */
@media (max-width: 640px) {
  .tab-btn,
  .sub-tab {
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.08),
      0 10px 22px rgba(15, 23, 42, 0.10);
  }
}

/* =========================================================
   HEADER'A YAPIŞMA FIX (Hero / First section breathing space)
   - body padding-top (header+topband) kalsın
   - içerik/hero üstten ekstra nefes alsın
========================================================= */

/* Varsayılan: tüm sayfalarda ilk section biraz aşağıdan başlasın */
main > section:first-child{
  padding-top: clamp(12px, 2.2vw, 28px);
}

/* Eğer bazı sayfalarda ilk eleman section değilse (div/article vb.) */
main > :first-child{
  margin-top: 0; /* güvenli */
}

/* Hizmet sayfalarında daha premium boşluk */
body.page-service main > section:first-child,
body.page-district-service main > section:first-child{
  padding-top: clamp(18px, 2.8vw, 44px);
}

/* Hizmet hero başlığı daha güzel otursun */
body.page-service main > section:first-child h1,
body.page-district-service main > section:first-child h1{
  margin-top: 0;
  padding-top: 0;
}

/* Üst band + header birleşince çok sıkı görünmesin: hafif ayırıcı çizgi */
#siteHeader{
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}