/* FuelGuard Angled Tabs Widget

   Prefix: angled-

   ======================================== */



/* Renkler */

:root {

    --siber-ana: #bb0a07;

    --siber-neon: #ff3333;

    --siber-beyaz-bg: #f8f9fa;

    --siber-açık-orta: #e9ecef;

    --siber-yazi-koyu: #343a40;

    --siber-yazi-acik: #6c757d;

}



/* Keyframes */

@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



/* Ana Kapsayıcı ve Düzen */

.angled-tab-kapsayici {

    width: 100%;

    padding: 0;

    background-color: var(--siber-beyaz-bg);

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    overflow: hidden;

}



/* 1. ÜST ALAN: Yatay Sekme Navigasyon */

.angled-nav {

    display: flex;

    justify-content: flex-start;

    background-color: var(--siber-açık-orta);

    position: relative;

    z-index: 5;

    border-bottom: 2px solid var(--siber-ana);

    padding: 0 20px;

    gap: 4px;

}



.angled-link {

    padding: 12px 20px;

    color: var(--siber-yazi-koyu);

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

    position: relative;

    background-color: transparent;

    border-bottom: 2px solid transparent;

}



.angled-link:hover {

    background-color: rgba(0, 0, 0, 0.03);

}



.angled-link.active {

    color: var(--siber-ana);

    background-color: var(--siber-beyaz-bg);

    border-bottom: 2px solid var(--siber-ana);

}



/* 2. İÇERİK ALANI */

.angled-icerikler {

    padding: 24px 20px;

    position: relative;

    background-color: var(--siber-beyaz-bg);

}



/* Tekil Sekme İçeriği */

.tab-icerik {

    display: none;

    animation: fadeIn 0.5s ease-out;

}



.tab-icerik.active {

    display: block;

}



/* İçerik Düzeni: Sol Yazı, Sağ Görsel */

.icerik-grid {

    display: flex;

    gap: 20px;

    align-items: center;

}



.icerik-sol {

    flex: 1;

    padding: 0;

}



.icerik-sag {

    flex: 1;

    max-width: 45%;

}



/* Görsel Stili */

.icerik-sag img {

    width: 100%;

    height: auto;

    border: 1px solid #ddd;

    border-radius: 6px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



/* Başlık ve Metin Stilleri */

.icerik-sol h3 {

    color: var(--siber-ana);

    font-size: 1.6em;

    margin-top: 0;

    margin-bottom: 12px;

    font-weight: 700;

}



.icerik-sol p,

.icerik-sol .tab-description {

    color: var(--siber-yazi-acik);

    line-height: 1.7;

}



.tab-description p {

    margin: 0;

    padding: 0;

}



.tab-description p + p {
    margin-top: 10px;
}

.fg-tab-desc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 10px;
    font-size: 0.95em;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: var(--siber-yazi-koyu);
}
.fg-tab-desc-more {
    margin-top: 10px;
}

.fg-tab-desc.collapsed .fg-tab-desc-more {
    display: none;
}


/* Mobil Uyumlu Düzenleme */

@media (max-width: 900px) {

    .angled-nav,

    .angled-icerikler {

        padding-left: 16px;

        padding-right: 16px;

    }

}



@media (max-width: 768px) {

    .angled-nav {

        overflow-x: auto;

        padding: 8px 12px;

        -webkit-overflow-scrolling: touch;

        white-space: nowrap;

    }

    

    .angled-link {

        flex-shrink: 0;

        padding: 10px 16px;

        border-bottom: 2px solid transparent;

    }

    

    .angled-link.active {

        border-bottom: 2px solid var(--siber-ana);

    }

    

    .angled-icerikler {

        padding: 16px;

    }

    

    .icerik-grid {

        flex-direction: column;

        gap: 16px;

    }

    

    .icerik-sag {

        max-width: 100% !important;

    }

    

    .icerik-sol {

        padding: 0;

    }

    

    .icerik-sol h3 {
        font-size: 1.4em;
    }

    .fg-tab-desc.collapsed .fg-tab-desc-more {
        display: none;
    }
}


@media (max-width: 480px) {

    .angled-nav {

        padding: 6px 8px;

    }

    

    .angled-link {

        font-size: 0.9em;

        padding: 8px 12px;

    }

    

    .angled-icerikler {

        padding: 12px;

    }

    

    .icerik-sol h3 {

        font-size: 1.3em;

    }

    

    .icerik-sol p,
    .icerik-sol .tab-description {
        font-size: 0.95em;
    }

    .fg-tab-desc.collapsed .fg-tab-desc-more {
        display: none;
    }
}

@media (min-width: 769px) {
    .fg-tab-desc-toggle {
        display: none;
    }
    .fg-tab-desc.collapsed .fg-tab-desc-more {
        display: block;
    }
}