/* ============================================================
   İZ — sefer defteri
   Konsept: gece uçuşunda camdan bakınca görünen Türkiye.
   Gidilen şehirler birer ışık; aralarında rota ipliği.
   Palet:
     gece   #0A1120   gökyüzü / zemin
     zemin  #111D31   kara parçası
     sinir  #1C2B44   il sınırları
     fener  #FFC069   şehir ışığı (amber)
     kor    #FF7A59   rota ipliği / vurgu (mercan)
     kagit  #EDF1FA   metin
     sis    #92A4C3   ikincil metin
   ============================================================ */

:root {
  --gece:  #0A1120;
  --zemin: #111D31;
  --sinir: #1C2B44;
  --fener: #FFC069;
  --kor:   #FF7A59;
  --kagit: #EDF1FA;
  --sis:   #92A4C3;
  --cam:   rgba(16, 27, 46, 0.92);
  --cizgi: rgba(146, 164, 195, 0.18);

  --govde-font: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --el-font:    "Newsreader", Georgia, serif;
  --mono-font:  "DM Mono", "Consolas", monospace;
}

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

html { scrollbar-gutter: stable; }

body {
  min-height: 100vh;
  /* gece göğünde hafif bir kutup ışığı: lavanta, gece mavisi, gül, nane */
  background:
    radial-gradient(1100px 650px at 80% -10%, rgba(88, 62, 138, 0.34), transparent 60%),
    radial-gradient(900px 550px at 10% 6%, rgba(40, 82, 126, 0.36), transparent 60%),
    radial-gradient(1000px 620px at 28% 115%, rgba(128, 50, 76, 0.28), transparent 62%),
    radial-gradient(800px 500px at 96% 88%, rgba(28, 94, 88, 0.22), transparent 60%),
    var(--gece);
  color: var(--kagit);
  font-family: var(--govde-font);
  font-optical-sizing: auto;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--kor); color: var(--gece); }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--fener);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- iskelet ---------- */

.sahne {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 36px);
  /* ana ekran uygulaması olarak açıldığında çentik/çene payı */
  padding-top: max(clamp(16px, 3vw, 36px), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(16px, 3vw, 36px), env(safe-area-inset-bottom, 0px));
}

.govde { flex: 1; }

/* ---------- üst şerit ---------- */

.ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(20px, 4vh, 44px);
}

.marka {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.marka-isik {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fener);
  box-shadow: 0 0 12px 2px rgba(255, 192, 105, 0.65);
  align-self: center;
}

.marka-ad {
  font-weight: 800;
  letter-spacing: 0.22em;
  font-size: 0.95rem;
}

.marka-alt {
  font-family: var(--mono-font);
  font-size: 0.72rem;
  color: var(--sis);
  letter-spacing: 0.08em;
}

.ozet {
  font-family: var(--mono-font);
  font-size: 0.72rem;
  color: var(--sis);
  letter-spacing: 0.06em;
  text-align: right;
}

/* ---------- giriş / başlık ---------- */

.giris {
  max-width: 30ch;
  position: relative;
  z-index: 1;           /* haritayla iç içe geçtiğinde yazı üstte kalsın */
  pointer-events: none; /* alttaki illere fare erişimini kapatmasın */
}

