@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --color-ft-paper: #fff1e5;
  --color-ft-paper-dark: #f5e6d8;
  --color-ft-border: #e9decf;
  --color-ft-text: #333333;
  --color-ft-accent: #990000;
  --color-es-paper: #fdfbf0;
  --color-es-paper-dark: #f4ecd8;
  --color-es-border: #e4d1b9;
  --color-es-text: #5d4037;
}

body {
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button, a, input, [role="button"], .cursor-pointer {
  touch-action: manipulation;
}

.ft-theme {
  background-color: var(--color-ft-paper) !important;
  color: var(--color-ft-text) !important;
  font-family: serif !important;
}

.ft-theme .bg-white,
.ft-theme .bg-gray-50,
.ft-theme .bg-slate-50,
.ft-theme .bg-zinc-50,
.ft-theme .bg-neutral-50,
.ft-theme .bg-white\/10,
.ft-theme .bg-white\/20,
.ft-theme .bg-white\/30,
.ft-theme .bg-white\/40,
.ft-theme .bg-white\/50,
.ft-theme .bg-white\/60,
.ft-theme .bg-white\/70,
.ft-theme .bg-white\/80,
.ft-theme .bg-white\/90 {
  background-color: var(--color-ft-paper) !important;
}

.ft-theme .bg-gray-100,
.ft-theme .bg-gray-200,
.ft-theme .bg-gray-300,
.ft-theme .bg-gray-400,
.ft-theme .bg-gray-50\/50,
.ft-theme .bg-slate-100,
.ft-theme .bg-zinc-100,
.ft-theme .bg-neutral-100,
.ft-theme .bg-gray-900,
.ft-theme .bg-black,
.ft-theme .bg-\[\#1a1a1a\],
.ft-theme .bg-\[\#1e1e1e\],
.ft-theme .bg-\[\#282828\],
.ft-theme .bg-\[\#323232\],
.ft-theme .bg-\[\#404040\],
.ft-theme .bg-\[\#0a2540\] {
  background-color: var(--color-ft-paper-dark) !important;
  color: var(--color-ft-text) !important;
}

.ft-theme .border-gray-100,
.ft-theme .border-gray-200,
.ft-theme .border-gray-300,
.ft-theme .border-gray-400,
.ft-theme .border-gray-50,
.ft-theme .border-white\/10,
.ft-theme .border-white\/20,
.ft-theme .border-black\/5,
.ft-theme .border-black\/10,
.ft-theme .border-b,
.ft-theme .border-t,
.ft-theme .border-r,
.ft-theme .border-l,
.ft-theme .border {
  border-color: var(--color-ft-border) !important;
}

.ft-theme .text-gray-400,
.ft-theme .text-gray-500,
.ft-theme .text-gray-600,
.ft-theme .text-gray-700,
.ft-theme .text-gray-800,
.ft-theme .text-slate-400,
.ft-theme .text-slate-500,
.ft-theme .text-slate-600,
.ft-theme .text-zinc-400,
.ft-theme .text-zinc-500,
.ft-theme .text-zinc-600 {
  color: #555555 !important;
}

.ft-theme .text-\[\#0a2540\],
.ft-theme .text-black,
.ft-theme .text-gray-900,
.ft-theme .dark\:text-white,
.ft-theme .text-white {
  color: var(--color-ft-text) !important;
}

.ft-theme .text-white-force {
  color: white !important;
}

.ft-theme .text-white-force-dim {
  color: rgba(255, 255, 255, 0.6) !important;
}

.es-theme {
  background-color: var(--color-es-paper) !important;
  background-image: 
    url('https://www.transparenttextures.com/patterns/vintage-paper.png'),
    url('https://www.transparenttextures.com/patterns/music.png'),
    url('https://www.transparenttextures.com/patterns/vintage-roses.png');
  background-blend-mode: multiply;
  color: var(--color-es-text) !important;
  font-family: serif !important;
}

.flower-pillar {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 280px;
  pointer-events: none;
  z-index: 99999;
  opacity: 1;
  background-image: url('https://images.unsplash.com/photo-1552528148-932d20731f8b?q=80&w=800&auto=format&fit=crop');
  background-size: 100% auto;
  background-repeat: repeat-y;
  transition: all 0.5s ease;
  filter: drop-shadow(0 0 15px rgba(0,0,0,0.15));
}

.flower-pillar-left {
  left: 0;
  background-position: left top;
  mask-image: linear-gradient(to right, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 75%, transparent 100%);
}

.flower-pillar-right {
  right: 0;
  background-position: right top;
  transform: scaleX(-1);
  mask-image: linear-gradient(to right, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 75%, transparent 100%);
}

@media (max-width: 768px) {
  .flower-pillar {
    width: 140px;
    opacity: 1;
    z-index: 99999;
    mask-image: linear-gradient(to right, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
  }
}

.es-theme .bg-white,
.es-theme .bg-gray-50,
.es-theme .bg-slate-50,
.es-theme .bg-zinc-50,
.es-theme .bg-neutral-50,
.es-theme .bg-sky-50,
.es-theme .bg-blue-50,
.es-theme .bg-emerald-50,
.es-theme .bg-amber-50,
.es-theme .bg-rose-50,
.es-theme .bg-pink-50,
.es-theme .bg-orange-50,
.es-theme .bg-stone-50,
.es-theme .bg-white\/10,
.es-theme .bg-white\/20,
.es-theme .bg-white\/30,
.es-theme .bg-white\/40,
.es-theme .bg-white\/50,
.es-theme .bg-white\/60,
.es-theme .bg-white\/70,
.es-theme .bg-white\/80,
.es-theme .bg-white\/90,
.es-theme .bg-\[\#f8f9fa\],
.es-theme .bg-\[\#f0f2f5\] {
  background-color: var(--color-es-paper) !important;
}

.es-theme .bg-gray-50,
.es-theme .bg-gray-100,
.es-theme .bg-gray-200,
.es-theme .bg-gray-300,
.es-theme .bg-gray-400,
.es-theme .bg-gray-50\/50,
.es-theme .bg-white,
.es-theme .bg-white\/80,
.es-theme .bg-white\/70,
.es-theme .bg-white\/60,
.es-theme .bg-white\/40,
.es-theme .bg-slate-100,
.es-theme .bg-zinc-100,
.es-theme .bg-neutral-100,
.es-theme .bg-gray-900,
.es-theme .bg-black,
.es-theme .bg-\[\#1a1a1a\],
.es-theme .bg-\[\#1e1e1e\],
.es-theme .bg-\[\#282828\],
.es-theme .bg-\[\#323232\],
.es-theme .bg-\[\#404040\],
.es-theme .bg-\[\#0a2540\],
.es-theme .bg-\[\#F7F8FA\],
.es-theme .bg-\[\#f3f4f6\],
.es-theme .bg-\[\#E5E7EB\],
.es-theme .bg-\[\#e5e7eb\],
.es-theme .bg-\[\#fff1e5\]\/50,
.es-theme .bg-\[\#fff1e5\]\/60,
.es-theme .bg-\[\#fff1e5\]\/70,
.es-theme .bg-\[\#fff1e5\]\/40 {
  background-color: var(--color-es-paper-dark) !important;
}

.es-theme .border-gray-100,
.es-theme .border-gray-200,
.es-theme .border-gray-300,
.es-theme .border-gray-400,
.es-theme .border-gray-koyu,
.es-theme .border-gray-50,
.es-theme .border-white\/10,
.es-theme .border-white\/20,
.es-theme .border-black\/5,
.es-theme .border-black\/10,
.es-theme .border-b,
.es-theme .border-t,
.es-theme .border-r,
.es-theme .border-l,
.es-theme .border {
  border-color: var(--color-es-border) !important;
}

.es-theme .text-\[\#0a2540\],
.es-theme .text-black,
.es-theme .text-gray-900,
.es-theme .dark\:text-white,
.es-theme .text-white,
.es-theme .text-gray-800,
.es-theme .text-\[\#1E293B\],
.es-theme .text-\[\#1e293b\] {
  color: var(--color-es-text) !important;
}

.es-theme .text-gray-400,
.es-theme .text-gray-500,
.es-theme .text-gray-600,
.es-theme .text-gray-700,
.es-theme .text-slate-400,
.es-theme .text-slate-500,
.es-theme .text-slate-600,
.es-theme .text-zinc-400,
.es-theme .text-zinc-500,
.es-theme .text-zinc-600 {
  color: #7d6b64 !important;
}

.es-theme .text-\[\#0a2540\],
.es-theme .text-black,
.es-theme .text-gray-900,
.es-theme .dark\:text-white,
.es-theme .text-white {
  color: #5d4037 !important;
}

.es-theme .text-white-force {
  color: white !important;
}

.es-theme .text-white-force-dim {
  color: rgba(255, 255, 255, 0.6) !important;
}

.ft-theme .text-blue-500,
.ft-theme .text-blue-600,
.ft-theme .text-rose-500,
.ft-theme .text-rose-600,
.ft-theme .text-emerald-500,
.ft-theme .text-emerald-600,
.ft-theme .text-green-500,
.ft-theme .text-green-600,
.ft-theme .text-orange-500,
.ft-theme .text-orange-600,
.ft-theme .text-pink-500,
.ft-theme .text-pink-600 {
  color: var(--color-ft-accent) !important;
}

.ft-theme button.bg-\[\#0a2540\],
.ft-theme .bg-\[\#0a2540\],
.ft-theme .bg-orange-500,
.ft-theme .bg-rose-500,
.ft-theme .bg-emerald-500,
.ft-theme .bg-green-500,
.ft-theme .bg-blue-500,
.ft-theme .bg-indigo-500,
.ft-theme .bg-purple-500,
.ft-theme .bg-pink-500,
.ft-theme .bg-red-500 {
  background-color: var(--color-ft-accent) !important;
  color: white !important;
}

.ft-theme .font-black,
.ft-theme .font-bold,
.ft-theme .font-extrabold,
.ft-theme .font-medium,
.ft-theme h1,
.ft-theme h2,
.ft-theme h3,
.ft-theme h4,
.ft-theme h5,
.ft-theme h6,
.ft-theme p,
.ft-theme span,
.ft-theme div,
.ft-theme button,
.ft-theme input,
.ft-theme textarea {
  font-family: serif !important;
}

.ft-theme .shadow-sm,
.ft-theme .shadow-md,
.ft-theme .shadow-lg,
.ft-theme .shadow-xl,
.ft-theme .shadow-2xl,
.ft-theme .shadow-inner {
  box-shadow: none !important;
  border: 1px solid var(--color-ft-border) !important;
}

.ft-theme .rounded-xl,
.ft-theme .rounded-2xl,
.ft-theme .rounded-3xl,
.ft-theme .rounded-\[1\.5rem\],
.ft-theme .rounded-\[2rem\],
.ft-theme .rounded-\[2\.5rem\],
.ft-theme .rounded-\[3rem\],
.ft-theme .rounded-\[3\.5rem\],
.ft-theme .rounded-\[4rem\] {
  border-radius: 12px !important;
}

.ft-theme input,
.ft-theme textarea {
  background-color: transparent !important;
  border-bottom: 1px solid var(--color-ft-border) !important;
  border-radius: 12px !important;
}

.ft-theme .profile-action-btn,
.ft-theme .badge-card {
  border-color: var(--color-ft-accent) !important;
}

.ft-theme .ring-white\/30 {
  --tw-ring-color: var(--color-ft-accent) !important;
}

.ft-theme .backdrop-blur-xl,
.ft-theme .backdrop-blur-lg,
.ft-theme .backdrop-blur-md,
.ft-theme .backdrop-blur-sm {
  backdrop-filter: none !important;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@keyframes star-gently-twinkle {
  0%, 100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.1);
    filter: drop-shadow(0 0 2px var(--star-glow, rgba(255, 255, 255, 0.8)));
  }
}

.sky-star {
  position: absolute;
  background-color: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  animation: star-gently-twinkle var(--twinkle-duration, 4s) infinite ease-in-out;
  animation-delay: var(--twinkle-delay, 0s);
}

/* Distant urban soft ambient breathing glow representation */
@keyframes city-ambient-glow-pulse {
  0%, 100% {
    opacity: 0.12;
    filter: blur(8px) saturate(0.85);
  }
  50% {
    opacity: 0.32;
    filter: blur(14px) saturate(1.2);
  }
}

.city-ambient-glow {
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 55%;
  background: radial-gradient(circle at 50% 90%, rgba(251, 191, 36, 0.24) 0%, rgba(249, 115, 22, 0.11) 40%, rgba(30, 27, 75, 0.05) 75%, transparent 100%);
  pointer-events: none;
  animation: city-ambient-glow-pulse 8.2s infinite ease-in-out;
  mix-blend-mode: screen;
}

/* Beautiful custom street lamps that breathe very slowly (highly realistic and cozy) */
@keyframes street-lamp-slow-breath {
  0%, 100% {
    opacity: 0.12;
    transform: translateX(-50%) scale(0.92);
    filter: drop-shadow(0 0 1px var(--glow-color, rgba(234, 179, 8, 0.25)));
  }
  50% {
    opacity: 0.78;
    transform: translateX(-50%) scale(1.08);
    filter: drop-shadow(0 0 6px var(--glow-color, rgba(234, 179, 8, 0.95)));
  }
}

.street-lamp {
  position: absolute;
  pointer-events: none;
}

.street-lamp-bulb {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--light-color, #fbbf24);
  border-radius: 50%;
  animation: street-lamp-slow-breath var(--twinkle-duration, 8s) infinite ease-in-out;
  animation-delay: var(--twinkle-delay, 0s);
}

.street-lamp-post {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1.2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.08) 75%, transparent 100%);
  pointer-events: none;
}

/* Shooting Stars - Dynamic and extremely exciting */
@keyframes shooting-star-left-right {
  0% {
    transform: translate(0, 0) rotate(18deg) scale(0);
    opacity: 0;
  }
  1% {
    opacity: 1;
    transform: translate(0, 0) rotate(18deg) scale(1);
  }
  6% {
    transform: translate(160px, 52px) rotate(18deg) scale(0.65);
    opacity: 0;
  }
  100% {
    transform: translate(160px, 52px) rotate(18deg) scale(0);
    opacity: 0;
  }
}

@keyframes shooting-star-right-left {
  0% {
    transform: translate(0, 0) rotate(-18deg) scale(0);
    opacity: 0;
  }
  1.5% {
    opacity: 1;
    transform: translate(0, 0) rotate(-18deg) scale(1);
  }
  8% {
    transform: translate(-180px, 58px) rotate(-18deg) scale(0.65);
    opacity: 0;
  }
  100% {
    transform: translate(-180px, 58px) rotate(-18deg) scale(0);
    opacity: 0;
  }
}

.shooting-star-lr {
  position: absolute;
  width: 3.2px;
  height: 3.2px;
  background: radial-gradient(circle, #ffffff 20%, rgba(254, 243, 199, 0.8) 60%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
  animation: shooting-star-left-right var(--star-duration, 24s) infinite ease-in-out;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.95));
}

.shooting-star-lr::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1px;
  transform: translateY(-50%) rotate(4deg);
  width: 75px;
  height: 1.5px;
  background: linear-gradient(-90deg, rgba(255, 255, 255, 0.95), rgba(254, 243, 199, 0.35) 40%, transparent 100%);
  transform-origin: right center;
}

.shooting-star-rl {
  position: absolute;
  width: 3.2px;
  height: 3.2px;
  background: radial-gradient(circle, #ffffff 20%, rgba(254, 243, 199, 0.8) 60%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
  animation: shooting-star-right-left var(--star-duration, 32s) infinite ease-in-out;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.95));
}

.shooting-star-rl::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 1px;
  transform: translateY(-50%) rotate(-4deg);
  width: 75px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(254, 243, 199, 0.35) 40%, transparent 100%);
  transform-origin: left center;
}

/* Beautiful Celestial Rain-Fall & Splash Animations (Realist gökmüzü yağmur damlaları) */
@keyframes rain-fall {
  0% {
    transform: translateY(-50px) rotate(11deg);
    opacity: 0;
  }
  15% {
    opacity: 0.75;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(520px) rotate(11deg);
    opacity: 0;
  }
}

.rain-drop {
  position: absolute;
  background: linear-gradient(180deg, rgba(210, 235, 255, 0.8) 0%, rgba(210, 235, 255, 0.1) 100%);
  pointer-events: none;
  border-radius: 999px;
  animation: rain-fall var(--rain-duration, 0.7s) linear infinite;
  animation-delay: var(--rain-delay, 0s);
}

@keyframes puddle-splash {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.2;
  }
  100% {
    transform: scale(2.0);
    opacity: 0;
  }
}

.puddle-ripple {
  position: absolute;
  border: 1px solid rgba(210, 235, 255, 0.45);
  border-radius: 50%;
  pointer-events: none;
  animation: puddle-splash var(--splash-duration, 1.4s) ease-out infinite;
  animation-delay: var(--splash-delay, 0s);
}

@keyframes bounceWave {
  0% {
    height: 15%;
  }
  100% {
    height: 100%;
  }
}