/* BlogDetail.cshtml sayfa stilleri — Faz 2 Lot A'da sayfa içi <style> bloklarından taşındı (sıra korunarak). */

.ai-seo-box {
    background: #f5f3ff;
    border-left: 4px solid #602660;
    padding: 18px 22px;
    border-radius: 12px;
    margin: 25px 0;
    color: #333;
    font-size: 16px;
    line-height: 1.7;
}

.ai-seo-box strong {
    color: #602660;
    display: block;
    font-size: 18px;
    margin-bottom: 6px;
}

.product-feed-blog table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.product-feed-blog th,
.product-feed-blog td {
    border: 1px solid #d9d9d9;
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
}

.product-feed-blog thead th {
    background: #f5f3ff;
    font-weight: 700;
    color: #602660;
}

.product-feed-blog th:first-child,
.product-feed-blog td:first-child {
    width: 28%;
}

@media (max-width: 767.98px) {
    .product-feed-blog {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .product-feed-blog table {
        min-width: 620px;
    }
}

/* Tercih edilen kaynak butonu ile yayin/guncelleme rozetleri ayni satiri
   paylasir: buton solda, rozetler sagda. Dar ekranda alt alta duserler.

   wrap DEGIL nowrap: sarma acikken, ikisi birlikte sigmadiginda rozet
   grubu komple alt satira iniyor ve buton tek basina uste kaliyordu.
   Yazi tipi genisligi makineye gore degistigi icin bu bazi
   bilgisayarlarda olusup bazilarinda olusmuyordu. Artik yer daralinca
   satir bozulmuyor, rozetler kendi icinde alt alta geciyor. */
.blog-meta-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 0 0 24px;
}

.blog-meta-dates {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
}

/* Mobilde saga yasli hizalama, dar ekranda alt alta duserken tirtikli bir
   merdiven olusturuyordu. Ortalayinca iki rozet de eksende hizalaniyor. */
@media (max-width: 767.98px) {
    .blog-meta-dates {
        justify-content: center;
    }
}

.blog-date-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    background: #f5f3ff;
    border: 1px solid #ece5f8;
    padding: 7px 14px;
    border-radius: 9px;
    line-height: 1;
}

.blog-date-item i {
    color: #602660;
    font-size: 16px;
}

.blog-date-item .blog-date-label {
    font-weight: 600;
    color: #602660;
}

.blog-date-item time {
    color: #444;
}

.google-preferred-source {
    display: flex;
    /* Buton sabit genislikte ve metni bolunemez; satir daralinca
       kisilmayi rozet grubu ustlenir. */
    flex: 0 0 auto;
    justify-content: flex-start;
    margin: 0;
}

.google-preferred-source__link {
    display: inline-flex;
    flex: 0 1 251px;
    width: 251px;
    max-width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 9px 14px;
    color: #202124;
    background: #fff;
    border: 1px solid #c9cacc;
    border-radius: 999px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .08);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

.google-preferred-source__link:hover {
    color: #202124;
    background: #f8f9fa;
    border-color: #aeb0b3;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(60, 64, 67, .16);
}

.google-preferred-source__link:focus-visible {
    outline: 3px solid rgba(96, 38, 96, .35);
    outline-offset: 4px;
}

