/*
 * BŞEÜ BM Bölüm Portalı: arayüz stilleri.
 * Görünüm: OBS'ye yakın seçenek A:
 * renk geçişli koyu lacivert sol menü, renkli simge kutuları ve öğenin altında açılan (akordeon) alt menüler; beyaz üst
 * çubuk (arama, Sorun bildir, çıkış) ve altında konum satırı; açık gri-mavi zemin; 16-20px köşeli, yumuşak gölgeli beyaz
 * kartlar; hap biçimli düğmeler; koyu lacivert alt bilgi şeridi. Telefonda (860px altı) menü içeriğin üstünde açılan koyu
 * panel, tablolar alt alta kartlar. Satır içi stil kullanılmaz (CSP). Yazdırmada kabuk basılmaz; staj evrakı ve çıktı
 * sayfaları ayrı stil kullanır (staj/evrak.css).
 */

:root {
  color-scheme: light;

  /* Yazı ölçeği (kök 14px): 12, 13, 14, 16, 22px */
  --y1: 0.8572rem;
  --y2: 0.929rem;
  --y3: 1rem;
  --y4: 1.143rem;
  --y5: 1.571rem;
  --satir: 1.5;
  --satir-baslik: 1.3;

  /* Metin: lacivert; ikincil ve soluk metin örnekteki soluk tonun koyuları: kullanıldıkları açık zeminlerde en az 4,5:1 (AA;
     karşıtlık testi test/obs-f1.test.ts) */
  --yazi: #1a2b4b;
  --lacivert: #1a2b4b;
  --ikincil: #57677e;
  --soluk: #607088;
  --soluk2: #9fb4cc;          /* alt bilgi şeridi (koyu zeminde 7,4:1; MÜDEK'teki .kabuk-alt ile aynı) */

  /* Yüzey ve çizgi */
  --zemin: #eef2f7;
  --kart: #ffffff;
  --bant: #f7fafc;            /* tablo başlığı, panel altı */
  --cizgi: rgba(26, 43, 75, 0.09);
  --cizgi-ince: rgba(26, 43, 75, 0.06);
  --cizgi-koyu: #d9e2ec;
  --giris-cizgi: #8193a8;     /* form alanı kenarı (3:1) */
  --satir-ust: #f2f6fa;
  --baslik-zemin: #f7fafc;
  --satir-serit: #f7fafc;
  --satir-isaret: #f3f8fd;    /* satır üzerine gelince */
  --golge: 0 10px 28px rgba(26, 43, 75, 0.06);
  --golge-kucuk: 0 2px 6px rgba(26, 43, 75, 0.06);

  /* Vurgu: ana düğmeler; kullanıcının seçtiği #2a7eb8'in bir ton koyusu: beyaz yazıyla 4,65:1 (AA en az 4,5:1; #2a7eb8 4,40:1).
     Bağlantı metni koyusu. */
  --vurgu: #297ab2;
  --vurgu-koyu: #1f6aa0;
  --vurgu-parlak: #3498db;
  --vurgu-acik: #e8f3fc;
  --vurgu-cizgi: #bcd9f0;
  --mavi2: #5dade2;

  /* Sol menü */
  --yan-gen: 248px;
  --yan-zemin: linear-gradient(180deg, #152a52 0%, #0e1d3c 50%, #0a1630 100%);
  --menu-yazi: #d3dcea;
  --menu-alt: #b9c7da;
  --menu-soluk: #8fa3c0;      /* başlıklar ve rol, koyu menüde 5,5:1 (MÜDEK'le aynı; tam denetim T) */

  /* Durum: ana / açık zemin / çizgi */
  --basari: #18794e;  --basari-acik: #e7f6ee;  --basari-cizgi: #bfe2cf;
  --uyari:  #8a4510;  --uyari-acik:  #fdf0e3;  --uyari-cizgi:  #f0cfa8;
  --hata:   #b03a2e;  --hata-acik:   #fcebea;  --hata-cizgi:   #efc4bf;
  --notr:   #4a5a70;  --notr-acik:   #eef2f6;  --notr-cizgi:   #d5dde6;

  --perde: rgba(10, 22, 48, 0.3);
  --odak: 2px solid var(--vurgu);

  --yaricap: 10px;
  --yaricap-buyuk: 20px;
  --kontrol: 2.571rem;        /* 36px */
  --kontrol-kucuk: 2.143rem;  /* 30px */
  --dokunma: 3.143rem;        /* 44px: telefonda en küçük hedef */
  --ust-cubuk: 64px;
  --dolgu: 1.25rem;
  --b1: 0.25rem;
  --b2: 0.5rem;
  --b3: 0.75rem;
  --b4: 1rem;
  --b5: 1.5rem;
  --b6: 2rem;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: var(--satir);
  color: var(--yazi);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Renk aileleri: öğe kendi tonunu --r, --r-koyu, --r-acik ile taşır */
:root, .renk-mavi { --r: #3498db; --r-koyu: #1f6aa0; --r-acik: #e8f3fc; }
.renk-yesil     { --r: #27ae60; --r-koyu: #18794e; --r-acik: #e7f6ee; }
.renk-mor       { --r: #8e44ad; --r-koyu: #6c3483; --r-acik: #f3eaf8; }
.renk-camgobegi { --r: #14b8a6; --r-koyu: #0e7490; --r-acik: #e2f5f3; }
.renk-turuncu   { --r: #e67e22; --r-koyu: #a85a14; --r-acik: #fdf0e3; }
.renk-kirmizi   { --r: #d0473a; --r-koyu: #a93226; --r-acik: #fcebea; }
.renk-indigo    { --r: #5b6bd5; --r-koyu: #3f4fb5; --r-acik: #eceefb; }
.renk-gri       { --r: #7b8aa0; --r-koyu: #4a5a70; --r-acik: #eef2f6; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--zemin); color: var(--yazi); }
a { color: var(--vurgu-koyu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--yazi); margin: 0; font-weight: 700; line-height: var(--satir-baslik); }
h1 { font-size: var(--y5); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: var(--y4); }
h3 { font-size: var(--y3); }
p { margin: 0 0 var(--b2); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: var(--odak); outline-offset: 2px; }
.muted { color: var(--ikincil); }
.small { font-size: var(--y1); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--y1); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Satır içi simge (src/views/simgeler.tsx): çizgi, yazı rengi */
.ik {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.testmode { background: var(--hata); color: #fff; text-align: center; font-size: var(--y1); font-weight: 600; padding: 5px 16px; }

/* ------------------------------------------------------------ Kabuk: sol menü + üst çubuk + konum + içerik + alt bilgi
   Masaüstü: solda tam boy menü (yapışkan), sağda beyaz üst çubuk (yapışkan), konum satırı, içerik ve alt bilgi şeridi.
   Telefon (860px altı): üst çubuk iki satır (menü düğmesi, logo, düğmeler; altında arama); menü içeriğin üstünde açılan
   koyu panel (onay kutusu #navtoggle; JavaScript'siz de çalışır). */

.kabuk { position: relative; display: grid; grid-template-columns: var(--yan-gen) minmax(0, 1fr); min-height: 100vh; background: #0a1630; }
.kabuk-yan {
  grid-column: 1; grid-row: 1; position: sticky; top: 0; height: 100vh; z-index: 30;
  display: flex; flex-direction: column; background: var(--yan-zemin); color: var(--menu-yazi);
}
.kabuk-ana { grid-column: 2; grid-row: 1; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--zemin); }
.navtoggle, .menu-perdesi, .menu-dugme, .ust-logo { display: none; }

/* Logo (beyaz daire içinde renkli) ve iki satır başlık */
.kabuk-marka {
  display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px; flex: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07); text-decoration: none;
}
.kabuk-marka:hover { text-decoration: none; }
.logo-daire { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #ffffff; }
.logo-daire img { display: block; width: 38px; height: 38px; }
.kabuk-marka-ad { display: flex; flex-direction: column; min-width: 0; }
.kabuk-marka-ad > span { color: #ffffff; font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.kabuk-marka-ad strong { margin-top: 3px; color: var(--menu-soluk); font-size: 12px; font-weight: 500; }

/* Menü: renkli simge kutulu ana öğeler, kategori başlıkları; etkin öğe mavi geçişli zeminde, solunda açık mavi şerit */
.kabuk-menu {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 16px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.menu-liste { list-style: none; margin: 0; padding: 0; }
/* Ortak kabuk: soluk menü yazıları (başlık, alt başlık, rol, kurum) ve alt bilgi MÜDEK'le aynı boyut ve renkte (tam denetim T) */
.menu-baslik {
  display: block; padding: 16px 10px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--menu-soluk);
}
.modul { position: relative; }
.modul + .modul { margin-top: 2px; }
.menu-ogesi {
  display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 6px 10px; border-radius: 12px;
  font-size: 13.5px; font-weight: 500; color: var(--menu-yazi); text-decoration: none;
}
.modul.alti > .menu-ogesi { padding-right: 44px; }
.menu-ogesi:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; text-decoration: none; }
.menu-ogesi .ad { flex: 1; min-width: 0; }
.menu-ogesi.etkin {
  color: #ffffff; font-weight: 600;
  background: linear-gradient(90deg, rgba(52, 152, 219, 0.42) 0%, rgba(52, 152, 219, 0.08) 100%);
  box-shadow: inset 3px 0 0 var(--mavi2);
}
.kabuk-yan .ikon-kutu {
  width: 30px; height: 30px; border-radius: 9px; color: #ffffff;
  background: linear-gradient(140deg, color-mix(in srgb, var(--r) 82%, #0b1834) 0%, color-mix(in srgb, var(--r) 36%, #0b1834) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 4px 10px rgba(0, 0, 0, 0.25);
}
.kabuk-yan .ikon-kutu .ik { width: 16px; height: 16px; }

/* Akordeon: alt sayfalar öğenin altında açılır (details/summary: JavaScript'siz de çalışır). Açma düğmesi satırın sağındaki
   ok; öğenin kendisi modülün sayfasına gider. Sayfanın ait olduğu modül açık gelir. */
.alt > summary {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center;
  list-style: none; cursor: pointer; border-radius: 12px; color: var(--menu-yazi);
}
.alt > summary::-webkit-details-marker { display: none; }
.alt > summary:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.alt > summary .ok { width: 15px; height: 15px; opacity: 0.7; transition: transform 0.15s; }
.alt[open] > summary .ok { transform: rotate(90deg); }
.alt-grup { padding: 2px 0 6px; }
.alt-etiket {
  display: block; padding: 8px 12px 3px 51px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--menu-soluk);
}
.alt-grup ul { list-style: none; margin: 0; padding: 0; }
.alt-bag {
  display: block; position: relative; padding: 8px 12px 8px 51px; border-radius: 10px;
  font-size: 13px; color: var(--menu-alt); text-decoration: none;
}
.alt-grup li + li > .alt-bag::before {
  content: ""; position: absolute; left: 51px; right: 12px; top: 0; height: 1px; background: rgba(255, 255, 255, 0.06);
}
.alt-bag:hover { color: #ffffff; background: rgba(255, 255, 255, 0.05); text-decoration: none; }
.alt-bag.etkin { color: #ffffff; font-weight: 600; background: linear-gradient(90deg, rgba(93, 173, 226, 0.22), rgba(93, 173, 226, 0.04)); }
.alt-bag.etkin::after {
  content: ""; position: absolute; left: 38px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--mavi2);
}
.kabuk-yan a:focus-visible, .kabuk-yan button:focus-visible, .kabuk-yan summary:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }

/* Kullanıcı kartı: menünün altında; baş harf kutusu, ad, rol; Profil ve Çıkış */
.kabuk-kim { flex: none; padding: 14px 14px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.kisi { display: flex; align-items: center; gap: 10px; }
.bas-harf {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: linear-gradient(140deg, rgba(93, 173, 226, 0.35), rgba(93, 173, 226, 0.1)); border: 1px solid rgba(93, 173, 226, 0.3);
  color: #cfe6f8; font-size: 13px; font-weight: 800;
}
.kabuk-kim-ad { margin: 0; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.kabuk-kim-ad strong { color: #ffffff; font-size: 12.5px; overflow-wrap: anywhere; }
.kabuk-kim-ad span { color: var(--menu-soluk); font-size: 12px; }
.kabuk-kim-baglar { display: flex; gap: 8px; margin-top: 12px; }
.kabuk-kim-baglar > * { flex: 1 1 0; min-width: 0; }
.hap-koyu, .hap-cikis {
  width: 100%; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px;
  border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.hap-koyu .ik, .hap-cikis .ik { width: 14px; height: 14px; }
.hap-koyu { border: 1px solid rgba(255, 255, 255, 0.16); background: none; color: var(--menu-yazi); }
.hap-koyu:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; text-decoration: none; }
.hap-cikis { border: 1px solid rgba(220, 90, 75, 0.3); background: rgba(192, 57, 43, 0.2); color: #f3a093; }
.hap-cikis:hover { background: rgba(192, 57, 43, 0.32); color: #ffffff; }

/* Üst çubuk: beyaz, yapışkan; arama kutusu, sağda Sorun bildir ve çıkış */
.kabuk-ust {
  position: sticky; top: 0; z-index: 20; height: var(--ust-cubuk); display: flex; align-items: center; gap: 12px; padding: 0 24px;
  background: #ffffff; border-bottom: 1px solid var(--cizgi); box-shadow: 0 2px 12px rgba(26, 43, 75, 0.04);
}
.arama {
  position: relative; display: flex; align-items: center; gap: 9px; width: 360px; min-width: 0; height: 38px; margin: 0; padding: 0 14px;
  background: #ffffff; border: 1px solid #dfe7f0; border-bottom: 2px solid var(--mavi2); border-radius: 14px;
  box-shadow: 0 2px 8px rgba(26, 43, 75, 0.05); color: var(--soluk);
}
.arama .ik { width: 16px; height: 16px; }
.arama input:not([type=checkbox]):not([type=radio]) {
  flex: 1; width: auto; min-width: 0; min-height: 0; height: 100%; padding: 0; border: 0; border-radius: 0; outline: 0;
  background: transparent; color: var(--yazi); font-size: 13px;
}
.arama input::placeholder { color: var(--soluk); }
/* Klavye odağı kutunun kendisinde görünür: öteki alanlarla aynı halka (içteki alanın ayrı halkası yok) */
.arama:focus-within { border-color: var(--vurgu-cizgi); border-bottom-color: var(--vurgu); outline: var(--odak); outline-offset: 2px; }
.arama input:focus { box-shadow: none; }
/* Açılır liste (app.js, JavaScript varsa): kutunun altında, gruplu sonuçlar; en altta arama sayfasını açan düğme (formu gönderir) */
.arama-liste {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: max(100%, 440px); max-width: calc(100vw - 32px); max-height: 70vh;
  overflow-y: auto; padding: 6px; background: #ffffff; border: 1px solid #dfe7f0; border-radius: 14px; box-shadow: 0 18px 40px rgba(26, 43, 75, 0.16);
}
.arama-liste[hidden] { display: none; }
.arama-liste .grup { margin: 0; padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ikincil); }
.arama-liste a, .arama-liste .tumu { display: block; padding: 7px 10px; border-radius: 10px; color: var(--yazi); }
.arama-liste a:hover, .arama-liste a:focus-visible, .arama-liste .tumu:hover, .arama-liste .tumu:focus-visible { background: var(--satir-isaret); text-decoration: none; outline: none; box-shadow: inset 0 0 0 2px var(--vurgu-cizgi); }
.arama-liste a strong { display: block; font-size: 13px; font-weight: 600; }
.arama-liste a span { display: block; overflow: hidden; font-size: 12px; color: var(--ikincil); text-overflow: ellipsis; white-space: nowrap; }
.arama-liste .durum { margin: 0; padding: 10px; font-size: 12.5px; color: var(--ikincil); }
.arama-liste .durum.uyari { color: var(--uyari); }
.arama-liste .tumu {
  width: 100%; margin-top: 4px; border: 0; border-top: 1px solid var(--cizgi); border-radius: 0 0 10px 10px; background: none;
  font: inherit; font-weight: 600; text-align: left; color: var(--vurgu-koyu); cursor: pointer;
}
.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ust-sag form { margin: 0; }
.ust-dugme {
  height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 9px;
  background: #ffffff; border: 1px solid #dde5ee; border-radius: 12px; box-shadow: var(--golge-kucuk);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--yazi); cursor: pointer; text-decoration: none;
}
.ust-dugme:hover { border-color: #b8c8da; text-decoration: none; }
.ust-dugme .ik { width: 17px; height: 17px; }
.ust-dugme.metinli { padding: 0 13px; }
.ust-dugme:disabled { background: #f6f8fb; color: var(--soluk); box-shadow: none; cursor: not-allowed; }
.ust-dugme:disabled:hover { border-color: #dde5ee; }

/* Konum satırı: "Ana sayfa > Modül > Sayfa"; ayraç okuyucuya okunmaz */
.konum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 16px 24px 0; font-size: 12.5px; color: var(--ikincil); }
.konum a, .konum .son { display: inline-flex; align-items: center; gap: 6px; }
.konum a { color: var(--ikincil); }
.konum a:hover { color: var(--vurgu-koyu); }
.konum .ik { width: 14px; height: 14px; }
.konum .ayrac { width: 13px; height: 13px; opacity: 0.55; }
.konum .son { color: var(--yazi); font-weight: 600; }

.icerik { flex: 1; display: block; min-width: 0; width: 100%; max-width: 96rem; padding: 14px 24px 28px; }
main.icerik:focus-visible { outline: none; }
@media (min-width: 861px) { html { scroll-padding-top: var(--ust-cubuk); } }

/* Alt bilgi şeridi: yıl, üniversite, bölüm, KVKK, on4 Yazılım (yalnız ekranda; yazdırmada gizli) */
.alt-bilgi {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; padding: 13px 24px;
  text-align: center; font-size: 12px; color: var(--soluk2);
  background: linear-gradient(90deg, #0b1832 0%, #0f2145 50%, #0b1832 100%);
}
.alt-bilgi a { color: var(--soluk2); text-decoration: underline; text-underline-offset: 2px; }
.alt-bilgi a:hover { color: #ffffff; }
.alt-bilgi .ayr { opacity: 0.5; }
.alt-logo { display: block; width: 18px; height: 18px; opacity: 0.8; }
/* Marka satırı (giriş sayfaları): kartın altında */
.alt-marka { margin: var(--b6) 0 0; text-align: center; font-size: var(--y1); color: var(--ikincil); }
.alt-bilgi .alt-marka { margin: 0; font-size: inherit; color: inherit; }
/* "İçeriğe geç": Tab ile ilk odakta görünür */
.icerige-gec {
  position: absolute; top: var(--b2); left: var(--b2); z-index: 60; padding: var(--b2) var(--b3);
  background: var(--kart); border: 1px solid var(--vurgu); border-radius: var(--yaricap); font-weight: 600;
}
.icerige-gec:not(:focus) { width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 860px) {
  .kabuk { display: block; background: var(--zemin); --menu-ust-yedek: 125px; }
  .kabuk-yan { display: none; }
  .kabuk-ana { min-height: 100vh; }
  .kabuk-ust {
    position: relative; height: auto; padding: 12px; gap: 0; background: #eef3f8; box-shadow: none;
    display: grid; grid-template-columns: auto auto 1fr auto; column-gap: 10px; row-gap: 12px;
    grid-template-areas: "menu logo . sag" "ara ara ara ara";
  }
  .menu-dugme {
    grid-area: menu; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
    background: linear-gradient(140deg, #1b3463, #0b1834); box-shadow: 0 6px 14px rgba(11, 24, 52, 0.3); color: #ffffff;
  }
  .menu-dugme .ik { width: 22px; height: 22px; }
  .ust-logo { grid-area: logo; display: block; width: 42px; height: 42px; align-self: center; }
  .arama { grid-area: ara; width: auto; height: 44px; }
  .arama-liste { width: 100%; max-width: none; }
  /* Arama kutusu olmayan kişide (öğrenci) üst çubuk tek satır */
  .kabuk.aramasiz { --menu-ust-yedek: 69px; }
  .kabuk.aramasiz .kabuk-ust { grid-template-areas: "menu logo . sag"; }
  /* iOS odakta sayfayı büyütmesin */
  .arama input:not([type=checkbox]):not([type=radio]) { font-size: 16px; }
  .ust-sag { grid-area: sag; gap: 6px; }
  /* Sorun bildir ve Çıkış: en az 44x44 dokunma hedefi (MÜDEK'in üst çubuğuyla aynı; tam denetim önerisi 0) */
  .ust-dugme, .ust-dugme.metinli { width: var(--dokunma); height: var(--dokunma); padding: 0; }
  .ust-dugme.metinli span { display: none; }
  .konum { padding: 12px 16px 0; }
  .icerik { padding: 12px 16px 24px; }
  .alt-bilgi { flex-direction: column; gap: 3px; padding: 16px; }
  .alt-bilgi .ayr { display: none; }

  /* Onay kutusu görünmez ama klavyeyle odaklanır; odağı menü düğmesinde görünür */
  .navtoggle { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .navtoggle:focus-visible ~ .kabuk-ana .menu-dugme { outline: 2px solid var(--vurgu); outline-offset: 2px; }
  .navtoggle:checked ~ .kabuk-ana .menu-dugme { box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.45); }
  /* Açık menü: üst çubuğun 7px altında, içeriğin üstünde koyu panel; dışına dokununca (perde) kapanır. Çubuğun alt kenarını
     app.js ölçer (--menu-ust: yazı boyutu ya da çubuk değişse de çakışmaz); JavaScript yoksa çubuğun bilinen yüksekliği
     (--menu-ust-yedek: iki satır 125px, arama kutusu olmayan kişide tek satır 69px). */
  .navtoggle:checked ~ .kabuk-yan {
    display: flex; position: absolute; top: calc(var(--menu-ust, var(--menu-ust-yedek)) + 7px); left: 12px; right: 12px; bottom: auto; width: auto; height: auto; z-index: 40;
    padding: 6px 2px 4px; border-radius: 22px; box-shadow: 0 24px 60px rgba(5, 12, 30, 0.4);
  }
  .navtoggle:checked ~ .menu-perdesi { display: block; position: fixed; inset: 0; z-index: 35; background: var(--perde); }
  .kabuk-marka { display: none; }
  .kabuk-menu { flex: 1 0 auto; overflow: visible; padding: 8px 12px 10px; }
  .menu-ogesi { min-height: 54px; gap: 14px; font-size: 16px; }
  .modul.alti > .menu-ogesi { padding-right: 54px; }
  .kabuk-yan .ikon-kutu { width: 40px; height: 40px; border-radius: 12px; }
  .kabuk-yan .ikon-kutu .ik { width: 20px; height: 20px; }
  .alt > summary { width: 54px; height: 54px; }
  .menu-baslik { padding: 14px 10px 6px; }
  .alt-etiket { padding: 10px 12px 4px 64px; }
  .alt-bag { padding: 12px 12px 12px 64px; font-size: 15px; }
  .alt-grup li + li > .alt-bag::before { left: 64px; }
  .alt-bag.etkin::after { left: 50px; }
  .kabuk-kim { padding: 16px 16px 18px; }
  .hap-koyu, .hap-cikis { height: var(--dokunma); font-size: 13.5px; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .alt > summary .ok { transition: none; }
}

/* ------------------------------------------------------------ Sayfa başlığı */

.page-header { margin-bottom: var(--b4); }
.page-header h1 { color: var(--yazi); font-size: 22px; }
.crumbs { font-size: var(--y1); color: var(--ikincil); margin-bottom: var(--b1); }
.crumbs a { color: var(--ikincil); }
.crumbs a:hover { color: var(--vurgu-koyu); }
.page-header-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--b3) var(--b4); }
.page-header .lede { color: var(--ikincil); margin: 3px 0 0; max-width: 72ch; font-size: var(--y2); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--b2); }
.header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b1) var(--b4); margin-top: var(--b2); color: var(--ikincil); font-size: var(--y2); }

/* ------------------------------------------------------------ Kartlar ve paneller: beyaz, 20px köşe, yumuşak gölge */

.kart, .panel { position: relative; background: var(--kart); border: 1px solid var(--cizgi-ince); border-radius: var(--yaricap-buyuk); box-shadow: var(--golge); }
.panel { margin-bottom: var(--b4); }
.panel-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b1) var(--b3); min-height: 3.429rem;
  padding: 14px 18px 10px; border-bottom: 1px solid var(--cizgi-ince);
}
.panel-head h2 { font-size: 15.5px; font-weight: 700; color: var(--yazi); }
/* Başlık tek satırda kalır; yanındaki açıklama ya da düğmeler sığmazsa alt satıra geçer */
.panel-head > h2:first-child { flex: 1 0 auto; max-width: 100%; }
.panel-head .muted { font-size: var(--y2); }
.panel-body { padding: 16px 18px 18px; }
.panel-body > :last-child { margin-bottom: 0; }
.panel-foot { padding: var(--b3) 18px; border-top: 1px solid var(--cizgi-ince); background: var(--bant); border-radius: 0 0 var(--yaricap-buyuk) var(--yaricap-buyuk); }
/* Kenarsız panel (tablo): köşeler yuvarlak kalsın */
.panel.flush { overflow: hidden; }
.panel.flush .panel-body { padding: 0; }
/* Formun son düğmesinden sonra gelen panel düğmeye yapışmasın (panel aralığıyla aynı; kenar boşlukları birleşir) */
form + .panel { margin-top: var(--b4); }

/* Simge kutusu: açık tonlu, renkli simge (menüdeki koyu zeminli hali yukarıda) */
.ikon-kutu {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--r-koyu);
  background: linear-gradient(140deg, #ffffff 0%, var(--r-acik) 100%);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--r) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--r) 16%, transparent);
}
.ikon-kutu .ik { width: 18px; height: 18px; }
.ikon-kutu.kucuk { width: 28px; height: 28px; border-radius: 50%; }
.ikon-kutu.kucuk .ik { width: 15px; height: 15px; }

/* Bildirim kutuları: açık tonlu renk geçişi, ince kenar, durum renginde metin */
.notice {
  margin-bottom: var(--b4); padding: 12px 16px; border-radius: 16px; color: #1f5f8f;
  border: 1px solid rgba(52, 152, 219, 0.22); background: linear-gradient(100deg, #e3f0fb 0%, #f3f9fe 55%, #ffffff 100%);
  box-shadow: 0 8px 22px rgba(52, 152, 219, 0.07);
}
.notice strong { display: block; margin-bottom: 2px; }
.notice p { margin: var(--b1) 0 0; }
.notice-success { color: var(--basari); border-color: rgba(39, 174, 96, 0.24); background: linear-gradient(100deg, #e1f3e8 0%, #f1faf4 55%, #ffffff 100%); box-shadow: 0 8px 22px rgba(39, 174, 96, 0.07); }
.notice-error { color: var(--hata); border-color: rgba(208, 71, 58, 0.24); background: linear-gradient(100deg, #fbe4e2 0%, #fdf2f1 55%, #ffffff 100%); box-shadow: 0 8px 22px rgba(208, 71, 58, 0.07); }
.notice-warn { color: var(--uyari); border-color: rgba(230, 126, 34, 0.24); background: linear-gradient(100deg, #ffefdd 0%, #fff7ee 55%, #ffffff 100%); box-shadow: 0 8px 22px rgba(230, 126, 34, 0.08); }
.notice-info { color: #1f5f8f; }
.notice a { color: inherit; text-decoration: underline; }
.devcode { border: 1px dashed var(--uyari-cizgi); background: var(--uyari-acik); border-radius: var(--yaricap); padding: var(--b2) var(--b3); margin-bottom: var(--b4); font-size: var(--y2); }
.devcode strong { font-family: ui-monospace, Menlo, monospace; font-size: var(--y4); letter-spacing: 0.12em; }

/* ------------------------------------------------------------ Durum ve ders etiketleri: hap biçiminde, açık tonlu */

.status {
  --r: var(--notr); --r-acik: var(--notr-acik);
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--r); background: var(--r-acik);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r) 18%, transparent);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.s-draft { --r: var(--notr); --r-acik: var(--notr-acik); }
.status.s-submitted { --r: var(--vurgu-koyu); --r-acik: var(--vurgu-acik); }
.status.s-revision_requested { --r: var(--uyari); --r-acik: var(--uyari-acik); }
.status.s-approved { --r: var(--basari); --r-acik: var(--basari-acik); }
.status.s-rejected { --r: var(--hata); --r-acik: var(--hata-acik); }
.status-box { box-shadow: inset 0 0 0 1px currentColor; }
.course-code { display: inline-block; font-weight: 700; font-size: var(--y1); letter-spacing: 0.02em; color: var(--vurgu-koyu); background: var(--vurgu-acik); border: 1px solid var(--vurgu-cizgi); border-radius: 6px; padding: 0 6px; }
.course-cell { display: grid; gap: 2px; }
.course-cell span:last-child { color: var(--ikincil); font-size: var(--y1); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tags li { border: 1px solid var(--cizgi-koyu); border-radius: 999px; padding: 1px 10px; font-size: var(--y1); color: var(--ikincil); background: var(--bant); }

/* ------------------------------------------------------------ Tablolar: açık başlık satırı, ince satır çizgisi */

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.data th {
  text-align: left; font-size: 11.5px; font-weight: 700; color: var(--ikincil); padding: 11px 14px;
  background: var(--baslik-zemin); border-bottom: 1px solid var(--cizgi-ince); white-space: nowrap;
}
table.data td { font-size: 13px; padding: 12px 14px; border-bottom: 1px solid var(--cizgi-ince); vertical-align: top; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--satir-isaret); }
table.data td.title-cell { min-width: 260px; }
table.data td.title-cell a { font-weight: 600; color: var(--yazi); }
table.data td.title-cell a:hover { color: var(--vurgu-koyu); }
table.data td.num, table.data th.num { text-align: right; }
table.data tr.inactive td { color: var(--soluk); }
table.matrix td.num a { display: inline-block; min-width: 2.2em; font-weight: 600; }
table.matrix td.num a.zero { color: var(--soluk); font-weight: 400; }

/* Telefonda tablo satırları alt alta kartlar olur; yana taşma yok. Sütun başlığını her hücreye app.js yazar (data-etiket)
   ve tabloyu "kartli" işaretler; JavaScript kapalıysa tablo bugünkü gibi yana kayar. İlk hücre kartın başlığıdır. Toplam
   satırı (tfoot) da etiketli bir karttır. Yalnız ekranda: basılı çıktıda (raporlar) tablo tablo olarak kalır. */
@media screen and (max-width: 860px) {
  table.data.kartli thead { display: none; }
  table.data.kartli, table.data.kartli tbody, table.data.kartli tfoot, table.data.kartli tr, table.data.kartli td { display: block; width: auto; }
  table.data.kartli tbody tr, table.data.kartli tfoot tr { padding: 12px 14px 14px; border-top: 1px solid var(--cizgi-ince); }
  table.data.kartli tbody tr:first-child { border-top: 0; }
  table.data.kartli tfoot tr { background: var(--satir-ust); border-top-color: var(--cizgi-koyu); }
  table.data.kartli tfoot td { background: none; }
  table.data.kartli td {
    position: relative; min-width: 0; min-height: 1.75em; padding: 4px 0 4px 100px; border: 0;
    text-align: left; white-space: normal; overflow-wrap: anywhere;
  }
  /* Rapor hücrelerindeki satır sonları (ör. ekipteki öğrenciler alt alta) kartta da kalır */
  table.data.kartli.report td { white-space: pre-line; }
  table.data.kartli td[data-etiket]::before {
    content: attr(data-etiket); position: absolute; left: 0; top: 6px; width: 88px;
    font-size: 11.5px; font-weight: 700; line-height: 1.3; color: var(--ikincil); overflow-wrap: anywhere;
  }
  table.data.kartli td:not([data-etiket]) { padding-left: 0; }
  table.data.kartli td:first-child { padding: 0 0 8px; font-weight: 600; }
  table.data.kartli td:empty { display: none; }
  table.data.kartli td.title-cell { min-width: 0; }
  table.data.kartli tbody tr:hover td { background: transparent; }
  table.data.kartli .nowrap, table.data.kartli .status { white-space: normal; }
  table.data.kartli td .btn, table.data.kartli td .inline-form { margin-top: 4px; }
}

/* Süzgeç çubuğu: beyaz sorgu satırı */
.toolbar { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); align-items: end; gap: var(--b2) var(--b3); padding: 14px 18px; border-bottom: 1px solid var(--cizgi-ince); background: var(--kart); }
.toolbar label { display: grid; gap: 3px; min-width: 0; font-size: var(--y2); font-weight: 600; color: var(--ikincil); }
.toolbar select, .toolbar input { width: 100%; text-overflow: ellipsis; }
.toolbar .grow { grid-column: span 2; }
.result-count { padding: var(--b2) 18px; font-size: var(--y1); color: var(--ikincil); border-bottom: 1px solid var(--cizgi-ince); background: var(--bant); }

/* Boş durum: kesik çizgili kutu içinde ortalı soluk metin */
.empty { padding: var(--b5) var(--b4); text-align: center; color: var(--ikincil); background: var(--bant); border: 1px dashed #c9d6e3; border-radius: 14px; }
/* Kenarsız panelde (tablo yerine boş durum) panel kenarına yapışmasın */
.panel.flush .empty { margin: var(--b4); }
.empty strong { display: block; color: var(--yazi); font-size: var(--y3); font-weight: 700; margin-bottom: var(--b1); }
.empty .btn { margin-top: var(--b3); }

/* ------------------------------------------------------------ Sekmeler (hap biçiminde segmentler) ve sayı kutuları */

.tabs {
  display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; padding: 4px; margin-bottom: var(--b4);
  border-radius: 20px; background: linear-gradient(180deg, #e3eaf2, #e9eff6);
}
.tabs a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ikincil); text-decoration: none;
}
.tabs a:hover { color: var(--yazi); background: rgba(255, 255, 255, 0.5); text-decoration: none; }
.tabs a.active { background: #ffffff; color: var(--vurgu-koyu); box-shadow: 0 4px 14px rgba(26, 43, 75, 0.1); }
.tabs .tab-count {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.75);
  font-size: 11.5px; font-weight: 700; color: var(--ikincil); font-variant-numeric: tabular-nums;
}
.tabs a.active .tab-count { background: var(--vurgu-acik); color: var(--vurgu-koyu); }
@media (max-width: 600px) {
  .tabs { display: grid; grid-template-columns: 1fr 1fr; width: auto; border-radius: 18px; }
  .tabs a { justify-content: center; min-height: var(--dokunma); padding: 0 10px; border-radius: 14px; text-align: center; }
}

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--b4); margin-bottom: var(--b4); }
.kpi {
  position: relative; overflow: hidden; padding: 14px 16px 12px; border-radius: 16px; color: inherit; text-decoration: none;
  background: linear-gradient(140deg, var(--r-acik) 0%, #ffffff 72%); border: 1px solid color-mix(in srgb, var(--r) 16%, transparent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--r) 9%, transparent);
}
.kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--r) 0%, color-mix(in srgb, var(--r) 15%, transparent) 100%); }
a.kpi:hover { border-color: var(--r); text-decoration: none; }
.kpi-label { font-size: var(--y2); color: var(--ikincil); }
.kpi-value { font-size: 1.857rem; line-height: 1.2; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; color: var(--yazi); }
.kpi-sub { font-size: var(--y1); color: var(--ikincil); }

/* ------------------------------------------------------------ Düğmeler: hap biçiminde; ana düğme mavi, ikincil beyaz */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--kontrol); padding: 0 16px;
  border-radius: 999px; border: 1px solid #cfdbe7; background: #ffffff; color: var(--yazi); box-shadow: 0 2px 6px rgba(26, 43, 75, 0.05);
  font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: #9fb6cf; text-decoration: none; }
.btn .ik { width: 15px; height: 15px; }
.btn-primary { background: var(--vurgu); border-color: var(--vurgu); color: #fff; box-shadow: 0 8px 18px rgba(52, 152, 219, 0.3); }
.btn-primary:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); }
.btn-success { background: var(--basari); border-color: var(--basari); color: #fff; box-shadow: 0 8px 18px rgba(39, 174, 96, 0.22); }
.btn-success:hover { background: #12603e; border-color: #12603e; }
.btn-warn { color: var(--uyari); border-color: var(--uyari-cizgi); }
.btn-warn:hover { background: var(--uyari-acik); border-color: var(--uyari); }
.btn-danger { color: var(--hata); border-color: var(--hata-cizgi); }
.btn-danger:hover { background: var(--hata-acik); border-color: var(--hata); }
.btn-sm { min-height: var(--kontrol-kucuk); padding: 0 12px; font-size: 12px; }
.btn-sm .ik { width: 14px; height: 14px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
button.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--vurgu-koyu); cursor: pointer; }
button.linklike:hover { text-decoration: underline; }
.inline-form { display: inline; margin: 0; }
/* "Yazdır / PDF" düğmesi (data-print) yalnız JavaScript'le çalışır (app.js: window.print). JavaScript kapalıyken gizlenir;
   sayfa tarayıcının kendi Yazdır komutuyla basılır. Bu özelliği tanımayan eski tarayıcıda düğme eskisi gibi görünür (tam
   denetim önerisi 4; staj belgelerinde aynı kural public/staj/evrak.css'te). */
@media (scripting: none) {
  [data-print] { display: none !important; }
}

/* ------------------------------------------------------------ Formlar */

.field { margin-bottom: var(--b4); }
.field:last-child { margin-bottom: 0; }
.label { display: block; font-weight: 600; color: var(--yazi); margin-bottom: 0.3rem; }
.label .req { color: var(--hata); margin-left: 2px; }
.label .opt { color: var(--ikincil); font-weight: 400; margin-left: 4px; }
.help { font-size: var(--y1); color: var(--ikincil); margin: 0.3rem 0 0; }
.panel-body > .help:first-child, .form-section-body > .help:first-child { margin: 0 0 var(--b3); }
.field-error { color: var(--hata); font-size: var(--y1); margin: 0.3rem 0 0; }

input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; min-height: var(--kontrol); font: inherit; color: var(--yazi); background: var(--kart);
  border: 1px solid var(--giris-cizgi); border-radius: var(--yaricap); padding: 0.3rem 0.7rem; font-variant-numeric: tabular-nums;
}
textarea { padding: 0.5rem 0.7rem; min-height: 84px; resize: vertical; line-height: 1.45; }
input:not([type=checkbox]):not([type=radio]):hover, select:hover, textarea:hover { border-color: var(--ikincil); }
input:focus, select:focus, textarea:focus { border-color: var(--vurgu); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--odak); outline-offset: 2px; }
input:disabled, input[readonly] { background: var(--satir-ust); color: var(--ikincil); }
input::placeholder, textarea::placeholder { color: var(--soluk); }
.has-error input, .has-error select, .has-error textarea { border-color: var(--hata); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--vurgu); flex: none; }
input[type=file] { min-height: 0; border: none; padding: 0; }

.narrow-col { max-width: 640px; }
.choice-list { display: grid; gap: var(--b2); padding-top: 2px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--b4); }
.form-grid .span-2 { grid-column: 1 / -1; }
.check { display: flex; gap: var(--b2); align-items: flex-start; cursor: pointer; }
.check input { margin-top: 2px; }
.radio-row { display: flex; flex-wrap: wrap; gap: var(--b2) var(--b5); padding-top: var(--b1); }
.check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--b2) var(--b4); padding: var(--b3) var(--b4); border: 1px solid var(--cizgi-ince); border-radius: 14px; background: var(--bant); }
.word-count { margin: 0.3rem 0 0; font-size: var(--y1); color: var(--ikincil); text-align: right; font-variant-numeric: tabular-nums; }
.word-count.over { color: var(--hata); font-weight: 600; }

/* Form bölümü: kart; başlıkta numara kutusu ve açıklama */
.form-section { background: var(--kart); border: 1px solid var(--cizgi-ince); border-radius: var(--yaricap-buyuk); box-shadow: var(--golge); margin-bottom: var(--b4); }
.form-section-head { display: flex; gap: var(--b3); padding: 14px 18px 12px; border-bottom: 1px solid var(--cizgi-ince); }
.form-section-head .sec-no {
  flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--vurgu-acik); color: var(--vurgu-koyu);
  box-shadow: inset 0 0 0 1px rgba(52, 152, 219, 0.2); display: grid; place-items: center; font-size: var(--y1); font-weight: 700;
}
.form-section-head h2 { font-size: 15.5px; font-weight: 700; color: var(--yazi); }
.form-section-head p { margin: 2px 0 0; color: var(--ikincil); font-size: var(--y1); }
.form-section-body { padding: 16px 18px 18px; }
.subsection { padding-top: var(--b4); margin-top: var(--b4); border-top: 1px dashed var(--cizgi-koyu); }
.subsection:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.subsection h3 { margin-bottom: var(--b3); color: var(--yazi); }
.readonly-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b2) var(--b4); margin: 0 0 var(--b4); padding: var(--b3) var(--b4); background: var(--bant); border: 1px solid var(--cizgi-ince); border-radius: 14px; }
.readonly-list dt { font-size: var(--y1); color: var(--ikincil); }
.readonly-list dd { margin: 1px 0 0; font-weight: 500; overflow-wrap: anywhere; }

/* Kaydet çubuğu: yapışkan beyaz şerit */
.form-actions {
  position: sticky; bottom: var(--b3); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--b2);
  padding: var(--b2) var(--b3); background: var(--kart); border: 1px solid var(--cizgi-ince); border-radius: 16px; box-shadow: 0 10px 28px rgba(26, 43, 75, 0.1);
}
.form-actions .hint { margin-right: auto; font-size: var(--y1); color: var(--ikincil); }

/* ------------------------------------------------------------ Başvuru detayı */

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--b4); align-items: start; }
.detail-aside { position: sticky; top: calc(var(--ust-cubuk) + var(--b4)); display: grid; gap: var(--b4); }
.detail-aside .panel { margin-bottom: 0; }
.meta-list { margin: 0; display: grid; gap: var(--b3); }
.meta-list div { display: grid; gap: 1px; }
.meta-list dt { font-size: var(--y1); color: var(--ikincil); }
.meta-list dd { margin: 0; overflow-wrap: anywhere; }
.content-block + .content-block { margin-top: var(--b4); padding-top: var(--b4); border-top: 1px solid var(--cizgi); }
.content-block h3 { font-size: var(--y2); font-weight: 600; color: var(--lacivert); margin-bottom: var(--b2); }
.content-block .body { line-height: 1.65; }
.prev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b3); }
.prev-card { border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: var(--b3) var(--b4); }
.prev-card h4 { margin: 0 0 var(--b2); font-size: var(--y2); }

.decision-actions { display: grid; gap: var(--b2); margin-top: var(--b3); }
.decision-actions .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b2); }
.divider { height: 1px; background: var(--cizgi); margin: var(--b3) 0; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 var(--b4) 18px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--vurgu); }
.timeline li::after { content: ""; position: absolute; left: 6.5px; top: 18px; bottom: 2px; width: 1px; background: var(--cizgi-koyu); }
.timeline li:last-child::after { display: none; }
.timeline li.ev-approved::before { background: var(--basari); }
.timeline li.ev-revision_requested::before { background: var(--uyari); }
.timeline li.ev-rejected::before { background: var(--hata); }
.timeline li.ev-edited::before { background: var(--notr); }
.timeline .ev-title { font-weight: 600; font-size: var(--y2); }
.timeline .ev-meta { font-size: var(--y1); color: var(--ikincil); }
.timeline .ev-note { margin-top: var(--b1); font-size: var(--y2); background: var(--satir-serit); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 7px 10px; }

/* ------------------------------------------------------------ Giriş sayfaları
   Solda sol menünün koyu lacivertinde kurum bilgisi (beyaz logo); sağda açık zeminde beyaz form kartı. OBS'nin ya da
   üniversitenin Ortak Giriş Sistemi'nin giriş sayfasına benzetilmez (başlıkta portalın adı). */

.auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; }
.auth-brand { background: var(--yan-zemin); color: var(--menu-yazi); padding: 48px 56px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: var(--b3); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { flex: none; width: 44px; height: 44px; }
.brand-name { display: grid; gap: 2px; line-height: 1.3; }
.brand-name strong { color: #ffffff; font-size: var(--y3); font-weight: 700; }
.brand-name span { color: var(--menu-soluk); font-size: var(--y1); }
.auth-brand .brand { margin-bottom: 64px; }
.auth-brand h1 { color: #ffffff; font-size: 2rem; line-height: 1.25; max-width: 18ch; }
.auth-brand .lede { color: var(--menu-alt); margin: var(--b4) 0 var(--b6); max-width: 46ch; }
.auth-courses { list-style: none; padding: 0; margin: 0 0 var(--b6); display: grid; gap: var(--b2); }
.auth-courses li { display: flex; gap: var(--b3); align-items: baseline; }
.auth-courses .course-code { background: rgba(93, 173, 226, 0.18); border-color: rgba(93, 173, 226, 0.3); color: #ffffff; }
.auth-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--b3); counter-reset: step; max-width: 46ch; }
.auth-steps li { counter-increment: step; display: grid; grid-template-columns: 26px 1fr; gap: var(--b3); color: var(--menu-yazi); }
.auth-steps li::before { content: counter(step); width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.18); display: grid; place-items: center; font-size: var(--y1); color: #ffffff; }
.auth-brand .foot { margin-top: auto; padding-top: 40px; font-size: var(--y1); color: var(--menu-soluk); }
.auth-brand .foot a { color: var(--menu-yazi); text-decoration: underline; }
.auth-main { display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 40px 24px; background: var(--zemin); }
.auth-card { width: 100%; max-width: 30rem; background: var(--kart); border: 1px solid var(--cizgi-ince); border-radius: var(--yaricap-buyuk); box-shadow: var(--golge); padding: var(--b6); }
.auth-card h1 { font-size: var(--y5); color: var(--yazi); margin-bottom: var(--b1); }
.auth-card .sub { color: var(--ikincil); margin-bottom: var(--b5); }
.auth-card .btn-primary { width: 100%; min-height: 2.857rem; margin-top: var(--b1); font-size: var(--y2); }
.bot-check { margin: var(--b1) 0 var(--b3); min-height: 65px; }
.auth-alt { margin-top: var(--b5); padding-top: var(--b4); border-top: 1px solid var(--cizgi); font-size: var(--y2); color: var(--ikincil); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--b2); }

/* ------------------------------------------------------------ Duyarlı düzen */

@media (max-width: 1080px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .detail-aside { position: static; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-brand { padding: var(--b4) var(--b4); }
  .auth-brand .brand { margin-bottom: 0; }
  .auth-brand h1, .auth-brand .lede, .auth-courses, .auth-steps, .auth-brand .foot { display: none; }
  .auth-main { place-items: start center; padding: var(--b5) var(--b4); }
  .auth-card { padding: var(--b5); }
}

@media (max-width: 640px) {
  h1 { font-size: 1.357rem; }
  .form-grid, .readonly-list, .prev-grid { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .form-section-head, .form-section-body { padding-left: var(--b4); padding-right: var(--b4); }
  .form-actions { padding: var(--b2) var(--b3); }
  .form-actions .hint { display: none; }
  .form-actions .btn { flex: 1 1 auto; }
  .toolbar { grid-template-columns: 1fr 1fr; }
}

/* Telefon ve dokunmatik ekran: düğme ve girdi en az 44px; girdi yazısı 16px (iOS odakta sayfayı büyütmesin) */
@media (max-width: 600px), (pointer: coarse) {
  :root { --kontrol: var(--dokunma); }
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
}

/* ------------------------------------------------------------ Benzerlik analizi */

.sim-banner {
  display: flex; align-items: center; gap: var(--b5); padding: var(--b4) var(--b5); margin-bottom: var(--b4);
  border: 1px solid var(--cizgi-koyu); border-left-width: 6px; border-radius: 16px; background: var(--kart); box-shadow: var(--golge);
}
.sim-score { display: grid; justify-items: center; min-width: 108px; text-align: center; }
.sim-num { font-size: 38px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.sim-cap { font-size: var(--y1); color: var(--ikincil); margin-top: var(--b1); }
.sim-text { flex: 1; min-width: 0; }
.sim-text strong { display: block; font-size: var(--y4); margin-bottom: 3px; }
.sim-text p { margin: 2px 0 0; }
.sim-meta { font-size: var(--y1); color: var(--ikincil); }
.sim-high { border-color: var(--hata-cizgi); border-left-color: var(--hata); background: var(--hata-acik); }
.sim-high .sim-num, .sim-high .sim-text strong { color: var(--hata); }
.sim-mid { border-color: var(--uyari-cizgi); border-left-color: #b98316; background: var(--uyari-acik); }
.sim-mid .sim-num, .sim-mid .sim-text strong { color: var(--uyari); }
.sim-low { border-color: var(--basari-cizgi); border-left-color: var(--basari); background: var(--basari-acik); }
.sim-low .sim-num, .sim-low .sim-text strong { color: var(--basari); }
.sim-none { border-left-color: var(--cizgi-koyu); background: var(--satir-serit); }
.sim-none .sim-num { color: var(--soluk); }

.sim-pill { display: inline-block; min-width: 50px; text-align: center; padding: 2px 8px; border-radius: var(--yaricap); font-weight: 700; font-size: var(--y2); font-variant-numeric: tabular-nums; color: #fff; }
.sim-pill.sim-high { background: var(--hata); }
.sim-pill.sim-mid { background: #8a5a00; }
.sim-pill.sim-low { background: var(--basari); }
.sim-pill.sim-none { background: var(--satir-serit); color: var(--soluk); border: 1px solid var(--cizgi); }
.sim-summary { margin-top: 6px; font-size: var(--y2); }
.sim-summary summary { cursor: pointer; color: var(--vurgu-koyu); font-size: var(--y1); }
.sim-summary p { margin-top: 6px; color: var(--ikincil); }

@media (max-width: 640px) {
  .sim-banner { flex-wrap: wrap; gap: var(--b3); }
  .sim-score { min-width: 0; justify-items: start; }
}
.sim-scale { display: flex; gap: var(--b2); flex-wrap: wrap; margin: var(--b1) 0 var(--b3); }

/* ------------------------------------------------------------ Yönetici işareti */
.flag-mark { display: inline-block; margin-left: var(--b2); padding: 0 6px; border-radius: var(--yaricap); background: var(--hata); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; vertical-align: 1px; white-space: nowrap; }
.flag-notice { border-left: 6px solid currentColor; }
.toolbar .flag-filter { display: flex; align-items: center; gap: var(--b2); color: var(--ikincil); font-weight: 500; align-self: center; }
.kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-alert { --r: #d0473a; --r-acik: var(--hata-acik); }
.kpi-alert .kpi-value { color: var(--hata); }
@media (max-width: 1080px) { .kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpis-5 { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------ Takvim */
.calendar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--b4); }
.calendar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b2); }
.calendar-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--b3); align-items: baseline; }
.calendar-list .cal-name { font-weight: 600; }
.calendar-list .cal-range { grid-column: 1 / -1; color: var(--ikincil); font-size: var(--y2); }
@media (max-width: 900px) { .calendar-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ KVKK */
.kvkk h2 { font-size: var(--y4); color: var(--lacivert); margin: var(--b4) 0 6px; }
.kvkk p, .kvkk li { line-height: 1.6; color: var(--ikincil); }
.kvkk ul { padding-left: 20px; margin: 0 0 var(--b2); }
.kvkk-consent { margin: var(--b3) 0 6px; }

/* ------------------------------------------------------------ Ekip */
.team-list { list-style: none; margin: 0 0 var(--b1); padding: 0; display: grid; gap: var(--b2); }
.team-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--b3); padding-bottom: var(--b2); border-bottom: 1px solid var(--cizgi); }
.team-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.tag-soft { display: inline-block; margin-left: var(--b2); font-size: 11px; font-weight: 600; color: var(--vurgu-koyu); background: var(--vurgu-acik); border-radius: var(--yaricap); padding: 0 6px; vertical-align: 1px; }
.team-add { margin-top: var(--b3); padding-top: var(--b3); border-top: 1px dashed var(--cizgi-koyu); }
.inline-input { display: flex; gap: var(--b2); }
.inline-input input { max-width: 240px; }

/* Hatırlatma e-postaları (Ayarlar) */
.help-list { margin: var(--b3) 0; padding-left: 18px; color: var(--ikincil); font-size: var(--y2); display: grid; gap: var(--b1); }
.inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b2); margin: var(--b3) 0 0; }
.panel-subhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px var(--b3); margin-bottom: var(--b2); }
.panel-subhead h3 { margin: 0; font-size: var(--y3); color: var(--lacivert); }
.mail-preview summary { cursor: pointer; color: var(--yazi); }
.mail-preview pre { white-space: pre-wrap; font: inherit; font-size: var(--y1); color: var(--ikincil); background: var(--satir-serit); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: var(--b2) var(--b3); margin: var(--b2) 0 0; max-width: 60ch; }
.meta-list dd .status + .status { margin-left: 10px; }

