* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* ===== GLOBAL ===== */

/* Mobile tap highlight kapat */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}


/* FONT YÜKLENENE KADAR SAYFAYI GİZLE */

/* Ana menü gizli başlasın */
html:not(.fonts-ready) body.page-home {
  opacity: 0;
}

/* Galeri de gizli başlasın */
html:not(.fonts-ready) body.page-gallery {
  opacity: 0;
}

/* Fontlar gelince ikisi de yumuşak açılsın */
html.fonts-ready body.page-home,
html.fonts-ready body.page-gallery {
  opacity: 1;
  transition: opacity 0.35s ease;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}


body {
  background: #000;
  background-attachment: fixed;

  color: #eaeaea;
  font-family: 'Anton', system-ui, sans-serif;
  min-height: 100vh;

  overflow-x: hidden;
}

/* SADECE ana menüde scroll aktif */
body.page-home {
  overflow-y: auto;
}

/* SADECE galeride scroll kapalı (istersen) */
body.page-gallery {
  overflow-y: hidden;
}

/* ===== HEADER ===== */

.top {
  padding: 40px 20px 20px;
  text-align: center;
}

.logo{
  position: relative;
  display: inline-block;
}

.logo img {
  width: clamp(210px, 18vw, 288px);
  height: clamp(210px, 18vw, 288px);

  opacity: 0.92;

  /* 🎬 SİNEMATİK TON */
  filter:
    brightness(0.85)
    contrast(1.08)
    saturate(0.92);

  transition:
    transform 0.45s ease,
    opacity 0.45s ease,
    filter 0.45s ease;
}




.logo img:hover {
  transform: scale(1.05);
  opacity: 1;
}


.links {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.links a {
  font-size: 40px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888;
  text-decoration: none;
  transition: color 0.3s ease;
}

.links a:hover {
  color: #fff;
}



.manifesto .accent {
  color: #786cac;

  text-shadow:
    0 0 6px rgba(125, 119, 150, 0.45),
    0 0 14px rgba(90, 75, 140, 0.25),
    0 0 28px rgba(100, 89, 136, 0.12);
}


/* 2) KART (senin map kartın) */
.gallery-map{
  position: relative;
  width: 100%;
  height: 100%;

  border-radius: 22px;
  overflow: hidden;  /* kartın içini kes, aura içeride görünmesin */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 4;
  /* ekstra sinematik kenar gölgesi */
  box-shadow:
    inset 0 0 120px rgba(0,0,0,0.65),
    inset 0 0 260px rgba(0,0,0,0.55);
}


.map-edge{ opacity: calc(var(--p) * 0.95); }

/* görsel kartın içinde */
.gallery-map::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("map-bg.jpg") center / cover no-repeat;
  z-index: 0;

  transform: scale(1);
  transform-origin: center;

  transition: transform 1500ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;

  /* 🔥 SİNEMATİK TON */
  filter:
    brightness(0.78)
    contrast(1.12)
    saturate(0.92);
}



/* senin sevdiğin karartı */
.gallery-map::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* SINEMATİK KARARTI */
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.25) 45%,
      rgba(0,0,0,0.75) 78%,
      rgba(0,0,0,0.95) 100%
    );

  z-index: 1;
}



