/**
 * assets/css/style.css
 * ---------------------------------------------------------------------------
 * Bootstrap 5 üzerine uygulamaya özgü biçemler.
 * Bootstrap sınıfları ezilmez; yalnızca yeni bileşenler tanımlanır.
 *
 * İçindekiler:
 *   1. Değişkenler ve genel
 *   2. Gezinme çubuğu
 *   3. Ana sayfa (hero) ve arama kutusu
 *   4. Arama önerileri
 *   5. Filtre paneli
 *   6. Sonuç kartları
 *   7. Rozetler ve etiketler
 *   8. Detay sayfası
 *   9. Boş durumlar ve yardımcılar
 *  10. Duyarlı (responsive) düzenlemeler
 *  11. Yazdırma ve erişilebilirlik
 */

/* =========================================================================
   1. DEĞİŞKENLER VE GENEL
   ====================================================================== */
:root {
    --app-bg: #f7f8fa;
    --app-border: #e4e7eb;
    --app-radius: 12px;
    --app-radius-sm: 8px;
    --app-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --app-shadow-lg: 0 8px 24px rgba(16, 24, 40, .10);
    --app-transition: .18s ease;
}

body {
    background-color: var(--app-bg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

main {
    min-height: 60vh;
}

/* Odaklanma halkası: erişilebilirlik için her yerde görünür olmalı */
:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    padding: .5rem 1rem;
    background: #fff;
    border-radius: var(--app-radius-sm);
    box-shadow: var(--app-shadow-lg);
}

mark {
    padding: 0 .1em;
    background-color: #fff3cd;
    border-radius: 2px;
}

.btn-xs {
    padding: .15rem .45rem;
    font-size: .75rem;
    line-height: 1.4;
}

/* =========================================================================
   2. GEZİNME ÇUBUĞU
   ====================================================================== */
.app-navbar {
    box-shadow: var(--app-shadow);
}

.app-navbar .navbar-brand {
    font-size: 1.05rem;
}

.app-navbar .nav-link {
    font-size: .93rem;
    color: #4b5563;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
    color: var(--bs-primary);
}

/* =========================================================================
   3. ANA SAYFA VE ARAMA KUTUSU
   ====================================================================== */
.hero-section {
    padding: 4rem 0 1rem;
}

.hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    color: var(--bs-primary);
    font-size: 1.9rem;
}

.hero-title {
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    font-weight: 600;
    letter-spacing: -.02em;
}

/* ----- Arama kutusu ----- */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    padding: .35rem .35rem .35rem 1rem;
    transition: box-shadow var(--app-transition), border-color var(--app-transition);
}

.search-box:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12);
}

.search-box-icon {
    flex-shrink: 0;
    color: #9ca3af;
    font-size: .95rem;
}

.search-box .search-input {
    border: 0;
    box-shadow: none;
    background: transparent;
    font-size: 1.02rem;
    padding: .55rem .75rem;
}

.search-box .search-input:focus {
    box-shadow: none;
}

/* Tarayıcının kendi temizleme düğmesini gizle (kendi düğmemiz var) */
.search-box .search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-clear {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: #9ca3af;
    padding: .25rem .5rem;
    font-size: .9rem;
    cursor: pointer;
    transition: color var(--app-transition);
}

.search-clear:hover {
    color: #4b5563;
}

.search-submit {
    flex-shrink: 0;
    border-radius: 999px;
    padding: .5rem 1.4rem;
    font-weight: 500;
}

/* Sonuç sayfasındaki daha küçük arama kutusu */
.search-box-sm {
    padding: .15rem .15rem .15rem .9rem;
}

.search-box-sm .search-input {
    font-size: .95rem;
    padding: .45rem .6rem;
}

/* =========================================================================
   4. ARAMA ÖNERİLERİ
   ====================================================================== */
.suggestions {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 340px;
    overflow-y: auto;
    margin: 0;
    padding: .35rem;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-lg);
}

.suggestion-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .5rem .75rem;
    border-radius: var(--app-radius-sm);
    cursor: pointer;
    transition: background-color var(--app-transition);
}

.suggestion-item:hover,
.suggestion-item.is-active {
    background-color: #f3f4f6;
}

.suggestion-text {
    font-size: .92rem;
    color: #111827;
    line-height: 1.35;
}

