/* Genel Ayarlar ve Font */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5; /* Açık gri arkaplan */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* İçeriği yukarı hizala */
    min-height: 100vh;
    box-sizing: border-box; /* Padding ve border'ın genişliği etkilememesini sağlar */
}

.app-container {
    width: 100%;
    max-width: 400px; /* Telefon ekranı genişliği */
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden; /* Köşelerdeki taşmaları engelle */
    margin-top: 20px; /* Üstten boşluk */
    margin-bottom: 20px; /* Alttan boşluk */
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 40px); /* Ekran yüksekliğine göre ayarla */
    position: relative; /* Sidebar için */
    z-index: 1; /* Sidebar'ın altında kalması için */
}

/* Başlık Alanı - Genel */
.app-header {
    background-color: #20b2aa; /* Açık deniz yeşili */
    color: white;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Butonlar ve başlık arasına boşluk */
    font-size: 1.1em;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative; /* Butonların konumlandırılması için */
}

.app-header h1 {
    margin: 0;
    flex-grow: 1; /* Ortadaki başlığın boş alanı doldurmasını sağlar */
    text-align: center; /* Başlığı ortala */
    font-size: 1.1em;
    padding: 0 40px; /* Butonların yerini ayarlamak için padding */
    box-sizing: border-box; /* Padding'in genişliği etkilememesi için */
}

/* Header'daki Butonlar */
.app-header .menu-button,
.app-header .back-button,
.app-header .close-button, /* product-management.html'deki kapatma butonu */
.app-header .header-icon-right { /* Sağdaki genel ikonlar */
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    padding: 0 10px;
    outline: none;
    /* position: absolute kullanmak yerine flexbox ile yerleştirme */
    flex-shrink: 0; /* Butonların küçülmesini engelle */
}

/* Sağdaki ikonun yerini daha iyi ayarlamak için */
.app-header .header-icon-right {
    margin-left: auto; /* Sağ tarafa itmek için */
}


/* Ana İçerik Alanı - Genel */
.main-content {
    padding: 20px;
    flex-grow: 1; /* Boş alanı doldurarak footer'ı alta iter */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Bölümler arası boşluk */
}

/* Mevcut Borç Bölümü (Ana Sayfa) */
.balance-section {
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 15px 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.balance-section p {
    margin: 0;
    color: #555;
    font-size: 0.9em;
}

.balance-section .current-balance {
    font-size: 2em;
    font-weight: bold;
    color: #333;
    margin-top: 5px;
}

/* Ürün Listesi Bölümü (Ana Sayfa) */
.product-list-section {
    background-color: #f8f8f8;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* İçindeki öğelerin köşeden taşmamasını sağlar */
}

.product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
}

.product-item:last-child {
    border-bottom: none; /* Son öğenin altında çizgi olmasın */
}

.product-name {
    font-size: 1.1em;
    color: #333;
    flex-grow: 1; /* Ürün adının genişlemesini sağlar */
}

.product-price {
    font-size: 1.1em;
    color: #666;
    margin-right: 15px;
    font-weight: bold;
}

.add-button {
    background-color: #20b2aa; /* Açık deniz yeşili */
    color: white;
    border: none;
    border-radius: 50%; /* Yuvarlak buton */
    width: 38px;
    height: 38px;
    font-size: 1.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0; /* Butonun küçülmesini engelle */
}

.add-button:hover {
    background-color: #1a9a92;
}