/* Map’in içinde hover katmanlarını taşıyabilmek için */
.gallery-map-link{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* again? üstte kalsın */
.gallery-map-link .map-center{
  position: relative;
  z-index: 5;
}

/* =========================
   1) LENS: “büyüteç” (mikro zoom)
   Box aynı kalır, sadece imleç çevresi zoom olur
   ========================= */
.map-lens{
  position:absolute;
  inset:0;
  border-radius: 22px;
  pointer-events:none;
  z-index: 6;

  background-image: url("map-bg.jpg");
  background-repeat:no-repeat;

  /* gerçek büyüteç */
  background-size: 145% 145%;
  background-position: var(--mx, 50%) var(--my, 50%);

  -webkit-mask-image: radial-gradient(
    circle 200px at var(--mx, 50%) var(--my, 50%),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 38%,
    rgba(0,0,0,0) 75%
  );
  mask-image: radial-gradient(
    circle 200px at var(--mx, 50%) var(--my, 50%),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 38%,
    rgba(0,0,0,0) 75%
  );

  filter: saturate(1.08) contrast(1.06);
  opacity: calc(var(--p) * 0.9);
  transition: opacity 160ms ease;
  display:none !important;
}


/* =========================
   2) EDGE: “lokal neon border”
   Tam çerçeve değil: imleç neredeyse o kısım yanar
   ========================= */
.gallery-map-link .map-edge{
  position:absolute;
  inset:0;
  border-radius: 22px;
  pointer-events:none;
  z-index: 4;

  /* senin again neon tonun */
  --edgeA: rgba(160,120,255,0.85);
  --edgeB: rgba(120,90,200,0.22);

  /* ✅ 2.5x daha geniş etki alanı */
  background: radial-gradient(
    circle 425px at var(--mx, 50%) var(--my, 50%),
    var(--edgeA) 0%,
    rgba(160,120,255,0.35) 30%,
    var(--edgeB) 52%,
    rgba(120,90,200,0) 76%
  );

  /* sadece çerçeve halkası kalsın */
  padding: 2px;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  /* ✅ “çerçevenin dışına taşan aura” hissi */
  filter:
    blur(10px)
    drop-shadow(0 0 16px rgba(160,120,255,0.40))
    drop-shadow(0 0 42px rgba(120,90,200,0.25));

  mix-blend-mode: screen;

  opacity: calc(var(--p) * 0.95);
  transition: opacity 180ms ease;
}

/* DIŞA TAŞAN, SOFT “AURA BULUT” — köşelere de denk gelir */
.gallery-map-wrap .map-aura{
  position: absolute;

  /* dış taşma alanı — amatör görünmemesi için kontrollü */
  inset: -70px;

  /* kartın köşe formunu takip etsin */
  border-radius: calc(22px + 70px);

  pointer-events: none;
  z-index: 3;

  /* soft ve koyu again tonu */
  --auraA: rgba(140, 100, 220, 0.26);
  --auraB: rgba(90, 70, 160, 0.12);

  /* daire değil → ellipse = köşelere ulaşır */
  background: radial-gradient(
    ellipse 360px 260px at var(--mx, 50%) var(--my, 50%),
    var(--auraA) 0%,
    var(--auraB) 48%,
    rgba(90,70,160,0) 78%
  );

  /* tamamen soft aura */
  filter: blur(36px);
  opacity: calc(var(--p) * 0.75);
  transition: opacity 180ms ease;
  mix-blend-mode: screen;
}



/* 1) DIŞ WRAPPER: aura bunun dışına taşacak */
.gallery-map-wrap{
  width: min(90vw, 1200px);
  aspect-ratio: 297 / 210;
  margin: 200px auto;
  position: relative;
  overflow: visible; /* kritik: aura dışarı taşsın */
  isolation: isolate;
  --p: 0;
  --zoom: 1;
  --mx: 50%;
  --my: 50%;
  transition: --p 180ms ease;
}

/* Mouse kartın içine girince: hafif zoom (box değişmez) */
.gallery-map-wrap:hover{
  --zoom: 1.035; /* 1.02 - 1.06 arası deneyebilirsin */
}

/* kolaj alanı */
.map-grid {
  position: absolute;
  width: 80%;
  max-width: 1200px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* tek kutu */
.map-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);

  filter: blur(2px);
  opacity: 0.75;
}

.map-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-center {
  position: relative;
  z-index: 2;

  background: none;
  border: none;
  padding: 0;
  margin: 0;

  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 1.9vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: none;

  color: #130224;
  cursor: pointer;
  text-decoration: none;

  text-shadow:
    0 0 6px rgba(19, 3, 32, 0.60),
    0 0 14px rgba(40, 11, 82, 0.28);

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

  /* 🔥 BELİRGİN NEFES */
  animation: mapBreathe 3.6s ease-in-out infinite;

  transition: transform 0.35s ease, text-shadow 0.35s ease, opacity 0.35s ease;
  transform-origin: center;
  will-change: transform, opacity;
}


