/* Ekran 04 — Nesne detayı (tip bazlı bölümler) */
.drawer__stack { display: flex; flex-direction: column; gap: var(--sp-6); }
.kv-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.kv { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--size-48); padding: 0 var(--sp-4); border-bottom: 1px solid var(--border); font-size: var(--text-body); }
.kv:last-child { border-bottom: 0; }
.kv__label { color: var(--text-2); display: flex; align-items: center; gap: var(--sp-2); }
.kv__label .icon { width: var(--size-16); height: var(--size-16); color: var(--text-3); }
.kv__value { font-weight: var(--w-medium); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: var(--sp-2); }
.kv--locked .kv__label, .kv--locked .kv__value { color: var(--text-3); font-weight: var(--w-regular); }
.kv__note { font-size: var(--text-xs); color: var(--text-3); }

/* Röle kanalları */
.channel { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--size-56); padding: 0 var(--sp-4); border-bottom: 1px solid var(--border); }
.channel:last-child { border-bottom: 0; }
.channel__idx { width: var(--size-28); height: var(--size-28); display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--text-xs); font-weight: var(--w-semibold); color: var(--text-2); font-variant-numeric: tabular-nums; }
.channel.is-on .channel__idx { background: var(--primary-soft); border-color: transparent; color: var(--primary-soft-text); }
.channel__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.channel__name { font-size: var(--text-body); font-weight: var(--w-medium); }
.channel__w { font-size: var(--text-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.channel__name.is-spare { color: var(--text-3); font-weight: var(--w-regular); }
.channel-actions { display: flex; gap: var(--sp-2); }
.channel-actions .btn { flex: 1; }

/* Yoğunluk */
.density { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.density__cell { display: flex; flex-direction: column; gap: var(--sp-0-5); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); }
.density__label { font-size: var(--text-xs); color: var(--text-3); font-weight: var(--w-medium); }
.density__value { font-size: var(--text-h3); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }
.density__value .icon { width: var(--size-16); height: var(--size-16); color: var(--success); vertical-align: calc(-1 * var(--sp-0-5)); margin-left: var(--sp-0-5); }
.level-scale { display: flex; gap: var(--sp-1); }
.level-scale span { flex: 1; height: var(--size-6); border-radius: var(--r-xs); background: var(--track); }
.level-scale span.is-filled { background: var(--primary); }
.service-note { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--text-sm); color: var(--text-3); }
.service-note .icon { width: var(--size-16); height: var(--size-16); margin-top: var(--sp-0-5); flex: none; }

/* Tetikleyici seçenekleri (sensör, yoğunluk) */
.trigger-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.trigger-row { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--size-52); padding: 0 var(--sp-3) 0 var(--sp-4); border-bottom: 1px solid var(--border); width: 100%; background: var(--surface); }
.trigger-row:last-child { border-bottom: 0; }
.trigger-row:hover { background: var(--surface-hover); }
.trigger-row__icon { color: var(--primary); display: grid; place-items: center; }
.trigger-row__text { flex: 1; text-align: left; font-size: var(--text-body); }
.trigger-row__ops { display: flex; gap: var(--sp-1); }
.trigger-row__op { display: inline-grid; place-items: center; min-width: var(--size-26); height: var(--size-26); padding: 0 var(--sp-1-5); border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--text-xs); font-weight: var(--w-semibold); color: var(--text-2); font-variant-numeric: tabular-nums; }
.trigger-row .icon.step-row__chevron { color: var(--text-3); }

/* VoxAI anons */
.quota { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); }
.quota__head { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); color: var(--text-2); }
.quota__head strong { color: var(--text); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; }
.quota__bar { height: var(--size-6); border-radius: var(--r-xs); background: var(--track); overflow: hidden; }
.quota__fill { height: 100%; width: var(--pct, 0%); background: var(--primary); border-radius: var(--r-xs); }
.quota__note { display: flex; align-items: center; gap: var(--sp-1-5); font-size: var(--text-xs); color: var(--text-3); }
.quota__note .icon { width: var(--size-14); height: var(--size-14); }
.last-announce { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); font-size: var(--text-sm); }
.last-announce__play { display: grid; place-items: center; width: var(--size-36); height: var(--size-36); border-radius: 50%; background: var(--primary-soft); color: var(--primary); flex: none; }
.last-announce__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.last-announce__title { font-weight: var(--w-medium); }
.last-announce__meta { color: var(--text-3); font-size: var(--text-xs); }
.announce-cta { display: flex; flex-direction: column; gap: var(--sp-2); }

