/* Modal Stilleri */
.langfy-page-limit-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: langfyFadeInAnimation 0.3s ease-out;
}
.sozluk-header-icon{}
.sozluk-header-icon img{
    aspect-ratio: 1;
    width: 100%;
    max-width: 70px;

}
.badgeci{
    float: right;
    margin-top: 3px;
    padding: 4px 4px 3px 4px !important;
    min-width: 30px;
    background-color: #fff !important;
    color: #000 !important;
    margin-right: 2px;
}
.langfy-modal-backdrop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

.langfy-modal-content-wrapper {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 15px 15px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    animation: langfySlideUpAnimation 0.4s ease-out;
}

.langfy-modal-icon-container {
    color: #ff9800;
    margin-bottom: 20px;
}

.langfy-modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0 0 16px 0;
}

.langfy-modal-description {
    font-size: 16px;
    color: #666;
    margin: 0 0 32px 0;
    line-height: 1.6;
}

.langfy-modal-actions-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.langfy-btn-primary-action,
.langfy-btn-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    width: 200px;
}

.langfy-btn-primary-action {
    background: #E91E63;
    color: white;
}

.langfy-btn-primary-action:hover {
    background-color: #a9a9a9;
    color: #fff;
}

.langfy-btn-secondary-action {
    background: #7cb63c;
    color: white;
}

.langfy-btn-secondary-action:hover {
    background-color: #a9a9a9;
    color: #fff;
}

/* Banner Stilleri - Alt Kısım */
.langfy-page-limit-warning-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
    color: white;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
    animation: langfySlideUpBanner 0.4s ease-out;
}

.langfy-banner-inner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 50px 14px 20px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.langfy-banner-warning-icon {
    font-size: 24px;
}

.langfy-banner-row {
    display: flex;
    width: 100%;
    gap: 16px;
    align-items: center;
}

.langfy-banner-col {
    flex: 1;
    min-width: 0;
}

.langfy-banner-col:first-child {
    text-align: left;
}

.langfy-banner-col:last-child {
    text-align: right;
}

.langfy-banner-message-text {
    font-size: 14px;
    font-weight: 500;
}

.langfy-banner-message-text strong {
    font-weight: 700;
    font-size: 16px;
}

.langfy-banner-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.langfy-banner-btn {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.3s;
}

.langfy-banner-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

.langfy-banner-btn-primary {
    background: white;
    color: #ff5722;
}

.langfy-banner-btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #ff5722;
}

.langfy-banner-cta-link {
    color: white;
    text-decoration: underline;
    font-weight: 600;
    font-size: 14px;
    transition: opacity 0.3s;
}

.langfy-banner-cta-link:hover {
    opacity: 0.8;
}

.langfy-banner-close-btn {
    position: absolute;
    top: 30px;
    right: 16px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.langfy-banner-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}