/* hover gelince nefes animasyonu başlasın */
.map-center:hover {
  transform: scale(1.07);
  text-shadow:
    0 0 10px rgba(26, 16, 46, 0.55),
    0 0 22px rgba(29, 23, 48, 0.35),
    0 0 40px rgba(23, 17, 37, 0.18);

  transition: 
    transform 0.6s ease,
    text-shadow 0.6s ease;
}

.map-center::after {
  content:"";
  position:absolute;
  inset:-20px;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(140,110,220,0.25),
    transparent 70%
  );
  opacity: 0;
  filter: blur(25px);
  transition: opacity 0.6s ease;
  z-index:-1;
}

.map-center:hover::after {
  opacity: 1;
}


/* nefes keyframes */
@keyframes breathe {
  0% {
    transform: scale(1.05);
    filter: blur(0px);
    text-shadow:
      0 0 6px rgba(23, 1, 41, 0.30),
      0 0 14px rgba(39, 11, 77, 0.22);
  }
  50% {
    transform: scale(1.035);
    filter: blur(0.15px);
    text-shadow:
      0 0 10px rgba(23, 1, 41, 0.45),
      0 0 22px rgba(39, 11, 77, 0.30);
  }
  100% {
    transform: scale(1.035);
    filter: blur(0px);
    text-shadow:
      0 0 6px rgba(23, 1, 41, 0.30),
      0 0 14px rgba(39, 11, 77, 0.22);
  }
}


/* ===== GALLERY INTRO ===== */

.gallery-intro {
  margin: 200px 0 300px;
  text-align: center;
}

.gallery-intro p {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.5rem, 5vw, 6rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: #1a1029;
}

/* ===== SCENE ===== */

/* ===== SCENE BLOCK – NET VE ETKİLİ ===== */

.scene {
  position: relative;
  width: 100%;
  min-height: 80vh;
  margin: 350px 0;

  background: transparent;
}

/* iç yapı */
.scene-inner {
  position: relative;
  z-index: 2;

  max-width: 1600px;
  margin: 0 auto;
  padding: 80px 80px;

  display: grid;
  grid-template-columns: 1.4fr 2fr; /* YAZI ALANI BİLDİĞİN GENİŞLİYOR */
  align-items: center;
  gap: 140px;
}

/* GÖRSEL */
.scene-image img {
  width: 100%;
  max-width: 720px;   /* GÖZLE GÖRÜLÜR BÜYÜME */
  display: block;
  filter: brightness(0.99);
}

/* YAZI */


.scene-text p + p {
  opacity: 0.85;
}


.scene-text {
  display: flex;
  flex-direction: column;
  gap: 0.25em; /* satırlar arası bilinçli yakınlık */
}

/* ===== SCENE REVERSE (ÇALIŞAN HAL) ===== */

.scene.reverse .scene-inner {
  grid-template-columns: 2fr 1.4fr;
}

.scene.reverse .scene-image {
  order: 2;
}

.scene.reverse .scene-text {
  order: 1;
  text-align: left;
}

.scene-text p {
  font-family: 'Alumni Sans Pinstripe', sans-serif;
  font-weight: 400;              /* ŞART */
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.15;

  letter-spacing: 0.03em;        /* çok az */
  text-transform: none;          /* ÖNEMLİ */
  margin: 0;

  color: #f1f1f1;
}
.scene-1 .scene-text p {
  color: #3c3562;
      text-shadow:
    0 0 6px rgba(84, 65, 122, 0.356),
    0 0 12px rgba(129, 108, 163, 0.15);
}

.scene-2 .scene-text p {
  color: #1e363c;
      text-shadow:
    0 0 6px rgba(98, 161, 185, 0.432),
    0 0 12px rgba(95, 151, 165, 0.15);
}

.scene-3 .scene-text p {
  color: #011a30;
      text-shadow:
    0 0 6px rgba(59, 80, 112, 0.356),
    0 0 12px rgba(49, 73, 105, 0.15);
}

