/* =============================================================
   ZEYD ONLINE - Global Stylesheet
   Dark Fantasy MMORPG UI
   -------------------------------------------------------------
   Responsive kurallari ayri dosyadadir: css/responsive.css
   (index.html icinde bu dosyadan SONRA yuklenir)
   =============================================================
   Icindekiler:
     1. Tema degiskenleri
     2. Reset & temel yerlesim
     3. Ekran (screen) sistemi
     4. Backdrop (ozgun sahne kompozisyonu)
     5. Baslangic ekrani: hero / bottombar
     6. Dil secici (bayrak bari)
     7. Ortak UI bilesenleri (button, panel, divider)
     8. Anti-cheat yukleme ekrani
     9. Modal
    10. file:// uyari ekrani
    11. Yardimci siniflar & erisilebilirlik
   ============================================================= */

/* -------------------------------------------------------------
   1. TEMA DEGISKENLERI
   ------------------------------------------------------------- */
:root {
  /* Renk paleti - dark fantasy */
  --c-void: #07040d;
  --c-navy-deep: #0d1030;
  --c-navy: #141a44;
  --c-purple-deep: #1e0f2e;
  --c-blood: #6b1220;
  --c-blood-light: #9c1c2c;
  --c-gold: #e8c064;
  --c-gold-bright: #ffe9a8;
  --c-gold-dim: #8a6a2c;
  --c-fire: #ff8a2b;
  --c-text: #efe6d2;
  --c-text-dim: #b9ad93;

  /* Viewport yuksekligi. dvh destekleniyorsa asagida ezilir,
     desteklenmiyorsa app.js'in yazdigi --vh degiskeni kullanilir. */
  --viewport-h: calc(var(--vh, 1vh) * 100);
  --viewport-w: calc(var(--vw, 1vw) * 100);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --app-w: calc(var(--viewport-w) - var(--safe-left) - var(--safe-right));
  --app-h: calc(var(--viewport-h) - var(--safe-top) - var(--safe-bottom));

  /* Tipografi */
  --font-display: "Trajan Pro", "Cinzel", Georgia, "Times New Roman", serif;
  --font-ui: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Consolas", "SF Mono", "Roboto Mono", monospace;

  /* Hareket */
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 480ms;

  /* -----------------------------------------------------------
     RESPONSIVE TOKENLAR (TEK MERKEZ)
     -----------------------------------------------------------
     Oyun HER cihazda ayni yatay kompozisyonu kullanir; kuculen
     tek sey OLCEKTIR. Breakpoint degerleri 50 ayri kurala
     kopyalanmaz: paneller asagidaki degiskenleri okur ve
     responsive.css yalnizca bu degiskenleri gunceller.

       --ui-scale    genel olcek carpani (0.72 ... 1)
       --text-xs/sm/md/lg  tipografi basamaklari
       --slot-size   envanter / ekipman hucre boyu
       --panel-gap   panel ici bosluk
       --tap-min     dokunma hedefi alt siniri
     ----------------------------------------------------------- */
  --ui-scale: 1;
  --text-xs: calc(clamp(0.46rem, 1.05vh, 0.58rem) * var(--ui-scale));
  --text-sm: calc(clamp(0.52rem, 1.2vh, 0.68rem) * var(--ui-scale));
  --text-md: calc(clamp(0.62rem, 1.5vh, 0.82rem) * var(--ui-scale));
  --text-lg: calc(clamp(0.8rem, 2vh, 1.1rem) * var(--ui-scale));
  --slot-size: calc(clamp(1.9rem, 4.6vh, 2.9rem) * var(--ui-scale));
  --panel-gap: calc(clamp(0.28rem, 1vh, 0.7rem) * var(--ui-scale));
  --tap-min: 40px;

  /* Sol kasaba menusunun genisligi - ekran daraldikca oransal kucul. */
  --sidebar-w: clamp(11.5rem, 17vw, 15.5rem);
}

@supports (height: 100dvh) {
  :root {
    /* JS visualViewport degeri inline olarak geldiginde bunu ezer. */
    --viewport-h: 100dvh;
    --viewport-w: 100dvw;
  }
}

/* -------------------------------------------------------------
   2. RESET & TEMEL YERLESIM
   ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--c-void);
  color: var(--c-text);
  font-family: var(--font-ui);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

html { min-height: 100%; }

body {
  /* Mobil cihazlarda centik/safe-area destegi */
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

/* All entry screens and the HUD share the same usable, notch-safe width. */
.app-shell { position: relative; width: var(--app-w); max-width: 100%; height: var(--app-h); overflow: hidden; }

/* Oyun yuzeyinde iOS uzun-basma secimi, buyuteci, resim onizlemesi ve
   surukleme menusu acilmaz. Form alanlari yazilabilir/secilebilir kalir. */
body,
.app-shell,
.orientation-guard,
button,
[role="button"] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
select,
[contenteditable="true"] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

