body {
    font-family: Arial, sans-serif;
    margin: 10px;
    padding: 0;
    background: #f4f4f4;
    color: #333;
}

nav {
    background: #007BFF; /* Gelir butonu ile aynı mavi */
    padding: 10px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

nav a.active,
nav a:hover {
    background: #555;
}

main {
    background: white;
    padding: 15px 20px;
    max-width: 700px;
    margin: 15px auto;
    border-radius: 6px;
    box-shadow: 0 0 10px #aaa;
}

h1, h2 {
    margin-top: 0;
}

form {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

form input[type=number],
form input[type=text],
form select {
    padding: 8px;
    font-size: 16px; /* iOS zoom fix */
    flex: 1 1 200px;
    min-width: 150px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

form button {
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    flex: 0 0 auto;
    padding: 10px 18px;
    border: none;
    transition: background-color 0.3s ease;
}

/* Gelir ve Gider Buton Renkleri */

form button.add-income {
    background-color: #007BFF; /* mavi */
    color: white;
}

form button.add-income:hover {
    background-color: #0069d9;
}

form button.add-expense {
    background-color: #dc3545; /* kırmızı */
    color: white;
}

form button.add-expense:hover {
    background-color: #c82333;
}

.record-list {
    list-style: none;
    padding-left: 0;
}

.record-list li {
    background: #f9f9f9;
    margin-bottom: 8px;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
}

.inline-form {
    margin: 0;
}

.delete-btn {
    background: #dc3545;
    border: none;
    padding: 6px 12px;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 14px;
}

.delete-btn:hover {
    background: #a71d2a;
}

/* Accordion için */

.accordion {
    background-color: #f2f2f2;
    cursor: pointer;
    padding: 12px 16px;
    margin: 5px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: background-color 0.3s ease;
}

.accordion:hover {
    background-color: #e0e0e0;
}

.accordion:after {
    content: '+';
    font-size: 20px;
    transition: transform 0.3s ease;
}

.accordion.active:after {
    content: '-';
}

/* Kategoriye göre renkler (raporlarda) */

.accordion.kategori-1 {
    border-left: 5px solid #007BFF; /* mavi */
    color: #007BFF;
}

.accordion.kategori-2 {
    border-left: 5px solid #28a745; /* yeşil */
    color: #28a745;
}

.accordion.kategori-3 {
    border-left: 5px solid #dc3545; /* kırmızı */
    color: #dc3545;
}

.accordion.kategori-4 {
    border-left: 5px solid #ffc107; /* sarı */
    color: #856404;
}

.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: #fafafa;
    padding-left: 20px;
    border-left: 2px solid #ccc;
    margin-bottom: 10px;
}

.panel ul {
    list-style: none;
    padding-left: 0;
    margin: 10px 0;
}

.panel ul li {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
}

/* Responsive */

@media (max-width: 600px) {
    body {
        margin: 5px;
        font-size: 16px;
    }

    nav {
        justify-content: center;
    }

    nav a {
        padding: 8px 10px;
        font-size: 14px;
    }

    main {
        max-width: 100%;
        margin: 10px 5px;
        padding: 12px 8px;
    }

    form {
        flex-direction: column;
        gap: 8px;
    }

    form input[type=number],
    form input[type=text],
    form select,
    form button {
        flex: 1 1 100%;
        min-width: auto;
        max-width: 100%;
        font-size: 16px; /* 🔥 Burayı 14px’ten 16px’e çıkardım */
        padding: 8px 12px;
        box-sizing: border-box;
    }

    .record-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        font-size: 14px;
        padding: 8px 12px;
    }

    .record-list li form.inline-form {
        align-self: flex-end;
        margin-top: 5px;
    }

    .delete-btn {
        font-size: 12px;
        padding: 5px 10px;
    }
}

/* === Raporlar: renk ve link düzeltmesi === */
.reports a,
.reports a:link,
.reports a:visited {
  color: #111 !important;
  text-decoration: none !important;
}

/* Akordeon ve panel içi metinler siyah kalsın (iOS mavi olmasın) */
.reports .accordion span,
.reports .panel li span {
  color: #111 !important;
}

/* === Mobil düzenlemeler === */
@media (max-width: 600px) {
  /* Özet kartlar tek kolon (Gider/Bakiye yan yana kalmasın) */
  .reports .stats {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Akordeon satırında TUTAR tam ortada, kategori solda */
  .reports .accordion {
    position: relative;
    justify-content: flex-start !important; /* inline space-between'ı ezer */
  }
  .reports .accordion > span:first-child {
    margin-right: auto;
    text-align: left;
  }
  .reports .accordion > span:last-child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    max-width: calc(100% - 100px); /* sol (kategori) + sağ kenar payı */
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none; /* tıklamayı engellemesin */
  }
}

/* Güvenlik için yatay taşmayı kilitle */
html, body { max-width: 100%; overflow-x: hidden; }
.reports { overflow-x: hidden; }

/* Grafikleri her zaman konteyner içinde tut */
.reports canvas { display: block; max-width: 100%; height: auto; }

/* === Raporlar: AY formu + ÖZET kartları düzeni (akordiyona dokunmaz) === */

/* iOS’un tutarları maviye çevirmesini engelle: */
.reports a,
.reports a:link,
.reports a:visited {
  color: #111 !important;
  text-decoration: none !important;
}

/* Mobil görünüm (≤600px) */
@media (max-width: 600px) {

  /* Başlık ve Ay formu alt alta */
  .reports .reports-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Ay formu dikey yığın */
  .reports .month-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* “Ay:” etiketi mock’taki gibi büyük, input ile arasında boşluk */
  .reports .month-form label {
    display: block !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin: 0 0 6px 0 !important;
    text-align: left !important;
  }

  /* Ay seçme alanı ve “Göster” butonu tam genişlik */
  .reports .month-form input[type="month"],
  .reports .month-form button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;   /* padding ve border'ı hesaba kat */
    font-size: 16px !important;          /* iOS zoom fix */
    padding: 8px 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
  }

  /* Özet kartlar: 2 sütun x 2 satır */
  .reports .stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .reports .stat-card {
    min-width: 0;
    box-sizing: border-box;
  }
}

