:where(.sddp-page) .text-link { width:fit-content }
/* A single, readable design example at a time. All demonstrations are illustrative. */
:where(.sddp-page) .product-scene { height:100%; animation:sddp-pd-scene-in .3s ease }
/* Seven disciplines, seven explicit scopes. Illustration frames remain equal. */
:where(.sddp-page) .product-service { overflow:hidden; min-width:0; display:flex; flex-direction:column }
/* Handoff and process illustrations follow their layout tracks, without floating connectors. */
@keyframes sddp-pd-scene-in {
from { opacity:.3; transform:translateY(var(--size-4)) }
to { opacity:1; transform:none }
}
/* Keep compact illustrative content inside its fixed scene frame. */
:where(.sddp-page) #baslangic .product-needs { gap:var(--size-22) }
:where(.sddp-page) #baslangic .product-needs>div { display:flex; flex-direction:column; align-items:flex-start; min-height:var(--size-260); padding:var(--size-30); background:var(--color-surface-secondary); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-10) }
:where(.sddp-page) #baslangic .product-needs .product-icon { background:var(--color-surface) }
:where(.sddp-page) #baslangic .product-needs p { margin-top:auto }
:where(.sddp-page) .product-services>.product-service:not(.sddp-route-card) { display:none }
:where(.sddp-page) .sddp-route-card { min-height:var(--size-580) }
:where(.sddp-page) .sddp-route-card .product-service-art { height:var(--size-210); flex-basis:var(--size-210); background:var(--color-primary); border-bottom-color:var(--color-illustration-487769); color:var(--color-white); padding:var(--size-24) }
:where(.sddp-page) .sddp-route-card .product-service-content { display:flex; flex:1; flex-direction:column }
:where(.sddp-page) .sddp-route-card .product-service-content>ul { margin-bottom:0 }
:where(.sddp-page) .sddp-route-card .text-link { margin-top:auto }
:where(.sddp-page) .sddp-card-diagram { display:block; width:min(var(--size-440),100%); height:var(--size-160); overflow:visible }
:where(.sddp-page) .sddp-card-diagram text { font-family:var(--font-family-body); letter-spacing:var(--letter-spacing-04em) }
:where(.sddp-page) .sddp-card-diagram .sddp-card-serif { font-family:var(--font-family-display); letter-spacing:var(--letter-spacing-negative-04em) }
@media(max-width:950px) {
:where(.sddp-page) #baslangic .product-needs { grid-template-columns:1fr; max-width:var(--size-720) }
:where(.sddp-page) #baslangic .product-needs>div { min-height:0 }
:where(.sddp-page) #baslangic .product-needs p { margin-top:0 }
}
@media(max-width:650px) {
:where(.sddp-page) #baslangic .product-needs>div { display:grid; grid-template-columns:var(--size-44) minmax(0,1fr); gap:0 var(--size-17); padding:var(--size-24) }
:where(.sddp-page) #baslangic .product-needs .product-icon { grid-row:1/3 }
:where(.sddp-page) #baslangic .product-needs h3 { margin:0 0 var(--size-10) }
:where(.sddp-page) #baslangic .product-needs p { grid-column:2 }
:where(.sddp-page) .sddp-route-card { min-height:0 }
:where(.sddp-page) .sddp-route-card .product-service-art { height:var(--size-185); flex-basis:var(--size-185); padding:var(--size-20) }
:where(.sddp-page) .sddp-card-diagram { height:var(--size-145) }
}
:where(.sddp-page) .feature-grid { border: none; overflow: visible; }