/* MÜDEK raporları */
.report-filter { border: 1px solid var(--cizgi-ince); border-radius: var(--yaricap-buyuk); box-shadow: var(--golge); margin-bottom: var(--b4); }
.report-title { font-size: var(--y4); color: var(--lacivert); margin: 0 0 var(--b1); }
.report-lede { color: var(--ikincil); margin: 0 0 var(--b4); max-width: 90ch; font-size: var(--y2); }
.report-note { padding: var(--b2) var(--b4); margin: 0; font-size: var(--y1); color: var(--ikincil); border-bottom: 1px solid var(--cizgi); }
.panel-body > .report-note:last-child { border-bottom: 0; }
table.report td { white-space: pre-line; }
table.report td:first-child { white-space: nowrap; }
table.data tfoot td { font-weight: 600; background: var(--satir-ust); border-top: 1px solid var(--cizgi-koyu); border-bottom: 0; }
.kpis-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1080px) { .kpis-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpis-6 { grid-template-columns: 1fr 1fr; } }
.print-only { display: none; }
table.report td.nowrap { white-space: nowrap; }
table.report td.zero { color: var(--soluk); }

/* Başvuru formu: çalışma şekli ve ekip */
.team-fields { margin-top: var(--b3); display: grid; gap: var(--b3); }
.team-no-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--b2); margin-top: 6px; }
.team-no-grid > div { display: grid; gap: 3px; }
.team-nos[hidden] { display: none; }
@media (max-width: 640px) { .team-no-grid { grid-template-columns: 1fr; } }

