/* =========================================================================
   ASLAN SPOR — Premium Sneaker Landing
   1. Tokens          5. Hero            9.  Instagram
   2. Base            6. Brands          10. Store
   3. Components      7. Products        11. Contact / Footer
   4. Header / Nav    8. Showcase        12. Motion & Responsive
   ========================================================================= */

/* ─────────────────────────── 1. TOKENS ─────────────────────────── */
:root{
  --bg:#050506;
  --bg-2:#0a0a0c;
  --surface:#101013;
  --surface-2:#16161a;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);

  --white:#ffffff;
  --text:#f4f4f5;
  --muted:#8b8b95;
  --muted-2:#5e5e68;

  --accent:#f5901e;
  --accent-2:#ffb454;
  --accent-deep:#c96a06;
  --accent-glow:rgba(245,144,30,.35);

  --font-display:'Anton','Arial Narrow',Impact,'Haettenschweiler',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --container:1360px;
  --gutter:clamp(20px,5vw,64px);
  --radius:20px;
  --radius-sm:12px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --header-h:84px;
}

/* ─────────────────────────── 2. BASE ─────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
address{font-style:normal}
h1,h2,h3,p{margin:0}
::selection{background:var(--accent);color:#000}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{position:relative;padding-block:clamp(88px,12vw,168px)}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:12px;left:12px;z-index:2000;
  transform:translateY(-200%);
  background:var(--accent);color:#000;font-weight:700;font-size:13px;
  padding:10px 18px;border-radius:999px;transition:transform .3s var(--ease);
}
.skip-link:focus-visible{transform:translateY(0)}

/* Grain overlay (global, çok hafif) */
body::after{
  content:"";position:fixed;inset:0;z-index:900;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─────────────────── 3. COMPONENTS ─────────────────── */
.sec-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:600;letter-spacing:.22em;
  color:var(--muted);text-transform:uppercase;margin-bottom:20px;
}
.sec-eyebrow .dot,.hero__eyebrow .dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(245,144,30,.15);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(245,144,30,.15)}50%{box-shadow:0 0 0 9px rgba(245,144,30,0)}}

.sec-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.6rem,7.2vw,6rem);
  line-height:.92;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.sec-title em{font-style:normal;color:var(--accent)}
.sec-desc{color:var(--muted);max-width:46ch;margin-top:22px;font-size:clamp(15px,1.6vw,17px)}
.sec-head{margin-bottom:clamp(48px,6vw,84px);max-width:820px}
.sec-head--left{margin-bottom:clamp(40px,5vw,64px)}

