/* ================================================================
   Responsive overrides — sit AFTER inline.css so they win.
   Focus: kill horizontal scroll, collapse desktop-only chrome
   below the ≥993px breakpoint, and let hero/sections breathe on
   phones & tablets. Nothing above 1247px is touched so the desktop
   design stays 1:1 with the original.
   ================================================================ */
html,body{overflow-x:hidden;max-width:100vw}
img,svg,video,canvas{max-width:100%}
main a,main button,main label,main input,main select,main textarea{max-width:100%}
main{word-break:break-word;overflow-wrap:anywhere}

/* ---------- Tablet & phone (< 993px) ---------- */
@media (max-width:992px){
  /* Header — hide desktop-only chrome but KEEP the login CTA visible.
     The "Giriş yap" button lives inside .header__desktop-right, so we
     can't hide that wrapper; hide its icon clusters instead. */
  .header__desktop-links,
  .header__desktop-actions,
  .p26-nav-item-menu{display:none!important}
  .header__wrapper{height:64px}
  .header{position:relative;z-index:20}
  .header .container,
  .header .place-items-between{width:100%!important;max-width:100%!important;
    margin:0!important;padding:0 16px!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px}
  .header__list{display:flex!important;align-items:center;justify-content:flex-end!important;gap:8px;
    margin-left:auto;flex:0 1 auto!important;width:auto!important;padding:0!important}
  .header__desktop-right{display:flex!important;align-items:center;gap:8px;margin-left:auto}
  .header__logo img{width:100px;height:auto;max-width:100px}
  .header__desktop-right{flex:0 0 auto!important}
  html.paribu-home [data-paribu-fragment=header] .header__wrapper{height:64px!important}
  /* Force the "Giriş yap" CTA visible + sized for touch. */
  .header .header__desktop-right .p26-button,
  .header__list .p26-button{display:inline-flex!important;visibility:visible!important;opacity:1!important;
    font-size:14px!important;height:36px!important;padding:0 16px!important;
    white-space:nowrap!important;line-height:1!important}

  /* Hero — font-size lives on CSS vars used by the line spans. */
  .hp{--hp-fz-hero-1:clamp(34px,9vw,60px)!important;
      --hp-fz-hero-2:clamp(28px,7.5vw,52px)!important;
      --hp-lh-hero-1:1.05!important;--hp-lh-hero-2:1.1!important;
      --hp-gutter:16px!important}
  .hp-hero{padding-top:96px!important}
  .hp-hero__title{min-height:0!important;top:0!important;text-align:center!important;
    text-wrap:balance;overflow-wrap:break-word}
  .hp-hero__title-line{display:block!important;width:100%!important;white-space:normal!important}
  .hp-hero__desc,.hp-lead{font-size:16px;line-height:1.5}
  .hp-container,.hp-container--narrow{padding-inline:16px!important}
  .hp-hero__actions{flex-direction:column;align-items:stretch;gap:12px;margin-top:32px}
  .hp-hero__actions .hp-btn{width:100%;max-width:360px;margin-inline:auto;justify-content:center}
  .hp-hero__cards{margin-inline:auto}
  .hp-hero__qr{display:none!important}

  /* Any section that used a two-column split should stack */
  .hp-panel--split,
  .hp-wallet__inner,
  .hp-markets__inner,
  .hp-news__inner,
  .hp-tiers__panel{display:flex!important;flex-direction:column!important;gap:32px!important}
  .hp-wallet__phone,.hp-markets__phone,.hp-support__phone{width:100%;max-width:340px;margin-inline:auto}
  .hp-wallet__phone-img,.hp-markets__phone-img{width:100%;height:auto}

  /* Trade rows */
  .hp-trade__row,.hp-trade__row--flip{display:flex!important;flex-direction:column!important;
    align-items:center!important;gap:24px!important;text-align:center}
  .hp-trade__phone{width:100%;max-width:280px}
  .hp-trade__shot{width:100%;height:auto}
  .hp-trade__float{position:relative!important;inset:auto!important;transform:none!important;
    width:100%;max-width:340px;margin:0 auto}

  /* Titles — reset vars used by hp-title / hp-title--panel / hp-title--md */
  .hp{--hp-fz-title:clamp(28px,7vw,48px)!important;
      --hp-fz-title-dark:clamp(26px,6vw,42px)!important;
      --hp-fz-title-md:clamp(24px,5.5vw,38px)!important;
      --hp-lh-title:1.1!important;--hp-lh-title-dark:1.1!important;--hp-lh-title-md:1.15!important}
  .hp-title,.hp-title--panel,.hp-title--md{text-wrap:balance;overflow-wrap:break-word;
    max-width:100%;word-break:normal}
  .hp-title span{display:inline}

  /* Clusters of cards — stack cleanly */
  .hp-wallet__cluster,
  .hp-markets__cluster{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;
    position:relative!important;height:auto!important}
  .hp-wallet__cluster > *,
  .hp-markets__cluster > *{position:relative!important;inset:auto!important;transform:none!important;
    width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important}

  /* News drum + phone */
  .hp-news__stage{display:flex!important;flex-direction:column!important;gap:24px!important;
    height:auto!important;padding:0!important}
  .hp-news__drum,.hp-news__phone{width:100%!important;max-width:360px!important;margin-inline:auto!important;
    position:relative!important;inset:auto!important;transform:none!important;height:auto!important}
  .hp-news__curl{display:none!important}

  /* Tier deck: no fanned-out overlap on mobile */
  .hp-tiers__deck{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;
    gap:12px!important;height:auto!important}
  .hp-tiers__slot{position:relative!important;inset:auto!important;transform:none!important;
    width:calc(50% - 12px)!important;max-width:220px!important;height:auto!important}
  .hp-tiers__card{width:100%;height:auto}

  /* Dev / code snippet */
  .hp-dev__window{overflow:hidden}
  .hp-dev__pane{overflow-x:auto;font-size:12px;line-height:1.5}

  /* Support chat */
  .hp-support__phone{width:100%;max-width:340px}

  /* Universe rail */
  .hp-universe__rail{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .hp-universe__slide{scroll-snap-align:start;flex:0 0 80%}
  .hp-universe__card{width:100%}

  /* Footer */
  .footer .row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:24px!important}
  .footer .col-2{width:100%!important}
  .footer .footer__link a,.footer .footer__social--link a{white-space:normal;word-break:break-word}
  .footer .footer__qrcode{display:none}
}

/* ---------- Phones only (< 768px) ---------- */
@media (max-width:767px){
  .hp-hero__title{font-size:clamp(34px,11vw,54px)!important}
  .hp-title{font-size:clamp(24px,8vw,40px)!important}
  .hp-lead,.hp-hero__desc{font-size:15px}
  .hp-container,.hp-container--narrow{padding-inline:14px!important}
  .footer .row{grid-template-columns:1fr!important}
  .hp-tiers__slot{width:100%!important;max-width:260px!important}
  .hp-universe__slide{flex:0 0 90%}
  .p26-button{font-size:13px;height:34px;padding:0 12px}
}

/* ---------- Extra small (< 380px) — guard against QR/hero clipping ---------- */
@media (max-width:379px){
  .hp-hero__title{font-size:36px!important}
  .hp-title{font-size:26px!important}
  .header .container,.header .place-items-between{padding:0 12px!important}
  .header__logo img{width:88px;max-width:88px}
}