/* Banner Animasyonu - Alttan yukarı */
@keyframes langfySlideUpBanner {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Animasyonlar */
@keyframes langfyFadeInAnimation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes langfySlideUpAnimation {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes langfySlideDownAnimation {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 640px) {
    .langfy-modal-content-wrapper {
        padding: 15px 15px;
    }

    .langfy-modal-actions-container {
        flex-direction: column;
        width: 100%;
    }

    .langfy-btn-primary-action,
    .langfy-btn-secondary-action {
        width: 100%;
    }

    .langfy-banner-inner-content {
        padding: 12px 40px 12px 16px;
    }

    .langfy-banner-warning-icon {
        font-size: 20px;
    }

    .langfy-banner-row {
        flex-direction: column;
        gap: 10px;
    }

    .langfy-banner-col:first-child,
    .langfy-banner-col:last-child {
        text-align: center;
    }

    .langfy-banner-buttons {
        justify-content: center;
    }

    .langfy-banner-message-text {
        font-size: 13px;
    }

    .langfy-banner-btn {
        padding: 5px 12px;
        font-size: 12px;
    }

    .langfy-banner-close-btn {
        right: 10px;
        width: 24px;
        height: 24px;
        font-size: 16px;
    }
}

.on_erisim{
    margin-top: 40px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}
.on_erisim i{
    font-size: 32px;
}
.on_erisim1{
    text-align: center;
    line-height: 24px;
}
.on_erisim2{
    text-align: center;
    padding: 20px 0px;
    font-size: 16px;
    font-weight: 700;
}
.on_erisim2 a{}
.on_erisim2 a:hover{}

.hikaye_kutu_isim{
    color: #000;
    font-size: 14px;
    padding: 20px 5px;
    height: 120px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.hikaye_kutu_bilgi{
    color: #000;
    font-size: 14px;
    padding: 20px 5px;
    color: #000;
    font-size: 14px;
    padding: 20px 5px;
    height: 150px;
    font-weight: 100;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}



.hikaye_kutu{}
.hikaye_kutu a{
    text-decoration: none;
    border-radius: 10px;
    background-color: #fff;
    display: block;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    opacity: .8;
}
.hikaye_kutu a:hover{
    opacity: 1;
}
.hikaye_kutu_zorluk{
    height: 40px;
    width: 40px;
    right: 0px;
    top: 0px;
    position: absolute;
    border-bottom-left-radius: 10px;
    font-size: 22px;
    text-align: center;
    font-weight: 700;
    color: #ffffff;
    padding-top: 4px;
}
.hikaye_kutu_resim{
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    position: relative;
    aspect-ratio: 1;
}
.hikaye_kutu_resim img{
    width: 100%;
}
.hikaye_kutu_seri{
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-color: #3a9546;
    padding: 5px 12px;
    border-top-right-radius: 10px;
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
}
.hikaye_kutu_seviye{
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #3d618d;
    padding: 4px 10px;
    border-bottom-left-radius: 8px;
    font-size: 12px;
    color: #ffffff;
    font-weight: 700;
}
.hikaye_kutu_sezon{
    font-size: 12px;
    color: #666;
    padding: 5px 15px 0;
    text-align: center;
}
.hikaye_kutu_sezon i{
    margin-right: 3px;
}
.hikaye_kutu_kategori{
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #ff0000;
    padding: 5px 10px;
    border-bottom-left-radius: 10px;
    font-size: 16px;
    color: #ffffff;
    font-weight: 600;
}
.hikaye_kutu_placeholder{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.8);
    font-size: 50px;
}
.hikaye_kutu_hit{
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.6);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    color: #ffffff;
    font-weight: 500;
    backdrop-filter: blur(4px);
}
.hikaye_kutu_hit i{
    margin-right: 4px;
}
.hikaye_kutu_zorluk{
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 4px;
}
.hikaye_kutu_zorluk i{
    font-size: 8px;
}
.hikaye_kutu_zorluk.zorluk-kolay{
    background: rgba(34, 197, 94, 0.9);
    color: #fff;
}
.hikaye_kutu_zorluk.zorluk-orta{
    background: rgba(245, 158, 11, 0.9);
    color: #fff;
}
.hikaye_kutu_zorluk.zorluk-zor{
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
}
.hh_kelimeler{
    margin: 10px 0px;
}
.hh_kelimeler div{
    font-size: 15px;
    font-weight: 700;
}

.kisteci_a{
    display: block;
    text-decoration: none;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 10px;
}
.kisteci_a:hover .ic_alan{
    transform: scale(1.1) rotate(3deg);
}
.kisteci_a:hover .kisteci_info{
    background-color: #ccc;
}
.kisteci_a .kisteci_resim{
    overflow: hidden;
    position: relative;
    aspect-ratio: 1;
}
.kisteci_a .kisteci_resim .ic_alan{
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    position: relative;
    aspect-ratio: 1;
    transition: all .6s;
}
.kisteci_a .kisteci_info{
    background-color: #e2e2e2;
    font-size: 14px;
    text-decoration: none;
    height: 100px;
    line-height: 15px;
    color: #000;
}

.kisteci{
    display: flex;
    text-decoration: none;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 10px;
}
.kisteci:hover .ic_alan{
    transform: scale(1.1) rotate(3deg);
}
.kisteci:hover .kisteci_info{
    background-color: #ccc;
}
.kisteci .kisteci_resim{
    overflow: hidden;
    position: relative;
    aspect-ratio: 1;
    width: 100px;
}
.kisteci .kisteci_resim .ic_alan{
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    position: relative;
    aspect-ratio: 1;
    transition: all .6s;
}
.kisteci .kisteci_info{
    width: calc( 100% - 100px);
    background-color: #e2e2e2;
    font-size: 14px;
    text-decoration: none;
    height: 100px;
    line-height: 15px;
    color: #000;
}
.footer_alt{}
.footer_alt a{
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
    padding: 4px 10px;
    /* border: 1px solid #f13131; */
    margin: 0px 5px;
    border-radius: 5px;
    background: #ffffff;
    color: #3f3f3f;
    margin: 2px 0px;
}
.footer_alt a:hover{
    color: #ffffff;
    background: #f13131;
    text-decoration: none;
}
#girisForm{
    z-index: 11111;
}
.table-responsive .badge{
    color: #ff7777;
    font-weight: 400;
    /* font-size: 12px; */
    padding: 0px;
    margin: 0px;
    border: 0px;
    width: 30px;
    height: 30px;
    padding-top: 6px;
    font-size: 18px !important;
    font-weight: 700;
}
.area-page-form td.genis{
    width: auto;
}
.area-page-form td{
    width: 120px;
}
.aav-listeleme{
    margin-top: 10px;
    background-color: #0d6efd;
}
.aav-listeleme:hover{
    background-color: #0a58ca;
}

