/* =======================================================

   MEDYABLACK — GLOBAL DEĞİŞKENLER & SIFIRLAMA

   Performans: GPU katmanları, will-change, contain

======================================================= */

@font-face {
  font-family: "Basique Light";

  src: url("../fonts/Basique_Light.ttf") format("truetype");

  font-weight: normal;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Basique Regular";

  src: url("../fonts/Basique_Regular.ttf") format("truetype");

  font-weight: normal;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Basique Pro";

  src: url("../fonts/Basique_Pro.ttf") format("truetype");

  font-weight: normal;

  font-style: normal;

  font-display: swap;
}

/* 1. Sadece metinlere kendi fontumuzu atayalım */

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
div,
span,
button,
input,
textarea,
select {
  font-family: "Basique Light", sans-serif;

  letter-spacing: 0.05em;
}

/* 🚀 2. KESİN ÇÖZÜM: İKON KORUMA KİLİDİ (Orijinal FontAwesome ailelerini zorluyoruz) */

.fa,
.fas,
.far,
.fal {
  font-family: "Font Awesome 6 Free" !important;

  font-weight: 900 !important;

  letter-spacing: normal !important;
}

.fab {
  font-family: "Font Awesome 6 Brands" !important;

  font-weight: 400 !important;

  letter-spacing: normal !important;
}

.ri,
[class^="ri-"],
[class*=" ri-"] {
  font-family: "remixicon" !important;

  letter-spacing: normal !important;
}

:root {
  --bg: #050505;

  --brand: #ff6600;

  --brand-dim: rgba(255, 102, 0, 0.3);

  --brand-glow: rgba(255, 102, 0, 0.15);

  --text: #ffffff;

  --text-muted: #888;

  --card-bg: #0d0d0d;

  --transition-smooth: cubic-bezier(0.25, 1, 0.5, 1);

  --transition-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --main-font: "Basique Light", sans-serif;
}

*,
*::before,
*::after {
  margin: 0;

  padding: 0;

  box-sizing: border-box;

  user-select: none;

  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: auto;
}

body {
  background: var(--bg);

  color: var(--text);

  overflow: hidden;

  overscroll-behavior: none;

  perspective: 1500px;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;
}

/* Girdi alanlarına özel font ayarı (terminal hariç) */

input,
button,
textarea,
select {
  font-family: "Basique Light", sans-serif;
}

/* Terminal ekranı kod fontunda kalmalı */

#terminal-screen,
#terminal-screen *,
#real-terminal-input {
  font-family: "Courier New", Courier, monospace !important;
}

/* Yardımcı sınıflar */

.Monospace {
  font-family: "Courier Prime", monospace;
}

.highlight {
  color: var(--brand);
}

.mt-20 {
  margin-top: 20px;
}

/* =======================================================

   KOZMİK ARKA PLAN (IŞIK HÜZMELERİ VE KAYAN YILDIZLAR)

======================================================= */

.cosmic-background {
  position: fixed;

  inset: 0;

  z-index: 0; /* En arkada, her şeyin altında */

  pointer-events: none; /* Tıklamaları engellemesin */

  overflow: hidden;

  background: radial-gradient(circle at center, #0a0a0a 0%, #000000 100%);
}

.light-beam {
  position: absolute;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(255, 102, 0, 0.15) 0%,

    transparent 65%
  );

  will-change: transform;
}

.beam-1 {
  width: 50vw;

  height: 50vw;

  top: -20vh;

  left: -20vw;

  animation: floatBeam1 25s infinite alternate ease-in-out;
}

.beam-2 {
  width: 60vw;

  height: 60vw;

  bottom: -30vh;

  right: -20vw;

  animation: floatBeam2 30s infinite alternate-reverse ease-in-out;
}

.beam-3 {
  width: 40vw;

  height: 40vw;

  top: 40vh;

  left: 30vw;

  opacity: 0.08; /* Ortadaki ışık daha da sönük */

  animation: floatBeam3 35s infinite alternate ease-in-out;
}

/* Işıkların nefes alıp gezinme animasyonları */

@keyframes floatBeam1 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(20vw, 15vh) scale(1.2);
  }
}

@keyframes floatBeam2 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(-25vw, -15vh) scale(0.9);
  }
}

@keyframes floatBeam3 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(15vw, -20vh) scale(1.3);
  }
}

/* --- Kayan Yıldızlar (Shooting Stars) --- */

#shooting-stars-container {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;
}

.shooting-star {
  position: absolute;

  height: 1px;

  /* Baş kısmı beyaz/sarı, kuyruğu marka rengine (#ff6600) ve saydama erir */

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.8) 0%,

    rgba(255, 102, 0, 0.6) 30%,

    transparent 100%
  );

  border-radius: 50%;

  transform: rotate(-35deg); /* Hafif çapraz açıyla düşüş */

  opacity: 0;

  will-change: transform, opacity;

  animation: shootStar linear infinite;
}

/* Kayan yıldızın parlayan baş kısmı */

.shooting-star::before {
  content: "";

  position: absolute;

  top: 50%;

  left: 0;

  transform: translateY(-50%);

  width: 4px;

  height: 4px;

  background: #fff;

  border-radius: 50%;

  box-shadow: 0 0 10px 2px rgba(255, 102, 0, 0.8);
}

@keyframes shootStar {
  0% {
    transform: rotate(-35deg) translateX(0);

    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: rotate(-35deg) translateX(-1500px);

    opacity: 0;
  }
}

/* =======================================================

   ARKA PLAN EFEKTLERİ — CSS NOISE (video yerine, %0 CPU)

======================================================= */

.ambient-glow {
  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 1;

  background:
    radial-gradient(
      circle at 20% 30%,

      rgba(255, 102, 0, 0.04) 0%,

      transparent 40%
    ),
    radial-gradient(
      circle at 80% 70%,

      rgba(255, 102, 0, 0.03) 0%,

      transparent 50%
    );

  will-change: transform;
}

.fog-container {
  position: fixed;

  bottom: 0;

  left: 0;

  width: 100vw;

  height: 30vh;

  z-index: 50;

  pointer-events: none;

  overflow: hidden;
}

.fog-layer {
  position: absolute;

  width: 200vw;

  height: 100%;

  background: radial-gradient(
    ellipse at bottom,

    rgba(255, 102, 0, 0.05) 0%,

    transparent 60%
  );

  will-change: transform;
}

.fog-1 {
  animation: fogMove 40s linear infinite;

  bottom: 0;
}

.fog-2 {
  animation: fogMove 30s linear infinite reverse;

  bottom: -10px;

  transform: scale(1.2);
}

@keyframes fogMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50vw);
  }
}

/* =======================================================

   THREE.JS CANVAS KAPSAYICISI

======================================================= */

#webgl-container {
  position: fixed;

  inset: 0;

  z-index: 5;

  pointer-events: none;
}

/* =======================================================

   YATAY SCROLL MOTORU — 700vw

======================================================= */

.horizontal-scroll-wrapper {
  display: flex;

  flex-wrap: nowrap;

  width: 800vw;

  height: 100vh;

  will-change: transform;

  position: relative;

  z-index: 10;

  transform: translate3d(0, 0, 0);
}

.panel {
  width: 100vw;

  height: 100vh;

  flex-shrink: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

  overflow: hidden;

  transform-style: preserve-3d;

  contain: layout style; /* Performans: reflow izolasyonu */
}

.content {
  z-index: 10;

  text-align: center;

  width: 100%;

  max-width: 1400px;

  padding: 0 50px;

  position: relative;
}

/* =======================================================

   DİNOZOR OYUNU NAVBAR (V6 - ORİJİNAL DİNO & İNTERAKTİF)

======================================================= */

.dino-nav-container {
  position: fixed;

  bottom: 20px; /* Ekranın altından mesafe */

  left: 50%;

  transform: translateX(-50%);

  width: 85%; /* Alanı biraz daha genişlettik */

  max-width: 1100px;

  height: 80px; /* 🚀 Navbar yüksekliğini 60px'ten 80px'e çıkardık (Daha ferah) */

  z-index: 9999;

  pointer-events: none; /* Dış çerçevenin tıklamaları engellememesi için */
}

.dino-track {
  position: relative;

  width: 100%;

  height: 100%;
}

.dino-track,
.dino-nav-container,
.invisible-bottle-nav,
.progress-container {
  overflow: visible !important;
}

.track-line {
  position: absolute;

  bottom: 25px; /* Yazılara daha fazla yer açtık */

  left: 0;

  width: 100%;

  height: 2px;

  background: repeating-linear-gradient(
    to right,

    rgba(255, 102, 0, 0.4) 0,

    rgba(255, 102, 0, 0.4) 10px,

    transparent 10px,

    transparent 20px
  );
}

/* 🚀 ETKİLEŞİMLİ SAYFA İSİMLERİ */

.page-label {
  position: absolute;

  bottom: 0px; /* Çizginin altına hizalandı */

  transform: translateX(-50%);

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

  font-family: "Basique Light", sans-serif;

  font-size: 12px;

  letter-spacing: 1px;

  white-space: nowrap;

  transition: all 0.3s ease;

  /* 🚀 TIKLANABİLİRLİK (Etkileşim) İÇİN EKLENDİ */

  pointer-events: auto;

  cursor: pointer;

  padding: 5px 10px; /* Tıklama alanını büyütür */
}

/* Mouse ile üzerine gelince hafif parlar */

.page-label:hover {
  color: rgba(255, 102, 0, 0.8);

  text-shadow: 0 0 5px rgba(255, 102, 0, 0.5);
}

/* Dinozor o sayfaya geldiğinde yanacak olan neon yazı stili */

.page-label.active {
  color: var(--brand, #ff6600);

  text-shadow: 0 0 8px rgba(255, 102, 0, 0.8);

  font-weight: bold;

  font-size: 14px;

  transform: translateX(-50%) translateY(-3px);
}

/* KAKTÜSLER */

.cactus {
  position: absolute;

  bottom: 25px; /* Çizgiyle aynı hizaya alındı */

  height: 25px;

  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 33'%3E%3Cpath d='M5 0h5v33H5V0zM0 10h3v10H0V10zm12 5h3v10h-3V15zM3 20h2v-3H3v3zm7 5h2v-3h-2v3z' fill='%23ff6600'/%3E%3C/svg%3E");

  background-size: 15px 25px;

  background-repeat: repeat-x;

  transform: translateX(-50%);
}

.cactus.single {
  width: 15px;
}

.cactus.double {
  width: 30px;
}

.cactus.triple {
  width: 45px;
}

/* 🦖 DİNOZOR BOYUTLANDIRMA VE TASARIM GÜNCELLEMESİ */

#dino-wrapper {
  position: absolute;

  bottom: 25px; /* Çizginin hemen üstüne hizalandı */

  left: 0;

  /* 🚀 BOYUTLAR ARTIRILDI: 30x35'ten 75x75'e çıkarıldı */

  width: 45px;

  height: 45px;

  z-index: 10;

  will-change: transform;

  transition: none !important;
}

#dino-sprite {
  width: 100%;

  height: 100%;

  background-color: transparent;

  background-image: url("../images/dino.png");

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center bottom;

  /* 🚀 GÖRSEL NETLİĞİ: Büyük görseli küçültürken bulanıklığı önler */

  image-rendering: -webkit-optimize-contrast;

  image-rendering: crisp-edges;

  filter: drop-shadow(0 0 8px rgba(255, 102, 0, 0.7));
}

/* Koşma Efekti (Hafif sallanma - Büyük boyuta göre yumuşatıldı) */

.dino-running {
  animation: dinoRun 0.15s infinite alternate;
}

@keyframes dinoRun {
  0% {
    transform: rotate(-3deg) translateY(1px);
  }

  100% {
    transform: rotate(3deg) translateY(-1px);
  }
}

/* =======================================================

   ANA SAYFA — Subtitle

======================================================= */

