/* =========================================================
   VELAR2 / FINAL CLEAN CSS
   Hero + Topbar + Laptop foreground scale birbiriyle uyumlu.
   Eski hero/topbar override blokları yoktur.
========================================================= */

@font-face {
  font-family: "Trajan Regular";
  src: url("../assets/fonts/trajan-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Accia Piano Bold";
  src: url("../assets/fonts/accia-piano-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Binary ITC Std Light";
  src:
    local("Binary ITC Std Light"),
    local("BinaryITCStd-Light"),
    url("../assets/fonts/binary-itc-std-light.otf") format("opentype"),
    url("../assets/fonts/binary-itc-std-light.ttf") format("truetype"),
    url("../assets/fonts/binary-itc-std-light") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================
   1) RESET / TOKENS
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #08050d;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  font-family: "Montserrat", Arial, sans-serif;
  color: #f7f2ec;
  background: #08050d;
}

/* =========================
   CUSTOM SCROLLBAR / AZAMET2

   Premium, ince ve sakin:
   - track: koyu şarap-siyah
   - thumb: bronz / amber
   - hover: hafif parlaklık
   - genişlik değişmez
========================= */

/* Firefox */
html {
  scrollbar-width: thin;

  scrollbar-color:
    #9a632b
    #120608;
}

/* Chromium / Edge / Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background:
    linear-gradient(
      180deg,
      #120608 0%,
      #090304 100%
    );

  border-left:
    1px solid
    rgba(211, 158, 78, 0.07);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  min-height: 62px;

  border:
    2px solid
    #120608;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      #b87935 0%,
      #8a4f25 48%,
      #63301c 100%
    );

  box-shadow:
    inset 0 1px 0
      rgba(255, 226, 164, 0.26),
    inset 0 -1px 0
      rgba(43, 11, 8, 0.52),
    0 0 7px
      rgba(185, 105, 42, 0.10);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      #d09445 0%,
      #a9632e 50%,
      #75391f 100%
    );

  box-shadow:
    inset 0 1px 0
      rgba(255, 235, 183, 0.34),
    inset 0 -1px 0
      rgba(45, 11, 8, 0.52),
    0 0 9px
      rgba(211, 131, 54, 0.18);
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active {
  background:
    linear-gradient(
      180deg,
      #c1833d 0%,
      #955326 54%,
      #622d1a 100%
    );
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: #090304;
}


body.menu-lock {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

img,
video {
  display: block;
  max-width: 100%;
}

:root {
  /* Büyük desktop / monitor topbar yüksekliği */
  --header-height: 68px;

  --page-max: 1320px;
  --nav-max: 1220px;
  --content-gutter: clamp(18px, 4vw, 56px);

  --bg: #08050d;
  --panel: rgba(14, 9, 20, 0.58);

  --gold: #cda85e;
  --gold-bright: #f0d18c;
  --gold-soft: #e6c78e;
  --gold-line: rgba(218, 188, 130, 0.34);

  --wine: #35060c;
  --wine-light: #64131a;

  --text: #f7f2ec;
  --text-soft: rgba(247, 242, 236, 0.70);
  --text-faint: rgba(247, 242, 236, 0.46);

  --border: rgba(255, 255, 255, 0.09);
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.34);

  /*
    Sayfa üzerindeki foreground UI'nın yeni desktop base ölçüsü:
    eski tasarımın %80'i.
  */
  --foreground-scale: 0.80;

  /*
    Topbar ayrı sistemdir.
    Büyük desktopta kendi orijinal ölçüsünde kalır.
  */
  --nav-scale: 1;

  /*
    Footer ayrı ölçekte tutulur.
    Büyük desktop %100, laptop %80.
  */
  --footer-scale: 1;
}

/* =========================
   2) FULLSCREEN MEDIA

   SAYFA / BACKGROUND KURALI:
   - Her ana sayfa viewport yüksekliğinde sabittir.
   - JPEG ve video backgroundlar hiçbir foreground scale almaz.
   - Her zaman kendi section'ını tamamen COVER eder.
========================= */
.page-section {
  position: relative;

  width: 100%;
  height: 100svh;
  min-height: 100svh;

  overflow: hidden;
}

.section-bg,
.hero-fallback,
.hero-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

.section-bg {
  z-index: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-fallback,
.hero-video,
.start-video {
  object-fit: cover;
  object-position: center;
}

.hero-fallback {
  z-index: 0;

  opacity: 1;

  pointer-events: none;
  user-select: none;

  transition:
    opacity 420ms ease;
}

.hero-video {
  z-index: 0;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 420ms ease;
}

.hero-video.is-playing {
  opacity: 1;
}

.hero-section.is-video-playing .hero-fallback {
  opacity: 0;
}

.hero-fallback.is-missing {
  visibility: hidden;
}

/*
  Özellikle iOS / WebKit'te arka plan videosunun üzerinde
  native play / media kontrol katmanlarının görünmesini engeller.
*/
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-play-button,
.hero-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
}

.hero-video-mobile {
  display: none;
}

.media-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* =========================
   2.1) AZAMET2 / CINEMATIC PRELOADER

   Daha premium, daha az "UI":
   - logo ana odak
   - devasa ghost crest
   - ince mimari köşeler
   - metalik enerji hattı progress
   - yükleme sonunda merkez ışığı + iki perde açılışı
========================= */
html.is-preloading,
html.is-preloading body {
  overflow: hidden;
}

.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;

  display: grid;
  place-items: center;

  overflow: hidden;

  background:
    radial-gradient(
      ellipse 48% 33% at 50% 45%,
      rgba(112, 20, 20, 0.20) 0%,
      rgba(59, 8, 12, 0.09) 42%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 76% 42% at 50% 112%,
      rgba(125, 39, 17, 0.10),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #080304 0%,
      #050203 47%,
      #030102 100%
    );

  opacity: 1;
  visibility: visible;

  transition:
    opacity 760ms ease,
    visibility 760ms ease;
}

.site-preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.58) 0%,
      transparent 23%,
      transparent 77%,
      rgba(0, 0, 0, 0.58) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.22) 0%,
      transparent 24%,
      transparent 72%,
      rgba(0, 0, 0, 0.44) 100%
    );

  pointer-events: none;
}

.site-preloader::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;

  width: 2px;
  height: 0;

  transform: translate(-50%, -50%);

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(255, 223, 151, 0.90),
      transparent
    );

  box-shadow:
    0 0 22px rgba(231, 170, 83, 0.36),
    0 0 54px rgba(144, 39, 23, 0.16);

  opacity: 0;

  transition:
    height 240ms ease,
    opacity 180ms ease;

  pointer-events: none;
}

.site-preloader.is-leaving::after {
  height: 72vh;
  opacity: 1;

  animation:
    preloader-exit-flash
    620ms
    cubic-bezier(.2, .8, .2, 1)
    forwards;
}

/* Dev, çok düşük opaklıklı marka izi */
.preloader-ghost-logo {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 1;

  width: min(980px, 76vw);

  transform: translate(-50%, -50%) scale(1.08);

  opacity: 0.028;

  filter:
    grayscale(1)
    contrast(1.2)
    brightness(1.4)
    blur(0.2px);

  pointer-events: none;

  animation:
    preloader-ghost-breathe
    5.6s
    ease-in-out
    infinite;
}

.preloader-ghost-logo img {
  width: 100%;
  height: auto;
}

/* Sinematik perdeler */
.preloader-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;

  width: calc(50% + 1px);

  will-change: transform;

  transition:
    transform 760ms cubic-bezier(.78, 0, .22, 1);
}

.preloader-curtain-left {
  left: 0;

  background:
    radial-gradient(
      ellipse 72% 56% at 100% 47%,
      rgba(90, 12, 17, 0.12),
      transparent 69%
    ),
    linear-gradient(
      100deg,
      rgba(3, 1, 2, 0.98) 0%,
      rgba(7, 2, 4, 0.95) 78%,
      rgba(17, 4, 6, 0.91) 100%
    );

  box-shadow:
    inset -1px 0 0 rgba(212, 155, 73, 0.06);
}

.preloader-curtain-right {
  right: 0;

  background:
    radial-gradient(
      ellipse 72% 56% at 0% 47%,
      rgba(90, 12, 17, 0.12),
      transparent 69%
    ),
    linear-gradient(
      260deg,
      rgba(3, 1, 2, 0.98) 0%,
      rgba(7, 2, 4, 0.95) 78%,
      rgba(17, 4, 6, 0.91) 100%
    );

  box-shadow:
    inset 1px 0 0 rgba(212, 155, 73, 0.06);
}

.preloader-curtain::before {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;

  width: min(170px, 11vw);

  opacity: 0.34;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(203, 144, 67, 0.07) 24%,
      rgba(109, 28, 22, 0.08) 50%,
      rgba(203, 144, 67, 0.04) 76%,
      transparent
    );

  pointer-events: none;
}

.preloader-curtain-left::before {
  right: 0;

  clip-path:
    polygon(
      100% 0,
      100% 100%,
      54% 83%,
      76% 65%,
      58% 50%,
      76% 35%,
      54% 17%
    );
}

.preloader-curtain-right::before {
  left: 0;

  clip-path:
    polygon(
      0 0,
      0 100%,
      46% 83%,
      24% 65%,
      42% 50%,
      24% 35%,
      46% 17%
    );
}

.site-preloader.is-leaving .preloader-curtain-left {
  transform: translateX(-101.5%);
}

.site-preloader.is-leaving .preloader-curtain-right {
  transform: translateX(101.5%);
}

/* Ana sahne */
.preloader-core {
  position: relative;
  z-index: 6;

  width: min(760px, calc(100vw - 36px));

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  transform: translateY(-1.2vh);

  transition:
    opacity 330ms ease,
    transform 620ms cubic-bezier(.22, .68, .2, 1),
    filter 330ms ease;
}

.site-preloader.is-leaving .preloader-core {
  opacity: 0;

  transform:
    translateY(-1.2vh)
    scale(1.022);

  filter: blur(1.2px);
}

/* Üst micro-brand satırı */
.preloader-eyebrow {
  width: min(460px, 72vw);

  margin-bottom: 24px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  gap: 14px;
}

.preloader-eyebrow span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(205, 154, 77, 0.32)
    );
}

.preloader-eyebrow span:last-child {
  transform: rotate(180deg);
}

.preloader-eyebrow b {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 7px;
  font-weight: 650;
  line-height: 1;

  letter-spacing: 0.28em;
  text-indent: 0.28em;
  white-space: nowrap;

  color: rgba(216, 179, 116, 0.42);
}

/* Logo sahnesi: kutu yok, yalnızca köşe işaretleri */
.preloader-logo-stage {
  position: relative;

  width: min(590px, 82vw);
  min-height: 220px;

  display: grid;
  place-items: center;

  margin-bottom: 16px;
}

.preloader-logo-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  width: 86%;
  height: 58%;

  transform: translate(-50%, -50%);

  background:
    radial-gradient(
      ellipse at center,
      rgba(152, 31, 21, 0.22) 0%,
      rgba(87, 12, 15, 0.105) 44%,
      transparent 72%
    );

  filter: blur(22px);

  animation:
    preloader-logo-aura
    4.4s
    ease-in-out
    infinite;

  pointer-events: none;
}

.preloader-corner {
  position: absolute;

  width: 34px;
  height: 34px;

  opacity: 0.34;

  pointer-events: none;
}

.preloader-corner::before,
.preloader-corner::after {
  content: "";
  position: absolute;

  background:
    linear-gradient(
      90deg,
      rgba(218, 171, 91, 0.72),
      rgba(115, 43, 26, 0.08)
    );
}

.preloader-corner::before {
  width: 34px;
  height: 1px;
}

.preloader-corner::after {
  width: 1px;
  height: 34px;
}

.preloader-corner-tl {
  left: 0;
  top: 0;
}

.preloader-corner-tr {
  right: 0;
  top: 0;

  transform: scaleX(-1);
}

.preloader-corner-bl {
  left: 0;
  bottom: 0;

  transform: scaleY(-1);
}

.preloader-corner-br {
  right: 0;
  bottom: 0;

  transform: scale(-1);
}

.preloader-logo-wrap {
  position: relative;
  isolation: isolate;

  width: clamp(320px, 31vw, 480px);
}

.preloader-logo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;

  background:
    linear-gradient(
      110deg,
      transparent 33%,
      transparent 42%,
      rgba(255, 230, 170, 0.07) 45%,
      rgba(255, 248, 220, 0.88) 50%,
      rgba(236, 177, 84, 0.22) 55%,
      transparent 61%,
      transparent 100%
    );

  background-size: 290% 100%;
  background-position: 138% 0;

  -webkit-mask:
    url("../assets/logo/logo.png")
    center / contain
    no-repeat;
  mask:
    url("../assets/logo/logo.png")
    center / contain
    no-repeat;

  mix-blend-mode: screen;

  animation:
    preloader-logo-sweep
    4.5s
    ease-in-out
    infinite;

  pointer-events: none;
}

.preloader-logo {
  position: relative;
  z-index: 1;

  width: 100%;
  height: auto;

  filter:
    drop-shadow(0 21px 38px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 11px rgba(135, 28, 19, 0.13));
}

/* Copy */
.preloader-copy {
  margin-bottom: 30px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 9px;

  font-family: "Montserrat", Arial, sans-serif;
  text-transform: uppercase;
}

.preloader-copy span {
  font-size: 8px;
  font-weight: 650;
  line-height: 1;

  letter-spacing: 0.30em;
  text-indent: 0.30em;

  color: rgba(211, 164, 84, 0.49);
}

.preloader-copy strong {
  font-size: clamp(10px, 0.86vw, 12px);
  font-weight: 750;
  line-height: 1;

  letter-spacing: 0.25em;
  text-indent: 0.25em;

  color: rgba(245, 222, 179, 0.90);

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.78);
}

