/* ==========================================================================
   Atmosfer: arka plan katmanları, neon/cam, hareket seviyeleri
   ========================================================================== */

/* Katmanlar: html zemin rengini taşır, body şeffaf olur ki katmanlar görünsün */
body, body.dark-beret-mode { background: none !important; }
#atmo-arka, #atmo-desen, #atmo-fx { position: fixed; inset: 0; pointer-events: none; }
#atmo-arka  { z-index: -3; overflow: hidden; transition: background .6s ease; }
#atmo-desen { z-index: -2; background-repeat: repeat; transition: opacity .4s ease; }
#atmo-fx    { z-index: -1; width: 100vw; height: 100vh; }
#atmo-imlec { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9998; }
#atmo-hale  { position: fixed; left: 0; top: 0; width: 440px; height: 440px; border-radius: 50%;
              pointer-events: none; z-index: 9997; mix-blend-mode: screen; will-change: transform; display: none; }
body.dark-beret-mode #atmo-arka { filter: brightness(.45) saturate(.8); }

/* Aurora: yumuşak, bulanık renk lekeleri */
.atmo-aurora { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.08); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.atmo-blob { position: absolute; display: block; border-radius: 50%; transform: translate(-50%, -50%); filter: blur(30px); mix-blend-mode: screen; will-change: transform; }
.atmo-aurora.hareketli .b0 { animation: atmoBlob0 28s ease-in-out infinite alternate; }
.atmo-aurora.hareketli .b1 { animation: atmoBlob1 34s ease-in-out infinite alternate; }
.atmo-aurora.hareketli .b2 { animation: atmoBlob2 31s ease-in-out infinite alternate; }
.atmo-aurora.hareketli .b3 { animation: atmoBlob3 40s ease-in-out infinite alternate; }
@keyframes atmoBlob0 { to { transform: translate(-20%, -35%) scale(1.25); } }
@keyframes atmoBlob1 { to { transform: translate(-80%, -60%) scale(.85); } }
@keyframes atmoBlob2 { to { transform: translate(-35%, -80%) scale(1.2); } }
@keyframes atmoBlob3 { to { transform: translate(-65%, -25%) scale(1.15); } }

/* Fotoğraf */
.atmo-foto, .atmo-foto-ort { position: absolute; inset: -40px; display: block; }
.atmo-foto { background-size: cover; background-position: center; }

/* Akan desen */
#atmo-desen.akan { animation: atmoDesenAk 90s linear infinite; }
@keyframes atmoDesenAk { to { background-position: 600px 300px; } }

/* ==========================================================================
   Neon ve cam
   ========================================================================== */
.glass-panel, .glass-card, .modal-content, .lock-card {
  backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
}
.glass-panel, .modal-content, .lock-card {
  box-shadow: var(--shadow-glass), 0 0 calc(var(--neon) * 34px) rgba(var(--rose-rgb), calc(var(--neon) * .26)),
              inset 0 1px 0 rgba(255, 255, 255, calc(.04 + var(--neon) * .06));
}
.tab-pane h2, .tab-title, .lock-title, .nav-brand, .intro-text {
  filter: drop-shadow(0 0 calc(var(--neon) * 10px) rgba(var(--rose-rgb), calc(var(--neon) * .85)));
}
.nav-tab-item.active {
  box-shadow: 0 0 calc(4px + var(--neon) * 22px) rgba(var(--rose-rgb), calc(.15 + var(--neon) * .45)),
              inset 0 0 calc(var(--neon) * 14px) rgba(var(--rose-rgb), calc(var(--neon) * .3));
}
.glass-button { box-shadow: 0 4px 14px rgba(var(--rose-rgb), .25), 0 0 calc(var(--neon) * 24px) rgba(var(--rose-rgb), calc(var(--neon) * .55)); }
.glass-input:focus { box-shadow: 0 0 0 3px rgba(var(--rose-rgb), .18), 0 0 calc(var(--neon) * 18px) rgba(var(--rose-rgb), calc(var(--neon) * .5)); }
html.neon-yuksek.hareket-canli .nav-brand, html.neon-yuksek.hareket-catapat .nav-brand { animation: atmoNeonTitre 7s infinite; }
@keyframes atmoNeonTitre { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .55; } }

/* ==========================================================================
   Hareket seviyeleri
   ========================================================================== */
