/* =========================================
   Özgeçmiş görüntüleyici (ap-belge.js: PDF.js ile pencere içinde)
   av-test'teki aves-belge görünümünün profil sayfası renklerine (ap-style.css) uyarlanmış hali.
   Tüm kurallar .ap-belge ile başlar; sayfadaki diğer öğelere dokunmaz.
   ========================================= */

.ap-belge {
    --belge-kenar: var(--line, #e3e7ed);
    --belge-cizgi: var(--line2, #eef1f4);
    --belge-arac-zemin: var(--bg2, #ffffff);
    --belge-alan-zemin: var(--bg, #f6f7f9);
    --belge-metin: var(--ink-mid, #6b7a90);
    --belge-soluk: var(--ink-dim, #9aa5b8);
    --belge-ikon: var(--ink-mid, #6b7a90);
    --belge-ustunde-zemin: var(--accent-bg, rgba(29, 158, 117, 0.06));
    --belge-ustunde-metin: var(--accent, #1D9E75);
    --belge-girdi-zemin: var(--bg, #f6f7f9);
    --belge-girdi-kenar: var(--line, #e3e7ed);
    --belge-girdi-metin: var(--ink, #0f1e38);
    --belge-odak: var(--accent, #1D9E75);
    --belge-hata: var(--live-red, #ef4444);
    --belge-sayfa-golge: 0 0 20px rgba(6, 13, 26, .08), 0 0 0 1px rgba(6, 13, 26, .04);

    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--belge-arac-zemin);
    border: 1px solid var(--belge-kenar);
    border-radius: 6px;
    overflow: hidden;
    text-align: left;
}
.ap-belge-arac {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    padding: 8px 12px;
    background: var(--belge-arac-zemin);
    border-bottom: 1px solid var(--belge-cizgi);
}
.ap-belge-grup {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ap-belge-sag {
    margin-left: auto;
}
.ap-belge-dugme {
    height: 32px;
    min-width: 32px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--belge-metin);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
}
/* Font Awesome'ın JS'i <i>'leri <svg>'ye çevirdiği için ikisi de kapsanır */
.ap-belge-dugme i,
.ap-belge-dugme svg {
    font-size: 13px;
    color: var(--belge-ikon);
    transition: color .14s ease;
}
.ap-belge-dugme:hover:not(:disabled) {
    background: var(--belge-ustunde-zemin);
    color: var(--belge-ustunde-metin);
}
.ap-belge-dugme:hover:not(:disabled) i,
.ap-belge-dugme:hover:not(:disabled) svg {
    color: var(--belge-ustunde-metin);
}
.ap-belge-dugme:disabled {
    opacity: .38;
    cursor: default;
}
.ap-belge-dugme:focus-visible,
.ap-belge-sayfa-no:focus,
.ap-belge-alan:focus-visible {
    outline: 2px solid var(--belge-odak);
    outline-offset: 1px;
}
.ap-belge-sayfa-no {
    width: 44px;
    height: 30px;
    text-align: center;
    border: 1px solid var(--belge-girdi-kenar);
    border-radius: 6px;
    background: var(--belge-girdi-zemin);
    color: var(--belge-girdi-metin);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.ap-belge-toplam,
.ap-belge-oran {
    color: var(--belge-metin);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ap-belge-toplam {
    margin: 0 4px 0 2px;
    color: var(--belge-soluk);
}
.ap-belge-oran {
    min-width: 46px;
    text-align: center;
}
.ap-belge-alan {
    position: relative;
    height: calc(100vh - 300px);
    min-height: 320px;
    overflow: auto;
    padding: 16px;
    background: var(--belge-alan-zemin);
}
.ap-belge-sayfa {
    position: relative;
    margin: 0 auto 16px;
    background: #fff;
    box-shadow: var(--belge-sayfa-golge);
}
.ap-belge-sayfa:last-child {
    margin-bottom: 0;
}
.ap-belge-sayfa canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.ap-belge-sayfa-hatali::after {
    content: "Bu sayfa çizilemedi.";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--belge-soluk);
    font-size: 13px;
}
.ap-belge-durum {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    color: var(--belge-metin);
    font-size: 14px;
}
.ap-belge-durum[hidden] {
    display: none;
}
.ap-belge-durum .spinner-border {
    color: var(--belge-ustunde-metin);
}
.ap-belge-durum-ikon {
    font-size: 34px;
    color: var(--belge-soluk);
}
.ap-belge-durum-hata .ap-belge-durum-ikon {
    color: var(--belge-hata);
}
.ap-belge-durum-metin {
    max-width: 420px;
    line-height: 1.5;
}
.ap-belge-tam-ekran {
    border: 0;
    border-radius: 0;
}
.ap-belge-tam-ekran .ap-belge-alan {
    flex: 1;
    height: auto;
}

/* Pencere: makale ve ortak yazar pencereleriyle aynı görünüm, belge için biraz daha dar kenar boşluğu */
.ap-paper-body.ap-belge-govde {
    padding: 36px 40px 32px 40px;
}
.ap-belge-govde .ap-paper-head {
    margin-bottom: 20px;
    padding-right: 48px;
}

@media (max-width: 575.98px) {
    .ap-paper-body.ap-belge-govde {
        padding: 28px 16px 16px 16px;
    }
    .ap-belge-dugme-metin {
        display: none;
    }
    .ap-belge-arac {
        gap: 6px 10px;
    }
    /* Başlık ve araç çubuğu iki satıra iner; dvh, mobil tarayıcının adres çubuğunu hesaba katar */
    .ap-belge-alan {
        padding: 8px;
        height: calc(100vh - 310px);
        height: calc(100dvh - 310px);
    }
}
