/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
    .dashboard {
        min-height: calc(100vh - 60px - 30px); /* Terminal ve footer yüksekliklerini yarıya indir */
        padding-bottom: 90px; /* Yeni terminal ve footer yüksekliğine göre alttan boşluk */
    }

    .box {
        width: 100%;
        min-height: calc((100vh - 60px - 30px) / 6); /* Yeni yükseklik hesaplamasına göre güncelle */
    }

    /* Diğer .box > div stilleri sabit kalacak */

    .terminal {
        position: static; /* Sabit konumlandırmayı kaldır */
        height: 45px; /* Mobil cihazlarda terminal yüksekliği */
        padding: 10px 20px; /* Yeterli iç boşluk */
    }

    /* .footer-container stilleri sabit kalacak */

    .zaman {
        font-size: 0.7em; /* Mobil için font boyutunu küçült */
    }
}


html, body {
    height: 100%;
    font-family: Arial, sans-serif;
    background-color: lightgray;
}

.dashboard {
    display: flex;
    flex-wrap: wrap;
    height: calc(100vh - 110px - 30px); /* Footer ve terminal yüksekliklerini çıkarıyoruz */
    align-content: flex-start; /* Kutuların üst kenara yapışmasını sağlar */
}

.box {
    width: 50%; /* Her kutu genişliği ekran genişliğinin yarısı olacak */
    height: calc((100vh - 110px - 30px) / 3); /* Her kutu yüksekliği ekranın kullanılabilir yüksekliğinin üçte biri olacak */
    display: flex; /* İçindeki div'leri yan yana sıralamak için flex kullanıyoruz */
    flex-wrap: wrap; /* İçerik çok fazla olduğunda alt satıra geçmesini sağlar */
}

.box > div {
    width: 50%; /* Her iç div genişliği kutu genişliğinin yarısı olacak */
    height: auto;
    padding: 10px;
    box-sizing: border-box; /* Padding, genişlik ve yükseklik hesaplamasına dahil edilecek */
}


/* Metin hizalaması ve aralıkları için stiller */
p, ul, li {
    text-align: left;
    margin: 0 0 10px; /* Alt elemanlara boşluk ekler */
}

ul {
    list-style-type: none; /* Liste işaretlerini kaldırır */
    padding-left: 0; /* Varsayılan padding'i sıfırlar */
}

li {
    margin-bottom: 10px; /* List item'lara alttan boşluk ekler */
}

.bold {
    font-weight: bold; /* Belirtilen metni kalın yapar */
}

/* Renkli div'ler için stiller */
.camera_zone1 { background-color: #ADD8E6; }
.camera_zone2 { background-color: #FFB6C1; }
.varliklar { background-color: #90EE90; }
.borclar { background-color: #FFD700; }
.imalat { background-color: #87CEFA; }
.satin_alma { background-color: #FFA07A; }
.sosyal { background-color: #6495ED; }
.konvansiyonel { background-color: #F08080; }
.kasa_gelen { background-color: #a2cfa5; }
.kasa_giden { background-color: #f4978e; }
.gelen_siparis_kargo { background-color: #9ad0f5; }
.giden_siparis_kargo { background-color: #f4d19a; }

/* Sabit konumlu elementler için stiller */
.terminal, .footer-container {
    position: fixed;
    left: 0;
    width: 100%;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    color: white;
    font-size: 20px;
    font-family: monospace;
}

.terminal {
    bottom: 30px; /* Terminal için alttan boşluk */
    height: 110px; /* Terminal yüksekliği */
}

.footer-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px; /* Footer height */
    background-color: #b2b2b2; /* Birkaç ton açık gri */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.logo {
    max-height: 100%; /* Logo, kapsayıcısından daha büyük olamaz */
}

.zaman {
    font-size: 0.7em; /* Ya da ihtiyaca göre başka bir değer */
    /* Diğer stiller aynı kalacak */
}