/* Kullanıcı profili: şifre işlemleri */
.pw-actions form { margin: 0; }
.pw-actions .check { display: flex; align-items: center; gap: 6px; margin: var(--b1) 0 var(--b2); }
.pw-show { font-size: 17px; letter-spacing: 0.06em; user-select: all; }

/* Staj modülü */
.meta-list.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b3) var(--b4); }
@media (max-width: 640px) { .meta-list.cols-2 { grid-template-columns: 1fr; } }
.stack { display: grid; gap: var(--b2); margin-top: var(--b3); }
.detail-aside form + form { margin-top: var(--b2); }
.plain-list { list-style: none; margin: var(--b2) 0 0; padding: 0; display: grid; gap: 6px; }
.tatil-list { list-style: none; margin: 0 0 var(--b3); padding: 0; display: grid; gap: var(--b1); }
.tatil-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.tatil-list li.gecmis { color: var(--soluk); }
.bitis-onizleme { margin: 6px 0 0; padding: var(--b2) 10px; border-radius: var(--yaricap); background: var(--satir-serit); border: 1px solid var(--cizgi); font-weight: 600; }
.kvkk-details { margin-bottom: var(--b3); }
.kvkk-details summary { cursor: pointer; color: var(--vurgu-koyu); font-weight: 500; }
.kvkk-details .kvkk { margin-top: 10px; font-size: var(--y2); }
.tarih-uyari { margin: var(--b3) 0 10px; }