img {
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

button {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

/* Uygulama kok container'i
   Kullanilabilir alanin TAMAMINI doldurur; sayfa seviyesinde
   kaydirma yoktur (oyun UI'i gibi davranir, web sayfasi gibi degil). */
.app {
  position: relative;
  width: 100%;
  height: var(--app-h);
  overflow: hidden;
}

/* Dikey moddayken oyun katmani hicbir dokunusu almaz. */
body.is-portrait-blocked .app {
  pointer-events: none;
  filter: blur(2px) saturate(0.4);
}

/* -------------------------------------------------------------
   YATAY (LANDSCAPE) ZORUNLULUGU - GLOBAL KATMAN
   -------------------------------------------------------------
   Dikey tutulan telefonda oyun arayuzu GOSTERILMEZ; ayri bir
   portrait tasarim da uretilmez. Yalnizca bu uyari cikar ve
   cihaz yataya donunce kendiliginden kalkar.
   ------------------------------------------------------------- */
.orientation-guard {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top) + 1rem) calc(env(safe-area-inset-right) + 1rem)
    calc(env(safe-area-inset-bottom) + 1rem) calc(env(safe-area-inset-left) + 1rem);
  background: radial-gradient(ellipse at 50% 45%, #1b0f22 0%, #0a0511 60%, #05030a 100%);
  text-align: center;
}

.orientation-guard[hidden] { display: none; }

.orientation-guard__inner {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  max-width: min(90vw, 26rem);
}

/* Donen telefon silueti - ek gorsel dosyasi gerektirmez. */
.orientation-guard__icon {
  width: clamp(3.4rem, 22vw, 5.4rem);
  height: clamp(5.6rem, 34vw, 8.6rem);
  border: 3px solid var(--c-gold);
  border-radius: 0.7rem;
  box-shadow: 0 0 26px rgba(232, 192, 100, 0.28);
  animation: orientation-rotate 2.4s ease-in-out infinite;
}

@keyframes orientation-rotate {
  0%, 30% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}

.orientation-guard__title {
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 5vw, 1.5rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.orientation-guard__text {
  margin: 0;
  color: var(--c-text-dim);
  font-size: clamp(0.7rem, 3.6vw, 0.9rem);
  line-height: 1.5;
}

.orientation-guard__action {
  min-width: 9rem;
  min-height: var(--tap-min);
  margin-top: 0.55rem;
  padding: 0.65rem 1.35rem;
}

.noscript {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  color: var(--c-gold);
}

/* -------------------------------------------------------------
   3. EKRAN (SCREEN) SISTEMI
   ------------------------------------------------------------- */
.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-base) ease-out;
}

.screen--active {
  opacity: 1;
}

/* -------------------------------------------------------------
   4. BACKDROP - SAHNE KOMPOZISYONU
   -------------------------------------------------------------
   Taban katman renk/efekt zeminidir; ANA EKRAN (hero) ise
   insan-ork yuzlesme artwork'unu tam ekran hero background olarak
   kullanir (assets/backgrounds/hero-clash.webp).
   Uzerine kor parlamasi + kor parcaciklari + vinyet biner.
   (bkz. js/ui/backdrop.js)
   ------------------------------------------------------------- */
.backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--c-void);
  pointer-events: none;
}

/* 1. katman: sahne gorseli (oran korunarak ekrani doldurur) */
.backdrop__scene {
  position: absolute;
  inset: 0;
  background-image: none;
  background-size: cover;
  background-position: center 62%;
  background-repeat: no-repeat;
}

/* ANA EKRAN: insan vs ork yuzlesme artwork'u.
   `cover` sayesinde oran BOZULMADAN tum ekrani doldurur; odak noktasi
   (iki karakterin yuzu) merkezde kaldigi icin hizalama `center`dir. */
.backdrop--hero .backdrop__scene {
  background-image: url("../assets/backgrounds/hero-clash.webp");
  background-position: center center;
}

/* 2. katman: ufuktan yukselen kor parlamasi */
.backdrop__glow {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 140%;
  height: 78%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at 50% 78%,
    rgba(255, 138, 43, 0.42) 0%,
    rgba(224, 51, 28, 0.22) 26%,
    rgba(122, 16, 48, 0.12) 52%,
    rgba(0, 0, 0, 0) 74%
  );
  animation: hell-breathe 7.5s ease-in-out infinite;
}

@keyframes hell-breathe {
  0%,
  100% {
    opacity: 0.75;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
}

/* 3. katman: yukari suzulen kor parcaciklari */
.backdrop__embers {
  position: absolute;
  inset: 0;
}

.backdrop__ember {
  position: absolute;
  bottom: -6%;
  left: var(--ember-x, 50%);
  width: var(--ember-size, 3px);
  height: var(--ember-size, 3px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 214, 140, 0.95) 0%,
    rgba(255, 138, 43, 0.75) 45%,
    rgba(255, 90, 16, 0) 100%
  );
  animation: ember-rise var(--ember-duration, 12s) linear infinite;
  animation-delay: var(--ember-delay, 0s);
  will-change: transform, opacity;
}

@keyframes ember-rise {
  0% {
    transform: translate3d(0, 0, 0) scale(0.6);
    opacity: 0;
  }
  12% {
    opacity: 0.9;
  }
  78% {
    opacity: 0.55;
  }
  100% {
    transform: translate3d(var(--ember-drift, 0), -108vh, 0) scale(1.1);
    opacity: 0;
  }
}

/* 4. katman: vinyet */
.backdrop__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 50% 45%,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.72) 100%
    ),
    linear-gradient(180deg, rgba(4, 2, 9, 0.55) 0%, rgba(4, 2, 9, 0) 22%);
}

/* ANA EKRAN: artwork'un kendi isigi zaten guclu oldugu icin kor
   parlamasi kisilir, vinyet ise UI okunakliligini artiracak sekilde
   ust ve alt seride yogunlasir. */