.home-subtitle {
  position: absolute;

  bottom: 15%;

  left: 50%;

  transform: translateX(-50%);

  font-size: 13px;

  letter-spacing: 3px;

  opacity: 0.6;

  white-space: nowrap;
}

/* =======================================================

   SOSYAL MEDYA

======================================================= */

.social-media-container {
  position: fixed;

  bottom: 40px;

  right: 40px;

  z-index: 10005;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 15px;
}

.social-toggle-btn {
  width: 58px;

  height: 58px;

  background: var(--brand);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-weight: bold;

  font-size: 11px;

  cursor: pointer;

  box-shadow: 0 5px 20px rgba(255, 102, 0, 0.5);

  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.social-toggle-btn:hover {
  transform: scale(1.12);

  box-shadow: 0 8px 30px rgba(255, 102, 0, 0.7);
}

.social-links-wrapper {
  display: flex;

  flex-direction: column;

  gap: 10px;

  position: absolute;

  bottom: 75px;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.4s var(--transition-bounce),
    visibility 0.4s;
}

.social-links-wrapper.active {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}

.social-item {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  position: relative;

  width: 100%;

  transform: translateY(20px);

  opacity: 0;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.social-links-wrapper.active .social-item {
  transform: translateY(0);

  opacity: 1;
}

.social-icon {
  width: 44px;

  height: 44px;

  background: #141414;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--text);

  font-weight: bold;

  text-decoration: none;

  font-size: 12px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.3s;
}

.social-icon:hover {
  background: var(--brand);

  border-color: var(--brand);

  transform: scale(1.1);
}

.phone-notch {
  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 40%;

  height: 22px;

  background: #333;

  border-bottom-left-radius: 10px;

  border-bottom-right-radius: 10px;
}

.phone-screen {
  width: 100%;

  height: 100%;

  background: linear-gradient(45deg, #111, #1a1a1a);

  border-radius: 23px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 13px;

  padding: 20px;

  color: var(--text);
}

/* =======================================================

   HİZMETLER — 360 KART

======================================================= */

.services-container {
  perspective: 2500px;

  height: 60vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 30px;
}

.services-hint {
  font-size: 12px;

  color: var(--text-muted);

  letter-spacing: 2px;

  opacity: 0.6;
}

.scene-3d {
  width: 100%;

  height: 500px;

  perspective: 2500px;

  display: flex;

  justify-content: center;

  align-items: center;
}

.services-ring {
  position: relative;

  width: 260px;

  height: 340px;

  transform-style: preserve-3d;

  will-change: transform;
}

/* 🚀 KART TASARIMI VE KUSURSUZ YAYLANMA EFEKTİ */

.service-card {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  transform-style: preserve-3d;

  transform: rotateY(calc(45deg * var(--i))) translateZ(400px);

  /* Animasyon motoru senkronize edildi: Kart geri dönerken ve öne çıkarken yaylanır */

  transition:
    transform 0.7s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.7s ease;

  cursor: pointer;
}

.service-card h3,
.service-card p {
  letter-spacing: 0.05em; /* Harfler arasına %5'lik bir boşluk ekler */

  /* Veya piksel bazlı: letter-spacing: 1px; */
}

.card-face {
  position: absolute;

  width: 100%;

  height: 100%;

  border-radius: 15px;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;
}

.card-face.front {
  background: var(--card-bg);

  border: 1px solid var(--brand-dim);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: 20px;

  transition: background-image 0.5s ease; /* 🚀 YENİ */

  background-color: #0d0d0d; /* Resim yüklenene kadar veya yoksa duracak renk */

  background-repeat: no-repeat;

  overflow: hidden; /* Resmin köşelerden taşmasını engeller */

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;
}

.card-face.front .icon {
  font-size: 48px;

  margin-bottom: 18px;

  filter: drop-shadow(0 0 8px rgba(255, 102, 0, 0.5));
}

.card-face.front h3 {
  font-size: 1.25rem;

  color: var(--text);

  font-family: "Basique Light", sans-serif;

  text-align: center;

  /* 🚀 YENİ: Arka planda resim olduğunda yazının net okunması için eklendi */

  text-shadow:
    0 4px 15px rgba(0, 0, 0, 0.9),
    0 2px 5px rgba(0, 0, 0, 0.8);

  position: relative;

  z-index: 2;
}

.card-face.back {
  background: #070707;

  border: 1px solid rgba(255, 255, 255, 0.04);

  transform: rotateY(180deg);
}

/* 🚀 KART TIKLANDIĞINDA ÖNE FIRLAMA EFEKTİ */

.service-card.neon-active {
  /* translateZ(520px) ile kartı kameraya çekiyoruz */

  transform: rotateY(calc(45deg * var(--i))) translateZ(520px) scale(1.15) !important;

  z-index: 100;
}

.service-card.neon-active .card-face.front {
  border: 2px solid var(--brand) !important;

  /* Neon ışığın resim üzerinde patlaması için */

  box-shadow:
    0 0 40px rgba(255, 102, 0, 0.8),
    inset 0 0 25px rgba(255, 102, 0, 0.4) !important;
}

/* =======================================================

   UÇUŞ BÖLÜMÜ — KARTLAR

======================================================= */

.flight-camera {
  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 15;

  overflow: hidden;
}

.flight-card {
  position: absolute;

  top: 0;

  left: 0;

  width: 500px;

  background: rgba(90, 90, 90, 0);

  border: 2px solid var(--brand-dim);

  border-radius: 14px;

  padding: 32px;

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  color: var(--text);

  text-align: left;

  opacity: 0;

  will-change: transform, opacity;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0);
}

.flight-card h3 {
  font-size: 3rem;

  margin-bottom: 10px;

  font-family: "Basique Light", sans-serif;
}

.flight-card p {
  font-size: 1.5rem;

  color: #ccc;

  line-height: 1.6;
}

/* =======================================================

   ÇALIŞMALAR — 3D KATALOG (TAM BAĞIMSIZ SAYFALAR)

======================================================= */

.book-dom {
  position: relative;

  /* BÜYÜK BOYUT: 720x405px (Tam 16:9) */

  width: 720px;

  height: 405px;

  transform-style: preserve-3d;

  cursor: grab;

  will-change: transform;
}

.book-dom:active {
  cursor: grabbing;
}

#portfolio-book {
  transform-style: preserve-3d;
}

.page-dom {
  position: absolute;

  inset: 0;

  transform-style: preserve-3d;

  transform-origin: left center;

  transition: transform 1.1s cubic-bezier(0.645, 0.045, 0.355, 1);

  will-change: transform;

  box-shadow:
    inset 2px 0 5px rgba(0, 0, 0, 0.1),
    -2px 0 5px rgba(0, 0, 0, 0.15);
}

.page-dom.flipped {
  transform: rotateY(-180deg);
}

.page-dom::after {
  content: "";

  position: absolute;

  top: 0;

  right: -6px;

  width: 6px;

  height: 100%;

  background: linear-gradient(to right, #e0e0e0 0%, #f4f4f4 40%, #cccccc 100%);

  transform-origin: left center;

  transform: rotateY(90deg);

  z-index: -1;

  border-top-right-radius: 2px;

  border-bottom-right-radius: 2px;
}

.page-front,
.page-back {
  position: absolute;

  inset: 0;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  display: flex;

  flex-direction: column;

  /* Tarayıcının 3D derinliği anlık kaybetmemesi için donanım hızlandırması: */

  -webkit-transform-style: preserve-3d;

  transform-style: preserve-3d;
}

.page-front {
  /* Ön yüzü 3D uzayda 1 piksel öne alıyoruz */

  transform: rotateY(0deg) translateZ(1px);
}

.page-back {
  /* Arka yüzü döndürüp, kendi ekseninde 1 piksel öne (aslında dışarıya) alıyoruz */

  transform: rotateY(180deg) translateZ(1px);
}

/* Estetik Katalog Sırtı (Cilt) */

.catalog-spine {
  position: absolute;

  top: 0;

  left: -8px;

  width: 16px;

  height: 100%;

  z-index: 100;

  background: linear-gradient(
    to right,

    #050505 0%,

    #222 40%,

    #1a1a1a 60%,

    #000 100%
  );

  transform: translateZ(1px);

  pointer-events: none;

  border-radius: 3px;

  box-shadow: inset 2px 0 10px rgba(0, 0, 0, 0.8);
}

/* Eskiden padding: 50px 20px; vardı, resim tam sığsın diye siliyoruz ve overflow ekliyoruz */

.nb-cover-front,
.nb-cover-back {
  background: #111;

  color: var(--text);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: 0; /* 🚀 FİX: Resmin kapakta boşluk bırakmaması için sıfırlandı */

  overflow: hidden; /* 🚀 FİX: Resmin köşelerden taşmasını engeller */
}

.nb-cover-front {
  border-radius: 2px 10px 10px 2px;

  border-left: 1px solid #333;

  box-shadow:
    inset -10px 0 30px rgba(0, 0, 0, 0.9),
    5px 5px 20px rgba(0, 0, 0, 0.6);
}

.nb-cover-back {
  border-radius: 10px 2px 2px 10px;

  border-right: 1px solid #333;

  box-shadow:
    inset 10px 0 30px rgba(0, 0, 0, 0.9),
    -5px 5px 20px rgba(0, 0, 0, 0.6);
}

/* 🚀 YENİ: KATALOG KAPAK GÖRSELLERİ İÇİN KUSURSUZ OTURTMA SINIFI */

.full-cover-img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  border-radius: inherit;

  /* 🚀 SÜRÜKLEME (DRAG) HATASI FİXİ: */

  -webkit-user-drag: none; /* Tarayıcının resmi masaüstüne sürüklemesini tamamen yasaklar */

  user-select: none; /* Yanlışlıkla resmin mavi renkle seçilmesini engeller */

  pointer-events: none; /* Farenin resmi "hayalet" gibi geçip doğrudan kitaba tutunmasını sağlar */
}

/* 🚀 FIX: Kapak ve İç Sayfa Arka Planları Netleşti */

.nb-paper {
  background: #1a1a1a; /* Medyayı ön plana çıkaracak koyu gri arka plan */

  padding: 15px; /* Fotoğraf albümü gibi ince bir çerçeve */

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.nb-right-page {
  border-radius: 2px 10px 10px 2px;

  box-shadow: inset -10px 0 30px rgba(0, 0, 0, 0.4);
}

.nb-left-page {
  border-radius: 10px 2px 2px 10px;

  box-shadow: inset 10px 0 30px rgba(0, 0, 0, 0.4);
}

/* KATALOG KAPAK LOGOSU BOYUTLANDIRMASI */

.catalog-logo {
  width: 220px; /* Logonun kapağa en şık oturacağı genişlik */

  height: auto;

  display: block;

  margin: 0 auto; /* Tam merkeze hizalar */

  /* Logoyu arka plandan hafifçe ayırmak ve derinlik katmak için neon marka gölgesi */

  filter: drop-shadow(0 0 15px rgba(255, 102, 0, 0.4));

  transition: filter 0.3s ease;
}

.nb-mid {
  font-family: "Basique Light", sans-serif;

  font-weight: 900;

  font-size: 2.8rem;

  letter-spacing: 1px;

  color: #fdfdfc;

  text-align: center;
}

/* 🚀 YENİ: KATALOG KAPAK LOGOSU BOYUTLANDIRMASI */

.catalog-logo {
  width: 220px; /* Logonun kapağa en şık oturacağı genişlik (gerekirse artırıp azaltabilirsin) */

  height: auto;

  display: block;

  margin: 0 auto; /* Tam merkeze hizalar */

  /* Logoyu arka plandan hafifçe ayırmak ve derinlik katmak için neon marka gölgesi */

  transition: filter 0.3s ease;
}

.nb-top,
.nb-bot {
  font-family: "Basique Light", sans-serif;

  font-size: 0.85rem;

  color: #888;

  font-weight: bold;
}

/* VİDEO VE GÖRSEL KAPSAYICISI (16:9 Uyumlu) */

.catalog-media-box {
  transform: translateZ(
    5px
  ) !important; /* Kapağın biraz üstüne çıkar (Gömülmeyi engeller) */

  pointer-events: auto !important;

  position: relative;

  width: 100%;

  height: 100%;

  background: #000;

  border-radius: 6px;

  overflow: hidden;

  z-index: 100 !important;
}

.catalog-media-box iframe,
.catalog-media-box img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  border: none;
}

/* =======================================================

   KATALOG - ÇOKLU MEDYA (16:9 ve 9:16) YERLEŞİM DÜZENİ

======================================================= */

.page-content-wrapper {
  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;
}

/* YATAY (16:9) DÜZEN - Tek Medya Tam Sayfa */

.layout-horizontal {
  flex-direction: column;
}

.layout-horizontal .catalog-media-box {
  width: 100%;

  height: 100%;

  border-radius: 4px;
}

/* DİKEY (9:16) DÜZEN - Yan Yana 3 Medya */

.layout-vertical {
  flex-direction: row;

  gap: 12px; /* Videolar arası boşluk */

  padding: 10px 0;
}

.layout-vertical .catalog-media-box {
  flex: 1; /* Mevcut alanı eşit böler (3 videoya kadar) */

  height: 100%;

  border-radius: 8px;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

  background: #000;
}

/* Videolar dikey iken kapağa daha estetik oturması için iframe ve video tag ayarları */

.layout-vertical .catalog-media-box iframe,
.layout-vertical .catalog-media-box video,
.layout-vertical .catalog-media-box img {
  object-fit: cover;

  border-radius: 8px;
}

/* =======================================================

   🚀 BUTONLAR (FLEXBOX PATLAMA FİXİ)

======================================================= */

/* BUTONLAR (FLEXBOX PATLAMA FİXİ) */

.book-controls {
  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

  gap: 20px; /* Buton aralıkları */

  position: relative;

  z-index: 10001;

  margin-top: 40px; /* Kataloğu büyüttüğümüz için aşağı daha fazla ittik */

  width: 100%;
}

.nav-arrow {
  display: flex;

  justify-content: center;

  align-items: center;

  background: #111;

  color: var(--text);

  border: 1px solid rgba(255, 255, 255, 0.15);

  width: 50px;

  height: 50px;

  border-radius: 50%;

  font-size: 18px;

  cursor: pointer;

  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.3s;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

  flex-shrink: 0; /* Butonların ezilmesini engeller */
}

.nav-arrow:hover {
  background: var(--brand);

  border-color: var(--brand);

  transform: scale(1.1);
}

.action-btn {
  width: auto !important;

  height: 50px; /* Diğerleriyle aynı yükseklik */

  padding: 0 30px;

  border-radius: 30px !important;

  font-weight: bold;

  letter-spacing: 1px;

  font-family: "Basique Light", sans-serif;

  white-space: nowrap; /* Yazının alt satıra kaymasını önler */
}

.close-btn {
  background: #252525 !important;

  border-color: #252525 !important;

  font-size: 14px !important;
}

.hint-text {
  color: var(--text-muted);

  font-style: italic;

  font-size: 13px;

  letter-spacing: 1px;

  white-space: nowrap;
}

/* =======================================================

   REFERANSLAR — KUSURSUZ SEAMLESS MARQUEE (KAYAN KARTLAR)

======================================================= */

.marquee-container {
  width: 65vw;

  height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 50px;

  overflow: hidden;

  position: relative;

  z-index: 1;

  /* 🎛️ KART MASKELEME: Sağdan ve soldan yumuşak erime efekti */

  /* Bıçak gibi kesilmeyi önler, kartlar ekranın iki ucunda yavaşça kaybolur */

  -webkit-mask-image: linear-gradient(
    to right,

    transparent 0%,

    black 15%,

    black 85%,

    transparent 100%
  );

  mask-image: linear-gradient(
    to right,

    transparent 0%,

    black 15%,

    black 85%,

    transparent 100%
  );

  /* DİKKAT: Bıçak gibi kesintiye sebep olan 'clip-path' tamamen kaldırıldı! */
}

.marquee-track {
  display: flex;

  width: max-content;

  will-change: transform;
}

/* 1. Satır Sola, 2. Satır Sağa Akar */

.track-left {
  animation: scrollLeft 180s linear infinite;
}

.track-right {
  animation: scrollRight 180s linear infinite;
}

/* Kullanıcı üzerine geldiğinde akışı durdurur */

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-content {
  display: flex;

  gap: 60px;

  padding-right: 60px; /* Döngünün kusursuz bağlanması için gap ile aynı olmalı */

  flex-shrink: 0;
}

/* =======================================================

   🚀 REFERANS KARTLARI (ORİJİNAL ARKA PLAN İLE)

======================================================= */

.ref-item {
  flex-shrink: 0;

  /* Senin orijinal tasarımın: Arka plan görseli ve üzerindeki karanlık filtre */

  background:
    linear-gradient(rgba(10, 10, 10, 0.3), rgba(10, 10, 10, 0.3)),
    url("../images/referanslar.png");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  border: 1px solid rgba(255, 102, 0, 0.726);

  border-radius: 16px;

  padding: 28px 30px;

  /* 500x240 görsel oranına en estetik oturacak ölçüler */

  width: 320px;

  height: 150px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center; /* 🚀 FİX: İçine gelecek dinamik logoyu tam merkeze çiviler */

  cursor: pointer;

  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  position: relative;

  overflow: hidden;

  /* Derinlik algısı için hafif gölge */

  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

/* Hover (Üzerine gelme) Parıltısı */

.ref-item::before {
  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(
    circle at 50% 0%,

    rgba(255, 102, 0, 0.15),
    transparent 70%
  );

  opacity: 0;

  transition: opacity 0.4s ease;

  pointer-events: none;
}

.ref-item:hover {
  transform: translateY(-5px) scale(1.02);

  border: 2px solid rgba(255, 102, 0, 0.863);

  box-shadow: 0 15px 35px -5px rgba(255, 102, 0, 0.2);
}

.ref-item:hover::before {
  opacity: 1;
}

/* 🚀 YENİ: DİNAMİK LOGOLAR İÇİN STİL */

.client-logo {
  max-width: 85%;

  max-height: 85%;

  object-fit: contain;

  z-index: 2;

  /* FİX: Karanlık/Siyah-Beyaz filtreler kaldırıldı, doğrudan tam renkli görünür */

  filter: none;

  opacity: 1;

  transition: all 0.4s ease;
}

.ref-item:hover .client-logo {
  /* Üzerine gelince sadece çok hafif büyüsün (renk zaten orijinal) */

  transform: scale(1.05);
}

.ref-item h3 {
  color: #ffffff; /* var(--text) yerine varsayılan beyaz bıraktım, değişkeninizi kullanabilirsiniz */

  font-size: 1.4rem;

  font-weight: 600;

  margin-bottom: 6px;

  transition: text-shadow 0.3s;
}

.ref-item span {
  color: #ff6600; /* var(--brand) */

  font-size: 0.85rem;

  letter-spacing: 1px;

  text-transform: uppercase;

  opacity: 0.8;
}

.ref-item:hover h3 {
  text-shadow: 0 0 15px rgba(255, 102, 0, 0.4);
}

/* 🚀 KAYMA ANİMASYONLARI */

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* =======================================================

   REFERANSLAR — BİNA ARKA PLANI & ESTETİK GEÇİŞ

======================================================= */

.referanslar-bg {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  background-image: url("../images/bina.webp");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  /* Hafif büyüterek kenar boşluklarını tolere ediyoruz */

  transform: scale(1.1);

  filter: grayscale(100%) brightness(0.2) contrast(1.1);

  opacity: 0.5;

  z-index: 0;

  pointer-events: none;

  /* 🚀 BİNA GEÇİŞ FİX: Sayfanın altından, üstünden ve yanlarından bütünüyle erimesi için Radial Gradient */

  -webkit-mask-image: radial-gradient(
    ellipse 60% 60% at 50% 50%,

    black 50%,

    transparent 80%
  );

  mask-image: radial-gradient(
    ellipse 60% 60% at 50% 50%,

    black 50%,

    transparent 80%
  );
}

/* =======================================================

   İÇERİKLER — 3D GAZETE

======================================================= */

.news-panel {
  cursor: ns-resize;
}

.long-news-scene {
  width: 100vw;

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  perspective: 2000px;
}

.newspaper-mask {
  width: 45vw;

  height: 85vh;

  background: #050505;

  overflow: hidden;

  border-radius: 4px;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.95),
    0 0 0 1px var(--brand-dim);

  position: relative;

  will-change: transform;

  opacity: 0;

  transform: scale(0) rotateZ(720deg) translateZ(-3000px);
}

#newspaper-img {
  width: 100%;

  height: auto;

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  will-change: transform;
}

