/* ==================================================
   PROLOGUE MODULE
================================================== */

.prologue-module {
  --prologue-cyan: #00ffff;
  --prologue-panel-fill: rgba(0, 10, 14, 0.22);
  --prologue-white: rgba(255, 255, 255, 0.95);

  position: absolute;

  right: 400px;
  top: 250px;

  z-index: 235;

  font-family: "Rajdhani", sans-serif;
}

.prologue-module,
.prologue-module *,
.prologue-module *::before,
.prologue-module *::after {
  box-sizing: border-box;
}


/* ==================================================
   KÜÇÜK PROLOGUE BUTONU
================================================== */

.prologue-trigger {
  --hud-chamfer: 10px;
  --prologue-trigger-fill: #000000;

  position: relative;

  width: 185px;
  height: 44px;

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

  padding: 0 14px;

  border: none;

  /* Kenarlık; içi siyah ::before */
  background: #00ffff;

  color: var(--prologue-cyan);
  font-family: "Rajdhani", sans-serif;

  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--hud-chamfer)),
    calc(100% - var(--hud-chamfer)) 100%,
    var(--hud-chamfer) 100%,
    0 calc(100% - var(--hud-chamfer))
  );

  cursor: pointer;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.35);

  opacity: 0.78;
  filter: none;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    opacity 0.22s ease,
    visibility 0.22s ease,
    filter 0.22s ease;
}

.prologue-trigger::before {
  content: "";

  position: absolute;
  inset: 1.5px;

  background: var(--prologue-trigger-fill);

  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - (var(--hud-chamfer) - 1.5px)),
    calc(100% - (var(--hud-chamfer) - 1.5px)) 100%,
    calc(var(--hud-chamfer) - 1.5px) 100%,
    0 calc(100% - (var(--hud-chamfer) - 1.5px))
  );

  pointer-events: none;
  transition: background 0.22s ease;
}

.prologue-trigger > * {
  position: relative;
  z-index: 1;
}

.prologue-trigger::after {
  content: "";

  position: absolute;
  left: 14px;
  right: -80px;
  bottom: -4px;

  height: 1px;

  background: linear-gradient(
    to right,
    var(--prologue-cyan),
    transparent
  );

  box-shadow:
    0 0 2px rgba(0, 247, 255, 0.22);
}

.prologue-trigger:hover,
.prologue-trigger:focus-visible {
  transform: translateX(-5px);
  outline: none;
  opacity: 1;
  filter: none;
  color: #000000;
}

.prologue-trigger:hover::before,
.prologue-trigger:focus-visible::before,
.prologue-trigger:active::before {
  background: #00ffff;
}

.prologue-trigger:hover .prologue-trigger__label,
.prologue-trigger:focus-visible .prologue-trigger__label {
  color: #000000;
  text-shadow: none;
}

.prologue-trigger:hover .prologue-trigger__icon img,
.prologue-trigger:focus-visible .prologue-trigger__icon img {
  filter: brightness(0);
}

.prologue-trigger:active {
  transform: translateX(-5px) translateY(1px) scale(0.98);
  background: #00ffff;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.35);
}

.prologue-trigger.is-active {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.prologue-trigger__icon {
  width: 27px;
  height: 27px;

  flex: 0 0 27px;

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

.prologue-trigger__icon img {
  width: 24px;
  height: 24px;

  display: block;
  object-fit: contain;

  filter:
    drop-shadow(0 0 2px rgba(0, 247, 255, 0.35))
    drop-shadow(0 0 4px rgba(0, 247, 255, 0.12));
}

.prologue-trigger__label {
  display: block;

  color: var(--prologue-cyan);

  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.2px;

  transform: translateY(1px);

  text-shadow:
    0 0 3px rgba(0, 247, 255, 0.25),
    0 0 6px rgba(0, 247, 255, 0.08);
}


/* ==================================================
   ANA PROLOGUE PANELİ
================================================== */

.prologue-panel {
  --prologue-cyan: #00ffff;
  --prologue-panel-fill: rgba(0, 10, 14, 0.22);
  --prologue-white: rgba(255, 255, 255, 0.95);

  font-family: "Rajdhani", sans-serif;

  position: absolute;

  left: 50%;
  top: calc(50% + (var(--crop-y, 0px) * 0.5));

  width: 520px;
  height: 720px;

  z-index: 410;
  isolation: isolate;
  overflow: visible;

  background: transparent;

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

  transform:
    translate(-50%, -47%)
    scale(0.97);

  transform-origin: center;

  transition:
    opacity 0.28s ease,
    transform 0.34s ease,
    visibility 0.28s ease;
}

.prologue-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translate(-50%, -50%)
    scale(1);
}

.prologue-panel .panel-scan-line {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--prologue-cyan) 18%,
    #ffffff 50%,
    var(--prologue-cyan) 82%,
    transparent 100%
  );
  box-shadow:
    0 0 16px 3px var(--prologue-cyan),
    0 0 32px 6px rgba(0, 247, 255, 0.55);
}

.prologue-panel.is-scan-open .panel-scan-line {
  animation: panelScanLineOpen 0.4s ease-out forwards;
}

.prologue-panel.is-scan-close .panel-scan-line {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--prologue-cyan) 18%,
    #ffffff 50%,
    var(--prologue-cyan) 82%,
    transparent 100%
  );
  box-shadow:
    0 0 16px 3px var(--prologue-cyan),
    0 0 32px 6px rgba(0, 247, 255, 0.55);
  animation: panelScanLineClose 0.4s ease-out forwards;
}