.backdrop--hero .backdrop__glow {
  opacity: 0.45;
}

/* Baslangic sahnesinin altinda mobil ve masaustunde ayni hafif lav nefesi. */
.backdrop--hero .backdrop__embers::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -5%;
  height: 18%;
  background:
    radial-gradient(ellipse at 12% 100%, rgba(255, 91, 19, .23), transparent 34%),
    radial-gradient(ellipse at 43% 100%, rgba(255, 151, 45, .2), transparent 30%),
    radial-gradient(ellipse at 76% 100%, rgba(224, 53, 25, .22), transparent 35%),
    radial-gradient(ellipse at 94% 100%, rgba(255, 126, 30, .15), transparent 28%);
  filter: blur(5px);
  opacity: .76;
  animation: hero-lava-breathe 7.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hero-lava-breathe {
  0%, 100% { opacity: .56; transform: scaleX(.98) translate3d(0, 0, 0); }
  50% { opacity: .88; transform: scaleX(1.02) translate3d(0, -2px, 0); }
}

.backdrop--hero .backdrop__vignette {
  background: radial-gradient(
      ellipse at 50% 42%,
      rgba(0, 0, 0, 0) 42%,
      rgba(0, 0, 0, 0.6) 100%
    ),
    linear-gradient(180deg, rgba(4, 2, 9, 0.62) 0%, rgba(4, 2, 9, 0) 24%),
    linear-gradient(0deg, rgba(4, 2, 9, 0.78) 0%, rgba(4, 2, 9, 0) 26%);
}

/* Anti-cheat ekraninda sahne kararir ve hafif blurlanir */
.backdrop--dim .backdrop__scene {
  filter: blur(4px) brightness(0.45) saturate(0.8);
  transform: scale(1.04);
}

.backdrop--dim .backdrop__glow {
  opacity: 0.4;
}

.backdrop--dim .backdrop__vignette {
  background: radial-gradient(
      ellipse at 50% 50%,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.85) 100%
    );
}

/* -------------------------------------------------------------
   5. BASLANGIC EKRANI
   ------------------------------------------------------------- */
.screen--start {
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

/* --- Orta bolum: logo + PLAY NOW --- */
.hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Blok hafifce ASAGI kaydirilir: arka plandaki insan-ork yuzlesmesi
     (iki karakterin yuz hizasi) logonun arkasinda kalmasin. */
  justify-content: flex-end;
  gap: clamp(0.9rem, 2.6vh, 2rem);
  padding: 0 1rem clamp(0.5rem, 4vh, 3rem);
  min-height: 0;
}

.hero__emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: min(78vw, 60vh, 780px);
  aspect-ratio: 960 / 340;
}

/* Logonun arkasinda yavasca donen runik cember */
.hero__circle {
  position: absolute;
  width: min(62vh, 44vw, 560px);
  aspect-ratio: 1;
  opacity: 0.6;
  filter: drop-shadow(0 0 18px rgba(255, 170, 70, 0.35));
  animation: circle-spin 64s linear infinite;
}

@keyframes circle-spin {
  to {
    transform: rotate(360deg);
  }
}

.hero__frame {
  position: absolute;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 12px 34px rgba(0, 0, 0, 0.75));
}

.hero__title {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.94;
  text-align: center;
  width: 86%;
  max-width: 86%;
  padding: clamp(.18rem, .7vh, .42rem) 8%;
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(3, 2, 8, .72) 18%,
    rgba(2, 2, 7, .82) 50%,
    rgba(3, 2, 8, .72) 82%,
    transparent 100%);
  box-shadow: inset 0 1px rgba(236, 198, 111, .08), inset 0 -1px rgba(236, 198, 111, .08);
}

.hero__title-main,
.hero__title-sub {
  font-family: var(--font-display);
  font-weight: 700;
  background: linear-gradient(
    180deg,
    #fff3cf 0%,
    #ffe9a8 26%,
    #e8c064 52%,
    #a97d2a 78%,
    #7a5416 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 22px rgba(255, 150, 40, 0.4));
}

.hero__title-main {
  font-size: clamp(1.65rem, min(7.4vw, 14vh), 5.6rem);
  letter-spacing: 0.1em;
  text-indent: 0.1em; /* letter-spacing'in sagda biraktigi bosluk telafisi */
}

.hero__title-sub {
  font-size: clamp(0.68rem, min(2.7vw, 5vh), 2.05rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
}

.hero__tagline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 1.35vw, 0.92rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  text-align: center;
}

/* --- Alt serit: dil bari (TAM ALT ORTA) + altinda yasal metin ---
   Iki eleman AYRI SATIRLARDA ve ortalanmis durur. Boylece dil barinin
   merkezi, yasal metnin uzunlugundan (12 dilde degisir) veya dar
   ekranda gizlenmesinden ASLA etkilenmez ve iki eleman cakismaz. */
.bottombar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.3rem, 1vh, 0.6rem);
  padding: 0 clamp(0.9rem, 2.4vw, 2.2rem) clamp(0.55rem, 1.6vh, 1.1rem);
}

.legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 1.6vw, 1.4rem);
  font-family: var(--font-display);
  font-size: clamp(0.58rem, 1.05vw, 0.8rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  opacity: 0.75;
}