/* Buttons */
.btn{
  --btn-bg:transparent;--btn-fg:var(--white);--btn-bd:var(--line-strong);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:56px;padding:0 30px;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease),box-shadow .4s var(--ease);
}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn span{position:relative;z-index:2}
.btn svg{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:#0a0a0a;border-color:transparent}

.btn--primary{--btn-bg:linear-gradient(120deg,var(--accent),var(--accent-2));--btn-fg:#0a0a0a;--btn-bd:transparent;
  box-shadow:0 10px 40px -12px var(--accent-glow);}
.btn--primary::before{background:var(--white);}
.btn--primary:hover{color:#0a0a0a;box-shadow:0 16px 50px -12px var(--accent-glow)}

.btn--ghost{--btn-bg:rgba(255,255,255,.02)}
.btn--wa{height:44px;padding:0 20px;font-size:11px;--btn-bd:var(--line-strong)}
.btn--wa svg{width:16px;height:16px}

.icon-btn{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-strong);color:var(--white);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{background:var(--accent);color:#0a0a0a;border-color:var(--accent);transform:translateY(-2px)}

/* ─────────────────── 4. HEADER / NAV ─────────────────── */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:height .45s var(--ease),background .45s var(--ease),
             backdrop-filter .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  height:70px;
  background:rgba(6,6,8,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line);
}
.header.is-hidden{transform:translateY(-102%)}
.header{transition:transform .5s var(--ease),height .45s var(--ease),background .45s var(--ease),backdrop-filter .45s var(--ease),border-color .45s var(--ease)}
.header__inner{
  width:100%;max-width:var(--container);margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;align-items:center;gap:24px;
}

/* ── Marka kilidi ────────────────────────────────────────────────────────
   Gerçek logo tek dosyadan (images/logo.jpg, 945×2048) CSS ile kırpılır:
     aslan başı → 316,757  258×303
     yazı       → 99,1097  681×106
     tam kilit  → 99,757   681×446
   Kaynağın fonu saf siyah (parlaklık 3/255) olduğu için "screen" karışımı
   fonu tamamen eritir; ayrı bir şeffaf PNG'ye gerek kalmaz.
   --s ölçek çarpanıdır: görünen yükseklik = --h × --s piksel.
   ---------------------------------------------------------------------- */
.brandmark{
  display:block;flex:0 0 auto;
  width:calc(var(--w) * var(--s) * 1px);
  height:calc(var(--h) * var(--s) * 1px);
  background-image:url("../../images/logo.jpg");
  background-repeat:no-repeat;
  background-size:calc(945px * var(--s)) calc(2048px * var(--s));
  background-position:calc(var(--x) * var(--s) * -1px) calc(var(--y) * var(--s) * -1px);
  /* JPEG'in fonu 3/255; kontrast onu tam 0'a ezer, böylece "screen" sonrası
     logonun etrafında hafif dikdörtgen izi kalmaz. Beyaz ve turuncu korunur. */
  filter:contrast(1.16);
  mix-blend-mode:screen;
}
.brandmark--lion{--w:258;--h:303;--x:316;--y:757}
.brandmark--word{--w:681;--h:106;--x:99;--y:1097}
.brandmark--full{--w:681;--h:446;--x:99;--y:757}

.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.logo .brandmark--lion{--s:.112;transition:transform .5s var(--ease),filter .4s var(--ease)}
.logo .brandmark--word{--s:.176;transition:transform .5s var(--ease)}
.logo:hover .brandmark--lion{transform:rotate(-5deg) scale(1.06)}
.header.is-stuck .logo .brandmark--lion{--s:.099}
.header.is-stuck .logo .brandmark--word{--s:.155}

.nav{margin-inline:auto}
.nav__list{display:flex;gap:6px}
.nav__link{
  position:relative;display:block;padding:10px 16px;border-radius:999px;
  font-size:13px;font-weight:500;color:var(--muted);
  transition:color .35s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__link:hover{color:var(--white)}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--white)}
.nav__link.is-active::after{transform:scaleX(1)}

.header__actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}

.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);
  position:relative;flex:0 0 auto}
