{{-- "Soluk gerçek harita" iskeleti (panel.js buildChartSkeletonSvg ile aynı görsel):
     derece cetveli, zodyak bandı, ev kolları, gezegen işaretçileri ve merkezde açı
     çizgileriyle gerçek bir natal haritayı andıran çok soluk taslak + üzerinden
     süpürülüp geçen parlak ışık bandı.
     class="chart-skeleton-svg" korunmalı: overlay ve slot mantığı bunu tanır. --}}
@php
    $gid = 'skelSweep' . ($skeletonId ?? '');
    $ink = '#9aa0b4';
    $soft = '#b7bccb';
    $pt = function (float $r, float $angle): array {
        $rad = deg2rad($angle - 90);
        return [round(400 + $r * cos($rad), 1), round(400 + $r * sin($rad), 1)];
    };
    $planetAngles = [18, 52, 88, 121, 148, 196, 232, 266, 299, 338];
    $chordPairs = [[18, 196], [52, 232], [88, 266], [121, 299], [148, 338], [18, 121], [52, 148], [232, 338], [196, 299], [88, 196]];
@endphp
<svg viewBox="-24 -24 848 848" xmlns="http://www.w3.org/2000/svg" class="chart-skeleton-svg">
    <defs>
        <linearGradient id="{{ $gid }}" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
            <stop offset="50%" stop-color="#ffffff" stop-opacity="0.85"/>
            <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
        </linearGradient>
    </defs>
    <g opacity="0.6">
        <circle cx="400" cy="400" r="384" fill="none" stroke="{{ $ink }}" stroke-width="2.5"/>
        <circle cx="400" cy="400" r="344" fill="none" stroke="{{ $ink }}" stroke-width="1.6"/>
        <circle cx="400" cy="400" r="152" fill="none" stroke="{{ $ink }}" stroke-width="1.6"/>
        <line x1="16" y1="400" x2="784" y2="400" stroke="{{ $ink }}" stroke-width="2.2"/>
        {{-- derece cetveli --}}
        @for ($d = 0; $d < 360; $d += 5)
            @php [$x1, $y1] = $pt($d % 10 === 0 ? 330 : 336, $d); [$x2, $y2] = $pt(344, $d); @endphp
            <line x1="{{ $x1 }}" y1="{{ $y1 }}" x2="{{ $x2 }}" y2="{{ $y2 }}" stroke="{{ $soft }}" stroke-width="1"/>
        @endfor
        {{-- zodyak bölmeleri + ev kolları --}}
        @foreach ([0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330] as $a)
            @php [$bx1, $by1] = $pt(344, $a); [$bx2, $by2] = $pt(384, $a); [$hx1, $hy1] = $pt(152, $a); [$hx2, $hy2] = $pt(330, $a); @endphp
            <line x1="{{ $bx1 }}" y1="{{ $by1 }}" x2="{{ $bx2 }}" y2="{{ $by2 }}" stroke="{{ $ink }}" stroke-width="2"/>
            <line x1="{{ $hx1 }}" y1="{{ $hy1 }}" x2="{{ $hx2 }}" y2="{{ $hy2 }}" stroke="{{ $soft }}" stroke-width="1.2"/>
        @endforeach
        {{-- zodyak glif yer tutucuları --}}
        @foreach ([15, 45, 75, 105, 135, 165, 195, 225, 255, 285, 315, 345] as $a)
            @php [$gx, $gy] = $pt(364, $a); @endphp
            <circle cx="{{ $gx }}" cy="{{ $gy }}" r="7" fill="none" stroke="{{ $ink }}" stroke-width="1.6"/>
        @endforeach
        {{-- gezegen işaretçileri --}}
        @foreach ($planetAngles as $i => $a)
            @php $r = 300 - ($i % 3) * 22; [$px, $py] = $pt($r, $a); [$tx, $ty] = $pt($r - 24, $a); @endphp
            <circle cx="{{ $px }}" cy="{{ $py }}" r="9" fill="{{ $ink }}"/>
            <circle cx="{{ $tx }}" cy="{{ $ty }}" r="3.5" fill="{{ $soft }}"/>
        @endforeach
        {{-- merkez açı çizgileri --}}
        @foreach ($chordPairs as $i => $pr)
            @php [$ax, $ay] = $pt(150, $pr[0]); [$bx, $by] = $pt(150, $pr[1]); @endphp
            <line x1="{{ $ax }}" y1="{{ $ay }}" x2="{{ $bx }}" y2="{{ $by }}" stroke="{{ $i % 2 ? $soft : $ink }}" stroke-width="1.2"/>
        @endforeach
    </g>
    <g transform="rotate(16 400 400)">
        <rect x="-320" y="-260" width="260" height="1360" fill="url(#{{ $gid }})">
            <animateTransform attributeName="transform" type="translate" from="-260 0" to="1420 0" dur="1.5s" repeatCount="indefinite"/>
        </rect>
    </g>
</svg>