/* ─────────────────────────────────────────────────────────────────────────
   OxeS Network — modern clean rebuild (editorial)
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* — Color tokens (nötr gri ailesi — mavimsi koyu yok) — */
  --bg-deep:   #0a0a0a;
  --bg:        #141414;
  --bg-elev:   #1c1c1c;
  --bg-card:   #222222;
  --bg-hover:  #2a2a2a;

  --fg:        #f3ebda;
  --fg-prose:  #d0d3da;
  --fg-soft:   #b5b8c0;
  --fg-mute:   #9b9180;
  --fg-dim:    #7a7d85;
  --fg-sub:    #5b5346;
  --fg-faint:  #3a3527;

  --line:        #2e2e2e;
  --line-strong: #444444;

  --accent:      #2e9a8e;
  --accent-soft: #43b3a6;
  --accent-dim:  #1a615a;
  --accent-deep: #0c2e2b;

  /* Card solid bg — boards/wkstrip/modtab gibi tüm "kart" yüzeyleri */
  --card-green:        #143b2e;
  --card-green-hover:  #1a4f3d;

  --online:  #8fa867;
  --diamond: #5fa0a0;

  /* — Fonts — sitede sadece 2 font: Bungee (başlık/display) + Fredoka (geri kalan her şey) */
  --font-display: "Bungee", "Fredoka", system-ui, sans-serif;
  --font-body:    "Fredoka", system-ui, sans-serif;
  --font-serif:   "Fredoka", system-ui, sans-serif;
  --font-mono:    "Fredoka", system-ui, sans-serif;
  --font-pixel:   "Fredoka", system-ui, sans-serif;
  --font-soft:    "Fredoka", system-ui, sans-serif;

  /* — Layout — */
  --container:        1280px;
  --container-narrow: 960px;
  --pad:              clamp(20px, 4vw, 56px);
  --vine-w:           clamp(56px, 7vw, 110px);
  --navbar-h:         72px;

  /* — Motion — */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   150ms;
  --dur-base:   320ms;
  --dur-slow:   600ms;

  /* — Z — */
  --z-vine: 5;
  --z-content: 10;
  --z-nav: 40;
  --z-switch: 50;
  --z-toast: 80;
}

/* ───────── Reset ───────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; padding: 0; margin: 0; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
  /* Snap on html so the navbar (position: fixed) stays put. */
  scroll-snap-type: y mandatory;
}
/* When JS-driven smooth snap is active we disable CSS snap (the wheel handler
   tween's tail conflicts with mandatory snap re-correction). Native snap is
   kept as a fallback for keyboard scrollbar drag etc. */