.legal__sep {
  width: 1px;
  height: 0.9em;
  background: var(--c-gold-dim);
  opacity: 0.6;
}

.legal__item {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--t-fast) ease, opacity var(--t-fast) ease;
}

.legal__item:hover,
.legal__item:focus-visible {
  color: var(--c-gold);
  opacity: 1;
  outline: none;
}

/* -------------------------------------------------------------
   6. DIL SECICI (BAYRAK BARI)
   ------------------------------------------------------------- */
/* Alt ortada YATAY bir panel: etiket solda, 12 bayrak saginda.
   Yari seffaf koyu zemin artwork'un uzerinde okunakli kalmasini saglar. */
.language-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: min(96vw, 62rem);
  gap: 0.34em 0.64em;
  padding: 0.315em 0.675em 0.345em;
  border: 1px solid rgba(138, 106, 44, 0.55);
  border-radius: 4.5px;
  background: linear-gradient(
    180deg,
    rgba(16, 20, 56, 0.74) 0%,
    rgba(7, 4, 13, 0.84) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.14),
    0 6px 22px rgba(0, 0, 0, 0.6);
  transition: opacity var(--t-base) ease-out;
}

.language-bar.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

.language-bar__label {
  font-family: var(--font-display);
  font-size: clamp(0.435rem, 0.64vw, 0.585rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold-dim);
  white-space: nowrap;
}

.language-bar__flags {
  display: grid;
  grid-template-columns: repeat(12, auto);
  gap: 4.5px;
}

.language-flag {
  position: relative;
  width: clamp(18px, 1.76vw, 28.5px);
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(138, 106, 44, 0.5);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  appearance: none;
  touch-action: manipulation;
  transition: transform var(--t-fast) ease-out, border-color var(--t-fast) ease-out,
    box-shadow var(--t-fast) ease-out;
}

/* Dokunma alanini gorunumu bozmadan buyutur */
.language-flag::before {
  content: "";
  position: absolute;
  inset: -3px;
}

.language-flag__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1.5px;
  object-fit: cover;
  /* Pasif diller hafif soluk; aktif/hover olan tam renkli */
  filter: saturate(0.7) brightness(0.75);
  transition: filter var(--t-fast) ease-out;
}

.language-flag:hover,
.language-flag:focus-visible {
  outline: none;
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(232, 192, 100, 0.85);
  box-shadow: 0 0 12px rgba(255, 190, 90, 0.45);
}

.language-flag:hover .language-flag__img,
.language-flag:focus-visible .language-flag__img {
  filter: none;
}

.language-flag:active {
  transform: translateY(0) scale(0.97);
}

/* Aktif dil: altin border + hafif glow */
.language-flag.is-active {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 1px rgba(232, 192, 100, 0.45),
    0 0 14px rgba(255, 190, 90, 0.5);
}

.language-flag.is-active .language-flag__img {
  filter: none;
}

/* Bayragin uzerine gelince dil adi (tooltip). Mobilde hover yok:
   davranis hover'a bagimli degil, sadece gorsel bir ekstra. */
.language-flag__name {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.28em 0.6em;
  border: 1px solid rgba(138, 106, 44, 0.7);
  border-radius: 4px;
  background: rgba(7, 4, 13, 0.96);
  color: var(--c-gold);
  font-family: var(--font-ui);
  font-size: 0.54rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) ease-out, transform var(--t-fast) ease-out;
}

/* -------------------------------------------------------------
   7. ORTAK UI BILESENLERI
   ------------------------------------------------------------- */
.ui-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.7em 2.4em;
  border: 1px solid var(--c-gold-dim);
  border-radius: 4px;
  background: linear-gradient(180deg, #1b2352 0%, #101636 55%, #0a0d25 100%);
  color: var(--c-gold);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  touch-action: manipulation;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.55);
  transition: transform var(--t-fast) ease-out, filter var(--t-fast) ease-out,
    box-shadow var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}

.ui-button:hover,
.ui-button:focus-visible {
  border-color: var(--c-gold);
  color: var(--c-gold-bright);
  filter: brightness(1.18);
  box-shadow: inset 0 1px 0 rgba(255, 235, 185, 0.28),
    0 0 20px rgba(255, 190, 90, 0.4), 0 4px 16px rgba(0, 0, 0, 0.6);
  outline: none;
  transform: translateY(-1px);
}

.ui-button:active {
  transform: translateY(1px);
  filter: brightness(0.95);
}

/* Ikonlar <img> olarak yuklenir; renkleri SVG dosyasinda tanimlidir
   (currentColor <img> icinde calismaz). */
.ui-button__icon {
  width: 1.15em;
  height: 1.15em;
  opacity: 0.9;
}

/* Ust serit butonlari: daha kompakt */
.ui-button--nav {
  padding: 0.55em 1.15em;
  font-size: clamp(0.62rem, 1.15vw, 0.86rem);
  letter-spacing: 0.18em;
}

