/* Temizlet phone-first layer
   Desktop (>= 769px) is intentionally untouched. */
/* Width is the normal trigger. max-device-width is the Chrome/Android fallback:
   Chrome can request a desktop layout viewport on a phone while the physical
   device width is still phone-sized. */
@media (max-width: 768px), (max-device-width: 768px) {
  :root {
    --tmz-m-pad: 16px;
    --tmz-m-radius: 20px;
    --tmz-m-touch: 48px;
  }

  html { width: 100%; min-width: 0; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  body { width: 100%; min-width: 0; max-width: 100%; overflow-x: hidden; }
  *, *::before, *::after { min-width: 0; }
  img, video, iframe, svg { max-width: 100%; }
  input, select, textarea { max-width: 100%; font-size: 16px !important; }
  button, a, input, select, textarea { touch-action: manipulation; }

  /* Shared mobile navigation: logo + burger, never the desktop header. */
  #headerContainer { min-height: 64px; }
  .tmz-header { min-height: 64px !important; height: 64px !important; padding: 0 16px !important; }
  .tmz-header-inner { min-height: 64px !important; height: 64px !important; width: 100% !important; }
  .tmz-desktop-nav, .tmz-header-auth, #guestMenu, #userMenu { display: none !important; }
  .tmz-header .tmz-logo { font-size: 27px !important; line-height: 1 !important; }
  .tmz-header .menu-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; flex: 0 0 44px !important; font-size: 25px !important; }
  .burger-menu { top: 64px !important; height: calc(100dvh - 64px) !important; max-height: none !important; overflow-y: auto !important; overscroll-behavior: contain; padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
  .burger-menu .menu-page { padding: 12px 16px 24px !important; }
  .burger-menu .item, .burger-menu .main-toggle, .burger-menu .mobile-auth-primary, .burger-menu .mobile-auth-secondary { min-height: 48px; }

  /* Shared footer becomes a compact phone layout. */
  .site-footer, .tmz-footer { overflow: hidden; }
  .footer-inner, .tmz-footer-inner { width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }
  .footer-grid, .tmz-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-columns, .tmz-footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 18px !important; }

  /* Launch page */
  .launch-page .site-header { height: 64px !important; padding: 0 16px !important; }
  .launch-page .brand { font-size: 27px !important; }
  .launch-page .launch-status { font-size: 12px !important; white-space: nowrap; }
  .launch-page .hero { display: flex !important; flex-direction: column !important; gap: 26px !important; padding: 32px 16px 24px !important; }
  .launch-page .hero-copy { width: 100% !important; max-width: none !important; }
  .launch-page .eyebrow { margin-bottom: 14px !important; }
  .launch-page h1 { font-size: clamp(38px, 11vw, 48px) !important; line-height: .94 !important; letter-spacing: -.045em !important; }
  .launch-page .hero-lead { font-size: 17px !important; line-height: 1.55 !important; margin-top: 18px !important; }
  .launch-page .countdown-block { margin-top: 24px !important; }
  .launch-page .countdown { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  .launch-page .colon { display: none !important; }
  .launch-page .time { min-height: 78px !important; padding: 11px 4px !important; border-radius: 15px !important; }
  .launch-page .time strong { font-size: 27px !important; }
  .launch-page .time span { font-size: 10px !important; }
  .launch-page .proof-list { display: flex !important; gap: 8px !important; overflow-x: auto; scrollbar-width: none; margin-top: 18px !important; padding-bottom: 2px; }
  .launch-page .proof-list::-webkit-scrollbar { display: none; }
  .launch-page .proof-list > * { flex: 0 0 auto; white-space: nowrap; }
  .launch-page .hero-media { width: 100% !important; }
  .launch-page .media-shell { min-height: 0 !important; aspect-ratio: 4 / 3; border-radius: 22px !important; }
  .launch-page .media-caption { left: 12px !important; right: 12px !important; bottom: 12px !important; }
  .launch-page .feature-row { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 12px 16px 28px !important; }
  .launch-page .feature-row > * { min-height: 0 !important; padding: 16px !important; border-radius: 16px !important; }
  .launch-page .site-footer { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)) !important; }

  /* Main Temizlet home: true single-column, compact mobile cards. */
  .home-shell .home-hero { padding: 28px 16px 38px !important; }
  .home-shell .hero-inner, .home-shell .provider-inner, .home-shell .planning-card { grid-template-columns: 1fr !important; gap: 22px !important; }
  .home-shell .hero-copy h1 { font-size: clamp(38px, 10vw, 48px) !important; line-height: .98 !important; letter-spacing: -.04em !important; }
  .home-shell .hero-lead { font-size: 17px !important; line-height: 1.5 !important; }
  .home-shell .hero-proof { display: flex !important; gap: 8px !important; overflow-x: auto; scrollbar-width: none; }
  .home-shell .hero-proof > * { flex: 0 0 auto; }
  .home-shell .hero-start-card { padding: 18px !important; border-radius: 20px !important; }
  .home-shell .home-section, .home-shell .process-section, .home-shell .provider-section { padding: 46px 16px !important; }
  .home-shell .section-head { margin-bottom: 20px !important; }
  .home-shell .section-head h2, .home-shell .provider-copy h2, .home-shell .planning-copy h2 { font-size: 30px !important; line-height: 1.08 !important; }
  .home-shell .service-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .home-shell .service-card { min-height: 0 !important; padding: 16px !important; border-radius: 18px !important; }
  .home-shell .service-snapshot { height: 158px !important; min-height: 0 !important; border-radius: 14px !important; }
  .home-shell .process-line { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .home-shell .process-step { min-height: 0 !important; padding: 16px !important; border-radius: 17px !important; }
  .home-shell .planning-card, .home-shell .provider-inner { padding: 20px !important; border-radius: 20px !important; }
  .home-shell .quality-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .home-shell .primary-btn, .home-shell .secondary-btn, .home-shell .light-btn { min-height: 50px; width: 100%; justify-content: center; }

  /* Blog, news and article systems */
  .blog-hero, .news-hero { padding: 36px 16px 26px !important; }
  .blog-hero h1, .news-hero h1 { font-size: clamp(36px, 10vw, 46px) !important; line-height: 1 !important; }
  .blog-content, .news-content, .blog-shell, .news-shell { width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }
  .blog-toolbar, .news-toolbar { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .blog-grid, .news-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .blog-card, .news-card { border-radius: 18px !important; overflow: hidden; }
  .blog-card-media, .news-card-media { height: auto !important; aspect-ratio: 16 / 10; }
  .blog-newsletter, .news-newsletter { padding: 36px 16px !important; }
  .blog-newsletter-box, .news-newsletter-box { padding: 22px !important; border-radius: 20px !important; }
  .article-hero, .article-main, .article-related { padding-left: 16px !important; padding-right: 16px !important; }
  .article-hero { padding-top: 34px !important; padding-bottom: 26px !important; }
  .article-hero-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .article-hero h1 { font-size: clamp(34px, 9.5vw, 44px) !important; line-height: 1.02 !important; }
  .article-hero-media { border-radius: 20px !important; overflow: hidden; }
  .article-content { font-size: 17px !important; line-height: 1.65 !important; }
  .article-related-grid { grid-template-columns: 1fr !important; }
  .article-toc { position: static !important; width: 100% !important; margin-bottom: 24px !important; }

  /* Corporate/info/help/legal families */
  .page .container, .page .section, .help-wrap, .legal-page, .legal-hero, .legal-content { width: 100% !important; max-width: none !important; }
  .page .container, .page .section, .help-wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .page .section-grid, .page .info-cards, .page .updates-cards, .help-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .page .hero-title, .help-title, .legal-title { font-size: clamp(36px, 10vw, 46px) !important; line-height: 1 !important; }
  .page .hero-media, .page .section-media { height: auto !important; aspect-ratio: 4 / 3; border-radius: 20px !important; overflow: hidden; }
  .page .info-card, .page .update-card, .help-card { border-radius: 18px !important; }
  .legal-hero { padding: 38px 16px 30px !important; }
  .legal-layout { grid-template-columns: 1fr !important; gap: 24px !important; padding: 32px 16px 52px !important; }
  .legal-toc { position: static !important; }
  .legal-content { font-size: 16px !important; line-height: 1.65 !important; }
  .support-box { padding: 22px !important; border-radius: 20px !important; }
  .support-actions { flex-direction: column !important; align-items: stretch !important; }
  .support-btn, .support-link { width: 100% !important; min-height: 50px; justify-content: center; }

  /* Customer booking / address / payment. */
  .booking-app { min-height: 100dvh !important; }
  .booking-header { min-height: 64px !important; padding: 0 16px !important; }
  .booking-shell { width: 100% !important; max-width: none !important; padding: 20px 16px calc(32px + env(safe-area-inset-bottom)) !important; }
  .flow-layout, .payment-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .flow-title { font-size: 31px !important; line-height: 1.05 !important; }
  .section-card, .summary-panel, .payment-panel, .hero-panel { padding: 18px !important; border-radius: 20px !important; }
  .option-grid, .service-grid, .metric-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .option, .service-card { min-height: 0 !important; padding: 15px !important; border-radius: 16px !important; }
  .inline-fields { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .summary-panel { position: static !important; }
  .primary-button { min-height: 52px; width: 100% !important; }
  .request-header { min-height: 64px !important; padding: 0 16px !important; }
  .request-main { width: 100% !important; max-width: none !important; padding: 22px 16px calc(30px + env(safe-area-inset-bottom)) !important; }
  .request-row { grid-template-columns: 1fr !important; gap: 12px !important; }
  .request-card, .request-panel { border-radius: 20px !important; }
  .request-map-wrap { min-height: 250px !important; height: 40dvh !important; max-height: 380px !important; }

  /* Tracking flow behaves like a native map + bottom sheet. */
  .tracking-app { min-height: 100dvh !important; }
  .tracking-header { min-height: 64px !important; padding: 0 16px !important; }
  .tracking-grid { display: flex !important; flex-direction: column !important; min-height: calc(100dvh - 64px) !important; }
  .tracking-map { min-height: 42dvh !important; height: 42dvh !important; }
  .tracking-sheet { position: relative !important; width: 100% !important; min-height: 0 !important; border-radius: 24px 24px 0 0 !important; margin-top: -22px; z-index: 4; }
  .sheet-inner { padding: 14px 16px calc(24px + env(safe-area-inset-bottom)) !important; }
  .provider-card, .search-card, .job-card, .review-card, .work-card { border-radius: 18px !important; padding: 16px !important; }

  /* Auth / account / provider onboarding standalone pages. */
  .ready-page, body > .page, body > .container { width: 100% !important; max-width: none !important; padding-left: 16px !important; padding-right: 16px !important; }
  .topbar, body > .header { min-height: 64px !important; padding-left: 16px !important; padding-right: 16px !important; }
  .bottom, .bottom-bar { padding-left: 16px !important; padding-right: 16px !important; padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
  .next, .next-btn, .ready-page .btn { min-height: 52px !important; }
  .code-row { display: flex !important; gap: 7px !important; width: 100% !important; }
  .code-box { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 52px !important; }
  .tabs { display: flex !important; width: 100% !important; overflow-x: auto !important; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto !important; min-height: 44px; }
  .card-grid { grid-template-columns: 1fr !important; }
  .onboarding-shell { width: 100% !important; max-width: none !important; padding: 22px 16px calc(36px + env(safe-area-inset-bottom)) !important; }
  .onboarding-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .onboarding-title { font-size: 32px !important; line-height: 1.05 !important; }
  .onboarding-shell .grid2 { grid-template-columns: 1fr !important; }
  .onboarding-shell .panel { border-radius: 20px !important; padding: 18px !important; }
  .onboarding-shell .stepper { overflow-x: auto; width: 100%; scrollbar-width: none; }
  .provider-application-shell { width: 100% !important; max-width: none !important; }
  .provider-application-content { padding: 22px 16px 42px !important; }
  .provider-application-hero, .provider-form-card { border-radius: 20px !important; padding: 20px !important; }
  .provider-application-hero-grid, .provider-application-layout, .provider-field-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .provider-primary-button { min-height: 52px !important; width: 100% !important; }

  /* Business page keeps its own branding but switches to a phone hierarchy. */
  .page-business .wrap { width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }
  .page-business .business-desktop-nav, .page-business .auth { display: none !important; }
  .page-business .business-burger { display: inline-flex !important; }
  .page-business .hero-business { padding-top: 30px !important; }
  .page-business .hero-business, .page-business .hero-copy { grid-template-columns: 1fr !important; }
  .page-business .hero-title { font-size: clamp(38px, 10vw, 48px) !important; line-height: .98 !important; }
  .page-business .hero-image { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px !important; }

  .launch-page .media-shell img,
  .page .hero-media img,
  .page .section-media img,
  .service-media img,
  .hero-media img,
  .section-media img,
  .feature-media img,
  .earn-hero-media img,
  .earn-feature-media img,
  .earn-split-media img,
  .news-card-media img,
  .blog-card-media img,
  .article-hero-media img,
  .page-business .hero-image { object-position: center 22% !important; }
  .page-business .feature-list, .page-business .case-list, .page-business .article-list, .page-business .brand-logos { grid-template-columns: 1fr !important; }
}

@media (max-width: 380px), (max-device-width: 380px) {
  .tmz-header { padding-left: 12px !important; padding-right: 12px !important; }
  .launch-page .hero, .booking-shell, .request-main, .onboarding-shell { padding-left: 12px !important; padding-right: 12px !important; }
  .launch-page h1, .home-shell .hero-copy h1 { font-size: 36px !important; }
  .inline-fields { grid-template-columns: 1fr !important; }
  .footer-columns, .tmz-footer-columns { grid-template-columns: 1fr !important; }
}