body {
    background-color: #F4F6F9;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column; /* Dikey düzen */
    min-height: 100vh; /* Sayfa yüksekliği kadar esnet */
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Taşmaları önler */
}
/* Container (Sayfa İçeriği) */
.container {
    flex: 1; /* İçeriği esnek yapar */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* İçeriği yukarı hizalar */
    padding: 20px;
    margin-top: 100px; /* Top bar yüksekliği kadar boşluk */
}
/* TABLE ALANI */
.table-container {
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1200px;
    overflow: auto;
    position: relative;
    text-align: center;
    list-style-position: inside;
    display: inline-block;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

table, th, td {
    border: 1px solid #E4EAF2;
}

th, td {
    padding: 8px;
    text-align: left;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

th {
    background-color: #E4EAF2;
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: center;
}

th form {
    display: inline;
    margin: 0;
}

th input[type="submit"] {
    background-color: #f49c00;
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
}

th input[type="submit"]:hover {
    background-color: #000000;
}

td form {
    margin: 0;
    display: flex;
    justify-content: center;
}

td input[type="submit"] {
    background-color: #f49c00;
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    text-align: center;
}

td input[type="submit"]:hover {
    background-color: #000000;
}
/* FROM ALANI*/
.form-container {
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.form-container h2 {
    margin-bottom: 20px;
    color: #f49c00;
}
.form-container input[type="submit"], 
.form-container input[type="button"], 
.form-container button {
    background-color: #f49c00;
    color: #FFFFFF;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 5px;
    width: calc(33.33% - 10px);
    font-weight: bold;
}
.form-container input[type="submit"]:hover, 
.form-container input[type="button"]:hover, 
.form-container button:hover {
    background-color: #000000;
}
/* Dosya Seç Input */
input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #E4EAF2;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 14px;
    box-sizing: border-box;
    cursor: pointer;
}

/* Dosya Seç Butonunun Görünümünü Düzenleme */
input[type="file"]::-webkit-file-upload-button {
    background-color: #f49c00;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
}

/* Dosya Seç Butonu Hover Durumu */
input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #000000;
}

/* Dosya Seç Butonunun Focus Durumu */
input[type="file"]:focus {
    outline: none;
    border-color: #f49c00;
    box-shadow: 0 0 5px rgba(0, 61, 122, 0.5);
}

/* Genel Form Uyumu İçin Genişlik */
.form-row.double input[type="file"] {
    grid-column: span 2; /* İki sütun genişlikte olmasını sağlıyoruz */
}
input[readonly] {
    background-color: #F4F6F9;
    color: #555555;
    cursor: not-allowed;
}
textarea[readonly] {
    background-color: #F4F6F9;
    color: #555555;
    cursor: not-allowed;
}
.form-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
.form-row.triple {
    display: grid;
    grid-template-columns: 1fr 5fr;
    gap: 10px;
    align-items: center;
}
.form-row.double {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 2fr;
    gap: 10px;
    align-items: center;
}
.form-row label {
    grid-column: span 1;
    font-weight: bold;
    color: #f49c00;
    display: flex;
    align-items: center;
}
.form-row input[type="text"], 
.form-row.double input[type="number"], 
.form-row.double input[type="date"], 
.form-row input[type="password"], 
.form-row select,
.form-row.double select, 
.form-row input[type="date"] {
    grid-column: span 1;
    width: 100%;
    padding: 10px;
    border: 1px solid #E4EAF2;
    border-radius: 5px;
    box-sizing: border-box;
}
.form-row textarea {
    grid-column: span 1;
    width: 100%;
    padding: 10px;
    border: 1px solid #E4EAF2;
    border-radius: 5px;
    box-sizing: border-box;
    height: calc(4 * 38px);
}
.welcome-message {
    background-color: #000000;
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.announcements {
    background-color: white;
    padding: 20px;
    margin-top: 20px; /* Üst boşluk */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.announcements h3 {
    margin-top: 0;
    color: #000000;
}
.announcements ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.announcements ul li {
    padding: 10px 0;
    border-bottom: 1px solid #E4EAF2;
}
.actions button, .actions .button-link {
    background-color: #f49c00; /* Form-container'daki arka plan rengi */
    color: #FFFFFF; /* Yazı rengi */
    white-space: normal; /* Metnin alt satıra geçmesine izin ver */
    word-wrap: break-word; /* Uzun kelimeleri böl */
    border: none; /* Kenarlık kaldır */
    padding: 10px 20px; /* İç boşluk */
    border-radius: 5px; /* Köşeleri yuvarlat */
    cursor: pointer; /* İşaretçiyi el yap */
    margin: 10px 5px; /* Butonlar arası boşluk */
    font-weight: bold; /* Yazıyı kalın yap */
    text-decoration: none; /* Link alt çizgisini kaldır */
    display: inline-block; /* Linki buton gibi göstermeyi sağlar */
    text-align: center; /* Yazıyı ortalar */
}
.actions button:hover, .actions .button-link:hover {
    background-color: #000000; /* Hover efekti */
}

.actions {
    display: flex; /* Butonları yan yana hizala */
    justify-content: center; /* Ortala */
    gap: 10px; /* Butonlar arası boşluk */
}
.pagination {
    margin: 20px 0;
    text-align: center; /* Ortalama */
}

.pagination form {
    display: inline-block; /* Yan yana düzen */
    margin: 0 5px; /* Butonlar arası boşluk */
}

.pagination input[type="submit"] {
    background-color: #f49c00;
    color: white;
    border: none;
    padding: 8px 16px; /* Uygun boyut */
    cursor: pointer;
    border-radius: 5px; /* Köşe yuvarlama */
    font-size: 14px; /* Yazı boyutu */
    font-weight: bold; /* Yazıları kalın yap */
    box-sizing: border-box; /* Padding ve border hesaplamasına dahil */
}

.pagination input[type="submit"]:hover {
    background-color: #000000; /* Hover efekti */
}

.pagination .active input[type="submit"] {
    background-color: white;
    color: #f49c00;
    font-weight: bold; /* Aktif butonu belirgin yap */
    border: 1px solid #f49c00; /* İnce kenar ekle */
    padding: 7px 15px; /* Aktif butonun boyutunu diğerleriyle eşleştir */
}
.error-message {
    color: red;
}
.currency-container {
    position: relative;
    width: 100%;
}
.currency-input {
    width: 100%;
    padding-right: 30px; /* TL simgesi için boşluk bırakıyoruz */
    height: 38px;
    font-size: 16px;
    box-sizing: border-box;
}
.tl-symbol {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #555;
}
.file-list {
margin-top: 20px;
width: 100%;
}
.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.progress-bar {
    width: 70%;
    background-color: #E4EAF2;
    border-radius: 5px;
    overflow: hidden;
    height: 20px;
    margin-left: 10px;
}

.progress-bar-fill {
    width: 0;
    height: 100%;
    background-color: #4caf50;
    text-align: center;
    line-height: 20px;
    color: white;
    border-radius: 5px;
}
/* Top Bar */
.sidebar {
    width: 100%;
    min-height: 100px; /* Yüksekliği içeriğe göre ayarlanabilir */
    background-color: #000000;
    color: white;
    display: flex; /* Flex düzeni */
    align-items: center; /* Dikeyde ortalama */
    justify-content: space-between; /* Sol, orta ve sağ düzen */
    padding: 0 20px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-sizing: border-box; /* Taşmaları önler */
}

/* Hoş Geldiniz Mesajı (Solda, Çok Satırlı Desteği ile) */
.sidebar .username {
    font-size: 16px;
    font-weight: bold;
    color: white;
    flex: 1; /* Esnek genişlik */
    text-align: left;
    word-wrap: break-word; /* Uzun kelimeleri böler */
    word-break: break-word;
    white-space: normal; /* Satır içinde taşmalar için normal davranır */
    overflow: visible; /* Taşmalar için alta geçmesine izin ver */
    margin-right: 10px;
}

/* Logo (Tam Ortada) */
.sidebar .logo-container {
    flex: 0 0 auto; /* Sabit genişlik ve esnemeyi engelle */
    display: flex;
    justify-content: center; /* Yatayda ortala */
    align-items: center; /* Dikeyde ortala */
    max-width: 120px; /* Maksimum genişlik */
}
.sidebar .logo {
    max-height: 80px; /* Sabit logo boyutu */
    width: auto;
    margin: 0;
}

/* Hamburger Menü (Sağda ve Görünür) */
.sidebar .hamburger-container {
    flex: 1; /* Sağ tarafa esneyebilir */
    display: flex;
    justify-content: flex-end; /* Sağ tarafa hizala */
    align-items: center; /* Dikeyde ortala */
}
.sidebar .hamburger {
    font-size: 32px; /* Çizgilerin boyutunu büyütmek için artırdık */
    cursor: pointer;
    color: white; /* Beyaz renk */
    line-height: 1;
    margin: 0;
}
/* Sidebar'daki menüyü açmak için kullanılan stil */

/* Menü Alanı */
.menu-open {
    display: grid; /* Grid düzeni */
    background-color: white;
    grid-template-columns: repeat(4, 1fr); /* Her satırda 4 sütun */
    gap: 15px; /* Butonlar arasında boşluk */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.menu-open a {
    background-color: #f49c00;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s;
    display: flex; /* Flex düzeni */
    align-items: center; /* Dikeyde ortala */
}

.menu-open a:hover {
    background-color: #000000;
}

.menu-open a.whatsapp {
    background-color: #25D366;
}

.menu-open a.whatsapp:hover {
    background-color: #128C7E;
}
/* Menü Alanı */
.menu {
    display: none; /* Gizli başlıyor */
    flex-direction: column; /* Dikey düzen */
    background-color: #000000; /* Arka plan rengi */
    position: fixed; /* Sabit pozisyon */
    top: 100px; /* Top bar'ın hemen altına yerleştir */
    width: 100%; /* Tam genişlik */
    padding-bottom: 10px; /* Alt tarafta biraz boşluk bırak */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Gölge efekti */
    z-index: 999; /* Üstte görünmesi için */
    box-sizing: border-box; /* Taşmaları önle */
}

/* Menü İçerisindeki Butonlar */
.menu a {
    color: white; /* Yazı rengi */
    text-decoration: none; /* Alt çizgi yok */
    background-color: #f49c00; /* Buton arka plan rengi */
    padding: 10px; /* İçerik boşluğu */
    border-radius: 5px; /* Köşeleri yuvarla */
    text-align: center; /* Ortala */
    margin: 5px 10px; /* Butonlar arası boşluk */
    transition: background-color 0.3s; /* Hover efekti için */
    font-weight: bold;
}

/* Hover Durumu */
.menu a:hover {
    background-color: #808080; /* Hover sırasında arka plan rengi */
}

/* Alt Boşluk */
.menu a:last-child {
    margin-bottom: 10px; /* Son butonun alt boşluğu */
}

/* Buton Konteyneri (Grid Düzeni) */
.button-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px; /* Butonlar arası boşluk */
}
/* Form butonu için temel stil */
.form-button {
    background-color: #f49c00; /* Form-container'daki arka plan rengi */
    color: #FFFFFF; /* Yazı rengi */
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-align: center;
}

/* Üzerine gelindiğinde stil */
.form-button:hover {
    background-color: #000000; /* Siyah */
    transform: scale(1.05); /* Hafif büyüme efekti */
    cursor: pointer;
}
/* Butonlar */
.button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: white;
    background-color: #f49c00;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    transition: background-color 0.3s;
    overflow: hidden
    text-overflow: ellipsis;
}

.button:hover {
    background-color: #0052A4;
}

.button.whatsapp {
    background-color: #25D366;
}

.button.whatsapp:hover {
    background-color: #128C7E;
}

/* Footer */
.footer {
    width: 100%;
    background-color: #000000; /* Arka plan rengi */
    color: white; /* Yazı rengi */
    text-align: center; /* Yazıları ortala */
    padding: 10px 0; /* Üst ve alt boşluk */
    font-size: 14px; /* Yazı boyutu */
    font-weight: bold;
    margin-top: auto; /* Footer'ı en alta iter */
}
.footer a {
    color: #0072CE; /* Link rengi */
    text-decoration: underline;
}
.footer a:hover {
    color: #0052A4; /* Hover efekti */
}
/* Yükleniyor Animasyonu Stil */
        #loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 8px solid #E4EAF2;
            border-top: 8px solid #0072CE;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }