/* F&F Barber's Club — siyah / antrasit / gri */
:root{
  --bg:#0c0c0d; --bg2:#121314; --surface:#1a1b1d; --surface2:#232528; --line:#2c2e31; --line2:#3a3d41;
  --ink:#ecebe8; --soft:#b8babd; --muted:#85888d; --ok:#8fd19e;
  --f-display:"Michroma","Eurostile","Arial",sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --max:1120px; --r:4px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--bg);color:var(--ink);font:16px/1.65 var(--f-body);margin:0;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:20px}
h1,h2,h3{margin:0;font-weight:400;line-height:1.1}
.eyebrow{font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.mb{margin-bottom:12px}
.mono{font-family:var(--f-mono)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px/1 var(--f-body);letter-spacing:.04em;padding:15px 22px;border-radius:var(--r);border:1px solid var(--line2);background:transparent;color:var(--ink);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn:hover{border-color:var(--ink)}
.btn.light{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.light:hover{background:#fff}
.btn.small{padding:10px 14px;font-size:13px}
.chip{font:500 12px/1 var(--f-body);border:1px solid var(--line2);border-radius:999px;padding:7px 12px;text-decoration:none;white-space:nowrap}
.chip:hover{border-color:var(--ink)}

/* üst bar */
.bar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:24px;padding-block:12px}
.brand img{display:block;height:26px;width:auto}
.bar nav{display:flex;gap:22px;margin-left:auto;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.bar nav a{text-decoration:none;color:var(--muted)}
.bar nav a:hover{color:var(--ink)}
@media (max-width:760px){.bar nav{display:none}.bar .btn{margin-left:auto}.brand img{height:22px}}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:
    radial-gradient(60% 70% at 50% 35%,rgba(255,255,255,.07),transparent 70%),
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/48px 48px,
    var(--bg2)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 80% at 50% 40%,transparent 30%,var(--bg) 95%);pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:clamp(72px,14vh,140px) 72px}
.hero h1{width:min(820px,100%);margin-top:34px}
.hero h1 img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 28px rgba(255,255,255,.12))}
.hero .tag{font-size:clamp(17px,2.2vw,21px);color:var(--soft);max-width:38ch;margin:34px 0 0}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.status{display:inline-flex;align-items:center;gap:9px;font:500 12px/1 var(--f-mono);padding:9px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--soft)}
.status i{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.status.open i{background:var(--ok);box-shadow:0 0 0 4px rgba(143,209,158,.16)}
.ticker{position:relative;z-index:1;border-top:1px solid var(--line);overflow:hidden;background:var(--bg)}
.ticker div{display:flex;width:max-content;gap:28px;padding:16px 0;font:400 13px/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);animation:tick 38s linear infinite}
.ticker b{font-weight:400;color:var(--line2)}
@keyframes tick{to{transform:translateX(-50%)}}

/* bölümler */
section+section{border-top:1px solid var(--line)}
.sec{padding-block:88px;display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:28px 56px}
@media (max-width:820px){.sec{grid-template-columns:1fr;padding-block:60px}}
.sh h2{font:400 clamp(24px,3.4vw,34px)/1.15 var(--f-display);text-transform:uppercase;letter-spacing:.02em;margin-top:14px}
#hizmetler,#hakkimizda{background:var(--bg2)}

/* fiyat listesi */
.menu{list-style:none;margin:0;padding:0}
.menu li{display:grid;grid-template-columns:minmax(0,auto) 1fr auto auto;align-items:baseline;gap:14px;padding-block:18px;border-bottom:1px solid var(--line)}
.menu li:first-child{border-top:1px solid var(--line2)}
.menu .n{font-size:18px;font-weight:600}
.menu .dots{border-bottom:1px dotted var(--line2);transform:translateY(-4px)}
.menu .d{font:400 12px var(--f-mono);color:var(--muted);white-space:nowrap}
.menu .p{font:500 17px var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:7ch;text-align:right}
@media (max-width:480px){.menu li{grid-template-columns:1fr auto;row-gap:2px}.menu .dots{display:none}.menu .d{grid-row:2}.menu .p{grid-row:1/3;grid-column:2;align-self:center}}
.note{font-size:13px;color:var(--muted);margin-top:16px}