.scene-4 .scene-text p {
  color: #1d0e47;
      text-shadow:
    0 0 6px rgba(77, 73, 116, 0.356),
    0 0 12px rgba(146, 134, 190, 0.15);
}

.scene-5 .scene-text p {
  color: #512f25;
    text-shadow:
    0 0 6px rgba(163, 96, 57, 0.356),
    0 0 12px rgba(179, 103, 103, 0.15);
}

.scene-6 .scene-text p {
  color: #3b141a;
    text-shadow:
    0 0 6px rgba(90, 45, 42, 0.356),
    0 0 12px rgba(136, 59, 59, 0.15);
}

.scene-image {
  position: relative;
}

.scene-image::before {
  content: "";
  position: absolute;
  inset: -40px;               /* glow */
  background: radial-gradient(
    circle,
    rgba(36, 34, 34, 0.322),
    rgba(46, 43, 43, 0.315),
    transparent 70%
  );
  filter: blur(40px);
  z-index: -1;
}

.scene-image img {
  border-radius: 14px;
  mask-image: radial-gradient(
    circle at center,
    black 70%,
    transparent 100%);
}

.scene-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(
    circle at center,
    transparent 60%,
    rgba(0, 0, 0, 0.096) 100%
  );
  pointer-events: none;
}

/* ===== THUMB RAIL (GALLERY) ===== */

.thumb-rail {
  position: fixed;
  top: 50%;
  right: 24px;                 
  transform: translateY(-50%);
  z-index: 50;

  display: flex;
  flex-direction: column;
  gap: 17.2px;
}

.thumb {
  width: 74px;
  height: 74px;

  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;

  background: transparent;
  padding: 0;
  cursor: pointer;

  /* “üst üste” hissi */
  margin-top: -18px;

  opacity: 0.55;
  filter: blur(0.6px);

  transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease, border-color 0.25s ease;
}

.thumb:first-child { margin-top: 0; }

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb:hover {
  opacity: 0.95;
  filter: blur(0px);
  transform: translateX(-6px) scale(1.02);
}

.thumb.is-active {
  opacity: 1;
  filter: blur(0px);
  transform: translateX(-10px) scale(1.03);
  border-color: rgba(255,255,255,0.18);
}

/* ===== GALLERY BACK NAV ===== */

.gallery-top {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);

  z-index: 100;              /* her şeyin üstünde */
  opacity: 1;               /* artık sabit görünür */
  pointer-events: auto;
  transition: opacity .25s ease;

  will-change: transform;
}

.gallery-nav {
  display: flex;
  align-items: center;
}

.gallery-back {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.3rem);  /* daha zarif */
  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.55);
  text-decoration: none;
  cursor: pointer;

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


.gallery-back:hover {
  color: #ffffff;
  text-shadow:
    0 0 6px rgba(255,255,255,0.25),
    0 0 14px rgba(180,180,255,0.15);
  transform: translateX(-3px);
}

/* SADECE GALERİDE scrollbar gizli */
body.page-gallery {
  scrollbar-width: none;      /* Firefox */
}

body.page-gallery::-webkit-scrollbar {
  width: 0;
  height: 0;
}
 
.icon-link svg line {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: bottom;
}

.icon-link:hover svg line:nth-child(1) {
  transform: scaleY(1.1);
}

.icon-link:hover svg line:nth-child(2) {
  transform: scaleY(1.2);
}

.icon-link:hover svg line:nth-child(3) {
  transform: scaleY(1.3);
}

.icon-link:hover svg {
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.25));
}

.icon-link:hover svg line {
  opacity: 0.95;
}

/* ===== STARFIELD ===== */
.starfield{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* içerik üstte kalsın diye */
  overflow: hidden;
}

/* 3 katman: küçük / orta / az büyük noktalar */
.starfield::before,
.starfield::after{
  content:"";
  position:absolute;
  inset: -200px;               /* animasyonda boşluk oluşmasın */
  background-repeat: repeat;
  opacity: 0.7;
  will-change: transform;
}

