/* ============================================================
   mobile-fixes.css — Mobil duyarlılık hot-fix
   Bu dosya bundle'a DAHIL DEĞİL — doğrudan layout.php'den link ile yüklenir.
   Bundle hash kafa karışıklığı olmadan, upload edildiği anda aktif olur.
   En son yüklenir → tüm önceki kuralları override eder (specificity + cascade).
   ============================================================ */

/* ── 1) Hero — JS-driven --vh fallback (eski Android için)
        Hero ilk açılışta boş alan / aşağı-yukarı kaydırınca düzeliyor sorunu */
.hero {
  height: 100vh;
  height: 100svh;
  height: calc(var(--vh, 1vh) * 100);
}
@media (max-width: 768px) {
  .hero { min-height: 540px; padding-bottom: 64px; }
  .hero__content { gap: 20px; padding: 16px; }
  .hero__scroll { display: none !important; } /* Badge ile çakışıyordu */
}

/* ── 2) Floating badge — mobilde SOLDA, WhatsApp'ın ÜSTÜNDE, WA ile aynı 56px */
@media (max-width: 768px) {
  .floating-badge {
    width: 56px !important;
    height: 56px !important;
    left: 16px !important;
    right: auto !important;       /* Eski sağ konumu temizle */
    /* WhatsApp: bottom 20 + height 56 = 76 → gap 12 → badge bottom 88 */
    bottom: 88px !important;
  }
  /* 56px daire içinde "İLK SEANS %20" üç satır — küçük ama okunaklı */
  .floating-badge .badge-cta {
    font-size: 0.5rem !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }
  /* Çevredeki dönen yazı — viewBox 120 → ekran 56 oranında küçülür */
  .floating-badge .badge-text text {
    font-size: 13px !important;
    letter-spacing: 1.4px !important;
  }
  /* İç dashed halka 56px'te ezilmesin */
  .floating-badge .badge-disc::before {
    inset: 5px !important;
  }
}

/* ── 3) Container padding mobilde daralt — yatay overflow önle */
@media (max-width: 480px) {
  .container { padding-inline: 20px !important; }
  .container-narrow { padding-inline: 20px !important; }
}
@media (max-width: 380px) {
  .container { padding-inline: 16px !important; }
}

/* ── 4) Section padding mobilde azalt (israf alan) */
@media (max-width: 480px) {
  .section { padding-block: 48px !important; }
}

/* ── 5) Section başlık ve page-hero h1 mobilde küçük */
@media (max-width: 480px) {
  .section-title { font-size: clamp(1.5rem, 7.5vw, 2.25rem) !important; }
  .page-hero h1 {
    font-size: clamp(1.5rem, 8vw, 2rem) !important;
    word-break: break-word;
    hyphens: auto;
  }
  .page-hero { padding-block: 48px !important; }
  .page-hero .lead { font-size: 1rem !important; }
}
@media (max-width: 768px) and (min-width: 481px) {
  .page-hero h1 { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; }
}

/* ── 6) Header logo + lang dropdown mobilde sıkışmasın */
@media (max-width: 768px) {
  .site-logo__img { height: 44px !important; }
  .nav-actions { gap: 8px !important; }
}
@media (max-width: 380px) {
  .site-logo__img { height: 36px !important; }
  .nav-actions { gap: 4px !important; }
  .lang-dd__trigger { padding: 6px 8px !important; gap: 6px !important; }
}

/* ── 7) Mega dropdown — mobilde viewport'a sığdır */
.dropdown--mega {
  width: min(540px, calc(100vw - 24px)) !important;
}

