/* ==========================================================================
   NESLİ'NİN GÜNLÜĞÜ — EKSTRA ANİMASYONLAR
   Ayasofya, Galata (Hezarfen), Kız Kulesi, Göbeklitepe Kazısı, Zaman Çizelgesi,
   Kaydırınca İlerleyen Gün, Gezen Kedi, Ses ve Sayfa Çevirme
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. KÜÇÜK DÜZELTMELER
   -------------------------------------------------------------------------- */
/* Galeri kartlarının giriş animasyonu (rotate'i bozmamak için 'translate' kullanır) */
@keyframes fadeInUp {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: 0 0; }
}

/* SVG içindeki martı kanatları kendi kutularına göre dönsün/ölçeklensin */
.gull-wing-left,
.gull-wing-right,
.svg-seagull-group,
#bosphorus-ferry {
  transform-box: fill-box;
}
.gull-wing-left,
.gull-wing-right {
  transform-origin: 50% 100%;
}

/* Gece döngüsünde okunabilirlik için başlıklara buzlu cam zemin */
.section-header,
.gt-header {
  background: rgba(255, 253, 249, 0.6);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 2px dashed rgba(74, 46, 79, 0.2);
  border-radius: 28px;
  padding: 22px 26px;
}
body.twilight-mode .section-header,
body.twilight-mode .gt-header {
  background: rgba(43, 31, 58, 0.65);
}

.nav-links a { padding: 8px 11px; }
@media (max-width: 1180px) {
  .nav-links { display: none; }
}

/* --------------------------------------------------------------------------
   1. KAYDIRDIKÇA İLERLEYEN GÜN (Seher → Gün Batımı → Gece)
   -------------------------------------------------------------------------- */
