/* Abraxas - halka acik site
   Liquid glass: buzlu cam yuzeyler, arkada yavas akan renk bulutlari.

   Harici hicbir kaynak yuklenmiyor (font/script/CDN yok). Bu sayede
   Caddy tarafindaki siki CSP kurali calisiyor ve sayfa hizli aciliyor. */

:root {
  --arka:        #070a12;
  --arka-2:      #0a0f1a;
  --metin:       #eef3fa;
  --soluk:       #9aa8bd;
  --yesil:       #4ade80;
  --mavi:        #60a5fa;
  --mor:         #a78bfa;
  --camgobegi:   #22d3ee;
  --sari:        #fbbf24;
  --kirmizi:     #fb7185;
  --discord:     #5865f2;

  /* Cam yuzey degiskenleri - tek yerden ayarlanabilsin */
  --cam-dolgu:   linear-gradient(140deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  --cam-cizgi:   rgba(255,255,255,.12);
  --cam-bulanik: blur(22px) saturate(175%);
  --cam-golge:   0 10px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.15);
  --yuvarlak:    20px;
  --gecis:       .22s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 82px; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--arka);
  color: var(--metin);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- Arkada yavas akan renk bulutlari ---------------------------------- */
/* Camin "arkasinda bir sey var" hissini veren katman. Sabit duruyor,
   sayfa kaydirilinca cam yuzeyler uzerinden gecerken renk degisiyor. */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -2;
  background:
    radial-gradient(44% 48% at 16% 14%, rgba(74, 222, 128, .58), transparent 66%),
    radial-gradient(40% 52% at 84% 6%,  rgba(96, 165, 250, .58), transparent 66%),
    radial-gradient(50% 44% at 70% 72%, rgba(167, 139, 250, .52), transparent 66%),
    radial-gradient(38% 40% at 6% 68%,  rgba(34, 211, 238, .44), transparent 66%),
    radial-gradient(34% 36% at 46% 42%, rgba(236, 72, 153, .26), transparent 68%);
  filter: blur(58px) saturate(130%);
  animation: bulutlar 30s ease-in-out infinite alternate;
  will-change: transform;
}

/* Ince bir doku: duz gradyanin plastik gorunmesini engelliyor */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .5;
}

@keyframes bulutlar {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.07); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, body::before { transition: none !important; animation: none !important; }
}

a { color: var(--mavi); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.18; letter-spacing: -0.025em; margin: 0 0 12px; }
h2 { font-size: clamp(27px, 4.6vw, 38px); }
h3 { font-size: 18px; }
p { margin: 0 0 14px; }

code, kbd {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em;
}
code {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 7px;
  padding: 2px 7px;
  color: var(--yesil);
  overflow-wrap: anywhere;
}
kbd {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 7px;
  color: var(--metin);
}

