/* Srowes OS Core v3.0 — Production Styles */
/* Tailwind CDN ile beraber kullanılır. Bu dosya override ve custom stiller içerir. */

/* ================================================
   GLOBAL TYPOGRAPHY
   ================================================ */
body, .sos-spa-app, .sos-finance-app {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ================================================
   SPA CONTAINER TRANSITION
   ================================================ */
#sos-spa-container {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================
   SCROLLBAR STYLES (Global)
   ================================================ */
.sos-spa-app ::-webkit-scrollbar,
.sos-module-container::-webkit-scrollbar { width: 4px; height: 4px; }
.sos-spa-app ::-webkit-scrollbar-track,
.sos-module-container::-webkit-scrollbar-track { background: transparent; }
.sos-spa-app ::-webkit-scrollbar-thumb,
.sos-module-container::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
.sos-spa-app ::-webkit-scrollbar-thumb:hover,
.sos-module-container::-webkit-scrollbar-thumb:hover { background: #334155; }

/* ================================================
   CONTRAST FIXES (WCAG AA Compliance)
   Slate-950 arka plan üzerinde minimum kontrastlar.
   ================================================ */

/* Okunmayan gri yazıları yükselt */
.sos-spa-app .text-slate-600,
.sos-finance-app .text-slate-600 { color: #94a3b8 !important; } /* slate-400 */

.sos-spa-app .text-slate-500 { color: #94a3b8; } /* Bazı yerlerde slate-400'e çek */

/* Placeholder yazılar */
.sos-spa-app input::placeholder,
.sos-spa-app textarea::placeholder {
    color: #64748b; /* slate-500 — okunabilir placeholder */
}

/* Chart eksen yazıları */
.sos-spa-app canvas { color: #cbd5e1; }

/* ================================================
   ANIMATION UTILITIES
   ================================================ */
@keyframes sos-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sos-fade-in { animation: sos-fade-in 0.3s ease-out forwards; }

@keyframes sos-pulse-green {
    0%, 100% { box-shadow: 0 0 8px rgba(16,185,129,0.6); }
    50%      { box-shadow: 0 0 16px rgba(16,185,129,1); }
}

/* ================================================
   DOCK TOOLTIP (opsiyonel hover label)
   ================================================ */
.sos-dock-link { position: relative; }
.sos-dock-link::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: #0f172a;
    border: 1px solid #334155;
    color: #e2e8f0;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.sos-dock-link:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-8px);
}

/* PWA-like content area */
.sos-content-area {
    transition: opacity 0.4s ease-in-out;
}