/* =========================================================
   Gain Spor Kompleksi — tema
   Siyah zemin, logo kırmızısı, leaflet altın sarısı
   ========================================================= */

:root{
  --siyah:#08080B;
  --siyah2:#0E0F13;
  --siyah3:#14161B;
  --cizgi:rgba(255,255,255,.10);
  --yazi:#EDEEF2;
  --sol:#9AA0AC;
  --kirmizi:#E01B24;
  --kirmizi-koyu:#9E0F16;
  --altin:#FFC400;
  --accent:var(--kirmizi);
  --accent2:#FF6A3D;
  --kap:1240px;
  --yuvarlak:18px;
  --gecis:cubic-bezier(.22,1,.36,1);
  --basli:'Anton', 'Arial Narrow', Impact, sans-serif;
  --govde:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden}
body{
  margin:0; background:var(--siyah); color:var(--yazi);
  font-family:var(--govde); font-size:16px; line-height:1.65;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.kilit{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--accent); color:#fff}

.kap{width:min(100% - 40px, var(--kap)); margin-inline:auto}
.ikon{width:22px;height:22px;flex:0 0 auto}

/* ---------- Tipografi ---------- */
h1,h2,h3,h4{margin:0; font-weight:400; line-height:1.02; letter-spacing:.01em}
h1,h2,h3{font-family:var(--basli); text-transform:uppercase}
.dev{font-size:clamp(2.6rem, 8vw, 7rem)}
.buyuk{font-size:clamp(2rem, 5.2vw, 4.2rem)}
.orta{font-size:clamp(1.5rem, 3vw, 2.4rem)}
.etiket{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); font-weight:800;
}
.etiket::before{content:''; width:34px; height:2px; background:var(--accent); display:block}
.sol{color:var(--sol)}
.vurgu{color:var(--accent)}
.anahat{
  -webkit-text-stroke:1.5px rgba(255,255,255,.55); color:transparent;
}

/* ---------- Butonlar ---------- */
.dugme{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:100px;
  border:1px solid rgba(255,255,255,.22);
  font-weight:600; font-size:.92rem; letter-spacing:.02em;
  transition:.35s var(--gecis); position:relative; overflow:hidden;
  white-space:nowrap;
}
.dugme::after{
  content:''; position:absolute; inset:0; background:var(--accent);
  transform:translateY(101%); transition:transform .45s var(--gecis); z-index:-1;
}
.dugme:hover{border-color:var(--accent); color:#fff}
.dugme:hover::after{transform:translateY(0)}
.dugme span,.dugme svg{position:relative; z-index:1}
.dugme-dolu{background:var(--accent); border-color:var(--accent); color:#fff}
.dugme-dolu::after{background:#fff}
.dugme-dolu:hover{color:var(--siyah)}
.dugme-kucuk{padding:10px 18px; font-size:.85rem}

/* ---------- Yükleyici ---------- */
.yukleyici{
  position:fixed; inset:0; z-index:200; background:var(--siyah);
  display:grid; place-items:center;
  transition:opacity .6s ease,visibility .6s ease;
}
.yukleyici.bitti{opacity:0; visibility:hidden}
.yukleyici-ic{display:grid; justify-items:center; gap:22px}
.yukleyici-logo{width:110px; animation:nabiz 1.6s var(--gecis) infinite}
@keyframes nabiz{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(224,27,36,0))}50%{transform:scale(1.07);filter:drop-shadow(0 0 26px rgba(224,27,36,.55))}}
.yukleyici-cubuk{width:180px;height:2px;background:rgba(255,255,255,.12);overflow:hidden}
.yukleyici-cubuk span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--kirmizi),var(--altin));animation:dolar 1.4s ease forwards}
@keyframes dolar{to{width:100%}}
.yukleyici-yazi{font-family:var(--basli); letter-spacing:.34em; font-size:.72rem; color:var(--sol); margin:0}

/* ---------- İlerleme çubuğu ---------- */
.ilerleme{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:120;
  background:linear-gradient(90deg,var(--kirmizi),var(--altin));
  box-shadow:0 0 14px rgba(224,27,36,.6);
}

/* ---------- Üst bar ---------- */
.ustbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0; transition:.4s var(--gecis);
}
.ustbar.kucuk{
  padding:9px 0; background:rgba(8,8,11,.82);
  backdrop-filter:blur(16px); border-bottom:1px solid var(--cizgi);
}
.ustbar.gizli{transform:translateY(-115%)}
.ustbar-ic{display:flex; align-items:center; gap:26px}
.marka{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.marka img{width:52px;height:52px;transition:.4s var(--gecis)}
.ustbar.kucuk .marka img{width:42px;height:42px}
.marka-yazi{display:grid; line-height:1}
.marka-yazi strong{font-family:var(--basli); font-size:1.35rem; letter-spacing:.06em}
.marka-yazi small{font-size:.6rem; letter-spacing:.3em; color:var(--sol)}

.menu{display:flex; align-items:center; gap:6px; margin-left:auto}
.menu > a,.menu-tetik{
  padding:10px 16px; border-radius:100px; font-size:.9rem; font-weight:500;
  color:var(--sol); transition:.3s var(--gecis); display:inline-flex; align-items:center; gap:7px;
}
.menu > a:hover,.menu-tetik:hover,.menu .aktif{color:#fff; background:rgba(255,255,255,.07)}
.ok{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:.3s}
.menu-alt{position:relative}
.menu-alt.acik .ok,.menu-alt:hover .ok{transform:rotate(-135deg) translateY(-2px)}
.menu-alt:hover .menu-tetik{color:#fff; background:rgba(255,255,255,.07)}
/* ---- Mega menü ---- */
.acilir{
  --accent:var(--kirmizi);
  position:absolute; top:calc(100% + 16px); left:50%; translate:-50% 0;
  width:min(90vw, 780px); border-radius:24px; padding:14px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:14px;
  background:
    radial-gradient(120% 130% at 12% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(20,22,27,.97), rgba(10,11,14,.98));
  backdrop-filter:blur(24px) saturate(140%);
  border:1px solid color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,.10));
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,.85),
    0 0 60px -30px color-mix(in srgb, var(--accent) 70%, transparent),
    inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.97);
  transition:opacity .38s var(--gecis), transform .38s var(--gecis), visibility .38s,
             background .5s ease, border-color .5s ease, box-shadow .5s ease;
  transform-origin:top center;
}
/* tetik ile panel arasindaki bosluga koprü — fare gecerken menu kapanmasin */
.acilir::before{content:''; position:absolute; left:0; right:0; top:-20px; height:20px}
/* tetigi gosteren ok */
.acilir::after{
  content:''; position:absolute; top:-7px; left:50%; translate:-50% 0; width:14px; height:14px;
  background:rgba(20,22,27,.98); rotate:45deg; border-radius:3px;
  border-left:1px solid color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,.10));
  border-top:1px solid color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,.10));
}
.menu-alt.acik .acilir,
.menu-alt:hover .acilir,
.menu-alt:focus-within .acilir{opacity:1; visibility:visible; transform:translateY(0) scale(1)}

.acilir-liste{display:grid; gap:2px; align-content:start}
.acilir-baslik{
  margin:8px 0 3px; padding:0 12px; font-size:.62rem; font-weight:800;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.38);
  display:flex; align-items:center; gap:10px;
}
.acilir-baslik::after{content:''; flex:1; height:1px; background:rgba(255,255,255,.09)}
.acilir-liste > .acilir-baslik:first-child{margin-top:2px}
.acilir-oge{
  display:flex; gap:13px; align-items:center; padding:11px 12px; border-radius:15px;
  position:relative; isolation:isolate; overflow:hidden;
  opacity:0; transform:translateX(-14px);
  transition:transform .45s var(--gecis), opacity .45s var(--gecis), background .3s;
}
.menu-alt.acik .acilir-oge,
.menu-alt:hover .acilir-oge,
.menu-alt:focus-within .acilir-oge{
  opacity:1; transform:none; transition-delay:calc(var(--g) * .045s);
}
/* hover'da soldan dolan aksan zemini */
.acilir-oge::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 26%, transparent), transparent 78%);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--gecis);
}
.acilir-oge:hover::before,.acilir-oge:focus-visible::before,.acilir-oge.secili::before{transform:scaleX(1)}
/* sol kenardaki aksan cizgisi */
.acilir-oge::after{
  content:''; position:absolute; left:0; top:50%; translate:0 -50%; width:3px; height:0;
  background:var(--accent); border-radius:0 4px 4px 0; transition:height .4s var(--gecis);
  box-shadow:0 0 14px var(--accent);
}
.acilir-oge:hover::after,.acilir-oge:focus-visible::after,.acilir-oge.secili::after{height:64%}

