/* ==========================================================================
   TRABZON 1453 SPOR — TASARIM SİSTEMİ
   Renkler kulüp armasından: bordo #800000 · mavi #0070C0 · siyah
   İki tema: fildişi (açık) ve lacivert (koyu)
   ========================================================================== */

/* ------------------------------------------------ 1. RENK VE ÖLÇÜ */

:root {
  /* açık tema — fildişi */
  --zemin: #F5F1E8;
  --zemin-2: #EDE7D9;
  --yuzey: #FFFFFF;
  --murekkep: #14181F;
  --murekkep-2: #454C57;
  --solgun: #6E7681;
  --cizgi: #DED7C7;
  --cizgi-2: #C9C0AC;

  --bordo: #800000;
  --bordo-koyu: #5C0000;
  --bordo-is: #F2E7E4;
  --mavi: #0070C0;
  --mavi-koyu: #005490;
  --mavi-is: #E6EFF7;

  /* metin vurgusu — koyu temada bordo okunmadığı için orada maviye döner */
  --aksan: #800000;

  /* koyu tema zemininin sabiti — perde ve giriş sahnesi için */
  --lacivert: #0C1626;

  /* tipografi */
  --f-baslik: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-govde: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-rakam: "Anton", Impact, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ölçü */
  --kenar: clamp(1.25rem, 4vw, 4rem);
  --genislik: 1240px;
  --bolum-arasi: clamp(3.2rem, 5.6vw, 5.4rem);   /* bölümler arası boşluk */
  --r: 2px;

  --gecis: 260ms cubic-bezier(.22, .68, .28, 1);
  color-scheme: light;
}

:root[data-tema="koyu"] {
  --zemin: #0C1626;
  --zemin-2: #101F35;
  --yuzey: #13233C;
  --murekkep: #ECF1F8;
  --murekkep-2: #A9B7C9;
  --solgun: #7A8798;
  --cizgi: #22334D;
  --cizgi-2: #2E4260;

  --bordo: #A31220;          /* dolgu olarak; lacivertte gövdesi durur */
  --bordo-koyu: #7C0A16;
  --bordo-is: #24141C;
  --mavi: #3D9BE0;           /* koyu zeminde okunur mavi */
  --mavi-koyu: #2A7CBC;
  --mavi-is: #12283F;

  --aksan: #6FB6EC;          /* lacivert üstünde okunur vurgu */

  color-scheme: dark;
}

/* ------------------------------------------------ 2. TEMEL */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--f-govde);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--gecis), color var(--gecis);
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: var(--bordo); color: #fff; }

:focus-visible { outline: 2px solid var(--mavi); outline-offset: 3px; }

/* ------------------------------------------------ 3. DÜZEN */

.kap {
  width: min(var(--genislik), 100% - (var(--kenar) * 2));
  margin-inline: auto;
}
.kap-genis { width: min(1600px, 100% - (var(--kenar) * 2)); margin-inline: auto; }
.kap-dar   { width: min(820px,  100% - (var(--kenar) * 2)); margin-inline: auto; }

/* ---- dikey ritim ----------------------------------------------------
   Boşluk her yerde --bolum-arasi kadardır. İki komşu bölüm yarım pay
   verir; toplamı tam boşluk eder. Açılış şeridi ve sayfa başlığının
   kendi payı olmadığı için onlardan sonra gelen bölüm tam payı tek
   başına verir. Kendi zemini olan bölüm payı dış kenarına alır ki
   renk bandı içeriden dar görünmesin. */

.bolum, .bolum-sik { padding-block: calc(var(--bolum-arasi) / 2); }

.giris + .bolum, .giris + .bolum-sik,
.sayfa-bas + .bolum, .sayfa-bas + .bolum-sik { padding-top: var(--bolum-arasi); }

.zemin-2 { background: var(--zemin-2); }

.zemin-2, .kayit-alan {
  margin-block: calc(var(--bolum-arasi) / 2);
  padding-block: var(--bolum-arasi);
}
.giris + .zemin-2, .giris + .kayit-alan,
.sayfa-bas + .zemin-2, .sayfa-bas + .kayit-alan { margin-top: var(--bolum-arasi); }

