/* --- Genel Ayarlar --- */
:root {
    --bg-cream: #F4F1EA;
    --padding-side: 20px;
    --max-width: 1000px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-cream);
    font-family: sans-serif;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Varsayılan olarak (Masaüstü) Mobil görselleri GİZLE */
.mobile-only {
    display: none !important;
}

/* --- HERO SECTION (Üst Kısım - Masaüstü) --- */
.hero-section {
    background-image: url('assets/bg-desktop.jpg'); 
    background-size: cover;
    background-position: center center;
    position: relative;
    min-height: 800px; 
    padding: 60px var(--padding-side);
    display: flex;
    flex-direction: column;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 80%;
}

.svg-strip-logo { width: 600px; height: auto; }
.svg-strip { width: auto; height: auto; }
.svg-block { width: 750px; height: auto; }

/* --- DÖNEN BADGE ANIMASYONU --- */
.badge-container {
    position: absolute;
    bottom: -200px; 
    right: 10%;
    z-index: 10;
    width: 250px; 
}

.rotating-badge {
    width: 100%;
    animation: spin 20s linear infinite reverse;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- MAIN SECTION (Alt Kısım) --- */
.info-section {
    background-color: var(--bg-cream);
    padding: 50px var(--padding-side) 40px;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 30px;
}

.site-content {
    border-top: 1px solid #F4F1EA;
    padding: 30px 0 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* --- FOOTER --- */
.site-footer {
    border-top: 1px solid #ccc;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-links img:hover, .social-icons img:hover {
    opacity: 0.7;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons img {
    height: 30px;
    transition: opacity 0.3s;
}

.footer-logos {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Sağ alt köşe hizalaması */
    gap: 10px;
}

/* =========================================
   MOBİL UYUMLULUK VE BOYUTLANDIRMA
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Masaüstü görsellerini GİZLE */
    .desktop-only { display: none !important; }
    
    /* Diğerleri SOLA HİZALI kalsın */
    .mobile-only { 
        display: block !important; 
        margin: 0 !important; 
        margin-bottom: 20px !important;
    }

    /* 2. Arka Plan Değişimi */
    .hero-section {
        background-image: url('assets/bg-mobile.jpg'); 
        background-position: center top; 
        min-height: 400px;
        padding: 20px var(--padding-side);
    }
    
    /* İçerik SOLA hizalı */
    .hero-content {
        max-width: 100%;
        align-items: flex-start !important; 
        text-align: left !important;
    }

    /* 3. MOBİL GÖRSEL BOYUTLARI */

    /* A) Üstteki Logo */
    .logo-mobile {
        width: 500px !important;
        max-width: 100%;
    }

    /* B) Başlık Yazısı */
    .title-mobile {
        width: 400px !important;
        max-width: 100%;
    }

    /* C) Dönen Yuvarlak Badge - SAĞA YASLAMA DEĞİŞİKLİĞİ BURADA */
    .badge-container {
        position: relative; 
        bottom: auto;
        right: auto;
        margin-top: 30px;
        
        /* SADECE BUNU SAĞA YASLA */
        margin-left: auto !important; 
        margin-right: 0 !important;
        
        width: 175px !important; 
    }

    /* D) İçerik Yazısı */
    .content-mobile {
        width: 520px !important;
        max-width: 100%;
    }

    /* E) 'Go to Site' Butonu */
    .btn-mobile {
        width: 400px !important;
    }

    /* 4. Footer Düzeni - SOLA HİZALI */
    .info-section { padding-top: 40px; }
    
    .site-footer, .site-content {
        flex-direction: column;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .footer-logos { 
        align-items: flex-start !important;
    }
}