/* galeri */
.grid{columns:3 220px;column-gap:10px}
.grid button{display:block;width:100%;margin:0 0 10px;padding:0;border:0;background:var(--surface);border-radius:var(--r);overflow:hidden;cursor:zoom-in;break-inside:avoid}
.grid img{display:block;width:100%;height:auto;filter:grayscale(.15);transition:transform .4s,filter .4s}
.grid button:hover img{transform:scale(1.03);filter:none}
.empty{border:1px dashed var(--line2);border-radius:var(--r);padding:48px 24px;text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--ink);font:400 18px/1.2 var(--f-display);text-transform:uppercase;margin-bottom:8px}

/* hakkımızda */
.about{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:40px;align-items:center}
.about figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.about img{display:block;width:100%;height:auto}
.about p{font-size:clamp(18px,2vw,22px);line-height:1.6;color:var(--soft);margin:0;max-width:44ch}
@media (max-width:820px){.about{grid-template-columns:1fr}.about figure{max-width:340px}}

/* iletişim */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px}
.hours{list-style:none;padding:0;margin:0;font-family:var(--f-mono);font-size:14px}
.hours li{display:flex;justify-content:space-between;gap:12px;padding-block:10px;border-bottom:1px solid var(--line);color:var(--soft)}
.hours li.today{color:var(--ink);font-weight:500}
.hours li.today span:first-child::after{content:" · bugün";color:var(--muted);font-weight:400}
.kv{display:grid;gap:22px;align-content:start}
.kv .v{font-size:17px;margin-top:8px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.kv .v a:not(.chip){text-decoration:none;border-bottom:1px solid var(--line2)}
.map{grid-column:1/-1;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;height:340px}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.9) contrast(.9)}
@media (min-width:821px){.map{grid-column:2}}

footer{border-top:1px solid var(--line);background:var(--bg)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding-block:32px;font-size:12px;color:var(--muted)}
.flogo{height:20px;width:auto;opacity:.6}