/* =======================================================

   İLETİŞİM — TERMINAL & TELEFON LAYOUT

======================================================= */

.terminal-section {
  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  height: 100%;
}

.contact-layout {
  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center; /* Dikeyde kusursuz hizalama */

  gap: 80px; /* 🚀 Boyutlar büyüdüğü için aradaki boşluğu da 60'tan 80'e çıkardım */

  width: 100%;

  max-width: 1450px; /* 🚀 1300'den 1450'ye çıkarıldı */

  height: 700px; /* 🚀 Çalışma alanı bir tık daha ferahlatıldı */

  margin: 0 auto;
}

/* TERMINAL: Telefonla Tam Hizalı */

.terminal-box {
  flex: 1;

  max-width: 950px; /* 🚀 850'den 950'ye çıkarıldı (Daha geniş ve profesyonel) */

  height: 650px; /* 🚀 YÜKSEKLİK: 580'den 650'ye çıkarıldı */

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.85); /* Gölge derinliği artırıldı */

  display: flex;

  flex-direction: column;

  position: relative;

  overflow: hidden;

  background: rgba(20, 20, 20, 0.8);

  backdrop-filter: blur(25px);

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

.terminal-header {
  background: rgba(255, 255, 255, 0.05); /* Üst barı hafif saydam yaptık */

  padding: 12px 20px;

  display: flex;

  align-items: center;

  gap: 8px;

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

.terminal-header .title {
  margin-left: 8px;

  font-size: 12px;

  color: var(--text-muted);

  letter-spacing: 1px;
}

/* Mac Kontrol Butonları (Renkler aynı, biraz daha canlı) */

.btn {
  width: 13px;

  height: 13px;

  border-radius: 50%;

  flex-shrink: 0;

  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}

.btn.red {
  background: #ff5f56;
}

.btn.yellow {
  background: #ffbd2e;
}

.btn.green {
  background: #27c93f;
}

.terminal-body {
  padding: 28px 38px 80px 38px; /* Alt boşluğu (80px) artırdık ki dock çıkınca yazıları örtmesin */

  font-size: 16px;

  color: #ddd;

  line-height: 1.9;

  flex: 1;

  overflow-y: auto;

  scroll-behavior: smooth;
}

/* Scrollbar'ı Mac terminali gibi şık veya görünmez yapmak için: */

.terminal-body::-webkit-scrollbar {
  width: 6px;
}

.terminal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 102, 0, 0.3); /* Turuncu yarı saydam */

  border-radius: 10px;
}

.sys-msg.success {
  color: #27c93f;
}

.path {
  color: var(--brand);

  font-weight: bold;

  margin-right: 12px;
}

.type-line {
  display: none;
}

.cursor {
  color: var(--brand);

  font-weight: bold;

  animation: blink 1s step-end infinite;
}

/* Tıklanabilir Terminal Linkleri */

