/* =====================================================
   INOVA HESAP — MOBILE RESPONSIVE CSS
   File: assets/css/mobile.css  v2
   Tüm sayfalar için mobil uyumluluk düzeltmeleri
   ===================================================== */

/* ========== GLOBAL RESETS ========== */
html {
  overflow-x: hidden !important;
}
body {
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ========== TABLET (max-width: 1024px) ========== */
@media (max-width: 1024px) {
  .header-inner {
    padding: 10px 16px !important;
    gap: 10px !important;
  }
  .header-search {
    max-width: 400px !important;
    margin: 0 12px !important;
  }
  .nav-inner {
    padding: 0 16px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav-inner::-webkit-scrollbar { display: none; }
  
  /* My Store */
  .ms-layout { grid-template-columns: 1fr !important; }
  .ms-stats { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ========== MOBILE (max-width: 768px) ========== */
@media (max-width: 768px) {
  /* --- Global --- */
  body { padding-bottom: 72px !important; }
  section { overflow-x: hidden !important; }
  
  /* --- Header --- */
  .header-inner { padding: 8px 12px !important; gap: 8px !important; }
  .header-search { display: none !important; }
  .btn-ilan-ekle { display: none !important; }
  .logo-area img { height: 36px !important; }
  .icon-btn { width: 36px !important; height: 36px !important; }
  .balance-badge { padding: 5px 10px !important; font-size: .72rem !important; }
  .user-button { padding: 4px 8px 4px 4px !important; }
  .user-button .hidden { display: none !important; }
  .btn-login, .btn-register {
    padding: 8px 16px !important;
    font-size: .8rem !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 36px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    border-width: 2px !important;
  }
  
  /* --- Nav Bar --- */
  .nav-bar { overflow: hidden; }
  .nav-inner {
    justify-content: flex-start !important;
    padding: 0 12px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .nav-inner::-webkit-scrollbar { display: none; }
  .nav-link { padding: 10px 10px !important; font-size: .78rem !important; white-space: nowrap; flex-shrink: 0; }
  
  /* --- Mobile Search Bar --- */
  .mobile-search-bar { display: block !important; padding: 10px 14px !important; }
  
  

  
  /* --- Mobile Bottom Nav --- */
  .mobile-bottom-nav {
    display: flex !important;
    padding: 8px 0 !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
  
  /* --- Theme Toggle --- */
  .theme-toggle { bottom: 80px !important; right: 12px !important; width: 40px !important; height: 40px !important; font-size: 15px !important; }
  .whatsapp-btn { bottom: 80px !important; }

  /* ========== HOME PAGE ========== */
  
  /* Campaign Slider */
  #campaignSlider { height: 200px !important; border-radius: 12px !important; }
  #campaignSlider #sliderTrack > div { padding: 0 20px !important; }
  #campaignSlider h2 { font-size: 1.2rem !important; margin: 8px 0 4px !important; }
  #campaignSlider p { font-size: .8rem !important; margin-bottom: 12px !important; }
  #campaignSlider a[href] { padding: 8px 18px !important; font-size: .78rem !important; border-radius: 8px !important; }
  /* Hide decorative icons */
  #campaignSlider #sliderTrack > div > div:last-child[style*="font-size:120px"],
  #campaignSlider #sliderTrack > div > div[style*="position:absolute"][style*="font-size:120px"] { display: none !important; }
  /* Slider nav buttons */
  #campaignSlider > button { width: 32px !important; height: 32px !important; font-size: 12px !important; }
  
  /* Features Bar */
  .features-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .features-grid > div { padding: 10px !important; }
  .features-grid > div > div:first-child { width: 36px !important; height: 36px !important; min-width: 36px !important; }
  
  /* Category Grid */
  .cat-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
  .cat-grid a > div { height: 120px !important; border-radius: 12px !important; }
  
  /* Listing Cards Grid */
  .listings-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .listings-grid > a > div > div[style*="height:160px"] { height: 120px !important; }
  
  /* Section headings */
  section h2 { font-size: 1.15rem !important; }
  
  /* How It Works */
  .hiw-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .hiw-grid > div { padding: 20px 16px !important; }
  
  /* ========== LISTING DETAIL ========== */
  .ld-wrapper { padding: 12px !important; }
  .ld-breadcrumb { font-size: 11px !important; margin-bottom: 12px !important; }
  .ld-main { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ld-right { position: static !important; }
  .ld-product-title { font-size: 18px !important; }
  .ld-product-info { padding: 16px !important; }
  .ld-stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .ld-features, .ld-description { padding: 16px !important; }
  .ld-section-title { font-size: 16px !important; }
  .ld-price { font-size: 26px !important; }
  .ld-price .currency { font-size: 18px !important; }
  .ld-seller-card, .ld-price-card { padding: 16px !important; }
  .ld-image-section img { max-height: 280px !important; }
  .inova-toast-item { min-width: 260px !important; max-width: calc(100vw - 40px) !important; }
  .inova-modal { width: 95% !important; padding: 20px !important; }
  .inova-modal-overlay { align-items: flex-end !important; }
  
  /* ========== LISTINGS PAGE ========== */
  .lst-wrapper { padding: 12px !important; }
  .lst-header h1 { font-size: 18px !important; }
  .lst-main { grid-template-columns: 1fr !important; gap: 16px !important; }
  .lst-sidebar { order: 2 !important; }
  .lst-products { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .lst-sort-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    padding-bottom: 4px;
  }
  .lst-sort-bar::-webkit-scrollbar { display: none; }
  .lst-sort-btn { flex-shrink: 0; font-size: 12px !important; padding: 6px 12px !important; }
  .lst-card-body { padding: 10px !important; }
  .lst-card-title { font-size: 12px !important; }
  .lst-card-price { font-size: 14px !important; }
  
  /* ========== MY STORE ========== */
  .ms-wrap { padding: 0 12px !important; margin: 12px auto !important; }
  .ms-header { flex-direction: column !important; align-items: flex-start !important; }
  .ms-header h1 { font-size: 18px !important; }
  .ms-header-btns { width: 100%; }
  .ms-header-btn { flex: 1; justify-content: center; padding: 8px 12px !important; font-size: 12px !important; }
  .ms-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .ms-stat { padding: 12px !important; }
  .ms-stat .num { font-size: 18px !important; }
  .ms-layout { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ms-listing { padding: 10px 12px !important; gap: 10px !important; flex-wrap: wrap; }
  .ms-listing-img { width: 40px !important; height: 40px !important; }
  .ms-listing-title { font-size: 13px !important; }
  .ms-listing-price { font-size: 14px !important; }
  .ms-act-btn { width: 28px !important; height: 28px !important; }
  .ms-card-header { padding: 12px !important; flex-wrap: wrap; gap: 8px; }
  .ms-filters { width: 100%; }
  
  /* ========== MY ORDERS ========== */
  .orders-page { padding: 12px !important; margin: 12px auto !important; }
  .orders-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .stat-card { padding: 12px !important; }
  .stat-card .num { font-size: 20px !important; }
  .order-row { padding: 12px !important; gap: 10px !important; flex-wrap: wrap; }
  .order-info .title { font-size: 13px !important; }
  .order-price { font-size: 15px !important; }
  .order-detail { padding: 16px !important; }
  .msg-list { max-height: 300px !important; }
  .msg-item { max-width: 90% !important; font-size: 13px !important; }
  .msg-input-area { flex-direction: column; gap: 8px !important; }
  .msg-send-btn { width: 100%; justify-content: center; }
  
  /* ========== MY SALES ========== */
  .sales-page { padding: 12px !important; margin: 12px auto !important; }
  .sales-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .sale-row { padding: 12px !important; gap: 10px !important; flex-wrap: wrap; }
  .sale-info .title { font-size: 13px !important; }
  .sale-price { font-size: 15px !important; }
  .deliver-form { padding: 14px !important; }
  .deliver-form textarea { min-height: 80px !important; }
  
  /* ========== MESSAGES PAGE ========== */
  .msg-page { padding: 0 12px !important; margin: 12px auto !important; }
  .msg-page h1 { font-size: 18px !important; }
  .msg-grid { grid-template-columns: 1fr !important; min-height: auto !important; }
  .msg-convs { max-height: 280px !important; border-right: none !important; border-bottom: 1px solid var(--border-color) !important; }
  .msg-chat-body { max-height: 300px !important; }
  .msg-chat-input { padding: 10px 12px !important; }
  .msg-chat-input input { font-size: 14px !important; }
  .chat-bubble { max-width: 85% !important; }
  
  /* ========== SELLER PROFILE ========== */
  .sp-wrap { padding: 12px !important; }
  .sp-banner-content { padding: 20px 16px !important; flex-direction: column; text-align: center; }
  .sp-avatar { width: 70px !important; height: 70px !important; font-size: 28px !important; margin: 0 auto; }
  .sp-user-info { text-align: center; min-width: auto !important; }
  .sp-username { font-size: 20px !important; justify-content: center; }
  .sp-user-meta { justify-content: center; gap: 10px !important; }
  .sp-user-meta span { font-size: 11px !important; }
  .sp-rating-badge { margin: 8px auto 0; }
  .sp-banner-actions { margin-left: 0 !important; width: 100% !important; justify-content: center; }
  .sp-action-btn { flex: 1 !important; justify-content: center !important; padding: 10px 14px !important; font-size: 13px !important; }
  .sp-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .sp-stat-card { padding: 14px !important; }
  .sp-stat-num { font-size: 20px !important; }
  .sp-content { grid-template-columns: 1fr !important; gap: 16px !important; }
  .sp-listings { grid-template-columns: 1fr !important; padding: 12px !important; }
  
  /* ========== FOOTER ========== */
  footer > div { padding: 0 16px !important; }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  footer > div > div[style*="border-top"] {
    flex-direction: column !important;
    text-align: center;
    gap: 12px !important;
    padding: 16px 0 !important;
  }
  
  /* How It Works Section (in footer.php) */
  section[style*="padding:60px 0"] { padding: 32px 0 !important; }
  
  /* ========== STATIC PAGES ========== */
  .static-page,
  div[style*="max-width:900px"][style*="margin:0 auto"] { padding: 16px !important; }
  
  /* ========== MODAL ========== */
  .modal-content { width: 95% !important; margin: 5% auto !important; padding: 16px !important; }
  
  /* ========== GENERAL UTILITY ========== */
  button, a.action-btn, .btn-login, .btn-register, .ld-buy-btn, .lst-filter-btn,
  .ms-header-btn, .confirm-btn, .deliver-btn, .sp-action-btn { min-height: 44px; }
  
  /* Prevent horizontal scroll */
  .header-main, .nav-bar, main, .mobile-search-bar, footer,
  .ld-wrapper, .lst-wrapper, .ms-wrap, .orders-page, .sales-page, .msg-page, .sp-wrap {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* ========== SMALL MOBILE (max-width: 480px) ========== */
@media (max-width: 480px) {
  .header-inner { padding: 6px 10px !important; gap: 6px !important; }
  .logo-area img { height: 30px !important; }
  .icon-btn { width: 32px !important; height: 32px !important; border-radius: 8px !important; font-size: 14px !important; }
  .balance-badge { display: none !important; }
  
  /* Category Grid - 2 columns */
  .cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cat-grid a > div { height: 100px !important; }
  
  /* Listing Cards - single column */
  .listings-grid, .lst-products { grid-template-columns: 1fr !important; }
  
  /* Stats */
  .ms-stats, .orders-stats, .sales-stats, .sp-stats { grid-template-columns: repeat(2, 1fr) !important; }
  
  /* Footer - single column */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  /* Headings */
  section h2[style*="font-size:1.8rem"] { font-size: 1.3rem !important; }
  
  /* Slider */
  #campaignSlider { height: 180px !important; }
  #campaignSlider h2 { font-size: 1rem !important; }
  #campaignSlider p {
    font-size: .75rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Features grid single column */
  .features-grid { grid-template-columns: 1fr !important; }

  /* Listing detail */
  .ld-product-title { font-size: 16px !important; }
  .ld-image-section img { max-height: 220px !important; }
  
  /* Messages */
  .msg-convs { max-height: 220px !important; }
  .msg-chat-body { max-height: 250px !important; }
  
  /* Seller profile */
  .sp-username { font-size: 18px !important; }
  .sp-avatar { width: 60px !important; height: 60px !important; font-size: 24px !important; }
}

/* ========== LANDSCAPE MOBILE ========== */
@media (max-width: 768px) and (orientation: landscape) {
  #campaignSlider { height: 160px !important; }
  .msg-chat-body { max-height: 200px !important; }
  .msg-convs { max-height: 200px !important; }
}

/* ========== SAFE AREA (iPhone notch) ========== */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .mobile-bottom-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)) !important; }
  }
}

/* Desktop: no bottom padding, no mobile nav */
@media (min-width: 769px) {
  body { padding-bottom: 0 !important; }
  .mobile-bottom-nav { display: none !important; }
}


  /* Extra small - login/register buttons */
  @media (max-width: 480px) {
    .btn-login, .btn-register {
      padding: 6px 12px !important;
      font-size: .72rem !important;
      min-height: 32px !important;
    }
  }


@media (max-width: 768px) {
  /* ========== USER DROPDOWN (MOBILE) ========== */


  /* Overlay */
  .mobile-dd-overlay.active,
  .mobile-dd-overlay.show {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.5) !important;
    z-index: 9998 !important;
    pointer-events: auto !important;
  }

  /* Header right section */
  .header-right,
  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  /* Login/Register buttons */
  .btn-login, .btn-register {
    padding: 8px 16px !important;
    font-size: .8rem !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    border-width: 2px !important;
  }
}



/* ===== EXTRA SMALL SCREENS ===== */
@media (max-width: 480px) {
  .btn-login, .btn-register {
    padding: 6px 10px !important;
    font-size: .72rem !important;
    min-height: 32px !important;
  }
  

}

/* ===== FLASH TOAST ANIMATION ===== */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}