/* ============================================================
   Akıllı Priz — v3 "Güç Hattı" (varsayılan orta alan)
   Markup: Views/Shared/_SmartPlugCenterLine.cshtml · JS: js/smart-plug-v3.js
   Kabuk (başlık, etiket, telemetri) ve vurgu rengi (--sp2-rgb) v2'den gelir: css/smart-plug-v2.css.

   Ölçek: sahne 400×200 birimlik bir tasarım alanı. --sp3-u = 1 birimin piksel karşılığı (container query),
   sahnede font-size = 10 birim, yani 1em = 10 birim. Mobil ve masaüstü aynı çizimi aynı oranda görür.

   Performans: sürekli animasyonlar yalnızca transform / opacity (GPU'da birleşir, sayfayı yeniden boyamaz).
   Tek istisna kablodaki akım çizgisi (stroke-dashoffset): kablonun küçük alanını boyar.
   Sahne ekrandan çıkınca JS .sp3-paused ekler ve tüm döngüler durur.
   ============================================================ */

.sp2-chamber--line {
    cursor: default;
}

/* Kabuktaki "canlı" noktası mobilde de atsın (mobil ve masaüstü aynı görünsün) */
@media (max-width: 768px) {
    .sp2-widget--line .sp2-live-dot {
        animation: sp2-ping 1.6s ease-out infinite !important;
    }
}

.sp3-scene {
    --sp3-u: 1.25px;
    --sp3-cable-c: #262a31;
    --sp3-plug-c: #2c3038;
    --sp3-glass-a: #1b2431;
    --sp3-glass-b: #0c1118;
    --sp3-raise: 0.22em 0.28em 0.6em var(--shadow-dark), -0.18em -0.18em 0.5em var(--shadow-light);
    --sp3-raise-sm: 0.12em 0.15em 0.32em var(--shadow-dark), -0.1em -0.1em 0.28em var(--shadow-light);
    --sp3-warn: 245, 158, 11;
    --sp3-danger: 239, 68, 68;

    position: absolute;
    inset: 0;
    z-index: 1;
    container-type: size;
    /* clip: taşan parıltı katmanları sahneyi kaydırılabilir yapmasın (odaklanınca 10px kayıyordu) */
    overflow: hidden;
    overflow: clip;
    border-radius: inherit;
    -webkit-user-select: none;
    user-select: none;
}

@supports (width: 1cqw) {
    .sp3-scene {
        --sp3-u: min(0.25cqw, 0.5cqh);
    }
}

[data-theme="dark"] .sp3-scene,
body.dark-mode .sp3-scene {
    --sp3-cable-c: #0d0e11;
    --sp3-plug-c: #141519;
    --sp3-raise: 0.22em 0.28em 0.6em rgba(0, 0, 0, 0.55), -0.15em -0.15em 0.45em rgba(255, 255, 255, 0.05);
    --sp3-raise-sm: 0.12em 0.15em 0.32em rgba(0, 0, 0, 0.5), -0.08em -0.08em 0.24em rgba(255, 255, 255, 0.04);
}

/* ---------- Zemin ve duvar (sahne genişliğinde; geniş kartta kenara kadar uzanır) ---------- */
.sp3-ground,
.sp3-floor,
.sp3-wall {
    position: absolute;
    pointer-events: none;
}

.sp3-ground {
    left: 0;
    right: 0;
    bottom: 0;
    top: calc(50% + 60 * var(--sp3-u));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.045), rgba(0, 0, 0, 0) 80%);
}

.sp3-floor {
    left: 0;
    right: 0;
    top: calc(50% + 59.4 * var(--sp3-u));
    height: calc(1.6 * var(--sp3-u));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.5));
    opacity: 0.8;
}

[data-theme="dark"] .sp3-ground,
body.dark-mode .sp3-ground {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 80%);
}

[data-theme="dark"] .sp3-floor,
body.dark-mode .sp3-floor {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.05));
}