.terminal-link {
  color: #fff;

  text-decoration: none;

  pointer-events: auto;

  transition:
    color 0.3s,
    text-shadow 0.3s;
}

.terminal-link:hover {
  color: var(--brand);

  text-shadow: 0 0 10px rgba(255, 102, 0, 0.6);
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* =======================================================

   YENİ: MAC GÖREV ÇUBUĞU (DOCK) EFEKTLERİ

======================================================= */

.mac-dock {
  position: absolute;

  bottom: -90px; /* Başlangıçta ekranın dışında gizli */

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  gap: 15px;

  padding: 10px 15px;

  background: rgba(255, 255, 255, 0.1); /* Mac Dock şeffaflığı */

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 20px;

  backdrop-filter: blur(15px);

  -webkit-backdrop-filter: blur(15px);

  transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  z-index: 10;
}

/* Kilit Nokta: Terminalin üzerine gelince Dock yukarı süzülür */

.terminal-box:hover .mac-dock {
  bottom: 20px;
}

.dock-item {
  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-decoration: none;

  color: #fff;

  cursor: pointer;
}

.dock-icon {
  width: 50px;

  height: 50px;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;

  background: #333;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);

  transform-origin: bottom center; /* Büyümenin tabandan yukarı olmasını sağlar */
}

/* Mac Büyüme Animasyonu (Magnification) */

.dock-item:hover .dock-icon {
  transform: scale(1.4) translateY(-5px); /* İkonu büyütüp hafif yukarı zıplatır */
}

/* Uygulama Renkleri */

.phone-icon {
  background: linear-gradient(135deg, #34c759, #28a745);
}

.mail-icon {
  background: linear-gradient(135deg, #007aff, #0056b3);
}

.map-icon {
  background: linear-gradient(135deg, #ff9500, #e06900);
}

/* Mac İsim Etiketi (Tooltip) */

.dock-tooltip {
  position: absolute;

  top: -40px;

  background: rgba(0, 0, 0, 0.8);

  color: #fff;

  font-family: "Basique Light", sans-serif;

  font-size: 11px;

  padding: 4px 10px;

  border-radius: 6px;

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.2s,
    transform 0.2s;

  transform: translateY(5px);

  white-space: nowrap;

  pointer-events: none;

  letter-spacing: 0.5px;
}

/* Tooltip Üçgen Çentiği */

.dock-tooltip::after {
  content: "";

  position: absolute;

  bottom: -4px;

  left: 50%;

  transform: translateX(-50%);

  border-width: 4px 4px 0;

  border-style: solid;

  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* Üzerine gelince Tooltip gösterilsin */

.dock-item:hover .dock-tooltip {
  opacity: 1;

  visibility: visible;

  transform: translateY(
    -15px
  ); /* İkon büyüdüğü için etiketi de biraz yukarı itiyoruz */
}

/* TELEFON: iPhone Pro Max Oranı */

.phone-mockup {
  width: 340px; /* 🚀 300'den 340'a çıkarıldı */

  height: 650px; /* 🚀 TERMİNALLE TAM AYNI YÜKSEKLİK (Kritik Hizalama) */

  flex-shrink: 0;

  border-radius: 50px; /* Boyut büyüdüğü için köşe ovali biraz artırıldı */

  border: 12px solid #1a1a1a;

  background: #000;

  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.9),
    inset 0 0 12px rgba(255, 255, 255, 0.1);

  position: relative;
}

.phone-notch-top {
  position: absolute;

  top: -2px;

  left: 50%;

  transform: translateX(-50%);

  width: 100px;

  height: 25px;

  background: #1a1a1a;

  border-bottom-left-radius: 15px;

  border-bottom-right-radius: 15px;

  z-index: 10;
}

.phone-screen-inner {
  position: relative;

  width: 100%;

  height: 100%;

  background: url("../images/phone-bg.jpeg") center/cover; /* Varsa arka planın */

  background-color: #111;

  border-radius: 35px;

  overflow: hidden;

  padding-top: 40px; /* Çentik boşluğu */
}

.phone-status-bar {
  position: absolute;

  top: 15px;

  left: 25px;

  right: 25px;

  display: flex;

  justify-content: space-between;

  font-size: 12px;

  color: white;

  font-weight: bold;

  z-index: 10;
}

.app-grid {
  display: grid;

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

  gap: 15px 10px;

  padding: 20px;
}

.app-icon {
  display: flex;

  flex-direction: column;

  align-items: center;

  cursor: pointer;

  text-decoration: none;

  color: white;
}

.app-icon:hover {
  transform: scale(1.1);
}

.icon-box {
  width: 50px;

  height: 50px;

  border-radius: 12px;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 24px;

  margin-bottom: 5px;

  transition: transform 0.2s ease;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.app-icon:hover .icon-box {
  transform: scale(1.1);
}

.app-icon span {
  font-size: 10px;

  font-weight: 500;

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

/* --- İKON RENKLERİ --- */

.ig {
  background: linear-gradient(
    45deg,
    #f09433 0%,

    #e6683c 25%,

    #dc2743 50%,

    #cc2366 75%,

    #bc1888 100%
  );
}

.fb {
  background: #1877f2;
}

.tt {
  background: #000000;

  border: 1px solid #333;
}

.in {
  background: #0a66c2;
}

.x {
  background: #000000;

  border: 1px solid #333;
}

.yt {
  background: #ff0000;
}

.ns {
  background: #2c3e50;
}

.ns-logo-img {
  width: 30px;

  height: 30px;

  object-fit: contain;
}

/* NSosyal'e teknolojik bir hava katmak için üzerine hafif bir parlama efekti ekleyelim */

.ns::after {
  content: "";

  position: absolute;

  top: -50%;

  left: -50%;

  width: 200%;

  height: 200%;

  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.08) 0%,

    transparent 65%
  );

  pointer-events: none;
}

/* Hover Efekti: Uygulamaya basıyormuş hissi verelim */

.app-icon:active {
  transform: scale(0.92);
}

/* Resmin üstüne tıklayınca gitmeyi sağlayan görünmez katman */

#profile-img {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 20;
}

.fallback-icon {
  font-size: 32px;

  margin-bottom: 10px;

  color: var(--brand);

  opacity: 0.5;
}

.profile-actions > * {
  pointer-events: auto; /* Sadece butonlar tıklanabilsin */
}

.close-profile {
  background: rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(5px);

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

  color: #fff;

  border: 1px solid rgba(255, 255, 255, 0.2);

  padding: 10px 20px;

  border-radius: 20px;

  font-size: 12px;

  cursor: pointer;

  transition:
    background 0.3s,
    color 0.3s;
}

.close-profile:hover {
  background: #fff;

  color: #000;
}

/* --- DOCK (ALT ARAÇ ÇUBUĞU) --- */

.phone-dock {
  position: absolute;

  bottom: 20px;

  left: 15px;

  right: 15px;

  height: 80px;

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

  backdrop-filter: blur(15px);

  -webkit-backdrop-filter: blur(15px);

  border-radius: 25px;

  display: flex;

  justify-content: space-around;

  align-items: center;

  padding: 0 10px;

  border: 1px solid rgba(255, 255, 255, 0.1);
}

.phone-dock .icon-box {
  margin-bottom: 3px;
}

.icon-box.phone-main {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.icon-box.mail-main {
  background: linear-gradient(135deg, #3498db, #2980b9);
}

.icon-box.map-main {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.profile-fallback {
  display: none;

  flex-direction: column;

  align-items: center;

  color: #888;

  margin-bottom: 20px;
}

.profile-actions {
  display: flex;

  gap: 10px;
}

/* =======================================================

   İNTRO VİDEO VE 2 PARÇALI LOGO

======================================================= */

.intro-video-wrapper {
  position: absolute;

  inset: 0;

  width: 100vw;

  height: 100vh;

  z-index: 30;

  background: var(--bg);

  transition:
    opacity 1.5s ease,
    visibility 1.5s ease;

  /* 🚀 GPU HIZLANDIRMA (Donmaları engeller) */

  will-change: opacity, visibility, transform;

  transform: translateZ(0);

  backface-visibility: hidden;

  /* Maske sabit kalacak */

  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);

  mask-image: linear-gradient(to right, black 80%, transparent 100%);
}

.intro-video {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  /* 🚀 VİDEOYU EKRAN KARTINA DEVRET */

  transform: translateZ(0);

  will-change: transform;
}

#ana-sayfa {
  overflow: visible !important;
}

/* =======================================================

   🚀 LOGO TIKLAMA FİXİ (TAMAMEN SABİT - HAREKETSİZ)

======================================================= */

.logo-link-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99995 !important;
  pointer-events: none !important; /* ESKİDEN auto İDİ, BUNU none YAPIYORUZ */
  text-decoration: none;
}

.split-logo-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99990 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 1.5s ease;
  pointer-events: none !important; /* BUNUN DA none OLDUĞUNDAN EMİN OLALIM */
}

/* İkinci ve diğer sayfalarda (JS dışı) temizlik kalkanı */

.logo-link-wrapper .logo-part {
  filter: none !important;

  box-shadow: none !important;
}

.split-logo-container {
  position: fixed; /* absolute yerine fixed yaptık, ekrana çivilendi */

  top: 50%;

  left: 50%;

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

  z-index: 99990 !important; /* Menülerin ve sayfaların üstüne çıkardık */

  display: flex;

  justify-content: center;

  align-items: center;

  opacity: 0; /* JS ile intro bitince açılacak */

  transition: opacity 1.5s ease;

  pointer-events: none;
}

.logo-part {
  will-change: transform, opacity, filter;
  display: flex;
  transform-origin: center center;
  pointer-events: auto !important; /* YENİ EKLENDİ: Sadece logonun görünür resim kısımları tıklanabilir olacak */
}

.logo-part img {
  display: block;

  height: 80px; /* Anasayfadaki devasa boyutları */

  width: auto;
}

.medya-part {
  transform-origin: right center !important;
}

.black-part {
  transform-origin: left center !important;
}

@media (max-width: 768px) {
  .logo-part img {
    height: 45px;
  }
}

/* =======================================================

   2. ESKİ MONİTÖR (CRT) & KARINCALANMA

======================================================= */

.crt-overlay {
  position: fixed;

  inset: 0;

  z-index: 99990; /* İçeriklerin üstünde, imlecin altında */

  pointer-events: none;

  overflow: hidden;
}

/* Senin karıncalanma videon (Çok hafif saydam ve ekrana yedirilmiş) */

#static-noise-video {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.05; /* Rahatsız etmeyecek hafiflikte */

  mix-blend-mode: screen;
}

/* Tüplü monitör çizgileri ve köşe kararması (Vignette) */

.scanlines {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
    radial-gradient(circle at center, transparent 60%, rgba(0, 0, 0, 0.6) 100%);

  background-size:
    100% 4px,
    100% 100%; /* İnce yatay çizgiler */

  pointer-events: none;
}

/* =======================================================

   3. TERMİNAL İNPUT VE MATRIX EFEKTİ

======================================================= */

.terminal-input {
  background: transparent;

  border: none;

  outline: none;

  color: #fff;

  font-family: "Courier Prime", monospace;

  font-size: 15px;

  width: 100%;

  caret-color: var(--brand); /* Yanıp sönen imleç turuncu */

  box-shadow: none !important;
}

.terminal-input::placeholder {
  color: var(--brand);

  animation: blink 1s infinite;
}

#matrix-overlay {
  position: fixed;

  inset: 0;

  background: #000;

  z-index: 999995;

  display: none; /* Başlangıçta gizli */

  opacity: 0;

  transition: opacity 0.1s; /* Anlık glitch (karıncalanma) geçişi için hızlı */
}

#matrix-overlay.active {
  display: block;

  opacity: 1;
}

#matrix-canvas {
  width: 100%;

  height: 100%;

  display: block;
}

