/* ============================================================== FİYATOMATİK — UI-A6.12-F10 PROFESSIONAL ENGINE CARD PRESENTATION Presentation only. No engine logic. No API changes. No canonical image replacement. ============================================================== */ /* ========================================================== 1. HEADER / MAIN FİYATOMATİK LOGO ========================================================== */ .ft-brand { flex: 0 0 auto !important; min-width: 205px !important; } .ft-brand .ft-f4r2-main-logo, .ft-f4r2-main-logo { display: block !important; width: 175px !important; height: auto !important; max-width: 175px !important; max-height: 58px !important; object-fit: contain !important; object-position: left center !important; margin: 0 !important; padding: 0 !important; } /* ========================================================== 2. ENGINE CARD LEFT PANEL Image and text become separate columns. ========================================================== */ html body .ft-engine-card[data-engine] .ft-e1-engine-left { display: grid !important; grid-template-columns: 126px minmax(0, 1fr) !important; grid-template-rows: auto auto 1fr auto !important; column-gap: 22px !important; row-gap: 4px !important; align-items: start !important; position: relative !important; min-height: 214px !important; padding: 22px 22px 18px 20px !important; } /* ========================================================== 3. CANONICAL IMAGE CONTAINER ========================================================== */ html body .ft-engine-card[data-engine] .ft-e1-engine-left .ft-engine-head { display: flex !important; grid-column: 1 !important; grid-row: 1 / span 3 !important; align-self: start !important; justify-self: start !important; align-items: center !important; justify-content: center !important; width: 126px !important; height: 126px !important; min-width: 126px !important; min-height: 126px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; } /* Status badge inside old engine head remains suppressed. */ html body .ft-engine-card[data-engine] .ft-e1-engine-left .ft-engine-head .ft-engine-status { display: none !important; } /* ========================================================== 4. ENGINE ICON WRAPPER ========================================================== */ html body .ft-engine-card[data-engine] .ft-e1-engine-left .ft-engine-head .ft-engine-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 126px !important; height: 126px !important; min-width: 126px !important; min-height: 126px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; } /* ========================================================== 5. REAL WORDPRESS MEDIA IMAGE ========================================================== */ html body .ft-engine-card[data-engine] .ft-e1-engine-left .ft-engine-head .ft-engine-icon .ft-f4r2-engine-image { display: block !important; width: 122px !important; height: 122px !important; min-width: 122px !important; min-height: 122px !important; max-width: 122px !important; max-height: 122px !important; object-fit: contain !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; border: 0 !important; background: transparent !important; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important; border-radius: 22px !important; } /* ========================================================== 6. ENGINE NAME Text now begins AFTER the image column. ========================================================== */ html body .ft-engine-card[data-engine] .ft-e1-engine-left > strong { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; margin: 7px 0 0 0 !important; padding: 0 !important; position: relative !important; z-index: 2 !important; font-size: 21px !important; line-height: 1.08 !important; font-weight: 850 !important; letter-spacing: -0.35px !important; color: #0f172a !important; } /* ========================================================== 7. ENGINE SUBTITLE ========================================================== */ html body .ft-engine-card[data-engine] .ft-e1-engine-left > small { grid-column: 2 !important; grid-row: 2 !important; margin: 2px 0 0 0 !important; padding: 0 !important; position: relative !important; z-index: 2 !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 750 !important; } /* ========================================================== 8. ENGINE DESCRIPTION ========================================================== */ html body .ft-engine-card[data-engine] .ft-e1-engine-left > p { grid-column: 2 !important; grid-row: 3 !important; align-self: start !important; margin: 7px 0 0 0 !important; padding: 0 !important; position: relative !important; z-index: 2 !important; max-width: 255px !important; font-size: 13.5px !important; line-height: 1.52 !important; color: #64748b !important; } /* ========================================================== 9. LEFT PANEL FOOTER / STATUS / ARROW Full width under image + text. ========================================================== */ html body .ft-engine-card[data-engine] .ft-e1-engine-left .ft-engine-foot { grid-column: 1 / -1 !important; grid-row: 4 !important; width: 100% !important; margin-top: 13px !important; padding-top: 13px !important; align-self: end !important; } /* ========================================================== 10. RIGHT SUMMARY PANEL Give the larger visual panel breathing room. ========================================================== */ html body .ft-engine-card[data-engine] .ft-e1-engine-right { min-height: 214px !important; padding: 20px 22px 18px 22px !important; } /* ========================================================== 11. CARD ITSELF Preserve 2-column × 5-row architecture. ========================================================== */ html body .ft-engine-card[data-engine] { min-height: 214px !important; overflow: hidden !important; } /* ========================================================== 12. DESKTOP WIDTH REFINEMENT ========================================================== */ @media (min-width: 1180px) { html body .ft-engine-card[data-engine] .ft-e1-engine-left { grid-template-columns: 132px minmax(0, 1fr) !important; column-gap: 24px !important; padding-left: 22px !important; padding-right: 24px !important; } html body .ft-engine-card[data-engine] .ft-e1-engine-left .ft-engine-head, html body .ft-engine-card[data-engine] .ft-e1-engine-left .ft-engine-head .ft-engine-icon { width: 132px !important; height: 132px !important; min-width: 132px !important; min-height: 132px !important; } html body .ft-engine-card[data-engine] .ft-e1-engine-left .ft-engine-head .ft-engine-icon .ft-f4r2-engine-image { width: 128px !important; height: 128px !important; min-width: 128px !important; min-height: 128px !important; max-width: 128px !important; max-height: 128px !important; } } /* ========================================================== 13. SMALLER DESKTOP / TABLET SAFETY ========================================================== */ @media (max-width: 1100px) { .ft-brand { min-width: 170px !important; } .ft-brand .ft-f4r2-main-logo, .ft-f4r2-main-logo { width: 150px !important; max-width: 150px !important; } html body .ft-engine-card[data-engine] .ft-e1-engine-left { grid-template-columns: 104px minmax(0, 1fr) !important; column-gap: 16px !important; } html body .ft-engine-card[data-engine] .ft-e1-engine-left .ft-engine-head, html body .ft-engine-card[data-engine] .ft-e1-engine-left .ft-engine-head .ft-engine-icon { width: 104px !important; height: 104px !important; min-width: 104px !important; min-height: 104px !important; } html body .ft-engine-card[data-engine] .ft-e1-engine-left .ft-engine-head .ft-engine-icon .ft-f4r2-engine-image { width: 100px !important; height: 100px !important; min-width: 100px !important; min-height: 100px !important; max-width: 100px !important; max-height: 100px !important; } }