html.js-snap { scroll-snap-type: none; scroll-behavior: auto; }
body {
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 0%,    rgba(46,154,142,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 50%,  rgba(95,160,160,0.04) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 0% 100%,   rgba(46,154,142,0.05) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 50%, var(--bg-deep) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────────────────────────────────────
   ANA SAYFA — tüm bölümlerin ortak arka planı (genel arkaplan.webp)
   Sabit (fixed) tek bir görsel: hero, topluluk, modlar, etkinlikler aynı
   backdrop'u paylaşır. Üstteki koyu degrade metin okunabilirliğini korur.
   ───────────────────────────────────────────────────────────────────────── */
/* bg'yi body'ye DEĞİL ::before'a veriyoruz; aksi halde body'nin opak rengi VE
   genel body kuralındaki gradient background-image'i negatif z-index'li bulanık
   katmanı örter (sadece düz koyu görünür). Bu yüzden hem color hem image sıfır. */
body.oxes-home {
  background-color: transparent;
  background-image: none;
}
/* Arka plandaki SABİT, BULANIK katman — tüm bölümlerin paylaştığı zemin.
   İçeriğin arkasında (z-index:-1) durur, bu yüzden metinler/kartlar net kalır.
   scale(1.08) blur'ın kenarlarda açtığı boşluğu kapatır. */
body.oxes-home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #0a0a0a;
  background-image:
    linear-gradient(180deg, rgba(8,8,10,0.78) 0%, rgba(8,8,10,0.62) 45%, rgba(8,8,10,0.82) 100%),
    url("../images/home-bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(16px);
  transform: scale(1.08);
  pointer-events: none;
}
/* Hero, aynı görselin NET halini gösterir: blurlu zemini bu kaplar.
   Aşağı kaydırınca hero biter, arkadaki bulanık katman ortaya çıkar. */
body.oxes-home .oxes-hero__photo {
  background-color: transparent;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.40) 70%, rgba(0,0,0,0.70) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.12) 40%, rgba(0,0,0,0.58) 100%),
    url("../images/home-bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* ─────────────────────────────────────────────────────────────────────────
   GLOBAL: never italicize headings / titles (Source Serif 4 upright everywhere)
   This overrides every editorial italic in the cascade below in one shot.
   ───────────────────────────────────────────────────────────────────────── */
.oxes-shead__title,
.oxes-shead__title em,
.oxes-foot__title,
.oxes-foot__title em,
.oxes-board__title,
.oxes-modfeat__slogan,
.oxes-evfeat__name,
.oxes-wkstrip__event-name { font-style: normal !important; }

/* Soft body copy — descriptive sub-text uses Fredoka */
.oxes-evfeat__dek,
.oxes-board__sub,
.oxes-foot__sub,
.oxes-modtab__slogan,
.oxes-shead__sub {
  font-family: var(--font-soft);
  font-weight: 600;
}

::selection { background: var(--accent); color: var(--bg-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.oxes-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ─────────────────────────────────────────────────────────────────────────
   NAVBAR — icon-only floating pill, top-left
   ───────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────
   AUTH PILL — top-right, mirrors navbar pill style
   ───────────────────────────────────────────────────────────────────────── */
.oxes-auth {
  position: fixed; top: 18px; right: 18px;
  z-index: var(--z-nav);
  display: inline-flex; align-items: center; gap: 8px;
}
.oxes-auth__btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px;
  padding: 0 22px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--plugin-btn-fg, #0c0f12);
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.oxes-auth__btn:hover {
  background: var(--accent-soft);
  color: var(--plugin-btn-fg, #0c0f12);
}
.oxes-auth__btn--primary {
  background: var(--accent);
  color: var(--plugin-btn-fg, #0c0f12);
}
.oxes-auth__btn--primary:hover {
  background: var(--accent-soft);
  color: var(--plugin-btn-fg, #0c0f12);
}

/* Auth dropdown menü (giriş sonrası) */
.oxes-auth-menu { position: relative; display: inline-flex; }
.oxes-auth-menu__trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 16px 0 6px;
}
.oxes-auth-menu__avatar {
  width: 28px; height: 28px;
  border-radius: 6px;
  image-rendering: pixelated;
  background: var(--bg-deep);
}
.oxes-auth-menu__chev {
  width: 14px; height: 14px;
  color: var(--plugin-btn-fg, #0c0f12);
  opacity: 0.7;
  transition: transform var(--dur-fast) var(--ease-out);
}
.oxes-auth-menu.is-open .oxes-auth-menu__chev { transform: rotate(180deg); }
.oxes-auth-menu__ticon { width: 18px; height: 18px; color: var(--plugin-btn-fg, #0c0f12); }

/* Misafir (giriş yapmamış) hesap kutusu — geniş ekranda düz butonlar,
   dar ekranda sağa açılan kutu. */
.oxes-auth__guest-inline { display: inline-flex; align-items: center; gap: 8px; }
.oxes-auth__guest-menu { display: none; }
@media (max-width: 600px) {
  .oxes-auth__guest-inline { display: none; }
  .oxes-auth__guest-menu { display: inline-flex; }
}

.oxes-credit {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  color: var(--accent-soft);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: color .15s;
}
a.oxes-credit:hover { color: var(--accent); }
.oxes-credit svg { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .oxes-auth-menu__name { display: none; }
  .oxes-credit { padding: 0 12px; }
}

.oxes-auth-menu__panel {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  min-width: 220px;
  background: var(--accent);
  border: 0;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6);
  display: none;
  z-index: var(--z-nav);
}
.oxes-auth-menu.is-open .oxes-auth-menu__panel { display: block; }

.oxes-auth-menu__item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--plugin-btn-fg, #0c0f12);
  font-family: var(--font-body);
  font-size: 16.9px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
  transition: background var(--dur-fast);
}
.oxes-auth-menu__item:hover { background: var(--accent-soft); }
.oxes-auth-menu__item svg { width: 16px; height: 16px; flex-shrink: 0; }
.oxes-auth-menu__item--danger { color: #5a1a13; }
.oxes-auth-menu__item--danger:hover { background: rgba(0,0,0,0.18); color: #2a0a07; }
.oxes-auth-menu__sep {
  height: 1px;
  background: rgba(0,0,0,0.18);
  margin: 4px 6px;
}


/* ─────────────────────────────────────────────────────────────────────────
   TOP BAR — flex container holding navbar, center status, auth buttons
   ───────────────────────────────────────────────────────────────────────── */
.oxes-topbar {
  position: fixed; top: 18px; left: 18px; right: 18px;
  z-index: var(--z-nav);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  pointer-events: none; /* let clicks pass between items */
}
.oxes-topbar > * { pointer-events: auto; }
.oxes-topbar > .oxes-topstatus { justify-self: center; }
.oxes-topbar > .oxes-auth { justify-self: end; }

/* Navbar lives inside the top-bar grid — static positioning. */
.oxes-navbar {
  position: static;
  z-index: var(--z-nav);
}
.oxes-navbar__inner {
  display: inline-flex; align-items: stretch; gap: 4px;
  position: relative;
}
.oxes-navbar__brand {
  display: inline-flex; align-items: center;
  padding: 4px 18px 4px 4px;
  margin-right: 6px;
}
.oxes-navbar__logo {
  width: 80px; height: 80px;
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.oxes-navbar__name { display: none; }
.oxes-navbar__nav { display: inline-flex; gap: 10px; }
.oxes-navbar__link {
  width: 70px;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 6px 12px;
  color: var(--fg-mute);
  background: transparent;
  border-bottom: 3px solid transparent;
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
  text-decoration: none;
}
.oxes-navbar__link:hover { color: var(--fg); }
.oxes-navbar__link--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.oxes-navbar__link svg {
  width: 24px; height: 24px;
  display: block;
}
.oxes-navbar__link-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

/* Mobile burger toggle (G1) — visible <600px */
.oxes-navbar__burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  color: var(--plugin-btn-fg, #0c0f12);
  cursor: pointer;
  margin-left: 6px;
  transition: background var(--dur-fast) var(--ease-out);
}
.oxes-navbar__burger:hover { background: var(--accent-soft); }
.oxes-navbar__burger svg { width: 20px; height: 20px; }

@media (max-width: 600px) {
  /* Mobil topbar: solda navbar, ortada IP+sürüm alt alta, sağda hesap kutusu.
     Hepsi logo hizasında dikey ortalı. */
  .oxes-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
  }
  .oxes-navbar__inner { align-items: center; }
  .oxes-topbar > .oxes-auth { align-items: flex-end; }
  .oxes-topbar > .oxes-topstatus {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    gap: 3px;
    padding: 0;
    min-width: 0;
    max-width: 100%;
    line-height: 1.1;
    text-transform: none;
  }
  .oxes-topstatus__sep { display: none !important; }
  .oxes-topstatus__field {
    padding: 0;
    max-width: 100%;
    border: 0;
    gap: 0;
  }
  .oxes-topstatus__value {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
  }
  .oxes-navbar__burger { display: inline-flex; }
  .oxes-navbar__nav {
    position: absolute;
    top: calc(100% + 8px); left: 0;
    background: var(--accent);
    border: 0;
    border-radius: 12px;
    padding: 6px;
    display: none !important;
    flex-direction: column;
    gap: 0;
    min-width: 220px;
    box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6);
    z-index: 60;
  }
  .oxes-navbar.is-open .oxes-navbar__nav { display: flex !important; }
  .oxes-navbar.is-open .oxes-navbar__burger { background: var(--accent-soft); }
  .oxes-navbar__link {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    border-bottom: 0;
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--plugin-btn-fg, #0c0f12);
  }
  .oxes-navbar__link:hover { background: var(--accent-soft); color: var(--plugin-btn-fg, #0c0f12); }
  .oxes-navbar__link-label { font-size: 15px; letter-spacing: 0.06em; }
  .oxes-navbar__brand { padding: 2px; margin-right: 0; }
  .oxes-navbar__logo { width: 44px; height: 44px; }
  .oxes-navbar__inner { gap: 2px; }
  /* Burger (sol) ve Hesap kutusu (sağ) aynı boyut — 40px kare */
  .oxes-navbar__burger { width: 40px; height: 40px; margin-left: 2px; }
  /* Sağdaki kutu da kare: sadece insan simgesi; ^ ok ve "Hesap" yazısı gizli */
  .oxes-auth__guest-menu .oxes-auth-menu__trigger {
    width: 40px; height: 40px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .oxes-auth__guest-menu .oxes-auth-menu__chev,
  .oxes-auth__guest-menu .oxes-auth-menu__name { display: none; }
  .oxes-auth__guest-menu .oxes-auth-menu__ticon { width: 20px; height: 20px; }

  /* Giriş yapınca: kredi + Hesabım yan yana sığmıyordu, navbar bozuluyordu.
     Telefonda dikey yap — buton üstte, kredi onun altında, sağa hizalı. */
  .oxes-auth {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .oxes-auth .oxes-auth-menu { order: 1; }
  .oxes-auth .oxes-credit {
    order: 2;
    height: auto;
    padding: 0 2px;
    font-size: 12px;
    gap: 4px;
    line-height: 1;
  }
  .oxes-auth .oxes-credit svg { width: 13px; height: 13px; }
}

/* Auth pill — sits in the top-bar grid (right) */
.oxes-auth {
  position: static;
  z-index: var(--z-nav);
}
.oxes-topstatus {
  position: static; transform: none;
}
.oxes-topstatus {
  display: inline-flex; align-items: center;
  height: 54px;
  padding: 0 4px;
  gap: 0;
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
  user-select: none;
}
.oxes-topstatus:hover { color: var(--accent-soft); }
.oxes-topstatus__field {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0 26px;
  height: 100%;
  white-space: nowrap;
}
.oxes-topstatus__label {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.oxes-topstatus__value { color: var(--accent); }
.oxes-topstatus__sep {
  width: auto; height: auto;
  background: transparent;
  color: var(--fg-sub);
  font-family: var(--font-display);
  font-size: 17px;
  display: inline-flex; align-items: center;
}

@media (max-width: 1440px) {
  .oxes-topbar { grid-template-columns: auto 1fr auto; }
  .oxes-topbar > .oxes-topstatus { justify-self: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   TOP STATUS — IP + version, sits in the middle of the top-bar
   ───────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────────────────── */
.oxes-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: inherit; font-weight: 600; font-size: 17.5px;
  letter-spacing: 0.01em;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  user-select: none;
  line-height: 1;
}
.oxes-btn:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--fg-sub);
  transform: translateY(-1px);
}
.oxes-btn:active { transform: translateY(0); }
.oxes-btn--primary {
  background: var(--accent);
  color: var(--bg-deep);
  border-color: var(--accent);
}
.oxes-btn--primary:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--bg-deep);
}
.oxes-btn--ghost {
  color: var(--fg-mute);
}
.oxes-btn--ghost:hover { color: var(--fg); }
.oxes-btn--sm { padding: 8px 14px; font-size: 16.2px; border-radius: 8px; }
.oxes-btn--lg { padding: 14px 26px; font-size: 18.8px; border-radius: 12px; }
.oxes-btn__icon { width: 16px; height: 16px; flex-shrink: 0; }
.oxes-btn__hint {
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid rgba(0,0,0,0.15);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.06em;
  opacity: 0.8;
}
.oxes-btn--ghost .oxes-btn__hint { border-left-color: var(--line); }


/* ─────────────────────────────────────────────────────────────────────────
   IP CHIP — small, repeated in a few places
   ───────────────────────────────────────────────────────────────────────── */
.oxes-ip {
  display: inline-flex; align-items: center;
  gap: 12px;
  padding: 9px 14px 9px 16px;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 16.2px;
  color: var(--plugin-btn-fg, #0c0f12);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
  user-select: none;
}
.oxes-ip:hover {
  background: var(--accent-soft);
}
.oxes-ip__label {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plugin-btn-fg, #0c0f12);
  opacity: 0.65;
  font-weight: 700;
}
.oxes-ip__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--online);
  display: inline-block;
  animation: oxes-pulse 2.2s ease-in-out infinite;
}
.oxes-ip__meta {
  font-size: 13.8px;
  color: var(--fg-mute);
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 6px;
}
.oxes-ip__sep {
  width: 1px; height: 14px; background: var(--line);
}
.oxes-ip__copy {
  width: 14px; height: 14px; color: var(--fg-sub);
  transition: color var(--dur-fast) var(--ease-out);
}
.oxes-ip:hover .oxes-ip__copy { color: var(--fg); }

@keyframes oxes-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}


/* ─────────────────────────────────────────────────────────────────────────
   VINE SLOTS — left + right fixed (user will swap in webp)
   Use --vine-image to set the asset. Mirrors on the right side.
   ───────────────────────────────────────────────────────────────────────── */
.oxes-vine {
  position: fixed; top: 0; bottom: 0;
  width: var(--vine-w);
  z-index: var(--z-vine);
  pointer-events: none;
  background-image: var(--vine-image, none);
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
  opacity: 0.9;
  /* Slight mask so it never lines up hard with screen edges */
  mask-image: linear-gradient(180deg, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.oxes-vine--left  { left: 0; }
.oxes-vine--right { right: 0; transform: scaleX(-1); }

/* Placeholder visual while no image set */
.oxes-vine::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 30% at 50% 20%,  rgba(46,154,142,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 50% 80%,  rgba(46,154,142,0.18) 0%, transparent 60%),
    repeating-linear-gradient(180deg,
      transparent 0, transparent 80px,
      rgba(46,154,142,0.10) 80px, rgba(46,154,142,0.10) 82px);
}
.oxes-vine[data-vine-set="true"]::before { display: none; }
.oxes-vine::after {
  content: "sculk slot";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-soft); opacity: 0.45;
  white-space: nowrap;
}
.oxes-vine[data-vine-set="true"]::after { display: none; }
.oxes-vine--right::after {
  /* Re-mirror text so it stays readable on the flipped element */
  transform: translate(-50%, -50%) rotate(-90deg) scaleX(-1);
}

@media (max-width: 720px) {
  .oxes-vine { display: none; }
}


/* ─────────────────────────────────────────────────────────────────────────
   SNAP STAGE — sections snap; each is at least 100vh
   ───────────────────────────────────────────────────────────────────────── */
.oxes-snap {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--navbar-h) + 24px) var(--pad) 24px;
}
.oxes-snap__inner {
  width: 100%; max-width: var(--container);
  margin: 0 auto;
}
.oxes-snap--narrow .oxes-snap__inner { max-width: var(--container-narrow); }

/* Mobil/dokunmatik: 100vh adres çubuğunun altını da sayıp bölümleri kırpıyordu —
   dvh ile görünür alana sabitle. Snap PC'deki gibi net "bir kaydırma = bir bölüm"
   hissi versin diye mandatory + scroll-snap-stop: always (base'den miras) korunur;
   dvh sayesinde toolbar değişiminde zıplama olmaz. */
@media (pointer: coarse) {
  html { scroll-snap-type: y mandatory; }
  .oxes-snap { min-height: 100dvh; scroll-snap-stop: always; }
}


/* ─────────────────────────────────────────────────────────────────────────
   HERO — preserved title image + small dense status row
   ───────────────────────────────────────────────────────────────────────── */
.oxes-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.oxes-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.oxes-hero__photo {
  position: absolute; inset: 0;
  background-color: #0a0a0a;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.75) 100%),
    url("../images/gallery-8.webp");
  background-size: cover, cover, cover;
  background-position: center;
  background-repeat: no-repeat;
}
.oxes-hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  text-align: center;
  /* Sit a bit above true center so the trio at the bottom feels balanced */
  transform: translateY(-7vh);
}
.oxes-hero__title-image {
  width: 100%; max-width: 720px; height: auto;
  will-change: transform;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Rotating mode word (image-based) ─── */
.oxes-hero__rotator {
  --rot-h: clamp(48px, 6vw, 84px);
  display: inline-flex; align-items: center; justify-content: center;
  user-select: none;
  /* Title görseli optik olarak hafif sağda; rotator + CTA'yı ona doğru çok az kaydır */
  transform: translateX(12px);
}
.oxes-hero__rotator-window {
  position: relative;
  height: var(--rot-h);
  overflow: hidden;
  display: inline-block;
}
.oxes-hero__rotator-list {
  display: flex; flex-direction: column;
  animation: oxes-rotate 9s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.oxes-hero__rotator-item {
  height: var(--rot-h);
  display: flex; align-items: center; justify-content: center;
}
.oxes-hero__rotator-item img {
  height: 100%;
  width: auto;
  display: block;
}
@keyframes oxes-rotate {
  /* 4 modes, each visible ~80% of its slot, ~20% transition */
   0%,  20% { transform: translateY(0); }
  25%,  45% { transform: translateY(calc(var(--rot-h) * -1)); }
  50%,  70% { transform: translateY(calc(var(--rot-h) * -2)); }
  75%,  95% { transform: translateY(calc(var(--rot-h) * -3)); }
  100%      { transform: translateY(calc(var(--rot-h) * -4)); }
}
@media (prefers-reduced-motion: reduce) {
  .oxes-hero__rotator-list { animation: none; }
}
.oxes-hero__tagline {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 13.8px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
}
.oxes-hero__tagline-sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--fg-sub); display: inline-block;
}
.oxes-hero__ctas {
  display: inline-flex; align-items: center; gap: 12px;
  flex-wrap: wrap; justify-content: center;
  margin-top: 8px;
  /* rotator ile aynı hafif sağa kayma */
  transform: translateX(12px);
}
.oxes-hero__scroll-hint {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-sub);
  z-index: 3;
  animation: oxes-bob 2.5s ease-in-out infinite;
}
@keyframes oxes-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50%      { transform: translateX(-50%) translateY(4px); opacity: 1; }
}


/* — Trio (Müslüm / Barış / Cem) — equal visual height, anchored bottom — */
.oxes-hero__trio {
  position: absolute;
  inset: auto 0 0 0;
  height: 0;
  pointer-events: none;
  z-index: 1;
}
/* Position the slot, then parallax the inner <img>. This keeps centering
   (translateX(-50%)) separate from the JS-driven parallax transform. */
.oxes-hero__trio-slot {
  position: absolute;
  bottom: 0;
}
.oxes-hero__trio-slot--c { left: 50%; transform: translateX(calc(-50% + 10px)); }
.oxes-hero__trio-img {
  display: block;
  height: clamp(200px, 28vh, 340px);
  width: auto;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,0.5));
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 900px) {
  .oxes-hero__trio-img { height: 22vh; }
}


