/* AuVidi Mobile Patch — preserves existing desktop design */
@media (max-width: 980px){
  /* wrap top menu instead of overflowing */
  .menu{flex-wrap:wrap; row-gap:8px}
  /* hero vertical spacing a bit tighter on small screens */
  .hero-wrap{padding:72px 16px}
}
@media (max-width: 640px){
  /* readable line-length and breathing space */
  .hero-wrap{padding:60px 14px}
  .title{font-size:clamp(28px, 8vw, 40px); line-height:1.12}
  .subtitle{font-size:16px; max-width:unset}
  .cta{flex-wrap:wrap}
  /* buttons comfortable touch targets */
  .btn{min-height:44px; padding:12px 16px}
  /* pricing cards: force one column if any custom grid missed */
  .ap-grid, .grid, .grid2{grid-template-columns:1fr !important}
  /* images/video scale full width */
  img, video{max-width:100%; height:auto}
}


/* === Platforms grid: 3x2 on phones === */
@media (max-width: 640px){
  /* Try common containers first; only one needs to match */
  #platformlar .grid,
  #platformlar .platforms,
  #platformlar .stores,
  .platforms-grid,
  .stores-grid,
  .stores {
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap:14px !important;
    align-items:center;
    justify-items:center;
  }
  /* Icon cards sizing — keeps neon/glow but enlarges tap target */
  #platformlar .grid > *,
  #platformlar .platforms > *,
  #platformlar .stores > *,
  .platforms-grid > *,
  .stores-grid > *,
  .stores > * {
    width: 96px;
    height: 96px;
    border-radius: 22px;
  }
  /* Inner icon image */
  .store-icon, .platform-icon, .stores img, .platforms img {
    width: 36px;
    height: 36px;
  }
}


/* === FORCE 3x2 under #platformlar on phones, regardless of current layout === */
@media (max-width: 640px){
  #platformlar .platforms-grid,
  #platformlar .stores,
  #platformlar .grid,
  #platformlar .row,
  #platformlar .wrap,
  #platformlar > div,
  #platformlar ul {
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:14px !important;
  }
  #platformlar .platforms-grid > *,
  #platformlar .stores > *,
  #platformlar .grid > *,
  #platformlar .row > *,
  #platformlar .wrap > *,
  #platformlar > div > *,
  #platformlar ul > li {
    flex: 0 0 calc(33.333% - 12px) !important;
    max-width: calc(33.333% - 12px) !important;
    display:flex; align-items:center; justify-content:center;
  }
  /* card and icon sizing */
  #platformlar .platforms-grid > *,
  #platformlar .stores > *,
  #platformlar .grid > *,
  #platformlar .row > *,
  #platformlar .wrap > *,
  #platformlar > div > *,
  #platformlar ul > li {
    width: auto !important; height: 100% !important;
  }
  #platformlar .platform-card,
  #platformlar .store,
  #platformlar .store-card {
    width: 96px !important; height: 96px !important; border-radius: 22px !important;
  }
  #platformlar img, #platformlar .store-icon, #platformlar .platform-icon {
    width: 36px !important; height: 36px !important;
  }
}


/* === Pricing cards: make them fit on small screens === */
@media (max-width: 640px){
  /* 1) Ensure one column grid and safe side paddings */
  .packages-grid, .pricing, .plans, #packages, #paketler {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 2) Card should never overflow viewport */
  .plan, .plan-card, .price-card, .package, .paket, .pricing .card {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 16px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* 3) Headings & text clamp to keep readable without wrapping too long */
  .plan h3, .plan-card h3, .price-card h3, .package h3, .paket h3 {
    font-size: clamp(18px, 5.5vw, 22px) !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }
  .plan .subtitle, .plan small, .price-card small, .package small, .paket small {
    font-size: 14px !important;
    opacity: .9;
  }
  .plan .features li, .price-card .features li, .package .features li, .paket .features li {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* 4) Price badge positioning so it doesn't stick out */
  .price-badge, .plan .badge, .plan .price, .plan .price-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    transform: none !important;
    max-width: 72px !important; /* shrink if it was huge */
  }

  /* 5) CTA buttons full width */
  .plan .btn, .price-card .btn, .package .btn, .paket .btn,
  .plan button, .price-card button, .package button, .paket button {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 12px !important;
  }
}