.baslik {
  font-size: clamp(1.9rem, 4.6vw, 3.3rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.baslik-ana { display: block; }

.baslik-vurgu {
  display: block;
  font-family: var(--el-font);
  font-style: italic;
  font-weight: 340;
  font-size: 0.94em;
  color: var(--fener);
  margin-top: 0.12em;
}

/* destekleyen tarayıcıda vurgu satırı gün batımı degradesi olur */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .baslik-vurgu {
    background: linear-gradient(100deg, #FFC069 5%, #FF8E5E 45%, #FF7A9C 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.ipucu {
  margin-top: 14px;
  font-family: var(--mono-font);
  font-size: 0.74rem;
  color: var(--sis);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 8px var(--gece), 0 0 3px var(--gece);
}

.ipucu-ok { color: var(--kor); }

/* hikaye modu düğmesi */
.hikaye-dugme {
  pointer-events: auto;
  margin-top: 12px;
  font-family: var(--mono-font);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--fener);
  padding: 7px 13px;
  border: 1px solid rgba(255, 192, 105, 0.35);
  border-radius: 3px;
  background: rgba(16, 27, 46, 0.6);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.hikaye-dugme:hover { border-color: var(--fener); background: rgba(24, 37, 60, 0.85); }

/* "bugün, yıllar önce" kartı */
.anilar {
  pointer-events: auto;
  margin-top: 14px;
  max-width: 330px;
  padding: 11px 14px 12px;
  background: rgba(16, 27, 46, 0.75);
  border: 1px solid var(--cizgi);
  border-left: 3px solid var(--kor);
  border-radius: 3px;
}

.anilar-ust {
  font-family: var(--mono-font);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--kor);
}

.anilar-kareler {
  display: flex;
  gap: 6px;
  margin-top: 9px;
}

.anilar-kare {
  width: 46px; height: 46px;
  padding: 0;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--cizgi);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

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

.anilar-kare:hover { transform: translateY(-2px); border-color: var(--fener); }

.anilar-metin {
  font-family: var(--el-font);
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(237, 241, 250, 0.85);
  margin-top: 9px;
  line-height: 1.4;
}

/* hikaye modunda harita üstünde beliren fotoğraf kartı */
.hikaye-kart {
  position: absolute;
  z-index: 6;
  width: 168px;
  padding: 7px 7px 9px;
  background: #F5F2EA;
  border-radius: 2px;
  box-shadow: 0 16px 40px rgba(2, 6, 14, 0.6);
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.65s cubic-bezier(0.22, 0.8, 0.3, 1),
              transform 0.65s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.hikaye-kart.acik { opacity: 1; transform: none; }

.hikaye-kart img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 1px;
  background: #DDD8CC;
}

.hikaye-kart-plaka {
  display: inline-block;
  font-family: var(--mono-font);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: #0A1120;
  background: var(--fener);
  border-radius: 2px;
  padding: 2px 6px 1px;
  margin-top: 7px;
}

.hikaye-kart-ad {
  font-weight: 700;
  font-size: 0.92rem;
  color: #22293B;
  margin-top: 3px;
  line-height: 1.15;
}

/* ---------- harita ---------- */

.harita-kutu {
  position: relative;
  margin-top: clamp(-70px, -4vw, -20px); /* başlıkla hafif iç içe geçsin */
  z-index: 0;
}

.harita-kutu svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

#harita path:not(.rota):not(.rota-parca) {
  fill: var(--zemin);
  stroke: var(--sinir);
  stroke-width: 0.7;
  transition: fill 0.25s ease;
}

/* hikaye modu: sahne loşlaşır, odak sıradaki şehre geçer */
#harita.hikayede path:not(.rota):not(.rota-parca) {
  fill: #0C1524;
  stroke: rgba(28, 43, 68, 0.5);
  transition: fill 1s ease, stroke 1s ease;
}

/* hikayede adım adım örülen iplik parçaları */
.rota-parca {
  fill: none;
  stroke: var(--kor);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 2.2 4.2;
  opacity: 0;
  transition: opacity 1.1s ease;
}

/* Güney Kıbrıs: haritada dursun ama sahnenin parçası olmasın */
#guney-kibris path {
  fill: #0E1728;
  stroke: rgba(28, 43, 68, 0.6);
}

#harita g[data-plakakodu]:hover path {
  fill: #16233c;
}

/* gidilen şehirler: her şehir kendi yıl rengini taşır (--sehir-renk, JS verir) */
#harita g.gidildi { cursor: pointer; }

#harita g.gidildi path {
  fill: #23324e;
  stroke: color-mix(in srgb, var(--sehir-renk, var(--fener)) 40%, transparent);
}

#harita g.gidildi:hover path,
#harita g.gidildi:focus-visible path,
#harita g.gidildi.parlak path {
  fill: color-mix(in srgb, var(--sehir-renk, var(--fener)) 16%, #2A3A57);
  stroke: color-mix(in srgb, var(--sehir-renk, var(--fener)) 75%, transparent);
}

/* tıklayınca/odaklanınca çıkan kare çerçeveyi kapat;
   klavye kullanıcısı için vurgu yukarıdaki parlayan sınırla veriliyor */
#harita g[data-plakakodu]:focus,
#harita g[data-plakakodu]:focus-visible {
  outline: none;
}

/* rota ipliği: haritaya iğneyle atılmış dikiş izi gibi ince */
.rota {
  fill: none;
  stroke: var(--kor);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 2.2 4.2;
  opacity: 0.75;
}

.rota--cizim {
  animation: rota-ciz 2.6s ease-out 0.9s both;
}

