/* ==========================================================================
   Gelecek Sensin — yönetim arayüzü teması
   Django admin'in üstüne biner. Değişkenler yeniden tanımlanır, sonra
   bileşenler tek tek elden geçirilir. AÇIK tema — koyu şema kapatılmıştır
   (base_site.html "dark-mode-vars" bloğunu boşaltır).

   Renkler dernek logosundan türetilmiştir; tanıtım sayfasıyla aynı ailedir.
   ========================================================================== */

/* ─────────────────────────── 1. Palet ─────────────────────────── */
html[data-theme="light"],
html[data-theme="dark"],
html[data-theme="auto"],
:root {
    /* marka */
    --kp-mavi:      #4a5baa;
    --kp-mavi-koyu: #3b4a90;
    --kp-mor:       #5b3a8e;
    --kp-pembe:     #d9539b;
    --kp-pembe-koyu:#c0417f;
    --kp-altin:     #f2c94c;

    /* zeminler */
    --kp-sayfa:     #f4f5fa;
    --kp-yuzey:     #ffffff;
    --kp-yuzey-2:   #fafbfe;
    --kp-cizgi:     #e4e7f2;
    --kp-cizgi-2:   #eef0f7;

    /* metin */
    --kp-metin:     #1e2233;
    --kp-metin-2:   #5a6076;
    --kp-metin-3:   #878da3;

    /* durum */
    --kp-yesil:     #1f9d63;
    --kp-yesil-bg:  #e8f7ef;
    --kp-sari:      #b7791f;
    --kp-sari-bg:   #fdf4e0;
    --kp-kirmizi:   #c0392b;
    --kp-kirmizi-bg:#fdecea;

    /* gölge */
    --kp-golge:     0 1px 2px rgba(26,32,64,.04), 0 10px 28px -16px rgba(26,32,64,.20);
    --kp-golge-2:   0 2px 4px rgba(26,32,64,.05), 0 18px 40px -20px rgba(26,32,64,.28);
    --kp-yuvarlak:  12px;

    /* ── Django admin değişkenlerinin yeniden tanımı ── */
    --primary: var(--kp-mor);
    --secondary: var(--kp-mavi);
    --accent: var(--kp-altin);
    --primary-fg: #fff;

    --body-fg: var(--kp-metin);
    --body-bg: var(--kp-sayfa);
    --body-quiet-color: var(--kp-metin-2);
    --body-medium-color: var(--kp-metin-2);
    --body-loud-color: var(--kp-metin);

    --header-color: rgba(255,255,255,.86);
    --header-branding-color: #fff;
    --header-bg: var(--kp-mor);
    --header-link-color: #fff;

    --breadcrumbs-fg: var(--kp-metin-2);
    --breadcrumbs-link-fg: var(--kp-mavi);
    --breadcrumbs-bg: var(--kp-yuzey);

    --link-fg: var(--kp-mavi);
    --link-hover-color: var(--kp-mor);
    --link-selected-fg: var(--kp-mor);

    --hairline-color: var(--kp-cizgi-2);
    --border-color: var(--kp-cizgi);

    --error-fg: var(--kp-kirmizi);

    --message-success-bg: var(--kp-yesil-bg);
    --message-warning-bg: var(--kp-sari-bg);
    --message-error-bg: var(--kp-kirmizi-bg);

    --darkened-bg: var(--kp-yuzey-2);
    --selected-bg: #eef1fb;
    --selected-row: #fff7e6;

    --button-fg: #fff;
    --button-bg: var(--kp-mavi);
    --button-hover-bg: var(--kp-mavi-koyu);
    --default-button-bg: var(--kp-pembe);
    --default-button-hover-bg: var(--kp-pembe-koyu);
    --close-button-bg: #8d93a8;
    --close-button-hover-bg: #6b7186;
    --delete-button-bg: var(--kp-kirmizi);
    --delete-button-hover-bg: #a32d20;

    --object-tools-fg: #fff;
    --object-tools-bg: var(--kp-pembe);
    --object-tools-hover-bg: var(--kp-pembe-koyu);

    --font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;

    color-scheme: light;
}

/* ─────────────────────────── 2. Gövde ─────────────────────────── */
body {
    background: var(--kp-sayfa);
    color: var(--kp-metin);
    -webkit-font-smoothing: antialiased;
    font-size: .875rem;
}

#container { min-width: 0; }

a:link, a:visited { color: var(--kp-mavi); }
a:focus, a:hover  { color: var(--kp-mor); }
a:focus-visible {
    outline: 2px solid var(--kp-mavi);
    outline-offset: 2px;
    border-radius: 3px;
    text-decoration: none;
}

/* ─────────────────────────── 3. Başlık şeridi ─────────────────────────── */
#header {
    position: relative;
    padding: 0 28px;
    min-height: 62px;
    background: linear-gradient(105deg, #4b2f7a 0%, var(--kp-mor) 34%, var(--kp-mavi) 100%);
    color: #fff;
    box-shadow: 0 1px 0 rgba(26,32,64,.06), 0 6px 20px -14px rgba(26,32,64,.55);
    overflow: hidden;
}
/* köşedeki ışık — markanın altın tonu, çok hafif */
#header::after {
    content: "";
    position: absolute;
    inset-inline-end: -80px;
    top: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242,201,76,.20), transparent 62%);
    pointer-events: none;
}
#branding { display: flex; align-items: center; gap: 12px; z-index: 1; }
#branding::before {
    content: "";
    width: 34px; height: 34px;
    flex: none;
    border-radius: 50%;
    background: url("../gorsel/kid-marka-beyaz.93163b05178e.png") center/22px 22px no-repeat,
                rgba(255,255,255,.14);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
#site-name {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 650;
    letter-spacing: -.01em;
    line-height: 1.2;
}
#site-name a:link, #site-name a:visited { color: #fff; }
#site-name a:hover { color: #fff; text-decoration: none; }
/* alt satır: ürünün ne olduğu */
#site-name::after {
    content: "Öğrenci · envanter · rapor yönetimi";
    display: block;
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .02em;
    color: rgba(255,255,255,.62);
    margin-top: 1px;
}

#user-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    float: none;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255,255,255,.78);
    z-index: 1;
}
#user-tools strong { color: #fff; font-weight: 600; }
#user-tools a, #logout-form button {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    transition: background .16s, border-color .16s;
}
#user-tools a:hover, #logout-form button:hover {
    background: rgba(255,255,255,.20);
    border-color: rgba(255,255,255,.42);
    text-decoration: none;
    margin-bottom: 0;
}
#logout-form { display: inline-flex; }
#logout-form button { cursor: pointer; }

/* koyu/açık tema düğmesi gizli — arayüz bilerek tek temalı */
.theme-toggle { display: none !important; }

/* ─────────────────────────── 4. Kırıntı yolu ─────────────────────────── */
div.breadcrumbs {
    padding: 11px 28px;
    background: var(--kp-yuzey);
    border-bottom: 1px solid var(--kp-cizgi);
    color: var(--kp-metin-3);
    font-size: .78125rem;
}
div.breadcrumbs a { color: var(--kp-metin-2); font-weight: 500; }
div.breadcrumbs a:hover { color: var(--kp-mavi); text-decoration: none; }

/* ─────────────────────────── 5. Kenar çubuğu ─────────────────────────── */
#nav-sidebar {
    background: var(--kp-yuzey);
    border-inline-end: 1px solid var(--kp-cizgi);
    padding-top: 6px;
}
#nav-sidebar .module th, #nav-sidebar .module td { padding: 0; }
#nav-sidebar .module caption {
    padding: 16px 18px 7px;
    background: none;
    color: var(--kp-metin-3);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
