/* ===================================
   Hero Section
   =================================== */

.hero {
    position: relative;
    min-height: 100vh;
    padding-top: 120px;
    padding-bottom: var(--spacing-3xl);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.3;
    animation: float 20s ease-in-out infinite;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #FF0000 0%, transparent 70%);
    top: -200px;
    right: -200px;
    animation-delay: 0s;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #00FFE5 0%, transparent 70%);
    bottom: -150px;
    left: -150px;
    animation-delay: -10s;
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
}

.hero-content {
    position: relative;
    /* z-index: 1; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
}

.hero-text {
    max-width: 600px;
    position: relative;
    z-index: 2;
    padding-top: 13rem; /* <-- BU SATIRI EKLE (Değeri gerekirse ayarlarız) */
}

.hero-title {
    position: absolute;   /* 1. BAĞIMSIZ YAPTIK */
    top: 20px;            /* 2. YUKARIDAN KONUMLANDIRDIK (ayarlanabilir) */
    left: 0;
    z-index: 1;           /* 3. EN ALT KATMANA ALDIK (metinlerin arkasına) */

    font-size: 11rem;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-md);
    background: linear-gradient(180deg, #FFFFFF 0%, #666666 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    white-space: nowrap;
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-description {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
}

.hero-actions {
    display: flex;
    align-items: center; /* <-- BUTONLARI DİKEYDE HİZALAMAK İÇİN BUNU EKLEDİK */
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* Hero Visual */
.hero-visual {
    position: relative;
    height: 600px;
    max-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2; /* Başlığın (z-index 1) ÖNÜNE aldık */
}

.hero-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image {
    width: 100%;
    max-width: 500px;
    max-height: 600px;
    height: auto;
    position: relative;
    z-index: 1;
    object-fit: contain;
}

.image-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.2) 0%, transparent 70%);
    filter: blur(60px);
    z-index: -1;
}

/* Floating Cards */
.floating-card {
    position: absolute;
    background: rgba(10, 10, 10, 0.9);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: var(--spacing-md);
    backdrop-filter: blur(10px);
    z-index: 10;
}

/* GÜNCELLENMİŞ FLOATING CARD KONUMLARI */
.stats-card {
    position: relative; /* 'absolute' pozisyonunu geçersiz kılıyoruz */
    top: 0;
    left: 0;
    width: 100%; /* Bulunduğu sütunu doldurur */
    max-width: 360px; /* template.png'deki gibi bir genişlik verelim */
    margin-top: var(--spacing-xl); /* Üstündeki butonlarla arasına boşluk koyalım */
    box-shadow: var(--shadow-glow);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.card-header span {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-dots {
    display: flex;
    gap: 4px;
}

.card-dots span {
    width: 4px;
    height: 4px;
    background: var(--color-text-muted);
    border-radius: 50%;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.info-card {
    padding: var(--spacing-md);
}

.info-card.analyse-card-right {
    bottom: 3%;
    right: 3%;
    width: 225px;
}

.info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-tag {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-primary);
    background: rgba(255, 0, 0, 0.1);
    padding: 4px 12px;
    border-radius: 12px;
}

.info-icons {
    display: flex;
    gap: 4px;
}

.icon-dot {
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

/* Yeni Eklenen: Akıllı Analiz Kartı Input Stili */
.analyse-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}
.analyse-input::placeholder {
    color: var(--color-text-muted);
}

.btn-analyse {
    width: 100%;
    margin-top: var(--spacing-sm);
    padding: 8px;
}

/* Logo Marquee & Logo Listesi */
.logo-marquee {
    margin-top: var(--spacing-3xl);
    overflow: hidden; /* Taşmayı gizle */
    position: relative;
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    width: 100%;
    /* Beyaz bir solma efekti ekleyerek kenarları yumuşatır */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-3xl); 
    animation: scroll 40s linear infinite; /* Bu satır animasyonu başlatır */
    will-change: transform;
}

.marquee-content .logo-item {
    flex-shrink: 0; /* Bu satır sıkışmayı engeller */
}

.logo-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.logo-icon-circle {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.logo-icon-circle.blue {
    color: var(--color-secondary);
}

.logo-item span {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* ===================================
   Section Styles
   =================================== */

section {
    padding: var(--spacing-3xl) 0;
    overflow: hidden;
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-3xl);
}

.section-title {
    font-size: var(--font-size-5xl);
    font-weight: 200;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-lg);
    text-transform: uppercase;
}

.section-description {
    font-size: var(--font-size-lg);
    line-height: 1.7;
    color: var(--color-text-secondary);
    font-weight: 300; /* BU SATIRI EKLEDİK */
}

/* ===================================
   Digital Redesign Section
   =================================== */

.digital-redesign {
    background: linear-gradient(180deg, transparent 0%, rgba(255, 0, 0, 0.02) 50%, transparent 100%);
}

.redesign-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: var(--spacing-xl);
    align-items: stretch; /* 'start' olan değeri 'stretch' yaptık */
}

