/* =========================================================================
   SAYFA: Ana sayfa (#landingViewSection)
   Hero, sorgu formu + harita, örnek raporlar, veri kapsamı, fiyatlandırma,
   il listesi, SSS. Buradaki her kural #landingViewSection ile başlar;
   profil/yönetim ve rapor sayfalarını etkilemez.
   ========================================================================= */

/* ---------- Hero ---------- */
#landingViewSection #hero-section {
  isolation: isolate;
}

/* Yumuşak, yavaş hareket eden marka renkli arka plan ışıkları */
#landingViewSection #hero-section::before,
#landingViewSection #hero-section::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 9999px;
  filter: blur(72px);
  pointer-events: none;
  opacity: 0.55;
}

#landingViewSection #hero-section::before {
  width: 520px;
  height: 520px;
  top: -220px;
  left: calc(50% - 560px);
  background: radial-gradient(circle, rgba(37, 99, 235, 0.28), transparent 70%);
  animation: heroDrift 18s var(--ease-in-out) infinite alternate;
}

#landingViewSection #hero-section::after {
  width: 460px;
  height: 460px;
  top: -160px;
  right: calc(50% - 540px);
  background: radial-gradient(circle, rgba(6, 182, 212, 0.24), transparent 70%);
  animation: heroDrift 22s var(--ease-in-out) infinite alternate-reverse;
}

.dark #landingViewSection #hero-section::before,
.dark #landingViewSection #hero-section::after {
  opacity: 0.35;
}

@keyframes heroDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(40px, 30px, 0) scale(1.08); }
  100% { transform: translate3d(-30px, 50px, 0) scale(0.96); }
}

/* Hero giriş animasyonu (sayfa açılışında sırayla) */
#landingViewSection #hero-section .max-w-3xl > * {
  animation: fadeSlideUp 0.8s var(--ease-out) backwards;
}
#landingViewSection #hero-section .max-w-3xl > :nth-child(2) { animation-delay: 80ms; }
#landingViewSection #hero-section .max-w-3xl > :nth-child(3) { animation-delay: 160ms; }

#landingViewSection #query-section {
  animation: fadeSlideUp 0.9s var(--ease-out) 220ms backwards;
}

#landingViewSection #hero-section h1 {
  letter-spacing: -0.035em;
  line-height: 1.08;
}

/* "Yağmur Yağdı mı?" parlayan gradyan yazı */
#landingViewSection #hero-section h1 .bg-clip-text {
  background-image: linear-gradient(90deg, #2563eb 0%, #06b6d4 40%, #2563eb 80%);
  background-size: 200% 100%;
  animation: gradientShift 8s linear infinite;
  padding-bottom: 0.08em; /* g/ğ kuyrukları kesilmesin */
}

@keyframes gradientShift {
  from { background-position: 0% 50%; }
  to   { background-position: -200% 50%; }
}

/* Sorgu kartı: kurumsal, katmanlı gölge */
#landingViewSection #query-section > .shadcn-card {
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--border) 85%, transparent);
}

/* ---------- Harita ---------- */
#landingViewSection #map {
  height: 340px;
  min-height: 340px;
  width: 100%;
  border-radius: calc(var(--radius) - 2px);
  z-index: 10;
  background-color: #f1f5f9;
}

.dark #landingViewSection #map {
  background-color: #0f172a;
}

.dark #landingViewSection #map .leaflet-tile {
  filter: brightness(0.65) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}

.dark #landingViewSection #map .leaflet-control-zoom a {
  background-color: #1e293b;
  color: #f8fafc;
  border-color: #334155;
}

.dark #landingViewSection #map .leaflet-control-zoom a:hover {
  background-color: #334155;
}

.dark #landingViewSection #map .leaflet-control-attribution {
  background-color: rgba(15, 23, 42, 0.85);
  color: #94a3b8;
}

.dark #landingViewSection #map .leaflet-control-attribution a {
  color: #60a5fa;
}

@media (max-width: 640px) {
  #landingViewSection #map {
    height: 240px !important;
    min-height: 240px !important;
  }

  #landingViewSection .leaflet-control-zoom {
    margin-right: 8px !important;
    margin-bottom: 8px !important;
  }
}

/* ---------- Kartlar: hover'da hafif yükselme ---------- */
@media (hover: hover) {
  #landingViewSection #history-section .shadcn-card:hover,
  #landingViewSection #stats-section .shadcn-card:hover,
  #landingViewSection #pricing-section .shadcn-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
}

/* Veri kapsamı ikonları */
#landingViewSection #stats-section .shadcn-card > div:first-child {
  transition: transform var(--dur-base) var(--ease-out);
}
#landingViewSection #stats-section .shadcn-card:hover > div:first-child {
  transform: scale(1.08) rotate(-4deg);
}

/* ---------- Bölüm başlıkları ---------- */
#landingViewSection > section h2 {
  letter-spacing: -0.025em;
}

/* ---------- Fiyatlandırma ----------
   Paket sayısı yönetim panelinden değişebildiği için ızgara yerine
   ortalanmış esnek satır: son satırda tek kart kalırsa sola yapışmaz. */
@media (min-width: 640px) {
  #landingViewSection #landingPricingContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
  }
  #landingViewSection #landingPricingContainer > * {
    flex: 0 1 calc((100% - 1.5rem) / 2);
    min-width: 0;
  }
}

@media (min-width: 1024px) {
  #landingViewSection #landingPricingContainer > * {
    flex-basis: calc((100% - 4.5rem) / 4);
  }
  /* Tam 5 paket varsa geniş ekranda tek satır */
  #landingViewSection #landingPricingContainer:has(> :nth-child(5):last-child) > * {
    flex-basis: calc((100% - 6rem) / 5);
  }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  #landingViewSection #landingPricingContainer:has(> :nth-child(5):last-child) > * {
    flex-basis: calc((100% - 3rem) / 3);
  }
}

/* ---------- İl listesi (SEO bölümü, yalnızca görünüm) ---------- */
#landingViewSection #seo-cities-section a {
  transition: color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
@media (hover: hover) {
  #landingViewSection #seo-cities-section a:hover {
    transform: translateX(2px);
  }
}

/* ---------- SSS ---------- */
#landingViewSection #faq-section details {
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, background-color var(--dur-base) ease;
}
#landingViewSection #faq-section details[open] {
  border-color: rgba(var(--brand-rgb), 0.35);
  box-shadow: var(--shadow-sm);
}
#landingViewSection #faq-section summary::-webkit-details-marker {
  display: none;
}

/* ---------- Ana sayfa düğmeleri: basma hissi ---------- */
#landingViewSection button:not(:disabled):active {
  transform: scale(0.98);
}