:root {
    --bg-color: #000; /* Ana arka plan siyah */
    --text-color: #ecf0f1;
    --pixel-font: 'Press Start 2P', cursive;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--pixel-font);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.story-container {
    position: relative;
    width: 100vw; /* Tam ekran genişliği */
    height: 100vh; /* Tam ekran yüksekliği */
    overflow: hidden;
}

.scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color); /* Her sahne arka planı siyah */
    transition: opacity 1s ease-in-out;
    opacity: 1; /* Başlangıçta görünür */
}

.hidden {
    opacity: 0;
    pointer-events: none; /* Gizli öğelere tıklanamamasını sağlar */
}

.story-text {
    font-size: 2.5em; /* Daha büyük yazı */
    text-shadow: 2px 2px #000; /* Pixel efekti için gölge */
    text-align: center;
    padding: 20px;
    max-width: 90%;
}

.next-stage-button {
    margin-top: 50px;
    padding: 15px 30px;
    font-family: var(--pixel-font);
    font-size: 1.5em;
    background-color: #e74c3c; /* Daha çarpıcı kırmızı */
    color: #fff;
    border: 3px solid #fff; /* Beyaz çerçeve */
    cursor: pointer;
    box-shadow: 5px 5px #000; /* Daha belirgin gölge */
    transition: transform 0.1s, background-color 0.3s;
}

.next-stage-button:active {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px #000;
}

.story-video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Videonun ekrana sığmasını sağlar */
    display: block; /* Altında boşluk bırakmaz */
}

.black-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 999; /* Diğer her şeyin üzerinde */
    opacity: 0;
    pointer-events: none;
}
.black-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Final mesajı için stil */
.final-message {
    color: #f1c40f; /* Altın sarısı */
    font-size: 3.5em;
    animation: pulse 1.5s infinite alternate; /* Parlama efekti */
}
.final-subtext {
    color: #e74c3c; /* Kırmızı */
    font-size: 2em;
    margin-top: 20px;
}

@keyframes pulse {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.05); opacity: 0.8; }
}   

/* final sahnesi video */
#scene-final {
  position: relative;
  overflow: hidden;
}

#scene-final .bg-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* yazılar önde kalsın */
#scene-final .final-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* kalpler */
#hearts-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.heart {
  position: absolute;
  bottom: -50px;
  font-size: 24px;
  color: #ff4d6d;
  opacity: 0.8;
}

/* === TV çerçevesi === */
.tv-frame {
  position: relative;
  width: 80vw;              /* ekranın %80’i */
  max-width: 800px;         /* masaüstünde en fazla 800px */
  max-height: 450px;        /* 16:9 oranı için */
  aspect-ratio: 16 / 9;
  margin: 40px auto;        /* biraz üst-alt boşluk */
  background: #000;
  border: 14px solid #121212;
  border-radius: 28px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6),
              inset 0 0 20px rgba(255,255,255,0.06);
  overflow: hidden;
}


/* bezel parlama */
.tv-frame::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.07), transparent 40%, rgba(255,255,255,0.04) 60%, transparent);
  pointer-events: none;
}

/* ayak/stand (opsiyonel, istersen kaldır) */
.tv-frame::after {
  content: "";
  position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  width: 30%; height: 18px; border-radius: 10px;
  background: #0e0e0e; box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

/* TV içindeki video */
.tv-frame > .story-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;               /* görüntü dolsun, taşanı kes (sinema hissi) */
}

/* Letterbox istersen cover yerine contain kullan:
.tv-frame > .story-video { object-fit: contain; background:#000; }
*/

/* =========================
   MOBILE-FRIENDLY TUNING
   ========================= */

/* 1) Tipografi: ölçeklenebilir başlıklar ve butonlar */
.story-text {
  /*  old: font-size: 2.5em;  ->  mobile’da fazla iri  */
  font-size: clamp(1rem, 2.8vw + 0.6rem, 2rem);
  line-height: 1.35;
  letter-spacing: 0.4px;
  max-width: 92%;
}

