/* =========================================================================
   FitZEQ v1.1 — Design System
   Tema: near-black + crimson imza | Tale-of-the-tape (maç kartı) veri estetiği
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  /* surfaces */
  --bg-0:#0A0A0B; --bg-1:#141416; --bg-2:#1C1C20; --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  /* text */
  --text-0:#FAFAFA; --text-1:#A1A1AA; --text-2:#8A8A94;
  /* signature */
  --sig:#EF3E36; --sig-hover:#FF5A4D; --sig-dim:rgba(239,62,54,.12); --sig-glow:rgba(239,62,54,.45);
  --sig-edge:rgba(239,62,54,.38);
  /* geometry */
  --radius:16px; --radius-sm:10px; --radius-pill:999px;
  --shadow:0 8px 30px rgba(0,0,0,.45);
  /* spacing */
  --s-1:4px;--s-2:8px;--s-3:16px;--s-4:24px;--s-5:40px;--s-6:64px;--s-7:96px;--s-8:128px;
  --container:1200px;
  /* type */
  --f-display:"Bebas Neue",sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"Space Mono",ui-monospace,monospace;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg-0); color:var(--text-1);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
ul{list-style:none}
::selection{background:var(--sig); color:#fff}

/* klavye odağı — her etkileşimli öğede görünür */
:focus-visible{outline:2px solid var(--sig); outline-offset:3px}
.btn:focus-visible,.chip:focus-visible,.nav-links a:focus-visible{outline-offset:4px}

/* sabit başlık, bölüm başlığını örtmesin */
section[id]{scroll-margin-top:92px}
#hero{scroll-margin-top:0}
body.menu-open{overflow:hidden}

/* film-grain atmosfer */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{color:var(--text-0); font-weight:400; line-height:1}
.display{font-family:var(--f-display); letter-spacing:.5px; text-transform:uppercase}
h2.display{font-size:clamp(2.4rem,5vw,3.75rem)}
h3{font-family:var(--f-body); font-weight:700; font-size:1.15rem; line-height:1.3; letter-spacing:-.01em}
p{color:var(--text-1)}
strong{color:var(--text-0); font-weight:600}

/* ---------- Layout ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px}
.section{padding-block:var(--s-8); position:relative; z-index:2}
@media(max-width:768px){.section{padding-block:var(--s-7)}}

.eyebrow{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sig); display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--sig)}

.section-head{max-width:640px; margin-bottom:var(--s-6)}
.section-head p{margin-top:16px; font-size:1.05rem}
.section-head.center{margin-inline:auto; text-align:center}
.section-head.center .eyebrow{justify-content:center}

/* çapraz crimson kesik — bölüm ayracı */
.slash-divider{height:2px; width:100%; background:
  repeating-linear-gradient(115deg,var(--sig) 0 22px,transparent 22px 40px);
  opacity:.5; position:relative; z-index:2}

/* ---------- Components ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--radius-pill);
  font-weight:600; font-size:.92rem; letter-spacing:.01em;
  border:1px solid transparent; transition:transform .18s ease, background .18s ease,
    box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg{width:18px; height:18px}
.btn-primary{background:var(--sig); color:#fff; box-shadow:0 4px 20px var(--sig-dim)}
.btn-primary:hover{background:var(--sig-hover); box-shadow:0 8px 30px var(--sig-glow); transform:translateY(-2px)}
.btn-ghost{border-color:var(--line-strong); color:var(--text-0)}
.btn-ghost:hover{border-color:var(--sig); color:var(--sig); transform:translateY(-2px)}
.btn-lg{padding:17px 34px; font-size:1rem}

.card{
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-5px); border-color:var(--sig-edge); background:var(--bg-2); box-shadow:var(--shadow)}

.badge{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:6px 18px; border-radius:var(--radius-pill);
  background:var(--sig-dim); color:var(--sig); border:1px solid var(--sig);
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
}

/* tale-of-the-tape veri satırı */
.tape{font-family:var(--f-mono)}
.tape-row{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px dashed var(--line)}
.tape-row:last-child{border-bottom:none}
.tape-row .k{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2)}
.tape-row .v{font-family:var(--f-mono); color:var(--text-0); font-weight:700}