/* Ortak: dokununca hafif basılma */
.glass-button:active, .nav-tab-item:active, .profile-card:active { transform: scale(.97); }

/* 1) DİNGİN — süs animasyonu yok */
html.hareket-dingin .tab-pane, html.hareket-dingin .modal-content { animation: none !important; }
html.hareket-dingin .glass-panel, html.hareket-dingin .glass-card, html.hareket-dingin .gallery-item,
html.hareket-dingin .movie-card, html.hareket-dingin .nav-tab-item, html.hareket-dingin .glass-button { transition-duration: .05s !important; }
html.hareket-dingin .atmo-blob { animation: none !important; }

/* 2) AKIŞ — yumuşak sayfa geçişi ve beliren kartlar */
html.hareket-akis .tab-pane.active { animation: atmoSayfa .45s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes atmoSayfa { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.hareket-akis .atmo-giris { animation: atmoKart .55s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes atmoKart { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

/* 3) CANLI — eğilen kartlar, derinlik, kademeli açılış */
html.hareket-canli .tab-pane.active { animation: atmoSayfaCanli .6s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes atmoSayfaCanli { from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
html.hareket-canli .atmo-giris { animation: atmoKartCanli .7s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes atmoKartCanli { from { opacity: 0; transform: perspective(900px) translateY(30px) rotateX(12deg) scale(.96); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
html.hareket-canli .nav-tab-item:hover, html.hareket-catapat .nav-tab-item:hover { transform: translateX(6px); }
html.hareket-canli .nav-tab-item .tab-icon, html.hareket-catapat .nav-tab-item .tab-icon { display: inline-block; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
html.hareket-canli .nav-tab-item:hover .tab-icon { transform: scale(1.25) rotate(-8deg); }

.egimli {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px) !important;
  transition: transform .14s ease-out, box-shadow .3s ease !important;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7), 0 0 calc(10px + var(--neon) * 26px) rgba(var(--rose-rgb), calc(.12 + var(--neon) * .3)) !important;
  will-change: transform;
}

/* 4) ÇATAPAT — zıplayan, parlayan, renk değiştiren */
html.hareket-catapat .tab-pane.active { animation: atmoSayfaZipla .75s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes atmoSayfaZipla { 0% { opacity: 0; transform: translateY(40px) scale(.92) rotate(-1deg); } 60% { opacity: 1; transform: translateY(-6px) scale(1.01); } 100% { transform: none; } }
html.hareket-catapat .atmo-giris { animation: atmoKartZipla .8s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes atmoKartZipla { 0% { opacity: 0; transform: translateY(46px) scale(.75) rotate(-4deg); } 60% { opacity: 1; transform: translateY(-8px) scale(1.04) rotate(1.5deg); } 100% { transform: none; } }
html.hareket-catapat .nav-brand, html.hareket-catapat .tab-pane.active h2 { animation: atmoGokkusagi 8s linear infinite; }
@keyframes atmoGokkusagi { to { filter: hue-rotate(360deg) drop-shadow(0 0 10px rgba(var(--rose-rgb), .8)); } }
html.hareket-catapat .nav-tab-item:hover .tab-icon { animation: atmoSalla .6s ease-in-out infinite; }
@keyframes atmoSalla { 0%, 100% { transform: rotate(0) scale(1.3); } 25% { transform: rotate(-14deg) scale(1.3); } 75% { transform: rotate(14deg) scale(1.3); } }
html.hareket-catapat .glass-button:hover { animation: atmoNabiz .9s ease-in-out infinite; }
@keyframes atmoNabiz { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
html.hareket-catapat .glass-panel { animation: atmoNefes 6s ease-in-out infinite; }
@keyframes atmoNefes { 0%, 100% { box-shadow: var(--shadow-glass), 0 0 calc(10px + var(--neon) * 30px) rgba(var(--rose-rgb), calc(.15 + var(--neon) * .3)); }
                       50% { box-shadow: var(--shadow-glass), 0 0 calc(16px + var(--neon) * 44px) rgba(var(--violet-rgb), calc(.2 + var(--neon) * .4)); } }

@media (prefers-reduced-motion: reduce) {
  .atmo-blob, #atmo-desen.akan { animation: none !important; }
}

/* ==========================================================================
   Bildirim (alert yerine)
   ========================================================================== */
.atmo-bildirim {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px);
  background: var(--bg-glass); border: 1px solid var(--border-glass); color: var(--text-primary);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 12px 18px; border-radius: 14px; font-size: .92rem; z-index: 10000; opacity: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 calc(var(--neon) * 24px) rgba(var(--rose-rgb), calc(var(--neon) * .5));
  transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1); max-width: calc(100vw - 32px); pointer-events: none; white-space: pre-line; text-align: center; line-height: 1.45;
}
.atmo-bildirim.goster { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Gezen hayvanlar
   ========================================================================== */
.gezgin { position: fixed; left: 0; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 996;
  display: flex; flex-direction: column; align-items: center; pointer-events: none; will-change: transform; }
.gezgin-uc { bottom: auto; top: 0; }
.gezgin-govde { pointer-events: auto; background: none; border: 0; padding: 0; cursor: pointer; line-height: 1; }
.gezgin-sprite { display: block; }
.gezgin-sprite.ters { transform: scaleX(-1); }
.gezgin-emoji { display: block; font-size: 46px; filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .45)); }
.kapibara { display: block; width: 100px; height: 68px; filter: drop-shadow(0 7px 6px rgba(0, 0, 0, .4)); overflow: visible; }
.kapibara .bc { transform-box: fill-box; transform-origin: 50% 8%; }
.gezgin:not(.duruyor) .kapibara .b1, .gezgin:not(.duruyor) .kapibara .b4 { animation: kapiBacak .44s ease-in-out infinite; }
.gezgin:not(.duruyor) .kapibara .b2, .gezgin:not(.duruyor) .kapibara .b3 { animation: kapiBacak .44s ease-in-out -.22s infinite; }
.gezgin:not(.duruyor) .kapibara { animation: kapiSalla .44s ease-in-out infinite; }
.gezgin.duruyor .kapibara .portakal { animation: portakalSek 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes kapiBacak { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }
@keyframes kapiSalla { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes portakalSek { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
.gezgin-yuru:not(.duruyor) .gezgin-emoji { animation: gezginAdim .42s ease-in-out infinite; }
.gezgin-yan:not(.duruyor) .gezgin-emoji { animation: gezginYan .3s ease-in-out infinite; }
.gezgin-uc .gezgin-emoji { animation: gezginSuzul 1.1s ease-in-out infinite; }
@keyframes gezginAdim { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-7px) rotate(5deg); } }
@keyframes gezginYan { 0%, 100% { transform: translateX(0) rotate(-3deg); } 50% { transform: translateX(3px) rotate(3deg); } }
@keyframes gezginSuzul { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.06); } }
.gezgin.zipla .gezgin-govde { animation: gezginZipla .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes gezginZipla { 0% { transform: translateY(0); } 40% { transform: translateY(-26px) scale(1.08); } 100% { transform: translateY(0); } }
.gezgin-balon { position: absolute; bottom: 100%; left: 50%; margin-bottom: 8px; width: max-content; max-width: min(250px, 70vw);
  background: var(--bg-glass); border: 1px solid var(--border-glass); color: var(--text-primary);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 9px 13px; border-radius: 15px; font-size: .83rem; line-height: 1.4;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 calc(var(--neon) * 20px) rgba(var(--rose-rgb), calc(var(--neon) * .45));
  opacity: 0; transform: translate(-50%, 8px) scale(.9); transform-origin: 50% 100%; transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
.gezgin-uc .gezgin-balon { bottom: auto; top: 100%; margin: 8px 0 0; transform-origin: 50% 0; }
.gezgin.konusuyor .gezgin-balon { opacity: 1; transform: translate(-50%, 0) scale(1); }
.gezgin.kenar-sol .gezgin-balon { left: 0; transform: translate(0, 8px) scale(.9); }
.gezgin.kenar-sol.konusuyor .gezgin-balon { transform: none; }
.gezgin.kenar-sag .gezgin-balon { left: auto; right: 0; transform: translate(0, 8px) scale(.9); }
.gezgin.kenar-sag.konusuyor .gezgin-balon { transform: none; }
.gezgin-ad { margin-top: 2px; font-size: .64rem; color: var(--text-secondary); background: rgba(0, 0, 0, .55); padding: 1px 8px; border-radius: 8px; opacity: 0; transition: opacity .25s; }
.gezgin:hover .gezgin-ad, .gezgin.konusuyor .gezgin-ad { opacity: 1; }

/* ==========================================================================
   Köşedeki 3B kediler (ikisi yan yana sağ altta oturur, menüyü kapatmaz)
   ========================================================================== */
.floating-cat { animation: none !important; bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important; pointer-events: none; z-index: 995; }
.floating-cat > * { pointer-events: auto; }
.floating-cat .cat-bubble { pointer-events: none; }
.cat-fistik { right: 6px !important; left: auto !important; }
.cat-findik { right: 98px !important; left: auto !important; }
.floating-cat .kedi3d { width: 96px; height: 106px; cursor: pointer; display: none; position: relative; }
.floating-cat.kedi3d-hazir .kedi3d { display: block; }
.floating-cat.kedi3d-hazir .cat-sprite { display: none; }
.floating-cat .cat-label { opacity: 0; transition: opacity .25s; margin-top: -4px; }
.floating-cat:hover .cat-label, .floating-cat.clicked .cat-label { opacity: 1; }
.cat-findik .cat-bubble, .cat-fistik .cat-bubble { left: auto !important; right: 0 !important; bottom: calc(100% - 6px); width: max-content; max-width: 230px; }
.cat-findik .cat-bubble::after, .cat-fistik .cat-bubble::after { left: auto !important; right: 40px !important; }
.kedi3d-tuval { width: 100%; height: 100%; display: block; }
.kedi3d.uyuyor::after { content: 'z'; position: absolute; top: 2px; right: 14px; font-weight: 800; color: var(--text-secondary);
  font-size: 1rem; animation: kediZzz 2.4s ease-in-out infinite; text-shadow: 0 0 8px rgba(var(--violet-rgb), .8); }
@keyframes kediZzz { 0% { opacity: 0; transform: translate(0, 6px) scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -22px) scale(1.4); } }
@media (max-width: 720px) {
  .floating-cat .kedi3d { width: 74px; height: 82px; }
  .cat-findik { right: 76px !important; }
}

/* Pomodoro: sayaç tek satırda, kediler 3B */
.pomodoro-saat { display: flex; align-items: baseline; justify-content: center; font-family: var(--font-sans); font-variant-numeric: tabular-nums;
  font-size: 3.4rem; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.pomodoro-iki-nokta { margin: 0 .06em; opacity: .7; animation: pomoNokta 2s steps(1) infinite; }
@keyframes pomoNokta { 50% { opacity: .25; } }
html.hareket-dingin .pomodoro-iki-nokta { animation: none; }
.pomodoro-time-display .pomodoro-status-text { margin-top: 10px; }
.p-kedi3d { width: 170px; height: 180px; margin: 0 auto; cursor: pointer; position: relative; display: grid; place-items: center; }
.p-kedi3d.kedi3d-hazir .p-cat-emoji { display: none; }
.pomodoro-cat-avatar { padding-top: 78px; }
.pomodoro-cat-avatar .p-cat-speech { top: 14px; bottom: auto; z-index: 3; }
.floating-cat[hidden], .gezgin[hidden] { display: none !important; }

/* Yapboz: galeriden resim seçimi */
.puzzle-galeri-baslik { text-align: center; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin: 6px 0 10px; font-weight: 700; }
.puzzle-galeri { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 18px; }
.puzzle-galeri:empty { display: none; }
.puzzle-galeri-oge { width: 74px; height: 74px; border-radius: 12px; border: 2px solid transparent; background-size: cover; background-position: center;
  cursor: pointer; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), border-color .2s, box-shadow .2s; }
.puzzle-galeri-oge:hover { transform: translateY(-3px) scale(1.05); }
.puzzle-galeri-oge.secili { border-color: var(--color-cyan); box-shadow: 0 0 calc(8px + var(--neon) * 18px) rgba(var(--cyan-rgb), .6); }

/* tembel yüklenen fotoğraflar yumuşakça belirir */
.tab-pane img[loading="lazy"] { transition: opacity .45s ease, filter .45s ease, transform .5s ease; }
.tab-pane img.resim-bekliyor { opacity: 0; filter: blur(6px); }
html.hareket-dingin .tab-pane img[loading="lazy"] { transition: none; }