@keyframes rota-ciz {
  from { stroke-dashoffset: var(--uzunluk); opacity: 0.4; }
  to   { stroke-dashoffset: 0; opacity: 0.75; }
}

/* şehir ışıkları: rengini yılından alır (--sehir-renk) */
.isik { pointer-events: none; }

.isik-cekirdek {
  fill: var(--sehir-renk, var(--fener));
}

.isik-hale {
  fill: color-mix(in srgb, var(--sehir-renk, var(--fener)) 17%, transparent);
}

.isik-nabiz {
  fill: none;
  stroke: color-mix(in srgb, var(--sehir-renk, var(--fener)) 55%, transparent);
  stroke-width: 1.3;
  transform-box: fill-box;
  transform-origin: center;
  /* birkaç kez atıp durur: sayfa sürekli boyanmasın (performans) */
  animation: nabiz 3.2s ease-out var(--gecikme, 0s) 4 both;
}

@keyframes nabiz {
  0%   { transform: scale(0.4); opacity: 0.9; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

.isik--dogus {
  animation: dogus 0.5s ease-out both;
  animation-delay: var(--gecikme, 0s);
}

/* şehir adı etiketi: ışığın yanında, gece zemininde okunur halo ile */
.isik-ad {
  font-family: var(--mono-font);
  font-size: 7.6px;
  letter-spacing: 0.08em;
  fill: #C6D2EA;
  stroke: var(--gece);
  stroke-width: 2.8px;
  stroke-linejoin: round;
  paint-order: stroke;
  opacity: 0.95;
}

@media (max-width: 720px) {
  .isik-ad { display: none; } /* küçük ekranda harita adlara dar gelir */
}

@keyframes dogus {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* haritanın doğuşu */
.harita--dogus { animation: harita-dogus 1.1s ease-out both; }

@keyframes harita-dogus {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- bilet (harita üzeri etiket) ---------- */

.bilet {
  position: absolute;
  z-index: 5;
  min-width: 172px;
  max-width: 240px;
  padding: 10px 14px 11px;
  background: var(--cam);
  border: 1px solid var(--cizgi);
  border-left: 3px solid var(--fener);
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(2, 6, 14, 0.55);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.bilet.acik { opacity: 1; transform: none; }

.bilet-plaka {
  font-family: var(--mono-font);
  font-size: 0.68rem;
  color: var(--kor);
  letter-spacing: 0.14em;
}

.bilet-ad {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  margin-top: 1px;
}

.bilet-detay {
  font-family: var(--mono-font);
  font-size: 0.7rem;
  color: var(--sis);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.bilet-cagri {
  font-family: var(--el-font);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--fener);
  margin-top: 6px;
}

.bilet--soluk { border-left-color: var(--sinir); }
.bilet--soluk .bilet-cagri { color: var(--sis); }

/* ---------- ray (zaman şeridi) ---------- */

.ray {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: clamp(10px, 2vh, 20px) 2px 6px;
  scrollbar-width: thin;
}

.durak {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 9px 14px 10px;
  border: 1px solid var(--cizgi);
  border-radius: 3px;
  background: rgba(16, 27, 46, 0.5);
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.durak:hover {
  border-color: rgba(255, 192, 105, 0.5);
  background: rgba(24, 37, 60, 0.8);
  transform: translateY(-2px);
}

.durak-ust {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono-font);
  font-size: 0.66rem;
  color: var(--sis);
  letter-spacing: 0.08em;
}

.durak-isik {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sehir-renk, var(--fener));
  box-shadow: 0 0 7px 1px color-mix(in srgb, var(--sehir-renk, var(--fener)) 70%, transparent);
}

.durak:hover {
  border-color: color-mix(in srgb, var(--sehir-renk, var(--fener)) 50%, transparent);
}

.durak-ad { font-weight: 600; font-size: 0.9rem; }

.durak-ok {
  align-self: center;
  color: var(--sis);
  opacity: 0.75;
  font-family: var(--mono-font);
  font-size: 0.75rem;
  flex: none;
}

/* ---------- istatistik ---------- */

.istatistik {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding-top: 18px;
}

.sayi-kart {
  padding: 13px 16px 14px;
  border: 1px solid var(--cizgi);
  border-radius: 3px;
  background: rgba(16, 27, 46, 0.5);
}

.sayi-deger {
  font-weight: 750;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.sayi-ek { font-size: 0.85rem; font-weight: 500; color: var(--sis); }

.sayi-adi {
  font-family: var(--mono-font);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--sis);
  margin-top: 4px;
}

/* yıl dağılımı: tek ölçü (kare sayısı) — çubuk nötr, yıl kimliği nokta+yazıda */
.yillar {
  grid-column: 1 / -1;
  padding: 13px 16px 14px;
  border: 1px solid var(--cizgi);
  border-radius: 3px;
  background: rgba(16, 27, 46, 0.5);
}

.yillar-adi {
  font-family: var(--mono-font);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--sis);
  margin-bottom: 10px;
}

.yil-satir {
  display: grid;
  grid-template-columns: 64px 1fr 44px;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}

.yil-adi {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono-font);
  font-size: 0.72rem;
  color: var(--kagit);
}

.yil-nokta {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sehir-renk, var(--fener));
  box-shadow: 0 0 6px color-mix(in srgb, var(--sehir-renk, var(--fener)) 60%, transparent);
  flex: none;
}

.yil-cubuk-yatak {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: rgba(146, 164, 195, 0.1);
  overflow: hidden;
}

.yil-cubuk {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #3B4C6E;
  min-width: 4px;
}

.yil-sayi {
  font-family: var(--mono-font);
  font-size: 0.68rem;
  color: var(--sis);
  text-align: right;
}

/* ---------- alt ---------- */

.alt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 26px;
  font-family: var(--mono-font);
  font-size: 0.68rem;
  color: var(--sis);
  letter-spacing: 0.05em;
}