.m_title{
    font-size: 14px !important;
    font-weight: 600;
}
.myavatar_resim{}
.myavatar_resim img{
    width: 100%;
}
.myavatar_ikon{}
.avatar_page{
    display: none;
}
.avatar_page.pagem1{
    display: block;
}
.avatar_sayfala{
    display: flex;
    margin-bottom: 10px;
}
.avatar_sayfala li{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ccc;
    margin-right: 10px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
}
.avatar_sayfala li:hover{
    background-color: #b6b6b5;
    color: #000;
}

@media (min-width: 640px) and (max-width: 767.98px) {
    .col-sma-1 { flex:0 0 8.333333%; max-width:8.333333%; }
    .col-sma-2 { flex:0 0 16.666667%; max-width:16.666667%; }
    .col-sma-3 { flex:0 0 25%; max-width:25%; }
    .col-sma-4 { flex:0 0 33.333333%; max-width:33.333333%; }
    .col-sma-5 { flex:0 0 41.666667%; max-width:41.666667%; }
    .col-sma-6 { flex:0 0 50%; max-width:50%; }
    .col-sma-7 { flex:0 0 58.333333%; max-width:58.333333%; }
    .col-sma-8 { flex:0 0 66.666667%; max-width:66.666667%; }
    .col-sma-9 { flex:0 0 75%; max-width:75%; }
    .col-sma-10 { flex:0 0 83.333333%; max-width:83.333333%; }
    .col-sma-11 { flex:0 0 91.666667%; max-width:91.666667%; }
    .col-sma-12 { flex:0 0 100%; max-width:100%; }
}
@media (min-width: 840px) and (max-width: 991.98px) {
    .col-mda-6 { flex:0 0 50%; max-width:50%; }
    .col-mda-4 { flex:0 0 33.333333%; max-width:33.333333%; }
    .col-mda-3 { flex:0 0 25%; max-width:25%; }
}
@media (min-width: 1040px) and (max-width: 1199.98px) {
    .col-lga-6 { flex:0 0 50%; max-width:50%; }
    .col-lga-4 { flex:0 0 33.333333%; max-width:33.333333%; }
    .col-lga-3 { flex:0 0 25%; max-width:25%; }
}
@media (min-width: 1280px) and (max-width: 1399.98px) {
    .col-xla-4 { flex:0 0 33.333333%; max-width:33.333333%; }
    .col-xla-3 { flex:0 0 25%; max-width:25%; }
}
@media (min-width: 1480px) and (max-width: 1599.98px) {
    .col-xxla-3 { flex:0 0 25%; max-width:25%; }
    .col-xxla-2 { flex:0 0 16.666667%; max-width:16.666667%; }
}

