/* Belge Arşivi ekranı. Çek Yönetimi panelindeki görsel dille aynı hizada tutuldu. */

.arsiv-shell {
    --arsiv-kenar: #e3e6ec;
    --arsiv-metin: #1d2432;
    --arsiv-soluk: #6b7383;
    --arsiv-vurgu: #2f6fdb;
    --arsiv-basari: #1f7a3d;
    --arsiv-hata: #a32020;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 20px 40px;
    color: var(--arsiv-metin);
    font-size: 14px;
}

.arsiv-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.arsiv-header .eyebrow {
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--arsiv-soluk);
    font-weight: 600;
}

.arsiv-header h1 { margin: 4px 0 6px; font-size: 22px; font-weight: 650; }
.arsiv-header p { margin: 0; color: var(--arsiv-soluk); }

/* --- düğmeler --- */
.primary-button,
.ghost-button,
.danger-button {
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.primary-button { background: var(--arsiv-vurgu); color: #fff; }
.primary-button:hover:not(:disabled) { background: #2559b4; }
.ghost-button { background: #fff; border-color: var(--arsiv-kenar); color: var(--arsiv-metin); }
.ghost-button:hover:not(:disabled) { background: #f3f5f9; }
.danger-button { background: #fff; border-color: #e6c2c2; color: var(--arsiv-hata); }
.danger-button:hover:not(:disabled) { background: #fdf2f2; }
.primary-button.small, .ghost-button.small, .danger-button.small { padding: 6px 11px; font-size: 12px; }
.primary-button:disabled, .ghost-button:disabled, .danger-button:disabled { opacity: .5; cursor: default; }

.link-button {
    background: none;
    border: none;
    color: var(--arsiv-vurgu);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 2px;
}

.link-button:hover { text-decoration: underline; }

/* --- mesajlar --- */
.arsiv-message {
    padding: 11px 15px;
    border-radius: 9px;
    border: 1px solid var(--arsiv-kenar);
    background: #fff;
}

.arsiv-message.success { border-color: #bfe2c8; background: #f2fbf5; color: var(--arsiv-basari); }
.arsiv-message.error { border-color: #eec7c7; background: #fdf3f3; color: var(--arsiv-hata); }

.onay-kutusu {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    padding: 14px 16px; border-radius: 10px; border: 1px solid #f0dcc0; background: #fffaf3;
}

.onay-kutusu p { margin: 4px 0 0; color: var(--arsiv-soluk); max-width: 60ch; }
.onay-dugmeleri { display: flex; gap: 8px; }

/* --- kartlar --- */
.yukleme-karti {
    background: #fff;
    border: 1px solid var(--arsiv-kenar);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* --- dosya bırakma --- */
.birakma-alani {
    position: relative;
    display: block;
    border: 1.5px dashed #c6cddb;
    border-radius: 10px;
    padding: 26px 18px;
    text-align: center;
    cursor: pointer;
    background: #fbfcfe;
}

.birakma-alani.dolu { border-color: var(--arsiv-vurgu); background: #f5f8ff; }
.birakma-alani:hover { background: #f3f6fb; }

.birakma-alani input[type=file] {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}

.birakma-icerik { display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.birakma-icerik span { color: var(--arsiv-soluk); font-size: 12.5px; }

/* --- form alanları --- */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.field-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--arsiv-soluk); }
.field-grid label.wide { grid-column: 1 / -1; }

.field-grid input,
.arama-satiri input,
.modal-alan input {
    border: 1px solid var(--arsiv-kenar);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 13.5px;
    color: var(--arsiv-metin);
    background: #fff;
}

.field-grid input:focus,
.arama-satiri input:focus,
.modal-alan input:focus { outline: 2px solid #cfdefa; border-color: var(--arsiv-vurgu); }

/* --- etiketler --- */
.etiket-onerileri,
.kart-etiketleri { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.onerileri-baslik { font-size: 12.5px; color: var(--arsiv-soluk); }

.etiket-cipi {
    border: 1px solid var(--arsiv-kenar);
    background: #f6f8fb;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--arsiv-metin);
    display: inline-flex; align-items: center; gap: 6px;
}

.etiket-cipi:hover { border-color: var(--arsiv-vurgu); color: var(--arsiv-vurgu); }
.etiket-cipi span { color: var(--arsiv-soluk); font-size: 11.5px; }
.etiket-cipi.secili { background: #eaf1fe; border-color: #b9d0f7; color: var(--arsiv-vurgu); }
.etiket-cipi.mini { padding: 2px 9px; font-size: 11.5px; }

.yukleme-aksiyon { display: flex; align-items: center; gap: 14px; }

.sonuc-listesi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }

.sonuc-listesi li {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 8px 11px; border-radius: 8px; font-size: 12.5px;
}

.sonuc-listesi li.ok { background: #f2fbf5; color: var(--arsiv-basari); }
.sonuc-listesi li.hata { background: #fdf3f3; color: var(--arsiv-hata); }

/* --- arama --- */
.arama-satiri { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.arama-kutusu { flex: 1 1 280px; min-width: 220px; }

/* --- sonuçlar --- */
.sonuc-basligi { display: flex; align-items: baseline; gap: 10px; padding: 0 2px; }
.sonuc-basligi span { color: var(--arsiv-soluk); font-size: 12.5px; }

.belge-izgarasi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 10px;
}

.belge-karti {
    background: #fff;
    border: 1px solid var(--arsiv-kenar);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.belge-karti[style*="--durum-renk"] { border-left: 5px solid var(--durum-renk); }
.belge-karti.toplu-secili { outline: 3px solid rgba(49, 104, 196, .3); border-color: var(--arsiv-vurgu); }

.belge-secim-kutusu {
    position: absolute;
    z-index: 4;
    top: 9px;
    left: 9px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.belge-secim-kutusu input { width: 17px; height: 17px; cursor: pointer; }

.sayfa-secimi { display: flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.sayfa-secimi input { width: 16px; height: 16px; }
.toplu-durum-cubugu {
    position: sticky;
    top: 8px;
    z-index: 20;
    margin: 10px 0 14px;
    padding: 10px 12px;
    border: 1px solid #b9d0f7;
    border-radius: 11px;
    background: #f4f8ff;
    box-shadow: 0 5px 16px rgba(28, 62, 116, .12);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.toplu-durum-cubugu select { min-width: 230px; }

.durum-cipi {
    width: fit-content;
    max-width: 100%;
    border: 1px solid color-mix(in srgb, var(--durum-renk) 42%, white);
    border-radius: 999px;
    background: color-mix(in srgb, var(--durum-renk) 11%, white);
    color: color-mix(in srgb, var(--durum-renk) 82%, #111827);
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.25;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.durum-cipi span { margin-left: 4px; }
.durum-noktasi { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.durum-noktasi.bos { background: transparent; border: 1.5px solid #94a3b8; }
.durum-noktasi.buyuk { width: 14px; height: 14px; }
.durum-secici { display: flex; flex-wrap: wrap; gap: 7px; }
.durum-secim-dugmesi {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--durum-renk, #94a3b8) 38%, white);
    border-radius: 9px;
    background: color-mix(in srgb, var(--durum-renk, #94a3b8) 8%, white);
    color: #334155;
    font-size: 12px;
    cursor: pointer;
}
.durum-secim-dugmesi:hover { border-color: var(--durum-renk, #64748b); }
.durum-secim-dugmesi.secili {
    border-color: var(--durum-renk, var(--arsiv-vurgu));
    background: color-mix(in srgb, var(--durum-renk, var(--arsiv-vurgu)) 16%, white);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--durum-renk, var(--arsiv-vurgu)) 18%, transparent);
    font-weight: 650;
}
.durum-secim-dugmesi.bos { background: #fff; }
.durum-secici.kompakt { flex: 1; min-width: 260px; }
.durum-secici.kompakt .durum-secim-dugmesi { min-height: 30px; padding: 4px 8px; }
.durum-alani-inline { display: flex; flex-direction: column; gap: 7px; }
.durum-listesi { max-height: 210px; flex: none; }
.durum-listesi button { justify-content: flex-start; }
.durum-listesi .adet { margin-left: auto; }
.panel-ayirici { height: 1px; background: var(--arsiv-kenar); margin: 12px 0; }

.durum-formu {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) 90px 90px minmax(150px, 1fr) auto;
    gap: 10px;
    align-items: end;
}
.durum-formu label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--arsiv-soluk); }
.durum-formu input[type="color"] { width: 100%; min-height: 38px; padding: 3px; }
.durum-aktif-secimi { flex-direction: row !important; align-items: center; min-height: 38px; }
.durum-form-aksiyon { display: flex; align-items: center; gap: 6px; min-height: 38px; }
.durum-yonetim-listesi .pasif { opacity: .62; }
.pasif-rozeti { font-size: 10.5px; color: var(--arsiv-soluk); background: #eef1f5; border-radius: 999px; padding: 2px 7px; }

@media (max-width: 850px) {
    .durum-formu { grid-template-columns: 1fr 90px; }
    .durum-form-aksiyon { grid-column: 1 / -1; }
}

.onizleme {
    height: 132px;
    background: #f3f5f9;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

.onizleme img { width: 100%; height: 100%; object-fit: cover; }

.uzanti-rozeti {
    font-weight: 700; font-size: 15px; letter-spacing: .06em;
    color: var(--arsiv-soluk);
    background: #fff; border: 1px solid var(--arsiv-kenar);
    border-radius: 8px; padding: 9px 14px;
}

.belge-govde { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }

.belge-govde h3 {
    margin: 0; font-size: 13.5px; font-weight: 650;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.belge-govde .aciklama {
    margin: 0; font-size: 12.5px; color: var(--arsiv-soluk);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.kunye { display: flex; flex-wrap: wrap; gap: 9px; font-size: 11.5px; color: var(--arsiv-soluk); }

.kart-aksiyonlari {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 14px; border-top: 1px solid var(--arsiv-kenar); background: #fbfcfe;
}

.sayfalama { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.sayfalama span { font-size: 12.5px; color: var(--arsiv-soluk); }

.arsiv-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 48px 20px; border: 1px dashed var(--arsiv-kenar); border-radius: 12px;
    background: #fbfcfe; color: var(--arsiv-soluk);
}

.arsiv-empty strong { color: var(--arsiv-metin); }

.loader {
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid #cfd6e2; border-top-color: var(--arsiv-vurgu);
    animation: arsiv-donme .8s linear infinite;
    display: inline-block;
}

@keyframes arsiv-donme { to { transform: rotate(360deg); } }

/* --- modaller --- */
.arsiv-modal-fon {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(19, 24, 35, .48);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}

.arsiv-modal {
    background: #fff; border-radius: 14px; padding: 22px 24px;
    width: min(560px, 100%); max-height: 90vh; overflow: auto;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.arsiv-modal.dar { width: min(430px, 100%); }
.arsiv-modal.genis { width: min(1000px, 100%); height: 90vh; }
.arsiv-modal h2 { margin: 0; font-size: 17px; font-weight: 650; }
.arsiv-modal p { margin: 0; color: var(--arsiv-soluk); line-height: 1.55; }
.modal-baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-alan { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--arsiv-soluk); }
.modal-aksiyon { display: flex; justify-content: flex-end; gap: 9px; }
.modal-aksiyon.sabit {
    position: sticky;
    bottom: -22px;
    z-index: 5;
    margin: 0 -24px -22px;
    padding: 12px 24px;
    background: #fff;
    border-top: 1px solid var(--arsiv-kenar);
    box-shadow: 0 -5px 14px rgba(15, 23, 42, .06);
}
.durum-alani {
    padding: 12px;
    border: 1px solid #b9d0f7;
    border-radius: 10px;
    background: #f5f8ff;
}

.tam-onizleme {
    flex: 1; width: 100%; min-height: 0;
    border: 1px solid var(--arsiv-kenar); border-radius: 10px;
    background: #f3f5f9; object-fit: contain;
}

/* --- sekmeler --- */
.arsiv-sekmeler { display: flex; gap: 6px; }

.arsiv-sekmeler button {
    border: 1px solid var(--arsiv-kenar);
    background: #fff;
    color: var(--arsiv-soluk);
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 650;
    cursor: pointer;
}

.arsiv-sekmeler button:hover { background: #f3f5f9; color: var(--arsiv-metin); }
.arsiv-sekmeler button.active { background: var(--arsiv-vurgu); border-color: var(--arsiv-vurgu); color: #fff; }

.arsiv-message .ince { color: var(--arsiv-soluk); font-size: 12.5px; }
.arsiv-message { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }

/* --- arama düzeni: solda etiketler, sağda sonuçlar --- */
.arama-duzeni { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; align-items: start; }

.etiket-paneli {
    position: sticky;
    top: 8px;
    background: #fff;
    border: 1px solid var(--arsiv-kenar);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - 150px);
}

.panel-baslik { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.panel-baslik h2 { margin: 0; font-size: 14px; font-weight: 650; }
.panel-bos { margin: 0; color: var(--arsiv-soluk); font-size: 12.5px; }

.panel-not {
    margin: 0;
    padding-top: 9px;
    border-top: 1px solid var(--arsiv-kenar);
    color: var(--arsiv-soluk);
    font-size: 11.5px;
    line-height: 1.45;
}

.etiket-arama {
    border: 1px solid var(--arsiv-kenar);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    width: 100%;
}

.etiket-listesi { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }

.etiket-listesi button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: none;
    background: none;
    border-radius: 7px;
    padding: 6px 9px;
    font-size: 13px;
    color: var(--arsiv-metin);
    cursor: pointer;
    text-align: left;
}

.etiket-listesi button:hover { background: #f3f6fb; }
.etiket-listesi button.secili { background: #eaf1fe; color: var(--arsiv-vurgu); font-weight: 650; }
.etiket-listesi .ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etiket-listesi .adet { color: var(--arsiv-soluk); font-size: 11.5px; flex: none; }
.etiket-listesi button.secili .adet { color: var(--arsiv-vurgu); }

/* --- arama alanı --- */
.arama-alani { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.arama-satiri select {
    border: 1px solid var(--arsiv-kenar);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 13px;
    background: #fff;
    color: var(--arsiv-metin);
}

.gorunum-secici { display: flex; gap: 2px; border: 1px solid var(--arsiv-kenar); border-radius: 8px; padding: 2px; background: #fff; }

.gorunum-secici button {
    border: none;
    background: none;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: var(--arsiv-soluk);
}

.gorunum-secici button.active { background: #eaf1fe; color: var(--arsiv-vurgu); }

.suzgec-satiri { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.dugme-grubu { display: flex; gap: 2px; border: 1px solid var(--arsiv-kenar); border-radius: 9px; padding: 3px; background: #fff; }

.dugme-grubu button {
    border: none;
    background: none;
    border-radius: 7px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--arsiv-soluk);
    cursor: pointer;
    white-space: nowrap;
}

.dugme-grubu button:hover { background: #f3f5f9; color: var(--arsiv-metin); }
.dugme-grubu button.active { background: var(--arsiv-vurgu); color: #fff; }

.tarih-satiri { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.tarih-satiri label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--arsiv-soluk); }

.tarih-satiri input {
    border: 1px solid var(--arsiv-kenar);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
}

.secili-suzgecler { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* --- liste görünümü --- */
.belge-listesi { display: flex; flex-direction: column; gap: 8px; }

.belge-listesi .belge-karti { flex-direction: row; align-items: center; gap: 14px; padding: 10px 14px; }
.belge-listesi .onizleme { width: 52px; height: 52px; border-radius: 9px; flex: none; }
.belge-listesi .uzanti-rozeti { font-size: 10.5px; padding: 5px 7px; }
.belge-listesi .belge-govde { padding: 0; flex: 1; min-width: 0; gap: 4px; }
.belge-listesi .kart-aksiyonlari { border-top: none; background: none; padding: 0; flex: none; }
.belge-listesi .aciklama { -webkit-line-clamp: 1; }

/* --- ayar ekranındaki bağlantı paneli --- */
.baglanti-paneli { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 10px; font-size: 14px; }

.baglanti-satiri {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #e3e6ec;
    background: #fff;
}

.baglanti-satiri.kopuk { background: #fffaf3; border-color: #f0dcc0; }
.baglanti-satiri .nokta { width: 9px; height: 9px; border-radius: 50%; background: #a32020; flex: none; }
.baglanti-satiri.bagli .nokta { background: #1f7a3d; }
.baglanti-metin { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.baglanti-metin span { color: #6b7383; font-size: 12.5px; }
.baglanti-aksiyon { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 900px) {
    .arama-duzeni { grid-template-columns: 1fr; }
    .etiket-paneli { position: static; max-height: 260px; }
}

/* --- çok dosyalı belge --- */
.onizleme { position: relative; }

.dosya-rozeti {
    position: absolute;
    right: 7px;
    bottom: 7px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(19, 24, 35, .78);
    color: #fff;
    font-size: 11px;
    font-weight: 650;
}

.kart-dosyalari { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }

.kart-dosyalari li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    color: var(--arsiv-soluk);
}

.kart-dosyalari .link-button {
    font-size: 11.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}


/* --- tek belge / ayrı belge seçimi --- */
.secim-kutusu { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }

.secim {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--arsiv-kenar);
    border-radius: 10px;
    background: #fbfcfe;
    cursor: pointer;
}

.secim:hover { border-color: var(--arsiv-vurgu); }
.secim input { margin-top: 3px; flex: none; }
.secim div { display: flex; flex-direction: column; gap: 3px; }
.secim strong { font-size: 13.5px; }
.secim span { color: var(--arsiv-soluk); font-size: 12px; line-height: 1.45; }

.birakma-alani.kucuk { padding: 16px 14px; }
.modal-alan .ipucu { color: var(--arsiv-soluk); font-size: 11.5px; }
.link-button.tehlike { color: var(--arsiv-hata); }
.modal-baslik-aksiyon { display: flex; align-items: center; gap: 10px; }
.arsiv-modal .arsiv-empty { padding: 32px 20px; }

/* --- sürükleyerek sıralama --- */
.sira-ipucu {
    margin: 0;
    padding: 9px 12px;
    border-radius: 8px;
    background: #eef3fd;
    color: var(--arsiv-metin);
    font-size: 12.5px;
    line-height: 1.5;
}

.ok-dugmesi {
    flex: none;
    border: 1px solid var(--arsiv-kenar);
    background: #fff;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    line-height: 1;
    font-size: 12px;
    color: var(--arsiv-soluk);
    cursor: pointer;
}

.ok-dugmesi:hover:not(:disabled) { background: #eef3fd; color: var(--arsiv-vurgu); border-color: var(--arsiv-vurgu); }
.ok-dugmesi:disabled { opacity: .35; cursor: default; }


/* --- dosya kartları (yükleme ve düzenleme) --- */
.dosya-izgarasi {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 10px;
}

.dosya-karti {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--arsiv-kenar);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color .12s, opacity .12s, box-shadow .12s;
}

.dosya-karti:hover { border-color: #c3d2ea; }

.kart-onizleme {
    position: relative;
    height: 116px;
    background: #f3f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kart-onizleme[data-tutamac] {
    cursor: grab;
    /* Dokunmatikte sürüklerken sayfa kaymasın. */
    touch-action: none;
}

.kart-onizleme img { width: 100%; height: 100%; object-fit: cover; }

.buyuk-rozet {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--arsiv-soluk);
    background: #fff;
    border: 1px solid var(--arsiv-kenar);
    border-radius: 7px;
    padding: 7px 11px;
}

.sira-rozeti {
    position: absolute;
    top: 6px;
    left: 6px;
    min-width: 21px;
    height: 21px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(19, 24, 35, .72);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* Kapak, sıradaki ilk dosyadır: listede onun görüntüsü çıkar, "Görüntüle" onu açar. */
.sira-rozeti.kapak { background: var(--arsiv-vurgu); }

.kart-bilgi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 0;
    min-width: 0;
}

.kart-bilgi .ad {
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kart-bilgi .boyut { font-size: 11px; color: var(--arsiv-soluk); }

.kart-dugmeler {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    padding: 7px 10px 9px;
    margin-top: auto;
}

.kart-dugmeler .link-button { font-size: 11.5px; }

/* --- sürükleme geri bildirimi --- */

/* Sürükleme boyunca imleç her yerde "tutuyor" olsun ve metin seçimi kazara başlamasın. */
body.arsiv-suruklerken, body.arsiv-suruklerken * { cursor: grabbing !important; user-select: none !important; }

.dosya-izgarasi.suruklume-aktif .dosya-karti:not(.surukleniyor) { opacity: .82; }

/* Kartın ALINDIĞI yer boş bir çerçeve olarak kalır: kullanıcı neyi nereden aldığını görür. */
.dosya-izgarasi .dosya-karti.surukleniyor {
    opacity: 1;
    background: #f2f5fa;
    border-style: dashed;
    border-color: #b9cbe8;
    box-shadow: none;
}

.dosya-izgarasi .dosya-karti.surukleniyor > * { visibility: hidden; }

/* İmleci takip eden kopya. Hafif büyük ve eğik: masadan kaldırılmış gibi durur. */
.surukleme-hayaleti {
    position: fixed;
    z-index: 3000;
    margin: 0;
    list-style: none;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--arsiv-vurgu);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transform: rotate(-2.5deg) scale(1.06);
    box-shadow: 0 18px 42px rgba(19, 24, 35, .34);
    opacity: .96;
}

/* Hayaletin üstünde, bırakılırsa ne olacağı yazar: "2. sıraya" / "Kapak olacak". */
.hayalet-hedef {
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--arsiv-vurgu);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(47, 111, 219, .45);
}

.hayalet-hedef:empty { display: none; }

/* Bırakılacak yer. Üç işaret birden verilir, çünkü tek başına hiçbiri yeterince
   anlaşılmıyordu: kart o yana KAYAR (araya yer açılmış gibi), o kenarında kalın mavi bir
   çizgi belirir ve zemini mavileşir. */
.dosya-izgarasi .dosya-karti.hedef-ust,
.dosya-izgarasi .dosya-karti.hedef-alt {
    border-color: var(--arsiv-vurgu);
    background: #eaf1fe;
    opacity: 1;
    position: relative;
    z-index: 2;
}

/* Kartların yer açma hareketi buradan yönetilir. transform DEĞERİ JavaScript'ten gelir
   (kartlar bırakılınca oluşacak düzene göre kayar); burada yalnız hareketin yumuşaklığı
   tanımlanır. Bu yüzden hedef kartın kendi transform'u YOKTUR — olsaydı yer açma hesabını
   ezerdi. */
.dosya-izgarasi.suruklume-aktif .dosya-karti {
    transition: transform .16s cubic-bezier(.2, .7, .3, 1);
}

.dosya-izgarasi .dosya-karti.hedef-ust {
    box-shadow: inset 7px 0 0 0 var(--arsiv-vurgu), 0 0 0 2px rgba(47, 111, 219, .35);
}

.dosya-izgarasi .dosya-karti.hedef-alt {
    box-shadow: inset -7px 0 0 0 var(--arsiv-vurgu), 0 0 0 2px rgba(47, 111, 219, .35);
}

/* Bırakınca yeni yerindeki kart kısa süre vurgulanır: taşımanın gerçekleştiği görülür. */
.dosya-karti.yerlesti { animation: arsiv-yerlesti .75s ease-out; }

@keyframes arsiv-yerlesti {
    0% { box-shadow: 0 0 0 3px var(--arsiv-vurgu); background: #eaf1fe; }
    100% { box-shadow: 0 0 0 0 rgba(47, 111, 219, 0); background: #fff; }
}

.arsiv-modal.genisce { width: min(720px, 100%); }

/* --- görüntüleyici: belgenin bütün sayfaları tek akışta --- */
.sayfa-akisi {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px;
    background: #eceff4;
    border-radius: 10px;
}

/* Dikey flex kutusunda cocuklar VARSAYILAN OLARAK SIKISIR: taşma olmaz, dolayısıyla
   kaydırma da olmaz ve sayfalar ezilip overflow:hidden ile kırpılır. flex:none bunu keser
   ve akış gerçekten uzar. */
.sayfa-akisi > * { flex: none; }

.sayfa {
    margin: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(19, 24, 35, .12);
    overflow: hidden;
}

/* Sayfa doğal oranında ve tam genişlikte durur. Yüksekliği sınırlamak, uzun bir taramayı
   okunmaz hâle getiriyordu; kullanıcı akışı kaydırarak okur. */
.sayfa img {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
}

.sayfa figcaption {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 7px 12px;
    border-top: 1px solid var(--arsiv-kenar);
    font-size: 11.5px;
    color: var(--arsiv-soluk);
    background: #fbfcfe;
}

.sayfa figcaption .dosya-adi {
    font-weight: 650;
    color: var(--arsiv-metin);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sayfa figcaption .link-button { margin-left: auto; font-size: 11.5px; }

.indirme-karti {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--arsiv-kenar);
}

.indirme-karti div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.indirme-karti strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.indirme-karti span { font-size: 11.5px; color: var(--arsiv-soluk); }

.baslik-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.baslik-metin h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sayfa-bilgisi { font-size: 12px; color: var(--arsiv-soluk); }

/* --- etiket seçici --- */
.etiket-secici { position: relative; display: flex; flex-direction: column; gap: 6px; }

.secilen-etiketler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--arsiv-kenar);
    border-radius: 8px;
    background: #fff;
    min-height: 40px;
}

.secilen-etiketler:focus-within { outline: 2px solid #cfdefa; border-color: var(--arsiv-vurgu); }

.etiket-girisi {
    flex: 1;
    min-width: 160px;
    border: none;
    outline: none;
    padding: 4px 2px;
    font-size: 13.5px;
    color: var(--arsiv-metin);
    background: transparent;
}

.etiket-cipi button {
    border: none;
    background: none;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 2px;
    opacity: .65;
}

.etiket-cipi button:hover { opacity: 1; }

.etiket-onerileri-listesi {
    list-style: none;
    margin: 0;
    padding: 4px;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--arsiv-kenar);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(19, 24, 35, .1);
}

.etiket-onerileri-listesi button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: none;
    background: none;
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--arsiv-metin);
    cursor: pointer;
    text-align: left;
}

.etiket-onerileri-listesi button:hover { background: #eef3fd; color: var(--arsiv-vurgu); }
.etiket-onerileri-listesi .adet { color: var(--arsiv-soluk); font-size: 11.5px; flex: none; }

.yeni-etiket-uyarisi {
    padding: 7px 10px;
    border-radius: 7px;
    background: #fffaf3;
    border: 1px solid #f0dcc0;
    font-size: 12px;
    color: var(--arsiv-metin);
}

/* --- etiket yönetimi --- */
.panel-baslik-aksiyon { display: flex; gap: 10px; align-items: baseline; }

.yonetim-listesi {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 46vh;
    overflow-y: auto;
}

.yonetim-listesi li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-radius: 8px;
    background: #f5f7fa;
}

.yonetim-listesi .ad { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yonetim-listesi .adet { color: var(--arsiv-soluk); font-size: 11.5px; flex: none; }

.yonetim-girisi {
    flex: 1;
    border: 1px solid var(--arsiv-vurgu);
    border-radius: 7px;
    padding: 6px 9px;
    font-size: 13px;
}

/* --- zorunlu alanlar --- */
.field-grid label .zorunlu,
.modal-alan .zorunlu {
    font-style: normal;
    color: var(--arsiv-vurgu);
    font-size: 11.5px;
    font-weight: 650;
}

.eksik-uyarisi {
    padding: 9px 13px;
    border-radius: 8px;
    background: #fffaf3;
    border: 1px solid #f0dcc0;
    color: #8a5a12;
    font-size: 12.5px;
}