.imza { color: var(--fener); }

.alt-not a { color: var(--sis); text-decoration-color: var(--cizgi); }
.alt-not a:hover { color: var(--kagit); }

/* ============================================================
   ALBÜM
   ============================================================ */

.albom {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.albom[hidden] { display: none; }

.albom-fon {
  position: absolute;
  inset: 0;
  background: rgba(5, 9, 18, 0.9); /* blur filtresi yerine koyu cam: akıcı */
}

.albom-panel {
  position: relative;
  width: min(1060px, 100%);
  margin: clamp(8px, 3vh, 40px) clamp(8px, 3vw, 40px);
  background:
    radial-gradient(800px 400px at 90% -5%, rgba(38, 58, 96, 0.5), transparent 60%),
    #0D1728;
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: panel-gel 0.35s ease-out both;
  padding: clamp(20px, 4vw, 52px);
  padding-bottom: 90px;
}

@keyframes panel-gel {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.albom-ust {
  max-width: 60ch;
  padding-bottom: clamp(18px, 3vh, 34px);
}

.plaka {
  display: inline-block;
  font-family: var(--mono-font);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--gece);
  background: var(--fener);
  border-radius: 2px;
  padding: 3px 8px 2px;
  margin-bottom: 12px;
}

.albom-ad {
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1;
}

.albom-meta {
  font-family: var(--mono-font);
  font-size: 0.74rem;
  color: var(--sis);
  letter-spacing: 0.07em;
  margin-top: 10px;
}

.albom-not {
  font-family: var(--el-font);
  font-style: italic;
  font-weight: 330;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: rgba(237, 241, 250, 0.85);
  margin-top: 14px;
  line-height: 1.45;
}

.gosteri-dugme {
  margin-top: 14px;
  font-family: var(--mono-font);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--fener);
  padding: 7px 13px;
  border: 1px solid rgba(255, 192, 105, 0.35);
  border-radius: 3px;
  background: rgba(16, 27, 46, 0.6);
  transition: border-color 0.2s ease;
}

.gosteri-dugme:hover { border-color: var(--fener); }

/* fotoğraf tabakası: baskı kağıdı hissi.
   Sütunlar JS ile kurulur (albumDoldur) — CSS columns kartları
   sütun sınırında ikiye bölebildiği için kullanılmıyor. */
.tabaka {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.tabaka-sutun {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.baski {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 8px 12px;
  background: #F5F2EA;
  border-radius: 2px;
  box-shadow: 0 10px 26px rgba(2, 6, 14, 0.5);
  /* eğim yok: döndürülen fotoğraf bulanıklaşıyordu, dümdüz = kristal net */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-align: left;
}

.baski:hover, .baski:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(2, 6, 14, 0.65);
  z-index: 2;
  position: relative;
}

.baski-medya { position: relative; display: block; }

.baski img,
.baski video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1px;
  background: #DDD8CC;
}