/* ========================================
   Test Bölüm Uyarısı
   ======================================== */
.test-bolum-uyari {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.15);
}

.test-bolum-uyari-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.test-bolum-uyari-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.test-bolum-uyari-icon i {
    font-size: 24px;
    color: white;
}

.test-bolum-uyari-baslik h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: #92400e;
}

.test-bolum-uyari-subtitle {
    font-size: 13px;
    color: #b45309;
    font-weight: 500;
}

.test-bolum-uyari-aciklama {
    font-size: 13px;
    color: #a16207;
    line-height: 1.5;
    margin: 0 0 15px 0;
}

.test-bolum-progress {
    background: #f8f8f8;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 15px;
}

.test-bolum-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #92400e;
    font-weight: 500;
    margin-bottom: 8px;
}

.test-bolum-progress-bar {
    height: 8px;
    background: #fcd34d;
    border-radius: 4px;
    overflow: hidden;
}

.test-bolum-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #d97706);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.test-bolum-liste-baslik {
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.test-bolum-liste-baslik i {
    font-size: 14px;
    color: #d97706;
}

.test-bolum-liste {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    border-radius: 10px;
}

.test-bolum-liste li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    /* border-bottom: 1px solid rgba(251, 191, 36, 0.2); */
    font-size: 13px;
    transition: background 0.2s;
    margin: 6px 0px;
    border-radius: 10px;
}

.test-bolum-liste li:last-child {
    border-bottom: none;
}

.test-bolum-liste li.okundu {
    background: rgba(16, 185, 129, 0.1);
}

.test-bolum-liste li.okunmadi {
    background: rgba(239, 68, 68, 0.05);
}

.test-bolum-liste li i {
    font-size: 16px;
    width: 20px;
    flex-shrink: 0;
}

.test-bolum-liste li i.fa-circle-check {
    color: #10b981;
}

.test-bolum-liste li i.fa-circle-xmark {
    color: #ef4444;
}

.test-bolum-liste li .bolum-isim {
    flex: 1;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.test-bolum-liste li .bolum-durum {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.test-bolum-liste li.okundu .bolum-durum {
    background: #d1fae5;
    color: #065f46;
}

.test-bolum-liste li.okunmadi .bolum-durum {
    background: #fee2e2;
    color: #991b1b;
}

.test-bolum-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.test-bolum-btn:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    color: white;
    text-decoration: none;
}

.test-bolum-btn i {
    font-size: 16px;
}

/* Ulak Progress Box */
.ulak-progress-box {
    background: rgba(245,158,11,0.1);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}

.ulak-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 12px;
}

.ulak-progress-bar {
    height: 6px;
    background: #fcd34d;
    border-radius: 3px;
    overflow: hidden;
}

.ulak-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #d97706);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.egitim-sinif-aciklama{
    background-color: #fff;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 10px;
}
.egitim-sinif-aciklama p{
    margin: 0px;
    padding: 0px;
}

/* Egitim Test Kart Stilleri */
.egitim-test-card {
    background: #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.egitim-test-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.egitim-test-header i {
    font-size: 16px;
}

.egitim-test-body {
    padding: 20px;
    text-align: center;
}

.egitim-test-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.egitim-test-icon i {
    font-size: 28px;
    color: #35567e;
}

.egitim-test-info {
    margin-bottom: 15px;
    gap: 10px;
    /* display: flex; */
    padding: 10px 0px;
    /* min-height: 50px; */
    width: 100%;
    align-items: center;

}

.egitim-test-count {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.egitim-test-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background: #fff;
    color: #304e73;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.egitim-test-btn:hover {
    background: #b1bfd1;
    color: #fff;
}