#nav-sidebar .module caption a,
#nav-sidebar .module caption .section { color: inherit; }
/* GÜVENLİK AĞI — nav_sidebar.css satır 95 grup başlığını var(--header-color)
   (#ffc, krem) yapıyor; beyaz yan çubukta görünmez oluyor. Django'nun seçicisi
   bizimkinden ağır olduğu için AYNI seçici burada tekrarlanıyor: dosya sonra
   yüklendiği için bizimki kazanır. app_list.html başlığı artık bağlantı
   yapmıyor, yani bu kural normalde hiç devreye girmez — Django şablonu
   değişirse başlıklar sessizce kaybolmasın diye duruyor. */
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited { color: var(--kp-metin-3); }
#nav-sidebar a {
    display: block;
    padding: 7px 18px;
    color: var(--kp-metin-2);
    font-size: .8125rem;
    font-weight: 500;
    border-inline-start: 3px solid transparent;
    transition: background .14s, color .14s;
}
#nav-sidebar a:hover { background: var(--kp-yuzey-2); color: var(--kp-mavi); text-decoration: none; }
#nav-sidebar .current-model a,
#nav-sidebar tr.current-model th a {
    background: #f2f0fb;
    border-inline-start-color: var(--kp-pembe);
    color: var(--kp-mor);
    font-weight: 650;
}
/* "Ekle"si olmayan ekranda (Okul durumu, Raporlar, Formları bas) boş hücre Django'nun
   seçili satır rengiyle (krem) kalıyordu; satırın kendisi aynı mor. */
#nav-sidebar tr.current-model { background: #f2f0fb; }
#nav-filter {
    width: calc(100% - 24px);
    margin: 10px 12px;
    padding: 8px 11px;
    border: 1px solid var(--kp-cizgi);
    border-radius: 8px;
    background: var(--kp-yuzey-2);
    font-size: .8125rem;
}
#nav-filter:focus { border-color: var(--kp-mavi); box-shadow: 0 0 0 3px rgba(74,91,170,.15); outline: 0; }
.toggle-nav-sidebar {
    border-inline-end: 1px solid var(--kp-cizgi);
    background: var(--kp-yuzey);
    color: var(--kp-metin-3);
}
.toggle-nav-sidebar:hover { background: var(--kp-yuzey-2); color: var(--kp-mavi); }

/* ─────────────────────────── 6. İçerik alanı ─────────────────────────── */
#content { padding: 26px 28px 48px; }
.dashboard #content { width: auto; max-width: 1180px; }   /* Django 600px'e sıkıştırıyordu */

#content > h1, #content h1 {
    margin: 0 0 18px;
    font-size: 1.5rem;
    font-weight: 680;
    letter-spacing: -.02em;
    color: var(--kp-metin);
}

/* ─────────────────────────── 7. Kartlar (module) ─────────────────────────── */
.module {
    background: var(--kp-yuzey);
    border: 1px solid var(--kp-cizgi);
    border-radius: var(--kp-yuvarlak);
    box-shadow: var(--kp-golge);
    margin-bottom: 20px;
    overflow: hidden;
}
.module > h2,
.module caption,
.inline-group h2 {
    padding: 12px 18px;
    background: var(--kp-yuzey-2);
    border-bottom: 1px solid var(--kp-cizgi);
    color: var(--kp-metin-2);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: start;
}
.module caption a.section:link, .module caption a.section:visited { color: var(--kp-metin-2); }
.module caption a.section:hover { color: var(--kp-mavi); text-decoration: none; }
.module h3 { padding: 14px 18px 4px; font-size: .875rem; }
.module p, .module ul, .module ol, .module dl { padding-inline: 18px; }

/* ─────────────────────────── 8. Tablolar ─────────────────────────── */
table { border-collapse: collapse; }
thead th,
.module table thead th {
    padding: 10px 14px;
    background: var(--kp-yuzey-2);
    border-bottom: 1px solid var(--kp-cizgi);
    color: var(--kp-metin-3);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
tbody td, tbody th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--kp-cizgi-2);
    vertical-align: middle;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
#result_list tbody tr:hover > * { background: #f7f8fd; }
tbody tr.selected > * { background: var(--selected-bg) !important; }
#result_list thead th a { color: var(--kp-metin-3); }
#result_list thead th.sorted { background: #f0f2fa; color: var(--kp-mor); }
.paginator {
    padding: 14px 18px;
    border-top: 1px solid var(--kp-cizgi);
    background: var(--kp-yuzey-2);
    color: var(--kp-metin-2);
    font-size: .8125rem;
}
.paginator a:link, .paginator a:visited {
    display: inline-block;
    padding: 4px 11px;
    border: 1px solid var(--kp-cizgi);
    border-radius: 7px;
    background: var(--kp-yuzey);
    color: var(--kp-mavi);
    font-weight: 500;
}
.paginator a:hover { background: var(--kp-mavi); border-color: var(--kp-mavi); color: #fff; text-decoration: none; }
.paginator .this-page {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 7px;
    background: var(--kp-mor);
    color: #fff;
    font-weight: 650;
    font-size: .8125rem;
}

/* ─────────────────────────── 9. Düğmeler ─────────────────────────── */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
    padding: 9px 16px;
    border: 0;
    border-radius: 9px;
    background: var(--kp-mavi);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .005em;
    cursor: pointer;
    transition: background .16s, transform .12s, box-shadow .16s;
}
.button:hover, input[type=submit]:hover, input[type=button]:hover {
    background: var(--kp-mavi-koyu);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px rgba(74,91,170,.75);
}
.button:active, input[type=submit]:active { transform: none; box-shadow: none; }
.button.default, input[type=submit].default, .submit-row input.default {
    background: var(--kp-pembe);
    font-weight: 650;
}
.button.default:hover, input[type=submit].default:hover {
    background: var(--kp-pembe-koyu);
    box-shadow: 0 6px 16px -8px rgba(217,83,155,.8);
}
.button[disabled], input[type=submit][disabled] {
    background: #c6cad8; color: #fff; transform: none; box-shadow: none;
}
.submit-row {
    padding: 14px 18px;
    margin: 20px 0 0;
    background: var(--kp-yuzey);
    border: 1px solid var(--kp-cizgi);
    border-radius: var(--kp-yuvarlak);
    box-shadow: var(--kp-golge);
    display: flex;
    gap: 10px;
    align-items: center;
}
.submit-row a.deletelink {
    padding: 9px 16px;
    border-radius: 9px;
    background: var(--kp-kirmizi-bg);
    color: var(--kp-kirmizi);
    font-weight: 600;
    height: auto;
    line-height: normal;
}
.submit-row a.deletelink:hover { background: var(--kp-kirmizi); color: #fff; }
.submit-row a:link.closelink, .submit-row a:visited.closelink {
    background: #eef0f7; color: var(--kp-metin-2); border-radius: 9px; height: auto;
    padding: 9px 16px; line-height: normal;
}

/* nesne araçları — "Ekle" düğmesi. Django margin-top:-48px ile başlık
   hizasına çekiyor; o hesap bozulmasın diye konumuna dokunulmuyor. */
.object-tools a:link, .object-tools a:visited {
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--kp-pembe);
    color: #fff;
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .01em;
    text-transform: none;
    box-shadow: 0 4px 12px -6px rgba(217,83,155,.9);
}
.object-tools a:hover { background: var(--kp-pembe-koyu); }

/* ─────────────────────────── 10. Formlar ─────────────────────────── */
input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], input[type=date], input[type=time],
textarea, select, .vTextField {
    padding: 8px 11px;
    border: 1px solid #d6dae8;
    border-radius: 8px;
    background: #fff;
    color: var(--kp-metin);
    font-size: .8125rem;
    font-family: inherit;
    /* Satır yüksekliği BİLEREK yazılı. Tarayıcının "normal" değeri 13px yazı
       için ~16px; kutunun iç yüksekliği 15px kalıyor ve yazı ÜSTTEN kırpılıyordu
       (ş, ğ, İ gibi harflerde belirgin). 09.09.2026'da ölçüldü. */
    line-height: 1.15;
    transition: border-color .15s, box-shadow .15s;
}