.matrix-exit {
  position: absolute;

  bottom: 30px;

  left: 50%;

  transform: translateX(-50%);

  color: #0f0;

  font-family: monospace;

  font-size: 14px;

  text-shadow: 0 0 10px #0f0;

  animation: blink 2s infinite;
}

/* =======================================================

   REVİZE: MAC DOCK İKON BOYUTLARI VE TERMİNAL POPUP

======================================================= */

/* Dock'a çok ikon geldiği için taşmayı önlemek adına boyutları düzenledik */

.mac-dock {
  gap: 8px; /* Boşlukları daralttık */

  padding: 10px 15px;

  width: 95%; /* Ekrana sığması için */

  justify-content: center;

  flex-wrap: wrap; /* Gerekirse alt satıra geçsin diye */
}

.dock-icon {
  width: 42px; /* İkonları hafif küçülttük */

  height: 42px;

  font-size: 20px;
}

#terminal-go-btn {
  position: absolute;

  bottom: 20px;
}

/* =======================================================

   A11Y (ERİŞİLEBİLİRLİK) - KLAVYE ODAKLANMASI

======================================================= */

/* Sadece klavye ile gezerken turuncu şık bir çerçeve çıkar, fareyle tıklayınca çıkmaz */

:focus-visible {
  outline: 2px solid var(--brand);

  outline-offset: 4px;

  border-radius: 4px;
}

/* WebGL Alanı Ekran Okuyuculardan Gizlenir (Kafa Karıştırmaması İçin) */

#webgl-container {
  pointer-events: none; /* Etkileşimi kapatıyoruz, GSAP zaten scroll ile hallediyor */
}

/* Yalnızca Ekran Okuyucular İçin Gizli Metin Sınıfı (SEO ve A11y için) */

.sr-only {
  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}

#matrix-canvas {
  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  z-index: 999999999; /* Bunu abarttık ki her şeyin üstüne çıksın */

  background-color: #000;

  display: none;

  pointer-events: none;
}

/* =======================================================

   🚀 SİBER GLITCH EFEKTİ (GÖRSEL / IMAGE İÇİN RGB SPLIT)

======================================================= */

/* JS bu sınıfı eklediğinde, div'in İÇİNDEKİ resim glitch efektine girer */

.glitch-effect img {
  animation: cyber-glitch 0.2s linear infinite !important;
}

@keyframes cyber-glitch {
  0%,
  100% {
    transform: translate3d(0, 0, 0) skewX(0deg);

    filter: drop-shadow(0 0 0 rgba(0, 255, 255, 0))
      drop-shadow(0 0 0 rgba(255, 0, 255, 0));
  }

  20% {
    /* Yatay esneme ve Siyan (Açık Mavi) / Macenta (Pembe) ayrışması */

    transform: translate3d(-4px, 0, 0) skewX(15deg) scaleX(1.1);

    filter: drop-shadow(-8px 0 0 rgba(0, 255, 255, 0.9))
      drop-shadow(8px 0 0 rgba(255, 0, 255, 0.9));
  }

  40% {
    transform: translate3d(4px, 0, 0) skewX(-20deg) scaleX(0.9);

    filter: drop-shadow(10px 0 0 rgba(0, 255, 255, 0.9))
      drop-shadow(-10px 0 0 rgba(255, 0, 255, 0.9));
  }

  60% {
    transform: translate3d(-2px, 0, 0) skewX(10deg) scaleX(1.05);

    filter: drop-shadow(-5px 0 0 rgba(0, 255, 255, 0.9))
      drop-shadow(5px 0 0 rgba(255, 0, 255, 0.9));
  }

  80% {
    transform: translate3d(2px, 0, 0) skewX(-5deg) scaleX(1);

    filter: drop-shadow(8px 0 0 rgba(0, 255, 255, 0.9))
      drop-shadow(-8px 0 0 rgba(255, 0, 255, 0.9));
  }
}

/* =======================================================

   🎮 EASTER EGG OYUN ALANI (NİHAİ CANVAS & NEON KONSEPT)

======================================================= */

/* --- 1. SİSTEMDEN ÇIK & OYUNA GİR BUTONLARI --- */

.game-nav-item {
  margin-left: auto;
}

.game-trigger-wrapper {
  position: absolute;

  top: 50%;

  display: flex;

  align-items: center;

  white-space: nowrap;

  left: 100%;

  margin-left: 30px;

  z-index: 9999 !important;

  pointer-events: auto !important;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.5s ease,
    transform 0.5s ease;

  transform: translateY(-50%) scale(0.8);
}

.game-trigger-wrapper.show-btn {
  opacity: 1;

  pointer-events: auto;

  transform: translateY(-50%) scale(1);
}

.nav-game-btn {
  display: flex;

  align-items: center;

  gap: 10px;

  background: rgba(255, 102, 0, 0.15);

  border: 1px solid rgba(255, 102, 0, 0.5);

  padding: 8px 18px;

  border-radius: 20px;

  color: #ff6600 !important;

  text-decoration: none;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1px;

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;

  overflow: hidden;

  box-shadow: 0 0 15px rgba(255, 102, 0, 0.1);

  pointer-events: auto !important;

  cursor: pointer !important;
}

.nav-game-btn .controller-icon {
  width: 16px;

  height: 16px;

  transition: transform 0.4s ease;
}

.btn-glow {
  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );

  transition: 0.5s;
}

.nav-game-btn:hover {
  background: #ff6600 !important;

  color: #000 !important;

  transform: scale(1.05);

  box-shadow: 0 0 25px rgba(255, 102, 0, 0.6) !important;

  border-color: #ff6600;
}

.nav-game-btn:hover .btn-glow {
  left: 100%;
}

.nav-game-btn:hover .controller-icon {
  transform: rotate(-15deg) scale(1.2);
}

.exit-game-btn {
  position: absolute;

  /* 🚀 FİX: Logonun altında kalmaması için mesafeyi 40px'den 100px'e çıkardık */

  top: 100px;

  left: 40px;

  background: rgba(255, 102, 0, 0.05);

  border: 1px solid rgba(255, 102, 0, 0.3);

  color: #ff6600;

  padding: 10px 20px;

  border-radius: 30px;

  font-family: "Courier Prime", monospace;

  font-weight: bold;

  font-size: 13px;

  cursor: pointer;

  z-index: 100;

  transition: all 0.3s ease;

  display: flex;

  align-items: center;

  gap: 10px;
}

.exit-game-btn:hover {
  background: #ff6600;

  color: #000;

  transform: scale(1.05);

  box-shadow: 0 0 20px rgba(255, 102, 0, 0.4);
}

/* --- 2. OYUN SAYFASI VE KOZMİK BOŞLUK --- */

.game-panel {
  min-height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  background-color: #030303;

  /* Siber ağ hissi veren retro grid çizgileri */

  background-image:
    linear-gradient(rgba(255, 102, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 102, 0, 0.03) 1px, transparent 1px);

  background-size: 50px 50px;

  position: relative;

  overflow: hidden;
}

/* Animasyonlu Giriş */

/* Animasyonlu Giriş İçin Wrapper (FİX: Şeffaflık kaldırıldı) */

.game-wrapper {
  width: 100vw;

  display: flex;

  flex-direction: column;

  align-items: center;

  opacity: 1; /* 🚀 FİX: Artık her zaman görünür */

  transform: scale(1) translateY(0);
}

/* Bu sınıfa artık gerek kalmadı ama kodda hata vermemesi için içi boş kalsın */

.game-wrapper.visible {
}

/* --- 3. SKOR VE BAŞLIK --- */

.game-header {
  width: 100%;

  max-width: 1000px;

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  padding: 0 30px;

  margin-bottom: 10px;

  font-family: "Courier Prime", monospace;

  color: #ff6600;
}

.game-header h2 {
  font-size: 1.8rem;

  margin: 0;

  letter-spacing: 2px;

  text-shadow: 0 0 15px rgba(255, 102, 0, 0.4);
}

.score-board {
  display: flex;

  gap: 30px;

  font-size: 1.3rem;

  font-weight: bold;

  letter-spacing: 2px;
}

.score-board span {
  color: #fff;

  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* --- 4. SONSUZ CANVAS (OYUN ALANI) --- */

.game-board-infinite {
  width: 100vw; /* Ekranı tam kaplar, kutu hissini yok eder */

  height: 35vh; /* Dinamik yükseklik */

  min-height: 250px;

  max-height: 400px;

  position: relative;

  overflow: hidden;
}

#dino-canvas {
  display: block;

  width: 100%;

  height: 100%;

  /* Canvas içindeki çizimlere (dino, kaktüs) toplu neon efekti verir */

  filter: drop-shadow(0 0 8px rgba(255, 102, 0, 0.5));
}

/* --- 5. BİLGİ EKRANLARI (BAŞLA / YANDIN) --- */

#game-over-screen,
#game-start-screen {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  background: rgba(3, 3, 3, 0.7); /* Arkadaki oyunu hafif karartır */

  backdrop-filter: blur(4px);

  color: white;

  z-index: 20;

  font-family: "Courier Prime", monospace;

  text-align: center;
}

#game-over-screen h3 {
  color: #ff3300;

  font-size: 3rem;

  margin-bottom: 15px;

  letter-spacing: 3px;

  text-shadow: 0 0 20px #ff3300;
}

#game-over-screen p,
#game-start-screen p {
  color: #aaa;

  font-size: 1.1rem;

  letter-spacing: 1px;
}

.hidden {
  display: none !important;
}

/* --- 6. KONTROL BİLGİLERİ (ALT KISIM) --- */

.game-controls {
  margin-top: 30px;

  display: flex;

  gap: 40px;

  color: #666;

  font-size: 0.9rem;

  font-family: "Courier Prime", monospace;

  letter-spacing: 1px;
}

/* Mobilde yazıları küçült ve alt alta al */

@media (max-width: 768px) {
  .game-header {
    flex-direction: column;

    align-items: center;

    gap: 15px;
  }

  .game-controls {
    flex-direction: column;

    gap: 10px;

    text-align: center;
  }

  .exit-game-btn {
    top: 20px;

    left: 20px;

    padding: 8px 15px;

    font-size: 11px;
  }
}

/* =======================================================

   🚀 SAYFA SU İZİ (WATERMARK) - MAKSİMUM KALINLIK

======================================================= */

.page-watermark {
  position: absolute;

  left: 10px; /* Kenara biraz daha yaklaştırdık */

  top: 0;

  bottom: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  /* Dikey Yazım Modu */

  writing-mode: vertical-rl;

  transform: rotate(180deg);

  /* Yazı Tipi ve Maksimum Boyutlandırma */

  font-family: "Basique Pro", sans-serif !important;

  font-size: 15vh; /* Boyutu %14'ten %16'ya çıkardık */

  /* 🚀 KALINLIK VE SIKILAŞTIRMA AYARI */

  font-weight: 950; /* Tarayıcının desteklediği en üst limit */

  text-transform: uppercase;

  letter-spacing: -0.02vh; /* Negatif değerle harfleri birbirine kenetledik, daha blok durur */

  white-space: nowrap;

  /* Renk ve Saydamlık (Daha kalın olduğu için opaklığı hafif azalttık ki boğmasın) */

  color: rgba(255, 255, 255, 0.06) !important;

  /* Arka planda kalması ve tıklamaları engellememesi için */

  z-index: 0;

  pointer-events: none;

  user-select: none;
}

/* =======================================================

   3D KATALOG VİDEO ÇÖZÜCÜ & KANAMA (TAŞMA) ENGELLEYİCİ

======================================================= */

/* 1. Kapağı kalınlaştırıp öne alıyoruz ki iç sayfalar kapalıyken asla dışarı fırlamasın */

.page-dom.p-1 .page-front {
  transform: rotateY(0deg) translateZ(5px) !important;

  z-index: 100;
}

.page-dom.p-last .page-back {
  transform: rotateY(180deg) translateZ(5px) !important;

  z-index: 100;
}