.egitim-test-btn:active {
    transform: translateY(0);
}

.egitim-test-btn i {
    font-size: 14px;
}

/* Egitim Test Card Animasyonu */
@keyframes pulse-test {
    0%, 100% { box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 4px 25px rgba(16, 185, 129, 0.5); }
}

.egitim-test-card:hover {
    animation: pulse-test 2s ease-in-out infinite;
}

/* ========================================
   Egitim Test Durumu Stilleri
   ======================================== */
.egitim-test-onceki-sonuc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}

.egitim-test-onceki-sonuc i {
    color: #fbbf24;
}

.egitim-test-bekleme {
    text-align: center;
    display: flex;
    justify-content: center;
}

.egitim-test-puan-badge {
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin: 0px 0px 5px 0px;
}

.egitim-test-puan-badge i {
    color: #10b981;
}

.egitim-test-kalan-sure {
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    margin: 0px 0px 5px 0px;
}

.egitim-test-kalan-sure i {
    color: #f59e0b;
    animation: pulse 2s infinite;
}

.egitim-test-soru-sayisi {
    margin-top: 12px;
    color: #888;
    font-size: 12px;
    display: none;
}

.egitim-test-btn.disabled {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
}

.egitim-test-btn.disabled:hover {
    background: #e2e8f0;
    color: #94a3b8;
    transform: none;
}

/* ========================================
   Egitim Üst Konu Butonu
   ======================================== */
.egitim-ust-konu-btn {
    display: block;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #ffffff;
    color: #495057;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin: 15px 0px 15px 0px;
    transition: all 0.2s ease;
}

.egitim-ust-konu-btn:hover {
    background: #e9ecef;
    color: #212529;
    text-decoration: none;
}

.egitim-ust-konu-btn i {
    font-size: 12px;
}

/* ========================================
   Modal Close Butonu Ortalama
   ======================================== */
.smodal-close {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   Egitim Konu Sidebar - İlişkili Dersler
   ======================================== */
.egitim-iliskili-sidebar .sidebar-card-body {
    padding: 0;
}
.sidebar-card-body .leaderboard-mini{
    padding-bottom: 0px;
}
.leaderboard-mini .leaderboard-item:last-child{
    margin-bottom: 0px;
}

.egitim-sidebar-ders-link {
    display: flex;
    padding: 10px 0px 0px 0px;
    text-decoration: none;
    transition: background 0.2s ease;
    gap: 10px;
    border-radius: 10px;
    height: 60px;
}

.egitim-sidebar-ders-link:last-child {
    border-bottom: none;
}

.egitim-sidebar-ders-link:hover .fw-semibold{
    text-decoration: none;
    color: #c52217;
}
.egitim-sidebar-ders-link:hover {
    text-decoration: none;
}

.egitim-sidebar-ders-icon {
    width: 40px;
    height: 40px;
    background: #ccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.egitim-sidebar-ders-icon i {
    color: #fff;
    font-size: 14px;
}

.egitim-sidebar-ders-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.egitim-sidebar-ders-info .fw-semibold {
    font-size: 13px;
    color: #9c9c9c;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.3;
    font-weight: 400;
}

.egitim-sidebar-ders-info small {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.3;
}

.egitim-sidebar-ders-link .fa-chevron-right {
    font-size: 10px;
    color: #ccc;
    flex-shrink: 0;
}

.egitim-sidebar-ders-link:hover .fa-chevron-right {
    color: #667eea;
}
.text1-primary{
    color: #e83f3f !important;
    font-weight: 600;
}
.fw1-bold{}

.border1-bottom{
    position: relative;
}

.border1-bottom::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    width: calc(100% - 40px);
    height: 1px;
    background-color: #f1f5f9;
}

/* ========================================
   Egitim Konu Sidebar - Konu Bilgileri
   ======================================== */
.egitim-konu-bilgi-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    font-size: 13px;
}