/* ─────────────────────────────────────────────────────────────────────────
   SHARED SECTION HEAD
   ───────────────────────────────────────────────────────────────────────── */
.oxes-shead { display: flex; flex-direction: column; gap: 14px; margin-bottom: 56px; }
.oxes-shead--row {
  flex-direction: row; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
/* "quiet" head — used when the kicker/title/sub are stripped and only the
   right-side action remains. Pulls the lone action to the right and tightens
   the section's top spacing. */
.oxes-shead--quiet {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
  justify-content: flex-end;
}
.oxes-shead__kicker {
  font-family: var(--font-mono); font-size: 13.8px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 10px;
}
.oxes-shead__kicker::before {
  content: ""; width: 24px; height: 1px; background: var(--accent);
}
.oxes-shead__title {
  font-family: var(--font-display);
  font-weight: 700; font-size: clamp(32px, 4.5vw, 56px);
  letter-spacing: -0.025em; line-height: 1.05;
  margin: 0; color: var(--fg);
  max-width: 16ch;
  text-wrap: balance;
}
.oxes-shead__sub {
  color: var(--fg-mute);
  font-size: 20.6px; line-height: 1.6;
  max-width: 56ch;
  margin: 4px 0 0;
  text-wrap: pretty;
}


/* ─────────────────────────────────────────────────────────────────────────
   SECTION ENTER/EXIT — content animates in when its section is active
   Hero is exempt (it's visible on load).
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .oxes-snap:not(.oxes-hero) > .oxes-snap__inner {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 700ms var(--ease-out),
      transform 700ms var(--ease-out);
  }
  .oxes-snap:not(.oxes-hero).is-active > .oxes-snap__inner {
    opacity: 1;
    transform: translateY(0);
  }
}




/* ─────────────────────────────────────────────────────────────────────────
   SECTION 02 — TOPLULUK / BOARDS
   3-column leaderboards (en çok kredi / son kredi / son mağaza)
   ───────────────────────────────────────────────────────────────────────── */
.oxes-boards { width: 100%; display: flex; flex-direction: column; gap: clamp(28px, 4vh, 44px); }
.oxes-boards > .oxes-shead { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.oxes-boards__foot {
  display: flex; justify-content: flex-end;
}

.oxes-boards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 22px);
}
@media (max-width: 980px) {
  .oxes-boards__grid { grid-template-columns: 1fr; }
}

