/* ============================================================
   ANKATEK — responsive layer
   Breakpoints exercised: 1440 · 1366 · 1200 · 1024 · 900 · 768
                          · 600 · 430 · 390 · 375 · 320
   Mobile is laid out on its own terms, not as a shrunken desktop.
   ============================================================ */

@media (max-width:1440px){
  :root{--wrap:1240px}
}

@media (max-width:1320px){
  .nav__link{padding-inline:9px;font-size:.87rem}
  .searchbar--head{max-width:220px}
}

@media (max-width:1200px){
  :root{--gutter:20px;--head-h:84px}
  .grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mega{width:min(960px,94vw)}
  .mega__grid{grid-template-columns:repeat(3,1fr)}
  .layout{grid-template-columns:250px minmax(0,1fr);gap:24px}
  .footer__grid{grid-template-columns:1.4fr 1fr 1.2fr;gap:28px}
  .footer__grid > :nth-child(3){grid-column:span 1}
  .header__phone{display:none}
}

@media (max-width:1024px){
  .nav,.searchbar--head{display:none}
  .burger{display:inline-flex}
  .header__in{gap:14px;justify-content:space-between}
  .header__actions{gap:8px}
  .hero__in{grid-template-columns:1fr;gap:34px}
  .hero__art{max-width:520px}
  .hero__tile:nth-child(1),.hero__tile:nth-child(4){transform:none}
  .pdetail{grid-template-columns:1fr;gap:28px}
  .layout{grid-template-columns:1fr}
  /* Filters move above the grid and start collapsed, so the products are still
     the first thing on screen but the facets are one tap away. */
  .side{position:static;order:-1;display:none}
  .side.is-open{display:flex}
  .filterbtn{display:inline-flex}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:1fr 1fr;gap:26px}
}

