/* =====================================================================
   Kartaltepe Spor Kulübü — "Çok Yakında" sayfası
   Kimlik: siyah–beyaz, altın vurgu (1972 mirası)
   Arka plan: eğik forma çizgileri + arma filigranı
   ===================================================================== */

/* ---------- 1. Tokenlar ---------- */
:root{
  --ink:        #08080a;
  --line:       rgba(255,255,255,.10);
  --line-soft:  rgba(255,255,255,.06);

  --fg:         #f5f6f8;
  --fg-soft:    #b6b9c1;
  --fg-mute:    #7a7e88;

  --accent:     #d8b36a;      /* altın — yalnızca vurgu */
  --accent-dim: rgba(216,179,106,.16);

  --font-display: "Anton", "Arial Narrow", Impact, system-ui, sans-serif;
  --font-body:    "Manrope", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  --r-sm: 10px;
  --r-pill: 999px;

  --pad: clamp(1.15rem, 4vw, 3.25rem);
  --maxw: 1180px;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

/* ---------- 2. Sıfırlama ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  min-height:100svh;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:clamp(.95rem,.42vw + .84rem,1.05rem);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.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{
  position:fixed; top:-100px; left:1rem; z-index:200;
  padding:.7rem 1.1rem; border-radius:var(--r-sm);
  background:var(--fg); color:var(--ink); font-weight:700;
  transition:top .25s var(--ease);
}
.skip:focus{ top:1rem; }

:where(a,button,input):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

/* =====================================================================
   3. ARKA PLAN — KULÜP DOKUSU
   Katmanlar: eğik siyah-beyaz forma çizgileri → gezinen ışık huzmesi →
   yumuşak parıltılar → dev arma filigranı → vinyet → film greni.
   ===================================================================== */
.bg{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
  background:
    radial-gradient(ellipse 110% 80% at 70% 8%, #16171c 0%, transparent 60%),
    linear-gradient(180deg,#0d0d11 0%,#0a0a0d 55%,#07070a 100%);
}

/* forma çizgileri — ince, eğik, yavaşça kayan */
.bg__stripes{
  position:absolute; inset:-25%;
  background:repeating-linear-gradient(108deg,
    rgba(255,255,255,.055) 0 1px,
    rgba(255,255,255,0)    1px 38px);
  animation:stripeDrift 40s linear infinite;
  mask-image:radial-gradient(ellipse 85% 75% at 60% 45%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 60% 45%, #000 20%, transparent 78%);
}
@keyframes stripeDrift{ to{ transform:translate3d(38px,-118px,0); } }

/* geniş ışık huzmesi — ekranı ağır ağır tarar */
.bg__beam{
  position:absolute; top:-40%; left:-60%;
  width:70%; height:190%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,
    transparent, rgba(255,255,255,.05) 45%, rgba(255,255,255,.075) 55%, transparent);
  filter:blur(38px);
  animation:beam 17s var(--ease-io) infinite;
}
@keyframes beam{
  0%   { transform:translateX(0) rotate(18deg); opacity:0; }
  12%  { opacity:1; }
  70%  { opacity:1; }
  100% { transform:translateX(230vw) rotate(18deg); opacity:0; }
}

/* yumuşak parıltılar */
.bg__glow{ position:absolute; border-radius:50%; filter:blur(90px); }
.bg__glow--a{
  width:min(60vw,760px); aspect-ratio:1; top:-26%; right:-12%;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 68%);
  animation:float 19s var(--ease-io) infinite alternate;
}
.bg__glow--b{
  width:min(52vw,620px); aspect-ratio:1; left:-18%; bottom:-28%;
  background:radial-gradient(circle, rgba(216,179,106,.20), transparent 66%);
  animation:float 24s var(--ease-io) infinite alternate-reverse;
}
@keyframes float{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-5%,7%,0) scale(1.15); }
}

/* dev arma filigranı */
.bg__crest{
  position:absolute;
  right:clamp(1.5rem,5vw,6rem);
  top:50%;
  width:min(56vh,34rem); height:auto;
  max-width:calc(100vw - 9rem);      /* dar/geniş her ekranda tam görünsün */
  opacity:.05;
  transform:translate3d(calc(var(--px,0) * 12px), calc(-50% + var(--py,0) * 10px), 0);
  transition:transform 1.1s var(--ease);
  animation:crestIn 2.4s var(--ease) .5s both;
}
@keyframes crestIn{
  from{ opacity:0; filter:blur(6px); }
  to  { opacity:.06; filter:blur(0); }
}

