/* msgspor.com — msgone.net ve msgdeneme.com ile AYNI tasarım dili (Apple sistem
   yazı tipi yığını, aynı renk değişkenleri ve yarıçaplar). Vurgu: MSG Spor kırmızısı. */
:root{
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg:#ffffff; --bg-2:#f5f5f7; --surface:#ffffff;
  --border:rgba(0,0,0,.1);
  --text:#0e0e0e; --text-2:rgba(0,0,0,.58); --text-3:rgba(0,0,0,.38);
  --accent:#E8232A;              /* MSG Spor kırmızısı */
  --accent-ink:#C8151C;          /* açık zeminde metin için koyu ton (kontrast) */
  --arrow-back:#9A9CA3;          /* logodaki arka ok */
  --hero-from:#fdecec; --hero-to:#ffffff;
  --nav-bg:rgba(255,255,255,.88); --nav-border:rgba(0,0,0,.06);
  --max:1180px; --radius:18px;
}
:root:not([data-theme='light']){
  @media (prefers-color-scheme: dark){
    --bg:#000; --bg-2:#0e0e0e; --surface:#1a1a1a;
    --border:rgba(255,255,255,.12);
    --text:#fff; --text-2:rgba(255,255,255,.62); --text-3:rgba(255,255,255,.4);
    --accent:#FF4A50; --accent-ink:#FF6A6F;
    --hero-from:#2a0b0c; --hero-to:#000;
    --nav-bg:rgba(0,0,0,.72); --nav-border:rgba(255,255,255,.09);
  }
}
:root[data-theme='dark']{
  --bg:#000; --bg-2:#0e0e0e; --surface:#1a1a1a;
  --border:rgba(255,255,255,.12);
  --text:#fff; --text-2:rgba(255,255,255,.62); --text-3:rgba(255,255,255,.4);
  --accent:#FF4A50; --accent-ink:#FF6A6F;
  --hero-from:#2a0b0c; --hero-to:#000;
  --nav-bg:rgba(0,0,0,.72); --nav-border:rgba(255,255,255,.09);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 16px}
a{color:inherit}

/* ---- üst çubuk ---- */
.nav{
  position:sticky; top:0; z-index:20;
  padding-top:env(safe-area-inset-top, 0px);
  background:var(--nav-bg); backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--nav-border);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; height:50px;
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.nav-links{display:flex; align-items:center; gap:18px; font-size:14px}
.nav-links a{text-decoration:none; color:var(--text-2)}
.nav-links a:hover{color:var(--text)}
@media (max-width:560px){ .nav-links .gizle-dar{display:none} }
.wordmark{
  display:inline-flex; align-items:center; gap:.16em;
  font-weight:700; letter-spacing:.14em; text-decoration:none; line-height:1;
}
.chevrons{width:24px; height:17px; flex:none}
.word{display:flex; flex-direction:column; font-size:12px}
.line-2{color:var(--accent)}
.theme-toggle{
  appearance:none; border:1px solid var(--border); background:transparent;
  color:var(--text); width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center; cursor:pointer;
}
.theme-toggle svg{width:17px; height:17px}
.ico-sun{display:none}
:root[data-theme='dark'] .ico-moon{display:none}
:root[data-theme='dark'] .ico-sun{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme='light']) .ico-moon{display:none}
  :root:not([data-theme='light']) .ico-sun{display:block}
}

/* ---- kahraman ---- */
.hero{
  background:linear-gradient(180deg,var(--hero-from),var(--hero-to));
  padding:72px 16px 64px; text-align:center;
}
.hero .ikon{width:88px; height:88px; border-radius:20px; margin:0 auto 22px; display:block;
  box-shadow:0 12px 34px rgba(232,35,42,.22)}
.hero h1{
  margin:0 0 14px; font-size:clamp(34px,6vw,60px); line-height:1.07;
  letter-spacing:-.022em; font-weight:700;
}
.eyebrow{
  margin:0 0 12px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink); font-weight:600;
}
.sub{
  margin:0 auto; max-width:640px; font-size:clamp(17px,2.2vw,21px);
  color:var(--text-2);
}
.magaza{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:28px}
.magaza span{
  display:inline-flex; align-items:center; gap:8px; padding:11px 18px;
  border-radius:999px; border:1px solid var(--border); background:var(--surface);
  font-size:15px; font-weight:600; color:var(--text-2);
}
.magaza svg{width:18px; height:18px}
.not{margin:14px 0 0; font-size:14px; color:var(--text-3)}

/* ---- bölümler ---- */
section{padding:64px 0; border-top:1px solid var(--border)}
section.alt{background:var(--bg-2)}
.section-label{
  margin:0 0 8px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3); font-weight:600;
}
h2{margin:0 0 10px; font-size:clamp(26px,3.6vw,38px); letter-spacing:-.02em; line-height:1.15}
.section-sub{margin:0 0 34px; color:var(--text-2); max-width:640px}

/* ---- rol kartları ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.card{
  display:flex; flex-direction:column; gap:10px;
  padding:24px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface);
}
.card .rozet{
  align-self:flex-start; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.card h3{margin:0; font-size:19px; letter-spacing:-.01em}
.card ul{margin:0; padding-left:18px; color:var(--text-2); font-size:15px}
.card li{margin:3px 0}

/* ---- adımlar ---- */
.adimlar{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; counter-reset:adim}
.adim{padding:22px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border)}
.adim::before{
  counter-increment:adim; content:counter(adim);
  display:grid; place-items:center; width:30px; height:30px; margin-bottom:12px;
  border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:15px;
}
.adim h3{margin:0 0 6px; font-size:17px}
.adim p{margin:0; color:var(--text-2); font-size:15px}

/* ---- güvence şeridi ---- */
.guvence{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.guvence div{padding:18px 20px; border-radius:14px; border:1px solid var(--border); background:var(--surface)}
.guvence strong{display:block; margin-bottom:4px}
.guvence span{color:var(--text-2); font-size:15px}

/* ---- künye / iletişim ---- */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:0}
.fact{padding:18px 20px; border:1px solid var(--border); border-radius:14px; background:var(--surface)}
.fact dt{margin:0 0 4px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3)}
.fact dd{margin:0; font-size:16px}
.fact a{color:var(--accent-ink); text-decoration:none}
.fact a:hover{text-decoration:underline}

footer{padding:36px 0 56px; color:var(--text-3); font-size:14px; border-top:1px solid var(--border)}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:space-between}
footer nav{display:flex; flex-wrap:wrap; gap:8px 18px}
footer a{text-decoration:none; color:var(--text-2)}
footer a:hover{color:var(--text)}

/* ---- metin sayfaları (gizlilik, destek, hesap silme) ---- */
.metin{max-width:760px; margin:0 auto; padding:40px 16px 64px; font-size:16px; line-height:1.6}
.metin h1{font-size:clamp(28px,5vw,40px); line-height:1.12; letter-spacing:-.02em; margin:0 0 6px}
.metin h2{font-size:20px; margin:34px 0 8px; letter-spacing:-.01em}
.metin .tarih{color:var(--text-2); font-size:14px; margin:0 0 24px}
.metin a{color:var(--accent-ink)}
.metin table{width:100%; border-collapse:collapse; font-size:14px; margin:8px 0}
.metin th,.metin td{border:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top}
.metin th{background:var(--bg-2)}
.tablo{overflow-x:auto}
.kutu{background:var(--bg-2); border-radius:14px; padding:14px 16px; margin:16px 0}
.metin ol li, .metin ul li{margin:4px 0}