* { box-sizing: border-box; }
body {
    background-color: #2b2b2b; color: #dfdfdf; font-family: 'Segoe UI', Tahoma, sans-serif;
    margin: 0; padding: 0; display: flex; justify-content: center; align-items: center;
    height: 100vh; overflow: hidden; user-select: none;
}
.hidden { display: none !important; }

#main-menu { text-align: center; }
h1 { font-size: 2.5rem; color: #fff; margin-bottom: 30px; }
.menu-buttons { display: flex; gap: 20px; justify-content: center; }
button { cursor: pointer; font-family: inherit; font-size: 14px; border: none; }
.btn-primary, .btn-secondary { padding: 15px 30px; border: 2px solid #000; border-radius: 4px; font-weight: bold; box-shadow: 2px 2px 0px #000; transition: 0.2s;}
.btn-primary { background-color: #639bff; color: #fff; }
.btn-primary:hover { background-color: #4a84ed; transform: translateY(-2px); box-shadow: 2px 4px 0px #000;}
.btn-secondary { background-color: #444; color: #aaa; }

/* MODAL (PENCERE) SİSTEMLERİ */
#setup-modal, #settings-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 100; }
.modal-window { background-color: #343434; border: 1px solid #111; box-shadow: 4px 4px 0px rgba(0,0,0,0.5); width: 380px; border-radius: 4px; overflow: hidden; }
.modal-header { background-color: #222; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #111; font-weight: bold; font-size: 14px; }
.btn-close { background: none; color: #dfdfdf; font-weight: bold; }
.btn-close:hover { color: #ff5555; }
.modal-body { padding: 20px; }
.setup-section { background-color: #2c2c2c; border: 1px solid #1a1a1a; padding: 15px; border-radius: 4px; margin-bottom: 15px; }
.section-title { display: block; color: #a0a0a0; font-size: 12px; margin-bottom: 15px; text-transform: uppercase; font-weight: bold; }
.input-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.input-row label { width: 80px; font-size: 14px; }
.input-row input { background-color: #1e1e1e; border: 1px solid #111; color: #fff; padding: 5px; width: 60px; text-align: center; font-family: inherit; }
.btn-action { width: 100%; margin-top: 10px; padding: 10px; background-color: #639bff; color: white; border: 1px solid #000; font-weight: bold; }
.btn-action:hover { filter: brightness(1.2); } /* Yeni butonlar için genel parlaklık efekti */

/* Chrome, Safari, Edge, Opera için input oklarnı gizleme */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

#workspace { display: flex; width: 100vw; height: 100vh; background-color: #1e1e1e; }
.sidebar { width: 150px; background-color: #252525; border-right: 1px solid #111; display: flex; flex-direction: column; z-index: 10; }
.right-sidebar { border-right: none; border-left: 1px solid #111; }
.sidebar-header { background-color: #1a1a1a; padding: 10px; text-align: center; font-size: 12px; font-weight: bold; border-bottom: 1px solid #111; color: #aaa; }

.canvas-area { flex-grow: 1; display: flex; justify-content: center; align-items: center; background-color: #181818; overflow: hidden; position: relative; }
.canvas-wrapper { position: relative; box-shadow: 0 0 20px rgba(0,0,0,0.8); background-color: #fff; transform-origin: center center; }
#pixelCanvas { display: block; image-rendering: pixelated; cursor: crosshair; }

#gridOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 1px, transparent 1px); }

.tool-list { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tool-btn { padding: 10px; background-color: #333; color: #dfdfdf; border: 1px solid #222; border-radius: 4px; text-align: left; transition: 0.2s; }
.tool-btn:hover { background-color: #444; }
.tool-btn.active { background-color: #639bff; color: white; border-color: #000; font-weight: bold; }

.color-picker-container { padding: 15px; border-bottom: 1px solid #111; }
#mainColorPicker { width: 100%; height: 40px; border: none; cursor: pointer; background: transparent; }
.palette-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 15px; overflow-y: auto;}
.color-swatch { width: 100%; aspect-ratio: 1/1; border-radius: 4px; cursor: pointer; border: 2px solid transparent; transition: 0.1s; }
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.selected { border-color: white; box-shadow: 0 0 8px rgba(255,255,255,0.5); }

@media (max-width: 768px) {
    #workspace { flex-direction: column; }
    .sidebar { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; padding: 5px 10px; }
    .sidebar-header, .palette-grid { display: none; } 
    .tool-list { flex-direction: row; width: 100%; justify-content: space-around; gap: 5px; padding: 5px 0; }
    .tool-btn { padding: 8px; font-size: 12px; flex-grow: 1; text-align: center; }
    .color-picker-container { margin: 0; padding: 0; }
    #mainColorPicker { height: 35px; width: 60px; border-radius: 4px;}
}