/* Progress = ince metalik enerji hattı */
.preloader-progress-shell {
  width: min(490px, 80vw);
}

.preloader-progress {
  position: relative;

  width: 100%;
  height: 1px;

  overflow: visible;

  background:
    linear-gradient(
      90deg,
      rgba(83, 29, 21, 0.18),
      rgba(177, 113, 52, 0.24),
      rgba(83, 29, 21, 0.18)
    );
}

.preloader-progress::before,
.preloader-progress::after {
  content: "";
  position: absolute;
  top: 50%;

  width: 54px;
  height: 1px;

  transform: translateY(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(202, 147, 70, 0.20)
    );
}

.preloader-progress::before {
  right: calc(100% + 14px);
}

.preloader-progress::after {
  left: calc(100% + 14px);

  transform:
    translateY(-50%)
    rotate(180deg);
}

.preloader-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;

  width: 0%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      #7e3820 0%,
      #b16a31 42%,
      #e0ad5a 76%,
      #f4d68e 100%
    );

  box-shadow:
    0 0 7px rgba(218, 151, 64, 0.31);

  transition: width 190ms linear;
}

.preloader-progress-light {
  position: absolute;
  top: 50%;
  left: 0%;

  width: 7px;
  height: 7px;

  transform:
    translate(-50%, -50%)
    rotate(45deg);

  border: 1px solid rgba(255, 231, 178, 0.90);

  background: #d9a650;

  box-shadow:
    0 0 7px rgba(250, 215, 143, 0.80),
    0 0 18px rgba(191, 87, 32, 0.30);

  transition: left 190ms linear;
}

.preloader-meta {
  width: 100%;

  margin-top: 13px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 7px;
  font-weight: 600;
  line-height: 1;

  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: rgba(217, 187, 140, 0.34);
}

.preloader-meta strong {
  font-size: 8px;
  font-weight: 750;

  color: rgba(237, 199, 123, 0.62);
}

/* En altta çok küçük açılış işareti */
.preloader-launch-mark {
  margin-top: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 7px;
  font-weight: 650;
  line-height: 1;

  letter-spacing: 0.19em;

  color: rgba(199, 158, 94, 0.27);
}

.preloader-launch-mark i {
  width: 4px;
  height: 4px;

  transform: rotate(45deg);

  border: 1px solid rgba(204, 158, 82, 0.42);
}

/* Sis + seyrek kor atmosferi
   - sis logonun önüne geçmez
   - ember sayısı az ve rastgele hissi verir
   - ekranı "oyun launcher" gibi kalabalıklaştırmaz
*/
.preloader-fog {
  position: absolute;
  inset: 0;
  z-index: 3;

  overflow: hidden;
  pointer-events: none;

  opacity: 1;

  transition:
    opacity 360ms ease;
}

.site-preloader.is-leaving .preloader-fog {
  opacity: 0;
}

.preloader-fog span {
  position: absolute;

  display: block;

  border-radius: 50%;

  filter: blur(46px);

  opacity: 0.18;

  will-change: transform, opacity;
}

.preloader-fog-back span:first-child {
  left: -12vw;
  bottom: 2vh;

  width: 62vw;
  height: 20vw;

  background:
    radial-gradient(
      ellipse at center,
      rgba(104, 20, 20, 0.34) 0%,
      rgba(66, 10, 14, 0.16) 48%,
      transparent 74%
    );

  animation:
    preloader-fog-drift-left
    17s
    ease-in-out
    infinite
    alternate;
}

.preloader-fog-back span:last-child {
  right: -10vw;
  top: 12vh;

  width: 52vw;
  height: 17vw;

  background:
    radial-gradient(
      ellipse at center,
      rgba(84, 17, 19, 0.26) 0%,
      rgba(48, 8, 12, 0.13) 48%,
      transparent 74%
    );

  animation:
    preloader-fog-drift-right
    19s
    ease-in-out
    infinite
    alternate;
}

.preloader-fog-front {
  z-index: 4;
}

.preloader-fog-front span {
  opacity: 0.10;
  filter: blur(36px);
}

.preloader-fog-front span:first-child {
  left: 16vw;
  bottom: -3vh;

  width: 46vw;
  height: 13vw;

  background:
    radial-gradient(
      ellipse at center,
      rgba(190, 74, 27, 0.16) 0%,
      rgba(104, 22, 18, 0.08) 48%,
      transparent 74%
    );

  animation:
    preloader-fog-drift-center
    21s
    ease-in-out
    infinite
    alternate;
}

.preloader-fog-front span:last-child {
  right: 8vw;
  bottom: 11vh;

  width: 34vw;
  height: 10vw;

  background:
    radial-gradient(
      ellipse at center,
      rgba(216, 99, 36, 0.10) 0%,
      rgba(100, 24, 18, 0.05) 45%,
      transparent 75%
    );

  animation:
    preloader-fog-drift-small
    15s
    ease-in-out
    infinite
    alternate;
}

.preloader-embers {
  position: absolute;
  inset: 0;
  z-index: 5;

  overflow: hidden;
  pointer-events: none;
}

.preloader-embers span {
  position: absolute;
  bottom: -14px;

  width: 3px;
  height: 7px;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 225, 154, 0.95) 0%,
      rgba(232, 128, 50, 0.82) 42%,
      rgba(165, 48, 24, 0.20) 78%,
      transparent 100%
    );

  box-shadow:
    0 0 7px rgba(226, 108, 35, 0.25),
    0 0 14px rgba(167, 50, 24, 0.10);

  opacity: 0;

  will-change: transform, opacity;

  animation:
    preloader-ember-rise
    11s
    linear
    infinite;
}

.preloader-embers span:nth-child(1) {
  left: 7%;
  animation-delay: -1.8s;
  animation-duration: 12.4s;
}

.preloader-embers span:nth-child(2) {
  left: 18%;
  animation-delay: -8.0s;
  animation-duration: 14.2s;
  transform: scale(0.72);
}

.preloader-embers span:nth-child(3) {
  left: 31%;
  animation-delay: -4.4s;
  animation-duration: 11.8s;
  transform: scale(0.86);
}

.preloader-embers span:nth-child(4) {
  left: 45%;
  animation-delay: -10.2s;
  animation-duration: 15.2s;
  transform: scale(0.66);
}

.preloader-embers span:nth-child(5) {
  left: 58%;
  animation-delay: -2.9s;
  animation-duration: 13.6s;
  transform: scale(0.80);
}

.preloader-embers span:nth-child(6) {
  left: 71%;
  animation-delay: -7.2s;
  animation-duration: 12.8s;
  transform: scale(0.70);
}

.preloader-embers span:nth-child(7) {
  left: 84%;
  animation-delay: -5.5s;
  animation-duration: 14.8s;
  transform: scale(0.82);
}

.preloader-embers span:nth-child(8) {
  left: 94%;
  animation-delay: -11.0s;
  animation-duration: 16.0s;
  transform: scale(0.62);
}

@keyframes preloader-logo-aura {
  0%,
  100% {
    opacity: 0.38;
    transform:
      translate(-50%, -50%)
      scale(0.96);
  }

  50% {
    opacity: 0.72;
    transform:
      translate(-50%, -50%)
      scale(1.035);
  }
}

@keyframes preloader-logo-sweep {
  0%,
  58% {
    background-position: 138% 0;
    opacity: 0;
  }

  64% {
    opacity: 0.48;
  }

  78% {
    background-position: -42% 0;
    opacity: 0.72;
  }

  84%,
  100% {
    background-position: -42% 0;
    opacity: 0;
  }
}

@keyframes preloader-ghost-breathe {
  0%,
  100% {
    opacity: 0.020;
    transform:
      translate(-50%, -50%)
      scale(1.05);
  }

  50% {
    opacity: 0.038;
    transform:
      translate(-50%, -50%)
      scale(1.095);
  }
}

@keyframes preloader-ember-rise {
  0% {
    opacity: 0;

    transform:
      translate3d(0, 0, 0)
      rotate(4deg)
      scale(0.62);
  }

  12% {
    opacity: 0.34;
  }

  48% {
    opacity: 0.27;

    transform:
      translate3d(-9px, -42vh, 0)
      rotate(15deg)
      scale(0.84);
  }

  78% {
    opacity: 0.12;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(15px, -92vh, 0)
      rotate(24deg)
      scale(0.52);
  }
}

@keyframes preloader-fog-drift-left {
  0% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  100% {
    transform:
      translate3d(56px, -12px, 0)
      scale(1.08);
  }
}

@keyframes preloader-fog-drift-right {
  0% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  100% {
    transform:
      translate3d(-44px, 15px, 0)
      scale(1.07);
  }
}

@keyframes preloader-fog-drift-center {
  0% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  100% {
    transform:
      translate3d(34px, -9px, 0)
      scale(1.06);
  }
}

@keyframes preloader-fog-drift-small {
  0% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  100% {
    transform:
      translate3d(-26px, 8px, 0)
      scale(1.05);
  }
}

@keyframes preloader-exit-flash {
  0% {
    opacity: 0;
    height: 0;
  }

  28% {
    opacity: 1;
    height: 72vh;
  }

  100% {
    opacity: 0;
    height: 100vh;
  }
}


/* =========================
   2.1.1) CINEMATIC POLISH PASS
   v37: mevcut tasarımı bozmadan son %5-10 kalite dokunuşu
========================= */

/* Çok hafif "film gate" iç çizgileri */
.preloader-stage-line {
  position: absolute;
  top: 50%;

  width: clamp(54px, 6.4vw, 92px);
  height: 1px;

  transform: translateY(-50%);

  opacity: 0.20;

  pointer-events: none;
}

.preloader-stage-line-left {
  left: 6%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(217, 166, 82, 0.52)
    );
}

.preloader-stage-line-right {
  right: 6%;

  background:
    linear-gradient(
      270deg,
      transparent,
      rgba(217, 166, 82, 0.52)
    );
}

/* Açılış sıralaması: aynı anda "pat" diye gelmek yerine sessiz stagger */
.preloader-eyebrow,
.preloader-logo-stage,
.preloader-copy,
.preloader-progress-shell,
.preloader-launch-mark {
  opacity: 0;
  will-change: transform, opacity, filter;

  animation:
    preloader-element-in
    760ms
    cubic-bezier(.22, .68, .2, 1)
    forwards;
}

.preloader-eyebrow {
  transform: translateY(7px);
  animation-delay: 70ms;
}

.preloader-logo-stage {
  transform: translateY(9px) scale(0.992);
  animation-delay: 150ms;
}

.preloader-copy {
  transform: translateY(7px);
  animation-delay: 280ms;
}

.preloader-progress-shell {
  transform: translateY(6px);
  animation-delay: 390ms;
}

.preloader-launch-mark {
  transform: translateY(5px);
  animation-delay: 500ms;
}

/* Logo sahnesine çok hafif, tek eksenli bir derinlik hissi */
.preloader-logo-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  width: 62%;
  height: 72%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(240, 187, 92, 0.030) 0%,
      rgba(141, 34, 22, 0.020) 46%,
      transparent 72%
    );

  filter: blur(18px);

  pointer-events: none;
}

/* Logo kendi nefesini alıyor ama zoom yapmıyor */
.preloader-logo {
  animation:
    preloader-logo-breathe
    5.2s
    ease-in-out
    infinite;
}

/* Progress ucunu daha "mücevher/enerji çekirdeği" gibi yap */
.preloader-progress-light::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  width: 18px;
  height: 18px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 232, 178, 0.20) 0%,
      rgba(226, 156, 67, 0.08) 42%,
      transparent 72%
    );

  filter: blur(1px);

  pointer-events: none;
}

.preloader-progress-light::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  width: 24px;
  height: 1px;

  transform:
    translate(-50%, -50%)
    rotate(-45deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 236, 191, 0.44),
      transparent
    );

  opacity: 0.52;

  pointer-events: none;
}

/* Status metni biraz daha rafine */
.preloader-meta span {
  transition:
    opacity 220ms ease,
    color 220ms ease;
}

.preloader-meta strong {
  text-shadow:
    0 0 10px rgba(227, 164, 71, 0.10);
}

/* %100 / çıkış anındaki kısa premium pulse */
.site-preloader.is-leaving .preloader-progress-fill {
  animation:
    preloader-progress-complete
    520ms
    ease-out
    forwards;
}

.site-preloader.is-leaving .preloader-progress-light {
  animation:
    preloader-core-flare
    520ms
    ease-out
    forwards;
}

.site-preloader.is-leaving .preloader-ghost-logo {
  animation:
    preloader-ghost-exit
    620ms
    cubic-bezier(.2, .8, .2, 1)
    forwards;
}

/* Perde açılırken üst/alt çok hafif exposure hissi */
.site-preloader.is-leaving {
  animation:
    preloader-screen-lift
    760ms
    ease
    forwards;
}

/* Köşeler kapanışta içeri doğru "çekilip" kaybolsun */
.site-preloader.is-leaving .preloader-corner,
.site-preloader.is-leaving .preloader-stage-line {
  opacity: 0;

  transition:
    opacity 220ms ease;
}

