.short-input {
    width: 70px;
}

.fields-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.field-section {
    flex: 1;
    padding: 10px;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    border-right: 2px solid black;

    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Başlangıçta tüm öğeleri sola hizalar */
    justify-content: flex-start;
}

.field-section:last-child {
    border-right: none;
}

.field-group {
    position: relative;
    padding-top: 5mm; /* başık ile block arasını ayarlıyor */
    margin-top: 4mm; /* Margin üst değerini tekrar yazmanıza gerek yok, doğrudan 4mm olarak ayarlayabilirsiniz */
    display: flex;
    flex-direction: column;
    gap: 2mm;
}

.inline-inputs {
    display: flex;
    align-items: flex-start;
    gap: 10mm;
}

.inline-inputs > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.input-container {
    display: flex;
    flex-direction: column;
    gap: 2mm;
    align-items: flex-start;
}

.submit-button {
    margin-top: 2mm;
}

.control-label {
    font-size: 0.65em;
}

.section-title {
    position: absolute;
    top: 2mm;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 0 10px;
    padding-bottom: 2mm;
    font-size: 1.2em;
    border-bottom: 2px solid black;
    margin-bottom: 4mm;
    z-index: 1;
}

.inline-inputs {
    display: flex;
    align-items: baseline; /* Align items along their baseline */
    gap: 10px; /* Adjust the gap to your preference */
}

.input-container {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Spacing between label and input */
}

.inline-inputs {
    display: flex;
    align-items: baseline; /* Öğeleri aynı temel çizgide hizalar */
    gap: 20px; /* Bu değeri artırarak öğeler arasındaki boşluğu ayarlayabilirsiniz */
}

.input-container {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Label ve input arasındaki boşluk */
    margin-right: 10px; /* Sağdaki her input-container için boşluk ekler */
}

.input-container:last-child {
    margin-right: 0; /* Son input-container için sağ boşluğu kaldır */
}







.container {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    justify-content: space-between;
}

.column {
    flex: 1;
    margin-right: 20px; /* Sütunlar arasında boşluk sağlar */
}

.column:last-child {
    margin-right: 0; /* Son sütunda sağdaki boşluğu kaldırır */
}



.input-block {
    display: flex;
    justify-content: flex-start; /* Öğeleri yatay eksende sola hizalar */
    align-items: flex-start; /* Öğeleri dikey eksende üste hizalar */
    border-left: 2px solid black; /* Sol çizgiyi belirler ve genişliğini artırır */
    border-right: 2px solid black; /* Sağ çizgiyi belirler ve genişliğini artırır */
    border-top: 2px solid black; /* Üst çizgiyi belirler, mevcut değeri korur */
    border-bottom: 2px solid black; /* Alt çizgiyi belirler, mevcut değeri korur */
    padding: 40px; /* İç boşlukları belirler */
    background-color: #f5f5f5; /* Arka plan rengini ayarlar */
    margin-right: 5px; /* Sağdaki her .input-block için boşluk ekler */
    margin-left: 5px; /* Soldaki her .input-block için boşluk ekler */
    width: calc(100% - 40px); /* Yüzde 100 genişlikten, her iki taraftan eklenen boşlukları çıkarır */
}

/* Diğer stillerinizi bozmamak için sadece bu değişiklikleri yapmanız yeterlidir. */

/* Ayrıca .input-block için sağdan ve soldan boşluk ekleyerek, bloğu genel olarak genişletebilirsiniz. */


.input-block > div {
    margin-right: 20px; /* Öğeler arasında boşluk sağlar */
}

@media (max-width: 1200px) {
    .input-block {
        flex-direction: column; /* Küçük ekranlarda öğeleri dikey olarak hizalar */
    }
    .column {
        margin-right: 0;
        margin-bottom: 20px; /* Sütunlar arasında dikey boşluk sağlar */
    }
    .column:last-child {
        margin-bottom: 0; /* Son sütunda alttaki boşluğu kaldırır */
    }
}


.fields-container {
    display: flex;
    justify-content: center; /* Merkeze hizalar */
    align-items: flex-start;
    width: 100%; /* Konteynerin genişliğini sayfanın genişliğine ayarlar */
}

.field-section {
    width: 100%; /* field-section'ın genişliğini sayfanın genişliğine ayarlar */
    padding: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center; /* İçerikleri yatay olarak merkeze hizalar */
    justify-content: flex-start;
}

.input-block {
    display: flex;
    justify-content: center; /* İçerikleri yatay olarak merkeze hizalar */
    align-items: flex-start;
    width: 100%; /* input-block'ın genişliğini sayfanın genişliğine ayarlar */
    max-width: 1200px; /* İstediğiniz maksimum genişliği ayarlayın */
    border: 2px solid black;
    padding: 10px;
    background-color: #f5f5f5;
    box-sizing: border-box; /* Padding ve border dahil olmak üzere toplam genişliği ayarlar */
}