.acilir-ikon{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;
  background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  transition:.45s var(--gecis);
}
.acilir-oge:hover .acilir-ikon,.acilir-oge.secili .acilir-ikon{
  background:var(--accent); color:#0B0B0E; border-color:var(--accent);
  box-shadow:0 8px 22px -6px var(--accent); transform:translateY(-1px) rotate(-6deg);
}
.acilir-yazi{min-width:0}
.acilir-yazi strong{display:block; font-size:.94rem; font-weight:700; letter-spacing:.01em}
.acilir-yazi small{
  display:block; font-size:.735rem; color:var(--sol); line-height:1.4; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acilir-oge:hover .acilir-yazi small,.acilir-oge.secili .acilir-yazi small{color:#C6CAD3}
.acilir-ok{
  margin-left:auto; color:var(--accent); opacity:0; transform:translateX(-8px);
  transition:.4s var(--gecis); flex:0 0 auto;
}
.acilir-ok svg{width:18px;height:18px}
.acilir-oge:hover .acilir-ok,.acilir-oge.secili .acilir-ok{opacity:1; transform:none}

/* sag onizleme */
.acilir-onizleme{
  position:relative; border-radius:16px; overflow:hidden; min-height:236px;
  background:#0B0C0F; border:1px solid rgba(255,255,255,.08);
}
.on-kare{
  position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.06);
  transition:opacity .55s var(--gecis), transform .9s var(--gecis);
}
.on-kare.aktif{opacity:1; transform:scale(1)}
.on-kare img{width:100%;height:100%;object-fit:cover}
.on-kare::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(8,8,11,.92) 4%, rgba(8,8,11,.15) 55%),
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 42%, transparent), transparent 62%);
}
.on-kare figcaption{
  position:absolute; left:16px; right:16px; bottom:38px; z-index:2; display:grid; gap:7px;
}
.on-etiket{
  justify-self:start; padding:5px 12px; border-radius:100px; font-size:.64rem; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; color:#0B0B0E; background:var(--accent);
}
.on-kare figcaption strong{
  font-family:var(--basli); font-size:1.28rem; text-transform:uppercase; line-height:1.1;
  letter-spacing:.02em; text-shadow:0 4px 20px rgba(0,0,0,.6);
}
.on-alt{
  position:absolute; left:16px; bottom:13px; z-index:3; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}

@media (max-width:1040px){
  .acilir{grid-template-columns:1fr; width:min(92vw,420px)}
  .acilir-onizleme{display:none}
}

