/*! FUL SERVIS RESPONSIVE PATCH v52 — Mobil/Tablet/Desktop tam uyum
   Hem ön yüz hem admin için ortak responsive düzeltmeler */

/* ================ ADMIN — Sidebar drawer + topbar mobile ================ */
@media(max-width:1024px){
  .app-shell{grid-template-columns:240px 1fr!important}
  .topbar{flex-wrap:wrap!important}
  .top-actions{flex-wrap:wrap!important}
}

@media(max-width:900px){
  .app-shell{grid-template-columns:1fr!important}
  .sidebar{
    position:fixed!important;
    top:0!important;left:0!important;
    width:280px!important;height:100vh!important;
    transform:translateX(-100%)!important;
    transition:transform .25s ease!important;
    z-index:50!important;
    overflow-y:auto!important;
  }
  body.sidebar-open .sidebar{transform:translateX(0)!important}
  body.sidebar-open .sidebar-backdrop{
    display:block!important;
    position:fixed!important;inset:0!important;
    background:rgba(15,26,51,.55)!important;
    z-index:45!important;
  }
  .sidebar-backdrop{display:none}
  .sidebar-close{display:flex!important}
  .mobile-admin-bar{display:flex!important}

  .main{padding:18px 14px 32px!important}
  .topbar{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .topbar > div:first-child{width:100%!important}
  .topbar h1{font-size:20px!important}
  .top-actions{
    width:100%!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
  }
  .topbar .top-btn,
  .topbar .user-pill,
  .topbar a.btn{font-size:12.5px!important;padding:0 10px!important;height:36px!important}

  /* Form gridleri tek kolon */
  .form-two,.form-three,.form-four,
  .filter-grid{grid-template-columns:1fr!important}

  /* Metric/boss grid: 2 kolon */
  .metric-grid,.dashboard-metric-grid,
  .boss-grid,.dashboard-boss-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .gallery-summary{grid-template-columns:1fr 1fr!important}

  /* Dashboard grid tek kolon */
  .dashboard-grid,.dashboard-responsive-grid,
  .seo-layout,.proposal-layout,.split-grid{grid-template-columns:1fr!important}

  /* Hero hep tek kolon */
  .dash-hero,.dash-hero.form-hero,
  .open-hero,.service-vehicle-card,.customer-hero,
  .proposal-hero,.appointment-hero,.seo-hero,.form-hero{grid-template-columns:1fr!important;padding:20px!important}
  .dash-hero h2,.open-hero h2{font-size:19px!important}
  .hero-widget{min-height:120px!important;padding:14px!important}
  .hero-widget b{font-size:26px!important}

  /* Tablo gizle, kart göster */
  .desktop-table{display:none!important}
  .vehicle-mobile-list{display:flex!important;flex-direction:column!important;gap:12px!important}
  .vehicle-mobile-card{display:block!important}

  /* Kart head stack */
  .card-head{flex-direction:column!important;align-items:stretch!important;gap:10px!important}
  .card-head > a,.card-head > .btn{align-self:flex-start!important}

  /* Search bar tek satır → stack */
  .searchbar,.vehicle-searchbar{flex-direction:column!important;align-items:stretch!important;gap:8px!important}
  .searchbar input,.vehicle-searchbar input{min-width:auto!important;width:100%!important}
  .searchbar .btn,.vehicle-searchbar .btn{width:100%!important;justify-content:center!important}

  /* Compact actions: 3 kol mobil */
  .compact-actions,.actions.compact-actions{grid-template-columns:repeat(3,1fr)!important}

  /* Pipeline daha dar */
  .pipeline-board{grid-auto-columns:240px!important}

  /* Card padding daralt */
  .card{padding:18px!important}
  .card h2{font-size:16px!important}

  /* Sidebar shortcuts daha kompakt */
  .sidebar-shortcuts{gap:4px!important}
  .shortcut-pill{font-size:10.5px!important;padding:3px 8px!important}
}

@media(max-width:560px){
  /* Metric tek kolon */
  .metric-grid,.dashboard-metric-grid,
  .boss-grid,.dashboard-boss-grid{grid-template-columns:1fr!important}
  .gallery-summary{grid-template-columns:1fr!important}
  .vehicle-card-grid{grid-template-columns:1fr!important}
  .proposal-result,.proposal-result-grid{grid-template-columns:1fr!important}

  .topbar h1{font-size:18px!important}
  .card{padding:14px!important;border-radius:10px!important}
  .card h2{font-size:15px!important}

  .table th,.table td{padding:9px 10px!important;font-size:12.5px!important}

  /* Etiket aksiyonları telefon: 2 kolon */
  .compact-actions,.actions.compact-actions,
  .vehicle-card-actions,.appointment-actions{grid-template-columns:1fr 1fr!important}

  .invoice-item-row{grid-template-columns:1fr!important;gap:8px!important}
  .invoice-item-row > *{grid-column:1!important}
}

/* ================ ÖN YÜZ — Responsive footer + nav + hero ================ */
@media(max-width:1180px){
  html body .fs-menu{display:none!important}
  html body .mobile-menu-btn{display:flex!important}
  html body .fs-phone{display:none!important}

  body.menu-open .fs-menu{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    position:absolute!important;
    top:100%!important;left:0!important;right:0!important;
    background:#fff!important;
    padding:14px 18px!important;
    gap:0!important;
    box-shadow:0 12px 28px rgba(15,26,51,.08)!important;
    border-bottom:1px solid #E2E6EC!important;
    z-index:40!important;
  }
  body.menu-open .fs-menu > a,
  body.menu-open .fs-menu .menu-dropdown > a{
    padding:14px 0!important;
    border-bottom:1px solid #EDEFF3!important;
  }

  html body .service-grid{grid-template-columns:repeat(3,1fr)!important}
  html body .gallery-cats,
  html body .public-gallery-cats{grid-template-columns:repeat(2,1fr)!important}
  html body .gallery-wrap{grid-template-columns:1fr!important;gap:24px!important}
  html body .contact-box{position:static!important;top:auto!important}
  html body .process-grid{grid-template-columns:repeat(3,1fr)!important}
  html body .seo-content-grid{grid-template-columns:1fr!important}
  html body .seo-detail-grid{grid-template-columns:repeat(2,1fr)!important}
  html body .service-detail-grid,
  html body .service-detail-hero{grid-template-columns:1fr!important}
  html body .seo-trust,
  html body .trust-grid{grid-template-columns:1fr!important;gap:24px!important}
  html body .cta-box{grid-template-columns:1fr!important;gap:18px!important}
  html body .gallery-items,
  html body .premium-gallery-items{grid-template-columns:repeat(2,1fr)!important}

  html body .hero-slide{grid-template-columns:1fr!important;padding:36px!important;gap:24px!important}
  html body .hero-media{order:-1!important}
  html body .hero-media > img{height:280px!important}
  html body .status-card{position:relative!important;right:auto!important;top:auto!important;width:100%!important;margin-top:14px!important}
  html body .assist-card{position:relative!important;right:auto!important;bottom:auto!important;margin-top:10px!important}
}

@media(max-width:900px){
  html body .fs-section,
  html body .fs-process,
  html body .seo-faq,
  html body .seo-service-detail{padding:44px 0!important}
  html body .fs-hero{padding:24px 0 32px!important}

  html body .service-grid{grid-template-columns:repeat(2,1fr)!important}
  html body .process-grid{grid-template-columns:repeat(2,1fr)!important}

  html body .arr{display:none!important}
  html body .hero-slider{min-height:auto!important}
  html body .hero-media > img{height:240px!important}

  html body .fs-topbar{display:none!important}
}

@media(max-width:640px){
  html body .service-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  html body .service-card{min-height:160px!important}
  html body .process-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  html body .gallery-cats,
  html body .public-gallery-cats{grid-template-columns:1fr!important;gap:12px!important}
  html body .gallery-items,
  html body .premium-gallery-items{grid-template-columns:1fr!important}
  html body .seo-detail-grid{grid-template-columns:1fr!important;gap:10px!important}
  html body .trust-stats{grid-template-columns:1fr 1fr!important;gap:10px!important}

  html body .hero-slide{padding:24px 18px!important}
  html body .hero-text h1{font-size:24px!important}
  html body .hero-text p{font-size:14px!important}
  html body .hero-media > img{height:200px!important}
  html body .hero-buttons .btn{flex:1!important;justify-content:center!important}

  html body .section-title h2{font-size:21px!important}

  html body .seo-hero-card,
  html body .public-hero,
  html body .appointment-hero{padding:24px 20px!important;border-radius:12px!important}

  html body .cta-box{padding:24px 20px!important;border-radius:12px!important}
  html body .cta-actions{flex-direction:column!important}
  html body .cta-actions .btn{width:100%!important;justify-content:center!important}

  html body .float-call,
  html body .float-wa{width:48px!important;height:48px!important;font-size:19px!important;bottom:80px!important}

  html body .pwa-bottom-nav{display:flex!important}

  html body .contact-box{padding:16px!important;border-radius:12px!important}
}

@media(max-width:380px){
  html body .service-grid{grid-template-columns:1fr!important}
  html body .process-grid{grid-template-columns:1fr!important}
  html body .trust-stats{grid-template-columns:1fr!important}
  html body .fs-logo b{font-size:17px!important}
  html body .fs-logo small{display:none!important}
}

/* iOS notch / Android nav safe-area */
@supports(padding:env(safe-area-inset-bottom)){
  .pwa-bottom-nav{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))!important}
  .mobile-admin-bar{padding-top:calc(10px + env(safe-area-inset-top,0px))!important}
}