.burger span{
  position:absolute;left:13px;width:18px;height:1.5px;background:var(--white);
  transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* Mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:999;
  background:rgba(5,5,7,.985);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  padding:calc(var(--header-h) + 20px) var(--gutter) calc(22px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transition:opacity .45s var(--ease);
}
.mobile-menu.is-open{opacity:1}
.mobile-menu__nav{display:flex;flex-direction:column;gap:4px;margin:auto 0}
.mobile-menu__nav a{
  display:flex;align-items:baseline;gap:16px;
  font-family:var(--font-display);font-size:clamp(2.2rem,11vw,3.4rem);
  text-transform:uppercase;line-height:1.1;padding:8px 0;
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s var(--ease);
}
.mobile-menu.is-open .mobile-menu__nav a{opacity:1;transform:none}
.mobile-menu__nav a:active{color:var(--accent)}
.mobile-menu__nav i{font-family:var(--font-body);font-style:normal;font-size:11px;
  color:var(--accent);letter-spacing:.1em;font-weight:600}
.mobile-menu__foot{margin-top:28px;display:flex;flex-direction:column;gap:12px;flex:0 0 auto}
.mobile-menu__phone{font-family:var(--font-display);font-size:26px;color:var(--white)}
.mobile-menu__foot .btn{width:100%}

/* ─────────────────── 5. HERO ─────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  padding-top:calc(var(--header-h) + 16px);
  padding-bottom:64px;
  display:flex;align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:-2;pointer-events:none}
.hero__grid{
  position:absolute;inset:-10%;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 10%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 10%,transparent 78%);
  animation:gridDrift 28s linear infinite;
}
@keyframes gridDrift{to{background-position:78px 78px,78px 78px}}
.hero__glow{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(1100px,120vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(245,144,30,.20) 0%,rgba(245,144,30,.07) 32%,transparent 66%);
  filter:blur(10px);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.hero__spot{
  position:absolute;left:50%;top:-30%;transform:translateX(-50%);
  width:min(760px,90vw);height:120%;
  background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 62%);
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);
  filter:blur(28px);opacity:.55;
}
.hero__noise{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 100% 60% at 50% 100%,rgba(5,5,6,.9),transparent 70%);
}
.hero__ghost{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  z-index:-1;pointer-events:none;
  font-family:var(--font-display);
  font-size:clamp(7rem,25vw,22rem);
  line-height:.8;letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.055);
  white-space:nowrap;
}

.hero__inner{
  position:relative;width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--gutter);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--muted);
  text-transform:uppercase;
}
.hero__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.9rem,7.4vw,6.6rem);
  line-height:.9;letter-spacing:-.015em;text-transform:uppercase;
  margin:16px auto 0;max-width:15ch;
}
.hero__title em{font-style:normal;color:var(--accent)}

/* Sahne yüksekliği bilinçli olarak görselden kısa: fotoğrafın siyah üst/alt
   boşluğu maske sayesinde görünmeden taşar, ayakkabı ortada kalır. */
/* Sahne yüksekliği aspect-ratio ile sabit tutulur; ayakkabı görseli mutlak
   konumlandığı için satırı büyütmez ve fotoğrafın siyah üst/alt boşluğu
   maske sayesinde görünmeden taşar. Böylece hero tek ekrana sığar. */
.hero__stage{
  position:relative;
  width:min(1080px,104%);
  margin:clamp(-40px,-3vw,-12px) auto 0;
  aspect-ratio:2.6/1;
  overflow:visible;
}
.hero__ring{
  position:absolute;left:50%;top:56%;transform:translate(-50%,-50%) rotateX(74deg);
  width:min(620px,72%);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(245,144,30,.28);
  box-shadow:0 0 60px rgba(245,144,30,.14) inset;
  animation:spin 22s linear infinite;
}
.hero__ring::after{
  content:"";position:absolute;inset:14%;border-radius:50%;
  border:1px dashed rgba(255,255,255,.10);
}
@keyframes spin{to{transform:translate(-50%,-50%) rotateX(74deg) rotate(360deg)}}
.hero__podium{
  position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);
  width:min(560px,68%);aspect-ratio:2.4/1;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(245,144,30,.18),transparent 65%);
  filter:blur(18px);
}
.hero__shoe{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  z-index:3;
  width:min(790px,84%);
  will-change:transform;
  transform-style:preserve-3d;
}
/* Ürün fotoğrafları siyah stüdyo fonlu çekildiği için "screen" karışımı +
   radyal maske ile fon tamamen erir; ayakkabı sahnede süzülüyor gibi durur.
   Blend, konteynerin kendisine uygulanmalı: iç öğeye verilirse will-change'in
   açtığı stacking context karışımı izole eder ve fon siyah dikdörtgen kalır. */
.hero__shoe,.showcase__shoe{
  mix-blend-mode:screen;
  mask-image:radial-gradient(ellipse 58% 58% at 50% 50%,#000 56%,transparent 84%);
  -webkit-mask-image:radial-gradient(ellipse 58% 58% at 50% 50%,#000 56%,transparent 84%);
}
.hero__shoe img,.showcase__shoe img{width:100%;height:auto}
.hero__shadow{
  position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
  width:min(520px,60%);height:34px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.75),transparent 70%);
  filter:blur(12px);
}
.hero__chip{
  position:absolute;z-index:4;
  padding:9px 16px;border-radius:999px;
  background:rgba(16,16,19,.72);border:1px solid var(--line-strong);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text);white-space:nowrap;
}
.hero__chip::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--accent);margin-right:8px;vertical-align:middle;
}
.hero__chip--1{left:2%;top:26%}
.hero__chip--2{right:2%;top:60%}