.egitim-konu-bilgi-item:last-child {
    border-bottom: none;
}

.egitim-konu-bilgi-item span {
    color: #94a3b8;
}

.egitim-konu-bilgi-item strong {
    color: #94a3b8;
    font-weight: 600;
}

/* ========================================
   Egitim Konu Sidebar - Diğer Konular
   ======================================== */
.sidebar-card .sidebar-card-body a.d-block {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #555;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    border-radius: 10px;
    border: 0px;
}

.sidebar-card .sidebar-card-body a.d-block:last-child {
    border-bottom: none;
}

.sidebar-card .sidebar-card-body a.d-block:hover {
    background: #f8f9fa;
    color: #333;
    text-decoration: none;
}

.sidebar-card .sidebar-card-body a.d-block.fw-bold {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    font-weight: 600;
}

.sidebar-card .sidebar-card-body a.d-block i {
    font-size: 10px;
    margin-right: 8px;
    color: #999;
}

.sidebar-card .sidebar-card-body a.d-block:hover i,
.sidebar-card .sidebar-card-body a.d-block.fw-bold i {
    color: #667eea;
}

/* =========================================
   TAKVİM (PAGE2) STİLLERİ
   ========================================= */
.takvim-container {
    padding: 0;
}

.takvim-container .ttakbimme {
    font-size: 14px;
    font-weight: 700;
    color: var(--renkyazi, #1e293b);
    padding: 16px 20px;
    margin: 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 8px;
}

.takvim-container .ttakbimme::before {
    content: '\f073';
    font-family: 'Font Awesome 6 Pro';
    font-weight: 300;
    color: #6366f1;
}

.takvim-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: none;
    margin-top: 10px;
}

.takvim-list .takvim-item {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    padding: 0;
    background: transparent;
    transition: all 0.2s ease;
}

.takvim-list .takvim-item:last-child {
    border-bottom: none;
}

.takvim-list .takvim-item:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%);
}

.takvim-list .mfast0 {
    display: block;
}

.takvim-list .mfast0 a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    text-decoration: none;
    color: inherit;
}

.takvim-list .mfast1 {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.takvim-list .mfast1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.takvim-list .mfast2 {
    flex: 1;
    min-width: 0;
}

.takvim-list .mfast2a {
    font-size: 14px;
    font-weight: 600;
    color: var(--renkyazi, #1e293b);
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.takvim-list .mfast2b {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.takvim-list .mfast2b::before {
    content: '\f017';
    font-family: 'Font Awesome 6 Pro';
    font-weight: 300;
    font-size: 11px;
    color: #94a3b8;
}

/* Boş durum */
.takvim-container .alert {
    margin: 20px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
}

.takvim-container .alert-info {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    color: #0369a1;
}

.takvim-container .alert-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    color: #b45309;
}

/* Acilir menü içindeki spinner */
.acilirmenu2 .spinner-border {
    color: #6366f1 !important;
}

.acilirmenu2 .page1_area {
    height: 100%;
    overflow-y: auto;
}

/* Remember list container */
.remember_list {
    height: 100%;
}

/* ================================================
   ACHIEVEMENT ACTION COLORS
   İşlem bazlı başarı ikon renkleri
   ================================================ */

/* Temel achievement-icon stili */
.achievement-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    background: #94a3b8; /* Varsayılan gri */
}

/* Locked (kilitli) durumu - action renklerini override eder */
.achievement-icon.locked {
    background: #94a3b8 !important;
    box-shadow: none !important;
    opacity: 0.6;
}

/* Read - Okuma (Mavi) */
.achievement-action-read:not(.locked) {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

/* Like - Beğeni (Kırmızı/Pembe) */
.achievement-action-like:not(.locked) {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

/* Rate - Puanlama (Sarı/Turuncu) */
.achievement-action-rate:not(.locked) {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

/* Test (Yeşil) */
.achievement-action-test:not(.locked) {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}

/* Listen - Dinleme (Mor) */
.achievement-action-listen:not(.locked) {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

/* Watch - İzleme (Kırmızı) */
.achievement-action-watch:not(.locked) {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}

/* Join - Katılım (Cyan) */
.achievement-action-join:not(.locked) {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
}

/* Win - Kazanma (Altın) */
.achievement-action-win:not(.locked) {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.35);
}

/* Earned (kazanılmış) durumunda parıltı efekti */
.achievement-card.earned .achievement-icon:not(.locked) {
    animation: achievementPulse 2s infinite;
}

@keyframes achievementPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Claimable (ödül alınabilir) durumunda */
.achievement-card.claimable .achievement-icon:not(.locked) {
    animation: achievementGlow 1.5s infinite;
}

@keyframes achievementGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.4);
    }
}

/* ================================================
   ACHIEVEMENT PAGE STYLES
   Başarılar sayfası stilleri
   ================================================ */

/* Aksiyon Tabları */
.action-tabs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 12px;
}

.action-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 25px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.action-tab:hover {
    border-color: var(--tab-color, #64748b);
    color: var(--tab-color, #64748b);
    background: #fff;
    text-decoration: none;
}

.action-tab.active {
    background: var(--tab-color, #64748b);
    border-color: var(--tab-color, #64748b);
    color: #fff;
}

.action-tab i {
    font-size: 14px;
}

.action-tab .tab-count {
    background: rgba(0,0,0,0.1);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.action-tab.active .tab-count {
    background: rgba(255,255,255,0.2);
}

.action-label {
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 11px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}

.action-label i {
    font-size: 10px;
}

/* Achievement Summary */
.achievement-summary {
    display: flex;
    justify-content: space-around;
    padding: 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    margin-bottom: 25px;
}

.summary-item {
    text-align: center;
}

.summary-value {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
}

.summary-label {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    margin-top: 5px;
}

/* Category Header */
.category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 0px 15px 20px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 16px;
}

.category-header i {
    font-size: 20px;
}

.category-count {
    margin-left: auto;
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    color: #64748b;
}

/* Achievements Grid */
.achievements-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.achievement-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    position: relative;
    transition: all 0.2s;
}

.achievement-card:hover {
    border-color: #cbd5e1;
}

.achievement-card.earned {
    border-color: #22c55e;
    background: #f0fdf4;
}

.achievement-card.locked {
    opacity: 0.8;
}

/* Achievement Info */
.achievement-info {
    flex: 1;
    min-width: 0;
}

.achievement-info h4 {
    margin: 0 0 5px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.achievement-info p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

/* Achievement Progress */
.achievement-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.achievement-progress .progress-bar {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.achievement-progress .progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.progress-text {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

/* Achievement Points */
.achievement-points {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #fef3c7;
    color: #d97706;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

/* When there's an earned badge, move points to the left */
.achievement-card.earned .achievement-points {
    right: 30px;
}

/* Earned Badge */
.earned-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    border: 3px solid #fff;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
    background: #fff;
    border-radius: 12px;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 15px;
}

/* Menu Badge */
.menu-badge {
    background: #e2e8f0;
    color: #64748b;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: auto;
    float: right;
}

.aktif .menu-badge {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* Claimable Card */
.achievement-card.claimable {
    border: 2px solid #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    animation: achievement-pulse-glow 2s infinite;
}

@keyframes achievement-pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.5); }
}

/* Claim Button */
.claim-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.claim-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.claim-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
    transform: none;
}

.claim-btn.claimed {
    background: #22c55e;
}

/* Earned but unclaimed - highlight with animation */
.claim-btn.earned-claim {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    animation: pulse-claim 2s infinite;
}

.claim-btn.earned-claim:hover {
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

@keyframes pulse-claim {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

/* XP Popup */
.xp-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    padding: 30px 50px;
    border-radius: 20px;
    font-size: 28px;
    font-weight: 700;
    z-index: 9999;
    animation: xp-popup-in 0.5s ease, xp-popup-out 0.5s ease 1.5s forwards;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

@keyframes xp-popup-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes xp-popup-out {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}

/* ================================================
   HEDEFLER (GOALS) PAGE STYLES
   Hedeflerim sayfası stilleri
   ================================================ */

/* Weekly Success Card */
.weekly-success-card {
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    margin-bottom: 25px;
}

.success-circle {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 15px;
}

.success-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg {
    fill: none;
    stroke: rgba(255,255,255,0.2);
    stroke-width: 3;
}

.circle-progress {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
}

.success-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: 700;
    color: #fff;
}

.success-text {
    color: rgba(255,255,255,0.9);
    font-size: 14px;
}

/* Section Card */
.section-card {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}

.section-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.section-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
}

.section-title p {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: #64748b;
}


.day-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px 10px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.day-card.achieved {
    background: #f0fdf4;
    border-color: #22c55e;
}

.day-card.partial {
    background: #fffbeb;
    border-color: #f59e0b;
}

.day-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.day-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
}

.day-status {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    background: #ef4444;
}

.day-card.achieved .day-status {
    background: #22c55e;
}

.day-card.partial .day-status {
    background: #f59e0b;
}

.day-progress {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin-bottom: 10px;
    overflow: hidden;
}

.day-card.achieved .day-progress {
    background: #bbf7d0;
}

.day-card.partial .day-progress {
    background: #fef3c7;
}

.day-progress .progress-bar {
    height: 100%;
    background: #3b82f6;
    border-radius: 2px;
    transition: width 0.3s;
}

.day-card.achieved .day-progress .progress-bar {
    background: #22c55e;
}

.day-card.partial .day-progress .progress-bar {
    background: #f59e0b;
}

.day-bottom {
    font-size: 12px;
}

.day-minutes {
    font-weight: 700;
    color: #1e293b;
}

.day-target {
    color: #94a3b8;
}



.stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-radius: 12px;
    background: #f8fafc;
}

.stat-card .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.stat-success .stat-icon {
    background: #dcfce7;
    color: #22c55e;
}

.stat-time .stat-icon {
    background: #dbeafe;
    color: #3b82f6;
}

.stat-points .stat-icon {
    background: #fef3c7;
    color: #f59e0b;
}

.stat-content .stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
}

.stat-content .stat-label {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

/* ========================================
   CONTENT BADGES - VIP/Premium İçerik
   ======================================== */
.content-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 10px;
}

.content-badge.premium {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.content-badge.vip {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
}

.content-badge.new {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
}

/* Liste Kartlarında Badge */
.hikaye_kutu .content-badge,
.blog_kutu .content-badge,
.card_kutu .content-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
}

/* =============================================
   Limit Dropdown Stilleri
   ============================================= */

/* Limit Badge (buton üzerinde) */
.g_controls_buton .limit-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
}

.g_controls_buton .limit-badge.exhausted {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    animation: pulse-badge 1.5s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Limit Dropdown */
.limit-dropdown {
    min-width: 220px;
    padding: 0;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.limit-dropdown-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
}

.limit-dropdown-header i {
    font-size: 16px;
}

.limit-dropdown-body {
    padding: 12px;
    background: white;
}

/* Sınırsız Erişim */
.limit-unlimited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 13px;
}

.limit-unlimited i {
    font-size: 20px;
}

/* Progress Bar */
.limit-progress-wrap {
    margin-bottom: 12px;
}

.limit-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
    color: #64748b;
}

.limit-progress-info strong {
    color: #1e293b;
    font-size: 13px;
}

.limit-progress-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.limit-progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* CTA Butonlar - Yan Yana */
.limit-cta-row {
    display: flex;
    gap: 8px;
}

.limit-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.limit-btn.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.limit-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    color: white;
}

.limit-btn.secondary {
    background: #f1f5f9;
    color: #475569;
}

.limit-btn.secondary:hover {
    background: #e2e8f0;
    color: #334155;
}

.limit-btn.full {
    width: 100%;
}

/* Eski CTA stili (geriye uyumluluk) */
.limit-cta {
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.limit-cta p {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 10px;
}