/**
 * EMLAK TEZ — MOBILE RESPONSIVENESS & TOUCH SYSTEM
 * Standartlar: rules/mobile-ui-ux-master.md & rules/mobile-senior-developer.md
 * Yetenek: skills/mobil-ui-ux-uzmani & devai-core-mimari/admin-ve-mobil-kokpit
 * Odak: Thumb-Zone ergonomisi, iOS 16px auto-zoom engelleme, 44x44pt dokunma alanı, safe-area insets
 */

/* -------------------------------------------------------------
 * 1. Global Mobile Reset & iOS Input Auto-Zoom Prevention
 * ------------------------------------------------------------- */
@media (max-width: 768px) {
  html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
  }

  /* CRITICAL: iOS Safari automatically zooms the page if input font-size is < 16px.
     Enforcing 16px eliminates this jarring zoom bug completely. */
  input,
  textarea,
  select,
  .form-input,
  .et-form input,
  .et-form textarea,
  .et-form select {
    font-size: 16px !important;
  }

  /* Give body bottom padding so sticky bottom bar never covers any content or footer */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Prevent background scrolling when mobile navigation drawer is active */
  body.mobile-nav-open {
    overflow: hidden !important;
    overscroll-behavior: contain;
  }

  /* When mobile drawer is open, smoothly tuck the bottom bar away so full drawer CTAs are reachable */
  body.mobile-nav-open .et-mobile-bar {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }
}

/* Smooth anchor scrolling offset for sticky header */
[id] {
  scroll-margin-top: 80px;
}

/* -------------------------------------------------------------
 * 2. Mobile Backdrop Overlay
 * ------------------------------------------------------------- */
.et-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 895;
  background: rgba(10, 15, 26, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.24s;
}

.et-mobile-backdrop.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* -------------------------------------------------------------
 * 3. Mobile Sticky Bottom Action Bar (Thumb-Zone Navigation)
 * ------------------------------------------------------------- */
.et-mobile-bar {
  display: none;
}

@media (max-width: 768px) {
  .et-mobile-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .et-mobile-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    min-height: 48px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 8px;
    transition: all 0.18s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }

  .et-mobile-bar-item i {
    font-size: 18px;
    transition: transform 0.18s ease, color 0.18s ease;
  }

  .et-mobile-bar-item:active {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.06);
  }

  .et-mobile-bar-item.active,
  .et-mobile-bar-item:hover {
    color: #ffffff;
  }

  .et-mobile-bar-item.active i {
    color: var(--et-accent);
  }

  /* WhatsApp Highlight Tab in Mobile Bar */
  .et-mobile-bar-whatsapp {
    color: #25d366 !important;
  }

  .et-mobile-bar-whatsapp i {
    color: #25d366 !important;
  }

  .et-mobile-bar-whatsapp .et-bar-pulse {
    position: absolute;
    top: 6px;
    right: calc(50% - 15px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.35);
    animation: etBarPulse 2s infinite;
  }

  @keyframes etBarPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0.4; }
    100% { transform: scale(1); opacity: 1; }
  }

  /* Hide the desktop floating WhatsApp button on mobile since it's directly in the thumb bar */
  .et-floating-wa {
    display: none !important;
  }
}

/* -------------------------------------------------------------
 * 4. Hero Trust Badges Responsive Grid
 * ------------------------------------------------------------- */
.et-hero-trust-badges {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.et-hero-badge-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 640px) {
  .et-hero-trust-badges {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
  }

  .et-hero-badge-item {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
  }

  .et-hero-badge-item i {
    font-size: 18px;
  }
}

/* -------------------------------------------------------------
 * 5. Comparison Table Mobile Sticky Column & Hint
 * ------------------------------------------------------------- */
.et-compare-mobile-hint {
  display: none;
}

@media (max-width: 768px) {
  .et-compare-mobile-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(249, 87, 56, 0.12);
    border-bottom: 1px solid rgba(249, 87, 56, 0.25);
    color: #ff9179;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
  }

  .et-compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .et-compare-table {
    min-width: 580px;
  }

  /* Sticky first column so feature names remain visible while scrolling packages */
  .et-compare-table th:first-child,
  .et-compare-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #111827;
    box-shadow: 3px 0 8px rgba(0, 0, 0, 0.35);
  }

  .et-compare-table th:first-child {
    background: #161e2e;
    z-index: 3;
  }
}

/* -------------------------------------------------------------
 * 6. Checkout Page Mobile Responsive System
 * ------------------------------------------------------------- */
@media (max-width: 768px) {
  .et-checkout-page {
    padding: 24px 0 50px !important;
  }

  .et-checkout-card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  .et-checkout-domain-row {
    flex-direction: column !important;
  }

  .et-checkout-domain-row button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* -------------------------------------------------------------
 * 7. Touch Targets & Ergonomics
 * ------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Buttons should have at least 44px height for finger tap comfort */
  .et-action,
  .et-plan-button,
  .et-submit,
  .et-theme-btn {
    min-height: 48px;
  }

  /* Footer adjustments */
  .et-footer-trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .et-footer-trust-pills span {
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
  }
}