.hero__sub{color:var(--muted);font-size:clamp(15px,1.7vw,18px);max-width:42ch;margin-top:8px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}

.hero__scroll{
  position:absolute;left:var(--gutter);bottom:34px;
  display:flex;align-items:center;gap:12px;
  font-size:10px;letter-spacing:.28em;color:var(--muted-2);font-weight:600;
}
.hero__scroll span{
  width:1px;height:44px;background:linear-gradient(var(--accent),transparent);
  animation:scrollLine 2.2s var(--ease) infinite;transform-origin:top;
}
@keyframes scrollLine{0%{transform:scaleY(0);opacity:0}40%{opacity:1}100%{transform:scaleY(1);opacity:0}}
.hero__side{
  position:absolute;right:calc(var(--gutter) - 8px);bottom:110px;
  writing-mode:vertical-rl;
  font-size:10px;letter-spacing:.3em;color:var(--muted-2);font-weight:600;
}

/* ─────────────────── 6. BRANDS ─────────────────── */
.brands{
  position:relative;border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
  padding-block:26px;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.brands__track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.brands__track span{
  display:flex;align-items:center;gap:clamp(40px,6vw,88px);padding-inline:clamp(20px,3vw,44px);
  font-family:var(--font-display);font-size:clamp(20px,2.4vw,30px);
  letter-spacing:.04em;color:rgba(255,255,255,.30);
  transition:color .4s var(--ease);
}
.brands__track b{font-weight:400;cursor:default;transition:color .35s var(--ease)}
.brands__track b:hover{color:var(--white)}
.brands:hover .brands__track{animation-play-state:paused}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}

/* ─────────────────── 7. PRODUCTS ─────────────────── */
.products{background:linear-gradient(180deg,var(--bg),var(--bg-2) 40%,var(--bg))}
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:clamp(14px,1.5vw,22px);
}
.card{
  position:relative;display:block;isolation:isolate;
  aspect-ratio:4/5;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);
  overflow:hidden;
  transition:border-color .5s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease);
}
.card:hover{
  transform:translateY(-6px);border-color:var(--line-strong);
  box-shadow:0 34px 60px -32px rgba(0,0,0,.95);
}
.card__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  transition:transform 1s var(--ease),filter .6s var(--ease);
  filter:saturate(.92) contrast(1.04);
}
.card:hover .card__media img{transform:scale(1.1) rotate(-1.5deg);filter:saturate(1.05) contrast(1.06)}
/* Okunabilirlik için alt yarıya inen degrade + marka rengi hover parıltısı */
.card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,6,.12) 0%,rgba(5,5,6,0) 42%,rgba(5,5,6,.55) 72%,rgba(5,5,6,.93) 100%);
  transition:opacity .5s var(--ease);
}
.card__glow{
  position:absolute;inset:auto -20% -30% -20%;height:70%;z-index:1;
  background:radial-gradient(ellipse at 50% 100%,var(--card-accent,var(--accent)),transparent 68%);
  opacity:0;transition:opacity .6s var(--ease);pointer-events:none;
  mix-blend-mode:soft-light;
}
.card:hover .card__glow{opacity:.85}
.card__tag{
  position:absolute;z-index:3;left:16px;top:16px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;color:var(--white);
  background:rgba(10,10,12,.55);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.card__body{
  position:absolute;z-index:3;left:0;right:0;bottom:0;
  padding:20px;display:flex;flex-direction:column;gap:2px;
  /* Açık fonlu ürün fotoğraflarında da metin okunur kalsın */
  text-shadow:0 2px 14px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5);
}
.card__brand{font-size:10px;font-weight:700;letter-spacing:.22em;color:var(--accent);text-transform:uppercase}
.card__name{
  font-family:var(--font-display);font-size:clamp(1.4rem,2.1vw,1.85rem);
  text-transform:uppercase;line-height:1.02;letter-spacing:.01em;margin-top:4px;
}
.card__price{font-size:13.5px;color:var(--muted);margin-top:2px}
.card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.card:hover .card__foot,.card:focus-within .card__foot{opacity:1;transform:none}
.card__cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--white);transition:color .3s var(--ease);
}
.card__cta svg{width:15px;height:15px}
.card__cta--wa{color:var(--accent)}
.card__cta:hover{color:var(--accent)}
@media (hover:none){.card__foot{opacity:1;transform:none}}