/* Bir miktar optik keskinlik: logo sahnesi çok koyu ekranda kaybolmasın */
.preloader-copy strong,
.preloader-eyebrow b,
.preloader-launch-mark,
.preloader-meta {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

@keyframes preloader-element-in {
  0% {
    opacity: 0;
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes preloader-logo-breathe {
  0%,
  100% {
    filter:
      drop-shadow(0 21px 38px rgba(0, 0, 0, 0.75))
      drop-shadow(0 0 11px rgba(135, 28, 19, 0.13))
      brightness(1);
  }

  50% {
    filter:
      drop-shadow(0 21px 38px rgba(0, 0, 0, 0.75))
      drop-shadow(0 0 14px rgba(158, 39, 21, 0.18))
      brightness(1.025);
  }
}

@keyframes preloader-progress-complete {
  0% {
    filter: brightness(1);
    box-shadow:
      0 0 7px rgba(218, 151, 64, 0.31);
  }

  42% {
    filter: brightness(1.5);
    box-shadow:
      0 0 10px rgba(255, 212, 125, 0.55),
      0 0 24px rgba(194, 87, 31, 0.20);
  }

  100% {
    filter: brightness(1.08);
    box-shadow:
      0 0 8px rgba(218, 151, 64, 0.30);
  }
}

@keyframes preloader-core-flare {
  0% {
    transform:
      translate(-50%, -50%)
      rotate(45deg)
      scale(1);
  }

  36% {
    transform:
      translate(-50%, -50%)
      rotate(45deg)
      scale(1.55);

    box-shadow:
      0 0 10px rgba(255, 229, 171, 0.95),
      0 0 27px rgba(218, 141, 53, 0.42);
  }

  100% {
    transform:
      translate(-50%, -50%)
      rotate(45deg)
      scale(1.05);
  }
}

@keyframes preloader-ghost-exit {
  0% {
    opacity: 0.028;
    transform:
      translate(-50%, -50%)
      scale(1.08);
  }

  34% {
    opacity: 0.072;
    transform:
      translate(-50%, -50%)
      scale(1.105);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(1.15);
  }
}

@keyframes preloader-screen-lift {
  0% {
    filter: brightness(1);
  }

  38% {
    filter: brightness(1.045);
  }

  100% {
    filter: brightness(1);
  }
}


@media (max-width: 768px) {
  .preloader-core {
    width: calc(100vw - 24px);
    transform: translateY(-2vh);
  }

  .preloader-eyebrow {
    width: min(78vw, 300px);
    margin-bottom: 18px;
  }

  .preloader-eyebrow b {
    font-size: 6px;
    letter-spacing: 0.20em;
    text-indent: 0.20em;
  }

  .preloader-logo-stage {
    width: min(88vw, 410px);
    min-height: 170px;
    margin-bottom: 13px;
  }

  .preloader-stage-line {
    width: 34px;
    opacity: 0.16;
  }

  .preloader-stage-line-left {
    left: 4%;
  }

  .preloader-stage-line-right {
    right: 4%;
  }

  .preloader-corner {
    width: 24px;
    height: 24px;
  }

  .preloader-corner::before {
    width: 24px;
  }

  .preloader-corner::after {
    height: 24px;
  }

  .preloader-logo-wrap {
    width: min(78vw, 330px);
  }

  .preloader-copy {
    gap: 8px;
    margin-bottom: 25px;
  }

  .preloader-copy span {
    font-size: 7px;
    letter-spacing: 0.21em;
    text-indent: 0.21em;
  }

  .preloader-copy strong {
    font-size: 9px;
    letter-spacing: 0.19em;
    text-indent: 0.19em;
  }

  .preloader-progress-shell {
    width: min(76vw, 320px);
  }

  .preloader-progress::before,
  .preloader-progress::after {
    width: 24px;
  }

  .preloader-launch-mark {
    margin-top: 27px;
    font-size: 6px;
  }

  .preloader-ghost-logo {
    width: 110vw;
  }

  .preloader-fog span {
    filter: blur(34px);
    opacity: 0.13;
  }

  .preloader-fog-front span {
    opacity: 0.07;
  }

  .preloader-embers span {
    width: 2px;
    height: 6px;
  }
}


/* =========================
   GLOBAL ATMOSPHERE LEAVES
   Tüm sayfalarda viewport'a sabit kalan dekoratif yaprak katmanı.
   Overlay/background üstünde, ana içeriklerin altında kalır.
========================= */
.hero-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 3;

  overflow: hidden;
  pointer-events: none;

  perspective: 900px;
  contain: layout paint;
}

.hero-leaf {
  position: absolute;
  left: var(--leaf-x);
  top: -14vh;

  width: var(--leaf-size);
  height: var(--leaf-size);

  opacity: 0;
  will-change: transform, opacity;

  animation:
    hero-leaf-fall
    var(--leaf-duration)
    linear
    var(--leaf-delay)
    infinite;
}

.hero-leaf > i {
  position: absolute;
  inset: 18% 0 auto;

  display: block;
  width: 100%;
  height: 62%;

  border-radius: 100% 0 100% 0;

  background:
    linear-gradient(
      145deg,
      var(--leaf-highlight) 0%,
      var(--leaf-mid) 48%,
      var(--leaf-dark) 100%
    );

  box-shadow:
    inset 0 0 0 1px rgba(255, 217, 139, 0.08),
    inset -3px -2px 5px rgba(28, 1, 5, 0.22),
    0 2px 5px rgba(0, 0, 0, 0.20);

  transform-origin: 50% 52%;

  animation:
    hero-leaf-sway
    var(--leaf-sway)
    ease-in-out
    infinite
    alternate;
}

/* Çok hafif damar; yaprak hissini güçlendirir. */
.hero-leaf > i::after {
  content: "";
  position: absolute;
  left: 12%;
  top: 54%;

  width: 77%;
  height: 1px;

  transform: rotate(-31deg);
  transform-origin: left center;

  background:
    linear-gradient(
      90deg,
      rgba(255, 224, 161, 0.02),
      rgba(255, 216, 139, 0.34),
      rgba(64, 8, 11, 0.08)
    );

  opacity: 0.55;
}

@keyframes hero-leaf-fall {
  0% {
    opacity: 0;
    transform:
      translate3d(0, -12vh, 0)
      rotate(var(--leaf-spin-start));
  }

  8% {
    opacity: var(--leaf-opacity);
  }

  42% {
    opacity: var(--leaf-opacity);
    transform:
      translate3d(var(--leaf-drift-mid), 42vh, 0)
      rotate(var(--leaf-spin-mid));
  }

  78% {
    opacity: calc(var(--leaf-opacity) * 0.86);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(var(--leaf-drift-end), 116vh, 0)
      rotate(var(--leaf-spin-end));
  }
}

@keyframes hero-leaf-sway {
  from {
    transform:
      rotateY(-52deg)
      rotateZ(-20deg)
      scaleX(0.82);
  }

  to {
    transform:
      rotateY(48deg)
      rotateZ(24deg)
      scaleX(1.05);
  }
}

/*
  Mobil performans:
  Sabit viewport üzerinde sürekli animasyon yapan yaprak katmanı kapalıdır.
  Masaüstü atmosferi korunur, telefonda scroll compositing yükü oluşmaz.
*/
@media (max-width: 768px) {
  .hero-atmosphere {
    display: none;
  }
}

/* =========================
   HERO / YENİ VİDEO RENK PAKETİ

   Yeni video sıcak amber / bronz / toprak tonlarında.
   Bu yüzden eski yoğun bordo perde HERO'dan tamamen ayrıldı.

   Hedef:
   - merkez ve gün batımı doğal kalsın
   - kenarlar sinematik biçimde kararsın
   - alt bölüm UI için güçlü ama nötr bir taban oluştursun
   - topbar şeffafken üst yazılar okunaklı kalsın
   - videonun kendi turuncu/altın ışığı korunmalı
========================= */
.hero-overlay {
  background:
    /* 1) ÜST RENK ATMOSFERİ
       Logo diline yakın koyu şarap + yanık amber.
       İlk %25-30 bölgede var, merkeze indikçe kaybolur. */
    linear-gradient(
      180deg,
      rgba(46, 8, 12, 0.36) 0%,
      rgba(54, 11, 12, 0.25) 8%,
      rgba(58, 14, 11, 0.14) 17%,
      rgba(46, 11, 9, 0.06) 25%,
      transparent 34%
    ),

    /* 2) SOL KENAR / ŞARAP TONU
       Merkeze yaklaşmadan önce tamamen söner. */
    radial-gradient(
      ellipse 46% 78% at -8% 47%,
      rgba(69, 8, 15, 0.48) 0%,
      rgba(61, 8, 13, 0.34) 34%,
      rgba(48, 7, 10, 0.17) 60%,
      rgba(35, 6, 8, 0.06) 76%,
      transparent 100%
    ),

    /* 3) SAĞ KENAR / ŞARAP + KAHVE
       Sağdaki gün batımını boğmamak için soldan biraz daha hafif. */
    radial-gradient(
      ellipse 44% 76% at 108% 46%,
      rgba(58, 8, 13, 0.40) 0%,
      rgba(53, 9, 11, 0.28) 36%,
      rgba(44, 8, 9, 0.14) 62%,
      rgba(34, 7, 8, 0.05) 78%,
      transparent 100%
    ),

    /* 4) NÖTR SİNEMATİK VIGNETTE
       Renkli kenarları destekler ama merkez %42-58 tamamen açık kalır. */
    linear-gradient(
      90deg,
      rgba(6, 3, 4, 0.42) 0%,
      rgba(8, 4, 5, 0.26) 10%,
      rgba(9, 5, 5, 0.10) 22%,
      transparent 36%,
      transparent 64%,
      rgba(9, 5, 5, 0.10) 78%,
      rgba(8, 4, 5, 0.26) 90%,
      rgba(6, 3, 4, 0.42) 100%
    ),

    /* 5) ALT FADE
       Sayaç ve CTA için okunabilir taban.
       Renk yerine çoğunlukla nötr koyu ton. */
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 42%,
      rgba(11, 5, 5, 0.06) 52%,
      rgba(10, 4, 5, 0.18) 64%,
      rgba(8, 3, 4, 0.39) 78%,
      rgba(5, 2, 3, 0.70) 100%
    ),

    /* 6) MERKEZ UI GÖLGESİ
       Panel gibi görünmez; sadece logo/tarih/sayaç kontrastını toparlar. */
    radial-gradient(
      ellipse 32% 40% at 50% 56%,
      rgba(9, 4, 4, 0.14) 0%,
      rgba(10, 4, 4, 0.09) 40%,
      rgba(11, 5, 5, 0.025) 72%,
      transparent 100%
    ),

    /* 7) ÇOK HAFİF SICAK BİRLEŞTİRİCİ TON
       Videonun doğal amber/bronzu korunur. */
    linear-gradient(
      180deg,
      rgba(89, 31, 17, 0.035),
      rgba(49, 12, 11, 0.045)
    );
}


/* =========================
   3) RESPONSIVE UI SCALE

   İKİ AYRI SİSTEM VAR:

   1) PAGE FOREGROUND
      Logo, başlık, tarih, sayaç, CTA, oyun tanıtım kartları
      ve footer içeriği.

      Büyük desktop = yeni base %80
      Laptop        = desktopun tekrar %80'i
                    = eski tasarımın toplam %64'ü

   2) TOP BAR
      Global foreground küçültmesinden bağımsızdır.
      Büyük desktop = %100
      Laptop        = %80

   Background JPEG/video bu sistemlerin hiçbirine dahil değildir.
========================= */

.foreground-scale {
  transform: scale(var(--foreground-scale));
  transform-origin: center center;
}

.nav-scale {
  transform: scale(var(--nav-scale));
  transform-origin: center center;
}

.footer-scale {
  transform: scale(var(--footer-scale));
  transform-origin: center center;
}

/* Laptop / compact ekran */
html.compact-screen {
  --foreground-scale: 0.64;

  /* Topbar kendi laptop oranını korur. */
  --nav-scale: 0.80;
  --header-height: 54px;

  /*
    Footer hedef ekran görüntüsündeki eski oranına döner:
    laptopta masaüstünün %80'i.
  */
  --footer-scale: 0.80;
}

/*
  Scale sonrası container'ın kullanılabilir yatay alanını geri verir.
  Sadece PAGE foreground elemanları.
*/
html.compact-screen .section-content,
html.compact-screen .hero-content {
  width: calc(100% / var(--foreground-scale));
  max-width: calc(var(--page-max) / var(--foreground-scale));
}

/* =========================
   4) TOP BAR
========================= */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;

  width: 100%;
  height: var(--header-height);

  /*
    HERO / 1. SAYFA:
    Topbar zemini görünmez.
    Sadece logo, menü ve buton video üzerinde kalır.
  */
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;

  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);

  transition:
    background 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease,
    backdrop-filter 320ms ease,
    -webkit-backdrop-filter 320ms ease;
}

/*
  HERO bittikten sonra ortaya çıkan koyu cam topbar.
  Mobile menu açıkken de okunabilir zemin korunur.
*/
.site-header.is-scrolled,
.site-header.is-open {
  background:
    linear-gradient(
      180deg,
      rgba(10, 5, 10, 0.93) 0%,
      rgba(16, 6, 11, 0.88) 100%
    );

  border-bottom-color: rgba(211, 161, 84, 0.18);

  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.34),
    inset 0 -1px 0 rgba(118, 21, 22, 0.11);

  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}

/*
  Grid'in dış geometrisi ASLA scale almaz.
  Böylece orta menü masaüstünde de laptopta da viewport merkezindedir.

  Sol ve sağ kolon birebir eşit:
  logo ve İndir butonu simetrik konumlanır.
*/
.nav-shell {
  width: min(var(--nav-max), calc(100% - 48px));
  height: 100%;
  margin: 0 auto;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  align-items: center;
  column-gap: 24px;
}

.nav-logo {
  grid-column: 1;

  width: 168px;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  justify-self: start;
}

.nav-logo img {
  width: 168px;
  max-height: 57px;

  object-fit: contain;

  filter:
    drop-shadow(0 7px 16px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 7px rgba(122, 28, 17, 0.08));
}

.nav-menu {
  grid-column: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  justify-self: center;

  /*
    Önceki aralık çok sıkıydı.
    Sadece küçük bir nefes artışı verildi.
  */
  gap: clamp(10px, 1vw, 18px);
}