/* Django base.css: "select { height: 1.875rem }" — 30px SABİT. O yükseklik
   Django'nun kendi 5px dolgusuna göre seçilmiş; bizim dolgumuz 8px olunca
   içeriğe 12px kalıyor ve seçili seçenek kırpılıyordu (Okul alanında
   "Muş Kız Anadolu Lisesi (Muş)" üstten kesiliyordu). Yükseklik içeriğe
   bırakılıyor; ölçü input'larla aynı kalsın diye min-height veriliyor.
   max-width: uzun okul adları kutuyu sayfanın dışına taşırmasın. */
select {
    height: auto;
    min-height: 33px;
    max-width: 100%;
}
select:not([multiple]) { padding-inline-end: 8px; }

/* Django her CharField'i .vTextField ile 20em (≈284px) kutuya koyuyor. Uzun
   alanlar (kaynak/atıf, okul adı, ayar açıklaması) oraya sığmıyor: 09.09.2026'da
   ölçüldü, envanterin `kaynak` değeri 1076px yer istiyordu — Ebru metnin
   tamamını göremiyordu, kutu içinde kaydırmak zorundaydı.
   Aşağıdaki max_length değerleri PROJEDEKİ modellerden gelir; yeni bir uzunluk
   eklenirse test_yonetim.py "uzun alanlar geniş" testi düşer ve buraya eklenir. */
.form-row input[type=text][maxlength="80"],
.form-row input[type=text][maxlength="100"],
.form-row input[type=text][maxlength="120"],
.form-row input[type=text][maxlength="128"],
.form-row input[type=text][maxlength="150"],
.form-row input[type=text][maxlength="200"],
.form-row input[type=text][maxlength="250"],
.form-row input[type=text][maxlength="254"],
.form-row input[type=text][maxlength="300"] {
    width: min(46rem, 100%);
    box-sizing: border-box;
}

/* JSON/uzun metin kutuları incelemek için açılıyor; Django'nun varsayılanı
   rapor içeriği gibi alanlarda çok kısa kalıyordu. */
/* Yükseklik BİLEREK dayatılmıyor: Django'nun rows'u makul, sabit bir min-height
   isim gibi tek satırlık alanları da şişirir. Yalnız elle büyütmeye izin verilir. */
.form-row textarea { resize: vertical; }
/* Şifreli kimlik alanları tek satırlıktır (bkz. KP_SIFRELI_WIDGET). */
.form-row input.kp-genis { width: min(30rem, 100%); box-sizing: border-box; }
/* Atıf/açıklama kutuları: iki satır yeter, rapor içeriği gibi 7em gerekmez.
   Kaynağı UzunAlanKarisimi (uygulama/admin.py). */
.form-row textarea.kp-uzun-alan { min-height: 3.4em; width: min(46rem, 100%); }
input:focus, textarea:focus, select:focus, .vTextField:focus {
    border-color: var(--kp-mavi);
    box-shadow: 0 0 0 3px rgba(74,91,170,.15);
    outline: 0;
}
fieldset.module { padding-bottom: 6px; }
.form-row { padding: 13px 18px; border-bottom: 1px solid var(--kp-cizgi-2); }
.form-row:last-child { border-bottom: 0; }
.aligned label {
    color: var(--kp-metin-2);
    font-size: .8125rem;
    font-weight: 600;
    padding-top: 9px;
}
.help, .helptext, div.help {
    color: var(--kp-metin-3);
    font-size: .75rem;
    line-height: 1.55;
}
.errorlist li {
    background: var(--kp-kirmizi);
    border-radius: 7px;
    font-size: .75rem;
    padding: 6px 10px;
}
.errornote {
    padding: 12px 16px;
    border: 1px solid #f3c6c0;
    border-inline-start: 4px solid var(--kp-kirmizi);
    border-radius: 10px;
    background: var(--kp-kirmizi-bg);
    color: var(--kp-kirmizi);
    font-weight: 600;
    font-size: .8125rem;
}
.checkbox-row, .form-row.checkbox-row { display: flex; align-items: center; gap: 8px; }

/* ─────────────────────────── 11. Mesajlar ─────────────────────────── */
ul.messagelist { padding: 0; margin: 0 0 18px; }
ul.messagelist li {
    display: block;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--kp-cizgi);
    border-inline-start: 4px solid var(--kp-yesil);
    border-radius: 10px;
    background: var(--kp-yesil-bg);
    color: #14603c;
    font-size: .8125rem;
    font-weight: 500;
    background-image: none;
    box-shadow: var(--kp-golge);
}
ul.messagelist li.warning {
    border-inline-start-color: var(--kp-sari);
    background: var(--kp-sari-bg);
    color: #7c5310;
}
ul.messagelist li.error {
    border-inline-start-color: var(--kp-kirmizi);
    background: var(--kp-kirmizi-bg);
    color: #8f2318;
}

/* ─────────────────────────── 12. Liste ekranı ─────────────────────────── */
#changelist { background: none; }
#changelist .actions {
    padding: 11px 16px;
    border: 1px solid var(--kp-cizgi);
    border-radius: 10px;
    background: var(--kp-yuzey);
    box-shadow: var(--kp-golge);
    margin-bottom: 14px;
    color: var(--kp-metin-2);
    font-size: .8125rem;
}
#changelist .actions select { min-width: 260px; }
#changelist-search {
    padding: 12px 16px;
    border: 1px solid var(--kp-cizgi);
    border-radius: 10px;
    background: var(--kp-yuzey);
    box-shadow: var(--kp-golge);
    margin-bottom: 14px;
}
#changelist-search #searchbar {
    width: min(420px, 100%);
    padding: 8px 12px;
    border-radius: 8px;
}
#toolbar { padding: 0; border: 0; background: none; margin-bottom: 0; }
#changelist-form .results {
    border: 1px solid var(--kp-cizgi);
    border-radius: var(--kp-yuvarlak);
    background: var(--kp-yuzey);
    box-shadow: var(--kp-golge);
    overflow: hidden;
}
#changelist-filter {
    background: var(--kp-yuzey);
    border: 1px solid var(--kp-cizgi);
    border-radius: var(--kp-yuvarlak);
    box-shadow: var(--kp-golge);
    overflow: hidden;
}
#changelist-filter h2 {
    padding: 12px 16px;
    background: var(--kp-yuzey-2);
    border-bottom: 1px solid var(--kp-cizgi);
    color: var(--kp-metin-2);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
#changelist-filter h3 { font-size: .75rem; color: var(--kp-metin-3); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; padding: 12px 16px 4px; margin: 0; }
#changelist-filter li { padding: 0 8px; }
#changelist-filter li a {
    display: block; padding: 6px 10px; border-radius: 7px;
    color: var(--kp-metin-2); font-size: .8125rem;
}
#changelist-filter li a:hover { background: var(--kp-yuzey-2); color: var(--kp-mavi); }
#changelist-filter li.selected { border-inline-start: 0; padding-inline-start: 8px; margin-inline-start: 0; }
#changelist-filter li.selected a {
    background: #f2f0fb; color: var(--kp-mor); font-weight: 650;
}
.changelist-form-container { gap: 20px; }

/* satır içi (inline) gruplar — madde girişi burada ─────────────────── */
.inline-group {
    border: 1px solid var(--kp-cizgi);
    border-radius: var(--kp-yuvarlak);
    background: var(--kp-yuzey);
    box-shadow: var(--kp-golge);
    overflow: hidden;
    margin-bottom: 20px;
}
.inline-group .tabular tr.add-row td { background: var(--kp-yuzey-2); }
.inline-related h3 {
    padding: 9px 16px;
    background: var(--kp-yuzey-2);
    border-bottom: 1px solid var(--kp-cizgi-2);
    font-size: .75rem;
    color: var(--kp-metin-2);
}
.add-row a { font-weight: 600; }