/* 2. Arka Sayfadaki Hayalet Tıklamaları %100 Kapatır */

.page-dom .page-front {
  pointer-events: auto !important;
}

.page-dom .page-back {
  pointer-events: none !important;
}

.page-dom.flipped .page-front {
  pointer-events: none !important;
}

.page-dom.flipped .page-back {
  pointer-events: auto !important;
}

/* 🚀 NİHAİ ÇÖZÜM: 3D Derinlik ve Hayalet İkonlar */

.catalog-media-box {
  transform: translateZ(
    2px
  ) !important; /* 0.5px yerine 2px yaptık, sayfa içine gömülmeyi engeller */

  pointer-events: auto !important;

  position: relative;

  width: 100%;

  height: 100%;

  background: #000;

  border-radius: 8px;

  overflow: hidden;

  z-index: 100 !important; /* Z-index zırhı eklendi */
}

/* Facade (Kapak Fotoğrafı) Görünümü */

.youtube-facade,
.local-video-facade {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  pointer-events: auto !important; /* Kapsayıcı tıklamayı alır */

  z-index: 110 !important;

  cursor: pointer !important;

  display: flex;

  justify-content: center;

  align-items: center;
}

/* 🚀 Kilit Nokta: Resim ve SVG ikonlar tıklamayı yutmasın, arkaya (kutuya) geçirsin */

.youtube-facade *,
.local-video-facade * {
  pointer-events: none !important;
}

.catalog-media-box.is-playing {
  cursor: default !important;
}

.youtube-facade .yt-thumb {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.85;

  transition: opacity 0.3s;
}

.youtube-facade:hover .yt-thumb {
  opacity: 1;
}

.yt-play-btn {
  position: absolute;

  width: 68px;

  height: 48px;

  z-index: 20;

  transition: transform 0.2s;

  pointer-events: none; /* Ekstra güvenlik */
}

.youtube-facade:hover .yt-play-btn {
  transform: scale(1.15);
}

.youtube-facade:hover .yt-bg {
  fill: #ff0000 !important;

  fill-opacity: 1 !important;
}

/* Iframe'i Kutuya %100 Zorlayan Kural ve Tıklama Yetkisi */

.catalog-media-box iframe,
.catalog-media-box video {
  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  z-index: 99999 !important; /* Her şeyin üstüne çıksın */

  pointer-events: auto !important; /* Tıklanabilir olsun */

  border: none !important;

  background: #000;
}

/* SES BUTONU  */

#audio-control {
  position: fixed;

  top: 30px;

  right: 40px;

  z-index: 10000;

  width: 45px;

  height: 45px;

  background: rgba(255, 102, 0, 0.1);

  border: 1px solid var(--brand);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  color: var(--brand);

  transition: all 0.3s ease;

  box-shadow: 0 0 10px rgba(255, 102, 0, 0.2);
}

#audio-control:hover {
  transform: scale(1.1);

  box-shadow: 0 0 20px rgba(255, 102, 0, 0.5);

  background: var(--brand);

  color: #000;
}

#audio-control.muted {
  border-color: #555;

  color: #555;

  box-shadow: none;
}

.mobile-contact-grid {
  display: none !important;
}

/* =======================================================

   SADECE MOBİL UYUMLULUK (MASAÜSTÜNÜ ASLA BOZMAZ)

======================================================= */