/* mobil alt bar */
.mbar{display:none}
@media (max-width:760px){
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .mbar{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .mbar a{display:flex;align-items:center;justify-content:center;height:48px;border-radius:var(--r);border:1px solid var(--line2);text-decoration:none;font-weight:600;font-size:15px}
  .mbar a.light{background:var(--ink);color:var(--bg);border-color:var(--ink)}
}

/* lightbox */
.lb{position:fixed;inset:0;z-index:60;background:rgba(6,6,7,.95);display:grid;place-items:center;padding:20px}
.lb figure{margin:0}
.lb img{max-height:84vh;max-width:100%;border-radius:2px;display:block;margin:auto}
.lb figcaption{color:var(--soft);text-align:center;margin-top:12px;font-size:14px}
.lb .x,.lb .nav{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:999px;width:46px;height:46px;font-size:20px;cursor:pointer}
.lb .x{top:calc(16px + env(safe-area-inset-top,0px));right:16px}
.lb .prev{left:12px;top:50%}.lb .next{right:12px;top:50%}

/* duyuru bandı */
.announce{background:var(--ink);color:var(--bg);text-align:center;font:600 13px/1.4 var(--f-body);padding:10px 16px;letter-spacing:.02em}

/* kapak fotoğrafı */
.hero.has-cover{background:
  linear-gradient(180deg,rgba(12,12,13,.72),rgba(12,12,13,.86) 70%,var(--bg)),
  var(--cover) center/cover no-repeat,var(--bg2)}
.hero.has-cover::after{background:radial-gradient(90% 80% at 50% 40%,transparent 40%,rgba(12,12,13,.8) 100%)}
@supports (filter:grayscale(1)){.hero.has-cover{background-blend-mode:normal,luminosity,normal}}

/* ekip */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.member{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.member img,.member .ph{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .4s}
.member:hover img{filter:grayscale(.2)}
.member .ph{display:grid;place-items:center;background:var(--surface2);font:400 56px/1 var(--f-display);color:var(--line2)}
.member figcaption{padding:14px 16px 16px;display:grid;gap:4px}
.member strong{font:400 14px/1.3 var(--f-display);text-transform:uppercase;letter-spacing:.04em}
.member span{font-size:13px;color:var(--muted)}

.row2{display:flex;flex-wrap:wrap;gap:10px}
.bar nav .igl{display:inline-flex;align-items:center}
footer a{color:var(--soft)}

/* kaydırınca beliren bloklar (JS varsa) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}


/* 404 / metin sayfaları */
.page{max-width:760px;margin:0 auto;padding:72px 20px 96px}
.page h1{font:400 clamp(22px,4vw,32px)/1.2 var(--f-display);text-transform:uppercase;margin-bottom:24px}
.page h2{font:600 18px/1.3 var(--f-body);margin:32px 0 8px}
.page p,.page li{color:var(--soft)}

/* ===== telefon iyileştirmeleri ===== */
@media (max-width:760px){
  .bar .btn.small{min-height:42px;padding-inline:16px}
  .hero .wrap{padding-block:56px 48px}
  .hero .tag{margin-top:26px}
  .cta{width:100%;flex-direction:column;align-items:stretch;max-width:340px}
  .cta .btn{min-height:50px}
  .sec{padding-block:52px;gap:20px}
  .grid{columns:2;column-gap:8px}
  .grid button{margin-bottom:8px}
  .team{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .member figcaption{padding:10px 12px 12px}
  .member strong{font-size:12px}
  .member span{font-size:12px}
  .about figure{max-width:none}
  .chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;font-size:13px}
  .kv .v a:not(.chip){display:inline-flex;align-items:center;min-height:40px}
  .row2{flex-direction:column;align-items:stretch}
  .row2 .btn{min-height:50px}
  .map{height:260px}
  footer .wrap{flex-direction:column;align-items:flex-start;padding-bottom:24px}
  footer a{display:inline-block;padding:10px 0}
  .lb .nav{top:auto;bottom:calc(24px + env(safe-area-inset-bottom,0px));width:52px;height:52px}
  .lb .prev{left:calc(50% - 64px)}.lb .next{right:calc(50% - 64px)}
  .lb img{max-height:72vh}
}
@media (max-width:380px){.grid{column-gap:6px}.team{gap:8px}}

/* ================= EFEKTLER ================= */
/* üstte kaydırma çubuğu */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:linear-gradient(90deg,#6d7075,#fff);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}

/* üst bar kaydırınca incelir */
.bar{transition:background .3s,border-color .3s}
.bar .wrap{transition:padding .3s}
.bar.scrolled{background:color-mix(in srgb,var(--bg) 94%,transparent)}
.bar.scrolled .wrap{padding-block:8px}

/* hero: fareyi takip eden ışık + ızgara kayması */
.hero{--mx:50%;--my:40%}
.hero .spot{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.09),transparent 65%);transition:opacity .4s}
.hero:not(.has-cover){animation:gridmove 30s linear infinite}
@keyframes gridmove{to{background-position:0 0,0 48px,48px 0,0 0}}
.hero-in{will-change:transform,opacity}

/* açılış animasyonları */
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes logoIn{from{opacity:0;transform:scale(.94);filter:blur(14px)}to{opacity:1;transform:none;filter:blur(0)}}
.js .hero .status{animation:up .8s .15s both cubic-bezier(.2,.7,.2,1)}
.js .hero h1{animation:logoIn 1.3s .25s both cubic-bezier(.2,.7,.2,1)}
.js .hero .tag{animation:up .9s .75s both cubic-bezier(.2,.7,.2,1)}
.js .hero .cta{animation:up .9s .95s both cubic-bezier(.2,.7,.2,1)}
.js .hero .ticker{animation:up 1s 1.1s both}

/* logoda gezinen metal parıltı */
.logo-shine{position:relative}
.logo-shine::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;
  -webkit-mask:url(logo.png) center/100% 100% no-repeat;mask:url(logo.png) center/100% 100% no-repeat;
  mix-blend-mode:overlay;animation:shine 6s 1.8s ease-in-out infinite}