/* ── single board card ── */
.oxes-board {
  display: flex; flex-direction: column;
  gap: 18px;
  padding: clamp(18px, 2vw, 24px);
  background: var(--card-green);
  border: 1px solid var(--accent-dim);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.oxes-board:hover { border-color: var(--accent-soft); background: var(--card-green-hover); }

/* subtle top-corner glow */
.oxes-board::before {
  content: "";
  position: absolute; top: -40%; left: -10%; right: -10%;
  height: 60%;
  background: radial-gradient(ellipse 50% 100% at 20% 100%, rgba(46,154,142,0.10), transparent 70%);
  pointer-events: none;
}

.oxes-board__head {
  display: flex; align-items: flex-start;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  position: relative;
  min-width: 0;
}
.oxes-board__head > div { min-width: 0; }
.oxes-board__head::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 36px; height: 1px;
  background: var(--accent);
}
.oxes-board__icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(46,154,142,0.18), rgba(46,154,142,0.06));
  color: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
}
.oxes-board__icon svg { width: 18px; height: 18px; display: block; }
.oxes-board__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.oxes-board__title em {
  font-style: normal;
  color: var(--accent-soft);
}
.oxes-board__sub {
  margin: 0;
  font-size: 15.6px;
  color: var(--fg-mute);
  line-height: 1.4;
}

.oxes-board__list {
  display: flex; flex-direction: column;
  gap: 4px;
}

/* ── empty / CTA state (hiç işlem yokken harcamaya yönlendirir) ── */
.oxes-board__cta {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 28px 14px;
  min-height: 220px;
}
.oxes-board__cta-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: var(--card-green-hover);
  border: 1px solid var(--line);
}
.oxes-board__cta-icon svg { width: 22px; height: 22px; }
.oxes-board__cta-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--fg);
  margin: 0;
}
.oxes-board__cta-text {
  font-size: 15.6px;
  line-height: 1.55;
  color: var(--fg-sub);
  margin: 0;
  max-width: 30ch;
}
.oxes-board__cta .oxes-btn { margin-top: 4px; }

