:root {
  --primary: #0B6E4F;
  --primary-koyu: #075239;
  --secondary: #F2A100;
  --primary-container: #E3F3EC;
  --on-primary-container: #075239;
  --bg: #F7F9F8;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --on-surface: #1A1C1B;
  --on-surface-variant: #5F6B66;
  --error: #B3261E;
  --error-container: #F9DEDC;
  --on-error-container: #8C1D18;
  --cizgi: #E2E8E5;
  --golge: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #4CC79A;
    --primary-koyu: #003824;
    --secondary: #F2A100;
    --primary-container: #075239;
    --on-primary-container: #CFEEE0;
    --bg: #121514;
    --surface: #1C201E;
    --surface-2: #232826;
    --on-surface: #E3E3E0;
    --on-surface-variant: #9AA39E;
    --error: #F2B8B5;
    --error-container: #4D2B29;
    --on-error-container: #F9DEDC;
    --cizgi: #2B302E;
    --golge: 0 1px 3px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
}
#view {
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
}

/* Üst başlık (TopAppBar karşılığı) */
.appbar {
  display: flex; align-items: center; gap: 8px;
  margin: -4px 0 14px;
}
.appbar h1 { font-size: 20px; font-weight: 700; margin: 0; }

.baslik-buyuk { font-size: 26px; font-weight: 800; color: var(--primary); margin: 0; }
.altyazi { color: var(--on-surface-variant); margin: 2px 0 0; font-size: 14px; }

/* Kart */
.kart {
  background: var(--surface);
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  box-shadow: var(--golge);
  padding: 14px;
}
.kart + .kart { margin-top: 10px; }

/* Özet kutuları */
.ozet-satir { display: flex; gap: 12px; margin-top: 16px; }
.ozet-kutu {
  flex: 1; background: var(--surface); border: 1px solid var(--cizgi);
  border-radius: 16px; box-shadow: var(--golge); padding: 14px;
  height: 100px; display: flex; flex-direction: column; cursor: pointer;
  transition: transform .08s;
}
.ozet-kutu:active { transform: scale(.97); }
.ozet-kutu svg { width: 24px; height: 24px; fill: var(--primary); }
.ozet-kutu .deger { font-size: 26px; font-weight: 800; margin-top: auto; }
.ozet-kutu .etiket { font-size: 12px; color: var(--on-surface-variant); }

.bolum-baslik-satir { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 10px; }
.bolum-baslik { font-size: 18px; font-weight: 700; margin: 0; }
.link-buton { background: none; border: none; color: var(--primary); font-weight: 600; font-size: 15px; cursor: pointer; padding: 4px; }

/* Beyanname satırı (özet) */
.beyan-satir { display: flex; align-items: center; gap: 12px; padding: 14px; }
.beyan-satir.acil { background: var(--error-container); }
.beyan-satir svg { width: 22px; height: 22px; fill: var(--primary); flex-shrink: 0; }
.beyan-satir .orta { flex: 1; min-width: 0; }
.beyan-satir .ad { font-weight: 600; }
.beyan-satir .tar { font-size: 13px; color: var(--on-surface-variant); }
.beyan-satir .kalan { font-weight: 700; color: var(--primary); white-space: nowrap; }
.beyan-satir.acil .kalan, .beyan-satir.acil svg { color: var(--error); fill: var(--error); }

/* İpucu kartı */
.ipucu-kart { background: var(--primary-container); color: var(--on-primary-container); border: none; }
.ipucu-kart .baslik { font-weight: 700; margin-bottom: 4px; }
.ipucu-kart p { margin: 0; font-size: 13px; line-height: 1.45; }

/* Takvim rozeti */
.takvim-kart { display: flex; align-items: center; gap: 14px; padding: 16px; }
.rozet {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--primary-container); color: var(--primary);
}
.rozet.acil { background: var(--error-container); color: var(--error); }
.rozet .gun-sayi { font-size: 18px; font-weight: 800; line-height: 1; }
.rozet .gun-yazi { font-size: 10px; color: var(--on-surface-variant); }
.takvim-kart .ad { font-weight: 700; font-size: 16px; }
.takvim-kart .aciklama { font-size: 13px; color: var(--on-surface-variant); margin: 3px 0 6px; line-height: 1.4; }
.takvim-kart .sonraki { font-size: 13px; font-weight: 600; color: var(--primary); }
.takvim-kart.acil .sonraki { color: var(--error); }