.nav-menu > a,
.nav-social-trigger {
  position: relative;
  isolation: isolate;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  border: 0;
  border-radius: 4px;
  padding: 9px 10px;

  background: transparent;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;

  color: rgba(255, 248, 238, 0.82);

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.52);

  cursor: pointer;

  transition:
    color 180ms ease,
    text-shadow 180ms ease,
    transform 180ms ease;
}


/* Premium bordo hover yüzeyi */
.nav-menu > a::before,
.nav-social-trigger::before {
  content: "";
  position: absolute;
  inset: 2px 0;
  z-index: -1;

  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 3px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(104, 18, 22, 0.12) 22%,
      rgba(148, 47, 38, 0.19) 50%,
      rgba(104, 18, 22, 0.12) 78%,
      transparent 100%
    );

  opacity: 0;
  transform: scaleX(0.72);

  transition:
    opacity 180ms ease,
    transform 180ms ease,
    border-color 180ms ease;
}

/* İnce gold hover ışığı */
.nav-menu > a::after,
.nav-social-trigger::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;

  width: 0;
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(241, 207, 140, 0.96),
      transparent
    );

  box-shadow: 0 0 7px rgba(227, 189, 114, 0.30);

  transition: width 180ms ease;
}

.nav-menu > a:hover,
.nav-menu > a:focus-visible,
.nav-social-trigger:hover,
.nav-social-trigger:focus-visible {
  color: #ffe8b8;

  transform: translateY(-1px);

  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.70),
    0 0 9px rgba(224, 176, 85, 0.17);

  outline: none;
}

.nav-menu > a:hover::before,
.nav-menu > a:focus-visible::before,
.nav-social-trigger:hover::before,
.nav-social-trigger:focus-visible::before {
  opacity: 1;
  transform: scaleX(1);

  border-top-color: rgba(222, 184, 108, 0.11);
  border-bottom-color: rgba(125, 34, 31, 0.20);
}

.nav-menu > a:hover::after,
.nav-menu > a:focus-visible::after,
.nav-social-trigger:hover::after,
.nav-social-trigger:focus-visible::after {
  width: 58%;
}

/* =========================
   5) SOCIAL DROPDOWN
========================= */
.nav-social {
  position: relative;
}

.nav-social-trigger {
  gap: 6px;
}

/* Yazı karakteri üçgen yerine CSS chevron */
.nav-chevron {
  width: 7px;
  height: 7px;
  margin-top: -4px;

  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;

  transform: rotate(45deg);

  opacity: 0.72;

  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.social-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;

  min-width: 178px;
  padding: 8px;

  transform: translate(-50%, -8px);

  border: 1px solid rgba(222, 185, 110, 0.18);
  border-radius: 7px;

  background:
    linear-gradient(
      180deg,
      rgba(30, 8, 13, 0.985),
      rgba(11, 5, 8, 0.99)
    );

  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 160ms ease;
}

.social-dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 13px;
}

.social-dropdown a {
  display: block;
  padding: 11px 13px;

  border-radius: 4px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  color: rgba(255, 248, 238, 0.68);

  transition:
    color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.social-dropdown a:hover,
.social-dropdown a:focus-visible {
  color: #f5d795;

  background:
    linear-gradient(
      90deg,
      rgba(100, 17, 22, 0.13),
      rgba(180, 120, 55, 0.07)
    );

  transform: translateX(2px);
  outline: none;
}

@media (min-width: 769px) {
  .nav-social:hover .social-dropdown,
  .nav-social:focus-within .social-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate(-50%, 0);
  }

  .nav-social:hover .nav-chevron,
  .nav-social:focus-within .nav-chevron {
    opacity: 1;
    transform: translateY(3px) rotate(225deg);
  }
}

/* =========================
   6) CTA / BUTTON SYSTEM

   Hiyerarşi:
   - Hero primary: HEMEN KAYIT OL / altın dolu
   - Hero secondary: OYUN TANITIMI / koyu outline
   - Topbar download: kompakt metal/amber utility CTA

   Aynı görsel ağırlıkta iki ana buton kullanılmaz.
========================= */

/* ---------------------------------
   TOP BAR / OYUNU İNDİR
---------------------------------- */
.nav-download {
  grid-column: 3;

  position: relative;
  isolation: isolate;

  width: 168px;
  height: 44px;

  justify-self: end;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  overflow: hidden;

  border: 1px solid rgba(207, 153, 69, 0.62);
  border-radius: 5px;

  background:
    radial-gradient(
      ellipse at 50% -20%,
      rgba(172, 65, 30, 0.20),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(54, 13, 13, 0.84) 0%,
      rgba(25, 7, 8, 0.92) 100%
    );

  color: #f5dca9;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.62);

  box-shadow:
    0 9px 24px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 237, 197, 0.075);

  transition:
    transform 190ms cubic-bezier(.2, .75, .25, 1),
    border-color 190ms ease,
    color 190ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.nav-download::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;

  border: 1px solid rgba(255, 220, 151, 0.055);
  border-radius: 3px;

  pointer-events: none;
}

.nav-download::after {
  content: "";
  position: absolute;

  left: 50%;
  bottom: -18px;

  width: 78%;
  height: 34px;

  transform:
    translateX(-50%)
    scaleX(0.72);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(225, 163, 72, 0.28) 0%,
      rgba(158, 72, 30, 0.12) 48%,
      transparent 74%
    );

  filter: blur(7px);

  opacity: 0;

  transition:
    opacity 220ms ease,
    transform 280ms cubic-bezier(.2, .75, .25, 1);

  pointer-events: none;
}

.nav-download-icon {
  width: 14px;
  height: 14px;

  fill: none;
  stroke: #d9a959;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    stroke 190ms ease,
    transform 190ms ease;
}

.nav-download:hover,
.nav-download:focus-visible {
  transform:
    scale(var(--nav-scale))
    translateY(-2px);

  border-color: rgba(237, 190, 103, 0.92);

  color: #ffe8ba;

  background:
    radial-gradient(
      ellipse at 50% -20%,
      rgba(194, 86, 34, 0.18),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(62, 17, 15, 0.94) 0%,
      rgba(24, 8, 9, 0.98) 100%
    );

  box-shadow:
    0 13px 29px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(238, 190, 104, 0.035),
    0 0 20px rgba(169, 85, 35, 0.09),
    inset 0 1px 0 rgba(255, 241, 208, 0.12),
    inset 0 -10px 20px rgba(81, 20, 14, 0.08);

  outline: none;
}

.nav-download:hover::after,
.nav-download:focus-visible::after {
  opacity: 0.86;

  transform:
    translateX(-50%)
    scaleX(1);
}

.nav-download:hover .nav-download-icon,
.nav-download:focus-visible .nav-download-icon {
  stroke: #f2c978;

  transform: translateY(1px);
}

.nav-download:active {
  transform:
    scale(var(--nav-scale))
    translateY(0);

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.28),
    inset 0 2px 7px rgba(0, 0, 0, 0.20);
}



/* ---------------------------------
   HERO CTA / SHARED
---------------------------------- */
.hero-cta {
  position: relative;
  isolation: isolate;

  width: 330px;
  height: 74px;

  display: grid;
  grid-template-columns: 38px 1fr 20px;
  align-items: center;

  gap: 13px;

  padding: 0 20px;

  overflow: hidden;

  border-radius: 5px;

  font-family: "Montserrat", Arial, sans-serif;

  box-shadow:
    0 13px 31px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 242, 214, 0.07);

  transition:
    transform 210ms cubic-bezier(.2, .75, .25, 1),
    border-color 210ms ease,
    background 230ms ease,
    box-shadow 230ms ease;
}

.hero-cta::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;

  border: 1px solid rgba(255, 229, 177, 0.06);
  border-radius: 3px;

  pointer-events: none;
}

.hero-cta-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 50%;
}

.hero-cta-icon svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-cta-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 5px;

  text-align: left;
}

.hero-cta-copy strong {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.075em;
  white-space: nowrap;
}

.hero-cta-copy small {
  font-size: 9px;
  font-weight: 650;
  line-height: 1;

  letter-spacing: 0.15em;
  white-space: nowrap;
}

.hero-cta-arrow {
  font-size: 18px;
  line-height: 1;

  transition:
    transform 190ms ease,
    opacity 190ms ease;
}

.hero-cta:hover,
.hero-cta:focus-visible {
  transform: translateY(-3px);

  outline: none;
}

.hero-cta:hover .hero-cta-arrow,
.hero-cta:focus-visible .hero-cta-arrow {
  transform: translateX(3px);
}

.hero-cta:active {
  transform: translateY(0) scale(0.985);
}


/* ---------------------------------
   HERO PRIMARY / HEMEN KAYIT OL
---------------------------------- */
.hero-cta-primary {
  border: 1px solid rgba(252, 220, 151, 0.92);

  background:
    radial-gradient(
      ellipse at 50% -12%,
      rgba(255, 247, 215, 0.30),
      transparent 48%
    ),
    linear-gradient(
      180deg,
      #e6bd68 0%,
      #c38c39 52%,
      #8b5a20 100%
    );

  box-shadow:
    0 15px 34px rgba(0, 0, 0, 0.38),
    0 0 18px rgba(207, 133, 45, 0.13),
    inset 0 1px 0 rgba(255, 249, 222, 0.42),
    inset 0 -14px 23px rgba(89, 45, 10, 0.16);
}

.hero-cta-primary::before {
  content: "";
  position: absolute;
  top: -72%;
  left: -50%;
  z-index: 1;

  width: 28%;
  height: 245%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 250, 228, 0.10),
      rgba(255, 252, 235, 0.68),
      rgba(255, 250, 228, 0.10),
      transparent
    );

  opacity: 0;

  transform: skewX(-17deg);

  pointer-events: none;
}

.hero-cta-primary .hero-cta-icon {
  border:
    1px solid
    rgba(71, 31, 9, 0.20);

  background:
    rgba(64, 27, 8, 0.10);
}

.hero-cta-primary .hero-cta-icon svg {
  stroke: #3b1608;
}

.hero-cta-primary .hero-cta-copy strong {
  color: #2a0e06;
  text-shadow: 0 1px 0 rgba(255, 239, 194, 0.32);
}

.hero-cta-primary .hero-cta-copy small {
  color: rgba(52, 20, 7, 0.69);
}

.hero-cta-primary .hero-cta-arrow {
  color: rgba(50, 17, 6, 0.78);
}

.hero-cta-primary:hover,
.hero-cta-primary:focus-visible {
  border-color: #ffe5a5;

  background:
    radial-gradient(
      ellipse at 50% -12%,
      rgba(255, 250, 224, 0.38),
      transparent 49%
    ),
    linear-gradient(
      180deg,
      #edc875 0%,
      #ca963e 52%,
      #966324 100%
    );

  box-shadow:
    0 19px 42px rgba(0, 0, 0, 0.44),
    0 0 26px rgba(214, 139, 47, 0.19),
    inset 0 1px 0 rgba(255, 252, 234, 0.52);
}

.hero-cta-primary:hover::before,
.hero-cta-primary:focus-visible::before {
  opacity: 1;

  animation:
    hero-primary-sweep
    760ms
    cubic-bezier(.18, .72, .25, 1)
    1;
}

@keyframes hero-primary-sweep {
  from {
    left: -50%;
  }

  to {
    left: 132%;
  }
}


/* ---------------------------------
   HERO SECONDARY / OYUN TANITIMI
---------------------------------- */
.hero-cta-secondary {
  border:
    1px solid
    rgba(203, 157, 79, 0.66);

  background:
    radial-gradient(
      ellipse at 50% -12%,
      rgba(108, 28, 23, 0.14),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(34, 16, 15, 0.92) 0%,
      rgba(14, 7, 8, 0.96) 100%
    );

  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 237, 204, 0.045);
}

.hero-cta-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;

  background:
    radial-gradient(
      ellipse at center,
      rgba(111, 25, 22, 0.30) 0%,
      rgba(61, 13, 13, 0.13) 48%,
      transparent 73%
    );

  opacity: 0;
  transform: scale(0.72);

  transition:
    opacity 270ms ease,
    transform 360ms cubic-bezier(.2, .75, .25, 1);

  pointer-events: none;
}

.hero-cta-secondary .hero-cta-icon {
  border:
    1px solid
    rgba(221, 178, 100, 0.18);

  background:
    rgba(147, 83, 34, 0.055);
}

.hero-cta-secondary .hero-cta-icon svg {
  stroke: #d8aa60;
}

.hero-cta-secondary .hero-cta-copy strong {
  color: #f1d8aa;

  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.72);
}

.hero-cta-secondary .hero-cta-copy small {
  color: rgba(221, 190, 139, 0.58);
}

.hero-cta-secondary .hero-cta-arrow {
  color: rgba(226, 185, 107, 0.66);
}

.hero-cta-secondary:hover,
.hero-cta-secondary:focus-visible {
  border-color:
    rgba(235, 193, 112, 0.90);

  background:
    radial-gradient(
      ellipse at 50% -8%,
      rgba(130, 36, 26, 0.23),
      transparent 61%
    ),
    linear-gradient(
      180deg,
      rgba(49, 19, 17, 0.96) 0%,
      rgba(18, 8, 8, 0.98) 100%
    );

  box-shadow:
    0 18px 39px rgba(0, 0, 0, 0.42),
    0 0 20px rgba(119, 42, 23, 0.11),
    inset 0 1px 0 rgba(255, 238, 204, 0.07);
}

.hero-cta-secondary:hover::before,
.hero-cta-secondary:focus-visible::before {
  opacity: 1;
  transform: scale(1.08);
}

/* =========================
   7) MOBILE MENU BUTTON
========================= */
.mobile-menu-btn {
  display: none;

  width: 48px;
  height: 48px;

  border: 1px solid rgba(222, 195, 143, 0.24);
  border-radius: 7px;

  background: rgba(255, 255, 255, 0.03);

  cursor: pointer;
}