/* ---------- Nav ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px 32px; transition:background .3s ease, backdrop-filter .3s ease, padding .3s ease;}
.nav.scrolled{background:rgba(10,10,11,.82); backdrop-filter:blur(14px); padding-block:11px;
  border-bottom:1px solid var(--line)}
.brand{font-family:var(--f-display); font-size:1.7rem; letter-spacing:1px; color:#fff; display:flex; align-items:center}
.brand .zeq{color:var(--sig)}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a{
  padding:8px 15px; border-radius:var(--radius-pill); font-size:.9rem; font-weight:500; color:var(--text-1);
  transition:color .2s ease, background .2s ease}
.nav-links a:hover,.nav-links a.active{color:var(--text-0); background:rgba(255,255,255,.05)}
.nav-links a.active{color:var(--sig)}
.nav-cta{display:flex; align-items:center; gap:12px}
.nav-toggle{display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line);
  align-items:center; justify-content:center}
.nav-toggle svg{width:22px; height:22px; color:var(--text-0)}

/* mobil menü */
.mobile-menu{position:fixed; inset:0; z-index:999; background:rgba(8,8,9,.97); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease}
.mobile-menu.open{opacity:1; visibility:visible}
.mobile-menu a{font-family:var(--f-display); font-size:2rem; letter-spacing:1px; color:var(--text-0)}
.mobile-menu a:hover{color:var(--sig)}
/* menü açıkken hamburger → kapat işareti */
.nav-toggle.open{border-color:var(--sig); color:var(--sig)}
.nav-toggle.open svg{display:none}
.nav-toggle.open::before{content:"×"; font-size:1.9rem; line-height:1}

@media(max-width:900px){
  .nav-links,.nav-cta .btn{display:none}
  .nav-toggle{display:flex}
}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0; will-change:transform}
.hero-bg img{width:100%; height:120%; object-fit:cover; object-position:center 30%; filter:grayscale(.55) contrast(1.02) brightness(.85) blur(3px)}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 78% 15%, var(--sig-dim) 0%, transparent 45%),
    linear-gradient(180deg, rgba(10,10,11,.6) 0%, rgba(10,10,11,.74) 45%, var(--bg-0) 100%),
    linear-gradient(90deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.4) 52%, rgba(10,10,11,.8) 100%);}
.hero-inner{position:relative; z-index:2; padding-top:100px; max-width:820px}
.hero h1{font-family:var(--f-display); font-size:clamp(2.5rem,9vw,7.5rem); line-height:.92;
  color:#fff; text-transform:uppercase; letter-spacing:1px}
.hero h1 .accent{color:var(--sig); position:relative}
.hero-sub{margin-top:22px; font-size:1.15rem; max-width:520px; color:var(--text-1)}
.hero-actions{margin-top:36px; display:flex; flex-wrap:wrap; gap:14px}

/* hero stat şeridi — tale of the tape */
.hero-stats{margin-top:56px; display:flex; gap:40px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:28px}
.stat .num{font-family:var(--f-display); font-size:2.9rem; color:var(--text-0); line-height:1}
.stat .lbl{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-2); margin-top:6px}

.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--text-2);
  display:flex; flex-direction:column; align-items:center; gap:10px}
.scroll-cue .line{width:1px; height:34px; background:linear-gradient(var(--sig),transparent); animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}}

/* ---------- Transformations (öncesi/sonrası) ---------- */
.ba-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.ba-card{overflow:hidden}
/* sürüklerken kart zıplamasın — sadece çerçeve tepki versin */
.ba-card:hover{transform:none}
.ba{position:relative; aspect-ratio:4/5; overflow:hidden; user-select:none; touch-action:pan-y}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none}
.ba img.after{clip-path:inset(0 0 0 50%)}
.ba-tag{position:absolute; top:12px; z-index:3; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; padding:4px 9px; border-radius:var(--radius-pill); background:rgba(10,10,11,.7); color:var(--text-0)}
.ba-tag.before{left:12px} .ba-tag.after{right:12px; color:var(--sig)}
.ba-handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--sig); z-index:4; transform:translateX(-50%)}
.ba-handle::before{content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%) rotate(45deg);
  background:var(--sig); border-radius:8px; box-shadow:0 4px 16px var(--sig-glow)}