/* === AuVidi Pricing: hard clamp to viewport on phones === */
@media (max-width: 640px){
  html, body { overflow-x: hidden; }

  /* Treat any pricing/plan card as a positioned container */
  .pricing .card,
  .pricing .plan,
  .plans .plan,
  .plans .card,
  .packages-grid .plan,
  .packages-grid .card,
  .price-card,
  .package,
  .paket {
    position: relative !important;
    width: calc(100vw - 24px) !important; /* 12px safe padding on both sides */
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* clip badge/glow overflow */
  }

  /* If a wrapper has padding that causes overflow, neutralize it */
  .pricing, .plans, #packages, #paketler {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Price badge must live inside the card without translate overshoot */
  .price-badge, .plan .badge, .plan .price, .plan .price-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    transform: none !important;
    max-width: 68px !important;
    max-height: 68px !important;
    contain: layout paint style;
    pointer-events: none;
  }

  /* Big title lines shouldn't wrap too wide */
  .plan h3, .price-card h3 { 
    word-break: break-word; 
  }
}


/* === HARD FIT: make pricing cards 100% inside viewport with safe gutters === */
@media (max-width: 640px){
  /* universal border-box to avoid padding-induced overflow */
  #paketler *, #packages *, .pricing *, .plans * { box-sizing: border-box; }

  /* outer wrappers never exceed viewport width */
  #paketler, #packages, .pricing, .plans {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow: hidden !important;
  }

  /* ensure each card respects gutters */
  #paketler .card, #packages .card,
  .pricing .card, .plans .card,
  .pricing .plan, .plans .plan,
  .price-card, .package, .paket {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important; /* 12px gutter each side */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* any badge that was centered via translate gets pinned to top-right */
  .price-badge, .plan .badge, .plan .price, .plan .price-badge {
    position: absolute !important;
    inset: 10px 10px auto auto !important; /* top/right */
    transform: translate(0,0) !important;
    max-width: 64px !important;
    max-height: 64px !important;
    z-index: 1;
  }

  /* avoid off-screen shadows/glows causing scroll */
  .pricing .card::before, .plans .card::before,
  .price-card::before, .package::before, .paket::before {
    max-width: 100% !important;
  }

  /* CTA full width and sticky to bottom of card spacing-wise */
  .pricing .btn, .plans .btn, .price-card .btn, .package .btn, .paket .btn,
  .pricing button, .plans button, .price-card button, .package button, .paket button {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 16px !important;
  }
}

/* ==== AuVidi — Mobile Pricing HARD FIX (Android narrow viewports) ==== */
@media (max-width: 640px){
  /* Global guard */
  html, body { overflow-x: hidden !important; }

  /* The pricing section (common ids/classes) */
  #paketler, #packages, .pricing, .plans {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-inline: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    contain: content; /* block scrolling caused by heavy shadows */
  }

  /* Any inner .container shouldn't lock to desktop width */
  #paketler .container, #packages .container, .pricing .container, .plans .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-inline: 0 !important;
  }

  /* Each card: clamp to viewport, clip heavy glows; prevent flex min-content overflow */
  #paketler .card, #packages .card,
  .pricing .card, .plans .card,
  .pricing .plan, .plans .plan,
  .price-card, .package, .paket {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* If a row uses flex with big gap + side padding, force single column to avoid computed overflow */
  #paketler .row, #packages .row, .pricing .row, .plans .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin: 0 !important;
  }

  /* Price badge: cancel centering transforms and keep within card */
  .price-badge, .plan .badge, .plan .price, .plan .price-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    transform: none !important;
    max-width: 60px !important;
    max-height: 60px !important;
    pointer-events: none !important;
    /* If it has outer glow via filter:drop-shadow that bleeds, reduce it */
    filter: none !important;
  }

  /* Buttons and long lines */
  .pricing .btn, .plans .btn, .price-card .btn, .package .btn, .paket .btn,
  .pricing button, .plans button, .price-card button, .package button, .paket button {
    width: 100% !important;
    min-height: 44px !important;
  }
  .price, .plan h3, .plan h4, .price-card h3, .price-card h4 { word-break: break-word !important; }
}


/* === Center price badge and CTA on phones === */
@media (max-width: 640px){
  /* Price badge: centered at top inside card */
  .price-badge, .plan .badge, .plan .price, .plan .price-badge {
    position: absolute !important;
    top: -20px !important;            /* slightly overlapping header */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: 64px !important;
    max-height: 64px !important;
  }

  /* Ensure card header has enough top space so badge doesn't push layout */
  .pricing .card, .plans .card, .price-card, .package, .paket {
    padding-top: 36px !important;
  }

  /* Buttons: full width and centered regardless of flex parents */
  .pricing .actions, .plans .actions, .plan .actions { 
    display: block !important; 
    text-align: center !important;
  }
  .pricing .btn, .plans .btn, .price-card .btn, .package .btn, .paket .btn,
  .pricing button, .plans button, .price-card button, .package button, .paket button {
    display: block !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 48px !important;
    border-radius: 14px !important;
  }
}