.products__foot{
  margin-top:clamp(48px,6vw,72px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  padding-top:36px;border-top:1px solid var(--line);
}
.products__foot p{color:var(--muted);max-width:44ch}

/* ─────────────────── 7b. ADVANTAGES ─────────────────── */
.adv{
  position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent) 45%,var(--accent-2));
  color:#0a0a0a;padding-block:18px;
  border-block:1px solid rgba(0,0,0,.25);
}
.adv__track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.adv__track span{display:flex;align-items:center;gap:clamp(28px,4vw,56px);padding-inline:clamp(14px,2vw,28px)}
.adv__item{display:inline-flex;align-items:center;gap:12px;
  font-size:clamp(12px,1.3vw,14px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.adv__item svg{width:20px;height:20px;flex:0 0 auto}
.adv__sep{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.45)}
.adv:hover .adv__track{animation-play-state:paused}

/* ─────────────────── 8. SHOWCASE ─────────────────── */
.showcase{
  position:relative;
  padding-block:clamp(96px,13vw,170px);
  overflow:hidden;isolation:isolate;
}
.showcase__bg{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%,rgba(245,144,30,.12),transparent 70%),
    linear-gradient(180deg,var(--bg),#08080a 50%,var(--bg));
}
.showcase__bg::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:120px 100%;
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.showcase__type{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;pointer-events:none;
}
.showcase__line{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2.6rem,11.5vw,10rem);
  line-height:.86;letter-spacing:-.02em;text-transform:uppercase;
  color:var(--white);
  will-change:transform;
}
/* İki satır arasında bilinçli boşluk: ayakkabı tam bu boşlukta süzülür,
   tipografiyi kapatmadan üzerine hafifçe taşar. */
.showcase__line:last-child{
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.6);
  margin-top:clamp(150px,20vw,330px);
}
.showcase__shoe{
  position:absolute;left:50%;top:50%;
  width:min(880px,74vw);
  transform-origin:center;
  translate:-50% -50%;
  z-index:2;pointer-events:none;
  will-change:transform;
}
.showcase__content{
  position:relative;z-index:3;
  margin-top:clamp(56px,9vw,120px);
  display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,5vw,80px);align-items:end;
}
.showcase__text p:not(.sec-eyebrow){color:var(--muted);font-size:clamp(15px,1.7vw,18px);max-width:52ch}
.showcase__text strong{color:var(--white);font-weight:600}
.showcase__stats{display:flex;gap:clamp(24px,4vw,52px)}
.showcase__stats li{display:flex;flex-direction:column;gap:2px}
.showcase__stats b{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,4vw,3.4rem);line-height:1;color:var(--accent)}
.showcase__stats span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}