/* Ana cagri butonu: PLAY NOW */
.ui-button--hero {
  padding: 0.78em 3.4em;
  font-size: clamp(1.05rem, 2.5vw, 1.85rem);
  letter-spacing: 0.2em;
  border-width: 2px;
  border-color: var(--c-gold);
  color: var(--c-gold-bright);
  background: linear-gradient(180deg, #23306b 0%, #131a45 52%, #0a0d25 100%);
  box-shadow: inset 0 1px 0 rgba(255, 235, 185, 0.32),
    0 0 0 1px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(0, 0, 0, 0.6);
  animation: hero-pulse 3s ease-in-out infinite;
}

@keyframes hero-pulse {
  0%,
  100% {
    box-shadow: inset 0 1px 0 rgba(255, 235, 185, 0.32),
      0 0 0 1px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(0, 0, 0, 0.6);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255, 235, 185, 0.32),
      0 0 0 1px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(0, 0, 0, 0.6),
      0 0 32px rgba(255, 175, 70, 0.5);
  }
}

.ui-button--hero:hover,
.ui-button--hero:focus-visible {
  animation: none;
  transform: translateY(-2px) scale(1.02);
}

.panel {
  position: relative;
  z-index: 1;
  width: min(90%, 34rem);
  padding: clamp(1.6rem, 4vw, 3rem) clamp(1.4rem, 4vw, 2.8rem);
  text-align: center;
  border: 1px solid var(--c-gold-dim);
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    rgba(20, 12, 32, 0.94) 0%,
    rgba(10, 8, 22, 0.96) 100%
  );
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 20px 60px rgba(0, 0, 0, 0.7),
    inset 0 0 60px rgba(107, 18, 32, 0.25);
}

.panel__brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 2.9rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, #ffe9a8 0%, #e8c064 45%, #a97d2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 18px rgba(255, 150, 40, 0.25);
}

.panel__title {
  margin: 0 0 0.4em;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text);
}

.panel__status {
  margin: 0 0 2rem;
  font-size: clamp(0.85rem, 2vw, 1rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.divider {
  width: 70%;
  height: 1px;
  margin: 1.2rem auto 1.6rem;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--c-gold-dim) 50%,
    transparent 100%
  );
}

/* Character select ekraninin arka plani */
.screen--character-select {
  display: grid;
  place-items: center;
  background: radial-gradient(
      ellipse at 50% 35%,
      rgba(107, 18, 32, 0.35) 0%,
      rgba(7, 4, 13, 0) 60%
    ),
    linear-gradient(180deg, #0d0a1c 0%, #07040d 100%);
}

/* -------------------------------------------------------------
   8. ANTI-CHEAT YUKLEME EKRANI (Z.A.C.S.)
   ------------------------------------------------------------- */
.screen--anticheat {
  display: grid;
  place-items: center;
  padding: 1rem;
}

.acs-panel {
  position: relative;
  z-index: 2;
  width: min(92vw, 34rem);
  padding: clamp(1.1rem, 3.4vh, 2rem) clamp(1.2rem, 3.2vw, 2.2rem);
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 6px;
  /* Altin metalik cerceve: ic zemin + kenar gradyani tek arka planda */
  background: linear-gradient(
        180deg,
        rgba(28, 8, 14, 0.97) 0%,
        rgba(14, 5, 10, 0.98) 45%,
        rgba(8, 3, 8, 0.99) 100%
      )
      padding-box,
    linear-gradient(180deg, #ffe9a8 0%, #e8c064 26%, #8a6a2c 62%, #4a3410 100%)
      border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 28px 70px rgba(0, 0, 0, 0.75),
    inset 0 0 70px rgba(140, 20, 30, 0.3);
  animation: acs-enter var(--t-slow) cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes acs-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Panel uzerinde gecen tarama cizgisi + scanline dokusu */
.acs-panel__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 3px
  );
}

.acs-panel__scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  background: linear-gradient(
    180deg,
    rgba(255, 170, 70, 0) 0%,
    rgba(255, 170, 70, 0.09) 50%,
    rgba(255, 170, 70, 0) 100%
  );
  animation: acs-scan 2.6s ease-in-out infinite;
}

@keyframes acs-scan {
  0% {
    transform: translateY(-40%);
  }
  100% {
    transform: translateY(400%);
  }
}

/* --- Marka blogu --- */
.acs-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 2vw, 1.1rem);
}

.acs-brand__emblem {
  width: clamp(38px, 6.5vh, 60px);
  height: auto;
  filter: drop-shadow(0 0 12px rgba(255, 170, 70, 0.35));
}

.acs-brand__text {
  display: flex;
  flex-direction: column;
  gap: 0.18em;
  min-width: 0;
}

.acs-brand__mark {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.4vh, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  background: linear-gradient(180deg, #ffe9a8 0%, #e8c064 48%, #a97d2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.acs-brand__title {
  font-family: var(--font-ui);
  font-size: clamp(0.56rem, 1.5vh, 0.74rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-blood-light);
}

.acs-subtitle {
  position: relative;
  margin: clamp(0.7rem, 2vh, 1.1rem) 0 clamp(0.9rem, 2.6vh, 1.5rem);
  padding-top: clamp(0.7rem, 2vh, 1.1rem);
  border-top: 1px solid rgba(138, 106, 44, 0.35);
  font-size: clamp(0.72rem, 1.85vh, 0.88rem);
  line-height: 1.5;
  color: var(--c-text-dim);
}

/* --- Ilerleme --- */
.acs-progress {
  position: relative;
}

.acs-progress__track {
  position: relative;
  height: clamp(10px, 1.7vh, 14px);
  overflow: hidden;
  border: 1px solid rgba(138, 106, 44, 0.65);
  border-radius: 3px;
  background: linear-gradient(180deg, #16060c 0%, #0a0409 100%);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85);
}

.acs-progress__fill {
  position: relative;
  overflow: hidden;
  width: var(--acs-progress, 0%);
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffd27a 0%, #ff8a2b 40%, #c11f2a 100%);
  box-shadow: 0 0 14px rgba(255, 140, 50, 0.65);
  transition: width 90ms linear;
}

/* Dolum uzerinde kayan parlaklik */
.acs-progress__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: screen;
  animation: acs-sheen 1.4s linear infinite;
}

@keyframes acs-sheen {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.acs-progress__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.6em;
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 1.6vh, 0.8rem);
  letter-spacing: 0.06em;
}

