/* =========================================================
   MCS Fitness · Pinterest havası
   Tasarım sistemi: Pinterest DESIGN.md (VoltAgent/awesome-design-md) uyarlaması.
   - Fotoğrafın önünden çekil: sıcak krem nötrler, görseller öne çıkar.
   - Tek vurgu: kırmızı (MCS'nin kendi kırmızısına çok yakın) yalnızca birincil eylemde.
   - Üç köşe değeri: 16px (çoğu şey), 32px (büyük kartlar, pencere), tam yuvarlak.
   - Taş duvar (masonry) ızgara: her görsel kendi oranını korur.
   ========================================================= */
:root{
  --primary:#e60023;
  --primary-pressed:#cc001f;
  --ink:#000000;
  --ink-soft:#211922;
  --body:#33332e;
  --mute:#62625b;
  --ash:#91918c;
  --hairline:#dadad3;
  --secondary:#e5e5e0;
  --secondary-pressed:#c8c8c1;
  --canvas:#ffffff;
  --surface-soft:#fbfbf9;
  --surface-card:#f6f6f3;
  --dark:#262622;
  --success-deep:#103c25;
  --success-pale:#c7f0da;
  --error-pale:#fde2e2;
  --error:#9e0a0a;
  --focus:#435ee5;

  --font:"Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --r:16px; --r-lg:32px; --r-full:9999px;
  --gutter:clamp(16px,4vw,32px);
}
*,*::before,*::after{box-sizing:border-box;}
/* hidden özniteliği her zaman gizlesin (display kuralları onu ezmesin) */
[hidden]{display:none !important;}
html{color-scheme:light; -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:136px;}
body{margin:0; overflow-x:clip; background:var(--canvas); color:var(--body); font-family:var(--font); font-size:16px; line-height:1.4; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit;}
a,button{touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
button,input{font:inherit; color:inherit;}
p,h1,h2,h3,figure,blockquote,dl,dd{margin:0;}
ul{list-style:none; margin:0; padding:0;}
/* Pinterest odak halkası: içte beyaz, dışta mavi */
:focus-visible{outline:none; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--focus); border-radius:var(--r);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.skip-link{position:fixed; left:12px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--r); font-weight:700; text-decoration:none;}
.skip-link:focus{top:12px;}
.i{width:1em; height:1em; flex:none;}
.wrap{max-width:1360px; margin-inline:auto; padding-inline:var(--gutter);}

h1,h2,h3{color:var(--ink); text-wrap:balance;}
h1{font-size:clamp(44px,8vw,70px); font-weight:600; line-height:1.08; letter-spacing:-.025em;}
h2{font-size:clamp(24px,3vw,28px); font-weight:700; line-height:1.2; letter-spacing:-.03em;}
h3{font-size:18px; font-weight:600; line-height:1.3;}
.sec-head{margin-bottom:20px;}
.sub{margin-top:6px; color:var(--mute);}
.sub-sm{font-size:14px; color:var(--mute); margin-top:4px;}
.fine{margin-top:16px; font-size:12px; color:var(--ash);}

/* ---------- Butonlar: 16px köşe, kırmızı yalnızca birincil ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:6px 16px; border-radius:var(--r); border:0; font-size:14px; font-weight:700; line-height:1; text-decoration:none; white-space:nowrap; cursor:pointer; transition:background-color .15s ease, transform .1s ease;}
.btn:active{transform:scale(.96);}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover,.btn-primary:active{background:var(--primary-pressed);}
.btn-secondary{background:var(--secondary); color:var(--ink);}
.btn-secondary:hover,.btn-secondary:active{background:var(--secondary-pressed);}
.btn-lg{min-height:48px; padding:12px 20px; font-size:16px;}
.btn-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px;}
.icon-btn{width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--surface-card); color:var(--ink); cursor:pointer; transition:background-color .15s, transform .1s;}
.icon-btn:hover{background:var(--secondary);}
.icon-btn:active{transform:scale(.92);}
.link{border:0; background:none; padding:0; color:var(--ink); font-weight:700; text-decoration:underline; cursor:pointer;}

/* ---------- Durum hapı ---------- */
.status-pill{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-full); font-size:12px; font-weight:700; background:var(--surface-card); color:var(--mute);}
.status-pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;}
.status-pill.open{background:var(--success-pale); color:var(--success-deep);}
.status-pill.closed{background:var(--error-pale); color:var(--error);}