/* Mükellef / Görev kart */
.mk-kart { display: flex; align-items: center; gap: 10px; padding: 14px; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary-container); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px;
}
.mk-kart .orta { flex: 1; min-width: 0; }
.mk-kart .unvan { font-weight: 600; }
.mk-kart .detay { font-size: 12px; color: var(--on-surface-variant); margin-top: 2px; word-break: break-word; }
.ikon-buton { background: none; border: none; cursor: pointer; padding: 8px; border-radius: 50%; display: flex; }
.ikon-buton svg { width: 22px; height: 22px; fill: var(--on-surface-variant); }
.ikon-buton.sil svg { fill: var(--error); }
.ikon-buton:active { background: var(--cizgi); }

.gorev-kart { display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 12px; }
.gorev-kart .orta { flex: 1; padding: 10px 0; min-width: 0; }
.gorev-kart .baslik { font-weight: 600; }
.gorev-kart.bitti .baslik { text-decoration: line-through; color: var(--on-surface-variant); }
.gorev-kart .alt { font-size: 12px; color: var(--on-surface-variant); margin-top: 2px; }
input[type=checkbox].onay { width: 22px; height: 22px; accent-color: var(--primary); flex-shrink: 0; }

/* Boş durum */
.bos { text-align: center; padding: 60px 20px; color: var(--on-surface-variant); }
.bos .ana { font-weight: 700; color: var(--on-surface); font-size: 16px; }
.bos svg { width: 56px; height: 56px; fill: var(--primary); opacity: .8; margin-bottom: 8px; }

/* Chip */
.chip-satir { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-satir.kaydir { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.chip {
  border: 1px solid var(--cizgi); background: var(--surface); color: var(--on-surface);
  border-radius: 10px; padding: 8px 14px; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.chip.secili { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; font-weight: 600; }

/* Form alanları */
.alan { margin-top: 12px; }
.alan label { display: block; font-size: 12px; color: var(--on-surface-variant); margin-bottom: 4px; }
.alan input, .alan textarea, .alan select {
  width: 100%; padding: 12px 14px; font-size: 16px; border-radius: 12px;
  border: 1px solid var(--cizgi); background: var(--surface); color: var(--on-surface);
}
.alan input:focus, .alan textarea:focus, .alan select:focus { outline: 2px solid var(--primary); border-color: transparent; }
.alan textarea { min-height: 64px; resize: vertical; }

/* Sonuç kartı (hesaplayıcı) */
.sonuc { background: var(--primary-container); color: var(--on-primary-container); border: none; margin-top: 16px; }
.sonuc-satir { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 15px; }
.sonuc-satir .et { color: var(--on-surface-variant); }
.sonuc-satir .dg { font-weight: 600; }
.sonuc hr { border: none; border-top: 1px solid rgba(0,0,0,.12); margin: 10px 0; }
.sonuc .vurgu { font-weight: 800; }

/* FAB */
.fab {
  position: fixed; right: 18px; bottom: calc(86px + env(safe-area-inset-bottom));
  background: var(--primary); color: #fff; border: none; border-radius: 18px;
  padding: 14px 20px; font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25); display: flex; align-items: center; gap: 8px; z-index: 50;
}
.fab svg { width: 22px; height: 22px; fill: #fff; }
.fab:active { transform: scale(.96); }

/* Alt menü */
.altmenu {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: flex; background: var(--surface); border-top: 1px solid var(--cizgi);
  padding-bottom: env(safe-area-inset-bottom);
}
.altmenu button {
  flex: 1; background: none; border: none; cursor: pointer; padding: 8px 0 10px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--on-surface-variant); font-size: 11px;
}
.altmenu button svg { width: 24px; height: 24px; fill: var(--on-surface-variant); }
.altmenu button.aktif { color: var(--primary); }
.altmenu button.aktif svg { fill: var(--primary); }
.altmenu button.aktif::before {
  content: ""; position: absolute; top: 0; width: 56px; height: 3px;
  border-radius: 0 0 4px 4px; background: var(--primary);
}
.altmenu button { position: relative; }

/* Modal */
.modal-katman {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-katman.gizli { display: none; }
.modal {
  background: var(--surface); border-radius: 24px; padding: 22px;
  width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.modal h2 { margin: 0 0 6px; font-size: 20px; }
.modal-butonlar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.txt-buton { background: none; border: none; color: var(--primary); font-weight: 600; font-size: 15px; padding: 10px 14px; border-radius: 10px; cursor: pointer; }
.txt-buton:disabled { color: var(--on-surface-variant); opacity: .5; cursor: default; }
.txt-buton:active:not(:disabled) { background: var(--primary-container); }