/* Kocasinan Belediyesi Ozel Kalem Ajandasi - yonetim paneli
   Sade, kurumsal, yuksek okunabilirlik. Marka renkleri yalnizca
   kategori rozetlerinde ve vurgularda kullanilir. */

:root {
  --marka-yesil:  #7AC141;
  --marka-mavi:   #00BBE4;
  --marka-kirmizi:#EE3523;
  --marka-mor:    #91268F;
  --marka-sari:   #FEC425;
  --marka-gri:    #706F72;

  --vurgu:        #0B7EA0;   /* marka camgobeginin okunakli koyu tonu */
  --vurgu-koyu:   #086079;
  --metin:        #1F2226;
  --metin-soluk:  #5C626B;
  --cizgi:        #DFE3E8;
  --zemin:        #F4F6F8;
  --kart:         #FFFFFF;
  --basari:       #1B7F4B;
  --hata:         #C2281C;
  --uyari-zemin:  #FFF6E0;

  --yuvarlak: 6px;
  --golge: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ ust bant */
.ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 20px;
  background: var(--kart); border-bottom: 1px solid var(--cizgi);
  position: sticky; top: 0; z-index: 20;
}
.marka { display: flex; align-items: center; gap: 12px; color: inherit; }
.marka:hover { text-decoration: none; }
.marka span { display: flex; flex-direction: column; line-height: 1.2; }
.marka strong { font-size: 15px; font-weight: 600; }
.marka small { font-size: 12px; color: var(--metin-soluk); }

.ust-sag { display: flex; align-items: center; gap: 14px; }
.kullanici { display: flex; flex-direction: column; text-align: right; line-height: 1.25; }
.kullanici strong { font-size: 14px; font-weight: 600; }
.kullanici small { font-size: 12px; color: var(--metin-soluk); }
.satir-ici { display: inline; }

/* --------------------------------------------------------------- yerlesim */
.govde { display: flex; min-height: calc(100vh - 110px); align-items: flex-start; }

.yan {
  width: 214px; flex: none; padding: 16px 12px;
  background: var(--kart); border-right: 1px solid var(--cizgi);
  min-height: calc(100vh - 110px);
  position: sticky; top: 55px;
}
.yan a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 2px;
  border-radius: var(--yuvarlak);
  color: var(--metin); font-size: 14.5px;
}
.yan a:hover { background: var(--zemin); text-decoration: none; }
.yan a.etkin { background: #E8F3F7; color: var(--vurgu-koyu); font-weight: 600; }
.yan svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.icerik { flex: 1; padding: 22px 26px; min-width: 0; }
.icerik.tam { padding: 40px 20px; }

.alt {
  padding: 12px 20px; font-size: 12.5px; color: var(--metin-soluk);
  border-top: 1px solid var(--cizgi); background: var(--kart);
}

/* ----------------------------------------------------------------- basliklar */
h1 { font-size: 21px; margin: 0 0 4px; font-weight: 600; }
h2 { font-size: 17px; margin: 0 0 12px; font-weight: 600; }
.sayfa-ust {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.alt-baslik { color: var(--metin-soluk); font-size: 13.5px; }

/* --------------------------------------------------------------------- kart */
.kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); box-shadow: var(--golge);
  padding: 18px; margin-bottom: 18px;
}
.kart.sik { padding: 0; overflow: hidden; }

.kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kutu {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 16px 18px; box-shadow: var(--golge);
}
.kutu .sayi { font-size: 26px; font-weight: 600; line-height: 1.1; }
.kutu .etiket { font-size: 13px; color: var(--metin-soluk); margin-top: 2px; }
.kutu.dikkat .sayi { color: var(--hata); }

/* ------------------------------------------------------------------- tablo */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
thead th {
  text-align: left; font-weight: 600; font-size: 13px;
  color: var(--metin-soluk); text-transform: uppercase; letter-spacing: .03em;
  padding: 10px 14px; background: #FAFBFC; border-bottom: 1px solid var(--cizgi);
  white-space: nowrap;
}
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #FAFBFC; }
td.sag, th.sag { text-align: right; }
td.dar { white-space: nowrap; width: 1%; }
.bos {
  padding: 40px 20px; text-align: center; color: var(--metin-soluk);
}

/* ------------------------------------------------------------------ rozet */
.rozet {
  display: inline-block; padding: 2px 9px; border-radius: 11px;
  font-size: 12px; font-weight: 600; line-height: 1.6;
  color: #fff; white-space: nowrap;
}
.rozet.acik { background: #EDF0F3; color: var(--metin-soluk); }
.rozet.uyari { background: var(--uyari-zemin); color: #8A5A00; }
.durum-bekliyor    { background: #EDF0F3; color: var(--metin-soluk); }
.durum-onaylandi   { background: #E4F3EA; color: var(--basari); }
.durum-iptal       { background: #FBE9E7; color: var(--hata); }
.durum-tamamlandi  { background: #E8F3F7; color: var(--vurgu-koyu); }
.durum-yeni        { background: #FFF2CC; color: #8A5A00; }
.durum-islemde     { background: #E8F3F7; color: var(--vurgu-koyu); }
.durum-reddedildi  { background: #FBE9E7; color: var(--hata); }

/* ------------------------------------------------------------------ dugme */
.dugme {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--yuvarlak);
  border: 1px solid var(--vurgu); background: var(--vurgu); color: #fff;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.dugme:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); text-decoration: none; }
.dugme.ikincil { background: var(--kart); color: var(--metin); border-color: var(--cizgi); }
.dugme.ikincil:hover { background: var(--zemin); }
.dugme.sessiz { background: transparent; border-color: transparent; color: var(--metin-soluk); }
.dugme.sessiz:hover { background: var(--zemin); color: var(--metin); }
.dugme.tehlike { background: var(--hata); border-color: var(--hata); }
.dugme.tehlike:hover { background: #9E1F15; border-color: #9E1F15; }
.dugme.kucuk { padding: 5px 11px; font-size: 13px; }
.dugme[disabled] { opacity: .55; cursor: not-allowed; }

/* -------------------------------------------------------------------- form */
.alan { margin-bottom: 14px; }
.alan label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.alan .ipucu { font-size: 12.5px; color: var(--metin-soluk); margin-top: 4px; }

input[type=text], input[type=password], input[type=email], input[type=search],
input[type=date], input[type=datetime-local], input[type=tel], select, textarea {
  width: 100%; padding: 8px 11px; font: inherit;
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  background: var(--kart); color: var(--metin);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid #A8D5E4; outline-offset: -1px; border-color: var(--vurgu);
}
textarea { min-height: 84px; resize: vertical; }
.alan.hatali input, .alan.hatali select, .alan.hatali textarea { border-color: var(--hata); }
.alan-hata { color: var(--hata); font-size: 12.5px; margin-top: 4px; }

.izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.onay { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.onay input { width: auto; }

/* ------------------------------------------------------------------- arama */
.suzgec {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 16px;
}
.suzgec .alan { margin-bottom: 0; }
.suzgec .genis { flex: 1 1 280px; }

/* ------------------------------------------------------------------- uyari */
.uyari {
  padding: 11px 15px; border-radius: var(--yuvarlak); margin-bottom: 16px;
  font-size: 14px; border: 1px solid transparent;
}
.uyari.basari { background: #E4F3EA; border-color: #BFE3CD; color: #10603A; }
.uyari.hata   { background: #FBE9E7; border-color: #F3C6C0; color: #8E1C13; }
.uyari.bilgi  { background: #E8F3F7; border-color: #C3E0EA; color: #075567; }

/* --------------------------------------------------------------- sayfalama */
.sayfalama { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.sayfalama a, .sayfalama span {
  padding: 6px 11px; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  background: var(--kart); font-size: 13.5px; color: var(--metin);
}
.sayfalama a:hover { background: var(--zemin); text-decoration: none; }
.sayfalama .simdi { background: var(--vurgu); border-color: var(--vurgu); color: #fff; font-weight: 600; }
.sayfalama .bosluk { border: 0; background: transparent; color: var(--metin-soluk); }

/* ------------------------------------------------------------------- giris */
.giris-kutu {
  max-width: 400px; margin: 6vh auto; background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: var(--golge);
  padding: 32px 30px;
}
.giris-kutu .logo { text-align: center; margin-bottom: 22px; }
.giris-kutu .logo img { height: 64px; }
.giris-kutu h1 { text-align: center; font-size: 18px; margin-bottom: 22px; }
.giris-kutu .dugme { width: 100%; justify-content: center; padding: 10px; }

/* -------------------------------------------------------------- telefonlar */
.tel-liste { list-style: none; margin: 0; padding: 0; }
.tel-liste li { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.tel-liste .tur { font-size: 11.5px; color: var(--metin-soluk); text-transform: uppercase; min-width: 34px; }
.tel-liste .no { font-variant-numeric: tabular-nums; }
.tel-liste .supheli { color: var(--metin-soluk); }
.tel-liste .supheli::after { content: " ?"; color: var(--hata); font-weight: 700; }

.soluk { color: var(--metin-soluk); }
.kucuk { font-size: 13px; }
.satir-arasi { display: block; font-size: 13px; color: var(--metin-soluk); margin-top: 2px; }

/* --------------------------------------------------------------------- yazdir */
@media print {
  .ust, .yan, .alt, .suzgec, .dugme, .sayfalama { display: none !important; }
  body { background: #fff; }
  .icerik { padding: 0; }
  .kart { border: 0; box-shadow: none; padding: 0; }
  thead th { background: #fff; }
  tbody tr { page-break-inside: avoid; }
}

/* ---------------------------------------------------------------- mobil */
@media (max-width: 860px) {
  .govde { flex-direction: column; }
  .yan {
    width: 100%; min-height: 0; position: static;
    display: flex; overflow-x: auto; gap: 4px; padding: 8px;
    border-right: 0; border-bottom: 1px solid var(--cizgi);
  }
  .yan a { white-space: nowrap; }
  .icerik { padding: 16px; }
  .ust { padding: 10px 16px; }
  .kullanici { display: none; }
}