/**
 * Tailwind build sonrası koruma katmanı.
 * style.css → tailwind.css sırasından sonra yüklenir.
 */

/* ─── MOBİL TEMEL ─────────────────────────────────────────────────────────── */
html, body {
  /* clip (hidden DEĞİL): yatay taşmayı keser ama scroll-container OLUŞTURMAZ,
     böylece position: sticky çalışır (ajans.php deste/kart efekti). */
  overflow-x: clip;
  max-width: 100%;
}

/* ─── HEADER MOBİL ───────────────────────────────────────────────────────── */
/* Logo — header ve mobil menüde aynı yükseklik */
@media (max-width: 767px) {
  .brand__logo {
    height: 28px !important;
    max-height: 28px !important;
  }
}
/* CTA butonunu saran .magnetic header'da mobilde gizle */
@media (max-width: 1023px) {
  .header__actions .magnetic {
    display: none !important;
  }
}
/* Dil butonlarını çok küçük ekranda gizle */
@media (max-width: 479px) {
  .header__actions .lang {
    display: none !important;
  }
}
/* Header içi boşluk ve taşma */
@media (max-width: 767px) {
  .header__bar {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    gap: .5rem !important;
  }
}
/* Container taşmaları */
@media (max-width: 767px) {
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ─── HERO / SAYFA BAŞLIKLARI MOBİL ─────────────────────────────────────── */
@media (max-width: 767px) {
  .hero__title,
  .page-hero__title,
  .section-title {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 1.15 !important;
    word-break: break-word;
  }
  .hero {
    padding-top: clamp(6rem, 14vh, 9rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
    min-height: unset;
  }
  .hero__lead,
  .page-hero__lead {
    font-size: clamp(.95rem, 3.5vw, 1.15rem) !important;
  }
}

/* ─── GRID / KART TAŞMA ──────────────────────────────────────────────────── */
/* Not: .grid { 1fr !important } kuralı kaldırıldı — tüm gridler artık
   Tailwind ile mobil-öncelikli (grid-cols-1 md:grid-cols-2 ...) tanımlı. */
@media (max-width: 767px) {
  .card,
  .service-card,
  .project-card,
  .blog-card,
  .process-card {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ─── FOOTER MOBİL ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Brand tam genişlik, Menü + Hizmetler yan yana, İletişim tam genişlik */
  .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.75rem 1.5rem !important;
  }
  .footer__brand {
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
  }
  /* Brand açıklamasını kısalt */
  .footer__brand p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .footer__col--contact {
    grid-column: 1 / -1 !important;
  }
  /* CTA bölümü */
  .footer__cta {
    flex-direction: column !important;
    gap: 1.25rem !important;
    text-align: center;
  }
  .footer__statement {
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
  }
  /* İletişim satırları daha kompakt */
  .footer__contact a,
  .footer__contact span {
    font-size: .82rem !important;
  }
}

/* ─── BLOG ───────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .article-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .article-toc {
    position: static !important;
    max-height: 280px;
    overflow-y: auto;
    border-radius: var(--radius-card);
    margin-bottom: 1.5rem;
  }
  .blog-search {
    /* Yalnızca yatay daraltma — dikey padding 0 kalmalı (yükseklik input'tan gelir),
       aksi halde arama hapı mobilde ~83px'e şişiyor. */
    padding: 0 1rem !important;
  }
  .cat-scroll {
    padding: .5rem 1rem !important;
  }
}

/* ─── MOBİL MENÜ — üst bar + kapat butonu ───────────────────────────────── */
.mobile-menu__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .5rem;
}
.mobile-menu__logo {
  height: 28px;       /* header logosuyla aynı */
  width: auto;
  filter: var(--logo-filter, none);
}
.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--glass-bg);
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.mobile-menu__close:hover {
  background: var(--c-purple);
  border-color: var(--c-purple);
  color: #fff;
}
/* Header logosuyla hizala: padding yatayda da eşleşsin */
@media (max-width: 767px) {
  .mobile-menu {
    padding: 1.25rem 1rem 2.5rem !important;
  }
}
@media (min-width: 768px) {
  .mobile-menu {
    padding-top: 1.5rem !important;
  }
}

/* ─── HARİTA / İLETİŞİM ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .contact-grid,
  .iletisim-grid {
    grid-template-columns: 1fr !important;
  }

  /* Harita: aspect-ratio kaldır, flex sütun ile kart alta alın */
  .map-wrap {
    aspect-ratio: unset !important;
    min-height: unset !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .map-wrap::after {
    /* Vignette on mobile sadece üst/kenar — kart alanını karartmasın */
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--surface) 35%, transparent) 0%,
        transparent 12%,
        transparent 88%,
        color-mix(in srgb, var(--surface) 35%, transparent) 100%
      ) !important;
  }
  .grafion-map {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 240px !important;
    flex: none !important;
    border-radius: 0 !important;
  }
  .grafion-map .leaflet-container {
    height: 240px !important;
  }
  /* Kart: absolute'dan çıkar, tam genişlik şerit */
  .map-card {
    position: static !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--border) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--surface) !important;
  }
  .map-card__inner {
    padding: .85rem 1rem !important;
  }
  .map-card h3 {
    font-size: .9rem !important;
  }
}

/* ─── 404 & AUTH SAYFALAR ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .not-found__title {
    font-size: clamp(5rem, 22vw, 9rem) !important;
  }
  .is-auth-page .header {
    display: flex !important;
  }
}

/* ─── DOSYA İNDİR ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .download-card,
  .dosya-card {
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

/* Story showcase — Tailwind preflight sonrası koruma */
.story-showcase {
  position: relative;
  overflow: hidden;
}
.story-showcase__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1400px;
  transform-style: preserve-3d;
}
.story-showcase__layer {
  position: absolute;
  margin: 0;
  transform-style: preserve-3d;
}
.story-showcase__layer img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}
.story-showcase__shine,
.story-showcase__ring {
  position: absolute;
}