.sp3-wall {
    top: 0;
    right: 0;
    left: calc(50% + 178 * var(--sp3-u));
    height: calc(50% + 60 * var(--sp3-u));
    background: linear-gradient(90deg, var(--bg-primary), color-mix(in srgb, var(--bg-primary) 94%, #000));
    box-shadow: calc(-1.5 * var(--sp3-u)) 0 calc(5 * var(--sp3-u)) var(--shadow-dark);
    /* Üst kısım odanın derinliğine karışsın; kutu gibi durmasın */
    -webkit-mask: linear-gradient(to bottom, transparent, #000 45%);
            mask: linear-gradient(to bottom, transparent, #000 45%);
}

/* Süpürgelik */
.sp3-wall::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(7 * var(--sp3-u));
    background: color-mix(in srgb, var(--bg-primary) 90%, #000);
    box-shadow: calc(-1 * var(--sp3-u)) calc(-0.6 * var(--sp3-u)) calc(2 * var(--sp3-u)) rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .sp3-wall,
body.dark-mode .sp3-wall {
    background: linear-gradient(90deg, color-mix(in srgb, var(--bg-primary) 92%, #fff), var(--bg-primary));
    box-shadow: calc(-1.5 * var(--sp3-u)) 0 calc(6 * var(--sp3-u)) rgba(0, 0, 0, 0.55);
}

/* ---------- Sahne ---------- */
.sp3-stage {
    position: absolute;
    left: calc(50% - 200 * var(--sp3-u));
    top: calc(50% - 100 * var(--sp3-u));
    width: calc(400 * var(--sp3-u));
    height: calc(200 * var(--sp3-u));
    font-size: calc(10 * var(--sp3-u));
    line-height: 1;
}

.sp3-stage span,
.sp3-stage i,
.sp3-stage div {
    position: absolute;
    display: block;
}

/* ---------- Ortam parıltısı (açıkken) ---------- */
.sp3-aura {
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--sp2-rgb), 0.3), rgba(var(--sp2-rgb), 0.08) 55%, transparent);
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
}

.sp3-aura--pc {
    left: -0.6em;
    top: 0.8em;
    width: 14.4em;
    height: 14.4em;
}

.sp3-aura--socket {
    left: 28.1em;
    top: 6.1em;
    width: 15.2em;
    height: 15.2em;
}

.sp2-widget[data-state="on"] .sp3-aura {
    opacity: 1;
    animation: sp3-aura 4.2s ease-in-out infinite;
}

.sp2-widget[data-state="on"] .sp3-aura--socket {
    animation-delay: -2.1s;
}

@keyframes sp3-aura {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1; }
}

/* ============================================================
   KASA
   ============================================================ */
.sp3-pc {
    z-index: 2;
    left: 2em;
    top: 4em;
    width: 9.2em;
    height: 12em;
}

.sp3-pc-body {
    left: 0;
    top: 0;
    width: 9.2em;
    height: 11.6em;
    border-radius: 0.9em;
    background: var(--bg-primary);
    box-shadow: var(--sp3-raise);
}

.sp3-pc-feet::before,
.sp3-pc-feet::after {
    content: '';
    position: absolute;
    top: 11.45em;
    width: 1.4em;
    height: 0.55em;
    border-radius: 0 0 0.3em 0.3em;
    background: color-mix(in srgb, var(--bg-primary) 70%, #000);
}

.sp3-pc-feet::before { left: 0.9em; }
.sp3-pc-feet::after  { left: 6.9em; }

.sp3-pc-shadow {
    left: 0.2em;
    width: 8.8em;
    top: 11.65em;
    height: 0.7em;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.3), transparent);
}

/* Ön panel: güç düğmesi, LED, USB */
.sp3-pc-front {
    left: 0;
    top: 0;
    bottom: 0;
    width: 1.25em;
    border-radius: 0.9em 0 0 0.9em;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.01));
    box-shadow: inset -0.06em 0 0 rgba(0, 0, 0, 0.08);
}

.sp3-pc-btn {
    left: 0.33em;
    top: 0.75em;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: var(--bg-primary);
    box-shadow: var(--sp3-raise-sm);
}