/* ── ranked entry (board 1) ── */
.oxes-rank {
  display: grid;
  grid-template-columns: 24px 36px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.oxes-rank:last-child { border-bottom: 0; }
.oxes-rank__pos {
  grid-row: 1 / 3;
  grid-column: 1;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18.8px;
  color: var(--fg-sub);
  text-align: center;
  letter-spacing: 0.04em;
}
.oxes-rank--gold .oxes-rank__pos { color: var(--accent); }
.oxes-rank__head {
  grid-row: 1 / 3;
  grid-column: 2;
  width: 36px; height: 36px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
.oxes-rank__body {
  grid-row: 1;
  grid-column: 3;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.oxes-rank__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--fg);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oxes-rank__amount {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent);
  white-space: nowrap;
}
.oxes-rank__unit { color: var(--fg-sub); }
.oxes-rank__bar {
  grid-row: 2;
  grid-column: 3;
  height: 3px;
  background: var(--line);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.oxes-rank__bar::after {
  content: "";
  position: absolute; inset: 0;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  border-radius: 999px;
  transition: width 600ms var(--ease-out);
}

/* ── feed entry (board 2 & 3) ── */
.oxes-feed {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.oxes-feed:last-child { border-bottom: 0; }
.oxes-feed__head {
  width: 36px; height: 36px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
.oxes-feed__body {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.oxes-feed__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--fg);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oxes-feed__meta {
  font-size: 15.6px;
  color: var(--fg-mute);
  line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oxes-feed__amt {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 15px;
}
.oxes-feed__item {
  color: var(--fg);
  font-weight: 500;
}
.oxes-feed__sep { color: var(--fg-faint); margin: 0 2px; }

/* — Editorial variant — board titles get the serif italic flavor — */
body.v-editorial .oxes-board__title em { font-style: normal; }
body.v-editorial .oxes-rank__name,
body.v-editorial .oxes-feed__name {
  font-weight: 700;
  font-size: 19.4px;
}



/* ─────────────────────────────────────────────────────────────────────────
   SECTION 03 — MODLAR
   Featured stage + 4 side tabs. Click a tab to swap the feature.
   ───────────────────────────────────────────────────────────────────────── */
.oxes-modlar { display: flex; flex-direction: column; gap: clamp(28px, 4vh, 44px); width: 100%; }
.oxes-modlar > .oxes-shead { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.oxes-modlar__stage {
  display: grid;
  grid-template-columns: 2.5fr 0.8fr;
  gap: clamp(14px, 1.4vw, 20px);
  min-height: 0;
  /* yükseklik foto en-boy oranından gelsin; sağ sütun (kartlar) buna göre uzar */
  align-items: stretch;
}
@media (max-width: 900px) {
  .oxes-modlar__stage { grid-template-columns: 1fr; height: auto; }
}

/* ── Feature panel (left) ── */
.oxes-modfeat {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  isolation: isolate;
  aspect-ratio: 16 / 10;   /* kare değil, yatay ama dolgun */
}
.oxes-modfeat__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  animation: oxes-modfeat-in 700ms var(--ease-out);
}
@keyframes oxes-modfeat-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
.oxes-modfeat__wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.88) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 60%);
}
.oxes-modfeat__body {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(20px, 2.4vw, 32px);
}
.oxes-modfeat__bottom { display: flex; flex-direction: column; gap: clamp(12px, 1.4vh, 18px); }
.oxes-modfeat__name { height: clamp(56px, 7vw, 88px); }
.oxes-modfeat__name img { height: 100%; width: auto; display: block; }
.oxes-modfeat__slogan {
  font-family: var(--font-soft); font-weight: 700;
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.35;
  color: var(--fg); margin: 0;
  max-width: 32ch;
  text-wrap: pretty;
}
.oxes-modfeat__meta {
  display: flex; gap: 14px; align-items: center;
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: 0.01em; color: var(--fg-mute);
}
.oxes-modfeat__meta strong { color: var(--fg); font-weight: 500; }
.oxes-modfeat__chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.oxes-modfeat__chip {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.01em;
  color: var(--fg);
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.4);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ── Tabs (right) ── */
.oxes-modtabs {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 0;
  overflow-y: auto;
}
.oxes-modtab {
  flex: 1 1 auto;
  min-height: 64px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 16px;
  padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1.4vw, 20px);
  background: var(--card-green);
  border: 1px solid var(--accent-dim);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font: inherit; color: inherit;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  min-height: 0;
}
.oxes-modtab:hover { background: var(--card-green-hover); border-color: var(--accent-soft); }
.oxes-modtab--on {
  background: var(--card-green-hover);
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.oxes-modtab__num {
  font-family: var(--font-mono); font-size: 13.8px;
  letter-spacing: 0.01em; color: var(--fg-sub);
}
.oxes-modtab--on .oxes-modtab__num { color: var(--accent); }
.oxes-modtab__mid {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.oxes-modtab__name { height: 22px; }
.oxes-modtab__name img { height: 100%; width: auto; display: block; }
.oxes-modtab__slogan {
  font-size: 15.6px; color: var(--fg-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oxes-modtab__arrow {
  width: 22px; height: 22px;
  color: var(--fg-sub);
  transition: color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.oxes-modtab--on .oxes-modtab__arrow { color: var(--accent); transform: translateX(2px); }

/* Editorial variant: keep but tone consistent (serif slogan inside feature) */
body.v-editorial .oxes-modfeat__slogan { font-style: normal; }

/* Mobil: foto kartı daha dolgun otursun, üstteki yazılar boğmasın */
@media (max-width: 600px) {
  .oxes-modfeat { aspect-ratio: 4 / 3; }
  .oxes-modfeat__body { padding: 16px; }
  .oxes-modfeat__bottom { gap: 8px; }
  .oxes-modfeat__name { height: 40px; }
  .oxes-modfeat__slogan { font-size: 15px; max-width: none; }
  .oxes-modfeat__meta { font-size: 13px; gap: 10px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   SECTION 04 — ETKİNLİKLER & DUYURULAR
   Üstte tek büyük duyuru (full-bleed bg), altta haftalık 7-gün
   hairline-grid (sade kolonlar). Tüm hafta tek bakışta.
   ───────────────────────────────────────────────────────────────────────── */
.oxes-events { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 36px); width: 100%; }
.oxes-events > .oxes-shead { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.oxes-events__stack {
  display: flex; flex-direction: column;
  gap: clamp(16px, 2.2vh, 28px);
  width: 100%;
}

/* ── Featured announcement (top) ────────────────────────────────── */
.oxes-evfeat {
  position: relative;
  aspect-ratio: 16 / 6.5;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  isolation: isolate;
}
.oxes-evfeat__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.55;
}
.oxes-evfeat__wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.92) 88%);
}
.oxes-evfeat__body {
  position: absolute; inset: 0; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: clamp(22px, 2.4vw, 36px);
  gap: clamp(20px, 2.4vw, 32px);
}
.oxes-evfeat__l { display: flex; flex-direction: column; gap: 14px; max-width: 56ch; }
.oxes-evfeat__tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 600; font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--accent);
  align-self: flex-start;
}
.oxes-evfeat__mode-img {
  height: 34px; width: auto; display: block;
  border-radius: 6px;
}
.oxes-evfeat__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.025em; line-height: 1.05;
  color: var(--fg); margin: 0;
  text-wrap: balance;
}
.oxes-evfeat__dek {
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--fg-mute);
  margin: 0; line-height: 1.55;
}
.oxes-evfeat__actions { display: inline-flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.oxes-evfeat__r {
  text-align: right;
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono);
  color: var(--fg-mute);
}
.oxes-evfeat__r-time { font-weight: 600;
  font-size: 15px; letter-spacing: 0.01em;
}
.oxes-evfeat__r-date {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4vw, 52px); line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.oxes-evfeat__r-month { font-weight: 600;
  font-size: 13px; letter-spacing: 0.01em;
 color: var(--fg-sub);
}

/* Editorial variant: keep base font (Bungee) — strip italic */
body.v-editorial .oxes-evfeat__name {
  font-style: normal;
  font-weight: 700;
}

/* ── Week navigation bar (above the 7-col strip) ── */
.oxes-wknav {
  display: inline-flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--fg-mute);
  letter-spacing: 0.04em;
}
.oxes-wknav__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg-mute);
  background: var(--bg-elev);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.oxes-wknav__btn:hover { color: var(--accent); border-color: var(--accent); }
.oxes-wknav__btn.is-disabled { opacity: 0.35; cursor: not-allowed; }
.oxes-wknav__label {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 8px;
}
.oxes-wknav__week {
  color: var(--fg);
  font-weight: 600;
  letter-spacing: 0.01em;

}
.oxes-wknav__tag {
  font-size: 21px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.oxes-wknav__today {
  font-size: 13.8px;
  color: var(--fg-mute);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  text-decoration: none;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.oxes-wknav__today:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Week strip (bottom): hairline 7-col grid, inline word-image mode ── */
.oxes-wkstrip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
  min-height: 0;
  border: 1px solid var(--accent-dim);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-green);
}
.oxes-wkstrip__col {
  display: flex; flex-direction: column;
  gap: 14px;
  padding: clamp(14px, 1.6vh, 20px) clamp(10px, 1vw, 16px);
  border-right: 1px solid var(--accent-dim);
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
  min-width: 0;
  background: var(--card-green);
}
.oxes-wkstrip__col:last-child { border-right: 0; }
.oxes-wkstrip__col:hover { background: var(--card-green-hover); }
.oxes-wkstrip__col--today::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
}
.oxes-wkstrip__head { display: flex; flex-direction: column; gap: 4px; }
.oxes-wkstrip__day {
  font-family: var(--font-mono); font-weight: 600; font-size: 25px;
  letter-spacing: 0.01em;
  color: var(--fg-mute);
}
.oxes-wkstrip__col--today .oxes-wkstrip__day { font-weight: 600; color: var(--accent); }
.oxes-wkstrip__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 2.6vw, 38px);
  letter-spacing: -0.03em; line-height: 0.95;
  color: var(--fg);
}
.oxes-wkstrip__events { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.oxes-wkstrip__event {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: inherit;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
a.oxes-wkstrip__event:hover {
  opacity: 0.85;
  transform: translateX(2px);
}
.oxes-wkstrip__empty {
  font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--fg-mute);
  opacity: 0.5;
}
.oxes-wkstrip__time-row {
  display: inline-flex; align-items: center;
  gap: 8px;
  font-family: var(--font-mono); font-size: 25px;
  letter-spacing: 0.01em;
}
.oxes-wkstrip__time { color: var(--fg-mute); }
.oxes-wkstrip__mode-img {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--evt-color, var(--accent));
  min-width: 0;
}
.oxes-wkstrip__mode-img::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.oxes-wkstrip__mode-img img {
  height: 11px; width: auto; display: block;
  opacity: 0.95;
}
.oxes-wkstrip__event-name {
  font-family: var(--font-body); font-weight: 700;
  font-size: 15px;
  color: var(--fg); line-height: 1.25;
  letter-spacing: -0.005em;
}

