/* mobile.css */

/*
 * ═══════════════════════════════════════════════════════════════════
 *  AVGUST NAVSEGDA — MOBILE.CSS
 *  Tüm cihazlar için kapsamlı responsive CSS
 *
 *  Breakpoints:
 *   xs  : 0–374px      (iPhone SE, Galaxy A03)
 *   sm  : 375–413px    (iPhone 12/13/14, Pixel 6)
 *   md  : 414–767px    (iPhone Plus/Max, Galaxy S22+)
 *   tab : 768–1023px   (iPad Mini, iPad Air, Galaxy Tab)
 *   lg  : 1024px+      (iPad Pro, Desktop)
 *
 *  Cihaz listesi (test edilmiş):
 *   iPhone SE (375×667)
 *   iPhone 12/13/14 (390×844)
 *   iPhone 14 Plus/Pro Max (430×932)
 *   Samsung Galaxy S22 (360×780)
 *   Samsung Galaxy S22+ (384×820)
 *   Samsung Galaxy A54 (360×800)
 *   Google Pixel 6 (412×915)
 *   Google Pixel 7 (412×915)
 *   OnePlus 11 (412×919)
 *   Xiaomi 13 (393×851)
 *   iPad Mini 6 (768×1024)
 *   iPad Air 5 (820×1180)
 *   iPad Pro 11 (834×1194)
 * ═══════════════════════════════════════════════════════════════════
 */

/* ─── TEMEL RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* iOS input zoom önleme — 16px altı font zoom yapar */
@media (max-width: 767px) {
  input, select, textarea, button {
    font-size: 16px !important;
  }
  /* Ama küçük butonlarda görsel küçüklük için */
  .admin-btn-sm, .admin-nav-badge {
    font-size: 12px !important;
  }
}

/* Dokunma hedefleri — mobile-v2.css içinde .tap-target ile kapsamlı */
@media (max-width: 767px) {
  .admin-btn-sm {
    min-height: 32px;
    min-width: 32px;
  }
}

/* Yatay scroll engelle */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Safe area (notch, home indicator) */
@supports (padding: env(safe-area-inset-bottom)) {
  .mobile-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sh-cart-float, .cart-float {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .admin-content {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* ─── GENEL SAYFA ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* padding-bottom: mobile-v2.css — --mobile-nav-h */
  .container { padding: 0 16px; }
  .section { padding: 48px 0; }
  .section-title { font-size: 1.6rem; }
  .section-subtitle { font-size: 0.9rem; }
}

/* ─── HEADER (Ana site) ───────────────────────────────────────── */
@media (max-width: 767px) {
  .header-inner {
    height: 56px;
    padding: 0 16px;
  }
  .logo { font-size: 1.1rem; }
  .logo-icon { font-size: 1.3rem; }
  .nav { display: none; }
  .burger { display: flex; }
  .header-actions { gap: 4px; }
  .btn-icon { width: 40px; height: 40px; }
}

/* Mobil menü overlay */
@media (max-width: 767px) {
  .mobile-menu {
    position: fixed;
    inset: 0;
    background: rgba(26,18,8,0.95);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .mobile-menu.open { transform: translateX(0); }
  .mobile-menu a {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 12px 32px;
    border-radius: 50px;
    transition: background 0.2s;
  }
  .mobile-menu a:hover { background: rgba(200,169,110,0.2); }
}

/* ─── MOBILE NAV (Alt navigasyon) ────────────────────────────── */
.mobile-nav {
  display: none;
}
@media (max-width: 767px) {
  .mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(200,169,110,0.15);
    z-index: 500;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    box-shadow: 0 -4px 20px rgba(26,18,8,0.08);
  }
  .mobile-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 12px;
    color: #8a7a6a;
    font-size: 0.65rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: color 0.2s;
    min-width: 56px;
    min-height: 44px;
    justify-content: center;
  }
  .mobile-nav .nav-item.active,
  .mobile-nav .nav-item:hover { color: #c8a96e; }
  .mobile-nav .nav-item span { font-size: 0.62rem; }
}

/* ─── HERO ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding-top: 8px;
    padding-bottom: 20px;
  }
  .hero-content {
    padding: 12px 16px 0;
    text-align: center;
    gap: 14px;
  }
  .hero-badge { margin-bottom: 10px; }
  .hero-title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .hero-desc { margin: 0 0 14px; }
  .hero-subtitle { font-size: 0.9rem; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hero-stat-num { font-size: 1.4rem; }
  .hero-stat-label { font-size: 0.65rem; }
  .hero-blob-1, .hero-blob-2, .hero-blob-3 { display: none; }
}

/* ─── CATALOG / PRODUCT GRID ─────────────────────────────────── */
@media (max-width: 767px) {
  .products-grid,
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 16px;
  }
  .product-card { border-radius: 14px; }
  .product-card-img { aspect-ratio: 1; }
  .product-card-body { padding: 10px; }
  .product-card-name { font-size: 0.82rem; }
  .product-card-price { font-size: 0.95rem; }
}

@media (max-width: 374px) {
  .products-grid,
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 12px;
  }
}