.ustbar-sag{display:flex; align-items:center; gap:12px}
.hamburger{display:none; width:44px;height:44px; border-radius:12px; border:1px solid var(--cizgi); flex-direction:column; justify-content:center; align-items:center; gap:5px}
.hamburger span{display:block;width:19px;height:1.8px;background:#fff;transition:.35s var(--gecis)}
.hamburger.acik span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.acik span:nth-child(2){opacity:0}
.hamburger.acik span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobil menü */
.mobil-menu{
  position:fixed; inset:0; z-index:99; background:rgba(8,8,11,.98); backdrop-filter:blur(10px);
  padding:120px 24px 40px; display:flex; flex-direction:column; justify-content:space-between;
  transform:translateX(100%); transition:transform .5s var(--gecis); visibility:hidden;
}
.mobil-menu.acik{transform:translateX(0); visibility:visible}
.mobil-menu nav{display:grid; gap:4px}
.mobil-menu nav a{
  font-family:var(--basli); font-size:clamp(1.4rem,6vw,2rem); text-transform:uppercase;
  padding:12px 0; border-bottom:1px solid var(--cizgi); display:flex; align-items:center; gap:14px;
  opacity:0; transform:translateX(30px);
}
.mobil-menu.acik nav a{animation:kayGir .5s var(--gecis) forwards}
@keyframes kayGir{to{opacity:1;transform:translateX(0)}}
.mobil-menu nav a .nokta{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.mobil-ayrac{
  margin:18px 0 4px; font-size:.62rem; font-weight:800; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.38);
}
.mobil-alt{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100svh; display:grid; align-items:center; overflow:hidden; isolation:isolate}
.hero-arka{position:absolute; inset:0; z-index:-2}
.hero-arka img{width:100%;height:100%;object-fit:cover; transform:scale(1.12); animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.0) translateY(-2%)}}
.hero-arka::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(8,8,11,.35), transparent 60%),
    linear-gradient(180deg, rgba(8,8,11,.86) 0%, rgba(8,8,11,.55) 35%, rgba(8,8,11,.92) 88%, var(--siyah) 100%);
}
.hero-izgara{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  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(circle at 50% 45%,#000 10%,transparent 72%);
}
.hero-ic{padding:150px 0 110px; position:relative}
.hero-logo{width:96px; margin-bottom:26px; filter:drop-shadow(0 12px 40px rgba(224,27,36,.5))}
.hero h1{margin:.15em 0 .25em}
.hero h1 .satir{display:block; overflow:hidden}
.hero h1 .satir > span{display:block; transform:translateY(105%); animation:satirGir .95s var(--gecis) forwards}
@keyframes satirGir{to{transform:translateY(0)}}
.hero-alt{max-width:56ch; font-size:1.05rem; color:#C9CDD6; opacity:0; animation:belir .8s .7s var(--gecis) forwards}
@keyframes belir{to{opacity:1}}
.hero-dugmeler{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; opacity:0; animation:belir .8s .9s var(--gecis) forwards}
.hero-rozet{
  position:absolute; right:0; bottom:120px; display:grid; gap:10px; text-align:right;
  opacity:0; animation:belir .8s 1.1s var(--gecis) forwards;
}
.hero-rozet div{font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sol)}
.hero-rozet b{font-family:var(--basli); font-size:1.6rem; color:#fff}
.kaydir{
  position:absolute; left:50%; bottom:30px; translate:-50% 0; display:grid; justify-items:center; gap:8px;
  font-size:.66rem; letter-spacing:.3em; color:var(--sol); text-transform:uppercase; z-index:2;
}
.kaydir i{display:block; width:1px; height:52px; background:linear-gradient(var(--accent),transparent); animation:kaydirAnim 2s ease-in-out infinite}
@keyframes kaydirAnim{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Kayan yazı şeridi ---------- */
.serit{
  border-block:1px solid var(--cizgi); background:var(--siyah2);
  padding:16px 0; overflow:hidden; display:flex; gap:0; max-width:100%;
}
.serit-ic{display:flex; gap:44px; align-items:center; padding-right:44px; animation:kaydirYatay 26s linear infinite; flex:0 0 auto}
.serit:hover .serit-ic{animation-play-state:paused}
@keyframes kaydirYatay{to{transform:translateX(-100%)}}
.serit span{font-family:var(--basli); font-size:1.5rem; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; color:rgba(255,255,255,.85)}
.serit .yildiz{color:var(--accent); font-size:1.1rem}

/* ---------- Bölüm ortakları ---------- */
.bolum{padding:clamp(70px,10vw,140px) 0; position:relative}
.bolum-bas{display:grid; gap:18px; max-width:70ch; margin-bottom:56px}
.bolum-bas.orta{margin-inline:auto; text-align:center; justify-items:center}

/* ---------- Hakkında ---------- */
.hakkinda{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,80px); align-items:center}
.hakkinda-gorsel{position:relative}
.hakkinda-gorsel img{border-radius:var(--yuvarlak); aspect-ratio:4/5; object-fit:cover; width:100%}
.hakkinda-gorsel .kucuk{
  position:absolute; right:-8%; bottom:-9%; width:46%; aspect-ratio:1;
  border-radius:var(--yuvarlak); object-fit:cover; border:6px solid var(--siyah);
}
.hakkinda-gorsel .cerceve{
  position:absolute; inset:16px -16px -16px 16px; border:1px solid var(--accent);
  border-radius:var(--yuvarlak); z-index:-1;
}
.degerler{display:grid; gap:2px; margin-top:34px; border-top:1px solid var(--cizgi)}
.deger{padding:20px 0; border-bottom:1px solid var(--cizgi); display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; transition:.35s}
.deger:hover{padding-inline:14px; background:rgba(255,255,255,.03)}
.deger b{font-family:var(--basli); font-size:1.05rem; color:var(--accent); letter-spacing:.05em}
.deger h4{font-size:1rem; font-family:var(--govde); font-weight:700; text-transform:none; margin-bottom:3px}
.deger p{margin:0; font-size:.9rem; color:var(--sol)}

/* ---------- Sayaçlar ---------- */
.sayaclar{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--cizgi); border-block:1px solid var(--cizgi)}
.sayac{background:var(--siyah); padding:36px 22px; text-align:center; transition:.4s var(--gecis)}
.sayac:hover{background:var(--siyah3)}
.sayac b{display:block; font-family:var(--basli); font-size:clamp(2.2rem,5vw,3.6rem); line-height:1;
  background:linear-gradient(180deg,#fff,#8b8f99); -webkit-background-clip:text; background-clip:text; color:transparent}
.sayac span{font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sol)}

/* ---------- Branş panelleri ---------- */
.branslar{display:grid; gap:clamp(60px,8vw,120px)}
.panel{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); align-items:center;
  --accent:var(--kirmizi);
}
.panel:nth-child(even) .panel-gorsel{order:2}
.panel-gorsel{position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/3.1; background:var(--siyah3)}
.panel-gorsel img{width:100%;height:100%;object-fit:cover; transition:transform 1.1s var(--gecis); transform:scale(1.03)}
.panel:hover .panel-gorsel img{transform:scale(1.09)}
.panel-gorsel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(200deg, transparent 35%, color-mix(in srgb, var(--accent) 40%, transparent) 130%);
  mix-blend-mode:screen; opacity:.55;
}
.panel-no{
  position:absolute; left:18px; top:6px; z-index:2; font-family:var(--basli); font-size:5rem;
  color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.5); line-height:1;
}
.panel-video{
  position:absolute; right:16px; bottom:16px; width:132px; aspect-ratio:9/16; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.25); box-shadow:0 20px 40px rgba(0,0,0,.55); z-index:2; background:#000;
}
.panel-video video{width:100%;height:100%;object-fit:cover}
.panel-metin{display:grid; gap:16px; align-content:center}
.panel-metin h3{font-size:clamp(1.9rem,3.6vw,3.1rem)}
.panel-liste{display:grid; gap:9px; margin:6px 0 0; padding:0; list-style:none}
.panel-liste li{display:flex; gap:11px; align-items:flex-start; font-size:.93rem; color:#C7CBD4}
.panel-liste li::before{
  content:''; width:7px;height:7px;margin-top:8px; flex:0 0 auto; border-radius:2px;
  background:var(--accent); rotate:45deg;
}
.panel-etiket{
  display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border-radius:100px; width:fit-content;
  background:color-mix(in srgb, var(--accent) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color:var(--accent); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
}
.panel-etiket svg{width:16px;height:16px}

/* ---------- Diğer aktiviteler ---------- */
.aktiviteler{background:var(--siyah2); border-block:1px solid var(--cizgi)}
.aktivite-izgara{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.aktivite{
  position:relative; border-radius:22px; overflow:hidden; isolation:isolate;
  min-height:380px; display:flex; align-items:flex-end;
  border:1px solid var(--cizgi); transition:.55s var(--gecis);
}
.aktivite:hover{transform:translateY(-6px); border-color:color-mix(in srgb, var(--accent) 55%, transparent)}
.aktivite img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform 1s var(--gecis); transform:scale(1.02);
}
.aktivite:hover img{transform:scale(1.08)}
.aktivite::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(0deg, rgba(8,8,11,.94) 8%, rgba(8,8,11,.45) 62%, rgba(8,8,11,.10) 100%),
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%);
}
.aktivite-ic{padding:28px; display:grid; gap:12px; width:100%}
.aktivite-ic h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.aktivite-ic p{margin:0; color:#C7CBD4; font-size:.94rem; max-width:44ch}
.aktivite-ok{
  display:inline-flex; align-items:center; gap:9px; margin-top:6px; font-weight:600; font-size:.9rem;
  color:var(--accent); transition:gap .35s var(--gecis);
}
.aktivite:hover .aktivite-ok{gap:16px}
.aktivite-ok svg{width:18px;height:18px}

/* ---------- Reels / dikey videolar ---------- */
.reels{background:var(--siyah2); border-block:1px solid var(--cizgi); overflow:hidden}
.reels-ic{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,70px); align-items:center}
.reels-yapisik{position:sticky; top:110px; align-self:start}
.reels-serit{display:flex; gap:22px; overflow-x:auto; padding:10px 4px 26px; scroll-snap-type:x mandatory; scrollbar-width:thin}
.reels-serit::-webkit-scrollbar{height:5px}
.reels-serit::-webkit-scrollbar-thumb{background:var(--accent); border-radius:9px}
.reel{
  position:relative; flex:0 0 clamp(220px,26vw,300px); aspect-ratio:9/16; border-radius:20px; overflow:hidden;
  scroll-snap-align:center; background:#000; border:1px solid var(--cizgi);
  transition:.55s var(--gecis);
}
.reel:hover{transform:translateY(-8px); border-color:color-mix(in srgb, var(--accent) 60%, transparent)}
.reel video{width:100%;height:100%;object-fit:cover; display:block}
.reel-kaplama{
  position:absolute; inset:0; padding:18px; display:flex; flex-direction:column; justify-content:flex-end; gap:4px;
  background:linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
}
.reel-etiket{
  align-self:flex-start; margin-bottom:auto; padding:5px 12px; border-radius:100px; font-size:.66rem;
  letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:#fff;
  background:color-mix(in srgb, var(--accent) 75%, transparent); backdrop-filter:blur(6px);
}
.reel-kaplama h4{font-family:var(--basli); font-size:1.25rem; text-transform:uppercase}
.reel-kaplama p{margin:0; font-size:.8rem; color:#BFC4CE}
.reel-ses{
  position:absolute; right:14px; top:14px; z-index:3; width:36px;height:36px; border-radius:50%;
  display:grid; place-items:center; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px); font-size:.9rem;
}
.reel-cubuk{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.14); z-index:2}
.reel-cubuk i{display:block; height:100%; width:0; background:var(--accent)}