/* alt bilgi de aynı boşlukla başlar */
main { padding-bottom: calc(var(--bolum-arasi) / 2); }
.zemin-koyu { background: var(--lacivert); color: #ECF1F8; }
.zemin-koyu .ustbaslik { color: #8FC0EA; }

/* ------------------------------------------------ 4. TİPOGRAFİ */

h1, h2, h3, h4 {
  font-family: var(--f-baslik);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.018em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

.dev {
  font-size: clamp(2.6rem, 7.2vw, 5.6rem);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1.02;
  letter-spacing: -0.028em;
}
.buyuk { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.orta  { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.kucuk { font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-stretch: 100%; letter-spacing: -0.01em; }

.ustbaslik {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aksan);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.ustbaslik::before {
  content: "";
  width: 1.8rem;
  height: 2px;
  background: var(--mavi);
  flex: 0 0 1.8rem;
}

.giris-yazi {
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.68;
  color: var(--murekkep-2);
  max-width: 58ch;
}

.rakam {
  font-family: var(--f-rakam);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  line-height: .92;
}

.mono {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--solgun);
}

/* ------------------------------------------------ 5. DÜĞMELER */

.dugme {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--f-govde);
  font-size: .94rem;
  font-weight: 600;
  text-decoration: none;
  padding: .95rem 1.7rem;
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--gecis);
  isolation: isolate;
}
.dugme::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bordo);
  z-index: -1;
  transition: transform 420ms cubic-bezier(.22,.68,.28,1);
}
.dugme::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mavi);
  z-index: -2;
}
.dugme { color: #fff; }
.dugme:hover::before { transform: translateY(-102%); }

/* koyu zemin üzerinde duran düğmeler */
.dugme-beyaz { color: #14181F; }
.dugme-beyaz::before { background: #fff; }
.dugme-beyaz::after { background: #E8E2D4; }
.dugme-seffaf { color: #fff; border: 1px solid rgba(255,255,255,.42); }
.dugme-seffaf::before { background: rgba(255,255,255,.15); }
.dugme-seffaf::after { background: rgba(255,255,255,.28); }

.dugme-cizgi {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--murekkep);
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--cizgi-2);
  transition: border-color var(--gecis), color var(--gecis);
}
.dugme-cizgi:hover { color: var(--aksan); border-bottom-color: var(--aksan); }
.dugme-cizgi .ok { transition: transform var(--gecis); }
.dugme-cizgi:hover .ok { transform: translateX(4px); }

/* ------------------------------------------------ 5b. ALT SAYFA BAŞLIĞI
   Dört alt sayfanın da başlık alanı aynı yükseklikte durur: başlık bir
   satır da olsa iki satır da olsa sayfa değiştirince zıplamaz.
   Çapraz açı ana sayfadaki dilimlerle aynı; renk şeritleri geniş
   ekranda orantılı büyümesin diye piksel tavanı var. */

.sayfa-bas {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(300px, 42vh, 380px);
  padding-block: clamp(2.2rem, 4.5vh, 3.2rem);
  background: var(--lacivert); color: #F2F5FA;
}
.sayfa-bas::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(109deg,
    #800000 0, #800000 min(26%, 340px), transparent min(26%, 340px));
  opacity: .92;
}
.sayfa-bas::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(109deg,
    transparent calc(100% - min(20%, 260px)), #0070C0 calc(100% - min(20%, 260px)));
  opacity: .58;
}
.sayfa-bas .kap { position: relative; z-index: 2; }
.sayfa-bas h1 {
  color: #fff;
  /* ana sayfadaki dev başlıktan bir tık küçük: iki satırlık başlık da
     tek satırlık başlık da aynı yüksekliğe sığsın */
  font-size: clamp(2rem, 4.8vw, 3.5rem);
  text-wrap: balance;
}
.sayfa-bas .ustbaslik { color: rgba(255,255,255,.82); }
.sayfa-bas .ustbaslik::before { background: #fff; opacity: .6; }
.sayfa-bas .giris-yazi { color: rgba(255,255,255,.86); margin-top: 1.2rem; max-width: 56ch; }

/* ------------------------------------------------ 6. ÜST MENÜ */

.ustbar {
  position: sticky;
  top: 0;
  z-index: 70;
  background: color-mix(in srgb, var(--zemin) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--cizgi);
  transition: background var(--gecis), border-color var(--gecis);
}
.ustbar-ic {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 4.6rem;
}
.marka { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; }
.marka img { width: 42px; height: 42px; object-fit: contain; }
.marka b {
  font-family: var(--f-baslik);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1rem;
  letter-spacing: -0.01em;
  display: block;
  line-height: 1.15;
}
.marka span {
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  color: var(--solgun);
  display: block;
}

.menu { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.menu a {
  position: relative;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  color: var(--murekkep-2);
  padding-block: .4rem;
  transition: color var(--gecis);
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bordo) 0 50%, var(--mavi) 50% 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 340ms cubic-bezier(.22,.68,.28,1);
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--murekkep); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }

.tema-dugme {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border: 1px solid var(--cizgi);
  border-radius: 50%;
  background: transparent;
  color: var(--murekkep-2);
  cursor: pointer;
  transition: border-color var(--gecis), color var(--gecis), transform var(--gecis);
}
.tema-dugme:hover { border-color: var(--mavi); color: var(--mavi); transform: rotate(18deg); }
.tema-dugme svg { width: 1.05rem; height: 1.05rem; }
:root[data-tema="koyu"] .tema-ay { display: none; }
:root:not([data-tema="koyu"]) .tema-gunes { display: none; }

.menu-ac { display: none; background: none; border: 0; cursor: pointer; color: var(--murekkep); padding: .4rem; }
.menu-ac svg { width: 1.5rem; height: 1.5rem; }

@media (max-width: 880px) {
  .menu-ac { display: block; }
  .ustbar nav {
    position: fixed;
    inset: 4.6rem 0 auto;
    background: var(--zemin);
    border-bottom: 1px solid var(--cizgi);
    padding: 1.2rem var(--kenar) 1.8rem;
    transform: translateY(-120%);
    transition: transform 380ms cubic-bezier(.22,.68,.28,1);
  }
  .ustbar nav[data-acik="evet"] { transform: translateY(0); }
  .menu { flex-direction: column; gap: 0; }
  .menu a { display: block; padding: .85rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--cizgi); }
  .menu a::after { display: none; }
}

/* ------------------------------------------------ 7. ALT BİLGİ */

.altbilgi {
  background: var(--lacivert);
  color: #C6D2E2;
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.altbilgi a { color: #fff; text-decoration: none; }
.altbilgi a:hover { color: #8FC0EA; }
.altbilgi-ic {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .altbilgi-ic { grid-template-columns: 1.4fr 1fr 1fr; } }
.altbilgi h4 {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  color: #8FC0EA;
  margin: 0 0 1rem;
  font-weight: 500;
  font-stretch: normal;
}
.altbilgi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .92rem; }
.altbilgi-son {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: #7D8CA3;
}
/* Alt satırdaki Admin bağlantısı: site adresiyle aynı boyut ve aynı ton.
   Alt bilgideki diğer bağlantılar beyaz; burada devralınan renk kullanılır
   ki adresle yan yana dururken göze batmasın. */
.altbilgi-son a { color: inherit; text-decoration: none; }
.altbilgi-son a:hover { color: #8FC0EA; }

/* ------------------------------------------------ 8. HAREKET */

.ac { opacity: 0; transform: translateY(22px); }
.ac.gorundu {
  opacity: 1;
  transform: none;
  transition: opacity 720ms cubic-bezier(.22,.68,.28,1), transform 720ms cubic-bezier(.22,.68,.28,1);
}
.ac-gecikme-1 { transition-delay: 90ms; }
.ac-gecikme-2 { transition-delay: 180ms; }
.ac-gecikme-3 { transition-delay: 270ms; }

/* ------------------------------------------------ 9. AÇILIŞ SAHNESİ
   Bordo ve mavi perde çapraz bir çizgiyle bölünür. Etkileşimle
   kenarlara açılır, aradan arma büyüyerek öne çıkar.            */

body.sahne-acik { overflow: hidden; }

#acilisSahne {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #FFFFFF;
  cursor: pointer;
  opacity: 1;
  perspective: 1100px;        /* arma uzaktan öne doğru gelsin */
  perspective-origin: 50% 46%;
}
#acilisSahne[data-durum="bitiyor"] {
  opacity: 0;
  transition: opacity 620ms cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

#acilisSahne .perde {
  position: absolute;
  inset: -1px;
  z-index: 2;                 /* arma perdenin ARKASINDA durur */
  transition: transform 2300ms cubic-bezier(.62,.02,.20,1);
  will-change: transform;
}
#acilisSahne .perde-sol {
  background: #800000;
  clip-path: polygon(0 0, 57% 0, 43% 100%, 0 100%);
}
#acilisSahne .perde-sag {
  background: #0070C0;
  clip-path: polygon(57% 0, 100% 0, 100% 100%, 43% 100%);
}
#acilisSahne[data-durum="aciliyor"] .perde-sol { transform: translateX(-108%); }
#acilisSahne[data-durum="aciliyor"] .perde-sag { transform: translateX(108%); }

#acilisSahne .sahne-arma {
  position: relative;
  z-index: 1;                 /* perdenin altında: aradan görünür */
  width: clamp(170px, 21vw, 290px);
  height: auto;
  opacity: 1;                 /* baştan yerinde; perde örtüyor */
  transform: translateZ(-460px) scale(.96);
  transform-style: preserve-3d;
  transition: transform 2650ms cubic-bezier(.16,.72,.18,1.015),
              filter 1900ms ease;
  filter: drop-shadow(0 8px 20px rgba(12,22,38,.10));
}
#acilisSahne[data-durum="aciliyor"] .sahne-arma {
  transform: translateZ(0) scale(1);
  filter: drop-shadow(0 26px 62px rgba(12,22,38,.32));
}

#acilisSahne .sahne-ipucu {
  position: absolute;
  bottom: clamp(2rem, 5vh, 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #FFFFFF;
  mix-blend-mode: difference;
  animation: ipucuNefes 2.4s ease-in-out infinite;
}
#acilisSahne[data-durum] .sahne-ipucu { opacity: 0; transition: opacity 300ms; }
@keyframes ipucuNefes {
  0%, 100% { opacity: .55; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 1;   transform: translateX(-50%) translateY(5px); }
}