:root{
  --asfalt:#0b0f0e; --yuzey:#111715; --cizgi:#1f2a26; --koyu-nane:#0a271d;
  --metin:#e6ece9; --orta:#c9d1ce; --soluk:#8a9792;
  --nane:#00ffa3; --amber:#ffb020; --kirmizi:#ff4d5e;
  --vurgu:var(--nane);
  --ekran:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--asfalt);color:var(--metin);font:400 17px/1.6 "Barlow",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--nane)}
:focus-visible{outline:2px solid var(--nane);outline-offset:3px}
.atla{position:absolute;left:-999px;top:8px;background:var(--nane);color:var(--asfalt);padding:8px 12px;z-index:10}
.atla:focus{left:8px}
.gizli-baslik{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- ust --- */
.ust{display:flex;align-items:center;gap:24px;padding:20px var(--ekran);position:relative;z-index:2}
.marka img{width:154px;height:auto}
.ust-nav{display:flex;gap:22px;margin-left:auto}
.ust-nav a{color:var(--orta);text-decoration:none;font:600 italic 18px/1 "Barlow Condensed",sans-serif;letter-spacing:.02em}
.ust-nav a:hover{color:var(--nane)}

/* --- dugmeler --- */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:4px;text-decoration:none;
  font:800 italic 21px/1 "Barlow Condensed",sans-serif;letter-spacing:.02em;border:2px solid transparent;transition:background-color .15s,color .15s,border-color .15s}
.dugme.birincil{background:var(--vurgu);color:var(--asfalt)}
.dugme.birincil:hover{background:var(--metin)}
.dugme.ikincil{border-color:var(--cizgi);color:var(--metin);background:var(--yuzey)}
.dugme.ikincil:hover{border-color:var(--vurgu);color:var(--vurgu)}
.dugme.kucuk{min-height:38px;padding:0 16px;font-size:17px}

/* --- hero: bannerdaki gibi dev durum kelimesi --- */
.hero{position:relative;overflow:hidden;padding:clamp(40px,9vw,120px) var(--ekran) 112px;border-bottom:1px solid var(--cizgi)}
.filigran{position:absolute;right:-.06em;top:50%;transform:translateY(-54%);font:800 italic clamp(220px,42vw,620px)/.8 "Barlow Condensed",sans-serif;
  color:var(--koyu-nane);letter-spacing:-.02em;pointer-events:none;user-select:none;transition:color .4s}
.hero-ic{position:relative;max-width:760px}
.durum-etiket{display:flex;align-items:center;gap:12px;margin:0 0 4px;font:700 italic 22px/1 "Barlow Condensed",sans-serif;letter-spacing:.14em;color:var(--orta)}
.nokta{width:14px;height:14px;border-radius:50%;background:var(--vurgu)}
.durum-kelime{margin:0;font:800 italic clamp(84px,17vw,200px)/.86 "Barlow Condensed",sans-serif;color:var(--vurgu);letter-spacing:-.005em;text-transform:uppercase}
.durum-kelime[data-durum="yukleniyor"]{color:var(--soluk)}
.slogan{margin:18px 0 28px;font:600 italic 26px/1.2 "Barlow Condensed",sans-serif;color:var(--metin)}
.canli{display:flex;flex-wrap:wrap;gap:12px 40px;margin:0 0 34px}
.canli div{min-width:120px}
.canli dt{color:var(--soluk);font-size:15px}
.canli dd{margin:0;font:700 italic 34px/1.1 "Barlow Condensed",sans-serif;font-variant-numeric:tabular-nums}
.hero-dugmeler{display:flex;flex-wrap:wrap;gap:12px}

