/* WebTay mobile — no clipping */

html {
  max-width: 100%;
  overflow-x: hidden;
}
body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 900px) {
  /* never hide content with reveal / tilt */
  .reveal-ready,
  .reveal-in,
  .tilt-card,
  .sol-card,
  .project-card,
  .showcase-card,
  .feature-box,
  .testimonial-card,
  .svc-card,
  .intro-stat {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  /* critical: stop clipping page content */
  .main-content,
  .main-content--home,
  .main-content--flush,
  .home-page,
  .home-hero,
  .home-section,
  .promo-band,
  .promo-highlight,
  .impact-band,
  .cta,
  .live-banner,
  .page-card,
  .section-block {
    overflow: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .home-hero,
  .main-content--home {
    overflow-x: hidden !important; /* only x, never y-clip */
    overflow-y: visible !important;
  }

  :root { --header-h: 56px; }

  .desktop-only { display: none !important; }

  /* restore correct display per component (never blanket block) */
  .m-topbar.mobile-only { display: flex !important; }
  .m-drawer.mobile-only { display: block !important; }
  .m-tabbar.mobile-only { display: grid !important; }

  body {
    font-size: 16px !important;
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .container,
  .home-wrap,
  .home-wrap-block,
  .promo-bar-inner {
    width: calc(100% - 1.5rem) !important;
    max-width: calc(100vw - 1.5rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Topbar */
  .m-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 56px;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 0.75rem !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-bottom: 1px solid #dce3ef;
  }
  .m-topbar-btn,
  .m-topbar-cart {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce3ef;
    background: #fff;
    border-radius: 8px;
    color: #0f172a;
    text-decoration: none;
    position: relative;
  }
  .m-topbar-brand {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-decoration: none;
    color: #0f172a;
    font-weight: 700;
    overflow: hidden;
  }
  .m-topbar-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-topbar-brand img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 auto;
  }
  .m-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    font-size: 0.65rem;
    line-height: 1rem;
    text-align: center;
    background: #1456b1;
    color: #fff;
    border-radius: 999px;
  }

  /* Drawer */
  .m-drawer {
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: none;
  }
  .m-drawer.open { pointer-events: auto; }
  .m-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
  }
  .m-drawer.open .m-drawer-backdrop { opacity: 1; }
  .m-drawer-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: min(86vw, 320px);
    height: 100%;
    background: #fff;
    transform: translateX(-105%);
    transition: transform .2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .m-drawer.open .m-drawer-panel { transform: none; }
  .m-drawer-head,
  .m-drawer-cta { padding: 0.85rem; }
  .m-drawer-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eef2f8; }
  .m-drawer-close { width: 40px; height: 40px; border: 1px solid #dce3ef; background: #f6f8fc; border-radius: 8px; }
  .m-drawer-links { overflow: auto; flex: 1; }
  .m-drawer-links a { display: block; padding: 0.7rem 1rem; color: #0f172a; text-decoration: none; font-weight: 600; }
  .m-drawer-section { padding: 0.8rem 1rem 0.25rem; font-size: 0.7rem; color: #64748b; text-transform: uppercase; }
  .m-drawer-cta {
    margin-top: auto;
    border-top: 1px solid #eef2f8;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .m-cta-phone,
  .m-cta-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
  }
  .m-cta-phone { background: #1456b1; color: #fff; }
  .m-cta-wa { background: #fff; color: #0f172a; border: 1px solid #dce3ef; }

  /* Tabbar */
  .m-tabbar {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90 !important;
    grid-template-columns: repeat(5, 1fr);
    width: 100% !important;
    max-width: 100vw !important;
    background: #fff;
    border-top: 1px solid #dce3ef;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-sizing: border-box !important;
  }
  .m-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    border: 0;
    background: transparent;
    color: #64748b;
    text-decoration: none;
    font: inherit;
    gap: 0.1rem;
    min-width: 0;
  }
  .m-tab.active { color: #0c3f8f; background: #e8effa; }
  .m-tab-label { font-size: 0.62rem; font-weight: 700; white-space: nowrap; }

  /* Promo */
  .promo-bar { width: 100% !important; box-sizing: border-box !important; }
  .promo-bar-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
    padding: 0.55rem 0 !important;
  }
  .promo-bar p { font-size: 0.78rem !important; line-height: 1.4 !important; }

  /* HOME */
  .home-hero {
    padding: 1.2rem 0 !important;
    border-radius: 0 !important;
    min-height: auto !important;
  }
  .home-hero-grid { display: block !important; width: 100% !important; }
  .hero-stage,
  .hero-float,
  .hero-orb,
  .hero-canvas,
  .page-ambient,
  .live-banner-orb { display: none !important; }

  .home-hero-copy { width: 100% !important; max-width: 100% !important; }
  .home-brand {
    font-size: 2.2rem !important;
    line-height: 1.05 !important;
    word-break: break-word !important;
  }
  .home-hero h2 {
    font-size: 1.05rem !important;
    max-width: none !important;
    line-height: 1.4 !important;
  }
  .home-hero-copy > p {
    font-size: 0.92rem !important;
    max-width: none !important;
  }
  .home-hero .hero-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  .home-hero .btn-primary,
  .home-hero .btn-secondary {
    width: 100% !important;
    min-height: 46px !important;
    height: auto !important;
  }
  .hero-checks {
    display: grid !important;
    gap: 0.35rem !important;
  }

  .ticker { display: none !important; } /* less clutter on phone */

  .home-section { padding: 1.25rem 0 !important; }
  .home-section-title {
    font-size: 1.25rem !important;
    max-width: none !important;
    line-height: 1.3 !important;
  }

  .home-intro-grid,
  .impact-grid,
  .promo-highlight,
  .promo-band,
  .promo-band--flip,
  .sol-grid,
  .process-rail,
  .services-preview,
  .features-grid,
  .projects-grid,
  .home-section .projects-grid,
  .home-section .projects-grid--refs,
  .testimonials-grid,
  .footer-content,
  .trust-strip,
  .statistics,
  .services-grid,
  .svc-cols,
  .svc-band,
  .catalog-head,
  .catalog-meta,
  .contact-layout,
  .contact-grid,
  .account-layout,
  .account-grid,
  .auth-grid,
  .cart-layout,
  .cart-page .layout,
  .firma-bilgi-grid,
  .tech-list,
  .technologies .tech-list,
  .stats-grid,
  .reasons-grid,
  .pricing-tiers,
  .product-features {
    display: grid !important;
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.75rem !important;
  }

  .sol-card,
  .process-step,
  .feature-box,
  .project-card,
  .testimonial-card,
  .service-card,
  .svc-card,
  .page-card,
  .live-banner,
  .cta,
  .intro-stat,
  .promo-band,
  .promo-highlight,
  .showcase-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .promo-highlight-visual,
  .promo-band-aside {
    min-height: 100px !important;
    padding: 1rem !important;
  }
  .promo-band-copy,
  .promo-highlight-copy {
    padding: 1rem !important;
  }

  .promo-band .btn-primary,
  .promo-band .btn-secondary,
  .promo-highlight .btn-primary,
  .cta .btn-primary,
  .cta .btn-secondary,
  .phone-cta .btn-primary,
  .phone-cta .btn-secondary {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .impact-big strong { font-size: 2.6rem !important; }
  .impact-copy h2 { font-size: 1.15rem !important; max-width: none !important; }
  .phone-cta-number { font-size: 1.4rem !important; word-break: break-all !important; }

  /* Showcase: full-width cards, swipe */
  .showcase-slider {
    padding: 0 !important;
    width: 100% !important;
  }
  .showcase-nav { display: none !important; }
  .showcase-track {
    display: flex !important;
    gap: 0.75rem !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    padding-bottom: 0.25rem;
  }
  .showcase-slider .showcase-card {
    flex: 0 0 85% !important;
    width: 85% !important;
    max-width: 85% !important;
    scroll-snap-align: start;
  }

  .live-banner { padding: 1rem !important; }
  .live-banner h1,
  .live-banner h2 { font-size: 1.2rem !important; color: #fff !important; }
  .page-card { padding: 1rem !important; }

  /* Services page — stop wide table / 2-col from blowing out the viewport */
  .services-page,
  .services-grid,
  .svc-compare,
  .svc-band,
  .svc-card,
  .services-jump,
  .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .services-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0.15rem 0 0.35rem !important;
  }
  .services-hero h2 {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }
  .services-hero .lede {
    font-size: 0.95rem !important;
    max-width: none !important;
  }

  .services-jump {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }
  .services-jump a {
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .svc-card {
    padding: 1rem !important;
    overflow: visible !important;
  }
  .svc-card h3,
  .svc-card > p,
  .svc-card li {
    overflow-wrap: anywhere !important;
  }
  .svc-card .btn-link {
    display: inline-flex !important;
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .svc-band {
    padding: 1rem !important;
    align-items: start !important;
  }
  .svc-chips {
    width: 100% !important;
  }
  .svc-chips li {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .svc-compare {
    padding: 1rem !important;
  }
  .comparison-table {
    min-width: 520px !important;
  }

  .page-ambient {
    display: none !important;
  }

  /* Catalog / forms / etc */
  .catalog-toolbar {
    position: static !important;
    display: grid !important;
    gap: 0.55rem !important;
    width: 100% !important;
  }
  .catalog-filters {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    width: 100% !important;
  }
  .catalog-search,
  .catalog-search input { width: 100% !important; min-width: 0 !important; }
  .plist-row { grid-template-columns: minmax(0, 1fr) auto !important; width: 100% !important; }
  .plist-main { min-width: 0 !important; }
  .plist-title { overflow-wrap: anywhere !important; }
  .plist-price { grid-column: 1 / -1 !important; text-align: left !important; white-space: normal !important; }
  .product-actions { display: grid !important; gap: 0.5rem !important; width: 100% !important; }
  .product-actions .btn,
  .product-actions .btn-primary,
  .product-actions .product-select { width: 100% !important; max-width: none !important; }

  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]),
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .odeme-page .info-row { flex-direction: column !important; align-items: flex-start !important; }
  .odeme-page .iban { word-break: break-all !important; }
  .contact-quick { width: 100% !important; display: flex !important; flex-wrap: wrap !important; gap: 0.45rem !important; }

  .table-responsive,
  .cookie-table-wrap {
    overflow-x: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .account-page,
  .account-card,
  .account-card--wide,
  .orders-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Orders: card stack (not clipped wide table) */
  .orders-table-wrap {
    overflow: visible !important;
  }
  .orders-table {
    min-width: 0 !important;
    width: 100% !important;
  }
  .orders-table thead { display: none !important; }
  .orders-table tbody {
    display: grid !important;
    gap: 0.75rem !important;
  }
  .orders-table tr {
    display: grid !important;
    gap: 0.45rem !important;
    padding: 0.95rem 1rem !important;
    background: #f6f8fc !important;
    border: 1px solid #dce3ef !important;
    border-radius: 10px !important;
  }
  .orders-table td {
    display: flex !important;
    justify-content: space-between !important;
    gap: 0.85rem !important;
    padding: 0.15rem 0 !important;
    border: 0 !important;
    text-align: right !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  .orders-table td::before {
    content: attr(data-label);
    text-align: left;
    font-weight: 600;
    color: #5b6574;
    font-size: 0.82rem;
  }
  .orders-table td[data-label=""],
  .orders-table td.orders-empty {
    justify-content: flex-end !important;
  }
  .orders-table td[data-label=""]::before,
  .orders-table td.orders-empty::before {
    content: none !important;
  }
  .orders-table td.orders-empty {
    display: block !important;
    text-align: center !important;
  }
  .orders-pagination {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .footer { width: 100% !important; box-sizing: border-box !important; padding: 1.5rem 0 !important; }
  .footer-content { width: 100% !important; }

  .cookie-banner {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 38vh;
    overflow: auto;
    box-sizing: border-box !important;
    padding: 0.75rem !important;
  }
  body.cookie-open {
    padding-bottom: calc(68px + 140px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .cookie-banner-inner { flex-direction: column !important; align-items: stretch !important; }
  .cookie-banner-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
    width: 100% !important;
  }
  .back-to-top { bottom: calc(68px + 0.75rem) !important; }
}