/* ─── SHOP PAGE ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sh-content { padding: 12px; }
  .sh-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sh-hero-inner { padding: 20px 16px; }
  .sh-name { font-size: 1.2rem; }
  .sh-desc { font-size: 0.8rem; }
  .sh-cart-float {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
  }
  .sh-cart-float-btn { padding: 12px 24px; font-size: 0.85rem; }
  .sh-sheet { border-radius: 20px 20px 0 0; }
  .sh-tabs { top: 56px; }
}

@media (max-width: 374px) {
  .sh-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sh-card-body { padding: 8px; }
  .sh-card-btn { font-size: 0.72rem; padding: 6px; }
}

/* ─── ACCOUNT PAGE ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .acc-layout {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }
  .acc-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
  }
  .acc-nav-item {
    flex: 1;
    min-width: 120px;
    text-align: center;
    justify-content: center;
    padding: 10px 8px;
    font-size: 0.8rem;
  }
  .acc-panel { padding: 16px; border-radius: 16px; }
  .acc-panel-title { font-size: 1rem; }
}

/* ─── SUPPORT PAGE ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sp-header { height: 52px; padding: 0 12px; }
  .sp-chat { padding: 12px; gap: 8px; }
  .sp-msg { max-width: 90%; }
  .sp-bubble { padding: 8px 12px; }
  .sp-bubble-text { font-size: 0.85rem; }
  .sp-bubble-img { max-width: 180px; max-height: 180px; }
  .sp-input-area { padding: 8px 10px; }
  .sp-textarea { font-size: 0.9rem; padding: 8px 12px; }
  .sp-attach-btn, .sp-send-btn { width: 38px; height: 38px; }
}

/* ─── ADMIN / SHOP PANEL ──────────────────────────────────────── */

/* Sidebar — mobilde gizli, toggle ile açılır */
@media (max-width: 1023px) {
  .admin-sidebar {
    transform: translateX(-100%);
    z-index: 200;
    width: 280px;
  }
  .admin-sidebar.open {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,0.3);
  }
  .admin-main {
    margin-left: 0 !important;
    width: 100%;
  }
  .admin-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 199;
    backdrop-filter: blur(2px);
  }
  .admin-sidebar-overlay.show,
  .admin-sidebar-overlay.active { display: block; }
}

/* Topbar */
@media (max-width: 767px) {
  .admin-topbar {
    padding: 0 12px;
    height: 52px;
    gap: 8px;
  }
  .admin-topbar-title {
    font-size: 0.9rem;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-topbar-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 55%; }
  .admin-topbar-actions .admin-btn { padding: 7px 10px; font-size: 0.78rem; white-space: nowrap; }
  #shopSidebarToggle, #sidebarToggle { display: flex !important; }
}

/* Content area */
@media (max-width: 767px) {
  .admin-content { padding: 12px; }
  .admin-page { padding: 0; }
}

/* Stats grid */
@media (max-width: 767px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .stat-card { padding: 14px; border-radius: 14px; }
  .stat-card-icon { font-size: 1.4rem; margin-bottom: 8px; }
  .stat-card-value { font-size: 1.3rem; }
  .stat-card-label { font-size: 0.72rem; }
  .stat-card-change { font-size: 0.68rem; }
}

@media (max-width: 374px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 10px; }
  .stat-card-value { font-size: 1.1rem; }
}

/* Admin grid */
@media (max-width: 767px) {
  .admin-grid-2,
  .admin-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}

/* Admin card */
@media (max-width: 767px) {
  .admin-card { padding: 14px; border-radius: 16px; }
  .admin-card-header {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }
  .admin-card-title { font-size: 0.9rem; }
}