/* 1) çok küçük ve çok sayıda */
.starfield::before{
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.9) 50%, transparent 55%),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.7) 50%, transparent 55%),
    radial-gradient(1px 1px at 55% 40%, rgba(255,255,255,0.8) 50%, transparent 55%),
    radial-gradient(1px 1px at 75% 10%, rgba(255,255,255,0.6) 50%, transparent 55%),
    radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,0.85) 50%, transparent 55%),
    radial-gradient(1px 1px at 15% 55%, rgba(255,255,255,0.5) 50%, transparent 55%),
    radial-gradient(1px 1px at 45% 15%, rgba(255,255,255,0.65) 50%, transparent 55%),
    radial-gradient(1px 1px at 65% 75%, rgba(255,255,255,0.55) 50%, transparent 55%),
    radial-gradient(1px 1px at 85% 35%, rgba(255,255,255,0.7) 50%, transparent 55%);

  background-size: 260px 260px;  /* yoğunluk ayarı */
  filter: blur(0.2px);
  animation: starsDrift 38s linear infinite;
}

/* 2) daha seyrek orta noktalar */
.starfield::after{
  background-image:
    radial-gradient(1.6px 1.6px at 20% 30%, rgba(255,255,255,0.55) 45%, transparent 60%),
    radial-gradient(1.6px 1.6px at 60% 70%, rgba(255,255,255,0.45) 45%, transparent 60%),
    radial-gradient(1.6px 1.6px at 80% 25%, rgba(255,255,255,0.5) 45%, transparent 60%),
    radial-gradient(1.6px 1.6px at 40% 90%, rgba(255,255,255,0.4) 45%, transparent 60%),
    radial-gradient(1.6px 1.6px at 92% 78%, rgba(255,255,255,0.42) 45%, transparent 60%);

  background-size: 520px 520px;
  filter: blur(0.35px);
  opacity: 0.22;
  animation: starsDrift2 22s linear infinite;
}

/* hareket: hafif çapraz drift */
@keyframes starsDrift{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-220px, 180px, 0); }
}

@keyframes starsDrift2{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(160px, -140px, 0); }
}

/* içerik yıldızların üstünde kalsın */
body > *{
  position: relative;
  z-index: 1;
}

/* ===== ABOUT AGAIN (AURA STYLE) ===== */

.about-again {
  max-width: 900px;
  margin: 500px auto 500px;

  display:flex;
  flex-direction: column;
  gap: 28px;
  text-align: center;
}/* BAŞLIK */
.about-title {
  font-family: 'Alumni Sans Pinstripe', sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);

  letter-spacing: 0.07em;

  color: #5a4a7a;          /* soft mor – ana tema */
  opacity: 0.9;
}

/* METİN */
.about-text {
  font-family: 'Alumni Sans Pinstripe', sans-serif;

  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  line-height: 1.4;

  letter-spacing: 0.03em;

  color: #f1f1f1;

  max-width: 700px;
  margin: 0 auto;
}

.about-again h2 {
  font-family: 'Alumni Sans Pinstripe', sans-serif;
  font-weight: 300;
  font-size: clamp(1.8rem, 3.15vw, 2.85rem);
  letter-spacing: 0.08em;
  color: #eaeaea;
  margin-bottom: 10px;
}

/* neon kelime */
.about-again .neon{
  position: relative;
  display: inline-block;

  color: #6a4a95; /* senin soft mor tonu */
  text-shadow:
    0 0 6px rgba(106, 74, 149, 0.25),
    0 0 14px rgba(106, 74, 149, 0.18);
}

/* asıl "arkadan parlayan neon bulutu" */
.about-again .neon::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);

  width: 140%;
  height: 1.8em;

  background: radial-gradient(
    ellipse at center,
    rgba(160, 120, 255, 0.55) 0%,
    rgba(120, 90, 200, 0.30) 42%,
    rgba(120, 90, 200, 0.00) 76%
  );

  filter: blur(20px);
  opacity: 0.55;

  z-index: -1;
  pointer-events: none;

  /* ateş gibi düzensiz */
  animation: fireGlow 20s infinite;
}