/* ── 8) Footer — 2-kolon dar aralığını 1-kolon'a indir */
@media (max-width: 600px) {
  .footer-main { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-brand-col { grid-column: span 1 !important; }
}

/* ── 9) Feature scroll (Neden Biz kartları) — mobilde tam genişlik */
@media (max-width: 768px) {
  .feature-scroll__row {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 16px !important;
  }
}
@media (max-width: 480px) {
  .feature-scroll .feature-card {
    flex: 0 0 calc(100vw - 64px) !important;
    min-width: 0 !important;
  }
  .feature-card { padding: 24px !important; }
}

/* ── 10) Sanatçı placeholder — 6rem alt sınır dev harf, mobilde küçült */
.home-artist__placeholder {
  font-size: clamp(3rem, 14vw, 11rem) !important;
}
.artist-profile__placeholder,
.profile-card__placeholder {
  font-size: clamp(3rem, 16vw, 12rem) !important;
}

/* ── 11) Style-cloud — min-height 520px mobil/tablette küçült */
@media (max-width: 768px) {
  .style-cloud { min-height: 360px !important; }
  .style-cloud__label[data-pos] {
    font-size: clamp(1.6rem, 7vw, 4.2rem) !important;
  }
}
@media (max-width: 480px) {
  .style-cloud { min-height: 280px !important; }
}

/* ── 12) Iskelet (3D ağrı haritası) — 92vh tüm sayfa kapatıyor */
@media (max-width: 768px) {
  .iskelet-stage { height: clamp(440px, 60vh, 640px) !important; }
  .iskelet-stage--detail-open { height: clamp(300px, 44vh, 460px) !important; }
}
@media (max-width: 480px) {
  .iskelet-stage { height: clamp(380px, 56vh, 560px) !important; }
}

/* ── 13) Prose tablo — nowrap kaldır (görünmez yatay scroll) */
@media (max-width: 700px) {
  .prose table {
    white-space: normal !important;
  }
  .prose th, .prose td {
    word-break: break-word !important;
    hyphens: auto;
    font-size: 0.875rem !important;
  }
}

/* ── 14) Pricing tablo — yana kaydır ipucu */
@media (max-width: 540px) {
  .pricing-table-card { position: relative; }
  .pricing-table-card::after {
    content: "← yana kaydır";
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 10px;
    color: var(--ink-muted, #a3a3a3);
    background: var(--bg-tertiary, #1f1f1f);
    padding: 2px 8px;
    border-radius: 999px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.85;
  }
}

/* ── 15) Portfolio mosaic — çok dar mobilde tek kolon (2-kolon kötü görünüyor) */
@media (max-width: 420px) {
  .portfolio-mosaic {
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(220px, auto) !important;
    gap: 12px !important;
  }
  .portfolio-tile,
  .portfolio-tile--wide,
  .portfolio-tile--medium,
  .portfolio-tile--tall,
  .portfolio-tile--big {
    grid-column: 1 / -1 !important;
    grid-row: span 1 !important;
  }
}

/* ── 16) Appointment form — mobilde input zoom (iOS) ve padding düzelt */
@media (max-width: 480px) {
  .appt-fs { padding: 16px !important; }
  .appt-info__inner { padding: 20px !important; }
  .appt-form .field input,
  .appt-form .field select,
  .appt-form .field textarea {
    font-size: 16px !important; /* iOS Safari zoom önler */
  }
}

/* ── 17) Yatay overflow güvenlik ağı — uzun URL/birleşik kelimeler taşmasın */
@media (max-width: 480px) {
  h1, h2, h3, h4, p, li, blockquote {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* ── 18) Body overflow-x: hidden zaten var ama kesinleştir */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ── 19) Lightbox — WhatsApp + Badge'in ÜSTÜNE çıksın (z-index fix)
        Lightbox açıkken floating öğeler GİZLENSİN — sadece resim + çarpı görünür */
.lightbox {
  z-index: 9999 !important;            /* badge 700 ve diğer her şeyin üstünde */
  background: rgba(0, 0, 0, 0.97) !important;
}
body:has(.lightbox.is-open) .floating-badge,
body:has(.lightbox.is-open) .wa-popup,
body:has(.lightbox.is-open) .site-header,
body:has(.lightbox.is-open) .cookie-banner {
  display: none !important;
}
/* Çarpı butonu — mobilde sağ-üst, daha belirgin ve büyük tıklama hedefi */
.lightbox-close {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  z-index: 10000 !important;
}
/* Resim — tüm ekranı kullansın, padding'e takılmasın */
.lightbox {
  padding: 0 !important;
}
.lightbox-img {
  max-width: 100vw !important;
  max-height: 100vh !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  /* Yumuşak geçiş efekti — swipe'da hissedilsin */
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.lightbox.is-swiping .lightbox-img { transition: none !important; }