/* Tables — yatay scroll */
@media (max-width: 767px) {
  .admin-table-wrap,
  .admin-card > .admin-table,
  div[style*="overflow-x:auto"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-table { min-width: 480px; }
  .admin-table th { padding: 8px 10px; font-size: 0.68rem; }
  .admin-table td { padding: 10px; font-size: 0.82rem; }
  .admin-table td img { width: 36px; height: 36px; }
}

/* Buttons */
@media (max-width: 767px) {
  .admin-btn { padding: 8px 12px; font-size: 0.82rem; }
  .admin-btn-sm { padding: 5px 10px; font-size: 0.72rem; }
}

/* Forms */
@media (max-width: 767px) {
  .form-input-admin { padding: 10px 12px; font-size: 0.9rem; }
  .setting-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .setting-row .form-input-admin,
  .setting-row input[type="text"],
  .setting-row input[type="email"],
  .setting-row input[type="number"],
  .setting-row select {
    width: 100% !important;
  }
}

/* Modal */
@media (max-width: 767px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: 24px 24px 0 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    max-height: 92vh;
  }
  .modal-title { font-size: 1.05rem; }
}

/* Toast */
@media (max-width: 767px) {
  .toast-container {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    left: 12px;
  }
  .toast { max-width: 100%; font-size: 0.82rem; }
}

/* Shops grid */
@media (max-width: 767px) {
  .shops-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* Chart bars */
@media (max-width: 767px) {
  .chart-bar-label { width: 60px; font-size: 0.72rem; }
  .chart-bar-val { width: 50px; font-size: 0.72rem; }
}

/* ─── PLATFORM EARNINGS PAGE ──────────────────────────────────── */
@media (max-width: 767px) {
  #page-platform-earnings .stats-grid,
  #spage-earnings .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pe-period-btn { padding: 6px 10px; font-size: 0.78rem; }
  .support-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  #supportChatList { max-height: 220px; }
}

/* ─── PRODUCT MODAL ───────────────────────────────────────────── */
@media (max-width: 767px) {
  #productFormGrid {
    grid-template-columns: 1fr !important;
  }
  #productModal .modal { padding: 16px; }
}

/* ─── SELLER ONBOARDING WIZARD ────────────────────────────────── */
@media (max-width: 767px) {
  .sw-wrap { padding: 16px 12px; }
  .sw-card { padding: 16px; border-radius: 14px; }
  .sw-terms { max-height: 220px; font-size: 0.82rem; }
  .sw-steps { gap: 0; }
  .sw-step-line { width: 20px; }
  .sw-step span { display: none; }
  .sw-grid2 { grid-template-columns: 1fr; }
}

/* ─── DOCUMENT CARDS ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .doc-card { padding: 14px; border-radius: 12px; }
  .doc-icon { font-size: 1.5rem; margin-bottom: 6px; }
  .doc-title { font-size: 0.85rem; }
  .doc-desc { font-size: 0.72rem; }
}

/* ─── WORK HOURS FORM ─────────────────────────────────────────── */
@media (max-width: 767px) {
  #workHoursForm > div {
    grid-template-columns: 90px 1fr 1fr !important;
    gap: 6px;
  }
  #workHoursForm > div > label:last-child {
    grid-column: 1 / -1;
  }
}

/* ─── CAPACITY PAGE ───────────────────────────────────────────── */
@media (max-width: 767px) {
  #capacityInfo > div {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
  }
}

