/* ==========================================================
   ESPOR — RESPONSIVE / MOBILE STYLES
   Tüm sayfalar için mobil uyum (1200 / 992 / 768 / 480 breakpoint)
   ========================================================== */

/* ---------- Genel Tipografi (büyük başlıkları küçült) ---------- */
@media (max-width: 1200px) {
  .wrap { padding: 0 28px; }
  h1 { font-size: 84px; }
  h2 { font-size: 64px; }
  h3 { font-size: 36px; }
}

@media (max-width: 992px) {
  .wrap { padding: 0 22px; }
  h1 { font-size: 56px; }
  h2 { font-size: 44px; }
  h3 { font-size: 30px; }
  h4 { font-size: 16px; }
}

@media (max-width: 768px) {
  .wrap { padding: 0 16px; }
  h1 { font-size: 40px !important; line-height: 1.05 !important; }
  h2 { font-size: 32px !important; line-height: 1.05 !important; }
  h3 { font-size: 24px !important; }
  h4 { font-size: 14px; }
  .btn { padding: 12px 18px; font-size: 11px; }
  .btn--sm { padding: 8px 12px; font-size: 10px; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 14px; }
  h1 { font-size: 32px !important; }
  h2 { font-size: 26px !important; }
}

/* ---------- TICKER ---------- */
@media (max-width: 768px) {
  .ticker { height: 28px; }
  .ticker__track { gap: 28px; font-size: 10px; padding-left: 28px; animation-duration: 50s; }
}

/* ---------- HEADER ---------- */
@media (max-width: 1100px) {
  .head { height: 64px; }
  .nav__item { padding: 22px 12px; font-size: 11px; }
}

@media (max-width: 992px) {
  /* Hamburger toggle */
  .site-head .head { position: relative; }
  .nav { display: none !important; }
  .head__right { gap: 4px; }
  .head__right .btn { display: none; } /* TEKLİF AL gizle */
  .head__right .icon-btn { padding: 8px; }

  /* Hamburger butonu */
  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink);
    margin-left: 4px;
  }
  .mobile-menu-toggle span {
    width: 22px; height: 2px; background: currentColor;
    position: relative;
  }
  .mobile-menu-toggle span::before,
  .mobile-menu-toggle span::after {
    content: ''; position: absolute; left: 0;
    width: 22px; height: 2px; background: currentColor;
    transition: transform .25s;
  }
  .mobile-menu-toggle span::before { top: -7px; }
  .mobile-menu-toggle span::after  { top: 7px; }

  /* Mobil menü panel */
  .mobile-nav-panel {
    position: fixed;
    top: 0; right: 0;
    height: 100dvh;
    width: 86%;
    max-width: 380px;
    background: var(--carbon-950);
    color: var(--chalk-50);
    z-index: 9998;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.22,1,.36,1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .mobile-nav-panel.open { transform: translateX(0); }
  .mobile-nav-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9997;
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }

  .mobile-nav-panel__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 22px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .mobile-nav-panel__head h3 {
    font-family: var(--display); font-size: 20px; letter-spacing: 1px; margin: 0;
  }
  .mobile-nav-panel__close {
    background: none; border: none; color: var(--chalk-50);
    font-size: 28px; cursor: pointer; line-height: 1;
  }

  .mobile-nav-panel ul { list-style: none; padding: 0; margin: 0; }
  .mobile-nav-panel a {
    display: block; padding: 16px 22px;
    color: var(--chalk-50); text-decoration: none;
    font-family: var(--display); font-size: 16px; letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    text-transform: uppercase;
  }
  .mobile-nav-panel a:hover, .mobile-nav-panel a.active {
    color: var(--energy); background: rgba(255,255,255,.03);
  }
  .mobile-nav-panel .mn-sub {
    background: rgba(255,255,255,.04);
  }
  .mobile-nav-panel .mn-sub a {
    padding-left: 40px; font-size: 14px;
    font-family: var(--body); text-transform: none; letter-spacing: 0;
  }
  .mobile-nav-panel .mn-trigger {
    display: flex; justify-content: space-between; align-items: center;
    padding-right: 22px;
  }
  .mobile-nav-panel .mn-trigger .pm { color: var(--energy); font-size: 22px; }
}

@media (min-width: 993px) {
  .mobile-menu-toggle, .mobile-nav-panel, .mobile-nav-overlay { display: none !important; }
}

/* Mega menü - mobilde tamamen gizle (yerine mobile-nav-panel aktif) */
@media (max-width: 992px) {
  .mega { display: none !important; }
}

/* Header dropdown menü mobilde küçült */
@media (max-width: 768px) {
  .head-dd__menu { right: -10px; min-width: 150px; }
  .logo span { font-size: 16px; }
  .logo svg { width: 18px; height: 18px; }
}

/* ---------- HERO ---------- */
@media (max-width: 992px) {
  .hero__grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  .hero__score { flex-wrap: wrap; gap: 10px !important; font-size: 11px; }
  .stats-card { padding: 24px !important; }
}

