:root{
  --paper:#f1f0ec;
  --ink:#0a0a0a;
  --line:rgba(10,10,10,.28);
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
.heading{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
img,svg{max-width:100%;display:block}

/* ---------- Navbar (shared across all pages) ---------- */
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(.85rem,2vw,1.15rem) clamp(1.25rem,4vw,3rem);
  border-bottom:1px solid var(--ink);
  background:var(--paper);
  flex-wrap:wrap;
  position:relative;
  z-index:5;
}
.nav-logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  flex:none;
}
.nav-logo-img{
  display:block;
  height:clamp(20px,2.6vw,27px);
  width:auto;
}
.nav-right{
  display:flex;
  align-items:center;
  gap:clamp(1.5rem,3.2vw,2.75rem);
  flex-wrap:wrap;
  justify-content:flex-end;
  row-gap:.6rem;
}
.nav-links{
  display:flex;
  gap:clamp(.9rem,2vw,1.6rem);
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
  row-gap:.5rem;
}
.nav-links a{
  text-decoration:none;
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
  padding-bottom:.15rem;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease, opacity .15s ease;
}
.nav-links a:hover{border-color:var(--ink)}
.nav-search{display:flex;align-items:center;gap:1.1rem;flex:none}
.search-box{
  display:flex;align-items:center;gap:.55rem;
  border:1px solid var(--line);
  padding:.45rem .85rem;
  min-width:13rem;
  color:rgba(10,10,10,.5);
  font-size:.76rem;
}
.search-box svg{width:14px;height:14px;flex:none}
.search-box svg *{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.nav-icon{width:19px;height:19px;flex:none;display:inline-flex}
.nav-icon svg{width:100%;height:100%}
.nav-icon svg *{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Language switcher (next to the account icon) ---------- */
.nav-lang{position:relative;flex:none}
.nav-lang-btn{
  display:flex;align-items:center;gap:.32rem;
  border:0;background:none;padding:0;margin:0;cursor:pointer;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:700;font-size:.66rem;letter-spacing:.08em;
  color:var(--ink);text-transform:uppercase;
}
.nav-lang-btn > svg:first-child{width:17px;height:17px;flex:none}
.nav-lang-btn svg *{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nav-lang-caret{width:8px;height:8px;flex:none;transition:transform .18s ease}
.nav-lang.is-open .nav-lang-caret{transform:rotate(180deg)}

.nav-lang-menu{
  position:absolute;top:calc(100% + .85rem);right:0;
  min-width:8.5rem;
  background:var(--paper);border:1px solid var(--ink);
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease;
  z-index:30;
}
.nav-lang.is-open .nav-lang-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
.nav-lang-menu button{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  width:100%;border:0;background:none;text-align:left;cursor:pointer;
  padding:.65rem .9rem;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:rgba(10,10,10,.5);
  border-bottom:1px solid var(--line);
}
.nav-lang-menu button:last-child{border-bottom:0}
.nav-lang-menu button:hover{background:rgba(10,10,10,.05);color:var(--ink)}
.nav-lang-menu button[aria-selected="true"]{color:var(--ink)}
.nav-lang-menu button[aria-selected="true"] .nav-lang-check{opacity:1}
.nav-lang-check{opacity:0;font-size:.65rem}

/* ---------- Mobile hamburger + off-canvas drawer ---------- */
.nav-topline{display:contents}

.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:24px;height:20px;
  border:0;background:none;padding:0;margin:0;
  cursor:pointer;flex:none;
}
.nav-burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:1px;transition:transform .2s ease,opacity .2s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-scrim{
  position:fixed;inset:0;background:rgba(10,10,10,.45);
  opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:20;
}
.nav-scrim.is-open{opacity:1;pointer-events:auto}

.nav-drawer{
  position:fixed;top:0;left:0;bottom:0;
  width:min(78vw,320px);
  background:var(--paper);
  border-right:1px solid var(--ink);
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  z-index:21;
  display:flex;flex-direction:column;gap:2rem;
  padding:5.5rem clamp(1.5rem,6vw,2.25rem) 2rem;
  overflow-y:auto;
}
.nav-drawer.is-open{transform:translateX(0)}
.drawer-cats,.drawer-links{display:flex;flex-direction:column;gap:1.15rem;margin:0;padding:0}
.drawer-cats a,.drawer-links a{
  text-decoration:none;color:var(--ink);font-weight:700;
  font-size:1rem;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid transparent;padding-bottom:.2rem;width:fit-content;
}
.drawer-cats a:hover,.drawer-links a:hover{border-color:var(--ink)}
.drawer-links{border-top:1px solid var(--line);padding-top:1.5rem}
.drawer-links a{font-size:.82rem;letter-spacing:.09em}
body.drawer-open{overflow:hidden}

@media(max-width:760px){
  .navbar{row-gap:.75rem}
  .nav-topline{
    display:flex;
    position:relative;
    align-items:center;
    justify-content:center;
    width:100%;
  }
  .nav-burger{display:flex;position:absolute;left:0;top:50%;transform:translateY(-50%)}
  .nav-right{width:100%;justify-content:space-between}
  .search-box{min-width:0}
  .nav-links{display:none}
  .nav-search{gap:.8rem;width:100%;justify-content:space-between}
}

/* ---------- Category chip links (hero subtitle + footer) ---------- */
.cat-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.5em;
}
.cat-links a{
  text-decoration:none;
  color:inherit;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
.cat-links a:hover{border-color:currentColor}
.cat-sep{opacity:.5}

.cat-item{position:relative}

/* Full-width mega panel: a single shared band that opens below the
   entire category row. It sits in normal flow (flex child of
   .poster, between .caption-row and .photo) so growing it actually
   pushes the hero image down instead of floating on top of it. */
.cat-mega{
  flex:0 0 auto;
  width:100%;
  max-height:0;
  overflow:hidden;
  background:var(--paper);
  border-bottom:1px solid transparent;
  opacity:0;
  transition:max-height .32s cubic-bezier(.2,.8,.2,1),opacity .22s ease,border-color .32s ease;
  pointer-events:none;
}
.cat-mega.is-open{
  opacity:1;
  border-color:var(--ink);
  pointer-events:auto;
}
.cat-mega-inner{
  max-width:1180px;
  margin:0 auto;
  padding:2rem clamp(1.25rem,4vw,3rem) 2.25rem;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  text-align:left;
}
.cat-mega-title{
  margin:0;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(10,10,10,.5);
}
.cat-mega-list{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 2.5rem;
  list-style:none;
  margin:0;
  padding:0;
}
.cat-mega-list a{
  text-decoration:none;color:var(--ink);
  font-size:.95rem;font-weight:600;letter-spacing:.01em;
  text-transform:none;white-space:nowrap;
  border-bottom:1px solid transparent;padding-bottom:.15rem;
  width:fit-content;
}
.cat-mega-list a:hover{border-color:var(--ink)}

@media(max-width:760px){
  .cat-mega{display:none}
}

.foot-row nav a{
  text-decoration:none;
  display:inline-flex;align-items:center;gap:.35rem;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
.foot-row nav a:hover{border-color:currentColor}

/* ---------- Coming-soon simple sub-pages (swim/ride/run/fuel/outdoor/markalar) ---------- */
.coming-page{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
.coming-main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem clamp(1.25rem,5vw,3rem);
  gap:clamp(1rem,3vh,1.75rem);
}
.coming-kicker{
  margin:0;
  font-size:clamp(.7rem,1.4vw,.85rem);
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(10,10,10,.55);
}
.coming-main h1{
  margin:0;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:.95;
  font-size:clamp(2.6rem,11vw,7rem);
  text-transform:uppercase;
}
.coming-back{
  margin-top:.5rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:.15rem;
}