/* ========================================
   ABOUT BLOCKS - ANIMASYON VE EFEKT SİSTEMİ
   ======================================== */

/* ==========================================
   0. ARKA PLAN VE İÇERİK KATMAN SİSTEMİ
   ========================================== */

/* Blok container - relative position */
.block-with-background {
    position: relative;
    overflow: hidden;
}

/* Arka plan katmanı - sadece opacity buraya uygulanır */
.block-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none; /* İçerik tıklanabilir olsun */
}

/* İçerik katmanı - opacity etkilenmez */
.block-content {
    position: relative;
    z-index: 2;
}

/* ==========================================
   1. SCROLL ANIMASYONLARI
   ========================================== */

/* Başlangıç durumu - görünmez */
.animate-on-scroll {
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Görünür hale geldiğinde */
.animate-on-scroll.animated {
    opacity: 1;
}

/* Fade In */
.animate-fade-in {
    opacity: 0;
}

.animate-fade-in.animated {
    opacity: 1;
}

/* Slide Left (Sağdan Sola) */
.animate-slide-left {
    transform: translateX(50px);
}

.animate-slide-left.animated {
    transform: translateX(0);
}

/* Slide Right (Soldan Sağa) */
.animate-slide-right {
    transform: translateX(-50px);
}

.animate-slide-right.animated {
    transform: translateX(0);
}

/* Slide Up (Alttan Yukarı) */
.animate-slide-up {
    transform: translateY(50px);
}

.animate-slide-up.animated {
    transform: translateY(0);
}

/* Zoom In */
.animate-zoom-in {
    transform: scale(0.9);
}

.animate-zoom-in.animated {
    transform: scale(1);
}

/* Bounce */
.animate-bounce {
    transform: translateY(30px);
}

.animate-bounce.animated {
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================
   2. HOVER EFEKTLERİ
   ========================================== */

/* Lift (Yukarı Kalkma) */
.hover-effect-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-effect-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Glow (Parlama) */
.hover-effect-glow {
    transition: box-shadow 0.3s ease;
}

.hover-effect-glow:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5), 0 0 40px rgba(59, 130, 246, 0.3);
}

/* Scale (Büyüme) */
.hover-effect-scale {
    transition: transform 0.3s ease;
}

.hover-effect-scale:hover {
    transform: scale(1.05);
}

/* Tilt (Eğilme) */
.hover-effect-tilt {
    transition: transform 0.3s ease;
}

.hover-effect-tilt:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(2deg);
}

/* ==========================================
   3. ARKA PLAN DESENLERİ
   ========================================== */

/* Dots Pattern */
.bg-pattern-dots {
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Lines Pattern */
.bg-pattern-lines {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.05) 10px,
        rgba(0, 0, 0, 0.05) 20px
    );
}

/* Grid Pattern */
.bg-pattern-grid {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* Waves Pattern */
.bg-pattern-waves {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='rgba(0,0,0,0.05)' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* ==========================================
   4. PARALLAX EFEKTİ
   ========================================== */

.parallax-container {
    position: relative;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: calc(100% + 100px);
    background-size: cover;
    background-position: center;
    will-change: transform;
}

/* ==========================================
   5. GRADIENT METİN EFEKTİ
   ========================================== */

.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================
   6. HIGHLIGHT EFEKTİ
   ========================================== */

.text-highlight {
    position: relative;
    display: inline;
}

.text-highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    opacity: 0.3;
    z-index: -1;
}

/* ==========================================
   7. TYPING EFEKTİ
   ========================================== */

.typing-effect {
    overflow: hidden;
    border-right: 2px solid #333;
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #333 }
}

/* ==========================================
   8. CARD HOVER EFEKTLERİ
   ========================================== */

.card-hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   9. BUTTON EFEKTLERİ
   ========================================== */

.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-ripple:hover::after {
    width: 300px;
    height: 300px;
}

/* ==========================================
   10. UTILITY CLASSES
   ========================================== */

.section-padding {
    padding: 4rem 0;
}

@media (min-width: 768px) {
    .section-padding {
        padding: 6rem 0;
    }
}

@media (min-width: 1024px) {
    .section-padding {
        padding: 8rem 0;
    }
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Responsive images */
.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
}