/*
 * mobile.css - Resimi Mobile Responsiveness
 */

/* PANEL (LOGGED-IN) */
@media (max-width: 768px) {
  .hamburger { display: flex !important; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; cursor: pointer; padding: 10px; flex-shrink: 0; }
  .hamburger span { display: block; height: 2px; background: var(--text, #e2e8f0); border-radius: 2px; transition: transform .25s, opacity .25s; width: 100%; }
  body.nav-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  body.nav-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .sidebar { display: flex !important; position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 280px !important; max-width: 85vw !important; transform: translateX(-100%) !important; transition: transform .28s cubic-bezier(.4,0,.2,1) !important; z-index: 300 !important; background: #0f1117 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; border-right: 1px solid rgba(108,99,255,.2) !important; }
  body.nav-open .sidebar { transform: translateX(0) !important; box-shadow: 8px 0 40px rgba(0,0,0,.6) !important; }
  .sidebar-backdrop { display: none !important; position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.65) !important; z-index: 299 !important; }
  body.nav-open .sidebar-backdrop { display: block !important; }
  .topbar { padding: 0 14px !important; height: 56px !important; display: flex !important; align-items: center !important; gap: 10px !important; }
  .topbar-title { flex: 1 !important; font-size: 15px !important; font-weight: 700 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .user-name { display: none !important; }
  .panel-wrap { flex-direction: column; }
  .main-content { margin-left: 0 !important; width: 100% !important; }
  .page-content { padding: 16px 14px !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stat-card { padding: 16px 14px !important; }
  .stat-val { font-size: 22px !important; }
  .stat-icon { width: 36px !important; height: 36px !important; font-size: 16px !important; margin-bottom: 10px !important; }
  .shortcuts-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; margin-bottom: 16px !important; }
  .shortcut { padding: 14px 10px !important; gap: 6px !important; }
  .shortcut-icon { width: 32px !important; height: 32px !important; font-size: 15px !important; }
  .shortcut-label { font-size: 11.5px !important; }
  .shortcut-sub { display: none !important; }
  .dash-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .quick-order-card { position: static !important; }
  .plat-grid-dash { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .plat-card-dash { padding: 12px 10px !important; }
  .plat-icon-dash { font-size: 20px !important; margin-bottom: 4px !important; }
  .plat-name-dash { font-size: 11.5px !important; }
  .plat-count-dash { display: none !important; }
  .table-wrap, .orders-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .table { min-width: 560px !important; }
  .table th, .table td { padding: 9px 10px !important; font-size: 12px !important; }
  .filter-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; padding-bottom: 4px !important; scrollbar-width: none; }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab { white-space: nowrap !important; padding: 6px 12px !important; font-size: 12px !important; }
  .svc-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .form-control { font-size: 16px !important; }
  .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 16px !important; }
  .page-title { font-size: 20px !important; }
  .card-body { padding: 14px !important; }
  .order-layout, .two-col { grid-template-columns: 1fr !important; }
  .welcome-banner { padding: 16px !important; }
  .welcome-title { font-size: 17px !important; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .shortcuts-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .plat-grid-dash { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-val { font-size: 18px !important; }
}

/* LANDING PAGE */
@media (max-width: 768px) {
  .lp-nav { padding: 12px 16px !important; }
  .nav-links .nav-link-a { display: none !important; }
  .nav-links { gap: 8px !important; }
  .lp-hamburger { display: flex !important; flex-direction: column; gap: 5px; width: 38px; height: 38px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; cursor: pointer; padding: 10px; }
  .lp-hamburger span { display: block; height: 2px; background: #e2e8f0; border-radius: 2px; transition: .25s; width: 100%; }
  body.lp-nav-open .lp-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.lp-nav-open .lp-hamburger span:nth-child(2) { opacity: 0; }
  body.lp-nav-open .lp-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .lp-nav-drawer { position: fixed !important; top: 60px !important; left: 0 !important; right: 0 !important; background: rgba(13,15,20,.98) !important; border-bottom: 1px solid rgba(108,99,255,.2) !important; padding: 12px 16px 20px !important; transform: translateY(-110%) !important; transition: transform .28s cubic-bezier(.4,0,.2,1) !important; z-index: 190 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
  body.lp-nav-open .lp-nav-drawer { transform: translateY(0) !important; }
  .lp-nav-drawer a { display: block !important; padding: 12px 16px !important; color: var(--text2, #94a3b8) !important; text-decoration: none !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 500 !important; }
  .lp-nav-drawer .drawer-cta { background: linear-gradient(135deg, #6c63ff, #a855f7) !important; color: #fff !important; text-align: center !important; font-weight: 700 !important; }
  .hero-wrap { padding: 100px 20px 60px !important; }
  .hero-h1 { font-size: clamp(32px, 9vw, 52px) !important; }
  .hero-sub { font-size: 15px !important; margin-bottom: 28px !important; }
  .hero-cta { flex-direction: column !important; align-items: stretch !important; }
  .btn-hero { text-align: center !important; justify-content: center !important; padding: 15px 20px !important; font-size: 15px !important; }
  .trust-bar { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px 8px !important; padding: 20px 16px !important; }
  .trust-stat .n { font-size: 26px !important; }
  .section { padding: 48px 16px !important; }
  .section-title { font-size: 26px !important; }
  .bento-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .span2, .span3, .span4, .span6 { grid-column: span 1 !important; }
  .bento { padding: 20px !important; }
  .how-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .plat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .testi-grid { display: flex !important; overflow-x: auto !important; gap: 12px !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory !important; padding-bottom: 8px !important; scrollbar-width: none; }
  .testi-grid::-webkit-scrollbar { display: none; }
  .testi { flex: 0 0 85vw !important; max-width: 320px !important; scroll-snap-align: start !important; }
  .blog-grid { grid-template-columns: 1fr !important; }
  .cta-wrap { padding: 40px 20px !important; margin: 0 0 30px !important; border-radius: 20px !important; }
  .cta-title { font-size: 26px !important; }
  .cta-badges { gap: 6px !important; }
  .cta-badge { font-size: 11.5px !important; padding: 6px 12px !important; }
  .lp-footer { grid-template-columns: 1fr !important; gap: 28px !important; padding: 32px 20px 24px !important; }
  .lp-footer-bottom { padding: 16px 20px !important; font-size: 12px !important; }
  .welcome-modal { padding: 28px 20px !important; }
  .welcome-credit-amount { font-size: 54px !important; }
}
@media (max-width: 480px) {
  .lp-footer { grid-template-columns: 1fr 1fr !important; }
  .lp-footer-brand { grid-column: 1 / -1; }
  .plat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* AUTH PAGES */
@media (max-width: 480px) {
  .auth-modal { padding: 24px 18px 20px !important; }
  .auth-title { font-size: 20px !important; }
  .social-btns { flex-direction: column !important; }
}

/* GLOBAL */
@media (max-width: 768px) {
  body { padding-bottom: env(safe-area-inset-bottom, 0); }
  .btn, button, .nav-link, .filter-tab { min-height: 40px; }
}

/* ====================================================
   PATCH v3 - hamburger + landing nav fixes
   ==================================================== */

/* Landing page: hide CTA button in topnav on mobile
   (already in the slide-out drawer - no need to crowd the bar) */
@media (max-width: 768px) {
  .nav-links .btn,
  .nav-links .btn-primary,
  .nav-links .btn-sm { display: none !important; }
  /* Hide separator divider too */
  .nav-links > div[style*="width:1px"] { display: none !important; }
  /* Force hamburger visible - belt AND suspenders */
  .lp-hamburger,
  #lp-ham { display: flex !important; }
}

/* Panel: hide hamburger on desktop (it was an unstyled ghost element) */
@media (min-width: 769px) {
  .hamburger { display: none !important; }
}