.sky-cycle-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
}
#sky-amber {
  background: linear-gradient(180deg,
    rgba(255, 186, 128, 0.75) 0%,
    rgba(246, 152, 168, 0.6) 50%,
    rgba(255, 216, 172, 0.5) 100%);
}
#sky-night {
  background:
    radial-gradient(2px 2px at 10% 15%, #fffbe6, transparent),
    radial-gradient(2px 2px at 30% 8%, #ffe9a8, transparent),
    radial-gradient(1.5px 1.5px at 48% 22%, #fff, transparent),
    radial-gradient(2px 2px at 66% 12%, #fff7d6, transparent),
    radial-gradient(2.5px 2.5px at 84% 26%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 22% 40%, #fff, transparent),
    radial-gradient(2px 2px at 76% 44%, #ffe9a8, transparent),
    radial-gradient(1.5px 1.5px at 92% 60%, #fff, transparent),
    radial-gradient(2px 2px at 6% 70%, #fff7d6, transparent),
    linear-gradient(180deg, #1c1030 0%, #3a2356 60%, #5b3a6e 100%);
}
#sky-sun {
  position: fixed;
  left: 0;
  top: 0;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 40% 40%, #fff6cf, #ffd36e 60%, #f7a24b);
  border: 3px solid #4a2e4f;
  box-shadow: 0 0 40px 12px rgba(255, 205, 110, 0.45);
  transition: background 0.6s ease, box-shadow 0.6s ease;
}
#sky-sun.moon {
  background: radial-gradient(circle at 38% 38%, #ffffff, #efe6ff 60%, #c9b8e8);
  box-shadow: 0 0 36px 10px rgba(230, 220, 255, 0.45);
}
#sky-sun.moon::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  top: 18px;
  left: 30px;
  border-radius: 50%;
  background: rgba(160, 140, 200, 0.45);
  box-shadow: -14px 16px 0 -3px rgba(160, 140, 200, 0.35);
}

/* --------------------------------------------------------------------------
   2. HERO SAHNESİ: AYASOFYA, GALATA, KIZ KULESİ
   -------------------------------------------------------------------------- */
#ayasofya-cartoon,
#galata-tower-cartoon,
#maidens-tower-cartoon {
  cursor: pointer;
  transition: filter 0.3s ease;
}
#ayasofya-cartoon:hover,
#galata-tower-cartoon:hover,
#maidens-tower-cartoon:hover {
  filter: drop-shadow(0 0 10px rgba(255, 240, 200, 0.95));
}

/* Ayasofya kubbe ışık huzmeleri */
.dome-rays line {
  stroke: #ffe08a;
  stroke-width: 4;
  stroke-linecap: round;
}
.dome-rays {
  opacity: 0;
  transition: opacity 0.4s ease;
}
#ayasofya-cartoon:hover .dome-rays {
  opacity: 1;
  animation: raysPulse 1.4s ease-in-out infinite alternate;
}
@keyframes raysPulse {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

/* Minare kandilleri (gece yanar) */
.kandil {
  fill: #fffdf9;
}
body.twilight-mode .kandil {
  fill: #ffdf6b;
  animation: kandilFlicker 1.6s ease-in-out infinite alternate;
}
@keyframes kandilFlicker {
  from { filter: drop-shadow(0 0 2px #ffd43b); }
  to   { filter: drop-shadow(0 0 7px #ffd43b); }
}

/* Kız Kulesi feneri: 3B dönme hissi veren tarama */
.lighthouse-beam {
  transform-box: view-box;
  transform-origin: 835px 150px;
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.twilight-mode .lighthouse-beam {
  opacity: 1;
  animation: beamSweep 4s ease-in-out infinite alternate;
}
@keyframes beamSweep {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(0.05); }
  100% { transform: scaleX(-1); }
}
.tower-reflection {
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.twilight-mode .tower-reflection {
  animation: reflectionShimmer 2.4s ease-in-out infinite alternate;
}
@keyframes reflectionShimmer {
  from { opacity: 0.25; }
  to   { opacity: 0.65; }
}

/* --------------------------------------------------------------------------
   3. HEZARFEN AHMED ÇELEBİ UÇUŞU
   -------------------------------------------------------------------------- */
.hezarfen-flyer {
  position: fixed;
  left: 0;
  top: 0;
  width: 140px;
  z-index: 3500;
  pointer-events: none;
  filter: drop-shadow(4px 6px 0 rgba(74, 46, 79, 0.25));
}
.hezarfen-flyer svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.hz-wing-up {
  transform-origin: 80px 50px;
  animation: hzFlapUp 0.42s ease-in-out infinite alternate;
}
.hz-wing-down {
  transform-origin: 80px 54px;
  animation: hzFlapDown 0.42s ease-in-out infinite alternate;
}
@keyframes hzFlapUp {
  from { transform: rotate(8deg); }
  to   { transform: rotate(-22deg); }
}
@keyframes hzFlapDown {
  from { transform: rotate(-8deg); }
  to   { transform: rotate(22deg); }
}

/* --------------------------------------------------------------------------
   4. HİKAYE MODALI (Ayasofya Kubbesi & Kız Kulesi Efsanesi)
   -------------------------------------------------------------------------- */
.story-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4100;
  background: rgba(34, 18, 38, 0.86);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.story-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.story-modal-dialog {
  position: relative;
  background: #fffdf9;
  color: #38233c;
  border: 3.5px solid #4a2e4f;
  border-radius: 26px;
  box-shadow: 12px 16px 0 rgba(0, 0, 0, 0.35);
  max-width: 860px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px;
  transform: scale(0.9);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.story-modal-backdrop.open .story-modal-dialog {
  transform: scale(1);
}
.story-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.15;
  margin: 16px 0 8px;
}
.story-modal-lead {
  font-weight: 600;
  color: #633c68;
  margin-bottom: 14px;
}
.story-fact-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}
.story-fact-list li {
  background: #f9f3eb;
  border: 2px solid #4a2e4f;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 3px 4px 0 rgba(74, 46, 79, 0.14);
}
.story-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Ayasofya iç sahnesi */
.as-scene {
  position: relative;
  border: 3px solid #4a2e4f;
  border-radius: 20px;
  overflow: hidden;
  background: #3b2418;
}
.as-svg {
  display: block;
  width: 100%;
  height: auto;
}
.as-win {
  fill: #fff6d6;
  animation: winGlow 2.4s ease-in-out infinite alternate;
}
@keyframes winGlow {
  from { fill: #f5d58a; }
  to   { fill: #fffbe9; }
}
.as-ray {
  opacity: 0;
  animation: rayFade 3.2s ease-in-out infinite;
}
@keyframes rayFade {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.7; }
}
.as-medallion {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: slowSpin 40s linear infinite;
}
@keyframes slowSpin {
  to { transform: rotate(360deg); }
}
.sr-wing ellipse {
  fill: #f2c66d;
  stroke: #4a2e4f;
  stroke-width: 2.5;
}
.sr-l { animation: srFlapL 1s ease-in-out infinite alternate; }
.sr-r { animation: srFlapR 1s ease-in-out infinite alternate; }
@keyframes srFlapL {
  from { transform: rotate(10deg); }
  to   { transform: rotate(-12deg); }
}
@keyframes srFlapR {
  from { transform: rotate(-10deg); }
  to   { transform: rotate(12deg); }
}
/* Kubbe kapakları açılır */
.as-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: linear-gradient(180deg, #f1cfe0, #e5b8c8 70%, #d9a3b9);
  z-index: 3;
  display: flex;
  align-items: center;
  font-size: clamp(3rem, 9vw, 6rem);
  animation-duration: 1.3s;
  animation-delay: 0.45s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.as-door-left {
  left: 0;
  justify-content: flex-end;
  border-right: 3px solid #4a2e4f;
  animation-name: doorLeft;
}
.as-door-right {
  right: 0;
  justify-content: flex-start;
  border-left: 3px solid #4a2e4f;
  animation-name: doorRight;
}
.as-door span {
  font-family: 'Caveat', cursive;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: #4a2e4f;
  padding: 0 14px;
}
@keyframes doorLeft {
  to { transform: translateX(-102%); }
}
@keyframes doorRight {
  to { transform: translateX(102%); }
}

/* Kız Kulesi çizgi roman panelleri */
.comic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 12px;
}
.comic-panel {
  position: relative;
  background: linear-gradient(180deg, #f5e2f3, #fffdf9);
  border: 3px solid #4a2e4f;
  border-radius: 18px;
  padding: 18px 16px 16px;
  box-shadow: 5px 6px 0 rgba(74, 46, 79, 0.18);
  text-align: center;
  animation: panelPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--d, 0s);
}
.comic-panel:nth-child(2) { background: linear-gradient(180deg, #d8ecf3, #fffdf9); }
.comic-panel:nth-child(3) { background: linear-gradient(180deg, #fbe7cf, #fffdf9); }
.comic-panel:nth-child(4) { background: linear-gradient(180deg, #d9cbe8, #fffdf9); }
@keyframes panelPop {
  from { opacity: 0; transform: scale(0.6) rotate(-4deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
.comic-num {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #6c3f73;
  color: #fffdf9;
  border: 2.5px solid #351d39;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comic-emoji {
  font-size: 2.8rem;
  display: inline-block;
  margin-bottom: 6px;
  animation: gentleBob 2.6s ease-in-out infinite;
}
.comic-panel:nth-child(4) .comic-emoji {
  animation: snakeWiggle 1.2s ease-in-out infinite;
}
.comic-panel p {
  font-weight: 600;
  font-size: 0.95rem;
}
.comic-footnote {
  margin-top: 14px;
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  color: #8c5694;
  text-align: center;
}
@media (max-width: 640px) {
  .comic-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   5. GÖBEKLİTEPE: KAYDIRDIKÇA KAZI
   -------------------------------------------------------------------------- */
.gt-section {
  position: relative;
  height: 320vh;
}
.gt-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  max-width: 1180px;
  margin: 0 auto;
  padding: 92px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gt-header {
  text-align: center;
  align-self: center;
  padding: 12px 24px;
}
.gt-header .section-kicker { margin-bottom: 6px; }
.gt-header .section-title {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  margin: 0;
}
.gt-stage {
  flex: 1;
  min-height: 380px;
  position: relative;
  overflow: hidden;
  border: 3px solid #4a2e4f;
  border-radius: 28px;
  box-shadow: 10px 12px 0 rgba(74, 46, 79, 0.2);
  background: linear-gradient(180deg, #f9d3a8 0%, #f4b08f 32%, #e9b7c9 58%);
}
.gt-sun {
  position: absolute;
  right: 11%;
  top: calc(16% + var(--sunset, 0) * 26%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 3px solid #4a2e4f;
  background: radial-gradient(circle at 40% 40%, #fff3c4, #f7b267);
  box-shadow: 0 0 40px 14px rgba(255, 190, 110, 0.5);
  z-index: 1;
}
.gt-hills {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 42%;
  height: 22%;
  z-index: 1;
}
.gt-hills svg { width: 100%; height: 100%; display: block; }
.gt-pit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44%;
  z-index: 1;
  border-top: 3px solid #4a2e4f;
  background:
    radial-gradient(circle at 12% 70%, rgba(74, 46, 79, 0.18) 0 7px, transparent 8px),
    radial-gradient(circle at 34% 85%, rgba(74, 46, 79, 0.15) 0 9px, transparent 10px),
    radial-gradient(circle at 58% 72%, rgba(74, 46, 79, 0.16) 0 6px, transparent 7px),
    radial-gradient(circle at 81% 88%, rgba(74, 46, 79, 0.15) 0 10px, transparent 11px),
    linear-gradient(180deg, #c2915f, #946640);
}
.gt-pit::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
  background: repeating-linear-gradient(90deg, #8dbf86 0 10px, #7aae74 10px 18px);
  border-top: 3px solid #4a2e4f;
}
.gt-pillar {
  --rise: 0;
  position: absolute;
  bottom: 5%;
  left: var(--x);
  translate: -50% 0;
  width: calc(clamp(60px, 8vw, 104px) * var(--s));
  transform: translateY(calc((1 - var(--rise)) * (100% + 60px)));
  z-index: 2;
  filter: drop-shadow(5px 6px 0 rgba(74, 46, 79, 0.25));
  will-change: transform;
}
.gt-pillar svg {
  display: block;
  width: 100%;
  height: auto;
}
.gt-relief {
  position: absolute;
  left: 50%;
  top: 46%;
  translate: -50% 0;
  font-size: calc(30px * var(--s));
  filter: grayscale(1) sepia(0.85) contrast(1.15) brightness(0.82)
          drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.55))
          drop-shadow(-1px -1px 0 rgba(60, 30, 20, 0.4));
}
.gt-relief.on-belt { top: 74%; }
.gt-relief.on-cap { top: 5%; font-size: calc(24px * var(--s)); }
.gt-pillar::after {
  content: "✨";
  position: absolute;
  top: -22px;
  left: 50%;
  translate: -50% 0;
  font-size: 20px;
  opacity: 0;
}
.gt-pillar.alive::after {
  animation: twinkleOnce 2.2s ease-in-out infinite;
}
@keyframes twinkleOnce {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 1; transform: scale(1.15); }
}
.gt-pillar.alive .relief-fox   { animation: foxJump 1.6s ease-in-out infinite; }
.gt-pillar.alive .relief-boar  { animation: boarTrot 1.1s ease-in-out infinite alternate; }
.gt-pillar.alive .relief-bird  { animation: birdFlap 0.9s ease-in-out infinite alternate; }
.gt-pillar.alive .relief-snake { animation: snakeWiggle 1.3s ease-in-out infinite; }
.gt-pillar.alive .relief-scorp { animation: scorpPinch 1s ease-in-out infinite alternate; }
.gt-pillar.alive .relief-bull  { animation: bullNod 1.4s ease-in-out infinite; }
@keyframes foxJump {
  0%, 100% { transform: translateY(0) rotate(0); }
  40%      { transform: translateY(-14px) rotate(-12deg); }
  60%      { transform: translateY(-14px) rotate(8deg); }
}
@keyframes boarTrot {
  from { transform: translateX(-6px) rotate(-4deg); }
  to   { transform: translateX(6px) rotate(4deg); }
}
@keyframes birdFlap {
  from { transform: scale(1, 1) translateY(0); }
  to   { transform: scale(1.18, 0.82) translateY(-6px); }
}
@keyframes snakeWiggle {
  0%, 100% { transform: skewX(0) translateX(0); }
  25%      { transform: skewX(14deg) translateX(-3px); }
  75%      { transform: skewX(-14deg) translateX(3px); }
}
@keyframes scorpPinch {
  from { transform: rotate(-8deg) scale(1); }
  to   { transform: rotate(8deg) scale(1.12); }
}
@keyframes bullNod {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(-10deg) translateY(2px); }
}
.gt-soil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.gt-soil-band {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Caveat', cursive;
  font-size: 1.35rem;
  color: #fff3dd;
  border-top: 2px dashed rgba(74, 46, 79, 0.4);
  text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.25);
  background-image:
    radial-gradient(circle at 15% 40%, rgba(255, 255, 255, 0.12) 0 4px, transparent 5px),
    radial-gradient(circle at 45% 70%, rgba(0, 0, 0, 0.12) 0 6px, transparent 7px),
    radial-gradient(circle at 75% 30%, rgba(255, 255, 255, 0.1) 0 5px, transparent 6px),
    radial-gradient(circle at 90% 75%, rgba(0, 0, 0, 0.1) 0 4px, transparent 5px);
}
.gt-soil-band:nth-child(1) { background-color: #a8774c; border-top: none; }
.gt-soil-band:nth-child(2) { background-color: #8c5f3b; }
.gt-soil-band:nth-child(3) { background-color: #72482b; }
.gt-tool {
  position: absolute;
  z-index: 4;
  font-size: 38px;
  opacity: 0;
  pointer-events: none;
}
.gt-tool.brush {
  left: 28%;
  bottom: 26%;
  animation: brushSweep 0.9s ease-in-out infinite alternate;
}
.gt-tool.trowel {
  left: 64%;
  bottom: 14%;
  animation: trowelDig 0.7s ease-in-out infinite alternate;
}
@keyframes brushSweep {
  from { transform: translateX(-24px) rotate(-25deg); }
  to   { transform: translateX(24px) rotate(15deg); }
}
@keyframes trowelDig {
  from { transform: translateY(0) rotate(0); }
  to   { transform: translateY(10px) rotate(-20deg); }
}
.gt-hud {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.gt-panel {
  background: rgba(255, 253, 249, 0.92);
  border: 2.5px solid #4a2e4f;
  border-radius: 16px;
  padding: 8px 14px;
  box-shadow: 4px 5px 0 rgba(74, 46, 79, 0.18);
  color: #38233c;
}
.gt-panel small {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8c5694;
}
.gt-year {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.gt-era {
  font-family: 'Caveat', cursive;
  font-size: 1.15rem;
  color: #633c68;
}
.gt-fact {
  flex: 1;
  max-width: 470px;
  text-align: center;
  font-weight: 700;
  font-size: 0.98rem;
  border-radius: 20px;
}
.gt-fact.pop {
  animation: factPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes factPop {
  from { transform: scale(0.85) rotate(-2deg); opacity: 0.3; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.gt-depth-bar {
  width: 120px;
  height: 12px;
  border: 2px solid #4a2e4f;
  border-radius: 999px;
  overflow: hidden;
  background: #f5e2f3;
  margin: 4px 0;
}
#gt-depth-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #c2915f, #72482b);
}
.gt-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  translate: -50% 0;
  z-index: 6;
  background: #fffdf9;
  border: 2.5px solid #4a2e4f;
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #38233c;
  box-shadow: 3px 4px 0 rgba(74, 46, 79, 0.2);
  animation: pulseHint 2.2s ease-in-out infinite;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .gt-hud { flex-wrap: wrap; }
  .gt-fact { order: 3; max-width: none; flex-basis: 100%; font-size: 0.86rem; }
  .gt-year { font-size: 1.4rem; }
  .gt-depth-bar { width: 80px; }
}

/* --------------------------------------------------------------------------
   6. ZAMAN YOLCULUĞU ÇİZELGESİ
   -------------------------------------------------------------------------- */
.timeline {
  position: relative;
  max-width: 1020px;
  margin: 0 auto;
  padding: 10px 0 30px;
}
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 8px;
  translate: -50% 0;
  border-radius: 8px;
  background: repeating-linear-gradient(180deg, rgba(74, 46, 79, 0.28) 0 14px, transparent 14px 24px);
}
.timeline-line-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #b892be, #d47a9e, #d89b48);
}
.timeline-ferry {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fffdf9;
  border: 3px solid #4a2e4f;
  box-shadow: 4px 5px 0 rgba(74, 46, 79, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  z-index: 5;
}
.timeline-ferry span {
  display: inline-block;
  animation: gentleBob 1.8s ease-in-out infinite;
}
.tl-item {
  position: relative;
  width: 50%;
  padding: 18px 48px;
}
.tl-item.left  { left: 0; }
.tl-item.right { left: 50%; }
.tl-dot {
  position: absolute;
  top: 38px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fffdf9;
  border: 2.5px solid #4a2e4f;
  box-shadow: 3px 4px 0 rgba(74, 46, 79, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  z-index: 3;
}
.tl-item.left  .tl-dot { right: -24px; }
.tl-item.right .tl-dot { left: -24px; }
.tl-card {
  background: var(--cream-paper);
  border: var(--cartoon-border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--cartoon-shadow);
  color: var(--plum-dark);
}
.tl-item.left .tl-card  { rotate: -0.8deg; }
.tl-item.right .tl-card { rotate: 0.8deg; }
.tl-era {
  display: inline-block;
  background: #6c3f73;
  color: #fffdf9;
  border: 2px solid #351d39;
  border-radius: 999px;
  padding: 3px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.tl-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  line-height: 1.15;
  margin-bottom: 8px;
}
.tl-card p {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--plum-primary);
  margin-bottom: 12px;
}
.tl-photo {
  height: 180px;
  border: 2px solid #4a2e4f;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #ead5ec;
  cursor: pointer;
}
.tl-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.tl-photo:hover img { transform: scale(1.07); }
.tl-illustration {
  height: 180px;
  border: 2px solid #4a2e4f;
  border-radius: 14px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, #f9d3a8, #f4b08f 60%, #c2915f 61%, #946640);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  padding-bottom: 14px;
  overflow: hidden;
}
.tl-illustration svg { height: 120px; width: auto; }
@media (max-width: 760px) {
  .timeline-line, .timeline-ferry { left: 30px; }
  .tl-item, .tl-item.left, .tl-item.right {
    width: 100%;
    left: 0;
    padding: 14px 8px 14px 76px;
  }
  .tl-item.left .tl-dot, .tl-item.right .tl-dot { left: 6px; right: auto; }
}

/* --------------------------------------------------------------------------
   7. KAYDIRINCA BELİREN ÖĞELER
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  translate: 0 36px;
  transition:
    opacity 0.7s ease,
    translate 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease;
}
.reveal.visible {
  opacity: 1;
  translate: 0 0;
}

/* --------------------------------------------------------------------------
   8. GEZEN KEDİ & POLAROİD ÜSTÜNDE UYUYAN KEDİ
   -------------------------------------------------------------------------- */
.walking-cat {
  position: fixed;
  left: 0;
  bottom: 2px;
  width: 92px;
  height: 62px;
  z-index: 900;
  cursor: pointer;
  will-change: transform;
}
.wc-flip { width: 100%; height: 100%; }
.wc-flip svg { width: 100%; height: 100%; overflow: visible; }
.wc-leg {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: legSwing 0.45s ease-in-out infinite alternate;
}
.wc-leg.leg-b { animation-direction: alternate-reverse; }
@keyframes legSwing {
  from { transform: rotate(20deg); }
  to   { transform: rotate(-20deg); }
}
.wc-body { animation: catBob 0.45s ease-in-out infinite alternate; }
@keyframes catBob {
  from { transform: translateY(0); }
  to   { transform: translateY(-2px); }
}
.wc-tail {
  transform-box: fill-box;
  transform-origin: 100% 100%;
  animation: tailWag 1.3s ease-in-out infinite alternate;
}
.wc-eye-closed { display: none; }
.walking-cat.sleeping .wc-leg { animation-play-state: paused; }
.walking-cat.sleeping .wc-body { animation: none; transform: translateY(5px); }
.walking-cat.sleeping .wc-eye-open { display: none; }
.walking-cat.sleeping .wc-eye-closed { display: inline; }
.walking-cat-zzz {
  position: absolute;
  top: -20px;
  left: 50%;
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  font-weight: 700;
  color: #8c5694;
  opacity: 0;
  pointer-events: none;
}
.walking-cat.sleeping .walking-cat-zzz {
  animation: zzzFloat 2s ease-in-out infinite;
}
@keyframes zzzFloat {
  0%   { opacity: 0; transform: translate(0, 6px); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translate(12px, -16px); }
}
.walking-cat.petted .wc-flip {
  animation: pettedHop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pettedHop {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}
.polaroid-sleeper {
  position: absolute;
  top: -34px;
  right: 10px;
  z-index: 6;
  font-size: 32px;
  cursor: pointer;
  filter: drop-shadow(2px 3px 0 rgba(74, 46, 79, 0.25));
}
.polaroid-sleeper.jump { animation: sleeperJump 0.75s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes sleeperJump {
  0%   { transform: translateY(-60px) scale(0.6); opacity: 0; }
  60%  { transform: translateY(4px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}
.ps-zzz {
  position: absolute;
  top: -12px;
  right: -14px;
  font-size: 16px;
  animation: zzzFloat 2.2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   9. SAYFA ÇEVİRME
   -------------------------------------------------------------------------- */
.journal-book-sheet {
  transform-origin: left center;
  backface-visibility: hidden;
}

/* Hareket azaltma tercihi olan kullanıcılar için */
@media (prefers-reduced-motion: reduce) {
  .walking-cat, #sky-sun { display: none; }
  .reveal { opacity: 1; translate: 0 0; }
}