/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; line-height: 1.6; overflow-x: hidden; }

/* Preloader */
.preloader { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; 
    background: #fff; z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.loader-circle { width: 50px; height: 50px; border: 3px solid #f3f3f3; border-top: 3px solid #ff6b35; border-radius: 50%; animation: spin 1s linear infinite; }

/* Navbar (İBİRE BİR!) */
.navbar-tantum { 
    background: rgba(255,255,255,.95); backdrop-filter: blur(20px); transition: all .3s ease; padding: 1rem 0;
}
.navbar-brand { font-size: 2rem; font-weight: 700; color: #ff6b35 !important; text-decoration: none; }
.navbar-sticky { box-shadow: 0 10px 30px rgba(0,0,0,.1); }

/* Hero Section (Tam Kopya!) */
.hero-section { 
    min-height: 100vh; position: relative; display: flex; align-items: center; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml,...') }
.hero-title { 
    font-size: 4.5rem; font-weight: 700; line-height: 1.1; color: white; margin-bottom: 1.5rem;
}
.gradient-text { background: linear-gradient(45deg, #ff6b35, #f7931e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-subtitle { font-size: 1.3rem; color: rgba(255,255,255,.9); margin-bottom: 2rem; }
.btn-main { 
    background: linear-gradient(45deg, #ff6b35, #f7931e); color: white; padding: 15px 35px; 
    border-radius: 50px; font-weight: 600; text-decoration: none; display: inline-block; 
    transition: all .3s ease; box-shadow: 0 10px 30px rgba(255,107,53,.3);
}
.btn-main:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(255,107,53,.4); }

/* Service Cards */
.service-card { 
    background: white; padding: 2.5rem; border-radius: 20px; text-align: center; 
    box-shadow: 0 20px 40px rgba(0,0,0,.08); transition: all .3s ease; height: 100%;
}
.service-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,.15); }
.service-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #ff6b35, #f7931e); 
                border-radius: 50%; display: flex; align-items: center; justify-content: center; 
                margin: 0 auto 1.5rem; font-size: 1.8rem; color: white; }

/* Portfolio Masonry */
.portfolio-grid { transition: all .3s ease; }
.portfolio-card { 
    position: relative; overflow: hidden; border-radius: 15px; margin-bottom: 2rem; height: 300px;
}
.portfolio-overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: linear-gradient(135deg, rgba(255,107,53,.95), rgba(247,147,30,.95));
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; transition: all .3s ease; color: white; text-align: center; padding: 2rem;
}
.portfolio-card:hover .portfolio-overlay { opacity: 1; transform: translateY(0); }

/* Animations */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.animate { opacity: 0; transform: translateY(50px); transition: all .8s ease; }
.animate.visible { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 768px) {
    .hero-title { font-size: 2.8rem; }
    .navbar-collapse { position: fixed; top: 80px; left: 0; width: 100%; height: calc(100vh - 80px); 
                      background: white; padding: 2rem; transform: translateX(-100%); transition: .3s; }
}