/* ─── HEATMAP ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  #adminHeatmapWrap > div,
  .heatmap-grid {
    min-width: 560px;
  }
}

/* ─── TRACK PAGE ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .track-steps { flex-direction: column; gap: 0; }
  .track-step { flex-direction: row; gap: 12px; }
  .track-step-line { width: 2px; height: 40px; margin: 0 auto; }
}

/* ─── INDEX / ANA SAYFA ───────────────────────────────────────── */
@media (max-width: 767px) {
  /* Features section */
  .features-grid { grid-template-columns: 1fr; gap: 12px; }
  .feature-card { padding: 20px; border-radius: 16px; }

  /* How it works */
  .how-steps { grid-template-columns: 1fr; gap: 16px; }

  /* Reviews */
  .reviews-grid { grid-template-columns: 1fr; }

  /* CTA */
  .cta-actions { flex-direction: column; gap: 10px; }
  .cta-actions .btn { width: 100%; text-align: center; justify-content: center; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ─── TABLET (768–1023px) ─────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { padding: 0 24px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid-2 { grid-template-columns: 1fr 1fr; }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .sh-grid { grid-template-columns: repeat(3, 1fr); }
  .shops-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-content { padding: 16px; }
  .admin-topbar { padding: 0 16px; }
  .modal-overlay { padding: 20px; }
  .modal { border-radius: 20px; }
  /* Sidebar toggle göster */
  #sidebarToggle, #shopSidebarToggle { display: flex !important; }
}

/* ─── KÜÇÜK TELEFON (< 375px) ────────────────────────────────── */
@media (max-width: 374px) {
  .admin-topbar-title { max-width: 100px; font-size: 0.82rem; }
  .admin-card { padding: 10px; }
  .admin-card-title { font-size: 0.82rem; }
  .admin-btn { padding: 7px 10px; font-size: 0.78rem; }
  .stat-card-value { font-size: 1rem; }
  .modal { padding: 14px; }
  .sh-cart-float-btn { padding: 10px 18px; font-size: 0.8rem; }
}

/* ─── LANDSCAPE MOD (yatay telefon) ──────────────────────────── */
@media (max-width: 767px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 80px 0 40px; }
  .admin-sidebar { width: 220px; }
  .sh-hero { min-height: auto; }
  .sh-hero-inner { padding: 16px; }
  .sp-chat { max-height: calc(100vh - 160px); }
  .modal { max-height: 85vh; }
}

/* ─── HIGH DPI / RETINA ───────────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .admin-sidebar { box-shadow: 2px 0 12px rgba(0,0,0,0.12); }
  .stat-card::before { height: 2px; }
}

/* ─── DARK MODE (sistem tercihi) ─────────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Sadece admin/shop panel dark mode — kullanıcı toggle'ı varsa JS override eder */
  .admin-layout.auto-dark {
    --admin-bg: #0f0e0c;
    --admin-card-bg: #1a1814;
    --admin-border: rgba(200,169,110,0.1);
    --mid: #f0e8d8;
    --gray: #a09080;
    --gray-light: #2a2520;
    --light: #1a1814;
  }
}

/* ─── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── PRINT ───────────────────────────────────────────────────── */
@media print {
  .admin-sidebar,
  .admin-topbar,
  .mobile-nav,
  .sh-cart-float,
  .toast-container,
  .admin-btn,
  #shopSupportFloatBtn {
    display: none !important;
  }
  .admin-main { margin-left: 0 !important; }
  .admin-content { padding: 0; }
  body { background: #fff; }
  .admin-card { box-shadow: none; border: 1px solid #ddd; }
}

/* ─── UTILITY CLASSES ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
  .show-mobile-flex { display: flex !important; }
  .text-center-mobile { text-align: center !important; }
  .full-width-mobile { width: 100% !important; }
  .p-mobile { padding: 12px !important; }
  .gap-mobile { gap: 8px !important; }
}
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }
}

/* ─── SCROLL SNAP (ürün listesi yatay kaydırma) ──────────────── */
@media (max-width: 767px) {
  .scroll-snap-x {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    padding: 4px 16px;
  }
  .scroll-snap-x::-webkit-scrollbar { display: none; }
  .scroll-snap-x > * {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

/* ─── FLOATING ACTION BUTTON ──────────────────────────────────── */
@media (max-width: 767px) {
  #shopSupportFloatBtn {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
  }
}

/* ─── ADMIN NAV BADGE ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .admin-nav-badge {
    min-width: 16px;
    height: 16px;
    font-size: 0.6rem;
    padding: 0 4px;
  }
}

/* ─── NETWORK INFO BADGE ──────────────────────────────────────── */
@media (max-width: 767px) {
  #networkInfoBadge,
  #shopNetworkBadge {
    display: none !important;
  }
}

/* ─── PRODUCT CARD HOVER → ACTIVE (dokunmatik) ───────────────── */
@media (hover: none) {
  .pcard:hover,
  .sh-card:hover,
  .shop-card:hover,
  .doc-card:hover,
  .stat-card:hover {
    transform: none;
    box-shadow: none;
  }
  .pcard:active { transform: scale(0.97); }
  .sh-card:active { transform: scale(0.97); }
  .doc-card:active { transform: scale(0.97); }
  .admin-btn:active { opacity: 0.8; }
}

/* ─── KEYBOARD VISIBLE (sanal klavye açık) ───────────────────── */
@media (max-height: 500px) and (max-width: 767px) {
  .mobile-nav { display: none; }
  .sh-cart-float { bottom: 16px; }
  .sp-chat { max-height: calc(100vh - 120px); }
}

/* ─── ADMIN SIDEBAR OVERLAY (mobil) ──────────────────────────── */
.admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 199;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.admin-sidebar-overlay.active { display: block; }

/* Sidebar open class */
@media (max-width: 1023px) {
  .admin-sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 8px 0 40px rgba(0,0,0,0.3);
  }
}