/* ---------- Galeri ---------- */
.filtreler{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:34px}
.filtre{
  padding:9px 20px; border-radius:100px; border:1px solid var(--cizgi); font-size:.85rem;
  color:var(--sol); transition:.3s var(--gecis);
}
.filtre:hover{color:#fff; border-color:rgba(255,255,255,.35)}
.filtre.aktif{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.filtre small{opacity:.65; margin-left:6px; font-size:.75em}

.izgara{columns:4; column-gap:14px}
.izgara .kutu{
  break-inside:avoid; margin-bottom:14px; border-radius:14px; overflow:hidden; position:relative;
  background:var(--siyah3); cursor:zoom-in; display:block; width:100%;
  opacity:0; transform:translateY(26px) scale(.98); transition:.7s var(--gecis);
}
.izgara .kutu.gorundu{opacity:1; transform:none}
.izgara .kutu img{width:100%; height:auto; transition:transform .8s var(--gecis), filter .5s}
.izgara .kutu:hover img{transform:scale(1.06)}
.izgara .kutu::after{
  content:attr(data-kat); position:absolute; left:12px; bottom:12px; z-index:2;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800;
  padding:5px 11px; border-radius:100px; background:rgba(8,8,11,.72); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);
  opacity:0; transform:translateY(8px); transition:.4s var(--gecis);
}
.izgara .kutu:hover::after{opacity:1; transform:none}
.izgara .kutu.gizli{display:none}

.daha{display:grid; place-items:center; margin-top:44px}

/* ---------- Işık kutusu ---------- */
.isik-kutu{
  position:fixed; inset:0; z-index:180; background:rgba(5,5,7,.96); backdrop-filter:blur(12px);
  display:grid; place-items:center; opacity:0; visibility:hidden; transition:.4s var(--gecis);
}
.isik-kutu.acik{opacity:1; visibility:visible}
.ik-govde{margin:0; display:grid; gap:14px; justify-items:center; max-width:min(94vw,1200px); max-height:88vh}
.ik-govde img{max-width:100%; max-height:82vh; object-fit:contain; border-radius:12px; animation:ikGir .45s var(--gecis)}
@keyframes ikGir{from{opacity:0;transform:scale(.96)}}
.ik-govde figcaption{font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sol)}
.ik-kapat,.ik-onceki,.ik-sonraki{
  position:absolute; z-index:2; width:52px;height:52px; border-radius:50%;
  border:1px solid var(--cizgi); background:rgba(255,255,255,.05); display:grid; place-items:center;
  transition:.3s; font-size:1.9rem; line-height:0;
}
.ik-kapat:hover,.ik-onceki:hover,.ik-sonraki:hover{background:var(--accent); border-color:var(--accent)}
.ik-kapat{top:24px; right:24px}
.ik-onceki{left:24px; top:50%; translate:0 -50%}
.ik-sonraki{right:24px; top:50%; translate:0 -50%}

