/* Ortak CAD arka plan — değişkenler yalnızca bileşende; sayfa arka planına dokunmaz */
.cad-backdrop {
    --scene-grid: rgba(28, 78, 128, .07);
    --scene-grid-major: rgba(28, 78, 128, .14);
    --scene-struct: rgba(18, 62, 108, .28);
    --scene-struct-dim: rgba(18, 62, 108, .14);
    --scene-crane: rgba(140, 68, 18, .28);
    --scene-hatch: rgba(18, 62, 108, .04);
    --scene-plot: rgba(18, 62, 108, .45);
    --scene-fine: rgba(18, 62, 108, .18);
    --scene-draw-opacity: .58;
    --cad-paper: transparent;
    --cad-theme-transition: 1.4s ease-in-out;
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    background: transparent;
}

html[data-theme="dark"] .cad-backdrop {
    --scene-grid: rgba(56, 189, 248, .06);
    --scene-grid-major: rgba(56, 189, 248, .12);
    --scene-struct: rgba(186, 230, 253, .28);
    --scene-struct-dim: rgba(148, 163, 184, .16);
    --scene-crane: rgba(252, 148, 48, .34);
    --scene-hatch: rgba(56, 189, 248, .04);
    --scene-plot: rgba(186, 230, 253, .55);
    --scene-fine: rgba(186, 230, 253, .2);
    --scene-draw-opacity: .52;
}

.cad-backdrop.is-contained {
    position: absolute;
}

/* Liste / içerik sayfaları: sayfa zemininde hafif çizim (kartların altında kalır) */
.cad-backdrop.is-soft {
    --scene-draw-opacity: .40;
    --scene-grid: rgba(28, 78, 128, .06);
    --scene-grid-major: rgba(28, 78, 128, .12);
    --scene-struct: rgba(18, 62, 108, .26);
    --scene-struct-dim: rgba(18, 62, 108, .13);
    --scene-crane: rgba(140, 68, 18, .22);
    --scene-fine: rgba(18, 62, 108, .14);
}

.cad-backdrop .scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: opacity var(--cad-theme-transition, 1.4s ease-in-out);
}

.cad-backdrop .cad-projects {
    opacity: var(--scene-draw-opacity);
    transition: opacity var(--cad-theme-transition, 1.4s ease-in-out);
}

.cad-backdrop .cad-project {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cad-backdrop .cad-project.is-active,
.cad-backdrop .cad-project.is-incoming {
    opacity: 1;
    visibility: visible;
}

@keyframes cad-plot-scan {
    0% { transform: translateY(0); opacity: .95; }
    85% { opacity: .85; }
    100% { transform: translateY(868px); opacity: 0; }
}

.cad-backdrop .scene .grid-minor { stroke: var(--scene-grid); stroke-width: .55; }
.cad-backdrop .scene .grid-major { stroke: var(--scene-grid-major); stroke-width: .95; }
.cad-backdrop .scene path,
.cad-backdrop .scene circle,
.cad-backdrop .scene rect,
.cad-backdrop .scene text {
    transition: stroke var(--cad-theme-transition, 1.4s ease-in-out), fill var(--cad-theme-transition, 1.4s ease-in-out);
}
.cad-backdrop .scene .sheet { fill: none; stroke: var(--scene-grid-major); stroke-width: 1.15; }
.cad-backdrop .scene .sheet-inner { fill: none; stroke: var(--scene-grid); stroke-width: .7; }
.cad-backdrop .scene .title-blk { fill: none; stroke: var(--scene-struct-dim); stroke-width: .9; }
.cad-backdrop .scene .center { fill: none; stroke: var(--scene-struct-dim); stroke-width: .65; stroke-dasharray: 11 3.5 1.6 3.5; }
.cad-backdrop .scene .axis { stroke: var(--scene-struct); stroke-width: 1.05; }
.cad-backdrop .scene .dim { stroke: var(--scene-struct-dim); stroke-width: .75; fill: none; }
.cad-backdrop .scene .dim-txt { fill: var(--scene-struct-dim); font-size: 8.5px; font-family: ui-monospace, Consolas, "Courier New", monospace; letter-spacing: .06em; }
.cad-backdrop .scene .bubble { fill: var(--cad-paper, var(--paper, transparent)); stroke: var(--scene-struct); stroke-width: .95; }
.cad-backdrop .scene .bubble-txt { fill: var(--scene-struct); font-size: 9px; font-weight: 700; font-family: ui-monospace, Consolas, "Courier New", monospace; text-anchor: middle; }

.cad-backdrop .scene .struct {
    fill: none;
    stroke: var(--scene-struct);
    stroke-width: 1.15;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.cad-backdrop .scene .struct-dim {
    fill: none;
    stroke: var(--scene-struct-dim);
    stroke-width: .85;
    stroke-linecap: square;
    stroke-dasharray: 5 4;
}

.cad-backdrop .scene .win {
    fill: none;
    stroke: var(--scene-struct);
    stroke-width: .7;
}

.cad-backdrop .scene .slab { stroke: var(--scene-struct); stroke-width: 1.05; }
.cad-backdrop .scene .fine { fill: none; stroke: var(--scene-fine); stroke-width: .45; }
.cad-backdrop .scene .plan { fill: none; stroke: var(--scene-struct); stroke-width: 1.35; stroke-linejoin: miter; }
.cad-backdrop .scene .plan-in { fill: none; stroke: var(--scene-struct); stroke-width: .75; }
.cad-backdrop .scene .furn { fill: none; stroke: var(--scene-struct-dim); stroke-width: .55; }
.cad-backdrop .scene .hatch-fill { stroke: none; }

.cad-backdrop .scene .plot-line {
    stroke: var(--scene-struct);
    stroke-width: 1.15;
    fill: none;
    stroke-linecap: square;
    opacity: 0;
    filter: drop-shadow(0 0 4px var(--scene-struct));
    transform-box: view-box;
    transform-origin: 0 0;
}

.cad-backdrop .scene.is-scanning .plot-line {
    animation: cad-plot-scan 1.4s cubic-bezier(.18, .72, .12, 1) forwards;
}

.cad-backdrop .scene .crane {
    fill: none;
    stroke: var(--scene-crane);
    stroke-width: 1.1;
    stroke-linecap: square;
    stroke-linejoin: miter;
    transform-box: view-box;
    transform-origin: 1264px 140px;
    animation: cad-crane-sway 22s ease-in-out infinite;
}

.cad-backdrop .scene .crane-lat {
    stroke: var(--scene-crane);
    stroke-width: .55;
    fill: none;
}

@keyframes cad-crane-sway {
    0%, 100% { transform: rotate(-0.45deg); }
    50% { transform: rotate(0.55deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cad-backdrop .scene .crane,
    .cad-backdrop .scene.is-scanning .plot-line {
        animation: none;
    }
}