@media (max-width: 768px) {
  /* 1. 🚀 MOBİL TARAYICI ADRES ÇUBUĞU (KIRPILMA) FİXİ */

  html,
  body {
    overflow: hidden !important;

    position: fixed !important;

    width: 100vw !important;

    height: 100dvh !important;

    min-height: -webkit-fill-available;

    /* 🚀 FİX: 'touch-action: none;' SİLİNDİ! İçerideki kaydırmaları engelliyordu. */
  }

  .panel,
  .horizontal-scroll-wrapper {
    height: 100dvh !important;
  }

  /* 2. NAVBARIN BÜTÜN SAYFALARDA GÖRÜNMESİ VE SÜZÜLMESİ İÇİN FİX */

  .dino-nav-container {
    position: fixed !important;

    bottom: 40px !important;

    height: 165px !important;

    padding: 70px 50vw 15px 50vw !important;

    box-sizing: border-box !important;

    pointer-events: none !important;

    overflow-x: auto !important;

    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch;

    /* 🚀 FİX: 'scroll-behavior: smooth;' SİLİNDİ! JS motoru ile çakışıp takılma yapıyordu */

    z-index: 999999 !important;

    touch-action: pan-x !important;
  }

  .dino-nav-container::-webkit-scrollbar {
    display: none;
  }

  .dino-track {
    width: 900px;

    position: relative;

    flex-shrink: 0;

    /* 🚀 KAYDIRMA VE DOKUNMA YETKİSİ */

    height: 100% !important; /* Padding sayılmadığı için tam orijinal 80px alan kaplar */

    pointer-events: auto !important; /* Swipe etme ve yazılara tıklama işlemi sadece bu 80px'lik orijinal hizada algılanacak */
  }

  .page-label {
    padding: 15px 20px;

    font-size: 13px;

    transform: translateX(-50%) translateY(5px);
  }

  .page-label.active {
    transform: translateX(-50%) translateY(0);

    font-size: 15px;
  }

  /* 3. MOBİL SAYFA GENİŞLİKLERİ VE BİLEŞENLER */

  .panel {
    width: 100vw;

    height: 100vh;

    overflow: hidden !important;
  }

  #brand-logo {
    top: 20px;

    left: 20px;

    width: 100px;
  }

  #audio-control {
    top: 20px;

    right: 20px;

    width: 38px;

    height: 38px;

    font-size: 14px;
  }

  .logo-part img {
    height: 45px !important;
  }

  .page-watermark {
    font-size: 10vh !important;

    left: 0px;

    opacity: 0.05;
  }

  .intro-video {
    object-position: center center;
  }

  /* 4. 360 DERECE HİZMETLER HALKASI (Tam Ekrana Sığan Sıkı Form) */

  .services-container {
    height: 45vh;
  }

  .services-ring {
    /* 🚀 FİX: Kart genişliği 140px'ten 120px'e düşürüldü ki yan yana sığsınlar */

    width: 120px;

    height: 180px; /* Orantılı olarak boyu da biraz kısaltıldı */

    margin-top: 20px;
  }

  .service-card {
    /* 🚀 SİHİRLİ DOKUNUŞ: Çap (translateZ) 200px'den 160px'e çekildi. 

       Bu sayede kartlar birbirine yaklaşır ve aradaki o gereksiz boşluk kapanır. */

    transform: rotateY(calc(45deg * var(--i))) translateZ(160px);
  }

  .service-card.neon-active {
    /* Tıklanan kart 160'tan 200'e çıkarak öne fırlar */

    transform: rotateY(calc(45deg * var(--i))) translateZ(200px) scale(1.1) !important;
  }

  .card-face.front {
    padding: 8px; /* 4px yazılar için çok dar olabilir, 8px en temizidir */
  }

  .card-face.front .icon {
    font-size: 24px; /* Kart daraldığı için ikon da yarım tık küçüldü */

    margin-bottom: 6px;
  }

  .card-face.front h3 {
    font-size: 0.75rem; /* Uzun kelimelerin alt satıra geçmemesi için hafif küçültüldü */
  }

  /* 5. UÇUŞ EKRANI (Algıyı Biz Yönetiriz) MOBİL ÖLÇEKLENDİRME */

  .flight-card {
    width: 280px; /* Mobilde daraltıldı */

    padding: 20px;

    background: rgba(
      20,
      20,
      20,
      0.5
    ); /* Yazıların bulutların üstünde net okunması için hafif arka plan */

    border-radius: 12px;
  }

  .flight-card h3 {
    font-size: 1.8rem;
  }

  .flight-card p {
    font-size: 1rem;
  }

  /* 5. REFERANSLAR (Mobilde Boyutlandırma ve Yavaşlatılmış Akış) */

  .marquee-container {
    width: 100vw; /* Mobilde daralmasın, tam ekran genişliğini kullansın */

    gap: 30px; /* İki satır (sağ ve sol akış) arasındaki dikey boşluğu daralttık */
  }

  /* Referans Kartlarının Mobil Boyutları */

  .ref-item {
    width: 200px; /* 320px'ten 200px'e düşürdük */

    height: 100px; /* 150px'ten 100px'e düşürdük */

    padding: 15px; /* İç boşlukları daralttık */

    border-radius: 12px;
  }

  .client-logo {
    max-width: 75%; /* Logoların kutu içinde daha zarif durması için */

    max-height: 75%;
  }

  .marquee-content {
    gap: 30px; /* Kartlar arası yatay boşluğu 60'tan 30'a düşürdük */

    padding-right: 30px; /* KUSURSUZ DÖNGÜ FİXİ: Gap ile aynı olmak zorundadır! */
  }

  /* 🎛️ AKIŞ HIZI AYARI (Mobilde Daha Yavaş) */

  /* Süreyi (300s) ne kadar artırırsan kartlar o kadar yavaş akar. */

  .track-left {
    animation: scrollLeft 300s linear infinite !important;
  }

  .track-right {
    animation: scrollRight 300s linear infinite !important;
  }

  /* 🚀 DOKUNMATİK EKRAN İÇİN REFERANS DURDURMA SINIFI */

  .marquee-track.is-paused {
    animation-play-state: paused !important;
  }

  /* 7. İÇERİKLER (3D GAZETE) - KENARLARA SIFIR YAKLAŞIM */

  /* 🚀 FİX: Masaüstünden gelen sağ/sol 50px boşluğu mobilde sıfırlıyoruz */

  .news-panel .content {
    padding: 0 !important;
  }

  .news-panel {
    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: center;

    overflow: hidden;
  }

  .newspaper-mask {
    /* Görünmez duvar kalktığı için artık %98vw tam randımanlı çalışacak */

    /* Sağda ve solda sadece %1'lik milimetrik, şık bir boşluk kalır */

    width: 98vw !important;

    height: 75vh !important;

    margin-top: 60px !important;

    transform: translateY(-2%) !important;

    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);

    background: #fdfdfc;

    border-radius: 6px;

    position: relative;

    z-index: 10;
  }

  #newspaper-img {
    width: 100% !important;

    height: auto !important;

    image-rendering: -webkit-optimize-contrast;

    will-change: transform;
  }

  /* =======================================================

     8. ÇALIŞMALAR -> MOBİL DİKEY SPİRALLİ DEFTER (KESİN ÇÖZÜM)

  ======================================================= */

  /* Masaüstü kitabını gizle */

  #portfolio-book-desktop {
    display: none !important;
  }

  #book-scene {
    height: 80vh !important;

    perspective: 2500px !important;

    display: flex;

    align-items: center;

    justify-content: center;
  }

  /* 📖 Ana Defter Çerçevesi (EKSİK KOD EKLENDİ VE BİRLEŞTİRİLDİ) */

  #portfolio-book-mobile {
    display: block !important; /* 🚀 DEFTERİ GÖRÜNÜR YAPAN HAYATİ KOD */

    width: 85vw !important;

    height: 58vh !important;

    transform: translateY(
      -8vh
    ) !important; /* Defteri butonlar için yukarı çektik */

    position: relative;

    transform-style: preserve-3d;
  }

  /* 🚀 Gerçekçi Spiral (Yay) Tasarımı */

  #portfolio-book-mobile::before {
    content: "";

    position: absolute;

    top: -15px;

    left: 0;

    width: 100%;

    height: 30px;

    background-image:
      radial-gradient(circle at 10px 10px, #222 4px, transparent 5px),
      linear-gradient(to right, #555 2px, transparent 2px);

    background-size:
      20px 30px,
      20px 100%;

    background-position:
      0 0,
      9px 0;

    z-index: 99999;

    pointer-events: none;
  }

  /* Sayfa Yaprakları (Üstten Menteşeli) */

  #portfolio-book-mobile .page-dom {
    position: absolute;

    inset: 0;

    transform-origin: top center !important;

    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;

    transform-style: preserve-3d;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  }

  /* 🚀 YUKARI DOĞRU AÇILMA EFEKTİ */

  #portfolio-book-mobile .page-dom.flipped {
    transform: rotateX(180deg) !important;
  }

  #portfolio-book-mobile .page-front,
  #portfolio-book-mobile .page-back {
    position: absolute;

    inset: 0;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    overflow: hidden;

    border-radius: 4px;
  }

  #portfolio-book-mobile .page-front {
    transform: rotateX(0deg) translateZ(1px) !important;
  }

  #portfolio-book-mobile .page-back {
    transform: rotateX(180deg) translateZ(1px) !important;
  }

  /* Renkler (Kraft Kapak ve Kağıt) */

  .nb-cover-front-mobile,
  .nb-cover-back-mobile {
    background: #b5885a !important;
  }

  .nb-paper-mobile {
    background: #1a1a1a !important;
  }

  /* 🌐 Marka ve URL (Her Sayfanın Altında) */

  .nb-paper-mobile::after {
    content: "MEDYABLACK STUDIO | www.medyablack.com";

    position: absolute;

    bottom: 12px;

    left: 0;

    width: 100%;

    text-align: center;

    font-size: 9px;

    color: #999;

    font-family: "Courier Prime", monospace;

    letter-spacing: 1px;

    pointer-events: none;
  }

  /* --- VİDEO YERLEŞİMLERİ --- */

  .mobile-content-wrapper {
    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 100%;

    padding: 35px 15px 35px 15px !important;

    gap: 15px;
  }

  /* 16:9 Videolar */

  .mobile-media-box.format-16x9 {
    width: 100%;

    height: 23%;

    border-radius: 6px;

    overflow: hidden;

    background: #000;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  }

  /* 9:16 Videolar */

  .mobile-media-box.format-9x16 {
    width: 100%;

    height: 85%;

    border-radius: 12px;

    overflow: hidden;

    background: #000;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  }

  /* =======================================================

     🚀 MOBİL BUTON YERLEŞİMLERİ (Kusursuz Merkezleme)

  ======================================================= */

  #book-action-controls .hint-text,
  #book-read-controls .hint-text,
  #book-read-controls .nav-arrow:not(.close-btn) {
    display: none !important;
  }

  /* 🚀 FİX: 'display: flex !important' KALDIRILDI. Görünürlüğü artık sadece JS yönetecek */

  #book-action-controls,
  #book-read-controls {
    display: flex !important;

    position: absolute !important;

    bottom: 8vh !important;

    left: 0 !important;

    width: 100vw !important;

    justify-content: center !important;

    align-items: center !important;

    transform: translateZ(1500px) !important;

    perspective: 1000px;

    padding: 0 !important;

    z-index: 999999 !important; /* En üste aldık */

    pointer-events: none !important; /* Konteyner tıklamaları engellemesin */
  }

  .action-btn {
    font-size: 13px !important;

    padding: 0 30px !important;

    height: 45px !important;

    margin: 0 !important;

    border-radius: 30px !important;

    box-shadow: 0 5px 15px rgba(255, 102, 0, 0.4) !important;

    letter-spacing: 1px !important;

    pointer-events: auto !important; /* 🚀 FİX: Sadece Butonlar tıklanabilir olsun */

    touch-action: manipulation !important; /* Tıklama gecikmesini iptal eder */
  }

  /* =======================================================

   🚀 MOBİL İLETİŞİM SAYFASI (SADECE MOBİL)

======================================================= */

  @media (max-width: 768px) {
    /* Tüm .content'lerin mobilde padding'i 0 10px olsun */

    .content {
      /* Navbar yukarı kalktığı için, içerikleri de hafifçe yukarı itiyoruz */

      transform: translateY(-5vh);

      padding: 0 10px !important;
    }

    .logo-part img {
      height: 32px !important; /* 45px'ten 32px'e düşürdük, daha kibar oldu */

      margin: 0 auto !important; /* Tam ortalamayı garantiye aldık */
    }

    /* 2. NAVBAR YAZILARI İLE ÇİZGİ ARASI MESAFE AÇILDI */

    .page-label {
      /* translateY değerini artırarak yazıları çizgiden aşağıya doğru uzaklaştırdık */

      transform: translateX(-50%) translateY(16px) !important;
    }

    .page-label.active {
      /* Aktif neon yazının da mesafesi aynı oranda korundu */

      transform: translateX(-50%) translateY(10px) !important;
    }

    /* İletişim Paneli - Yukarıdan Başlatma ve Alt Boşluk */

    #iletisim.panel {
      display: flex !important;

      flex-direction: column !important;

      justify-content: flex-start !important;

      align-items: center !important;

      overflow-y: auto !important;

      /* Alt boşluğu artırdık (130px -> 170px) ki yazılar navbarın altında ezilmesin */

      padding: 8vh 10px 170px 10px !important;
    }

    /* Ana layout - Masaüstü Yüksekliğini Ezme */

    .contact-layout {
      display: flex !important;

      flex-direction: column !important;

      align-items: center !important;

      justify-content: flex-start !important;

      gap: 20px !important; /* 🚀 FİX: Terminal ve uygulamalar arasındaki o tatlı boşluk */

      width: 100% !important;

      max-width: 100% !important;

      height: auto !important; /* 🚀 FİX: Masaüstündeki 700px sınırını yok ettik! */

      padding: 0 !important;

      margin: 0 !important;
    }

    .terminal-box {
      flex: none !important;

      width: 100% !important;

      max-width: 100% !important;

      height: 55vh !important; /* Terminal boyu çok şişmesin diye biraz daha kısalttık */

      min-height: 180px !important;

      max-height: 380px !important;

      margin: 0 !important;

      border-radius: 16px !important;

      backdrop-filter: blur(25px);

      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    }

    .terminal-body {
      height: 100% !important;

      overflow-y: auto !important;

      padding: 12px 10px 15px 10px !important;

      font-size: 13px !important;

      line-height: 1.5 !important;

      /* 🚀 FİX: Terminale dikey kaydırma izni veriyoruz */

      touch-action: pan-y !important;
    }

    /* Telefon mokup'u gizle */

    .phone-mockup {
      display: none !important;
    }

    /* GRID ALANI - sadece mobilde göster */

    .mobile-contact-grid {
      display: grid !important;

      /* 🚀 FİX: 5 yerine 4 sütun yaptık (4x3 düzeni için) */

      grid-template-columns: repeat(4, minmax(60px, 1fr)) !important;

      justify-content: stretch !important;

      align-items: center !important;

      gap: 15px 10px !important; /* Satır aralarını hafif açtık */

      width: 100% !important;

      max-width: 100% !important;

      margin: -10px auto 0 auto !important;

      padding: 20px 10px !important;

      background: rgba(15, 15, 15, 0.7) !important;

      backdrop-filter: blur(20px) !important;

      border-radius: 28px !important;

      border: 1px solid rgba(255, 102, 0, 0.2) !important;

      box-sizing: border-box !important;
    }

    /* İkon kutusu */

    .mobile-contact-grid .app-icon {
      display: flex !important;

      flex-direction: column !important;

      align-items: center !important;

      text-decoration: none !important;

      gap: 6px !important;

      cursor: pointer !important;

      transition: transform 0.15s ease !important;

      width: 100% !important;
    }

    .mobile-contact-grid .app-icon:active {
      transform: scale(0.95) !important;
    }

    /* İkonlar 40x40px */

    .mobile-contact-grid .icon-box {
      width: 40px !important;

      height: 40px !important;

      font-size: 16px !important;

      border-radius: 12px !important;

      background: #0a0a0a !important;

      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;

      display: flex !important;

      align-items: center !important;

      justify-content: center !important;
    }

    /* NSosyal logosu */

    .mobile-contact-grid .ns-logo-img {
      width: 20px !important;

      height: 20px !important;

      object-fit: contain;
    }

    /* İkon yazıları */

    .mobile-contact-grid .app-icon span {
      font-size: 9px !important;

      font-weight: 500 !important;

      color: #ccc !important;

      text-transform: uppercase !important;

      letter-spacing: 0.3px !important;

      text-align: center !important;

      white-space: nowrap !important;
    }

    /* Renkler */

    .mobile-contact-grid .phone-main {
      background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
    }

    .mobile-contact-grid .mail-main {
      background: linear-gradient(135deg, #3498db, #2980b9) !important;
    }

    .mobile-contact-grid .map-main {
      background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    }

    .mobile-contact-grid .ig {
      background: linear-gradient(
        45deg,
        #f09433,
        #e6683c,
        #dc2743,
        #cc2366,
        #bc1888
      ) !important;
    }

    .mobile-contact-grid .fb {
      background: #1877f2 !important;
    }

    .mobile-contact-grid .tt {
      background: #000 !important;

      border: 1px solid #444;
    }

    .mobile-contact-grid .in {
      background: #0a66c2 !important;
    }

    .mobile-contact-grid .x {
      background: #000 !important;

      border: 1px solid #444;
    }

    .mobile-contact-grid .yt {
      background: #ff0000 !important;
    }

    .mobile-contact-grid .ns {
      background: #2c3e50 !important;
    }

    /* YENİ UYGULAMA RENKLERİ */

    .icon-box.home-app {
      background: linear-gradient(
        135deg,
        #8e44ad,
        #9b59b6
      ) !important; /* Estetik bir mor */
    }

    .icon-box.studio-app {
      background: linear-gradient(
        135deg,
        #f39c12,
        #e67e22
      ) !important; /* Medyablack Turuncusu */
    }
  }
}

@media (max-width: 768px) {
  .game-trigger-wrapper {
    display: none !important;
  }
}

/* =======================================================

   🚀 GÖRSELLER ÜZERİNDEN SAYFA ÇEVİRME FİXİ

======================================================= */

.catalog-media-box img,
.portfolio-img,
.full-cover-img,
.mobile-media-box img {
  /* 1. Tarayıcının resmi "dosya gibi" sürüklemesini tamamen yasaklar */

  -webkit-user-drag: none !important;

  -khtml-user-drag: none !important;

  -moz-user-drag: none !important;

  -o-user-drag: none !important;

  user-drag: none !important;

  /* 2. Mobilde üzerine basılı tutunca mavi seçim ekranı çıkmasını engeller */

  user-select: none !important;

  -webkit-user-select: none !important;

  /* 3. Fare tıklamasını doğrudan arkadaki "Sayfa (Page)" motoruna iletir */

  pointer-events: none !important;
}

/* SİTE BUTONLARI AYARLARI */

/* Buton Grubu Konumlandırma */

/* 1. Kapsayıcı Paketi: Konumu burası belirler */

.header-controls {
  position: fixed; /* Ekrana çivileme sadece burada olmalı */

  top: 30px;

  right: 40px;

  z-index: 10000;

  display: flex !important; /* Yan yana gelmeyi zorlar */

  flex-direction: row !important; /* Yatay dizilim */

  gap: 15px; /* Aradaki boşluk */

  align-items: center;
}

/* 2. Butonların Kendisi: Artık fixed olmamalılar */

.control-btn,
#audio-control,
#studio-control {
  position: relative !important; /* Fixed varsa onu iptal eder */

  top: auto !important;

  right: auto !important;

  /* Ortak Stil */

  width: 45px;

  height: 45px;

  background: rgba(255, 102, 0, 0.1);

  border: 1px solid var(--brand);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  color: var(--brand);

  transition: all 0.3s ease;

  box-shadow: 0 0 10px rgba(255, 102, 0, 0.2);

  text-decoration: none;
}

/* Hover Efekti */

.control-btn:hover {
  transform: scale(1.1);

  background: var(--brand);

  color: #000;
}