/* video / canlı fotoğraf rozeti */
.baski-rozet {
  position: absolute;
  top: 7px; left: 7px;
  font-family: var(--mono-font);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--fener);
  background: rgba(10, 17, 32, 0.72);
  padding: 3px 7px 2px;
  border-radius: 2px;
  pointer-events: none;
}

.baski-alt {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 2px 0;
  font-family: var(--mono-font);
  font-size: 0.64rem;
  color: #6B655A;
  letter-spacing: 0.05em;
}

.baski-alt .no { color: #A39C8C; }

/* boş albüm yer tutucusu */
.baski--bos {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  background: repeating-linear-gradient(
      -45deg,
      rgba(245, 242, 234, 0.05) 0 10px,
      rgba(245, 242, 234, 0.02) 10px 20px),
    rgba(245, 242, 234, 0.03);
  border: 1px dashed var(--cizgi);
  box-shadow: none;
  color: var(--sis);
  font-family: var(--el-font);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.6;
}

.baski--bos code {
  font-family: var(--mono-font);
  font-style: normal;
  font-size: 0.72rem;
  color: var(--fener);
}

/* albüm gezinme */
.albom-gezinme {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 14px clamp(20px, 4vw, 52px);
  background: linear-gradient(transparent, #0D1728 45%);
  pointer-events: none;
}

.gez {
  pointer-events: auto;
  font-family: var(--mono-font);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--sis);
  padding: 8px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 3px;
  background: rgba(13, 23, 40, 0.9);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.gez:hover { color: var(--fener); border-color: rgba(255, 192, 105, 0.5); }

.gez:empty { visibility: hidden; }

/* kapat düğmesi */
.kapat {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--sis);
  border: 1px solid var(--cizgi);
  border-radius: 50%;
  background: rgba(13, 23, 40, 0.85);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.kapat:hover { color: var(--kagit); border-color: var(--sis); transform: rotate(90deg); }

/* ============================================================
   BÜYÜK FOTOĞRAF (lightbox)
   ============================================================ */

.buyuk {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(10px, 3vw, 40px);
}

.buyuk[hidden] { display: none; }

.buyuk-fon {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 12, 0.92);
}

.kapat--buyuk { position: fixed; }

.buyuk-cerceve {
  position: relative;
  max-width: min(1100px, 88vw);
  animation: panel-gel 0.25s ease-out both;
}

.buyuk-cerceve img,
.buyuk-cerceve video {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  background: #101B2E;
}

.buyuk-alt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  font-family: var(--mono-font);
  font-size: 0.68rem;
  color: var(--sis);
  letter-spacing: 0.06em;
}

.buyuk-tus { opacity: 0.6; }

.buyuk-sag { display: flex; align-items: center; gap: 12px; flex: none; }

.not-dugme {
  font-family: var(--mono-font);
  font-size: 0.66rem;
  color: var(--fener);
  padding: 4px 9px;
  border: 1px solid rgba(255, 192, 105, 0.3);
  border-radius: 3px;
  transition: border-color 0.2s ease;
}

.not-dugme:hover { border-color: var(--fener); }

/* karede not varsa alt yazı el yazısı hissi taşır */
.baski-alt--not > span:first-child {
  font-family: var(--el-font);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0;
  color: #4A4437;
}

/* gösteri/gezinme geçişi: yumuşak beliriş */
.buyuk-cerceve.gecis { animation: kare-gecis 0.5s ease-out; }

@keyframes kare-gecis {
  from { opacity: 0.25; }
  to   { opacity: 1; }
}

.cevir {
  position: relative;
  z-index: 2;
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  color: var(--sis);
  border: 1px solid var(--cizgi);
  border-radius: 50%;
  background: rgba(13, 23, 40, 0.7);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.cevir:hover { color: var(--fener); border-color: rgba(255, 192, 105, 0.5); }

/* ============================================================
   duyarlılık ve hareket
   ============================================================ */


@media (max-width: 720px) {
  .ust { flex-direction: column; gap: 4px; }
  .ozet { text-align: left; }
  .giris { max-width: none; }
  .harita-kutu { margin-top: 8px; }
  .bilet { display: none; } /* dokunmatikte bilet yerine doğrudan tıklama */
  .alt { flex-direction: column; gap: 6px; }
}

@media (max-width: 540px) {
  .cevir { display: none; } /* dokunmatikte ok tuşu yerine kaydırma/dokunma */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .isik-nabiz { display: none; }
}