.mobile-menu-btn span {
  width: 18px;
  height: 2px;
  margin: 2px auto;
  display: block;

  border-radius: 999px;
  background: #fff;

  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

/* =========================
   8) HERO
========================= */
.hero-section {
  position: relative;
  isolation: isolate;

  display: grid;
  place-items: center;

  /*
    WEBP veya video henüz çizilememişse beyaz/boş frame görünmez.
    100svh sistemi özellikle korunuyor; 100dvh kullanılmıyor.
    Böylece mobil browser chrome açılıp kapanırken hero yüksekliği
    scroll esnasında sürekli büyüyüp küçülmez.
  */
  background: #090304;
}

.hero-content {
  position: relative;
  z-index: 4;

  width: min(1100px, calc(100% - 40px));

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding-top: calc(var(--header-height) + 2px);

  /* Hero foreground grubunu boyutları bozmadan hafif yukarı taşır. */
  top: -18px;

  text-align: center;
}

/* ---------------------------------
   HERO / SCROLL DISCOVERY CUE

   Raven benzeri alt merkez keşfet göstergesi.
   Hero foreground scale oranını korur:
   desktop ve laptopta mevcut sistemle birlikte küçülür.
---------------------------------- */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 19px;
  z-index: 6;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 7px;

  transform:
    translateX(-50%)
    scale(var(--foreground-scale));

  transform-origin: center bottom;

  color: rgba(236, 205, 145, 0.70);

  text-decoration: none;

  filter:
    drop-shadow(0 6px 16px rgba(0, 0, 0, 0.48));

  transition:
    color 200ms ease,
    filter 220ms ease;
}

.hero-scroll-label {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 8px;
  font-weight: 750;
  line-height: 1;

  letter-spacing: 0.29em;
  text-indent: 0.29em;
  text-transform: uppercase;

  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.76);
}

.hero-scroll-frame {
  position: relative;
  isolation: isolate;

  width: 62px;
  height: 52px;

  display: grid;
  place-items: center;

  animation:
    hero-scroll-float
    2.6s
    ease-in-out
    infinite;
}

/* İnce fantasy frame. */
.hero-scroll-frame::before {
  content: "";
  position: absolute;
  inset: 2px 7px 1px;
  z-index: -2;

  clip-path:
    polygon(
      50% 0%,
      100% 30%,
      100% 67%,
      50% 100%,
      0% 67%,
      0% 30%
    );

  background:
    linear-gradient(
      180deg,
      rgba(222, 170, 82, 0.46),
      rgba(106, 48, 25, 0.18)
    );

  box-shadow:
    0 0 13px rgba(186, 101, 39, 0.08);
}

.hero-scroll-frame::after {
  content: "";
  position: absolute;
  inset: 3px 8px 2px;
  z-index: -1;

  clip-path:
    polygon(
      50% 0%,
      100% 30%,
      100% 67%,
      50% 100%,
      0% 67%,
      0% 30%
    );

  background:
    linear-gradient(
      180deg,
      rgba(15, 6, 7, 0.80),
      rgba(8, 3, 4, 0.54)
    );
}

.hero-scroll-frame img {
  width: 52px;
  height: 52px;

  object-fit: contain;

  pointer-events: none;

  filter:
    saturate(0.88)
    brightness(0.90)
    drop-shadow(0 0 6px rgba(210, 129, 49, 0.18));

  transition:
    filter 220ms ease,
    transform 220ms ease;
}

.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible {
  color: rgba(255, 224, 165, 0.96);

  filter:
    drop-shadow(0 8px 20px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 10px rgba(183, 93, 34, 0.12));

  outline: none;
}

.hero-scroll-cue:hover .hero-scroll-frame img,
.hero-scroll-cue:focus-visible .hero-scroll-frame img {
  transform: translateY(2px);

  filter:
    saturate(0.96)
    brightness(1.02)
    drop-shadow(0 0 8px rgba(226, 151, 64, 0.30));
}

@keyframes hero-scroll-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-frame {
    animation: none;
  }
}

/* Logo artık wrapper içinde: gerçek PNG şekline maskelenen metal ışık + yumuşak aura. */
.hero-logo-wrap {
  position: relative;
  isolation: isolate;

  width: clamp(500px, 42vw, 680px);
  max-width: 84vw;

  margin-bottom: 44px;

  transform: translateY(-10px);
}

.hero-logo {
  position: relative;
  z-index: 2;

  width: 100%;
  height: auto;

  filter:
    drop-shadow(0 17px 32px rgba(0, 0, 0, 0.50))
    drop-shadow(0 0 12px rgba(126, 21, 15, 0.14));
}

/* Arkada yavaş, düşük opaklıklı kızıl/altın nefes. */
.hero-logo-wrap::before {
  content: "";
  position: absolute;
  inset: 12% 7% 8%;
  z-index: 0;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(145, 27, 19, 0.30) 0%,
      rgba(211, 73, 28, 0.14) 38%,
      rgba(226, 153, 64, 0.055) 55%,
      transparent 74%
    );

  filter: blur(19px);
  opacity: 0.46;

  animation: hero-logo-aura 4.8s ease-in-out infinite;

  pointer-events: none;
}

/*
  Dikdörtgen bir halka yerine ışığı doğrudan PNG'nin gerçek şekline maskeliyoruz.
  Böylece metal logo yüzeyinin üzerinden gerçek bir highlight geçiyormuş gibi görünür.
*/
.hero-logo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;

  background:
    linear-gradient(
      108deg,
      transparent 34%,
      transparent 43%,
      rgba(255, 223, 147, 0.07) 46%,
      rgba(255, 247, 218, 0.92) 50%,
      rgba(239, 184, 90, 0.27) 54%,
      transparent 59%,
      transparent 100%
    );

  background-size: 285% 100%;
  background-position: 135% 0;

  -webkit-mask:
    url("../assets/logo/logo.png")
    center / contain
    no-repeat;
  mask:
    url("../assets/logo/logo.png")
    center / contain
    no-repeat;

  mix-blend-mode: screen;
  opacity: 0.68;

  animation: hero-logo-metal-sweep 6.4s ease-in-out infinite;

  pointer-events: none;
}

@keyframes hero-logo-aura {
  0%,
  100% {
    opacity: 0.34;
    transform: scale(0.96);
  }

  50% {
    opacity: 0.58;
    transform: scale(1.04);
  }
}

@keyframes hero-logo-metal-sweep {
  0%,
  62% {
    background-position: 135% 0;
    opacity: 0;
  }

  66% {
    opacity: 0.58;
  }

  80% {
    background-position: -38% 0;
    opacity: 0.74;
  }

  84%,
  100% {
    background-position: -38% 0;
    opacity: 0;
  }
}

/* =========================
   9) HERO / LAUNCH INFORMATION

   Logo ana marka öğesidir.
   Altındaki bilgiler daha küçük fakat daha net bir
   lansman hiyerarşisi içinde gruplanır.
========================= */
.hero-launch-panel {
  position: relative;
  isolation: isolate;

  width: min(720px, 94vw);

  display: flex;
  flex-direction: column;
  align-items: center;

  margin-top: -2px;
}

.hero-launch-panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 43%;

  z-index: -1;

  width: 118%;
  height: 126%;

  transform: translate(-50%, -50%);

  background:
    radial-gradient(
      ellipse at center,
      rgba(7, 3, 3, 0.30) 0%,
      rgba(8, 3, 4, 0.17) 42%,
      rgba(8, 3, 4, 0.05) 67%,
      transparent 79%
    );

  filter: blur(7px);

  pointer-events: none;
}


/* ---------------------------------
   1-99 EMEK OYUN YAPISI
---------------------------------- */
.hero-mode {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  margin-bottom: 40px;

  font-family: "Montserrat", Arial, sans-serif;

  line-height: 1;
  text-transform: uppercase;

  text-shadow:
    0 2px 7px rgba(0, 0, 0, 0.76);
}

.hero-mode strong {
  font-size: 29px;
  font-weight: 800;

  letter-spacing: 0.09em;

  color: #f0c977;
}

.hero-mode > span:not(.hero-mode-line) {
  font-size: 20px;
  font-weight: 650;

  letter-spacing: 0.16em;

  color: rgba(248, 229, 194, 0.84);
}

.hero-mode-line {
  width: 54px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(226, 179, 91, 0.70)
    );
}

.hero-mode-line:last-child {
  transform: rotate(180deg);
}


/* ---------------------------------
   OPENING INFO / COMPACT PILL

   Referans hiyerarşisine yakın:
   oyun yapısı -> açılış bilgisi -> CTA.
   Büyük tarih başlığı kullanılmaz; böylece alan nefes alır.
---------------------------------- */
.hero-opening-pill {
  width: 420px;
  min-height: 56px;

  padding: 0 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  border:
    1px solid
    rgba(211, 161, 82, 0.42);

  border-radius: 999px;

  background:
    radial-gradient(
      ellipse at 50% -35%,
      rgba(134, 41, 26, 0.19),
      transparent 62%
    ),
    rgba(17, 8, 9, 0.76);

  color: #f2d28d;

  box-shadow:
    0 9px 24px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 233, 190, 0.055);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.hero-opening-pill svg {
  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  fill: none;
  stroke: #d9a856;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-opening-pill > span {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  font-family: "Montserrat", Arial, sans-serif;

  line-height: 1;
  white-space: nowrap;
}

.hero-opening-pill strong {
  font-size: 14px;
  font-weight: 800;

  letter-spacing: 0.045em;

  color: #f5dca3;
}

.hero-opening-pill b {
  font-size: 14px;
  font-weight: 800;

  letter-spacing: 0.045em;

  color: #e6b85f;
}


/* =========================
   10) COUNTDOWN
========================= */
.countdown-title {
  width: min(590px, 92%);

  margin-top: 60px;
  margin-bottom: 16px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  gap: 11px;

  font-family: "Montserrat", Arial, sans-serif;

  font-size: 13px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.23em;
  text-transform: uppercase;

  color: rgba(220, 183, 112, 0.65);

  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.70);
}

.countdown-title span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(210, 162, 79, 0.34)
    );
}

.countdown-title span:last-child {
  transform: rotate(180deg);
}

.countdown {
  width: min(600px, 100%);

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;
}

.time-box {
  position: relative;
  isolation: isolate;

  height: 110px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border:
    1px solid
    rgba(199, 151, 75, 0.31);

  border-radius: 6px;

  background:
    radial-gradient(
      ellipse at 50% -8%,
      rgba(112, 31, 22, 0.14),
      transparent 56%
    ),
    linear-gradient(
      180deg,
      rgba(30, 12, 12, 0.86),
      rgba(11, 6, 7, 0.94)
    );

  box-shadow:
    0 11px 26px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 236, 200, 0.045);
}

/* Tek kısa ışık, kutunun üst kenarında sakince dolaşır. */
.time-box::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -34%;

  width: 34%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #f4cf86,
      transparent
    );

  box-shadow:
    0 0 8px rgba(229, 173, 78, 0.42);

  opacity: 0.70;

  animation:
    countdown-top-light
    6.8s
    ease-in-out
    infinite;

  pointer-events: none;
}

.time-box:nth-child(2)::before {
  animation-delay: -1.7s;
}

.time-box:nth-child(3)::before {
  animation-delay: -3.4s;
}

.time-box:nth-child(4)::before {
  animation-delay: -5.1s;
}

.time-box::after {
  content: "";
  position: absolute;
  inset: 3px;

  border:
    1px solid
    rgba(255, 228, 177, 0.025);

  border-radius: 3px;

  pointer-events: none;
}

@keyframes countdown-top-light {
  0%,
  12% {
    left: -34%;
    opacity: 0;
  }

  24% {
    opacity: 0.74;
  }

  72% {
    opacity: 0.74;
  }

  88%,
  100% {
    left: 100%;
    opacity: 0;
  }
}

.time-box strong {
  position: relative;
  z-index: 2;

  font-family: "Montserrat", Arial, sans-serif;

  font-size: 36px;
  font-weight: 750;
  line-height: 1;

  letter-spacing: 0.015em;

  color: #f5ddb0;

  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.80);
}

.time-box span {
  position: relative;
  z-index: 2;

  margin-top: 9px;

  font-family: "Montserrat", Arial, sans-serif;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: rgba(236, 217, 183, 0.56);
}


/* =========================
   10.1) HERO CTA
========================= */
.hero-actions {
  margin-top: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 16px;

  flex-wrap: wrap;
}

/* =========================
   11) GENERAL CONTENT
========================= */
.content-section {
  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    calc(var(--header-height) + 44px)
    var(--content-gutter)
    54px;
}

.section-content {
  position: relative;
  z-index: 4;

  width: min(980px, 100%);
  margin: 0 auto;
}

.section-content-wide {
  width: min(1180px, 100%);
}

.section-heading {
  position: relative;
  margin-bottom: 28px;
  text-align: center;
}

.section-index {
  position: absolute;
  left: 50%;
  top: -44px;

  transform: translateX(-50%);

  font-family: "Cormorant Garamond", serif;
  font-size: 82px;
  font-weight: 700;
  line-height: 1;

  color: rgba(255, 255, 255, 0.035);

  pointer-events: none;
}

.section-heading > p {
  margin-bottom: 8px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;

  color: var(--gold-soft);
}

.section-heading h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(42px, 4.5vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;

  color: #fff;
}

.heading-line {
  width: min(240px, 65%);
  height: 1px;
  margin: 18px auto 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold-line),
      transparent
    );
}
/* =========================
   11.0) CONTENT REVEAL
========================= */

.reveal-item {
  opacity: 0;
  transform: translateY(24px);

  transition:
    opacity 650ms ease,
    transform 720ms cubic-bezier(.22, 1, .36, 1);

  transition-delay: var(--reveal-delay, 0ms);

  will-change: opacity, transform;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* =========================
   11.1) OYUN TANITIMI / ACCORDION CARDS