.sinir { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.sinir.dar { max-width: 720px; }

.atla {
  position: absolute; left: -9999px;
  background: var(--yesil); color: #05220f;
  padding: 10px 16px; border-radius: 0 0 12px 0; font-weight: 600; z-index: 100;
}
.atla:focus { left: 0; top: 0; }

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

/* ===================== CAM YUZEY (ortak tanim) ======================== */
.cam {
  background: var(--cam-dolgu);
  backdrop-filter: var(--cam-bulanik);
  -webkit-backdrop-filter: var(--cam-bulanik);
  border: 1px solid var(--cam-cizgi);
  border-radius: var(--yuvarlak);
  box-shadow: var(--cam-golge);
}

/* backdrop-filter desteklemeyen tarayicilar icin: daha opak zemin,
   yoksa yazilar arka plandaki bulutlarin uzerinde okunmaz olur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cam { background: rgba(16, 22, 34, .92); }
}

/* ---------------- Ust menu ---------------- */
.ust {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 10, 18, .58);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ust-ic { display: flex; align-items: center; gap: 14px; height: 66px; }
.marka {
  font-size: 20px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--metin); text-decoration: none; flex-shrink: 0;
  background: linear-gradient(120deg, var(--yesil), var(--mavi) 60%, var(--mor));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marka:hover { text-decoration: none; opacity: .85; }

.menu { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a {
  color: var(--soluk); font-size: 14px; padding: 8px 12px; border-radius: 10px;
  white-space: nowrap; transition: var(--gecis);
}
.menu a:hover {
  color: var(--metin); text-decoration: none;
  background: rgba(255, 255, 255, .08);
}

@media (max-width: 860px) { .menu { display: none; } }
@media (max-width: 860px) { .ust-discord { margin-left: auto; } }

/* ---------------- Giris bolumu ---------------- */
.kahraman { padding: clamp(54px, 10vw, 104px) 0 clamp(44px, 7vw, 76px); text-align: center; }

.etiket {
  display: inline-block;
  font-size: 11.5px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--soluk);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 7px 16px; border-radius: 999px; margin: 0 0 22px;
}
.etiket.kucuk { margin-bottom: 12px; }

.kahraman h1 {
  font-size: clamp(54px, 14vw, 104px);
  margin: 0 0 16px;
  background: linear-gradient(120deg, #eafff3 0%, var(--yesil) 28%, var(--mavi) 62%, var(--mor) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 28px rgba(96, 165, 250, .22));
}
.slogan { max-width: 560px; margin: 0 auto 32px; color: var(--soluk); font-size: 17px; }

.adres-kutu {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  max-width: 470px; margin: 0 auto 18px;
  padding: 15px 17px; text-align: left;
}
.adres-sol { min-width: 0; }
.adres-baslik {
  display: block; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--soluk);
}
#sunucu-adres {
  background: none; border: 0; padding: 0;
  font-size: clamp(15px, 3.4vw, 19px); font-weight: 600; color: var(--yesil);
}
.kopyala-dugme {
  flex-shrink: 0; cursor: pointer;
  background: rgba(255, 255, 255, .09);
  color: var(--metin);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  padding: 10px 18px; font-size: 14px; font-weight: 600; font-family: inherit;
  transition: var(--gecis);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.kopyala-dugme:hover { background: rgba(255, 255, 255, .15); }
.kopyala-dugme.tamam {
  background: rgba(74, 222, 128, .2);
  border-color: rgba(74, 222, 128, .5);
  color: var(--yesil);
}

.durum-satir {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 13.5px; color: var(--soluk); margin-bottom: 30px; flex-wrap: wrap;
  padding: 8px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .1);
}
.ayirac { opacity: .4; }
.durum-nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--soluk); flex-shrink: 0; }
.durum-nokta.acik   { background: var(--yesil);   box-shadow: 0 0 0 4px rgba(74, 222, 128, .2); }
.durum-nokta.kapali { background: var(--kirmizi); box-shadow: 0 0 0 4px rgba(251, 113, 133, .2); }
.durum-nokta.bakim  { background: var(--sari);    box-shadow: 0 0 0 4px rgba(251, 191, 36, .2); }
.durum-nokta.bekliyor { background: var(--soluk); opacity: .55; }

.kahraman-dugmeler { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------------- Dugmeler ---------------- */
.dugme {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; cursor: pointer;
  padding: 14px 26px; border-radius: 14px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  text-decoration: none; border: 1px solid transparent;
  transition: var(--gecis); white-space: nowrap;
}
.dugme:hover { text-decoration: none; transform: translateY(-2px); }
.dugme:active { transform: translateY(0); }

.dugme.birincil {
  background: linear-gradient(135deg, #5ce68b, #22c55e);
  color: #04220e;
  box-shadow: 0 8px 26px rgba(34, 197, 94, .3), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.dugme.birincil:hover { box-shadow: 0 12px 34px rgba(34, 197, 94, .42), inset 0 1px 0 rgba(255, 255, 255, .35); }

.dugme.ikincil {
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: var(--metin);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.dugme.ikincil:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .22); }

/* Discord: marka rengiyle, her sayfada goz onunde */
.dugme.discord {
  background: linear-gradient(135deg, #6b77ff, var(--discord));
  color: #fff;
  box-shadow: 0 8px 26px rgba(88, 101, 242, .34), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.dugme.discord:hover { box-shadow: 0 12px 34px rgba(88, 101, 242, .46), inset 0 1px 0 rgba(255, 255, 255, .3); }
.discord-simge { width: 19px; height: 19px; flex-shrink: 0; fill: currentColor; }

.dugme.genis { width: 100%; }
.dugme.kucuk { padding: 10px 17px; font-size: 14px; border-radius: 12px; }
.dugme.kucuk .discord-simge { width: 17px; height: 17px; }
.dugme[disabled], .dugme.mesgul { opacity: .55; pointer-events: none; }

.dugme.iki-satir { flex-direction: column; gap: 2px; }
.dugme-alt { font-size: 11px; font-weight: 500; opacity: .8; letter-spacing: .02em; }

/* ---------------- Bolumler ---------------- */
.bolum { padding: clamp(54px, 8vw, 88px) 0; position: relative; }
.bolum.koyu::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(5, 8, 14, .5);
  border-block: 1px solid rgba(255, 255, 255, .06);
}
.bolum h2 { text-align: center; }
.bolum-alt { text-align: center; color: var(--soluk); max-width: 620px; margin: 0 auto 42px; }

/* ---------------- Adimlar ---------------- */
.adimlar {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(242px, 1fr));
}
.adim { padding: 26px 23px 22px; transition: var(--gecis); }
.adim:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .2);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.adim-no {
  width: 36px; height: 36px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--yesil), var(--mavi));
  color: #04220e; font-weight: 700; font-size: 16px; margin-bottom: 15px;
  box-shadow: 0 5px 16px rgba(74, 222, 128, .28), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.adim h3 { margin-bottom: 8px; }