/* Müzik yayını */
.now-playing { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); }
.now-playing__art { display: grid; place-items: center; width: var(--size-48); height: var(--size-48); border-radius: var(--r-md); background: var(--text); color: var(--surface); flex: none; }
.now-playing__art .eq { width: var(--size-18); height: var(--size-16); }
.now-playing__art .eq span { background: var(--primary); width: var(--size-4); }
.now-playing__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.now-playing__label { font-size: var(--text-xs); color: var(--text-3); font-weight: var(--w-medium); }
.now-playing__track { font-size: var(--text-body); font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-playing__list { font-size: var(--text-sm); color: var(--text-3); }

/* Bağlı otomasyon satırı */
.linked-auto { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--size-56); padding: 0 var(--sp-3) 0 var(--sp-4); border-bottom: 1px solid var(--border); width: 100%; background: var(--surface); }
.linked-auto:last-child { border-bottom: 0; }
.linked-auto:hover { background: var(--surface-hover); }
.linked-auto__text { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; line-height: 1.3; }
.linked-auto__name { font-size: var(--text-sm); font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linked-auto__meta { font-size: var(--text-xs); color: var(--text-3); }
.linked-auto__role { font-size: var(--text-xs); font-weight: var(--w-medium); color: var(--text-3); }
.linked-auto__role.is-trigger { color: var(--primary-soft-text); }

/* Grafikler (SVG geometri; renk CSS'ten) */
.chart { display: flex; flex-direction: column; gap: var(--sp-2); }
.chart__svg { width: 100%; height: var(--size-120); display: block; overflow: visible; }
.chart__band { fill: var(--success-bg); }
.chart__line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart__dot { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
.chart { position: relative; }
.chart__svg--overlay { position: absolute; inset: 0; height: var(--size-120); pointer-events: none; preserve-aspect-ratio: none; }
.chart__bar { fill: var(--track); }
.chart__bar.is-now { fill: var(--primary); }
.chart__axis { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.battery { display: inline-block; width: var(--size-22); height: var(--size-11); border: 1.5px solid var(--text-3); border-radius: var(--r-xs); padding: var(--sp-px); position: relative; }
.battery::after { content: ''; position: absolute; right: calc(-1 * var(--sp-1)); top: var(--sp-0-5); width: var(--size-2); height: var(--size-4); background: var(--text-3); border-radius: 1px; }
.battery__fill { display: block; height: 100%; width: var(--pct, 0%); background: var(--success); border-radius: 1px; }
.battery.is-low .battery__fill { background: var(--danger); }

/* Tabela çizimi */
.signboard { display: grid; place-items: center; width: var(--size-200); height: var(--size-64); margin-bottom: var(--sp-2); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); transition: background var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease); }
.signboard__text { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--text-sign); letter-spacing: 4px; color: var(--text-3); transition: color var(--dur-slow) var(--ease); }
.signboard.is-on { background: var(--text); border-color: var(--text); box-shadow: var(--sign-shadow); }
.signboard.is-on .signboard__text { color: var(--on-accent); text-shadow: var(--sign-text-shadow); }
.drawer__hero-of { font-size: var(--text-h2); font-weight: var(--w-regular); color: var(--text-3); letter-spacing: 0; margin-left: var(--sp-1); }

/* Ses seçimi */
.voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.voice { display: flex; align-items: center; gap: var(--sp-2); height: var(--size-48); padding: 0 var(--sp-2) 0 var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); text-align: left; }
.voice:hover { background: var(--surface-hover); }
.voice.is-active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.voice__avatar { display: grid; place-items: center; width: var(--size-30); height: var(--size-30); border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--text-sm); font-weight: var(--w-semibold); color: var(--text-2); flex: none; }
.voice.is-active .voice__avatar { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }
.voice__name { flex: 1; font-size: var(--text-sm); font-weight: var(--w-medium); }
.voice__play { display: grid; place-items: center; width: var(--size-28); height: var(--size-28); border-radius: 50%; color: var(--text-3); }
.voice__play .icon { width: var(--size-14); height: var(--size-14); }
.voice:hover .voice__play { color: var(--primary); background: var(--primary-soft); }
.level-scale { margin-top: calc(-1 * var(--sp-3)); }
a.linked-auto, a.linked-auto:hover { color: var(--text); }

/* Dijital ekran önizlemesi (detay paneli) */
.screen { position: relative; display: grid; place-items: center; width: var(--size-200); height: var(--size-120); margin-bottom: var(--sp-2); border-radius: var(--r-md); border: 2px solid var(--border-strong); background: var(--surface-2); overflow: hidden; transition: background var(--dur-slow) var(--ease); }
.screen.is-on { background: var(--text); border-color: var(--text); }
.screen__scene { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--text-h2); color: var(--on-accent); opacity: 0; letter-spacing: .5px; text-align: center; padding: 0 var(--sp-3); }
.screen.is-on .screen__scene { opacity: 1; }
.screen__bar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--size-6); background: var(--primary); transform: scaleX(0); transform-origin: left; }
.screen.is-on .screen__bar { animation: screen-progress 8s linear infinite; }
@keyframes screen-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.screen.is-on.pct-10, .screen.is-on.pct-20, .screen.is-on.pct-30, .screen.is-on.pct-40 { opacity: .55; }
.screen.is-on.pct-50, .screen.is-on.pct-60, .screen.is-on.pct-70 { opacity: .8; }
.btn-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }

/* E-mürekkep fiyat etiketi önizlemesi */
.esl { position: relative; display: grid; gap: var(--sp-1); width: var(--size-200); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); border-radius: var(--r-sm); border: 2px solid var(--border-strong); background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.esl__product { font-size: var(--text-xs); font-weight: var(--w-medium); color: var(--text-2); min-height: 2.4em; line-height: 1.2; padding-right: var(--size-72); }
.esl__price { font-family: var(--font-display); font-size: var(--text-h1); font-weight: var(--w-semibold); line-height: 1; letter-spacing: -.5px; }
.esl__currency { font-size: var(--text-body); margin-right: var(--sp-0-5); }
.esl__old { font-size: var(--text-xs); color: var(--text-3); text-decoration: line-through; }
.esl__badge { position: absolute; top: var(--sp-2); right: var(--sp-2); padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--text); color: var(--surface); font-size: var(--text-2xs); font-weight: var(--w-semibold); }
.esl.is-campaign .esl__badge, .esl__tpl { font-size: var(--text-2xs); color: var(--text-3); }
.esl__sku { font-family: var(--font-mono, monospace); font-size: var(--text-2xs); color: var(--text-3); letter-spacing: .5px; }
.esl.is-discount .esl__price { color: var(--danger-text); }
.studio-link { align-self: flex-start; }