/* ─────────────────── 9. INSTAGRAM ─────────────────── */
.insta__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:28px;margin-bottom:clamp(36px,4vw,56px);
}
.insta__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:1fr;gap:clamp(12px,1.4vw,20px);
}
.insta__tile{
  position:relative;display:block;aspect-ratio:1;border-radius:var(--radius-sm);
  overflow:hidden;border:1px solid var(--line);background:var(--surface-2);
  transition:border-color .5s var(--ease),transform .6s var(--ease);
}
.insta__tile--featured{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.insta__tile img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.insta__tile:hover{transform:translateY(-5px);border-color:var(--accent)}
.insta__tile:hover img{transform:scale(1.07)}
.insta__tile figure{margin:0;height:100%}
.insta__tile figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(0deg,rgba(5,5,6,.9),transparent);
}
.insta__tile figcaption svg{width:15px;height:15px;color:var(--accent);opacity:0;transform:translateX(-6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.insta__tile:hover figcaption svg{opacity:1;transform:none}

/* ─────────────────── 10. STORE ─────────────────── */
.store{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.store__layout{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(16px,2vw,26px);align-items:stretch;
}
.store__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,26px)}

/* Dekoratif konum paneli — harita gömmek yerine tasarımın parçası olarak
   çizilir: dış istek yok, CLS yok, koyu temayla bütünleşir. */
.store-map{
  position:relative;overflow:hidden;min-height:340px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:
    radial-gradient(ellipse 70% 70% at 62% 46%,rgba(245,144,30,.16),transparent 62%),
    linear-gradient(160deg,var(--surface),#08080a);
}
.store-map::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:38px 38px;
}
.store-map__roads{
  position:absolute;inset:0;width:100%;height:100%;
  color:var(--white);
}
.store-map__pin{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-100%);
  width:42px;height:42px;color:var(--accent);z-index:3;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.6));
  animation:pinFloat 3.4s var(--ease) infinite;
}
@keyframes pinFloat{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,-116%)}}
.store-map__ping{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:16px;height:16px;border-radius:50%;background:rgba(245,144,30,.6);z-index:2;
  animation:ping 2.8s var(--ease) infinite;
}
.store-map__chip{
  position:absolute;left:22px;bottom:22px;right:22px;z-index:4;
  display:flex;flex-direction:column;gap:2px;
  padding:14px 18px;border-radius:14px;
  background:rgba(10,10,12,.72);border:1px solid var(--line-strong);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.store-map__chip b{font-size:14px;font-weight:600}
.store-map__chip span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.store-card{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(160deg,var(--surface),#08080a);
  padding:clamp(28px,3.4vw,44px);
  display:flex;flex-direction:column;gap:22px;
  transition:border-color .5s var(--ease)}
.store-card:hover{border-color:var(--line-strong)}
.store-card__map{
  position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 70% 80% at 85% 15%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 85% 15%,#000,transparent 70%);
}
.store-card__pin{
  position:absolute;right:12%;top:16%;z-index:1;
  width:14px;height:14px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-glow);
  animation:ping 2.8s var(--ease) infinite;
}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(245,144,30,.5)}70%,100%{box-shadow:0 0 0 34px rgba(245,144,30,0)}}
.store-card>*{position:relative;z-index:2}
.store-card__tag{
  align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);padding:6px 12px;border-radius:999px;border:1px solid rgba(245,144,30,.35);
  background:rgba(245,144,30,.07);
}
.store-card__name{font-family:var(--font-display);font-size:clamp(1.8rem,3.4vw,2.8rem);text-transform:uppercase;line-height:1}
.store-card__addr{color:var(--muted);font-size:clamp(15px,1.6vw,17px);line-height:1.75}
.store-card__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:8px}

/* ─────────────────── 11. CONTACT / FOOTER ─────────────────── */
.contact{padding-bottom:clamp(72px,9vw,120px)}
.contact__card{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:clamp(20px,3vw,32px);
  background:
    radial-gradient(ellipse 70% 100% at 90% 0%,rgba(245,144,30,.14),transparent 60%),
    linear-gradient(160deg,var(--surface),#070709);
  padding:clamp(34px,5.5vw,80px);
  text-align:center;
}
.contact__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2rem,5.4vw,4.4rem);line-height:.95;text-transform:uppercase;
  max-width:20ch;margin-inline:auto;
}
.contact__title em{font-style:normal;color:var(--accent)}
.contact__phone{
  display:block;margin-top:clamp(28px,4vw,44px);
  font-family:var(--font-display);
  font-size:clamp(2.1rem,7.5vw,5.2rem);line-height:1;letter-spacing:.01em;
  color:var(--white);
  transition:color .4s var(--ease),transform .5s var(--ease);
  word-break:break-word;
}
.contact__phone:hover{color:var(--accent)}
.contact__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
.contact__meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:clamp(38px,5vw,60px);padding-top:30px;border-top:1px solid var(--line);
}
.contact__meta li{display:flex;flex-direction:column;gap:6px;align-items:center}
.contact__meta span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.contact__meta a{font-size:14px;color:var(--text);transition:color .3s var(--ease)}
.contact__meta a:hover{color:var(--accent)}