.acs-status {
  color: var(--c-text);
  opacity: 0.92;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acs-status.is-swap {
  animation: acs-status-in 320ms ease-out;
}

@keyframes acs-status-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 0.92;
    transform: translateY(0);
  }
}

.acs-percent {
  color: var(--c-gold);
  font-variant-numeric: tabular-nums;
}

/* --- Tamamlandi rozeti --- */
.acs-verified {
  margin-top: clamp(0.7rem, 2vh, 1.05rem);
  font-family: var(--font-display);
  font-size: clamp(0.66rem, 1.7vh, 0.84rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  color: #7ee08a;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-base) ease-out, transform var(--t-base) ease-out;
}

.acs-panel.is-complete .acs-verified {
  opacity: 1;
  transform: translateY(0);
}

.acs-panel.is-complete {
  animation: acs-complete-pulse 640ms ease-out;
}

@keyframes acs-complete-pulse {
  0% {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 28px 70px rgba(0, 0, 0, 0.75),
      inset 0 0 70px rgba(140, 20, 30, 0.3);
  }
  40% {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 46px rgba(255, 190, 90, 0.55),
      0 28px 70px rgba(0, 0, 0, 0.75), inset 0 0 70px rgba(60, 140, 70, 0.35);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 28px 70px rgba(0, 0, 0, 0.75),
      inset 0 0 70px rgba(60, 140, 70, 0.22);
  }
}

.acs-panel.is-complete .acs-progress__fill::after {
  animation: none;
  opacity: 0;
}

/* -------------------------------------------------------------
   8B. GIRIS SONRASI OYUN ASSET YUKLEME EKRANI
   ------------------------------------------------------------- */
.screen--asset-preload {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(2, 2, 8, .3), rgba(2, 2, 8, .66)),
    url("../assets/backgrounds/hero-clash.webp") center center / cover no-repeat,
    #030207;
}

/* Keep the requested artwork on its own paint layer. The loading panel and
   effect backdrop remain transparent overlays, so later shared UI skins cannot
   replace the scene with an opaque surface. */
.screen--asset-preload::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background: url("../assets/backgrounds/hero-clash.webp") center center / cover no-repeat;
  filter: brightness(.72) saturate(.92) contrast(1.06);
  transform: scale(1.01);
}

.screen--asset-preload > .backdrop {
  z-index: 1;
  background-color: transparent;
}

.screen--asset-preload .backdrop--hero .backdrop__scene {
  background-image: url("../assets/backgrounds/hero-clash.webp");
  background-position: center 42%;
  opacity: .72;
  filter: brightness(.68) saturate(.92) contrast(1.08);
  transform: scale(1.025);
}

.screen--asset-preload .backdrop--hero .backdrop__glow {
  opacity: .42;
}

.screen--asset-preload .backdrop--hero .backdrop__vignette {
  background:
    linear-gradient(180deg, rgba(2, 2, 8, .72), transparent 24%, transparent 62%, rgba(2, 2, 8, .88)),
    radial-gradient(ellipse at center, transparent 28%, rgba(0, 0, 0, .68) 100%);
}

.apl-panel {
  position: absolute;
  z-index: 2;
  inset: 0;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  padding: clamp(1rem, 3.4vh, 2.4rem) clamp(1.1rem, 4vw, 4.5rem) clamp(.9rem, 3vh, 2rem);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(1, 2, 8, .7), transparent 18%, transparent 82%, rgba(1, 2, 8, .72)),
    linear-gradient(180deg, rgba(4, 3, 11, .5), transparent 29%, transparent 60%, rgba(3, 3, 10, .42));
  animation: apl-screen-enter 720ms cubic-bezier(.2, .9, .3, 1) both;
}

@keyframes apl-screen-enter {
  from { opacity: 0; transform: scale(1.012); }
  to { opacity: 1; transform: scale(1); }
}

.apl-panel::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: clamp(.5rem, 1.5vh, .9rem);
  left: 50%;
  width: clamp(.9rem, 2.2vh, 1.25rem);
  aspect-ratio: 1;
  background: url("../assets/ui/hud/red-gem.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 .65rem rgba(199, 34, 68, .78));
  transform: translateX(-50%);
  pointer-events: none;
}

.apl-panel__scan {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, transparent 0 68%, rgba(10, 5, 16, .48) 100%);
  pointer-events: none;
}

