/* OCR Kontrol · Görsel dil Ölçme 360 tasarım sisteminden alınmıştır. Simge ve emoji kullanılmaz. */

:root {
    --lacivert: #2c3e50;
    --lacivert-2: #34495e;
    --lacivert-3: #243342;
    --zemin: #ecf0f1;
    --kart: #ffffff;
    --mavi: #2980b9;
    --mavi-acik: #3498db;
    --mavi-koyu: #1a5276;
    --mavi-zemin: #eaf2f8;
    --yesil: #27ae60;
    --yesil-koyu: #1e8449;
    --yesil-zemin: #e9f7ef;
    --kirmizi: #c0392b;
    --kirmizi-zemin: #fdedec;
    --turuncu: #d68910;
    --turuncu-zemin: #fef5e7;
    --gri: #7f8c8d;
    --gri-acik: #bdc3c7;
    --cizgi: #dfe4e8;
    --cizgi-koyu: #cfd6db;
    --metin: #2c3e50;
    --metin-2: #5d6d7e;
    --metin-3: #8795a1;
    --zebra: #f9f9f9;
    --vurgu-zemin: #f4f7f9;

    --yaricap: 10px;
    --yaricap-k: 6px;
    --golge: 0 4px 6px rgba(0, 0, 0, 0.1);
    --ust-yukseklik: 64px;
    --font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Öğrenci metni: ı i l I 1 ayrımı net, boşluklar görünür genişlikte */
    --font-aktarim: 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--metin);
    background-color: var(--zemin);
}
h1, h2, h3 { margin: 0; line-height: 1.3; color: var(--lacivert); }
p { margin: 0 0 10px; }
a { color: var(--mavi); text-decoration: none; }
a:hover { color: var(--mavi-koyu); }
code { font-family: var(--font-aktarim); font-size: 13px; background: var(--vurgu-zemin); padding: 1px 5px; border-radius: 4px; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
[hidden] { display: none !important; }
.satir-ici { display: inline; margin: 0; }

/* ---------------------------------------------------------------
   Üst şerit
   --------------------------------------------------------------- */
.ust-serit {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: var(--ust-yukseklik);
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 10px 24px;
    background: var(--lacivert);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.marka {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    padding-right: 22px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    white-space: nowrap;
}
.marka:hover { color: #fff; }
.ust-baslik { flex: 1; min-width: 0; }
.ust-baslik h1 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ekmek { font-size: 12.5px; color: #aed6f1; display: flex; flex-wrap: wrap; gap: 6px; }
.ekmek a { color: #aed6f1; }
.ekmek a:hover { color: #fff; }
.ekmek-ayrac { opacity: 0.6; }
.ust-sag { display: flex; align-items: center; gap: 14px; }
.ust-baglanti { color: #d6e4ee; font-size: 14px; font-weight: 600; }
.ust-baglanti:hover { color: #fff; }
.ust-kullanici { color: #c8d3dc; font-size: 13.5px; white-space: nowrap; }
.gezinti { display: flex; gap: 6px; padding-right: 8px; border-right: 1px solid rgba(255, 255, 255, 0.18); }

.icerik { padding: 22px 24px; max-width: 1400px; margin: 0 auto; }

/* ---------------------------------------------------------------
   Kart, düğme, form
   --------------------------------------------------------------- */
.kart {
    background: var(--kart);
    border-radius: var(--yaricap);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--golge);
    min-width: 0;
}
.kart-dar { max-width: 640px; }
.kart-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.kart-baslik { font-size: 19px; font-weight: 700; color: var(--lacivert); }
.aciklama { color: var(--metin-2); font-size: 14px; }

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    min-height: 38px;
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yaricap-k);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    background: var(--vurgu-zemin);
    color: var(--lacivert);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dugme:hover { background: #e7edf1; color: var(--lacivert); }
.dugme:focus-visible { outline: 2px solid var(--mavi-acik); outline-offset: 2px; }
.dugme-koyu { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }
.dugme-koyu:hover { background: var(--lacivert-3); border-color: var(--lacivert-3); color: #fff; }
.dugme-basari { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.dugme-basari:hover { background: var(--yesil-koyu); border-color: var(--yesil-koyu); color: #fff; }
.dugme-cerceve { background: #fff; border-color: var(--cizgi-koyu); color: var(--lacivert); }
.dugme-cerceve:hover { background: var(--vurgu-zemin); }
.dugme-sade { background: transparent; border-color: transparent; color: var(--mavi); padding-left: 8px; padding-right: 8px; }
.dugme-sade:hover { background: var(--mavi-zemin); color: var(--mavi-koyu); }
.dugme-kucuk { padding: 5px 11px; min-height: 30px; font-size: 13px; }
.dugme-tam { width: 100%; }
.dugme-ust {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    padding: 6px 12px;
    min-height: 32px;
    font-size: 13px;
}
.dugme-ust:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.dugme[disabled] { opacity: 0.6; cursor: wait; }
.dugme-satiri { display: flex; gap: 6px; flex-wrap: wrap; }

.alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.alan > label, .alan-etiket { font-size: 13.5px; font-weight: 600; color: var(--lacivert); }
.alan-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.alan-ust label { font-size: 13.5px; font-weight: 600; color: var(--lacivert); }
.alan-ipucu { font-size: 12.5px; color: var(--metin-3); }
.girdi, .secim, .metin-alani {
    width: 100%;
    padding: 9px 12px;
    min-height: 40px;
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yaricap-k);
    background: #fff;
    color: var(--metin);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.metin-alani { resize: vertical; line-height: 1.55; }
.girdi:focus, .secim:focus, .metin-alani:focus {
    outline: none;
    border-color: var(--mavi-acik);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.18);
}
.secenek { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.form-dikey { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.form-dikey .alan { width: 100%; }

.uyari { padding: 10px 14px; border-radius: var(--yaricap-k); font-size: 14px; margin-bottom: 14px; }
.uyari-hata { background: var(--kirmizi-zemin); color: var(--kirmizi); border: 1px solid #f1c8c3; }
.uyari-turuncu { background: var(--turuncu-zemin); color: #8a5a06; border: 1px solid #f5d9a8; }

/* ---------------------------------------------------------------
   Tablo, rozet, özet
   --------------------------------------------------------------- */
.tablo-sarmal { width: 100%; overflow-x: auto; border-radius: var(--yaricap-k); }
.tablo { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; }
.tablo th, .tablo td { border: 1px solid #d9dee2; padding: 11px 14px; text-align: left; vertical-align: middle; }
.tablo th { background: var(--lacivert); color: #ecf0f1; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.tablo tbody tr:nth-child(even) { background: var(--zebra); }
.tablo tbody tr:hover { background: #f1f5f8; }
.tablo td.sayi, .tablo th.sayi { text-align: right; font-variant-numeric: tabular-nums; }
.tablo .eylem-hucre { white-space: nowrap; text-align: right; }
.tablo-sik th, .tablo-sik td { padding: 8px 10px; }
.tablo a.tablo-baglanti { font-weight: 600; color: var(--lacivert); }
.tablo a.tablo-baglanti:hover { color: var(--mavi); }
.tablo tr.vurgulu { background: var(--turuncu-zemin) !important; }
.tablo tr.ara-baslik td { background: var(--vurgu-zemin); font-weight: 700; color: var(--lacivert); font-size: 13px; letter-spacing: 0.04em; }
.tablo td .rozet { margin-left: 6px; }

.rozet {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    background: var(--gri);
}
.rozet-cerceve { background: #fff; color: var(--metin-2); border: 1px solid var(--cizgi-koyu); }
.rozet-yesil { background: var(--yesil); }
.rozet-turuncu { background: var(--turuncu); }

.ilerleme-hucre { min-width: 200px; }
.ilerleme { display: inline-block; vertical-align: middle; width: 120px; height: 8px; background: var(--cizgi); border-radius: 4px; overflow: hidden; }
.ilerleme-dolu { height: 100%; background: var(--yesil); }
.ilerleme-yazi { margin-left: 10px; font-size: 13px; color: var(--metin-2); font-variant-numeric: tabular-nums; }

.ozet-satiri { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; margin-bottom: 22px; }
.ozet-kutu {
    background: #fff;
    border-radius: var(--yaricap);
    box-shadow: var(--golge);
    padding: 14px 20px;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    border-top: 3px solid var(--lacivert);
}
.ozet-sayi { font-size: 26px; font-weight: 700; color: var(--lacivert); font-variant-numeric: tabular-nums; line-height: 1.2; }
.ozet-ad { font-size: 13px; color: var(--metin-2); }
.ozet-dugme { margin-left: auto; align-self: center; }

/* ---------------------------------------------------------------
   Giriş
   --------------------------------------------------------------- */
.giris-govde { min-height: 100vh; display: flex; flex-direction: column; }
.giris-sarmal { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.giris-kart { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 28px; }
.giris-kart .aciklama { margin: -8px 0 0; }

/* ---------------------------------------------------------------
   Kontrol ekranı: solda PDF, sağda metin
   --------------------------------------------------------------- */
.kontrol-govde { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.kontrol-govde .icerik { flex: 1; min-height: 0; max-width: none; margin: 0; padding: 0; }

.bolme {
    --sol-oran: 52%;
    height: 100%;
    display: grid;
    grid-template-columns: var(--sol-oran) 8px minmax(0, 1fr);
}
.bolme.suruklen { user-select: none; }
.bolme.suruklen .pdf-cerceve { pointer-events: none; }
.bolme-sol { min-width: 0; background: #525659; display: flex; }
.pdf-cerceve { flex: 1; width: 100%; height: 100%; border: 0; display: block; }
.bos-durum { margin: auto; color: #e5e8ea; font-size: 14px; padding: 20px; text-align: center; }
.bolme-tutamac {
    cursor: col-resize;
    background: var(--cizgi-koyu);
    border-left: 1px solid #b9c2c9;
    border-right: 1px solid #b9c2c9;
    position: relative;
}
.bolme-tutamac::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    width: 2px;
    height: 36px;
    margin-top: -18px;
    border-left: 1px solid var(--metin-3);
    border-right: 1px solid var(--metin-3);
}
.bolme-tutamac:hover, .bolme-tutamac:focus-visible { background: var(--mavi-acik); outline: none; }
.bolme-sag { min-width: 0; overflow-y: auto; background: var(--zemin); }

.kontrol-form { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 22px; }
.bilgi-cubugu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cizgi-koyu);
}
.bilgi-sol { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.essay-kodu { font-weight: 700; font-size: 17px; color: var(--lacivert); font-variant-numeric: tabular-nums; }
.bilgi-konu { color: var(--metin-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bilgi-sag { display: flex; align-items: center; gap: 12px; }
.kayit-gostergesi { font-size: 13px; color: var(--metin-3); }
.kayit-gostergesi.kirli { color: var(--turuncu); font-weight: 600; }
.kayit-gostergesi.tamam { color: var(--yesil-koyu); font-weight: 600; }
.kayit-gostergesi.hata { color: var(--kirmizi); font-weight: 600; }

.metin-ogrenci {
    font-family: var(--font-aktarim);
    font-size: 15.5px;
    line-height: 1.7;
    min-height: 46vh;
    padding: 14px 16px;
    white-space: pre-wrap;
    tab-size: 4;
}
.form-izgara-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-izgara-dar { grid-template-columns: 140px 1fr; }
.kontrol-form textarea:not(.metin-ogrenci) { font-size: 14px; }
.form-alt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--cizgi-koyu);
}
.form-alt-sol, .form-alt-sag { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kisayollar { font-size: 12.5px; color: var(--metin-3); margin: 0; }

@media (max-width: 1100px) {
    .form-izgara-iki { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .kontrol-govde { height: auto; overflow: visible; }
    .bolme { grid-template-columns: 1fr; height: auto; }
    .bolme-sol { height: 70vh; }
    .bolme-tutamac { display: none; }
    .ust-serit { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------
   Fark görünümü
   --------------------------------------------------------------- */
.fark-blok { border: 1px solid var(--cizgi); border-radius: var(--yaricap-k); margin-bottom: 14px; overflow: hidden; }
.fark-ust { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; background: var(--vurgu-zemin); border-bottom: 1px solid var(--cizgi); }
.fark-baslik { font-weight: 700; color: var(--lacivert); font-size: 14px; }
.fark-metin { padding: 14px 16px; font-family: var(--font-aktarim); font-size: 14.5px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.fark-metin del { background: var(--kirmizi-zemin); color: var(--kirmizi); text-decoration: line-through; text-decoration-thickness: 1px; }
.fark-metin ins { background: var(--yesil-zemin); color: var(--yesil-koyu); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------
   Kâğıt görüntüleyici (PDF.js)
   --------------------------------------------------------------- */
.pdf-gorunum { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #525659; }
.pdf-arac {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--lacivert-3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    color: #d6e4ee;
    font-size: 13px;
}
.pdf-dugme {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: var(--yaricap-k);
    padding: 4px 10px;
    min-height: 28px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.pdf-dugme:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.pdf-dugme:focus-visible { outline: 2px solid var(--mavi-acik); outline-offset: 1px; }
a.pdf-dugme { display: inline-flex; align-items: center; }
.pdf-olcek { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.pdf-bilgi { margin-left: 8px; color: #aab7c1; }
.pdf-sag { margin-left: auto; }
.pdf-sayfalar { flex: 1; min-height: 0; overflow: auto; padding: 14px; outline: none; }
.pdf-sayfa { display: block; margin: 0 auto 14px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.pdf-durum { color: #e5e8ea; font-size: 14px; text-align: center; padding: 40px 20px; }
.pdf-hata { color: #f5b7b1; }

/* OCR sonucu olmayan kâğıtlar ve konular */
.tablo tr.ocr-yok td { color: var(--metin-3); }
.soluk { color: var(--metin-3); font-style: italic; }

/* Seviye sekmeleri */
.seviye-sekmeleri { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.seviye-sekme {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--yaricap-k);
    box-shadow: var(--golge-hafif, 0 1px 3px rgba(0, 0, 0, 0.08));
    padding: 8px 14px;
    border-left: 3px solid var(--lacivert);
    color: var(--metin);
}
.seviye-sekme:hover { background: var(--vurgu-zemin); color: var(--metin); }
.seviye-ad { font-weight: 700; color: var(--lacivert); }
.seviye-bilgi { font-size: 12.5px; color: var(--metin-2); }
.kart[id^="seviye-"] { scroll-margin-top: calc(var(--ust-yukseklik) + 12px); }

/* Giriş seçimi: uzman ve yönetici ayrı */
.giris-kartlari { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 22px; }
.giris-secim {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 26px;
    color: var(--metin);
    border-top: 4px solid var(--lacivert);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.giris-secim:hover { color: var(--metin); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14); transform: translateY(-1px); }
.giris-secim.giris-admin, .giris-kart.giris-admin { border-top-color: var(--gri); }
.giris-kart { border-top: 4px solid var(--lacivert); }
.giris-secim-baslik { font-size: 19px; font-weight: 700; color: var(--lacivert); }
.giris-secim-aciklama { font-size: 14px; color: var(--metin-2); flex: 1; }
.giris-diger { font-size: 13.5px; text-align: center; }
@media (max-width: 760px) { .giris-kartlari { grid-template-columns: 1fr; } }