.ba-handle::after{content:"‹ ›"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:#fff; font-size:14px; font-weight:700; letter-spacing:1px; z-index:2}
.ba-meta{padding:18px 20px}
.ba-meta h3{margin-bottom:12px}

/* ---------- Pricing ---------- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.plan{padding:30px; display:flex; flex-direction:column; position:relative}
.plan.featured{border-color:var(--sig); background:linear-gradient(180deg,var(--sig-dim),var(--bg-1) 40%);
  box-shadow:0 0 0 1px var(--sig), var(--shadow)}
/* öne çıkan paket hover'da crimson çerçevesini kaybetmesin */
.plan.featured:hover{border-color:var(--sig); background:linear-gradient(180deg,var(--sig-dim),var(--bg-2) 40%);
  box-shadow:0 0 0 1px var(--sig), 0 10px 34px var(--sig-glow)}
.plan-badge{position:absolute; top:20px; right:20px}
.plan .term{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-2)}
.plan .price{font-family:var(--f-display); font-size:3.2rem; color:var(--text-0); line-height:1; margin:14px 0 2px; display:flex; align-items:baseline; gap:6px}
.plan .price .cur{font-size:1.3rem; color:var(--sig); font-family:var(--f-body); font-weight:700}
.plan .per{font-size:.85rem; color:var(--text-2)}
.plan ul{margin:22px 0 26px; display:flex; flex-direction:column; gap:12px}
.plan li{display:flex; align-items:flex-start; gap:10px; font-size:.92rem; color:var(--text-1)}
.plan li svg{width:18px; height:18px; color:var(--sig); flex:none; margin-top:1px}
.plan .btn{margin-top:auto; width:100%}
.pt-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:20px}
.pt-card{padding:26px 30px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.pt-card .price{font-family:var(--f-display); font-size:2.3rem; color:var(--text-0)}

/* ---------- Trainers ---------- */
.trainer-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.trainer{position:relative; overflow:hidden; aspect-ratio:3/4; border-radius:var(--radius); border:1px solid var(--line)}
.trainer img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.5); transition:filter .4s ease, transform .5s ease}
.trainer .mono-fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:4rem; color:var(--line-strong); background:var(--bg-2)}
.trainer:hover img{filter:grayscale(0); transform:scale(1.05)}
.trainer-info{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px;
  background:linear-gradient(transparent, rgba(8,8,9,.92) 55%)}
.trainer-info .role{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sig); margin-bottom:5px}
.trainer-info h3{color:#fff}
.trainer.lead{aspect-ratio:3/4}

/* ---------- MMA ---------- */
.mma{position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line)}
.mma-bg{position:absolute; inset:0; z-index:0}
.mma-bg img{width:100%; height:100%; object-fit:cover; filter:grayscale(.6) brightness(.4)}
.mma-bg::after{content:""; position:absolute; inset:0; background:
  linear-gradient(105deg, rgba(10,10,11,.92) 30%, rgba(10,10,11,.55)),
  radial-gradient(80% 90% at 90% 50%, var(--sig-dim), transparent 60%)}
.mma-inner{position:relative; z-index:2; padding:64px 56px}
.mma-inner .section-head{margin-bottom:var(--s-5)}
.mma-classes{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px}
.mma-cls{padding:22px; background:rgba(20,20,22,.7); border:1px solid var(--line); border-radius:var(--radius-sm)}
.mma-cls .ic{width:42px; height:42px; border-radius:11px; background:var(--sig-dim); color:var(--sig);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px}
.mma-cls .ic svg{width:22px; height:22px}
.mma-cls h3{font-size:1.02rem; margin-bottom:6px}
.mma-cls p{font-size:.85rem}