/* Editorial variant: keep base font on event names */
body.v-editorial .oxes-wkstrip__event-name {
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
}

/* ── Yaklaşan etkinlikler — yatay kart kaydırıcı ───────────────────────── */
.oxes-evscroll { display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; }
.oxes-evscroll__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oxes-evscroll__title {
  font-family: var(--font-display);
  font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg);
}
.oxes-evscroll__nav { display: inline-flex; gap: 8px; }
.oxes-evscroll__btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-elev); color: var(--fg-mute);
  font-family: var(--font-display); font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.oxes-evscroll__btn:hover { color: var(--accent); border-color: var(--accent); }
.oxes-evscroll__btn:disabled { opacity: 0.3; cursor: default; }

.oxes-evscroll__track {
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.oxes-evscroll__track::-webkit-scrollbar { height: 6px; }
.oxes-evscroll__track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.oxes-evcard {
  flex: 0 0 auto;
  width: 230px;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden;
  background: var(--card-green);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.oxes-evcard:hover { border-color: var(--evt-color, var(--accent)); transform: translateY(-3px); }
.oxes-evcard__img {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  background-size: cover; background-position: center;
  background-color: var(--bg-deep);
}
.oxes-evcard--past .oxes-evcard__img { filter: grayscale(0.45) brightness(0.72); }
.oxes-evcard__mode {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; padding: 3px 6px;
  background: rgba(0,0,0,0.55); border-radius: 6px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.oxes-evcard__mode img { height: 14px; width: auto; display: block; }
.oxes-evcard__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.oxes-evcard__date {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em;
  color: var(--evt-color, var(--accent-soft));
}
.oxes-evcard__date strong {
  font-family: var(--font-display); font-size: 17px; color: var(--fg); margin-right: 3px;
}
.oxes-evcard__name {
  font-family: var(--font-body); font-weight: 700; font-size: 15.5px;
  color: var(--fg); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.oxes-evcard__meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-mute); }
.oxes-evscroll__empty {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-mute); font-family: var(--font-mono); font-size: 14px;
  border: 1px dashed var(--line); border-radius: 12px; padding: 34px;
}
@media (max-width: 720px) {
  .oxes-evscroll__track { scroll-snap-type: x mandatory; }
  .oxes-evcard { width: 78vw; max-width: 280px; }
}

@media (max-width: 980px) {
  /* Collapse to 2 rows × 4 cols (last cell empty) for tablet */
  .oxes-wkstrip { grid-template-columns: repeat(4, 1fr); }
  .oxes-wkstrip__col { border-bottom: 1px solid var(--accent-dim); }
  .oxes-wkstrip__col:nth-child(4) { border-right: 0; }
  .oxes-wkstrip__col:nth-child(n+5) { border-bottom: 0; }
  .oxes-wkstrip__col:last-child { border-right: 0; }
}
@media (max-width: 720px) {
  .oxes-events__stack { height: auto; }
  .oxes-wkstrip { grid-template-columns: repeat(2, 1fr); }
  .oxes-wkstrip__col { border-bottom: 1px solid var(--accent-dim); }
  .oxes-wkstrip__col:nth-child(2n) { border-right: 0; }
  .oxes-wkstrip__col:nth-last-child(-n+2) { border-bottom: 0; }
  /* İçerik absolute olduğu için kart mobilde 0px yükseklikte kalıp kayboluyordu.
     flex grow yerine sabit en-boy oranı ver (resim kartı), body absolute kalsın
     ve içerik kartın ALTINA yaslansın (masaüstüyle aynı overlay görünüm). */
  .oxes-evfeat { flex: none; aspect-ratio: 3 / 4; min-height: 380px; }
  .oxes-evfeat__body {
    grid-template-columns: 1fr;
    align-content: end;
    align-items: end;
    gap: 14px;
  }
  .oxes-evfeat__r { text-align: left; flex-direction: row; align-items: baseline; gap: 10px; }
  .oxes-evfeat__r-date { font-size: 34px; }
}



/* ─────────────────────────────────────────────────────────────────────────
   FOOTER section — F02 Centered Minimal
   ───────────────────────────────────────────────────────────────────────── */
/* Tighten the snap padding for the footer — content is dense, not a 1-screen
   hero. Keep min-height: 100vh so it still snaps cleanly. */
.oxes-snap.oxes-footer {
  padding-top: calc(var(--navbar-h) + 60px);
  padding-bottom: 40px;
  align-items: center;
}
.oxes-footer .oxes-snap__inner {
  display: flex; flex-direction: column;
  justify-content: center;
}

.oxes-foot__center {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(20px, 3vh, 32px);
  width: 100%;
  text-align: center;
}
.oxes-foot__logo {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none;
}
.oxes-foot__logo img {
  height: 52px; width: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.oxes-foot__logo-name {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg);
}
.oxes-foot__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: -0.02em; line-height: 1;
  margin: 0; color: var(--fg);
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 22ch;
}
.oxes-foot__title em {
  font-style: normal;
  color: var(--accent-soft);
}
.oxes-foot__sub {
  color: var(--fg-mute); font-size: 21.2px;
  max-width: 52ch; text-wrap: pretty;
  margin: 0;
  line-height: 1.5;
}
.oxes-foot__ctas {
  display: inline-flex; gap: 12px;
  flex-wrap: wrap; justify-content: center;
  margin-top: 4px;
}

/* ── Inline link rows (two rows: primary + muted) ── */
.oxes-foot__links {
  display: inline-flex; gap: 28px;
  flex-wrap: wrap; justify-content: center;
  font-size: 18.1px;
}
.oxes-foot__links a {
  color: var(--fg-mute);
  transition: color var(--dur-fast) var(--ease-out);
}
.oxes-foot__links a:hover { color: var(--fg); }
.oxes-foot__links--muted a {
  color: var(--fg-sub);
  font-size: 16.9px;
}
.oxes-foot__links--muted a:hover { color: var(--fg-mute); }

/* ── Socials — small icon row, centered ── */
.oxes-foot__socials {
  display: inline-flex; gap: 8px;
}
.oxes-foot__social {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-mute);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: all var(--dur-fast) var(--ease-out);
}
.oxes-foot__social:hover {
  color: var(--fg);
  border-color: var(--fg-sub);
  background: rgba(255,255,255,0.04);
}
.oxes-foot__social svg { width: 16px; height: 16px; display: block; }

/* ── Bottom legal strip ── */
.oxes-foot__btm {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  padding-top: 24px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 13.8px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-sub);
}
.oxes-foot__btm a { color: var(--fg-mute); transition: color var(--dur-fast) var(--ease-out); }
.oxes-foot__btm a:hover { color: var(--fg); }
.oxes-foot__legal { display: inline-flex; gap: 18px; }

@media (max-width: 720px) {
  .oxes-foot__btm { justify-content: center; }
}


/* ─────────────────────────────────────────────────────────────────────────
   TOAST
   ───────────────────────────────────────────────────────────────────────── */
.oxes-toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 20px;
  background: var(--accent);
  color: var(--bg-deep);
  border-radius: 999px;
  font-family: var(--font-mono); font-weight: 600;
  font-size: 13.8px;
  letter-spacing: 0.14em; text-transform: uppercase;
  z-index: var(--z-toast);
  opacity: 0;
  transition: all var(--dur-base) var(--ease-out);
  pointer-events: none;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5);
}
.oxes-toast.is-visible {
  opacity: 1; transform: translateX(-50%) translateY(0);
}