@media (max-width:900px){
  .grid--4,.grid--auto{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .ctaband{flex-direction:column;align-items:flex-start;text-align:left}
  /* Keep the top strip to a single line: drop the address and hours. */
  .topbar__in > .topbar__list:first-child{display:none}
  .topbar__in{justify-content:center}
}

@media (max-width:640px){
  /* The shop button becomes icon-only so the burger always has room. */
  .ec-label{display:none}
  .header__actions .btn--accent{padding-inline:12px}
  .topbar{font-size:.76rem}
  .topbar__list{gap:14px}
}

@media (max-width:768px){
  :root{--head-h:72px;--gutter:16px}
  body{font-size:15.5px}
  .logo img{height:42px}
  .section{padding-block:40px}
  .shead{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:24px}
  .shead .btn{align-self:stretch}
  .grid{gap:14px}
  .grid--2{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .searchhero__in{flex-direction:column;align-items:stretch;gap:14px}
  /* flex-basis sits on the MAIN axis. Once this container turns into a column,
     the 460px basis from the desktop rule becomes the input's HEIGHT, which
     blew the search box up to ~460px tall. Reset it to auto here. */
  .searchhero .searchbar{flex:0 0 auto}
  .searchhero__tags{flex:0 0 auto}
  /* A nowrap scroller is still a flex item: without min-width:0 its automatic
     minimum size is the full width of the chips, which pushes the page sideways
     instead of scrolling inside its own box. */
  .searchhero__tags{overflow-x:auto;flex-wrap:nowrap;min-width:0;max-width:100%;
    padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .searchhero__tags::-webkit-scrollbar{display:none}
  .searchhero__tags .tag{flex:none}
  .toolbar{gap:10px}
  .toolbar .select{flex:1;min-width:0}
  .tabs__nav{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tabs__nav::-webkit-scrollbar{display:none}
  .tabs__btn{flex:none;padding-inline:14px}
  .specs th{width:44%}
  .footer__grid{grid-template-columns:1fr;gap:26px}
  .footer__bar{flex-direction:column;gap:8px}
  .fab{right:12px;bottom:12px}
  .fab a{width:50px;height:50px}
  .crumbs{font-size:.79rem}
  .crumbs ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .crumbs ol::-webkit-scrollbar{display:none}
  .crumbs li{white-space:nowrap}
}

@media (max-width:600px){
  /* Tile captions are labels, not paragraphs: keep them to two lines so they
     never bury the product photo underneath. */
  .hero__tile figcaption{padding:12px 9px 7px;font-size:.7rem;line-height:1.25}
  .hero__tile figcaption span{-webkit-line-clamp:2}
  .hero__eyebrow{flex-wrap:wrap;row-gap:2px;letter-spacing:.03em}
  .hero__eyebrow .sep{display:none}
  .grid--4,.grid--3,.grid--auto{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* .grid--info and .grid--docs are intentionally absent: they size themselves. */
  .gal{grid-template-columns:repeat(2,1fr);gap:10px}
  .card__body{padding:12px 13px 14px;gap:7px}
  .card__title{font-size:.92rem;-webkit-line-clamp:3}
  .card__meta{display:none}
  .card__foot{padding-top:9px}
  .cattile__body{padding:13px 14px 16px}
  .cattile__title{font-size:.97rem}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .hero__art{grid-template-columns:1fr 1fr;gap:10px}
  .doccard{flex-wrap:wrap}
  /* Grid instead of wrap: the status chip takes its own row and the two
     buttons stay the same width, which is what stopped the download button
     landing half-indented on a line of its own. */
  .doccard__acts{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .doccard__acts > .chip{grid-column:1/-1;justify-self:start}
  .doccard__acts .btn{width:100%;min-width:0}
  .btnrow{width:100%}
  .btnrow .btn{flex:1 1 auto;min-width:0}
  /* Long Turkish labels ("Teknik Dokümanı Görüntüle") are wider than a 320px
     screen; let them wrap rather than overflow. */
  .doccard__acts .btn,.pactions .btn{white-space:normal;text-align:center}
  .pactions{flex-direction:column}
  .pactions .btn{width:100%}
  .pgal__thumbs{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px}
  .oc__foot{grid-template-columns:1fr}
}

@media (max-width:430px){
  /* Below this the two-up button pair no longer fits a Turkish label. */
  .doccard__acts{grid-template-columns:1fr}
  .btnrow{flex-direction:column;align-items:stretch}
  .btnrow .btn{width:100%}
  :root{--gutter:14px}
  .hero__stats{grid-template-columns:1fr 1fr;gap:14px}
  .brandtile img{max-height:46px}
  .pager a,.pager span{min-width:38px;height:38px;padding-inline:9px;font-size:.84rem}
}

@media (max-width:360px){
  /* Product and category cards stay two-up on a phone — that is how a catalogue
     is scanned. Only cards carrying a button row or an address needed their own
     grid, and those use .grid--docs / .grid--info instead. */
  .grid--4,.grid--3,.grid--auto{grid-template-columns:1fr}
}

@media (max-width:390px){
  body{font-size:15px}
  .gal{grid-template-columns:1fr}
  .card__media{aspect-ratio:16/10}
  .card__meta{display:-webkit-box}
  .hero__art{grid-template-columns:1fr 1fr}
  .btn{padding:12px 18px;font-size:.9rem}
}

@media (max-width:340px){
  :root{--gutter:12px}
  .logo img{height:36px}
  .iconbtn{width:40px;height:40px}
  .hero__eyebrow{font-size:.72rem;padding:6px 12px}
}

/* Touch devices: hover-only affordances must not stick on tap. */
@media (hover:none){
  .card:hover,.cattile:hover,.brandtile:hover{transform:none;box-shadow:var(--shadow-1)}
  .brandtile img{filter:none;opacity:1}
  .nav__item:hover .mega{opacity:0;visibility:hidden}
}

@media print{
  .topbar,.header,.fab,.footer__shop,.oc,.lb,.pactions,.searchhero{display:none!important}
  body{font-size:11pt;color:#000}
  a{color:#000;text-decoration:underline}
  .card,.panel,.doccard{break-inside:avoid;border-color:#999}
}