.row {
    display: flex;
    justify-content: space-between; /* İçerikleri yatay olarak eşit aralıklarla dağıtır */
    width: 100%; /* row'un genişliğini input-block genişliğine ayarlar */
}

.input-container {
    /* Gereksiz margin ve padding ayarlarını kaldırın veya düzeltin */
    display: flex;
    flex-direction: column;
    gap: 2mm;
    align-items: center; /* İçerikleri dikey olarak merkeze hizalar */
}

/* Aşağıdaki media query, ekran genişliği 1200px'den küçük olduğunda uygulanır ve 
   .input-block'ın genişliğini uygun şekilde ayarlar. */
@media (max-width: 1200px) {
    .input-block {
        max-width: 100%; /* Maksimum genişliği sayfa genişliğine ayarlar */
        padding: 10px;
    }
}




.input-block {
    position: relative; /* Çocuk elemanları konumlandırmak için referans noktası */
    /* Diğer stil tanımlarınız... */
}

.toggle-controls {
    position: absolute;
    top: -10px; /* Çizginin hemen üstüne yerleştirmek için negatif bir değer */
    left: -20px;
    display: flex;
    z-index: 2; /* Diğer içeriklerin üstünde olmasını sağlar */
}

.toggle-btn {
    padding: 2px 5px;
    font-size: 1rem;
    cursor: pointer;
    border: 1px solid #ccc; /* Buton için bir sınır ekleyin */
    background-color: #fff; /* Butonun arka plan rengi */
    border-radius: 50%; /* Daire şeklinde bir buton için */
    width: 20px; /* Buton genişliği */
    height: 20px; /* Buton yüksekliği */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.row {
    transition: max-height 0s ease-in-out; /* Animasyon süresi 0.2 saniye olarak ayarlandı */
    max-height: 200px; /* Maksimum yükseklik (açık durum) */
    overflow: hidden; /* İçerik kesilir */
    /* Diğer stiller... */
}

/* Gizlenmiş haldeyken row'un yüksekliği */
.row.collapsed {
    max-height: 0; /* Bloğu gizlemek için */
    padding: 0; /* Üst ve alt padding sıfırla, yan padding koru */
}


.ceyrek-input-block {
    display: flex;
    justify-content: flex-start; /* Öğeleri yatay eksende sola hizalar */
    align-items: flex-start; /* Öğeleri dikey eksende üste hizalar */
    border-left: 2px solid black; /* Sol çizgiyi belirler ve genişliğini artırır */
    border-right: 2px solid black; /* Sağ çizgiyi belirler ve genişliğini artırır */
    border-top: 2px solid black; /* Üst çizgiyi belirler, mevcut değeri korur */
    border-bottom: 2px solid black; /* Alt çizgiyi belirler, mevcut değeri korur */
    padding: 5px; /* İç boşlukları belirler */
    background-color: #f5f5f5; /* Arka plan rengini ayarlar */
    margin-right: 5px; /* Sağdaki her .input-block için boşluk ekler */
    margin-left: 5px; /* Soldaki her .input-block için boşluk ekler */
    width: calc(100% - 40px); /* Yüzde 100 genişlikten, her iki taraftan eklenen boşlukları çıkarır */
    position: relative;
    max-width: 1200px; /* İstediğiniz maksimum genişliği ayarlayın */
    box-sizing: border-box; /* Padding ve border dahil olmak üzere toplam genişliği ayarlar */

}

/* Aşağıdaki media query, ekran genişliği 1200px'den küçük olduğunda uygulanır ve 
   .input-block'ın genişliğini uygun şekilde ayarlar. */
@media (max-width: 1200px) {
    .ceyrek-input-block {
        max-width: 100%; /* Maksimum genişliği sayfa genişliğine ayarlar */
        padding: 10px;
    }
}

.ceyrek-input-block .row {
    display: flex;
    /*  flex-wrap: wrap; /* İçerik çok uzunsa yeni satıra geçmesini sağlar */
    justify-content: flex-start; /* İçerikleri sola hizalar */
    align-items: flex-start; /* İçerikleri üst kenara hizalar */
    gap: 20px; /* İçerikler arası boşluk */
    /* align-items: center;
     /* Diğer stiller... */
}



.yarim-input-block {
    display: flex;
    justify-content: flex-start; /* Öğeleri yatay eksende sola hizalar */
    align-items: flex-start; /* Öğeleri dikey eksende üste hizalar */
    border-left: 2px solid black; /* Sol çizgiyi belirler ve genişliğini artırır */
    border-right: 2px solid black; /* Sağ çizgiyi belirler ve genişliğini artırır */
    border-top: 2px solid black; /* Üst çizgiyi belirler, mevcut değeri korur */
    border-bottom: 2px solid black; /* Alt çizgiyi belirler, mevcut değeri korur */
    padding: 5px; /* İç boşlukları belirler */
    background-color: #f5f5f5; /* Arka plan rengini ayarlar */
    margin-right: 5px; /* Sağdaki her .input-block için boşluk ekler */
    margin-left: 5px; /* Soldaki her .input-block için boşluk ekler */
    width: calc(100% - 40px); /* Yüzde 100 genişlikten, her iki taraftan eklenen boşlukları çıkarır */
    position: relative;
    max-width: 1200px; /* İstediğiniz maksimum genişliği ayarlayın */
    box-sizing: border-box; /* Padding ve border dahil olmak üzere toplam genişliği ayarlar */

}

/* Aşağıdaki media query, ekran genişliği 1200px'den küçük olduğunda uygulanır ve 
   .input-block'ın genişliğini uygun şekilde ayarlar. */
@media (max-width: 1200px) {
    .yarim-input-block{
        max-width: 100%; /* Maksimum genişliği sayfa genişliğine ayarlar */
        padding: 10px;
    }
}

.yarim-input-block  .row {
    display: flex;
    /*  flex-wrap: wrap; /* İçerik çok uzunsa yeni satıra geçmesini sağlar */
    justify-content: flex-start; /* İçerikleri sola hizalar */
    align-items: flex-start; /* İçerikleri üst kenara hizalar */
    gap: 20px; /* İçerikler arası boşluk */
    /* align-items: center;
     /* Diğer stiller... */
}

.tam-input-block {
    display: flex;
    justify-content: flex-start; /* Öğeleri yatay eksende sola hizalar */
    align-items: flex-start; /* Öğeleri dikey eksende üste hizalar */
    border-left: 2px solid black; /* Sol çizgiyi belirler ve genişliğini artırır */
    border-right: 2px solid black; /* Sağ çizgiyi belirler ve genişliğini artırır */
    border-top: 2px solid black; /* Üst çizgiyi belirler, mevcut değeri korur */
    border-bottom: 2px solid black; /* Alt çizgiyi belirler, mevcut değeri korur */
    padding: 5px; /* İç boşlukları belirler */
    background-color: #f5f5f5; /* Arka plan rengini ayarlar */
    margin-right: 5px; /* Sağdaki her .input-block için boşluk ekler */
    margin-left: 5px; /* Soldaki her .input-block için boşluk ekler */
    width: calc(100% - 40px); /* Yüzde 100 genişlikten, her iki taraftan eklenen boşlukları çıkarır */
    position: relative;
    max-width: 1200px; /* İstediğiniz maksimum genişliği ayarlayın */
    box-sizing: border-box; /* Padding ve border dahil olmak üzere toplam genişliği ayarlar */

}

/* Aşağıdaki media query, ekran genişliği 1200px'den küçük olduğunda uygulanır ve 
   .input-block'ın genişliğini uygun şekilde ayarlar. */
@media (max-width: 1200px) {
    .tam-input-block{
        max-width: 100%; /* Maksimum genişliği sayfa genişliğine ayarlar */
        padding: 10px;
    }
}

.tam-input-block .row{
    display: flex;
    /*  flex-wrap: wrap; /* İçerik çok uzunsa yeni satıra geçmesini sağlar */
    justify-content: flex-start; /* İçerikleri sola hizalar */
    align-items: flex-start; /* İçerikleri üst kenara hizalar */
    gap: 20px; /* İçerikler arası boşluk */
    /* align-items: center;
     /* Diğer stiller... */
}



.kafali-input-block {
    display: flex;
    justify-content: flex-start; /* Öğeleri yatay eksende sola hizalar */
    align-items: flex-start; /* Öğeleri dikey eksende üste hizalar */
    border-left: 2px solid black; /* Sol çizgiyi belirler ve genişliğini artırır */
    border-right: 2px solid black; /* Sağ çizgiyi belirler ve genişliğini artırır */
    border-top: 2px solid black; /* Üst çizgiyi belirler, mevcut değeri korur */
    border-bottom: 2px solid black; /* Alt çizgiyi belirler, mevcut değeri korur */
    padding: 5px; /* İç boşlukları belirler */
    background-color: #f5f5f5; /* Arka plan rengini ayarlar */
    margin-right: 5px; /* Sağdaki her .input-block için boşluk ekler */
    margin-left: 5px; /* Soldaki her .input-block için boşluk ekler */
    width: calc(100% - 40px); /* Yüzde 100 genişlikten, her iki taraftan eklenen boşlukları çıkarır */
    position: relative;
    max-width: 1200px; /* İstediğiniz maksimum genişliği ayarlayın */
    box-sizing: border-box; /* Padding ve border dahil olmak üzere toplam genişliği ayarlar */

}

/* Aşağıdaki media query, ekran genişliği 1200px'den küçük olduğunda uygulanır ve 
   .input-block'ın genişliğini uygun şekilde ayarlar. */
@media (max-width: 1200px) {
    .kafali-input-block{
        max-width: 100%; /* Maksimum genişliği sayfa genişliğine ayarlar */
        padding: 10px;
    }
}

.kafali-input-block .row{
    display: flex;
    /*  flex-wrap: wrap; /* İçerik çok uzunsa yeni satıra geçmesini sağlar */
    justify-content: flex-start; /* İçerikleri sola hizalar */
    align-items: flex-start; /* İçerikleri üst kenara hizalar */
    gap: 20px; /* İçerikler arası boşluk */
    /* align-items: center;
     /* Diğer stiller... */
}



.atalira-input-block {
    display: flex;
    justify-content: flex-start; /* Öğeleri yatay eksende sola hizalar */
    align-items: flex-start; /* Öğeleri dikey eksende üste hizalar */
    border-left: 2px solid black; /* Sol çizgiyi belirler ve genişliğini artırır */
    border-right: 2px solid black; /* Sağ çizgiyi belirler ve genişliğini artırır */
    border-top: 2px solid black; /* Üst çizgiyi belirler, mevcut değeri korur */
    border-bottom: 2px solid black; /* Alt çizgiyi belirler, mevcut değeri korur */
    padding: 5px; /* İç boşlukları belirler */
    background-color: #f5f5f5; /* Arka plan rengini ayarlar */
    margin-right: 5px; /* Sağdaki her .input-block için boşluk ekler */
    margin-left: 5px; /* Soldaki her .input-block için boşluk ekler */
    width: calc(100% - 40px); /* Yüzde 100 genişlikten, her iki taraftan eklenen boşlukları çıkarır */
    position: relative;
    max-width: 1200px; /* İstediğiniz maksimum genişliği ayarlayın */
    box-sizing: border-box; /* Padding ve border dahil olmak üzere toplam genişliği ayarlar */

}

/* Aşağıdaki media query, ekran genişliği 1200px'den küçük olduğunda uygulanır ve 
   .input-block'ın genişliğini uygun şekilde ayarlar. */
@media (max-width: 1200px) {
    .atalira-input-block{
        max-width: 100%; /* Maksimum genişliği sayfa genişliğine ayarlar */
        padding: 10px;
    }
}

.atalira-input-block .row{
    display: flex;
    /*  flex-wrap: wrap; /* İçerik çok uzunsa yeni satıra geçmesini sağlar */
    justify-content: flex-start; /* İçerikleri sola hizalar */
    align-items: flex-start; /* İçerikleri üst kenara hizalar */
    gap: 20px; /* İçerikler arası boşluk */
    /* align-items: center;
     /* Diğer stiller... */
}



.bilezik22ayar-input-block {
    display: flex;
    justify-content: flex-start; /* Öğeleri yatay eksende sola hizalar */
    align-items: flex-start; /* Öğeleri dikey eksende üste hizalar */
    border-left: 2px solid black; /* Sol çizgiyi belirler ve genişliğini artırır */
    border-right: 2px solid black; /* Sağ çizgiyi belirler ve genişliğini artırır */
    border-top: 2px solid black; /* Üst çizgiyi belirler, mevcut değeri korur */
    border-bottom: 2px solid black; /* Alt çizgiyi belirler, mevcut değeri korur */
    padding: 5px; /* İç boşlukları belirler */
    background-color: #f5f5f5; /* Arka plan rengini ayarlar */
    margin-right: 5px; /* Sağdaki her .input-block için boşluk ekler */
    margin-left: 5px; /* Soldaki her .input-block için boşluk ekler */
    width: calc(100% - 40px); /* Yüzde 100 genişlikten, her iki taraftan eklenen boşlukları çıkarır */
    position: relative;
    max-width: 1200px; /* İstediğiniz maksimum genişliği ayarlayın */
    box-sizing: border-box; /* Padding ve border dahil olmak üzere toplam genişliği ayarlar */

}

/* Aşağıdaki media query, ekran genişliği 1200px'den küçük olduğunda uygulanır ve 
   .input-block'ın genişliğini uygun şekilde ayarlar. */
@media (max-width: 1200px) {
    .bilezik22ayar-input-block{
        max-width: 100%; /* Maksimum genişliği sayfa genişliğine ayarlar */
        padding: 10px;
    }
}

.bilezik22ayar-input-block .row{
    display: flex;
    /*  flex-wrap: wrap; /* İçerik çok uzunsa yeni satıra geçmesini sağlar */
    justify-content: flex-start; /* İçerikleri sola hizalar */
    align-items: flex-start; /* İçerikleri üst kenara hizalar */
    gap: 20px; /* İçerikler arası boşluk */
    /* align-items: center;
     /* Diğer stiller... */
}




.birgram-input-block {
    display: flex;
    justify-content: flex-start; /* Öğeleri yatay eksende sola hizalar */
    align-items: flex-start; /* Öğeleri dikey eksende üste hizalar */
    border-left: 2px solid black; /* Sol çizgiyi belirler ve genişliğini artırır */
    border-right: 2px solid black; /* Sağ çizgiyi belirler ve genişliğini artırır */
    border-top: 2px solid black; /* Üst çizgiyi belirler, mevcut değeri korur */
    border-bottom: 2px solid black; /* Alt çizgiyi belirler, mevcut değeri korur */
    padding: 5px; /* İç boşlukları belirler */
    background-color: #f5f5f5; /* Arka plan rengini ayarlar */
    margin-right: 5px; /* Sağdaki her .input-block için boşluk ekler */
    margin-left: 5px; /* Soldaki her .input-block için boşluk ekler */
    width: calc(100% - 40px); /* Yüzde 100 genişlikten, her iki taraftan eklenen boşlukları çıkarır */
    position: relative;
    max-width: 1200px; /* İstediğiniz maksimum genişliği ayarlayın */
    box-sizing: border-box; /* Padding ve border dahil olmak üzere toplam genişliği ayarlar */

}

/* Aşağıdaki media query, ekran genişliği 1200px'den küçük olduğunda uygulanır ve 
   .input-block'ın genişliğini uygun şekilde ayarlar. */
@media (max-width: 1200px) {
    .birgram-input-block{
        max-width: 100%; /* Maksimum genişliği sayfa genişliğine ayarlar */
        padding: 10px;
    }
}

.birgram-input-block .row{
    display: flex;
    /*  flex-wrap: wrap; /* İçerik çok uzunsa yeni satıra geçmesini sağlar */
    justify-content: flex-start; /* İçerikleri sola hizalar */
    align-items: flex-start; /* İçerikleri üst kenara hizalar */
    gap: 20px; /* İçerikler arası boşluk */
    /* align-items: center;
     /* Diğer stiller... */
}


.yarimgram-input-block {
    display: flex;
    justify-content: flex-start; /* Öğeleri yatay eksende sola hizalar */
    align-items: flex-start; /* Öğeleri dikey eksende üste hizalar */
    border-left: 2px solid black; /* Sol çizgiyi belirler ve genişliğini artırır */
    border-right: 2px solid black; /* Sağ çizgiyi belirler ve genişliğini artırır */
    border-top: 2px solid black; /* Üst çizgiyi belirler, mevcut değeri korur */
    border-bottom: 2px solid black; /* Alt çizgiyi belirler, mevcut değeri korur */
    padding: 5px; /* İç boşlukları belirler */
    background-color: #f5f5f5; /* Arka plan rengini ayarlar */
    margin-right: 5px; /* Sağdaki her .input-block için boşluk ekler */
    margin-left: 5px; /* Soldaki her .input-block için boşluk ekler */
    width: calc(100% - 40px); /* Yüzde 100 genişlikten, her iki taraftan eklenen boşlukları çıkarır */
    position: relative;
    max-width: 1200px; /* İstediğiniz maksimum genişliği ayarlayın */
    box-sizing: border-box; /* Padding ve border dahil olmak üzere toplam genişliği ayarlar */

}

/* Aşağıdaki media query, ekran genişliği 1200px'den küçük olduğunda uygulanır ve 
   .input-block'ın genişliğini uygun şekilde ayarlar. */
@media (max-width: 1200px) {
    .yarimgram-input-block{
        max-width: 100%; /* Maksimum genişliği sayfa genişliğine ayarlar */
        padding: 10px;
    }
}

.yarimgram-input-block .row{
    display: flex;
    /*  flex-wrap: wrap; /* İçerik çok uzunsa yeni satıra geçmesini sağlar */
    justify-content: flex-start; /* İçerikleri sola hizalar */
    align-items: flex-start; /* İçerikleri üst kenara hizalar */
    gap: 20px; /* İçerikler arası boşluk */
    /* align-items: center;
     /* Diğer stiller... */
}



.ceyrekgram-input-block {
    display: flex;
    justify-content: flex-start; /* Öğeleri yatay eksende sola hizalar */
    align-items: flex-start; /* Öğeleri dikey eksende üste hizalar */
    border-left: 2px solid black; /* Sol çizgiyi belirler ve genişliğini artırır */
    border-right: 2px solid black; /* Sağ çizgiyi belirler ve genişliğini artırır */
    border-top: 2px solid black; /* Üst çizgiyi belirler, mevcut değeri korur */
    border-bottom: 2px solid black; /* Alt çizgiyi belirler, mevcut değeri korur */
    padding: 5px; /* İç boşlukları belirler */
    background-color: #f5f5f5; /* Arka plan rengini ayarlar */
    margin-right: 5px; /* Sağdaki her .input-block için boşluk ekler */
    margin-left: 5px; /* Soldaki her .input-block için boşluk ekler */
    width: calc(100% - 40px); /* Yüzde 100 genişlikten, her iki taraftan eklenen boşlukları çıkarır */
    position: relative;
    max-width: 1200px; /* İstediğiniz maksimum genişliği ayarlayın */
    box-sizing: border-box; /* Padding ve border dahil olmak üzere toplam genişliği ayarlar */

}

/* Aşağıdaki media query, ekran genişliği 1200px'den küçük olduğunda uygulanır ve 
   .input-block'ın genişliğini uygun şekilde ayarlar. */
@media (max-width: 1200px) {
    .ceyrekgram-input-block{
        max-width: 100%; /* Maksimum genişliği sayfa genişliğine ayarlar */
        padding: 10px;
    }
}

.ceyrekgram-input-block .row{
    display: flex;
    /*  flex-wrap: wrap; /* İçerik çok uzunsa yeni satıra geçmesini sağlar */
    justify-content: flex-start; /* İçerikleri sola hizalar */
    align-items: flex-start; /* İçerikleri üst kenara hizalar */
    gap: 20px; /* İçerikler arası boşluk */
    /* align-items: center;
     /* Diğer stiller... */
}



.ondabirgram-input-block {
    display: flex;
    justify-content: flex-start; /* Öğeleri yatay eksende sola hizalar */
    align-items: flex-start; /* Öğeleri dikey eksende üste hizalar */
    border-left: 2px solid black; /* Sol çizgiyi belirler ve genişliğini artırır */
    border-right: 2px solid black; /* Sağ çizgiyi belirler ve genişliğini artırır */
    border-top: 2px solid black; /* Üst çizgiyi belirler, mevcut değeri korur */
    border-bottom: 2px solid black; /* Alt çizgiyi belirler, mevcut değeri korur */
    padding: 5px; /* İç boşlukları belirler */
    background-color: #f5f5f5; /* Arka plan rengini ayarlar */
    margin-right: 5px; /* Sağdaki her .input-block için boşluk ekler */
    margin-left: 5px; /* Soldaki her .input-block için boşluk ekler */
    width: calc(100% - 40px); /* Yüzde 100 genişlikten, her iki taraftan eklenen boşlukları çıkarır */
    position: relative;
    max-width: 1200px; /* İstediğiniz maksimum genişliği ayarlayın */
    box-sizing: border-box; /* Padding ve border dahil olmak üzere toplam genişliği ayarlar */

}

/* Aşağıdaki media query, ekran genişliği 1200px'den küçük olduğunda uygulanır ve 
   .input-block'ın genişliğini uygun şekilde ayarlar. */
@media (max-width: 1200px) {
    .ondabirgram-input-block{
        max-width: 100%; /* Maksimum genişliği sayfa genişliğine ayarlar */
        padding: 10px;
    }
}

.ondabirgram-input-block .row{
    display: flex;
    /*  flex-wrap: wrap; /* İçerik çok uzunsa yeni satıra geçmesini sağlar */
    justify-content: flex-start; /* İçerikleri sola hizalar */
    align-items: flex-start; /* İçerikleri üst kenara hizalar */
    gap: 20px; /* İçerikler arası boşluk */
    /* align-items: center;
     /* Diğer stiller... */
}




.sifinoktabesgram-input-block {
    display: flex;
    justify-content: flex-start; /* Öğeleri yatay eksende sola hizalar */
    align-items: flex-start; /* Öğeleri dikey eksende üste hizalar */
    border-left: 2px solid black; /* Sol çizgiyi belirler ve genişliğini artırır */
    border-right: 2px solid black; /* Sağ çizgiyi belirler ve genişliğini artırır */
    border-top: 2px solid black; /* Üst çizgiyi belirler, mevcut değeri korur */
    border-bottom: 2px solid black; /* Alt çizgiyi belirler, mevcut değeri korur */
    padding: 5px; /* İç boşlukları belirler */
    background-color: #f5f5f5; /* Arka plan rengini ayarlar */
    margin-right: 5px; /* Sağdaki her .input-block için boşluk ekler */
    margin-left: 5px; /* Soldaki her .input-block için boşluk ekler */
    width: calc(100% - 40px); /* Yüzde 100 genişlikten, her iki taraftan eklenen boşlukları çıkarır */
    position: relative;
    max-width: 1200px; /* İstediğiniz maksimum genişliği ayarlayın */
    box-sizing: border-box; /* Padding ve border dahil olmak üzere toplam genişliği ayarlar */

}

/* Aşağıdaki media query, ekran genişliği 1200px'den küçük olduğunda uygulanır ve 
   .input-block'ın genişliğini uygun şekilde ayarlar. */
@media (max-width: 1200px) {
    .sifinoktabesgram-input-block{
        max-width: 100%; /* Maksimum genişliği sayfa genişliğine ayarlar */
        padding: 10px;
    }
}

.sifinoktabesgram-input-block .row{
    display: flex;
    /*  flex-wrap: wrap; /* İçerik çok uzunsa yeni satıra geçmesini sağlar */
    justify-content: flex-start; /* İçerikleri sola hizalar */
    align-items: flex-start; /* İçerikleri üst kenara hizalar */
    gap: 20px; /* İçerikler arası boşluk */
    /* align-items: center;
     /* Diğer stiller... */
}


.yirmidortayargram-input-block {
    display: flex;
    justify-content: flex-start; /* Öğeleri yatay eksende sola hizalar */
    align-items: flex-start; /* Öğeleri dikey eksende üste hizalar */
    border-left: 2px solid black; /* Sol çizgiyi belirler ve genişliğini artırır */
    border-right: 2px solid black; /* Sağ çizgiyi belirler ve genişliğini artırır */
    border-top: 2px solid black; /* Üst çizgiyi belirler, mevcut değeri korur */
    border-bottom: 2px solid black; /* Alt çizgiyi belirler, mevcut değeri korur */
    padding: 5px; /* İç boşlukları belirler */
    background-color: #f5f5f5; /* Arka plan rengini ayarlar */
    margin-right: 5px; /* Sağdaki her .input-block için boşluk ekler */
    margin-left: 5px; /* Soldaki her .input-block için boşluk ekler */
    width: calc(100% - 40px); /* Yüzde 100 genişlikten, her iki taraftan eklenen boşlukları çıkarır */
    position: relative;
    max-width: 1200px; /* İstediğiniz maksimum genişliği ayarlayın */
    box-sizing: border-box; /* Padding ve border dahil olmak üzere toplam genişliği ayarlar */

}

/* Aşağıdaki media query, ekran genişliği 1200px'den küçük olduğunda uygulanır ve 
   .input-block'ın genişliğini uygun şekilde ayarlar. */
@media (max-width: 1200px) {
    .yirmidortayargram-input-block{
        max-width: 100%; /* Maksimum genişliği sayfa genişliğine ayarlar */
        padding: 10px;
    }
}

.yirmidortayargram-input-block .row{
    display: flex;
    /*  flex-wrap: wrap; /* İçerik çok uzunsa yeni satıra geçmesini sağlar */
    justify-content: flex-start; /* İçerikleri sola hizalar */
    align-items: flex-start; /* İçerikleri üst kenara hizalar */
    gap: 20px; /* İçerikler arası boşluk */
    /* align-items: center;
     /* Diğer stiller... */
}




.input-block, .ceyrek-input-block, .yarim-input-block, .tam-input-block,
.kafali-input-block,
.atalira-input-block,
.bilezik22ayar-input-block,
.birgram-input-block,
.yarimgram-input-block,
.ceyrekgram-input-block,
.ondabirgram-input-block,
.sifinoktabesgram-input-block,
.yirmidortayargram-input-block
{
    width: 1200px; /* Sabit genişlik */
    /* Diğer stiller... */
}

/* Blok kapalıyken */
.input-block.collapsed, .ceyrek-input-block.collapsed,
.yarim-input-block.collapsed , .tam-input-block.collapsed,
.kafali-input-block.collapsed, .atalira-input-block.collapsed,
.bilezik22ayar-input-block.collapsed,
.birgram-input-block.collapsed,
.yarimgram-input-block.collapsed,
.ceyrekgram-input-block.collapsed,
.ondabirgram-input-block.collapsed,
.sifinoktabesgram-input-block.collapsed,
.yirmidortayargram-input-block.collapsed
{
    max-height: 20px; /* Kapalıyken gösterilmesi gereken yükseklik, tek bir satır yüksekliği */
    overflow: hidden; /* Fazla gelen içeriği kes */
    transition: max-height 0.2s ease-in-out; /* Yükseklik değişimini animasyonla yap */
}






.divider {
    background-color: #333; /* Çizginin rengi */
    width: 5px; /* Çizginin genişliği */
    height: auto; /* Çizginin yüksekliği, ebeveyn div'e göre %100 olacak */
    margin: 0 15px; /* Çizginin her iki tarafında boşluk */
}





.section-header {
    /* Başlığın stilini belirleyin */
    margin-right: 20px; /* Blok ve başlık arasında boşluk */
}


/* Diğer stiller... */

.submit-button .btn-primary {
    background-color: #DAA520; /* Altın rengi */
    border: none; /* Kenarlık kaldırıldı */
    color: white; /* Beyaz metin rengi */
    padding: 10px 20px; /* Düğme içi boşluk */
    border-radius: 5px; /* Hafif yuvarlatılmış köşeler */
    font-weight: bold; /* Kalın yazı tipi */
    font-size: 16px; /* Yazı tipi boyutu */
    transition: all 0.3s ease; /* Animasyon için geçiş süresi */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
}

.submit-button .btn-primary:hover {
    background-color: #FFD700; /* Altın renginin daha açık bir tonu */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Hover durumunda gölge efekti */
}

.submit-button .btn-primary:active {
    background-color: #C5A15B; /* Altın renginin daha koyu bir tonu */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Aktif durumunda gölge efekti */
}




/* Logo ve navbar öğelerinin düzenlenmesi */
.navbar-brand {
    padding: 0; /* Marka paddingini kaldır */
    height: 50px; /* Logonun navbar içindeki yüksekliği */
    display: flex; /* Flexbox ile hizalama */
    align-items: center; /* Dikey hizada ortala */
    justify-content: center; /* Yatay hizada ortala */
}

.navbar-brand img {
    height: 100%; /* Navbar marka alanına göre img'nin yüksekliğini ayarla */
}

/* Navbar'ın kendisini düzenlemek için gereken stil */
.navbar {
    padding: 0; /* Navbar paddingini kaldır */
}

/* Navbar öğeleri ile logoyu aynı hizada tut */
.nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Eğer responsive menü butonunun pozisyonu değişirse onu da düzenleyin */
.navbar-toggle {
    margin-top: 10px;
}

/* Logoyu ekledikten sonra düğmenin doğru görünmesini sağlayın */
@media (max-width: 767px) {
    .navbar-toggle {
        margin-top: 15px; /* Mobil görünümde navbar-toggle yüksekliğini ayarla */
    }
}




#logoPartner {
    height: 50px; /* Logo yüksekliği */
    vertical-align: top; /* Diğer içeriklerle ortalanısr */
    margin-left: 0;
    margin-top: 0;
    top: 0; /* Sayfanın en üstünden başla */
    padding-top: 0;
    /* ya da istediğiniz sabit bir boyut */
    /* Yüksekliği orijinal en-boy oranını koruyacak şekilde ayarla */
}


