/*!
 * Turla360 — Mobil Responsive v2
 * Tüm ön yüz sayfaları için tam mobil uyum.
 * site_settings üzerinden kontrol edilir.
 */

/* =====================================================
   TEMEL MOBÄ°L RESPONSÄ°V (max-width: 768px)
   ===================================================== */
@media (max-width: 768px) {

  /* Genel */
  .tn-wrap { padding: 0 16px !important; }
  body { font-size: 14px !important; }
  /* Tüm sayfalarda yatay taşmayı engelle (clip: scroll container oluşturmaz) */
  html, body { overflow-x: clip !important; max-width: 100% !important; }
  img, video, iframe { max-width: 100% !important; }
  /* height:auto yalnizca object-cover/fill KULLANMAYAN gorsellere binsin;
     hero .w-full.h-full.object-cover gibi goruntuleri korur. */
  img:not(.object-cover):not(.object-fill), video, iframe { height: auto !important; }

  /* Duyuru barı */
  .tn-ann-txt { font-size: 11px !important; line-height: 1.35 !important; padding-right: 24px !important; }
  .tn-ann-x { right: 8px !important; }

  /* Üst util barı — gizle */
  .tn-util { display: none !important; }

  /* Header */
  .tn-hdr-main { height: 56px !important; gap: 8px !important; }
  .tn-logo-badge { width: 32px !important; height: 32px !important; border-radius: 8px !important; }
  .tn-logo-badge svg { width: 16px !important; height: 16px !important; }
  .tn-logo-wm { font-size: 16px !important; }

  /* Navigasyon gizle */
  .tn-nav { display: none !important; }

  /* Sosyal ikonları gizle (header) */
  .tn-hdr-social, .tn-social { display: none !important; }

  /* Header sağ — kompakt */
  .tn-hdr-r { gap: 6px !important; }
  .tn-btn-cta { padding: 7px 10px !important; font-size: 11px !important; border-radius: 8px !important; }
  .tn-btn-cta svg { display: none !important; }
  .tn-btn-login { font-size: 11px !important; padding: 6px 8px !important; }
  .tn-ic-btn { width: 32px !important; height: 32px !important; border-radius: 8px !important; }

  /* Login modal trigger butonu (header) — kompakt */
  button.tn-login-trigger {
    padding: 7px 10px !important;
    font-size: 12px !important;
    gap: 4px !important;
  }
  button.tn-login-trigger svg { width: 14px !important; height: 14px !important; }

  /* Header şirket girişi pill butonu — text gizle, sadece ikon kalsın (aşırı dar ekranlar için) */
  .tn-hdr-r > a.coral-gradient {
    padding: 7px 12px !important;
    font-size: 11px !important;
  }
  .tn-hdr-r > a.coral-gradient svg { width: 14px !important; height: 14px !important; }

  /* Arama çubuğu */
  .tn-srch-dock { display: none !important; }

  /* Hero bölümü */
  .hero-in { grid-template-columns: 1fr !important; gap: 24px !important; }
  .hero-r { display: none !important; }
  .hero-h { font-size: 28px !important; }
  .hero-p { font-size: 14px !important; }
  .hero-cta { flex-direction: column; gap: 10px; }
  .btn-hero-p, .btn-hero-s { width: 100%; justify-content: center; padding: 12px 20px !important; font-size: 14px !important; }
  .hero-kpis { width: 100%; }
  .kpi { padding: 12px 16px !important; }
  .kpi-n { font-size: 22px !important; }
  .hero { padding: 40px 0 36px !important; }
  .hero-eyebrow { font-size: 11px !important; }

  /* Kategori strip */
  .cat-strip { overflow-x: auto; }
  .cat-pills { padding: 0 16px; }
  .cat-pill { padding: 6px 14px !important; font-size: 12px !important; }

  /* Bölümler */
  .tn-sec { padding: 40px 0 !important; }
  .tn-sec-hdr { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 24px !important; }
  .tn-sec-h2 { font-size: 22px !important; }

  /* Tur kartları grid */
  .tn-tours-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .tn-tc-img { height: 180px !important; }
  .tn-tc-body { padding: 14px 16px 16px !important; }
  .tn-tc-name { font-size: 16px !important; }

  /* Destinasyon grid */
  .tn-dest-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* Güven çizgisi */
  .tn-trust .tn-wrap { flex-wrap: wrap; justify-content: center; }
  .tn-trust-item { font-size: 11px !important; }

  /* Footer */
  .tn-ft-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .tn-ft-bot { flex-direction: column; text-align: center; gap: 16px; }

  /* Arama sonuçları */
  .sr-wrap { padding: 20px 16px 40px !important; }
  .sr-grid { grid-template-columns: 1fr !important; }
  .sr-ti { font-size: 24px !important; }

  /* Hakkımızda / İletişim */
  .cnt-grid, .abt-grid { grid-template-columns: 1fr !important; }
}

/* =====================================================
   KÜÇÜK MOBİL (max-width: 480px)
   ===================================================== */
@media (max-width: 480px) {
  .tn-wrap { padding: 0 12px !important; }
  .hero-h { font-size: 24px !important; }
  .hero-kpis { flex-direction: column; border-radius: 12px; }
  .kpi { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08); padding: 10px 14px !important; }
  .kpi:last-child { border-bottom: none; }
  .tn-tc-img { height: 160px !important; }
  .tn-dest-grid { grid-template-columns: 1fr !important; }
  .tn-ft-social .tn-soc { width: 34px; height: 34px; }
}

/* =====================================================
   MOBİL HAMBURGER MENÜ
   ===================================================== */
.tn-mob-toggle {
  display: none;
  width: 36px; height: 36px; border-radius: 8px;
  background: none; border: 1px solid var(--border);
  align-items: center; justify-content: center;
  color: var(--t2); cursor: pointer; flex-shrink: 0;
}
.tn-mob-toggle svg { width: 20px; height: 20px; }
@media (max-width: 768px) {
  .tn-mob-toggle { display: flex; }
}

.tn-mob-drawer {
  display: none; position: fixed; inset: 0; z-index: 9000;
}
.tn-mob-drawer.open { display: flex; }
.tn-mob-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
}
.tn-mob-panel {
  position: relative; width: 280px; height: 100%;
  background: #fff; box-shadow: 4px 0 24px rgba(0,0,0,.15);
  display: flex; flex-direction: column; overflow-y: auto;
  animation: mobSlideIn .25s ease;
}
@keyframes mobSlideIn {
  from { transform: translateX(-100%); }
  to   { transform: none; }
}
.tn-mob-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 8px;
  background: #f3f4f6; border: none; display: flex;
  align-items: center; justify-content: center;
  color: #374151; cursor: pointer; font-size: 16px;
}
.tn-mob-hdr {
  padding: 20px; border-bottom: 1px solid #e5e7eb;
  display: flex; align-items: center; gap: 10px;
}
.tn-mob-hdr-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg,#2563eb,#7c3aed);
  display: flex; align-items: center; justify-content: center;
}
.tn-mob-hdr-mark svg { width: 20px; height: 20px; color: #fff; }
.tn-mob-hdr-name {
  font-family: 'Inter', sans-serif;
  font-size: 18px; font-weight: 800; color: #0a1628;
}
.tn-mob-hdr-name em { font-style: normal; color: #6366f1; }
.tn-mob-links { padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.tn-mob-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: #374151;
  text-decoration: none; transition: .15s;
}
.tn-mob-link:hover, .tn-mob-link.active {
  background: linear-gradient(90deg, rgba(99,102,241,.08), transparent);
  color: #4338ca;
}
.tn-mob-link svg { width: 18px; height: 18px; color: #6b7280; flex-shrink: 0; }
.tn-mob-link.active svg { color: #6366f1; }
.tn-mob-sep {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #9ca3af; padding: 12px 14px 4px;
}
.tn-mob-footer {
  margin-top: auto; padding: 16px; border-top: 1px solid #e5e7eb;
  display: flex; flex-direction: column; gap: 8px;
}
.tn-mob-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 10px; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: .2s;
}
.tn-mob-cta.primary {
  background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff;
  box-shadow: 0 6px 14px -4px rgba(99,102,241,.4);
}
.tn-mob-cta.secondary {
  background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb;
}

/* =====================================================
   MOBÄ°L ALT NAVÄ°GASYON BARI
   ===================================================== */
.tn-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  height: 60px; background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  align-items: center; justify-content: space-around;
  padding: 0 8px;
}
@media (max-width: 768px) {
  .tn-bottom-nav { display: flex; }
  body { padding-bottom: 64px; }
}
.tn-bnav-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; text-decoration: none; font-size: 10px;
  font-weight: 600; color: #9ca3af; transition: .15s;
  padding: 6px 12px; border-radius: 8px; position: relative;
}
.tn-bnav-item svg { width: 20px; height: 20px; }
.tn-bnav-item.active { color: #6366f1; }
.tn-bnav-item.active::after {
  content: ""; position: absolute; top: -1px; left: 50%;
  transform: translateX(-50%); width: 20px; height: 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 0 0 3px 3px;
}
.tn-bnav-dot {
  position: absolute; top: 2px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444; border: 2px solid #fff;
}

/* =====================================================
   WHATSApp FAB
   ===================================================== */
.tn-whatsapp-fab {
  display: none; position: fixed;
  right: 16px; bottom: 72px; z-index: 790;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff; border: none; cursor: pointer;
  box-shadow: 0 10px 24px -6px rgba(34,197,94,.5), 0 4px 8px rgba(0,0,0,.1);
  align-items: center; justify-content: center;
  transition: transform .2s, box-shadow .2s;
  animation: waPulse 3s ease infinite;
}
.tn-whatsapp-fab:hover { transform: scale(1.08); box-shadow: 0 14px 30px -6px rgba(34,197,94,.6); }
.tn-whatsapp-fab svg { width: 26px; height: 26px; }
@keyframes waPulse {
  0%,100% { box-shadow: 0 10px 24px -6px rgba(34,197,94,.5), 0 0 0 0 rgba(34,197,94,.3); }
  50%     { box-shadow: 0 10px 24px -6px rgba(34,197,94,.5), 0 0 0 10px rgba(34,197,94,0); }
}
@media (max-width: 768px) {
  .tn-whatsapp-fab.enabled { display: flex; }
}

/* =====================================================
   TEMA RENGİ — meta theme-color
   ===================================================== */
@media (prefers-color-scheme: light) {
  :root { color-scheme: light; }
}

/* =====================================================
   HOME v5 — TAILWIND TABANLI MOBİL ÖZEL KURALLAR
   (max-width: 640px = sm breakpoint altı)
   ===================================================== */
@media (max-width: 640px) {

  /* -- HERO arka plan img: h-full + object-cover korunmali */
  header.relative.min-h-\[92vh\] > .absolute.inset-0 img.object-cover {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  /* Util-bar SVG telefon ikon buyukluk kilidi (display:none dahi olsa guvenlik) */
  .tn-util-item svg { width: 13px !important; height: 13px !important; flex-shrink: 0 !important; }

  

  /* ── HERO (home.php başlığı) ──────────────────────── */
  /* Hero'nun min-h-[92vh] mobilde fazla — daha sıkı tut */
  header.relative.min-h-\[92vh\] { min-height: 78vh !important; }

  /* Hero başlık — text-4xl (36px) mobilde 320'de kırılabilir, 28'e düşür */
  header.relative.min-h-\[92vh\] h1 {
    font-size: 1.875rem !important;   /* 30px */
    line-height: 1.1 !important;
  }
  /* Hero subtitle */
  header.relative.min-h-\[92vh\] p.text-lg { font-size: 0.95rem !important; }

  /* Hero search box — padding kompakt */
  header.relative.min-h-\[92vh\] .glass-w { padding: 1rem !important; border-radius: 1rem !important; }
  /* Tab içindeki ikonlar mobilde gizle, sadece label */
  header.relative.min-h-\[92vh\] .glass-w [role="tablist"] button { padding: 0.5rem 0.25rem !important; font-size: 0.7rem !important; gap: 4px !important; }
  header.relative.min-h-\[92vh\] .glass-w [role="tablist"] svg { width: 0.75rem !important; height: 0.75rem !important; }

  /* Hero search input/select daha kompakt + dokunmatik 44px hedefini koru */
  /* NOT: font-size burada set edilmiyor — iOS zoom onlemi (max-width:768px blogu)
     16px garantiliyor. 0.875rem (14px) birakilirsa iOS zoom tetiklenir. */
  header.relative.min-h-\[92vh\] .glass-w input,
  header.relative.min-h-\[92vh\] .glass-w select {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
    min-height: 44px !important;
  }
  header.relative.min-h-\[92vh\] .glass-w button[type="submit"] {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    min-height: 44px !important;
  }

  /* Trust badges — mobilde daha sıkı */
  header.relative.min-h-\[92vh\] .flex-wrap .text-sm { font-size: 0.75rem !important; }

  /* ── SEKSİYON BAŞLIKLARI: text-3xl lg:text-4xl ─── */
  section h2.font-display { font-size: 1.5rem !important; line-height: 1.2 !important; }
  /* font-display + text-2xl/3xl/4xl/5xl gibi varyant — about/contact hero için */
  section h1.font-display { font-size: 1.875rem !important; line-height: 1.1 !important; }

  /* ── KATEGORİ KARTLARI (4 → 2 kolon) ─────────────── */
  /* Tailwind grid-cols-2 zaten doğru — sadece padding'i ayarla */
  #categories .max-w-7xl { padding: 0 12px !important; }
  #categories .grid { gap: 0.75rem !important; }
  #categories h3.font-display { font-size: 1rem !important; }

  /* ── FEATURED TOURS ─────────────────────────────── */
  /* Filtre tabs scrollable — ok ama padding daha kompakt */
  #featured [role="tablist"] button { padding: 0.5rem 1rem !important; font-size: 0.8rem !important; }
  /* Tour cards — tek kolon zaten Tailwind ile */
  #featured .tour-card-v5 .p-5 { padding: 1rem !important; }

  /* ── SELLER CTA — Sağ dashboard preview küçük ekranda gizle ── */
  /* lg:flex-row breakpoint zaten 1024px. Mobil'de stacked çalışıyor.
     Dashboard mockup'ı 480 altında gizle (yer kaplıyor). */
  #seller .flex-col.lg\:flex-row > .flex-1.w-full.max-w-md { display: none !important; }

  /* ── 2-COL grid'leri 1 kolona indir (sadece sadece çok dar — Stats hariç) ── */
  /* About story görsel + içerik — Tailwind'de zaten lg:grid-cols-2 */
  /* Stats: grid-cols-2 lg:grid-cols-4 — mobilde 2 kalsın, ok */

  /* ── CONTACT ───────────────────────────────────── */
  /* Ana bölüm padding */
  section.bg-mute-50 .max-w-7xl { padding: 0 12px !important; }
  /* Form padding */
  .glass-w.rounded-3xl { padding: 1.25rem !important; }
  /* Form 2-kolon (name+email, phone+subject) — 320'de hala 2 kolon olursa sığar; sm:grid-cols-2 zaten 640+ aktif. Mobilde tek kolon ok. */
  /* Submit button mobilde full-width */
  form button[type="submit"].w-full.sm\:w-auto { width: 100% !important; }

  /* Map — yükseklik kısalt */
  #cntLeaflet { height: 280px !important; }

  /* FAQ accordion padding */
  section .space-y-3 button.w-full { padding: 1rem !important; }
  section .space-y-3 button.w-full span.font-display { font-size: 0.95rem !important; }

  /* ── ABOUT ─────────────────────────────────────── */
  /* Stats card padding */
  section.border-y .grid > div { padding: 0.75rem !important; }
  section.border-y .text-4xl.lg\:text-5xl { font-size: 1.875rem !important; }
  /* Values card padding */
  section.bg-mute-50 .glass-w.rounded-2xl.p-6 { padding: 1.25rem !important; }
  /* Timeline */
  .tn-tl-item { padding-left: 1.5rem !important; }
  /* Team grid 2 kolon mobilde rahat — sadece padding */
  .tn-team-card .p-5 { padding: 1rem !important; }

  /* ── LOGİN MODAL ───────────────────────────────── */
  /* Mobilde tam ekran (full-bleed) hissi ver */
  .tn-auth-overlay { padding: 0 !important; align-items: stretch !important; }
  .tn-auth-card {
    max-width: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  /* Modal scrollable body padding */
  .tn-auth-card .flex-1.overflow-y-auto {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 1.25rem !important;
  }
  /* Sticky header padding kompakt */
  .tn-auth-card .sticky .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  /* Form input dokunmatik 44 px hedefi */
  .tn-auth-card form input,
  .tn-auth-card form select,
  .tn-auth-card form textarea { min-height: 44px !important; }
  .tn-auth-card form button[type="submit"] { min-height: 48px !important; }
  /* Sosyal giriş butonları — daha kompakt */
  .tn-auth-card .grid.grid-cols-2 a {
    padding: 0.65rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

  /* ── FOOTER ────────────────────────────────────── */
  footer .max-w-7xl.py-14 { padding: 2rem 1rem !important; }
  footer .grid.gap-10 { gap: 2rem !important; }
  /* Bottom bar — mobilde dikey */
  footer .border-t .max-w-7xl { padding: 0.75rem 1rem !important; }
  footer .border-t .max-w-7xl > div { flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; }

  /* ── HOME MOBİL STICKY CTA ─────────────────────── */
  /* Bottom-nav 60px + 12px gap → bottom-20 (5rem = 80px) zaten ok */
  a.md\:hidden.fixed.left-4.right-4.coral-gradient { min-height: 48px !important; }
}

/* =====================================================
   ULTRA KÜÇÜK MOBİL (max-width: 360px) — iPhone SE
   ===================================================== */
@media (max-width: 360px) {
  .tn-wrap { padding: 0 10px !important; }

  /* Header ÅŸirket giriÅŸi metni gizle, sadece ikon */
  .tn-hdr-r > a.coral-gradient span { display: none !important; }
  .tn-hdr-r > a.coral-gradient { padding: 7px 9px !important; }

  /* Hero başlık biraz daha küçük */
  header.relative.min-h-\[92vh\] h1 { font-size: 1.625rem !important; }

  /* Marquee yazısı küçült */
  .animate-marquee .mx-8 { margin-left: 1rem !important; margin-right: 1rem !important; font-size: 0.75rem !important; }

  /* Featured tab text küçük */
  #featured [role="tablist"] button { padding: 0.4rem 0.75rem !important; font-size: 0.72rem !important; }
}

/* =====================================================
   ERİŞİLEBİLİRLİK — Reduce motion
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* =====================================================
   DUZELTMELER 2026-05-02
   ===================================================== */

/* [1] Hamburger butonu: nav 1100px'de gizleniyor ama
   toggle sadece 768px'de aciliyordu — tutarsiz.
   1100px altinda toggle goster, 1101px ustunde gizle. */
@media (max-width: 1100px) {
  .tn-mob-toggle { display: flex !important; }
}
@media (min-width: 1101px) {
  .tn-mob-toggle { display: none !important; }
}

/* [2] Mega menu sabit 640px genisligi mobilde tasiyor */
@media (max-width: 768px) {
  .tn-drop {
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    left: 0 !important;
    transform: none !important;
  }
}

/* [3] Yatay kayma korumasi — html'e de uygula (clip: scroll container oluşturmaz, sticky'yi bozmaz) */
html { overflow-x: clip !important; max-width: 100% !important; }

/* =====================================================
   IOS SAFARI OTOMATIK ZOOM ONLEMİ
   iOS Safari, font-size < 16px olan input/select/textarea
   elementlerine odaklanıldığında sayfayı zoom yapıyor.
   Sadece mobil (max-width: 768px) — masaüstünü etkilemez.
   !important: Tailwind text-sm (14px) utility'sini override eder.
   ===================================================== */
@media (max-width: 768px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Mobil header spacer - fixed header yuksekligi ile esit */
@media (max-width: 768px) {
  #tn-hdr-spacer { height: 56px; }
}
/* hp-blue mobil: spacer yuksekligini mobil header ile esitle + mavi arka plan */
@media (max-width: 768px) {
  .hp-blue #tn-hdr-spacer { height: 56px !important; background: #1557DC !important; }
}
/* ═══════════════════════════════════════════════════════════════
   HIZLI ERİŞİM ÇUBUĞU — MOBİL RESPONSIVE
   mobile.css — tn-qa-* bileşenleri
   ═══════════════════════════════════════════════════════════════ */

/* Tablet: 2x2 grid */
@media (max-width: 768px) {
  .tn-qa-inner {
    padding: 0 16px !important;
  }
  .tn-qa-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tn-qa-item {
    padding: 18px 20px !important;
    /* Dikey ayraç mantığı: 2x2'de 1. ve 2. öğe sağ kenarda, 3. ve 4. öğe sağda değil */
    border-right: 1px solid #e8edf5 !important;
    border-bottom: 1px solid #e8edf5 !important;
  }
  /* 2x2 grid: 2. sütun (her çift öğe) sağ kenarsız */
  .tn-qa-item:nth-child(2n) {
    border-right: none !important;
  }
  /* Son iki öğe alt kenarsız */
  .tn-qa-item:nth-child(3),
  .tn-qa-item:nth-child(4) {
    border-bottom: none !important;
  }
  /* Hover yerine active state (dokunmatik) */
  .tn-qa-item:hover {
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .tn-qa-item:active {
    background: #f0f5ff !important;
    transform: scale(0.98) !important;
  }
  .tn-qa-icon-wrap {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
  }
  .tn-qa-icon-wrap svg {
    width: 22px !important;
    height: 22px !important;
  }
  .tn-qa-title {
    font-size: 14px !important;
  }
  .tn-qa-link {
    font-size: 12px !important;
  }
}

/* Küçük mobil: tek sütun (dikey liste) */
@media (max-width: 480px) {
  .tn-qa-grid {
    grid-template-columns: 1fr !important;
  }
  .tn-qa-item {
    padding: 16px 18px !important;
    border-right: none !important;
    border-bottom: 1px solid #e8edf5 !important;
    gap: 14px !important;
  }
  .tn-qa-item:last-child {
    border-bottom: none !important;
  }
  .tn-qa-icon-wrap {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  .tn-qa-icon-wrap svg {
    width: 20px !important;
    height: 20px !important;
  }
  .tn-qa-title {
    font-size: 14px !important;
    white-space: normal !important;
  }
}

/* ── Mobil alt nav cart badge ── */
.tn-bnav-cart-badge{
  position:absolute;
  top:2px;
  right:calc(50% - 18px);
  min-width:16px;
  height:16px;
  padding:0 3px;
  background:#ff5722;
  color:#fff;
  border-radius:8px;
  font-size:9px;
  font-weight:700;
  line-height:16px;
  text-align:center;
  pointer-events:none;
}

/* ── Header sağ blok taşması (mobil) ──────────────────────────────────────
   Sorun: .tn-hdr-r'deki "Üye Ol / Giriş Yap" + "Şirket Girişi" butonları
   390px'de ekranın sağından TAŞIYORDU (sağ kenar 537px) — şirket girişi hiç
   görünmüyor, üye butonu kesiliyordu. Eski mobil kurallar artık var olmayan
   sınıfları (.tn-btn-cta, a.coral-gradient) hedefliyordu, bu yüzden etkisizdi.
   Çözüm: mobilde üye butonu ikona iner, şirket girişi gizlenir — zaten
   hamburger menüsünde "Şirket Girişi" CTA'sı var. Masaüstü değişmez.
   NOT: header-presets.css `.hp-blue .tn-hdr-auth-btn { display:inline-flex!important }`
   tanımlıyor; bu yüzden seçiciler AYNI özgüllükte (0,2,0) yazılmalı. */
@media (max-width: 767px) {
  .hp-blue .tn-hdr-company-link,
  .tn-hdr-r .tn-hdr-company-link { display: none !important; }

  .hp-blue .tn-hdr-auth-btn,
  .tn-hdr-r .tn-hdr-auth-btn {
    padding: 8px 10px !important;
    font-size: 12px !important;
    gap: 5px !important;
  }
  .hp-blue .tn-hdr-auth-btn svg,
  .tn-hdr-r .tn-hdr-auth-btn svg { width: 15px !important; height: 15px !important; }

  /* Üye butonunda yalnız ikon kalsın */
  .hp-blue button.tn-hdr-auth-btn > span,
  .tn-hdr-r button.tn-hdr-auth-btn > span { display: none !important; }
  .hp-blue button.tn-hdr-auth-btn,
  .tn-hdr-r button.tn-hdr-auth-btn { padding: 8px 10px !important; }

  .tn-hdr-r { gap: 6px !important; min-width: 0; }
}

/* ── Dokunma hedefi: footer ve yardımcı linkler (mobil) ────────────────
   Footer linkleri 16px yükseklikte düz metin linkleriydi; parmakla isabet
   ettirmek zor (WCAG 2.2 / HIG: en az ~44px). Masaüstünde değişiklik yok. */
@media (max-width: 767px) {
  footer ul li > a {
    display: inline-block;
    padding: 9px 0;
    min-height: 40px;
    line-height: 22px;
  }
  footer .tn-foot-alt-secici select { min-height: 40px; }
  /* "Ana Sayfaya Dön" gibi tekil yardımcı linkler */
  a.link-underline,
  a.inline-flex.items-center { min-height: 36px; }
}