.next-stage-button {
  /* old: font-size: 1.5em; padding: 15px 30px; -> touch için optimize */
  font-size: clamp(1rem, 2.5vw + 0.4rem, 1.25rem);
  padding: 12px 22px;
  min-height: 44px; /* Apple HIG dokunma hedefi */
  border-width: 2px;     /* old: 3px biraz kalın */
  box-shadow: 3px 3px #000; /* old: 5px -> mobilde daha yumuşak */
}

/* Final sahnedeki yazıları da ölçekleyelim */
.final-message {
  /* old: 3.5em -> telefonda aşırı */
  font-size: clamp(1.4rem, 6vw, 2.4rem);
}
.final-subtext {
  /* old: 2em */
  font-size: clamp(1rem, 4.8vw, 1.4rem);
  margin-top: 12px;
}

/* 2) TV çerçevesi: telefonda daha küçük, ortalı */
.tv-frame {
  width: 86vw;            /* mobilde ekrana göre küçült */
  max-width: 600px;       /* masaüstü tavanı (önceden 800px idi) */
  max-height: 338px;      /* 600x338 ~ 16:9 */
  margin: 24px auto;
  border-width: 12px;     /* old: 14px */
  border-radius: 22px;    /* old: 28px */
  box-shadow: 0 10px 32px rgba(0,0,0,0.55),
              inset 0 0 16px rgba(255,255,255,0.05);
}

/* 16:9 videoları letterbox yerine tam doldursun mu?
   Eğer kadraj kesilmesin istiyorsan mobilde contain’e al:
*/

/* 3) Küçük ekranlarda konteyner ve gövde akışı */
@media (max-width: 768px) {
  .story-container {
    padding: 8px;        /* kenarlara nefes alanı */
  }
}

@media (max-width: 480px) {
  body {
    /* old: height:100vh; overflow:hidden; -> mobil klavye/çentik sorunları */
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .next-stage-button {
    padding: 10px 18px;
    border-width: 2px;
  }
}


/* 4) Çok dar yükseklikli cihazlar (landscape küçük telefonlar) */
@media (max-height: 620px) {
  .story-text { font-size: clamp(0.95rem, 2.2vw + 0.5rem, 1.6rem); }
  .final-message { font-size: clamp(1.2rem, 4.8vw, 2rem); }
  .final-subtext { font-size: clamp(0.9rem, 3.8vw, 1.2rem); }
}

#scene-map {
  background: #0b0b0b;
}

#map {
  position: absolute;
  inset: 0;
}

.map-hint {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-family: var(--pixel-font);
  font-size: clamp(0.8rem, 2.2vw, 1rem);
  padding: 8px 12px;
  border: 2px solid #fff;
  border-radius: 8px;
   z-index: 10000; /* veya en az 1000 üstü */
  pointer-events: none;
  animation: hint-pulse 2s infinite ease-in-out;
}

/* Marker numara rozetleri için */
.leaflet-div-icon {
  background: transparent;
  border: none;
}
.pin-badge {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #e74c3c;
  color: #fff;
  font-weight: 700;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  font-family: var(--pixel-font);
  font-size: 14px;
}

.final-date {
  color: #fff;
  font-size: clamp(0.8rem, 3vw, 1.2rem);
  margin-top: 18px;
  opacity: 0.9;
}

#top-hud {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-family: 'Press Start 2P', cursive;
  font-size: clamp(0.8rem, 2vw, 1rem);
  padding: 6px 14px;
  border: 2px solid #fff;
  border-radius: 8px;
  z-index: 10000;
  pointer-events: none; /* tıklamayı engelle */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  text-align: center;
  white-space: nowrap;
}

/* map.js'teki `.map-hint` için animasyon */
@keyframes hint-pulse {
    0% { transform: translate(-50%, 0) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -4px) scale(1.02); opacity: 0.85; }
    100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

/* Harita Pinleri için Hover Efekti */
.pin-badge {
    transition: transform 0.2s, box-shadow 0.2s;
}

.leaflet-marker-icon:hover .pin-badge {
    background: #c0392b; /* Koyu Kırmızı */
    transform: scale(1.15) rotate(-3deg);
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.2);
}