.sp3-pc-led {
    left: 0.5em;
    top: 1.75em;
    width: 0.26em;
    height: 0.26em;
    border-radius: 50%;
    background: rgb(var(--sp3-warn));
    box-shadow: 0 0 0.35em rgba(var(--sp3-warn), 0.9);
    opacity: 0.35;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.sp3-pc-io::before,
.sp3-pc-io::after {
    content: '';
    position: absolute;
    left: 0.42em;
    width: 0.42em;
    height: 0.16em;
    border-radius: 0.05em;
    background: rgba(0, 0, 0, 0.45);
}

.sp3-pc-io::before { top: 2.4em; }
.sp3-pc-io::after  { top: 2.75em; }

/* Bekleme: turuncu LED yavaşça nefes alır */
.sp2-widget[data-state="off"] .sp3-pc-led,
.sp2-widget[data-state="loading"] .sp3-pc-led {
    animation: sp3-standby 3.2s ease-in-out infinite;
}

.sp2-widget[data-state="on"] .sp3-pc-led {
    background: rgb(var(--sp2-rgb));
    box-shadow: 0 0 0.45em rgba(var(--sp2-rgb), 0.95);
    opacity: 1;
}

@keyframes sp3-standby {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.9; }
}

/* Cam yan panel */
.sp3-glass {
    left: 1.6em;
    top: 0.6em;
    width: 7em;
    height: 7.4em;
    border-radius: 0.5em;
    overflow: hidden;
    background: linear-gradient(155deg, var(--sp3-glass-a) 0%, var(--sp3-glass-b) 100%);
    box-shadow:
        inset 0 0 0 0.08em rgba(255, 255, 255, 0.07),
        inset 0.15em 0.2em 0.5em rgba(0, 0, 0, 0.55);
}

.sp3-glass-glow {
    inset: 0;
    background:
        radial-gradient(circle at 40% 38%, rgba(var(--sp2-rgb), 0.42), transparent 60%),
        radial-gradient(circle at 50% 95%, rgba(var(--sp2-rgb), 0.3), transparent 55%);
    opacity: 0;
    transition: opacity 0.9s ease;
}

.sp3-glass-shine {
    inset: 0;
    background: linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, 0.09) 36%, transparent 44%, transparent 62%, rgba(255, 255, 255, 0.05) 68%, transparent 74%);
    pointer-events: none;
}

.sp2-widget[data-state="on"] .sp3-glass-glow {
    opacity: 1;
}

/* Fan */
.sp3-fan {
    left: 0.75em;
    top: 0.75em;
    width: 3.9em;
    height: 3.9em;
    border-radius: 50%;
    background: #080b10;
    box-shadow:
        inset 0 0 0 0.16em #1d2530,
        inset 0 0 0 0.3em #10151c;
}

.sp3-fan-ring {
    inset: 0.1em;
    border-radius: 50%;
    border: 0.13em solid rgba(var(--sp2-rgb), 0.95);
    box-shadow:
        0 0 0.5em rgba(var(--sp2-rgb), 0.75),
        inset 0 0 0.45em rgba(var(--sp2-rgb), 0.6);
    opacity: 0;
    transition: opacity 0.8s ease;
}