/* Bu Alışveriş ve Borcuma Ekle Bölümü (Ana Sayfa) */
.summary-section {
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.current-order {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.current-order p {
    margin: 0;
    font-size: 1.1em;
    color: #333;
}

.current-order .order-total {
    font-size: 1.3em;
    font-weight: bold;
    color: #e74c3c; /* Kırmızı tonu */
}

.add-to-debt-button {
    background-color: #20b2aa; /* Açık deniz yeşili */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 12px 20px;
    width: 100%;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.add-to-debt-button:hover {
    background-color: #1a9a92;
}

/* Ödeme Yaptım Bölümü (Ana Sayfa) */
.payment-section {
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-top: auto; /* Footer gibi alta yapışmasını sağlar */
}

.payment-section p {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    color: #333;
}

.payment-input-group {
    display: flex;
    gap: 10px;
    align-items: center; /* Input ve butonu dikeyde ortala */
}

.payment-input {
    flex-grow: 1; /* Input alanının esnek bir şekilde büyümesini sağlar */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1.1em;
    outline: none;
    text-align: right;
    min-width: 0; /* Flex item'ların varsayılan min-width'ini override eder */
}

.payment-input[type="number"]::-webkit-inner-spin-button,
.payment-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.payment-input[type="number"] {
    -moz-appearance: textfield;
}

.deduct-payment-button {
    background-color: #28a745; /* Yeşil tonu */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 10px; /* Yatay dolguyu biraz daha azaltıp arttırdık */
    font-size: 0.95em; /* Font boyutunu biraz küçülttük */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0; /* Butonun küçülmesini engelle */
    white-space: nowrap; /* Metnin tek satırda kalmasını sağlar */
    box-sizing: border-box; /* Padding'in genişliği etkilememesi için */
    min-width: unset; /* İçerik bazlı min-width'i sıfırlarız */
    max-width: 120px; /* Buton için maksimum bir genişlik belirleyebiliriz */
}

.deduct-payment-button:hover {
    background-color: #218838;
}


/* --- ÜRÜN YÖNETİMİ SAYFASI İÇİN ÖZEL STILLER --- */
/* --- Ürün Yönetimi Sayfası Düzenleme Modu Stilleri --- */
.managed-product-item .edit-product-name-input,
.managed-product-item .edit-product-price-input {
    width: calc(100% - 10px); /* Kapsayıcıya göre ayarla */
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
}

.managed-product-item .edit-product-price-input {
    text-align: right;
    width: 80px; /* Fiyat alanı daha dar olabilir */
}

/* Kaydet ve İptal butonları */
.action-button.save-button {
    color: #28a745; /* Yeşil */
}
.action-button.save-button:hover {
    color: #218838;
}

.action-button.cancel-button {
    color: #e74c3c; /* Kırmızı */
}
.action-button.cancel-button:hover {
    color: #c0392b;
}

/* Ana İçerik - Ürün Yönetimi Sayfası */
.main-content.product-management-content {
    padding: 20px;
    gap: 25px; /* Bölümler arası daha fazla boşluk */
}

/* Mevcut Ürünler Bölümü (Ürün Yönetimi Sayfası) */
.current-products-section {
    background-color: #f8f8f8;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 15px 20px;
}

.current-products-section h2 {
    margin-top: 0;
    color: #333;
    font-size: 1.2em;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.product-management-list {
    /* Liste için ek stiller gerekirse buraya eklenebilir */
	/* --- Ürün Yönetimi Sayfası Düzenleme Modu Stilleri --- */
.managed-product-item .edit-product-name-input,
.managed-product-item .edit-product-price-input {
    width: calc(100% - 10px); /* Kapsayıcıya göre ayarla */
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
}

.managed-product-item .edit-product-price-input {
    text-align: right;
    width: 80px; /* Fiyat alanı daha dar olabilir */
}

/* Kaydet ve İptal butonları */
.action-button.save-button {
    color: #28a745; /* Yeşil */
}
.action-button.save-button:hover {
    color: #218838;
}

.action-button.cancel-button {
    color: #e74c3c; /* Kırmızı */
}
.action-button.cancel-button:hover {
    color: #c0392b;
}
}

.managed-product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.managed-product-item:last-child {
    border-bottom: none;
}

.managed-product-item .product-name {
    font-size: 1.1em;
    color: #333;
    flex-grow: 1;
}

.managed-product-item .product-price {
    font-size: 1.1em;
    color: #666;
    margin-right: 15px;
    font-weight: bold;
    min-width: 60px; /* Fiyatın sabit genişliği olması için */
    text-align: right;
}

.product-actions {
    display: flex;
    gap: 5px; /* Butonlar arası boşluk */
}

.action-button {
    background: none;
    border: none;
    color: #555;
    font-size: 1.1em;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.action-button:hover {
    background-color: #eee;
    color: #333;
}

.edit-button {
    color: #20b2aa; /* Düzenle butonu için ana renk */
}
.edit-button:hover {
    color: #1a9a92;
}

.delete-button {
    color: #e74c3c; /* Sil butonu için kırmızı */
}
.delete-button:hover {
    color: #c0392b;
}


/* Yeni Ürün Ekle Bölümü (Ürün Yönetimi Sayfası) */
.add-new-product-section {
    background-color: #f8f8f8;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 15px 20px;
}

.add-new-product-section h2 {
    margin-top: 0;
    color: #333;
    font-size: 1.2em;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.add-new-product-section .input-group {
    margin-bottom: 15px;
}

.add-new-product-section label {
    display: block;
    margin-bottom: 5px;
    color: #555;
    font-size: 0.95em;
    font-weight: bold;
}

.add-new-product-section input[type="text"],
.add-new-product-section input[type="number"] {
    width: calc(100% - 22px); /* Padding'i hesaba kat */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1.1em;
    outline: none;
}

.add-new-product-section input[type="number"] {
    text-align: right; /* Fiyat girişi sağa hizalı */
}

.add-product-button {
    background-color: #20b2aa; /* Ana renk */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 12px 20px;
    width: 100%;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
}

.add-product-button:hover {
    background-color: #1a9a92;
}


/* --- YAN MENÜ (SIDEBAR) STİLLERİ --- */

/* Sidebar Overlay (Menü açıldığında arkaplanı karartan katman) */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam siyah */
    z-index: 999; /* Menüden hemen önce gelsin */
    display: none; /* Varsayılan olarak gizli */
    opacity: 0; /* Geçiş için başlangıç saydamlığı */
    transition: opacity 0.3s ease; /* Saydamlık geçişi */
}

/* Sidebar (Yan Menü) */
.sidebar {
    position: fixed;
    top: 0;
    left: -80%; /* Varsayılan olarak ekranın dışında (gizli) */
    width: 80%; /* Ekranın %80'ini kaplasın */
    max-width: 300px; /* Çok geniş ekranlarda aşırı büyümesin */
    height: 100%;
    background-color: #fff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Her şeyin üzerinde olsun */
    transition: left 0.3s ease; /* Kayma animasyonu */
    display: flex;
    flex-direction: column;
}

/* Menü Açık Durumu */
.sidebar.active {
    left: 0; /* Menü açıldığında ekranın soluna gelsin */
}

.sidebar-overlay.active {
    display: block; /* Menü açıldığında overlay'i göster */
    opacity: 1; /* Overlay'in tamamen görünür olmasını sağla */
}


/* Sidebar Başlığı */
.sidebar-header {
    background-color: #20b2aa; /* Başlıkla aynı renk */
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.sidebar-header h2 {
    margin: 0;
    font-size: 1.2em;
}

.close-sidebar-button {
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    outline: none;
}

/* Sidebar Navigasyon Öğeleri */
.sidebar-nav {
    flex-grow: 1; /* Kalan alanı doldursun */
    padding: 10px 0;
}

.sidebar-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    font-size: 1.1em;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s, color 0.2s;
}

.sidebar-item:last-child {
    border-bottom: none;
}

.sidebar-item i {
    margin-right: 15px; /* İkon ile yazı arasına boşluk */
    font-size: 1.2em;
    color: #20b2aa; /* İkon rengi */
}

.sidebar-item:hover,
.sidebar-item.active {
    background-color: #f0f0f0;
    color: #20b2aa;
}
.sidebar-item.active i {
    color: #20b2aa;
}

/* Sidebar Alt Bilgi */
.sidebar-footer {
    padding: 10px 20px;
    text-align: center;
    font-size: 0.8em;
    color: #888;
    border-top: 1px solid #eee;
}


/* Mobil için küçük ekran düzenlemeleri (Responsive Düzeltmeler) */
@media (max-width: 480px) {
    body {
        /* Mobil görünümde app-container'ın tam ekran olmasını sağlar */
        align-items: stretch; /* Dikey hizalamayı esnetir */
    }

    .app-container {
        margin-top: 0;
        margin-bottom: 0;
        border-radius: 0;
        min-height: 100vh;
        max-width: 100%; /* Mobil ekranı tamamen kaplasın */
        width: 100%;
    }
}

/* Masaüstü veya daha geniş ekranlarda .app-container'ı ortalamak için */
@media (min-width: 481px) {
    .app-container {
        margin: 20px auto; /* Ortalamak için */
    }
}
/*
 * Bu kısım, eğer daha önce ana sayfanız için CSS tanımlamalarınız varsa
 * onların olduğu yerdir. Bu yeni kodları, mevcut CSS'inizin SONUNA eklemelisiniz.
 * Örnek:
 */

/* body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #e0e0e0;
}

.main-content {
    padding: 20px;
}

.card {
    background-color: white;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-link {
    display: block;
    padding: 10px;
    background-color: #333;
    color: white;
    text-decoration: none;
    text-align: center;
    margin-top: 20px;
} */


/* Buradan itibaren "Borç Geçmişi" sayfası için eklenen/güncellenen CSS kuralları başlar */

/* Genel Ayarlar */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6; /* Arka plan rengi */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Üstten başlasın */
    min-height: 100vh; /* Minimum tam ekran yüksekliği */
    box-sizing: border-box; /* Padding ve border'ın genişliğe dahil olmasını sağlar */
}

.container {
    width: 100%;
    max-width: 420px; /* Mobil cihazlar için maksimum genişlik */
    background-color: #ffffff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden; /* İçerik taşmasını engeller */
    margin: 20px; /* Sayfadan dışarıya doğru boşluk */
}

/* Başlık Alanı */
.header {
    background-color: #2c3e50; /* Koyu mavi */
    color: #ffffff;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    position: sticky; /* Sabit başlık */
    top: 0;
    z-index: 100; /* Diğer elementlerin üzerinde görünmesini sağlar */
}

.back-button {
    color: #ffffff;
    font-size: 24px;
    margin-right: 15px;
    text-decoration: none; /* Alt çizgiyi kaldırır */
}

.page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

/* İçerik Alanı */
.content {
    padding: 20px;
}

/* Borç Özeti */
.debt-summary h2 {
    color: #333;
    font-size: 22px;
    margin-bottom: 20px;
    text-align: center;
}

.payment-ratio-card {
    background-color: #f8f8f8;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.payment-ratio-card h3 {
    color: #555;
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 15px;
}

.ratio-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* Konik gradyan ile doluluk oranı görselleştirme */
    background: conic-gradient(#3498db 85%, #ecf0f1 85%); /* Ödeme oranına göre renk */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.1); /* İç gölge */
}

.ratio-value {
    font-size: 28px;
    font-weight: bold;
    color: #2c3e50;
    background-color: #ffffff; /* İç dairenin arka planı */
    border-radius: 50%;
    width: 80px; /* İç dairenin genişliği */
    height: 80px; /* İç dairenin yüksekliği */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Borç Tablosu */
.debt-table-section {
    overflow-x: auto; /* Mobil uyumluluk için yatay kaydırma */
    margin-bottom: 30px;
}

.debt-table {
    width: 100%;
    border-collapse: collapse; /* Kenarlıkların birleşmesini sağlar */
    min-width: 550px; /* Tablonun mobil cihazlarda okunaklı kalması için minimum genişlik */
}

.debt-table th,
.debt-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.debt-table th {
    background-color: #f2f2f2;
    color: #333;
    font-weight: 600;
    text-transform: uppercase; /* Başlıkları büyük harf yapar */
}

.debt-table tbody tr:last-child td {
    border-bottom: none; /* Son satırın altında kenarlık olmaz */
}

.debt-table tbody tr:hover {
    background-color: #fcfcfc; /* Satır üzerine gelindiğinde arka plan rengi */
}

/* Durum Renkleri */
.status-odendi {
    color: #27ae60; /* Yeşil */
    font-weight: 500;
}

.status-gecikmis {
    color: #e74c3c; /* Kırmızı */
    font-weight: 500;
}

/* Detaylı Rapor Butonu */
.report-button-container {
    text-align: center;
    padding-bottom: 20px;
}

.detail-report-button {
    background-color: #3498db; /* Mavi */
    color: #ffffff;
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Hover efekti için geçiş */
    width: 100%;
    max-width: 250px;
}

.detail-report-button:hover {
    background-color: #2980b9; /* Hoverda daha koyu mavi */
}

/* Mobil için Responsive Ayarlar */
@media (max-width: 768px) {
    .container {
        margin: 0; /* Küçük ekranlarda kenar boşluğunu kaldır */
        border-radius: 0; /* Kenar yuvarlaklığını kaldır */
        box-shadow: none; /* Gölgeyi kaldır */
    }

    body {
        align-items: stretch; /* İçeriğin dikeyde tüm alanı kaplamasını sağlar */
    }
}

@media (max-width: 480px) {
    .header {
        padding: 15px;
    }

    .page-title {
        font-size: 18px;
    }

    .content {
        padding: 15px;
    }

    .debt-summary h2 {
        font-size: 20px;
    }

    .payment-ratio-card {
        padding: 20px;
    }

    .ratio-circle {
        width: 90px;
        height: 90px;
    }

    .ratio-value {
        font-size: 26px;
        width: 70px;
        height: 70px;
    }

    .debt-table th,
    .debt-table td {
        padding: 10px 8px;
        font-size: 13px;
    }

    .detail-report-button {
        padding: 10px 20px;
        font-size: 15px;
    }
}/* Ana Sayfa Özel Stilleri */
.welcome-section {
    text-align: center;
    margin-bottom: 30px;
    padding: 10px 0;
}

.welcome-section h2 {
    color: #2c3e50;
    font-size: 2em;
    margin-bottom: 10px;
}

.welcome-section p {
    color: #555;
    font-size: 1.1em;
    line-height: 1.6;
}

.dashboard-cards-section {
    padding-bottom: 20px; /* Alttan boşluk */
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive kartlar */
    gap: 20px; /* Kartlar arası boşluk */
    margin-top: 20px;
}

.card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    padding: 25px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-5px); /* Hafif yukarı kayma efekti */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card h3 {
    color: #2c3e50;
    font-size: 1.5em;
    margin-bottom: 10px;
}

.card p {
    color: #7f8c8d;
    font-size: 0.95em;
    line-height: 1.5;
    margin-bottom: 20px;
}

.card-link { /* "card a" yerine daha spesifik bir sınıf */
    display: inline-block;
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.card-link:hover {
    background-color: #2980b9;
}

/* Header'ın ana sayfada geri butonu olmaması durumunda padding ayarı */
.header .page-title {
    margin-left: auto; /* Başlığı ortalamak için */
    margin-right: auto;
}

/* Mobil için Responsive Ayarlar (eklemeler) */
@media (max-width: 480px) {
    .welcome-section h2 {
        font-size: 1.8em;
    }
    .welcome-section p {
        font-size: 1em;
    }
    .dashboard-cards {
        grid-template-columns: 1fr; /* Mobil cihazlarda kartları alt alta sırala */
    }
    .card {
        padding: 20px;
    }
}
/* Borç Geçmişi ve Ana Sayfa Kartları İçin Ortak Stiller (style.css'in en sonuna ekleyin) */

/* container için temel stil, eğer index.html'inizde yoksa */
/* Eğer ana sayfanızda zaten .container veya benzeri bir ana sarıcı div tanımı varsa, bu bölümü mevcut tanımla birleştirmeli veya çakışmaları önlemek için daha spesifik bir ad kullanmalısınız. */
.container {
    width: 100%;
    max-width: 420px; /* Mobil cihazlar için maksimum genişlik */
    background-color: #ffffff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin: 20px auto; /* Üst/alt 20px, sağ/sol otomatik ortalama */
    min-height: calc(100vh - 40px); /* Ekranın neredeyse tamamını kaplar */
    display: flex;
    flex-direction: column;
}

/* Başlık Alanı */
.header {
    background-color: #2c3e50; /* Koyu mavi */
    color: #ffffff;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.back-button {
    color: #ffffff;
    font-size: 24px;
    margin-right: 15px;
    text-decoration: none;
}

.page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    flex-grow: 1;
    text-align: center;
}
/* Eğer sadece başlık varsa, onu ortala */
.header .page-title:first-child:last-child {
    margin-left: auto;
    margin-right: auto;
}


/* İçerik Alanı */
.content {
    padding: 20px;
    flex-grow: 1;
}

/* Borç Özeti */
.debt-summary h2 {
    color: #333;
    font-size: 22px;
    margin-bottom: 20px;
    text-align: center;
}

.payment-ratio-card {
    background-color: #f8f8f8;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.payment-ratio-card h3 {
    color: #555;
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 15px;
}

.ratio-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#3498db 85%, #ecf0f1 85%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.1);
}

.ratio-value {
    font-size: 28px;
    font-weight: bold;
    color: #2c3e50;
    background-color: #ffffff;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Borç Tablosu */
.debt-table-section {
    overflow-x: auto;
    margin-bottom: 30px;
}

.debt-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 550px;
}

.debt-table th,
.debt-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.debt-table th {
    background-color: #f2f2f2;
    color: #333;
    font-weight: 600;
    text-transform: uppercase;
}

.debt-table tbody tr:last-child td {
    border-bottom: none;
}

.debt-table tbody tr:hover {
    background-color: #fcfcfc;
}

/* Durum Renkleri */
.status-odendi {
    color: #27ae60;
    font-weight: 500;
}

.status-gecikmis {
    color: #e74c3c;
    font-weight: 500;
}

/* Detaylı Rapor Butonu */
.report-button-container {
    text-align: center;
    padding-bottom: 20px;
    flex-shrink: 0;
}

.detail-report-button {
    background-color: #3498db;
    color: #ffffff;
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    max-width: 250px;
}

.detail-report-button:hover {
    background-color: #2980b9;
}

/* Ana Sayfa Kartları İçin Stiller (index.html'deki kartlar için) */
.dashboard-cards-section {
    padding-bottom: 20px;
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    padding: 25px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card h3 {
    color: #2c3e50;
    font-size: 1.5em;
    margin-bottom: 10px;
}

.card p {
    color: #7f8c8d;
    font-size: 0.95em;
    line-height: 1.5;
    margin-bottom: 20px;
}

.card-link {
    display: inline-block;
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.card-link:hover {
    background-color: #2980b9;
}

/* Mobil için Responsive Ayarlar */
@media (max-width: 768px) {
    .container {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
    }

    body {
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 15px;
    }

    .page-title {
        font-size: 18px;
    }

    .content {
        padding: 15px;
    }

    .debt-summary h2 {
        font-size: 20px;
    }

    .payment-ratio-card {
        padding: 20px;
    }

    .ratio-circle {
        width: 90px;
        height: 90px;
    }

    .ratio-value {
        font-size: 26px;
        width: 70px;
        height: 70px;
    }

    .debt-table th,
    .debt-table td {
        padding: 10px 8px;
        font-size: 13px;
    }

    .debt-table {
        min-width: 450px;
    }

    .detail-report-button {
        padding: 10px 20px;
        font-size: 15px;
    }

    /* Ana Sayfa Mobil Düzenlemeleri */
    .dashboard-cards {
        grid-template-columns: 1fr;
    }
    .card {
        padding: 20px;
    }
}
/* product-management.html için özel stiller (style.css'in en sonuna ekleyin) */

/* Add Product Section */
.add-product-section,
.bulk-add-product-section,
.product-list-display-section {
    background-color: #f8f8f8;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.add-product-section h2,
.bulk-add-product-section h2,
.product-list-display-section h2 {
    color: #2c3e50;
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.add-product-form .form-group {
    margin-bottom: 15px;
}

.add-product-form label,
.bulk-add-product-section label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 500;
}

.add-product-form input[type="text"],
.add-product-form input[type="number"],
.bulk-add-product-section textarea {
    width: calc(100% - 20px); /* Padding'i hesaba kat */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box; /* Padding ve border genişliğe dahil */
}

.add-product-form input[type="number"] {
    -moz-appearance: textfield; /* Firefox'da okları kaldır */
}
.add-product-form input[type="number"]::-webkit-outer-spin-button,
.add-product-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Chrome/Safari'de okları kaldır */
    margin: 0;
}

.add-button {
    background-color: #27ae60; /* Yeşil */
    color: #ffffff;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    margin-top: 10px;
}

.add-button:hover {
    background-color: #219d55;
}

.secondary-button {
    background-color: #3498db; /* Mavi */
}

.secondary-button:hover {
    background-color: #2980b9;
}

.info-text {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 15px;
    text-align: center;
    line-height: 1.5;
}

/* Product List Display Section */
.product-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.product-item:last-child {
    border-bottom: none;
}

.product-info {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.product-actions button {
    background: none;
    border: none;
    color: #7f8c8d;
    font-size: 18px;
    cursor: pointer;
    margin-left: 10px;
    transition: color 0.2s ease;
}

.product-actions button:hover {
    color: #2c3e50;
}

.edit-button:hover {
    color: #f39c12; /* Turuncu */
}

.delete-button:hover {
    color: #e74c3c; /* Kırmızı */
}

/* Mobil Uyumlu Düzenlemeler */
@media (max-width: 480px) {
    .add-product-section,
    .bulk-add-product-section,
    .product-list-display-section {
        padding: 15px;
    }

    .add-product-section h2,
    .bulk-add-product-section h2,
    .product-list-display-section h2 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .add-product-form input,
    .bulk-add-product-section textarea {
        width: calc(100% - 16px); /* Mobil için padding ayarı */
    }

    .add-button {
        padding: 10px 15px;
        font-size: 15px;
    }

    .product-item {
        flex-direction: column; /* Mobil cihazlarda alt alta sırala */
        align-items: flex-start;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .product-info {
        margin-bottom: 10px;
        width: 100%; /* Bilginin tam genişliği kaplaması için */
    }

    .product-actions {
        width: 100%; /* Butonların tam genişliği kaplaması için */
        text-align: right; /* Butonları sağa yasla */
    }

    .product-actions button {
        margin-left: 5px; /* Butonlar arası boşluğu azalt */
        font-size: 16px;
    }
}
```css
/* product-management.html için Toplu Ürün Ekleme ve Buton Stilleri (style.css'in en sonuna ekleyin) */

.bulk-add-product-section {
    background-color: #f8f8f8;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.bulk-add-product-section h2 {
    color: #2c3e50;
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.bulk-add-product-section .input-group { /* Mevcut input-group stilini kullanacak */
    margin-bottom: 15px;
}

.bulk-add-product-section label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 500;
}

.bulk-add-product-section textarea {
    width: calc(100% - 20px); /* Padding'i hesaba kat */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

.info-text {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 15px;
    text-align: center;
    line-height: 1.5;
}

/* Toplu ekleme butonu için mevcut add-product-button stilini kullanıp rengini değiştirelim */
.add-product-button.secondary-button {
    background-color: #3498db; /* Mavi */
}

.add-product-button.secondary-button:hover {
    background-color: #2980b9;
}

/* Eğer mevcut ürün listesinde placeholder (ürün yok) mesajı gerekiyorsa */
.managed-product-item.placeholder-item {
    color: #7f8c8d;
    font-style: italic;
    text-align: center;
    justify-content: center;
    padding: 20px; /* Daha belirgin olsun */
}

/* Mobil uyumlu düzenlemeler */
@media (max-width: 480px) {
    .bulk-add-product-section {
        padding: 15px;
    }

    .bulk-add-product-section h2 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .bulk-add-product-section textarea {
        width: calc(100% - 16px);
    }

    .add-product-button.secondary-button {
        padding: 10px 15px;
        font-size: 15px;
    }
}
/* product-management.html için Toplu Ürün Ekleme ve Buton Stilleri (style.css'in en sonuna ekleyin) */

.bulk-add-product-section {
    background-color: #f8f8f8; /* Mevcut section'larınızla uyumlu arka plan */
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.bulk-add-product-section h2 {
    color: #2c3e50;
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
}

/* Mevcut .input-group ve label stillerini kullanacak */
.bulk-add-product-section textarea {
    width: calc(100% - 20px); /* Padding'i hesaba kat */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

.info-text {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 15px;
    text-align: center;
    line-height: 1.5;
}

/* Toplu ekleme butonu için mevcut .add-product-button stilini kullanıp rengini değiştirelim */
.add-product-button.secondary-button {
    background-color: #3498db; /* Mavi */
}

.add-product-button.secondary-button:hover {
    background-color: #2980b9;
}

/* Mobil uyumlu düzenlemeler */
@media (max-width: 480px) {
    .bulk-add-product-section {
        padding: 15px;
    }

    .bulk-add-product-section h2 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .bulk-add-product-section textarea {
        width: calc(100% - 16px);
    }

    .add-product-button.secondary-button {
        padding: 10px 15px;
        font-size: 15px;
    }
}