/* Staj mülakatı */
.copy-input { width: 100%; font-family: ui-monospace, monospace; font-size: var(--y2); }
.copy-area { width: 100%; margin-top: var(--b2); font-size: var(--y2); }
table.musaitlik td, table.musaitlik th { text-align: center; }
table.musaitlik td:first-child { text-align: left; }
table.olcut td { vertical-align: middle; }
table.olcut td .check { justify-content: center; }
.sonuc-ozet dd { font-size: var(--y4); font-weight: 600; }
.randevu-form { padding: 10px 0 14px; border-bottom: 1px solid var(--cizgi); margin-bottom: 10px; }
.randevu-form:last-child { border-bottom: 0; margin-bottom: 0; }
.mezun-talep { padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
.mezun-talep:last-child { border-bottom: 0; }

/* Stajyer listesi */
.kpi-aktif { border-color: var(--vurgu); background: var(--vurgu-acik); }
.yapildi-isareti { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: var(--basari); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }


/* ------------------------------------------------------------ Portal ana sayfası: karşılama, modül kartları, bölüm takvimi */

.karsilama {
  display: flex; gap: 24px; align-items: flex-start; padding: 26px 30px 24px; margin-bottom: var(--b4); overflow: hidden;
  /* Süs renk geçişleri metnin altına da gelebilir (telefonda metin tam genişlikte): en koyu üst üste geldikleri yerde de metin
     en az 4,5:1 kalacak kadar açık (test/obs-f1.test.ts) */
  background:
    radial-gradient(420px 220px at 88% 30%, rgba(93, 173, 226, 0.1), transparent 70%),
    radial-gradient(360px 200px at 70% 110%, rgba(142, 68, 173, 0.04), transparent 70%),
    linear-gradient(115deg, #ffffff 0%, #f5f8fc 42%, #f0f5fa 100%);
}
.karsilama-sol { flex: 1; min-width: 0; }
.karsilama .selam { margin: 0; font-size: 13.5px; color: var(--ikincil); }
.karsilama h1 { margin-top: 4px; font-size: 28px; line-height: 1.15; overflow-wrap: anywhere; }
.karsilama .unvan { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--vurgu-koyu); }
.karsilama .kurum { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--ikincil); }
.cizgi-sus { display: block; width: 56px; height: 3px; margin: 16px 0 14px; border-radius: 3px; background: linear-gradient(90deg, #2a7eb8, #5dade2 60%, rgba(93, 173, 226, 0.2)); }
.hizli { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hizli-baslik { margin-right: 4px; font-size: 12.5px; font-weight: 700; color: var(--vurgu-koyu); }
.hizli .btn { white-space: normal; text-align: left; }
.hizli .btn .ik { color: var(--r-koyu); }
.karsilama-sag { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.bilgi-hap {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 16px 6px 6px; border-radius: 999px; white-space: nowrap;
  background: #ffffff; border: 1px solid var(--cizgi); box-shadow: 0 6px 16px rgba(26, 43, 75, 0.06); font-size: 12.5px; color: var(--ikincil);
}
.bilgi-hap b { color: var(--yazi); }

/* Izgara: satırda üç kart (altı sütunun ikişer sütunu), sağda bölüm takvimi (iki satır boyu); takvim yoksa yalnız kartlar.
   Son satırda iki kart kalırsa ikisi satırı eşit paylaşır ("genis": üçer sütun); tek kartın geniş ve boş kalması yok. */
.ana-izgara { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) 340px; gap: 16px; }
.ana-izgara.takvimsiz { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ana-izgara .takvim-kart { grid-column: 7; grid-row: 1 / span 2; }
.ana-izgara .sayac { grid-column: span 2; }
.ana-izgara .sayac.genis { grid-column: span 3; }

/* Modül kartı: açık tonlu renk geçişi, üstte renk şeridi; simge kutusu, ad, açıklama, büyük sayı, bağlantı. Veri gibi
   görünen süs grafiği yok (MÜDEK'teki kararla aynı). */
.sayac {
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 178px; padding: 18px 18px 16px;
  border-radius: 16px; color: inherit; text-decoration: none;
  background: linear-gradient(140deg, var(--r-acik) 0%, #ffffff 72%); border: 1px solid color-mix(in srgb, var(--r) 16%, transparent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--r) 9%, transparent);
}
.sayac::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--r) 0%, color-mix(in srgb, var(--r) 15%, transparent) 100%); }
a.sayac:hover { border-color: color-mix(in srgb, var(--r) 45%, transparent); text-decoration: none; }
a.sayac:hover .sayac-bag { text-decoration: underline; }
.sayac-bas { display: flex; align-items: center; gap: 10px; }
.sayac-bas .modul-ad { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--yazi); }
.sayac-aciklama { margin-top: 8px; font-size: 12px; color: var(--ikincil); }
.sayac-sayi { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; color: var(--yazi); }
/* Yazı uzunsa kendi sütununda alt satıra geçer; devamı sayının altına değil, yazının başına hizalı */
.sayac-sayi small { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: 0; color: var(--ikincil); }
.sayac-sayi.bekliyor { color: #b9601a; }
.sayac .modul-ozet { margin-top: 8px; font-size: 12.5px; }
.sayac-alt { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 12px; }
.sayac-bag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--r-koyu); }
.sayac-bag .ik { width: 14px; height: 14px; }
.modul-ozet { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 3px; color: var(--yazi); }
.modul-ozet li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: var(--b2); border-radius: 50%; background: color-mix(in srgb, var(--r) 45%, #c9d6e3); vertical-align: 2px; }
.modul-ozet li.vurgu { color: var(--uyari); font-weight: 600; }
.modul-ozet li.vurgu::before { background: #e67e22; }
.notice .modul-ozet { margin: 0; color: inherit; }

/* Bölüm takvimi: turuncu tonlu kart; dikey zaman çizgisi, süren dönem vurgulu */
.takvim-kart {
  display: flex; flex-direction: column; padding: 18px 18px 14px; overflow: hidden;
  background: linear-gradient(165deg, #fff1e2 0%, #fff8f0 45%, #ffffff 100%);
}
.takvim-kart::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #e67e22, rgba(230, 126, 34, 0.15));
}
.panel-bas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-bas h2 { font-size: 15.5px; font-weight: 700; }
.zaman { list-style: none; margin: 14px 0 0; padding: 0; position: relative; }
.zaman::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 16px; width: 2px; border-radius: 2px; background: rgba(230, 126, 34, 0.3); }
.zaman li { position: relative; padding-left: 26px; }
.zaman li + li { margin-top: 4px; }
.zaman .nokta { position: absolute; left: 1px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: #ffffff; border: 2.5px solid #e67e22; }
.zaman .zm { padding: 6px 10px; border-radius: 10px; }
.zaman b { display: block; font-size: 12.5px; }
.zaman small { display: block; margin-top: 1px; font-size: 12px; color: var(--ikincil); }
.zaman li.simdi .zm { background: rgba(230, 126, 34, 0.12); }
.zaman li.simdi .nokta { background: #e67e22; box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.18); }
.zaman li.simdi small { color: #8a4510; font-weight: 600; }

/* Modül sayfası: ekran bağlantıları */
.modul-baglantilari { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--b3); }
.modul-baglanti {
  display: block; padding: var(--b3) var(--b4); border-radius: 16px; color: inherit; text-decoration: none;
  background: linear-gradient(140deg, var(--vurgu-acik) 0%, #ffffff 72%); border: 1px solid rgba(52, 152, 219, 0.16); box-shadow: var(--golge-kucuk);
}
.modul-baglanti:hover { border-color: var(--vurgu); text-decoration: none; }
.modul-baglanti > span { display: grid; gap: 2px; }
.modul-baglanti strong { color: var(--vurgu-koyu); }

@media (max-width: 1240px) and (min-width: 861px) {
  .ana-izgara, .ana-izgara.takvimsiz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ana-izgara .takvim-kart { grid-column: 1 / -1; grid-row: auto; }
  .ana-izgara .sayac, .ana-izgara .sayac.genis { grid-column: auto; }
}
@media (max-width: 860px) {
  .karsilama { flex-direction: column; gap: 16px; padding: 22px 20px; }
  .karsilama h1 { font-size: 24px; }
  .karsilama-sag { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .ana-izgara, .ana-izgara.takvimsiz { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ana-izgara .takvim-kart { grid-column: auto; grid-row: auto; order: 9; }
  .ana-izgara .sayac, .ana-izgara .sayac.genis { grid-column: auto; }
}

/* ------------------------------------------------------------ Arama sayfası, Sorun bildir penceresi ve listesi (OBS görünümü S1p) */

.arama-grubu .panel-head h2 { display: flex; align-items: center; gap: 8px; }
.arama-grubu .tab-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--vurgu-acik); color: var(--vurgu-koyu); font-size: 11px; font-weight: 700; }
.arama-sonuclari { list-style: none; margin: 0; padding: 0; }
.arama-sonuclari li + li { border-top: 1px solid var(--cizgi-ince); }
.arama-sonuclari a { display: block; padding: 11px 18px; color: var(--yazi); }
.arama-sonuclari a:hover { background: var(--satir-isaret); text-decoration: none; }
.arama-sonuclari strong { display: block; font-weight: 600; color: var(--vurgu-koyu); }
.arama-sonuclari span { display: block; font-size: var(--y1); color: var(--ikincil); overflow-wrap: anywhere; }

/* Pencere (dialog): ortada, telefonda kenarlardan 16px */
.pencere {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--yaricap-buyuk);
  background: var(--kart); color: var(--yazi); box-shadow: 0 24px 60px rgba(5, 12, 30, 0.35);
}
.pencere::backdrop { background: rgba(10, 22, 48, 0.45); }
.pencere-form { padding: 22px 24px 20px; }
.pencere-form h2 { margin-bottom: var(--b2); }
.pencere-dugmeler { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: var(--b4); }
@media (max-width: 600px) {
  .pencere-form { padding: 18px 16px 16px; }
  .pencere-dugmeler .btn { flex: 1; min-height: var(--dokunma); }
}

.sorun-listesi { display: grid; gap: var(--b4); }
.sorun .panel-head h2 { font-size: var(--y3); }
.sorun .pre { margin-bottom: var(--b4); }
.sorun-ayrinti { margin-bottom: var(--b4); padding: var(--b3) 0; border-top: 1px solid var(--cizgi-ince); border-bottom: 1px solid var(--cizgi-ince); }
.sorun-ayrinti dd { margin: 0; overflow-wrap: anywhere; }
.sorun-form { display: grid; grid-template-columns: 180px 1fr auto; gap: var(--b3); align-items: end; }
.sorun-form .field { margin: 0; }
.sorun-form textarea { min-height: 2.6rem; }
@media (max-width: 760px) { .sorun-form { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Yazdırma: kabuk basılmaz; içerik eski düzenindedir
   Basılı çıktı (MÜDEK raporları, listeler) OBS görünümünden önceki (Arayüz 2) görünümündedir ve aynı sayfa sayısında basılır:
   renk ve ölçü değişkenleri, yazı boyutları ve aralıklar eski değerlerine döner; ekrana özgü süsler (renk şeridi, gölge, renk
   geçişi, hap köşe) ve telefon düzeni (tablo kartları) basılmaz. Önce/sonra PDF karşılaştırması ekran turunda (F1). */

@media print {
  @page { size: A4 landscape; margin: 12mm; }
  :root {
    --yazi: #18212f; --lacivert: #0d2847; --ikincil: #5d6675; --soluk: #6b7280;
    --bant: #f3f5f8; --cizgi: #dfe4eb; --cizgi-ince: #dfe4eb; --cizgi-koyu: #d2d9e2; --giris-cizgi: #8a919d;
    --satir-ust: #eef1f5; --baslik-zemin: #e5eaf1; --satir-serit: #f8f9fb;
    --vurgu: #1d5fd1; --vurgu-koyu: #174da9; --vurgu-acik: #eef3fc; --vurgu-cizgi: #c7d7f4;
    --basari: #18794e; --basari-acik: #edf7f1; --basari-cizgi: #bfe2cf;
    --uyari: #8a5a00; --uyari-acik: #fdf6e3; --uyari-cizgi: #ecd9a4;
    --hata: #b42318; --hata-acik: #fdf0ee; --hata-cizgi: #f1c7c1;
    --notr: #5d6675; --notr-acik: #f1f3f6; --notr-cizgi: #d5d9e0;
    --yaricap: 3px; --yaricap-buyuk: 4px; --kontrol: 2.286rem; --kontrol-kucuk: 2rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  body, :root { background: #fff !important; }
  body { font-size: 11px; }
  .kabuk-yan, .kabuk-ust, .konum, .alt-bilgi, .menu-perdesi, .navtoggle, .icerige-gec, .page-actions, .tabs, .toolbar, .testmode, .crumbs, .notice, .alt-marka, .pencere { display: none !important; }
  .kabuk, .kabuk-ana { display: block !important; background: #fff !important; min-height: 0; }
  .icerik { max-width: none !important; padding: 0 !important; }
  .print-only { display: inline; }
  *, *::before, *::after { box-shadow: none !important; }
  .kpi::before, .sayac::before, .takvim-kart::before { display: none; }
  h1, h3, .report-title { font-weight: 600; }
  .muted { color: var(--soluk); }
  .page-header { margin-bottom: 22px; padding-bottom: 0; border-bottom: 0; }
  .page-header h1, .panel-head h2, .report-title { color: inherit; }
  .page-header h1 { font-size: var(--y5); }
  .page-header .lede { font-size: inherit; margin-top: var(--b1); }
  .panel, .kart, .form-section { background: #fff !important; }
  /* Kartlar akıştaki sırayla basılır (eskisi gibi konumsuz; PDF metninin sırası da aynı kalır) */
  .panel, .kart, .kpi { position: static; }
  .panel { break-inside: auto; border-color: #bbb; border-radius: 4px; }
  .panel.flush { overflow: visible; }
  .panel-head { break-after: avoid; background: none; min-height: 0; padding: 13px 18px; border-bottom-color: var(--cizgi-koyu); }
  .panel-head h2, .form-section-head h2 { font-size: var(--y4); }
  .panel-body { padding: 16px 18px; }
  .panel-foot { padding: var(--b3) var(--dolgu); background: var(--satir-serit); }
  .result-count { padding: var(--b2) var(--b4); background: var(--satir-serit); }
  input:not([type=checkbox]):not([type=radio]), select { padding: 0.3rem 0.6rem; }
  textarea { padding: 0.45rem 0.6rem; }
  .form-section, .form-section-head { border-color: var(--cizgi-koyu); }
  .form-section-head { padding: 0.65rem var(--dolgu); background: var(--bant); }
  .form-section-body { padding: var(--dolgu); }
  .check-grid, .readonly-list { background: var(--satir-serit); border-radius: var(--yaricap); }
  .sim-banner { border-radius: var(--yaricap-buyuk); }
  /* Kaydet çubuğu kâğıtta yapışkan değil, formun sonunda: sayfanın ortasında içeriğin üstüne binmez (tam denetim T) */
  .form-actions { position: static; border-color: var(--cizgi-koyu); border-radius: var(--yaricap-buyuk); }
  .table-wrap { overflow: visible !important; }
  table.data th { background: #eee !important; font-size: 11.5px; font-weight: 600; color: #2a3546; padding: 10px 14px; border-bottom-color: var(--cizgi-koyu); }
  table.data td { padding: 11px 14px; font-size: inherit; background: none !important; }
  table.data td.small { font-size: var(--y1); }
  table.data td.title-cell a { font-weight: 500; }
  table.data tr { break-inside: avoid; }
  .kpis { gap: var(--b3); }
  .kpi { padding: var(--b3) var(--b4); background: var(--kart); border: 1px solid #bbb; border-radius: 4px; }
  .kpi-aktif { background: var(--vurgu-acik); }
  .kpi-alert { background: var(--hata-acik); }
  .kpi-value { font-weight: 600; }
  .status { min-height: 0; padding: 0; border-radius: 0; background: none; font-size: var(--y2); font-weight: 500; }
  .status::before { width: 7px; height: 7px; }
  .status.status-box { padding: 2px 8px; border: 1px solid currentColor; border-radius: var(--yaricap); background: var(--kart); }
  .course-code { font-weight: 600; color: var(--lacivert); border-radius: var(--yaricap); }
  .course-cell span:last-child { color: var(--soluk); }
  .tags li { padding: 1px 8px; border-radius: var(--yaricap); background: var(--satir-serit); }
  .label { font-weight: 500; }
  .btn { gap: var(--b1); padding: 0 0.85rem; border-radius: var(--yaricap); font-size: inherit; font-weight: 500; }
  .btn-sm { padding: 0 0.6rem; font-size: var(--y1); }
  .empty { background: var(--satir-serit); border-color: var(--cizgi-koyu); border-radius: var(--yaricap); }
  .empty strong { color: var(--ikincil); font-weight: 600; }
  a { color: inherit; text-decoration: none; }
}
/* Tarayıcı yazdırma düzenini dar sayfa genişliğiyle değerlendirdiğinde (ör. A4) eskisi gibi dar iç boşluk */
@media print and (max-width: 900px) {
  :root { --dolgu: 1rem; }
}