/* ================================
   Gabar Klima - styles.css (2025)
   Minimal reset + yardımcı sınıflar
   Tailwind ile uyumlu
================================= */

/* 0) Sistem düzeltmeleri */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html, body {
  /* Sayfada yatay kaydırmayı KAPAT */
  overflow-x: clip;               /* destek yoksa hidden gibi davranır */
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  background: #f8fafc;
  /* Dokunma jesti — sadece dikey */
  touch-action: pan-y;
  overscroll-behavior-x: none;
  overscroll-behavior-inline: none;
}
img, video, canvas, svg, iframe { display:block; max-width:100%; height:auto; }

body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #0f172a;         /* slate-900 */
  line-height: 1.6;
}

/* 1) Renk değişkenleri */
:root{
  --accent:#0ea5e9;
  --border:#e2e8f0;      /* slate-200 */
  --muted:#64748b;       /* slate-500 */
}

/* 2) Tipografi küçük dokunuşlar */
h1,h2,h3,h4{ font-weight: 800; line-height: 1.2; color:#0f172a; }
p{ color:#f8fafc; }       /* slate-700 */
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Drag görsel geri bildirimi */
[data-carousel="gallery"] [data-track], #reviewsSlider { cursor: grab; }
.dragging { cursor: grabbing; user-select: none; }
/* Anchor'a kayınca yapışkan header payı */
[id]{ scroll-margin-top: 96px; }

/* 3) Kart ve gölge */
.card{ background:#fff; border:1px solid var(--border); border-radius:1rem; box-shadow:0 10px 30px -12px rgba(0,0,0,.25); }
.shadow-soft{ box-shadow:0 10px 30px -12px rgba(0,0,0,.25); }

/* 4) Cam efekti + hero gradient */
.glass { backdrop-filter: blur(8px); background: rgba(255,255,255,0.75); }
.gradient-hero {
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(14,165,233,.25), transparent),
    radial-gradient(1000px 500px at 80% 20%, rgba(59,130,246,.25), transparent),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* 5) Marquee */
.marquee-wrap{ overflow:hidden; }
.marquee { display:flex; gap:2rem; animation: marquee-scroll 30s linear infinite; }
@keyframes marquee-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* 6) Slider’larda yatay pan serbest + zinciri kes */
#slider, #reviewsSlider{
  touch-action: pan-x pinch-zoom;
  -ms-touch-action: pan-x pinch-zoom;
  overscroll-behavior-x: contain;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* 7) Scrollbar gizle (yatay slider’lar) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 8) SSS detayları */
details{ background:#fff; border:1px solid var(--border); border-radius:1rem; padding:1rem; }
details + details{ margin-top:.75rem; }
summary{ list-style:none; cursor:pointer; }
summary::-webkit-details-marker{ display:none; }

/* 9) Harita kutusu */
.map, .map iframe{ border-radius:1rem; }
.map{ overflow:hidden; border:1px solid var(--border); background:#fff; }

/* 10) Harita: mobilde pasif (sayfayı sağa kaydırmasın) */
@media (max-width: 767.98px){
  #mapFrame{ pointer-events: none; }
}
@media (min-width: 768px){
  #mapFrame{ pointer-events: auto; }
}

/* 11) Buton mikro animasyon */
button{ transition: transform .15s ease, box-shadow .15s ease; }
button:active{ transform: scale(.98); }

/* 12) Focus halkası */
:focus-visible{ outline: 3px solid rgba(14,165,233,.5); outline-offset: 2px; }

/* 13) aspect-square fallback (Tailwind varsa zaten var) */
.aspect-square{ position: relative; width:100%; }
.aspect-square::before{ content:""; display:block; padding-bottom:100%; }
.aspect-square > *{ position:absolute; inset:0; width:100%; height:100%; }

/* Başlıkta hafif 3D ve yüzen animasyon */
.fx-3d { text-shadow: 0 1px 0 #0f172a, 0 8px 24px rgba(2,132,199,.25); }
@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-2px) } }
.fx-float { animation: float 3s ease-in-out infinite; will-change: transform; }

/* ==== İstatistikler (component-scope) ==== */
.gk-stats { padding: 3.5rem 0; }
.gk-stats__container { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.gk-stats__title {
  text-align: center; font-weight: 800; color: #0f172a;
  font-size: clamp(1.125rem, 1rem + 1vw, 1.5rem); margin-bottom: 1rem;
}

/* Grid: mobil 2x2, md+ 4 sütun */
.gk-stats__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .875rem;
}
@media (min-width: 768px) {
  .gk-stats__grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
}

/* Kart */
.gk-stats__item {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem;
  padding: 1.25rem 1rem; text-align: center;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gk-stats__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -18px rgba(2,132,199,.3);
}

/* İkon kutusu */
.gk-stats__icon {
  width: 44px; height: 44px; margin: 0 auto .6rem; border-radius: .9rem;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(14,165,233,.12), rgba(59,130,246,.12));
  box-shadow: inset 0 8px 24px rgba(14,165,233,.18);
  border: 1px solid rgba(14,165,233,.25);
}
.gk-stats__icon svg { width: 24px; height: 24px; stroke: #0ea5e9; fill: none; stroke-width: 2; }

/* Değer + etiket */
.gk-stats__value {
  font-weight: 800; color: #0f172a; letter-spacing: .2px;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem); line-height: 1.1;
}
.gk-stats__label { margin-top: .35rem; font-size: .94rem; color: #64748b; }

/* scroll bar gizleme (varsa) */
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{scrollbar-width:none}