/* ─────────────────────────── 13. Giriş ekranı ─────────────────────────── */
body.login {
    background: linear-gradient(160deg, #f4f5fa 0%, #eceafa 46%, #f9eef5 100%);
}
body.login #container {
    width: min(408px, calc(100% - 32px));
    min-width: 0;
    margin: 8vh auto;
    border: 1px solid var(--kp-cizgi);
    border-radius: 18px;
    background: var(--kp-yuzey);
    box-shadow: 0 24px 60px -28px rgba(38,30,80,.42);
    overflow: hidden;
    height: auto;
}
body.login #header {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 28px;
    min-height: 0;
}
body.login #content { padding: 26px 28px 30px; }
body.login .form-row { padding: 0 0 14px; border: 0; }
body.login .form-row label {
    display: block; padding: 0 0 6px;
    font-size: .75rem; font-weight: 650; color: var(--kp-metin-2);
    letter-spacing: .02em;
}
body.login .form-row input { width: 100%; box-sizing: border-box; padding: 10px 12px; }
body.login .submit-row {
    padding: 4px 0 0; margin: 0; border: 0; background: none; box-shadow: none;
}
body.login .submit-row input {
    width: 100%; padding: 11px 16px; background: var(--kp-mor); font-size: .875rem;
}
body.login .submit-row input:hover { background: #4b2f7a; }
body.login #content-main { float: none; }

/* giriş ekranının altına küçük bir bilgi satırı */
body.login #content-main::after {
    content: "Yalnız personel erişimi · her işlem denetim kaydına yazılır";
    display: block;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--kp-cizgi-2);
    color: var(--kp-metin-3);
    font-size: .6875rem;
    text-align: center;
}

/* ─────────────────────────── 14. Gösterge paneli ─────────────────────────── */
.kp-ust {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin: 0 0 18px;
}
.kp-ust h1 { margin: 0; }
.kp-ust .kp-zaman { color: var(--kp-metin-3); font-size: .75rem; }

.kp-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 14px;
    margin: 0 0 22px;
}
.kp-kutu {
    position: relative;
    padding: 16px 18px 17px;
    border: 1px solid var(--kp-cizgi);
    border-radius: var(--kp-yuvarlak);
    background: var(--kp-yuzey);
    box-shadow: var(--kp-golge);
    overflow: hidden;
    transition: box-shadow .18s, transform .18s;
}
.kp-kutu:hover { box-shadow: var(--kp-golge-2); transform: translateY(-1px); }
.kp-kutu::before {
    content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
    height: 3px; background: var(--kp-mavi);
}
.kp-kutu.mor::before   { background: var(--kp-mor); }
.kp-kutu.pembe::before { background: var(--kp-pembe); }
.kp-kutu.yesil::before { background: var(--kp-yesil); }
.kp-kutu.altin::before { background: var(--kp-altin); }
.kp-kutu .et {
    color: var(--kp-metin-3);
    font-size: .6875rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
}
.kp-kutu .sayi {
    margin-top: 6px;
    font-size: 1.875rem; font-weight: 680; line-height: 1.05;
    letter-spacing: -.03em; color: var(--kp-metin);
    font-variant-numeric: tabular-nums;
}
.kp-kutu .sayi small { font-size: .9375rem; font-weight: 500; color: var(--kp-metin-3); }
.kp-kutu .alt { margin-top: 5px; font-size: .75rem; color: var(--kp-metin-2); }
.kp-cubuk {
    height: 6px; margin-top: 10px; border-radius: 999px;
    background: var(--kp-cizgi); overflow: hidden;
}
.kp-cubuk i { display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--kp-mor), var(--kp-pembe)); }

.kp-is {
    margin: 0 0 22px;
    border: 1px solid var(--kp-cizgi);
    border-radius: var(--kp-yuvarlak);
    background: var(--kp-yuzey);
    box-shadow: var(--kp-golge);
    overflow: hidden;
}
.kp-is > h2 {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 18px;
    background: var(--kp-yuzey-2);
    border-bottom: 1px solid var(--kp-cizgi);
    color: var(--kp-metin-2);
    font-size: .75rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.kp-is > h2 .adet {
    padding: 2px 8px; border-radius: 999px;
    background: var(--kp-sari-bg); color: var(--kp-sari);
    font-size: .6875rem; letter-spacing: 0;
}
.kp-is ul { list-style: none; margin: 0; padding: 0; }
.kp-is li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--kp-cizgi-2);
    font-size: .8125rem; color: var(--kp-metin-2);
}
.kp-is li:last-child { border-bottom: 0; }
.kp-is li::before {
    content: ""; flex: none; width: 7px; height: 7px; margin-top: 6px;
    border-radius: 50%; background: var(--kp-sari);
}
.kp-is li.kritik::before { background: var(--kp-kirmizi); }
.kp-is li a { font-weight: 600; }
.kp-temiz {
    padding: 15px 18px; font-size: .8125rem; color: var(--kp-yesil); font-weight: 600;
}

/* açılış kodu kısayolu — panelden okulun kod ekranına ve PDF'ine doğrudan geçiş.
   Nokta MOR: bunlar "dikkat gerektiren" sarı/kırmızı işler değil, olağan iş. */
.kp-kod li::before { background: var(--kp-mor); }
.kp-kod li.bos::before { background: var(--kp-cizgi); }
.kp-kod li .sag {
    margin-left: auto; flex: none;
    display: flex; align-items: center; gap: 10px;
}
.kp-kod .rozet {
    padding: 2px 8px; border-radius: 999px;
    background: var(--kp-sari-bg); color: var(--kp-sari);
    font-size: .6875rem; font-weight: 700; white-space: nowrap;
}
.kp-kod .rozet.bos {
    background: var(--kp-yuzey-2); color: var(--kp-metin-3); font-weight: 600;
}
.kp-kod .kp-not {
    margin: 0; padding: 11px 18px;
    border-top: 1px solid var(--kp-cizgi-2);
    font-size: .75rem; line-height: 1.5; color: var(--kp-metin-3);
}

/* panelin model listesi — Django'nun app_list'i kart ızgarasına döner */
.kp-bolum-basligi {
    margin: 26px 0 12px;
    color: var(--kp-metin-3);
    font-size: .6875rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
}
.dashboard #content-main > div.app-uygulama,
.dashboard #content-main > div.app-auth {
    margin-bottom: 20px;
}
.dashboard .module table { width: 100%; }
.dashboard .module tbody th { width: 52%; font-weight: 600; }
.dashboard .module tbody th a { color: var(--kp-metin); }
.dashboard .module tbody th a:hover { color: var(--kp-mavi); }
.dashboard .module tbody td { text-align: end; width: 24%; }
.addlink, .changelink, .viewlink { font-size: .75rem; font-weight: 600; }