/* ================= ÜST MENÜ ================= */
.nav{position:sticky; top:0; z-index:50; background:var(--canvas); padding-top:env(safe-area-inset-top,0px);}
.nav-row{display:flex; align-items:center; gap:12px; height:72px; padding-inline:var(--gutter); max-width:1600px; margin-inline:auto;}
.brand{flex:none; display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; font-size:17px; color:var(--ink); border-radius:var(--r-full);}
.brand img{width:40px; height:40px; border-radius:50%; object-fit:cover;}
.brand span{white-space:nowrap;}
.nav-actions{display:flex; gap:8px; margin-left:auto;}
.hide-sm{display:none;}
.tabs{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding:0 var(--gutter) 10px; max-width:1600px; margin-inline:auto;}
.tabs::-webkit-scrollbar{display:none;}
.tabs a{flex:none; padding:10px 14px; border-radius:var(--r-full); font-size:16px; font-weight:600; color:var(--ink); text-decoration:none; transition:background-color .15s;}
.tabs a:hover{background:var(--surface-card);}
.tabs a[aria-current]{background:var(--ink); color:#fff;}

/* ================= HERO ================= */
.hero{display:grid; gap:32px; background:var(--surface-card); padding:clamp(32px,6vw,64px) var(--gutter); overflow:hidden;}
.hero-kicker{font-size:14px; font-weight:700; color:var(--mute); margin-bottom:12px;}
.hero-lead{margin-top:16px; font-size:18px; color:var(--body); max-width:34rem; line-height:1.5;}
.hero-stats{display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; margin-top:28px;}
.hero-stats li{display:flex; align-items:baseline; gap:6px; font-size:14px; color:var(--mute);}
.hero-stats strong{font-size:22px; color:var(--ink);}
.hero-pins{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-height:420px; overflow:hidden; mask-image:linear-gradient(#000 70%, transparent);}
.hero-pins .col{display:grid; gap:12px; align-content:start;}
.hero-pins .col-2{margin-top:48px;} .hero-pins .col-3{margin-top:20px;}
.hero-pins img{width:100%; border-radius:var(--r); aspect-ratio:3/4; object-fit:cover;}
/* Admin panelinden gelen fotoğraflar belli olana kadar (en fazla 2.5 sn) sabit fotoğrafları gizle, sonra yumuşakça göster */
[data-slot],.board-cover img{transition:opacity .35s ease;}
.cms-wait [data-slot],.cms-wait .board-cover img{opacity:0;}

/* ================= KAMPANYA ================= */
/* Görsel hiç kırpılmaz (kampanya afişlerinde yazı olur); ekrana sığacak kadar büyük gösterilir */
.campaign{background:var(--canvas); padding:clamp(16px,3vw,32px) var(--gutter) clamp(24px,4vw,40px); border-bottom:1px solid var(--hairline);}
.campaign-inner{max-width:1360px; margin-inline:auto; display:grid; gap:20px;}
.campaign-media{margin:0; display:grid; place-items:center; border-radius:var(--r-lg); overflow:hidden; background:var(--surface-card);}
.campaign-media img{width:100%; height:auto; max-height:min(80vh,820px); object-fit:contain;}
.campaign-copy{display:grid; gap:12px; align-content:center;}
.campaign-kicker{justify-self:start; padding:6px 12px; border-radius:var(--r-full); background:var(--primary); color:#fff; font-size:13px; font-weight:700; letter-spacing:.02em;}
.campaign-copy h2{font-size:clamp(26px,3.4vw,40px); line-height:1.12; letter-spacing:-.02em; color:var(--ink); text-wrap:balance;}
.campaign-date{font-size:17px; font-weight:600; color:var(--body);}
.campaign-phone{font-size:14px; color:var(--mute); font-variant-numeric:tabular-nums;}
@media (min-width:900px){
  .campaign-inner{grid-template-columns:auto minmax(260px,1fr); align-items:center; gap:clamp(24px,4vw,56px);}
  .campaign-media{justify-self:start; max-width:min(100%, 900px);}
  .campaign-media img{width:auto; max-width:100%;}
  .campaign-inner.wide{grid-template-columns:1fr;}
  .campaign-inner.wide .campaign-media{justify-self:stretch; max-width:none;}
  .campaign-inner.wide .campaign-media img{width:100%;}
  .campaign-inner.wide .campaign-copy{grid-template-columns:auto 1fr; grid-auto-flow:row; align-items:center; column-gap:24px;}
}

/* ================= VİDEOLAR ================= */
.videos{padding-top:clamp(40px,6vw,64px);}
.reels{display:grid; grid-auto-flow:column; grid-auto-columns:min(72%,280px); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; padding:4px var(--gutter) 8px; scroll-padding-inline:var(--gutter); scrollbar-width:none; max-width:1360px; margin-inline:auto;}
.reels::-webkit-scrollbar{display:none;}
.reel{scroll-snap-align:start; display:grid; gap:8px; align-content:start; min-width:0;}
.reel-media{position:relative; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; background:var(--dark);}
.reel-media video{width:100%; height:100%; object-fit:cover; display:block; background:var(--dark);}
/* Tam ekranda kırpma: dikey videonun tamamı görünsün */
.reel-media video:fullscreen{object-fit:contain; background:#000;}
.reel-media video:-webkit-full-screen{object-fit:contain; background:#000;}
.reel-play{position:absolute; inset:0; display:grid; place-items:center; border:0; padding:0; background:linear-gradient(to top, rgba(0,0,0,.35), transparent 45%); cursor:pointer; border-radius:var(--r);}
.reel-play span{width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.92); color:var(--ink); box-shadow:0 6px 24px rgba(0,0,0,.25); transition:transform .15s ease;}
.reel-play span .i{width:28px; height:28px; margin-left:3px;}
.reel-play:hover span{transform:scale(1.06);}
.reel-play:active span{transform:scale(.94);}
.reel.playing .reel-play{display:none;}
.reel-cap{font-size:15px; font-weight:700; color:var(--ink);}

/* ================= KEŞFET ================= */
.explore{padding-block:clamp(40px,6vw,64px);}
.chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin-bottom:20px; padding:2px;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:none; min-height:40px; padding:8px 16px; border:0; border-radius:var(--r-full); background:var(--surface-card); font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; transition:background-color .15s, color .15s, transform .1s;}
.chip:hover{background:var(--secondary);}
.chip:active{transform:scale(.95);}
.chip[aria-pressed="true"]{background:var(--ink); color:#fff;}
.empty{padding:24px; border-radius:var(--r); background:var(--surface-card); margin-bottom:16px;}
/* Taş duvar: CSS sütunları, her kart kendi yüksekliğinde */
.masonry{columns:2; column-gap:12px;}
.pin{break-inside:avoid; margin-bottom:16px; display:block;}
.pin-btn{display:block; width:100%; padding:0; border:0; background:none; text-align:left; cursor:zoom-in;}
.pin-media{display:block; position:relative; border-radius:var(--r); overflow:hidden; background:var(--surface-card);}
.pin-media img{width:100%; height:auto; transition:filter .2s ease;}
.pin-btn:hover .pin-media img{filter:brightness(.82);}
.pin-btn:active .pin-media{transform:scale(.98);} .pin-media{transition:transform .12s ease;}
.pin-tag{position:absolute; left:10px; bottom:10px; white-space:nowrap; padding:6px 12px; border-radius:var(--r-full); background:#fff; color:var(--ink); font-size:12px; font-weight:700;}
.pin-tag.women{background:var(--primary); color:#fff;}
.pin-cap{display:block; padding:8px 4px 0; font-size:14px; font-weight:600; color:var(--ink); line-height:1.3;}
.pin-sub{display:block; padding:2px 4px 0; font-size:12px; color:var(--mute);}
.pin.text-pin .pin-media{padding:20px; background:var(--dark); color:#fff;}
.pin.text-pin blockquote{overflow-wrap:break-word; hyphens:auto; font-size:clamp(15px,4.2vw,18px); font-weight:600; line-height:1.35; letter-spacing:-.01em;}
.pin.text-pin .stars{display:flex; gap:2px; color:#fff; margin-bottom:12px;}
.pin.text-pin .who{margin-top:14px; font-size:12px; color:rgba(255,255,255,.7);}
.pin.hide{display:none;}
.pin.info-pin .pin-media{padding:20px; background:var(--surface-card); border:1px solid var(--hairline);}
.info-pin .info-k{font-size:12px; font-weight:700; color:var(--mute); margin-bottom:8px;}
.info-pin h3{font-size:20px; letter-spacing:-.02em;}
.info-pin p:last-child{margin-top:8px; font-size:14px; color:var(--body);}

/* ================= SAATLER ================= */
.hours{padding-block:clamp(40px,6vw,64px); background:var(--surface-soft);}
.area-grid{display:grid; gap:16px;}
.area{background:var(--canvas); border-radius:var(--r-lg); padding:24px; border:1px solid var(--hairline);}
.area header{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px;}
.area h3{font-size:22px;}
.area table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums;}
.area th,.area td{padding:12px 0; text-align:left; font-weight:500; border-top:1px solid var(--hairline-soft, #e5e5e0);}
.area td{text-align:right; color:var(--ink);}
.area tr.today th,.area tr.today td{font-weight:700; color:var(--ink);}
.area tr.today th::before{content:""; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--primary); vertical-align:middle;}
.note{margin-top:12px; font-size:14px; color:var(--mute);}
.note strong{color:var(--ink);}

/* ================= PROGRAM: panolar ================= */
.program{padding-block:clamp(40px,6vw,64px);}
.boards{display:grid; grid-auto-flow:column; grid-auto-columns:min(78%,260px); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; padding:4px var(--gutter) 12px; scroll-padding-inline:var(--gutter); scrollbar-width:none; max-width:1360px; margin-inline:auto;}
.boards::-webkit-scrollbar{display:none;}
.board{scroll-snap-align:start;}
.board-cover{display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:2px; height:150px; border-radius:var(--r); overflow:hidden; background:var(--surface-card);}
.board-cover img{width:100%; height:100%; object-fit:cover;}
.board-cover img:first-child{grid-row:span 2;}
.board h3{margin-top:10px; font-size:18px;}
.board.today h3::after{content:"Bugün"; margin-left:8px; padding:3px 8px; border-radius:var(--r-full); background:var(--primary); color:#fff; font-size:11px; font-weight:700; vertical-align:middle;}
.board ul{margin-top:8px; display:grid; gap:6px;}
.board li{display:flex; align-items:center; gap:8px; font-size:14px;}
.board li time{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; min-width:44px;}
.board .t-women{padding:2px 8px; border-radius:var(--r-full); background:var(--primary); color:#fff; font-size:11px; font-weight:700;}
.board .t-mixed{padding:2px 8px; border-radius:var(--r-full); background:var(--secondary); color:var(--ink); font-size:11px; font-weight:700;}

/* ================= YORUMLAR: sağlı sollu kartlar ================= */
.reviews{padding-block:clamp(40px,6vw,64px); background:var(--surface-card);}
.feature{display:grid; gap:20px; align-items:center; background:var(--canvas); border-radius:var(--r-lg); overflow:hidden; margin-bottom:16px;}
.feature img{width:100%; aspect-ratio:3/2; object-fit:cover;}
.feature-copy{padding:8px 24px 28px;}
.tag{display:inline-block; padding:6px 12px; border-radius:var(--r-full); background:var(--surface-card); color:var(--ink); font-size:12px; font-weight:700; margin-bottom:14px;}
.feature blockquote{font-size:clamp(20px,2.4vw,28px); font-weight:700; line-height:1.25; letter-spacing:-.02em; color:var(--ink);}
.who{margin-top:14px; font-size:14px; color:var(--mute);}
.who strong{color:var(--ink);}

/* ================= KONUM ================= */
.location{padding-block:clamp(40px,6vw,64px);}
.loc-grid{display:grid; gap:16px;}
.loc-card{background:var(--surface-card); border-radius:var(--r-lg); padding:28px 24px;}
.loc-card h2{margin-bottom:16px;}
.loc-card dl{display:grid; gap:4px; margin-bottom:16px;}
.loc-card dt{margin-top:10px; font-size:12px; font-weight:700; color:var(--mute);}
.loc-card dd{font-size:16px; font-weight:600; color:var(--ink);}
.loc-card dd a{text-decoration:none;}
.loc-card dd a:hover{text-decoration:underline;}
.map{border-radius:var(--r-lg); overflow:hidden; min-height:340px; background:var(--surface-card);}
.map iframe{display:block; width:100%; height:100%; min-height:340px; border:0;}

/* ================= FOOTER ================= */
.footer{padding:32px 0 calc(96px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--hairline);}
.foot{display:grid; gap:10px; font-size:14px; color:var(--mute);}
.foot .brand span{display:inline;}
.foot .brand img{width:32px; height:32px;}
.foot a{color:var(--ink);}

/* ================= MOBİL ALT HAP ================= */
.dock{position:fixed; z-index:40; left:50%; bottom:calc(14px + env(safe-area-inset-bottom,0px)); translate:-50% 0; display:flex; gap:8px; padding:8px; border-radius:var(--r-full); background:var(--canvas); box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.18); transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .25s;}
.dock .btn{border-radius:var(--r-full); min-height:44px;}
.js .dock:not(.show){transform:translateY(140%); opacity:0; pointer-events:none;}

/* ================= KART AYRINTISI (pencere) ================= */
.modal{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:16px;}
.modal .scrim{position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; transition:opacity .25s ease;}
.modal.open .scrim{opacity:1;}
.modal-card{position:relative; width:min(900px,100%); max-height:calc(100dvh - 32px); overflow:auto; display:grid; background:var(--canvas); border-radius:var(--r-lg); box-shadow:0 16px 48px rgba(0,0,0,.25);
  transform-origin:var(--ox,50%) var(--oy,50%); transform:scale(.6); opacity:0; transition:transform .38s cubic-bezier(.22,1,.36,1), opacity .2s ease;}
.modal.open .modal-card{transform:none; opacity:1;}
.modal-card img{width:100%; max-height:62vh; object-fit:cover;}
.m-body{padding:24px;}
.m-body h3{font-size:clamp(24px,3vw,28px); font-weight:700; letter-spacing:-.03em;}
.m-body p{margin-top:10px; color:var(--body);}
.m-body .tag{margin:0;}
.m-close{position:absolute; top:12px; right:12px; z-index:2; background:#fff;}

/* ================= GENİŞ EKRAN ================= */
@media (min-width:640px){
  .brand span{display:inline;}
  .hide-sm{display:inline-flex;}
  .masonry{columns:3 200px;}
  .area-grid{grid-template-columns:1fr 1fr;}
}
@media (min-width:960px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; padding-inline:max(var(--gutter), calc((100vw - 1360px)/2 + var(--gutter)));}
  .hero-pins{max-height:520px;}
  .masonry{columns:4 220px; column-gap:16px;}
  /* Masaüstü: tüm videolar tek sırada yan yana; sayı arttıkça kartlar küçülür (en geniş 260px) */
  .reels{grid-auto-columns:minmax(0,260px); justify-content:start; overflow-x:visible; scroll-snap-type:none;}
  .feature{grid-template-columns:1fr 1fr; gap:0;}
  .feature-flip img{order:2;}
  .feature-copy{padding:40px;}
  .feature img{height:100%; aspect-ratio:auto; min-height:340px;}
  .loc-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}
  .map,.map iframe{min-height:100%;}
  .modal-card{grid-template-columns:1fr 1fr;}
  .modal-card img{height:100%; max-height:80vh;}
  .m-body{padding:48px 32px; align-self:center;}
  .dock{display:none;}
  .footer{padding-bottom:32px;}
}
@media (min-width:1280px){ .masonry{columns:5 220px;} }

/* ================= ERİŞİLEBİLİRLİK ================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .modal-card{transform:none; transition:opacity .2s ease;}
  .js .dock:not(.show){transform:none;}
  .btn:active,.chip:active,.pin-btn:active .pin-media{transform:none;}
}
@media (prefers-contrast: more){
  :root{--mute:#3a3a35; --hairline:#8a8a84;}
  .chip,.btn-secondary{box-shadow:inset 0 0 0 1px var(--ink);}
}