body[data-durum="bakim"]{--vurgu:var(--amber)}
body[data-durum="kapali"]{--vurgu:var(--kirmizi)}
body[data-durum="bakim"] .filigran{color:#231f10}
body[data-durum="kapali"] .filigran{color:#231516}

/* --- serit: yol cizgisi (sayfadaki tek hareket) --- */
.serit{position:absolute;left:0;right:0;bottom:36px;height:10px;overflow:hidden}
.serit span{position:absolute;inset:0 -120px 0 0;background:repeating-linear-gradient(90deg,var(--vurgu) 0 70px,transparent 70px 110px);animation:yol 2.2s linear infinite}
@keyframes yol{to{transform:translateX(-110px)}}
@media (prefers-reduced-motion:reduce){.serit span{animation:none}html{scroll-behavior:auto}}

/* --- bolumler --- */
.bolum{padding:clamp(56px,8vw,96px) var(--ekran);max-width:1200px}
.bolum h2{margin:0 0 28px;font:800 italic clamp(40px,6vw,64px)/1 "Barlow Condensed",sans-serif;letter-spacing:-.005em}
.aciklama{max-width:62ch;margin:0 0 40px;font-size:20px;color:var(--orta)}
.ozellikler{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;border-top:1px solid var(--cizgi)}
.ozellik{padding:26px 28px 8px 0}
.ozellik + .ozellik{padding-left:28px;border-left:2px dashed var(--cizgi)}
.ozellik h3{margin:0 0 8px;font:800 italic 38px/1 "Barlow Condensed",sans-serif;color:var(--nane)}
.ozellik p{margin:0;color:var(--orta);max-width:36ch}

.adimlar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;counter-reset:adim}
.adimlar li{counter-increment:adim;position:relative;padding-top:64px}
.adimlar li::before{content:counter(adim);position:absolute;top:0;left:0;font:800 italic 64px/1 "Barlow Condensed",sans-serif;color:var(--koyu-nane);-webkit-text-stroke:1px var(--nane)}
.adimlar h3{margin:0 0 6px;font:700 italic 28px/1.1 "Barlow Condensed",sans-serif}
.adimlar p{margin:0;color:var(--orta);max-width:38ch}

.kurallar{display:grid;gap:12px;max-width:860px}
.kurallar details{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:6px}
.kurallar summary{cursor:pointer;padding:18px 22px;font:700 italic 26px/1.1 "Barlow Condensed",sans-serif;list-style:none;display:flex;justify-content:space-between;gap:12px}
.kurallar summary::-webkit-details-marker{display:none}
.kurallar summary::after{content:"+";color:var(--nane);font-style:normal}
.kurallar details[open] summary::after{content:"−"}
.kurallar ol{margin:0;padding:0 22px 20px 48px;color:var(--orta)}
.kurallar li{margin:6px 0;max-width:72ch}

.guncellemeler{display:grid;gap:0;max-width:860px}
.guncelleme{display:grid;grid-template-columns:140px 1fr;gap:20px;padding:24px 0;border-top:2px dashed var(--cizgi)}
.guncelleme time{color:var(--soluk);font:600 italic 20px/1.3 "Barlow Condensed",sans-serif}
.guncelleme h3{margin:0 0 8px;font:700 italic 28px/1.1 "Barlow Condensed",sans-serif}
.guncelleme .surum{color:var(--nane);font-weight:600;font-size:15px;margin-left:8px;font-style:normal;font-family:"Barlow",sans-serif}
.guncelleme ul{margin:0;padding-left:20px;color:var(--orta)}
.guncelleme li{margin:3px 0;max-width:70ch}
.bos{color:var(--soluk)}

.alt{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:36px var(--ekran) 48px;border-top:1px solid var(--cizgi);color:var(--soluk);font-size:14px}
.alt p{margin:0}

@media (max-width:720px){
  .ust-nav{display:none}
  #ust-discord{margin-left:auto}
  .ozellik + .ozellik{padding-left:0;border-left:0;border-top:2px dashed var(--cizgi)}
  .guncelleme{grid-template-columns:1fr;gap:6px}
  .hero{padding-bottom:96px}
  .dugme{width:100%}
  .hero-dugmeler{display:grid}
}