.about-again p {
  font-family: 'Alumni Sans Pinstripe', sans-serif;
  font-weight: 400;

  font-size: clamp(1.5rem, 2.3vw, 2rem);

  line-height: 0.88;          /* NEREDEYSE BİRLEŞİK */
  letter-spacing: 0.02em;    /* açılmayı geri topladık */

  color: rgba(235,235,235,0.92);

  max-width: 700px;
  margin: 0 auto 2px auto;   /* SATIRLAR BİRBİRİNE YAPIŞIK */

  opacity: 0.9;
}




@keyframes fireGlow{
  /* sakin */
  0%   { opacity: .45; filter: blur(20px); transform: translate(-50%, -50%) scale(1.00); }
  6%   { opacity: .58; filter: blur(22px); transform: translate(-50%, -50%) scale(1.03); }
  12%  { opacity: .40; filter: blur(19px); transform: translate(-50%, -50%) scale(0.99); }

  /* küçük titreme */
  18%  { opacity: .62; filter: blur(23px); transform: translate(-50%, -50%) scale(1.05); }
  22%  { opacity: .50; filter: blur(21px); transform: translate(-50%, -50%) scale(1.01); }

  /* anlık parıltı (alev yükselişi) */
  33%  { opacity: .82; filter: blur(26px); transform: translate(-50%, -50%) scale(1.10); }
  36%  { opacity: .55; filter: blur(22px); transform: translate(-50%, -50%) scale(1.02); }

  /* uzun sakin bölüm */
  50%  { opacity: .48; filter: blur(20px); transform: translate(-50%, -50%) scale(1.00); }
  58%  { opacity: .60; filter: blur(23px); transform: translate(-50%, -50%) scale(1.04); }
  64%  { opacity: .44; filter: blur(19px); transform: translate(-50%, -50%) scale(0.99); }

  /* ikinci “alev” */
  76%  { opacity: .78; filter: blur(25px); transform: translate(-50%, -50%) scale(1.09); }
  80%  { opacity: .52; filter: blur(21px); transform: translate(-50%, -50%) scale(1.01); }

  /* kapanış */
  92%  { opacity: .66; filter: blur(24px); transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: .45; filter: blur(20px); transform: translate(-50%, -50%) scale(1.00); }
}

.nav-icon {
  width: 26px;
  height: 26px;

  opacity: 0.75;                 /* beyazı yumuşatır */
  filter: brightness(0.9) contrast(0.9);

  transition: opacity 0.3s ease, filter 0.3s ease;
}
 
.icon-link:hover .nav-icon {
  opacity: 1;
  filter: brightness(1.05) contrast(1);
}

@keyframes mapBreathe {
  0%   { transform: scale(1);    opacity: 0.85; }
  45%  { transform: scale(1.10); opacity: 1; }
  70%  { transform: scale(1.06); opacity: 0.95; }
  100% { transform: scale(1);    opacity: 0.85; }
}

/* neon rengini tek yerden yönetelim (about'taki neon tonu) */
:root{
  --again-neon: rgba(160, 120, 255, 0.55);
  --again-neon-soft: rgba(120, 90, 200, 0.28);
}

/* link davranışı */
.gallery-map-link{
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}


/* Mouse karta girince: içten hafif zoom */
.gallery-map-wrap:hover .gallery-map::before{
  transform: scale(1.05);  /* 1.02 – 1.06 arası ideal */
}


/* =========================
   RESPONSIVE / MOBILE POLISH
   ========================= */

/* 1) Büyük ekran üst limit (şimdiki gibi kalsın) */
.gallery-map-wrap{
  max-width: 1200px;
}