/* ─────────────────────────────────────────────────────────────────────────
   REVEAL
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .oxes-reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  }
  .oxes-reveal.is-in { opacity: 1; transform: translateY(0); }
}


/* =========================================================================
   VARIANT A — EDITORIAL (default)
   Quiet, typographic, hairline-led. Serif accents on big titles.
   ========================================================================= */
/* body.v-editorial bg yok — texture body üzerinde yaşıyor */

body.v-editorial .oxes-shead__title {
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
}
body.v-editorial .oxes-shead__title em {
  font-style: normal;
  color: var(--accent-soft);
}
body.v-editorial .oxes-shead__sub {
  font-size: 22.5px;
  color: var(--fg-mute);
}
body.v-editorial .oxes-shead {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 56px;
}

body.v-editorial .oxes-foot__title {
  font-style: normal;
  font-weight: 700;
}




/* ─────────────────────────────────────────────────────────────────────────
   AUTH PAGE — full-viewport minimal login/register
   ───────────────────────────────────────────────────────────────────────── */
body.oxes-auth-page {
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    position: relative;
    overflow-x: hidden;
}
/* Faint editorial wash — same noise vibe as the rest of the site */
body.oxes-auth-page::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 10%, rgba(46,154,142,0.04), transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(255,255,255,0.02), transparent 50%);
    pointer-events: none;
}

.oxes-auth-page__home {
    position: absolute; top: 24px; left: 24px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    color: var(--fg-soft);
    font-family: var(--font-body);
    font-size: 16.2px; font-weight: 600;
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    z-index: 2;
}
.oxes-auth-page__home:hover {
    color: var(--fg);
    border-color: var(--accent);
    background: rgba(46,154,142,0.04);
}
.oxes-auth-page__home svg { width: 14px; height: 14px; }

.oxes-auth-page__main {
    width: 100%;
    max-width: 380px;
    display: flex; flex-direction: column; align-items: stretch; gap: 28px;
    position: relative; z-index: 1;
}

.oxes-auth-page__logo {
    display: inline-flex; align-items: center; gap: 12px;
    align-self: flex-start;
    color: var(--fg);
}
.oxes-auth-page__logo img {
    width: 48px; height: 48px;
    image-rendering: pixelated;
}
.oxes-auth-page__logo span {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.oxes-auth-page__form {
    display: flex; flex-direction: column; gap: 18px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 28px;
}

.oxes-auth-page__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.oxes-auth-page__title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--fg);
}
.oxes-auth-page__sub {
    font-family: var(--font-soft, var(--font-body));
    font-size: 17.5px;
    color: var(--fg-soft);
    margin: 0;
}

.oxes-auth-page__field { display: flex; flex-direction: column; gap: 6px; }
.oxes-auth-page__label {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--fg-soft);
    text-transform: lowercase;
    letter-spacing: 0.01em;
}
.oxes-auth-page__hint {
    font-size: 13.8px;
    color: var(--fg-dim);
    margin-left: 4px;
}
.oxes-auth-page__input {
    width: 100%;
    padding: 11px 13px;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 18.1px;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
}
.oxes-auth-page__input::placeholder { color: var(--fg-dim); }
.oxes-auth-page__input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-hover);
}

/* Şifreyi göster/gizle toggle (JS auth layout'ta enjekte eder) — PC + mobil tutarlı */
.oxes-auth-page__pw { position: relative; display: block; }
.oxes-auth-page__pw .oxes-auth-page__input { padding-right: 46px; }
.oxes-auth-page__eye {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    width: 34px; height: 34px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 6px;
    color: var(--fg-dim); cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.oxes-auth-page__eye:hover { color: var(--fg); background: var(--bg-hover); }
.oxes-auth-page__eye svg { width: 20px; height: 20px; }
/* Tarayıcının yerleşik reveal'ını gizle (Edge ::-ms-reveal) — çift göz olmasın */
.oxes-auth-page__input::-ms-reveal,
.oxes-auth-page__input::-ms-clear { display: none; }

.oxes-auth-page__row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-family: var(--font-body);
    font-size: 16.2px;
}
.oxes-auth-page__check {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--fg-soft);
    cursor: pointer;
}
.oxes-auth-page__check input {
    accent-color: var(--accent);
    width: 14px; height: 14px;
}
.oxes-auth-page__link {
    color: var(--fg-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.oxes-auth-page__link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.oxes-auth-page__submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 18px;
    background: var(--fg);
    color: #1f1f1f;
    border: 0;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
}
.oxes-auth-page__submit:hover { background: #d6d8dd; }
.oxes-auth-page__submit:active { transform: translateY(1px); }
.oxes-auth-page__submit svg { width: 16px; height: 16px; }

.oxes-auth-page__divider {
    display: flex; align-items: center; gap: 12px;
    color: var(--fg-sub);
    font-family: var(--font-body); font-size: 15px;
    letter-spacing: 0.3px; text-transform: uppercase;
    margin: 4px 0;
}
.oxes-auth-page__divider::before,
.oxes-auth-page__divider::after {
    content: '';
    flex: 1; height: 1px; background: var(--line);
}

.oxes-auth-page__discord {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 18px;
    background: #5865F2;
    color: #fff !important;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 17.5px;
    border-radius: 8px;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: background 0.15s, transform 0.05s;
}
.oxes-auth-page__discord:hover { background: #4752c4; color: #fff !important; }
.oxes-auth-page__discord:active { transform: translateY(1px); }

.oxes-auth-page__alt {
    text-align: center;
    font-family: var(--font-body);
    font-size: 16.2px;
    color: var(--fg-soft);
    margin: 4px 0 0;
}
.oxes-auth-page__alt a {
    color: var(--fg);
    font-weight: 700;
    border-bottom: 1px solid var(--line);
    transition: color 0.15s, border-color 0.15s;
}
.oxes-auth-page__alt a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.oxes-auth-page__alert {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 12px;
    background: rgba(217,119,87,0.08);
    border: 1px solid rgba(217,119,87,0.3);
    border-radius: 8px;
    color: #e0a99a;
    font-family: var(--font-body);
    font-size: 16.2px;
    line-height: 1.4;
}

@media (max-width: 560px) {
    .oxes-auth-page { padding: 16px; }
    .oxes-auth-page__home span { display: none; }
    .oxes-auth-page__main { gap: 18px; }
    .oxes-auth-page__form { padding: 20px 16px; gap: 14px; }
    .oxes-auth-page__head { margin-bottom: 2px; }
    .oxes-auth-page__title { font-size: 25px; letter-spacing: -0.015em; }
    .oxes-auth-page__sub { font-size: 16.2px; }
    .oxes-auth-page__input { padding: 10px 12px; font-size: 17.5px; }
    .oxes-auth-page__submit { padding: 12px 16px; font-size: 16.2px; }
}

.oxes-auth-page__alert--ok {
    background: rgba(46,154,142,0.08);
    border-color: rgba(46,154,142,0.3);
    color: #7fcfc3;
}


/* ─────────────────────────────────────────────────────────────────────────
   ERROR PAGES — full-viewport pixel/brutalist
   ───────────────────────────────────────────────────────────────────────── */
body.oxes-error-page {
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    position: relative;
    overflow-x: hidden;
}
body.oxes-error-page::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(46,154,142,0.06), transparent 50%),
        radial-gradient(circle at 90% 10%, rgba(255,255,255,0.02), transparent 60%);
    pointer-events: none;
}

.oxes-error-page__main {
    width: 100%;
    max-width: 560px;
    display: flex; flex-direction: column; align-items: center;
    gap: 28px;
    text-align: center;
    position: relative; z-index: 1;
}

.oxes-error-page__code {
    font-family: var(--font-display);
    font-size: 96px;
    font-weight: 400;
    color: var(--fg);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 8px 0 0;
    text-shadow: 4px 4px 0 var(--bg-elev);
}

.oxes-error-page__body {
    display: flex; flex-direction: column; gap: 8px;
    align-items: center;
    max-width: 460px;
}
.oxes-error-page__title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--fg);
}
.oxes-error-page__msg {
    font-family: var(--font-soft, var(--font-body));
    font-size: 18.8px;
    line-height: 1.55;
    color: var(--fg-soft);
    margin: 0;
}