/* ---------- Tesis / harita / iletişim ---------- */
.bilgi-izgara{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.bilgi{
  padding:30px; border:1px solid var(--cizgi); border-radius:var(--yuvarlak); background:var(--siyah2);
  display:grid; gap:12px; align-content:start; transition:.45s var(--gecis); position:relative; overflow:hidden;
}
.bilgi::before{
  content:''; position:absolute; inset:auto auto -60% -20%; width:70%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
  opacity:0; transition:.6s var(--gecis);
}
.bilgi:hover{transform:translateY(-6px); border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
.bilgi:hover::before{opacity:1}
.bilgi svg{width:26px;height:26px;color:var(--accent)}
.bilgi h4{font-family:var(--govde); font-weight:700; font-size:1.05rem; text-transform:none}
.bilgi p,.bilgi a{margin:0; color:var(--sol); font-size:.95rem; position:relative}
.bilgi a:hover{color:#fff}

.saat-liste{display:grid; gap:0}
.saat-liste p{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px dashed var(--cizgi); font-size:.92rem}
.saat-liste p b{color:#fff; font-weight:600}

.harita{border-radius:var(--yuvarlak); overflow:hidden; border:1px solid var(--cizgi); filter:grayscale(1) invert(.92) hue-rotate(180deg) contrast(.9); transition:.5s}
.harita:hover{filter:none}
.harita iframe{display:block; width:100%; height:420px; border:0}

/* ---------- CTA ---------- */
.cta{position:relative; overflow:hidden; text-align:center; isolation:isolate}
.cta-arka{position:absolute; inset:0; z-index:-2}
.cta-arka img{width:100%;height:100%;object-fit:cover}
.cta-arka::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,8,11,.9),rgba(8,8,11,.82)), radial-gradient(70% 60% at 50% 50%, color-mix(in srgb, var(--kirmizi) 30%, transparent), transparent 70%)}
.cta .kap{display:grid; gap:22px; justify-items:center; padding-block:clamp(70px,10vw,130px)}

/* ---------- Alt bar ---------- */
.altbar{border-top:1px solid var(--cizgi); background:var(--siyah2); padding-top:70px}
.altbar-ust{display:grid; grid-template-columns:1.4fr .8fr .9fr 1.1fr; gap:44px; padding-bottom:50px}
.altbar-marka img{margin-bottom:18px}
.altbar-slogan{color:var(--sol); font-size:.92rem; max-width:38ch}
.sosyal{display:flex; gap:10px; margin-top:18px}
.sosyal a{width:42px;height:42px;border-radius:50%;border:1px solid var(--cizgi);display:grid;place-items:center;transition:.35s var(--gecis)}
.sosyal a:hover{background:var(--kirmizi); border-color:var(--kirmizi); transform:translateY(-3px)}
.altbar-kol h4{font-family:var(--basli); font-size:1rem; letter-spacing:.16em; margin-bottom:16px; color:#fff}
.altbar-kol a,.altbar-kol p{display:block; color:var(--sol); font-size:.9rem; margin:0 0 9px; transition:.3s}
.altbar-kol a:hover{color:var(--kirmizi); transform:translateX(4px)}
.altbar-kol p{display:flex; justify-content:space-between; gap:12px}
.altbar-kol p b{color:#fff; font-weight:600}
.altbar-son{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:22px 0; border-top:1px solid var(--cizgi); color:var(--sol); font-size:.82rem}
.altbar-son p{margin:0}

/* ---------- WhatsApp ---------- */
.wp-buton{
  position:fixed; right:20px; bottom:20px; z-index:90; display:flex; align-items:center; gap:9px;
  padding:13px 20px; border-radius:100px; background:#1FAF54; color:#fff; font-weight:600; font-size:.9rem;
  box-shadow:0 14px 34px rgba(31,175,84,.35); transition:.4s var(--gecis);
}
.wp-buton:hover{transform:translateY(-4px) scale(1.03)}
.wp-buton svg{width:20px;height:20px}

/* ---------- Branş iç sayfa ---------- */
.brans-hero{position:relative; min-height:74svh; display:grid; align-items:flex-end; overflow:hidden; isolation:isolate}
.brans-hero-arka{position:absolute; inset:0; z-index:-2}
.brans-hero-arka img{width:100%;height:100%;object-fit:cover; transform:scale(1.08); animation:kenburns 16s ease-in-out infinite alternate}
.brans-hero-arka::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,11,.75), rgba(8,8,11,.55) 40%, var(--siyah) 96%),
             linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%)}
