/* ---------- RESET ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Courier New', monospace;
    background: #0b0d10;
    color: #e0e4ec;
    height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background 0.3s, color 0.3s;
}

/* ---------- TEMALAR ---------- */
body.theme-dark { background: #0b0d10; color: #e0e4ec; }
body.theme-dark header,
body.theme-dark .file-tree,
body.theme-dark .editor-wrapper,
body.theme-dark .bottom-panels,
body.theme-dark .preview-panel,
body.theme-dark .action-bar {
    background: rgba(11,13,16,0.8);
    border-color: rgba(255,255,255,0.06);
}
body.theme-dark .tab,
body.theme-dark .panel-tab,
body.theme-dark .file-tree-item { color: #8892a0; }
body.theme-dark .tab.active,
body.theme-dark .panel-tab.active,
body.theme-dark .file-tree-item.active {
    background: rgba(108,140,255,0.15);
    color: #fff;
    border-bottom-color: #6c8cff;
}
body.theme-dark textarea { color: #e0e4ec; }
body.theme-dark .line-numbers { color: #4a5260; }
body.theme-dark .console-item.log { color: #b0b8c4; }
body.theme-dark .network-item .url { color: #b0b8c4; }

body.theme-light { background: #f0f2f5; color: #1e2229; }
body.theme-light header,
body.theme-light .file-tree,
body.theme-light .editor-wrapper,
body.theme-light .bottom-panels,
body.theme-light .preview-panel,
body.theme-light .action-bar {
    background: rgba(255,255,255,0.8);
    border-color: rgba(0,0,0,0.1);
}
body.theme-light .tab,
body.theme-light .panel-tab,
body.theme-light .file-tree-item { color: #1e2229; }
body.theme-light .tab.active,
body.theme-light .panel-tab.active,
body.theme-light .file-tree-item.active {
    background: #fff;
    color: #0b0d10;
    border-bottom-color: #0b0d10;
}
body.theme-light textarea { color: #1e2229; }
body.theme-light .line-numbers { color: #7a7f89; }
body.theme-light .console-item.log { color: #1e2229; }
body.theme-light .console-item.error { color: #c62828; }
body.theme-light .network-item .url { color: #1e2229; }

body.theme-dracula { background: #282a36; color: #f8f8f2; }
body.theme-dracula header,
body.theme-dracula .file-tree,
body.theme-dracula .editor-wrapper,
body.theme-dracula .bottom-panels,
body.theme-dracula .preview-panel,
body.theme-dracula .action-bar {
    background: rgba(40,42,54,0.9);
    border-color: rgba(255,255,255,0.05);
}
body.theme-dracula .tab,
body.theme-dracula .panel-tab,
body.theme-dracula .file-tree-item { color: #6272a4; }
body.theme-dracula .tab.active,
body.theme-dracula .panel-tab.active,
body.theme-dracula .file-tree-item.active {
    background: rgba(189,147,249,0.2);
    color: #f8f8f2;
    border-bottom-color: #bd93f9;
}
body.theme-dracula textarea { color: #f8f8f2; }
body.theme-dracula .line-numbers { color: #6272a4; }
body.theme-dracula .console-item.log { color: #f8f8f2; }
body.theme-dracula .console-item.error { color: #ff5555; }
body.theme-dracula .network-item .url { color: #8be9fd; }

body.theme-monokai { background: #272822; color: #f8f8f2; }
body.theme-monokai header,
body.theme-monokai .file-tree,
body.theme-monokai .editor-wrapper,
body.theme-monokai .bottom-panels,
body.theme-monokai .preview-panel,
body.theme-monokai .action-bar {
    background: rgba(39,40,34,0.9);
    border-color: rgba(255,255,255,0.05);
}
body.theme-monokai .tab,
body.theme-monokai .panel-tab,
body.theme-monokai .file-tree-item { color: #75715e; }
body.theme-monokai .tab.active,
body.theme-monokai .panel-tab.active,
body.theme-monokai .file-tree-item.active {
    background: rgba(166,226,46,0.15);
    color: #f8f8f2;
    border-bottom-color: #a6e22e;
}
body.theme-monokai textarea { color: #f8f8f2; }
body.theme-monokai .line-numbers { color: #75715e; }
body.theme-monokai .console-item.log { color: #f8f8f2; }
body.theme-monokai .console-item.error { color: #f92672; }
body.theme-monokai .network-item .url { color: #66d9ef; }

body.theme-solarized { background: #002b36; color: #839496; }
body.theme-solarized header,
body.theme-solarized .file-tree,
body.theme-solarized .editor-wrapper,
body.theme-solarized .bottom-panels,
body.theme-solarized .preview-panel,
body.theme-solarized .action-bar {
    background: rgba(0,43,54,0.9);
    border-color: rgba(255,255,255,0.05);
}
body.theme-solarized .tab,
body.theme-solarized .panel-tab,
body.theme-solarized .file-tree-item { color: #586e75; }
body.theme-solarized .tab.active,
body.theme-solarized .panel-tab.active,
body.theme-solarized .file-tree-item.active {
    background: rgba(38,139,210,0.2);
    color: #93a1a1;
    border-bottom-color: #268bd2;
}
body.theme-solarized textarea { color: #839496; }
body.theme-solarized .line-numbers { color: #586e75; }
body.theme-solarized .console-item.log { color: #839496; }
body.theme-solarized .console-item.error { color: #dc322f; }
body.theme-solarized .network-item .url { color: #268bd2; }

/* ---------- GENEL ---------- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    height: 44px;
}
.logo { font-weight: bold; font-size: 0.9rem; opacity: 0.9; }
.header-actions { display: flex; gap: 8px; align-items: center; }
.header-actions button, .header-actions select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: inherit;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.header-actions button:hover { background: rgba(255,255,255,0.12); }
.header-actions select { background: rgba(255,255,255,0.05); }
#autoSaveStatus { font-size: 0.65rem; opacity: 0.7; }

/* ---------- MAIN ---------- */
main { flex: 1; display: flex; overflow: hidden; }

/* SOL: Dosya Ağacı + Editör */
.editor-panel {
    flex: 1;
    display: flex;
    min-width: 300px;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.file-tree {
    width: 180px;
    min-width: 140px;
    max-width: 220px;
    border-right: 1px solid rgba(255,255,255,0.04);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}
.file-tree-header {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 0.7rem;
    color: #8892a0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}
.file-tree-header button {
    background: rgba(255,255,255,0.06);
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 1rem;
}
.file-tree-header button:hover { background: rgba(255,255,255,0.12); }
.file-tree-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.file-tree-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px;
    font-size: 0.75rem;
    cursor: pointer;
    border-left: 2px solid transparent;
}
.file-tree-item:hover { background: rgba(255,255,255,0.04); }
.file-tree-item.active { border-left-color: #6c8cff; background: rgba(108,140,255,0.08); }
.file-tree-item .file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-tree-item .file-delete {
    opacity: 0; transition: opacity 0.15s;
    background: transparent; border: none;
    color: #ff7a7a; cursor: pointer; padding: 0 4px; font-size: 0.7rem;
}
.file-tree-item:hover .file-delete { opacity: 1; }
.file-tree-item .file-delete:hover { background: rgba(255,0,0,0.1); border-radius: 4px; }

.editor-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tabs {
    display: flex;
    gap: 2px;
    padding: 4px 12px 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
    overflow-x: auto;
}
.tab {
    background: transparent; border: none;
    padding: 4px 14px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    white-space: nowrap;
}
.tab:hover { background: rgba(255,255,255,0.03); }
.tab.active { border-bottom-color: #6c8cff; background: rgba(108,140,255,0.08); }

.editor-container { flex: 1; position: relative; overflow: hidden; }
.editor-wrapper {
    display: flex;
    height: 100%;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 0 0 8px 8px;
    margin: 0 8px 8px 8px;
    overflow: hidden;
}
.line-numbers {
    padding: 12px 8px 12px 12px;
    font-size: 0.7rem;
    line-height: 18px;
    text-align: right;
    user-select: none;
    background: rgba(0,0,0,0.2);
    min-width: 35px;
    overflow: hidden;
    height: 100%;
    white-space: pre;
    flex-shrink: 0;
    scrollbar-width: none;
}
.line-numbers::-webkit-scrollbar { display: none; }
textarea {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    padding: 12px 14px 12px 12px;
    font-size: 0.7rem;
    line-height: 18px;
    font-family: inherit;
    tab-size: 2;
    white-space: pre;
    overflow: auto;
}
textarea::selection { background: rgba(108,140,255,0.3); }

/* SAĞ: Preview */
.preview-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 300px;
    border-left: 1px solid rgba(255,255,255,0.04);
}
.preview-toolbar {
    display: flex;
    justify-content: space-between;
    padding: 3px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.7rem;
    color: #8892a0;
}
.preview-actions { display: flex; gap: 4px; align-items: center; }
.preview-actions button {
    background: transparent; border: none;
    color: #8892a0; cursor: pointer;
    padding: 2px 8px; border-radius: 4px;
    font-size: 0.7rem;
}
.preview-actions button:hover { background: rgba(255,255,255,0.05); color: #e0e4ec; }
#pickerCopyBtn {
    background: rgba(108,140,255,0.15);
    color: #6c8cff;
    border-radius: 4px;
    padding: 2px 10px;
    display: none;
}
#pickerCopyBtn:hover { background: rgba(108,140,255,0.25); }

.preview-container {
    flex: 1;
    background: #ffffff;
    overflow: hidden;
    margin: 4px 8px 0 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
}
#previewFrame {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
    transition: width 0.2s ease;
}
#previewFrame.desktop { width: 100%; }
#previewFrame.tablet { width: 768px; }
#previewFrame.mobile { width: 375px; }

/* ALT PANELLER */
.bottom-panels {
    flex-shrink: 0;
    max-height: 160px;
    border-top: 1px solid rgba(255,255,255,0.04);
    margin: 4px 8px 8px 8px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.panel-tabs {
    display: flex;
    gap: 2px;
    padding: 3px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}
.panel-tab {
    background: transparent; border: none;
    color: #8892a0;
    padding: 3px 12px;
    font-size: 0.6rem;
    cursor: pointer;
    font-family: inherit;
    border-radius: 4px 4px 0 0;
}
.panel-tab.active { background: rgba(108,140,255,0.15); color: #ffffff; }
.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 4px 10px;
    font-size: 0.6rem;
    line-height: 1.3;
    max-height: 120px;
}

/* Console */
.console-item { padding: 1px 0; border-bottom: 1px solid rgba(255,255,255,0.03); white-space: pre-wrap; }
.console-item.log { color: #b0b8c4; }
.console-item.error { color: #ff7a7a; }
.console-item.warn { color: #ffd54f; }

/* Network */
.network-item { display: flex; gap: 8px; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 0.6rem; }
.network-item .method { font-weight: bold; min-width: 40px; }
.network-item .url { flex: 1; color: #b0b8c4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.network-item .status { min-width: 30px; text-align: center; }
.network-item .status.success { color: #4caf50; }
.network-item .status.error { color: #ff7a7a; }
.network-item .duration, .network-item .size { min-width: 40px; text-align: right; color: #8892a0; }

/* Performance */
.performance-item { display: flex; gap: 12px; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.performance-item .label { min-width: 100px; color: #8892a0; }
.performance-item .value { color: #b0b8c4; }

/* Picker */
.picker-selector { color: #6c8cff; font-weight: bold; padding: 2px 0; font-size: 0.7rem; word-break: break-all; }
.picker-details { color: #b0b8c4; font-size: 0.6rem; padding: 2px 0; }
.picker-info { color: #8892a0; padding: 4px 0; }

/* ACTION BAR */
.action-bar {
    display: flex;
    justify-content: space-between;
    padding: 4px 16px;
    border-top: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 4px;
}
.action-bar button {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #c8ced8;
    padding: 3px 12px;
    border-radius: 4px;
    font-size: 0.65rem;
    cursor: pointer;
    font-family: inherit;
}
.action-bar button:hover { background: rgba(255,255,255,0.12); }
#statusBar { font-size: 0.65rem; opacity: 0.6; }

/* SCROLLBAR */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* RESPONSIVE */
@media (max-width: 860px) {
    main { flex-direction: column; }
    .editor-panel { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .preview-panel { border-left: none; }
    .file-tree { width: 140px; min-width: 120px; }
}
@media (max-width: 600px) {
    header { flex-wrap: wrap; height: auto; padding: 4px 10px; }
    .header-actions { flex-wrap: wrap; gap: 4px; }
    .header-actions button, .header-actions select { font-size: 0.65rem; padding: 2px 8px; }
    .file-tree { display: none; }
    .editor-wrapper { margin: 0 4px 4px 4px; }
    .line-numbers { display: none; }
    textarea { padding: 8px; font-size: 0.6rem; line-height: 16px; }
    .preview-container { margin: 4px 4px 0 4px; min-height: 120px; }
    .bottom-panels { margin: 4px 4px 4px 4px; max-height: 120px; }
    .panel-content { max-height: 100px; }
}

/* PREVIEW FULLSCREEN */
body.preview-fullscreen header,
body.preview-fullscreen .console-panel,
body.preview-fullscreen .bottom-panels,
body.preview-fullscreen .action-bar,
body.preview-fullscreen .editor-panel {
    display: none !important;
}
body.preview-fullscreen main { flex-direction: column !important; }
body.preview-fullscreen .preview-panel { flex: 1 !important; border-left: none !important; }
body.preview-fullscreen .preview-container { margin: 0 !important; border-radius: 0 !important; flex: 1 1 100% !important; min-height: 100vh !important; }
body.preview-fullscreen #previewFrame { width: 100% !important; height: 100vh !important; border-radius: 0 !important; }