.oxes-error-page__cta {
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap; justify-content: center;
    margin-top: 8px;
}
.oxes-error-page__cta .oxes-auth-page__submit { padding: 13px 22px; }

.oxes-error-page__link {
    color: var(--fg-soft);
    font-family: var(--font-body);
    font-size: 16.9px; font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    transition: color 0.15s, border-color 0.15s;
    padding-bottom: 1px;
}
.oxes-error-page__link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.oxes-error-page__suggest {
    margin-top: 16px;
    width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.oxes-error-page__suggest-title {
    font-family: var(--font-mono);
    font-size: 13.8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-dim);
    margin: 0;
}
.oxes-error-page__suggest-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 8px 18px;
    flex-wrap: wrap; justify-content: center;
}
.oxes-error-page__suggest-list a {
    color: var(--fg-soft);
    text-decoration: none;
    font-size: 17.5px;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.oxes-error-page__suggest-list a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.oxes-error-page__search {
    display: inline-flex; align-items: center; gap: 8px;
    width: 100%; max-width: 420px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-elev);
}
.oxes-error-page__search input {
    flex: 1; min-width: 0;
    background: transparent;
    border: 0; outline: 0;
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 17.5px;
    padding: 8px 14px;
}
.oxes-error-page__search input::placeholder { color: var(--fg-dim); }
.oxes-error-page__search button {
    padding: 8px 18px;
    background: var(--accent);
    border: none;
    border-radius: 999px;
    color: var(--plugin-btn-fg, #1f1f1f);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s;
}
.oxes-error-page__search button:hover { background: var(--accent-soft); }

@media (max-width: 560px) {
    .oxes-error-page__code { font-size: 80px; text-shadow: 3px 3px 0 var(--bg-elev); }
    .oxes-error-page__title { font-size: 27.5px; }
}

/* Accent variant of the auth/error CTA — used on 404 "Anasayfa" button */
.oxes-auth-page__submit--accent {
    background: var(--accent);
    color: #1f1f1f;
}
.oxes-auth-page__submit--accent:hover {
    background: var(--accent-soft);
}

.oxes-page-brand {
    position: absolute; top: 24px; left: 24px;
    display: inline-flex; align-items: center; gap: 12px;
    color: var(--fg);
    z-index: 2;
}
.oxes-page-brand img {
    height: 38px; width: auto;
    image-rendering: pixelated;
}
.oxes-page-brand span {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}


/* ─────────────────────────────────────────────────────────────────────────
   GENERIC PAGE — admin Page model render'ı (KVKK, Şartlar, Forum, vb.)
   ───────────────────────────────────────────────────────────────────────── */
.oxes-app { min-height: 100vh; padding-top: var(--navbar-h, 100px); }

.oxes-page {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 48px var(--pad, 24px) 96px;
    color: var(--fg);
}

.oxes-page__head {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
}
.oxes-page__kicker {
    font-family: var(--font-mono);
    font-size: 13.8px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--accent);
    text-transform: uppercase;
}
.oxes-page__title {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0;
    color: var(--fg);
}
.oxes-page__sub {
    font-family: var(--font-soft, var(--font-body));
    font-size: 20px;
    color: var(--fg-soft);
    margin: 4px 0 0;
    max-width: 60ch;
}

/* Prose — WYSIWYG content from admin Page editor */
.oxes-page__content {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.7;
    color: var(--fg-prose);
}
.oxes-page__content > * + * { margin-top: 18px; }
.oxes-page__content h2 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-top: 40px;
    color: var(--fg);
}
.oxes-page__content h3 {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    margin-top: 28px;
    color: var(--fg);
}
.oxes-page__content p { margin: 0; }
.oxes-page__content a {
    color: var(--accent);
    border-bottom: 1px solid rgba(46,154,142,0.4);
    transition: color 0.15s, border-color 0.15s;
}
.oxes-page__content a:hover {
    color: var(--accent-soft);
    border-bottom-color: var(--accent-soft);
}
.oxes-page__content ul, .oxes-page__content ol {
    padding-left: 22px;
    list-style: revert;
}
.oxes-page__content li + li { margin-top: 6px; }
.oxes-page__content blockquote {
    padding: 12px 18px;
    border-left: 3px solid var(--accent);
    background: var(--bg-elev);
    border-radius: 0 8px 8px 0;
    color: var(--fg);
    font-style: italic;
}
.oxes-page__content code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    padding: 2px 6px;
    background: var(--bg-elev);
    border-radius: 4px;
    color: var(--accent-soft);
}
.oxes-page__content pre {
    padding: 16px 18px;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow-x: auto;
    line-height: 1.5;
}
.oxes-page__content pre code { padding: 0; background: transparent; color: var(--fg); }
.oxes-page__content hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 32px 0;
}
.oxes-page__content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 18.1px;
}
.oxes-page__content th, .oxes-page__content td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}
.oxes-page__content th {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--fg);
    background: var(--bg-elev);
}
.oxes-page__content img {
    border-radius: 8px;
    max-width: 100%;
}

/* Empty state — Page'in content'i boş */
.oxes-page__empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px;
    padding: 64px 24px;
    text-align: center;
    color: var(--fg-soft);
    background: var(--bg-elev);
    border: 1px dashed var(--line);
    border-radius: 12px;
}
.oxes-page__empty-icon {
    color: var(--fg-dim);
}
.oxes-page__empty-icon svg { width: 56px; height: 56px; }
.oxes-page__empty-text {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--fg);
    margin: 0;
}
.oxes-page__empty-sub {
    font-family: var(--font-body);
    font-size: 17.5px;
    margin: 0;
    color: var(--fg-dim);
}

@media (max-width: 560px) {
    .oxes-page { padding: 32px 18px 64px; }
    .oxes-page__head { margin-bottom: 32px; padding-bottom: 20px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   MINI FOOTER — inner sayfalarda (KVKK, Şartlar, Forum, vb.) sade copyright + legal
   ───────────────────────────────────────────────────────────────────────── */
.oxes-foot-mini {
    border-top: 1px solid var(--line);
    background: var(--bg);
    padding: 22px var(--pad);
}
.oxes-foot-mini__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    font-family: var(--font-body);
    font-size: 16.2px;
    color: var(--fg-soft);
}
.oxes-foot-mini__copy { white-space: nowrap; }
.oxes-foot-mini__legal {
    display: flex; align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.oxes-foot-mini__legal a {
    color: var(--fg-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    padding-bottom: 1px;
}
.oxes-foot-mini__legal a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

@media (max-width: 560px) {
    .oxes-foot-mini__inner { flex-direction: column; align-items: center; gap: 12px; }
    .oxes-foot-mini__legal { justify-content: center; gap: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Sayfa arka plan dokusu — arkaplan2.webp doğrudan html bg, dark renkle
   blend. Hero (section 1) kendi opak fotoğrafıyla dokuyu üstten kapatır,
   diğer her yerde taşlar koyu tonda görünür.
   ───────────────────────────────────────────────────────────────────────── */
/* (tekstür body'ye taşındı — html sade kalır) */

/* Tüm görünür içerik z-index 1+ ile üstte kalır.
   .oxes-topbar position:fixed — sadece z-index'i yukarı çek. */
.oxes-hero, .oxes-snap, .oxes-footer, .oxes-app, .wk-A,
.oxes-auth-page, .oxes-error-page { position: relative; z-index: 1; }
.oxes-topbar { z-index: 50; }