/* ====================================================== */
/*  HAYVAN ÇİFTLİĞİ - ANIMATIONS & THEME EFFECTS        */
/* ====================================================== */

/* ── 1. SAYFA YÜKLEME EKRANI ─────────────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #8B4513 0%, #A0522D 40%, #228B22 100%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#page-loader.loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-icon {
  font-size: 5rem;
  animation: loader-bounce 0.8s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.5));
}
@keyframes loader-bounce {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-20px) scale(1.1); }
}
.loader-text {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  animation: loader-pulse 1.5s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(255,255,255,0.5);
}
@keyframes loader-pulse {
  0%,100% { opacity:1; letter-spacing:4px; }
  50%      { opacity:0.6; letter-spacing:7px; }
}
.loader-bar-wrap {
  width: 220px; height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 10px; overflow: hidden;
}
.loader-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg,#fff 0%,#f0e68c 50%,#fff 100%);
  border-radius: 10px;
  animation: loader-fill 1.4s ease forwards;
  box-shadow: 0 0 10px rgba(255,255,255,0.6);
}
@keyframes loader-fill {
  0%  { width:0%; }
  60% { width:75%; }
  100%{ width:100%; }
}
.loader-dots { display:flex; gap:10px; }
.loader-dots span {
  width:12px; height:12px; border-radius:50%;
  background:rgba(255,255,255,0.8);
  animation: loader-dot 1s ease-in-out infinite;
}
.loader-dots span:nth-child(2){ animation-delay:0.2s; }
.loader-dots span:nth-child(3){ animation-delay:0.4s; }
@keyframes loader-dot {
  0%,100%{ transform:translateY(0); opacity:0.5; }
  50%    { transform:translateY(-12px); opacity:1; }
}

/* ── 2. SAYFA GEÇİŞ OVERLAY ─────────────────────────── */
.page-transition-overlay {
  position: fixed; inset: 0;
  background: linear-gradient(135deg,#8B4513,#228B22);
  z-index: 9999; transform: translateX(-100%);
  pointer-events: none;
}
.page-transition-overlay.slide-in {
  animation: page-slide-in 0.4s cubic-bezier(0.77,0,0.175,1) forwards;
}
.page-transition-overlay.slide-out {
  animation: page-slide-out 0.4s cubic-bezier(0.77,0,0.175,1) forwards;
}
@keyframes page-slide-in  { from{transform:translateX(-100%)} to{transform:translateX(0)} }
@keyframes page-slide-out { from{transform:translateX(0)}      to{transform:translateX(100%)} }

/* ── 3. AURORA ARKA PLAN ─────────────────────────────── */
.aurora-container {
  position: fixed; inset: 0;
  pointer-events: none; z-index: -2; overflow: hidden;
}
.aurora {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0.13; mix-blend-mode: multiply;
}
.aurora-1 {
  width:700px; height:700px;
  background: radial-gradient(circle,#8B4513 0%,transparent 70%);
  top:-200px; left:-200px;
  animation: aurora-move-1 18s ease-in-out infinite;
}
.aurora-2 {
  width:600px; height:600px;
  background: radial-gradient(circle,#228B22 0%,transparent 70%);
  bottom:-100px; right:-100px;
  animation: aurora-move-2 22s ease-in-out infinite;
}
.aurora-3 {
  width:500px; height:500px;
  background: radial-gradient(circle,#DAA520 0%,transparent 70%);
  top:40%; left:30%;
  animation: aurora-move-3 15s ease-in-out infinite;
}
.aurora-4 {
  width:400px; height:400px;
  background: radial-gradient(circle,#A0522D 0%,transparent 70%);
  top:10%; right:20%;
  animation: aurora-move-4 25s ease-in-out infinite;
}
@keyframes aurora-move-1 {
  0%,100%{ transform:translate(0,0) scale(1); }
  33%    { transform:translate(120px,80px) scale(1.2); }
  66%    { transform:translate(-60px,140px) scale(0.9); }
}
@keyframes aurora-move-2 {
  0%,100%{ transform:translate(0,0) scale(1); }
  40%    { transform:translate(-100px,-80px) scale(1.15); }
  80%    { transform:translate(80px,60px) scale(0.85); }
}
@keyframes aurora-move-3 {
  0%,100%{ transform:translate(0,0) scale(1); opacity:0.13; }
  50%    { transform:translate(60px,-100px) scale(1.3); opacity:0.22; }
}
@keyframes aurora-move-4 {
  0%,100%{ transform:translate(0,0) scale(1); }
  35%    { transform:translate(-80px,60px) scale(1.1); }
  70%    { transform:translate(50px,-50px) scale(0.95); }
}

/* ── 4. YILDIZ ALANI ─────────────────────────────────── */
.star-field { position:fixed; inset:0; pointer-events:none; z-index:-1; }
.star {
  position:absolute; border-radius:50%;
  background: radial-gradient(circle,rgba(139,69,19,0.8) 0%,transparent 70%);
  animation: star-twinkle var(--dur,3s) ease-in-out infinite var(--delay,0s);
  will-change: transform, opacity;
}
@keyframes star-twinkle {
  0%,100%{ opacity:0.1; transform:scale(0.8); }
  50%    { opacity:0.7; transform:scale(1.2); }
}

/* ── 5. YUKARIDAN AŞAĞIYA DÜŞEN NOKTALAR ────────────── */
.fall-dot {
  position: fixed; border-radius:50%;
  background: radial-gradient(circle at 40% 30%,
    rgba(40,25,10,0.50) 0%, rgba(20,10,0,0.25) 55%, transparent 100%);
  pointer-events: none; z-index: -1; top: -60px;
  animation: dot-fall var(--fall-dur,18s) linear infinite var(--fall-del,0s);
  will-change: transform, opacity;
}
@keyframes dot-fall {
  0%  { transform:translateY(0) translateX(0); opacity:0; }
  5%  { opacity:var(--op,0.40); }
  90% { opacity:var(--op,0.40); }
  100%{ transform:translateY(110vh) translateX(var(--sway,30px)); opacity:0; }
}

/* ── 6. SCROLL-REVEAL ────────────────────────────────── */
[data-reveal] {
  opacity:0;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
[data-reveal="fade-up"]   { transform:translateY(50px); }
[data-reveal="fade-down"] { transform:translateY(-50px); }
[data-reveal="fade-left"] { transform:translateX(-60px); }
[data-reveal="fade-right"]{ transform:translateX(60px); }
[data-reveal="zoom-in"]   { transform:scale(0.8); }
[data-reveal].revealed    { opacity:1; transform:none; }
[data-reveal-delay="100"] { transition-delay:0.1s; }
[data-reveal-delay="200"] { transition-delay:0.2s; }
[data-reveal-delay="300"] { transition-delay:0.3s; }
[data-reveal-delay="400"] { transition-delay:0.4s; }
[data-reveal-delay="500"] { transition-delay:0.5s; }

/* ── 7. NAVBAR ───────────────────────────────────────── */
.navbar {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(90deg,rgba(139,69,19,0.95) 0%,rgba(160,82,45,0.95) 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  animation: navbar-slide-down 0.6s cubic-bezier(0.25,0.46,0.45,0.94) both;
}
@keyframes navbar-slide-down {
  from{ transform:translateY(-100%); opacity:0; }
  to  { transform:translateY(0);     opacity:1; }
}
.nav-link::before {
  content:''; position:absolute; bottom:-3px; left:50%;
  width:0; height:3px;
  background: linear-gradient(90deg,#f0e68c,#fff,#f0e68c);
  border-radius:2px;
  transition: width 0.35s ease, left 0.35s ease;
  box-shadow: 0 0 8px rgba(240,230,140,0.8);
}
.nav-link:hover::before { width:100%; left:0; }

/* ── 8. BUTON RİPPLE ─────────────────────────────────── */
.btn { position:relative; overflow:hidden; }
.btn .ripple {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.35);
  transform:scale(0);
  animation: ripple-expand 0.65s linear;
  pointer-events:none;
}
@keyframes ripple-expand { to{ transform:scale(4); opacity:0; } }
.btn::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg,rgba(255,255,255,0.15) 0%,transparent 60%);
  opacity:0; transition:opacity 0.3s ease; border-radius:inherit;
}
.btn:hover::after { opacity:1; }

/* ── 9. MAIN GEÇİŞ ───────────────────────────────────── */
main { animation: main-fade-in 0.6s ease 0.1s both; }
@keyframes main-fade-in {
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ── 10. SCROLL PROGRESS ÇUBUĞU ─────────────────────── */
#scroll-progress {
  position:fixed; top:0; left:0; height:4px; width:0%;
  background: linear-gradient(90deg,#DAA520,#8B4513,#228B22);
  z-index:99998; transition:width 0.1s linear;
  box-shadow:0 0 10px rgba(218,165,32,0.7);
}

/* ── 11. CURSOR SPOTLIGHT ────────────────────────────── */
#cursor-spotlight {
  position:fixed; width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle,rgba(218,165,32,0.07) 0%,transparent 70%);
  pointer-events:none; z-index:-1;
  transform:translate(-50%,-50%);
  transition: left 0.08s ease, top 0.08s ease;
}

/* ── 12. TOAST BİLDİRİM ──────────────────────────────── */
#toast-container {
  position:fixed; bottom:30px; right:30px; z-index:99999;
  display:flex; flex-direction:column; gap:12px; pointer-events:none;
}
.toast-msg {
  background: linear-gradient(135deg,#8B4513,#A0522D);
  color:white; padding:14px 22px; border-radius:12px;
  font-size:0.95rem; font-weight:600;
  box-shadow:0 8px 25px rgba(0,0,0,0.2);
  animation: toast-in 0.4s cubic-bezier(0.175,0.885,0.32,1.275) both;
  pointer-events:auto; border-left:4px solid #DAA520; max-width:320px;
}
.toast-msg.toast-out  { animation:toast-out 0.35s ease forwards; }
.toast-msg.toast-success{ border-left-color:#228B22; background:linear-gradient(135deg,#1a6b1a,#228B22); }
.toast-msg.toast-error  { border-left-color:#dc3545; background:linear-gradient(135deg,#8b1a1a,#dc3545); }
@keyframes toast-in  { from{opacity:0;transform:translateX(100%) scale(0.8)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes toast-out { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(120%)} }

/* ── 13. İÇERİK Z-INDEX (efektlerin üstünde) ─────────── */
nav, main, footer,
.story-wrapper, .about-content, .settings-content,
.profile-content, .auth-card, .auth-container,
.chapter-link-card, .story-content, .about-card,
.settings-section, .profile-section,
.hero-section, .hero-content, .about-section, .cta-section {
  position:relative; z-index:2;
}

/* ── 14. KART 3D TILT ────────────────────────────────── */
.tilt-card { transition:transform 0.15s ease, box-shadow 0.15s ease; transform-style:preserve-3d; }

/* ── 15. ANİMASYONLU AYIRICI ─────────────────────────── */
.animated-divider {
  width:0; height:3px;
  background: linear-gradient(90deg,transparent,#8B4513,#DAA520,#228B22,transparent);
  border-radius:2px; margin:20px auto;
  transition:width 1s ease; box-shadow:0 0 8px rgba(139,69,19,0.4);
}
.animated-divider.visible { width:80%; }

/* ── 16. OKUNABILIRLIK ───────────────────────────────── */

/* Auth kartları (Login / Register) */
.auth-card {
  background: rgba(255, 252, 245, 0.97) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 50px rgba(80,40,10,0.18) !important;
  position: relative;
  z-index: 10 !important;
}
.auth-header h1 { color: #2c1a00 !important; }
.auth-header p  { color: #6b4c2a !important; }
.auth-footer p  { color: #6b4c2a !important; }
.auth-link      { color: var(--primary-color) !important; }

/* Form elemanları */
.form-label   { color: #3d1f00 !important; font-weight: 600; }
.form-control {
  background: #fffdf8 !important;
  color: #2c1a00 !important;
  border-color: #d4b896 !important;
}
.form-control::placeholder { color: #b89878 !important; }
.form-text    { color: #5a7a5a !important; }

/* Hata mesajları */
.text-danger  { color: #c0392b !important; }
.alert-danger { background: #fde8e8 !important; color: #8b1a1a !important; border-color: #f5b8b8 !important; }

/* About kartları */
.about-card {
  background: rgba(255,255,255,0.93) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(139,69,19,0.12);
}
.about-card h3 { color: #5a2d00 !important; font-weight: 700; }
.about-card p  { color: #2c1a00 !important; }

/* Story içerik */
.story-wrapper {
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.story-content, .story-chapter { background: rgba(255,255,255,0.97) !important; }
.chapter-text  { color: #1a0e00 !important; }
.chapter-title { color: #5a2d00 !important; }

/* About sayfası */
.about-content {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Settings & Profile */
.settings-section, .profile-section {
  background: rgba(255,255,255,0.93) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
}
.info-label   { color: #3d1f00 !important; font-weight: 600; }
.info-value   { color: #1a0e00 !important; }

/* Bölüm link kartları */
.chapter-link-card {
  background: rgba(255,252,235,0.95) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.chapter-link-card h3, .chapter-number-big { color: #5a2d00 !important; }
.chapter-link-card p  { color: #333 !important; }

/* Footer */
.footer-content p {
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ── 17. RESPONSIVE ──────────────────────────────────── */
@media (max-width:768px) {
  .loader-text  { font-size:1rem; }
  .loader-icon  { font-size:3.5rem; }
  .loader-bar-wrap { width:160px; }
  #cursor-spotlight { display:none; }
  .fall-dot  { display:none; }
  .aurora    { filter:blur(60px); }
}

/* ── 18. REDUCED MOTION ──────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .fall-dot,.star,.aurora,.star-field { display:none; }
}