/* ==========================================
   FIT TRACKER - GLOBAL CSS
========================================== */
[x-cloak] { display: none !important; }

.pt-safe { padding-top: max(0.75rem, env(safe-area-inset-top)); }
.pb-safe { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100vh; margin: 0; padding: 0; }

html.dark, html.dark body { background-color: #0f172a !important; color: #f8fafc !important; }
html:not(.dark), html:not(.dark) body { background-color: #f8fafc !important; color: #0f172a !important; }

/* ==========================================
   AJAX MODAL (POPUP) SİSTEMİ
========================================== */
.custom-modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
    background-color: rgba(15, 23, 42, 0.65); backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); animation: fadeIn 0.25s ease-out forwards;
}
.custom-modal .modal-content {
    position: relative; width: 100%; max-width: 32rem; background-color: #ffffff;
    border-radius: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex; flex-direction: column; max-height: 90vh; border: 1px solid #e2e8f0;
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.dark .custom-modal .modal-content { background-color: #1e293b; border-color: #334155; }
.custom-modal .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid #f1f5f9; }
.dark .custom-modal .modal-header { border-bottom-color: #334155; }
.custom-modal .modal-header h2 { margin: 0; font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
.custom-modal .close-modal { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; background-color: #f1f5f9; cursor: pointer; border: none; }
.custom-modal .modal-body { padding: 1.5rem; overflow-y: auto; overscroll-behavior: contain; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalSlideUp { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ==========================================
   SU DALGASI VE BARDAK SİSTEMİ (NİHAİ)
========================================== */
.water-wave {
    position: absolute; top: -15px; left: 0; width: 200%; height: 30px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5,73.84-4.36,147.54,16.88,218.2,35.26,69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113,14.29,1200,52.47V0Z" fill="%2322d3ee" opacity=".6"></path></svg>');
    background-size: 50% 100%; animation: waveMove 4s linear infinite;
}

@keyframes waveMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

#water-liquid {
    box-shadow: inset 0 10px 20px rgba(255,255,255,0.3);
    border-top: 1px solid rgba(255,255,255,0.5);
    position: relative;
    transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(180deg, #22d3ee 0%, #06b6d4 100%);
}