/* ─────────────────────────── 15. Küçük ekran ─────────────────────────── */
@media (max-width: 767px) {
    #header { padding: 10px 16px; }
    #content { padding: 18px 16px 36px; }
    #site-name::after { display: none; }
    .kp-panel { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .kp-kutu:hover, .button:hover, input[type=submit]:hover { transform: none; }
}

/* ── 16. Pilot hazırlığı tablosu ─────────────────────────────────────── */
.kp-hazir {
    margin: 0 0 22px;
    border: 1px solid var(--kp-cizgi);
    border-radius: var(--kp-yuvarlak);
    background: var(--kp-yuzey);
    box-shadow: var(--kp-golge);
    overflow: hidden;
}
.kp-hazir > h2 {
    padding: 12px 18px;
    background: var(--kp-yuzey-2);
    border-bottom: 1px solid var(--kp-cizgi);
    color: var(--kp-metin-2);
    font-size: .75rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.kp-hazir table { width: 100%; }
.kp-hazir td, .kp-hazir th {
    padding: 10px 14px;
    border-bottom: 1px solid var(--kp-cizgi-2);
    text-align: start;
    font-weight: 400;
}
.kp-hazir tr:last-child td, .kp-hazir tr:last-child th { border-bottom: 0; }
.kp-hazir td.im {
    width: 34px; padding-inline-start: 18px;
    color: var(--kp-metin-3); font-size: .9375rem; text-align: center;
}
.kp-hazir tr.tamam td.im { color: var(--kp-yesil); font-weight: 700; }
.kp-hazir th { font-size: .8125rem; font-weight: 600; color: var(--kp-metin); }
.kp-hazir th a { color: inherit; }
.kp-hazir th a:hover { color: var(--kp-mavi); }
.kp-hazir th .not {
    display: block; margin-top: 2px;
    color: var(--kp-metin-3); font-size: .6875rem; font-weight: 400;
}
.kp-hazir td.sayi {
    width: 90px; text-align: end;
    font-variant-numeric: tabular-nums;
    font-weight: 650; font-size: .8125rem; color: var(--kp-metin);
}
.kp-hazir td.sayi .hedef { color: var(--kp-metin-3); font-weight: 400; }
.kp-hazir td.cubuk { width: 190px; padding-inline-end: 18px; }
.kp-hazir td.cubuk .kp-cubuk { margin: 0; }
.kp-hazir tr.tamam td.cubuk .kp-cubuk i { background: var(--kp-yesil); }

/* ── 17. Liste içi düzenleme (list_editable) ─────────────────────────── */
/* Madde metni gibi geniş alanlar hücreyi taşırıyordu: giriş kutusu hücreye
   uyar, tablo gerekirse yatay kayar — sayfa gövdesi asla kaymaz. */
#changelist-form .results { overflow-x: auto; }
#result_list td input[type=text], #result_list td .vTextField { box-sizing: border-box; }
/* uzun metin alanı hücreyi doldurur, kısa alanlar (boyut/sıra) dar kalır */
#result_list td.field-metin { width: 100%; }
#result_list td.field-metin input[type=text] { width: 100%; min-width: 220px; }
#result_list td.field-boyut input[type=text] { width: 56px; }
#result_list td.field-sira input[type=text],
#result_list td.field-numara input[type=text] { width: 62px; }
#result_list td select { max-width: 160px; }

/* ── 18. Üst şeritteki kullanıcı adı ─────────────────────────────────── */
.kp-kullanici {
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-weight: 600;
    letter-spacing: .01em;
}

/* Django başlıkları verbose_name'den üretiyor: "öğrenci değiştir".
   İlk harf büyütülür — <html lang="tr"> olduğu için i→İ doğru çalışır. */
#content > h1::first-letter { text-transform: uppercase; }

/* Mesaj listesi #content'in DIŞINDA duruyor (Django base.html) — içerikle
   aynı hizaya gelsin diye kendi iç boşluğunu alır. */
.main .content > ul.messagelist { padding: 22px 28px 0; margin-bottom: 0; }

/* ── 19. Ekran açıklaması (kp-aciklama) ──────────────────────────────── */
/* Sorular ekranının başındaki kalıcı kullanım kutusu. Mesaj şeridi bir kez
   okunup gidiyor; buradaki bilgi her ziyarette gerekli olduğu için kapanmaz. */
.kp-aciklama {
    background: var(--kp-yuzey);
    border: 1px solid var(--kp-cizgi);
    border-inline-start: 4px solid var(--kp-mor);
    border-radius: var(--kp-yuvarlak);
    box-shadow: var(--kp-golge);
    padding: 18px 22px 16px;
    margin: 0 0 20px;
    max-width: 900px;
}
.kp-aciklama h2 {
    margin: 0 0 8px;
    font-size: .9375rem; font-weight: 650; letter-spacing: -.01em;
    color: var(--kp-mor);
    background: none; border: 0; padding: 0;
}
.kp-aciklama p {
    margin: 0 0 12px;
    font-size: .8125rem; line-height: 1.65; color: var(--kp-metin-2);
}
.kp-aciklama b { color: var(--kp-metin); font-weight: 650; }

.kp-aciklama table.kp-sutunlar { width: 100%; border-collapse: collapse; }
.kp-sutunlar th {
    width: 118px; padding: 7px 14px 7px 0;
    text-align: start; vertical-align: top;
    font-size: .8125rem; font-weight: 650; color: var(--kp-metin);
    border-top: 1px solid var(--kp-cizgi-2);
}
.kp-sutunlar td {
    padding: 7px 0; vertical-align: top;
    font-size: .8125rem; line-height: 1.6; color: var(--kp-metin-2);
    border-top: 1px solid var(--kp-cizgi-2);
}
.kp-sutunlar tr:first-child th, .kp-sutunlar tr:first-child td { border-top: 0; }

/* Sütunun düzenlenebilir olup olmadığını gösteren rozet */
.kp-sutunlar .ev, .kp-sutunlar .hayir {
    display: inline-block; margin-inline-end: 8px;
    padding: 1px 8px; border-radius: 999px;
    font-size: .6875rem; font-weight: 650; letter-spacing: .01em;
    white-space: nowrap; vertical-align: 1px;
}
.kp-sutunlar .ev    { background: var(--kp-yesil-bg); color: var(--kp-yesil); }
.kp-sutunlar .hayir { background: var(--kp-sari-bg);  color: var(--kp-sari); }

.kp-aciklama .kp-dipnot {
    margin: 12px 0 0; padding-top: 12px;
    border-top: 1px solid var(--kp-cizgi-2);
    font-size: .78125rem; color: var(--kp-metin-3);
}
.kp-aciklama .kp-dipnot b { color: var(--kp-metin-2); }

/* Kilitli sütunlar liste ekranında da soluk görünür — düzenlenebilir
   kutularla aynı hizada durunca ayırt edilemiyordu. */
#result_list td.field-boyut, #result_list td.field-ters {
    color: var(--kp-metin-3);
    background: var(--kp-yuzey-2);
}

/* ── 20. Role göre gruplanmış ekran listesi ──────────────────────────── */
/* Alfabetik tek liste 20 ekranı yan yana diziyordu ve hangisinin kimin işi
   olduğu anlaşılmıyordu. Her grup kendi kartında, başında ne olduğunu
   söyleyen bir cümleyle. */
.kp-grup {
    background: var(--kp-yuzey);
    border: 1px solid var(--kp-cizgi);
    border-radius: var(--kp-yuvarlak);
    box-shadow: var(--kp-golge);
    padding: 16px 20px 14px;
    margin: 0 0 14px;
}
.kp-grup h3 {
    margin: 0 0 4px;
    font-size: .9375rem; font-weight: 650; letter-spacing: -.01em;
    color: var(--kp-mor);
    background: none; border: 0; padding: 0;
}
.kp-grup-not {
    margin: 0 0 12px;
    font-size: .8125rem; line-height: 1.6; color: var(--kp-metin-2);
    max-width: 78ch;
}
/* Üçüncü grup (sistem) bilerek soluk: açılabilir ama davet etmiyor */
.kp-grup:nth-of-type(3) { background: var(--kp-yuzey-2); }
.kp-grup:nth-of-type(3) h3 { color: var(--kp-metin-2); }

.kp-grup-ekranlar {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.kp-ekran {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--kp-cizgi);
    border-radius: 8px;
    overflow: hidden;
    background: var(--kp-yuzey);
    transition: border-color .15s, box-shadow .15s;
}
.kp-ekran:hover { border-color: var(--kp-mor); box-shadow: var(--kp-golge); }
.kp-ekran > a, .kp-ekran > span {
    padding: 7px 12px;
    font-size: .8125rem; font-weight: 550;
    color: var(--kp-metin); text-decoration: none;
    white-space: nowrap;
}
.kp-ekran > span { color: var(--kp-metin-3); }
.kp-ekran .kp-ekle {
    padding: 7px 10px;
    border-left: 1px solid var(--kp-cizgi);
    color: var(--kp-metin-3); font-weight: 650;
    background: var(--kp-yuzey-2);
}
.kp-ekran .kp-ekle:hover { background: var(--kp-mor); color: #fff; }

@media (prefers-reduced-motion: reduce) { .kp-ekran { transition: none; } }

/* ── Öğrenci bul (yan çubuk) · 08.10.2026 ─────────────────────────────────
   Menü süzgecinin üstünde, her sayfada. Menü süzgeci öğrenci aramıyordu ve
   kullanıcı orada arıyordu; bu kutu belirgin, süzgeç ikincil. */
.kp-ogrenci-ara { margin: 10px 12px 2px; }
.kp-ogrenci-ara label {
    display: block; margin: 0 0 4px; font-size: .6875rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--kp-mor);
}
.kp-ogrenci-ara input {
    width: 100%; box-sizing: border-box; padding: 9px 11px;
    border: 1.5px solid var(--kp-mor); border-radius: 8px;
    background: var(--kp-yuzey); font-size: .875rem;
}
.kp-ogrenci-ara input:focus { box-shadow: 0 0 0 3px rgba(91,58,142,.18); outline: 0; }
#nav-filter { font-size: .75rem; padding: 6px 10px; }

/* ── Gösterge paneli: hızlı işlemler · 08.10.2026 ───────────────────────── */
.kp-hizli {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    margin: 0 0 18px; padding: 14px 16px; background: var(--kp-yuzey);
    border: 1px solid var(--kp-cizgi); border-radius: var(--kp-yuvarlak);
    box-shadow: var(--kp-golge);
}
.kp-hizli form { display: flex; gap: 8px; flex: 1 1 320px; margin: 0; }
.kp-hizli input[type=search] {
    flex: 1; padding: 10px 12px; font-size: .9375rem;
    border: 1.5px solid var(--kp-mor); border-radius: 8px;
}
.kp-hizli button {
    padding: 10px 18px; border: 0; border-radius: 8px; cursor: pointer;
    background: var(--kp-mor); color: #fff; font-weight: 600;
}
.kp-hizli .kp-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.kp-hizli .kp-dugmeler a {
    padding: 9px 14px; border: 1px solid var(--kp-cizgi); border-radius: 8px;
    background: var(--kp-yuzey-2); color: var(--kp-metin); font-weight: 600;
    font-size: .8125rem; white-space: nowrap;
}
.kp-hizli .kp-dugmeler a:hover { border-color: var(--kp-mor); color: var(--kp-mor); text-decoration: none; }
.kp-hizli .kp-dugmeler a.ana { background: var(--kp-mor); border-color: var(--kp-mor); color: #fff; }

/* Proje ilerlemesi ve ekran listesi KATLANIR — günlük işin önünü kesmesin */
details.kp-katlanir > summary {
    cursor: pointer; list-style: none; margin: 22px 0 10px;
    font-size: .75rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--kp-metin-3);
}
details.kp-katlanir > summary::-webkit-details-marker { display: none; }
details.kp-katlanir > summary::before { content: "▸ "; }
details.kp-katlanir[open] > summary::before { content: "▾ "; }

/* Öğrenci formunda rıza bölümünün açıklaması okunur olsun */
.module .description { font-size: .8125rem; line-height: 1.5; color: var(--kp-metin-2); }

/* ── 21. Okul durumu · 11.10.2026 ───────────────────────────────────────────
   Okul "kimler tamamlamadı" listesini fişlerden çıkarmaya çalışıyordu. Okul başına
   sayılar (okul_durumu_ozet.html) ve öğrenci öğrenci gruplu liste (okul_durumu.html).
   1366 px'te tablo taşmamalı: sütunlar dar, uzun hücre yok, tarih kısa biçimde. */
.kp-durum-giris, .kp-durum-not, .kp-durum-aciklama {
    max-width: 62rem; color: var(--kp-metin-2); font-size: .8125rem; line-height: 1.55;
}
.kp-durum-giris { margin: -6px 0 16px; }
.kp-durum-not { margin: 10px 0 18px; font-size: .75rem; }
.kp-durum-aciklama { margin: 0 0 8px; }
.kp-durum-bos { color: var(--kp-metin-3); font-size: .8125rem; margin: 2px 0 6px; }

.kp-durum-tablo {
    background: var(--kp-yuzey); border: 1px solid var(--kp-cizgi);
    border-radius: var(--kp-yuvarlak); box-shadow: var(--kp-golge); overflow-x: auto;
}
.kp-durum-tablo table { width: 100%; border-collapse: collapse; }
.kp-durum-tablo th, .kp-durum-tablo td {
    padding: 8px 12px; border-bottom: 1px solid var(--kp-cizgi-2);
    text-align: start; vertical-align: middle; font-size: .8125rem;
}
.kp-durum-tablo tbody tr:last-child > * { border-bottom: 0; }
.kp-durum-tablo thead th {
    background: var(--kp-yuzey-2); color: var(--kp-metin-3); font-size: .6875rem;
    font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.kp-durum-tablo tbody th { font-weight: 600; }
.kp-durum-tablo .sayi { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kp-durum-tablo td.tamam { min-width: 120px; }
.kp-durum-tablo td.tamam .kp-cubuk { margin-top: 5px; height: 4px; }
.kp-durum-tablo .oran, .kp-durum-tablo .alt, .kp-il {
    color: var(--kp-metin-3); font-size: .75rem; font-weight: 400;
}
.kp-durum-tablo .alt, .kp-il { display: block; }
.kp-durum-tablo td.dikkat { color: var(--kp-kirmizi); font-weight: 700; }
.kp-durum-tablo .kod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                       font-weight: 700; white-space: nowrap; }
.kp-durum-tablo .nowrap { white-space: nowrap; }

.kp-durum-araclar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.kp-durum-dugme {
    display: inline-block; padding: 9px 14px; border: 1px solid var(--kp-cizgi);
    border-radius: 8px; background: var(--kp-yuzey); color: var(--kp-metin);
    font-weight: 600; font-size: .8125rem;
}
a.kp-durum-dugme:hover { border-color: var(--kp-mor); color: var(--kp-mor); text-decoration: none; }
.kp-durum-dugme.ana { background: var(--kp-mor); border-color: var(--kp-mor); color: #fff; }
a.kp-durum-dugme.ana:hover { background: #4a2f75; color: #fff; }
.kp-durum-dugme.ana.bekliyor { background: var(--kp-metin-3); border-color: var(--kp-metin-3);
                               cursor: progress; }
.kp-durum-dugme.pasif { color: var(--kp-metin-3); background: var(--kp-yuzey-2); }

.kp-durum-atla { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 6px; }
.kp-durum-atla a {
    padding: 5px 10px; border-radius: 999px; background: var(--kp-yuzey);
    border: 1px solid var(--kp-cizgi); color: var(--kp-metin-2); font-size: .75rem;
}
.kp-durum-atla a b { color: var(--kp-metin); margin-inline-start: 2px; }
.kp-durum-atla a.bos { opacity: .55; }
.kp-durum-atla a:hover { border-color: var(--kp-mor); text-decoration: none; }

.kp-durum-grup { margin: 22px 0 0; scroll-margin-top: 12px; }
.kp-durum-grup > h2 {
    display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
    font-size: 1rem; color: var(--kp-metin);
}
.kp-durum-grup > h2 .adet {
    padding: 1px 9px; border-radius: 999px; background: var(--kp-cizgi-2);
    color: var(--kp-metin-2); font-size: .75rem; font-weight: 700;
}
.kp-g-riza > h2 .adet, .kp-g-girmedi > h2 .adet { background: var(--kp-kirmizi-bg); color: var(--kp-kirmizi); }
.kp-g-baslamadi > h2 .adet, .kp-g-yarim > h2 .adet { background: var(--kp-sari-bg); color: var(--kp-sari); }
.kp-g-bitti > h2 .adet { background: var(--kp-yesil-bg); color: var(--kp-yesil); }

.kp-test {
    display: inline-block; margin: 1px 4px 1px 0; padding: 1px 7px; border-radius: 4px;
    font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.kp-test.bitti { background: var(--kp-yesil-bg); color: var(--kp-yesil); }
.kp-test.yarim { background: var(--kp-sari-bg); color: var(--kp-sari); }
.kp-test.bos { background: var(--kp-cizgi-2); color: var(--kp-metin-3); }
.kp-uyari { color: var(--kp-kirmizi); font-weight: 700; font-size: .75rem; margin-inline-start: 4px; }
.kp-soluk { color: var(--kp-metin-3); font-size: .75rem; }
.kp-rapor { padding: 1px 6px; border-radius: 4px; font-size: .75rem; font-weight: 600; }
.kp-rapor.yayimda { background: var(--kp-yesil); color: #fff; }
.kp-rapor.hazir { background: #ece7f5; color: var(--kp-mor); }
a.kp-rapor:hover { text-decoration: none; filter: brightness(.95); }

/* Tarayıcıdan yazdırılırsa yalnız liste çıksın (PDF ayrıca istenmedi; okul isterse
   Ctrl/Cmd + P yeter). */
@media print {
    #header, .breadcrumbs, #nav-sidebar, #toggle-nav-sidebar, .kp-durum-araclar,
    .kp-durum-atla, .kp-durum-not { display: none !important; }
    .main > #content-start, #content { padding: 0; }
    .kp-durum-tablo, .kp-kutu { box-shadow: none; }
    .kp-durum-grup { break-inside: auto; }
    .kp-durum-tablo tr { break-inside: avoid; }
}

/* ── 22. Belge formu: önce okul, sonra öğrenci · 15.10.2026 ─────────────────
   Okul ve öğrenci kutuları Django'nun yönetim panelindeki select2 ("admin-autocomplete"
   teması; belge-formu.js). Burada yalnız ölçü ve renk diğer alanlara uyduruluyor: 33 px
   yükseklik, 8 px köşe, aynı odak halkası. Açılır liste <body>'nin sonuna eklendiği için
   onun kuralları forma bağlanmadan yazılı (projede başka select2 yok). Açılır listedeki
   satır: kod · ad · sınıf · zaten yüklü geçerli belgeler. */
#belge_form .select2-container { max-width: min(32rem, 100%); }
#belge_form .select2-container--admin-autocomplete .select2-selection--single {
    min-height: 33px; border-color: #d6dae8; border-radius: 8px; background: #fff;
}
#belge_form .select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
    line-height: 31px; padding-inline: 11px 30px; font-size: .8125rem;
}
#belge_form .select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow {
    height: 31px;
}
#belge_form .select2-container--admin-autocomplete .select2-selection--single .select2-selection__clear {
    margin-inline-end: 4px; color: var(--kp-metin-3);
}
#belge_form .select2-container--admin-autocomplete.select2-container--focus .select2-selection,
#belge_form .select2-container--admin-autocomplete.select2-container--open .select2-selection {
    border-color: var(--kp-mavi); box-shadow: 0 0 0 3px rgba(74,91,170,.15);
}
#belge_form .select2-container--disabled .select2-selection--single {
    background: var(--kp-yuzey-2); cursor: not-allowed;
}
.select2-container--admin-autocomplete .select2-dropdown {
    border-color: #d6dae8; box-shadow: var(--kp-golge-2);
}
.select2-container--admin-autocomplete .select2-search--dropdown { padding: 8px; }
.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field {
    padding: 8px 10px; border-radius: 6px; font-size: .8125rem;
}
.select2-container--admin-autocomplete .select2-results > .select2-results__options { max-height: 340px; }
.select2-container--admin-autocomplete .select2-results__option { padding: 7px 11px; font-size: .8125rem; }

.kp-ogr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.kp-ogr .kod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.kp-ogr .sinif { color: var(--kp-metin-3); font-size: .75rem; }
.kp-ogr .belge {
    padding: 0 6px; border-radius: 4px; background: var(--kp-yesil-bg); color: var(--kp-yesil);
    font-size: .6875rem; font-weight: 600; white-space: nowrap;
}
.select2-results__option--highlighted .kp-ogr .sinif { color: rgba(255,255,255,.82); }
.select2-results__option--highlighted .kp-ogr .belge { background: rgba(255,255,255,.2); color: #fff; }

/* Formun altındaki okul / öğrenci belgeleri (okul seçilince gelir). */
.kp-belge-paneli { margin: 28px 0 0; }
.kp-belge-paneli .kp-durum-grup { margin-top: 0; }
.kp-belge-paneli.yukleniyor { opacity: .55; transition: opacity .15s; }

/* "Belgeler" ilk sayfası: okul seçimi + tek öğrenci araması. */
.kp-belge-ara { display: flex; gap: 8px; flex: 1 1 18rem; max-width: 28rem; margin: 0; }
.kp-belge-ara input {
    flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid #d6dae8; border-radius: 8px;
    background: #fff; font-size: .8125rem; font-family: inherit;
}
.kp-belge-ara input:focus { border-color: var(--kp-mavi); box-shadow: 0 0 0 3px rgba(74,91,170,.15); outline: 0; }

/* ── 23. Form basımı · 15.10.2026 ──────────────────────────────────────────
   Saha formları (F-01…F-05) öğrenciye özel PDF; seçenek ekranı (form_basimi.html) ve
   belge formundaki "formlarını yazdır" bağlantıları. */
.kp-form-baglantilari {
    margin: 4px 0 14px; padding: 10px 14px; border: 1px dashed var(--kp-cizgi);
    border-radius: 8px; background: var(--kp-yuzey-2); font-size: .8125rem; color: var(--kp-metin-2);
}
.kp-form-baglantilari a { margin-inline-start: 10px; font-weight: 600; white-space: nowrap; }
/* Satırdaki eylem ("Formları bas", "Formlarını yazdır"): düz bağlantı gözden kaçıyordu —
   yönetici Belgeler'de "hazır formları bulamadım" dedi. */
a.kp-hap {
    display: inline-block; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
    background: #e8ecf8; color: var(--kp-mavi-koyu); font-weight: 600; font-size: .75rem;
}
a.kp-hap:hover { background: var(--kp-mavi-koyu); color: #fff; text-decoration: none; }
.kp-durum-tablo td.sag { text-align: end; white-space: nowrap; }
.kp-form-basim fieldset.module { margin-bottom: 14px; }
.kp-form-basim .form-row { display: flex; flex-direction: column; gap: 6px; }
.kp-form-basim label.kp-secim {
    display: block; width: auto; float: none; padding: 0; font-weight: 400;
    color: var(--kp-metin); font-size: .8125rem; cursor: pointer;
}
.kp-form-basim label.kp-secim input { margin: 0 6px 0 0; vertical-align: -1px; }
.kp-form-basim .form-row label[for] { width: 9.5rem; flex: 0 0 9.5rem; padding: 7px 0 0; margin: 0; }
.kp-form-basim .form-row:has(label[for]) { flex-direction: row; align-items: flex-start; gap: 12px; }
.kp-form-basim .form-row > div { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.kp-form-basim .form-row > div .help { margin: 0; padding: 0; }
.kp-form-basim .submit-row { display: flex; align-items: center; gap: 12px; }
.kp-belge-uyari {
    max-width: 62rem; margin: 0 0 14px; padding: 10px 14px; border-radius: 8px;
    background: var(--kp-sari-bg); color: var(--kp-sari); font-size: .8125rem; font-weight: 600;
}
/* Toplu yükleme tablosu (tarama_yukle.html): satır satır durum. */
.kp-t-durum { font-weight: 600; }
.kp-t-durum.hazir { color: var(--kp-mavi); }
.kp-t-durum.gonderiliyor { color: var(--kp-metin-3); }
.kp-t-durum.yuklendi { color: var(--kp-yesil); }
.kp-t-durum.atla { color: var(--kp-sari); }
.kp-t-durum.hata { color: var(--kp-kirmizi); }
#kp-tarama .form-row > div { display: flex; flex-direction: column; gap: 4px; }
#kp-tarama .help { margin: 0; padding: 0; }

/* ── 24. Form basımı: kimlere, ilerleme · form metinleri ve sürümler · 15.10.2026 ─────────
   Okul basımında "bütün öğrenciler / seçtiklerim" (sınıf düğmesi o sınıfı seçer), toplu
   basımın ilerleme sayfası (form_isi.html) ve "Form metinleri" ekranları. */
.kp-surum {
    display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--kp-cizgi-2);
    color: var(--kp-metin-2); font-size: .6875rem; font-weight: 700; vertical-align: 1px;
}
/* Basım formunun satırları display:flex (yukarıda) — [hidden] onları gizleyemiyordu */
.kp-form-basim [hidden] { display: none !important; }
.kp-ogrenci-secimi { gap: 8px !important; }
.kp-secim-araclar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kp-form-basim .kp-ogrenci-secimi > div.kp-secim-araclar,
.kp-form-basim .kp-ogrenci-secimi > div.kp-sinif-dugmeleri {
    flex-direction: row; flex-wrap: wrap; align-items: center;
}
.kp-form-basim .kp-ogrenci-secimi > div.kp-secim-liste { display: block; }
.kp-secim-araclar input[type=search] {
    flex: 1 1 16rem; max-width: 22rem; padding: 8px 10px; border: 1px solid #d6dae8;
    border-radius: 8px; font-size: .8125rem;
}
.kp-secim-araclar .kp-durum-dugme { padding: 7px 12px; cursor: pointer; }
.kp-secim-sayac { font-weight: 700; color: var(--kp-mor); font-size: .8125rem; }
.kp-sinif-dugmeleri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kp-sinif-cip {
    padding: 4px 10px; border: 1px solid var(--kp-cizgi); border-radius: 999px;
    background: var(--kp-yuzey); color: var(--kp-metin-2); font-size: .75rem; font-weight: 600;
    cursor: pointer;
}
.kp-sinif-cip span { color: var(--kp-metin-3); font-weight: 500; margin-inline-start: 2px; }
.kp-sinif-cip.kismen { border-color: var(--kp-mavi); color: var(--kp-mavi); }
.kp-sinif-cip[aria-pressed="true"] { background: var(--kp-mor); border-color: var(--kp-mor); color: #fff; }
.kp-sinif-cip[aria-pressed="true"] span { color: rgba(255,255,255,.8); }
.kp-secim-liste {
    max-height: 26rem; overflow-y: auto; border: 1px solid var(--kp-cizgi); border-radius: 8px;
    background: var(--kp-yuzey); padding: 4px 0;
}
.kp-secim-baslik {
    position: sticky; top: -4px; z-index: 1; padding: 6px 12px; background: var(--kp-yuzey-2);
    border-bottom: 1px solid var(--kp-cizgi-2); font-weight: 700; font-size: .75rem;
    color: var(--kp-metin-2);
}
.kp-secim-baslik .adet { color: var(--kp-metin-3); font-weight: 500; margin-inline-start: 4px; }
label.kp-ogr-satir {
    display: flex !important; align-items: center; gap: 8px; width: auto !important;
    float: none !important; padding: 4px 12px !important; margin: 0; font-size: .8125rem;
    font-weight: 400 !important; color: var(--kp-metin) !important; cursor: pointer;
}
label.kp-ogr-satir:hover { background: var(--kp-yuzey-2); }
.kp-ogr-satir .kod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.kp-ogr-satir .belge {
    padding: 0 6px; border-radius: 4px; background: var(--kp-yesil-bg); color: var(--kp-yesil);
    font-size: .6875rem; font-weight: 600;
}

.kp-form-isi { max-width: 46rem; }
.kp-is-cubuk { height: 10px; margin: 6px 0 10px; }
.kp-is-cubuk i { transition: width .4s; }
.kp-is-yazi { font-weight: 600; font-size: .875rem; margin: 0 0 8px; }

.kp-baslik-baglanti { margin-inline-start: auto; font-size: .8125rem; font-weight: 600; }
.kp-satir-ici { display: inline; margin: 0; }
.kp-satir-ici button { cursor: pointer; }
.kp-surum-durum {
    display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .6875rem;
    font-weight: 700; background: var(--kp-cizgi-2); color: var(--kp-metin-2);
}
.kp-surum-durum.yururlukte { background: var(--kp-yesil-bg); color: var(--kp-yesil); }
.kp-surum-durum.taslak { background: var(--kp-sari-bg); color: var(--kp-sari); }
.kp-form-karti { margin-bottom: 26px; }
.kp-form-karti .kp-durum-araclar { margin-bottom: 8px; }

textarea.kp-form-metni, pre.kp-form-metni {
    width: 100%; max-width: 62rem; box-sizing: border-box;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem;
    line-height: 1.5; tab-size: 4;
}
pre.kp-form-metni {
    white-space: pre-wrap; margin: 0; padding: 10px 12px; max-height: 36rem; overflow: auto;
    background: var(--kp-yuzey-2); border: 1px solid var(--kp-cizgi); border-radius: 8px;
}
.kp-form-yardim {
    max-width: 62rem; margin: 6px 0 14px; border: 1px solid var(--kp-cizgi); border-radius: 8px;
    background: var(--kp-yuzey);
}
.kp-form-yardim summary { padding: 10px 14px; cursor: pointer; font-weight: 700; font-size: .8125rem; }
.kp-form-yardim-ic {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 6px 22px;
    padding: 0 14px 12px;
}
.kp-form-yardim h3 { font-size: .8125rem; margin: 6px 0; }
.kp-form-yardim h4 { font-size: .75rem; margin: 10px 0 4px; color: var(--kp-metin-2); }
.kp-form-yardim table { border-collapse: collapse; width: 100%; }
.kp-form-yardim td { padding: 3px 6px 3px 0; font-size: .75rem; vertical-align: top;
                     border-bottom: 1px solid var(--kp-cizgi-2); color: var(--kp-metin-2); }
.kp-form-yardim td:first-child { white-space: nowrap; }
.kp-form-yardim code { font-size: .75rem; color: var(--kp-mor); }
.kp-form-yardim p { font-size: .75rem; color: var(--kp-metin-2); }
.kp-surum-dugmeler { align-items: center; }
.kp-surum-dugmeler .kp-durum-dugme { cursor: pointer; }

.kp-fark {
    max-width: 62rem; max-height: 36rem; overflow: auto; border: 1px solid var(--kp-cizgi);
    border-radius: 8px; background: var(--kp-yuzey);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; line-height: 1.5;
}
.kp-fark > div { padding: 0 10px; white-space: pre-wrap; }
.kp-fark .isaret { display: inline-block; width: 1.2em; font-weight: 700; }
.kp-fark .eklendi { background: var(--kp-yesil-bg); color: #13603d; }
.kp-fark .silindi { background: var(--kp-kirmizi-bg); color: #8e2a20; text-decoration: line-through; }
.kp-fark .atla { color: var(--kp-metin-3); font-style: italic; background: var(--kp-yuzey-2); }
ins { background: var(--kp-yesil-bg); text-decoration: none; }
del { background: var(--kp-kirmizi-bg); }