/* Masaüstünde (varsayılan olarak) yeni 4. öğeyi gizle */
.redesign-visual-mobile {
    display: none;
}

.redesign-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: var(--spacing-xl);
    transition: var(--transition-base);
}

.redesign-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow);
}

.card-strategy {
    text-align: center;
}

.card-strategy .card-icon {
    width: 60px; /* SVG'nin kendi genişliği */
    margin-left: auto;
    margin-right: auto;
}

.card-icon {
    margin-bottom: var(--spacing-md);
}

.redesign-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 300;
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.redesign-card p {
    font-size: var(--font-size-sm);  /* 'xs' çok küçük olabilir, 'sm' (0.875rem) ile başlayalım */
    font-weight: 300;               /* 100 genelde çok incedir, 300 daha okunaklı olacaktır */
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}

/* Mockup Visual */
.redesign-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Merkezi görünüm için */
    gap: var(--spacing-lg);
    overflow: hidden;
}

/* Network Visual */
.interaction-visual {
    position: relative;
    height: 500px;
    max-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Network Visual */
.interaction-visual {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-planning {
    display: grid;
    /* ASCII şemanız gibi 2 sütunlu ızgara. 40% / 60% oranı */
    grid-template-columns: 20% 80%; 
    gap: var(--spacing-sm) var(--spacing-lg); /* Dikey(sm) ve Yatay(lg) boşluklar */
    background: none;
    border: none;
    padding: 0;
    /* Tüm hücreleri dikeyde ortalar, bu da hizalamayı düzeltir */
    align-items: center; 
}

/* İkon Buton Stili (Değişiklik yok) */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: var(--transition-base);
    border-radius: 50%;
    /* İkonların kendi ızgara hücresinde sola hizalanmasını sağlar */
    justify-self: start; 
}

.icon-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Metrik Etiket Stili (Hız, Maliyet) */
/* HTML'de oluşturduğumuz .strategy-metric-item GRUBUNU stilize eder */
.strategy-metric-item {
    display: flex;
    flex-direction: column; /* Label ve value'yu alt alta dizer */
    gap: 0.25rem; /* Aralarındaki boşluğu minimize eder (0.25rem) */
    align-items: flex-start; /* Sola hizalar */
}

/* Metrik Etiket Stili (Hız, Maliyet) */
.metric-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 300;
    /* align-self: end; Bu satırı sildik */
}

/* Metrik Değer Stili (%50+, Gelir) */
.metric-value {
    font-size: var(--font-size-lg);
    font-weight: 300;
    color: var(--color-text-primary);
    text-align: left;
    /* align-self: start; Bu satırı sildik */
}

.strategy-arrow {
    padding-top: var(--spacing-xs);
}

/* Etiketler (Digital, Chatbot...) */
.planning-stats {
    grid-column: 1 / -1; 

    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-lg); /* Üstteki ızgaradan ayırır */
}

/* GÜNCELLENMİŞ: Stat chip'lerin arka planı ve rengi template.png'ye uygun hale getirildi */
.stat-chip {
    padding: 8px 16px;
    background: transparent; /* Arka plan rengini kırmızı yap */
    border: 1px solid var(--color-text-primary);
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 300;
    color: var(--color-text-primary); /* Rengi beyaza çevir */
}

/* ===================================
   AI Advertising Section
   =================================== */

   .ai-advertising {
    background: var(--color-bg-dark);
    position: relative;
    overflow: hidden;
}

.ai-content {
    display: grid;
    grid-template-columns: 30% 65%;
    gap: 0 5%;
    align-items: stretch; /* SÜTUN YÜKSEKLİKLERİNİ EŞİTLER */
    margin-bottom: var(--spacing-3xl);
}

.ai-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-energy-image {
    max-width: 100%;
    width: auto;
    height: 100%; /* Yüksekliği eşitlemek için eklendi */
    position: relative;
    z-index: 1;
    object-fit: cover; /* 'contain' yerine 'cover' daha dolgun durabilir */
}

/* ASCII ŞEMANIZA UYGUN YENİ 3x2 GRID */
.ai-main-content-grid {
    display: grid;
    /* Sütun genişlikleriniz: 70% ve 30% */
    grid-template-columns: 70% 30%; 
    grid-auto-rows: auto;
    gap: var(--spacing-lg) var(--spacing-md); 
    margin-top: var(--spacing-xl);
}