========================= */
.overview-section {
  isolation: isolate;

  /* İkinci sayfa standart viewporttan yaklaşık %35 daha uzun. */
  height: 135svh;
  min-height: 135svh;
}

/*
  HERO -> AZAMET2 DÜNYASI geçişi.
  Saf siyah yerine sitedeki bordo/kahve tabanı kullanılır.
*/
.hero-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;

  height: 175px;

  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(18, 6, 7, 0.18) 26%,
      rgba(13, 4, 6, 0.58) 64%,
      #090304 100%
    );

  pointer-events: none;
}

.overview-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;

  height: 205px;

  background:
    linear-gradient(
      180deg,
      #090304 0%,
      rgba(12, 4, 6, 0.94) 20%,
      rgba(19, 6, 8, 0.72) 48%,
      rgba(23, 8, 8, 0.28) 76%,
      transparent 100%
    );

  pointer-events: none;
}

.overview-bg {
  /*
    Yeni ikinci sayfa görselinde sağdaki Sura ana görsel odağı.
    Arka planı eski sürüme göre biraz daha aydınlık ve renkli bırakıyoruz;
    okunabilirlik artık ağırlıklı olarak soldaki overlay ile sağlanıyor.
  */
  filter: grayscale(.26) contrast(1.10) brightness(.53);
  -webkit-filter: grayscale(.26) contrast(1.10) brightness(.53);
}

.overview-overlay {
  /*
    Asimetrik karartma:
    - sol: kartlar / başlık için güçlü koyu şarap-siyah
    - orta: kontrollü geçiş
    - sağ: Sura karakterinin yüzü ve zırhı daha açık kalır
  */
  background:
    radial-gradient(
      ellipse 58% 78% at 20% 50%,
      rgba(78, 18, 16, .16) 0%,
      rgba(38, 9, 10, .13) 46%,
      transparent 76%
    ),

    linear-gradient(
      90deg,
      rgba(4, 2, 3, .90) 0%,
      rgba(6, 2, 3, .82) 14%,
      rgba(9, 3, 4, .66) 30%,
      rgba(11, 4, 5, .44) 47%,
      rgba(10, 4, 5, .24) 62%,
      rgba(8, 3, 4, .12) 78%,
      rgba(6, 3, 4, .06) 100%
    ),

    linear-gradient(
      180deg,
      rgba(8, 4, 5, .34) 0%,
      rgba(8, 4, 5, .12) 24%,
      transparent 48%,
      rgba(5, 3, 4, .34) 82%,
      rgba(4, 2, 3, .48) 100%
    );
}

.overview-content {
  width: min(1240px, 100%);
  padding-top: 34px;
  padding-bottom: 28px;

  /*
    Kartlar ve başlık artık sağdaki karakterle yarışmıyor.
    Foreground scale korunarak bütün içerik grubu sola taşınır.
  */
  transform:
    translateX(calc(-6vw - 180px))
    scale(var(--foreground-scale));

  transform-origin: center center;
}

.overview-heading {
  margin-bottom: 42px;
  text-align: center;
}

.overview-heading > p {
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(219,177,101,.65);
}

.overview-heading h2 {
  font-family: "Accia Piano Bold", "Cormorant Garamond", serif;
  font-size: clamp(45px, 4.2vw, 64px);
  line-height: 1;
  letter-spacing: .035em;
  color: #f1dfbd;
  text-shadow: 0 4px 14px rgba(0,0,0,.88), 0 0 18px rgba(150,45,26,.10);
}

.overview-heading-line {
  width: min(520px, 62%);
  height: 18px;
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  align-items: center;
  gap: 9px;
}

.overview-heading-line span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210,170,100,.42));
}
.overview-heading-line span:last-child { transform: rotate(180deg); }
.overview-heading-line i {
  width: 9px;
  height: 9px;
  margin: 0 auto;
  transform: rotate(45deg);
  border: 1px solid rgba(221,184,112,.60);
  box-shadow: 0 0 0 3px rgba(163,85,38,.045), 0 0 9px rgba(187,116,48,.08);
}

.overview-cards {
  /*
    Raven referansındaki normal kart oranı yaklaşık 1:2.
    Yükseklik ekrana göre akar; toplam genişlik de bu yüksekliğe
    bağlı hesaplanır. Böylece 3 kartın her biri normal durumda
    yaklaşık 0.50 genişlik / 1.00 yükseklik oranında kalır.
  */
  /*
    v28:
    - kart yüksekliği v27'ye göre +%25
    - kart genişliği v27'ye göre +%15

    Yükseklik daha fazla arttığı için yeni en/boy oranı
    hâlâ uzun-dar karakterini korur.
  */
  --overview-card-height: clamp(812px, 102.5vh, 1000px);

  width: min(
    calc((var(--overview-card-height) * 1.38) + 32px),
    96vw
  );
  height: var(--overview-card-height);

  margin: 0 auto;

  display: flex;
  align-items: stretch;
  gap: 16px;
}

.overview-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  border: 1px solid rgba(184,156,113,.28);
  border-radius: 2px;
  background: #090809;
  box-shadow: 0 24px 54px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,238,201,.025);
  transition: flex-grow 520ms cubic-bezier(.22,.72,.20,1), border-color 320ms ease, box-shadow 360ms ease;
}

/* Raven'daki yana açılmanın ana kuralı */
.overview-card:hover,
.overview-card:focus-within {
  flex-grow: 1.58;
  border-color: rgba(222,175,94,.54);
  box-shadow: 0 28px 62px rgba(0,0,0,.46), 0 0 22px rgba(130,55,28,.09), inset 0 0 0 1px rgba(255,232,182,.035);
}

.overview-card-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) saturate(.10) contrast(1.08) brightness(.42);
  transform: scale(1.045);
  transition: filter 520ms cubic-bezier(.22,.72,.20,1), transform 800ms cubic-bezier(.22,.72,.20,1), opacity 180ms ease;
  will-change: filter, transform, opacity;
}

.overview-card:hover .overview-card-image,
.overview-card:focus-within .overview-card-image {
  filter: grayscale(0) saturate(1.04) contrast(1.04) brightness(.86);
  transform: scale(1.015);
}
.overview-card.is-switching .overview-card-image { opacity: .18; transform: scale(1.055); }

.overview-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5,4,5,.24), rgba(6,5,5,.07) 31%, rgba(7,5,5,.15) 50%, rgba(8,4,5,.62) 78%, rgba(5,2,3,.90)),
    linear-gradient(90deg, rgba(5,4,4,.28), transparent 24%, transparent 76%, rgba(5,4,4,.28));
  transition: background 420ms ease;
  pointer-events: none;
}
.overview-card:hover .overview-card-overlay,
.overview-card:focus-within .overview-card-overlay {
  background: linear-gradient(180deg, rgba(5,4,5,.10), rgba(6,5,5,.03) 34%, rgba(7,4,4,.09) 54%, rgba(25,7,7,.54) 79%, rgba(7,2,3,.90));
}