/* 2) Tablet ve altı */
@media (max-width: 900px){

  /* LOGO küçülsün */
  .logo img{
    width: clamp(140px, 26vw, 210px);
    height: clamp(140px, 26vw, 210px);
  }

  /* ikonlar arası boşluk biraz açılmasın */
  .links{ gap: 12px; }
  .nav-icon{ width: 22px; height: 22px; }

  /* manifesto: taşmayı engelle */
  .manifesto{
    margin-top: min(260px, 45vh);
    margin-bottom: 360px;
  }

  /* about: boşlukları azalt */
  .about-again{
    margin: 220px auto 260px;
    padding: 0 18px;
  }

  /* MAP alanı: margin küçülsün */
  .gallery-map-wrap{
    margin: 120px auto;
    width: min(94vw, 900px);
  }

  /* neon / aura mobilde daha soft + performans */
  .gallery-map-wrap .map-aura{
    inset: -52px;
    filter: blur(28px);
    opacity: calc(var(--p) * 0.55);
  }

  .gallery-map-link .map-edge{
    filter:
      blur(8px)
      drop-shadow(0 0 10px rgba(160,120,255,0.30))
      drop-shadow(0 0 24px rgba(120,90,200,0.18));
  }

  /* lens (zoom) mobilde hafif kalsın */
  .gallery-map-link .map-lens{
    background-size: 122% 122%;
  }
}

/* 3) Telefon */
@media (max-width: 520px){
  body.page-gallery{ overflow-y: auto; }

  .top{ padding: 26px 16px 16px; }

  .links{ gap: 10px; }
  .nav-icon{ width: 20px; height: 20px; }

  .manifesto{
    margin-top: 200px;
    margin-bottom: 280px;
  }
  .manifesto p{
    font-size: clamp(2.6rem, 10vw, 4.2rem);
    line-height: 0.92;
  }

  .about-again h2{
    font-size: clamp(1.4rem, 6.2vw, 2rem);
  }
  .about-again p{
    font-size: clamp(1.25rem, 5.2vw, 1.6rem);
    line-height: 1.0;
  }

  .gallery-map-wrap{
    margin: 90px auto;
    width: min(94vw, 520px);
  }

  /* aura daha az dışarı taşsın: keskin kutu görünmesin */
  .gallery-map-wrap .map-aura{
    inset: -44px;
    filter: blur(24px);
  }

  /* köşe radius küçük ekranda biraz azalt */
  .gallery-map,
  .gallery-map::before,
  .gallery-map::after,
  .map-edge,
  .map-lens{
    border-radius: 18px;
  }
}

/* MOBILE: thumbnail rail kapat */
@media (max-width: 700px){
  .thumb-rail{
    display: none;
  }
}

@media (max-width: 700px){

  .scene-inner{
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 22px;
  }

  .scene-image img{
    max-width: 100%;
    width: 100%;
  }

  .scene{
    margin: 180px 0;
  }
}

@media (max-width: 700px){

  .scene-text p{
    font-size: clamp(1.4rem, 5.2vw, 2rem);
    line-height: 1.1;
    letter-spacing: 0.025em;
  }
}

/* =========================
   MANIFESTO — TEK VE KESİN DÜZEN
   PC ve MOBİL AYNI KOMPOZİSYON
   ========================= */

/* ===== MANIFESTO – PC + MOBİL %100 ORTALI ===== */
.manifesto{
  width: 100%;
  margin-top: min(600px, 120vh);
  margin-bottom: 700px;

  display: flex;
  flex-direction: column;
  align-items: stretch;          /* satırlar full genişlik */
  gap: 0;

  padding-inline: clamp(12px, 4vw, 48px);
}