/* YENİ: Anahtar Kelime Listesi (template.png'ye uygun) */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0; 
}

.feature-item {
    /* display: flex, align-items: center, ve gap kurallarını sildik */
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    font-weight: 300; 
}

/* YENİ KURALLARIN SONU */

/* Grid hücrelerini (HTML'deki sıraya göre) stilize edelim */
.ai-main-content-grid .btn-primary {
    align-self: start; 
    justify-self: start;
}

/* Satır 3, Sütun 2: Görsel 2 */
.ai-main-content-grid .ai-card-visual {
    align-self: end; 
    justify-self: end; 
    width: 100%; 
    height: auto; 
}

.ai-main-content-grid .ai-card-image {
    width: 100%; 
    height: auto;
    max-width: 100%; 
    max-height: 100%; 
    border-radius: 16px; /* Görsele kenar yuvarlaklığı eklendi */
}

/* Campaign Card (Kartın kendisi) */
.campaign-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: var(--spacing-md);
    max-width: 400px;
    flex: 1;
}

/* Kartın Başlığı */
.campaign-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.campaign-header h4 {
    font-size: var(--font-size-xs);
    font-weight: 400; /* FONTU İNCELTTİK (700'den 400'e) */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Kartın İçeriği */
.campaign-body {
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.campaign-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.campaign-text {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    font-weight: 300; /* FONTU İNCELTTİK */
}

/* ===================================
   Interaction Future Section
   =================================== */

.interaction-future {
    background: linear-gradient(180deg, rgba(0, 255, 229, 0.02) 0%, transparent 100%);
}

.interaction-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
}

.interaction-text {
    max-width: 600px;
}

/* Mango Card */
.mango-card {
    margin: var(--spacing-xl) 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: var(--spacing-md);
    max-width: 400px;
}

.mango-header h4 {
    font-size: var(--font-size-base);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.mango-body p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.mango-footer {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    border-radius: 50%;
}

.user-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.time {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ===================================
   Testimonials
   =================================== */

.testimonials {
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.02) 0%, transparent 100%);
}

.testimonial-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* İki eşit sütun */
    gap: var(--spacing-xl);          /* Sütunlar arası boşluk */
    align-items: center;            /* İçeriği dikeyde ortala */
    margin-bottom: var(--spacing-3xl); /* Kartlarla arasına boşluk koyar */
}

.testimonial-header-grid .section-title {
    margin-bottom: 0;
}

/* YENİ KAYDIRAÇ (SLIDER) KURALLARI */
.testimonial-slider-wrapper {
    position: relative; /* Navigasyon butonlarını konumlandırmak için */
    overflow: hidden;   /* Dışarı taşan kartları gizler */
    width: 100%;
    margin-bottom: var(--spacing-xl); /* Navigasyon butonları için yer açar */
}

.testimonial-track {
    display: flex; /* Kartları yan yana dizer */
    transition: transform 0.5s ease; /* Kayma animasyonu */
}

.testimonial-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: var(--spacing-xl);
    position: relative;
    flex-basis: 48%; /* Kartın genişliği (%50'den biraz az) */
    flex-shrink: 0;  /* Kartların küçülmesini engeller */
    margin-right: 2%; /* Kartlar arasına %2 boşluk (eski 'gap' yerine) */
}

.testimonial-icon {
    margin-bottom: var(--spacing-md);
}

.testimonial-text {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
}

.author-info h4 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: 4px;
}

.author-info p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.testimonial-rating {
    display: flex;
    gap: 4px;
    margin-bottom: var(--spacing-md);
}

.star {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

.testimonial-badge {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    font-size: var(--font-size-lg);
}

/* YENİ SLIDER NAVİGASYON BUTONLARI */
.slider-nav {
    display: flex;
    justify-content: center; /* Butonları ortalar */
    gap: var(--spacing-md);
    /* 'wrapper'a eklediğimiz margin-bottom sayesinde buraya margin-top gerekmez */
}

.slider-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: 50%; /* Dairesel yapar */
    cursor: pointer;
    transition: var(--transition-base);
}

.slider-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* ===================================
   Responsive Design
   =================================== */

/* ===================================
   Responsive 1199px - SADECE HERO BÖLÜMÜ
   =================================== */