.overview-card-frame {
  position: absolute;
  inset: 4px;
  z-index: 3;
  border: 1px solid rgba(234,216,184,.09);
  pointer-events: none;
}
.overview-card-frame::before,
.overview-card-frame::after { content: ""; position: absolute; inset: 8px; }
.overview-card-frame::before {
  background:
    linear-gradient(#a98a58,#a98a58) left top/24px 1px no-repeat,
    linear-gradient(#a98a58,#a98a58) left top/1px 24px no-repeat,
    linear-gradient(#a98a58,#a98a58) right top/24px 1px no-repeat,
    linear-gradient(#a98a58,#a98a58) right top/1px 24px no-repeat,
    linear-gradient(#a98a58,#a98a58) left bottom/24px 1px no-repeat,
    linear-gradient(#a98a58,#a98a58) left bottom/1px 24px no-repeat,
    linear-gradient(#a98a58,#a98a58) right bottom/24px 1px no-repeat,
    linear-gradient(#a98a58,#a98a58) right bottom/1px 24px no-repeat;
  opacity: .28;
  transition: opacity 320ms ease;
}
.overview-card:hover .overview-card-frame::before,
.overview-card:focus-within .overview-card-frame::before { opacity: .72; }
.overview-card-frame::after { border: 1px solid rgba(255,235,197,.025); }

.overview-card-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 46px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.overview-card h3 {
  margin-bottom: 16px;

  font-family: "Binary ITC Std Light", Georgia, serif;
  font-size: clamp(26px, 1.9vw, 34px);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.06;
  letter-spacing: .018em;

  color: rgba(242,231,214,.88);

  text-shadow:
    0 4px 12px rgba(0,0,0,.92),
    0 0 14px rgba(0,0,0,.55);

  transition:
    color 300ms ease,
    transform 360ms ease,
    text-shadow 320ms ease;
}
.overview-card:hover h3,
.overview-card:focus-within h3 {
  color: #f5ddaa;
  transform: translateY(-2px);
  text-shadow: 0 4px 12px rgba(0,0,0,.90), 0 0 15px rgba(169,70,29,.16);
}

.overview-card-next {
  position: relative;
  width: 188px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: rgba(203,205,201,.48);
  cursor: pointer;
  pointer-events: auto;
  transition: color 240ms ease, transform 260ms cubic-bezier(.22,.72,.20,1), filter 260ms ease;
}
.overview-card-next:hover,
.overview-card-next:focus-visible { color: #ffe0a0; transform: translateX(3px); outline: none; }

.overview-arrow-img {
  position: relative;
  z-index: 2;

  width: 170px;
  height: auto;

  display: block;

  object-fit: contain;

  opacity: .52;

  filter:
    grayscale(1)
    brightness(1.15)
    sepia(.10)
    drop-shadow(0 0 0 transparent);

  transition:
    opacity 260ms ease,
    filter 280ms ease,
    transform 280ms cubic-bezier(.22,.72,.20,1);

  pointer-events: none;
  user-select: none;
}

.overview-card:hover .overview-arrow-img,
.overview-card:focus-within .overview-arrow-img {
  opacity: .92;

  filter:
    grayscale(0)
    brightness(1.08)
    sepia(.22)
    drop-shadow(0 0 8px rgba(203,110,38,.20));
}

.overview-card-next:hover .overview-arrow-img,
.overview-card-next:focus-visible .overview-arrow-img {
  transform: translateX(2px);
}



@media (max-width: 768px) {
  .overview-content {
    width: 100%;

    transform: scale(var(--foreground-scale));
    transform-origin: center center;
  }
  .overview-heading { margin-bottom: 26px; }
  .overview-heading > p { font-size: 8px; letter-spacing: .22em; }
  .overview-heading h2 { font-size: clamp(38px, 10vw, 48px); }
  .overview-heading-line { width: min(260px,72%); margin-top: 14px; }
  .overview-cards {
    --overview-card-height: auto;

    width: calc(100vw - 8px);
    height: min(663px,77.5svh);
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 20px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .overview-cards::-webkit-scrollbar { display: none; }
  .overview-card,
  .overview-card:hover,
  .overview-card:focus-within {
    flex: 0 0 min(90vw,357px);
    scroll-snap-align: center;
  }
  .overview-card-image {
    /*
      Üç büyük kart görselinde sürekli filter+transform için
      ayrı GPU layer ayırmak yerine sadece görsel değişim opacity'si
      optimize edilir. Görsel stil korunur.
    */
    will-change: opacity;
  }

  .overview-card-content { bottom: 30px; }
  .overview-card h3 { margin-bottom: 13px; font-size: 27px; }
  .overview-card-next { width: 160px; height: 60px; }
  .overview-arrow-img { width: 145px; }
}

/* =========================
   12) FOOTER / AZAMET2 PREMIUM

   Hedef ekran görüntüsündeki ölçü ve dağılım:
   - geniş, dengeli 3 kolon
   - solda marka
   - ortada hızlı menü
   - sağda sosyal medya
   - altta geniş copyright çizgisi
========================= */
.site-footer {
  position: relative;
  z-index: 4;
  isolation: isolate;

  width: 100%;
  height: 100%;
  min-height: 0;

  padding:
    48px
    var(--content-gutter)
    22px;

  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;

  overflow: hidden;

  border-top: 1px solid rgba(207, 151, 69, 0.20);

  background:
    radial-gradient(
      circle at 50% -22%,
      rgba(104, 17, 21, 0.19),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #180306 0%,
      #100204 46%,
      #070102 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 224, 160, 0.025),
    0 -24px 58px rgba(0, 0, 0, 0.30);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;

  width: min(1060px, 78vw);
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(111, 21, 22, 0.30) 15%,
      rgba(213, 164, 82, 0.70) 50%,
      rgba(111, 21, 22, 0.30) 85%,
      transparent
    );

  box-shadow:
    0 0 12px rgba(195, 126, 43, 0.10);
}

.footer-inner {
  width: min(1080px, 100%);
  margin: 0 auto;

  align-self: start;

  display: grid;

  grid-template-columns:
    1.35fr
    0.75fr
    0.85fr;

  gap: clamp(52px, 8vw, 110px);

  align-items: start;
}

.footer-brand img {
  width: 205px;
  margin-bottom: 14px;

  filter:
    drop-shadow(0 9px 20px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 10px rgba(114, 25, 17, 0.10));
}

.footer-brand p {
  margin-bottom: 18px;

  font-family: "Binary ITC Std Light", serif;
  font-size: 18px;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.45;

  color: rgba(230, 206, 177, 0.55);
}

.footer-badges {
  display: flex;
  align-items: center;

  gap: 10px;
  flex-wrap: wrap;
}

.footer-badges span {
  min-width: 78px;
  height: 34px;
  padding: 0 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(190, 132, 57, 0.22);
  border-radius: 4px;

  background:
    linear-gradient(
      180deg,
      rgba(104, 15, 18, 0.13),
      rgba(34, 5, 7, 0.10)
    );

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;

  color: rgba(213, 178, 118, 0.66);

  box-shadow:
    inset 0 1px 0 rgba(255, 231, 187, 0.025);
}

.footer-designer {
  margin-top: 18px;
  margin-bottom: 0 !important;

  font-family: "Binary ITC Std Light", serif !important;
  font-size: 17px !important;
  font-weight: 400;
  line-height: 1;

  letter-spacing: 0.06em;
  text-transform: uppercase;

  color: rgba(222, 199, 164, 0.55) !important;
}

.footer-designer a {
  color: rgba(207, 160, 86, 0.75);
}

.footer-column,
.footer-social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-column h3,
.footer-social h3 {
  margin-bottom: 20px;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: rgba(226, 190, 126, 0.76);
}

.footer-column a {
  margin-bottom: 10px;

  font-family: "Binary ITC Std Light", serif;
  font-size: 17px;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.2;

  color: rgba(232, 214, 193, 0.48);

  transition:
    color 170ms ease,
    transform 170ms ease,
    text-shadow 170ms ease;
}

.footer-column a:hover,
.footer-column a:focus-visible {
  color: #e5bd78;

  transform: translateX(4px);

  text-shadow:
    0 0 10px rgba(187, 92, 39, 0.12);

  outline: none;
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-social-link {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(203, 147, 67, 0.22);
  border-radius: 6px;

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(119, 23, 23, 0.16),
      transparent 58%
    ),
    rgba(31, 5, 7, 0.30);

  box-shadow:
    inset 0 1px 0 rgba(255, 230, 178, 0.025),
    0 7px 18px rgba(0, 0, 0, 0.14);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.footer-social-link img {
  width: 22px;
  height: 22px;

  object-fit: contain;

  filter:
    brightness(0)
    saturate(100%)
    invert(76%)
    sepia(33%)
    saturate(857%)
    hue-rotate(356deg)
    brightness(91%)
    contrast(86%);

  opacity: 0.72;

  transition:
    opacity 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}

.footer-social-discord img {
  transform: scale(1.08);
}

.footer-social-instagram img {
  transform: scale(0.96);
}

.footer-social-facebook img {
  transform: scale(0.92);
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  transform: translateY(-3px);

  border-color: rgba(226, 175, 90, 0.48);

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(147, 34, 28, 0.26),
      transparent 62%
    ),
    rgba(42, 7, 9, 0.54);

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.25),
    0 0 14px rgba(144, 49, 28, 0.10),
    inset 0 1px 0 rgba(255, 232, 188, 0.05);

  outline: none;
}

.footer-social-link:hover img,
.footer-social-link:focus-visible img {
  opacity: 1;

  filter:
    brightness(0)
    saturate(100%)
    invert(86%)
    sepia(24%)
    saturate(931%)
    hue-rotate(350deg)
    brightness(100%)
    contrast(91%);
}

.footer-bottom {
  width: min(1080px, 100%);
  margin: 40px auto 0;

  padding-top: 20px;
  padding-bottom: 4px;

  align-self: end;

  border-top: 1px solid rgba(201, 151, 74, 0.09);

  font-family: "Binary ITC Std Light", serif;
  font-size: 13px;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.035em;
  text-align: center;

  color: rgba(225, 202, 174, 0.34);
}

/* =========================
   15) MOBILE
========================= */

@media (max-width: 768px) {
  :root {
    --header-height: 64px;
    --foreground-scale: 1;
    --nav-scale: 1;
    --footer-scale: 1;
  }

  .foreground-scale,
  .nav-scale,
  .footer-scale {
    transform: none;
  }

  .site-header {
    height: var(--header-height);
  }

  .nav-shell {
    width: calc(100% - 24px);
    max-width: none;

    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
  }

  .nav-logo {
    grid-column: 2;
    grid-row: 1;
    z-index: 3;

    justify-self: end;
    justify-content: flex-end;
  }

  .nav-logo img {
    width: 122px;
    max-height: 52px;
  }

  .nav-download {
    display: none;
  }

  .mobile-menu-btn {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;

    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .nav-menu {
    position: fixed;
    inset: var(--header-height) 0 auto;

    width: 100%;
    max-height: calc(100svh - var(--header-height));
    padding: 24px 22px 28px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;

    overflow-y: auto;

    background:
      linear-gradient(
        180deg,
        rgba(25, 7, 12, 0.99),
        rgba(7, 4, 7, 0.995)
      );

    border-bottom: 1px solid rgba(226, 194, 135, 0.18);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-10px);

    transition:
      opacity 180ms ease,
      visibility 180ms ease,
      transform 180ms ease;
  }

  .site-header.is-open .nav-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-menu > a,
  .nav-social-trigger {
    width: 100%;
    min-height: 46px;
    padding: 14px 6px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.055);

    font-size: 12px;
  }

  .nav-social-trigger .nav-chevron {
    margin-left: auto;
  }

  .nav-menu > a::before,
  .nav-menu > a::after,
  .nav-social-trigger::before,
  .nav-social-trigger::after {
    display: none;
  }

  .nav-social {
    width: 100%;
  }

  .social-dropdown {
    position: static;

    width: 100%;
    min-width: 0;
    max-height: 0;
    padding: 0 0 0 16px;

    overflow: hidden;

    transform: none;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
      opacity 160ms ease,
      max-height 180ms ease,
      visibility 160ms ease;
  }

  .nav-social.is-open .social-dropdown {
    max-height: 180px;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-social.is-open .nav-chevron {
    opacity: 1;
    transform: translateY(3px) rotate(225deg);
  }

  .social-dropdown a {
    padding: 12px 8px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0;

    font-size: 11px;
  }

  .site-header.is-open .mobile-menu-btn span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .site-header.is-open .mobile-menu-btn span:nth-child(2) {
    opacity: 0;
  }

  .site-header.is-open .mobile-menu-btn span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .hero-video-desktop {
    display: none;
  }

  .hero-video-mobile {
    display: block;
  }

  /*
    Mobilde fullscreen <video> üzerinde CSS filter kullanmıyoruz.
    Büyük video katmanına filter uygulanması bazı mobil GPU'larda
    scroll sırasında resize/zoom hissi ve frame drop oluşturabiliyor.
    Renk atmosferi hero-overlay tarafından korunur.
  */
  .hero-video {
    filter: none;
    -webkit-filter: none;

    transform: none;

    backface-visibility: visible;
    -webkit-backface-visibility: visible;

    will-change: opacity;
  }

  .hero-fallback {
    object-position: center center;
  }

  /*
    Fixed header blur mobil tarayıcılarda pahalıdır.
    Aynı görünümü daha opak bir zeminle koruyoruz.
  */
  .site-header.is-scrolled,
  .site-header.is-open {
    background:
      linear-gradient(
        180deg,
        rgba(10, 5, 10, 0.985) 0%,
        rgba(16, 6, 11, 0.975) 100%
      );

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /*
    Hero logo masaüstündeki ağır sürekli glow/mask animasyonlarını
    mobilde statik premium görünüme çeviriyoruz.
  */
  .hero-logo-wrap::before {
    animation: none;
    opacity: 0.42;
    transform: scale(1);
  }

  .hero-logo-wrap::after {
    animation: none;
    opacity: 0;
  }

  .hero-scroll-frame {
    animation: none;
  }

  .hero-content {
    width: calc(100% - 24px);
    padding-top: calc(var(--header-height) + 8px);
    top: -10px;
  }

  .hero-scroll-cue {
    bottom: 14px;
    gap: 5px;
  }

  .hero-scroll-label {
    font-size: 7px;
  }

  .hero-scroll-frame {
    width: 54px;
    height: 46px;
  }

  .hero-scroll-frame img {
    width: 44px;
    height: 44px;
  }


  .hero-logo-wrap {
    width: min(76vw, 305px);
    max-width: none;

    margin-bottom: 34px;

    transform: translateY(-5px);
  }

  .hero-launch-panel {
    width: min(92vw, 360px);
  }

  .hero-mode {
    gap: 9px;
    margin-bottom: 28px;
  }

  .hero-mode-line {
    width: 27px;
  }

  .hero-mode strong {
    font-size: 15px;
  }

  .hero-mode > span:not(.hero-mode-line) {
    font-size: 12px;
    letter-spacing: 0.11em;
  }

  .hero-opening-pill {
    width: min(300px, 82vw);
    min-height: 44px;

    padding: 0 14px;

    gap: 8px;
  }

  .hero-opening-pill svg {
    width: 15px;
    height: 15px;

    flex-basis: 15px;
  }

  .hero-opening-pill > span {
    gap: 5px;
  }

  .hero-opening-pill strong,
  .hero-opening-pill b {
    font-size: 10px;
  }

  .countdown-title {
    width: min(320px, 90%);
    margin-top: 44px;
    margin-bottom: 14px;
    font-size: 8px;
    gap: 9px;
  }

  .countdown {
    width: min(340px, 92vw);
    gap: 8px;
  }

  .time-box {
    height: 72px;
  }

  .time-box strong {
    font-size: clamp(22px, 6vw, 26px);
  }

  .time-box span {
    margin-top: 7px;
    font-size: 7px;
    letter-spacing: 0.12em;
  }

  .hero-actions {
    width: 100%;
    margin-top: 30px;
    gap: 14px;
  }

  .hero-cta {
    width: min(330px, 88vw);
    height: 54px;

    grid-template-columns: 31px 1fr 16px;

    padding: 0 15px;

    gap: 10px;
  }

  .hero-cta-icon {
    width: 29px;
    height: 29px;
  }

  .hero-cta-copy strong {
    font-size: 11px;
  }

  .hero-cta-copy small {
    font-size: 6.3px;
  }

  .content-section {
    min-height: 100svh;

    align-items: flex-start;

    padding:
      calc(var(--header-height) + 62px)
      14px
      52px;
  }

  .section-content,
  .section-content-wide {
    width: 100%;
    max-width: none;
  }

  .section-heading {
    margin-bottom: 24px;
  }

  .section-heading h2 {
    font-size: clamp(40px, 12vw, 54px);
  }

  .section-index {
    top: -35px;
    font-size: 66px;
  }






  .site-footer {
    height: auto;
    min-height: 0;

    padding: 38px 20px 22px;

    display: block;
    overflow: visible;
  }

  .footer-bottom {
    margin-top: 30px;
    padding-top: 18px;
  }

  .site-footer {
    padding: 40px 20px 22px;
  }

  .footer-inner {
    width: 100%;
    max-width: none;

    grid-template-columns: 1fr;
    gap: 30px;

    text-align: center;
  }

  .footer-brand img {
    width: 190px;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-brand p {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-badges {
    justify-content: center;
  }

  .footer-column,
  .footer-social {
    align-items: center;
  }

  .footer-social-icons {
    justify-content: center;
  }

  .footer-bottom {
    width: 100%;
    max-width: none;
    margin-top: 30px;

    font-size: 12px;
  }
}

/* =========================
   16) REDUCED MOTION
========================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.has-reveal-motion .reveal-material {
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .hero-atmosphere {
    display: none;
  }

  .hero-logo-wrap::before,
  .hero-logo-wrap::after {
    animation: none !important;
  }

  .hero-fallback,
  .hero-video {
    transition: none !important;
  }
}

/* =========================
   BACKGROUND COLOR / SHARPNESS TUNING

   HERO:
   Yeni videonun kendi amber-bronz paleti zaten güçlü.
   Fazla saturation/contrast uygulanmaz.

   DİĞER JPEG / VİDEOLAR:
   Mevcut görüntü karakteri korunur.
========================= */
.hero-video {
  filter:
    contrast(1.04)
    saturate(1.025)
    brightness(0.985);

  -webkit-filter:
    contrast(1.04)
    saturate(1.025)
    brightness(0.985);

  image-rendering: auto;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transform: translateZ(0);

  will-change: opacity, filter;
}

.section-bg {
  filter:
    contrast(1.1)
    saturate(1.07)
    brightness(0.985);

  -webkit-filter:
    contrast(1.1)
    saturate(1.07)
    brightness(0.985);
}
.footer-designer {
  margin-top: 18px;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;

  letter-spacing: 0.11em;
  text-transform: uppercase;

  color: rgba(213, 178, 118, 0.34);
}

.footer-designer a {
  margin-left: 3px;

  color: rgba(222, 183, 111, 0.62);

  text-shadow:
    0 0 8px rgba(189, 112, 42, 0.08);

  transition:
    color 180ms ease,
    text-shadow 180ms ease;
}

.footer-designer a:hover,
.footer-designer a:focus-visible {
  color: rgba(239, 204, 139, 0.88);

  text-shadow:
    0 0 10px rgba(207, 143, 61, 0.18);

  outline: none;
}

/* V26 / AZAMET2 DÜNYASI BAŞLIK AYARI */
.overview-heading h2 {
  margin: 0;
}

/* Standalone footer: artık doğrudan AZAMET2 Dünyası bölümünün altında. */
.site-footer {
  height: auto;
}

@media (min-width: 769px) {
  .site-footer {
    min-height: 44svh;
  }
}


/* =========================
   17) ANASAYFA / KAYIT / İNDİR BİLGİLENDİRME MODALI

   Sade ve premium:
   - koyu bordo / siyah
   - ince antique gold çizgiler
   - gereksiz ikon / süs yok
   - üç farklı mesaj aynı modal içinde JS ile değişir
========================= */
body.site-notice-modal-open {
  overflow: hidden;
}

.site-notice-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;

  display: grid;
  place-items: center;

  padding: 22px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 200ms ease,
    visibility 200ms ease;
}

.site-notice-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.site-notice-backdrop {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      ellipse at center,
      rgba(85, 19, 18, 0.13),
      transparent 56%
    ),
    rgba(3, 1, 2, 0.77);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.site-notice-dialog {
  position: relative;
  isolation: isolate;
  z-index: 1;

  width: min(430px, calc(100vw - 32px));

  padding: 42px 38px 34px;

  display: flex;
  flex-direction: column;
  align-items: center;

  overflow: hidden;

  border: 1px solid rgba(208, 157, 78, 0.44);
  border-radius: 7px;

  background:
    radial-gradient(
      ellipse at 50% -12%,
      rgba(122, 31, 25, 0.16),
      transparent 53%
    ),
    linear-gradient(
      180deg,
      rgba(31, 9, 11, 0.985) 0%,
      rgba(16, 5, 7, 0.992) 56%,
      rgba(8, 3, 4, 0.998) 100%
    );

  box-shadow:
    0 30px 78px rgba(0, 0, 0, 0.56),
    0 0 24px rgba(110, 35, 23, 0.08),
    inset 0 1px 0 rgba(255, 235, 199, 0.065);

  text-align: center;

  opacity: 0;
  transform: translateY(12px) scale(0.985);

  transition:
    opacity 200ms ease,
    transform 250ms cubic-bezier(.2, .78, .22, 1);
}

.site-notice-dialog::before {
  content: "";
  position: absolute;
  inset: 7px;

  border: 1px solid rgba(227, 185, 111, 0.055);
  border-radius: 4px;

  pointer-events: none;
}

.site-notice-modal.is-open .site-notice-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.site-notice-close {
  position: absolute;
  top: 14px;
  right: 14px;

  width: 34px;
  height: 34px;

  border: 0;
  border-radius: 4px;

  background: transparent;

  cursor: pointer;

  transition:
    background 170ms ease,
    transform 170ms ease;
}

.site-notice-close span {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 15px;
  height: 1px;

  background: rgba(235, 206, 150, 0.58);
}

.site-notice-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.site-notice-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.site-notice-close:hover,
.site-notice-close:focus-visible {
  background: rgba(117, 27, 25, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.site-notice-mark {
  position: relative;

  width: 28px;
  height: 28px;

  margin-bottom: 17px;

  transform: rotate(45deg);

  border: 1px solid rgba(215, 164, 82, 0.48);

  background:
    linear-gradient(
      135deg,
      rgba(100, 21, 21, 0.34),
      rgba(26, 7, 8, 0.56)
    );

  box-shadow:
    0 0 14px rgba(166, 66, 30, 0.08);
}

.site-notice-mark::before {
  content: "";
  position: absolute;
  inset: 5px;

  border: 1px solid rgba(226, 184, 105, 0.11);
}

.site-notice-mark span {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 5px;
  height: 5px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: #d6a459;

  box-shadow:
    0 0 7px rgba(218, 167, 84, 0.25);
}

.site-notice-kicker {
  margin-bottom: 12px;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 7px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;

  color: rgba(208, 161, 87, 0.54);
}

.site-notice-dialog h2 {
  max-width: 330px;

  font-family: "Cormorant Garamond", serif;
  font-size: clamp(28px, 2.35vw, 35px);
  font-weight: 700;
  line-height: 1.06;

  color: #f0dfbd;

  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.70);
}

.site-notice-divider {
  width: min(250px, 76%);

  margin: 17px auto 18px;

  display: grid;
  grid-template-columns: 1fr 6px 1fr;
  align-items: center;

  gap: 9px;
}

.site-notice-divider span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(207, 158, 77, 0.29)
    );
}

.site-notice-divider span:last-child {
  transform: rotate(180deg);
}

.site-notice-divider i {
  width: 5px;
  height: 5px;

  margin: 0 auto;

  transform: rotate(45deg);

  border: 1px solid rgba(214, 165, 86, 0.42);
}

#siteNoticeText {
  max-width: 340px;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.72;

  color: rgba(240, 228, 211, 0.70);
}

.site-notice-date {
  min-height: 26px;

  margin-top: 18px;
  padding: 8px 13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-top: 1px solid rgba(209, 160, 78, 0.12);
  border-bottom: 1px solid rgba(209, 160, 78, 0.12);

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 8px;
  font-weight: 750;
  line-height: 1;

  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: rgba(229, 190, 120, 0.72);
}

.site-notice-confirm {
  min-width: 132px;
  height: 42px;

  margin-top: 23px;
  padding: 0 22px;

  border: 1px solid rgba(215, 165, 81, 0.46);
  border-radius: 4px;

  background:
    linear-gradient(
      180deg,
      rgba(53, 14, 14, 0.84),
      rgba(20, 7, 8, 0.96)
    );

  color: #ecd19a;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.15em;

  cursor: pointer;

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 236, 196, 0.05);

  transition:
    transform 170ms ease,
    border-color 170ms ease,
    color 170ms ease,
    background 170ms ease;
}

.site-notice-confirm:hover,
.site-notice-confirm:focus-visible {
  transform: translateY(-2px);

  border-color: rgba(235, 188, 98, 0.78);

  color: #ffe5b2;

  background:
    linear-gradient(
      180deg,
      rgba(65, 17, 16, 0.92),
      rgba(23, 8, 9, 0.98)
    );

  outline: none;
}

@media (max-width: 768px) {
  .site-notice-modal {
    padding: 15px;
  }

  .site-notice-dialog {
    width: min(390px, calc(100vw - 22px));
    padding: 40px 24px 29px;
  }

  .site-notice-dialog h2 {
    font-size: 29px;
  }

  #siteNoticeText {
    font-size: 11px;
  }

  .site-notice-date {
    font-size: 7px;
    letter-spacing: 0.12em;
  }
}

/* =========================
   FIXED LEFT-BOTTOM DISCORD CTA / CODE ONLY

   Site diliyle aynı:
   - koyu bordo / siyah gövde
   - antique gold çizgi
   - krem-altın tipografi
   - PNG yok
   - hover'da çok hafif metal ışık
========================= */
.discord-community-cta {
  position: fixed;
  left: 46px;
  bottom: 34px;
  z-index: 950;

  width: 332px;
  min-height: 92px;

  display: grid;
  grid-template-columns: 62px 1fr 32px;
  align-items: center;
  gap: 13px;

  padding: 13px 14px 13px 15px;

  overflow: hidden;
  isolation: isolate;

  border: 1px solid rgba(205, 151, 70, 0.68);
  border-radius: 6px;

  background:
    radial-gradient(
      ellipse at 20% 0%,
      rgba(126, 31, 25, 0.20),
      transparent 54%
    ),
    linear-gradient(
      135deg,
      rgba(48, 12, 14, 0.96) 0%,
      rgba(21, 7, 9, 0.98) 56%,
      rgba(10, 4, 6, 0.99) 100%
    );

  color: #f3d79d;

  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 235, 193, 0.075),
    inset 0 0 0 3px rgba(255, 225, 169, 0.018);

  text-decoration: none;

  transition:
    transform 190ms cubic-bezier(.2, .75, .25, 1),
    border-color 190ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

/* İnce iç çerçeve */
.discord-community-cta::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;

  border: 1px solid rgba(229, 190, 116, 0.095);
  border-radius: 3px;

  pointer-events: none;
}

/* İnce şerit ışık:
   Sayaçlardaki gibi çerçevenin KENARI boyunca dolaşır.
   İç yüzeyden sweep geçmez. */
.discord-community-cta::after {
  content: "";
  position: absolute;
  left: -66px;
  top: -1px;
  z-index: 4;

  width: 66px;
  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(214, 151, 66, 0.10) 18%,
      rgba(239, 195, 111, 0.62) 43%,
      rgba(255, 239, 190, 0.94) 55%,
      rgba(224, 163, 76, 0.48) 72%,
      transparent 100%
    );

  box-shadow:
    0 0 3px rgba(255, 224, 158, 0.48),
    0 0 8px rgba(205, 126, 48, 0.20);

  opacity: 0;

  transform-origin: left center;

  pointer-events: none;
  will-change: left, top, transform, opacity;

  animation:
    discord-community-border-strip
    7.4s
    linear
    infinite;
}

.discord-community-cta__icon {
  position: relative;
  z-index: 2;

  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(220, 171, 87, 0.44);
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 50% 28%,
      rgba(154, 44, 29, 0.28),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgba(67, 17, 18, 0.92),
      rgba(25, 7, 9, 0.96)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 235, 193, 0.08),
    0 0 0 4px rgba(193, 132, 53, 0.045);
}

.discord-community-cta__icon svg {
  width: 29px;
  height: 29px;

  fill: #e9bd69;

  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 6px rgba(200, 123, 45, 0.10));

  transition:
    fill 190ms ease,
    transform 210ms ease;
}

.discord-community-cta__copy {
  position: relative;
  z-index: 2;

  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  text-align: left;
}

.discord-community-cta__copy small {
  margin-bottom: 7px;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 7px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: rgba(218, 178, 109, 0.60);
}

.discord-community-cta__copy strong {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.035em;
  text-transform: uppercase;

  color: #f3d99f;

  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.72);
}

.discord-community-cta__copy em {
  margin-top: 7px;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 7px;
  font-weight: 600;
  font-style: normal;
  line-height: 1;

  letter-spacing: 0.10em;
  text-transform: uppercase;

  color: rgba(232, 211, 176, 0.43);
}

.discord-community-cta__arrow {
  position: relative;
  z-index: 2;

  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  border-left: 1px solid rgba(207, 152, 70, 0.13);
}

.discord-community-cta__arrow i {
  width: 8px;
  height: 8px;

  border-top: 1.5px solid rgba(235, 191, 107, 0.68);
  border-right: 1.5px solid rgba(235, 191, 107, 0.68);

  transform: rotate(45deg) translate(-1px, 1px);

  transition:
    transform 190ms ease,
    border-color 190ms ease;
}

.discord-community-cta:hover,
.discord-community-cta:focus-visible {
  transform: translateY(-3px);

  border-color: rgba(232, 185, 98, 0.90);

  background:
    radial-gradient(
      ellipse at 20% 0%,
      rgba(153, 43, 29, 0.26),
      transparent 56%
    ),
    linear-gradient(
      135deg,
      rgba(57, 15, 16, 0.98) 0%,
      rgba(24, 8, 10, 0.99) 56%,
      rgba(11, 4, 6, 1) 100%
    );

  box-shadow:
    0 19px 40px rgba(0, 0, 0, 0.44),
    0 0 20px rgba(142, 61, 31, 0.09),
    inset 0 1px 0 rgba(255, 240, 207, 0.10),
    inset 0 0 0 3px rgba(255, 225, 169, 0.024);

  outline: none;
}


.discord-community-cta:hover .discord-community-cta__icon svg,
.discord-community-cta:focus-visible .discord-community-cta__icon svg {
  fill: #f3cf83;
  transform: scale(1.055);
}

.discord-community-cta:hover .discord-community-cta__arrow i,
.discord-community-cta:focus-visible .discord-community-cta__arrow i {
  border-color: #f0ca7c;
  transform: rotate(45deg) translate(2px, -2px);
}

.discord-community-cta:active {
  transform: translateY(-1px) scale(0.992);
}

@keyframes discord-community-border-strip {
  /* ÜST: soldan sağa */
  0% {
    left: -66px;
    top: -1px;
    transform: rotate(0deg);
    opacity: 0;
  }

  4% {
    opacity: 0.68;
  }

  23% {
    left: calc(100% - 66px);
    top: -1px;
    transform: rotate(0deg);
    opacity: 0.68;
  }

  /* SAĞ: yukarıdan aşağı */
  25% {
    left: calc(100% - 1px);
    top: -1px;
    transform: rotate(90deg);
    opacity: 0.72;
  }

  48% {
    left: calc(100% - 1px);
    top: calc(100% - 66px);
    transform: rotate(90deg);
    opacity: 0.68;
  }

  /* ALT: sağdan sola */
  50% {
    left: calc(100% - 1px);
    top: calc(100% - 1px);
    transform: rotate(180deg);
    opacity: 0.72;
  }

  73% {
    left: 66px;
    top: calc(100% - 1px);
    transform: rotate(180deg);
    opacity: 0.68;
  }

  /* SOL: aşağıdan yukarı */
  75% {
    left: 1px;
    top: calc(100% - 1px);
    transform: rotate(270deg);
    opacity: 0.72;
  }

  96% {
    left: 1px;
    top: 66px;
    transform: rotate(270deg);
    opacity: 0.62;
  }

  100% {
    left: 1px;
    top: 1px;
    transform: rotate(270deg);
    opacity: 0;
  }
}

/* Mevcut compact-screen sisteminde yaklaşık %80 küçült */
html.compact-screen .discord-community-cta {
  left: 32px;
  bottom: 22px;

  width: 270px;
  min-height: 74px;

  grid-template-columns: 48px 1fr 25px;
  gap: 10px;

  padding: 10px 11px 10px 12px;
}

html.compact-screen .discord-community-cta__icon {
  width: 46px;
  height: 46px;
}

html.compact-screen .discord-community-cta__icon svg {
  width: 23px;
  height: 23px;
}

html.compact-screen .discord-community-cta__copy small {
  margin-bottom: 5px;
  font-size: 5.8px;
}

html.compact-screen .discord-community-cta__copy strong {
  font-size: 13.5px;
}

html.compact-screen .discord-community-cta__copy em {
  margin-top: 5px;
  font-size: 5.6px;
}

html.compact-screen .discord-community-cta__arrow {
  width: 22px;
  height: 22px;
}

/* Mobilde sabit CTA yok; Discord menü ve footer içinde mevcut. */
@media (max-width: 768px) {
  .discord-community-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discord-community-cta,
  .discord-community-cta__icon svg,
  .discord-community-cta__arrow i {
    transition: none;
  }

  .discord-community-cta::after {
    animation: none;
    display: none;
  }
}