/* ========================================= */
/* 1. GENEL SAYFA VE SIDEBAR AYARLARI        */
/* ========================================= */
html.preload * { transition: none !important; }
body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; height: 100vh; overflow: hidden; transition: background-color 0.4s ease, color 0.4s ease; background-color: #f4f7f6; }

.sidebar { width: 260px; background-color: #2c3e50; color: white; display: flex; flex-direction: column; box-shadow: 2px 0 5px rgba(0,0,0,0.1); z-index: 10; flex-shrink: 0;}
.sidebar h2 { text-align: center; padding: 20px 0; margin: 0; background-color: #1a252f; font-size: 22px; }
.sidebar a { padding: 15px 25px; text-decoration: none; color: #bdc3c7; border-bottom: 1px solid #34495e; transition: all 0.3s ease; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.sidebar a:hover { background-color: #34495e; color: #ffffff; padding-left: 35px; }
.sidebar-bottom { margin-top: auto; padding: 20px; border-top: 1px solid #34495e; }
.theme-toggle-sidebar { width: 100%; background-color: #34495e; color: white; border: none; padding: 12px; border-radius: 8px; cursor: pointer; font-size: 16px; transition: 0.3s; display: flex; justify-content: center; gap: 8px; }
.theme-toggle-sidebar:hover { background-color: #3498db; }

.main-content { flex: 1; padding: 40px; overflow-y: auto; position: relative;}
h1 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; display: inline-block; margin-top: 0; }
p { color: #2c3e50; line-height: 1.6; margin-bottom: 30px;}

/* ========================================= */
/* 2. GEÇMİŞ PANELİ & MODAL                  */
/* ========================================= */
.history-toggle-btn { position: fixed; top: 30px; right: 30px; background-color: #f39c12; color: white; border: none; padding: 12px 20px; border-radius: 30px; font-size: 16px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 100; transition: 0.3s; display: flex; align-items: center; gap: 8px;}
.history-toggle-btn:hover { background-color: #e67e22; transform: scale(1.05); }
.history-toggle-btn.hidden { opacity: 0; pointer-events: none; transform: scale(0.8); }

.history-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 98; opacity: 0; visibility: hidden; transition: 0.3s; backdrop-filter: blur(2px); }
.history-overlay.active { opacity: 1; visibility: visible; }

.history-panel { position: fixed; top: 0; right: -350px; width: 300px; height: 100vh; background-color: #ffffff; box-shadow: -5px 0 15px rgba(0,0,0,0.1); z-index: 99; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; }
.history-panel.open { right: 0; }

.history-header { padding: 20px; background-color: #f39c12; color: white; display: flex; justify-content: space-between; align-items: center; }
.history-header h3 { margin: 0; font-size: 18px; }
.close-history { background: none; border: none; color: white; font-size: 24px; cursor: pointer; padding: 0; }

.history-list { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 10px; }
.history-item { background-color: #f8f9fa; border: 1px solid #e9ecef; border-left: 4px solid #3498db; padding: 15px; border-radius: 6px; cursor: pointer; transition: 0.2s; }
.history-item:hover { background-color: #e8f4f8; transform: translateX(-5px); }
.hist-date { font-size: 11px; color: #95a5a6; margin-bottom: 5px; }
.hist-equation { font-size: 14px; font-weight: bold; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hist-roots { font-size: 13px; color: #7f8c8d; margin-top: 5px; }

.clear-history-btn { margin: 15px; background-color: #e74c3c; color: white; border: none; padding: 12px; border-radius: 8px; cursor: pointer; font-weight: bold; transition: 0.3s;}
.clear-history-btn:hover { background-color: #c0392b; }

.custom-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: 0.3s; backdrop-filter: blur(4px); }
.custom-modal-overlay.active { opacity: 1; visibility: visible; }
.custom-modal { background: white; padding: 30px; border-radius: 12px; width: 90%; max-width: 400px; text-align: center; box-shadow: 0 15px 30px rgba(0,0,0,0.2); transform: translateY(-30px); transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.custom-modal-overlay.active .custom-modal { transform: translateY(0); }
.modal-buttons { display: flex; gap: 15px; justify-content: center; margin-top: 20px;}
.modal-btn { flex: 1; padding: 12px; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.btn-cancel { background: #ecf0f1; color: #7f8c8d; }
.btn-cancel:hover { background: #bdc3c7; color: #2c3e50; }
.btn-delete { background: #e74c3c; color: white; }

/* ========================================= */
/* 3. ORTAK KARANLIK TEMA KODLARI            */
/* ========================================= */
html.dark-mode body { background-color: #121212; }
html.dark-mode h1, html.dark-mode p { color: #f1f1f1; }
html.dark-mode .sidebar { background-color: #0f171e; }
html.dark-mode .sidebar h2 { background-color: #000000; }
html.dark-mode .sidebar a { border-bottom-color: #1f2a36; }
html.dark-mode .sidebar a:hover { background-color: #1f2a36; }
html.dark-mode .sidebar-bottom { border-top-color: #1f2a36; }
html.dark-mode .theme-toggle-sidebar { background-color: #1f2a36; }

html.dark-mode .history-panel { background-color: #1a1a1a; border-left: 1px solid #333; }
html.dark-mode .history-header { background-color: #d35400; }
html.dark-mode .history-item { background-color: #242424; border-color: #333; }
html.dark-mode .history-item:hover { background-color: #2c3e50; }
html.dark-mode .hist-equation { color: #f1f1f1; }
html.dark-mode .custom-modal { background: #1e1e1e; border: 1px solid #333; }
html.dark-mode .modal-title { color: #f1f1f1; }
html.dark-mode .modal-text { color: #aaaaaa; }
html.dark-mode .btn-cancel { background: #2c3e50; color: #bdc3c7; }

/* ========================================= */
/* 4. ORTAK MOBİL UYUMLULUK (@media)         */
/* ========================================= */
@media (max-width: 800px) {
    body { flex-direction: column; }
    .sidebar { width: 100%; height: auto; flex-direction: row; overflow-x: auto; white-space: nowrap; padding-bottom: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 10; }
    .sidebar h2 { display: none; }
    .sidebar a { padding: 15px 20px; border-bottom: none; border-right: 1px solid #34495e; font-size: 15px; }
    .sidebar-bottom { margin-top: 0; padding: 0; border-top: none; display: flex; }
    .theme-toggle-sidebar { border-radius: 0; height: 100%; padding: 0 20px; white-space: nowrap; }
    .main-content { padding: 20px; }
    
    /* Gerekli Olabilecek Alt Düzenlemeler */
    .input-group { flex-direction: column; gap: 10px; }
    .button-group { grid-template-columns: 1fr; }
    .reset-btn { grid-column: span 1; }
    .equation-group { flex-direction: column; gap: 10px; }
    select { width: 100%; }
    .history-toggle-btn { top: 80px; right: 15px; padding: 10px 15px; font-size: 14px; }
}

/* AKTİF SEÇİLİ MENÜ GÖRÜNÜMÜ */
.sidebar a.active {
    background-color: #34495e;
    color: #ffffff;
    padding-left: 35px;
    border-left: 4px solid #3498db; /* Sol tarafa şık bir mavi çizgi ekler */
}

/* Karanlık Modda Aktif Menü Rengi */
html.dark-mode .sidebar a.active {
    background-color: #2980b9; 
    border-left-color: #e67e22; 
}