/* AYZWEB PREMIUM STYLE ARCHITECTURE - 2026
    Tüm HTML blokları için optimize edilmiş merkezi CSS dosyası.
*/

/* --- 0. GLOBAL AYARLAR --- */
body {
    margin: 0; padding: 0;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    background: #fff; color: #0f172a;
    overflow-x: hidden;
}

:root {
    --ayz-blue: #3b82f6;
    --ayz-dark: #0f172a;
    --ayz-text: #64748b;
}

/* --- 1. HERO SLIDER --- */
.ayz-slider-box { position: relative; width: 100%; height: 100vh; min-height: 600px; overflow: hidden; background: #000; }
.ayz-track { display: flex; width: 300%; height: 100%; animation: ayzSlide 15s cubic-bezier(0.8, 0, 0.2, 1) infinite; will-change: transform; }
.ayz-slide { width: 33.333%; height: 100%; position: relative; flex-shrink: 0; }
.ayz-slide img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ayz-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 100%); z-index: 2; }
.ayz-content { position: relative; z-index: 3; padding: 0 10%; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.ayz-content h1 { font-size: clamp(32px, 8vw, 60px); font-weight: 800; color: #fff; margin-bottom: 20px; text-transform: uppercase; line-height: 1.1; }
.ayz-content p { font-size: 20px; color: #ccc; max-width: 600px; margin-bottom: 30px; }
.ayz-btn { padding: 15px 40px; background: var(--ayz-blue); color: #fff; text-decoration: none; font-weight: 700; display: inline-block; width: fit-content; transition: 0.3s; }
@keyframes ayzSlide { 0%, 30% { transform: translateX(0); } 33.33%, 63.33% { transform: translateX(-33.333%); } 66.66%, 96.66% { transform: translateX(-66.666%); } 100% { transform: translateX(0); } }

/* --- 2. HIZMETLER (Services Grid White) --- */
.services-grid-white { position:relative; background:#ffffff; padding:80px 0; overflow:hidden; }
.bg-lines { position:absolute; inset:0; background: repeating-linear-gradient(90deg, rgba(59, 130, 246,.03) 0, rgba(59, 130, 246,.03) 1px, transparent 1px, transparent 90px); animation:bgmove 25s linear infinite; }
@keyframes bgmove { from{background-position:0 0} to{background-position:700px 0} }
.services-grid-white .wrap { max-width:1200px; margin:auto; padding:0 6%; position:relative; z-index:2; }
.services-grid-white .head { max-width:560px; margin-bottom:70px; }
.services-grid-white .head span { color: var(--ayz-blue); font-weight:700; text-transform: uppercase; }
.services-grid-white .head h2 { font-size:clamp(30px,5vw,46px); font-weight:800; margin:12px 0; line-height:1.15; }
.services-grid-white .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.services-grid-white .card { background:#ffffff; border-radius:22px; padding:36px 30px; border:1px solid #f1f5f9; transition:.45s cubic-bezier(.4,0,.2,1); }
.services-grid-white .card:hover { transform:translateY(-10px); box-shadow:0 30px 80px rgba(59, 130, 246,.12); border-color: var(--ayz-blue); }
.services-grid-white .icon { font-size:34px; margin-bottom:20px; }
.services-grid-white button { padding:12px 26px; border:none; border-radius:999px; background: var(--ayz-blue); color:#fff; font-weight:700; cursor:pointer; }

/* --- 3. HAKKIMIZDA (About Hero) --- */
.about-hero { position:relative; min-height:100vh; background-image:url('https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg'); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; color:#ffffff; text-align:center; }
.about-hero .overlay { position:absolute; inset:0; background:rgba(15,23,42,.72); }
.about-center { position:relative; z-index:2; max-width:900px; padding:0 8%; }
.about-center h1 { font-size:clamp(36px,6vw,64px); font-weight:800; margin:18px 0 30px; line-height:1.1; }
.about-stats { display:flex; justify-content:center; gap:60px; margin-top:50px; flex-wrap:wrap; }
.about-stats strong { font-size:34px; font-weight:800; display:block; color: #fff; }
.about-stats span { font-size:14px; color:#cbd5f5; }

/* --- 4. REFERANSLAR (References Section) --- */
.references-section { background: #ffffff; padding: 60px 0; overflow: hidden; border-top: 1px solid #f1f5f9; }
.ref-header { text-align: center; margin-bottom: 30px; }
.ref-title { font-size: 24px; font-weight: 800; margin-bottom: 8px; color: #1e293b; }
.ref-title span { color: var(--ayz-blue); }
.logo-slider { position: relative; width: 100%; mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); }
.logo-track { display: flex; width: calc(250px * 12); animation: scrollLogos 25s linear infinite; }
.logo-track .slide { width: 250px; height: 100px; display: flex; align-items: center; justify-content: center; }
.logo-track img { width: 110px; filter: grayscale(100%); opacity: 0.4; transition: 0.4s; }
.logo-track img:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.1); }
@keyframes scrollLogos { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 6)); } }

/* --- 5. DEMO CALISMALAR (Demo Section) --- */
.ayz-demo-section { background: #ffffff; padding: 80px 0; position: relative; }
.ayz-container { max-width: 1240px; margin: 0 auto; padding: 0 15px; }
.demo-header { text-align: center; margin-bottom: 40px; }
.demo-badge { background: #eff6ff; color: var(--ayz-blue); padding: 5px 15px; border-radius: 50px; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.demo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.demo-card { background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid #f1f5f9; transition: 0.3s ease; }
.demo-img { position: relative; height: 180px; overflow: hidden; }
.demo-img img { width: 100%; height: 100%; object-fit: cover; }
.demo-overlay { position: absolute; inset: 0; background: rgba(59, 130, 246, 0.9); display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.3s; }
.demo-card:hover .demo-overlay { opacity: 1; }
.view-btn { background: #fff; color: var(--ayz-blue); padding: 10px 20px; border-radius: 50px; font-weight: 800; text-decoration: none; }

/* --- 6. ILETISIM (Premium Contact) --- */
.ayz-premium-contact { background: #f8fbff; padding: 100px 0; position: relative; overflow: hidden; }
.ayz-sphere-decor { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.6; }
.s-1 { width: 500px; height: 500px; background: #d0e1ff; top: -10%; left: -10%; }
.s-2 { width: 400px; height: 400px; background: #e8dff5; bottom: -5%; right: -5%; }
.ayz-box-main { background: var(--ayz-dark); display: grid; grid-template-columns: 1fr 1.3fr; border-radius: 40px; overflow: hidden; box-shadow: 0 50px 100px rgba(0,0,0,0.2); position: relative; z-index: 5;}
.ayz-side-info { padding: 60px; color: #fff; }
.ayz-main-title { font-size: 40px; font-weight: 800; margin-bottom: 40px; }
.ayz-mini-card { display: flex; align-items: center; gap: 20px; background: rgba(255,255,255,0.05); padding: 20px; border-radius: 20px; margin-bottom: 15px;}
.ayz-m-icon { width: 40px; height: 40px; background: var(--ayz-blue); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ayz-side-form { padding: 60px; background: #151d2f; }
.ayz-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ayz-input-box { margin-bottom: 20px; }
.ayz-input-box label { display: block; color: #94a3b8; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; font-size: 12px; }
.ayz-input-box input, .ayz-input-box textarea { width: 100%; background: #1e293b; border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 12px; color: #fff; outline: none; box-sizing: border-box;}
.ayz-final-btn { width: 100%; padding: 18px; border: none; border-radius: 14px; background: linear-gradient(90deg, #3b82f6, #2563eb); color: #fff; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }

/* --- 7. BLOG (Blog Modern) --- */
.ayz-blog-section { background: #ffffff; padding: 80px 0; }
.blog-header { text-align: center; margin-bottom: 50px; }
.blog-badge { display: inline-block; padding: 4px 12px; background: #eff6ff; color: var(--ayz-blue); border-radius: 50px; font-size: 12px; font-weight: 800; margin-bottom: 15px; }
.blog-grid-modern { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; }
.blog-mini-card { background: #fff; border-radius: 15px; overflow: hidden; border: 1px solid #f1f5f9; transition: 0.3s; }
.blog-img-box { position: relative; height: 140px; }
.blog-img-box img { width: 100%; height: 100%; object-fit: cover; }
.mini-tag { position: absolute; top: 10px; left: 10px; background: #fff; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 800; color: var(--ayz-blue); }
.blog-mini-info { padding: 15px; text-align: center; }
.all-posts-btn { display: inline-block; padding: 10px 30px; border: 2px solid var(--ayz-blue); color: var(--ayz-blue); border-radius: 50px; text-decoration: none; font-weight: 800; margin-top: 40px; transition: 0.3s; }
.all-posts-btn:hover { background: var(--ayz-blue); color: #fff; }

/* --- 8. SOSYAL MEDYA (Social Card) --- */
.ayz-social-card-section { padding: 60px 0; background: #ffffff; }
.social-glass-card { background: #f8fafc; border-radius: 30px; padding: 50px; border: 1px solid #f1f5f9; text-align: center; }
.social-icon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.social-box { text-decoration: none; background: #fff; padding: 25px 15px; border-radius: 20px; border: 1px solid #e2e8f0; transition: 0.4s; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.social-box i { font-size: 30px; color: #334155; transition: 0.3s; }
.social-box:hover { transform: translateY(-10px); color: #fff; border-color: transparent; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.social-box:hover i, .social-box:hover span { color: #fff; }
.wa:hover { background: #25d366; }
.ig:hover { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.fb:hover { background: #1877f2; }
.pt:hover { background: #bd081c; }
.tw:hover { background: #000; }

/* --- RESPONSIVE AYARLARI --- */
@media(max-width:1024px){
    .services-grid-white .grid { grid-template-columns:repeat(2,1fr); }
    .demo-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-grid-modern { grid-template-columns: repeat(3, 1fr); }
    .social-icon-grid { grid-template-columns: repeat(3, 1fr); }
}
@media(max-width:768px){
    .ayz-box-main { grid-template-columns: 1fr; border-radius: 0; }
    .ayz-info-row { flex-direction: row; gap: 10px; }
    .ayz-mini-card { flex-direction: column; flex: 1; padding: 15px 5px; }
    .blog-grid-modern { grid-template-columns: repeat(2, 1fr); }
    .ayz-side-info, .ayz-side-form { padding: 40px 20px; }
    .ayz-grid-2 { grid-template-columns: 1fr; }
    .ayz-main-title { font-size: 30px; text-align: center; }
}