/**
 * POLLOCK AJANS - ANA STİL DOSYASI
 * Tailwind CSS ile birlikte kullanılıyor, ekstra özel stiller
 */

/* ========================================
   GENEL ANIMASYONLAR
======================================== */

/* Fade-up animasyonu için */
.gör-anim {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.gör-anim.görünür {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll sonrası navbar gölgesi */
#navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ========================================
   SMOOTH SCROLL
======================================== */

html {
    scroll-behavior: smooth;
}

/* ========================================
   YARDIMCI SINIFLAR
======================================== */

/* Degrade arka plan bantları */
.degrade-bant {
    background: linear-gradient(90deg, #B197FC 0%, #F3D1F4 100%);
}

/* Metin degrade */
.metin-degrade {
    background: linear-gradient(90deg, #B197FC 0%, #F3D1F4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gölge stilleri */
.golge-yumusak {
    box-shadow: 0 10px 30px rgba(23, 43, 77, 0.08);
}

.golge-hover:hover {
    box-shadow: 0 20px 40px rgba(23, 43, 77, 0.15);
}

/* ========================================
   BUTON STİLLERİ
======================================== */

.btn-ana {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #4C6FFF;
    color: white;
    font-weight: 600;
    border-radius: 9999px;
    transition: all 0.2s ease-out;
}

.btn-ana:hover {
    background-color: #3d5ce0;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(76, 111, 255, 0.3);
}

.btn-ikincil {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    background-color: transparent;
    color: #1F2C45;
    font-weight: 600;
    border: 2px solid #E5E7EB;
    border-radius: 9999px;
    transition: all 0.2s ease-out;
}

.btn-ikincil:hover {
    border-color: #4C6FFF;
    color: #4C6FFF;
    background-color: rgba(76, 111, 255, 0.05);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #1F2C45;
    font-weight: 600;
    transition: all 0.2s ease-out;
}

.btn-ghost:hover {
    color: #4C6FFF;
    gap: 1rem;
}

/* ========================================
   KART STİLLERİ
======================================== */

.kart-temel {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(23, 43, 77, 0.08);
    transition: all 0.3s ease-out;
}

.kart-temel:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(23, 43, 77, 0.15);
}

/* ========================================
   FORM ELEMENTLERİ
======================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
    transition: all 0.2s ease-out;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    ring: 2px;
    ring-color: #4C6FFF;
}

/* Placeholder rengi */
::placeholder {
    color: #9CA3AF;
}

/* ========================================
   RESPONSIVE HELPERS
======================================== */

/* Mobil menü açık olduğunda body scroll kilidi */
body.menu-acik {
    overflow: hidden;
}

/* ========================================
   LOADING STATES
======================================== */

@keyframes pulse-custom {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.yukleniyor {
    animation: pulse-custom 1.5s ease-in-out infinite;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
======================================== */

/* GPU hızlandırma için */
.hizlandir {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Lazy loading için blur efekti */
img[loading="lazy"] {
    transition: filter 0.3s ease-out;
}

img[loading="lazy"]:not([src]) {
    filter: blur(10px);
}

/* ========================================
   PRINT STILI
======================================== */

@media print {
    .print-gizle {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
}

/* ========================================
   ACCESSIBILITY
======================================== */

/* Focus görünürlüğü artır */
*:focus-visible {
    outline: 2px solid #4C6FFF;
    outline-offset: 2px;
}

/* Skip to content linki */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #4C6FFF;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* ========================================
   CUSTOM SCROLLBAR (Webkit)
======================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #F3F4F6;
}

::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

/* ========================================
   SELECTION COLOR
======================================== */

::selection {
    background-color: #B197FC;
    color: white;
}

::-moz-selection {
    background-color: #B197FC;
    color: white;
}

/* ========================================
   SCROLL TO TOP BUTTON
======================================== */

#scroll-to-top {
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

#scroll-to-top.show {
    opacity: 1 !important;
    visibility: visible !important;
}

#scroll-to-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(76, 111, 255, 0.4);
}

#scroll-to-top:active {
    transform: translateY(0);
}