:root {
        --orbit-bg: #113367;
        --line-color: rgba(255, 255, 255, 0.05);
        --hover-color: #22c7ff;
        --text-color: #fff;
        --orbit-diameter: 500px; /* Yörünge genişliği */
        --center-diameter: 120px; /* Gemi daire genişliği */
        --anim-duration: 210s; /* Tam tur süresi (Yavaş olması iyidir) */
    }

    .orbit-header {
        position: absolute; /* Akıştan bağımsız olması için şart */
        top: -25px;             /* Section'ın en tepesine yapış */
        left: 0;
        width: 100%;        /* Genişliği tam kapla ki text-align çalışsın */
        text-align: center; /* Yazıyı ortala */
        z-index: 30;        /* Gemi (20) ve çizgilerin üzerinde dursun */

        /* İnce Ayarlar */
        padding-top: 0;  /* Mavi alanın içinden biraz boşluk */
        /* margin-top: -50px;  <-- EĞER BEYAZ ALANA TAŞIRMKA İSTERSEN BUNU AÇ */
    }

    .orbit-header h2 {
        color: #fff;        /* Yazı rengi */
        font-weight: 700;
        margin: 0;
        text-transform: uppercase;
    }


    /* 2. ANA ALAN */
    .orbit-section {
        position: relative;
        width: 100%;
        height: 600px; /* Alan yüksekliği */
        display: flex;
        justify-content: center;
        align-items: center;
        overflow:visible;
        padding-top: 120px;
    }

    /* 3. MERKEZ SABİT GEMİ (DÖNMEZ) */
    .center-ship {
        position: absolute;
        width: var(--center-diameter);
        height: var(--center-diameter);
        background: var(--orbit-bg);
        border: 2px solid rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        z-index: 20; /* En üstte olsun */
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 30px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }
    
    .center-ship img {
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
    }

    .center-ship:hover {
        transform: scale(1.1);
        border-color: var(--hover-color);
        box-shadow: 0 0 40px rgba(34, 199, 255, 0.4);
    }

    /* 4. DÖNEN ÇERÇEVE (YÖRÜNGE) */
    .orbit-ring {
        position: relative;
        width: var(--orbit-diameter);
        height: var(--orbit-diameter);
        border-radius: 50%;
        /* Çizgisel bir daire sınırı istersen açabilirsin: border: 1px dashed rgba(255,255,255,0.1); */
        
        /* ANA ANİMASYON: Tüm sistemi döndürür */
        animation: spinRight var(--anim-duration) linear infinite;
    }

    /* Mouse üzerine gelince dönmeyi durdur */
    .orbit-ring:hover {
        animation-play-state: paused;
    }
    /* Halkanın kendisine hover yapınca içerideki ters animasyon da durmalı */
    .orbit-ring:hover .text-rotator {
        animation-play-state: paused;
    }

    /* 5. ÖĞELER (ITEMS) */
    .orbit-item {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50%; /* Yarıçap uzunluğu */
        height: 0;  /* Yükseklik yok, sadece bir eksen */
        transform-origin: 0 0; /* Merkezden döndür */
        /* JS ile her öğeye 'transform: rotate(Xdeg)' eklenecek */
    }

    /* Çizgi */
    .orbit-ring .orbit-item .line {
        position: absolute;
        top: 0;
        left: calc(var(--center-diameter) / 2); /* Merkez daireden başla */
        right: 20px; /* Yazıya biraz boşluk bırak */
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--line-color) 20%, var(--line-color));
        transition: 0.3s;
    }

    .dot {
        position: absolute;
        right: 20px;
        top: -3px;
        width: 6px;
        height: 6px;
        background: #fff;
        border-radius: 50%;
        transition: 0.3s;
    }

    /* 6. YAZI KAPLAYICILARI */
    
    /* Burada iki katmanlı bir düzeltme yapıyoruz:
       1. Katman (content-wrapper): Çizginin ucuna pozisyon alır.
       2. Katman (text-rotator): Sürekli TERS döner (Sistemin dönüşünü nötrler).
       3. Katman (content): İlk baştaki açı bozukluğunu düzeltir.
    */

    .content-wrapper {
        position: absolute;
        right: 0; /* Çizginin en ucu */
        top: 0;
        width: 0;
        height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .text-rotator {
        /* Bu div, ana dairenin dönüşünün tam tersi yönünde döner.
           Böylece yazı daima ufuk çizgisine paralel kalır. */
        animation: spinLeft var(--anim-duration) linear infinite;
    }

    .content {
        /* Bu transform JS ile atanacak: rotate( -1 * öğe_açısı ) 
           Amacı: Başlangıç pozisyonunda yazıyı düz hale getirmek. */
        white-space: nowrap;
        color: var(--text-color);
        font-size: 15px;
        font-weight: 500;
        padding: 8px 15px;
        cursor: pointer;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        transition: all 0.3s ease;
        /* Arkaplan vererek okunurluğu artıralım */
        /* background: rgba(0,0,0,0.2); 
           border-radius: 4px; */
    }

    /* HOVER EFEKTLERİ */
    .content:hover {
        color: var(--hover-color);
        font-size: 16px;
        font-weight: 500;
        text-shadow: 0 0 15px rgba(34, 199, 255, 0.2);
    }

    /* CSS :has seçicisi ile yazıya gelince çizgiyi boyama */
    .orbit-item:has(.content:hover) .line {
        background: var(--hover-color);
        height: 2px;
    }
    .orbit-item:has(.content:hover) .dot {
        background: var(--hover-color);
        transform: scale(1.5);
    }

    /* 7. ANİMASYONLAR */
    @keyframes spinRight {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    @keyframes spinLeft {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(-360deg); }
    }

    /* 8. MOBİL UYUMLULUK */
    @media (max-width: 768px) {
        :root {
            --orbit-diameter: 320px;
            --center-diameter: 80px;
        }
        .content {
            font-size: 11px;
            padding: 4px 8px;
        }
        .orbit-section {
            height: 600px;
        }
    }