/* =======================================================

   🚀 STÜDYO BİLDİRİM KUTUSU (TOOLTIP STYLE)

======================================================= */

/* Butonu sarmalayan yeni yardımcı sınıf */

.studio-wrapper {
  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;
}

.studio-notification {
  position: absolute;

  top: 60px; /* Butonun hemen altına hizalar */

  background: #ffffff00; /* Dikkat çekmesi için beyaz */

  color: #ff6600be; /* Yazı siyah */

  padding: 8px 15px;

  border-radius: 8px;

  border: #ff6600;

  font-family: "Basique Regular", sans-serif;

  font-size: 13px;

  font-weight: 900;

  white-space: nowrap;

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(255, 102, 0, 0.8);

  z-index: 10001;

  pointer-events: none; /* Butona tıklamayı engellemez */

  animation: notiFloat 3s ease-in-out infinite; /* Hafif yüzme hareketi */
}

/* Mesaj kutusunun üstündeki küçük ok (Arrow) */

.noti-arrow {
  position: absolute;

  top: -6px;

  left: 50%;

  transform: translateX(-50%);

  width: 0;

  height: 0;

  border-left: 6px solid transparent;

  border-right: 6px solid transparent;

  border-bottom: 6px solid #ff660093;
}

/* Kutunun hafif yukarı aşağı oynaması için animasyon */

@keyframes notiFloat {
  0%,
  100% {
    transform: translateY(0);
  }

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

/* 📱 Sadece Desktop İçin: Mobilde Kapat */

@media (max-width: 768px) {
  .studio-notification {
    display: none !important;
  }
}

/* =======================================================

   🚀 MEDYABLACK BIOS BOOT EKRANI (SAF SİYAH & BEYAZ)

======================================================= */

#bios-boot-screen {
  position: fixed;

  inset: 0;

  background-color: #000;

  z-index: 9999999;

  color: #e0e0e0;

  font-family: "Basique Regular", sans-serif;

  font-size: 15px;

  letter-spacing: 1px;

  box-sizing: border-box;

  display: flex;

  justify-content: center;

  align-items: center;

  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

#bios-text-container {
  position: absolute;

  inset: 0;

  padding: 40px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  transition: opacity 0.3s ease;
}

.bios-header {
  display: flex;

  gap: 60px;
}

.bios-info {
  margin-left: 20px;
}

.bios-spacer {
  height: 16px;
}

.bios-body {
  flex: 1;

  margin-top: 30px;
}

.resource-list {
  margin-top: 15px;

  margin-left: 30px;

  color: #888;

  height: 120px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;
}

.blinking-cursor {
  display: inline-block;

  width: 10px;

  height: 18px;

  background-color: #e0e0e0;

  animation: biosBlink 1s step-end infinite;

  vertical-align: middle;
}

@keyframes biosBlink {
  50% {
    opacity: 0;
  }
}

.loading-blink {
  animation: textBlink 0.5s infinite alternate;
}

@keyframes textBlink {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.5;
  }
}

/* POPUP TASARIMI - SIFIR RENK */

#bios-popup-container {
  position: absolute;

  inset: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  transition: opacity 0.5s ease;
}

.bios-popup {
  background-color: #000;

  padding: 30px 40px;

  border: 2px solid #fff; /* Saf beyaz çerçeve */

  max-width: 500px;

  text-align: center;
}

.bios-popup p:first-child {
  font-size: 18px;

  font-weight: bold;

  color: #fff;
}

.bios-btn-wrapper {
  margin-top: 25px;

  display: flex;

  justify-content: center;
}

.bios-start-button {
  background-color: #fff; /* İçi beyaz */

  color: #000; /* Yazı siyah */

  border: 2px solid #fff;

  padding: 10px 40px;

  font-family: "Courier Prime", monospace;

  font-weight: bold;

  font-size: 18px;

  cursor: pointer;

  transition:
    background-color 0.2s,
    color 0.2s;
}

.bios-start-button:hover {
  background-color: #000; /* Üzerine gelince tersine döner */

  color: #fff;
}

@media (max-width: 768px) {
  #bios-text-container {
    padding: 20px;

    font-size: 12px;
  }

  .bios-header {
    flex-direction: column;

    gap: 20px;
  }

  .bios-info {
    margin-left: 0;
  }

  .bios-popup {
    padding: 20px;

    width: 90%;
  }
}

/* =======================================================
   🚀 NİHAİ MOBİL KART DESTESİ (2D DÜZLEM - SIFIR KASMA)
======================================================= */
@media (max-width: 768px) {
  #portfolio-book-desktop {
    display: none !important;
  }

  /* NAVBAR ELLE KAYDIRMA FİXİ */
  .dino-nav-container {
    left: 0 !important;
    width: 100vw !important;
    z-index: 2147483640 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: auto !important;
  }

  * {
    will-change: auto !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .terminal-box,
  .flight-card,
  .mobile-contact-grid {
    background: rgba(15, 15, 15, 0.98) !important;
    box-shadow: none !important;
  }

  /* ANA KASA */
  #portfolio-book-mobile {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 2147483645 !important;
    pointer-events: none !important;
  }
  #portfolio-book-mobile.is-mobile-active {
    background: #050505 !important;
    pointer-events: auto !important;
  }
  #portfolio-book-mobile:not(.is-mobile-active) .page-dom:not(.p-1) {
    display: none !important;
  }

  /* 🚀 SAYFALAR (Tinder Mantığı - 2D Düzlem) */
  #portfolio-book-mobile .page-dom {
    position: absolute !important;
    width: 88vw !important;
    max-width: 380px !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    max-height: 65vh !important;
    top: 0 !important;
    bottom: 22vh !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8) !important;
    background: #111 !important;
    pointer-events: auto !important;

    /* MUCİZE BURADA: 3D DERİNLİĞİ SIFIRLADIK! */
    transform: translateY(0) scale(1) translateZ(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    will-change: transform, opacity !important; /* GPU'ya ipucu verir */
    transition:
      transform 0.4s ease,
      opacity 0.3s ease,
      visibility 0s 0s !important;
  }

  /* 🚀 YUKARI KAYBOLAN SAYFA (RAM'DEN GİZLENİR) */
  #portfolio-book-mobile .page-dom.flipped {
    transform: translateY(-100%) scale(0.9) translateZ(0) !important;
    opacity: 0 !important;
    visibility: hidden !important; /* Ekranda çizilmez, üst üste binme bug'ı biter! */
    pointer-events: none !important;
    transition:
      transform 0.4s ease,
      opacity 0.3s ease,
      visibility 0s 0.4s !important;
  }

  #portfolio-book-mobile.is-mobile-active .page-dom {
    top: 0 !important;
    bottom: 12vh !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
  }
  #portfolio-book-mobile .page-back {
    display: none !important;
  }
  #portfolio-book-mobile .page-front {
    position: absolute !important;
    inset: 0 !important;
    transform: none !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
  }

  /* BUTONLAR (Kusursuz Sabit) */
  #book-action-controls,
  #book-read-controls {
    position: fixed !important;
    bottom: 4vh !important;
    left: 0 !important;
    width: 100vw !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform: none !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;
  }
  #book-action-controls *,
  #book-read-controls * {
    pointer-events: auto !important;
  }
  #book-read-controls .nav-arrow:not(.close-btn) {
    display: none !important;
  }

  /* VİDEOLARIN DÜZENİ */
  .mobile-content-wrapper {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 15px !important;
  }
  .mobile-media-box {
    background: #000 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }
  .mobile-media-box.format-16x9 {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
  .mobile-media-box.format-9x16 {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 9 / 16 !important;
  }

  /* 🚀 iOS SAFARİ REFERANSLAR (MARQUEE) GÖRÜNMEME FİXİ */
  .marquee-container {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .track-left {
    animation: scrollLeft 80s linear infinite !important;
  }
  .track-right {
    animation: scrollRight 80s linear infinite !important;
  }
  .marquee-track {
    will-change: transform !important;
  }
  .ref-item {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }
  .client-logo {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }

  /* =======================================================
     🚀 iOS SAFARİ REFERANSLAR (MARQUEE) GÖRÜNMEME FİXİ
  ======================================================= */

  /* 1. Maskeleme yapılan ana kutuyu ekran kartına (GPU) zimmetliyoruz */
  .marquee-container {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }

  /* 1. Hızı 300 saniyeden 80 saniyeye çekerek akışı gözle görülür hale getiriyoruz */
  .track-left {
    animation: scrollLeft 175s linear infinite !important;
  }
  .track-right {
    animation: scrollRight 175s linear infinite !important;
  }

  /* 2. iOS Safari için hareketi dondurmadan katman zorlaması yapıyoruz */
  .marquee-track {
    will-change: transform !important; /* El freni yerine sadece GPU'yu uyarıyoruz */
  }

  /* 3. Kutuların şeffaflaşmasını / kaybolmasını önleyen zırh */
  .marquee-container {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .ref-item {
    /* Safari'nin "bu kutuyu çizmeme gerek yok" demesini engeller */
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  /* 3. Kartların görünmez olmasını engelleyen WebKit zırhı */
  .ref-item {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  /* 4. Logoların geç yüklenip Safari'de şeffaf kalmasını önler */
  .client-logo {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }
}
/* =======================================================
   🚀 NİHAİ MOBİL NAVBAR (DİNO) FİXİ 
   Sıfır Kesilme, Özgür Kaydırma, Sabit Dokunmatik Alan
======================================================= */
@media (max-width: 768px) {
  /* 1. BOOT (YÜKLEME) EKRANI KESİN KORUMASI */
  #bios-boot-screen,
  #matrix-overlay {
    z-index: 2147483647 !important;
  }

  /* 2. KUSURSUZ MOBİL NAVBAR (HAYALET KATMAN FİXİ) */
  .dino-nav-container {
    position: fixed !important;
    bottom: 35px !important;
    left: 0 !important;
    width: 100vw !important;

    /* 🚀 GÖRSEL YÜKSEKLİK: Dinozorun kafası kesilmesin diye 120px'e çıkardık */
    height: 120px !important;

    box-sizing: border-box !important;
    padding: 0 !important;

    /* 🚀 HAYALET KATMAN: Bu devasa 120px'lik alan sayfanın kaymasını ENGELLEMEZ! */
    pointer-events: none !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    z-index: 99990 !important;
    transform: translateZ(0) !important;
    scrollbar-width: none !important;
  }

  .dino-nav-container::-webkit-scrollbar {
    display: none !important;
  }

  /* 3. DİNOZOR PİSTİ (DOKUNMATİK ALAN BURASI) */
  .dino-track {
    width: 900px !important;

    /* 🚀 DOKUNMATİK YÜKSEKLİK: Senin istediğin gibi sadece 75px'lik alan kaydırılabilir */
    height: 75px !important;
    position: relative !important;

    /* Pisti 120px'lik kutunun en altına itiyoruz ki üstte zıplama boşluğu kalsın */
    top: 45px !important;

    /* Sadece bu 75px'lik pist dokunmaları algılar! */
    pointer-events: auto !important;

    display: block !important;
    margin: 0 50vw !important;
  }

  /* 4. YAZI, DİNOZOR VE ÇİZGİ HİZALAMALARI (75px'lik piste göre) */
  .track-line {
    bottom: 25px !important;
  }

  .cactus,
  #dino-wrapper {
    bottom: 25px !important;
  }

  .page-label {
    /* 🚀 YAZI KESİLME FİXİ: Yazıları 5px yukarı çektik ve aşağı iten hayalet boşlukları sildik */
    bottom: 5px !important;
    padding: 5px 15px !important;
    font-size: 11px !important;
    transform: translateX(-50%) translateY(0) !important;
    line-height: 1 !important;
  }

  .page-label.active {
    font-size: 13px !important;
    transform: translateX(-50%) translateY(-2px) !important;
  }
}