/* ─── ADMIN MAIN — mobilde overflow düzelt ────────────────────── */
@media (max-width: 1023px) {
  .admin-main {
    max-height: 100vh !important;
    overflow: hidden !important;
  }
  .admin-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── SHOP PANEL SIDEBAR TOGGLE ──────────────────────────────── */
@media (max-width: 1023px) {
  #shopSidebar {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  #shopSidebar.open {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,0.3);
  }
}

/* ─── TRACK PAGE (sipariş takip) ─────────────────────────────── */
@media (max-width: 767px) {
  .track-wrap { padding: 80px 12px 40px; }
  .track-card { padding: 20px 16px; border-radius: 16px; }
  .track-id { font-size: 1rem; }
  .track-status { font-size: 0.85rem; }
  .track-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 20px 0;
  }
  .track-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    position: relative;
  }
  .track-step-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 1;
  }
  .track-step-line {
    position: absolute;
    left: 17px;
    top: 48px;
    width: 2px;
    height: calc(100% - 12px);
    background: #e0d8cc;
  }
  .track-step-label { font-size: 0.85rem; font-weight: 600; }
  .track-step-time { font-size: 0.75rem; color: #8a7a6a; }
}

/* ─── CATALOG PAGE ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .catalog-hero { padding: 80px 0 32px; }
  .catalog-hero h1 { font-size: 1.6rem; }
  .catalog-filters {
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
  }
  .catalog-filters select,
  .catalog-filters input {
    width: 100%;
  }
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 12px;
  }
}

/* ─── PRODUCT PAGE ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .product-page { padding: 72px 0 40px; }
  .product-layout {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .product-gallery { border-radius: 16px; }
  .product-gallery-main { aspect-ratio: 1; border-radius: 16px; }
  .product-gallery-thumbs { gap: 8px; }
  .product-gallery-thumb { width: 60px; height: 60px; border-radius: 10px; }
  .product-info { padding: 0 16px; }
  .product-title { font-size: 1.3rem; }
  .product-price { font-size: 1.6rem; }
  .product-actions { flex-direction: column; gap: 10px; }
  .product-actions .btn { width: 100%; justify-content: center; }
  .breadcrumb { padding: 0 16px; font-size: 0.78rem; }
  .related-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ─── INDEX PAGE ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Hero */
  .hero-inner {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 24px;
    padding: 0 16px;
  }
  .hero-image { display: none; }
  .hero-title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .hero-desc { font-size: 0.9rem; }
  .hero-btns { flex-direction: column; gap: 10px; }
  .hero-btns .btn { width: 100%; justify-content: center; }
  .hero-stats { justify-content: center; gap: 16px; }

  /* Shops section */
  .shops-section .shops-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 16px; }

  /* Features */
  .features-section .features-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 16px; }
  .feature-card { padding: 18px; }
  .feature-icon { font-size: 1.8rem; }
  .feature-title { font-size: 1rem; }

  /* How it works */
  .how-section .how-grid { grid-template-columns: 1fr; gap: 16px; padding: 0 16px; }
  .how-step { text-align: center; }
  .how-step-num { margin: 0 auto 12px; }

  /* Reviews */
  .reviews-section .reviews-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 16px; }

  /* CTA */
  .cta-section { padding: 48px 16px; text-align: center; }
  .cta-title { font-size: 1.6rem; }
  .cta-btns { flex-direction: column; gap: 10px; }
  .cta-btns .btn { width: 100%; justify-content: center; }

  /* Footer */
  .footer { padding: 40px 0 20px; }
  .footer-inner { padding: 0 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-logo { font-size: 1.1rem; }
  .footer-links { gap: 8px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; font-size: 0.78rem; }
}

/* ─── ACCOUNT PAGE ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .acc-wrap { padding: 72px 0 80px; }
  .acc-header { padding: 0 16px; gap: 12px; }
  .acc-avatar { width: 52px; height: 52px; font-size: 1.3rem; }
  .acc-name { font-size: 1.1rem; }
  .acc-layout { padding: 0 12px; }
  .acc-panel { padding: 16px; }
  .acc-panel-title { font-size: 0.95rem; }

  /* Orders list */
  .acc-order-card { padding: 14px; border-radius: 12px; }
  .acc-order-header { flex-wrap: wrap; gap: 6px; }
  .acc-order-id { font-size: 0.82rem; }
  .acc-order-items { font-size: 0.82rem; }
  .acc-order-total { font-size: 1rem; }
}

