/* ======================================
   GLOBAL LAYOUT (Genel Düzen)
====================================== */

body {
    font-family: Arial, sans-serif;     /* Varsayılan yazı tipi */
    background-color: #f4f6f8;          /* Sayfa arka plan rengi (açık gri) */
    height: 100vh;                      /* Sayfa yüksekliğini tam ekran yap */
}

/* ======================================
   HEADER (Üst Başlık Çubuğu)
====================================== */

.header {
    height: 60px;                       /* Header yüksekliği */
    background-color: #2c3e50;          /* Koyu mavi-gri arka plan */
    color: white;                       /* Yazı rengi beyaz */
    display: flex;                      /* Esnek kutu düzeni */
    align-items: center;                /* Dikeyde ortala */
    padding-left: 20px;                 /* Sol taraftan iç boşluk */
}

/* ======================================
   MAIN LAYOUT (Ana İçerik Düzeni)
====================================== */

.main-container {
    display: grid;                      /* Grid düzeni kullan */
    grid-template-columns: 260px 1fr 300px;   /* Sol sidebar 260px, orta alan esnek, sağ panel 300px */
    height: calc(100vh - 60px);         /* Header hariç kalan tüm yüksekliği kapla */
}

/* ======================================
   SIDEBAR (Sol Menü Paneli)
====================================== */

.sidebar {
    background: white;                  /* Beyaz arka plan */
    padding: 20px;                      /* İç boşluk */
    border-right: 1px solid #ddd;       /* Sağ tarafa ince gri çizgi */
}

.sidebar h3 {
    margin-top: 15px;                   /* Başlıkların üst boşluğu */
}

/* ======================================
   GRAPH AREA (Grafik Alanı)
====================================== */

.graph-area {
    position: relative; /* İçerisindeki elemanları konumlandırmak için referans nokta */
}

/* ======================================
   GRAPH CANVAS (Grafik Çizim Alanı)
====================================== */

#graphCanvas {
    width: 100%;                        /* Genişliği %100 doldur */
    height: 600px;                      /* Sabit yükseklik */
    background: white;                  /* Beyaz arka plan */
}

/* ======================================
   LOG PANEL (Log / Kayıt Paneli)
====================================== */

.log-panel {
    background: white;                  /* Beyaz arka plan */
    border-left: 1px solid #ddd;        /* Sol tarafa ince gri çizgi */
    padding: 20px;                      /* İç boşluk */
}

#logList {
    margin-top: 10px;                   /* Log listesinin üst boşluğu */
    list-style: none;                   /* Madde işaretlerini kaldır */
}

#logList li {
    margin-bottom: 5px;                 /* Her log satırı arasında boşluk */
}

/* Sidebar ve Log paneli için ortak stil */
.sidebar,
.log-panel {
    overflow-y: auto;                   /* İçerik fazla olursa dikey scroll çubuğu göster */
}

/* ======================================
   TOP TOOLBAR (Üst Araç Çubuğu)
====================================== */

.top-toolbar {
    display: flex;                      /* Yatay düzende elemanları yan yana diz */
    align-items: center;                /* Dikeyde ortala */
    gap: 12px;                          /* Elemanlar arası boşluk */
    padding: 10px 15px;                 /* İç boşluk */
    background: #f4f6f8;                /* Açık gri arka plan */
    border-bottom: 1px solid #ddd;      /* Alt tarafa ince gri çizgi */
}

.toolbar-btn {
    background: #3a86c4;                /* Buton arka plan rengi (mavi) */
    color: white;                       /* Beyaz yazı rengi */
    border: none;                       /* Kenarlık kaldırma */
    border-radius: 6px;                 /* Köşeleri yuvarla */
    padding: 6px 14px;                  /* İç boşluk */
    font-size: 14px;                    /* Yazı boyutu */
    width: auto;                        /* Otomatik genişlik (full width olmasın) */
    min-width: 90px;                    /* Buton çok küçülmesin */
    cursor: pointer;                    /* Fare imleci el şeklinde olsun */
}

.toolbar-btn:hover {
    background: #2980b9;                /* Üzerine gelince daha koyu mavi olsun */
}

/* ======================================
   SPEED CONTROL (Hız Kontrol Alanı)
====================================== */

.speed-control {
    display: flex;                      /* Elemanları yatay diz */
    align-items: center;                /* Dikeyde ortala */
    gap: 8px;                           /* Elemanlar arası boşluk */
    margin-left: auto;                  /* Sağa yasla */
    width: 220px;                       /* Sabit genişlik */
    flex-shrink: 0;                     /* Küçülmeyi engelle (daralma olmasın) */
}