.google-preferred-source__icon {
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.blog-audio-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 25px;
    padding: 15px 17px;
    overflow: hidden;
    background: linear-gradient(135deg, #fbfaff 0%, #f5f1ff 100%);
    border: 1px solid #e8e0f5;
    border-left: 4px solid #602660;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(65, 34, 111, .07);
}

.blog-audio-player__intro {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.blog-audio-player__icon {
    display: inline-flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #602660, #7c3fc7);
    border-radius: 50%;
    box-shadow: 0 6px 14px rgba(96, 38, 96, .22);
}

.blog-audio-player__icon i {
    font-size: 20px;
    line-height: 1;
}

.blog-audio-player__copy {
    min-width: 0;
}

.blog-audio-player__title,
.blog-audio-player__status {
    display: block;
}

.blog-audio-player__title {
    margin-bottom: 2px;
    color: #251336;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

.blog-audio-player__status {
    color: #6d6475;
    font-size: 13px;
    line-height: 1.35;
}

/* Duraklatilan okumanin nerede kaldigini gorunur kilar. */
.blog-audio-player__progress {
    display: block;
    width: 240px;
    max-width: 100%;
    height: 5px;
    margin-top: 8px;
    overflow: hidden;
    background: #e7ddf3;
    border-radius: 999px;
}

.blog-audio-player__progress[hidden] {
    display: none;
}

.blog-audio-player__progress-bar {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #602660, #7c3fc7);
    border-radius: inherit;
    transition: width .35s ease;
}

.blog-audio-player__controls {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.blog-audio-player__button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 15px;
    color: #602660;
    background: #fff;
    border: 1px solid #d9cce9;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.blog-audio-player__button--start {
    color: #fff;
    background: linear-gradient(135deg, #602660, #7c3fc7);
    border-color: transparent;
}

.blog-audio-player__button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(65, 34, 111, .16);
}

.blog-audio-player__button:focus-visible {
    outline: 3px solid rgba(96, 38, 96, .3);
    outline-offset: 3px;
}

.blog-audio-player__button:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.blog-audio-player.is-speaking .blog-audio-player__icon {
    animation: blog-audio-pulse 1.8s ease-in-out infinite;
}

.blog-audio-player.is-paused .blog-audio-player__icon {
    opacity: .7;
}

/* Ses sunucuda uretilirken (ilk dinleme) bekleme durumu. */
.blog-audio-player.is-loading .blog-audio-player__icon {
    animation: blog-audio-pulse 1.1s ease-in-out infinite;
}

@keyframes blog-audio-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(96, 38, 96, .22); }
    50% { box-shadow: 0 0 0 8px rgba(96, 38, 96, 0); }
}

@media (max-width: 767.98px) {
    /* Dar ekranda yan yana sigmiyorlar; rozetler ustte, buton altta kalsin. */
    .blog-meta-bar {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    /* Sutun yonunde flex-grow dikeyde buyutur; rozet grubu gereksiz
       yer kaplamasin diye dogal yuksekligine donuyor. */
    .blog-meta-dates {
        flex: 0 0 auto;
    }

    .google-preferred-source {
        justify-content: center;
    }

    .blog-audio-player {
        align-items: stretch;
        flex-direction: column;
    }

    .blog-audio-player__controls {
        width: 100%;
    }

    /* Dinlet/duraklat tek basina satiri alsin, digerleri yan yana. */
    .blog-audio-player__button {
        flex: 1 1 0;
        min-width: 0;
        padding: 9px 10px;
    }

    .blog-audio-player__button--start {
        flex: 1 1 100%;
    }

    .blog-audio-player__progress {
        width: 100%;
    }
}

/* Icerigin hemen sonundaki paylasim serididi.

   Bilerek .text (data-blog-speech-source) DISINDA duruyor: aksi halde
   sesli okuma ozelligi buton etiketlerini de yaziya dahil edip
   "Facebook X WhatsApp" diye okurdu. */
.blog-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 6px 0 30px;
    padding-top: 18px;
    border-top: 1px solid #ece5f8;
}

.blog-share__label {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #602660;
}

.blog-share__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: #602660;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.blog-share__link svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.blog-share__link:hover,
.blog-share__link:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}

.blog-share__link:focus-visible {
    outline: 3px solid rgba(96, 38, 96, .35);
    outline-offset: 3px;
}

.blog-share__link--facebook { background: #1877f2; }
.blog-share__link--x { background: #000; }
.blog-share__link--whatsapp { background: #25d366; }
.blog-share__link--linkedin { background: #0a66c2; }
.blog-share__link--copy { background: #602660; }

.blog-share__feedback {
    font-size: 14px;
    font-weight: 600;
    color: #1d8a4e;
    opacity: 0;
    transition: opacity .2s ease;
}

.blog-share__feedback.is-visible {
    opacity: 1;
}

@media (max-width: 767.98px) {
    .blog-share {
        justify-content: center;
    }

    .blog-share__label {
        width: 100%;
        margin-bottom: 2px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .google-preferred-source__link,
    .blog-share__link,
    .blog-share__feedback,
    .blog-audio-player__button {
        transition: none;
    }

    .blog-audio-player.is-speaking .blog-audio-player__icon {
        animation: none;
    }

    .blog-audio-player__progress-bar {
        transition: none;
    }
}

.blog-author-card {
    width: 100%;
    max-width: 680px;
    box-sizing: border-box;
    margin: 32px 0;
    padding: 18px 22px;
    border: 1px solid #e8dcf7;
    border-left: 4px solid #6f2da8;
    border-radius: 10px;
    background: linear-gradient(135deg, #fbf9ff 0%, #f5efff 100%);
    box-shadow: 0 4px 16px rgba(73, 31, 105, .07);
}

.blog-author-card__content {
    flex: 1;
    min-width: 0;
}

.blog-author-card__inner {
    display: flex;
    align-items: center;
    gap: 18px;
}

.blog-author-card__image {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
}

.blog-author-card__image img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 50%;
}

.blog-author-card__name {
    margin: 0 0 3px;
    color: #24102f;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.blog-author-card__job {
    margin: 0 0 10px;
    color: #6f2da8;
    font-size: 14px;
    font-weight: 600;
}

.blog-author-card__description {
    margin: 0 0 12px;
    color: #555;
    font-size: 14px;
    line-height: 1.55;
}

.blog-author-card__contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: #6f2da8;
    font-size: 13px;
    font-weight: 600;
}

.blog-author-card__contact a {
    color: #6f2da8;
    text-decoration: none;
}

.blog-author-card__contact a:hover,
.blog-author-card__contact a:focus-visible {
    color: #6f2da8;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .blog-author-card {
        width: 100%;
        max-width: 100%;
        padding: 16px;
    }

    .blog-author-card__name {
        font-size: 21px;
    }

    .blog-author-card__image,
    .blog-author-card__image img {
        width: 60px;
        height: 60px;
    }

    .blog-author-card__image {
        flex-basis: 60px;
    }

    .blog-author-card__inner {
        gap: 14px;
        align-items: flex-start;
    }
}