.footer{position:relative;border-top:1px solid var(--line);padding-top:clamp(56px,6vw,80px);overflow:hidden}
.footer__top{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(28px,4vw,60px);
  padding-bottom:clamp(48px,6vw,72px);
}
.footer__logo{--s:.26}
.footer__brand p{color:var(--muted);font-size:14px;margin-top:18px;line-height:1.8}
.footer__nav{display:flex;flex-direction:column;gap:10px}
.footer__nav a{font-size:14px;color:var(--muted);width:fit-content;transition:color .3s var(--ease),transform .3s var(--ease)}
.footer__nav a:hover{color:var(--accent);transform:translateX(4px)}
.footer__contact{display:flex;flex-direction:column;gap:10px}
.footer__contact a{font-size:14px;color:var(--muted);width:fit-content;transition:color .3s var(--ease)}
.footer__contact a:hover{color:var(--accent)}
.footer__contact address{font-size:14px;color:var(--muted-2);line-height:1.8;margin-top:4px}
.footer__bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding-block:24px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted-2);
}
.footer__ghost{
  font-family:var(--font-display);
  font-size:clamp(3.6rem,17vw,15rem);line-height:.8;text-align:center;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.05);
  margin-bottom:-.16em;user-select:none;white-space:nowrap;
}

/* Mobile sticky bar */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:950;
  display:none;
  background:rgba(8,8,10,.86);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%);
  transition:transform .5s var(--ease);
}
.mobile-bar.is-visible{transform:none}
.mobile-bar__item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:11px 4px 10px;font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--muted);
}
.mobile-bar__item svg{width:19px;height:19px}
.mobile-bar__item--wa{color:var(--accent)}
.mobile-bar__item:active{color:var(--white)}