/* Taşma kilidi */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.reports {
  overflow-x: hidden;
}

/* Grafikleri koru, ebeveynden taşmasın */
.reports canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Raporlar > Ay seçme alanında sağdan taşmayı kes */
.reports .month-form { overflow-x: hidden; }

.reports .month-form input[type="month"]{
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;  /* padding/border genişliğe dahil */
  margin: 0 !important;
  -webkit-appearance: none;           /* iOS yerleşik stili kapat */
  appearance: none;
  border: 1px solid #ccc;             /* mevcut tasarımın aynısı */
  border-radius: 8px;
  padding: 8px 12px;                  /* sağ tarafa biraz iç boşluk */
}

/* iOS Safari’ye özel: 1–2px taşmayı hesaplayıp telafi et */
@supports (-webkit-touch-callout: none) {
  .reports .month-form input[type="month"]{
    width: calc(100% - 2px) !important;  /* sağ kenardaki render payını absorbe eder */
    padding-right: 14px;                  /* metin + ikonlar için güvenli boşluk */
  }
}

/* Masaüstünde özel seçici göster, mobilde native kalsın */
@media (min-width: 992px){
  .month-form #m-native { display: none !important; }
  .month-form .month-picker { display: inline-flex !important; }
  .month-form .month-picker select{
    appearance: none; -webkit-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 14px;
    border: 1px solid #ccc; border-radius: 6px;
    padding: 6px 30px 6px 10px; font-size: 15px;
    box-sizing: border-box; cursor: pointer;
  }
  .month-form .month-picker select:focus{ outline: none; border-color:#007bff; }
}

/* Mobilde native giriş tam genişlikte kalsın (zaten düzeltmiştik) */
@media (max-width: 991px){
  .month-form #m-native{
    width:100%; max-width:100%; box-sizing:border-box;
    padding:8px 10px; border:1px solid #ccc; border-radius:6px;
  }
}

/* Masaüstünde akordeon hizası (kategori solda, TUTAR tam ortada) */
@media (min-width: 992px){
  .reports .accordion{
    position: relative;
    justify-content: flex-start !important; /* inline space-between'i ez */
  }
  .reports .accordion > span:first-child{
    margin-right: auto;
    text-align: left;
  }
  .reports .accordion > span:last-child{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    pointer-events: none; /* tıklamayı engellemesin */
  }
}

/* === Dışa Aktar (CSV) butonu boyut düzeni === */
.reports .export-link {
  background-color: #f8f9fa;
  border: 1px solid #ccc;
  color: #333;
  font-size: 14px;
  padding: 5px 10px;     /* Küçük, dengeli padding */
  border-radius: 4px;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  display: inline-block;
  transition: all 0.2s ease;
}

.reports .export-link:hover {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}