@media (max-width: 1199px) {

    /* Ana Hero yerleşimini 2 sütundan 1 sütuna düşürür */
    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    /* Görseli metnin üstüne taşır */
    .hero-visual {
        order: -1; /* Grid sırasında -1. sıraya (en üste) taşır */
        
        /* Yeni yatay 16:9 görseli uygular */
        background-image: url('../images/hero-16x9.png'); 
        background-size: cover;
        background-position: center;
        aspect-ratio: 16 / 9; 
        
        /* Eski dikey kısıtlamaları sıfırlar */
        height: auto; 
        max-height: none; 
        border-radius: 16px;
    }
    
    /* Eski dikey (kare) <img> etiketini gizler */
    .hero-visual .hero-image-container {
        display: none; 
    }

    /* "YAPAY ZEKA" başlığını temiz bir mobil deneyim için gizler */
    .hero-title {
        display: none;
    }

    /* Metin bloğunu ("YARININ DENEYİMİ...") ortalar */
    .hero-text {
        padding-top: 0;
        text-align: center; 
        margin-left: auto;
        margin-right: auto;
    }

    /* Butonları ("Hizmetler" vb.) ortalar */
    .hero-actions {
        justify-content: center;
    }
    
    /* Yüzen "Akıllı Analiz" kartını gizler */
    .stats-card {
        display: none;
    }
    
    /* YENİ EKLENEN KURAL: Başarı kartını düzeltir */
    .info-card.analyse-card-right {
        display: none;
    }

    .marquee-content {
        animation-duration: 20s;
    }

    /* 1199px altı: Dijital Tasarım (Yeni 2x2 Düzen) */
    .redesign-grid {
        grid-template-columns: 6fr 4fr; /* 60/40 oran */
        gap: var(--spacing-xl);
    }

    .redesign-visual {
        grid-column: 2 / 3;
        grid-row: 1 / 2;

        background-image: url('../images/device-mockups3.png'); 
        background-size: cover;
        background-position: center;

        aspect-ratio: 3 / 4; 

        border-radius: 16px;
    }

    .redesign-visual .mockup-image {
        display: none; 
    }

    .redesign-visual-mobile {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        display: block;
    }

    .redesign-visual-mobile .mockup-image {
        aspect-ratio: 4 / 3; 
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .redesign-card.card-planning {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    /*  3. Section AI DESTEKLİ REKLAM ÇÖZÜMÜ */
    .ai-main-content-grid {
        /* Masaüstündeki (70/30) oranı ezer ve 1 sütuna düşürür */
        grid-template-columns: 1fr;
    }

    .ai-main-content-grid .feature-list,
    .ai-main-content-grid .ai-card-visual {
        display: none; /* 'Müşteri Bazlı...' listesini ve sağ alttaki görseli gizler */
    }

}

/* ===================================
   Responsive 767px (Telefonlar)
   =================================== */

@media (max-width: 767px) {

    /* === BÖLÜM 1: HERO CONTENT === */
    .marquee-content {
        animation-duration: 12s;
    }

    /* === BÖLÜM 2: DİJİTALİ YENİDEN TASARLIYORUZ === */
    .redesign-grid {
        grid-template-columns: 1fr;
    }

    .redesign-visual {
        grid-column: auto;
        grid-row: auto;
        background-image: url('../images/device-mockups4.png');
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .redesign-visual-mobile {
        display: none;
    }

    .redesign-card.card-planning {
        display: none;
    }

    /* === BÖLÜM 3: AI DESTEKLİ REKLAM ÇÖZÜMÜ === */
    .ai-content {
        grid-template-columns: 1fr;
    }

    .ai-visual {
        display: none;
    }

    .ai-main-content-grid .campaign-card h4,
    .ai-main-content-grid .campaign-card .campaign-body {
        display: none;
    }

    .ai-main-content-grid .campaign-card {
        background-image: url('../images/ai-energy2.png');
        background-size: cover;
        background-position: center;
        aspect-ratio: 16 / 9;
        padding: 0;
        border: none;
        width: 100%;
    }

    .ai-text {
        text-align: center;
    }

    .ai-main-content-grid {
        justify-items: center;
    }

    .ai-main-content-grid .btn-primary {
        justify-self: center;
    }

    /* === BÖLÜM 4: ETKİLEŞİMİN GELECEĞİ === */

    .interaction-content {
        grid-template-columns: 1fr;
    }

    .interaction-visual {
        display: none;
    }

    .interaction-text {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .interaction-text .mango-card {
        margin-left: auto;
        margin-right: auto;
    }

    /* === BÖLÜM 5: HAKKIMIZDA NE SÖYLEDİLER === */

    /* 1. Başlık ve Açıklama grid'ini 1 sütuna düşür */
    .testimonial-header-grid {
        grid-template-columns: 1fr;
    }

    /* 2. Kaydıracı 1 kart gösterecek şekilde ayarla */
    .testimonial-card {
        /* 2 kart (%48) yerine 1 kart (%100) göster */
        flex-basis: 100%;
        margin-right: 0;
    }
    
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(50px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-50px, 50px) scale(0.9);
    }
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}