/* ─────────────────── 12. MOTION ─────────────────── */
[data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* overflow:hidden maskesi Türkçe diakritiklerini (İ, Ö, Ş, Ğ, Ü, Ç) kırpmasın
   diye üstte ve altta nefes payı bırakılıyor. */
.split-line{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding:.2em 0 .1em;margin:-.2em 0 -.1em;
}
.split-word{
  display:inline-block;
  transform:translateY(105%) rotate(3deg);
  opacity:0;
  transition:transform 1s var(--ease),opacity .7s var(--ease);
}
.is-in .split-word,.split-word.is-in{transform:none;opacity:1}

.reveal-stagger>*{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-stagger.is-in>*{opacity:1;transform:none}

/* Preloader */
.preloader{
  position:fixed;inset:0;z-index:5000;
  display:grid;place-items:center;
  background:var(--bg);
  transition:opacity .7s var(--ease),visibility .7s;
}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.preloader__logo{--s:.42;margin-inline:auto}
@media (max-width:600px){.preloader__logo{--s:.3}}
.preloader__bar{width:min(220px,52vw);height:2px;background:rgba(255,255,255,.1);margin:22px auto 0;overflow:hidden;border-radius:2px}
.preloader__bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .5s var(--ease)}
body.is-loading{overflow:hidden}

/* Page-load intro */
body.is-ready .hero__eyebrow,
body.is-ready .hero__sub,
body.is-ready .hero__cta,
body.is-ready .hero__stage,
body.is-ready .hero__chip{animation:introUp .95s var(--ease) both}
body.is-ready .hero__stage{animation-delay:.06s;animation-name:introScale}
body.is-ready .hero__sub{animation-delay:.22s}
body.is-ready .hero__cta{animation-delay:.3s}
body.is-ready .hero__chip--1{animation-delay:.5s}
body.is-ready .hero__chip--2{animation-delay:.62s}
@keyframes introUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes introScale{from{opacity:0;transform:translateY(34px) scale(.94)}to{opacity:1;transform:none}}

/* ─────────────────── 13. RESPONSIVE ─────────────────── */
@media (max-width:1180px){
  .hero__ghost{font-size:clamp(6rem,26vw,16rem)}
  .showcase__content{grid-template-columns:1fr;align-items:start;gap:36px}
}

@media (max-width:1024px){
  :root{--header-h:72px}
  .nav{display:none}
  .burger{display:block}
  .btn--wa span{display:none}
  .btn--wa{width:44px;padding:0;border-radius:50%}
  .btn--wa svg{width:18px;height:18px}
  .header__actions{margin-left:auto}
  .insta__grid{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr;row-gap:40px}
  .showcase{min-height:auto}
}

@media (max-width:768px){
  .mobile-bar{display:flex}
  body{padding-bottom:0}
  .footer__bottom{padding-bottom:80px}
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 28px);padding-bottom:52px}
  .hero__title{font-size:clamp(2.7rem,12vw,4rem);max-width:14ch;margin-top:14px}
  .hero__stage{width:106%;margin-block:2px 0;aspect-ratio:1.42/1}
  .hero__shoe{width:122%}
  .hero__chip{font-size:10px;padding:7px 12px;max-width:46%}
  .hero__chip--1{left:3%;top:8%}
  .hero__chip--2{right:3%;top:76%}
  .hero__cta{width:100%;flex-direction:column;margin-top:24px}
  .hero__cta .btn{width:100%}
  .hero__scroll,.hero__side{display:none}
  .hero__ghost{top:40%;font-size:34vw}
  .hero__ring{width:88%}

  .sec-head{margin-bottom:40px}
  .products__foot{flex-direction:column;align-items:flex-start}
  .products__foot .btn{width:100%}
  /* 10 modellik katalog mobilde tek sütunda çok uzuyor → 2 sütun vitrin */
  .product-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .card{aspect-ratio:3/4;border-radius:14px}
  .card__tag{left:10px;top:10px;font-size:9px;padding:5px 9px;letter-spacing:.1em}
  .card__body{padding:12px}
  .card__brand{font-size:9px;letter-spacing:.18em}
  .card__name{font-size:1.02rem;margin-top:3px}
  .card__foot{margin-top:10px;padding-top:10px;justify-content:flex-start}
  .card__cta{font-size:10px;letter-spacing:.08em}
  .card__cta:not(.card__cta--wa){display:none}

  .showcase{padding-block:76px 92px}
  .showcase__type{gap:2px}
  .showcase__line{font-size:14.5vw}
  .showcase__line:last-child{margin-top:0}
  .showcase__shoe{
    position:relative;left:auto;top:auto;translate:none;
    margin:14px auto 10px;width:116%;max-width:none;
  }
  .showcase__content{margin-top:34px}
  .showcase__stats{gap:20px;flex-wrap:wrap}

  .store__layout{grid-template-columns:1fr}
  .store-map{min-height:260px;order:-1}
  .insta__head{flex-direction:column;align-items:flex-start;gap:22px}
  .insta__cta{width:100%}
  .contact__meta{grid-template-columns:1fr;gap:22px}
  .contact__actions{flex-direction:column}
  .contact__actions .btn{width:100%}
  .store-card__actions .btn{width:100%}
  .footer__top{grid-template-columns:1fr;row-gap:34px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:6px}
}

@media (max-width:420px){
  .logo .brandmark--lion{--s:.098}
  .logo .brandmark--word{--s:.152}
  .hero__title{font-size:2.5rem}
  .contact__phone{font-size:2rem}
}

/* Hamburger 1024px altında görünür → menü de aynı eşiğe kadar açılabilmeli */
@media (min-width:1025px){
  .mobile-menu{display:none !important}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],.split-word,.reveal-stagger>*{opacity:1 !important;transform:none !important}
  .hero__shoe,.showcase__shoe{transform:none !important}
  .preloader{display:none}
}