.suggestion-hint {
    font-size: .78rem;
    color: #6b7280;
}

.suggestion-empty {
    padding: .75rem;
    font-size: .88rem;
    color: #6b7280;
    text-align: center;
}

/* ----- Son aramalar ----- */
.recent-badge {
    background-color: #fff;
    border: 1px solid var(--app-border);
    color: #4b5563;
    font-weight: 400;
    font-size: .82rem;
    padding: .45rem .8rem;
    transition: all var(--app-transition);
}

.recent-badge:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* ----- Özellik kartları ----- */
.feature-card {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1.5rem;
    transition: box-shadow var(--app-transition), transform var(--app-transition);
}

.feature-card:hover {
    box-shadow: var(--app-shadow-lg);
    transform: translateY(-2px);
}

.feature-icon {
    font-size: 1.5rem;
    color: var(--bs-primary);
}

/* =========================================================================
   5. FİLTRE PANELİ
   ====================================================================== */
.filter-panel {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1.15rem;
}

.filter-group {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #f1f3f5;
}

.filter-group:last-of-type {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.filter-title {
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6b7280;
    margin-bottom: .6rem;
}

.filter-check {
    margin-bottom: .3rem;
}

.filter-check .form-check-label {
    font-size: .88rem;
    color: #374151;
    cursor: pointer;
}

.filter-check .form-check-input:disabled + .form-check-label {
    opacity: .55;
    cursor: not-allowed;
}

/* Kaynak rengini gösteren küçük nokta */
.source-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--source-color, #6c757d);
    flex-shrink: 0;
}

/* =========================================================================
   6. SONUÇ KARTLARI
   ====================================================================== */