.apl-brand {
  display: flex;
  align-items: center;
  align-self: start;
  gap: clamp(.65rem, 1.4vw, 1rem);
  width: fit-content;
  padding: .25rem .75rem .3rem .2rem;
  border-bottom: 1px solid rgba(220, 176, 88, .42);
  background: linear-gradient(90deg, rgba(4, 5, 14, .72), transparent);
}
.apl-brand__emblem {
  width: clamp(2.8rem, 7.5vh, 5.2rem);
  filter: drop-shadow(0 0 .9rem rgba(84, 136, 235, .45));
}
.apl-brand__copy { display: grid; gap: .18rem; min-width: 0; }
.apl-brand__mark {
  color: #e8c878;
  font-family: var(--font-display);
  font-size: clamp(.68rem, 1.55vh, .9rem);
  letter-spacing: .34em;
  text-shadow: 0 2px 10px #000;
}

.apl-hero-copy {
  place-self: center;
  width: min(86vw, 60rem);
  padding: clamp(.8rem, 2.2vh, 1.5rem) clamp(1rem, 3vw, 2.2rem);
  text-align: center;
  text-shadow: 0 3px 18px #000;
  transform: translateY(3vh);
}
.apl-hero-copy__rule {
  display: block;
  width: min(38vw, 17rem);
  height: 1px;
  margin: 0 auto clamp(.65rem, 1.5vh, 1rem);
  background: linear-gradient(90deg, transparent, #e0b55e 25%, #fff0a9 50%, #e0b55e 75%, transparent);
  box-shadow: 0 0 .8rem rgba(224, 181, 94, .5);
}
.apl-brand__title {
  margin: 0;
  color: #f1d894;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.2vh, 3.7rem);
  letter-spacing: .14em;
  line-height: 1.05;
  text-transform: uppercase;
}
.apl-subtitle {
  max-width: 52rem;
  margin: clamp(.55rem, 1.6vh, 1rem) auto 0;
  color: #d8cdb8;
  font-size: clamp(.72rem, 1.7vh, 1rem);
  line-height: 1.5;
}

.apl-loading-deck {
  position: relative;
  justify-self: center;
  width: min(92vw, 76rem);
  padding: clamp(.65rem, 1.7vh, 1rem) clamp(.8rem, 2.2vw, 1.7rem) clamp(.7rem, 1.8vh, 1.05rem);
  border: 10px solid transparent;
  border-image: url("../assets/ui/hud/panel-frame.svg") 30 / 10px stretch;
  background:
    repeating-linear-gradient(116deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 8px),
    linear-gradient(155deg, rgba(12, 14, 24, .94), rgba(4, 5, 11, .96) 58%, rgba(18, 7, 12, .95));
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, .72), inset 0 0 3rem rgba(87, 15, 29, .18);
}