/* ─── SUPPORT PAGE ────────────────────────────────────────────── */
@media (max-width: 767px) {
  body:has(.sp-header) {
    overflow: hidden;
    height: 100dvh;
  }
  .sp-msg.mine { max-width: 88%; }
  .sp-msg.theirs { max-width: 88%; }
  .sp-bubble-img { max-width: 160px; max-height: 160px; }
}

/* ─── ADMIN TOPBAR — mobil buton gizleme ─────────────────────── */
@media (max-width: 480px) {
  /* Sadece en önemli butonları göster */
  .admin-topbar-actions > *:not(#darkModeBtn):not(#shopDarkModeBtn):not(#sidebarToggle):not(#shopSidebarToggle):not(#adminUserArea):not(#shopUserArea):not(#networkInfoBadge):not(#shopNetworkBadge) {
    display: none !important;
  }
  /* Arama butonunu göster */
  .admin-topbar-actions > button[onclick*="openGlobalSearch"] {
    display: inline-flex !important;
  }
}

/* ─── ADMIN TOPBAR — tablet ──────────────────────────────────── */
@media (min-width: 481px) and (max-width: 767px) {
  .admin-topbar-actions > .admin-btn:not(.admin-btn-primary) {
    display: none !important;
  }
  .admin-topbar-actions > button[onclick*="openGlobalSearch"],
  .admin-topbar-actions > button[onclick*="toggleDarkMode"],
  .admin-topbar-actions > button[onclick*="toggleShopDarkMode"] {
    display: inline-flex !important;
  }
}

/* ─── SHOP PANEL — spage overflow ────────────────────────────── */
@media (max-width: 1023px) {
  .admin-page { overflow-y: auto; }
}

/* ─── GLOBAL SEARCH OVERLAY ──────────────────────────────────── */
@media (max-width: 767px) {
  #globalSearchOverlay .modal,
  .global-search-modal {
    border-radius: 0;
    max-height: 100vh;
    height: 100vh;
    margin: 0;
  }
  #globalSearchInput { font-size: 1rem; }
}

/* ─── STATS GRID — 4 kart için özel ─────────────────────────── */
@media (max-width: 374px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card-value { font-size: 1rem; }
  .stat-card-label { font-size: 0.65rem; }
}

/* ─── FORM GRID — mobilde tek sütun ──────────────────────────── */
@media (max-width: 767px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  /* İstisna: 2 sütun kalması gerekenler */
  .stats-grid,
  .sw-grid2,
  .admin-grid-2-keep {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─── SCROLL TO TOP BUTTON ────────────────────────────────────── */
@media (max-width: 767px) {
  .scroll-top-btn {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 0.9rem !important;
  }
}

/* ─── CHART BAR WRAP ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .chart-bar-wrap { padding: 4px 0; }
  .chart-bar-row { gap: 6px; }
  .chart-bar-label { width: 50px; font-size: 0.7rem; }
  .chart-bar-val { width: 45px; font-size: 0.7rem; }
}

/* ─── MODAL — tam ekran mobil ────────────────────────────────── */
@media (max-width: 480px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal {
    border-radius: 20px 20px 0 0;
    max-height: 95vh;
    padding: 20px 14px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* ─── PRODUCT MODAL ───────────────────────────────────────────── */
@media (max-width: 767px) {
  #productModal .modal {
    padding: 16px 12px;
  }
  #productModal .form-group-admin {
    margin-bottom: 10px;
  }
}

/* ─── EARNINGS / DOCS CARDS ──────────────────────────────────── */
@media (max-width: 767px) {
  #spage-earnings .admin-grid-2,
  #page-platform-earnings .admin-grid-2 {
    grid-template-columns: 1fr !important;
  }
  #spage-import-export .admin-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ─── WORK HOURS FORM ─────────────────────────────────────────── */
@media (max-width: 480px) {
  #workHoursForm > div {
    grid-template-columns: 80px 1fr 1fr !important;
    gap: 4px;
    font-size: 0.8rem;
  }
}

/* ─── CAPACITY INFO ───────────────────────────────────────────── */
@media (max-width: 480px) {
  #capacityInfo > div {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px;
  }
  #capacityInfo > div > div {
    padding: 10px 8px;
  }
}

/* ─── LOYALTY / BLACKLIST TABLES ─────────────────────────────── */
@media (max-width: 767px) {
  #loyaltyTable,
  #blacklistTable {
    min-width: 400px;
  }
}

