To match the premium, modern UI shown in your image, we need to move away from standard HTML inputs and use **Custom Range Sliders** and a **Clean Card Layout**. Since Tilda blocks have limited styling for custom code, I have written a complete, self-contained **HTML/CSS/JS** solution. You can paste this into a single **T123 block**. ### The Enhanced "Tarifim" Calculator ```html ``` ### What changed in this version: 1. **Modern Layout:** It uses a split-screen "Card" design. The left side handles inputs; the right side acts as a "live receipt." 2. **Custom Sliders:** Standard HTML sliders are ugly. I used CSS to create wider, cleaner tracks with custom "thumbs" that look much more high-end. 3. **Responsive Design:** On mobile/tablets, the layout automatically stacks (the summary moves below the inputs). 4. **Live Updates:** I added `oninput="calculate()"` to every element. As the user drags the slider, the numbers on the right change instantly. 5. **Visual Cues:** * Added the **"-5%-dək"** badge for the 12-month option. * Added the **red savings badge** in the summary. * Used the specific Pashabank-style colors (Green for buttons, Red for discounts). ### How to use it in Tilda: 1. Open your Tilda editor. 2. Add a **T123 (HTML)** block. 3. Paste the entire code above into that block. 4. **Publish** the page to see the final result.