/* ==========================================================================
   İFA SPOR KULÜBÜ — ALTYAPI PORTALI
   Tasarım sistemi. Brif §2 (palet), §3 (font), §67-70 (hareket/erişilebilirlik)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* brif §2 — birebir */
  --koyu-yesil:#031A12;
  --kulup-yesil:#006633;
  --parlak-yesil:#00A85A;
  --kirmizi:#D71920;
  --beyaz:#FFFFFF;
  --acik-bg:#F4F5F3;
  --metin:#121212;

  /* türetilenler */
  --koyu-2:#06251A;
  --koyu-3:#0A3325;
  --cizgi:rgba(255,255,255,.10);
  --cizgi-acik:#E2E5E0;
  --sonuk:#8FA89B;
  --sonuk-koyu:#5B6B62;

  --baslik:'Barlow Condensed',system-ui,sans-serif;
  --govde:'Inter',system-ui,-apple-system,sans-serif;

  --r:4px;            /* köşe: brif "aşırı yuvarlatılmış kart" YASAK */
  --r-buyuk:6px;
  --gecis:180ms cubic-bezier(.4,0,.2,1);
  --sayfa:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--acik-bg);color:var(--metin);
  font-family:var(--govde);font-size:16px;line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

h1,h2,h3,h4,.baslik-font{
  font-family:var(--baslik);font-weight:700;
  letter-spacing:.01em;line-height:1.02;margin:0;
  text-transform:uppercase;
}

.sayfa{max-width:var(--sayfa);margin:0 auto;padding:0 24px}
.bolum{padding:84px 0}
.bolum-koyu{background:var(--koyu-yesil);color:var(--beyaz)}
.bolum-koyu h2,.bolum-koyu h3{color:var(--beyaz)}

/* ---------------------------------------------------------- bölüm başlığı */
.bolum-bas{margin-bottom:36px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:24px;flex-wrap:wrap}
.etiket{
  font-family:var(--baslik);font-size:14px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--parlak-yesil);
  display:flex;align-items:center;gap:9px;margin-bottom:10px;
}
.etiket::before{content:"";width:22px;height:2px;background:var(--kirmizi)}
.bolum-bas h2{font-size:clamp(30px,4.4vw,46px)}
.tumu{
  font-family:var(--baslik);font-size:15px;font-weight:600;letter-spacing:.09em;
  display:inline-flex;align-items:center;gap:7px;color:var(--kulup-yesil);
  padding:8px 0;border-bottom:2px solid transparent;transition:var(--gecis);
}
.bolum-koyu .tumu{color:var(--parlak-yesil)}
.tumu:hover{border-bottom-color:currentColor;gap:11px}

/* --------------------------------------------------------------- butonlar */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--baslik);font-size:16px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding:14px 28px;border:2px solid transparent;
  border-radius:var(--r);cursor:pointer;transition:var(--gecis);min-height:48px;
}
.btn-yesil{background:var(--kulup-yesil);color:#fff;border-color:var(--kulup-yesil)}
.btn-yesil:hover{background:var(--parlak-yesil);border-color:var(--parlak-yesil)}
.btn-kirmizi{background:var(--kirmizi);color:#fff;border-color:var(--kirmizi)}
.btn-kirmizi:hover{filter:brightness(1.12)}
.btn-hayalet{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-hayalet:hover{border-color:#fff;background:rgba(255,255,255,.09)}
.btn-cizgi{background:transparent;color:var(--kulup-yesil);border-color:var(--cizgi-acik)}
.btn-cizgi:hover{border-color:var(--kulup-yesil)}

/* ------------------------------------------------------------------- rozet */
.rozet{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--baslik);font-size:12.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;padding:4px 10px;border-radius:3px;
  background:var(--kulup-yesil);color:#fff;
}
.rozet-kirmizi{background:var(--kirmizi)}
.rozet-koyu{background:rgba(255,255,255,.13);color:#fff}
.rozet-acik{background:#E8EDE9;color:var(--kulup-yesil)}

/* canlı göstergesi (§68) */
.canli-rozet{background:var(--kirmizi);color:#fff}
.canli-nokta{width:7px;height:7px;border-radius:50%;background:#fff;
  animation:nabiz 1.6s ease-in-out infinite}
@keyframes nabiz{0%,100%{opacity:1}50%{opacity:.35}}

/* --------------------------------------------------------------- ızgaralar */
.izgara{display:grid;gap:20px}
.i2{grid-template-columns:repeat(2,1fr)}
.i3{grid-template-columns:repeat(3,1fr)}
.i4{grid-template-columns:repeat(4,1fr)}
.i6{grid-template-columns:repeat(6,1fr)}

/* ----------------------------------------------------------------- kartlar */
.kart{
  background:var(--beyaz);border:1px solid var(--cizgi-acik);
  border-radius:var(--r-buyuk);overflow:hidden;transition:var(--gecis);
}
.bolum-koyu .kart{background:var(--koyu-2);border-color:var(--cizgi);color:#fff}
/* §69: çok hafif hover */
.kart-tik:hover{transform:translateY(-3px);border-color:var(--kulup-yesil)}
.bolum-koyu .kart-tik:hover{border-color:var(--parlak-yesil)}

/* ------------------------------------------------------------ scroll animasyon (§67) */
.gorun{opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.gorun.ic{opacity:1;transform:none}

/* --------------------------------------------------------------- erişilebilirlik (§70) */
:focus-visible{outline:3px solid var(--parlak-yesil);outline-offset:2px}
.atla{position:absolute;left:-9999px;top:0;background:var(--kirmizi);color:#fff;
  padding:12px 20px;z-index:999}
.atla:focus{left:0}

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

/* --------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .i4,.i6{grid-template-columns:repeat(3,1fr)}
  .bolum{padding:64px 0}
}
@media (max-width:760px){
  .sayfa{padding:0 16px}
  .bolum{padding:48px 0}
  .i2,.i3,.i4,.i6{grid-template-columns:repeat(2,1fr)}
  .bolum-bas{margin-bottom:24px}
}
@media (max-width:460px){
  .i3,.i4{grid-template-columns:1fr}
}