.sp3-fan-rotor {
    inset: 0.36em;
    border-radius: 50%;
    background: repeating-conic-gradient(from 8deg, rgba(196, 207, 222, 0.34) 0deg 25deg, transparent 25deg 51.43deg);
    -webkit-mask: radial-gradient(circle, transparent 0 21%, #000 22% 97%, transparent 98%);
            mask: radial-gradient(circle, transparent 0 21%, #000 22% 97%, transparent 98%);
}

.sp3-fan-rotor::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(from 8deg, rgba(var(--sp2-rgb), 0.85) 0deg 25deg, transparent 25deg 51.43deg);
    opacity: 0;
    transition: opacity 0.8s ease;
}

.sp3-fan-hub {
    left: 50%;
    top: 50%;
    width: 0.95em;
    height: 0.95em;
    margin: -0.475em 0 0 -0.475em;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #3a4555, #161c25);
    box-shadow: 0 0 0 0.06em rgba(255, 255, 255, 0.06);
}

.sp3-fan-hub::after {
    content: '';
    position: absolute;
    inset: 0.32em;
    border-radius: 50%;
    background: rgb(var(--sp2-rgb));
    box-shadow: 0 0 0.3em rgba(var(--sp2-rgb), 0.9);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.sp2-widget[data-state="on"] .sp3-fan-ring,
.sp2-widget[data-state="on"] .sp3-fan-rotor::after,
.sp2-widget[data-state="on"] .sp3-fan-hub::after {
    opacity: 1;
}

/* WAAPI yoksa CSS ile dön */
.sp3-scene.is-fan-css .sp3-fan-rotor {
    animation: sp3-spin 0.7s linear infinite;
}

/* RAM */
.sp3-ram {
    right: 0.75em;
    top: 0.85em;
    width: 1em;
    height: 2.8em;
}

.sp3-ram i {
    top: 0;
    bottom: 0;
    width: 0.4em;
    border-radius: 0.08em;
    background: linear-gradient(#2a3442, #1a212b);
}

.sp3-ram i:first-child { left: 0; }
.sp3-ram i:last-child  { right: 0; }

.sp3-ram i::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0.36em;
    border-radius: 0.08em 0.08em 0 0;
    background: rgb(var(--sp2-rgb));
    box-shadow: 0 0 0.35em rgba(var(--sp2-rgb), 0.9);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.sp2-widget[data-state="on"] .sp3-ram i::before {
    opacity: 1;
    animation: sp3-ram 1.8s ease-in-out infinite;
}

.sp2-widget[data-state="on"] .sp3-ram i:last-child::before {
    animation-delay: -0.9s;
}

@keyframes sp3-ram {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Ekran kartı + RGB şerit */
.sp3-gpu {
    left: 0.45em;
    right: 0.45em;
    top: 5.25em;
    height: 1.15em;
    border-radius: 0.2em;
    background: linear-gradient(#2c3644, #19202a);
    box-shadow: 0 0.12em 0.22em rgba(0, 0, 0, 0.5);
}

.sp3-gpu::before,
.sp3-gpu::after {
    content: '';
    position: absolute;
    top: 0.14em;
    width: 0.66em;
    height: 0.66em;
    border-radius: 50%;
    background: repeating-conic-gradient(rgba(190, 200, 215, 0.3) 0deg 30deg, transparent 30deg 60deg);
    box-shadow: inset 0 0 0 0.07em #10151c;
}

.sp3-gpu::before { left: 0.8em; }
.sp3-gpu::after  { left: 2.1em; }

.sp3-rgb {
    left: 0.3em;
    right: 0.3em;
    bottom: 0.12em;
    height: 0.17em;
    border-radius: 0.1em;
    overflow: hidden;
    background: rgba(var(--sp2-rgb), 0.18);
    opacity: 0.5;
    transition: opacity 0.6s ease;
}

.sp3-rgb-flow {
    left: 0;
    top: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(var(--sp2-rgb), 0.15) 0%, rgb(var(--sp2-rgb)) 10%, #fff 14%, rgb(var(--sp2-rgb)) 18%, rgba(var(--sp2-rgb), 0.15) 34%,
        rgba(var(--sp2-rgb), 0.15) 50%, rgb(var(--sp2-rgb)) 60%, #fff 64%, rgb(var(--sp2-rgb)) 68%, rgba(var(--sp2-rgb), 0.15) 84%,
        rgba(var(--sp2-rgb), 0.15) 100%);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.sp2-widget[data-state="on"] .sp3-rgb {
    opacity: 1;
}

.sp2-widget[data-state="on"] .sp3-rgb-flow {
    opacity: 1;
    animation: sp3-rgb 2.6s linear infinite;
}

@keyframes sp3-rgb {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Güç kaynağı */
.sp3-psu {
    left: 1.6em;
    top: 8.5em;
    width: 7.4em;
    height: 2.4em;
    border-radius: 0.35em;
    background: rgba(0, 0, 0, 0.05);
    box-shadow: inset 0.08em 0.1em 0.25em rgba(0, 0, 0, 0.18), inset -0.06em -0.06em 0.18em rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .sp3-psu,
body.dark-mode .sp3-psu {
    background: rgba(0, 0, 0, 0.18);
    box-shadow: inset 0.08em 0.1em 0.25em rgba(0, 0, 0, 0.45), inset -0.06em -0.06em 0.18em rgba(255, 255, 255, 0.04);
}

.sp3-psu-grill {
    left: 0.45em;
    top: 0.5em;
    bottom: 0.5em;
    width: 3.6em;
    border-radius: 0.15em;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0 0.14em, transparent 0.14em 0.42em);
    opacity: 0.6;
}

.sp3-psu-port {
    left: 6.8em;
    top: 0.6em;
    width: 0.8em;
    height: 1.2em;
    border-radius: 0.15em 0 0 0.15em;
    background: #15181d;
}

/* Sıcak hava (açıkken kasanın üstünden yükselir) */
.sp3-heat {
    left: 2.4em;
    top: -2.4em;
    width: 5em;
    height: 2.6em;
    pointer-events: none;
}

.sp3-heat i {
    bottom: 0;
    width: 0.22em;
    height: 1.3em;
    border-radius: 1em;
    background: linear-gradient(to top, rgba(var(--sp2-rgb), 0), rgba(var(--sp2-rgb), 0.5) 50%, rgba(var(--sp2-rgb), 0));
    opacity: 0;
}

.sp3-heat i:nth-child(1) { left: 18%; }
.sp3-heat i:nth-child(2) { left: 50%; }
.sp3-heat i:nth-child(3) { left: 80%; }

.sp2-widget[data-state="on"] .sp3-heat i {
    animation: sp3-heat 2.7s ease-out infinite;
}

.sp2-widget[data-state="on"] .sp3-heat i:nth-child(2) { animation-delay: -0.9s; }
.sp2-widget[data-state="on"] .sp3-heat i:nth-child(3) { animation-delay: -1.8s; }

@keyframes sp3-heat {
    0%   { transform: translate(0, 0.6em) scaleY(0.6); opacity: 0; }
    30%  { opacity: 0.85; }
    100% { transform: translate(0.3em, -1.4em) scaleY(1.1); opacity: 0; }
}

/* ============================================================
   KABLO (SVG — kullanıcı birimleri tasarım birimiyle aynı)
   ============================================================ */
.sp3-cable {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

.sp3-cable path {
    fill: none;
    stroke-linecap: round;
}

.sp3-cable-core {
    stroke: var(--sp3-cable-c);
    stroke-width: 4.6;
}

.sp3-cable-shine {
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 1.1;
    transform: translateY(-1.1px);
}

.sp3-cable-glow {
    stroke: rgba(var(--sp2-rgb), 0.28);
    stroke-width: 11;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.sp3-cable-energy {
    stroke: rgb(var(--sp2-rgb));
    stroke-width: 2.2;
    stroke-dasharray: 3 15;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.sp3-cable-boot {
    fill: var(--sp3-plug-c);
}

/* Akım prizden kasaya akar */
.sp2-widget[data-state="on"] .sp3-scene.is-plugged .sp3-cable-glow {
    opacity: 1;
}

.sp2-widget[data-state="on"] .sp3-scene.is-plugged .sp3-cable-energy {
    opacity: 1;
    animation: sp3-flow 0.9s linear infinite;
}

/* Komut gidiyor: takılıysa kablo "şarj oluyor" */
.sp2-widget[data-state="loading"] .sp3-scene.is-plugged .sp3-cable-energy {
    opacity: 0.6;
    animation: sp3-flow 0.4s linear infinite;
}

@keyframes sp3-flow {
    to { stroke-dashoffset: 18; }
}

/* ============================================================
   İPUCU OKLARI (kapalıyken fişten prize doğru akar)
   ============================================================ */
.sp3-hints {
    z-index: 2;
    left: 25.2em;
    top: 13.35em;
    width: 6.4em;
    height: 0.7em;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.sp3-hints i {
    top: 0;
    width: 0.7em;
    height: 0.7em;
    border-top: 0.2em solid rgb(var(--sp2-rgb));
    border-right: 0.2em solid rgb(var(--sp2-rgb));
    border-radius: 0.08em;
    transform: rotate(45deg);
    opacity: 0.15;
}

.sp3-hints i:nth-child(1) { left: 0; }
.sp3-hints i:nth-child(2) { left: 2.6em; }
.sp3-hints i:nth-child(3) { left: 5.2em; }

.sp2-widget[data-state="off"]:not(.sp2-locked) .sp3-scene:not(.is-plugged):not(.is-dragging) .sp3-hints {
    opacity: 1;
}

.sp2-widget[data-state="off"]:not(.sp2-locked) .sp3-hints i {
    animation: sp3-hint 1.5s ease-in-out infinite;
}

.sp2-widget[data-state="off"]:not(.sp2-locked) .sp3-hints i:nth-child(2) { animation-delay: 0.18s; }
.sp2-widget[data-state="off"]:not(.sp2-locked) .sp3-hints i:nth-child(3) { animation-delay: 0.36s; }

@keyframes sp3-hint {
    0%, 100% { opacity: 0.12; }
    40%      { opacity: 0.95; }
}

/* ============================================================
   AKILLI PRİZ (duvarda)
   ============================================================ */
.sp3-socket {
    z-index: 4;
    left: 33.6em;
    top: 11.6em;
    width: 4.2em;
    height: 4.2em;
}

.sp3-wallplate {
    left: 3.85em;
    top: -0.8em;
    width: 0.45em;
    height: 5.8em;
    border-radius: 0.22em 0 0 0.22em;
    background: var(--bg-primary);
    box-shadow: -0.1em 0 0.25em rgba(0, 0, 0, 0.18);
}

.sp3-socket-body {
    inset: 0;
    border-radius: 0.8em 0.35em 0.35em 0.8em;
    background: var(--bg-primary);
    box-shadow: var(--sp3-raise);
    transition: transform 0.2s ease;
}

.sp3-socket.is-bump .sp3-socket-body {
    animation: sp3-bump 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sp3-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.05, 0.97); }
    100% { transform: scale(1); }
}

/* Fişin girdiği yüz ve delikler */
.sp3-socket-face {
    left: 0;
    top: 0.75em;
    width: 0.55em;
    height: 2.7em;
    border-radius: 0.3em 0.1em 0.1em 0.3em;
    background: rgba(0, 0, 0, 0.07);
    box-shadow: inset 0.06em 0 0.12em rgba(0, 0, 0, 0.2);
}

.sp3-socket-face i {
    left: 0;
    width: 0.55em;
    height: 0.34em;
    border-radius: 0 0.1em 0.1em 0;
    background: #14171c;
}

.sp3-socket-face i:first-child { top: 0.68em; }
.sp3-socket-face i:last-child  { top: 1.68em; }

/* Durum halkası */
.sp3-socket-ring {
    left: 1.42em;
    top: 1.2em;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    border: 0.15em solid rgba(var(--sp2-rgb), 0.3);
    box-shadow: var(--sp3-raise-sm);
}

.sp3-socket-ring::after {
    content: '';
    position: absolute;
    inset: -0.15em;
    border-radius: 50%;
    border: 0.15em solid rgb(var(--sp2-rgb));
    box-shadow: 0 0 0.55em rgba(var(--sp2-rgb), 0.85), inset 0 0 0.35em rgba(var(--sp2-rgb), 0.5);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Konum yüzdeyle: em, ikonun kendi (küçük) yazı boyutuna göre hesaplanırdı. Halka merkezi = (23.2, 21) / 42 */
.sp3-socket-icon {
    left: 55.24%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75em;
    color: var(--text-muted);
    transition: color 0.4s ease;
}

.sp2-widget[data-state="on"] .sp3-socket-ring::after {
    opacity: 1;
    animation: sp3-ring 2.6s ease-in-out infinite;
}

.sp2-widget[data-state="on"] .sp3-socket-icon {
    color: rgb(var(--sp2-rgb));
}

/* Çevrimiçi ama kapalı: halka yavaş nefes */
.sp2-widget[data-state="off"] .sp3-socket-ring::after {
    animation: sp3-breathe 3.4s ease-in-out infinite;
}

/* Komut gidiyor: hızlı yanıp söner */
.sp2-widget[data-state="loading"] .sp3-socket-ring::after {
    animation: sp3-blink 0.5s steps(2, jump-none) infinite;
}

/* Durum bilinmiyor: turuncu arama */
.sp2-widget[data-state="unknown"] .sp3-socket-ring::after {
    border-color: rgb(var(--sp3-warn));
    box-shadow: 0 0 0.5em rgba(var(--sp3-warn), 0.8);
    animation: sp3-breathe 1.2s ease-in-out infinite;
}

/* Çevrimdışı: kırmızı, ağır yanıp söner */
.sp2-widget[data-state="offline"] .sp3-socket-ring::after {
    border-color: rgb(var(--sp3-danger));
    box-shadow: 0 0 0.5em rgba(var(--sp3-danger), 0.8);
    animation: sp3-breathe 2.2s ease-in-out infinite;
}

.sp2-widget[data-state="offline"] .sp3-socket-icon {
    color: rgb(var(--sp3-danger));
}

@keyframes sp3-ring {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

@keyframes sp3-breathe {
    0%, 100% { opacity: 0.12; }
    50%      { opacity: 0.75; }
}

@keyframes sp3-blink {
    0%   { opacity: 1; }
    100% { opacity: 0.15; }
}

/* Kablosuz sinyal yayları */
.sp3-signal {
    left: 1.3em;
    top: -2.05em;
    width: 2em;
    height: 1.8em;
    pointer-events: none;
}

.sp3-signal i {
    left: 50%;
    bottom: 0;
    border-radius: 50%;
    border: 0.17em solid transparent;
    border-top-color: rgb(var(--sp2-rgb));
    opacity: 0;
}

.sp3-signal i:nth-child(1) { width: 0.7em; height: 0.7em; margin: 0 0 -0.35em -0.35em; }
.sp3-signal i:nth-child(2) { width: 1.4em; height: 1.4em; margin: 0 0 -0.7em -0.7em; }
.sp3-signal i:nth-child(3) { width: 2.1em; height: 2.1em; margin: 0 0 -1.05em -1.05em; }

.sp2-widget[data-state="on"] .sp3-signal i,
.sp2-widget[data-state="off"] .sp3-signal i,
.sp2-widget[data-state="loading"] .sp3-signal i,
.sp2-widget[data-state="unknown"] .sp3-signal i {
    animation: sp3-signal 2.4s ease-out infinite;
}

.sp2-widget .sp3-signal i:nth-child(2) { animation-delay: 0.3s; }
.sp2-widget .sp3-signal i:nth-child(3) { animation-delay: 0.6s; }

.sp2-widget[data-state="loading"] .sp3-signal i {
    animation-duration: 0.9s;
}

.sp2-widget[data-state="unknown"] .sp3-signal i {
    border-top-color: rgb(var(--sp3-warn));
    animation-duration: 1.4s;
}

@keyframes sp3-signal {
    0%   { opacity: 0; }
    25%  { opacity: 0.95; }
    70%, 100% { opacity: 0; }
}

/* Yetkisiz kullanıcı: kilit rozeti */
.sp3-socket-lock {
    display: none !important;
    right: -0.45em;
    top: -0.45em;
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    background: var(--bg-primary);
    box-shadow: var(--sp3-raise-sm);
    color: var(--text-muted);
}

.sp3-socket-lock i {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.55em;
}

.sp2-widget.sp2-locked .sp3-socket-lock {
    display: block !important;
}

.sp2-widget.sp2-locked.is-denied .sp3-socket-lock {
    animation: sp3-bump 0.4s ease 2;
    color: rgb(var(--sp3-danger));
}

/* Takılma kıvılcımları (tek seferlik) */
.sp3-sparks {
    left: 0;
    top: 2.1em;
    width: 0;
    height: 0;
    pointer-events: none;
}

.sp3-sparks i {
    left: 0;
    top: -0.06em;
    width: 0.6em;
    height: 0.13em;
    border-radius: 1em;
    background: linear-gradient(90deg, rgb(var(--sp2-rgb)), #fff);
    transform-origin: 0 50%;
    opacity: 0;
}

.sp3-sparks i:nth-child(1) { --a: 150deg; }
.sp3-sparks i:nth-child(2) { --a: 172deg; }
.sp3-sparks i:nth-child(3) { --a: 194deg; }
.sp3-sparks i:nth-child(4) { --a: 214deg; }
.sp3-sparks i:nth-child(5) { --a: 128deg; }
.sp3-sparks i:nth-child(6) { --a: 236deg; }

.sp3-sparks.is-on i {
    animation: sp3-spark 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sp3-sparks.is-on i:nth-child(even) {
    animation-duration: 0.45s;
}

@keyframes sp3-spark {
    0%   { transform: rotate(var(--a)) translateX(0.2em) scaleX(0.4); opacity: 1; }
    100% { transform: rotate(var(--a)) translateX(2em) scaleX(0.9); opacity: 0; }
}

/* ============================================================
   FİŞ
   ============================================================ */
.sp3-plug {
    z-index: 3;
    left: 0;
    top: 12.5em;
    width: 4.8em;
    height: 2.4em;
    transform: translate3d(calc(var(--px, 186) * var(--sp3-u)), 0, 0);
    cursor: grab;
    touch-action: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Dokunmatik için geniş tutma alanı */
.sp3-plug::before {
    content: '';
    position: absolute;
    inset: -1.3em -0.9em;
}

.sp3-scene.is-dragging .sp3-plug {
    cursor: grabbing;
}

.sp2-widget.sp2-locked .sp3-plug {
    cursor: not-allowed;
}

.sp3-plug:focus-visible .sp3-plug-body {
    box-shadow: var(--sp3-raise), 0 0 0 0.22em rgba(var(--sp2-rgb), 0.5);
}

.sp3-plug-float {
    inset: 0;
    animation: sp3-bob 3.4s ease-in-out infinite;
}

.sp3-plug-shadow {
    left: 0.7em;
    width: 3.2em;
    top: 3.15em;
    height: 0.55em;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.32), transparent);
    animation: sp3-bob-shadow 3.4s ease-in-out infinite;
    transition: opacity 0.4s ease;
}

.sp3-scene.is-plugged .sp3-plug-float,
.sp3-scene.is-plugged .sp3-plug-shadow,
.sp3-scene.is-dragging .sp3-plug-float,
.sp3-scene.is-dragging .sp3-plug-shadow {
    animation: none;
}

.sp3-scene.is-plugged .sp3-plug-shadow {
    opacity: 0.45;
}

@keyframes sp3-bob {
    0%, 100% { transform: translateY(0.05em); }
    50%      { transform: translateY(-0.3em); }
}

@keyframes sp3-bob-shadow {
    0%, 100% { transform: scaleX(1);    opacity: 0.95; }
    50%      { transform: scaleX(0.82); opacity: 0.55; }
}

.sp3-plug-tail {
    left: 0;
    top: 0.6em;
    width: 0.9em;
    height: 1.2em;
    border-radius: 0.4em 0.1em 0.1em 0.4em;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 0.1em, transparent 0.1em 0.26em),
        var(--sp3-plug-c);
}

.sp3-plug-prongs {
    left: 3.6em;
    top: 0.55em;
    width: 1.2em;
    height: 1.3em;
}

.sp3-plug-prongs i {
    left: 0;
    width: 1.2em;
    height: 0.3em;
    border-radius: 0 0.15em 0.15em 0;
    background: linear-gradient(#f4f5f7, #b2b8c0 55%, #8a919b);
}

.sp3-plug-prongs i:first-child { top: 0; }
.sp3-plug-prongs i:last-child  { top: 1em; }

.sp3-plug-body {
    left: 0.7em;
    top: 0;
    width: 3em;
    height: 2.4em;
    border-radius: 0.6em 0.3em 0.3em 0.6em;
    background: var(--bg-primary);
    box-shadow: var(--sp3-raise);
}

.sp3-plug-grip {
    left: 0.45em;
    top: 0.5em;
    bottom: 0.5em;
    width: 1.05em;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 0.1em, transparent 0.1em 0.3em);
    border-radius: 0.1em;
}

[data-theme="dark"] .sp3-plug-grip,
body.dark-mode .sp3-plug-grip {
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0 0.1em, transparent 0.1em 0.3em);
}

.sp3-plug-dot {
    left: 2.1em;
    top: 50%;
    width: 0.36em;
    height: 0.36em;
    margin-top: -0.18em;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.55;
    transition: background-color 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease;
}

.sp2-widget[data-state="on"] .sp3-scene.is-plugged .sp3-plug-dot {
    background: rgb(var(--sp2-rgb));
    box-shadow: 0 0 0.4em rgba(var(--sp2-rgb), 0.95);
    opacity: 1;
}

/* Reddedildi (yetki / durum yok): fiş titrer */
.sp2-widget.is-denied .sp3-plug-float {
    animation: sp3-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes sp3-shake {
    10%, 90%      { transform: translateX(-0.1em); }
    20%, 80%      { transform: translateX(0.2em); }
    30%, 50%, 70% { transform: translateX(-0.35em); }
    40%, 60%      { transform: translateX(0.35em); }
}

@keyframes sp3-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Görünmezken dur ---------- */
.sp3-scene.sp3-paused *,
.sp3-scene.sp3-paused *::before,
.sp3-scene.sp3-paused *::after {
    animation-play-state: paused !important;
}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
    .sp3-scene *,
    .sp3-scene *::before,
    .sp3-scene *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}