/* Harmony Fast panel stilleri — dış kaynak yok, sistem yazı tipleri */
:root {
  --zemin: #f5f6f8; --yuzey: #ffffff; --yuzey2: #eef1f5; --cizgi: #d9dee6;
  --metin: #1b2330; --soluk: #5b6676; --ana: #1f3a5f; --ana-acik: #e5ecf5; --vurgu: #2f6fb1;
  --iyi: #1f7a4d; --iyi-zemin: #e3f3ea; --uyari: #9a6400; --uyari-zemin: #fff3d6;
  --kotu: #b42318; --kotu-zemin: #fde7e5; --yaricap: 10px;
  --yazi: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --zemin:#12161c; --yuzey:#1a2029; --yuzey2:#222a35; --cizgi:#313b48; --metin:#e7ebf0; --soluk:#9aa6b5;
          --ana:#8fb4e3; --ana-acik:#1f2d40; --vurgu:#7fb0e8; --iyi:#6fd19c; --iyi-zemin:#17311f; --uyari:#f0c060;
          --uyari-zemin:#33280f; --kotu:#ff8a80; --kotu-zemin:#3a1a17; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--zemin); color: var(--metin); font: 15px/1.55 var(--yazi); }
a { color: var(--vurgu); }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.alt-baslik { color: var(--soluk); margin: 0 0 1.25rem; }

/* düzen */
.ust { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: 56px;
       padding: 0 16px; background: var(--yuzey); border-bottom: 1px solid var(--cizgi); }
.marka { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--metin); text-decoration: none; }
.logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #1f3a5f;
        color: #fff; font-size: 13px; }