/* ---------- Contact / Footer ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:24px}
.contact-panel{padding:36px}
.contact-list{display:flex; flex-direction:column; gap:8px; margin:20px 0 28px}
.contact-item{display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line)}
.contact-item:last-child{border-bottom:none}
.contact-item .ic{width:44px; height:44px; flex:none; border-radius:12px; background:var(--sig-dim); color:var(--sig);
  display:flex; align-items:center; justify-content:center}
.contact-item .ic svg{width:20px; height:20px}
.contact-item .k{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-2); margin-bottom:4px}
.contact-item .v{color:var(--text-0); font-weight:500}
.contact-item a.v:hover{color:var(--sig)}
.map-wrap{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); min-height:340px}
.map-wrap iframe{width:100%; height:100%; min-height:340px; border:0; filter:grayscale(1) invert(.92) contrast(.9)}

.footer{border-top:1px solid var(--line); background:var(--bg-1); padding:56px 0 32px; position:relative; z-index:2}
.footer-top{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start}
.footer .brand{font-size:2rem}
.footer-tag{color:var(--text-2); font-size:.9rem; margin-top:10px; max-width:280px}
.footer-links{display:flex; gap:56px; flex-wrap:wrap}
.footer-col h4{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-2); margin-bottom:16px}
.footer-col a{display:block; padding:6px 0; color:var(--text-1); font-size:.92rem}
.footer-col a:hover{color:var(--sig)}
.footer-bottom{margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; color:var(--text-2)}

/* ---------- Nav cart ---------- */
.nav-cart{position:relative; width:44px; height:44px; border-radius:12px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--text-0); transition:border-color .2s ease, color .2s ease}
.nav-cart:hover{border-color:var(--sig); color:var(--sig)}
.nav-cart svg{width:20px; height:20px}
.cart-count{position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--sig); color:#fff; font-size:.68rem; font-weight:700;
  display:grid; place-items:center; font-family:var(--f-body)}

/* ---------- Store ---------- */
.store-chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:var(--s-5)}
.chip{padding:8px 16px; border-radius:var(--radius-pill); border:1px solid var(--line); background:transparent;
  color:var(--text-1); font-size:.82rem; font-weight:500; transition:border-color .2s ease, color .2s ease, background .2s ease}
.chip:hover{border-color:var(--sig); color:var(--text-0)}
.chip.active{background:var(--sig); border-color:var(--sig); color:#fff}
.store-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.store-empty{grid-column:1/-1; text-align:center; color:var(--text-2); padding:40px 0}
.product{display:flex; flex-direction:column; overflow:hidden}
.product-media{position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%, var(--sig-dim), var(--bg-2)); overflow:hidden}
.product-media img{width:100%; height:100%; object-fit:cover}
.product-icon{font-size:3.4rem; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.product-cat{position:absolute; top:12px; left:12px; font-family:var(--f-mono); font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:rgba(10,10,11,.7); color:var(--text-1)}
.stock-badge{position:absolute; top:12px; right:12px; font-family:var(--f-mono); font-size:.58rem;
  letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:999px}
.stock-badge.in{background:rgba(16,185,129,.16); color:#34d399}
.stock-badge.out{background:rgba(239,62,54,.16); color:var(--sig)}
.product-body{padding:18px 18px 20px; display:flex; flex-direction:column; flex:1}
.product-body h3{font-size:1.02rem; margin-bottom:6px}
.product-desc{font-size:.82rem; color:var(--text-2); line-height:1.5; margin-bottom:16px; flex:1}
.product-foot{display:flex; align-items:center; justify-content:space-between; gap:12px}
.product-price{font-family:var(--f-display); font-size:1.7rem; color:var(--text-0)}
.product-add{padding:10px 16px; font-size:.82rem}
.product-add:disabled{opacity:.45; cursor:not-allowed; background:var(--bg-2); color:var(--text-2); box-shadow:none; transform:none}

/* ---------- Cart drawer ---------- */
.cart-overlay{position:fixed; inset:0; z-index:1100; background:rgba(6,6,7,.6); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease}
.cart-overlay.open{opacity:1; visibility:visible}
.cart-drawer{position:fixed; top:0; right:0; bottom:0; z-index:1101; width:400px; max-width:92vw;
  background:var(--bg-1); border-left:1px solid var(--line); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.cart-drawer.open{transform:none}
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line)}
.cart-head h3{font-family:var(--f-display); font-size:1.5rem; letter-spacing:.5px}
.cart-close{width:36px; height:36px; border-radius:10px; border:1px solid var(--line); color:var(--text-1); font-size:1.4rem; line-height:1}
.cart-close:hover{border-color:var(--sig); color:var(--sig)}
.cart-items{flex:1; overflow-y:auto; padding:12px 24px}
.cart-empty{text-align:center; color:var(--text-2); padding:48px 0; line-height:1.7}
.cart-row{display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line)}
.cart-ic{font-size:1.6rem}
.cart-name{font-size:.9rem; color:var(--text-0); font-weight:500}
.cart-unit{font-family:var(--f-mono); font-size:.72rem; color:var(--text-2)}
.cart-qty{display:flex; align-items:center; gap:8px}
.cart-qty button{width:26px; height:26px; border-radius:8px; border:1px solid var(--line); color:var(--text-0); font-size:1rem}
.cart-qty button:hover{border-color:var(--sig); color:var(--sig)}
.cart-qty span{min-width:18px; text-align:center; font-family:var(--f-mono); font-size:.85rem}
.cart-line{font-family:var(--f-mono); font-size:.85rem; color:var(--text-0); font-weight:700}
.cart-foot{padding:20px 24px; border-top:1px solid var(--line)}
.cart-total-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
  font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; color:var(--text-1)}