@keyframes shine{0%{background-position:150% 0}35%,100%{background-position:-60% 0}}

/* başlıklar harf harf */
.sh h2 .w{display:inline-block;white-space:nowrap}
.sh h2 .c{display:inline-block}
.js .sh h2 .c{opacity:0;transform:translateY(.6em) rotate(6deg);transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 35ms)}
.js .sh.in h2 .c{opacity:1;transform:none}
.js .sh .eyebrow{opacity:0;transform:translateX(-14px);transition:opacity .6s,transform .6s}
.js .sh.in .eyebrow{opacity:1;transform:none}
.sh .eyebrow::after{content:"";display:block;height:1px;background:var(--line2);margin-top:12px;transform-origin:0;transform:scaleX(0);transition:transform 1s .2s cubic-bezier(.2,.7,.2,1);max-width:120px}
.sh.in .eyebrow::after,html:not(.js) .sh .eyebrow::after{transform:scaleX(1)}

/* liste ve kartlar sırayla gelir */
.js .stag>*{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.js .stag.in>*{opacity:1;transform:none}
.js .reveal.stag{opacity:1;transform:none}

/* fiyat satırı hover */
.menu li{position:relative;isolation:isolate}
.menu li::before{content:"";position:absolute;inset:0 -14px;z-index:-1;background:var(--surface);border-radius:4px;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.menu li:hover::before{transform:scaleX(1)}.menu li:hover .p{transform:translateX(-4px)}}
.menu .p{transition:transform .3s}

/* galeri hover katmanı */
.grid button{position:relative}
.gz{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:14px;background:linear-gradient(transparent 45%,rgba(0,0,0,.75));opacity:0;transition:opacity .35s;color:#fff;text-align:left}
.gz em{font:500 13px/1.3 var(--f-body);font-style:normal;transform:translateY(8px);transition:transform .4s}
.gz b{margin-left:auto;width:34px;height:34px;flex:none;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:grid;place-items:center;font:300 20px/1 var(--f-body);transform:rotate(-90deg) scale(.6);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.grid button:hover .gz{opacity:1}.grid button:hover .gz em{transform:none}.grid button:hover .gz b{transform:none}}

/* ekip kartı 3B eğim */
.team{perspective:900px}
.member{transition:transform .25s ease-out,border-color .3s;transform-style:preserve-3d;will-change:transform}
.member:hover{border-color:var(--line2)}

/* hakkımızda görseli kayarken hafif kayma */
.about figure img{transform:scale(1.08) translateY(var(--py,0px));transition:transform .1s linear}

/* butonlarda parıltı */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn.light::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.9) 50%,transparent 70%)}
@media (hover:hover){.btn:hover::after{transform:translateX(120%)}}
.btn:active{transform:scale(.97)}

/* büyük kayan yazı */
.bigmq{overflow:hidden;border-top:1px solid var(--line);padding:clamp(28px,6vw,64px) 0;background:var(--bg)}
.bigmq-t{display:flex;align-items:center;gap:clamp(18px,3vw,40px);width:max-content;transform:translateX(var(--mq,0px));will-change:transform}
.bigmq span{font:400 clamp(44px,9vw,120px)/1 var(--f-display);text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.bigmq span.o{color:transparent;-webkit-text-stroke:1px var(--muted)}
.bigmq i{font-style:normal;font-size:clamp(28px,5vw,64px);color:var(--line2)}

/* saatler: bugün satırı nabız */
.hours li.today span:last-child{position:relative}
.status.open i{animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(143,209,158,.5)}70%{box-shadow:0 0 0 9px rgba(143,209,158,0)}100%{box-shadow:0 0 0 0 rgba(143,209,158,0)}}

/* mobil alt bar girişi */
@media (max-width:760px){.js .mbar{transform:translateY(110%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}.js .mbar.on{transform:none}}

@keyframes fade{from{opacity:0}to{opacity:1}}
.js .stag.in>.member{transition:opacity .6s,transform .25s ease-out;transition-delay:0s}