.manifesto p{
  margin: 0;

  /* ✅ gerçek ortalama: satırın kendisi ortalanıyor */
  display: flex;
  justify-content: center;

  /* yazı */
  font-size: clamp(3.2rem, 9vw, 12rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: #0e061d;

  /* ✅ tek satır kalsın */
  white-space: nowrap;
}


@media (max-width: 520px){
  .manifesto{
    margin-top: 200px;
    margin-bottom: 280px;
  }

  .manifesto p{
    font-size: clamp(2.2rem, 10vw, 4.2rem);
    letter-spacing: 0;
  }
}

@media (max-width: 420px){
  .manifesto p{
    font-size: clamp(1.9rem, 9.5vw, 3.6rem);
  }
}

/* ===== GALLERY MOBILE LAYOUT ===== */
@media (max-width: 700px){

  body.page-gallery{
    overflow-y: auto;      /* mobilde scroll açık */
    overflow-x: hidden;
  }

  .scene{
    margin: 110px 0;       /* çok boşluk varsa 80-120 arası oynarsın */
    min-height: unset;
  }

  .scene-inner{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 18px;
    justify-items: center; /* her şey ortalı */
    text-align: center;
  }

  /* her sahnede görsel üstte */
  .scene-image{
    order: 1;
    width: 100%;
    max-width: 560px;
  }

  /* her sahnede yazı altta */
  .scene-text{
    order: 2;
    width: 100%;
    max-width: 560px;
  }

  /* reverse olayı mobilde iptal: her zaman aynı düzen */
  .scene.reverse .scene-image,
  .scene.reverse .scene-text{
    order: unset;
  }

  .scene.reverse .scene-image{ order: 1; }
  .scene.reverse .scene-text{ order: 2; }

  /* yazı ortada */
  .scene-text p{
    text-align: center;
    font-size: clamp(1.35rem, 5.2vw, 2rem);
    line-height: 1.12;
  }
}

@media (max-width: 700px){
  .scene-image img{
    width: 100%;
    max-width: 560px;
    height: auto;          /* oran bozulmasın */
    display: block;
    border-radius: 14px;
  }
}

/* =========================
   MOBILE GALLERY LAYOUT – NET VE SİNEMATİK
   ========================= */
@media (max-width: 700px){

  /* Sahne yapısı dikey olsun */
  .scene-inner{
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 22px 50px;
    align-items: start;
  }

  /* Görsel her zaman üstte */
  .scene-image{
    order: 1;
    display: flex;
    justify-content: center;
  }

  .scene-image img{
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
  }

  /* Yazı altta ve ortada */
  .scene-text{
    order: 2;
    text-align: center;
    align-items: center;
  }

  .scene-text p{
    font-size: clamp(1.4rem, 5.2vw, 2rem);
    line-height: 1.12;
    letter-spacing: 0.025em;

    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Reverse sahnelerde de aynı kural geçerli olsun */
  .scene.reverse .scene-image{
    order: 1;
  }

  .scene.reverse .scene-text{
    order: 2;
    text-align: center;
  }

  /* Sahne aralıkları mobilde daha dengeli */
  .scene{
    margin: 160px 0;
  }
}

@media (max-width: 700px){

  /* reverse sahneler de dahil: kesin tek kolon */
  .scene.reverse .scene-inner{
    grid-template-columns: 1fr !important;
  }

  /* reverse sahnelerde sıralama: görsel üstte, yazı altta */
  .scene.reverse .scene-image{
    order: 1 !important;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .scene.reverse .scene-text{
    order: 2 !important;
    width: 100%;
    text-align: center !important;
    align-items: center;
  }

  /* reverse sahnelerde görsel tam genişlik */
  .scene.reverse .scene-image img{
    width: 100%;
    max-width: 100% !important;
  }
}

@media (max-width: 700px){
  .gallery-back{
    font-size: 0.95rem;
    letter-spacing: 0.12em;
  }

  .gallery-top{
    top: 16px;
  }
}

/* ===== GALLERY TOP – BACK AGAIN (KESİN SABİT) ===== */

.gallery-top{
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);

  z-index: 10000;              /* her şeyin üstünde */
  opacity: 1;                 /* asla kaybolmaz */
  pointer-events: auto;

  mix-blend-mode: normal;
  isolation: isolate;
}

.gallery-nav{
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-back{
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.55);
  text-decoration: none;

  transition:
    color 0.35s ease,
    text-shadow 0.35s ease,
    transform 0.35s ease;
}

/* hover efekti */
.gallery-back:hover{
  color: #ffffff;

  text-shadow:
    0 0 6px rgba(255,255,255,0.25),
    0 0 14px rgba(180,180,255,0.15);

  transform: translateX(-3px);
}