.bg__vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 95% 80% at 42% 46%, transparent 40%, rgba(0,0,0,.62) 100%),
    linear-gradient(90deg, rgba(7,7,10,.9) 0%, rgba(7,7,10,.45) 38%, transparent 68%),
    linear-gradient(180deg, rgba(0,0,0,.5), transparent 26%, transparent 68%, rgba(0,0,0,.8));
}
.bg__grain{
  position:absolute; inset:-200%;
  opacity:.045; 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");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-3%,2%); }
  40%{ transform:translate(2%,-3%); }
  60%{ transform:translate(-2%,-2%); }
  80%{ transform:translate(3%,3%); }
}

/* ---------- 4. Açılış perdesi ---------- */
.curtain{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center;
  background:var(--ink);
  transition:opacity .6s var(--ease), visibility .6s;
}
.curtain.is-done{ opacity:0; visibility:hidden; }
.curtain__mark{ display:grid; gap:1rem; justify-items:center; }
.curtain__year{
  font-family:var(--font-display);
  font-size:clamp(2.6rem,9vw,4.5rem);
  letter-spacing:.18em; padding-left:.18em;
  background:linear-gradient(100deg,#fff 20%,var(--accent) 50%,#fff 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% 100%;
  animation:sheen 2.2s var(--ease-io) infinite;
}
@keyframes sheen{ from{ background-position:180% 0; } to{ background-position:-60% 0; } }
.curtain__bar{
  width:min(46vw,220px); height:2px; border-radius:2px;
  background:var(--line); overflow:hidden;
}
.curtain__bar i{
  display:block; height:100%; width:35%;
  background:linear-gradient(90deg,transparent,var(--fg),transparent);
  animation:barSlide 1.15s var(--ease-io) infinite;
}
@keyframes barSlide{ from{ transform:translateX(-110%); } to{ transform:translateX(320%); } }

/* ---------- 5. Yerleşim ---------- */
.shell{
  position:relative; z-index:1;
  min-height:100svh;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 1fr auto auto;
  gap:clamp(1.1rem,2.2vw,1.7rem);
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(1.1rem,3vw,2rem) var(--pad) clamp(1.2rem,3vw,2rem);
}

/* ---------- 6. Üst bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:.85rem; }
.brand__logo{
  width:clamp(42px,5vw,54px); height:auto;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.7));
  transition:transform .5s var(--ease), filter .5s var(--ease);
  animation:crestPop 1s var(--ease) .3s both;
}
.brand:hover .brand__logo{
  transform:translateY(-3px) scale(1.04);
  filter:drop-shadow(0 10px 26px rgba(216,179,106,.35));
}
@keyframes crestPop{
  from{ opacity:0; transform:scale(.82) rotate(-8deg); }
  to  { opacity:1; transform:none; }
}

.brand__text{ display:grid; line-height:1.05; }
.brand__text strong{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  letter-spacing:.06em; text-transform:uppercase;
}
.brand__text em{
  font-style:normal; font-size:.68rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--fg-mute);
}

.topbar__meta{ display:flex; gap:.5rem; flex-wrap:wrap; max-width:100%; }
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.42rem .85rem; border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
  font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-soft);
}
.chip--ghost{ background:transparent; color:var(--fg-mute); }
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  animation:pulse 2.4s var(--ease-io) infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(216,179,106,.55); }
  70% { box-shadow:0 0 0 11px rgba(216,179,106,0); }
  100%{ box-shadow:0 0 0 0 rgba(216,179,106,0); }
}

/* ---------- 7. Hero ---------- */
.hero{
  align-self:center;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-items:start;
  gap:clamp(.95rem,2vw,1.35rem);
  padding-block:clamp(.75rem,2.6vw,1.6rem);
  max-width:56rem;
}

.eyebrow{
  margin:0; display:flex; align-items:center; gap:.9rem;
  font-size:.74rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow__line{
  width:clamp(28px,6vw,64px); height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
  transform-origin:left;
  animation:lineGrow 1.1s var(--ease) .5s both;
}
@keyframes lineGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.title{
  margin:0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(3.2rem,13.5vw,9.6rem);
  line-height:.9;
  letter-spacing:-.005em;
  text-transform:uppercase;
  text-shadow:0 24px 60px rgba(0,0,0,.55);
}
.title__row{ display:block; }
.ltr{
  display:inline-block;
  transform:translateY(115%) rotate(6deg);
  opacity:0;
  animation:letterUp .95s var(--ease) forwards;
  animation-delay:calc(.42s + var(--i) * .045s);
  will-change:transform;
}
@keyframes letterUp{ to{ transform:translateY(0) rotate(0); opacity:1; } }

.title__row--accent{
  position:relative;
  --indent:.6em;
  padding-left:var(--indent);   /* Ç'nin çengeline yer aç */
}
.title__row--accent .ltr{
  background:linear-gradient(180deg,#fff 30%,#9a9da6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.16);
}
.title__row--accent::after{
  content:""; position:absolute; left:var(--indent); bottom:-.04em;
  width:min(100%,14ch); height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),transparent 88%);
  transform-origin:left; transform:scaleX(0);
  animation:lineGrow 1.2s var(--ease) 1.15s forwards;
}

.lede{
  margin:0; max-width:min(48ch,100%);
  color:var(--fg-soft); font-weight:400;
}
.lede strong{ color:var(--fg); font-weight:700; }

/* ---------- 8. Bağlantı butonları ---------- */
.cta{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; max-width:100%; }

.btn{
  position:relative; overflow:hidden; cursor:pointer; max-width:100%;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.4rem;
  border-radius:var(--r-pill);
  font-weight:700; font-size:.92rem; letter-spacing:.01em;
  white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .3s, color .3s, border-color .3s;
}
.btn svg{
  width:18px; height:18px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }

.btn--primary{
  border:1px solid var(--fg);
  background:var(--fg); color:var(--ink);
  box-shadow:0 14px 34px -16px rgba(255,255,255,.55);
}
.btn--primary:hover{ box-shadow:0 20px 42px -16px rgba(255,255,255,.72); }
.btn--primary::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.75) 50%,transparent 75%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease-io);
}
.btn--primary:hover::before{ transform:translateX(120%); }

