/* =============================================================================
   MAIN.CSS — Global overrides & utility styles
   Pet Transfer Bodrum
   ============================================================================= */

/* ── Horizontal scroll önleme ────────────────────────────────────────────── */
html, body { overflow-x: hidden; max-width: 100%; }

/* ── Header offset ───────────────────────────────────────────────────────── */
body { padding-top: var(--header-h); }
.hero { margin-top: calc(-1 * var(--header-h)); }

/* ── Swiper reviews ─────────────────────────────────────────────────────── */
.swiper-reviews { padding-bottom: 52px !important; overflow: hidden !important; }
.swiper-reviews .swiper-slide { height: auto; }
.swiper-reviews .swiper-wrapper { overflow: hidden; }
.swiper-pagination-bullet { background: rgba(255,255,255,0.25) !important; width: 8px; height: 8px; }
.swiper-pagination-bullet-active { background: var(--color-accent) !important; width: 24px; border-radius: 4px; }

/* ── Toast container ────────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Section spacing helper ──────────────────────────────────────────────── */
.mt-section { margin-top: var(--space-section); }
.mb-section { margin-bottom: var(--space-section); }

/* ── Text center helper ─────────────────────────────────────────────────── */
.text-center { text-align: center; }

/* ── Service cards: 2x2 grid, eşit yükseklik ───────────────────────────── */
#hizmetler .grid-auto {
  grid-template-columns: repeat(2, 1fr);
  /* align-items: stretch default — her satır en uzun karta göre yükseklenir */
}

/* Grid item'ı tam yüksekliğe zorla */
#hizmetler .grid-auto > .card.service-card {
  display: flex;
  flex-direction: column;
  min-height: 0; /* grid stretch içinde height:100% çalışsın */
}

/* Açıklama metni genişlesin, link hep en altta kalsın */
#hizmetler .service-card-desc {
  flex: 1;
  margin-bottom: 20px;
}

#hizmetler .service-card-link {
  margin-top: auto;
}

@media (max-width: 640px) {
  #hizmetler .grid-auto {
    grid-template-columns: 1fr;
  }
}

/* ── Responsive grid override ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  /* Stats 4-col → 2-col on mobile */
  [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Split layout vertical on mobile */
  .split, .split--60-40 {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* ── Paw cursor ─────────────────────────────────────────────────────────── */
#paw-cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99999;
  display: none;
  transform-origin: center;
}

/* ── Selection color ────────────────────────────────────────────────────── */
::selection {
  background: var(--color-accent);
  color: white;
}

/* ── Focus visible ──────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Smooth image rendering ─────────────────────────────────────────────── */
img { image-rendering: -webkit-optimize-contrast; }

/* ── Sticky CTA Bar ─────────────────────────────────────────────────────── */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
  /* Push page content up */
}

.sticky-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: filter 0.2s, transform 0.15s;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sticky-cta-btn:active { transform: scale(0.97); }

.sticky-cta-wa {
  background: #25D366;
  color: white;
}
.sticky-cta-wa:hover { filter: brightness(1.08); }

.sticky-cta-phone {
  background: var(--color-primary, #1B3A4B);
  color: white;
}
.sticky-cta-phone:hover { filter: brightness(1.15); }

.sticky-cta-label { line-height: 1; }

/* Add padding to body so sticky bar doesn't overlap content */
body { padding-bottom: 60px; }

/* Desktop: float buttons to the right corner instead of full-width bar */
@media (min-width: 768px) {
  .sticky-cta {
    bottom: 28px;
    left: auto;
    right: 28px;
    width: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    background: transparent;
    box-shadow: none;
  }
  body { padding-bottom: 0; }

  .sticky-cta-btn {
    border-radius: var(--radius-pill, 999px);
    padding: 14px 22px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    min-width: 180px;
    justify-content: flex-start;
  }
  .sticky-cta-wa { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
  .sticky-cta-phone { box-shadow: 0 4px 20px rgba(27,58,75,0.4); }

  /* .back-to-top shares the same bottom-right corner as .sticky-cta's
     desktop floating buttons (both bottom:28px; right:28px) — without
     this offset they stack directly on top of each other. Clear the
     ~120px-tall WhatsApp/Call button stack. */
  .back-to-top { bottom: 150px; }

  /* .sticky-cta moves to a corner-floating layout on desktop, so it no
     longer occupies the full bottom edge — the cookie banner can sit
     flush at the bottom again here. */
  .cookie-banner { bottom: 0; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .back-to-top, #paw-cursor, .sticky-cta { display: none !important; }
  body { padding-top: 0; padding-bottom: 0; }
}