.results-searchbar {
    box-shadow: var(--app-shadow);
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.result-card {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1.15rem 1.25rem;
    transition: box-shadow var(--app-transition), border-color var(--app-transition);
}

.result-card:hover {
    border-color: #cbd5e1;
    box-shadow: var(--app-shadow);
}

.result-title {
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: .4rem;
}

.result-title a {
    color: #1a4fa0;
}

.result-title a:hover {
    color: #0d3880;
    text-decoration: underline !important;
}

.result-meta {
    color: #4b5563;
    line-height: 1.6;
}

.result-meta .meta-separator {
    color: #d1d5db;
    margin: 0 .25rem;
}

.result-abstract {
    line-height: 1.6;
}

.result-doi {
    word-break: break-all;
}

.result-actions .btn {
    font-size: .82rem;
}

/* =========================================================================
   7. ROZETLER VE ETİKETLER
   ====================================================================== */
.source-badge {
    background-color: color-mix(in srgb, var(--source-color, #6c757d) 12%, white);
    color: color-mix(in srgb, var(--source-color, #6c757d) 80%, black);
    border: 1px solid color-mix(in srgb, var(--source-color, #6c757d) 25%, white);
    font-weight: 500;
    font-size: .74rem;
}

/* color-mix desteklemeyen tarayıcılar için yedek */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .source-badge {
        background-color: #f3f4f6;
        color: #374151;
        border-color: var(--app-border);
    }
}

.oa-badge {
    font-size: .74rem;
    font-weight: 500;
}

.oa-gold   { background-color: #fff4d6; color: #8a6100; border: 1px solid #ffe5a3; }
.oa-green  { background-color: #e3f5e9; color: #14713a; border: 1px solid #bfe6cd; }
.oa-hybrid { background-color: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }
.oa-bronze { background-color: #f5ece4; color: #8a5a2b; border: 1px solid #e8d8c6; }

.keyword-chip {
    display: inline-block;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 999px;
    padding: .18rem .65rem;
    font-size: .76rem;
    margin: .1rem .15rem .1rem 0;
    transition: all var(--app-transition);
}

.keyword-chip:hover {
    background: #e0e7ff;
    color: #3730a3;
}

.footer-sources a:hover {
    color: var(--bs-primary) !important;
}

/* =========================================================================
   8. DETAY SAYFASI
   ====================================================================== */
.detail-card {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1.75rem;
}

.detail-title {
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.detail-authors {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .6rem;
}

.author-chip {
    display: inline-flex;
    align-items: center;
    font-size: .9rem;
    color: #374151;
}

.author-chip:not(:last-child)::after {
    content: "·";
    margin-left: .6rem;
    color: #d1d5db;
}

.orcid-link {
    color: #a6ce39;
    font-size: .85rem;
}

.detail-abstract {
    line-height: 1.75;
    color: #374151;
    text-align: justify;
}

.detail-sidebar {
    position: sticky;
    top: 5rem;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1.25rem;
}

.detail-meta dt {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #9ca3af;
    margin-top: .85rem;
}

.detail-meta dt:first-child {
    margin-top: 0;
}

.detail-meta dd {
    font-size: .9rem;
    color: #1f2937;
    margin-bottom: 0;
    word-break: break-word;
}

.citation-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .85rem;
    line-height: 1.65;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    color: #1f2937;
    margin: 0;
}

.citation-output {
    font-size: .85rem;
    line-height: 1.6;
    background-color: #f9fafb;
    resize: vertical;
}

.citation-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .75);
    border-radius: var(--app-radius-sm);
}

/* =========================================================================
   9. BOŞ DURUMLAR
   ====================================================================== */
.empty-state {
    background: #fff;
    border: 1px dashed var(--app-border);
    border-radius: var(--app-radius);
}

.empty-icon {
    font-size: 2.5rem;
    color: #cbd5e1;
}

/* Yükleniyor göstergesi */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(247, 248, 250, .8);
    backdrop-filter: blur(2px);
}

/* =========================================================================
   10. DUYARLI DÜZENLEMELER
   ====================================================================== */
@media (max-width: 991.98px) {
    .filter-panel,
    .detail-sidebar {
        position: static;
        max-height: none;
    }
}

@media (max-width: 767.98px) {
    .hero-section {
        padding: 2.5rem 0 .5rem;
    }

    .hero-icon {
        width: 58px;
        height: 58px;
        font-size: 1.5rem;
    }

    .search-box {
        padding: .3rem .3rem .3rem .85rem;
    }

    .search-submit {
        padding: .5rem .85rem;
    }

    .result-card,
    .detail-card {
        padding: 1rem;
    }

    .result-title {
        font-size: 1rem;
    }

    .detail-abstract {
        text-align: left;
    }

    /* Uzun düğme dizilerinin taşmasını engelle */
    .result-actions {
        overflow-x: auto;
        padding-bottom: .2rem;
    }
}

/* =========================================================================
   11. YAZDIRMA VE ERİŞİLEBİLİRLİK
   ====================================================================== */
@media print {
    .app-navbar,
    .app-footer,
    .filter-panel,
    .results-searchbar,
    .result-actions,
    .pagination,
    .modal,
    .toast-container {
        display: none !important;
    }

    .result-card,
    .detail-card,
    .detail-sidebar {
        border: 0;
        box-shadow: none;
        break-inside: avoid;
    }

    body {
        background: #fff;
    }
}

/* Hareket azaltma tercihine saygı göster */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================================
   12. GELİŞMİŞ ARAMA PANELİ
   ====================================================================== */
.advanced-toggle {
    color: #4b5563;
    font-size: .88rem;
}

.advanced-toggle:hover {
    color: var(--bs-primary);
}

/* Panel açıkken ok işaretini çevir */
.advanced-toggle[aria-expanded="true"] .advanced-chevron {
    transform: rotate(180deg);
}

.advanced-chevron {
    display: inline-block;
    transition: transform var(--app-transition);
    font-size: .7rem;
}

.advanced-panel {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1.1rem;
    text-align: left;
}

.advanced-hint-toggle {
    cursor: pointer;
    list-style: none;
}

.advanced-hint-toggle::-webkit-details-marker {
    display: none;
}

.advanced-hint-toggle::before {
    content: "\f05a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: .35rem;
}

.advanced-panel code {
    background: #f3f4f6;
    color: #1f2937;
    padding: .05rem .3rem;
    border-radius: 4px;
    font-size: .85em;
}

/* Ana sayfada panel ortalanmış arama kutusuyla hizalı dursun */
.page-home .advanced-search {
    text-align: center;
}

.page-home .advanced-panel {
    text-align: left;
}

/* Söz dizimi yardım tablosu */
.syntax-table td {
    vertical-align: top;
    padding: .3rem .5rem;
}

.syntax-table tr:first-child td {
    border-top: 0;
}