.ust-bilgi { margin-left: auto; color: var(--soluk); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yan { position: fixed; top: 56px; bottom: 0; left: 0; width: 236px; overflow-y: auto; padding: 12px 10px 24px;
       background: var(--yuzey); border-right: 1px solid var(--cizgi); }
.yan a, .yan .link { display: block; padding: 7px 10px; border-radius: 8px; color: var(--metin); text-decoration: none;
                     font-size: 14px; width: 100%; text-align: left; }
.yan a:hover, .yan .link:hover { background: var(--yuzey2); }
.yan a.aktif { background: var(--ana-acik); color: var(--ana); font-weight: 600; }
.yan-grup { margin: 14px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--soluk); }
.surum { margin: 18px 10px 0; font-size: 12px; color: var(--soluk); }
.icerik { margin-left: 236px; padding: 24px 28px 64px; max-width: 1240px; }
.tek { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }
.menu-ac, .menu-dugme { display: none; }
@media (max-width: 860px) {
  .menu-dugme { display: block; font-size: 22px; cursor: pointer; padding: 4px 8px; }
  .yan { transform: translateX(-100%); transition: transform .2s; z-index: 30; width: 260px; }
  .menu-ac:checked ~ .yan { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .icerik { margin-left: 0; padding: 16px 16px 64px; }
  .ust-bilgi { display: none; }
}

/* bileşenler */
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 18px; margin-bottom: 16px; }
a.kart { display: block; color: inherit; text-decoration: none; } a.kart:hover { border-color: var(--vurgu); } a.kart .bilgi { color: var(--soluk); }
.kart h2:first-child, .kart h3:first-child { margin-top: 0; }
.izgara { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sayi-kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 16px; }
.sayi-kart .deger { font-size: 1.7rem; font-weight: 700; }
.sayi-kart .etiket { color: var(--soluk); font-size: 13px; }
.satir { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ara { margin-left: auto; }
.btn, button.btn, input[type=submit] { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px;
       border: 1px solid var(--ana); background: var(--ana); color: #fff; font: 600 14px var(--yazi); text-decoration: none; cursor: pointer; }
@media (prefers-color-scheme: dark) { .btn, button.btn, input[type=submit] { color: #0d1520; } }
.btn.ikincil { background: transparent; color: var(--ana); }
.btn.tehlike { background: var(--kotu); border-color: var(--kotu); color: #fff; }
.btn.kucuk { padding: 5px 10px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
button.link { background: none; border: 0; color: var(--vurgu); cursor: pointer; font: inherit; padding: 0; }
.rozet { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--yuzey2); color: var(--soluk); }
.rozet.iyi { background: var(--iyi-zemin); color: var(--iyi); }
.rozet.uyari { background: var(--uyari-zemin); color: var(--uyari); }
.rozet.kotu { background: var(--kotu-zemin); color: var(--kotu); }
.mesaj { padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; background: var(--ana-acik); }
.mesaj.success { background: var(--iyi-zemin); color: var(--iyi); }
.mesaj.warning { background: var(--uyari-zemin); color: var(--uyari); }
.mesaj.error { background: var(--kotu-zemin); color: var(--kotu); }
.bilgi { color: var(--soluk); font-size: 13.5px; }
.uyari-kutu { padding: 12px 14px; border-radius: 8px; background: var(--uyari-zemin); color: var(--uyari); margin: 10px 0; }
.hata-kutu { padding: 12px 14px; border-radius: 8px; background: var(--kotu-zemin); color: var(--kotu); margin: 10px 0; }

/* tablolar */
.tablo-kap { overflow-x: auto; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
th { font-size: 12.5px; color: var(--soluk); font-weight: 600; background: var(--yuzey2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.sag, th.sag { text-align: right; }
.bos { padding: 28px; text-align: center; color: var(--soluk); }

/* formlar */
form.form { max-width: 760px; }
.alan { margin-bottom: 14px; }
.alan label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.alan .yardim { font-size: 12.5px; color: var(--soluk); margin-top: 3px; }
.alan .alan-hata { color: var(--kotu); font-size: 13px; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search],
input[type=url], input[type=tel], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--yuzey);
  color: var(--metin); font: 15px var(--yazi); }
textarea { min-height: 120px; }
input[type=checkbox] { width: 18px; height: 18px; vertical-align: middle; }
.onay-satiri label { display: inline; font-weight: normal; margin-left: 6px; }
.form-dugmeler { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.filtre { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filtre input, .filtre select { width: auto; min-width: 160px; }

/* giriş */
.giris-kap { max-width: 420px; margin: 8vh auto; padding: 0 16px; }
.giris-kap .kart { padding: 28px; }
.giris-kap h1 { margin-bottom: 4px; }
.panel-linkleri { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 20px; }
.panel-linkleri a { display: block; padding: 16px; border: 1px solid var(--cizgi); border-radius: var(--yaricap);
                    background: var(--yuzey); text-decoration: none; color: var(--metin); font-weight: 600; }

/* öğrenci */
.harita { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin: 12px 0; }
.harita div { height: 34px; border-radius: 6px; background: var(--yuzey2); display: grid; place-items: center; font-size: 12px; color: var(--soluk); }
.harita div.tamam { background: var(--iyi-zemin); color: var(--iyi); font-weight: 700; }
.harita div.simdi { outline: 2px solid var(--vurgu); color: var(--vurgu); font-weight: 700; }
@media (max-width: 520px) { .harita { grid-template-columns: repeat(6, 1fr); } }
.buyuk-dugme { display: block; text-align: center; padding: 18px; font-size: 18px; border-radius: 12px; }
.cizgi-grafik { width: 100%; height: auto; }
.kod { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
pre.kod { white-space: pre-wrap; background: var(--yuzey2); padding: 12px; border-radius: 8px; }
.sayfalama { display: flex; gap: 8px; margin: 12px 0; align-items: center; }
details summary { cursor: pointer; font-weight: 600; }
.yazdir-gizle { }
@media print { .ust, .yan, .yazdir-gizle { display: none !important; } .icerik { margin: 0; } }
.rapor-onizleme { width: 100%; height: 1150px; border: 1px solid var(--cizgi); border-radius: var(--yaricap); background: #fff; }