.adim p { color: var(--soluk); font-size: 15px; margin-bottom: 10px; }
.adim-link { font-size: 14px; font-weight: 600; }

/* ---------------- Form ---------------- */
.form { padding: 28px; }
.alan { margin-bottom: 20px; }
.alan label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.istege-bagli { color: var(--soluk); font-weight: 400; }
.alan input, .alan textarea {
  width: 100%;
  background: rgba(0, 0, 0, .28);
  color: var(--metin);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px;
  padding: 13px 15px; font-size: 15px; font-family: inherit;
  transition: var(--gecis); resize: vertical;
}
.alan input::placeholder, .alan textarea::placeholder { color: rgba(154, 168, 189, .55); }
.alan input:focus, .alan textarea:focus {
  outline: none;
  border-color: rgba(74, 222, 128, .6);
  background: rgba(0, 0, 0, .38);
  box-shadow: 0 0 0 4px rgba(74, 222, 128, .14);
}
.alan input.hatali, .alan textarea.hatali { border-color: rgba(251, 113, 133, .7); }
.ipucu { display: block; margin-top: 7px; font-size: 12.5px; color: var(--soluk); }

/* Bal kupu: gozden gizli ama botlarin gorebilecegi alan.
   display:none KULLANMIYORUZ, bazi botlar onu atliyor. */
.bal-kupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.form-sonuc { margin: 16px 0 0; font-size: 14.5px; text-align: center; min-height: 22px; }
.form-sonuc.basarili { color: var(--yesil); }
.form-sonuc.hata { color: var(--kirmizi); }