/* ─── REVENUE FORECAST ────────────────────────────────────────── */
@media (max-width: 767px) {
  #page-revenue-forecast .admin-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ─── ADVANCED SEARCH ─────────────────────────────────────────── */
@media (max-width: 767px) {
  #page-advanced-search > .admin-card > div:first-of-type {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ─── SUPPORT CHAT LAYOUT ─────────────────────────────────────── */
@media (max-width: 767px) {
  #supportChatView {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #supportChatView #sMsgList {
    padding: 12px 10px 8px !important;
  }
  #supportChatView textarea#sAdminMsgInput {
    font-size: 16px !important;
  }
  #supportListView .admin-card-header {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }
  #supportListView .admin-card-header > div:last-child {
    flex-wrap: wrap;
  }
  #supportListView .admin-search {
    width: 100% !important;
  }
  #adminProductModal .modal {
    max-width: calc(100vw - 24px) !important;
    margin: 12px;
  }
  #productModal .modal {
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin-top: auto;
  }
  #productModal.modal-overlay.open {
    align-items: flex-end;
  }
  #coverPickModal .modal {
    max-width: calc(100vw - 24px) !important;
  }
}

/* ─── SELLER WIZARD — küçük ekran ────────────────────────────── */
@media (max-width: 374px) {
  .sw-wrap { padding: 12px 8px; }
  .sw-card { padding: 12px; }
  .sw-terms { max-height: 180px; font-size: 0.78rem; }
  .sw-btn { padding: 11px; font-size: 0.88rem; }
}

/* ─── TOPBAR TITLE — overflow ────────────────────────────────── */
@media (max-width: 767px) {
  .admin-topbar-title,
  #pageTitle,
  #shopPageTitle {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
  }
}

/* ─── SIDEBAR NAV — dokunma alanı ────────────────────────────── */
@media (max-width: 1023px) {
  .admin-nav-item {
    padding: 13px 14px;
    font-size: 0.875rem;
  }
  .admin-nav-section {
    padding: 14px 10px 5px;
  }
}

