:root { --orange: #ff8c00; --dark-transparent: rgba(50, 50, 50, 0.85); }
body { background-color: #f1f3f5; font-family: 'Segoe UI', sans-serif; }

/* Navbar */
.navbar { border-bottom: 2px solid var(--orange); }
.nav-link:hover { color: var(--orange) !important; }

/* Stepper */
.stepper-container { background: #fff; }
.step-circle { width: 45px; height: 45px; background: white; border: 2px solid #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; color: #ccc; }
.step-item.active .step-circle { background: var(--orange); border-color: var(--orange); color: white; }
.step-line { flex: 1; height: 1px; border-top: 2px dashed #ddd; margin: 0 10px 35px; }

/* 3D Viewer & Bildirim */
#viewer-container { position: relative; height: 500px; background: #dcdcdc; border-radius: 12px; overflow: hidden; }
#canvas-target { width: 100%; height: 100%; }
#loader-overlay { position: absolute; 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: 2000; backdrop-filter: blur(3px); }

/* Örnek Modeller */
.sample-box { transition: all 0.2s ease; background: #f8f9fa; cursor: pointer; border: 1px solid #eee !important; max-width: 100px; margin: 0 auto; }
.sample-img { width: 100%; height: 60px; object-fit: cover; }
.sample-text { font-size: 10px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sample-box:hover { border-color: var(--orange) !important; transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* Paneller */
.overlay-panel { position: absolute; top: 15px; background: var(--dark-transparent); color: white; padding: 12px; border-radius: 8px; z-index: 1000; font-size: 13px; }
.overlay-left { left: 15px; width: 165px; }
.overlay-right { right: 15px; min-width: 180px; }

.color-dot { width: 28px; height: 28px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: 0.2s ease; }
.color-dot.active { border-color: var(--orange); transform: scale(1.15); }

.btn-orange { background: var(--orange); color: white; border: none; }
.btn-orange:hover { background: #e67e00; color: white; }
.text-orange { color: var(--orange) !important; }