.sg-pg--rtl{direction:rtl;text-align:start}.sg-pg--rtl .sg-pg-detail__voice{border-left:none;border-right:3px solid var(--sg-primary, #0d5c4d)}.sg-pg{--sg-pg-fard: #0d5c4d;--sg-pg-wajib: #6b4c1e;--sg-pg-sunna: #3d5a80;font-family:inherit;color:var(--sg-on-surface, inherit)}:root[data-theme=dark] .sg-pg{--sg-pg-fard: #94d3c1;--sg-pg-wajib: #e9c176;--sg-pg-sunna: #8ab4d4}.sg-pg__head{margin-bottom:1.25rem}.sg-pg__title{margin:0 0 .5rem;font-size:clamp(1.25rem,2.5vw,1.5rem);font-weight:700;color:var(--sg-on-surface)}.sg-pg__intro{margin:0;font-size:.95rem;color:var(--sg-on-muted, #5c5855);line-height:1.55}.sg-pg__legend{margin-bottom:1.5rem;padding:1rem 1.1rem;border-radius:12px;background:var(--sg-container, #ebe8e4);border:1px solid color-mix(in srgb,var(--sg-outline, #8a8580) 35%,transparent)}.sg-pg__legend-title{margin:0 0 .65rem;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--sg-on-muted)}.sg-pg__legend-list{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1rem}.sg-pg-badge{display:inline-block;padding:.2rem .55rem;border-radius:999px;font-size:.78rem;font-weight:600;line-height:1.3}.sg-pg-badge--fard{background:color-mix(in srgb,var(--sg-pg-fard) 18%,transparent);color:var(--sg-pg-fard);border:1px solid color-mix(in srgb,var(--sg-pg-fard) 45%,transparent)}.sg-pg-badge--wajib{background:color-mix(in srgb,var(--sg-pg-wajib) 22%,transparent);color:var(--sg-pg-wajib);border:1px solid color-mix(in srgb,var(--sg-pg-wajib) 40%,transparent)}.sg-pg-badge--sunna{background:color-mix(in srgb,var(--sg-pg-sunna) 20%,transparent);color:var(--sg-pg-sunna);border:1px solid color-mix(in srgb,var(--sg-pg-sunna) 38%,transparent)}.sg-pg__layout{display:grid;grid-template-columns:1fr;gap:1.25rem}@media (min-width: 768px){.sg-pg__layout{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}}.sg-pg__panel{border-radius:14px;background:var(--sg-surface, #fff);border:1px solid color-mix(in srgb,var(--sg-outline, #8a8580) 28%,transparent);padding:1rem 1.1rem;box-shadow:0 1px 0 var(--sg-glow, rgba(0, 0, 0, .04))}.sg-pg__hint{margin:0 0 .75rem;font-size:.82rem;color:var(--sg-on-muted)}.sg-pg-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.35rem}.sg-pg-steps__btn{width:100%;display:flex;align-items:flex-start;gap:.65rem;text-align:start;padding:.65rem .75rem;border-radius:10px;border:1px solid transparent;background:var(--sg-container-high, #e3dfd8);color:inherit;cursor:pointer;font:inherit;transition:background .2s ease,border-color .2s ease,transform .15s ease}.sg-pg-steps__btn:hover{background:color-mix(in srgb,var(--sg-primary, #0d5c4d) 12%,var(--sg-container-high, #e3dfd8))}.sg-pg-steps__btn.is-active{border-color:color-mix(in srgb,var(--sg-primary, #0d5c4d) 55%,transparent);background:color-mix(in srgb,var(--sg-primary, #0d5c4d) 14%,var(--sg-container-high, #e3dfd8))}.sg-pg-steps__num{flex-shrink:0;width:1.6rem;height:1.6rem;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:.8rem;font-weight:700;background:var(--sg-primary, #0d5c4d);color:var(--sg-on-primary, #fff)}.sg-pg-steps__btn.is-active .sg-pg-steps__num{animation:sg-pg-pulse 1.4s ease-in-out infinite}@keyframes sg-pg-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.92}}.sg-pg-steps__text{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start;min-width:0}.sg-pg-steps__title{font-weight:600;font-size:.92rem;line-height:1.35}.sg-pg-steps__text .sg-pg-badge{font-size:.68rem;padding:.12rem .45rem}.sg-pg-detail__head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-bottom:.75rem}.sg-pg-detail__title{margin:0;font-size:1.15rem;font-weight:700}.sg-pg-detail__body{margin:0 0 1rem;font-size:.95rem;line-height:1.6;color:var(--sg-on-surface)}.sg-pg-detail__voice{margin-bottom:1rem;padding:.85rem 1rem;border-radius:10px;background:var(--sg-container, #ebe8e4);border-left:3px solid var(--sg-primary, #0d5c4d)}.sg-pg-detail__voice-title{margin:0 0 .35rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--sg-on-muted)}.sg-pg-detail__voice-body{margin:0;font-size:.9rem;line-height:1.55}.sg-pg-figure{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:.5rem}.sg-pg-figure__label{margin:0;font-size:.72rem;color:var(--sg-on-muted);text-transform:uppercase;letter-spacing:.06em}.sg-pg-figure__svg{display:block;overflow:visible;transition:transform .55s cubic-bezier(.4,0,.2,1)}.sg-pg-figure__ground{stroke:var(--sg-outline);stroke-width:2;stroke-linecap:round;opacity:.45}.sg-pg-figure__head{fill:none;stroke:var(--sg-primary);stroke-width:2.5}.sg-pg-figure__torso,.sg-pg-figure__arm,.sg-pg-figure__leg{stroke:var(--sg-on-surface);stroke-width:3;stroke-linecap:round}.sg-pg-figure__body,.sg-pg-figure__arms,.sg-pg-figure__legs{transform-origin:0 0;transition:transform .55s cubic-bezier(.4,0,.2,1)}.sg-pg-figure__svg--standing_takbir .sg-pg-figure__arms{transform:rotate(-55deg)}.sg-pg-figure__svg--standing .sg-pg-figure__arms{transform:rotate(12deg)}.sg-pg-figure__svg--standing .sg-pg-figure__arm--l{transform:rotate(-35deg);transform-origin:0 4px}.sg-pg-figure__svg--standing .sg-pg-figure__arm--r{transform:rotate(35deg);transform-origin:0 4px}.sg-pg-figure__svg--ruku .sg-pg-figure__body{transform:rotate(68deg) translate(8px,18px)}.sg-pg-figure__svg--ruku .sg-pg-figure__arms{transform:rotate(-20deg)}.sg-pg-figure__svg--itidal .sg-pg-figure__body{transform:translateY(4px)}.sg-pg-figure__svg--itidal .sg-pg-figure__arms{transform:translateY(-6px)}.sg-pg-figure__svg--sujud .sg-pg-figure__body{transform:rotate(88deg) translate(22px,48px) scale(.92)}.sg-pg-figure__svg--sujud .sg-pg-figure__arms{transform:rotate(-95deg) translate(-4px,8px)}.sg-pg-figure__svg--julus .sg-pg-figure__body{transform:translateY(36px) scale(.95)}.sg-pg-figure__svg--julus .sg-pg-figure__legs{transform:rotate(-70deg) translate(-6px,4px)}.sg-pg-figure__svg--tashahhud .sg-pg-figure__body{transform:translateY(40px) scale(.94)}.sg-pg-figure__svg--tashahhud .sg-pg-figure__legs{transform:rotate(-55deg) translate(-4px,2px)}.sg-pg-figure__svg--tashahhud .sg-pg-figure__arms{transform:rotate(8deg) translateY(4px)}.sg-pg-figure__svg{animation:sg-pg-float 3.2s ease-in-out infinite}@keyframes sg-pg-float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}