.cart-total{font-family:var(--f-display); font-size:1.8rem; color:var(--text-0); letter-spacing:.5px}
.cart-foot .btn{width:100%}
.cart-foot .btn:disabled{opacity:.4; cursor:not-allowed}
.cart-note{margin-top:12px; text-align:center; font-size:.72rem; color:var(--text-2)}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed; bottom:24px; right:24px; z-index:1200; display:flex; flex-direction:column; gap:12px; max-width:340px}
.toast{background:var(--bg-2); border:1px solid var(--line); border-left:3px solid var(--sig); border-radius:12px;
  padding:14px 40px 14px 16px; box-shadow:var(--shadow); position:relative;
  opacity:0; transform:translateY(12px); transition:opacity .3s ease, transform .3s ease}
.toast.show{opacity:1; transform:none}
.toast-title{color:var(--text-0); font-weight:600; font-size:.92rem}
.toast-text{color:var(--text-1); font-size:.82rem; margin-top:3px; line-height:1.45}
.toast-x{position:absolute; top:8px; right:10px; color:var(--text-2); font-size:1.2rem; line-height:1}
.toast-x:hover{color:var(--sig)}

/* ---------- Motion reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(24px)}
.revealed[data-reveal]{opacity:1; transform:none}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .store-grid{grid-template-columns:repeat(3,1fr)}
}
/* tablet — 3/4 kolondan doğrudan 1'e düşmek yerine 2 kolon ara adımı */
@media(max-width:900px){
  .ba-grid,.price-grid,.trainer-grid{grid-template-columns:repeat(2,1fr)}
  /* Üç dönüşüm kartında son satırdaki "dördüncü kart" boşluğu oluşmasın.
     Son kart, üstteki kartlarla aynı ölçüde ve ortalanmış kalır. */
  .ba-card:last-child{grid-column:1/-1; width:calc(50% - 10px); justify-self:center}
  .mma-classes,.contact-grid,.pt-grid{grid-template-columns:1fr}
  .store-grid{grid-template-columns:repeat(2,1fr)}
  .trainer.lead{grid-column:auto}
  .mma-inner{padding:40px 26px}
}
@media(max-width:640px){
  .ba-grid,.price-grid,.trainer-grid{grid-template-columns:1fr}
  .ba-card:last-child{grid-column:auto; width:auto; justify-self:stretch}
  /* Kadro: mobilde portre kartlar yerine kompakt, dönüşümlü fight-card şeridi. */
  .trainer-grid{display:flex; flex-direction:column; gap:16px}
  .trainer{width:86%; aspect-ratio:16/10; min-height:0}
  .trainer:nth-child(odd){align-self:flex-start}
  .trainer:nth-child(even){align-self:flex-end}
  .trainer-info{padding:14px}
  .trainer-info .role{font-size:.58rem; letter-spacing:.12em; margin-bottom:3px}
  .trainer-info h3{font-size:1rem}
  .trainer .mono-fallback{font-size:3.2rem}
  /* Paketler: uzun kartları tekdüze bir kolon yerine dönüşümlü fiyat şeridi yap. */
  .price-grid,.pt-grid{display:flex; flex-direction:column; gap:16px}
  .plan,.pt-card{width:90%; padding:22px}
  .plan:nth-child(odd),.pt-card:nth-child(odd){align-self:flex-start}
  .plan:nth-child(even),.pt-card:nth-child(even){align-self:flex-end}
  /* Ücretsiz deneme ve özel dersler, üyelik paketlerinden ayrışıp merkezde dursun. */
  .plan:last-child,.pt-card:nth-child(n){align-self:center}
  .plan .price{font-size:2.35rem; margin:10px 0 2px}
  .plan-badge{top:14px; right:14px}
  .plan ul{margin:16px 0 20px; gap:9px}
  .plan li{gap:8px; font-size:.85rem}
  .plan li svg{width:16px; height:16px}
  .pt-card{gap:12px}
}
@media(max-width:600px){
  /* Mobil: içeriği daha yoğun tut, ancak düğmelerin dokunma alanını koru. */
  .container{padding-inline:16px}
  .nav{padding:14px 18px}
  .hero-inner{padding-top:80px}
  .hero h1{font-size:2.3rem; letter-spacing:0}
  .hero-sub{margin-top:16px; font-size:1rem; line-height:1.55}
  .hero-actions{margin-top:28px; gap:10px}
  .btn{padding:12px 20px}
  .btn-lg{padding:14px 24px}
  .hero-stats{margin-top:36px; gap:20px; padding-top:20px}
  .stat .num{font-size:2.15rem}
  .section{padding-block:56px}
  .section-head{margin-bottom:40px}
  .section-head p{margin-top:12px; font-size:.98rem}
  h2.display{font-size:2.15rem}
  .eyebrow{margin-bottom:12px; font-size:.64rem; letter-spacing:.22em}
  .plan{padding:22px}
  .plan .price{font-size:2.35rem}
  .pt-card,.contact-panel{padding:24px}
  .mma-inner{padding:32px 22px}
  .footer{padding-top:40px}
  /* Mağaza: telefonda iki ürün yan yana; dar kart içeriği taşmadan okunur. */
  .store-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .product-icon{font-size:2.5rem}
  .product-cat{top:8px; left:8px; padding:3px 6px; font-size:.5rem; letter-spacing:.08em}
  .stock-badge{top:8px; right:8px; padding:3px 6px; font-size:.5rem; letter-spacing:.06em}
  .product-body{padding:12px}
  .product-body h3{font-size:.9rem; line-height:1.25; margin-bottom:5px}
  .product-desc{font-size:.74rem; line-height:1.4; margin-bottom:10px;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
  .product-foot{align-items:stretch; flex-direction:column; gap:8px}
  .product-price{font-size:1.45rem}
  .product-add{width:100%; min-height:42px; padding:8px 6px; font-size:.72rem}
  .cart-drawer{width:100%; max-width:100%}
  .toast-wrap{right:16px; bottom:16px; left:16px; max-width:none}
}
/* mobil menüye eklenen WhatsApp CTA (a stillerini ez) */
.mobile-menu .btn{margin-top:20px; font-size:1rem; font-family:var(--f-body); color:#fff}
.mobile-menu .btn:hover{color:#fff}
.mobile-menu .btn svg{width:20px; height:20px}
/* çok küçük ekran — yatay taşmayı kesin önle */
@media(max-width:380px){
  .stat .num{font-size:1.95rem}
  .hero h1{font-size:2.1rem}
  .hero-stats{gap:18px}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important; transform:none !important}
  .hero-bg{transform:none !important}
}