/* ---------------- Indirme kutusu ---------------- */
.indirme-kutu {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 26px 28px; margin-bottom: 36px;
}
.indirme-bilgi { flex: 1 1 260px; }
.indirme-bilgi h3 { margin-bottom: 6px; }
.indirme-bilgi p { color: var(--soluk); font-size: 14.5px; margin: 0; }
.indirme-dugmeler { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------- Sekmeler ---------------- */
.sekme-basliklar {
  display: flex; gap: 6px; overflow-x: auto; padding: 6px;
  margin-bottom: 20px; scrollbar-width: none;
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
}
.sekme-basliklar::-webkit-scrollbar { display: none; }
.sekme-baslik {
  flex: 1 0 auto; cursor: pointer; font-family: inherit;
  background: transparent; color: var(--soluk);
  border: 1px solid transparent; border-radius: 11px;
  padding: 11px 17px; font-size: 14.5px; font-weight: 600;
  transition: var(--gecis); white-space: nowrap;
}
.sekme-baslik:hover { color: var(--metin); background: rgba(255, 255, 255, .07); }
.sekme-baslik.aktif {
  color: #04220e;
  background: linear-gradient(135deg, #5ce68b, #22c55e);
  box-shadow: 0 5px 18px rgba(34, 197, 94, .3), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.sekme-panel { padding: 28px; }
.sekme-panel[hidden] { display: none; }
.panel-ozet {
  font-size: 13.5px; color: var(--soluk);
  padding-bottom: 15px; margin-bottom: 19px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.panel-ozet strong { color: var(--yesil); }

.liste { margin: 0; padding-left: 22px; }
.liste li { margin-bottom: 11px; color: #d3dded; }
.liste li::marker { color: var(--yesil); font-weight: 700; }

.uyari, .bilgi {
  border-radius: 13px; padding: 14px 17px; font-size: 14px; margin: 19px 0 0;
  border: 1px solid;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.uyari { background: rgba(251, 191, 36, .1);  border-color: rgba(251, 191, 36, .3); color: #f7dfa0; }
.bilgi { background: rgba(96, 165, 250, .1); border-color: rgba(96, 165, 250, .3); color: #c2dbfc; }
.uyari code, .bilgi code { color: inherit; }

/* ---------------- Fresh Animations ---------------- */
.fresh-kart { padding: clamp(28px, 5vw, 42px); max-width: 780px; margin: 0 auto; }
.fresh-kart h2 { text-align: left; margin-bottom: 14px; }
.fresh-kart .fresh-metin > p { color: var(--soluk); }

/* ---------------- Kurallar ---------------- */
.kart-izgara { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.kart { padding: 24px; transition: var(--gecis); }
.kart:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .2);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.kart-simge { font-size: 27px; line-height: 1; margin-bottom: 13px; }
.kart h3 { font-size: 16.5px; margin-bottom: 6px; }
.kart p { color: var(--soluk); font-size: 14.5px; margin: 0; }

/* ---------------- SSS ---------------- */
.sss-oge { margin-bottom: 11px; overflow: hidden; }
.sss-oge summary {
  cursor: pointer; padding: 18px 21px;
  font-weight: 600; font-size: 15.5px; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  transition: var(--gecis);
}
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary::after {
  content: "+"; color: var(--yesil); font-size: 22px; font-weight: 300;
  flex-shrink: 0; transition: var(--gecis);
}
.sss-oge[open] summary::after { content: "\2212"; }
.sss-oge summary:hover { background: rgba(255, 255, 255, .05); }
.sss-oge > p, .sss-oge > .komut-kutu {
  padding: 0 21px; margin: 0 0 14px; color: var(--soluk); font-size: 15px;
}
.sss-oge > p:first-of-type { padding-top: 4px; }
.komut-kutu {
  background: rgba(0, 0, 0, .3);
  border-block: 1px solid rgba(255, 255, 255, .08);
  padding: 15px 21px !important; margin: 4px 0 14px !important; line-height: 2.1;
}

/* ---------------- Discord seridi ---------------- */
.discord-serit {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
  padding: clamp(26px, 5vw, 38px);
  max-width: 880px; margin: 0 auto;
  background: linear-gradient(140deg, rgba(88, 101, 242, .22), rgba(88, 101, 242, .07));
  border-color: rgba(88, 101, 242, .34);
}
.discord-serit h2 { text-align: left; margin-bottom: 8px; }
.discord-serit p { color: var(--soluk); margin: 0; font-size: 15px; }
.discord-serit-metin { flex: 1 1 300px; }

/* ---------------- Alt bolum ---------------- */
.alt {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding: 36px 0; background: rgba(5, 8, 14, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.alt-ic { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.alt-marka { font-size: 17px; font-weight: 700; margin: 0; }
.alt-kucuk { font-size: 13px; color: var(--soluk); margin: 2px 0 0; }
.alt-baglantilar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.alt-adres { font-size: 13px; }

@media (max-width: 560px) {
  .adres-kutu { flex-direction: column; align-items: stretch; text-align: center; }
  .kopyala-dugme { width: 100%; }
  .indirme-kutu { flex-direction: column; align-items: stretch; }
  .indirme-dugmeler { flex-direction: column; }
  .kahraman-dugmeler .dugme, .indirme-dugmeler .dugme { width: 100%; }
  .discord-serit { flex-direction: column; text-align: center; }
  .discord-serit h2 { text-align: center; }
  .discord-serit .dugme { width: 100%; }
  .alt-ic { flex-direction: column; text-align: center; }
  .form, .sekme-panel { padding: 21px; }
  /* Mobilde cok sayida bulanik yuzey pil ve akiciligi vuruyor;
     kart bulanikligini hafifletiyoruz. */
  .kart, .adim { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}