/* ─── DARK MODE — admin panel ────────────────────────────────── */
.dark-mode .admin-content,
.dark-mode .admin-main {
  background: #0f0e0c;
}
.dark-mode .admin-card {
  background: #1a1814;
  border-color: rgba(200,169,110,0.1);
}
.dark-mode .admin-table td {
  border-color: rgba(200,169,110,0.08);
  color: #e0d8c8;
}
.dark-mode .admin-table tr:hover td {
  background: rgba(200,169,110,0.05);
}
.dark-mode .form-input-admin {
  background: #2a2520;
  border-color: rgba(200,169,110,0.15);
  color: #e0d8c8;
}
.dark-mode .form-input-admin:focus {
  background: #1a1814;
}
.dark-mode .admin-topbar {
  background: rgba(15,14,12,0.95);
  border-color: rgba(200,169,110,0.1);
}
.dark-mode .stat-card {
  background: #1a1814;
  border-color: rgba(200,169,110,0.1);
}
.dark-mode .stat-card-value { color: #f0e8d8; }
.dark-mode .stat-card-label { color: #a09080; }
.dark-mode .admin-btn-secondary {
  background: #2a2520;
  color: #e0d8c8;
  border-color: rgba(200,169,110,0.15);
}
.dark-mode .sort-select {
  background: #2a2520;
  color: #e0d8c8;
  border-color: rgba(200,169,110,0.15);
}
.dark-mode .admin-search {
  background: #2a2520;
  border-color: rgba(200,169,110,0.15);
}
.dark-mode .admin-search input { color: #e0d8c8; }
.dark-mode .setting-row { border-color: rgba(200,169,110,0.08); }
.dark-mode .modal { background: #1a1814; }
.dark-mode .modal-title { color: #f0e8d8; }
.dark-mode .toast { background: rgba(240,232,216,0.95); color: #1a1208; }

/* ─── CAPACITOR / WEBVIEW SAFE AREA ──────────────────────────── */
/* Android status bar safe area — prevents header overlap */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 767px) {
    .header {
      padding-top: env(safe-area-inset-top, 0px);
    }
    body:has(.header) {
      padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    }
  }
}

/* Product card footer — never wrap on mobile */
@media (max-width: 480px) {
  .product-footer {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .btn-add-cart {
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }
}

/* ═══ Homepage hero — mobile: products first, rich layout (loads after style.css) ═══ */
@media (max-width: 767px) {
  .page-home .hero {
    min-height: auto !important;
    padding: 10px 0 8px !important;
    align-items: flex-start;
    background:
      radial-gradient(130% 90% at 50% -25%, rgba(244, 114, 182, 0.22) 0%, transparent 52%),
      radial-gradient(85% 55% at 110% 35%, rgba(251, 191, 36, 0.14) 0%, transparent 45%),
      linear-gradient(180deg, #fffdfb 0%, #faf6f8 50%, #f4eff2 100%);
  }
  .page-home .hero-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 8px 16px 0;
    text-align: center;
    max-width: 100%;
  }
  .page-home .hero-visual {
    display: flex !important;
    order: -1;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 2px 0 4px;
    justify-content: center;
    position: relative;
  }
  .page-home .hero-visual.hero-visual--empty {
    display: none !important;
    margin: 0;
    padding: 0;
    min-height: 0;
  }
  .page-home .hero-card-stack {
    width: min(100%, 320px);
    height: 200px;
    margin: 0 auto;
  }
  .page-home .hero-card {
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.45) inset;
  }
  .page-home .hero-card-main {
    width: 148px;
    height: 186px;
    border-radius: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .page-home .hero-card-side1 {
    width: 96px;
    height: 124px;
    top: 6px;
    left: 2px;
    transform: rotate(-7deg);
    border-radius: 16px;
    opacity: 1;
  }
  .page-home .hero-card-side2 {
    width: 96px;
    height: 124px;
    bottom: 10px;
    right: 2px;
    transform: rotate(6deg);
    border-radius: 16px;
    opacity: 1;
  }
  .page-home .hero-float-badge {
    padding: 7px 11px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  }
  .page-home .hero-float-badge.top-right {
    top: 0;
    right: 4px;
  }
  .page-home .hero-float-badge.bottom-left {
    bottom: 4px;
    left: 4px;
  }
  .page-home .hero-text {
    margin: 0 auto;
    max-width: 400px;
  }
  .page-home .hero-badge {
    margin: 0 auto 8px;
    font-size: 0.72rem;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(190, 24, 93, 0.18);
    color: #9d174d;
    box-shadow: 0 4px 18px rgba(190, 24, 93, 0.1);
  }
  .page-home .hero-title {
    font-size: clamp(1.5rem, 6.2vw, 2rem);
    letter-spacing: -0.45px;
    line-height: 1.1;
    margin-bottom: 8px;
  }
  .page-home .hero-title .highlight {
    background: linear-gradient(135deg, #be185d, #831843);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .page-home .hero-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0 auto 14px;
    max-width: 340px;
    color: #4b5568;
  }
  .page-home .hero-actions {
    flex-direction: column;
    gap: 10px;
    padding: 0 4px 96px;
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
  }
  .page-home .hero-actions .btn-primary,
  .page-home .hero-actions .btn-secondary {
    width: 100%;
    justify-content: center;
    border-radius: 14px;
    padding: 14px 20px;
    font-size: 0.92rem;
  }
  .page-home .hero-actions .btn-primary {
    background: linear-gradient(135deg, #db2777, #9d174d);
    box-shadow: 0 10px 32px rgba(190, 24, 93, 0.28);
    border: none;
  }
  .page-home .hero-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.95);
    border: 1.5px solid rgba(190, 24, 93, 0.2);
    backdrop-filter: blur(10px);
  }
}

@media (max-width: 767px) {
  .page-home .fab,
  .page-home #scrollTopBtn.fab {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: 48px;
    height: 48px;
    z-index: 850;
  }
}

@media (max-width: 380px) {
  .page-home .hero-float-badge.bottom-left {
    display: none;
  }
  .page-home .hero-card-stack {
    height: 188px;
  }
  .page-home .hero-card-main {
    width: 138px;
    height: 174px;
  }
}

/* Ana sayfa: mobilde alt bilgi + «Как это работает» daha kompakt */
@media (max-width: 767px) {
  .how-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .how-section .section-title {
    font-size: 1.35rem !important;
  }
  .how-section .section-subtitle {
    font-size: 0.85rem !important;
    margin-bottom: 0.75rem !important;
  }
  .how-section .how-grid {
    gap: 12px !important;
  }
  .footer {
    padding: 24px 0 calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .footer-grid {
    gap: 14px !important;
  }
  .footer-brand .footer-desc {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .footer-links li {
    margin-bottom: 2px !important;
  }
  .footer-col h4 {
    font-size: 0.78rem !important;
    margin-bottom: 8px !important;
  }
  .footer-col .footer-links a {
    font-size: 0.82rem !important;
  }
}