/* ==================================================
   YARI ŞEFFAF TURKUAZ ZEMİN + NEON ÇERÇEVE
================================================== */

.prologue-panel__outline {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 0;

  overflow: visible;
  pointer-events: none;
}

.prologue-panel__outline .panel-shell {
  fill: none;

  stroke: #00ffff;
  stroke-width: 1.5;

  vector-effect: non-scaling-stroke;

  filter:
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}


/* ==================================================
   PANEL İÇERİĞİ
================================================== */

.prologue-panel__content {
  position: absolute;

  left: 0;
  top: 0;

  z-index: 3;

  width: 100%;
  height: 100%;

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

  padding: 48px 54px 44px;

  color: var(--prologue-white);
  text-align: center;

  background: var(--prologue-panel-fill);
  border: 0;
  box-shadow: none;

  clip-path: polygon(
    0.29% 0.21%,
    99.71% 0.21%,
    99.71% 93.13%,
    90.48% 99.79%,
    9.52% 99.79%,
    0.29% 93.13%
  );

  overflow: hidden;
}


/* ==================================================
   PANEL ÜST İKONU
================================================== */

.prologue-panel__symbol {
  position: relative;
  z-index: 5;

  width: 50px;
  height: 50px;

  flex: 0 0 50px;

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

  margin: -31px auto 8px;
}

.prologue-panel__symbol img {
  width: 44px;
  height: 44px;

  display: block;
  object-fit: contain;

  filter:
    drop-shadow(0 0 4px rgba(0, 247, 255, 0.95))
    drop-shadow(0 0 12px rgba(0, 247, 255, 0.35));
}


/* ==================================================
   BAŞLIK
================================================== */

.prologue-panel__content h2 {
  position: relative;
  z-index: 4;

  margin: 5px 0 17px;

  color: #ffffff;

  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.2px;

  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.95),
    0 0 7px rgba(0, 247, 255, 0.70);
}


/* ==================================================
   METİNLER
================================================== */

.prologue-panel__content p {
  position: relative;
  z-index: 4;

  width: 100%;

  margin: 0 0 14px;

  color: var(--prologue-white);

  font-size: 13.4px;
  font-weight: 500;
  line-height: 1.30;
  letter-spacing: 0.04px;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.82);
}

.prologue-panel__content strong {
  color: #ffffff;
  font-weight: 700;
}

.prologue-panel__closing {
  margin-top: 1px !important;
  margin-bottom: 0 !important;
}

.prologue-panel__closing a {
  color: var(--prologue-cyan);
  font-weight: 700;
  text-decoration: none;

  transition:
    color 0.2s ease,
    text-shadow 0.2s ease;
}

.prologue-panel__closing a:hover {
  color: #ffffff;

  text-shadow:
    0 0 5px rgba(0, 247, 255, 0.8),
    0 0 11px rgba(0, 247, 255, 0.28);
}


/* ==================================================
   PROLOGUE — KIRMIZI KAPATMA İŞARETİ
================================================== */

.prologue-panel__close {
  position: absolute;

  z-index: 40;

  width: 42px;
  height: 42px;

  padding: 0;
  border: 0;
  outline: 0;

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

  background: transparent;
  color: var(--prologue-cyan);

  cursor: pointer;
}

.prologue-panel__close--left {
  left: 8px;
  top: 8px;
  right: auto;
}

.prologue-panel__close--right {
  right: 8px;
  top: 8px;
  left: auto;
}

.prologue-panel__close svg {
  display: block;
  width: 32px;
  height: 32px;
}

.prologue-panel__close:hover {
  transform: scale(1.08);
  color: #ffffff;
}

.prologue-panel__close:active {
  transform: scale(0.94);
}


/* ==================================================
   ALT KÖŞE DEKORLARI
================================================== */

.prologue-panel__corner {
  position: absolute;
  z-index: 5;

  pointer-events: none;
}


/* SOL ALT ÇİZGİLER */

.prologue-panel__corner--left {
  left: -13px;
  bottom: -30px;

  width: 42px;
  height: 44px;
}

.prologue-panel__corner--left::before {
  content: "";

  position: absolute;
  left: 0;
  bottom: 0;

  width: 32px;
  height: 32px;

  border-left: 1px solid var(--prologue-cyan);
  border-bottom: 1px solid var(--prologue-cyan);

  filter:
    drop-shadow(0 0 4px rgba(0, 247, 255, 0.65));
}

.prologue-panel__corner--left span {
  position: absolute;

  left: 5px;
  bottom: -9px;

  width: 26px;
  height: 13px;

  background: repeating-linear-gradient(
    -45deg,
    var(--prologue-cyan) 0 3px,
    transparent 3px 6px
  );
}


/* SAĞ ALT HUD İKONU */

.prologue-panel__corner--right {
  right: -6px;
  bottom: -42px;

  width: 48px;
  height: 48px;
}

.prologue-panel__corner--right span,
.prologue-panel__corner--right::before,
.prologue-panel__corner--right::after {
  position: absolute;

  left: 21px;
  top: 5px;

  width: 5px;
  height: 34px;

  border-radius: 3px;

  background: var(--prologue-cyan);

  transform-origin: center;

  box-shadow:
    0 0 5px rgba(0, 247, 255, 0.75);
}

.prologue-panel__corner--right::before,
.prologue-panel__corner--right::after {
  content: "";
}

.prologue-panel__corner--right::before {
  transform: rotate(120deg);
}

.prologue-panel__corner--right::after {
  transform: rotate(-120deg);
}