.brans-hero .kap{padding:170px 0 60px; display:grid; gap:16px}
.brans-hero h1{font-size:clamp(2.4rem,7vw,5.6rem)}
.kirinti{display:flex; gap:10px; align-items:center; font-size:.78rem; color:var(--sol); letter-spacing:.1em; text-transform:uppercase}
.kirinti a:hover{color:#fff}

.brans-govde{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,5vw,70px); align-items:start}
.brans-yan{display:grid; gap:14px; position:sticky; top:110px}
.brans-video{border-radius:20px; overflow:hidden; border:1px solid var(--cizgi); background:#000; aspect-ratio:9/16; position:relative}
.brans-video video{width:100%;height:100%;object-fit:cover}

.diger-branslar{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.diger{
  position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3; display:grid; align-items:flex-end;
  border:1px solid var(--cizgi); isolation:isolate;
}
.diger img{position:absolute; inset:0; width:100%;height:100%;object-fit:cover; z-index:-1; transition:.7s var(--gecis)}
.diger:hover img{transform:scale(1.08)}
.diger::after{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(8,8,11,.92), transparent 70%)}
.diger span{padding:16px; font-family:var(--basli); font-size:1.05rem; text-transform:uppercase; letter-spacing:.04em}

/* ---------- Görünüm animasyonları ---------- */
[data-belir]{opacity:0; transform:translateY(34px); transition:opacity .9s var(--gecis), transform .9s var(--gecis)}
[data-belir].gorundu{opacity:1; transform:none}
[data-belir="sol"]{transform:translateX(-40px)}
[data-belir="sag"]{transform:translateX(40px)}
[data-belir="olcek"]{transform:scale(.94)}
[data-gecikme="1"]{transition-delay:.1s}
[data-gecikme="2"]{transition-delay:.2s}
[data-gecikme="3"]{transition-delay:.3s}
[data-gecikme="4"]{transition-delay:.4s}
[data-gecikme="5"]{transition-delay:.5s}

/* ---------- Duyarlı ---------- */
@media (max-width:1100px){
  .izgara{columns:3}
  .altbar-ust{grid-template-columns:1fr 1fr; gap:34px}
  .hakkinda{grid-template-columns:1fr}
  .hakkinda-gorsel{max-width:520px}
  .reels-ic{grid-template-columns:1fr}
  .reels-yapisik{position:static}
  .brans-govde{grid-template-columns:1fr}
  .brans-yan{position:static; grid-template-columns:1fr 1fr; align-items:start}
  .brans-video{max-width:340px; width:100%; margin-inline:auto}
}
@media (max-width:900px){
  .menu{display:none}
  .hamburger{display:flex}
  .ustbar-sag{margin-left:auto}   /* menü gizlenince buton sağa yaslansın */
  .ustbar-sag .dugme-kucuk{display:none}
  .panel{grid-template-columns:1fr; gap:22px}
  .panel:nth-child(even) .panel-gorsel{order:0}
  .bilgi-izgara{grid-template-columns:1fr}
  .sayaclar{grid-template-columns:1fr 1fr}
  .hero-rozet{display:none}
  .aktivite-izgara{grid-template-columns:1fr}
  .aktivite{min-height:320px}
}
@media (max-width:640px){
  .izgara{columns:2; column-gap:10px}
  .izgara .kutu{margin-bottom:10px}
  .altbar-ust{grid-template-columns:1fr}
  .ik-onceki{left:10px} .ik-sonraki{right:10px}
  .ik-kapat{top:14px; right:14px}
  .wp-buton span{display:none}
  .wp-buton{padding:15px}
  .brans-yan{grid-template-columns:1fr; justify-items:stretch}
  .brans-video{max-width:min(300px, 78vw)}
  .panel-video{width:98px; right:10px; bottom:10px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}