.btn--ghost{
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
  color:var(--fg-soft); font-weight:600;
}
.btn--ghost:hover{
  color:var(--fg);
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);
}

/* ---------- 9. Kayan şerit ---------- */
.marquee{
  position:relative; overflow:hidden;
  border-block:1px solid var(--line-soft);
  padding-block:.7rem;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:scroll 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scroll{ to{ transform:translateX(-50%); } }
.marquee__group{ display:flex; align-items:center; gap:1.4rem; padding-right:1.4rem; }
.marquee__group b{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(.85rem,1.7vw,1.15rem);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-soft); white-space:nowrap;
}
.marquee__group i{ color:var(--accent); font-size:.7rem; font-style:normal; }

/* ---------- 10. Alt bilgi ---------- */
.foot{ display:grid; gap:1.1rem; }
.facts{
  margin:0; display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.fact{ display:grid; gap:.2rem; }
.fact dt{
  font-size:.64rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg-mute);
}
.fact dd{
  margin:0;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(.95rem,1.9vw,1.28rem);
  letter-spacing:.04em; text-transform:uppercase;
}
.foot__legal{
  margin:0; padding-top:.9rem;
  border-top:1px solid var(--line-soft);
  font-size:.72rem; color:var(--fg-mute);
}

/* ---------- 11. Giriş animasyonu ---------- */
.reveal{
  opacity:0; transform:translateY(26px);
  animation:reveal .9s var(--ease) forwards;
  animation-delay:calc(.35s + var(--d,0s));
}
@keyframes reveal{ to{ opacity:1; transform:none; } }

/* ---------- 12. Duyarlılık ---------- */
@media (max-width:900px){
  .shell{ gap:1.3rem; }
  .hero{ padding-block:1.5rem; }
}
@media (max-width:680px){
  .topbar{ align-items:flex-start; }
  .topbar__meta{ width:100%; }
  .title{ font-size:clamp(2.9rem,16vw,5.4rem); }
  .cta{ width:100%; }
  .btn{ flex:1 1 100%; justify-content:center; }
  .facts{ grid-template-columns:repeat(2,1fr); }
  .bg__crest{
    width:min(42vh,17rem); opacity:.045; right:50%;
    transform:translate3d(calc(50% + var(--px,0) * 8px),
                          calc(-50% + var(--py,0) * 8px), 0);
  }
  .bg__vignette{
    background:
      radial-gradient(ellipse 120% 70% at 50% 40%, transparent 35%, rgba(0,0,0,.6) 100%),
      linear-gradient(180deg, rgba(7,7,10,.85) 0%, rgba(7,7,10,.35) 45%, rgba(0,0,0,.8) 100%);
  }
}
@media (max-width:380px){
  .btn{ font-size:.86rem; padding:.8rem 1.1rem; }
}
@media (min-width:1500px){ :root{ --maxw:1320px; } }

/* yatay telefon: dikey boşluğu kıs */
@media (max-height:520px) and (orientation:landscape){
  .shell{ gap:.8rem; }
  .title{ font-size:clamp(2.4rem,9vh,4rem); }
  .lede{ display:none; }
}

/* ---------- 13. Hareket azaltma ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.ltr{ opacity:1; transform:none; }
  .brand__logo{ opacity:1; }
  .title__row--accent::after{ transform:scaleX(1); }
  .eyebrow__line{ transform:scaleX(1); }
  .marquee__track{ animation:none; }
  .bg__beam,.bg__stripes,.bg__crest{ animation:none; }
}

/* ---------- 14. Yazdırma ---------- */
@media print{
  .bg,.curtain,.marquee{ display:none !important; }
  body{ background:#fff; color:#000; }
}