.navbar-profile-picture {
    border-radius: 50%; /* Profil resmini yuvarlak yapar */
    height: 32px; /* Profil resmi yüksekliğini ayarlayın */
    width: 32px; /* Profil resmi genişliğini ayarlayın */
    object-fit: cover; /* Resmi çerçevenin içine sığdırır */
    border: 2px solid #ffffff; /* Profil resminin etrafına beyaz bir çerçeve ekler */
}

.navbar-right .dropdown-toggle {
    padding: 10px; /* Dropdown butonunun iç boşluğunu ayarlayın */
    display: flex; /* Profil resmi ve metin içeriğini yan yana sıralar */
    align-items: center; /* İçerikleri dikey olarak ortalar */
}

.navbar-right .dropdown-toggle .caret {
    margin-left: 5px; /* Şirket adı ve açılır ok arasında boşluk bırakır */
}

.navbar-profile-image {
    width: 32px; /* veya ihtiyacınıza göre ayarlayın */
    height: 32px;
    border-radius: 50%;
}

/* ==================== DARK MODE OVERRIDE ==================== */
.input-block,
.ceyrek-input-block,
.yarim-input-block,
.tam-input-block,
.kafali-input-block,
.atalira-input-block,
.bilezik22ayar-input-block,
.birgram-input-block,
.yarimgram-input-block,
.ceyrekgram-input-block,
.ondabirgram-input-block,
.sifinoktabesgram-input-block,
.yirmidortayargram-input-block {
    background-color: #242424 !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

.section-title {
    background-color: #1a1a1a !important;
    color: #FFD700 !important;
    border-bottom-color: #FFD700 !important;
}

.section-header h10 {
    color: #FFD700 !important;
}

.control-label {
    color: #ccc !important;
}

.form-control {
    background-color: #333 !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

.form-control:focus {
    background-color: #3a3a3a !important;
    color: #fff !important;
    border-color: #FFD700 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25) !important;
}

.divider {
    background-color: #FFD700 !important;
}

.toggle-btn {
    background-color: #333 !important;
    color: #FFD700 !important;
    border-color: #555 !important;
}