@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --bg: #F1EEE4;
  --surface: #FFFFFF;
  --ink: #23281F;
  --ink-soft: #63695B;
  --line: #DAD4C2;
  --accent: #8A5A2B;
  --accent-soft: #C99A5B;
  --accent-wash: #F3E7D6;
  --danger: #A23B2E;
  --radius: 3px;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, .serif{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

a{ color: inherit; }

.kapak{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.giris-kutu{
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 40px 36px;
}

.giris-kutu .ust{
  margin-bottom: 28px;
}

.giris-kutu .ust .anahtar{
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--accent);
  font-size: 15px;
}

.giris-kutu h1{ font-size: 26px; }
.giris-kutu p.aciklama{ color: var(--ink-soft); font-size: 14px; margin-top: 6px; }

.alan{ margin-bottom: 18px; }
.alan label{
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.alan input, .alan textarea{
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
}
.alan input:focus, .alan textarea:focus{
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
  border-color: var(--accent);
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
}
.btn:hover{ background: #000; }
.btn.vurgu{ background: var(--accent); }
.btn.vurgu:hover{ background: #6f4720; }
.btn.dusuk{
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  width: auto;
  padding: 8px 14px;
  font-size: 13.5px;
}
.btn.dusuk:hover{ border-color: var(--ink-soft); color: var(--ink); }
.btn.tehlike{ background: transparent; color: var(--danger); width: auto; padding: 6px 10px; font-size: 13px; }

.hata{
  background: #F7E6E2;
  border: 1px solid #E3B4A9;
  color: var(--danger);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 13.5px;
  margin-bottom: 18px;
}

/* ---- Uygulama kabuğu ---- */
.ustbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.ustbar .marka{
  display: flex;
  align-items: center;
  gap: 10px;
}
.ustbar .marka .isaret{
  width: 26px; height: 26px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}
.ustbar .marka span{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 18px;
}
.ustbar form{ margin: 0; }

.icerik{
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 40px 100px;
}

.baslik-satiri{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 20px;
  flex-wrap: wrap;
}
.baslik-satiri h1{ font-size: 30px; }
.baslik-linkler{ display: flex; gap: 10px; flex-wrap: wrap; }
.alt-baslik{ color: var(--ink-soft); font-size: 14.5px; margin: 6px 0 36px; }

/* ---- Kayıt defteri: apartman listesi ---- */
.defter{
  border-top: 1px solid var(--line);
}
.defter-satir{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  transition: border-color .15s ease, background .15s ease;
}
.defter-satir:hover{
  border-left-color: var(--accent);
  background: rgba(138,90,43,0.035);
}
.defter-satir a.ad{
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 600;
  text-decoration: none;
}
.defter-satir a.ad:hover{ color: var(--accent); }
.defter-satir .adres{ color: var(--ink-soft); font-size: 13.5px; margin-top: 4px; }
.kasa-ozet{
  color: var(--ink-soft);
  font-size: 12.5px;
  margin-top: 7px;
}
.kasa-ozet strong{ color: var(--ink); font-weight: 600; }
.kasa-ozet strong.pozitif{ color: #3E6B4F; }
.kasa-ozet strong.negatif{ color: var(--danger); }
.kasa-ozet .ayrac{ margin: 0 6px; opacity: .5; }
.defter-satir .sayac{
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: 20px;
}

.bos-durum{
  padding: 60px 10px;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
}
.bos-durum p{ margin: 0 0 4px; }

/* ---- Masraf listesi ---- */
.masraf-satir{
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
}
.masraf-satir form{ margin: 0; }
.masraf-ust{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
}
.masraf-fotograflar{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.fis-kucuk-baglanti{ display: block; line-height: 0; }
.fis-kucuk{
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.masraf-aciklama{ font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; }
.masraf-tarih{ color: var(--ink-soft); font-size: 13px; margin-top: 3px; }
.masraf-tutar{ font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; white-space: nowrap; }

@media (max-width: 620px){
  .masraf-ust{ grid-template-columns: 1fr auto; grid-template-areas: "aciklama aciklama" "tutar sil"; }
  .masraf-tutar{ text-align: left; }
}

/* ---- Yeni ekleme paneli (accordion tarz) ---- */
details.ekle-panel{
  margin-top: 32px;
  border: 1px solid var(--line);
  background: var(--surface);
}
details.ekle-panel summary{
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 15.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
details.ekle-panel summary::before{
  content: '+';
  color: var(--accent);
  font-size: 18px;
  transition: transform .15s ease;
}
details.ekle-panel[open] summary::before{ content: '−'; }
details.ekle-panel .panel-govde{
  padding: 6px 20px 24px;
  border-top: 1px solid var(--line);
}
.iki-sutun{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.uc-sutun{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 620px){
  .iki-sutun, .uc-sutun{ grid-template-columns: 1fr; }
  .icerik{ padding: 32px 20px 80px; }
  .ustbar{ padding: 16px 20px; }
}

/* ---- Sakin levhası ---- */
.geri-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13.5px;
  margin-bottom: 18px;
}
.geri-link:hover{ color: var(--ink); }

.levha{
  border: 1px solid var(--line);
  background: var(--surface);
}
.levha-satir{
  display: grid;
  grid-template-columns: 64px 1fr 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.levha-satir:last-child{ border-bottom: none; }
.levha-satir.baslik{
  background: var(--accent-wash);
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 500;
}
.levha-satir .daire-no{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 17px;
}
.levha-satir input{
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
}
.levha-satir input:hover{ border-color: var(--line); }
.levha-satir input:focus{ outline: none; border-color: var(--accent); background: var(--surface); }
.levha-satir input.no-input{ font-family: 'Fraunces', serif; font-weight: 600; font-size: 15px; }
.telefon-whatsapp{ display: flex; flex-direction: column; gap: 3px; }
.telefon-whatsapp .kod-input{ font-size: 12.5px; color: var(--ink-soft); }
.telefon-whatsapp .kod-input:focus{ color: var(--ink); }
.adim-listesi{
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}
.adim-listesi strong{ color: var(--ink); }
.levha-satir .islemler{
  display: flex;
  gap: 6px;
}
.levha-satir .islemler button{
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 13px;
  padding: 4px 6px;
}
.levha-satir .islemler button:hover{ color: var(--accent); }
.levha-satir form{ margin: 0; display: contents; }
.levha-satir form.guncelle-form{ display: contents; }

@media (max-width: 620px){
  .levha-satir{ grid-template-columns: 44px 1fr; }
  .levha-satir .islemler{ grid-column: 1 / -1; justify-content: flex-end; }
  .levha-satir.baslik{ display: none; }
}

/* ---- Aidat ekrani ---- */
.icerik-genis{ max-width: 1080px; }

.yil-secici{
  display: flex;
  align-items: center;
  gap: 12px;
}
.yil-etiket{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 17px;
  min-width: 46px;
  text-align: center;
}

.ipucu{
  color: var(--ink-soft);
  font-size: 13px;
  margin-top: 14px;
}

.tahsilat-kutu{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  background: var(--accent-wash);
  border: 1px solid var(--line);
  padding: 24px 28px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.ay-secici-form{ margin: 0 0 8px; }
.ay-secici-form select{
  border: none;
  background: transparent;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 0;
  cursor: pointer;
}
.ay-secici-form select:focus{ outline: none; text-decoration: underline; }
.tahsilat-tutar{
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
}
.tahsilat-alt{
  color: var(--ink-soft);
  font-size: 13px;
  margin-top: 6px;
}
.tahsilat-sag{ text-align: right; }
.tahsilat-sayac{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 26px;
  color: var(--ink);
}
@media (max-width: 480px){
  .tahsilat-kutu{ flex-direction: column; align-items: flex-start; }
  .tahsilat-sag{ text-align: left; }
}

.aidat-saricisi{
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--surface);
  margin-top: 28px;
}

table.aidat-tablo{
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
}
.aidat-tablo th, .aidat-tablo td{
  border-bottom: 1px solid var(--line);
  padding: 0;
  text-align: center;
}
.aidat-tablo thead th{
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.aidat-tablo thead th.bu-ay{ color: var(--accent); font-weight: 600; }
.aidat-tablo td.bu-ay{ background: rgba(138,90,43,0.04); }

.toplam-sutun{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 14px;
  min-width: 96px;
  border-left: 1px solid var(--line);
  background: var(--accent-wash);
}
.aidat-tablo thead th.toplam-sutun{
  color: var(--ink);
  font-weight: 600;
  font-family: 'Fraunces', serif;
}

.sabit-sutun{
  text-align: left !important;
  padding: 10px 16px !important;
  min-width: 168px;
  position: sticky;
  left: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.aidat-tablo thead th.sabit-sutun{ background: var(--surface); }
.daire-etiket{ font-family: 'Fraunces', serif; font-weight: 600; font-size: 15px; }
.sakin-etiket{ color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }

.aidat-tablo tbody tr:last-child td{ border-bottom: none; }
.aidat-tablo form{ margin: 0; }

.hucre{
  width: 100%;
  height: 46px;
  min-width: 64px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12.5px;
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--accent);
  transition: background .12s ease;
  white-space: nowrap;
}
.hucre:hover{ background: rgba(138,90,43,0.08); }
.hucre.odendi{ background: var(--accent-wash); color: var(--ink); font-weight: 600; }
.hucre.odendi:hover{ background: #e9d3b0; }

@media (max-width: 620px){
  .baslik-satiri{ align-items: flex-start; }
  .icerik-genis{ padding: 32px 16px 80px; }
}