@media (max-width: 768px) {
  .hero { padding: 30px 0 50px !important; }
  .hero__cta { flex-direction: column; gap: 10px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- CATEGORY GRID (HOME) ---------- */
@media (max-width: 992px) {
  .cat-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .cat-grid--bottom { grid-template-columns: 1fr !important; }
  .cat-card { padding: 24px !important; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 18px; }
}

@media (max-width: 600px) {
  .cat-grid { grid-template-columns: 1fr !important; }
  .cat-card--featured { grid-column: span 1 !important; grid-row: auto !important; }
  .club-card { padding: 24px !important; }
  .club-card h3 { font-size: 24px !important; }
}

/* ---------- FEATURED PROD (HOME) DARK CARDS ---------- */
@media (max-width: 992px) {
  .prod-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
}
@media (max-width: 480px) {
  .prod-grid { grid-template-columns: 1fr !important; }
}

/* ---------- LAST ADDED CARDS ---------- */
@media (max-width: 992px) {
  .cards { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
}
@media (max-width: 480px) {
  .cards { grid-template-columns: 1fr !important; }
}

/* ---------- STEPS ---------- */
@media (max-width: 992px) {
  .steps { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .steps .arr { display: none !important; }
}
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr !important; }
}

/* ---------- REFERENCES ---------- */
@media (max-width: 992px) {
  .refs__grid { grid-template-columns: 1fr !important; gap: 30px !important; padding: 30px !important; }
  .refs__clubs { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 480px) {
  .refs__clubs { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- CRUMB ---------- */
@media (max-width: 768px) {
  .crumb__inner { flex-wrap: wrap; gap: 8px !important; padding: 10px 0; font-size: 10px; }
  .crumb .live { display: none; }
}

/* ---------- CATEGORY HEAD ---------- */
@media (max-width: 992px) {
  .cathead__grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .cathead__stats { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------- TOOLBAR (CATEGORY) ---------- */
@media (max-width: 768px) {
  .toolbar__inner { flex-wrap: wrap; gap: 10px !important; padding: 10px 0; }
  .toolbar__count { width: 100%; }
  .toolbar__right { width: 100%; flex-wrap: wrap; }
  .view-toggle { margin-left: auto; }
}

/* ---------- CATMAIN (sidebar + grid) ---------- */
@media (max-width: 992px) {
  .catmain { grid-template-columns: 1fr !important; gap: 24px !important; }
  .catmain aside {
    position: fixed; top: 0; left: -100%;
    width: 86%; max-width: 380px;
    height: 100dvh; background: var(--chalk-50);
    z-index: 9998; padding: 22px;
    overflow-y: auto;
    transition: left .3s;
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
  }
  .catmain aside.open { left: 0; }
  .filter-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 9997; display: none;
  }
  .filter-overlay.open { display: block; }

  /* Mobil filtre toggle butonu */
  .mobile-filter-btn {
    display: inline-flex !important;
    align-items: center; gap: 6px;
    padding: 10px 14px;
    background: var(--carbon-950); color: var(--chalk-50);
    font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
    border: none; cursor: pointer; text-transform: uppercase;
    border-radius: 2px;
  }
}
@media (min-width: 993px) {
  .mobile-filter-btn, .filter-overlay { display: none !important; }
}

/* ---------- LIST VIEW (cards--list) MOBİL ---------- */
@media (max-width: 768px) {
  .cards.cards--list .prod { grid-template-columns: 1fr !important; }
  .cards.cards--list .prod__media { aspect-ratio: 16/9 !important; min-height: auto; }
  .cards.cards--list .prod__name { font-size: 18px !important; }
}

/* ---------- PAGER ---------- */
@media (max-width: 768px) {
  .pager { flex-direction: column; gap: 14px; align-items: center; padding: 20px 0; }
  .pager__nums button { padding: 8px 12px; font-size: 11px; }
}

/* ---------- DETAIL HERO ---------- */
@media (max-width: 992px) {
  .detail-hero { grid-template-columns: 1fr !important; gap: 30px !important; }
  .gallery__main { aspect-ratio: 4/3 !important; }
  .player h1 { font-size: 44px !important; }
}

@media (max-width: 768px) {
  .player__rating { flex-wrap: wrap; gap: 8px !important; font-size: 11px; }
  .player__rating .sep { display: none; }
  .price-board__row { flex-wrap: wrap; gap: 14px; }
  .price-board .big { font-size: 36px !important; }
  .qty-row { flex-direction: column; align-items: stretch !important; gap: 12px !important; }
  .qty-row .qty { justify-content: center; }
  .cta-btn { width: 100%; justify-content: center; font-size: 12px; padding: 16px; }
  .secondary-row { flex-direction: column; gap: 8px; }
  .secondary-row .btn { width: 100%; justify-content: center; }
  .facts { grid-template-columns: 1fr !important; gap: 10px !important; }
  .thumbs { gap: 6px !important; }
  .thumbs button { width: 60px !important; height: 60px !important; }
}

/* ---------- TABS ---------- */
@media (max-width: 768px) {
  .tabs__head { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
  .tabs__head .tab { white-space: nowrap; padding: 12px 16px !important; font-size: 11px !important; flex-shrink: 0; }
  .tabs__head::-webkit-scrollbar { height: 0; }
  .panel-teknik { grid-template-columns: 1fr !important; gap: 30px !important; }
  .specs { grid-template-columns: 1fr !important; }
  .install-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .warranty { grid-template-columns: 1fr !important; gap: 24px !important; }
  .warranty__grid { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- RELATED ---------- */
@media (max-width: 992px) { .related__grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 480px) { .related__grid { grid-template-columns: 1fr !important; } }

/* ---------- CART ---------- */
@media (max-width: 992px) {
  /* cart inline grid */
  .wrap > div[style*="grid-template-columns: 1fr 380px"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .cart-line { grid-template-columns: 80px 1fr !important; }
  .cart-line .qty, .cart-line > div:last-child {
    grid-column: span 2;
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* ---------- CHECKOUT ---------- */
@media (max-width: 992px) {
  /* checkout 2-col grid */
  .wrap > div[style*="grid-template-columns: 1fr 400px"] { grid-template-columns: 1fr !important; }
  .checkout-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .ck-input { font-size: 14px; padding: 14px; }
  /* form 2-col → 1-col */
  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ---------- ACCOUNT ---------- */
@media (max-width: 992px) {
  .wrap > div[style*="grid-template-columns: 280px 1fr"] { grid-template-columns: 1fr !important; gap: 24px !important; }
  /* sidebar artık üstte, kompakt */
  .wrap > div[style*="grid-template-columns: 280px 1fr"] > aside {
    position: static !important;
    background: var(--carbon-950) !important;
    padding: 20px !important;
  }
}

/* ---------- FOOTER ---------- */
@media (max-width: 992px) {
  .foot { grid-template-columns: 1fr 1fr !important; gap: 30px !important; padding: 50px 0 30px; }
  .foot__brand { grid-column: span 2; }
}
@media (max-width: 600px) {
  .foot { grid-template-columns: 1fr !important; gap: 30px !important; }
  .foot__brand { grid-column: span 1; }
  .foot__bottom { flex-direction: column; gap: 10px; text-align: center; padding: 20px 0; }
}

/* ---------- CART DRAWER ---------- */
@media (max-width: 480px) {
  #cartDrawer { width: 100% !important; }
}

/* ---------- SEARCH OVERLAY ---------- */
@media (max-width: 768px) {
  #searchOverlay { padding: 30px 14px 14px !important; }
  #headerSearchInput { font-size: 14px !important; padding: 14px 18px !important; }
}

/* ---------- WHATSAPP BUBBLE ---------- */
@media (max-width: 768px) {
  .whatsapp-bubble { width: 50px !important; height: 50px !important; bottom: 20px !important; right: 20px !important; font-size: 22px !important; }
}

/* ---------- AUTH PAGES ---------- */
@media (max-width: 768px) {
  /* register/login sayfaları zaten max-width ile */
  form[id="loginForm"], form[id="registerForm"] { padding: 30px !important; }
}

/* ---------- BLOG / GENERIC PAGE ---------- */
@media (max-width: 768px) {
  article.wrap { padding: 30px 16px 60px !important; }
  .page-content > p, article div { font-size: 15px !important; }
}

/* ---------- CONTACT ---------- */
@media (max-width: 992px) {
  /* contact 1fr 2fr grid */
  .wrap > div[style*="grid-template-columns:1fr 2fr"] { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ---------- ORDER TRACK / DETAIL ---------- */
@media (max-width: 768px) {
  table.order-items-table, table[style*="width:100%"] { font-size: 12px; }
  table[style*="width:100%"] th, table[style*="width:100%"] td { padding: 10px 8px !important; }
  /* order header cells */
  div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
}

/* ---------- ORDERS LIST ---------- */
@media (max-width: 768px) {
  /* order rows in account/orders */
  a[style*="grid-template-columns:1fr 1fr 1fr 1fr auto"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
}

/* ---------- ADDRESSES ---------- */
@media (max-width: 768px) {
  /* New address modal grid */
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:14px"] { grid-template-columns: 1fr !important; }
}

/* ---------- TABLES (genel) ---------- */
@media (max-width: 768px) {
  table { font-size: 12px; }
  table th, table td { padding: 10px 8px !important; }
}

/* ---------- FAQ ---------- */
@media (max-width: 768px) {
  .faq-item button { font-size: 14px !important; padding: 14px 18px !important; }
}

/* ---------- PROMTACH PRODUCT BAR ---------- */
@media (max-width: 768px) {
  .prematch__inner { flex-wrap: wrap; gap: 10px !important; padding: 10px 0 !important; font-size: 10px; }
  .prematch__inner > span[style*="opacity:0.4"] { display: none; }
}

/* ---------- IMAGES SAFETY ---------- */
@media (max-width: 768px) {
  img { max-width: 100%; height: auto; }
}

/* ---------- SCROLL FIX ---------- */
html, body { -webkit-text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: transparent; }

/* ---------- BURGER MENU ICON BTN'NIN TOUCH HEDEFI ---------- */
@media (max-width: 992px) {
  .icon-btn { min-width: 38px; min-height: 38px; padding: 8px !important; }
}