.apl-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.25rem, .7vw, .55rem); margin-bottom: clamp(.5rem, 1.3vh, .78rem); }
.apl-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .34rem;
  min-width: 0;
  padding: clamp(.3rem, .9vh, .48rem) .32rem;
  border: 5px solid transparent;
  border-image: url("../assets/ui/hud/hud-slot-frame.svg") 18 / 5px stretch;
  background: rgba(3, 4, 9, .72);
  color: #aa8d58;
}
.apl-group b { color: #7e1b31; font-size: .88rem; }
.apl-group small { overflow: hidden; font-size: .53rem; letter-spacing: .11em; text-overflow: ellipsis; white-space: nowrap; }

.apl-progress__track {
  position: relative;
  height: clamp(.72rem, 2.2vh, 1rem);
  overflow: hidden;
  border: 1px solid #74552e;
  clip-path: polygon(.45rem 0, calc(100% - .45rem) 0, 100% 50%, calc(100% - .45rem) 100%, .45rem 100%, 0 50%);
  background: #020308;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .95), 0 0 0 3px rgba(8, 9, 15, .9);
}
.apl-progress__fill {
  width: var(--apl-progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, #173c89 0%, #337bd4 48%, #d2a94f 86%, #f0d581 100%);
  box-shadow: 0 0 .8rem rgba(68, 122, 205, .42);
  transition: width 90ms linear;
}
.apl-progress__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .28) 49%, transparent 60%);
  animation: apl-progress-shine 1.8s linear infinite;
  pointer-events: none;
}
@keyframes apl-progress-shine {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}
.apl-progress__meta { display: flex; justify-content: center; gap: 1rem; margin-top: .58rem; font-family: var(--font-mono); font-size: clamp(.62rem, 1.55vh, .76rem); }
.apl-status { overflow: hidden; color: #c7bca7; text-overflow: ellipsis; white-space: nowrap; }
.apl-percent { color: #d9bd7d; font-variant-numeric: tabular-nums; text-align:center; }
.apl-panel.is-error .apl-percent { color: #ff9b91; }
.apl-panel.is-complete .apl-status { color: #9ee5a7; }
.apl-panel.is-complete .apl-progress__shine { animation: none; opacity: 0; }
.apl-panel.is-error .apl-status { color: #ff9b91; }
.apl-retry { display: block; min-width: 10rem; margin: .55rem auto 0; }
.apl-retry[hidden] { display: none; }

@media (orientation: landscape) and (max-height: 420px) {
  .apl-panel { padding: .55rem .8rem .5rem; }
  .apl-panel::after { top: .25rem; width: .78rem; }
  .apl-brand { gap: .4rem; padding: .12rem .5rem .16rem .1rem; }
  .apl-brand__emblem { width: clamp(1.9rem, 8vh, 2.5rem); }
  .apl-brand__mark { font-size: clamp(.5rem, 2vh, .66rem); }
  .apl-hero-copy { padding: .25rem .7rem; transform: none; }
  .apl-hero-copy__rule { margin-bottom: .3rem; }
  .apl-brand__title { font-size: clamp(.9rem, 4.5vh, 1.28rem); }
  .apl-subtitle { margin-top: .25rem; font-size: clamp(.52rem, 2vh, .65rem); }
  .apl-loading-deck { width: min(94vw, 62rem); padding: .4rem .65rem .42rem; border-width: 7px; border-image-width: 7px; }
  .apl-groups { gap: .2rem; margin-bottom: .34rem; }
  .apl-group { padding: .18rem .2rem; border-width: 4px; border-image-width: 4px; }
  .apl-progress__track { height: .6rem; }
  .apl-progress__meta { margin-top: .22rem; font-size: .54rem; }
  .apl-retry { min-width: 8rem; margin-top: .3rem; }
}

/* -------------------------------------------------------------
   9. MODAL
   ------------------------------------------------------------- */
.modal-root {
  position: fixed;
  inset: 0;
  /* Onay modallari karakter, topluluk ve diger tum oyun panellerinin
     uzerinde acilmalidir (topluluk katmani z-index 1500 kullanir). */
  z-index: 10000;
  pointer-events: none;
}

.modal-root--open {
  pointer-events: auto;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(4, 2, 9, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--t-base) ease-out;
}

.modal-overlay--visible {
  opacity: 1;
}

.modal-panel {
  width: min(88vw, 26rem);
  padding: clamp(1.5rem, 4vw, 2.2rem);
  text-align: center;
  border: 1px solid var(--c-gold-dim);
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    rgba(24, 14, 38, 0.98) 0%,
    rgba(9, 7, 20, 0.98) 100%
  );
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75),
    inset 0 0 50px rgba(107, 18, 32, 0.22);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--t-base) cubic-bezier(0.2, 0.9, 0.3, 1);
}

.modal-overlay--visible .modal-panel {
  transform: translateY(0) scale(1);
}

.modal-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.modal-message {
  margin: 0 0 1.6rem;
  font-size: clamp(0.85rem, 2vw, 0.98rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.modal-message--stack p {
  margin: 0;
}

.modal-message--stack p + p {
  margin-top: 0.7rem;
  color: var(--c-gold);
}

.modal-panel--legal {
  width: min(92vw, 58rem);
  max-height: min(88dvh, 52rem);
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 2.8vw, 1.8rem);
  text-align: left;
}

.modal-panel--legal .modal-title {
  flex: 0 0 auto;
  text-align: center;
}

.legal-document {
  min-height: 0;
  margin: 0 0 1rem;
  padding: 0 clamp(0.25rem, 1vw, 0.75rem) 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-gold-dim) rgba(4, 2, 9, 0.55);
  color: var(--c-text-dim);
}

.legal-document__updated {
  margin: 0 0 1rem;
  text-align: center;
  color: var(--c-gold-dim);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
}

.legal-document__intro,
.legal-document__section {
  font-size: clamp(0.78rem, 1.35vw, 0.94rem);
  line-height: 1.62;
  letter-spacing: 0.015em;
  text-transform: none;
}

.legal-document__intro {
  margin: 0 0 1rem;
  color: var(--c-text);
}

.legal-document__section {
  margin: 0;
  padding: 0.8rem 0;
  border-top: 1px solid rgba(138, 106, 44, 0.22);
  white-space: pre-line;
}

.legal-document__section::first-line {
  color: var(--c-gold);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.modal-panel--legal .modal-actions {
  flex: 0 0 auto;
  justify-content: center;
}

@media (orientation: landscape) and (max-height: 620px), (max-width: 700px) {
  .modal-overlay { padding: .25rem; }
  .modal-panel {
    width: min(96vw, 32rem);
    max-height: calc(100% - .5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: clamp(.65rem, 3vh, 1rem);
  }
  .modal-message { margin-bottom: .75rem; }
}

/* -------------------------------------------------------------
   10. file:// UYARI EKRANI (bkz. js/protocolGuard.js)
   ------------------------------------------------------------- */
.app--warning {
  display: grid;
  place-items: center;
  padding: 1rem;
  background: radial-gradient(
      ellipse at 50% 35%,
      rgba(107, 18, 32, 0.35) 0%,
      rgba(7, 4, 13, 0) 60%
    ),
    linear-gradient(180deg, #0d0a1c 0%, #07040d 100%);
}

.protocol-warning {
  width: min(92%, 40rem);
}

.protocol-warning__text {
  margin: 0 0 1rem;
  font-size: clamp(0.88rem, 2vw, 1rem);
  line-height: 1.65;
  color: var(--c-text);
}

.protocol-warning__hint {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(138, 106, 44, 0.35);
  font-size: clamp(0.78rem, 1.8vw, 0.9rem);
  line-height: 1.6;
  color: var(--c-text-dim);
}

/* -------------------------------------------------------------
   11. YARDIMCI SINIFLAR & ERISILEBILIRLIK
   ------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------
   [hidden] GARANTISI
   -------------------------------------------------------------
   Tarayicinin varsayilan `[hidden] { display: none }` kurali,
   `.ui-button { display: inline-flex }` gibi SINIF secicileri
   tarafindan eziliyordu; bu yuzden hidden=true yapilan butonlar
   (Demirci GERI, Tuccar GERI) gorunur kaliyordu.
   ------------------------------------------------------------- */
[hidden] {
  display: none !important;
}